今天的改版對象，是一個 CRM 系統的表盤頁（登錄后的主頁）。

本次的改版不是只圍繞視覺效果展開，而是重點從業務角度出發，帶大家更多的理解如何從業務層面展開分析并完成版式的設計。

一、相關業務分析

在具體展開業務分析之前，我們先看看學員針對該界面做的幾套改版方案。

如果僅僅從“視覺”的角度來評價，改完后的版式雖然很公式化，但細節怎么添加結果也會比原版好。但是，只是視覺效果好就夠了嘛？

B 端產品設計的評價標準中，視覺的順位一直是很靠后的，而優先級更高的是對于設計能不能符合業務、場景、效率需要的水平。

所以從業務談起，該界面從屬于 CRM 系統（客戶管理系統），是客戶經理/銷售用于獲取客源信息并跟蹤客戶交易狀況的工具。

作為客戶經理/銷售，他們的主要工作任務，就是根據線索（意向客戶信息）聯系客戶，促成客戶下訂，并跟進后續的采購、物流、結算。

每條線索到完成付款可以理解成是一個完整的交易流程，需要花費較長的時間和精力，大致的流程如下：

交易流程：

而一個客戶經理/銷售會同時負責多條交易，每個交易所處的進度、待辦事項各不相同，也就導致他們每天會有一堆瑣碎的任務需要處理，如果沒有清晰的呈現出來就必然會導致他們的工作效率低下。

并且用戶在推進不同交易時，還可以追蹤更多的線索（吃著碗里看鍋里），獲得越多的機會和交易越好，因為這會掛鉤他們的績效和工資收入。從企業角度出發也同理，因為這可以帶來更多的收益。

在這個背景下，改版后突出的各項數據指標就顯得非常乏力，不是說數據沒用，而是不符合用戶要促成交易的首要工作目標。

除了交易業務外，這套 CRM 系統還承擔了一定的考勤作用，所以首頁還出現了考勤模塊，因為客戶經理/銷售不坐辦公室出差還是跑客戶很頻繁，那么公司就可能要求他們主動登錄并簽到做記錄。而這個模塊在改版后就消失了，顯然是不合理的改動。

所以，基于對業務的理解，我們就可以重新對原界面中包含的模塊內容進行作用的梳理：

1. 考勤簽到：工作日登錄首頁要做的第一件事，但一天只需要簽到一回，之后就沒有什么作用看了
2. 公告新聞：團隊內部發的公告信息，需要員工關注和知悉
3. 線索：需要了解和正在接觸的客戶，需要根據進度做進一步的安排
4. 最近登錄：最近登錄的情況記錄
5. 待辦事項：由用戶自己創建的 Todolist，展示最新的待辦事項
6. 今日待辦清單：待辦事項中今天要做的部分
7. 今日完成清單：待辦中今日做完的工作內容
8. 待處理流程：交易流程中創建的和用戶相關的子流程任務，需要用戶進行處理
9. 我發起的流程：由用戶自己發起的交易流程中的子流程任務，需要關注進度

有了對背景業務和功能模塊的認識，然后就可以展開后續的原型、版式改版設計了。

二、改版設計說明

原界面設計缺陷很明顯，改版也不會順著原版的樣式做，所以我就不浪費精力分析視覺問題，也先略過原版有自定義的功能，直接講新的設計思路。其中演示使用 1440px 寬的畫布，還為了滿足手機觀看需要，所以空間會比原圖小，不要糾結展示數據量少的問題。

首先在功能模塊中，根據權重和作用我把它們分成 3 個大模塊，準備、流程、系統。第一個準備即優先級最高的事項，包含原版模塊中的線索、待辦事項、今日待辦、今日完成清單。第二個流程即原版中的待處理流程、我發起的流程兩個部分。第三個系統包含原版中的簽到、公告、最近登錄。

根據分類將內容區域拆分成左、中、右或上、中、下兩種布局方向（后面主要以左中右方案演示）：

先從系統部分說起，因為簽到一天只需要簽到一次，所以雖然優先級高，但沒必要放在內容區域的左上角，而放在右上角即可。但簽到因為權重高，且預防用戶忘記點一天班白上，所以未點擊狀態下視覺需要強化。同時，簽到歷史可以從該模塊移除，和當前的簽到操作沒有聯系的必要，在完成簽到后顯示簽到時間即可。

在簽到下方，則是新聞模塊，新聞要突出重要性的話，那么關鍵應該是給未讀和已讀的標簽，讓用戶會更主動的去打開打消除未讀。

最下方，則是最近登錄情況，但在這里我要做個調整，就是將登錄和簽到合并起來，作為近期活動記錄模塊，用于檢查自己的活動歷史（比如有沒有漏簽）。

然后我們回過頭來處理準備模塊，如果按我自己的經驗開展相關工作的話，那么每天工作會優先拓展或推進有意向的客戶，之后再處理流程中的任務。

所以左上角優先放線索模塊，且優化線索條目的樣式，使用表格化的方式進行設計。

原版將待辦分成全部、今日、今日完成的做法非常重復，所以下方的待辦只使用一個卡片，通過標簽切換全部和今日即可。且列表的樣式要和線索列表做出區分，采用卡片的模式，提高辨識度。

最后解決中間的待處理部分，原版中拆成待處理和我發起兩個模塊，作用不一樣，所以合并起來就不合適。但是，我會認為用戶創建的任務查看優先級會比別人發給你的任務優先級更高，所以上下順序會對調。這部分列表也以表格的模式展示，但是對這些條目的操作選項放到表格右側。

到這里主要的模塊設計都完成了，可以看看前后的對比了：

以上的調整不涉及對產品功能的新增或刪減，也不是就為了提升視覺的效果，而是基于業務的理解對模塊進行重新的規劃和調整，最終的產出需要滿足前面建立的業務邏輯。

所以如果在業務層面你們有別的理解，而我現在的產出不能滿足就是必然的，因為出發點就不一樣。不同場景、產品的業務需求各不相同，需要設計師自己去咨詢和分析，不存在絕對正確和通用的標準。

而界面的版式、布局、交互、樣式都是從業務的角度作為引導去實現的，作為設計師必然要學會這樣的思考方式，才能輸出有價值的，和可以進行合理解釋的設計，而不能只停留在 “這么做更好看”的初級階段。

同時，在面對特殊復雜的業務類型時，指望 “找參考” 來思考怎么設計的做法是行不通的，因為你基本不可能找到情況一模一樣的案例。

只要建立對業務的認識，就應該直接構思解決方案并快速實現出來，再對產出進行可用性的檢查，只要找不出問題，就可以大膽的使用，因為設計是去解決真實問題的，而不是滿足——行業慣例。

結尾

業務認識這個東西的重要性一直強調但是收效甚微，只能通過不停輸出案例來強化你們對它重要性的認識。多花點時間和產品經理或運營溝通，遠遠比你考慮怎么把視覺做好看重要。

歡迎關注作者的微信公眾號：「超人的電話亭」