在to B領(lǐng)域，做出邏輯復(fù)雜，功能強大但又簡單易用的產(chǎn)品一直都是產(chǎn)品經(jīng)理和設(shè)計師們追求的目標(biāo)，然而，表單設(shè)計作為最基礎(chǔ)的模塊，仍有大量的B端產(chǎn)品跌入深坑，被各種吐槽聲淹沒。今天，我們以PaaS平臺移動端表單改版為例，跟大家聊聊怎么做出“好看又好用的移動端表單”這個大難題。

一.本能設(shè)計 - 基礎(chǔ)體驗很重要

本能設(shè)計即用戶第一眼看到產(chǎn)品時的感受，表單是否清晰易懂會直接影響用戶填寫表單的意愿和情緒。

干凈漂亮，具備美學(xué)設(shè)計的界面更容易受到用戶青睞，包括了排版、色彩、字體、圖標(biāo)、圖片和操作流暢性等多個感官層面的體驗。如圖:

上圖為會議預(yù)訂業(yè)務(wù)表單改版前后，在視覺層面，改版后的表單頁面層級更加清晰，只讀字段與可編輯字段的視覺區(qū)分減小了用戶的識別壓力；在交互與體驗層面，對組件的出現(xiàn)方式進行了統(tǒng)一，同時加大了點擊區(qū)域，以提高信息密集長表單的錄入體驗。

二.想方設(shè)法幫用戶節(jié)省時間

B端產(chǎn)品的表單往往是復(fù)雜而冗長的, 因此以“幫用戶節(jié)省時間”為出發(fā)點,才能夠減少用戶的負(fù)面情緒, 提高表單的錄入成功率。例如：

上圖以調(diào)動申請業(yè)務(wù)的表單為例，將選擇表單項配置為單復(fù)選平鋪，內(nèi)容一目了然，方便用戶快速進行選擇，降低操作成本以提高數(shù)據(jù)錄入效率；

● 建議選項個數(shù)≤10的時候使用，以免全部平鋪占據(jù)大量空間；

● 建議選擇表單項為必填時使用,以提高該表單項的錄入效率和成功率。

上圖以薪酬業(yè)務(wù)表單為例，將身份信息證明表單項配置為平鋪按鈕組，內(nèi)容一目了然，方便用戶快速進行選擇，降低操作成本以提高數(shù)據(jù)錄入效率。

● 建議選項個數(shù)≤3的時候使用；

● 建議表單項為必填時使用,以提高該表單項的錄入效率和成功率;

● 建議應(yīng)用在內(nèi)容文字簡短的場景,如“男女”“高中低”等;

● 合理使用平鋪按鈕組會大大提高頁面的空間利用率。

三.基于行業(yè)屬性進行設(shè)計

每個行業(yè)、領(lǐng)域都有自己的特性，基于這些特性有針對性的提出解決方案，是提升用戶體驗的方式之一; 我們在對公司各業(yè)務(wù)線產(chǎn)品經(jīng)理需求調(diào)研中收到了這樣的反饋：目前Paas平臺表單組件支持字段幫助、提示語的展示，仍然有較多無法覆蓋到的場景。

例如: 在薪酬表單中，牽扯到較多的法規(guī)條例等需要用戶知曉的場景，是無法通過標(biāo)準(zhǔn)組件展示的，經(jīng)過調(diào)研評審后，我們把這些場景抽象為帶幫助的頭部卡片組件 :

上圖以薪酬業(yè)務(wù)為例，在表單頭部顯示幫助、說明等規(guī)則性文字，讓用戶快速了解填寫當(dāng)前表單需要注意的事項或說明，內(nèi)容可設(shè)置: 幫助標(biāo)題、幫助內(nèi)容、鏈接、頁面提示組件，每個部分都可靈活選擇是否需要，也可根據(jù)不同場景進行擴展使用：

四.小結(jié)

看似常見的表單設(shè)計，背后也有很多的設(shè)計思考。我們在做類似的設(shè)計時，首先需要保證基礎(chǔ)體驗的完善，然后結(jié)合對細(xì)節(jié)的把控和對業(yè)務(wù)、行業(yè)屬性的了解，有針對性的進行設(shè)計，這樣才能做到有理有據(jù)。