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

在日常工作中，產(chǎn)品經(jīng)理或者設(shè)計師經(jīng)常會接觸到表單這一組件，那么，當(dāng)遇到包含大量字段和信息的復(fù)雜表單時，我們該如何做好設(shè)計呢？這篇文章里，作者結(jié)合具體案例，聊了聊復(fù)雜表單的設(shè)計思路，一起來看一下吧。

表單，作為我們?nèi)粘９ぷ髦匾捻椖績?nèi)容，我們每周都會對其進(jìn)行設(shè)計。而在我前幾年的工作當(dāng)中，接觸到的更多是簡單零星的字段、樸實(shí)無華的組件。這對于在座“高級設(shè)計師”來說，做起來會比較簡單。

而現(xiàn)在大多數(shù) B 端產(chǎn)品，我們接觸到的都是二三十個字段，并且每一個字段都會包含有大量的邏輯信息，針對這種情況，我們作為設(shè)計師應(yīng)該如何應(yīng)對？今天我們就來說說復(fù)雜表單的設(shè)計思路。

由于復(fù)雜表單本身比較難理解，我們會通過一個最近做的政府類的項目來帶領(lǐng)大家進(jìn)行分析，講講設(shè)計優(yōu)化前后的點(diǎn)。

一、項目背景

這次的項目為一個政企項目，主要是為某一線城市政府部分提供一個人群監(jiān)控系統(tǒng)的設(shè)計優(yōu)化，系統(tǒng)是為政府部門的重點(diǎn)人群，進(jìn)行采集、核對、巡防，以達(dá)到管理的作用。

整個流程當(dāng)中會包含有 社工采集、巡防任務(wù)分發(fā)、社工巡防、區(qū)縣審核，通過前期的資料收集，發(fā)現(xiàn)問題最多的便是社工采集流程。

痛點(diǎn)

這次迭代主要的問題源自系統(tǒng)的采集端，走訪、現(xiàn)場觀察了社工的采集狀況，大致可以整理為以下問題：

• 填寫信息資料過多，很多瑣碎的資料需要反復(fù)填寫；
• 采集信息模塊過于復(fù)雜，導(dǎo)致很多時候不是用戶填寫，而是社工在進(jìn)行錄入；
• 錄入錯誤率極高，完成率很低；
• 不同的人員類別填寫的同一個表單，內(nèi)容多而全；
• …

首先，在設(shè)計過程當(dāng)中，我們依舊會做對應(yīng)的基礎(chǔ)設(shè)計，不過由于不是咱們這次討論的重點(diǎn)，就不展開詳細(xì)描述。而對于這個頁面大家可以先思考，如果由你來進(jìn)行接手，會如何進(jìn)行優(yōu)化。

二、信息預(yù)覽

在上方的表單當(dāng)中，我們會發(fā)現(xiàn)由于表單過長，導(dǎo)致用戶會出現(xiàn)上下反復(fù)滾動的行為。在對這個行為進(jìn)行挖掘時，明確原因是用戶信息過多需要反復(fù)確認(rèn)，因此需要上下滾動，進(jìn)而影響其填寫效率。

對于確認(rèn)的場景，我首先考慮到在頁面右上方增加一個預(yù)覽按鈕，點(diǎn)擊后會有預(yù)覽頁面。

但預(yù)覽也需要反復(fù)點(diǎn)擊跳轉(zhuǎn)頁面，本身并不是一個好的選擇，為此我們考慮在原有的頁面布局上進(jìn)行優(yōu)化。

在頁面寬度上，很多同學(xué)會覺得越寬越好，比如一個頁面，會盡可能壓榨其寬度，產(chǎn)出這樣的一些頁面。

實(shí)際上，我們的寬度，也會有一定的限制，才能夠讓用戶更為聚焦，比如常見的文檔產(chǎn)品，他們在寬度的設(shè)定上，都會默認(rèn)在 700-900 之間，這樣才能夠保證用戶聚焦于整個文檔當(dāng)中，如果過長，你會發(fā)現(xiàn)我們不太愿意認(rèn)真的去閱讀里面的內(nèi)容。

因此大多數(shù)情況下，我們的表單列數(shù)以兩列為主，最多不要超過三列。而在布局上，并不是說我們其他空間的位置就不能去排布信息，而是不能去展示核心內(nèi)容，因此，我們可以考慮將次要內(nèi)容放在核心內(nèi)容模塊兩側(cè)。

同時在設(shè)計上，頁面長度的增加會導(dǎo)致我們無法對頁面整體的內(nèi)容有完整的了解，因?yàn)椴煌慕M件都會占據(jù)頁面的整體高度，當(dāng)頁面內(nèi)容超過一屏?xí)r，我們在確認(rèn)信息的時候，就只能通過上下滾動頁面的方式進(jìn)行確認(rèn)，導(dǎo)致效率低。針對上述的所有情況下，我們會考慮采用左右結(jié)構(gòu)的版式，將右側(cè)區(qū)域作為一個獨(dú)立的預(yù)覽模塊。在左側(cè)填寫表單時，右側(cè)預(yù)覽區(qū)域?qū)⒂幸粋€實(shí)時預(yù)覽，從而對輸入的內(nèi)容進(jìn)行快速判斷和確認(rèn)。

通過點(diǎn)擊預(yù)覽區(qū)域的字段也可以快速定位到左側(cè)該字段位置，從而幫助我們在不同信息之間的來回跳轉(zhuǎn)。

其次右側(cè)預(yù)覽也能夠起到錨點(diǎn)定位的作用，能夠幫助我們在不同信息之間來回跳轉(zhuǎn)。

弊端

當(dāng)然，任何方案都會有兩面性。使用左右布局的方式，也就意味著我們在屏幕的最小寬度上需要由之前方案的 1280px，變?yōu)楝F(xiàn)在方案的 1360px。這也就意味著對于屏幕尺寸的兼容會更少。

但目前系統(tǒng)使用 1280px 的情況并不多，我們可以稍加犧牲。同時作為方案的兜底，考慮讓開發(fā)實(shí)現(xiàn)當(dāng)頁面尺寸小于 1360px 時，目前是提醒用戶通過瀏覽器自帶的縮放功能解決，后續(xù)會采用響應(yīng)式布局，將右側(cè)內(nèi)容移至底部進(jìn)行展示。

在我們最后方案評審前，我們再進(jìn)行走查會發(fā)現(xiàn)：“很多用戶并不會在意右側(cè)的所有信息”。

為此，我們對最終方案的交互又一次進(jìn)行調(diào)整，將之前的提交操作移至右側(cè)，并將右側(cè)的展示信息進(jìn)行優(yōu)化。這樣的頁面信息布局，讓用戶在提交表單之前，能夠?qū)Ρ韱蝺?nèi)容快速的確認(rèn)。也保證了用戶會利用到調(diào)整后的頁面，同時也一定程度上降低了用戶對負(fù)反饋的接收，使其更準(zhǔn)確的進(jìn)行填寫。（當(dāng)然這是在下方的方案做完過后的決定，具體原因下方也會講到）

三、錯誤提示

在上方反饋當(dāng)中，明確提到錯誤率很高。在對這個問題跟進(jìn)后發(fā)現(xiàn)，用戶經(jīng)常會遇到 “錯誤提示不夠明確”、“提示錯誤信息后不知道改啥” 。

關(guān)于錯誤提示，首先看到很多文章都會聊到，在表單中通過及時校驗(yàn)的方式來呈現(xiàn)錯誤的數(shù)據(jù)，提高準(zhǔn)確率。但及時校驗(yàn)也是有弊端的，如果輸入的內(nèi)容出錯概率比較高，頻繁的給用戶提示會降低用戶體驗(yàn)；如果采用后端來校驗(yàn)，頻繁的調(diào)用接口，也將增加服務(wù)器的負(fù)擔(dān)。

這里簡單補(bǔ)充一下校驗(yàn)方式：

前端校驗(yàn)：在瀏覽器中進(jìn)行的，通過JS腳本實(shí)現(xiàn)，當(dāng)用戶填寫表單時，可以對用戶的輸入做一些基礎(chǔ)的規(guī)則判斷，如果不符合可立即提示反饋，增加用戶體驗(yàn)的同時減少服務(wù)器的消耗。比如說郵箱格式判斷，就是一個典型的前端校驗(yàn)，而及時校驗(yàn)在項目中也更多指的是前端校驗(yàn)的方式。但是前端的校驗(yàn)并不是絕對可靠的，因?yàn)橛脩艨梢酝ㄟ^修改瀏覽器的控制臺或者使用其他工具繞過前端的校驗(yàn)。實(shí)際上前端后端均要做校驗(yàn)。

后端校驗(yàn)：在服務(wù)器中通過PHP、Java等語言實(shí)現(xiàn)，當(dāng)表單提交到服務(wù)器后，可以對表單中的數(shù)據(jù)做進(jìn)一步的處理和判斷，以確保數(shù)據(jù)的安全性和完整性。比如說 賬號密碼錯誤，就是一個后端校驗(yàn)。

傳統(tǒng)表單的做法是使用全局提示，由于提示內(nèi)容不夠準(zhǔn)確，導(dǎo)致用戶在修改信息時無法快速高效的進(jìn)行調(diào)整。

而在目前的表單當(dāng)中，本身數(shù)據(jù)較長，再加上第二期的需求提出還需要增加字段，也就意味著整體的表單長度還會加大。因此使用傳統(tǒng)的表單錯誤提示，會使整個修改的過程需要反復(fù)滾動修改，不利于我們進(jìn)行編輯。

在方案設(shè)計上，我們想通過一個區(qū)域，將表單當(dāng)中的所有的錯誤信息都呈現(xiàn)于此，這樣既能夠讓用戶快速知道表單有錯誤內(nèi)容，也知道錯誤具體在哪。為此我們設(shè)計了三種不同方案。

方案一

保持之前現(xiàn)有的全局提示不變，將頁面當(dāng)中的錯誤信息呈現(xiàn)清楚。在頁面當(dāng)中提示出具體存在哪些問題，同時用戶就可以滾動查看，了解如何細(xì)節(jié)調(diào)整。

方案二

因?yàn)楸韱魏荛L并且后續(xù)還要繼續(xù)增加字段，為了保證用戶能夠快速了解到錯誤信息，我們將錯誤的內(nèi)容呈現(xiàn)到頁面的下方，將其進(jìn)行匯總，當(dāng)用戶收到錯誤提示后，可以點(diǎn)擊跳轉(zhuǎn)查看，了解錯誤的位置。

同時之前的提交操作位于頁面的底部，現(xiàn)在由于這個功能的加入，它需要一直展示，因此將其固定在頁面底部，方便用戶進(jìn)行反復(fù)查看與確認(rèn)。

方案三

由于我們目前本身有預(yù)覽功能，因此可以在預(yù)覽模塊當(dāng)中，提示錯誤信息，并且同樣可以點(diǎn)擊后跳轉(zhuǎn)，這其實(shí)也是一個種不錯的思路。

對方案最終細(xì)化時，我們考慮方案二與方案三進(jìn)行結(jié)合，將提示信息在預(yù)覽處對應(yīng)字段上進(jìn)行展示并可點(diǎn)擊跳轉(zhuǎn)，這樣的設(shè)計，更加能夠解決頁面目前遇到的問題。同時，對于提示信息的集中展示的方案也可以保留，當(dāng)后續(xù)沒有預(yù)覽模塊時，可以作為通用方案進(jìn)行落地。

四、善用重復(fù)

對于復(fù)雜的表單，我們能夠善用重復(fù)，提高表單使用效率。因?yàn)樵诤笈_當(dāng)中，會發(fā)現(xiàn)大量的表單都是較為重復(fù)的字段，在信息上可以將重復(fù)的部分進(jìn)行省略。

并且在實(shí)際業(yè)務(wù)當(dāng)中，每一個業(yè)務(wù)員都會負(fù)責(zé)一個領(lǐng)域的信息錄入，因此重復(fù)的內(nèi)容會更多。我們實(shí)現(xiàn)重復(fù)的方式，目前會有模版、復(fù)制兩種方式。

模版：模版是提供給企業(yè)、個人創(chuàng)建自己常用的重復(fù)信息，提供給到用戶進(jìn)行使用。在 B 端產(chǎn)品當(dāng)中模版的解決思路會分為模版市場、企業(yè)模版、個人模版。

1. 模版市場

針對產(chǎn)品本身模版需求比較多的情況，它需要大量的模版來降低產(chǎn)品的難度，進(jìn)而會有模版市場提供給所有用戶使用。比如在明道云、簡道云都會有類似功能。

2. 企業(yè)模版

企業(yè)模版則是在 B 端產(chǎn)品當(dāng)中，不同公司可以在管理后臺對公司內(nèi)的創(chuàng)建模版進(jìn)行配置，這樣能夠保證企業(yè)所有員工填寫出來的內(nèi)容基本一致。

比如在 審批 當(dāng)中，就是由企業(yè)配置好了信息過后只能提供給到用戶進(jìn)行使用，本質(zhì)上也是一種模版展示的形式。

3. 個人模版

是給用戶個人進(jìn)行創(chuàng)建的模版，在這部分產(chǎn)品當(dāng)中，因?yàn)椴煌挠脩舳紩嬖趯?yīng)的個性需求，每個人填寫的表單也并不相同，因此可以提供給到用戶進(jìn)行使用。

比如在 協(xié)同的軟件當(dāng)中，我們就可以使用個人模版來優(yōu)化用戶的日常體驗(yàn)。同時在垂直業(yè)務(wù)性的產(chǎn)品當(dāng)中，也可以使用個人模版來進(jìn)行優(yōu)化。

我們剛才講到不同業(yè)務(wù)員會負(fù)責(zé)不同領(lǐng)域的信息錄入，因此在模版維度上會選擇以個人為單位，同時以企業(yè)模版為輔助進(jìn)行搭建。

在點(diǎn)擊創(chuàng)建時，我們會優(yōu)先選擇不同類型的模版，進(jìn)而提高效率。

4. 復(fù)制

復(fù)制則是在表單過于復(fù)雜時的常見策略，我們能夠通過再次創(chuàng)建一個同樣的表單數(shù)據(jù)，進(jìn)而來實(shí)現(xiàn)快速新建。

這種方式在 B 端系統(tǒng)當(dāng)中也非常常見，在系統(tǒng)當(dāng)中我們會將復(fù)制分為兩類：復(fù)制表單、復(fù)制數(shù)據(jù)。

復(fù)制表單就是將當(dāng)前的數(shù)據(jù)提交到表單當(dāng)中，然后讓用戶進(jìn)行編輯修改，這時候其實(shí)是沒有這一條數(shù)據(jù)，需要等數(shù)據(jù)提交后才能執(zhí)行。

復(fù)制數(shù)據(jù)則是將數(shù)據(jù)先進(jìn)行創(chuàng)建，創(chuàng)建后再進(jìn)行編輯修改。

兩者在數(shù)據(jù)上會有先后之分，這里在設(shè)計上也可以稍加注意。

我們會在項目的表格頁當(dāng)中，增加復(fù)制功能。整體是復(fù)制表單，點(diǎn)擊過后我們可以修改表單內(nèi)的信息，通過這樣方式優(yōu)化之前難以快速創(chuàng)建的問題。

在設(shè)計的最后，我們還為業(yè)務(wù)人員準(zhǔn)備了一個小的優(yōu)化，就是通過他們的職責(zé)要求，能夠快速提示當(dāng)前成員信息滿足哪一個條件。通過具體的字段信息，來進(jìn)行智能的提示，這樣能夠提高業(yè)務(wù)人員的效率。

表單的設(shè)計，我們往往不能孤立去看待，它與多種元素相互關(guān)聯(lián)，作為數(shù)據(jù)的入口，承載著非常大的難度。同時在設(shè)計表單時，我們也需要考慮數(shù)量的“多”，所帶來的各種問題。

當(dāng)然這次所討論的便是應(yīng)對多字段的場景下的處理方式，但在實(shí)際的工作當(dāng)中，還會有很多其他的場景，后續(xù)有時間可以繼續(xù)給大家分享~