彩雲譯設計 - 超全面的設計底層理論，優秀設計背後離不開這些－鑽石舞台

關注▲彩雲譯設計▲和10萬設計精英，一起共同進步

這是彩雲的第241篇分享

Hi，我是彩雲。設計趨勢年年在變，設計技能也在不斷更新，但回到本源，底層的理論知識是不會變的。我自己幾乎每年還會翻看一些講設計基礎的書，比如《寫給大家看的設計書》之類的，會發現這些原理每次看都會有新的收穫。隨着工作年數增加，對底層知識的價值認識也越來越深刻，不知道你會不會有這種感覺？

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

當沒有認知緊張時，用戶心流才會發生。當一個設計有效時，你才能體驗到認知上的輕鬆。如果沒有，你的「心流狀態」就會中斷(稍後會詳細討論)，讓我們陷入認知緊張，於是「設計失敗了」。

當基本設計原則被忽略時，這種情況很容易發生，導致設計無法「整合」。這些基本原則包括：平衡性、一致性和視覺層次、負空間、接近性、對比、統一、一致性、配色方案和排版層次等方面。（彩雲註：很多人看到這些以為自己都懂，但實際設計時犯錯最多的也是這些問題）

從神經科學的角度來說，當一個設計起作用時，我們會「感受到它」。其影響立竿見影。它發生在潛意識裡，在一瞬間完成，是人的本能反應。我們不需要把它放在顯微鏡下分析它。

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

人們常說，優秀設計背後的工藝是無形的。然而，這不是隨機發生的。不管人們是否注意到，設計的背後是遵循着大量而嚴格的原理去執行的。偉大的設計師不會在畫板上隨意地將各種元素組合在一起，這是有方法的。

為什麼有些設計具有美的感受，而有些卻沒有

相反地，當一項設計被認為「有些地方不對勁」時，人們就會下意識地覺得這個設計是有問題的。這樣的結果會給品牌或產品帶來不好的影響。當一個高端或奢侈品品牌受到高度關注時，這種影響尤其有害。這就是為什麼你永遠不會遇到設計不完美的香奈兒(Chanel)商店的原因。

「你對一件事的第一印象會建立起你隨後的觀念，如果一家公司在你看來不專業，你可能會認為他們做的其他事情都不專業。——Daniel Kahneman，普林斯頓大學心理學教授

這不是一個精心製作的設計，會導致認知緊張。你會在這個網站上預訂你的行程嗎?

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

人類的大腦是懶惰的、有偏見的，喜歡走捷徑。Daniel Kahneman稱之為「低維思維」。當人們看到某種設計時，它的「美學完整性」、視覺感知和神經科學之間存在着相互關聯。

當一個設計是合理的，換句話說，它是令人愉快的、有效的，我們會迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂，會沉浸在一種每時每刻的「心流狀態」中。「在這種狀態下，人們會專注於一項活動，其他一切似乎都不重要」——來自於一個心理學概念，由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗的心理學》中寫道。

你更願意住進哪個房間？

設計原則在審美完整性中的作用

蘋果的人機界面指南（Apple’s Human Interface Guidelines）幾十年來一直在談論「美學完整性」。它也可以被稱為「設計完整性」或「審美凝聚力」。

蘋果對美學完整性的定義是「當一個設計的外觀和行為與其功能完美匹配時」（彩雲註：我的理解就是所見即所得，符合用戶的心理預期）。換句話說，設計的構成是產品的一個組成部分。我們將研究決定設計組合成敗的設計原則——更多的是關於 UI，而不是關於 UX。

美學完整性不僅僅是關於設計有多好看。它指的是具有明顯連貫性的設計：有效的結構和布局，是什麼讓它產生效果。換句話說，它的元素在視覺層次、對齊、間距、平衡、對稱、重複、比例、強調、接近、對比、統一、一致性、配色、排版、負空間等方面都有出色的運用，這裡僅舉幾個例子。

這與「黃金比例」無關，黃金分割不能解決問題。斐波那契數列螺旋沒那麼玄乎，給設計師帶不來驚人的設計。

設計師們在安吉麗娜·朱莉或蒙娜麗莎的臉上畫出金色螺旋形時驚呼道：」果然是」黃金比例「（彩雲註：但事實上有點故弄玄虛了）。當然，自然界中確實有神聖幾何學(黃金比例，又稱斐波那契螺旋，是基於此)，但依賴「黃金螺旋」作為設計原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。

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

「審美的完整性」不是沒道理的。這個概念是基於基本的設計原則，是有成就的設計師實踐他們的藝術作品的經驗總結。

讓我們來看看一些設計原則，以及它們為什麼會使得你的設計更能更加有效。通常情況下，真正優秀的設計會結合這些設計原則。

我們將探討以下這些最底層的設計原理：

視覺層次感

間距、對齊和網格

平衡

對比

對稱

重複

幾率原則和三分原則

引導線

比例

強調

整體性

親密性

一致性

顏色

排版

負空間

視覺層次感

視覺感知的基本規則對任何視覺設計都是至關重要的，因為它們指導着如何儘可能快地傳達信息。視覺層次是設計中信息的結構和優先級。它決定了人們接受和處理信息的順序，因為它以一種視覺方式引導他們。

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

核心關注點是什麼，你希望用戶首先注意到或開始閱讀的設計中最重要的元素是什麼？我們想讓它成為焦點，然後其他部分的設計從這裡展開。

一個具有良好視覺層次的網站會引導用戶關注重要的部分

視覺層次對於每一種視覺設計都是至關重要的，無論是需要引導訪客眼球的首頁還是移動端UI的導航入口。用戶對每個元素的理解取決於組合中的其他元素及其上下文。

建立視覺層次的一些技術是:位置、大小和比例、顏色和對比、間距和親密性、負空間、紋理、引導線和高度。在一個元素周圍使用豐富的負空間可以使它看起來更有意義。使用引導線可以創造移動，就像一個人的眼睛在設計上移動一樣。排版的層次結構也扮演着重要的角色，通過不同的大小和權重，我們可以讓更重要的文本元素脫穎而出並建立秩序。

加分技巧

使用一個隱形三角形連接設計中的三個重點區域（構圖）。

注意古騰堡圖模式（Gutenberg Diagram）、F 模式（F-Pattern）、Z 模式（Z-Pattern）和層蛋糕模式（Layer Cake Pattern）的視覺掃描，並順應趨勢而不是反對趨勢。（彩雲註：這裡的這些模式彩雲就不過多介紹了，感興趣的可以自行了解下）

沒有視覺層次的網站沒有明顯的興趣點。

留白、對齊和網格

設計中的對齊和間距通過空間上的連接傳達出一種秩序和組織感，這兩個原則都在設計背後發揮重要價值。設計師早期學到的基本知識之一是在網格上編排設計，然後對齊和分隔這些元素。

左對齊、居中對齊、右對齊都沒錯，但你必須對齊，否則當元素沒有對齊時，設計就會給人崩潰的感覺。它給人一種不安的感覺。

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

網格有很多不同的類型:列網格、基線網格、模塊網格、層次網格、像素網格等。不同設計使用不同網格，但最基本的是設計元素的對齊和間距。（彩雲註：關於網格方面的知識，彩雲以前也寫過不少，感興趣的也可以在公眾號的歷史發文中翻翻看）比如：

《想要用好網格系統，這8個小技巧你必須知道》

《網格系統真是太好用了，後悔沒有早點學會！》

《4px網格設計方法，讓設計還原更精準》

(Illustration courtesy UX Engineer)

網格可以被打破。一個死板的構圖可能會在視覺上無趣，除非一個元素從網格中脫穎而出。錯位或「打破網格」是賦予元素更多視覺權重的一個機會。當在設計中設置視覺層次結構時，它可以用來強調某些東西。

有時打破網格可以創造強調和移動

平衡

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

這些元素的放置方式能夠在對稱設計中創造出一種平等的順序感，或者一種稍微偏離平衡能夠創造出一種不對稱的設計。無論對稱還是不對稱，我們的大腦都被某種平衡感所吸引，因為它創造了和諧、秩序和美學上令人愉悅的結果。

多重原則:平衡、對齊和對稱在網站上發揮作用

對比

「對比」指的是使設計中不同的元素更容易區別開。強烈的對比可以在設計中強調一個區域，而微弱的對比可以弱化它，創造一個視覺層次。對比在設計中也扮演着重要的角色。對比不足會使文字特別難以閱讀，尤其是對視力有障礙的人來說。

在左邊的設計中，一些文字和背景之間的對比不夠。

Web內容可訪問性指南 (WCAG)呼籲「文本的視覺呈現應該有至少4.5:1的對比度」，除了大規模文本，它應該有至少3:1的對比度。因此，設計師需要確保內容保持舒適易讀。（彩雲註：具體可用性配色工具，彩雲之前的文章中有分享過，現在這種可用性顏色已經越來越被重視了，你也要用起來啊）,之前寫的文章，推薦大家可以看看：

《以前我經常為配色發愁，自從知道這3個配色神器後，配色變得容易多了！》

其他UI元素(如各種顯示器和設備上的卡片、按鈕、文字和圖標)之間的適當對比也是必須的。如果UI元素之間沒有明顯的區分度，設計就容易產生混亂。

對稱

在格式塔原理中，對稱和秩序的法則也被稱為prägnanz，德語單詞「好身材」的意思。這個原理說的是，大腦會以儘可能簡單的方式感知模糊的形狀，這都是為了節省大腦能量。

我們傾向於尋找一切事物的對稱性。幾項研究發現，面部對稱能提高人們對人臉吸引力的評價(儘管完全對稱的臉其實並不一定那麼有吸引力)。該理論認為，這種偏好與選擇DNA最好的伴侶的進化優勢有關。

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