http://www.cocoachina.com/design/20150703/12029.html

作者:bone9

善心悦目的动效已然成为一个app的必备,作为设计师自然要跟随趋势学习。APP中的动效可以划分为两类,一类是转场动效,应用在页面的切换,加载等,这类动效可以柔和页面的过度效果,增加切换、加载、等待过程的趣味性。另一类是反馈提醒,通过界面内元素的动效,增强用户的交互感知或引导用户完成任务。

动效充满了设计师体验的想象,作为一个设计师,不管你的逼格下限在哪里,一个有趣有爱充满个性的进度条都是你设计生涯中不能拒绝的爱。那么设计师什么时候需要做一个动效设计呢?

1、等待都需要一个有意义的动效。面对等待,我们总是缺少耐心。充满个性,有趣的动效可以让用户对你的设计对上一份喜爱:至少这个设计还不错。

2、如果你希望用户点击这个地方,请给它一个动效。

3.如果你希望你的点击效果不一样,请给它一个动效

下面则是一些常见的动效设计方法,当我们在合适的条件下,自然要考虑从这些方法入手,为我们的设计增加一丝动感。

一、将元素替换为个性化内容

传统的等待或加载动画人们已经熟悉,想让人眼前一亮,改头换面是必须的。如谷歌用了自己的颜色,去哪儿用了自己的logo等,这些都是可以在个性化动效的同时凸显产品品牌,不失为一个很好的选择。

二、更换产品的运动方式

除了旋转运动之外,我们还可以运用重复,构建,变形,拟物、人的动作(翻书)等,只要是和产品定位相符的元素,我们都能给它创意一个独特的运动方式。

重复运动

构建

三、赋予组件明显的交互反馈

冷冰冰的点击和出现往往不能吸引用户的注意力,所以,当我们需要加强某些元素来引导用户的时候可以给这些元素加上适当的出现效果,如渐隐渐显,位移,放大缩小,光晕,分布等效果,会起到很好的引导效果。

动效设计可以的精妙之处在于瞬间获得的体验,通过瞬间的可见变化丰富了人们在使用app时的感觉,不再陌生,不再冰冷,不再无趣等等。动效设计在赋予了元素动的同时,我认为还要符合人们的认知,并不是所有的动都能让人愉悦,既要满足产品的需求,还要能匹配人们的当时的场景诉求。希望大家在今后的设计中都能有高水平的动效设计。

APP UI设计趋势:为好设计而动的更多相关文章

  1. APP UI结构-首页功能点大集锦,很干很详细

    APP UI结构的系列的文章有一段时间没有更新了,因为最近在学一些新东西和看一些新书籍,适当的给自己充电也是为了更好的输出,言归正传,今天想跟大家聊的是和首页相关的一些内容,可能有些内容最近有的小伙伴 ...

  2. 2018年这些UI设计趋势正在流行,跟上必拿高薪!

    数字设计领域和时尚圈是一样的,总会有各种各样的趋势让人眼花缭乱.无论是用户界面的视觉元素,还是用户体验的细节,总有许多值得说道的新玩法和新方向.就目前来看,UI设计的大趋势是更加大胆新颖的视觉设计,通 ...

  3. 2018年上半年UI领域主要的13个设计趋势

    2018年时间过半,通过过去的6个月的观察,其实我们已经可以对于2018年的整个UI领域的设计趋势有了一个更为清晰的判断. 也是推出这篇文章比较合理的时机.下面我们就一起来回顾一下,过去的半年当中,U ...

  4. 2018年UI设计趋势概览

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

  5. 回顾2017系列篇(二):移动端APP设计趋势

    移动端APP在2017年经历了诸多的变化, 人工智能.聊天式的界面.响应式设计.虚拟现实(VR)和增强现实(AR)让设计师不断面临新的挑战.研究表明,用户每天耗费在手机和平板上的平均时长为158分钟, ...

  6. 最意想不到的5个APP UI 设计范例

    现如今,智能手机已成为人们生活中不可或缺的一个物件,琳琅满目的手机APP充斥着各大应用市场.对于普通人来说,他们的衣食住行因此而变得简单方便:对设计师们来说,他们则面临更多的机遇和挑战.每位设计师都梦 ...

  7. APP UI设计及切图规范

    APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 ...

  8. UI设计趋势:渐变设计风格重新回归主流

    在扁平化设计刚刚兴起之时,渐变是设计师们避之不及的设计手法,然而今天它已经正式回归.几乎是在一夜之间,无数的网站开始使用渐变色. 从背景到图片上的色彩叠加,包括UI元素上所遮盖的色彩,所有的这一切都表 ...

  9. APP UI设计相关的一些链接

    安卓app设计规范整理和Android APP设计篇 http://www.25xt.com/appdesign/6536.html APP UI面试题:iOS和安卓的ui设计有什么区别 http:/ ...

随机推荐

  1. JAVA面试常见问题之数据库篇

    1.MySQL 索引使用的注意事项 更新频繁的列不要加索引 数据量小的表不要加索引 重复数据多的字段不要加索引,比如性别字段 首先应该考虑对where 和 order by 涉及的列上建立索引 2.D ...

  2. 使用代码创建rabbitmq交换机和队列绑定

    1.获取channel对象 2.声明(创建)对列 // 第一个参数,queueName:对列名称.数据类型:String// 第二个参数,durable:是否持久化, 队列的声明默认是存放到内存中的, ...

  3. 彩色图像与二值图像(mask)点乘

    问题描述:给出一幅彩色图像和一张mask二值图像,其中mask和彩色图像大小相同,感兴趣的部分为1,其余部分为0,请用mask与彩色图像点乘,将感兴趣区域显示出来. 点乘的本质是mask中是二值图像, ...

  4. web前端学习(一) j2ee环境搭配+jsp中的编码问题

    jsp中的编码问题 pageEncoding是jsp文件本身的编码  contentType的charset是指服务器发送给客户端时的内容编码 我安装tomcat的方法是 安装j2ee的eclipse ...

  5. meet-in-the-middle 基础算法(优化dfs)

    $meet-in-the-middle$(又称折半搜索.双向搜索)对于$n<=40$的搜索类型题目,一般都可以采用该算法进行优化,很稳很暴力. $meet-in-the-middle$算法的主要 ...

  6. WPF 从属性赋值到MVVM模式详解

    示例源码 这两天学习了一下MVVM模式,和大家分享一下,也作为自己的学习笔记.这里不定义MVVM的概念,不用苍白的文字说它的好处,而是从简单的赋值讲起,一步步建立一个MVVM模式的Simple.通过前 ...

  7. FreeMarker 对null值的处理技巧

    以下引用官方描述: ? The FreeMarker template language doesn't know the Java language null at all. It doesn't ...

  8. 2018-2-13-wpf-PreviewTextInput-在鼠标输入获得-_u0003

    title author date CreateTime categories wpf PreviewTextInput 在鼠标输入获得 � lindexi 2018-2-13 17:23:3 +08 ...

  9. 【扩展推荐】Laravel-ide-helper 高效的 IDE 智能提示插件 | Laravel China 社区 - 高品质的 Laravel 和 PHP 开发者社区 - Powered by PHPH

    说明# barryvdh/laravel-ide-helper 扩展包能让你的 IDE ( PHPStorm, Sublime ) 实现自动完成.代码智能提示和代码跟踪等功能,大大提高你的开发效率. ...

  10. CentOS安装fortune+cowsay

    1.先找下看有没 2.安装 yum -y install fortune-mod 3.执行fortune 应该可以输出了,接着去弄中文词库,阮一峰的: git clone git@github.com ...