b端産品設計總結?編輯導語：表格是信息的一種常見呈現方式，提供數據支撐，也是B端産品設計的重要部分本文作者将從表格設計的底層思維來看，經常做表格的小夥伴一起來學習下吧，下面我們就來聊聊關于b端産品設計總結?接下來我們就一起去了解一下吧!

b端産品設計總結

編輯導語：表格是信息的一種常見呈現方式，提供數據支撐，也是B端産品設計的重要部分。本文作者将從表格設計的底層思維來看，經常做表格的小夥伴一起來學習下吧。

書接上回，上一篇B端表格指南向大家展示了一些常見的表格樣式，在産品設計能力中，一個人的眼界往往決定了這個人的産品設計下限，所以我将常見表格樣式的介紹放在了第一篇，那麼第二篇将從底層思維上給大家提供一個可行的提升方案。

與第一篇不靠譜的業務場景和解決方案相比，第二篇會減少業務的部分，而是一些枯燥的理論知識。

首先，通過上一篇文章，可以大緻了解到，表格由兩個部分組成：

這是我們最直觀能夠看到的兩個部分，而這兩個部分又由多個小部分組成。

由此，表格的意義就已經比較清晰了。

1. 向用戶展示數據

告訴用戶，這個表格是展示的什麼數據（标題）

向用戶展示每一條數據的内容（表頭、單元格、分頁）

2. 提供便捷的數據操作

更快、更準确地搜索到想要查找的數據（搜索欄、排序）

更快、更準确的編輯數據（行編輯、工具欄）

3. 其他（特殊設計），既是為了查看，也是為了操作

通過了這一輪的思考與總結，可以将表格的概念内容深化到設計原則，并由此衍生、具化出設計思路。

設計原則很簡單，一是易讀，二是易用，雖然隻是簡單的幾個字，這其實不止是表格的設計原則，也是在做産品時需要時刻考慮的。

首先，用戶讀的肯定是單元格裡的内容，而單元格實際上是由行和列組成的，為了便于閱讀，可以先考慮行高、列寬的問題，其次是行順序/列順序、合并行/合并列、固定行/固定列，最後，再考慮單元格内的内容是否合适，這個合适包括超出的部分如何顯示、缺失值如何顯示、是否有其他顯示的方式等。

其次，可以使用一些小統計功能，來減少大統計的功能，這是一個我在日常工作中的一個小經驗，所以多說幾句，在B端産品中，不論是哪個級别的使用者（普通職員、部門管理者、總監等），他們都有一個統計功能的需求（誰不想站在全局看問題呢？），然而，數據是有權限區分的，不同的人看到的數據統計肯定是不同的，但我們是否需要為每一類用戶都做一個數據統計頁呢？非用戶的要求下，我個人認為是不需要的，我們可以通過在操作中，将一些小的統計功能植入進去，就比如上一篇文章中介紹的合并列的例子。

這裡有兩個小統計，第一個是部門統計，通過兩個小統計功能，幫助行政人員了解到各部門的人數情況，其次，在分頁器的位置，告訴了用戶一共有50條數據，這就意味着，一共有50個員工，這樣就解決了行政人員的一個統計需求，而不是要做一個儀表盤頁面來展示公司的人員情況。

最後，是一個最簡單，最有效的方法，其實應該放在第一個介紹，可是這個手段更應該是UI設計或者交互設計來提，但誰讓咱是小廠的B端産品經理呢，所以我還是把這個方法歸納進來了，這就是斑馬線設計，在上一篇文章裡，我也介紹了這個方法，其實就是一個簡單的隔行變色的設計，選擇兩種顔色，然後相鄰的兩行用不同的顔色交替出現就可以了（聽上去很多行都要設置顔色，但其實前端開發使用的組件，隻需要一個單詞，一個命令就可以實現了）。

這裡，除了叫做隔行變色的靜态斑馬線設計，還有一種動态的斑馬線設計叫做高亮行，這是一種當鼠标掠過每行數據時，劃過的那一行會有一個強對比度的變色效果，能夠幫助用戶更專注于鼠标指向的那一行數據（這個聽着好像也很複雜，還要知道鼠标的位置，但其實前端開發使用的組件，也是一個單詞的配置就搞定的）

易用性與易讀性在設計上是有本質區别的，易讀性是為了讓用戶閱讀數據更輕松，更直接，這是易讀性的目的，這也讓易讀性的設計有迹可循，而易用性是為了讓用戶操作起來更簡單，更快捷，但在設計的時候，你會很容易的發現，怎麼才能讓用戶操作更方便呢？

似乎并沒有一個有迹可循的設計思路，這是因為，看數據隻需要動眼睛，你隻需要看見、看明白就行了，而操作數據是需要動腦子的，你得思考，為什麼操作，怎麼操作，要得到什麼結果，至少要這三步，你才能進行操作。

顯而易見，得到結果其實就是易讀性上的問題，而為什麼操作，怎麼操作才是易用性的問題，那麼這麼推論下來，要想提高易用性，你得先知道用戶為什麼要操作。（用戶的為什麼有很多，這裡跟易讀性一樣，我舉其中三個例子來說明）

1. 為了易讀性而操作

是的，你沒有看錯，為了提高易讀性，我們可以引入一些操作，因為用戶的視覺能力、視覺習慣是有區别的，比如在财務系統中，假設會計更常看的是收款方，打款金額，打款時間，以此來推算某時間段内的總成本問題，這樣她好做公司的财務彙報，那麼她在看财務表的時候，肯定更希望這三列數據排在前面，這樣她能最先看到。

而項目管理的人，可能更希望看到項目名稱，打款金額，打款時間，這樣他能把控各項目在某時間段的一個成本問題，所以他看财務表的時候，肯定希望他想看的數據在前三列（在實際産品中，我們大概率會把他們拆開，做一個項目管理的模塊，做一個财務管理的模塊。）。那麼為了讓兩個人都能更好的查看這個數據，我們可以提供一個列拖拽的功能，這樣用戶可以按自己的需求，對列順序進行控制。

2. 為了減少錄入工作而操作

有一些數據可能需要經常進行修改，并且是大量的數據需要修改，比如某個公司的财務系統和項目管理系統還沒有打通，那麼項目管理人員要在系統裡把控項目成本的話，他需要每個月底找财務要一次數據，然後錄入到他的項目管理系統中去，那麼這裡有至少三種方法來幫他減少這個數據錄入的工作量：

首先，最簡單直接的就是把财務系統和項目管理系統打通，然後每個月，甚至每天将财務數據推送到管理系統就可以了；

其次，你可以做一個自動導入的功能，因為财務表都有特定格式的excel表，你可以做一些數據轉換的模塊，然後項目經理拿到财務表之後，在項目管理系統裡點擊導入提交就可以了；

最後，你可把項目管理的表格做成可編輯的表格，讓項目經理可以直接在表格上編輯數據内容，直接修改每個項目當前的一個成本金額，而不需要點到每個項目裡去一個一個編輯。（這裡放個簡單的實例，年齡這列是可以雙擊進行編輯的）

3. 為了更快、更準地搜索到數據而操作

其實标題已經很清楚了，就是查找數據，說白了就是模糊搜索、精準搜索、篩選的組合，這個其實不用單獨說，誰都會設計，而且随便設計一下，都能對用戶的搜索效率産生一定的提高效果，但我們更應該追求一種高效的搜索設計，而不是随意地、肆意地去使用搜索功能，這裡我一直沿用的設計思路是簡潔為輔，業務為主，為什麼為主的業務放在卻放在這句話的後面呢，等介紹完之後我再做解釋。

簡潔：大家可以看下淘寶的搜索功能，雖然他是C端的産品，但他值得我們借鑒，淘寶的搜索很簡潔，隻有一個模糊搜索的搜索框，就能讓用戶搜索到想要找的商品（數據）。

業務：不同的業務有不同的搜索方式，這往往體現了使用者的使用場景、表達方式、做事風格、思維方式等，比如現在要查一個交易訂單：

A場景，剛剛有個人要退貨，他說他昨天買了個XXX，你去處理一下，那麼A可能是去訂單系統裡，輸入時間是昨天，然後輸入商品名稱，這樣來查到這個訂單，然後去操作，這裡日期是個精确的時間範圍，昨天00:00點到昨天23:59，然後商品名稱可能是個模糊搜索

B場景，剛剛有個人要退貨，這是他的電話号碼，你跟他對接處理一下，那麼B可能直接去系統裡查這個電話号碼，看看最近有幾筆訂單，如果隻有一筆訂單，可能就直接給他關閉了，如果有多個訂單，可能就會做個電話回訪，然後再關閉相應的訂單。

C場景，剛剛有個人要退貨，他說他買了個XXX，然後他說我們的商品XXX，他想要XXX…….，吧啦吧啦說了一堆（遇到這樣的人，能打住他就打住他，盡說些題外話），那麼這時，你的信息量可能就隻有商品名稱了，最近買的人比較少還好，能夠搜索的到，如果商品隻是模糊搜索，最近出貨量還比較大，想通過一個名字搜索到，那是根本不可能的。

搜索需要深入了解用戶的使用場景才能更高效的設計，這裡再說說，為什麼業務為主，要放在後面說，不要一上來就為用戶設計一大堆的搜索條目，除非你很懂使用者的使用邏輯，比如行政管理中的人員管理，我們可以知道，用戶肯定是會基于員工的姓名、工号、部門來查找相應的人的，所以我們可以先把這三個放上去，但用戶不一定通過手機尾号、學曆、職位來搜索，這時就先别放上去。

那麼有的人說，我先放上去，要是用戶不用，我再删掉不就行了嗎？相信我，用戶的心裡永遠是“我可以不用，但你不能沒有”。除非你設計的搜索條目實在太多，用戶已經吃力了，否則，他們是不會讓你減少搜索條目的，但他們會在心中暗暗的說，這破産品，設計一大堆沒用的。

好了，這就是表格設計的一些底層邏輯，關于思維導圖裡的表格設計手段，因為篇幅原因，我還有很多沒有介紹到，但是，我想已經足夠為大家打開一扇窗了。其次，我羅列的手段肯定還有遺漏，如果你發現了，也歡迎你給我留言。

最後，謝謝你的閱讀。

本文由 @何海不擇細流 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash ，基于 CC0 協議。