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