超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些

2023-11-13    ui設(shè)計分享達(dá)人

設(shè)計趨勢年年在變,設(shè)計技能也在不斷更新,但回到本源,底層的理論知識是不會變的。我自己幾乎每年還會翻看一些講設(shè)計基礎(chǔ)的書,比如《寫給大家看的設(shè)計書》之類的,會發(fā)現(xiàn)這些原理每次看都會有新的收獲。
隨著工作年數(shù)增加,對底層知識的價值認(rèn)識也越來越深刻,不知道你會不會有這種感覺?
 
在Medium上看到一位工作超過17年的國外設(shè)計leader寫的一篇關(guān)于設(shè)計原理的文章,講設(shè)計如何變得有效?總結(jié)得很好。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
 
當(dāng)沒有認(rèn)知緊張時,用戶心流才會發(fā)生。
當(dāng)一個設(shè)計有效時,你才能體驗到認(rèn)知上的輕松。如果沒有,你的“心流狀態(tài)”就會中斷(稍后會詳細(xì)討論),讓我們陷入認(rèn)知緊張,于是“設(shè)計失敗了”。
 
當(dāng)基本設(shè)計原則被忽略時,這種情況很容易發(fā)生,導(dǎo)致設(shè)計無法“整合”。這些基本原則包括:平衡性、一致性和視覺層次、負(fù)空間、接近性、對比、統(tǒng)一、一致性、配色方案和排版層次等方面。
(彩云注:很多人看到這些以為自己都懂,但實際設(shè)計時犯錯最多的也是這些問題)
 
從神經(jīng)科學(xué)的角度來說,當(dāng)一個設(shè)計起作用時,我們會“感受到它”。其影響立竿見影。它發(fā)生在潛意識里,在一瞬間完成,是人的本能反應(yīng)。我們不需要把它放在顯微鏡下分析它。
 
優(yōu)秀設(shè)計以簡潔和優(yōu)雅而引人注目。
喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設(shè)計思想的擁躉。
 
人們常說,優(yōu)秀設(shè)計背后的工藝是無形的。然而,這不是隨機(jī)發(fā)生的。不管人們是否注意到,
設(shè)計的背后是遵循著大量而嚴(yán)格的原理去執(zhí)行的。
偉大的設(shè)計師不會在畫板上隨意地將各種元素組合在一起,這是有方法的。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
為什么有些設(shè)計具有美的感受,而有些卻沒有
 
相反地,當(dāng)一項設(shè)計被認(rèn)為“有些地方不對勁”時,人們就會下意識地覺得這個設(shè)計是有問題的。這樣的結(jié)果會給品牌或產(chǎn)品帶來不好的影響。當(dāng)一個高端或奢侈品品牌受到高度關(guān)注時,這種影響尤其有害。這就是為什么你永遠(yuǎn)不會遇到設(shè)計不完美的香奈兒(Chanel)商店的原因。
 
“你對一件事的第一印象會建立起你隨后的觀念,如果一家公司在你看來不專業(yè),你可能會認(rèn)為他們做的其他事情都不專業(yè)。——Daniel Kahneman,普林斯頓大學(xué)心理學(xué)教授。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
這不是一個精心制作的設(shè)計,會導(dǎo)致認(rèn)知緊張。你會在這個網(wǎng)站上預(yù)訂你的行程嗎?
 
 
我們都同意上面是糟糕的設(shè)計,就像建在沙子上的房子,一個忽視基本設(shè)計原則的設(shè)計將會崩潰。潛意識里,它會立即被認(rèn)為是破碎的,無論是視覺上、精神上和情感上。
 
人類的大腦是懶惰的、有偏見的,喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當(dāng)人們看到某種設(shè)計時,它的“美學(xué)完整性”、視覺感知和神經(jīng)科學(xué)之間存在著相互關(guān)聯(lián)。
 
當(dāng)一個設(shè)計是合理的,換句話說,它是令人愉快的、有效的,我們會迅速、直觀的判斷它是合理的。
我們的心率降低,多巴胺水平增加,會有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂,會沉浸在一種每時每刻的“心流狀態(tài)” 中。“在這種狀態(tài)下,人們會專注于一項活動,其他一切似乎都不重要”——來自于一個心理學(xué)概念,由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗的心理學(xué)》中寫道。
 
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
你更愿意住進(jìn)哪個房間?
 
設(shè)計原則在審美完整性中的作用
 
蘋果的人機(jī)界面指南(Apple’s Human Interface Guidelines)幾十年來一直在談?wù)?ldquo;美學(xué)完整性”。它也可以被稱為“設(shè)計完整性”或“審美凝聚力”。
 
蘋果對美學(xué)完整性的定義是“當(dāng)一個設(shè)計的外觀和行為與其功能完美匹配時”(彩云注:我的理解就是所見即所得,符合用戶的心理預(yù)期)。
換句話說,設(shè)計的構(gòu)成是產(chǎn)品的一個組成部分。我們將研究決定設(shè)計組合成敗的設(shè)計原則——更多的是關(guān)于 UI,而不是關(guān)于 UX。
 
美學(xué)完整性不僅僅是關(guān)于設(shè)計有多好看。
它指的是具有明顯連貫性的設(shè)計:有效的結(jié)構(gòu)和布局,是什么讓它產(chǎn)生效果。換句話說,它的元素在視覺層次、對齊、間距、平衡、對稱、重復(fù)、比例、強調(diào)、接近、對比、統(tǒng)一、一致性、配色、排版、負(fù)空間等方面都有出色的運用,這里僅舉幾個例子。
 
這與“黃金比例”無關(guān),黃金分割不能解決問題。
斐波那契數(shù)列螺旋沒那么玄乎,給設(shè)計師帶不來驚人的設(shè)計。
 
設(shè)計師們在安吉麗娜·朱莉或蒙娜麗莎的臉上畫出金色螺旋形時驚呼道:”果然是”黃金比例“(彩云注:但事實上有點故弄玄虛了)。當(dāng)然,自然界中確實有神圣幾何學(xué)(黃金比例,又稱斐波那契螺旋,是基于此),但
依賴“黃金螺旋”作為設(shè)計原則是一種謬論,
它已被多次暴露在其赤裸裸的荒謬中。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
這是我的洗衣機(jī),上面疊加了斐波那契螺旋。
 
“審美的完整性”不是沒道理的。這個概念是基于基本的設(shè)計原則,是有成就的設(shè)計師實踐他們的藝術(shù)作品的經(jīng)驗總結(jié)。
 
讓我們來看看一些設(shè)計原則,以及它們?yōu)槭裁磿沟媚愕脑O(shè)計更能更加有效。通常情況下,真正優(yōu)秀的設(shè)計會結(jié)合這些設(shè)計原則。
 
我們將探討以下這些最底層的設(shè)計原理:
 
  1. 視覺層次感
  2. 間距、對齊和網(wǎng)格
  3. 平衡
  4. 對比
  5. 對稱
  6. 重復(fù)
  7. 幾率原則和三分原則
  8. 引導(dǎo)線
  9. 比例
  10. 強調(diào)
  11. 整體性
  12. 親密性
  13. 一致性
  14. 顏色
  15. 排版
  16. 負(fù)空間
 
 
視覺層次感
 
 
視覺感知的基本規(guī)則對任何視覺設(shè)計都是至關(guān)重要的,因為它們指導(dǎo)著如何盡可能快地傳達(dá)信息。
視覺層次是設(shè)計中信息的結(jié)構(gòu)和優(yōu)先級。
它決定了人們接受和處理信息的順序,因為它以一種視覺方式引導(dǎo)他們。
 
 
視覺層次感重在打造視覺優(yōu)先級。
通過巧妙地使用顏色、形狀、大小、間距、比例和方向,創(chuàng)造性地使用決定層次的視覺元素來傳達(dá)構(gòu)圖的意義、概念和情緒。
 
 
核心關(guān)注點是什么,你希望用戶首先注意到或開始閱讀的設(shè)計中最重要的元素是什么?我們想讓它成為焦點,然后其他部分的設(shè)計從這里展開。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
一個具有良好視覺層次的網(wǎng)站會引導(dǎo)用戶關(guān)注重要的部分
 
視覺層次對于每一種視覺設(shè)計都是至關(guān)重要的,無論是需要引導(dǎo)訪客眼球的首頁還是移動端UI的導(dǎo)航入口。用戶對每個元素的理解取決于組合中的其他元素及其上下文。
 
建立視覺層次的一些技術(shù)是:位置、大小和比例、顏色和對比、間距和親密性、負(fù)空間、紋理、引導(dǎo)線和高度。在一個元素周圍使用豐富的負(fù)空間可以使它看起來更有意義。使用引導(dǎo)線可以創(chuàng)造移動,就像一個人的眼睛在設(shè)計上移動一樣。排版的層次結(jié)構(gòu)也扮演著重要的角色,通過不同的大小和權(quán)重,我們可以讓更重要的文本元素脫穎而出并建立秩序。
加分技巧
  • 使用一個隱形三角形連接設(shè)計中的三個重點區(qū)域(構(gòu)圖)。
  • 注意古騰堡圖模式(Gutenberg Diagram)、F 模式(F-Pattern)、Z 模式(Z-Pattern)和層蛋糕模式(Layer Cake Pattern)的視覺掃描,并順應(yīng)趨勢而不是反對趨勢。(彩云注:這里的這些模式彩云就不過多介紹了,感興趣的可以自行了解下)
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
沒有視覺層次的網(wǎng)站沒有明顯的興趣點。
 
留白、對齊和網(wǎng)格
 
設(shè)計中的對齊和間距通過空間上的連接傳達(dá)出一種秩序和組織感,這兩個原則都在設(shè)計背后發(fā)揮重要價值。設(shè)計師早期學(xué)到的基本知識之一是在網(wǎng)格上編排設(shè)計,然后對齊和分隔這些元素。
 
左對齊、居中對齊、右對齊都沒錯,但你必須對齊,否則當(dāng)元素沒有對齊時,設(shè)計就會給人崩潰的感覺。它給人一種不安的感覺。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
沒對齊的話,眼睛看著很難受
 
 
網(wǎng)格有很多不同的類型:列網(wǎng)格、基線網(wǎng)格、模塊網(wǎng)格、層次網(wǎng)格、像素網(wǎng)格等。不同設(shè)計使用不同網(wǎng)格,但最基本的是設(shè)計元素的對齊和間距。(彩云注:關(guān)于網(wǎng)格方面的知識,彩云以前也寫過不少,感興趣的也可以在公眾號的歷史發(fā)文中翻翻看)比如:
 
 
 
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
(Illustration courtesy UX Engineer)
 
網(wǎng)格可以被打破。
一個死板的構(gòu)圖可能會在視覺上無趣,除非一個元素從網(wǎng)格中脫穎而出。錯位或“打破網(wǎng)格”是賦予元素更多視覺權(quán)重的一個機(jī)會。當(dāng)在設(shè)計中設(shè)置視覺層次結(jié)構(gòu)時,它可以用來強調(diào)某些東西。
 
 
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
有時打破網(wǎng)格可以創(chuàng)造強調(diào)和移動
 
 
 
平衡
 
 
設(shè)計上有兩種平衡:對稱和不對稱。
所有的構(gòu)成元素:排版、顏色、圖像、形狀、圖案、留白等,都具有一定的視覺重量。
有些元素很重,很吸引眼球,而有些元素很輕,感覺不那么重要。
這些元素的放置方式能夠在對稱設(shè)計中創(chuàng)造出一種平等的順序感,或者一種稍微偏離平衡能夠創(chuàng)造出一種不對稱的設(shè)計。無論對稱還是不對稱,我們的大腦都被某種平衡感所吸引,因為它創(chuàng)造了和諧、秩序和美學(xué)上令人愉悅的結(jié)果。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
多重原則:平衡、對齊和對稱在網(wǎng)站上發(fā)揮作用
 
 
對比
 
“對比”指的是使設(shè)計中不同的元素更容易區(qū)別開。
強烈的對比可以在設(shè)計中強調(diào)一個區(qū)域,而微弱的對比可以弱化它,創(chuàng)造一個視覺層次。對比在設(shè)計中也扮演著重要的角色。對比不足會使文字特別難以閱讀,尤其是對視力有障礙的人來說。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
在左邊的設(shè)計中,一些文字和背景之間的對比不夠。
 
 
Web內(nèi)容可訪問性指南 (WCAG)呼吁“文本的視覺呈現(xiàn)應(yīng)該有至少4.5:1的對比度”,除了大規(guī)模文本,它應(yīng)該有至少3:1的對比度。因此,設(shè)計師需要確保內(nèi)容保持舒適易讀。(彩云注:具體可用性配色工具,彩云之前的文章中有分享過,現(xiàn)在這種可用性顏色已經(jīng)越來越被重視了,你也要用起來?。?之前寫的文章,推薦大家可以看看:
 
 
 
其他UI元素(如各種顯示器和設(shè)備上的卡片、按鈕、文字和圖標(biāo))之間的適當(dāng)對比也是必須的。如果UI元素之間沒有明顯的區(qū)分度,設(shè)計就容易產(chǎn)生混亂。
 
對稱
 
 
 
在格式塔原理中,對稱和秩序的法則也被稱為prägnanz,德語單詞“好身材”的意思。這個原理說的是,
大腦會以盡可能簡單的方式感知模糊的形狀,這都是為了節(jié)省大腦能量。
 
我們傾向于尋找一切事物的對稱性。幾項研究發(fā)現(xiàn),面部對稱能提高人們對人臉吸引力的評價(盡管完全對稱的臉其實并不一定那么有吸引力)。該理論認(rèn)為,這種偏好與選擇DNA最好的伴侶的進(jìn)化優(yōu)勢。
 
 
對稱在自然界中也無處不在??纯匆恢缓欢浠?,或者一只海星。
 
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
對稱
 
同樣的原理也適用于數(shù)字領(lǐng)域,平衡對稱的設(shè)計更令人愉悅。
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
對稱性在應(yīng)用中發(fā)揮作用。Uber Eats、Booking.com和Behance。
 
 
 
重復(fù)
 
重復(fù)是一致性的近親,是優(yōu)秀可用性的標(biāo)志。在設(shè)計中利用重復(fù)是件好事,因為我們的大腦總是在尋找模式、相似性和一致性。為什么?因為重復(fù)相同性質(zhì)的元素需要更少的認(rèn)知努力。
 
我們更容易識別重復(fù)的模式,而不是每次看到新模式都要重新校準(zhǔn)大腦。正如前面提到的,大腦作為一種生存機(jī)制是懶惰的,模式識別和認(rèn)知捷徑意味著有意識地處理視覺信息所需的能量更少。
 
例如,重復(fù)元素的形狀和大小、填充、留白、類型和顏色,也有助于更對稱、更好地平衡,做出美觀的設(shè)計。
 
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
The Athletic這個軟件就是用重復(fù)元素做設(shè)計的好例子
 
 
 
奇數(shù)原則和三分法構(gòu)圖
 
 
奇數(shù)法則意思是說,在設(shè)計作品中奇數(shù)元素比偶數(shù)元素更有趣。
偶數(shù)元素在圖像中產(chǎn)生了對稱,這可能會顯得過于正式和不自然。比如,在一行中排列三個或五個卡片會比2個或4個效果更好,作品會更加讓用戶感到舒服和自然。
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁設(shè)計
 
三分法構(gòu)圖(也被稱之為黃金網(wǎng)格規(guī)則),在畫面中以水平和豎直方向分成3x3的網(wǎng)格和4個交叉點。這個規(guī)則能很好的協(xié)助設(shè)計師
將最重要的元素放在網(wǎng)格的交叉點上,這樣可以很容易的設(shè)計出滿意的構(gòu)圖。
 
為什么會這樣?因為
三分法構(gòu)圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對稱的美,產(chǎn)生了更有吸引力的構(gòu)圖。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
 
 
 
 
視覺引導(dǎo)線
 
你希望用戶關(guān)注哪些地方?高級設(shè)計師非常擅長引導(dǎo)用戶的視覺焦點,這種引導(dǎo)可以通過可見和不可見的引導(dǎo)線來完成。這些線條在構(gòu)圖中也可以打造一種動感,也能為畫面增添視覺沖擊力。
 
達(dá)到這種效果通常用特定的形狀和線條,或者是它們的組合形成難以察覺的引導(dǎo)線來實現(xiàn)。利用透視、顏色、對比度和正負(fù)空間同樣可以幫助達(dá)到這種想要的效果。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
從左到右的不易察覺的曲線將用戶的視線引導(dǎo)到頁面文字上
 
 
 
大小和比例
 
大?。╯cale)是設(shè)計中一個元素與另一個元素的相對大小。元素通過大小不同創(chuàng)建視覺層次,其中最大的元素首先會吸引用戶的注意力,因此看起來是最重要的。常規(guī)的設(shè)計策略就是將最重要的元素做成最大的,然后逐級遞減。
 
比例(Proportion)不同于大小,類似但有區(qū)別。比例原則是指一個整體設(shè)計中各部分的尺寸關(guān)系。設(shè)計中的元素可以有各種大小,但它們之間的大小差異,整體來看就是比例。
 
熟練地使用大小和比例是實現(xiàn)設(shè)計統(tǒng)一的關(guān)鍵。當(dāng)一些元素的大小過大或過小,或者比例失調(diào)時,設(shè)計組合就會失去統(tǒng)一性。這種錯誤可能發(fā)生在排版和其他元素上。例如,標(biāo)題與子標(biāo)題和正文相比顯得過大。當(dāng)設(shè)計元素失衡時,設(shè)計就會“感覺不平衡”。
 
 
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
大小和比例都沒做好時(左圖),看起來處理的比較細(xì)致了,但依然沒有做到很好,在大小上正文和標(biāo)題分不清(右圖)
 
 
強調(diào)
 
強調(diào)原則用于使設(shè)計的某些元素突出(使用對比、接近、比例、留白等)或不突出,即弱化強調(diào)(例如在頁面底部有一個幾乎看不見的“小字”)。
強調(diào)是層級之母,因為沒有強調(diào)就沒有層級。
 
與其他一些設(shè)計原則一樣,“強調(diào)”是用來引導(dǎo)人們關(guān)注設(shè)計,并強調(diào)需要重點關(guān)注的第一、第二和第三點。首頁面和電商轉(zhuǎn)化頁面在99%的情況下都使用這種原則。
 
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
使用這個原則,在購物網(wǎng)站上強調(diào)了標(biāo)語和產(chǎn)品,轉(zhuǎn)化效果非常好
 
 
統(tǒng)一性
 
 
統(tǒng)一是指設(shè)計元素如何很好地結(jié)合在一起,形成“視覺凝聚力”。
它指的是設(shè)計中的連貫性,讓人們覺得所有部分都是一起的。每個元素都應(yīng)該具有清晰的視覺關(guān)系,以幫助傳達(dá)清晰、簡潔的信息。整體性好的設(shè)計比整體性差的設(shè)計更有條理,質(zhì)量也更高。
 
運用統(tǒng)一的配色,重復(fù)、平衡和對稱之類的原則將有助于在設(shè)計中形成一種和諧感,也就是一致性。設(shè)計中良好的一致性就好比歌曲中一首歌被和諧地唱出來,形成一個完美的整體。
 
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
一致的顏色、重復(fù)的圖案、平衡和對稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺。
 
 
 
接近原則
 
格式塔的接近原則讓設(shè)計師將同類型的相關(guān)元素進(jìn)行分組。
把它們分開得更遠(yuǎn),元素就顯得越不相關(guān),它們之間的關(guān)系就會減弱。一般來說,人們會認(rèn)為遠(yuǎn)離的元素是不相關(guān)的。
 
 
不應(yīng)該讓用戶在設(shè)計中分辨哪些元素是相互關(guān)聯(lián)的,正如美國郵政服務(wù)的例子所顯示的那樣,缺乏對鄰近性的關(guān)注會導(dǎo)致直接的認(rèn)知緊張,損害用戶體驗。
 
 
接近原則沒做好的案例。由于字段標(biāo)簽離它們下面的字段更近,人們可能會搞混。
 
 
 
下面是一個鄰近性原則做的好的案例,我們可以看到相關(guān)元素是如何通過鄰近性關(guān)聯(lián)起來的(分組的元素用紫色表示)
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
一個把接近原則用好的網(wǎng)頁設(shè)計案例
 
 
 
一致性
 
一致性原則使數(shù)字產(chǎn)品的使用更加可預(yù)測,符合用戶的期望。
設(shè)計中的一致性可以培養(yǎng)熟悉度,它可以提高用戶體驗、可用性和用戶使用效率。另一方面,不一致的設(shè)計將產(chǎn)生更多的認(rèn)知負(fù)荷/腦力勞動,并導(dǎo)致困惑和挫折。這就相當(dāng)于在用戶的路徑上設(shè)置障礙。讓用戶的心流嘎然而止!
 
做好一致性可以增強“審美凝聚力”。“我們都知道,當(dāng)我們使用應(yīng)用時,應(yīng)用的導(dǎo)航位置如果經(jīng)常變化,或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色,這是多么令人沮喪。
 
除了視覺一致性和易用性,品牌一致性在產(chǎn)品設(shè)計中也發(fā)揮著重要作用。如果沒有一致的元素呈現(xiàn),如排版、配色和圖案,高質(zhì)量的品牌體驗將無法傳遞。
 
在用戶體驗方面,一致性意味著在設(shè)計中使用相似的UI元素來完成相似的任務(wù),即在整個產(chǎn)品中擁有相似的功能和行為。因為可用性是一種評估用戶界面易用性的質(zhì)量屬性,所以一致性對用戶體驗的可用性有很大的貢獻(xiàn)。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
一致性是通過使用相同的配色、排版、間距、模式和交互來實現(xiàn)的。
 
 
色彩心理學(xué)也不容忽視。
色彩承載著意義和情感,可以向人的潛意識傳遞信息。在品牌方面,人們對顏色做了大量的心理學(xué)研究,因為在人們與品牌進(jìn)行任何互動之前,顏色會讓他們產(chǎn)生一種本能的反應(yīng)。例如,藍(lán)色通常被認(rèn)為是可靠的、安全的和平靜的,想想銀行;而紅色是刺激的,被認(rèn)為是增加人們的心率,想想飲料包裝。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
一個極簡主義的暗色主題設(shè)計傳達(dá)了一個特定的品牌氣質(zhì),并使用了少量的顏色。
 
 
排版
 
 
排版在設(shè)計中扮演著非常重要的角色,它的重要性再怎么強調(diào)都不為過。在構(gòu)圖中,字體樣式對人們感知設(shè)計的影響比任何其他元素都大,可能除了顏色。
 
因為我們的大腦以閃電般的速度運轉(zhuǎn),一個字體會對一個設(shè)計產(chǎn)生影響,以至于它可能在不到一眨眼的時間內(nèi)改變用戶的印象。與顏色一樣,字體甚至?xí)绊懳覀兊那榫w,資深設(shè)計師可以通過字體傳達(dá)情緒和風(fēng)格。通過選擇合適的字體,我們可以傳達(dá)出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。
 
排版層次結(jié)構(gòu)可以快速建立視覺層次結(jié)構(gòu),并且通常在其中扮演重要角色。因此,在設(shè)計中經(jīng)常使用不同的字體和字體大小來表示層次結(jié)構(gòu),例如標(biāo)題、副標(biāo)題、正文和引用。
 
“除了確保文本清晰易讀,排版可以幫助你理清信息層次,傳達(dá)重要內(nèi)容,并表達(dá)你的品牌。” ——蘋果的人機(jī)界面指南
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
蘭博基尼的網(wǎng)站巧妙地使用了排版風(fēng)格和比例來賦予其設(shè)計力量
 
 
 
 
負(fù)空間(又名留白)
 
Claude Debussy 曾說過,“音樂是音符之間的空間“。同樣的觀點也適用于設(shè)計,元素之間的負(fù)空間給予設(shè)計強調(diào)、平衡和統(tǒng)一。
 
元素周圍適當(dāng)?shù)呢?fù)空間將焦點集中在元素本身。它強調(diào)了內(nèi)容,并提供了必要的喘息空間,以確保布局不顯得雜亂。沒有了呼吸空間,人腦就不太可能掃描興趣點,更容易感到困惑。
 
 
超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些
 
 
 
 
蘋果官網(wǎng)提供了一個利用負(fù)空間創(chuàng)造強烈焦點的杰出例子。
 
 
 
最后
 
 
人們已經(jīng)開始期待所有平臺和設(shè)備上的優(yōu)化、無阻礙的用戶體驗。理解設(shè)計原則及其交互方式對所有設(shè)計師來說都是至關(guān)重要的。使用專業(yè)技能設(shè)計它們是創(chuàng)造具有視覺吸引力的功能性設(shè)計的關(guān)鍵。我們不要忘記,美學(xué)的完整性會嚴(yán)重影響用戶體驗。
 
基于原則的設(shè)計是設(shè)計師在感覺有點迷失或用盡創(chuàng)意時可以依賴的黃金標(biāo)準(zhǔn)方法。在沒有理解和實現(xiàn)設(shè)計原則的情況下,也可能實現(xiàn)可接受的設(shè)計。
然而,這可能需要大量的嘗試和錯誤才能創(chuàng)造出看起來不錯的內(nèi)容,并創(chuàng)造出最佳的用戶體驗。
 
 
產(chǎn)品的美學(xué)質(zhì)量與它的實用性密不可分,因為我們每天使用的產(chǎn)品影響著我們和我們的幸福。”但只有精心制作的物品才會美麗。— Dieter Rams(迪特爾·拉姆斯)
 
 
當(dāng)我們不關(guān)注由設(shè)計原則驅(qū)動的設(shè)計質(zhì)量時,我們可能會忽視品牌質(zhì)量及其所代表的一切。當(dāng)某些東西設(shè)計不好時,品牌就會受到傷害,產(chǎn)品也會受到影響。
這就是為什么偉大的設(shè)計師在他們的工作中極其嚴(yán)謹(jǐn), 他們知道“你永遠(yuǎn)不會有第二次機(jī)會給人留下良好的第一印象。”
 
設(shè)計的細(xì)節(jié)成就了設(shè)計本身。—— 查爾斯 伊姆斯(Charles Eames)


作者:彩云Sky
鏈接:https://www.zcool.com.cn/article/ZMTQ1NTY2OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 

藍(lán)藍(lán)設(shè)計(www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計、桌面端界面設(shè)計APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、用戶體驗公司、軟件界面設(shè)計公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

分享本文至:

日歷

鏈接

個人資料

存檔