在一個頁面中，用戶若讀不懂當中的信息，不能從中看到有用的信息，這就體現了信息易理解性的重要性。本文將提供控制易理解性的方法，以及對應的具體方式，并結合相關案例，與你分享當中的技巧，希望對你有所啟發。

一圖了解全文內容：

一、什么是易理解性

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

比如在一個不懂葡萄牙語的人，看一本葡萄牙語寫的書。會讀不出任何有用的信息來，只能看到一排排字符。這是個極端的情況，但也說明信息具備易理解性的重要性。這篇文章將提供控制易理解性的方法，以及對應的具體方式。

二、如何控制易理解性

1. 信息之間的關聯

（1）從空間角度看

格式塔原理中提到：我們的眼睛和大腦在觀察事物，接收影像刺激的時候，會有一些特別的傾向。這些傾向常?？梢詭椭覀兛焖俚谋鎰e事物。舉例來說當我們在觀察另一個人的時候，并不是先看到他的手，腳，頭，眼睛，耳朵，鼻子，然后把這些視覺特征組合成一個稱為「人」的組合。我們是直接的觀察到人這個「整體」，而不是手，腳，頭，眼睛，耳朵，鼻子的合集。

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

相似性：

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

案例：京東把產品分類用扁平圖標顯示，放在上面。百億補貼產品用實際圖片顯示，放在下面。這樣兩類內容就很好得區分開了。

接近性：

距離/位置相近的元素趨于組成一個整體。如下圖，用戶會認知為“兩條”（兩組圓）而不是“一條”（一組圓）。

案例：在巨量星圖篩選組件中，“標簽”和“內容”之間有較大的間距，而“內容”之間的間距較小，它就是用接近性來區分兩者。

閉合性：

構成閉合造型的元素趨于組成一個整體。如下圖，用戶會認知為兩個框，而不是許許多多的小圓。我們的視覺系統自動的嘗試將敞開的圖形封閉起來，從而將其感知為完整的物體而不是分散的碎片。

案例：在頁面設計過程中也有很多地方利用了這條原理。巨量星圖篩選組件中，要區分“可展示的指標”和“已選中的指標”內容，將兩塊區域用灰色的線框框起來。

IBM的Logo運用封閉性原則即使部分沒有了依然不會影響我們對整體的圖形的識別。

連續性：

我們的大腦會傾向于將事物看成連續的形體，連續性幫助我們通過構圖來解釋方向和運動。如下圖，用戶第一認知是一條線，而不是六個圓。

主體與背景的關系：

該法則指出我們在感知事物的時候，總是自動的將視覺區域分為主體和背景。一旦圖像中的某個部分符合作為背景特征的話，我們的視覺感知就不會把它們作為主體焦點。根據這樣的原理在用戶界面設計當中，我們就可以通過一些處理將圖像中的某些部分變成背景，這樣可以顯示更多的信息或者將用戶的焦點轉移。如下圖中，我們往往會注意到藍色的正方形，而不會去注意淡藍色的背景。

案例：在IOS的軟件界面打開“應用聚合”，會將背景模糊處理，使用戶的視覺焦點轉移到新的主體上。如果不那么處理，豐富的背景會搶奪用戶的注意力。

（2）從時間角度看

當操作之后馬上出現變化，用戶往往會把這個“操作”和這個“變化”聯系起來，甚至哪怕事實上兩者沒有關系。系統在 400ms 內對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產效率。當高延遲不可避免的時候，使用有趣的加載動畫。

案例：在映兔官網中，將鼠標懸浮到“立即咨詢”上，會出現客服的二維碼。這樣“鼠標懸浮操作”和“出現二維碼”就被聯系在一起了。

共同命運：

指在其他條件相同時，朝同一方運動和具有相同速度的元素會被組織在一起，無論元素之間有形狀、顏色的差異。

案例：京東首頁下滑中，我們可以看到頂部和底部沒有移動，中間的內容在移動。這種“共同命運”把兩者區分開來，用戶能更加注意看中間的內容。

2. 模仿

當今社會飛速發展，科技在我們的生活中扮演越來越重要的角色。其中最具有代表性的便是手機、電腦，衣食住行與它們捆綁在一起，使得人們對它們產生了深深的依賴?；瑒?、點擊，人們熟練得使用著設備，使用它們延展自己的世界。

然而20世紀70年代之前，早期的電腦卻只有專家們在使用。除了昂貴的價格，巨大的學習成本勸退普通人。下圖是命令行，若是沒有系統學習過的人無法理解這到底是什么。

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

圖形化所使用的便是“隱喻”?！半[喻”一詞來自于希臘語，意思為“意義的轉化”，用一個詞表達另外一個詞。這樣交互設計可以用一個熟悉的東西去比喻一個不熟悉的東西，讓使用者更好理解、使用一個他從來沒有遇到過的東西。

（1）現實世界的模仿-隱喻

空間隱喻：

空間隱喻中最為知名的便是Material Design中“陰影”。雖然屏幕在物理上是一個平面，但是Material Design卻將界面理解成一個有高度的空間。各個組件在其中有不同的高度，在光線的照射下會出現陰影，而組件的高度可以用陰影來表達。組件越高，陰影越彌散，如下圖所示。陰影在不同設備中高度并不一致，例如“桌面端的靜止狀態的海拔高度比所列值低 2dp，以適應鼠標和非觸控環境?！?/p>

Material Design通過對陰影的控制，讓使用者更容易理解界面上所發生的事情，更加易于使用。

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

在許多應用中，我們常常能看見下面的那種活動面板，一般由下方升起。它出現的形式暗示了屏幕中的空間。另外，對于活動面板上方的角，優秀的設計都會將其設計成圓角，后方的“圖像”表現出“殘缺”，同時暗示下方內容的存在。

圖形隱喻：

圖形隱喻是最為常見的，也可以說最為重要的隱喻方式了。據實驗顯示人從外界接受的信息中，視覺占70%以上。

按鈕可以說是應用中最常見的組件之一了。根據生活中的經驗，按鈕自然而然跟“按下”這個操作聯系在一起。下方圖中的app界面是一個空白頁，一旦加上按鈕之后，就會引導使用者按下。視覺隱喻的例子有很多，Gui界面中幾乎處處都是——“記事本”、“照相機”等等，在此也不需要列舉。

聽覺/觸覺隱喻：

聽覺和觸覺隱喻雖然沒有視覺隱喻一樣大行其道。但是它們仍然發揮者重要的作用。下面是iphone自帶的時鐘應用。只要體驗過，就能感受到聽覺和觸覺的作用。線性馬達的震動、“滴滴”的聲響給人無與倫比的體驗，仿佛是十幾年前給時鐘擰發條一般。

（2）同類產品的模仿

喻體不但可以是現實中的，也可以是虛擬中的。如下圖，京東、淘寶和拼多多三個電商平臺的app界面，它們的頁面結構出奇相似。最上面是“產品分類區”，下面是“活動商品區”，最下面是“商品瀑布流區”。最開始應用這個結構的產品不清楚，但是大公司不一而同地使用了這個方式。一方面是因為它確實有效，另一方面是因為用戶已經習慣了這樣的結構。

模仿可靠競品，能提高用戶對產品的熟悉度和安全感。

3. 易取原則

易取原則是指用戶對于頁面內的交互應盡可能明晰，通過把組件、按鈕及選項可見化，來降低用戶的記憶負荷。用戶不需要記住各個對話框中的信息。

（1）減少信息量

人的注意力是有限的，在面對復雜信息會不知所措，難以找到自己想要的信息。所以要提供精簡、準確的信息，不是越多越好。很多產品喜歡在外面加月來越多的信息，因為認為在外面給信息，用戶不用點進去看。但實際上，用戶可能就判斷不去看這個信息塊了。

案例：如下圖左側的信息內容非常復雜，對于我來說有很多的無用信息。比如“紅包最高22元”，對于老用戶而言，早就知道“最高”意味什么意思了。修改之后的信息更加簡潔，對我的選擇更有幫助。

（2）圖形而不是文字

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

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

（3）文案用語

文案貼近用戶理解：

產品功能/相關概念，應以用戶理解為中心，使用用戶熟悉的語言。避免使用過度專業或生澀的表述，讓用戶產生困惑；若必須使用專業詞匯，可在旁邊增加相關注釋說明，讓用戶快速理解其含義，不至于猜來猜去，最終放棄使用。

案例：下圖是崩壞學院二在應用商店的介紹。前面一個是2014年，大部分人對其中的文案會一頭霧水。大家都用中文，咋就看不懂呢。但是針對其二次元用戶群體是非常有意思的介紹，哪怕現在這段文案還會發在互聯網上。

用詞簡練：

能用一句話說清楚的，不要用兩句話。易用性是針對信息的傳遞的準確性，所以這里不涉及趣味性。

1. 確認要傳達的內容
2. 所有內容圍繞要傳達的內容
3. 把結論放在前面
4. 減少長句

4. 詳細介紹

用戶面對完全陌生的東西時會感到無助，為了幫助用戶進入下一個階段，需要去引導用戶。一般使用文字和視頻兩種方式。

（1）從文字角度

Tooltip 文字提示：

針對名稱的解釋，當Input Prompt超過兩行的時候要使用Tooltips。

Input Prompt 輸入說明：

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

Input Hints 輸入線索：

用于輸入框內，其內容需要比Input Prompt更容易理解。因為它會被輸入的內容覆蓋。

Alert警告：

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

幫助中心：

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

下圖為藍湖的幫助中心，結構清晰——左側列出文章，右側是文章目錄。

（2）從視頻角度

新手幫助：

面對上手門檻極高，用戶完全陌生的產品，因為圖文的視覺化能力不足以支撐一點都不懂的用戶，需要用視頻逐步為用戶介紹功能。下圖為巨量星圖首頁的新手上路模塊。

總結

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