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

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

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

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

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

前言:升级背景

1. 品牌力升级

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

2. 产品力升级

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

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

3. 体验力升级

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

京东APP关键版本设计脉络

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

1. 过往版本设计脉络

2. 设计脉络共性

设计策略的延续升级

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

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

始终围绕产品策略

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

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

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

京东APP体验问题总结

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

京东APP9.0核心策略

1. 品牌力设计策略

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

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

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

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

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

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

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

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

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

2. 用户设计策略

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

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

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

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

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

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

3. 认知设计策略

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

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

4. 感受设计策略

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

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

京东APP9.0设计方案展示

1. 用心设计每一眼感受

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

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

2. 用心对待每一个群体

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

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

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

3. 用心打造每一个场景

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

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

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

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

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

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

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

6. 用心简化每一次决策

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

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

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

7. 用心满足每一次闲暇

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

8. APP9.0

 

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