設(shè)計(jì)師的想法實(shí)現(xiàn)依賴于代碼，這也是為什么先有前端，而后有UI。很多時(shí)候，為了提高效率，開(kāi)發(fā)在寫(xiě)前端頁(yè)面時(shí)會(huì)采用現(xiàn)成的框架。作為設(shè)計(jì)師在了解一定的代碼基礎(chǔ)后，設(shè)計(jì)稿會(huì)更加有依據(jù)，和開(kāi)發(fā)交流也變得容易。下面我們就從Bootstrap框架的角度去理解按鈕在代碼中的相關(guān)知識(shí)，這里每一個(gè)點(diǎn)都已被驗(yàn)證可實(shí)現(xiàn)，可以作為細(xì)節(jié)納入設(shè)計(jì)思考中。

1.基本案例 Base Example

• 主按鈕：通常用有顏色的背景形狀加文字，它也被叫做號(hào)召按鈕Call to Action，需要引起用戶的注意，鼓勵(lì)用戶采取某種行為。

• 次按鈕：默認(rèn)采用灰底黑字的樣式，與主按鈕搭配使用，減少視覺(jué)上的干擾

• 提示按鈕：紅綠黃分別代表代表危險(xiǎn)，成功，警示。這樣的顏色搭配也和生活中人們的普遍認(rèn)知相符合，例如紅綠燈。

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

2.邊框按鈕 Outline Buttons

• 也被稱(chēng)作幽靈按鈕Ghost Button，它看起來(lái)是空心的，由一個(gè)可識(shí)別形狀的線框和文字構(gòu)成，通常與主按鈕搭配，用于次要操作，這種按鈕有助于設(shè)置視覺(jué)層次結(jié)構(gòu)。

  
  

3.淺色背景按鈕Light Buttons

• Light Buttons：在需要用多顏色來(lái)表示多功能的系統(tǒng)中，淺色背景按鈕在視覺(jué)上不會(huì)影響主按鈕，并可以很好地幫助區(qū)分功能。

• Light Hover Buttons：向用戶提供對(duì)懸浮按鈕的反饋是一種很好的交互（其他按鈕也一樣），用戶知道他們的動(dòng)作已被系統(tǒng)接受，對(duì)下一步操作充滿期待，更有信心。

4.帶圖標(biāo)按鈕 Buttons with Icons

在按鈕中加入圖標(biāo)會(huì)讓單調(diào)的按鈕更加生動(dòng)，整個(gè)頁(yè)面頁(yè)會(huì)變得活潑

• 圖標(biāo)左文字右：用戶先看到圖標(biāo)后看到文字，在熟悉某個(gè)界面后，這種布局讓用戶在尋找某個(gè)操作時(shí)更加容易

• 文字左圖標(biāo)右：圖標(biāo)起到對(duì)文字進(jìn)一步解釋的作用

5.鏈接按鈕 Link Buttons

6.社交按鈕 Social Buttons

這些按鈕簡(jiǎn)化了將網(wǎng)站內(nèi)容連接到用戶的社交媒體的過(guò)程。為了易于識(shí)別，通常會(huì)用各自的品牌標(biāo)識(shí)。

7.狀態(tài) States

常見(jiàn)的按鈕狀態(tài)有6種：Normal,Hover,Active,Focus, Visited ，Disabled

• Normal正常：光標(biāo)沒(méi)有懸停在按鈕上時(shí)的樣式，按鈕所鏈接的頁(yè)面之前沒(méi)有被點(diǎn)擊過(guò)

• Hover鼠標(biāo)懸停：光標(biāo)懸停在按鈕上時(shí)，按鈕給出變化提示用戶可點(diǎn)擊

• Active激活：按鈕被點(diǎn)擊后系統(tǒng)在處理一些進(jìn)程，例如提交中，等待中等

• Focus聚焦：按下按鈕后由正?；驊彝顟B(tài)發(fā)生的微妙變化，不易察覺(jué)

• Visited已訪問(wèn)：用戶在之前已訪問(wèn)過(guò)該頁(yè)面

• Disabled禁用：由于各種原因用戶不可點(diǎn)擊該按鈕，通常按鈕置灰或光標(biāo)移置按鈕時(shí)給出不可點(diǎn)擊狀態(tài)提示

8.按鈕字體樣式 Button Font Styles

• 字重：合理設(shè)置字重能將內(nèi)容進(jìn)行區(qū)分，突出重點(diǎn)，在版面中，對(duì)比越強(qiáng)烈，信息層級(jí)區(qū)分越明顯，在字重的選擇上，可以大膽的進(jìn)行跨等級(jí)選擇，例如常規(guī)體直接與中粗體進(jìn)行對(duì)比。Contrast is king對(duì)比為王！

• 大寫(xiě)字母：給人重要，有力量，可信賴的觀感，他們看上去較大，需要花費(fèi)時(shí)間力氣去閱讀。通常用于導(dǎo)航，標(biāo)題，標(biāo)簽等需要引起用戶注意的地方。

• 小寫(xiě)字母：給人非正式，友善親和的觀感，通常用于句子類(lèi)內(nèi)容較多的地方。

合理利用大小寫(xiě)的組合可以讓文本更加易讀，減輕用戶的視覺(jué)負(fù)擔(dān)。

9.按鈕文本顏色 Button Text

10.按鈕樣式 Button Styles

11.尺寸 Size

• 尺寸是讓用戶了解元素重要性和構(gòu)建組件層次結(jié)構(gòu)的重要因素。主按鈕通常要足夠大，容易找到，但不能太大，影響整體布局。次按鈕等其他類(lèi)型按鈕不能過(guò)小，保證易用性，這點(diǎn)在移動(dòng)端的規(guī)范更為嚴(yán)格。

• 系統(tǒng)中同類(lèi)按鈕尺寸要保持一致性

12.按鈕陰影 Buttons with Shadow

• 在設(shè)置按鈕陰影的顏色時(shí)，吸取按鈕本身的顏色然后調(diào)整其透明度會(huì)比黑色陰影有更佳的視覺(jué)感受

13.懸浮按鈕可選顏色 Hover Button Option

14.透明按鈕 Transparent Buttons

• 適用于深色背景，按鈕的背景吸取文字的顏色并降低其透明度

除了按鈕，還有很多其他組件的代碼相關(guān)知識(shí)可以去了解，例如彈窗，面包屑，導(dǎo)航，下拉，輸入框等。在對(duì)這些組件有了一定了解后，在特定的業(yè)務(wù)場(chǎng)景下，設(shè)計(jì)師便知道哪些需要出圖，哪些可以用框架自帶的組件，以及如何用現(xiàn)有組件與對(duì)提高效率有很大幫助。

新聞標(biāo)題：從前端網(wǎng)站制作Bootstrap框架的角度看待按鈕
標(biāo)題路徑：http://aaarwkj.com/news/18802.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站制作等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)