2021-3-24 資深UI設(shè)計(jì)者
業(yè)務(wù)場(chǎng)景拓展，字段增加又增加，原本眉清目秀的表單變得面目全非。
想要將這些復(fù)雜信息、組件組裝成用戶易填的表單，常常會(huì)讓設(shè)計(jì)師陷入無限的糾結(jié)。本文章聊聊用戶體驗(yàn)視角設(shè)計(jì)表單的思路，希望對(duì)大家有幫助，歡迎一起討論交流。
結(jié)構(gòu)如下：
表單是數(shù)據(jù)錄入、數(shù)據(jù)展示的重要工具。
生活中隨處可見，比如面試要填表單、辦銀行卡要填表單、入庫要填表單…
互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中也離不開表單，如注冊(cè)、登錄、商品錄入、功能設(shè)置…
表單主要由這四類元素組成：標(biāo)簽、輸入域、操作按鈕、提示信息。
1. 標(biāo)簽
標(biāo)簽文本主要是解釋輸入項(xiàng)的含義，一般不宜太長(zhǎng)，需要簡(jiǎn)潔明了，快速讓用戶理解。
標(biāo)簽對(duì)齊方式有左對(duì)齊、右對(duì)齊、頂對(duì)齊、內(nèi)對(duì)齊，都有各自優(yōu)缺點(diǎn)，不同場(chǎng)景酌情使用。
2. 輸入域
輸入域是表單的核心，是錄入信息的核心交互部分，為了不同信息更易錄入會(huì)采用不同交互組件。比如：?jiǎn)涡形谋究?、多行文本框、單選框、多選框、數(shù)字輸入框、金額輸入框、日期、日期區(qū)間、人員選擇、部門選擇、圖片、文件等，具體組件可以去查看 Ant design、ElementUI 官網(wǎng)。
3. 操作按鈕
操作按鈕是表單信息錄入完成后，繼續(xù)或取消任務(wù)的觸發(fā)器。
為了讓用戶視覺聚焦和更快完成任務(wù)，操作按鈕分為主次按鈕，通常主任務(wù)操作為主要按鈕，次任務(wù)操作為次要按鈕，并且一個(gè)場(chǎng)景中通常只有一個(gè)主按鈕。比如，提交和取消，保存和取消等。
4. 提示信息
錄入提示：幫助用戶更具象的理解錄什么怎么錄。
幫助提示：表單中如果標(biāo)簽信息無法讓用戶理解，可以提供幫助信息讓用戶更準(zhǔn)確的理解，通常在標(biāo)簽的前/后有一個(gè)幫助按鈕，點(diǎn)擊/鼠標(biāo)懸浮按鈕出現(xiàn)有幫助信息的彈窗。其他還有頁面幫助信息，新手引導(dǎo)幫助信息等。
錯(cuò)誤提示：幫助用戶理解哪里錯(cuò)了和怎么做正確。
表單設(shè)計(jì)目標(biāo)：讓用戶更輕松獲取表單信息，更容易懂，更快速完成表單信息錄入任務(wù)，如果還能讓用戶過程很愉悅就更妙了。（用戶體驗(yàn)視角）
設(shè)計(jì)方法：通過降低用戶行為負(fù)荷，提高表單設(shè)計(jì)的用戶體驗(yàn)。
行為發(fā)生的常規(guī)路徑：通過視覺輸入信息到大腦 （視覺）— 大腦消化信息（認(rèn)知） — 采取動(dòng)作（動(dòng)作）。
視覺負(fù)荷：用戶在屏幕上識(shí)別和尋找信息，都屬于視覺負(fù)荷，信息獲取越輕松視覺負(fù)荷越低。
認(rèn)知負(fù)荷：大腦處理信息時(shí)理解、思考、記憶都屬于認(rèn)知負(fù)荷，復(fù)雜陌生信息的認(rèn)知負(fù)荷需要消耗大量腦力；所以減少認(rèn)知負(fù)荷的核心是減少用戶思考，甚至是不要讓用戶思考，成為大腦潛意識(shí)認(rèn)知的決策。
動(dòng)作負(fù)荷：用戶在使用產(chǎn)品時(shí)如果操作太繁瑣步驟太多，有可能會(huì)中途放棄，這就是動(dòng)作負(fù)荷帶來的影響。所以在不大量增加視覺負(fù)荷和認(rèn)知負(fù)荷的前提下，減少交互步驟可以降低動(dòng)作負(fù)荷。
通過降低視覺、認(rèn)知、動(dòng)作負(fù)荷的“三招”，提升行為產(chǎn)生節(jié)點(diǎn)間轉(zhuǎn)化率，讓任務(wù)行為發(fā)生更容易。
誤區(qū)：有些人陷入了設(shè)計(jì)極端，認(rèn)為操作越少交互設(shè)計(jì)就越好，實(shí)際上用戶能更好閱讀并理解比少一步簡(jiǎn)單操作更重要。
補(bǔ)充：心理負(fù)荷在特定場(chǎng)景也是影響用戶行為發(fā)生的重要因素，如隱私、健康、安全、財(cái)物等。
1. 降低視覺、認(rèn)知負(fù)荷
表單的信息是視覺負(fù)荷和認(rèn)知負(fù)荷的源頭，所以如何設(shè)計(jì)信息易讀易理解就尤為重要。
灰機(jī)的方法就是先盤信息，再梳理（該拆的拆，該合的合，該減的減），然后有節(jié)奏編排信息。
就像搬家后收拾房間，有一大堆東西需要整理，我們通常會(huì)先盤下有哪些東西，然后就是該丟的丟，該放在一起的放一起，最后分門別類放在房間的合適位置。
拿到表單信息后不著急動(dòng)手，先了解此表單背后的業(yè)務(wù)場(chǎng)景，理解每一條信息字段背后的業(yè)務(wù)價(jià)值。這是有說服力設(shè)計(jì)的核心支撐。
通過拆、合、減的方法，歸類組合信息。字段信息非必要就減掉，相關(guān)性高的信息放一起，梳理的目的是讓信息歸類更符合用戶認(rèn)知，讓信息更易被用戶理解。
技巧點(diǎn)：
有節(jié)奏展示
信息有節(jié)奏展示有利于用戶更高效獲取、理解信息。畢竟如果信息像機(jī)關(guān)槍子彈一樣連續(xù)涌入大腦，誰都沒耐心看，并且大腦消化也跟不上。
技巧點(diǎn)：
2. 降低動(dòng)作負(fù)荷
通過減少用戶行為成本，達(dá)到降低動(dòng)作負(fù)荷的目的。畢竟錄入信息方式越容易，就更容易完成表單錄入。
技巧點(diǎn)：
文章來源：優(yōu)設(shè) 作者：灰機(jī)
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wnxcall.com
