京东实战案例！CRM移动端视觉全新升级完整复盘

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」的小程序：