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