簡約而不簡單，談一談移動開發中的那些極簡設計

雷鋒網按：本文翻譯自《 The Art of Minimalism in Mobile App UI Design 》- Nick Babich 。譯文出自 《 掘金翻譯計劃 》，譯者 edvardhua ，校對者 owenlyn ， jiaowoyongqi ， Graning 。

設計是一件用戶驅動很強的工作。隨著用戶越來越偏好更簡潔的交互界面，如何剔除多余的元素，保留最基礎最重要的元素是極簡設計的關鍵。極簡設計形式和功能完美結合。它最大的優點是極簡的表現形式，簡潔的線條，大方的留白，簡約的圖形化元素，就算是很復雜的內容，在這樣的設計下也會顯得很簡潔和干練。當然，如果能有效的利用這些元素。

極簡設計必須要 簡潔明了和一致的可用性 。你的交互系統應該通過 清晰的視覺傳達（Clear Visual Communication） 來解決用戶的問題。這也是為什么具備簡潔設計和高可用性的應用如此讓人深刻。即便只是一個通過極簡設計的導航，都能夠提供很強的交互功能。要做到這一點，你需要注意以下幾個方面。

| 簡單的配色方案

簡單的配色方案能夠提高用戶體驗，那么相應的，過多的色彩則會帶給用戶負面的影響。針對于初學者，有一些預先定義的標準顏色方案能夠讓你輕松創建新的顏色方案。

• 單配色方案。 單配色方案由特定色彩的不同的色調，陰影或顏色深淺所構成。他們的原理是通過修改特定顏色的飽和度和亮度，可以生成多種協調的顏色，這種顏色方案比較簡潔和優雅，不會給眼睛產生太大負擔。

藍色的單配色方案（素材來源: Smashing Magazine）

素材來源: Dribbble

• ?近似色彩配色方案 。近似色彩配色方案 的思路是從色輪上取三個相鄰的顏色來做為配色。全手勢操作的應用 Clear 使用了近似色彩配色方案，它使用不同顏色來區分任務的優先級或者高亮關鍵的任務。（頂端的任務使用最鮮艷的顏色，而底部的任務則使用明亮精致的顏色）

漸變的黃色和橙色也是近似色彩配色方案的一個例子。素材來源: tuts+

iOS 平臺的 Clear 應用

| 模糊效果

模糊效果出現在極簡UI設計中是一件非常符合邏輯的事情，它能夠增加 UI 的層次感。如果你的 UI 擁有多個層級，使用模糊效果能夠讓用戶清晰的了解到 UI 的前后層級的關系。這也給了設計師一個完美的機會來設計多樣化的菜單和層級效果。

雅虎天氣 顯示了一張當前位置的風景圖片，如果需要查看天氣的詳細信息，你只需要向上滑動便會馬上顯示出來。與在原先的頁面上疊加一層相比，這種方式在增加了詳細信息的易于獲取的情況下還保存了上一張圖片作為模糊背景后，幫助用戶在操作之后有更為直觀的反饋。而且交互方式極為自然，你可以很方便的就返回到上一層。

iOS 上的雅虎天氣

| 一個應用中只使用一種字體

在一個應用中使用多種字體會看起來很散亂和馬虎。減少屏幕上字體的類型數量可以增強排版的效果。當你在設計應用的時候你可以通過更改字體的字重，樣式，尺寸和大小來優化布局效果，而不是更換字體。

通常來說，一個應用中只使用一種字體 素材來源: Apple

當你在為APP選擇字體的時候，選擇平臺的默認字體可能是最安全穩妥的選擇：

• 蘋果使用 San Francisco Family 字體來提供全平臺一致的閱讀體驗（在iOS 9 中簡稱為 SF-UI）。

• Roboto 和 Noto 分別是 Android 和 Chrome 的默認字體。

  

減少屏幕上使用的字體類型能夠獲得較好的排版效果。素材來源: Dribbble

| 數據的視覺焦點

• 你應該使用大號字體和醒目的顏色來讓特定的數據成為視覺的焦點。使用中性的顏色（黑白灰）來展示普通的內容，而一些具備操作功能的部分則使用強對比的顏色來吸引用戶注意，從而給給予用戶正確的指導和操作。

明亮的色調+中性的色調是最容易搭配的方案，同時也是視覺上最引人注意的方案之一。

素材來源: Smashing Magazine

• 被放大的字體和顯眼的色彩能夠很好的吸引用戶的注意力，而不需要多余的文字提示。與此同時還提供了簡潔易用的信息收集體驗。

在屏幕特定的區域使用放大的字體和彈出的顏色能有效吸引用戶注意力。
素材來源: Dribbble

| 使用留白代替線條來區分元素

設計師通常使用線條和分割線來給屏幕劃分區域和功能類別，但是增加太多這些元素會 UI 界面過于臃腫。

更少的線條和分割線能夠讓我們的頁面看起來更加的干凈，現代化和功能突出。我們可以使用間距，留白和色塊來區分不同的元素。谷歌日歷就是一個很好的例子，它使用 投影 將兩個內容不同的區塊清晰地拉開層次，而不是用線段來簡單地分割。 間隔不僅提供了清晰的視覺也增加了日歷應用的易用性。

| 圖標：線條和填充

我們使用圖標用來表達某種功能或者內容，圖標作為一種視覺語言，它應該是簡約易于識別和理解的。iOS 7 后許多極簡設計的 UI 都使用線條或者填充的圖標。來看看同一個圖標分別使用線條和填充的效果。

時鐘圖標 素材來源: icons8

我們來看看底部菜單欄的圖標。該圖標在應用中通常是作為導航的存在，所以指示當前用戶所在區域是很重要的，我們通常使用高亮圖標來表示當前用戶所選中的區域。這個時候，灰色的線性圖標表示為未選中的狀態。這樣一來我們的底部菜單欄就很直觀了。

蘋果商店的底部導航 素材來源: viget

| 總結

簡約的 UI 和設計技術是完成優秀設計的關鍵，但是極簡設計的本身不是設計的目的。我們最終的目標是要簡約 UI 的同時需要保證功能的完整性和高可用性。簡單的流程，清晰的視覺傳達和與設計的結合來打造無縫的交互體驗才是最重要的。

雷鋒網 (搜索“雷鋒網”公眾號關注) 注：轉載請聯系我們授權，并保留出處和作者，不得刪減內容。