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

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

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

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

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

按鈕和超鏈接可是完全不一樣的兩個(gè)雙胞胎兄弟呢！

原文地址：dclick.fourdesire.com

========關(guān)于優(yōu)設(shè)網(wǎng)========
“優(yōu)設(shè)網(wǎng)uisdc.com”是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。

特色推薦：
設(shè)計(jì)講座：定期邀請國內(nèi)互聯(lián)網(wǎng)公司的設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：我們擁有粉絲量25萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎大家關(guān)注及時(shí)獲取設(shè)計(jì)資源。
設(shè)計(jì)導(dǎo)航：史上最贊最全面的設(shè)計(jì)師網(wǎng)址導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的“福利”嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您還可以掃描下方二維碼快速添加：