拒絕boring，一次表單設計探索

在大部分用戶眼里，表單填寫一直是件很枯燥的事情，因為人們總希望用最少的付出換取大的回報。

當我們在填寫表單時，會變得不耐煩，因為可能會遇到這些情況：

. 不斷地輸入各種信息不知何時是盡頭；

. 發(fā)生漏填錯填卻不被及時告知；

. 填寫一半遇到干擾（比如電話）再進入發(fā)現(xiàn)內容丟失...

以上都是真實發(fā)生的場景，這些bad experience令用戶在表單填寫時不斷感到挫敗然后放棄。

基本上，當一頁密密麻麻需要填寫信息的表單出現(xiàn)在用戶面前時，他們的內心一開始都是拒絕的。而填寫過程如果給做上彈幕可能是這樣的：

另一方面，視覺設計師在項目中遇到表單填寫的設計需求也容易缺少激情，更愿意在其他地方大展拳腳，進行激動人心的嘗試。表單設計是否在產品體驗中不重要而因此不被重視呢，答案必然是否定的。

想象一下著名博客Medium在手機應用上僅一根下劃線設計就花了整整31天，每一個精雕細琢的細節(jié)都是幫助產品體驗前進的一小步，最終成為產品拉開差距的一大步。除了作為最考驗用戶對產品信任感與耐心的環(huán)節(jié)，在垂直服務行業(yè)，很多的表單填寫都是跟業(yè)務收益緊密捆綁的！

在移動端，表單填寫設計體驗的挑戰(zhàn)很多，界面區(qū)域變小，場景碎片化，用戶的操作隨時被打斷，表單設計更需要被盡可能地優(yōu)化以提高成功機率。

前言至此，因為之前的設計項目中涉及到了移動端表單填寫內容的設計，在體驗了一些產品表單設計的同時，也做了一些優(yōu)化的思考與嘗試，最終結合具體的設計嘗試和案例總結出一些方法。

然后發(fā)現(xiàn)即使到了視覺設計階段，表單設計的優(yōu)化空間依然如此巨大。如果你也在進行“boring”的表單設計，或許能夠從接下來的內容獲得一些思路。

1. 緩解內容壓力

減少步驟是最重要的表單設計最基礎的原則，PM或交互同學會在低保真階段盡可能地做簡化。而到了視覺設計階段（內容已不可刪減），我們還可以用視覺手段讓大量的枯燥內容看起來更加輕量化。比如

優(yōu)化排版：

雖然常說不要用平面設計的思維做界面設計，但在此運用排版技能給表單營造舒適松散的氛圍非常重要。緊密的信息會讓用戶喘不過氣，可以通過拉開行高、減少不必要的線條，松散，給用戶喘息的機會，從而緩解因內容帶來的壓力。

漸進呈現(xiàn)：

可以理解為一口氣吃不成胖子，要想讓用戶聽話，還得循序漸進。最被拒絕的表單除了個人資料填寫場景還有評價反饋場景（比如JD和大眾點評）。Gogobot在邀請用戶進行評價時，即使在一個頁面上操作，也聰明地通過高斯模糊后續(xù)內容緩解用戶的壓力。只有通過完成上一步的操作才漸進展現(xiàn)更多的選項，讓內容的增加順其自然。圖中截取的是入住某酒店后的評價場景，選擇你對酒店適合入住的人群標簽（點擊背包客標簽）后，詳細的評價邀請和后續(xù)的分享內容才會清晰的展現(xiàn)出來。

2. 步驟可觀察

在web端，由于屏幕區(qū)域開闊，進度設計比較成熟，一般會標明處于第幾步，甚至對每一步操作添加解說。進度展示讓用戶在一開始和過程中隨時了解操作的成本和進程，整個過程令用戶不會感覺過于被動。比如淘寶買家退款的流程，進度條的設計清晰地告知用戶退款流程已經(jīng)進行到了哪里。

回到移動端，用戶需要了解步驟的需求同樣不能被忽視。被拆解的多步驟表單可以考慮繼承web的進度提示，但由于屏幕限制和拒絕視覺干擾，需要被更輕量化設計。全球性的住宿預訂應用Airbnb租房模式下最重要的步驟——發(fā)布房源，價格、位置、圖片、交通、供應...需要用戶填寫的內容項有很多，由于主要操作頁面都集合在同一界面，因此在titlebar上省略了場景的內容標題，直接換成進度描述，同時設計了類似緩沖的進度條，讓一切操作的成果清晰可見。親身體驗后發(fā)現(xiàn)不僅加強了填寫的效率感，還兼具鼓勵的作用。

3.營造氛圍

曾經(jīng)很多表單的填寫都集中在注冊、購買、評價等場景下其實并沒有太多內容的壓力。隨著O2O的不斷拓展深入，在手機填寫快遞單、申請信用卡等逐漸變?yōu)榭赡?，這些實際表單轉移到移動設備上時，帶來了大量的不可刪減的內容項。不過幸運的是它們的行業(yè)屬性非常明顯，從這個角度我們發(fā)現(xiàn)另一個優(yōu)化方向。

品牌氛圍

除了實用性，設計過程中也可以考慮一些預期之外的東西。比如結合商戶品牌、出行場景，以此創(chuàng)造一種情感上的聯(lián)結，但需要注意適度。

場景氛圍

表單設計保持與所屬行業(yè)的緊密聯(lián)系是非常必要的。考慮設計項目的背景、使用場景和與應用的關系，平衡個性定制化與統(tǒng)一性。

4.幫用戶偷懶

能自動填充的盡量不手填。自動填充，拉動通訊錄數(shù)據(jù)，掃一掃等功能記得用。

在某信用卡申請的表單中，需要用戶填寫緊急聯(lián)系人和親屬的聯(lián)系方式。問題是我們幾乎都記得自己的手機號卻未必能夠快速寫出其他人的。

實際使用場景中，通常需要用戶打開手機通訊錄找到他們的聯(lián)系方式復制，再回到申請頁面粘貼或憑著記憶手動輸入，成本高，填錯的幾率也很大。正苦惱于此，還好交互同學路過提醒我們，別忘了手機QQ有獲取手機通訊錄的功能，如果用戶添加了這個功能，便可自動進入通訊錄，選擇相關聯(lián)系人，其姓名和聯(lián)系方式都自動填充，好！

5.利用動效

動效是個好工具，使用得當會讓用戶感覺產品速度很快，很靈活，很年輕，可信任。這是較于在銀行從工作人員那里拿到幾張密密麻麻毫無設計感的表單，在界面上填寫表單的優(yōu)勢之一，這也正是時代的進步之處。

如果你在銀行填完了幾張表單卻被工作人員粗暴地丟在一旁，會不會有些擔心被弄丟？同樣在界面上，如果你進行了提交操作，如果沒有良好的反饋也會擔心提交是否成功吧。

比如某寶成功拍下訂單會出現(xiàn)包裹整裝待發(fā)令用戶產生踏實感，這里既然是申請銀行卡不如也向用戶展示下之前辛苦填寫的戰(zhàn)利品吧～提交成功的字段加上專屬銀行卡從訂單后彈出動效，有種“耶！搞定！”的暗示（幾乎忍不住要打個響指）。

這次的表單設計探索大致如此，然后發(fā)現(xiàn)看似boring的設計需求原來也有可以做得很high；看似毫無改進的表單也可以變得很優(yōu)雅高效，收獲滿滿～

以上的嘗試和小結有些可能偏離純視覺的范疇，但在實際工作中我們都發(fā)現(xiàn)往往很難明顯做區(qū)分。如果只是限定在自己的職責范圍內干活，也只能說是盡責，長此以往淪為美工的那天也就不遠了吧…很多時候就是大家都多想一點，多討論一下，多嘗試一稿。用存在的問題驅動自己，逼迫自己從不同角度思考手上的視覺方案，并真正體會實際的使用場景，最終收獲的也會是比較實際的成效：）

網(wǎng)頁名稱：拒絕boring，一次表單設計探索
網(wǎng)站URL：http://www.bm7419.com/news42/170942.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站改版、商城網(wǎng)站、小程序開發(fā)、面包屑導航、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)