在重慶網(wǎng)站設計中,關于按紐這祥的細節(jié)在網(wǎng)頁設計中至關重要,尤其在按鈕多的地方需要根據(jù)用戶使用習憤和情境來決定按紐層級、位置、組合方式。所以在網(wǎng)站設計之初需要先制定統(tǒng)一的按紐樣式和層級,以及使用場果,當然這不是固定不變的,在設計稿全部完成前還需要一定的微調完善。
一、通用按鈕
按鈕揉作的動作,基本上分為正常、移入、點擊、激活、禁用等,有的信息網(wǎng)站為了使用戶更容易區(qū)分是否閱讀過還會添加點擊過的狀態(tài)。
以下按紐顏色是重慶網(wǎng)站制作公司網(wǎng)站使用的規(guī)范,由內到外分別是正常、移入、點擊三種狀態(tài)的顏色。如果想偷懶的話可以直接選移入的顏色然后在上面調整透明度再吸顏色,但是差距不宜過大,否則會給頻繁使用的用戶造成視覺負擔。
使用場景:相似功能過多,沒有突出使用的按鈕或者禁用。
注意是“或者”,千萬不能同時使用!假如全都是可以使用的按紐,你突然來一個禁用,讓用戶點半天沒反應?瞄?如果區(qū)分困難的話當然可以在按紐文字和背景顏色上做文章。
使用場景:為了突出當前頁面的主要功能,區(qū)分于其他零散功能。
數(shù)據(jù)或者工具網(wǎng)站中一般用于提交、上傳、下載、搜索等,電商網(wǎng)站后臺最常見的就是“確認收貨’’按鈕,它們一般被賦予logo的顏色或者網(wǎng)站主色調。主睡色同樣被使用在文字按鈕的移入樣式和控件激活樣式中。
使用場景:基本上和主要按紐一同出現(xiàn),層級低于主要按鈕。
為了功能上的區(qū)分需要次要桉紐的出現(xiàn),它的層級主要根據(jù)用戶使用頻率來定義,并不是設計師看心情來定奪的
使用場景:操作成功的提示中,或者toast中的輔助按紐。
通常為了銷簡顏色使用,我還是推薦使用主要按鈕的顔色,還是考慮到用戶的人認知負擔的問娌》使用的時候可以根據(jù)網(wǎng)站顔色來決定要不要采用這些顔色。
使用場景:和成功類的按鈕類似,僅作為信息提示使用。
可以采取一小部分作為點綴色對網(wǎng)頁上的按紐和icon進行裝點。
使用場果:威脅到“生命安全”時使用,通常涉及到財產和賬號安全性使用警告色。
紅色一般很少用,除非你的網(wǎng)站主題色就是紅色,然后危險警告可能就需要換成黑色或者色相或者明度差距更大的顏色了。
既然有了默認按鈕,那么按紐的大小和細節(jié)樣式需要根據(jù)網(wǎng)站布局和風格來調整了。
二、按紐樣式
按紐的大小需要首先定義默認大小,然后再根據(jù)特殊場景下的頁面對按紐的大小進行調整,使之與頁面在視覺和交互層面和諧。我通常使用高度36p>(的按紐為默認按紐,基本上可以適用于所有的頁面,但是也不缺乏按紐多到可以擠在一起的情況,這時候可以考慮Small Button,不建議使用TinyButton,不僅交互體驗差,點擊容易出現(xiàn)錯誤,對于近視的人也是很差的體驗。
如上圖所示,單一的按鈕大小雖然看不出什么,但是放在一起的話,默認的按鈕大小略顯笨重,反而小按鈕在視覺上相對輕巧。
大按紐基本上在頁面中沒有其他特殊控件或者按紐參與的悄況下使用,這樣可以鎮(zhèn)住”場面’’,當然也SS要頁面的顔色配合啦。也可以在彈窗中使用,有助于聚焦。這就涉及到組合按鈕樣式了。