小編：如何在介面中做到布局從容有致，平面功能設計合理、分割槽明確。這個是從原型圖到最終設計稿的過程中，設計師們經常會遇到的問題。這篇文章，作者以騰訊的新品，moo**，作為案例，深刻剖析，如何將介面去繁求簡？如何讓設計做到極致簡約？
前段時間有乙個朋友微信問我有沒有看到過哪款產品把搜尋功能放在介面中間的，然後給我發了一張原型圖。我第一眼看到這個原型圖就覺得介面的資訊布局很亂，像是把兩三個頁面的內容強行塞到乙個頁面。
介面裡資訊太多不知道怎麼布局，我相信這個問題大家在日常工作也經常會遇到。內容獲取難度的降低，意味著內容篩選難度的提高。產品不斷的迭代，功能越來越多。如何使產品避免在介面布局上越來越臃腫？——「極簡主義」或許是這個問題的答案。
什麼是極簡主義？從字面上理解：極致簡約。設計上的簡約可以分為兩種：內容簡約和形式簡約。以上面的那個例子來說，搜尋功能是內容，搜尋框是搜尋功能的展示形式。最近騰訊推出了新的產品：moo**，所以我這篇文章正好藉著分析這款產品來聊一聊介面布局中的極簡主義。
我們給乙個頁面做簡化，第一步應該確定介面中每乙個元素存在的必要性。介面中元素那麼多，但並不是每乙個元素都有存在的必要，存在不一定合理。弄清楚介面中每乙個元素的實際作用，進行評估，對於一些作用有限的純裝飾性元素，為了介面的簡潔，我們可以刪除。
幾款常用的**類應用**介面的主體都是乙個旋轉的唱片，而moo**直接去掉了這個唱片。為什麼？因為這個「唱片」佔據了介面大約一半的空間，導致切換歌曲、調整**進度、檢視歌詞/歌手/**和分享這些常用功能必須在剩下的空間裡排布，顯得很擁擠。
去除這個虛擬的「唱片」給我們帶來不僅僅是視覺上的輕量感，更意味著易用性上提公升。使用者在moo**中切換歌曲、調整**進度、返回上一級頁面等都可以通過滑動手勢來完成。並且它是幾款**產品中，唯一乙個支援上下滑動切換歌曲的，網易雲**是左右滑動切換歌曲，而qq**直接不支援，使用者必須點選才能切換歌曲。我在之前的文章使用者體驗之點選和滑動也提到過，滑動手勢比點選更容易受到使用者的青睞。
當然可能會有人反駁，你看網易雲**也是有唱片，但是它還是支援滑動的。脫離手指落點去談手勢都是耍流氓。網易雲**中手指落點在唱片內是切換歌曲，落點在唱片外是返回上一級頁面，落點稍有不慎就會造成誤操作。而moo**是上下滑動切換歌曲，左滑動返回上一介面。手指落點更模糊，使用者也就可以減少找位置的時間，使用者體驗更好。
此外網易雲**中使用者要**/暫停歌曲必須點選**/暫停按鈕，而moo**中你只要點選螢幕中任何位置就可以完成這一操作。為什麼moo**可以這麼任性？因為空間大，不怕使用者會誤操作。
去線化設計是極簡主義的一大特徵。在moo**中，我沒有找到一條分割線。要知道為什麼moo**可以選擇去除分割線，我們首先要弄清楚分割線在介面布局中到底起什麼作用。分割線主要是幫助使用者區分介面中不同級別和維度的內容，完成資訊層級的構建。
分割線可以分為兩種：通欄分割線和非通欄分割線。通欄分割線顧名思義就是指分割線貫穿整個螢幕，而非通欄分割線一般會留有缺口。要了解這倆的區別，我們可以看虎撲，虎撲之前的版本就是通欄分割線，而最新的版本中改成了非通欄分割線。
通欄分割線因為「分割」了整個螢幕，所以在內容區分上更加的明顯，更能表現不同的模組之間的獨立性。但是它的缺點在於線條的存在會阻礙使用者的瀏覽視線，影響資訊的獲取效率。
可能會有人說，既然線條的存在會影響資訊的瀏覽效率，為什麼只有moo**完全貫徹了去線化設計呢？我們再看乙個例子，我把微信朋友圈中的分割線給去掉，大家感受一下前後的區別。
我們可以發現去掉線條後，朋友圈的介面會稍顯雜亂。這是因為朋友圈中內容類別有很多，你可以發純文字動態、分享歌曲、**和文章。你上傳**張數不一樣展示的效果也是不一樣的。
而moo**中的介面布局恪守著嚴格的規則，整個介面有規律可循。所以我們可以把分割線看成是一堵牆，它可以把把雜亂無序的資訊強行區分歸類，而對於本來資訊布局就很有條理的頁面來說我們完全可以考慮去除分割線，直接使用間距來完成視覺區分。
不止是線條，我還發現moo**中很少出現頁面標題。標題的作用是告訴使用者你當前正在瀏覽的是什麼頁面，但是使用者根據內容也能感知到這是乙個什麼頁面。標題的作用不是很大，我們可以刪除。大家可能會說，反正這裡空著也是空著，加上線條和標題應該無傷大雅。可是極簡主義所追求的就是刪除這些可有可無的雞肋元素。
如果我們無法刪減內容量，那麼我們就要思考「同樣的內容我們是否可以尋求更為簡潔的表現方式？」。例如同樣的歌曲**條，moo**做的比qq**要小，這樣對介面遮擋的更少。
但是這樣的簡化更多是流於表面，怎麼從更深層級進行簡化呢？這裡我列舉出三個優化點：臨時檢視、隱藏機制和功能性動效。
我們都習慣於將頁面作為內容的容器，導致頁面內容過於臃腫。其實對於某些內容，我們可以考慮使用一些臨時檢視來承載。
為什麼大多數產品把搜尋功能放在介面頂部而不是中間？因為搜尋功能使用者使用頻率很高，我們必須要保證它對使用者來說是觸手可及的，可以很容易的被發現。所以我們會把搜尋框放在介面頂部，如果我們想把搜尋功能放在其他位置，必須解決乙個問題——如何在不依靠位置的前提下凸顯搜尋功能的優先順序？
以鏈家中的「地圖找房」功能，這個搜尋功能就出現在介面中間，它這裡使用的是浮窗，並且加了陰影，拉近與使用者之間的「距離」。離使用者越近的元素，使用者也更容易感知，在介面布局中引入z軸的縱向維度。
隱藏機制所代表的是一種靈活的布局思路。介面中有那麼多功能，但並不是每乙個功能使用者都是全程需要的。如果我們可以感知到使用者在某些場景下對特定的功能訴求很低，那麼我們就可以考慮隱藏這個功能。
介面布局中的「極簡主義」
程式設計驛站注 本文由作者王m爭 wang michael zheng 授權程式設計驛站發布，未經原作者同意請勿 前段時間有乙個朋友微信問我有沒有看到過哪款產品把搜尋功能放在介面中間的，然後給我發了一張原型圖。我第一眼看到這個原型圖就覺得介面的資訊布局很亂，像是把兩三個頁面的內容強行塞到乙個頁面。介...
python極簡主義 極簡主義OCR
在編寫這個程式時，我一直有個疑惑，就是在east文字檢測模組裡。起初，我是在裡看到用opencv的dnn模組做east文字檢測，但是它的讀取模型檔案初始化網路的方式我一直疑惑不解。看text detect recognition.py的第152行 detector cv.dnn.readnet mo...
（10 1 6）極簡主義
極簡主義不光存在於網頁設計中，像logo設計 印刷設計 包裝設計也都有相應的極簡主義風格。目前流行的極簡主義網頁設計視覺風格是 使用純粹的色彩以及簡練唯美的 極簡主義網頁設計流行使用創新式導航，不但易用，而且有種簡約美，符合極簡主義 回歸功能 與 視覺簡約 的雙重理念。簡約的外觀 易用的功能，並不意...