文/丹頂鶴的日記本 學(xué)習(xí)筆記
注：本文所說(shuō)的表單(Form)，是網(wǎng)頁(yè)或者移動(dòng)應(yīng)用表單。
一） 表單的作用
表單的主要目的，是獲取用戶信息。我們平時(shí)和移動(dòng)應(yīng)用或者網(wǎng)頁(yè)交互，很多時(shí)候都用到表單。例如：注冊(cè)登錄，填寫(xiě)收貨人信息，填寫(xiě)支付信息等等。
除非必要，很少有人愿意主動(dòng)提供信息。我?guī)缀醣厝幻雱h的應(yīng)用是，第一次下載，還未瀏覽，就強(qiáng)制性讓用戶注冊(cè)或者登錄。我還不知道你的好，為什么要和你坦白呢？
二 ）表單設(shè)計(jì)原則
在能夠獲取必要信息的前提下
減少用戶操作，去掉非必填字段。
減少用戶思考，操作一目了然。
減少操作失誤，提前給予明確提示信息。
總之，盡量讓用戶不用學(xué)習(xí)，不用思考，最好不用打字，憑著直覺(jué)，只需要點(diǎn)擊，就可以無(wú)挫折的成功提交表單。
想要達(dá)到這個(gè)目的，表單的設(shè)計(jì)在內(nèi)容組織上，要符合人的正常邏輯；在視覺(jué)呈現(xiàn)上，應(yīng)該減少用戶的視覺(jué)掃描路徑；在控件選擇上，要盡量減少用戶的文字輸入。因?yàn)樵谑謾C(jī)上，沒(méi)有什么比調(diào)出鍵盤(pán)打字更討厭的了。
積極擁抱新技術(shù)，如指紋識(shí)別，人臉識(shí)別，語(yǔ)音識(shí)別登錄，要比一遍遍的輸入用戶信息美妙的多。
三）表單的組成
表單主要由5部分組成：
- 標(biāo)簽
- 即時(shí)反饋
- 輸入框
- 提示信息
- 動(dòng)作
下面一一來(lái)介紹，各個(gè)部分的設(shè)計(jì)重點(diǎn)。
- 標(biāo)簽(Label)
- 除非對(duì)表單長(zhǎng)度的要求很高，盡量將標(biāo)簽置于輸入框上方。
對(duì)于移動(dòng)應(yīng)用，好處更明顯。因?yàn)橐苿?dòng)應(yīng)用的屏幕寬度小，單行字?jǐn)?shù)少。將標(biāo)簽和輸入框列在兩行，放寬了標(biāo)簽的字?jǐn)?shù)限制，增加了輸入空間。
- 如果對(duì)表單長(zhǎng)度要求高，標(biāo)簽和輸入框左右排列，標(biāo)簽右對(duì)齊，更有利于人眼識(shí)別哪個(gè)標(biāo)簽對(duì)齊哪個(gè)輸入框。避免標(biāo)簽左對(duì)齊。
（注意到，這一點(diǎn)在移動(dòng)應(yīng)用上，可以稍微弱化。因?yàn)橐苿?dòng)應(yīng)用的單行字?jǐn)?shù)有限，不至于造成看串行）
標(biāo)簽在輸入框上方，好的
提示語(yǔ)(Alert)
盡量不要置于輸入框占位符位置，因?yàn)殡S著輸入，提示語(yǔ)會(huì)被擋住。[現(xiàn)實(shí)是，很多設(shè)計(jì)師為了節(jié)省空間，將提示語(yǔ)設(shè)計(jì)在占位符的位置]
提示文案避免生僻字，要簡(jiǎn)單易懂。
非必填字段，提示用戶填寫(xiě)的好處。
輸入框(Text box)
文本輸入框(例：填寫(xiě)詳細(xì)地址)，避免讓用戶填寫(xiě)大段文字，而是讓他們選擇，或者智能聯(lián)想
單/復(fù)選框(例：選擇性別)
下拉框(例：選擇省份)
其他控件(例：時(shí)間控件)
使用表單格式掩碼(例：銀行卡號(hào)字段)
盡量去掉，非必填字段。如果可以，設(shè)置缺省值，減少用戶輸入。(太重要又強(qiáng)調(diào)一遍)
輸入反饋(Feedback)
要及時(shí)，不要等這個(gè)表填完了，提交表單的時(shí)候再報(bào)錯(cuò)
反饋信息的位置靠近錯(cuò)誤操作
提交表單成功給予鼓勵(lì)
動(dòng)作按鈕(Submit)
移動(dòng)應(yīng)用的動(dòng)作按鈕通常放置在3個(gè)位置：表單的尾部(例：注冊(cè)登錄按鈕)
標(biāo)題欄的右邊(例：微信發(fā)送朋友圈)
懸浮于頁(yè)面底部(例：加入購(gòu)物車)
1.主要操作和次要操作：
突出主要操作，弱化次要操作。對(duì)比明顯，讓人毫不猶豫點(diǎn)擊主要操作。
2.按鈕文案明確，不要都是“提交”。要根據(jù)不同情境命名為“付款”、“注冊(cè)”、“評(píng)論”等等。
四）其他交互細(xì)節(jié)
組織信息，將內(nèi)容按照邏輯分組，這點(diǎn)在長(zhǎng)表單設(shè)計(jì)上尤為重要
這和寫(xiě)作排版一個(gè)道理，不分組的長(zhǎng)表單會(huì)讓用戶煩躁，沒(méi)有耐心填完。
視覺(jué)流
個(gè)人認(rèn)為提交表單的動(dòng)作按鈕，不應(yīng)該設(shè)計(jì)在右上角。因?yàn)檫@需要人的視覺(jué)從上到下瀏覽完后，再回到右上，才能完成填表操作。而設(shè)計(jì)在表單尾部，就輕松許多。
表單應(yīng)該設(shè)計(jì)成單列，從上到下填表。第一是避免漏填，第二是視覺(jué)流的路徑變短。
還有好多好多細(xì)節(jié)，只要設(shè)計(jì)師愿意和有時(shí)間琢磨。
最佳設(shè)計(jì)模式和規(guī)范隨著新技術(shù)和硬件的誕生一直在變, 其核心思想都是提高用戶體驗(yàn)。
碎碎念：其實(shí)用戶體驗(yàn)永遠(yuǎn)沒(méi)有完美，頂多是把某個(gè)點(diǎn)做的趨于完美。就和生活一樣，需要權(quán)衡取舍，關(guān)注一個(gè)點(diǎn)。比如對(duì)安全要求高的應(yīng)用，就要把安全性放第一位，輸入復(fù)雜度次之。有的時(shí)候公司的一些業(yè)務(wù)要求可能也會(huì)影響設(shè)計(jì)優(yōu)先級(jí)。
脫離了產(chǎn)品目標(biāo)，再好的體驗(yàn)也沒(méi)有用。設(shè)計(jì)師的價(jià)值最終是靠產(chǎn)品成全的。
