移动应用丰富动效的6点原则

  如果想让你的移动应用更活泼更灵动,丰富的动效是不可少的,丰富的动效可以让你的应用更具活力,充满生机;丰富的动效可以让你的应用彰显效率,提升品质感;丰富的动效可以让你的应用充满魅力,引人探索;丰富的动效可以让你的应用减少焦虑,消除等待感;丰富的动效可以让你的应用充满韵味,有节奏感;丰富的动效可以让你的应用有出奇的信息组织,整洁高效。

  这里主要介绍六种简单通用的方式——转场、邀请、过渡、反馈、缩放、吸附。

  原则一:转场


  由于手机屏幕空间有限,更多的内容会被隐藏在屏幕后边,或者屏幕的左边、右边、下边,转场动效能帮助应用营造一种空间方位感。转场动效是目前应用最多的动效种类,毕竟iPhone、Andoird、Wp7都有提供一些官方的动效的API,一些简单的动效可以直接调用官方API来完成。Android官方动效8个,iPhone官方动效19个,WP7官方动效6个,具体几个平台的动效有哪些差异,后续有机会分享。

  原则二:邀请


  直接提供邀请,告知用户可以做的事,效果最直观,引导性最好。但是要注意操作邀请一定是需要突出的主要功能或任务,不能什么功能都邀请用户试用一下,要知道,大部分用户只用到你应用里的20%就算不错了。邀请不能过于强制,如非必要,中断用户正在执行的操作是很不礼貌的行为。

  原则三:过渡


  当应用正在加载数据的时候,一定要给予过渡,让用户知道应用正在努力工作,系统级的过渡分为两种——进度条和菊花转,进度条是用在可预知完成进度和剩余时间的情况下;菊花转是用在无法预知剩余时间的情况下。iPhone上照片转发邮件、邮件从收件箱移动到垃圾邮件都有很好的过渡动效,让用户知道当前从一个应用跳转到另外一个应用,知道从一个文件夹跳转到另外一个文件夹,避免了迷路的麻烦。

  不是所有情况下,都要清晰的告知用户当然任务的加载进度的,比如iPhone自带的短信应用,发送短信的时候有一个进度条,本意是好的,让用户知道短信发送的进度。但是由于进度条会给人造成一种明显的等待感,而且用户担心离开当前界面,短信就会发送失败(用户怎么知道同步和异步?),所以只能傻等在那里。其实完全可以让短信后台发送,只要保证发送失败有办法告知用户就可以。同理,那些图片分享应用也是如此,后台上传就可以了。

  原则四:反馈


  当任务成功或失败之后,需要有办法告知用户。比如Reeder客户端,就会在你点了Unread后,立刻弹层告诉你已标为Unread,在你点了Statted后,立刻弹层告诉你,已经Starred。反馈需要在合适的时间引起用户的注意,简洁明了的传达操作的结果,

  如果是成功类的提醒,往往只是告知状态就可以了,用户无需执行操作,反馈就可以自己消失。而如果是失败类的反馈,则需要引起关注,可以相对强势一些,反馈出现的位置可以考虑相关性,比如帐号错误可以出现在帐号旁边,密码错误可以出现在密码旁边,采用相对警示的颜色和设计风格。

  原则五:缩放


  在一寸土一寸金的手机界面上耕耘,恨不得盖个复式小洋楼,一行当两行用。其实不是不可以,只需要一个设计思想——盒子主义。每一个功能模块都是一个盒子,在你不需要用到的时候,它只是一个盒子,上面贴着标签,你知道里面装的是袜子,当你需要的时候,你就可以打开盒子,露出里面很多很多双袜子。

  比如Bluga这个输入框,当你不需要输入的时候,它看起来就是一个输入的入口,但是当你点击的时候,输入的辅助信息都出来了,更大的文字撰写框、位置、图片、发送按钮,你可以打开盒子,编辑一条丰富的消息。

  原则六:吸附


  吸附是网格系统中一个很具有美学色彩的设计,当你拖拽着一个应用切换位置的时候,这个应用会被自动吸附到对齐网格的位置,保证界面整洁利索(不像Nokia的某些手机,Widget可以满屏幕拖拽,跟我凌乱的桌面一样);当你拖拽一个应用到另外一个应用上的时候,就可以变成一个文件夹,这里也是通过文件夹的样式和吸附的效果,让用户明白建立文件夹的交互的。

  任何的动效,都需要经过场景和需求的思考, 在什么样的特殊情景下,解决了什么样的问题,不要为了动而动,WP7的动效,恐怕看久了都会腻吧。

  除了界面本身的动效之外,还需要包含震动、声音、手势等等因素一起去考虑,好的动效,配合着合适的音效、合理的手势,才是最自然的交互方式。

  从今天开始,努力提升你的应用的品质,让它动起来吧!

  作者:elya妞

  文章来源:elya.cc

时间: 2024-10-29 04:48:53

移动应用丰富动效的6点原则的相关文章

如何做好产品动效系列:动效与品牌设计原则

如 何做好产品动效系列:动效与品牌设计原则 时间:2014-11-14 09:46 来源:设计达人 作者:佚名 一个新的设计风格的确立一定会提出他特 有的设计原则.而如今设计原则越来越多的关注到了动效的定义.甚至在Android L的Material Design中直接将动效写入的设计原则中:Motion provides meaning (动画表达含义).这里我们就通过一些业界成熟案例来简单说明下动效是怎么在设计原则的基础上定义出来的. 首先,我们看下iOS7上的案例.众所周知,iOS7相对于

PS教你轻松6步把GIF动效图嵌入到手机模版

  很多设计师可以做出动效Gif,但不知道如何嵌入到模版里如下图这样展示: 昨天有个设计妹子问我这个问题,既然是妹子那我就花五分钟教你嵌入Gif到模板. 1. 首先利用Hype 或者Pixate做出一张动态的Gif 图如下: (注:AE 可以保存成.Mp4 ,Pixate 可以录屏,Hype可以直接转换成Gif,视频格式可以通过软件或Photoshop转换成Gif ,总之就是做出你想要的动效Gif) 2. 用Photoshop打开Gif 图片,窗口-时间轴面板,单击选择将帧拼合到图层,这样就把所

动效设计如何从四个维度吸引你的注意力?

  动效设计正当红火,不过有很多同学担心驾驭不了它,容易被它喧宾夺主,今天百度的同学就从注意力这个角度给同学们聊聊,动效能从哪四个维度来吸引用户注意力,针对这几个维度,设计师该如何运用好动效设计,好文一篇,点赞别忘了艾特小伙伴. 近年来,随着ios和android系统对于动效设计的带动效应,多数产品对于动效设计也越来越重视,从app引导页到动作反馈,从官网介绍到hover效果,动效设计似乎已经成为一个成功产品的标配.但是动效也不是越绚丽越好,过于绚丽的动效对于我们的设计目标来说也许会适得其反,用

QC+ORIGAMI动效设计初级篇之微信消息页

  最终效果如下图,暂时先忽略这AV般的画质--(录屏转Gif搞死我了) 在正式做动效之前,做好前戏尤为重要--对动效进行分析并将其分解. 你看,我是这样拆解这个动效的: 点击微信消息列表中的任意项,该项底色加深; 消息对话页从右至左滑入屏幕; 在消息对话页面,向右划动则返回上一级; 总得来说,就这三个步骤,But!像我这样心思缜密的骚年就会发现这其中还包含着许多细微的效果: 按住消息列表项但不松手,该项则一直保持选中态也就是底色加深,直待松手,消息对话页面才向左滑入; 消息页面从右至左滑入时,

绝佳的网站动效设计案例欣赏

  如今很多网站的动效设计已经从简单的下拉菜单转换到富有吸引力的动画背景和视觉滚动差.好的动效设计可以让网站变得非常有趣,忍不住多停留一会.

10个值得前端收藏的CSS3动效库

  现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用.我一般会在网站中加入一些简单而一致的动效,我所用的技术则是用SASS +bourbon 来生成出那些基于CSS3的动画效果来.但如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话,你可以参考并使用下面的这10个优秀动效库(工具). 1. Animate.css Animate.css是我比较喜欢的一个CSS3动效库,非常适合那些对CSS3动画效果不

你不知道的刷屏级H5排版以及动效

  如果细心地观察那些阅读转发破万的H5,它们除了本身极具特色的创意之外,排版与动效功能的应用也是恰到好处.所以今天我们就分别从[排版].[动效]两方面来给大家阐释,如何让自己创作的H5更具传播性. Part 1 排版篇 生长在移动端的H5广告相较于其他广告,充分地暴露了屏幕小.层级深.较难在保持内容统一性的前提下包含众多且交互复杂东西等缺点,也因此可能会影响用户在阅览H5时对有效信息的获取能力.所以,利用设计在最短的时间内引导用户接收到有效信息变得更加重要. 那么,怎样才能更有效地引导用户接受

由浅入深科普最常用的八种HTML 5动效制作手法

  一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造. 近两年,小到loading动画,表单动效,大到各式各样H5运营页的炫酷展现,"动效设计"一词可谓是火遍大江南北,而动效设计早已成为一名合格设计师必需有所知晓的领域.本文将通过一些案例,和大家一同挖掘几种常见的H5动效制作手法. 我们由浅入深来挖掘这动效制作的秘密,一个入门级的小问题:看上图这几个动画例子,大家是否能说出这动画是如何制作出来的呢?而又是如何在网页之上

Google发布了新版Material Design动效指南

  Material Motion 在Material Design的世界中,动效用一种优雅.流动的方式来描述空间关系.功能.和意向. 为什么说动效很重要? 动效可以向我们展示一个app是如何构成和用途. 动效可以做到: ● 不同视图之间的焦点引导 ● 当用户完成了一个手势后,提示用户将会发生什么 ● 明确元素之间的层级和空间关系 ● 当程序在后台运行时,分散用户的注意力(例如获取内容或载入下一个视图) ● 润色整个app:个性化.令人愉悦 如何制作材料设计的动效? 材料设计的运动吸取了一些真实