前段時(shí)間有一個(gè)朋友微信問我有沒有看到過哪款產(chǎn)品把搜索功能放在界面中間的，然后給我發(fā)了一張?jiān)蛨D缀蹄。我第一眼看到這個(gè)原型圖就覺得界面的信息布局很亂，像是把兩三個(gè)頁面的內(nèi)容強(qiáng)行塞到一個(gè)頁面晶姊。
界面里信息太多不知道怎么布局童番，我相信這個(gè)問題大家在日常工作也經(jīng)常會(huì)遇到。內(nèi)容獲取難度的降低恕齐，意味著內(nèi)容篩選難度的提高乞娄。產(chǎn)品不斷的迭代，功能越來越多。
如何使產(chǎn)品避免在界面布局上越來越臃腫仪或？——“極簡(jiǎn)主義”或許是這個(gè)問題的答案确镊。
什么是極簡(jiǎn)主義？從字面上理解：極致簡(jiǎn)約范删。設(shè)計(jì)上的簡(jiǎn)約可以分為兩種：內(nèi)容簡(jiǎn)約和形式簡(jiǎn)約蕾域。
以上面的那個(gè)例子來說，搜索功能是內(nèi)容到旦，搜索框是搜索功能的展示形式旨巷。最近騰訊推出了新的產(chǎn)品：MOO音樂，所以我這篇文章正好借著分析這款產(chǎn)品來聊一聊界面布局中的極簡(jiǎn)主義添忘。
內(nèi)容簡(jiǎn)約
我們給一個(gè)頁面做簡(jiǎn)化采呐，第一步應(yīng)該確定界面中每一個(gè)元素存在的必要性。界面中元素那么多搁骑，但并不是每一個(gè)元素都有存在的必要斧吐，存在不一定合理。
弄清楚界面中每一個(gè)元素的實(shí)際作用仲器，進(jìn)行評(píng)估煤率，對(duì)于一些作用有限的純裝飾性元素，為了界面的簡(jiǎn)潔娄周，我們可以刪除涕侈。
1. 旋轉(zhuǎn)唱片
幾款常用的音樂類應(yīng)用播放界面的主體都是一個(gè)旋轉(zhuǎn)的唱片，而MOO音樂直接去掉了這個(gè)唱片煤辨。為什么裳涛？因?yàn)檫@個(gè)“唱片”占據(jù)了界面大約一半的空間，導(dǎo)致切換歌曲众辨、調(diào)整播放進(jìn)度端三、查看歌詞/歌手/專輯和分享這些常用功能必須在剩下的空間里排布，顯得很擁擠鹃彻。
去除這個(gè)虛擬的“唱片”給我們帶來不僅僅是視覺上的輕量感郊闯，更意味著易用性上提升。用戶在MOO音樂中切換歌曲蛛株、調(diào)整播放進(jìn)度团赁、返回上一級(jí)頁面等都可以通過滑動(dòng)手勢(shì)來完成。并且它是幾款音樂產(chǎn)品中谨履，唯一一個(gè)支持上下滑動(dòng)切換歌曲的欢摄，網(wǎng)易云音樂是左右滑動(dòng)切換歌曲，而QQ音樂直接不支持笋粟，用戶必須點(diǎn)擊才能切換歌曲怀挠。
我在之前的文章用戶體驗(yàn)之點(diǎn)擊和滑動(dòng)也提到過析蝴，滑動(dòng)手勢(shì)比點(diǎn)擊更容易受到用戶的青睞。
當(dāng)然可能會(huì)有人反駁绿淋，你看網(wǎng)易云音樂也是有唱片闷畸，但是它還是支持滑動(dòng)的。脫離手指落點(diǎn)去談手勢(shì)都是耍流氓吞滞。網(wǎng)易云音樂中手指落點(diǎn)在唱片內(nèi)是切換歌曲佑菩，落點(diǎn)在唱片外是返回上一級(jí)頁面，落點(diǎn)稍有不慎就會(huì)造成誤操作冯吓。而MOO音樂是上下滑動(dòng)切換歌曲倘待，左滑動(dòng)返回上一界面。手指落點(diǎn)更模糊组贺，用戶也就可以減少找位置的時(shí)間凸舵，用戶體驗(yàn)更好。
此外網(wǎng)易云音樂中用戶要播放/暫停歌曲必須點(diǎn)擊播放/暫停按鈕失尖，而MOO音樂中你只要點(diǎn)擊屏幕中任何位置就可以完成這一操作啊奄。為什么MOO音樂可以這么任性？因?yàn)榭臻g大掀潮，不怕用戶會(huì)誤操作菇夸。
2. 去線化
去線化設(shè)計(jì)是極簡(jiǎn)主義的一大特征。在MOO音樂中仪吧，我沒有找到一條分割線庄新。要知道為什么MOO音樂可以選擇去除分割線，我們首先要弄清楚分割線在界面布局中到底起什么作用薯鼠。分割線主要是幫助用戶區(qū)分界面中不同級(jí)別和維度的內(nèi)容择诈，完成信息層級(jí)的構(gòu)建。
分割線可以分為兩種：通欄分割線和非通欄分割線出皇。通欄分割線顧名思義就是指分割線貫穿整個(gè)屏幕羞芍，而非通欄分割線一般會(huì)留有缺口。要了解這倆的區(qū)別郊艘，我們可以看虎撲荷科，虎撲之前的版本就是通欄分割線，而最新的版本中改成了非通欄分割線纱注。
通欄分割線因?yàn)椤胺指睢绷苏麄€(gè)屏幕畏浆，所以在內(nèi)容區(qū)分上更加的明顯，更能表現(xiàn)不同的模塊之間的獨(dú)立性狞贱。但是它的缺點(diǎn)在于線條的存在會(huì)阻礙用戶的瀏覽視線刻获，影響信息的獲取效率。
可能會(huì)有人說斥滤，既然線條的存在會(huì)影響信息的瀏覽效率将鸵，為什么只有MOO音樂完全貫徹了去線化設(shè)計(jì)呢？我們?cè)倏匆粋€(gè)例子佑颇，我把微信朋友圈中的分割線給去掉顶掉，大家感受一下前后的區(qū)別。
我們可以發(fā)現(xiàn)去掉線條后挑胸，朋友圈的界面會(huì)稍顯雜亂痒筒。這是因?yàn)榕笥讶χ袃?nèi)容類別有很多，你可以發(fā)純文字動(dòng)態(tài)茬贵、分享歌曲簿透、視頻和文章。你上傳照片張數(shù)不一樣展示的效果也是不一樣的解藻。
而MOO音樂中的界面布局恪守著嚴(yán)格的規(guī)則老充，整個(gè)界面有規(guī)律可循。所以我們可以把分割線看成是一堵墻螟左，它可以把把雜亂無序的信息強(qiáng)行區(qū)分歸類啡浊，而對(duì)于本來信息布局就很有條理的頁面來說我們完全可以考慮去除分割線，直接使用間距來完成視覺區(qū)分胶背。
不止是線條巷嚣，我還發(fā)現(xiàn)MOO音樂中很少出現(xiàn)頁面標(biāo)題。標(biāo)題的作用是告訴用戶你當(dāng)前正在瀏覽的是什么頁面钳吟，但是用戶根據(jù)內(nèi)容也能感知到這是一個(gè)什么頁面廷粒。標(biāo)題的作用不是很大，我們可以刪除红且。大家可能會(huì)說坝茎，反正這里空著也是空著，加上線條和標(biāo)題應(yīng)該無傷大雅直焙【岸可是極簡(jiǎn)主義所追求的就是刪除這些可有可無的雞肋元素。
形式簡(jiǎn)約
如果我們無法刪減內(nèi)容量奔誓，那么我們就要思考“同樣的內(nèi)容我們是否可以尋求更為簡(jiǎn)潔的表現(xiàn)方式斤吐？”。例如同樣的歌曲播放條厨喂，MOO音樂做的比QQ音樂要小和措，這樣對(duì)界面遮擋的更少。
但是這樣的簡(jiǎn)化更多是流于表面蜕煌，怎么從更深層級(jí)進(jìn)行簡(jiǎn)化呢派阱？這里我列舉出三個(gè)優(yōu)化點(diǎn)：臨時(shí)視圖、隱藏機(jī)制和功能性動(dòng)效斜纪。
1. 臨時(shí)視圖
我們都習(xí)慣于將頁面作為內(nèi)容的容器贫母，導(dǎo)致頁面內(nèi)容過于臃腫文兑。其實(shí)對(duì)于某些內(nèi)容，我們可以考慮使用一些臨時(shí)視圖來承載腺劣。
為什么大多數(shù)產(chǎn)品把搜索功能放在界面頂部而不是中間绿贞？因?yàn)樗阉鞴δ苡脩羰褂妙l率很高，我們必須要保證它對(duì)用戶來說是觸手可及的橘原，可以很容易的被發(fā)現(xiàn)籍铁。所以我們會(huì)把搜索框放在界面頂部，如果我們想把搜索功能放在其他位置趾断，必須解決一個(gè)問題——如何在不依靠位置的前提下凸顯搜索功能的優(yōu)先級(jí)拒名？
以鏈家中的“地圖找房”功能，這個(gè)搜索功能就出現(xiàn)在界面中間芋酌，它這里使用的是浮窗增显，并且加了陰影，拉近與用戶之間的“距離”脐帝。離用戶越近的元素甸怕，用戶也更容易感知，在界面布局中引入Z軸的縱向維度腮恩。
2. 隱藏機(jī)制
隱藏機(jī)制所代表的是一種靈活的布局思路梢杭。界面中有那么多功能，但并不是每一個(gè)功能用戶都是全程需要的秸滴。如果我們可以感知到用戶在某些場(chǎng)景下對(duì)特定的功能訴求很低武契，那么我們就可以考慮隱藏這個(gè)功能。
在MOO音樂中荡含，當(dāng)用戶向上滑動(dòng)咒唆，頂部的搜索框是隱藏的；當(dāng)用戶向下滑動(dòng)释液，搜索框是展示的全释。為什么這樣處理呢？因?yàn)楫?dāng)用戶向上滑動(dòng)误债，說明用戶在瀏覽今日推薦的音樂信息浸船，對(duì)于搜索框的訴求不是很大。為了可以給用戶提供更多的瀏覽空間寝蹈，我們考慮隱藏搜索框李命。但是當(dāng)用戶向下滑動(dòng)，最可能的場(chǎng)景是用戶對(duì)當(dāng)前推薦的歌曲不滿意箫老，他需要回到頂部手動(dòng)搜索歌曲封字，那么這個(gè)時(shí)候再展示搜索框是很合適的。
3. 功能性動(dòng)效
功能性動(dòng)效的合理使用可以很好的緩解頁面布局的壓力。以喜馬拉雅FM為例阔籽，身為產(chǎn)品方流妻，為了提升用戶粘性，我肯定希望用戶去錄音上傳作品笆制，所以我們將這個(gè)“錄音”按鈕做成大色塊的樣式合冀，的確很醒目。但是這種處理方式使界面失衡项贺，后面改版后，使用動(dòng)效進(jìn)行引導(dǎo)峭判。
當(dāng)用戶首次進(jìn)入這個(gè)頁面开缎，“我要錄音”按鈕會(huì)出現(xiàn)水波紋動(dòng)效，來吸引用戶注意力林螃。
類似的案例還有奕删，當(dāng)用戶點(diǎn)贊歌曲時(shí)，網(wǎng)易云音樂和QQ音樂都會(huì)出現(xiàn)動(dòng)效引導(dǎo)用戶去分分享歌曲疗认。當(dāng)你點(diǎn)贊這首歌完残，那么我們可以默認(rèn)你很欣賞這首歌，那么何不把這首歌分享給你的朋友呢横漏？抓住合適的時(shí)間做引導(dǎo)/誘導(dǎo)谨设，用戶更容易去分享。
如果我們不考慮這個(gè)場(chǎng)景缎浇，把分享按鈕做的特別醒目扎拣，對(duì)于不想分享的用戶來說反而是一個(gè)干擾。
這就是我對(duì)界面布局中的“極簡(jiǎn)主義”做的一個(gè)總結(jié)素跺，歡迎留言討論二蓝。
