極簡主義設計，一(yī / yì ／yí)篇文幫你理清思路！【賞析】

目前，網上(shàng)有太多的(de)極簡主義設計關于(yú)趨勢，技巧，方法，策略方面的(de)文章。但是(shì)太多的(de)文章看了(le／liǎo)之(zhī)後就(jiù)容易眼花缭亂，摻雜太多的(de)東西之(zhī)後，極簡主義概念就(jiù)會顯得不(bù)那麽明晰了(le／liǎo)。

極簡主義來(lái)是(shì)一(yī / yì ／yí)種設計理念，設計中的(de)每一(yī / yì ／yí)個(gè)元素都應該是(shì)有用的(de)。不(bù)僅簡潔，幹淨，且非常實用。極簡主義的(de)設計易于(yú)用戶理解。

今天，我們梳理一(yī / yì ／yí)下，用下面的(de)幾個(gè)規則來(lái)設計，能幫你搞定真正的(de)極簡主義設計。

1、大(dà)量的(de)留白

在(zài)極簡主義中，留白是(shì)必不(bù)可少的(de)組成部分。留白能夠營造平和(hé / huò)感，很容易構造視覺焦點，能将必要(yào / yāo)的(de)信息凸顯出(chū)來(lái)，讓用戶隻做必要(yào / yāo)的(de)事情，關注必須的(de)信息。

上(shàng)面的(de)這(zhè)張圖圖片就(jiù)是(shì)一(yī / yì ／yí)個(gè)留白使用的(de)典範。

2、用栅格來(lái)規整元素

Cory Etzkorn

栅格系統可以(yǐ)讓簡約的(de)設計更加富有條理。栅格本身就(jiù)是(shì)用來(lái)構建規則性，賦予信息和(hé / huò)元素以(yǐ)條理和(hé / huò)有序感的(de)，在(zài)此基礎上(shàng)，能夠讓元素的(de)邏輯更加順暢。

栅格系統讓UI界面和(hé / huò)平面設計有了(le／liǎo)更容易遵循的(de)邏輯模式，即使是(shì)在(zài)極簡的(de)設計作品當中，有限的(de)元素在(zài)整個(gè)空間中，也(yě)可以(yǐ)建立足夠正确的(de)空間關系，使得整個(gè)設計工作協同更加自然。

Cory Etzkorn 爲(wéi / wèi)他(tā)的(de)作品集網站加入了(le／liǎo)整套栅格系統，案例圖片和(hé / huò)下面的(de)标題、文本都保持着精準的(de)左右對齊，營造出(chū)一(yī / yì ／yí)種整饬的(de)視覺體驗，即使是(shì)點擊交互觸發界面變化，也(yě)遵循着潛在(zài)的(de)栅格，使得整個(gè)設計充滿了(le／liǎo)協調感。極簡設計隻是(shì)看看起來(lái)簡約，但是(shì)内在(zài)所遵循的(de)規則和(hé / huò)條理感，讓它顯得一(yī / yì ／yí)點也(yě)不(bù)單薄。

3、扁平化的(de)元素

Liber Finance Group

扁平化的(de)設計風格不(bù)僅是(shì)目前的(de)主流，而(ér)且在(zài)精神内核上(shàng)和(hé / huò)極簡主義保持着一(yī / yì ／yí)緻。當然，如今的(de)扁平化設計和(hé / huò)之(zhī)前有所不(bù)同，漸變和(hé / huò)陰影的(de)加入使得它向前走出(chū)了(le／liǎo)一(yī / yì ／yí)大(dà)步，也(yě)不(bù)再是(shì)“純粹的(de)”扁平化了(le／liǎo)。

扁平化的(de)設計元素，無論是(shì)圖标的(de)設計還是(shì)色彩的(de)控制，都會盡量控制信息的(de)層次和(hé / huò)量，這(zhè)一(yī / yì ／yí)點和(hé / huò)極簡的(de)需求是(shì)一(yī / yì ／yí)緻的(de)。無論是(shì)設計網站還是(shì)APP，都盡量去除不(bù)必要(yào / yāo)的(de)交互，保持動效的(de)直觀和(hé / huò)簡約。

Liber Finance Group 的(de)網站就(jiù)采用了(le／liǎo)扁平化的(de)設計，整體呈現出(chū)簡約的(de)風格。底部的(de)視覺元素采用了(le／liǎo)單色的(de)線條，動效自然而(ér)簡單，用戶不(bù)會因此而(ér)感到(dào)信息過載。留白、視覺元素、文本之(zhī)間達到(dào)了(le／liǎo)平衡，而(ér)動效和(hé / huò)色彩的(de)控制，則讓整個(gè)設計自然而(ér)生動。

對于(yú)扁平化的(de)定義，依然沒有一(yī / yì ／yí)個(gè)固定範式，但概括起來(lái)有下面四個(gè)特征：

1）沒有多餘的(de)效果，例如投影、凹凸或漸變等

2）使用簡潔風格的(de)元素和(hé / huò)圖标

3）大(dà)膽豐富且明亮的(de)配色風格

4）盡量減少裝飾的(de)極簡設計

扁平化所追随的(de)細節依然不(bù)變，然而(ér)這(zhè)些“規範”開始松懈了(le／liǎo)。随着扁平化進化到(dào)2.0時(shí)代，我們再來(lái)看看

一(yī / yì ／yí)些扁平化2.0時(shí)代可以(yǐ)改善的(de)新的(de)細節：

1、微投影。微陰影，就(jiù)是(shì)極其微弱的(de)投影，這(zhè)是(shì)一(yī / yì ／yí)種幾乎不(bù)被人(rén)所立刻察覺的(de)投影，它可以(yǐ)增加元素的(de)深度，使其從背景中脫穎而(ér)出(chū)，引起用戶的(de)注意。但在(zài)使用這(zhè)一(yī / yì ／yí)效果時(shí)候需要(yào / yāo)注意，要(yào / yāo)讓它保持柔和(hé / huò)感和(hé / huò)隐蔽性。

2、低調漸變。新的(de)漸變不(bù)同以(yǐ)往，它往往是(shì)以(yǐ)更爲(wéi / wèi)低調的(de)姿态出(chū)現的(de)，比如隻用于(yú)背景色或氛圍色，不(bù)再喧兵奪主，并且隻在(zài)兩種顔色之(zhī)間漸變過渡。

3、圓形。扁平化中圓形的(de)元素越來(lái)越多，可以(yǐ)說(shuō)圓形在(zài)移動端的(de)優勢是(shì)特别明顯的(de)。由于(yú)圓形很好的(de)模拟了(le／liǎo)手指印，因此一(yī / yì ／yí)個(gè)圓的(de)存在(zài)看似就(jiù)是(shì)一(yī / yì ／yí)個(gè)可觸的(de)地(dì / de)方。這(zhè)對于(yú)喚起用戶的(de)操作發揮了(le／liǎo)極大(dà)的(de)作用。

4、雙色搭配

5、動态要(yào / yāo)素。更多的(de)視頻和(hé / huò)動畫特效的(de)運用，使得扁平化更加生動活潑。

4、在(zài)不(bù)對稱中保持平衡

Visme

即使是(shì)韋恩·安德森也(yě)無法确保他(tā)電影中每一(yī / yì ／yí)個(gè)畫面都是(shì)對稱的(de)。在(zài)極簡主義的(de)網站當中，完美的(de)對稱總歸是(shì)少數的(de)存在(zài)，而(ér)設計師也(yě)無需刻意去追求完美的(de)對稱。但是(shì)視覺上(shàng)的(de)均衡，則需要(yào / yāo)設計師力求做到(dào)。

有的(de)時(shí)候，不(bù)對稱的(de)設計會更加具有分量感。但是(shì)在(zài)對比之(zhī)外，是(shì)需要(yào / yāo)保持總體的(de)平衡。

在(zài) Visme 的(de)這(zhè)個(gè)彈出(chū)式的(de)廣告當中，左側的(de)視覺元素視覺吸引力是(shì)極強的(de)，整個(gè)頁面呈現左重右輕的(de)勢态。不(bù)過左邊的(de)元素會在(zài)視覺上(shàng)引導用戶注意右邊的(de)文本，足夠的(de)留白讓左右兩邊的(de)元素都擁有足夠的(de)跳出(chū)感，這(zhè)樣的(de)設計确保了(le／liǎo)對比，有方向性，還足夠平衡。

5、簡化配色

Titled Chair

使用格調比較高的(de)圖片可以(yǐ)很好的(de)匹配極簡主義的(de)設計，不(bù)過在(zài)配色上(shàng)花點功夫會更好。黑白這(zhè)樣的(de)色調功能性更強，中性，且顯得優雅。不(bù)過這(zhè)并不(bù)是(shì)唯一(yī / yì ／yí)的(de)選擇。

在(zài)配色這(zhè)個(gè)事情上(shàng)，極簡主義也(yě)同樣非常講究。通常會選取一(yī / yì ／yí)種到(dào)兩種提亮色，貫穿整個(gè)設計，專門使用。

就(jiù)像Titled Chair 這(zhè)個(gè)網站的(de)首頁設計，經典的(de)黑白色之(zhī)外，采用鮮豔的(de)紅色作爲(wéi / wèi)提亮色，貫穿整個(gè)設計，作爲(wéi / wèi)強調用的(de)重點而(ér)存在(zài)。它賦予了(le／liǎo)整個(gè)設計以(yǐ)簡潔感和(hé / huò)層次感。

配色的(de)方法有很多，技巧也(yě)不(bù)少，工具成堆，最重要(yào / yāo)的(de)還是(shì)設計師得有清晰的(de)思路，找到(dào)貼合的(de)配色方案。

6、選取可讀性較高的(de)字體

Aimauts

極簡主義設計希望圖形元素要(yào / yāo)足夠清晰易于(yú)分辨，對于(yú)文本字體有着同樣的(de)要(yào / yāo)求。

選擇最易于(yú)閱讀的(de)字體，确保用戶能夠快速掃視。無論是(shì)襯線體還是(shì)非襯線字體，字體的(de)X高度最好是(shì)适中的(de)，風格上(shàng)不(bù)要(yào / yāo)裝飾性太強，經典的(de)字體會更好。在(zài)字重和(hé / huò)行高、間距上(shàng)，都控制在(zài)合理的(de)度上(shàng)。不(bù)要(yào / yāo)刻意使用小字号來(lái)“創造高級感”，适當的(de)放大(dà)字體，确保用戶能夠一(yī / yì ／yí)目了(le／liǎo)然。太大(dà)的(de)字體會使得壓迫感太強，這(zhè)個(gè)中間的(de)尺度，需要(yào / yāo)設計師仔細拿捏。

在(zài) Aimauts 這(zhè)個(gè)網頁當中，即使加入了(le／liǎo)動效，文本和(hé / huò)字母的(de)可讀性也(yě)都足夠強。簡約而(ér)現代的(de)非襯線字體，在(zài)黑色的(de)背景上(shàng)顯得極爲(wéi / wèi)醒目，易于(yú)閱讀也(yě)非常容易理解。

所以(yǐ)，字體的(de)選擇很重要(yào / yāo)，方正正纖黑簡體，八大(dà)山人(rén)字體，歐體楷書等字體都是(shì)不(bù)錯的(de)選擇。

7、打破一(yī / yì ／yí)條規則

Westboume Grammar School

打破規則的(de)設計并不(bù)影響用戶對于(yú)信息的(de)獲取，甚至能夠創造出(chū)有趣的(de)設計和(hé / huò)交互體驗。

在(zài)極簡主義的(de)設計風格之(zhī)下，絕大(dà)多數的(de)視覺和(hé / huò)交互都是(shì)清晰而(ér)直觀的(de)，即使打破了(le／liǎo)規則，用戶也(yě)能清楚地(dì / de)感知到(dào)，甚至能夠創造一(yī / yì ／yí)種富有創意的(de)意外感。

但是(shì)，這(zhè)個(gè)被打破的(de)規則一(yī / yì ／yí)定要(yào / yāo)謹慎地(dì / de)選取，确保你所打破的(de)規則是(shì)符合整體設計的(de)，用戶可以(yǐ)理解的(de)，并且在(zài)數量上(shàng)控制在(zài)一(yī / yì ／yí)條即可，不(bù)要(yào / yāo)打破太多規則，否則整個(gè)設計會如同黑箱一(yī / yì ／yí)樣，讓用戶摸不(bù)着頭腦。

Westboume Grammar School 這(zhè)個(gè)網站的(de)設計極簡而(ér)富有格調，網站在(zài)設計的(de)時(shí)候，打破了(le／liǎo)一(yī / yì ／yí)個(gè)常見的(de)規則：在(zài)屏幕底部的(de)超大(dà)文本采用的(de)是(shì)動畫，并且用戶必須讀完才能繼續交互。這(zhè)個(gè)設計的(de)度控制得很好，整個(gè)設計中隻有這(zhè)一(yī / yì ／yí)處違反常見的(de)規則，并且不(bù)會影響其他(tā)。

熟悉規則才能打破規則，遵循規則也(yě)能富有創造力。

8、保持簡單

Delight

簡單的(de)設計其實往往是(shì)最有效的(de)。

在(zài)極簡主義設計當中，少即是(shì)多這(zhè)個(gè)規則是(shì)适中适用的(de)。盡可能的(de)剝離純裝飾性的(de)設計，确保核心信息是(shì)一(yī / yì ／yí)目了(le／liǎo)然的(de)。就(jiù)像上(shàng)面的(de)設計。

Delight 這(zhè)個(gè)網站應該會讓你感到(dào)好奇。明亮的(de)色彩和(hé / huò)有趣的(de)排版是(shì)誘人(rén)的(de)，想要(yào / yāo)了(le／liǎo)解更多，底部帶有動效的(de)箭頭會引導你往下浏覽。這(zhè)種極簡主義的(de)設計足夠簡單，有趣，因爲(wéi / wèi)它會讓你的(de)用戶對于(yú)後面的(de)信息發生興趣。在(zài)栅格的(de)控制和(hé / huò)充足的(de)留白之(zhī)下，整個(gè)設計給人(rén)非常舒服的(de)感覺。

極簡主義的(de)偉大(dà)之(zhī)處在(zài)于(yú)它凸顯關鍵，爲(wéi / wèi)用戶呈現出(chū)最重要(yào / yāo)的(de)東西。着重強調頁面的(de)單一(yī / yì ／yí)重點，相信下一(yī / yì ／yí)個(gè)極簡優秀界面屬于(yú)你！