本文的寫作目的主要有兩點，其一，探究在設計中，影響Web和App界麵可讀性和易讀性的因素有哪些；其二，提出相應的解決辦法，即如何提升界麵設計的可讀性。
再動人心魄的故事，如果無法以清晰易懂的方式講給讀者，讀者永遠也不可能被你的故事吸引。同樣地，對設計師而言，無論你的設計多麼用心，如果可讀性無法保障，用戶也絕對不會有非常愉快的用戶體驗。今天我們就來專門說說這個事兒-——如何提升界麵設計的可讀性。
要完完全全弄懂這個問題，以下這些問題都是必要的：
倘若看到此文的你，還在糾結是不是要花費大量時間弄懂設計的可讀性問題，那麼我可以肯定的告訴你：這是必須的。原因很簡單，如果用戶連你頁麵上的內容都看不清楚，他們還願意欣賞你的設計麼？還會認真了解你的產品麼？答案顯而易見，用戶絕對不會。
那麼不廢話了，正式開始吧~
可讀性和易讀性這兩個概念非常相似，以至於很多設計師把他們混作一談，但這兩者本質上是不盡相同的。用戶在閱讀某一內容時，會產生不同的感知，根據感知結果的不同，可以細分成可讀性和易讀性——
可讀性：內容的可讀性強調的是用戶理解某一內容的難易程度。
可以這麼說，可讀性關注的問題更加深入，它涉及到了用戶對文本內容的理解問題，而不是僅僅停留在用戶查看內容和識別內容的層麵上。基於此，要解決內容的可讀性問題，就要思考更多，諸如，語言是否簡單易懂？思維是否清晰？信息是否有用？結構是否合理？
易讀性：內容的易讀性強調的是用戶如何查看內容以及如何區分內容。
從這個角度來看，設計師需要解決的問題有兩點：第一，確保用戶可以順利查看內容；第二，確保用戶可以區分內容並準確識別內容，比如識別字符、單詞、句子，以及數字等等。基於此，我們可以這麼認為，易讀性主要解決內容視覺呈現的相關問題，使內容變得容易“讀”，並讓用戶快速了解頁麵上的信息。
在當今的設計師眼中，這兩個術語的定義又略有變化，設計師們普遍認為，可讀性的定義更加廣義，在思考可讀性問題的時候，他們也更傾向於將視覺呈現和內容本身相結合。他們甚至認為，可讀性問題就是用戶如何區分文本的不同元素的問題，而易讀性則強調如何區分特定文本中的某些特定字符和符號的問題。
但其實無論你如何理解這些術語，歸根結底始終是一個事兒：用戶如何輕鬆查看並快速閱讀你的內容。
很多因素都會影響內容的可讀性和易讀性，這裏主要集中和設計過程直接相關的要點來探討。
和書本、報紙等紙質媒介一樣，在數字界麵中，背景色對閱讀體驗、區分交互元素以及識別內容有著至關重要的作用。我們都知道，在不同的背景下看同一個物體，會有不同的視覺體驗。類似地，相同的文字內容，在白色或淺色背景上顯示為黑色時，字體看起來會比在深色背景上的顯示為白色時大很多。
之所以有這種差異，原因在於配色。錯誤的配色方案極可能會帶來糟糕的可讀性，進而導致失敗的用戶體驗，致使用戶無法快速瀏覽數據、文字，或者其他任何內容。一旦內容本身不可讀了，即使數據之間具備相關性，用戶也會產生緊張情緒，不僅無法理解內容，甚至還會錯過一些重要信息。
如果設計師有研究過不同背景色，並且理解了不同的背景色會帶來不同的閱讀感知，並搭配了合適的字體，那麼理論上講，則任何配色方案都可以保障足夠的可讀性，就看具體怎麼設計了。此外，不同類型的頁麵也要有不同的解決方案：如果是文字很多的頁麵，則傾向於使用淺色背景，並可以采用多種配色方案；如果頁麵上圖片很多，則常常采用深色背景，這樣可以突出圖片，帶來更為震撼的視覺效果。
Travel Planner app使用了淺色背景確保每個頁麵都是可讀的
這是一個關於飲茶的網站，專門留出了白色背景的一塊，展示文案
這是一個書店網站，深色背景，使用了特定的字體和字體大小，形成對比，確保可讀性
排版是什麼？排版就是文本內容的外觀。說到排版，字體就不得不提，它不僅會直接影響用戶閱讀的速度和體驗，還會影響到識別的速度。此外，字體的大小，字體的寬度，字體的顏色以及文本結構，每個點都特別重要。字體作為頁麵的必備元素，和圖片一樣，會影響整體的視覺樣式。設計師在排版時，要做到美觀和功能的統一其實遠比想象中艱難。
要做好排版，這些問題都要注意：
設計師會根據以上要點來設計文本，最大程度做到設計上賞心悅目，而且體驗上易於閱讀。任何細節，比如字間距太小，行間距太窄，字體太小或者文字顏色無法和背景形成對比——所有這些問題都會使內容變得難以閱讀，讓用戶產生不適感，但又說不清楚問題究竟是什麼。此外，如果有多行文字，把每行的字數控製在合適的長度可以讓閱讀更順利。
Nature Encyclopedia App：使用可讀性較好的無襯線字體，讓文本易於閱讀。此外，對於有更多文字的慈善頁麵，背景色用了更淺的顏色。這種對比既提高了可讀性，又和封麵作了區分。
視覺層次結構是一種內容組織的方法，可以明確內容優先級。它基於格式塔理論，涉及到了很多元素視覺感知的心理學，並闡述了用戶為何喜歡統一的視覺元素。視覺層次幫助設計師合理組織和布局UI元素，以便用戶可以根據對象的物理差異（例如大小，顏色，對比度，樣式等）來區分信息。
對於用戶而言，打開一個網頁後，他們更加傾向於瀏覽內容，而不是逐字逐句地閱讀。回想一下，當我們打開一篇博客，我們最先看的一定是文章題目，其實是副標題，最後才是正文部分。那既然如此，是不是說正文的重要性沒有那麼突出了？當然不是！
用戶的心理其實是這樣的：先看看大標題和副標題，快速確認這個內容是不是他們想要的。如果標題的層次結構和正文的排版可以很好的讓用戶get到這個內容就是他們想看的，那麼他們則會真正去閱讀。反之，如果用戶首先看大的是冗長的文字，心理上就會立即產生負擔，他們不知道閱讀文章需要多長時間，也會懷疑這個內容是否值得投入時間和精力去閱讀。
視頻播放器
可持續能源生產創新服務的主頁分部分列出了內容，並按清晰的元素層次進行組織。
因此，對於文本內容，采用逐漸呈現信息的方法顯得至關重要。對於文本部分，這裏涵蓋了可以囊括到視覺層次中的全部元素，包括標題、副標題、正文、CTA按鈕，標題等等，可以按照以下視覺層次結構劃分：
負空間（或稱空白）就是頁麵中的空白區域。留白會出現的地方，不僅僅是某一元素的周圍，也會是某些元素之間甚至是元素內部。留白就像是頁麵上的一個氣口，是空的，純粹的，可呼吸的。在講排版時，我們已經提到過了留白的作用，不僅僅是對於頁麵排版，留白對界麵布局中文字和非文字元素之間的連接也很重要。比如，在瀏覽一張圖片很多的頁麵時，留白的大小和數量可以幫助你確認文字和圖片的比例是否合理，關係是否連貫。
使用留白增強Web界麵內容感知
這裏還是有必要說一下文案本身，界麵中出現的文本內容要保證至少以下4個基本功能：
對於App、網站和博客的內容打造，其實隻需記住一點，你的用戶都是人，因此打造一種與人交流的氛圍就是製勝點。無論是網頁，還是著陸頁，還是郵件，把編排文案想象成你是在和一個人對話，使用簡單易懂的語言，不要過度誇張的描述，這隻會讓用戶感到疑惑不解。
有一個技巧，提前確定一些主要術語和某種操作的命名，然後在任何同場景下都使用這一種表述。例如，如果把刪除這個動作命名為“Delete”，那麼所有需要刪除的地方全部都命名成“Delete”，不要再用其他比如“Remove”之類的任何表述了。再比如，如果想要告知用戶此時需付款，可以直接用“Pay”這個詞，這個詞會比“Make a payment”看上去更加簡潔。此外，用“Pay”一個字時，還可以加大字號，讓這個CTA更加醒目。
數字產品中的這種文案用法和文章以及書中是不一樣的，我們在寫東西的時候，傾向於使用更複雜但更高級的短語來表達同一個意思，這樣文字看起來會更加生動有趣，也更具文學性。但對於數字產品而言，用戶主要是使用它們來解決問題的，因此如果使用文學手法，反而會破壞用戶體驗。
個性化用戶界麵可以更加準確地把控用戶偏好，比如說，讓用戶去自定義背景顏色和文字大小。自定義功能對增加內容可讀性具有重大影響，因為凡事都是因人而異，你很難去了解並照顧到每一個用戶，但是用戶自己知道自己喜歡什麼，所以給他們選擇的機會就好了。
Upper App的UI設計案例研究：允許用戶選擇最喜歡的主題顏色
分屏顯示不同的內容現在已經非常流行了，基本的原理就是采用深色背景和淺色背景兩種方案來展示不同的內容。通常使用淺色背景來展示文本居多的頁麵或者核心數據塊，深色則展示圖片或少文字的內容，這不僅確保了可讀性，還形成了頁麵對比，一舉兩得。
澆水追蹤器應用程序設計
前麵已經說過了，現在用戶的閱讀習慣就是瀏覽內容。因此，為了方便用戶可以快速瀏覽重要信息，切勿使用大篇幅段落。
建議使用小段落，比如3到5行字就是一段，這樣用戶不僅可以瀏覽，還可以快速過濾掉自己不感興趣的內容。更重要的是，用戶不會錯過自己真正需要的內容，因為每個段落都有專門的主題和重點。
Nielsen Norman曾在博客中分享過一個有趣的現實：根據用戶在掃描網頁時進行的眼動跟蹤研究，人的視線在遇到數字時通常會停滯不前，並駐足觀察，即使這些數字夾雜在大片文字中間。
人在潛意識中會將數字與某種事實、統計數據、物體大小以及空間距離等信息關聯起來，而這類信息通常也就是他們想要的內容。因此，寫文案時直接使用阿拉伯數字是一個不可忽視的小技巧。
環保社區網站設計：使用數字作為設計布局的一部分，這種方式可以引起用戶的關注
使用帶有數字或項目符號的列表可以增加內容可讀性，原因很簡單，列表可以清晰地羅列信息，組織結構，因此很是吸引用戶注意力。
使用加粗、斜體、文字顏色等手法來突出顯示某些內容，這已經是非常廣泛的做法，卻始終受用。當你的文本內容中有某一點需要讀者特別注意，就可以突出顯示。此外，錨文本也要突出顯示，告知用戶這個內容是可以點擊的。常見的做法有加下劃線、設置文字顏色或者加粗。
對比可以直接區分文本元素，並幫助讀者快速瀏覽。但要把握好度，對比度太低會導致文本元素混在一起，難以辨認；對比度太高會導致視覺疲勞。要合理地運用對比，前提是要掌握色彩理論知識，其次，在不同的界麵上做嚐試，不斷測試，直到找到最佳方案。
選擇字體時，設計師們總想嚐試一些原創又精美的字體。這個想法是對的，好看確實很重要，但是保證可讀性更加重要！但這兩者的關係倒不是魚與熊掌那樣不可兼得，如果既想使用一些特別的字體，又要保證可讀性，排版就顯得愈發重要了。
一般來講，Sans-serif字體更易讀，而襯線字體看起來會更優雅。對於一些標語而言，即使使用相對複雜的字體也不會破壞可讀性，因為標語的內容是極簡短的；但如果是一段話，使用非常規字體就可能是另一番體驗了。
此外，配色的選擇也是一個重要影響因素。例如，深色背景上的文字就需要更多的留白，因為深色會吸光，而淺色背景則沒有這個問題存在。
招聘藝術家網站設計插圖：此登錄頁麵的標題使用了襯線字體Domaine，它在視覺上和插畫相得映彰；正文段落則使用了高度可讀的無襯線字體
如果元素之間沒有足夠的留白空間，可讀性會變差。盡管許多用戶無法明確意識到這個問題，但無合理留白的設計確實會對用戶的眼睛和大腦造成壓力。留白和音樂中的停頓有異曲同工之處，給出空間，給出緩衝和思考的時間，從而讓內容更加易讀。
最常用的內容分段辦法就是使用副標題、水平分割線或者或垂直分割線。分段可以幫助用戶輕鬆地將不同的元素分開，並在統一的布局中了解它們的相互聯係。第10點中提到的留白也可以用於分段，此外，還可以使用圖片做隔斷。
使用圖片來進行內容分段乍看似乎不合邏輯，但是圖片確實有助於使內容更清晰可讀。在文章中插入圖片，圖片就成了一種更加好看的分割線，既可以說明上下文內容，又可以分隔文本的不同部分，承上啟下。
此外，插入圖片還可以讓用戶有短暫的放鬆感，尤其是在閱讀長文的時候，圖片可以很好的緩解用戶內心焦慮。當然，你還可以使用各種插圖、照片甚至3D圖形，相比起文字內容，它們都更具吸引力，並且識別速度更快。
總之，插入圖片是一種非常棒的辦法，它還可以根據上下文語義刺激用戶點擊。現在很多的網站設計，都會使用相關性的大圖搭配文本內容，相互補充，相互成就，營造出一種大氣蓬勃的設計感。
對於英語國家的人而言，使用大寫來標記文本層次結構依舊是一個重要手段，這也是為什麼關於使用句首字母大寫還是詞首字母大寫的話題已經被討論了無數次的原因。
關於大寫的用法，要注意以下幾點：
但無論你怎麼選擇，都要記住一點：保持統一。如果按鈕使用了全部字母大寫，那麼每個頁麵的按鈕都要這麼做了。
Health Blog的設計：CTA和頂部導航用了全部字母大寫；大標題用了詞首字母大寫；正文用了句首字母大寫
關於提升設計可讀性的內容，今天就暫時討論到這裏。其實上麵的每個點都可以再展開具體分析，但限於篇幅，就暫時不深入了。所以如果你有其他想法，歡迎來交流。最後，希望本文對你有做幫助。
原文地址：mockplus
作者：Marina Yalanska
譯者：Trista
色彩的魔力！烏克蘭116平裝修設計2020-04-01
配色優雅的幾何圖案：2包裝設計2020-03-04
比利時Vandewiele集團總部辦辦公空間2020-03-04
藝術氣質的字體和版式 日海報設計2020-02-24
真愛無界 大愛無疆：特別海報設計2020-02-14
50款企業logo設計佳作欣賞標志設計2020-01-29
日式美學，克製之心與樸文章2020-04-13
微信的設計之道·用戶體驗文章2020-04-11
淺析如何設計交互缺省頁文章2020-04-11
這座網頁設計博物館，讓文章2020-04-08
被你忽略的投影，實用性文章2020-04-04
解鎖新姿勢！你所不知道文章2020-04-02
