在一個(gè)頁(yè)面中，用戶(hù)若讀不懂當(dāng)中的信息，不能從中看到有用的信息，這就體現(xiàn)了信息易理解性的重要性。本文將提供控制易理解性的方法，以及對(duì)應(yīng)的具體方式，并結(jié)合相關(guān)案例，與你分享當(dāng)中的技巧，希望對(duì)你有所啟發(fā)。

一圖了解全文內(nèi)容：

一、什么是易理解性

《GB/T 29836-2013 系統(tǒng)與軟件易用性》將易用性拆解位四個(gè)要素，分別為易理解性、易學(xué)性、易操作性和吸引性。從人機(jī)交互系統(tǒng)模型中，我們又可以了解到其中有一環(huán)是“思維處理器（認(rèn)知）”，這就是易理解性所在的地方。信息在發(fā)現(xiàn)之后，肯定要經(jīng)過(guò)大腦的處理，否則無(wú)法理解發(fā)現(xiàn)的信息具備什么含義。

比如在一個(gè)不懂葡萄牙語(yǔ)的人，看一本葡萄牙語(yǔ)寫(xiě)的書(shū)。會(huì)讀不出任何有用的信息來(lái)，只能看到一排排字符。這是個(gè)極端的情況，但也說(shuō)明信息具備易理解性的重要性。這篇文章將提供控制易理解性的方法，以及對(duì)應(yīng)的具體方式。

二、如何控制易理解性

1. 信息之間的關(guān)聯(lián)

（1）從空間角度看

格式塔原理中提到：我們的眼睛和大腦在觀察事物，接收影像刺激的時(shí)候，會(huì)有一些特別的傾向。這些傾向常常可以幫助我們快速的辨別事物。舉例來(lái)說(shuō)當(dāng)我們?cè)谟^察另一個(gè)人的時(shí)候，并不是先看到他的手，腳，頭，眼睛，耳朵，鼻子，然后把這些視覺(jué)特征組合成一個(gè)稱(chēng)為「人」的組合。我們是直接的觀察到人這個(gè)「整體」，而不是手，腳，頭，眼睛，耳朵，鼻子的合集。

利用其中的“視覺(jué)傾向”，把不同類(lèi)別的信息分開(kāi)幫助理解，幫助我們快速識(shí)別到自己想要的信息塊。比如用戶(hù)只想看標(biāo)題，來(lái)判斷自己要不要看這篇文章?？梢岳谩耙曈X(jué)傾向”，比如字體大小、粗細(xì)，就可以幫助用戶(hù)區(qū)分“標(biāo)題”和“正文”。下面我們來(lái)看看“格式塔原理”如何組織信息的。

相似性：

人們習(xí)慣將所看到的東西，按照形狀、大小、顏色、方向等外觀明顯且有某些相似之處的元素自動(dòng)的整合或集合為一組。

案例：京東把產(chǎn)品分類(lèi)用扁平圖標(biāo)顯示，放在上面。百億補(bǔ)貼產(chǎn)品用實(shí)際圖片顯示，放在下面。這樣兩類(lèi)內(nèi)容就很好得區(qū)分開(kāi)了。

接近性：

距離/位置相近的元素趨于組成一個(gè)整體。如下圖，用戶(hù)會(huì)認(rèn)知為“兩條”（兩組圓）而不是“一條”（一組圓）。

案例：在巨量星圖篩選組件中，“標(biāo)簽”和“內(nèi)容”之間有較大的間距，而“內(nèi)容”之間的間距較小，它就是用接近性來(lái)區(qū)分兩者。

閉合性：

構(gòu)成閉合造型的元素趨于組成一個(gè)整體。如下圖，用戶(hù)會(huì)認(rèn)知為兩個(gè)框，而不是許許多多的小圓。我們的視覺(jué)系統(tǒng)自動(dòng)的嘗試將敞開(kāi)的圖形封閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片。

案例：在頁(yè)面設(shè)計(jì)過(guò)程中也有很多地方利用了這條原理。巨量星圖篩選組件中，要區(qū)分“可展示的指標(biāo)”和“已選中的指標(biāo)”內(nèi)容，將兩塊區(qū)域用灰色的線(xiàn)框框起來(lái)。

IBM的Logo運(yùn)用封閉性原則即使部分沒(méi)有了依然不會(huì)影響我們對(duì)整體的圖形的識(shí)別。

連續(xù)性：

我們的大腦會(huì)傾向于將事物看成連續(xù)的形體，連續(xù)性幫助我們通過(guò)構(gòu)圖來(lái)解釋方向和運(yùn)動(dòng)。如下圖，用戶(hù)第一認(rèn)知是一條線(xiàn)，而不是六個(gè)圓。

主體與背景的關(guān)系：

該法則指出我們?cè)诟兄挛锏臅r(shí)候，總是自動(dòng)的將視覺(jué)區(qū)域分為主體和背景。一旦圖像中的某個(gè)部分符合作為背景特征的話(huà)，我們的視覺(jué)感知就不會(huì)把它們作為主體焦點(diǎn)。根據(jù)這樣的原理在用戶(hù)界面設(shè)計(jì)當(dāng)中，我們就可以通過(guò)一些處理將圖像中的某些部分變成背景，這樣可以顯示更多的信息或者將用戶(hù)的焦點(diǎn)轉(zhuǎn)移。如下圖中，我們往往會(huì)注意到藍(lán)色的正方形，而不會(huì)去注意淡藍(lán)色的背景。

案例：在IOS的軟件界面打開(kāi)“應(yīng)用聚合”，會(huì)將背景模糊處理，使用戶(hù)的視覺(jué)焦點(diǎn)轉(zhuǎn)移到新的主體上。如果不那么處理，豐富的背景會(huì)搶奪用戶(hù)的注意力。

（2）從時(shí)間角度看

當(dāng)操作之后馬上出現(xiàn)變化，用戶(hù)往往會(huì)把這個(gè)“操作”和這個(gè)“變化”聯(lián)系起來(lái)，甚至哪怕事實(shí)上兩者沒(méi)有關(guān)系。系統(tǒng)在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專(zhuān)注，并提高生產(chǎn)效率。當(dāng)高延遲不可避免的時(shí)候，使用有趣的加載動(dòng)畫(huà)。

案例：在映兔官網(wǎng)中，將鼠標(biāo)懸浮到“立即咨詢(xún)”上，會(huì)出現(xiàn)客服的二維碼。這樣“鼠標(biāo)懸浮操作”和“出現(xiàn)二維碼”就被聯(lián)系在一起了。

共同命運(yùn)：

指在其他條件相同時(shí)，朝同一方運(yùn)動(dòng)和具有相同速度的元素會(huì)被組織在一起，無(wú)論元素之間有形狀、顏色的差異。

案例：京東首頁(yè)下滑中，我們可以看到頂部和底部沒(méi)有移動(dòng)，中間的內(nèi)容在移動(dòng)。這種“共同命運(yùn)”把兩者區(qū)分開(kāi)來(lái)，用戶(hù)能更加注意看中間的內(nèi)容。

2. 模仿

當(dāng)今社會(huì)飛速發(fā)展，科技在我們的生活中扮演越來(lái)越重要的角色。其中最具有代表性的便是手機(jī)、電腦，衣食住行與它們捆綁在一起，使得人們對(duì)它們產(chǎn)生了深深的依賴(lài)?；瑒?dòng)、點(diǎn)擊，人們熟練得使用著設(shè)備，使用它們延展自己的世界。

然而20世紀(jì)70年代之前，早期的電腦卻只有專(zhuān)家們?cè)谑褂?。除了昂貴的價(jià)格，巨大的學(xué)習(xí)成本勸退普通人。下圖是命令行，若是沒(méi)有系統(tǒng)學(xué)習(xí)過(guò)的人無(wú)法理解這到底是什么。

而在20世紀(jì)70年代，一項(xiàng)人機(jī)交互歷史上最偉大的產(chǎn)品誕生了——圖形界面。施樂(lè)公司（Xerox）將晦澀難懂的命令行轉(zhuǎn)化成連小孩子都易于理解的東西，進(jìn)一步普及了計(jì)算機(jī)。

圖形化所使用的便是“隱喻”?！半[喻”一詞來(lái)自于希臘語(yǔ)，意思為“意義的轉(zhuǎn)化”，用一個(gè)詞表達(dá)另外一個(gè)詞。這樣交互設(shè)計(jì)可以用一個(gè)熟悉的東西去比喻一個(gè)不熟悉的東西，讓使用者更好理解、使用一個(gè)他從來(lái)沒(méi)有遇到過(guò)的東西。

（1）現(xiàn)實(shí)世界的模仿-隱喻

空間隱喻：

空間隱喻中最為知名的便是Material Design中“陰影”。雖然屏幕在物理上是一個(gè)平面，但是Material Design卻將界面理解成一個(gè)有高度的空間。各個(gè)組件在其中有不同的高度，在光線(xiàn)的照射下會(huì)出現(xiàn)陰影，而組件的高度可以用陰影來(lái)表達(dá)。組件越高，陰影越彌散，如下圖所示。陰影在不同設(shè)備中高度并不一致，例如“桌面端的靜止?fàn)顟B(tài)的海拔高度比所列值低 2dp，以適應(yīng)鼠標(biāo)和非觸控環(huán)境。”

Material Design通過(guò)對(duì)陰影的控制，讓使用者更容易理解界面上所發(fā)生的事情，更加易于使用。

除了陰影表達(dá)空間，運(yùn)用上面的格式塔心理學(xué)能起到同樣的作用。格式塔心理學(xué)又叫完形心理學(xué)，其中的封閉性提出，當(dāng)人看到某個(gè)部分又缺失的時(shí)候，我們的大腦會(huì)將不完整的信息按照已有的信息填補(bǔ)，形成一個(gè)易于理解的整體。如下圖，這看起來(lái)是三個(gè)殘缺的圓，它們組成了一個(gè)三角形。這里特性同樣在界面上使用。

在許多應(yīng)用中，我們常常能看見(jiàn)下面的那種活動(dòng)面板，一般由下方升起。它出現(xiàn)的形式暗示了屏幕中的空間。另外，對(duì)于活動(dòng)面板上方的角，優(yōu)秀的設(shè)計(jì)都會(huì)將其設(shè)計(jì)成圓角，后方的“圖像”表現(xiàn)出“殘缺”，同時(shí)暗示下方內(nèi)容的存在。

圖形隱喻：

圖形隱喻是最為常見(jiàn)的，也可以說(shuō)最為重要的隱喻方式了。據(jù)實(shí)驗(yàn)顯示人從外界接受的信息中，視覺(jué)占70%以上。

按鈕可以說(shuō)是應(yīng)用中最常見(jiàn)的組件之一了。根據(jù)生活中的經(jīng)驗(yàn)，按鈕自然而然跟“按下”這個(gè)操作聯(lián)系在一起。下方圖中的app界面是一個(gè)空白頁(yè)，一旦加上按鈕之后，就會(huì)引導(dǎo)使用者按下。視覺(jué)隱喻的例子有很多，Gui界面中幾乎處處都是——“記事本”、“照相機(jī)”等等，在此也不需要列舉。

聽(tīng)覺(jué)/觸覺(jué)隱喻：

聽(tīng)覺(jué)和觸覺(jué)隱喻雖然沒(méi)有視覺(jué)隱喻一樣大行其道。但是它們?nèi)匀话l(fā)揮者重要的作用。下面是iphone自帶的時(shí)鐘應(yīng)用。只要體驗(yàn)過(guò)，就能感受到聽(tīng)覺(jué)和觸覺(jué)的作用。線(xiàn)性馬達(dá)的震動(dòng)、“滴滴”的聲響給人無(wú)與倫比的體驗(yàn)，仿佛是十幾年前給時(shí)鐘擰發(fā)條一般。

（2）同類(lèi)產(chǎn)品的模仿

喻體不但可以是現(xiàn)實(shí)中的，也可以是虛擬中的。如下圖，京東、淘寶和拼多多三個(gè)電商平臺(tái)的app界面，它們的頁(yè)面結(jié)構(gòu)出奇相似。最上面是“產(chǎn)品分類(lèi)區(qū)”，下面是“活動(dòng)商品區(qū)”，最下面是“商品瀑布流區(qū)”。最開(kāi)始應(yīng)用這個(gè)結(jié)構(gòu)的產(chǎn)品不清楚，但是大公司不一而同地使用了這個(gè)方式。一方面是因?yàn)樗_實(shí)有效，另一方面是因?yàn)橛脩?hù)已經(jīng)習(xí)慣了這樣的結(jié)構(gòu)。

模仿可靠競(jìng)品，能提高用戶(hù)對(duì)產(chǎn)品的熟悉度和安全感。

3. 易取原則

易取原則是指用戶(hù)對(duì)于頁(yè)面內(nèi)的交互應(yīng)盡可能明晰，通過(guò)把組件、按鈕及選項(xiàng)可見(jiàn)化，來(lái)降低用戶(hù)的記憶負(fù)荷。用戶(hù)不需要記住各個(gè)對(duì)話(huà)框中的信息。

（1）減少信息量

人的注意力是有限的，在面對(duì)復(fù)雜信息會(huì)不知所措，難以找到自己想要的信息。所以要提供精簡(jiǎn)、準(zhǔn)確的信息，不是越多越好。很多產(chǎn)品喜歡在外面加月來(lái)越多的信息，因?yàn)檎J(rèn)為在外面給信息，用戶(hù)不用點(diǎn)進(jìn)去看。但實(shí)際上，用戶(hù)可能就判斷不去看這個(gè)信息塊了。

案例：如下圖左側(cè)的信息內(nèi)容非常復(fù)雜，對(duì)于我來(lái)說(shuō)有很多的無(wú)用信息。比如“紅包最高22元”，對(duì)于老用戶(hù)而言，早就知道“最高”意味什么意思了。修改之后的信息更加簡(jiǎn)潔，對(duì)我的選擇更有幫助。

（2）圖形而不是文字

人們一說(shuō)到傳遞信息往往想到用文字，但圖形常常被遺忘。實(shí)際上圖形表意不但歷史悠久，而且方便記憶，甚至含義可以超過(guò)文字。

如下圖，這是figma界面中的一部分，我們可以很明顯得看出在熟悉的情況下“圖形”的信息密度，高于“文字”的信息密度。

（3）文案用語(yǔ)

文案貼近用戶(hù)理解：

產(chǎn)品功能/相關(guān)概念，應(yīng)以用戶(hù)理解為中心，使用用戶(hù)熟悉的語(yǔ)言。避免使用過(guò)度專(zhuān)業(yè)或生澀的表述，讓用戶(hù)產(chǎn)生困惑；若必須使用專(zhuān)業(yè)詞匯，可在旁邊增加相關(guān)注釋說(shuō)明，讓用戶(hù)快速理解其含義，不至于猜來(lái)猜去，最終放棄使用。

案例：下圖是崩壞學(xué)院二在應(yīng)用商店的介紹。前面一個(gè)是2014年，大部分人對(duì)其中的文案會(huì)一頭霧水。大家都用中文，咋就看不懂呢。但是針對(duì)其二次元用戶(hù)群體是非常有意思的介紹，哪怕現(xiàn)在這段文案還會(huì)發(fā)在互聯(lián)網(wǎng)上。

用詞簡(jiǎn)練：

能用一句話(huà)說(shuō)清楚的，不要用兩句話(huà)。易用性是針對(duì)信息的傳遞的準(zhǔn)確性，所以這里不涉及趣味性。

1. 確認(rèn)要傳達(dá)的內(nèi)容
2. 所有內(nèi)容圍繞要傳達(dá)的內(nèi)容
3. 把結(jié)論放在前面
4. 減少長(zhǎng)句

4. 詳細(xì)介紹

用戶(hù)面對(duì)完全陌生的東西時(shí)會(huì)感到無(wú)助，為了幫助用戶(hù)進(jìn)入下一個(gè)階段，需要去引導(dǎo)用戶(hù)。一般使用文字和視頻兩種方式。

（1）從文字角度

Tooltip 文字提示：

針對(duì)名稱(chēng)的解釋?zhuān)?dāng)Input Prompt超過(guò)兩行的時(shí)候要使用Tooltips。

Input Prompt 輸入說(shuō)明：

Input Prompt是適用性最廣的幫助方式，Input Hints往往使用在有input的組件里，Input Prompt在其他地方同樣能夠使用。相比Tooltips、Input Hints有更強(qiáng)的存在感，會(huì)占用一定空間，可用于不容易記憶且重要的內(nèi)容。Input Prompt可以使用按鈕跳轉(zhuǎn)到相關(guān)網(wǎng)頁(yè)。

Input Hints 輸入線(xiàn)索：

用于輸入框內(nèi)，其內(nèi)容需要比Input Prompt更容易理解。因?yàn)樗鼤?huì)被輸入的內(nèi)容覆蓋。

Alert警告：

Alert可以在表單某卡片內(nèi)，也可以在卡片外，主要取決于它作用的范圍。另外可以弱提醒，放在title的右側(cè)。算Alert的弱化版。

幫助中心：

作為所有幫助中心的集合地，用戶(hù)有不理解的地方就會(huì)到這里。打造合理、高效的幫助中心，就可以減少大量的用戶(hù)支持工作了。

下圖為藍(lán)湖的幫助中心，結(jié)構(gòu)清晰——左側(cè)列出文章，右側(cè)是文章目錄。

（2）從視頻角度

新手幫助：

面對(duì)上手門(mén)檻極高，用戶(hù)完全陌生的產(chǎn)品，因?yàn)閳D文的視覺(jué)化能力不足以支撐一點(diǎn)都不懂的用戶(hù)，需要用視頻逐步為用戶(hù)介紹功能。下圖為巨量星圖首頁(yè)的新手上路模塊。

總結(jié)

易理解性雖然不常被提及，且被提及后只簡(jiǎn)單用幾個(gè)例子講述，缺少更底層的原理。本文用“信息之間的關(guān)聯(lián)”、“模仿”、“易取原則”、“文案用語(yǔ)”、“詳細(xì)介紹”5個(gè)方面進(jìn)行闡述了如何控制易理解性。希望這篇文章可以幫助到更多剛接觸易理解性的設(shè)計(jì)師。