王M争：前段時(shí)間(jiān)有一(yī)個朋(péng)友(yǒu)問(wèn)我有沒有看(kàn)到過哪款産品是把搜索功能(néng)放在界面中間(jiān)的，然後給我發了(le)一(yī)張原型圖。我第一(yī)眼看(kàn)到這(zhè)個原型圖就覺得界面的信息布局很(hěn)亂，像是把兩三個頁面的內(nèi)容強行(xíng)塞到一(yī)個頁面。

界面裏信息太多不知道(dào)怎麽布局，我相信這(zhè)個問(wèn)題大家在日常工(gōng)作(zuò)也經常會遇到。內(nèi)容獲取難度的降低(dī)，意味着內(nèi)容篩選難度的提高。産品不斷的叠代，功能(néng)越來越多。如(rú)何避免産品在界面布局上(shàng)越來越臃腫？「極簡主義」或許是這(zhè)個問(wèn)題的答(dá)案。

什麽是極簡主義？從(cóng)字面上(shàng)理解：極緻簡約。設計上(shàng)的簡約可(kě)以分為(wèi)兩種：內(nèi)容簡約和(hé)形式簡約。以上(shàng)面的那(nà)個例子來說，搜索功能(néng)是內(nèi)容，搜索框是搜索功能(néng)的展示形式。最近騰訊推出了(le)新的産品：MOO音樂(yuè)，所以文章(zhāng)正好借着這(zhè)款産品來聊一(yī)聊界面布局中的極簡主義。

文章(zhāng)目錄

• 內(nèi)容簡約
• 形式簡約

內(nèi)容簡約

我們給一(yī)個頁面做(zuò)簡化，第一(yī)步應該确定界面中每一(yī)個元素存在的必要(yào)性。界面中元素那(nà)麽多，但(dàn)并不是每一(yī)個元素都(dōu)有存在的必要(yào)，存在不一(yī)定合理。弄清楚界面中每一(yī)個元素的實際作(zuò)用，進行(xíng)評估，對于一(yī)些作(zuò)用有限的純裝飾性元素，為(wèi)了(le)界面的簡潔，我們可(kě)以删除。

1. 旋轉唱片

幾款常用的音樂(yuè)類應用播放界面的主體都(dōu)是一(yī)個旋轉的唱片，而 MOO音樂(yuè)直接去掉了(le)這(zhè)個唱片。為(wèi)什麽？因為(wèi)這(zhè)個「唱片」占據了(le)界面大約一(yī)半的空間(jiān)，導緻切換歌(gē)曲、調整播放進度、查看(kàn)歌(gē)詞/歌(gē)手/專輯和(hé)分享這(zhè)些常用功能(néng)必須在剩下(xià)的空間(jiān)裏排布，顯得很(hěn)擁擠。

去除這(zhè)個虛拟的「唱片」給我們帶來的不僅僅是視(shì)覺上(shàng)的輕量感，更意味着易用性上(shàng)提升。用戶在 MOO音樂(yuè)中切換歌(gē)曲、調整播放進度、返回上(shàng)一(yī)級頁面等都(dōu)可(kě)以通(tōng)過滑動手勢來完成。并且它是幾款音樂(yuè)産品中，唯一(yī)一(yī)個支持上(shàng)下(xià)滑動切換歌(gē)曲的，網易雲音樂(yuè)是左右滑動切換歌(gē)曲，而 QQ音樂(yuè)直接不支持，用戶必須點擊才能(néng)切換歌(gē)曲。我在之前的文章(zhāng)《界面設計中，交互方式是選擇滑動還是點擊呢？》也提到過，滑動手勢比點擊更容易受到用戶的青睐。

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

此外(wài)網易雲音樂(yuè)中用戶要(yào)播放/暫停歌(gē)曲必須點擊播放/暫停按鈕，而在 MOO音樂(yuè)中隻要(yào)點擊屏幕內(nèi)的任何位置就可(kě)以完成這(zhè)一(yī)操作(zuò)。為(wèi)什麽 MOO音樂(yuè)可(kě)以這(zhè)麽任性？因為(wèi)空間(jiān)大，不怕用戶會誤操作(zuò)。

2. 去線化

去線化設計是極簡主義的一(yī)大特征。在 MOO音樂(yuè)中，我沒有找到一(yī)條分割線。要(yào)知道(dào)為(wèi)什麽 MOO音樂(yuè)可(kě)以選擇去除分割線，我們首先要(yào)弄清楚分割線在界面布局中到底起什麽作(zuò)用。分割線主要(yào)是幫助用戶區(qū)分界面中不同級别和(hé)維度的內(nèi)容，完成信息層級的構建。

分割線可(kě)以分為(wèi)兩種：通(tōng)欄分割線和(hé)非通(tōng)欄分割線。通(tōng)欄分割線顧名思義就是指分割線貫穿整個屏幕，而非通(tōng)欄分割線一(yī)般會留有缺口。要(yào)了(le)解兩者的區(qū)别，我們可(kě)以看(kàn)虎撲，虎撲之前的版本就是通(tōng)欄分割線，而最新的版本中改成了(le)非通(tōng)欄分割線。

通(tōng)欄分割線因為(wèi)「分割」了(le)整個屏幕，所以在內(nèi)容區(qū)分上(shàng)更加的明(míng)顯，更能(néng)表現不同的模塊之間(jiān)的獨立性。但(dàn)是它的缺點在于線條的存在會阻礙用戶的浏覽視(shì)線，影響信息的獲取效率。

可(kě)能(néng)會有人(rén)說，既然線條的存在會影響信息的浏覽效率，為(wèi)什麽隻有 MOO音樂(yuè)完全貫徹了(le)去線化設計呢？我們再看(kàn)一(yī)個例子，我把微(wēi)信朋(péng)友(yǒu)圈中的分割線給去掉，大家感受一(yī)下(xià)前後的區(qū)别。

我們可(kě)以發現去掉線條後，朋(péng)友(yǒu)圈的界面會稍顯雜(zá)亂。這(zhè)是因為(wèi)朋(péng)友(yǒu)圈中內(nèi)容類别有很(hěn)多，你可(kě)以發純文字動态、分享歌(gē)曲、視(shì)頻(pín)和(hé)文章(zhāng)。你上(shàng)傳照片張數(shù)不一(yī)樣展示的效果也是不一(yī)樣的。

而 MOO音樂(yuè)中的界面布局恪守着嚴格的規則，整個界面有規律可(kě)循。所以我們可(kě)以把分割線看(kàn)成是一(yī)堵牆，它可(kě)以把雜(zá)亂無序的信息強行(xíng)區(qū)分歸類，而對于本來信息布局就很(hěn)有條理的頁面來說我們完全可(kě)以考慮去除分割線，直接使用間(jiān)距來完成視(shì)覺區(qū)分。

不止是線條，我還發現 MOO音樂(yuè)中很(hěn)少(shǎo)出現頁面标題。标題的作(zuò)用是告訴用戶當前正在浏覽的是什麽頁面，但(dàn)是用戶根據內(nèi)容也能(néng)感知到這(zhè)是一(yī)個什麽頁面。标題的作(zuò)用不是很(hěn)大，我們可(kě)以删除。大家可(kě)能(néng)會說，反正這(zhè)裏空着也是空着，加上(shàng)線條和(hé)标題應該無傷大雅。可(kě)是極簡主義所追求的就是删除這(zhè)些可(kě)有可(kě)無的雞肋元素。

形式簡約

如(rú)果我們無法删減內(nèi)容量，那(nà)麽我們就要(yào)思考「同樣的內(nèi)容我們是否可(kě)以尋求更為(wèi)簡潔的表現方式？」。例如(rú)同樣的歌(gē)曲播放條，MOO音樂(yuè)做(zuò)的比 QQ音樂(yuè)要(yào)小，這(zhè)樣對界面遮擋的更少(shǎo)。

但(dàn)是這(zhè)樣的簡化更多是流于表面，怎麽從(cóng)更深層級進行(xíng)簡化呢？這(zhè)裏我列舉出三個優化點：臨時(shí)視(shì)圖、隐藏機制和(hé)功能(néng)性動效。

1. 臨時(shí)視(shì)圖

我們都(dōu)習慣于将頁面作(zuò)為(wèi)內(nèi)容的容器，導緻頁面內(nèi)容過于臃腫。其實對于某些內(nèi)容，我們可(kě)以考慮使用一(yī)些臨時(shí)視(shì)圖來承載。

為(wèi)什麽大多數(shù)産品把搜索功能(néng)放在界面頂部而不是中間(jiān)？因為(wèi)用戶使用搜索功能(néng)的頻(pín)率很(hěn)高，我們必須要(yào)保證它對用戶來說是觸手可(kě)及的，可(kě)以很(hěn)容易的被發現。所以我們會把搜索框放在界面頂部，如(rú)果我們想把搜索功能(néng)放在其他(tā)位置，必須解決一(yī)個問(wèn)題——如(rú)何在不依靠位置的前提下(xià)凸顯搜索功能(néng)的優先級？

以鏈家中的「地(dì)圖找房」功能(néng)，這(zhè)個搜索功能(néng)就出現在界面中間(jiān)，它這(zhè)裏使用的是浮窗，并且加了(le)陰影，拉近與用戶之間(jiān)的「距離」。離用戶越近的元素，用戶也更容易感知，在界面布局中引入 Z軸的縱向維度。

2. 隐藏機制

隐藏機制所代表的是一(yī)種靈活的布局思路。界面中有那(nà)麽多功能(néng)，但(dàn)并不是每一(yī)個功能(néng)用戶都(dōu)是全程需要(yào)的。如(rú)果我們可(kě)以感知到用戶在某些場景下(xià)對特定的功能(néng)訴求很(hěn)低(dī)，那(nà)麽我們就可(kě)以考慮隐藏這(zhè)個功能(néng)。

在 MOO音樂(yuè)中，當用戶向上(shàng)滑動，頂部的搜索框是隐藏的；當用戶向下(xià)滑動，搜索框是展示的。為(wèi)什麽這(zhè)樣處理呢？因為(wèi)當用戶向上(shàng)滑動，說明(míng)用戶在浏覽今日推薦的音樂(yuè)信息，對于搜索框的訴求不是很(hěn)大。為(wèi)了(le)可(kě)以給用戶提供更多的浏覽空間(jiān)，我們考慮隐藏搜索框。但(dàn)是當用戶向下(xià)滑動，最可(kě)能(néng)的場景是用戶對當前推薦的歌(gē)曲不滿意，他(tā)需要(yào)回到頂部手動搜索歌(gē)曲，那(nà)麽這(zhè)個時(shí)候再展示搜索框是很(hěn)合适的。

3. 功能(néng)性動效

功能(néng)性動效的合理使用可(kě)以很(hěn)好的緩解頁面布局的壓力。以喜馬拉雅FM 為(wèi)例，身為(wèi)産品方，為(wèi)了(le)提升用戶粘性，我肯定希望用戶去錄音上(shàng)傳作(zuò)品，所以我們将這(zhè)個「錄音」按鈕做(zuò)成大色塊的樣式，的确很(hěn)醒目。但(dàn)是這(zhè)種處理方式使界面失衡，在改版後，使用動效進行(xíng)引導。當用戶首次進入這(zhè)個頁面，「我要(yào)錄音」按鈕會出現水波紋動效，來吸引用戶注意力。

類似的案例還有當用戶點贊歌(gē)曲時(shí)，網易雲音樂(yuè)和(hé) QQ音樂(yuè)都(dōu)會出現動效引導用戶去分享歌(gē)曲。當你點贊這(zhè)首歌(gē)，我們可(kě)以默認你很(hěn)欣賞這(zhè)首歌(gē)，那(nà)麽何不把這(zhè)首歌(gē)分享給你的朋(péng)友(yǒu)呢？抓住合适的時(shí)間(jiān)做(zuò)引導/誘導，用戶更容易去分享。如(rú)果我們不考慮這(zhè)個場景，把分享按鈕做(zuò)的特别醒目，對于不想分享的用戶來說反而是一(yī)個幹擾。

總結

這(zhè)就是我對界面布局中的「極簡主義」做(zuò)的一(yī)個總結，歡迎留言讨論。