2018-5-23 資深UI設(shè)計(jì)者
可拓展性原則是我自己瞎起的一個(gè)名字,高興的話你說彈性原則也行。主要意思是指界面設(shè)計(jì)要足夠的靈活,具有彈性,以滿足將來可能出現(xiàn)的場景。我第一次考慮這個(gè)問題是從去年7月份開始,當(dāng)時(shí)接到領(lǐng)導(dǎo)的一個(gè)臨時(shí)需求,要給直投項(xiàng)目增加一個(gè)到期查詢的功能。因?yàn)樵瓉淼慕缑嬖O(shè)計(jì)比較死板,所以突然加一個(gè)新功能導(dǎo)致整個(gè)布局都被打亂了,結(jié)果做的很不理想。當(dāng)時(shí)我就希望可以找到一個(gè)方法來應(yīng)對(duì)領(lǐng)導(dǎo)這種突如其來的需求。
產(chǎn)品設(shè)計(jì)的可拓展性就是為了應(yīng)對(duì)將來未知的改變。改變來自于功能的改變,因?yàn)楫a(chǎn)品是由一個(gè)個(gè)功能組成的。功能的改變可以分為兩類:數(shù)量的改變和狀態(tài)的改變。當(dāng)然這里不涉及到具體的功能設(shè)計(jì),只是探討功能入口的展示。
數(shù)量的改變指的是功能的增加,刪減與合并。多數(shù)是指新功能的增加,這就要求我們?cè)诮缑妫ú季郑┰O(shè)計(jì)中要給將來可能添加的新功能預(yù)留坑位。在哪里預(yù)留坑位?又給哪些功能預(yù)留呢?這里我就例舉最常見的兩種界面布局(導(dǎo)航)樣式來說:宮格式布局和列表式布局。
不知道大家有沒有注意到一個(gè)現(xiàn)象:一級(jí)頁面中主要用宮格式布局,而二級(jí),三級(jí)頁面多數(shù)用列表式布局。這主要是因?yàn)橐患?jí)頁面是產(chǎn)品的門戶和臉面,而且又多屬于功能的聚合頁,特別是首頁,這就要求一級(jí)頁面在展示足夠多入口的同時(shí)還要兼顧視覺吸引力。而以icon,插畫,圖像為主要表現(xiàn)形式的宮格式布局在視覺設(shè)計(jì)上更容易出彩。特別是icon,在相同的空間里,可以展示更多的入口。
但是其缺點(diǎn)就是可拓展性差,不管是2*5還是3*4,你如果想單獨(dú)新增一個(gè)功能,界面就會(huì)失衡。當(dāng)然我們可以給用戶提供分頁,這就意味著有些功能需要用戶滑動(dòng)才能看到,具有一定的風(fēng)險(xiǎn)。
還有一種方法就是提供全部按鈕,用戶點(diǎn)擊可以查看全部功能。
列表式布局就沒有這方面的顧慮,它可以在不打破界面布局的情況下增加新功能入口,但是它的缺點(diǎn)在于可展示的入口太少了。宮格式布局一屏可以展示20多個(gè)入口,而列表式布局只能達(dá)到其一半的水平。
這也是經(jīng)常困擾設(shè)計(jì)師的一個(gè)問題,因?yàn)閿?shù)據(jù)反饋一個(gè)頁面超過一屏往下內(nèi)容的點(diǎn)擊量是急劇下滑的,所以一般的一級(jí)頁面都不會(huì)設(shè)計(jì)的很長。如何在有限的空間里展示足夠多的入口呢?
沒有什么是可以難倒我們?cè)O(shè)計(jì)師的,最近我看到一些產(chǎn)品在底部欄tab里動(dòng)起了心思。以蘇寧易購為例,當(dāng)你點(diǎn)擊進(jìn)入「發(fā)現(xiàn)」,tab會(huì)變成「直播大廳」;點(diǎn)擊進(jìn)入「首頁」,tab會(huì)變成「猜你喜歡」。所以雖然只有5個(gè)坑位但是塞進(jìn)了7個(gè)tab,這是一個(gè)很好的思路。
還有在京東首頁中,用戶下拉會(huì)進(jìn)入520專屬活動(dòng)頁面。同樣的還有微信,用戶下拉直接顯示你最近打開的小程序。但是目前來說,大多數(shù)用戶還認(rèn)為下拉只能刷新界面,對(duì)于「下拉發(fā)現(xiàn)新功能」足夠的缺乏認(rèn)知。這樣的入口可以吸引多少的流量還有待檢驗(yàn)。
對(duì)于一級(jí)頁面我還有一個(gè)建議:千萬不要隨意把功能入口放在頂部欄上。因?yàn)閷?duì)于一些小功能的迭代,入口放在哪里都一樣,用戶看得到很好,看不到也無所謂。但是如果要上線一些層級(jí)比較高的功能,又不想打亂界面的原有布局,最好放到頂部欄上。特別是你的界面中如果還沒有搜索、城市定位、分享、篩選、通知等全局功能,一定要把頂部欄的位置空出來。文章開頭我說的「到期查詢」其實(shí)就屬于篩選功能。
上面也說了,本文所提到的可拓展性指的是入口的可拓展性。那么入口在狀態(tài)上的變化可以分為外部狀態(tài)變化和內(nèi)部狀態(tài)變化。
外部狀態(tài)變化主要說的產(chǎn)品層面的變化,針對(duì)的是C端產(chǎn)品。對(duì)C端產(chǎn)品來說,定期組織營銷活動(dòng)來拉新肯定是必不可少的。這種情況下我們需要對(duì)界面的元素進(jìn)行處理使其來適應(yīng)不同的活動(dòng)氛圍。從這個(gè)方面來說,我們可以發(fā)現(xiàn)為什么宮格式布局更容易受到各大電商平臺(tái)的青睞。因?yàn)樗梢愿鶕?jù)不同的活動(dòng)配置一套完全不同的icon,靈活多變。這種狀態(tài)上的百變來打造營銷氛圍的能力是列表式布局所不具備的。
列表式布局可以向用戶傳遞更多的信息,更能表現(xiàn)內(nèi)部狀態(tài)的變化。以下圖為例,用戶可以知道自己還有一張優(yōu)惠券沒有使用,知道自己本月還有126元沒還。而宮格式布局礙于空間,很難向用戶展示過多的信息。
以上方的日歷為例,近期做了一個(gè)拆紅包活動(dòng),用以icon為主的宮格布局只能加一個(gè)「拆紅包」的角標(biāo)。如果采用了列表式布局,可以直接展示金額,更能起到刺激用戶的作用。
寫分析總結(jié)寫到現(xiàn)在讀者越來越多,所以愈發(fā)擔(dān)心自己寫的不好會(huì)誤導(dǎo)別人。對(duì)于設(shè)計(jì)來說,無所謂對(duì)錯(cuò),只有合適和不合適。就像上面提到的兩種布局方式,在列表式布局中你可以隨意添加新功能,但是礙于空間,可添加的功能數(shù)目也不會(huì)太多;宮格式布局倒是不怕入口放不下,但是會(huì)引起界面的失衡。設(shè)計(jì)師的能力就體現(xiàn)在收集用戶數(shù)據(jù),分析具體場景,去思考得出最合理布局樣式。不要拘泥于解決方案,因?yàn)榻鉀Q方案有很多,我們要學(xué)習(xí)的是解決方案中所體現(xiàn)的思維方式和過程。
以上就是我針對(duì)產(chǎn)品設(shè)計(jì)中可拓展性原則的一個(gè)簡單分析總結(jié),歡迎大家留言討論。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn