7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法(2)

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

除了上面這種簡(jiǎn)單粗暴的方式以外,首次輸入密碼時(shí)使用明文確認(rèn)同樣可以節(jié)省二次輸入密碼的時(shí)間,出于信息安全的考慮,需支持有需要的用戶隨時(shí)切換成暗文顯示。以下是筆者收集的幾種明文確認(rèn)密碼的方式,可供參考:

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

鼠標(biāo)點(diǎn)擊、拖拽操作相對(duì)于鍵盤輸入來說是更加有效率的方式。通過添加選取器、快捷選項(xiàng)、智能聯(lián)想、range滑塊、number微調(diào)等方式讓用戶可以更快速的完成表單。

添加選取器、快捷選項(xiàng):

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

支持拖拽上傳:

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

智能聯(lián)想:

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

range滑塊:

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

number微調(diào):

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

慎用下拉框。由于下拉框會(huì)對(duì)用戶造成信息的隱藏,需要而外的操作才能顯示,更適合用在選擇日期、省份等可選范圍較大的地方。對(duì)于數(shù)目有限且重要的選項(xiàng)來說,使用更明顯的選擇方式更合適。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

放寬對(duì)用戶輸入的要求,包括格式、大小寫等。讓你的系統(tǒng)更靈活而非讓用戶為了你改變他們的輸入習(xí)慣。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

錯(cuò)誤預(yù)防。進(jìn)行有效的即時(shí)校驗(yàn),讓用戶能及時(shí)修改、補(bǔ)充缺漏的信息;另外,我們還可以通過限制用戶的行為(如在預(yù)定機(jī)票時(shí)返回時(shí)間無(wú)法選擇出發(fā)時(shí)間之前的日期,出發(fā)城市不能跟到達(dá)城市一樣等),或提供自動(dòng)修正的方式來預(yù)防用戶犯錯(cuò)。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

通過提供更加積極的交互反饋、預(yù)置文字、自動(dòng)獲取信息、自動(dòng)修改格式、補(bǔ)全小數(shù)點(diǎn)等方式,使你的表單變得更聰明。

如當(dāng)用戶輸入信用卡號(hào)碼時(shí),能夠自動(dòng)判斷用戶使用的是哪種信用卡。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

當(dāng)用戶輸入手機(jī)號(hào)碼時(shí),能夠判斷出其歸屬地。此時(shí)如果用戶輸錯(cuò)號(hào)碼,會(huì)更容易被發(fā)現(xiàn)。

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

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

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

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