▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区

三分设｜连接知识，帮助全球 1 亿设计师成长

阿里巴巴设计官方认证 MCN 机构

SUXA 深圳体验设计协会华东分会

全球服务设计共创节城市站发起者

·

转自：Design with CloudAI

编辑：刘丽

共 3183 字，预计阅读 8 分钟

近期我们以系列文章的形式，从支撑 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 更新，将组件利用最大化，我们的目标是 通过我们后续不断优化迭代官网与组件的同时节省设计师时间成本，提高工作效率。未来京东云改版升级之旅会继续进行。

---

超值课程推荐

华为用户体验设计的体系搭建方法

超 10 亿用户的产品，到底是怎么做用户体验的？

揭秘滴滴、蔚来等大厂的用户体验设计策略

原创好文推荐

一款为你带来难忘体验的美食 APP

Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标

2021 年用户体验设计趋势分析

想要引导用户行为转化，设计师必须深刻理解这 4 个认知心理学理论

让设计圈一片哗然的 Google 新 logo 到底出了什么问题？国外的设计专家这么说

如何系统的增强用户粘性，提升产品转化率？你要懂得“行为设计学”

设计新趋势「玻璃拟态」到底是什么？这里有一份实现效果的详细教程

如何将设计系统快速的从 Sketch 切换到 Figma？这里有 6 个需要注意的关键点

---

欢迎大家关注三分设，每天分享优质设计、创意灵感、新知新识，定期大咖老师直播分享，零距离连麦，答疑解惑。