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

推薦閱讀

一、改版背景

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

二、問題梳理&優化方向

隨著業務線的不斷接入以及組織架構的相應調整，不同事業部在銷售工作的特性上逐漸呈現出一些細微的差別。同時，一些潛在的問題也開始逐漸浮現，亟待關注并解決。

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

結合上述問題的優化點，我們從中可以提取出如下關鍵詞：

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

傳達品牌風格，提升組件的規范化和視覺一致性

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

優化現有布局，突出用戶關注重點

3. 增加情感化設計 = 「溫度」

融入情感化設計元素，享受工作的同時，也能感受到關心與呵護

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

1. 品牌風格升級 · 視覺煥然一新

①色系改造

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

②增加封面，強化品牌風格

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

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

③「重點關注」指標卡片煥新

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

改版前的卡片風格會稍顯單調，色彩單一，難以直觀的區分不同的指標。

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

④新增學習園地

1. 移動端是 CRM 當前的大趨勢，更符合銷售外勤的角色屬性；
2. 全國銷售人員較為分散，移動培訓學習平臺可以幫助銷售實現跨地域培訓及實時學習；
3. 目前業務側重點建設銷售的能力提升工作。

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

2. 框架優化 · 重塑界面 · 提效更輕量

①優化頂部搜索占位

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

②日程卡片輕量化

銷售移動端的拜訪流程主要為：創建拜訪計劃→查看我的日程（拜訪）→進行客戶拜訪→反饋拜訪結果/簽約。在有外出任務的場景中，「我的日程」是銷售當天工作的核心模塊?；谶@種情況，外露日程模塊、拜訪任務信息，有助于大大提升工作效率。

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

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

③外露創建入口，提升效率

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

3. 好用 · 更有溫度

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

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

②icon 圖標整體升級

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

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

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

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

四、未來還要做的事

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

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

歡迎關注「JellyDesign」的小程序：