中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

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

一、什么是表單

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

表單由表單標題、表單域、表單標簽、表單按鈕組成。

1. 表單標題

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

2. 表單域

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

3. 表單標簽

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

4. 表單按鈕

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

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

二、表單組件元素

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

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

1. 簡單表單

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

（1）輸入框

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

（2） 文本框

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

（3）文本域

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

（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）單/多選選擇器

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

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

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

（12）多選選擇器（選項獨立展示）

輸入框內(nèi)選項以標簽形式存在，只能單獨刪除。

（13）自定義多選選擇器

允許用戶自定義添加選項，例如在允許用戶添加自定義標簽類場景中使用。

（14）彈框型選擇器

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

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

（15） 樹選擇器

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

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

（16）表格選擇器

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

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

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

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

（18）日期/時間/日期時間選擇器

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

（19）單選框

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

（20）篩選單選框

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

（21）多選框

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

（22） 篩選多選框

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

（23）滑動輸入條

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

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

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

（25）開關(guān)

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

（26）穿梭框

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

（27）帶排序穿梭框

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

（28）樹/表格穿梭框

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

（29）直接上傳

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

（30） 手動上傳

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

（31）顯示縮略圖上傳

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

（32）拖拽上傳

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

（33）圖片上傳

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

（34）評分

當需要為內(nèi)容進行評分時使用。

2. 高階表單

高階表單由錨點、樹組件、標題、步驟條、描述組件等組成。

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

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

（1）錨點

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

（2）面包屑

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

（3）樹組件

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

（4）標題

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

（5）可折疊標題

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

（6）多級標題

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

（7）tabs標簽頁

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

（8）步驟條

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

（9）描述組件

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

（10）卡片

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

三、表單承載體

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

1.? 頁面：

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

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

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

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

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

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

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

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

2. 彈窗

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

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

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

3. 抽屜

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

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

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

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

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

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

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

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

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

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

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

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

（2）格式化模式

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

（3）填空模式

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

（4）說明模式

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

（5）線索模式

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

（6）自動化模式

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

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

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

（8）收納模式

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

（9）默認值模式

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

（10）校驗?zāi)Ｊ?/strong>