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
百宝箱图标
旧版百宝箱图标均为异性拟物风,如需替换设计成本高,难以实现规范化;业务类图标及品类图片区分不明显,法从视觉上观辨。新版在规范统背景色值后做统处理,并选用了实物图片,品类属性目了然。
底部导航图标
旧版底部导航图标均直角处理,会显得硬,且部分图标的语义并不符合。
新版图标采取断风格,在转处做圆润倒处理,与主站首页风格保持统前提下也延续了频体调性。