簡(jiǎn)約而不簡(jiǎn)單，談一談移動(dòng)開發(fā)中的那些極簡(jiǎn)設(shè)計(jì)

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

設(shè)計(jì)是一件用戶驅(qū)動(dòng)很強(qiáng)的工作。隨著用戶越來越偏好更簡(jiǎn)潔的交互界面，如何剔除多余的元素，保留最基礎(chǔ)最重要的元素是極簡(jiǎn)設(shè)計(jì)的關(guān)鍵。極簡(jiǎn)設(shè)計(jì)形式和功能完美結(jié)合。它最大的優(yōu)點(diǎn)是極簡(jiǎn)的表現(xiàn)形式，簡(jiǎn)潔的線條，大方的留白，簡(jiǎn)約的圖形化元素，就算是很復(fù)雜的內(nèi)容，在這樣的設(shè)計(jì)下也會(huì)顯得很簡(jiǎn)潔和干練。當(dāng)然，如果能有效的利用這些元素。

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

| 簡(jiǎn)單的配色方案

簡(jiǎn)單的配色方案能夠提高用戶體驗(yàn)，那么相應(yīng)的，過多的色彩則會(huì)帶給用戶負(fù)面的影響。針對(duì)于初學(xué)者，有一些預(yù)先定義的標(biāo)準(zhǔn)顏色方案能夠讓你輕松創(chuàng)建新的顏色方案。

• 單配色方案。 單配色方案由特定色彩的不同的色調(diào)，陰影或顏色深淺所構(gòu)成。他們的原理是通過修改特定顏色的飽和度和亮度，可以生成多種協(xié)調(diào)的顏色，這種顏色方案比較簡(jiǎn)潔和優(yōu)雅，不會(huì)給眼睛產(chǎn)生太大負(fù)擔(dān)。

藍(lán)色的單配色方案（素材來源: Smashing Magazine）

素材來源: Dribbble

•  近似色彩配色方案。近似色彩配色方案的思路是從色輪上取三個(gè)相鄰的顏色來做為配色。全手勢(shì)操作的應(yīng)用 Clear 使用了近似色彩配色方案，它使用不同顏色來區(qū)分任務(wù)的優(yōu)先級(jí)或者高亮關(guān)鍵的任務(wù)。（頂端的任務(wù)使用最鮮艷的顏色，而底部的任務(wù)則使用明亮精致的顏色）

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

iOS 平臺(tái)的 Clear 應(yīng)用

| 模糊效果

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

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

iOS 上的雅虎天氣

| 一個(gè)應(yīng)用中只使用一種字體

在一個(gè)應(yīng)用中使用多種字體會(huì)看起來很散亂和馬虎。減少屏幕上字體的類型數(shù)量可以增強(qiáng)排版的效果。當(dāng)你在設(shè)計(jì)應(yīng)用的時(shí)候你可以通過更改字體的字重，樣式，尺寸和大小來優(yōu)化布局效果，而不是更換字體。

通常來說，一個(gè)應(yīng)用中只使用一種字體 素材來源: Apple

當(dāng)你在為APP選擇字體的時(shí)候，選擇平臺(tái)的默認(rèn)字體可能是最安全穩(wěn)妥的選擇：

• 蘋果使用 San Francisco Family 字體來提供全平臺(tái)一致的閱讀體驗(yàn)（在iOS 9 中簡(jiǎn)稱為 SF-UI）。

• Roboto和 Noto 分別是 Android 和 Chrome 的默認(rèn)字體。

  

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

| 數(shù)據(jù)的視覺焦點(diǎn)

• 你應(yīng)該使用大號(hào)字體和醒目的顏色來讓特定的數(shù)據(jù)成為視覺的焦點(diǎn)。使用中性的顏色（黑白灰）來展示普通的內(nèi)容，而一些具備操作功能的部分則使用強(qiáng)對(duì)比的顏色來吸引用戶注意，從而給給予用戶正確的指導(dǎo)和操作。

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

素材來源: Smashing Magazine

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

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

| 使用留白代替線條來區(qū)分元素

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

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

| 圖標(biāo)：線條和填充

我們使用圖標(biāo)用來表達(dá)某種功能或者內(nèi)容，圖標(biāo)作為一種視覺語言，它應(yīng)該是簡(jiǎn)約易于識(shí)別和理解的。iOS 7 后許多極簡(jiǎn)設(shè)計(jì)的 UI 都使用線條或者填充的圖標(biāo)。來看看同一個(gè)圖標(biāo)分別使用線條和填充的效果。

時(shí)鐘圖標(biāo) 素材來源: icons8

我們來看看底部菜單欄的圖標(biāo)。該圖標(biāo)在應(yīng)用中通常是作為導(dǎo)航的存在，所以指示當(dāng)前用戶所在區(qū)域是很重要的，我們通常使用高亮圖標(biāo)來表示當(dāng)前用戶所選中的區(qū)域。這個(gè)時(shí)候，灰色的線性圖標(biāo)表示為未選中的狀態(tài)。這樣一來我們的底部菜單欄就很直觀了。

蘋果商店的底部導(dǎo)航 素材來源: viget

| 總結(jié)

簡(jiǎn)約的 UI 和設(shè)計(jì)技術(shù)是完成優(yōu)秀設(shè)計(jì)的關(guān)鍵，但是極簡(jiǎn)設(shè)計(jì)的本身不是設(shè)計(jì)的目的。我們最終的目標(biāo)是要簡(jiǎn)約 UI 的同時(shí)需要保證功能的完整性和高可用性。簡(jiǎn)單的流程，清晰的視覺傳達(dá)和與設(shè)計(jì)的結(jié)合來打造無縫的交互體驗(yàn)才是最重要的。

雷鋒網(wǎng)注：轉(zhuǎn)載請(qǐng)聯(lián)系我們授權(quán)，并保留出處和作者，不得刪減內(nèi)容。

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。