藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù).

每一個扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源：http://yidianzixun.com/home?page=article&id=07O8BcSh&up=0

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

啟示性（affordance）指的是某物體或者對象具有某種操作或功能上的暗示性。舉例來說，一張高于你膝蓋高度的椅子，它可以暗示你坐。牙刷的手柄略長于人類的手掌，它暗示可以用來握緊。

所有我們周圍的客體都具有啟示性：有些是外顯的（如門手柄上寫著的“推”字信息），有些是內(nèi)隱的（如椅子可以用來打破玻璃或者用來當(dāng)做武器）。這個概念最初由心理學(xué)家詹姆斯·吉布森提出，隨后被唐納德·諾曼在《設(shè)計(jì)心理學(xué)》一書中引進(jìn)到人機(jī)交互領(lǐng)域。

你能數(shù)出一個用戶能在 Tumblr主頁能上執(zhí)行多少操作嗎？

tumblr-opt.jpg

盡管看起來是一個很簡單的界面，你會驚奇地發(fā)現(xiàn)在Tumblr主頁可能執(zhí)行11個操作。

• 1 輸入郵箱地址

• 2 輸入密碼

• 3 點(diǎn)擊問號圖標(biāo)（指向密碼恢復(fù)界面）

• 4 點(diǎn)擊登陸按鈕

• 5 點(diǎn)擊注冊鏈接

• 6 點(diǎn)擊條款鏈接

• 7 點(diǎn)擊隱私鏈接

• 8 點(diǎn)擊“Posted by blvcktrip”鏈接

• 9 點(diǎn)擊blvcktrip的頭像圖片

• 10 點(diǎn)擊“搜索Tumblr”輸入搜素詞條

• 11 按下回車鍵來搜索輸入的詞條

如果你能猜到所有以上的操作，那么你就已經(jīng)認(rèn)識到了啟示性。它就是交互提供給用戶特定功能的方式。所有你要做得都在一個Tumblr頁面的扁平化截屏上。通過再認(rèn)模式和外顯啟示，就能考查交互功能。

paypal-opt.jpg

PayPal的界面元素是外顯啟示的一個很好的例子。外觀凸出的按鈕提示向下按動,而文本信息則明顯提示操作的結(jié)果。

video-opt.jpg

Copyblogger’s網(wǎng)站中的視頻采用的外顯啟示方式：文本提示點(diǎn)擊播放視頻。

2 .還未明確樹立特定的模式來傳達(dá)特定操作的啟示

比如手機(jī)上的一個交互對象：向內(nèi)擠壓關(guān)閉，向外擠壓展開。當(dāng)我們還不清楚如何形象的傳達(dá)這種交互啟示時，設(shè)計(jì)師就會采用外顯啟示的方式。

是否采用外顯啟示要根據(jù)設(shè)計(jì)背景而定。太明顯的啟示會帶來設(shè)計(jì)冗余。如果每個鏈接都寫著“點(diǎn)擊此處”，頁面就會變得很單調(diào)。如何讓受眾在沒有明確的指示下理解一個對象的啟示性是需要考慮的問題。例如，一款app的用戶是科技創(chuàng)業(yè)者，他們之前就已經(jīng)了解輸入框，當(dāng)app交互界面還用文字指示“點(diǎn)擊輸入郵箱地址”就會顯得很二。

模式化的啟示這是現(xiàn)代交互設(shè)計(jì)中最常用的啟示類型。例如，我們隱約知道一個不被包含在一個句子之內(nèi)或者位于頁面主要內(nèi)容之外的詞條一般可供點(diǎn)擊。我們知道位于屏幕上方，包含脫節(jié)詞條的長條通常是導(dǎo)航欄，上面的詞條提供了導(dǎo)航。我們知道在看起來像按鈕背景上的單個字或者詞語通常是可用來執(zhí)行某個操作的按鈕。我們會猜測下方帶有下拉箭頭的某個字或詞可以展開下拉菜單。

以下是我在Envato Studio’s主頁上的模式化啟示清單：

envat_studio-500px-opt.jpg

Envato Studio’s的主頁，一個自由職業(yè)者的市場，充滿了模式啟示，你能把它們都羅列出來嗎？

為了理解設(shè)計(jì)師對模式啟示的依賴，你可以問問你自己，如果你從未和網(wǎng)站或者智能手機(jī)產(chǎn)生過交互行為，但是你知道怎么執(zhí)行一些基本的操作，比如點(diǎn)擊和敲擊，你能理解界面啟示你去做的一些操作嗎？

內(nèi)隱啟示

內(nèi)隱啟示是一種微妙的形式，它只在某種特定的條件下顯現(xiàn)出來。例如，提示點(diǎn)擊的鏈接文字只有在鼠標(biāo)停在上面的時候顯示出來（并且顏色也發(fā)生改變）。在IOS設(shè)備上，只有你在主屏幕上敲擊或者拖動時，應(yīng)用圖標(biāo)才能發(fā)生滑動。在Pinterest上，只有當(dāng)你的鼠標(biāo)懸停在上面的時候，別針按鈕（提供“喜歡”功能）才會出現(xiàn)。默認(rèn)情況下，直到用戶執(zhí)行某個操作來激活提示，元素的啟示性不會顯示出來。

pinterest-unrevealed-opt.jpg

Pinterest上的圖像啟示在默認(rèn)情況下是隱藏的，當(dāng)鼠標(biāo)懸停是顯示出來。

pinterest_revealed-opt.jpg

一旦你將鼠標(biāo)懸停在某個條目上，條目中就會顯示出三個新的動作按鈕。

內(nèi)隱啟示通常在以下情況下被使用：在一個復(fù)雜的交互界面，立馬呈現(xiàn)每個交互啟示會使交互界面顯得很混雜，或者使交互動作的層級顯得混亂。內(nèi)隱啟示能聰明得弱化（不強(qiáng)調(diào)）那些不太重要的操作功能。當(dāng)某個功能不是核心或者必須的（如報(bào)告某個不合適的圖像）時候，運(yùn)用隱藏啟示是好的。

flat-design-clear-opt.jpg

它漂亮嗎？是的。然而，它的設(shè)計(jì)主要依賴于內(nèi)隱啟示。當(dāng)你把一個條目清單拉下來時，屏幕頂端會向下折，提示你拉動以建立新的條目。明白這些指令需要經(jīng)驗(yàn)。向左滑動刪除條目，向右滑動標(biāo)記為已完成，擠壓把兩個條目分開會在中間新建一個新條目，向內(nèi)擠壓會關(guān)閉列表。

隱喻啟示

有時候傳達(dá)啟示最簡單的方式就是把現(xiàn)實(shí)物體作為隱喻。例如，大部分的界面圖標(biāo)就是依靠這種隱喻去傳達(dá)啟示信息的。信封圖標(biāo)啟示著發(fā)送電子郵件，房子圖標(biāo)啟示著回“家”，電話聽筒圖標(biāo)啟示著打電話，打印機(jī)圖標(biāo)啟示著打印文件，鏈條圖標(biāo)啟示著建立鏈接。

cloud-opt.jpg

一些隱喻是要基于背景的。在文檔查看應(yīng)用中，放大鏡最可能啟示著放大。然而在網(wǎng)站的輸入框旁邊的放大鏡則最可能啟示著搜索。

ness-opt.jpg

手機(jī)應(yīng)用Ness的界面圖標(biāo)

你是否認(rèn)為以上的圖標(biāo)需要文字標(biāo)簽？如果它們被拿走，你是否能理解汽車圖標(biāo)啟示著分享路線？如果你不是開車去目的地或者和某些在公共交通上的人分享路線，你就要對這個圖標(biāo)思考一番。在這個案例中一個更通用的模式隱喻可能是地圖標(biāo)記。

模式隱喻

模式隱喻指的是能夠傳達(dá)某些特定啟示的一些既定的隱喻。例如，大部分設(shè)計(jì)師現(xiàn)在都使用老式電話聽筒圖標(biāo)來傳達(dá)打電話這種啟示，使用信封圖標(biāo)來傳達(dá)發(fā)送電子郵件的啟示，用心臟圖標(biāo)來傳達(dá)喜歡某物的啟示。如果設(shè)計(jì)師相信有更好的隱喻存在，他們就可以打破既有的模式。但是要牢記：用戶已經(jīng)學(xué)習(xí)了這種既有的模式。細(xì)想心臟圖標(biāo)所能傳達(dá)的豐富啟示，如下：

• 點(diǎn)擊圖標(biāo)“喜歡”某條目

• 允許保存我喜歡的條目

• 我可能能在我的賬戶中訪問所有我喜歡條目的集合

• 在用戶增加某個條目時可能被通知已經(jīng)“喜歡”過該條目

• 對該條目來說，這是個積極的手勢

心臟經(jīng)常被理解為愛或者喜歡的象征。通過被持續(xù)用來傳達(dá)某些特定的和喜歡相關(guān)的啟示，它開始在交互設(shè)計(jì)上被用來傳達(dá)這些隱喻。

pattern_metaphor-opt.jpg

鏈接的既定模式隱喻是兩個或者三個連接在一起的環(huán)形鏈條，在這個界面上，你找不到這個圖標(biāo)。最接近的圖標(biāo)是左數(shù)第四個圖標(biāo)，看起來像一個傾斜的無限符號。它的旁邊是加了刪除線的傾斜無限符。這些圖標(biāo)比環(huán)形鏈條圖標(biāo)更美觀嗎？或許是。理解這些圖標(biāo)傳達(dá)的啟示是否需要少量更多的心理努力？我認(rèn)為是的。這種改變是否值得？我不確定。這個新圖標(biāo)看起來非常像無限符。或許也有人會爭辯道：正是網(wǎng)絡(luò)鏈接將人們的聯(lián)結(jié)擴(kuò)展到無限大，一個環(huán)形鏈的鏈接是更不抽象的隱喻。

假的啟示

假的啟示看起來像啟示了某種特定的功能，而實(shí)際上它啟示著另一種功能或者根本不能執(zhí)行功能。舉例來說：

• 某個元素從周圍背景中凸出來，這使得它看起來可以按動或者點(diǎn)擊。但是實(shí)際上它不能。

• 一個Logo圖像不能使用戶返回到根領(lǐng)域。

• 某個顯示出具有模式啟示的詞條（著色或者下劃線）實(shí)際上并不是鏈接。

• 一個綠色按鈕（一個表示創(chuàng)建東西的模式啟示）實(shí)際上用來刪除數(shù)據(jù)。

• 一個變灰的詞條，似乎啟示著沒有交互操作，實(shí)際上卻是一個鏈接。

• 一個信封圖標(biāo)，似乎啟示著發(fā)送電子郵件，實(shí)際上卻是用來發(fā)送短信。

green_delete-opt.jpg

在 Icon Finder 上一個綠色的“刪除”或者“關(guān)閉”按鈕。

在交互設(shè)計(jì)模式中，綠色按鈕啟示著保存或者創(chuàng)建數(shù)據(jù)。將綠色按鈕用來誘發(fā)破壞性操作，用戶很可能在他們想要保存數(shù)據(jù)的時候而意外地刪除數(shù)據(jù)。

dribbble-opt.jpg

在Dribbble的這個界面元素中你能發(fā)現(xiàn)什么啟示？

否定的啟示

有時候表明此刻某個界面元素不提供任何操作功能是必須的。最常見的方式就是將這個元素變灰。拿Rdio應(yīng)用中的輸入框來說：

password-opt.jpg

密碼輸入框變灰是因?yàn)槟壳八惶峁c(diǎn)擊或者輸入數(shù)據(jù)，為了顯現(xiàn)這些啟示性，你必須點(diǎn)擊旁邊的“改變”按鈕。

you_are-opt.jpg

在這個界面元素中，“保存改變”按鈕變灰是因?yàn)槟氵€未做出任何改變，因此你不能保存。這種風(fēng)格表明了目前按鈕不能提供任何操作功能。

下面設(shè)計(jì)中變灰的按鈕通過“瀏覽我們的設(shè)計(jì)產(chǎn)品列表”的文字指示明顯地啟示了點(diǎn)擊。但是這個按鈕的設(shè)計(jì)風(fēng)格遵從了否定啟示的模式（扁平，灰色，融入背景）。因?yàn)榛疑粹o通常表明了啟示性的缺失以至于用戶可能不能意識到他能被點(diǎn)擊。

negative_affordance-opt.jpg

灰色也常用來表明一個非鏈接的字或者詞語。在以下Google主頁的界面中卻不然?？雌饋砦业碾娮余]箱地址不能被點(diǎn)擊，然而點(diǎn)擊它你會驚訝得展開具有我的賬戶信息的下拉菜單。

negative_2-opt.jpg

明智地使用否定啟示能使用戶更快得定位到界面中具有有用功能的部分。

啟示性的綜述：IOS 7的天氣應(yīng)用

IOS 7中的默認(rèn)天氣應(yīng)用具有大量的啟示性。下面六種啟示性中，它具有哪些？不具有哪些？

• 外顯的

• 模式的

• 隱喻的

• 內(nèi)隱的

• 假的

• 否定的

讓我們來逐一檢查。

ios_weather-opt.jpg

外顯啟示性

應(yīng)用主界面沒有外顯的啟示性。沒有看起來可以點(diǎn)擊的元素。沒有言語指示你去如何和界面進(jìn)行交互。除了屏幕底部的導(dǎo)航元素（依賴于模式啟示性），應(yīng)用的界面看起來就像是一個數(shù)據(jù)的扁平化陳列。

模式啟示性

在這個天氣應(yīng)用界面中我能鑒別出兩個模式啟示，它們均位于屏幕底部。

weather_detail-opt.jpg

屏幕底部的一行白點(diǎn)在IOS系統(tǒng)設(shè)計(jì)模式中表示可以滑動的屏幕的數(shù)量。加亮的白點(diǎn)代表你目前所在的位置。當(dāng)IOS主屏中具有好幾屏幕的app圖標(biāo)時，才采用這種設(shè)計(jì)模式。

雅虎圖標(biāo)是另一個模式啟示性的例子。經(jīng)常和網(wǎng)頁交互的用戶會知道點(diǎn)擊圖標(biāo)通常會將他們帶到公司或者組織的主頁。此處，它會指向雅虎搜索結(jié)果。

隱喻啟示性

盡管應(yīng)用中運(yùn)用了一些隱喻，但是只有一個隱喻具有啟示性。所有的天氣標(biāo)志都是隱喻。從一朵云后面偷窺的太陽圖標(biāo)不是指云后面有太陽，它意味著天氣是晴而多云的。太陽圖標(biāo)不代表太陽，它意味著天氣晴朗。然而，敲擊這些圖標(biāo)不提供任何操作功能，它們純粹只是傳達(dá)天氣信息。

界面中唯一具有隱喻啟示性的元素位于右下角。這個圖標(biāo)看起來像是條目列表或者菜單。敲擊圖標(biāo)將會展開一列天氣地理位置的菜單，使你能增加或刪除條目。這個圖標(biāo)運(yùn)用了視覺隱喻來傳達(dá)它的功能啟示性。

內(nèi)隱啟示性

屏幕界面中具有兩個內(nèi)隱啟示。溫度是每小時報(bào)告一次的，但是窗口中顯示了六個小時。小塊數(shù)據(jù)暗示著你能獲得能多的數(shù)據(jù)。如果我們在顯示每小時溫度處向左滑動，更多時間的溫度將會從屏幕右邊進(jìn)入視野。這樣就使得我們能在小屏幕空間上獲得所有時間段（每小時）的溫度數(shù)據(jù)。

雖然沒有任何線索，若點(diǎn)擊屏幕頂部，溫度數(shù)據(jù)將會被諸如濕度、風(fēng)速、下雨概率以及體感溫度等細(xì)節(jié)數(shù)據(jù)所取代。我之前就頻繁使用這款應(yīng)用，為了寫這篇文章我盡量去發(fā)現(xiàn)應(yīng)用中的內(nèi)隱啟示性，我敲擊了屏幕的所有地方，這才發(fā)現(xiàn)了這個功能。

我懷疑這個應(yīng)用的大部分用戶都沒有發(fā)現(xiàn)這個功能。假若這樣，這個內(nèi)隱啟示性是否是一個好的設(shè)計(jì)呢？這是個問題。有許多更好的設(shè)計(jì)來增加這個功能啟示性，比如是溫度數(shù)字從周圍凸出是它看起來可以點(diǎn)擊，在溫度數(shù)字下面加下劃線，增加一個圖標(biāo)，或者在溫度和地點(diǎn)的左右兩側(cè)陳列那些細(xì)節(jié)數(shù)據(jù)。

weather_white-opt.jpg

假的啟示性

在假的啟示性方面，這款應(yīng)用沒有問題。用戶可能會敲擊這周中的其他日期來看看他們是否能看到具體的天氣信息，但是應(yīng)用只提供了當(dāng)天的具體天氣信息。用戶也可能想敲擊當(dāng)天溫，認(rèn)為可以看到一個溫（而不是最高溫）的視圖。但是應(yīng)用界面中并沒有呈現(xiàn)表明具有這種功能的誤導(dǎo)線索。

否定的啟示性

這個應(yīng)用并沒有很強(qiáng)有力地運(yùn)用否定的啟示性。界面中“Monday”加粗了，而旁邊的“Today”的字體更細(xì)小模糊，這表明了“Monday”具有更高的層級，而“Today”僅僅是傳達(dá)信息的。然而你點(diǎn)擊兩個單詞中的任何一個，在屏幕頂部都會出現(xiàn)詳細(xì)的數(shù)據(jù)（和敲擊屏幕頂部出現(xiàn)得一樣。）

啟示性的總結(jié)

結(jié)論

盡管你并沒有意識到，你可能已經(jīng)在設(shè)計(jì)中運(yùn)用了很多類型的啟示性。無論是用戶還是交互設(shè)計(jì)師，識別啟示性似乎是憑直覺的。

通過慎重地使用啟示性，我們能幫助用戶快速地理解交互界面，巧妙地鼓勵他們從一個動作轉(zhuǎn)到另一個動作。

理解了啟示性，我們就能評價(jià)下面這個交互界面。我們很快就能明白在Dunked.com中創(chuàng)建賬戶是必不可少的，用戶會毫不猶豫地點(diǎn)擊“開始”按鈕。你可以運(yùn)用這種啟示性在你自己的設(shè)計(jì)中增加一個相同層級的動作按鈕。

dunked-500px-opt.jpg

綜上所述，在網(wǎng)頁設(shè)計(jì)中最被低估的就是“啟示性”。

掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺）