按鈕組設(shè)計總結(jié):按鈕組排布時,是組合在一起好還是分開好?

4 評論 13158 瀏覽 66 收藏 10 分鐘

本文主要是對按鈕組的使用場景進行了一個簡單的總結(jié),enjoy~

上周一個朋友問了我一個問題,按鈕組排布的時候是組合在一起好還是分開好?這個問題當(dāng)時就把我問倒了,因為我之前從來沒有考慮過這個問題。為了回答這個問題,我對按鈕組的使用場景進行了一個簡單的總結(jié),希望可以幫助到大家。

什么是按鈕組?

顧名思義,按鈕組就是指兩個或兩個以上的按鈕排布在一起。為了了解按鈕組的使用場景,首先我們來思考一個問題:什么時候我們會使用按鈕組?

從按鈕組的樣式上我們可以看出常見的按鈕組是供用戶進行判斷(兩個選項)或者選擇(兩個以上選項)的。

判斷

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

微信的”取消”按鈕背景色選擇的是灰色,而淘寶直接讓”取消”成了一個光禿禿的文字按鈕。這樣的對比設(shè)置可以讓用戶很快找到“確認登陸”按鈕,進而完成登錄操作,提升了操作效率。

其實可以讓用戶進行判斷操作的組件還有開關(guān)。開關(guān),又稱switch,也是我們很常見的一個組件,表示兩種相互對立的狀態(tài)間的切換,多用于表示功能的開啟和關(guān)閉。而一項功能的開啟可能會帶來相應(yīng)的后續(xù)操作,例如你在iOS設(shè)置里開啟了微信的“通知”功能,那么你就需要對通知形式進行進一步的設(shè)置。而按鈕組不會出現(xiàn)這些后續(xù)操作,更像是一錘子買賣,這也是按鈕組和開關(guān)的一個主要的區(qū)別。

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

線狀和面狀

在上面我們提到了設(shè)計中的一個對比理論,這里我們不妨來進行一個拓展。我們在設(shè)計按鈕的時候,經(jīng)常會面臨著抉擇,線狀按鈕還是面狀按鈕?其實線狀還是面狀爭論不僅僅存在于按鈕,還有icon,tab和標(biāo)簽等樣式。面狀和線狀代表不同的設(shè)計理念,我們都知道面狀元素在界面中更容易吸引用戶的注意力,而線狀元素強調(diào)的是輕量化。具體到按鈕,簡單來說就是面狀按鈕比線狀按鈕具有更強的可點擊性。我們可以來看一個例子:

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

我們再來看一個例子,喜馬拉雅Fm這個界面中的“錄音”按鈕其實看起來特別的吃藕,因為很突兀。但是設(shè)計師的目的達到了,為了提升用戶黏性,他們肯定很希望用戶在喜馬拉雅Fm里上傳自己的錄音作品,那么必須做到足夠的顯眼。

我們對這個界面進行高斯模糊處理,發(fā)現(xiàn)視覺焦點就在這個“錄音”按鈕上,所以“突?!彼闶裁??就怕你不突兀呢!

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

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

選擇

喝完了雞湯,接下來我們回到正題。再來說按鈕組中有三個或者三個以上的選項的時候我們應(yīng)該怎么處理呢?

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

那么我們再回到之前的那個問題,“按鈕組排布的時候是組合在一起好還是分開好?”對于這個問題,我是這么認為的:分開的按鈕樣式具有更強的適應(yīng)性,可以換行,也可以滑動。組合按鈕樣式一般都要全貫通,適合展示信息層級較高的功能??偨Y(jié)成一句話:如果選項在一屏的寬度中可以展示完全,那么組合在一起和分開的區(qū)別并不是很大,但是一旦選項過多需要用戶滑動和換行才能瀏覽完的時候,分開的樣式更加適合。

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

以上就是我對按鈕組的使用場景做的一個總結(jié),希望可以給大家?guī)硪恍椭?/p>

#專欄作家#

王M爭(微信公眾號:王M爭),人人都是經(jīng)理專欄作家,資深互聯(lián)網(wǎng)人。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. mark

    回復(fù)
  2. 給矮春暖打電話。

    回復(fù)
  3. 很受啟發(fā),感謝~

    來自安徽 回復(fù)