如何制作一個(gè)既能捕捉品牌獨(dú)特性又能吸引不同受眾的網(wǎng)站時(shí)，尤其如此。設(shè)計(jì)原則可以作為自信決策的指南針，確保您的作品在美學(xué)和功能方面都表現(xiàn)出色。我們將解釋什么是設(shè)計(jì)原則并深入研究它們中的每一個(gè)，探索它們?yōu)槭裁粗匾约叭绾问褂盟鼈?。我們還將在網(wǎng)頁(yè)設(shè)計(jì)的上下文中討論它們，并使用每個(gè)原則的示例

設(shè)計(jì)的原則是什么？

設(shè)計(jì)原則是構(gòu)成任何創(chuàng)意工作支柱的基本組成部分。它們幫助創(chuàng)作者決定如何在他們的作品中安排、樣式和結(jié)構(gòu)元素。

這些原則的最終目標(biāo)是確保結(jié)果既具有視覺(jué)吸引力，又能達(dá)到其目的。無(wú)論您是創(chuàng)建講述故事的精美圖形，還是作為日常網(wǎng)站維護(hù)的一部分使您的網(wǎng)站用戶(hù)友好，這些原則都為成功提供了基本框架。

這些設(shè)計(jì)原則并不存在于真空中。它們作為一個(gè)有凝聚力的系統(tǒng)運(yùn)作，其中每個(gè)原則都是相互關(guān)聯(lián)的，從而增強(qiáng)和支持其他原則。

14 項(xiàng)設(shè)計(jì)原則

平衡

品種

反差

對(duì)準(zhǔn)

運(yùn)動(dòng)

規(guī)模

比例

強(qiáng)調(diào)

等級(jí)制度

節(jié)奏

統(tǒng)一

空間

重復(fù)

接近

01. 平衡

• 回想起你在游樂(lè)場(chǎng)的日子，你可能還記得被困在蹺蹺板的頂部，因?yàn)榱硪欢说娜吮饶愦蟮枚?。作為設(shè)計(jì)中最重要的原則之一，平衡對(duì)構(gòu)圖的影響類(lèi)似：當(dāng)一側(cè)的元素比另一側(cè)重得多時(shí)，藝術(shù)品會(huì)感覺(jué)卡住、不平衡或笨拙。

• 平衡是指在構(gòu)圖中分配視覺(jué)元素以創(chuàng)造一種穩(wěn)定與和諧的感覺(jué)。它是關(guān)于這些元素（如顏色、線條、紋理、空間和形狀）如何排列以產(chǎn)生平衡感。

• 您的藝術(shù)不需要完全對(duì)稱(chēng)才能保持平衡。事實(shí)上，不對(duì)稱(chēng)平衡——一種將不同視覺(jué)權(quán)重的元素排列在一起以創(chuàng)造沒(méi)有相同側(cè)面的動(dòng)態(tài)而穩(wěn)定的構(gòu)圖的策略——是一種有效的設(shè)計(jì)工具，這種轉(zhuǎn)變讓設(shè)計(jì)師有更多的自由來(lái)試驗(yàn)結(jié)構(gòu)。

• 以個(gè)人博客網(wǎng)站模板為例。盡管左側(cè)的照片比右側(cè)的照片大得多，但較小照片周?chē)奈谋竞拓?fù)空間有助于均勻分布視覺(jué)權(quán)重。

02. 多樣性

• 多樣性是設(shè)計(jì)師如何使用對(duì)比度和多樣性為構(gòu)圖添加視覺(jué)吸引力和復(fù)雜性。通過(guò)在設(shè)計(jì)中實(shí)現(xiàn)多樣性，您將避免創(chuàng)建無(wú)聊和單調(diào)的構(gòu)圖。多樣性有助于吸引觀眾的注意力，并且經(jīng)常與其他設(shè)計(jì)原則（如統(tǒng)一和平衡）一起使用，以實(shí)現(xiàn)和諧而充滿(mǎn)活力的構(gòu)圖。

• 在這個(gè)設(shè)計(jì)博客網(wǎng)站模板中，標(biāo)題文本下方的各種圖像吸引了您并在頁(yè)面上移動(dòng)您的眼睛。圖像是不同顏色的調(diào)色板。但正是反復(fù)出現(xiàn)的色調(diào)（如鈷藍(lán)色和紅色）將不同的掛毯縫合在一起，創(chuàng)造了統(tǒng)一性，并引導(dǎo)觀眾完成視覺(jué)敘事。盡管中心線兩側(cè)的圖像數(shù)量各不相同，但網(wǎng)站布局的不對(duì)稱(chēng)性使構(gòu)圖充滿(mǎn)活力。

03. 對(duì)比度

• 對(duì)比度被定義為相反元素或效果的排列，以在設(shè)計(jì)中創(chuàng)造視覺(jué)趣味。雖然當(dāng)您談?wù)搶?duì)比度時(shí)，人們通常首先想到的是顏色，但大小、紋理、形狀和排版等元素也可以產(chǎn)生對(duì)比感。

• 如果使用得當(dāng)，對(duì)比度可以使設(shè)計(jì)更具活力，提高清晰度并更有力地傳達(dá)信息。但是，取得適當(dāng)?shù)钠胶庵陵P(guān)重要。對(duì)比度過(guò)高可能會(huì)讓人不和諧，而對(duì)比度過(guò)低會(huì)使設(shè)計(jì)變得沉悶或難以理解。

• 最好的網(wǎng)站實(shí)施對(duì)比以實(shí)現(xiàn)多種效果?？纯催@個(gè) T 恤店網(wǎng)站模板，它使用各種形式的對(duì)比來(lái)引導(dǎo)訪問(wèn)者的注意力，尤其是號(hào)召性用語(yǔ)。“設(shè)計(jì)師在非常中性的白色背景和非常高級(jí)、前衛(wèi)的霓虹綠之間創(chuàng)造了一種對(duì)比，”設(shè)計(jì)總監(jiān)說(shuō)。“他們使用綠色來(lái)強(qiáng)調(diào)或突出他們想要的東西。”

04. 對(duì)齊

• 對(duì)齊是指元素沿軸的排列。這種設(shè)計(jì)原則有助于在構(gòu)圖中創(chuàng)建秩序和組織。您可以使用它來(lái)提高可讀性并為眼睛創(chuàng)建一條路徑，使信息易于消化，并使整體設(shè)計(jì)更加專(zhuān)業(yè)和精致。

• 我們的設(shè)計(jì)師在此品牌組合網(wǎng)站模板中使用對(duì)齊來(lái)創(chuàng)造自然的閱讀流程，并使極簡(jiǎn)主義構(gòu)圖更具活力。左側(cè)的工作室名稱(chēng)與其下方的正文對(duì)齊，形成一個(gè)強(qiáng)有力的垂直軸，便于賞心悅目，并暗示了一個(gè)經(jīng)過(guò)深思熟慮的結(jié)構(gòu)。右對(duì)齊的標(biāo)題平衡了構(gòu)圖，并將折疊的兩半聯(lián)系在一起。

  
  

05. 機(jī)芯

• 運(yùn)動(dòng)是設(shè)計(jì)引導(dǎo)觀眾的視線圍繞作品的能力。它是關(guān)于創(chuàng)造一種視覺(jué)流程，將注意力引導(dǎo)到設(shè)計(jì)中的不同元素上，通常會(huì)導(dǎo)致一個(gè)焦點(diǎn)。

• 運(yùn)動(dòng)有助于吸引注意力并使設(shè)計(jì)更具活力。

  
  

06. 規(guī)模

• 設(shè)計(jì)中的比例對(duì)于建立視覺(jué)關(guān)系和設(shè)定設(shè)計(jì)的整體基調(diào)至關(guān)重要。它調(diào)整了觀眾對(duì)空間和重要性的感知，將他們的目光引導(dǎo)到設(shè)計(jì)師最想要的地方。當(dāng)比例與顏色、紋理和形狀一起縱時(shí)，它可以將簡(jiǎn)單的設(shè)計(jì)轉(zhuǎn)化為引人注目的敘述。

• 這個(gè)品牌書(shū)網(wǎng)站模板使用比例來(lái)創(chuàng)造視覺(jué)興趣，并通過(guò)信息層次結(jié)構(gòu)引導(dǎo)用戶(hù)的注意力。關(guān)鍵照片跨越整個(gè)褶皺，與較小的產(chǎn)品快照形成鮮明對(duì)比。這些大圖像成為中心焦點(diǎn)，吸引眼球并突出其重要性。此外，視覺(jué)效果的規(guī)模賦予它們栩栩如生的品質(zhì)，突顯了該品牌對(duì)真實(shí)性的執(zhí)著——它使用天然成分來(lái)增強(qiáng)用戶(hù)與生俱來(lái)的美感。

  
  

07. 比例

• 比例確定元素的大小與標(biāo)準(zhǔn)或預(yù)期大小的關(guān)系，而比例是指合成中元素之間的大小關(guān)系。如果應(yīng)用得當(dāng)，比例會(huì)在設(shè)計(jì)中營(yíng)造出統(tǒng)一、平衡和美學(xué)和諧的感覺(jué)。

• 在這張圖中，我們的設(shè)計(jì)師巧妙地利用比例來(lái)創(chuàng)造清晰的信息層次結(jié)構(gòu)，同時(shí)保持平衡和有吸引力的視覺(jué)安排。

• 盡管“無(wú)障礙設(shè)計(jì)”是首要主題，但“該做與不該做”這個(gè)短語(yǔ)被故意放大了。這不僅僅是一個(gè)美學(xué)問(wèn)題，而是一個(gè)精心設(shè)計(jì)的舉動(dòng)，以吸引觀眾的興趣;這些術(shù)語(yǔ)以行動(dòng)為導(dǎo)向且充滿(mǎn)活力，有望提供實(shí)用的建議，讀者通常會(huì)覺(jué)得更吸引人。

   

08. 強(qiáng)調(diào)

• 強(qiáng)調(diào)需要使你的作品中的一個(gè)元素與作品的其余部分不同，以便它脫穎而出。您可以通過(guò)使元素的大小、顏色或形狀與合成的其余部分不同，或者為它們提供更少或更多的空白，來(lái)強(qiáng)調(diào)元素。強(qiáng)調(diào)創(chuàng)建層次結(jié)構(gòu)，并將查看者集中在您希望他們看到的內(nèi)容上。

• 強(qiáng)調(diào)就像你突出顯示一行文本時(shí)，它試圖將觀眾的注意力放在你希望他們看到的東西上。

• 在學(xué)習(xí)設(shè)計(jì)原則時(shí)，您可能會(huì)遇到平面設(shè)計(jì)的要素。這本設(shè)計(jì)圣經(jīng)指出，“在一組同等權(quán)重的元素中缺乏主導(dǎo)地位，迫使它們之間競(jìng)爭(zhēng)。然后讀者必須找到自己的切入點(diǎn)，這是一件苦差事。換句話說(shuō)，強(qiáng)調(diào)作品的元素可以使觀眾更容易理解它們。

  
  

09. 層次結(jié)構(gòu)

• 設(shè)計(jì)中的層次結(jié)構(gòu)就是組織視覺(jué)元素以顯示它們的重要性順序。它是引導(dǎo)觀眾關(guān)注最重要的內(nèi)容的重要工具。如果沒(méi)有明確的層次結(jié)構(gòu)，您作品中的所有內(nèi)容可能看起來(lái)都同等重要，這可能會(huì)讓人不知所措或令人困惑。層次結(jié)構(gòu)有助于以一種自然的方式布置元素，從而自然地告訴查看者首先查看、第二個(gè)位置等。

• 在 Web 布局中，您可以使用層次結(jié)構(gòu)來(lái)創(chuàng)建結(jié)構(gòu)并增強(qiáng)可讀性。標(biāo)題通常采用最大的字體，可以吸引注意力并設(shè)置上下文。副標(biāo)題略小，引導(dǎo)讀者進(jìn)入主題，在標(biāo)題和更詳細(xì)的正文之間架起了一座橋梁。正文文本（通常是最小的字體）是主要內(nèi)容所在的位置。這種結(jié)構(gòu)有助于使內(nèi)容更易于瀏覽，并在讀者深入研究正文文本之前為他們提供清晰度和上下文。

• 大小并不是建立層次結(jié)構(gòu)的唯一方法。當(dāng)你使用人像模式在 iPhone 上拍照時(shí)，你是通過(guò)模糊背景元素來(lái)專(zhuān)注于主題來(lái)創(chuàng)建一個(gè)層次結(jié)構(gòu)，或者，當(dāng)你處理文案時(shí)，你要把你希望人們閱讀的主要內(nèi)容做得更大或更粗。

• 顏色和位置在建立層次結(jié)構(gòu)方面也起著關(guān)鍵作用。對(duì)關(guān)鍵文本或圖標(biāo)使用高對(duì)比度顏色可以使它們脫穎而出。在網(wǎng)頁(yè)設(shè)計(jì)中，將關(guān)鍵元素放置在“首屏”（網(wǎng)頁(yè)中無(wú)需滾動(dòng)即可可見(jiàn)的部分）可確保它們首先被看到。這些技術(shù)有助于創(chuàng)建清晰有效的層次結(jié)構(gòu)，使設(shè)計(jì)不僅美觀，而且易于導(dǎo)航和理解。

  
  

10. 節(jié)奏

• 在設(shè)計(jì)中，節(jié)奏是由元素的重復(fù)或交替產(chǎn)生的視覺(jué)流動(dòng)和運(yùn)動(dòng)。這是一種有助于建立秩序感、連續(xù)性和和諧感的設(shè)計(jì)原則

• 您可以使用節(jié)奏來(lái)制作有趣的模式，這種設(shè)計(jì)通過(guò)重復(fù)形狀但交替它們的大小來(lái)創(chuàng)造節(jié)奏。我們?cè)谛〉痛蟮锌吹角蝮w和立方體。中心球體的大小和位置會(huì)創(chuàng)建層次結(jié)構(gòu)，而圍繞它的形狀的排列會(huì)引導(dǎo)您的視線在構(gòu)圖中四處走動(dòng)。形狀內(nèi)部起伏的顏色和指紋狀圖案使元素感覺(jué)像是隨著音樂(lè)的節(jié)奏跳動(dòng)。

  
  

11. 團(tuán)結(jié)

• Unity 是不同元素如何協(xié)同工作的累積結(jié)果。在統(tǒng)一的設(shè)計(jì)中，每件物品都有一個(gè)刻意的位置和目的，有助于形成一個(gè)沒(méi)有多余或隨機(jī)細(xì)節(jié)的綜合整體。實(shí)現(xiàn)統(tǒng)一意味著精心打造一個(gè)有凝聚力、和諧和平衡的設(shè)計(jì)，這可以鞏固視覺(jué)層次結(jié)構(gòu)和品牌形象。

• 在網(wǎng)站設(shè)計(jì)領(lǐng)域，統(tǒng)一是以視覺(jué)上吸引人的方式傳遞信息的關(guān)鍵。以這個(gè)婚禮網(wǎng)站模板為例。這是一場(chǎng)團(tuán)結(jié)的大師班，從精致的排版到柔和的粉紅色配色方案，每個(gè)元素都經(jīng)過(guò)精心策劃，以反映優(yōu)雅和浪漫。

  
  

12. 空間

• 空間作為一種設(shè)計(jì)原則，是指構(gòu)圖中元素周?chē)⒅g或內(nèi)部的區(qū)域。它在決定設(shè)計(jì)的有效性和審美吸引力方面起著至關(guān)重要的作用。

• 設(shè)計(jì)中的空間主要有兩種類(lèi)型：

• 正空間：構(gòu)圖的主要主題占據(jù)的區(qū)域。

• 負(fù)空間：合成中沒(méi)有視覺(jué)元素的區(qū)域。負(fù)空間遠(yuǎn)非死氣沉沉，而是設(shè)計(jì)中積極且不可或缺的一部分，它提高了構(gòu)圖的有效性、清晰度和視覺(jué)吸引力?！斑@樣想吧，”設(shè)計(jì)總監(jiān)說(shuō)。“閱讀時(shí)，你的眼睛不僅會(huì)處理字母，還會(huì)處理它們周?chē)目臻g?！?/span>

• 在這個(gè)配飾店網(wǎng)站模板中，負(fù)空間幫助觀眾專(zhuān)注于展示的產(chǎn)品，并為每個(gè)五顏六色的手提袋提供喘息的空間。雖然它通常被稱(chēng)為 “空白”，但負(fù)空間是任何類(lèi)型的網(wǎng)站背景，無(wú)論是圖案、顏色還是圖像。

 
13. 重復(fù)

• 重復(fù)是指在合成中重復(fù)使用某些元素，如形狀、顏色、紋理、線條或圖案。這一原則可以在構(gòu)圖中創(chuàng)造統(tǒng)一性，強(qiáng)化品牌形象或加強(qiáng)設(shè)計(jì)的視覺(jué)敘事。想想在不同房間的瓷磚上使用相同的圖案如何創(chuàng)造一種可預(yù)測(cè)感，使家更加舒適和一致。

14. 接近

• 我們的最終設(shè)計(jì)原則是接近性，這與元素的分組方式有關(guān)。它涉及將彼此相連的元素放置在彼此附近，創(chuàng)建視覺(jué)關(guān)系并改善設(shè)計(jì)的組織和清晰度。鄰近有助于引導(dǎo)觀看者理解合成不同部分之間的關(guān)系。這也是格式塔理論的一個(gè)基本原則。

設(shè)計(jì)原則常見(jiàn)問(wèn)題解答

設(shè)計(jì)的主要原則是什么？

設(shè)計(jì)的主要原則是平衡、對(duì)比、強(qiáng)調(diào)、統(tǒng)一、節(jié)奏和比例。實(shí)現(xiàn)視覺(jué)和諧包括均勻分布元素（平衡）、通過(guò)差異創(chuàng)造視覺(jué)興趣（對(duì)比）、突出焦點(diǎn)（強(qiáng)調(diào)）、確保連貫性和一致性（統(tǒng)一）、建立視覺(jué)流動(dòng)（節(jié)奏）以及保持元素之間的比例關(guān)系。堅(jiān)持這些原則可以提高設(shè)計(jì)在各種媒介（包括藝術(shù)和網(wǎng)站設(shè)計(jì)）中的審美吸引力和有效性。

設(shè)計(jì)原則：定義

設(shè)計(jì)原則是管理藝術(shù)、平面設(shè)計(jì)和其他創(chuàng)意學(xué)科中視覺(jué)元素的安排和組織的基本準(zhǔn)則。遵循這些原則有助于藝術(shù)家和設(shè)計(jì)師創(chuàng)造出美觀且有效的構(gòu)圖，促進(jìn)視覺(jué)和諧和交流。