網頁設計中的按鈕和超級鏈接設計概要

超級鏈接是網頁設計與平面設計的最大區別，因為超級鏈接的存在才能把多個獨立的頁面聯系起來形成網站。而超級鏈接的表現形式包括：文字形式、按鈕形式、圖片形式等，其設計要點就囊括了文字和按鈕以及圖片的設計要點，變化最為豐富。

按鈕似乎與鏈接差不多，都是完成一個頁面的跳轉。其實不然，按鈕與鏈接還是有一定的區別。

按鈕：按鈕代表著“做某件事”，即點擊了按鈕代表著操作了一個功能，做的這件事是有后果的，不易挽回的。例如典型的google，QQ郵箱。像信息搜索、回復、注冊，他們的共同點是：都是在“做”一件事，并且絕大多數都是對表單的提交。從技術上講，這類按鈕的作用是向后臺提交了數據，“命令”服務器去做了一件事。

超級鏈接：鏈接的作用是:“帶你去另一個頁面”，你無論點幾次鏈接，都是在“看”，而并沒有“做”任何事。典型的鏈接是文字標題，點擊了去看詳情。

然而，事實上在一些需要被強化的地方，一些需要引導用戶點擊的地方，僅用鏈接很難在視覺上突出表現。典型案例：各游戲引導頁里的“進入官網”，嚴格來講，它的作用也只是讓觀者順利跳轉到另一個頁面，是屬于鏈接，但這個往往是我們特別強調的“按鈕”。

形狀

理論上來說，按鈕的形狀可以是任意的。但在實際應用中卻只有矩形和圓角矩形最為普及。究其原因，網頁是網格式的一個介質，圓形或其他形狀不一定能融洽其中。當然，這只是一般的選擇，你自然可以有自己的個性。

背景

按鈕的背景可以任意的變化，但也有其原則：

1、不能影響內容的呈現，也就是不能讓按鈕需要表達的內容卡不清楚。

2、一般需要在整個頁面設計中凸顯出來。

常見的有純色、漸變、圖片、內發光、外發光、投影等等方式。根據整體風格的需求，也可能需要在質感上面的表現，如金屬、石頭、玻璃、木頭、塑膠等等。

文字

按鈕上的文字，字體還是建議使用標準字體，常見設計點有字號、樣式、字間距等等。

裝飾

最常見的一種就是圖標的結合，需要注意的是，圖標需要與整個設計風格一致。

圖標使用建議參考http://www.iconfont.cn/

填充

內部內容距離按鈕邊框之間的距離。也就是需要給它內部內容一定的呼吸的空間。

邊框

邊框的顏色、粗細、樣式。

邊距

指的是按鈕本身距離周圍元素之間的距離。也就是它不能和網頁中的其他元素擠在一起。

尺寸

一般情況下，寬度在60-180px之間，高度在40-60px之間。但是，如果它是你最重要的按鈕并且你希望更多的用戶點擊它，那么讓它更醒目些也沒有壞處。把這個按鈕設計的比其他按鈕更大些并讓用戶在更多的地方找到并點擊它。

交互

也就是鼠標經過的時候你需要給用戶一點點反應，讓他能夠明白：點我吧！點我吧！點我還有好玩的……

超級鏈接必需有鼠標經過效果的表現，按鈕一般也需要的。圖就不自己做了，太費勁也沒什么意思……

主要的表現方式有：

• 前景的變化，也就是文字的變化，如顏色、粗細、大小等等。
• 背景的變化，如讓背景暗一點或者亮一點。
• 邊框的變化，初時沒有，鼠標經過時顯示，或者其他。
• 圖標的變化
• 反色處理。
• 超級鏈接還有一個超簡單的——下劃線……

© 致遠 2020-01-29，原創內容，轉載請注明出錯：網頁設計中的按鈕和超級鏈接設計概要