UI設計:按鈕組設計總結


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

UI設計:按鈕組設計總結

什麼是按鈕組?



UI設計:按鈕組設計總結


判斷



首先我們來說判斷,就是隻有兩個按鈕的情況。一般來說,兩個按鈕中肯定有一個擁有更高的優先級或者說用戶更希望去點擊,那麼我們會在樣式設計上進行區分。

UI設計:按鈕組設計總結

UI設計:按鈕組設計總結


UI設計:按鈕組設計總結


小時候,我們家的燈開關都是拉繩的。拉繩的開關有一個缺點就是停電的時候,你不知道當前的燈是開還是關,這個就很頭疼。所以開關要用好必須要讓用戶明確自己當前所處的狀態以及清楚操作後的結果。其實淘寶的這個switch用的並不是很好,因為這裡的圖形暗示並不是很清晰。

UI設計:按鈕組設計總結



線狀和麵狀


UI設計:按鈕組設計總結

UI設計:按鈕組設計總結

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

UI設計:按鈕組設計總結

UI設計:按鈕組設計總結

UI設計:按鈕組設計總結

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

UI設計:按鈕組設計總結


對於一款產品來說,設計師的職責是非常大的,不應該像現在這樣僅限於美工層面。

從整個產品的角度來說,設計師要準確的定位目標用戶群,根據目標用戶群的喜好來確定界面設計風格,具體到每個界面中設計師要考慮各個功能的優先級排布。不要怕麻煩,你能做的事情越多,你的“可替代性”就越低,所得的報酬就會越多。


選擇


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

UI設計:按鈕組設計總結


其實這種出現多個選項的按鈕組樣式我們可以看成是單選/複選功能的一個變形。只不過現在傳統的單選/複選的樣式很難滿足當前的設計需要,用戶渴望更加新穎多變的按鈕樣式。特別是選項過多的情況下,按鈕的優勢就凸顯出來了。

UI設計:按鈕組設計總結


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


UI設計:按鈕組設計總結

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

UI設計:按鈕組設計總結





分享到:


相關文章: