中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：B端的表單設(shè)計，對產(chǎn)品的體驗起著至關(guān)重要的作用。作為收集信息、開展工作任務(wù)、形成產(chǎn)品閉環(huán)的關(guān)鍵步驟，表單要怎么設(shè)計更好呢？一起來看一下吧。

表單作為收集信息、開展工作任務(wù)、形成產(chǎn)品閉環(huán)的關(guān)鍵步驟。在一系列 B 端產(chǎn)品中，有較為高頻的應(yīng)用場景。隨著 B 端設(shè)計的精細化，表單設(shè)計對 B 端產(chǎn)品的體驗起到愈發(fā)關(guān)鍵作用。

本文從高效和清晰兩個表單設(shè)計原則出發(fā)，闡述b端產(chǎn)品的表單優(yōu)化思路。通過制定設(shè)計規(guī)范，對復(fù)雜的業(yè)務(wù)場景提供設(shè)計決策依據(jù)。

一、表單定義

表單頁是一種用于信息添加、錄入的頁面類型。用來確保用戶按照要求錄入信息提交給系統(tǒng)使用或引導(dǎo)用戶進行應(yīng)用設(shè)置。表單的常見類型 基礎(chǔ)表單、分組表單、分步表單。

1. 基礎(chǔ)表單

是一種較為簡單的表單類型，通常只需要少量的信息既可以完成的任務(wù)。如登陸注冊界面頁面等。

2. 分步表單

將復(fù)雜的填寫內(nèi)容按照線性流程進行組織，并拆解成若干步驟。

好處：可以給予用戶明確的任務(wù)預(yù)期，快速了解填寫流程和進度；降低用戶的填寫負擔(dān)，減少出錯率。

1）常規(guī)分步表單

用戶需要在每個步驟完成之前點擊確認才能進入下一步，更加適用于具有明確線性順序的填寫步驟。

在實際應(yīng)用中用戶未通過第一步的填寫和校驗，不可以進行后面步驟的操作。也可以理解成如果不具備后面步驟的填寫條件，可以在第一步時就選擇放棄，這樣反而不會被用戶反感。但是，如果僅僅是因為填寫內(nèi)容過長，而選擇常規(guī)分布表單，似乎無意地增加了用戶的填寫步驟，這時就比較推薦靈活分布表單。

2）靈活分步表單

在給予用戶分步選擇的同時（給予用戶充分預(yù)期）。將所有輸入字段直接展示出來，用戶也可以按照操作需求自定義輸入的順序。

此種方式更像是步驟條和錨點定位的組合，好處是用戶不必點擊下一步，也不必按照既有的線性順序，更加靈活完成信息錄入。

3. 分組表單

將需要填寫復(fù)雜的內(nèi)容歸類分組，分組內(nèi)容具有一定的相似性和可歸納性。和分步驟表單類似可以減輕用戶的操作負擔(dān)，提高操作效率。

小思考：這里大家可能會糾結(jié)，靈活分步表單和分組表單會比較類似。我的觀點是，首先要根據(jù)業(yè)務(wù)場景去選擇合適的表單樣式，其次這里的“靈活分步表單”可以是對分步表單的升級，也可以是對分組表單的升級，叫什么名稱其實不重要，重要的是能否幫助用戶高效地完成填寫任務(wù)。

二、背景

1）用戶側(cè)

在過往的工作中，我們通過對用戶調(diào)研，并對反饋進行整理。發(fā)現(xiàn)用戶對表單使用問題集中表現(xiàn)為使用效率低，填寫復(fù)雜。

2）設(shè)計側(cè)

設(shè)計師在設(shè)計表單時，對一些設(shè)計細節(jié)點認知不一致，往往憑借已有的設(shè)計經(jīng)驗開展設(shè)計工作。需要一個表單設(shè)計規(guī)范，去引導(dǎo)和規(guī)范設(shè)計工作。

三、設(shè)計策略

我們通過對現(xiàn)狀的分析，結(jié)合用戶調(diào)研，確定設(shè)計目標(biāo)為高效、清晰、組件化，并將設(shè)計目標(biāo)拆解為具體的可執(zhí)行動作。

策略一：高效 – 提升用戶決策效率

目的：通過合理的信息組織，使用戶快速完成表單填寫。

• 行動 1. 更少的瀏覽時間，合理的布局
• 行動 2. 更短的視覺路徑，加強視覺引導(dǎo)
• 行動 3. 更快的決策路徑，規(guī)范操作行為

策略二：清晰 – 明確填寫目標(biāo)

目的：幫助用戶理解表單填寫項的含義，準(zhǔn)確的填寫表單，降低出錯率。

• 行動 1. 暗示輸入長度，減少用戶的認知負擔(dān)
• 行動 2. 視覺降噪，加強用戶感知，建立用戶心智
• 行動 3. 有容錯機制，有填寫錯誤的校驗提醒

四、關(guān)鍵行動

策略一：高效 – 提升用戶決策效率

1）更少的瀏覽時間 – Lable 和 Input 的對齊方式

Lable 和 Input 的對齊方式，推薦選擇右對齊和頂對齊的方式。

Matteo Penzo 通過眼動追蹤實驗的方式，對表單中 Lable 的放置位置進行深入研究。研究發(fā)現(xiàn)，對于用戶來說，需要有一個從 Lable 到 Input 掃視的時間，來感知之間的聯(lián)系。其中，左對齊需要 500 毫秒，右對齊需要 240 毫秒，頂對齊需要 50 毫秒。填寫速度從快到慢依次是頂對齊、左對齊、右對齊。

為了提升表單在業(yè)務(wù)場景中使用效率，同時考慮到系統(tǒng)的美觀、有序，防止設(shè)計者僅憑個人經(jīng)驗選擇 Lable 的對齊方式，我們推薦選擇頂對齊和右對齊兩種方式。

那么我們該如何對左對齊和頂對齊進行選擇呢？

最直觀的區(qū)別是占空間大小和視覺美觀。頂對齊視覺相對平衡，所占橫向空間最小，缺點是需要較長的屏幕縱向空間。右對齊因為受限 Lable 的寬度不固定，視覺效果較為參差，占橫向空間較大，但所占縱向空間較少。

考慮到內(nèi)部 B 端產(chǎn)品會涉及到大量的表單輸入項，為了節(jié)約縱向空間提升屏效。我們推薦一個系統(tǒng)優(yōu)先使用左對齊的方式，同時保留兩種對齊方式。并給出如下的選擇條件供設(shè)計師判斷。

頂對齊：

• 當(dāng)頁面橫向空間較少，比如在內(nèi)容較少的彈窗、抽屜、頁面分屏、頁面
• 更加聚焦填寫內(nèi)容，要求極高的填寫效率
• 不會因為 Lable 的長度不固定，而引起視覺不平衡，視覺上整齊統(tǒng)一

左對齊：

• 當(dāng)縱向空間較少，填寫內(nèi)容多，需要提高屏效時
• 表單整體長度較長，需要用戶填寫項較多
• 相對頂對齊，可以節(jié)約大量的縱向空間，較常用的對齊方式

2）更短的視覺路徑 – 單列和多列

多列布局的格式，對相似的選項進行閱讀。視覺路徑更長，閱讀效率相對更低。

在 B 端業(yè)務(wù)中推薦運用單列布局的形式，更短的視覺路徑，更高的閱讀效率。

但是在特定的業(yè)務(wù)訴求下，用戶對屏效的要求比較高，也可以采用多列布局的形式。

3）更快的決策路徑 – 按鈕的位置

參考 Ant Design ，“我們確定了一個清晰的設(shè)計策略來決策按鈕區(qū)位置：應(yīng)將按鈕放置于用戶瀏覽路徑中，便于被用戶發(fā)現(xiàn)，并且應(yīng)盡量靠近其所控制的對象。在未刻意建立信息層級引導(dǎo)視覺路徑時，經(jīng)典 “F” “Z” 網(wǎng)頁瀏覽模式作為了我們按鈕位置放置規(guī)則的基礎(chǔ)指導(dǎo)。”

F形閱讀模式：用戶的視線首先是水平移動的瀏覽內(nèi)容區(qū)域的頂部，這是F的第一橫。接下來用戶的視線會沿著屏幕的左側(cè)向下移動，如果找到感興趣的點，視線會繼續(xù)向右移動，這是F的第二橫。最后用戶的視線會繼續(xù)沿著屏幕垂直向下移動。

Z字形閱讀（古騰堡法則）：用戶關(guān)注流(通常含鼠標(biāo)移動)遵循一個 Z 字形模式。視線流從左上到右下，左上角為第一視覺區(qū)，右下角為視覺終點區(qū)。

為了提升用戶的決策效率，我們對表單按鈕的擺放位置進行了統(tǒng)一。當(dāng)單列布局時，按鈕的位置選擇跟隨表單。當(dāng)多列布局時，按鈕的位置在右下角。

策略二 ：清晰 – 明確填寫目標(biāo)

1）暗示輸入長度 – Input 定寬

目前對 Input 的寬度常見的處理方式有定款和自適應(yīng)兩種。常見在實際的業(yè)務(wù)場景中，大部分 Input 都有理想的輸入長度。Input 的寬度應(yīng)該向用戶暗示需要輸入字符的長短，給用戶明確的填寫預(yù)期?；诖?，我們選擇定寬的處理方式。

牛頓說：“如果我看的更遠，那是因為我站在巨人的肩上?！?/p>

我們不妨站在巨人的肩膀上看問題，根據(jù) Ant Design 的研究，得出5種高頻的表單寬度區(qū)間。寬度值是 XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。

為了呈現(xiàn)出錯落有致的排列效果，倡導(dǎo)組合 Input 和單個 Input 的對齊概率最大化，這樣Input的寬度差值可以呈現(xiàn)出一個固定規(guī)律，且總結(jié)出一種不同寬度尺碼的排列公式。

我們設(shè)定 XS 尺寸可以容納 7 個中文字段的 input 或 99999.00 的 number input。根據(jù)設(shè)計規(guī)范，此時寬度剛好為 100PX。并且根據(jù)公式推算出5種 Input的寬度，以及應(yīng)用場景。分別是XS=108PX、S=208PX、M=316PX、L=424PX、XL=532PX。

XS：我們設(shè)定支持輸入 5～7 個中文字符，7～10 個英文字符， 寬度為 108PX。

適用于：較短文本、短數(shù)字、選項、價格、數(shù)量。如：課程價格、學(xué)員性別、選擇時間點等。

S：支持輸入 14～16 中文字符，寬度為 208PX。

適用于：短文本和選項，如：學(xué)員姓名、學(xué)員電話、學(xué)員微信、郵箱、身份證、學(xué)員 ID 、課程 ID、日期段選擇等。

M：顯示23～25個中文字段，寬度為 316PX。

適用于：常規(guī)輸入框大小，適用于大部分字段長度。如：課程名稱、班級名稱、模版名稱、日期時間段選擇等。

L：寬度為 424PX。

適用于：較長字段錄入，適用于長網(wǎng)址、標(biāo)簽組展示、文件路徑、集聯(lián)選擇器等。

XL：寬度為 532PX。

適用于：超長文本的輸入，如：正文、描述、備注、簡介等。

小結(jié)：我們根據(jù)此規(guī)范，對真實使用場景做優(yōu)化，有較為顯著的提升效果。在滿足填寫需求的同時，我們也通過設(shè)定的 Input 尺寸，給予用戶所輸入內(nèi)容長短的心理預(yù)期。與表單自適應(yīng)規(guī)則不同，Input 定寬的處理方式可以降低適配過程中的視覺風(fēng)險。同時，錯落有致的布局，更接近真實的使用場景也符合設(shè)計美感。

2）視覺降噪 – 必填和選填的抉擇

大量的必填項小紅點會增加用戶的認知負荷，產(chǎn)生焦躁的情緒，增加填錯的風(fēng)險。表單中的視覺噪聲越少可讀性越強。

當(dāng)必填項過多時，推薦選擇非必填提示的形式。

3）合理的預(yù)期-提示反饋

用戶在初次使用表單時，對各種定義、用途、使用條件等概念往往理解不清晰。我們希望用戶在填寫表單時，給予用戶清晰的引導(dǎo)和明確的填寫預(yù)期。這里我們對輸入說明、輸入線索、錯誤提示進行規(guī)范。

輸入說明：指在空白文本字段的旁邊或下方，放置一個短語或示例，解釋輸入內(nèi)容或提示輸入要求。

作用：

• 保持 Lable 標(biāo)簽字段簡潔
• 補充說明填寫要求，降低填寫難度，提高填寫的成功率

輸入線索：指用示例或說明文本，以占位符的形式，引導(dǎo)、提示用戶輸入內(nèi)容。

作用：

• 以較少的占位空間，提示用戶，視覺負擔(dān)較輕
• 在輸入框內(nèi)，容易引起用戶的重視

錯誤提示：是表單出現(xiàn)輸入錯誤時，為用戶展示的一條引人注目的解釋性消息。

作用：

• 幫助用戶修復(fù)他們在輸入時遇到的問題
• 讓用戶盡可能快速，輕松地完成任務(wù)

五、總結(jié)

本文根據(jù)用戶對于表單的使用痛點，挖掘出用戶目標(biāo)。將用戶目標(biāo)轉(zhuǎn)化為設(shè)計目標(biāo)，找到設(shè)計抓手。并將表單設(shè)計的思考，總結(jié)為規(guī)范，引導(dǎo)設(shè)計工作。

這里對表單設(shè)計規(guī)范作用的理解，不僅是為一些簡單的業(yè)務(wù)場景，提供設(shè)計模版供設(shè)計師直接使用。更重要的意義是，面對復(fù)雜和未覆蓋的場景，設(shè)計規(guī)范可以為設(shè)計者決策提供設(shè)計依據(jù)和設(shè)計邊界。

感謝閱讀。

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

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