羚珑 - 京东智能设计平台的品牌演变
羚珑是京东零售用户体验设计部自主研发的为解决商家及企业运营过程中的设计效率、品质、一致性问题提供智能设计解决方案的平台
羚珑智能设计平台与于3月进行6.0版本的全新升级。从玲珑到羚珑,不仅是技术上的更新迭代,产品形象的提高升级,更是对整个品牌的重塑和用户价值定义的重新思考…
在本文中,从羚珑平台设计、logo升级及品牌后续的视觉延展方向3大内容,描述视觉侧是如何围绕产品目标开展设计的思路做一个整体的小结与大家分享。


· 明确改版核心目的
旧版本的首页主要是功能的罗列,在命名和结构上都是以内部技术同学和运营人员的角色来划分,对于外部用户,非常难去理解或找到自己所需的服务。使用门槛颇高,页面友好度也较低。改版后的首页,从多维度展示羚珑是什么,已有的服务类型有哪些,对于新用户可以更好且系统性的了解羚珑。
在用户时间注意力稀缺的时代,作为一个工具型的平台,更需要便捷高效的帮助用户实现目标。综合而言从功能的罗列展示转型成场景化运营是本次平台改版的核心目的。

· 根据用户画像针对性的进行平台页面梳理
围绕场景化运营的核心目的,帮助用户高效快速满足需求,首先从用户类型开始分析研究,有哪些用户类型,及他们的核心诉求是什么?
根据对羚珑平台的了解程度的深浅和诉求点的差异,大致可以将羚珑的用户群总结分为4大类型

按用户的诉求分析和提取,以信息架构的内容展示为纬度,将表现层的页面大致梳理成为3类:
1.介绍信息类 / 2.服务列表类 / 3.操作编辑类
1.介绍信息类
全面系统的向用户展示羚珑是什么?
能够提供哪些的服务?

2.服务列表页
突出展示羚珑的核心服务产品,帮助用户快速找到心仪的设计模版

3.操作编辑类
提供便捷的编辑和个性化的调整功能

· 不同页面类型视觉差异化体现
视觉设计是为了让产品目标清晰明确的呈现给用户。所以羚珑平台的设计,除了品牌调性和组件一致性这类基础的视觉原则上,更重要的如何将页面的核心内容按主次顺序在视觉维度上最准确的传递给用户。我们可以看一看如下几个页面的案例 :
首页设计和会员权益页
这两个页面都属于典型的介绍信息页面,视觉核心除了内容的传递同时需要强化平台的品牌调性,建立用户对于羚珑的品牌记忆。

首页大面积的浅色调和关键信息的品牌蓝色结合,干净清爽的风格除了符合用户心智的智能设计平台定位,同时在背景和图形设计细节上的线面结合的手法,凸显羚珑的灵动轻盈的差异化品牌特点。
首屏的深色背景上的图形设计采用线组合的方式抽象表现羚珑服务的运转方式,同时也是5.0版本的首页视觉元素的延续体现。

在展示图形上的增加了Z轴的空间感的设计,将抽象晦涩的技术概念的图形更趣味性的表现,同时更强化羚珑的灵动多样性的品牌感受。

羚珑会员页的设计上,在保证品牌一致性的同时带有运营属性,在氛围的设计元素上更强于首页。为了体现会员的尊贵感和服务的特殊化,在颜色和图形上,新增亮黄色色作为会员专色,并附以会员V图形的结合。在其他场景里的会员权益和服务页也可以做延续的视觉统一表现。

在会员权益页面的各楼层信息中,会员专色作为高亮色在关键信息上的使用,再次帮助用户对于会员色的认知理解。

主图场景页设计
作为场景服务的推荐页,核心设计目的是展示羚珑的产品模版本身,模版的颜色和设计多样且更新频次较高,在设计上有别于信息传递页的品牌调性体现,主要采用白色背景,在楼层上采用E点视觉做一些视觉切割,避免用户视觉疲劳的同时,也可以体现楼层内容的差异化。
品牌主色调运用在hover动态效果,作为页面操作的反馈色

编辑信息页及高级编辑器
这类操作界面的设计核心诉求是快速执行,完成目标。操作组件上尽可能保持视觉和交互一致,通用组件极大降低用户的学习成本。在控件的视觉表现上在颜色,描边等细节上保持与品牌调性的一致性。

总结而言,不同页面的差异化设计核心原则是在保证内容传递的目的和美学两个纬度上找到最适合的表现方式。

品牌升级正如动植物一般,会经历从初创、到成长、到成熟.、到升级的过程。从定位、设计、测试到进入市场营销推广开始,积累形成一定的品牌资产,然后在此基础上一步步发展壮大直至繁盛,最后品牌不断更新迭代,整个过程是一个品牌升级与更新的过程。
· 新旧LOGO的传承和演变
『玲珑』更名为『羚珑』
从器到兽,是一个质变的过程,是在过去一年半的时间中,不断积累,不断变化,最终从设计工具,演变成提升设计效能与效果的智能生命体,定位商家经营的设计合作伙伴,为商家及系统平台提供设计全面支持。

原logo使用『玲珑』首字母“LL”结合,六边形为立方体剪影演变而成,“LL”字母在立方体里构成二维与三维的视错觉。简约的构成,来诠释玲珑是一个小巧而细致的器。
由于品牌名称及定位的更新。原logo以不满足诠释羚珑全新定位。全新『羚珑』更加灵活、敏捷、智能、具有生命力。故从『玲』升级为『羚』,质变成羚羊。

· 动画演绎
动画以以下关键词出发,对此次品牌升级进行演绎:
生命力:从『玲』到『羚』的形变,人工智能AI的灵活机敏
连续性:快节奏展示『羚珑』的智能强大
视频分镜展示





完整LOGO演绎视频:

羚珑项目包含平台、品牌、运营等多维度的视觉设计,为保证品牌各维度视觉输出的统一性,除了基本的VI规范,同时品牌视觉系统和整体视觉表现更需要进行梳理和规范。品牌整体的应用规范将依托与新品牌调性为基石进行逐步的具象表现。

· 品牌感受
羚珑新品牌感受整体给人带来的感觉是轻盈简洁,画面干净利落。想给商家带来轻便的感受。给商家及快速又简单的设计支持是我们的品牌宗旨。因此我们提炼出3个关键词来突出品牌感受。



· 视觉表现
结合提炼出的品牌感受,转化成表现形式。利用LOGO拆分六边形及抽象羚羊线条作为延展。以及点/线/面组合形式进行表达品牌感受。
视觉表现梳理便于后续多人协作时保证品牌整体调性输出的一致性。


以上是本次羚珑改版的全部小结分享,感谢大家的耐心阅读
· THANKS ·
- 京东智能设计平台羚珑:Ling.jd.com -
















































































