UX設(shè)計(jì)：如何提升制作界面設(shè)計(jì)的可讀性？

2019-12-06 點(diǎn)擊量：

前言

本文的寫作目的主要有兩點(diǎn)，其一，探究在設(shè)計(jì)中，影響Web和App界面可讀性和易讀性的因素有哪些；其二，提出相應(yīng)的解決辦法，即如何提升界面設(shè)計(jì)的可讀性。

再動(dòng)人心魄的故事，如果無法以清晰易懂的方式講給讀者，讀者永遠(yuǎn)也不可能被你的故事吸引。同樣地，對(duì)設(shè)計(jì)師而言，無論你的設(shè)計(jì)多么用心，如果可讀性無法保障，用戶也絕對(duì)不會(huì)有非常愉快的用戶體驗(yàn)。今天我們就來專門說說這個(gè)事兒-——如何提升界面設(shè)計(jì)的可讀性。

要完完全全弄懂這個(gè)問題，以下這些問題都是必要的：

• 可讀性和易讀性究竟是什么？
• 為什么要重視設(shè)計(jì)中的可讀性和易讀性問題？
• 影響Web和App界面可讀性和易讀性的因素有哪些？
• 如何提升界面設(shè)計(jì)的可讀性？

倘若看到此文的你，還在糾結(jié)是不是要花費(fèi)大量時(shí)間弄懂設(shè)計(jì)的可讀性問題，那么我可以肯定的告訴你：這是必須的。原因很簡(jiǎn)單，如果用戶連你頁面上的內(nèi)容都看不清楚，他們還愿意欣賞你的設(shè)計(jì)么？還會(huì)認(rèn)真了解你的產(chǎn)品么？答案顯而易見，用戶絕對(duì)不會(huì)。

那么不廢話了，正式開始吧~

第一部分 什么是可讀性和易讀性？（這里主要針對(duì)數(shù)字內(nèi)容）

可讀性和易讀性這兩個(gè)概念非常相似，以至于很多設(shè)計(jì)師把他們混作一談，但這兩者本質(zhì)上是不盡相同的。用戶在閱讀某一內(nèi)容時(shí)，會(huì)產(chǎn)生不同的感知，根據(jù)感知結(jié)果的不同，可以細(xì)分成可讀性和易讀性——

可讀性：內(nèi)容的可讀性強(qiáng)調(diào)的是用戶理解某一內(nèi)容的難易程度。

可以這么說，可讀性關(guān)注的問題更加深入，它涉及到了用戶對(duì)文本內(nèi)容的理解問題，而不是僅僅停留在用戶查看內(nèi)容和識(shí)別內(nèi)容的層面上?；诖?，要解決內(nèi)容的可讀性問題，就要思考更多，諸如，語言是否簡(jiǎn)單易懂？思維是否清晰？信息是否有用？結(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)確識(shí)別內(nèi)容，比如識(shí)別字符、單詞、句子，以及數(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ū)分特定文本中的某些特定字符和符號(hào)的問題。

但其實(shí)無論你如何理解這些術(shù)語，歸根結(jié)底始終是一個(gè)事兒：用戶如何輕松查看并快速閱讀你的內(nèi)容。

第二部分 影響Web和App界面設(shè)計(jì)中可讀性和易讀性的因素有哪些？

很多因素都會(huì)影響內(nèi)容的可讀性和易讀性，這里主要集中和設(shè)計(jì)過程直接相關(guān)的要點(diǎn)來探討。

背景色

和書本、報(bào)紙等紙質(zhì)媒介一樣，在數(shù)字界面中，背景色對(duì)閱讀體驗(yàn)、區(qū)分交互元素以及識(shí)別內(nèi)容有著至關(guān)重要的作用。我們都知道，在不同的背景下看同一個(gè)物體，會(huì)有不同的視覺體驗(yàn)。類似地，相同的文字內(nèi)容，在白色或淺色背景上顯示為黑色時(shí)，字體看起來會(huì)比在深色背景上的顯示為白色時(shí)大很多。

之所以有這種差異，原因在于配色。錯(cuò)誤的配色方案極可能會(huì)帶來糟糕的可讀性，進(jìn)而導(dǎo)致失敗的用戶體驗(yàn)，致使用戶無法快速瀏覽數(shù)據(jù)、文字，或者其他任何內(nèi)容。一旦內(nèi)容本身不可讀了，即使數(shù)據(jù)之間具備相關(guān)性，用戶也會(huì)產(chǎn)生緊張情緒，不僅無法理解內(nèi)容，甚至還會(huì)錯(cuò)過一些重要信息。

如果設(shè)計(jì)師有研究過不同背景色，并且理解了不同的背景色會(huì)帶來不同的閱讀感知，并搭配了合適的字體，那么理論上講，則任何配色方案都可以保障足夠的可讀性，就看具體怎么設(shè)計(jì)了。此外，不同類型的頁面也要有不同的解決方案：如果是文字很多的頁面，則傾向于使用淺色背景，并可以采用多種配色方案；如果頁面上圖片很多，則常常采用深色背景，這樣可以突出圖片，帶來更為震撼的視覺效果。

Travel Planner app使用了淺色背景確保每個(gè)頁面都是可讀的

這是一個(gè)關(guān)于飲茶的網(wǎng)站，專門留出了白色背景的一塊，展示文案

這是一個(gè)書店網(wǎng)站，深色背景，使用了特定的字體和字體大小，形成對(duì)比，確保可讀性

排版