在談論設計時,我們需要從設計師的角度考慮文字。文字必須清晰可讀,同時適合網站的風格。但它也必須與內容的層次結構相關。

  構建層次結構是網站組成的 “大局” 。但是當您轉向排版時,您還必須建立與頁面上特定文字相關的層次結構。在這篇文章中,我們將解釋如何使用標題建立關係,以及如何使用空格來使冗長的段落視覺化。製作 WordPress 網站網頁最佳實踐:極簡主義排版。

  標題和間距

  Web 內容通常只關注幾個不同的文字元素。標題範圍從 H1-H6,但大多數網站最多隻使用 H1-H4 。無論使用多少標題樣式,作為一個設計師,他們的工作,以使層次結構清晰建立。

  文字之間的空格很重要,因為它有助於定義頁面內容本身。當多用户找到新標題時,他們希望能夠識別內容是否切換到全新主題,或者是否在現有主題內。標題文字的大小,顏色和樣式的正確組合有助於為多用户創造正確的期望。

  文字之間的空白表示頁面內容如何相關。具有大量空間的標題被視為更顯著,而靠近段落的標題被視為通過上下文相關。段落後的底部邊距顯示文字行與它們在層次結構中所處的位置之間的關係。這一切都涉及到製作內容的層次結構,以在視覺上區分頁面上的文字。跨飛獨立站,專業 WordPress 外貿獨立站網站建設、 WordPress 站羣網站優化、 logo 設計、品牌設計、印刷等產品服務,新上線企業 VI 設計套餐和 WordPress 站羣網站營銷推廣系統(強),歡迎新老顧客前來諮詢!

  標題關係

  每個標題應該反映它自己獨特的風格,這也補充了頁面上的其他樣式的文字。製作精采標題通過練習變得更容易,但是空格值通常應該相同,不管標題樣式。

  Square 使用傳統的初始首頁佈局,包含大量影像和文字塊。標題是設計的一個特別有趣的部分,因為它們的範圍從超大到無窮小。然而,大小並不像頁面上與其他文字的關係那麼重要。

  請注意,在上面的屏幕截圖中,大標題如何在文字上方和下方使用額外的間距。這些部分標題在視覺上傳達了 “自己” 的感覺,但也自然地組合成更大的副標題和段落的塊。

  每個內部塊使用小得多的子標題文字。這些內部頭部與段落文字大小相同,但它們以粗體文字和較深的顏色突出顯示。視覺上,這些粗體的文字行仍然是標題(只是在視覺圖騰柱上較低)是非常清楚的。

  標題和段落之間的空間量還定義哪些段落屬於哪些標題。同樣,您應該在較小的頭部和較大的頭部之間插入大量的空間。再次,負空間在視覺設計和排版中定義層次。

  文字清晰可讀

  通過使用空間,大小,顏色和/或文字樣式,可以看到視覺層次結構。即使站在距離顯示器 3-5 英尺的位置,這應該是可見的。您還可以使用 5 秒高斯模糊測試來檢查層次結構。

  嘗試設計足夠大的文字,使其清晰可讀的距離屏幕 3 英尺。文字大小非常類似於白色空間,通常更好地設計大於較小。然而,運動温和和剋制。如果文字大小太大,則會佔用更多的屏幕空間,需要更多的滾動。但如果它太小,它可能是不可讀的,或訪問者將遇到困難與垂直節奏,因為他們移動他們的眼睛從線到線。

  要記住的兩個重要的事情是段落邊距和行高(每行之間的空格)。段落中的文字大小決定了這兩個值,因為空白區域取決於大小。