編輯導(dǎo)語：人們常說，優(yōu)秀設(shè)計(jì)背后的工藝是無形的，然而，這不是隨機(jī)發(fā)生的，不管人們是否注意到，設(shè)計(jì)的背后是遵循著大量而嚴(yán)格的原理去執(zhí)行的。本篇文章將探討那些最底層的設(shè)計(jì)原理，并分析它們?yōu)槭裁磿沟迷O(shè)計(jì)更加有效，感興趣的朋友快來看看吧!

Hi，我是彩云。設(shè)計(jì)趨勢年年在變，設(shè)計(jì)技能也在不斷更新，但回到本源，底層的理論知識是不會變的。我自己幾乎每年還會翻看一些講設(shè)計(jì)基礎(chǔ)的書，比如《寫給大家看的設(shè)計(jì)書》之類的，會發(fā)現(xiàn)這些原理每次看都會有新的收獲。隨著工作年數(shù)增加，對底層知識的價(jià)值認(rèn)識也越來越深刻，不知道你會不會有這種感覺？

在Medium上看到一位工作超過17年的國外設(shè)計(jì)leader寫的一篇關(guān)于設(shè)計(jì)原理的文章，講設(shè)計(jì)如何變得有效？總結(jié)得很好。文章很長，為了提高你的閱讀體驗(yàn)，我打算分2期來更新，如若你能耐心看完，相信定會有收獲！

當(dāng)沒有認(rèn)知緊張時(shí)，用戶心流才會發(fā)生。當(dāng)一個(gè)設(shè)計(jì)有效時(shí)，你才能體驗(yàn)到認(rèn)知上的輕松。如果沒有，你的“心流狀態(tài)”就會中斷(稍后會詳細(xì)討論)，讓我們陷入認(rèn)知緊張，于是“設(shè)計(jì)失敗了”。

當(dāng)基本設(shè)計(jì)原則被忽略時(shí)，這種情況很容易發(fā)生，導(dǎo)致設(shè)計(jì)無法“整合”。這些基本原則包括：平衡性、一致性和視覺層次、負(fù)空間、接近性、對比、統(tǒng)一、一致性、配色方案和排版層次等方面。（彩云注：很多人看到這些以為自己都懂，但實(shí)際設(shè)計(jì)時(shí)犯錯最多的也是這些問題）

從神經(jīng)科學(xué)的角度來說，當(dāng)一個(gè)設(shè)計(jì)起作用時(shí)，我們會“感受到它”。其影響立竿見影。它發(fā)生在潛意識里，在一瞬間完成，是人的本能反應(yīng)。我們不需要把它放在顯微鏡下分析它。

優(yōu)秀設(shè)計(jì)以簡潔和優(yōu)雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設(shè)計(jì)思想的擁躉。

人們常說，優(yōu)秀設(shè)計(jì)背后的工藝是無形的。然而，這不是隨機(jī)發(fā)生的。不管人們是否注意到，設(shè)計(jì)的背后是遵循著大量而嚴(yán)格的原理去執(zhí)行的。偉大的設(shè)計(jì)師不會在畫板上隨意地將各種元素組合在一起，這是有方法的。

相反地，當(dāng)一項(xiàng)設(shè)計(jì)被認(rèn)為“有些地方不對勁”時(shí)，人們就會下意識地覺得這個(gè)設(shè)計(jì)是有問題的。這樣的結(jié)果會給品牌或產(chǎn)品帶來不好的影響。當(dāng)一個(gè)高端或奢侈品品牌受到高度關(guān)注時(shí)，這種影響尤其有害。這就是為什么你永遠(yuǎn)不會遇到設(shè)計(jì)不完美的香奈兒(Chanel)商店的原因。

“你對一件事的第一印象會建立起你隨后的觀念，如果一家公司在你看來不專業(yè)，你可能會認(rèn)為他們做的其他事情都不專業(yè)?！狣aniel Kahneman，普林斯頓大學(xué)心理學(xué)教授

這不是一個(gè)精心制作的設(shè)計(jì)，會導(dǎo)致認(rèn)知緊張。你會在這個(gè)網(wǎng)站上預(yù)訂你的行程嗎？

我們都同意上面是糟糕的設(shè)計(jì)，就像建在沙子上的房子，一個(gè)忽視基本設(shè)計(jì)原則的設(shè)計(jì)將會崩潰。潛意識里，它會立即被認(rèn)為是破碎的，無論是視覺上、精神上和情感上。

人類的大腦是懶惰的、有偏見的，喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當(dāng)人們看到某種設(shè)計(jì)時(shí)，它的“美學(xué)完整性”、視覺感知和神經(jīng)科學(xué)之間存在著相互關(guān)聯(lián)。

當(dāng)一個(gè)設(shè)計(jì)是合理的，換句話說，它是令人愉快的、有效的，我們會迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂，會沉浸在一種每時(shí)每刻的“心流狀態(tài)” 中?！霸谶@種狀態(tài)下，人們會專注于一項(xiàng)活動，其他一切似乎都不重要”——來自于一個(gè)心理學(xué)概念，由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗(yàn)的心理學(xué)》中寫道。

你更愿意住進(jìn)哪個(gè)房間？

一、設(shè)計(jì)原則在審美完整性中的作用

蘋果的人機(jī)界面指南（Apple’s Human Interface Guidelines）幾十年來一直在談?wù)摗懊缹W(xué)完整性”。它也可以被稱為“設(shè)計(jì)完整性”或“審美凝聚力”。

蘋果對美學(xué)完整性的定義是“當(dāng)一個(gè)設(shè)計(jì)的外觀和行為與其功能完美匹配時(shí)”（彩云注：我的理解就是所見即所得，符合用戶的心理預(yù)期）。換句話說，設(shè)計(jì)的構(gòu)成是產(chǎn)品的一個(gè)組成部分。我們將研究決定設(shè)計(jì)組合成敗的設(shè)計(jì)原則——更多的是關(guān)于 UI，而不是關(guān)于 UX。

美學(xué)完整性不僅僅是關(guān)于設(shè)計(jì)有多好看。它指的是具有明顯連貫性的設(shè)計(jì)：有效的結(jié)構(gòu)和布局，是什么讓它產(chǎn)生效果。換句話說，它的元素在視覺層次、對齊、間距、平衡、對稱、重復(fù)、比例、強(qiáng)調(diào)、接近、對比、統(tǒng)一、一致性、配色、排版、負(fù)空間等方面都有出色的運(yùn)用，這里僅舉幾個(gè)例子。

這與“黃金比例”無關(guān)，黃金分割不能解決問題。斐波那契數(shù)列螺旋沒那么玄乎，給設(shè)計(jì)師帶不來驚人的設(shè)計(jì)。

設(shè)計(jì)師們在安吉麗娜·朱莉或蒙娜麗莎的臉上畫出金色螺旋形時(shí)驚呼道：“果然是黃金比例”。當(dāng)然，自然界中確實(shí)有神圣幾何學(xué)(黃金比例，又稱斐波那契螺旋，是基于此)，但依賴“黃金螺旋”作為設(shè)計(jì)原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。

這是我的洗衣機(jī)，上面疊加了斐波那契螺旋。

“審美的完整性”不是沒道理的。這個(gè)概念是基于基本的設(shè)計(jì)原則，是有成就的設(shè)計(jì)師實(shí)踐他們的藝術(shù)作品的經(jīng)驗(yàn)總結(jié)。

讓我們來看看一些設(shè)計(jì)原則，以及它們?yōu)槭裁磿沟媚愕脑O(shè)計(jì)更能更加有效。通常情況下，真正優(yōu)秀的設(shè)計(jì)會結(jié)合這些設(shè)計(jì)原則。

我們將探討以下這些最底層的設(shè)計(jì)原理：

• 視覺層次感
• 間距、對齊和網(wǎng)格
• 平衡
• 對比
• 對稱
• 重復(fù)
• 幾率原則和三分原則
• 引導(dǎo)線
• 比例
• 強(qiáng)調(diào)
• 整體性
• 親密性
• 一致性
• 顏色
• 排版
• 負(fù)空間

二、視覺層次感

視覺感知的基本規(guī)則對任何視覺設(shè)計(jì)都是至關(guān)重要的，因?yàn)樗鼈冎笇?dǎo)著如何盡可能快地傳達(dá)信息。視覺層次是設(shè)計(jì)中信息的結(jié)構(gòu)和優(yōu)先級。它決定了人們接受和處理信息的順序，因?yàn)樗砸环N視覺方式引導(dǎo)他們。

視覺層次感重在打造視覺優(yōu)先級。通過巧妙地使用顏色、形狀、大小、間距、比例和方向，創(chuàng)造性地使用決定層次的視覺元素來傳達(dá)構(gòu)圖的意義、概念和情緒。

核心關(guān)注點(diǎn)是什么，你希望用戶首先注意到或開始閱讀的設(shè)計(jì)中最重要的元素是什么？我們想讓它成為焦點(diǎn)，然后其他部分的設(shè)計(jì)從這里展開。

一個(gè)具有良好視覺層次的網(wǎng)站會引導(dǎo)用戶關(guān)注重要的部分

視覺層次對于每一種視覺設(shè)計(jì)都是至關(guān)重要的，無論是需要引導(dǎo)訪客眼球的首頁還是移動端UI的導(dǎo)航入口。用戶對每個(gè)元素的理解取決于組合中的其他元素及其上下文。建立視覺層次的一些技術(shù)是:位置、大小和比例、顏色和對比、間距和親密性、負(fù)空間、紋理、引導(dǎo)線和高度。在一個(gè)元素周圍使用豐富的負(fù)空間可以使它看起來更有意義。使用引導(dǎo)線可以創(chuàng)造移動，就像一個(gè)人的眼睛在設(shè)計(jì)上移動一樣。排版的層次結(jié)構(gòu)也扮演著重要的角色，通過不同的大小和權(quán)重，我們可以讓更重要的文本元素脫穎而出并建立秩序。

加分技巧

• 使用一個(gè)隱形三角形連接設(shè)計(jì)中的三個(gè)重點(diǎn)區(qū)域（構(gòu)圖）。
• 注意古騰堡圖模式（Gutenberg Diagram）、F 模式（F-Pattern）、Z 模式（Z-Pattern）和層蛋糕模式（Layer Cake Pattern）的視覺掃描，并順應(yīng)趨勢而不是反對趨勢。

沒有視覺層次的網(wǎng)站沒有明顯的興趣點(diǎn)。

三、留白、對齊和網(wǎng)格

設(shè)計(jì)中的對齊和間距通過空間上的連接傳達(dá)出一種秩序和組織感，這兩個(gè)原則都在設(shè)計(jì)背后發(fā)揮重要價(jià)值。設(shè)計(jì)師早期學(xué)到的基本知識之一是在網(wǎng)格上編排設(shè)計(jì)，然后對齊和分隔這些元素。

左對齊、居中對齊、右對齊都沒錯，但你必須對齊，否則當(dāng)元素沒有對齊時(shí)，設(shè)計(jì)就會給人崩潰的感覺。它給人一種不安的感覺。

沒對齊的話，眼睛看著很難受

網(wǎng)格有很多不同的類型:列網(wǎng)格、基線網(wǎng)格、模塊網(wǎng)格、層次網(wǎng)格、像素網(wǎng)格等。不同設(shè)計(jì)使用不同網(wǎng)格，但最基本的是設(shè)計(jì)元素的對齊和間距。

(Illustration courtesy UX Engineer)

網(wǎng)格可以被打破。一個(gè)死板的構(gòu)圖可能會在視覺上無趣，除非一個(gè)元素從網(wǎng)格中脫穎而出。錯位或“打破網(wǎng)格”是賦予元素更多視覺權(quán)重的一個(gè)機(jī)會。當(dāng)在設(shè)計(jì)中設(shè)置視覺層次結(jié)構(gòu)時(shí)，它可以用來強(qiáng)調(diào)某些東西。

有時(shí)打破網(wǎng)格可以創(chuàng)造強(qiáng)調(diào)和移動

五、平衡

設(shè)計(jì)上有兩種平衡:對稱和不對稱。所有的構(gòu)成元素：排版、顏色、圖像、形狀、圖案、留白等，都具有一定的視覺重量。有些元素很重，很吸引眼球，而有些元素很輕，感覺不那么重要。

這些元素的放置方式能夠在對稱設(shè)計(jì)中創(chuàng)造出一種平等的順序感，或者一種稍微偏離平衡能夠創(chuàng)造出一種不對稱的設(shè)計(jì)。無論對稱還是不對稱，我們的大腦都被某種平衡感所吸引，因?yàn)樗鼊?chuàng)造了和諧、秩序和美學(xué)上令人愉悅的結(jié)果。

多重原則:平衡、對齊和對稱在網(wǎng)站上發(fā)揮作用

六、對比

“對比”指的是使設(shè)計(jì)中不同的元素更容易區(qū)別開。強(qiáng)烈的對比可以在設(shè)計(jì)中強(qiáng)調(diào)一個(gè)區(qū)域，而微弱的對比可以弱化它，創(chuàng)造一個(gè)視覺層次。對比在設(shè)計(jì)中也扮演著重要的角色。對比不足會使文字特別難以閱讀，尤其是對視力有障礙的人來說。

在左邊的設(shè)計(jì)中，一些文字和背景之間的對比不夠

Web內(nèi)容可訪問性指南 (WCAG)呼吁“文本的視覺呈現(xiàn)應(yīng)該有至少4.5:1的對比度”，除了大規(guī)模文本，它應(yīng)該有至少3:1的對比度。因此，設(shè)計(jì)師需要確保內(nèi)容保持舒適易讀。

其他UI元素(如各種顯示器和設(shè)備上的卡片、按鈕、文字和圖標(biāo))之間的適當(dāng)對比也是必須的。如果UI元素之間沒有明顯的區(qū)分度，設(shè)計(jì)就容易產(chǎn)生混亂。

七、對稱

在格式塔原理中，對稱和秩序的法則也被稱為pr?gnanz，德語單詞“好身材”的意思。這個(gè)原理說的是，大腦會以盡可能簡單的方式感知模糊的形狀，這都是為了節(jié)省大腦能量。

我們傾向于尋找一切事物的對稱性。幾項(xiàng)研究發(fā)現(xiàn)，面部對稱能提高人們對人臉吸引力的評價(jià)(盡管完全對稱的臉其實(shí)并不一定那么有吸引力)。該理論認(rèn)為，這種偏好與選擇DNA最好的伴侶的進(jìn)化優(yōu)勢有關(guān)。

對稱在自然界中也無處不在。看看一只蝴蝶，一朵花，或者一只海星。

同樣的原理也適用于數(shù)字領(lǐng)域，平衡對稱的設(shè)計(jì)更令人愉悅。

對稱性在應(yīng)用中發(fā)揮作用。Uber Eats、Booking.com和Behance

八、重復(fù)

重復(fù)是一致性的近親，是優(yōu)秀可用性的標(biāo)志。

在設(shè)計(jì)中利用重復(fù)是件好事，因?yàn)槲覀兊拇竽X總是在尋找模式、相似性和一致性。為什么?因?yàn)橹貜?fù)相同性質(zhì)的元素需要更少的認(rèn)知努力。

我們更容易識別重復(fù)的模式，而不是每次看到新模式都要重新校準(zhǔn)大腦。正如前面提到的，大腦作為一種生存機(jī)制是懶惰的，模式識別和認(rèn)知捷徑意味著有意識地處理視覺信息所需的能量更少。

例如，重復(fù)元素的形狀和大小、填充、留白、類型和顏色，也有助于更對稱、更好地平衡，做出美觀的設(shè)計(jì)。

The Athletic這個(gè)軟件就是用重復(fù)元素做設(shè)計(jì)的好例子。

好了，為了照顧大家的閱讀體驗(yàn)，再寫更多估計(jì)有很多人要開始沒耐心了。所以剩下的設(shè)計(jì)原則，我們下回再接著聊，敬請關(guān)注哈。

原文作者：Miklos Philips

原文地址：https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d

譯者：彩云Sky，騰訊高級視覺設(shè)計(jì)師；公眾號：彩云譯設(shè)計(jì)

本文由@彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。