『 PaaS平臺移動端表單組件改版項目小結(jié)』
近期以PaaS平臺表單組件改版項目為例對我司業(yè)務(wù)線產(chǎn)品經(jīng)理與設(shè)計師進行的一次經(jīng)驗分享與新組件實踐展示。
在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ù)。






































