2023年“三招擒拿”表單設(shè)計(jì)

“三招擒拿”表單設(shè)計(jì)業(yè)務(wù)場(chǎng)景拓展，字段增加又增加，原本眉清目秀的表單變得面目全非。

想要將這些簡(jiǎn)單信息、組件組裝成用戶(hù)易填的表單，經(jīng)常會(huì)讓設(shè)計(jì)師陷入無(wú)限的糾結(jié)。筆者聊聊用戶(hù)體驗(yàn)視角設(shè)計(jì)表單的思路，盼望對(duì)大家有關(guān)心，歡迎一起爭(zhēng)論溝通。

一、表單是什么

表單是數(shù)據(jù)錄入、數(shù)據(jù)展現(xiàn)的重要工具。

生活中隨處可見(jiàn)，比如面試要填表單、辦銀行卡要填表單、入庫(kù)要填表單……

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中也離不開(kāi)表單，如注冊(cè)、登錄、商品錄入、功能設(shè)置……

二、表單的內(nèi)容

表單主要由這四類(lèi)元素組成：標(biāo)簽、輸入域、操作按鈕、提示信息。

1.標(biāo)簽

標(biāo)簽文本主要是解釋輸入項(xiàng)的含義，一般不宜太長(zhǎng)，需要簡(jiǎn)潔明白，快速讓用戶(hù)理解。

標(biāo)簽對(duì)齊方式有左對(duì)齊、右對(duì)齊、頂對(duì)齊、內(nèi)對(duì)齊，都有各自?xún)?yōu)缺點(diǎn)，不同場(chǎng)景酌情使用。

2.輸入域

輸入域是表單的核心，是錄入信息的核心交互部分，為了不同信息更易錄入會(huì)采納不同交互組件；比如：?jiǎn)涡形谋究?、多行文本框、單選框、多選框、數(shù)字輸入框、金額輸入框、日期、日期區(qū)間、人員選擇、部門(mén)選擇、圖片、文件等。

3.操作按鈕

操作按鈕是表單信息錄入完成后，連續(xù)或取消任務(wù)的觸發(fā)器。

為了讓用戶(hù)視覺(jué)聚焦和更快完成任務(wù)，操作按鈕分為主次按鈕，通常主任務(wù)操作為主要按鈕，次任務(wù)操作為次要按鈕，并且一個(gè)場(chǎng)景中通常只有一個(gè)主按鈕；比如，提交和取消，保存和取消等。

4.提示信息

錄入提示：關(guān)心用戶(hù)更具象的理解錄什么怎么錄。

關(guān)心提示：表單中假如標(biāo)簽信息無(wú)法讓用戶(hù)理解，可以供應(yīng)關(guān)心信息讓用戶(hù)更精確?????的理解，通常在標(biāo)簽的前/后有一個(gè)關(guān)心按鈕，點(diǎn)擊/鼠標(biāo)懸浮按鈕消失有關(guān)心信息的彈窗；其他還有頁(yè)面關(guān)心信息，新手引導(dǎo)關(guān)心信息等。

錯(cuò)誤提示：關(guān)心用戶(hù)理解哪里錯(cuò)了和怎么做正確。

三、設(shè)計(jì)思路

表單設(shè)計(jì)目標(biāo)：讓用戶(hù)更輕松獵取表單信息，更簡(jiǎn)單懂，更快速完成表單信息錄入任務(wù)，假如還能讓用戶(hù)過(guò)程很愉悅就更秒了。（用戶(hù)體驗(yàn)視角）

設(shè)計(jì)方法：通過(guò)降低用戶(hù)行為負(fù)荷，提高表單設(shè)計(jì)的用戶(hù)體驗(yàn)。

行為發(fā)生的常規(guī)路徑：通過(guò)視覺(jué)輸入信息到大腦（視覺(jué)）—大腦消化信息（認(rèn)知）—實(shí)行動(dòng)作（動(dòng)作）。

視覺(jué)負(fù)荷：用戶(hù)在屏幕上識(shí)別和查找信息，都屬于視覺(jué)負(fù)荷，信息獵取越輕松視覺(jué)負(fù)荷越低。認(rèn)知負(fù)荷：大腦處理信息時(shí)理解、思索、記憶都屬于認(rèn)知負(fù)荷，簡(jiǎn)單生疏信息的認(rèn)知負(fù)荷需要消耗大量腦力；所以削減認(rèn)知負(fù)荷的核心是削減用戶(hù)思索，甚至是不要讓用戶(hù)思索，成為大腦潛意識(shí)認(rèn)知的決策。動(dòng)作負(fù)荷：用戶(hù)在使用產(chǎn)品時(shí)假如操作太繁瑣步驟太多，有可能會(huì)中途放棄，這就是動(dòng)作負(fù)荷帶來(lái)的影響；所以在不大量增加視覺(jué)負(fù)荷和認(rèn)知負(fù)荷的前提下，削減交互步驟可以降低動(dòng)作負(fù)荷。通過(guò)降低視覺(jué)、認(rèn)知、動(dòng)作負(fù)荷的“三招”，提升行為產(chǎn)生節(jié)點(diǎn)間轉(zhuǎn)化率，讓任務(wù)行為發(fā)生更簡(jiǎn)單。

誤區(qū)：有些人陷入了設(shè)計(jì)極端，認(rèn)為操作越少交互設(shè)計(jì)就越好，實(shí)際上用戶(hù)能更好閱讀并理解比少一步簡(jiǎn)潔操作更重要。

補(bǔ)充：心理負(fù)荷在特定場(chǎng)景也是影響用戶(hù)行為發(fā)生的重要因素，如隱私、健康、平安、財(cái)物等。

四、設(shè)計(jì)技巧

1.降低視覺(jué)、認(rèn)知負(fù)荷

表單的信息是視覺(jué)負(fù)荷和認(rèn)知負(fù)荷的源頭，所以如何設(shè)計(jì)信息易讀易理解就尤為重要。

筆者的方法就是先盤(pán)信息，再梳理（該拆的拆，該合的合，該減的減），然后有節(jié)奏編排信息。

就像搬家后整理房間，有一大堆東西需要整理，我們通常會(huì)先盤(pán)下有哪些東西，然后就是該丟的丟，該放在一起的放一起，最終分門(mén)別類(lèi)放在房間的合適位置。

盤(pán)信息：

拿到表單信息后不焦急動(dòng)手，先了解此表單背后的業(yè)務(wù)場(chǎng)景，理解每一條信息字段背后的業(yè)務(wù)價(jià)值。這是有勸說(shuō)力設(shè)計(jì)的核心支撐。

梳理信息：

通過(guò)拆、合、減的方法，歸類(lèi)組合信息。字段信息非必要就減掉，相關(guān)性高的信息放一起，梳理的目的讓信息歸類(lèi)更符合用戶(hù)認(rèn)知，讓信息更易被用戶(hù)理解。

技巧點(diǎn)：

文案盡量簡(jiǎn)潔并貼合用戶(hù)認(rèn)知，垂直業(yè)務(wù)的文案最好是業(yè)務(wù)語(yǔ)境的表述。按業(yè)務(wù)場(chǎng)景合并包裝信息，比如把簡(jiǎn)單表單字段包裝成A、B、C三個(gè)選項(xiàng)供用戶(hù)選擇，用戶(hù)更簡(jiǎn)單理解和易用。有節(jié)奏展現(xiàn)

信息有節(jié)奏展現(xiàn)有利于用戶(hù)更高效獵取、理解信息；究竟假如信息像機(jī)關(guān)槍子彈一樣連續(xù)涌入大腦，誰(shuí)都沒(méi)急躁看，并且大腦消化也跟不上。

技巧點(diǎn)：

信息錄入先簡(jiǎn)潔后簡(jiǎn)單，先熟識(shí)后生疏先放必填基礎(chǔ)信息，后放選填自定義信息有前后規(guī)律關(guān)系試狀況分步展現(xiàn)信息能單列展現(xiàn)就不用多列（從上至下或從左往右，按一個(gè)規(guī)律的視覺(jué)流信息獵取更輕松）2.降低動(dòng)作負(fù)荷

通過(guò)削減用戶(hù)行為成本，達(dá)到降低動(dòng)作負(fù)荷的目的；究竟錄入信息方式越簡(jiǎn)單，就更簡(jiǎn)單完成表單錄入。

技巧點(diǎn)：

能給默認(rèn)值就不讓用戶(hù)選；能讓用戶(hù)選就不讓用戶(hù)輸；平鋪單選優(yōu)于下拉單