做ui設(shè)計(jì)的朋友們，你們一定在設(shè)計(jì)中碰到排版的吧，根據(jù)我的經(jīng)驗(yàn)，排版是UI設(shè)計(jì)中最難的部分。它們存在于各種形式并與我們相處了很長(zhǎng)的時(shí)間。還好我們有許多規(guī)則、實(shí)踐方式與理論可以幫助那些比較難跟上的人。在這篇文章中，我將給你幾個(gè)實(shí)用的提示和技巧讓你可以在項(xiàng)目設(shè)計(jì)中使用。

超越理論的實(shí)際案例

雖然排版是一個(gè)非常吸引人的主題，但我不會(huì)用太理論的東西來(lái)煩你。也不會(huì)解析字母和連字等等關(guān)系，以下我們將直接進(jìn)入練習(xí)。

想想使用者

我們應(yīng)該記住美學(xué)之外我們還有使用者。你正在設(shè)計(jì)的應(yīng)用不僅運(yùn)行在iPhone X上，而是有更多不同的設(shè)備…

所以你使用的字體必須靈活。你的字體應(yīng)該提供各種粗細(xì)變化、在特殊符號(hào)中的寬度范圍，它也必須要渲染地非常好。必須要注意這些方面，確保你的用戶不會(huì)因你的無(wú)知而受苦。好的排版對(duì)觀看者來(lái)說(shuō)是“沒(méi)有感覺(jué)”的，而不好的排版呈現(xiàn)在屏幕中則會(huì)感到非常可怕。

了解是什么原因讓字母可讀性更高，可以讓我們更好的去反省我們應(yīng)該為我們的界面選擇什么樣的字體。

一、易辨性(Legibility)

易辨性是我們可以多輕易在一個(gè)字體中區(qū)分兩個(gè)字母。這是非常專注在字體、字母與細(xì)節(jié)的細(xì)微排版。當(dāng)然，這也是最重要的因素之一。不是所有的字體當(dāng)初被設(shè)計(jì)出來(lái)都是都是容易閱讀的。最常見(jiàn)的問(wèn)題是大寫的字母“I”和小寫的“L”之間沒(méi)什么區(qū)別。你必須避免這種字體，因?yàn)槿绻褂谜咴谛∑聊簧祥喿x可能會(huì)出問(wèn)題。

X高(X-height)

我們讀的字母有95％是小寫字母。大小寫字母之間比例上越大的字體可讀性更高。

字腔(Counters)

我們的字母中還有許多空白。例如看看o、u、d。這些空間被稱為字腔，排版專家相信這個(gè)空間越大可以幫助我們更容易分辨這個(gè)字母。

粗細(xì)(Weight)

細(xì)的字體通常比較粗的類型的字體更易辨認(rèn)。粗細(xì)和字腔有關(guān)，必須考慮到不能去修改文字的形狀。

哪一個(gè)更容易閱讀？

最佳文字筆劃粗細(xì)約為x-height的18％。

寬比例(Wide Proportion)

字符的寬度相較于它的高度被稱為比例。一般來(lái)說(shuō)，比起壓縮過(guò)的字母，你會(huì)想要較寬的字母，因?yàn)樗懈玫囊鬃x性。

第一眼的差別是很微小的

字距(Letter spacing)

沒(méi)有一個(gè)根本的方式來(lái)計(jì)算字母的間距，但大多數(shù)時(shí)候越大的文字大小需要更小的字距。字型有時(shí)顯得太開(kāi)所以你必須要手動(dòng)調(diào)整間距。對(duì)UI設(shè)計(jì)來(lái)說(shuō)它通常出現(xiàn)在標(biāo)題時(shí)。

再說(shuō)一次，其實(shí)差異非常微小

二、易讀性(Readability)

易讀性關(guān)乎于整體的閱讀體驗(yàn)。我們可以輕松掃視文字編排、區(qū)分標(biāo)題、副標(biāo)題、段落和區(qū)塊。這樣的宏觀排版使文字更具視覺(jué)吸引力，也令人更想去閱讀。這真的是一門藝術(shù)，利用對(duì)比、顏色、大小、構(gòu)圖和微小的細(xì)節(jié)成就更好的閱讀體驗(yàn)。

襯線字(Serif)對(duì)上非襯線字(Sans Serif)

歷史告訴我們襯線字更易于辨識(shí)。他們?cè)趥鹘y(tǒng)印刷中使用了很長(zhǎng)的時(shí)間，同時(shí)也真的提高了大型區(qū)塊文字的閱讀體驗(yàn)。襯線字讓我們的視線更容易穿梭于文字間。

但這個(gè)原則在網(wǎng)頁(yè)和手機(jī)上則是不一樣的。其實(shí)有些無(wú)襯線字體也是很容易閱讀的，且目前視覺(jué)設(shè)計(jì)來(lái)說(shuō)更喜歡簡(jiǎn)單無(wú)裝飾的字體。在網(wǎng)頁(yè)瀏覽特別是手機(jī)上，我們其實(shí)可以看到更多的無(wú)襯線字體。而且螢?zāi)伙@示器并不是一張紙，通常我們不會(huì)在網(wǎng)絡(luò)上閱讀很長(zhǎng)的文章，而在app中更是如此。

在twitter中沒(méi)有半個(gè)襯線字，但在Medium中有襯線字卻很合理

但這一切都取決于你的項(xiàng)目?jī)?nèi)容，以及用戶會(huì)如何使用您的內(nèi)容。例如在Medium上我們使用的是襯線字，因?yàn)榇蠖鄶?shù)時(shí)候你會(huì)在Medium上讀很長(zhǎng)的文章，所以這是一個(gè)不錯(cuò)的設(shè)計(jì)方法。

行高(Line height)

當(dāng)講到行距時(shí)我非常建議使用黃金比例。

將你的字母大小乘以1.618，你將會(huì)得到完美的行高。

如果你是有經(jīng)驗(yàn)的老手的話，你可以手動(dòng)調(diào)整這個(gè)結(jié)果。當(dāng)然，這個(gè)規(guī)則也有例外，如果必要的話你隨時(shí)可以打破這個(gè)規(guī)格。

都是微小的差別，但卻大大影響我們的可讀性

文字區(qū)塊的寬度

這就像我們?cè)谧咴诒”?。太寬的?duì)于文字區(qū)塊會(huì)讓我們的眼睛很難找到下一行文字。但如果太窄的話，眼睛將需要從一條線跳到另一條線，這樣會(huì)經(jīng)常打破閱讀節(jié)奏。我們的潛意識(shí)在跳至下一行時(shí)會(huì)充滿活力(只要它不那么頻繁)。

為了激勵(lì)讀者并讓他們持續(xù)閱讀，你的每行文字長(zhǎng)度應(yīng)該有50到75個(gè)字符。

顏色

這當(dāng)然取決于你的項(xiàng)目，但在這里我想分享一個(gè)技巧。用下面的方式選擇你的主要顏色來(lái)取代純灰色(或黑色)：

看粉紅三角形的區(qū)塊

這樣會(huì)比使用常見(jiàn)的#CCC更獨(dú)特且更有吸引力。這些小細(xì)節(jié)將會(huì)讓你的視覺(jué)體驗(yàn)更好。

留白空間

這在滿多的書籍和出版物中是一個(gè)滿大的議題，但是當(dāng)涉及到排版的話你需要記住這一點(diǎn)：

留白的基本作用是減少讓閱讀者一次看到這么多數(shù)量的文字

這讓我們的版面布局更容易快速掃視，并且不會(huì)讓我們的內(nèi)容負(fù)擔(dān)太重。白色的空間引導(dǎo)我們的眼睛穿梭在布局中并且創(chuàng)造規(guī)則、精細(xì)和優(yōu)雅的感覺(jué)。

層級(jí)(Hierarchy)

層級(jí)關(guān)系定義了我們?nèi)绾伍喿x內(nèi)容。它告訴我們?nèi)绾螀^(qū)分標(biāo)題、副標(biāo)題和正文。我們可以透過(guò)使用不同的對(duì)比度、文字大小、內(nèi)間距、外間距等來(lái)實(shí)現(xiàn)這一點(diǎn)。我們必須掌握這一個(gè)重要的技巧以獲得良好的可讀性。

注意細(xì)節(jié)，日期的顏色和描述的顏色不同，但是一開(kāi)始很難看出區(qū)別。

分隔器(Separators)

將內(nèi)容分成幾個(gè)部分的好方法是使用分隔器。目前最流行的是簡(jiǎn)單的一條線。它是個(gè)微小的方式但仍在可讀性方面發(fā)揮重要的作用。

另一種方式是現(xiàn)在非常流行的卡片式設(shè)計(jì)。這個(gè)方式當(dāng)內(nèi)容不相關(guān)的時(shí)候使用真的很棒。對(duì)于常常用大拇指使用手機(jī)來(lái)說(shuō)非常的棒，而且也讓我們方便掃視整個(gè)布局。

重復(fù)和節(jié)奏

這是UI設(shè)計(jì)中最耗時(shí)的部分。任何重復(fù)的元素可以提供一致性，重復(fù)的部分可以是位置、文字大小、顏色、內(nèi)距、外距，一些規(guī)則的使用等等。例如我通常讓內(nèi)距/外距的大小為5，所以它看起來(lái)會(huì)更一致(這是我的規(guī)則之一)，「重復(fù)」將產(chǎn)生「節(jié)奏」。

三、結(jié)論

學(xué)習(xí)排版技巧可以比作是一個(gè)迷人的旅程，而且當(dāng)你的的技能開(kāi)始進(jìn)步之后，結(jié)果是讓人非常滿意的。這個(gè)技能不是從閱讀本篇文章就能獲得，而是需要不斷學(xué)習(xí)和不斷的動(dòng)手練習(xí)。所以打開(kāi)你的Sketch或者Photoshop，動(dòng)手開(kāi)始創(chuàng)造一些超棒的作品吧！