為了獲得專業(yè)的知識和技巧，設計師將會面對一系列特定的專業(yè)術語。我們已經發(fā)布了一些和可用性、網頁設計、商業(yè)術語以及導航、色彩等有關的帖子。新文章延續(xù)了用戶體驗設計中的心理學的主題，并為UX設計術語表添加了一個新的主題。今天討論的是可供性（Affordance）——通過微妙的線索幫助用戶與界面進行交互。

1 什么是可供性（Affordance）

功能可供性是一個對象的屬性或特征，它表明了該對象可以用來做什么。 簡而言之，功能可供性提供了一個線索，暗示用戶如何與某物互動，無論該物體是物理的，還是數字的。

比如：

• 當你看到一個門把手的時候，它就是一個提示，提醒你可以用它來打開門。
• 當你看到一個聽筒形狀的圖標時，你就會知道點擊它可以撥打電話。

可供性使我們的生活更加容易，因為他能幫助我們和物理世界和虛擬對象進行交互。

觀察下方Watering Tracker的界面，屏幕上的勾號瞬間就會讓你明白，操作已完成。

而下方的Tab Bar會讓你很快就明白，你可以用這個APP來干嘛——檢查你的植物（這個TAB是活動的，因為他是彩色的而其他的不是），新增一個植物，或者檢查你的個人信息。

這些都是可供性給予的啟示。

2 可供性的歷史

這個術語最早由心理學家James Gibson提出來，他曾經對視知覺展開過深入的研究。在1966年，他在《感覺作為知覺系統(tǒng)（The Senses Considered as Perceptual Systems）》一書中第一次使用該詞。「略……可查看原文」

3 用戶界面中可供性的形態(tài)

UI中的可供性可以根據其性能和呈現(xiàn)進行分類。 無論如何，他們的主要目標是利用人們已經擁有的知識和經驗來簡化交互流程。

4 顯性和隱性可供性

根據功能的不同，我們可以在UI界面中找到一些明顯的或者隱藏的提示。

顯性可供性基于用戶廣泛的認知和典型的提示符號，直接引導用戶來執(zhí)行某個操作。

比如，當你看到一個元素，被設計得類似于物理世界中得按鈕，你就會明白，他是可以點擊的。

如果在這個元素上，還有文字或者圖標加以說明，則可供性變得更加清晰：他會告訴你，系統(tǒng)會提供什么反饋。

隱性的可供性并不是很明顯的。它們通常是隱藏的，只會在特定的用戶操作流中顯示。

比如，當我們懸停在某些元素上，會獲得的提示就是隱性的可供性。還有下拉菜單或可擴展按鈕，這些元素不是一直都能看到，也不是從交互的第一秒就開始看到，而是在特定的操作之后才會顯示出來。

這里最有爭議的一點是關于漢堡菜單的，它隱藏了特殊圖標背后的功能，可發(fā)現(xiàn)性較低，不夠一目了然，因此，效率較低。

5 圖形的可供性

圖形的可供性主要通過界面上的視覺效果來呈現(xiàn)，從而幫助用戶理解其功能。用戶對圖形的感知和記憶都比純文本強，因此，他們的重要性并沒有被高估。

圖形的使用，我們通?？梢苑譃橐韵聨状箢悾?/p>

5.1 照片

主題照片、物品照片、頭像和標題圖片會通過視覺給用戶傳達一些信息，從用戶通?？梢允褂迷揂PP或網站處理哪些事情（購買、交流、展示、觀看、學習、寫作等），到這些特定功能的內容。

比如說，如果一個APP允許用戶保存和共享食譜，那么使用下面的示例中的照片設置即時關聯(lián)是很有意思的。

5.2 品牌標識

將公司的品牌標識，標志、Logo、色彩等應用在網站或者APP上，會立即在用戶界面和品牌之間建立一個聯(lián)系，對于忠實的用戶而言，這將是一個極強的可供性。

5.3 插畫

主題插圖和吉祥物具有向用戶提供明確提示的巨大潛力。

下面，你可以看到一個彈出窗口，通過著名的視覺提示——萬圣節(jié)南瓜，告知用戶Toonie Alarm中的萬圣節(jié)貼紙上線了。

5.4 Icon

界面圖標可能是最具多樣性的視覺可供性。這些象形圖具有高度的象征性，大多使用來自現(xiàn)實世界，所以用戶可以快速地理解。

更重要的是，即便一些圖標與原始物理對象之間不存在聯(lián)系，但如果被大量用戶記住，它們仍然具有高效的功能：“保存”的按鈕就是一個很好的例子。

再比如，一顆愛心或星星會立刻讓你想到收藏，一個放大鏡會提示你它是一個搜索，一個相機圖標會讓你明白它是用來拍照的。

圖標也被用作內容分類的有效提示：在適當圖形的支持下，用戶對分類的使用會高效許多。

5.5 按鈕

作為核心交互元素之一，按鈕是界面上最常見的元素之一。在GUI時代之前，從簡單的計算器到復雜的儀表盤，都要使用到按鈕。我們都很清楚如何使用按鈕，關鍵是要通過形狀、對比度、顏色、信息等使界面中的按鈕可見。

5.6 文本框

文本框是指用戶可以進行信息錄入的空間。

為了使文本框可以更加高效地被使用，設計師應該使文本框具有很好的交互性：人們可以立即理解里面是可以輸入文本的。

下面的Perfect Recipes App界面中的搜索功能：很明顯，由于形狀和對比，加上搜索圖標以及提供指令的文本，該部分內容是一個交互元素，具有較好的可供性。

5.7 通知

有許多方法可以通過通知提示用戶遺漏的信息或者是需要被注意到的信息。下方這張界面上，添加選購數目時，價格的變化上的小動畫，也是對操作結果的通知；購物車上一個黃色的點會給用戶一個快速的提示——他不是空的。

6 文本的可供性

盡管用戶對圖片的感知要比文本快很多，文本對交互流的影響仍然不可忽略。關鍵是圖像有時需要借助文本進行解碼，以避免誤解。

另一件事是，并非所有東西都可以在圖片中顯示。最后，文本在傳輸信息，標記指令，號召性用語，解釋功能和排版層次結構方面具有令人難以置信的多樣性。但是，文本應以合理的平衡給出，以避免過度使用，影響效率。

文本的交互對于日常生活中的人來說非常自然，比圖形用戶界面存在的時間長得多。文本線索和提示有助于了解要做什么或期望什么，要記住哪些信息。我們從報紙書籍上閱讀了許多信息，在數字用戶界面中，它的工作方式相同。這是一種與用戶進行通信的簡單方法。

例如，HealthCare應用程序的日歷顯示了語言的各種可供性：除了有關患者的主要信息之外，我們可以看到搜索字段中的復制提示，按鈕上的號召性用語副本以及給出的文本線索。同時，日歷的空字段顯示用戶可以添加一天的約會只需點擊空格。

7 模式的可供性

模式可供性是基于習慣的力量，并提供有效交互設計的巨大因素。它們的最大優(yōu)點是可以減少用戶的認知負擔。正如我們在向UX設計者介紹人類記憶機制的文章中所提到的，短期記憶的能力是有限的。因此，用戶學習的模式越多，他們的導航就越清晰，他們處理新輸入的效果就越好。

這種類型有許多典型的功能，例如：

• 我們都習慣于通常打開頁面右上角的LOGO可以 回到主頁；
• 我們知道帶下劃線的文本通常是一個可點擊的鏈接；
• 有關網站的聯(lián)系人和隱私政策的信息通常在網站頁腳中找到；
• 應用程序布局中的三個垂直點意味著“更多”顯示其他功能。

保存這些模式意味著讓用戶感覺他們理解界面。因此，如果需要打破模式可供性，請三思而后行：對原創(chuàng)性應該為用戶進行推理和明確。

8 動態(tài)（Animated）的可供性

在用戶界面上使用動畫，給物理界面和現(xiàn)實世界創(chuàng)造了一個強連接。在大多數案例中，動畫模仿了與真實事物之間的交互：拉、推、刷、拖等等。所以，無論是簡單的還是復雜的動畫都呈現(xiàn)出了強有力的可供性。

下方的動圖展示了Toonie Alarm App。當開關打開的時候，他會同時修改幾個參數：整個標簽的顏色、切換鍵的顏色以及激活太陽的動畫。通過這種反饋，用戶可以立即知道操作結果，也增加了操作結果的情感吸引力。

另一個例子是Home Budget的交互流中的通知——給用戶特定的限制的通知。它的動畫特點是連續(xù)強調的，這種方式會引起用戶對重要警告的關注。

還有一個案例——下拉刷新動畫。呈現(xiàn)在屏幕上的動畫不僅告訴用戶界面正在刷新，并且還為等待的過程增加了一些樂趣。

9 負面（Negative）的可供性

無論聽上去多么奇怪，負面的可供性確實在積極的用戶體驗上扮演了一個重要的角色：他們基于這樣一個事實而存在——負面的結果也是結果。負面的可供性的目的是給用戶一些提示，一些元素或者選項在此刻是不可以被使用的。

例如，下圖Homey應用的界面表明Bedroom這個按鈕現(xiàn)在處于活躍狀態(tài)而其他房間的按鈕都是不可用的——所以，這里使用了一個負面的可供性，最下方的安全級別也是一樣的，級別5是完全不可用的。

下方的Tab bar上，活動的button是彩色的，其他非活躍的button則采用了負面的可供性，即置灰。

10 虛假（False）的可供性

從交互的可供性（UX affordances）來看，虛假和負面不應該被視為同義詞。虛假的可供性是設計師應當避免的，這些有歧義的提示，會導致用戶產生與其目的不符的行為或者結果。

有時，設計師會故意這么做，比如引導用戶進入某個廣告頁面，但是，在大多數情況下是不合適的。

此外，如果一個網頁文本加了下劃線，用戶很可能默認他是可以點擊的。一旦發(fā)現(xiàn)是不可以被點擊的，用戶可能會很惱火，因為他們接受到了錯誤的提示信息。

原文鏈接：https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4

編譯作者：張大俠，公眾號：「俠俠說」

本文由 @張大俠 翻譯發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議。