今天的改版對象，是一個(gè) CRM 系統(tǒng)的表盤頁（登錄后的主頁）。

本次的改版不是只圍繞視覺效果展開，而是重點(diǎn)從業(yè)務(wù)角度出發(fā)，帶大家更多的理解如何從業(yè)務(wù)層面展開分析并完成版式的設(shè)計(jì)。

一、相關(guān)業(yè)務(wù)分析

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

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

B 端產(chǎn)品設(shè)計(jì)的評價(jià)標(biāo)準(zhǔn)中，視覺的順位一直是很靠后的，而優(yōu)先級更高的是對于設(shè)計(jì)能不能符合業(yè)務(wù)、場景、效率需要的水平。

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

作為客戶經(jīng)理/銷售，他們的主要工作任務(wù)，就是根據(jù)線索（意向客戶信息）聯(lián)系客戶，促成客戶下訂，并跟進(jìn)后續(xù)的采購、物流、結(jié)算。

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

交易流程：

而一個(gè)客戶經(jīng)理/銷售會同時(shí)負(fù)責(zé)多條交易，每個(gè)交易所處的進(jìn)度、待辦事項(xiàng)各不相同，也就導(dǎo)致他們每天會有一堆瑣碎的任務(wù)需要處理，如果沒有清晰的呈現(xiàn)出來就必然會導(dǎo)致他們的工作效率低下。

并且用戶在推進(jìn)不同交易時(shí)，還可以追蹤更多的線索（吃著碗里看鍋里），獲得越多的機(jī)會和交易越好，因?yàn)檫@會掛鉤他們的績效和工資收入。從企業(yè)角度出發(fā)也同理，因?yàn)檫@可以帶來更多的收益。

在這個(gè)背景下，改版后突出的各項(xiàng)數(shù)據(jù)指標(biāo)就顯得非常乏力，不是說數(shù)據(jù)沒用，而是不符合用戶要促成交易的首要工作目標(biāo)。

除了交易業(yè)務(wù)外，這套 CRM 系統(tǒng)還承擔(dān)了一定的考勤作用，所以首頁還出現(xiàn)了考勤模塊，因?yàn)榭蛻艚?jīng)理/銷售不坐辦公室出差還是跑客戶很頻繁，那么公司就可能要求他們主動登錄并簽到做記錄。而這個(gè)模塊在改版后就消失了，顯然是不合理的改動。

所以，基于對業(yè)務(wù)的理解，我們就可以重新對原界面中包含的模塊內(nèi)容進(jìn)行作用的梳理：

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

有了對背景業(yè)務(wù)和功能模塊的認(rèn)識，然后就可以展開后續(xù)的原型、版式改版設(shè)計(jì)了。

二、改版設(shè)計(jì)說明

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

首先在功能模塊中，根據(jù)權(quán)重和作用我把它們分成 3 個(gè)大模塊，準(zhǔn)備、流程、系統(tǒng)。第一個(gè)準(zhǔn)備即優(yōu)先級最高的事項(xiàng)，包含原版模塊中的線索、待辦事項(xiàng)、今日待辦、今日完成清單。第二個(gè)流程即原版中的待處理流程、我發(fā)起的流程兩個(gè)部分。第三個(gè)系統(tǒng)包含原版中的簽到、公告、最近登錄。

根據(jù)分類將內(nèi)容區(qū)域拆分成左、中、右或上、中、下兩種布局方向（后面主要以左中右方案演示）：

先從系統(tǒng)部分說起，因?yàn)楹灥揭惶熘恍枰灥揭淮?，所以雖然優(yōu)先級高，但沒必要放在內(nèi)容區(qū)域的左上角，而放在右上角即可。但簽到因?yàn)闄?quán)重高，且預(yù)防用戶忘記點(diǎn)一天班白上，所以未點(diǎn)擊狀態(tài)下視覺需要強(qiáng)化。同時(shí)，簽到歷史可以從該模塊移除，和當(dāng)前的簽到操作沒有聯(lián)系的必要，在完成簽到后顯示簽到時(shí)間即可。

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

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

然后我們回過頭來處理準(zhǔn)備模塊，如果按我自己的經(jīng)驗(yàn)開展相關(guān)工作的話，那么每天工作會優(yōu)先拓展或推進(jìn)有意向的客戶，之后再處理流程中的任務(wù)。

所以左上角優(yōu)先放線索模塊，且優(yōu)化線索條目的樣式，使用表格化的方式進(jìn)行設(shè)計(jì)。

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

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

到這里主要的模塊設(shè)計(jì)都完成了，可以看看前后的對比了：

以上的調(diào)整不涉及對產(chǎn)品功能的新增或刪減，也不是就為了提升視覺的效果，而是基于業(yè)務(wù)的理解對模塊進(jìn)行重新的規(guī)劃和調(diào)整，最終的產(chǎn)出需要滿足前面建立的業(yè)務(wù)邏輯。

所以如果在業(yè)務(wù)層面你們有別的理解，而我現(xiàn)在的產(chǎn)出不能滿足就是必然的，因?yàn)槌霭l(fā)點(diǎn)就不一樣。不同場景、產(chǎn)品的業(yè)務(wù)需求各不相同，需要設(shè)計(jì)師自己去咨詢和分析，不存在絕對正確和通用的標(biāo)準(zhǔn)。

而界面的版式、布局、交互、樣式都是從業(yè)務(wù)的角度作為引導(dǎo)去實(shí)現(xiàn)的，作為設(shè)計(jì)師必然要學(xué)會這樣的思考方式，才能輸出有價(jià)值的，和可以進(jìn)行合理解釋的設(shè)計(jì)，而不能只停留在 "這么做更好看"的初級階段。

同時(shí)，在面對特殊復(fù)雜的業(yè)務(wù)類型時(shí)，指望 "找參考" 來思考怎么設(shè)計(jì)的做法是行不通的，因?yàn)槟慊静豢赡苷业角闆r一模一樣的案例。

只要建立對業(yè)務(wù)的認(rèn)識，就應(yīng)該直接構(gòu)思解決方案并快速實(shí)現(xiàn)出來，再對產(chǎn)出進(jìn)行可用性的檢查，只要找不出問題，就可以大膽的使用，因?yàn)樵O(shè)計(jì)是去解決真實(shí)問題的，而不是滿足——行業(yè)慣例。

結(jié)尾

業(yè)務(wù)認(rèn)識這個(gè)東西的重要性一直強(qiáng)調(diào)但是收效甚微，只能通過不停輸出案例來強(qiáng)化你們對它重要性的認(rèn)識。多花點(diǎn)時(shí)間和產(chǎn)品經(jīng)理或運(yùn)營溝通，遠(yuǎn)遠(yuǎn)比你考慮怎么把視覺做好看重要。

作者：超人的電話亭