編輯導(dǎo)語(yǔ)：B端的表單設(shè)計(jì)，對(duì)產(chǎn)品的體驗(yàn)起著至關(guān)重要的作用。作為收集信息、開展工作任務(wù)、形成產(chǎn)品閉環(huán)的關(guān)鍵步驟，表單要怎么設(shè)計(jì)更好呢？一起來(lái)看一下吧。

表單作為收集信息、開展工作任務(wù)、形成產(chǎn)品閉環(huán)的關(guān)鍵步驟。在一系列 B 端產(chǎn)品中，有較為高頻的應(yīng)用場(chǎng)景。隨著 B 端設(shè)計(jì)的精細(xì)化，表單設(shè)計(jì)對(duì) B 端產(chǎn)品的體驗(yàn)起到愈發(fā)關(guān)鍵作用。

本文從高效和清晰兩個(gè)表單設(shè)計(jì)原則出發(fā)，闡述b端產(chǎn)品的表單優(yōu)化思路。通過(guò)制定設(shè)計(jì)規(guī)范，對(duì)復(fù)雜的業(yè)務(wù)場(chǎng)景提供設(shè)計(jì)決策依據(jù)。

一、表單定義

表單頁(yè)是一種用于信息添加、錄入的頁(yè)面類型。用來(lái)確保用戶按照要求錄入信息提交給系統(tǒng)使用或引導(dǎo)用戶進(jìn)行應(yīng)用設(shè)置。表單的常見(jiàn)類型 基礎(chǔ)表單、分組表單、分步表單。

1. 基礎(chǔ)表單

是一種較為簡(jiǎn)單的表單類型，通常只需要少量的信息既可以完成的任務(wù)。如登陸注冊(cè)界面頁(yè)面等。

2. 分步表單

將復(fù)雜的填寫內(nèi)容按照線性流程進(jìn)行組織，并拆解成若干步驟。

好處：可以給予用戶明確的任務(wù)預(yù)期，快速了解填寫流程和進(jìn)度；降低用戶的填寫負(fù)擔(dān)，減少出錯(cuò)率。

1）常規(guī)分步表單

用戶需要在每個(gè)步驟完成之前點(diǎn)擊確認(rèn)才能進(jìn)入下一步，更加適用于具有明確線性順序的填寫步驟。

在實(shí)際應(yīng)用中用戶未通過(guò)第一步的填寫和校驗(yàn)，不可以進(jìn)行后面步驟的操作。也可以理解成如果不具備后面步驟的填寫條件，可以在第一步時(shí)就選擇放棄，這樣反而不會(huì)被用戶反感。但是，如果僅僅是因?yàn)樘顚憙?nèi)容過(guò)長(zhǎng)，而選擇常規(guī)分布表單，似乎無(wú)意地增加了用戶的填寫步驟，這時(shí)就比較推薦靈活分布表單。

2）靈活分步表單

在給予用戶分步選擇的同時(shí)（給予用戶充分預(yù)期）。將所有輸入字段直接展示出來(lái)，用戶也可以按照操作需求自定義輸入的順序。

此種方式更像是步驟條和錨點(diǎn)定位的組合，好處是用戶不必點(diǎn)擊下一步，也不必按照既有的線性順序，更加靈活完成信息錄入。

3. 分組表單

將需要填寫復(fù)雜的內(nèi)容歸類分組，分組內(nèi)容具有一定的相似性和可歸納性。和分步驟表單類似可以減輕用戶的操作負(fù)擔(dān)，提高操作效率。

小思考：這里大家可能會(huì)糾結(jié)，靈活分步表單和分組表單會(huì)比較類似。我的觀點(diǎn)是，首先要根據(jù)業(yè)務(wù)場(chǎng)景去選擇合適的表單樣式，其次這里的“靈活分步表單”可以是對(duì)分步表單的升級(jí)，也可以是對(duì)分組表單的升級(jí)，叫什么名稱其實(shí)不重要，重要的是能否幫助用戶高效地完成填寫任務(wù)。

二、背景

1）用戶側(cè)

在過(guò)往的工作中，我們通過(guò)對(duì)用戶調(diào)研，并對(duì)反饋進(jìn)行整理。發(fā)現(xiàn)用戶對(duì)表單使用問(wèn)題集中表現(xiàn)為使用效率低，填寫復(fù)雜。

2）設(shè)計(jì)側(cè)

設(shè)計(jì)師在設(shè)計(jì)表單時(shí)，對(duì)一些設(shè)計(jì)細(xì)節(jié)點(diǎn)認(rèn)知不一致，往往憑借已有的設(shè)計(jì)經(jīng)驗(yàn)開展設(shè)計(jì)工作。需要一個(gè)表單設(shè)計(jì)規(guī)范，去引導(dǎo)和規(guī)范設(shè)計(jì)工作。

三、設(shè)計(jì)策略

我們通過(guò)對(duì)現(xiàn)狀的分析，結(jié)合用戶調(diào)研，確定設(shè)計(jì)目標(biāo)為高效、清晰、組件化，并將設(shè)計(jì)目標(biāo)拆解為具體的可執(zhí)行動(dòng)作。

策略一：高效 – 提升用戶決策效率

目的：通過(guò)合理的信息組織，使用戶快速完成表單填寫。

• 行動(dòng) 1. 更少的瀏覽時(shí)間，合理的布局
• 行動(dòng) 2. 更短的視覺(jué)路徑，加強(qiáng)視覺(jué)引導(dǎo)
• 行動(dòng) 3. 更快的決策路徑，規(guī)范操作行為

策略二：清晰 – 明確填寫目標(biāo)

目的：幫助用戶理解表單填寫項(xiàng)的含義，準(zhǔn)確的填寫表單，降低出錯(cuò)率。

• 行動(dòng) 1. 暗示輸入長(zhǎng)度，減少用戶的認(rèn)知負(fù)擔(dān)
• 行動(dòng) 2. 視覺(jué)降噪，加強(qiáng)用戶感知，建立用戶心智
• 行動(dòng) 3. 有容錯(cuò)機(jī)制，有填寫錯(cuò)誤的校驗(yàn)提醒

四、關(guān)鍵行動(dòng)

策略一：高效 – 提升用戶決策效率

1）更少的瀏覽時(shí)間 – Lable 和 Input 的對(duì)齊方式

Lable 和 Input 的對(duì)齊方式，推薦選擇右對(duì)齊和頂對(duì)齊的方式。

Matteo Penzo 通過(guò)眼動(dòng)追蹤實(shí)驗(yàn)的方式，對(duì)表單中 Lable 的放置位置進(jìn)行深入研究。研究發(fā)現(xiàn)，對(duì)于用戶來(lái)說(shuō)，需要有一個(gè)從 Lable 到 Input 掃視的時(shí)間，來(lái)感知之間的聯(lián)系。其中，左對(duì)齊需要 500 毫秒，右對(duì)齊需要 240 毫秒，頂對(duì)齊需要 50 毫秒。填寫速度從快到慢依次是頂對(duì)齊、左對(duì)齊、右對(duì)齊。

為了提升表單在業(yè)務(wù)場(chǎng)景中使用效率，同時(shí)考慮到系統(tǒng)的美觀、有序，防止設(shè)計(jì)者僅憑個(gè)人經(jīng)驗(yàn)選擇 Lable 的對(duì)齊方式，我們推薦選擇頂對(duì)齊和右對(duì)齊兩種方式。

那么我們?cè)撊绾螌?duì)左對(duì)齊和頂對(duì)齊進(jìn)行選擇呢？

最直觀的區(qū)別是占空間大小和視覺(jué)美觀。頂對(duì)齊視覺(jué)相對(duì)平衡，所占橫向空間最小，缺點(diǎn)是需要較長(zhǎng)的屏幕縱向空間。右對(duì)齊因?yàn)槭芟?Lable 的寬度不固定，視覺(jué)效果較為參差，占橫向空間較大，但所占縱向空間較少。

考慮到內(nèi)部 B 端產(chǎn)品會(huì)涉及到大量的表單輸入項(xiàng)，為了節(jié)約縱向空間提升屏效。我們推薦一個(gè)系統(tǒng)優(yōu)先使用左對(duì)齊的方式，同時(shí)保留兩種對(duì)齊方式。并給出如下的選擇條件供設(shè)計(jì)師判斷。

頂對(duì)齊：

• 當(dāng)頁(yè)面橫向空間較少，比如在內(nèi)容較少的彈窗、抽屜、頁(yè)面分屏、頁(yè)面
• 更加聚焦填寫內(nèi)容，要求極高的填寫效率
• 不會(huì)因?yàn)?Lable 的長(zhǎng)度不固定，而引起視覺(jué)不平衡，視覺(jué)上整齊統(tǒng)一

左對(duì)齊：

• 當(dāng)縱向空間較少，填寫內(nèi)容多，需要提高屏效時(shí)
• 表單整體長(zhǎng)度較長(zhǎng)，需要用戶填寫項(xiàng)較多
• 相對(duì)頂對(duì)齊，可以節(jié)約大量的縱向空間，較常用的對(duì)齊方式

2）更短的視覺(jué)路徑 – 單列和多列

多列布局的格式，對(duì)相似的選項(xiàng)進(jìn)行閱讀。視覺(jué)路徑更長(zhǎng)，閱讀效率相對(duì)更低。

在 B 端業(yè)務(wù)中推薦運(yùn)用單列布局的形式，更短的視覺(jué)路徑，更高的閱讀效率。

但是在特定的業(yè)務(wù)訴求下，用戶對(duì)屏效的要求比較高，也可以采用多列布局的形式。

3）更快的決策路徑 – 按鈕的位置

參考 Ant Design ，“我們確定了一個(gè)清晰的設(shè)計(jì)策略來(lái)決策按鈕區(qū)位置：應(yīng)將按鈕放置于用戶瀏覽路徑中，便于被用戶發(fā)現(xiàn)，并且應(yīng)盡量靠近其所控制的對(duì)象。在未刻意建立信息層級(jí)引導(dǎo)視覺(jué)路徑時(shí)，經(jīng)典 “F” “Z” 網(wǎng)頁(yè)瀏覽模式作為了我們按鈕位置放置規(guī)則的基礎(chǔ)指導(dǎo)?！?/p>

F形閱讀模式：用戶的視線首先是水平移動(dòng)的瀏覽內(nèi)容區(qū)域的頂部，這是F的第一橫。接下來(lái)用戶的視線會(huì)沿著屏幕的左側(cè)向下移動(dòng)，如果找到感興趣的點(diǎn)，視線會(huì)繼續(xù)向右移動(dòng)，這是F的第二橫。最后用戶的視線會(huì)繼續(xù)沿著屏幕垂直向下移動(dòng)。

Z字形閱讀（古騰堡法則）：用戶關(guān)注流(通常含鼠標(biāo)移動(dòng))遵循一個(gè) Z 字形模式。視線流從左上到右下，左上角為第一視覺(jué)區(qū)，右下角為視覺(jué)終點(diǎn)區(qū)。

為了提升用戶的決策效率，我們對(duì)表單按鈕的擺放位置進(jìn)行了統(tǒng)一。當(dāng)單列布局時(shí)，按鈕的位置選擇跟隨表單。當(dāng)多列布局時(shí)，按鈕的位置在右下角。

策略二 ：清晰 – 明確填寫目標(biāo)

1）暗示輸入長(zhǎng)度 – Input 定寬

目前對(duì) Input 的寬度常見(jiàn)的處理方式有定款和自適應(yīng)兩種。常見(jiàn)在實(shí)際的業(yè)務(wù)場(chǎng)景中，大部分 Input 都有理想的輸入長(zhǎng)度。Input 的寬度應(yīng)該向用戶暗示需要輸入字符的長(zhǎng)短，給用戶明確的填寫預(yù)期?；诖?，我們選擇定寬的處理方式。

牛頓說(shuō)：“如果我看的更遠(yuǎn)，那是因?yàn)槲艺驹诰奕说募缟稀！?/p>

我們不妨站在巨人的肩膀上看問(wèn)題，根據(jù) Ant Design 的研究，得出5種高頻的表單寬度區(qū)間。寬度值是 XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。

為了呈現(xiàn)出錯(cuò)落有致的排列效果，倡導(dǎo)組合 Input 和單個(gè) Input 的對(duì)齊概率最大化，這樣Input的寬度差值可以呈現(xiàn)出一個(gè)固定規(guī)律，且總結(jié)出一種不同寬度尺碼的排列公式。

我們?cè)O(shè)定 XS 尺寸可以容納 7 個(gè)中文字段的 input 或 99999.00 的 number input。根據(jù)設(shè)計(jì)規(guī)范，此時(shí)寬度剛好為 100PX。并且根據(jù)公式推算出5種 Input的寬度，以及應(yīng)用場(chǎng)景。分別是XS=108PX、S=208PX、M=316PX、L=424PX、XL=532PX。

XS：我們?cè)O(shè)定支持輸入 5～7 個(gè)中文字符，7～10 個(gè)英文字符， 寬度為 108PX。

適用于：較短文本、短數(shù)字、選項(xiàng)、價(jià)格、數(shù)量。如：課程價(jià)格、學(xué)員性別、選擇時(shí)間點(diǎn)等。

S：支持輸入 14～16 中文字符，寬度為 208PX。

適用于：短文本和選項(xiàng)，如：學(xué)員姓名、學(xué)員電話、學(xué)員微信、郵箱、身份證、學(xué)員 ID 、課程 ID、日期段選擇等。

M：顯示23～25個(gè)中文字段，寬度為 316PX。

適用于：常規(guī)輸入框大小，適用于大部分字段長(zhǎng)度。如：課程名稱、班級(jí)名稱、模版名稱、日期時(shí)間段選擇等。

L：寬度為 424PX。

適用于：較長(zhǎng)字段錄入，適用于長(zhǎng)網(wǎng)址、標(biāo)簽組展示、文件路徑、集聯(lián)選擇器等。

XL：寬度為 532PX。

適用于：超長(zhǎng)文本的輸入，如：正文、描述、備注、簡(jiǎn)介等。

小結(jié)：我們根據(jù)此規(guī)范，對(duì)真實(shí)使用場(chǎng)景做優(yōu)化，有較為顯著的提升效果。在滿足填寫需求的同時(shí)，我們也通過(guò)設(shè)定的 Input 尺寸，給予用戶所輸入內(nèi)容長(zhǎng)短的心理預(yù)期。與表單自適應(yīng)規(guī)則不同，Input 定寬的處理方式可以降低適配過(guò)程中的視覺(jué)風(fēng)險(xiǎn)。同時(shí)，錯(cuò)落有致的布局，更接近真實(shí)的使用場(chǎng)景也符合設(shè)計(jì)美感。

2）視覺(jué)降噪 – 必填和選填的抉擇

大量的必填項(xiàng)小紅點(diǎn)會(huì)增加用戶的認(rèn)知負(fù)荷，產(chǎn)生焦躁的情緒，增加填錯(cuò)的風(fēng)險(xiǎn)。表單中的視覺(jué)噪聲越少可讀性越強(qiáng)。

當(dāng)必填項(xiàng)過(guò)多時(shí)，推薦選擇非必填提示的形式。

3）合理的預(yù)期-提示反饋

用戶在初次使用表單時(shí)，對(duì)各種定義、用途、使用條件等概念往往理解不清晰。我們希望用戶在填寫表單時(shí)，給予用戶清晰的引導(dǎo)和明確的填寫預(yù)期。這里我們對(duì)輸入說(shuō)明、輸入線索、錯(cuò)誤提示進(jìn)行規(guī)范。

輸入說(shuō)明：指在空白文本字段的旁邊或下方，放置一個(gè)短語(yǔ)或示例，解釋輸入內(nèi)容或提示輸入要求。

作用：

• 保持 Lable 標(biāo)簽字段簡(jiǎn)潔
• 補(bǔ)充說(shuō)明填寫要求，降低填寫難度，提高填寫的成功率

輸入線索：指用示例或說(shuō)明文本，以占位符的形式，引導(dǎo)、提示用戶輸入內(nèi)容。

作用：

• 以較少的占位空間，提示用戶，視覺(jué)負(fù)擔(dān)較輕
• 在輸入框內(nèi)，容易引起用戶的重視

錯(cuò)誤提示：是表單出現(xiàn)輸入錯(cuò)誤時(shí)，為用戶展示的一條引人注目的解釋性消息。

作用：

• 幫助用戶修復(fù)他們?cè)谳斎霑r(shí)遇到的問(wèn)題
• 讓用戶盡可能快速，輕松地完成任務(wù)

五、總結(jié)

本文根據(jù)用戶對(duì)于表單的使用痛點(diǎn)，挖掘出用戶目標(biāo)。將用戶目標(biāo)轉(zhuǎn)化為設(shè)計(jì)目標(biāo)，找到設(shè)計(jì)抓手。并將表單設(shè)計(jì)的思考，總結(jié)為規(guī)范，引導(dǎo)設(shè)計(jì)工作。

這里對(duì)表單設(shè)計(jì)規(guī)范作用的理解，不僅是為一些簡(jiǎn)單的業(yè)務(wù)場(chǎng)景，提供設(shè)計(jì)模版供設(shè)計(jì)師直接使用。更重要的意義是，面對(duì)復(fù)雜和未覆蓋的場(chǎng)景，設(shè)計(jì)規(guī)范可以為設(shè)計(jì)者決策提供設(shè)計(jì)依據(jù)和設(shè)計(jì)邊界。

感謝閱讀。

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

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