網(wǎng)頁(yè)設(shè)計(jì)中的按鈕設(shè)計(jì)
想成為一名優(yōu)秀的設(shè)計(jì)師,拿來(lái)主義是行不通的。只有學(xué)會(huì)如何設(shè)計(jì)出符合自己風(fēng)格的按鈕,你才會(huì)成長(zhǎng)。而按鈕的設(shè)計(jì)往往要考慮到很多因素:怎樣與整個(gè)界面、上下文、品牌相匹配?能否打造獨(dú)一無(wú)二的效果?我還需要主要、次要、第三重要的按鈕嗎?那么他們應(yīng)該怎樣彼此區(qū)分?今天中國(guó)設(shè)計(jì)網(wǎng)的編者跟大家分享網(wǎng)頁(yè)設(shè)計(jì)中按鈕設(shè)計(jì)的十條基本準(zhǔn)則。
1、符合品牌
在設(shè)計(jì)按鈕時(shí),我們遵從品牌。在色調(diào),風(fēng)格上面,我們要遵從LOGO設(shè)計(jì)。盡量做到跟LOGO設(shè)計(jì)的風(fēng)格類(lèi)似。這樣才能保證網(wǎng)站從視覺(jué)上的整體性。
2、按鈕要符合文章上下需求
突兀的出現(xiàn)只會(huì)讓人百思不得其解,那么為了避免這樣的問(wèn)題出現(xiàn),今天我們就來(lái)講講文章中的按鈕位置。
漂亮的按鈕固然能賞心悅目,但是設(shè)計(jì)的與網(wǎng)站其它內(nèi)容差異太大,就不是那么美觀(guān)了。所以設(shè)計(jì)按鈕的時(shí)候,要考慮該位置按鈕的上下文內(nèi)容,不能顯得太唐突。按鈕首先看功能,如果是跳轉(zhuǎn)可以放在知識(shí)普及,一般需要填資料的放在介紹完之后,顯示按鈕,這樣會(huì)讓用戶(hù)知道這樣的按鈕是什么用途。
3、確保按鈕不被忽略
很多人在頁(yè)面上設(shè)置了很多按鈕,可是很多人都不知道這就是按鈕,或者是按鈕的作用沒(méi)有被利用起來(lái),因此不要讓你的按鈕被忽略。
在符合網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的前提下,要讓其在網(wǎng)站中顯眼,所以,我們要利用色彩、大小、留白、字體來(lái)提高按鈕的視覺(jué)表現(xiàn)力,從而引導(dǎo)用戶(hù)交互。重要的按鈕需要做出強(qiáng)調(diào),可以利用顏色,可以利用邊框,可以利用不一樣的顯示方式。
4、圓角或者直角按鈕
現(xiàn)在手機(jī)上幾乎很多都是方框型,那么什么情況適合用什么按鈕。
如果界面元素中很多都是圓角的,那么按鈕不妨做成直角的,這樣對(duì)照感就會(huì)很強(qiáng)烈,能夠引起行為召喚。
網(wǎng)站布局層級(jí)感比較好,使用圓形很容易被凸顯出來(lái)。使用對(duì)比的感覺(jué)讓用戶(hù)知道這是按鈕,而不只是頁(yè)面上的一個(gè)圖標(biāo)。
5、突出按鈕的主次
按鈕是辦公中經(jīng)常使用到的,那么按鈕的主次我們是如何來(lái)分辨的呢?一般是以大小,顏色,明暗來(lái)區(qū)別這些東西。在一些按鈕的設(shè)計(jì)上,對(duì)于次要的按鈕,可以減少裝飾性的方式進(jìn)行削弱,以突出主要按鈕。更少的陰影效果,更不明顯的斜面和見(jiàn)面,這樣就能突出主要元素了。一些比較關(guān)鍵的按鈕可以使用變色來(lái)顯示該步驟是否完成,切勿本末倒置。
6、按鈕的邊框
將一段文章放在白紙上,我們會(huì)以為是一段字,其實(shí)用線(xiàn),框可以隔出不同的意義,因此,你的按鈕讓我們清楚了解了么?
我們看到的大多數(shù)按鈕都有邊框。如果你的按鈕比背景顏色深,那么使用深色邊框會(huì)顯得非常好看,無(wú)邊框效果也不錯(cuò)。如果按鈕比背景顏色淺,那么無(wú)邊框會(huì)顯得特別雜亂,唯有使用深色的邊框才能讓按鈕看起來(lái)”精神飽滿(mǎn)”。使用邊框也會(huì)讓人覺(jué)得點(diǎn)擊的地方在哪里。所以,在你的按鈕上加上容易識(shí)別的框效果更好
7、按鈕的模糊陰影和色彩搭配
按鈕很多時(shí)候會(huì)因?yàn)槲恢枚绊扅c(diǎn)擊的次數(shù),其實(shí)按鈕的陰影和色彩搭配一樣會(huì)有影響。當(dāng)元素比背景顏色淺的時(shí)候,投影效果最佳,元素比背景顏色深的時(shí)候,那么陰影要慎重使用。在色彩的使用上,要符合網(wǎng)頁(yè)色彩搭配原則。不要讓你的按鈕設(shè)計(jì)毀了你整個(gè)頁(yè)面
8、多利用符號(hào)/圖標(biāo)
很多時(shí)候文字描述已經(jīng)漸漸被一些圖標(biāo)或者是英文所取代,就好像我們使用的前后左右移動(dòng)鍵,不需要再寫(xiě)文字就知道什么意思了,使用圖標(biāo)可以讓一切簡(jiǎn)單明了
就比如說(shuō)箭頭,絕對(duì)要比文字的描述更直觀(guān)。箭頭朝右,可能意味著離開(kāi)此頁(yè)。箭頭朝下,可能意味著打開(kāi)下面的內(nèi)容,或者打開(kāi)下面的菜單。這只是舉一個(gè)例子,手機(jī)圖標(biāo)就很明顯,不需要說(shuō)什么,一個(gè)符號(hào)你就懂了。
9、分清主、次、第三重要
很多時(shí)候一個(gè)圖標(biāo)的作用以及重要性是需要被凸顯出來(lái)的,你們覺(jué)得這樣的說(shuō)法對(duì)嘛?
如果你的界面功能點(diǎn)很多,那么就很有必要設(shè)計(jì)一套主要、次要、第三重要的按鈕。主要按鈕視覺(jué)表現(xiàn)力最強(qiáng),次要稍弱,第三重要按鈕比次要還要差一點(diǎn)??梢孕薷倪@些樣式:顏色、陰影、大小、留白、裝飾手段等等。因此在設(shè)計(jì)的時(shí)候,要學(xué)會(huì)使用以上方法。
10、按鈕一定要有反饋狀態(tài)
很多小伙伴覺(jué)得按鈕做好后就好了,其實(shí)你想過(guò)用戶(hù)使用的需求是什么嘛?按鈕一定要有反饋。這一點(diǎn)很容易被忽略,那就是按鈕在操作中一定要有反饋,讓用戶(hù)明白發(fā)生了什么。因?yàn)橛脩?hù)會(huì)按照真實(shí)生活建立認(rèn)知模型,如果你的按鈕反應(yīng)不似真實(shí)用戶(hù),用戶(hù)會(huì)感到失落。作為設(shè)計(jì)師,要多動(dòng)腦,勤動(dòng)手?;顚W(xué)活用才是王道。
-
2021/12/28
-
2021/12/23
-
2021/12/17
- 愛(ài)華仕斬獲“2021年度中國(guó)廚衛(wèi)行業(yè)年度智能
- 回首2021,迎戰(zhàn)2022 彩虹線(xiàn)開(kāi)啟新征程!
- 福臨板材|福滿(mǎn)2021,圓夢(mèng)2022
- 美特照明:2022年照明新趨勢(shì),經(jīng)銷(xiāo)商如何做大
- 會(huì)自己“洗澡”的集成灶,帥康自動(dòng)清洗集成灶
- 帶你設(shè)計(jì)一款功能多變,簡(jiǎn)單實(shí)用的休閑露臺(tái)陽(yáng)
- 世紀(jì)豪門(mén)吊頂:破防了!原來(lái)顏值+實(shí)力=H20
- 裝修木門(mén)選的好,噪音統(tǒng)統(tǒng)沒(méi)煩惱
- 寒潮來(lái)了,有淋浴房洗澡更保暖舒服
- 元旦特輯:歐意電器述說(shuō)生活的點(diǎn)滴與美好
- “中國(guó)十大品牌”獲獎(jiǎng)名單出爐,賽戈水漆榮耀
- 2021值得消費(fèi)大賞 凱迪仕智能鎖榮摘兩項(xiàng)桂冠
- 益恩家居:新年新氣象,愛(ài)自己從好好睡覺(jué)開(kāi)始
- 元旦伊始:健康新生活,從精格管道直飲水開(kāi)始
- 喜迎元旦|新年新燈飾 箔晶智能照明讓酒店暖
- 吉美幫的2021 “專(zhuān)精特新” 深耕屋面防水體
- Aqara攜手京東成立燈光設(shè)計(jì)聯(lián)盟 打造燈飾照
- 年底廚房煥新顏,如何選擇廚電?好太太智能來(lái)
- 全鋁家具全屋莫蘭迪色系,這款美式輕奢范贏(yíng)鄰
- 順趨勢(shì)·筑鳳巢·贏(yíng)未來(lái) 鳳梧居門(mén)窗2021年會(huì)隆