設計總結:移動端單選、復選控件

0 評論 15467 瀏覽 43 收藏 8 分鐘

Web中的單選和復選我們見得比較多,但是在移動端中,單選和復選控件樣式較多,需要結合不同的使用場景去選擇使用。下面我將總結一下移動端中的單選和復選控件。

首先我們看看官方文件給的設計規范:

ios 和 Android 中的選擇控件設計規范

ios

ios官方文件中沒有具體說單選和復選控件,只能從一些包含選擇的空間中來:

(1)Pickers(選擇器)

選擇器是包括一個或多個不同值的可滾動列表,每個值都具有單個選定值,常顯示在屏幕底部或彈出窗口中。

使用選擇器需要注意的有:

  • 使用可預測和符合邏輯順序的值;例如使用按字母順序排列的國家/地區列表;
  • 避免通過打開新的界面來顯示選擇器;
  • 如果數值或選項較多,請使用列表而不是選擇器。選擇器的尺寸較小,想要快速找到想要的數值需要多次滑動,而列表的滑動范圍更大,可以更快地找到想要的數值或選項。

(2)選擇列表

使用列表的形式簡潔干凈,能高效地顯示大量或少量信息。

Android

(1)單選

  • 使用單選按鈕選擇單個項目
  • 如果可以折疊可用選項,請考慮使用下拉菜單,因為它占用的空間更少。

(2)復選

  • 使用復選框選擇列表中的多個項目
  • 再次點擊選項可以取消選擇

對于有層級關系的復選選項:

  • 選中父復選框后,將選中所有子復選框

  • 如果未選中父復選框,則取消選中所有子復選框

  • 如果選中某些(但不是全部)子復選框,則父復選框將變為不確定復選框

要注意的是:單選和復選控件樣式,不要混淆。也不要在單選的情況下使用復選按鈕。

左:復選;右:單選

下面,我們看實際運用中,單選和復選控件是如何使用的

實際運用

單選控件總結了四種樣式:按鈕式、選中打點、列表勾選和選擇器。

單選

(1)單選-按鈕式

  • 選項一般是相同類型的,例如淘寶選擇商品尺寸、屬性等選項內容少,選項數量較少;
  • 彈窗內容清晰明了,選擇區域很清楚,但選擇區域較??;
  • 不適合選項較多、選項文案較長的場景。

(2)單選-選中打點

  • 更多是安卓上的操作控件,適用于單選,選項不是同一類型的情況;
  • 目測選擇區域較小,但實際上只要點擊與文字同一排的位置即可選擇。

(3)單選-列表勾選

  • 彈窗更多出現在安卓系統中,相比選中打點的設計,給用戶的引導性更強,目測選擇區域更大。
  • 因為??離文案較遠,所以選中的選項要突出。

  • Ios系統中也使用列表勾選,但大部分都是跳轉一個新界面;
  • 選擇之后直接更改,沒有確認鍵;
  • 選項字數可以較長,選項可以較多。

(4)單選-選擇器

  • 更多出現在ios系統中,一般從出現在界面底部;
  • 列表式看起來選項更清晰;
  • 一般在表單填寫中出現,選項較多,可滑動。

多選

多選形式較單一:

  • 一般是勾選加外框的形狀,避免與單選按鈕混淆;
  • 彈窗選擇中要盡量避免只使用單個操作按鈕的情況,會讓用戶產生疑惑,不知道如何關閉彈窗。

總結

這篇文章中總結了單選和復選控件使用規范以及實際場景中的樣式,總的來說,不論是使用哪種控件,首先看官方文件,再去搜索相關的資料,查看市面上產品的使用情況,根據產品的特點和用戶使用場景做選擇和設計。平時也要注意多積累,留心每個產品中的細節設計。

參考:

  1. ios 設計規范:https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/#//apple_ref/doc/uid/TP40006556-CH14-SW2
  2. MATERIAL DESIGN:https://material.io/design/

 

本文由 @?? 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!