首页

碧家App重构

前端达人

赶在春节前给2020一个交代

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏


转自:站酷

作者:小太阳AZ


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

《2020客户旅程调查报告》

周周

640.png

题图来自Saurageresearch



编者按:抱着一定不能拖过农历新年的目标,第一份客户旅程专题调查报告终于出炉了。要再次感谢近千名同行的参与,以及Forrester、益普索、UI中国和CMO训练营给与的支持。很高兴看到很多企业在客户旅程方法上的积极进展,大大超出了我的预料。也权将这份报告作为一份礼物,告别一言难尽的2020,祝福即将来临的新年!


前言
Foreward


数字化技术的迅猛发展,导致触点和交互的爆炸式增长,从单一的用户体验(User Experience,UX)走向多维的客户体验(Customer Experience,CX)成为必然趋势,而客户旅程(Customer Journey)将成为数字化体验最基础、最核心的要素,对客户旅程的管理能力是企业客户体验管理能力的基石。它包括了企业在触点管理、客户旅程地图绘制、客户旅程分析、客户旅程编排等一系列进阶能力。客户旅程不仅可以用作为研究和设计的辅助工具,同时也是数字化时代贯穿于企业战略转型、文化建设、体验设计交付、测量等各环节的运营模式的总体框架,它将是企业开展所有体验相关工作的第一步。
客户旅程的概念上虽然非常简单:它是一段时期内,客户与品牌在一系列触点上交互的总和,但是在具体的应用中却非常灵活多变,在应用范围、层面上各不相同。为了了解目前国内企业对客户旅程的认知和应用情况、取得的实际效果、存在的困难和挑战,以及未来的应用意愿,中国用户体验联盟联合Forrester、益普索、CMO训练营、UI中国在2020年开展了客户旅程专题调查,旨在了解国内企业在客户旅程的认知和应用情况。正在或者计划开展客户旅程工作的同行和企业,可以从本调查报告中更进一步了解客户旅程所能起到的作用,目前在应用中存在的实际问题和挑战,从而更好地选择工作的切入点,制定整体的工作框架和策略,从客户旅程方法中获得更加长远的价值。

目录
 Index


01:关键结论
02:总体认知与应用情况
03:如何绘制客户旅程
04:客户旅程的应用效果
05:下一步的使用意愿
06:谁参加了调查

01:
关键结论
Key Takeaways


本次调查共有961人参加了调查,被访者来自各种规模和各个主要行业的企业,通过对调查数据的分析,在客户旅程的现状和趋势方面,有以下主要的关键结论:
  • 企业对客户旅程总体的认知与应用比例为25%,属于初期水平。2C类企业、大型企业、金融行业对客户旅程的认知和应用水平明显高于其他类型的企业。大多数企业在最近两年才开始尝试客户旅程方法,主要由研究、设计、客服部门在主导客户旅程的应用,客户旅程地图的绘制频率大部分是每年或半年绘制一次

  • 企业目前主要将客户旅程应用于客户需求分析、产品和服务的设计、以及客户旅程测量与分析等领域,并在提升客户满意度、促进以客户为中的企业文化,以及提升营销和运营的转化率方面效果最明显。大部分企业对认为客户旅程有积极的效果,极少给出负面评价。客户旅程方法使用时间越长,客户旅程地图绘制频次越高的企业获得效果越明显,并且2B企业比2C企业获得效果更明显。

  • 虽然目前由市场部门(包括营销、销售和品牌部门)主导的比例较少,但由市场部门主导客户旅程应用获得效果明显好于其他部门主导的情况,由客服部门主导的效果低于其他部门。这与MyCustomer在2018年在欧美的研究结论相反,这可能说明市场部门在客户体验领域的主导权在逐步上升。

  • 对于未来一年的使用客户旅程的意愿,虽然各类企业对客户旅程方法的效果表示肯定,并且明确表示不会使用的比例很少,但相当比例的企业存在较大不确定性。存在的主要困难和挑战包括专业知识、方法和技能的欠缺,以及专业工具和平台的不足。未来客户旅程方法要在整体应用水平上取得突破,这些方面是需要重点聚焦的领域。

从本次调查的总体情况看,综合考虑国内对客户旅程方法的认知和应用情况,可以看到企业对客户旅程的应用还处在起始和发展阶段,未来在方法体系、专业人员,以及工具和平台方面都有较大的挑战,距离客户旅程的真正落地应用和大规模推广还有相当长的过程。
屏幕快照 2021-02-07 下午2.11.14.png


02:

总体认知与应用情况
How We Know Customer Journey


调查数据显示,43%的被访者了解客户旅程这个概念,其中58%的进行过尝试,综合来看对客户旅程了解并进行尝试过的比例为25%。总体的应用比例不高,但是也基本跨越了初始的认知阶段,未来一段时间将是客户旅程应用获得突破的关键阶段。
屏幕快照 2021-02-07 下午2.11.35.png


不同类型的企业,在客户旅程的认知和应用程度上也表现出较大差异:2C企业的应用程度明显高于2B类型的企业,总体认知和应用比例分别为30%和20%。大型企业也明显高出中小型企业,分别为29%、22%和19%。客户旅程是一个相对比较复杂的系统性方法,真正的应用需要人员、资金等各项资源的投入,大型企业更具备优势。相比而言,小型企业的在。分行业来看,认知和应用程度最高是银行/金融/保险行业(30%),一方面是由于这个行业的本身的客户决策流程长、金额大、风险大,另外一方面也是由于这个行业的利润较高,企业有相对较为充足的资源进行投入。



屏幕快照 2021-02-07 下午2.11.46.png


屏幕快照 2021-02-07 下午2.11.56.png


屏幕快照 2021-02-07 下午2.12.08.png



03:
如何绘制客户旅程
How We Mapping Customer Journey


在已经开始应用客户旅程的企业中,有50%的比例(24%不到1年,1-2年的占26%)是最近2年内才开始的,说明客户旅程的应用还处于起步阶段。但也有一小部分(14%)的企业使用客户旅程已经超过了5年,这类企业对客户旅程的应用深度和广度已经达到了相当成熟的水平。在客户旅程地图绘制频率方面,最常见的是1年绘制一次,其次是每月和半年一次,但总体相差不大。


屏幕快照 2021-02-07 下午2.12.22.png




由客户研究部门和团队主导客户旅程的绘制时目前的最常见的模式,其次是设计部门,以及客服、品质部门主导。但产品、战略、营销、销售部门主导的情况也一定的比例,这也说明目前开展客户旅程应用的企业,其目的存在多样性。不同部门来主导,其方法和应用上也会存在差异。



屏幕快照 2021-02-07 下午2.12.43.png


在绘制客户旅程的过程中,目前主要用的是客户调查数据和客户访谈数据,这也是客户研究团队最擅长和最容易采集的数据。其次最常用的数据来源是客户行为和客户反馈/投诉数据,总体上对外部数据应用多于内部数据,对小数据多于大数据。



屏幕快照 2021-02-07 下午2.13.01.png


在客户旅程地图绘制工具方面,使用最多的是PowerPoint,处于绝对领先的地位;其次是常用的绘图和设计工具,例如Visio、Photoshop、Adobe Illustrator等;专用的客户旅程地图绘制工作使用比例非常低,最主要的客户旅程地图专用绘制工具UXpressia的使用比例也只有10%,其他的则更低,使用比例只有2%-4%。主要是目前客户旅程地图绘制并不是一项常见工作,所以通用型的文编编辑和绘图工具会是常用选择,而目前的客户旅程地图绘制工具多为英文版本,国内还没有出现较好的客户旅程地图绘制工具,这也是客户旅程地图专用工具使用比例较低的重要原因。



屏幕快照 2021-02-07 下午2.13.16.png

04:客户旅程的应用效果
How About The Impact


总体上来说,在目前已经使用客户旅程方法的企业中,表示起到效果的占到69%(回答“非常有效”和“比较有效”的比例)。其中占比最大的是“比较有效”,占到53%,其次是“一般”,占比为28%。“不太有效”和“完全无效”的比例非常少,因此总体上客户旅程方法起到了积极效果。但由于很多企业是在最近1-2年开始使用客户旅程方法,目前还处在刚开始的阶段,客户旅程的效果在这类企业的效果还未开始显现。


屏幕快照 2021-02-07 下午2.13.33.png

不同情况下,客户旅程的应用效果也不尽相同。调查数据显示,使用客户旅程方法时间越长,绘制客户旅程地图频率越高,客户旅程方法取得的效果越好。使用2年以上的企业和2年以下的企业表示有效的比例(包括“比较有效”和“非常有效”,下同)分别为83%和69%;每年绘制多次客户旅程地图的企业和多年绘制一次地图的企业的表示有效的比例分别为81%和62%。



屏幕快照 2021-02-07 下午2.14.02.png

屏幕快照 2021-02-07 下午2.14.18.png



虽然客户旅程目前在2C企业应用更为广泛,但从效果来看,2B企业获得效果明显高于2C企业,两类企业表示有效的比例分别为80%和66%,而且2C企业表示效果一般的比例也大大高于2B的企业,前者是后者的2倍。从实际的结果来看,2B企业更有必要尽快应用客户旅程方法。
由哪个部门主导客户旅程方法的应用对最终的效果也有显著的影响,总体看由市场部门(包括营销、销售、运营部门)主导获得效果最明显,有效比例达到83%;其次是设计部门和研究部门,有效比例分别为78%和68%。2018年,知名客户研究机构MyCustomer联合客户旅程平台厂商Quadient在欧美地区开展了一项调查,结果显示由市场部主导的效果是最差的,与本次调查的结果正好相反。但初步判断的原因可能是由于数字化的迅速扩展,让原本掌握着绝大部分渠道和触点的市场部门在客户体验上的影响力越来越大,由其主导时可以让策略和措施更有效地得到执行。
调查数据显示,客户旅程应用效果最差的是由客服、品质部门主导的企业,表示有效的比例为59%,明显低于平均水平,而且表示一般的比例也显著高于平均水平。究其原因,可能是由客服部门主导的应用最近两年才刚刚开始,还处在探索阶段,另外一个可能的原因是由客服部门主导时,在落地环节存在较多的挑战。


屏幕快照 2021-02-07 下午2.14.33.png


屏幕快照 2021-02-07 下午2.14.45.png


在将客户旅程方法进行具体应用时,最常见是用于客户需求分析、产品和服务设计、客户旅程分析和测量。其次是在企业文化建设、工作管理和沟通方面的应用。在具体操作层面,例如客户旅程编排、营销和互动,目前也有一定比例的具体应用。随着客户旅程方法应用的进一步深入,直接到操作层面的应用将逐步提升。



屏幕快照 2021-02-07 下午2.14.59.png

客户旅程在不同领域的应用对最终的效果有明显的影响:表示客户旅程应用效果一般的企业在各个具体应用领域的应用比例均低于获得明显效果的企业。效果一般的企业在客户需求研究和分析、客户旅程编排、市场营销和推广,以及品牌传播与互动方面的应用差距最大(落后超过10%的比例)。从调查数据来看,虽然用于编排、营销和品牌的总体比例不高,但确实影响最终应用效果的显著因素。



屏幕快照 2021-02-07 下午2.15.12.png


通过以上在不同领域的应用,客户旅程方法在各个方面的效果都有所体现,尤其是在提升客户满意度、强化以客户为中心的企业文化、提升营销和运营的转化率方面最为明显,分别由59%、54%和37%的企业表示在这三个方面得到了提升。



屏幕快照 2021-02-07 下午2.15.30.png


05:下一步的使用意愿
What Will They Do Next


总体来看,51%(包括表示“可能会”和“一定会”的企业的比例)的企业表示未来一年内会使用客户旅程方法。不会采用的企业比例很少,只有14%。但也有相当比例(35%)的企业表示不好说,从单项比例来看,表示不好说的比例还是最高的,说明企业对客户旅程放在应用过程中存在的困难存有疑虑。



屏幕快照 2021-02-07 下午2.15.42.png


不同类型的企业未来使用客户旅程方法的可能性也存在明显差异。使用客户旅程越久、使用频率越高,获得的效果越好的企业,继续使用客户旅程方法的倾向越高。2C企业比2B企业未来更愿意使用客户旅程,虽然2B企业获得效果更明显,但2B企业使用客户旅程的难度和成本更多到,导致2B企业的使用意愿要明显低于2C企业。另外,相对于中型和小型企业,大型企业的使用意愿明显更高,表示可能会使用的比例达到了61%,明显高出中小型企业。



屏幕快照 2021-02-07 下午2.15.57.png


屏幕快照 2021-02-07 下午2.16.20.png


对于在客户旅程应用过程中的挑战,最大的困难不是预算不足,而是知识、方法、技能、工具和人员的欠缺和不足,尤其是专业知识和方法的掌握不够,是最大的两项困难。其次碰到的问题是企业高层,以及其他部门的支持不够。


屏幕快照 2021-02-07 下午2.16.28.png



不同部门在开展客户旅程工作时,面临的困难也存在差异:市场部门最大的三项困难依次是方法和技能不足、没有专业的工具和平台、专业人员不足;客服部门最大的三项困难依次是专业知识不足、方法和技能不足、没有专业的工具和平台;研究部门最大的三项困难依次是专业知识不足、实施周期过长、其他部门的支持不够。
由于在客户旅程的应用过程中会面临各种问题和挑战,超过一半的企业(54%)会借助外部的支持,但其中绝大部分的企业(43%/54%)仍然是自我为主,外部为辅。也有 一部分(11%/54%)是主要依靠外部支持。总的来看,选在外部支持是一种快速获得效果的有效方式。


屏幕快照 2021-02-07 下午2.16.59.png


06:谁参加了本次调查
Who Participate This Survey


参加本次的企业在类型(2C、2B)和规模(大型、中型、小型)上均有分布,且较为均匀。所属行业中,各类行业均有参加,其中以互联网和高科技、银行/金融/保险,以及各类服务业为主。


屏幕快照 2021-02-07 下午2.17.13.png



屏幕快照 2021-02-07 下午2.17.30.png







文章来源:UXOOLS  



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


用户历程图制作指南

雪涛

编者按:这篇文章来自资深设计师 Taras Bakusevych ,他对于产品和体验有着非常深入的理解,这篇文章深入梳理了如何制作用户历程图才是合理和便捷的,是一篇相当给力的用户历程图终极设计指南:

用户历程图(Journey Mapping)可能看起来是一个复杂的东西,尤其是当你尝试在小组讨论的时候把这个东西说清楚,会发现相当不容易。这篇文章将会为你阐明这一强大工具的使用方法,并且提供一个简单的模板,并且帮你创建拥有足够洞察力的用户历程图,让你像真正专业的 UX 设计师一样,创建便利、深入、有效的用户历程图。

九个步骤搞定!用户历程图终极制作指南(附模板)

为什么要绘制用户历程图

在数字产品当中,用户历程图可能是用来呈现用户如何达成目标的最佳、最常用的工具了。当我们故事以可视化的方式呈现出来,就可以沉浸在用户的体验当中。这也是为什么说用户历程的价值是巨大的。

理解用户历程图,会迫使我们以更加结构化的方式来思考整个用户体验,去梳理和定义事件的顺序、关键阶段以及事件之间的过渡。

同时,用户历程图还能建立起用户和设计师之间的同理心,当你随着用户历程图推进的时候,能够更加深入理解用户的痛苦和无奈,从而帮设计师理解用户的动机。

用户历程图还能帮你真正定义痛点,这是至关重要的。每种产品都应该在某种程度上帮助用户,让用户生活更加轻松,如果你对痛点有所了解,自然就可以改善体验。

九个步骤搞定!用户历程图终极制作指南(附模板)

用户历程图的变化

根据实际的使用场景,用户历程图会有很多不同的呈现形式,里面通常会包括一些图形化的元素将整个历程或者流程呈现出来,而余下的元素则采用解释性的文本来作为支撑。

绝大多数的模板会显得过度装饰,且过于复杂,在很多时候,它们会作为项目中的展示性成果展现在PPT当中,而不是作为一种有效的工具,来帮助团队来洞察需求。

九个步骤搞定!用户历程图终极制作指南(附模板)

如果你上网搜索用户历程图,你会发现一大堆各式各样的图,这些图和实际的理解是脱节的。

用户现状历程图 vs 用户未来历程图

用户现状历程图反映的是用户当前的状态,这反映的是用户历程在优化之前、当下的状态。而用户未来历程图则反映的是用户历程在优化过之后,未来理想的状态是什么样的。

用户历程图 vs 消费者历程图

这两者在结构和目标上是不一样的,主要差别在于用户角色的定义上。有的时候,你的用户确实是消费者,而在很多情况下,用户又不一定是消费者,这就是差别所在。

用户历程图 vs 服务蓝图

用户历程图侧重于呈现客户的前端体验,而服务蓝图则重在呈现后端的构成,以及交付方式背后的业务逻辑以及同产品核心之间的关系。

你可以在 Megan Erin Miller 和 Erik Flowers 的这篇文章当中找到更多的信息。

模板越容易,填写起来就越简单

从来就不存在什么完美的用户历程图,不过你可以基于某个版本的用户历程图来着手。而这里准备的这套模板是经过长期测试和实验之后总结出来的一款,它非常容易上手,复杂度也控制得恰到好处,并且它包含你所关注的绝大多数的指标,甚至更多。下面,我将教你如何逐步完成这个用户历程图。

九个步骤搞定!用户历程图终极制作指南(附模板)

你可以在这里下载 PDF 文档

在工作坊模式下如何填写用户历程图

在研讨会或者工作坊模式下,开始用户历程的研究和搭建,是一个不错的练习方式。在这种情况下,即使的团队有较多的人,也最好按照小组来进行(每个小组3-5人)。根据用户历程的复杂度和涉及的内容的不同,通常你应该可以在 1.5 小时候完成整个用户历程图的搭建。至于你能用到的文具,仅仅 需要多种不同颜色的便签纸,笔和红点贴纸即可。在开始之前,你需要和各个小组先声明和解释整个过程,并且确保所有人对于这个过程的流程、原理和方法的认知保持一致。

九个步骤搞定!用户历程图终极制作指南(附模板)

第一步:设置舞台

在这里,我们需要定义地图的内容,用户的整个行为历程,以及他们试图要达成的目标,都有哪些。这很关键,不仅要确保所有的参与者都很清楚用户场景,而且要借此构建出对于后续设计有帮助的内容输出。

演员——这个历程与谁有关?整个历程图应该只和一个角色有关,也就是要经历整个历程的用户角色。

场景和目标——描述参与的用户的行动的情况和状态,从而增加上下文环境的清晰度。描述用户的目标,期望以及动机都有什么。

当前/未来状态——阐明用户历程所在的阶段。

Ps:即使此刻你要做的是某个未来的产品,也最好不要跳过当前状态,洞察当前的用户和产品状态、痛点、习惯,有助于你去验证想法。

九个步骤搞定!用户历程图终极制作指南(附模板)

第二步:定义阶段

接下来,你需要定义整个用户历程的大的阶段。先把各个阶段定义好能够最大程度节省你的时间和精力。最简单的方法,是先定义第一个和最后一个阶段,然后再来填补中间的各个阶段,不要创建太多的阶段,而是将整个用户历程切分成为有意义的部分。

九个步骤搞定!用户历程图终极制作指南(附模板)

第三步:执行推进

按照用户操作流程,来逐个执行梳理各个阶段用户的行为、状态。千万不要试图梳理得过于详尽和细致,尽量专注于关键因素,确定用户需要哪些要素,才能推进到下一个阶段。

九个步骤搞定!用户历程图终极制作指南(附模板)

第四步:想法,情感和情绪

在这个阶段,要开始描述和用户执行操作紧密关联的的想法,涉及到的问题,还有感受。在很多其他的用户历程图模板当中,这个部分通常是和整个用户历程图是分开的,但是实际上,只有合并到一起才是合理的。

九个步骤搞定!用户历程图终极制作指南(附模板)

在这个部分,我不建议将时间花费在用户情感曲线的绘制上,这样做的实际目标更多是为了更加具有视觉吸引力,并不具备实际的价值。

第五步:关键触点

在这个步骤当中,我们会高亮标注出用户在各个阶段会接触到的物理和数字交互点,以及涉及到的工具、人和服务。我相信各个阶段所覆盖的这些触点,能够帮助我们更好地梳理和构建出整个心智模型,并且能够帮助产品和服务,让它们能够更加切合用户的需求,更好地集成到一起。

九个步骤搞定!用户历程图终极制作指南(附模板)

第六步:合并进度

如果你已经和你的团队创建了类似移情图、价值主张画布,那么你无需在这个事情上重新创建相同的内容,因为用户历程图和以上内容中有大量重复的部分,你只需要迁移过来即可。随后,你可以将进度合并到当前的用户历程图当中。

九个步骤搞定!用户历程图终极制作指南(附模板)

第七步:逐阶段填写

这个步骤,需要将各个不同阶段的内容填写进来。

九个步骤搞定!用户历程图终极制作指南(附模板)

第八步:确定痛点

给每个参与者一些红点贴纸,方便他们在整个用户历程图上,对他们认为是痛点的部分进行标记并投票。痛点可能和情绪有关(比如害怕提供个人详细信息),也可能与行为有关(比如手动输入快递地址等)。这就是为什么最好不要为痛点创建单独的行列,因为可能涉及到的点非常多也非常分散。如果需要对痛点进行深入的描述,使用红色便签纸来进行详细阐述。

九个步骤搞定!用户历程图终极制作指南(附模板)

第九步:改进策略,解决痛点

到了最后的阶段。在确定痛点之后,我们就可以开始思考如何缓解或者消除痛点。通常,我们需要通过改进整体策略,完善功能,集成服务,来解决痛点,当然,更多的时候,可能还需要我们拥抱一些更加狂放的构思,通过创新来搞定痛点。

九个步骤搞定!用户历程图终极制作指南(附模板)

完成比完美更重要

在小而无关紧要的细节上进行争论,很容易迷失方向。我经常会看到某些小组会停留在第一阶段,陷入争论,无法推进。从来都没有任何一个用户历程图是完美的,因为用户总会有不同的习惯,并且需要产品设计师从不同的角度来解决问题。

因此,这需要你和你的团队专注于 80%最关键的用例,而不是在所有可能的事情上做复杂的取舍,并且踟蹰不前。


文章来源:优设  作者:Taras Bakusevych

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

凤凰新闻「暗黑模式适配落地」复盘

雪涛

凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配,本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。

项目背景

  • 主流趋势:随着 iOS 13 与 Android 10(Q)系统版本上线深色模式功能。
  • 用户诉求:阅读类产品,满足受众用户“缓解疲劳、沉浸式阅读的使用场景”。
  • 现存问题:对标主流 APP 产品,凤凰新闻 APP 早期的“夜间模式”阅读体验较差,且色值规范缺少统一性,需要一次全面梳理。

改版目标

  • 满足深色模式日间使用需求,并提升用户在深色模式下的阅读体验。
  • 构筑一套新的深色/浅色模式色彩规范,方便管理与记忆。
  • 双端开发建立新的色值代码库,提升沟通协同效率,同时节约设计开发后续的维护成本。

调研平台规范

1. 背景色

iOS 平台在深色模式下的背景色展示是动态的,分为基础、升起(例如,弹出框或半浮层)。如下图中 iOS 系统的两个界面,相同样式的组件在基础层与升起层显示的是不同的两组颜色。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

从 iOS14 的色彩规范中可以发现随着界面高度的升起,系统定义的三级背景色也同步进行了一级上升。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

iOS 通过这种背景色统一升级的处理方式来达到多任务窗口叠加的视觉隔离效果,但相对的开发成本也较高。

再来看看 Android 平台深色模式下不同层级间背景色的显示规律。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

Android 把页面分为从“0dp”到“24dp”的 10 个不同高度的显示层级,通过在同一背景色上叠加不同透明度的白色来区分显示层级。相对于 iOS 的整体背景色升级,Android 的背景色分级逻辑则更加的简单易用。

2. 文字色

iOS 的规范中定义了 4 个等级的文字色,一级文字色为黑白纯色,二到四级文字色为色相偏蓝的半透明色,通过降低同一颜色的不透明度数值来进行分级。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

Android 的文字色分为 3 个等级,与 iOS 的共同点是都用了半透明颜色,也都采用了降低不透明度的方式来进行分级。不同点是 Android 文字色使用的黑色与白色,没有添加色相。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

使用带有透明度的字色能够避免相同字色与背景色相融的问题。以 Android 为例,三级文字色与 10 种背景色叠加后都具有较高的识别度。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

iOS 则通过一套半透明字色可以适应基础与升起两种不同背景色的使用场景。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

3. WCAG

iOS 人机界面准则和 Material design 在深色模式的建议中,都提到了文字信息需满足 WCAG 无障碍阅读的 AA 标准。

WCAG 全称为 Web 内容无障碍指南,其中包含分为可感知性、可操作性、可理解性、可兼容性四项原则的相关建议,这些建议可使网站内容更容易访问。WCAG 从高到低分别是 AAA、AA、A 三个等级。其中 AA 要求文字与背景对比度不小于 4.5:1。

感兴趣的朋友可以通过下面链接进行深入了解: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

也可以通过下面的色彩对比计算器进行对比度检验(下图为翻译后展示)https://www.msfw.com/Services/ContrastRatioCalculator

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

这里我拿 iOS 在深色模式下的主次两级字色与基础、升起背景色做了一下对比度检验,得到的结果均满足 WCAG 无障碍阅读的 AA 标准。这里再给大家推荐一个可以同时对多个颜色进行对比度检验的网站 https://hexnaw.com

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

4. 彩色

iOS 人机界面准则的彩色方案中给出了 9 种颜色。如下图所示的深浅配色方案以 RGB 与 HSB 两种属性进行对比。

  • RGB:是大家所熟知的光的三原色,R 代表红色,G 代表绿色,B 代表蓝色
  • HSB:是颜色的另一种展现形式,H 代表色相,S 代表饱和度,B 代表亮度

https://baike.baidu.com/item/HSB

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

图中左侧以 RGB 属性展示的各项参数差值较大,没有明显的规律性;右侧以 HSB 属性展示的各项参数差值较小,其中靛青与紫色 HS 数值相同,仅有 B 的数值有所差异,但整体来看依然没有一个完整的规律。

相较 iOS 系统彩色方案的单独订制,Android 系统的配色方案则是一整套渐变梯度由“50-900”的色彩库。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

在 Android 的色彩工具中还可以自定义配色方案,在色板中选取一个主题色,对应梯度值为 500,通过一套算法来自动获取其他梯度的辅助色。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

为了在深色主题中提供更大的灵活性和可用性,Android 官方建议在深色主题中使用较浅的色调(200-50),而不使用默认的主题颜色(饱和色调范围为 900-500)。

  • 选用 500 左右的颜色作为浅色模式的主题色。
  • 选用 200 左右的颜色作为深色模式下的主色。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

总结来看两大平台在深色模式的适配上都各有所长,在整体的视觉体验上 iOS 更加鲜亮突出,Android 则更加柔和舒适。

iOS 更加注重细节体验,在整体的色彩规范中的很多颜色都是单独定义的,这也印证了 iOS 13 发布后苹果官方向用户所表达的“屏幕上的每个元素都经过精心设计”这一理念。而 Android 的色彩规范中无论从背景色、文字色还是彩色都遵循着一个梯度规律。

竞品调研

深色模式改版设计的前期工作除了调研两大平台的指导规范外,我们还对已上线深色模式的竞品 app 进行了调研,调研的主要目标是背景色、文字色的色相与亮度展示效果。(以下截图时间为 2020 年 2 月份)

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

腾讯新闻,主背景无色相,次级背景无色相,一级文字无色相亮度较高,次级文字无色相亮度极低。文字与背景对比度高,主要信息比较突出。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

网易新闻,主背景色相偏蓝,次级背景色相偏蓝,一级文字无色相亮度较高,次级文字无色相亮度极低。文字与背景对比度高,主要信息比较突出。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

凤凰新闻,主背景无色相,次级背景无色相,一级文字无色相亮度偏低,次级文字无色相亮度极低。文字与背景对比度低,主要信息不够突出。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

以 3 个 APP 首页来对比,可以明显的感觉到凤凰新闻首页的信息展示不够突出,在日间场景下体验极差。

配色方案尝试

深色模式并不是简单的把整个界面反色了那么简单,还是要考虑到所有用户的需求。凤凰新闻作为资讯类 app 用户在夜间使用的场景也有一定的占比。深色模式的改版不仅要在日间满足使用需求,还要保证夜间的视觉刺激相对柔和。所以,在设计配色方案时就不能使用对比度极高的纯黑色背景与纯白色文字,只能在各种灰色中搭配出最优方案。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

经过多稿背景色与文字色的搭配尝试后,最终确定了下图中所框选的配色方案。这个方案整体背景色与二三四级文字色在色相上略微偏蓝,相较于无色相背景更具有活力,在视觉体验上信息层级的区分也更加明确。

在各种方案尝试设计的过程中对颜色的色相、饱和度、亮度的选取都是随机的,目的是在短时间内进行快速试错来确定配色方向。

色彩规范重构

本次改版的目标中还需要重新构建色彩规范,所以还需要对这稿配色的选用进行细致的打磨,在色彩对应的 HSB 参数中进行细微的调整使整套配色方案有律可循。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

最终方案在四级背景的色相与饱和度方面进行了统一,对亮度的递增梯度统一为 5。对比初选方案在视觉上变动也很微弱,却使色彩分级规律一目了然。那么依照此方式也可以对文字色与彩色也进行了一轮打磨。

对于文字色在深色模式优化调整的基础上也对浅色模式下的文字色进行了调整,使深浅模式下两套字色更具有规律性。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

在文字色的使用上凤凰新闻没有参照两大平台规则使用带透明度的颜色,主要原因是从自身实际出发,考虑到端内的文字色使用场景部分是用于半透明背景色上的,如果文字色与背景色均带有透明度,叠加后的体验会很差。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

凤凰新闻的功能图标以线性为主,通常搭配文字一起使用,所以对图标颜色的定义与文字色是保持一致的。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

在彩色的规范梳理中浅色模式下保持不变,仅对深色模式下颜色的亮度进行了调整,使深浅色模式下颜色的亮度对比有了统一的规则。

当然我们还需要对新的背景色与一二级文字色进行检验,看看是否满足 WCAG 无障碍阅读的 AA 标准,也就是常规尺寸文本对比度高于 4.5 : 1。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

下图就是凤凰新闻客户端的新版色彩规范,在规范中除了上述的主要的通用颜色外也有部分是单独定义的颜色,这些颜色多用于独立或特定的场景下。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

新旧版本对比

在完成色彩规范的重构后,重新输出界面样稿与旧版进行对比。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

通过设计稿对比老版夜间模式与新版深色模式,能够直观的感受到新版在信息浏览上体验更好。

实现与验收

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

1. 色值替换

在着手进行色值替换时,iOS 开发小哥反馈给我凤凰新闻全端跟色值有关的代码有 2000+条,如下图中是日夜间对应的这条代码样式。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

如此多的色值代码多数是相同色值在不同场景中重复使用,但彼此却又完全无关联,还有很多是日积月累的旧色值未被删除。如逐条替换费时费力效率极低,后期的维护也极其麻烦。

为了提高适配效率以及便于后期维护,使得之后的色值替换可以达到全局响应的目的。由设计师与开发人员共同建立一个色值对照表。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

此表中设计命名主要基于色彩规范,用于设计师团队间的沟通协作。工程命名由开发人员提供,主要用于设计师与开发人员的在设计走查中进行高效的沟通协作。

以凤凰新闻 iOS 端为例,优化后的色值代码库如下图,由原来的 2000 多条色值代码变成了 30 多条色值代码「宏」。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

在 iOS 开发工具 Xcode 的可视化文件夹中看起来就更加直观了。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

之后的色值使用开发人员只需要调用代码库中相应的「宏」即可,后续版本迭代中如有对通用色值的调整只需修改相应的「宏」代码即可完成全端替换。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

以这种方式快速完成首轮色值替换后很多页面的色值会出现错误,需要 UI 设计师持续的进行走查反馈,再由开发人员根据反馈进行修改校正。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

以 iOS 端为例在深色模式色值走查过程中设计师分批次以 PDF 格式反馈给开发人员的,开发人员在修改反馈问题的同时设计师也在进行下一批问题的整理,这样同步进行的效率会更高。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

2. 切图替换

切图替换场景相对比较多,同样延用色值走查的协作方式,设计师分批修改开发同步进行替换。开发小哥提供切图的方式就是直接扔过来一个全端切图包,需要设计师修改切图颜色后以原命名重新发回去。当打开切图包后顿感一阵头大,切图总数有近千张之多。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

虽然切图很多但其中有一部分是已经无用的老切图,在替换的过程中也对端内切图重新进行了一轮梳理,删除了很多无用和重复的切图,同时也对凤凰新闻 app 的体积进行了瘦身。

在切图的替换过程中比较费时的是对同一切图存在多张的情况进行整理,梳理出该切图的所有使用场景然后反馈给开发人员进行统一调用,之后如再次修改即可完成全局替换。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

除 icon 外还需要对默认图与缺省图进行替换。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

3. 特殊适配

凤凰新闻客户端需要进行特殊适配的场景主要是图集与小视频界面,这两个界面仅有一套色值与 icon,界面中的元素需要单独处理,在切换深色模式后避免出现错误。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

4. 界面展示

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

结语

Dark Mode 适配是一项费时费力的巨大工程,也是探索和优化用户体验的全新挑战。本文主要描述了凤凰新闻 APP 在 Dark Mode 适配中的一整套心路历程,从规范、设计以及实现的角度对整个项目进行复盘总结。


文章来源:优设  作者:凤凰网设计中心

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

你真的了解按钮吗?一篇文章带你全面了解按钮

周周


关于按钮的一些知识和我的一些观点分享给大家。

按钮是最常用的组件之一,有很多小伙伴并没有很全面的认识这个组件,今天我把关于按钮的一些知识和我的一些观点分享给大家。


一  按钮的作用

在使用按钮之前,你要了解什么是按钮,按钮的作用是什么,什么时候该用按钮。


1)什么是按钮

按钮用于触发一个及时操作。


2)有什么作用

2.1 功能操作

比较常见的是:展开收起、加减、下拉等。这种情况下以功能性为主,按钮的形式适当弱化,重点强调功能,突出主体信息。


2.2 指引用户下一步操作

这个是最常见的使用场景,每个可交互页面上都有这类按钮的出现,用来指引用户下一步该怎么做。比如:创建、保存...


2.3 培养用户习惯

当用户知悉某个按钮能指向某个操作,或者获取某类信息后,长此以往用户就会形成使用习惯。如果某操作能够为用户持续带来价值,那就可以在按钮的位置让它更醒目,持续培养用户点击习惯。


二  按钮有哪些类型

    ·  主按钮:用于主动行动点,一个操作区域内只有且只能有一个主按钮;

    ·  默认按钮:用户内有主次之分的一组行动点;

    ·  虚线按钮:常用于【添加】操作;

    ·  文本按钮:用于次级的行动点;

    ·  链接按钮:用于作为外链的行动点。


三  按钮的状态

1)交互状态

1.1 Normal 正常状态

此状态为按钮的正常显示状态,就是按钮在也页面中的常规状态。


1.2 Hover 悬浮状态

此状态为按钮的悬浮状态,当鼠标滑过时候的状态会给用户一个交互反馈,因为它只是一个视觉上的反馈并无实际作用,所以在移动端就把此状态去掉了。

此状态的效果并没有具体的规则,具体按产品风格来定。这里我给一个参考效果,但并不是唯一效果,如果不合适,可以酌情更改。


1.3 Click 点击状态

此状态为按钮的鼠标 / 手指按钮状态,操作完此状态后,就会引发此按钮的真实作用。

同时,此状态的效果也没有具体的规则,具体按产品风格来定。这里我给一个参考效果,但并不是唯一效果,如果不合适,可以酌情更改。


1.4 Disable 禁用状态

此状态为按钮的不可操作状态。

当页面中有未完成的任务或页面中有错误导致不可提交页面时,按钮会处于 Disable 状态。这个状态在产品中也是很常用的,而且这种情况下应该引导用户去做其他操作,所以此按钮在视觉上一定要弱于其他。所以要制定一个通用的展示方案。


一般方案有两种:

    ·  无论按钮本身颜色是什么,它的背景色均为纯灰色,常用的色值有:#CCC、#999等,此种方案为常用方案;

    ·  Disable 状态为 Normal 状态的 30% 透明度,如果你想让按钮都有颜色倾向的话,可以用这种方案。


2)状态属性

    ·  常规:常规样式的按钮,主操作按钮;

    ·  危险按钮:删除/移动/修改权限等危险操作,一般需要二次确认;

    ·  幽灵按钮:用于背景色比较复杂的地方,常用在首页/产品页等展示场景;

    ·  加载:用于异步操作等待反馈的时候,可以避免多次提交。


四  按钮的使用方法 / 禁忌

1)一个操作区有且只有一个主按钮

一个操作区有且只有一个主按钮去引导用户操作,如有有多个或没有则会影响用户的判断。尽可能少的让用户去做选择,产品的终极目标应该是“傻瓜式”产品,不要让用户有学习成本。


2)圆角值

根据产品风格,三种圆角值的设定:


2.1 圆角值为 0

这种适合用在比较严谨 / 企业级产品中,比如:阿里云;


2.2 小圆角值

这种是最常用的形式,在不失严谨的同时还有一些细节,如果可以的话,尽量选这种的;


2.3 超大圆角值

这种一般需要有独特的产品风格才可使用。样式不好把控全局效果,所以使用频率较低,慎重使用。

较大圆角值,此类千万不要用,不要问,问就是太丑。


3)精简文字

按钮里面的文字一定是精简的,不要展示过多文字,更不要折行。


4)文字与按钮比例要适中

文字与按钮的比例要适中,文字不要太大或太小,都会影响视觉展示。


5)弥散阴影

如果你想要用弥散阴影,阴影的颜色尽量用带按钮本身颜色倾向的,这样会让按钮更有呼吸感。需要注意的是:只有主按钮才能用阴影,其他级别的不要用,不然识别度会变差,并且会让按钮的体验变得很差。


6)主次操作按钮样式统一

主次操作按钮样式要统一,不要滥用样式。


7)按钮样式与其他组件要有区别

实际使用中,按钮样式不要与其他组件样式混用,避免让用户产生误解,做一些不必要的操作和思考。


8)不同场景适配

现在暗黑模式也是常用的场景了,所以黑/白场景下都要考虑到识别度的问题。


9)主次按钮的位置

主次按钮左右的问题,也常常出现在设计讨论会中,这次我直接放个结论吧,以后不要再为这件事吵架了。

在提交页面、弹窗中,主按钮在右;在其他常规页面上,酌情考虑。


五  按钮尺寸

按钮尺寸具体用多大的,这里我总结了一个规范(仅代表个人意见)。

· 高 = 文字行高 + Xn,X=自然数,n=4

· 宽 = 文字宽度 +  Xn,X=自然数,n=4

在其他地方也可以用类似的公式去做规范,比如卡片的间距,你可以设置 n 为基础值,在此基础上用 Xn 去选取合适的值。

注意:常用的字号为 12px、14px,尽量不要用太大的字号在按钮上。


小结

按钮只是众多组件中的其中一个,也是最常用的组件之一。对于设计师来说,无论大小组件,我们都要精益求精的去思考,只有把每一个细节做好了,才能做好产品。日积月累的把每一个知识点掌握了,我们也就成长了。




文章来源:优设网     作者:友设青年



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档