细节是魔鬼,设计在于细节
 首页> 读。设计

移动应用的手势与界面设计元素

本文为翻译

作为一个手机的UI或UX设计师,你可能还记得苹果推出的第一代iPhone,就好像它是昨天。除其他外,它推出了一款完全触摸屏为中心的互动,个人的私人和个人的设备。这是一个改变游戏规则。

今天,孩子们长大了带触摸屏的体验,喜欢它的最自然不过的事。家长都惊讶于他们的孩子如何快速了解一个平板电脑或智能手机作品。这表明,触摸和手势交互有很大的潜力,使移动体验更轻松,更有趣的使用。

具有挑战性的导航和按钮

人机接口指南”和苹果的App审查委员会的引入移动应用的质量有很大的影响。它帮助了很多设计师和开发人员理解核心的移动用户界面元素和交互。苹果广受欢迎的建议,例如,是使用UITabBarUINavigationBar组件-一个指引,我们许多人都遵循,包括我在内。

事实上,如果你设计的第一个iPhone应用程序,你可以诚实地说,没有任何顶部或底部的导航元素,在触摸和送过来的截图。

顶部和底部的导航存在着自身的问题,他们占有了近20%的屏幕。在这一个小小的画布中设计,我们应该利用好每一个像素,找到重点内容。最终,这是真正所要的东西。

在这个创新的行业,手机设计师需要一些时间来探讨如何设计更多的创造性和原创接口。添加到应用程序,“条条框框,是令人沮丧,”这是毫不奇怪实验UI和UX设计如清除这些,相信有一天,能看到光明。但他们现在在这里。而他们可能是比较极端和专注于的达官显贵用户和尝鲜,他们向我们展示伟大的创造性潜力的手势驱动的接口。

移动应用的手势与界面设计元素

拉刷新感觉非常直观

手势驱动接口电源

对于两年多来,我一直在探索手势的方法,使移动应用程序的用户体验更人性化。对我来说是最重要的标准,这些互动的感觉非常直观。这就是为什么创造性的互动,如罗兰Brichter的“ 下拉刷新 “,已经成为一个标准的,在任何时间。Brichter的互动,引入的iPhone,在特威特感觉如此直观,突然无数基于列表的应用后,它的外观采用了手势。

删除UI的多余部分

开始设计更手势驱动的界面,是一个伟大的开始,使用您的主屏幕只是作为一个视口的主要内容。不必感到必须要做出重要的导航主屏幕上,并始终可见。相反,考虑给它一个它自己的地方。说到在一个虚拟的2-D和3-D环境,你可以设计的导航某处旁边,下面,后面,在前方,上方或隐藏在顶部的主视图。拖动或轻扫手势的方式来引导用户到这个UI元素。这是由你来定义和设计应用程序。

在iOS中,我喜欢的Facebook和Gmail,举例来说,是一种“刷卡式或抽屉试”的菜单。这种趋势UI的概念是非常容易使用。用户刷卡视口的右侧,来揭示导航元素。这不仅使应用程序内容更有重点性,而且访问的应用程序的任何部分,只需要两到三个步骤。

移动应用的手势与界面设计元素

Facebook和Gmail的侧刷卡菜单

除了UI导航,你的应用可能还支持上下文交互。添加相同的两个或三个按钮,每个内容项下肯定会有杂乱UI!虽然按钮似乎是有用的触发器,举手投足间有很大的潜力,使内容更直观和有趣的互动。不要犹豫,将攻,双攻,攻拿着触发重要的相互作用,如简单的手势。Instagram的支持一个简单的双击点选执行它,为主要特点之一,喜欢和unliking的内容项目。我也不会惊讶地看到其他应用程序集成在不久的将来,也会走上这条路。

一个适合的界面

当设计一个创新的移动产品,用户行为预测是非常困难的。我们与比利时公共广播电台工作的时候,我的团队真的很挣扎音乐可视化和实时新闻与UI之间的平衡。上下文的场景和喜好的数量之多,很难拿出完美的用户界面。所以,我们决定把一个简单的拖动手势,使用户能够自行调节平衡。

移动应用的手势与界面设计元素

用户可以通过拖动,平衡与音乐相关的内容和现场新闻。

这种姿态增加了一个创造性的相关层面到应用程序。拖动手势不走一节(新闻或音乐)到另一个用户。相反,它使用户能够把重点放在他们最感兴趣的地方,不会错过另一方面的内容。

一定的时间,尺寸和动画效果

什么样的行动被触发,当用户点击一个项目吗?你怎么想像它实际上已经发生?到视口中不特定UI元素动画的速度有多快?它会自动熄灭后,屏幕5秒没有相互作用?

触摸和手势驱动的设备的兴起,极大地改变了我们设计的方式互动。在屏幕和网页的思维,而是我们都在思考更多的时间,维和动画方面。您可能已经注意到,微调用户交互和静态线框截图展示了他们向同事和客户是不容易的。你没有完全看到,理解和感受会发生什么事,当你触摸,按住,拖动,轻扫项目。

某些原型工具,包括流行音乐INVISION,可以帮助带线框生活。他们是非常有用的测试应用程序的流量,并针对当用户可能卡住。你的应用程序有很多事情不是简单的来回导航,所以你需要尽快检测接口的错误和混乱的潜在来源。

移动应用的手势与界面设计元素

INVISION让您导入和连接您的数码线框。

要更加创新和实验,获得与你的客户的解释说,传统的线框UX交付他们需要的。互动线框显示值,并鼓励他们在这个过程中。这可能会增加时间和预算,但如果他们期待着您多走一英里,它不应该是一个问题。

学习的成本

当设计基于手势的互动,要知道,每次你删除UI杂波,应用程序的学习成本上升。没有视觉提示,用户可以得到有关如何与应用程序交互的反馈。一对于探索那是没有什么问题的,但用户应该知道从哪里开始。因而许多应用程序在第一次启动时会显示一个用户界面来演示一些操作,演示应操作只有最重要的相互部分,一次不能说明一切。如果它是不太明确的和长期少用的,用户将可能会跳过它。

为什么不挑战自己,并逐步推出富有创意的UI提示用户使用的应用程序吗?这种模式通常被称为渐进,是一个伟大的方式,只显示到用户的当前活动有关的信息。YouTube的捕捉应用程序,例如,告诉用户旋转设备就像用户第一次打开相机横向。

移动应用的手势与界面设计元素

打一个UI演练和/或视觉提示的学习曲线

添加到UI的视觉线索,是不是唯一的选择?在小小的应用程序,在搜索栏中出现了几秒钟,向上的动画前,关屏,一种微妙的方式说,它正在等待被推倒。

别再说话了,开始制作

iPhone迎来了一场革命的互动沟通。仅5年后,触摸屏设备都在我们身边,和交互设计师正在重新定义人们使用数字内容的方式。

我们需要探索和了解基于触摸和手势界面的潜力,并开始思考更多的时间,3维和动画方面。证明了一些创新的应用,手势是一个很好的方式,使一个应用程序以内容为重点,许多基于手势的互动,似乎在看起来是非常直观的。

所有主要移动平台的手势的要都有一个完整的概述,请卢克弗罗布莱夫斯基的“ 触摸手势参考概述, “我希望你启发,探索基于手势的互动,并加强你在移动界面上的冒险。不要怕多走一英里。互动支持,你可以遍历自己的方式来尽可能最好的体验。所以,让我们停止说话,开始做。

 

发表评论

还可以输入 1994 个字符

全部评论 (0)
切换登录

注册

切换注册

登录

忘记密码 ?