资讯频道 → Web前端
阅读更多

3顶
0踩

Web前端

转载新闻 为什么我着迷于动效设计？

2015-09-06 15:39 by 副主编 mengyidan1988 评论(0) 有4033人浏览
前端技术 动态设计



设计师喜欢专注细节。他们用大量时间设计出令人发指的像素级按钮、表单样式、设置页面，把图标打磨得像图钉一样精细。好吧，满分，棒极了，你们这些家伙千万别停手啊。

但是…… 我们需要稍微想想怎么把一个个静止的界面组合在一起。你按下按钮， 然后表单就……会怎样呢？你滑动删除一个条目然后它就那么消失了？那样会显得非常奇怪 且不自然。现实世界中，任何状态的转换都不会如此生硬。总会让人感觉哪出了问题。

哦，好吧。你们会写上说明 —— 比如“滑入。”

如何滑入？飞快？会回弹吗？缓冲滑入？静态界面设计无法为状态之间提供上下文。

这些人一旦遇到动画和有趣的交互时，通常会抛出一个词“愉快的”。对这些家伙来说很酷、 棒极了。但是，你猜怎么着？动画一样可以有功能性，它可不只是用来渲染细节。

动画带出了一个俯瞰维度 —— 时间！ 一种不可见的结构将空间整合在一起。你大可不必像 数学白痴一样去理解。

我们来看看一些简单的想法：

放慢/缓冲

在传统动画里，分画帧决定了主体如何从 A点 移动到 B点。它将惯性加入移动，并且确定剩下的帧序列。 以这25帧插入值，观察第13帧（中间帧）的位置变化。



看到了吧！你已经学会了放慢、缓冲。电脑就像傻瓜一样喜欢线性填充间隔，因为它们都是懒汉。一个优秀的动画、动作设计师会花大量的时间与电脑较劲，以确保没有把事情搞砸。

动画是时间相关的。你可以用各种方式处理空间来得到不同的结果。不过这样已经足够了。 这毕竟不是动画教程，关键在于你对时间和空间艺术的思考。

一些关于动画在交互中的想法

把条目插入到一个列表

比方说，你现在正着手于一个实时事件列表，并且想填充实时数据。如果你把它交给 电脑，看起来会是这个样子：



哎呀，这太粗糙了……

将它处理平滑只需要少量帧的动画。如何让它为你的大脑对列表中将要发生的事情提供线索？






如果添加了一个新条目，列表需要为这个条目腾出空间，然后（来自某个地方的） 新条目填充这个空间。 这样就舒缓多了。由缓进缓出来软化状态的改变。感觉起来更自然了 ，因为我们空间的转换有了上下文 —— 正好对应了你在生活中将某个东西添加到一堆东西中的 场景。

更多想法

进入列表中

有一个典型的、滑动进入列表中项的默认方式。这是一种标准使用方式，但是并不能 反映直观的感觉。



滑动的方向并不能给你带来视图转换的任何有用线索。

何不考虑下将列表项看成一个容器，内嵌更多的内容？



如果目的是进入并聚焦在列表项上，我们甚至可以在同一个视图内把其它不相关的东西都隐藏掉：



面包屑导航 > 所有 > 路线 > 进入 > 视图 > 这是最容易让用户迷失的方式。

保持内嵌的一个好处，就是你不用向用户去解释他已经深入的子视图层级。可以放弃 层级导航，因为用户自己就能看出来。

当然，上面的想法并不适用于所有场景 —— 但是通过这个视角可以引出更多优秀的流程转换解决方案。

一个已实现的例子 ThingList



ThingList, 是我在 Elepath 与 Kyle Bragger 合作的的一个产品，里面有很多有趣的动效设计。上面的例子说明了我们如何展示一个新的过滤功能。

建议你关注更多的动效设计的例子：

你懂的，我真的不能说太多…… 天平的一端是非常华丽但单调的界面，另一端充满了过度点缀的花哨动画。

这是我现在推荐的三个。

Clear：手势紧密地驱动动画。

Willcall：整体一致，有动感的节奏。界面转换毫无突兀感。体验非常愉快。

Facebook应用：一致性不是非常好，但在绘制焦点时有些独到的解决方案。具体来说…… 一个是进入显示全屏照片时的弹出层，还有一个是在列表中弹出评论输入框。

对我来说，很多人认为动效设计与时间无关是非常可笑的。动效可以提供更多信息！也许对设计师来说，制作这种原型的工具太过复杂了？

这本来是我为Elepath员工写的内部文档，目的是解释我对动效的着迷。毕竟我是个动画工程师。

我们觉得，如果把这些分享出来供大家讨论，一定会很酷。我很愿意倾听来自其他界面设计师的想法，认真地思考怎样以及为什么要使用动画。

在这里给我留言吧，或者上推特跟我聊聊：@pasql ……要么在branch网站加入讨论：

http://branch.com/b/transitional-interfaces-design-ux

英文出处：Pasquale D’Silva
译文由伯乐在线 - 段昕理 翻译
  • 大小: 341.8 KB
  • 大小: 139.7 KB
  • 大小: 113 KB
  • 大小: 200.4 KB
  • 大小: 203.5 KB
  • 大小: 551.2 KB
  • 大小: 1.1 MB
  • 大小: 904.2 KB
  • 大小: 1.2 MB
来自: 伯乐在线
3
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 计算机网络结课考试

    本次考试试题全部是客观题，其中单选题、判断题、填空题，每题2分；多选题每题3分。 答案将于11月18号后公布 1 单选 (2分) 在分组交换网络中，主要取决于网络设备（如路由器）数据处理能力的时间延迟是 A. 排队延迟 B. 传输延迟 C. 传播延迟 D. 节点处理延迟 2 单选 (2分) 假设网络无差错、无数据丢失，利用缺省模式的HTTP 1.1协议，传输一个...

  • 计算机网络-哈尔滨工业大学mooc-第２周作业解答

    第2周作业 计算机网络概述（下） 文章目录第2周作业 计算机网络概述（下）1.题目一题目二 1.题目一 传播延迟 $ dp = \dfrac{M}{V} $ 传输延迟 $dt = \dfrac{L}{R} $ de=dp+dt=MV+LRde = dp + dt = \dfrac{M}{V} + \dfrac{L}{R}de=dp+dt=VM​+RL​ 当dp&a...

  • 分组传输过程中的几种延迟

    1.性能指标：速率、带宽、延迟/时延速率：即数据率或称数据传输速率或比特率，速率是以单位时间（秒）传输信息（比特）量来衡量的。单位：b/s(或者bps)、kb/s、Mb/s、Gb/s    带宽：通常是数字信道所能传送的最大数据率，单位:b/s(bps)。延迟：延迟包括结点处理延迟+排队延迟+传输延迟+传播延迟说明：在分组交换网络中，分组到达路由器，路由器会按照存储转发的方式先收下来，收下来先暂存...

  • 【计算机网络学习】mooc 作业2

    两道习题 1 考虑两台主机A和主机B由一条带宽为R bps、长度为M米的链路互连，信号传播速率为V m/s。假设主机A从t=0时刻开始向主机B发送分组，分组长度为L比特。试求： 1) 传播延迟（时延）dp； 2) 传输延迟dt； 3) 若忽略结点处理延迟和排队延迟，则端到端延迟de是多少？ 4) 若dp>dt，则t=dt时刻，分组的...

  • PBS 安装与使用

    PBS(Portable Batch System)最初由NASA的Ames研究中心开发，主要为了提供一个能满足异构计算网络需要的软件包，用于灵活的批处理，特别是满足高性能计算的需要，如集群系统、超级计算机和大规模并行系统。PBS的主要特点有：代码开放，免费获取；支持批处理、交互式作业和串行、多种并行作业，如MPI、PVM、HPF、MPL；PBS是功能最为齐全, 历史最悠久, 支持最广泛的本地

  • 如何准确的向工程师传达动效设计？

    如何准确的向工程师传达动效设计？ 2015-03-05 09:47编辑：pockry分类：产品设计来源：uisdc 31853 交互设计原型动效设计 招聘信息： iOS工程师html5高级前端开发工程师COCOS2D-X 前端主程 ...

  • 停止不必要的UI动效设计

    前言：这篇短文将会探讨UI设计中动画的过度使用，并将其与早期的视觉设计进行对比，提出一些对于有效的GUI动效设计的建议。 我们将在下文中，简单探讨如何改善下面的这个交互。 UI动效设计的反面案例（线上Demo...

  • 改善交互动效设计 实例

    前言：这篇短文将会探讨UI设计中动画的过度使用，并将其与早期的视觉设计进行对比，提出一些对于有效的GUI动效设计的建议。 我们将在下文中，简单探讨如何改善下面的这个交互。 UI动效设计的反面案例（线上...

  • iOS 停止不必要的UI动效设计

    前言：这篇短文将会探讨UI设计中动画的过度使用，并将其与早期的视觉设计进行对比，提出一些对于有效的GUI动效设计的建议。 我们将在下文中，简单探讨如何改善下面的这个交互。 UI动效设计的反面案例（线上...

  • 网页动效库帮你设计加分

    动效设计是2018年的热门趋势之一。当然，创造动效并没有必要从0开始，有大把的设计项目可以供你快速上手，纳入到设计项目当中去。 如果你仔细找找的话，会发现许多有趣的用来构建UI动效的工具，而这些素材和工具正在...

  • 第40课第八题

    #include #include //第八题，逻辑穷举问题,取值为1的是小偷 int main() { int a,b,c,d; for(a=0;a<=1;a++) for(b=0;b<=1;b++) for(c=0;c<=1;c++) for(d=0;d<=1;d++)

  • 计算机网络体系结构题库

    目录 网络课课后题 王道与其他 网络课课后题 1. 以下不属于计算机网络的特征的是： A、计算机具备独立计算能力 B、地理上集中计算机形成网络 （计算机必须在地理上是分散的） C、所有计算机通过一个通信系统连接在一起 D、提供多种资源共享 解析： 2. 网络覆盖的范围介于局域网和广域网之间的是城域网 ( Y ) 解析： 体域网（Bod...

  • 计算机网络(哈尔滨工业大学Mooc)

    一 。什么是计算机网络 1 通信技术和计算机技术紧密结合的产物 2 定义：互连的，自治的计算机集合。 自治：无主从关系 互连：互联互通 3 交换网络和主机相连 二 。什么是internet? 组成细节，网络组成 三 1.硬件是网络的基础 2.计算机网络中的数据交换必须遵守事先约定好的规则 网络协议：网络中的数据交换而简历的规则，标准，或者约定 协议:所交换信息的格式，意义，

  • 可能是最全的前端动效库汇总

    收集日期为2019-02-28，“★”代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。 文件大小：55.2 kB...

  • 大势所趋！十大令人振奋的移动端APP设计趋势

    这些事物的出现需要时间积累，这也是为什么这些应用到现在才火起来。同样的，今年我们要关注的是定型了的巨屏手机和逐渐沉淀下来的可穿戴设备。随着日常生活中所涉及到的移动端应用的增加，用户在这些东西上的所

  • 7个思路教你正确地使用动效取悦用户

    目前，在网站和APP这两类产品当中，设计师主要是通过动效和微交互来强化体验，其中动效所起到的作用至关重要。 为何愉悦的动效很重要 现如今，数字化的服务和产品已经深入到我们生活的方方面面，可以说各种...

  • 浅谈可视化设计-数据时代的美味“烹饪师”（上篇）

    目录： ...从那个时候开始，我受她的影响也开始对烹饪着迷。我渐渐的发现，烹饪其实与设计是非常相似的：食材的选择，调味料的选择，切菜炒菜的技法，烹煮的方式，摆盘的方式，菜品的颜色控制，甚.

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

    来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势，而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势会在2016年逐一涌现，但是总体上来说，它依然会沿着2015的大趋势来逐步...

  • 【奇思妙想】20个从设计到功能都创意十足的小众网站

    虽然功能类型各不相同，但这些网站收录了很多互联网人的奇思妙想，通过这些网站不仅可以让你抛开繁重工作和枯燥生活带来的不愉快，或许也能为你带来更多的设计灵感。 1. Nippon colors Nippon color...

  • 蒲公英 · JELLY技术周刊 Vol.10 为什么你还不使用 TypeScript

    为什么流媒体直播的延迟那么高 随着通信技术的发展，视频点播、直播业务也逐渐兴起。在这些业务形态中，流媒体技术扮演着重要的角色。但在实际使用中，即便是在优良的网络环境中，主播和观众间依然可以体验到明显的...

Global site tag (gtag.js) - Google Analytics