建站常識
關(guān)于文字鏈接與按鈕的分析
2006-09-26 11:13:00
這是一篇關(guān)于文字鏈接與按鈕的分析。這里所說的“文字鏈接”是指那些點擊后能打開一個界面的文字,他們只能打開一個界面,沒有起其它功能?!鞍粹o”是指具有表單提交、下載等功能的可點擊的元素。實際上,這樣的定義本身就是區(qū)分文字鏈接與按鈕的一種觀點。也是window圖形用戶界面的設計標準。而在網(wǎng)頁上,這樣的區(qū)分并不總是合適的。
在網(wǎng)頁的設計中,經(jīng)常會遇到這樣的問題:“這是一個很重要的文字鏈接,我們是不是應該把它做成一個按鈕,這樣會更突出……”
關(guān)于按鈕的問題,我曾經(jīng)寫了一篇《誰是按鈕?它在干嘛?》,先簡單復述一下:目前網(wǎng)頁上普遍的有一些按鈕并不是真正意義上的按鈕,只是一個文字鏈接,我稱他們?yōu)椤皞伟粹o”。偽按鈕不應該使用按鈕的表現(xiàn)形式。
那篇文章里并沒有給出一個更好的方法來表現(xiàn)偽按鈕,現(xiàn)在,我不得不說,或許偽按鈕還是要用按鈕的形式來表現(xiàn)。
偽按鈕需要存在
在現(xiàn)實生活中,電視遙控器上有按鈕,門鈴是按鈕,手機上有按鈕,您面前的電腦鍵盤上也是一大堆按鈕。按鈕清楚的告訴用戶: “這個可以點擊?!闭且驗樗磉_的夠清楚,所以在電腦的圖形用戶界面中也模仿現(xiàn)實的樣子,出現(xiàn)了按鈕。按鈕最本質(zhì)的含義是“可點擊”,而點擊后的效果則是后來被設計師強行賦予的。也就是說,我們完全可以說,按鈕并不意味著將要提交什么表單。這樣說來,將一個很重要的文字鏈接表現(xiàn)為按鈕似乎也沒什么不對的。
一個網(wǎng)頁不能期望著自己的用戶象使用word軟件那樣熟悉自己的網(wǎng)頁,網(wǎng)頁設計面臨的總是比較“新手”的用戶,絕大多數(shù)頁面對于用戶來說都是陌生的,在面對一個陌生的頁面時,一個斗大的按鈕無疑是一盞指路的明燈。
沒有其他的表現(xiàn)方式,偽按鈕還只能是按鈕的樣子
一行帶下劃線的藍色文字也表示可點擊,但是,如果把他們做成按鈕會更突出、更搶眼。
顯然,把這個文字鏈接改成按鈕后,在頁面上會更突出。但是google卻沒有這樣做,實際上,google的網(wǎng)頁上根本沒有偽按鈕,他們不會把一個文字鏈接化妝成按鈕來引導用戶。而這種做法顯然不能滿足大多數(shù)網(wǎng)站的需求。即使是象flickr這樣設計的很精良的網(wǎng)站也需要下圖這樣的偽按鈕:
或許可以把文字鏈接圖形化?但是圖形化后又很容易被誤認為是廣告。
由于找不到一種比按鈕形式更好的表達方式表示“可點擊”,偽按鈕還只能是按鈕的樣子。而偽按鈕的存在違背了圖形用戶界面的設計標準。那么,
嘗試著區(qū)分真、偽按鈕
“設計兩類不同樣式的按鈕”---這似乎是個好辦法。然而,卻并不容易做到。首先,需要設計出兩個樣子不同的圖像,讓用戶知道這些東西是可點擊的,是按鈕。它們應該是有立體感的,上面還要能足夠清楚的顯示文字。
除了看上去像是能點擊的,他們兩個還要表達出文字鏈接與按鈕的區(qū)別:文字鏈接指向另外一個界面,點擊后不會出現(xiàn)什么嚴重的后果,如果您后悔了,那就點擊一下瀏覽器上的“后退”按鈕。而按鈕就比較恐怖了,點擊后,郵件將發(fā)送到對方的郵箱中,文章將被成千上萬的人看到……兩個這么抽象的概念,要想通過兩個方寸大小的圖像表達出來是很困難的,yahoo進行了償試:
在鼠標經(jīng)過“My Yahoo!”的時候,會出現(xiàn)下劃線,與這個頁面上的其他文字鏈接的樣式一樣??瓷先ナ且粋€按鈕,但是不失時機的告訴用戶這個“按鈕”和頁面上的其他文字鏈接有某些相似的地方。而“Web Search”這個真按鈕就沒有類似文字鏈接的表現(xiàn)。設計者用這個下劃線來區(qū)別真按鈕與偽按鈕。
另外一種相似的做法是,按鈕的文字上始終顯示下劃線。雖然具體的形式上有些不同,但是思路是一樣的:讓偽按鈕既有文字鏈接的樣子又有按鈕的樣子。
然而這樣的設計恐怕還不足夠好,多數(shù)用戶首先會看到那是一個按鈕,如果有耐心仔細研究一下,恐怕也只會覺得那是個有點兒奇怪的按鈕,即便確實分辨出了這個“My Yahoo!”與“Web Search”有所不同,又有幾個人能明白這樣的區(qū)別意味著什么呢。
這樣的償試目前為止并不成功。
還有一個辦法!
“不區(qū)分真按鈕與偽按鈕,把他們都做成一樣的按鈕。”這是amazon.com給我們提供的解決辦法。
既然那些重要的文字鏈接需要看上去象個按鈕,我們又很難讓用戶理解一個頁面上有兩種不同性質(zhì)的按鈕。那么,就不要區(qū)分了。給用戶看到的只是文字鏈接和按鈕兩種元素。而點擊按鈕將出現(xiàn)的后果由按鈕上的文字來說明。
這樣做雖然不符合widow圖形用戶界面的設計原則,但是在很大程度上卻是符合用戶使用心理的。我們不可能幻想著用戶在瀏覽一個網(wǎng)頁的時候知道什么叫<form>,用戶也不會去判斷一個按鈕是否會把一些數(shù)據(jù)寫入數(shù)據(jù)庫。用戶面對一個頁面的時候,會被頁面上的按鈕吸引,閱讀上面的文字,確定那個按鈕是自己想要做的事后,就點擊了。那么,不管是“進入結(jié)算流程”還是“登錄到我們的安全服務”只要在點擊前清楚的交代了點擊后的效果就夠了。樣子并非一定要不同,也并非一定要相同。而相同的好處在于減小了用戶的學習成本。不同的網(wǎng)站上的按鈕樣子往往是不一樣的。用戶面對一個頁面的時候先要學習,認清什么樣子的東西是按鈕。如果整個網(wǎng)站上的按鈕全是一個樣子,顯然會更容易學習。(amazon.com上實際有不止一種的按鈕,為的是區(qū)別重要性,與是否提交表單無關(guān)。)
使用這種設計方法,不用再強迫圖形設計師畫出兩種幾乎不可能畫出來的按鈕樣式了,更重要的是,用戶看到的頁面更簡單了。
不區(qū)分真、偽按鈕的做法需要我們花更多的心思判斷哪些文字鏈接是可以被“升級”為按鈕的。因為把文字鏈接“升級”為按鈕意味著他很重要,而一個頁面上不應該有很多重要的內(nèi)容。同時,按鈕上的文字表述也是需要花很大精力的,尤其是對于我們。我相信,在中國多數(shù)的網(wǎng)頁設計師,象我一樣,并不具備很強的文字表達能力。在按鈕上顯然又不可以長篇大論,要用幾個字描述清楚點擊后的效果并不簡單。但是,卻很必要。
需要強調(diào)的是,這整齊劃一的一個按鈕樣式不應該是系統(tǒng)標準按鈕,因為系統(tǒng)按鈕是“真按鈕”的標準造型。想象一下,把“了解更多”弄成一個系統(tǒng)標準按鈕的樣子,絕對會比阿扁現(xiàn)在的言行更可笑。
總結(jié)一下
要解決真、偽按鈕的問題有兩個辦法,方法一.是象google那樣,文字鏈接就是文字鏈接,再重要的文字鏈接最多也就是顯示的稍微大一點兒。這種方法通常不會通過評審的,那么,可以試試第二種方法,不區(qū)分真、偽按鈕,只使用一種按鈕樣式,斟酌適用范圍,確保頁面上重點突出,而不是重點泛濫。推敲文字表述,確保清楚的描述點擊的后果。
我不得不承認,這種辦法是與《誰》一文中相悖的。但是,我仍舊認為,對于目前的大多數(shù)網(wǎng)站,這種不區(qū)分真、偽按鈕的方法是最好的。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2006-07-20 15:41:00] 個人網(wǎng)站站長看過來 網(wǎng)站建設經(jīng)驗之談
- [2007-06-09 15:12:00] 基于"內(nèi)容與形式分離"原則
- [2012-05-23 01:13:14] HTML5的新特性
- [2006-04-15 10:11:00] 個人網(wǎng)站如何轉(zhuǎn)型成商業(yè)網(wǎng)站
- [2009-05-27 08:11:00] 出生日期的選擇設計
- [2005-12-28 13:59:00] 網(wǎng)頁配色之黃金分割法
- [2007-09-13 14:57:00] 科學與藝術(shù)兼顧的有效網(wǎng)頁視覺設計
- [2008-02-14 12:45:00] 網(wǎng)站設計中常犯的錯誤
- [2009-05-21 09:14:00] 電子商務網(wǎng)站的購物流程設計(簡述)
- [2009-11-12 08:31:00] 使用Title提升可訪問性二
- [2010-01-11 08:26:00] SEM基本指導原則:DICA漏斗
- [2007-12-20 11:15:00] 鄰居確實很重要(頁面設計全局觀)
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿(mào)行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關(guān)鍵字
微官網(wǎng) 營銷策略 網(wǎng)站設計資訊 建站常識 SEO 營銷型網(wǎng)站建設 網(wǎng)站開發(fā) css 插畫 青島好的網(wǎng)站優(yōu)化公司 舒適的界面 響應式設計 集團公司網(wǎng)站建設 程序開發(fā) 空白和簡潔的設計 手機網(wǎng)站 高端輪胎網(wǎng)站設計 網(wǎng)站建設,企業(yè)網(wǎng)站建設 如何做網(wǎng)站優(yōu)化 H5定制設計 青島網(wǎng)站營銷 企業(yè)網(wǎng)站設計 青島網(wǎng)站案例 青島網(wǎng)站SEO 青島SEO 青島flash網(wǎng)站 青島網(wǎng)頁設計 企業(yè)網(wǎng)站建設 青島高端網(wǎng)站建設公司哪家好 膠南網(wǎng)站建設公司