做ui設計的朋友們，你們一定在設計中碰到排版的吧，根據我的經驗，排版是UI設計中最難的部分。它們存在於各種形式並與我們相處了很長的時間。還好我們有許多規則、實踐方式與理論可以幫助那些比較難跟上的人。在這篇文章中，我將給你幾個實用的提示和技巧讓你可以在項目設計中使用。
超越理論的實際案例
雖然排版是一個非常吸引人的主題，但我不會用太理論的東西來煩你。也不會解析字母和連字等等關係，以下我們將直接進入練習。
想想使用者
我們應該記住美學之外我們還有使用者。你正在設計的應用不僅運行在iPhone X上，而是有更多不同的設備…
所以你使用的字體必須靈活。你的字體應該提供各種粗細變化、在特殊符號中的寬度範圍，它也必須要渲染地非常好。必須要注意這些方面，確保你的用戶不會因你的無知而受苦。好的排版對觀看者來說是“沒有感覺”的，而不好的排版呈現在屏幕中則會感到非常可怕。
瞭解是什麼原因讓字母可讀性更高，可以讓我們更好的去反省我們應該為我們的界面選擇什麼樣的字體。
一、易辨性(Legibility)
易辨性是我們可以多輕易在一個字體中區分兩個字母。這是非常專注在字體、字母與細節的細微排版。當然，這也是最重要的因素之一。不是所有的字體當初被設計出來都是都是容易閱讀的。最常見的問題是大寫的字母“I”和小寫的“L”之間沒什麼區別。你必須避免這種字體，因為如果使用者在小屏幕上閱讀可能會出問題。
X高(X-height)
我們讀的字母有95％是小寫字母。大小寫字母之間比例上越大的字體可讀性更高。
字腔(Counters)
我們的字母中還有許多空白。例如看看o、u、d。這些空間被稱為字腔，排版專家相信這個空間越大可以幫助我們更容易分辨這個字母。
粗細(Weight)
細的字體通常比較粗的類型的字體更易辨認。粗細和字腔有關，必須考慮到不能去修改文字的形狀。
哪一個更容易閱讀？
最佳文字筆劃粗細約為x-height的18％。
寬比例(Wide Proportion)
字符的寬度相較於它的高度被稱為比例。一般來說，比起壓縮過的字母，你會想要較寬的字母，因為它有更好的易讀性。
第一眼的差別是很微小的
字距(Letter spacing)
沒有一個根本的方式來計算字母的間距，但大多數時候越大的文字大小需要更小的字距。字型有時顯得太開所以你必須要手動調整間距。對UI設計來說它通常出現在標題時。
再說一次，其實差異非常微小
二、易讀性(Readability)
易讀性關乎於整體的閱讀體驗。我們可以輕鬆掃視文字編排、區分標題、副標題、段落和區塊。這樣的宏觀排版使文字更具視覺吸引力，也令人更想去閱讀。這真的是一門藝術，利用對比、顏色、大小、構圖和微小的細節成就更好的閱讀體驗。
襯線字(Serif)對上非襯線字(Sans Serif)
歷史告訴我們襯線字更易於辨識。他們在傳統印刷中使用了很長的時間，同時也真的提高了大型區塊文字的閱讀體驗。襯線字讓我們的視線更容易穿梭於文字間。
但這個原則在網頁和手機上則是不一樣的。其實有些無襯線字體也是很容易閱讀的，且目前視覺設計來說更喜歡簡單無裝飾的字體。在網頁瀏覽特別是手機上，我們其實可以看到更多的無襯線字體。而且螢幕顯示器並不是一張紙，通常我們不會在網絡上閱讀很長的文章，而在app中更是如此。
在twitter中沒有半個襯線字，但在Medium中有襯線字卻很合理
但這一切都取決於你的項目內容，以及用戶會如何使用您的內容。例如在Medium上我們使用的是襯線字，因為大多數時候你會在Medium上讀很長的文章，所以這是一個不錯的設計方法。
行高(Line height)
當講到行距時我非常建議使用黃金比例。
將你的字母大小乘以1.618，你將會得到完美的行高。
如果你是有經驗的老手的話，你可以手動調整這個結果。當然，這個規則也有例外，如果必要的話你隨時可以打破這個規格。
都是微小的差別，但卻大大影響我們的可讀性
文字區塊的寬度
這就像我們在走在薄冰上。太寬的對於文字區塊會讓我們的眼睛很難找到下一行文字。但如果太窄的話，眼睛將需要從一條線跳到另一條線，這樣會經常打破閱讀節奏。我們的潛意識在跳至下一行時會充滿活力(只要它不那麼頻繁)。
為了激勵讀者並讓他們持續閱讀，你的每行文字長度應該有50到75個字符。
顏色
這當然取決於你的項目，但在這裡我想分享一個技巧。用下面的方式選擇你的主要顏色來取代純灰色(或黑色)：
看粉紅三角形的區塊
這樣會比使用常見的#CCC更獨特且更有吸引力。這些小細節將會讓你的視覺體驗更好。
留白空間
這在滿多的書籍和出版物中是一個滿大的議題，但是當涉及到排版的話你需要記住這一點：
留白的基本作用是減少讓閱讀者一次看到這麼多數量的文字
這讓我們的版面佈局更容易快速掃視，並且不會讓我們的內容負擔太重。白色的空間引導我們的眼睛穿梭在佈局中並且創造規則、精細和優雅的感覺。
層級(Hierarchy)
層級關係定義了我們如何閱讀內容。它告訴我們如何區分標題、副標題和正文。我們可以透過使用不同的對比度、文字大小、內間距、外間距等來實現這一點。我們必須掌握這一個重要的技巧以獲得良好的可讀性。
注意細節，日期的顏色和描述的顏色不同，但是一開始很難看出區別。
分隔器(Separators)
將內容分成幾個部分的好方法是使用分隔器。目前最流行的是簡單的一條線。它是個微小的方式但仍在可讀性方面發揮重要的作用。
另一種方式是現在非常流行的卡片式設計。這個方式當內容不相關的時候使用真的很棒。對於常常用大拇指使用手機來說非常的棒，而且也讓我們方便掃視整個佈局。
重複和節奏
這是UI設計中最耗時的部分。任何重複的元素可以提供一致性，重複的部分可以是位置、文字大小、顏色、內距、外距，一些規則的使用等等。例如我通常讓內距/外距的大小為5，所以它看起來會更一致(這是我的規則之一)，「重複」將產生「節奏」。
三、結論
學習排版技巧可以比作是一個迷人的旅程，而且當你的的技能開始進步之後，結果是讓人非常滿意的。這個技能不是從閱讀本篇文章就能獲得，而是需要不斷學習和不斷的動手練習。所以打開你的Sketch或者Photoshop，動手開始創造一些超棒的作品吧！
閱讀更多 UI巴巴 的文章
