使用动画转换创建生动的用户体验

典型的应用程序生存期由一些状态组成:数据输入表单、结果界面、含有各种图像的相簿、含有项目的购物车等等。通常,应用程序执行繁 重的任务使用户在这些不同的界面中切换:新的界面替代原来的表单,突然在屏幕中弹出结果,图形和 GUI 对象时而从屏幕中跳出。一般而言 ,各个当前 UI 屏幕都会在操作完成后关闭,然后新的屏幕将取代它的位置。

HTML 应用程序就是一个很好的例子:在某个页面中填写一些数据,单击提交(Submit)按钮,原页面将消除,取而代之的是另一个全新的 用户界面。然后,您将仔细审视这个新界面,考虑自己应该做的事情并找到新的提交按钮。

如果应用程序在这些不同的应用程序状态之间创建一个更具逻辑性的流程,并为用户带来各个新用户界面(UI)会不会更好呢?如果用户不 用重新打量各个新用户界面,而是采用应用程序的流程化方式会怎么样呢?< /p>

这正是动画转换的内容:使应用程序用户界面的转换具有动画效果,从而在这些状态之间创建一个无缝的流程。通过帮助用户理解用户界面 之间的组合,转换可以帮助保证用户连接到程序。

当然,这个问题对开发人员而言意味着更多的工作。让应用程序消除一个界面并显示下一个界面是处理这种问题的最直观的方法。在界面之 间运行某种动画通常要求理解动画过程,然后编写一大堆自定义代码使界面上的元素具有动画效果。

这正是编写 动画转换 库的原因:从根本上简化应用程序状态之间动画的流程,执行合理的默认动画,以及让您专注于编写应用程序代码而 不是动画代码。

演示时间

我们来看一个简单的演示应用程序 FieldsOfText。该应用程序将模拟一个常见的功能(别处可能也有),用户可以请求 GUI 展开自己并提 供更多文本字段。比如说,我将使用一个类似于此的对话框将 至关重要的卡通画 上传到 我的 java.net 博客。应用程序开始只有一个文本字 段,但是通过单击 More 或者 Less 按钮可以增加或减少所显示的文本字段数量。

界面底部也有一个提交按钮,因此此类应用程序通常都有提交按钮。此处的按钮实际上并没有执行任何任务,不过它和其他用户界面元素的 作用一样,都是显示动画转换的过程。

以下是用于显示 GUI 的代码:

// Add the More/Less buttons container
add(moreOrLess);
// Next, add the proper number of text fields
for (int i = 0; i < numFields; ++i) {
   add(textFields[i]);
}
// Finally, add the Submit button at the bottom
add(submitPanel);

在这段代码中, moreOrLess 组件是一个面板,用于保存 More 和 Less 按钮。 textFields[] 数组用于保存将要填充到 GUI 中的各种不 同的文本字段。而 numFields 表示我们希望此时显示的数量。 submitPanel 组件是一个面板,用于保存提交按钮。

下面是提供的用户的基本用户界面:

图 1. 应用程序的初始界面

当用户单击 More 按钮,原文本字段下面将增加一个文本字段,如下图所示:

图 2. 用户单击 More 按钮之后的应用程序界面

时间: 2024-09-17 04:32:10

使用动画转换创建生动的用户体验的相关文章

用户体验中巧妙的过场动画

  (Adrian Zumbrunnen著 Judithzhu & Lynnwang译 查看原文 转载请注明出处MXD) 一些网页优于其他网页,不仅仅是因为它们的内容.可用程度.设计或是特色等等.现代网页间根本的区别在于它们交互及动画细节.我们将分享一些从各种模型中获得的经验,同时分析为何这些简单的样式能够如此好用. 当我们设计数码产品时,我们常常使用诸如Photoshop及Sketch这样的设计软件.大多数从事此行业多年的人显然知道设计不仅仅是视觉呈现.然而,很多人依然继续创造静止的设计.St

巧用过场动画提升用户体验

  (Adrian Zumbrunnen著 Judithzhu & Lynnwang 译) 一些网页优于其他网页,不仅仅是因为它们的内容.可用程度.设计或是特色等等.现代网页间根本的区别在于它们交互及动画细节.我们将分享一些从各种模型中获得的经验,同时分析为何这些简单的样式能够如此好用. 当我们设计数码产品时,我们常常使用诸如Photoshop及Sketch这样的设计软件.大多数从事此行业多年的人显然知道设计不仅仅是视觉呈现.然而,很多人依然继续创造静止的设计.Steve Jobs曾说了这样关于

大数据和个性化设计是用户体验(UX)的未来

在20世纪90年代后期,大多数Web服务使用千篇一律的方法来解决用户需求.在他们开始关注人性化设计之前,这些模板化的解决方案已经盛行了近二十年. 以人为本的设计侧重于最终用户的需求,开发人员为每个用户定制个性化解决方案.尽管以人为本的设计有着明显的好处,但它仍处于起步阶段.它仍然是一个新颖的概念的原因是它在大数据出现之前是不可能的. 大数据为UX开发者们打开了新的大门.它们可以使用令牌跟踪用户,并提供定制化的用户体验. 有几种不同的方法可以将大数据应用于改进以人为中心的设计: 1)Web服务商可

《UX设计之道——以用户体验为中心的Web设计(第2版)》一第1章 用户体验设计之道1.1 什么是用户体验设计

第1章 用户体验设计之道UX设计之道--以用户体验为中心的Web设计(第2版)好奇心+激情+同理心 重要的是要永远保持质疑.好奇心自有其存在的理由.当人们思索永恒.生命和现实中不可思议的神秘事件时,难免会心生敬畏.每天能够尽点力去理解这些神秘点滴就已足够. --阿尔伯特·爱因斯坦 好奇心是大自然最早的学校. -Smiley Blanton 激情和目标携手同行.当你确定目标时,你会发现你对事物满怀激情. -Steve Pavlina 上天赐予了人类一份重要礼物,即我们拥有同理心(empathy)的

用动效创建的可用性:动效中的用户体验宣言

本文讲的是用动效创建的可用性:动效中的用户体验宣言, 原文作者:Issara Willenskomer 译文出自:掘金翻译计划 译者:Ruixi 校对者:cdpath,osirism 用动效创建的可用性:动效中的用户体验宣言 下面这段宣言即是我对这个问题的回答--"作为一个UX或者UI设计师,在界面中,如何在合适的时间和位置通过动效的使用来支持可用性呢?" 在过去的5年中,我有幸指导过来自40多个国家的 UX 和 UI 设计师,而且我为这些顶级品牌和设计咨询公司带来的建议和指导基本上都

20组赋予绝佳用户体验的高素质动画图标

  虽然早期的GIF动画不论是从技术层面还是从应用范畴来看,都和界面设计并无特别直接的关系,但是近几年,动画图标开始在界面设计中大量运用,并有流行开来的趋势. 坦率的讲,让图标动起来,或者通过动态图表达一些有趣的场景并非什么新鲜的东西,但是它们在很长的一段时间里都玩儿的比较简单,居于次席,或者纯是拿来搞笑.但是现在不一样了,通过精巧的后期处理,这些动态的图标成为了界面上令人流连忘返的重要组成部分,成为了提升用户体验不可或缺的元素.如此一来,Gif图所构建的动画图标开始"大规模入侵"网页

教你使用转场动画提升用户体验

  的确,相比于绘制插画.创作专题页面.设计UI这些富有创造性的设计活动而言,设计表单样式似乎确实是一件单调而苦逼的差事.但仔细想想,如果你设计的表单是支付流程中最重要的环节,那么情况就又不一样了,因为它将是用户选择你和你的企业的起点,也是用户信任的明证.所以这个环节的用户体验必须精雕细琢,尽量臻于完美.除了设计好表格和UI样式之外,合理地运用转场动画会让整个体验提高许多. 这个地方所用的动画并不是单纯的愉悦用户,更重要的目的是让用户明白这个环节是会发生什么,并且如何高效地使用这一产品.如果这个

如何创建自适应系统来增强用户体验

译者注: 普适运算这个概念已经在计算机行业提出了很久. 在设计领域, 随着便携式智能设备的发展与普及, 越来越多的设计师也将这个理念融入到产品设计中去. 本文作者通过几个实例生动的讲解了在设计自适应系统时可以利用的设备与设计理念. 希望能让读者受益 . 原文地址: Creating An Adaptive System To Enhance UX ----------------------------------------------- 在计算机科学中,"自适应系统"特指能够根据所

使用转场动画提升支付用户体验

这个地方所用的动画并不是单纯的愉悦用户,更重要的目的是让用户明白这个环节是会发生什么,并且如何高效地使用这一产品.如果这个环节缺少动画会令人感到缺点儿什么,那么这个动画是成功的.如果移除了动画,用户觉得照样可以凑合着用,则意味着这个动画是可有可无的. 作为http://www.aliyun.com/zixun/aggregation/17019.html">Stripe Checkout这一支付应用的设计团队,我们在移动支付的体验设计上进行了大量的探索,也耗费了巨量的时间经历.对于支付环节