1 月 23 日，JDL-CRM 移動端全新改版煥新，為用戶帶來了更為優(yōu)質(zhì)、高效且便捷的體驗。此次改版優(yōu)化了界面設(shè)計，采用了更加簡潔明了的布局，使得用戶可以更加快速地找到所需的功能模塊。同時，配色和圖標(biāo)也進(jìn)行了精心調(diào)整，為用戶帶來更加舒適的視覺體驗。24 年的 Q1Q2 產(chǎn)品側(cè)也將重點建設(shè)移動端，流程功能改造和交互體驗升級并行推進(jìn)，打造"好用方便"的移動化辦公平臺。

一、改版背景

JDL-CRM 移動端是基于京東物流銷售人員的管理系統(tǒng)，由京銷易移動端轉(zhuǎn)型而來。是一個集營銷、銷售、服務(wù)于一體，用于客戶全生命周期管理的工具，包含銷售過程、客戶經(jīng)營過程、客戶管理、價格管理、渠道管理等。用戶主要覆蓋物流的銷售、客經(jīng)、銷支、管理等角色，支持快遞、快運、供應(yīng)鏈、TC 轉(zhuǎn)運、大件、冷鏈、醫(yī)藥、智能供應(yīng)鏈 、服務(wù)+、國際、B2B 等全業(yè)務(wù)線條線，為其提供移動化辦公的平臺工具，是京東物流側(cè)銷售日?？蛻糸_發(fā)及維護(hù)的重要移動輔助工具。

二、問題梳理&優(yōu)化方向

隨著業(yè)務(wù)線的不斷接入以及組織架構(gòu)的相應(yīng)調(diào)整，不同事業(yè)部在銷售工作的特性上逐漸呈現(xiàn)出一些細(xì)微的差別。同時，一些潛在的問題也開始逐漸浮現(xiàn)，亟待關(guān)注并解決。

1. 使用體驗待提升：現(xiàn)有界面缺乏品牌特色，布局顯得雜亂無章，整體框架顯得零碎，難以形成統(tǒng)一的視覺效果。同時，界面在情感傳遞方面顯得不足，缺乏對一線銷售的情感關(guān)懷。
2. 用戶滿意度有待加強：目前的操作流程不夠直觀明了，對于用戶來說識別度較低。此外，在面對復(fù)雜業(yè)務(wù)場景時，系統(tǒng)的支撐能力顯得有限，難以滿足銷售團(tuán)隊日益增長的業(yè)務(wù)需求，這在一定程度上影響了用戶的滿意度。
3. 視覺框架待新升級：JDL-CRM 的視覺框架已顯陳舊，界面風(fēng)格過時，色系和組件缺乏規(guī)范化管理。這導(dǎo)致整體視覺效果欠缺，影響了用戶的使用體驗和品牌形象的塑造。

結(jié)合上述問題的優(yōu)化點，我們從中可以提取出如下關(guān)鍵詞：

1. 使用全新視覺語言 = 「品牌」

傳達(dá)品牌風(fēng)格，提升組件的規(guī)范化和視覺一致性

2. 減少冗余、提升效率 = 「輕量」

優(yōu)化現(xiàn)有布局，突出用戶關(guān)注重點

3. 增加情感化設(shè)計 = 「溫度」

融入情感化設(shè)計元素，享受工作的同時，也能感受到關(guān)心與呵護(hù)

三、首頁煥新 · 打造全新視覺體驗

1. 品牌風(fēng)格升級 · 視覺煥然一新

①色系改造

1. 品牌識別度增強：近期物流內(nèi)部系統(tǒng)色系逐步統(tǒng)一為：ToC 使用紅色，ToB 使用藍(lán)色，本次色系改動，有助于提升內(nèi)部系統(tǒng)的一致性，和品牌的辨識度。
2. 專業(yè)感增強：藍(lán)色通常給人信任、穩(wěn)定和專業(yè)的感覺。相比于紅色所傳達(dá)的熱烈、激情，藍(lán)色更容易營造一種沉靜、舒適的視覺氛圍，有助于提升用戶的使用體驗。
3. 視覺舒適度提升：藍(lán)色在色彩心理學(xué)中通常被認(rèn)為是冷色調(diào)，對于長時間使用界面的用戶來說，藍(lán)色主題能夠減少視覺疲勞，提高界面的視覺舒適度。

②增加封面，強化品牌風(fēng)格

作為首頁主要的頭部位置，應(yīng)給予重要的視覺體現(xiàn)。本次增加沉浸式輪播圖，視覺層面可強化用戶對 CRM 的品牌記憶，也可以作為重要通知傳達(dá)入口，快速傳遞核心信息。

使用 3D 模型作為主元素，通過文件夾、勾選標(biāo)記的紙張和盾牌圖案等設(shè)計元素，與銷售流程、任務(wù)管理以及數(shù)據(jù)安全等方面建立了緊密的關(guān)聯(lián)，進(jìn)一步突出了 JDL-CRM 系統(tǒng)在銷售管理中的高效、便捷和安全特性。以封面為基準(zhǔn)，制定了 banner 規(guī)范，便于后續(xù)輪播圖輸出保持一致性。

③「重點關(guān)注」指標(biāo)卡片煥新

隨著本次視覺改版，快遞快運事業(yè)部在重點關(guān)注模塊下需要增加新的指標(biāo)，卡片將由原先的 4 個增加至 5 個。考慮到能更好的兼容未來繼續(xù)增加數(shù)量的場景，以及屏效的提升，將卡片平鋪優(yōu)化為橫向滑動的交互形式。

改版前的卡片風(fēng)格會稍顯單調(diào)，色彩單一，難以直觀的區(qū)分不同的指標(biāo)。

1. 本次對卡片設(shè)計進(jìn)行了優(yōu)化，增加至 4 種顏色，且顏色都與金剛區(qū)的色相相呼應(yīng)，使得每張卡片都獨具特色，易于區(qū)分。
2. 同時，在卡片的右下角，我們使用了帶有毛玻璃輕質(zhì)感的圖標(biāo)，不僅平衡了卡片的視覺重心，還增添了一絲現(xiàn)代感和科技感。

④新增學(xué)習(xí)園地

1. 移動端是 CRM 當(dāng)前的大趨勢，更符合銷售外勤的角色屬性；
2. 全國銷售人員較為分散，移動培訓(xùn)學(xué)習(xí)平臺可以幫助銷售實現(xiàn)跨地域培訓(xùn)及實時學(xué)習(xí)；
3. 目前業(yè)務(wù)側(cè)重點建設(shè)銷售的能力提升工作。

考慮到以上背景，CRM 移動端建設(shè)學(xué)習(xí)園地，用戶可以隨時隨地學(xué)習(xí)、了解；在銷售人員可以獲取到最新的銷售知識、技巧和市場動態(tài)，從而不斷更新自己的銷售理念和策略，也可以降低新員工入職的學(xué)習(xí)成本。（部分頁面見下圖）

2. 框架優(yōu)化 · 重塑界面 · 提效更輕量

①優(yōu)化頂部搜索占位

搜索位置調(diào)整：將原有的頂部居中搜索欄，移動至頁面的右上角。這樣的布局更符合用戶的閱讀習(xí)慣，不會過多地干擾到頁面的主要內(nèi)容展示，也使輪播封面效果更沉浸；

②日程卡片輕量化

銷售移動端的拜訪流程主要為：創(chuàng)建拜訪計劃→查看我的日程（拜訪）→進(jìn)行客戶拜訪→反饋拜訪結(jié)果/簽約。在有外出任務(wù)的場景中，「我的日程」是銷售當(dāng)天工作的核心模塊。基于這種情況，外露日程模塊、拜訪任務(wù)信息，有助于大大提升工作效率。

原先的步驟條樣式會顯得較瑣碎、信息分散、對齊關(guān)系較差。

1. 本次將卡片左右拉通，狀態(tài)外露在卡片左側(cè)，整體更簡潔整齊；
2. 卡片狀態(tài)標(biāo)簽扁平化，減少了不必要的視覺干擾，增強風(fēng)格一致性；
3. 用 icon 替代部分次要信息，使客戶相關(guān)的重要信息更清晰、直觀。

③外露創(chuàng)建入口，提升效率

拜訪計劃的「創(chuàng)建」和「管理」，是 CRM 銷售日常工作的高頻操作。本次將「創(chuàng)建拜訪計劃」入口，調(diào)整至底部導(dǎo)航，使銷售人員能夠在首屏就能完成拜訪計劃的相關(guān)操作，更便捷，更醒目。同時，底部導(dǎo)航的醒目位置也能有效提醒銷售人員及時制定和執(zhí)行拜訪計劃，確保銷售活動的順利進(jìn)行，提升工作效率。

3. 好用 · 更有溫度

①我的日程-增加「今日天氣」

對于銷售需要常外出拜訪客戶的場景，在日程模塊里增加天氣，銷售人員通過查看當(dāng)日天氣預(yù)告，能夠?qū)崟r了解當(dāng)天的天氣狀況，為銷售掌握天氣信息提供便捷。了解天氣情況后，銷售人員也可以更加靈活地調(diào)整拜訪計劃。例如，在惡劣天氣條件下，他們可以選擇推遲拜訪或改變拜訪方式（如線上溝通），以避免天氣對拜訪效果產(chǎn)生負(fù)面影響。即體現(xiàn)了員工關(guān)懷，也是「情感化設(shè)計」在頁面中的應(yīng)用。

②icon 圖標(biāo)整體升級

「金剛區(qū)」圖標(biāo)：作為主頁面/一級圖標(biāo)，采用大圓角背景+反白漸變的面性圖標(biāo)

1. 「大圓角」的設(shè)計給人一種圓潤、溫暖的感覺，有助于營造一種溫馨、舒適的界面氛圍。這種氛圍能夠使用戶在使用產(chǎn)品時感受到一種溫暖和關(guān)懷，從而增強產(chǎn)品的親和力；
2. 4 個圖標(biāo)顏色選用主題色的相近色，考慮到 CRM 的辦公屬性，選用飽和度較低的 4 個顏色，既能保證色調(diào)統(tǒng)一、避免視覺疲勞，也便于提升用戶記憶，提高跳轉(zhuǎn)效率。

「我的」圖標(biāo)：作為次級頁面/二級圖標(biāo)，采用線性雙色圖標(biāo)

1. 與主界面視覺區(qū)分層級；
2. 顏色選用藍(lán)色+黑色，與主題色保持一致。

四、未來還要做的事

CRM 移動端作為一個龐大且功能繁雜的管理系統(tǒng)，在本次升級中，我們優(yōu)先針對首頁及部分核心模塊進(jìn)行了全面的優(yōu)化與色系改造，以提升用戶體驗和系統(tǒng)美觀度。然而，仍有許多模塊的頁面尚待改造，改造工作將聚焦于色系調(diào)整、組件升級以及視覺一致性等多個方面，針對圖標(biāo)方面也將輸出全新的規(guī)范。

未來，我們將持續(xù)進(jìn)行色系改造工作，為用戶帶來更加卓越的體驗。

作者：JellyDesign