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