实用小技巧！iPhone上看到好的动效设计，如何保存成GIF？

俞静：经常在网上看到一些介绍手机APP动效设计的文章，一直好奇这些动态图片是怎么保存下来的。今天把这个小技能分享出来，UI设计师和想学优秀动效的同学记得收藏！ 自己在日常工作中也有看到好的动效设计要保存下来的需求——留着APP太占手机空间，删了APP要用的时候又无法跟开发描述清楚。要将手机APP里看到的一段动效保存成动态图片（GIF），总的思路不外乎：先将这段动效录屏，然后

产品 2016年05月24日

中文版来了！新版MATERIAL DESIGN 官方动效指南（二）

编者按：昨天@平行煎餅 发了 中文版来了！新版Material Design 官方动效指南，今天继续第二部分，从动效的速度、动态持续时间、通用持续时间和缓动曲线4个部分，教你创建平滑一致的Material Design 动效。再系统的干货都比不上官方的动效指南，西瓜就在这，赶紧来捡。中文版来了！新版Material Design 官方动效指南中文版来了！新版MATERIA

产品 2016年05月16日

中文版来了！新版Material Design 官方动效指南

中文版来了！新版Material Design 官方动效指南中文版来了！新版MATERIAL DESIGN 官方动效指南（二）中文版来了！新版MATERIAL DESIGN 官方动效指南（三）编者按：前两天Google 刚发布了新版Material Design 官方动效指南，今天@平行煎餅 就给大家带来了中文版！全文包括三个部分：为什么说动效很重要？如何制作优秀的Mate

产品 2016年05月13日

花了7天看了上千个交互动效神作，我总结出5个技巧

首先，我想大家会有这样的问题：什么是微交互 （micro-interaction)？来自 UXPin（一款在线可交互原型制作工具）的 Carrie Cousins 给出了如下定义：“微交互是在交互设备上的单一交互流程的细节优化。”可能不是太容易理解，那就多看几遍吧。在进入正题之前，有一点我要先声明一下，接下来我要分析的 UI 动效都是出自非常牛逼的大神之手。我非常尊敬他们和

交互体验 2016年05月10日

花了7天看了上千个交互动效神作，我总结出5个技巧

编者按：对一个全无经验的动效新手而言，如何制作出「正确」而不是「华丽」的动效？今天这篇Medium 上的好文，从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个方面，附上案例分析，帮你学会基础的动画制作技巧。首先，我想大家会有这样的问题：什么是微交互 （micro-interaction)？来自 UXPin（一款在线可交互原型制作工具）的 Carrie Cousin

产品 2016年05月09日

什么样的loading动画，我会等！

毫无疑问，每个人都不喜欢等待。尤其是在浏览自己喜欢的页面或电影时，对着千篇一律、毫无新意的加载页面，简直枯燥乏味无聊极了！[br][br]实际上，有研究表明，普通用户能够忍受的最长的加载页面的时间一般为8秒钟。8秒是一个临界值，如果加载时间超过8秒，除非用户必须在这个页面获得一些信息，一般用户会关闭页面或者转到其他页面。[br]那么在这短短内，如何用一个小小的加载进度条吸引

用户研究 2016年04月11日

浅聊四个主流的页面间跳转动效

最近一直在做交互规范总结的工作，在不断梳理页面间跳转逻辑的同时，发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效，却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范，花了大量时间把玩现在公司线上的产品以及国内外优秀的APP，尤其是苹 果、谷歌自己开发的APP。（如果某些方面在设计规范中并没有给出答案，就在原生APP中找答案

用户研究 2016年04月10日

2016年网页设计领域11个流行趋势预测

来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势，而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势会在2016年逐一涌现，但是总体上来说，它依然会沿着2015的大趋势来逐步演变。可以预见到的是，2016年会有更多的网站使用视频背景，更多基于Material Design 风格的界面设计，幻灯片式的界面切换也会继续火热

用户研究 2016年04月10日

给设计师的网页动画设计基础指南

文末相关链接中，会附上关于这12原则的相关文献。网页动画的实现方式很多，最常见的是使用Gif图，CSS，SVG，WebGL 以及视频。但是和动漫不同，网页中的动画可以是任何元素，小到下划线，大到背景和整个页面，它可以随着页面加载而出现，也可能是鼠标移动到某个位置上之后 被触发。和其他的设计手法相似，动画可以是非常微妙、触动人心的，也可以是开门见山、清晰直观的。所以，最重要的

用户研究 2016年04月10日

设计干货收藏｜UI动效的必备原则总结

[br]作为一枚不会敲代码的设计师，我们不太可能让自己的设计真正“活”起来。如果没有动效设计，那总是需要很长时间去给程序员解释点击这个按钮后会发生什么。所以设计师们需要通过动画版本高保真原型（包括动效设计）去解释交互效果。[br]目前的UI动效包括系统动效都在尝试从各种不同角度解释动效设计的作用。而很多开发团队根本就不重视这些细枝末节的东西，他们认为只要掌握好几本用户需求，

用户研究 2016年04月10日