最专业的八方代购网站源码!

资讯热点
7 GIF传说证明动态设计并不复杂

发布时间:2020-2-18 分类: 电商动态

本文希望通过七个GIF传说证明动态设计并不复杂。只需对关键点添加一点改动就可以大大增强效果。

通过这些示例,您将发现状态连续性,元素相关性以及用户注意力控制的重要性。

在动态设计中,我参考了设计规范:Material Motion,IBM的动画原理,运动宣言中的UX。

我使用的工具是InVision Studio的早期版本,您可以从Dropbox下载源文件。

滑动标签

左边的内容区域由渐变改变;右侧的内容区域使用选项卡

下的栏进行刷卡

优秀的效果将使用渐变切换页面元素

切换时,出色的运动将保持状态连续性

设计选项卡或多级菜单时,可以尝试将界面元素的位置与其打开方式相关联。除了可见性之外,这种运动还可以涉及增加位置。这样,滑动手势也可以。

关联卡元素

左边新打开的页面滑出;右侧新打开的页面从前一张卡片扩展

好动作将使用幻灯片打开新页面

优秀的运动将关联不同状态下的相同元素

在设计状态转换时,您可以查看两者之间是否存在相同的元素,如果是,则可以关联它们。当InVision Studio创建Motion转换时,两个屏幕之间的重复元素会自动链接,这一特性使原型运动更加简单。

如果你想知道可以使用哪些效果,我建议你去《十二条动效体验原则》(Z Yuhan:我刚刚翻译了它)。在上面给出的示例中,使用了掩码,转换,父子关系和缓动原则。

瀑布流动效果

左边的卡片显示滑动和渐变;右图的基本效果是一样的,但每张卡的延迟时间不同

优秀的动作通过控制所有元素的位置和可见性来显示加载过程。

优秀的动作将错开不同元素和群体的外观

在均匀缓和和速度的前提下,通过延迟设置实现瀑布效果,确保一致的视觉体验。无需为每个窗口小部件设置延迟,确保正确的分组粒度使运动更有效,更快速。 Google建议瀑布效果元素的显示间隔不超过20毫秒。更多示例:Material Motion中的编排原则。

元素之间的力量

左侧的卡片浮动在页面顶部;当右边的卡很大时,推开周围的元素

优秀的动态控制元素本身会发生变化

优秀动态注意力元素对周围环境的影响

体现元素之间的力量,即相互吸引或排斥。如果您想了解更多信息,可以访问Material Design的Aware动作。

让菜单“ldquo;成长”出来

左边的菜单会从下到上弹出;右侧的菜单将从按钮> ;; grow>

弹出

优秀的运动使元素出现在触发方向

出色的活力使元素能够从父母中生长出来。

使用按钮显示状态

左图显示使用按钮外部文本的状态;右图显示使用按钮框本身的状态

好动作将提示放在按钮附近

使用按钮本身显示状态变化的优秀动作

尝试使用按钮显示状态更改,例如使用按钮文本显示提示,或使用按钮框显示进度。无论哪种方式,目标是充分利用用户的注意力(Z Yuhan:了解更多,看看《谷歌 Material Design 从这些方面打破了我思维局限》的“不是视线跟踪元素,而是元素跟踪视线”)。

认真对待这件事

左图使用颜色和位置使元素脱颖而出;正确的图像使用微动画来吸引用户的注意力

优秀的设计突出了颜色,大小和位置的重要元素

优秀的设计使用动态效果吸引用户注意力,从而避免破坏已建立的框架

当用户需要执行一些重要操作时,请尝试使用动态效果来吸引他们的注意力。根据重要性确定所需的动态(例如大小,颜色和速度)。但请确保仅在重要操作上使用它——因为你使用的越多越弱;…用户会更烦人。

总结

我希望这些例子可以帮助您做出动作设计的决策。借助InVision Studio等新的动态原型制作工具,创意互动领域将迅速变得更好,并且不要忘记对运动的关注。

在设计时,不要忘记使用动态来解释状态变化,正确吸引用户的注意力,解释元素关联,并为产品添加一点乐趣和个性。上述设计原则足以将我们的动力从快速有效的卓越提升到卓越。

让我们愉快地创造动态效果!

原始地址:优秀的UI动画提示

原作者:哟嘿,小朋友,我是设计师和联合创始人Pablo Stanley,Carbon Health of。我正在创作一个名为The Design Team的幽默漫画故事,并在Twitter上发布一些与设计相关的内容。您还可以查看我的YouTube频道,Sketch Together,其中有很多设计教程。感谢您阅读(西班牙语)。

译者:Z Yuhan,Goose Factory·交互设计

翻译地址:https://zhuanlan.zhihu.com/p/35204204?group_id=964100644554166272

本文由@Z Y​​uhan授权,未经作者许可复制。

该地图来自Pexels,基于CC0协议

« 最全面的动态效果着陆方法(第1部分):界面设计中良好动态的影响是什么? | 关键词分析:研究百度需求图挖掘关键词 »