B端——復(fù)雜業(yè)務(wù)表單設(shè)計
一、前言
二、表單定義與構(gòu)成
2.1 表單定義

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

三、表單構(gòu)件解析
3.1 標(biāo)簽

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

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

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

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

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

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


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

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

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

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

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

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

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









3.3 提示信息


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


3.3 動作

四、表單的交互

4.1 原位編輯

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

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

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

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

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

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

優(yōu)勢:頁面之間相互獨立,互補不干擾。
劣勢:用戶的焦點丟失,注意力分散(因為系統(tǒng)中大部分的操作在同一個頁面中完成)。
適用場景:適用于需要參照一些文檔來幫助用戶完成表單錄入操作的場景。
五、表單內(nèi)容組織形式
5.1 基礎(chǔ)平鋪

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

優(yōu)勢:內(nèi)容分類歸組,便于快速定位,減輕焦慮感和填寫壓力。
劣勢:占用垂直空間。
使用場景:適用于一次需要填寫很多內(nèi)容的表單,且不同內(nèi)容之間存在分類歸納性。
5.3 步驟引導(dǎo)
優(yōu)勢:任務(wù)流程清晰,明確當(dāng)前用戶目標(biāo),減少用戶負擔(dān);及時的反饋校驗,也避免填寫完成后才發(fā)現(xiàn)中間的表單填寫有誤,降低用戶的犯錯成本。
劣勢:無法通篇瀏覽表單內(nèi)容,回溯成本高。
使用場景:適用于具有明確的線性邏輯的任務(wù)的場景。
六、結(jié)語



點擊“閱讀原文”
查看更多干貨

