光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類

2020/8/11 22:43:54來(lái)源：本站原創(chuàng)熱度：

表單在產(chǎn)品中主要負(fù)責(zé)數(shù)據(jù)采集功能。表單類組件指的是需要用戶手動(dòng)填寫(xiě)或者選擇信息的組件。
光音移動(dòng)端設(shè)計(jì)規(guī)范針對(duì)表單類組件，目前收錄了8個(gè)（后續(xù)會(huì)增加），分別為：

1、開(kāi)關(guān)

2、單選和復(fù)選

3、步進(jìn)器

4、滑塊

5、單文本框

6、數(shù)字輸入框

7、多行文本框

8、選擇器

開(kāi)關(guān)

定義：

開(kāi)關(guān)組件是在仿照物理開(kāi)關(guān)，讓用戶打開(kāi)或關(guān)閉某個(gè)項(xiàng)目。

一般是用戶的設(shè)置項(xiàng)，通常和列表相結(jié)合，放置在每個(gè)單元格的右側(cè)，同時(shí)格內(nèi)部允許再放置其他操作按鈕。

開(kāi)關(guān)應(yīng)該有開(kāi)和關(guān)兩種狀態(tài)，設(shè)計(jì)按鈕時(shí)要避免狀態(tài)和操作的歧義。

用途：

表示兩種相互對(duì)立的狀態(tài)間的切換，例如開(kāi)/關(guān)、是/否狀態(tài)。

1、基礎(chǔ)類：

App最常見(jiàn)的開(kāi)關(guān)樣式，當(dāng)開(kāi)關(guān)開(kāi)啟時(shí)，所展示的開(kāi)關(guān)顏色和產(chǎn)品的主色保持一致。

開(kāi)關(guān)存在三個(gè)狀態(tài)，分別為：開(kāi)啟、關(guān)閉和禁用狀態(tài)（用戶點(diǎn)擊無(wú)交互事件）。

交互說(shuō)明：

根據(jù)業(yè)務(wù)需要，需自定義選項(xiàng)默認(rèn)開(kāi)啟還是關(guān)閉。點(diǎn)擊開(kāi)關(guān)按鈕，進(jìn)行開(kāi)關(guān)的兩種狀態(tài)切換。

2、擴(kuò)展類：

擴(kuò)展類常見(jiàn)的有三類：

第一類：開(kāi)啟后出現(xiàn)解釋，方便用戶理解開(kāi)關(guān)開(kāi)啟或者關(guān)閉所代表的含義。
第二類：帶文字開(kāi)關(guān)，解釋當(dāng)前開(kāi)關(guān)狀態(tài)，避免用戶對(duì)開(kāi)關(guān)狀態(tài)理解錯(cuò)誤。
第三類：帶icon，通過(guò)icon的隱喻，進(jìn)一步解釋當(dāng)前開(kāi)關(guān)的狀態(tài)。

關(guān)鍵信息及標(biāo)注：

單選和復(fù)選

定義：

單選：單選用來(lái)表示單元格已被選中，通常在2個(gè)或2個(gè)以上的選項(xiàng)中進(jìn)行單個(gè)選擇時(shí)用到，當(dāng)選項(xiàng)超過(guò)5個(gè)時(shí)，建議使用選擇器。

復(fù)選：多選項(xiàng)中有選中態(tài)、未選中態(tài)、禁用態(tài)。一般放置在可選信息左側(cè)（圖片、視頻等以宮格形式表現(xiàn)的選擇頁(yè)面除外）

用途：

單選：用于對(duì)一組選項(xiàng)中選擇其中一項(xiàng)。

多選：1.在一組可選項(xiàng)中進(jìn)行多項(xiàng)選擇時(shí)；2.單獨(dú)使用時(shí)可以表示是/否狀態(tài)之間的切換。

1、基礎(chǔ)類

單選組件，文字在左，單選在右邊，如下圖所示：

交互說(shuō)明：點(diǎn)擊整個(gè)條目選中或取消選中，并顯示對(duì)應(yīng)狀態(tài)的標(biāo)記，未選中的不做任何標(biāo)記，單選標(biāo)記位于單元格右側(cè)。

復(fù)選組件，文字在左，復(fù)選在右邊，如下圖所示：

交互說(shuō)明：

1.在列表上進(jìn)行多選時(shí)，支持在多選項(xiàng)框上縱向滑動(dòng)來(lái)進(jìn)行批量選擇或取消選擇；
2.在網(wǎng)格視圖上進(jìn)行選擇時(shí)，支持橫向滑動(dòng)來(lái)進(jìn)行批量選擇或取消選擇

單選組件，文字和單選組件均在左側(cè)，其中單選組件在文字前面，如下圖所示：

多選組件，文字和復(fù)選組件均在左側(cè)，其中復(fù)選組件在文字前面，如下圖所示：

2、擴(kuò)展類

圖片，視頻等以宮格的形式出現(xiàn)，用于單選or多選。

3、復(fù)合類

用于選項(xiàng)比較復(fù)雜，選擇層級(jí)較深的場(chǎng)景，選項(xiàng)之間存在父子層級(jí)關(guān)系，當(dāng)未全部選中，則父級(jí)為半選狀態(tài)，如下圖所示：

關(guān)鍵信息及標(biāo)注：

步進(jìn)器

定義：

用于增加或減少數(shù)量的控件。

用途：

用戶可通過(guò)步進(jìn)器對(duì)數(shù)值進(jìn)行設(shè)置。

1、基礎(chǔ)類：

最簡(jiǎn)單的步進(jìn)器，可對(duì)數(shù)量增加或刪除。

界面UI設(shè)計(jì)中的進(jìn)步器，越簡(jiǎn)單越好。故盡量減少對(duì)步進(jìn)器的改動(dòng)，對(duì)進(jìn)步器外觀更改過(guò)多，用戶可能會(huì)不清楚該組件功能。

交互說(shuō)明：

1. 點(diǎn)擊加減按鈕進(jìn)行相應(yīng)的增減
2. 一般存在上限和下限值，當(dāng)達(dá)到上限或者下限時(shí)，加減存在不可點(diǎn)擊狀態(tài)
3. 有些進(jìn)步器支持點(diǎn)擊數(shù)字區(qū)域直接填寫(xiě)數(shù)量

2、強(qiáng)化類：

為使操作更為明顯，進(jìn)步器的加減會(huì)有顏色。

關(guān)鍵信息及標(biāo)注：

滑塊

定義：

幫助用戶選擇某個(gè)特定值（或值范圍）。

通常，用戶通過(guò)讀取滑塊上的標(biāo)簽就能獲取有關(guān)值的信息。同時(shí)，將可視化數(shù)據(jù)連接到滑塊還可以創(chuàng)建更佳的用戶體驗(yàn)。

用途：

1.當(dāng)用戶需要在數(shù)值區(qū)間/自定義區(qū)間內(nèi)進(jìn)行選擇時(shí)，可為連續(xù)或間續(xù)值。
2.調(diào)整反映強(qiáng)度級(jí)別（如音量、亮度或色彩飽和度）的設(shè)置組件。

1、基礎(chǔ)類：

最為簡(jiǎn)單的滑塊樣式，用戶長(zhǎng)按拖動(dòng)即可進(jìn)行設(shè)置數(shù)值，存在常態(tài)和禁用態(tài)。

交互說(shuō)明：

手指長(zhǎng)按，滑動(dòng)滑塊設(shè)置數(shù)值進(jìn)行控制。

2、擴(kuò)展類-數(shù)字提醒

出現(xiàn)對(duì)應(yīng)數(shù)值展示。左右滑動(dòng)滑塊時(shí)，數(shù)值對(duì)應(yīng)進(jìn)行改變。

3、擴(kuò)展類-上下滑塊

圖片查看時(shí)上下滑動(dòng)，起到快速定位的作用。

擴(kuò)展類-雙向滑塊，左邊滑，右邊滑，雙向滑。樣式存在起始狀態(tài)、按壓狀態(tài)、不可滑動(dòng)態(tài)。

4、擴(kuò)展類-驗(yàn)證碼滑塊

安全驗(yàn)證，長(zhǎng)按滑動(dòng)完成拼圖。

關(guān)鍵信息及標(biāo)注：

單文本框

定義：

用于用戶文本輸入，并以字符串的格式提交到數(shù)據(jù)庫(kù)。

基本要素為內(nèi)容標(biāo)題+輸入?yún)^(qū)域，還可能會(huì)有內(nèi)容標(biāo)識(shí)/取消輸入icon/當(dāng)前輸入狀態(tài)/輸入內(nèi)容反饋等部分構(gòu)成，可依據(jù)場(chǎng)景對(duì)內(nèi)容進(jìn)行增刪。

用途：