超全面的設計底層理論,優秀設計背后離不開這些
編輯導語:人們常說,優秀設計背后的工藝是無形的,然而,這不是隨機發生的,不管人們是否注意到,設計的背后是遵循著大量而嚴格的原理去執行的。本篇文章將探討那些最底層的設計原理,并分析它們為什么會使得設計更加有效,感興趣的朋友快來看看吧!
Hi,我是彩云。設計趨勢年年在變,設計技能也在不斷更新,但回到本源,底層的理論知識是不會變的。我自己幾乎每年還會翻看一些講設計基礎的書,比如《寫給大家看的設計書》之類的,會發現這些原理每次看都會有新的收獲。隨著工作年數增加,對底層知識的價值認識也越來越深刻,不知道你會不會有這種感覺?
在Medium上看到一位工作超過17年的國外設計leader寫的一篇關于設計原理的文章,講設計如何變得有效?總結得很好。文章很長,為了提高你的閱讀體驗,我打算分2期來更新,如若你能耐心看完,相信定會有收獲!
當沒有認知緊張時,用戶心流才會發生。當一個設計有效時,你才能體驗到認知上的輕松。如果沒有,你的“心流狀態”就會中斷(稍后會詳細討論),讓我們陷入認知緊張,于是“設計失敗了”。
當基本設計原則被忽略時,這種情況很容易發生,導致設計無法“整合”。這些基本原則包括:平衡性、一致性和視覺層次、負空間、接近性、對比、統一、一致性、配色方案和排版層次等方面。(彩云注:很多人看到這些以為自己都懂,但實際設計時犯錯最多的也是這些問題)
從神經科學的角度來說,當一個設計起作用時,我們會“感受到它”。其影響立竿見影。它發生在潛意識里,在一瞬間完成,是人的本能反應。我們不需要把它放在顯微鏡下分析它。
優秀設計以簡潔和優雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設計思想的擁躉。
人們常說,優秀設計背后的工藝是無形的。然而,這不是隨機發生的。不管人們是否注意到,設計的背后是遵循著大量而嚴格的原理去執行的。偉大的設計師不會在畫板上隨意地將各種元素組合在一起,這是有方法的。
相反地,當一項設計被認為“有些地方不對勁”時,人們就會下意識地覺得這個設計是有問題的。這樣的結果會給品牌或產品帶來不好的影響。當一個高端或奢侈品品牌受到高度關注時,這種影響尤其有害。這就是為什么你永遠不會遇到設計不完美的香奈兒(Chanel)商店的原因。
“你對一件事的第一印象會建立起你隨后的觀念,如果一家公司在你看來不專業,你可能會認為他們做的其他事情都不專業?!狣aniel Kahneman,普林斯頓大學心理學教授
這不是一個精心制作的設計,會導致認知緊張。你會在這個網站上預訂你的行程嗎?
我們都同意上面是糟糕的設計,就像建在沙子上的房子,一個忽視基本設計原則的設計將會崩潰。潛意識里,它會立即被認為是破碎的,無論是視覺上、精神上和情感上。
人類的大腦是懶惰的、有偏見的,喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當人們看到某種設計時,它的“美學完整性”、視覺感知和神經科學之間存在著相互關聯。
當一個設計是合理的,換句話說,它是令人愉快的、有效的,我們會迅速、直觀的判斷它是合理的。我們的心率降低,多巴胺水平增加,會有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂,會沉浸在一種每時每刻的“心流狀態” 中?!霸谶@種狀態下,人們會專注于一項活動,其他一切似乎都不重要”——來自于一個心理學概念,由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗的心理學》中寫道。
你更愿意住進哪個房間?
一、設計原則在審美完整性中的作用
蘋果的人機界面指南(Apple’s Human Interface Guidelines)幾十年來一直在談論“美學完整性”。它也可以被稱為“設計完整性”或“審美凝聚力”。
蘋果對美學完整性的定義是“當一個設計的外觀和行為與其功能完美匹配時”(彩云注:我的理解就是所見即所得,符合用戶的心理預期)。換句話說,設計的構成是產品的一個組成部分。我們將研究決定設計組合成敗的設計原則——更多的是關于 UI,而不是關于 UX。
美學完整性不僅僅是關于設計有多好看。它指的是具有明顯連貫性的設計:有效的結構和布局,是什么讓它產生效果。換句話說,它的元素在視覺層次、對齊、間距、平衡、對稱、重復、比例、強調、接近、對比、統一、一致性、配色、排版、負空間等方面都有出色的運用,這里僅舉幾個例子。
這與“黃金比例”無關,黃金分割不能解決問題。斐波那契數列螺旋沒那么玄乎,給設計師帶不來驚人的設計。
設計師們在安吉麗娜·朱莉或蒙娜麗莎的臉上畫出金色螺旋形時驚呼道:“果然是黃金比例”。當然,自然界中確實有神圣幾何學(黃金比例,又稱斐波那契螺旋,是基于此),但依賴“黃金螺旋”作為設計原則是一種謬論,它已被多次暴露在其赤裸裸的荒謬中。
這是我的洗衣機,上面疊加了斐波那契螺旋。
“審美的完整性”不是沒道理的。這個概念是基于基本的設計原則,是有成就的設計師實踐他們的藝術作品的經驗總結。
讓我們來看看一些設計原則,以及它們為什么會使得你的設計更能更加有效。通常情況下,真正優秀的設計會結合這些設計原則。
我們將探討以下這些最底層的設計原理:
- 視覺層次感
- 間距、對齊和網格
- 平衡
- 對比
- 對稱
- 重復
- 幾率原則和三分原則
- 引導線
- 比例
- 強調
- 整體性
- 親密性
- 一致性
- 顏色
- 排版
- 負空間
二、視覺層次感
視覺感知的基本規則對任何視覺設計都是至關重要的,因為它們指導著如何盡可能快地傳達信息。視覺層次是設計中信息的結構和優先級。它決定了人們接受和處理信息的順序,因為它以一種視覺方式引導他們。
視覺層次感重在打造視覺優先級。通過巧妙地使用顏色、形狀、大小、間距、比例和方向,創造性地使用決定層次的視覺元素來傳達構圖的意義、概念和情緒。
核心關注點是什么,你希望用戶首先注意到或開始閱讀的設計中最重要的元素是什么?我們想讓它成為焦點,然后其他部分的設計從這里展開。
一個具有良好視覺層次的網站會引導用戶關注重要的部分
視覺層次對于每一種視覺設計都是至關重要的,無論是需要引導訪客眼球的首頁還是移動端UI的導航入口。用戶對每個元素的理解取決于組合中的其他元素及其上下文。建立視覺層次的一些技術是:位置、大小和比例、顏色和對比、間距和親密性、負空間、紋理、引導線和高度。在一個元素周圍使用豐富的負空間可以使它看起來更有意義。使用引導線可以創造移動,就像一個人的眼睛在設計上移動一樣。排版的層次結構也扮演著重要的角色,通過不同的大小和權重,我們可以讓更重要的文本元素脫穎而出并建立秩序。
加分技巧
- 使用一個隱形三角形連接設計中的三個重點區域(構圖)。
- 注意古騰堡圖模式(Gutenberg Diagram)、F 模式(F-Pattern)、Z 模式(Z-Pattern)和層蛋糕模式(Layer Cake Pattern)的視覺掃描,并順應趨勢而不是反對趨勢。
沒有視覺層次的網站沒有明顯的興趣點。
三、留白、對齊和網格
設計中的對齊和間距通過空間上的連接傳達出一種秩序和組織感,這兩個原則都在設計背后發揮重要價值。設計師早期學到的基本知識之一是在網格上編排設計,然后對齊和分隔這些元素。
左對齊、居中對齊、右對齊都沒錯,但你必須對齊,否則當元素沒有對齊時,設計就會給人崩潰的感覺。它給人一種不安的感覺。
沒對齊的話,眼睛看著很難受
網格有很多不同的類型:列網格、基線網格、模塊網格、層次網格、像素網格等。不同設計使用不同網格,但最基本的是設計元素的對齊和間距。
(Illustration courtesy UX Engineer)
網格可以被打破。一個死板的構圖可能會在視覺上無趣,除非一個元素從網格中脫穎而出。錯位或“打破網格”是賦予元素更多視覺權重的一個機會。當在設計中設置視覺層次結構時,它可以用來強調某些東西。
有時打破網格可以創造強調和移動
五、平衡
設計上有兩種平衡:對稱和不對稱。所有的構成元素:排版、顏色、圖像、形狀、圖案、留白等,都具有一定的視覺重量。有些元素很重,很吸引眼球,而有些元素很輕,感覺不那么重要。
這些元素的放置方式能夠在對稱設計中創造出一種平等的順序感,或者一種稍微偏離平衡能夠創造出一種不對稱的設計。無論對稱還是不對稱,我們的大腦都被某種平衡感所吸引,因為它創造了和諧、秩序和美學上令人愉悅的結果。
多重原則:平衡、對齊和對稱在網站上發揮作用
六、對比
“對比”指的是使設計中不同的元素更容易區別開。強烈的對比可以在設計中強調一個區域,而微弱的對比可以弱化它,創造一個視覺層次。對比在設計中也扮演著重要的角色。對比不足會使文字特別難以閱讀,尤其是對視力有障礙的人來說。
在左邊的設計中,一些文字和背景之間的對比不夠
Web內容可訪問性指南 (WCAG)呼吁“文本的視覺呈現應該有至少4.5:1的對比度”,除了大規模文本,它應該有至少3:1的對比度。因此,設計師需要確保內容保持舒適易讀。
其他UI元素(如各種顯示器和設備上的卡片、按鈕、文字和圖標)之間的適當對比也是必須的。如果UI元素之間沒有明顯的區分度,設計就容易產生混亂。
七、對稱
在格式塔原理中,對稱和秩序的法則也被稱為pr?gnanz,德語單詞“好身材”的意思。這個原理說的是,大腦會以盡可能簡單的方式感知模糊的形狀,這都是為了節省大腦能量。
我們傾向于尋找一切事物的對稱性。幾項研究發現,面部對稱能提高人們對人臉吸引力的評價(盡管完全對稱的臉其實并不一定那么有吸引力)。該理論認為,這種偏好與選擇DNA最好的伴侶的進化優勢有關。
對稱在自然界中也無處不在。看看一只蝴蝶,一朵花,或者一只海星。
同樣的原理也適用于數字領域,平衡對稱的設計更令人愉悅。
對稱性在應用中發揮作用。Uber Eats、Booking.com和Behance
八、重復
重復是一致性的近親,是優秀可用性的標志。
在設計中利用重復是件好事,因為我們的大腦總是在尋找模式、相似性和一致性。為什么?因為重復相同性質的元素需要更少的認知努力。
我們更容易識別重復的模式,而不是每次看到新模式都要重新校準大腦。正如前面提到的,大腦作為一種生存機制是懶惰的,模式識別和認知捷徑意味著有意識地處理視覺信息所需的能量更少。
例如,重復元素的形狀和大小、填充、留白、類型和顏色,也有助于更對稱、更好地平衡,做出美觀的設計。
The Athletic這個軟件就是用重復元素做設計的好例子。
好了,為了照顧大家的閱讀體驗,再寫更多估計有很多人要開始沒耐心了。所以剩下的設計原則,我們下回再接著聊,敬請關注哈。
原文作者:Miklos Philips
原文地址:https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d
譯者:彩云Sky,騰訊高級視覺設計師;公眾號:彩云譯設計
本文由@彩云Sky 翻譯發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議。
看來我也得再復習一下《寫給大家的設計書》這本書了
贊贊贊??
設計原則在審美完整性中的作用很大,整體大于局部。
很全面的設計原則,又了解了很多沒注意到的東西。
對比,重復,對稱,平衡,對齊,設計的底層邏輯
對稱設計,真的簡約和大氣
強烈的對比可以在設計中強調一個區域,而微弱的對比可以弱化它,創造一個視覺層次。
我們更容易識別重復的模式,而不是每次看到新模式都要重新校準大腦。正如前面提到的,大腦作為一種生存機制是懶惰的,模式識別和認知捷徑意味著有意識地處理視覺信息所需的能量更少。