寫在前面

隨著時(shí)代的發(fā)展，設(shè)計(jì)趨勢(shì)也在不停的發(fā)展和改變，但不論趨勢(shì)如何發(fā)展和改變，都離不開底層的設(shè)計(jì)理論。如果說把一件作品比喻成一座高樓，那么底層設(shè)計(jì)理論，就是支撐這座高樓的基石。

要成為一名出色的設(shè)計(jì)師，我們需要掌握一些底層設(shè)計(jì)理論中關(guān)鍵的要素。本文將分享 9 個(gè)設(shè)計(jì)背后的底層理論要素，這些要素將在底層設(shè)計(jì)過程中指引我們的創(chuàng)作，幫助我們提高設(shè)計(jì)的深度和創(chuàng)造力。

更多設(shè)計(jì)理論：

一、接近性原則

接近性原則（Proximity Principle）是設(shè)計(jì)中的一個(gè)重要原理，指的是將相關(guān)元素或組件放置在彼此接近的位置，以便于用戶在理解和使用時(shí)建立關(guān)聯(lián)。接近性原則在界面設(shè)計(jì)、排版布局和信息組織等方面都有應(yīng)用。

接近性原則的核心思想是通過空間的相對(duì)距離來傳達(dá)元素之間的邏輯關(guān)系和視覺關(guān)聯(lián)。當(dāng)相關(guān)的元素靠近彼此時(shí)，用戶更容易將它們視為一個(gè)整體，從而更好地理解它們之間的關(guān)系。這可以幫助用戶快速掃描和定位信息，提高交互效率和用戶體驗(yàn)。

以下圖為例，當(dāng)元素之間的間距保持一致時(shí)，視覺上會(huì)顯得比較均衡，不會(huì)讓人產(chǎn)生將元素聯(lián)系起來的錯(cuò)覺。但當(dāng)元素的橫向和縱向距離發(fā)生變化時(shí)，我們的大腦會(huì)傾向于將距離較近的元素看成一個(gè)組，這就是接近性法則最直觀的體現(xiàn)。

1. 排版和文本

在我們?cè)O(shè)計(jì)文字排版中也必須遵循接近性法則，頁面中的元素如果距離都一致，我們的視覺會(huì)默認(rèn)為它們都是相互獨(dú)立的，只要調(diào)整一下間距眼睛就會(huì)對(duì)它們進(jìn)行分組，使得版面結(jié)構(gòu)更加清晰，閱讀起來就會(huì)更順暢。

以下圖為例，畫面中的英文字母，當(dāng)它們分開時(shí)是單獨(dú)的字母，當(dāng)我們?cè)陂喿x的時(shí)候，第一時(shí)間無法將他們聯(lián)系在一起，但是通過調(diào)整間距將他們分組，那么我們的視覺就會(huì)第一時(shí)間得到它們傳達(dá)給我們的 “ I LOVE YOU ”。

我們也可以用接近性原則來保持組件密度布局之間的平衡。如果在組件密集的情況下，想要用戶能夠快速瀏覽內(nèi)容組，就需要增加邊距和間距寬度，使內(nèi)容的分組更明顯，以便用戶更加清晰地瀏覽信息。另外我們需要將相關(guān)的按鈕和功能組件進(jìn)行分組，放置在相近的位置，使用戶能夠快速分辨哪些元素是相互關(guān)聯(lián)的。

2. 表單列表

將相關(guān)的表單字段和標(biāo)簽放置在緊湊的布局中，以便用戶一目了然地理解每個(gè)輸入字段的用途。例如下圖設(shè)置頁面：如果只用線條進(jìn)行分割，會(huì)使頁面信息承載過多，割裂感過強(qiáng)。我們利用接近性原則把相似屬性的功能分成一組，清晰有條理會(huì)更容易操作。

二、對(duì)比原則

對(duì)比原則是指在設(shè)計(jì)中運(yùn)用對(duì)比來創(chuàng)造視覺吸引力、視覺層次和視覺效果的一種設(shè)計(jì)準(zhǔn)則。通過對(duì)比不同的元素的特征、屬性或質(zhì)感，可以使設(shè)計(jì)更加有趣、清晰和有效。設(shè)計(jì)對(duì)比原則可以應(yīng)用于顏色、大小、形狀、質(zhì)地等方面。

通過對(duì)比?？梢孕纬蓮?qiáng)有力的反差效果，能第一時(shí)間讓觀眾捕捉到主題和重點(diǎn)。強(qiáng)力的對(duì)比可以形成視覺落差，建立有序的信息層級(jí)，增強(qiáng)版面的節(jié)奏和沖擊力。

1. 顏色對(duì)比

在設(shè)計(jì)中，顏色對(duì)比可以用于很多方面，包括文本和背景、按鈕和背景、圖標(biāo)和背景等。選擇適當(dāng)?shù)念伾珜?duì)比可以提高用戶體驗(yàn)，并確保設(shè)計(jì)中的信息易于閱讀和理解。我們可以借助工具和資源，如顏色對(duì)比檢測(cè)器和無障礙性指南，來評(píng)估和優(yōu)化顏色對(duì)比度。

2. 大小對(duì)比

通過將重要元素設(shè)置為較大的尺寸，可以吸引用戶的注意力并突出顯示關(guān)鍵信息或功能。較小的元素則可用于次要信息或次要操作。對(duì)比不同大小的元素可以創(chuàng)建層次結(jié)構(gòu)和視覺秩序。通過適當(dāng)?shù)姆峙浯笮。梢越⒃刂g的關(guān)系和組織，使設(shè)計(jì)更易于理解和瀏覽。

3. 形狀對(duì)比

通過使用與周圍元素不同形狀的設(shè)計(jì)元素，可以突出并強(qiáng)調(diào)特定元素的重要性。當(dāng)運(yùn)用形狀對(duì)比可以引導(dǎo)用戶的視線和注意力，幫助他們?cè)谠O(shè)計(jì)中找到重要的信息或功能，獨(dú)特的形狀通常會(huì)吸引更多的注意力和焦點(diǎn)。

通過巧妙地運(yùn)用形狀對(duì)比，設(shè)計(jì)師可以創(chuàng)造出視覺上有吸引力、易于區(qū)分和易于理解的設(shè)計(jì)。然而，設(shè)計(jì)師需要根據(jù)具體需求和目標(biāo)受眾進(jìn)行權(quán)衡和調(diào)整，以確保形狀對(duì)比的使用在整體設(shè)計(jì)中是有效和合適的。

4. 靜動(dòng)對(duì)比

靜動(dòng)對(duì)比是指在設(shè)計(jì)中使用靜態(tài)（靜止）和動(dòng)態(tài)（運(yùn)動(dòng)）元素之間的相對(duì)對(duì)比。通過巧妙地運(yùn)用靜動(dòng)對(duì)比，可以為設(shè)計(jì)增添動(dòng)態(tài)感、引起用戶的興趣，同時(shí)提供視覺上的變化和活力。

在頁面設(shè)計(jì)中常常把有擴(kuò)散感或者具有流動(dòng)性的圖形或文字稱為“動(dòng)”，把水平或者垂直性強(qiáng)、具有穩(wěn)定性的圖形或文字的編排稱為“靜”?！皠?dòng)”會(huì)使整個(gè)頁面充滿活力，獲得較高的關(guān)注度，而“靜”具有穩(wěn)定的視覺效果，靜動(dòng)結(jié)合可以產(chǎn)生一定的空間感和視覺沖擊力。

5. 空間對(duì)比

板式設(shè)計(jì)并不局限于一個(gè)平面上的層次，也可以讓元素有一些前后關(guān)系。通過合理利用空間和間距，有意識(shí)地創(chuàng)造元素之間的對(duì)比和平衡感，使設(shè)計(jì)更加有層次感。

三、重復(fù)原則

重復(fù)原則是指在設(shè)計(jì)中有意識(shí)地重復(fù)使用相同的元素、樣式、圖形、顏色或其他設(shè)計(jì)要素，以增強(qiáng)視覺效果、一致性和連貫性。通過在設(shè)計(jì)中應(yīng)用重復(fù)元素，可以幫助用戶建立視覺上的關(guān)聯(lián)、提供一致的用戶體驗(yàn)，并增加設(shè)計(jì)的可讀性和易用性。

設(shè)計(jì)重復(fù)原則的核心是在設(shè)計(jì)中保持一致性，使同類的設(shè)計(jì)元素在不同的場(chǎng)景中都有相似的外觀和感覺。這有助于用戶更容易理解和導(dǎo)航設(shè)計(jì)，減少認(rèn)知負(fù)荷，提高用戶的效率和滿意度。

我們的生活中處處都充滿了重復(fù)

1. 重復(fù)排版

通過在設(shè)計(jì)中重復(fù)使用相同的字體、字號(hào)、行距和對(duì)齊方式，可以創(chuàng)建視覺統(tǒng)一性，使設(shè)計(jì)看起來更加整體和協(xié)調(diào)。

通過在設(shè)計(jì)中重復(fù)使用相同的樣式，例如按鈕樣式、邊框樣式等，可以幫助建立一致的界面規(guī)范，提供一致的用戶界面和交互模式。

2. 重復(fù)顏色

當(dāng)一個(gè)版面中出現(xiàn)太多顏色，控制不好版面便會(huì)出現(xiàn)雜亂花哨等問題。通過在設(shè)計(jì)中重復(fù)使用相同的顏色，可以建立一種視覺連貫性、增強(qiáng)品牌形象，并傳達(dá)特定情感或意義。

3. 重復(fù)圖形或圖標(biāo)

在設(shè)計(jì)中重復(fù)使用相同的圖形或圖標(biāo)可以構(gòu)建視覺層次、提供一致性，以及幫助用戶快速識(shí)別和理解信息。

4. 注意事項(xiàng)

如果頁面完全按照某一種特定的形式，那么這就屬于重復(fù)的過度，帶給用戶的也并非是更強(qiáng)的整體性，而是視覺上的疲勞，這時(shí)我們就要在重復(fù)中去尋找變化

四、對(duì)齊原則

對(duì)齊原則指的是在設(shè)計(jì)中，將元素、文本或圖像等放置在視覺上對(duì)其或與其他元素對(duì)齊的方式。它的目的是為了創(chuàng)造視覺上的一致性、整齊性和秩序感。

通過應(yīng)用對(duì)齊原則，提供視覺上的一致性和整齊性，使設(shè)計(jì)更容易閱讀和理解。建立明確的層次結(jié)構(gòu)和組織，使用戶更輕松地導(dǎo)航和瀏覽設(shè)計(jì)。創(chuàng)造出視覺平衡和美感，使設(shè)計(jì)看起來更專業(yè)和吸引人。

以下兩幅圖，一幅是辦公室整齊的桌椅，而另一幅則是超市整齊的貨品，從視覺效果上來看，整齊有規(guī)律的圖給人的感覺條例性更強(qiáng)、更具有整體性、更嚴(yán)謹(jǐn)，而且更加賞心悅目、易于接受。延伸到設(shè)計(jì)排版中也是如此。

以左下圖為例，每個(gè)元素都參差不齊，各元素間沒有聯(lián)系，凌亂而沒有秩序感。而右下圖運(yùn)用了對(duì)齊原則之后，帶來了秩序感，更利于閱讀。

1. 左對(duì)齊

左對(duì)齊是我們?cè)O(shè)計(jì)中最常用的對(duì)齊方式，因?yàn)橐曈X大多數(shù)都是從做到右，所以左對(duì)齊會(huì)提高我們的瀏覽效率。將設(shè)計(jì)中的元素或文本的左側(cè)與其他元素的相應(yīng)部分對(duì)齊，使它們?cè)谶@一維度上保持對(duì)齊。

2. 右對(duì)齊

右對(duì)齊在我們?cè)O(shè)計(jì)中使用頻率不是很高，閱讀效率會(huì)相對(duì)慢一點(diǎn)，大多適用于少量或次級(jí)的文字，或者因?yàn)樾枰虐嫔媳３制胶狻?/p>

3. 居中對(duì)齊

居中對(duì)齊可以為設(shè)計(jì)提供視覺上的一致性和平衡感，使設(shè)計(jì)看起來更整齊、和諧。將重要的元素居中對(duì)齊可以突出其重要性和吸引用戶的注意力。居中對(duì)齊可以創(chuàng)造一個(gè)視覺焦點(diǎn)，將用戶的注意力引導(dǎo)到設(shè)計(jì)的中心。

4. 兩端對(duì)齊

兩端對(duì)齊可以使多行文本或段落的左右邊緣對(duì)齊，創(chuàng)造出統(tǒng)一和整潔的外觀。兩端對(duì)齊的文本外觀更加規(guī)范和專業(yè)，使整體設(shè)計(jì)更加精細(xì)和吸引人。也可以創(chuàng)造一種視覺上的對(duì)齊關(guān)系，使設(shè)計(jì)看起來平衡、穩(wěn)定。

5. 頂對(duì)齊

頂對(duì)齊可以在垂直方向上保持文本或元素的一致性和整齊性，使設(shè)計(jì)看起來更加整潔和專業(yè)。通過將文本的頂部對(duì)齊，可以使多行文本的基線對(duì)齊，減少眼跳和閱讀困難，從而提高閱讀的舒適性和速度。頂對(duì)齊突出了文本或元素之間的水平關(guān)系，使它們看起來緊密相關(guān)，形成一種視覺連貫性。頂對(duì)齊有助于確保文本或元素在設(shè)計(jì)中的規(guī)范性，使設(shè)計(jì)師和讀者能夠更容易感知并理解排版的結(jié)構(gòu)和邏輯。

6. 底對(duì)齊

底對(duì)齊一般用于少量文字或者裝飾性元素，底對(duì)齊的方式可能會(huì)導(dǎo)致文本或元素的頂部出現(xiàn)不對(duì)齊的情況，這時(shí)可以通過調(diào)整行高、垂直間距或添加空白行等方式來解決。在使用底對(duì)齊時(shí)，設(shè)計(jì)師還需要考慮整體設(shè)計(jì)的需要、內(nèi)容的要求和排版的美感，以達(dá)到最佳的視覺效果和用戶體驗(yàn)。

五、奇數(shù)原則

奇數(shù)原則的基本理念是，奇數(shù)的分割方式更加有趣和吸引人，能夠吸引觀眾的注意力并創(chuàng)造一種動(dòng)態(tài)的視覺效果。奇數(shù)原則畫面通常是一個(gè)、三個(gè)或五個(gè)主體，通常不超過七個(gè)，超過七個(gè)時(shí)觀眾會(huì)將其視為一個(gè)整體，當(dāng)畫面中為主體為奇數(shù)時(shí)，在視覺上會(huì)比偶數(shù)更和諧、更美觀。相比之下，偶數(shù)分割方式可能會(huì)導(dǎo)致視覺上的靜態(tài)和平庸感。

1. 縮放和大小

在設(shè)計(jì)元素的大小上使用奇數(shù)比例，如 1:3、1:5、2:3 等，可以創(chuàng)造出更具吸引力的視覺效果。

2. 布局和排列

在設(shè)計(jì)元素的布局和排列中，使用奇數(shù)個(gè)元素，如三個(gè)圖像、五個(gè)文本框等，可以使整體構(gòu)圖更加平衡和引人注目。

3. 對(duì)比和色彩

使用奇數(shù)顏色或?qū)Ρ榷扔|發(fā)更強(qiáng)烈的視覺效果，如黑白紅的組合、三種互補(bǔ)色等。

4. 空間和間距

在設(shè)計(jì)元素之間的間距和空白區(qū)域上使用奇數(shù)數(shù)目，可以創(chuàng)建更具張力和動(dòng)感的布局。

六、三分構(gòu)圖法

三分法構(gòu)圖遵循了黃金分割原則，即將畫面或照片水平和垂直方向上分割為三等分，并在分割線的交點(diǎn)或線上放置重要的元素。這種構(gòu)圖方法有助于創(chuàng)建動(dòng)態(tài)和有層次的視覺組合，同時(shí)也能幫助觀眾的眼睛更自然地遍歷整個(gè)畫面。

1. 水平三分法

將畫面或照片水平分為上、中、下三個(gè)部分，并將重要的元素放置在上下分割線的交點(diǎn)或線上。

2. 垂直三分法

將畫面或照片垂直分為左、中、右三個(gè)部分，并將重要的元素放置在左右分割線的交點(diǎn)或線上。

3. 九宮格法

將畫面或照片分為九個(gè)等大小的方格，在重要的元素與線交叉的點(diǎn)上放置主要內(nèi)容。

七、引導(dǎo)線

引導(dǎo)性構(gòu)圖利用畫面中有形或無形的線，將觀眾的注意力牽引至預(yù)期的方向，視覺匯聚在某個(gè)點(diǎn)或某條線上。引線不一定是一條線，它是一種具有引導(dǎo)性的東西，光影、道路、河流等都可以做為引導(dǎo)線，引導(dǎo)性構(gòu)圖視覺表現(xiàn)強(qiáng)，引導(dǎo)觀眾視線突出主體。

八、一致性原則

一致性原則是指在設(shè)計(jì)和用戶體驗(yàn)領(lǐng)域中的一項(xiàng)重要原則，強(qiáng)調(diào)在整個(gè)設(shè)計(jì)過程中保持一致的視覺和交互方式。一致性原則的目標(biāo)是為用戶提供一種無縫、連貫和可預(yù)測(cè)的體驗(yàn)。

對(duì)用戶來說，同一產(chǎn)品需要統(tǒng)一的設(shè)計(jì)規(guī)范，其視覺樣式、交互形式都應(yīng)該遵循基本的用戶習(xí)慣，保持功能、操作的一致性為確保用戶對(duì)界面的學(xué)習(xí)使用至關(guān)重要。

1. 視覺一致性

在設(shè)計(jì)中保持一致的顏色、字體、圖標(biāo)、布局和樣式，以確保不同頁面或屏幕之間的外觀和感覺的統(tǒng)一。這樣的一致性有助于用戶輕松地識(shí)別和理解界面元素，并構(gòu)建對(duì)品牌的信任和認(rèn)同。

例如下圖斑馬 APP，一款針對(duì)孩子學(xué)習(xí)的 APP，在首頁、商城、個(gè)人中心等頁面，風(fēng)格保持一致，在頁面配色以及 icon 的繪制上，都是主打清新可愛的風(fēng)格。品牌吉祥物小斑馬更是貫穿整個(gè) App，也形成了統(tǒng)一的品牌傳達(dá)。

2. 交互一致性

在設(shè)計(jì)中保持一致的交互模式、操作方式、導(dǎo)航結(jié)構(gòu)和反饋機(jī)制，可以減少用戶的認(rèn)知負(fù)荷，意味著用戶不再需要重新學(xué)習(xí)，減少了用戶的學(xué)習(xí)成本，提高操作效率和滿意度。

例如下圖三款音樂 APP，其主要功能、頁面布局、操作方式等都大同小異，這就是體驗(yàn)了交互的一致性，使用戶不需過多的思考就可隨心所欲使用。

3. 跨平臺(tái)一致性

在不同的設(shè)備和平臺(tái)上保持一致的設(shè)計(jì)和用戶體驗(yàn)，以確保用戶在不同環(huán)境下獲得相似的體驗(yàn)。這種一致性可以跨移動(dòng)設(shè)備、桌面應(yīng)用程序和 Web 瀏覽器等各種平臺(tái)實(shí)現(xiàn)。

例如下圖騰訊會(huì)議，App 界面與桌面應(yīng)用基本保持一致。

4. 迭代產(chǎn)品一致性

當(dāng)產(chǎn)品進(jìn)行版本迭代的時(shí)候，應(yīng)該保留即有的交互和操作習(xí)慣，以免改變用戶原有認(rèn)知變化，造成用戶學(xué)習(xí)成本大大提升，嚴(yán)重甚至造成用戶流失。在日常工作中，經(jīng)常聽項(xiàng)目經(jīng)理說的一句話“永遠(yuǎn)不要高估用戶的理解能力”。

九、留白

留白，也被稱為負(fù)空間，是指設(shè)計(jì)中沒有被元素或內(nèi)容填充的空白區(qū)域。留白可以是頁面、海報(bào)、廣告或任何其他設(shè)計(jì)作品中的空白區(qū)域。

留白可以通過創(chuàng)造對(duì)比、平衡和重點(diǎn)突出來增強(qiáng)設(shè)計(jì)的視覺效果。它使設(shè)計(jì)元素更容易被注意、理解和感知。適當(dāng)?shù)牧舭卓梢蕴岣呶谋净騼?nèi)容的可讀性和可理解性。它可以增加行與行、段落與段落之間的間距，使文字更易于閱讀和吸引眼球。留白可以在設(shè)計(jì)中創(chuàng)造平衡的感覺通過調(diào)整元素之間的空間關(guān)系來實(shí)現(xiàn)和諧的組合。它可以使設(shè)計(jì)更具吸引力、整潔和有序。

留白的常見誤區(qū)是認(rèn)為留白就是留出白色，事實(shí)上留白的真正含義是留出空間，它可以是完全空白的空間，也可以是背景顏色、紋理或漸變填充的區(qū)域。

寫在最后

學(xué)習(xí)設(shè)計(jì)底層理論對(duì)于設(shè)計(jì)師來說至關(guān)重要，它可以提高專業(yè)素養(yǎng)、培養(yǎng)系統(tǒng)性思維、引領(lǐng)創(chuàng)新趨勢(shì)、提升設(shè)計(jì)質(zhì)量和效率、豐富設(shè)計(jì)語言和表達(dá)能力。這將使設(shè)計(jì)師在設(shè)計(jì)實(shí)踐中更加成功和有影響力。