2014-12-24 藍藍設計的小編
藍藍設計( www.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務.
每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計
來源：http://yidianzixun.com/home?page=article&id=07O8BcSh&up=0
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
所有我們周圍的客體都具有啟示性：有些是外顯的（如門手柄上寫著的“推”字信息），有些是內隱的（如椅子可以用來打破玻璃或者用來當做武器）。這個概念最初由心理學家詹姆斯·吉布森提出，隨后被唐納德·諾曼在《設計心理學》一書中引進到人機交互領域。
你能數出一個用戶能在 Tumblr主頁能上執行多少操作嗎？
tumblr-opt.jpg
盡管看起來是一個很簡單的界面，你會驚奇地發現在Tumblr主頁可能執行11個操作。
1 輸入郵箱地址
2 輸入密碼
3 點擊問號圖標（指向密碼恢復界面）
4 點擊登陸按鈕
5 點擊注冊鏈接
6 點擊條款鏈接
7 點擊隱私鏈接
8 點擊“Posted by blvcktrip”鏈接
9 點擊blvcktrip的頭像圖片
10 點擊“搜索Tumblr”輸入搜素詞條
11 按下回車鍵來搜索輸入的詞條
如果你能猜到所有以上的操作，那么你就已經認識到了啟示性。它就是交互提供給用戶特定功能的方式。所有你要做得都在一個Tumblr頁面的扁平化截屏上。通過再認模式和外顯啟示，就能考查交互功能。
paypal-opt.jpg
PayPal的界面元素是外顯啟示的一個很好的例子。外觀凸出的按鈕提示向下按動,而文本信息則明顯提示操作的結果。
video-opt.jpg
Copyblogger’s網站中的視頻采用的外顯啟示方式：文本提示點擊播放視頻。
1 .當交互使用者過去不太可能接觸到很多啟示模式。
這種情況經常發生在那些沒有技術悟性或者平時不經常使用網頁或手機交互的用戶身上。這些用戶很少能通過設計模式認識到啟示。這同樣適用于那些獨特的、創新的交互。第一款手機應用在諸如敲擊、滑動等操作上大量使用了外顯啟示。2 .還未明確樹立特定的模式來傳達特定操作的啟示
比如手機上的一個交互對象：向內擠壓關閉，向外擠壓展開。當我們還不清楚如何形象的傳達這種交互啟示時，設計師就會采用外顯啟示的方式。
是否采用外顯啟示要根據設計背景而定。太明顯的啟示會帶來設計冗余。如果每個鏈接都寫著“點擊此處”，頁面就會變得很單調。如何讓受眾在沒有明確的指示下理解一個對象的啟示性是需要考慮的問題。例如，一款app的用戶是科技創業者，他們之前就已經了解輸入框，當app交互界面還用文字指示“點擊輸入郵箱地址”就會顯得很二。
模式化的啟示這是現代交互設計中最常用的啟示類型。例如，我們隱約知道一個不被包含在一個句子之內或者位于頁面主要內容之外的詞條一般可供點擊。我們知道位于屏幕上方，包含脫節詞條的長條通常是導航欄，上面的詞條提供了導航。我們知道在看起來像按鈕背景上的單個字或者詞語通常是可用來執行某個操作的按鈕。我們會猜測下方帶有下拉箭頭的某個字或詞可以展開下拉菜單。
| 元素 | 啟示類型 | 提供的功能 |
|---|---|---|
| 導航欄 | 瀏覽網頁 | |
| 鏈接 | ||
| Logo | 返回主頁 | |
| 右上角的鏈接 | 管理賬戶 | |
| “分類”下拉 | 訪問更多選項 | |
| 放大鏡 | 模式隱喻 | 搜索 |
| 內容模塊 | 點擊模塊 |
envat_studio-500px-opt.jpg
Envato Studio’s的主頁，一個自由職業者的市場，充滿了模式啟示，你能把它們都羅列出來嗎？
為了理解設計師對模式啟示的依賴，你可以問問你自己，如果你從未和網站或者智能手機產生過交互行為，但是你知道怎么執行一些基本的操作，比如點擊和敲擊，你能理解界面啟示你去做的一些操作嗎？
內隱啟示是一種微妙的形式，它只在某種特定的條件下顯現出來。例如，提示點擊的鏈接文字只有在鼠標停在上面的時候顯示出來（并且顏色也發生改變）。在IOS設備上，只有你在主屏幕上敲擊或者拖動時，應用圖標才能發生滑動。在Pinterest上，只有當你的鼠標懸停在上面的時候，別針按鈕（提供“喜歡”功能）才會出現。默認情況下，直到用戶執行某個操作來激活提示，元素的啟示性不會顯示出來。
pinterest-unrevealed-opt.jpg
Pinterest上的圖像啟示在默認情況下是隱藏的，當鼠標懸停是顯示出來。
pinterest_revealed-opt.jpg
一旦你將鼠標懸停在某個條目上，條目中就會顯示出三個新的動作按鈕。
內隱啟示通常在以下情況下被使用：在一個復雜的交互界面，立馬呈現每個交互啟示會使交互界面顯得很混雜，或者使交互動作的層級顯得混亂。內隱啟示能聰明得弱化（不強調）那些不太重要的操作功能。當某個功能不是核心或者必須的（如報告某個不合適的圖像）時候，運用隱藏啟示是好的。
flat-design-clear-opt.jpg
它漂亮嗎？是的。然而，它的設計主要依賴于內隱啟示。當你把一個條目清單拉下來時，屏幕頂端會向下折，提示你拉動以建立新的條目。明白這些指令需要經驗。向左滑動刪除條目，向右滑動標記為已完成，擠壓把兩個條目分開會在中間新建一個新條目，向內擠壓會關閉列表。
有時候傳達啟示最簡單的方式就是把現實物體作為隱喻。例如，大部分的界面圖標就是依靠這種隱喻去傳達啟示信息的。信封圖標啟示著發送電子郵件，房子圖標啟示著回“家”，電話聽筒圖標啟示著打電話，打印機圖標啟示著打印文件，鏈條圖標啟示著建立鏈接。
cloud-opt.jpg
一些隱喻是要基于背景的。在文檔查看應用中，放大鏡最可能啟示著放大。然而在網站的輸入框旁邊的放大鏡則最可能啟示著搜索。
ness-opt.jpg
手機應用Ness的界面圖標
你是否認為以上的圖標需要文字標簽？如果它們被拿走，你是否能理解汽車圖標啟示著分享路線？如果你不是開車去目的地或者和某些在公共交通上的人分享路線，你就要對這個圖標思考一番。在這個案例中一個更通用的模式隱喻可能是地圖標記。
模式隱喻指的是能夠傳達某些特定啟示的一些既定的隱喻。例如，大部分設計師現在都使用老式電話聽筒圖標來傳達打電話這種啟示，使用信封圖標來傳達發送電子郵件的啟示，用心臟圖標來傳達喜歡某物的啟示。如果設計師相信有更好的隱喻存在，他們就可以打破既有的模式。但是要牢記：用戶已經學習了這種既有的模式。細想心臟圖標所能傳達的豐富啟示，如下：
點擊圖標“喜歡”某條目
允許保存我喜歡的條目
我可能能在我的賬戶中訪問所有我喜歡條目的集合
在用戶增加某個條目時可能被通知已經“喜歡”過該條目
對該條目來說，這是個積極的手勢
心臟經常被理解為愛或者喜歡的象征。通過被持續用來傳達某些特定的和喜歡相關的啟示，它開始在交互設計上被用來傳達這些隱喻。
pattern_metaphor-opt.jpg
鏈接的既定模式隱喻是兩個或者三個連接在一起的環形鏈條，在這個界面上，你找不到這個圖標。最接近的圖標是左數第四個圖標，看起來像一個傾斜的無限符號。它的旁邊是加了刪除線的傾斜無限符。這些圖標比環形鏈條圖標更美觀嗎？或許是。理解這些圖標傳達的啟示是否需要少量更多的心理努力？我認為是的。這種改變是否值得？我不確定。這個新圖標看起來非常像無限符。或許也有人會爭辯道：正是網絡鏈接將人們的聯結擴展到無限大，一個環形鏈的鏈接是更不抽象的隱喻。
假的啟示看起來像啟示了某種特定的功能，而實際上它啟示著另一種功能或者根本不能執行功能。舉例來說：
某個元素從周圍背景中凸出來，這使得它看起來可以按動或者點擊。但是實際上它不能。
一個Logo圖像不能使用戶返回到根領域。
某個顯示出具有模式啟示的詞條（著色或者下劃線）實際上并不是鏈接。
一個綠色按鈕（一個表示創建東西的模式啟示）實際上用來刪除數據。
一個變灰的詞條，似乎啟示著沒有交互操作，實際上卻是一個鏈接。
一個信封圖標，似乎啟示著發送電子郵件，實際上卻是用來發送短信。
green_delete-opt.jpg
在 Icon Finder 上一個綠色的“刪除”或者“關閉”按鈕。
在交互設計模式中，綠色按鈕啟示著保存或者創建數據。將綠色按鈕用來誘發破壞性操作，用戶很可能在他們想要保存數據的時候而意外地刪除數據。
dribbble-opt.jpg
在Dribbble的這個界面元素中你能發現什么啟示？
有時候表明此刻某個界面元素不提供任何操作功能是必須的。最常見的方式就是將這個元素變灰。拿Rdio應用中的輸入框來說：
password-opt.jpg
密碼輸入框變灰是因為目前它不提供點擊或者輸入數據，為了顯現這些啟示性，你必須點擊旁邊的“改變”按鈕。
you_are-opt.jpg
在這個界面元素中，“保存改變”按鈕變灰是因為你還未做出任何改變，因此你不能保存。這種風格表明了目前按鈕不能提供任何操作功能。
下面設計中變灰的按鈕通過“瀏覽我們的設計產品列表”的文字指示明顯地啟示了點擊。但是這個按鈕的設計風格遵從了否定啟示的模式（扁平，灰色，融入背景）。因為灰色按鈕通常表明了啟示性的缺失以至于用戶可能不能意識到他能被點擊。
negative_affordance-opt.jpg
灰色也常用來表明一個非鏈接的字或者詞語。在以下Google主頁的界面中卻不然。看起來我的電子郵箱地址不能被點擊，然而點擊它你會驚訝得展開具有我的賬戶信息的下拉菜單。
negative_2-opt.jpg
明智地使用否定啟示能使用戶更快得定位到界面中具有有用功能的部分。
IOS 7中的默認天氣應用具有大量的啟示性。下面六種啟示性中，它具有哪些？不具有哪些？
外顯的
模式的
隱喻的
內隱的
假的
否定的
讓我們來逐一檢查。
ios_weather-opt.jpg
應用主界面沒有外顯的啟示性。沒有看起來可以點擊的元素。沒有言語指示你去如何和界面進行交互。除了屏幕底部的導航元素（依賴于模式啟示性），應用的界面看起來就像是一個數據的扁平化陳列。
在這個天氣應用界面中我能鑒別出兩個模式啟示，它們均位于屏幕底部。
weather_detail-opt.jpg
屏幕底部的一行白點在IOS系統設計模式中表示可以滑動的屏幕的數量。加亮的白點代表你目前所在的位置。當IOS主屏中具有好幾屏幕的app圖標時，才采用這種設計模式。
雅虎圖標是另一個模式啟示性的例子。經常和網頁交互的用戶會知道點擊圖標通常會將他們帶到公司或者組織的主頁。此處，它會指向雅虎搜索結果。
盡管應用中運用了一些隱喻，但是只有一個隱喻具有啟示性。所有的天氣標志都是隱喻。從一朵云后面偷窺的太陽圖標不是指云后面有太陽，它意味著天氣是晴而多云的。太陽圖標不代表太陽，它意味著天氣晴朗。然而，敲擊這些圖標不提供任何操作功能，它們純粹只是傳達天氣信息。
界面中唯一具有隱喻啟示性的元素位于右下角。這個圖標看起來像是條目列表或者菜單。敲擊圖標將會展開一列天氣地理位置的菜單，使你能增加或刪除條目。這個圖標運用了視覺隱喻來傳達它的功能啟示性。
屏幕界面中具有兩個內隱啟示。溫度是每小時報告一次的，但是窗口中顯示了六個小時。小塊數據暗示著你能獲得能多的數據。如果我們在顯示每小時溫度處向左滑動，更多時間的溫度將會從屏幕右邊進入視野。這樣就使得我們能在小屏幕空間上獲得所有時間段（每小時）的溫度數據。
雖然沒有任何線索，若點擊屏幕頂部，溫度數據將會被諸如濕度、風速、下雨概率以及體感溫度等細節數據所取代。我之前就頻繁使用這款應用，為了寫這篇文章我盡量去發現應用中的內隱啟示性，我敲擊了屏幕的所有地方，這才發現了這個功能。
我懷疑這個應用的大部分用戶都沒有發現這個功能。假若這樣，這個內隱啟示性是否是一個好的設計呢？這是個問題。有許多更好的設計來增加這個功能啟示性，比如是溫度數字從周圍凸出是它看起來可以點擊，在溫度數字下面加下劃線，增加一個圖標，或者在溫度和地點的左右兩側陳列那些細節數據。
weather_white-opt.jpg
在假的啟示性方面，這款應用沒有問題。用戶可能會敲擊這周中的其他日期來看看他們是否能看到具體的天氣信息，但是應用只提供了當天的具體天氣信息。用戶也可能想敲擊當天溫，認為可以看到一個溫（而不是最高溫）的視圖。但是應用界面中并沒有呈現表明具有這種功能的誤導線索。
這個應用并沒有很強有力地運用否定的啟示性。界面中“Monday”加粗了，而旁邊的“Today”的字體更細小模糊，這表明了“Monday”具有更高的層級，而“Today”僅僅是傳達信息的。然而你點擊兩個單詞中的任何一個，在屏幕頂部都會出現詳細的數據（和敲擊屏幕頂部出現得一樣。）
| 類型 | 優點 | 缺點 | 使用情況 |
|---|---|---|---|
| 外顯 | 清楚，明白，用戶不會遺漏啟示性 | 界面雜亂，對某些用戶來說是對他們能力的低估 | 面向低科技用戶；需要說明一些非直覺的啟示 |
| 快速而清晰地傳達啟示 | 依賴于相似界面的先前經驗 | 已經形成了一種穩固的既定模式；用戶是技術嫻熟的 | |
| 內隱 | 干凈的界面 | 可能不能發現功能 | 不太重要的功能；用戶對學習（嘗試）應用具有足夠的認同 |
| 隱喻 | 傳達復雜啟示性最簡單的方式 | 對不同人來說同一隱喻代表不同事情 | 沒有隱喻時解釋啟示性變得太復雜 |
| 假的 | 無 | 表明沒有啟示性浪費用戶時間 | 避免假的啟示性 |
| 否定的 | 通過表明元素沒有啟示性避免用戶交互過程中的挫折 | 如果一個元素沒有啟示性，哪些它可能是不必要的 | 當輔助信息或元素是必須的，但是不提供功能 |
盡管你并沒有意識到，你可能已經在設計中運用了很多類型的啟示性。無論是用戶還是交互設計師，識別啟示性似乎是憑直覺的。
通過慎重地使用啟示性，我們能幫助用戶快速地理解交互界面，巧妙地鼓勵他們從一個動作轉到另一個動作。
理解了啟示性，我們就能評價下面這個交互界面。我們很快就能明白在Dunked.com中創建賬戶是必不可少的，用戶會毫不猶豫地點擊“開始”按鈕。你可以運用這種啟示性在你自己的設計中增加一個相同層級的動作按鈕。
dunked-500px-opt.jpg
綜上所述，在網頁設計中最被低估的就是“啟示性”。
掃一掃，案例分享帶回家（藍藍設計微信公眾平臺）