B端設計組件:表單

7 評論 1.9萬 瀏覽 208 收藏 32 分鐘

編輯導語:表單的存在可以讓用戶更加清晰地獲取反饋結果,進而推動系統與用戶之間的信息與數據傳遞。那么,一個完整且合理的表單由哪些部分構成?本篇文章里,作者對B端設計組件之一——表單進行了總結,一起來看一下。

在B端產品中,表單是用戶向系統傳遞和修改數據信息的主要方式,同時也是系統獲取用戶數據、響應反饋結果的主要方式,可以說表單是人機交互中重要的數據媒介。

一、表單構成

一個完整的表單通常包括標題、必填提示、標簽、提示信息、占位符、輸入區、操作按鈕等幾部分。

  • 標題:一個表單模塊的主題,起到說明表單模塊是什么的作用。尤其是在分組表單中的作用更為明顯。
  • 必填提示:區分多個表單內容項的必填和非選填,一般常用紅色的“*”表示。
  • 標簽:表單內容項的名稱,說明對應表單含義以及向用戶說明應該錄入信息的類型。
  • 提示:輔助用戶理解操作表單,有引導信息 (說明提示) 和反饋信息用戶操作提示兩種。
  • 占位符:一種輔助用戶的錄入線索,位于輸入區。
  • 輸入區:表單結構中的核心區域,是用戶交互最集中、向系統傳遞信息的最前線,樣式和類型也最為豐富。
  • 操作按鈕:“完結”表單操作流程的觸發器,用于向服務器提交數據或者放棄操作。較復雜表單結構中的按鈕也更為復雜。

二、表單形式

1. 標題

概括表單模塊的主題,讓用戶快速了解接下來的要交互信息內容。相對簡單、容易被用戶理解的表單可以沒有標題,但表單相對復雜或者表單內容項多需要分類組織的時候,標題的重要性就突顯出來了。

2. 標簽

根據標簽與輸入區的位置來區分,可以分為左對齊、右對齊、頂對齊、內聯式、浮動式幾種。

1)左對齊

標簽位于輸入域左側,字段左對齊。

“I”字型的視覺動線更加符合現代人們的閱讀習慣,閱讀效率高的同時也利于用戶對標簽的整體瀏覽。但由于表單字段長短不一,造成部分標簽和輸入區之間的距離較大,從而降低了這些表單標簽和與其對應輸入區的親密性,用戶的錄入的效率也會隨之降低,橫向排列對頁面橫向空間有一定要求。

  • 優點:視覺動線符合人們閱讀習慣,在一定程度上節約縱向空間。
  • 缺點:標簽與相對應的輸入區間距大小不一,錄入效率降低,標簽、輸入區寬度度彈性小。

任何事物都是具有兩面性的,標簽與對應的輸入區距離過大會造成視覺斷點,影響閱讀的連續性,但有些場景需求就是需要引起人們注意,需要嚴肅、謹慎對待的時候,此時應用這種設計策略會達到較理想的效果。

2)右對齊

也叫冒號對齊,標簽位于輸入區左側,字段右對齊。

右對齊表單的標簽和輸入區之間的距離是固定的,標簽和輸入區之間有明確的視覺關聯,兩者之間的親密性較高。相對標簽簡短的表單,用戶閱讀、填寫的效率較高,但對于標簽長短不一的多個內容項,左側的參差不齊又會使得標簽不易于完整閱讀。橫向排列結構對頁面的橫向空間有一定的要求。

  • 優點:標簽與輸入區有明確的視覺關聯,閱讀、錄入效率較高,也在一定程度上節約縱向空間。
  • 缺點:表單左側排列參差不齊,整體閱讀性差,標簽、輸入區寬度彈性小。

3)頂對齊

標簽位于輸入區上方,字段與輸入區左對齊。標簽和輸入區的親密性強,“I”字型的視覺動線使得用戶閱讀、填寫效果較高。對于標簽字符長度大,尤其是外文標簽,頂對齊表單的適應性更強。上下排列結構對頁面的縱向空間有一定要求。

  • 優點:對齊方式符合視覺動線,閱讀、錄入效率高,標簽、輸入區的橫向彈性大。
  • 缺點:一定程度上占用縱向空間。

擴展:“I”字型視覺動線從上到下,“Z”字型視覺動線從左到右再從上到下?,F實生活中,人們對于左右的反應要弱于對上下,很多人對于分辨左右方向需要一定的反應時間,但對于上下幾乎是不假思索的。

4)內聯式

標簽在輸入區內,類似于輸入區的占位符。在用戶輸入過程中文字標簽隱藏,可能會引起用戶的迷茫,用戶填寫完成時不易復核,使用體驗一般。另外擴展性也較差,對輸入框較友好,而其他類型的表單 (平鋪單選、開關) 則會受到限制。

另一變種形式——圖標內聯式,雖在一定程度上緩解了用戶迷茫和懷疑心理,但一些語義性不強的圖標也會可能造成用戶的認知負擔,加大用戶學習成本。

  • 優點:橫向空間要求相對低,表單橫向彈性大。
  • 缺點:可能會造成用戶迷茫,加大用戶認知負擔和學習成本。

5)浮動式

標簽在輸入前位于輸入區類似占位符,輸入中 (后),標簽向上移動并變小,節約了空間的同時,標簽依然存在。

變小后的標簽雖一定程度上降低了可視性,但也保障了用戶錄入信息的準確性和可復核性。與其他幾種表單相比,開發實現的難度也相對應的增加了一些。

  • 優點:表單橫向彈性大,對縱向空間的要求也不高。
  • 缺點:需要一定的開發難度。

3. 輸入區錄入方式

輸入區是用戶交互最多也是最能影響使用體驗的區域,不同類型數據選擇與之相應的錄入方式,對提高表單操作效率和用戶體驗大有裨益。依據錄入方式的不同可以分為:文本錄入、選擇錄入、上傳錄入三種方式。

1)文本錄入

文本錄入是以文本形式提交信息的交互方式,操作成本較高且過程中又充滿不確定性,極易引起用戶情緒的波動。在處理這類表單的時候要著重考慮用戶錄入效率和使用體驗。

① 文本框(Input):輸入字符總數較少單行錄入形式。

② 文本域(Textarea):輸入字符總數較大且單一文本數據的錄入形式。

③ 搜索(Search):輸入關鍵字符快速從數據池中匹配與之對應的數據,幫助用戶縮小選擇范圍,快速獲取目標數據。

2)選擇錄入

選擇錄入是在已有的備選數據中做選擇,相較于文本錄入步驟更少、無輸入錯誤風險,錄入效率也更高。

① 單選框 (Radio):允許用戶在一組默認選項中選擇一個,每個選項互斥,有選中和未選中兩種狀態。

② 復選框 (Checkbox):用戶在一組默認選項中選擇多個,單個選項間相互獨立,常配合全選復選框使用,有全選、半選、未選三種狀態。

③ 開關(Switch):用于切換單個選項的狀態,適用于兩種相對立的狀態,如:開和關、顯示和隱藏、禁用和啟用等。

④ 下拉菜單(Dropdown):允許用戶從已有備選項中選擇一個選項或多個選項,相對于單選和復選,下拉菜單可以容納更多的選項數量,選項數量過于大時常與搜索框結合使用。

⑤ 滑塊選擇(Slider):用戶可以在一個連續或非連續的區間內,通過滑動錨點來選擇一個合適的數值或范圍。

需求精度要求不高的場景下使用「連續滑塊」可得到更靈活便捷的操作;需求精度要求高的場景下可配合「數字輸入」使用。

⑥ 日期選擇器(DatePicker):幫助用戶瀏覽和選擇日期,常見有日期選擇、時間選擇、日期時間選擇和相對應的范圍選擇。

選擇錄入數據的方式多種多樣,還有穿梭框、評分等日常使用頻率不高的形式。

3)文件上傳

文件上傳是上傳信息到服務器的一種數據錄入方式,常見有點擊上傳、縮略圖上傳、拖拽上傳。

① 點擊上傳:通過點擊上傳按鈕喚起的文件管理器來選擇需要上傳的文件,常用于單個文件上傳且不需要預覽的場景。

② 縮略圖上傳:也是通過文件管理器來選擇需要上傳的文件,常用于圖片上傳,上傳的圖片在頁面中呈縮略圖顯示,一般還可以直接在縮略圖片上賦予其他的交互 (查看、刪除等)。

③ 拖拽上傳:用戶拖拽文件到指定區域即可完成上傳,也支持點擊上傳。

4. 提示

提示信息的存在是為了輔助用戶更好地理解表單、提高錄入效率、順利完成操作任務的。主要有輸入前的引導信息和輸入中、輸入后的反饋信息。

1)引導信息

對表單填寫內容進行解釋說明的提示信息,給用戶提供錄入引導和暗示。有全局引導和內容項引導兩種。

① 全局引導:對整個表單的解釋說明,對于一些包含敏感信息表單,全局提示還包括信息的用途、安全性、保密性等,以此消除用戶不信任。

② 內容項引導:針對單個的內容進行精確引導提示,提示的形式也多種多樣,示例型占位符提示、說明文字提示、圖標和氣泡組合提示、輸入框聚焦提示等,其中圖標和氣泡的組合提示最為常用,對新手用戶、熟練用戶都很友好。

2)反饋信息

包括實時 (操作中) 校驗用戶錄入數據的合規性,和告知用戶操作后的結果狀態兩種。前者主要是前端校驗,用來判斷數據格式正確與否;后者主要是后端校驗,與數據庫進行交互匹配。

反饋信息要精準

表單錄入過程中需要留意反饋信息的時候,大概率是用戶錄入數據錯誤的時候(正確的話進行下面的操作了),此時輸入錯誤的反饋信息要足夠精確的描述錯誤原因,幫助用戶快速定位錯誤,輔助用戶合規錄入。

比如密碼錄入錯誤,不要僅僅提示“密碼輸入錯誤”,要盡可能提示能幫助用戶正確輸入密碼的話術如“密碼是區分字母大小寫和數字的組合,如:AAbb123”。

5. 操作按鈕

這里的操作按鈕常規意義上指的是“完結”表達操作的按鈕,常見在一些較簡單的表單場景。在復雜些的表單中,分別會在header區、body區、footer區放置影響全局屬性、僅影響跟隨對象、有“完結流程”屬性的按鈕。

按鈕本就是B端設計中的一個重大模塊,更多詳見“B端設計組件:按鈕”。

6. 必填提示

必填提示是在一個表單模塊中,用來區分哪些內容項是必填寫的,哪些是非必填的。通常用一個紅色的“*”表示,過多“*”會造成頁面視覺噪點的增多,給本就枯燥的表單頁面增加視覺壓力;有些情況下,紅色作為一種有特殊含義的顏色,會引起用戶誤解。

為避免過多的視覺噪點,我們可以利用標簽或者占位符來提示用戶哪些內容項是必填的,哪些是非必填的。

7. 占位符

位于輸入區內起引導用戶錄入作用,用戶錄入數據時就會消失,有示例型占位符和通用型占位符兩種。也可以算是一種輕量化的提示信息,與其他提示信息相比,視覺負擔較小,占用空間更小,與輸入內容的關聯性更強。

三、表單應用

B端業務場景復雜多樣,面對各種各樣的表單需求,怎么在滿足業務需求的前提下,兼顧頁面展示效率,保證用戶操作效率和使用體驗呢?根據表單任務復雜度的不同,將表單分為下面幾種形式去探討。

1. 基礎表單 (直鋪)

適合于內容項較少,內容項無明顯相關性的表單。

1)單列布局

在表單頁面橫向方向上放置一列表單,比較符合人們的閱讀習慣,“I”字型的視覺動線引導用戶從上到下瀏覽、填寫表單,內容項不多的前提下,是表單操作效率最高的布局方式。

2)多列布局

在表單頁面橫向方向上放置兩列或多列表單,這樣的布局會讓頁面的利用率得到提升,但“Z”字型的視覺動線引導用戶從左到右,再從上到下的閱讀,會使操作效率和用戶體驗在一定程度上打折扣。

2. 分組表單(卡片分組)

適合于內容項較多,且不同內容之中存在明顯相關性分類歸納的表單。

化繁為簡是人處理復雜事物常用的方法,通過分組的方式,我們可以將一個較大的的任務分解為幾個較小任務,化解表單在用戶視覺上的重量,相鄰小任務之間的間隔也相當于給用戶設置心理休息點,降低用戶面對大量錄入時的心理壓力。

3. 分步表單

適用于內容項復雜、有明確先后順序的的表單內容,將其按照一定的邏輯關系組織成線性流程,利用步驟條告知用戶完整流程和進度,當前流程只展示此流程下的表單內容,數據校驗也在此流程結束時完成。也是將復雜表單任務切割,提高錄入效率,提升用戶體驗的常用方式。

4. tab頁簽表單

適用于內容項復雜,且不同內容可以通過一定的邏輯進行分類歸納的表單內容,不同類別之間相互獨立,用戶可以切換不同類別瀏覽填寫所有表單數據,表單footer區放置具有“完結”流程屬性的操作按鈕。也屬于一種將復雜表單簡單化的方案。

5. 動態可編輯表單

動態可編輯是指表單內容項是不固定的,用戶可以按照實際業務需求對某些內容項進行動態增減。適用于內容項復雜,多任務嵌套使用的場景,常見有動態表單、動態表格、折疊面板、彈窗/抽屜編輯等。

1)動態表單

用戶通過動態增減表單數目來滿足業務需求,常見形式有一個固定的表單,通過增減按鈕可以設置表單數目,一般動態表單數目≤3。

2)動態表格

和動態表單的交互邏輯基本一致,外觀上是以表格形式展示,增減的動態數據數目建議3~6個。

3)折疊面板

適用于表單中明顯嵌套子任務的模式,收起狀態下只讀子任務設置,展開狀態則可以對子任務的設置進行編輯修改。

4)彈窗/抽屜編輯

常見的處理包含子任務流程、內容項復雜的表單模式,相較于折疊面板擴展性更強,承載的信息更多,一般而言,抽屜的信息承載能力大于彈窗。模態的彈窗/抽屜會打斷用戶的當前主流程,任務的切割感強。

四、實際應用中的一些思考

1. 表單輸入區的寬度要不要整齊劃一?

很多設計師在拿到表單需求的時候,都會潛意識地追求視覺上整齊劃一,強行將表單的寬度定為統一寬度。這種處理方式沒有深入思考表單應用規范和用戶填寫感受。事實上有秩序的“不一致”也不一定要比“整齊”的視覺感受差。

每一類型的表單的輸入區都會因其錄入需求存在合理的寬度,輸入區的寬度應該匹配和暗示其填寫的內容。合理的輸入區寬度,不僅能夠給用戶的輸入量提供心理預判,還提升整個表單操作過程中的掌控感。

表單在B端項目的應用場景十分豐富且復雜,針對每一種場景去定制也是不現實的。怎么去兼顧美觀和用戶的使用體驗呢?

結合Ant_Design的解決方案,我們可以定義一個基準輸入區寬度和幾個不同尺寸的輸入區,其寬度按照一定的內在邏輯去生長擴展。例如:基準輸入寬度XS = 128px,以其倍數 (n) 加上 (n-1) 倍的間距 (8px) 為規則,分為5種不同尺寸 (XS、S、M、L、XL)。

表單的外觀視覺雖呈現錯落有致,但在內在邏輯的約束下做到了“有秩序的不一致”。不僅解決了暗示用戶輸入量多少的問題,更是避免了設計師在面對表單時不必要的主觀和感性,同時開發人員也更容易地做到對設計稿的精準還原。

2. 表單中的隱藏交互

1)行內編輯

一種隱藏較深的富交互模式,一般應用于表格中的較短字段。

用戶鼠標滑過字段熱區通常會給予明顯的視覺反饋,向用戶提出交互邀請,點擊后原來的只讀狀態變成可編輯狀態,用戶修改后點擊頁面空白地方即可完成操作,被編輯字段除了的字段本身變化外,背景色也可以高亮一會來反饋用戶剛剛發生的編輯動作。

2)氣泡卡片

也是一種隱藏較深的一種富交互模式,用戶鼠標滑過字段熱區通常會給予明顯的視覺反饋,點擊后原來的只讀狀態變成可編輯狀態,并彈出氣泡編輯面板,用戶修改后點擊操作按鈕完成編輯,氣泡面板隨之消失,被編輯字段的背景高亮 (3秒),反饋用戶的編輯動作。

可給予用戶更大的操作自由度來防止用戶犯錯,在提示用戶操作成功的的全局提示框內,添加“撤銷”按鈕,給予用戶一定的“后悔藥”。一定時間 (5s) 后,全局提示消失,“撤銷”按鈕也隨之消失,用戶編輯的內容也就不能撤回。

3. 按鈕沒有滿足觸發條件時要不要禁用?

表單內容項沒有填寫完成的時候,操作區的主按鈕要不要禁用,處于一種置灰不可點擊的狀態,只有當滿足操作條件時才會高亮并有交互事件?

當表單的內容項非常少 (≤3) 時可以使用主按鈕禁用,用戶輸入內容按鈕高亮,這種反饋很容易被捕捉到,也易于用戶理解。當表單內容項多有必填和非必填同時存在的時候,此時主按鈕禁用會使得用戶產生疑問,過長的表單也使用戶也不易捕捉到按鈕反饋,此時可采用提交校驗來對表單信息是否完整進行提示,不建議使用主按鈕禁用。

4. 修改輸入區的內容,要不要快速清除按鈕?

修改表單輸入區已填寫內容時,有的會存在快速清除按鈕 (如:密碼輸入框),有的則沒有,這是為什么呢?

這里的關注點其實還是個效率的問題,這里的效率不只是一個個清除和一鍵清除的對比,還要考慮到重新錄入的效率。

面對一個需要修改的表單我們大概率會在清除后再次錄入的,這時候就要考慮錄入成本的高低。密碼輸入錯誤一鍵清除后,再次錄入也會很快地完成,此時應該為了提高效率應該使用一鍵清除;而表單中若是我們精心編寫的一段話,潤色也花費了不少時間,清除后重新錄入的的成本就會高很多,此時就應該謹慎提供一鍵清除。

判斷是否需要一鍵清空按鈕,首先需要判斷修改成本的高低,低輸入成本可以使用一鍵清空按鈕,輸入成本較高時,慎用一鍵清空按鈕。

5. 表單設計小技巧

1)?優先考慮選擇錄入

表單樣式能用選擇的就不要用文本錄入,盡量讓用戶做選擇,而不是填空 (填空的不確定性、成本高),除非想要降低操作效率。選擇錄入不僅僅交互步驟少,更能避免用戶對表單的一頭霧水以及輸入錯誤的情況。

2) 有限制輸入時,給予用戶明確的提示,增加用戶感知,減少出錯率。

3) 內容排列有邏輯

下拉菜單選項按照一定的邏輯排序,例如:根據重要程度。

4) 聯系上下自動補全

在實際的應用場景中,有些表單的信息是可以根據已填寫數據聯想得到的,此時就應該讓這些表單關聯已填寫的內容自動填寫,從而提升整個表單的錄入效率和使用體驗。

例如:在填寫一些與個人信息相關的表單時,輸入身份證號后,像省份、出生年月、性別、戶籍地址等可以從身份證號中關聯到的信息就應該自動填寫顯示出來,讓用戶檢查關聯出的信息正確與否以及修改錯誤信息即可。

更多表單設計小技巧 詳見第一篇文章《提升表單設計效果的18個技巧》

以上是作者在學習和實際工作中關于表單的一些思考和總結,歡迎大家指正交流。

 

本文由@小梗果 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
2人打賞
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 妥妥的干貨 謝謝分享

    回復
  2. 第五點的第一小點里圖片的備注文字忘記改啦

    回復
  3. ????

    回復
  4. 太棒了

    回復
  5. 寫的很詳細啦,一些平時沒有仔細思考的點都寫出來了,有收獲

    回復
  6. 做過程序的這是基礎

    回復
  7. 寫的很好,學到一些以前沒注意到的問題

    回復