六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

如何設(shè)計一個超長長長長長的復(fù)雜表單

2020-11-12    周周

編輯導(dǎo)語:你有沒有設(shè)計過結(jié)構(gòu)復(fù)雜、內(nèi)容繁多的表單?在設(shè)計時有沒有什么技巧可以化繁為簡、提升填寫者的體驗感呢?本文作者為我們羅列出了表單設(shè)計中可能遇到的一些問題,并且提供了解決方案,讓我們一起來學(xué)習(xí)吧。

距離上次發(fā)文已經(jīng)快半年多了,實在是慚愧,好久沒有輸出內(nèi)容了,看著每周增加的零星關(guān)注人數(shù),內(nèi)心更加焦灼難安。

這半年來我換了工作,也適應(yīng)了新的環(huán)境,同時也在思考新的方向,估計和大多數(shù)的設(shè)計師一樣,迷茫時常伴隨著我。前段時間寫了幾周的產(chǎn)品體驗日記,但覺得缺乏深度就沒發(fā)上來,后續(xù)我將會繼續(xù)寫產(chǎn)品體驗日記,完善后分享給大家。

2020所剩無多了,我也會將積攢下的一些內(nèi)容陸陸續(xù)續(xù)發(fā)上來與大家分享,感謝關(guān)注,感謝閱讀。哈哈哈哈

一、導(dǎo)語

你平時填寫過的最復(fù)雜的表單是什么?調(diào)查問卷還是文檔信息錄入?如果一個表單字段內(nèi)容巨多、結(jié)構(gòu)多變、填寫耗時耗力,那你將如何設(shè)計你的表單使之體驗更佳?

面臨的問題:

1. 業(yè)務(wù)復(fù)雜,功能較多

不知道大家是否看過法律合同之類的文件,多則好幾籮筐,少也有厚厚一疊;類似的文檔如果進(jìn)行線上結(jié)構(gòu)化,勢必要同樣要花費巨大的人力去填寫表單,完成基礎(chǔ)信息的錄入工作。

同時,由于錄入的時間不確定,流程不明確等問題,也制約著表單的填寫。

2. 流程較長,操作繁瑣

多個不同表單之間的互有關(guān)聯(lián)又相互區(qū)別,填寫的時候需要來回查看以確認(rèn)信息,查閱和填寫相互并行,操作繁瑣。

3. 字段較多,關(guān)聯(lián)項較多

幾乎每一個字段都有對應(yīng)的關(guān)聯(lián)項,每個單選字段的不同項決定不同的內(nèi)容。同時,由于字段數(shù)量,層級劃分不明確,會使填寫的人失去定位,產(chǎn)生迷惑。

二、解決方案

1. 內(nèi)容分組,分步填寫

根據(jù)業(yè)務(wù)內(nèi)容分級,合理運用顏色、間距、字體大小、卡片層級等進(jìn)行信息分級。

如何設(shè)計一個超長長長長長的復(fù)雜表單

2. 實時保存,避免數(shù)據(jù)丟失,提供草稿功能,避免任務(wù)中斷

如何設(shè)計一個超長長長長長的復(fù)雜表單

3.字段分組,示意結(jié)構(gòu),聯(lián)動項隱喻

如何設(shè)計一個超長長長長長的復(fù)雜表單

4. 信息自動帶入,節(jié)省時間

一般表單是與某項功能掛鉤的,信息會在多個入口錄入。因此在填寫長表單的時候,如果能從系統(tǒng)中自動獲取到數(shù)據(jù),就可以自動為其填充,可根據(jù)業(yè)務(wù)場景,判斷是否讓其修改和更新。

如何設(shè)計一個超長長長長長的復(fù)雜表單

5. 提供二次編輯功能,防止信息輸入有誤

一般的長表單在涉及非審批流的時候,可以讓其無限二次編輯;如果是處于審批流,則需要根據(jù)業(yè)務(wù)場景限制其編輯次數(shù)或者限定其編輯規(guī)則(草稿可編輯,一旦提交則不可編輯)。

6.提供多人協(xié)作編輯功能

如果一個長表單,需要多個不同的業(yè)務(wù)域的人來填寫,那么需要協(xié)同編輯,并實時顯示編輯的人員信息。

同時,為了避免信息丟失和編輯錯亂,在同一個表單下,同一時間應(yīng)該限制只允許一個人進(jìn)行編輯,等其提交完后,可允許其他人進(jìn)行編輯。

如何設(shè)計一個超長長長長長的復(fù)雜表單

7. 實時檢驗

前端實時校驗字段輸入規(guī)則,后端統(tǒng)一校驗信息交換規(guī)則。

比如對于數(shù)字輸入框的校驗、電話號碼的校驗、身份證號的校驗,應(yīng)該在前端實時完成。

在鼠標(biāo)離開焦點區(qū)域或定位到下一個字段的時候,提示其填寫有誤;這樣做的目的是減少后續(xù)修改的次數(shù),在長表單下,統(tǒng)一提示其填寫錯誤會是一場災(zāi)難。

在點擊保存并填寫下一步或點擊提交信息的時候,就需要跟后端交換數(shù)據(jù),驗證錄入的信息;如果不匹配,則提示錯誤,并從上至下定位至相應(yīng)的錯誤字段。

8.做好填寫引導(dǎo)功能

要通過多種方式,引導(dǎo)表單的填寫。

1)在開始填寫之前,簡要說明該表單的業(yè)務(wù)目標(biāo),大概需要花費的時間等;

如何設(shè)計一個超長長長長長的復(fù)雜表單

2)開始填寫后,關(guān)于每個字段的特殊說明,都需要標(biāo)注出來。重要的要顯示在頁面上,不重要的就收起在注釋符號中;

如何設(shè)計一個超長長長長長的復(fù)雜表單

3)填寫的過程中,切記不要到最后才告訴用戶哪里出錯了,重要的信息一定要提示到位,否則一旦出錯,前功盡棄;

如何設(shè)計一個超長長長長長的復(fù)雜表單

4)填寫完成后,引導(dǎo)其下一步的操作,或者返回至列表。

如何設(shè)計一個超長長長長長的復(fù)雜表單

9. 詳情頁也需要注意信息分級

表單填寫完畢后的產(chǎn)出物就是詳情頁,詳情頁是需要瀏覽的。因此在設(shè)計詳情頁的時候,應(yīng)該本著讓用戶瀏覽方便的原則去設(shè)計,需要注意以下幾個點:

1)結(jié)構(gòu)清晰

結(jié)構(gòu)清晰是指不要講內(nèi)容一股腦的全堆在頁面上,要做好信息的分類;同時,注意規(guī)劃頁面的層級。

2)設(shè)置快捷導(dǎo)航

如果一個表單是長且復(fù)雜的,那么其對應(yīng)的詳情頁也會變得復(fù)雜和冗長,因此在頁面的右側(cè)或者頂部設(shè)置合理的快捷導(dǎo)航是很有必要的。

如何設(shè)計一個超長長長長長的復(fù)雜表單

三、小細(xì)節(jié),大體驗

1. 提供快速返回頂部的按鈕

快速返回頂部按鈕的使用要注意場景,如果你的頁面比較長,且沒有分組瀏覽的導(dǎo)航,那就需要設(shè)置快速返回頂部的按鈕。

但是在存在分組瀏覽導(dǎo)航和頂部懸浮標(biāo)簽的情況下,不建議使用快速返回頂部的按鈕,因為在填寫表單的時候,使用快速置頂?shù)膱鼍氨容^少。

2. 提供分組模塊收起展開功能

當(dāng)一個模塊混雜著各種信息的時候,單純的模塊分組已經(jīng)無法處理它的復(fù)雜度了,因此需要收起高頻且信息量大的模塊,可以合理的減少頁面的復(fù)雜度。

如何設(shè)計一個超長長長長長的復(fù)雜表單

3. 步驟提供信息填寫完成度提示

步驟條可以單純的作為步驟指示器使用,也可以作為一個表單完成度的提示區(qū)域。

如何設(shè)計一個超長長長長長的復(fù)雜表單

4. 重要說明性文字盡量顯示而非收起

在填寫大量字段的表單時,閱讀表單內(nèi)容和填寫表單同樣耗時耗力。

如果我們將所有的提示信息隱藏在提示符中,一般情況下用戶不會去查看;但是如果去挨個查看提示信息,則會多花費一個步驟去點擊或者懸停來查看提示信息,浪費了大量的時間。

因此如果涉及到重要的提示信息,請直接展示在字段的后面,不要隱藏起來。

5. 產(chǎn)品內(nèi)組件應(yīng)該規(guī)范統(tǒng)一

在后臺產(chǎn)品上,關(guān)于組件的規(guī)范統(tǒng)一,想必是人盡皆知的設(shè)計原則。

無論是各類平臺型設(shè)計組件,還是各個公司自造的設(shè)計組件,保持統(tǒng)一和規(guī)范對產(chǎn)品設(shè)計有著重要的作用,在這里不贅述組件應(yīng)該怎樣規(guī)范統(tǒng)一。

因為無論是Ant Design還是其他設(shè)計語言,都有詳盡的關(guān)于組件的定義方法,我在這里講述一個產(chǎn)品設(shè)計更高層面或者更深層面的原因:

組件的規(guī)范統(tǒng)一并不僅僅是為了省時省力,而是為了使用戶在使用的過程中達(dá)到認(rèn)知上的統(tǒng)一和行為上的統(tǒng)一,在進(jìn)行高頻次的操作后,界面的流程或者組件樣式已大致在用戶腦海中形成固定印象。

因此在操作相同類的流程時,用戶會有更多的掌控感,試想一下:如果你在操作人事相關(guān)的流程后,去填寫績效部分的內(nèi)容時,發(fā)現(xiàn)一個迥異的界面或者彈窗,你肯定覺得這是不是哪里出錯了,甚至?xí)岩蛇@是否是同一個系統(tǒng)。

目前大多數(shù)公司的管理系統(tǒng)經(jīng)過多次縫縫補(bǔ)補(bǔ),內(nèi)部的跳轉(zhuǎn)邏輯已經(jīng)異常感人,界面風(fēng)格也大放異彩,但是使用起來卻無從下手,深感迷茫。

因此大到界面樣式,小到間距大小,產(chǎn)品設(shè)計的規(guī)范和統(tǒng)一應(yīng)該是最基礎(chǔ)又不可缺少的原則。

6.龐大的信息錄入,表單內(nèi)部要分步填寫,外部可拆分成不同的表單分別填寫

對付復(fù)雜的表單,你需要解決的主要問題并不是填寫方式或者頁面設(shè)計,而是信息分級和結(jié)構(gòu)拆分。解決了這個問題,基本上就解決了業(yè)務(wù)問題,其余部分就跟我們常用的表單一致。

將復(fù)雜度降低并不意味著減少頁面的信息,而是通過設(shè)計師合理的信息劃分,降低視覺上的復(fù)雜度和流程上的復(fù)雜度,這樣才會達(dá)到當(dāng)前場景下的“最佳解決方案”。

如何設(shè)計一個超長長長長長的復(fù)雜表單

如何設(shè)計一個超長長長長長的復(fù)雜表單

四、結(jié)語

隨著互聯(lián)網(wǎng)信息化的深入發(fā)展,復(fù)雜是避免不了的。

我知道大家都推崇簡潔的設(shè)計,但那只是對視覺和樣式的定義,而非對信息的定義。

我們所處的世界是復(fù)雜的,行業(yè)更是復(fù)雜的。信息的復(fù)雜度與日俱增,想要處理復(fù)雜的信息,就需要從復(fù)雜中尋求規(guī)律,這規(guī)律與業(yè)務(wù)息息相關(guān)。

B端360行,行行深如海,小伙伴們,我們一起慢慢修煉吧~

 

文章來源:人人都是產(chǎn)品經(jīng)理           作者:米蘭小鐵匠


藍(lán)藍(lán)設(shè)計www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

存檔