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

編輯導(dǎo)語：表單在我們的日常工作中經(jīng)常會用到，一個優(yōu)質(zhì)的表單可以提高我們的工作效率，完成一些更多的業(yè)務(wù)，提高產(chǎn)品體驗；但表單的設(shè)計也比較復(fù)雜，本文作者分享了關(guān)于B端復(fù)雜業(yè)務(wù)表單設(shè)計，我們一起來了解一下。

一、前言

表單是B端產(chǎn)品中最常用的信息錄入工具，但由于B端產(chǎn)品業(yè)務(wù)的復(fù)雜性，表單往往呈現(xiàn)出字段多、類型雜等特點，增大了它的設(shè)計難度；一個糟糕的表單，會極大影響用戶信息的錄入的效率，從而影響到整個產(chǎn)品的體驗。

最近我經(jīng)歷了云空間產(chǎn)品的項目重構(gòu)，對于復(fù)雜業(yè)務(wù)表單有了進一步的理解，總理梳理了這篇文章，希望能給大家?guī)聿灰粯拥膯⑹尽?/p>

二、表單定義與構(gòu)成

2.1 表單定義

定義：表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能，是提交數(shù)據(jù)的一切形式。

為了充分理解表單定義，我們來看一個例子，大家認(rèn)為以下圖例屬于表單嗎？

答案：是的?？赡茉诖蠹业挠∠笾校斎肟?、下拉選擇框等這些控件才屬于表單，但從定義中能得到表單的本質(zhì)是提交數(shù)據(jù)；比如當(dāng)點擊“立即開通”按鈕，在等待的過程中已經(jīng)提交了相關(guān)的數(shù)據(jù)信息，所以它就屬于一個表單。

2.2 表單構(gòu)成

一個表單通常由以下三部分組成：標(biāo)簽、輸入域、提示信息、動作。

• 標(biāo)簽 – 告訴用戶相對應(yīng)的輸入字段的含義。
• 輸入域 – 是數(shù)據(jù)輸入的入口，表單的核心主體。
• 提示信息 – 幫助用戶更準(zhǔn)確的理解輸入域的具體操作。
• 動作 – 用于將表單數(shù)據(jù)傳送到服務(wù)器上。

三、表單構(gòu)件解析

3.1 標(biāo)簽

標(biāo)簽的功能是表明表單域要求輸入的內(nèi)容，其文字描述應(yīng)該盡量的簡潔明了，避免出現(xiàn)冗長難以理解的標(biāo)簽，避免產(chǎn)生歧義；同時，用詞盡量夠貼近用戶的使用場景或業(yè)務(wù)場景，使用戶獲得產(chǎn)品體驗的整體一致性。

在實際使用場景中，我們可以將標(biāo)簽樣式大致分為五種：頂部標(biāo)簽、左對齊標(biāo)簽、右對齊標(biāo)簽、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽以及浮動標(biāo)簽。

3.1.1 頂部標(biāo)簽

頂部標(biāo)簽是標(biāo)簽在輸入域的上方，與輸入域進行左垂直對齊；例如，藍湖和Jira Software采用的就是頂部標(biāo)簽。

• 優(yōu)點：有最快的瀏覽和處理速度；節(jié)省水平空間，標(biāo)簽長度彈性大。
• 缺點：占用較大的垂直空間，表單項較多時增加頁面滾動。
• 適用場景：希望用戶快速填寫表單，完成任務(wù)；當(dāng)輸入項存在主次之分時；對標(biāo)簽擴展性要求高。

3.1.2?左對齊標(biāo)簽

左對齊標(biāo)簽是采用文字左對齊的方式放置在輸入域的左邊。這種結(jié)構(gòu)有利于用戶對標(biāo)簽整體的查看，從而清楚表單整體所需要填寫的內(nèi)容。

• 優(yōu)點：文字開頭按閱讀視線對齊，方便用戶快速瀏覽表單；節(jié)約垂直空間。
• 缺點：標(biāo)簽與表單域聯(lián)系不緊密，視覺跳動大，填表不流暢；標(biāo)簽和輸入域的彈性長度小。
• 適用場景：表單中存在較多的復(fù)雜敏感數(shù)據(jù)，希望用戶放慢速度，仔細思考。

3.1.3 右對齊標(biāo)簽

右對齊標(biāo)簽是目前使用比較多的一種形式，此結(jié)構(gòu)使得標(biāo)簽與輸入域的距離是固定的，有明確的視覺關(guān)聯(lián)。

• 優(yōu)點：明確的視覺關(guān)聯(lián)，有利于用戶進行填寫，節(jié)約垂直空間。
• 缺點：左邊標(biāo)簽參差不齊，給通覽標(biāo)簽造成障礙，降低表單可讀性；標(biāo)簽和輸入域的彈性長度小。
• 適用場景：既要減少垂直空間，又要加快填寫速度。

3.1.4 內(nèi)聯(lián)標(biāo)簽

內(nèi)聯(lián)標(biāo)簽是將標(biāo)簽放在輸入域內(nèi)部顯示，標(biāo)簽代替了占位提示文字，來告訴用戶應(yīng)該填寫什么內(nèi)容，常見于注冊登錄頁，如下圖。

• 優(yōu)點：同時節(jié)省橫向和縱向的空間。
• 缺點：消失的標(biāo)簽，用戶產(chǎn)生困惑，拓展性差。
• 適用場景：表單錄入項較少時可考慮使用，建議錄入項不超過3個。

3.1.5 圖標(biāo)標(biāo)簽

圖標(biāo)標(biāo)簽是內(nèi)聯(lián)標(biāo)簽的一種演化形式，采用圖像表意的方法來描述表單填寫內(nèi)容，如下圖的表單采用就是這種樣式。

• 優(yōu)點：同時節(jié)省水平和垂直的空間；標(biāo)簽設(shè)計成圖標(biāo)，使表單更靈活和簡潔。
• 缺點：抽象的圖標(biāo)標(biāo)簽，增加認(rèn)知負(fù)擔(dān)和記憶成本。
• 適用場景：表單錄入項的內(nèi)容信息區(qū)分度大，能用圖形表意的形式輕松識別內(nèi)容。

3.1.6 浮動標(biāo)簽

浮動標(biāo)簽是指用戶在錄入時，內(nèi)部標(biāo)題（輸入性提示信息）進行浮動位移，在登錄注冊頁中相當(dāng)常見，例如谷歌、小鵝通、藍湖等均采用此形式。

• 優(yōu)點：同時節(jié)省水平和垂直的空間；無需用戶對標(biāo)簽進行記憶。
• 缺點：需要一定的開發(fā)成本。
• 適用場景：復(fù)雜性和簡易性表單均適用。

3.2 輸入域

輸入域是用來采集用戶數(shù)據(jù)信息的入口，包含了文本錄入、選框錄入以及文件上傳3種錄入類型，如下圖所示：

對于用戶來說，再好填寫體驗對用戶來說也是一種負(fù)擔(dān)。所以我們應(yīng)盡可能的減少用戶思考和理解的成本，降低用戶填寫時的焦躁情緒，同時兼顧表單的錄入效率，輸入域的選擇就尤為重要。

3.2.1 文本錄入

文本錄入為用戶提供了編輯文本的控件，是表單域中最基礎(chǔ)和常見的類型。分為文本框和文本域，當(dāng)輸入字符總數(shù)較少時，使用單行的文本框形式；當(dāng)輸入錄入長篇幅的單一的文本時，使用多行的文本區(qū)域。

• 優(yōu)勢：靈活性大，允許輸入任意類型和數(shù)量的字符（除非程序做了限制）。
• 劣勢：當(dāng)錄入項過多時，造成用戶負(fù)擔(dān)。
• 適用場景：適用于文本編輯的錄入場景。

3.2.2 選擇錄入

選擇錄入是讓用戶在一個預(yù)定的范圍中進行選擇錄入。包含了選擇列表、單/復(fù)選框、開關(guān)按鈕、滑塊選擇、日期選擇器、穿梭框等。

3.2.2.1 選擇列表

選擇列表通常也稱為下拉菜單，它允許用戶從預(yù)定的列表中選擇一個選項或多個選項，為用戶在選項的數(shù)量上提供了更多的靈活性；根據(jù)選擇類型，可以分為單選擇器、多選擇器、聯(lián)級選擇器以及樹選擇器3種類型。

• 優(yōu)勢：占用空間小，在展開所有選項后，可以按重要程度排列。
• 劣勢：當(dāng)選項過多時需要滾動，會放慢用戶輸入速度；不點擊下拉，用戶不知道選項都有什么，不方便比較。
• 適用場景：適用于選項個數(shù)較多的場景（一般多于5項）；適用于推薦使用默認(rèn)選項的場景；適用于選項中存有大量相似的選項的場景。

3.2.2.2 單選框

單選框是將所有選項都列出來，每個選項前面添加單選框，選項之間互斥，允許用戶從多個選項中選擇一個選項。

• 優(yōu)勢：選項全部都列出來，方便用戶查看對比。
• 劣勢：占用空間大。
• 使用場景：適用于每個選項的重要性一樣，用戶需要進行對比才能選擇的場景；適用于需要優(yōu)先考慮可見性和快速響應(yīng)的場景。

3.2.2.3 復(fù)選框

復(fù)選框[Check Box]由一個方形的選擇框和選項組成，復(fù)選框在選中狀態(tài)下有標(biāo)記。

• 優(yōu)勢：選項全部都列出來，方便用戶查看對比。
• 劣勢：占用空間大。
• 使用場景：適用于有多個選項，同時可以任意選擇(或不選)多個(或一個)選項的場景。

3.2.2.4 開關(guān)按鈕

開關(guān)按鈕一般用來表示一個動作（比如開始或停止一件事），兩個選項是互相對立的，作用類似于實際生活中的燈控按鈕。允許用戶在兩個相反的狀態(tài)之間進行選擇，如：有效或無效、是或否、開或關(guān)等。

• 優(yōu)勢：操作時體現(xiàn)了狀態(tài)，同時可以很明顯的表示所處狀態(tài)。
• 劣勢：只有兩個選項，并且是對立的，使用情況受限。
• 使用場景：適用于切換單個選項狀態(tài)的場景，例如更改首選項、系統(tǒng)功能等。

3.2.2.5 滑塊選擇

滑塊選擇可以讓我們通過在連續(xù)或間斷的區(qū)間內(nèi)滑動錨點來選擇一個合適的數(shù)值。這種交互特性使得它在設(shè)置諸如音量，亮度，色彩飽和度等需要反映強度等級的選項時是一種極好的選擇?；瑝K的常見樣式有三種，分別是單個連續(xù)滑塊、兩個連續(xù)滑塊、間續(xù)滑塊。

• 優(yōu)勢：便于用戶快速瀏覽大量的選項，提供流暢的用戶體驗。
• 劣勢：有較強的不確定感。
• 使用場景：適用于輸入結(jié)果相對模糊或不準(zhǔn)確的場景。

3.2.2.6 穿梭框

穿梭框用直觀的方式在兩欄中移動元素，完成選擇行為。

• 優(yōu)勢：展示更多的可選項、方便用戶對比已選項與未選項以及更改已選內(nèi)容；
• 劣勢：占用空間大；
• 適用場景：適用于需要在多個可選項中進行多選時的場景。3.2.2.7 日期選擇器日期選擇器為用戶提供了一種可視化的方式去瀏覽和選擇一個日期或者日期范圍。當(dāng)用戶需要輸入一個時間，可以點擊標(biāo)準(zhǔn)輸入框，彈出時間面板進行選擇。

3.2.3 文件上傳

文件上傳是將本地的相應(yīng)信息(包含本地和云儲存)通過網(wǎng)頁或者上傳工具發(fā)布到遠程服務(wù)器上的過程?？梢苑譃楹唵吸c擊上傳、顯示縮略圖上傳、拖拽上傳三種。

3.2.4 關(guān)于輸入域的幾個思考

3.2.4.1 輸入框的寬度

在實際的業(yè)務(wù)場景中，大部分輸入框所需填寫內(nèi)容都存在理想長度，輸入框的寬度暗示填寫內(nèi)容的長度，合理的寬度將給用戶正確的預(yù)期，減少焦慮感、減輕判斷負(fù)擔(dān)。

這里要注意，如果內(nèi)容沒有規(guī)則無法判斷長短，則輸入框應(yīng)保持長度一致，給足填寫空間即可，避免長度不一導(dǎo)致用戶混亂。

如何讓輸入框的長度有規(guī)律可循？參考Ant design表單設(shè)計研究的結(jié)論得的5種高頻的寬度需求區(qū)間，以尺碼類比分別是： XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。

我們可以根據(jù)自己的業(yè)務(wù)訴求，參考這個XS尺碼的尺寸范圍（80-160px）來定制自己的輸入框尺寸x，然后通過倍數(shù)+間距疊加的方式得到不同的寬度尺碼和對齊關(guān)系。

例如，我們產(chǎn)品業(yè)務(wù)中經(jīng)常要填寫金額，考慮金額輸入的極值來定制我們的最小輸入框尺寸為104px，那么我們就得到了104px*2+8px=216px、104px*3+16px=328px….五種尺寸（如下圖）。

3.2.4.2 可變化的文本框

從使用體驗講，可變化的文本框使頁面整體效果更統(tǒng)一。

固定文的文本框當(dāng)輸入文本超過其設(shè)置的寬度，會出現(xiàn)內(nèi)滾動條，當(dāng)頁面上出現(xiàn)兩個滾動條時（大頁面的滾動條），在使用操作上會帶來一定的混亂。

3.2.4.3?輸入格式

根據(jù)用戶的記憶結(jié)構(gòu)（7±2法則），采用合理的格式約束，能夠方便用戶更快的完成填寫，而減少錯誤出現(xiàn)。

3.2.4.4 智能聯(lián)想

智能聯(lián)想是指根據(jù)關(guān)鍵詞，輸入框可以實現(xiàn)模糊搜索、智能聯(lián)想、自動匹配等選項；讓數(shù)據(jù)庫跑在用戶的前面，能節(jié)省用戶更多的時間，相應(yīng)的提高工作效率，同時也能減少出錯率。

常見的場景有郵箱后綴的聯(lián)想、基于IP地址自動填充國家和地區(qū)、電話號碼前綴聯(lián)想、基于關(guān)鍵詞查詢相關(guān)短語等。

3.2.4.5 紅色星號

表單的必填字段大多情況下會使用紅色星號表示。但當(dāng)必填項多于選填項時，頁面就會出現(xiàn)大量的紅色星號從而增加用戶的認(rèn)知負(fù)擔(dān)。同時，紅色星號會帶來一些恐懼感，增加表單填寫的出錯率。因此在表單設(shè)計中，當(dāng)必填項多于選填項時，可采用隱藏紅色星號標(biāo)記，改用暗提示標(biāo)記可選項的形式來幫助用戶識別，這種形式減少了視覺噪聲，增強了表單的可讀性。

3.3 提示信息

根據(jù)輸入流程將用戶輸入過程分為輸入前、輸入中、輸入后三個階段，提示信息在輸入前發(fā)生的稱為引導(dǎo)提示，提示信息在輸入中/后發(fā)生的叫反饋提示，如圖所示：

3.3.1 引導(dǎo)提示

引導(dǎo)信息是在用戶填寫表單前對表單填寫內(nèi)容進行解釋說明的提示信息，一般分為輸入性提示與幫助性文字。

3.3.1.1 輸入性提示

輸入性提示信息即占位符，在文本框獲取焦點后提示文字會消失，提示文字最好能簡潔明了給出有效的提示信息，如果是大篇幅的解釋性內(nèi)容應(yīng)放在幫助性文字中。

3.3.1.2 幫助性文字

在表單的設(shè)計中當(dāng)標(biāo)簽不足以對輸入項準(zhǔn)確說明時，幫助性文字起到非常重要的作用。幫助性文字可以有多種形式，比如文本提示、圖標(biāo)提示、隱藏氣泡提示等。

• 文本提示：包容性強，可運用于詳細的解釋說明、超鏈接、字?jǐn)?shù)限制等。
• 圖標(biāo)提示：一般在提示文本較多的情況下使用，比如文本提示超過一行，同時不想多行展示時就可以采用此方式。
• 隱藏氣泡提示：當(dāng)鼠標(biāo)懸停到輸入框上時輸入框上方出現(xiàn)氣泡提示，比如百度賬號的注冊頁。

這里要注意，如果是針對整個表單的解釋說明，幫助性文字一般位于整個表單的最開始位置；如果只是針對某個輸入域的提示，根據(jù)格式塔原理，則應(yīng)將兩者放在一起，讓用戶知道當(dāng)前處于什么地方，在針對什么進行引導(dǎo)、輔助。

3.3.2 反饋提示

反饋提示是在用戶輸入時或輸入后對輸入內(nèi)容進行的反饋，提示當(dāng)前輸入域所填寫的內(nèi)容是否符合填寫規(guī)則，一般有正確、錯誤、警告三種狀態(tài)。其中，正確狀態(tài)通常不給予任何提示，也可采用圖標(biāo)進行反饋，讓用戶感受更加直觀；反之當(dāng)用戶錄入的內(nèi)容與規(guī)則不符時，給予錯誤提示信息。警告狀態(tài)往往與文本框相結(jié)合，當(dāng)字?jǐn)?shù)超過規(guī)則的限制時，給出相對應(yīng)的反饋。

這里要注意反饋提示的信息精準(zhǔn)度問題，不要讓用戶產(chǎn)生歧義；例如“用戶名填寫錯誤”要提示用戶名具體錯誤的原因“用戶名不能添加符號”“用戶名重復(fù)”“用戶名不能超過8個字符”等具體原因，讓用戶明確修改意圖。

3.3 動作

動作是完成表單的關(guān)鍵一步，因為我們填寫完表單之后要“提交”。我們可以把一些重要的行為視為“主動作”，如：提交、保存、下一步等。另一些與完成表單填寫的目標(biāo)相悖的行為可以視為“次動作”，如：取消、撤銷、返回等。

這里的動作也就是所謂的動作按鈕，當(dāng)表單的必填項未填寫完整時，提交或保存等主按鈕一般為灰色狀態(tài)，不可進行下一步操作，當(dāng)完成必填信息的填寫后按鈕變?yōu)楦吡量蛇M行下一步操作。

當(dāng)表單項非常少時（一般為3個或以下），主按鈕禁用原則生效，這里的禁用狀態(tài)非常容易被用戶理解，用戶輸入內(nèi)容就會得到反饋；但表單項超過5個時則不建議使用主按鈕禁用原則，因為表單可能包含必填和選填項等多種選項，主按鈕禁用用戶不易識別，會造成用戶疑問，此時采用提交時校驗反饋的做法會更合適。

四、表單的交互

在B端產(chǎn)品中，表單的交互大致可以分為6種，分別是原位編輯、氣泡卡片、彈窗、抽屜、頁面跳轉(zhuǎn)以及新開頁面，根據(jù)具體的使用場景選擇合適的頁面交互。

4.1 原位編輯

原位編輯的編輯內(nèi)容也為展示內(nèi)容，屬于輕量型信息采集表單。一般出現(xiàn)在表格內(nèi)、卡片中，在信息展示區(qū)域中通過鼠標(biāo)hover、點擊特定字段或操作按鈕即變?yōu)榧せ罹庉嫚顟B(tài)。

• 優(yōu)勢：快捷易操作，隨時啟用與退出，主流程的操作流暢度高。
• 劣勢：編輯狀態(tài)較為隱晦，不宜察覺。
• 適用場景：適用于輸入內(nèi)容較少，適用于頻率較低，同時屬于主流程分支的場景。

4.2 氣泡卡片

氣泡卡片可以理解為一個超輕量的對話框（彈窗），允許用戶在當(dāng)前界面快速對某部分進行編輯，同時不打斷主任務(wù)流，也可隨取隨用，隨時退出。

• 優(yōu)勢：簡單快捷易操作、主流程的操作流暢度高。
• 劣勢：擴展性不強，承載的信息不易過多。
• 適用場景：適用于快速編輯和輸入的場景。

4.3 彈窗

彈窗交互的表單樣式是比較常見的交互樣式，它的拓展性更強，承載的信息更多，可以分為模態(tài)彈窗和非模態(tài)彈窗兩種。

4.3.1 模態(tài)彈窗

模態(tài)彈窗通常以對話框的形式呈現(xiàn)，體現(xiàn)了頁面間的層級關(guān)系。它能讓用戶不離開主流程的情況下繼續(xù)插入性操作。

• 優(yōu)勢：簡單易操作、承載的信息量有較大的彈性空間。
• 劣勢：浮層彈窗給主操作流程造成較強的割裂，降低輸入的流暢度。
• 適用場景：適用于主流程步驟中需要分支任務(wù)行為的場景。

4.3.2 非模態(tài)彈窗

非模態(tài)彈窗的指的是能讓用戶不離開主頁面的情況下，在當(dāng)前頁面中打開多個浮層彈窗，對其內(nèi)容進行編輯操作。

• 優(yōu)勢：同時進行多個操作，阻斷性弱。
• 劣勢：學(xué)習(xí)成本高，容易產(chǎn)生混亂，誤操作概率高。
• 適用場景：適用于多任務(wù)處理情況有較高的要求的場景。

4.4 抽屜

抽屜指的是從當(dāng)前界面的“上下左右”側(cè)邊滑出相應(yīng)的表單內(nèi)容完成相應(yīng)操作，之前的內(nèi)容不丟失。

• 優(yōu)勢：承載的信息量有較大的彈性空間。
• 劣勢：由于信息集中在一側(cè)，導(dǎo)致視覺焦點不穩(wěn)定，如果長時間工作，會產(chǎn)生不平衡的感覺。
• 適用場景：適用于當(dāng)前任務(wù)流中插入臨時任務(wù)的場景。

4.5 頁面跳轉(zhuǎn)

頁面跳轉(zhuǎn)是指在當(dāng)面頁面刷新，展示新內(nèi)容，多運用于初始化類型的表單錄入操作。

• 優(yōu)勢：信息承載能力強；有利于用戶對業(yè)務(wù)流程有更清晰的認(rèn)識，從而使得主流程的操作流暢度高。
• 劣勢：及時性反饋較低。
• 適用場景：適用于特別重要的功能表單的填寫場景。

4.6 新開頁面

新開頁面指的是當(dāng)前頁面保留，新的內(nèi)容在新頁面中呈現(xiàn)。停留的頁面可以為當(dāng)前頁面，也可以為新頁面，是情況而定。

• 優(yōu)勢：頁面之間相互獨立，互補不干擾。
• 劣勢：用戶的焦點丟失，注意力分散（因為系統(tǒng)中大部分的操作在同一個頁面中完成）。
• 適用場景：適用于需要參照一些文檔來幫助用戶完成表單錄入操作的場景。

五、表單內(nèi)容組織形式

在表單設(shè)計中，根據(jù)數(shù)據(jù)信息的容量來選擇合理的內(nèi)容組織形式，以此來保證信息屏效比和用戶操作效率。表單內(nèi)容的組織形式可以分為3種，分別為基礎(chǔ)平鋪、分組歸納、步驟引導(dǎo)。

5.1 基礎(chǔ)平鋪

基礎(chǔ)平鋪指的是將所有需要填寫的表單內(nèi)容項直接羅列在頁面上，針對內(nèi)容項較少、內(nèi)容項無法按照相關(guān)性分組的表單可以采用這種方式。

• 優(yōu)勢：簡潔直觀、便于操作。
• 劣勢：全部平鋪的信息會造成一定的用戶負(fù)擔(dān)。
• 使用場景：當(dāng)需要完成一個簡單快速的任務(wù)，例如輸入少量信息即可完成創(chuàng)建、注冊登陸表單。

5.2 分組歸納

分組歸納是對表單內(nèi)容進行分組，將相關(guān)聯(lián)的內(nèi)容放在一組，再按組羅列排布，有3種演變形式分別是：標(biāo)題分組、卡片分組、標(biāo)簽分組。將相同信息表單數(shù)據(jù)進行分組，這樣即使有很多信息疊加在一起，用戶在輸入上的心理壓力與視覺疲勞都會得到緩解。

• 優(yōu)勢：內(nèi)容分類歸組，便于快速定位，減輕焦慮感和填寫壓力。
• 劣勢：占用垂直空間。
• 使用場景：適用于一次需要填寫很多內(nèi)容的表單，且不同內(nèi)容之間存在分類歸納性。

5.3 步驟引導(dǎo)

步驟引導(dǎo)是將用戶需要填寫和確認(rèn)的信息按照線性流程組織，利用步驟條告知用戶完整流程和進度，常常在最后提交前讓用戶再次確認(rèn)信息，并在流程結(jié)束給與明確的結(jié)果反饋。

• 優(yōu)勢：任務(wù)流程清晰，明確當(dāng)前用戶目標(biāo)，減少用戶負(fù)擔(dān)；及時的反饋校驗，也避免填寫完成后才發(fā)現(xiàn)中間的表單填寫有誤，降低用戶的犯錯成本。
• 劣勢：無法通篇瀏覽表單內(nèi)容，回溯成本高。
• 使用場景：適用于具有明確的線性邏輯的任務(wù)的場景。

六、結(jié)語

以上就是我對表單設(shè)計知識點的一些總結(jié)，感謝大家抽出時間來閱讀這篇文章，也希望這篇文章可以給你帶來幫助。

下一篇文章我將通過實際項目復(fù)盤為大家分享：如何運用這些知識點，結(jié)合業(yè)務(wù)進行場景化的表單設(shè)計。

參考文獻

https://ant.design/index-cn

https://zhuanlan.zhihu.com/p/110096160

https://www.uisdc.com/text-fields-forms-design

https://mp.weixin.qq.com/s/8Nndu1yjjBMlBZ35FpSijw

https://www.uisdc.com/mobile-form-design-guide

http://zhangjingwei.cn/pd/4369965.html

https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0

本文由 @Nick 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議