首页

JCD 驱动 - 复杂系统设计应对之道

雪涛

摘要

面对企业级产品,由于系统复杂度和业务领域的专业壁垒,用户、产品、业务、技术的理解和分析难度都远远高于C 端。特别是进入业务深水区,技术术语层出不穷,角色链路错综交织,场景越来越复杂,在理解和分析业务上设计师需要耗费的精力越来越多,设计师如何高效且深入的分析业务,直接影响到设计解决问题的深入度。基于蚂蚁金服CTO 线的业务土壤,我们不断尝试打磨,探索出以JCD 为核心的企业级产品设计思维,助力设计师在深耕业务上有章可循,有方法可用。



复杂系统的特点

做企业级产品 3 年多,刚从 C 端业务转过来时,最大感受是对业务理解起来很艰难。随着经验的增加,对 0 到 1 产品驾驭起来轻车熟路,可到业务深水区,还是感觉痛苦。技术术语层出不穷,用户角色多,一个用户身兼数个角色,系统之间的关联关系也很复杂,随着业务的深入设计师会感觉对产品逐渐失去掌控力。一个简单的芝麻信用分,需要 20-30 个中后台产品和各种角色一起协同支撑。然而复杂是守恒的,系统复杂性的总量是一个衡量,当前台的呈现更简单时,隐藏在幕后的复杂性就增加了。




我们面临系统的复杂性表现在三个方面:

  • 多角色,重协同。

  • 链路长、错综交杂。

  • 技术术语多,业务难理解。



但企业级产品会有一个主线,是从「事情」的角度出发,关注一件又一件事情被完成。企业场景下我们再把事情描述的具体一些,就是一个又一个的 Job 。设计师要做的就是通过设计,包括参与的角色、使用的工具以及协作方式等,让 Job 被高效完成。



JCD 设计思维应对复杂系统

我们先对比一下,从「用户」视角和从「Job」视角出发,关注的维度有哪些差异呢?从用户视角出发我们需要关注用户的个人痛点、情绪、兴趣、人种志(年龄、性别、收入)等信息,会更关注人,核心是为了满足用户的需求。在Job 视角下,需要关注 Job 的目的、参与角色、协作方式、工具等信息,而且 Job 对角色是有要求的,比如航空公司飞行员,按岗位要求,他需要不断提升自己业务能力,每年要去复训两次,学习新的技能和知识来满足岗位对飞行员这个角色的要求。



基于我们的业务土壤,以及出发视角,我们探索出一套适合企业级产品的设计思维,JCD(Job - Centered Design )以 Job 为中心,设计完成 Job 所需要的一切,包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它是一套适用于企业级产品设计的发现问题、解决问题的方法论。



在 JCD 设计思维下,将设计流程分为四个阶段,发现、构思、呈现、度量。每个阶段下有不同的方法、产出、资产。Ant Design 在「呈现」阶段帮设计师大大提升了效能,设计师才有更多的精力投入到「发现」阶段去更深入去理解业务和角色。接下来重点分享一下在发现阶段的两个方法,角色分析和业务分析。





JCD 方法 - 角色分析

常用的 C 端的用户画像,如下图,会关注用户人口统计学的信息,如名字、性别、年龄、所在地、家庭情况、用户的习惯、爱好等信息,这些信息在复杂的企业级产品中是不需要去关注的。




企业级产品角色画像

在JCD 的视角下,我们企业级产品的角色画像应该关注的三个维度:角色概览、工作能力、工作内容。而工作内容是最核心需要关注的信息,包括了工作的描述、工作的痛点、需求和使用的工具。




一个角色往往需要完成多个Job,描述一个Job 包含:

  • 四要素:情景、角色、活动、目标。

  • 一个句式:在什么情景下,角色需要完成什么样的活动,来达成一个目的。

举个例子,在飞行前 1.5 小时(情景),角色(飞行员)需要去查看飞机情况(活动 A )、气象情况(活动 B ),来判断能否起飞(目标)。



为了给设计提供具体的依据,我们需要进一步纵向解构Job,来构建 1 个完整 Job 场景,设计师可以阶梯式对一个 Job 进行拆分,Job 下面有多个 Activity,Activity 下面有多个 Task 组成,Task 下面有不同的 Action,到这种颗粒度可影响到设计界面中的具体元素。




看一个具体案例,如何拆解一个 Job,首先用我们的上面的四要素和句式描述。Job:飞行前 1.5 小时,飞行员需要查看飞机情况、查看气象情况,来判断能否起飞。在飞行员这个角色的 Job 里包含了两个 Activity :1. 查看飞机情况;2. 查看气象情况。查看气象情况这个 Activity 下包含了三个 Task:1.查看起飞地天气;2.查看降落地天气;3.查看备降地天气。


每个 Task 下面会有不同的 Action。除了 Job 的纵向拆解,我们还需要关注每个 Job 场景下的需求、痛点、费力度、成就感。




以 Job 场景为核心,串连角色协作关系

做好一件复杂的事情,往往需要多个角色在多个工作场景中协同配合。我们会以Job 场景为核心,梳理角色之间的协作关系,建立全局视角。比如,在飞机起飞前,机组飞行员查看飞机和飞行信息、查看起降地天气等;同时乘务组空姐们为此次飞行做相应准备工作。准备完毕,机长会通知机组和乘务组开始登机。上飞机后机组需要检查驾驶舱情况,乘务组检查客舱情况,检查完毕,会一起协同机场地勤人员安排乘客登机。完成登机后,飞行员需要联系机场管制申请起飞........ 设计师可以通过Job 场景去串联角色之间的协作关系,如下图。



以上是「角色分析」的方法,是从 Job 出发洞察角色的工作需求以及协作模式,帮助设计师构建角色协同的全局观。



JCD 方法- 业务分析

业务分析的方法是借鉴面向实体的思路帮助设计师去深入分析复杂业务。企业级产品中会有各种技术术语、复杂的数据流转、业务逻辑等,我们需要一个系统的方法来分析和理解业务,为设计提供准确有深度的信息输入。我们的用户大部分是软件工程师,这个思路可以让设计师在理解和认知上对齐用户的心理模型。我们业务分析的有三个维度:

  • 产品定义

  • 实体建模

  • 业务逻辑

通过以上三个维度,从纵向和横向去深入和全面的理解业务。




首先,产品定义。

通过沟通交流、桌面研究的方法,去了解产品和用户相关信息,熟悉相关概念和技术背景、沉淀信息资料,来收集产品的信息,具体的产出有名词库、产品画布、产品的关系图、业务结构图、产品形态图等,这里不展开详述。

其次,实体建模。

实体建模是本次分享的重点,实体建模按照面向实体的思想分析业务,围绕实体进行问题和内容抽象和分析,聚焦于产品内实体和实体间的关系,以及实体的生命周期的分析。



我们先看什么是实体,参考领域建模(此处感谢幻星给实体的定义)给实体一个定义:实体是产品中客观存在,具有唯一标识的并可以相互区分的业务载体,通常包含属性和行为。

企业级产品系统的实体,很多情况下都是熟悉的字母,陌生的单词,在设计之前设计师如何去准确、系统的去分析实体。



举个例子,现实世界中,「机票」是一个实体,在产品里,可以把「机票订单」看成一个实体。围绕着机票订单,我们梳理出它的基本属性信息,以及它具有的所有状态和对应操作,设计师可以进一步把这些状态和操作梳理出一个「机票订单」这个实体从产生到消失整个生命周期经历的过程。这些分析可以作为后续任务流程和设计细节的信息输入。



一个实体不能构成一个产品,一个系统会有很多实体存在,我们需要进一步去梳理「机票订单」与系统中其他实体的联系。在下图的案例中,机票订单与机票是聚合 n:1 关系, 一张机票订单会包含多张机票,机票订单与收支明细是关联 1:n 的关系,一张机票订单会关联到多个收支明细,比如会有支付成功、退款等明细。




最后,业务逻辑。

以上是实体建模的过程,产品定义和实体建模都是对业务内容层进行理解和梳理。但是我们的业务除了内容外,还有很多复杂的业务规则、业务流程,我们也需要进行梳理和分析,这样设计师才能对业务有全面的理解。




所以我们需要把结合实体、业务规则、业务流程,进一步梳理业务逻辑。最终会得到一张业务逻辑图,不仅能够帮助设计师洞察到业务的本质,也能帮设计理解业务的全貌。




第二个方法业务分析,是通过面向对象分析思路去深入的理解业务,为设计提供更精准,更有逻辑的依据。



总结

回顾以上三部分内容,JCD 是什么?Job - Centered Design 是以 Job 为中心的设计思维。JCD 的定义:以 Job 为中心,设计完成 Job 所需要的一切,包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它包含了原则、流程、方法&工具、产出&资产,上面重点分享了其中两个方法「角色分析」和「业务分析」。


文章来源:站酷   作者:Ant_Design 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

AI 时代的设计

雪涛

这是5月参加阿里设计周“智能与计算”分论坛后的感想小结,因为论坛大部分在讲算法和实现方式,所以在这里我就其中的AI与设计相关部分做一些深入分享。undefined

我的思路大概分为三个部分:AI时代的来临;AI如何影响设计;未来的设计何去何从。

undefined

undefined

第一部分:聊聊AI时代来临,设计的世界发生了什么变化?

undefined每个时代的设计都有不同的定义,农业和工业时代的设计更多是指设计师通过手工制作的方式阐释自己对美感和艺术的理解。

undefined到了信息时代,设计除了要考虑美感,还要考虑是否实用和好用。设计的对象开始从真实世界转向数字世界,设计思想开始考虑以用户为中心的设计;设计方向也增加了很多领域,包括都多媒体艺术、游戏设计、网页设计、移动应用设计等。

undefined在人工智能时代下,AR设计、智能硬件逐渐发展,设计的改革更多考虑的是如何将真实世界和数字世界进行融合,如何在自己产品上更好地阐释艺术、美感和实用性。

第二部分,AI如何影响设计,设计因为人工智能而产生了哪些改变呢?

结合论坛的内容,我觉得从以上五个方面产生了较为深远的影响。

人工智能帮助设计师解决在创意过程中面临的一系列问题,将重复劳动变得自动化 ,节省设计师大量的时间,减轻设计师的工作量。

undefined数据驱动自动生成,取代人工建模,减少了设计的时间成本。通过组件标准化,来构建三维几何,然后geometry格式入库,最后由渲染引擎绘制。

undefined再比如,双11期间有1.7 亿个BANNER,都来自阿里的“鹿班”AI设计系统。设计数据—机器学习、训练模型—生成设计结果并评估。如果这些工作量由人工来完成,那么设计师真的就成了“没有感情的作图机器”了。

当今社会,随着产业智能的发展,在这个变革中,挑战不单单来自技术,也来自客户对智能数字体验的极致追求。这给开发人员和设计师都提出了全新的难题,在可视化领域,通过技术和设计两个角色更紧密的捆绑,产生了让人欣喜的化学反应。

从原始数据到图表并不是直接的,它需要经过交互的分析,得到指标结果,最终以可视化图表呈现,而呈现的视觉方式是多样化的。

这就是所谓的两种数据,三层讲述

第一步是原始数据的准确转译,工具需要数据对接能力,即对现状的讲述。

第二步是分析过程,从脚本模式跨入数据驱动,让数据的分析变得可知可信。

第三部是观点数据的表达,也就是创作强化,将结论以可视化的多样形式被表达。

这是根据地图的原始数据得到的多种可视化设计方案,同一份原始数据,却得到了不同的形式表达。

因为仅仅有准确的数据结论是不够的,因为数据需要更好地被讲述和表达,如果仅仅将数据呈现给用户,那么理解难度将会大大提高,而设计是为了让产品变得更加容易使被理解和使用

第二点,体现在建筑的三维可视。

首先,在二维地图选取建模范围,通过智能化的处理,根据数据构建初始的三维地图。

然后通过数据联动,将城市建筑虚拟还原。

整个过程从数月—> 数周—> 数天,时间大大缩短,人力成本减少,释放更多的精力去进行创意工作。

建筑三维化的应用:比如车道级地图。

相比于传统地图,车道级地图导航在信息精细度、定位准确性、动态信息丰富度上有大幅提升。

undefined车道级导航能清晰显示道路上的虚实标线、自己的车行驶在哪条车道上,还能在地图上看到车身摄像头和雷达检测到的周围车辆、锥桶、防撞桶等。

当设计对象从单个产品转变到用户的经历和当前环境时,设计师不能只考虑自己的产品体验,需要从大局出发,思考每个产品之间的联动,考虑不同场景下自己的产品如何服务用户以及如何与其他产品联动。产品设计从单体变成一块需要考虑兼容上下左右外部环境的拼图。

智能化的场景的改变对设计有哪些影响呢,我们来看这张图:设计的场景从有形—>无形、静态—>动态、永恒—>瞬间的转变。体验设计的趋势从GUI到TUI(实体交互),再到Radical Atoms,场景的改变对设计的影响维度不是单一的

undefined

设计场景在AI时代不仅局限于手机,还涉及到实时场景的设计情况。

比如谷歌的实时翻译、语音翻译。输入与输出是同步进行的,这就对设计提出了新的要求。

此外,还有语音智能VUI,彻底打破了以往的交互体验,改变了人和工具之间的互动关系,反向塑造着人类的认知方式和学习行为。下面来看一个小爱5.0案例:

undefined

对话是人与人之间交换信息的普遍方式,语音交互设计涉及系统学、语言学和心理学,因此它比 GUI的交互设计更加复杂。

undefined体验设计经历了PC时代、Mobile时代,现在进入IoT体验时代。设计的解决方案与技术的发展息息相关,设计和技术互相促进带来新的体验革命,设计师一直在探讨和实践在新技术环境下的新体验设计,并基于出行、医疗、社区、政务等行业持续挖掘服务聚合模式与场景体验的创新。

在新零售的场景下,购买和支付流程发生了改变,这就需要设计师重新思考消费者的心理地图。例如无人零售、Amazon Go、支付宝IOT支付等等。下面来看一下Amazon Go的案例:

undefined

如何让用户使用更便捷、体验更顺畅;要向用户提供什么样的服务,如何让用户注意到我们的产品,如何向他们传递企业的服务价值和特点,这是IOT新零售下需要设计深入研究的方面。

在云端实现企业产品的全区域管控,监控的设计视觉和交互又是不一样的,比如论坛上的案例:荷鲁斯之眼、全区域覆盖的云监控等等。

通过对多个实体空间中的数字设计探索,重新塑造人与空间的交互界面,提升人们对于空间的使用体验。下面举个例子:

AT&T discovery district是一个数字化的互动商业社区。

它从重新审视建筑本体开始。通过虚实和光影的变幻,营造出了实体空间体验,空间本体就是对话的那个界面。实体空间和数字内容的结合,构建出人与建筑之间新的交互界面。

广场的数字球体入口,人的位置和数量变动,球体内的灯光也会跟随变动。

undefined

人工智能促使了交叉学科的工种产生:数字体验设计师、创意工程师。这两种职业是做什么呢?面对正在到来的智能时代,体验设计师和创意工程师将共同面对“AI”这一全新的命题,在智慧工地、智慧教育、数字警务室、神经符号AI等应用中,提炼出智能感设计方法、利用图形技术能力自研产品并赋能业务。

数字世界中的设计师:横跨了艺术、文化、科学、商业多个学科;从传播学、心理学、应用科学和统计学进行用研,去解决用户遇到的问题。

它不仅涉及到需求分析和产品设计,还贯穿至产品运维、测试、发布、分析,从设计洞察中做出创新设计。

未来的设计师将融合人工智能和创意编程技术,在世界数智化的大潮中找到新的定位和新的机遇。

undefined

第三部分,在人工智能时代下,未来的设计会走向哪里?新时代的设计师怎样找准自己的定位呢?

人工智能的成熟对部分设计师来说简直是灾难性的打击,之前无论是通过技法还是数据分析才能完成的工作,人工智能一下子就可以完成,后续根本不需要这么多设计师来完成这些工作。那么设计师是否会被人工智能取代?我们先来看一张人类能力地图:

这张图中,海拔高度代表这项任务被计算机执行的难度,不断上涨的海平面代表计算机现在能做的事情。从图中可以看出,目前人工智能水平预警线距离代表艺术的山峰还很远。

人工智能没有人类的跨领域推理、抽象类比能力,也没有人类的主观能力如灵感、感觉和感受;更没有人类特有的灵魂、爱、意识、理想、意图、同理心、价值观、人生观等,这导致人工智能在未来很长一段时间内都无法很好理解人类的心理和行为是什么,在解决推理和情感问题时会不尽人意。

undefined设计除了解决问题外,还涉及对美的理解和创作,美感是对美的体会和感受,它是复杂的,包含了历史、文化、环境、情感等客观因素和主观因素,所以在不同的时代、阶级、民族和环境中,有着不同文化文化修养和个性特征的人对美的定义也不同。

人工智能依赖数据和经验解决问题,它能解决大部分智力可解决的问题,但解决不了需要情感和美感才能解决的问题。而设计的擅长领域,是人工智能不擅长的:跨领域推理、抽象能力、常识、审美、自我意识与情感。那么AI与设计的关系怎样的呢?

设计是为了解决问题。人工智能使机器代替人类实现认知、识别、分析、决策等功能,其本质是为了让机器帮助人类解决问题,也就是说,人工智能在一定程度上也是一种设计,它会创作出与人类思维模式类似的解决方案。所以AI与设计师是一种共生关系。因此设计师不用杞人忧天,担心自己被人工智能取代。

随着AI 技术的成熟,设计必定会发生新一轮的变化,在未来,更多领域和行业需要用到界面设计、人机交互等技能,各行各业的设计师需要掌握以上技能才能更好地服务当前业务。那么未来的设计将走向哪里呢?

undefined新一代的设计师是“与互联网共同成长的一代”,相信在未来几年里有更多的新晋设计师会掌握编程开发能力以及其他能力,综合素质会比目前的设计师更强,所以我们要保持终身学习,懂得如何将自己的能力和经验转换为优势,这样才能在设计道路上不被超越。

undefined那设计师可以从哪些方面来应对智能时代的机遇和挑战呢?

undefined每一代人都有被下一代人取代的风险,但有些很厉害的人就不容易被取代?因为他们在不断创造价值。无论在社会、行业还是在企业里,当具备一定的影响力后,他们能更容易积累人脉和资源,然后反哺自己的价值,就跟滚雪球一样,当雪球越大,他们越不容易被别人取代,设计师需要有这样的意识。

undefined设计师需要懂得更多领域的知识和技术才能拓宽自己的视野,这些领域包括但不局限于传感技术、网络技术、智能仿真技术、虚拟技术、生物技术、纳米技术等。因此科学与艺术是可以并且很有必要相通与交融的,设计师一定要学会跨界思考。人工智能时代下,数字世界和物理世界会逐渐融合,大到城市建设、公共服务、衣食住行和医疗;小到智能家居、穿戴式设备,这些机会将会留给已准备好的挑战者,所以设计师一定要拓宽自己的视野,不要把自己的目光局限在界面设计上。

undefined如果不想被人工智能领先,人类的设计应该是创新的(未成熟、未被发现规律的),包含更多元素的(更多复杂参数如历史、文化、环境、情感等),“设计”这个词语就涵盖了以上元素。人工智能在艺术设计上还远远达不到人类的水平,深耕艺术设计将会为设计师带来更多机会。

undefined在人工智能时代下,当产品基本都能满足永不需求时,能为产品带来活力和差异的除了自身的底层技术基础,更多的是艺术型设计师的理念和风格,以及自身的品牌。就像时尚品牌优衣库和Gucci,单件商品两者的品牌和设计所带来的的利润差距巨大,相信未来的人工智能产品也会面临类似的问题,设计师应该考虑如何为产品赋予更多价值,如何彰显用户的个性。

undefined既然AI是一个强大的工具,那么我们要思考如何运用它来创造更多的价值。AI能够快速便捷地获取大量信息,帮助设计师拓展自己的视野,不断更新自己的世界观,从新的视角看待问题和解决问题。除了快速获取信息外,设计师也应该考虑如何通过AI提高自己的工作效率,例如哪些纯劳动力工作交给AI去做效率会更高;哪些工作可以和AI一起协同完成更能激发创意。

undefined

最后,用一本科普书改编的话来结尾:一想到,还有95%的问题留给开发同学,我就放心了。

最后附上一张本文的脑图:

undefined


参考资料:

[1]阿里设计周.智能与计算.2021

[2]薛志荣.AI改变设计.2019

[3][美]詹姆斯·弗拉霍斯.智能语音时代.2019

[4][美]梅瑞狄斯·布鲁萨德.人工不智能.2018


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:西子zhulijuan 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


7000+超详细智能产品深度解析:智能面板篇

雪涛

智能家居越来越普及,智能化的生活是由一个个智能设备组成,这次通过近距离体验智能面板,来研究一下它们是如何提升产品体验的。

7000+超详细智能产品深度解析:智能面板篇

前言

随着互联网的发展,生活智能化越来越普及,各类智能产品逐渐出现到人们面前,在体验的过程中,其实里面有很多细节需要深挖和思考。很多产品细节的背后都是为了提升用户操作效率、兼容用户使用场景、满足用户情感表达,以最终达到对用户体验的提升。作为智能产品的设计师只有充分了解市面上的智能产品,才能设计出更好的产品。

7000+超详细智能产品深度解析:智能面板篇

什么是智能面板

开关对于每个人都不陌生,它用来控制设备的状态,传统开关的数量和要控制的设备数量有关,设备越多,开关越多,为了简化人们的操作,智能面板孕育而出,它不仅可以操控家中单独的设备,还可以对一系列设备进行联动控制。

1. 使用场景

室内近场控制,满足用户家中近距离控制设备的场景。

2. 产品选择

Gira、ORVIBO、绿米

为什么选他们?

  • Gira 从事智能建筑系统技术有 100 多年的历史,算是做智能开关的先驱;
  • ORVIBO、绿米国内做智能开关相对成熟的品牌。

3. 研究方向

本文将从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

设备基础信息

Gira g1

TFT 屏、KNX 协议、定价 8000 元起

KNX 属于欧洲总线技术,稳定性最好,需要从设计阶段介入,高门槛的技术要求让 KNX 难以实现全民普及。

ORVIBO 智能开关

多点触控电容屏、Wifi、蓝牙、Zigbee、定价 899 元

Wifi、蓝牙、Zigbee 属于无线通信技术,稳定性不如 KNX,但免布线,易扩展,利于全民普及。

Aqara 智能开关 S1 触摸屏

IPS 屏、zigbee 协议、定价 899 左右

通过以上分析,Gira 的人群定位是有全屋定制需求的高消费人群,其他两个品牌的人群定位是面向尝鲜体验的广大普通消费群体。

7000+超详细智能产品深度解析:智能面板篇

1. 功能点对比

通过功能列表中的对比发现,三个品牌的产品都通过场景联动设备执行来提高人们的操控体验,通过左右滑动来快速切换功能模块类型;

Gira 和 ORVIBO 支持快速返回首页、面板内排序;

ORVIBO 的个性化体验最好,它具有语音控制、设备自动添加、设备自动归类功能,这些差异点让它比其他两个产品更加智能。

7000+超详细智能产品深度解析:智能面板篇

Gira G1

以 Gira G1 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

1. 首屏

界面整体用以黑白灰为主,搭配少量颜色,给人简洁干净的感觉;

思考:智能面板除了具有功能属性,还具有装饰属性,黑白灰为经典搭配,可以更好兼容各种家装风格,还可以更好的展现内容;少量的颜色用来强调正在运行的设备状态。

7000+超详细智能产品深度解析:智能面板篇

2. 辅助颜色

辅助色大方向上使用两对互补色,在色环上形成了一个矩形,通过调节亮度饱和度达到统一和谐多彩的效果。

7000+超详细智能产品深度解析:智能面板篇

3. 层级划分

主要分为 2 大层级:功能卡片列表、设置为第一层级,设备控制为第二层级;

对于 gira 这种全屋定制的产品,家中一般会有很多设备,功能卡片放置在第一层级的好处是,便于用户浏览锁定目标功能卡片。

7000+超详细智能产品深度解析:智能面板篇

4. 首页布局

区域 1 显示 KNX 协议类型,室内外温度,时间;这部分内容占比很小,说明这些内容用户不常用,但用户会偶尔还是会看一下;

区域 2 为房屋名称,返回上一级、返回首页、设置、展示形式切换,这一区域全局置顶显示,用户在多级操作后,可以很快速的返回到首页;

区域 3 显示设备、场景的数量,用户可以清楚的掌握家中设备场景的数量;

区域 4 为设备场景列表,用灰色背景来强调主操作区域。

一屏最多 6 个设备,通过左右滑动来展示更多设备

思考:为什么不是上下滑动,而是左右滑动

有 2 点猜测:

  • 左右滑动下面的点相当于页码,用户在找某个设备的时候可以方便记住某个设备在第几个点的页面里
  • 在设备控制界面中左右滑动快速切换其他设备,这样可以统一用户对于左右滑动切换的认知

7000+超详细智能产品深度解析:智能面板篇

5. 卡片展示

卡片内容从上到下依次为设备场景 icon、名称、状态及快捷操作;

用户可以通过 icon 快速锁定设备类型,通过名称确定目标设备,进行快速操作;

各功能模块独立划分,快捷操作区域可以很好的兼容不同设备的功能键。

7000+超详细智能产品深度解析:智能面板篇

6. 设备控制区域布局

操控界面划分为 2 部分,一部分为信息展示区,内容为设备名称、所属区域;

另一部分为控制区,这部分区域固定,可以让不同的设备控制看起来更统一;

大面积区域留给核心功能,辅助功能布局在四周,便于用户准确操控。

7000+超详细智能产品深度解析:智能面板篇

7. 手势

设备控制界面通过左右划动快速切换其他设备,不需要返回菜单界面。

7000+超详细智能产品深度解析:智能面板篇

8. 手势

手掌长按屏幕,可唤起提前设置好的开关功能,这时面板相当于简单的开关,可以很快速的关闭开启所在区域的灯。

Gira 这样做还原了开关的本质,当想要开启或关闭该房间内的灯时,就不需要到菜单界面找这个设备了。

7000+超详细智能产品深度解析:智能面板篇

9. 设备控制

灯操控界面用刻度形式表现,每一度为一个刻度,并且还可以通过中间的加减号进行精确到 1 个百分比的亮度微调,品牌方想为用户打造成清晰准确调控的形象;

但在实际使用场景中,我们不大会对灯进行这么精确的调节。

温控器

温控界面同样可以精确调节,每 0.5 摄氏度为一个刻度;

温控的精准调节,就比较贴近我们日常的使用习惯,温控器控制界面是没有开关的,因为目标人群家中多数是中央空调,随便就可以关闭,对于大户型的用户来说是不友好的。

右下角的定时按钮可以让设备在特定时间内以某一状态运行。

7000+超详细智能产品深度解析:智能面板篇

窗帘

窗帘的状态值与操控条左右排列,这样的排布好处是可以让操控条长度最大化,便于用户控制;

窗帘控制界面只分为有调角度的和没有角度的;

窗帘操控条竖直排列,向上滑到顶部为窗帘全开,滑到底部为全关;

窗帘的行程和角度都用百分比的形式展现。

7000+超详细智能产品深度解析:智能面板篇

设计设备控制界面的思考方向一般有 2 种:

1. 界面控制方式要和设备的实际运行方式一致

这种思考方向要考虑实际窗帘有左右运行和上下运行之分,上下划动的操控方式来控制左右运行的窗帘会有认知上的偏差;

百叶帘的角度有正向和反向转动之分,如果只按最后的遮光百分比来做,会造成设备兼容问题。

也就是说为了模拟真实的操控方式,需要设计出若干不同种类窗帘控制界面。

2. 界面控制方式与设备运行结果关联

这种思考方式不需要考虑窗帘的种类及开合方向,将所有种类的窗帘行程及角度归为开、关两种结果状态,

就像 Gira 这样,只需要做两套界面就可以兼容几乎全部的窗帘设备。

Gira 竖排控制条的优势

如果横向布局,那么左右滑动切换设备时,会触发控制条左右手势,造成误操作。

7000+超详细智能产品深度解析:智能面板篇

背景音乐

设备列表中背景音乐卡片的快捷按钮很特别,由静音、播放、下一曲组成,我们设计的时候一般会做成对称的:上一曲、播放、下一曲,Gira 并没有这么做,因为在背景音乐的使用中,一般有几种需要快速响应的场景:用户在家中发起临时谈话,需要暂时安静一下;不想听了;这首歌的风格不喜欢;

背景音乐操控界面功能和音乐应用差不多,唯一不一样的是,底部可以快速切换歌单,可以很快速切换不同音乐风格。

7000+超详细智能产品深度解析:智能面板篇

文件夹功能

随着设备、场景的增多,用户可以根据自己的喜好将设备或场景归类放置,便于快速定位功能卡片;

点击文件夹卡片,进入到显示着众多功能名称的文件夹界面,点文件夹,才能进入功能卡片列表,为什么要多一个文件夹查看的界面。

我们想象一下有这样一种场景:面板中有几十个功能卡片,用户想开启娱乐场景,这个场景好像在客厅文件夹或走廊文件夹里,于是去客厅文件夹快速翻看这里面有没有,再点进去操作。

Gira 这样做符合用户在功能卡片多的情况下快速选择的习惯。

7000+超详细智能产品深度解析:智能面板篇

排序功能

可以通过拖动来调节设备卡片在菜单中的位置,省去了去后台设置的步骤;

定时功能

定时列表用具象的时钟来体现开始运行时间,还用黑白来区分夜晚和白天,对于用户来说扫一眼图片就可以知道运行时间,这种体验很好。

7000+超详细智能产品深度解析:智能面板篇

ORVIBO Mix Pad

以 ORVIBO Mix Pad 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

1. 首屏

整体运用深色色调,使用几何图案作为背景;

用白色体现基础信息,用色彩强调设备场景的状态及天气信息;

运用圆角元素,更加生活化。

7000+超详细智能产品深度解析:智能面板篇

2. 辅助颜色

颜色运用比较丰富,以蓝、橙两互补色为主,其他颜色分别为它们的邻近色;既能保持强对比,还能让颜色变得柔和。

7000+超详细智能产品深度解析:智能面板篇

3. 层级划分

主要分为 2 大层级:首屏、设备控制界面、场景列表、闹钟为第一层级;设备类型、设置为第二层级;

智能面板一般装在墙面,用户站立操作,用户不可能花太长时间来操控;

欧瑞博的人群为广大普通消费群体,家中的设备不会太多,设备控制界面层级前移,可以方便用户直达控制区,用完即走。

7000+超详细智能产品深度解析:智能面板篇

4. 首页布局

首页主要分为 2 个区域:

日期天气区

时间、日期、天气状况信息,可以满足用户日常出门关注的内容,并且在这个区域有多种表现形式供用户选择,既保持个性化还不失统一感。

快捷控制区

可以将常用的功能置顶在首页展示,最多设置 2 个,用户在首屏既能看到日期天气还可以控制设备,大大提升了屏幕的利用率和用户的操作效率。

这样做的好处:

当用户准备出门时,看了一眼面板上的天气,点一下关玄关灯,就可以直接出门了,不需要滑到灯的菜单界面找到玄关灯然后再关闭它,真的很方便。

底部有向上滑动提示,告诉用户下面还有重要内容。

7000+超详细智能产品深度解析:智能面板篇

5. 卡片展示

卡片内容左右排布,从左到右依次为 icon、名称及状态、快捷控制,这种排布的好处是可以缩小每个卡片的高度,从而提高屏幕利用率;

但有个问题就是,左右排布的方式,内容最多呈现 4 个文字,需要考虑这几个字能否清楚的定义该卡片功能。

7000+超详细智能产品深度解析:智能面板篇

6. 上滑手势

上滑可以查看全部功能卡片,给用户在手机上浏览信息的熟悉感;

在新的操控设备运用用户熟悉的交互方式可以降低用户的学习成本;

移动端上常见的手势对应结果有:左右滑——代表切换,向下滑——代表唤起相关功能设置,向上滑动——浏览更多信息。

7000+超详细智能产品深度解析:智能面板篇

7. 左右滑手势

用户在首屏左右滑动就可以切换不同功能模块,不需要返回上一级,在设备类型少的情况下,这种盲操会比较方便。

7000+超详细智能产品深度解析:智能面板篇

8. 下滑手势

下滑进入功能类型选择、系统设置界面,这一区域相当于导航,可以实现功能模块间的快速切换。

7000+超详细智能产品深度解析:智能面板篇

9. 手势问题

多种手势的组合可以在有限的屏幕内操作更加灵活,但手势太多会带来一些问题:

  • 误操作问题,在空调界面,左右切换设备时,容易触发空调温度操作;
  • 认知上的负担,在欧瑞博面板的逻辑定义里,首屏和控制界面属于同一层级,然而上滑手势只能在首屏操作,在设备控制界面上滑就无法使用,下滑手势却可以全局操作,这里面的逻辑会让用户混乱。

针对以上问题解决的方法可以是:

  • 改变空调左右滑动设置温度的操控方式;
  • 首屏和控制界面层级做区分,或简化手势。

7000+超详细智能产品深度解析:智能面板篇

10. 场景运行效果

场景卡片分为未激活、运行中、运行结束三种状态;

场景运行状态变化在卡片 icon 区域体现,既传达了运行的过程,又不会打扰到用户。

7000+超详细智能产品深度解析:智能面板篇

12. 卡片首页置顶

点击卡片列表最底部的编辑按钮,可以选择将某一功能卡片置顶到首屏,方便用户快捷操作。

7000+超详细智能产品深度解析:智能面板篇

13. 设备控制区域布局

将普通灯、场景、门窗等操控方式相近的设备进行了归类显示,并且和空调、色温灯、背景音乐等设备放置在同一层级;

从交互体验层讲:由于家里的普通灯、场景、门窗的操控方式简单统一、数量多,按照类别整合在一起便于查找控制;

从视觉层讲:设备操控界面布局形式多,会给用户造成整体视觉上的不统一,增加学习成本。

7000+超详细智能产品深度解析:智能面板篇

14. 设备控制

空调

空调控制界面,只能通过左右滑动以整数的形式来调节温度,开启中的时候,背景会有对应模式的色彩氛围效果,给用户更直观的感受;

底部只保留用户最常用的模式、风速、风向三个功能。

色温灯

色温灯界面默认为用户推荐 6 种不同场景下使用的色温选项,底部提供亮度调节功能,用户只需要去选择,大大缩短了用户的操作路径。

个性推荐在电商类产品中很常见,推荐机制基于对用户行为习惯的分析,需要强大的后台数据支持,智能家居这一块通过穷举用户生活中的设备使用场景、目的从而提炼出对应的功能选项可以大大提升产品使用体验。

7000+超详细智能产品深度解析:智能面板篇

窗帘

窗帘控制界面采用半写实风格,给用户更加直观感受,学习成本低,拖动窗帘区域就可以进行行程的控制,由于没有微调按钮和行程状态百分比,所以无法做到窗帘精准控制;

选择这种写实的设计风格,需要考虑设备控制界面布局、样式对新增窗帘类型的兼容性。

7000+超详细智能产品深度解析:智能面板篇

背景音乐

背景音乐默认界面只保留了当前播放音乐封面元素,更多复杂操作被隐藏到了下一级界面,用户在当前界面可以进行暂停、播放、收藏等简单操作;

在小屏幕中做设计时,有时候会在一个层级界面中堆砌许多功能按钮,使界面变的臃肿,一来容易让用户误操作,二来让用户找不到重点功能,操作效率低下;

我们在处理这些信息时应该结合使用场景,按用户的使用频率进行权重划分,将权重低的进行隐藏处理,突出核心功能,减轻用户操作负担。

智能家居厂商大多都是靠卖硬件赚钱,欧瑞博巧妙的运用会员机制结合背景音乐功能来售卖音乐服务(49 元一年),更加具有互联网商业思维。

7000+超详细智能产品深度解析:智能面板篇

15. 语音控制

在语音设置中,可以选择是否开启语音控制,系统默认 2 组唤醒词激活语音控制;

欧瑞博为用户提供了更便捷的语音控制功能——快捷口令,说出指令就可以快速执行,由于没有房间、设备名称的限定,这个功能只能实现面板内所有同类型设备的开或关,适用于小户型简单的场景。

7000+超详细智能产品深度解析:智能面板篇

16. 快速添加设备

传统上添加一台新设备需要:选择要添加的设备——选择网关——输入正确Wifi密码——进入设备配网流程——配网成功——设备名称设置,操作流程繁琐,中间稍微有些环节没有操作对,最后就无法成功添加设备,欧瑞博通过简化中间过程,成功解决了这一痛点。

7000+超详细智能产品深度解析:智能面板篇

17. 个性化设置

用户可以在面板中直接设置首屏的风格样式,系统一共有 3 种风格外和一个随机演示选项供用户选择,并且这三种风格的功能架构是一样的,只是对背景图、元素大小、布局做了设计区分。

7000+超详细智能产品深度解析:智能面板篇

AQARA S1

以 AQARA S1 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

1. 首屏

整体使用黑色做背景,用白色体现基础信息,底部的色块元素貌似起装饰作用,和天气情况并没有联系;

首屏主要分为日期时间和环境状况 2 个区域,天气、温度、湿度、空气质量信息并行排列,个人认为用户对这 4 个信息的关注度是不一样的,看看我们手机上的天气 app 的信息排布就知道了,这样并列排布会让用户分不清主次。

7000+超详细智能产品深度解析:智能面板篇

2. 辅助颜色

颜色以蓝色及其邻近色为主,搭配少量的对比色,整体色调统一。

7000+超详细智能产品深度解析:智能面板篇

3. 层级划分

主要分为 2 大层级:首屏、设备控制界面、场景列表为第一层级;设置为第二层级;

形式和欧瑞博一致,都是为了让用户更便捷的操控;

但进入设置页面,设置主题类型的步数比欧瑞博的多一步,用户设置完成后还得一步步返回,这里可以将用户常用的“显示”内容上移一个层级,减少页面跳转次数;

AI 手势这种有特色的功能隐藏的太深,不便于用户的使用。

7000+超详细智能产品深度解析:智能面板篇

4. 左右滑手势

绿米同样运用左右滑动进行首屏、场景列表、设备间的快速切换,对于相同类型的窗帘设备,并没有整合成列表放置同一屏,而是另起一屏,设备多的时候就会存在操控效率低的问题。

7000+超详细智能产品深度解析:智能面板篇

5. 下滑手势

下滑进入系统设置界面,这个区域只有一个设置功能,有点浪费空间,索性就把设置下一级的功能选项移到下拉页面,还能提高用户的操作效率。

7000+超详细智能产品深度解析:智能面板篇

6. 场景运行效果

场景运行过程以进度条的形式在卡片底部体现,对用户的干扰小,并且只传递出开始到结束的过程,没有成功提示,这种逻辑是正确的,因为面板只是传达出了一个命令出去,具体什么时候传出、接收设备是否正常运行,这些信息面板是获取不到的。

7000+超详细智能产品深度解析:智能面板篇

7. 设备控制区域布局

场景列表与设备控制界面一个层级,温控器、调光灯运用半圆的元素作为控制区域,新颖的设计风格是绿米智能面板的特色;

仔细看,会发现设备控制界面不统一,相同功能的开关按钮,在不同的设备中位置却不一样,还有就是普通灯是偏写实的 3 路开关样式,其他界面却是抽象的圆环几何样式,不统一的界面会增加用户的学习成本。

7000+超详细智能产品深度解析:智能面板篇

8. 设备控制

空调

空调控制界面,通过上下滑动以整数的形式来调节温度,新颖的操控方式让用户加深对品牌的印象;

底部开关、模式、风速同级展示,这里存在几个问题:1、用户在设置空调时很容易误点关闭按钮;2、缺少常用的风向调节,功能缺失造成较差使用体验。

普通灯可以在 App 中设置 1、2、3 路开关样式,这种形式同样存在问题:一屏最多放三个开关,屏幕下方大片区域空置,利用率低。

7000+超详细智能产品深度解析:智能面板篇

窗帘

窗帘控制界面显示窗帘的名称及行程状态;窗帘的开、合,绿米给了 2 种方式:滑动控制、全开全关按钮;

增加暂停功能可以提升使用体验,因为用户在操控窗帘设备时,会以窗帘实际的运动行程为依据来决定窗帘需要开合到什么程度,而不是看界面上窗帘的位移,当用户觉着窗帘行程可以了,按暂停键就可以准确停留在用户想要的位置上。

7000+超详细智能产品深度解析:智能面板篇

调色灯

调色灯用户可以自定义或选择系统推荐的颜色;

为了涵盖大多数的用户偏好,调色灯的 4 个推荐色采用色环上差距大的颜色,并且根据用户使用场景筛选出常用的几种色调,排除了用户不常用的绿色、紫色、粉色。

7000+超详细智能产品深度解析:智能面板篇

9. 开机默认页设置

用户可以根据自己的使用偏好,将最常用的功能模块页面放到第一屏,这个功能在一定程度上可以提升操作效率,当设备多,还是需要切换很多屏。

用户使用面板分为:紧急情况、常用情况,紧急情况不一定常用,就像出门需要关灯;常用情况不一定紧急,例如看时间

绿米为了让用户便捷,给出默认页自定义功能,存在的问题是:如果用户把灯作为开机第一页,那么日常中看时间要翻页;日期时间作为第一页,开关灯需要翻页,都不是特别便捷。实际上可以做成像 Gira 那样,通过增加手势唤起快捷开关功能,首屏留给日期时间,既满足了日常需要,又能满足紧急需求。

总结

通过上述分析,我们得到了这些产品的共同点与差异点,以及背后的思考方式,了解共同点可以让我们弥补自己产品的不足,不被市场淘汰;学习它们差异化的思考方式可以帮助提升我们产品的竞争力。

作为一名合格的设计师,除了学习视觉技法和理论,还应该多玩、多看、多思考真实的线上产品,体验其核心操作流程,推敲和思考产品设计背后的原理和逻辑,才能不断提升体验设计思维。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:Aaron杜斌 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


超详细智能产品深度解析:交互动效篇

雪涛

智能产品的设计过程中,常常用到动效设计,那么动效设计用在哪些地方及对提升智能设备体验带来什么帮助,是这篇文章要讲的。

上期回顾:

流畅的操控感

通过大小、位置和透明度的变化,使得界面与界面之间、界面上元素的出现和消失都有关联,让用户和产品的交互过程更流畅,给用户更好的体验。请看以下案例:

1. Nest 温控器控制界面

超详细智能产品深度解析:交互动效篇

Nest 温控器从时钟转变到温控调节界面的过程中,时钟的指针向圆心收缩,周围的时间刻度生长并一起向中心收缩,指针收缩动效对应温控调节界面温度值的显现,时间刻度的生长收缩动效对应温度刻度的显现,由于元素之间进行有关联的变化,操控过程中会有丝滑流畅感。

2. Gira 窗帘设备

超详细智能产品深度解析:交互动效篇

当用户调节行程时,中间的控制点跟随手指实时运动,而进度条会有延时拖拽效果。为什么会是这样呢?原因是:用户在控制面板上的操作是需要由面板向窗帘设备发送指令的,也就是说面板上控制窗帘到窗帘设备运行中间会有一小段时间间隔,用户会有延迟感,所以 Gira 在控制窗帘行程的过程中,进度条为了与窗帘设备运行同步,加入延时效果,让用户感觉操控响应快的错觉。

3. Nest 新款温控器

超详细智能产品深度解析:交互动效篇

用户在滑动切换功能时,功能 icon 会按照先后顺序由大到小变化,由于连续性运动,每个元素运动都有衔接,会有流畅操控感受。

4. Nest 智能锁

超详细智能产品深度解析:交互动效篇

用户输入密码后至锁打开这段时间,数字依次向下消失,锁 icon 逐渐出现并且打开,体现出柔缓的感觉;实际上动效有时候可以弥补设备执行缓慢的不足,当设备需要长时间才能执行时,这段时间加入动效,动效运行时间和设备实际执行时间一致,用户就会觉得很顺畅;也可以让动效运行时间小于设备执行时间,这时用户会觉得操控反应更快。

直观明确,降低用户学习成本

通过动效能够帮助用户使用功能,对功能的方向、位置、唤出操作、路径等进行暗示和指导,方便用户在最短的时间内来学会操作产品的一些功能。请看以下案例:

1. Amazon Echo

超详细智能产品深度解析:交互动效篇

用户第一次设置好监控后,通过放射动效提示用户双击屏幕,通过上下扩张的箭头动效提示用户可以通过手指来进行监控画面的放大缩小。

2. Lenovo Smart Clock

超详细智能产品深度解析:交互动效篇

当设备第一次配好网重新开启后,通过遮罩、圆点大小位置运动搭配文字告诉用户长按屏幕可以控制什么功能。

超详细智能产品深度解析:交互动效篇

顶部弧形的上下变化,告知用户下拉可以控制什么功能。通过简单的元素既能起到提升用户的作用,还不打扰用户。

强调内容

通过动效给用户展示需要的内容及产品侧想让用户了解的内容,让用户更乐意更易于理解,强化功能感知。请看以下案例:

1. B&O 触控音箱

超详细智能产品深度解析:交互动效篇

双击音乐标题,进度条从左向右生长出现、操控点放大出现,既强调了进度条这个隐藏功能,还暗示用户可以拖动操控点从左向右拖动操作。

2. Google Nest Hub 调光灯界面

超详细智能产品深度解析:交互动效篇

用户从列表进入调光灯界面时,调光条灰底从左向右弧度生长,随后当前亮度条生长出现、亮度值出现,先暗示了用户可以从左向右弧度操作,后强调了当前设备状态。

3. Google Nest Hub 睡眠质量检测界面

超详细智能产品深度解析:交互动效篇

用户查看睡眠质量数据时,睡眠质量标题信息渐隐渐现,睡眠数据条、数字生长,让数据展示有主次之分,强调了用户想要看的内容据,更人性。

提升用户掌控感,让用户心中有数

产品设计里面有一个非常重要的原则:让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示,还有一种方式是让用户知道当前产品运行的状态,是正在等待还是正在加载,还是正在下载或变化,那这种状态的告知也是增强用户操纵感的方式之一。请看以下案例:

1. LG 智能洗衣机

超详细智能产品深度解析:交互动效篇

当用户往洗衣机里加入衣物后,出现量杯倒入洗衣液的动画,告知用户当前洗衣机正在进行哪一个环节,我们分析一下这里加入动效的用意,首先,一般的洗衣机没有屏幕,有的话也就显示当前的功能选项,LG 的这款洗衣机是液晶屏,那么它的定位就是高端人群,通过融入动效,打造差异化,提升使用体验,加深用户对 LG 品牌的印象。

2. Lenovo Smart Clock 起床闹钟功能

超详细智能产品深度解析:交互动效篇

用户设置好起床时间后,系统会根据时间段自动进行背景颜色的过度,来模拟天色的变化,直观的告知用户当前的时间是白天还是晚上或是黄昏。

3. Orvibo 除湿界面

超详细智能产品深度解析:交互动效篇

设备进行除湿的过程中,面板上圆形元素进行旋转,伴随粒子扩散效果,模拟水分子消失的过程,直观形象的告诉用户现在正在做什么。

4. Lenovo Smart Clock 猫眼通话界面

超详细智能产品深度解析:交互动效篇

用户接通猫眼后,通话 icon 进行电播扩散动效,模拟声波扩散效果,准确的向用户告知当前通话中的状态。

5. Google Nest Hub 语音唤起

超详细智能产品深度解析:交互动效篇

当用户说话唤起语音控制时,原先的全屏画面收缩,响应用户的指令,四周留白,为通话内容提供展示空间,然后彩色点元素起伏变化,通话内容出现,告知用户已接收到指令;随后彩色点元素旋转加载,体现正在执行中。在语音控制的每一个环节都加入动效反馈,会让用户觉得他不是在和一个冰冷的机器讲话,富有人情味。

6. Orvibo 窗帘控制界面

超详细智能产品深度解析:交互动效篇

运用轻拟物效果和与实物一致的运动方式,用户可以直观的看到窗帘的行程位置与开合状况,大大的提升了产品易用性。

明确层级关系,提升用户理解效率

面对一款新的智能产品时,用户可能不知道怎么操作它,通过动效向用户交待页面内容之间的关系,让用户清楚的知道从哪里来,到哪里去,更易于理解从而可以快速上手使用。请看以下案例:

1. Nest 温控器设置界面

超详细智能产品深度解析:交互动效篇

温控器的设置模块通过左右滚动以便在有限的屏幕中展现,那么模块的下一级页面跳转做成像 App 那样左滑切入是无法明确层级内容的,此时需要一个与左右滑动不一样的动效来区分模块的切换,Nest 运用翻转效果,强化了层级感,清楚交待了页面翻转后面的内容与页面前的关系。

2. Google Nest Hub 设备控制界面

超详细智能产品深度解析:交互动效篇

用户从顶部导航中进入设备列表过程中,设备列表页面从右向左进入,暗示用户“当你想返回上一级,可以左滑离开哦”,用户上下滑动设备列表时,屏幕左边滑动条出现,更加明确了“左滑返回上一页”的功能;

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

当用户通过列表进入操控界面以及切换功能页时使用淡入淡出的效果,弱化它们之间的跳出感,来强调它们是一个层级的内容,从细微处可见 Google 的设计师在动效的使用、选择上非常克制,值得我们学习。

3. Google Nest Hub 日程提醒界面

超详细智能产品深度解析:交互动效篇

用户发出查看日程安排的命令时,日历界面从左到右进入,告诉用户这是一个新的页面,接着日期数字 21 进行大小位移变化,月份不做变化,为了强调这是 21 号的日程,2 条日程信息按照时间先后从下向上运动,交代了日程处理的优先级。Google 设计师将信息展现的每一步都让用户看的清楚明白。

品牌调性透传

在可用性良好的前提下,通过一致性、趣味性的动效设计和创新的交互方式为产品增加亮点,带来更惊喜的体验,传达产品的气质与态度。请看以下案例:

1. Google 多端运行动效

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

在品牌塑造上,Google 已被证明做得极为成功,而且在视觉表现层面,Google 系产品具备着“一致性”和“连贯性”,这让 Google 获得了品牌识别上的利益。在不同设备的动效设计中,Google 都统一使用代表品牌的红、黄、蓝、绿颜色和几何图形,遵循化繁为简的设计准则,通过简洁贴近真实的运动方式,让产品更有人情味,让用户更加专注于内容。

2. 智能圆镜

超详细智能产品深度解析:交互动效篇

用户在靠近圆镜设备时,镜面中心人脸识别 icon 缩放,周围点元素波动扩散,吸引用户的同时,传达出科技感。

3. Apple HomePod 命令反馈界面

超详细智能产品深度解析:交互动效篇

当 HomePod 在执行一项指令时,顶部的屏幕会出现彩球融合翻转动画,多变朦胧的色彩可以唤起用户情绪,球体间的融合过程让产品生动有趣,让用户感受到品牌的人情味。

4. Apple Watch 洗手提示界面

超详细智能产品深度解析:交互动效篇

Apple Watch 洗手功能开启后,会有一个 20 秒的倒计时,倒计时以肥皂泡沫消失扩散的形式展现,很贴合当前洗手的情景,让原本一个普通的倒计时变得生动且有趣味性,用户更加乐意使用,强化了用户对品牌的感知。

5. 智能温控器

超详细智能产品深度解析:交互动效篇

这款温控器已经有一定年代了,当时那个年代,能用到温控器,那就很有科技感了,智能温控器还将流动的线条动效运用至透明背景上,向用户传达了超前的科技感,只要见了就会记住这款产品。

下面为大家整理了一份动效在产品中的应用场景以及设计思路:

超详细智能产品深度解析:交互动效篇

总结

实际上智能产品中的动效设计,并不是要向用户炫技,也不是做的越炫酷越好。动效是以解决问题为目的的一种手段。我们要去观察现有好产品的动效设计落地点及分析他们的小心思,从而运用至自己产品中,提升产品使用体验。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:Aaron杜斌 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

雪涛

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

相比于去年发布的 macOS 11 和 iOS 14 的 WWCD 2020,今年的 WWDC 确实是显得变化没有那么大,在系统视觉层面上,macOS 12,iOS 15,iPadOS 15,watchOS 8 似乎并没有那么多「革命性」的改变。老实说视作为一次日常的产品功能迭代就好了。

不过,iOS 15 当中有不少颇为不错的新功能,比如实况文本(Live Text),功能更强的 Spotlight,全新的 Safari 浏览器,全新的安全机制,等等等等,这些功能足以为用户提供更好更安全的使用体验,但是另外一方面,有很多功能对于设计师和开发者这边有着巨大的影响。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

目前来看,Facetime 的多人通话的升级,共享当前界面和屏幕给他人的 Shareplay 很大程度是为了应对全球疫情之下,用户被封闭和隔离的使用场景,这些功能需要系统级的支持。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

而从照片中获取文本信息的实况文本功能、超强的聚焦搜索功能,还有新的相册自动生成回忆视频的功能,则和苹果自身在机器学习领域的挖掘息息相关,对于想要在这一领域有所建树的团队,可以参考这些内置的功能,如何用好神经网络的软硬件,可以参考相关的开发文档。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

关于 iOS 15 在我看来最值得聊且对于设计和运营有较大影响的部分,其实是全新的通知推送系统,以及 「专注模式」这一功能。在整个发布会结束之后,苹果的 HIG 页面当中,只有一小部分的内容随着新系统的发布而随之更新了,而这其中就包含信息推送和 「专注模式」的部分。

信息推送和当下用户日常内容和信息消费习惯紧密关联。越来越多的 APP 和越发频繁的信息推送给用户带来的信息压力已经成为一个广泛存在的问题,一直到今天,这个问题都没有一个足够完美的解决方案。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

针对注意力管理的问题,iOS 15 所给出的解决方案算是一个比较折衷且比较合理的处理机制。

1、视觉优化

在基础的信息推送内容的视觉设计上,iOS 15 针对通知栏的小卡片的排版视觉进行了优化,放大了 APP 图标并置于卡片的左侧,对于通讯类 APP 当中用户发送的信息,则采用了用户大头像 + APP 小图标 的组合形态,增加信息来源的辨识度,并以这种形式更清晰地告知用户,所收到的信息的来源,以及它的属性。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

iOS 15 还可以根据用户设置的时间表或者所处的模式,快速收集每天收到的的通知,构建成为一个较大的通知摘要大卡片,而摘要的内容呈现将会按优先级进行智能排序,位于顶部的卡片相关度最高。(所以 APP 通知推送会因为这种机制开始一轮新的内卷么?)

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

值得注意的是,新的推送摘要因为是按照优先级排列,所以各种 APP 当中优先级最高的通知将会被汇总到一起。

摘要信息的组织并不是借助单一算法来实现的,同样的,其中用到了机器学习的功能,借助神经网络芯片来更好地对信息进行针对性的筛选,并推送给用户,以图更好的体验。

2、通知管理层级的提升

在原本的 iOS 14 当中,对于单个 APP 的推送管理方式比较简单,除了「关闭」,就只能选择「隐式推送」,

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

在 iOS 15 当中,用户可以针对单个 APP 的推送进行更细致的选择和处理:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

更多选项当中,可以选择让 APP 「静音一小时」或者「今天不再推送」以避免干扰。

整个 iOS 15 的通知处理的机制都是围绕着降低用户信息载荷的目标来进行的,除了管理层级的细化,专注模式更是之前 iOS 14 中「勿扰模式」的全面升级。

其中,为了对推送通知进行更加细致的处理,通知功能的类型也有了更为详细的分类,并且在 HIG 设计规范进行了更为详细的说明。相关详细内容在第四节。

3、围绕场景构建的专注模式

「专注模式」是为了应对信息过载的问题,并且试图改善推送通知影响用户注意力的情况,希望借此来帮助用户更加专注于进行中的任务。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

系统基于常见的几个使用场景,提供了「个人」「工作」「睡眠」三个场景,并且保留了之前的「勿扰」模式,单击底部「+」号还能添加更多模式,其中还包括「驾驶」和「游戏」等不同的预设场景模式。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

除了「勿扰」模式之外,其他模式下,用户可能会收到与这些场景相关的应用,而用户可以在 iOS 15 的系统智能推荐之下,快速增删当前模式下可以推送通知的 APP。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

在指定模式下,用户收到的推送通知的内容、类别都会高度相关,降低干扰性。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

同样的,为了搭配不同的专注模式,还可以基于模式设置特定的主屏和桌面小插件,成为当前模式下的信息和管理中心,更加方便地管理当下的任务,达到「专注」的目标。

而「专注模式」更为智能的一点,是系统会根据地理位置信息,有意识地提醒用户是否要切换模式:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

同时,当用户将手机设为特定模式之后,绑定同一帐号的其他设备也会自动切换到同一专注模式之下,达到统一管理的目的:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

当然,除了基于位置进行「专注模式」的切换之外,用户可以通过右上角下拉的「控制中心」对「专注模式」进行手工的切换管理。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

4、通知系统规范

而无论是新的通知系统还是「专注模式」,在信息管理的颗粒度上都比以往更加细致,这很大程度上是基于新的推送通知的类别管理,这一部分内容在 HIG 设计规范上已经得到更新,并且有着非常详细的说明。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

下面是关于推送通知章节更新的主要部分(考虑到篇幅,对部分非关键内容进行了精简)。

https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/notifications

4.1、通知的管理

用户希望收到他们关心的事情的通知提醒,但并不总是喜欢被打扰。为了帮助用户管理整体体验,需要在发送任何通知提醒之前获得用户的许可;系统允许用户在「设置」>「通知」中更改,并调整推送提醒样式,可以预览,并且可以和 Siri 交互。用户还可以在「设置」>「专注」中让所有通知都静音(某些地区的政府警报除外)。

相关开发人员说明,请参阅 UserNotifications

4.2、帮助用户管理通知

在 iOS 15 及更高版本中,用户可以通过指定专注模式时间,设置专注模式下通知推送的具体行为,而进行细粒度的管理。专注模式可帮助用户在他们为睡眠、工作、阅读或驾驶等不同状态下,定义这一时间段内通知推送的具体行为。

用户可以筛选出哪些通知或者 APP 可以在特定专注模式下,被推送给用户。比如在工作专注模式下,用户可能希望收到来自同事、家人以及工作相关的 APP 推送的信息,用户可能还希望收到时效性较强的通知。

尽管专注模式下,可能会有一些通知被延迟推送给用户,但是通知信息在收到的时候即立刻发挥作用。

4.3、通知的类型

想要定制化地推送信息,那么你需要确保你的 APP 能够支持信息直接推送,就像电话或者短信样的通讯通知(communication notifications),而其他类型的弱时效性的推送则使用非通讯通知(noncommunication notifications) ,而想要支持通讯通知,你需要引入 SiriKit ,这也意味着用户可以使用 Siri 来进行自定义通知推送行为。具体的参阅INSendMessageIntentUNNotificationContentProviding

为了更好的方便用户针对推送通知进行管理,你需要对你的 APP 的推送通知的中断级别进行定义,不同级别的定义决定了通知何时推送,系统在不同状态下是否要推送,以及如何处理。目前,将推送通知的中断级别划分为4个等级:

  • 被动型通知。用户可以在闲暇时候查看的推送通知,比如周边餐厅推荐。
  • 活动型通知(默认状态)。用户可能希望了解这个信息何时能够推送,比如最喜欢的球队的最新比分。
  • 时间敏感型通知。需要用户立刻关注到的通知,比如账户安全相关的通知和快递通知。
  • 关键通知。直接影响到用户声明安全和需要立刻得知且优先级超高的公共通知,比如来自政府机构的安全通知,或者医疗保健类应用的推送。

具体的属性还可以参考下面的表单:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

值得注意的是,这4个层级是逐渐递进的,因为后两种推送通知需要的优先级较高,所以最好获得用户的许可。

此外,在设计通知推送系统的时候,还有3个关键的注意事项:

  • 需要对每个通知的优先级和中断级别进行准确的判断,不要让非关键性的通知占用专注模式下的用户注意力,这样才能获得用户的信任。错误的优先级设置会导致用户对你的 APP 产生不信任感。
  • 仅将与此刻紧密相关的事件信息设置为被时间敏感型通知,这样的时效性才能对应得上它的优先级。具体可参阅 UNNotificationInterruptionLevel
  • 不要将营销类信息推送设置为时间敏感型通知。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:陈子木

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



轻松三步搞定数据统计分析:统计+分析+可视化!

雪涛

我们都知道,数据是支撑决策的重要依据,于是我们可以看到,几乎所有的产品,都会具有数据统计分析的功能模块。往大了说,比如数据中台;往高端了说,比如数据大屏、数据看板、数据驾驶舱;往本质了说,其实就是数据的统计分析。作为一个非数据型产品经理,或者是初级产品经理,该怎样设计这个功能模块呢?

如果你刚好为此苦恼,不妨试一下我最近研究的这三步曲:统计+分析+可视化!

前言

关于数据统计分析,首先表达一个我蛮认同的观点:

好的数据分析师,要像眼科医生一样:配眼镜可能有很多专业的方法,有很多专业的工具,可在配的过程中,医生纠结的不是自己的理论,而是关注用户看得清不清楚,不断问用户“这样可以吗?这样更清楚吗?再这样试试呢?”

—— 接地气的陈老师

相信在工作中,大家经常会碰到一些“孔乙己”式的数据统计分析,一开口就是“xx 指标体系”,再加上一大堆什么“权威的、标准的、BAT 认定的”这之类的修饰词汇。这特么就是典型的虚假数据分析啊,因为这些大多数时候,耗时费力,却没有解决实际问题。

并且这种虚假的数据统计分析,还有它遵循的理论模型:

轻松三步搞定数据统计分析:统计+分析+可视化!

而真正的数据统计分析,就像太极拳的精髓一样:“只重其义,不重其招,你忘记所有的招式,就练成太极拳了。”(以解决业务问题为根本)

统计

要搞数据的统计分析,那第一步我们得先有数据,也就是数据的统计工作。提起数据统计,那自然绕不开数据埋点。如果你们公司从来没整过埋点这个事,那也不用大费周章,因为界内已经有很多成熟的埋点公司了,例如神策、友盟等等,直接花钱办事就完了,也不贵。

我们今天研究的,是通过埋点,能够获得哪些数据呢?总结下来,大概有这么五类:

埋点获取五类数据

  1. 整体概况
  2. 用户获取
  3. 活跃与留存
  4. 事件转化
  5. 用户特征

来来来,我们逐个剖析一下,这几类数据,具体都包含什么,以及获取这些数据有啥用。

1. 整体概况

轻松三步搞定数据统计分析:统计+分析+可视化!

实时数据意义:可以获取到每个小时的产品实时数据,帮助你了解产品目前的实时情况。

使用概况意义:产品整体的使用情况,包括用户量、访问情况、留存等,帮助你对产品整体指标有一个大致的了解。

2. 用户获取

轻松三步搞定数据统计分析:统计+分析+可视化!

渠道访问意义:每个渠道的用户的使用情况,包括渠道中新用户的占比、留存等,帮助你了解产品在获客层面上的优势与不足。

版本数据意义:每个版本的使用情况,帮助你了解在产品升级的过程中,是否在活跃和留存方面有所改善。

3. 活跃与留存

轻松三步搞定数据统计分析:统计+分析+可视化!

访问流量意义:产品的每日访问数据,指标集中在新老用户的访问行为上,提供访问次数、时长、次数分布、访问时段高峰等指标,帮助了解新老用户在使用产品时的一些行为特征。

用户留存意义:提供用户 7 日,次日,次周,次月留存的数据,帮助你了解新老用户的使用粘性。

4. 事件转化

轻松三步搞定数据统计分析:统计+分析+可视化!

自定义事件意义:用户自定义关键事件,系统会自动生成该事件的发生次数、人数以及分布情况,也就是能够看到用户都在干啥。

收益类事件意义:用户自定义收益类事件,系统会自动生成该事件的发生次数、人数以及分布情况,会根据你选择的数值类型属性,计算该数值的总值、人均值以及次均值。也就是能够看到用户都咋花钱的。

5. 用户特征

轻松三步搞定数据统计分析:统计+分析+可视化!

用户特征意义:能够看到我们的用户,都是哪些牛鬼蛇神~

分析

有了埋点的数据以后,那就是怎样利用这些数据,充分发掘这些数据的价值了。数据分析的套路就更多了,把下面这些学会,应该“二八原则”里面的“八”就能够搞定了~

1. 常见的数据分析指标

轻松三步搞定数据统计分析:统计+分析+可视化!

综合性指标:反映产品的整体情况。

流程性指标:反映用户的使用行为。

业务性指标:反映具体的业务情况。

2. 常见的数据分析维度

轻松三步搞定数据统计分析:统计+分析+可视化!

数据细分:通过不同的细分维度分析,往往可以追溯到问题发生的原因,还能为后续的一些动作提供参考依据。

数据对比:没有对比就没有伤害,一方面是横向比较,即自身和别人进行对比,如常见的同比、环比;另一方面是纵向比较,即自身和自身进行对比,比如行业竞品、全站数据、AB 测试等。

3. 常见的数据分析方法

轻松三步搞定数据统计分析:统计+分析+可视化!

HEART 模型:Google HEART 模型的提出,可以让大家反思自己的产品设计思维,同时运用相关设计工具去提高 HEART 五项指标来完善用户体验,打造更好的产品。

AARRR 模型:该模型出自于《增长黑客》,它是在 2007 提出,当年的获客成本还比较低廉,而这种模型很简单又很直观地突出了增长的所有重要元素,所以这个模型很长时间内都很受欢迎。

RARRA 模型:而现在获客的成本与日俱增,市场情况和 2007 年已经完全不同。现在黑客增长的真正关键在于用户留存,而不是获客。于是,一个突出了用户留存重要性的模型 RARRA 诞生了。

可视化

有了统计的数据以及分析的维度之后,最后一步工作就是可视化啦!

而想要完成这一步,又快又好的方法,那自然就是参考各种规范啦,首先我们可以去一个叫做「e-charts」的网站,去查看各种可视化图表,因为开发很多时候,就是依照这些开源的图表库进行撸代码的~

轻松三步搞定数据统计分析:统计+分析+可视化!

而我们设计的时候,就需要借助各种原型组件啦。数据可视化的内容有很多,我们来举几个典型例子:

1. 折线图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:选用的线型要相对粗些,线条一般不超过 5 条,不使用倾斜的标签,纵坐标轴一般刻度从 0 开始。预测值的线条线型改为虚线。

2. 柱形图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:同一数据序列使用相同的颜色。不使用倾斜的标签,纵坐标轴一般刻度从 0 开始。一般来说,柱形图最好添加数据标签,如果添加了数据标签,可以删除纵坐标刻度线和网格线。

3. 条形图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:同一数据序列使用相同的颜色。不使用倾斜的标签,最好添加数据标签,尽量让数据由大到小排列,方便阅读。

4. 饼图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:把数据从 12 点钟的位置开始排列,最重要的成分紧靠 12 点钟的位置。数据项不要太多,保持在 6 项以内,不使用爆炸式的饼图分离。不过可以将某一片的扇区分离出来,前提是你希望强调这片扇区。

饼图不使用图例,不使用 3D 效果,当扇区使用颜色填充时,推荐使用白色的边框线,具有较好的切割感。

5. 其他

轻松三步搞定数据统计分析:统计+分析+可视化!

这种数据可视化的图表还有很多,而它的意义就在于,用图表代替大量堆砌的数字,有助于阅读者更形象直观地看清楚问题和结论。我也在工作中搜集到了一些不错的数据可视化原型组件,有需要的同学可以自行下载啦~

结语

好了,以上就是今天的所有内容了,正如前言所说的,我们今天只讨论武功招式,不讨论内功心法。

延伸一下:数据统计分析,最终还是要从业务中来,到业务中去,一切的形式,都是次要的,关键还是要以解决业务问题为根本、但对于我们这些“新手”来说,经验主义自然也是要借鉴的!相信今天总结的内容,也足够支撑大家比葫芦画瓢啦。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:晓庄同学产品笔记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




掌握好「视觉重力原则」,构图的奥秘很简单!

雪涛

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

生活在地球上的我们,每时每刻其实都在感受着重力的存在。除了物理层面的影响,重力是否会改变我们对于视觉画面的认知呢?又或者说,物理学中经常听到的重力概念,和设计中的构图、排版又存在着怎样的关联呢?

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们或许能够从格式塔学派对认知心理学的研究里,寻找到一些蛛丝马迹。

人们的大脑总是会去脑补眼前看到的事物。就像我们看到的这三个被遮挡住的圆形图案,位于中心的倒三角虽然没有实际出现,但我们确实认为它是存在的对吧。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

视觉本身是很容易被周围环境影响的,就像我们现在看到的这个画面。如果忽略掉空间和透视的话,你还会觉得右侧的竖线更高吗?

而实际上的情况是,左边的竖线高度要远远高于右边的竖线高度。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

再看这个例子,两侧位于中央的白色球形,它们之间,谁看起来更大,谁又看起来更小?也许有的朋友会说左边更大,这个答案是没错的,但它也仅仅是看起来更大而已。

如果我们在画面中拉出两条辅助线,我们就会发现,原本右边看起来更小的圆球,要比左边的圆球更大。

通过刚刚的几个小测试,相信大家已经对于用眼睛的判断能力有了一些认识了,是不是有一种眼见不一定为实的感觉?视觉重力原则,其实就是建立在这样的认知基础之上的。我们大脑所认为的重心或平衡感,和真实的情况,往往并不相同。

在做版式设计的时候,我们的构图越接近重心的平稳状态,就越会激发和谐的美感。因为重力在自然界中是再平常不过的现象了,生活在这样环境中的我们,自然也会有这种审美上的倾向了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们来看这个例子,这张纸最稳定的位置在哪里呢?答案是它的正中心。

我们把信息添加在页面的中心位置,现在它看起来更平稳了吗?然而并没有,可问题出在哪?一定是我们没有把文字摆正吧?上方的区域(a),看起来要比下方的区域(b)面积更大一些,真的是这样么?

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

可实际上,文字确实是在页面的正中心位置上了,这同样我们的眼睛在作怪。

所以为了抵消视觉上的这种坠落感,我们需要将文字略微向上移动,这样我们看这段文字才是真正居中的。

正向

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们再举个例子,这是一个数字 8,我们来仔细观察一下它的造型,顶部与底部的负空间看起来是一样大的对吗?

垂直翻转

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

而事实上并不是这样的,通过将它倒置,我们就会更明显的看出来,其实为了抵消人眼的错觉,我们在做字的时候,需要将上面做的更小,底部做的更大一些。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这是两个完全等大的黑色圆形,但它在视觉上其实并不是平衡的,人们的眼睛会觉得右边更轻,这虽然没有顶部和底部那么明显,但也确实存在。那么解决的方法就是将左边的圆形略微缩小一些,现在这个页面看起来平衡多了。我们总是会下意识的认为左侧要更重要些。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

⇧ 画作:The Creation of Adam

看这幅画,很明显左侧的内容要比右侧更少,可如果我们将它镜像翻转过来,它原版的平衡感就会被打破了。人们更多会认为左边看起来更重了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

同样的,在我们的汉字设计中,也会应用这种做法,比如林字的两个木字旁,就并不是左右等大的,因为这样在视觉上会显得不平衡。所以需要将左侧的偏旁削弱,才会在视觉上看起来更加和谐。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

具有左右结构的汉字,基本上都遵循了这个原则。形成了左收右放的构成样式。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

汉字“田”的中心十字笔画,为了看起来是居中的感觉,实际上也特地微调了文字的重心部分。利用辅助线,我们会更容易察觉到这其中的变化。可以看到,横笔部分,向上移动了很多。竖笔部分也相应向左做了位置上的调整。

人们常说,细节决定成败。也正是这些不起眼的细节,拉开了专业平面设计和业余设计师之间的距离。相信看到这里的小伙伴们,应该已经领略到了视觉重力原则在设计中的重要地位了。那么光知道有这么一回事儿可不行,我们更应该去了解它的特点,以及尝试着去掌握它。

我们看到的所有图像,无论抽象的还是具象的,其实都是具有重量感的。那么都有哪些因素会影响到视觉重力的大小呢?找到视觉重心之后,我们又要怎样去利用它们?接下来我们就一起去寻找相应的答案。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

色彩对视觉重量有影响吗?我们看画面中的这两个图形,是不是很明显感觉到右边更重呢?黄色的色相本身的视觉明度就要比蓝色更浅,所以我们会感觉到右边更重。

为了抵消颜色对视觉重量的影响,我们需要降低蓝色的面积,这样才能让两个图形看起来是平衡的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

那么换成具象的物体呢?道理其实也是一样的。我们依然可以把它们看成是纯粹的色彩。经过这一步分析,我们是不是发现了左侧红色的苹果,显然会更深和更重呢?

所以,为了保持左右的平衡感,我们也需要把红色相应的缩小一些。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们看这两个图形,它们谁更重?左侧的八边形,它的页面边缘更复杂,角度变化也更多,所以承载了更多的信息量,相比正方形更简洁的造型来说,左侧会更重。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

那么换成大小相同的秤砣和棉花呢?谁更重?几乎没悬念了,棉花完败。当具象的物体出现时,结合以往的视觉经验后,谁更重谁更轻也就很显而易见了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

对齐也需要考虑到视觉重力吗?如果你也有这种疑问的话,接着往下看。这是两个马克杯,它们虽然造型类似,但是色彩却不同。很显然蓝色的版本会更重,而在位置上更靠近左边,也就显得更重了。

所以,为了抵消这种重量上的轻微不平稳,我们可以把颜色更浅的橙色放到左侧的位置上。这样虽然色彩上橙色更轻,可由于它的位置更重要,也就不会给人不平稳的感觉了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

那么构图基本确定之后,我们为这两个杯子搭配上一段文案信息。这样两个商品的展示也就做完了。你发现这两个组合出现什么问题了吗?当文字信息加入到页面之后,是不是觉得哪里不对呢?

电脑是看不懂图像的,所以用到对齐命令时,它们会围绕着像素的边缘去做对齐。可问题在于,并不是所有图片的视觉重心都刚好在方框的中间位置。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

所以我们要去修改的地方,也正是这个视觉重心的对齐位置。现在再看这两个组合,是不是感觉和谐了很多。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

当西文和汉字相互组合时,需不需要考虑到视觉重心的对齐呢?我们看,如果仅仅是依据边缘进行对齐的话,就会让西文部分看上去很小。而正确的做法是需要我们忽略掉一些文字边缘的。

分别找到两组文字的视觉大小。只有这样,才能让两组文字在视觉面积上达到相同的重量。当然,文字字重部分也是需要做出相应匹配。我们看,经过调整后,中西文的搭配明显要更加平稳了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

但也是有例外的,比如这个例子,明明是按照之前的调整方式,仅仅是更换了文字的内容。为什么它看上去依然没有对齐呢?这里的问题其实出现在西文部分,有些单词组合,字母并没有占据下伸部的空间。所以在整体上,就会显得有高低的错落感。

这种情况,当然就需要重新去匹配了。解决方法依然是对齐文字之间的视觉重心部分。所以,方法并不是死记硬背的。我们需要根据不同的情况去做出有针对性的调整。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

接下来我们来做一个包装的案例。它是一个螃蟹口味的海鲜调味料。首先,我们选择这个手绘的螃蟹作为这个画面中的视觉焦点,把它放在版面的中心位置。经过前面的学习,我们知道了,选择对齐元素时,我们要忽略掉那些细枝末节的部分,才能找到真正的视觉中心位置。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

找到了视觉重心后,我们把它安排到页面真正的中央部位。顶部和底部的空间,我们就继续调整其他的信息。首先从层级上来说,在页面顶部我们需要一个相对第二大面积的文字组合。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

而其余的元素,围绕着底部的负空间去排列就可以了,到这里这个包装也就做完了。

无论是版式设计,还是绘画摄影,构图从来都是一个讲究的事情。想要做一版在视觉上平稳的版面,最简单的办法,就是把主体固定在页面的中心位置。可是这种对称的设计,由于太过完美,也多少会给人一种单调和乏味的印象。那么有没有一种既让页面保持平衡,又能在结构上做出变化的设计方法呢?这就引出了我们接下来的内容了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这个案例,属于网页中会出现的广告页面。首先,如果我想要让版面达到平衡状态,就需要把主体的重心安排在页面的中央位置。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

但是,为了让页面中加入更多信息,我们也不得不让主体向页面的一端靠拢,从而预留出足够的空间。

可这样就导致了页面的不平衡,左侧的文字重量并不能平衡整个版面。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

其实,解决的办法也很简单,我们可以试着将主体略微移向页面的中心部分。这样一来,就实现了一种动态的平衡状态。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这背后的知识其实很简单,就是最基本的杠杆原理。如果天平两端并不平衡,那就让更重那个的靠近中心,更轻的远离中心。这样也就恢复到平衡状态了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这同样是一个网页中会出现的广告页面。我们看,它都出现了哪些问题。版面中所有的元素都集中到了顶部,这就导致了页面底部重量过轻,顶部重量过重的极端对比。也就是我们俗称的头重脚轻。那么经过调整之后问题依然存在。过多的空白,会让人们感觉这个版面作品没有完成。所有的重量都集中到了版面的左侧,这依然是一个极端的构图。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

正确的做法应该是怎样的呢?我们可以将重量最大的元素安排在中心位置。并且让其他元素以对称的样式排布。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

当然,你也可以将信息放大,和原本的图像进行一个叠压组合,形成一个更重更大的整体。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

又或者,采用顶部图像,底部文字的做法,让页面中的重量分配均等。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

反过来也是一样的,顶部安排文字,底部安排图像。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

再或者,我们可以将信息安排在页面的左侧,形成左字右图的配置。这样的构成,有助于人们第一眼发现你想传达的信息。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

而反过来呢?图像就成为了更重要的那个。人们会先看到图,然后紧接着去阅读相应的文字信息。

到这里,我们分别从细节的刻画,再到元素的重心对齐;又从视觉重心的动态调整,一直讲解到了宏观页面的构建思路。我们可以看到,视觉重力原则几乎渗透了整个设计流程。很多时候我们其实并不缺乏理论知识的武装,可一到自己实际动手,就马上缴枪投降了。矛盾点还是出在对理论知识点灵活运用上,接下来我就带着大家再做几个案例。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

打算做一套大米的包装设计。产品的名字就叫高山岩米。它长什么样子呢,就像我们现在看到的这样,类似葡萄干一样,和我们平时见到的大米颜色是有一些区别的,据说营养价值很高,也被誉为米中黄金。

我想利用图形的切割来表现这个岩米的部分。同时,在辅助一个篆书结构的山字,以这样的图形来体现这个主题内容。并且,我也希望这个大米的部分是镂空的,能够透过它看到真实的米。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

主视觉的刻画差不多后,接下来我把它放到包装上,并且将其他信息也一并加入到版面里。不过这样一来,信息和主视觉相互叠压,对于内容来说可能会有些相互干扰了。所以我们来试着编排一下。到这里,好像出现了我们前面提到过的问题了,那就是,整个布局显得头重脚轻了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

接下来再试着调整一下。现在我们把底部和顶部的空间都占据了,同时也预留出了三分之一的留白,这该不会有什么问题了吧。相信看到这里的小伙伴应该都能看出问题了,那就是这样的配置确实有些左重右轻了。留白可以有,但绝对不是这样做的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

除了我们之前提到的上图下字,或者是左图右字之外。我们当然也可以综合的应用它们。我们现在这个构成,其实就是一种全包围的结构。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

又或者,将一部分内容放在底部,而主要去刻画上方的文本样式。这就形成了类似半包围的结构。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

如果说之前的版本是上下样式的半包围构成的话。那么接下来的这个构图,就是融合了重心动态布局的左右样式半包围构成了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

当我们不知道怎样去安排版式构成时,视觉重力原则就成为了一个很好的参考依据。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们再做一版活动海报。画面中出现的各种电器,都是经过退底处理的。这样的处理,能够让它们毫无违和感的出现在同一个页面中。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

在页面的部分,我加入了这个活动的具体内容。展览的主题叫《模块世界展》,是著名设计师迪特拉姆斯的个人展览。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

拿到这样的内容时,最保险的做法就是让顶部的图片成为一个更大的组合。上图下字,很平稳,也很保守。

我们可以看到,图片部分,我尽量将它们还原成了现实中它们本来的比例关系。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

或许,我们也可以再换一种思路,相对的更突破一些。将图片通过颜色划分成组。我们能够看到,其中有全黑的,也有彩色的,更有白色的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

除了像刚刚的堆积到角落,我们也可以把图片组合规划成对角线的样式,在这样的形式下,版面构图依然是平衡的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们当然也能让图片组合划分成一个更大的组合,以及一个更小的组合。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

又或者,打乱图片的顺序,完全依据视觉重心去匹配其中的位置关系。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

最终,我决定从展览的主题中寻找突破口,以“错位”的手法去呼应“模块化”这个概念。不仅仅是文字部分的错位和拆解,图片部分也通过硬边的投影,形成了一种嵌套于版面中的视觉印象。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:研习社

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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





信息可视化是什么?

雪涛


今天我要和大家介绍的这位设计师,他在业内被誉为是“信息可视化设计”领域的天花板。一提到信息可视化这么高大上的词,相信大家都多少有些了解,在日益复杂的信息交流活动中,将信息图表化已经是一名设计所必须掌握的技能之一了。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

举些常见的例子,比如在公共场合中,我们看到的交通标志,以及用来显示地理位置的地图、将时间具象化的时刻表等等,这些数据都以某种图形化的形式呈现在我们周围。

信息可视化是什么?来看看日本设计大牛是怎么做的!

而信息可视化领域也不仅仅是将简单的数据绘制成图表那么简单,比如要弄清楚社会中隐藏着的各种问题,从而促进新观点的提出和对问题解决的思考。这种并不以信息为主导,而是着重于根据创建者的主题来选择要传达的信息,并寻求接收者的主动解释。

而我们今天要介绍的这位设计大神就是这个领域的专家

信息可视化是什么?来看看日本设计大牛是怎么做的!

△ 中野豪雄 TAKEO NAKANO 图形设计师

1977 年出生于东京都。武藏野美术大学毕业,师从著名设计师胜井三雄。2005 年设立中野设计事务所。以信息的构造化和上下文的可视化为主题,在各种领域探索图形设计的可能性。日本 typographic 年鉴大奖赛,同最佳作品,造书装帧比赛经济产业大臣奖等获奖。入选世界海报三年展和拉哈蒂国际海报双年展等。作为邀请作家参加了国际泰晤士报双年展“首尔 2011”。文艺博物馆永久收藏。武藏野美术大学、多摩美术大学教授。

咱们先来看看中野老师平时的作品都长什么样吧!

信息可视化是什么?来看看日本设计大牛是怎么做的!

是不是很厉害!但说实话,这种信息的密度,工作量绝对是巨大的!而在一些访谈中,中野老师也明确指出,自己更倾向于采用更宏观的视角去做设计,因为这样不仅能够达到传达目标,同时也由于对比的存在,进而产生崭新的视角。

信息可视化是什么?来看看日本设计大牛是怎么做的!

图中我们现在看到的信息可视化海报,是 graphic trial 2015 的一次展览。老师一共设计了五张 B1 大小的凸版印刷海报。内容是关于地震的四年时间里,哪些话题被人们报道直到事件完结,然后回归到日常生活中。以及在大数据为主的信息社会中,思考有关制作印刷物的意义。

信息可视化是什么?来看看日本设计大牛是怎么做的!

人们在地震发生时,所接受到的信息,就像图中展示的这样,是从喧嚣到日常化的推移和演变,老师会考虑到,促进这个过程的因素和推动力是否能够被可视化。从当代语言推动社会发展的角度去考察,想象着是否能将这个语言本身地图话。从而建立起一个提供人们思考的平台,这也是平面设计能否引发舆论争议的关键。

信息可视化是什么?来看看日本设计大牛是怎么做的!

首先我们从信息收集的角度来向大家讲解,这张图是国立情报研究所的北本先生制作的数据图,搜索关键词是“受灾地”。图中折线展示的是,受灾四年间,相关词被搜索的高峰和频率。

信息可视化是什么?来看看日本设计大牛是怎么做的!

接下来我们来看这张语言地图是如何被延展出来的,常规情况下,我们形容时间的话,当然会使用线性的横向时间轴。而中野老师的解决办法,是将时间轴以环形的方式呈现,并且将起点与终点之间的差异可视化。

信息可视化是什么?来看看日本设计大牛是怎么做的!

五张海报,分别从受灾后第一个月、半年后、一年后、两年后以及四年后展开。呈现出由远到近的视角变化,第一张海报中,展示的是受灾后 31 天内的变化,逐渐到最后一样,受灾后 1460 天时,人们对于这个事件的关注转变。

信息可视化是什么?来看看日本设计大牛是怎么做的!

老师从北本先生那里得到的数据,大概可以划分成四个种类,分别是时间、主题的力度、语言关键词频繁出现的次数以及与东日本大地震的关联度。时间就是刚刚提到的,以环形角度的方式呈现。话题的力度越高,就会离中心越近,反之就越远。频率则是按照关键词出现的数量,以圆的大小来呈现。另外也通过颜色来区分与地震话题相关的词语。

信息可视化是什么?来看看日本设计大牛是怎么做的!

△ 一个月,六个月,一年,两年,四年

最终就呈现出了这样的画面,首先这个项目是单人项目,所以合成这样图的工作量是非常巨大的,过程当中老师也请到了一些研究者对这个项目进行一些帮助。整个海报的重量据说非常重,拿起来大约有二十四千克。

信息可视化是什么?来看看日本设计大牛是怎么做的!

如果使用常规的四色印刷的话,也就需要利用青品黄黑去合成不同的颜色。不过这样最终的效果并不理想。

信息可视化是什么?来看看日本设计大牛是怎么做的!

于是老师选择了专色印制,也就是每一种颜色都单独去印制一版。单独印制一张海报,就需要反复印刷 16 版。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

其中的黑色,也就是全部 16 版叠压到一块的效果,可以说是黑中之黑了。当然这个黑色也是有所比喻的,也就是庞大的信息是无法单独存在的,当所有信息混在一起,才能比对出彼此的联系。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

第一张图展示的是灾害发生时的第一个月,画面中展示了很多的圆圈,大部分都发生在外圆,也就是说当时各种各样的搜索关键词,与灾害相关联,被搜索的频率非常高。在色彩的区分中,我们也能感受到相当强大的热度。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这是两年后的情况,也就是说圆的一半就是一年,左半边就是第二年,可以很直观的看到,前半年使用的暖色是比较多的,当来到了后半年时,话题热度逐渐冷却的样子。

信息可视化是什么?来看看日本设计大牛是怎么做的!

来到第四年的时候,也就是圆的四分之一是一年。右半边展示的是过去来年的样子,而左半边就是又过了两年之后的样子。整个图标展示的是起点“311”大地震动开始的日期,直到截止四年后的 3 月 11 日。

可以看到暖色的部分逐渐变得零星起来。为什么会有这样比较有规律的分布呢,那是因为暖色出现的位置都是所谓的纪念日,也就是人们会想起那次事件的日期。

信息可视化是什么?来看看日本设计大牛是怎么做的!

比如其中烟花这个词,就是从灾难过后才开始频繁出现的,它代表了人们对于灾难的一种寄托,人们期盼着生活能够回归正轨。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这样的可视化设计,意义在于人们能够通过它,俯瞰全局,通过使用宏观的视野来连接新的视角,让人们意识到它们没有注意到的观点。各个词语,会根据时间轴的变化与联动,起到唤醒记忆的作用。通过这个设计作品投影人们过去的经历。

它是从整体到部分之间的一种信息差异。就图的整体视角来看,它表示了“人们遗忘的节奏”,进而对遗忘进行批判。另外从图的部分视角出发,它表示了“记忆的意外发现”包含了对回忆的期待。

看到这是不是觉得中野老师很厉害呢。那么接下来,咱们再来看看他的成长经历

成为一名设计师的契机有很多,比如父母是设计师,或者是有看过一部激动人心的电影海报,想要成为一名从业人员。可中野老师选择设计这个专业时却完全不是这样的。

信息可视化是什么?来看看日本设计大牛是怎么做的!

他选择的了一种极度理性的方法,逐一排除自己不喜欢的东西。

但这种做法本身就很难,最终中野犹豫着要不要选择美术专业。始终没有鼓足勇气的他,还是向附近的预备校老师请教了这个事情。

信息可视化是什么?来看看日本设计大牛是怎么做的!

听了中野的情况后,老师的评价是,他觉得中野很适合平面设计这个专业,还问他要不要试试呢?

信息可视化是什么?来看看日本设计大牛是怎么做的!

因此在报考志愿里,中野写下了武藏野美术大学和多摩美术大学。如果按照主角光环的剧本,这个时候,中野老师应该就已经平步青云,从此走上人生巅峰了。

信息可视化是什么?来看看日本设计大牛是怎么做的!

然而现实却是,在第一次考试中,他却落榜了。作为“差生”的他,周围都是什么样的人呢?插画、摄影甚至编程,这样的拥有特殊技能的人几乎占据了大多数。在这样的环境里,中野老师当时却并没有什么特别的特长,对于不善于表达的他,在当时感到很无奈。

信息可视化是什么?来看看日本设计大牛是怎么做的!

那时的他一直在问自己。我的特长是什么?我的兴趣点是什么?有次散步的机会,他终于得到了灵感。那就是虽然自己没办法做出特别厉害的作品,但踏踏实实的绘制图形却是可行的。

信息可视化是什么?来看看日本设计大牛是怎么做的!

当意识到了这一点之后,于是在一次研究宋体(明朝体)的过程中,就产生了做一本书去记录这段悠久历史的想法。他想通过探索历史的过程,去寻找属于自己的兴趣点。

信息可视化是什么?来看看日本设计大牛是怎么做的!

当从宏观角度看待一段历史的进程,通过推演,人们总能或多或少看到未来的一些可能性。通过研究书籍的过去,会发现最初的书籍形态起源与泥板,也就是说,从人类发展初期就存在了书的概念。

信息可视化是什么?来看看日本设计大牛是怎么做的!

就是这样一步步的研究,信息的宏观样貌,如果从宏观的视角来看待的话,会发现人们通常能够了解到的信息其实并不多,当从更高的维度看到相同的事件时,是能够展现出事物本质的。所以在之后做视觉图表作品时,中野就开始有意识的展现从整体到局部之间的相互对照。

我们接下来一起看看中野老师还有哪些精彩的作品吧!

以信息结构和文章脉络的可视化设计为主题,探索各个领域中平面设计的可能性。

信息可视化是什么?来看看日本设计大牛是怎么做的!

△ 这是中野老师从 2012 年到 2013 年期间,为建筑杂志设计的封面,因为是月刊,所以在两年时间里,一共做了 24 本。

杂志的内容主要和灾害相关,比如第一版,是关于日本东北地区的一些内容、第二本是关于海啸的内容,除此之外,还有关于建筑产业、能源、以及关于福岛灾难重建等问题。

信息可视化是什么?来看看日本设计大牛是怎么做的!

每本杂志都有各自的特征,数据来源主要由政府以及大学中的一些数据研究者们提供。当接收到这些信息之后,中野老师需要甄别哪些内容是需要保留的,哪些是需要删减的。在这个过程中,不断的思考”怎样才能将这些数据清晰的传达给读者”这类问题。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

这个展览是 2018 的时候,中野老师在印刷博物馆策划的一个天文学与印刷的展览 。主要展览的是 15 世纪到 18 世纪的书籍和印刷物。希望能够以全新的视角,向大家展现天文学与印刷之间的关系。画面中左上角的同心圆,是哥白尼提出的太阳中心说,从此人们开始以全新的视野观察这个世界。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这是这个展览的宣传单页,博物馆的宣传单页通常都是 A4 尺寸的,最初老师设计了八张相同的传单页面。

信息可视化是什么?来看看日本设计大牛是怎么做的!

随后最终通过局部特写的方式,构建出了八种不同的传单样式。如果全部收集完全,可以拼接成完成了一个大画面。

从天文学和印刷术之间的关系开始发展联想,结合了天文学,哲学、数学等等一些学科,统一展现出了宇宙的这个概念。老师分别从三个角度思考这个问题,分别是“秩序”“整合”“规格”。

信息可视化是什么?来看看日本设计大牛是怎么做的!

如果把文字去掉,我们会看到这样一张插图,我们来分析一下为什么需要做成这个样子。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这里的横轴代表着时间,竖轴代表着规模,画面顶部展现的是关于宇宙的图像,而下方主要以人的视角,展现了地球的图像。学术本身是建立在各种各样的理论之上,前人建立起的理论,可能会被后来者推翻重建,逐步形成了我们今天的天文学。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这个展览中会展示各种各样的宇宙学理论体系,通过各种各样的宇宙论,去展现这个世界的演变。让人们随着时间的进程,在各种学术体系中了解了文明的变迁,通过图像让观赏者提前在脑海中呈现出视觉化的内容。也就是说,我们从看到这个宣传画面的那一刻起,这个展览的内容就已经开始了。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这个展会的名字叫《改变世界的信息》,画面长度有 12 米左右,这个画面是展会的入口处。从数据我们可以看到,受到贫困和灾难的人群,占据着百分之七十的人群。

信息可视化是什么?来看看日本设计大牛是怎么做的!

中野老师针对这一点,将世界各个地区以及不同的国家,把其受灾的程度和数据都集中到了一块。分别是水资源、粮食、能源、医疗、住房、交通、识字率、通讯等问题。一共有一百多个国家。

信息可视化是什么?来看看日本设计大牛是怎么做的!

通过这个图,我们会发现这其中每一个问题都是相互牵制,相互影响的。比如说水的问题就和所有的内容都有关系。整个图标并非是想要解决某些问题,而是希望人们在看到它们时,能够从中发现到一些问题。

信息可视化是什么?来看看日本设计大牛是怎么做的!

通过人们的议论,去碰撞出全新的思考。由此可以知道,图表设计其实是对社会非常有帮助的设计领域。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:花瓣   作者:研习社

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



如何通过设计驱动产品的增长设计

雪涛

在《增长黑客》中有这样一句话“If you are not growing,then you are dying!”(如果企业不在增长,那么就在衰亡!),这话也适用于个人。人生毕竟不像企业,是非成败,似乎都无可厚非,所以我们常常放飞自我偏离轨道,以至于有时候不得不提醒自己“不在成长,就在消亡”。我们来人间一趟,有没有全力以赴想要成全的事?可以反复尝试、不断接近吗?所以,我认为,增长它是一个永恒的话题,我们在学生时代读书的时候希望自己的分数与排名能增长,在企业上班工作的时候,我们希望我们的收入能增长,当我们创业的时候,我们希望自己企业的业绩能增长,增长是长期伴随着我们生活的一个指数。

《在大数据时代》一书中提出了“量化一切”的概念,即一切都可以用数据来衡量。其实,在“数字敏感”的互联网时代,电商平台“销量”、电影票房、百大up主、文章阅读10w+等等,我们其实早已在不知不觉中用数据丈量着一切。

增长设计这个概念好像是最近几年才广为互联网从业人员才熟知,成为每个互联网er所讨论的热门话题,因为在过去的十多年,是中国经济数字化腾飞发展的十年,我们90后更是亲身见证着互联网企业的成长,“眼见他起高楼,眼见他宴宾客,眼见他楼塌了”。

我们关于用户增长也是在不断的迭代的,从最早期的雏形AIDA法则,由路易斯提出推销模式,西方推销学中一个重要的公式,AIDA法则也称“爱达”公式,然后到2007年的facebook,提出这个概念,即,我们知道我们的广告费是浪费掉了,但是我不知道是哪一半,于是,精于广告投放的facebook便通过科学的,可复制性,可以被检测的广告投放可以帮助于其他企业做好用户增长,然后便是我们知道后期比较流行的AARRR海盗模型这样更加精细的用户增长策略.


2.1 关于增长设计


在近几年我们经历了从互联网市场在基本火热到冷静,尤其是随着移动互联网的流量红利开始消失,“增长黑客”与“用户增长”这两个概念开始慢慢火爆开来,我们国内互联网企业互联网从业人员也开始重视用户增长。

企业的增长,也可以理解为企业的成长,所以企业能否保持增长,是老板和员工都比较关心的一件事,因为企业只有保持一定幅度的增长,才能保证大家在未来继续过上好日子。以前传统企业做增长可能就是通过赞助冠名一个很火的电视栏目,或者请个明星作为企业产品代言人,都可以在一定时期内来吸引消费者的关注,实现快速增长。但是这几年我们可能也发现了,传统意义上的营销手段似乎不太管用了。因为以前我们从在电视和传统纸媒上获取信息的用户都慢慢转移到朋友圈、B站、抖音等互联网头部平台,过去的传统营销三板斧来拉动企业业绩的增长,已经变得越来越难。

所以我们发现,在2017 年可口可乐宣布取消 CMO(首席营销官),由 CGO(首席增长官)替代,以增长为中心的各个职位在招聘网站上也如雨后春笋一般涌出。

看到这里,这些好像和我们从事Ui视觉工作的好像关系并不是很大,而恰恰相反,我认为用户增长设计并不是一套虚无缥缈的说辞,而是一种能够与团队协助的工作形式,在一个产品团队中,我们每一个人都应该了解一些关于用户增长设计方面的知识。

我们所知道的产品是为用户在服务,是为了满足用户的实际的需求,所以我们所理解的增长设计便是产品创造了价值,而增长设计是将产品的价值放大传递,让更多的人去发现。


2.20 关于以用户为中心的增长设计


而我们体验设计师更多关注在做产品增长设计的时候尽可能的不去伤害到用户,以同理心去思考做增长设计的策略。这个我们会称为用户增长设计(User Growth Design),即简称UGD,简单的理解为用户增长设计要以用户为中心,以用户的角度和思维方式去想问题,去做用户的增长。

让产品简单到“傻瓜”也能操作,是乔布斯和张小龙做产品的核心理念。坐拥10亿用户的微信之父张小龙说过,产品经理要有傻瓜心态。“我要经过5~10分钟的酝酿才能达到傻瓜状态,马化腾需要1分钟,功力最深的是乔布斯,传说他能在专家和傻瓜之间随意切换,来去自如,即所谓的Stayfoolish。”

当然,此傻瓜不是彼傻瓜,而是一种跳出当下局限的外行心态,是站在普通用户的角度是操作、带有同理心去思考产品,这样才会更容易发现产品本质上的问题和抓住真痛点,找到影响用户增长的关键因素。

2.30 设计师该如何去做设计增长


我们设计师要想所做的用户增长肯定不是去街上发个小广告,去地铁上拿着产品的下载二维码让用户去下载我们的产品,我们设计师着手的设计增长范围还是从用户体验去入手的,所以我们在考虑提升产品数据的时候也需要考虑用户的使用体验,例如,公司现在想要提升产品的成交额,我们设计师肯定不会提出的方案肯定不会是让公司去请个明星代言来吸引用户下单之类的,我们设计事所要思考的是如何提升用户在下单过程中的流畅感,如何缩短路径,让用户能方便成交,所以我们设计师的增长观一定是在产品现有的基础上,提升用户的体验,尽量让用户有良好的体验下来提升用户的数据增长。


2.40 什么样的产品适合做增长设计


那我们产品都是来自五花八门的类目,那什么样的产品适合做增长或者以什么样的形式做增长合适呢?在增长设计概念最火热的几年,我听过这样的一个有趣的故事,一个做服务于医疗聚合类的设计同学去给面试官讲他们这个产品的怎么做用户增长的,其中讲到他们通过如何通过增长策略去拉动用户增长,如何留住用户,面试官听完,反问了一句,那们这个增长设计的策略是通过给城市投病毒导致那么多人生病的吗?

所以,世间万物的增长都需要条件,用户的增长需要内在的动力,不能浮于表面,需要认清内在动力这样才能有助我们找到增长的关键因素,从而合理有针对性的部署资源和策略。


(1)C端产品如何做增长设计


C 端的产品,一般是个人消费场景,单一决策购买,所以我们需要给用户持续使用产品的动力,即产品可以持续给用户提供其他产品无法提供的价值。用户在使用产品获得价值提升,例如获得友情、愉快、知识、优惠、收入等等,用户才会继续使用,甚至会给身边的好友去推荐。

例如我们的国民软件微信,拉进了人与人之间的距离,带来了免费通话和朋友圈和这个门槛最低的社交网络,我们可以通过朋友圈去展示和表达,我们微信上的各种”相亲相爱的一家人“”多少级的同学“群成为我们去维系友情亲情的宝地,现在我们通过扫一扫便可以完成生活中很多事情,都为用户提供了极大的便利,微信独有的社交属性促成了巨大的网状人际关系,让用户自发的去加入,并难以离开。在2020年3月底QuestMobile提供的数据来看,微信活跃用户180日留存率为95.5%,位于常用APP用户留存率排行的首位,拥有如此高的用户长期留存,可见微信为用户提供的价值之大。

所以C端的产品只有能为用户提供价值,用户才会选择留下,甚至会主动传播为产品带来更多有价值的用户,这才是最理想的、良性的用户增长。


(2)B端产品如何做增长设计


B端的产品和C端的产品不同,B端的产品往往是做决策的过程比较复杂,往往能决定购买的人并不是产品的使用者,他们只是负责采购的,另外有的采购量比较大的企业往往和销售的人脉关系挂钩,

但是阿里的团队通过不断的深耕B端的市场发现,虽然 To B 增长很难,但在中小企业的增长很有机会。一般的中小企业,使用的人数不是特别多,一般都是5人以内的使用者,这类企业能决定购买和使用者是同一类的人,所以它会与我们C端的购买决策的路径比较相似。另外中小企业的数量也是比较多,所以这块的市场还是有挖掘空间的。


2.50 什么是用户的增长设计


用户增长设计设计其实就是从吸引新用户的注意力到产品能给用户一些价值最后用户认可我们产品的过程,这是一个从短期流量到长效流量转化的过程,


(1)用户的吸引力(获客)


我们一般获取用户的方式最直接便是去投放广或者软文推广,用户通过点击下载APP来访问我们的产品界面,在我们的产品中寻找自己想要的信息,一直周而复始,直到找到自己想要的信息,反正,产品的内容没能吸引用户,这时候,用户便会退出产品,也就是用户的流失。


在这个过程中,一直围绕着三个比较关键的因素“使用者(人)”、“使用场景”、“用户行为”,我们需要明确用户的使用路径中,产生行为的原因和流失的因素。


(2)用户的注意力(激活)


我们在设计中怎么通过设计策略去避免用户的流失呢?我们需要去引导用户的注意力,让用户在使用过程中对我们产品有认可,都可以有效的去避免用户的流失,


·如何引导用户的注意力


我们怎么去衡量我们的产品是否吸引了用户的注意力呢?根据Alibaba Design Ucan 2020所提出的一个公式。用户的注意力=心理需求*视线所及,用户的注意力是用户的心里所想和目标所看到的交汇,当产品给用户看到的信息是用户想要的东西的时候,这时候,用户便会点击进入,所以通常曝光率则可以验证用户在产品使用中的注意力。


例如,我们在浏览商品的时候,我们的目标首先关注的商品的品牌然后是名称和价格,我们用户心里想的可能是哪个品牌会比较可靠,哪个的价值比较低,有没有我常用的品牌,视线所及便是我们展现给用户的列表,当用户看到某品牌有我喜欢的明星的代言或者喜欢明星的同款,这便是用户所想的。当满足这些前置条件,用户便会产生点击行为。


·如何引导用户认同我们的产品


我们想要用户去认可我们产品的价值,我们需要了解用户,了解用户可以从三个关键因素去入手,1.用户群体,2.认同目标,3.说服用户



例如当新用户进去拼多多后,界面会弹出新人的专享红包,引导新人用户的点击,下一个页面便是弹出手气最佳的红包,最后展示页面出现现在限时下单全额度返利的banner,每一个页面的场景关联度极强。一步一步的去说服用户去下单、有效的提升用户点击率。从而提升新用户的首次下单的增长。


(3)用户的安全感(留存)


张小龙曾提出一个产品观叫“用完即走”,与我们常常提到的“留存”“粘性”的原则是背道而驰的,其实我理解的用完即走便是产品其实不想让用户离开,我们的产品能给用户一个确定性的答案,无论是在产品的易用性还是在产品体验层面,都可以保持高效,让用户在使用过程中有愉悦感,让用户迁移成本提升,便是用完即走后的恋恋不忘、

例如早期的打车软件和团购软件,那时候用户在网上打车和线上支付习惯还没养成,对产品的模式的认同度还不够,所以,那时候打车软件和团购软件给予人的确定的心理印象便是,你在我这里支付购买会便宜。培养用户的使用习惯,给用户一个用了该软件确实会便宜的心理安全感,从而实现了用户的留存。

我们平时准备出门或者去一些陌生的地方,我们都会使用高德地图或者百度地图看下路上是否堵车,我们这次出行走哪条路需要用时多久,以方便我们去选择合适自己的出行方式。

我们设计师在做设计的时候也是一样的,我们通过之前的数据,也可以分析出产品一些不一样的改版点,我们能把一些抽象的问题具体化,能更好的去度量我们的设计,所以设计师在学习如何增长设计前,我们需要了解一些关于产品的数据知识,我们分析一款产品的时候,通过比较关注的点是用户、需求和数据。

当我们的产品上线或者上新某一个功能的时候,往往用户的意见反馈代表的是个体的声音,而数据是用户对于产品的客观反馈,数据的变化能代表用户对产品的态度,所以,设计师要是能读一些数据报表,那么我们可以从体验设计师角度去给产品迭代的时候能提出不一样的观点,辅助我们所服务企业的app的成长。


3.10 数据是如何产生的


数据如如何产生的,比较深的知识是不需要我们去深挖的,我们日常接触到数据反馈都是来自产品的“埋点”,而埋点数据的获取通常通过第三方的工具进行获取,比较常见的数据分析企业有友盟、七麦、GrowingIO等,这些工具可以在我们想要的页面或者功能按钮上添加监听功能,当条件被满足的时候,便会完成一次数据的统计,埋点需要提供两个关键的信息:一是需要埋点的内容,二是埋点的名称,这可以方便我们以后快速的找到相关的数据,当埋点完成后,产品上线就会检测用户的行为动作,当用户进入我们的“埋点"界面或者功能的时候,后台系统就会上报数据,我们就会收到数据反馈,但是在现实工作的场景可能比这个要复杂的多,我们可以根据具体的场景在灵活应变。

3.20 设计师为什么要了解数据


我们对一款的产品的优化可能有很多层面的思考,但是我们去对用户数据的分析则是对当前产品最有价值的参考点,数据的采集与分析无论是对产品的规划还是对设计师下一步的工作开展都是比较重要的指标,因为用户可能会因为一些客观的原因可能不会说出自己内心的真心话。

例如我们去面试的时候,在一番精心的准备和问答之后,我们在面试结束之后,如果去问面试官“您觉得我这样面试表现怎样”,有的面试官可能会就你这次的变现去做出比较切合实际的点评或者建议,但是有可能你那场面试因为外部的原因会失常发挥,但有的面试官可能会照顾你的面子,可能会说表现的还可以之类的话来安慰你,但是面试官最后会不会录用你这点他肯定不会作假,所以有时候我们在分析用户行为及操作路径的时候,一些用户的数据表现便是我们对产品优化的关键因素。

我们通常将数据的指标分为三大类:1.用户相关指标、2.用户行为指标、3.业务数据指标



3.30 用户相关指标


我们常见的与用户相关的指数有像DAU、MAU、新增人数等,我们需要了解的数据为1.用户的活跃指数,2.用户的留存率,3.人均使用时长。

3.31 用户的活跃指数


在互联网行业里,通常我们会通过拉新把客户引过来,但是经过一段时间可能就会有一部分客户逐渐流失了。那些留下来的人或者是经常回访我们公司网站 / App 的人就称为留存。

在一段时间内,对某个网站 / App 等有过任意行为的用户,称之为这个网站 / App 这段时间的活跃用户,这个任意行为可以是访问网站、打开 App 等等。

我们常见的用户指标有「日活」 即日活跃用户量,缩写为DAU,,缩「周活」 即周活跃用户量,缩写为WAU,「月活」 即月活跃用户量,缩写为MAU。


3.32 用户的留存率


留存率是最能反映一个产品是否对用户有吸引力的指标,一般的留存率是基于某个时间段而得出的结论,例如我们常常听说的次日留存和七日留存率。

次日的留存率计算公式为:当天拉新的用户中,次日留存率=在注册的第二天继续登录/第一天拉新用户的总数量

七日留存率的计算公式为:在第一天拉进的用户中,七日留存率=在注册七天后还有登录的用户数/第一天拉新的用户总数。




3.33 人均使用时长


人均使用时长通常是对内容和游戏类的参考价值的很大,它可衡量我们产品是否做的比较优秀,能不能留住用户的注意力。如果我们做的是工具类的产品,例如计算机之类的,这个时候的人均使用比较长,说明我们的产品可能出现了问题,无法让用户在短时间内得到他想要结果。

人均使用时长的计算公式为:人均使用时长= 总活跃时长 /总活跃用户数。


3.40 用户行为指标


用户行为相关常见的指数有用户的页面访问量率、转化率等指标。



3.41 页面访问量率


我们对页面的访问流量的定义分为两种,一种是PV(page View)即页面浏览量,另外一UV(UniqueVisitor):独立访客数。

PV(page View)也就是页面浏览量,即你每观看一次就会涨一个PV,类似于B站的播放量,我们每个账户只要点开观看一次视频,播放量就会增长一次,关闭在打开,也会在增长一次,所以我们每播放一次,便会涨一个PV值。

UV(UniqueVisitor):也就是独立访客数,类似于腾讯视频和优酷的播放量,每个账户点进去播放只会增长一个播放量,你再关闭再点进去也只涨一个VU值。在正常情况下是依靠浏览器的cookies来确定访客是否为独立访客之前是否访问过该页面。


(1) UV的类别


在统计数据的过程中, 我们会将不同的点击率来划分,从而更好的可以来统计数据来分析。我们将UV分为:1.

曝光UV ,2.点击UV , 3.意向UV。



·曝光UV


曝光UV即曝光在视野内的用户数,例如我们在京东或者天猫去搜索某个产品进入了搜索的feed列表页的时候,当我在当前的列表停留2-3秒的时候,都可以算一次曝光UV。


·点击UV


点击UV即有点击行为的用户数,例如我们在京东或者天猫去搜索某个产品进入了搜索的feed列表页的时候,我点击某个商品进去了详情页,那么就可以算一个有效的点击UV。


·意向UV


意向UV即进入意向页面的用户数,例如我现在想去买一个Macbookpro, 我在B站看完关于Macbookpro,的评测视频,在百度看完Macbookpro的参数后,我在去天猫和京东去搜索进行比价的时候这个时候我就属于意向UV,在举个我们比价常见的例子,当我们在百度搜索宝马的时候,排在前面的经常是各种五花八门的关于车的广告,在百度看来,我们便是想去买车的意向UV,是有机会促成交易的。

所以我们看用户对我们的产品或者活动是否感兴趣,便可以看看PV和VU的数据如何。

3.42 页面的转化率


页面的转化率是任何一个企业都比较关心的数据为,我们的任何运营活动和产品的推广都是为了转化用户的时间或者金钱,我们费尽心思的用户点击进来,也都是为了转化用户的购买。

用户的注册、下单、登录和复购都可以用转化率来进行量化,我们根据产品不同的情况来制定转化率的指标。通常我们计算转化率:产生购买行为的户人数/总的用户访客* 100%。例如我们这个页面访问人数是1000,接下来有100人进行了购买的行动,那么我们页面转化率为:100/1000*100%=10%的转化率。


(1)意向用户转化率


意向用户转化率,即意向Intention Click Value Rate,简称意向UV CVR,是通过直观科学的角度去评判需求是否达到了预期的效果,意向用户转化率一般用来衡量用户访购行为,是可以通过该指数去发现问题中隐藏的核心问题的依据,非意向UV的转化流失有很多不确定因素,而意向UV的流失往往跟产品体验有更大关联性,通常计算的方法为:产生购买行为的客户人数/所有到达店铺的意向访人数* 100%。

例如像民宿和酒店类的APP的核心转化率是客房的预定量,像B站和西瓜的核心转换率则是用户评论和点赞。


3.43  页面的点击率与意向率


通常我们在曝光UV和点击UV直接会有一个点击率的关系,Click-thougphRate,简写为CTR,即点击数占展示次数的百分比,通常的计算形式为,点击率=点击次数/页面访问次数,

在曝光UV与意向UV之前也有一个比例关系,叫意向率,即意向UV占曝光UV的比例关系,通常用以衡量运营活动或者功能的导流能力,主要用来看用户的质量,通常的计算方式是意向率=意向UV/占曝光UV。

3.43 跳出率


跳出率是在设计用的比较少的一个数据,一般是运营人员会关心的数据指标。指的是用户通过搜索点击进入该商品的详情页,只是简单的浏览一遍就关掉了页面,在该页面没有任何的活动行为我们称之为一次跳出行为。

跳出率的计算公式为:页面的跳出率=一个页面离开的次数/总的访问次数*100%


3.50 业务数据指标


我们对业务的数据指标可以将他们分为两类:一是免费供用户使用的产品,例如微信、B站等产品,我们更多的关注用户的使用时长和停留时长。二是需要用户有购买行为产品,例如淘宝、拼多多和京东之类的,这里的产品我们更多关注的是产品的GMV和ARPU等指数。



3.51 GMV


Gross merchandise Volume,简称为GMV,指标通常称为网站成交金额,属于电商平台企业成交类指标,主要指拍下订单的总金额,包含付款和未付款两部分。

GMV反映的是电商平台直观的成绩,但在电商行业,GMV包括拍下未支付的订单金额,GMV=销售额+取消订单金额+拒收订单金额+退货订单金额,

3.52 ARPU


ARPU是 “The average revenue per user” 的缩写,译为每用户平均收入或平均每用户收入。也可以理解为单个用户的价值。

通常的ARPU用来反映这个产品在这段时间内从单个用户获得的利润和收益,通常用来计算用户生命周期价值的作用:它是 App 成功的指标,是用户忠诚度的反应,是预测用户增长的工具。简单来说,用户生命周期价值是驱动移动市场预算的动力。它会告诉你每个用户值多少钱;你应该花多少成本去获取一个用户。

ARPU的计算公式为:ARPU=在指定时期总收入/指定时期的付费用户的总数*100%。

3.53 付费率


付费率是用来衡量用户转化行为的指标,通常所有用户和付费用户之间的一个转化比率。我们前面说到的ARPU值是付费用户的人数来计算的,我们通常会把付费率和ARPU值放在一起分析。一般该产品的付费率越高,这说明用户对该产品的认可度越高。

我们的产品每个阶段的增长指标在不同阶段会有不同的定义。每个时期所需要注意的事项也是不一样的,我们对基础的数据有了认识和了解之后,我们更重要的事情就是怎么去实践在我们自己的产品中。


4.10 提升列表CTR的设计策略


我们产品中很多时候,我们的设计做的是否合理,我们的商品类别该怎么去排序,都和CTR的数据去挂钩,产品中的很多核心的数据也需要CTR等基础数据去做支撑,那么我们一起来复盘下提升列表的CTR策略点:1.增加影响用户决策的信息,2.梳理列表的信息层级,3.新增适当的交互,4.标题优化(非设计角度)

4.11 增加影响用户决策的信息


平时我们在逛街的时候一定会发现这样的场景,当一条街上开了很多店的时候,每个店铺一定会派出自己店铺长相比较甜美的店员或者比较擅长口播的店员在自己店前面进行“吆喝”,比较小的店铺就算人手不足也会用音箱去反复播放店内的促销信息,这些策略都是为了在众多的店铺中去吸引过往行人的注意力。

那么我们做设计也是一样的原理,我们在在做列表时候,想要提升用户击我们的列表进入详情页的意愿,首先我们需要了解我们的用户对什么样的信息比较感兴趣,我们将它整理并放出来,从而达到吸引用户来点击。


4.12 梳理列表的信息层级


我们平时去逛超市的时候,我们发现每个类目的货架前都会摆放特价或者促销力度比较的商品的合集,理货员会将他们放在一起,这样,对于价格敏感的会直接过去挑选。

我们在梳理列表的信息也是一样的,我们需要将用户比较关注的信息或者产品的卖点信息层级抬高,减少用户在挑选时候的跳出率。


4.13 新增适当的交互


我们想提升列表的点击率也可以从另外一个角度是入口,就是想办法让用户在最短时间内可以看到更多的信息列表,让质变产生量变,这一点我们可以从改进交互的操作入手,让让用户看的比较多的列表交互。


(1)十字交互


因为这种形式的设计他占用的位置比较少,且只需用用户通过手指左右去滑动,便可以查看更多的信息列表或者产品列表。

(2)随机的列表


在交互层面另外一个可以让用户看的更多的设计形式便是点击就换一批,这样可以让用户感受到我每次点击过后的详情列表和产品列表都是不一样的,这样每一次点击都会有新的“多巴胺”去刺激用户再次去点击“换一批”按钮,从而达到让用户看到更多的列表,以质变产生量变。

4.14 标题优化(非设计角度)


(1)美化标题


我们经常上网经常浏览新闻的朋友一定知道有个词叫做“标题党”,简单的来说就是标题经常以夸张、“故弄玄虚”的方式出现,UC是众多平台中运用标题“最好的楷模”,所以网民也会亲切的称之“UC震惊部”,所以一个列表流的标题对点击量的影响也是比较大的。


(2)字符限制


另外一个角度就是当标题显示不全的时候,用户对信息传递无法感知的时候, 我们取再好的标题也是没用的,也许关键信息会被省略掉,所以我们在设计标题的时候,也可以限制标题可输入的字数,避免文字的缩略显示,让用户可以完全看清标题的意思,提升用户的点击欲望。


4.20 上新功能如何提升CTR


我们产品在上新一个新功能的时候,我i们如何布局能去让用户从熟悉到使用我们的新功能都是需要一个过程的,我们需要慢慢的去引导用户,我们可以从一下策略去去入手:1.替换用户习惯的功能,2.把控出现时间,3.用动态吸引注意力,4.合理划分功能层级.、

4.21 替换用户习惯点击的功能(按钮)


我们每个都会有自己的习惯性的动作,例如我们习惯左手写字,右手拿筷子吃饭,我们每天回家习惯性的走同一条路,这些都是我们下意识的动作,是不需要经过思考的意识,那我们在软件的使用中,也会有这样的习惯,例如,通常底Tap栏的图标第一个通常是首页或者软件的主要功能,而最后一个通常会放个人中心,这也是我们在软件使用的中的共识,所以我们可以利用人下意识的习惯将常用的功能与新功能去替换,用户便会在下意识的惯性中去点错,例如网易云音乐为了推广“云村”功能,便会将以前在最后一个的“我的”给替换成“云村,会导致很多用户的下意识的动作点错而提升新上的功能”云村“的点击率。

4.22 把控出现时间


我们在下班回家的路上,当我路过一些小吃摊的时候会觉得街边的小吃特别想吃,也特别有购买的欲望,这是为什么呢?因为我们在劳累的工作了,下班的时间也正是需要吃饭的时候,所以这个时候我们会看到街边摊的小吃特别想吃,也特别想买,因为他摆摊的时间点和位置都恰好满足了我们的需求,所以我们转换到界面里也是一样的,我们想要用户去分享一篇文章的时候,一定要等看用户在读的时候,然后在出现分享功能,这个时候如果用户读到比较精彩的内容,便会和朋友分享这篇文章,例如用户在进入商品也可以浏览的时候,我们这个时候可以出现满减的红包,这都是在适当的时候给与用户想要的,把控好了出现的时间。


4.23 用动态吸引注意力


在一些静态的元素中,突然有一个元素动起来,那么,那个动起来肯定是更吸引人的眼球的,所以我们在电商的页面页面中,会经常看到一些会动的icon和一些会动的胶囊导航,我能在付款页面也可以看到一些立即付款的按钮会忽大忽小的动起来,这都是为了吸引我们的注意力,引起我们去关注它的存在。


4.24 合理划分功能层级


我们做设计排版的时候一定都听说过这样的一句话,就是你什么都想突出,结果你却什么都没有突出,这句话的意思是我们在做设计的时候一定要注意运用对比,将次要元素与主要功能的要做好主次的对比,这样的层次对比才有利于用户的阅读,可以分清主次。

我们在ui设计中也是一样的,要想用户快速的找到想要的功能,高频使用的功能和不常用的功能要做好强弱的设计区分,这样才能让用户一眼能看到自己想找的功能,例如美团和支付宝,都是将用户高频的操作放大并放置于顶部比较显眼的位置,方便用户去操作。


4.25 合理使用弹窗功能


我们都知道,弹窗在软件中属于级别最高的通知,就相当于学校里面的校园广告,只要打开软件的人,基本都可以看到,所以我们想推广一个新功能的时候,使用弹窗是流量比较大的,但是也是比较打扰用户的,我们需要看情况而定。

4.30 提升人均使用时长的策略


软件的人均使用时长代表用户对我们人均软件关注度和我们给予用户的价值,当人均使用时长在增长的时候,说明我们的产品正在良性的增长,在提升人均使用时长我们可以从以下几个策略入手:1.让用户忘记时间,2.弱化用户的负面情绪,3.多变的板式消除疲劳,4.激发用户的好奇心



4.31 让用户忘记时间


我们放假在家打游戏的时候,总有这样的感觉,就是打着打着不知不知的天就黑了,或者打着打着天就亮了,感觉时间过的非常快,但是我们需要注意一个细节就是一般打游戏的时候,游戏是会将顶部的时间状态给隐去的,是为了给用户更好的沉浸式的体验,正因为我们看不到时间,所以便会忘记这件事情,一局一局的打着游戏。例如早期的抖音,在进去界面后变会隐藏时间条,让用户在刷抖音的过程中忽略时间,所以 ,我们想要提升人均使用时长,在一些娱乐性的产品或者模式下,可以尝试着隐藏时间条,给予用户更沉浸式的体验,这样用户便会忽略时间这件事情。

4.32 弱化用户的负面情绪


我们在饭店高峰期去餐厅吃饭的时候,一般会遇到餐厅客满需要排队拿号的情况,海底捞的做法是给排队的客户免费的小零食,外界对海底捞的服务评价可以用16个字来概括:有求必应,无微不至,嘘寒问暖,小恩小惠,中国有古话是这样说的“伸手不打笑脸人”,也许我们在就餐中会有各种不满,但是海底捞都可以用他的服务去抵消客户的负面情绪。所以,我们一般在餐厅催菜是时候,不管菜做没有,服务员都会对我们说菜正在做,都是抵消我们等待中的负面情绪,让客户不会在等待的过程中离开或者退菜。

我们在做界面中也是一样的道理,我们的APP在实际运行过程中肯定也会遇到各式各样异常问题,我们做设计的时候要为用户提前给考虑进去,为用户提供贴心、无微不至的服务。例如我们用户可能在使用过程中可能手机信号不好,有的页面加载不出来,我们需要设计有趣的加载动画和页面加载不出来的时候的占位符,告诉用户我们的APP还是在正常的运行中,不是宕机了。


4.33 多变的板式消除疲劳


我们都开车或者坐车经过高速公路,我们会发现高速公路在一条直道后马上会迎来一个弯道,我们小学的时候都学过,两点之间直线最短,那么高速公路为了节省司机开车的时候,能否直接全部设计成直线的呢?答案是不可以,除了有些地方路线的规划外,其次安全因素也很重要,经科学家研究表明在笔直的公路长期行驶很容易导致驾驶员发生事故,这是因为在笔直的高速上行驶,驾驶员的神经长时间处于放松状态,容易麻痹大意,如果适当的时候来个转弯会提醒驾驶员注意力集中,减速行驶,从而减少事故发生率。其次从心理学角度来说,驾驶员一旦在笔直的高速上行驶,容易产生飙车行为,谁都会想猛踩油门来追逐刺激,如果适当时候来个弯路,能够抑制飙车行为的发生,从而减少故事发生率。

所以我们在设计板式布局的时候,让用户盯着单一的布局形式,用户很容易感觉到疲劳,从而会在页面跳出。我们为了避免这样的情况发生,让用户在浏览过程中能感受到板式的变化,而不是滑到底都是一样,单一且无趣,很容易疲劳,我们设计者需要在单一的板式寻求不一样的解决方案。


4.34 激发用户的好奇心


我们都比较喜欢看悬疑剧的一个重要的因素是因为情节一环扣一环,线索和剧情结合的比较紧密,剧情比较扣人心弦,能激发我们对真相的探索欲,这才是我们喜欢追悬疑剧的原因之一。

所有,我们做设计时候也需要给予线索让用户去探索,让用户感受到内容源的充沛,用户才会兴趣去向下探索,从而提升用户的使用时长,所以,大部分的APP在最后一个板式都会做成瀑布流的形式,因为他在滑动的时候会不断给予用户新的提示,告诉用户你不断往下滑,都会有新的内容。

4.40 提升留存率的策略


留存率是用于反映产品的的运营情况的统计指标,我们产品的留存越高,说明我们产品很活跃,真正稳步的向前迈进,那我们在优化留存的策略可以从以下几个入手:1.优化初次上手体验,2. 减轻用户的使用负担,用内容留住用户,3.完善奖励机制,4.增加沉没成本

4.41 优化初次上手体验


我们现在年轻人由于生活的节奏越来越快,在使用APP的时间往往都是碎片化的,用户的持续注意力会越来越短,一个产品在初次上手的难度越高,能劝退的用户就越多,用户在上手一款产品的时候,首先会关注界面是否易于上手,能不能快速找到自己想要的功能,例如在登录的时候设计验证码登录或者第三方的快捷登录,在新用户初次进去的时候,对新功能有使用说明,用户在初次体验是很重要,有了第一次的良好体验印象,用户才会有第二次第三次的回访率,这也是提升留存的第一步。



4.42 减轻用户的使用负担,用内容留住用户


减轻用户的使用负担是指在核心功能尽量能让用户能用最短的时间去完成,让用户感受到产品对用户是有价值的,做到用完即走,例如,微信就算其他功能做在有趣,上手在简单,它的核心聊天功能做的不好,用户发一条要等很久, 我相信也不会有人去选择用它去聊天,早期的米聊,其他的功能和想法都是比较超前的,微信也是根据米聊的模式改进,但是早期米聊在即时通信领域不是很擅长,在发送消息的即时性上欠缺,导致失了先手,在手机聊天领域输了给微信。

在产品做好了核心功能,能够吸引一批忠实的种子用户,这样我们在一些附加功能,才是锦上添花,例如现在无论什么产品都喜欢做社区功能,就是希望用内容去留住用户的注意力,附加功能一般都是利用人性的七宗罪去设计布局的(傲慢、嫉妒、愤怒、懒惰、贪婪、淫欲和暴食。)例如微信的摇一摇是利用人想认识新的异性,扩大好友圈,汽车APP的社区功能会经常发一些车站的车模,来吸引精准用户的注意力,这些都可以提升用户再次来使用我们的产品。


4.43 完善奖励机制


我们在工作中,一定遇到这样的情况,就是公司会设置奖励机制,当员工的绩效达到一定的程度的时候,公司会给予员工一定的奖励,反正则会触发惩罚机制,这会使得员工为了完成目标而努力工作,从而达到目标得到的奖励会触发员工的“爽点”。

这是因为这样,所以越来越多的产品开始做自己的会员体系,在加入积分商城,最后在来个签到奖励,简单来讲,就是通过给予用户一些“爽”的东西,来让用户帮我们的产品达成一些我们需要的商业目标,其中最主要的目的就是用户的留存率.

4.44  增加沉没成本


我们在去理发店去理发或者在去网吧上网的时候,他们都会希望我们去办理一张会员卡,在往里面存在钱,有的是存多少送多少,当我们一但存钱办理会员后,我们会惦记着我们有类似的消费的时候,都会想起我在那家店里会员还有余额,会员里的余额就是们迁移的成本。

所以共享单车会推出月卡服务,视频会员会有连续包月或者年卡套餐,甚至我们点外卖开通会员也能享受大额的折扣,让用户感觉占便宜的感觉,这些都是为了锁定用户,增加用户的迁移成本,来达到让用户再次来我们产品来消费,从而提升用户的留存率。

4.50 提升产品活跃度发力点


产品的活跃度也可以称为产品的粘性,产品的留存率是计算单次打开产品的次数。而多次打开我们的产品也可以称为产品的活跃度,或者用户对我们产品的粘性,我们去优化产品的活跃的可以从以下几个策略入手:1.让产品看起来生机勃勃,2.主动与用户沟通,3.让用户有自己的社交圈,

4.51 让产品看起来生机勃勃


我们都会有凑热闹的习惯,看到街边有人排长队我们会不自觉的看过去,所以我们在新闻看到了网红店会请人来排队,都是为了营造该店看起来很有生机,人很多,很热闹。

我们在做产品设计的时候也是一样的,需要在设计层面让用户看我们的产品也是很有热闹,很有生机,例如我们产品的运营区的图片会经常更换,让人感觉有人在运营,每天都是不一样的,当我们的用户关注的人比较少或者没关注的时候, 我们需要给用户去推荐质量比较高KOL去让用户去关注,有什么活动我也可以主动推送给用户,这都是可以让我们产品看起来有活力,从而让用户可以多次打开,提升活跃度。

4.52 主动与用户沟通


我们小时候通常会被家长教导,遇到熟人和长辈要主动打招呼,这样会让我们看起来比较有礼貌,我们生活中也乐于和有礼貌的人去交往,因为对方会看起来比较有亲和力,比较好沟通。

我们做设计的时候也是一样,我们的产品也需要主动与产品去沟通,让用户去了解我们,例如,我们评论去外露,是在告诉用户我们这个商品已经得到了大多数的肯定,也可以让用户感受到我们这个产品其实用的人还是不少的,比较有生命力。

4.53 让用户有自己的社交圈


不知道从什么时候起,无论是什么类目都有了自己的社区,淘宝有自己微淘,咸鱼有自己的鱼塘,求职找工作的APP也开放了求职讨论专区,连墨迹天气都开放了社区功能,让大家可以拍自己的当地的风景来讨论。

为什么大量的产品开始做社区功能呢?因为他们希望自己的用户能在自己的产品有自己的社交圈,只有用户有自己固定的圈子,才会有用户粘性,把路人用户转化为死忠粉,大家一起来讨论,从而达到提升产品的活跃度。

4.60 提升产品核心转化率发力点


核心转换率一般我们的用户需要走的流程比较多,我们需要按照实际情况去删减合并流程,来保障用户无障碍的可以付款下单,我总结一下几个优化策略:1.优化核心流程,2.丰富决策信息,降低转化顾虑


4.61 优化核心流程


我们以前在放学的路上一定熟知自己家到学校的各种小道,在巷子的玩玩转转,比走大路要节省很多时间,节省了很多时间。


(1)合并优化流程


我们在做电商APP的时候,想要让用户快速下单购买也是需要提升用户的下单效率,例如我们以前输入完密码还需要点确认才能付款,现在我们在输入完第6位数密码的时候就直接付款了,现在手机的升级了指纹和面容识别后都不需要输入,就可以直接付款了,点外卖的时候,会有一键搭配购买,这都把以前复杂的步骤给整合优化,提升用户的下单效率。


(2)复杂流程分开显示,提升放弃成本


已经简化到最简单的流程仍然步骤还是很多的时候,我们可以将流程分开展示给用户,例如我们的流程一共有12项,已经是优化的最精简了,这个时候,我们每个页面显示4个给用户去填写,如果用户在第二个或者第三个想放弃的时候我们这个时候提示他,马上就要完成了,用户想着我之前已经填写一页了,反正也没多少了,我就在坚持写一页把,例如我们常见的电商产品,现在都是支持先选购商品加入购物车,在需要购买的时候在提升用户登录并付款,避免用户还没选商品就被登录界面给阻拦了。这都是可以提升核心转化率的策略。

4.62 丰富决策信息,降低转化顾虑


我们在超市购物时候,一般会先看看产品信息和生产品日期,然后在看看品牌,最后看看产品的价格,觉得合适就拿走付钱了,就算我们有挑选的空间,也会在这这家超市买,因为往往两家超市隔的都是比较远的,跑来跑去比较费力,但是我们在网上购物或者选东西的,换平台成本比较低,也不怎么费力,所以我们需要将我们的能有的优势都展示出来,降低用户的下单顾虑。

例如自如租房的优势就是有管家服务,服务比较全,这是它的优势,也是我们租房的时候比较担心的,有时候房间洗衣机或者热水器坏了找人也找不到,另外就是我们商品的销量好也需要展示出来,那么多人都买了都没问题,我也肯定可以放心的下单购买,我们产品或者平台有什么优势都可以展示全,去尽力打消用户最后的心理防线,从而提升下单转化率。

5.10 确定增长指标


当我们想做增长的时候,会遇到各种各样的指标,经常我们会觉得提升哪个指标都会比较重要,然后我们在把各个指标一把抓的时候却发现与目标却是南辕北辙的背道而驰,最终是研究了很多数据指标,却仍然没做好增长设计。

其中最关键的因素是我们每找到唯一的关键性指标,即OMTM,,全称是 One Metric That Matters,最早提出这一概念的是《精益数据分析》这本书中提出的,后来肖恩·艾利斯在《增长黑客》一书将其称为“北极星指标(North Star Metric)”,现在“北极星指标”已经称为行业的通用词汇。

北极星指标即在纷繁的产品世界中照耀着我们去走向终点的指标,它是产品走向成功的关键且唯一的指标,我们整个组织的增长目标都应该统一指向北极星指标。那么北极星指标有什么作用?

(1)明确目标:让我们避免南辕北辙,,帮助我们确定现阶段的产品最需要解决的问题,帮助我们找到清晰的目标,来促进用户的增长。

(2)集中资源:有助于减少内部的沟通成本,整合企业的人力、技术、资金等资源,明确方向,力往一处使,利出一孔。


5.11 怎么确定北极星指标


我们在前面说到北极星指标的重要性,我们前面也讲到关于很多数据指标,我们怎么可以确定符合企业定位的北极星指标呢?

北极星指标确立和我们自身的产品的属性、行业是密不可分的,不同的产品和行业也对应着不同的用户和盈利模式,用户价值的不同和商业模式不同,所对应的关键指标也会不同,因此,我们要确定北极星指标首先要了解产品的受众和我们的产品可以给受众提供什么样的价值来盈利、

在过去互联网高速的发展的过程中,也衍生出了不同品类的产品。但是总体来说,我们大致可以把互联网产品给归类为内容产品、社交产品、电商产品、工具产品、游戏等几大类目。我们可以看看不同的产品所对应的北极星指标。


5.20 怎么拆解增长指标


如果我们确定了产品的北极星指标,那么接下来我们需要做的就是任务的分配工作以及各部门的协作与协调,让每位成员能够能明确各自的职责,这样我们设立的北极星指标才可能完成,这里我推荐一种在各大企业都开始推行的一种工作方式OKR((Objectives and Key Results)工作法。全称为目标和关键成果,是一套明确和跟踪目标及其完成情况的管理工具和方法。

OKR 这套系统最初由英特尔公司制定,在谷歌成立不久,被风投家约翰·都尔(John-Doerr)引入谷歌,并一直沿用至今。除了Google以外,现如今有很多公司在使用,国外Facebook,Twitter,Linkedin,国内我知道知乎,字节跳动,明道等在使用。

通过这么多公司的使用充分说明了OKR方式的可行性,OKR在执行过程主

要以季度为周期来进行管理。

整个OKR制定是从上到下,逐级进行拆分的类似金字塔式结构,最终拆分到团队或者个人OKR。


OKR中的“O”代表我们这次工作的目标,例如:年度目标、季度目标、阶段目标,“KR”是关键成果,就是这些目标可以通过哪些关键成功可以完成,然后还有一个Action(行动方案),这些关键成功需要通过哪些方案去达成。



我们以一款内容社区类的产品为例子,我们这个产品的季度的北极星指标为提升用户的粘性,那么可能分配到我们设计负责人手上的目标为提升用户的留存率和简化产品的操作留程,那我们设计师需要做的可能是新增一个签到功能,让用户每天都记得签到来领奖励,或者简化直达看帖区的交互步骤,让内容能留住用户

所以我们北极星指标结合OKR工作法,如何在合适的阶段做合适的事,如下图所示


5.30 GSM数据驱动


GSM模型是Google的用户体验团队提出的一种指标体系,与OKR工作法不同,OKR主要适用于整个企业的任务的排兵布阵,而GSN体系主要是用来量化用户体验的,GSM分别为目标(Goal)→信号(Signal)→指标(Metric),所以也简称GSM模型。

但是由于我们国内的互联网情况和国外的环境也是不一样的,经过本土化的改良,我们国内的GSM被精细化为6步。

我们来结合实际的案例来看下吧!

例如我们我们公司的一款民宿的产品,我们的产品团队接到的需求是提升我们产品的活跃度。


(1)数据目标


那我们的数据目标便是提升产品的活跃度,我们接下来的工作便是对产品的现状进行分析,以方便我们开展接下来的设计工作。


(2)用户分析


用户分析主要是对我们现在的用户进行一个比较全面的分析,了解我们用户群体的使用习惯,发现用户主要的查看内容和用户的痛点,以方便我们做针对性的设计策略

(3)发现问题

我们对用户问题的采集主要是通过软件自带的用户意见反馈和APP store 的用户评价,从这里去获取的用户对产品的评价都会是比较客观的。

我们通过评价可以发现,用户对产品存在的一些隐形的坑的体验不好,例如附近有装修会影响人睡觉的之类的,那我们怎么去帮助用户去避免这些问题呢?我们可以让一些经常住民宿的人去写一些住店的体验日记,方便我们用户去查看。


(4)用户表现


有了住店日记,我们的用户表现是什么样的呢?我们的用户在决定入驻一些民宿的时候,可以去多方位的去查看其他人发入住日记。可以做多方面的对比,这样用户不仅可以减少踩到坑,在对比的过程中,在使用我们软件的时间也会更长了。


(5)设计策略


那我们怎么可以让一些入住过用户去写一些入住日记呢?我们可以针对愿意写的用户写的好的用户的日记进行曝光,他可以获得自己的粉丝群里,然后,你发一篇日记,我们会奖励给你相应的金币,这些金币在积累后可以获得优惠券,在下次入住后可以减免相应的入住费用,然后我们的产品可以发现写的比较好的日记推送给没有住过的新用户,或者有意向、搜索过的用户,方便用户横向对比,从而提升用户的活跃度

(6)衡量指标

因为活跃度它是比较抽象的一个概念。我们怎么去验证我们的设计策略呢?我们可以通过一些用户的金币的积累去验证我们数据,这样就会比较直观。只有当有有用户去发表住店日记,他才能获得金币的奖励。


增长设计需要精准的界定用户的痛点,这是用户增长的重要基础,然后在聚焦核心的业务,不断的强化痛点来驱动用户的增长。

随着行业的发展,现在行业对Ui设计的要求也是水涨船高,我们每一次改动需要给企业去提供一个能说得通的理由,我们也需要不断的去学习行业里的新的知识,来丰富我们的思维,这样我们才能在寒冬中走自己的坦途,一起加油!


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:Endings

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


金融类产品如何「拔高」用户体验?

雪涛

真正出色的金融产品是基于可用性,在成熟的数字生态系统中,能持续满足用户的特定需求。在UXDA每年交付的数十个UX/UI设计中,我特别选出了一些重要的作品来举例,与大家探讨设计对塑造金融产品方面的影响。


1/10 从标准化到量身定制

过去20年来,人们认为在创建数字金融产品时设计发挥的作用微不足道,这种刻板印象根深蒂固。大多数情况下,甚至被认为是出于营销目的的包装,关注点也多在产品功能和特性上。


使用标准化设计模板来加速产品开发是常见的做法,但这也解释了为什么许多金融服务看起来如此相似——平淡、乏味且对用户不友好的。


10年前出现的金融科技,打破了人们对设计的偏见,企业用其来吸引客户,并试着将设计潜力发挥到最大。而现在,进入金融行业的新玩家更专注于独特创新的设计,来凸显品牌身份。


大多数客户厌倦了乏味又复杂的模板设计,量身定制作为一种全新的趋势应运而生,不仅为产品注入了新鲜活力,还令金融公司的市场飙升。


「Private Wealth Systems」的财富管理平台就是一个很好的例子,通过量身定制的设计,为超高净值人士 (UHNWI) 提供他们对精致生活所期望的奢华体验。

该平台的优势在于它旨在解决用户每天遇到的痛点,关心客户财富的同时并尽最大努力协助其管理,而量身定制也增强了品牌与客户之间的情感联系。敢于打破禁忌并投资于大胆现代设计的金融机构知道,随着客户忠诚度和参与度的提高,肯定也会带来回报。

Takeaway

根据品牌VI创建的产品界面,可以使其在日后的竞争中脱颖而出。


2/10 从有限单一功能到多功能超级应用

向移动模式转型时,集中出现了几家金融科技公司,他们的优势在于功能单一,非常简单易懂。对客户来说,这就像一股新鲜空气,因为当时的银行服务功能既复杂多又对用户不友好。


当今的金融产品,正在不断扩大外部服务,打破功能壁垒。「Revolut」就是一个很好的例子,它不断扩展功能,逐渐成为一个超级应用程序。


单一模式的设定确实很简单,但随着用户期望的增长,以同样方式呈现更多功能的需求也在逐步增加。对用户来说,如何用一种既直观又体验佳的方式,展示100多个功能呢?


既要为客户提供解决功能,又不能在使用体验上打折扣,这并不简单。需要UX架构师和经验丰富的UI设计师密切合作,共同面对挑战——创建直观的产品架构与合乎逻辑的、用户友好的界面布局。


来看一个UXDA的多功能银行应用程序例子:我们将区块链、游戏化、机器人咨询、语音处理、生物识别、大数据等数十个功能整合进同一程序内,打造银行即平台的应用理念。

越来越多的功能服务不断涌现,可用性高的产品更容易吸引用户。这就解释了为什么金融机构都在努力创建自己的新银行或超级应用程序,但展示的服务内容也需要与公司的发展方向保持一致。


根据我们的经验,品牌希望在产品中包含大量「现代」功能,他们相信这会使解决方案在竞争中脱颖而出。但也可能会适得其反,建议在UX研究阶段做好取舍,以便确定更符合品牌受众的功能。非常成功的金融产品都是基于品牌受众的特定需求设计的,这些需求为客户提供额外的价值。

Takeaway

从超级应用程序设计中学习实践经验,保持简单性和可用性的同时,再进行产品拓展。


3/10 从表格式界面到游戏化

相信多数人看到银行后台,都会惊讶于它的复杂。员工必须同时使用多个软件程序,按照说明输入代码才能进行工作。操作系统也需要数月时间去学习,甚至用了很多年,还是无法全部记住。


由于涉及到大量的客户信息,这些解决方案全靠数据驱动,非常复杂。许多银行都在努力降低后台成本,却没有意识到对客户体验的影响。这导致了一个悖论:银行在数字化转型中投入大量资金以改善用户体验,而削减银行核心系统的成本又对客户服务造成损害,银行员工的负面体验又会影响服务质量和最终客户满意度。


后台系统的改进可以显著提高服务质量和速度,从而使客户更满意。以用户为中心的设计方法,在当今创建金融产品中也越来越流行,它不仅可以应用于外部银行产品,还可以应用于内部解决方案。


提高内部工作效率的一种方法是使用游戏化设计。这种方法使整个工作流程更加现代化,从而实现了工作流程的转变,如「ITTI Digital」所示。

为了使其以用户为中心,我们将大量繁重的数据翻译成人类语言。员工的学习曲线从几个月缩短至几个小时,人为失误的可能性显著降低,服务速度、员工效率和客户满意度都大幅提升。

此方案在IF的数字金融服务设计大奖中也得到了认可


金融机构将员工视为内部用户,为他们创造尽可能好的体验,相当于也为银行客户提供了最好的服务。认为游戏化和银行业务没有共同之处的想法太过时了,游戏化不仅提高了员工的生产力和积极性,也让结果变得更好。

Takeaway

尝试应用游戏化来激励用户,还能使最无聊的金融产品焕然一新。


4/10 从有限的功能到完整的体验

5年前,移动应用程序还被当做非主流的使用渠道,但今天它却满足了大多数客户的要求。令人惊讶的是,移动程序的功能非常有限,用户体验也相当差,甚至一些银行服务只在分行提供。疫情反应了严峻的现实——金融业还没有做好迎接数字时代的准备。


为改善金融品牌的客户体验,需要对移动应用程序进行全面的设计审核,以确保远程用户可以访问所有服务和功能。一家成熟的金融科技公司应快速找出适合客户的远程体验设计方法,而不是冠冕堂皇的借口。


设计「阿拉伯联合银行 (UAB)」移动应用程序时,我们的主要挑战是简化所有的日常功能操作步骤,使其简单高效。

流程的优化使用户更容易浏览应用程序,探索新的可能,同时也鼓励用户与程序互动,而不是联系银行或直接去分行。新应用仅发布数月,在App Store 和Google Play的下载率都大幅提升。

Takeaway

找到缺失的功能并完善它,建立一个完整的使用流程。


5/10 从传统企业到数字化转型

越来越多的老牌银行企业敢于走出舒适圈,挑战自我,踏上数字化转型之路。在金融科技的启发下,现有企业为用户体验设计注入了生命力,从而创造出令客户惊叹的产品,激励用户长期使用。


他们与内部或是外部的UX/UI设计师合作,整合公司各层级的设计方法和组织文化。这种融入了设计角色的团队,以用户为中心快速转型,成为金融科技独角兽的有力竞争对手。


「VTB银行」是一家被数百万人信赖的银行,升级用户体验后,产品重获新生,也体现了企业对线上银行用户的重视。

「VTB银行」的用户反馈说:新升级的产品更贴合他们的生活方式了;银行员工们也表示,紧跟时代变化的品牌,更能为客户提供最优的服务。

Takeaway

设计至上,跳出传统,才能打造出一流的数字产品。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:UX辞典

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档