博納網(wǎng)絡(luò)信息技術(shù)服務(wù)公司總結(jié)了網(wǎng)站制作簡約布局設(shè)計(jì)的一些特點(diǎn)，不妨借此機(jī)會把關(guān)于網(wǎng)站制作簡約布局設(shè)計(jì)的文章都梳理到一起，系統(tǒng)化地學(xué)習(xí)一下。一篇文章，告訴你想知道的一切，應(yīng)該不錯吧？我們已經(jīng)聊過太多的網(wǎng)站制作簡約布局設(shè)計(jì)，趨勢，技巧，方法，策略，都有所涉及。不過聊多了之后也容易迷惑，因?yàn)樵S多摻雜其中的東西，讓簡約布局設(shè)計(jì)的設(shè)計(jì)的概念顯得不那么明晰了。簡約布局設(shè)計(jì)本身是一種設(shè)計(jì)理念，垂直到UI和平面設(shè)計(jì)領(lǐng)域當(dāng)中的時(shí)候，設(shè)計(jì)中的每一個(gè)元素都應(yīng)該是有用的。它簡單，干凈，漂亮，且非常實(shí)用。簡約布局設(shè)計(jì)的設(shè)計(jì)易于用戶理解，參與度也搞。今天的文章，我們打算把知識點(diǎn)梳理一下，用下面的10個(gè)規(guī)則來設(shè)計(jì)，能幫你搞定真正的網(wǎng)站制作簡約布局設(shè)計(jì)。
1、大量的留白
在網(wǎng)站制作簡約布局設(shè)計(jì)當(dāng)中，留白是必不可少的組成部分。留白能夠營造平和感，能夠創(chuàng)造視覺焦點(diǎn)。將必要的信息和視覺焦點(diǎn)營造出來，然后使用留白包圍它們。通過這種方式，將核心的信息凸顯出來，讓用戶只做必要的事情，關(guān)注必須的信息。上面的Plastic 這個(gè)網(wǎng)站就是一個(gè)留白使用的典范。留白的具體使用技巧，可以參看這些文章。最后的那篇比較有意思，別錯過了~
2、用柵格來規(guī)整元素
柵格系統(tǒng)可以讓簡約的設(shè)計(jì)更加富有條理。柵格本身就是用來構(gòu)建規(guī)則性，賦予信息和元素以條理和有序感的，在此基礎(chǔ)上，能夠讓元素的邏輯更加順暢。柵格系統(tǒng)讓UI界面和平面設(shè)計(jì)有了更容易遵循的邏輯模式，即使是在極簡的設(shè)計(jì)作品當(dāng)中，有限的元素在整個(gè)空間中，也可以建立足夠正確的空間關(guān)系，使得整個(gè)設(shè)計(jì)工作協(xié)同更加自然。Cory Etzkorn 為他的作品集網(wǎng)站加入了整套柵格系統(tǒng)，案例圖片和下面的標(biāo)題、文本都保持著精準(zhǔn)的左右對齊，營造出一種整飭的視覺體驗(yàn)，即使是點(diǎn)擊交互觸發(fā)界面變化，也遵循著潛在的柵格，使得整個(gè)設(shè)計(jì)充滿了協(xié)調(diào)感。極簡設(shè)計(jì)只是看看起來簡約，但是內(nèi)在所遵循的規(guī)則和條理感，讓它顯得一點(diǎn)也不單薄優(yōu)設(shè)有過很多柵格相關(guān)的文章，下面的這3篇都是干貨，為你梳理出了柵格系統(tǒng)的一些常見的方法和技巧，想了解的同學(xué)不要錯過~
3、扁平化的元素
扁平化的設(shè)計(jì)風(fēng)格不僅是目前的主流，而且在精神內(nèi)核上和簡約布局設(shè)計(jì)保持著一致。當(dāng)然，如今的扁平化設(shè)計(jì)和之前有所不同，漸變和陰影的加入使得它向前走出了一大步，也不再是“純粹的”扁平化了。扁平化的設(shè)計(jì)元素，無論是圖標(biāo)的設(shè)計(jì)還是色彩的控制，都會盡量控制信息的層次和量，這一點(diǎn)和極簡的需求是一致的。無論是設(shè)計(jì)網(wǎng)站還是APP，都盡量去除不必要的交互，保持動效的直觀和簡約。Liber Finance Group 的網(wǎng)站就采用了扁平化的設(shè)計(jì)，整體呈現(xiàn)出簡約的風(fēng)格。底部的視覺元素采用了單色的線條，動效自然而簡單，用戶不會因此而感到信息過載。留白、視覺元素、文本之間達(dá)到了平衡，而動效和色彩的控制，則讓整個(gè)設(shè)計(jì)自然而生動。關(guān)于扁平化設(shè)計(jì)的文章很多，雖然是其中有些文章比較老，但是頗具啟發(fā)性：
4、保持一致性
無論是傳統(tǒng)的平面設(shè)計(jì)還是更加數(shù)字化的網(wǎng)頁和APP的設(shè)計(jì)，極簡風(fēng)格下，所有的元素都應(yīng)當(dāng)保持一致性。雜亂無章是會讓用戶和觀者感到困惑的。雖然有的頁面內(nèi)容可能會需要承載更多的內(nèi)容，但是簡約布局設(shè)計(jì)的設(shè)計(jì)風(fēng)格約束下，信息只是橫向拓展，內(nèi)容的風(fēng)格和元素的統(tǒng)一性是不能被打破的，這樣對于用戶而言，也是貼合預(yù)期的。Motus 這個(gè)網(wǎng)站首頁主要是用來展示自行車的，白色背景+產(chǎn)品+大標(biāo)題的設(shè)計(jì)模式貫穿整個(gè)設(shè)計(jì)，其中提亮的彩色文本在不同的產(chǎn)品中各不相同，但是這種“變化”也是整體一致性的體現(xiàn)。整個(gè)設(shè)計(jì)從風(fēng)格到一致性的把控上，都貼合簡約布局設(shè)計(jì)的精神。保持設(shè)計(jì)的一致，是最基本的設(shè)計(jì)規(guī)則。在諸多設(shè)計(jì)規(guī)范當(dāng)中都有所有體現(xiàn)：
5、在不對稱中保持平衡
即使是韋恩·安德森也無法確保他電影中每一個(gè)畫面都是對稱的。在簡約布局設(shè)計(jì)的網(wǎng)站當(dāng)中，完美的對稱總歸是少數(shù)的存在，而設(shè)計(jì)師也無需刻意去追求完美的對稱。但是視覺上的均衡，則需要設(shè)計(jì)師力求做到。有的時(shí)候，不對稱的設(shè)計(jì)會更加具有分量感。但是在對比之外，是需要保持總體的平衡。在 Visme 的這個(gè)彈出式的廣告當(dāng)中，左側(cè)的視覺元素視覺吸引力是極強(qiáng)的，整個(gè)頁面呈現(xiàn)左重右輕的勢態(tài)。不過左邊的元素會在視覺上引導(dǎo)用戶注意右邊的文本，足夠的留白讓左右兩邊的元素都擁有足夠的跳出感，這樣的設(shè)計(jì)確保了對比，有方向性，還足夠平衡。掌握好平衡感，還是排版布局的事兒。除了要能夠控制好元素之間的關(guān)系，還得懂得各種排版知識呢：
6、簡化配色
使用格調(diào)比較高的圖片可以很好的匹配簡約布局設(shè)計(jì)的設(shè)計(jì)，不過在配色上花點(diǎn)功夫會更好。黑白這樣的色調(diào)功能性更強(qiáng)，中性，且顯得優(yōu)雅。不過這并不是唯一的選擇。在配色這個(gè)事情上，簡約布局設(shè)計(jì)也同樣非常講究。通常會選取一種到兩種提亮色，貫穿整個(gè)設(shè)計(jì)，專門使用。就像Titled Chair 這個(gè)網(wǎng)站的首頁設(shè)計(jì)，經(jīng)典的黑白色之外，采用鮮艷的紅色作為提亮色，貫穿整個(gè)設(shè)計(jì)，作為強(qiáng)調(diào)用的重點(diǎn)而存在。它賦予了整個(gè)設(shè)計(jì)以簡潔感和層次感。配色的方法有很多，技巧也不少，工具成堆，最重要的還是設(shè)計(jì)師得有清晰的思路，找到貼合的配色方案，這些文章可以幫你喲：
7、選取可讀性較高的字體
網(wǎng)站制作簡約布局設(shè)計(jì)希望圖形元素要足夠清晰易于分辨，對于文本字體有著同樣的要求。選擇最易于閱讀的字體，確保用戶能夠快速掃視。無論是襯線體還是非襯線字體，字體的X高度最好是適中的，風(fēng)格上不要裝飾性太強(qiáng)，經(jīng)典的字體會更好。在字重和行高、間距上，都控制在合理的度上。不要刻意使用小字號來“創(chuàng)造高級感”，適當(dāng)?shù)姆糯笞煮w，確保用戶能夠一目了然。太大的字體會使得壓迫感太強(qiáng)，這個(gè)中間的尺度，需要設(shè)計(jì)師仔細(xì)拿捏。在 Aimauts 這個(gè)網(wǎng)頁當(dāng)中，即使加入了動效，文本和字母的可讀性也都足夠強(qiáng)。簡約而現(xiàn)代的非襯線字體，在黑色的背景上顯得極為醒目，易于閱讀也非常容易理解。所以，字體的選擇很重要，下面的幾篇文章已經(jīng)幫你選好了字體：
8、有目的地設(shè)計(jì)每個(gè)元素
每個(gè)元素都尤其存在的理由，有其獨(dú)特的功能，必須有用。換句話說，每個(gè)UI控件、每個(gè)交互都有其獨(dú)有的設(shè)計(jì)意圖在其中，缺一不可，沒有一個(gè)是多余的。
如果每個(gè)元素對于整個(gè)設(shè)計(jì)是沒有貢獻(xiàn)的，那么它憑什么會出現(xiàn)呢？就像 Sister Agency 這個(gè)網(wǎng)站的設(shè)計(jì)，整體的設(shè)計(jì)足夠簡單，屏幕上的文本、圖片、菜單和布局都有著明顯的功能性，沒有一個(gè)是多余的，用戶無需多想就能夠借助這個(gè)設(shè)計(jì)達(dá)成他們的目標(biāo)，無論是獲取信息還是抵達(dá)特定的內(nèi)容頁。動效的設(shè)計(jì)也同樣是如此，每個(gè)設(shè)計(jì)都應(yīng)該有著明確的目的性：
9、打破一條規(guī)則
打破規(guī)則的設(shè)計(jì)并不影響用戶對于信息的獲取，甚至能夠創(chuàng)造出有趣的設(shè)計(jì)和交互體驗(yàn)。在簡約布局設(shè)計(jì)的設(shè)計(jì)風(fēng)格之下，絕大多數(shù)的視覺和交互都是清晰而直觀的，即使打破了規(guī)則，用戶也能清楚地感知到，甚至能夠創(chuàng)造一種富有創(chuàng)意的意外感。但是，這個(gè)被打破的規(guī)則一定要謹(jǐn)慎地選取，確保你所打破的規(guī)則是符合整體設(shè)計(jì)的，用戶可以理解的，并且在數(shù)量上控制在一條即可，不要打破太多規(guī)則，否則整個(gè)設(shè)計(jì)會如同黑箱一樣，讓用戶摸不著頭腦。Westboume Grammar School 這個(gè)網(wǎng)站的設(shè)計(jì)極簡而富有格調(diào)，網(wǎng)站在設(shè)計(jì)的時(shí)候，打破了一個(gè)常見的規(guī)則：在屏幕底部的超大文本采用的是動畫，并且用戶必須讀完才能繼續(xù)交互。這個(gè)設(shè)計(jì)的度控制得很好，整個(gè)設(shè)計(jì)中只有這一處違反常見的規(guī)則，并且不會影響其他。熟悉規(guī)則才能打破規(guī)則，遵循規(guī)則也能富有創(chuàng)造力：
10、保持簡單
簡單的設(shè)計(jì)其實(shí)往往是最有效的。在網(wǎng)站制作簡約布局設(shè)計(jì)當(dāng)中，少即是多這個(gè)規(guī)則是適中適用的。盡可能的剝離純裝飾性的設(shè)計(jì)，確保核心信息是一目了然的。就像上面的設(shè)計(jì)。Delight 這個(gè)網(wǎng)站應(yīng)該會讓你感到好奇。明亮的色彩和有趣的排版是誘人的，想要了解更多，底部帶有動效的箭頭會引導(dǎo)你往下瀏覽。這種簡約布局設(shè)計(jì)的設(shè)計(jì)足夠簡單，有趣，因?yàn)樗鼤屇愕挠脩魧τ诤竺娴男畔l(fā)生興趣。在柵格的控制和充足的留白之下，整個(gè)設(shè)計(jì)給人非常舒服的感覺。
簡約和簡單是大勢所趨，但是你應(yīng)該對簡單有更加深入的理解：簡約布局設(shè)計(jì)或許是未來網(wǎng)站制作行業(yè)設(shè)計(jì)師所采用的流行方式之一，簡約布局設(shè)計(jì)真正能夠得到如此之持久的生命力和如此之多的人的擁護(hù)，很大程度上得益于它成就了太多的設(shè)計(jì)項(xiàng)目，帶來了太多優(yōu)秀的產(chǎn)品。簡約布局設(shè)計(jì)的偉大之處在于它凸顯關(guān)鍵，為用戶呈現(xiàn)最重要的東西，并且讓用戶關(guān)注最重要的事情，它是屬于每一個(gè)人的勝利。深圳網(wǎng)站制作公司博納網(wǎng)絡(luò)編輯整理。
