1. 奇數(shù)原則和三分法構(gòu)圖

奇數(shù)法則意思是說，在設(shè)計(jì)作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對稱，這可能會(huì)顯得過于正式和不自然。比如，在一行中排列三個(gè)或五個(gè)卡片會(huì)比 2 個(gè)或 4 個(gè)效果更好，作品會(huì)更加讓用戶感到舒服和自然。

Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁設(shè)計(jì)

三分法構(gòu)圖（也被稱之為黃金網(wǎng)格規(guī)則），在畫面中以水平和豎直方向分成 3×3 的網(wǎng)格和 4 個(gè)交叉點(diǎn)。這個(gè)規(guī)則能很好的協(xié)助設(shè)計(jì)師將最重要的元素放在網(wǎng)格的交叉點(diǎn)上，這樣可以很容易的設(shè)計(jì)出滿意的構(gòu)圖。

為什么會(huì)這樣？因?yàn)槿址?gòu)圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對稱的美，產(chǎn)生了更有吸引力的構(gòu)圖。

2. 視覺引導(dǎo)線

你希望用戶關(guān)注哪些地方？高級(jí)設(shè)計(jì)師非常擅長引導(dǎo)用戶的視覺焦點(diǎn)，這種引導(dǎo)可以通過可見和不可見的引導(dǎo)線來完成。這些線條在構(gòu)圖中也可以打造一種動(dòng)感，也能為畫面增添視覺沖擊力。

達(dá)到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導(dǎo)線來實(shí)現(xiàn)。利用透視、顏色、對比度和正負(fù)空間同樣可以幫助達(dá)到這種想要的效果。

從左到右的不易察覺的曲線將用戶的視線引導(dǎo)到頁面文字上

3. 大小和比例

大小（scale）是設(shè)計(jì)中一個(gè)元素與另一個(gè)元素的相對大小。元素通過大小不同創(chuàng)建視覺層次，其中最大的元素首先會(huì)吸引用戶的注意力，因此看起來是最重要的。常規(guī)的設(shè)計(jì)策略就是將最重要的元素做成最大的，然后逐級(jí)遞減。

比例(Proportion)不同于大小，類似但有區(qū)別。比例原則是指一個(gè)整體設(shè)計(jì)中各部分的尺寸關(guān)系。設(shè)計(jì)中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。

熟練地使用大小和比例是實(shí)現(xiàn)設(shè)計(jì)統(tǒng)一的關(guān)鍵。當(dāng)一些元素的大小過大或過小，或者比例失調(diào)時(shí)，設(shè)計(jì)組合就會(huì)失去統(tǒng)一性。這種錯(cuò)誤可能發(fā)生在排版和其他元素上。例如，標(biāo)題與子標(biāo)題和正文相比顯得過大。當(dāng)設(shè)計(jì)元素失衡時(shí)，設(shè)計(jì)就會(huì)“感覺不平衡”。

大小和比例都沒做好時(shí)(左圖)，看起來處理的比較細(xì)致了，但依然沒有做到很好，在大小上正文和標(biāo)題分不清(右圖)。

4. 強(qiáng)調(diào)

強(qiáng)調(diào)原則用于使設(shè)計(jì)的某些元素突出(使用對比、接近、比例、留白等)或不突出，即弱化強(qiáng)調(diào)(例如在頁面底部有一個(gè)幾乎看不見的“小字”)。強(qiáng)調(diào)是層級(jí)之母，因?yàn)闆]有強(qiáng)調(diào)就沒有層級(jí)。

與其他一些設(shè)計(jì)原則一樣，“強(qiáng)調(diào)”是用來引導(dǎo)人們關(guān)注設(shè)計(jì)，并強(qiáng)調(diào)需要重點(diǎn)關(guān)注的第一、第二和第三點(diǎn)。首頁面和電商轉(zhuǎn)化頁面在 99%的情況下都使用這種原則。

使用這個(gè)原則，在購物網(wǎng)站上強(qiáng)調(diào)了標(biāo)語和產(chǎn)品，轉(zhuǎn)化效果非常好

5. 統(tǒng)一性

統(tǒng)一是指設(shè)計(jì)元素如何很好地結(jié)合在一起，形成“視覺凝聚力”。它指的是設(shè)計(jì)中的連貫性，讓人們覺得所有部分都是一起的。每個(gè)元素都應(yīng)該具有清晰的視覺關(guān)系，以幫助傳達(dá)清晰、簡潔的信息。整體性好的設(shè)計(jì)比整體性差的設(shè)計(jì)更有條理，質(zhì)量也更高。

運(yùn)用統(tǒng)一的配色，重復(fù)、平衡和對稱之類的原則將有助于在設(shè)計(jì)中形成一種和諧感，也就是一致性。設(shè)計(jì)中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個(gè)完美的整體。

一致的顏色、重復(fù)的圖案、平衡和對稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺。

6. 接近原則

格式塔的接近原則讓設(shè)計(jì)師將同類型的相關(guān)元素進(jìn)行分組。把它們分開得更遠(yuǎn)，元素就顯得越不相關(guān)，它們之間的關(guān)系就會(huì)減弱。一般來說，人們會(huì)認(rèn)為遠(yuǎn)離的元素是不相關(guān)的。

不應(yīng)該讓用戶在設(shè)計(jì)中分辨哪些元素是相互關(guān)聯(lián)的，正如美國郵政服務(wù)的例子所顯示的那樣，缺乏對鄰近性的關(guān)注會(huì)導(dǎo)致直接的認(rèn)知緊張，損害用戶體驗(yàn)。

接近原則沒做好的案例。由于字段標(biāo)簽離它們下面的字段更近，人們可能會(huì)搞混

下面是一個(gè)鄰近性原則做的好的案例，我們可以看到相關(guān)元素是如何通過鄰近性關(guān)聯(lián)起來的(分組的元素用紫色表示)。

一個(gè)把接近原則用好的網(wǎng)頁設(shè)計(jì)案例

7. 一致性

一致性原則使數(shù)字產(chǎn)品的使用更加可預(yù)測，符合用戶的期望。設(shè)計(jì)中的一致性可以培養(yǎng)熟悉度，它可以提高用戶體驗(yàn)、可用性和用戶使用效率。另一方面，不一致的設(shè)計(jì)將產(chǎn)生更多的認(rèn)知負(fù)荷/腦力勞動(dòng)，并導(dǎo)致困惑和挫折。這就相當(dāng)于在用戶的路徑上設(shè)置障礙。讓用戶的心流嘎然而止!

做好一致性可以增強(qiáng)“審美凝聚力”?！拔覀兌贾?，當(dāng)我們使用應(yīng)用時(shí)，應(yīng)用的導(dǎo)航位置如果經(jīng)常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。

除了視覺一致性和易用性，品牌一致性在產(chǎn)品設(shè)計(jì)中也發(fā)揮著重要作用。如果沒有一致的元素呈現(xiàn)，如排版、配色和圖案，高質(zhì)量的品牌體驗(yàn)將無法傳遞。

在用戶體驗(yàn)方面，一致性意味著在設(shè)計(jì)中使用相似的 UI 元素來完成相似的任務(wù)，即在整個(gè)產(chǎn)品中擁有相似的功能和行為。因?yàn)榭捎眯允且环N評(píng)估用戶界面易用性的質(zhì)量屬性，所以一致性對用戶體驗(yàn)的可用性有很大的貢獻(xiàn)。

一致性是通過使用相同的配色、排版、間距、模式和交互來實(shí)現(xiàn)的。

8. 顏色

顏色在設(shè)計(jì)中是非常重要，幾乎是設(shè)計(jì)中最具影響力的創(chuàng)意元素。一個(gè)深思熟慮的配色可以讓一個(gè)設(shè)計(jì)從普通到驚艷，而一個(gè)平庸的配色會(huì)降低用戶的體驗(yàn)，甚至阻礙他們使用產(chǎn)品的能力。

明亮、豐富的顏色比柔和的顏色更引人注目，因此有更大的視覺沖擊。柔和的顏色可以提供一個(gè)令人愉快的，微妙的配色方案，但適當(dāng)?shù)膶Ρ缺仨氁?，特別是文字，必須保證可讀性。

顏色甚至可以用于呈現(xiàn) UI 中的結(jié)構(gòu)感并指向可用的交互，但為設(shè)計(jì)制作一個(gè)配色方案并不是一項(xiàng)簡單的任務(wù)。除了品牌化，還必須非常小心地創(chuàng)造顏色的和諧和耐用性，使得它能在各個(gè)場景下都能正常使用。

色彩心理學(xué)也不容忽視。色彩承載著意義和情感，可以向人的潛意識(shí)傳遞信息。在品牌方面，人們對顏色做了大量的心理學(xué)研究，因?yàn)樵谌藗兣c品牌進(jìn)行任何互動(dòng)之前，顏色會(huì)讓他們產(chǎn)生一種本能的反應(yīng)。例如，藍(lán)色通常被認(rèn)為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認(rèn)為是增加人們的心率，想想飲料包裝。

一個(gè)極簡主義的暗色主題設(shè)計(jì)傳達(dá)了一個(gè)特定的品牌氣質(zhì)，并使用了少量的顏色。

9. 排版

排版在設(shè)計(jì)中扮演著非常重要的角色，它的重要性再怎么強(qiáng)調(diào)都不為過。在構(gòu)圖中，字體樣式對人們感知設(shè)計(jì)的影響比任何其他元素都大，可能除了顏色。

因?yàn)槲覀兊拇竽X以閃電般的速度運(yùn)轉(zhuǎn)，一個(gè)字體會(huì)對一個(gè)設(shè)計(jì)產(chǎn)生影響，以至于它可能在不到一眨眼的時(shí)間內(nèi)改變用戶的印象。與顏色一樣，字體甚至?xí)绊懳覀兊那榫w，資深設(shè)計(jì)師可以通過字體傳達(dá)情緒和風(fēng)格。通過選擇合適的字體，我們可以傳達(dá)出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。

排版層次結(jié)構(gòu)可以快速建立視覺層次結(jié)構(gòu)，并且通常在其中扮演重要角色。因此，在設(shè)計(jì)中經(jīng)常使用不同的字體和字體大小來表示層次結(jié)構(gòu)，例如標(biāo)題、副標(biāo)題、正文和引用。

“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達(dá)重要內(nèi)容，并表達(dá)你的品牌?！?——蘋果的人機(jī)界面指南

蘭博基尼的網(wǎng)站巧妙地使用了排版風(fēng)格和比例來賦予其設(shè)計(jì)力量。

10. 負(fù)空間(又名留白)

Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點(diǎn)也適用于設(shè)計(jì)，元素之間的負(fù)空間給予設(shè)計(jì)強(qiáng)調(diào)、平衡和統(tǒng)一。

元素周圍適當(dāng)?shù)呢?fù)空間將焦點(diǎn)集中在元素本身。它強(qiáng)調(diào)了內(nèi)容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點(diǎn)，更容易感到困惑。

蘋果官網(wǎng)提供了一個(gè)利用負(fù)空間創(chuàng)造強(qiáng)烈焦點(diǎn)的杰出例子。

11. 最后

人們已經(jīng)開始期待所有平臺(tái)和設(shè)備上的優(yōu)化、無阻礙的用戶體驗(yàn)。理解設(shè)計(jì)原則及其交互方式對所有設(shè)計(jì)師來說都是至關(guān)重要的。使用專業(yè)技能設(shè)計(jì)它們是創(chuàng)造具有視覺吸引力的功能性設(shè)計(jì)的關(guān)鍵。我們不要忘記，美學(xué)的完整性會(huì)嚴(yán)重影響用戶體驗(yàn)。

基于原則的設(shè)計(jì)是設(shè)計(jì)師在感覺有點(diǎn)迷失或用盡創(chuàng)意時(shí)可以依賴的黃金標(biāo)準(zhǔn)方法。在沒有理解和實(shí)現(xiàn)設(shè)計(jì)原則的情況下，也可能實(shí)現(xiàn)可接受的設(shè)計(jì)。然而，這可能需要大量的嘗試和錯(cuò)誤才能創(chuàng)造出看起來不錯(cuò)的內(nèi)容，并創(chuàng)造出最佳的用戶體驗(yàn)。

產(chǎn)品的美學(xué)質(zhì)量與它的實(shí)用性密不可分，因?yàn)槲覀兠刻焓褂玫漠a(chǎn)品影響著我們和我們的幸福。但只有精心制作的物品才會(huì)美麗?！?Dieter Rams(迪特爾·拉姆斯)

當(dāng)我們不關(guān)注由設(shè)計(jì)原則驅(qū)動(dòng)的設(shè)計(jì)質(zhì)量時(shí)，我們可能會(huì)忽視品牌質(zhì)量及其所代表的一切。當(dāng)某些東西設(shè)計(jì)不好時(shí)，品牌就會(huì)受到傷害，產(chǎn)品也會(huì)受到影響。這就是為什么偉大的設(shè)計(jì)師在他們的工作中極其嚴(yán)謹(jǐn)， 他們知道“你永遠(yuǎn)不會(huì)有第二次機(jī)會(huì)給人留下良好的第一印象。”

設(shè)計(jì)的細(xì)節(jié)成就了設(shè)計(jì)本身。—— 查爾斯 伊姆斯（Charles Eames）

作者：彩云Sky

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司