赞助商
立即赞助

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

品牌设计3年前 (2021)更新 流光
2.2K 0 0

2020年上半年我们对京东国际频道进行了品牌视觉的全新升,希望通过品牌化及体验升个方向实现加正品心智,提升频道访问量,品牌化的业目标。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

项目背景

京东际频道流较低,用户对际品牌未形品智购买习惯。2020了好的承接多自黄金流程全站的流,周庆618提供丰富的运营支持,需对频道行改版。

1. 旧版页面

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

2. 竞品分析

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

3. 目标用户

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

“ 设计机会点 ”

通过研报告我们发现,京东国际的目标户群中,女性户占多数,结合收集到的相竞信息,因此在与务产沟通中设计侧可更多注女性,考虑女性户需求,美妆、个护、食、母婴和时尚为 ;并且在整体的频道设计格中需注年轻时尚且追逐质的倾向,升级整个频道的视觉调性。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

设计探索

1. 计定位

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

2. 品牌关键词探索

设探索之初,我们召集了团队内设师共同行了脑风暴。畅聊了每人目中所理解的“际”感的产品,以及目中可用简单的词汇或图形化描述的相关际元素。 此处感谢@黄松伟老师给予的设指导~

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

3. 牌键词取

通过产定位分析,结合头脑暴中大碰撞的灵感“碎片”,我们最终炼了几个键词:

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

4. 根据关键词探索衍生情绪图

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

设计目标

在旧版分析也提到,频体设计风格缺乏品调性,缺少可以让用户记忆品元素,法立京东国品认知;并视觉信息层级混乱,设计规范性,设计沟维护成本高。

结前期对用户及竞品的析,以及一系列计的探索,因此确定将从「品牌化」及「体验升」个方向进行国际频道的品牌视觉全新升,实现加正品心智,提升频道访问量,品牌化的业目标。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

1. 品牌符号 / SYMBOL

在个京东国品塑造过程,我们在思考如何创京东国频专属品符号?并为此邀请了组内所有设计师进了多轮脑暴及图形绘制和评选。

这部也是整个品牌升级过程设计挑战,翻现有设计是件具有风险事情,为原先设计元素已具备定识度;考虑到个品元素翻新用户刚刚立认知度影响,这部分内容仍在持续进

整个过程中总共脑暴产出100+的品牌符号,也谢在这过程中提供脑细胞的大家~

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

最终,在向频道产品及业队沟通别输出了个方向的提案:

2. 色彩体系 / COLOR

品色 “紫”“东”来

京东国品色在18年及19年分品名称变换进过新定义;18年品色结合时海豚形象体偏粉,19年品色偏深红。两者均区于京东app主站品色,业务反馈女性化特征过于显性,深红色感知会显沉稳。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

基于初期京东国脑暴而关键词,以及相关情绪图,结合京东国用户画像(以线城市,高学历高收入追求品质生活女性用户为主),比色情绪,我们最终将京东国品色更新为偏性更品质和优雅紫色。在视觉细节上,将原先版本饱和度提高,增强了色比,并基于品色确定衍生色,用于后续相关延展使用。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

辅色 “丰富”斑斓

每一颜色对应的渐变色,可用于图标及各品类界面的呈,引导用户识别,力求打造轻质感亲自然的精致品质。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

3. 字体体系 / FONT

旧版的首页中虽了京东朗正体作为楼层标题,但由于该字体字形的缘故,在重复现时会显得标题小且易识别;版首页中保留了频道logo中母牌字体基因,将各楼层标题调整为苹方,此字体是移端的字,棱角分明,干净利落,具有质感。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

在字层级梯上拉开字重及字号例来容的可读性,字色分在原有基础上了纯,整体界面重点更突,使层次更强烈,更快吸引眼球。

4. 栅格体系 / GRID

旧版页面模布割裂, 屏效低,上左右的间距统一,视角噪音大,缺乏产调性,成产缺质感,从而降低了户的信任。本次的牌视觉升级重定义了栅格系统,希望通过骨骼重构赋予各个视觉元素秩序感,在升坪效的同时,使页面布更统一。

圆角卡片

在走查旧版视觉布及对当流行的UI格调研后,我们将各模间的间距进行统一,采更圆润的圆角处。更圆润的圆角够体现柔和及年轻,与当硬件设计靠齐。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

结构透气

通将各楼从内容上进行重组,削弱页面的分割,使级上更加清晰,同时增加空间的用率,在大卡部分统一横向及纵向的间距,在小卡时收拢间距,使之更为整。在证视呼吸感的同时,提升整浏览顺畅度。减少界面中复的装饰元素,使频道更轻量化、精致感。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

5. 图标体系 / ICON

百宝箱图标

旧版百宝箱图标均为异性拟物风,如需替换设计成本高,难以实现规范化;业务类图标及品类图片区分不明显,法从视觉上观辨。新版在规范统背景色值后做统处理,并选用了实物图片,品类属性目了然。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

底部导航图标

旧版底部导航图标均直角处理,会显得硬,且部分图标的语义并不符合。

新版图标采取断风格,在转处做圆润倒处理,与主站首页风格保持统前提下也延续了频体调性。

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

6. 规范体系 / GUIDELINE

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

大厂是如何做改版的?来看京东国际频道品牌升级的实战案例!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

越来越多的品牌和企业开始在自家的网站和营销推广中使用吉祥物,今天的文章我们结合实例来聊一聊吉祥物的运用。 在设计的过...
ui设计
58UXD:在一个追求内容至上与体验至上的时代,设计的表现更加简洁直白,这正如著名建筑设计师密斯所说过的:less is more。不...
58UXD
@菜心设计铺 :前几天做了《暴风影音 App 重设计》,不过还没做完,所以今天主要讲讲我寻找改版切入点的方法——品牌探索。 到...
ICON
2019 年是造物节的第四年,也是品牌设计的第四年,前面每一年设计师们都会利用自己的认知,理解和专业给出各自的答案。今年造...
AlibabaDesign
​​@N可可洛N、@爆炒地瓜​​​​:Ramotion (https://dribbble.com/Ramotion)是一个从事品牌和 UX 设计的专业工作室,服务客户...
专访
国内汽车后市场拥有近3亿的汽车保有量,市场规模高达1.3万亿,汽车维修厂作为后市场重要角色,在运营的过程中存在客户引流难...
交互
对于设计改版大家并不陌生,每个项目的改版中都会有不同的方法或者流程,本文重点在于分析我们在「手机QQ游戏中心」改版中使...
手机QQ
@Jenny黄静雯 :​​​相信很多同学会有,看理论的时候觉得很有道理,看完后却不知该怎么实践,久而久之便会产生「看过很多设计...
ICON