在網頁設計中如何排版

可以說，排版是ui設計中最難的部分。在這篇文章中，我會教你一些實用的技巧，你可以在你的專案中使用。

我們應該記住，除了美學，我們還有使用者。

你需要使用的字型要靈活。你的字型應該提供粗細不同的寬度。注意這些方面是很重要的，好的排版對讀者來說是「透明」的，但壞的就會讓人從顯示器上「尖叫」出來。

了解什麼字型是讓人最易讀的，整體看起來最簡潔大方的，我們就應該選擇什麼樣的字型來排版。

易讀性是衡量在乙個特定字型中區分乙個字母和另乙個字母的方式。它是微型字型，專注於字型、字母和細節。自然，這是最重要的因素之一。並非所有字型都是以可辨認性作為主要設計功能而建立的。最常見的問題是沒有區分大寫字母l和小寫字母l。你需要避免這種字型，因為人們在小的顯示器上閱讀時會遇到問題。

1.高度

我們讀的95%的字母都是小寫字母。大寫字母和小寫字母之間的字母比例越大，字型越容易辨認。

2.計數器

字母也需要有空間。例如，看「o」「u」「d」。這些空間被計數器和排版專業人士認為，在計數器中能幫助我們更容易識別字母。

3.寬度

較細的字型通常比較寬的字型更容易辨認。

4.寬比例

字母的寬度與其高度的關係稱為比例。最佳筆劃寬度約為高度的18%。

5.字母間距

沒有計算字母間距的最終方法，但大多數時候，你所需要的字母間距越大，文字大小越大。字型將顯得過於開放，需要手動調整間距。對於ui設計，它通常適用於頁首。

可讀性是關於整體閱讀的體驗。我們如何容易地掃瞄文字布局，區分標題，副標題，段落和塊。它的巨集觀排版，是使文字更具視覺吸引力，以使其更令人鼓舞的閱讀。這是一種關於對比、色彩、大小、構圖和小細節的藝術，可以給讀者帶來更好的閱讀體驗。

1.有襯線字型與無襯線字型

歷史告訴我們，襯線更容易辨認。他們在印刷中使用了很長一段時間，他們真的提高閱讀經驗的大塊文字。襯線允許眼睛在文字上更容易地流動。

但是這有幾個沒有襯線的設計是可讀的，當前的視覺設計狀態更喜歡簡單的字母表單。在網路上，特別是在手機上，我們看到的是更多的沒有襯線的設計，這樣的設計使人看起來更簡潔。

當然這也取決於你的專案和使用者。例如，在**上，因為大部分時間你會讀很長的文字。有襯線這是乙個很好的設計方法。

2.**比例高度

可以使用**比例的高度。

把你的文字大小乘以1.618，你就能得到完美的線條高度。

小的計算，可以用--jsbi.com/todidu/1/*

如果你很有經驗，那麼你可以手動調整這個結果。當然，這個規則也有例外，如果必要的話，你總是可以打破它。

（左圖為**比例的高度）

3.文字的間距

為了激勵讀者，讓他們參與，你的文字行應該在50到75個字元之間。

4.顏色

它將比使用普通的#ccc更具吸引力和獨特性。讓你的視覺效果更好。

5.留白

這是乙個重要的話題，有許多書籍和雜誌，要涉及到排版時，都需要記住這一點：

留白的基本作用是減少文字訪問者一次看到的數量。

這使得我們的布局更具可掃瞄性，它不會使我們的內容超載。留空間引導我們的眼睛通過布局，創造秩序，優雅的感覺。

6.層次分明

層次結構定義了讀者如何讀取內容。它告訴我們如何區分標題和副標題和正文。我們可以通過使用不同的對比度、文字大小、間距等來實現這一點。這是乙個重要的技巧，需要掌握，以達到良好的可讀性。

「藝術的偉大不在於發現什麼是共同的，而在於什麼是獨特的。」（isaac basvenis）辛格（1904—1991）

如果你想學習更多關於網頁前端設計的技巧，網頁排版的知識可以去學習一下《歐美範網頁設計實戰課程》，如果你沒有ps基礎可以去學習一下《ps網頁前端設計基礎》你將會有更多的收穫~