我們已經聊過太多(duo)的極(ji)簡主(zhu)義設(she)計(ji)，趨勢，技巧(qiao)，方法，策略，都有(you)所涉及。不過聊多(duo)了(le)之后(hou)也容易(yi)迷惑，因為許多(duo)摻雜其中的東(dong)西，讓極(ji)簡主(zhu)義的設(she)計(ji)的概念顯得不那么明晰了(le)。
極簡主義(yi)本(ben)身是一種設計理念，垂直(zhi)到UI和平面設計領域當(dang)中的(de)時候，設計中的(de)每一個元素都應該是有用(yong)的(de)。它簡單，干凈，漂亮(liang)，且非常實用(yong)。極簡主義(yi)的(de)設計易(yi)于用(yong)戶理解(jie)，參與度也搞。
今天的文章，我們打(da)算(suan)把知識(shi)點梳理一下，用下面的10個規則來設(she)計，能幫你搞定真正的極簡主義設(she)計。
在極簡(jian)主(zhu)義設計(ji)當中(zhong)，留白是必不可少(shao)的組成部(bu)分(fen)。留白能夠(gou)營造平和(he)感(gan)，能夠(gou)創造視覺焦點。
將(jiang)必要的信息(xi)和視覺焦點營造出來，然后使用(yong)留白包圍它(ta)們。通過這(zhe)種方式，將(jiang)核(he)心的信息(xi)凸顯(xian)出來，讓用(yong)戶只做必要的事情，關注(zhu)必須(xu)的信息(xi)。
上面的Plastic 這個(ge)網站(zhan)就是一個(ge)留(liu)白使用的典范。
留(liu)白的具體使(shi)用(yong)技巧，可以參看(kan)這些(xie)文章。最后(hou)的那篇比較有意思，別錯過(guo)了~
柵格(ge)系統(tong)可以讓(rang)簡約的(de)(de)設計更加(jia)富有條理。柵格(ge)本身(shen)就是用來構建規則性，賦予信息和元(yuan)素以條理和有序感(gan)的(de)(de)，在(zai)此基礎上，能夠讓(rang)元(yuan)素的(de)(de)邏輯(ji)更加(jia)順暢。
柵格系統讓(rang)UI界面(mian)和平(ping)面(mian)設計有(you)了更容易(yi)遵循的邏輯模式(shi)，即使是在極簡的設計作(zuo)品當中，有(you)限的元素在整(zheng)(zheng)個空間中，也可以建立足夠正確的空間關系，使得(de)整(zheng)(zheng)個設計工(gong)作(zuo)協同更加(jia)自(zi)然(ran)。
Cory Etzkorn 為他的(de)(de)作(zuo)品集(ji)網站加(jia)入了(le)整(zheng)(zheng)套柵格(ge)系(xi)統，案例圖片和(he)(he)下面的(de)(de)標題、文本都保持著(zhu)精準的(de)(de)左(zuo)右(you)對齊(qi)，營造出一(yi)種整(zheng)(zheng)飭的(de)(de)視覺(jue)體驗，即使是(shi)點擊交(jiao)互觸發界面變化(hua)，也(ye)遵循著(zhu)潛在的(de)(de)柵格(ge)，使得整(zheng)(zheng)個設計(ji)充滿了(le)協調(diao)感(gan)(gan)。極簡設計(ji)只是(shi)看看起(qi)來(lai)簡約，但(dan)是(shi)內(nei)在所(suo)遵循的(de)(de)規則和(he)(he)條(tiao)理感(gan)(gan)，讓它顯得一(yi)點也(ye)不單薄(bo)。
優設有(you)過(guo)很(hen)多柵格相關的文章，下面(mian)的這3篇(pian)都是干貨，為你梳(shu)理出了柵格系統的一些常(chang)見的方法和技(ji)巧，想了解(jie)的同學(xue)不要錯(cuo)過(guo)~
扁平(ping)化(hua)的設計風格不(bu)僅是目(mu)前(qian)的主流，而且在精神(shen)內核上和(he)(he)極簡主義(yi)保持著(zhu)一(yi)致(zhi)。當然，如今(jin)的扁平(ping)化(hua)設計和(he)(he)之前(qian)有所不(bu)同(tong)，漸變和(he)(he)陰影(ying)的加入使(shi)得(de)它向前(qian)走(zou)出了(le)一(yi)大步，也不(bu)再是“純粹(cui)的”扁平(ping)化(hua)了(le)。
扁(bian)平化(hua)的(de)(de)(de)(de)設(she)計(ji)(ji)元(yuan)素，無論是(shi)圖(tu)標的(de)(de)(de)(de)設(she)計(ji)(ji)還(huan)是(shi)色(se)彩的(de)(de)(de)(de)控(kong)制(zhi)，都會盡量控(kong)制(zhi)信息的(de)(de)(de)(de)層次(ci)和(he)量，這一點(dian)和(he)極(ji)簡的(de)(de)(de)(de)需求(qiu)是(shi)一致的(de)(de)(de)(de)。無論是(shi)設(she)計(ji)(ji)網站還(huan)是(shi)APP，都盡量去除不必要的(de)(de)(de)(de)交互，保持動效的(de)(de)(de)(de)直觀(guan)和(he)簡約。
Liber Finance Group 的(de)網站就采用了扁平(ping)化的(de)設計，整體(ti)呈現(xian)出簡(jian)約的(de)風格(ge)。底部的(de)視覺(jue)元素(su)采用了單(dan)色(se)的(de)線條，動效自然而簡(jian)單(dan)，用戶不會因此而感到信息過(guo)載(zai)。留(liu)白、視覺(jue)元素(su)、文本之間達(da)到了平(ping)衡，而動效和色(se)彩的(de)控(kong)制(zhi)，則讓整個設計自然而生(sheng)動。
關于扁平化設計的(de)文(wen)章(zhang)很多，雖然是其中有些文(wen)章(zhang)比較老(lao)，但是頗具啟(qi)發性：
無論是傳統的(de)平(ping)面設計(ji)還(huan)是更加數字化的(de)網頁和(he)APP的(de)設計(ji)，極簡風格下，所有的(de)元素都應當保(bao)持一致(zhi)性。雜亂(luan)無章是會讓用戶和(he)觀者感(gan)到困惑的(de)。
雖然有的(de)(de)頁面內(nei)容可(ke)能會(hui)需要承載更多的(de)(de)內(nei)容，但是(shi)極簡主義的(de)(de)設計風格約束下(xia)，信(xin)息(xi)只是(shi)橫向拓(tuo)展，內(nei)容的(de)(de)風格和元素的(de)(de)統一性是(shi)不能被(bei)打破(po)的(de)(de)，這樣對于用戶而言，也(ye)是(shi)貼合預(yu)期(qi)的(de)(de)。
Motus 這個網(wang)站(zhan)首頁主要是(shi)(shi)用來(lai)展示自行車的，白色背景+產品(pin)+大標(biao)題的設(she)計(ji)模式貫穿整個設(she)計(ji)，其中提亮(liang)的彩(cai)色文(wen)本在不同的產品(pin)中各(ge)不相同，但是(shi)(shi)這種“變化”也是(shi)(shi)整體一(yi)致性的體現。整個設(she)計(ji)從風格到一(yi)致性的把控(kong)上，都貼合極簡主義的精神。
保(bao)持設計的一(yi)致，是(shi)最基本的設計規(gui)則。在諸多設計規(gui)范(fan)當中都有(you)所有(you)體現：
即使是(shi)韋恩·安德森也無(wu)法確(que)保他電影中(zhong)每一(yi)個畫(hua)面都是(shi)對(dui)稱(cheng)的(de)(de)。在(zai)(zai)極簡主義的(de)(de)網站當中(zhong)，完美的(de)(de)對(dui)稱(cheng)總歸是(shi)少數的(de)(de)存在(zai)(zai)，而設計師也無(wu)需(xu)(xu)刻意去追求(qiu)(qiu)完美的(de)(de)對(dui)稱(cheng)。但是(shi)視覺上的(de)(de)均(jun)衡，則需(xu)(xu)要設計師力求(qiu)(qiu)做到。
有的(de)時候，不(bu)對稱的(de)設計會更加具有分量(liang)感。但是在對比之外，是需要(yao)保持總體(ti)的(de)平(ping)衡。
在 Visme 的(de)(de)(de)這個彈(dan)出(chu)式的(de)(de)(de)廣告當中，左側的(de)(de)(de)視覺(jue)元(yuan)素(su)視覺(jue)吸引(yin)力是極強的(de)(de)(de)，整(zheng)個頁面(mian)呈現左重右(you)輕的(de)(de)(de)勢態。不過左邊的(de)(de)(de)元(yuan)素(su)會在視覺(jue)上引(yin)導用戶注意右(you)邊的(de)(de)(de)文本，足夠(gou)(gou)的(de)(de)(de)留白讓左右(you)兩邊的(de)(de)(de)元(yuan)素(su)都擁有足夠(gou)(gou)的(de)(de)(de)跳出(chu)感，這樣的(de)(de)(de)設計確保了對(dui)比，有方(fang)向性(xing)，還足夠(gou)(gou)平衡。
掌握好平衡感(gan)，還是排版布局的事兒。除了要能夠控制好元素之間的關系，還得(de)懂(dong)得(de)各種排版知識呢：
使用格調比較(jiao)高的圖片(pian)可(ke)以很(hen)好的匹配(pei)極(ji)簡主義的設計，不過在配(pei)色上花點功夫會更好。黑(hei)白這樣(yang)的色調功能性更強，中性，且顯得優雅。不過這并不是唯一(yi)的選擇。
在配色這個事情上，極(ji)簡(jian)主義也同(tong)樣非常講究。通常會選取一種到兩種提亮(liang)色，貫穿整個設計，專門使用。
就像Titled Chair 這個網站的(de)首頁設(she)計，經典的(de)黑白(bai)色(se)之外，采用(yong)鮮艷的(de)紅色(se)作為(wei)(wei)提亮(liang)色(se)，貫穿(chuan)整(zheng)個設(she)計，作為(wei)(wei)強調用(yong)的(de)重點而存在(zai)。它賦予了整(zheng)個設(she)計以簡潔感和層次(ci)感。
配(pei)(pei)色的方法有(you)很多，技巧也不少，工具成堆，最重要的還是設計師得有(you)清(qing)晰的思路，找到貼(tie)合的配(pei)(pei)色方案，這些文章可以幫你喲：
極簡主義設計希望(wang)圖形元素(su)要(yao)足夠清晰易于(yu)分辨，對于(yu)文本字(zi)體(ti)有著(zhu)同樣的要(yao)求。
選擇最易于閱讀(du)的(de)(de)字(zi)(zi)體(ti)(ti)，確保用戶(hu)能夠快速(su)掃視。無論是(shi)襯線體(ti)(ti)還是(shi)非襯線字(zi)(zi)體(ti)(ti)，字(zi)(zi)體(ti)(ti)的(de)(de)X高(gao)度(du)最好是(shi)適(shi)中的(de)(de)，風格上不(bu)(bu)要(yao)裝飾性太(tai)(tai)強，經典(dian)的(de)(de)字(zi)(zi)體(ti)(ti)會更好。在字(zi)(zi)重和行高(gao)、間距上，都控制在合理的(de)(de)度(du)上。不(bu)(bu)要(yao)刻意使用小字(zi)(zi)號(hao)來“創造高(gao)級感”，適(shi)當的(de)(de)放(fang)大(da)字(zi)(zi)體(ti)(ti)，確保用戶(hu)能夠一(yi)目了然(ran)。太(tai)(tai)大(da)的(de)(de)字(zi)(zi)體(ti)(ti)會使得(de)壓迫感太(tai)(tai)強，這個中間的(de)(de)尺度(du)，需要(yao)設計師仔細拿捏。
在 Aimauts 這個網頁當中，即(ji)使加入(ru)了動(dong)效，文(wen)本和字(zi)母的可讀(du)(du)性也都足夠(gou)強。簡約而現代的非襯線字(zi)體，在黑色(se)的背景上顯得極為醒目，易于閱讀(du)(du)也非常(chang)容易理解。
所以，字(zi)體的選擇(ze)很重(zhong)要，下面的幾篇文章已經幫(bang)你選好了字(zi)體：
每個(ge)元素都尤其(qi)存在的(de)(de)(de)理由(you)，有(you)其(qi)獨特的(de)(de)(de)功能，必須(xu)有(you)用(yong)。換句話說，每個(ge)UI控件、每個(ge)交互都有(you)其(qi)獨有(you)的(de)(de)(de)設計意圖在其(qi)中，缺一不(bu)可，沒有(you)一個(ge)是多余的(de)(de)(de)。
如(ru)果(guo)每(mei)個元素(su)對于整(zheng)個設計是沒有貢獻的，那么它憑(ping)什么會出現呢？
就(jiu)像 Sister Agency 這個(ge)網站的(de)設(she)計，整體的(de)設(she)計足(zu)夠(gou)簡單，屏幕上的(de)文本、圖片、菜(cai)單和布局都有著明顯的(de)功能性(xing)，沒(mei)有一個(ge)是(shi)多余的(de)，用(yong)戶無需多想就(jiu)能夠(gou)借(jie)助(zhu)這個(ge)設(she)計達成(cheng)他們的(de)目(mu)標，無論是(shi)獲取(qu)信息還是(shi)抵達特定的(de)內容頁。
動效的設(she)(she)計(ji)(ji)也同樣是如此，每(mei)個(ge)設(she)(she)計(ji)(ji)都應該有著(zhu)明(ming)確的目的性：
打破規則的(de)設計并不影響用戶對于信息的(de)獲取(qu)，甚至能夠創造出有(you)趣的(de)設計和交互體驗。
在極簡(jian)主義的(de)設(she)計(ji)風(feng)格之下，絕大多數的(de)視覺和交互都是清晰而直觀的(de)，即使打破了規則，用(yong)戶也(ye)能清楚地感知(zhi)到，甚至能夠創(chuang)造一種富(fu)有(you)創(chuang)意的(de)意外感。
但是，這個被(bei)打破的(de)規(gui)則(ze)一(yi)定要謹慎地(di)選取，確(que)保(bao)你所打破的(de)規(gui)則(ze)是符合(he)整體設計的(de)，用戶(hu)可(ke)以(yi)理(li)解的(de)，并且在數(shu)量上控(kong)制在一(yi)條即可(ke)，不要打破太多(duo)規(gui)則(ze)，否則(ze)整個設計會(hui)如(ru)同黑箱一(yi)樣，讓用戶(hu)摸不著頭腦。
Westboume Grammar School 這個網站(zhan)的(de)設計(ji)極(ji)簡而富有(you)格調(diao)，網站(zhan)在(zai)設計(ji)的(de)時候，打破了一個常(chang)見的(de)規則：在(zai)屏幕底部(bu)的(de)超大文(wen)本采用的(de)是動(dong)畫(hua)，并(bing)且(qie)用戶必須(xu)讀(du)完才能繼續交(jiao)互。這個設計(ji)的(de)度控制得(de)很(hen)好(hao)，整個設計(ji)中(zhong)只有(you)這一處(chu)違反常(chang)見的(de)規則，并(bing)且(qie)不會(hui)影響(xiang)其(qi)他。
熟(shu)悉規(gui)則才能打破(po)規(gui)則，遵循(xun)規(gui)則也能富有(you)創(chuang)造力(li)：
簡單的設計其實(shi)往(wang)往(wang)是最有效(xiao)的。
在極簡主義設計(ji)當(dang)中，少(shao)即是多這個(ge)規(gui)則是適中適用(yong)的(de)。盡可能的(de)剝離純裝飾性的(de)設計(ji)，確(que)保核心信息是一目了然的(de)。就(jiu)像上(shang)面的(de)設計(ji)。
Delight 這(zhe)個(ge)網站應該會讓(rang)你感(gan)(gan)到好奇。明亮(liang)的(de)(de)(de)色(se)彩和(he)有趣(qu)的(de)(de)(de)排版是誘人的(de)(de)(de)，想要了解更多，底部帶有動效的(de)(de)(de)箭(jian)頭會引導你往(wang)下瀏覽。這(zhe)種(zhong)極簡主義的(de)(de)(de)設(she)計(ji)足夠簡單(dan)，有趣(qu)，因為它會讓(rang)你的(de)(de)(de)用戶對(dui)于后面(mian)的(de)(de)(de)信息發(fa)生興趣(qu)。在柵格(ge)的(de)(de)(de)控(kong)制和(he)充足的(de)(de)(de)留白之下，整個(ge)設(she)計(ji)給人非常舒服(fu)的(de)(de)(de)感(gan)(gan)覺(jue)。
簡約和簡單是(shi)大勢所趨，但是(shi)你(ni)應該對簡單有更加深(shen)入的理解(jie)：
極簡主(zhu)義真正能夠得(de)到如此之(zhi)持久的(de)生命力和如此之(zhi)多的(de)人的(de)擁護(hu)，很大(da)程度上得(de)益于它(ta)成(cheng)就了太多的(de)設計(ji)項目，帶來了太多優秀的(de)產品(pin)。極簡主(zhu)義的(de)偉大(da)之(zhi)處在于它(ta)凸顯關鍵，為用戶(hu)呈現最重(zhong)要的(de)東西，并且讓用戶(hu)關注(zhu)最重(zhong)要的(de)事情，它(ta)是屬于每一(yi)個(ge)人的(de)勝利。
在線客服1號
微信公眾賬號