詳細解析網(wǎng)頁表格設(shè)計的5大要素發(fā)布者：本站 時間：2021-12-24 11:12:09
現(xiàn)在老板對注冊量抓的很緊，當(dāng)注冊里的表單設(shè)計的太過繁瑣或缺乏人情味，會直接讓訪客不想和你交朋友，哪怕是留虛假信息。
我只想說，網(wǎng)頁中的快速填表功能非常重要。而國情卻是很多網(wǎng)站沒有快速注冊表單。
千萬不要覺得注冊只是開發(fā)者的工作，這也需要設(shè)計師的積極參與，設(shè)計可以極大的提高可用性。
優(yōu)秀的填表設(shè)計，能夠清楚的讓用戶明白：我輸入的東西準(zhǔn)確無誤的填寫到輸入域了、我填寫的注冊信息正在處理中。作為設(shè)計師，我們的任務(wù)便是：讓用戶看到清晰、保證用戶輸入的過程中是愉悅的。在細節(jié)方面，那些錯誤提示，以及填寫時的友情貼士都帶有足夠的人情味!
指示幫助
有的時候用戶對表單很厭煩，我們大可以在設(shè)計的形式上給用戶帶來新穎的視覺沖擊。這可不是無關(guān)痛癢的小問題，這關(guān)系到用戶體驗，表單填寫作為用戶交互中的第一環(huán)，體驗一定要優(yōu)秀。
為了給予用戶提示，應(yīng)該在表單域下方或者附近添加幫助性文本，這叫做Microcopy(縮微文本)
排列與對齊
我們也可以通過設(shè)計控制用戶填表速度。
我們可以通過標(biāo)簽排列和輸入域的對齊來提高用戶填表速度。
整齊有序的表格可以提高用戶掃描速度，提高表格可用性。
如果需要用戶精確的填寫信息，那么可以至上而下的堆疊標(biāo)簽/輸入域，這樣就能減緩用戶填寫表格的速度。
但是這種方法需要不斷的測試來提高可用性。
花上幾分鐘，思考一下，你的網(wǎng)站需要快速填表還是精確填表?用戶對你設(shè)計的表格會有什么樣的感受?用戶會怎樣填表?
現(xiàn)在我們來看看5個優(yōu)秀的填表設(shè)計案例
01. Squarespace
詳細解析網(wǎng)頁表格設(shè)計的5大要素,PS教程,
Squarespace博客平臺的做法很值得借鑒。
節(jié)省了空間，提高了填表速度：將各個填表域的標(biāo)題置于其中。
02. Desk
詳細解析網(wǎng)頁表格設(shè)計的5大要素,PS教程,
Desk的方法也很適合快速填表，同樣的標(biāo)題內(nèi)置，但是彈出窗口設(shè)計的很棒，能夠起到視覺焦點的作用，讓用戶更專注于填寫信息。
03. Basecamp
詳細解析網(wǎng)頁表格設(shè)計的5大要素,PS教程,
Basecamp是項目管理工具，簡單設(shè)計，易于理解，箭頭這一視覺符號非常傳神。
04. Virb
詳細解析網(wǎng)頁表格設(shè)計的5大要素,PS教程,
Virb的注冊表格是個優(yōu)秀的范例，展示了如何利用設(shè)計以及縮微文本，讓填表看起來便捷簡約。
05. Weightshift
詳細解析網(wǎng)頁表格設(shè)計的5大要素,PS教程,
Weightshift的填表也很不錯。
字體清晰，排列有序，看起來異常整齊，而且在輸入時，周圍會出現(xiàn)黃色高亮，以避免用戶因分心而出錯。
綜合以上，5大要素：
1、節(jié)約用地：空間不足時，表單域的標(biāo)題可內(nèi)置于表單域;
2、雷厲風(fēng)行：彈出層不要有太緩慢的動效，不要刻意炫技;
3、人情味：多多利用視覺符號及可愛的人物來指引用戶，那些小貼士和提醒不要總是用醒目的叉子和紅色字體。提示語可以溫馨賣萌會比冷冰冰的文字好百倍;
4、有序排列：字段和輸入框最好柵格化對其，并且用戶的輸入路徑在一條豎線上!這是適合所有快速填表設(shè)計的殺手锏;
5、高亮填表：如何避免用戶分心，高亮填表設(shè)計是個不錯的思路;
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗，優(yōu)秀的技術(shù)和設(shè)計水平，更放心
3. 全程省心服務(wù)，不必擔(dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)