本文的寫作目的主要有兩點(diǎn)，其一，探究在設(shè)計(jì)中，影響Web和App界面可讀性和易讀性的因素有哪些；其二，提出相應(yīng)的解決辦法，即如何提升界面設(shè)計(jì)的可讀性。
再動人心魄的故事，如果無法以清晰易懂的方式講給讀者，讀者永遠(yuǎn)也不可能被你的故事吸引。同樣地，對設(shè)計(jì)師而言，無論你的設(shè)計(jì)多么用心，如果可讀性無法保障，用戶也絕對不會有非常愉快的用戶體驗(yàn)。今天我們就來專門說說這個(gè)事兒-——如何提升界面設(shè)計(jì)的可讀性。
要完完全全弄懂這個(gè)問題，以下這些問題都是必要的：
- 可讀性和易讀性究竟是什么？
- 為什么要重視設(shè)計(jì)中的可讀性和易讀性問題？
- 影響Web和App界面可讀性和易讀性的因素有哪些？
- 如何提升界面設(shè)計(jì)的可讀性？
倘若看到此文的你，還在糾結(jié)是不是要花費(fèi)大量時(shí)間弄懂設(shè)計(jì)的可讀性問題，那么我可以肯定的告訴你：這是必須的。原因很簡單，如果用戶連你頁面上的內(nèi)容都看不清楚，他們還愿意欣賞你的設(shè)計(jì)么？還會認(rèn)真了解你的產(chǎn)品么？答案顯而易見，用戶絕對不會。
那么不廢話了，正式開始吧~
第一部分 什么是可讀性和易讀性？（這里主要針對數(shù)字內(nèi)容）
可讀性和易讀性這兩個(gè)概念非常相似，以至于很多設(shè)計(jì)師把他們混作一談，但這兩者本質(zhì)上是不盡相同的。用戶在閱讀某一內(nèi)容時(shí)，會產(chǎn)生不同的感知，根據(jù)感知結(jié)果的不同，可以細(xì)分成可讀性和易讀性——
可讀性：內(nèi)容的可讀性強(qiáng)調(diào)的是用戶理解某一內(nèi)容的難易程度。
可以這么說，可讀性關(guān)注的問題更加深入，它涉及到了用戶對文本內(nèi)容的理解問題，而不是僅僅停留在用戶查看內(nèi)容和識別內(nèi)容的層面上?；诖?，要解決內(nèi)容的可讀性問題，就要思考更多，諸如，語言是否簡單易懂？思維是否清晰？信息是否有用？結(jié)構(gòu)是否合理？
易讀性：內(nèi)容的易讀性強(qiáng)調(diào)的是用戶如何查看內(nèi)容以及如何區(qū)分內(nèi)容。
從這個(gè)角度來看，設(shè)計(jì)師需要解決的問題有兩點(diǎn)：第一，確保用戶可以順利查看內(nèi)容；第二，確保用戶可以區(qū)分內(nèi)容并準(zhǔn)確識別內(nèi)容，比如識別字符、單詞、句子，以及數(shù)字等等。基于此，我們可以這么認(rèn)為，易讀性主要解決內(nèi)容視覺呈現(xiàn)的相關(guān)問題，使內(nèi)容變得容易“讀”，并讓用戶快速了解頁面上的信息。
在當(dāng)今的設(shè)計(jì)師眼中，這兩個(gè)術(shù)語的定義又略有變化，設(shè)計(jì)師們普遍認(rèn)為，可讀性的定義更加廣義，在思考可讀性問題的時(shí)候，他們也更傾向于將視覺呈現(xiàn)和內(nèi)容本身相結(jié)合。他們甚至認(rèn)為，可讀性問題就是用戶如何區(qū)分文本的不同元素的問題，而易讀性則強(qiáng)調(diào)如何區(qū)分特定文本中的某些特定字符和符號的問題。
但其實(shí)無論你如何理解這些術(shù)語，歸根結(jié)底始終是一個(gè)事兒：用戶如何輕松查看并快速閱讀你的內(nèi)容。
第二部分 影響Web和App界面設(shè)計(jì)中可讀性和易讀性的因素有哪些？
很多因素都會影響內(nèi)容的可讀性和易讀性，這里主要集中和設(shè)計(jì)過程直接相關(guān)的要點(diǎn)來探討。
背景色
和書本、報(bào)紙等紙質(zhì)媒介一樣，在數(shù)字界面中，背景色對閱讀體驗(yàn)、區(qū)分交互元素以及識別內(nèi)容有著至關(guān)重要的作用。我們都知道，在不同的背景下看同一個(gè)物體，會有不同的視覺體驗(yàn)。類似地，相同的文字內(nèi)容，在白色或淺色背景上顯示為黑色時(shí)，字體看起來會比在深色背景上的顯示為白色時(shí)大很多。
之所以有這種差異，原因在于配色。錯(cuò)誤的配色方案極可能會帶來糟糕的可讀性，進(jìn)而導(dǎo)致失敗的用戶體驗(yàn)，致使用戶無法快速瀏覽數(shù)據(jù)、文字，或者其他任何內(nèi)容。一旦內(nèi)容本身不可讀了，即使數(shù)據(jù)之間具備相關(guān)性，用戶也會產(chǎn)生緊張情緒，不僅無法理解內(nèi)容，甚至還會錯(cuò)過一些重要信息。
如果設(shè)計(jì)師有研究過不同背景色，并且理解了不同的背景色會帶來不同的閱讀感知，并搭配了合適的字體，那么理論上講，則任何配色方案都可以保障足夠的可讀性，就看具體怎么設(shè)計(jì)了。此外，不同類型的頁面也要有不同的解決方案：如果是文字很多的頁面，則傾向于使用淺色背景，并可以采用多種配色方案；如果頁面上圖片很多，則常常采用深色背景，這樣可以突出圖片，帶來更為震撼的視覺效果。
Travel Planner app使用了淺色背景確保每個(gè)頁面都是可讀的
這是一個(gè)關(guān)于飲茶的網(wǎng)站，專門留出了白色背景的一塊，展示文案
這是一個(gè)書店網(wǎng)站，深色背景，使用了特定的字體和字體大小，形成對比，確保可讀性
排版
排版是什么？排版就是文本內(nèi)容的外觀。說到排版，字體就不得不提，它不僅會直接影響用戶閱讀的速度和體驗(yàn)，還會影響到識別的速度。此外，字體的大小，字體的寬度，字體的顏色以及文本結(jié)構(gòu)，每個(gè)點(diǎn)都特別重要。字體作為頁面的必備元素，和圖片一樣，會影響整體的視覺樣式。設(shè)計(jì)師在排版時(shí)，要做到美觀和功能的統(tǒng)一其實(shí)遠(yuǎn)比想象中艱難。
要做好排版，這些問題都要注意：
- 留白（負(fù)空間）：元素之間的空白區(qū)域
- 對齊：放置并對齊文本
- 字間距：字和字之間的間距
- 字母間隙：兩個(gè)字母之間的間距
- 行距：文本線之間的間距
- 行長：一行文字的長度
設(shè)計(jì)師會根據(jù)以上要點(diǎn)來設(shè)計(jì)文本，最大程度做到設(shè)計(jì)上賞心悅目，而且體驗(yàn)上易于閱讀。任何細(xì)節(jié)，比如字間距太小，行間距太窄，字體太小或者文字顏色無法和背景形成對比——所有這些問題都會使內(nèi)容變得難以閱讀，讓用戶產(chǎn)生不適感，但又說不清楚問題究竟是什么。此外，如果有多行文字，把每行的字?jǐn)?shù)控制在合適的長度可以讓閱讀更順利。
Nature Encyclopedia App：使用可讀性較好的無襯線字體，讓文本易于閱讀。此外，對于有更多文字的慈善頁面，背景色用了更淺的顏色。這種對比既提高了可讀性，又和封面作了區(qū)分。
視覺層次
視覺層次結(jié)構(gòu)是一種內(nèi)容組織的方法，可以明確內(nèi)容優(yōu)先級。它基于格式塔理論，涉及到了很多元素視覺感知的心理學(xué)，并闡述了用戶為何喜歡統(tǒng)一的視覺元素。視覺層次幫助設(shè)計(jì)師合理組織和布局UI元素，以便用戶可以根據(jù)對象的物理差異（例如大小，顏色，對比度，樣式等）來區(qū)分信息。
對于用戶而言，打開一個(gè)網(wǎng)頁后，他們更加傾向于瀏覽內(nèi)容，而不是逐字逐句地閱讀。回想一下，當(dāng)我們打開一篇博客，我們最先看的一定是文章題目，其實(shí)是副標(biāo)題，最后才是正文部分。那既然如此，是不是說正文的重要性沒有那么突出了？當(dāng)然不是！
用戶的心理其實(shí)是這樣的：先看看大標(biāo)題和副標(biāo)題，快速確認(rèn)這個(gè)內(nèi)容是不是他們想要的。如果標(biāo)題的層次結(jié)構(gòu)和正文的排版可以很好的讓用戶get到這個(gè)內(nèi)容就是他們想看的，那么他們則會真正去閱讀。反之，如果用戶首先看大的是冗長的文字，心理上就會立即產(chǎn)生負(fù)擔(dān)，他們不知道閱讀文章需要多長時(shí)間，也會懷疑這個(gè)內(nèi)容是否值得投入時(shí)間和精力去閱讀。
視頻播放器
可持續(xù)能源生產(chǎn)創(chuàng)新服務(wù)的主頁分部分列出了內(nèi)容，并按清晰的元素層次進(jìn)行組織。
因此，對于文本內(nèi)容，采用逐漸呈現(xiàn)信息的方法顯得至關(guān)重要。對于文本部分，這里涵蓋了可以囊括到視覺層次中的全部元素，包括標(biāo)題、副標(biāo)題、正文、CTA按鈕，標(biāo)題等等，可以按照以下視覺層次結(jié)構(gòu)劃分：
- 第一級：比如頭條新聞中的大標(biāo)題，它旨在提供核心信息，讓用戶立即判斷這內(nèi)容是不是他們想看的。
- 第二級：比如文章的二級標(biāo)題，可以讓用戶快速了解一篇文章的結(jié)構(gòu)。
- 第三級：比如正文和其他數(shù)據(jù)，和核心信息相關(guān)但不是最主要的信息。
負(fù)空間
負(fù)空間（或稱空白）就是頁面中的空白區(qū)域。留白會出現(xiàn)的地方，不僅僅是某一元素的周圍，也會是某些元素之間甚至是元素內(nèi)部。留白就像是頁面上的一個(gè)氣口，是空的，純粹的，可呼吸的。在講排版時(shí)，我們已經(jīng)提到過了留白的作用，不僅僅是對于頁面排版，留白對界面布局中文字和非文字元素之間的連接也很重要。比如，在瀏覽一張圖片很多的頁面時(shí)，留白的大小和數(shù)量可以幫助你確認(rèn)文字和圖片的比例是否合理，關(guān)系是否連貫。
使用留白增強(qiáng)Web界面內(nèi)容感知
文案
這里還是有必要說一下文案本身，界面中出現(xiàn)的文本內(nèi)容要保證至少以下4個(gè)基本功能：
- 清晰：用戶理解你在說什么，核心信息清晰易懂
- 簡潔：每段文字都是有意義的，直奔主題的，沒有大量修飾，沒有空話、套話
- 有用：內(nèi)容為用戶提供了必要的信息，或者幫助用戶更好地使用產(chǎn)品
- 一致：內(nèi)容表述的語氣一致、手法一致
對于App、網(wǎng)站和博客的內(nèi)容打造，其實(shí)只需記住一點(diǎn)，你的用戶都是人，因此打造一種與人交流的氛圍就是制勝點(diǎn)。無論是網(wǎng)頁，還是著陸頁，還是郵件，把編排文案想象成你是在和一個(gè)人對話，使用簡單易懂的語言，不要過度夸張的描述，這只會讓用戶感到疑惑不解。
第三部分 如何提升設(shè)計(jì)的可讀性？
1. 文案需要精簡和一致
有一個(gè)技巧，提前確定一些主要術(shù)語和某種操作的命名，然后在任何同場景下都使用這一種表述。例如，如果把刪除這個(gè)動作命名為“Delete”，那么所有需要?jiǎng)h除的地方全部都命名成“Delete”，不要再用其他比如“Remove”之類的任何表述了。再比如，如果想要告知用戶此時(shí)需付款，可以直接用“Pay”這個(gè)詞，這個(gè)詞會比“Make a payment”看上去更加簡潔。此外，用“Pay”一個(gè)字時(shí)，還可以加大字號，讓這個(gè)CTA更加醒目。
數(shù)字產(chǎn)品中的這種文案用法和文章以及書中是不一樣的，我們在寫東西的時(shí)候，傾向于使用更復(fù)雜但更高級的短語來表達(dá)同一個(gè)意思，這樣文字看起來會更加生動有趣，也更具文學(xué)性。但對于數(shù)字產(chǎn)品而言，用戶主要是使用它們來解決問題的，因此如果使用文學(xué)手法，反而會破壞用戶體驗(yàn)。
2. 自定義選項(xiàng)
個(gè)性化用戶界面可以更加準(zhǔn)確地把控用戶偏好，比如說，讓用戶去自定義背景顏色和文字大小。自定義功能對增加內(nèi)容可讀性具有重大影響，因?yàn)榉彩露际且蛉硕?，你很難去了解并照顧到每一個(gè)用戶，但是用戶自己知道自己喜歡什么，所以給他們選擇的機(jī)會就好了。
Upper App的UI設(shè)計(jì)案例研究：允許用戶選擇最喜歡的主題顏色
3. 分屏顯示
分屏顯示不同的內(nèi)容現(xiàn)在已經(jīng)非常流行了，基本的原理就是采用深色背景和淺色背景兩種方案來展示不同的內(nèi)容。通常使用淺色背景來展示文本居多的頁面或者核心數(shù)據(jù)塊，深色則展示圖片或少文字的內(nèi)容，這不僅確保了可讀性，還形成了頁面對比，一舉兩得。
澆水追蹤器應(yīng)用程序設(shè)計(jì)
4. 一個(gè)段落一個(gè)重點(diǎn)
前面已經(jīng)說過了，現(xiàn)在用戶的閱讀習(xí)慣就是瀏覽內(nèi)容。因此，為了方便用戶可以快速瀏覽重要信息，切勿使用大篇幅段落。
建議使用小段落，比如3到5行字就是一段，這樣用戶不僅可以瀏覽，還可以快速過濾掉自己不感興趣的內(nèi)容。更重要的是，用戶不會錯(cuò)過自己真正需要的內(nèi)容，因?yàn)槊總€(gè)段落都有專門的主題和重點(diǎn)。
5. 使用數(shù)字
Nielsen Norman曾在博客中分享過一個(gè)有趣的現(xiàn)實(shí)：根據(jù)用戶在掃描網(wǎng)頁時(shí)進(jìn)行的眼動跟蹤研究，人的視線在遇到數(shù)字時(shí)通常會停滯不前，并駐足觀察，即使這些數(shù)字夾雜在大片文字中間。
人在潛意識中會將數(shù)字與某種事實(shí)、統(tǒng)計(jì)數(shù)據(jù)、物體大小以及空間距離等信息關(guān)聯(lián)起來，而這類信息通常也就是他們想要的內(nèi)容。因此，寫文案時(shí)直接使用阿拉伯?dāng)?shù)字是一個(gè)不可忽視的小技巧。
環(huán)保社區(qū)網(wǎng)站設(shè)計(jì)：使用數(shù)字作為設(shè)計(jì)布局的一部分，這種方式可以引起用戶的關(guān)注
6. 列表
使用帶有數(shù)字或項(xiàng)目符號的列表可以增加內(nèi)容可讀性，原因很簡單，列表可以清晰地羅列信息，組織結(jié)構(gòu)，因此很是吸引用戶注意力。
7. 突出重點(diǎn)信息
使用加粗、斜體、文字顏色等手法來突出顯示某些內(nèi)容，這已經(jīng)是非常廣泛的做法，卻始終受用。當(dāng)你的文本內(nèi)容中有某一點(diǎn)需要讀者特別注意，就可以突出顯示。此外，錨文本也要突出顯示，告知用戶這個(gè)內(nèi)容是可以點(diǎn)擊的。常見的做法有加下劃線、設(shè)置文字顏色或者加粗。
8. 對比
對比可以直接區(qū)分文本元素，并幫助讀者快速瀏覽。但要把握好度，對比度太低會導(dǎo)致文本元素混在一起，難以辨認(rèn)；對比度太高會導(dǎo)致視覺疲勞。要合理地運(yùn)用對比，前提是要掌握色彩理論知識，其次，在不同的界面上做嘗試，不斷測試，直到找到最佳方案。
9. 使用常規(guī)字體
選擇字體時(shí)，設(shè)計(jì)師們總想嘗試一些原創(chuàng)又精美的字體。這個(gè)想法是對的，好看確實(shí)很重要，但是保證可讀性更加重要！但這兩者的關(guān)系倒不是魚與熊掌那樣不可兼得，如果既想使用一些特別的字體，又要保證可讀性，排版就顯得愈發(fā)重要了。
一般來講，Sans-serif字體更易讀，而襯線字體看起來會更優(yōu)雅。對于一些標(biāo)語而言，即使使用相對復(fù)雜的字體也不會破壞可讀性，因?yàn)闃?biāo)語的內(nèi)容是極簡短的；但如果是一段話，使用非常規(guī)字體就可能是另一番體驗(yàn)了。
此外，配色的選擇也是一個(gè)重要影響因素。例如，深色背景上的文字就需要更多的留白，因?yàn)樯钌珪?，而淺色背景則沒有這個(gè)問題存在。
招聘藝術(shù)家網(wǎng)站設(shè)計(jì)插圖：此登錄頁面的標(biāo)題使用了襯線字體Domaine，它在視覺上和插畫相得映彰；正文段落則使用了高度可讀的無襯線字體
10. 留白
如果元素之間沒有足夠的留白空間，可讀性會變差。盡管許多用戶無法明確意識到這個(gè)問題，但無合理留白的設(shè)計(jì)確實(shí)會對用戶的眼睛和大腦造成壓力。留白和音樂中的停頓有異曲同工之處，給出空間，給出緩沖和思考的時(shí)間，從而讓內(nèi)容更加易讀。
11. 分段
最常用的內(nèi)容分段辦法就是使用副標(biāo)題、水平分割線或者或垂直分割線。分段可以幫助用戶輕松地將不同的元素分開，并在統(tǒng)一的布局中了解它們的相互聯(lián)系。第10點(diǎn)中提到的留白也可以用于分段，此外，還可以使用圖片做隔斷。
使用圖片來進(jìn)行內(nèi)容分段乍看似乎不合邏輯，但是圖片確實(shí)有助于使內(nèi)容更清晰可讀。在文章中插入圖片，圖片就成了一種更加好看的分割線，既可以說明上下文內(nèi)容，又可以分隔文本的不同部分，承上啟下。
此外，插入圖片還可以讓用戶有短暫的放松感，尤其是在閱讀長文的時(shí)候，圖片可以很好的緩解用戶內(nèi)心焦慮。當(dāng)然，你還可以使用各種插圖、照片甚至3D圖形，相比起文字內(nèi)容，它們都更具吸引力，并且識別速度更快。
總之，插入圖片是一種非常棒的辦法，它還可以根據(jù)上下文語義刺激用戶點(diǎn)擊?，F(xiàn)在很多的網(wǎng)站設(shè)計(jì)，都會使用相關(guān)性的大圖搭配文本內(nèi)容，相互補(bǔ)充，相互成就，營造出一種大氣蓬勃的設(shè)計(jì)感。
12. 合理利用大寫
對于英語國家的人而言，使用大寫來標(biāo)記文本層次結(jié)構(gòu)依舊是一個(gè)重要手段，這也是為什么關(guān)于使用句首字母大寫還是詞首字母大寫的話題已經(jīng)被討論了無數(shù)次的原因。
關(guān)于大寫的用法，要注意以下幾點(diǎn)：
- 詞首字母大寫：標(biāo)簽、CTA，菜單以及頁面標(biāo)題
- 句首字母大寫：較長的文本，例如頁面或字段描述以及工具提示
- 全部字母大寫：但僅適用于非常重要的內(nèi)容，比如簡短的標(biāo)語，品牌名稱，網(wǎng)站的核心導(dǎo)航點(diǎn)，簡短的CTA按鈕文字以及OK的縮寫等等。
但無論你怎么選擇，都要記住一點(diǎn)：保持統(tǒng)一。如果按鈕使用了全部字母大寫，那么每個(gè)頁面的按鈕都要這么做了。
Health Blog的設(shè)計(jì)：CTA和頂部導(dǎo)航用了全部字母大寫；大標(biāo)題用了詞首字母大寫；正文用了句首字母大寫
第四部分 總結(jié)
關(guān)于提升設(shè)計(jì)可讀性的內(nèi)容，今天就暫時(shí)討論到這里。其實(shí)上面的每個(gè)點(diǎn)都可以再展開具體分析，但限于篇幅，就暫時(shí)不深入了。所以如果你有其他想法，歡迎來交流。最后，希望本文對你有做幫助。
原文地址：mockplus
作者：Marina Yalanska
譯者：Trista
]]>
設(shè)計(jì) Denis Nazarov
設(shè)計(jì) Ryan Johnson
設(shè)計(jì) Baz Deas
設(shè)計(jì) nasserui_
設(shè)計(jì) Julien
設(shè)計(jì) carol anne solberger
設(shè)計(jì) Hannah Purmort
設(shè)計(jì) arran allsebrook
設(shè)計(jì) Aren Vandenburgh
設(shè)計(jì) Halo Lab
設(shè)計(jì) PeterQIU
設(shè)計(jì) buatoom
設(shè)計(jì) Jurre Houtkamp
設(shè)計(jì) Damian Denis
設(shè)計(jì) Zak Steele-Eklund
設(shè)計(jì) Ramotion
設(shè)計(jì) Mohamed Chahin
設(shè)計(jì) Denis Nazarov
設(shè)計(jì) Eddie Lobanovskiy
設(shè)計(jì) Mike | Creative Mints
設(shè)計(jì) Bradley Ziffer
設(shè)計(jì) BrandBox
設(shè)計(jì) Jason
設(shè)計(jì) Rron Berisha
設(shè)計(jì) Asylab
設(shè)計(jì) Denis Abdullin
設(shè)計(jì) Darko Vujic
設(shè)計(jì) Daiana
設(shè)計(jì) Nicholas Green
設(shè)計(jì) Minami
設(shè)計(jì) Prateek gupta HFI CUA
設(shè)計(jì) Tran Thi Ngoc Anh
設(shè)計(jì) Vladimir Rakshâ
設(shè)計(jì) Davut ?ala
]]>
Design by Slava Kornilov
Design by Hristo Hristov
Design by Adam Przybylski
Design by Shaban Iddrisu™
Design by Yuanxu
Design by Robert Felizardo
Design by Ning xiao dong
Design by Abdullah Un Noman
Design by Veera
]]>
設(shè)計(jì)： tubik
設(shè)計(jì)： Alex Litvinov
設(shè)計(jì)： Nathan Buraze
設(shè)計(jì)： Satwik Pachino
設(shè)計(jì)： Apply Digital Systems
設(shè)計(jì)： Jordy Arntz
設(shè)計(jì)： Arthur Moreira
]]>
Design by Shekh Al Raihan
Design by Shahidul Islam Shishir
Design by Atuka
Design by Daniel Timofte
Design by Bhawna Joshi
Design by Marvin Wu
設(shè)計(jì)： Joshua Oluwagbemiga
設(shè)計(jì)： Ahsan Raz
設(shè)計(jì)： fxs
設(shè)計(jì)： Nelia Kleiven
設(shè)計(jì)： Dragon Lee
設(shè)計(jì)： Ana Wibiastuti
設(shè)計(jì)： Silver Stag
設(shè)計(jì)： Akshay Bukka
設(shè)計(jì)： HelloKimi
]]>
