如何構建有效的排版層次結構

有效地組織設計中的內容，使其易於理解和使用是設計師最重要的工作之一。 而且由於設計師使用的大部分內容都是基於文本的，因此創建有效的排版層次結構是設計師可以學習的最重要的事情之一。

雖然練習和嘗試創建有效的層次結構是真正掌握技能的最佳方式，但設計師應該先學習一些指導方針，然後再自行著手。 畢竟，如果不先了解規則是什麼，就不可能有效地打破規則。

什麼是排版層次結構？

初學者有時會低估使用排版層次結構的必要性。 然而看看這個例子：

雙方都在傳達相同的信息，但在左側，無法分辨出有標題、子標題和正文。 在右側，很明顯，所提供的信息存在層次結構。

排版層次結構向讀者展示了要關注哪些信息——哪些是最重要的，哪些只是支持要點。

有各種各樣的東西構成了網絡上的排版層次結構。 這些包括：

尺寸。 大小通常是新設計師在嘗試創建排版層次結構時首先考慮的問題。 並且有充分的理由：讀者可以立即、輕鬆地識別它。 更大 = 更重要，更小 = 不那麼重要。 但是當有這麼多其他選項來創建層次結構時，大小可能會成為一個拐杖。

重量。 使字體更粗或更細是另一種易於識別的創建層次結構的方法，即使非設計師也很容易識別。

顏色。 作為創建層次結構的一種方式，顏色經常被忽視，但它是一個很棒的選擇。 即使使用給定顏色的較淺和較深的陰影也可以創建更明顯的層次結構。 在類型和背景之間創建更多對比也可以增加排版層次結構。

對比。 除了對比色之外，不同字體大小、粗細和样式之間的對比也是創建排版層次結構的關鍵。 字體大小只有一兩個點的差異不會產生足夠的對比度，使大多數用戶可以清楚地看到層次結構。 相反，設計師應該使用易於區分的尺寸、重量和样式來輕鬆地在標題或正文等內容之間創建對比。

案子。 雖然從可讀性的角度來看，將正文文本大寫通常不是一個好主意，但在標題或副標題中使用大寫字符有助於區分不同的標題或其他類型。

位置和對齊。 標題和副標題的位置，以及設計師想要突出的其他類型，會對類型在層次結構中的位置產生很大影響。 例如，居中類型往往會使其脫穎而出。 在頁面的常規頁邊距之外設置類型也可以使該類型在頁面的層次結構中脫穎而出。

如何創建排版層次結構（並以視覺方式組織您的設計）

在創建排版層次結構時，設計師有很多選擇。 但僅僅知道創建層次結構的內容並不一定有助於設計師創建有效的層次結構。

首先要考慮的事情之一是設計應該有多少層次結構。 作為一般規則，每個設計都應包括三個層次結構：標題、副標題和正文。 從那裡開始，由設計師來考慮可能需要的其他級別。 這些可能包括標題、附加副標題、引語和元信息（例如文章的作者或日期）。

從那裡開始，關鍵是要弄清楚如何區分層次結構的不同部分。 不言而喻，但標題應該比副標題更突出，副標題應該比正文更突出。 標題通常應該不如正文那麼突出，而引語應該在正文和副標題之間。

類型 尺寸

存在傳統的印刷比例以幫助設計師入門。 但這只是一個起點，設計師應該在偏離這些傳統尺度的同時，隨意嘗試不同的重量和風格。 大多數基於正文的大小並從那裡擴展。

大多數設計師都熟悉The Elements of Typographic Style中的經典印刷比例，因為它們往往是大多數文字處理程序在選擇字體大小時提供的默認值。 規模是：

6、7、8、9、10、11、12、14、16、18、21、24、30、36、48、60 和 72。

還有其他印刷比例示例，它們遵循各種數學方程式來計算增加的尺寸。

設計人員傾向於默認為 12 磅正文大小，但將其增加到 14 或 16（甚至高達 24）可以提高可讀性，具體取決於所使用的字體。 例如，Jeffrey Zeldman 的個人網站使用 24px 字體大小作為正文，而 Vogue.com 使用 19px 正文大小。

不過，在最終確定實際比例之前，設計師應該確保設計中使用的字體已經最終確定。 即使在技術上“相同”大小時，不同的字體也會顯得更大或更小。

選擇協調字體

通常將“專業”設計與更業餘的努力區分開來的是字體的組合。 有效地組合字體部分是直覺，部分是科學，但設計師可以遵循一些指導方針來組合來自不同家族的字體。

首先，將襯線與無襯線混合比組合兩個襯線或兩個無襯線要容易得多。 但這並不像抓住任何襯線和任何無襯線那麼簡單，然後將它們放在一起設計。

考慮使用字體的上下文。 例如，如果設計應該是輕鬆有趣的，那麼請確保字體適合這種情緒。 如果設計更嚴肅，那麼字體應該反映這一點。 換句話說，組合的任何字體的情緒都應該匹配。

設計師也應該利用對比來發揮自己的優勢。 將細字體和粗字體組合在一起通常比將兩種重量非常相似的字體組合效果更好。

尋找具有相似 x 高度的字體（基線和字體中小寫字母的平均線之間的距離）。 這有助於防止字體之間的衝突。 其他有助於防止衝突的事情包括類似的字距調整和字符形狀。 非常圓的字體不應該與更多的方形字體結合使用。

雖然指南有助於創建字體組合，但沒有什麼能取代實驗和實踐。 設計師應該花時間嘗試字體並儘可能多地練習組合它們。 對於預算和可用資源不允許大量試驗和錯誤的項目，找到一些可以在各種環境中工作的備用字體組合也很有幫助。

有了這些指南，設計師可以按照網頁排版來源 Better Web Type 為創建有效組合而製定的四步流程：

1. 為您的主體文本找到錨字體
2. 為可能的組合找到一些輔助字體
3. 評估組合
4. 消除/選擇字體組合

其他注意事項

在選擇最終字體後嘗試不同的樣式和粗細可以創建額外的層次結構級別，而無需創建超大的主標題。 保持字體大小大致相同，但將更重要的標題設為粗體，同時將不太重要的標題設為斜體，從而創建明確的視覺層次結構。

顏色也可以這樣做。 強調色的副標題比與正文顏色相同的副標題更突出。 設計師應該在副標題中使用顏色來區分更重要的文本，而不是僅僅依賴字體大小。

間距也可用於將重要的標題和副標題分開。 在標題周圍創造更多空間，使它們從隨附的正文中脫穎而出，使它們更加突出。 相比之下，與正文間隔相同的副標題變得不那麼重要了。

甚至字符之間的間距也可用於創建層次結構。 分隔字符可以使特定的行更加突出。 當與這些字母大寫結合使用時，這尤其有效。 不過，設計師應該注意不要過度使用，因為如果過度使用它也會顯得很業餘。

結論

實驗和實踐是掌握排版層次結構的最佳方法，但學習這些指南將幫助設計師從正確的角度開始。 第一步是了解尺寸、顏色、間距、重量和其他因素如何影響有效的層次結構。

一旦在設計師的頭腦中（和實踐）建立了這些基礎知識，他們就可以更直觀地創建遵循或打破必要的“規則”的視覺層次結構，從而創造出獨特的設計，讓用戶受到啟發和愉悅。

• • •

進一步閱讀 Toptal 設計博客：

• 可讀性設計——網頁排版指南（附信息圖）
• 了解字體分類的細微差別
• 設計基礎——視覺層次結構指南（附信息圖）
• 網頁和印刷設計的字體樣式
• 通過清晰的視覺層次提升您的用戶體驗