UI進階乾貨 - 表單

表單作為平臺與使用者聯絡最為緊密的一環，也是影響商業交易成功與否的重要分水嶺。良好的表單設計可以給使用者提供流暢自然的交易體驗，保證使用者購物情緒的正向增長，而混亂無序的表單則引起使用者的負面情緒，影響甚至阻礙使用者交易的完成，降低使用者的品牌好感度和信賴度。

那麼在設計過程中，需要怎樣規避風險，提升表單頁面的產品體驗呢？下面我們將結合實際案例，從八個方面介紹表單設計中的常見注意事項。當然，這些規則都是在表單設計中的一般準則，每條準則都有例外。

一、保持秩序

1. 單列瀏覽

表單承載的主要功能是向用戶清楚地傳達資訊，保持有秩序的單列表單形式更利於使用者瀏覽動線，它能幫助使用者識別並填寫內容，而多列的表單形式則會破壞使用者填寫規律，影響效率。

2. 豎向排列

在表單中有多個選項以供使用者選擇時，將每個選項以豎向的排列方式位於每個選項下方時，更利於使用者閱讀瀏覽的習慣。

3. 操作一致

表單填寫過程中我們應當避免在流程中出現按鈕樣式、顏色的變化。需要使用者確認的操作行為的一致能有效減少使用者在行動時的困惑和猶豫，確保使用者在表單填寫過程中的流暢體驗，從而實現最終商業上的交易成就。

二、描述清晰

1. 標題不可取代

雖然透過使用佔位符代替標題的方式擴充了表單的填寫空間，減少了視覺噪音，但是這種做法並不利於使用者的短期記憶。一旦使用者觸發輸入，佔位符消失，使用者可能會陷入這裡該填寫什麼的迷茫，必須刪除所有輸入內容後才能再次顯示標題，顯然，這是違揹人性的。

2. 輸入域符合預期

輸入域的長度與預期輸入的內容成正比，確保輸入欄位長度符合使用者心理預期，並能在表單中完整呈現。

3. 不隱藏基礎幫助資訊

作為一個購物流程中的資訊確認和採集環節，需要使用者對於購買的產品有明確的認知。因此在設計過程中對於使用者填寫表單有基礎幫助的資訊應該做強調或顯示設計，避免出現因為隱藏幫助資訊導致的客戶投訴。

三、化繁為簡

1. 減少二次確認

基於 OTA行業特性，出行表單業務對標電商購買表單業務需要填寫的資訊更為冗長，層級更為複雜，為了減少使用者填寫過程中的心理負擔，降低填寫難度，我們需要對不必要的資訊進行刪減或合併，為使用者資訊輸入提供便利。以註冊環節為例，在 Web 設計時往往會有二次確認密碼的環節，但在移動端這樣的操作會增加使用者填寫的負擔，因此大部分移動端介面上我們不建議對使用者的密碼資訊進行二次確認，轉而透過使用明文顯示或者最佳化密碼消失互動的方法來改善這一環節的體驗。

2. *號的使用

沿用通用符號習慣，在表單設計中若是對業務必填的資訊，我們往往採用 * 號的形式來幫助使用者區分資訊優先順序。但當表單中必填資訊多於非必填資訊時，大量 * 號的應用反而會給使用者的認知增加負擔，使得無法快速識別哪些是必須填寫的，哪些是不必須填寫的。因此在表單設計中，當必填項多於非必填項時，隱藏 * 號標記，轉而透過暗提示標記非必填項的形式來幫助使用者識別。

四、幫助使用者

1、暗提示的應用

暗提示作為輔助使用者填寫表單的主要方式，在設計上，需要儘可能地減少視覺噪音，確保文案言簡意賅，表現形式不干擾使用者。因此，對比度過深或過淺，色彩過於突出的都不適合用於暗提示的視覺表現。

在互動上，暗提示也並不是一直存在的。當游標觸發表單項時，暗提示保持顯示，指導使用者輸入。而當用戶輸入欄位後，暗提示內容隱藏，讓使用者專注於已填內容。

2. 設定預設選項

在複雜表單中，對於如證件型別、手機區號、國籍等較為通用的選項，為使用者提供預設選擇的互動可以有效簡化操作步驟，減輕使用者填寫表單的負擔，更快地幫助使用者完成表單內容的填寫。

3. 替代輸入

對於表單填寫過程中可以固化選擇的資訊，應讓使用者進行選擇操作以代替手動輸入，儘可能地讓使用者減少輸入成本。如：出遊人資訊採集時，提供新增常用出遊人選項可以幫助減少重複填寫的負擔；證件型別採集時提供證件型別選項可以減少使用者困惑，在已有的選項中快速選擇；郵箱採集時自動聯想顯示 Email 網址可以輔助使用者規範文字格式，快速完成表單填寫。

4. 鍵盤匹配

根據表單填寫型別的不同，自動匹配鍵盤型別。如「中文輸入」撥出中文鍵盤，「姓名（英文）」輸入撥出鎖定大寫的英文鍵盤，「手機號碼」輸入撥出數字鍵盤……免去使用者切換鍵盤操作的步驟。

同時根據填寫步驟，合理的定義鍵盤右下角的功能鍵，幫助使用者實現換行/完成的操作，省去使用者收起點開鍵盤的重複動作和表單上下填寫項的切換，讓填寫表單的過程更為順暢，使用者思考不被打斷。

5. 按鈕層級

在使用者面對多個按鈕的場景選擇時，我們應當幫助使用者預先區分出主要行動和次要行動，透過視覺語言強調主要按鈕，弱化次要按鈕，引導使用者進行選擇。

6. 二次確認

因移動端特性，使用者在填寫場景較為不穩定，如吃飯途中、行駛途中等，當用戶花費精力填寫了部分表單資訊後，為了防止使用者誤操作而丟失已填資訊的場景，需要在此時進行二次操作確認，確認使用者操作意圖。當然，如果使用者沒有對錶單進行任何編輯，這樣的退出操作是不需要二次確認的。

五、資訊分組

1. 多行文字

在複雜表單中，面對填寫內容過長的同類表單，使用者會在預覽時產生輸入壓力。運用字號、顏色、間距等視覺手段將相似層級的資訊進行邏輯分組，幫助使用者更好地區分多行文字的資訊層級，便於輸入。

2. 號碼組合規律

對於一些常用的號碼欄位，可以採用線下通用的數字組合規律幫助使用者閱讀和記憶，如電話號碼的組合規律為 3 4 4 ，銀行卡號的組合規律為 4 4 4 4 3。空格在數字呈現處的應用雖然細微，但是在長數字的閱讀場景中仍能給使用者帶來識別便利。

六、減少跳轉

1. 選項露出

在網頁端表單設計中，使用者在表單填寫中需要對選項進行選擇時，常用的互動形式是在選擇器的下拉列表中進行選項的二次點選。而在移動端設計中，觸發選擇器後的二次點選會增加使用者的填寫成本。所以在設計時，當選項少於8時，在表單中直接顯示所有可選項，當選項超出過多時則在列表浮層中進行選擇。

2. 減少頁面跳轉

在表單填寫中我們期望使用者保持專注，儘量避免產生引導使用者離開當前頁面的填寫互動，這種互動跳轉很容易打斷使用者固有的行為軌跡。因此運用浮層、彈窗等互動來完成輔助資訊的採集是我們較為推崇的互動形式。

七、及時反饋

1.關聯標記

當用戶提交表單資訊後，如已填寫的內容有偏差，需要明確的標記有問題的資料及錯誤原因，幫助使用者找到問題並解決問題。杜絕報錯資訊描述模糊，資訊不關聯的報錯資訊引發使用者困惑。

2. 實時校驗

在某些業務場景中，為了幫助使用者在提交資訊前校正他所填寫的內容，避免大面積報錯場景的出現。我們可以使用實時校驗的方法，在使用者輸入完成後進行判斷及結果反饋，如登入註冊流程的驗證碼校驗就可以運用實時校驗的報錯方式。

當然需要注意的是，運用實時校驗的表單需在使用者明確離開此項輸入狀態時再進行結果反饋，而非在填寫過程中進行實時校驗，避免出現填寫時持續報錯的情況。

3. 密碼保護

在輸入密碼的表單中，部分平臺會在密碼輸入時顯示暗文欄位以此保護使用者隱私，而鑑於前述第七條準則，移動端的密碼已簡化至只輸入一次，暗文的顯示會讓使用者無法確認所輸密碼資訊。因此在需要隱私保護的場景下，我們需要完善密碼互動的呈現形式，當輸入時，輸入位短暫顯示為明文，保持1秒或者保持到下一位密碼輸入後再變成暗文，這樣的互動改善可以確保使用者在輸入中明確內容，也滿足了其隱私需求。

4. 提交反饋

在使用者完成整個任務環節時，提供成功或失敗的反饋能讓使用者在枯燥的表單填寫後有更強烈的情感反饋。所以在設計時，我們需要提供正向的激勵誇讚使用者表單填寫成功，在表單沒有完成時鼓勵使用者修改內容，重新提交，不可以負面責怪使用者。

八、酒店表單業務重構

今年上半年，本著提升途牛產品調性，為內容傳達提效的初衷，由途牛UED 組織併發起了一次針對現有關鍵頁面升級的專案，在架構升級全量推進初期，我們優先選取了酒店表單業務作為此次設計重構的首選試驗點。表單作為一個偏理性的產品，直接影響著使用者決策到產品轉化的資料，在此環節，更需要降低使用者成本，維持產品決策熱情以實現商業價值上的成功。在酒店表單業務改版過程中，除了應用上述七方面的設計準則幫助提升使用者體驗，我們也結合了酒店現有問題和產品特性進行了更為精細化的設計重構。

1. 整合資訊框架

體制讓步

對使用者來說，途牛是一個整體的產品，所有表單的基礎體驗應該是一致的。以往，基於企業平臺的發展，酒店細分的國內酒店和國際酒店兩個業務相對獨立，雖然同樣隸屬於下單環節，但是業務迭代程序及側重方向的不同導致表單前臺呈現差異較大。藉助途牛整體關鍵頁面升級的專案，在此次酒店業務重構初期，協同兩個業務的產品、設計、研發我們共同整合資源，解決歷史遺留體驗問題，為國內、國際酒店表單業務進行整體體驗的統一和提升助力。另一方面，UED 也透過酒店業務的試點思路，將基礎表單框架進行模組細分，逐步影響並推廣至全站表單業務升級。

框架構建

回顧現有酒店表單業務的問題，主要體現在內容層級模糊，型別樣式混亂上。這些隨著每一次迭代需求增加而新增的表單項，只是基於業務型別進行了單模組的設計，而對於使用者來說，差異化的表單項樣式無形中增加了填寫時資訊獲取的成本。我們在獲取文字資訊時，並不會逐字閱讀，往往採用「掃視」的方式識別段落輪廓從而獲取資訊，規律性的排列方式也會幫助持續這種「掃視」的節奏，提升資訊轉化效率。因此在設計上我們遵循相似資訊一致性的原則，簡化重複冗餘的視覺噪音，將每個單元表單項模型遵循「上型別+下內容」的形式幫助使用者快速對所需填寫的表單型別建立心理預期。在大量相同的填寫區域，統一左側內容標題對齊方式，並透過字色、字重等形式確保未觸發時內容標題為主，暗提示為輔，填寫後填寫內容為主，內容標題為輔的視覺表達，從而在表單的不同階段仍舊保證了使用者對於主次資訊的識別體驗。

品牌資訊傳達

為了減弱表單填寫頁冰冷感，在框架資訊整合的基礎上，我們此次改版也將品牌解構，用色彩的形式融入表單頁面設計，將品牌功能化，輔助產品以深化品牌使用者心中形成立體感知。當然品牌功能化的融入也需要有所限制，此次我們主要從氛圍、控制元件、操作、提示這四個方面展開，在不影響表單主要資訊呈現的基礎上，遵循適度、適量兩個原則。

2. 內容層級排序

使用者吸引

回顧整個購買流程，填寫訂單業務承擔著維繫使用者在產品詳情所產生的內容吸引到內容轉化的責任，而如何在枯燥的酒店表單中維穩甚至加固使用者的內容吸引？為此，我們參照了《Actionable Gamification》關於人性八大核心驅動力中的「擁有感&佔有慾」和「失去&避免」這兩條來幫助我們。

結合對使用者使用場景的需求分析，我們將資訊在使用者心中的關注度進行了重新排序，首屏弱化了使用者已經在詳情頁明確的酒店名稱，轉而對使用者需在此環節明確的房型、入住時間、離店時間等內容進行了強化和整合，明確產品歸屬。同時為了加固使用者的內容吸引，我們前置了酒店「超值價」、「可免費取消」等資訊來解除使用者對於產品價格和沉沒成本的疑慮，從而正向地激勵使用者完成後續的表單填寫。

細分模組

除了對首屏資訊的排序重置外，對於需要使用者填寫的每個單元模組我們也做出了一些調整。如取消險模組，此前為避免客訴，將所有需要使用者確認和檢視的資訊都進行了高亮提示和行動引導。這些資訊雖然是我們需要使用者知道的，但並不一定是使用者在填寫時想要詳細瞭解的，過多的資訊干擾反而影響了有用資訊識別，也降低了使用者填寫表單的效率。因此新版表單重構時我們將協議資訊整合至末尾統一確認，同時對文字、icon進行視覺減負，統一弱化輔助資訊呈現，轉而強呼叫戶需要確認的取消險金額和投保人模組。

從上圖國際酒店改版前後的方案進行對比可見，每個細分模組都有著或多或少細節的調整，當然還有沒有展現的輔助資訊互動浮層框架的統一。這些資訊呈現的形態與互動的邏輯也都遵循著前文「保持秩序、描述清晰、化繁為簡、幫助使用者、資訊分組、減少跳轉、及時反饋」這七大原則，每一個細節都可以展開來細細剖析，這裡就不多加贅述了。

結語

蚍蜉亦可撼樹，在產品升級的過程中，使用者體驗的提升往往需要依靠像表單這樣一個個微小的業務作為突破點，從而裂變反哺至全域性。此次酒店表單重構專案從產品角度來看，功能上並沒有改變，而透過代入使用者場景，使用者感知，使用者行為習慣等方面進行細節的體驗升級。後續我們還將進行更加深入地探索與迭代，將體驗升級持續擴散至其他業務，為每一位途牛使用者帶來更便捷、更自然的出行體驗。

相關文章

我要進群

【2019更新版】全棧UI設計教程

UI設計進階乾貨 - 應用圖示

UI設計進階乾貨 - 動效

UI設計進階乾貨-閃屏

UI設計進階乾貨-引導頁

UI設計進階乾貨-註冊登入

UI設計進階乾貨 - 首頁

UI設計進階乾貨 - Banner

UI設計進階乾貨-列表頁

UI設計進階乾貨 - 適配&標註

UI設計進階乾貨 - 切圖&命名

UI設計進階乾貨-重陽節閃屏賞析

UI進階乾貨—金剛區

UI進階乾貨—陰影

UI進階乾貨 - 競品分析

UI進階乾貨-詳解B端產品&C端產品

UI進階乾貨-尼爾森十大互動原則

UI進階乾貨 - PRD撰寫技巧

UI進階乾貨 - 載入動畫

關鍵詞回覆：

VIP、OC、UI、神器、商用字型、UI學習 、面試技巧、Banner、樣機下載、LOGO、C4D教程、轉手繪、插畫、名片、包裝、字型下載、Eagle、2。5D、設計規範，創意合成，作品集模板、商務合作、轉載、軟體下載請回復相對應縮寫（例如：PS）

​