我们不需要怎样的动效设计.pdfVIP

我们不需要怎样的动效设计 时常在思考我们在追求漂亮的动效 ，追求真实的弹性和运动状态时 ，我们不需要怎样的动效设计。 对现实世界材质的模仿 （拟物化 ）到对现实世界规则的模仿 （如Mat erial Design ，以下称MD ）我 们究竟是否有很大程度的进步 ，在MD刚刚发布的时候作为设计师的我们十分激动 ，直到现在都还 有很多设计师十分推崇MD一套的设计规范 ，这样的做法在带来便利的同时可能会让我们忽略设计的 初衷 ，还有作为一个设计师对产品的理解 ，最终可能给用户带来一个中庸的体验。 从动效设计上看 ： 设计所包含的方方面面在 MengTo 的 《Design + Code》上有很好的归纳 ，我时常发现 ，经过一段 时间的设计之后很容易在设计的过程中有所迷失 ，原因在于我们很容易专注于细节 ，保持阅读的习 惯并试图用相对宏观的视角去看设计是不错的做法。动效设计让页面元素能够很自如的被操控而不 仅仅是静态呈现时 ，我们会直觉的想到让其去模拟现实世界的规则 ，现实世界的运动规则因其载体 不同其实有很多选择 ，在设计和模仿的同时还应该考虑更多。 IBM在前不久发布了 IBM Design: Machine in animat io n, 试图将机械运动的风格赋予给动效设计。 IBM因为其在100年以来就生产着专业的打字机 ，打字机可以作为一种符号来代表IBM ，它的视觉呈 现和运动轨迹都可以代表打字机的可靠和高效。运用在IBM自家的应用上时 ，真正的高级用户可能 会真实的感觉其与IBM企业所想要传达符合的某种信号。机械运动相对于我们在动效设计中所常用 的弹性动画有其独特的特点 ，页面元素坚硬有序而活动自如这一感觉通过设计师所定制的曲线而 呈现。 回想90年代时网页设计的过度设计风格 ，大量的阴影、斜角、高光、不考虑留白的使用 ，这是一个 设计师在面对新媒介和庆祝掌控像素后的失控 ，而这也是自然能够理解的结果。St o p Grat uit o us I A nimat io n,现在的动效设计也是如此 ，它受新技术如CSS、JS的进步和硬件的更新换代影响。不 必要的动效设计可能有以下几个特点 ： 过多的对现实世界的模拟 这样的模拟很可能不会让你的应用塑造出类IBM的视觉语言 ，而只会带来不必要的认知负担。另一 方面 ，像素世界有许多与物理世界不一样的地方 ，如Loading ，这样的处理才是更应该关注的。 这个例子的列表就是对现实世界中某种机械装置的模拟 ，无论是运动曲线还是紧度都调的不错 ，可 是它依旧是一个不好的例子。仔细来看 ，正因为它的列表在模拟机械装置所以每个卡片在拖动时必 须固定像素定位 ，用户无法做出按住-上下滑动预览 ；滑动停止在任意位置浏览的手势。 在大的页面切换做过多动效 越是用户经常操作、变化越大的页面越不应做过多的动效处理 ，动效设计不应该只是对一个动效时 间上的操纵。如不应该大于1s或者不应该大于0.5s ，这和7±2原则一样十分具有玄学意味 ，这和网页 设计早期发展时Loading时间一样 ：人心理的焦躁程 也会改变 ，谈论一个动效的具体时间没有太 大意义 ，而更应该关注它在什么地方做了一件什么事。 如果是Tab切换 ，笔者的意见是动效设计要尽量克制 ，一方面用户的操作频率十分高 ，如果要考虑 到页面元素级的切换 ，程序无法对用户正在看当前Tab上下滚动的位置做出相应的动效定制化处理 ，这也涉及到另一个Tab的页面元素进场。另一方面过多的操作与动效时间相乘 ，将是一个很大的 负担。 手势操作与系统全局操作冲突 因为手势可以更方便的被运用 ，最近更新的许多应用普遍采用手势操作 ，而不幸的是这样的方便带 来了更大程度的误触 ，这也是动效设计和交互设计分割的后果。一般来说 ， 手机边缘的上滑和下 滑都已经被系统手势占用 ，不能让原本应该带来便捷的手势给用户带来更多麻烦。下图就是一个 和iO S唤出控制中心手势冲突的例子。 从版式设计上看 ： 每个设计师特别是交互动效设计师在刚刚接触动效的时候都很想创造一套动效的交互规则 ，能够掌 握到每个运动的先后次序和精确到毫秒级的设计 ，会让设计师很有快感。动效设计是基于页面层级 和页面元素 ，在交互与视觉设计上的改进 ，是当交互和视觉在解决问题不够高效时做的补充。MD 和IBM的设计都很优秀 ，但当由动效或形式掌控过多的时候 ，可能会造成难以预料的低效率 ，这也 不难理解为什么有人会说 ：t he Float ing A ct io n But t o n （FA B ）is bad X design . 遵循平台规则会给应用加分这没错 ，这在iO