編輯導語：在B端內(nèi)容服務設計中，數(shù)據(jù)表格也是經(jīng)常需要涉及的要素。前面文章里，作者介紹了B端產(chǎn)品設計中的數(shù)據(jù)展示控件。本篇文章里，作者就結(jié)合實際案例，對B端產(chǎn)品設計中的數(shù)據(jù)表格操作進行分析。讓我們一起來看一下。

上幾篇從整體的范圍講述數(shù)據(jù)在頁面中的錄入、展示、反饋的一些建議。接下來的幾篇分享內(nèi)容，從設計的角度，思考與使用者息息相關的事。

一直以來認為B端服務設計內(nèi)容是需要秉持嚴肅且認真的態(tài)度對待它，因為產(chǎn)品的使用對象也是有著專業(yè)能力的操作者，要從實際操作者角度選用貼合實際場景的控件。

設計中要考慮，既有通用的操作方式，也有專業(yè)程度較高人員操作方式（比如復雜的醫(yī)療類型數(shù)據(jù)需要有醫(yī)學知識背景的操作者），會以醫(yī)療相關人員的行為來設計操控產(chǎn)品運行。

再進一步，就是要貼合專業(yè)程度不同操作者行為而不是引導行為。在適當時機加入些操作者和系統(tǒng)之間的互動過程，滿足恰當?shù)牟僮餍枰?/p>

以一個實例來分享交互融入操作過程，旨在展示數(shù)據(jù)與操作之間的關系。依然是按照之前的方式，以業(yè)務場景需要，思考設計內(nèi)容、方式。表格從來不是單獨存在的，單獨存在的表格是毫無意義的，它需與功能相互搭配使用。

上圖是設計B端內(nèi)容比較常見形式的表格，簡要說下表格操作任務：對已經(jīng)建立的方案可以進行啟用/停用，并且對未啟用的方案進行修改/刪除，已啟用的方案只有查看功能；在業(yè)務需求的類似的場景下，建立新方案可通過新建或是復制已有的方案。

因為是將操作細節(jié)內(nèi)容分享出來，所以按照之前的分類（錄入、展示、反饋）就不合適了，回歸數(shù)據(jù)本身，這張圖就是對數(shù)據(jù)處理，通過增、刪、改、查四類方法，篩選出使用者需要的數(shù)據(jù)內(nèi)容。拿到需求說明，羅列出有幾項任務：

• 新建方案；
• 未啟用數(shù)據(jù)可以修改，可以批量刪除，可以批量啟用；
• 已啟用數(shù)據(jù)只能查看和停用。

第一步是重組布局：從頁面布局上進行分層組織，分層組織也是界面布局的重點。所以將查詢模塊和數(shù)據(jù)表格從布局上分開來看。

定義每一塊區(qū)域，每一個模塊中，只有唯一的一個優(yōu)先級最高的操作功能，優(yōu)先級最高也就是用戶最關心的，最首要考慮的。通過查詢模塊的查詢條件，可即選即得，實時刷新數(shù)據(jù)（當然系統(tǒng)能夠承受住數(shù)據(jù)量的范圍）。

簡言之，「識別勝過記憶」和功能可見性類似，對于當前頁面中用戶需要的決策信息，應該直接凸顯出來。

一、數(shù)據(jù)新增——新建/復制

新建與表格緊密聯(lián)系，新建數(shù)據(jù)有兩種形式：

• 模態(tài)框浮層：此時新建數(shù)據(jù)容量小，從屏幕尺寸和使用來看，都是比較常見的做法。保存后，彈窗自動消失，新增數(shù)據(jù)及時傳給父級頁面，且自動刷新置頂新一條數(shù)據(jù)（模態(tài)層和父級頁面同屬一個頁面）。
• 跳轉(zhuǎn)頁：此種形式，一般是新建數(shù)據(jù)復雜，且量大，操作復雜，才會采用另起新頁。但這個也有弊端，新增的數(shù)據(jù)需要用到本頁的信息，如果另起新頁，數(shù)據(jù)同步可能不一致。

此實例，新建的內(nèi)容比較復雜，擴展的信息多樣，也存在著堆疊浮層，所以用了跳轉(zhuǎn)頁。

復制：在選中條數(shù)據(jù)的狀態(tài)處于 [已啟用] 狀態(tài)下，可激活【復制】功能；且復制只能針對一條數(shù)據(jù)；誤操作選中多條進行復制會彈窗提醒用戶，只可復制一條，因為在[已啟用]狀態(tài)下也會激活【停用】功能，所以在單/多選方式中采用多選控件。

二、數(shù)據(jù)操作——啟用/停用

啟用和停用兩個互斥功能，都可進行批量操作，即使在錯操作的基礎上多選了幾項數(shù)據(jù)，在用戶確認的模態(tài)框也只做記錄，展示用戶選擇的記錄，不對操作結(jié)果產(chǎn)生影響。

啟用/停用操作流程結(jié)束后，對應操作數(shù)據(jù)信息位置不變，創(chuàng)建時間不變，狀態(tài)變?yōu)槲磫⒂?啟用，操作變?yōu)閱⒂?、刪除和停用。

另外當這條需要啟用或是停用的數(shù)據(jù)的位置處在第二頁以上的，操作完成后，停留在當前頁碼上。改變的只有操作的那條數(shù)據(jù)啟用狀態(tài)。

三、數(shù)據(jù)刪除

此實例中的刪除，敏感度沒那么高，且依據(jù)業(yè)務的需要，本身單條數(shù)據(jù)的詳細信息較多，因此只能允許對單條數(shù)據(jù)刪除，不能批量操作。

數(shù)據(jù)有新增，也會有【刪除】，它是需要慎重操作的功能，在實際業(yè)務中我們思考的是刪除是誰有權(quán)限？誤操作刪除是否可恢復數(shù)據(jù)？刪除的數(shù)據(jù)對其他數(shù)據(jù)是否有關聯(lián)，會出現(xiàn)什么異常情況發(fā)生？

如果是物理刪除，不可恢復的，所以提供刪除功能是慎之又慎；而對于一般的邏輯刪除，刪除功能不必慎之又慎，而做出不必要的點擊刪除后的提醒，增加操作負擔。

四、數(shù)據(jù)修改

數(shù)據(jù)修改和新增數(shù)據(jù)內(nèi)容一致，不同的地方就是編輯是對已寫入的數(shù)據(jù)進行修改，其他一致。不管是新增的數(shù)據(jù)還是修改的數(shù)據(jù)，數(shù)據(jù)量都很大，那么可以預見下，后期可考慮在編輯頁面補充一個【暫存】功能。

【暫存】功能：有時候數(shù)據(jù)填不完或是網(wǎng)絡不穩(wěn)定，bug等，導致填寫的數(shù)據(jù)丟失是得不償失的，再次填寫需要重新開始。

五、刷新

六、總結(jié)

工作中所要處理的頁面內(nèi)容，不會像設計稿那樣好看，飽滿。數(shù)據(jù)層次不齊，也不會順順當當?shù)倪M行，總有各種各樣的需求發(fā)生。

伴隨各種各樣的細節(jié)需要調(diào)整優(yōu)化，設計能做的就是抓住每一個槽點，磨平它，和產(chǎn)品和開發(fā)朋友們協(xié)調(diào)處理。以功能為主導，考慮技術的實現(xiàn)方案、考慮多個需求的優(yōu)先級。

在此以實例講述希望能給大家做設計思考的引導，思考如何提升操作效率，

參考：尼爾森可用性原則、菲茲定律；

設計預測——分析現(xiàn)狀進而推斷未來的方向，針對因果關系來設立簡潔而具說服力的假設。

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

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