王(wang)M爭：前(qian)段(duan)時間(jian)有一(yi)個朋友(you)問(wen)我(wo)(wo)有沒有看到(dao)過哪款(kuan)產品是把搜索(suo)功能放在界面中間(jian)的，然后給(gei)我(wo)(wo)發了一(yi)張原型(xing)圖。我(wo)(wo)第一(yi)眼看到(dao)這個原型(xing)圖就覺得界面的信息布局很亂(luan)，像是把兩三個頁面的內容強行(xing)塞到(dao)一(yi)個頁面。
界(jie)面(mian)里(li)信息太多(duo)不知(zhi)道怎么布局，我相信這個(ge)(ge)問題(ti)大家(jia)在日常工作也經(jing)常會遇到。內容獲(huo)取難(nan)度(du)的(de)降低，意味著內容篩(shai)選難(nan)度(du)的(de)提高。產品不斷的(de)迭代，功能(neng)越來越多(duo)。如何(he)避免產品在界(jie)面(mian)布局上越來越臃腫？「極簡主義」或許是這個(ge)(ge)問題(ti)的(de)答(da)案。
什么是極簡(jian)主義(yi)？從字面(mian)上理解(jie)：極致(zhi)簡(jian)約(yue)。設計上的(de)(de)簡(jian)約(yue)可(ke)以分(fen)為兩種(zhong)：內容(rong)簡(jian)約(yue)和形(xing)式簡(jian)約(yue)。以上面(mian)的(de)(de)那個例子來(lai)說，搜索(suo)功能是內容(rong)，搜索(suo)框是搜索(suo)功能的(de)(de)展示(shi)形(xing)式。最近騰訊推出了新(xin)的(de)(de)產(chan)品(pin)：MOO音樂，所以文章(zhang)正好借著這款(kuan)產(chan)品(pin)來(lai)聊一聊界面(mian)布局中的(de)(de)極簡(jian)主義(yi)。
我(wo)們給(gei)一(yi)(yi)個(ge)(ge)頁(ye)面(mian)做簡(jian)化(hua)，第一(yi)(yi)步(bu)應該確定界面(mian)中每(mei)(mei)一(yi)(yi)個(ge)(ge)元(yuan)(yuan)(yuan)素(su)存在的必(bi)要性。界面(mian)中元(yuan)(yuan)(yuan)素(su)那么多，但并(bing)不是每(mei)(mei)一(yi)(yi)個(ge)(ge)元(yuan)(yuan)(yuan)素(su)都有(you)(you)存在的必(bi)要，存在不一(yi)(yi)定合理。弄清(qing)楚界面(mian)中每(mei)(mei)一(yi)(yi)個(ge)(ge)元(yuan)(yuan)(yuan)素(su)的實際(ji)作(zuo)用，進行評估，對于一(yi)(yi)些作(zuo)用有(you)(you)限(xian)的純裝飾性元(yuan)(yuan)(yuan)素(su)，為了界面(mian)的簡(jian)潔(jie)，我(wo)們可以(yi)刪除。
1. 旋轉唱片
幾款常用(yong)的(de)(de)音樂類應用(yong)播放界面(mian)的(de)(de)主體(ti)都是(shi)一(yi)個旋轉的(de)(de)唱(chang)片(pian)，而 MOO音樂直(zhi)接(jie)去(qu)掉了這(zhe)個唱(chang)片(pian)。為什(shen)么(me)？因(yin)為這(zhe)個「唱(chang)片(pian)」占(zhan)據(ju)了界面(mian)大約一(yi)半的(de)(de)空間，導致切換歌(ge)曲、調整播放進度、查看(kan)歌(ge)詞/歌(ge)手/專輯和(he)分享這(zhe)些常用(yong)功能必須在剩下的(de)(de)空間里排(pai)布(bu)，顯得很擁擠。
去除這個(ge)虛擬的(de)(de)「唱片」給我們帶來的(de)(de)不(bu)(bu)僅(jin)僅(jin)是視覺上的(de)(de)輕量感，更意(yi)味著易用性上提升。用戶(hu)在(zai) MOO音樂(le)中切換歌(ge)曲(qu)、調整播放進(jin)度(du)、返回上一級頁面等都可以通過滑動手勢來完(wan)成。并且它(ta)是幾款(kuan)音樂(le)產品中，唯一一個(ge)支持上下滑動切換歌(ge)曲(qu)的(de)(de)，網易云音樂(le)是左右(you)滑動切換歌(ge)曲(qu)，而 QQ音樂(le)直接(jie)不(bu)(bu)支持，用戶(hu)必須點擊才能(neng)切換歌(ge)曲(qu)。我在(zai)之前(qian)的(de)(de)文章也提到過，滑動手勢比(bi)點擊更容易受到用戶(hu)的(de)(de)青睞。
當然可(ke)能(neng)會有(you)人反駁，你看網(wang)易(yi)云(yun)音樂(le)(le)也是(shi)(shi)(shi)有(you)唱(chang)片(pian)，但是(shi)(shi)(shi)它(ta)還是(shi)(shi)(shi)支持(chi)滑動(dong)的。脫(tuo)離手(shou)(shou)指落(luo)點去(qu)談手(shou)(shou)勢都是(shi)(shi)(shi)耍流氓。網(wang)易(yi)云(yun)音樂(le)(le)中手(shou)(shou)指落(luo)點在(zai)唱(chang)片(pian)內是(shi)(shi)(shi)切換歌(ge)曲，落(luo)點在(zai)唱(chang)片(pian)外是(shi)(shi)(shi)返回上(shang)一(yi)級(ji)頁面，落(luo)點稍有(you)不慎(shen)就會造成誤操作。而 MOO音樂(le)(le)是(shi)(shi)(shi)上(shang)下滑動(dong)切換歌(ge)曲，左滑動(dong)返回上(shang)一(yi)界面。手(shou)(shou)指落(luo)點更模糊，用(yong)戶也就可(ke)以(yi)減少找位置的時間，用(yong)戶體驗更好。
此(ci)外網易云音樂(le)(le)中用戶要(yao)播放/暫(zan)停歌(ge)曲必須點擊(ji)播放/暫(zan)停按鈕，而在 MOO音樂(le)(le)中只要(yao)點擊(ji)屏幕內的任何位置就可(ke)以完成這一操(cao)作(zuo)。為(wei)什么 MOO音樂(le)(le)可(ke)以這么任性？因為(wei)空間大(da)，不(bu)怕(pa)用戶會誤(wu)操(cao)作(zuo)。
2. 去線化
去(qu)線(xian)(xian)化設計(ji)是極簡(jian)主(zhu)義(yi)的一大特征。在(zai) MOO音樂中，我(wo)沒有(you)找到一條分(fen)割(ge)線(xian)(xian)。要知道為什么 MOO音樂可以選(xuan)擇去(qu)除分(fen)割(ge)線(xian)(xian)，我(wo)們首先要弄清楚分(fen)割(ge)線(xian)(xian)在(zai)界面(mian)布局中到底起什么作(zuo)用(yong)。分(fen)割(ge)線(xian)(xian)主(zhu)要是幫(bang)助(zhu)用(yong)戶區分(fen)界面(mian)中不(bu)同級別和維度的內(nei)容，完成(cheng)信息層級的構建。
分(fen)(fen)割(ge)(ge)線(xian)可(ke)以(yi)(yi)分(fen)(fen)為兩(liang)種：通(tong)(tong)欄(lan)分(fen)(fen)割(ge)(ge)線(xian)和非通(tong)(tong)欄(lan)分(fen)(fen)割(ge)(ge)線(xian)。通(tong)(tong)欄(lan)分(fen)(fen)割(ge)(ge)線(xian)顧名(ming)思義就(jiu)是指(zhi)分(fen)(fen)割(ge)(ge)線(xian)貫穿整個屏幕，而非通(tong)(tong)欄(lan)分(fen)(fen)割(ge)(ge)線(xian)一(yi)般(ban)會留有缺口。要了解兩(liang)者的區別(bie)，我(wo)們(men)可(ke)以(yi)(yi)看虎撲(pu)，虎撲(pu)之前(qian)的版本(ben)就(jiu)是通(tong)(tong)欄(lan)分(fen)(fen)割(ge)(ge)線(xian)，而最新的版本(ben)中改成了非通(tong)(tong)欄(lan)分(fen)(fen)割(ge)(ge)線(xian)。
通欄分(fen)割線(xian)因為「分(fen)割」了整個屏幕，所以在內(nei)容區分(fen)上更加的(de)(de)明顯，更能表現(xian)不同的(de)(de)模塊之(zhi)間(jian)的(de)(de)獨立(li)性。但是它的(de)(de)缺點在于(yu)線(xian)條(tiao)的(de)(de)存在會阻礙用戶(hu)的(de)(de)瀏覽視線(xian)，影響(xiang)信息的(de)(de)獲(huo)取效率。
可能會有(you)(you)人說，既然(ran)線條的存在(zai)會影響信息的瀏覽效(xiao)率，為(wei)什么只有(you)(you) MOO音樂完全貫徹了去(qu)線化設(she)計呢？我(wo)們(men)再看一個例子(zi)，我(wo)把微信朋(peng)友圈中的分(fen)割(ge)線給去(qu)掉，大家感(gan)受一下前后的區別(bie)。
我們可以發現(xian)去掉(diao)線條后，朋友圈的(de)界面(mian)會(hui)稍(shao)顯(xian)雜亂。這是因為(wei)朋友圈中內容(rong)類別有很多，你(ni)可以發純文字動態、分(fen)享歌曲、視頻和(he)文章。你(ni)上傳照片張數不一樣(yang)展示的(de)效(xiao)果也是不一樣(yang)的(de)。
而(er) MOO音樂中的界(jie)面(mian)(mian)布局(ju)恪守著嚴格的規則(ze)，整個界(jie)面(mian)(mian)有規律可(ke)(ke)循(xun)。所以我們可(ke)(ke)以把分割線(xian)看成是(shi)一堵(du)墻，它可(ke)(ke)以把雜亂無(wu)序(xu)的信(xin)息強行區分歸類，而(er)對于(yu)本來信(xin)息布局(ju)就很有條理(li)的頁面(mian)(mian)來說我們完全可(ke)(ke)以考慮去除分割線(xian)，直(zhi)接使用(yong)間(jian)距來完成視覺區分。
不止是線條(tiao)，我(wo)還發現(xian) MOO音樂中(zhong)很少出現(xian)頁面標(biao)(biao)(biao)題(ti)(ti)。標(biao)(biao)(biao)題(ti)(ti)的(de)作用(yong)是告(gao)訴用(yong)戶當前正在瀏(liu)覽的(de)是什么頁面，但是用(yong)戶根據內(nei)容(rong)也能(neng)(neng)感知(zhi)到這是一個什么頁面。標(biao)(biao)(biao)題(ti)(ti)的(de)作用(yong)不是很大(da)，我(wo)們可(ke)以刪(shan)除。大(da)家可(ke)能(neng)(neng)會說(shuo)，反正這里(li)空著也是空著，加(jia)上線條(tiao)和標(biao)(biao)(biao)題(ti)(ti)應該無傷(shang)大(da)雅。可(ke)是極簡(jian)主義所追求(qiu)的(de)就是刪(shan)除這些可(ke)有可(ke)無的(de)雞肋元(yuan)素。
如果(guo)我們(men)無法刪(shan)減(jian)內(nei)容(rong)量，那么(me)我們(men)就(jiu)要思(si)考「同樣(yang)的(de)內(nei)容(rong)我們(men)是否可(ke)以尋求更為簡(jian)潔(jie)的(de)表現(xian)方式？」。例如同樣(yang)的(de)歌(ge)曲播放條，MOO音樂(le)(le)做的(de)比(bi) QQ音樂(le)(le)要小(xiao)，這樣(yang)對界(jie)面遮擋的(de)更少。
但(dan)是這(zhe)樣的簡(jian)化(hua)更多是流于表面，怎么(me)從更深層級(ji)進行簡(jian)化(hua)呢？這(zhe)里我列舉(ju)出三個優化(hua)點：臨時(shi)視圖、隱(yin)藏機制和功(gong)能性動(dong)效。
1. 臨時視圖
我們(men)都習慣于將頁面作為(wei)內容(rong)的容(rong)器，導致(zhi)頁面內容(rong)過于臃(yong)腫。其(qi)實對于某些(xie)內容(rong)，我們(men)可(ke)以考(kao)慮使用(yong)一些(xie)臨時視圖(tu)來承載。
為什么大多數產品把搜(sou)索(suo)功(gong)(gong)能放在界面(mian)頂部而不(bu)是中間？因為用戶使用搜(sou)索(suo)功(gong)(gong)能的頻率(lv)很高，我們必須要保證(zheng)它對用戶來(lai)說是觸(chu)手可及的，可以很容易的被發現。所以我們會把搜(sou)索(suo)框放在界面(mian)頂部，如(ru)果我們想把搜(sou)索(suo)功(gong)(gong)能放在其他(ta)位(wei)置，必須解決(jue)一(yi)個問題——如(ru)何在不(bu)依靠位(wei)置的前(qian)提下凸顯(xian)搜(sou)索(suo)功(gong)(gong)能的優先級？
以鏈家中(zhong)(zhong)的「地(di)圖找房」功能，這個搜索功能就(jiu)出現在(zai)界面(mian)中(zhong)(zhong)間，它這里使用(yong)的是浮窗，并且(qie)加了陰影，拉近與用(yong)戶之間的「距離」。離用(yong)戶越近的元素，用(yong)戶也更容易感(gan)知，在(zai)界面(mian)布局中(zhong)(zhong)引入 Z軸的縱(zong)向維度。
2. 隱藏機制
隱藏機(ji)制(zhi)所(suo)代表的是(shi)一(yi)種靈活的布(bu)局思(si)路。界面(mian)中有那么(me)多功(gong)能(neng)，但(dan)并不是(shi)每一(yi)個功(gong)能(neng)用戶都是(shi)全程(cheng)需要的。如果我(wo)們(men)可以(yi)感知到用戶在某些(xie)場景下對特定的功(gong)能(neng)訴求(qiu)很低，那么(me)我(wo)們(men)就(jiu)可以(yi)考(kao)慮隱藏這個功(gong)能(neng)。
在(zai) MOO音樂中，當用(yong)(yong)戶(hu)(hu)向上(shang)滑(hua)動(dong)，頂(ding)部的(de)(de)(de)搜(sou)索框(kuang)(kuang)是(shi)隱藏的(de)(de)(de)；當用(yong)(yong)戶(hu)(hu)向下(xia)滑(hua)動(dong)，搜(sou)索框(kuang)(kuang)是(shi)展示(shi)的(de)(de)(de)。為什(shen)么這樣處理(li)呢？因為當用(yong)(yong)戶(hu)(hu)向上(shang)滑(hua)動(dong)，說(shuo)明用(yong)(yong)戶(hu)(hu)在(zai)瀏覽今日(ri)推薦的(de)(de)(de)音樂信息，對(dui)于搜(sou)索框(kuang)(kuang)的(de)(de)(de)訴求不是(shi)很大(da)。為了可以給用(yong)(yong)戶(hu)(hu)提供更多的(de)(de)(de)瀏覽空間，我們考(kao)慮隱藏搜(sou)索框(kuang)(kuang)。但是(shi)當用(yong)(yong)戶(hu)(hu)向下(xia)滑(hua)動(dong)，最可能的(de)(de)(de)場景是(shi)用(yong)(yong)戶(hu)(hu)對(dui)當前推薦的(de)(de)(de)歌(ge)曲不滿意，他需要回到(dao)頂(ding)部手動(dong)搜(sou)索歌(ge)曲，那么這個時(shi)候再展示(shi)搜(sou)索框(kuang)(kuang)是(shi)很合適(shi)的(de)(de)(de)。
3. 功能性動效
功能(neng)性(xing)動效(xiao)的合(he)理使用(yong)(yong)(yong)可(ke)以很好的緩解頁面(mian)布局的壓力(li)。以喜馬拉雅(ya)FM 為例(li)，身為產品方，為了提升用(yong)(yong)(yong)戶粘性(xing)，我肯定希望用(yong)(yong)(yong)戶去錄(lu)音上傳作(zuo)品，所以我們將這個(ge)「錄(lu)音」按(an)鈕做成大(da)色塊的樣式(shi)，的確很醒目(mu)。但是這種處理方式(shi)使界面(mian)失衡，在改版(ban)后(hou)，使用(yong)(yong)(yong)動效(xiao)進(jin)行引導(dao)。當用(yong)(yong)(yong)戶首次進(jin)入這個(ge)頁面(mian)，「我要錄(lu)音」按(an)鈕會出現水波紋動效(xiao)，來吸(xi)引用(yong)(yong)(yong)戶注(zhu)意(yi)力(li)。
類似的案例還有當用戶(hu)點贊(zan)歌曲(qu)時，網易(yi)云音樂(le)和 QQ音樂(le)都會出現動效(xiao)引(yin)導(dao)用戶(hu)去分享(xiang)歌曲(qu)。當你點贊(zan)這首(shou)歌，我們可以(yi)默(mo)認你很欣賞(shang)這首(shou)歌，那么(me)何不(bu)把這首(shou)歌分享(xiang)給你的朋友呢(ni)？抓(zhua)住合(he)適的時間做(zuo)引(yin)導(dao)/誘導(dao)，用戶(hu)更容易(yi)去分享(xiang)。如果我們不(bu)考慮這個(ge)場景(jing)，把分享(xiang)按(an)鈕(niu)做(zuo)的特別醒目，對于(yu)不(bu)想分享(xiang)的用戶(hu)來(lai)說反(fan)而是一(yi)個(ge)干擾。
這就(jiu)是我對界面布(bu)局中的「極簡主義」做的一(yi)個總結(jie)，歡迎留言討論(lun)。
在線客服1號
微信公眾賬號