功能可見性在用戶界面中的使用
在獲取專業知識和技能的道路上，設計師們會遇到各式各樣的專業術語。之前我們已經介紹過一些核心術語的貼子，如可用性和網頁設計、商務術語和縮略語、導航元素和色彩辭彙等。這篇文章將繼續和大家介紹心理學在用戶體驗設計中的應用，並會在用戶體驗設計辭彙表中加入一個新詞。今天我們討論的是功能可見性（Affordances，又譯作可供性），它用微妙的線索幫助用戶與界面交互。
什麼是功能可見性？
功能可見性是物體的一個屬性或特徵，它提示著我們可以對這個物體做什麼。簡而言之，功能可見性提示用戶如何與某物互動，無論是它是真實物體或是數字界面。例如，當你看見一個門把手時，它就是一個你可以用它開門的提示。當你看到一個聽筒圖標，它就提示著你可以用它來打電話。功能可見性使我們的世界更加簡單，在它的幫助下，我們可以成功的與物質世界和虛擬物體進行交互。
請看下面的洒水追蹤器的界面。你瞬間就能明白所需執行的行動已經完成——因為有符號「√」的提示。標籤欄中的圖標給了你可以用這個app做些什麼的線索：檢查你的一套植物（這個標籤是活躍的，因為它是有色的，而其他的不是）、添加一個新的植物或者查看你的賬戶信息。這些都是動作的功能可見性。
洒水追蹤器
該術語的歷史
「功能可見性」這個術語是由心理學家James Gibson首先提出的，他對視覺感知有著深入的研究。1966年，他首次在他的書《知覺系統之感覺》中使用這個詞。1979年，他在《視覺感知的生態學方法》一書中闡明了功能可見性的定義：「環境的功能可見性是指環境所給予動物的東西；環境提供或布置的、無論好壞的東西。我在詞典中找到了動詞afford，但名詞affordance還沒有。我創造了這個新詞。它同時涉及環境和動物兩者，這是一種此前已有的辭彙所沒有表達出來的關係，即動物和環境的互補性。」根據吉普森的說法，人類傾向於去改變環境，希望它的功能可見性更適合他們，並使他們的生活更輕鬆。學習環境的功能可見性成為社會化的一個重要部分。
當被應用於設計時，功能可見性這個術語指的僅僅是用戶得以察覺到的所有操作可能性。從這個角度來看，Donald Norman在《日常事物設計》1988冊中探索了這一術語的進一步發展。根據專家的說法，術語「功能可見性」指的是事物被感知到的和實際的屬性，主要是那些決定事物該如何被使用的基本屬性。功能可見性對事物運作提供了強有力的線索。平板是用來推的。旋鈕是用來轉動的。插槽是用來插入東西的。球是用來投擲或彈跳的。當功能可見性被利用得當時，用戶只需看一眼就知道該做什麼：不再需要額外的圖片、標籤或指令。
隨著各種用戶界面的出現，功能可見性得到了一種新的發展方向。我們曾經用不同的動作、工具和東西做了數百種操作。現在我們僅僅點擊滑鼠或者點擊屏幕就可以進行大量的操作。這使得設計師們需要思考新的呈現功能可見性的方式，來讓人們把以往已在現實生活里習以為常的模式和知識轉移並積累到與數字界面的互動中。這種經驗與之前大不相同，所以設計方法也改變了。
用戶界面中功能可見性的類型
UI中的功能可見性可以根據他們的表現和展示分類。不管怎樣，主要目標就是利用人們已經有的知識和經驗，來實現簡化交互流程。
顯性的和隱形的功能可見性
我們可以在用戶界面中根據表現找到明顯的和隱藏的提示。
明確的功能可見性是基於廣為人知的和典型的提示，來引導用戶進行特定的行動。例如，當你看到一個按鈕被設計成一個明顯的可點擊的元素，在視覺上類似於物理世界中的按鈕，你知道你可以點擊它來進行交互。如果按鈕中還有文本或圖標，啟示就變得更加清晰：它告訴你系統會如何進行反饋。
美食網站的網頁：CTA（call to action）按鈕作為一個可點擊的元素是清晰的，並且文案也說明了這個按鈕使用戶能夠做什麼
隱性的啟示並不那麼明顯。它們是隱藏的，只有在用戶行為的特定流程中才能被揭示出來。當我們滑鼠懸停在頁面元素上時，得到的工具提示或解釋就是這樣的。另外一個例子是各種多層導航元素，比如下拉菜單或可擴展按鈕，這些下級元素一開始沒有被看到，但是在特定的操作之後顯示出來。也許，漢堡包導航也許是最有爭議的隱形導航之一了，它把可用的功能隱藏在了一個特殊的圖標背後。
Slopes網站頂部的漢堡包按鈕隱藏了擴展的網站菜單
圖形的功能可見性
圖形的功能可見性通過視覺應用展現在界面中，幫助用戶瀏覽界面功能。相比文案，用戶對各種各樣的圖形感知速度更快，記憶效果更好，故而圖形的重要性不能被忽視，其中，我們提到一下幾點。
照片
主題照片，物品照片，頭像或標題圖片都是一種視覺輔助，從幫助用戶感知在App或網頁可以進行社么操作（如購買、溝通、展示、觀看、學習、寫作等）到體現某項具體的功能。舉個例子，如果一個App能夠讓用戶保存或共享菜譜，那麼像下面圖中那樣配以和菜譜相關的食材照片就會很棒。
素食配方應用
品牌標誌
Logo、公司標誌和應用在網站或app的顏色，立即展示出了用戶界面與特定品牌的連接，這對忠實客戶來說可能是個強有力的功能可見性。
珠寶電商app中，開屏及標題欄上的logo建立了品牌的連接
插圖
主題插圖和吉祥物形象很有可能成為一個相當明確的用戶提示。在下面的圖尼鬧鐘中，你可以看到一個彈窗，用萬聖節南瓜，一個眾所周知的視覺提示，來通知用戶關於萬聖節貼紙的事情。
圖尼鬧鐘
圖標
界面圖標，也許是視覺的功能可見性中最多樣化的。這些象形符號是高度象徵性的，並且大多使用來自現實世界的提示，以便用戶能夠快速地理解它們。即使有些圖標形象已經和它曾經代表的實際物體失去了關聯性，但只要有大量用戶已經記住了這個物體的功能，它的圖標就依舊可以有效地展現其所指代的功能可見性。有個最好的例子：軟盤不再代表軟盤這個物體，而是代表了「保存」這個操作。一顆心或一顆星星會立刻讓你把它和收藏夾聯繫起來，放大鏡會提示它是一個搜索，而一個相機圖標是用來拍照的，不會花費你太久的時間來理解。
學習漢語app
圖標也被用作分類內容的有效提示：在適當的圖形支持下，可以更快的區分類別和章節。
博客app
按鈕
作為核心交互元素，按鈕已經成為界面上最易識別的元素。在GUI時代之前，按鈕被用在各種物理事物中，從簡單的計算器到複雜的儀錶板。我們都知道怎麼用按鈕。重點是讓它可見，並且明顯地被視為用戶界面中的按鈕。形狀、對比度、顏色和文案都對此有很大幫助。
洒水追蹤器
輸入框
基本上，輸入框是一個空白區域用來暗示用戶可以在這裡輸入所需的數據信息。為了使它們有效，設計師也激活了功能可見性的能力：輸入框應該看起來是互動式的，這樣人們就可以立即理解他們可以在裡面鍵入文本。下面的完美菜譜APP界面顯示了搜索輸入框：由於它的形狀和對比度，很明顯該輸入框是一個互動式元素，並且還有搜索圖標和提示文本的幫助。
完美菜譜app
通知
有許多方法來提示用戶，有一些錯過的或值得注意的東西。看看下面界面中的購物車圖標：上面一個黃色的點，就快速的提示了購物車不是空的。
美味漢堡app
文案的功能可見性
雖然用戶感知圖像比單詞快得多，但是文案在交互流程中的影響也有著不能忽視的位置。關鍵是圖像有時需要藉助文本進行解釋，以避免誤解。另一方面，不是一切都可以用圖片來顯示。最後，文案在傳遞信息、標記指令和調用動作、解釋功能和支持自動布局的排版層次方面具有難以置信的多樣性潛力。然而，我們應該合理平衡的使用文字，而不要讓頁面中文字過多。
與文案的交互對於日常生活中的人們來說是非常自然的，比圖形用戶界面存在的時間要長得多。文案線索和提示有助於幫助用戶了解該做什麼或期待什麼，記住什麼信息：我們從符號，廣告，還有報紙，手冊和書籍中讀了很多文本。在數字用戶界面中，文案的工作原理是一樣的。這是一種直截了當的交流方式。例如，下面醫療保健app的日程界面的文案，顯示了多樣的功能可見性：除了關於患者的主要信息外，我們可以看到搜索框內的提示欄位、按鈕上的調用指令文字，還有日曆的空曠欄位中給出了文字線索，用戶只需要點擊一下這個區域，就可以添加一個日程。
健康保障app
模式的功能可見性
模式的功能可見性是基於習慣的力量，是提出有效的交互設計的巨大因素。它最大的優勢是讓用戶不需要多想，而是在腦中回憶慣性操作。正如我們在一篇文章中提到的人類記憶機制對UX設計師的啟示，短期記憶的能力是有限的。因此，用戶習得的模式越多，導航對於他們來說就越清晰，對頁面的新信息也更易理解。
這種類型有很多典型的功能可見性：例如，我們都習慣於點擊網站頂部的logo可以打開網站的首頁。我們知道下劃線文案通常是可點擊的鏈接，可以從一個頁面到另一個頁面。網站的聯繫人和隱私策略等信息通常可以在網站底部找到，還有在app中的三個點意味著顯示更多的附加功能。保留這些模式可以讓用戶感覺他們是理解界面的。因此，如果有必要打破功能可見的模式，請三思而後行：創意應該是合理的並且是對用戶明確的。
廚藝網站
動效的功能可見性
應用於用戶界面的動畫在物理和虛擬世界之間建立了強大的連接。在大多數情況下，它模仿與真實事物的交互：拉、推、擦、拖等。因此，界面動畫既基本又複雜，呈現出一種強大的功能可見性。
下面的例子顯示了Toonie報警app中的開關。當開關打開時，它會同時改變幾個參數：標籤的顏色、切換按鈕的顏色還有太陽激活的動畫。用這種方式立即通知用戶，並為操作增加了情感吸引力。
Toonie Alarm的開關設計
另一個示例是家庭預算app，在交互流程中出現的通知，提醒用戶關注特定的限制。它的動畫特點是跳動，這種方式吸引了用戶對重要警告的注意。
家庭預算app
這裡還有一個案例—刷新動畫。它出現在屏幕上時，提示用戶界面正在更新，並在等待的過程中添加了一些樂趣。
拉動刷新動效
消極的功能可見性
無論聽起來多麼奇怪，消極的功能可見性在積極的用戶體驗中也起著很大的作用：它們根植於負面結果也是結果的事實。負面提示的目的是給用戶一個提示，在當下一些元素或操作是不可用的。例如，下面給出的家居應用程序界面顯示了「卧室」按鈕是活躍的，而其他房間的按鈕是不可用的，故而它們呈現負面的功能可見性。「安全級別」也表示第5級是完全不可用的。
家居app
這裡還有一個例子：當前所在tab的圖標是彩色的，而其他tab則用沒有顏色的消極功能可見性來展現。
標籤欄動畫
錯誤的的功能可見性
從用戶體驗功能可見性的角度來看，錯誤和消極不應該被看作是同義詞。沒辦法，錯誤的功能可見性是設計師應該避免的：這是指不恰當的錯誤暗示導致用戶並沒有做出應該做的操作，反而進行了誤操作，或者讓操作產生了和預期不符的後果。有時是故意而為之，但大多數情況下是錯誤的。例如，如果網頁中的一段文本被劃線了，用戶會自然而然認為它是可點擊的。因此，他們可能會很惱火地理解它不起作用了-這意味著他們被誤導了。
上面的介紹讓我們了解了功能可見性在用戶體驗設計中的重要作用。我們將在我們的下一篇文章中加入更多的洞察力、技巧和例子來繼續這個主題，所以不要錯過更新。
TAG:點融設計中心DDC |