超全面的設計底層理論,優秀設計背后離不開這些

8 評論 7147 瀏覽 55 收藏 18 分鐘

編輯導語:人們常說,優秀設計背后的工藝是無形的,然而,這不是隨機發生的,不管人們是否注意到,設計的背后是遵循著大量而嚴格的原理去執行的。本篇文章將探討那些最底層的設計原理,并分析它們為什么會使得設計更加有效,感興趣的朋友快來看看吧!

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 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 看來我也得再復習一下《寫給大家的設計書》這本書了

    回復
  2. 贊贊贊??

    來自上海 回復
  3. 設計原則在審美完整性中的作用很大,整體大于局部。

    來自云南 回復
  4. 很全面的設計原則,又了解了很多沒注意到的東西。

    來自云南 回復
  5. 對比,重復,對稱,平衡,對齊,設計的底層邏輯

    回復
  6. 對稱設計,真的簡約和大氣

    回復
  7. 強烈的對比可以在設計中強調一個區域,而微弱的對比可以弱化它,創造一個視覺層次。

    來自廣西 回復
  8. 我們更容易識別重復的模式,而不是每次看到新模式都要重新校準大腦。正如前面提到的,大腦作為一種生存機制是懶惰的,模式識別和認知捷徑意味著有意識地處理視覺信息所需的能量更少。

    來自吉林 回復