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

編輯導語：在工作中我們會遇到很多B端表單，對于特別復雜的表單，我們可以使用簡化的方法，但簡化也只是方法之一；當我們遇到一些數(shù)據(jù)量大，層級深，關系復雜的表單時，我們還需要考慮該如何分析拆解、組織呈現(xiàn)這些數(shù)據(jù)；本文作者分享了關于如何應對復雜B端表單設計。

本以為遇到表單設計沒什么好怕的了，但沒多久就遇到了特別復雜的表單，有大幾百個錄入項；當然，比設計表單更崩潰的是用戶要填寫這些表單；現(xiàn)實情況是——很多企業(yè)中大量員工的日常工作就埋沒在這些冗長復雜的表單之中。

不得不承認，對于特別復雜的B端表單，“簡化”只是提升其易用性的方法之一；遇到數(shù)據(jù)量大，層級深，數(shù)據(jù)之間有交叉或嵌套關系的表單時，還需要考慮該如何分析拆解、組織呈現(xiàn)這些數(shù)據(jù)。

針對具體數(shù)據(jù)錄入項的優(yōu)化策略和從整體上思考如何組織和呈現(xiàn)復雜程度各異的表單：

1. 將用戶操作成本降至最低
2. 設計聰明貼心的輸入框
3. 邏輯架構
4. 視圖載體
5. 兩個案例分析

一、將用戶操作成本降至最低

《Web表單設計——點石成金》提到一對概念：「Inside Out 由內(nèi)而外」和「Outside In 由外而內(nèi)」。

簡單理解，這是兩個看待事物的視角：

• 「Inside Out」是從系統(tǒng)或軟件角度出發(fā)，向用戶要求“請?zhí)峁┪倚枰男畔ⅰ保?/li>
• 「Outside In」則是從用戶視角看待系統(tǒng)，用戶如何理解這些內(nèi)容？他們會獲得什么？能做什么？

這兩種視角之間的矛盾就是：用戶進行更少操作 VS 系統(tǒng)獲取更多信息；要幫用戶解決這個矛盾，需要向系統(tǒng)投入更多技術資源，從而能讓系統(tǒng)代替用戶承擔更多工作負擔。

解決方法的技術成本有高有低，但從優(yōu)化效果來看可大致分成三個等級：

1. 第一級：用戶無感的數(shù)據(jù)獲取方式

例如：

• 平臺間的對接：通過平臺對接獲得完整、規(guī)范的數(shù)據(jù)。
• 系統(tǒng)自動獲取數(shù)據(jù)：獲取來源包括用戶已經(jīng)輸入過的數(shù)據(jù)，或者根據(jù)用戶已輸入數(shù)據(jù)計算出來的其他數(shù)據(jù)，也包括設備數(shù)據(jù)；注意某些數(shù)據(jù)獲取需要獲得用戶允許。

2. 第二級：允許用戶提供其他類型的信息

例如：

• OCR技術：利用圖像識別技術，用戶上傳圖片代替表單輸入，系統(tǒng)將圖像內(nèi)容轉換為文本后填入對應輸入框。
• 批量導入：用戶上傳文件，系統(tǒng)讀取后將數(shù)據(jù)填入對應輸入框。
• 語音輸入：在對文本格式要求不嚴格的場景下支持語音輸入。

3. 第三級：從量上降低操作成本

例如：

• 選擇代替輸入：維護一套數(shù)據(jù)，讓用戶從輸入變?yōu)檫x擇。此方式除了減少鍵盤敲擊次數(shù)，還可保證填入的內(nèi)容符合格式規(guī)范。
• 設置合理默認值：默認值可能取自統(tǒng)計數(shù)據(jù)，也可能基于用戶個性化數(shù)據(jù)。默認值不僅可免去輸入過程，還可以作為建議值給用戶提供指導。
• 訪問剪貼板：例如在MacOS Sierra和iOS10以上的蘋果設備之間，可以無縫復制粘貼文本和圖片。

二、設計聰明貼心的表單

在跟客戶經(jīng)理聊天的時候會發(fā)現(xiàn)，那些我們自以為簡單明白的設計，對用戶來說竟然如同天書。

神馬？我們不是竭盡所能降低了用戶操作成本嗎？為什么能順利完成表單的用戶屈指可數(shù)？

究其原因，我們還是單純的從系統(tǒng)視角「Inside Out」看待問題。

如果能切換成用戶視角「Outside In」，在預判用戶可能會遇到的問題時就清晰了很多——用戶在填寫每個輸入框都經(jīng)歷了「填寫前」、「填寫中」、「填寫后」這三個階段。

• 在「填寫前」用戶可能會疑惑：這個是什么意思？為什么要填這個？怎么填？
• 在「填寫中」用戶需要知道：我填對了嗎？我完成了嗎？
• 在「填寫后」用戶會想要反饋：我成功了嗎？怎么失敗了？是我自己的問題嗎？我該怎么修正錯誤？

所以從用戶視角看，用戶需要的是一個聰明貼心的輸入框，即在「填寫前」、「填寫中」、「填寫后」這三個階段中即時給予用戶幫助和回應。

1. 填寫前

在填寫具體的表單項之前，用戶需要理解和清楚要做什么？做這個的目的是什么？他能獲得什么？該如何做？

常見的方法是利用標簽和占位符對這些問題進行解釋，但標簽和占位符字數(shù)有限，必要時可以借助提示文字輔助說明。

△ 菜鳥裹裹首頁頂部搜索框，在點擊之前，占位符描述操作目的；點擊之后，占位符解釋操作方法

2. 填寫中

• 從系統(tǒng)角度看，我們希望用戶按照系統(tǒng)要求的規(guī)則輸入信息，即「系統(tǒng)的實現(xiàn)模型」。
• 從用戶角度看，用戶可能不知道、不理解規(guī)則，即「用戶的心理模型」。

如果「實現(xiàn)模型」和「心理模型」兩者出現(xiàn)分歧，用戶操作心流就會遇到阻塞，甚至出錯。

為了掃除障礙，需要設計師利用同理心或者調研的方式來理解用戶心理模型（B端產(chǎn)品基本很難單純利用同理心），利用設計手段，將「實現(xiàn)模型」包裝成用戶可以接受和理解的「心理模型」。

△ 系統(tǒng)報錯提示

大部分用戶根本無法理解用戶出錯的另一個原因是：情境中存在干擾因素，例如時間緊迫或注意力不集中（開車時使用導航軟件），環(huán)境吵鬧，在戶外可能有惡劣天氣干擾。

因此在設計時需要考慮到用戶操作可能處于怎樣的情境之下，用戶會遇到哪些障礙和問題，然后幫助用戶過濾情境中的各種干擾因素，盡快完成任務。

這個階段的設計要點，就是要防錯容錯——比起用戶反復出錯和修改，如果系統(tǒng)能容錯并自動轉化成規(guī)范的格式，是再好不過了（雖然現(xiàn)實中要評估開發(fā)成本）。

△ 轉賬頁面的防錯設計

△ 批量操作的防錯設計

△ 系統(tǒng)應當允許用戶輸入多種格式的數(shù)據(jù)，并將其轉化為格式化的數(shù)據(jù)

3. 填寫后

填寫后，要讓用戶知道自己完成的怎么樣：成功了要給予鼓勵，并引導前往下一個任務，如果失敗了，要幫助用戶找到原因和解決方案。

及時清晰的反饋，可以讓用戶明確當前狀況，消除不確定性，縮短在每個節(jié)點的逗留時間，快速完成任務最終達到目標。

△ 驗證到用戶輸入的手機號碼已注冊，推測用戶可能忘記密碼

△ 用戶在完成某任務后，在等待結果過程中，引導用戶處理其他并行任務

三、邏輯架構

網(wǎng)上搜一下關鍵字“B端”、“表單設計”，會搜到很多相關設計經(jīng)驗出來；不過大多數(shù)經(jīng)驗試圖解決單個表單的布局和樣式問題（比如標簽欄和輸入框是上下布局還是左右布局、左對齊還是右對齊），而非多個表單之間的邏輯架構和銜接關系。

然而一個頁面不會無緣無故的出現(xiàn)，它承載了特定任務，特定任務是用戶達成目標的其中一環(huán)，和其他任務（頁面）環(huán)環(huán)相扣。

需求不會脫離于場景單獨存在。場景中的需求，需要場景化的解決方案。

舉個例子：某商家要進貨，需要提供訂貨單（表單1），包含商品列表（表單2），收貨信息（表單3），開票信息（表單4），付費渠道和賬期方案等（表單5）；為了保障多方合法權益，還需要在驗證簽署人意愿后（表單6），在線簽署訂單合同（表單7）；還有賣家發(fā)貨后買家的簽收單等一系列表單（表單8）。

如下圖：

上面的例子可以說明，即使某個表單的數(shù)據(jù)量很大，依舊是單點問題。

解決單個表單的布局和樣式問題很重要，但這類問題處于相對較為表層的位置，還得向深處繼續(xù)挖掘——如何處理多個表單之間的邏輯架構和銜接方式。

△ 上圖來自《The Elements of User Experience》（中文版本《用戶體驗要素》）

那么對于環(huán)環(huán)相扣的復雜表單，解決方案會不會很復雜呢？

其實一句話就能說清楚：表單之間的關系從架構上看分成兩種——串行結構或者樹狀結構。（我暫時還沒發(fā)現(xiàn)第三種）

是不是有點像電路里的串聯(lián)和并聯(lián)？

遇到復雜的，就理解成混聯(lián)，也就是兩種情況的互相嵌套，要拆解到最小顆粒度再分析。

知道了這個，在調研其他產(chǎn)品的表單設計時，也可以把這兩種架構套進去學習別人如何組織內(nèi)容的。

△ 剛才提到的賣家進貨案例

四、視圖載體

了解了架構，還需要搭配載體，也就是采用何種視圖——是頁面？還是彈窗？頁面可以是單頁，也可以是多個分頁；彈窗可以是模態(tài)的，也可以是非模態(tài)的。

以下是一些常見視圖：

△ 非模態(tài)彈窗的表單和來源頁面關系緊密，但不要太復雜

△ 常見的模態(tài)彈窗

△ 模態(tài)窗也可以承載稍復雜的表單

△ 一些UI組件提供了側滑抽屜的樣式，要防止用戶誤觸導致的數(shù)據(jù)丟失，對「關閉」操作進行二次確認

△ 頁面是最常見的視圖形式

△ 以表格形式聚合表單，形式高度結構化，整齊清晰

△ 表單內(nèi)輸入框之間可能存在聯(lián)動關系，聯(lián)動和層級關系需要表現(xiàn)清楚

△ 如果表單頁面很長，盡量把內(nèi)容分組，減少用戶心理負擔；可以利用折疊面板允許用戶將內(nèi)容折疊，提升在不同模塊間的瀏覽效率

△ 多步驟表單，將大任務拆解成小任務，配合成功反饋，可以提升用戶完成每小步的成就感，以及完成目標的信心

以上是一些常見視圖，設計時采用何種形式，要綜合考慮以下幾個方面因素；但這些因素本身沒有明顯邊界，所以也不存在絕對正確的選項。

評估方案時，還需要把用戶使用場景中的干擾因素考慮進去（例如是一口氣完成還是分幾次間斷完成？是獨立還是協(xié)作的形式？）：

• 內(nèi)容多少（內(nèi)容太多就不適合放入彈窗內(nèi)）；
• 復雜程度（層級多少、是否存在聯(lián)動關系等）；
• 邏輯結構（串行更適合分頁，樹狀結構適合在一個頁面內(nèi)聚合）；
• 設備限制（包括屏幕大小、設備使用方向）；
• 和來源頁面關聯(lián)度（彈窗和新開頁面相比，彈窗和來源頁面的關聯(lián)度更強）。

五、兩個案例分析

結合上面的內(nèi)容，大家看看這兩個案例中的表單如何設計呢？

1. 某公司的調查報告

公司信息分成多個維度，例如：擔保信息、資產(chǎn)信息等。

• 擔保信息：包含多個擔保人或擔保企業(yè)，信息分為基本信息和信用狀況。
• 資產(chǎn)信息：包含房產(chǎn)、車輛。

涉及到自然人的信息，可以歸屬在不同類目下。

2. 評分卡配置

評分卡將多個模塊分數(shù)累加。

模塊由一個或多個評分項組成。

評分項由一組評分規(guī)則，規(guī)則需要設定分值。

六、談談我的設計思路

1. 某公司的調查報告

調查報告的信息層級較深，最底層模塊的字段數(shù)量也不少；為了快速縱覽全局，我在表單旁放置了導航欄。

導航欄有三個層級，可以直穿最底層，另外還添加了兩個細節(jié)——完成百分比和類目下的添加按鈕（這兩個細節(jié)的目的都是為了提升用戶的控制感）。

因為同一個自然人的信息，可以歸屬在不同類目下（一個自然人擁有多家企業(yè)，并在各企業(yè)中擔任多個重要職責的情況很常見）。

為了數(shù)據(jù)庫的統(tǒng)一和規(guī)范，減少數(shù)據(jù)多處重復錄入而造成對數(shù)據(jù)庫的污染，我把自然人的基礎信息由「編輯」轉換為「調取」，即「輸入」變成「選擇」。

此人的基礎信息如果在數(shù)據(jù)庫中不存在，則需要在模態(tài)窗內(nèi)添加；這樣不管公司信息維度如何劃分，各類目下的自然人信息都會和基礎信息建立映射關系；在建立用戶畫像時，此關聯(lián)數(shù)據(jù)還可以發(fā)揮重要價值。

△ 導航欄中添加了「完成百分比」和「添加按鈕」，目的都是為了提升用戶的控制感

△ 系統(tǒng)內(nèi)涉及到自然人的基礎信息，統(tǒng)一由「編輯」轉換為「調取」

△ 自然人基礎信息如果不存在，則需要在模態(tài)窗內(nèi)添加

2. 評分卡配置

調查報告內(nèi)的字段類型豐富多樣——信息維度不同，字段類型很難重合（例如房產(chǎn)價值取決于面積和地理位置，車輛價值則跟品牌和車型密切相關），然而評分卡卻呈現(xiàn)高度一致的規(guī)律性——不管評分項歸屬于哪個模塊，都由一系列選項（條件）和對應的分值（數(shù)字）組成。

還一個較大的差異點是，調查報告里面有相當多內(nèi)容是非必填的（例如不一定有房產(chǎn)）。

但出現(xiàn)在評分卡中，如果沒有房產(chǎn)，在房產(chǎn)一欄也需要選擇「無房產(chǎn)」，得到0分或者其他分數(shù)。

所以調查報告相對“開放”，評分卡相對“封閉”；另外因為要保證各模塊下的評分項總和剛好100分，填寫過程中對整體進行預覽的頻率更高。

△ 導航欄對每個模塊的總分進行了計算，并提供預覽按鈕

△ 評分項內(nèi)的選項和來源頁面關聯(lián)非常緊密，所以在模態(tài)窗內(nèi)添加和編輯

△ 評分卡像試卷，內(nèi)容很多，更適合在頁面而非彈窗內(nèi)呈現(xiàn)

提醒：上面兩個設計不是標準答案，僅是拋磚引玉，大家可以思考一下有沒有更好的解決方案，歡迎在留言區(qū)討論~

本文由 @杜小杜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。

題圖來自?Unsplash，基于 CC0 協(xié)議