【澳门威斯尼斯人86829】七何分析法全面分析APP界面动效,设计一个界面动效的时候

坦白来说,虽然我之前在项目里做过一些小动效尝试,但一直没有什么系统的方法和原则指导,大多在原型软件里凭「感觉」随意调调了事,而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研究与实践,对动效设计的价值、原则和实现交付开始有了更多的了解,在本文中浅薄地总结一下。

一、需求背景

APP发现页面数据量大,需设计一个加载动效,提升用户体验。

澳门威斯尼斯人86829 1

@十圆QCee:以前在团队内部做过一个关于动效的分享,当时,是从现实参照、功能性、品牌,等维度进行分析。这次为了更全面的了解界面【澳门威斯尼斯人86829】七何分析法全面分析APP界面动效,设计一个界面动效的时候。动效【澳门威斯尼斯人86829】七何分析法全面分析APP界面动效,设计一个界面动效的时候。,我参考了5W2H分析法。5W2H又称七何分析法,分别是:What、Why、Who、When、Where、How、How
much。

明确价值:动效设计能解决什么问题?

二、设计前的思考

1、商业价值(通过加载动效更好地吸引用户注意力,提升用户对内容的点击探索欲,提升阅读量)

2、用户体验价值(帮助用户理解当前所在的位置,缓解用户的等待情绪,促进用户体验)

3、遵循原则【澳门威斯尼斯人86829】七何分析法全面分析APP界面动效,设计一个界面动效的时候。(动效应该是自然、和谐、可用的)

①物理规律:应该符合现实世界的真实物理效果,努力模仿自然界的物理运动

②品牌调性:应与整个产品的定位、风格相一致

③可用性:不能给用户错误的引导信息,影响用户的操作

4、设计关键点:能否给用户直观的解释当前的位置,动效的趣味性,与发现页面的匹配

5、实现交付(动效是可实现的,应随时与开发人员沟通,保证动效的高度还原)

澳门威斯尼斯人86829 2

设计的本质是解决问题,动效设计自然也不例外,当打算在界面中加入动效元素时,我们应该先明确清楚动效设计的价值所在,而不只是出于对「酷炫」或者「潮流」的盲目追求。从商业价值和体验价值两个角度,大概总结如下:

三、设计过程

1、调研分析

查看大量学习、教育类APP的加载动效

澳门威斯尼斯人86829 3

在查看了今日头条、沪江网校、微信读书等APP之后,分析得出常见加载动效一共分为三种类型:

① 安卓、iOS原生动效

② 品牌logo

③个性化设计

因品牌logo在下拉刷新已用过,加载页面时间较长不适合原生动效,故选择个性化设计

2、创意

设计夹是学习类的APP,之前设计内容加载动效为书本翻页,发现页面为内容的上一页面,是许多成套的系统化内容,动效需保持与课程内容页面的关联性。

创意联想:

(书本 – 内容 – 笔记 – 资料 – 知识文件夹)

澳门威斯尼斯人86829 4

使用场景分析:用户打开发现页面,显示许多套系统化的知识内容。

一套内容 – 一个文件夹

多套内容 – 多个文件夹

成套的内容源源不断的向你输送而来(一个个文件夹向你输送而来)

澳门威斯尼斯人86829 5

WHAT

  1. 商业价值

四、交付开发

由于开发成本的问题,此次设计采用了gif图实现效果。

切图只需要动效的部分即可,需保证动效在界面的中心位置。

澳门威斯尼斯人86829 6

Thanks.

什么是界面动效?大家对其的理解大致是,用户界面上所有运动的效果,也可以视其为界面设计(UI
design)与动态设计(motion design)的交集。

通过动效设计可以更好地吸引用户注意力,提升用户对内容的点击探索欲。比如说,当我们在业务上非常希望用户去触发某个互动入口时,除了在视觉上进行强调,也可以给这个互动入口在合适的时机加上合适的动画(比如从屏幕边缘飞入、旋转出现、发光闪烁等),使之更容易被用户注意到、产生可交互的认知,进而触发交互行为。案例:以下
App 里图片上标签的圆点有扩散动效,点击可以查看所有相关的聚合内容。

具体可以参考下图:The Disciplines of User Experience
Design

App名称:nice

澳门威斯尼斯人86829 7

通过动效设计可以提升用户使用时的舒适度,或者制造一些「小惊喜」让用户产生快感和满足感,使用户感到不那么枯燥,从而达到提升用户使用黏性,更好地留住用户的目的,甚至还可以吸引用户主动进行传播,扩大产品影响力。案例:下面这个
App
中,当完成一件任务的时候,会出现满屏彩纸片飞舞的动效,带给用户惊喜和成就感。

作为多学科交集的界面动效,其设计者可以交互,也可以是UI,甚至很多时候是前端开发直接完成的。而我碰到的很多比较完整的设计团队,专门招的动效设计师,除了做界面动效外,还会做与产品推广相关的motion
graphic。

App名称:微习惯

而我们所要讲解的界面动效(UI motion)区别于motion graphic
最大的差别,就是界面动效需要以用户体验与界面设计为大前提,来进行动效设计。所以下面很多观点也是基于此来进行说明的。

通过动效设计可以辅助视觉元素更好地传达产品品牌味道,成为产品设计语言的重要构成之一,加强与竞品的差异化,强化用户对产品品牌的感知。案例:Google
的 Material Design。

另一个值得注意的是,界面动效在设计师设计完成后,需要开发实现才能与用户见面。而不像MG动画,直接由设计师输出。

图片来源:

WHY

具体到指标上,可以通过 UV
点击率、留存率、满意度、认知度、舆情反馈等来进行综合验证和衡量,评估动效设计是否达到了效果。

为什么需要界面动效?在我的理解里这是5W里最重要的一点。设计交流网站上有很多纯粹追求酷炫,或为了动起来而做的动效。他们如果只是为了展示设计技术,或者博得关注自然无妨。但是,界面动效毕竟要在真实产品中展示的,其目的自然需要符合产品的整体诉求。这里的目的,我总结了两方面:

  1. 体验价值

1,保证产品的流畅体验。产品只要跟用户有互动,就会有状态的变化,而绝大多数的变化都是由界面视觉展示的。这时,界面上的状态变化,是否有过渡,过渡的是否流畅,就直接的影响着用户的感受。

动效设计可以描述当前情境,更清晰地体现内容元素之间的逻辑和层级关系,帮助用户理解上下文、知道当前所在位置。

澳门威斯尼斯人86829 8

图片来源:

2.传递产品信息。动效其实跟交互,跟UI一样,都是传递产品信息的一种渠道。而这里的信息会有很多可能,可以是:趋势、来源、去向、结构、情感、属性,等。运用合理的动效传递信息,能大大增强产品的表现力,同时也能减少用户的理解成本。

动效设计可以引导用户的操作浏览,给用户以明确的方向感,而不是对下一步该看什么、做什么感到不知所措。

澳门威斯尼斯人86829 9

图片来源:

WHO

动效设计可以促进用户的情感体验,缓解用户的焦虑情绪(比如等待期间)、制造惊喜等。

这里的Who,不是指的人,而是表示的动效的对象。这个对象又是一个或多个界面元素组成。单个元素,大家比较好理解。多个元素的动效,除了表现元素属性变化以外,还会将这些元素之前的关系传递出来:譬如:主次、联动、并列先后、因果,等。

图片来源:

澳门威斯尼斯人86829 10

动效设计提供当前的状态反馈,加强用户对操作行为的感知,给用户以可控的感觉。

WHEN

图片来源:

使用动效的时机,对于动效来说,是非常基础的存在。用的好或不好,直接决定用户体验的感受。首先是实时性,动效作为人机交互反馈过程中的重要表现方式,必须做到快速,明确的表达当前的状态。这就类似,你跟人交谈,对方对你所说,完全没有回应,无动于衷。这会让你感到不确定,不认同甚至是疏远。

遵循原则:动效应该是自然、和谐、可用的

澳门威斯尼斯人86829 11

不是简单地动起来、或者凭感觉调两下就叫动效设计,动效设计应该有其基础原则。在此主要从物理规律、品牌调性、可用性三方面进行总结。

其次是动效过载,动效与界面视觉一样,当出现大量过于复杂或者重复的效果时,都会让人视觉疲劳,抓不住要点。而且动态的画面会让这种感受更加强烈。

  1. 物理规律

澳门威斯尼斯人86829 12

相关文章

admin

网站地图xml地图