T: 400-6065-301
169
优秀的用户体验设计师可以轻松解释设计概念中每个决策背后的逻辑。这包括信息架构，页面内容的层次结构，流程和所做的假设。潮州做网站
迟早，动画将被引入线框概念，然后做出设计决策或解释它们变得更加困难。诸如“它会很酷！”或“它很时髦”或“令人兴奋”的原因正是设计开始失去力量的领域。在我们的设计考虑中，动画应该有更好的理由。我们应该有理由定义动画并解释它们的目的 - 就像我们解释设计中的所有其他元素一样。
功能性动画是一种微妙的动画，我们将其嵌入到用户界面设计中作为我们流程的一部分。
与迪士尼工作室制作的动画或电脑游戏制作的动画不同，功能动画具有清晰，合乎逻辑的目的。他们的目的是通过支持我们试图传达的解决方案来服务于设计理念。功能动画是我们UX设计库中的另一个工具。
在一个完美的世界中，我们应该能够根据明确定义的逻辑目的来验证功能动画。如果我们设计中的某个动画遵循逻辑目的，那么它是一个有效的功能动画，它在我们的设计中的存在可能是合理的。但如果它没有任何意义，那么它可能是多余的，需要重新考虑。
在过去一年左右的时间里，在开展各种项目的过程中，我收集了一系列九个逻辑用途，今天帮助我验证功能动画。我已经意识到，通过检查一个定义明确的动画，我可以很容易地将它放在这个系列的一个或多个组中。
它也可以反过来：当动画不适合功能目的时，它通常也会感觉很尴尬或烦人。以下是我目前收集的家庭小组。我希望你发现它们在验证你自己的设计动画方面很有用。
方向照亮结构。在这个小组中，我们发现动画在我们的导航中发挥作用，为网站的信息架构增添光彩。这种类型的动画背后的逻辑是保持用户的方向感，并帮助用户理解刚刚在页面布局中发生的变化，触发变化的内容以及如何在需要时再次启动变更。
一个典型的例子是切换隐藏内容的按钮。单击它时，会出现一个隐藏的面板。当您关闭面板时，它会缩回到操作按钮中。
第一次，用户无法真正预测即将发生的交互。隐藏面板的开放动画尺寸越来越大，有助于用户保持导向，不会觉得他们已离开页面或内容突然消失。他们仍然控制着正在发生的一切。关闭动画有助于用户将收缩面板与操作按钮相关联 - 因此，下次他们将记住如何再次打开面板。
逻辑目的：避免令人惊讶的过渡，并确定用户的方向。
众所周知的可用性规则是在网站的设计和内容上保持一致。一致的网站是可预测的，因此是可学习的。此规则适用于操作按钮等。
在某些情况下，我们被迫设计一个动作按钮，其功能在某些条件下会发生变化。我们通常在整体空间有限的设计中看到这一点。因此，已经学习了动作按钮的功能的用户可能需要学习新功能。
“保存”和“编辑”按钮可能是可切换按钮的最常见示例。但这是一个简单的案例，因为虽然行动是矛盾的，但它们具有相同的背景。在其他情况下，当这两个行动没有立即明显的关系时，我们面临可用性挑战。这就是功能动画可以提供帮助的地方。
逻辑目的：强调操作按钮中的功能更改。
第三个家庭与我们之前看到的定向组有一些相似之处。在这些动画中，用户选择列表中的项目以放大其详细视图（超过列表视图）并且能够返回到完整列表视图。
我们通常在图像库，卡片和项目选择器中看到这一点。用户将选择一个项目，并立即看到与该选择相关联的详细屏幕。
这里的挑战是确保用户感觉他们仍然在控制中并保持在给定的环境中。在这种情况下，功能动画通常是必须的。
在检查这个家庭群体中的众多功能动画时，我注意到一种常见的模式，当准确实施时，可以提高动画的效果：
初始状态是原始项目列表。
每个项目都用唯一的视觉提示指定，例如主色，符号，粗体标题或缩略图。
当用户进行选择时，创建新页面并将所选择的视觉提示重新定位到突出的主导位置。例如，整个页面可能会使用项目的唯一颜色进行着色; 该项目的符号将展开并位于页面标题中; 项目的名称会变大并显示在页面标题中。
在新页面中会出现一个明显的关闭操作按钮，例如“取消”，“关闭”，“后退”或“x”。
逻辑目的：将缩略图与其详细视图相关联。
视觉提示可帮助用户更好地了解如何与产品界面进行交互。在包含非常规对象或独特导航方法的设计中尤其需要它。
当我们打开页面时，很容易检测到这种功能性动画，并且突然触发快速一次性动画，演示设计中某些功能的运行方式。
逻辑目的：提示展示非传统功能或隐藏动作。
当需要超越嘈杂的布局时，该家庭组会帮助用户处理那些不幸的情况。
设计人员通常会努力避免嘈杂的布局，这会给屏幕加载各种文本和视觉内容，这些内容会相互竞争以引起用户的注意。
减少界面噪声的一种方法是消除混乱。但是，有时这项任务并非如此微不足道。考虑一个新闻网站，其所有者想要从主页中删除文本新闻或图像。
就其本质而言，Motion在用户界面中具有最高的突出性。文本段落和静态图像都不能与运动竞争。我们可以利用这个功能动画组来利用这一点。但请记住，通过添加具有更高突出度的对象来增加界面噪声是一个滑坡。
在下面的动画示例中，我们看到由于拥挤的背景，向购物车添加项目不够明显。所以，需要动画。
逻辑目的：吸引用户的注意力，并超越嘈杂的布局。
有时在设计分析和用户访谈期间，我们发现用户需要我们只能通过量身定制的模拟来解决。
对于这些特殊情况，我们将创建一个自定义的功能动画。在下面的示例中，足球分析以图形，数字，表格和图形永远无法与之竞争的方式呈现。在第二个示例中，用户可以根据时间和地理位置监控地图上的温度 - 这是一个难以以任何其他方式解决的特定用例。
逻辑目的：模拟难以传达的主题。
视觉反馈在用户界面设计中非常重要。在现实生活中，按钮，控件和对象会响应我们的交互，这就是人们期望事物发挥作用的方式。
但请记住，这个家庭组中的功能性动画需要非常微妙，并且应该响应性地设计。按钮反馈广泛用于每个界面，因此使用功能动画并不是真正需要它会带来更多弊大于利。在触控设备上，功能动画可以作为翻转效果的替代品。
逻辑目的：确认用户的操作。
这个小组是关于控制的。对于用户而言，控制意味着在任何给定时间知道并理解他们在系统中的当前上下文。
功能动画提供对系统状态的实时监控，使用户能够快速了解操作何时开始，剩余时间以及确切何时结束。也许在HTML网站中担任此角色的第一个功能动画是微调器GIF，它仍在许多界面中用于指示正在进行的操作。
此家庭组中的有效功能动画通常遵循以下模式：
显示明确的反馈，以表明该流程已启动。
在流程进行过程中提供持续的反馈。
估计过程的完成（顺便说一下，旋转器失效的一个步骤）。
显示流程已终止的明确反馈。
该组中的一个着名动画是“下拉刷新”，它启动移动设备上的内容更新过程。在各种应用程序中检查这些动画的实现，您很快就会注意到，不完全符合上述四个步骤的动画感觉不对。例如，由于缺乏流程已终止的明确反馈而产生的不确定性可能促使用户再次启动刷新操作。
逻辑目的：在线性过程中赋予控制感。
这个小组都是关于营销 - 它有一些有趣的动画！虽然我们动画系列中的前八个组合是合乎逻辑的，但这个组合充满了情感！
假设我们需要指出产品的行为，突出显示特定功能，促进独特功能，甚至将品牌的价值和风格捆绑到产品中。
在任何这些场景中，动画都可以很好地服务于公司的营销策略。这种方法可能不是以用户为中心，但它绝对具有功能性。
逻辑目的：支持公司的品牌价值或突出产品的优势。
在我们的网站和应用程序中提供快乐或愉悦时，动画贡献很多。但要记住，它们必须首先发挥作用。
MailChimp的Aarron Walter在他的“ 为情感设计”一书中写到了用户需求的层次结构。它与马斯洛的需求层次相似，但不是描述我们的个人需求，而是描述了我们作为用户的需求。沃尔特的等级制度将功能需求定位为金字塔的基础，而对快乐的需求则是最重要的 - 只有在基础得到满足的情况下才适用。在这篇文章中，我只讨论了这个功能基础，而没有涉及快乐和喜悦的各个方面，值得一篇属于他们自己的文章。
到目前为止，我编写了一系列九条规则。这九条规则很好地映射到我目前遇到的每个动画。它们帮助我评估我在界面中看到的动画，它们是决定如何在线框设计中添加动画的一套强有力的指导原则。我希望他们在你的设计过程中以与他们相同的方式为你服务。
但是，这项研究正在进行中。因此，下次您遇到功能性动画时，请继续针对这九个组中的一个进行测试。如果它不适合任何一个并且动画有明确的目的，请与我们分享，也许你已经找到了第十个规则系列！
潮州做网站
最新文章
随机推荐
