光音移動設(shè)計規(guī)范 — 表單類

表單在產(chǎn)品中主要負責數(shù)據(jù)采集功能。表單類組件指的是需要用戶手動填寫或者選擇信息的組件。

光音移動端設(shè)計規(guī)范針對表單類組件，目前收錄了8個（后續(xù)會增加），分別為：

1、開關(guān)

2、單選和復選

3、步進器

4、滑塊

5、單文本框

6、數(shù)字輸入框

7、多行文本框

8、選擇器

開關(guān)

定義：

開關(guān)組件是在仿照物理開關(guān)，讓用戶打開或關(guān)閉某個項目。

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

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

用途：

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

1、基礎(chǔ)類：

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

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

交互說明：

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

2、擴展類：

擴展類常見的有三類：

• 第一類：開啟后出現(xiàn)解釋，方便用戶理解開關(guān)開啟或者關(guān)閉所代表的含義。

• 第二類：帶文字開關(guān)，解釋當前開關(guān)狀態(tài)，避免用戶對開關(guān)狀態(tài)理解錯誤。

• 第三類：帶icon，通過icon的隱喻，進一步解釋當前開關(guān)的狀態(tài)。

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

單選和復選

定義：

單選：單選用來表示單元格已被選中，通常在2個或2個以上的選項中進行單個選擇時用到，當選項超過5個時，建議使用選擇器。

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

用途：

單選：用于對一組選項中選擇其中一項。

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

1、基礎(chǔ)類

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

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

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

交互說明：

• 1.在列表上進行多選時，支持在多選項框上縱向滑動來進行批量選擇或取消選擇；

• 2.在網(wǎng)格視圖上進行選擇時，支持橫向滑動來進行批量選擇或取消選擇

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

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

2、擴展類

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

3、復合類

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

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

步進器

定義：

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

用途：

用戶可通過步進器對數(shù)值進行設(shè)置。

1、基礎(chǔ)類：

最簡單的步進器，可對數(shù)量增加或刪除。

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

交互說明：

• 1. 點擊加減按鈕進行相應(yīng)的增減

• 2. 一般存在上限和下限值，當達到上限或者下限時，加減存在不可點擊狀態(tài)

• 3. 有些進步器支持點擊數(shù)字區(qū)域直接填寫數(shù)量

2、強化類：

為使操作更為明顯，進步器的加減會有顏色。

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

滑塊

定義：

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

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

用途：

• 1.當用戶需要在數(shù)值區(qū)間/自定義區(qū)間內(nèi)進行選擇時，可為連續(xù)或間續(xù)值。

• 2.調(diào)整反映強度級別（如音量、亮度或色彩飽和度）的設(shè)置組件。

1、基礎(chǔ)類：

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

交互說明：

手指長按，滑動滑塊設(shè)置數(shù)值進行控制。

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

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

3、擴展類-上下滑塊

圖片查看時上下滑動，起到快速定位的作用。

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

4、擴展類-驗證碼滑塊

安全驗證，長按滑動完成拼圖。

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

單文本框

定義：

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

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

用途：

• 1.通過鍵盤輸入內(nèi)容

• 2.用戶需要輸入文本字符時

1、基礎(chǔ)類

一般由內(nèi)容標題+輸入引導提示語組成。

當用戶輸入內(nèi)容時，直接將引導提示語替換為內(nèi)容本身。

2、驗證碼類

驗證碼格式樣式。

構(gòu)成內(nèi)容包含基本要素，形式上更多變。

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

數(shù)字輸入框

定義：

用于輸入數(shù)字內(nèi)容，一般情況下，輸入框僅限于輸入數(shù)字內(nèi)容，否則需要進行錯誤提示。

用途：

僅提供數(shù)字輸入的輸入框。

1、驗證碼類：

驗證碼類輸入，通過點擊發(fā)送驗證碼按鈕觸發(fā)，一般當手機號不可使用時，可能會存在驗證碼無法發(fā)送的情況，此時為不可點狀態(tài)即可。

目前越來越多的手機驗證通過分步設(shè)計，以此減少界面的復雜度，提升完成率。用戶輸入手機號后，進入輸入驗證碼新頁面，如下圖所示：

2、手機號/證件號等號碼類輸入號碼，并伴隨號碼格式檢驗。一般還用于轉(zhuǎn)賬金額的輸入等場景。關(guān)鍵信息及標注：

 

多文本框

定義：

提供換行功能，用于輸入多段落文字內(nèi)容。

 

1、基礎(chǔ)類

一般由內(nèi)容標題+輸入引導組成。

當用戶輸入內(nèi)容時，直接將引導替換為內(nèi)容本身。

需要輸入內(nèi)容較多時，可能會有字數(shù)限制提示。

區(qū)別于傳統(tǒng)的左右結(jié)構(gòu)，內(nèi)容標題和輸入內(nèi)容也可以上下結(jié)構(gòu)展示，如下圖所示：

 

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

 

選擇器

定義：

選擇器是一個可滾動視圖，用于選取列表項中的值。通常出現(xiàn)在屏幕的底部，高度小于屏幕。

 

用途：

• 1.臨時浮層，用戶出發(fā)選擇操作時出現(xiàn)。

• 2.從眾多選項中選項中選擇一個選項。

 

1、單類型信息選擇類

一般由選擇框觸發(fā)，彈層的形式建立可滾動視圖，并在視圖中選取值。

交互說明：

點擊確定，選項被選中，點擊遮罩選擇框消失。

 

2、日期選擇類

可選擇日期和時間的選擇器，如下圖所示：

可選擇具體時間段，默認停留在開始時間項，點擊確定，切換到結(jié)束時間項。

3、拓展類

基于業(yè)務(wù)需求，擴展出復雜的選擇器樣式，如下圖所示：

 

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

 

結(jié)語

以上為表單類常見的8個組件，后續(xù)會繼續(xù)增加表單類組件，完整設(shè)計規(guī)范源文件正在后期整理中，預計下周一發(fā)，敬請期待。

 

原文地址：Echo的設(shè)計筆記（公眾號）

作者：三牛