作者網(wǎng)址:https://uxdesign.cc/@CoyleAndrew
原文地址:Design Better Forms
譯者:mantfly
此文由非專業(yè)人士翻譯自Medium钾唬,仍在不斷修訂中。
在設(shè)計(jì)表單的過程中,設(shè)計(jì)師常常遇到的問題钮追,以及如何解決它們灰羽。
表單最好是一列
多列表單會(huì)影響用戶的垂直方向感
標(biāo)簽和表格對(duì)齊
標(biāo)簽頂部對(duì)齊的表格比左對(duì)齊讓用戶完成度更高泛范,并且頂部對(duì)齊的標(biāo)簽在移動(dòng)端更容易轉(zhuǎn)換刃鳄。然而孽文,為了更容易瀏覽厌衔,多數(shù)據(jù)多選擇入口用左對(duì)齊的標(biāo)簽璧帝,相比頂對(duì)齊標(biāo)簽,可以減少高度富寿,做更多提示睬隶。
將標(biāo)簽和輸入框分組
標(biāo)簽和輸入框放在一起,確保組與組之間空間足夠大讓用戶不會(huì)混淆页徐。
避免全大寫
全大寫不容易閱讀瀏覽苏潜。
選項(xiàng)少于6個(gè)可以全部展示
下拉列表需要兩次點(diǎn)擊并且隱藏了選項(xiàng),超過5個(gè)選項(xiàng)就使用輸入選擇器变勇,超過25個(gè)選項(xiàng)就用相關(guān)搜索的下拉菜單恤左。
不要把標(biāo)簽放在輸入框里
把標(biāo)簽放輸入框可以優(yōu)化空間贴唇,尼爾森諾曼集團(tuán)的Katie Sherwin總結(jié)過這個(gè)方式導(dǎo)致的一些使用問題。
把復(fù)選框(和單選按鈕)一行行列出來以便瀏覽
給出明確響應(yīng)的描述(CTAs: call to action)
明確的響應(yīng)表明意圖飞袋。
標(biāo)明填寫的錯(cuò)誤
給用戶標(biāo)出哪里出錯(cuò)了并給出原因戳气。
當(dāng)用戶打字的時(shí)候不要給錯(cuò)誤提示(除非對(duì)他們打字過程有幫助)
不要隱藏基礎(chǔ)的提示信息
盡可能保留基本的幫助信息。對(duì)于復(fù)雜的幫助信息巧鸭,可以在點(diǎn)擊輸入框后出現(xiàn)在輸入框后面瓶您。
把主要步驟和次要步驟區(qū)分開來
使用字段長(zhǎng)度作為輸入框長(zhǎng)度
輸入框的長(zhǎng)度容納內(nèi)容的長(zhǎng)度。類似電話號(hào)碼纲仍、郵編等等可以用到呀袱。
不要用*號(hào)來表示必填項(xiàng)目
用戶常常不知道*表達(dá)的是什么,相反巷折,去設(shè)置可選填的會(huì)更好压鉴。
把相關(guān)的信息放在一起
用戶的思考的時(shí)間是集中的,太長(zhǎng)的表單會(huì)讓人疲勞锻拘。有邏輯的分組會(huì)讓用戶更快熟悉表單油吭。