設計原則及其重要性

已發表: 2022-03-11

收聽本文的音頻版本

談論設計原則最困難的部分之一是弄清楚實際上有多少原則(有五個?七個?10個?)。 一旦弄清楚了,應該包括哪些假定的設計基礎?

搜索“設計原則”,Google 將返回包含五到十多個獨立原則的文章的結果。 即使是同意該數字的文章也不一定同意該數字應包括哪些文章。

實際上,初學者和專業設計師在開展項目時應該牢記大約十幾個基本的設計原則。 此外,還有十幾個“次要”設計原則有時被包括為基本原則(例如,格式塔原則、排版、顏色和框架)。 下面解釋和說明主要的設計原則。

基本設計原則

如前所述,設計界對於設計的主要原則實際上是什麼並沒有真正的共識。 也就是說,以下十二項原則是有關該主題的文章和書籍中最常提及的原則。

對比

設計師對客戶反饋最常見的抱怨之一通常圍繞著客戶說設計需要“流行”更多。 雖然這聽起來像是一個完全武斷的術語,但客戶通常的意思是設計需要更多的對比。

對比度是指設計中不同元素的差異,尤其是相鄰元素。 這些差異使各種元素脫穎而出。 對比度也是創建可訪問設計的一個非常重要的方面。 對比度不足會使文本內容特別難以閱讀,尤其是對於有視覺障礙的人。

對比度是基本設計原則之一
Parabola 的網站是高對比度設計的一個很好的例子。

平衡

設計的每一個元素——排版、顏色、圖像、形狀、圖案等——都具有視覺重量。 有些元素很重並吸引眼球,而另一些元素則較輕。 這些元素在頁面上的佈局方式應該創造一種平衡的感覺。

平衡有兩種基本類型:對稱和不對稱。 對稱設計在假想中心線的兩側佈置等重的元素。 不對稱平衡使用不同權重的元素,通常相對於整體設計中未居中的線條進行佈局。

設計基礎:平衡
稍微偏離中心的佈局在 The Nue Co 網站上的粗體圖像和極簡版式之間取得了平衡。

重點

重點處理設計中旨在脫穎而出的部分。 在大多數情況下,這意味著設計要傳達的最重要的信息。

強調基本設計原則在行動
Clique 的超大字體清楚地強調了它的標語。

強調也可以用來減少某些信息的影響。 這在“精美印刷”用於設計中的輔助信息的情況下最為明顯。 隱藏在頁面底部的微小排版比設計中的幾乎任何其他內容都輕得多,因此不被強調。

部分

比例是更容易理解的設計原則之一。 簡而言之,它是元素相對於彼此的大小。 比例表示設計中什麼是重要的,什麼不是。 較大的元素更重要,較小的元素較少。

比例是設計元素和原則的重要組成部分
小字體和大圖像之間的比例差異清楚地描繪了 Collin Hughes 網站上最重要的元素。

等級制度

層次結構是另一個設計原則,它直接關係到使用網站的人對內容的處理能力。 它指的是設計中元素的重要性。 最重要的元素(或內容)應該看起來是最重要的。

設計基礎:層次結構
Grafill 的網站通過使用佈局(最重要的部分在頂部)、大小(更重要的內容更大)和排版(標題大於正文)來創建層次結構。

層次結構最容易通過在設計中使用標題和標題來說明。 頁面的標題應該是最重要的,因此應該立即被識別為頁面上最重要的元素。 標題和副標題的格式應顯示它們相互之間以及與標題和正文相關的重要性。

訂閱 Toptal 設計博客並接收我們的電子書

重複

重複是強化想法的好方法。 這也是統一設計的好方法,該設計匯集了許多不同的元素。 重複可以通過多種方式完成:通過重複相同的顏色、字體、形狀或設計的其他元素。

例如,這篇文章在標題的格式中使用了重複。 每個設計原則的格式都與本節中的其他設計原則相同,向讀者表明它們都同等重要並且它們都是相關的。 一致的標題統一了整個頁面的這些元素。

重複是設計的重要原則
Type and Pixel 網站左側的圖像是設計重複的一個很好的例子。

韻律

重複元素之間的空間可以形成節奏感,類似於樂曲中音符之間的空間創造節奏的方式。 設計師可以創建五種基本類型的視覺節奏:隨機、規則、交替、流動和漸進。

隨機節奏沒有可辨別的模式。 規則的節奏在每個元素之間遵循相同的間距,沒有變化。 交替節奏遵循重複的設定模式,但實際元素之間存在差異(例如 1-2-3-1-2-3 模式)。 流動的節奏跟隨彎曲和曲線,類似於沙丘起伏或波浪流動的方式。 漸進式節奏隨著它們的進行而變化,每次變化都會增加之前的迭代。

基本設計原則:節奏
TheArtCenter網站背景中形狀之間的不規則間距創造了隨機的節奏。

節奏可以用來創造許多感覺。 他們可以創造興奮(特別是流暢和漸進的節奏)或創造安心和一致性。 這完全取決於它們的實施方式。

圖案

模式只不過是多個設計元素協同工作的重複。 牆紙圖案是幾乎每個人都熟悉的圖案中最普遍的例子。

然而,在設計中,模式也可以指為某些元素的設計方式設定的標準。 例如,頂部導航是大多數互聯網用戶與之交互的設計模式。

設計原則:圖案
頂部導航是互聯網上最普遍的設計模式之一,在 Isabelle Fox 的網站上進行了說明。

白色空間

白色空間——也稱為“負空間”——是不包含任何設計元素的設計區域。 這個空間實際上是空的。

許多新手設計師覺得有必要用某種“設計”來包裝每個像素,而忽略了留白的價值。 但是白色空間在設計中有許多重要的用途,最重要的是讓設計空間的元素可以呼吸。 負空間還可以幫助突出設計的特定內容或特定部分。

它還可以使設計元素更容易辨別。 這就是為什麼使用大寫和小寫字母時排版更易讀的原因,因為小寫字母周圍的負空間更加多樣化,這使人們可以更快地解釋它們。

留白是最重要的基本設計原則之一
空白空間為 Jan Behne 網站空間的簡單文本和插圖內容提供了“呼吸”,同時有助於極簡主義美學。

在某些情況下,負空間用於創建觀眾可能不會立即看到的次要圖像。 這可能是品牌推廣的重要組成部分,可以取悅客戶。 僅以 FedEx 徽標中的隱藏箭頭為例。

FedEx 標誌使用設計基本的白色空間來創建一個隱藏的箭頭。

移動

運動是指眼睛在設計上移動的方式。 最重要的元素應該導致下一個最重要的元素,依此類推。 這是通過定位(眼睛自然首先落在設計的某些區域)、重點和其他已經提到的設計元素來完成的。

運動是設計的基礎
傾斜的圖像和數字有助於 Abby Stolfo 網站上的運動原理。

種類

設計的多樣性用於創造視覺興趣。 沒有多樣性,設計很快就會變得單調,導致用戶失去興趣。 可以通過顏色、排版、圖像、形狀和幾乎任何其他設計元素以多種方式創建多樣性。

然而,為了多樣化而多樣化是沒有意義的。 多樣性應該加強設計的其他元素,並與它們一起使用,以創造更有趣和更美觀的結果,從而改善用戶體驗。

多樣性是重要的基本設計原則
Kennard Lilly 的網站背景使用各種顏色和形狀來創造興趣,同時也強調主要的文本內容。

統一

每個人都見過一個網站或其他設計,似乎只是在頁面上放置元素,而不考慮它們如何協同工作。 幾乎立刻就會想到使用十種不同字體的報紙廣告。

統一性是指設計元素協同工作的程度。 視覺元素在設計中應該有明確的相互關係。 Unity 還有助於確保以清晰、連貫的方式傳達概念。 與統一性差的設計相比,具有良好統一性的設計似乎更有條理,質量和權威性更高。

設計原則:統一
在整個設計中使用藍色(包括圖像上的藍色覆蓋層),以及一致的排版和比例,在設計中營造出一種統一感。

其他設計原則

有關該主題的各種文章也涉及其他設計原則。 這些包括排版、顏色、格式塔原則、網格和對齊、框架和形狀。 有些絕對符合“原則”的定義,而另一些則更像是設計元素。

排版是指文本在設計中的排列方式。 這包括使用的字體、它們的間距、大小和粗細,以及不同文本元素相互關聯的方式。 良好的排版設計深受本文前面提到的所有其他設計原則的影響。

在設計中使用顏色是設計中最重要的心理部分之一,對用戶體驗有巨大的影響。 色彩心理學和理論嚴重影響了前面提到的其他一些原則。

格式塔原則包括相似性、連續性、閉合性、接近性、圖形/背景以及對稱和順序(也稱為 pragnanz)。 其中一些原則與上述原則密切相關。

網格和對齊與平衡密切相關,是指元素相對於頁面上不可見網格的排列方式。

框架是指設計的主要主題如何與頁面上的其他元素相關。 在電影攝影或攝影中最常聽到的是圖像的主要焦點如何放置在整體圖像中。 但該原則延續到設計中。

形狀也是任何設計的主要部分,無論是在設計中用作元素的特定形狀,還是設計本身的整體形狀。 不同的形狀可以喚起不同的感覺,即圓形是有機的和流動的,而正方形則更加僵硬和正式,而三角形則給人一種能量或運動的感覺。

這些設計“原則”或元素是良好設計的重要方面,應與其他基本原則一起考慮,以創造最佳用戶體驗。

結論

什麼構成了設計的“基本”原則,當然還有待商榷。 但是理解和實施上述原則對於任何設計項目的成功都是至關重要的。

設計師應該致力於了解這些設計原則中的每一個如何實際影響他們的工作。 研究其他設計師如何實施這些想法來構建自己的設計也是學習創造更好設計的非常有價值的工具。

如果不徹底了解這些元素和設計原則,完全有可能創造出好的設計。 然而,它通常是由“設計師的直覺”完成的,並且可能需要大量的試驗和錯誤才能創造出真正看起來不錯的東西並創造最佳的用戶體驗。 設計師可以通過實踐我們討論過的原則,直到它們成為第二天性,從而節省大量時間和精力。

•••

進一步閱讀 Toptal 設計博客:

  • 設計原則:層次結構介紹
  • 使用這些成功的交互設計原則提升您的用戶體驗
  • 探索完形設計原則
  • 有說服力的設計:有效地使用高級心理學
  • 終極用戶體驗鉤子——用戶體驗中的預期性、說服性和情感設計