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