深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

2 評(píng)論 3565 瀏覽 2 收藏 30 分鐘

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

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

交互設(shè)計(jì)師經(jīng)常運(yùn)用啟示性。?他們必須這么做。物理客體基于他們的形狀、大小、重量等屬性而提供啟示性。不像物理客體,網(wǎng)頁(yè)或者手機(jī)交互必須通過(guò)設(shè)計(jì)來(lái)獲得所有的啟示。對(duì)于大部分設(shè)計(jì)師而言,這是出于我們每天能看見(jiàn)的成千上萬(wàn)的設(shè)計(jì)模式而得到的直覺(jué)。但是你是否有考慮到了一個(gè)對(duì)象能夠被點(diǎn)擊、滑動(dòng)、推動(dòng)、拉伸時(shí)的質(zhì)感?

通過(guò)深度理解啟示的工作方式,你就能更好得掌握交互和產(chǎn)品設(shè)計(jì)。你能夠把啟示性作為一個(gè)工具使你的設(shè)計(jì)更容易被使用,鼓勵(lì)用戶執(zhí)行你想要他們進(jìn)行的操作,比如注冊(cè)一個(gè)產(chǎn)品,生成內(nèi)容或者和其他用戶聯(lián)系。更好的啟示性對(duì)轉(zhuǎn)化率、注冊(cè)率以及那些對(duì)你設(shè)計(jì)的網(wǎng)站、應(yīng)用、產(chǎn)品重要的用戶操作具有顯著的影響。這也就是為什么說(shuō)啟示性在網(wǎng)頁(yè)設(shè)計(jì)中最被低估了。

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

盡管看起來(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)模式和外顯啟示,就能考查交互功能。

不是所有的啟示都是同等的,其中一些啟示會(huì)強(qiáng)于另一些啟示。?理解在交互設(shè)計(jì)中能用到的啟示類型是很重要的?。啟示一般被分為以下幾個(gè)類型:外顯的,模式化的,隱喻的,內(nèi)隱的,假的,以及否定的。下面我們?cè)敿?xì)介紹每種類型的啟示。

外顯的啟示

外顯啟示通過(guò)文字或者客體的物理表征等信號(hào)來(lái)表現(xiàn)。寫著“點(diǎn)擊此處”的文字明顯得提示你去點(diǎn)擊。從周圍表面中凸出的按鈕看起來(lái)可觸摸,它提示你可以向下壓。上面寫著“推”的門柄提示你推門。寫著“請(qǐng)輸入評(píng)論”的輸入框明顯提示你去執(zhí)行評(píng)論這種操作。這些啟示是外顯的,因?yàn)槿魏稳硕寄懿聹y(cè)如何和這些元素進(jìn)行交互,盡管他們之前從未接觸過(guò)這類交互。這些啟示不依賴認(rèn)知模式。

20946 0a16e0abed827a6e 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?PayPal的界面元素是外顯啟示的一個(gè)很好的例子。外觀凸出的按鈕提示向下按動(dòng),而文本信息則明顯提示操作的結(jié)果。

20946 5189c1f2de262460 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?Copyblogger’s網(wǎng)站中的視頻采用的外顯啟示方式:文本提示點(diǎn)擊播放視頻。

外顯啟示在以下情況中特別重要:

– 1 .?當(dāng)交互使用者過(guò)去不太可能接觸到很多啟示模式。

這種情況經(jīng)常發(fā)生在那些沒(méi)有技術(shù)悟性或者平時(shí)不經(jīng)常使用網(wǎng)頁(yè)或手機(jī)交互的用戶身上。這些用戶很少能通過(guò)設(shè)計(jì)模式認(rèn)識(shí)到啟示。這同樣適用于那些獨(dú)特的、創(chuàng)新的交互。第一款手機(jī)應(yīng)用在諸如敲擊、滑動(dòng)等操作上大量使用了外顯啟示。

– 2 .??還未明確樹立特定的模式來(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)下拉菜單。

模式化隱喻是可以傳達(dá)某些特定啟示的一種既定的隱喻。?舉例來(lái)說(shuō),電子郵箱通常以信封圖標(biāo)來(lái)表現(xiàn)(盡管發(fā)送電子郵箱從未涉及到物理信箱。)這種隱喻很有效,因?yàn)樗呀?jīng)是一個(gè)既定的模式。我們將在隱喻啟示中再進(jìn)行詳細(xì)的討論。

模式隱喻是優(yōu)雅的,因?yàn)樗梢栽谝粋€(gè)復(fù)雜的界面向用戶快速傳達(dá)很多啟示。當(dāng)我們和大量的網(wǎng)站和應(yīng)用進(jìn)行交互時(shí),我們會(huì)變得更擅長(zhǎng)快速分析在屏幕上的這些五花八門的啟示。

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

元素 啟示類型 提供的功能
導(dǎo)航欄 模式 瀏覽網(wǎng)頁(yè)
鏈接 模式 點(diǎn)擊
Logo 模式 返回主頁(yè)
右上角的鏈接 模式 管理賬戶
“分類”下拉 模式 訪問(wèn)更多選項(xiàng)
放大鏡 模式隱喻 搜索
內(nèi)容模塊 模式 點(diǎn)擊模塊

20946 1f5dd38aa68ec95a 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?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)擊和敲擊,你能理解界面啟示你去做的一些操作嗎?

模式提供了很多美妙的快捷方式去方便地傳達(dá)一些操作啟示。?需要牢記它的前提是:用戶已經(jīng)花費(fèi)了大量時(shí)間和網(wǎng)站、應(yīng)用以及其他界面進(jìn)行交互。當(dāng)你是為一些技術(shù)嫻熟的用戶設(shè)計(jì)產(chǎn)品時(shí),模式啟示可以構(gòu)成你大部分的設(shè)計(jì)。當(dāng)用戶沒(méi)有豐富的界面交互的經(jīng)驗(yàn)時(shí)(比如,小孩子,老人以及一些很少能接觸到網(wǎng)絡(luò)的人),你就不能太依賴于模式啟示。

內(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)。

20946 138c96edaa108ad0 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

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

20946 42debed4f5aa2a91 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

一旦你將鼠標(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)用隱藏啟示是好的。

內(nèi)隱啟示的風(fēng)險(xiǎn)在于用戶可能不能直觀地發(fā)現(xiàn)啟示性。

最后,不要在重要的操作上使用內(nèi)隱啟示。相反的,你可以通過(guò)把一些不太重要的操作溶入背景的方式來(lái)減少重要核心操作周圍的混雜感。

當(dāng)你考慮要不要使用內(nèi)隱啟示時(shí),你問(wèn)問(wèn)自己,若用戶不知道這個(gè)操作時(shí)是否還能愉快地使用產(chǎn)品?如果答案是“是”,那么對(duì)這個(gè)操作來(lái)說(shuō)內(nèi)隱啟示是合適的。

Clear,一個(gè)待辦事項(xiàng)應(yīng)用,在設(shè)計(jì)上很大程度得依賴于內(nèi)隱啟示。然而它的設(shè)計(jì)受到了很多贊美。

20946 9e479d7ae62904d9 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

它漂亮嗎?是的。然而,它的設(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)閉列表。

這些內(nèi)隱啟示并不代表Clear的用戶體驗(yàn)很差。一旦你第一次打開(kāi)這個(gè)應(yīng)用,你就能看見(jiàn)該應(yīng)用的一些功能的滾動(dòng)教程。如果你忘記了教程中的功能說(shuō)明,這些待辦事項(xiàng)看起來(lái)就像物理上可嘗試修改的面板,你就會(huì)明白待辦事項(xiàng)app可以允許增加事項(xiàng)、刪除事項(xiàng)或者標(biāo)記為完成。這個(gè)面板看起來(lái)就像能被操作。通過(guò)堅(jiān)持完成最初的學(xué)習(xí)曲線,作為回報(bào),用戶就能夠舒服得使用該應(yīng)用,并且交互界面顯得簡(jiǎn)潔而最少化。

但是,內(nèi)嵌于Clear的設(shè)計(jì)哲學(xué)并不適用于所有的界面。學(xué)習(xí)曲線越陡峭(用戶越需要學(xué)習(xí)),用戶放棄的比率就會(huì)越高。Clear需要花錢購(gòu)買,以至于用戶有理由花費(fèi)時(shí)間去學(xué)習(xí)交互界面。想象一下另一種狀況: 當(dāng)用戶登錄到你的產(chǎn)品界面,用戶又沒(méi)有理由花費(fèi)時(shí)間去尋找內(nèi)隱啟示。事實(shí)上,當(dāng)可用的操作沒(méi)有立馬顯示出來(lái)時(shí),用戶很可能會(huì)離開(kāi)界面去其他地方。

內(nèi)隱啟示只適用于用戶認(rèn)同學(xué)習(xí)的情況下。為了快速引導(dǎo)用戶執(zhí)行你想要他們?nèi)?zhí)行的操作,用戶認(rèn)同學(xué)習(xí)的程度越小,產(chǎ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)啟示著建立鏈接。

20946 de7d0abfd06a99cb 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

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

在復(fù)雜任務(wù)中,相較于通過(guò)使用外顯的啟示方式,通過(guò)使用從現(xiàn)實(shí)世界物體中提取出來(lái)的隱喻,我們能更快得傳達(dá)啟示信息。舉例來(lái)說(shuō),如果你必須在界面中加入一個(gè)能讓用戶打電話的按鈕,但是你不能使用電話圖標(biāo)也不能使用文本—“打電話”,你該怎樣傳達(dá)這種功能啟示呢?

因?yàn)槭褂矛F(xiàn)實(shí)事物隱喻的啟示方式很有強(qiáng)有力,選擇一個(gè)最好的隱喻就很重要。思考下面這個(gè)iPhone應(yīng)用Ness:

20946 67df541c7741acda 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

手機(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á)這些隱喻。

還有,在改變某些既定的模式隱喻之前需要仔細(xì)地考量??聪旅鎀umblr中所見(jiàn)即所得的編輯器。你能鑒別出創(chuàng)建鏈接和刪除鏈接的圖標(biāo)嗎?

20946 9de9e2a595045ea3 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

鏈接的既定模式隱喻是兩個(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ā)送短信。
20946 b63f635bbbda3fbd 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?
在??Icon Finder??上一個(gè)綠色的“刪除”或者“關(guān)閉”按鈕。

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

20946 a6a5d025e0d0edb3 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

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

在上面這個(gè)Dribbble界面元素中,你會(huì)驚訝地發(fā)現(xiàn),除了瀏覽數(shù)量,每個(gè)元素都可以點(diǎn)擊執(zhí)行某個(gè)交互動(dòng)作。它們是灰色的,背景也為灰色,沒(méi)有下劃線,沒(méi)有加粗。它們虛假得表現(xiàn)出啟示性的缺失,而實(shí)際上它們蘊(yùn)含著豐富的功能(觀看哪些人喜歡了這個(gè)條目,這個(gè)條目被放置在什么名稱的標(biāo)注下,下載配色方案)

盡管這些界面元素設(shè)計(jì)的微妙性使設(shè)計(jì)中的其他部分獲得更多注意力,設(shè)計(jì)師必須考慮這種平衡是否值得。例如,如果分享鏈接被加粗,更清楚地啟示著點(diǎn)擊,是否Dribbble上的條目就能更常被分享?

一個(gè)簡(jiǎn)單的原則:如果你真的想人們執(zhí)行某個(gè)功能,那么增加跟多啟示性的標(biāo)志。

否定的啟示

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

20946 f08abcf3fcd113b4 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

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

20946 5828184eb5d3e872 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

在這個(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)擊。

20946 61c53443252af45d 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

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

20946 02c14d802c5d8a14 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

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

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

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

  • 外顯的
  • 模式的
  • 隱喻的
  • 內(nèi)隱的
  • 假的
  • 否定的

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

20946 aad29cd939c7007f 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

外顯啟示性

應(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è)模式啟示,它們均位于屏幕底部。

20946 6a9d0b5899fd5191 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

屏幕底部的一行白點(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ù)。

20946 0813b2b0da6f809a 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

假的啟示性

在假的啟示性方面,這款應(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é)

類型 優(yōu)點(diǎn) 缺點(diǎn) 使用情況
外顯 清楚,明白,用戶不會(huì)遺漏啟示性 界面雜亂,對(duì)某些用戶來(lái)說(shuō)是對(duì)他們能力的低估 面向低科技用戶;需要說(shuō)明一些非直覺(jué)的啟示
模式 快速而清晰地傳達(dá)啟示 依賴于相似界面的先前經(jīng)驗(yàn) 已經(jīng)形成了一種穩(wěn)固的既定模式;用戶是技術(shù)嫻熟的
內(nèi)隱 干凈的界面 可能不能發(fā)現(xiàn)功能 不太重要的功能;用戶對(duì)學(xué)習(xí)(嘗試)應(yīng)用具有足夠的認(rèn)同
隱喻 傳達(dá)復(fù)雜啟示性最簡(jiǎn)單的方式 對(duì)不同人來(lái)說(shuō)同一隱喻代表不同事情 沒(méi)有隱喻時(shí)解釋啟示性變得太復(fù)雜
假的 無(wú) 表明沒(méi)有啟示性浪費(fèi)用戶時(shí)間 避免假的啟示性
否定的 通過(guò)表明元素沒(méi)有啟示性避免用戶交互過(guò)程中的挫折 如果一個(gè)元素沒(méi)有啟示性,哪些它可能是不必要的 當(dāng)輔助信息或元素是必須的,但是不提供功能

結(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)作按鈕。

20946 d515a3fc33c4b5a9 深層次理論!網(wǎng)頁(yè)設(shè)計(jì)中的啟示性,你看懂了嗎?

原文作者:?Natasha Postolovski

Source:??Smashing Magazine

譯者:gyro;譯文地址:http://jianshu.io/p/3a350049df3a

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!