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

編輯導語：表單填寫是目前人機交互最重要的方式沒有之一，優秀的表單設計對產品的體驗提升至關重要。表單該怎么布局？表單的組成元素有哪些？表單有什么交互規范？超長表單該怎么設計？等等常見問題；本篇文章作者分享了自己理解和經驗，希望能幫到你們。

最初接觸表單的時候目光所及都是標簽有沒有對齊、輸入框的位置是不是合理、該有的提示夠不夠友好，再后來研究的深一點會思考標簽的不同對齊方式有什么區別。

但是關注點總歸是離不開表單本身的幾個組成元素，以至于每次做表單優化效果總是差強人意卻又不知道問題出在哪里。

PS：水平有限，而且踩了很多前輩的肩膀，表單設計大神請繞道。

好像一提到做表單就是指的把一些不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個說明就完了。

其實表單設計遠遠不止這些，表單本身也是一個小產品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產生到表單在頁面上如何呈現，再到使用表單時與表單之間的交互，每一步都需要投入大量的思考來做好表單。

其實做好表單并不難，但是如果思考問題的方向不對（產品思維不及格）加上相關的設計知識掌握的不夠全面，就很容易在遇到問題時不知從何下手。

為了不讓自己的慘淡過往不在大家身上重演，也為了給自己的學習經驗做一個總結，特意寫了本文；因為想寫的全面一點就構思成了一個小系列，一共三篇文章，希望對大家有所幫助！

本系列文章從表單的出生（選取表單）開始一直到表單的死亡（提交結束）分別從三個方面給大家全方位的講解一下如何設計一個優秀的表單。

因為內容比較多，本系列文章分三篇文章分別介紹以下三個方面的內容：

1. 表單的選取與組織
2. 表單的元素設計
3. 如何與表單交互

本文介紹第一個方面：表單的選取與組織

一、表單的選取與組織

表單的選取與組織是表單產生的第一個過程，任何表單都需要先選定展示的問題然后將選定的問題合理的呈現在頁面上；我們將這個過程分成兩個小節來講解：表單的選取、表單的組織。

1. 表單的選取

表單的選取是指一張表單中應該包含哪些問題，我們需要遵循的原則是：

1. 非必須收集的信息最好不收集，即：用戶可看到的問題越少越好。
2. 必須收集的信息，如果可以延遲收集則延遲收集。
3. 平衡好用戶和產品的利益。

1）非必須收集的信息最好不收集，即：用戶可看到的問題越少越好。

每個用戶都必須填寫表單但是每個用戶都不想填寫表單，因為填寫表單不是用戶的目的，用戶之所以會填寫表單唯一的原因是不填寫表單無法往下進行。

試想一下你購物時需要填寫收貨地址、你登錄微信前需要先注冊賬號、你報名雅思時需要先填寫個人信息，但是這些是你的目的嗎？

并不是，只是因為不填寫收貨地址你就收不到商品、不注冊你就登錄不了微信、不填寫個人信息你就無法完成報考；所以從需求的角度，填寫表單并不是用戶的需求，而是產品的需求；實際上填寫表單的過程特別是填寫長表單是阻礙了用戶使用產品的流暢度，拉低了用戶體驗。

所以，表單的選取階段最重要的就是盡量精簡表單，能不提問的問題堅決不向用戶提問，比如：當你要求用戶填寫一張雅思報名表時，大可不必要求用戶填寫家庭住址，除非你需要向用戶寄送紙質成績單。

多余的問題不僅僅會增加用戶的完成成本，經常還會激起用戶的戒備心理。

2）必須收集的信息，如果可以延遲收集則延遲收集。

如果有些信息是產品需要的但是并不是填寫表單當時必須的可以考慮延后填寫，即：調整一下采集信息的時機，將本來繁重的表單填寫任務拆成幾個簡單的、隨時可進行的小任務；比如電商網站的收貨地址大都不會在用戶注冊賬號時就要求填寫，而是在用戶購買商品時要求補充，就是一個很好的例子。

3）平衡好用戶和產品的利益。

最后，表單選取與組織階段最難處理但是非常重要的一點就是一定要平衡好用戶和產品的利益，填寫表單時用戶的需求與產品的需求總是矛盾的。

用戶希望盡量少填寫表單以盡快往下進行，產品迫于不得不采集（比如想寄送商品給用戶就必須收集地址信息）或者更長遠的戰略考慮總是希望多收集一些用戶的信息，但是過多的采集信息就損壞了用戶的利益。

這里沒有一成不變的規則可以參考，只能根據不同的情況做不同的處理，大家可以參考以下幾個建議隨機應變：

1. 試圖需要用戶承受的底線，兩個比較好的辦法是選取真實用戶做易用性測試和數據埋點。
2. 將產品對用戶信息收集的需求用其他方式解決，比如大數據分析。
3. 采取適當的激勵手段鼓勵用戶提供更多的信息，比如完善信息獲取金幣、參與抽獎等等。
4. 學好本次的三篇系列文章，用設計降低用戶填寫表單的成本。

2. 表單的組織

表單的組織是指將已經選定的問題如何呈現在頁面上，以什么樣的方式展示給用戶。

我們需要遵循的原則是：

1. 表單命名符合場景。
2. 長表單考慮分組或分頁。
3. 排版布局不打斷掃描視線。
4. 減少干擾。
5. 組織頁面時考慮Tab鍵跳轉。
6. 運用情感化設計。

1）表單命名符合場景。

表單的名稱是用來告訴用戶本次填寫的主題的，可以讓用戶在填表之初建立起對接下來要填寫內容的心理預期也有助于填寫表單時理解表單的內容。

所以選取一個符合本次表單填寫場景的表單名稱至關重要，一個“牛頭不對馬首“的標題很可能誤導用戶或者增加用戶的疑惑。

舉個例子：

一個貨運司機要接單，在接單前需要先完善一張個人貨運資質信息的表單，試想一下點擊“接單”后進入的頁面頂部寫著“個人信息填寫”跟寫著“貨運資質填寫”哪個更容易讓人理解？

前者很容易讓人產生疑惑（特別是新人），我接單為什么要填寫我的私人信息？會不會導致信息泄露？

相反，后者就很容易讓人能理解：我接的是運輸的買賣，自然需要我的運輸資質。

2）長表單考慮分組或分頁

當表單過多時，簡單的堆疊排列容易讓用戶產生疲勞感從而放棄填表；這個時候我們可以適當的根據表單的類型將表單分組展示，這樣能很好的緩解用戶的視覺壓力，讓用戶填寫表單時更加輕松舒適。

當所有表單涉及到的主題都是相同時使用分組的方式是一個比較好的選擇，比如：姓名、身份證號、性別、民族、政治面貌、手機號、QQ號碼、郵箱、家庭地址、工作單位。

這幾個我們可以把“姓名、身份證號、性別、民族、政治面貌”分為一組命名為“身份信息”、“手機號、QQ號碼、郵箱、家庭地址、工作單位”分為一組命名為“聯系信息”；雖然分成了兩個組單他們都屬于用戶的個人基本信息，這種情況就適用于分組來處理。

但是如果需要填寫的表單涉及到了不同的主題，可以考慮采用分頁的方式。

比如姓名、身份證號、性別、民族、政治面貌、手機號、QQ號碼、郵箱、家庭地址、工作單位、駕駛證類型、貨車型號、貨運年齡、有誤事故記錄。

上述信息中“姓名、身份證號、性別、民族、政治面貌、手機號、QQ號碼、郵箱、家庭地址、工作單位”屬于個人基本信息；“駕駛證類型、貨車型號、貨運年齡、有誤事故記錄”屬于資質信息；我們大可以將兩類信息分成兩個頁面展示，讓用戶采用分步的方式逐漸完成填表。

3）排版布局不打斷掃描視線

掃描視線是指的用戶瀏覽表單時的視線流，清晰、線性的視線流更有助于用戶可以迅速對問題作出答復，用戶的思維在不同的表單之間轉換時花費時間也最少。

所以盡可能的在排版布局時將表單布置在一條比較清晰的的視線流中，對比下方左右兩種布局方式，很明顯右側的布局更易于閱讀。

4）減少干擾

用戶填寫表單的過程是一個任務過程，越是簡潔明了的界面風格越有利于提高用戶填寫的效率。

很多時候處于提高界面的視覺效果，一些設計師喜歡使用一些復雜的樣式或圖案或動畫，這些在其他頁面的設計上無疑是有益的；但是這種思考并不適用于表單填寫頁面，多余的視覺干擾容易打斷填寫表單的思路從而降低填寫效率，甚至當用戶因為沒有必要的干擾阻斷了填寫思路時會產生反感并放棄填寫。

但是并不是說表單填寫頁面不能使用復雜樣式或一些炫酷的顏色，畢竟我們需要靠這些來區分、組織表單的不同分組或者不同主題；所以請在能有效的區分、組織頁面的前提下，盡可能減少更多的復雜元素的出現。

5）組織頁面時考慮Tab鍵跳轉

PC端的網頁，用戶更多的是使用鍵盤與表單進行交互，這就涉及到了鼠標光標在不同輸入框之間進行切換時常用到的Tab鍵，這是很多人都有的操作習慣所以我們必須重視。

Tab鍵的影響主要是視線的跳轉，當有兩欄內容時，當光標定位到第一欄最后一個表單時，Tab鍵切換之后光標會繼續往下走還是會切換到第二欄的第一個表單呢？

沒有一個好的頁面引導的話很容易讓用戶產生困惑（可能用戶以為切換到了同一列的下一個表單，結果輸入時發現內容出現在了第二欄的第一個表單）。

另外還會出現表單過長時有可能Tab鍵切換之后光標已經切換到了頁面下方的表單，但是由于一屏展示不下，激活的表單是隱藏在頁面下方的，就會導致出現用戶不知道光標跑到了哪里的尷尬。

所以在設計時盡可能讓表單能在主流分辨率顯示器的同一屏出現，在光標切換到屏幕之外的表單時可以使用錨點定位自動將視線切換到相應的表單位置。

6）運用情感化設計

情感化設計是指的在頁面中采用能引起人類感情共鳴的元素，以此來增加填寫表單時的趣味性或減少用戶面對大量表單時的焦慮，情感化設計可以遍布在表單設計的每一個階段。

比如在命名表單時可以適當的采用圖片背景來營造與表單主題相符的氛圍；收集地理位置信息時，將“國家”更換為“您來自哪個國家？”

以這樣的方式將生硬的表單填寫構建成一次用戶與計算機的對話；分頁設計時，不同頁面切換時適當的采用動效來增加趣味性等等。

二、結語

到此，360°全方位表單設計指南的第一篇文章就結束了，感謝大家抽出時間來閱讀這篇文章，也希望對大家能有所幫助。

下篇文章我將會為大家講解表單設計的第二個方面：表單的元素設計——表單的元素設計時表單設計的核心部分，也是大家最關注的部分，同時還是學習效果最容易立桿見影的部分，有感興趣的同學可以關注一下！

進階提問：情感化設計時將表單的標簽名稱用問句替換詞語，不是增加了標簽的復雜程度，加大了閱讀成本嗎？

作為一個自認為填了很多表的“偽表單老司機”，我將自己學到的一些理解和經驗分享給大家，希望同為產品人我們能一同進步、成長！

歡迎感興趣的朋友在評論區討論！

360°全方位表單設計指南（二）

360°全方位表單設計指南（三）

公眾號：pmreport

本文由 @時光時光慢些吧 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議