當(dāng)前位置:圖趣網(wǎng)(Tuquu) > 網(wǎng)頁設(shè)計(jì)教程 > 移動(dòng)前端 > 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類

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

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

光音移動(dòng)端設(shè)計(jì)規(guī)范針對(duì)表單類組件,目前收錄了8個(gè)(后續(xù)會(huì)增加),分別為:

1、開關(guān)

2、單選和復(fù)選

3、步進(jìn)器

4、滑塊

5、單文本框

6、數(shù)字輸入框

7、多行文本框

8、選擇器

 

開關(guān)

定義:

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

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

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

 

用途:

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

1、基礎(chǔ)類:

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

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

 

交互說明:

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

2、擴(kuò)展類:

擴(kuò)展類常見的有三類:

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

  • 第二類:帶文字開關(guān),解釋當(dāng)前開關(guān)狀態(tài),避免用戶對(duì)開關(guān)狀態(tài)理解錯(cuò)誤。

  • 第三類:帶icon,通過icon的隱喻,進(jìn)一步解釋當(dāng)前開關(guān)的狀態(tài)。

 

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

 

單選和復(fù)選

定義:

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

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

 

用途:

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

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

1、基礎(chǔ)類

單選組件,文字在左,單選在右邊,如下圖所示:

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

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

交互說明:

  • 1.在列表上進(jìn)行多選時(shí),支持在多選項(xiàng)框上縱向滑動(dòng)來進(jìn)行批量選擇或取消選擇;

  • 2.在網(wǎng)格視圖上進(jìn)行選擇時(shí),支持橫向滑動(dòng)來進(jìn)行批量選擇或取消選擇

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

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

 

2、擴(kuò)展類

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

 

3、復(fù)合類

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

 

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

 

步進(jìn)器

定義:

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

 

用途:

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

1、基礎(chǔ)類:

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

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

交互說明:

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

  • 2. 一般存在上限和下限值,當(dāng)達(dá)到上限或者下限時(shí),加減存在不可點(diǎn)擊狀態(tài)

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

 

2、強(qiáng)化類:

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

 

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

 

滑塊

定義:

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

通常,用戶通過讀取滑塊上的標(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ǔ)類:

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

交互說明:

手指長按,滑動(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)證,長按滑動(dòng)完成拼圖。

 

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

 

單文本框

定義:

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

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

 

用途:

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

  • 2.用戶需要輸入文本字符時(shí)

 

1、基礎(chǔ)類

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

當(dāng)用戶輸入內(nèi)容時(shí),直接將引導(dǎo)提示語替換為內(nèi)容本身。


對(duì)于需要驗(yàn)證的文本內(nèi)容,用戶光標(biāo)停留在其他位置時(shí),進(jìn)行驗(yàn)證,并通過toast的形式提醒用戶。


 

2、驗(yàn)證碼類

驗(yàn)證碼格式樣式。


3、變種類


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

 

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

 

數(shù)字輸入框

定義:

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

 

用途:

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

 

1、驗(yàn)證碼類:

驗(yàn)證碼類輸入,通過點(diǎn)擊發(fā)送驗(yàn)證碼按鈕觸發(fā),一般當(dāng)手機(jī)號(hào)不可使用時(shí),可能會(huì)存在驗(yàn)證碼無法發(fā)送的情況,此時(shí)為不可點(diǎn)狀態(tài)即可。

目前越來越多的手機(jī)驗(yàn)證通過分步設(shè)計(jì),以此減少界面的復(fù)雜度,提升完成率。用戶輸入手機(jī)號(hào)后,進(jìn)入輸入驗(yàn)證碼新頁面,如下圖所示:


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


 

多文本框

定義:

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

 

1、基礎(chǔ)類

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

當(dāng)用戶輸入內(nèi)容時(shí),直接將引導(dǎo)替換為內(nèi)容本身。

需要輸入內(nèi)容較多時(shí),可能會(huì)有字?jǐn)?shù)限制提示。

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

 

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

 

選擇器

定義:

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

 

用途:

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

  • 2.從眾多選項(xiàng)中選項(xiàng)中選擇一個(gè)選項(xiàng)。

 

1、單類型信息選擇類

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

交互說明:

點(diǎn)擊確定,選項(xiàng)被選中,點(diǎn)擊遮罩選擇框消失。

 

2、日期選擇類

可選擇日期和時(shí)間的選擇器,如下圖所示:

可選擇具體時(shí)間段,默認(rèn)停留在開始時(shí)間項(xiàng),點(diǎn)擊確定,切換到結(jié)束時(shí)間項(xiàng)。

3、拓展類

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

 

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

 

結(jié)語

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

 


原文地址:Echo的設(shè)計(jì)筆記(公眾號(hào))

作者:三牛


[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/wd4208.html
ios系統(tǒng)和某些移動(dòng)端background-attachment:fixed不兼容
UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適配指南 (更新至iPhone15)
圖趣網(wǎng)微信
建議反饋
×