前段時(shí)間有一個(gè)朋友微信問(wèn)我有沒(méi)有看到過(guò)哪款產(chǎn)品把搜索功能放在界面中間的，然后給我發(fā)了一張?jiān)�型圖。我第一眼看到這個(gè)原型圖就覺得界面的信息布局很亂，像是把兩三個(gè)頁(yè)面的內(nèi)容強(qiáng)行塞到一個(gè)頁(yè)面。　　

　　界面里信息太多不知道怎么布局，我相信這個(gè)問(wèn)題大家在日常工作也經(jīng)常會(huì)遇到。內(nèi)容獲取難度的降低，意味著內(nèi)容篩選難度的提高。產(chǎn)品不斷的迭代，功能越來(lái)越多。如何使產(chǎn)品避免在界面布局上越來(lái)越臃腫?——“極簡(jiǎn)主義”或許是這個(gè)問(wèn)題的答案。

　　什么是極簡(jiǎn)主義?從字面上理解：極致簡(jiǎn)約。設(shè)計(jì)上的簡(jiǎn)約可以分為兩種：內(nèi)容簡(jiǎn)約和形式簡(jiǎn)約。以上面的那個(gè)例子來(lái)說(shuō)，搜索功能是內(nèi)容，搜索框是搜索功能的展示形式。最近騰訊推出了新的產(chǎn)品：MOO音樂(lè)，所以我這篇文章正好借著分析這款產(chǎn)品來(lái)聊一聊界面布局中的極簡(jiǎn)主義。　

　　內(nèi)容簡(jiǎn)約

　　我們給一個(gè)頁(yè)面做簡(jiǎn)化，第一步應(yīng)該確定界面中每一個(gè)元素存在的必要性。界面中元素那么多，但并不是每一個(gè)元素都有存在的必要，存在不一定合理。弄清楚界面中每一個(gè)元素的實(shí)際作用，進(jìn)行評(píng)估，對(duì)于一些作用有限的純裝飾性元素，為了界面的簡(jiǎn)潔，我們可以刪除。

　　1)旋轉(zhuǎn)唱片

　　幾款常用的音樂(lè)類應(yīng)用播放界面的主體都是一個(gè)旋轉(zhuǎn)的唱片，而MOO音樂(lè)直接去掉了這個(gè)唱片。為什么?因?yàn)檫@個(gè)“唱片”占據(jù)了界面大約一半的空間，導(dǎo)致切換歌曲、調(diào)整播放進(jìn)度、查看歌詞/歌手/專輯和分享這些常用功能必須在剩下的空間里排布，顯得很擁擠。　

　　去除這個(gè)虛擬的“唱片”給我們帶來(lái)不僅僅是視覺上的輕量感，更意味著易用性上提升。用戶在MOO音樂(lè)中切換歌曲、調(diào)整播放進(jìn)度、返回上一級(jí)頁(yè)面等都可以通過(guò)滑動(dòng)手勢(shì)來(lái)完成。并且它是幾款音樂(lè)產(chǎn)品中，唯一一個(gè)支持上下滑動(dòng)切換歌曲的，網(wǎng)易云音樂(lè)是左右滑動(dòng)切換歌曲，而QQ音樂(lè)直接不支持，用戶必須點(diǎn)擊才能切換歌曲。我在之前的文章用戶體驗(yàn)之點(diǎn)擊和滑動(dòng)也提到過(guò)，滑動(dòng)手勢(shì)比點(diǎn)擊更容易受到用戶的青睞。　

　　當(dāng)然可能會(huì)有人反駁，你看網(wǎng)易云音樂(lè)也是有唱片，但是它還是支持滑動(dòng)的。脫離手指落點(diǎn)去談手勢(shì)都是耍流氓。網(wǎng)易云音樂(lè)中手指落點(diǎn)在唱片內(nèi)是切換歌曲，落點(diǎn)在唱片外是返回上一級(jí)頁(yè)面，落點(diǎn)稍有不慎就會(huì)造成誤操作。而MOO音樂(lè)是上下滑動(dòng)切換歌曲，左滑動(dòng)返回上一界面。手指落點(diǎn)更模糊，用戶也就可以減少找位置的時(shí)間，用戶體驗(yàn)更好。　

　　此外網(wǎng)易云音樂(lè)中用戶要播放/暫停歌曲必須點(diǎn)擊播放/暫停按鈕，而MOO音樂(lè)中你只要點(diǎn)擊屏幕中任何位置就可以完成這一操作。為什么MOO音樂(lè)可以這么任性?因?yàn)榭臻g大，不怕用戶會(huì)誤操作。　

　　2)去線化

　　去線化設(shè)計(jì)是極簡(jiǎn)主義的一大特征。在MOO音樂(lè)中，我沒(méi)有找到一條分割線。要知道為什么MOO音樂(lè)可以選擇去除分割線，我們首先要弄清楚分割線在界面布局中到底起什么作用。分割線主要是幫助用戶區(qū)分界面中不同級(jí)別和維度的內(nèi)容，完成信息層級(jí)的構(gòu)建。

　　分割線可以分為兩種：通欄分割線和非通欄分割線。通欄分割線顧名思義就是指分割線貫穿整個(gè)屏幕，而非通欄分割線一般會(huì)留有缺口。要了解這倆的區(qū)別，我們可以看虎撲，虎撲之前的版本就是通欄分割線，而最新的版本中改成了非通欄分割線。　

　　通欄分割線因?yàn)椤胺指睢绷苏麄�(gè)屏幕，所以在內(nèi)容區(qū)分上更加的明顯，更能表現(xiàn)不同的模塊之間的獨(dú)立性。但是它的缺點(diǎn)在于線條的存在會(huì)阻礙用戶的瀏覽視線，影響信息的獲取效率。

　　可能會(huì)有人說(shuō)，既然線條的存在會(huì)影響信息的瀏覽效率，為什么只有MOO音樂(lè)完全貫徹了去線化設(shè)計(jì)呢?我們?cè)倏匆粋�(gè)例子，我把微信朋友圈中的分割線給去掉，大家感受一下前后的區(qū)別。　　

　　我們可以發(fā)現(xiàn)去掉線條后，朋友圈的界面會(huì)稍顯雜亂。這是因?yàn)榕笥讶χ袃?nèi)容類別有很多，你可以發(fā)純文字動(dòng)態(tài)、分享歌曲、視頻和文章。你上傳照片張數(shù)不一樣展示的效果也是不一樣的。

　　而MOO音樂(lè)中的界面布局恪守著嚴(yán)格的規(guī)則，整個(gè)界面有規(guī)律可循。所以我們可以把分割線看成是一堵墻，它可以把把雜亂無(wú)序的信息強(qiáng)行區(qū)分歸類，而對(duì)于本來(lái)信息布局就很有條理的頁(yè)面來(lái)說(shuō)我們完全可以考慮去除分割線，直接使用間距來(lái)完成視覺區(qū)分。　　

　　不止是線條，我還發(fā)現(xiàn)MOO音樂(lè)中很少出現(xiàn)頁(yè)面標(biāo)題。標(biāo)題的作用是告訴用戶你當(dāng)前正在瀏覽的是什么頁(yè)面，但是用戶根據(jù)內(nèi)容也能感知到這是一個(gè)什么頁(yè)面。標(biāo)題的作用不是很大，我們可以刪除。大家可能會(huì)說(shuō)，反正這里空著也是空著，加上線條和標(biāo)題應(yīng)該無(wú)傷大雅。可是極簡(jiǎn)主義所追求的就是刪除這些可有可無(wú)的雞肋元素。

　　形式簡(jiǎn)約

　　如果我們無(wú)法刪減內(nèi)容量，那么我們就要思考“同樣的內(nèi)容我們是否可以尋求更為簡(jiǎn)潔的表現(xiàn)方式?”。例如同樣的歌曲播放條，MOO音樂(lè)做的比QQ音樂(lè)要小，這樣對(duì)界面遮擋的更少。　　

　　但是這樣的簡(jiǎn)化更多是流于表面，怎么從更深層級(jí)進(jìn)行簡(jiǎn)化呢?這里我列舉出三個(gè)優(yōu)化點(diǎn)：臨時(shí)視圖、隱藏機(jī)制和功能性動(dòng)效。

　　1)臨時(shí)視圖

　　我們都習(xí)慣于將頁(yè)面作為內(nèi)容的容器，導(dǎo)致頁(yè)面內(nèi)容過(guò)于臃腫。其實(shí)對(duì)于某些內(nèi)容，我們可以考慮使用一些臨時(shí)視圖來(lái)承載。

　　為什么大多數(shù)產(chǎn)品把搜索功能放在界面頂部而不是中間?因?yàn)樗阉鞴δ苡脩羰褂妙l率很高，我們必須要保證它對(duì)用戶來(lái)說(shuō)是觸手可及的，可以很容易的被發(fā)現(xiàn)。所以我們會(huì)把搜索框放在界面頂部，如果我們想把搜索功能放在其他位置，必須解決一個(gè)問(wèn)題——如何在不依靠位置的前提下凸顯搜索功能的優(yōu)先級(jí)?　　

　　以鏈家中的“地圖找房”功能，這個(gè)搜索功能就出現(xiàn)在界面中間，它這里使用的是浮窗，并且加了陰影，拉近與用戶之間的“距離”。離用戶越近的元素，用戶也更容易感知，在界面布局中引入Z軸的縱向維度。

　　2)隱藏機(jī)制

　　隱藏機(jī)制所代表的是一種靈活的布局思路。界面中有那么多功能，但并不是每一個(gè)功能用戶都是全程需要的。如果我們可以感知到用戶在某些場(chǎng)景下對(duì)特定的功能訴求很低，那么我們就可以考慮隱藏這個(gè)功能。　　

　　在MOO音樂(lè)中，當(dāng)用戶向上滑動(dòng)，頂部的搜索框是隱藏的;當(dāng)用戶向下滑動(dòng)，搜索框是展示的。為什么這樣處理呢?因?yàn)楫?dāng)用戶向上滑動(dòng)，說(shuō)明用戶在瀏覽今日推薦的音樂(lè)信息，對(duì)于搜索框的訴求不是很大。為了可以給用戶提供更多的瀏覽空間，我們考慮隱藏搜索框。但是當(dāng)用戶向下滑動(dòng)，最可能的場(chǎng)景是用戶對(duì)當(dāng)前推薦的歌曲不滿意，他需要回到頂部手動(dòng)搜索歌曲，那么這個(gè)時(shí)候再展示搜索框是很合適的。

　　3)功能性動(dòng)效

　　功能性動(dòng)效的合理使用可以很好的緩解頁(yè)面布局的壓力。以喜馬拉雅FM為例，身為產(chǎn)品方，為了提升用戶粘性，我肯定希望用戶去錄音上傳作品，所以我們將這個(gè)“錄音”按鈕做成大色塊的樣式，的確很醒目。但是這種處理方式使界面失衡，后面改版后，使用動(dòng)效進(jìn)行引導(dǎo)。當(dāng)用戶首次進(jìn)入這個(gè)頁(yè)面，“我要錄音”按鈕會(huì)出現(xiàn)水波紋動(dòng)效，來(lái)吸引用戶注意力。　　

　　類似的案例還有，當(dāng)用戶點(diǎn)贊歌曲時(shí)，網(wǎng)易云音樂(lè)和QQ音樂(lè)都會(huì)出現(xiàn)動(dòng)效引導(dǎo)用戶去分分享歌曲。當(dāng)你點(diǎn)贊這首歌，那么我們可以默認(rèn)你很欣賞這首歌，那么何不把這首歌分享給你的朋友呢?抓住合適的時(shí)間做引導(dǎo)/誘導(dǎo)，用戶更容易去分享。如果我們不考慮這個(gè)場(chǎng)景，把分享按鈕做的特別醒目，對(duì)于不想分享的用戶來(lái)說(shuō)反而是一個(gè)干擾。