专栏首页理论坞关于交互动效视觉设计的些许笔记

关于交互动效视觉设计的些许笔记

1、动效设计的三个原则

  • 有序一致(运动规律、交互与动效的衔接)
  • 产品调性(动效是否符合产品调性?整体稳or惊艳)
  • 愉悦用户(让用户感到愉悦、惊喜、眼前一亮)

2、交互意义

动效在整体上大部的稳的、简洁的,在细节上是可以风骚的

要考虑动效对用户使用是否有用,有何交互意义?

例:下拉刷新(也是动效设计的一种设计模式)

三个状态 :1、开始下拉

2、下拉刷新的条件触发成功 正在刷新

3、下拉刷新完成 (下拉刷新效果去掉 同时出现新的内容)

交互意义:让用户在下拉刷新时 不会焦虑

3、要有原型

静态原型、线框图、低保真原型——交互设计师

可交互原型——动效设计师

动效设计 不是looks like 看起来像

而是how it works 它是如何工作的

放在浏览器/手机中时,是什么样的感觉

4、了解开发

设计之后给开发两份东西:展示稿(ae)和交互原型

dribbble推荐动效团队:yalantis ramotion

要关心动画链的制作,完成第一个动画之后完成第二个,完成第二个之后完成第三个...

例如:iOS 自带的动画语法、知识

Ios自带的弹性动画、缓动动画、关键帧动画、路径动画、粒子动画、

逐帧动画

安卓 三种:view 补间动画

property 属性动画

drawable 逐帧动画

均可添加贝塞尔差值、加曲线

5、了解开发-标注

标注:运动规律、那些值产生了变化(加速减速、变化值)、动效时间

差值器速查应用

6、了解开发-第三方动画库

iOS第三方弹性demo(cancel animation)、pop弹性demo、spring demo

7、工具思想

8、时间轴工具

时间与变化/专注效果 动画设计师

可添加各种效果 精雕细琢 运动曲线 模拟物理现实。让动效看起来更自然与舒服

所见即所得,所见又不是所得;是效果而不是手机上可交互的

Ae 案例:dribbble 上的sergey valiukh。 cuberto。 jon lewis。

优点:动画曲线 自由度高

缺点:开发标注成本大 在曲线上与开发自带的曲线契合

9、节点信号流工具

专注逻辑、交互 动效设计师

  1. quartz composer (仅次于AE)例sam thibault。 anton kartashov。 george otsubo
  2. form 例adam debreczeni。merine。

10、编码实现

最佳效果、最难学习 动效设计师

  1. xcode 例meng to。yalantis。
  2. android studio 例john smith。
  3. framer studio 例jorn van dijk。Jonas treub。jorn van dijk。

11、简单可交互软件

快速实现交互流程 视觉、产品、交互设计师

keynote 例andrew cohen

plxate studio 例oliur

marvel 例virgil pana

高保真原型的需求:

  1. 效果吸引
  2. 非常逼真的交互
  3. 定制性非常强

根据实际工作选择工具

12、动态设计流程

交互设计——视觉设计·低保真原型——动态设计——可交互原型——标注——开发

本文分享自微信公众号 - 设计谜(UXMystery),作者:雨相三千

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用 Python 语言来写游戏

    每个程序员差不多都是从计算机爱好者开始的,尤其是那些令人心醉神迷的电脑游戏,不仅造就了整个游戏产业,推动了计算机行业软硬件的升级,而且吸引了大量的爱好者最终加入...

    宇相
  • 其实,设计这份工作你能做一辈子吗?

    最初的梦想,会不会消磨殆尽,每日触摸着骨感的现实,会不会连热情也逐渐远去。转行——会不会不时跃上心头,挥之不去。或者这是任何一个行业迷茫从业者的困扰,而对于设计...

    宇相
  • 25个未来的设计趋势

    全球最好的设计公司创意总监和其他几位设计师一起,给出了关于未来的 25 个设计趋势

    宇相
  • 简单的条形图动画

    寒假偷了个小懒,把法定的初七上班拖到了元宵节,又抓住机会拖过了情人节,这种无视规矩挖坑不填的做法让我身心愉悦,所以乘着自己心情好决定恢复更新。

    卤代烃
  • 人工智能帮助打击盗猎者

    盗猎者每天大约会杀害96头非洲大象。而生态环保人士发出警告,认为如果不扭转局势,这种标志性的动物可能在未来几十年就惨遭灭绝。但现在,科学家希望通过一种新的人工智...

    人工智能快报
  • 使用Keras 构建基于 LSTM 模型的故事生成器

    LSTM (Long Short Term Memory, 长短期神经网络)是一种特殊的循环神经网络(RNN, Recurrent neural network...

    deephub
  • 前端图片优化机制

    60%的网站流量来自图片,图片优化可以大幅影响网站流量。 一、现有web图片格式 图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场...

    IMWeb前端团队
  • 前端图片优化机制

    jpeg优势: 非常通用,JPEG在色调及颜色平滑变化的相片或是写实绘画(painting)上可以达到它最佳的效果。 jpeg劣势: 它并...

    IMWeb前端团队
  • Spring.NET的AOP怎么玩

    之前公司一直不让使用第三方组件,因此AOP方面的组建一直不能使用,很多面向切面的应用只能通过自己写一些GenericMethod的泛型方法来解决,有一些呆板。由...

    用户1216676
  • css3动画

    image.png 不用javascript也可以做互动动画。

    前朝楚水

扫码关注云+社区

领取腾讯云代金券