表單設(shè)計(jì):掌握表單設(shè)計(jì)方法(表單體驗(yàn)篇)

10 評(píng)論 21439 瀏覽 168 收藏 18 分鐘

編輯導(dǎo)語:表單是我們比較常見的一個(gè)信息錄入工具,糟糕的表單設(shè)計(jì)會(huì)帶來令用戶抓狂的交互體驗(yàn)。本文作者結(jié)合案例對(duì)表單的構(gòu)成及注意事項(xiàng)進(jìn)行了詳細(xì)的說明,相信對(duì)表單設(shè)計(jì)不熟悉的同學(xué)看完后肯定會(huì)有不少的收獲~

說到表單其實(shí)在生活中可以接觸到各種各樣的表單,主要目的就是讓用戶填寫來【收集用戶信息】

如:

初看這些表單,你可能覺得很簡(jiǎn)單,就是一些標(biāo)簽、基礎(chǔ)的小組件,但是在實(shí)際業(yè)務(wù)中,想要將這些小組件組合拼裝成合適的表單卻需要推敲非常多的細(xì)節(jié),常常會(huì)讓設(shè)計(jì)師陷入無限的糾結(jié)中,比如:

  • 文字標(biāo)簽是左對(duì)齊還是右對(duì)齊?
  • 確定按鈕是放左邊還是右邊?
  • 控件顆粒長(zhǎng)度是整齊劃一還是與輸入預(yù)期一樣錯(cuò)落有致?
  • 反饋內(nèi)容怎么顯示
  • ……

所以針對(duì)這些問題,我從【框架】>【細(xì)節(jié)】的邏輯與大家一起探討「如何設(shè)計(jì)一份體驗(yàn)好的表單」。

01 表單拆分

在UX Collective中有個(gè)作者名為“Taras Bakusevych” 進(jìn)行了詳細(xì)的闡述,對(duì)表單的組成部分進(jìn)行了詳細(xì)的拆解與說明 ↓ ↓ ↓

(1)標(biāo)簽:標(biāo)簽文本主要是解釋輸入項(xiàng)的含義,一般不宜太長(zhǎng),需要簡(jiǎn)明扼要,快速讓用戶理解;還有一部分是告知用戶哪些是必填項(xiàng)。

(2)占位提示:直接展示在輸入項(xiàng)中,采用弱提示文本對(duì)所需信息描述、示意,當(dāng)用戶輸入信息時(shí)即消失。

(3)校驗(yàn):對(duì)輸入項(xiàng)進(jìn)行驗(yàn)證,并給出反饋提示,如:用戶未填寫,格式錯(cuò)誤、內(nèi)容錯(cuò)誤等

常見的校驗(yàn)類型

(4)基礎(chǔ)組件:可交互輸入的區(qū)域,是構(gòu)成表單的核心內(nèi)容,主要有:輸入框、單(復(fù))選框、上傳、時(shí)間選擇器、開關(guān)……

(5)提示:描述該輸入項(xiàng)需要的輸入類型,如:上傳的文件類型

(6)按鈕:用戶完成輸入后,點(diǎn)擊按鈕進(jìn)行提交、進(jìn)入下一步等,按鈕一般是跟隨的最后一個(gè)輸入項(xiàng)后面,若輸入項(xiàng)超出一屏顯示,則按鈕懸浮固定在底部;按鈕“確定”放左、右統(tǒng)一即可,沒必要過分糾結(jié)。

02 表單類型

看了很多文章,對(duì)表單類型的劃分主要是:基礎(chǔ)表單、分步表單、高級(jí)表單(分組表單)[1]

(1)基礎(chǔ)表單:常見于輸入項(xiàng)較少的表單場(chǎng)景,如:登錄、注冊(cè)。

如:登錄

(2)分步表單:常用于輸入項(xiàng)較多,業(yè)務(wù)本身具有流程化特性(如:轉(zhuǎn)賬)

為了提高用戶填寫效率,減少用戶心理負(fù)擔(dān),將一個(gè)冗長(zhǎng)或用戶不熟悉的表單任務(wù)拆分成多個(gè)步驟,一步步指導(dǎo)用戶完成。

分步表單可以緩解用戶需要填寫較多內(nèi)容時(shí)候的抵觸情緒,并且通過拆分步驟,聚焦于每次填寫的內(nèi)容,提升用戶在不同模塊間的瀏覽效率。

來源:Ant Design Pro

(3)高級(jí)表單(分組表單):主要用于需要一次性輸入、提交 大批量數(shù)據(jù)的場(chǎng)景。高級(jí)表單與分步表單有點(diǎn)類似,都是為了減輕用戶填寫壓力,將填寫內(nèi)容進(jìn)行分塊。不同的點(diǎn)在于,分步表單的流程化明顯,后一步填寫的內(nèi)容都是基于前一步來填寫、是前一步反饋。

如:站酷上傳作品

但是以上說的基礎(chǔ)表單、分步表單、高級(jí)表單都是基于業(yè)務(wù)需要而進(jìn)行選擇,但是實(shí)際在設(shè)計(jì)時(shí),往往還需要考慮的是:這些表單應(yīng)該是以什么承載結(jié)構(gòu)展示?

是整頁展示、彈窗展示、側(cè)邊欄展示?表單內(nèi)部布局方式,一定是平鋪的一欄么,是否可以增加側(cè)邊目錄?

這些都是設(shè)計(jì)師需要進(jìn)行全盤考慮的問題,所以在設(shè)計(jì)表單的時(shí)候需要先確定這些框架,由外>內(nèi),層層深入,再對(duì)細(xì)節(jié)進(jìn)行處理。所以接下來我會(huì)針對(duì)如何由外>內(nèi)設(shè)計(jì)表單進(jìn)行詳細(xì)的陳述。

03 表單頁設(shè)計(jì)步驟

在詳細(xì)闡述如何設(shè)計(jì)表單頁前,先明確下我對(duì)于表單頁的劃分:

我將表單頁大體劃分成【頁面框架】和【表單內(nèi)容區(qū)】

這樣劃分是出于我對(duì) AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗(yàn)要素》的書,提出了從5個(gè)要素自下而上的建設(shè)用戶體驗(yàn),即:戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層,這種逐層的思考邏輯對(duì)于設(shè)計(jì)表單是十分必要的,因?yàn)樵谠O(shè)計(jì)表單的時(shí)候,常常需要考慮這個(gè)表單頁所需承載的業(yè)務(wù)訴求(戰(zhàn)略上)基礎(chǔ)上去做后面的優(yōu)化體驗(yàn)。

所以在設(shè)計(jì)表單的時(shí)候應(yīng):

  • 明確該表單的業(yè)務(wù)類型,因?yàn)椴煌臉I(yè)務(wù)訴求的表單在設(shè)計(jì)中的展現(xiàn)形式會(huì)有不同,即“頁面框架”會(huì)有不同(這也是我上面為何將表單頁分成頁面框架和表單內(nèi)容區(qū)的原因)
  • 在確定頁面框架后,就需要對(duì)表單需展示的內(nèi)容進(jìn)行明確的劃分,如:表單的內(nèi)容是否要展示流程進(jìn)度?表單內(nèi)容是否有不同層級(jí)的導(dǎo)航?確定了這些后,我們表單內(nèi)容的大致布局框架就可以確定下來,我們才能進(jìn)入下一步(內(nèi)容區(qū)具體的陳列方式)的設(shè)計(jì);
  • 表單內(nèi)容區(qū)主要是對(duì)輸入項(xiàng)的陳列方式,對(duì)齊方式,進(jìn)行體驗(yàn)優(yōu)化;
  • 最后對(duì)所有輸入項(xiàng)進(jìn)行統(tǒng)一整理,檢查是否與用戶預(yù)期一致?與其他輸入項(xiàng)的關(guān)系是否清晰等。

整體而言可以分為以下四步:

1. 確定【頁面框架】

這里得頁面框架指的是承載著整個(gè)表單頁的頁面框架,即:整頁式(新頁面)、彈窗式、側(cè)邊欄式。因?yàn)槠漤撁婷娣e大小不一樣,所以使用情境有所不同。[2]

  • 整頁式:最常用方式,適用于絕大部分的表單,可以支持構(gòu)建復(fù)雜的表單。
  • 彈窗式:通過小面積的彈窗進(jìn)行輕量化的編輯,方便快速進(jìn)行增、刪、改、查;輸入項(xiàng)較少,一般不會(huì)有滾動(dòng)條。
  • 側(cè)邊欄式:與彈窗式相似,通過小面積的側(cè)邊欄進(jìn)行編輯;可承載比彈窗更復(fù)雜一些的表單內(nèi)容,可以有滾動(dòng)條。

以上這些就是常見的表單頁面框架,我們?cè)诳紤]采用何種樣式時(shí)需要綜合以下幾個(gè)因素考慮:

  • 內(nèi)容多少 —— 內(nèi)容較多不適合使用彈窗式
  • 與原頁面關(guān)系強(qiáng)度 —— 需與原頁面保留強(qiáng)關(guān)聯(lián)建議使用彈窗式、側(cè)邊欄式
  • 表單內(nèi)容區(qū)復(fù)雜程度 —— 一般高級(jí)表單、分組表單、分步驟表單、有表格聚合的表單、聯(lián)動(dòng)表單等都建議采用整頁式的框架來展現(xiàn)。

2. 確定【表單內(nèi)容區(qū)布局】

如上圖所示,一個(gè)正常的表單內(nèi)容區(qū)主要有:標(biāo)題區(qū)、二級(jí)導(dǎo)航區(qū)、主內(nèi)容區(qū)

1)其中標(biāo)題區(qū)是必須要有的,標(biāo)題區(qū)可以讓用戶快速明白該表單是需要收集什么內(nèi)容

2)二級(jí)導(dǎo)航可以根據(jù)業(yè)務(wù)需要進(jìn)行配置

3)主內(nèi)容區(qū)則是表單填寫的主區(qū)域,通常我們直接將這個(gè)區(qū)域稱之為“表單內(nèi)容區(qū)”,該區(qū)域布局樣式可以分為三種:

  1. 通欄式,即:在頁面中居中顯示,從上到下直接平鋪控件顆粒。
  2. 左右式,即:在表單域內(nèi)容區(qū)左邊放置導(dǎo)航欄、或在右側(cè)放置輔助信息欄(如:流程節(jié)點(diǎn)展示)。
  3. 左中右式,即:分別在表單域內(nèi)容區(qū)左側(cè)放置導(dǎo)航欄,右側(cè)放置輔助信息欄。

以上三種樣式就是常見的表單內(nèi)容區(qū)的布局,采用哪種布局,可以綜合以下幾個(gè)因素考慮:

  • 內(nèi)容多少——如果內(nèi)容很多導(dǎo)致頁面很長(zhǎng),則可以考慮將內(nèi)容分類,作為左側(cè)導(dǎo)航欄,采用左右式布局。
  • 內(nèi)容類型——導(dǎo)航作用內(nèi)容必須放置左側(cè)(有些分步驟的表單也會(huì)將步驟條放置左側(cè)),而輔助信息的內(nèi)容建議放在右側(cè)(因?yàn)槿搜蹫g覽習(xí)慣都是從 左 > 右,所以信息重要度建議按照該視線路徑放置)

3. 確定【表單內(nèi)容排列方式】

在該步驟中,主要確定表單內(nèi)容區(qū)控件顆粒的排列方式:單列布局 or 多列布局

  • 在輸入項(xiàng)不多的情況下,建議采用單列布局,因?yàn)閱瘟胁季郑脩籼顚懙穆窂骄褪菑纳?gt;下的一條直線,十分符合用戶的視覺動(dòng)線,能夠提高用戶瀏覽與填寫的效率。
  • 多列布局的表單會(huì)導(dǎo)致用戶的視覺路徑變長(zhǎng),用戶需以 Z 字形的視覺動(dòng)線掃描表單,會(huì)提高瀏覽與填寫的效率,并且多列表單容易造成用戶填寫時(shí)的混亂,易填錯(cuò),體驗(yàn)差。
  • 但是有時(shí)部分業(yè)務(wù)訴求和某些特性的場(chǎng)景要求,會(huì)需要在有限的空間上放入更多的控件顆粒來收集用戶的信息,這時(shí)就不得不使用多列布局的樣式,因?yàn)槎嗔心軌蚴】v向空間。

so 根據(jù)單列布局、多列布局的優(yōu)劣勢(shì),結(jié)合實(shí)際業(yè)務(wù)需要來選擇:

【單列布局】

  • 優(yōu):視覺路徑清晰,填寫效率高,體驗(yàn)好;
  • 劣:占用縱向空間。

【多列布局】

  • 優(yōu):省空間,能夠放置更多的控件顆粒;
  • 劣:視覺路徑模糊,填寫成本高,填寫易出錯(cuò)。

在這個(gè)環(huán)節(jié)中,除了需要考慮單列式布局還是多列式布局,還有一個(gè)也是需要全盤考慮的——【標(biāo)簽的對(duì)齊方式】

在設(shè)計(jì)時(shí),到底是采用左對(duì)齊、右對(duì)齊還是頂部對(duì)齊呢?

Matteo Penzo《Label Placement in Forms》文章中,有對(duì)標(biāo)簽不同的方式方式優(yōu)劣勢(shì)進(jìn)行了說明。[3][4]

后續(xù)在這塊糾結(jié)的時(shí)候,則可以對(duì)照上面表格進(jìn)行評(píng)估了,其中詳細(xì)原理你也可以點(diǎn)擊下方鏈接進(jìn)行查看:UX Collectiveuxdesign.cc

4. 確定【表單內(nèi)容顆?!?/h3>

最后一步只需要按照收集信息類型的需要,選擇正確的控件顆粒,如:如果是要收集用戶購買數(shù)量,則可以直接使用“數(shù)字步進(jìn)器”、“輸入框”。

在選用控件顆粒時(shí),需要注意的是:

  • 選用的控件顆粒應(yīng)是用戶可以最快輸入的,能點(diǎn)擊完成就別輸入完成
  • 表單中同個(gè)信息類型的控件顆粒應(yīng)統(tǒng)一
  • 指意不明確的表單應(yīng)搭配占位提示,占位提示應(yīng)是完整的陳述句

  • 重要信息的輸入項(xiàng)應(yīng)該有錯(cuò)誤提示校驗(yàn),這種一般用于錯(cuò)誤率較高的情況,避免用戶反復(fù)填寫。如:在登錄注冊(cè)時(shí),我們填寫手機(jī)號(hào)如果不滿11位數(shù),就會(huì)報(bào)錯(cuò)。
  • 特定的輸入型顆??丶?,需要根據(jù)輸入信息的特殊性給與格式的提示與限制,如:郵箱 @http://qq.com,這樣有助于幫助用戶提前感知,減少表單填寫錯(cuò)誤。

  • 表單顆粒的寬度應(yīng)該 暗示填寫內(nèi)容的長(zhǎng)度,與輸入預(yù)期成正比,在Ant Design 4.0 系列分享的文章[5]分析結(jié)論是:錯(cuò)落有致的排版比整齊劃一更舒適,因?yàn)樵谝曈X上我們更容易將下方有圖的空間和內(nèi)容視為一個(gè)和諧的整體,但左圖過度的對(duì)齊導(dǎo)致暗示隱性的截?cái)?,我們?huì)感覺表單列右側(cè)空間缺了一大塊。

04 寫在最后

本篇文章從表單所在的頁面形式 > 表單框架 > 表單內(nèi)容區(qū) 逐層對(duì)表單進(jìn)行剝離拆解,幫助大家更加全面的認(rèn)知表單,并總結(jié)了日常工作中設(shè)計(jì)師常常會(huì)遇到的表單類型和布局,設(shè)計(jì)師可結(jié)合文章中給出的建議參考并靈活應(yīng)用。

希望能夠通過這邊文章給到大家更多的啟發(fā)。文章中如果有不嚴(yán)謹(jǐn)、錯(cuò)誤的地方希望大家給與指正。最后,作為一名剛剛將自己工作內(nèi)容進(jìn)行沉淀并分享給大家的設(shè)計(jì)師,希望大家可以多多點(diǎn)贊評(píng)論鼓勵(lì)下(狗頭保命)

參考:

  1. 表單類型:?https://preview.pro.ant.design/form/advanced-form
  2. 頁面框架:?https://www.uisdc.com/structured-approach-2
  3. 標(biāo)簽對(duì)齊選擇依據(jù):?https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
  4. 標(biāo)簽對(duì)齊優(yōu)劣勢(shì):?https://www.uisdc.com/middle-form#
  5. 整齊劃一?不如錯(cuò)落有致。Ant Design 4.0 系列分享:?https://zhuanlan.zhihu.com/p/110096160

 

本文由 @小發(fā)鴿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 想請(qǐng)教一下,對(duì)于B端頁面的新增,有的新增頁面內(nèi)容負(fù)責(zé),有的新增頁面內(nèi)容很少,如果根據(jù)新增內(nèi)容的復(fù)雜程度和字段數(shù)量來判斷新增時(shí)采用頁面還是彈窗,這樣新增的交互形式不統(tǒng)一會(huì)不會(huì)造成用戶混亂的效果,但是如果新增全部采用頁面或者彈窗一種形式的話又不適用

    來自北京 回復(fù)
  2. 非常好的設(shè)計(jì)普及知識(shí)!作者有心了!??

    回復(fù)
  3. 要是能對(duì)應(yīng)系統(tǒng)界面截圖,就更好了了??吹臅r(shí)候會(huì)有點(diǎn)難理解

    來自北京 回復(fù)
    1. 感謝建議,因?yàn)檫@個(gè)當(dāng)時(shí)是進(jìn)行了抽象出的模型,其實(shí)前期有收集了很多競(jìng)品的頁面的

      來自廣東 回復(fù)
    2. 那種功能特別復(fù)雜,填寫信息特別細(xì),特別多的表單,在頁面上如何設(shè)計(jì)得節(jié)省空間得同時(shí),還能好看一點(diǎn)

      來自湖北 回復(fù)
  4. 寫的超棒

    回復(fù)
  5. 很好,學(xué)習(xí)了。

    來自福建 回復(fù)
  6. 對(duì)于我這種新人產(chǎn)品來說 這篇文章的實(shí)用性挺高的

    來自廣東 回復(fù)
    1. 謝謝~

      來自福建 回復(fù)
    2. 設(shè)計(jì)思路一下清晰了很多

      來自美國(guó) 回復(fù)