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

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

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

        原文:

申請(qǐng)創(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)站特定欄目,下單購買,幾乎都是一鍵式操作,非常簡(jiǎn)單。

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

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

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

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

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

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

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

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

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

熱門排行

信息推薦