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

1 月 23 日，JDL-CRM 移动端全新改版焕新，为用户带来了更为优质、高效且便捷的体验。此次改版优化了界面设计，采用了更加简洁明了的布局，使得用户可以更加快速地找到所需的功能模块。同时，配色和图标也进行了精心调整，为用户带来更加舒适的视觉体验。24 年的 Q1Q2 产品侧也将重点建设移动端，流程功能改造和交互体验升级并行推进，打造"好用方便"的移动化办公平台。

一、改版背景

JDL-CRM 移动端是基于京东物流销售人员的管理系统，由京销易移动端转型而来。是一个集营销、销售、服务于一体，用于客户全生命周期管理的工具，包含销售过程、客户经营过程、客户管理、价格管理、渠道管理等。用户主要覆盖物流的销售、客经、销支、管理等角色，支持快递、快运、供应链、TC 转运、大件、冷链、医药、智能供应链 、服务+、国际、B2B 等全业务线条线，为其提供移动化办公的平台工具，是京东物流侧销售日常客户开发及维护的重要移动辅助工具。

二、问题梳理&优化方向

随着业务线的不断接入以及组织架构的相应调整，不同事业部在销售工作的特性上逐渐呈现出一些细微的差别。同时，一些潜在的问题也开始逐渐浮现，亟待关注并解决。

结合上述问题的优化点，我们从中可以提取出如下关键词：

1. 使用全新视觉语言 = 「品牌」

传达品牌风格，提升组件的规范化和视觉一致性

2. 减少冗余、提升效率 = 「轻量」

优化现有布局，突出用户关注重点

3. 增加情感化设计 = 「温度」

融入情感化设计元素，享受工作的同时，也能感受到关心与呵护

三、首页焕新 · 打造全新视觉体验

1. 品牌风格升级 · 视觉焕然一新

①色系改造

②增加封面，强化品牌风格

作为首页主要的头部位置，应给予重要的视觉体现。本次增加沉浸式轮播图，视觉层面可强化用户对 CRM 的品牌记忆，也可以作为重要通知传达入口，快速传递核心信息。

使用 3D 模型作为主元素，通过文件夹、勾选标记的纸张和盾牌图案等设计元素，与销售流程、任务管理以及数据安全等方面建立了紧密的关联，进一步突出了 JDL-CRM 系统在销售管理中的高效、便捷和安全特性。以封面为基准，制定了 banner 规范，便于后续轮播图输出保持一致性。

③「重点关注」指标卡片焕新

随着本次视觉改版，快递快运事业部在重点关注模块下需要增加新的指标，卡片将由原先的 4 个增加至 5 个。考虑到能更好的兼容未来继续增加数量的场景，以及屏效的提升，将卡片平铺优化为横向滑动的交互形式。

改版前的卡片风格会稍显单调，色彩单一，难以直观的区分不同的指标。

④新增学习园地

考虑到以上背景，CRM 移动端建设学习园地，用户可以随时随地学习、了解；在销售人员可以获取到最新的销售知识、技巧和市场动态，从而不断更新自己的销售理念和策略，也可以降低新员工入职的学习成本。（部分页面见下图）

2. 框架优化 · 重塑界面 · 提效更轻量

①优化顶部搜索占位

搜索位置调整：将原有的顶部居中搜索栏，移动至页面的右上角。这样的布局更符合用户的阅读习惯，不会过多地干扰到页面的主要内容展示，也使轮播封面效果更沉浸；

②日程卡片轻量化

销售移动端的拜访流程主要为：创建拜访计划→查看我的日程（拜访）→进行客户拜访→反馈拜访结果/签约。在有外出任务的场景中，「我的日程」是销售当天工作的核心模块。基于这种情况，外露日程模块、拜访任务信息，有助于大大提升工作效率。

原先的步骤条样式会显得较琐碎、信息分散、对齐关系较差。

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

拜访计划的「创建」和「管理」，是 CRM 销售日常工作的高频操作。本次将「创建拜访计划」入口，调整至底部导航，使销售人员能够在首屏就能完成拜访计划的相关操作，更便捷，更醒目。同时，底部导航的醒目位置也能有效提醒销售人员及时制定和执行拜访计划，确保销售活动的顺利进行，提升工作效率。

3. 好用 · 更有温度

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

对于销售需要常外出拜访客户的场景，在日程模块里增加天气，销售人员通过查看当日天气预告，能够实时了解当天的天气状况，为销售掌握天气信息提供便捷。了解天气情况后，销售人员也可以更加灵活地调整拜访计划。例如，在恶劣天气条件下，他们可以选择推迟拜访或改变拜访方式（如线上沟通），以避免天气对拜访效果产生负面影响。即体现了员工关怀，也是「情感化设计」在页面中的应用。

②icon 图标整体升级

「金刚区」图标：作为主页面/一级图标，采用大圆角背景+反白渐变的面性图标

「我的」图标：作为次级页面/二级图标，采用线性双色图标

四、未来还要做的事

CRM 移动端作为一个庞大且功能繁杂的管理系统，在本次升级中，我们优先针对首页及部分核心模块进行了全面的优化与色系改造，以提升用户体验和系统美观度。然而，仍有许多模块的页面尚待改造，改造工作将聚焦于色系调整、组件升级以及视觉一致性等多个方面，针对图标方面也将输出全新的规范。

未来，我们将持续进行色系改造工作，为用户带来更加卓越的体验。

作者：JellyDesign