寫在前面

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

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

更多設計理論：

一、接近性原則

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

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

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

1. 排版和文本

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

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

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

2. 表單列表

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

二、對比原則

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

通過對比?？梢孕纬蓮娪辛Φ姆床钚Ч?，能第一時間讓觀眾捕捉到主題和重點。強力的對比可以形成視覺落差，建立有序的信息層級，增強版面的節(jié)奏和沖擊力。

1. 顏色對比

在設計中，顏色對比可以用于很多方面，包括文本和背景、按鈕和背景、圖標和背景等。選擇適當?shù)念伾珜Ρ瓤梢蕴岣哂脩趔w驗，并確保設計中的信息易于閱讀和理解。我們可以借助工具和資源，如顏色對比檢測器和無障礙性指南，來評估和優(yōu)化顏色對比度。

2. 大小對比

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

3. 形狀對比

通過使用與周圍元素不同形狀的設計元素，可以突出并強調(diào)特定元素的重要性。當運用形狀對比可以引導用戶的視線和注意力，幫助他們在設計中找到重要的信息或功能，獨特的形狀通常會吸引更多的注意力和焦點。

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

4. 靜動對比

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

在頁面設計中常常把有擴散感或者具有流動性的圖形或文字稱為“動”，把水平或者垂直性強、具有穩(wěn)定性的圖形或文字的編排稱為“靜”?！皠印睍拐麄€頁面充滿活力，獲得較高的關注度，而“靜”具有穩(wěn)定的視覺效果，靜動結(jié)合可以產(chǎn)生一定的空間感和視覺沖擊力。

5. 空間對比

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

三、重復原則

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

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

我們的生活中處處都充滿了重復

1. 重復排版

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

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

2. 重復顏色

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

3. 重復圖形或圖標

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

4. 注意事項

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

四、對齊原則

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

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

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

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

1. 左對齊

左對齊是我們設計中最常用的對齊方式，因為視覺大多數(shù)都是從做到右，所以左對齊會提高我們的瀏覽效率。將設計中的元素或文本的左側(cè)與其他元素的相應部分對齊，使它們在這一維度上保持對齊。

2. 右對齊

右對齊在我們設計中使用頻率不是很高，閱讀效率會相對慢一點，大多適用于少量或次級的文字，或者因為需要排版上保持平衡。

3. 居中對齊

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

4. 兩端對齊

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

5. 頂對齊

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

6. 底對齊

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

五、奇數(shù)原則

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

1. 縮放和大小

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

2. 布局和排列

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

3. 對比和色彩

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

4. 空間和間距

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

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

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

1. 水平三分法

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

2. 垂直三分法

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

3. 九宮格法

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

七、引導線

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

八、一致性原則

一致性原則是指在設計和用戶體驗領域中的一項重要原則，強調(diào)在整個設計過程中保持一致的視覺和交互方式。一致性原則的目標是為用戶提供一種無縫、連貫和可預測的體驗。

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

1. 視覺一致性

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

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

2. 交互一致性

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

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

3. 跨平臺一致性

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

例如下圖騰訊會議，App 界面與桌面應用基本保持一致。

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

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

九、留白

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

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

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

寫在最后

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