在獲取專業(yè)知識(shí)和技能的道路上，設(shè)計(jì)師們會(huì)遇到各式各樣的專業(yè)術(shù)語(yǔ)。之前我們已經(jīng)介紹過(guò)一些核心術(shù)語(yǔ)的貼子，如可用性和網(wǎng)頁(yè)設(shè)計(jì)、商務(wù)術(shù)語(yǔ)和縮略語(yǔ)、導(dǎo)航元素和色彩詞匯等。這篇文章將繼續(xù)和大家介紹心理學(xué)在用戶體驗(yàn)設(shè)計(jì)中的應(yīng)用，并會(huì)在用戶體驗(yàn)設(shè)計(jì)詞匯表中加入一個(gè)新詞。今天我們討論的是功能可見性（Affordances，又譯作可供性），它用微妙的線索幫助用戶與界面交互。

什么是功能可見性？

功能可見性是物體的一個(gè)屬性或特征，它提示著我們可以對(duì)這個(gè)物體做什么。簡(jiǎn)而言之，功能可見性提示用戶如何與某物互動(dòng)，無(wú)論是它是真實(shí)物體或是數(shù)字界面。例如，當(dāng)你看見一個(gè)門把手時(shí)，它就是一個(gè)你可以用它開門的提示。當(dāng)你看到一個(gè)聽筒圖標(biāo)，它就提示著你可以用它來(lái)打電話。功能可見性使我們的世界更加簡(jiǎn)單，在它的幫助下，我們可以成功的與物質(zhì)世界和虛擬物體進(jìn)行交互。

請(qǐng)看下面的灑水追蹤器的界面。你瞬間就能明白所需執(zhí)行的行動(dòng)已經(jīng)完成——因?yàn)橛蟹?hào)“√”的提示。標(biāo)簽欄中的圖標(biāo)給了你可以用這個(gè)app做些什么的線索：檢查你的一套植物（這個(gè)標(biāo)簽是活躍的，因?yàn)樗怯猩?，而其他的不是）、添加一個(gè)新的植物或者查看你的賬戶信息。這些都是動(dòng)作的功能可見性。

灑水追蹤器

該術(shù)語(yǔ)的歷史

“功能可見性”這個(gè)術(shù)語(yǔ)是由心理學(xué)家James Gibson首先提出的，他對(duì)視覺(jué)感知有著深入的研究。1966年，他首次在他的書《知覺(jué)系統(tǒng)之感覺(jué)》中使用這個(gè)詞。1979年，他在《視覺(jué)感知的生態(tài)學(xué)方法》一書中闡明了功能可見性的定義：

“環(huán)境的功能可見性是指環(huán)境所給予動(dòng)物的東西；環(huán)境提供或布置的、無(wú)論好壞的東西。我在詞典中找到了動(dòng)詞afford，但名詞affordance還沒(méi)有。我創(chuàng)造了這個(gè)新詞。它同時(shí)涉及環(huán)境和動(dòng)物兩者，這是一種此前已有的詞匯所沒(méi)有表達(dá)出來(lái)的關(guān)系，即動(dòng)物和環(huán)境的互補(bǔ)性?！?/p>

根據(jù)吉普森的說(shuō)法，人類傾向于去改變環(huán)境，希望它的功能可見性更適合他們，并使他們的生活更輕松。學(xué)習(xí)環(huán)境的功能可見性成為社會(huì)化的一個(gè)重要部分。

當(dāng)被應(yīng)用于設(shè)計(jì)時(shí)，功能可見性這個(gè)術(shù)語(yǔ)指的僅僅是用戶得以察覺(jué)到的所有操作可能性。從這個(gè)角度來(lái)看，Donald Norman在《日常事物設(shè)計(jì)》1988冊(cè)中探索了這一術(shù)語(yǔ)的進(jìn)一步發(fā)展。根據(jù)專家的說(shuō)法，術(shù)語(yǔ)“功能可見性”指的是事物被感知到的和實(shí)際的屬性，主要是那些決定事物該如何被使用的基本屬性。功能可見性對(duì)事物運(yùn)作提供了強(qiáng)有力的線索。平板是用來(lái)推的。旋鈕是用來(lái)轉(zhuǎn)動(dòng)的。插槽是用來(lái)插入東西的。球是用來(lái)投擲或彈跳的。當(dāng)功能可見性被利用得當(dāng)時(shí)，用戶只需看一眼就知道該做什么：不再需要額外的圖片、標(biāo)簽或指令。

隨著各種用戶界面的出現(xiàn)，功能可見性得到了一種新的發(fā)展方向。我們?cè)?jīng)用不同的動(dòng)作、工具和東西做了數(shù)百種操作?，F(xiàn)在我們僅僅點(diǎn)擊鼠標(biāo)或者點(diǎn)擊屏幕就可以進(jìn)行大量的操作。這使得設(shè)計(jì)師們需要思考新的呈現(xiàn)功能可見性的方式，來(lái)讓人們把以往已在現(xiàn)實(shí)生活里習(xí)以為常的模式和知識(shí)轉(zhuǎn)移并積累到與數(shù)字界面的互動(dòng)中。這種經(jīng)驗(yàn)與之前大不相同，所以設(shè)計(jì)方法也改變了。

用戶界面中功能可見性的類型

UI中的功能可見性可以根據(jù)他們的表現(xiàn)和展示分類。不管怎樣，主要目標(biāo)就是利用人們已經(jīng)有的知識(shí)和經(jīng)驗(yàn)，來(lái)實(shí)現(xiàn)簡(jiǎn)化交互流程。

顯性的和隱形的功能可見性

我們可以在用戶界面中根據(jù)表現(xiàn)找到明顯的和隱藏的提示。

明確的功能可見性是基于廣為人知的和典型的提示，來(lái)引導(dǎo)用戶進(jìn)行特定的行動(dòng)。例如，當(dāng)你看到一個(gè)按鈕被設(shè)計(jì)成一個(gè)明顯的可點(diǎn)擊的元素，在視覺(jué)上類似于物理世界中的按鈕，你知道你可以點(diǎn)擊它來(lái)進(jìn)行交互。如果按鈕中還有文本或圖標(biāo)，啟示就變得更加清晰：它告訴你系統(tǒng)會(huì)如何進(jìn)行反饋。

美食網(wǎng)站的網(wǎng)頁(yè)：CTA（call to action）按鈕作為一個(gè)可點(diǎn)擊的元素是清晰的，并且文案也說(shuō)明了這個(gè)按鈕使用戶能夠做什么

隱性的啟示并不那么明顯。它們是隱藏的，只有在用戶行為的特定流程中才能被揭示出來(lái)。當(dāng)我們鼠標(biāo)懸停在頁(yè)面元素上時(shí)，得到的工具提示或解釋就是這樣的。另外一個(gè)例子是各種多層導(dǎo)航元素，比如下拉菜單或可擴(kuò)展按鈕，這些下級(jí)元素一開始沒(méi)有被看到，但是在特定的操作之后顯示出來(lái)。也許，漢堡包導(dǎo)航也許是最有爭(zhēng)議的隱形導(dǎo)航之一了，它把可用的功能隱藏在了一個(gè)特殊的圖標(biāo)背后。

Slopes網(wǎng)站頂部的漢堡包按鈕隱藏了擴(kuò)展的網(wǎng)站菜單

圖形的功能可見性

圖形的功能可見性通過(guò)視覺(jué)應(yīng)用展現(xiàn)在界面中，幫助用戶瀏覽界面功能。相比文案，用戶對(duì)各種各樣的圖形感知速度更快，記憶效果更好，故而圖形的重要性不能被忽視，其中，我們提到一下幾點(diǎn)：

（1）照片

主題照片，物品照片，頭像或標(biāo)題圖片都是一種視覺(jué)輔助，從幫助用戶感知在App或網(wǎng)頁(yè)可以進(jìn)行社么操作（如購(gòu)買、溝通、展示、觀看、學(xué)習(xí)、寫作等）到體現(xiàn)某項(xiàng)具體的功能。舉個(gè)例子，如果一個(gè)App能夠讓用戶保存或共享菜譜，那么像下面圖中那樣配以和菜譜相關(guān)的食材照片就會(huì)很棒。

素食配方應(yīng)用

（2）品牌標(biāo)志

Logo、公司標(biāo)志和應(yīng)用在網(wǎng)站或app的顏色，立即展示出了用戶界面與特定品牌的連接，這對(duì)忠實(shí)客戶來(lái)說(shuō)可能是個(gè)強(qiáng)有力的功能可見性。

珠寶電商app中，開屏及標(biāo)題欄上的logo建立了品牌的連接

（3）插圖

主題插圖和吉祥物形象很有可能成為一個(gè)相當(dāng)明確的用戶提示。在下面的圖尼鬧鐘中，你可以看到一個(gè)彈窗，用萬(wàn)圣節(jié)南瓜，一個(gè)眾所周知的視覺(jué)提示，來(lái)通知用戶關(guān)于萬(wàn)圣節(jié)貼紙的事情。

圖尼鬧鐘

（4）圖標(biāo)

界面圖標(biāo)，也許是視覺(jué)的功能可見性中最多樣化的。這些象形符號(hào)是高度象征性的，并且大多使用來(lái)自現(xiàn)實(shí)世界的提示，以便用戶能夠快速地理解它們。即使有些圖標(biāo)形象已經(jīng)和它曾經(jīng)代表的實(shí)際物體失去了關(guān)聯(lián)性，但只要有大量用戶已經(jīng)記住了這個(gè)物體的功能，它的圖標(biāo)就依舊可以有效地展現(xiàn)其所指代的功能可見性。有個(gè)最好的例子：軟盤不再代表軟盤這個(gè)物體，而是代表了“保存”這個(gè)操作。一顆心或一顆星星會(huì)立刻讓你把它和收藏夾聯(lián)系起來(lái)，放大鏡會(huì)提示它是一個(gè)搜索，而一個(gè)相機(jī)圖標(biāo)是用來(lái)拍照的，不會(huì)花費(fèi)你太久的時(shí)間來(lái)理解。

學(xué)習(xí)漢語(yǔ)app

圖標(biāo)也被用作分類內(nèi)容的有效提示：在適當(dāng)?shù)膱D形支持下，可以更快的區(qū)分類別和章節(jié)。

博客app

（5）按鈕

作為核心交互元素，按鈕已經(jīng)成為界面上最易識(shí)別的元素。在GUI時(shí)代之前，按鈕被用在各種物理事物中，從簡(jiǎn)單的計(jì)算器到復(fù)雜的儀表板。我們都知道怎么用按鈕。重點(diǎn)是讓它可見，并且明顯地被視為用戶界面中的按鈕。形狀、對(duì)比度、顏色和文案都對(duì)此有很大幫助。

灑水追蹤器

（6）輸入框

基本上，輸入框是一個(gè)空白區(qū)域用來(lái)暗示用戶可以在這里輸入所需的數(shù)據(jù)信息。為了使它們有效，設(shè)計(jì)師也激活了功能可見性的能力：輸入框應(yīng)該看起來(lái)是交互式的，這樣人們就可以立即理解他們可以在里面鍵入文本。下面的完美菜譜APP界面顯示了搜索輸入框：由于它的形狀和對(duì)比度，很明顯該輸入框是一個(gè)交互式元素，并且還有搜索圖標(biāo)和提示文本的幫助。

完美菜譜app

（7）通知

有許多方法來(lái)提示用戶，有一些錯(cuò)過(guò)的或值得注意的東西?？纯聪旅娼缑嬷械馁?gòu)物車圖標(biāo)：上面一個(gè)黃色的點(diǎn)，就快速的提示了購(gòu)物車不是空的。

美味漢堡app

文案的功能可見性

雖然用戶感知圖像比單詞快得多，但是文案在交互流程中的影響也有著不能忽視的位置。關(guān)鍵是圖像有時(shí)需要借助文本進(jìn)行解釋，以避免誤解。另一方面，不是一切都可以用圖片來(lái)顯示。最后，文案在傳遞信息、標(biāo)記指令和調(diào)用動(dòng)作、解釋功能和支持自動(dòng)布局的排版層次方面具有難以置信的多樣性潛力。然而，我們應(yīng)該合理平衡的使用文字，而不要讓頁(yè)面中文字過(guò)多。

與文案的交互對(duì)于日常生活中的人們來(lái)說(shuō)是非常自然的，比圖形用戶界面存在的時(shí)間要長(zhǎng)得多。文案線索和提示有助于幫助用戶了解該做什么或期待什么，記住什么信息：我們從符號(hào)，廣告，還有報(bào)紙，手冊(cè)和書籍中讀了很多文本。在數(shù)字用戶界面中，文案的工作原理是一樣的。這是一種直截了當(dāng)?shù)慕涣鞣绞?。例如，下面醫(yī)療保健app的日程界面的文案，顯示了多樣的功能可見性：除了關(guān)于患者的主要信息外，我們可以看到搜索框內(nèi)的提示字段、按鈕上的調(diào)用指令文字，還有日歷的空曠字段中給出了文字線索，用戶只需要點(diǎn)擊一下這個(gè)區(qū)域，就可以添加一個(gè)日程。

健康保障app

模式的功能可見性

模式的功能可見性是基于習(xí)慣的力量，是提出有效的交互設(shè)計(jì)的巨大因素。它最大的優(yōu)勢(shì)是讓用戶不需要多想，而是在腦中回憶慣性操作。正如我們?cè)谝黄恼轮刑岬降娜祟愑洃洐C(jī)制對(duì)UX設(shè)計(jì)師的啟示，短期記憶的能力是有限的。因此，用戶習(xí)得的模式越多，導(dǎo)航對(duì)于他們來(lái)說(shuō)就越清晰，對(duì)頁(yè)面的新信息也更易理解。

這種類型有很多典型的功能可見性：例如，我們都習(xí)慣于點(diǎn)擊網(wǎng)站頂部的logo可以打開網(wǎng)站的首頁(yè)。我們知道下劃線文案通常是可點(diǎn)擊的鏈接，可以從一個(gè)頁(yè)面到另一個(gè)頁(yè)面。網(wǎng)站的聯(lián)系人和隱私策略等信息通?？梢栽诰W(wǎng)站底部找到，還有在app中的三個(gè)點(diǎn)意味著顯示更多的附加功能。保留這些模式可以讓用戶感覺(jué)他們是理解界面的。因此，如果有必要打破功能可見的模式，請(qǐng)三思而后行：創(chuàng)意應(yīng)該是合理的并且是對(duì)用戶明確的。

廚藝網(wǎng)站

動(dòng)效的功能可見性

應(yīng)用于用戶界面的動(dòng)畫在物理和虛擬世界之間建立了強(qiáng)大的連接。在大多數(shù)情況下，它模仿與真實(shí)事物的交互：拉、推、擦、拖等。因此，界面動(dòng)畫既基本又復(fù)雜，呈現(xiàn)出一種強(qiáng)大的功能可見性。

下面的例子顯示了Toonie報(bào)警app中的開關(guān)。當(dāng)開關(guān)打開時(shí)，它會(huì)同時(shí)改變幾個(gè)參數(shù)：標(biāo)簽的顏色、切換按鈕的顏色還有太陽(yáng)激活的動(dòng)畫。用這種方式立即通知用戶，并為操作增加了情感吸引力。

Toonie Alarm的開關(guān)設(shè)計(jì)

另一個(gè)示例是家庭預(yù)算app，在交互流程中出現(xiàn)的通知，提醒用戶關(guān)注特定的限制。它的動(dòng)畫特點(diǎn)是跳動(dòng)，這種方式吸引了用戶對(duì)重要警告的注意。

家庭預(yù)算app

這里還有一個(gè)案例—刷新動(dòng)畫。它出現(xiàn)在屏幕上時(shí)，提示用戶界面正在更新，并在等待的過(guò)程中添加了一些樂(lè)趣。

拉動(dòng)刷新動(dòng)效

消極的功能可見性

無(wú)論聽起來(lái)多么奇怪，消極的功能可見性在積極的用戶體驗(yàn)中也起著很大的作用：它們根植于負(fù)面結(jié)果也是結(jié)果的事實(shí)。負(fù)面提示的目的是給用戶一個(gè)提示，在當(dāng)下一些元素或操作是不可用的。例如，下面給出的家居應(yīng)用程序界面顯示了“臥室”按鈕是活躍的，而其他房間的按鈕是不可用的，故而它們呈現(xiàn)負(fù)面的功能可見性?！鞍踩?jí)別”也表示第5級(jí)是完全不可用的。

家居app

這里還有一個(gè)例子：當(dāng)前所在tab的圖標(biāo)是彩色的，而其他tab則用沒(méi)有顏色的消極功能可見性來(lái)展現(xiàn)。

標(biāo)簽欄動(dòng)畫

錯(cuò)誤的的功能可見性

從用戶體驗(yàn)功能可見性的角度來(lái)看，錯(cuò)誤和消極不應(yīng)該被看作是同義詞。沒(méi)辦法，錯(cuò)誤的功能可見性是設(shè)計(jì)師應(yīng)該避免的：這是指不恰當(dāng)?shù)腻e(cuò)誤暗示導(dǎo)致用戶并沒(méi)有做出應(yīng)該做的操作，反而進(jìn)行了誤操作，或者讓操作產(chǎn)生了和預(yù)期不符的后果。有時(shí)是故意而為之，但大多數(shù)情況下是錯(cuò)誤的。例如，如果網(wǎng)頁(yè)中的一段文本被劃線了，用戶會(huì)自然而然認(rèn)為它是可點(diǎn)擊的。因此，他們可能會(huì)很惱火地理解它不起作用了-這意味著他們被誤導(dǎo)了。

上面的介紹讓我們了解了功能可見性在用戶體驗(yàn)設(shè)計(jì)中的重要作用。我們將在我們的下一篇文章中加入更多的洞察力、技巧和例子來(lái)繼續(xù)這個(gè)主題，所以不要錯(cuò)過(guò)更新。

英文原文：UX Design Glossary: How to Use Affordances in User Interfaces

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

譯者：冰璐一只，微信公眾號(hào)：「微信ID：DR_DDC」

本文由 @冰璐一只?翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖由作者提供