拒絕boring，一次表單設(shè)計(jì)探索

在大部分用戶眼里，表單填寫一直是件很枯燥的事情，因?yàn)槿藗兛傁Ｍ米钌俚母冻鰮Q取大的回報(bào)。

當(dāng)我們?cè)谔顚懕韱螘r(shí)，會(huì)變得不耐煩，因?yàn)榭赡軙?huì)遇到這些情況：

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

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

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

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

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

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

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

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

前言至此，因?yàn)橹暗脑O(shè)計(jì)項(xiàng)目中涉及到了移動(dòng)端表單填寫內(nèi)容的設(shè)計(jì)，在體驗(yàn)了一些產(chǎn)品表單設(shè)計(jì)的同時(shí)，也做了一些優(yōu)化的思考與嘗試，最終結(jié)合具體的設(shè)計(jì)嘗試和案例總結(jié)出一些方法。

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

1. 緩解內(nèi)容壓力

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

優(yōu)化排版：

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

漸進(jìn)呈現(xiàn)：

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

2. 步驟可觀察

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

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

3.營(yíng)造氛圍

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

品牌氛圍

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

場(chǎng)景氛圍

表單設(shè)計(jì)保持與所屬行業(yè)的緊密聯(lián)系是非常必要的?？紤]設(shè)計(jì)項(xiàng)目的背景、使用場(chǎng)景和與應(yīng)用的關(guān)系，平衡個(gè)性定制化與統(tǒng)一性。

4.幫用戶偷懶

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

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

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

5.利用動(dòng)效

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

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

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

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

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

網(wǎng)頁(yè)名稱：拒絕boring，一次表單設(shè)計(jì)探索
網(wǎng)站URL：http://www.muchs.cn/news42/170942.html

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

廣告

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