微信H5房卡9人牛牛青龍大廳開發頁面按鈕組設計總結
顧名思義，按鈕組就是指兩個或兩個以上的按鈕排布在一起。為了了解按鈕組的使用場景，首先我們來思考一個問題：什麽時候我們會使用按鈕組？
從按鈕組的樣式上我們可以看出常見的按鈕組是供用戶進行判斷(兩個選項)或者選擇(兩個以上選項)的。
判斷
首先我們來說判斷，就是只有兩個按鈕的情況。一般來說，兩個按鈕中肯定有一個擁有更高的優先級或者說用戶更希望去點擊，那麽我們會在樣式設計上進行區分。
Image title
微信的”取消”按鈕背景色選擇的是灰色，而淘寶直接讓”取消”成了一個光禿禿的文字按鈕。這樣的對比設置可以讓用戶很快找到“確認登陸”按鈕，進而完成登錄操作，提升了操作效率。
其實可以讓微信H5房卡9人牛牛青龍大廳開發(h5.fanshubbs.com)用戶進行判斷操作的組件還有開關。開關，又稱switch，也是我們很常見的一個組件，表示兩種相互對立的狀態間的切換，多用於表示功能的開啟和關閉。而一項功能的開啟可能會帶來相應的後續操作，例如你在iOS設置裏開啟了微信的“通知”功能，那麽你就需要對通知形式進行進一步的設置。而按鈕組不會出現這些後續操作，更像是一錘子買賣，這也是按鈕組和開關的一個主要的區別。
Image title
小時候，我們家的燈開關都是拉繩的。拉繩的開關有一個缺點就是停電的時候，你不知道當前的燈是開還是關，這個就很頭疼。所以開關要用好必須要讓用戶明確自己當前所處的狀態以及清楚操作後的結果。其實淘寶的這個switch用的並不是很好，因為這裏的圖形暗示並不是很清晰。
Image title
線狀和面狀
在上面我們提到了設計中的一個對比理論，這裏我們不妨來進行一個拓展。我們在設計按鈕的時候，經常會面臨著抉擇，線狀按鈕還是面狀按鈕？其實線狀還是面狀爭論不僅僅存在於按鈕，還有icon，tab和標簽等樣式。面狀和線狀代表不同的設計理念，我們都知道面狀元素在界面中更容易吸引用戶的註意力，而線狀元素強調的是輕量化。具體到按鈕，簡單來說就是面狀按鈕比線狀按鈕具有更強的可點擊性。我們可以來看一個例子：
Image title
微信裏“通訊錄”裏的icon加了一個色塊做背景，微信H5房卡9人牛牛青龍大廳開發(h5.fanshubbs.com)但是“發現”和“我”界面中的icon都沒有加色塊做背景。我嘗試著把icon的色塊背景給去掉，發現它的視覺權重立馬降了一檔。因為通訊錄這個界面中有用戶頭像，如果不加色塊背景，用戶很難註意到這四個功能。所以說塊狀元素的使用可以提升功能的轉化率。
Image title
我們再來看一個例子，喜馬拉雅Fm這個界面中的“錄音”按鈕其實看起來特別的吃藕，因為很突兀。但是設計師的目的達到了，為了提升用戶黏性，他們肯定很希望用戶在喜馬拉雅Fm裏上傳自己的錄音作品，那麽必須做到足夠的顯眼。
我們對這個界面進行高斯模糊處理，微信H5房卡9人牛牛青龍大廳開發(h5.fanshubbs.com)發現視覺焦點就在這個“錄音”按鈕上，所以“突兀”算什麽？就怕你不突兀呢！
Image title
“一個”是我個人很喜歡的應用，它的界面中除了必要的配圖，其余所有icon和按鈕使用的都是線狀元素，給用戶一種非常清新淡雅的感覺，這倒也很貼合這款產品的氣質。
Image title
對於一款產品來說，設計師的職責是非常大的，不應該像現在這樣僅限於美工層面。從整個產品的角度來說，設計師要準確的定位目標用戶群，根據目標用戶群的喜好來確定界面設計風格，具體到每個界面中設計師要考慮各個功能的優先級排布。不要怕麻煩，你能做的事情越多，你的“可替代性”就越低，所得的報酬就會越多。
選擇
喝完了雞湯，接下來我們回到正題。再來說按鈕組中有三個或者三個以上的選項的時候我們應該怎麽處理呢？
其實這種出現多個選項的按鈕組樣式我們可以看成是單選/復選功能的一個變形。只不過現在傳統的單選/復選的樣式很難滿足當前的設計需要，用戶渴望更加新穎多變的按鈕樣式。特別是選項過多的情況下，按鈕的優勢就凸顯出來了。
Image title
那麽我們再回到之前的那個問題，“按鈕組排布的時候是組合在一起好還是分開好？”對於這個問題，我是這麽認為的：分開的按鈕樣式具有更強的適應性，可以換行，也可以滑動。組合按鈕樣式一般都要全貫通，適合展示信息層級較高的功能。總結成一句話：微信H5房卡9人牛牛青龍大廳開發(h5.fanshubbs.com)如果選項在一屏的寬度中可以展示完全，那麽組合在一起和分開的區別並不是很大，但是一旦選項過多需要用戶滑動和換行才能瀏覽完的時候，分開的樣式更加適合。
Image title
單選/復選都是供用戶進行選擇操作，其實還有一個組件跟單選/復選很相似，那就是下拉列表。當選項過多時，用戶可以使用下拉菜單展示並選擇內容。下拉列表的優勢在於節省了界面空間，但是用戶想要看到全部的選項必須要點擊出下拉列表，增加了操作步驟，而且會對界面中其他內容造成遮擋。所以當你的界面元素不是很多的情況下，我的個人建議是盡量使用單選/復選按鈕。
微信H5房卡9人牛牛青龍大廳開發頁面按鈕組設計總結