首页

App 信息架构:如何让用户始终有掌控感

鹤鹤

信息架构是产品的骨架。具体而言,就是一款产品有几个一级页面,以及支撑起整个产品的一级页面、二级页面各有几种内容样式。所谓一级页面,微信的“发现”页就是一个一级页面;在“发现”页点“朋友圈”,进去的就是一个二级页面。所谓内容样式,Banner 是一种内容样式,九宫格是一种内容样式,设置页面那种列表也是一种内容样式。

 

这样的信息架构,有什么价值?

 

 

01 信息架构的价值:掌控感与健康迭代

 

对用户而言,信息架构的主要价值在于掌控感;对产品而言,信息架构的主要价值在于健康迭代。

 

1. 掌控感

 

如果房间里很乱,到处都堆满了东西,常穿的衣服也找不到了,我们就很容易变得烦躁不安。相反,如果混乱的房间被收拾得很整洁,我们的心情也会随之变得愉悦起来。

 

这中间的原因是什么?

 

个人觉得,从原始社会到 21 世纪,我们人类一直生活在竞争中,所以一直在追求一种对生活的掌控感。这种掌控感,会让我们找到一种存在感和价值感,从而给身处竞争中的我们一种安全感。一个收拾得井然有序的房间,会让我们觉得一切尽在掌握中;一个胡乱塞满东西的房间,则会让我们觉得这个房间处于失控状态,从而引发烦躁不安。

 

一款 App,如果主要的几个一级页面也都塞满了各式各样的内容,那么用户通常也会感到烦躁不安。这是因为用户不能马上理出头绪,不能马上获得那种掌控感。另外,如果大的改版经常让用户体会到这种烦躁不安,用户就会对这款 App 感到不满和失望,甚至失去信心和期待。

 

所以说,信息架构的第一个价值,就是让用户始终有掌控感。

 

2. 健康迭代

 

产品的更新迭代,有时会出现“发福”和“微整形”的情况。这都属于不健康的迭代。

 

所谓发福,就是变得臃肿了,比如一级页面突然增加了很多内容样式。所谓微整形,就是和之前比有点乱套了,比如有的一级页面突然消失了、有的一级页面突然出现了、有些常用的功能突然找不到了,诸如此类。

 

一款产品,如果大的改版总是通过发福、甚至微整形的方式实现,用户就很难获得掌控感。

 

反过来,一个优秀的信息架构,是接近“冻龄”的。也就是说,不管产品怎么更新、怎么加新功能,都能简单如初,都能让用户马上获得掌控感。典型的例子是微信:微信已经加了很多功能,但整体给人的感觉依然是简单的。

 

这样的信息架构,很少发福,也几乎不做微整形,所以能让用户永远有掌控感,从而确保产品能够健康迭代。

 

 

02 怎样实现信息架构的价值

 

什么样的信息架构,能够实现“掌控感”和“健康迭代”?

 

其实参考答案刚才已经出现了,那就是接近冻龄的信息架构。或者更确切地说,是一种“以不变应万变”的信息架构。

 

这里的不变,是指信息架构看起来永远没有明显变化,永远都很简单。万变,是指不断新增的功能,不断变化的功能。

 

如何做到以不变应万变?一级页面和二级页面都很关键,其中最核心的是一级页面。这里也顺便抛一个问题:一级页面,用来干啥?

 

一级页面主要用来干三件事,分别是:提供掌控感、提供常用功能、提供小入口。也就是说,一级页面尤其要把掌控感给到用户,要让用户快速找到常用功能,同时还要为不常用的功能提供一个小入口。需要说明的是,这个理念可能不太适合一些商店类产品,比如淘宝这样的电商产品,所以仅供参考。

 

那如何完成这三件事?主要有以下四个要点。

 

1. 不要超过 4 个一级页面

 

4 个和 5 个,它俩之间存在微妙的区别。比如我们给手机号或银行卡号分段时,更喜欢每段最多分 4 个数字,而不是 5 个,直观对比见下图。


4 个还是 5 个

 

很多 App 的底部导航栏,也是只有 4 个Tab,即 4 个一级页面。受生活经验等因素影响,当我们看到 App 有 4 个一级页面时,内心或潜意识里可能会觉得:哦,4 个,还算简单,基本能记住;而当看到有 5 个一级页面时,可能会感到一丝压力:5 个啊,有点多了。

 

总的来说,我们更偏爱只有 4 个一级页面的产品,因为 4 个仍在简洁的范畴内,5 个就已经开始走向复杂。在《微信背后的产品观》这场分享中,张小龙也提到过:“微信保证只有 4 个底部 Tab。”

 

2. 不要超过 3 种内容样式

 

Keep 6.0 系列的“探索”页面有 5 种内容样式,显得很复杂。微信的 4 个一级页面中,“发现”和“我”页面只有 1 种内容样式,“微信”和“通讯录”页面只有 2 种内容样式(加上顶部的搜索框),显得非常简单,和 Keep 的对比如下图所示。

 

Keep 6.0 系列与微信的内容样式数量

 

像微信这种内容样式数量上的极简,可能很多产品难以做到。那么,我们不妨退而求其次,早期先从 1 种、2 种内容样式开始。后期加功能了,可以考虑第 3 种,谨慎考虑第 4 种,尽量不要增加第 5 种,因为一定会变得复杂。

 

大家可能会说,产品的功能很多,3 种内容样式不够用。

 

针对这种情况,只要逻辑上不存在大的问题(比如把“支付”放到“通讯录”页面),就可以尝试把不同内容合并成一种样式。微信在这方面就做得很好,大家可以参考它的设计。比如下图的“通讯录”页面,联系人上方那些内容,和联系人不是同一类内容,但它们共用一种内容样式——一个简单的图文列表。

 

微信“通讯录”页面:不同内容合并成一种样式

 

3. 不为二成需求,去打扰八成用户

 

产品设计里存在一个比较常见的问题,就是往一级页面塞很多内容或功能,其中有相当一部分是用户日常用不到的,这种设计容易让人觉得臃肿。比如 Keep 6.0 系列的“运动”页面,就用了较大空间来推荐付费计划和运营活动,如下图所示。

 

用较大空间来推荐付费计划和运营活动的 Keep 页面

 

相信有相当一部分用户是不需要这些内容的,所以这其实也是一种打扰。这种打扰会影响到这些用户对这个界面的掌控感。

 

这种现象有两个可能的原因。一是企业担心用户不用这些功能,所以就在一级页面用很多空间来展示它们,Keep 的例子应该属于此类。二是有部分用户提建议,所以企业就加了这些功能。

 

关于第一个原因,个人观点,有些功能本身就属于二成需求,在一级页面占用太多空间不仅改变不了这个现实,还会对用户形成打扰。

 

关于第二个原因,个人看法,用户的建议通常只代表个人立场,而企业至少要代表大部分用户的立场。比如,网上就有人建议微信在朋友圈加一个屏蔽别人的功能,实际上微信有这个功能,只是一直隐藏,没有放出来——因为用的人少,它属于二成需求,放出来的话会对八成用户形成打扰。

 

总的来说,理想情况是接受现实、尊重规律:是八成需求就提供八成空间,是二成需求就提供二成空间。具体参考如下图所示。

 

是八成需求就提供八成空间,是二成需求就提供二成空间

 

4. 尽量不在标题栏使用 Tab 或下拉框,增加维度

 

这其实是张小龙分享过的一个观点,我个人很赞同,就直接引用一下。下面直接看两个例子。Keep 6.0 系列的前三个一级页面,标题栏都使用了 Tab,就显得内容很多,有点复杂,如下图所示(仅展示前两个)。

 

使用了 Tab 的标题栏

 

微信中拥有标题栏的前三个一级页面,其标题栏都没有使用 Tab 或下拉框,就显得简单、内容少,如下图所示(仅展示前两个)。这也是微信保持简单的一个重要原因。

 

没有使用 Tab 的标题栏

 

 

结语

 

一般情况下,产品都需要更新迭代:增加新功能,完善旧功能。

 

用户则是一个矛盾体:一方面对新功能和新事物怀有好奇心;另一方面又希望每次打开常用的产品时,都有一种回到家一样的熟悉感和一种家里井然有序的掌控感。

 

好的做法,就是类似微信那样:尽管加了新功能,但是看起来没有明显变化。也就是说,以“不变”的信息架构,来应对万变的功能。


文章来源:站酷  作者:Snow Design

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


App 信息架构:如何让用户始终有掌控感

周周

信息架构是产品的骨架。具体而言,就是一款产品有几个一级页面,以及支撑起整个产品的一级页面、二级页面各有几种内容样式。所谓一级页面,微信的“发现”页就是一个一级页面;在“发现”页点“朋友圈”,进去的就是一个二级页面。所谓内容样式,Banner 是一种内容样式,九宫格是一种内容样式,设置页面那种列表也是一种内容样式。

B端引导设计指南

纯纯

B端产品中很常见但是很少提及以及忽略的一个领域——引导设计



文章来源:一九互七(站酷)
作者:一九互七

转载请注明:B端引导设计指南

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


浅谈设计中的温度——如何用互联网思维帮扶乡村孤寡老人和留守儿童

鹤鹤

前言

 _


提及“设计的温度”,不得不提我们老生常谈的“情感化设计”,提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次:本能层、行为层、反思层,层层递进。



1/ 本能层的设计,是视觉的直接反馈,是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣;

2/ 行为层的设计,注重的是效用,产品功能是否好用,易用,用户使用产品过程中能否高效解决问题;

3/ 反思层的设计,是情感化设计的最高层次,指用户使用产品后,是否建立情感连接和记忆反馈。

因而,它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。


如果一款产品在满足基本功能,对于用户有用,同时好看并且易用,使用完之后还能产生愉悦以及满足感的话,那么这将是一款好的情感化设计产品,那必然是一个有“温度”的设计。


如果一个项目本身充满社会使命和责任感,那么“有温度的设计”将可以助推项目的落地链条,让使用平台的用户有“温度”,更让项目背后的人员感受到“温度”。


因为,接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗,用互联网思维去帮扶社会的乡村孤寡老人和留守儿童,用有温度的设计去践行有温度的项目。




项目背景

 _


随着我国社会经济的快速发展,农村青壮年劳动力转入城市,人口老龄化趋势加剧和家庭结构的演变,“空心村”越来越多,因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计,在农村独居和空巢老人超过3000万人,留守儿童也达到了近2000万人



孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题;而留守儿童因为缺少父母监管和陪伴,极易产生很多身体及心理问题,这两大群体是我国人群结构的重大组成部分,一个是未来的花朵和希望,一个是曾经发过光热的迟暮老人,他们需要关爱和守护,需要有一座“有温度”的桥梁,为留守儿童撑起蓝天、健康成长;为孤寡老人送达温暖、安享晚年。



基于社会现状,践行社会责任,腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会,预想搭建一个线上与线下结合的平台,成立“为村暖心小站”,立足于脱贫地区的农村社区,主要服务农村的一老一小以及其他需要帮助的困难群体,解决日间照料、健康护理及心理关怀等诸多问题。




设计思路

 _


1,定义产品形态


“暖心小站”的整个帮扶路径是以线上+线下相结合的模式,依据产品需求,在线上可以招募志愿者、发布救助需求、触达爱心人群;在线下建设实体服务站,开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。



那在线上的呈现形态上,主要考虑APP和小程序两种方式,经过对比分析,APP稳定性高、体验好,但是在乡村的受众群体内,互联网基础还是很薄弱的,要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广,占有率很高,那么依托于微信的生态、建立小程序,在推广层面会更加便捷和高效。同时,暖心小站本身结构简单,是一个非常轻量化的应用,这种特性也更适合以小程序为载体。



2,确定产品结构


在线上的产品框架上,设立两大专区:关爱老人专区和呵护小孩专区,各自创建知识宣导、在线课堂、爱心募捐等版块内容,同时在线上召集志愿者,在线下成立社区服务站,开展帮扶活动,然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。


确定框架之后,梳理角色和场景。本项目主要包含线下服务站的站长,工作人员,志愿者以及社会的爱心人士。



站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采,社会的爱心人士通过线上平台查看对应信息并参与对应活动,最终帮助农村的一老一小解决各种帮扶问题。


经过梳理分析,平台使用人群的年龄跨度较大,30岁到60岁这个群体占到了80%左右,所以在产品的呈现形式上将兼顾青年到老年的年龄跨度,让设计更友好,让产品有温度。



3,制定设计策略


定目标


基于前面分析,在农村现实环境中的孤寡老人和留守儿童,他们生活是灰暗的,情感是封闭的,他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖,让孤寡老人可以健康生活,让留守儿童可以健康成长。 




所以在设计目标的确定上:让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。



定色


品牌色的推导,是站在线下的实际场景感受来提炼,乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的,他们需要金灿灿的阳光给生活带来希望,而我们日常所的见的公益组织通常都是以红色系为主,似乎已经形成了作为公益组织的标识色,因为这种大红色传递爱心、带来温暖。


这些颜色都很有代表性,黄色代表阳光,红色代表公益,而暖心小站,将这两种颜色进行叠加融合,形成阳光橙,再以阳光黄纳入辅助色,形成温暖、友爱、活力、阳光的色彩体系。





定原则


在设计原则上,考虑到我们的用户群体年龄跨度比较大,一些年长用户互联网基础薄弱,为了让产品更有亲和力,让年长用户都能轻松上手,所以在策略上制定简单、易用、温暖的设计原则,保持框架简单清晰、交互简单易用,让产品有温度,让用户觉得有用、好用、还想用。



在“简单”方面,保持产品的页面框架要简单,结构要清晰,让用户清楚知道自己在哪里,所以在产品形态上只做了内容页的垂直展示,没有过多琐碎的信息入口,让页面信息更集中,浏览体验更聚焦,让年长用户也可以简单使用。



在“易用”方面,简单的框架和结构是易用的基础,在视觉元素的排列上,通过加大的图片、加大的间距、加大的圆角,通透的页面布局可以让内容陈列更集中,获取信息更高效。页面的间距以4px为基数,分为5个跨度,在统一性的基础上让界面更有节奏感,层级更清晰,从而提高产品的易用性。



在“温暖”方面,主要体现在在调性、元素、和内容上:

调性:以“温暖橙”+“阳光黄”为品牌色系贯穿始终,形成温暖、阳光的整体基调;

元素:在常规尺度上进行适当加大,加大的字体,加大的卡片占符,加大的点击区域,让产品更照顾年长用户的操作习惯,让产品更有温度;

内容:在内容及主图的运营展示上,突出“温暖”的调性,增强用户的共鸣,拉近用户与产品之间的距离。





整体视觉呈现

 _


整体以大面积的“温暖橙”为基调进行铺设,营造温暖阳光的质感,顶部展示产品名称和合作logo,增加产品的权威性和信赖度。


自上而下,控制大的间距和留白,分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。



一老一小的入口及详情:通过大头图的形式加强专题感知,引导用户点击。详情内展示相关的关爱资讯和助力入口,让用户可以选择性的进行点对点帮扶。



小站详情:分为小站介绍、人员风采、小站活动、和运营概况四个部分,清晰展示线下暖心小站的各项事务,让线上用户对线下小站有更全面的了解。



个人中心:功能简单,布局简洁,根据不同身份类型展示不同入口。作为站长的话,拥有志愿者审核、活动管理的权限,整体表现形式以统一的卡片式陈列,让内容更聚焦。




秉持“简单、易用、温暖”的设计原则,尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖,让用户想用,让产品好用。


经过多次推导与线下团队配合,小站1.0在今年5月初上线,第一批试点小站正在使用中,得到了较多正向良好的反馈,为乡村的一老一小带去了许多暖心的帮扶行动。



上线反馈

 _



产品上线之后,通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动,比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动,在重庆周家寨服务站新建了日间照料室,提升老人的居住生活质量。


今年5月20号,在中国互联网公益峰会上,为村暖心小站进行线上交流展示,获得了很多与会代表的关注和认可。




截止2021年7月,平台上线了两个试点小站,共举办了数10次线上+线下结合的活动,活动参与了520人,受到36000人以上的关注。暖心小站的建立和运营,对乡村的“一老一小”提供了更加有针对性和个性化的服务,同时加强对当地社会组织的培育和孵化,提升了服务对象的生活质量,促进和谐社区建设,助力乡村振兴。


通过这些试点小站的成果和反馈,让设计目标也得到一定程度的印证,让产品体现了“有温度、有故事、可以连接情感”的桥梁。




设计反思

 -


随着互联网的发展,人们对于产品不再是简单的形式服从功能,而是逐步转向形式服从情感。让设计回归情感,让有温度的设计去创造有温度的产品,可以增进人与产品之间的情感连接,让产品更有生命力。再者,用有“温度”的设计思维,去捕捉和解决社会问题,通过具有社会责任感的设计,推动社会进步,形成坚实有用的“设计力”。


那么,如何提升自己的设计力呢?可以概述三个保持一个向善。



保持热忱心

设计需要坚持,而坚持源于热爱,保持热忱之心会发现许多美好的事物,同一个需求会自发性地探索很多不同的解决方案,因此会洞察需求背后最本质的东西,切入要点寻找最优解。


还有一句话:“设计路上,唯有热爱,方能抵御岁月漫长”。


保持敏感度

这里的“敏感”指的是设计师要有好奇心,善于发现新事物,善于追踪最新行业动态,是一种职业敏感,是一种自觉行为,表现为热情、兴奋、敏锐,对新事物充满热情,对于新发现充满兴奋,能够特别敏锐的捕捉社会痛点解决设计难题。


保持共情力

生活中常说,有共情的人往往都特别感性、多愁善感,泪点低笑点也低,因为特别有代入感,而且对事物特别专注。


设计上所说的共情力则需要保持感性,同时也需要理性加持,不偏不倚。让设计师自己能切换到项目内的各种角色,不把自己当成局外人,将自己融于产品本身,随时切换为不同用户的视角,更能深入地发现、分析和解决问题,让设计站得住脚、更接地气,让设计有依有据。


让设计向善

设计的最终目的是传递需求、解决问题,这就意味着设计的初衷不同,那么最终的导向也会截然不同。

设计向善,保持“善”的初心,主张设计回归社会、回归到人心最本质的出发点,做有温度的设计、有仁心的设计、可持续的设计。


关注社会问题,保持一颗敏感而善良的心,用“设计向善”解决社会痛点,坚实巩固自己的设计力。


文章来源:站酷   作者:峰HENG

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


提高视觉和交互逼格,UI动效之SVG动画教程

鹤鹤

最近几年不管是WEB端页面还是APP,使用交互动效越来越多,加了动效的UI页面看上去不再那么枯燥无味,能很好的抓住用户眼球,既提升了用户交互体验同时也更好的展示了产品。通常我们会在哪些场景下使用动画呢?例如菜单图标、载入动画,空白页,产品介绍等都可以使用动画,下面是一些示例:


今天给大家讲解一下如何制作一个svg格式的动画,开始之前先和大家说一下svg是什么,目前web或者app中的动画大多使用svg格式,svg英语全称是Scalable Vector Graphics,它是一种可缩放的矢量图像图形文件格式,这种格式的文件具有边缘清晰、文件体积小、传输方便的特点,因此在网页设计以及APP中比较常用。可以使用Illustrator软件或使用

专业的svg编辑器进行设计输出,svg支持浏览器及任何文字处理工具打开。因此svg格式是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的图形页面。

如果你具有一些代码能力,还可以直接用代码来描绘图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器或编译器来观看。


综合起来SVG优势如下:


  1. 可被非常多的工具读取和修改

  2. 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。

  3. SVG 可随意缩放

  4. SVG 图像可在任何的分辨率下被高质量地打印

  5. SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

  6. SVG 可以与 JavaScript 技术一起运行

  7. SVG 是开放的标准

  8. SVG 文件是纯粹的 XML

目前制作SVG动画的软件主要使用AE(需要插件加持)或者在线的SVG动画工具,如svgjson.com等,如果使用AE需要安装bodymovie插件,我平时大部分动画都是使用svgjson工具完成的,所以今天给大家分享的svg动画教程主要也是使用在线工具svgjson来完成(完全免费),它支持导出svg或json格式动画,可以满足不同的需求,目前该软件虽然是英文版的,但是上手还是比较容易,为了更好让英语不是特别好的同学快速上手,我下面做了一个关键功能的中英对比说明。



软件地址:https://www.svgjson.com/editor-page/


如制作一个loading动画

制作要点:

  1. 创建2个圆形,一个底色(浅灰色)一个旋转的圆圈(蓝色)

  2. 在Store中设置Stroke Dash Array的圆圈长度,圆圈长度可以从Information中获取

3. 设置Stroke Dash Array后,开始旋转圆圈的长度,我设置了400,大家可以根据自己的需要进行个性化设置

4. 第四步我们来设置动画,先选择蓝色的圆圈,然后在Transform中设置旋转动画,第0秒为0,第10秒为3600
度(记住别忘记按关键帧动画按钮,第一帧设置了动画,后面更改参数会自动生成动画关键帧)

5. 按空格键或者点击时间条上的播放按钮看看效果,如果没有问题选择导出SVG动画,一个loading动画就完成
了。

完成后效果

上面的动画是通过Angle(角度)来实现的旋转动画,接下来我们可以通过Stroke Dash Offset来设置旋转动画


loading动画进阶教程

先看最终效果

由于svgjson的绘制能力相对较弱,所以我在其他软件中先画了如下图这个动画的基本元素(需要保存为svg格式),然后通过svgjson中的导入svg方式导入。

  1. 首先把“按钮左”和“”放在一起拼凑成一个圆,然后把“按钮中间部分”也放在圆中间,并且把它的Scale X值设为0.

  2. 把载入的圆圈放在刚刚的红色圆中,并设置Stroke Dash Array值和Stroke Dash Offset动画(具体参照上面的动画教程)

  3. 把载入成功的勾号放在载入圆圈中,然后设置动画Stroke Dash Array值和Stroke Dash Offset动画

  4. 再设置按钮左和按钮右位移动画,同时也需要“按钮中间部分”的Scale X的动画


通过上面的2个教程,相信大家对svgjson这个软件有了一个基本的使用能力,svgjson中的Stroke属性下的Stroke Dash Array和Stroke Dash Offset功能还是蛮强大的,可以通过这2个参数设置很多丰富的动画效果。

下面的动画主要使用x轴缩放功能实现的交互,当然也可以使用Stroke Dash Offset参数实现动画效果。

这个动画的核心点在设置对象的中心锚点位置,默认对象的中心点在中心,这个教程是把对象中心点移到了左侧

接下来给大家演示如何制作一个变形动画,变形动画也是一个非常常见的交互

这个教程重点是对象的缩放,缩放前需要设置锚点位置,然后就是设置x轴和y轴的偏移值。


总体来说,svgjson网站提供的动画能力还是很强的下面是我制作的项目样例:



原文地址:站酷
作者:Snmendala

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

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

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

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

定量研究进阶:客户满意度模型与卡诺模型

鹤鹤

如何提高“数据修养”?

定量研究指的是对用户的某些特性进行数字化测量并进行统计研究。对于定量研究来说,数据的统计以及数据的分析是尤为重要的。

首先,需要说明数据修养,与统计技术的水平无关。

数据修养指的是培养科学的、正确的对待数据的态度,在收集、分析和解读数据的过程中做到求真务实。


1、在研究设计时就考虑到数据分析方法

良好完善的研究设计是正确进行数据分析的前提,如果没有科学的设计,良好的数据质量,那么无论用什么方法和软件都无法获得真实的结果,统计就变成了“数字游戏”。


从预期的研究结果出发,向前逆推数据分析方法和研究设计

Step1 · 要解决什么问题

Step2 · 期望得到的研究结果

Step3 · 需要的统计分析方法

Step4 · 需要的数据类型

Step5 · 对应的调查方法

Step6 · 研究的设计


2、在研究设计时就考虑到数据分析方法

在问卷开始前将问卷框架设计做好


3、数据收集时的注意事项

线上问卷调查是目前我们所用到最主要的调查形式,进行线上问卷调查时,误差的主要来源包括抽样误差和非抽样误差两类。

抽样框误差:抽样框误差产生于目标总体与抽样框的不一致,因抽样框引起的误差主要有样本的代表性问题(如是否能代表网民、是否能代表某类用户总体等)以及抽样框重复(用户重复回答)以及抽样遗漏(如无法包括竞品用户等)。

解决方案:正确界定网络调查的适用范围,网络调查应主要针对以网民为对象的项目。


无回答误差:样本中的部分个体不愿意或是无法完成调查问卷而产生的误差,原因:

(1)激励手段不够,缺乏交流。

(2)技术障碍,如网速不稳,浏览器不兼容。

(3)对隐私的顾虑。

解决方案:网络调查与抽样技术相结合,进行问卷投放跟踪(如提醒用户填写),或者结合有一定激励性质的产品运营手段。


计量误差:计量误差又称登记误差,是指由于各种原因使得调查和计量的结果与真实情况不符而引起的误差,如,问卷歧义,被调查者对调查内容定义和概念误解所造成的误差。

解决方案:科学设计调查问卷,要求调查问卷更易于理解、更加完整、更具有亲和力,保证被调查者做出准确而真实的回答。



顾客满意度模型

是指用户对一种产品或服务进行消费体验后的感知,与其期望值进行比较后,所产生的的一种心理状态。

用户满意度理论的发展

1974年,本田公司就进行了有关客户对汽车评价的调查,但是当时没有“顾客满意”的概念。

1989年,美国密歇根大学商学院质量研究中心的费耐尔博士将计量经济模型引入顾客满意度测评建立了费耐尔逻辑模型,得到广泛的应用。

20世纪90年代后期,CS(顾客满意度)理论已成为在全球工商界开始盛行的一种新型的企业文化和管理哲学。

与此同时,许多国家(地区)先后对顾客满意度指数测评的理论、模型和方法开展了全面深入的研究。


以美国顾客满意度的模型 - 费耐尔模型为例,各模型元素的构成元素参考:


美国顾客满意指数模型主要内容框架:


测评指标体系的量化:李克特量表

对事物的特性变量可以用不同的规则赋值,因此形成了不同测量水平的测量量表。基本的测量量表有四种:类别量表、顺序量表、等距量表和等比量表。顾客满意度指数测评中应用的五级李克特量表就属于其中的顺序量表。一般采用的五级态度是:满意、较满意、一般、较不满意和不满意,相应赋值为5、4、3、2、1。也可为相反的顺序,将五级态度在题目开头给出,然后让被访者根据对每个测评指标满意程度直接在相应的方框上打钩或者画圈。

顾客满意度研究除了通过李克特量表将测评指标体系量化以外,还有一个非常大的特点,即测评指标的权重。

顾客满意度指数测评体系反映测试对象的质量水平状况和特征,而每一测评指标的变化对顾客满意度指数变化的影响程度是有所不同的。反映影响程度的重要尺度是权重,权重的确定与分配是测评指标体系设计中非常关键的一个步骤,对于能否客观、真实的反映顾客满意度起着至关重要的作用。



测评指标权重的赋值方法:

(1)主观赋权法

(2)客观赋权法

(3)直接比较法

即以同级指标集内重要程度最小的指标为基础,其他指标与之比较,作出是其多少倍的重要程度的判断,然后逐一分析,得出各指标的权重。

(4)对偶比较法

我们将重要程度分为非常重要、重要、比较重要和不重要四个等级,把所要比较的指标配成对,然后一对一地对指标的某一特征进行比较,做出重要程度判断:

a、当A与B比较时,A非常重要,B不重要,则A=4,B=0;

b、当A与B比较时,A重要,B比较重要,A=3,B=1;

c、当A与B一样重要,则A与B分别记为2。

(5)德尔菲法

(6)层次分析法

是美国著名运筹学家赛迪给出的1~9标度法,它根据各测评指标的相对重要性来确定权重。层次分析法可以通过测评指标两两比较,使复杂的无序的定性问题能够进行量化处理。

(7)相关分析

(8)回归分析

(9)线性结构方程模型(LISREL)

(10)部分最小二乘法(PLS)

(11)路径系数分析

主要作用是分析顾客满意度指数模型中各结构变量之间的关系,分析顾客满意度指数主要受什么影响,从宏观上如何进行调控才能更有效提升CSI。具体来讲,就是在百分制的计分方式中,因变量变动1分,直接影响到后面结果变量变化的分值。


如图中所示,产品质量提高1分,将直接影响顾客满意度提高0.36分,结构变量除了这种直接影响外,还可以再模型中箭头所指的方向上产生间接的影响。如图中顾客期望除了对顾客满意度的直接影响是-0.11外,还通过顾客对质量的感知和顾客对价值的感知对顾客满意度产生间接影响,间接影响系数的大小可以由所有从顾客期望到顾客满意度的路径上的系数乘积的累加和表示,计算方法为:

(-0.41)x0.94x0.26+(-0.41)x0.36+(-0.01)x0.26=-0.25

顾客期望对顾客满意度的直接影响系数和间接影响系数相加可以得到全部影响系数,即(-0.11)+(-0.25)=-0.36

同理,可以计算出其他结构变量对顾客满意度的直接影响系数、间接影响系数和全部影响系数。

如果能将竞争对手的指标分值也进行路径系数分析,那么多企业的战略决策制定,为推进企业发展将会更具有实际指导意义。


关于路径系数分析结果的应用:

可用于分析顾客特征的类型,例如(1)价值取向型。(2)质量取向型。根据不同顾客的需求和体验,提升其满意程度。更有利于精细化运营。


 “顾客净推介值”理论(NPS理论)

进行顾客满意度研究,其主要目的,就是要不断提升顾客的满意度,从而建立更多的忠诚顾客群,为企业带来更大的利润和收益。通过“顾客净推介值”分析,我们可以进行顾客忠诚度的深入分析、研究,以在这方面能提供更多的数据给企业作为经营的决策参考。


“顾客净推介值”(NPS:Net Promoter Score),顾名思义,“顾客净推介值”指的就是公司现有顾客将公司的产品或服务向其他人推荐的程度如何的测量。这也是预测企业有机增长和区分公司“利润良性”和“不良利润”的一种手段。

分析假设:我们可以把企业的利润分为“不良利润”和“良性利润”两种。


“不良利润”是以损害客户关系为代价换来的利润。如果客户觉得所受到的待遇不周,则产生的利润就是不良的。即不良利润是通过降低客户体验的质量来省钱,是向顾客榨取价值而非创造价值。


“良性利润”则截然不同,如果客户自愿回头购买更多产品与服务,而且还建议其他人购买,这样公司便实现了良性利润。实际上,满意的顾客变成了公司营销部门的一部分,即他们成为了推介型客户,是公司的最佳营销员。


例如:

根据本次调查,我们的问题是“您有多大的可能推荐此产品呢?”这个问题作出评价,并把被访者分成三类,即“推介者”(90分~100分)、“消极满意者”(60分~90分)和“贬低者”(0分~60分)。用推介者所占百分比减去贬低者所占百分比,就得到顾客净推介值。



卡诺模型—理论篇

一、卡诺模型的由来

KANO模型简介

受行为科学家赫茨伯格的双因素理论的启发,东京理工大学教授狩野纪昭(Noriaki Kano)和他的同事Fumio Takahashi于1979年10月发表了《质量的保健因素和激励因素》一文,第一次将满意与不满意标准引入质量管理领域,并于1982年日本质量管理大会第12届年会上宣读了《魅力质量与必备质量》的研究报告。该论文于1984年1月18日正式发表在日本质量管理学会的杂志《质量》上,标志着狩野模式(Kano model)的确立和魅力质量理论的成熟。


双因素理论

双因素理论又称激励 — 保健理论,是美国的行为科学家弗雷德里克·赫茨伯格提出来的。双因素理论认为引起人们工作动机的因素主要有两个:一是保健因素,二是激励因素。只有激励因素才能够给人们带来满意感,而保健因素只能消除人们的不满,但不会带来满意感。

其理论根据是:

第一,不是所有的需要得到满足就能激励起人们的积极性,只有那些被称为激励因素的需要得到满足才能调动人们的积极性。

第二,不具备保健因素时将引起强烈的不满,但具备时并不一定会调动强烈的积极性。

第三,激励因素是以工作为核心的,主要是在职工进行工作时发生的。


保健因素 - 是指造成员工不满的因素。保健因素不能得到满足,则使员工产生不满情绪、消极怠工,甚至引起罢工等对抗行为;但在保健因素得到一定程度改善以后,无论再如何进行改善的努力往往也很难使员工感到满意,因此也就难以再由此激发员工的工作积极性,所以就保健因素来说:“不满意”的对立面应该是“没有不满意”。


激励因素 - 是指能造成员工感到满意的因素。激励因素的改善而使员工感到满意的结果,能够极大地激发员工工作的热情,提高劳动生产效率;但激励因素即使管理层不给予满意满足,往往也不会因此使员工感到不满意,所以就激励因素来说:“满意”的对立面应该是“没有满意”。

二、什么是卡诺模型

 (1)A—魅力质量要素:此质量要素具备时,会让顾客感到满意;反之未具备时,顾客也能接受,同时不会感到不满意。

例如说,海底捞等桌做美甲。

(2)O—一维质量要素:此质量要素具备时,会让顾客感到满意,反之未具备时,则会导致顾客不满意。

例如,火锅店羊肉越便宜越爽,上网的速度越快越爽。

(3)M—必备质量要素:此质量要素具备时,顾客认为这是应该的,反之未具备时,会导致顾客不满意。

例如,火锅店要有牛肉,手机能打电话。

(4)I—无关质量要素:此质量要素无论具备与否,对于顾客,都不会有任何满意或者不满意的感觉。

例如,山寨机可以刮胡子。

(5)R—反向质量要素:此质量要素具备时,会导致顾客不满意,反之不具备时,顾客反而会感到满意。


卡诺模型—实操篇

卡诺模型的两种用途:

1、判断产品的某一质量特性对于顾客而言,属于何种质量要素

“顾客就是上帝,但是用户往往需要的不多,想要的却太多,为了让他们更满意,我们是不是要一一满足他们?”

2、通过满意的敏感性分析来筛选顾客满意度的改进因素

“用户可能根本不知道他们想要什么,而我们能提供的东西很多,但是资源却是有限的,应该怎么利用有限的资源来使用户更加满意”


卡诺模型的研究步骤:总的来说,可以分成以下五个步骤:

Step1,定义质量要素

Step2,构建卡诺问卷

Step3,进行问卷调查

Step4,分析调查结果

Step5,筛选改进因素


Step1,定义和选择质量要素

列出需要使用卡诺模型问卷进行调查的指标,这些指标可以是满意度所涉及的系统指标体系中的所有指标,也可以是关注的部分指标。

“官网中xxx方面的信息”

“产品中的xxx功能”

“线下户外广告宣传”

“......”


Step2,构建卡诺问卷

卡诺问卷的设计思想是从正反两方面进行提问,以便了解顾客对某一改进因素的看法,然后将这些改进因素区分为“魅力质量要素”、“一维质量要素”、“必备质量要素”、“无关质量要素”和“反向质量要素”.


在卡诺问卷中,每个改进因素都由正向和负向两个问题构成。正向问题是测量顾客在具有某项因素时的反应;负向问题则是测量顾客不具有该项改进因素时的反应。卡诺问卷中的问题答案采用五种程度选项,他们分别是“我喜欢这样”、“它必须这样”、“我无所谓”、“我能够忍受”、“我讨厌这样”。无论是正向还是负向问题,都是同样的答案选项。

Step3,进行问卷调查

问卷调查的方法有很多,卡诺问卷并没有限定必须要什么方法调查,例如,入户访问法、拦截访问法、传统访问法、计算机辅助等等。


Step4,分析调查结果

在获得了每个改进因素的卡诺需求分类数据之后,分析调查结果,分析调查结果的目的是为了了解每个改进因素的顾客需求分类状况。需求分类最简单有效的方式是计算每个改进因素在不同需求类型中出现的频率。

将顾客对某项改进因素的正向和负向问题的答案填入卡诺评价表,就可以得到顾客此项因素的需求分类:

如果顾客对正向问题的回答是“我喜欢这样”,对负向问题的回答是“我讨厌这样”,那么在卡诺评价表中,这项改进因素就被分类为“O”,即“一维质量要素”。


如果顾客对某项因素正负向问题的回答结合后,分类是M、A、I或者R,那么该因素就被分别分类为“必备质量要素”、“魅力质量要素”、“无关质量要素”或者“反向质量要素”


另外,卡诺评价表中的分类“Q”,是指有疑问的(questionable)结果,顾客的回答一般不会进入到这个类别,除非这个问题的问法不合理,或者是顾客没有很好的理解这个问题,或者是顾客在填写问卷时出现错误。


Step5,筛选改进因素

对改进因素的顾客需求进行分类,还不能完全说准确的说明这些因素的改进次序,因此,还需要通过满意的敏感性分析来筛选改进因素。

满意敏感性分析是指通过对各种改进因素的满意影响力和不满意影响力的分析,来判断顾客对这些因素满意水平变化的敏感程度,其目的是确定改进哪些因素会更有利于提升顾客满意度。

满意敏感性分析是通过满意影响力(SI)和不满意影响力(DSI)两个方面来测量的,他们的测量公式如下:

满意影响力(SI)

满意影响力SI是以魅力质量要素A与一维质量要素O的频率之和为分子,以魅力质量要素A、一维质量要素O、必备质量要素M、无关质量要素I的评率之和为分母计算得到的,满意影响力的大小显示,如果某项因素得到改进,顾客满意强度会有多大的提升。


不满意影响力(DSI)

不满意影响力DSI是以一维质量要素O与必备质量要素M的频率之和为分子,以魅力质量要素A、一维质量要素O、必备质量要素M、无关质量要素I之和为分母,并乘以(-1)计算得到的,不满意影响力的大小显示,如果某项因素未满足顾客的需求,会对顾客满意的降低产生多大的影响。


例如,对于如下的“改进因素满意敏感性分析表”统计结果:


将各因素以SI值为横坐标、DSI值为纵坐标纳入改进满意因素敏感性比较矩阵中,同时以左上原点为圆点,用半径为0.707的四分之一圆弧将不同的改进因素进行分割,如下图:


在因素选择线右侧的因素就是需要实施改进的因素,并且离圆心越远的因素,顾客的满意敏感性越大。从图中可以看出,A和D因素暂时不需要改进,需要改进的因素为B、C、E和F方面,按照重点次序排列为F、E、B、C。








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

文章来源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




设计模式 | 多级撤销 Multilevel Undo:让用户更有安全感

鹤鹤

What 是什么

简介:「多级撤销」允许用户撤销一系列的操作。用户操作的顺序能被系统捕获记录,根据原始执行顺序,一步步返回历史操作。


例子:用 Sketch 画设计稿时,可以多级撤销,允许用户返回上一步或更早的历史操作


undefined


Why 为什么

具备多级撤销的功能可以让用户觉得能够对界面进行安全探索,不必担心造成某些不可取消的修改。例如,如果单击了错误的菜单项,不需要进行复杂的恢复,不需要退回到此前保存的文件版本,或者寻求系统管理员的帮助。


多级撤销也让专家用户更快更容易地探索工作路径。举例而言,一名 Photoshop 用户可能会在一个图片上执行一系列的滤镜操作,研究那些结果看是不是他喜欢的,然后再逐一撤销,回到起点。


When 什么时候使用

需要用户频繁在单一页面上交互的用户界面,相比普通的网站或者移动端 APP,交互操作要复杂得多。例如:文件编辑器、图形建模工具、邮件阅读器、数据库软件、写作工具、编程环境等。该功能能使用户撤销一系列操作而非单一个操作。


使用条件:该软件的单一界面交互比较复杂和频繁


How 如何使用

软件首先需要一个强大的模型,这个模型是关于动作是什么样的——动作的名称、动作所关联的对象,以及如何返回历史动作。


决定哪些动作需要成为可取消的操作。如果动作可以改变一个文件或者数据库——任何将是永久性存在的对象——都应该是可取消的动作。具体而言,在大部分应用里,人们期望能撤销下面这些改变:

  • 文档或表单的文字输入

  • 数据库

  • 图片或画布的修改

  • 布局上的变化位置、大小、顺序或分组在图像应用程序中

  • 文件操作,例如删除或修改

  • 对象的创建、删除和重新组织,例如邮件消息或电子表单的列

  • 任何剪切、复制、粘贴操作


下面这些修改基本上是不可撤销的:

  • 文本或对象选择

  • 窗口或页面之间的导航

  • 鼠标光标和文本光标的定位

  • 滚动条的位置

  • 窗口或面板的位置和尺寸

  • 在一个未提交的对话框或模态对话框上的改动


展现方式

然后,决定以哪种方式把撤销操作展现给用户。大部分桌面应用程序会把“撤销/重复”的菜单项放在“编辑”菜单下。撤销通常也关联到Ctrl+Z 或类似的快捷键。


Example 案例

案例一:Microsoft OneNote 笔记编辑器

用户需求:撤销文字输入

Microsoft Onenote  文档编辑器挡在输入过程中需要修改可以用快捷键 COM + Z 撤销,或者使用编辑菜单下的按钮帮助用户返回上一步。

undefined


案例二:Photoshop 多级撤销

用户需求:回到历史操作记录

Photoshop 同样可以采用快捷键和菜单按钮返回历史操作,由于 PS 的操作修改繁琐且复杂,所以为用户提供了历史记录面板,用户也可以点击历史操作步骤回到想要的历史操作记录。

undefined


案例三:美图秀秀图像处理 App

用户需求: 撤销回到上几步图像处理结果

使用美图秀秀等图片处理 App 对图像进行美化操作时,常常会返回查看对比不同的效果,或者操作错误时返回到前几步,顶部的撤销按钮可以让用户回到任何历史操作步骤。

undefined

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

文章来源:站酷 作者:Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



延迟增强——视频信息流广告的提转秘诀

鹤鹤

伴随短视频平台的崛起,移动互联网的主流内容消费形态向短视频视听语言转变,视频信息流广告的时代已经来临。如何通过设计提升转化,是视频信息流广告所面临的挑战。


为了提升广告转化效果,我们结合实际项目,通过大量的实验与思考,梳理并总结了一套适用于视频信息流广告的转化组件呈现原则,我们将其命名为“延迟增强”。涵盖了沉浸式竖视频流、图文混合信息流、横视频列表流等各类常见信息流场景。


///

延迟增强是什么?


视频信息流广告有三要素:内容、框架、转化组件。其中广告内容来源于广告主投放的物料,基础框架需对齐宿主保持一致性,所以仅有承载转化信息和行为的转化组件,是可设计部分。 


“延迟增强”就是针对“转化组件”的一种伴随视频内容分阶段/渐进式的呈现方式。它由消费者决策时的理想心理动线,结合广告行为推导得出,并经过实验验证了其对于转化提升的有效性。


“延迟增强”包括两个阶段:1.广告展现初始阶段,延迟展现广告意图,通过内容吸引潜在用户;2.广告内容逐步呈现阶段,转化组件渐进式增强,辅以增益信息,不断强化,引导转化行为。


它指导了转化组件从“呈现”到“增强”的全流程,从时机(出现&增强时机)/引导(动效&互动引导)/前置(信息&转化前置)三个部分,帮助提升广告转化效果



///

时机-延迟增强如何呈现?


转化组件的呈现时机包含“何时展现”与“何时增强”两个部分,前者帮助增加广告接收率,后者提升广告转化率。


01/ 出现时机:

延迟展现广告意图,可以提升广告卖点的展现机率


互联网的快速发展使得受众被动卷入爆炸式增长的资讯信息体中,广告借助这一媒介迅速发展,但也因为部分商业广告的过度宣传与其降低用户信息获取便捷性的本质,不可避免的使受众产生了心理上的逆反与抵触情绪,从源头拒绝了广告信息。

 

所以对广告来说,在广告展现初始,延迟展现广告意图,融入内容,可以缓解受众的抵触情绪,提升广告卖点的展现机率



02/ 增强时机:

通过用户行为和视频特征动态决定增强时机,可以有效提升转化


对广告来说,搭配广告内容进行增强,通过内容积累购买欲/信任感,然后通过阶段性的增强来提示操作,对比一成不变能起到更好的转化效果。


我们首先尝试了程序化的增强时机,在不增加技术成本的前提下,根据历史经验,面向不同的广告均采用固定时段的阶段性增强


但不同的广告物料内容不同,不同的用户偏好也不同,固定的增强时机并不能很好的满足所有广告需求。所以在技术能力可以承载的时候,我们采用了动态时机策略,通过用户行为和视频特征动态决定增强时机,在程序化增强时机之后,再次实现了转化提升


undefined


///

引导-延迟增强如何引导转化行为?


转化组件如何引导转化,则可分为基础的视觉引导与进阶的互动引导,前者帮助抢夺视觉注意力,后者则能够在互动体验中植入部分帮助决策的“小心思”。

 

01/ 视觉引导:

适当增加视觉吸引点,可以有效引导点击

 

延迟增强需要通过阶段性的增强来提示操作,而如何增强能有效吸引注意则需要琢磨,已有实验表明转化按钮增加扫光动效与智能取色,能有效吸引注意,引导点击,对转化提升有良好效果



02/ 互动引导:

让用户主动选择,可以增加广告曝光,辅助转化决策

 

互联网产品设计对于用户交互体验的追求越发极致,如影视行业走向可交互网剧,本质上是从用户接收转变为用户主动参与,用户本身对于获得优质体验的意识逐渐觉醒。商业化产品也需要紧跟“体验”与“互动”,将广告变为互动体验或具备使用价值的信息,让用户从被动浏览到主动参与,掌握对广告的选择权

 

以互动投票为例,我们通过用户与用户之间的观点表达,以投票选择的形式诱发群体性选择,引起好奇心与同侪压力

 

若用户选择符合群体选择,则带来群体性背书,增强信任感;若用户选择不符合群体选择,基于从众心理,用户极有可能对群体选择产生好奇,从而浏览两种选项的内容,有效的增加了品牌曝光。


undefined


///

前置-延迟增强如何帮助转化达成?

 

转化组件的前置主要包含信息前置与转化前置,前者辅助转化决策,后者帮助便捷操作,更好更快的完成转化。


01/ 信息前置:

增加增益信息或前置落地页信息,可以辅助转化决策


购买/转化一定是需要足够的信息积累信任感才能达成的,在前卡适当的增加卖点信息能够更好的帮助用户决策。针对下载类广告可增加评分与星级,二电类广告可以增加价格信息,甚至可以前置优惠劵、图片banner等信息,均能实现转化的正向提升


undefined


02/ 转化前置:

缩短转化路径,可以帮助转化行为更便捷的达成


在信任感积累与阶段性的增强都达成的时候,在当前转化对比跳转落地页再进行转化,链路更短,用户流失概率更小。比起实验尝试,更像是延迟增强的基础能力配置。


首先,我们针对表单/咨询/电话/安卓下载都进行了转化前置,具有用户明确意向的按钮点击会直接在当前进行反馈



除了直接将操作前置外,针对不同细分场景的需求,还可以通过交互形态的优化在感官上缩短路径

 

这里以百度的视频MAX广告为例,我们针对重落地页的商家,将MAX首屏(视频页)与H5落地页的关系变拼接结构为双层结构,通过浮层面板承载落地页,延时自动弹出,强引导下方内容,激发用户上滑浏览兴趣,解决了落地页隐藏较深,转化链路过长的问题,同时增加了落地页曝光从而提升转化。



///
结语


在视频信息流领域中,延迟增强仍然可以继续深挖,作为“基础建设”承载未来更多细分场景下的互动化、个性化的“精神需求”。

 

同时延迟增强设计方法也可以横向复用于广告前卡、落地页、IM工具等各种需要在合适时机抓取用户注意的场景中,去追求点击或者转化的提升。甚至在未来可以尝试其在长视频或图文场景中的应用。


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

文章来源:站酷 作者:百度MEUX
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


市场与用户研究基础

鹤鹤

前言:互联网产品都是以用户为中心,为用户服务,那么市场与用户研究对工作的重要性自然不言而喻。这是一项市场与用户研究的栏目,总计大概十个篇幅。本栏目将会对工作中市场与用户研究做一系列的整理与复盘,希望可以抛砖引玉,带给大家在市场分析与用户研究中一些经验。



一、WHAT/什么是用研?


更准确的定义是:市场与用户研究。


市场研究:是指为实现市场信息目的而进行研究的过程,包括将相应问题所需的信息具体化、设计信息收集的方法、管理并实施数据收集过程、分析研究结果、得出结论并确定其含义等。


—— 着重于产品的市场营销


用户研究:是用户中心的设计流程中的第一步。它是一种理解用户,将它们的目标、需求与企业的商业宗旨相匹配的理想方法。用户研究的首要目的是帮助企业定义产品的目标用户群、明确、细化产品概念,并通过对用户的任务操作特性、知觉特性、认知心理特性的研究,使用户的实际需求成为产品设计的导向,使产品更符合用户的习惯、经验和期待。


—— 着重于产品设计体验优化


二、WHY/为什么要做用户研究?


理解用户行为数据产生的原因


用户为什么来?为什么不来?

用户为什么留存?为什么流失?

用户为什么付费?为什么不花钱?

用户为什么喜欢A活动不喜欢B活动?



新的开发功能、新的界面风格、新的运营活动、新的品牌卖点更加贴合用户


这个真的是用户想要的吗?

这个风格是我们的目标用户喜欢的吗?

目标用户愿意参与我们的运营活动吗?

我们与竞品的差异化是什么?



产品的想法与用户的行为习惯与心理诉求


这个功能真的是用户需要的吗?

这个功能真的符合用户的行为路径吗?

......



三、WHEN/什么时候做用户研究?

我们可以听到:


“用户流失,我要做个用户研究,看看到底是为什么?”

“用户不付费,我要做个用户研究,我要找到原因。”

“用户一直活跃度不高,我要做个用户研究,找找改版的方向。”


但是事实上,我们应该

以科学的方法贯穿整个产品生命周期做用户研究。

    

1、在产品概念期,我们需要把握市场机会的判断、挖掘用户需求、做好产品概念的设计,那么在这个阶段,我们通过用户研究做好市场细分研究,估算市场价值。并且预测市场的规模,估算产品的竞争潜力。同时做好竞品的分析与研究,决定自己产品的定位与卖点。挖掘用户需求,找到用户痛点、爽点、痒点。做好产品概念测试,分析是否满足用户的需求,解决用户的痛点,找到用户的爽点,把握用户的痒点。


2、在产品设计开发期,在这个产品时期,我们需要进一步的把握目标用户的定位,设计产品的核心功能,做好用户付费策略的设计。那么在这个阶段,我们通过用户研究做美术风格的测试、核心功能的测试甚至产品名称测试,看产品在该市场的定位研究、以及进行商业化研究,帮助产品研究用户付费策略。


3、在产品的宣传推广期,在这个时期,为了更好的实现产品商业化,我们需要制定产品竞争的策略,帮助产品在市场中获得更好的变现。同时帮助市场营销部门制定传播策略,提炼产品的核心卖点。在这个阶段,我们通过用户研究帮助市场部门以及运营部门测试宣传素材、评估宣传效果、研究用户的触媒习惯以及测试用户U&A研究(使用与态度研究),提升市场营销品质。


4、在产品进入平稳发展期,在这个时期,我们需要进行持续竞争的策略制定,需要做好产品生命周期的管理,同时也要隔一段时间做品牌营销刷新。以便于更快,更好,更贴合市场。在这个阶段,用户研究需要做市场推广效果评估、版本迭代的监测研究、用户满意度的调查研究,并且需要做好流失用户研究,找到用户流失的点,做好改进。同时也要做好竞品研究,监测市场的变化。也需要做好品牌定位研究研究、用户诉求的研究以及用户情感研究,帮助产品做好迭代与更新。


5、 最后在产品衰退期,用户研究需要做再定位策略或者做好退出的计划。那么我们需要通过用户研究做好整体市场趋势研究、竞品研究、新机会的探测性调查,提供数据,帮助公司决策接下来的发展,是引流导入到二代产品?亦或是做好迎接新产品的准备?


四、WHERE/到哪里去做用研


我们可以采取线下以及线上两种方式相结合:

  • 线下

在街头进行街头访谈、或者去用户家里进行面谈或者调查纸质调查问卷的形式、到公司里进行入户访问以及在专门的访谈室进行座谈会等等。

  • 线上

可选方式更多,可以在qq群、论坛以及贴吧等平台发送调查问卷,或者在微信中直接进行语音或者视频等方式。也可以在产品内发放调查表,或者发放调查表到用户的电子邮箱等等。


五、WHO/谁来做用户研究? 对谁做用户研究?


谁来做用户研究呢?

一般来说,大企业有自己的用户研究团队,中小型企业可以外包给专业的用户研究公司,也可以进行内部设岗。

      

用户研究的对象是哪些人?

在不同的产品阶段、面对不同的问题、对应不同的目的,找到不同的人群。


1、在产品概念期,用户研究对象是通过各种维度定义出来的目标用户以及竞品用户。


2、在设计开发期,用户研究对象是围绕产品或者研究目的找到核心用户、次核心用户以及外围用户。


3、在宣传推广期,用户研究对象是把握住新进用户。


4、在平稳发展期,用户研究对象是产品的留存用户、活跃用户以及流失用户和回流用户。


5、在产品衰退期,根据策略决定需要调研的用户群体。



六、怎样做用研(How)


用户研究是为目的服务。


把握住问题六要素,是用户研究的核心。

(1)问题症状?

   • 在决策问题时遇到什么困惑,有哪些症状?

(2)用研目的?

   • 希望用研达成什么目的?

(3)决策处境?

   • 现阶段能支配怎样的资源?何时采取措施?

(4)问题假设?

   • 预计会是什么原因引起问题?结果可能会有哪些?

(5)行动方案?

   • 可能采取的行动方案有哪些?

(6)效果预期?

   • 行动方案下希望产生或者可能达到怎样的效果?


常用的市场与用户研究方法:




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

文章来源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


设计模式丨行动号召按钮:如何让用户的点击更加顺畅?

鹤鹤

What 是什么

简介「行动号召按钮」是用来号召用户点击的进行下一步的操作按钮/可点击的组件。

例子 蚂蚁金融科技首页的“开始探索”按钮,点击后跳转到一个新的页面进行下一步操作。

undefined


Why 为什么

「行动号召按钮」是在事件操作的最后一步出现的,可以让用户知道当按下此按钮时,当前事件的操作流程已经完成或即将发起一个新的流程,可以给用户一个明确的反馈。


When 什么时候使用

当你需要在界面中放置“完成”、“提交”、“确定”或“继续”等按钮时,可以使用这个模式,一般放置在一系列操作的最后一个步骤中。

使用条件

  • 页面中即将进行下一步操作或最终确认的时候;

  • 需要一个醒目的按钮提示用户结束当前流程时。


How 如何使用

创建行动号召按钮时可以使用平台默认的按钮样式,或者使用更大的按钮样式(注意不能是一个链接),让它在页面中非常醒目,让用户可以快速找到并点击它。

需要注意:

  • 按钮可以放在页面的底部或右边,即任务流程最后一步的下面,也可以是你的平台规范中规定的位置,只要能让用户能够快速找到它就可以,避免用户因为找不到按钮而结束了这个流程;

  • 最好使用文字按钮而不是图标,因为文字能让用户更好的理解,比如像“完成”、“提交”这样的按钮用文字更能让用户理解。


Example 案例

案例一:Google Play商店

用户需求:安装应用

安卓设备上的 Google Play 商店中软件名称右下方的“INSTALL安装”按钮就是一个很好的案例。此按钮放置的位置是软件名称的下方和右侧,周围的空白区域较大,是用户视线最终会停留的位置,颜色是绿色与白色背景形成对比,且尺寸也很大,所以非常醒目 ,用户一眼就能看见并点击它。

undefined


案例二:12306官网

用户需求:查询火车班次并预定

12306官网的首页的搜索火车班次的界面上就使用了强按钮,橙色的长按钮非常醒目,且位于信息的最下方,当一切信息输入完毕后,用户可以立即看到查询按钮并顺利点击进入到下一个页面。

undefined


案例三:App Store

用户需求:安装软件

用户在搜索到软件进入到软件详情页面时,一眼就看到软件名称右方的蓝色“获取”按钮,点击它就可以安装软件,作为整个页面唯一的动作按钮它十分醒目,符合用户的“Z”字形的浏览信息习惯,确保用户能看到它,快速达到目的。

undefined


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

文章来源:站酷  作者:Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档