表單設計-掌握表單設計方法(表單體驗篇)

表單設計-掌握表單設計方法(表單體驗篇)

表單設計-掌握表單設計方法(表單體驗篇),觀點,小花鴿,原創文章站酷網,中國設計師互動平台。

全篇閱讀大概需要15min,對錶單設計不熟悉的同學看完後肯定會有不少的收穫~~~

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

初看這些表單,你可能覺得很簡單,就是一些標籤、非常基礎的小組件,但是在實際業務中,想要將這些小組件組合拼裝成合適的表單卻需要推敲非常多的細節,常常會讓設計師陷入無限的糾結中,比如:

文字標籤是左對齊還是右對齊?
確定按鈕是放左邊還是右邊?
控件顆粒長度是整齊劃一還是與輸入預期一樣錯落有致?反饋內容怎麼顯示......等等

★ 所以針對這些問題,我從【框架】>【細節】的邏輯與大家一起探討「如何設計一份體驗好的表單」。

表單拆分

在UX Collective,作者Taras Bakusevych進行了詳細的闡述,對錶單的組成部分進行了詳細的拆解與說明↓ ↓ ↓

1、標籤:標籤文本主要是解釋輸入項的含義,一般不宜太長,需要簡明扼要,快速讓用戶理解;還有一部分是告知用戶哪些是必填項。

2、佔位提示:直接展示在輸入項中,採用弱提示文本對所需信息描述、示意,當用戶輸入信息時即消失。

3、 校驗:對輸入項進行驗證,並給出反饋提示,如:用戶未填寫,格式錯誤、內容錯誤等

常見的校驗類型

4、 基礎組件:可交互輸入的區域,是構成表單的核心內容,主要有:輸入框、單(复)選框、上傳、時間選擇器、開關......

5、 提示:描述該輸入項需要的輸入類型,如:上傳的文件類型

6、 按鈕:用戶完成輸入後,點擊按鈕進行提交、進入下一步等,按鈕一般是跟隨的最後一個輸入項後面,若輸入項超出一屏顯示,則按鈕懸浮固定在底部;按鈕“確定”放左、右統一即可,沒必要過分糾結。

表單類型

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

  • 基礎表單:常見於輸入項較少的表單場景,如:登錄、註冊。

如:登錄

  • 分步表單:常用於輸入項較多,業務本身俱有流程化特性(如:轉賬)

為了提高用戶填寫效率,減少用戶心理負擔,將一個冗長或用戶不熟悉的表單任務拆分成多個步驟,一步步指導用戶完成。

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

來源:Ant Design Pro

  • 高級表單(分組表單):主要用於需要一次性輸入、提交大批量數據的場景。高級表單與分步表單有點類似,都是為了減輕用戶填寫壓力,將填寫內容進行分塊。不同的點在於,分步表單的流程化明顯,後一步填寫的內容都是基於前一步來填寫、是前一步反饋。

如:站酷上傳作品

但是以上說的基礎表單、分步表單、高級表單都是基於業務需要而進行選擇,但是實際在設計時,往往還需要考慮的是:這些表單應該是以什麼承載結構展示?

是整頁展示、彈窗展示、側邊欄展示?
表單內部佈局方式,一定是平舖的一欄麼,是否可以增加側邊目錄?

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

表單頁設計步驟

在詳細闡述如何設計表單頁前,先明確下我對於表單頁的劃分↓ ↓ ↓

我將表單頁大體劃分成【頁面框架】和【表單內容區】

這樣劃分是出於我對AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗要素》的書,提出了從5個要素自下而上的建設用戶體驗,即:戰略層、範圍層、結構層、框架層、表現層,這種逐層的思考邏輯對於設計表單是十分必要的,因為在設計表單的時候,常常需要考慮這個表單頁所需承載的業務訴求(戰略上)基礎上去做後面的優化體驗,所以在設計表單的時候應:

  • 明確該表單的業務類型,因為不同的業務訴求的表單在設計中的展現形式會有不同,即“頁面框架”會有不同(這也是我上面為何將表單頁分成頁面框架和表單內容區的原因)

  • 在確定頁面框架後,就需要對錶單需展示的內容進行明確的劃分,如:表單的內容是否要展示流程進度?表單內容是否有不同層級的導航?確定了這些後,我們表單內容的大致佈局框架就可以確定下來,我們才能進入下一步(內容區具體的陳列方式)的設計;

  • 表單內容區主要是對輸入項的陳列方式,對齊方式,進行體驗優化;

  • 最後對所有輸入項進行統一整理,檢查是否與用戶預期一致?與其他輸入項的關係是否清晰等。

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

STEP1:確定【頁面框架】

這裡得頁面框架指的是承載著整個表單頁的頁面框架,即:整頁式(新頁面)、彈窗式、側邊欄式。因為其頁面面積大小不一樣,所以使用情境有所不同。 [2]

  • 整頁式:最常用方式,適用於絕大部分的表單,可以支持構建複雜的表單。

  • 彈窗式:通過小面積的彈窗進行輕量化的編輯,方便快速進行增、刪、改、查;輸入項較少,一般不會有滾動條。

  • 側邊欄式:與彈窗式相似,通過小面積的側邊欄進行編輯;可承載比彈窗更複雜一些的表單內容,可以有滾動條。

以上這些就是常見的表單頁面框架,我們在考慮採用何種樣式時需要綜合以下幾個因素考慮:

  • 內容多少—— 內容較多不適合使用彈窗式

  • 與原頁面關係強度—— 需與原頁面保留強關聯建議使用彈窗式、側邊欄式

  • 表單內容區復雜程度—— 一般高級表單、分組表單、分步驟表單、有表格聚合的表單、聯動表單等都建議採用整頁式的框架來展現。

STEP2:確定【表單內容區佈局】

如上圖所示,一個正常的表單內容區主要有:標題區、二級導航區、主內容區

  • 其中標題區是必須要有的,標題區可以讓用戶快速明白該表單是需要收集什麼內容

  • 二級導航可以根據業務需要進行配置

  • 主內容區則是表單填寫的主區域,通常我們直接將這個區域稱之為“表單內容區”,該區域佈局樣式可以分為三種:

1、通欄式,即:在頁面中居中顯示,從上到下直接平鋪控件顆粒。

2、左右式,即:在表單域內容區左邊放置導航欄、或在右側放置輔助信息欄(如:流程節點展示)。

3、左中右式,即:分別在表單域內容區左側放置導航欄,右側放置輔助信息欄。

以上三種樣式就是常見的表單內容區的佈局,採用哪種佈局,可以綜合以下幾個因素考慮:

  • 內容多少——如果內容很多導致頁面很長,則可以考慮將內容分類,作為左側導航欄,採用左右式佈局。

  • 內容類型——導航作用內容必須放置左側(有些分步驟的表單也會將步驟條放置左側),而輔助信息的內容建議放在右側(因為人眼瀏覽習慣都是從左> 右,所以信息重要度建議按照該視線路徑放置)

★ STEP3:確定【表單內容排列方式】

在該步驟中,主要確定表單內容區控件顆粒的排列方式,

單列佈局or 多列佈局。

  • 在輸入項不多的情況下,建議採用單列佈局,因為單列佈局,用戶填寫的路徑就是從上>下的一條直線,十分符合用戶的視覺動線,能夠提高用戶瀏覽與填寫的效率。

  • 多列佈局的表單會導致用戶的視覺路徑變長,用戶需以Z 字形的視覺動線掃描表單,會提高瀏覽與填寫的效率,並且多列表單容易造成用戶填寫時的混亂,易填錯,體驗差。

但是有時部分業務訴求和某些特性的場景要求,會需要在有限的空間上放入更多的控件顆粒來收集用戶的信息,這時就不得不使用多列佈局的樣式,因為多列能夠省縱向空間。

so 根據單列佈局、多列佈局的優劣勢,結合實際業務需要來選擇:

【單列佈局】

優:視覺路徑清晰,填寫效率高,體驗好;

劣:佔用縱向空間。

【多列佈局】

優:省空間,能夠放置更多的控件顆粒;

劣:視覺路徑模糊,填寫成本高,填寫易出錯。

在這個環節中,除了需要考慮單列式佈局還是多列式佈局,還有一個也是需要全盤考慮的——

【標籤的對齊方式】

在設計時,到底是採用左對齊、右對齊還是頂部對齊呢?

Matteo Penzo《Label Placement in Forms》文章中,有對標籤不同的方式方式優劣勢進行了說明。 [3][4]

後續在這塊糾結的時候,則可以對照上面表格進行評估了,其中詳細原理你也可以點擊下方鏈接進行查看:

UX Collective

STEP4:確定【表單內容顆粒】

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

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

  • 選用的控件顆粒應是用戶可以最快輸入的,能點擊完成就別輸入完成

  • 表單中同個信息類型的控件顆粒應統一

  • 指意不明確的表單應搭配佔位提示,佔位提示應是完整的陳述句

  • 重要信息的輸入項應該有錯誤提示校驗,這種一般用於錯誤率較高的情況,避免用戶反复填寫。如:在登錄註冊時,我們填寫手機號如果不滿11位數,就會報錯。

  • 特定的輸入型顆粒控件,需要根據輸入信息的特殊性給與格式的提示與限制,如:郵箱@ http://qq.com ,這樣有助於幫助用戶提前感知,減少表單填寫錯誤。

  • 表單顆粒的寬度應該暗示填寫內容的長度,與輸入預期成正比,在Ant Design 4.0系列分享的文章[5]分析結論是:

錯落有致的排版比整齊劃一更舒適,因為在視覺上我們更容易將下方有圖的空間和內容視為一個和諧的整體,但左圖過度的對齊導致暗示隱性的截斷,我們會感覺表單列右側空間缺了一大塊。

寫在最後

本篇文章從表單所在的頁面形式> 表單框架> 表單內容區逐層對錶單進行剝離拆解,幫助大家更加全面的認知表單,並總結了日常工作中設計師常常會遇到的表單類型和佈局,設計師可結合文章中給出的建議參考並靈活應用。

希望能夠通過這邊文章給到大家更多的啟發。文章中如果有不嚴謹、錯誤的地方希望大家給與指正。最後,作為一名剛剛將自己工作內容進行沉澱並分享給大家的設計師,希望大家可以多多點贊評論鼓勵下(狗頭保命)

參考

  1. ^表單類型: https://preview.pro.ant.design/form/advanced-form

  2. ^頁面框架: https://www.uisdc.com/structured-approach-2

  3. ^標籤對齊選擇依據: https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

  4. ^標籤對齊優劣勢: https://www.uisdc.com/middle-form#

  5. ^整齊劃一?不如錯落有致。 | Ant Design 4.0系列分享: https://zhuanlan.zhihu.com/p/110096160

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。