如何设计姿态驱动的UI

尼克布哈奇 经过 尼克布哈奇  |  可能。 2017年11月11日

请记住鼠标悬停并单击鼠标的日子是与站点或应用程序交互的最常用的触发器?那些日子已经一去不复返了。当Apple推出的第一个iPhone时,多点触控技术成为主流,用户了解到,他们不仅可以点点和点击界面,还可以捏,扩散和刷卡。手势成为新的点击次数。

今天,移动UI的成功可以通过它使用手势有效。

 

如何选择一个好的手势

在涉及UI中的手势时,可以了解您的市场和其他应用程序可能正在使用的其他应用。尝试在您的应用中使用相同类型的手势。这样,您不仅根据目标市场的行为优化您的UI,还可以从一开始就为用户设计更舒适的方法。

 

教学手势

手势是一个必须在每个移动应用程序中的必要性,但这始终是一个挑战,使他们对用户显而易见。触摸接口提供了许多使用自然手势的机会,如点击,刷卡和捏合来获取完成的东西,但与图形用户界面控件不同,基于手势的交互通常是隐藏的用户。因此,除非用户有先验知识,否则姿态存在,否则他们不会尝试。

因此,设计设计至关重要。您需要确保您提供正确的暗示 - 视觉指令,帮助用户可以轻松发现它们如何与界面进行交互。

 

在船上避免教程和演练

教程和演练是手势驱动应用程序的流行惯例。在许多情况下在应用程序中结合教程意味着向用户提供一些指令以解释该界面。但是,UI教程不是解释应用程序的核心功能的最优雅方式。前期教程的主要问题是,用户必须记住一旦进入的所有这些新的方式使用该应用程序。一次的信息太多可能导致更多的混乱。例如,清除应用程序从强制性7页教程开始,用户必须耐心阅读所有信息并尝试将其提交给他们的内存。这是不好的设计,因为它需要用户即使在实际尝试应用程序之前也要前期工作。

1

 

教育行动的背景

谈到教人使用您的UI时,我建议主要通过教育行动的背景(当用户实际需要时)进行。为了教人们一个新的手势,你必须慢慢开始。鉴于一些迭代,可以将指令转换为更逐渐的发现。仅在时间提示中使用并专注于解释单个交互,而不是尝试在用户界面中解释所有可能的动作。通过提供明显的上下文线索,在手势上提示。

下面您可以从YouTube应用程序查看用于Android的姿态教育屏幕。该应用程序具有基于手势的互动,但不使用教程来指导用户。相反,它使用暗示在新用户的第一次启动时显示的提示,当用户到达应用程序的相关部分时,一个时间。该技术基于文本命令,提示用户执行手势并描述与简短和清晰的描述相互作用的结果。

2

 

使用动画来传达手势

手势,可用,因为没有动画就没有。作为设计师,您可以使用动画来传达有关可用操作的信息。例如,为了使用户意识到它们可以与某个元素进行交互,可以在交互元素上创建文本命令,并为下面示例中所示进行动画。

3

基于使用动画,有三种流行的技术可以帮助教育用户。第一个是提示运动。提示运动或动画视觉提示,显示在执行操作时如何与元素进行交互的预览。它旨在在手势和它触发的动作之间创建关联。例如,布丁怪物的游戏力学完全基于手势,但它们允许用户获得所要做的事的基本思想,而无需猜测。动画传递有关功能的信息 - 用动画展示一个方案,它立即清除用户该做什么。

4

第二种技术是内容戏弄。内容戏弄是微妙的视觉线索,表明可能的内容。下面的一个例子演示了卡片的内容挑逗 - 它只是显示当前卡后面存在的其他卡,这使得可以清楚发布。

5

我想提到的第三个和最后一项技术是可折扣的。您可以提供UI的一些元素,将用户指向接口中的功能,并使用反弹或脉冲作为可用手势的指示。该技术的示例可以在Apple iOS中找到。当用户点击相机图标时,锁屏会反弹,显示下方的相机应用程序。

6

 

结论

虽然触摸手势对我们来说主要是看不见的,但是有许多设计技术可以让用户在可能的情况下窥视。正好在提示,动画线索和内容戏弄是隐藏手势的一些方式。