超連結和按鈕 設計中預設樣式的強大威力

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

預設樣式，就是最原生態的樣式。 就像大家經常用的按鈕或者藍色有底線的超連結。 本文，潛行者m將從兩個元素來討論預設樣式在設計中的應用。

超連結的預設樣式

超連結的預設樣式 超連結是網頁中最常用最基礎的元素，可以說是必不可少的。 我們設置超連結，也是希望人們去點擊，去使用它。 那麼我們拿什麼讓人們知道，這是一個超連結呢?你可以在旁邊說，這裡有個超連結，快來點擊我。 但是，當人們看到這幾個字的時候，是需要思考的，實際情況下，人們是不想思考的。 所以，我們設計的目的，就是讓人們一看上去，就覺得這是一個可以點擊的超連結。 這裡幾個超連結，我分別為他們加上了樣式，請看下圖：

請你告訴我，這裡面究竟哪一個才是可以點擊的超連結?很顯然，第一個超連結是預設樣式，這種藍色底線的樣式，已經深入人心，任何一個經常上網的朋友，看到這個就知道它是一個可以點擊的超連結。 但是有個非常明顯的問題，這種藍色底線的樣式實在是太醜了。 而且和我的設計風格不相似。 那麼，我們就可能會考慮後面三種。

現在，我們的任務就變成了，如何讓後面的這三個超連結，變得讓人以為這是一個可以點擊的超連結。 這時，我們需要結合具體的文境來說。 請看下面這張圖，我已經把上面這三個超連結加入了文章中：

這是比較常見的文章環境，當超連結在文章中時，我們就會發現一些東西。 現在請你告訴我，這四個連結的位置以及究竟哪一個連結可以點擊?很顯然，第一個底線的可以點擊。 然後紅色、藍色連結也可以輕易找到，但是黑色的卻不見了。 因為它的樣式和文章的一樣。

當我們拋開第一個，請你再告訴我，究竟哪個是可以點擊的超連結?很顯然，是紅色後面的藍色超連結，因為藍色是超連結的預設顏色，是標誌性的顏色，所以我們會認為藍色是可以點擊超連結。 如果排除藍色連結，你還會點擊什麼?這時候，你會發現文中突然黑字裡面出現了一個紅色超連結。 這是你的大腦會進行短暫的思考，這個紅色超連結是什麼，為什麼別的都是黑色的，它是紅色的?它是不是有特殊的功能，是不是可以點擊?要不我把滑鼠移動上去，看看吧。

當我們把滑鼠移動上去之後，發現滑鼠變成了小手狀，紅色還變了色，而且還加了底線。 OK，這個就是可以點擊的超連結了。

至於黑色超連結，潛行者m就直接找不到了，碰巧滑鼠移動到什麼，可能會變成小手。 但是一般人是無法注意到了。

通過這個案例，我們可以分析出，超連結應當如何定義：

盡可能的使用預設的藍色，甚至加上底線。 如果與風格不符，請使用與其他文字差別較大的色彩來表示，這是一段與眾不同的文字，它有特殊的含義。

當滑鼠移動上去的時候，請定義：hover，讓其進行變色，並且加上底線，因為這是一個超連結預設的樣式，經過這樣處理之後，能夠讓人深信不疑的認為這是一個超連結。

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

如果你無法比較合理的完成上面三條，請不要使用預設樣式。

按鈕的預設樣式

按鈕也是使用比較廣泛的網頁元素，通常用於表單提交，或者其他需要點擊的地方。 通常有以下三種形式的定義

第一種就是預設情況下的，而第二種只是簡單的個邊框，使其去掉預設樣式平面化，第三中則可以代表使用圖片背景的自訂按鈕。

當你第一眼看到這三個按鈕的時候，很顯然，第一個是最想按鈕，並且可以讓人產生點擊欲望的按鈕。 除了第一個之外的後面兩個呢?這裡需要注意一下，第三個是有一個變色處理的，當滑鼠移動到上面，會變成這樣：

預設的按鈕樣式以及滿足不了我們網站的風格，所以我們目前的任務，就是讓後面兩個按鈕，變得像可以點擊的按鈕。 我們主要來分析一下，為什麼後面兩個按鈕不像前面那個可以點擊的按鈕，有什麼特點和區別。

1，外觀要像一個按鈕，其中第三個要比第二個更像按鈕，因為它是圓角、橢圓形的，它要比直來直去的方框更容易給人以按鈕的感覺。

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

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

3，要有變換特效，及時的和流覽者溝通，告訴他們，這是一個可以點擊的按鈕。

4，如果你的設計，無法很好的完成上面說的三點，請使用預設樣式。

原文：HTTP://www.qianxingzhem.com/post-1230.html