本篇文章從内容簡約和形式簡約兩方面，來講解如何實現設計上的“極簡主義”。

前段時間有一個朋友微信問我有沒有看到過哪款産品把搜索功能放在界面中間的，然後給我發了一張原型圖。我第一眼看到這個原型圖就覺得界面的信息布局很亂，像是把兩三個頁面的内容強行塞到一個頁面。

界面裡信息太多不知道怎麼布局，我相信這個問題大家在日常工作也經常會遇到。内容獲取難度的降低，意味着内容篩選難度的提高。産品不斷的疊代，功能越來越多。如何使産品避免在界面布局上越來越臃腫？——“極簡主義”或許是這個問題的答案。 什麼是極簡主義？從字面上理解：極緻簡約。設計上的簡約可以分為兩種：内容簡約和形式簡約。以上面的那個例子來說，搜索功能是内容，搜索框是搜索功能的展示形式。最近騰訊推出了新的産品：MOO音樂，所以我這篇文章正好借着分析這款産品來聊一聊界面布局中的極簡主義。

内容簡約

我們給一個頁面做簡化，第一步應該确定界面中每一個元素存在的必要性。界面中元素那麼多，但并不是每一個元素都有存在的必要，存在不一定合理。

弄清楚界面中每一個元素的實際作用，進行評估，對于一些作用有限的純裝飾性元素，為了界面的簡潔，我們可以删除。

1. 旋轉唱片

幾款常用的音樂類應用播放界面的主體都是一個旋轉的唱片，而MOO音樂直接去掉了這個唱片。為什麼？因為這個“唱片”占據了界面大約一半的空間，導緻切換歌曲、調整播放進度、查看歌詞/歌手/專輯和分享這些常用功能必須在剩下的空間裡排布，顯得很擁擠。

去除這個虛拟的“唱片”給我們帶來不僅僅是視覺上的輕量感，更意味着易用性上提升。用戶在MOO音樂中切換歌曲、調整播放進度、返回上一級頁面等都可以通過滑動手勢來完成。并且它是幾款音樂産品中，唯一一個支持上下滑動切換歌曲的，網易雲音樂是左右滑動切換歌曲，而QQ音樂直接不支持，用戶必須點擊才能切換歌曲。 我在之前的文章用戶體驗之點擊和滑動也提到過，滑動手勢比點擊更容易受到用戶的青睐。

當然可能會有人反駁，你看網易雲音樂也是有唱片，但是它還是支持滑動的。脫離手指落點去談手勢都是耍流氓。網易雲音樂中手指落點在唱片内是切換歌曲，落點在唱片外是返回上一級頁面，落點稍有不慎就會造成誤操作。而MOO音樂是上下滑動切換歌曲，左滑動返回上一界面。手指落點更模糊，用戶也就可以減少找位置的時間，用戶體驗更好。

此外網易雲音樂中用戶要播放/暫停歌曲必須點擊播放/暫停按鈕，而MOO音樂中你隻要點擊屏幕中任何位置就可以完成這一操作。為什麼MOO音樂可以這麼任性？因為空間大，不怕用戶會誤操作。

2. 去線化

去線化設計是極簡主義的一大特征。在MOO音樂中，我沒有找到一條分割線。要知道為什麼MOO音樂可以選擇去除分割線，我們首先要弄清楚分割線在界面布局中到底起什麼作用。分割線主要是幫助用戶區分界面中不同級别和維度的内容，完成信息層級的構建。

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

通欄分割線因為“分割”了整個屏幕，所以在内容區分上更加的明顯，更能表現不同的模塊之間的獨立性。但是它的缺點在于線條的存在會阻礙用戶的浏覽視線，影響信息的獲取效率。

可能會有人說，既然線條的存在會影響信息的浏覽效率，為什麼隻有MOO音樂完全貫徹了去線化設計呢？我們再看一個例子，我把微信朋友圈中的分割線給去掉，大家感受一下前後的區别。

我們可以發現去掉線條後，朋友圈的界面會稍顯雜亂。這是因為朋友圈中内容類别有很多，你可以發純文字動态、分享歌曲、視頻和文章。你上傳照片張數不一樣展示的效果也是不一樣的。

而MOO音樂中的界面布局恪守着嚴格的規則，整個界面有規律可循。所以我們可以把分割線看成是一堵牆，它可以把把雜亂無序的信息強行區分歸類，而對于本來信息布局就很有條理的頁面來說我們完全可以考慮去除分割線，直接使用間距來完成視覺區分。

不止是線條，我還發現MOO音樂中很少出現頁面标題。标題的作用是告訴用戶你當前正在浏覽的是什麼頁面，但是用戶根據内容也能感知到這是一個什麼頁面。标題的作用不是很大，我們可以删除。大家可能會說，反正這裡空着也是空着，加上線條和标題應該無傷大雅。可是極簡主義所追求的就是删除這些可有可無的雞肋元素。

形式簡約

如果我們無法删減内容量，那麼我們就要思考“同樣的内容我們是否可以尋求更為簡潔的表現方式？”。例如同樣的歌曲播放條，MOO音樂做的比QQ音樂要小，這樣對界面遮擋的更少。

但是這樣的簡化更多是流于表面，怎麼從更深層級進行簡化呢？這裡我列舉出三個優化點：臨時視圖、隐藏機制和功能性動效。

1. 臨時視圖

我們都習慣于将頁面作為内容的容器，導緻頁面内容過于臃腫。其實對于某些内容，我們可以考慮使用一些臨時視圖來承載。

為什麼大多數産品把搜索功能放在界面頂部而不是中間？因為搜索功能用戶使用頻率很高，我們必須要保證它對用戶來說是觸手可及的，可以很容易的被發現。所以我們會把搜索框放在界面頂部，如果我們想把搜索功能放在其他位置，必須解決一個問題——如何在不依靠位置的前提下凸顯搜索功能的優先級？

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

2. 隐藏機制

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

在MOO音樂中，當用戶向上滑動，頂部的搜索框是隐藏的；當用戶向下滑動，搜索框是展示的。為什麼這樣處理呢？因為當用戶向上滑動，說明用戶在浏覽今日推薦的音樂信息，對于搜索框的訴求不是很大。為了可以給用戶提供更多的浏覽空間，我們考慮隐藏搜索框。但是當用戶向下滑動，最可能的場景是用戶對當前推薦的歌曲不滿意，他需要回到頂部手動搜索歌曲，那麼這個時候再展示搜索框是很合适的。

3. 功能性動效

功能性動效的合理使用可以很好的緩解頁面布局的壓力。以喜馬拉雅FM為例，身為産品方，為了提升用戶粘性，我肯定希望用戶去錄音上傳作品，所以我們将這個“錄音”按鈕做成大色塊的樣式，的确很醒目。但是這種處理方式使界面失衡，後面改版後，使用動效進行引導。

當用戶首次進入這個頁面，“我要錄音”按鈕會出現水波紋動效，來吸引用戶注意力。

類似的案例還有，當用戶點贊歌曲時，網易雲音樂和QQ音樂都會出現動效引導用戶去分分享歌曲。當你點贊這首歌，那麼我們可以默認你很欣賞這首歌，那麼何不把這首歌分享給你的朋友呢？抓住合适的時間做引導/誘導，用戶更容易去分享。

如果我們不考慮這個場景，把分享按鈕做的特别醒目，對于不想分享的用戶來說反而是一個幹擾。

這就是我對界面布局中的“極簡主義”做的一個總結，歡迎留言讨論。

#專欄作家#

王M争（王M争），人人都是經理專欄作家，資深互聯網人。 本文原創發布于人人都是産品經理。未經許可，禁止轉載。 題圖來自Unsplash，基于CC0協議,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部