設計總結:移動端單選、復選控件
Web中的單選和復選我們見得比較多,但是在移動端中,單選和復選控件樣式較多,需要結合不同的使用場景去選擇使用。下面我將總結一下移動端中的單選和復選控件。
首先我們看看官方文件給的設計規范:
ios 和 Android 中的選擇控件設計規范
ios
ios官方文件中沒有具體說單選和復選控件,只能從一些包含選擇的空間中來:
(1)Pickers(選擇器)
選擇器是包括一個或多個不同值的可滾動列表,每個值都具有單個選定值,常顯示在屏幕底部或彈出窗口中。
使用選擇器需要注意的有:
- 使用可預測和符合邏輯順序的值;例如使用按字母順序排列的國家/地區列表;
- 避免通過打開新的界面來顯示選擇器;
- 如果數值或選項較多,請使用列表而不是選擇器。選擇器的尺寸較小,想要快速找到想要的數值需要多次滑動,而列表的滑動范圍更大,可以更快地找到想要的數值或選項。
(2)選擇列表
使用列表的形式簡潔干凈,能高效地顯示大量或少量信息。
Android
(1)單選
- 使用單選按鈕選擇單個項目
- 如果可以折疊可用選項,請考慮使用下拉菜單,因為它占用的空間更少。
(2)復選
- 使用復選框選擇列表中的多個項目
- 再次點擊選項可以取消選擇
對于有層級關系的復選選項:
- 選中父復選框后,將選中所有子復選框
- 如果未選中父復選框,則取消選中所有子復選框
- 如果選中某些(但不是全部)子復選框,則父復選框將變為不確定復選框
要注意的是:單選和復選控件樣式,不要混淆。也不要在單選的情況下使用復選按鈕。
左:復選;右:單選
下面,我們看實際運用中,單選和復選控件是如何使用的
實際運用
單選控件總結了四種樣式:按鈕式、選中打點、列表勾選和選擇器。
單選
(1)單選-按鈕式
- 選項一般是相同類型的,例如淘寶選擇商品尺寸、屬性等選項內容少,選項數量較少;
- 彈窗內容清晰明了,選擇區域很清楚,但選擇區域較??;
- 不適合選項較多、選項文案較長的場景。
(2)單選-選中打點
- 更多是安卓上的操作控件,適用于單選,選項不是同一類型的情況;
- 目測選擇區域較小,但實際上只要點擊與文字同一排的位置即可選擇。
(3)單選-列表勾選
- 彈窗更多出現在安卓系統中,相比選中打點的設計,給用戶的引導性更強,目測選擇區域更大。
- 因為??離文案較遠,所以選中的選項要突出。
- Ios系統中也使用列表勾選,但大部分都是跳轉一個新界面;
- 選擇之后直接更改,沒有確認鍵;
- 選項字數可以較長,選項可以較多。
(4)單選-選擇器
- 更多出現在ios系統中,一般從出現在界面底部;
- 列表式看起來選項更清晰;
- 一般在表單填寫中出現,選項較多,可滑動。
多選
多選形式較單一:
- 一般是勾選加外框的形狀,避免與單選按鈕混淆;
- 彈窗選擇中要盡量避免只使用單個操作按鈕的情況,會讓用戶產生疑惑,不知道如何關閉彈窗。
總結
這篇文章中總結了單選和復選控件使用規范以及實際場景中的樣式,總的來說,不論是使用哪種控件,首先看官方文件,再去搜索相關的資料,查看市面上產品的使用情況,根據產品的特點和用戶使用場景做選擇和設計。平時也要注意多積累,留心每個產品中的細節設計。
參考:
- ios 設計規范:https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/#//apple_ref/doc/uid/TP40006556-CH14-SW2
- MATERIAL DESIGN:https://material.io/design/
本文由 @?? 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
- 目前還沒評論,等你發揮!