以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器

用户界面设计中的动画一直是这几年热议的话题,尤其活跃在概念动画领域。它为设计师提供创造性实验并推动UI动画的发展。

在Tubik,我们已经分享了关于UI动画对APP应用和网站的好处的文章。今天,让我们与Tubik动画设计师Kirill Yerokhin继续讨论概念动画是如何推进产品的成功。

什么是概念动画?

概念动画是属于概念艺术领域的。它是一种运动设计,用于在将特定想法投入真实产品之前传达它。在用户界面设计中,我们可以看到概念动画的各种使用场景,用于交互,过渡,控件的操作,系统反馈的动画标记等。动画设计师会使用各种工具来实现它,比如Adobe After Effects,Principle,Figma和InVision。

为什么UI设计需要概念动画?

这是一个颇有争议的问题。概念性动画试图超越已有的限制和规则,以及现成的解决方案和经过精心研究的方法。这种动画对于技术实现来说可能看起来不真实,不必要或不可能。

但是,静态设计(字形,图标,改变颜色和控件的形状或整个界面)和UI的动画提供了让应用程序从类似应用程序(有时看起来像克隆)中脱颖而出的方法。

用于移动游戏交互的动画概念的示例(图一)

有报告称,所有开发人员都讨厌概念动画并且从不想实现,这并不是真的,至少在设计中不是。实际上,在其他创造性的领域中,有些人认为创新是难以置信的,不可能的。而其他人则尽力而为,找到新方式和方法来帮助人们解决新问题。

需求决定供应。一旦“市场”看到一个新的设计概念,尤其是动画,设计师们就会寻求实现它的方法并在现实世界中使用它。此时,设计师思想的产物不再是一个概念。在Tubik,我们有很多成功的案例,即使是非常复杂的动画也能由第三方开发人员成功编码实现。

实践表明,在技术方面,概念动画的实现是一个花时间的工作,但不是不能实现。

动画概念试验更新的材料设计(图二)

UI动画概念的示例

滚动项目列表

第一个示例包含与项目列表的交互:左侧变体只是将所有列表向上移动,但是右侧变体模仿拉动卡片设计的。第二个变体看起来很生动,为滚动过程增添了一些乐趣。另一件有趣的事情是,正确的概念会在卡片之间产生更多空间的视觉错觉。

从列表转换到项目

这是另一个例子:左侧选项显示从列表或菜单转换到特定项目屏幕的基本方式,而右侧选项的流程更加动态。

打开侧边菜单

概念动画会让人觉得更加生动且富有生命力,比如打开侧面菜单等基本操作。设计师使用渐进流来构造物体,使过程看起来更优雅。

现实界面中的UI动画概念

概念动画是用户界面设计的创造性阶段之一, 动画设计师可以提供多种选择与客户和开发人员讨论。以下是Kirill与UI设计人员合作设计的一些示例。

Finance App动画创建了从饼图到应用颜色标记的列表的时尚过渡

Music News App动画在从类别屏幕到列表的过渡中使用形状和线条

Home Budget app中的UI动画概念增加了打开汉堡包菜单的动态

Business Card 中的UI概念模仿从配置文件头像拉出卡的有趣

Calendar app的动画概念设置从日历屏幕到计划屏幕的优雅过渡

还有一个动画为侧面菜单的交互增添乐趣并支持视觉层次结构

UI动画概念的主要好处

事实上,概念是所有行业或者创新行业在创新和研究创新的开始。看看汽车行业或建筑行业,记住新的艺术方向如何在历史中出现和发展。无论是什么领域,对概念的态度都会表现出两种对立面,即“这只是一种与现实生活毫无关系的幻想”,“为什么不......”两种变体都是可行的。无论如何,无论好坏,来自力量的概念都有可能取得进展。

在UI动画领域中也是相同的情况。今天被认为是我们界面不可或缺的大多数动画都是不久前的一种“不真实”的概念。在扁平化设计时代,当形状和颜色追求简洁时,在紧张竞争中,动画成为应用程序和设计解决方案脱颖而出的可靠方法。

原文作者:Tubik Studio

原文链接:

https://uxplanet.org/animation-in-ui-design-from-c...

学习工具,但不受限于某种工具。摹客iDoc,高效协作,从产品到开发,只要一个文档,让你的团队高效协作!

UI设计之动画—从虚拟到现实的更多相关文章

  1. UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  2. UI设计可供性解析:巧用隐藏的设计力提升用户体验

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 在实际的Web或App界面设计中,设计师们在学习和实践各种专业知识和技能之外,也会不可避免的遇到到各 ...

  3. 从Web借鉴UI设计

    从Web借鉴UI设计 用户体验已经成为衡量应用软件质量的重要标准.在过去我们可能会惊叹于某个Web应用的华丽界面,现在,随着HTML5的强势登场,各类表现层技术及开发框架的发布,Web与窗体应用的界限 ...

  4. UI设计初学者必看,这款设计神器教你快速入门

    网络时代,网页和手机App已经深入到人们生活的方方面面.这也使得App界面设计越来越受青年求职者们的青睐,并纷纷投入这个行业.但是,作为UI设计初学者,究竟如何才能快速的入门?当今市场上,是否有那么一 ...

  5. 21个ui设计技巧,让你的设计不落伍

    1.功能性极简主义 不少移动端APP和网站开始基于极简主义设计风来设计,而极简主义本身并非关注所有的信息,而是通过减少非关键信息来突出特定的内容,它是有着极强的功能性和偏向的.它有着如下的特征: ・简 ...

  6. 2018年UI设计趋势概览

    ​互联网产品的用户界面设计趋势是根据用户的不同需求而不断变化的.在仔细分析了过去几年用户界面设计的趋势和创新之后,我们可以发现其背后的一些规律,2018年UI界面设计的趋势如下. 渐变色 在过去的几年 ...

  7. 不得不存!UI设计新手不可错过的7条实用法则

    http://www.gameres.com/316761.html 本文编译自 Medium,作者是一位UX(User Experience, 用户体验)设计师,他通过自己学习UI设计的过程,总结出 ...

  8. 分享20个最新的免费 UI 设计素材给设计师

    用户界面设计涉及到很多的创意,灵感以及需要与客户进行有效沟通的技能.良好的用户界面是一致的,可以使网站更容易理解和使用.UI设计的重点在于用户体验和互动,同时易于使用对于一个成功的移动应用程序来说非常 ...

  9. 2017年8个UI设计流行趋势

    设计趋势变化的理由需要考虑各种各样的因素.让我们来一起看看2017年的设计流行趋势吧. 应用界面的设计趋势是不断变化的.随着时间的推移他也在不断的成长,进化.虽然有些趋势还有待检验,但我们还是需要不断 ...

随机推荐

  1. zuul ci

    . ├── a_module ├── b_module ├── lib ├── zuul │   ├── check │   ├── ci │   ├── gate │   ├── layout.ya ...

  2. PHP批量保存图片

    关于这个问题网上也有回答,我只是把我在工作中用到的代码分解出来,供需要的朋友使用.以下代码都已经经过测试,所以没有任何问题.有问题请加QQ:1127173874 第一部分 数据库表结构 create ...

  3. 基于HALCON的模板匹配方法总结

    注:很抱歉,忘记从转载链接了,作者莫怪.... 基于HALCON的模板匹配方法总结 很早就想总结一下前段时间学习HALCON的心得,但由于其他的事情总是抽不出时间.去年有过一段时间的集中学习,做了许多 ...

  4. dojo动态生成图片并按中心缩放

    首先,本人在项目动态加载图片是根据点击图片名称来获取图片所在地址,从而使其打开一个新的窗口显示图片的.这里根据每个人的也许需求进行更改(要么就是在本页面底下打开要么就是新建一个窗口打开),不做探讨. ...

  5. [Android]Linux下WebRTC下载与编译

    1.硬盘空间: WebRTC官方原话: The checkout size is large due the use of the Chromium build toolchain and many ...

  6. 如何配置mysql的超时时间

    http://bigdata.51cto.com/art/201710/555377.htm

  7. docker使用flannel网络

    基础环境我们使用了两台centos 7系统 基础配置为: 两台机器IP为 172.17.3.10 172.17.3.62 hosts文件配置为 172.17.3.10 node1 172.17.3.6 ...

  8. [Go] 开始试探一门新语言的五点思考 - Golang

    1.如果在其他语言环境中写的代码很烂,那么换一门语言很可能情况更糟,因为是涉及到基本功.工程能力和心思逻辑. 2.一定要了解语言解决的问题(比如:多核并发机制性能高.省机器.简洁易学.资料少),优势是 ...

  9. py2neo的使用(转)

    转自:https://blog.csdn.net/sinat_26917383/article/details/79901207#24-%E7%B1%BB%E4%BC%BCset%E7%9A%84%E ...

  10. mui-H5获取当前手机通讯录

    mui.plusReady(function() { // 扩展API加载完毕,现在可以正常调用扩展API plus.contacts.getAddressBook(plus.contacts.ADD ...