2020 年未过半,我们就看了许多从前从未见过的人和事,体验了许多从前从未想过的经历。几个月来,「历史性的」、「百年难遇的」、「前所未有的」、「恐慌性的」、「灾难性的」……这些词儿,如同弹幕一般,不停地出现在我们眼前。短短的几个月,许多人变了,许多家庭变了,许多事情变了,但生活还在继续前行。经历过特殊的时刻,在京东的我们,比以往任何一个时刻都要忙碌,也比以往任何一个时刻更能清晰地认识到:「京东的价值、京东给社会的力量」和「我们的责任」。

我们怀着期望,期待我们每一次的改变,都能给你们带来更多的能量。

2020 年初夏 618 来了,京东的生日之际,京东 APP9.0 全新升级,希望你们会喜欢~

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

前言:升级背景

1. 品牌力升级

5 月 20 日,京东零售集团宣布进行品牌升级,由原来的「多快好省」升级为「不负每一份热爱」。作为京东集团品牌战略承接的主阵地——京东 APP,将基于全新的品牌精神,着力于满足消费者的多元化、个性化的购物需求,持续对其创造更大的价值。用户在京东不仅仅能享受到好的购物体验,还能享受到更丰富、更用心的产品和服务。通过对京东 APP 不断地迭代升级,我们也向社会、向消费者诠释着京东的每一份用心;京东 APP 也承载着每一个家庭、每一位消费者对美好生活的向往,不负你、我、他(她)的每一份热爱。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

2. 产品力升级

未来的 1-3 年,京东将继续在低线市场、低渗透品类上提速;通过对新老渠道、新老内容的矩阵开拓和整合,将单纯的线上购物,升级为全场景的复合式体验;通过新玩法的打造,增加用户的触点,提升粘性和频次。为了更好地承接京东战略与方向,京东 APP 的产品力也亟需升级。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

  • 细分人群的刻画:以千人千面的颗粒精细化标签为基础,从人、货、场的维度,对标签再次解构、重组,打磨和完善的垂直人群模型;基于垂直人群模型,整合APP 内的全流程资源,为垂直人群打造更完整、更流畅、更场景化的产品体验。
  • 线上线下的场景打通:基于地理位置的到家商品、门店、商超,全面入驻京东 APP,线上一键下单,线下 1 小时极速送达。
  • 更简单的购物体验:实时预估商品的最终到手价,价格优惠清晰明了,支持用户在购物车一键领券购买,结算时极速支付,让用户购物更简单。
  • 更多元的产品形态:直播玩法升级,全流程直播渗透,边看边买好货到家;内容组织全新升级,打造内容和商品榜单,为用户推荐当前最热的话题和商品。
  • 更有趣的互动玩法:打造更多的围绕社交互动功能的场景,通过更丰富的内容平台及更好玩的互动玩法,让用户来到京东不只是购物。

3. 体验力升级

除了品牌力、产品力升级,每一次全新「京东 APP」的到来,也在为消费者不断提供更友好的使用体验力。我们也非常期望能够借助这次版本升级,对京东 APP 进行既精细、又完整的刻画和打磨,期待通过京东 APP9.0,与消费者进一步拉近彼此的距离,让体验更加细腻、更加灵动,全面升级消费者在京东 APP 的体验力。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

京东APP关键版本设计脉络

结合京东 APP9.0 的品牌力、产品力、体验力的升级背景,我们追本溯源,探寻京东自己的脉络。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

1. 过往版本设计脉络

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

2. 设计脉络共性

设计策略的延续升级

基于京东 APP 的核心目标,围绕购前、购中、购后三个环节强化用户内心感知,承接京东的战略在 APP 内的落地。

京东 APP4.0-5.0 主要围绕京东品牌对用户的传达感知进行输出,建立京东的品牌形象;京东 APP6.0 后开始加强场景能力,逐步打造可以满足千人千面的电商设计平台,直至现在,扩宽至全渠道场景,为用户提供更全面、更加细分的体验。

始终围绕产品策略

设计的迭代和产品思维绑定,始终围绕产品策略,一起共建用户的同理心;通过深耕设计解决方案、持续验证推导,来打造值得用户信赖的优质购物体验。

设计将各模块的功能与价值主张相结合,彼此进行联动,保障从产品到交互到视觉,到最后的方案落地都能围绕一个核心目标去服务。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

京东 APP 设计始终都是以「产品、业务目标」为核心,围绕「品牌」「用户」「认知」三大方向,结合「设计趋势」来发力;但基于不同的情景、当下 APP 所处的环境,设计改版的侧重发力点有较大的差异;一般来说是「用一个版本来解决 1-2 个的重大体验问题」。

京东APP体验问题总结

我们结合京东 APP8.0 以来的用户研究报告、用户反馈、各关键模块的数据、竞品对比,从「品牌」「用户」「认知」这三大维度着手,梳理京东 APP 的核心体验问题,进而推导出京东 APP9.0 要解决的核心问题,作为定义京东 APP9.0 设计策略的关键依据。

1. 品牌设计 ——京东APP8.0问题提炼

在细分用户的研究中,用户高频地提到 APP 的品牌感知过于冷静、直接、有距离感,氛围上不够活泼,也存在「京东是正品但价格会不会更贵?」的疑惑。打个比方,可能同样的价格,吆喝声越大,感受上会觉得大声的更便宜、更有爽感。

视觉定义上,一方面,栅格定义过于精细,影响了信息传递的流畅度,需要针对导购类、流程类场景进行差异化删减;主流程内的部分模块留白偏多,拉低了一定的屏效;另一方面,字体的部分梯度比较多、也比较相近,虽然视觉上较为协调和统一,但视觉噪音较大,对主体内容也有比较大的干扰。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

人机交互时,过于直接地强调目的性,品牌灵动感待提升。

通过数据测试发现,核心模块的引流效率还有较大的提升空间;两个例子:1、可通过「严格控制变量,测试图片素材的引流效率」,提升「图片素材」的质量,优化核心模块的设计规范;2、通过「图片素材」的质量提升,加上对「坑位容器」动态打磨,经过数据测试,增强品牌灵动感的同时,可进一步提升屏效。

2. 用户感受 ——京东APP8.0问题提炼

细分垂直的用户群,在全流程内的感受上存在割裂感;各个垂直人群在 APP 主流程内已初步形成大的体验闭环框架,但体验闭环的细节还有待补齐与提升,对垂直人群的「权益和身份」的传达还需要在情境上更加一致。举个例子:未开通 PLUS 会员时,高净值人群对 PLUS 身份认同感还有较大提升空间。

商品的活动促销信息展示(时间、最优价格)层级隐藏较深、活动促销计算复杂难以理解,用户促销感受比较弱,所谓酒香真是怕巷子深。我们通过「用户在不同平台内促销感知」的用户测试对比发现,虽然京东的价格最优惠,但由于在表现层上没有进行强调,导致用户在价格感受上存在偏差。

产品感知较理性,主流程内氛围不够活泼,有距离感;这一点,新兴市场用户的感知尤为明显。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

3. 认知统一 ——京东APP8.0问题提炼

页面框架一致性问题:主流程过往的版本较为侧重于单一模块内的设计,各个模块间堆积了较多设计不统一的问题。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

页面内模块一致性问题:主流程的各个模块内,由于 「新旧版本」「需求不断叠加」等原因,也存在模块内的统一性问题,这增加了用户接受信息的负担。举个例子:APP 结算页在过去的一年内新增了较多的功能与提示场景,由于业务时间有 deadline,很多需求会采用体验降级方案,即用现有控件来设计方案,使得最终方案可能体验不够好,而这里埋下的体验隐患,日后依然要找机会解决。

业务和功能类型不断增加,这会导致页面相对臃肿,这时核心流程的框架亟需重新定义、向三维空间借力来舒展信息架构。

APP 整体的故事性连接还有待强化,货架式的流转只是骨架;各频道内、各模块内也应基于 APP 骨架保有自己横向与纵向故事线,在 APP 内注入故事性的血肉灵魂;让用户在 APP 内流转时,认知更清晰、体验更丰富。

京东APP9.0核心策略

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

1. 品牌力设计策略

延续、强化京东品牌,构建、升级「京东设计语言体系」 ,提升屏效。通过统一的强调,使品牌可知;通过情感化、IP 化、故事化的表达,使品牌可感。

色彩体系:延续京东品牌调性,主打京东红的品牌色,适当地通过增强配色、减少留白,在保留京东辨识度的同时,通过丰富的色彩体系降低 「冷淡、有距离」的感知。

例如:结合首页及推荐位的坑位颜色,拉通营销色彩规范,HSB 平衡所有色彩梯度;并结合算法给出冷暖色排布规则,区分内容丰富画面(包括首页核心楼层/我京工具与服务/用户资产我的钱包)及核心流程 HSB 平衡,色环关系,品牌色的延伸主导,再到单色、渐变的规律体验,全路径的感知;拉通京东品牌色同阶梯色环,推导所有辅助色色值,根据透明度及饱和度叠加,得到色彩使用场景及渐变关系;提炼营销体系核心规律,营销坑位色彩排布关系,冷暖色阶搭配,引导用户识别。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

营销坑位色彩排布关系,冷暖色阶搭配,引导用户识别。(核心楼层为例)

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

字体体系:延续京东的字体建设,延续性的使用京东朗正和正黑体、加大主字号、精简字阶,拉开字体层级梯度,让用户的关注点更聚焦。针对下沉首页等重点业务采用异形字体,标题与利益点字号字重比重更大,强化营销引导。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

icon 体系:线性图标全面 iconfont 化,减少 app 的体积;图标设计更简洁,减少隐喻的手法,让用户「一眼即懂」;平衡视觉的体积差,建立一致性的图标绘制尺寸规范;适当的设计图标互动的微动效,增加趣味性,带给用户「愉悦感」。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

栅格体系:在屏效留用率上,基于 8.0 基础定义扩展 12 、24 的倍数关系,栅格做相应的简化;比如在首页/搜索/商详等页面,利用删格缩减间距,提高单屏屏效;首页核心楼层,利用减少间距,放大商品图片,压缩整体楼层高度,使核心内容更加突出,更便于用户识别到有效内容;

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

优化界面布局,巧用视觉动线,利用人们阅读的 f 型习惯,聚焦用户阅读内容;

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

素材设计体系:一方面,打磨坑位容器,采用动静态容器相结合的手法。另一方面,打磨坑位素材规范,动静态素材结合使用。同时,尝试压缩容器高度,与羚珑智能设计系统深度合作,进行素材和页面的测试,对运营设计的素材规范进行打磨,在容器高度压缩的同时提升素材质量,保证浏览效率不下降。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

2. 用户设计策略

细分用户群体,增强氛围感知、让体验更丰富,层次更清晰。根据细分用户的习惯性、常识性认知,适当地把产品进行分层,让可知可感更加贴合用户;基于全局的统一,有意识细分用户的体验,加强各垂类用户最在意、最可感受的局部差异,从而让体验更加丰富。

PLUS 会员:提高 PLUS 会员身份认同,通过全流程内 PLUS 会员皮肤、氛围品牌一致性露出, 强化「PLUS 专属优惠价格计算」 「PLUS 到手价强化」等权益的感知,进而强化会员身份的感知、加强对 PLUS 会员的认同感。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

家庭银发人群:渲染家庭情感氛围,强化优惠及促销的利益感知,简化整体的使用流程,中心化界面采用大字号,为银发人群设计。

新人用户:打造新人专属首页,强化新用户引导,多流程定投新人大礼包、发放新人专属优惠,全方位助力新人用户转化。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

校园用户:着重打造年轻化的视觉氛围,拉近与校园用户的距离。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

新兴市场用户:扭转用户品牌认知,基于特定人群偏好的氛围组织界面,提升流量分发效率。针对促销较为敏感的人群,通过设计的强调,加强用户低价感知,强化活动促销感知,打消购买顾虑。

3. 认知设计策略

品牌金字塔理论认为关于品牌认知的一系列表象指标,如认知度、美誉度、购买率、满意度、推荐率等,实际上反映了消费者对一个品牌认知的深入程度;这个理论,同样可以适用在产品的用户认知上,认知是一切的基础,产品的用户认知做好了,转化、推荐、满意度才能做好,能够被认知的产品更容易加强情感连接;反过来,不容易被用户认知、认知有负担、信息架构表现层复杂的产品,用户理解起来可能就有障碍,再叠加情感连接的设计,那有可能就是体验的自嗨了。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

京东 APP9.0,将针对用户的主流程,骨骼精细化重构、优化流程动线,给用户提供一致性的体验,让认知减负。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

4. 感受设计策略

消费者在只有认知的时候是理性的,而基于认知产生好感的时候就会变成感性。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘! 京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

在简化用户的信息认知的基础上,我们将强化打造「京东语言的品牌动效」在核心流程内的模块感知,结合产品的产品领域动态衔接的诉求,在设计上考虑动态效果对「整体上下文,故事连接性」的亮点承接,让用户理性购物的同时,感受到感性的愉悦。

京东APP9.0设计方案展示

1. 用心设计每一眼感受

设计策略:延续、强化京东品牌,完善并深入刻画京东设计语言;通过设计的语言体系,提升屏幕效率,从而带动流量分发效率、运营效率的提升。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

首页视觉风格焕然一新,更灵动、更轻松。(通过 IP 和品牌辅形融入、优化色彩体系等方式,强化京东品牌;通过优化栅格系统、字体系统、色彩体系、动态效果,让界面的信息更加清晰,界面感受更灵动)

2. 用心对待每一个群体

设计策略:细分用户群体,增强氛围感知,让体验更丰富、层次更清晰。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

设计要点:打造家庭专属购物体验,和家人一起在京东开心购物与互动。设计上通过暖色调和插画的铺陈,渲染家庭情感氛围;同时,界面采用更大字号,为父母量身定制。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

设计要点:打造 PLUS 会员中心化与去中心化的购物体验链路;通过设计走查与用户测试,填补 PLUS 会员在全流程内的品牌、信息触点缺失;同时,从品牌、视觉、交互三个维度,统一设计语言、语境、对话方式,让 PLUS 会员在各个体验触点都能感受到一致的人机交互体验。

3. 用心打造每一个场景

设计策略:基于京东设计语言体系,构建场景;骨骼精细化重构主流程,构建「场景动线」,让体验更流畅。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

设计要点:京东到家、便利店、商超、药品、鲜花等门店商品全面入驻京东 APP;用户在主流程内即可以直接搜索下单附近的门店商品,下单后最快 15 分钟内便可送达;由于到家场景依托于主流程,我们在设计时期望用户购物动线能与主流程统一,在商品池打通的基础上,体验上也能完美融合;同时,设计上需结合 LBS 场景特点,在主购物流程中,强化 LBS 与商品、配送的关联,突出商品促销与门店配送时效。

4. 用心打造每一条动线-多元化导购

设计策略:基于「京东视觉语言体系」,细分用户群体构建导购方式;根据用户特性,强化放大「多元」的体验。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

设计要点:直播全面渗透,全流程强化直播触点,增大直播的分发场景的用户接触面积;同时,通过动态强化、设计强化的手法,加大对商家私域直播的引导,完善直播场景的体验。

5. 用心打造每一条动线-购物动线优化

设计策略:基于「京东视觉语言体系」骨骼精细化重构购物动线,统一交互、视觉语言,视觉降噪,让认知减负。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

6. 用心简化每一次决策

设计策略:关键信息强曝光,统一交互视觉体验;让认知减负,决策更简单。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

大促氛围优化:在主流程内突出大促的氛围感知,强化搜索列表、商详等主流程内的大促氛围;结合大促情绪指数设计氛围,逐渐调动用户的热情。根据用户的身份、商品的特性,在设计上突出重要信息,例如强化 PLUS 会员促销腰带等;同时,借助设计规范和设计组件,页面内弹层更加容易拓展、可自由配置。

到手价场景展示:商品详情、购物车内强调商品到手价,在设计上突出优惠结果的传达,让用户一眼便知。

7. 用心满足每一次闲暇

融入品牌、IP 元素,用心打造新颖、有趣、持续的互动玩法。

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

8. APP9.0

京东 APP9.0 是一个新开始;我们将用未来的时间,用心跟大家诠释,京东全新的品牌价值主张「不负每一份热爱」。用心对待、不负期待、不负热爱,我们在路上……由于篇幅有限,本文就不展开分析详细的设计方案了。

更多京东实战案例:

欢迎关注「JellyDesign」的小程序

京东APP 9.0 是如何改版设计的?收下这份官方的完整复盘!

点赞 35
收藏 129
继续阅读相关文章

发表评论 已发布 11

还可以输入 800 个字
 
 
载入中....
11 收藏