極簡主義本身是一種設計理(lǐ)念,垂直到UI和(hé)平面設計領域當中的(de)時(shí)候,設計中的(de)每一個(gè)元素都應該是有用(yòng)的(de)。它簡單,幹淨,漂亮,且非常實用(yòng)。極簡主義的(de)設計易于用(yòng)戶理(lǐ)解,參與度也(yě)搞。
今天的(de)文章(zhāng),我們打算(suàn)把知識點梳理(lǐ)一下(xià),用(yòng)下(xià)面的(de)10個(gè)規則來(lái)設計,能幫你搞定真正的(de)極簡主義設計。
1、大(dà)量的(de)留白
在極簡主義設計當中,留白是必不可(kě)少的(de)組成部分(fēn)。留白能夠營造平和(hé)感,能夠創造視覺焦點。
将必要的(de)信息和(hé)視覺焦點營造出來(lái),然後使用(yòng)留白包圍它們。通(tōng)過這(zhè)種方式,将核心的(de)信息凸顯出來(lái),讓用(yòng)戶隻做(zuò)必要的(de)事情,關注必須的(de)信息。
2、用(yòng)栅格來(lái)規整元素
栅格系統可(kě)以讓簡約的(de)設計更加富有條理(lǐ)。栅格本身就是用(yòng)來(lái)構建規則性,賦予信息和(hé)元素以條理(lǐ)和(hé)有序感的(de),在此基礎上,能夠讓元素的(de)邏輯更加順暢。
栅格系統讓UI界面和(hé)平面設計有了(le)更容易遵循的(de)邏輯模式,即使是在極簡的(de)設計作品當中,有限的(de)元素在整個(gè)空間中,也(yě)可(kě)以建立足夠正确的(de)空間關系,使得(de)整個(gè)設計工作協同更加自然。
Cory Etzkorn 爲他(tā)的(de)作品集網站加入了(le)整套栅格系統,案例圖片和(hé)下(xià)面的(de)标題、文本都保持著(zhe)精準的(de)左右對(duì)齊,營造出一種整饬的(de)視覺體驗,即使是點擊交互觸發界面變化(huà),也(yě)遵循著(zhe)潛在的(de)栅格,使得(de)整個(gè)設計充滿了(le)協調感。極簡設計隻是看看起來(lái)簡約,但是内在所遵循的(de)規則和(hé)條理(lǐ)感,讓它顯得(de)一點也(yě)不單薄。
3、扁平化(huà)的(de)元素
扁平化(huà)的(de)設計風格不僅是目前的(de)主流,而且在精神内核上和(hé)極簡主義保持著(zhe)一緻。當然,如今的(de)扁平化(huà)設計和(hé)之前有所不同,漸變和(hé)陰影(yǐng)的(de)加入使得(de)它向前走出了(le)一大(dà)步,也(yě)不再是“純粹的(de)”扁平化(huà)了(le)。
扁平化(huà)的(de)設計元素,無論是圖标的(de)設計還(hái)是色彩的(de)控制,都會盡量控制信息的(de)層次和(hé)量,這(zhè)一點和(hé)極簡的(de)需求是一緻的(de)。無論是設計網站還(hái)是APP,都盡量去除不必要的(de)交互,保持動效的(de)直觀和(hé)簡約。
Liber Finance Group 的(de)網站就采用(yòng)了(le)扁平化(huà)的(de)設計,整體呈現出簡約的(de)風格。底部的(de)視覺元素采用(yòng)了(le)單色的(de)線條,動效自然而簡單,用(yòng)戶不會因此而感到信息過載。留白、視覺元素、文本之間達到了(le)平衡,而動效和(hé)色彩的(de)控制,則讓整個(gè)設計自然而生動。
4、保持一緻性
無論是傳統的(de)平面設計還(hái)是更加數字化(huà)的(de)網頁和(hé)APP的(de)設計,極簡風格下(xià),所有的(de)元素都應當保持一緻性。雜(zá)亂無章(zhāng)是會讓用(yòng)戶和(hé)觀者感到困惑的(de)。
雖然有的(de)頁面内容可(kě)能會需要承載更多(duō)的(de)内容,但是極簡主義的(de)設計風格約束下(xià),信息隻是橫向拓展,内容的(de)風格和(hé)元素的(de)統一性是不能被打破的(de),這(zhè)樣對(duì)于用(yòng)戶而言,也(yě)是貼合預期的(de)。
Motus 這(zhè)個(gè)網站首頁主要是用(yòng)來(lái)展示自行車的(de),白色背景+産品+大(dà)标題的(de)設計模式貫穿整個(gè)設計,其中提亮的(de)彩色文本在不同的(de)産品中各不相同,但是這(zhè)種“變化(huà)”也(yě)是整體一緻性的(de)體現。整個(gè)設計從風格到一緻性的(de)把控上,都貼合極簡主義的(de)精神。
5、在不對(duì)稱中保持平衡
即使是韋恩·安德森也(yě)無法确保他(tā)電影(yǐng)中每一個(gè)畫(huà)面都是對(duì)稱的(de)。在極簡主義的(de)網站當中,完美(měi)的(de)對(duì)稱總歸是少數的(de)存在,而設計師也(yě)無需刻意去追求完美(měi)的(de)對(duì)稱。但是視覺上的(de)均衡,則需要設計師力求做(zuò)到。
有的(de)時(shí)候,不對(duì)稱的(de)設計會更加具有分(fēn)量感。但是在對(duì)比之外,是需要保持總體的(de)平衡。
在 Visme 的(de)這(zhè)個(gè)彈出式的(de)廣告當中,左側的(de)視覺元素視覺吸引力是極強的(de),整個(gè)頁面呈現左重右輕的(de)勢态。不過左邊的(de)元素會在視覺上引導用(yòng)戶注意右邊的(de)文本,足夠的(de)留白讓左右兩邊的(de)元素都擁有足夠的(de)跳出感,這(zhè)樣的(de)設計确保了(le)對(duì)比,有方向性,還(hái)足夠平衡。
6、簡化(huà)配色
使用(yòng)格調比較高(gāo)的(de)圖片可(kě)以很好的(de)匹配極簡主義的(de)設計,不過在配色上花點功夫會更好。黑(hēi)白這(zhè)樣的(de)色調功能性更強,中性,且顯得(de)優雅。不過這(zhè)并不是唯一的(de)選擇。
在配色這(zhè)個(gè)事情上,極簡主義也(yě)同樣非常講究。通(tōng)常會選取一種到兩種提亮色,貫穿整個(gè)設計,專門使用(yòng)。
就像Titled Chair 這(zhè)個(gè)網站的(de)首頁設計,經典的(de)黑(hēi)白色之外,采用(yòng)鮮豔的(de)紅色作爲提亮色,貫穿整個(gè)設計,作爲強調用(yòng)的(de)重點而存在。它賦予了(le)整個(gè)設計以簡潔感和(hé)層次感。
7、選取可(kě)讀性較高(gāo)的(de)字體
極簡主義設計希望圖形元素要足夠清晰易于分(fēn)辨,對(duì)于文本字體有著(zhe)同樣的(de)要求。
選擇最易于閱讀的(de)字體,确保用(yòng)戶能夠快(kuài)速掃視。無論是襯線體還(hái)是非襯線字體,字體的(de)X高(gāo)度最好是适中的(de),風格上不要裝飾性太強,經典的(de)字體會更好。在字重和(hé)行高(gāo)、間距上,都控制在合理(lǐ)的(de)度上。不要刻意使用(yòng)小字号來(lái)“創造高(gāo)級感”,适當的(de)放大(dà)字體,确保用(yòng)戶能夠一目了(le)然。太大(dà)的(de)字體會使得(de)壓迫感太強,這(zhè)個(gè)中間的(de)尺度,需要設計師仔細拿捏。
在 Aimauts 這(zhè)個(gè)網頁當中,即使加入了(le)動效,文本和(hé)字母的(de)可(kě)讀性也(yě)都足夠強。簡約而現代的(de)非襯線字體,在黑(hēi)色的(de)背景上顯得(de)極爲醒目,易于閱讀也(yě)非常容易理(lǐ)解。
8、有目的(de)地設計每個(gè)元素
每個(gè)元素都尤其存在的(de)理(lǐ)由,有其獨特的(de)功能,必須有用(yòng)。換句話(huà)說,每個(gè)UI控件、每個(gè)交互都有其獨有的(de)設計意圖在其中,缺一不可(kě),沒有一個(gè)是多(duō)餘的(de)。
如果每個(gè)元素對(duì)于整個(gè)設計是沒有貢獻的(de),那麽它憑什(shén)麽會出現呢(ne)?
就像 Sister Agency 這(zhè)個(gè)網站的(de)設計,整體的(de)設計足夠簡單,屏幕上的(de)文本、圖片、菜單和(hé)布局都有著(zhe)明(míng)顯的(de)功能性,沒有一個(gè)是多(duō)餘的(de),用(yòng)戶無需多(duō)想就能夠借助這(zhè)個(gè)設計達成他(tā)們的(de)目标,無論是獲取信息還(hái)是抵達特定的(de)内容頁。
9、打破一條規則
打破規則的(de)設計并不影(yǐng)響用(yòng)戶對(duì)于信息的(de)獲取,甚至能夠創造出有趣的(de)設計和(hé)交互體驗。
在極簡主義的(de)設計風格之下(xià),絕大(dà)多(duō)數的(de)視覺和(hé)交互都是清晰而直觀的(de),即使打破了(le)規則,用(yòng)戶也(yě)能清楚地感知到,甚至能夠創造一種富有創意的(de)意外感。
但是,這(zhè)個(gè)被打破的(de)規則一定要謹慎地選取,确保你所打破的(de)規則是符合整體設計的(de),用(yòng)戶可(kě)以理(lǐ)解的(de),并且在數量上控制在一條即可(kě),不要打破太多(duō)規則,否則整個(gè)設計會如同黑(hēi)箱一樣,讓用(yòng)戶摸不著(zhe)頭腦(nǎo)。
Westboume Grammar School 這(zhè)個(gè)網站的(de)設計極簡而富有格調,網站在設計的(de)時(shí)候,打破了(le)一個(gè)常見的(de)規則:在屏幕底部的(de)超大(dà)文本采用(yòng)的(de)是動畫(huà),并且用(yòng)戶必須讀完才能繼續交互。這(zhè)個(gè)設計的(de)度控制得(de)很好,整個(gè)設計中隻有這(zhè)一處違反常見的(de)規則,并且不會影(yǐng)響其他(tā)。
10、保持簡單
簡單的(de)設計其實往往是最有效的(de)。
在極簡主義設計當中,少即是多(duō)這(zhè)個(gè)規則是适中适用(yòng)的(de)。盡可(kě)能的(de)剝離純裝飾性的(de)設計,确保核心信息是一目了(le)然的(de)。就像上面的(de)設計。
Delight 這(zhè)個(gè)網站應該會讓你感到好奇。明(míng)亮的(de)色彩和(hé)有趣的(de)排版是誘人(rén)的(de),想要了(le)解更多(duō),底部帶有動效的(de)箭頭會引導你往下(xià)浏覽。這(zhè)種極簡主義的(de)設計足夠簡單,有趣,因爲它會讓你的(de)用(yòng)戶對(duì)于後面的(de)信息發生興趣。在栅格的(de)控制和(hé)充足的(de)留白之下(xià),整個(gè)設計給人(rén)非常舒服的(de)感覺。
極簡主義是每個(gè)人(rén)的(de)勝利
極簡主義真正能夠得(de)到如此之持久的(de)生命力和(hé)如此之多(duō)的(de)人(rén)的(de)擁護,很大(dà)程度上得(de)益于它成就了(le)太多(duō)的(de)設計項目,帶來(lái)了(le)太多(duō)優秀的(de)産品。極簡主義的(de)偉大(dà)之處在于它凸顯關鍵,爲用(yòng)戶呈現最重要的(de)東西,并且讓用(yòng)戶關注最重要的(de)事情,它是屬于每一個(gè)人(rén)的(de)勝利。
最新動态
常見問題百寶箱
A2014,有位學妹不顧家人(rén)反對(duì),在上海這(zhè)個(gè)國際化(huà)大(dà)都市謀了(le)一個(gè)公衆号助理(lǐ)的(de)職位。鬥志昂揚地奮鬥了(le) 3 年,我眼看著(zhe)她的(de)内容駕馭能力突飛(fēi)猛進,内容質量從三流到一流,職位
A文章(zhāng)主要分(fēn)析了(le)不同的(de)視覺設計元素是如何影(yǐng)響網站用(yòng)戶體驗,希望通(tōng)過文章(zhāng)的(de)解讀能夠對(duì)你的(de)産品設計帶來(lái)些啓發。 也(yě)許是因爲我在視覺設計上沒有太多(duō)經驗,我發現
A雙赢系統建站系統,三網同步,建站推廣一步到位雙赢系統建站系統,三網同步,建站推廣一步到位雙赢系統建站系統,三網同步,建站推廣一步到位雙赢系統建站系統,三網同步,建站推
Copyright 2013-2020 All Rights Reserved 雲南雲豹網絡科技股份有限公司