無論你是否喜歡扁平化設(shè)計(jì)，交互組件必須給足夠的提示來表明這個(gè)組件是可點(diǎn)擊的。標(biāo)記可點(diǎn)擊的提示有邊框，顏色，尺寸，連貫性，位置或者遵循網(wǎng)頁標(biāo)準(zhǔn)，這些可以讓交互組件更好看。

用戶需要知道網(wǎng)頁的哪個(gè)區(qū)域是空白的內(nèi)容和哪個(gè)區(qū)域是可點(diǎn)擊的（或者可被選中）。

讓可點(diǎn)擊的元素易被識(shí)別，如此一來用戶就無需思考元素設(shè)計(jì)的意思或者當(dāng)元素的設(shè)計(jì)超出了他們的使用習(xí)慣，他們也不會(huì)因此感到困惑。

這里有個(gè)簡(jiǎn)單的交互代價(jià)的例子：人們對(duì)待點(diǎn)擊就像貨幣一樣，他們不會(huì)隨便用它。他們小心對(duì)待可點(diǎn)擊元素，如果強(qiáng)迫他們?nèi)ふ铱牲c(diǎn)擊的元素甚至是更多地消耗他們的能量在點(diǎn)擊上，他們會(huì)因此而反感。

Tom’s of Maine:讓我們做個(gè)簡(jiǎn)單得測(cè)試。猜猜這個(gè)屏幕里哪塊區(qū)域是可以點(diǎn)擊的。然后滾動(dòng)到下面去找答案。

吸引點(diǎn)擊的一個(gè)主要因素是鏈接文本的質(zhì)量。然而，這篇文章只關(guān)注視覺上的可點(diǎn)擊：僅僅通過看著這個(gè)網(wǎng)頁，你可以告訴我哪個(gè)點(diǎn)了會(huì)有反應(yīng)嗎？一個(gè)物體通過它的外觀就應(yīng)該讓用戶知道怎么去用它，Nielsen Norman Group 的聯(lián)合創(chuàng)始人，Don Norman描述過這些生理上可察覺的暗示。在網(wǎng)絡(luò)世界里，人們判斷哪些元素可點(diǎn)擊是基于他們?cè)诂F(xiàn)實(shí)世界和網(wǎng)絡(luò)世界里的經(jīng)驗(yàn)。他們把看到的東西，通過形狀、顏色和背景等屬性，把他們的性質(zhì)與以往見過的東西聯(lián)系起來。視覺暗示與人們的預(yù)期相符，這樣可以幫助他們很快明白哪個(gè)按鈕是可以按下。

傳統(tǒng)超鏈接的提示是藍(lán)色加下劃線的文本，就像我在這篇文章用的一樣。按鈕就像現(xiàn)實(shí)世界中的對(duì)照物一樣，是長(zhǎng)方形的，并且有三維特征的。這些元素有著很好的視覺提示，早期我們也建議按鈕和鏈接都遵循這些設(shè)計(jì)規(guī)則。

但是如今用戶看到的超鏈接和按鈕有很大的不同。隨著用戶接觸不同的交互提示并且學(xué)習(xí)這些新的提示，標(biāo)記物也在不斷改進(jìn)。

有了這種說法，扁平化設(shè)計(jì)（一種界面設(shè)計(jì)風(fēng)格，注重二維平面的表達(dá)，iOS和Windows 8就是個(gè)例子）會(huì)有一些網(wǎng)頁設(shè)計(jì)師將極簡(jiǎn)風(fēng)格運(yùn)用到極致。扁平化設(shè)計(jì)背后的理念是簡(jiǎn)化界面。然而去除太多會(huì)掩蓋這個(gè)對(duì)象，使得這個(gè)東西更難理解了。平面設(shè)計(jì)的一個(gè)主要問題是其中最重要的一個(gè)可點(diǎn)擊的標(biāo)記——三維視覺，被移除了。用戶長(zhǎng)期依賴的提示功能被移除，使得用戶很難判斷哪個(gè)東西是可點(diǎn)擊的。

Tom’s of Maine:這個(gè)網(wǎng)頁里只有綠色覆蓋的區(qū)域是可點(diǎn)擊的。點(diǎn)擊這些區(qū)域之外的用戶只有失望了。

降低點(diǎn)擊的不確定性

絕對(duì)不要讓用戶依賴于靠鼠標(biāo)放在上面來確定一個(gè)文本是否可點(diǎn)擊。尋找鏈接比較費(fèi)勁，用戶不會(huì)花太多的時(shí)間在上面。（如果有個(gè)永遠(yuǎn)正確的使用指導(dǎo)，這會(huì)限制用戶的努力。使用越麻煩，越少人用。）下面是一些基本設(shè)計(jì)將幫助用戶減少對(duì)是否可點(diǎn)擊元素的猜測(cè)：

文本鏈接

1. 盡管藍(lán)色仍然是最安全的鏈接顏色，其他顏色也可以，只要鏈接文本的顏色和主體的顏色有明顯的差別。如果你沒有特別的理由去用其他顏色，我們?nèi)匀唤ㄗh你用藍(lán)色。
2. 鏈接的位置將決定是否需要下劃線。導(dǎo)航菜單欄和列表，特別是在網(wǎng)頁外面的位置，是不需要下劃線的。它們的位置已經(jīng)決定了它們的作用。
3. 測(cè)試你為超鏈接所選擇的顏色，以保證有色盲的人也可以輕易的察覺到它們。
4. 靜態(tài)項(xiàng)目的顏色不能跟超鏈接的顏色一樣。
5. 不要在不可點(diǎn)擊的項(xiàng)目上使用藍(lán)色的文本（或者下劃線的文本）
6. 不管你選擇哪種超鏈接的風(fēng)格，要保證整個(gè)網(wǎng)頁經(jīng)過一致的處理。

Patient Safety and Quality Healthcare:這里的提示讓人感到困惑。藍(lán)色的標(biāo)題不可點(diǎn)擊。圖片可以點(diǎn)擊，但它們看起來更像靜態(tài)的圖片。網(wǎng)頁頂端的說明告訴你去點(diǎn)哪個(gè)東西——這是一個(gè)失敗的標(biāo)記設(shè)計(jì)。

Starbucks:鏈接不再是藍(lán)色。在這個(gè)網(wǎng)頁里超鏈接顯然是綠色的。在網(wǎng)頁的右邊項(xiàng)目列表是可點(diǎn)擊的，因?yàn)槲恢茫撨吘嗪苷┖透袷剑╞ox和下彈列表只能是鏈接了）

按鈕

1. 至少讓按鈕接近于實(shí)際按鈕。為了一個(gè)對(duì)象能被識(shí)別，它必須有正確視覺提示去觸發(fā)正確和快速的聯(lián)想。保留正方形的形狀（最好有圓角）如果你不用三維視圖。在扁平化設(shè)計(jì)中，交互組件至少可以輕易分辨是否可悲點(diǎn)擊，即使沒有了更多的效果如陰影和漸變。（在早期的研究中，從扁平變成3D的按鈕后，點(diǎn)擊量增加了416%，盡管現(xiàn)在的影響越來越小了，它仍然起著很大的作用。）
2. 相反地，不要讓不可點(diǎn)擊地項(xiàng)目看起來像按鈕。例如，給不可點(diǎn)擊的標(biāo)題加個(gè)背景顏色會(huì)使它像個(gè)按鈕。
3. 在網(wǎng)頁里注意內(nèi)容的層級(jí)關(guān)系。避免在同一個(gè)網(wǎng)頁里有著眾多大小，色彩不同的邊框。當(dāng)項(xiàng)目和其他的項(xiàng)目很相似時(shí)，人們很難從中挑選出可點(diǎn)擊的元素。

TaskRabbit:在網(wǎng)頁中按鈕不必用擬物設(shè)計(jì)——因?yàn)榘粹o沒必要看起來完全像實(shí)際按鈕。這四個(gè)按鈕是可點(diǎn)擊的，因?yàn)樗鼈冇兄逦倪吔?，相同的模塊，并且周圍也沒有與之相類似的元素。

Menagerie Climb:橘色的按鈕是一個(gè)按鈕嗎？答案是否定的。形狀和標(biāo)簽讓這個(gè)元素看起來更像個(gè)按鈕，但實(shí)際上它并不是。

GNC: Shop by Department and Tools & Resources看起來像按鈕而不是目錄標(biāo)題。

符號(hào)和圖標(biāo)

1. 使用圖標(biāo)作為鏈接時(shí)，確保它們可以立即被辨別出來。除非這個(gè)圖標(biāo)已經(jīng)在網(wǎng)頁設(shè)計(jì)中已非常常見，用戶一眼就可以看出。所以，應(yīng)用圖標(biāo)做鏈接時(shí)，應(yīng)該和另外的視覺提示如文本標(biāo)簽結(jié)合起來去提示可點(diǎn)擊。

當(dāng)沒有其他提示時(shí)，一個(gè)箭頭圖標(biāo)可以起到提示的作用。但這只是最簡(jiǎn)單的方法，因?yàn)榧^不是一個(gè)標(biāo)準(zhǔn)的提示，并且對(duì)于有些用戶來說可能會(huì)忽略掉了。如果你決定用這種方法，一定要謹(jǐn)慎地使用你的箭頭， 因?yàn)樗鼈兛赡軙?huì)打破你界面的簡(jiǎn)約風(fēng)格。

CNN:這個(gè)扁平化網(wǎng)頁的箭頭提示了可點(diǎn)擊。如果沒有這些箭頭，用戶將黑框上進(jìn)行點(diǎn)擊。

Trader Joe’s:如預(yù)期的一樣，在通告下面的列表是可點(diǎn)擊的。藍(lán)色的文本是一個(gè)很好的提示。但是圖片下面的列表又如何呢？同樣精美的圖標(biāo)在兩個(gè)列表里都使用了。這就是使用戶困惑的原因。

總結(jié)

鼓勵(lì)網(wǎng)頁放更多的精力去設(shè)計(jì)可點(diǎn)擊的項(xiàng)目，這樣用戶就可以輕易的辨別出來。不用傳統(tǒng)的鏈接設(shè)計(jì)去使人聯(lián)想到可點(diǎn)擊的也是可以的，但是與熟悉的模式相差太遠(yuǎn)也會(huì)產(chǎn)生問題的。

原文：HOA LORANGER

本文為作者 @用戶咨詢機(jī)構(gòu)-BESD設(shè)計(jì)實(shí)驗(yàn)室志愿者 Henson 投稿發(fā)布，轉(zhuǎn)載請(qǐng)注明來源于人人都是產(chǎn)品經(jīng)理并附帶本文鏈接