藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù).

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

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

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

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

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

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

tumblr-opt.jpg

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

• 1 輸入郵箱地址

• 2 輸入密碼

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

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

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

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

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

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

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

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

• 11 按下回車鍵來(lái)搜索輸入的詞條

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

paypal-opt.jpg

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

video-opt.jpg

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

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

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

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

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

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

envat_studio-500px-opt.jpg

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

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

內(nèi)隱啟示

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

pinterest-unrevealed-opt.jpg

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

pinterest_revealed-opt.jpg

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

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

flat-design-clear-opt.jpg

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

隱喻啟示

有時(shí)候傳達(dá)啟示最簡(jiǎn)單的方式就是把現(xiàn)實(shí)物體作為隱喻。例如，大部分的界面圖標(biāo)就是依靠這種隱喻去傳達(dá)啟示信息的。信封圖標(biāo)啟示著發(fā)送電子郵件，房子圖標(biāo)啟示著回“家”，電話聽(tīng)筒圖標(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)啟示著分享路線？如果你不是開(kāi)車去目的地或者和某些在公共交通上的人分享路線，你就要對(duì)這個(gè)圖標(biāo)思考一番。在這個(gè)案例中一個(gè)更通用的模式隱喻可能是地圖標(biāo)記。

模式隱喻

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

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

• 允許保存我喜歡的條目

• 我可能能在我的賬戶中訪問(wèn)所有我喜歡條目的集合

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

• 對(duì)該條目來(lái)說(shuō)，這是個(gè)積極的手勢(shì)

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

pattern_metaphor-opt.jpg

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

假的啟示

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

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

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

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

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

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

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

green_delete-opt.jpg

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

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

dribbble-opt.jpg

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

否定的啟示

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

password-opt.jpg

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

you_are-opt.jpg

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

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

negative_affordance-opt.jpg

灰色也常用來(lái)表明一個(gè)非鏈接的字或者詞語(yǔ)。在以下Google主頁(yè)的界面中卻不然?？雌饋?lái)我的電子郵箱地址不能被點(diǎn)擊，然而點(diǎn)擊它你會(huì)驚訝得展開(kāi)具有我的賬戶信息的下拉菜單。

negative_2-opt.jpg

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

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

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

• 外顯的

• 模式的

• 隱喻的

• 內(nèi)隱的

• 假的

• 否定的

讓我們來(lái)逐一檢查。

ios_weather-opt.jpg

外顯啟示性

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

模式啟示性

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

weather_detail-opt.jpg

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

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

隱喻啟示性

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

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

內(nèi)隱啟示性

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

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

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

weather_white-opt.jpg

假的啟示性

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

否定的啟示性

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

啟示性的總結(jié)

結(jié)論

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

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

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

dunked-500px-opt.jpg

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

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