✏️划重点：

近期我们以系列文章的形式，从支撑to B/G设计基调的“设计语言构建”，到to B/G产品门户网站焕新升级，再到云产品营销活动案例解析落地，将最终思考总结输出分享给大家。前面已经分享了两篇：

开篇：《支撑to B/G产品体验的“设计语言” 是如何构建?》；

第二篇：《支撑to B/G产品体验的“设计语言” 实操案例：京东科技官网重塑深度解析》

感谢我们的设计师小伙伴们，一起“康康”吧～希望这次系列文章能够帮助大家深刻认知各个维度的设计驱动与设计价值体现。

阶段性升级背景

随着原京东数科及智联云两大技术业务板块整合，京东科技子集团正式成立，成为整个京东集团对外提供技术服务的核心输出平台。而京东云（JD Cloud）作为科技集团统一的技术服务品牌，为了更好的聚焦品牌认知，匹配公司战略及业务应用场景，京东云官网作为京东云对外的唯一官方门户，进行整体改造更新，对外部塑造一个焕然一新、体现新品牌风格印象及认知的概念。

先来看看我们改版后的线上页面吧。

此前线上页面为1年前设计版本，风格及设计元素快速更迭互联网背景下逐渐呈现落后趋势， 所以除了对结构框架升级外，也重点针对品牌风格做了全面升级。

结合业务侧重点，清晰了解我们面对的受众群体及特征，分析需要我们所提供的服务和产品。对官网首页进行结构框架调整和内容上更新。

因此，本次升级，我们需要从用户、业务侧、品牌设计侧3个方面去思考：

用户//

从浏览场景、用户行为、内容特征内几个方面去思考每个楼层布局内容，运用设计手段，有效传达内容、提升阅读体验。

业务侧//

将产品及解决方案价值点 清晰的呈现，对应访客搜索意图，匹配需求。通过爆品推荐、产品服务、实际场景案例等方式引导访客留咨。

官网设计侧//

为打造专业性，提升新品牌形象，视觉的展现上需保证线京东科技品牌规范化与统一性，并围ArtDeco设计语言为基础进行系统性整体升级，使线上所有页面和谐统一的展示。

页面风格分析

结合目前我们线上首页视觉样式与调研结果，总结了以下目前存在的视觉问题：

存在问题：

1、缺乏好的视觉体验和产品差异化感受

由于我们京东科技品牌风格成立，现首页为1年前京东云风格，设计风格较陈旧，并缺乏京东科技品牌调性。

2、看完即走，转化较低

用户难以快速找到想要产品，楼层相似度较高，大量偏小文案堆积，阅读性较弱。

如何进行升级

在优化页面视觉风格之前，通过收集一些资料查看目前的设计趋势，以及通过国内外多家竞品分析去探索设计方向。并进行了几轮脑暴，提炼定义科技-云 品牌的关键词等，最终定义：为了强化品牌形象，京东科技品牌旗下所有产品对外漏出一致性整体采用与京东科技官网风格一致的3D视觉风格。并从视觉构成5大要素：版、色、质、形、字，进行视觉优化。

1、Layout-页面亲密性与节奏感

版式亲密性与节奏感在页面信息层级关系的罗列展示非常重要，毫无节奏的长页面时用户阅读产生疲惫。

恰当的布局，可展示不同信息差异化，不但能提升用户理解阅读效率，也可给用户传达轻松愉悦感的心理感知。

在原首页单一的上下结构优化为通栏大屏布局并插入左右结构动静结合的板式，适当的打断用户浏览视线，产生阅读的节奏感。

重点模块突出-同类相近，异类相远

分析业务侧重点，提高运营位展示位置，使用户首屏即可触达活动产品，增加更多曝光量，缩短用户路径，提升购买转化。

并按照用户阅读顺序模拟引导视线移动方向（从左上角到右下角阅读顺序），进行左图右文的层级排版。

来自Attention Insigh眼动仪模拟者热点图

并对产品、解决方案等模块信息结构重点优化，对页面结构做了规范化的尺寸标注，通过 10px 栅格规则来制定视觉体系的秩序，规范每个模块之间的间距，统一同一字体字号的行高、间距，利用页面留白及秩序井然的间距加强信息关联性。根据业务场景配合与3D场景图的代入感去吸引用户。

2、Color-视觉情绪版

主色延续了京东科技品牌色红色，辅助色黑白色、灰蓝色，在此基础上调整色彩明度，并规范颜色使用场景及配色比例。

色彩层级：通过主色调来突出引导性的控件和图标，从而强化产品的品牌感。

色彩易读：文本和重要元素（如图标）在彩色背景上，应符合易读性的标准。

色彩表现：通过色相在使用场景上的表现，从而影响用户的情绪和感受。

3、Texture-品牌DNA 3D元素

Banner作为整站流量引导，心智传达最核心部分。针对现有用户设备多数为宽大横屏显示器，故原版本宽度940px 小尺寸banner空间利用率较低，现升级为视觉冲击力较强的1920px通屏banner设计。

同时保持与京东科技品牌对外的统一性，在质感上采用统一3D设计语言规范，主视觉整体图形结构由主体、底座和辅助背景组成，以此结构形成统一的视觉构成。

基于产品类型3D Banner延伸针出日常活动对 toB (商家用户)和 toC(普通用户) 的视觉情绪模板。

4、Shape-动态ICON

产品icon设计中，强化识别及趣味性是本次优化的重点，基于云产品的特殊性，设计图标目的是加强辅助用户识别该产品，也是帮助用户区分各产品重要的标识。

本次优化升级将原版本2.5D风格升级为质感较强的3D风格。

在表现手法上为了增加整体趣味性引入动效，并规范时长规范时长为40帧，（帧速率为30/1s）。以恰到好处，不过度设计，做到不增加操作，不干扰用户，不超过1.5s的动效设计理念。

5、Font-动态ICON

重新定了页面结构的规范，字号、字色、字重、行高、间距，根据不同字号的标题和行高间距，定义页面的统一性对齐原则，带给用户舒适的阅读体验。

总结

本次升级京东云首页，通过对页面信息架构梳理及视觉表现层的重新定义，提高用户阅读使用体验，并在视觉上通过10px 栅格定制了视觉体系的秩序，banner部分首次尝试C4D渲染大场景设计，与京东科技品牌保持了统一调性，提升了我们的品牌形象。

基于京东科技风格进行我们设计语言v2.0更新，将组件利用最大化，我们的目标是通过我们后续不断优化迭代官网与组件的同时节省设计师时间成本，提高工作效率。未来京东云改版升级之旅会继续进行。

—— THE END —

🌈🌈🌈 粉丝福利： 1、大家点个“在看”，然后在【子牧UXD】公众号后台，回复“行业报告”即可免费领取100+篇精选行业报告。 2、我们组织了专业的产品/交互/UI设计交流群，群内有来自多位华为、阿里、百度、拼多多、腾讯、快手、美团等一线大厂的设计专家，欢迎入群一起交流成长。 3、扫描下方二维码添加小编微信，即可拉你进群。 与「6600+」读者共同成长

---

阅读推荐 》》

设计视角看B端和C端的差异化

2021-09-08

支撑to B/G产品体验的“设计语言” 实操案例：京东科技官网重塑深度解析

2021-08-27

设计心理学系列（02）——希克定律

2021-04-14

体验设计师如何做好【信息传达】

2021-01-27

基于「用户侧」分析付费会员权益体系价值感知

2020-12-30

点下“在看”，爱心发射