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. H5C3--仿京东首页(包含轮播图,倒计时)

    !!!很抱歉,之前的域名已经过期了,已经被别人购买了拿去做菠菜了,现在的话,京东页面我重新发布一下代码 #请看注意事项,因为有模拟请求,请在本地服务器或者IDEA类编译器打开(2019年10月10日0 ...

  2. MySQL加快批量更新 UPDATE优化

    如果是更新为同样的内容,没啥难度,直接在where里面下功夫就好了,大家都懂,我要说的是针对更新内容不一样的情况 首先,先看看网上转载的方法: mysql 批量更新如果一条条去更新效率是相当的慢, 循 ...

  3. Codeforces 467D

    题目链接 D. Fedor and Essay time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  4. Pycharm 2018激活(Mac版)

    第一步,修改host文件 目的:是屏蔽掉Pycharm对激活码的验证 路径:/etc/hosts 在文件最后一行添加文本: 0.0.0.0 account.jetbrains.com 修改后文件如下: ...

  5. cmd下带参数执行python文件

    在一个文件下下创建程序代码,     sys.argv 即后续cmd中需要传入的参数列表,     sys.argv[0]即要执行的文件名     sys.argv[n]即参数的字符串 # -*- c ...

  6. python邮件发送:普通文本、html、添加附件

    # -*- coding: utf-8 -*- # @Time : 2019/9/19 13:46 # @Author : HuangWenjun # @Email : 350920551@qq.co ...

  7. SELECT (@i :=@i + 1)生成序列号

    转载自https://blog.csdn.net/qq_27922171/article/details/86477544 同类别自动生成序列号:https://bbs.csdn.net/topics ...

  8. ActiveMQ消息中间件

    最近学习到ActiveMQ,之前也没有用过相关或者类似的工具,因此特地写个文章进行相关的学习记录. 相关参考博文:https://www.cnblogs.com/cyfonly/p/6380860.h ...

  9. 安装mysql报错2503

    安装MySQL-5.5.27报这个错误: The installer has encountered an unexpected error installing this package.This ...

  10. android studio离线打包mui应用

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/foolish0421/article/details/54618754首先从官网http://www ...