您好,欢迎来到上海分类信息网
免费发信息

「科普」动效设计Motion Design

2024-5-24 14:30:09发布4次查看ip:发布人:
优秀的设计能力,都是从提升审美开始的。
今天会开启一个新专栏,每天更新优秀的动效设计,让大家了解最新的交互设计和动效设计。
提高审美,从现在开始。
先看几个 google 和intercom 的动效设计。
众所周知,当下的设计趋势,动效的比例越来越重了,用户的设计、审美素质也变得越来越高。
对界面的态度,从最开始的可用、能用,慢慢开始发展到今天的易用和好用,期间不仅仅是设计师在界面元素方面进行了长期的设计革命,在设计模式趋于稳定的前提下,将更大的注意力从配色上,转移到了动效设计,这就是当下所流行的动效设计(motion design)。
在这几年里,交互设计这个名词频繁的出现在各大设计和产品领域,也是因为乔布斯在发布了具有严重革命性和影响力的移动设备,iphone。大家对交互设计的理解变得越来越深可,随之很多领域都引入了这种以『用户为中心』的设计理念,巧妙的提升了用户在使用自家产品的用户体验。
motion design 在一定程度上,让使用产品的过程中,大大提升了趣味性,一个动画效果,让加载或等待变得更加容易被接受,而不再像之前那种毫无感情冷冰的文字提示,更有甚者,将等待直接做成了类似游戏的内容,大大减少了用户在使用中因为等待页面或其他内容时,跳出或退出产品的几率。
在ui设计领域,动态设计(motion design)因为google的参与开始被诸多人士关注,其原因在于能够打造出生动有趣的效果的能力。应用中所有元素都按序排列,而动态设计则便于引导用户操作。每一个按键的点触,每一个屏幕的转换,都讲述着生动鲜活的故事,如创建和删除条目的动画效果。
常见应用场景
删除
删除条目等同于破坏应用中原有的元素,如果单单让它消失就太无趣了。难道忍心直接把它扔出屏幕,任其在手机数据库的角落里挨灰吗?——可见制造有趣的动画效果必不可少。
创建
创建条目也应是生动有趣的。既然让它存在,何不好好设计下“出场方式”?可以让新条目“蹦出来”,“弹出来”,但注意别做过了头。微妙而不失考量才能创造最好的动画
动态设计难道单单是添加“砰砰跳跳”的效果吗?才没这么简单。动态效果不但对于界面设计越发重要,还成为了ui整体的驱动力。你能想象facebook的设计者以静态布局的方式展示他们的ios新闻聚合阅读应用paper app吗?这也太逊了点。当所有元素都以动态效果呈现时,界面才有了意义。从这个层面来说,动画就是ui的精髓。
加强空间关系
每个应用都需要一个主屏作为其他界面的窗口。如果一个界面从左边滑出,从底部消失,还能从底部把它找回来吗?它被彻底删掉了吗?以ios播客应用casts为例,应用左边的结构将“现在播放(now playing)”的界面从底部带出,然后向前(用户方向)飞去、消失,再从屏幕底部重现。
有点摸不着头脑,是吧?现在比较一下几周前开始在应用里使用的新动态语言。保持进入/推出动画前后协调,用户就能轻松找到需要的界面。
动态确认
动态设计能够提升用户的操作体验。当删除一个对象时,它可以呈现模糊着消失,或者“z”字飞出的动态效果。发送邮件时,可以看到屏幕上方的“发送动态进程”,提升了用户的操作体验。
密码输入也可以借助动态设计来提升操作体验。如果密码正确,则呈现一个字符“点头”的动画效果;如果密码错误,则会出现字符“崩塌”的动画效果。这些成为了用户确认密码输入正确与否的一手反馈。“密码输入错误”的文字提示被动画代替。在某些情况下,甚至可以完全摒弃文字提示,依赖动画来完成反馈。
掩饰数据加载延迟
需要花时间加载一些数据,但又不想让用户察觉?如果时间不长,那么有趣的动画效果完全能够掩饰数据加载延迟的问题。当上网加载一个音频文件时,加载数据总要花点时间。
选择播放键后与其直接进入加载序列,不如创建一个简单的动画效果,转换为暂停键图标。如果文件能及时加载下来,那么用户是不会察觉到延迟问题的。动画的作用是在加载数据时暂时转移用户的注意力。避免呈现任何加载状态进度条可以制造应用高效快速的印象。
同样的加载动画风格呈现在即时、短时、长时加载中。中期动画能够在3/4秒的时间内完成加载,无需“加载”动画。
创建动态语言
为应用创建动态语言可以提升品牌形象,打造独树一帜的印象。动态语言本身是否灵活有趣、安全详尽、流畅专业呢?动画效果为设计和品牌锦上添花,但注意别落入刻意模仿其他创意设计的陷阱。
进行ui设计时须将以上几点铭记在心。动态设计能有力提升用户体验,让密码输入或滚动列表等单调乏味的操作变得鲜活有趣起来。很多人没事儿喜欢解锁iphone或滚动信息列表,其实仅仅是享受动态设计的乐趣而已,有时甚至成为了一种无意识的习惯。用户期待的是能够敏捷反应的流畅界面。当设计能够灵活反应时,就好像是用新的生命来建立了深层联系。
当然,真正的动效设计所涉及的内容还非常的多,但作为科普,大家可以想想上面说的这些场景,在日常自己的使用中,有哪些类似的呢?
欢迎留言探讨
该用户其它信息

VIP推荐

上海分类信息网-上海免费发布信息-上海新闻网