2013-10-22 分類: 網(wǎng)站制作
設(shè)計師的想法實現(xiàn)依賴于代碼,這也是為什么先有前端,而后有UI。很多時候,為了提高效率,開發(fā)在寫前端頁面時會采用現(xiàn)成的框架。作為設(shè)計師在了解一定的代碼基礎(chǔ)后,設(shè)計稿會更加有依據(jù),和開發(fā)交流也變得容易。下面我們就從Bootstrap框架的角度去理解按鈕在代碼中的相關(guān)知識,這里每一個點都已被驗證可實現(xiàn),可以作為細節(jié)納入設(shè)計思考中。
1.基本案例 Base Example
主按鈕:通常用有顏色的背景形狀加文字,它也被叫做號召按鈕Call to Action,需要引起用戶的注意,鼓勵用戶采取某種行為。
次按鈕:默認采用灰底黑字的樣式,與主按鈕搭配使用,減少視覺上的干擾
提示按鈕:紅綠黃分別代表代表危險,成功,警示。這樣的顏色搭配也和生活中人們的普遍認知相符合,例如紅綠燈。
文本按鈕:通常自帶按鈕語意,或帶有顏色或下劃線,用于輔助交互,不會分散主按鈕元素的注意力。
2.邊框按鈕 Outline Buttons
也被稱作幽靈按鈕Ghost Button,它看起來是空心的,由一個可識別形狀的線框和文字構(gòu)成,通常與主按鈕搭配,用于次要操作,這種按鈕有助于設(shè)置視覺層次結(jié)構(gòu)。
3.淺色背景按鈕Light Buttons
Light Buttons:在需要用多顏色來表示多功能的系統(tǒng)中,淺色背景按鈕在視覺上不會影響主按鈕,并可以很好地幫助區(qū)分功能。
Light Hover Buttons:向用戶提供對懸浮按鈕的反饋是一種很好的交互(其他按鈕也一樣),用戶知道他們的動作已被系統(tǒng)接受,對下一步操作充滿期待,更有信心。
4.帶圖標按鈕 Buttons with Icons
在按鈕中加入圖標會讓單調(diào)的按鈕更加生動,整個頁面頁會變得活潑
圖標左文字右:用戶先看到圖標后看到文字,在熟悉某個界面后,這種布局讓用戶在尋找某個操作時更加容易
文字左圖標右:圖標起到對文字進一步解釋的作用
5.鏈接按鈕 Link Buttons
6.社交按鈕 Social Buttons
這些按鈕簡化了將網(wǎng)站內(nèi)容連接到用戶的社交媒體的過程。為了易于識別,通常會用各自的品牌標識。
7.狀態(tài) States
常見的按鈕狀態(tài)有6種:Normal,Hover,Active,Focus, Visited ,Disabled
Normal正常:光標沒有懸停在按鈕上時的樣式,按鈕所鏈接的頁面之前沒有被點擊過
Hover鼠標懸停:光標懸停在按鈕上時,按鈕給出變化提示用戶可點擊
Active激活:按鈕被點擊后系統(tǒng)在處理一些進程,例如提交中,等待中等
Focus聚焦:按下按鈕后由正常或懸停狀態(tài)發(fā)生的微妙變化,不易察覺
Visited已訪問:用戶在之前已訪問過該頁面
Disabled禁用:由于各種原因用戶不可點擊該按鈕,通常按鈕置灰或光標移置按鈕時給出不可點擊狀態(tài)提示
8.按鈕字體樣式 Button Font Styles
字重:合理設(shè)置字重能將內(nèi)容進行區(qū)分,突出重點,在版面中,對比越強烈,信息層級區(qū)分越明顯,在字重的選擇上,可以大膽的進行跨等級選擇,例如常規(guī)體直接與中粗體進行對比。Contrast is king對比為王!
大寫字母:給人重要,有力量,可信賴的觀感,他們看上去較大,需要花費時間力氣去閱讀。通常用于導(dǎo)航,標題,標簽等需要引起用戶注意的地方。
小寫字母:給人非正式,友善親和的觀感,通常用于句子類內(nèi)容較多的地方。
合理利用大小寫的組合可以讓文本更加易讀,減輕用戶的視覺負擔(dān)。
9.按鈕文本顏色 Button Text
10.按鈕樣式 Button Styles
11.尺寸 Size
尺寸是讓用戶了解元素重要性和構(gòu)建組件層次結(jié)構(gòu)的重要因素。主按鈕通常要足夠大,容易找到,但不能太大,影響整體布局。次按鈕等其他類型按鈕不能過小,保證易用性,這點在移動端的規(guī)范更為嚴格。
系統(tǒng)中同類按鈕尺寸要保持一致性
12.按鈕陰影 Buttons with Shadow
在設(shè)置按鈕陰影的顏色時,吸取按鈕本身的顏色然后調(diào)整其透明度會比黑色陰影有更佳的視覺感受
13.懸浮按鈕可選顏色 Hover Button Option
14.透明按鈕 Transparent Buttons
適用于深色背景,按鈕的背景吸取文字的顏色并降低其透明度
除了按鈕,還有很多其他組件的代碼相關(guān)知識可以去了解,例如彈窗,面包屑,導(dǎo)航,下拉,輸入框等。在對這些組件有了一定了解后,在特定的業(yè)務(wù)場景下,設(shè)計師便知道哪些需要出圖,哪些可以用框架自帶的組件,以及如何用現(xiàn)有組件與對提高效率有很大幫助。
新聞標題:從前端網(wǎng)站制作Bootstrap框架的角度看待按鈕
標題路徑:http://m.rwnh.cn/news/18802.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站制作等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容