我们平时所说的UI设计，大多数指的都是对整个应用程序界面的设计，所呈现的信息是静态的，这样子的设计是对于“状态”的设计。设计师们去设计每个页面的不同的状态，然后呈现给用户。而触发状态的操作就被称作行为，动效设计师就是通过动画效果去引导、响应用户的行为，联系界面之间的元素，从而在用户的交互行为上提升用户的体验。
　　前段时间看到了国外medium上面的一片关于动效设计原则的文章，写作者是一位在五年时间内为四十多个国家和上百个顶尖机构提供咨询服务的动效设计师。文章总结了一些利用动效设计去提升用户体验的设计原则，一共总结了十二条原则。相较于Google与苹果提供的动效设计规范，这篇文章更为精炼，所提出的规则也更为普适，下面我就分别介绍一下这十二条设计规范。

1. 原则1：缓动

　　所有展示时效行为的界面元素（无论即时还是非即时），都需要缓动。缓动可以加强体验中的自然感，并创造出符合用户预期的连续性。 　　

2. 原则2：偏移与延迟

　　让用户在看清楚之前，就感受到眼前的东西是什么，它们之间是如何区分的。这种功能非常有帮助。在用户看清楚出现的元素之前，设计师已经通过这种时间上的差别说明了元素之间的分离关系，而无需通过视觉上的强烈对比来向用户介绍界面上的元素。

3. 原则3：父子关系

　　这个概念我第一次接触是在AE——一款影视特效制作软件中，大致的概念就是子对象跟随父对象变化，共享包括缩放、位置、不透明度之间的属性。父子关系常用来表示两个对象之间的关系，以增强可用性。例如，当用户操作一个元素的时候，另一个元素也跟随着用户的操作而变化，用户会知道这两个元素是关联在一起的。通过父子元素属性之间不同的响应关系，父子关系的动效被分成了“直接继承”、“延迟继承”、“逆向继承”

4. 原则4：形变

　　形变的效果应该算是动效里面最容易被识别的一种了，毕竟一个正方形变成了一个圆形这样的，傻子都能看的出来，实在是太引人注目了。形变对于用户体验提升的作用是在一个元素功能发生改变的时候，利用连贯的状态的改变抓住用户的注意力，使得这个元素的内涵更好的被用户感知与记忆。

5. 原则5：值变

　　值变顾名思义，就是数字与文本的的改变，而且是动态的改变。比如说，如果一个值是直接进行改变，那么用户无法体会到数值的动态特征，无法明确体会到这个值变化背后的含义。速度数值的快速变化让用户和这个速度直接建立起了关系，设计师不是直接抛出一个数字给用户去感受，而是让这个值以它特有的特征去展示给用户看。

6. 原则6：遮罩

　　遮罩的概念类似与PS中的蒙版。不同于静态设计中遮罩是用于辅助设计的，在动效设计中遮罩的变化配合背景的运动，既没有让用户丢失视觉上的焦点，也让app状态的改变变得更加的流畅自然。在不改变元素内容的情况下，通过遮罩来改变元素本身，是相当不错的动效设计技巧。

7. 原则7：覆盖

　　用堆叠元素的相对位置来描述他们的扁平空间关系。在iOS 7推行扁平化设计后，元素之间的相对关系变得有些模糊，如果设计师的功力不强，有些用户会分不清元素之间的层级关系。Google的MD对此的解决方法是用带有Z轴的卡片作为内容的载体，卡片的阴影作为层级之间的区别。动效设计的这条原则则是使用了层级之间的覆盖向用户传递了元素之间的Z轴关系。

8. 原则8：复制

　　当新的元素从已有元素复制出来时，用连贯的方式。
　　当新元素从现有的元素上被创造出来的时候，设计师首先需让用户感知到有“生产”这个变化的发生，其次需要将用户的焦点从现有元素转椅到新元素上。所以这就需要已有元素的动画（吸引注意力），新元素更强烈的复制动画（转移焦点）

9. 原则9：景深

　　允许用户瞥得到非主要元素或场景。
　　iOS中又一个可以算是苹果标志性的元素，也就是毛玻璃。利用毛玻璃这个元素，用户既可以把焦点放在毛玻璃上，同时也能看到这一层级下面的元素。（实际上毛玻璃最先被用于微软的Vista系统，最新的流畅设计体系也有对于景深的运用，不过被官方称作亚克力，虽然感觉效果差不多）
　　与遮罩元素相同，景深也是可静可动的，设计师可以使用景深原则来在用户体验中提供一个全局或客观的视图。

10. 原则10：视差

　　“视差”在动效体验原则中描述的是界面元素以不同的速度运动。
　　在保留设计完整性的前提下，视差原则有利于让用户聚焦于主要操作和内容。一般来说，两个速度相同的物体，靠近自己的那一个运动的快一点，远离自己的那一个运动的慢一点，设计师可以利用这个现象来提醒用户界面中什么元素比较重要需要用户产生交互。不同于景深，视差不需要刻意去遮挡背景元素，并且获得超越平面设计的层次感。

11. 原则11：翻转

　　通过具有空间架构的描述方式来表现新元素的产生与离场。
　　用户体验的关键在于连续性和对元素的掌控度。界面上的一个元素，突然凭空消失了，这算怎么回事呢？焦点的突然丢失，会带来体验上的慌张感，这时候就需要翻转来进行元素缓慢的离场。翻转又分为三种：折叠翻转、浮动翻转、对象翻转。

12. 原则12：滑动变焦

　　用连续的空间描述来引导界面元素和空间
　　（感觉是个炫技的动效，比较全局，适合于app间转场，不适合界面的局部动效）
　　然后我仔细看了一下他所给出的动效设计的例子，对于这些原则，前十条我的确是挺赞同的，后面的翻转和滑动变焦则有些不赞同。元素翻转我除了在Flipboard红版报，在其他的app中还真的没有看到过。而Flipboard也是为了更加模拟出杂志翻页时的效果，暂时也没看出来还有什么其他的交互上的考虑，所以翻转这点我持保留态度。治愈原则12，同样我除了在iOS的解锁动画上看过，也没有在其他地方碰到（且那个效果在iOS 7刚出来的时候，也有用户投诉说太炫了造成不适感）。感觉除了营造空间感之外也没有什么作用。

　　也在三星呆了一个礼拜了，这个礼拜主要的工作就是画了一个三星S助手做活动所需要的html界面，本来的话是两天左右的工作量，但是三星的手续特别的复杂，笔记本需要装好安保软件，浏览器需要配置代理，然后就算一切都搞好了能够上的网站也有限，百度网盘之类的云存储就不用想了（顺带一提，三星出入不能携带储存设备，手机需要遮挡摄像头，出入都要安检），即便是日常使用的素材、软件网站也没有办法正常访问。软件是只能使用正版，而且需要向公司提交申请。
　　然后因为我用的是mac，没有安保软件，所以也要向上面申请一下不装安保软件上网。申请的邮件还是韩文的，貌似直接发送到韩国总部，除了中文其他都没看懂。
　　貌似小米是没有那么多规矩，最多也就是一个公司内网不允许外部访问需要搭建vpn（废话），其他的和你自己买个笔记本办公没什么区别，听到过最严的规矩也就是泄露未发布手机谍照要罚款100万。
　　然后在小米内部工作的确很自在，公司有个论坛，还有个类似朋友圈的东西，还有跳蚤街，各种各样的俱乐部，三星就没有那么多好玩的东西。估计这也是互联网公司和传统企业的区别吧，三星虽然手机做的很好，但是和华为一样，都是传统企业起家，互联网思维和正统的互联网企业相比差了不少。
　　我在三星做的项目是S助手，是一个三星手机上的聚合类生活应用，在公司里隶属于终端创新Lab。有趣的是我们部门的老大一直都在向我打听小米生活的事情，不过这个真的是不太熟。话说回来三星的S助手占据了整个手机的高频入口——通过长按home就能进入，甚至在桌面都没有独立的app。在其他手机上这个操作通常是唤起语音助手，或者是进入多任务管理界面，把一个app的入口放在长按home键的，说实话我还真没有想起其他手机厂商。
　　但是这个app的质量呢，说实话没有我想象中的那么高。app做了机型锁定，所以除了三星手机之外其他手机没办法锁定，暂时还没试过改配置文件的方法，以后有机会试一试。体验过这个app之后，我的第一印象是这个app功能很全面，基本可以满足生活中的所有需求，但是问题是，满足的那些需求，广度很广，但是深度欠缺。而从app的设计来说，整个app也没有一个统一的设计语言，更不要提和系统的融合了，小米在这方面做得就不错，就算小米系的应用多种多样，但是设计的语言大多遵循MIUI的Design，所以少有割裂感。
　　突然想不出啥能写的了，就不写了。

这是一个记录我这几个月实习经历的App，不知道到时候要交日志了能不能把这个交上去。
第一次尝试不画线稿图、不画草图、不画任何东西直接在Android studio里面进行产品的设计，说实话还是挺累的，对电脑也是一个挺大的考验，Chrome、Android Studio、Android模拟器、Photoshop、Sketch、Ai同时开着，电量那是刷刷的往下掉，我估计以后这样的大招是不会放了。
这貌似也是我第一次尝试做无框化设计，感觉结果是挺惨的……看来我自己的排版能力还是不太强，以后还是不要轻易尝试这种风格了。不过好歹app是写出来了，写的过程的也碰到了很多设计与技术上的矛盾，其中也有不少的妥协，这可能也是这个app设计惨不忍睹的原因吧。

不会放下载地址的，文章里面还有挺多东西涉嫌到公司机密，放几张图好了，感受一下。

图被渣浪压缩的不能看了，求推荐好用的图床，最好能有开放的api。

最新消息：正在尝试开发自动从这个博客上抓取内容的app。

小习惯是我最近在练手的一个小产品，我在网上没有找到合我心意的记录习惯的app，所以就想着自己设计一个。app现在还比较简陋，但是我会不断的对其进行完善。这个app会随着我对交互设计学习理解的不断深入而不断的改进，有一些比较好的想法我会第一时间在它上面进行设计，并且尽量也能在技术层面上实现它。
很久没有尝试完整的做过一个app的交互稿了，这个app是在小米实习的时候抽空做的，融入了自己的很多的想法。甚至有些想法我也不能在技术上保证能实现，可以说算是完全抛开技术限制而做的一些设计。
因为时间蛮晚了，所以就不一张一张图片上传了，我直接传上pdf,有兴趣的自己下载看吧。

170417最新作品——小习惯

争取以后慢慢把它做出来吧。

　　是的，被我院吐槽前边万遍的新闻学院app就是我设计的。不过这个是直接外包给外面团队做的，基本没办法监督，所以最后做出来和我的设计稿相差特别大，这里放上我的设计稿，原型正在用墨刀制作。做完了会一并放上。
图标：

首页闪屏：

主界面：

消息：

信息：

消息通知：

可以说是我进入Dian团队的第一个测试，做一个MD风格的app，正好当时优衣库事件比较火，然后下了一下它的app看了看（没想干嘛……）发现它的UI实在是太丑了，于是就用MD的模板对客户端进行了一次中规中矩的设计。