全国免费咨询热线:400-611-9921
 
用户界面设计:为什么动效重要?

2015-11-02

843

在2015年澳大利亚CSSConf上 ,Benjamin De Cock,一个在动效设计上有优先权的交互设计师,分享了多年来的洞见 。他现在是一个在Stripe工作的用户界面设计师,Stripe是一个非常流行的、支付处理平台。Benjamin De Cock,提供了超越UI设计的领域,他拓展和提供了动效设计的最佳练习。

在2015年澳大利亚CSSConf上 ,Benjamin De Cock,一个在动效设计上有优先权的交互设计师,分享了多年来的洞见 。他现在是一个在Stripe工作的用户界面设计师,Stripe是一个非常流行的、支付处理平台。Benjamin De Cock,提供了超越UI设计的领域,他拓展和提供了动效设计的最佳练习。

提供最好的练习

在早期我们探索过用户界面的过于浮夸的动效后,De Cock 开始欣赏沉稳的设计传递出来的力量。这是那些发现动效设计有趣的人非常熟悉的过程。最初,你想让一切动起来,却从来不问问自己是否应该动。

21495040U-0

所以,在什么时候你应该让一些东西动起来呢?

好的动效设计当然是经过交互经验专业的打磨,De Cock 相信,动效UI设计的重要性有两大主要原因:

  1. 动效设计帮助用户了解控件之间的交互关系。
  2. 动效设计能让你的程序感觉更快、更流畅。

2149503N1-1

在Stripe结账APP 中,点击“记住我”,会激活一个全新的界面设计,De Cock 非常谨慎的设计每一个UI控件,以确保用户没有迷失在激活前和激活后这两个界面中。

在另一个例子中, De Cock 揭示了一个谎言,那就是Stripe 告诉用户,他们什么时候检查了自己的账户。

2149503014-2

虽然它看起来很像服务器进行了处理信息,并且通过验证成功发送了短信,在现实中,是动效设计支付了这个时间。

Stripe没有任何渠道可以知道短息是不是已经收到了,只是把动效的时间设置的足够长,长到短信已经被接受的概率很高的时候。

四条网页设计规则

对于用户界面设计来说,性能和速度就是一切。就像De Cock 说的那样:

如果你的动效设计有一部分,没有以每秒60帧的速度运转,这基本上会毁了整个动效的流畅感——不要只为了特殊的部分做动效。很不幸,人类的眼睛对这些不流畅是极度敏感的。

De Cock 已经拓展出UI动效设计的四条简单规则,他照顾到了现有的实时渲染的局限性。

动效设计包括不透明度和其他属性转换的设计(动效的其他属性,像是宽高,要求很多控件推动力量,并且可以降低控件速度)

  1. 保持动效迅速(一般大约300ms)
  2. 保持动画独立性
  3. 保持使用自定义曲线
  4. 最后一条规则可以应用于所有一般的动效设计中, De Cock建议避免使用保存在软件中自带的动画曲线,取而代之的是你自己创造的动画曲线。在播放动画设计的世界中,精通图形编辑(在任何动效包装中,不仅仅是AE),并且学习如何从数学上掌握你的动效,这是突破普通动效设计技巧的关键。

拟物化设计和动效

拟物化设计是在数字界面中,模拟现实世界物品的外观和感觉的实践。Apple 曾经有很长一段时间对拟物化设计十分青睐,在早期设计中,像日历和找到我的朋友的app设计就是证据。

2149501O5-3

仿皮革纹理和照片般逼真的拼接都是拟物化设计的元素,他们试图在数码环境中创造模拟现实世界材质的错觉。而在最近几年,设计师已经拒绝拟物化设计,像谷歌的Material Design, 转移到“扁平化”的设计语言中。

但是De Cock 警告我们说,我们不应该不分良莠,好坏一起丢掉。

在现实世界中,显然没有什么是平坦的。而我认为在软件设计中,丢失这种元素是一种十分可惜的过度简化。

3D实际上帮助了实际上有助于理解对象的行为以及它们之间的相互关系。因此,拟物化设计用来激发我们现实世界中的灵感,以构建我们的界面设计,似乎是一个很好的办法。

优秀的UI动效设计可以是固有的拟物化设计,他可以达到用户熟悉的感觉,因为它使用的是真实世界的物理学原理。而物理是永恒的——不是一个路过的风格。

21495011a-4

举个例子,当你操作错误的时候,在Stripe中这种微妙地3D侧旋的交互响应,就像是现实世界中一个人在摇头一样。当你使用拟物化设计的时候这几乎是潜意识的为APP植入人性化动效,在潜意识层面增加和蔼和友善。

掀开这层迷纱

如果你想了解CSS动效的真相,你可以观看整个演讲。大约在10分钟左右,他开始讲解产生微妙地、有效的动效,如何通过具体的代码操作,以达到最好的性能展示。他同时呼吁要拥抱JavaScript ,JavaScript 协调基于CSS的呈现,并且作为触发扳机和事件框架。


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
关键词:移动网站建设,高端网站建设
热门标签
营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭