智慧營銷是一款面向B端企業(yè)用戶，為其提供線索數(shù)據(jù)獲取、CRM客戶管理以及增值服務(wù)能力的SaaS產(chǎn)品。為了在競爭激烈的B端市場占有一席之位，我們在設(shè)計上對產(chǎn)品進行了深度思考與體驗優(yōu)化。本文主要帶來在這一過程中我們的設(shè)計思考過程，出于對產(chǎn)品隱私的考慮，相關(guān)數(shù)據(jù)已經(jīng)進行了脫敏處理。

1.新名詞SCRM

智慧營銷屬于SCRM系統(tǒng)功能，與傳統(tǒng)的CRM的共同點：雖然都是客戶關(guān)系管理，注重提升企業(yè)工作效率、科學(xué)地進行銷售管理、高效地進行客戶關(guān)系管理與客戶跟進。

最主要區(qū)別在于：是否打通了社交工具，整合了社交網(wǎng)絡(luò)；如果打通了社交網(wǎng)絡(luò)與社交工具，并注重這方面功能的延伸與拓展，則為SCRM。

關(guān)鍵詞一：社交。既然整合了社交，突出人、組織的的可視化展示則是設(shè)計的第一個抓手。

2.掌握核心流程

主要核心流程：市場獲客 - 線索分配 - 客戶跟進 - 商機管理 - 商務(wù)過程 - 售后管理

了解主要核心流程后，確定了本次改版的提效目標(biāo)：圍繞線索分配（篩選列表的交互優(yōu)化）、客戶跟進（信息字段的可視化展示）、商機管理（詳情內(nèi)容的承載）進行。

3.當(dāng)前問題分析

分析產(chǎn)品現(xiàn)有問題的分析和整理，總結(jié)起來大概如下：

確定了升級方向，便可以從視覺風(fēng)格與提高效率這兩個點對關(guān)鍵頁面進行改造升級。

?

在設(shè)計語?上我們沿襲了中臺設(shè)計品牌“視界”的設(shè)計理念，將設(shè)計系統(tǒng)的UI組件庫、插畫組件庫、數(shù)據(jù)可視化組件等進行了結(jié)合，不但視覺風(fēng)格上沿襲了品牌屬性，也一定程度上提高了開發(fā)的生產(chǎn)效率。

1.視界設(shè)計價值觀

輕科技、未來感、空間感

品牌語言主張以簡潔、立體和科技，可被信任方式來表達產(chǎn)品的核心理念和特點。通過空間、陰影、視差，景深提升信息呈現(xiàn)的邏輯和理性，層次感和秩序感。

2.提升設(shè)計品質(zhì)

大面積跳躍的視覺元素在B端系統(tǒng)上使用很少，設(shè)計能夠施展拳腳的頁面大概在于：首頁宣傳、登陸頁品牌傳達、圖標(biāo)元素、空狀態(tài)、幫助引導(dǎo)、公告系統(tǒng)。

深度思考：

設(shè)計完一致的缺省圖就算設(shè)計完成了嗎？這里可以思考??的更多。例如權(quán)限錯誤場景的引導(dǎo)：配圖+文案+按鈕/引導(dǎo)線索。可以用來解決用戶面臨的緊迫問題，也可以用來引導(dǎo)新用戶開始產(chǎn)品體驗旅程。

3.社交化基礎(chǔ)-頭像這么小的設(shè)計細節(jié)

這里的頭像可以是用戶圖像、也可以是公司頭像。相比傳統(tǒng)名稱，頭像視覺面積更大、顏色更豐富、比文字更吸引人的注意力。在界面設(shè)計中適當(dāng)合理地使用頭像，可以提升情感化設(shè)計的水平，讓產(chǎn)品更親切，幫助產(chǎn)品目的達成。

通常的用戶頭像基本上可以用三種形式來代表：空狀態(tài)、名字首字母、用戶圖片。但受到審核因素的制約，產(chǎn)品初期通常無法實現(xiàn)這個小功能。就需要視覺層面上去解決這個問題。使用名字首字母隨機顏色的方法，可以將用戶第一注意點轉(zhuǎn)移到人物的關(guān)鍵信息上，也可給整個頁面“加點顏色”

?

1.工作臺-任務(wù)的集合

核心功能：統(tǒng)計數(shù)據(jù)、待辦任務(wù)、快捷入口、通知公告。

將用戶需要待辦的事項、事項處理的進度等都完整的展示出來，方便用戶隨時查看，提升用戶的工作效率。設(shè)計原則上，以模塊進行劃分，總數(shù)量控制在 5-9 個。不同的角色需求不同，應(yīng)提供基于角色的差異化視圖。

2.高效的篩選列表頁

篩選存在的對于整個SaaS系統(tǒng)來說是非常重要的，它可以幫助用戶在表單茫茫多的數(shù)據(jù)當(dāng)中進行快速的定位，縮短用戶對于數(shù)據(jù)的尋找時間。

• 明確信息結(jié)構(gòu)：篩選列表頁面，總體可分為全局操作區(qū)-篩選區(qū)-列表操作區(qū)-表格區(qū)

• 篩選器類型分析：

按位置劃分：可分為側(cè)邊欄、水平欄、并列；

按初始狀態(tài)劃分：可分為展開/折疊、平鋪/彈出；

按執(zhí)行時間劃分：可分為實時更新、手動更新；

按顯示結(jié)果劃分：可分為篩選進度、突出篩選結(jié)果、結(jié)果計數(shù)、空結(jié)果、在結(jié)果中過濾和搜索、結(jié)果清除/結(jié)果重置

• 結(jié)構(gòu)層面分析：

當(dāng)篩選器過多的情況下（一般在 5-15 個之間），篩選器過多，需要滾屏才能看到篩選結(jié)果，用戶使用起來會很別扭。所以在數(shù)量較多的情況下，一般會將篩選項進行收折，這樣保證篩選整體面積不會太大，同時將用戶常用的篩選放在前面，可以滿足用戶基本的業(yè)務(wù)需求和使用場景。

• 設(shè)計應(yīng)用實踐：

結(jié)合項目特點，在設(shè)計上首先使用的是平鋪型，其優(yōu)點是：將篩選項的結(jié)果全部或者部分放出，能夠幫助用戶快速理解篩選項以及快讀找到自己想要的結(jié)果。缺點是：占空間面積較大。需要做折疊收起處理。執(zhí)行時間：去掉了原先需點擊查詢按鈕的步驟，改為實時更新信息的篩選交互會更加高效。

聯(lián)動交互的小細節(jié)。指的是控件之間發(fā)生互相關(guān)聯(lián)的變化，比如選擇了某個值后，其他篩選項隨之發(fā)生變化。例如通常情況下產(chǎn)品選擇的時間選擇器輸入框，便可以提取出快捷選項，今天、明天、一月內(nèi)等快捷選擇項，不滿足點擊其他再聯(lián)動出時間選擇器，既能保證頁面的視覺一致，也一定程度上提升效率。

表頭自定義欄：允許用戶根據(jù)自己的偏好選擇表單顯示內(nèi)容。當(dāng)涉及多個指標(biāo)和數(shù)據(jù)集時，該功能可以滿足不同的用戶目標(biāo) 。

3.電話條的改版與設(shè)計

撥打電話也是用戶的常用操作，設(shè)計上去掉了原版超級多的按鈕選項，減少用戶視覺干擾。視覺強調(diào)和突出重要操作。

以上我們僅僅針對智慧營銷的設(shè)計進行了簡單的設(shè)計經(jīng)驗分享。關(guān)于SaaS的體驗設(shè)計探索我們還只是剛邁出第一步，也將會持續(xù)去深入 SCRM與傳統(tǒng)系統(tǒng)的差異化。同時基于業(yè)務(wù)中臺化方向發(fā)展方向，設(shè)計側(cè)未來也將進一步去展開中臺化設(shè)計賦能之路，去賦能產(chǎn)品體系下更多場景的拓展和應(yīng)用。

?