激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計(jì):按鈕組設(shè)計(jì)總結(jié)

發(fā)布時(shí)間：2024-04-03 15:28:09 瀏覽量：113次


上周一個(gè)朋友問(wèn)了我一個(gè)問(wèn)題，按鈕組排布的時(shí)候是組合在一起好還是分開好。這個(gè)問(wèn)題當(dāng)時(shí)就把我問(wèn)倒了，因?yàn)槲抑皬膩?lái)沒(méi)有考慮過(guò)這個(gè)問(wèn)題。為了回答這個(gè)問(wèn)題，我對(duì)按鈕組的使用場(chǎng)景進(jìn)行了一個(gè)簡(jiǎn)單的總結(jié)，希望可以幫助到大家。

什么是按鈕組？




判斷



首先我們來(lái)說(shuō)判斷，就是只有兩個(gè)按鈕的情況。一般來(lái)說(shuō)，兩個(gè)按鈕中肯定有一個(gè)擁有更高的優(yōu)先級(jí)或者說(shuō)用戶更希望去點(diǎn)擊，那么我們會(huì)在樣式設(shè)計(jì)上進(jìn)行區(qū)分。



小時(shí)候，我們家的燈開關(guān)都是拉繩的。拉繩的開關(guān)有一個(gè)缺點(diǎn)就是停電的時(shí)候，你不知道當(dāng)前的燈是開還是關(guān)，這個(gè)就很頭疼。所以開關(guān)要用好必須要讓用戶明確自己當(dāng)前所處的狀態(tài)以及清楚操作后的結(jié)果。其實(shí)淘寶的這個(gè)switch用的并不是很好，因?yàn)檫@里的圖形暗示并不是很清晰。



線狀和面狀


微信里“通訊錄”里的icon加了一個(gè)色塊做背景，但是“發(fā)現(xiàn)”和“我”界面中的icon都沒(méi)有加色塊做背景。我嘗試著把icon的色塊背景給去掉，發(fā)現(xiàn)它的視覺(jué)權(quán)重立馬降了一檔。因?yàn)橥ㄓ嶄涍@個(gè)界面中有用戶頭像，如果不加色塊背景，用戶很難注意到這四個(gè)功能。所以說(shuō)塊狀元素的使用可以提升功能的轉(zhuǎn)化率。

“一個(gè)”是我個(gè)人很喜歡的應(yīng)用，它的界面中除了必要的配圖，其余所有icon和按鈕使用的都是線狀元素，給用戶一種非常清新淡雅的感覺(jué)，這倒也很貼合這款產(chǎn)品的氣質(zhì)。


對(duì)于一款產(chǎn)品來(lái)說(shuō)，設(shè)計(jì)師的職責(zé)是非常大的，不應(yīng)該像現(xiàn)在這樣僅限于美工層面。從整個(gè)產(chǎn)品的角度來(lái)說(shuō)，設(shè)計(jì)師要準(zhǔn)確的定位目標(biāo)用戶群，根據(jù)目標(biāo)用戶群的喜好來(lái)確定界面設(shè)計(jì)風(fēng)格，具體到每個(gè)界面中設(shè)計(jì)師要考慮各個(gè)功能的優(yōu)先級(jí)排布。不要怕麻煩，你能做的事情越多，你的“可替代性”就越低，所得的報(bào)酬就會(huì)越多。


選擇


喝完了雞湯，接下來(lái)我們回到正題。再來(lái)說(shuō)按鈕組中有三個(gè)或者三個(gè)以上的選項(xiàng)的時(shí)候我們應(yīng)該怎么處理呢？


其實(shí)這種出現(xiàn)多個(gè)選項(xiàng)的按鈕組樣式我們可以看成是單選/復(fù)選功能的一個(gè)變形。只不過(guò)現(xiàn)在傳統(tǒng)的單選/復(fù)選的樣式很難滿足當(dāng)前的設(shè)計(jì)需要，用戶渴望更加新穎多變的按鈕樣式。特別是選項(xiàng)過(guò)多的情況下，按鈕的優(yōu)勢(shì)就凸顯出來(lái)了。


那么我們?cè)倩氐街暗哪莻€(gè)問(wèn)題，“按鈕組排布的時(shí)候是組合在一起好還是分開好？”對(duì)于這個(gè)問(wèn)題，我是這么認(rèn)為的：分開的按鈕樣式具有更強(qiáng)的適應(yīng)性，可以換行，也可以滑動(dòng)。組合按鈕樣式一般都要全貫通，適合展示信息層級(jí)較高的功能?？偨Y(jié)成一句話：如果選項(xiàng)在一屏的寬度中可以展示完全，那么組合在一起和分開的區(qū)別并不是很大，但是一旦選項(xiàng)過(guò)多需要用戶滑動(dòng)和換行才能瀏覽完的時(shí)候，分開的樣式更加適合。


單選/復(fù)選都是供用戶進(jìn)行選擇操作，其實(shí)還有一個(gè)組件跟單選/復(fù)選很相似，那就是下拉列表。當(dāng)選項(xiàng)過(guò)多時(shí)，用戶可以使用下拉菜單展示并選擇內(nèi)容。下拉列表的優(yōu)勢(shì)在于節(jié)省了界面空間，但是用戶想要看到全部的選項(xiàng)必須要點(diǎn)擊出下拉列表，增加了操作步驟，而且會(huì)對(duì)界面中其他內(nèi)容造成遮擋。所以當(dāng)你的界面元素不是很多的情況下，我的個(gè)人建議是盡量使用單選/復(fù)選按鈕。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定