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