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