無論是注冊流程,多視圖步進(jìn)或單調(diào)的數(shù)據(jù)輸入界面,表單都是數(shù)字產(chǎn)品的設(shè)計(jì)中最重要的組成部分之一。本文重點(diǎn)介紹了常見的表單設(shè)計(jì)樣式和要避免的注意事項(xiàng)。但請記住,這些都是一般準(zhǔn)則,每一個規(guī)則都有例外。

多列排布會分散用戶的豎向注意力

相比使用左對齊的標(biāo)簽,使用頂部對齊的標(biāo)簽后,更高比例的用戶會完成表單的填寫;頂部對齊的方式也更適用于小屏幕的手機(jī)。不過,在面臨多選項(xiàng)多數(shù)據(jù)的輸入時,盡量還是考慮左對齊標(biāo)簽,這樣用戶更容易一起瀏覽,

把標(biāo)簽和輸入框靠在一起,相鄰輸入框間設(shè)置合適的距離避免用戶困惑

全部大寫的標(biāo)簽會造成閱讀和瀏覽上的困難

若將選項(xiàng)隱藏至下拉列表中,用戶需要執(zhí)行兩次點(diǎn)擊才能完成選擇;這種方法最好在選項(xiàng)數(shù)量多于5個時再去使用,當(dāng)數(shù)量甚至超過25個時,最好將搜索也融入其中

使用占位文本確實(shí)能優(yōu)化屏幕空間的利用,但其會帶來一些可用性問題,詳見這里:https://www.nngroup.com/articles/form-design-placeholders/

將復(fù)選框垂直排列易于閱讀

一個行為召喚類按鈕應(yīng)該描述其目標(biāo)意圖

在錯誤發(fā)生的地方告訴用戶,并指明原因

用戶輸入過程中不要使用行內(nèi)校驗(yàn)——除非確實(shí)能幫到用戶——比如在設(shè)置密碼、用戶名過程中字符長度唱超過限制時

要盡可能顯示出基本的幫助文本。對于復(fù)雜的幫助文本,可以考慮在輸入框獲得焦點(diǎn)后將其放置于輸入框旁邊

關(guān)于是否應(yīng)該顯示輔助選項(xiàng)甚至在哲學(xué)界引發(fā)了一場很大的爭論

輸入框的長度應(yīng)該令用戶可預(yù)見能夠輸入的字符長度,面對有明確長度邊界的字段時(比如手機(jī)號、郵編),最好這樣做

用戶并不總是知道標(biāo)簽后的*暗示什么,還是最好將可選項(xiàng)標(biāo)示出來

批量性的長表單通常令用戶無法忍受,通過將相關(guān)信息分成合理的一組,用戶能夠更快的理解表單元素間的關(guān)聯(lián)
譯/三達(dá)不留點(diǎn)gpj
原文鏈接:https://uxdesign.cc/design-better-forms-96fadca0f49c#.q9x1ddl3n

優(yōu)秀logo設(shè)計(jì)精選集(79)標(biāo)志設(shè)計(jì)2016-06-26

6套優(yōu)雅美麗的主臥套房設(shè)裝修設(shè)計(jì)2016-06-21

日本包裝設(shè)計(jì)作品集錦包裝設(shè)計(jì)2016-06-18

用戶體驗(yàn)設(shè)計(jì):如何建立完美的第用戶體驗(yàn)2016-07-25

隱藏密碼還是顯示密碼用戶體驗(yàn)2016-07-23

為什么Facebook使用了藍(lán)色 色彩營銷用戶體驗(yàn)2016-07-21