當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

7個幫你全面提升Web表單填寫體驗的方法(3)

來源:isux.tencent 作者:Jana 學(xué)習(xí):3700人次

7個幫你全面提升Web表單填寫體驗的方法

當(dāng)用戶選擇了所在地區(qū)后,自動填充郵政編碼。

7個幫你全面提升Web表單填寫體驗的方法

當(dāng)用戶輸入銀行賬號時,自動空格間斷。

7個幫你全面提升Web表單填寫體驗的方法

當(dāng)用戶輸入金額時,自動補充小數(shù)。

7個幫你全面提升Web表單填寫體驗的方法

幫助用戶進行決策。當(dāng)面臨的選擇越多時,用戶就越難做出決定。這個時候可以適當(dāng)?shù)膭澐置總選項的優(yōu)先級,高亮其中的一個,告訴用戶你的推薦理由,讓用戶更容易比較并做出選擇。

7個幫你全面提升Web表單填寫體驗的方法

支持常用的快捷操作,如Tab切換等,讓用戶在不使用鼠標(biāo)的情況下也能完成整個表格的填寫。

提供友好的引導(dǎo)

清理晦澀的專業(yè)術(shù)語(如數(shù)據(jù)庫錯誤),試著使用更加親切的語言來引導(dǎo)用戶填寫、告訴用戶錯誤的原因。當(dāng)問題出現(xiàn)時,清楚的說明問題出現(xiàn)的原因并提供有效的解決方案。必要時,除了指導(dǎo)文案以外,還可以添加更加生動的照片或可視化圖形作為引導(dǎo)。

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

一條龍服務(wù)

表單的終點并不是提交,我們需要為用戶提供一條龍服務(wù),形成流程閉環(huán),避免用戶在中途跳出。

舉個例子,用戶在某網(wǎng)站選好商品點擊付款時發(fā)現(xiàn)賬戶余額不足,此時用戶只能先進行充值才能進行后續(xù)操作,但當(dāng)用戶充值完畢后,發(fā)現(xiàn)已經(jīng)找不回原來選擇的商品和付款頁面了。這就是典型的流程不閉環(huán)的情況。類似的還有當(dāng)用戶需要在論壇下載資源時,系統(tǒng)提示回復(fù)才能下載,而用戶沒有注冊,需要在此之前先提交注冊表單,當(dāng)用戶填寫完畢后,卻直接跳轉(zhuǎn)到了論壇首頁。

一個好的表單設(shè)計,不僅需要考慮用戶填寫前的引導(dǎo)、填寫時的及時校驗與幫助、還需要考慮填寫后的整個流程體驗。思考用戶填寫表單的初衷是什么,讓他在填寫完表單后能夠最快得到他最想要的東西。即便是他暫時無法得到的,也需要告訴他相應(yīng)的原因和能夠進行的替代操作。

7個幫你全面提升Web表單填寫體驗的方法

提供設(shè)計關(guān)懷

據(jù)統(tǒng)計,大約有12%的人口具有或輕或重的色覺障礙。如果將色彩作為區(qū)分不可點擊文本和可點擊鏈接的唯一元素,可能會讓這部分的人使用時出現(xiàn)困難。我們可以通過給鏈接文字加下劃虛線、使用按鈕或其他形狀做區(qū)分,讓這類用戶能更加清楚的知道哪些是可點擊的區(qū)域。

7個幫你全面提升Web表單填寫體驗的方法

最后,再增加一點愉悅度吧

研究表明,更大的文字輸入框、適度的留白空間會讓人更有填寫的欲望,優(yōu)雅的動畫效果也能增加填寫的趣味。以下的案例可供參考:

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

 

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!