默認(rèn)樣式,就是最原生態(tài)的樣式。就像大家經(jīng)常用的按鈕或者藍(lán)色有下劃線的超鏈接。本文,潛行者m將從兩個(gè)元素來討論默認(rèn)樣式在設(shè)計(jì)中的應(yīng)用。
超鏈接的默認(rèn)樣式
超鏈接的默認(rèn)樣式 超鏈接是網(wǎng)頁中最常用最基礎(chǔ)的元素,可以說是必不可少的。我們設(shè)置超鏈接,也是希望人們?nèi)c(diǎn)擊,去使用它。那么我們拿什么讓人們知道,這是一個(gè)超鏈接呢?你可以在旁邊說,這里有個(gè)超鏈接,快來點(diǎn)擊我。但是,當(dāng)人們看到這幾個(gè)字的時(shí)候,是需要思考的,實(shí)際情況下,人們是不想思考的。所以,我們設(shè)計(jì)的目的,就是讓人們一看上去,就覺得這是一個(gè)可以點(diǎn)擊的超鏈接。這里幾個(gè)超鏈接,我分別為他們加上了樣式,請看下圖:
請你告訴我,這里面究竟哪一個(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)格不相似。那么,我們就可能會考慮后面三種。
現(xiàn)在,我們的任務(wù)就變成了,如何讓后面的這三個(gè)超鏈接,變得讓人以為這是一個(gè)可以點(diǎn)擊的超鏈接。這時(shí),我們需要結(jié)合具體的文境來說。請看下面這張圖,我已經(jīng)把上面這三個(gè)超鏈接加入了文章中:
這是比較常見的文章環(huán)境,當(dāng)超鏈接在文章中時(shí),我們就會發(fā)現(xiàn)一些東西?,F(xiàn)在請你告訴我,這四個(gè)鏈接的位置以及究竟哪一個(gè)鏈接可以點(diǎn)擊?很顯然,第一個(gè)下劃線的可以點(diǎn)擊。然后紅色、藍(lán)色鏈接也可以輕易找到,但是黑色的卻不見了。因?yàn)樗臉邮胶臀恼碌囊粯印?/p>
當(dāng)我們拋開第一個(gè),請你再告訴我,究竟哪個(gè)是可以點(diǎn)擊的超鏈接?很顯然,是紅色后面的藍(lán)色超鏈接,因?yàn)樗{(lán)色是超鏈接的默認(rèn)顏色,是標(biāo)志性的顏色,所以我們會認(rèn)為藍(lán)色是可以點(diǎn)擊超鏈接。如果排除藍(lán)色鏈接,你還會點(diǎn)擊什么?這時(shí)候,你會發(fā)現(xiàn)文中突然黑字里面出現(xiàn)了一個(gè)紅色超鏈接。這是你的大腦會進(jìn)行短暫的思考,這個(gè)紅色超鏈接是什么,為什么別的都是黑色的,它是紅色的?它是不是有特殊的功能,是不是可以點(diǎn)擊?要不我把鼠標(biāo)移動上去,看看吧。
當(dāng)我們把鼠標(biāo)移動上去之后,發(fā)現(xiàn)鼠標(biāo)變成了小手狀,紅色還變了色,而且還加了下劃線。OK,這個(gè)就是可以點(diǎn)擊的超鏈接了。
至于黑色超鏈接,潛行者m就直接找不到了,碰巧鼠標(biāo)移動到什么,可能會變成小手。但是一般人是無法注意到了。
通過這個(gè)案例,我們可以分析出,超鏈接應(yīng)當(dāng)如何定義:
盡可能的使用默認(rèn)的藍(lán)色,甚至加上下劃線。如果與風(fēng)格不符,請使用與其他文字差別較大的色彩來表示,這是一段與眾不同的文字,它有特殊的含義。
當(dāng)鼠標(biāo)移動上去的時(shí)候,請定義:hover,讓其進(jìn)行變色,并且加上下劃線,因?yàn)檫@是一個(gè)超鏈接默認(rèn)的樣式,經(jīng)過這樣處理之后,能夠讓人深信不疑的認(rèn)為這是一個(gè)超鏈接。
如果你無法合理的配色或者你的作品無法使用多種色彩,請嘗試讓字體變大或者變小或者傾斜,讓超鏈接變得與眾不同,這樣就會讓人產(chǎn)生疑問。
如果你無法比較合理的完成上面三條,請不要使用默認(rèn)樣式。
按鈕的默認(rèn)樣式
按鈕也是使用比較廣泛的網(wǎng)頁元素,通常用于表單提交,或者其他需要點(diǎn)擊的地方。通常有以下三種形式的定義
第一種就是默認(rèn)情況下的,而第二種只是簡單的個(gè)邊框,使其去掉默認(rèn)樣式平面化,第三中則可以代表使用圖片背景的自定義按鈕。
當(dāng)你第一眼看到這三個(gè)按鈕的時(shí)候,很顯然,第一個(gè)是最想按鈕,并且可以讓人產(chǎn)生點(diǎn)擊欲望的按鈕。除了第一個(gè)之外的后面兩個(gè)呢?這里需要注意一下,第三個(gè)是有一個(gè)變色處理的,當(dāng)鼠標(biāo)移動到上面,會變成這樣:
默認(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),請使用默認(rèn)樣式。
原文:
申請創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!