JELLY 3.0 全新升级 - 京东零售设计共享平台

JellyDesign

深圳/设计爱好者/5年前/3542浏览

版权

JellyDesign

JELLY 3.0京东零售体验设计共享平台此次改版目的是平台要实行全面外网化。并希望为用户带来更好的浏览体验。

- 前言

JELLY官网2.0的版本在内容呈现上不能满足外网化的需求。同时重视觉，信息层级不够明确，分散用户的浏览信息，用户浏览效率不高。2020年我们在JELLY也沉淀了3个原创栏STORE/SOAP/FLAG，在目前现网上也没能针对性展示。JELLY 3.0京东零售体验设计共享平台改版的目的就是外网化并且提升用户与浏览者的效率。以下是JELLY官网旧版和新版本的对比图。

- 改版的核心方向

重内容：明确内容信息层级，突出内容的核心价值

轻界面：去色彩化，轻视觉

以人为本：以用户体验为主，提高浏览效率

整站除了重点功能按钮，其他都是去色彩化，轻视觉，重点明确内容信息层级，提升用户浏览的效率，让用户有一个更好的体验。让用户和平台产生一定的情感连接，提高用户粘性。

- 前期推导

前期根据JELLY的用户群体/平台关键词/情绪，进行页面推到。考虑不同用户的浏览及使用习惯，结合平台关键突出目的。如希望用户在JELLY平台能得到共享学习设计资源，提高工作效率等。再结合一些情绪版块。针对性的设计平台相关页面。

- 品牌渗透

1.色彩

在整站除了一些功能按钮高亮时选用JELLY品牌色红色#E1251B，其他字体或者卡片样式都是黑白灰，无色彩。本身作为内容型的网站，内容封面已经色彩比较丰富，希望用户可以更关注内容本身，提升用户浏览者的效率。

2.图标

为达到重内容轻界面目的。我们采用了线性icon在界面中使用。简约的icon形式在页面重不会过于抢眼，同时也起到提示作用。也与整体轻盈的界面相符合。

3.氛围图

整体色调为品牌色调黑蓝色和红色，提取JDRD LOGO 图形包括圆，方，三角形元素，面和线组合抽象图形，增加品牌感。

4.字体

字体在设计中重要程度越来越高，规范化字体字号层级有助于保证字体的统一感，表现出内容的轻重，还能很好的区分出文本的层级关系，方便用户高效浏览平台内容。同时一款字体也能反应出产品的性格。

- 用户体验

1.效率

a.栅格化布局

遵循栅格系统的设计规律，可以保持整体设计的一致性的同时可以减少设计决策的时间、减少外部的沟通损耗，提升工作效率。JELLY 3.0采用60栅格布局，对内容区域进行60栅格的划分设置，如下图所示。页面中栅格的 Gutter(槽) 为定值，即浏览器在一定范围内扩大或缩小，栅格的 Column(列) 宽度会随之扩大或缩小，但 Gutter(槽) 的宽度值固定不变。

b.卡片与留白

卡片可以作为一个容器封装复杂的内容，使得模块层级区分明显，适配性也更强。大圆角10px的卡片设计方式，整体比较柔和，阴影的使用会增强「点击感」，并且有助于区分界面中的层次结构。新版的卡片更加突出文章封面以及内容标题的呈现。相比原卡片封面的展示面积更大。同时新增了无封面卡片样式。为不同岗位的文章更好的突出内容介绍提供了不同的方式。

适当的留白可以让人在阅读时更加具有放松的心理暗示，并且让整体的界面设计感看起来更加轻量化，这样信息的层次感将更加明确。页面结构上，作者信息做了弱化处理，为文章内容面积提供更大的空间。提高用户的浏览效率。

2.一致性/统一性

对于整个平台，前期建立规范及组件是一个非常重要的事情。因为项目时间节点卡的很紧，并且可能同时多个同学一起支持项目。这对于平台上快速复用规范及组件非常重要。所以我们在模块的排期上除了根据后面前端的开发安排外。也会着重先安排能复用性高的页面先行设计，这样后面也能加快及提高我们的效率，以及解决不同加入同学设计协同问题的一致性。

3.沉浸式体验

a.情感化设计

前期在首页设计上我们也尝试了很多方案，最后我们的落脚点，在平台首屏加入了运营位情感化设计（节日祝福/日常问候/等运营内容），希望可以触达用户内心的小确幸，产生情感的共鸣，增加平台和用户情感链接，让用户对产品更有粘性，让设计更有态度。空状态JELLY图形+拟人化表情的组合使用，增加用户信赖感，同时提高品牌认同感。