在實際的Web或App介面設計中，設計師們在學習和實踐各種專業知識和技能之外，也會不可避免的遇到到各種設計術語。在前面的文章中， 我們已經針對
，相關業務術語和縮寫，
元素以及
術語進行了分析和講解。而本篇文章將延續心理學在使用者體驗設計方面的影響的主題，解析新的UX設計術語 ——UI設計的可供性（即那些能夠幫助使用者輕鬆實現人機互動的隱藏提示）。
什麼是介面設計的可供性？
一般而言，可供性是指事物能夠提示其可以幫助人們做什麼的一種屬性或特徵。簡而言之，可供性是能夠暗示人們該如何實現與之互動的線索，無論這些隱藏的線索是直觀可見的，還是是數字虛擬的。例如，當看到一個門把手，它給予人們的暗示通常是：你可以用它來開啟門。當看到一個接聽圖示，它給予人們的提示通常是：你可以點選它來撥打電話。所以，正是由於可供效能夠幫助人們簡單實現與外界以及虛擬物體的成功互動，它讓人們的生活更加簡潔便利。
應用的介面設計，簡單幾秒，使用者就能知道所需的操作已經完成—— 因為介面的綠色大勾圖示已經清楚傳達這一資訊。而且介面標籤欄中的圖示也為使用者提供瞭如何使用此款App的相關資訊。比如，使用者可以檢視植物集（因為對應的這個標籤有顏色，而其他標籤卻沒有，所以它應該是可操作的），新增新的植物或者檢視個人資料等等。所有這些都是此款軟體涉及地可供性設計。
可供性演變史
“可供性”這個詞，是由心理學家James Gibson在深入研究視覺感知之後最先提出。1966年，他首次在其書籍《The Senses Considered as Perceptual Systems》中使用這個詞。1979年，他又在另一本書籍《The Ecological Approach to Visual Perception》中進一步闡述了可供性的詳細定義：“環境可供性是指環境提供給動物的東西，及一切環境提供或給予的東西，無論好壞。然而，由於字典中只能找到動詞‘afford’，而名詞 ‘affordance’卻根本不存在，且環境和動物方面也沒有對應的現存術語，所以我創造了‘affordance’這個詞。它暗示了環境與動物的互補性。”根據Gibson的說法，人類更傾向於通過改變環境來讓其生活更加舒適簡便。而學習和掌握環境的可供性成為人類社會化的一個重要部分。
而應用到設計中，“可供性”這個術語僅指使用者能夠感知到的那些物理操作的可能性。就這一方面，1988年，Donald Norman又在其書籍《The Design of Everyday Things》進行了更近一步的解釋：“可供性指的是事物可感知的真實屬性，主要是那些決定如何使用該事物的一些基本屬性。可供性提供了非常有利的線索來暗示事物的相關操作。比如，磁碟需要推動，按鈕需要旋擰，插槽需要插入東西以及球可以投擲或拍打等等。當設計師進行Web或App設計時，充分考慮其可供性，使用者一看介面就知道該怎麼做，無需任何圖片，標籤或說明”。
隨著各種Web或App介面的出現，介面可供性擁有了全新的開發載體。人們可以通過不同的動作，工具以及事物完成數百種操作。也可以簡單敲擊滑鼠或螢幕實現批量操作。這樣就能夠讓
UX設計師擁有全新的設計方式來展現人們在數字互動中積累的真實生活模式和知識，呈現介面設計的可供性。當然，由於使用者體驗不同，實現的方式也會不同。
介面設計可供性分類
介面設計可供性可根據其效能和展現方式的不同劃分為不同型別。當然，無論哪種型別，其主要目的都是幫助人們落實必須簡化互動流程的相關知識和經驗。
根據其效能的不同，人們可以在UI中找到顯式和隱式兩種提示。
顯式可供性設計是基於眾所周知的典型的提示，引導使用者完成特定操作的設計。例如，當人們看到按鈕被設計成為非常明顯的可點選部件，即視覺上更像是現實世界中的按鈕時，人們就會自然的明白他們可以通過簡單點選來實現與按鈕的互動。如若該按鈕同時結合適當文字或圖示，其可供性就更加清楚明瞭了：
它將告訴使用者來自系統的對應反饋。
如圖，來自Gourmet網頁的頁面設計：其CTA按鈕清晰可點選，微文案也指明瞭按鈕用途。（
隱式可供性設計並不明顯。他們被巧妙的隱藏起來，並且可能只在特定的使用者行為流中才得以顯現。比如，當使用者將滑鼠懸停於某些介面佈局元素，隨之而出現的工具提示或解釋說明，即為隱式可供性設計的一種。其它的例子，包括多層級導航元素設計，比如下拉選單或可擴充套件按鈕等。它們不會一直顯示，也不會在互動發生的第一時間就顯現出來，而是在某個使用者進行了某個特定操作才會觸發。而其中最具爭議性的設計就是下圖的漢堡選單設計，它隱藏了按鈕背後的無障礙功能。
圖形化介面可供性設計
圖形化介面可供性是通過對介面新增各種視覺設計，來實現幫助使用者快速掃描並瞭解介面功能的設計。相較於介面文字，各種型別的圖形更容易被使用者快速感知並牢記。因此，其重要性不可低估。以下，大家就跟著小編的步伐，瞭解其中最具代表性的一些圖形化介面可供性設計：
圖片
主題圖片，專案圖片，使用者頭像以及標題圖片為App或Web介面設計提供了視覺上的支援。比如，為介面使用資訊（比如購買，溝通，顯示，觀看，學習，寫作等）以及具體功能說明提供了視覺支援。比方說，如若一款App允許使用者收藏和分享食譜，那麼如下圖所示這般，通過新增適當圖片設定即時關聯會更加炫酷。
品牌標誌
Web或App標誌， 公司標誌和應用於Web或App的色彩呈現了介面與特定品牌之間的聯絡。這對於其忠實客戶而言，是極其實用的設計。
如圖，Jewellery Ecommerce app的啟動頁和介面頂端上展示的標誌，將其與對應品牌聯絡起來
插畫
主題插圖和吉祥物能夠非常直觀有效地給予使用者提示。如下圖，Toonie報警應用介面顯示了一個彈出視窗， 通過使用眾所周知的萬聖節視覺提示 —— 萬聖節南瓜，告知使用者關於萬聖節的相關資訊。
圖示
圖示，應該是介面設計中最豐富且最常用的視覺可供性設計元素。這些圖示具有極強的象徵性，而且大多采用來自真實世界的常見暗示，已便使用者能夠快速的理解它們。而且，更重要的是，即使某些圖示已然失去與原有物理物件的聯絡，如若為大部分使用者所熟知，任然能夠實現其功能可供性。用於“儲存”的軟盤就是其中的一個典型例項，即使軟盤不再擁有如圖示顯示的外在物理形象，使用者任然能夠通過此圖示知道其指向的是應用的“儲存”功能。比如，心型或星型圖示通常引導使用者跳轉到收藏頁面。而放大鏡圖示則暗示其搜尋功能， 而相機圖示則則指向拍照功能。（
10）
圖示也是介面內容板塊劃分的重要影響因素。介面分類和板塊區域劃分結合適當圖形進行展示，對使用者來說會更直觀易用。
按鈕
按鈕，作為最核心的UI互動設計元素之一，也是公認的Web或App介面元素。事實上，在
GUI時代之前，按鈕就已經被用到各種各樣的物理事物，從簡單的計算器到複雜的儀表盤。我們都知道如何更好的設計按鈕。而最關鍵的一點就是要讓其引人注目，被使用者真正視作是
UI中顯而易見的按鈕進行使用。而形狀，對比，色彩以及文字的新增和設計能夠極大的幫助我們實現這一點。（
）
欄位
一般而言，欄位呈現的是使用者可以根據需要輸入必要資料的區域。為了使其更加直觀有效，設計師也可對其進行可供性設計。
首先，欄位在視覺上應該是互動式的。這樣就能讓使用者立即明白，該區域是可以直接輸入文字的。以下的完美食譜應用介面就展示了其搜尋區域。顯而易見，使用者可以簡單通過其形狀，對比，搜尋圖示以及提示文字的應用，判斷它是互動式的，可以輸入文字進行搜尋。
![UI設計可供性解析：巧用隱藏的設計力提升使用者體驗]()
通知
UI設計中，很多方式可以幫助設計師提示使用者：軟體或使用者操作存在哪些遺漏或值得注意的地方。而其中一個有效方式，就是使用介面通知。比如，下面介面展示的購物車圖示，其顯示的黃色圓點就快速暗示使用者，該購物車不為空。
文字（語言）可供性設計
儘管使用者對圖片的感知速度遠遠高於文字，但文字對於應用互動流設計影響任然非常大。因為，影象有時也需要文字進行解釋，以避免誤解。而且，並不是所有資訊都能體現在圖片中，有時也需要一定的文字配合闡述。更別說，文字本身在傳輸資訊，標記指令，行為召喚，功能說明以及支援介面佈局效率方面，作用巨大。
在日常的生活中，文字互動對於人們來說是非常自然常見的。而且，它比圖形使用者介面出現的早得多。介面文字線索和提示幫助使用者瞭解要做什麼或期待什麼，以及需要牢記什麼。人們也需要從介面符號，廣告，以及針對報紙，手冊和書籍的文字說明中獲取更多軟體資訊。而虛擬數字介面也是如此。它是一種能夠實現直接與使用者交流的方式。例如，HealthCare App的日曆頁面就展示多樣的語言可供性設計。除去關於患者的主要資訊，使用者可以發現其搜尋區域，CTA按鈕以及介面空白區域的文字提示，都在向使用者傳達一個資訊：使用者可以簡單點選該區域進行預約。
Pattern Affordances
Pattern affordances是基於習慣，展示介面有效互動設計的重要影響因素。其最大的優點就是能夠幫助使用者花費更少的精力記憶更多的介面資訊。正如我們在之前的文章中提到的那樣，短期記憶是有限，且具有一定侷限性的。因此，使用者學習和掌握的模式越多，對Web或App的導航設計理解得更加透徹，他們應對全新資訊的能力也會更佳。
實際設計案例中，有許多典型的模式可供性設計。比如，人們都已然習慣了在網站標題中新增可點選圖示，來開啟一個主頁。在頁面切換的過程中，人們清楚下劃線標出的文字，通常附有可點選連結。網站聯絡方式和隱私政策通常放置在網頁底部。而在App頁面佈局方面，垂直顯示的三個點一般意味著”更多“，能夠點選展示額外功能。保留和使用這些模式就是為了讓使用者能夠輕鬆瞭解介面，從而增強其對介面和應用的信心。因此，如果在具體的設計例項中需要打破此類模式可供性設計時，請考慮清楚並事先完成必要的測試，再進行選擇。無論如何，創意應該是合理的，而且對使用者來說也應該是清晰明瞭的。
動畫可供性設計
介面中動畫的應用能夠有效的將物理和虛擬世界聯絡起來。在大多數情況下，它模仿的是與真實事物之間的互動，比如拉，推，滑動以及拖動等。所以，就這方面而言，介面動畫能夠簡單或複雜的呈現介面的強大功能。
以下案例中顯示了Toobie報警器的開關。當開關開啟時，其標籤色彩、轉換色彩和啟用動畫等會相應的發生變化。這樣一來，就能立即通知使用者相關資訊，增強介面的情感化設計。
另一個例子顯示了在Home Budget app的互動流中出現的通知，用以提醒使用者注意某些特定的限制。通過脈動的動畫特效，吸引了使用者注意到該警示。
還有一個例子就是下面的拉動重新整理頁面動畫。當其出現在介面上時，它會告知使用者，介面正在更新，也為使用者等待更新過程增添一些樂趣，提升使用者體驗。
消極可供性設計
無論聽起來多麼離譜，消極可供性設計業在提升使用者體驗愉悅度方面，發揮著至關重要的作用。因為，負面的結果也是結果，能夠為設計師提升使用者體驗提供支援。介面消極可供性設計的目的就是為了提醒使用者，某些元素或操作當下是不可用的。例如，下面Homey app介面顯示”臥室“ 按鈕是可用的，然而剩下的其他房間按鈕則是不可用。所以，這些設計呈現地就是介面的消極可供性設計。在安全級別方面，level 5是完全不可用的。
另外一個例子就是標籤欄通過新增色彩顯示可用的標籤，而剩下的標籤設計就是不可用。體現其消極可供性設計。
錯誤可供性設計
從使用者體驗的角度來看，錯誤和消極的可供性並非同義詞。錯誤的可供性是指設計師應該避免的一些介面設計。例如，一些能夠導致使用者進行不同操作或帶來不同結果的錯誤提示，而非設計師希望通過提示引導使用者進行的操作或實現的結果。儘管，這類設計，有時是設計師故意新增，但絕大多數情況下，則是設計師無意思下犯錯造成的。例如,如果web介面文字中部分文字帶下劃線,那麼使用者很有可能會自動認為它們是可單擊的。所以，當使用者發現它們無法進行點選時，他們可能就會變得很生氣。而且，這也表明他們被誤導了。
上面的簡要介紹讓我們瞭解了可供性在使用者體驗設計中發揮的重要作用。所以，在具體的設計例項中，一定要注意UI的可供性設計，提升使用者體驗。
推薦閱讀：
App可訪問性設計:拒絕體驗“障礙”
作者：Tubik Studio
原文連結：
uxplanet.org/ux-design-g…
