當(dāng)前位置:首頁 >  站長 >  搜索優(yōu)化 >  正文

超鏈接和按鈕 設(shè)計(jì)中默認(rèn)樣式的強(qiáng)大威力

 2013-02-20 16:55  來源: 潛行者M(jìn)   我來投稿 撤稿糾錯

  域名預(yù)訂/競價(jià),好“米”不錯過

默認(rèn)樣式,就是最原生態(tài)的樣式。就像大家經(jīng)常用的按鈕或者藍(lán)色有下劃線的超鏈接。本文,潛行者m將從兩個元素來討論默認(rèn)樣式在設(shè)計(jì)中的應(yīng)用。

超鏈接的默認(rèn)樣式

超鏈接的默認(rèn)樣式 超鏈接是網(wǎng)頁中最常用最基礎(chǔ)的元素,可以說是必不可少的。我們設(shè)置超鏈接,也是希望人們?nèi)c(diǎn)擊,去使用它。那么我們拿什么讓人們知道,這是一個超鏈接呢?你可以在旁邊說,這里有個超鏈接,快來點(diǎn)擊我。但是,當(dāng)人們看到這幾個字的時候,是需要思考的,實(shí)際情況下,人們是不想思考的。所以,我們設(shè)計(jì)的目的,就是讓人們一看上去,就覺得這是一個可以點(diǎn)擊的超鏈接。這里幾個超鏈接,我分別為他們加上了樣式,請看下圖:

 

請你告訴我,這里面究竟哪一個才是可以點(diǎn)擊的超鏈接?很顯然,第一個超鏈接是默認(rèn)樣式,這種藍(lán)色下劃線的樣式,已經(jīng)深入人心,任何一個經(jīng)常上網(wǎng)的朋友,看到這個就知道它是一個可以點(diǎn)擊的超鏈接。但是有個非常明顯的問題,這種藍(lán)色下劃線的樣式實(shí)在是太丑了。而且和我的設(shè)計(jì)風(fēng)格不相似。那么,我們就可能會考慮后面三種。

現(xiàn)在,我們的任務(wù)就變成了,如何讓后面的這三個超鏈接,變得讓人以為這是一個可以點(diǎn)擊的超鏈接。這時,我們需要結(jié)合具體的文境來說。請看下面這張圖,我已經(jīng)把上面這三個超鏈接加入了文章中:

 

這是比較常見的文章環(huán)境,當(dāng)超鏈接在文章中時,我們就會發(fā)現(xiàn)一些東西?,F(xiàn)在請你告訴我,這四個鏈接的位置以及究竟哪一個鏈接可以點(diǎn)擊?很顯然,第一個下劃線的可以點(diǎn)擊。然后紅色、藍(lán)色鏈接也可以輕易找到,但是黑色的卻不見了。因?yàn)樗臉邮胶臀恼碌囊粯印?/p>

當(dāng)我們拋開第一個,請你再告訴我,究竟哪個是可以點(diǎn)擊的超鏈接?很顯然,是紅色后面的藍(lán)色超鏈接,因?yàn)樗{(lán)色是超鏈接的默認(rèn)顏色,是標(biāo)志性的顏色,所以我們會認(rèn)為藍(lán)色是可以點(diǎn)擊超鏈接。如果排除藍(lán)色鏈接,你還會點(diǎn)擊什么?這時候,你會發(fā)現(xiàn)文中突然黑字里面出現(xiàn)了一個紅色超鏈接。這是你的大腦會進(jìn)行短暫的思考,這個紅色超鏈接是什么,為什么別的都是黑色的,它是紅色的?它是不是有特殊的功能,是不是可以點(diǎn)擊?要不我把鼠標(biāo)移動上去,看看吧。

當(dāng)我們把鼠標(biāo)移動上去之后,發(fā)現(xiàn)鼠標(biāo)變成了小手狀,紅色還變了色,而且還加了下劃線。OK,這個就是可以點(diǎn)擊的超鏈接了。

至于黑色超鏈接,潛行者m就直接找不到了,碰巧鼠標(biāo)移動到什么,可能會變成小手。但是一般人是無法注意到了。

通過這個案例,我們可以分析出,超鏈接應(yīng)當(dāng)如何定義:

盡可能的使用默認(rèn)的藍(lán)色,甚至加上下劃線。如果與風(fēng)格不符,請使用與其他文字差別較大的色彩來表示,這是一段與眾不同的文字,它有特殊的含義。

當(dāng)鼠標(biāo)移動上去的時候,請定義:hover,讓其進(jìn)行變色,并且加上下劃線,因?yàn)檫@是一個超鏈接默認(rèn)的樣式,經(jīng)過這樣處理之后,能夠讓人深信不疑的認(rèn)為這是一個超鏈接。

如果你無法合理的配色或者你的作品無法使用多種色彩,請嘗試讓字體變大或者變小或者傾斜,讓超鏈接變得與眾不同,這樣就會讓人產(chǎn)生疑問。

如果你無法比較合理的完成上面三條,請不要使用默認(rèn)樣式。

按鈕的默認(rèn)樣式

按鈕也是使用比較廣泛的網(wǎng)頁元素,通常用于表單提交,或者其他需要點(diǎn)擊的地方。通常有以下三種形式的定義

 

第一種就是默認(rèn)情況下的,而第二種只是簡單的個邊框,使其去掉默認(rèn)樣式平面化,第三中則可以代表使用圖片背景的自定義按鈕。

當(dāng)你第一眼看到這三個按鈕的時候,很顯然,第一個是最想按鈕,并且可以讓人產(chǎn)生點(diǎn)擊欲望的按鈕。除了第一個之外的后面兩個呢?這里需要注意一下,第三個是有一個變色處理的,當(dāng)鼠標(biāo)移動到上面,會變成這樣:

 

默認(rèn)的按鈕樣式以及滿足不了我們網(wǎng)站的風(fēng)格,所以我們目前的任務(wù),就是讓后面兩個按鈕,變得像可以點(diǎn)擊的按鈕。我們主要來分析一下,為什么后面兩個按鈕不像前面那個可以點(diǎn)擊的按鈕,有什么特點(diǎn)和區(qū)別。

1,外觀要像一個按鈕,其中第三個要比第二個更像按鈕,因?yàn)樗菆A角、橢圓形的,它要比直來直去的方框更容易給人以按鈕的感覺。

2,要有3d突出感,按鈕是一個突出的東西,給人一種3d突出的感覺更讓人容易相信這是一個可以點(diǎn)擊的按鈕,例如淘寶購買按鈕

 

可以通過添加陰影或者漸變等,制造這種突出的效果。

3,要有變換特效,及時的和瀏覽者溝通,告訴他們,這是一個可以點(diǎn)擊的按鈕。

4,如果你的設(shè)計(jì),無法很好的完成上面說的三點(diǎn),請使用默認(rèn)樣式。

        原文:

申請創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

  • 郵件營銷提高轉(zhuǎn)化率的訣竅和按鈕設(shè)計(jì)

    當(dāng)群發(fā)郵件發(fā)送過去后,公司為促成轉(zhuǎn)化,在郵件中:1、營造緊迫感:公司推出的系列產(chǎn)品讓利于消費(fèi)者,比方說8.3、在產(chǎn)品介紹完后便附上下單鏈接:在某產(chǎn)品圖文并茂的介紹后面,迅速附上下單的鏈接,消費(fèi)者只需輕輕點(diǎn)擊一下,便可進(jìn)去網(wǎng)站特定欄目,下單購買,幾乎都是一鍵式操作,非常簡單。

  • CTA實(shí)例教學(xué):怎樣設(shè)計(jì)一個訪客看了就想點(diǎn)的行為引導(dǎo)按鈕?

    CTA即CalltoAction,又叫行為引導(dǎo)按鈕,是一個網(wǎng)站的核心組成元素之一。大部分站長做網(wǎng)站不僅僅是為了給訪客提供一個學(xué)習(xí)、交流、互動的平臺,更重要的是將訪客轉(zhuǎn)化為用戶,達(dá)成某項(xiàng)他們想要的行為,比如注冊、登錄、訂閱、預(yù)約、購買等。好的行為引導(dǎo)按鈕在這一點(diǎn)上很有幫助,它有助于提高用戶的轉(zhuǎn)化率,增

    標(biāo)簽:
    按鈕設(shè)計(jì)
  • 淺析在網(wǎng)頁設(shè)計(jì)中如何讓按鈕激發(fā)用戶點(diǎn)擊欲望

    現(xiàn)在建設(shè)網(wǎng)站一個重要的核心要素就是能夠?qū)τ脩舢a(chǎn)生良好的吸引力,能夠引導(dǎo)用戶逐層深入的點(diǎn)擊網(wǎng)站,這樣才能夠有效提升用戶在網(wǎng)站上的停留時間,這樣就能夠有效的為網(wǎng)站培養(yǎng)忠誠用戶打下堅(jiān)實(shí)基礎(chǔ)。對此很多站長開始在網(wǎng)頁設(shè)計(jì)上下功夫,可是有時候?qū)τ谝恍┘?xì)節(jié)掌握不當(dāng),或者忽略了一些細(xì)節(jié),導(dǎo)致網(wǎng)站的吸引力出現(xiàn)了明顯的

  • 移動應(yīng)用設(shè)計(jì):談導(dǎo)航欄返回按鈕的替代方案

    呼,又要夜間上新了。其實(shí)自己偶爾還會進(jìn)去關(guān)于BeForWeb里面看看將近兩年前寫的博客開篇語。當(dāng)時的動力現(xiàn)在仍在,當(dāng)時愛的那個世界現(xiàn)在仍在愛,并且越來越讓我覺得自豪;這讓我開心了些。周六晚上有在喝冰啤酒的兄弟姐妹嗎,有的話我們虛擬碰個杯吧先,周末愉快=)前

  • 網(wǎng)站交互設(shè)計(jì):非一般的“取消”按鈕

    取消這個按鈕不屬于操作的必要流程,在設(shè)計(jì)上也不作為主要元素出現(xiàn)。但在實(shí)際的彈框或一些操作應(yīng)用中經(jīng)常出現(xiàn),那么這個小小的取消按鈕又有哪些玄機(jī)呢?首先我們要先來了解一下取消的概念。取消:我們在提交問題、選擇、進(jìn)度、信息時需要要求執(zhí)行一個確認(rèn)動作,這時候

    標(biāo)簽:
    按鈕設(shè)計(jì)

熱門排行

信息推薦