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

一、改版背景

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

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

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

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

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

1. 使用全新視覺(jué)語(yǔ)言 = 「品牌」

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

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

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

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

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

三、首頁(yè)煥新 · 打造全新視覺(jué)體驗(yàn)

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

①色系改造

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

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

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

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

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

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

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

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

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

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

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

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

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

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

②日程卡片輕量化

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

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

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

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

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

3. 好用 · 更有溫度

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

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

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

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

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

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

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

四、未來(lái)還要做的事

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

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

作者：JellyDesign