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

1 什么是可供性（Affordance）

功能可供性是一個(gè)對(duì)象的屬性或特征，它表明了該對(duì)象可以用來(lái)做什么。 簡(jiǎn)而言之，功能可供性提供了一個(gè)線索，暗示用戶如何與某物互動(dòng)，無(wú)論該物體是物理的，還是數(shù)字的。

比如：

• 當(dāng)你看到一個(gè)門把手的時(shí)候，它就是一個(gè)提示，提醒你可以用它來(lái)打開門。
• 當(dāng)你看到一個(gè)聽筒形狀的圖標(biāo)時(shí)，你就會(huì)知道點(diǎn)擊它可以撥打電話。

可供性使我們的生活更加容易，因?yàn)樗軒椭覀兒臀锢硎澜绾吞摂M對(duì)象進(jìn)行交互。

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

而下方的Tab Bar會(huì)讓你很快就明白，你可以用這個(gè)APP來(lái)干嘛——檢查你的植物（這個(gè)TAB是活動(dòng)的，因?yàn)樗遣噬亩渌牟皇牵略鲆粋€(gè)植物，或者檢查你的個(gè)人信息。

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

2 可供性的歷史

這個(gè)術(shù)語(yǔ)最早由心理學(xué)家James Gibson提出來(lái)，他曾經(jīng)對(duì)視知覺展開過深入的研究。在1966年，他在《感覺作為知覺系統(tǒng)（The Senses Considered as Perceptual Systems）》一書中第一次使用該詞?！嘎?#8230;…可查看原文」

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

UI中的可供性可以根據(jù)其性能和呈現(xiàn)進(jìn)行分類。 無(wú)論如何，他們的主要目標(biāo)是利用人們已經(jīng)擁有的知識(shí)和經(jīng)驗(yàn)來(lái)簡(jiǎn)化交互流程。

4 顯性和隱性可供性

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

顯性可供性基于用戶廣泛的認(rèn)知和典型的提示符號(hào)，直接引導(dǎo)用戶來(lái)執(zhí)行某個(gè)操作。

比如，當(dāng)你看到一個(gè)元素，被設(shè)計(jì)得類似于物理世界中得按鈕，你就會(huì)明白，他是可以點(diǎn)擊的。

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

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

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

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

5 圖形的可供性

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

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

5.1 照片

主題照片、物品照片、頭像和標(biāo)題圖片會(huì)通過視覺給用戶傳達(dá)一些信息，從用戶通?？梢允褂迷揂PP或網(wǎng)站處理哪些事情（購(gòu)買、交流、展示、觀看、學(xué)習(xí)、寫作等），到這些特定功能的內(nèi)容。

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

5.2 品牌標(biāo)識(shí)

將公司的品牌標(biāo)識(shí)，標(biāo)志、Logo、色彩等應(yīng)用在網(wǎng)站或者APP上，會(huì)立即在用戶界面和品牌之間建立一個(gè)聯(lián)系，對(duì)于忠實(shí)的用戶而言，這將是一個(gè)極強(qiáng)的可供性。

5.3 插畫

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

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

5.4 Icon

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

更重要的是，即便一些圖標(biāo)與原始物理對(duì)象之間不存在聯(lián)系，但如果被大量用戶記住，它們?nèi)匀痪哂懈咝У墓δ埽骸氨４妗钡陌粹o就是一個(gè)很好的例子。

再比如，一顆愛心或星星會(huì)立刻讓你想到收藏，一個(gè)放大鏡會(huì)提示你它是一個(gè)搜索，一個(gè)相機(jī)圖標(biāo)會(huì)讓你明白它是用來(lái)拍照的。

圖標(biāo)也被用作內(nèi)容分類的有效提示：在適當(dāng)圖形的支持下，用戶對(duì)分類的使用會(huì)高效許多。

5.5 按鈕

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

5.6 文本框

文本框是指用戶可以進(jìn)行信息錄入的空間。

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

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

5.7 通知

有許多方法可以通過通知提示用戶遺漏的信息或者是需要被注意到的信息。下方這張界面上，添加選購(gòu)數(shù)目時(shí)，價(jià)格的變化上的小動(dòng)畫，也是對(duì)操作結(jié)果的通知；購(gòu)物車上一個(gè)黃色的點(diǎn)會(huì)給用戶一個(gè)快速的提示——他不是空的。

6 文本的可供性

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

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

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

例如，HealthCare應(yīng)用程序的日歷顯示了語(yǔ)言的各種可供性：除了有關(guān)患者的主要信息之外，我們可以看到搜索字段中的復(fù)制提示，按鈕上的號(hào)召性用語(yǔ)副本以及給出的文本線索。同時(shí)，日歷的空字段顯示用戶可以添加一天的約會(huì)只需點(diǎn)擊空格。

7 模式的可供性

模式可供性是基于習(xí)慣的力量，并提供有效交互設(shè)計(jì)的巨大因素。它們的最大優(yōu)點(diǎn)是可以減少用戶的認(rèn)知負(fù)擔(dān)。正如我們?cè)谙騏X設(shè)計(jì)者介紹人類記憶機(jī)制的文章中所提到的，短期記憶的能力是有限的。因此，用戶學(xué)習(xí)的模式越多，他們的導(dǎo)航就越清晰，他們處理新輸入的效果就越好。

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

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

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

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

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

下方的動(dòng)圖展示了Toonie Alarm App。當(dāng)開關(guān)打開的時(shí)候，他會(huì)同時(shí)修改幾個(gè)參數(shù)：整個(gè)標(biāo)簽的顏色、切換鍵的顏色以及激活太陽(yáng)的動(dòng)畫。通過這種反饋，用戶可以立即知道操作結(jié)果，也增加了操作結(jié)果的情感吸引力。

另一個(gè)例子是Home Budget的交互流中的通知——給用戶特定的限制的通知。它的動(dòng)畫特點(diǎn)是連續(xù)強(qiáng)調(diào)的，這種方式會(huì)引起用戶對(duì)重要警告的關(guān)注。

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

9 負(fù)面（Negative）的可供性

無(wú)論聽上去多么奇怪，負(fù)面的可供性確實(shí)在積極的用戶體驗(yàn)上扮演了一個(gè)重要的角色：他們基于這樣一個(gè)事實(shí)而存在——負(fù)面的結(jié)果也是結(jié)果。負(fù)面的可供性的目的是給用戶一些提示，一些元素或者選項(xiàng)在此刻是不可以被使用的。

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

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

10 虛假（False）的可供性

從交互的可供性（UX affordances）來(lái)看，虛假和負(fù)面不應(yīng)該被視為同義詞。虛假的可供性是設(shè)計(jì)師應(yīng)當(dāng)避免的，這些有歧義的提示，會(huì)導(dǎo)致用戶產(chǎn)生與其目的不符的行為或者結(jié)果。

有時(shí)，設(shè)計(jì)師會(huì)故意這么做，比如引導(dǎo)用戶進(jìn)入某個(gè)廣告頁(yè)面，但是，在大多數(shù)情況下是不合適的。

此外，如果一個(gè)網(wǎng)頁(yè)文本加了下劃線，用戶很可能默認(rèn)他是可以點(diǎn)擊的。一旦發(fā)現(xiàn)是不可以被點(diǎn)擊的，用戶可能會(huì)很惱火，因?yàn)樗麄兘邮艿搅隋e(cuò)誤的提示信息。

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

編譯作者：張大俠，公眾號(hào)：「?jìng)b俠說」

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

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