如何科學提高文本易讀性

作者介紹

丁珍，雲之家用戶體驗部視覺設計師。只想安安靜靜做個野生的我。

排版設計是ui設計師的基本功。但或許是因為它太基本了，很多時候很多設計師都會直接忽略它的存在，導致最後的實現效果不夠理想。或許就是這些細節導致手中的產品看起來總是差那麼一點點。尤其是對於一些注重閱讀體驗的頁面來說，每一個細節都可能成為致命傷。

藝術是無依據可循的，但是文字排版卻是有依據可循的。下面就排版中的字體樣式、留白大小、對齊方式、色彩對比度四個要素來簡單談一談如何科學提高移動端文本的易讀性，提升設計質感。（找到設計依據之後，面對產品經理的質疑也更有懟回去的底氣了哈哈哈）

大前提：明確設計目標

所有的設計都必須在這個前提之下進行。以下提到的數值只是一個參考，更重要的是你想通過頁面傳遞給用戶的信息，明確設計目標，以此對你的設計進行調整。否則，設計的意義便不存在了。

字體大小

通過字體大小去凸顯內容、區分層級是一種設計趨勢，同時也是ios11的設計思路之一。那麼，如何去選擇字體的大小能達到比較好的效果呢？

material design對方塊字主標題和內容文字的大小分別定為24sp和15sp，24/15=1.6，接近黃金比例；airbnb的主標題和內容文字的比例同樣接近黃金比例。

實際上黃金比例的字型大小對比在移動端是一個適合突出主題的比例，是一個「美」的比例，但並不一定是一種適合閱讀的比例。一個以閱讀為主的頁面在字型大小選擇上可能需要較小的比例，若是你在字型大小的選擇上缺乏信心，也可以用一些工具進行輔助選擇，比如Modular Scale（Adobe的排版負責人Tim Brown創建的工具），其中囊括了歷史上最令人滿意的幾種比例關係，通過這個比例進行匹配至少可以保證不出錯。

文字留白

「留白」即在版面中留出空餘的空間，處理好留白能使文本視覺流平順，提升閱讀舒適性。對於一篇文章而言，留白從小到大分別有文字中的空白、文字與文字之間的空白、行與行之間的空白、段與段之間的空白，留白面積的大小也要遵循這個順序。

行間距的設定：行間距的設定直接影響了視線從前一行末尾移動到下一行開頭的難易。行間距過高導致視線分散，容易遊離；行間距過小則容易影響視線的移動，讓人找不到正在閱讀哪一行。普遍認可的做法是將行高設置為1.5em－2.0em。在這個基礎之上，字體樣式、大小、行寬還會對行間距的設定有一定的影響。

段間距的設定：段落與段落之間需要有一定的距離，如果這段距離過小，同樣影響視線的移動，過大則容易導致上下文的聯繫變得鬆散。普遍做法也是將段間距設定為2.0em。

對齊方式

文本的對齊方式主要有四種：左對齊、居中對齊、右對齊以及兩端對齊。一般來說，移動端文本的對齊主要採用的是左對齊或兩端對齊，這裡簡要談一談這兩種對齊方式的優劣。

左對齊：代表應用主要是「豆瓣、簡書、知乎」。左對齊容易造成右端留白過多，整體視覺失衡，但是這種對齊方式不破壞文字本身的起伏和韻律，能保證較好的閱讀體驗。

兩端對齊：代表應用是「微信讀書、部分微信公眾號」。兩端對齊可以保證段落文字整齊劃一，成規整的塊狀，但是打破了文字和字間空白之間形成的韻律，閱讀起來未必舒適。（特別是在大量使用英文的情境下）

對比度

一個優質的頁面需要有足夠的文本對比度。對於閱讀的內容來說，對比度過於激烈和過弱都是不利於閱讀的，material design中推薦的文本對比度為7:1，最小值為4.5:1。

前段時間我在產品的某個不知名的角落發現了這樣一個頁面，看起來不是十分舒適，文字和背景的顏色對比度太低。

於是我開始探索有什麼方法可以去科學地衡量這個對比度，而不是單純憑靠感覺。最近終於發現有許多網站可以對色彩對比度進行檢查。我用其中一個網站對這個頁面進行了測試，可以看到它的文字對比度是3.96:1，除非加大字重，否則它就是不合格的。（所以，設計師的眼睛就是雪亮的啊）

制定你的排版風格指南

說了這麼多，其實最重要的還是規範。制定一個團隊中每個設計師都信服並且遵循的排版風格指南，來標準化團隊設計師的文字。如果設計僅僅憑靠感覺，團隊中每個設計師會有不同的感覺，最後做出來的頁面也有五花八門的「感覺」，這是很可怕的。

圖片來自網路

最後，優秀的設計還離不開設計師負責到底的精神。前文所提到的大小、間距、對比度，在前端和產品經理的眼裡只是一個數值，他們並不知道一個數值的微小區別對一個頁面來說會有多大的影響，可能會因為種種因素調整你的設計。所以，設計師必須用一絲不苟的精神對你的頁面負責到底，這樣才能最終產出一個充滿設計質感界面。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！