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

动效充满了设计师体验的想象,作为一个设计师,不管你的逼格下限在哪里,一个有趣有爱充满个性的进度条都是你设计生涯中不能拒绝的爱。那么设计师什么时候需要做一个动效设计呢?
1、等待都需要一个有意义的动效。面对等待,我们总是缺少耐心。充满个性,有趣的动效可以让用户对你的设计对上一份喜爱:至少这个设计还不错。

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

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

下面则是一些常见的动效设计方法,当我们在合适的条件下,自然要考虑从这些方法入手,为我们的设计增加一丝动感。
一、将元素替换为个性化内容
传统的等待或加载动画人们已经熟悉,想让人眼前一亮,改头换面是必须的。如谷歌用了自己的颜色,去哪儿用了自己的logo等,这些都是可以在个性化动效的同时凸显产品品牌,不失为一个很好的选择。

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

重复运动

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



动效设计可以的精妙之处在于瞬间获得的体验,通过瞬间的可见变化丰富了人们在使用app时的感觉,不再陌生,不再冰冷,不再无趣等等。动效设计在赋予了元素动的同时,我认为还要符合人们的认知,并不是所有的动都能让人愉悦,既要满足产品的需求,还要能匹配人们的当时的场景诉求。希望大家在今后的设计中都能有高水平的动效设计。
APP UI设计趋势:为好设计而动的更多相关文章
- APP UI结构-首页功能点大集锦,很干很详细
APP UI结构的系列的文章有一段时间没有更新了,因为最近在学一些新东西和看一些新书籍,适当的给自己充电也是为了更好的输出,言归正传,今天想跟大家聊的是和首页相关的一些内容,可能有些内容最近有的小伙伴 ...
- 2018年这些UI设计趋势正在流行,跟上必拿高薪!
数字设计领域和时尚圈是一样的,总会有各种各样的趋势让人眼花缭乱.无论是用户界面的视觉元素,还是用户体验的细节,总有许多值得说道的新玩法和新方向.就目前来看,UI设计的大趋势是更加大胆新颖的视觉设计,通 ...
- 2018年上半年UI领域主要的13个设计趋势
2018年时间过半,通过过去的6个月的观察,其实我们已经可以对于2018年的整个UI领域的设计趋势有了一个更为清晰的判断. 也是推出这篇文章比较合理的时机.下面我们就一起来回顾一下,过去的半年当中,U ...
- 2018年UI设计趋势概览
互联网产品的用户界面设计趋势是根据用户的不同需求而不断变化的.在仔细分析了过去几年用户界面设计的趋势和创新之后,我们可以发现其背后的一些规律,2018年UI界面设计的趋势如下. 渐变色 在过去的几年 ...
- 回顾2017系列篇(二):移动端APP设计趋势
移动端APP在2017年经历了诸多的变化, 人工智能.聊天式的界面.响应式设计.虚拟现实(VR)和增强现实(AR)让设计师不断面临新的挑战.研究表明,用户每天耗费在手机和平板上的平均时长为158分钟, ...
- 最意想不到的5个APP UI 设计范例
现如今,智能手机已成为人们生活中不可或缺的一个物件,琳琅满目的手机APP充斥着各大应用市场.对于普通人来说,他们的衣食住行因此而变得简单方便:对设计师们来说,他们则面临更多的机遇和挑战.每位设计师都梦 ...
- APP UI设计及切图规范
APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 ...
- UI设计趋势:渐变设计风格重新回归主流
在扁平化设计刚刚兴起之时,渐变是设计师们避之不及的设计手法,然而今天它已经正式回归.几乎是在一夜之间,无数的网站开始使用渐变色. 从背景到图片上的色彩叠加,包括UI元素上所遮盖的色彩,所有的这一切都表 ...
- APP UI设计相关的一些链接
安卓app设计规范整理和Android APP设计篇 http://www.25xt.com/appdesign/6536.html APP UI面试题:iOS和安卓的ui设计有什么区别 http:/ ...
随机推荐
- 关于 webpack的总结
一 . 几个基本的概念 1. mode开发模式 // webpack.production.config.js module.exports = { mode: 'production' // 生产模 ...
- MySQL系列(八)--数据库分库分表
在互联网公司或者一些并发量比较大的项目,虽然有各种项目架构设计.NoSQL.MQ.ES等解决比较高的并发访问,但是对于数据库来说,压力 还是太大,这时候即使数据库架构.表结构.索引等都设计的很好了,但 ...
- canvas绘制video
html <video style="position: relative; object-fit: fill;" preload="auto" id=& ...
- ThinkPHP中实现微信支付(jsapi支付)流程
https://blog.csdn.net/sinat_35861727/article/details/72783988 之前写过一篇文章讲了 PHP实现微信支付(jsapi支付)流程 ,详见文章: ...
- java笔记之split
Java split()用法 特殊情况有 * ^ : | . \ 一.单个符号作为分隔符 String address="上海\上海市|闵行区\吴中路"; String[] sp ...
- 2019-9-2-C#判断文件是否被混淆
title author date CreateTime categories C#判断文件是否被混淆 lindexi 2019-09-02 12:57:37 +0800 2018-2-13 17:2 ...
- Lua报unexpected symbol near错误
如果Lua脚本没有错误,那可能是UTF8 BOM的问题
- 使用log4j打印日志
在项目中我们必不可少需要打印日志,通过日志我们可以查看系统的运行状态是否正常,当程序出现异常的时候,我们也可以通过查看日志来定位问题的位置,给程序员的工作带来了极大的便利. 以下这边博客的内容是我从一 ...
- 使用openpyxl模块时出现错误: zipfile.BadZipFile: File is not a zip file
通过Pycharm工具新建一个xlsx文件. 再通过openpyxl模块读取该表时,报错: zipfile.BadZipFile: File is not a zip file 如下所示: 解决办法: ...
- Codeforces 449B
题目链接 B. Jzzhu and Cities time limit per test 2 seconds memory limit per test 256 megabytes input sta ...