如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

表單作為平臺(tái)與用戶聯(lián)系最為緊密的一環(huán)，也是影響商業(yè)交易成功與否的重要分水嶺。良好的表單設(shè)計(jì)可以給用戶提供流暢自然的交易體驗(yàn)，保證用戶購(gòu)物情緒的正向增長(zhǎng)，而混亂無序的表單則引起用戶的負(fù)面情緒，影響甚至阻礙用戶交易的完成，降低用戶的品牌好感度和信賴度。

那么在設(shè)計(jì)過程中，需要怎樣規(guī)避風(fēng)險(xiǎn)，提升表單頁面的產(chǎn)品體驗(yàn)?zāi)?？下面我們將結(jié)合實(shí)際案例，從七個(gè)方面介紹表單設(shè)計(jì)中的常見注意事項(xiàng)。當(dāng)然，這些規(guī)則都是在表單設(shè)計(jì)中的一般準(zhǔn)則，每條準(zhǔn)則都有例外。

01  |  單列瀏覽

表單承載的主要功能是向用戶清楚地傳達(dá)信息，保持有秩序的單列表單形式更利于用戶瀏覽動(dòng)線，它能幫助用戶識(shí)別并填寫內(nèi)容，而多列的表單形式則會(huì)破壞用戶填寫規(guī)律，影響效率。

02  |  豎向排列

在表單中有多個(gè)選項(xiàng)以供用戶選擇時(shí)，將每個(gè)選項(xiàng)以豎向的排列方式位于每個(gè)選項(xiàng)下方時(shí)，更利于用戶閱讀瀏覽的習(xí)慣。

03  |  操作一致

表單填寫過程中我們應(yīng)當(dāng)避免在整流程中出現(xiàn)按鈕樣式、顏色的變化。需要用戶確認(rèn)的操作行為的一致能有效減少用戶在行動(dòng)時(shí)的困惑和猶豫，確保用戶在表單填寫過程中的流暢體驗(yàn)，從而實(shí)現(xiàn)最終商業(yè)上的交易成就。

04  |  標(biāo)題不可取代

雖然通過使用占位符代替標(biāo)題的方式擴(kuò)充了表單的填寫空間，減少了視覺噪音，但是這種做法并不利于用戶的短期記憶。一旦用戶觸發(fā)輸入，占位符消失，用戶可能會(huì)陷入這里該填寫什么的迷茫，必須刪除所有輸入內(nèi)容后才能再次顯示標(biāo)題，顯然，這是違背人性的。

05  |  輸入域符合預(yù)期

輸入域的長(zhǎng)度與預(yù)期輸入的內(nèi)容成正比，確保輸入字段長(zhǎng)度符合用戶心理預(yù)期，并能在表單中能完整呈現(xiàn)。

06  |  不隱藏基礎(chǔ)幫助信息

作為一個(gè)購(gòu)物流程中的信息確認(rèn)和采集環(huán)節(jié)，需要用戶對(duì)于購(gòu)買的產(chǎn)品有明確的認(rèn)知。因此在設(shè)計(jì)過程中對(duì)于用戶填寫表單有基礎(chǔ)幫助的信息應(yīng)該做強(qiáng)調(diào)或顯示設(shè)計(jì)，避免出現(xiàn)因?yàn)殡[藏幫助信息導(dǎo)致的客戶投訴。

07  |  減少二次確認(rèn)

基于OTA行業(yè)特性，出行表單業(yè)務(wù)對(duì)標(biāo)電商購(gòu)買表單業(yè)務(wù)需要填寫的信息更為冗長(zhǎng)，層級(jí)更為復(fù)雜，為了減少用戶填寫過程中的心理負(fù)擔(dān)，降低填寫難度，我們需要對(duì)不必要的信息進(jìn)行刪減或合并，為用戶信息輸入提供便利。

以注冊(cè)環(huán)節(jié)為例，在Web設(shè)計(jì)時(shí)往往會(huì)有二次確認(rèn)密碼的環(huán)節(jié)，但在移動(dòng)端這樣的操作會(huì)增加用戶填寫的負(fù)擔(dān)，因此大部分移動(dòng)端界面上我們不建議對(duì)用戶的密碼信息進(jìn)行二次確認(rèn)，轉(zhuǎn)而通過使用明文顯示或者優(yōu)化密碼消失交互的方法來改善這一環(huán)節(jié)的體驗(yàn)。

08  |  *號(hào)的使用

沿用通用符號(hào)習(xí)慣，在表單設(shè)計(jì)中若是對(duì)業(yè)務(wù)必填的信息，我們往往采用 * 號(hào)的形式來幫助用戶區(qū)分信息優(yōu)先級(jí)。但當(dāng)表單中必填信息多于非必填信息時(shí)，大量 * 號(hào)的應(yīng)用反而會(huì)給用戶認(rèn)知增加負(fù)擔(dān)，使得無法快速識(shí)別哪些是必須填寫的，哪些是不必須填寫的。因此在表單設(shè)計(jì)中，當(dāng)必填項(xiàng)多于非必填項(xiàng)時(shí)，隱藏 * 號(hào)標(biāo)記，轉(zhuǎn)而通過暗提示標(biāo)記非必填項(xiàng)的形式來幫助用戶識(shí)別。

09  |  暗提示的應(yīng)用

暗提示作為輔助用戶填寫表單的主要方式，在設(shè)計(jì)上，需要盡可能地減少視覺噪音，確保文案言簡(jiǎn)意賅，表現(xiàn)形式不干擾用戶。因此，對(duì)比度過深或過淺，色彩過于突出的都不適合用于暗提示的視覺表現(xiàn)。

在交互上，暗提示也并不是一直存在的。當(dāng)光標(biāo)觸發(fā)表單項(xiàng)時(shí)，暗提示保持顯示，指導(dǎo)用戶輸入。而當(dāng)用戶輸入字段后，暗提示內(nèi)容隱藏，讓用戶專注于已填內(nèi)容。

10  |  設(shè)置默認(rèn)選項(xiàng)

在復(fù)雜表單中，對(duì)于如證件類型、手機(jī)區(qū)號(hào)、國(guó)籍等較為通用的選項(xiàng)，為用戶提供默認(rèn)選擇的交互可以有效簡(jiǎn)化操作步驟，減輕用戶填寫表單的負(fù)擔(dān)，更快地幫助用戶完成表單內(nèi)容的填寫。

11  |  替代輸入

對(duì)于表單填寫過程中可以固化選擇的信息，應(yīng)讓用戶進(jìn)行選擇操作以代替手動(dòng)輸入，盡可能地讓用戶減少輸入成本。

如：出游人信息采集時(shí)，提供添加常用出游人選項(xiàng)可以幫助減少重復(fù)填寫的負(fù)擔(dān)；證件類型采集時(shí)提供證件類型選項(xiàng)可以減少用戶困惑，在已有的選項(xiàng)中快速選擇；郵箱采集時(shí)自動(dòng)聯(lián)想顯示Email網(wǎng)址可以輔助用戶規(guī)范文本格式，快速完成表單填寫。

12  |  鍵盤匹配

根據(jù)表單填寫類型的不同，自動(dòng)匹配鍵盤類型。如“中文輸入”呼出中文鍵盤，“姓名（英文）”輸入呼出鎖定大寫的英文鍵盤，“手機(jī)號(hào)碼”輸入呼出數(shù)字鍵盤……免去用戶切換鍵盤操作的步驟。

同時(shí)根據(jù)填寫步驟，合理的定義鍵盤右下角的功能鍵，幫助用戶實(shí)現(xiàn)換行/完成的操作，省去用戶收起點(diǎn)開鍵盤的重復(fù)動(dòng)作和表單上下填寫項(xiàng)的切換，讓填寫表單的過程更為順暢，用戶思考不被打斷。

13  |  按鈕層級(jí)

在用戶面對(duì)多個(gè)按鈕的場(chǎng)景選擇時(shí)，我們應(yīng)當(dāng)幫助用戶預(yù)先區(qū)分出主要行動(dòng)和次要行動(dòng)，通過視覺語言強(qiáng)調(diào)主要按鈕，弱化次要按鈕，引導(dǎo)用戶進(jìn)行選擇。

14  |  二次確認(rèn)

因移動(dòng)端特性，用戶在填寫場(chǎng)景較為不穩(wěn)定如吃飯途中、行駛途中等，當(dāng)用戶花費(fèi)精力填寫了部分表單信息后，為了防止用戶誤操作而丟失已填信息的場(chǎng)景，需要在此時(shí)進(jìn)行二次操作確認(rèn)，確認(rèn)用戶操作意圖。當(dāng)然，如果用戶沒有對(duì)表單進(jìn)行任何編輯，這樣的退出操作是不需要二次確認(rèn)的。

15  |  多行文本

在復(fù)雜表單中，面對(duì)填寫內(nèi)容過長(zhǎng)的同類表單，用戶會(huì)在預(yù)覽時(shí)產(chǎn)生輸入壓力。運(yùn)用字號(hào)、顏色、間距等視覺手段將相似層級(jí)的信息進(jìn)行邏輯分組，幫助用戶更好地區(qū)分多行文本的信息層級(jí)，便于輸入。

16  |  號(hào)碼組合規(guī)律

對(duì)于一些常用的號(hào)碼字段，可以采用線下通用的數(shù)字組合規(guī)律幫助用戶閱讀和記憶，如電話號(hào)碼的組合規(guī)律為 3 4 4 ，銀行卡號(hào)的組合規(guī)律為 4 4 4 4 3?？崭裨跀?shù)字呈現(xiàn)處的應(yīng)用雖然細(xì)微，但是在長(zhǎng)數(shù)字的閱讀場(chǎng)景中仍能給用戶帶來識(shí)別便利。

17  |  選項(xiàng)露出

在網(wǎng)頁端表單設(shè)計(jì)中，用戶在表單填寫中需要對(duì)選項(xiàng)進(jìn)行選擇時(shí)，常用的交互形式是在選擇器的下拉列表中進(jìn)行選項(xiàng)的二次點(diǎn)擊。而在移動(dòng)端設(shè)計(jì)中，觸發(fā)選擇器后的二次點(diǎn)擊會(huì)增加用戶的填寫成本。所以在設(shè)計(jì)時(shí)，當(dāng)選項(xiàng)少于8時(shí)，在表單中直接顯示所有可選項(xiàng)，當(dāng)選項(xiàng)超出過多時(shí)則在列表浮層中進(jìn)行選擇。

18  |  減少頁面跳轉(zhuǎn)

在表單填寫中我們期望用戶保持專注，盡量避免產(chǎn)生引導(dǎo)用戶離開當(dāng)前頁面的填寫交互，這種交互跳轉(zhuǎn)很容易打斷用戶固有的行為軌跡。因此運(yùn)用浮層、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式。

19  |  關(guān)聯(lián)標(biāo)記

當(dāng)用戶提交表單信息后，如已填寫的內(nèi)容有偏差，需要明確的標(biāo)記有問題的數(shù)據(jù)及錯(cuò)誤原因，幫助用戶找到問題并解決問題。杜絕報(bào)錯(cuò)信息描述模糊，信息不關(guān)聯(lián)的報(bào)錯(cuò)信息引發(fā)用戶困惑。

20  |  實(shí)時(shí)校驗(yàn)

在某些業(yè)務(wù)場(chǎng)景中，為了幫助用戶在提交信息前校正他所填寫的內(nèi)容，避免大面積報(bào)錯(cuò)場(chǎng)景的出現(xiàn)。我們可以使用實(shí)時(shí)校驗(yàn)的方法，在用戶輸入完成后進(jìn)行判斷及結(jié)果反饋，如登陸注冊(cè)流程的驗(yàn)證碼校驗(yàn)就可以運(yùn)用實(shí)時(shí)校驗(yàn)的報(bào)錯(cuò)方式。

當(dāng)然需要注意的是，運(yùn)用實(shí)時(shí)校驗(yàn)的表單需在用戶明確離開此項(xiàng)輸入狀態(tài)時(shí)再進(jìn)行結(jié)果反饋，而非在填寫過程中進(jìn)行實(shí)時(shí)校驗(yàn)，避免出現(xiàn)填寫時(shí)持續(xù)報(bào)錯(cuò)的情況。

21  |  密碼保護(hù)

在輸入密碼的表單中，部分平臺(tái)會(huì)在密碼輸入時(shí)顯示暗文字段以此保護(hù)用戶隱私，而鑒于前述第七條準(zhǔn)則，移動(dòng)端的密碼已簡(jiǎn)化至只輸入一次，暗文的顯示會(huì)讓用戶無法確認(rèn)所輸密碼信息。因此在需要隱私保護(hù)的場(chǎng)景下，我們需要完善密碼交互的呈現(xiàn)形式，當(dāng)輸入時(shí)，輸入位短暫顯示為明文，保持1秒或者保持到下一位密碼輸入后再變成暗文，這樣的交互改善可以確保用戶在輸入中明確內(nèi)容，也滿足了其隱私需求。

22  |  提交反饋

在用戶完成整個(gè)任務(wù)環(huán)節(jié)時(shí)，提供成功或失敗的反饋能讓用戶在枯燥的表單填寫后有更強(qiáng)烈的情感反饋。所以在設(shè)計(jì)時(shí)，我們需要提供正向的激勵(lì)夸贊用戶表單填寫成功，在表單沒有完成時(shí)鼓勵(lì)用戶修改內(nèi)容，重新提交，不可以負(fù)面情緒責(zé)怪用戶。

今年上半年，本著提升途牛產(chǎn)品調(diào)性，為內(nèi)容傳達(dá)提效的初衷，由途牛UED組織并發(fā)起了一次針對(duì)現(xiàn)有關(guān)鍵頁面升級(jí)的項(xiàng)目，在架構(gòu)升級(jí)全量推進(jìn)初期，我們優(yōu)先選取了酒店表單業(yè)務(wù)作為此次設(shè)計(jì)重構(gòu)的首選試驗(yàn)點(diǎn)。

表單作為一個(gè)偏理性的產(chǎn)品，直接影響著用戶決策到產(chǎn)品轉(zhuǎn)化的數(shù)據(jù)，在此環(huán)節(jié)，更需要降低用戶成本，維持產(chǎn)品決策熱情以實(shí)現(xiàn)商業(yè)價(jià)值上的成功。在酒店表單業(yè)務(wù)改版過程中，除了應(yīng)用上述七方面的設(shè)計(jì)準(zhǔn)則幫助提升用戶體驗(yàn)，我們也結(jié)合了酒店現(xiàn)有問題和產(chǎn)品特性進(jìn)行了更為精細(xì)化的設(shè)計(jì)重構(gòu)。

整合信息框架

—

體制讓步

對(duì)用戶來說，途牛是一個(gè)整體的產(chǎn)品，所有表單的基礎(chǔ)體驗(yàn)應(yīng)該是一致的。以往，基于企業(yè)平臺(tái)的發(fā)展，酒店細(xì)分的國(guó)內(nèi)酒店和國(guó)際酒店兩個(gè)業(yè)務(wù)相對(duì)獨(dú)立，雖然同樣隸屬于下單環(huán)節(jié)，但是業(yè)務(wù)迭代進(jìn)程及側(cè)重方向的不同導(dǎo)致表單前臺(tái)呈現(xiàn)差異較大。

借助途牛整體關(guān)鍵頁面升級(jí)的項(xiàng)目，在此次酒店業(yè)務(wù)重構(gòu)初期，協(xié)同兩個(gè)業(yè)務(wù)的產(chǎn)品、設(shè)計(jì)、研發(fā)我們共同整合資源，解決歷史遺留體驗(yàn)問題，為國(guó)內(nèi)、國(guó)際酒店表單業(yè)務(wù)進(jìn)行整體體驗(yàn)的統(tǒng)一和提升助力。另一方面，UED也通過酒店業(yè)務(wù)的試點(diǎn)思路，將基礎(chǔ)表單框架進(jìn)行模塊細(xì)分，逐步影響并推廣至全站表單業(yè)務(wù)升級(jí)。

框架構(gòu)建

回顧現(xiàn)有酒店表單業(yè)務(wù)的問題，主要體現(xiàn)在內(nèi)容層級(jí)模糊，類型樣式混亂上。這些隨著每一次迭代需求增加而新增的表單項(xiàng)，只是基于業(yè)務(wù)類型進(jìn)行了單模塊的設(shè)計(jì)，而對(duì)于用戶來說，差異化的表單項(xiàng)樣式無形中增加了填寫時(shí)信息獲取的成本。

基于人體本身的生理構(gòu)造，我們?cè)讷@取文本信息時(shí)，并不會(huì)逐字閱讀，往往采用“掃視”的方式識(shí)別段落輪廓從而獲取信息，規(guī)律性的排列方式也會(huì)幫助持續(xù)這種“掃視”的節(jié)奏，提升信息轉(zhuǎn)化效率。

因此在設(shè)計(jì)上我們遵循相似信息一致性的原則，簡(jiǎn)化重復(fù)冗余的視覺噪音，將每個(gè)單元表單項(xiàng)模型遵循“上類型+下內(nèi)容”的形式幫助用戶快速對(duì)所需填寫的表單類型建立心理預(yù)期。在大量相同的填寫區(qū)域，統(tǒng)一左側(cè)內(nèi)容標(biāo)題對(duì)齊方式，并通過字色、字重等形式確保未觸發(fā)時(shí)內(nèi)容標(biāo)題為主，暗提示為輔，填寫后填寫內(nèi)容為主，內(nèi)容標(biāo)題為輔的視覺表達(dá)，從而在表單的不同階段仍舊保證了用戶對(duì)于主次信息的識(shí)別體驗(yàn)。

品牌信息傳達(dá)

為了減弱表單填寫頁冰冷感，在框架信息整合的基礎(chǔ)上，我們此次改版也將品牌解構(gòu)，用色彩的形式融入表單頁面設(shè)計(jì)，將品牌功能化，輔助產(chǎn)品以深化品牌用戶心中形成立體感知。

當(dāng)然品牌功能化的融入也需要有所限制，此次我們主要從氛圍、控件、操作、提示這四個(gè)方面展開，在不影響表單主要信息呈現(xiàn)的基礎(chǔ)上，遵循適度、適量?jī)蓚€(gè)原則。

內(nèi)容層級(jí)排序

—

用戶吸引

回顧整個(gè)購(gòu)買流程，填寫訂單業(yè)務(wù)承擔(dān)著維系用戶在產(chǎn)品詳情所產(chǎn)生的內(nèi)容吸引到內(nèi)容轉(zhuǎn)化的責(zé)任，而如何在枯燥的酒店表單中維穩(wěn)甚至加固用戶的內(nèi)容吸引？為此，我們參照了《Actionable Gamification》關(guān)于人性八大核心驅(qū)動(dòng)力中的“擁有感&占有欲”和“失去&避免”這兩條來幫助我們。

結(jié)合對(duì)用戶使用場(chǎng)景的需求分析，我們將信息在用戶心中的關(guān)注度進(jìn)行了重新排序，首屏弱化了用戶已經(jīng)在詳情頁明確的酒店名稱，轉(zhuǎn)而對(duì)用戶需在此環(huán)節(jié)明確的房型、入住時(shí)間、離店時(shí)間等內(nèi)容進(jìn)行了強(qiáng)化和整合，明確產(chǎn)品歸屬。同時(shí)為了加固用戶的內(nèi)容吸引，我們前置了酒店“超值價(jià)”、“可免費(fèi)取消”等信息來解除用戶對(duì)于產(chǎn)品價(jià)格和沉沒成本的疑慮，從而正向地激勵(lì)用戶完成后續(xù)的表單填寫。

細(xì)分模塊

除了對(duì)首屏信息的排序重置外，對(duì)于需要用戶填寫的每個(gè)單元模塊我們也做出了一些調(diào)整。

如取消險(xiǎn)模塊，此前為避免客訴，將所有需要用戶確認(rèn)和查看的信息都進(jìn)行了高亮提示和行動(dòng)引導(dǎo)。這些信息雖然是我們需要用戶知道的，但并不一定是用戶在填寫時(shí)想要詳細(xì)了解的，過多的信息干擾反而影響了有用信息識(shí)別，也降低了用戶填寫表單的效率。因此新版表單重構(gòu)時(shí)我們將協(xié)議信息整合至末尾統(tǒng)一確認(rèn)，同時(shí)對(duì)文字、icon進(jìn)行視覺減負(fù)，統(tǒng)一弱化輔助信息呈現(xiàn)，轉(zhuǎn)而強(qiáng)調(diào)用戶需要確認(rèn)的取消險(xiǎn)金額和投保人模塊。

從上圖國(guó)際酒店改版前后的方案進(jìn)行對(duì)比可見，每個(gè)細(xì)分模塊都有著或多或少細(xì)節(jié)的調(diào)整，當(dāng)然還有沒有展現(xiàn)的輔助信息交互浮層框架的統(tǒng)一。這些信息呈現(xiàn)的形態(tài)與交互的邏輯也都遵循著前文“保持秩序、描述清晰、化繁為簡(jiǎn)、幫助用戶、信息分組、減少跳轉(zhuǎn)、及時(shí)反饋”這七大原則，每一個(gè)細(xì)節(jié)都可以展開來細(xì)細(xì)剖析，這里就不多加贅述了。

結(jié)語

—

蚍蜉亦可撼樹，在產(chǎn)品升級(jí)的過程中，用戶體驗(yàn)的提升往往需要依靠像表單這樣一個(gè)個(gè)微小的業(yè)務(wù)作為突破點(diǎn)，從而裂變反哺至全局。此次酒店表單重構(gòu)項(xiàng)目從產(chǎn)品角度來看，功能上并沒有改變，而通過代入用戶場(chǎng)景，用戶感知，用戶行為習(xí)慣等方面進(jìn)行細(xì)節(jié)的體驗(yàn)升級(jí)。后續(xù)我們還將進(jìn)行更加深入地探索與迭代，將體驗(yàn)升級(jí)持續(xù)擴(kuò)散至其他業(yè)務(wù)，為每一位途牛用戶帶來更便捷、更自然的出行體驗(yàn)。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。