基礎(chǔ)知識(shí)學(xué)起來！如何科學(xué)進(jìn)步UI界面的文本易讀性？

金蝶云之家體驗(yàn)部視覺設(shè)計(jì)師—丁珍：藝術(shù)是無依據(jù)可循的，但是筆墨排版卻是有依據(jù)可循的。

排版設(shè)計(jì)是UI設(shè)計(jì)師的基本功。但或許是由于它太基本了，許多時(shí)候許多設(shè)計(jì)師都會(huì)直接忽略它的存在，導(dǎo)致最后的實(shí)現(xiàn)結(jié)果不夠理想?；蛟S就是這些細(xì)節(jié)導(dǎo)致手中的產(chǎn)品看起來總是差那么一點(diǎn)點(diǎn)。尤其是對(duì)于一些看重閱讀體驗(yàn)的網(wǎng)頁來說，每一個(gè)細(xì)節(jié)都可能成為致命傷。

藝術(shù)是無依據(jù)可循的，但是筆墨排版卻是有依據(jù)可循的。下面就排版中的字體樣式、留白大小、對(duì)齊體例、色彩對(duì)比度四個(gè)要素來簡單談一談如何科學(xué)進(jìn)步移動(dòng)端文本的易讀性，提拔設(shè)計(jì)質(zhì)感。

大前提：明確設(shè)計(jì)目標(biāo)

所有的設(shè)計(jì)都必須在這個(gè)前提之下進(jìn)行。以下提到的數(shù)值只是一個(gè)參考，更緊張的是你想通過網(wǎng)頁傳遞給用戶的信息，明確設(shè)計(jì)目標(biāo)，以此對(duì)你的設(shè)計(jì)進(jìn)行調(diào)整。否則，設(shè)計(jì)的意義便不存在了。

字體大小

通過字體大小去凸顯內(nèi)容、區(qū)分層級(jí)是一種設(shè)計(jì)趨勢，同時(shí)也是ios11的設(shè)計(jì)思路之一。那么，如何去選擇字體的大小能達(dá)到比較好的結(jié)果呢？

material design對(duì)方塊字主題目和內(nèi)容筆墨的大小分別定為24sp和15sp，24/15=1.6，接近黃金比例；airbnb的主題目和內(nèi)容筆墨的比例同樣接近黃金比例。

現(xiàn)實(shí)上黃金比例的字號(hào)對(duì)比在移動(dòng)端是一個(gè)適合凸起主題的比例，是一個(gè)“美”的比例，但并不肯定是一種適合閱讀的比例。一個(gè)以閱讀為主的網(wǎng)頁在字號(hào)選擇上可能必要較小的比例，若是你在字號(hào)的選擇上缺乏信念，也可以用一些工具進(jìn)行輔助選擇，比如Modular Scale（Adobe的排版負(fù)責(zé)人Tim Brown創(chuàng)建的工具），其中囊括了歷史上最令人寫意的幾種比例關(guān)系，通過這個(gè)比例進(jìn)行匹配至少可以保證不出錯(cuò)。

筆墨留白

「留白」即在版面中留出空余的空間，處理好留白能使文本視覺流平順，提拔閱讀舒適性。對(duì)于一篇文章而言，留白從小到大分別有筆墨中的空白、筆墨與筆墨之間的空白、行與行之間的空白、段與段之間的空白，留白面積的大小也要遵循這個(gè)順序。

行間距的設(shè)定：行間距的設(shè)定直接影響了視線夙昔一行末尾移動(dòng)到下一行開頭的難易。行間距過高導(dǎo)致視線分散，容易游離；行間距過小則容易影響視線的移動(dòng)，讓人找不到正在閱讀哪一行。普遍認(rèn)可的做法是將行高設(shè)置為1.5em－2.0em。在這個(gè)基礎(chǔ)之上，字體樣式、大小、行寬還會(huì)對(duì)行間距的設(shè)定有肯定的影響。

段間距的設(shè)定

段落與段落之間必要有肯定的距離，假如這段距離過小，同樣影響視線的移動(dòng)，過大則容易導(dǎo)致上下文的聯(lián)系變得松散。普遍做法也是將段間距設(shè)定為2.0em。

對(duì)齊體例

文本的對(duì)齊體例重要有四種：左對(duì)齊、居中對(duì)齊、右對(duì)齊以及兩端對(duì)齊。一樣平常來說，移動(dòng)端文本的對(duì)齊重要采用的是左對(duì)齊或兩端對(duì)齊，這里簡要談一談這兩種對(duì)齊體例的優(yōu)劣。

左對(duì)齊：代表應(yīng)用重要是「豆瓣、簡書、知乎」。左對(duì)齊容易造成右端留白過多，團(tuán)體視覺失衡，但是這種對(duì)齊體例不破壞筆墨自己的起伏和韻律，能保證較好的閱讀體驗(yàn)。

兩端對(duì)齊：代表應(yīng)用是「微信讀書、部分微信公眾號(hào)」。兩端對(duì)齊可以保證段落筆墨劃一同等，成規(guī)整的塊狀，但是打破了筆墨和字間空白之間形成的韻律，閱讀起來未必舒適。（分外是在大量使用英文的情境下）

對(duì)比度

一個(gè)優(yōu)質(zhì)的網(wǎng)頁必要有充足的文本對(duì)比度。對(duì)于閱讀的內(nèi)容來說，對(duì)比度過于強(qiáng)烈和過于薄弱都是不利于閱讀的，Material Design中保舉的文本對(duì)比度為7:1，最小值為4.5:1。

前段時(shí)間我在產(chǎn)品的某個(gè)不著名的角削發(fā)現(xiàn)了如許一個(gè)網(wǎng)頁，看起來不是十分舒適，筆墨和背景的顏色對(duì)比度太低。

于是我開始探索有什么方法可以去科學(xué)地衡量這個(gè)對(duì)比度，而不是單純憑靠感覺。最近終于發(fā)現(xiàn)有很多網(wǎng)站可以對(duì)色彩對(duì)比度進(jìn)行檢查。我用其中一個(gè)網(wǎng)站對(duì)這個(gè)網(wǎng)頁進(jìn)行了測試，可以看到它的筆墨對(duì)比度是3.96:1，除非加大字重，否則它就是不合格的。

制訂你的排版風(fēng)格指南

說了這么多，其實(shí)最緊張的照舊規(guī)范。制訂一個(gè)團(tuán)隊(duì)中每個(gè)設(shè)計(jì)師都佩服并且遵循的排版風(fēng)格指南，來標(biāo)準(zhǔn)化團(tuán)隊(duì)設(shè)計(jì)師的筆墨。假如設(shè)計(jì)僅僅憑靠感覺，團(tuán)隊(duì)中每個(gè)設(shè)計(jì)師會(huì)有不同的感覺，最后做出來的網(wǎng)頁也有八門五花的「感覺」，這是很可怕的。

總結(jié)

良好的設(shè)計(jì)還離不開設(shè)計(jì)師負(fù)責(zé)到底的精神。前文所提到的大小、間距、對(duì)比度，在前端和產(chǎn)品經(jīng)理的眼里只是一個(gè)數(shù)值，他們并不知道一個(gè)數(shù)值的細(xì)小區(qū)別對(duì)一個(gè)網(wǎng)頁來說會(huì)有多大的影響，可能會(huì)由于種種因素調(diào)整你的設(shè)計(jì)。所以，設(shè)計(jì)師必須用一絲不茍的精神對(duì)你的網(wǎng)頁負(fù)責(zé)到底，如許才能最終產(chǎn)出一個(gè)充滿設(shè)計(jì)質(zhì)感界面。

迎接關(guān)注微信公眾號(hào)：「UXD-Cloudhub」