首页

用一篇干货帮你彻底全面掌握「投影」知识点!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

之前我们更新过如何做投影的文章:《投影一直做不好?看这篇文章就搞定!》,主要针对的是投影的原理进行讲解,包括如何用图层样式去做投影,怎样用工具绘制投影,这些都是我们了解投影的一个基础。教程发布之后,很多同学留言,表示没看够,希望针对其他投影形式再进行更深入的讲解,那这次我们就来满足大家要求。其实投影的设计不难,只要符合画面的光影逻辑,然后加上制作投影的方法,基本就能搞定很多基础的投影形式,话不多说,我们开始今天的教程。

其实投影在设计中的应用是非常广泛的,比如这些海报,都运用了投影的形式。

什么情况用投影

在平面设计中,除了合成设计之外,我们在什么情况下会选择用投影?

1. 增加识别性

比如,在颜色比较混乱的背景上添加文字,或者添加图片,为了区分他们之间的主次关系,我们会添加一个投影。

2. 增加空间感和层次感

这两个画面,通过投影与主体的位置关系,产生较强的空间感和层次感。

3. 提升画面格调

反应产品质感的投影形式,会提升画面的格调,这类比较多的是化妆品与品。

4. 增加形式感

如果你的画面缺少创意性,不妨试试这类投影形式,通常来说它们都是用投影作为画面中的主体,以此来传递出很强的形式感与故事性。

5. UI设计

UI 设计中使用投影。

投影的类型

1. 常规投影

常规型投影包含了普通投影,弧形投影,接触投影,弥散投影。

普通投影

普通投影就是我们最常见的一个投影形式,它可以用图层样式来设置,它的特点就是在图像的四周都会有点阴影的感觉,让画面与背景形成前后景的关系,就像这里的案例。

弧形投影

弧形投影,它的投影是在物体的一侧,像翘起的边缘。

接触投影

接触投影,是物体立面与底面的关系,会有一种三维立体的感觉。

弥散投影

弥散投影,与普通投影的区别在于,它更有深度,也是现如今比较流行的投影形式。

2. 长投影

长投影主要分两种,一种是色块投影,一种是在色块的基础上的渐变投影。

比较常用在图标的设计,还有海报的设计。

3. 倒影

倒影,这类型阴影应该是比较难处理的了,想必大家在做设计的时候,大多数情况会规避倒影这种形式,除非是拍好的照片自带倒影,不然很少有同学愿意触碰这块。因为它比较考验大家对图形的认知能力,以及对透视基础的掌握,之前我们有讲过一篇关于素描知识的文章,在里面介绍过关于物体的基本结构,我们所看到的任何一个物体都有一个结构或者形状,比如立方体、圆柱体、圆锥体、球体。任何一个物体都可以视为这四种几何形状中的一种或几种的组合。那在倒影当中,这些基本形状同样适用。

首先来看二维的倒影,二维的倒影比较简单了,也都很好做,复制一个下来,加个蒙版做渐变处理就可以了。

三维物体,最基本的就是这几个形状,或者几种形状的组合,掌握几种形状的倒影,就能应付大部分倒影的形式。

立方体为基础型的倒影。

圆柱体为基础型。

圆锥体为基础型。

球体为基础型。

组合型。

4. 悬空投影

悬空投影,这类投影给人很强的空间感,并且大多数情况,投影都会成为画面中的主角。

分为三种类型,二维的悬空投影,2.5D 的悬空投影,三维悬空投影。

二维的悬空投影

先来看看二维悬空投影,是二维的平面悬空,添加一个弥散投影。

2.5D的悬空投影

2.5D 没有消失点,但是会有立体感,在下方添加一个投影,就会有悬空的感觉。

三维悬空投影

三维悬空投影能有很多创意形式。

5. 创意投影

创意投影,它不会根据物体本身的形态去表现,而是根据文案和设计构思而产生的很有创意的投影形式,这个主要靠大家发散思维的联想了。

最常见的就是电影海报中的投影表现。

6. 场景合成投影

一种情况是接近真实的投影,和实际照片是一样的道理,一种情况是类似于创意投影,合成的投影算是这几种投影当中最难的。

合成中的投影要自己创造一个光源,也就是想象出一个光源,根据光源关系,绘制出投影效果。

投影在这里都是很真实的表现。

合成也可以做创意投影,这三张公益海报的主角是动物的影子,但是形成影子的是前面的物体,这是很有创意的表现方式。

制作投影的方法

制作投影的方法比较多,比如说利用图层样式,用矢量图形做投影,高斯模糊设置投影,手绘投影等,每一种方法都适用不同的投影类型,我们想更有效率的完成工作,就要对这些技法有个较深的了解。下面我就带大家来了解下每种方法。

1. 图层样式

第一个,也是最简单的,用 ps 当中的图层样式来做。

模式一般我们就选择默认正片叠底,这是在正片叠底文章中讲到过,后面的颜色,如果是主体与背景颜色差异比较大的时候,我们可以选择环境色;如果差异不大,我们可以选择主体的相近的颜色,很少有选择纯黑色的投影。

不透明度就是阴影的透明程度,也是很好理解。下面角度,是光线照射的方向。全局光,选择之后,画面中其他元素添加投影,就会默认为一个光源,这样画面中投影会更和谐。

距离,物体和投影之间的距离,数值越大越远。扩展,就是阴影面积的大小。大小,就是阴影的虚化程度。

等高线,可能很多同学不太理解,其实很简单的,我们来看下,纵向,越向上,越实,越向下越虚化。横向,最右侧是投影的中心位置,越向左,离中心越远。根据画面中的等高线,我们来分析下。

这样就好理解了,我们看画面中蓝色圆点的位置,代表中心位置很实,黄色圆点的位置代表远离中心的位置很虚化,最后就得出右侧的投影。

那如果说,我想让投影的周围都变得很实,该怎么调整?

就是把虚的那个点向上调整,这样,就代表外围投影变得相对较实,我们会得到这样一个投影。

如果我想,投影靠近外围的位置,变得比较实,靠近中心的位置,变得比较虚,就可以这样调整。

得到的投影是这样的,我们看到中间白色的区域,就是虚化之后的效果,接近了透明。这个搞懂了,利用图层样式做投影也就基本没什么问题了。

ps 还自带了这么多等高线的样式,大家可以去实验一下。

那什么类型投影,比较适合用图层样式来做?

普通的投影和弥散投影。

画面中人物的投影设置。

2. 矢量图形做投影

画一个矢量图形,之后选择实时形状属性,然后点击蒙版,通过调整羽化值,来调整投影的虚化程度,用这个方法会比较直观的观察到,而且因为是矢量图形,所以还很方便我们随时调整它的形状。

高斯模糊和矢量图形做投影,所适用的投影类型是一样的,同样适用于普通投影,弧形投影,接触投影,弥散投影。

还有悬空投影,它和矢量图形投影的区别就是,矢量图形更方便改颜色和形状,还有虚化程度。

在主体下方加一个小面积的虚化阴影,就会有悬空的感觉。

3. 高斯模糊做投影

添加高斯模糊之前,一定要记得给图层转换为智能对象,因为高斯模糊对图层是有不可逆的破坏性的,所以添加智能对象之后会很方便我们随时去调整它的颜色和模糊程度,动感模糊同理。

高斯模糊做投影,适用的投影类型。

4. 手绘投影

最后一个,用钢笔工具或者画笔工具来绘制投影,这个是比较难的,在投影那篇文章中,我们已经讲过在一个场景中,怎样分析投影的位置,大小,形状,方向,以及如何用钢笔工具去绘制投影,这里我们就不再重复了,如果有不懂的同学,回看之前的文章《投影一直做不好?看这篇文章就搞定!》

那我们来看一下,手绘投影适合什么类型的设计。

第一种就是合成设计,这个要考虑光源的位置,投影的透视,投影的颜色等,一般会采用画笔和钢笔工具的结合。

创意的投影同样适合,因为它和合成投影基本一样,只不过不会根据对象的实际特征去绘制。

倒影适合用钢笔工具和画笔工具来制作,这里就涉及到了透视,我们能看到物体在基面上的倒影,实际上是物体在基面上的投影的倒立映像。

在平时的工作生活中,我们要学会观察,比如积水的路面,反射建筑的倒影是什么样子的,镜子里的自己,或者可以多看看摄影照片,慢慢养成习惯,提高对倒影的敏感度。

倒影的做法

做倒影最重要就是两个字──拆分,我们给这个立方体做倒影,首先要思考的是,它的倒影是由哪几个面产生的,找到物体与承影面接触的线,然后把这两个面提取出来,沿着这个线把所在的面拆分出来。

然后向下镜像,根据实际情况再翻转,要注意,倒影的透视和原本物体的透视要一致,也就是平行原本对象的边线。

然后给倒影添加一个蒙版,做一个渐变,就可以了。

用刚才的方法给魔方做一个倒影

同样把与底边接触的面裁剪出来,可以看到透视关系还是不一样的,我们应该让倒影的面和上面的魔方透视一致。

用调整大小里的斜切,调整倒影的透视。

添加蒙版,然后在与地面接触的位置添加一个闭塞阴影就可以了。

再做一个复杂点的,给包做倒影。

同样,找到底面接触面,然后把相应的面裁切出来。这里注意的是,每个面要单独拆分,这样才方便为每个面设置倒影。

把所有拆分的面复制一个出来上下镜像。

调整透视,就用调整大小工具,斜切,合并倒影的图层。

用蒙版渐变,别忘了闭塞阴影。

倒影规律及特点:

投影在不同材质上的表现

好了,前面介绍了每一种投影形式,以及适合的场景。那接下来,我们来看看在同一光源的前提下,不同承影面,也就是投影在不同的材质上是如何表现的吧。

1. 布面

布面材质是软性材质,在光源下会吸收光的反射,所以投影的边缘会相对模糊,不会过于锋利。

案例演示

我们来看下在布面材质上的投影的做法,首先在物品与布面底部绘制一个闭塞阴影:

然后新建图层,根据光源绘制出阴影的长度与形状:

给长投影做高斯模糊,然后用蒙版把边缘处理得柔和一些:

统一光影,把产品修饰一下:

整体调整下色调,就可以了:

2. 镜面

镜面是光滑的,所以光照射之后,会形成和物体一样的影像,也就是倒影。

设计之前,先参考下带有镜面倒影的照片。

案例演示

第一步,闭塞阴影:

第二步,拆分图像,拿到下方,调整透视,这是之前我们讲过步骤,这里就不重复了。

调整产品的光影与色调:

加点小装饰,烘托氛围:

最后是整体调整下色调和明暗:

3. 水面

水面和镜面类似,但是水面会存在水波纹,所以在做投影时候要注意投影的形态要与水波纹一致。

参考一些带有水面倒影的照片。

案例演示

依然先画闭塞阴影:

绘制出整个投影形态:

高斯模糊处理,因为是水面,所以阴影和倒影要共存:

下面就是倒影了,方法步骤同样。

那么问题来了,是怎么做到弯曲的效果的?其实就是用 PS 当中的置换来做,这是置换的参数与水面素材。

关于置换的教程我们也发布过,《平面高手课堂!如何用扭曲工具快速强化作品设计感?》

最后统一色调和光影就完成了。

4. 底地板

地板有的会打一层蜡,这个时候,就会存在一些倒影,所以在这样的地板上倒影和投影是并存的。

先看一下在不同地板上的投影样貌。

案例演示

这个我们选择大理石材质,首先闭塞阴影:

绘制投影的形态:

给投影高斯模糊,添加蒙版做渐变:

然后,按照光影和环境色,处理产品的明暗和色调:

5. 渐变色/纯色

这也是我们设计中遇到比较多的情况,在纯色或渐变色的背景中,为了让画面具有空间感,我们经常会给物体加投影,这个投影可以是常规投影,也可以是倒影。

案例演示

闭塞阴影:

根据光源绘制投影:

高斯模糊,然后添加蒙版做渐变:

修饰产品的色调和光影:

统一光影色调:

教程到这里就结束啦,估计有的同学会纳闷,为什么我们没有细讲怎样根据光源绘制投影?因为在之前投影文章中已经手把手给大家演示过了,没看过的同学赶紧去补课,可阅读《投影一直做不好?看这篇文章就搞定!》

总结下今天的内容,第一,投影在画面中作用。第二,我们给投影形式做了分类,有常规型,长投影,倒影,悬空投影,合成投影。然后是制作投影的方法,着重介绍了倒影该怎样做,最后是投影在不同材质上的表现。通过关于投影的这两篇教程,相信大家已经能掌握一些原理和技巧了,其实最快速学习投影的方法,就是要学会观察生活中的事物。

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

用 PST 框架,帮你系统掌握产品的信息引导设计方法

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

不知大家有没有和我一样的疑惑:日常产品的信息引导到底该如何设计?

可能有人第一时间会想到浮层、动效、弹窗等等,但这些都只是表层样式而已。背后的引导机制该怎么入手?有没有一个系统性的了解?需要注意些什么?

所以,今天就想聊聊这方面的看法,下面是我对信息引导的理解所提炼、搭建的一个「PST」框架:Performance-表现、Strategy-策略、Target-目标。

目标层:信息不会平白无故去引导用户,都是为了某个确定的目标而展示的。如在首页弹窗展示是为了进行新手教育,以达到让用户使用新功能,进入新页面等运营指标或增长指标。

策略层:目标确定了,需要确定可做信息引导的各种场景和机制。如设置某时间进行信息推送,用户网络不行的情况下怎么解决?

表现层:不同的场景中有各种表现形式,如下拉菜单、弹窗、浮层、视频等等。

这 3 层环环相扣,互相影响。因为每个产品的目标各不相同,所以这篇就先对信息引导的「策略层」进行分析,下篇再讲下引导的形式和适用场景。

信息引导的类型

可能每个人会有自己的分法和定义,我就按照自己的理解概括一下信息引导的基本类型。

1. 新功能引导

向用户展示产品的新功能/页面,对产品的新功能有一个大致的了解,多用于用户首次进入/使用功能的引导,如:各种新手遮罩引导、产品介绍。

2. 指标引导

以提高产品的业务目标/增长目标为导向,按照一定的规律引导用户使用某功能,如:产品的信息 push 和广告。

3. 结果引导

在用户已结束的操作行为、结果页面上,引导商户使用相似功能或内容模块,促进产品的连续消费。

比如:淘宝在订单支付成功后,都会进行店铺、红包、优惠券、相关宝贝的推荐,保证消费者还处于「购物链」上。

4. 异常引导

针对用户可能会犯错的行为进行提示、警告,是一种前置的容错机制。如支付宝,用户在向「异常好友」转账时,以轮播的方式进行信息提示,避免用户转错账。

信息引导从哪方面切入

抛去业务目标和引导样式的局限,信息的引导可以从几个方面切入和思考:产品架构、用户行为、时间、阶段/过程。

1. 利用「产品架构」做引导

像很多同学做信息引导时,一上来就想着浮层、弹窗、动效等各种表现形式,而忽视了最简单、最底层的引导方式:利用产品的架构布局去引导。

这种方式是通过架构布局,来体现内容间的差别与关系,突显出核心内容模块,强调的是「视觉重量」,如:各模块间的面积大小、色彩强弱。像淘宝首页有各种功能入口,通过架构上的布局来进行功能分类和引导。

如何利用架构布局进行信息引导呢?

2 个点可以参考:重组和单拎。

重组:将同一层级、相关联的信息组成一个内容模块,从而使信息更聚焦、减少视觉干扰。

如腾讯动漫的个人中心页面,在老版本中头部信息较为分散、无关联,信息的引导性很差。而在新版本中,则通过「重组」把信息关联在一起,页面更聚焦清晰、引导性更强。

单拎:一种与「重组」相反的引导思路,将信息分解成各个独立的模块进行展示,让信息得到更多的展示。

很多「入口化」的功能,都适用该思路进行信息引导,如:手机淘宝的个人中心,有些功能原本可以和其他模块一样做成入口化的,但出于产品目标、用户诉求等维度的考虑,将部分内容「单拎」出来进行展示效果更好。

2. 利用「时间」做引导

按时间维度去发散的话,则可以分成「用户行为时间」和「网络实时时间」引导。

用户行为时间

根据用户操作的行为时间进行信息引导。如爱奇艺,用户在观看了 30 分钟视频后,会弹出积分领取提示。

这种引导需要注意的是:产品的时间机制。

如爱奇艺的「观看满30分钟」:是观看单个视频时长,还是一天里的总视频时长积累?离线观看视频(有流量联网)时是否也计入时长等等?这些机制都需要在前期,根据产品的平台特性、业务目标、用户习惯等维度去设置好。

网络实时时间

根据当前网络时间进行引导。如百度地图,会在 17 点快接近高峰期时,向用户弹出路况提示。

这类场景的引导,更注重于:产品的推送机制。

如设置了某个时间点推送内容,若用户没网络或者网络较差时,是晚点再推送,还是推送提前预设置好的「静态」内容?这些都是需要考虑的点。

3. 分「阶段/过程」做引导

根据特定的维度,将信息/功能分解成 N 个独立且关联的阶段。分阶段的维度可以是时间、日期、金钱、物品等等。

很多运营活动就会把奖励分成不同的阶段进行发放,如图:

这种引导方式的优势是:可以将全部的信息分解到各个阶段中去,页面的拓展性强,用户理解和操作成本低。劣势在于:周期较长,用户缺乏足够的动力。

因此,很多产品都会把最大奖励、最好的结果放在最后阶段,加上利用消费者的「目标趋近效应」──人们在距离目标越近时,越有动力去完成它,一步步地引导用户消费。

4. 根据「用户行为」做引导

根据用户的当前操作进行引导,如观看视频时,点击屏幕会暂停播放且会弹出广告信息;长按内容列表时,会出现多选、排序、删除等操作。

而根据「用户行为」做引导,需要注意 2 点:引导的返回策略和落地方式。

返回策略

结合用户场景与产品特性,看信息引导后是否需要制定返回策略,相当于一种「逆向引导」。而返回的策略不仅体现在「机制」上,还可以体现在「视觉样式」上。

机制:如爱奇艺在观看视频时最小化产品、跳转到新的页面后,返回观看视频时会自动后退几秒进度,以保证用户的观看记忆不会出错。

样式:如淘宝在支付订单后,会有两种返回形式。一是左上角的「返回」icon,返回到购物车页面;二是中间比较明显的「返回首页」按钮,返回至淘宝首页。

而对于产品来说,「返回首页」的优先级显然更高一点:既可以让用户形成消费闭环,又能浏览、搜索更多的商品,提升产品的 UV、PV、复购率等业务和增长指标。所以,才会把「返回首页」按钮的样式,做得比「返回」icon 重一些。

引导的落地方式

引导的落地方式就是信息引导后,用户跳转到哪里?一种是跳转至新的页面进行落地,页面空间大、可控性强;另一种是停留在当前页面展示,减少用户的操作成本。

如优酷在观看视频时,可以在当前页面进行奖品的引导和获取。

至于最终采用哪种落地方式,则根据产品目标、用户场景、页面形态等特征去抉择。

总结

以上就是个人对信息引导「策略层」的一些心得和看法。

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

未来的情感化界面设计

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

情感化在我们的决策过程中起着至关重要的作用。一秒钟的情感交互可以改变人对产品的整体体验


人类是一种情绪驱动的物种;我们选择某些产品并不是因为它们有意义,而是我们认为它们会给我们带来什么样的感受。未来的界面将在产品设计的基础上使用情感化的概念。人们使用的经验将基于智商(IQ)和情商(EQ)。


本文试图展望未来,看看我们将在未来的十年内设计什么样的界面。我们将仔细研究三种交互媒介:


01、语音

02、增强现实(AR)

03、虚拟现实(VR)



未来情感化界面的实例

将来的界面会是什么样子?尽管我们还没有这个问题的答案,但是我们可以讨论界面可能具有的特性。在我看来,我相信我们最终会远离那些充满菜单、面板、按钮的界面,而转向更“自然的界面”,即扩展我们身体的界面。未来的界面不会锁定在物理屏幕上,而是使用整个五官感觉的力量。

因此,他们需要的学习成本更少——理想情况下,根本没有学习成本。


情商在商业中的重要性

除了让体验更加自然和减少学习成本外,情感化设计还为产品创造者带来了另一个好处:它提高了用户对产品的使用率。合理的利用人类对情感的行动能力来创造更好的用户参与度。



体会真实的语音界面

现在,以语音为主要界面的产品越来越受欢迎。我们当中的许多人在使用亚马逊Echo和苹果Siri进行日常活动,如设置闹钟或预约等。但目前市场上的大多数语音交互系统仍有一个与生俱来的限制:他们没有考虑用户的感受,因此,当用户现在与谷歌这样的产品交互时,他们会有很强的与机器交流的意识,并非是真正的人类。系统可预测地响应,并编写响应脚本。与这样一个系统进行有意义的对话是不可能的。


但是如今市场上有一些完全不同的系统。其中一个是社交聊天机器人应用程序Xiaoice。这个应用程序的核心是一个情感计算框架;这个应用程序是建立在这样一个理念之上的,即首先要与用户建立情感联系。Xiaoice能够动态地识别情绪,并通过长时间的对话和相关的回应吸引用户。因此,当用户与Xiaoice互动时,他们会觉得自己在和一个真正的人交谈。


许多人在电影《她》(2013)中看到了基于语音的互动影响力。Theodore ( Joaquin Phoenix 主要角色) 爱上了一个 Samantha (一个复杂的操作系统)。这也使我们相信,未来基于语音的交互系统,主要目的之一将是为用户提供虚拟伴侣。这部电影最有趣的是 Theodore 没有 Samantha 的视觉形象——他只有她的声音。要建立这种亲密关系,就必须产生反映一致个性的回应。这将使系统具有可预测性和可信赖性。


虽然技术离Samantha这样的操作系统还很遥远,但我相信语音优先的多模式界面将是语音支持界面发展的下一篇章。这些界面将使用语音作为主要的交互方式,并在创建和构建连接感的上下文中提供附加信息。


Image title

为Brain.ai设计的语音界面示例(图片来源:Gleb Kuznetsov)



AR体验的演变

增强现实(AR)被定义为现实世界之上的数字覆盖,并将我们周围的物体转化为交互式数字体验。我们的环境变得更加“智能化”,用户的手指尖上会出现“有形”物体的错觉,这样就在用户和产品(或内容)之间建立了更深层次的联系。


使用AR重新定义现有概念

AR的独特之处在于它为我们提供了与数字内容进行物理交互的非凡能力。它可以帮助我们看到以前无法看到的东西,这有助于我们了解更多关于周围环境的信息。AR属性有利于帮助设计人员使用熟悉的理念创造新的的层次体验。


例如,通过使用移动AR,可以打造一个新的飞行体验感受,允许乘客查看有关其它班机或当前航班飞行进度的详细信息:


Image title

AR在空中客车A380的飞行体验中。(图片来源:Gleb Kuznetsov)


AR帮助我们在空间中找到自己的路,并让我们一目了然地获得所需的信息。例如,AR可用于为当前位置创建丰富的上下文提示。被称为SLAM(同步定位和映射)的技术非常适合这种场景。SLAM允许对环境进行实时映射,还可以将多媒体内容放入环境中。


为用户提供价值的机会有很多。例如,用户可以将他们的设备指向建筑,并在屏幕上了解更多关于这个建筑的信息。它能够显著的减少工作量,并通过允许导航和访问实现轻松的情感体验。


Image title

在上下文中提供其他信息(图片来源:Gleb Kuznetsov)


我们周围的环境(如墙壁或地板)可以变成一个可交互的场景,这种方式在过去仅限于我们的智能手机和电脑。


你在下面看到的概念设计就是这样的;它使用物理对象(白墙)作为通常使用数字设备传送的内容的画布:

Image title

交互式墙的概念 - 在现实世界之上的数字覆盖。(图片来源:Gleb Kuznetsov)


避免信息过载

许多人都看过一个叫做“超现实”的视频。在这段视频中,物理世界和数字世界已经融合,用户被大量信息所淹没。技术允许我们同时显示几个不同的对象。如果使用不当,很容易造成过载。信息过载是一个严重的问题,它会对用户体验产生负面影响,避免信息过载将是AR设计的目标之一。精心设计的应用程序将会过滤掉那些与使用人工智能的用户不相关的内容。


高级个性化

当系统实时地根据用户的需求和期望来调整内容或功能时,就会发生数字体验的个性化。现在许多移动应用和网站使用个性化的概念来提供相关内容。例如,当你访问Netflix时,你看到的电影列表会根据你的兴趣进行个性化设置。


AR眼镜允许创造一种新的个性化水平,即“高级”的个性化水平。由于系统“看到”了用户看到的内容,因此可以利用这些信息提出相关建议或在上下文中提供其他信息。试想一下,你很快就会戴上AR眼镜,传输到视网膜的信息将根据你的需要进行调整。


从增强现实走向虚拟现实,创造沉浸式体验

AR体验具有自然的局限性。作为用户,我们在内容和内容之间有明确的界限; 这条线将一个世界(AR)与另一个世界(现实世界)分开。这条线让人感觉到AR世界显然是不真实的。


你可能知道该如何解决这个限制,例如虚拟现实(VR),当然。虚拟现实并不是一种全新的媒介,但直到最近几年,技术才达到让设计师创造沉浸式体验的程度。


沉浸式VR体验消除了现实世界与数字之间的障碍。当你戴上VR耳机时,你的大脑很难处理你收到的信息是否真实。

以下是设计人员在创建沉浸式虚拟环境时需要记住的内容:

01、写一个故事

有意义的VR需要有一个强有力的故事核心。这就是为什么在你开始设计VR环境之前,你需要为用户旅程写一个故事。一个被称为“故事板”的强大工具可以帮助你做到这一点。使用故事板,可以创建故事并检查所有可能的结果。当你审视你的故事时,你将看到何时以及如何使用视觉和音频提示来创造一种沉浸式的体验。


02、与角色建立更深层次的连接

为了让用户相信虚拟现实中他们周围的一切都是真实的,我们需要与用户扮演的角色建立联系。最明显的解决方案之一是在虚拟场景中包含用户手的表示。这个表示应该是实际的手-而不仅仅是一个假造的复制品。考虑不同的因素(如性别或肤色)是至关重要的,因为这会使互动更加现实。

Image title

用户可以看到他或她的手,看他们看起来像一个角色。(来源:leapmotion)


也可以将现实生活中的一些对象带到虚拟现实环境中,以创建这种连接。例如,一面镜子。当用户查看镜像并在反射中看到其角色时,它可以在用户和虚拟角色之间实现更真实的交互。

Image title

虚拟现实用户会查看虚拟镜像并将自己视为VR环境中的角色。

03、使用手势而不是菜单

在设计沉浸式虚拟现实体验时,我们不能依赖与传统的菜单和按钮形式。为什么呢?因为显示菜单相对容易打破沉浸感。用户将会知道他们周围的一切都不是真实的。设计师不需要使用传统的菜单形式,而是需要依赖手势。设计界仍在为使用手势定义一种通用语言的过程中,参加这项活动是有趣和令人兴奋的。棘手的部分是让用户熟悉和可预测的手势。

Image title

试图将现有的交互概念重用于VR体验。不幸的是,这个概念会打破沉浸感。新媒体需要新的互动模式。


04、与VR环境中的元素交互

要创建一个感觉真实的环境,我们需要让用户能够与现实中的对象交互。理想情况下,环境中的所有对象都可以设计成允许用户触摸和查看它们的方式。这样的物体会起到刺激作用,帮助你创造一种更沉浸的体验。触摸对于探索环境极其重要;婴儿在最初几天获得的最重要信息是通过触摸获得的。


05、在虚拟现实中分享情感

虚拟现实有机会成为一种新的社会体验。但要做到这一点,我们需要解决一个重要的问题,即,把非言语的暗示带入交互中。


当我们与他人互动时,我们获得的信息中的一个重要部分来自肢体语言。惊奇、厌恶、愤怒——所有这些情绪都存在于我们的面部表情中,在面对面的交流中,我们从眼睛区域推断信息。当人们在虚拟现实环境中交互时,提供这些信息是很重要的,以此来创建更真实的交互。


好消息是,头戴式设备(HMD)将很快覆盖情感识别。在虚拟现实中,几乎任何人与人之间的互动都会从面部表情中受益。


06、为VR环境设计声音和音乐适合

音频是沉浸式体验的重要组成部分。如果不为环境设计声音,就不可能创造真正的沉浸式体验。声音既可以用作背景元素(即周围风的声音)也可以用作方向。在后一种情况下,声音可以作为提示-通过播放方向性(声音来自何处)和距离(用户可以将注意力集中在特定元素上)。


在为虚拟现实设计音频时,最重要的是使声音成为3D。2D声音对虚拟现实来说不太好,因为它会使一切变得过于平坦。三维声音是你可以听到的声音,在你周围的每个方向-前面,后面,上面和后面-所有的地方。您不需要专门的耳机来体验3D声音;可以使用HMD的标准立体声扬声器来创建它。


头部跟踪是良好声音设计的另一个关键方面。让声音以现实的方式表现是至关重要的。这就是为什么当用户移动头部时,声音应该根据头部移动而变化。


结论

当我们考虑到产品设计的现代状态时,很明显我们只是处于冰山一角,因为我们非常局限于平板电脑。

我们见证了人机交互(HCI)的根本转变——重新思考数字体验的整个概念。在未来的十年里,设计师们将打破玻璃(我们今天所熟知的移动设备时代),转而使用未来的接口——复杂的语音接口、先进的ARS和真正的沉浸式VRS。当我们要创造一种新的体验时,我们必须明白,我们唯一的界限就是我们的大脑告诉我们,它必须一直是怎样的。

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

围观Twitter 网页版重磅更新

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

这是一个移动端的时代,Twitter 的移动客户端经历了很多版本的迭代,但是桌面端的更新改版则非常的克制。

一周之前,Twitter 将接近7年未曾大幅度改版的桌面端页面,从里到外重新翻新了设计。

新浪微博的每一次小幅度调整都会带来大量的吐槽和不适,更不用说像Twitter 这样的世界级的社交媒体网站。用户的不适应不理解和负面反馈是避免不了,这样的大幅更新改版背后,有着这个平台不得不做的理由。

最近 Twitter 新版背后的设计师接受了连线杂志的采访,深入地聊了一下改版背后的考量。

设计技术和工具的快速发展,视觉设计本身,尤其是 UI 界面的很多具体的执行端的工作慢慢的没有那么麻烦了,但是找到为什么这么设计的设计决策,并不是那么简单。

保持一致:紧跟趋势的一次重设计

在整体视觉风格上,Twitter 桌面端的设计给人的整体感知是更加现代的——并且和移动端版本的设计靠近且保持了一致。这绝对是一个以数字产品为核心的科技公司应该做到的最基本的事情。

原本置于顶部的导航栏消失了,功能性更强的左侧边栏承载了主要的导航功能。

其中,原本被隐藏的「书签(bookmarks)」和「列表(LIsts)」是非常实用的内容管理功能,在这次改版的时候被直接显示在侧边栏当中。

而更重要的改变在于,关于当下正在发生的热门事件,单独占据了右侧的侧边栏「Trends for you」,大家正在热烈讨论的热门事件以Twitter 中标志性的标签(Hashtags)的形式呈现,相当于微博中的「热门微博」。而这在老版的 Twitter 中,这类内容的存在感并没有那么强烈,原本存在于第一屏的左侧侧边栏中,并且只有标签,除非你有意识地去关注和点击,否则很容易错过。

搜索栏同样被挪到了右侧边栏,置于「热门趋势」内容的顶部。这一设计巧妙的地方在于,它暗示了内容呈现的逻辑:当你搜索内容的时候,搜索结果会直接覆盖在右侧,而不会占据中间的主要的信息流。

毫无疑问,新版的 Twitter 在布局上更加扁平了,但是信息的扁平化呈现还不止布局上,交互上也相应的变化。在老版的 Twitter 中,当你点击具体的推文条目的时候,内容会以弹出框的形式呈现,但是新版中则会在当前层中直接扩展开显示,不会弹出,整体的融合感和有机感会更强。

老版 Twitter 中推文弹出框

新版 Twitter 中的界面

同样的,用户在回复、转推和点赞的时候,也不用在不同的弹出框模式下进行,而是更加直觉地在当前的页面中完成,整体感更强,更加直觉。

用户交互频次相对较高的转赞评和「热门」和主要信息流都不会在弹出框和叠加层控件中完成了,主要信息流也不会被因此而覆盖,整个 Twitter 因此显得更加敞亮开阔。

另外一方面,新版 Twitter 提供了更加丰富的个性化设计的体验,这也是对于 Twitter 用户体验的一次重要提升:

虽然在之前老版的 Twitter 中也可以定制字体大小色彩,但是之前的字体大小是纯粹的随意设置,这种自由度让很多并不熟悉的用户难以控制好文本和色彩的对比度,从而造成了整体视觉的愉悦度较低的情况。

新版中的配色和字体大小都是经过调校之后,比较合理的选择,这样拥有了足够的选择空间,又保持了整体视觉体验上的愉悦性的设计。在产品颗粒度的控制上,Twitter 有着一套成熟精准的设计方案。

与此同时,所有人都期待的,深色模式,同样随着这次页面重设计,一并打包更新了:

对于深色模式的控制,Twitter 和和其他的平台略有一点不同,他们所设计的深色模式包括「昏暗(Dim)」和「熄灯(Light out)」两种,前者的背景色是深灰,而后者则几乎是全黑。

任何一个社交媒体平台,大量的用户涌入进来之后都会面临着复杂的管控问题,更不用说 Twitter 这个已经存在了13年的世界性的平台。许多状况不可能简单的一刀切来解决。

重设计背后:设计解决不了全部的问题

作为平台,Twitter 已经在竭力推动「健康的对话」,但是在充满分歧和对抗的网络当中,情绪化是常态,简单的依靠 Twitter 官方的帐号来发声,并不足以覆盖如此广泛的垂直领域和复杂多样的用户群体,以及不同的国家和地区。

「我们以前经常会推出一些新的设计和小功能。上线之后,过一阵子我们再搜出来,用投影仪投到墙上重新审视,」Twitter 的联合创始人 Biz Stone 说:「然后我们会觉得,好像不应该这么设计。」

「我们的目的是为公众的对话来服务的。但是目标明确之后,还需要问一个问题:我们真的够好吗?」Biz Stone 在采访的时候,这么说道。正是在这样一个问题促使之下,Twitter 的改版重设计就悄然推动起来了。

从左到右分别为 Biz Stone,Bryan Haggerty 和 Mike Kruzeniski 。图片来自 Wired,摄影师:Samantha Cooper

Twitter 团队对此选择了谨慎行事。他们选择了类似灰度测试的方法,让不同的用户参与到不同的「测试」当中来,包括不同的书签模块的设计,不同的深色模式,不同的搜索模式,等等。绝大多数的设计都正面的,但是它们也并不是爆炸性的。

如今所呈现出来的新版页面当中,绝大多数的设计都克制而微妙,以往的很多功能都得到了简化。「我们正在试图寻找合适的机会,重新创造更加大胆的设计,但是它需要一个稳固的基础,所以我们打算从这一次的重设计开始,从我们最好的功能和服务开始。这就是基础。」Twitter 的高级产品设计总监 Mike Kruzeniski 面对连线杂志的采访,是这么解释他们设计的初衷。

所以,Twitter 的这次重设计只是一个开始。对于这个平台上大量的关于仇恨和骚扰相关的负面内容,清理起来并不是一套规则就可以全部解决的,而 Twitter 更倾向于人为来处理和干预,但是平台本身需要更好的支持这方面的功能。

在 Twitter 早期阶段,视觉设计并不是他们的重心。「我们只是尽全力地让产品具备可用性,」Stone 回忆当时的情况:「我们并没有试图让它看起来好看……我们只是努力让平台保持活力。」当时的 Twitter 整个团队大概只有30个人。

实际上,随着后面更加专业的 UI 设计师加入进来之后,整个团队的设计能力也越来越强。UI 界面是Twitter 和用户进行沟通的媒介。

虽然现在是移动端为主的时代,但是桌面端 Twitter 的重要性并没有弱化。Twitter 的网页重设计项目的负责人 Jesar Shah 说:「人们在桌面上大量使用 Twitter 来搜寻感兴趣的信息,跟他们息息相关的信息内容。」在页面的左侧,有一个快速的账户切换的功能,对于这一点,Shah 补充道:「围绕这个功能点,我们从全球不同的地方获得了反馈。比如日本就是Twitter 最大的市场之一,当地用户基于自己不同的兴趣点创建的账户,比如一个账户专门是关于美食的,一个是专门关于旅行的,还有一个则是给自己的宠物猫的。无论你使用哪个设备,都要能够快速便捷地切换帐号,这是我们这么长时间的调研中,听到最多的一个需求点。」

从左到右分别为 Ashlie Ford,Marina Zhao 和 Jesar Shah ,她们主导了这次 Twitter 的设计。

「我们需要确保整体体验足够优秀,所以原则上需要严谨。鉴于我们服务对象是全球客户,所以我们需要尽可能满足不同用户的诉求。」Shah 和 Ford 所带领的团队专门创建了一份调查问卷,以获取反馈。他收到了来自全球总计20万份问卷,Ford 的团队花了整整一周的时间,借助翻译工具将其中来自非英语国家的问卷都翻译出来,并且梳理汇总了。

「用户肯定会以为我们不会仔细阅读这些问卷,但其实我们都仔细阅读过了。」Shah 说道。她阅读到的第一个用户需求反馈就是想要更多的表情符,为了应对这样的需求,Twitter 制作了一个分组表情输入控件。同时,他们还提供另一个不断更新的热门 Gif 图片表情合集,非常贴合用户需求了。

Twitter 已经 13岁了。

在 这个社交媒体平台上,@realDonaldTrump 可以进行「Twitter 治国」,还有大量的流言和不真实的信息,骚扰和不够人性化的内容。这都是客观存在的,亟待解决。在今年年初的时候,策展人 Chris Anderson 将 Twitter 比作是正在撞向冰山的泰坦尼克号。的确如此。

但是,设计改变不了一切。Twitter 的设计团队在接受采访的时候也坦诚地接受了这个事实。但是他们认为,设计可以帮助他们界定和构建 Twitter 功能,并且逐步地帮助用户来解决身份认同的问题。

「如果你在 Twitter 上问一个用户,Twitter 是什么,你会得到一千个答案。」Kruzeniski 说:「曾经我们认为这样很糟糕,但是现在我认为这是一个很棒的事情。因为现在我们可以更好地帮你找到特定的兴趣,并且和你的兴趣、你所关注的主题连接到一起。」

结语:围绕人,而不是产品

曾经的推特是一个铺满木地板,到处都是品牌标志性蓝色的「鸟笼」式的建筑,但是如今重新装修过的办公室则更加现代,墙壁上到处是各种各样的涂鸦,这些涂鸦代表着Twitter 这个平台内的各种垂直社区,比如 Black Twitter、NBA Twitter,以及各路名人的粉丝社区。

走过Twitter 的办公室,你会清晰地收到这样的一个信息:一切都是关于人的,而不是产品。

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

在商业环境中的UX体验衡量指标

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

好的衡量指标带你上天堂,不好的衡量指标带你睡…

嗨,本周Nathan 与大家分享下一些在UX 工作中,常会听到的一些衡量指标专有名词,有些或许是你常常听到但不太确定的,有些则可能是你所在的领域或项目比较少讨论的。

虽然在大多数的公司中,与中小型的设计团队,采用快速定性的研究,可能是比较符合CP 值的方式。但当产品、用户甚至团队具有一定规模时,关于量化指标的重要性,在2019 年的今天想必已经不需要再重复叙述。

不太一样或是常被误会的是,对于设计师来说,多数在工作中使用的量化衡量指标,其实大多是围绕设计工作的显性部分,也就是可用性(Usability) 上,而可用性工作其实只是UX Design 的一环。

但, UX 毕竟是由商业环境中反推学术的一门职位。

如果仅仅只是将量化指标用在UX Designer 的工作上,反而是自己自废武功。不要忘记小至前端展现,大至商业策略,都可以是UX Design 的范围。

Five Levels of UXs ConversionXL

因此如何学习使用一些既带有商业特性,又能体现用户体验的指标,是每个UX 工作者,多少都要知道的。

We are not design the UX,but we can design for UX

另外,本篇主要在分享一些使用体验横标指标上的一些迷思,与介绍工作中常用的一些指标,至于如何透过这些指标帮助UX Designer 在工作中提升重要性,来自证UX 工作能带来的价值部分,可以看一下Nathan 以前写过的一篇古早文。

 

1、关于数据指标与衡量的常见迷思

01 数据指标的使用,不符合GSM 原则

当有一定的用户后,结合常见的数据分析工具或内部团队自建的数据埋点,网站和应用马上就能出现许多可供分析的数据,似乎只要有这些数据,令人惊喜的洞察就会自动浮出水面。

GSM(Goal-Signal-Metrics)是Google 提出的目标导向衡量模型,用来拆解用户使用产品时的设计目标-行为信号-衡量指标的一种模式。

Google GSM Framework, Goal-Signal-Metrics

在商业场景中,所有的数据衡量必定带有明确的目标,比如:透过观察宽口转化和窄口转化,分析广告投放效益以及GMV 成本。甚至,如果仅基于这些观察数据进行动作性的优化,没有配合中长期的决策时,变化仅会流于短期效益。

02 显而易见的数据指标,不代表就是有帮助的

一个数据指标容易监测与计算,并不意味着它对你的产品来说就是重要的。透过现在大部分的分析工具,可以很容易就监测跟踪成百上千的各种指标,而且分析的工具也层出不穷。新产品团队往往因为能获取大量的数据,然后就期望洞察自动出现,但往往不遂人意。

例如,网页或App 的PV 数据很容易收集,但如果你的网页或产品是属于内容消费类型的,它就无法呈现用户是否在你的网站消费内容(有效时长更具代表性)。高的PV 或许是由市场广告转化过来的用户,但对内容消费类的产品目标,肯定不是确定每个用户到底浏览了多少页面,PV 可能是衡量广告效果的重要度量,但它并不是监测用户参与度的良好方式。

如果你不确定你正在用的数据指标,是否有正向帮助的话。可以参考AARRR 的转化模型,来帮助自己梳理清楚核心的转化链路。

03 单一的数据指标,对于效果衡量可能是模糊的

如上面所说相较于PV、UV、DAU,用户在网站或应用中的有效停留时长,可能更适合用来衡量用户在产品中的参与度。

但停留时间越长可能是正面的,也可能是负面的。在电商产品类的转化过程中,如果在关键的转化节点用户停留较久,可能意味着用户因困惑、分心或挫败而花费了大量时间。即便同时监测网站或应用的停留时长和转化率,你可能仍然不清楚为什么用户参与度如此高,对于最后的成交却没有太大帮助。

这时就需要透过配合更细致的数据指标组合,慢慢的定位用户在操作步骤中的关键问题,并尝试透过A/B Testing 来解决。

04 正确的衡量指标,要依产品、企业本身而制定

大家常用的数据指标,并不一定适合自己当前产品阶段或企业目标。

正常而言企业的主力产品,正是代表着企业主要的商业营利模式,因此在发布产品后要监测的各种衡量指标,通常在产品准备进入市场前,都已依照商业模式进行拆分。但在产品的冷启动时期,这些依商业模式拆分的指标,很多时候无法反映出,企业的产品是否正在往好的方向成长。

比如Saas服务类型的产品,通常都会使用净收入留存NDRR (Net Dollar Retention Rate)作为主要的商业模式指标,但在前期用户量少时,搭配NPS或PSAT等类型的指标,才能够好的回归到Saas产品的服务体验本质。了解企业目前提供的服务,对用户来说是否是正向的,并且能持续增长。

05 大多时候,衡量指标并不会纯粹与设计相关

在产品开发迭代中发布新功能后,数据可能会开始上升。产品团队可能认为这是新功能的发布造成的,但销售部分却可能会将它与一项新的促销活动联系起来,而UX 团队则可能认为这与他们的新设计相关。

这种场景在产品的数据到达一定规模时十分常见。真实情况是只能透过控制一些固定因子,来做更细部的A/B Testing 拆分。但大多时候产品的迭代时间与开发资源,很难真正做到能明确确认是因为什么原因。

因此结合前面所说的,各团队在主要的数据指标中,配合其他辅助指标,甚至提取更与团队紧密相关的个别指标,来了解在产品的迭代过程中,各自团队做的决策是否是正向的。

用户体验指标,跟易用性和商业指标目的不同

下面就会介绍几种工作中常用的,与体验相关的衡量指标,部分指标在订定的一开始,本身即包涵了商业与体验维度。

 

2、工作中可能用到的几种体验衡量指标

大部分的体验衡量指标,都会基于三个主要价值观,结合其他用户态度类型作为衡量基准。

  1. 可用性
  2. 参与度
  3. 转化率+ User Attitude

下面介绍几种,在工作中可能常用到的通用型,与不同业务场景型的体验衡量指标。

2.1 通用型

01 传统网站服务使用的PULSE

PULSE 是基于商业和技术的衡量模型,被很多组织和公司广泛应用于跟踪产品的整体表现。包含:

  • Page view 页面浏览量
  • Uptime 响应时间
  • Latency 延迟
  • Seven days active user 7天活跃用户数
  • Earning 收益

但不难看出PULSE 指标仅覆盖了UX 设计中最最基础的可用性部分,和衡量用户体验的直接关系不大,难以评估设计工作到来的影响,毕竟这个指标创建之初是用来衡量产品的技术与商业效果。

因此为了弥补PULSE 指标中存在的问题,Google 提出了HEART 指标模型。HEART 是“以用户为中心度量的指标体系,以及把产品目标与创建指标体系相互关联的过程”

02 以使用者为中心的HEART

HEART其实也是业界使用的老黄历了,尤其常用GA ( Google Analytics ) / Adobe Omniture的人一定都对他不陌生。

早期产品开发上线的阶段,大多是订定业务KPI 作为衡量项目产出的价值,但在用户体验的部份,却很难有可视化以可及量化的衡量指标。因此Google 尝试把产品目标以及体验指标相互结合,建立以用户为中心的HEART 度量体系。

Google Heart 体验衡量指标模型

 

2.2 Saas 服务型

01 NPS( Net Promoter Score净推荐值)

净推荐值最早是由贝恩咨询的创始人Fred Reichheld 在2003 提出,通过测量用户的推荐意愿,从而了解用户之于产品或服务的忠诚态度。

NPS 算是近几年用户体验领域上的当红指标(甚至业内还有所谓的NPS 教派XD),基本上互联网类产品都可以使用。其基本核心理念是,一个企业的用户可被划分为三类:推荐者、中立者和批评者。

  1. 推荐者是投入且重复使用产品的用户,他们会热情地向其他人推荐你的产品或服务。
  2. 被动者是对产品满意,但缺乏热情和忠诚度的用户,他们很容易转而投向使用竞争者的产品或服务。
  3. 批评者是那些明显对企业的产品或服务不满意的那部分用户

相较于其他的指标,NPS 询问的是意愿而不是情感,对用户来说更容易回答,且直接反应了客户对企业的忠诚度和购买意愿,在一定程度上可以看到企业当前和未来一段时间的发展趋势和持续盈利能力。

02 CES( Customer Effort Score用户费力度)

CES 指的是你的产品或服务,会需要用户花费多少力气才能满足自身需求。

根据Oracle 的一项研究,82%的人把他们的购买经历描述为“花费太多的努力”,CES背后的理论就是,应该想办法减少客户为了解决问题而付出的努力。CES可以帮助你找出可优化的方向,更容易理解在哪里进行改善,较低的费力度也与客户留存直接相关,从而增加客户的生命周期价值。

一般情况下,大多会先利用CSAT、PSAT这类的指标来衡量客户对产品或服务的体验反馈,当这套标准的价值到达临界点时,就应该尝试CES作为满意度指标的扩充,更充分的评估Saas产品的用户体验情况。

03 FCR( First contact resolution一次性解决率)

作为Saas类服务型产品,在获取新客或帮助旧客时,大多是通过客户服务,在许多的互联网公司Customer Service团队也是重点投入资源的。而「FCR一次解决率」即是用来衡量这类客户服务的指标。

FCR 是指客户的服务需求在第一次客户服务中完全解决的占比率。

测量一次性解决率是相当简单的。通过单次交互(电子邮件响应,电话,聊天会话等)解决你收到的客户请求数量,并除以同一时期收到的请求总数。

一次性解决率不仅对Saas 产品的客户至为重要,也能体现客户服务的绩效和表现,甚至深入到每个员工的层面上。

 

2.3 系统性评估型

01 SUS( System Usability Scale系统可用性量表)、QUIS(Questionnaire for User Interface Satisfaction用户交互满意度)

SUS 应该也算是用来评估单个用户使用某个产品的可用性时,最常见的指标了。SUS 是一种用来量化定性数据的方法,并不仅仅依靠数据统计,需要结合用户具体参与来进行调研,通常作为可用性测试的组成部分。

SUS 通常用来作为改版效果的整体评估,在使用时可以对题目的主词产品进行替换,这些替换对最后的测量结果都没有影响。

而QUIS 则可以说是SUS 的进阶版,会更注重具体页面或操作节点的易用性,通常作为SUS 的延伸使用。比较简单的QUIS 版本包括27 个问题,分为5个类别:

Overall Reaction 总体反应、Screen 屏幕、Terminology/System Information 术语/系统信息、Learning 学习、System Capability 系统能力

02 CSAT( Customer Satisfaction客户满意度)、PSAT( Purchase Satisfaction购买满意度)

客户满意度也算是经典的衡量指标之一了,随着商业竞争的激烈,各类型的产品与企业都对客户满意度更加重视,很多时候你所熟悉的电话满意调研、电子邮件调研,甚至直接在消费后的星级评分,其实都是关于这类问题的问券。

PSAT 则是在CSAT 的基础上,针对消费类型产品进行细化,强调售后使用体验的部分。这类问卷的好处是简单且扩展性强,可大至系统小至任务。

但缺点就是用户容易在中等范围内回答问题,无法给企业带来真实的反馈。而且,即使在客户满意度很高的情况下,依然有可能遭遇留存流失问题。

因为满意度并不直接与客户忠诚度相关联。

其他相关的系统性可用型指标当然还有许多,不过在工作流程中一般来说都较少会使用到,主要还是更具专业性的用研User Researcher 角色较常使用,包含:

  • SUMI(Software Usability Measurement Inventory 软件可用性测试)
  • CSUQ(Computer System questionnaire 计算机系统可用性测试
  • USE (Usefulness, Satisfaction, and Ease of Use 有用性、满意度、易用性)

 

2.4 电商产品型

01 PSM(Price Sensitivity Measurement 价格敏感度测试)

PSM 衡量目标用户对不同价格的满意及接受程度,了解其认为合适的产品价格,从而得到产品价格的可接受范围。

PSM 考虑了消费者的主观意愿,又兼顾了企业追求最大利益的需求。但测试过程主要基于目标对象的自然反应,没有涉及到任何竞争产品的信息。所以在横向拉通上显得较为薄弱。

也正因为缺少对于竞争产品的分析,所以PSM 目前主要集中在自成体系的产品链路中,用来配合Saas 服务或虚拟产品的定价,在实体产品中已经较少被使用。

02 DSR(店铺质量评分)

DSR 算是电子商务类产品中的特殊指标,初期是在在阿里巴巴的电商生态中大规模使用,目前也慢慢变成电商场景的通用指标。

DSR 是指买家在电商平台上购物成功后,针对本次购物给出的评价分数。买家可以评分的项目包括「描述相符、服务态度、发货速度、物流速度」4 项。

DSR 评分计算方法:每项店铺评分取连续6个月内买家给与该项评分的总和/连续6个月内买家给与该项评分的次数,统计最近180天

DSR 评分直接影响卖家在电商平台中,商品搜索曝光权重的高低,从而影响商品与店铺的排名。因此对于平台类的UX Design Team 来说,建立类似DSR 的曝光评分机制,也是间接影响服务提供商的产品体验,进而提升整体平台中的用户体验质量。

03 ZMOT(Zero Moment Of Truth第零关键时刻)、FMOT(First Moment Of Truth第一关键时刻)、SMOT(Second Moment Of Truth第二关键时刻)

FMOT & SMOT 是目前新零售场景常会提到的指标模型,但其实在传统的零售行业早就是一个通用的衡量指标,FMOT 指的是消费者在接触到对应商品货价的关键3~7 秒,所有的商品售价、包装、摆设都是在这关键3~7 影响消费者拿取商品甚至购买的关键因素。

而SMOT 则是指这类实体产品,在消费者购买回家后的首次体验,是否符合这个商品的广告语,对于一个品牌来说,即是是否成功地履行了它的承诺还是令人感到失望,这也是消费者是否会成为一个品牌的粉丝,甚至在线上或线下渠道分享的关键(是否很像NPS 的精神?)。

延伸出的ZMOT,即是线上线下结合的新零售关键指标,让消费者在「尚未接触」到特定商品前,就透过线上向消费者进行行销,当消费者主动进行相似活动、搜索时,就能接收到产品的正面讯息来影响消费意向。

本质核心也就是

当广告出现在用户需要的时刻,就变成了服务

ZMOT & FMOT & SMOT

 

2.5 主观评估型

用户体验的主观评估,大多是偏观察式的方法,也是大家比较耳熟能详的用定性调研法,比如眼动仪、观察法、品牌问卷… etc.。

当然如果要尽可能尝试量化这类User Attitude 主观评估数据时,前提都是把用户体验理解成两种维度,一种维度是实用性(Pragmatic)偏向常说的可用性,另一种是享乐性(Hedonic)也就是常说的舒适性,享乐性维度还会被拆分成了几种属性,例如Stimulation和Identification。

01 UEQ(User Experience Questionnaire 用户体验调查表)

UEQ 是SAP 开发的一套定量分析用户体验的工具。用户在问卷上表达出他们在使用产品和服务中的感受,印象和态度,然后生成一个包含用户体验数个方面的量化表。包括传统的易用性方面的指标:

  • Efficiency
  • Perspicuity 易懂
  • Dependability 可信任

也包括三个体验方便的指标:

  • Attractiveness 吸引度
  • Stimulation 激励性
  • Novelty 新鲜度

02 HQ(Hedonic Quality享受性质量)、PQ(Pragmatic Quality实用性质量)& AttrakDiff

HQ 主要是用来消费型产品的情感衡量指标,较常使用消费者对于消费类型产品的评价。而PQ 则主要是在易用性层面上加入主观因素的评分,如果要针对性地对HQ & PQ 进行系统性评分,AttrakDiff 则是一个较常使用的工具。

AttrakDiff 包含了28 项题目,每一项都是一个7 分制量表,分和最高分代表一对具有评价性质的反义词,用户需要根据使用产品过程中的某一方面的体验从低到高进行评分,比如“混乱的— — 清晰的”,分数越高,表明产品的某一方面设计得越清晰。

 

3、写在最后

在产品或业务中导入体验数据衡量指标,不是新入行的设计师想像的这么简单。真正的实务过程绝不是将文章中的指标,直接导入自己对接的产品中,每一个数据指标都有其目的,且不同的人即便看到的数据相同,也都会有自己的解读方式。

过于依赖指标,如果不随时依据市场动态与公司策略进行调整,不仅容易因为短期的良好数据忽视了中长期的产品成长,也会慢慢的丧失设计师的感性创意能力。

所以,清楚的认知到哪个指标可以帮助我进行什么样的设计策略。才是真正的使用方式。千万别让设计师变成动作导向的工作职位,

Value-Driven 价值导向的工作模式,才是设计师的生存法则

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

产品设计师要了解的数据指标

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

很多设计师和产品经理在刚入门时,都会对一些数据指标很模糊(这些花花绿绿的是啥玩意儿)。尤其是与产品团队和运营扯需求、与开发谈指标、谈实现等场景,数据指标就更为常见。假如我们对指标不了解、没有概念,则会被多方质疑你的专业能力,同时你也无法提升“数据驱动业务、数据驱动产品、数据驱动设计”的核心能力。


关注数据指标,不仅仅是产品经理或运营的“专利”,作为交互和UI设计师也需要掌握这方面的技能,来帮助我们产出更贴近用户行为的设计。同时,监测产品数据也有2个重要作用:一是可以监控产品迭代中的问题点和设计点、运营和市场活动的收入水平等,看看他们目前处于什么状态,也可以为后续产品迭代的方向提供参考帮助。二是通过对数据的挖掘和分析,可以发现新的商业机会和产品爆发点,也就是近两年咱们经常听到的数据增长、用户增长、增长设计概念。


因此,作为一名设计师或产品经理必须要了解与业务相关的核心数据指标。由于所在领域不同、业务不同,因此团队所关注的数据侧重点也不同。今天就从“网页基础指标、用户数据指标、如何获取数据指标、产品设计的生命周期”来梳理我们产品设计者常见的指标维度。

Image title



一、什么是数据指标?


它是对当前业务有参考价值的统计数据,是通过对于业务需求的进一步抽象,并进行数据埋点后,加工出来的一套计算规则,并通过有效的方法论和数据可视化呈现,最终能够解释业务变化和用户行为。当然,不是所有的数据指标都叫指标,只有对当前业务有参考价值的指标才可称作指标,同时要具备:可统计、可分析、可监测的特点。



二、网页基础指标


先了解下流量的概念:分为站外流量来源站内流量路径。以下就拿电商产品举例:

站外流量:通过其他平台或外界媒体进入到你的店铺就是站外流量。又分为免费和付费,免费有自然流量和搜索流量(比如在百度搜你店铺的名称并点击进入,这就是从免费的外界平台进入),而付费则主要是一些广告投放的流量(比如将你的店铺链接付费植入到某公众号,让他帮你推广,既从他公众号进入店铺的流量)。


站内流量:通过平台内的推荐入口或者搜索路径等方式,进入到你的店铺就是站内流)。主要指用户在网站内的行为路径。



PV(页面浏览量)


用户每1次对网站中的每个网页访问(成功访问/进入)均被记录1次。用户对同一页面的多次访问,访问量累计。在一定统计周期内用户每次刷新网页1次也被计算1次。

理论上PV与来访者数量成正比,但是它不能精准决定页面的真实访问数,比如同一个IP地址通过不断的刷新页面,也可以制造出非常高的PV。



UV(独立访客人数)


访问网站的一台电脑客户端为一个访客。00:00~24:00内相同的客户端只被计算一次。

使用独立用户作为统计量,可以更加精准的了解一个时间段内,实际上有多少个访问者来到了相应的页面。



VV(用户访问次数)


当用户完成浏览并退出所有页面就算完成了一次访问,再次打开浏览时,VV数+1。VV同时也是视频播放次数(Video View)的简称。



PV、UV、VV有啥区别?


比如你上午打开了UI中国,访问了两个作品页面并关闭网页。下午又打开了UI中国,访问了五个作品页面。则当日统计结果为:PV=5、UV=1、VV=2

Image title



跳出率


一个非常重要的指标,表示用户来到网站后,且没有进行操作就直接离开的比例,代表着陆页面(访客进入网站的第一个页面)是否对用户有吸引力,常用的计算方式是落地页面的访问量除以总访问量。


比如,在一个统计时间内,网站有1000个不同用户从某个链接进入,其中有50人没有二次浏览行为,是直接退出网站的,那么这个链接的网站跳出率为:50/1000=5%。然而有些退出的行为不能作为退出考虑,比如页面上刻意添加的导出链接,如合作伙伴的网站等,还有联系我们,付款页面等,都不算是负面的跳出,所以要根据不同情况统计有效的数据才能得出可靠的跳出率。


统计一个网站的跳出率是非常有必要的,能帮助产品提高用户粘性。跳出率高,说明用户体验做得不好,用户进去就跳出去了,着陆页没有满足用户的期望与需求,或是人群定位不精准。相反如果跳出率较低,说明用户体验做的很好,最起码用户能在第一时间获取自己需要的内容,并且可能还会二次光顾。



退出率

针对网站内某一个特定的页面而言,退出率是衡量从这个页面退出网站的比例,通过一个页面的退出次数除以访问次数。


退出率反映了网站对用户的吸引力,如果退出百分比很高,说明用户仅浏览了少量的页面便离开了,因此需要改善网站的内容来吸引用户,解决用户的内容诉求。



跳出率与退出率又有啥区别?


跳出率是指用户进入网站起,没进行什么跳转操作,又从这个页面退出或关闭的比例。退出率则是无论用户从哪个页面进入网站,最终从这个页面退出的比例。


跳出率适用于访问的着陆页 (即用户成功访问的第一个页面),而退出率则适用于任何访问成功并退出的页面,既用户在网站上访问的最后一个页面 。退出率通常针对局部的页面来统计,比如支付流程退出率高,那就要针对现状对流程做优化。但站在网站总体的角度统计退出率没啥意义,因为有访问网站,就必然有离开网站。而跳出率则可以适用于着陆页面,也可适用于网站整体。



平均访问时长

指在特定统计时间段内,浏览网站的一个页面或整个网站时,用户所停留的总时间除以该页面或整个网站的访问次数的比例。


如用户在网站特定时间内总停留时间为1000秒,在这段时间内,总的访问次数是100次,那么这个页面或网站的平均访问时长就是1000秒/100=10秒。


该数据是分析用户粘性的重要指标之一,也可以侧面反映出网站的用户体验。平均访问时长越短,说明网站对用户的吸引力越差,可用内容信息越少。



转化率


在一个统计周期内,完成转化行为的次数占推广信息总点击次数的比率。


转化率=(转化次数/点击量)×100%。以用户登录行为举例,如果每100次访问中,有10个登录网站,那么此网站的登录转化率就为10%,而最后有2个用户关注了商品,则关注转化率为2%,有一个用户产生订单并付费,则支付转化率为1%。


转化率是产品盈利的重要指标之一,它直接反映了产品的盈利能力。不同行业的转化率,关注点也不同,比如电商产品就要关注销售转化,看看参与活动的用户当中有多少是在活动后产生支付的,有需要的还可以根据数据分析出人均购买次数和购买金额。再比如我们监测注册量,就要关注注册转化率,看看这个活动给产品带来了多少新增用户。所以转化率可以针对性分析产品在哪些方面做的不足,可以快速定位到问题点。



转化率是采用访客数量(UV)还是访问量(PV)?


这需要根据团队数据分析的目的而定。比如采用访问量,就是认为每次访问都可产生付费。若采用访客量,就认为用户多次访问才能购买是正常的行为。个人建议前期采用访客数量,以排除自己团队对网站访问的数据干扰,因为访问量是可以通过同一个IP不断刷新网页而递增的,而访客数量是精准到一个IP地址(既一个用户、一个设备)。



回购率


指用户对商品或者服务的重复购买次数(回头客)。


重复购买率有两种计算方法:一是所有购买过产品的用户,以每个人为独立单位重复购买产品的次数,比如有10个客户购买了产品,5个产生了重复购买,则重复购买率为50%;二是单位时间内,重复购买的总次数占比,比如10个客户购买了产品,其中有3人产生二次购买,3人中又有1人产生三次购买,则重复购买次数为4次,重复购买率为40%。重复购买率越高,则用户对产品的忠诚度就越高,反之则越低。




三、用户数据指标


ARPU


即每个用户平均收入。


ARPU=总收入/用户数。它注重的是一个时间段内运营商从每个用户所得到的收入,衡量互联网公司业务收入的指标。ARPU值高说明平均每个用户贡献的收入高,但无法反映利润情况,因为利润还需要考虑到成本。果每用户的成本也很高,那么即使ARPU值很高,利润也未必高。

而用户数可以是总平均在线用户数、付费用户数或是活跃用户数,不同产品标准可能存在差异。ARPU注重特定时间段内从每个用户所得到的收入,衡量互联网公司业务收入的指标。ARPU值高说明平均每个用户贡献的收入高,但未必说明利润高,因为利润还需要减去成本。ARPU的高低没有绝对的好坏之分,分析的时候需要有一定的标准。ARPU值高说明平均每个用户贡献的收入高,这段时间业务在上升。



新增用户


既安装应用后,首次成功启动产品的用户


按照统计跨度不同分为日新增(DNU)、周新增(WAU)、月新增(MAU)。新增用户按照设备维度进行去重统计,如果该设备卸载了应用,一段时间后又重新安装了该应用,且设备未进行重置,若再次打开应用,则不被计算为一个新增用户。


新增用户量指标主要是衡量营销推广渠道效果的最基础指标。新增用户占活跃用户的比例也可以用来用于衡量产品健康程度(产品没有新增和活跃,就进入“绝症状态”)。如果某产品新用户占比过高,那说明该产品的活跃是靠推广得来,这种情况非常有必要关注,尤其是新增用户的留存率情况。

Image title




活跃用户


既在特定的统计周期内,成功启动过产品的用户。除此之外,我们还可以将活跃用户定义为某统计周期内操作过产品核心功能的用户(按照设备去重统计)。


活跃用户是衡量产品用户规模的重要指标,和新增用户相辅相成。如果只看一个指标来定义产品的成功与否,那一定是活跃用户数。当然,一般重点关注核心用户规模即可。希望用户每天都使用的应用有新闻APP、社交APP、音乐APP等,其产品的KPI考核指标一般都有日活跃用户数这项。但对于某些低频消费需求和临时性需求的APP,比如旅游、摄影、工具类等,可能会关注月活跃数,甚至特定周期内的活跃数。


活跃用户数根据不同统计周期可以分为日活跃数(DAU)、周活跃数(WAU)、月活跃数(MAU)。


DAU(日活):某个自然日内成功启动过应用的用户,该日内同一个设备多次启动只记一个活跃用户;


WAU(周活):某个自然周内成功启动过应用的用户,该周内同一个设备多次启动只记一个活跃用户。这个指标是为了查看用户的类型结构,如轻度用户、中度用户、重度用户等;


MAU(月活):某个自然月内成功启动过应用的用户,该月内同一个设备多次启动只记一个活跃用户。这个指标一般用来衡量被服务的用户粘性以及服务的衰退周期。



留存率


既在某一统计时段内的新增用户数中再经过一段时间后仍启动该应用的用户比例(留存率=留存用户/新增用户*100%)。通常重点关注次日、3日、7日、30日即可,并观察留存率的衰减程度。


次日留存率:即某一统计时段新增用户在第二天再次成功启动应用的比例。如果次日留存率达到50%以上,说明这个产品已经是非常优秀了;


7日(周)留存率:即某一统计时段新增用户在第7天再次成功启动该应用的比例。这个时间段内,用户通常会经历一个完整的产品体验周期,如果这个阶段用户能够留下来继续使用,很有可能成为产品的忠实用户;


30日(月)留存率:即某一统计时段新增用户在第30天再次成功启动该应用的比例。通常移动端产品的迭代周期为2~4周一个版本,所以月留存率能够反映出一个版本的用户留存情况,一个版本的更新,或多或少会影响部分用户的体验,所以通过对比月留存率能判断出每个版本的更新对用户的影响面积,从而定位到类似问题进行优化。

Image title



若以上时段的留存率低,会映射出哪些问题?


次日留存率低:说明所针对的用户群对我们的产品不感兴趣;


7日留存率低:说明我们产品的内容质量太差,用户过了新鲜劲儿之后发现产品用起来特别枯燥;


30日留存率低:版本迭代规划做得不好,功能更新、内容更新、BUG修复、性能等都做得比较差,此时需要重新规划迭代内容,不可一错再错。


留存率是验证用户粘性的关键指标,设计师和产品经理通常可以利用留存率与竞品对标,衡量用户的粘性和忠诚度。对于一个版本相对成熟的产品,如果留存率有明显变化,那就说明用户质量有变化,很可能是因为推广渠道等因素所引起的。同时,留存率也是产品改版的重要指标,产品体验越好,越符合用户需求,则留存率越高。若产品本身满足的是小众低频需求,留存率则选择双周甚至是30日进行监测。一般来说,留存率低于20%会是一个比较危险的信号



流失率


指那些曾经使用过产品或服务,由于各种原因不再使用产品或服务的用户。用户流失率=某段时间内不再启动应用的用户/某段时间内总计的用户量。流失率和留存率有紧密关联,流失率高既留存率低,但活跃度不一定高,因此需要综合分析。也是重点关注次日、7日、30日的流失率。


对于流失用户的界定依照产品服务的不同而标准不同,对于微博和邮箱这类用户几乎每天登录查看的产品而言,可能用户未登录超过1个月,我们就可以认为用户可能已经流失了。而对于电商产品而言,可能3个月未登录或者半年内没有任何购买行为的用户可以被认定是流失用户,所以不是每个产品都有固定的流失期限,而是根据产品属性而判断。设计师和产品经理需要找到流失的异常数据,定位流失用户的原因,并在下个版本中修复产品中存在的问题。甚至还可以定位到流失的具体用户ID,通过当时用户注册的个人信息进行跟进,我们最常见的就是游戏类产品“召回老玩家”的运营手段。



一次性用户


既新增日后再也没有启动过应用的用户。


一次性用户是关键的营销指标,和判断无效用户的标准,从中把目标用户过滤出来。一般划定的界限是至少超过7天时间才能够定义是否是一次性用户。



使用时长


既统计时间段内,某个设备从启动应用到结束使用的总计时长。


一般按照人均使用时长、次均使用时长、单次使用时长进行分析,衡量用户产品着陆的粘性,也是衡量活跃度,产品质量的参考依据。



启动次数


既统计时间段内,用户打开应用的次数。


重点关注人均启动次数,结合使用时长可进行分析。用户主动关闭应用或应用进入后台超过30s,再返回或打开应用时,则统计为两次启动,启动次数主要看待频数分布情况。



使用间隔


既用户上次使用应用的时间与再次使用时间的时间差。


使用频数分布,观察应用对于用户的粘性,以及运营内容的深度。虽然是使用间隔,但是通过计算同一设备,先后两次启动的时间差,来完成使用间隔统计,充分考虑应用周期性和碎片化使用的特征。




四、如何获取这些数据?


在工作中可能会发生这种情况“上文提到的数据指标有些看不到”、“不知道怎么看”,最终因为没有数据而无法进行监测和分析。这里主要是因为在产品上线前没有对数据进行开发统计。这部分工作一般是由产品经理去规划,开发来执行,设计师也可以提出自己想要监测数据的需求给到开发,我们把这个规划叫做“数据埋点”。


埋点其实是对产品的一个可视化健康检查,贯穿产品的整个生命周期,使产品逐步达到最佳状态(需要数据结果和产品迭代相互呼应),为未来产品优化方向给出指导意见。当然,埋点的目标不同,最终数据验证的结果也会有所不同。


比如,新版本上线,需要验证用户行为和功能效果的几种场景:


(1)新功能是否得到了用户的使用与认可?本次新增的功能用户点击率和活跃度怎样?

(2)用户在核心功能的操作路径上是否顺畅?有没有因为功能按钮的设计而导致无效点击增多?

(3)在某个特别的节日进行了产品内的banner推广或者促销,该活动运营的效果如何?新用户增长是怎样的?

...


所以说,埋点是互联网领域非常重要的数据获取手段。埋点采集信息的过程一般也称作日志采集。通俗点讲,就是在APP或者WEB产品中植入一段代码,监控用户行为事件。典型的应用场景就是某个运营活动,页面的点击量(PV)有多少,点击用户数(UV)有多少,都是用埋点数据进行计算的。当然这些信息并不是消费一次就没用了。通过埋点收集到的信息,可以作为监控并通过可视化数据呈现出来,帮助产品、设计、运营人员看到产品的长期表现,也可以作为基础原料,进行复杂的运算,用于用户标签、渠道转化分析、个性推荐等等。比如我们用某资讯类产品看新闻的时候,会发现每次推荐的内容都是上次所点击的相关类别,这就是通过埋点数据获取的用户行为习惯,通过数据进行个性化推荐。


除了对需要监测的特定功能区做埋点之外,一般大公司也有自主研发的供内部产品组使用的数据分析系统,一些关键数据在上面都能够实时监测到,并有特定的团队去维护它。其次,现在市场上还有很多数据统计工具可以自动监测到产品的相关数据,大多都是付费的,这里就不打广告了,百度搜索关键词会出现一大堆类似的数据监测产品。




五、产品阶段不同,关注的数据也不同


产品阶段就是产品生命周期,可分为初创期、成长期、成熟期、衰退期,每个阶段的工作权重和数据关注点都会有所区别。

Image title



1、初创期


初创期的重点在于验证产品的核心价值,通过某种产品或服务可以为特定的人群解决某个问题。这时我们需要关注的关键数据是目标用户画像,同时是第一批种子用户对产品的使用情况和反馈建议。所以初创期更需要设计师和产品经理去做定性分析(比如用户访谈),直接确定产品是否满足了用户需求、产品有没有覆盖到更多的使用场景等。因此产品初期我们可以不用在数据分析上投入更多精力。说白了,该阶段用户量较少,用户行为等数据还停留在比较初期的阶段,所以数据分析的效果不能发挥到最大化,且价值不明显。该阶段就是先保证产品顺利上路,同时要绑定一批种子用户,解决基本的用户诉求,让产品和团队先生存下来。阶段与手段不匹配的情况下,还把某些事情强加上去,这就是“作秀”。



2、成长期


经过了产品打磨的初始阶段,产品一般会有较好的留存率,这个时候产品开始进入自发增长期(成长期)。该阶段的产品已经能够解决用户的基本诉求了,所以将侧重点关注在用户的生命周期的管理,为产品吸引更多的新用户来使用(新鲜血液),既拉新和留存,那么我们数据关注的重点也要放在拉新和留存上。

拉新要关注推广数据和推荐数据:


(1)推广数据:就是产品以拉新目的所采取的所有推广运营活动和行为的指标数据,不同推广方式(线上+线下)的到达率、触达面积、点击率、转化率、二次访问率、流失率。比如我们举办了一场线下活动,现场实到多少人、哪些是目标用户、哪些不是目标用户、有多少人当场试用了我们的产品,又有多少人在活动后下载了产品等等。


(2)推荐数据:是用户是否愿意将产品推荐给他人的行为数据分析。这里我们在数据上可以关注整个分享环节动态,比如产品有100个种子用户,他们中有多少人只是自己用产品、有多少人会分享给朋友、他们的分享行为带来了多少新增用户等,这些数据会告诉我们产品在用户心中的位置。


留存则是要做用户的留存分析:


重点有用户的次日留存率、7日留存率、30日留存率、日活、周活、月活、产品页面访问深度、退出率等等。需要注意的是,这些指标不能单独监测,需要将他们结合起来看。说透了,留存就是要提高目标用户在核心场景的反复出现频率和停留时间(核心场景既产品的主要功能、主要盈利模式和用户最喜欢的模块)。



3、成熟期

随着用户快速增长,产品不断完善,产品在进入成熟期前后,设计师和产品经理的重心开始从用户生命周期的前半段(吸引、激活、留存)往后半段(流失、回流)开始偏移并做出相应的产品设计,同时也更关注商业化行为,既用户价值(用户给产品带来的价值,产品给开发者带来的价值)。


这里的用户价值指的是用户对公司和产品的商业价值,既解决产品诉求。和我们经常说的用户诉求有所不同。该阶段我们要根据用户的情况进行细分,“保大弃小”,尽可能提升高价值用户的活跃度,对于低价值用户可以适当地减少投入精力。有增长就有减少,所以除了对用户活跃度的关注之外,还需关注核心场景的用户行为数据和高价值用户的流失率。


假设我们的产品日活和周活都很高,但是核心场景上的点击率或是停留时间非常低,核心场景关系到公司商业目标和价值的实现,用户在这一块的行为少,要么你的用户不是目标用户,要么你的核心场景存在比较大的缺陷让用户不满意。高价值用户的流失率也是一个道理,都是值得引起我们警惕的数据指标。



4、衰退期

每个产品都有一个生命周期,这是受市场因素导致的,此时用户会逐渐流失(这里说的流失并不是完全放弃我们的产品,而是从降低活跃度渐渐走到消失),既被其它新产品的体验模式所吸引,所以这时应该更关注用户流失后使用的产品,分析竞品的商业模式和功能,同时监测流失速度,需尽快拓展产品边界,寻找新的切入点。




六、敲黑板

Image title



1、改版前不放在心上,迭代发布后才关注数据


对于平常就很少关注数据的设计师来说,经常在改版前因为专注于界面上的优化,而忽略了真实的用户行为。


真实案例:我们产品中有一个步进器组件,用于客户选择相应的天数,且此项为必填项。之前我们内部的沟通结果是提供一个7天的默认值,当然对此默认值是有争议的,有的同事认为默认10天比较合理,所以为了验证用户的操作习惯,我们在上线前对该组件进行了埋点。经过用户使用过一段时间之后,我们通过数据发现大部分用户在使用步进器时,点击“减少”比“增加”的次数要多,而且一般停留在5天,就这样我们把默认值从7天优化为5天,减少了大部分用户的2次点击,并且在类似的业务模块内,会记住用户上次所选的值,从而提高填写表单的效率。

Image title



虽然只是一个小小的交互优化,但足以证明设计师关注产品数据不仅能够验证设计结果,还能对产品体验不断打磨,精细化提升用户体验。很显然,如果没有此次对数据的监测和教训,只会让我们继续活在自己的世界里,永远也不会在意这个小问题,导致这个组件继续复用、滥用,一错再错,直到用户亲自给我们提优化建议的时候,就已经太晚了。


所以,如果你想让某个设计方案更贴近用户或者想对比改版前后的效果,那就需要提前将自己的埋点需求整理成Excel表格,发给相关的开发同事,再对照交互原型详细讨论这些埋点,确保双方理解一致,不至于最后埋点的数据不是自己想要的。


下面是我在工作中用到的埋点需求表(用户行为统计表)和数据收集表,大家可以参考使用:

Image title




2、成为一名解决产品问题的设计师


随着互联网行业的发展,行业对我们设计师的要求只会越来越高,从近两年冒出的UX设计岗、产品设计岗就能感知到。所以,未来的界面设计师一定会更关注产品和数据,不再是曾经“画”页面的团队底层执行者了,了解一些数据知识可以将用户的行为可视化,以便更清晰的了解用户行为,经过一段时间的数据对比,设计师和产品经理可以共同验证并规划后面迭代的方案,预测产品的走向与趋势。并且通过数据分析,可以量化交互方案的效果,作为一名解决产品问题的设计师,可以主动去承担一些用研工作,化被动为主动。



以上是一些基础的数据指标,希望对你有所帮助。若有来自不同行业和业务的产品数据指标,欢迎讨论交流~



是的,我们距离目标又近了一步,标红的你都看了吗?

Image title

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


用大数据告诉你什么样的图!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

创意是营销中离消费者最近的环节,同样也是最性感、最直接的部分。但为什么我们都看过杜蕾斯海报却依旧写不出好文案?一个好创意如何诞生?

近日,阿里妈妈发布《美妆行业淘宝首焦创意洞察》(以下简称《报告》),试图通过数据洞察的方式帮助品牌商家更懂创意,探讨什么样的创意真正能被消费者买单,怎样的创意生产能提升运营效率,最终帮助品牌实现生意增长。

以消费者运营为中心,好创意从洞察开始

如果说创意表现是营销的末端,那么洞察则是营销的起点,在营销媒体「传播体操」看来,创意和洞察更是「术」与「道」的关系。因为有了消费者洞察,才会有推广策略,从而产生许多创意。

创意能让品牌与用户实现更好的沟通,但数字化时代,媒体形态多元化、触点碎片化,对创意提出了更高要求。

以 618 这类大型营销节点为例,阿里妈妈此前洞察到,618 消费者是以女性为主的 1-2 线高学历高消费家庭用户,90 后年轻人群为次主流消费群体。消费人群老龄化与年轻化并行,渠道下沉趋势显现。

因此在创意和营销上,品牌方应重点关注 4 个人群:崛起的新生代,承载主力核心的小镇青年、城市青年,以及正在兴起的中老年人群。懂得消费者需求及市场变化,始终围绕以消费者运营为核心,才能让创意发挥更大的营销价值。

此前,阿里妈妈基于行业推出系列洞察报告,此次首次发布创意领域的营销洞察,则进一步丰富洞察维度,持续输出营销洞察能力。

算法解决「审美打架」难题,多元素组合产生好创意

这或许也让品牌、商家和设计师们曾经的矛盾被解决。此前,在面对销售的需求时,视觉设计的结果需要为用户下单购买、产生交易服务,往往会与审美「打架」。《报告》试图减小品牌方和设计师的认知沟壑,通过解读创意图片背后的运营逻辑,为好的创意提供数据基础。

《报告》聚焦美妆行业的展示类营销创意。通过对海量创意样本的算法支持及数据分析,《报告》分析了淘宝首页焦点图(以下简称「首焦」)这一表现创意的关键区域,挖掘创意特征对点击效果的潜在提升效应。

《报告》发现,淘宝首焦曝光点击后的流量联动效应明显,首焦上的点击进店能够有效提升消费者在其他渠道上的进店概率,而在资源位与定向方式固定的前提下,创意设计往往是影响点击率的第一要素。

从数据上进一步看到,首焦点击人群较非首焦点击人群,在后续其他触点上的进店概率会高出一筹,尤其在美容护肤/美体精油和彩妆类目分别提升了 9.1 倍和 11.2 倍。这意味着,首焦投放有助优化全店流量获取能力。若需完成拉新任务,可以考虑首焦投放与其他营销方式组合。

具体来看,《报告》逐一拆解了首焦图片的创意构成──调性、色调、标示、文本内容、商品数量、人像。在控制创意之外的潜在影响因素下,阿里妈妈透过洞察报告还原创意质量的高低对营销效果的影响差异,从而得出最优的组成方式。

好创意带来生意增长,阿里妈妈提供数字化创意解决方案

不过,在大家积极探索新内容形态的当下,为什么靠图片传达信息依旧重要?在阿里妈妈营销研究中心高级行业研究专家苏寅看来:「从展现形态上来看,图片创意依旧是品牌方与用户沟通的重要抓手。作为基础的信息媒介,图片与视频类内容深度联动,功能互补,形成品牌与消费者的立体化沟通。」

「互联网女皇」玛丽·米克尔发布的《2019年互联网趋势报告》也佐证,虽然短视频直播增长迅速,但使用图片成为越来越重要的沟通方式,基于图片的通讯也得到计算机视觉及人工智能的推进。而在广告营销领域里,图片创意的价值也正在被逐渐受到关注。

有数据支撑的创意洞察后,数字化营销时代也需要更数字化的创意解决方案。

随着报告的发布,阿里妈妈将携手旗下平台创意中心,为品牌和商家提供数字化的创意解决方案。作为国内领先的提升营销效率的全域创意解决方案平台,创意中心接下来也计划把创意黑科技和创意资产的能力,与生态中的各类伙伴进行合作,赋能整个营销创意行业。

除此,阿里妈妈也从产品功能、营销策略上提供赋能。

旗下展示营销产品智钻在 618 前实现升级,在展现形式上首次突破淘宝首焦静态图片形态,以创意元素组件化的形式,创新支持微动效、倒计时、店铺回头客等组件。品牌商家因此有了更多展示信息增益的可能,可提升创意对消费者的心智传达和沟通效率,同时也能提升转化效果。

附完整版报告内容:




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

设计师必须了解的色彩理论

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

深入了解色彩理论属性是非常有必要的,可以很好利用一些定式理论和色彩搭配方法应用于你的设计!

Image title


本文重点介绍了色彩理论和色彩组合在设计中应用的基础知识:  例如学习更多关于色相环、RGB、CMYK色彩模型的相关知识。


很多人认为UI的色彩选择主要取决于设计师的品味和美感。然而,色彩选择的过程比表面看起来要复杂很多,在设计中起着重要的作用。在我们之前的一篇关于颜色心理学的文章中,我们发现颜色对我们的情绪和行为有很大的影响。这就是为什么产品的成功很大程度上取决于设计所选择的颜色。研究表明,人们只需90秒就能对一种产品做出下意识的判断,而其中62%至90%的判断仅基于颜色。因此,选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的。


为了创造好的设计,更有效地运用颜色,你需要了解颜色是如何形成的,以及它们之间是如何相互联系的。这就是为什么艺术学校、学院和大学的学生学习色彩理论,致力于研究色彩的本质。今天,我们提供给你记住(甚至学习)色彩理论的基础上的颜色组合,可以有效地应用于你的设计创作。


01.色相环/色轮


如果你上过有关绘画的课,你一定见过由不同颜色组成的圆圈。它被称为色相环/色轮,这有助于理解不同的颜色如何相互关联,以及如何将它们组合起来。色相环通常由主色、次色和三色组成。最主要的是这三种色素的颜色不能形成任何其他颜色的组合。把原色结合起来,就得到了第二种颜色,而原色和第二种颜色的混合就得到了第三种颜色,它们通常有两个词的名字,比如红紫。


Image title


色相环/色轮是由艾萨克·牛顿于1666年以示意图的方式创建的,从那时起,它经历了许多变换,但仍然是色彩组合的主要工具。主要的想法是,色相环/色轮必须这样做,以便颜色适当地产生混合。


02.颜色模型


在你开始混合颜色之前,你需要了解颜色有两种不同的性质:有形的颜色是物体表面的颜色,其他颜色是由光产生的,比如电视的光束。这些类型创建了两个颜色模型,通过它们可以形成色轮:加法和减法。


加色模型将红、蓝、绿作为原色,因此也称为RGB颜色系统。这个模型是屏幕上使用的所有颜色的基础。在这个系统中,原色以相同比例组合而成的第二种颜色是青色、品红和黄色,但是你需要记住,你添加的光越多,颜色就变得越亮越浅。对于习惯于油漆、染料、油墨和其他有形物体的减色法的人来说,通过混合加色得到的结果往往是违反直觉的。


减色法通过对光的减法得到颜色。它由两种颜色系统组成。第一种是RYB(红、黄、蓝),也称为艺术系统,常用于艺术教育,尤其是绘画。RYB是现代科学色彩理论的基础,该理论认为青色、品红和黄色是三种颜色中最有效的组合。这就是CMY颜色模型的形成过程。它主要用于印刷,当制版印刷的关键部件为黑色油墨时,该系统被命名为CMYK(青色、品红、黄色和黑色)。如果没有这种额外的色素,最接近黑色的阴影将是浑浊的棕色。


Image title


03.色彩的加法与减法


您应该记住这两个系统之间的主要区别:加法用于数字屏幕,减法用于印刷媒体。如果你正在做的设计项目是要打印出来的,不要忘记一个简单但重要的规则:你在屏幕上看到的颜色在打印出来的时候看起来不一样。加色谱比CMYK更宽,这也是为什么建议设计师在打印前把他们的项目转换成减色法,这样他们就可以看到接近他们得到的结果。然而,如果您使用数字产品,RGB颜色系统是明智的选择,因为它允许创建惊人的东西与它的广谱彩色。


04.色彩协调


“协调”这个词通常与有序和令人愉快的事物联系在一起。色彩协调是指在设计中以最吸引人、最有效的方式对色彩进行排列,让用户感知。当色彩有条理的时候,观者会感到愉悦和平静,而不协调的设计则会给人混乱和厌恶的感觉。色彩的平衡在设计中是至关重要的,因为用户对网站或应用程序的第一印象,颜色有很大的影响。设计师区分了有效工作的基本配色方案。


05.单色


它是基于一种颜色与它的各种色调搭配。单色的呈现总是一个胜利的选择,因为它色彩属性单一,容易创造一些简洁的配色方案。


Image title



06.类似色/同类色


要创建类似的色彩,您需要使用颜色轮上相邻的颜色。这种类型的配色方案用于不需要对比的设计,包括网页或横幅的背景。


Image title



07.互补色


互补的方案是混合的颜色放在彼此前面的色轮上。这个方案与类似的单色相反,因为它的目的是产生高对比度。例如,蓝色背景上的橙色按钮在任何界面中都很难被忽略。


Image title


08.分割互补


这个方案与前一个方案类似,但它使用了更多的颜色。例如,如果你选择蓝色,你需要选择另外两种颜色,这两种颜色相邻,意思是黄色和红色。这里的对比度没有互补方案那么鲜明,但它允许使用更多的颜色。


Image title



09.三元/三色方案


当设计需要更多的颜色时,您可以尝试三元方案。它基于色轮上等距的三种不同颜色。为了在这个方案中保持平衡,建议使用一种颜色作为主色,另一种颜色作为辅色。


Image title



10.四色方案/双互补


四色方案是为经验丰富的设计师,因为它是最难平衡。它采用了四种颜色的色轮,这是互补对。如果你把所选颜色上的点连接起来,它们就形成了矩形。这个方案很难协调,但是如果你做的一切都正确,结果可能会令人惊叹。


Image title

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

社交互动创新 | 从点赞到击掌

资深UI设计者


如何在产品功能上做更多的创新来体现设计价值一直是设计师关注的话题,尤其是在体系成熟的产品里,如何对完善的基本框架和功能进行突破、如何挖掘用户的互动诉求并拓展更多的互动行为等对于设计师来讲都是很大的挑战。我们从前期互动行为的挖掘、情感化的视觉体验打磨以及趣味的玩法升级三个方面,剖析Qzone击掌功能的整个设计历程,或许能为大家提供一些参考性的思路和设计方法。


2 何为互动

我们先从真实生活场景中的互动说起。

人与人之间的互动无处不在,它是我们生活中必要的组成部分,也是整个人类社会的基石。从本质上来讲,社交产品要解决的问题就是人们之间互动的问题。那么如何定义互动呢,我们可以从日常的生活场景中窥得一二。


反馈链

首先,让我们来看一看日常生活中的互动案例:

这是一个很常见的熟人互动案例,我们可以看到,熟人间很容易产生话题,并持续互动下去。但是如果同样的话题发生在不是很熟悉的人之间,可能就会是另一番场景:

在例二中,因为A与B互相不熟悉,所以A没有对B的回复产生进一步互动,对话因此而结束。我们可以进一步推理,其实在这个案例中,不管原因变成什么,只要A没有响应B的反馈,那么A与B的互动就大概率会终止。

这是因为良好的互动行为一定是双方(或多方)的互相行为,一旦因为某些原因导致其中的反馈中断,互动将无法持续。由此可以总结出:

互动在本质上是由一系列的反馈(互动)组成的一条反馈链

反馈质量

但是光有反馈链还远远不够,在社交场景下,我们往往希望反馈链足够长,这样才能让互动双方产生感情升温。在例二中,其实是存在着一条很短的反馈链的,A与B只互动了一个回合。A没有继续响应B的反馈,是因为B的反馈质量较低。试想,当A向B问好时,若B的回复是“早上好,你今天穿的真精神!”,那么A会不会响应B的反馈呢?我想大概是会的。由此可见:

反馈链的长短取决于每次反馈(互动)的质量。

高质量的反馈具备很多特点,其中有三个尤为重要

1 反馈链中的指向性

我们日常生活中的互动行为,一般都会以一个“握手机制”作为开端。这个握手机制可以是显性的(直接喊出对方的称呼,可以是名字、外号,也可以是关系称谓),有时也可以是隐性的(眼光的对视、话题的流转等)。这个握手机制帮助互动双方建立了互动的场景,让双方达成"开始交流"的共识,以便信息的接收者做好倾听并回复的准备,这就是互动中的指向性。

任何互动行为都是发生在两个或者多个明确的对象之间的,因此在良好的互动行为中,指向性显得尤为重要——没有人会去响应别人的自言自语。在互动的过程中,指向性不明确的互动行为是低质量的,不容易获得进一步的反馈,例如评论区中的统一回复、群发的新年问候、领导在台上的讲话等。反之指向性明确的互动是高质量的,比较容易获得反馈,例如群聊中@某个人、收件人为某个人而非邮件组的邮件、多人聊天时眼光的对视等。

2 适度的互动行为

互动行为的适度包含两个方面:信息适度及行为适度。

一方面,由于互动行为本质上是信息的传递过程,因此每次反馈的信息质量会直接影响到反馈的整体质量。好的反馈应该传达适度的信息,让接收者可以对传递的信息进行轻松的接收及处理,降低接收者的反馈门槛。

另一方面,传递信息的行为也应该是适度的。在生活中,不同的场合下,我们会选择不同的行为来表达同样的意思,比如比较正式的场合会选择握手作为问好,而与家人久别后的见面则可能是一个热情的拥抱。


3 反馈的即时性

互动行为是依赖于一定语境的,当语境消失,互动也将停止。在社交产品的互动场景中,互动语境一般会随时间流逝而逐渐减弱直到消失,所以反馈的质量也随时间的流逝而逐渐衰减,若想让反馈链可以得到延续,要尽量保证在语境消失前产生反馈行为,因此即时性的反馈就显得十分重要。


3 点赞到击掌的互动探索

有了以上的理论基础,接下来分析一下Qzone中的互动行为。

Qzone中的互动方式可以归为三类:评论、转发、点赞。其中,评论和转发都可以产生完整的反馈链。针对评论,用户还可以继续通过评论、点赞等方式进行反馈;针对转发内容,用户也可以进行进一步的评论、转发、点赞。而对于点赞行为,反馈链到此戛然而止,用户无法对点赞行为进行直接的反馈。

因此,为了让用户的点赞可以形成完整的反馈链,我们的设计目标就呼之欲出——为Qzone中的点赞行为寻找一个具有指向性的、适度的、具有即时性的反馈行为。互动场景的选择


互动场景的选择

既然要设计的是一个具有指向性的互动行为,我们就必须在可以接收到赞的场景里去做这件事。所以我们首先遍历了主人态下,所有可以看到别人给自己点赞的场景。

但是以上的场景中,并不是都适合承载点赞的反馈行为。根据用户的行为目的,我们可以把以上场景分为两类:围绕点赞行为的关键行为路径(图c.消息列表、图d.点赞列表)、不以点赞为核心目标的其他场景(图a.好友动态、图b.个人主页)。显然,我们应该把围绕点赞行为的关键行为路径作为主要互动场景。并且所有对于点赞的反馈都是直接依附于点赞行为本身的,使反馈行为具有明确的指向性。


适度的语义及交互

前文提到,适度的互动包含“信息适度”和“行为适度”两个方面,落地到产品里,就是定义互动行为的“语义”和“交互行为”。

关于点赞反馈行为的语义表达,我们列举了很多来自现实社交场景中的备选方案,然后以动作的情感程度和成熟程度划分了4个象限,对这系列动作进行归类。

由于点赞行为本身所传达的情感是比较轻量化的,我们更倾向于选择一个轻量化的情感表达方式作为点赞的反馈;同时由于Qzone的用户群体以年轻用户为主,我们还需要选择一个尽量贴合年轻用户感官的语义。因此我们在象限图中初步选中位于左下角的“击掌”和“剪刀手”两个概念。考虑到“击掌”比“剪刀手”具有更为明显的指向性,所以确定“击掌”为最终的落地方案。

同时,因为点赞行为本身是一个及其轻量化的行为,所以我们也用最轻量的交互操作作为它的反馈,只需要一次点击即可。


反馈的及时触达

用户每次收到针对点赞的反馈,都会收到一条与点赞相同的消息提醒,通过push、首页新消息提醒、红点等让用户第一时间知晓。在消息箱列表中,每一条点赞和回赞都成为单独的一条消息,可以让用户最直观的查看并进行反馈。

综上所述,我们确定了整个反馈链的交互框架:

4 情感化的视觉体验打磨

击掌的视觉设计是一个发现问题到解决问不断循环的过程。在这个过程中,推动解决方案逐步升级的核心方法是情感化设计。

击掌动作本身就带有丰富的情绪,而情感化的设计方法可以让情绪的释放更大化,所以在视觉设计阶段,我们以情感化设计作为方法去推进方案逐步完善,最终建立起用户与产品、用户与用户间的情感连接,加深用户对功能的认可和共鸣,带来更加有趣的体验。

情感化设计具象到击掌这个功能,需要解决两个问题:

1.如何唤起用户在现实场景中的击掌记忆;

2.如何符合空间用户群体的基本调性。


唤起用户在现实场景中的击掌记忆

设计之初,我们用平面icon的形式来表现击掌,虽然可以满足基本的功能诉求,但是在视觉体验上乏善可陈,我们又尝试更丰富的各种视觉表现以此引起用户对击掌这个动作的共鸣。

在设计推敲的过程中共经历了三个阶段,在不断发现问题和解决问题的循环中寻找更优的设计方案:

Step 1 | 静态展示到动势塑造

我们用两个手掌叠加的样式构造了击掌icon的基本造型。为了增强用户对于“击掌”的语义感知使用了漫画中常用的动态线条,让用户从视觉上直观感受到这是一个动态的互动行为,而非简单的单方面点亮icon,以此加强用户对击掌这个互动行为的认知。


Step 2 | 2D动画演绎

但是这样的动势表达仍然具有局限性,动态线条的表达方式并不具备普适性,无法保证用户可以理解其中的含义。因此我们在第二个阶段的设计迭代中使用更加直观的动画来帮助用户理解,使其与现实生活中的动作产生呼应。


Step 3 | 3D表现

在解决了语义表达的问题后,我们遇到了一个新的挑战,由于整个动画的展示视范围较小,在视觉表现力上并不理想。因此在第三个设计阶段中,我们通过放大动画、尝试3D表现形式的方法解决上述问题。同时,3D的表现手法还可以通过光影和质感来传达更多信息,更加直观易懂,具有极强的代入感。

符合空间用户群体的基本调性

空间的主流用户以年轻人居多,为了匹配用户群体的基本调性需要打造一个“年轻”、“有趣”的3D击掌动画。为此,我们以“3D”、“young”、“fun”作为关键词收集参考素材,以此建立情绪版。

1 趣味和轻量的质感

如前文所述,对于击掌反馈行为是一个轻量化的互动,为避免3D表现手法过于写实而带来不必要的厚重感,同时也为了增加动画的趣味性,我们选择卡通的手掌造型进行建模;在材质的选择上我们偏向黏土材质,弱化高光,让视觉上体验更加轻量。

2 弹性曲线让动画更生动

现实生活中的击掌动作是一个减速运动,但是为突出击掌的动势和加强趣味性,我们采用了非写实的弹性曲线来打造这个动画,以此加强动画的趣味性。

3 礼花烘托氛围

在后续的产品迭代优化过程中,我们引入了无限击掌的玩法,用户之间可以无限回赞。这就导致动画被重复播放,会加速用户对动画的审美疲劳。所以为配合产品玩法的升级对动画的设计也进行了迭代,基于击掌次数设计了不同的展示彩蛋——在击掌达到特定次数后,会有彩带礼花蹦出,在烘托多次击掌的热情氛围的同时,给用户带来更多趣味和惊喜。

在击掌功能的设计过程中,我们不断在发现问题、解决问题的循环中不断寻求更优解,逐步把一个不到100像素范围内的击掌icon做到更好,以此来唤起用户的对现实击掌的记忆,建立起与用户情感上的连接。

另外,通过趣味性的视觉表现手法不断推敲动画设计,让Qzone的年轻用户不仅从心理上建立连接,在表现层也能感知到符合自身标签的趣味调性。


5 趣味性的玩法升级

除上文提到的彩带礼花以外,在击掌玩法升级过程中,我们也拓展了更多内容:


给用户制造惊喜

随着用户间反复击掌次数变多,粒子效果会不断升级,并加入富有层次的入场效果;而且达到关键击掌次数的时候,会展示击掌的次数,通过用户的成就感来刺激其产生更多的击掌行为。

个性化的延展

为了丰富手掌样式的选择,给用户提供更多样的体验,我们和增值团队一起设计了更多的手掌形式,同时引入一些IP形象,让击掌更能唤起用户的共鸣,也更加有趣。

6 写在最后

击掌这个功能从前期探索到上线和二次迭代经历了很长一段时间,整个项目对设计师来说也是一次收获满满的过程。


创新也可以是从1到N的过程

创新并不都是从0到1从无到有的创新,尤其对于功能和框架体系成熟的产品,盲目的追求创新去改变用户的认知和习惯是不妥的,从小的问题点着手去深挖和思考,找到合适的解决方案并打磨细节给用户创造惊喜,以小博大去做创新也能达到四两拨千斤的效果。


打磨细节创造惊喜

探索和挖掘到一个不错的想法之后,打磨细节也是同样重要的,我们出了各种不同的击掌效果方案,去找到给用户惊喜和操作轻量的平衡,这个功能上线以后我们也一直在关注用户的反馈,从用户反馈中发现还可以做惊喜升级,从一个点出发,把这个点不断的扩充做的更细致和更加闭环。


从生活中来,到生活中去

击掌这个功能之所以有这个好的数据和用户认可度,有一个很重要的原因是因为本身这个行为和现实生活中的场景是相对应的,所以让用户能很快的理解和操作,符合用户真实场景的认知所以学习成本比较低,我们在做设计的时候用生活场景挖掘产品,能达到事倍功半的效果。

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

2020 年值得关注的 9 个交互设计趋势

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在过去两个月,从国外的 Google I/O、Apple WWDC、Facebook 开发者大会,到国内的飞聊、QQ改版、豆瓣FM 6.0,可以看到很多关于交互设计上的趋势。

同时,我从日常的产品体验中,整理了一些思考内容,以下是对 2020 年交互设计趋势的展望。

模态展示

在 iOS 13 中,模态面板采用了新的卡片样式,它占据了屏幕 90% 的面积。模态面板拉起时,原有的页面会有一个纵深效果,以灰色状态显示,防止用户和它们发生交互。模态面板可以通过滑动操作下拉关闭,适用于单手操作,专为大屏服务。

在系统邮件、日历、通讯录、Apple Music、信息 Animoji 等自带应用中,模态面板得到了广泛应用。

△ Apple Music & 邮件

专注下半部分

夸克浏览器是专注下半部分做得最好的一个,夸克并没有像 Safari、Chrome 那样把搜索框放在顶部,而是将整合后的搜索栏放在了用户更容易操作的屏幕下半部分。

分层内容

分层内容是基于动作菜单,弹出分层内容。分层内容的展现形式可以减少页面跳转,让用户保持在最原始的环境中。并且主要操作交互位于界面下半部分,触手可及。

△ Snapchat & Keep

1. 悬停分层

在网易云音乐、即刻、飞聊等应用中,采用了悬停分层。顶部展示的是介绍性内容,随着页面下滑,介绍内容隐藏,同时功能栏将置顶悬停,展示的内容区域大大增加。

△ 网易云音乐 & 即刻

△ Broadcasting iOS App UI Exploration

连续性页面

连续性页面的转换效果可以很好记住产品路线,加强了页面的层级关系。同时,流畅的动画转换效果,带来了更连贯的用户体验。

App Store 和 Behance,以及最近发布的豆瓣 FM 6.0,都采用了这种方式。

△ App Store & Behance

全屏展示

很多App在引导评分样式上,都采用的是系统弹窗。在 Keep App 上,设计了一个全屏展示的评分提示。形式新颖,加上背景图的气氛,让人想去评分的意愿大大增加。

同样,Airbnb 的系统通知提示也是采用的全屏展示,这是一个趋势,值得我们去关注。

△ Airbnb 爱彼迎 & Keep

快捷验证

1. 苹果账号登录

近两年几乎所有的 App 都会推荐首先使用手机号+短信验证码的方式注册/登录,同时也会接入像微信、QQ、支付宝这样的三方登录。

在 WWDC 2019 上,苹果也给我们带来了 「使用苹果账号登录」,几乎所有的苹果设备都会登录 Apple ID。因此,我们可以在不久的将来,通过苹果账号,就可以直接登录所有的 App,是不是很方便?

2. 号码识别

网易易盾的号码识别,可以自动获取当前开启流量的 SIM 卡号码,一键点击即可完成注册、登录操作。减少手机号输入、短信验证码等待时间等传统步骤,提升关键环节转化率。

△ 网易易盾

语音交互

近年来,智能语音技术在很多场景得到了应用,微软的 Cortana,苹果的 Siri、谷歌的 Assistant。在引入深度学习后,语音助手可以在训练中越来越强,吐词更连贯。夸克的语音助手有本地天气、本周本月可视化数据、新闻热点、节日问候、冷知识等功能。

在5月的开发者大会上,谷歌展示了其人工智能与语音识别的 Live Relay 技术。其能够为不便应答电话的用户,提供基于实时语音/文字互转的通话支持。对于聋哑人来说,这绝对是一项实用的功能。

△ Google I/O 2019 Live Relay

事实上,Live Relay 也能帮助到一般人,例如当我们需要接听重要电话,但却无法离开当下所进行事项,Live Relay 在此时就能派上用场,透过输入文字的方式,接听重要来电。

最方便的是,Live Relay 还可整合即时的翻译功能,这在与外国人士沟通时起了很大的帮助作用,可说是另外一种「无障碍功能」。

AR增强现实

1. WANNA KICKS 通过AR技术「试鞋」

通过 AR 增强现实技术与智能手机相机的结合,帮助你看到 YEEZY BOOST 350 等运动鞋「穿」在自己脚上的效果,它甚至还能模拟出鞋子在光线不同环境下的各种效果。

2. 小程序AR+口红试色

昨天,首个支持AR动态试妆的小程序「阿玛尼美妆」同步更新上线。基于小程序基础能力和谷歌 TensorFlow 机器学习开源平台支持,欧莱雅集团开发了 AR 动态试妆能力。相比以前上传照片的试色方式,AR 动态试妆让试色更真实。

AR 使用在网页设计或应用程序领域,它能够自然地将虚拟与现实结合,带来身临其境的新体验。

多窗口预览

△ App Store & QQ

在 QQ 的版本中,列表页面长按消息,会弹出多窗口模式,消息可以来回切换,类似于 iOS 后台切换模式。在会话窗口长按任意地方,也会呼出多窗口模式。

总结

科技发展给设计产生的影响是巨大的,让我更深刻地认识到作为设计师的责任。这些设计趋势有意或无意地将帮助用户得到更好的产品体验。

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

日历

链接

个人资料

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

存档