5 个小技巧，用动效提升界面的用户体验就这么简单

动效能讲述故事。和图片不同，动效能够呈现变化的过程，讲述一段简短而有趣的故事，能够同你进行对话：“嘿，你该看这个按钮了”或者“哦耶！你刚刚完成了一个操作！”不过，动效的目标并不是单纯的娱乐用户，而是帮助用户了解交互的效果和界面中发生的变化，让用户更为有效地使用你的APP。Zurb 有一句话很好的解释了这一点：“我们设计的不再仅仅只是静态的界面，实际上，我们所设计的是用户从界

产品经理 2016年10月02日

想搞定移动端APP/网页设计，你起码要做好这些事情

编者按：当一个领域趋于成熟的时候，就会呈现出诸如“套路”这样的东西，它是用户和设计师/开发者在逐步磨合过程中产生的，约定俗成的一些规则。而在做移动端设计的时候，在考虑差异化设计之前，有一些最基本的事情要做好，今天我们就来聊聊这个~如果你曾仔细观察过近些年来那些优秀移动端产品的交互设计，会发现它们都拥有一个共性：它们在基本的功能和设计上的执行都相当的完美。它们从最基本的人类行

产品 2016年09月08日

基础知识！聊聊交互设计三要素之细节设计

@黄红艺Designer ：交互设计三部曲终于写到最后了，今天聊聊交互设计的最后一个要素 —— 交互细节设计。本要素是在前两个要素指导下的设计实践，也是交互设计可视化与形象化的关键。往期回顾：《基础知识！聊聊交互设计三要素之信息架构和流程设计》相对于前两个要素的完整性和系统性，第三个要素-交互细节设计，就显得琐碎和零散。根据交互设计由浅入深的渐进，交互细节可以分为布局、控件

产品 2016年09月08日

超实用！6个方法帮你做出优秀的UI动态微交互

编者按：明确系统状态、让按钮和操控可触知、打造有意义的转场、强调界面的变化、增加愉悦的细节…… 今天腾讯设计师@月焱瞳 这篇译文，总结了6个做出细腻动态微交互的技巧，建议阅读。UI界面动效设计方法：先看看有意义的动效设计是啥样：《设计师的必备技能！你需要学会设计有意义的动效》再来学习腾讯设计师写的动效设计指南：《腾讯精品文！超多干货的UI界面动效设计指南》围观实战案例：《高

产品 2016年08月22日

中文版来了！值得每个设计师收藏的《完美像素使用手册》之原理篇

这本纪念碑谷团队出品的《完美像素使用手册》，有设计师说是她见过的最全面，最毫无保留，最生动有趣的界面设计指南，而且不止是设计，还包括和程序员的合作经验，AI、PS的操作小技巧等等。现在终于有中文版了，强烈建议收藏阅读。关于设计指南，这里有一个绝对不能错过的：中文版来了！新版Material Design 官方动效指南中文版来了！新版MATERIAL DESIGN 官方动效指

产品 2016年08月05日

设计师来看！如何向工程师描述你的动效？

日常工作中，交互设计师不仅需要处理复杂的业务逻辑、排放各种层次的信息，还经常需要制作各类动效。除了用于可用性测试、方案汇报与演示之外，动效还承担着丰富页面效果、情感化表达等提升用户体验的作用。按照目前的设计趋势，动效都趋向于细微化，主张动效本身不喧宾夺主，而是潜移默化地影响用户体验。动效设计需要和场景紧密结合，炫酷的效果往往并不实用。另一方面，动效设计出来之后还要能顺利被工

产品 2016年07月26日

有法可依！帮你衡量一个动效是否合格的六个核心因素

一个功能完备的动效不仅要足够微妙有趣，而且应当清晰且具有合乎逻辑的目的。动效的存在不仅降低了用户的认知负荷，沟通不同的环节，建立更为有效的信息和交互流程。但是更为重要的是，真正优秀的动效能让界面变得栩栩如生。通过让元素在形态上进行叠加、分割、延伸、形变，动效让界面给人以更为真实、更加“物理”的质感。流畅顺滑的动效帮用户联通起上下文，阐释界面元素之间的关系，强化UI的层次感，

用户研究 2016年07月12日

不为动而动！聊聊动态效果在体验设计中的应用

编者按：在我们热火朝天往画面上添加各种动效的时候，我们是不是应该问问自己，这么做真的对吗？凡事是否都应该有个度，动效当然也不会例外。下面我们就从“为什么动？”“哪里动？”“怎么动？”这三个方面来说说我们的一点想法：腾讯设计师的动效设计好文：《动效设计基础（一）：缓动与运动曲线》[br]《腾讯高手出品！动效设计基础（二）：动效的应用》一、为什么动？首先，为什么要动？可能你会想

产品 2016年07月06日

腾讯高手出品！动效设计基础（二）：动效的应用

Heyu：在上一篇文章 腾讯高手出品！动效设计基础（一）：运动曲线与缓动 中，我们讨论了动效的几种常见形式以及缓动的重要性。那么，我们为什么要用动效呢？除了酷炫好玩以外，动效在用户体验设计中其实发挥着很重要的作用。在本文中，我们就来看看动效设计在用户界面设计中的应用。一、吸引注意力人类天生就对运动的物体格外注意，因此UI动效自然是吸引用户注意力的一种很有效的方法。在iOS锁

产品 2016年07月06日

腾讯高手出品！动效设计基础（一）：运动曲线与缓动

Heyu：作为设计师，我们经常接到这样的需求：XX App中的动效好酷啊，我们也做一个吧。这时，一些习惯了把设计输出 = PSD的同学往往无从下手。那什么是动效设计？什么时候需要用什么样的动效？动效越酷炫越好吗？这里，我会用几篇文章分别回答这些问题。首先，我们先了解动效设计中如何用运动曲线表达动效以及缓动设计。为什么要动效？动效是元素的位移、姿态、大小和可见度等随时间的变化

产品 2016年07月06日