汽车之家APP 10.0 改版设计总结

这几年,汽车之家经历过无数次大大小小的改造,而正式的来讲,这是它第三次大的蜕变,这次我们对它进行了尤为重要的,一次从内到外的改头换面。今天想和大家分享一下,汽车之家 APP 10.0 改版升级背后的设计思考

汽车之家APP 10.0 改版设计总结

项目背景&现状分析

以注重修炼内功著称的汽车之家,在本次10.1.0版本的外在视觉层面也狠下功夫。主色调上,新版本App用色依然沿用汽车之家的品牌色“蓝色”作为主色调,同时增强了饱和度和明度,给人清爽、冷静、商务的感觉,向用户直观传递出汽车之家的实力底蕴以及可信赖的品牌价值。

汽车之家APP 10.0 改版设计总结

以用户诉求为核心

通过用户研究,深入挖掘用户核心诉求,愿景是通过升级产品体验最终减少用户痛点,实现更好的服务。

汽车之家APP 10.0 改版设计总结

用户体验升级原则

制定以品牌专业化、服务高效性、亲和包容性、极简年轻化为原则的设计标准。

极简年轻化(极简化)

减少无关的设计元素对用户目标的干扰,严格控制页面信息架构和路径层级。视觉元素更符合当下主流用户人群。

服务高效性(精准化)

根据用户需求突出信息内容,让用户更快找到需要的内容。

亲和包容性(情感化)

有好的引导用户操作,帮助用户实现当前目标,为满足不同用户需求而设计。

品牌专业化(颜值化)

使用一致的视觉语言,并在扩展时考虑元素与品牌的融合。

汽车之家APP 10.0 改版设计总结

重新定义视觉风格

从色彩、布局、图形、图标、动效等维度着手视觉风格的重新定义。

汽车之家APP 10.0 改版设计总结

色彩-年轻化

在品牌色上希望传递「更年轻」的品牌理念。我们大量收集体现「年轻」的场景进行多轮讨论筛选,提取色调,结合情绪板,最终提炼并定义了我们的品牌色。

汽车之家APP 10.0 改版设计总结

代表科技和可靠感的蓝色与代表青春与创意的橙色碰撞交融,以给用户带来新的视觉享受。在设计中,使用色彩联想,是做设计必不可少的一部分,蓝色作为汽车之家的产品色,给人清爽、冷静、商务的感觉。此次增强了蓝色的饱和度和明度,而饱和度和明度越高越为前进色,目的在于增加其“诱目性”。色彩,并不只是考虑特定的颜色而形成的色值,而是一定会与其他颜色组合,可我们的组合的方法就是“对立的统一”。使用饱和度和明度同样高的对比色橙色,使画面和谐。

汽车之家APP 10.0 改版设计总结

为了强调设计,也必须考虑其颜色的配置方法。因主色调不能大面积使用,情感表达也不够全面,而辅助色虽不能替代主角色,但从视觉表现力上来看,辅助色可能拥有与主色调一致的视觉吸引力,服务于主色,却不影响页面的节奏感。

布局-极简化

除了颜色上的耳目一新之外,更重要的是加大留白,页边距、卡片间距、字间距等,布局上进行整体的调整,使得页面的呼吸感更加自然,阅读信息更加顺畅高效。通过留白控制间距大小,可以清晰的划分模块层级,同时界面看起来也更加透气、富有张力。

极简化根本目的是最大化的突出内容本身,让用户的注意力聚焦于内容主体,而非界面元素。如果能应用好极简化设计思想,突出重要信息和功能,则能极大提升产品整体的易用性。设计师并不能靠从现有的内容中移除一些元素而达到极简的设计,而需要从设计的本源去重新考虑。

汽车之家APP 10.0 改版设计总结

图标-更有趣

图标对比旧版,采用了小圆角的设计,使其更具友好性。糖豆图标简化配色,运用对比色碰撞叠加的手法,打造汽车之家品牌专属的图标风格,提升品牌辨识度。

汽车之家APP 10.0 改版设计总结

动效-微动效

微动效的应用提升了界面的趣味性,丰富的动效展示也能增加情感化的用户体验。

汽车之家APP 10.0 改版设计总结

情感化-调性重构

替换情感化主人物,起因首先是为了整体风格体系化,还有一个原因是旧版的小恐龙宝宝形象,比较低龄,不适合产品定位。新的图形化的风格是采用了线面结合的手法,风格紧随设计趋势,但是留下隐患问题就是没有融入品牌IP的形象,后期我们会继续对恐龙宝宝做优化处理,毕竟IP更能代表品牌形象。

汽车之家APP 10.0 改版设计总结

框架梳理

我们对于整站全部页面分业务分频道进行了梳理和重构,对相似内容和类型的页面进行了横向的对比,不同的业务线可以有各自的功能和侧重点,但页面架构和重点操作区要保证汽车之家体验的整体一致性。

汽车之家APP 10.0 改版设计总结
汽车之家APP 10.0 改版设计总结

首页体验升级

旧版的首页问题:布局复杂,业务分发能力差,用户不清楚看买用的定位,业务可扩展性差,导航多且乱,内容难找,广告多,推荐内容不够精准…

1.0的改版只是表现层的升级,搜索栏和焦点图的剥离,目的是为了2.0的改版做铺垫。

汽车之家APP 10.0 改版设计总结

本次首页2.0的改版,提炼看买用核心频道,简化信息架构、布局和导航,突出核心业务,删除多余入口,支持入口定制化,增强业务扩展和支持能力。

汽车之家APP 10.0 改版设计总结
汽车之家APP 10.0 改版设计总结

按场景进行业务分发,以高效满足汽车消费者看车、买车、用车为宗旨,以提升用户便捷浏览、全链条场景体验升级、流量价值最大化为导向,让用户以渐进方式深度感受用户产品的体验和服务升级。

论坛创新尝试

论坛旧版页面层级多,内容卡片杂乱、冗余,结构化程度低,设计呈现过于平庸,互动形式单一,缺少主题及场景化引导,社交形式缺乏创新,与首页同质化严重。

为了打造一个年轻化的社交场景,新版设计形式更新颖,使用当前流行的瀑布流风格,减少页面层级与模块间距,强化图片和视频元素,让用户容易沉浸到内容上,强化精选分类,保留老用户的浏览习惯。

汽车之家APP 10.0 改版设计总结

选车频道优化

旧版的选车首页,问题是视觉层级不突出,功能入口不够精简。选车频道1.0的改版主要是UI上优化了视觉层级,整合工具 简化页面内容,漏出用户浏览历史,缩短用户路径。

车系页的1.0改版,目的在于设计风格统一,提高友好性和易用性,优化全景颜色空间,加入投影和动画,体现科技感。优化功能布局,使页面更紧凑,布局更合理。

汽车之家APP 10.0 改版设计总结

个人中心改版

对页面层级及UI风格进行优化,区分图标分类,模块化展示,去掉区块阴影使页面结构更扁平化。站在用户的角度,突出用户功能,而弱化业务入口,提升用户体验。

汽车之家APP 10.0 改版设计总结

思考小结

改版是一个浩大的工程,且永不停止,需要不断探索与创新。

从前期用户调研总结现有问题,到明确设计目标,确定品牌调性,再到结合产品需求落地执行,最终实现真正的体验升级。

本次改版也只是体验升级的开端,后续组件库的完善及产品的优化,规范的同步与推进,都势在必行。之前步调比较快,一些设计还需要深入的去打磨沉淀。

业界动态

深度解析App中的卡片切换与手势关系

2020-11-16 10:18:29

业界动态

套用功能如何分析差异性,做定制化套用?

2020-11-16 10:42:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索