從前端網站制作Bootstrap框架的角度看待按鈕

2013-10-22 分類：網站制作

設計師的想法實現依賴于代碼，這也是為什么先有前端，而后有UI。很多時候，為了提高效率，開發在寫前端頁面時會采用現成的框架。作為設計師在了解一定的代碼基礎后，設計稿會更加有依據，和開發交流也變得容易。下面我們就從Bootstrap框架的角度去理解按鈕在代碼中的相關知識，這里每一個點都已被驗證可實現，可以作為細節納入設計思考中。

1.基本案例 Base Example

主按鈕：通常用有顏色的背景形狀加文字，它也被叫做號召按鈕Call to Action，需要引起用戶的注意，鼓勵用戶采取某種行為。
次按鈕：默認采用灰底黑字的樣式，與主按鈕搭配使用，減少視覺上的干擾
提示按鈕：紅綠黃分別代表代表危險，成功，警示。這樣的顏色搭配也和生活中人們的普遍認知相符合，例如紅綠燈。

文本按鈕：通常自帶按鈕語意，或帶有顏色或下劃線，用于輔助交互，不會分散主按鈕元素的注意力。

2.邊框按鈕 Outline Buttons

也被稱作幽靈按鈕Ghost Button，它看起來是空心的，由一個可識別形狀的線框和文字構成，通常與主按鈕搭配，用于次要操作，這種按鈕有助于設置視覺層次結構。

3.淺色背景按鈕Light Buttons

Light Buttons：在需要用多顏色來表示多功能的系統中，淺色背景按鈕在視覺上不會影響主按鈕，并可以很好地幫助區分功能。
Light Hover Buttons：向用戶提供對懸浮按鈕的反饋是一種很好的交互（其他按鈕也一樣），用戶知道他們的動作已被系統接受，對下一步操作充滿期待，更有信心。

4.帶圖標按鈕 Buttons with Icons

在按鈕中加入圖標會讓單調的按鈕更加生動，整個頁面頁會變得活潑

圖標左文字右：用戶先看到圖標后看到文字，在熟悉某個界面后，這種布局讓用戶在尋找某個操作時更加容易
文字左圖標右：圖標起到對文字進一步解釋的作用

5.鏈接按鈕 Link Buttons

6.社交按鈕 Social Buttons

這些按鈕簡化了將網站內容連接到用戶的社交媒體的過程。為了易于識別，通常會用各自的品牌標識。

7.狀態 States

常見的按鈕狀態有6種：Normal,Hover,Active,Focus, Visited ，Disabled

Normal正常：光標沒有懸停在按鈕上時的樣式，按鈕所鏈接的頁面之前沒有被點擊過
Hover鼠標懸停：光標懸停在按鈕上時，按鈕給出變化提示用戶可點擊
Active激活：按鈕被點擊后系統在處理一些進程，例如提交中，等待中等
Focus聚焦：按下按鈕后由正常或懸停狀態發生的微妙變化，不易察覺
Visited已訪問：用戶在之前已訪問過該頁面
Disabled禁用：由于各種原因用戶不可點擊該按鈕，通常按鈕置灰或光標移置按鈕時給出不可點擊狀態提示

8.按鈕字體樣式 Button Font Styles

字重：合理設置字重能將內容進行區分，突出重點，在版面中，對比越強烈，信息層級區分越明顯，在字重的選擇上，可以大膽的進行跨等級選擇，例如常規體直接與中粗體進行對比。Contrast is king對比為王！
大寫字母：給人重要，有力量，可信賴的觀感，他們看上去較大，需要花費時間力氣去閱讀。通常用于導航，標題，標簽等需要引起用戶注意的地方。
小寫字母：給人非正式，友善親和的觀感，通常用于句子類內容較多的地方。

合理利用大小寫的組合可以讓文本更加易讀，減輕用戶的視覺負擔。

9.按鈕文本顏色 Button Text