在網頁設計中如何排版

能夠說，排版是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網頁前端設計基礎》你將會有更多的收穫~