你知道按鈕和超鏈接的區(qū)別么

2 評(píng)論 5278 瀏覽 1 收藏 4 分鐘

對(duì)于許多網(wǎng)頁(yè)設(shè)計(jì)師或工程師而言,按鈕和超鏈接有著極為相似的程序代碼,基本上他們也是出生自相同的歷史來(lái)源。但是他們?cè)谟脩艚涌谂c行為上其實(shí)有著非常不同的發(fā)展。按鈕代表著動(dòng)作,而超鏈接則代表著導(dǎo)覽。

隨著因特網(wǎng)的發(fā)展越來(lái)越多元化,從傳統(tǒng)的網(wǎng)頁(yè)快速的發(fā)展到如同本機(jī)軟件(Native Application)般的網(wǎng)絡(luò)服務(wù),有著許多承襲自傳統(tǒng)的用戶接口:藍(lán)色的超鏈接就是其中一個(gè)重要的元素(應(yīng)該許多人已經(jīng)忘記這個(gè)藍(lán)色的超鏈接有個(gè)互動(dòng)方式,就是會(huì)在造訪過(guò)后變成紫色)。
超鏈接是一個(gè)從網(wǎng)絡(luò)開(kāi)始發(fā)跡的用戶接口組件,然后逐步發(fā)展到如 Windows Word 的說(shuō)明文件這種本機(jī)軟件上。超鏈接提供一個(gè)顯而易見(jiàn)的互動(dòng)功能:導(dǎo)覽。他容許使用者在眾多的文件之間來(lái)回穿梭,在文件中看到重要的關(guān)鍵詞,就可以點(diǎn)選這個(gè)關(guān)鍵詞來(lái)更進(jìn)一步了解他的內(nèi)容。這種交互參照的功能,就像是文件之間的任意門般,讓使用者可以遨游在網(wǎng)頁(yè)或是文件之間,幾乎不會(huì)有什么負(fù)擔(dān)。

接著許許多多的網(wǎng)絡(luò)服務(wù)出現(xiàn)了,超鏈接透過(guò)圖片或是 CSS 技術(shù)以按鈕的形式出現(xiàn)在網(wǎng)絡(luò)上,來(lái)提示用戶這個(gè)超鏈接是提供一個(gè)如同動(dòng)作的行為,如購(gòu)買商品、邀請(qǐng)好友或響應(yīng)留言等功能。按鈕本身就附帶著一種動(dòng)作的隱喻,讓使用者感覺(jué)到他「按下去」了,并期待系統(tǒng)產(chǎn)生什么響應(yīng),進(jìn)而進(jìn)行下一步的操作。

讓動(dòng)作用按鈕呈現(xiàn)導(dǎo)覽則用超鏈接表示。例如,在設(shè)計(jì)一個(gè)購(gòu)物網(wǎng)站的時(shí)候,超鏈接可以用來(lái)導(dǎo)覽商品間的相互關(guān)系,讓使用者一個(gè)接著一個(gè)的瀏覽你的商品。按鈕可以讓用戶把你的商品放入購(gòu)物車,接著付款結(jié)賬。用動(dòng)詞來(lái)當(dāng)做按鈕的開(kāi)頭,會(huì)更強(qiáng)化按鈕的動(dòng)作暗示。這兩者之間的用戶行為模式有著極大的不同,盡可能的讓你的接口符合這項(xiàng)原則,可以大幅的減輕用戶在應(yīng)用程序中的使用負(fù)擔(dān)。

考慮看看 Amazon.com 的購(gòu)物組合推薦,「全部加入購(gòu)物車(Add all three to Cart)」這種行動(dòng)使用按鈕表示,「顯示運(yùn)送細(xì)節(jié)(Show availability and shipping details)」和商品名稱則使用超鏈接來(lái)導(dǎo)覽。清清楚楚的分開(kāi)了動(dòng)作和導(dǎo)覽的行為,讓消費(fèi)動(dòng)作輕巧又優(yōu)雅

來(lái)源:uisdc

更多精彩內(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ā)揮!