你好，button——小談網頁設計的按鈕

 

   說起按鈕，不得不先提一下連結，因為在大部分人看來，似乎按鈕與連結差不多，都是完成一個頁面的跳轉。其實不然，按鈕與連結還是有一定的區別。

    先簡單說說他們的區別吧。

    按鈕：按鈕代表著“做某件事”，即點擊了按鈕代表著操作了一個功能，做的這件事是有後果的，不易挽回的。例如典型的google，QQ郵箱。像資訊搜尋、回複、註冊，他們的共同點是：都是在“做”一件事，並且絕大多數都是對錶單的提交。從技術上講，這類按鈕的作用是向後台提交了資料，“命令”伺服器去做了一件事。

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

 

 

 

    假如這樣嚴格來區分按鈕與連結的區別，好處是在邏輯上會非常清晰。然而，現實的問題是，按這種思路設計出來的網站，在一些需要被強化的地方，一些需要引導使用者點擊的地方，僅用連結很難在視覺上突出表現。再回到我們遊戲頁面設計的現狀來看，其實按鈕與連結也並沒有嚴格區分，而且，假如嚴格區分，跟我們要表達視覺上的優先順序別會有衝突。典型案例：各遊戲引導頁裡的“進入官網”，嚴格來講，它的作用也只是讓觀者順利跳轉到另一個頁面，是屬於連結，但這個往往是我們特彆強調的“按鈕”。所以在遊戲頁面的設計過程中，是否需要嚴格區分兩者的區別，還有待討論……

 

    小結一下當前大部分人理解的按鈕：有一個外框（這個框可以是任何幾何形體，比如方、圓、橢圓等等），再上面有一些文字（比如：下載、註冊、儲值、搜尋、登入，抽獎等等），滿足了這兩個基本條件的，大家就認為是按鈕，按鈕的本質特點就是可以點擊。

 

一、下面是針對沒有嚴格區分兩者關係的按鈕視覺表現探討

    當前在頁面裡要強調的連結自然會以按鈕的形式表現，尤其所謂重量級按鈕是促成觀者完成頁面功能的一個很重要的部分，所以對於其本身來講，應該具有“勾引眼球”的效果。對於一個可以起到“勾引”作用的按鈕，建議從下面幾個方面來思考。

 

1.按鈕本身的用色

本身的顏色應該區別於它周邊的環境色，因此它要更亮而且有高對比的顏色。

 

2.按鈕的位置
按鈕的位置也需要仔細考究，基本原則是要容易找到，特別重要的按鈕應該處在畫面的中心位置。

 

3.按鈕上面的文字表述

 在按鈕上使用什麼文字傳遞給使用者非常重要。需要言簡意賅，直接明了，如:註冊、下載、建立、免費試玩等，甚至有時候用“點擊進入”，這一點上就是千萬不要讓觀者去思考，越簡單、越直接越好。

 

4.按鈕的尺寸
通常來講，一個頁面當中按鈕的大小也決定了其本身的重要層級，但也不是越大越好，尺寸應該適中，因為按鈕大到一定程度，會讓人覺得那不像按鈕，潛意識的認為那是一塊地區，導致沒有點擊慾望。

5.讓其充分通透
你的按鈕不能和網頁中的其他元素擠在一起。它需要充足的margin(外邊距)才能更加突出，也需要更多的padding(內邊距)才能讓文字更容易閱讀。

6.注意滑鼠滑過的效果
給予較為重要的按鈕適當加一些滑鼠滑過的效果，會有力的增強按鈕的點擊感，給使用者帶來良好的使用者體驗，起到畫龍點睛的作用。這裡要注意的是，不太適合按鈕集中的地方，每個都增加高亮的滑鼠滑過的效果，這樣會造成視覺過於雜亂，影響使用者瀏覽的舒適度，所以要強調的是“恰當”地添加滑鼠滑過的效果。

 

 

 

    設計師在平常的工作當中，經常會遇到一些按鈕修改的意見，時不時聽到產品人員提到“讓這個按鈕更像個按鈕”，面對這樣的問題，不防從上面的6個方向去思考與改進。

    其實在我們平常的設計當中有很多重量級不那麼高的按鈕，需要“低調”處理，也就是說在一個頁面當中，眾多的按鈕，是有功能優先順序別的，這樣就務必讓一堆按鈕也呈現出視覺的優先順序別。如下面的圖片，右邊的按鈕群除了大小、位置區分了優先順序之外，很重要的一點是色塊的區分，高飽和色塊的按鈕群是不建議存在的。高飽和色調的應用往往是為了突出重點，而非強調整體，所以這種局面的處理方式建議用眾多的低飽和色調來襯托小部分高飽和的重點資訊。

 

 

結束語：請重視按鈕的表現。