一、認(rèn)知策略
1、表單排列
表單承載的主要功能是向用戶(hù)清楚地傳達(dá)信息，單列表單形式更利于用戶(hù)瀏覽動(dòng)線(xiàn)，幫助用戶(hù)識(shí)別和填寫(xiě)內(nèi)容。而多列表單形式用戶(hù)的視覺(jué)橫向移動(dòng)范圍更大，瀏覽和填寫(xiě)效率更低。
例如QQ郵箱設(shè)置頁(yè)面中，選項(xiàng)都是采用了縱向布局的方式。當(dāng)然這種布局方式是比較理想化的，是與場(chǎng)景相匹配的。首先作為設(shè)置界面，并非高頻操作業(yè)務(wù)，用戶(hù)只會(huì)調(diào)整部分內(nèi)容，而不是全業(yè)務(wù)的操作。所以更強(qiáng)調(diào)信息的查看，縱向布局更有利于瀏覽。
其次，表單項(xiàng)內(nèi)容應(yīng)并不復(fù)雜，即使采用縱向布局，對(duì)整體的表單長(zhǎng)度影響也比較有限。另外配合底部常駐按鈕，對(duì)用戶(hù)的操作效率影響不大。
而在B端輸入型表單中，本身內(nèi)容填寫(xiě)的任務(wù)就比較重，所以需要適當(dāng)控制表單的整體長(zhǎng)度，因此一味地追求瀏覽動(dòng)線(xiàn)也是不可取的。
2、輸入框長(zhǎng)度
1）輸入框排版
如下圖所示，右圖采用的是錯(cuò)落有致的排版，左圖更加整齊劃一。但是相比較而言，似乎右圖的詩(shī)句舒適度更高。因?yàn)樵谝曈X(jué)上我們更容易將右圖的空間和內(nèi)容視為一個(gè)和諧的整體，但左圖過(guò)度的對(duì)齊導(dǎo)致暗示隱性的截?cái)?，我們?huì)感覺(jué)表單列右側(cè)空間缺了一大塊。
所以表單中要注意整體的協(xié)調(diào)性，不要為了對(duì)齊而對(duì)齊。
2）輸入框長(zhǎng)度的暗示
輸入框的長(zhǎng)度具有一定的暗示作用，因?yàn)橛脩?hù)會(huì)認(rèn)為它是與輸入的內(nèi)容是相對(duì)應(yīng)的。尤其是郵政編碼、電話(huà)號(hào)碼和銀行卡號(hào)等長(zhǎng)度固定的字段。在設(shè)計(jì)這類(lèi)輸入框的時(shí)候，可以采用與內(nèi)容相互匹配的長(zhǎng)度，避免過(guò)長(zhǎng)引起用戶(hù)對(duì)輸入內(nèi)容正確性的疑慮。
下圖即一典型案例。在上圖中，不需要花多少錢(qián)的金額輸入框進(jìn)行等寬處理，容易誤導(dǎo)用戶(hù)對(duì)所需輸入金額的判斷，造成用戶(hù)的不安全感。
3、必填與選填
必填和選填是表單的基本信息，用來(lái)引導(dǎo)用戶(hù)識(shí)別關(guān)鍵信息，做出行為決策。
通常必填字段較少時(shí)，優(yōu)先采用星號(hào)（*）標(biāo)注顯示，更好地提高信息識(shí)別效率。當(dāng)必填字段較多時(shí)，則可以標(biāo)注選填項(xiàng)的方式，避免出現(xiàn)滿(mǎn)屏星號(hào)，增加額外信息量。
但是同一個(gè)系統(tǒng)中建議還是采用統(tǒng)一的標(biāo)記方式。我個(gè)人更傾向于星號(hào)（*）方式，用戶(hù)成本低，對(duì)內(nèi)容干擾性更小。
4、識(shí)別好過(guò)記憶
這是尼爾森十大可用性原則之一，要求能夠通過(guò)各種方式給予用戶(hù)足夠的信息，減少用戶(hù)的記憶成本。在表單設(shè)計(jì)中，主要是各種提示信息輔助用戶(hù)完成表單填寫(xiě)。
1）主動(dòng)性提示
對(duì)于開(kāi)放性、復(fù)雜的、超出用戶(hù)認(rèn)知的輸入信息，需要做出主動(dòng)性提示。例如在阿里云、騰訊云中，很多名稱(chēng)字段都是需要以字母開(kāi)頭的。而普通用戶(hù)為了便于信息的識(shí)別和記憶，更習(xí)慣于中文命名。這種情況下，表單中就需要默認(rèn)給出填寫(xiě)說(shuō)明，減少用戶(hù)的記憶和出錯(cuò)概率。
另外一些具有限制性的規(guī)則，對(duì)用戶(hù)的操作會(huì)產(chǎn)生直接影響的，也需要顯性地告知用戶(hù)，盡量避免出現(xiàn)理解偏差，帶來(lái)用戶(hù)投訴。
主動(dòng)性提示可以通過(guò)輸入框中的「占位標(biāo)簽」告知用戶(hù)；不過(guò)過(guò)長(zhǎng)的提示信息通常放置在輸入框下方，便于用戶(hù)查看。
2）交互性提示
還有一種提示增加了信息交互。例如密碼設(shè)置時(shí)，光標(biāo)停留會(huì)觸發(fā)密碼規(guī)則提示。既保證了默認(rèn)界面信息的精簡(jiǎn)，又可以保證提示的有效性。用戶(hù)輸入時(shí)，還會(huì)進(jìn)行內(nèi)容校驗(yàn)反饋，交互性更強(qiáng)。
3）被動(dòng)性提示
對(duì)用戶(hù)而言，解釋說(shuō)明、幫助信息更偏向于業(yè)務(wù)屬性。隨著用戶(hù)深入使用產(chǎn)品，這些信息會(huì)變得不再重要，用戶(hù)查看的頻率也會(huì)越來(lái)越低。所以這類(lèi)信息通常被默認(rèn)收起，減少界面的信息量，用戶(hù)在需要時(shí)主動(dòng)觸發(fā)查看。
5、主任務(wù)與分支任務(wù)的協(xié)同
有些展示型表單，主要是為用戶(hù)提供信息服務(wù)的。但是為了保證操作鏈路的流暢，會(huì)加入一些分支任務(wù)。例如任務(wù)預(yù)覽時(shí)，會(huì)增加「發(fā)布」或者「編輯」功能，便于用戶(hù)直接完成二次操作；或者智能報(bào)告表單中會(huì)增加人工「修正建議」，對(duì)內(nèi)容進(jìn)行糾偏。這些操作只是可選項(xiàng)，并不是用戶(hù)必需的操作行為。
如果按照順序?qū)⑿畔⒘_列展示，這些內(nèi)容會(huì)被放在頁(yè)面底部。長(zhǎng)表單場(chǎng)景下，這些信息會(huì)無(wú)法直觀展示，用戶(hù)難以感知。所以需要為這些支線(xiàn)任務(wù)增加額外曝光。
例如頂部的引導(dǎo)文字按鈕，借助定位錨點(diǎn)，實(shí)現(xiàn)路徑直達(dá)，提高操作效率；或者采用底部浮層彈窗的形式，方便信息的填寫(xiě)及表單內(nèi)容的查看。
具體的設(shè)計(jì)方案有很多種方式，需要根據(jù)場(chǎng)景和用戶(hù)確定。但是設(shè)計(jì)師需要能夠?qū)⒅魅蝿?wù)和分支任務(wù)進(jìn)行有機(jī)的協(xié)同，保證用戶(hù)對(duì)頁(yè)面內(nèi)容的全感知和操作效率。
6、數(shù)量級(jí)的影響
有些時(shí)候我們不得不面對(duì)很大的數(shù)據(jù)量，這對(duì)設(shè)計(jì)師和用戶(hù)都是一個(gè)挑戰(zhàn)。設(shè)計(jì)時(shí)，我們需要根據(jù)信息量做出合適的設(shè)計(jì)方案。
信息量比較大時(shí)，首先要進(jìn)行內(nèi)容拆解，按照用戶(hù)的認(rèn)知習(xí)慣完成信息分層，讓用戶(hù)不要直接面對(duì)大量數(shù)據(jù)。例如通過(guò)樹(shù)表結(jié)合，或者雙層關(guān)聯(lián)下拉選擇，逐步縮小用戶(hù)的目標(biāo)范圍。
某些場(chǎng)景下，還要增加輔助搜索功能，讓信息篩選更加簡(jiǎn)單。
二、交互策略
表單設(shè)計(jì)除了靜態(tài)展示效果外，還有大量的交互操作。主要的設(shè)計(jì)目標(biāo)就是「效率」和「防錯(cuò)」。
1、操作效率
1）減少用戶(hù)輸入
雖然PC端輸入比移動(dòng)端更加便捷，但是輸入型操作對(duì)用戶(hù)而言成本仍然較高。一方面用戶(hù)需要思考應(yīng)該填寫(xiě)什么內(nèi)容，另一方面需要準(zhǔn)確地完成內(nèi)容輸入。而選擇的成本相對(duì)更低，因此在表單設(shè)計(jì)時(shí)，盡可能讓用戶(hù)以選擇的方式完成任務(wù)。
例如郵箱在上傳附件時(shí)，如果郵件沒(méi)有填寫(xiě)過(guò)標(biāo)題，會(huì)將附件名稱(chēng)直接填入郵件標(biāo)題中，減少用戶(hù)輸入。
2）合理預(yù)設(shè)
表單信息可以通過(guò)信息的抓取、內(nèi)容關(guān)聯(lián)度分析，預(yù)設(shè)合理內(nèi)容值，減少用戶(hù)的操作。例如QQ郵箱設(shè)置時(shí)，系統(tǒng)提供了默認(rèn)話(huà)術(shù)，用戶(hù)只要快速啟用即可。
對(duì)于如證件類(lèi)型、手機(jī)區(qū)號(hào)、國(guó)籍等較為通用的選項(xiàng)，為用戶(hù)提供默認(rèn)選擇，同樣可以有效簡(jiǎn)化操作步驟，減輕用戶(hù)輸入，幫助用戶(hù)更快地完成表單填寫(xiě)。
2、業(yè)務(wù)流程順暢
當(dāng)我們?cè)谔顚?xiě)A任務(wù)時(shí)，需要關(guān)聯(lián)選擇B任務(wù)。而B(niǎo)任務(wù)并沒(méi)有創(chuàng)建，該怎么辦呢？
通常情況下，需要在A任務(wù)中完成創(chuàng)建B任務(wù)。例如彈窗、抽屜、甚至是新開(kāi)頁(yè)面的形式，保證主流程的暢通。否則對(duì)于高頻操作的任務(wù)，會(huì)嚴(yán)重影響用戶(hù)的操作效率。
如果由于各種因素，在流程中無(wú)法直接創(chuàng)建分支任務(wù)，或者由于各種限制條件阻斷用戶(hù)操作時(shí)，該怎么辦呢？
此時(shí)需要在任務(wù)開(kāi)始前，給用戶(hù)足夠的信息提示。避免用戶(hù)已經(jīng)填寫(xiě)了部分內(nèi)容后，發(fā)現(xiàn)缺少相關(guān)的內(nèi)容，導(dǎo)致任務(wù)無(wú)法完成。這會(huì)帶給用戶(hù)非常糟糕的體驗(yàn)，尤其是會(huì)消耗用戶(hù)較大精力的工作。
3、保存機(jī)制
表單填寫(xiě)時(shí)，可能會(huì)遇到各種異常場(chǎng)景，需要有防錯(cuò)機(jī)制和保存功能，避免用戶(hù)誤操作時(shí)造成信息丟失。
4、即時(shí)反饋
表單填寫(xiě)是為了向用戶(hù)收集正確有效的信息，所以需要在用戶(hù)填寫(xiě)完成或者提交表單時(shí)增加校驗(yàn)機(jī)制。
校驗(yàn)機(jī)制分為前端校驗(yàn)和后端校驗(yàn)。
前端校驗(yàn)無(wú)需服務(wù)器傳輸數(shù)據(jù)，前端頁(yè)面會(huì)根據(jù)校驗(yàn)規(guī)則，對(duì)輸入完成的內(nèi)容進(jìn)行驗(yàn)證。例如郵箱格式、手機(jī)號(hào)長(zhǎng)度、密碼是否符合規(guī)則等。
后端校驗(yàn)需要將表單內(nèi)容傳入后臺(tái)數(shù)據(jù)庫(kù)進(jìn)行匹配，不匹配則會(huì)將信息反饋至前端頁(yè)面。通常用在點(diǎn)擊提交按鈕后，例如賬號(hào)不存在、密碼錯(cuò)誤等。
前端檢驗(yàn)可以幫助用戶(hù)及時(shí)發(fā)現(xiàn)問(wèn)題并修改，糾錯(cuò)的效率更高。后端校驗(yàn)相對(duì)滯后，出錯(cuò)后用戶(hù)需要自行定位錯(cuò)誤項(xiàng)。
無(wú)論采用哪種方式都要告知用戶(hù)錯(cuò)誤原因，幫助用戶(hù)快速解決問(wèn)題。
寫(xiě)在最后
表單設(shè)計(jì)是設(shè)計(jì)師繞不開(kāi)的內(nèi)容，無(wú)論用什么方法論也無(wú)法窮盡其中的可能性，也沒(méi)有一套覆蓋所有場(chǎng)景的設(shè)計(jì)模板。設(shè)計(jì)師需要根據(jù)實(shí)際的業(yè)務(wù)場(chǎng)景，去完成合適的設(shè)計(jì)方案，并在不斷的實(shí)踐中積累經(jīng)驗(yàn)，總結(jié)得失。
作者：子牧先生
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)基礎(chǔ)(8): 表單設(shè)計(jì)中的認(rèn)知與交互
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司