本系列文章主要是想跟大家講講關(guān)于2B設(shè)計(jì)的一些套路，本文主要說的是表單設(shè)計(jì)。

原型設(shè)計(jì)應(yīng)該是入門產(chǎn)品的基本功了，通過原型設(shè)計(jì)把無形的各種idea變?yōu)橛行蔚漠a(chǎn)品頁面是我覺得非常有成就感的一件事。但是相比于2C，2B頁面級(jí)的設(shè)計(jì)給pm發(fā)揮的余地真的不多，但換言之就是有很多套路可循。

根據(jù)我對(duì)2B產(chǎn)品（主要是辦公、后臺(tái)系統(tǒng)）的片面理解，2B產(chǎn)品的核心就是對(duì)各種各樣數(shù)據(jù)“管理”。啥是“管理”呢，用人話說就是數(shù)據(jù)的“增刪改查”。

從數(shù)據(jù)流的角度看，“增刪改”都是對(duì)系統(tǒng)的輸入，在“查”的基礎(chǔ)上“顯”，可以看作系統(tǒng)向用戶的輸出。對(duì)應(yīng)到頁面上，很多時(shí)候我們會(huì)通過表單實(shí)現(xiàn)增、改的操作，另外可以通過數(shù)據(jù)統(tǒng)計(jì)、表格、詳情頁配合篩選、搜索來實(shí)現(xiàn)從不同維度來向用戶輸出，實(shí)現(xiàn)“查和顯”的操作。

這個(gè)系列的總結(jié)就想說說表單、表格、詳情頁這三個(gè)設(shè)計(jì)套路。

1. 為什么需要表單

軟件/系統(tǒng)/平臺(tái)本身是沒有信息的，像是一個(gè)空的架子，表單是用戶向系統(tǒng)輸入信息的一種非常重要的手段，只有用戶向系統(tǒng)添加了豐富的信息，系統(tǒng)才能實(shí)現(xiàn)其價(jià)值。

比如說下圖中的禪道軟件本身是沒有數(shù)據(jù)的，要實(shí)現(xiàn)其需求管理的價(jià)值，就需要用戶通過“提需求”的表單向系統(tǒng)輸入“需求”。只有有了需求的數(shù)據(jù)，后續(xù)的需求管理才能進(jìn)行。所以說表單是2B產(chǎn)品“管理”的第一步。

當(dāng)然還有更常見的用戶注冊，也是表單的一種。

更極端的一種表單是問卷調(diào)查，這種情況下表單有可能會(huì)非常非常非常長。

總的來說，表單對(duì)應(yīng)的是“增刪改查”中的“增”（有的時(shí)候也可能是“改”），是對(duì)系統(tǒng)的輸入，是用戶向數(shù)據(jù)庫寫入所需的數(shù)據(jù)，有了這些數(shù)據(jù)才能邁出整個(gè)產(chǎn)品實(shí)現(xiàn)管理價(jià)值的第一步。

2. 輸入什么

既然表單的主要用途是信息輸入，那么輸入什么內(nèi)容就值得仔細(xì)思考了。內(nèi)容的過多很容易引起用戶的焦慮和厭煩（想想那種特別長的問卷調(diào)查），內(nèi)容過少又不足以支撐后續(xù)操作。（比如資產(chǎn)管理系統(tǒng)中，后續(xù)的篩選功能需要“資產(chǎn)分類”，但是新增資產(chǎn)的表單中沒有這個(gè)字段就會(huì)引起錯(cuò)誤）

為了平衡用戶體驗(yàn)和支持后續(xù)操作，我自己總結(jié)表單的設(shè)計(jì)應(yīng)該遵循“不影響后續(xù)操作的最小化”原則。

設(shè)計(jì)表單內(nèi)容時(shí)，首先我會(huì)根據(jù)信息架構(gòu)框定一個(gè)范圍，一般表單的內(nèi)容應(yīng)該是信息架構(gòu)中相應(yīng)對(duì)象元數(shù)據(jù)的子集。然后我們可以對(duì)元數(shù)據(jù)進(jìn)行分類，分為必填項(xiàng)（不填寫后續(xù)操作無法進(jìn)行），選填項(xiàng)（不填寫不會(huì)影響后續(xù)操作，或者填寫比較繁瑣可以放在編輯中補(bǔ)充的信息），不填項(xiàng)（由系統(tǒng)生成的數(shù)據(jù)）。

為了保證“不影響后續(xù)操作的最小化”原則，表單填寫的內(nèi)容必須包括必填項(xiàng)，盡量包括少的選填項(xiàng)，不需要包括不填項(xiàng)。

還是舉一個(gè)“新增資產(chǎn)”的栗子：下圖右邊是資產(chǎn)對(duì)象的元數(shù)據(jù)，對(duì)每個(gè)元數(shù)據(jù)進(jìn)行分類。

• 比如【資產(chǎn)編碼】應(yīng)該由系統(tǒng)生成，所以在表單中不應(yīng)該填寫；
• 比如【資產(chǎn)名稱】是后續(xù)查詢、篩選、資產(chǎn)調(diào)撥等各種操作都需要用到的元素，所以必須在新增資產(chǎn)時(shí)就填寫；
• 比如【簡稱】是【資產(chǎn)名稱】的別名，可有可無，不會(huì)影響后續(xù)的操作，所以是選填項(xiàng)；
• 再比如【原價(jià)】、【使用年限】、【折舊方式】、【購買日期】字段是計(jì)算資產(chǎn)折舊所需要的，但是要填寫的內(nèi)容比較多，且折舊的計(jì)算相對(duì)獨(dú)立不影響主流程的操作，所以我把它們歸到了選填項(xiàng)，可以在必要的時(shí)候在“編輯”功能中再完善。

把所有元數(shù)據(jù)分類完后，可以得到下圖右邊的結(jié)果，我們的表單具體需要填什么，不需要填什么就比較清晰了。

3. 怎么輸入

在上一part中已經(jīng)確定了表單需要填寫哪些內(nèi)容，那么這一part就需要確定怎么填寫這些內(nèi)容。

表單輸入的形態(tài)大概有下邊這些（來自elementUI）,至于選擇哪種方式填寫，有一個(gè)原則就是“能選擇的不要輸入”，更優(yōu)秀一點(diǎn)的，必須輸入時(shí)也盡量通過聯(lián)想給用戶一點(diǎn)提示，這個(gè)放在下一part“友好的表單”里講。

上圖中必填項(xiàng)的【資產(chǎn)名稱】、【SN碼】、【型號(hào)】是需要輸入框填寫的，而【資產(chǎn)分類】由于業(yè)務(wù)需要采用國標(biāo)分類，所以可以做到通過選擇來填寫。

4. 友好的表單

作為用戶，很多人對(duì)填寫密密麻麻的表單感到頭大，雖然我們已經(jīng)在內(nèi)容上盡量精簡了，但還可以在表現(xiàn)形式上更加友好，讓我們的用戶不至于在填寫表單時(shí)候摔鍵盤。

（1）對(duì)齊

對(duì)齊主要是指表單標(biāo)簽的對(duì)齊，包括左對(duì)齊，右對(duì)齊和頂對(duì)齊三種：

antDesgin：“冒號(hào)對(duì)齊（右對(duì)齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號(hào)的視覺流，就能找到所有填寫項(xiàng)，從而提高填寫效率”。

頂對(duì)齊比較節(jié)約橫向空間，但縱向會(huì)比較長，所以移動(dòng)端用的多于web端。綜合來看，一般我會(huì)選擇右對(duì)齊。

（2）分塊分步

對(duì)于填寫項(xiàng)比較多的表單，最好對(duì)填寫項(xiàng)按照業(yè)務(wù)屬性進(jìn)行一個(gè)分組，相同屬性的信息一起填寫會(huì)比較符合用戶習(xí)慣。還是比如還是舉“新增資產(chǎn)”表單的栗子，按業(yè)務(wù)屬性可以把填寫項(xiàng)分為基本信息、使用信息、采購信息和折舊信息。

由于我們每一類信息數(shù)量都不是特別多，可以采用同一頁面分塊填寫的形式，如下：

當(dāng)每一類信息都比較多，加起來一個(gè)頁面需要滾動(dòng)時(shí)，或者每一類信息的填寫具有比較強(qiáng)的步驟性時(shí)，可以采用分步填寫的形式，如下：

（3）錯(cuò)誤反饋

數(shù)據(jù)校驗(yàn)的重要性每一個(gè)pm都應(yīng)該了解，通過數(shù)據(jù)校驗(yàn)我們可以保證用戶填寫的內(nèi)容符合我們的要求，不會(huì)使后續(xù)的操作發(fā)生異常。如果校驗(yàn)出現(xiàn)錯(cuò)誤，作為一個(gè)友好的系統(tǒng)，需要給用戶一個(gè)反饋告訴他們哪里出了問題。

在“增刪改查”四字口訣的擴(kuò)展版“增刪改查顯存異”中對(duì)應(yīng)“異”部分。

校驗(yàn)方式可以分為前端校驗(yàn)和后端校驗(yàn)兩種，前端校驗(yàn)可以實(shí)現(xiàn)有無輸入、輸入格式（要求輸入數(shù)字但輸入了文本、郵箱格式、手機(jī)號(hào)格式等）的校驗(yàn)，后端校驗(yàn)實(shí)現(xiàn)用戶名是否存在、密碼是否正確等需要比對(duì)數(shù)據(jù)庫的校驗(yàn)。

觸發(fā)校驗(yàn)的條件可以是每填寫完一項(xiàng)時(shí)校驗(yàn)，也可以是點(diǎn)擊“提交”時(shí)統(tǒng)一校驗(yàn)。由于有一些后端校驗(yàn)（比如校驗(yàn)用戶名、密碼是否正確）需要多項(xiàng)內(nèi)容填寫完才能進(jìn)行，為了統(tǒng)一我一般都會(huì)選擇點(diǎn)擊“提交”觸發(fā)校驗(yàn)。

錯(cuò)誤的顯示形式，為了讓用戶更直觀的找到錯(cuò)誤項(xiàng)，一般是在輸入/選擇框的下方用紅色文字提示，如下：

（4）幫助

2B業(yè)務(wù)中有些字段信息比較專業(yè)，用戶可能一下理解不了，所以我們需要給用戶一些指引，教給用戶填寫什么。

幫助的顯示形式主要是【？】圖標(biāo)+ 鼠標(biāo) hover 顯示幫助信息，或者是直接用灰色文字顯示在輸入框下方。第一種hover顯示的方式可以展示更多的內(nèi)容，輸入框下方顯示的方式更加直觀。

我一般會(huì)選擇第一種形式，除了對(duì)輸入內(nèi)容進(jìn)行描述外，一般會(huì)給出一個(gè)栗子，這樣的幫助更加直觀一點(diǎn)。第二種形式的幫助在輸入框比較多的時(shí)候會(huì)讓整個(gè)頁面顯得比較亂，而且還要處理和錯(cuò)誤校驗(yàn)信息顯示的關(guān)系，所以我一般不會(huì)用這種方式展示幫助信息。

（5）搜索、聯(lián)想與推薦

如果以下拉框選擇形式填寫信息，但是選項(xiàng)非常多，用戶會(huì)很難找到想要的選項(xiàng)。所以一旦選項(xiàng)需要滾動(dòng)查找，就最好加上搜索選項(xiàng)的功能。當(dāng)然最好可以把用戶使用次數(shù)較多的選項(xiàng)放在最前面“常用選項(xiàng)/熱門選項(xiàng)”里，形成一個(gè)小的推薦功能。

前邊在“怎么輸入”中說到“能選擇的盡量不輸入”，必須輸入時(shí)最好也可以聯(lián)想之前填寫過的信息，減少用戶的輸入量。比如“資產(chǎn)名稱”有千千萬沒法用選擇輸入，但之前在系統(tǒng)中用戶可能輸入過一些飲水機(jī)、電腦、辦公桌等名稱，之后很有可能還會(huì)再輸入這些名稱。當(dāng)然上邊說的推薦常用輸入的功能也同樣使用于輸入框。

（6）enter換行

enter換行是我覺得非常能提升用戶體驗(yàn)的小功能。在填寫完一個(gè)輸入框后，鍵盤輸入enter，光標(biāo)跳轉(zhuǎn)到下一個(gè)輸入框。在輸入內(nèi)容較多時(shí)，每次填寫完一個(gè)空都要鼠標(biāo)選中下一個(gè)輸入框親測很容易讓人失去耐心。

5. 參考

elementUI：https://element.eleme.cn/#/zh-CN/component/installation

antDesgin：https://ant.design/docs/spec/introduce-cn

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

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