什么是功能可見性？

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

請看下面的灑水追蹤器的界面。你瞬間就能明白所需執(zhí)行的行動已經(jīng)完成——因為有符號“√”的提示。標簽欄中的圖標給了你可以用這個app做些什么的線索：檢查你的一套植物（這個標簽是活躍的，因為它是有色的，而其他的不是）、添加一個新的植物或者查看你的賬戶信息。這些都是動作的功能可見性。

灑水追蹤器

該術語的歷史

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

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

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

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

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

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

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

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

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

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

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

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

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

圖形的功能可見性

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

（1）照片

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

素食配方應用
（2）品牌標志

Logo、公司標志和應用在網(wǎng)站或app的顏色，立即展示出了用戶界面與特定品牌的連接，這對忠實客戶來說可能是個強有力的功能可見性。

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

（3）插圖

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

圖尼鬧鐘

（4）圖標

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

學習漢語app

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

博客app

（5）按鈕

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

灑水追蹤器

（6）輸入框

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

完美菜譜app

（7）通知

有許多方法來提示用戶，有一些錯過的或值得注意的東西。看看下面界面中的購物車圖標：上面一個黃色的點，就快速的提示了購物車不是空的。

美味漢堡app

文案的功能可見性

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

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

健康保障app

模式的功能可見性

模式的功能可見性是基于習慣的力量，是提出有效的交互設計的巨大因素。它最大的優(yōu)勢是讓用戶不需要多想，而是在腦中回憶慣性操作。正如我們在一篇文章中提到的人類記憶機制對UX設計師的啟示，短期記憶的能力是有限的。因此，用戶習得的模式越多，導航對于他們來說就越清晰，對頁面的新信息也更易理解。

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

廚藝網(wǎng)站

動效的功能可見性

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

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

Toonie Alarm的開關設計

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

家庭預算app制作案例效果圖

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

拉動刷新動效

網(wǎng)站設計消極的功能可見性

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

家居app設計案例

這里還有一個例子：當前所在tab的圖標是彩色的，而其他tab則用沒有顏色的消極功能可見性來展現(xiàn)。

網(wǎng)站前端制作標簽欄動畫

錯誤的的功能可見性

上面的介紹讓我們了解了功能可見性在用戶體驗設計中的重要作用。我們將在我們的下一篇文章中加入更多的洞察力、技巧和例子來繼續(xù)這個主題，所以不要錯過更新。從用戶體驗功能可見性的角度來看，錯誤和消極不應該被看作是同義詞。沒辦法，錯誤的功能可見性是設計師應該避免的：這是指不恰當?shù)腻e誤暗示導致用戶并沒有做出應該做的操作，反而進行了誤操作，或者讓操作產(chǎn)生了和預期不符的后果。有時是故意而為之，但大多數(shù)情況下是錯誤的。例如，如果網(wǎng)頁中的一段文本被劃線了，用戶會自然而然認為它是可點擊的。因此，他們可能會很惱火地理解它不起作用了-這意味著他們被誤導了。深圳網(wǎng)站制作公司博納網(wǎng)絡編輯整理。