如何設計一個超長長長長長的複雜表單
編輯導語：你有沒有設計過結構複雜、內容繁多的表單？在設計時有沒有什麼技巧可以化繁為簡、提升填寫者的體驗感呢？本文作者為我們羅列出了表單設計中可能遇到的一些問題，並且提供瞭解決方案，讓我們一起來學習吧。
距離上次發文已經快半年多了，實在是慚愧，好久沒有輸出內容了，看著每週增加的零星關注人數，內心更加焦灼難安。
這半年來我換了工作，也適應了新的環境，同時也在思考新的方向，估計和大多數的設計師一樣，迷茫時常伴隨著我。前段時間寫了幾周的產品體驗日記，但覺得缺乏深度就沒發上來，後續我將會繼續寫產品體驗日記，完善後分享給大家。
2020所剩無多了，我也會將積攢下的一些內容陸陸續續發上來與大家分享，感謝關注，感謝閱讀。哈哈哈哈
一、導語你平時填寫過的最複雜的表單是什麼？調查問卷還是文件資訊錄入？如果一個表單欄位內容巨多、結構多變、填寫耗時耗力，那你將如何設計你的表單使之體驗更佳？
面臨的問題:
1. 業務複雜，功能較多不知道大家是否看過法律合同之類的檔案，多則好幾籮筐，少也有厚厚一疊；類似的文件如果進行線上結構化，勢必要同樣要花費巨大的人力去填寫表單，完成基礎資訊的錄入工作。
同時，由於錄入的時間不確定，流程不明確等問題，也制約著表單的填寫。
2. 流程較長，操作繁瑣多個不同表單之間的互有關聯又相互區別，填寫的時候需要來回檢視以確認資訊，查閱和填寫相互並行，操作繁瑣。
3. 欄位較多，關聯項較多幾乎每一個欄位都有對應的關聯項，每個單選欄位的不同項決定不同的內容。同時，由於欄位數量，層級劃分不明確，會使填寫的人失去定位，產生迷惑。
二、解決方案1. 內容分組，分步填寫根據業務內容分級，合理運用顏色、間距、字型大小、卡片層級等進行資訊分級。
一般表單是與某項功能掛鉤的，資訊會在多個入口錄入。因此在填寫長表單的時候，如果能從系統中自動獲取到資料，就可以自動為其填充，可根據業務場景，判斷是否讓其修改和更新。
一般的長表單在涉及非審批流的時候，可以讓其無限二次編輯；如果是處於審批流，則需要根據業務場景限制其編輯次數或者限定其編輯規則（草稿可編輯，一旦提交則不可編輯）。
6.提供多人協作編輯功能如果一個長表單，需要多個不同的業務域的人來填寫，那麼需要協同編輯，並實時顯示編輯的人員資訊。
同時，為了避免資訊丟失和編輯錯亂，在同一個表單下，同一時間應該限制只允許一個人進行編輯，等其提交完後，可允許其他人進行編輯。
前端實時校驗欄位輸入規則，後端統一校驗資訊交換規則。
比如對於數字輸入框的校驗、電話號碼的校驗、身份證號的校驗，應該在前端實時完成。
在滑鼠離開焦點區域或定位到下一個欄位的時候，提示其填寫有誤；這樣做的目的是減少後續修改的次數，在長表單下，統一提示其填寫錯誤會是一場災難。
在點選儲存並填寫下一步或點選提交資訊的時候，就需要跟後端交換資料，驗證錄入的資訊；如果不匹配，則提示錯誤，並從上至下定位至相應的錯誤欄位。
8.做好填寫引導功能要透過多種方式，引導表單的填寫。
1）在開始填寫之前，簡要說明該表單的業務目標，大概需要花費的時間等；
2）開始填寫後，關於每個欄位的特殊說明，都需要標註出來。重要的要顯示在頁面上，不重要的就收起在註釋符號中；
3）填寫的過程中，切記不要到最後才告訴使用者哪裡出錯了，重要的資訊一定要提示到位，否則一旦出錯，前功盡棄；
4）填寫完成後，引導其下一步的操作，或者返回至列表。
表單填寫完畢後的產出物就是詳情頁，詳情頁是需要瀏覽的。因此在設計詳情頁的時候，應該本著讓使用者瀏覽方便的原則去設計，需要注意以下幾個點：
1）結構清晰
結構清晰是指不要講內容一股腦的全堆在頁面上，要做好資訊的分類；同時，注意規劃頁面的層級。
2）設定快捷導航
如果一個表單是長且複雜的，那麼其對應的詳情頁也會變得複雜和冗長，因此在頁面的右側或者頂部設定合理的快捷導航是很有必要的。
快速返回頂部按鈕的使用要注意場景，如果你的頁面比較長，且沒有分組瀏覽的導航，那就需要設定快速返回頂部的按鈕。
但是在存在分組瀏覽導航和頂部懸浮標籤的情況下，不建議使用快速返回頂部的按鈕，因為在填寫表單的時候，使用快速置頂的場景比較少。
2. 提供分組模組收起展開功能當一個模組混雜著各種資訊的時候，單純的模組分組已經無法處理它的複雜度了，因此需要收起高頻且資訊量大的模組，可以合理的減少頁面的複雜度。
步驟條可以單純的作為步驟指示器使用，也可以作為一個表單完成度的提示區域。
在填寫大量欄位的表單時，閱讀表單內容和填寫表單同樣耗時耗力。
如果我們將所有的提示資訊隱藏在提示符中，一般情況下使用者不會去檢視；但是如果去挨個檢視提示資訊，則會多花費一個步驟去點選或者懸停來檢視提示資訊，浪費了大量的時間。
因此如果涉及到重要的提示資訊，請直接展示在欄位的後面，不要隱藏起來。
在後臺產品上，關於元件的規範統一，想必是人盡皆知的設計原則。
無論是各類平臺型設計元件，還是各個公司自造的設計元件，保持統一和規範對產品設計有著重要的作用，在這裡不贅述元件應該怎樣規範統一。
因為無論是Ant Design還是其他設計語言，都有詳盡的關於元件的定義方法，我在這裡講述一個產品設計更高層面或者更深層面的原因：
元件的規範統一併不僅僅是為了省時省力，而是為了使使用者在使用的過程中達到認知上的統一和行為上的統一，在進行高頻次的操作後，介面的流程或者元件樣式已大致在使用者腦海中形成固定印象。
因此在操作相同類的流程時，使用者會有更多的掌控感，試想一下：如果你在操作人事相關的流程後，去填寫績效部分的內容時，發現一個迥異的介面或者彈窗，你肯定覺得這是不是哪裡出錯了，甚至會懷疑這是否是同一個系統。
目前大多數公司的管理系統經過多次縫縫補補，內部的跳轉邏輯已經異常感人，介面風格也大放異彩，但是使用起來卻無從下手，深感迷茫。
因此大到介面樣式，小到間距大小，產品設計的規範和統一應該是最基礎又不可缺少的原則。
6.龐大的資訊錄入，表單內部要分步填寫，外部可拆分成不同的表單分別填寫對付複雜的表單，你需要解決的主要問題並不是填寫方式或者頁面設計，而是資訊分級和結構拆分。解決了這個問題，基本上就解決了業務問題，其餘部分就跟我們常用的表單一致。
將複雜度降低並不意味著減少頁面的資訊，而是透過設計師合理的資訊劃分，降低視覺上的複雜度和流程上的複雜度，這樣才會達到當前場景下的“最佳解決方案”。
隨著網際網路資訊化的深入發展，複雜是避免不了的。
我知道大家都推崇簡潔的設計，但那只是對視覺和樣式的定義，而非對資訊的定義。
我們所處的世界是複雜的，行業更是複雜的。資訊的複雜度與日俱增，想要處理複雜的資訊，就需要從複雜中尋求規律，這規律與業務息息相關。
B端360行，行行深如海，小夥伴們，我們一起慢慢修煉吧~
作者：米蘭小鐵匠；公眾號：星野隨記（ID：Free_mediocre）
本文由 @米蘭小鐵匠 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議