在實際的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的說法，人類更傾向於經過改變環境來讓其生活更加溫馨簡便。而學習和掌握環境的可供性成爲人類社會化的一個重要部分。web
而應用到設計中，「可供性」這個術語僅指用戶可以感知到的那些物理操做的可能性。就這一方面，1988年，Donald Norman又在其書籍《The Design of Everyday Things》進行了更近一步的解釋：「可供性指的是事物可感知的真實屬性，主要是那些決定如何使用該事物的一些基本屬性。可供性提供了很是有利的線索來暗示事物的相關操做。好比，磁盤須要推進，按鈕須要旋擰，插槽須要插入東西以及球能夠投擲或拍打等等。當設計師進行Web或App設計時，充分考慮其可供性，用戶一看界面就知道該怎麼作，無需任何圖片，標籤或說明」。安全
隨着各類Web或App界面的出現，界面可供性擁有了全新的開發載體。人們能夠經過不一樣的動做，工具以及事物完成數百種操做。也能夠簡單敲擊鼠標或屏幕實現批量操做。這樣就可以讓
UX設計師擁有全新的設計方式來展示人們在數字交互中積累的真實生活模式和知識，呈現界面設計的可供性。固然，因爲用戶體驗不一樣，實現的方式也會不一樣。
界面設計可供性分類
界面設計可供性可根據其性能和展示方式的不一樣劃分爲不一樣類型。固然，不管哪一種類型，其主要目的都是幫助人們落實必須簡化交互流程的相關知識和經驗。
根據其性能的不一樣，人們能夠在UI中找到顯式和隱式兩種提示。
顯式可供性設計是基於衆所周知的典型的提示，引導用戶完成特定操做的設計。例如，當人們看到按鈕被設計成爲很是明顯的可點擊部件，即視覺上更像是現實世界中的按鈕時，人們就會天然的明白他們能夠經過簡單點擊來實現與按鈕的交互。如若該按鈕同時結合適當文本或圖標，其可供性就更加清楚明瞭了：app
它將告訴用戶來自系統的對應反饋。ide
如圖，來自Gourmet網頁的頁面設計：其CTA按鈕清晰可點擊，微文案也指明瞭按鈕用途。（
隱式可供性設計並不明顯。他們被巧妙的隱藏起來，而且可能只在特定的用戶行爲流中才得以顯現。好比，當用戶將鼠標懸停於某些界面佈局元素，隨之而出現的工具提示或解釋說明，即爲隱式可供性設計的一種。其它的例子，包括多層級導航元素設計，好比下拉菜單或可擴展按鈕等。它們不會一直顯示，也不會在交互發生的第一時間就顯現出來，而是在某個用戶進行了某個特定操做纔會觸發。而其中最具爭議性的設計就是下圖的漢堡菜單設計，它隱藏了按鈕背後的無障礙功能。工具
圖形化界面可供性設計
圖形化界面可供性是經過對界面添加各類視覺設計，來實現幫助用戶快速掃描並瞭解界面功能的設計。相較於界面文字，各類類型的圖形更容易被用戶快速感知並牢記。所以，其重要性不可低估。如下，你們就跟着小編的步伐，瞭解其中最具表明性的一些圖形化界面可供性設計：
圖片
主題圖片，項目圖片，用戶頭像以及標題圖片爲App或Web界面設計提供了視覺上的支持。好比，爲界面使用信息（好比購買，溝通，顯示，觀看，學習，寫做等）以及具體功能說明提供了視覺支持。比方說，如若一款App容許用戶收藏和分享食譜，那麼以下圖所示這般，經過添加適當圖片設置即時關聯會更加炫酷。
品牌標誌
Web或App標誌， 公司標誌和應用於Web或App的色彩呈現了界面與特定品牌之間的聯繫。這對於其忠實客戶而言，是極其實用的設計。佈局
如圖，Jewellery Ecommerce app的啓動頁和界面頂端上展現的標誌，將其與對應品牌聯繫起來
插畫
主題插圖和吉祥物可以很是直觀有效地給予用戶提示。以下圖，Toonie報警應用界面顯示了一個彈出窗口， 經過使用衆所周知的萬聖節視覺提示 —— 萬聖節南瓜，告知用戶關於萬聖節的相關信息。
圖標
圖標，應該是界面設計中最豐富且最經常使用的視覺可供性設計元素。這些圖標具備極強的象徵性，並且大多采用來自真實世界的常見暗示，已便用戶可以快速的理解它們。並且，更重要的是，即便某些圖標已然失去與原有物理對象的聯繫，如若爲大部分用戶所熟知，任然可以實現其功能可供性。用於「存儲」的軟盤就是其中的一個典型實例，即便軟盤再也不擁有如圖標顯示的外在物理形象，用戶任然可以經過此圖標知道其指向的是應用的「存儲」功能。好比，心型或星型圖標一般引導用戶跳轉到收藏頁面。而放大鏡圖標則暗示其搜索功能， 而相機圖標則則指向拍照功能。（
10
）
圖標也是界面內容板塊劃分的重要影響因素。界面分類和板塊區域劃分結合適當圖形進行展現，對用戶來講會更直觀易用。
按鈕
按鈕，做爲最核心的UI交互設計元素之一，也是公認的Web或App界面元素。事實上，在
GUI時代以前，按鈕就已經被用到各類各樣的物理事物，從簡單的計算器到複雜的儀表盤。咱們都知道如何更好的設計按鈕。而最關鍵的一點就是要讓其引人注目，被用戶真正視做是
UI中顯而易見的按鈕進行使用。而形狀，對比，色彩以及文本的添加和設計可以極大的幫助咱們實現這一點。（
）
字段
通常而言，字段呈現的是用戶能夠根據須要輸入必要數據的區域。爲了使其更加直觀有效，設計師也可對其進行可供性設計。
首先，字段在視覺上應該是交互式的。這樣就能讓用戶當即明白，該區域是能夠直接輸入文本的。如下的完美食譜應用界面就展現了其搜索區域。顯而易見，用戶能夠簡單經過其形狀，對比，搜索圖標以及提示文本的應用，判斷它是交互式的，能夠輸入文字進行搜索。
通知
UI設計中，不少方式能夠幫助設計師提示用戶：軟件或用戶操做存在哪些遺漏或值得注意的地方。而其中一個有效方式，就是使用界面通知。好比，下面界面展現的購物車圖標，其顯示的黃色圓點就快速暗示用戶，該購物車不爲空。post
文本（語言）可供性設計
儘管用戶對圖片的感知速度遠遠高於文字，但文本對於應用交互流設計影響任然很是大。由於，圖像有時也須要文本進行解釋，以免誤解。並且，並非全部信息都能體如今圖片中，有時也須要必定的文字配合闡述。更別說，文本自己在傳輸信息，標記指令，行爲召喚，功能說明以及支持界面佈局效率方面，做用巨大。
在平常的生活中，文字交互對於人們來講是很是天然常見的。並且，它比圖形用戶界面出現的早得多。界面文本線索和提示幫助用戶瞭解要作什麼或期待什麼，以及須要牢記什麼。人們也須要從界面符號，廣告，以及針對報紙，手冊和書籍的文字說明中獲取更多軟件信息。而虛擬數字界面也是如此。它是一種可以實現直接與用戶交流的方式。例如，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…