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

編輯導語：表單頁用于信息的添加和錄入，它在企業中臺中無處不在。本文作者對B端的基礎通用組件表單進行了總結，并對其中一些高頻問題作出了解答，感興趣的小伙伴們一起來看一下吧。

表單頁是B端產品中的典型頁面，用于信息的添加和錄入，表單頁在企業中臺中無處不在，如創建直播、新增客戶、新建商品、中獎設置、報銷申請、職位發布等，有些小伙伴在設計B端表單時，不知道需要注意哪些問題，本文對B端基礎通用組件表單進行了總結，帶你全面了解在設計表單過程中需要了解的知識和遵循的原則，希望能給到小伙伴一些啟發和幫助。

一、表單的作用

后臺產品的本質是針對數據的增、刪、改、查，其中增、改、查都可以用表單來完成，系統本身是沒有信息的，表單是用戶和數據庫之間的媒介，在網頁中主要負責數據采集的功能。

相對于其他頁面而言，當用戶進到表單頁時使用阻力和操作阻力是很大的，因為用戶完成任務時有思考成本和操作成本，很多時候用戶會因為填寫信息太過繁瑣，從而放棄了對該產品的使用。

因此在設計錄入表單時，合適的表單才能提高錄入任務的完成度和滿意度。

二、 表單的構成

1）標簽/Lable

說明：通常放置在表單字段之外或者字段內，對輸入項或設置項的解釋說明，可用文字或圖標表示。

作用：提示用戶要輸入什么內容，幫助用戶快速理解每一項字段的作用。

2）表單域/Formfield

說明：包含了輸入框、下拉框、日期選擇器、時間選擇器、開關、上傳等等。

作用：用來收集用戶輸入的信息，每個字段包含著某一類型的信息，是形成表單的核心內容。

3）提示信息/Promptinformation

說明：包含占位符、幫助信息、校驗信息，后面會詳細講到。

作用：幫助用戶有效正確填寫信息的引導內容或反饋內容。

4）操作按鈕/operatingbutton

說明：當用戶完成信息錄入時，暗示可點擊性，必須讓用戶一眼看出這個是可點擊的交互區域，一般情況占據最高的層次關系，暗示整個界面的唯一目的和操作。

作用：提交內容到服務器，對表單內容進行校驗、提交或者進行下一步操作。

1. 標簽

指明用戶需在此表單上要填寫什么類型的信息，通常放置在表單文本框之外居左或上方的位置，極少數情況下也會放置于文本輸入框內，可用文字或圖標展示，標簽的對齊方式一般分為左標簽、頂標簽、行內標簽。

在Matteo Penzo《Label Placement in Forms》文章中有分享過關于表單標簽放置的研究，他分別對標簽左對齊、右對齊以及頂部對齊做了用戶眼動追蹤實驗，下圖是此測試的眼動數據。

Matteo Penzo-根據表單標簽對齊方式研究出來的時間表：

單從效率角度看，頂對齊標簽>右對齊>左對齊，但是根據應用場景，效率快并不是我們選擇標簽對齊方式的唯一的指標，還是要根據用戶需求和實際業務場景提供不同的解決方案。

1）左對齊標簽

視線從標簽移動到輸入框的時間為500ms ，花費時間很長說明用戶經歷了沉重的認知壓力，原因是違反了格式塔原理，標簽和表單域之前存在負空間（格式塔原理：距離更近的更容易被看成一個整體）離得遠用戶就要思索一段時間判斷是否是一個整體所以左對齊表單填寫速度最慢。

• 優點：視覺動線符合用戶的閱讀習慣，因此閱讀效率高。
• 缺點：標簽與輸入域負空間間距長短不一，操作效率低 。

2）右對齊標簽（冒號對齊標簽）

視線從標簽移動到輸入框的時間為240ms。

因為右對齊有鋸齒狀的視覺動線，不利于快速掃視，所以用戶閱讀效率不高，但是符合親密性原則,快速填寫的速度更快，右對齊表單完成時間比左對齊快2倍。

• 優點：標簽與輸入域有明確的視覺關聯，符合親密性原則，操作效率高。
• 缺點：有鋸齒狀的視覺動線，不利于快速掃視，所以用戶閱讀效率不高。

3）頂對齊標簽

視線從標簽移動到輸入框的時間為50ms。

Matteo Penzo從2006年7月進行眼動研究發現視線從標簽移動到輸入框的時間為50ms， 比左對齊標簽方式快了10倍，比右對齊標簽方式快2倍，能迅速填完頂對齊標簽表單的原因之一，是因為眼球只需要在標簽和輸入框之間進行上下單向運動。

• 優點： 節約橫向空間，對齊視覺舒適，對齊方式符合視覺動線，閱讀、操作效率高。
• 缺點：一定程度上占用大量的縱向空間，縱向空間利用率不高。

4）行內標簽

視線從標簽移動到輸入框的時間為10ms。

• 優點：最節約空間，多用于登錄注冊。
• 缺點：輸入狀態標簽消失，用戶會有迷失感。

高頻問題一：表單標簽應簡潔明了，在哪個位置才是最高效的呢？標簽到底是左對齊、右對齊還是頂部對齊呢？

答案是根據用戶需求和實際業務場景提供不同的解決方案。

如果是用于移動端或者國際化的產品（比如國際化的出海產品設計，可能會適配多種語言，有些單詞翻譯過來就會很長）頂對齊標簽是個不錯的選擇。

如果是詳情的陳列（快速掃視的速度更快）或者涉及比較復雜和敏感需要用戶放慢速度，仔細思考的場景，可以選用左對齊標簽。

右對齊標簽雖然與表單域視覺關聯強，用戶錄入效率高，不過要考慮好標簽長短不一的問題。

2. 輸入域

輸入域是表單的主題與核心，用來收集用戶操作的信息，每個輸入域字段包含一個類型信息，輸入域不僅僅是文本輸入框，從交互組件的角度來看，其包括文本輸入框、單選框、復選框、開關、選擇器、步驟條、上傳、Tab切換、滑塊、步驟條等等。

3. 提示信息

幫助用戶有效正確填寫信息的引導內容或反饋內容，以文字或者圖標形式展現在要說明的內容旁邊，圖標形式的情況鼠標hover時顯示全部信息，從提示信息所處的位置和提示出現的時機，提示可分為輸入框內提示、輸入框外提示、激活輸入框提示、圖標懸停提示及單獨區域提示等。

1）占位符/Placeholder

說明：通常放置在表單字段之外或者字段內，對輸入項或設置項的解釋說明。
作用：提示用戶要輸入什么內容，幫助用戶快速理解每一項字段的作用。

2）幫助信息/Help Information

說明：文字形式的表單幫助信息很重要，需要讓用戶必須知曉的一般放在表單字段右側，圖標形式則常用于信息內容非用戶必須知曉的，以圖標形式隱藏內容，在需要時鼠標hover顯示。

作用：幫助用戶解釋名詞和引導用戶完成任務。

3）校驗信息/Check the information

說明：當用戶填寫表單的信息無法被錄入時給予反饋、實時提供建議參考或者對錄入內容的提示，在錯誤信息顯示在對應表單項旁邊，盡量減少用戶記憶和認知負荷。

作用：當用戶填寫的信息無法被錄入時給予反饋。

提示一般可分為引導提示和反饋提示兩類。

4）引導提示

發生在用戶輸入前，引導用戶正確輸入信息或對輸入信息規則的注釋與說明，輸入框內提示、輸入框外提示、激活輸入框提示都可歸為引導提示，引導提示可細分為全局提示和定位提示。

①全局提示：一般位于表單頂部顯示的注釋與說明，告知用戶填寫表單的注意事項、信息采集的用途以及信息安全性保證等，解除用戶輸入時的顧慮。

②定位提示：適用于表單很長，用戶注意不到自己錯哪兒了，在相應錯誤位置進行提示，幫助用戶快速定位到錯誤內容。

單項提示也可以選用不同的布局，分別有輸入框內提示、在鼠標haver時氣泡提示、輸入框下方文字提示、輸入框后方文字提示。

錯誤提示一般停留2-3S后消失。

5）反饋提示

發生在輸入中或輸入后，頁面系統對用戶的輸入給與校驗，并對校驗結果予以展示的提示形式，輸入中作用：實時反饋， 輸入后作用：提醒和糾錯。

• 缺點：影響一些性能，但是這個影響比較小，如果在輸入一個錯誤率很高的內容，頻繁的給用戶錯誤提示會影響用戶體驗。
• 優點：該方式的校驗條件多在本地，不需要實時向服務器發命令，以得到反饋，減輕后臺數據傳送壓力。

①失去焦點、即時報錯

當某項錄入項已錄入完成并失去焦點時，觸發系統校驗（校驗內容存儲在遠端，程序需要完整的輸入信息到遠端進行檢驗，并給出反饋）并且盡量采用非模態反饋的方式，避免打斷當前任務流。

• 缺點：如果輸入有誤，用戶需要多一步操作，點擊會有錯誤的輸入框進行修改，稍微影響用戶體驗。
• 優點：降低用戶的問題查找和修改成本，避免出現很多錯誤需要改正的情況。

注意：要清晰地描述錯誤并提供相應的解決方案，報錯文案應該盡可能簡短，用戶看到一大段文字，很可能會失去了去閱讀的耐心，文案還應清晰指出錯誤的原因，對于用戶可自己修復的問題，應告知問題如何修正。

如果彈窗空間足夠，可以直接展示圖片樣式，降低折疊度，避免用戶二次點擊，減少了一步用戶操作。

②操作/保存/提交/下一步 時全部報錯

用戶全部輸入完成以后，點擊下一步操作的時候將所有錯誤提示都展示給用戶。

• 缺點：用戶不能及時看到反饋，及時進行修改，如果表單過長的話，會增加用戶的問題查找和修改成本。
• 優點：減少后端服務器壓力，提高頁面性能。

4. 操作按鈕

操作按鈕：表單界面操作的最后一步，填寫完表單各項內容后，所要進行的操作動作（eg：保存、取消、提交、確定等）來結束當前操作流程或在流程之中或之后開啟新的功能操作，在視覺上暗示用戶可點擊，提示元素可以是文字或者圖形，例如保存、取消、下一步等。

標簽一般為每個輸入項的名稱，按所要填寫信息的必要性又可分為必填項和非必填項。

• 必填項：用戶必須要輸入有效的文本信息，否則，該表單就不能正常提交、保存等操作。
• 非必填項：該項信息用戶可填可不填，根據用戶的意愿和需求度來自愿選擇填或者不填。

高頻問題二：如果大部分都是必填項，還有必要標記必填字段嗎？必填項or非必填項到底有無必要標注。

通常設計師們會覺頁面上每個必填字段都有一個標記都有星號會讓頁面視覺噪音太重，讓用戶產生視覺疲勞，原本清清爽爽的頁面看起來low low的。所以一般設計師逃避星號的三種措施是：

1）給全局提示

缺點：用戶一般會直接忽視這類說明，當用戶填寫字段時，用戶視線會更聚焦這項字段本身都什么要求，不太可能閱讀到表單最頂部的填寫說明，用戶會討厭讀各種說明，比如我們去到景區里面，不喜歡讀景區里面的景區說明，在公共場合也很容易忽視禁止什么禁止什么的標識，用戶很有可能不會注意到表單最頂部的說明。

即使讀了之后會忘記，特別是當表單很長或者填寫表單被打斷的時候。讓用戶記得頂部說明，會占用用戶的工作記憶，增加認知負荷，加大用戶填寫表單的阻力，讓本身就具有挑戰性的表單更是難上加難。

2）只標記占比較少的可選字段

缺點：用戶必須掃描表單以確定是否為必填字段或選填字段，用戶會掃視表單找到一個標記為可選的標識，即時找到了那些是非必填也會很容易忘記，看到沒有標星的字段可能會做出假設。

用戶可能會想：“嗯，工作單位——不需要我的工作單位吧？先空著吧”，即使用戶不留空，也不得不暫停來思考這個字段是否需要填寫，增加了用戶的思考和理解負擔。

3、什么都不標注

缺點：什么都不做，讓用戶去猜哪個是必填項哪個是非必填項，他們相信用戶自己可以判斷，如果沒有填寫必填項，提交的時候報錯，讓用戶完善填寫信息，當給出用戶提示的時候，用戶都很有可能不按照規則填寫提交的時候出現報錯，毋庸置疑，什么都不提示更加會提高用戶出錯的概率。

用戶會通過必填標記來評估工作量，了解輸入信息的最低限度，因此標記必填字段是很有必要的，盡量清晰明確的展示每一個必填字段，盡管界面出現大量星標時會讓界面看起來不清爽優雅，加重界面的視覺噪音，甚至重復的星號 * 會帶來一些認知恐慌和緊張感。但這些負面影響相對于必填項不標星的后果是可以原諒的。

三、交互模式

表單頁面的交互方式分為以下4種：就地編輯、氣泡卡片、彈窗、抽屜、頁面跳轉，根據具體的使用場景選擇合適的頁面交互。

1. 原位編輯

原位編輯是比較輕量型信息采集表單形式，適用于表單內容較少，使用頻率較低的場景，同時屬于主功能分支的場景，表單操作后頁面隨即發生反饋改變，保證用戶對主要功能的高效操作，通過雙擊或點擊特定的操作按鈕即變為激活編輯狀態。

優點：操作便捷，不會打斷還可單擊空白處隨時退出。

hover下給到一個輸入框來顯示可以原位編輯。

加一個小鉛筆的圖標，可以是hover的時候高亮，也可以默認放一個小鉛筆，主要看業務上編輯的頻次高頻不高頻，編輯和瀏覽那個需求更重要。

2. 氣泡卡片

點擊或者鼠標移入彈出氣泡式的卡片浮層。氣泡卡片交互方式也是比較輕量化的形式，氣泡提示共有12種箭頭方向，其對齊方式根據實際顯示內容選擇合適的樣式，所產生的表單頁與當前的頁面親密性緊密相關。

3. 彈窗

彈窗樣式的輸入表單是主要流程步驟中的分支流程，輸入彈窗樣式的表單，輸入內容的多少處于頁面跳轉和就地編輯兩種樣式之間，用戶在不離開當前頁的情況下繼續操作，是流程步驟中的分支行為，可由用戶選擇是否進行，不不覆蓋用戶已閱讀內容。

注意點：

在直播列表頁點擊新增直播或者在工作臺點擊新增直播，彈出的彈窗保持一致， 比如做直播的添加商品彈窗，不管他的入口在任何一個頁面，交互出來的容器要保持一致，如果新增一條規則，和新增直播這個無關，規則里面的內容比較多，彈窗容納不下的情況下，是可以用抽屜來承載內容的。

4. 抽屜

抽屜交互的表單樣式是比較常見的交互樣式，它的拓展性很強，承載的信息很多，當前頁面的分支操作，體現兩頁面之間的層級關系，信息承載量和頁面比肩，又兼具彈窗的優點，同時又有連續操作的優點。

• 內容比較多時，可以把彈窗換成抽屜
• 強調詳情可以連續查看
• 可以快速切換列表，主要操作流程在一個頁面中展示，保證主要功能的操作的流暢度

5. 頁面跳轉

若輸入內容特別多，超出了彈窗/抽屜的承載量時，建議使用頁面跳轉，頁面跳轉的信息承載能力強，對反饋的及時性要求不高也沒有那么強的關聯性，常用于崗位發布、創建直播、初始化入住等復雜信息的發布。

頁面跳轉包含兩種：新頁面打開和當前頁面跳轉。

• 新頁面打開：主要流程步驟中的分支流程，頁面功能具有獨立性，不影響用戶對主流程的繼續操作。
• 當前頁面跳轉：流程步驟中的關鍵步驟，提示用戶已進入下一步，關鍵流程建議在當前頁面打開，讓產品主流程更加清晰，建立新頁面會分散用戶注意力增加用戶的迷失感，當前頁面跳轉則讓用戶更聚焦于當前頁面的信息中。

盡量避免頁面跳轉，頁面的跳轉勢必造成重新加載和刷新，這本身就會耗費一定的時間，此外，跳轉還會造成用戶行為的中斷，以及瀏覽的不順暢。

四、內容布局

在web頁面中，由于頁面的關系，導致跳轉頁面與彈窗的橫向空間較大，縱向空間不足，若出現較多的輸入內容時，且不能采用分模塊、分步驟、高級等交互布局時，有的小伙伴會采用雙列或多列表單，以提高橫向空間的利用，這也是可以的，要注意列與列間距的合理性以及遵守用戶的視覺流暢，可以參照菲茲定律。

但是作為表單，單列表單的瀏覽及填寫效率是最高的，用戶的視覺流較為順暢，可以提升填寫效率，同時能夠減少用戶的疲勞度，因此建議表單多采用單列布局。

1. 標題分組

用戶的認知成本會少很多，用戶知道自己每填一步在干嘛，而不是密密麻麻一大片，讓用戶完成表單時會有階段感，降低用戶自主歸納的成本，同時用戶可以在填寫好一段內容后進行心理上停頓休息，減少視覺疲勞和心理壓力。

• 以必填項劃分：若表單內有必填項和非必填項，且各項之前關聯度不高，可采用將必填項劃分為一組進行優先呈現，該種方式有助于讓用戶快速發現自己需要錄入的內容。
• 以相關性劃分：若錄入項較多，且各項內容之間存在明顯的關聯度區分，可考慮以內容相關性進行信息分組，該種方式有助于讓用戶理解各項內容間的邏輯關系。

2. 標題+卡片分組

如果表單里面已經完全區分不同性質和類別的時候，可以考慮直接用卡片，輸入組件、分類、分模塊的排版方式讓用戶感覺更好，在視覺樣式上進一步做歸類和區分，上一個是天然的間距區分，該種方式有助于讓用戶理解各項內容間的邏輯關系。

3. 標簽頁

卡片分組和標題分組都用到了，但是表單太多了，三個相對獨立的，那么就用標簽頁。

4. 錨點定位

5. 步驟

對于內容過多的表單輸入組件，又有著明確的操作先后關系，可以選用分步驟，一般不超過三步，每屏僅展示該步驟下的表單輸入組件有些場景下，系統只需要用戶錄入簡單的信息，分步表單常用于輸入項較多，業務本身具有流程化特性。

為了提高用戶填寫效率，減少用戶心理負擔，將一個冗長或用戶不熟悉的表單任務拆分成多個步驟，一步步指導用戶完成，分步表單的流程化明顯，后一步填寫的內容都是基于前一步來填寫、是前一步反饋，分步表單可以緩解用戶需要填寫較多內容時候的抵觸情緒，并且通過拆分步驟，聚焦于每次填寫的內容，提升用戶在不同模塊間的瀏覽效率。

高頻問題三：這么多不同的組合，那么不同內容布局之間的區別？如何排列組合更合理呢？

1）標簽頁和錨點定位的區別

1. 標簽頁是切換不在一個頁面，錨點定位在當前頁面
2. 標簽頁可以獨立提交數據，各提交各的，互不影響

2）標簽頁和步驟條的區別

步驟條更強調順序，先填什么后填寫什么。

3）錨點定位和步驟條的區別

錨點定位可以先填第4個再填第2個，錨點定位本質上是一個快速的目標傳送門，只是告訴你這個表單很長，有一個傳送門可以讓你看到后面的表單節點，有點像鼠標的快速滾輪，讓頁面滾動的的快一點，而步驟條流程化明顯，后一步填寫的內容都是基于前一步來填寫、是前一步反饋。

五、結語

春卷對B端表單設計的歸納與總結，把自己學到的經驗分享出來，讓大家有一個更清晰的認知，希望對從事B端工作或者對B端知識感興趣的同學有些幫助。感謝閱讀，歡迎交流～

本文由郝小七指導http://www.aharts.cn/u/917803

參考文獻：

美芳Mia《體驗設計手冊》：https://www.yuque.com/meifangmia

https://www.yuque.com/weiweiyixiaohennaikan/lmzzoy/ggb9p7

https://mp.weixin.qq.com/s/eKLrUCsm2W12RORNdjqwUA

本文由 @春卷設計筆記 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議。