UI设计|指尖上的UI设计手势交互及用户体验探索

发布时间:2017-12-12编辑发布:迪麦互动

移动端用户的数据随着3G、4G的改革一直在上升,促使着我们在移动端上UI设计、交互需要探求更好的用户体验,现在一款app是否成功,用户体验的实现至关重要。

还记得当年浏览网页时的点击、滑动、滚动和键盘快捷键那些日子吗?在移动端上,这些交互不再是唯一的方式了,自从苹果公司推出iphone后,多点触摸技术成为了主流,用户不只是会点击界面,还会在界面上进行闭合、张开、滑动等手势操作。手势已经成为了一种新的 " 点击 " 方式。

多点触摸技术的创新,手势驱动设备的出现,让我们改变原有的交互,让交互变得更有趣更有用。

UI设计中手势的力量

手势非常自然和直观,他们与真实世界反应类似。

对于使用手势,这里有三个主要的理由:

1.干扰少

App 内,手势控制使用地越多,在屏幕上出现的按钮就越少,这样可以留出更多空间给更有价值的内容。这使得 app 以内容为重点,并让用户在没有障碍,或者在分心的情况下也能进行最重要的操作。

2.使用简单

一个手势一旦被用户发现和学习使用就会让用户在体验感到愉悦,而且手势可以减少步骤,来达到提高交互体验的目的。例如,当你需要删除一些项目时,用 " 一次点击删除一个 " 的方式的很浪费时间的,但是如果使用 " 滑动一下,删除一个 " 的滑动手势,就更简单快速,让用户更加愉悦。

3.无缝交互

虽然按钮看起来对于触发响应更加有用,但手势具有更大的潜力,使内容的交互更加直观。

手势的缺点

在使用app时,我们时常会自然而然的用我们所熟悉的手势方式,由此可见,准则任然也是一个非常重要的准则。就像 Thomas Joos 的观点:手势控制最大的缺点是它有一条认知曲线。每次你移动混乱的用户界面,这个app的学习曲线就会上升,这是因为手势具有较低的可发现性,他们总是隐藏,人们需要能找到这些手势。所以,在 UI设计里可视按钮上的手势越多,用户混淆它们的可能性就越大。


1.增加用户负担 

大多数手势学起来或者记起来不自然也不简单。举个例子,在大多数 APP,一个手指的手势就对应一件事,用两个手指做一个同样的手势意味着另外一件事,其他对应事件的手势还有很多。 

2.缺乏反馈 

在大多数情况下,手势不会留下任何路径记录。这意味着,如果做一个手势但没有得到反应或者得到错的反应,这样就只能获得很少的信息或者不能获得有帮助的信息去解释为什么这么做。 

3.缺乏一致性 

大多数手势在 app 中还不是标准统一的。他们对于用户不总是显而易见的。甚至一个简单的滑动手势,在众多邮箱 app 内的邮件项目中也有着不同的工作方式。即使是简单的手势,如刷新电子邮件项目可能会在各种邮件应用程序中有着不同的运行方式。例如,在 Apple Mail 中,删除一个未读项目,你应该向左滑动这个没有打开的邮件,然后界面会出现选项来删除这个项目。在 Gmail 里,向左滑动可以把邮件标记为未读状态。

手势交互设计成为移动端UI设计成功的关键

手势教学引导

当我们设计师做界面设计时,应该给出用户获取手势的线索,如果没有可见的线索,用户可能会产生怎么与app进行互动的困扰。这时候就需要引导用户使用你的UI设计。例如轻点、滑动和捏合来完成任务,但是不同于图形界面的操作,手势的交互用户往往是看不到的。因此,要让用户能发现手势是很重要的。你需要确保你提供了正确的线索----通过视觉引导来帮助用户更容易的发现如何与界面进行交互。

好手势的运用

一款app里面要使用手势,就必须先去了解目标用户及市场,尝试在app里使用它们相同类型的手势,这样你的目标市场用户行为能帮助你优化你的界面,让用户从一开始就能舒适的使用你的app。Clear 是 " 手势驱动 "App 的一个很好的例子。该 app 完全基于使用滑动,拉动和捏合等手势驱动。它有极简的用户界面(没有按钮),但可以非常简单地使用。

应境引导

教程和演示的做法相当流行。在许多app中加入教程意味着要想用户显示一些说明内容来介绍界面。然而,UI教程不是介绍app的核心功能的最优雅的式。 

良好执行的UI设计手势总是可以在易于实现视觉提示和渐进式披露的游戏中找到。这显而易见,最好的游戏可以使人们随着时间的推移来学习到技巧,而不是靠指导他们。例如,PuddingMonster 的游戏机器完全基于手势,但是他们允许用户得到基础的信息,他们不需要做很多的猜测。他们可以展示动画场景,让用户马上知道要做什么。

动效在基础手势设计中的作用

手势总是与移动app中的动效相关联。动效在维护用户体验中起着非常重要的作用。当动效与手势一致时,用户就会意识到自己与该物体正在相互作用。动效在向用户提供视觉反馈上是非常重要的。没有动效,用户就不能获得足够的信息反馈,不能确定他们是不是成功地完成了手势动作。一些创新的手势交互已经有了固定标准的配合动效,比如拉拽刷新。这个动效非常直观,许多基于列表的 app 根据惯例都会采用这种手势。

动效视觉提醒:例如下图中的这个游戏app是完全基于手势操作的,这个app让用户不用去猜测就能知道该如何操作。用动画来传达功能信息能立即让用户清晰的知道该怎么做。

内容梳理:通过微妙的视觉线索来暗示用户进行手势操作。例如下图中卡片的展示,它表明这张卡的背后还存在着其他的卡片,这清晰的表明了可以滑动卡片。

功能可见性:你可以让你界面里的某些元素具有很明显的可供性来让用户知道这个是可以进行某种操作的。例如下图中点击相机icon后锁屏就会从下往上弹起,展示出在下面的相机功能。

总结:手势是交互设计中强大互动模式。设计一款移动端的app,在界面设计时就要思考好手势运用,让交互设计在界面中起到协调和节约时间的作用。移动设备发展到现阶段,触摸和手势交互使用移动体验变得更加有趣而简单。让设计师的UI设计更强大。







分享至: