国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導(dǎo)語：小小的表單，摻雜了復(fù)雜的業(yè)務(wù)邏輯，隱藏著許多細(xì)節(jié)，本文介紹了“什么是表單、表單組件元素、表單承載體、表單設(shè)計(jì)模式、表單設(shè)計(jì)原則”這五個(gè)內(nèi)容，對每個(gè)內(nèi)容都進(jìn)行了詳細(xì)的解讀，希望對你有所啟發(fā)。

關(guān)鍵詞：表單、表單內(nèi)組件、承載體、設(shè)計(jì)模式、設(shè)計(jì)原則

在我們B端，表單是極其常見的界面，每個(gè)設(shè)計(jì)師每周都會(huì)設(shè)計(jì)至少2-3個(gè)表單，而一個(gè)業(yè)務(wù)邏輯稍微復(fù)雜的表單，至少反復(fù)設(shè)計(jì)-修改-評審，需要2-3天。

小小的表單中，由于摻雜了業(yè)務(wù)的邏輯，隱藏著太多的細(xì)節(jié)，一不小心，我們就有可能遺漏細(xì)節(jié)。

今天，知果根據(jù)自身經(jīng)驗(yàn)，整理了表單設(shè)計(jì)的一些要點(diǎn)，和你們分享，期望對你們有所啟發(fā)。

本文將從以下5部分展開：

1. 什么是表單
2. 表單組件元素
3. 表單承載體
4. 表單設(shè)計(jì)模式
5. 表單設(shè)計(jì)原則

搬好小板凳，我們開始吧~

一、什么是表單

表單是用戶錄入數(shù)據(jù)和系統(tǒng)采集數(shù)據(jù)的重要方式，用戶通過表單與系統(tǒng)進(jìn)行交互。

表單由表單標(biāo)題、表單域、表單標(biāo)簽、表單按鈕組成。

1. 表單標(biāo)題

具有提示作用，告知用戶當(dāng)前表單是用來采集哪些信息的。

2. 表單域

由文本框、復(fù)選框、單選框、下拉選擇器等組件組成，通過不同類型的組件組合形成收集數(shù)據(jù)的方式。

3. 表單標(biāo)簽

是用來告知用戶每個(gè)表單項(xiàng)要輸入什么內(nèi)容的文字，表達(dá)清晰的表單標(biāo)簽，可以提升用戶的操作效率。

4. 表單按鈕

包括提交、取消、繼續(xù)添加下一條等，是對表單整體的操作。

當(dāng)然，以上只是通用表單會(huì)涉及到的內(nèi)容要素，一些復(fù)雜的表單還會(huì)有分組模塊、描述模塊等的信息，通過更豐富的元素，來為用戶創(chuàng)造一個(gè)更高效的表單錄入環(huán)境。

二、表單組件元素

基于業(yè)務(wù)的不同需求，不同的表單由不同的組件元素組成，但大體上可以分為「簡單表單」和「高階表單」。

高階表單內(nèi)含簡單表單的組件元素，是父與子的關(guān)系。

1. 簡單表單

簡單表單會(huì)有輸入框、文本框、復(fù)合輸入框、樹選擇器、單選框、時(shí)間選擇器等組成。

（1）輸入框

輸入較少的字符總數(shù)，使用單行的文本框。

（2） 文本框

輸入較多的字符總數(shù)，或一段略長篇文本（幾百字左右），但不允許用戶調(diào)整高度，使用多行的文本框。

（3）文本域

輸入較多的字符總數(shù)，或一段長篇文本，但允許用戶調(diào)整高度，使用多行的文本域。本文域比文本框的靈活度會(huì)更高。

（4）復(fù)合輸入框

輸入內(nèi)容需帶單位，或可以選擇單位，使用復(fù)合輸入框。

（5）數(shù)字輸入框

對用戶輸入的內(nèi)容有規(guī)定，比如是數(shù)字，使用只輸入數(shù)字的數(shù)字輸入框。

（6）卡號

輸入內(nèi)容為銀行卡卡號。

（7）身份證

輸入內(nèi)容為身份證號碼。

（8） 金額框

輸入內(nèi)容為金額。

（9） 金額框+回顯

輸入內(nèi)容為金額，且有大寫回顯。

（10）單/多選選擇器

允許用戶從列表中選擇一個(gè)或多個(gè)選項(xiàng)，且選項(xiàng)數(shù)量多于5項(xiàng)，使用單/多選選擇器。建議選項(xiàng)按照業(yè)務(wù)需求進(jìn)行排序，使用戶可以快速找到，并盡量讓內(nèi)容顯示完整。

（11）多選選擇器（選項(xiàng)連續(xù)展示）

輸入框內(nèi)選項(xiàng)以逗號形式分割，內(nèi)容被全選后，可delete一次性刪除。

（12）多選選擇器（選項(xiàng)獨(dú)立展示）

輸入框內(nèi)選項(xiàng)以標(biāo)簽形式存在，只能單獨(dú)刪除。

（13）自定義多選選擇器

允許用戶自定義添加選項(xiàng)，例如在允許用戶添加自定義標(biāo)簽類場景中使用。

（14）彈框型選擇器

列表選項(xiàng)過多，在下拉面板中展示對用戶不夠友好，可選擇彈框型選擇器的彈框來承載更多的數(shù)據(jù)信息。

用戶的記憶程度不同，一部分用戶可以通過主動(dòng)搜索獲取選項(xiàng)，一部分用戶可以通過在彈窗中直接選擇獲取選項(xiàng)。

（15） 樹選擇器

樹形結(jié)構(gòu)層級不深，在2-3級之間。

一級節(jié)點(diǎn)在5個(gè)節(jié)點(diǎn)左右，二、三級節(jié)點(diǎn)個(gè)數(shù)相對較少，使用具有樹形結(jié)構(gòu)的樹選擇器。

（16）表格選擇器

單一維度信息無法讓用戶做出選擇，需要為用戶呈現(xiàn)更多的數(shù)據(jù)信息才能讓用戶做出合理判斷時(shí)，使用可以展示更多數(shù)據(jù)信息的表格選擇器。

（17） 級聯(lián)選擇器

樹形結(jié)構(gòu)層級不深，在2-3級之間。

一、二、三級節(jié)點(diǎn)個(gè)數(shù)都相對較多，使用樹選擇器縱向展示不利于用戶查找，建議使用一、二、三級節(jié)點(diǎn)分開展示的級聯(lián)選擇器。

（18）日期/時(shí)間/日期時(shí)間選擇器

為用戶提供了一種可視化的方式去瀏覽和選擇一個(gè)日期、一個(gè)時(shí)間、一個(gè)日期時(shí)間或日期范圍。

（19）單選框

Radio所有選項(xiàng)默認(rèn)可見，方便用戶在比較中選擇，選項(xiàng)不宜過多，一般在2-5個(gè)之間，同時(shí)會(huì)有一個(gè)選項(xiàng)處于選中狀態(tài)。

（20）篩選單選框

界面要求設(shè)計(jì)緊湊，又需要對表格數(shù)據(jù)進(jìn)行單維度篩選時(shí)，使用按鈕+Radio形式的篩選單選框。

（21）多選框

Checkbox用于在一組選項(xiàng)可以多選時(shí)使用。單個(gè)復(fù)選框可以表示在兩種狀態(tài)間切換。

（22） 篩選多選框

界面要求設(shè)計(jì)緊湊，又需要對表格數(shù)據(jù)進(jìn)行多維度篩選時(shí)，使用按鈕+Checkbox形式的篩選單選框。

（23）滑動(dòng)輸入條

滑動(dòng)輸入條可以在連續(xù)或間斷的區(qū)間內(nèi)，通過滑動(dòng)錨點(diǎn)來選擇一個(gè)合適的數(shù)值?？梢栽谡{(diào)節(jié)音量，電腦屏幕亮度，色彩飽和度等方面使用。

（24） 帶數(shù)字框滑動(dòng)輸入條

在用戶需要精確數(shù)值時(shí)，使用帶數(shù)字框的滑動(dòng)輸入條。

（25）開關(guān)

用于切換單個(gè)選項(xiàng)的狀態(tài)。開關(guān)本身可以表達(dá)清晰狀態(tài)的情況下，可以不在開關(guān)上加文字。在標(biāo)簽無法表達(dá)清晰的情況下，建議在開關(guān)內(nèi)加入例如“禁用/啟用”等說明狀態(tài)的文字。

（26）穿梭框

穿梭框左邊為待選元素區(qū)，右邊為已選元素區(qū)，用戶點(diǎn)擊穿梭按鈕，完成元素在兩個(gè)區(qū)域內(nèi)的移動(dòng)。

（27）帶排序穿梭框

允許用戶將常用或者重要的元素靠前排序，自由調(diào)整元素順序。

（28）樹/表格穿梭框

元素的展現(xiàn)形式不同，使用不同的穿梭框形態(tài)。樹形結(jié)構(gòu)使用樹穿梭框，表格類數(shù)據(jù)使用表格穿梭框。

（29）直接上傳

一般用于不需要預(yù)覽效果的文件上傳，同時(shí)選擇文件后直接完成上傳動(dòng)作。文件上傳需要提供明確的文件大小和文件格式。

（30） 手動(dòng)上傳

一般用于不需要預(yù)覽效果的文件上傳，同時(shí)選擇文件后需要手動(dòng)點(diǎn)擊頁面上的上傳按鈕才能完成上傳動(dòng)作。文件上傳需要提供明確的文件大小和文件格式。

（31）顯示縮略圖上傳

一般用于需要顯示預(yù)覽效果的文件上傳，同時(shí)選擇文件后直接完成上傳動(dòng)作。文件上傳需要提供明確的文件大小和文件格式。

（32）拖拽上傳

把文件拖入指定區(qū)域，完成上傳，同樣支持點(diǎn)擊上傳。文件上傳需要提供明確的文件大小和文件格式。

（33）圖片上傳

一般為圖片上傳。圖片上傳需要提供明確的圖片大小和圖片格式。

（34）評分

當(dāng)需要為內(nèi)容進(jìn)行評分時(shí)使用。

2. 高階表單

高階表單由錨點(diǎn)、樹組件、標(biāo)題、步驟條、描述組件等組成。

可以說，高階表單在一定程度上可以看出我們設(shè)計(jì)師的信息組織能力在哪個(gè)等級。

組織得好，用戶錄入效率幾倍提升；組織的比信息平鋪展示還復(fù)雜，用戶錄入數(shù)據(jù)要么鏈路冗長，要么半途而廢。試想，我們自己有沒有因?yàn)楸韱武浫霃?fù)雜或鏈路冗長，從而放棄了操作表單的情況。

（1）錨點(diǎn)

當(dāng)頁面上同一層級的分塊信息很多，需要頁面滾動(dòng)條支撐查看更多信息的時(shí)候，使用可供跳轉(zhuǎn)的錨點(diǎn)鏈接，達(dá)到快速在錨點(diǎn)之間跳轉(zhuǎn)的作用。

（2）面包屑

當(dāng)系統(tǒng)擁有兩級以上的層級結(jié)構(gòu)時(shí)，面包屑能顯示當(dāng)前頁面在系統(tǒng)層級結(jié)構(gòu)中的位置，并能向上返回（返回非只有上層，而是任意層級）。

（3）樹組件

樹形控件通過逐級大綱的形式來展現(xiàn)信息的層級關(guān)系，是用戶在信息查看和瀏覽時(shí)的一種高效模式。使用樹形控件組織信息的時(shí)候，用戶可以在不同節(jié)點(diǎn)間來回切換。

（4）標(biāo)題

標(biāo)題組件服務(wù)于頁面內(nèi)的內(nèi)容信息，起到為內(nèi)容信息分組的作用，幫助用戶更快速的查找信息。

（5）可折疊標(biāo)題

當(dāng)頁面內(nèi)容信息較多，在簡單分組的情況下，用戶依然需要通過滾動(dòng)條查找處于頁面底部的信息，使用可折疊標(biāo)題來收納內(nèi)容。允許用戶關(guān)注重要信息，將不重要的信息折疊起來。

（6）多級標(biāo)題

有些業(yè)務(wù)場景中，一級標(biāo)題不足以可用，標(biāo)題需要多層嵌套，給用戶展現(xiàn)信息的層級，便于用戶理解。

（7）tabs標(biāo)簽頁

提供平級的區(qū)域?qū)⒋髩K內(nèi)容進(jìn)行收納和展現(xiàn)，保持界面整潔。

（8）步驟條

當(dāng)任務(wù)復(fù)雜或者存在先后關(guān)系時(shí)，將其分解成一系列步驟，從而簡化任務(wù)。

（9）描述組件

當(dāng)表單填寫復(fù)雜的時(shí)候，需要通過描述組件來給出“表單填寫的步驟，為什么要填寫的原因，填寫完后有什么樣的權(quán)益”等。

（10）卡片

卡片和標(biāo)題組件組合使用，或者單獨(dú)使用，通過卡片可將表單信息依據(jù)填寫邏輯結(jié)構(gòu)化拆解。卡片內(nèi)容的組織順序：位于首屏的卡片，承載的內(nèi)容更重要；位于下方的卡片，承載的內(nèi)容略顯次要。

三、表單承載體

了解表單是由哪些組件元素構(gòu)成后，我們再來看看表單是被哪些載體承載的，包括了頁面、彈窗、抽屜。

1.? 頁面：

當(dāng)表單由頁面去承載的時(shí)候，說明表單的內(nèi)容已經(jīng)非常多了。對頁面級表單，我們通常先需要整理表單內(nèi)容的分類，屬于一類的信息放歸攏到一起。

例如銀行賬戶類參數(shù)需改時(shí)，可以將累計(jì)凈流入份額上限、申購失敗款項(xiàng)、密碼生成規(guī)則等申請規(guī)則類信息歸為一組；將是否支持經(jīng)辦人、未做交易變?yōu)樾菝哔~戶等賬戶信息規(guī)則歸為一組，保證用戶查找信息快速。

同時(shí)，頁面級表單需要配有返回操作，保證用戶來到表單頁時(shí)，可以來去自如。

對于頁面類表單，由于會(huì)在大小屏上均出現(xiàn)，因此要考慮適配規(guī)則。

目前，遇到過的規(guī)則有三種：

1. 第一類，表單整體靠左邊展示，不跟隨大小屏變化表單寬度，總是靠左。
2. 第二類，表單整體居中展示，不跟隨大小屏變化表單寬度，總是居中。
3. 第三類，表單鋪滿，跟隨大小屏自適應(yīng)。

頁面類表單按鈕放哪里也是我們在整理表單設(shè)計(jì)規(guī)范時(shí)不可忽略的。

遵循的思路是：表單內(nèi)容未滿一屏，表單按鈕跟隨表單域；表單內(nèi)容超過一屏，內(nèi)容很多，用戶需要滾動(dòng)錄入，表單按鈕固定在頁面底部。

2. 彈窗

表單最高頻的承載體就是彈窗，使用彈窗的表單通常所要填寫的信息不會(huì)很多，同時(shí)彈窗的蒙版下面是數(shù)據(jù)列表，用戶很明確就可以知道自己置身于何處，是在錄入哪部分的業(yè)務(wù)數(shù)據(jù)。

由于彈窗大小（不適合太大）、位置（居中）等的局限性，導(dǎo)致表單設(shè)計(jì)上需要考慮較多情況。例如，彈窗要不要隨著屏幕適配、要不要有放大縮小功能、要不要可以隨意移動(dòng)、要不要根據(jù)不同的呈現(xiàn)內(nèi)容聯(lián)動(dòng)彈窗尺寸等，其實(shí)這些功能都是在解決彈窗本身的局限問題。

我們在設(shè)計(jì)彈窗表單時(shí)，可以先將想到的問題逐一記錄下來，形成對應(yīng)的設(shè)計(jì)清單，當(dāng)我們遇到彈窗表單設(shè)計(jì)時(shí)，對應(yīng)清單和業(yè)務(wù)實(shí)際訴求去設(shè)計(jì)，避免遺漏。

3. 抽屜

越來越多的設(shè)計(jì)師將使用抽屜承載表單看成了頁面級表單和彈窗表單的中間態(tài)。抽屜式表單融合了頁面級表單和彈窗表單的優(yōu)勢，它既可以承載頁面級表單的信息量，又可以和彈窗表單一樣不離開主陣地，讓用戶擁有安全感和掌控感。

前些日子，我們團(tuán)隊(duì)內(nèi)部引發(fā)了一個(gè)討論，就是在設(shè)計(jì)抽屜式表單時(shí)，考慮要不要給抽屜式表單加蒙版。我們看了Ant Design的抽屜，它是加了蒙版的，但點(diǎn)擊蒙版可以將抽屜關(guān)閉，這里就有個(gè)問題了，如果表單被編輯過，我們是否需要提示用戶“表單被編輯過，你是否依然要關(guān)閉”諸如此類的提示呢？

我們也在另外一個(gè)中后臺系統(tǒng)中發(fā)現(xiàn)：它的抽屜無蒙版，用戶改過數(shù)據(jù)，也可以關(guān)閉抽屜（無提示），當(dāng)用戶再次打開該表單，數(shù)據(jù)依然是原來的樣子。那么這里也有個(gè)問題，用戶以為自己改了生效了，而實(shí)際沒有生效。

我們還發(fā)現(xiàn)，在查看列表數(shù)據(jù)詳情的場景下，適合沒有蒙版的設(shè)計(jì)方式，因?yàn)橛脩粜枰ㄟ^不斷切換點(diǎn)擊來查看不同數(shù)據(jù)的詳情。因此，關(guān)于抽屜需不需要蒙版，有了蒙版又該如何控制，蒙版是什么作用等，需要一一搞明白，才能解決這個(gè)問題，目前我們正在梳理中，日后整理出來分享給大家。

四、表單設(shè)計(jì)模式

在表單設(shè)計(jì)中，有大量的設(shè)計(jì)模式可以幫助我們設(shè)計(jì)師在多人協(xié)作時(shí)，或者項(xiàng)目較為緊急時(shí)，又或者項(xiàng)目剛啟動(dòng)時(shí)，快速達(dá)到一個(gè)較好的設(shè)計(jì)水平與產(chǎn)品質(zhì)量。

表單雖小，但表單設(shè)計(jì)模式非常多，今天就給到大家一些常用的設(shè)計(jì)模式，日后再給大家展開。

關(guān)于什么是設(shè)計(jì)模式，小伙伴們可以看這篇文章了解：B端體驗(yàn)細(xì)節(jié)

1. 按鈕不可用的設(shè)計(jì)模式

（1）結(jié)構(gòu)化模式

結(jié)構(gòu)化模式是指當(dāng)用戶輸入的時(shí)候，不是單純的輸入框，而是具備數(shù)據(jù)格式的組件。

例如驗(yàn)證碼、IP輸入，都可以采用結(jié)構(gòu)化模式。結(jié)構(gòu)化設(shè)計(jì)模式的優(yōu)勢在于所見即所得，不會(huì)少輸入，也不會(huì)多輸入。

（2）格式化模式

格式化模式是指在某些場景下，數(shù)據(jù)有固定的格式要求，但對于用戶來說，并不會(huì)按照系統(tǒng)要求的格式輸入，例如打空格，打英文標(biāo)點(diǎn)，因此我們要允許用戶按照習(xí)慣輸入，但系統(tǒng)自動(dòng)格式化。如身份證號、銀行卡號。

（3）填空模式

在文本較多，且文本之間非一句話可簡單表述，需要中間加入很多用戶側(cè)選擇的操作時(shí)，可以采用填空模式。例如蘋果系統(tǒng)「鍵盤」操作：整句話是“閑置（ ）秒后關(guān)閉鍵盤背光燈”。

（4）說明模式

對于一些較為難以理解的字段，或者選擇某個(gè)選項(xiàng)后，期望把重要的信息告知到用戶，就需要采用說明模式。采用信息說明模式時(shí)，建議文案精簡、設(shè)計(jì)直觀，保證用戶在無需猜測，便可以根據(jù)說明自己操作和成功完成操作。例如密碼說明、賬號名稱取名說明。

（5）線索模式

大家記不記得時(shí)間控件中有“請選擇日期”，搜索框中會(huì)有“請輸入IP地址”等線索文字，這就是線索設(shè)計(jì)模式。假如搜索框中什么文字也沒有，用戶就會(huì)搜索一次錯(cuò)一次，因?yàn)樵O(shè)計(jì)者沒有給用戶框定搜索邊界。因此線索設(shè)計(jì)模式可以讓界面不言自明。線索模式和提示模式我們有時(shí)候會(huì)混淆，當(dāng)然問題也不是很大，我梳理了線索模式和提示模式的區(qū)別，大家以后用的時(shí)候會(huì)更有數(shù)。

（6）自動(dòng)化模式

自動(dòng)化模式是指用戶在輸入過程中，系統(tǒng)會(huì)不斷精確匹配用戶所需的內(nèi)容，從而方便用戶在推薦結(jié)果中直接做出選擇，提升用戶選擇效率。例如課程搜索、學(xué)生姓名搜索等。

（7）聯(lián)動(dòng)模式

表單中有些信息是不適合全都平鋪展開給用戶的，很多信息是因?yàn)槁?lián)動(dòng)才出現(xiàn)的，它們具有出現(xiàn)的條件，因此我們可以考慮采用聯(lián)動(dòng)模式進(jìn)行設(shè)計(jì)。

（8）收納模式

當(dāng)某個(gè)表單項(xiàng)可讓用戶選擇的選項(xiàng)很多時(shí)，且有些信息是非高頻使用信息，適合收納起來展示，當(dāng)用戶有需要時(shí)再打開。例如更多顏色選擇。

（9）默認(rèn)值模式

當(dāng)表單中的某些信息用戶在選擇時(shí)基本都為一個(gè)值時(shí)，可以采用默認(rèn)值設(shè)計(jì)模式，這有利于減少用戶填寫時(shí)長。例如女孩子身高基本取值在155厘米~165厘米之間。

（10）校驗(yàn)?zāi)Ｊ?/strong>