一位朋友問了我一個(gè)問題。當(dāng)按鈕組被排列時(shí)，它們被組合或分開。這個(gè)問題當(dāng)時(shí)被問到，因?yàn)槲抑皬奈纯紤]過這個(gè)問題。為了回答這個(gè)問題，我簡(jiǎn)單總結(jié)了按鈕組的使用方法，希望對(duì)大家有所幫助。

　　什么是按鈕組?

顧名思義，按鈕組指的是排列在一起的兩個(gè)或多個(gè)按鈕。為了理解按鈕組的使用，我們首先考慮一個(gè)問題：我們何時(shí)使用按鈕組？

從按鈕組的樣式中，我們可以看到公共按鈕組供用戶判斷（兩個(gè)選項(xiàng)）或選擇（兩個(gè)或更多選項(xiàng)）。

　判斷

首先，我們判斷只有兩個(gè)按鈕。一般來說，兩個(gè)按鈕中的一個(gè)必須具有更高的優(yōu)先級(jí)或者用戶更喜歡點(diǎn)擊，然后我們將區(qū)分樣式設(shè)計(jì)。

微信“取消”按鈕的背景顏色為灰色，淘寶直接將“取消”按鈕設(shè)為裸露。此對(duì)比度設(shè)置允許用戶快速找到“確認(rèn)登錄”按鈕，從而完成登錄操作并提高操作效率。

實(shí)際上，允許用戶做出判斷的組件具有切換功能。該交換機(jī)也稱為交換機(jī)，也是一種非常常見的組件。它表示兩個(gè)相反狀態(tài)之間的切換，主要用于指示功能的打開和關(guān)閉。功能的打開可能會(huì)導(dǎo)致后續(xù)操作。例如，如果您在iOS設(shè)置中啟用了微信的“通知”功能，則需要進(jìn)一步設(shè)置通知表單。按鈕組不會(huì)出現(xiàn)這些后續(xù)操作，更像是錘子銷售，這也是按鈕組和開關(guān)之間的主要區(qū)別。

當(dāng)我年輕的時(shí)候，我們家的燈開關(guān)都被拉了。拉繩開關(guān)的一個(gè)缺點(diǎn)是，當(dāng)電源關(guān)閉時(shí)，您不知道當(dāng)前燈是打開還是關(guān)閉。這很頭疼。因此，應(yīng)該很好地使用開關(guān)，并且必須使用戶在清除操作之后知道當(dāng)前狀態(tài)和結(jié)果。事實(shí)上，淘寶的這種轉(zhuǎn)換并不是很好，因?yàn)檫@里的圖形提示不是很清楚。

線狀和面狀

在上面我們提到了設(shè)計(jì)中的比較理論，這里我們不妨擴(kuò)展一下。在設(shè)計(jì)按鈕時(shí)，我們經(jīng)常會(huì)遇到選擇，線性按鈕或面部按鈕？

實(shí)際上，線性或平面參數(shù)不僅在按鈕中，而且在圖標(biāo)，制表符和標(biāo)簽等樣式中。平面和線性形狀代表不同的設(shè)計(jì)概念。我們都知道平面元素更有可能在界面中吸引用戶的注意力，而線性元素則強(qiáng)調(diào)輕量級(jí)。特定于按鈕，只需面部按鈕比線按鈕更易于點(diǎn)擊。我們可以看一個(gè)例子：

WeChat中“聯(lián)系人”中的圖標(biāo)添加了一個(gè)顏色塊作為背景，但“發(fā)現(xiàn)”和“我”界面中的圖標(biāo)沒有背景顏色塊。我試圖刪除圖標(biāo)顏色塊的背景，發(fā)現(xiàn)其視覺重量立即降低。由于地址簿界面中有用戶頭像，如果不添加顏色塊背景，用戶很難注意到這四個(gè)功能。因此塊元素的使用可以提高函數(shù)的轉(zhuǎn)換率。

我們來看一個(gè)例子。喜馬拉雅Fm界面中的“錄制”按鈕實(shí)際上看起來像是一頓特別的餐，因?yàn)樗浅擂?。但是，達(dá)到了設(shè)計(jì)師的目的。為了增強(qiáng)用戶的粘性，他們絕對(duì)希望用戶可以在喜馬拉雅Fm上傳他們自己的錄音，因此它們必須足夠引人注目。

我們?cè)谶@個(gè)界面上進(jìn)行了高斯模糊，發(fā)現(xiàn)視覺焦點(diǎn)在于這個(gè)“錄音”按鈕，那么什么是“參數(shù)”？我擔(dān)心你不尷尬！

“One”是我個(gè)人喜歡的應(yīng)用程序。除了必要的地圖外，界面中的所有圖標(biāo)和按鈕都是線性元素，給用戶帶來非常清新優(yōu)雅的感覺，這也非常合適。這款產(chǎn)品的氣質(zhì)。

對(duì)于產(chǎn)品而言，設(shè)計(jì)師的責(zé)任非常大，不應(yīng)僅限于現(xiàn)在的藝術(shù)水平。從整個(gè)產(chǎn)品的角度來看，設(shè)計(jì)者必須準(zhǔn)確地定位目標(biāo)用戶組，并根據(jù)目標(biāo)用戶組的偏好確定界面設(shè)計(jì)風(fēng)格。在每個(gè)界面中，設(shè)計(jì)者應(yīng)考慮每個(gè)功能的優(yōu)先級(jí)排列。不要害怕麻煩。你可以做的事情越多，你的“可替代性”越低，你得到的就越多。

　　選擇

喝完雞湯后，讓我們回到主題。當(dāng)按鈕組中有三個(gè)或更多選項(xiàng)時(shí)，我們?cè)撛趺崔k？

實(shí)際上，這個(gè)具有多個(gè)選項(xiàng)的按鈕組樣式可以看作是單個(gè)或檢查功能的變體。但是，傳統(tǒng)的單選或退房風(fēng)格很難滿足當(dāng)前的設(shè)計(jì)需求，用戶渴望更多創(chuàng)新和多樣化的按鈕風(fēng)格。特別是在選項(xiàng)太多的情況下，按鈕的優(yōu)點(diǎn)突出顯示。

然后讓我們回到上一個(gè)問題：按鈕組排列是組合還是分開？

對(duì)于這個(gè)問題，我想是這樣的：?jiǎn)为?dú)的按鈕樣式更具適應(yīng)性，可以包裝或刷卡。組合按鈕樣式通常是完全遍歷的，適合顯示具有更高信息級(jí)別的功能。

用一句話概括：如果選項(xiàng)可以在屏幕的寬度上顯示，那么組合與分離之間的差異不是很大，但是一旦選項(xiàng)太多，用戶就需要滑動(dòng)并換行查看，單獨(dú)的風(fēng)格更適合。

單選和支票選擇均供用戶選擇。實(shí)際上，有一個(gè)類似于單選和檢查選擇的組件，即下拉列表。當(dāng)選項(xiàng)太多時(shí)，用戶可以使用下拉菜單顯示和選擇內(nèi)容。下拉列表的優(yōu)點(diǎn)是可以節(jié)省界面空間，但是想要查看所有選項(xiàng)的用戶必須單擊下拉列表，添加步驟以及屏蔽界面中的其他內(nèi)容。

因此，當(dāng)你的界面元素不多時(shí)，我個(gè)人的建議是盡可能使用收音機(jī)和檢查按鈕。

　總結(jié)

以上是我對(duì)按鈕組使用的總結(jié)，希望每個(gè)人都可以從中獲得一些東西。

« 移動(dòng)社交電子商務(wù)入門首選點(diǎn)客戶永久免費(fèi)微商店即將華麗升級(jí) | “青城”和“百川”雙重計(jì)劃鞏固物流基礎(chǔ)蘇寧智慧物流開拓新高峰 »