不只是按钮:拥抱手势驱动交互

4 评论 10426 浏览 5 收藏 11 分钟

增哥点评:交互设计的原则繁杂不堪,需要仔细的梳理并分类。我们生活中会有很多交互设计相关的问题,勤于思考和总结,才能使我们在设计道路上走的更远。

作为一位移动端的UI或UX设计师,你可能还记得苹果发布第一部iPhone的情景,它就像发生在昨天那样。除了别的一些原因,它把完全以触屏为中心的交互放在最私密的个人设备上。它改变了所有的游戏规则。

现今,触屏体验伴随着孩子们的成长,就像是一件很自然的事。家长们都很惊讶于,他们的孩子这么快就懂得去使用平板和智能手机。这表示触摸和手势交互很有潜力使手机体验变得更好,让使用过程变得更有趣。

挑战按钮和工具条

“人机交互指南”和苹果软件审查委员会(Apple’s App Review Board)对手机软件的质量有很大影响。它帮助很多设计师和开发者理解手机UI的元素和交互的的核心。例如,苹果最受欢迎的建议就是使用UITabBar和UINavigationBar部件——这是所有人,包括我都会遵守的指南。

事实上,如果你说你设计的第一个iPhone软件没有任何顶部或底部工具条,联系并发一幅截图给我,我会请你喝一杯东西并且发一条twitter,你已经超越你所在的时代。

顶部和底部工具条占据屏幕近20%的位置。设计一个小画布的时候,我们应该把每一个可用的像素都用在内容上。这才是问题的关键。

在创意产业中,移动端设计师应该花一点时间去探索怎么设计更创新,更独创的界面。由于“跳出思维”的软件受到苹果无情地拒绝,带有实验性UI或UX设计的软件(如,Clear和Rise)花了很长的一段时间才能与大家见面。不过它们还是出新了!它们可能太极端,以及专注于那些高端用户和适应能力强的用户,它们让我们看到手势驱动交互的可能性。

下拉刷新是一个直觉的行为

手势驱动交互的力量

在过去的两年中,我探索过很多让手势增加手机软件体验的方法。其中最重要的一条准则就是这些交互都是直觉而为。这就是为什么创造性的交互,譬如Loren Brichter’s “下拉刷新” 很快就成为一个标准。Brichter的交互(包括Tweetie for iPhone)是那么的直觉,以至于一时间无数的列表软件都基于原有外观使用这一手势。

清理混乱的UI

把你的主屏幕变成主要内容的窗口是开始设计一个更加手势驱动界面的好方法。你的责任并不是让导航永远显示在主屏幕。你更应该考虑给导航一个属于自己的位置。说到伪2-D或3-D环境,你可以把导航放到主界面的旁边,下面,后面,前面,上面或者把它浮动隐藏在表面。拖动或滑动的手势是一个引导用户去这个UI元素的好方法。最后怎么定义和设计软件,这取决你。

例如,我喜欢IOS上的Facebook和Gmail,它们有一个“侧边滑动”的菜单。这个流行的UI概念是非常容易使用。用户把界面向右滑动,显示导航。这不仅把软件变得更关注内容,还通过2、3步的交互,把用户带到软件的任何一个地方。很多软件远做不到这一点!

Facebook和Gmail的侧边滑动菜单

此外,通过这样的导航,你的软件还可以提供情景互动。把相同2、3个按钮放在每个内容模块的下方会是UI变得混乱!按钮似乎变成一个有用的触发器,但手势有更大的潜能去使带内容的交互变得直觉和有趣。不要犹豫,去整合简单的手势(如:点击、双击、点击并拖动)来触发重要的交互。Instagram提供简单地双击来执行重要的功能,喜欢和取消喜欢某个内容。(-。-似乎不能取消喜欢。。。)我觉得很快其他软件就会整合这样的快捷操作。

自适应的界面

当设计一个革新的手机产品时,预测用户行为是非常困难的。制作Belgium’s Public Radio时,我团队努力保持音乐可视化和实时新闻之间的平衡。数量巨大的情景和偏好让它很难变成完美UI。所以我们决定整合一个拖曳手势让用户可以自己调节这个平衡。

通过拖曳,用户可以调节 与音乐相关的内容和实时新闻 之间的比例

这个手势为这个应用增加了创新的关联性维度。拖曳手势并不会把用户从一个界面(音乐或新闻)带到另一个。相反,它让用户可以关注感兴趣的一类型内容而不会忽略其他内容。

根据时间,维度和动画来考虑

什么动作应该在用户点击是触发?你又是怎么知道它已经触发?UI动画在界面上应该有多快?5秒钟没有任何交互以后是不是应该自动消失?

触屏和手势驱动的设备增加,戏剧性地改变我们设计交互的方式。我们更多地思考时间、维度和动画方面而不是屏幕和页面。你可能已经注意到,很难用静态线框图微调交互和展示它们给同事、顾客。你不能完整看到、理解和感受你触摸、等待、拖曳和滑动它们是会发生什么。

某些原型工具(如:Pop和Invision可以赋予线框图活力。它们在测试应用的运动和标示出什么时候用户会在哪些地方卡住都起到很大帮助。你的应用可以比简单的前进后退导航做得更多,你可以尽可能地察觉到更多的界面bugs和潜在的混乱。难道你不希望你的开发团队指出它们吗?

Invision可以让你导入和链接你的电子线框图

要变得更革新和实验性,首先你应该告诉客户,传统的线框图不是他们要的可交付UX。展示可交互线框图的好处,鼓动他们加入到这个过程中。这可能增加时间和预算,但这并不是一个问题,如果他们期待你走得更远。

我甚至提供一个概念界面的视频给客户,因为他们参与交互线框图的制作和整理细节。我的客户需要一些性感的东西去取悦他们的股东。

学习曲线

当你设计基于手势的交互,要知道每次你清理混乱的UI,应用学习曲线将会上升。没有可视提示的话,用户会困惑于怎么与这个应用进行交互。一点点探索不是问题,但是用户要知道怎么去开始。很多软件会在首次使用时展示UI演示。我同意Max Rudberg的观点——演示应该只解释一些重要的交互。不要尝试一次性解释所有事。如果演示太长太复杂的会,他们会跳过它。

为什么不挑战自我,逐步介绍这些有创意的UI提示,就像用户正在使用他们?这个模式通常会进阶展开,信息提示只会在用户做出相关的动作时出现。例如,YouTube’s Capture会告诉用户横向旋转设备,就像是他们打开相机那样。

通过UI演示和/或可视化提示来对抗学习曲线

为UI增加可视化线索不是唯一的选择。在Sparrow中,搜索栏出现几秒钟然后上移出屏幕,一个很精巧的方式告诉大家,它在等着被拉下来。

停止吹水,开始制作

iPhone引来一场关于交互的革命。只需5年,触屏设备就会包围我们,然后交互设计师从新定义人们怎么使用电子设备。

我们需要探索和理解触摸、手势交互的潜力,然后开始基于时间、维度和动画的思考。经过一些革新的软件演示之后,手势能够让一个软件更专注内容、更原创和更趣味。很多以前看来实验性的手势交互将变得更直觉。

纵观手势在移动平台上的机遇,证实Luke Wroblewski’s “Touch Gesture Reference Overview”。我希望你受到鼓舞去探索基于手势交互和加强你在手机界面的探索。不要害怕走远了。通过交互线框图,你可以迭代你的方法直到最好的体验。所以,让我们停止吹水,开始制作吧。

作者:lyzhie 转载自:简书

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 侧边下滑,国内已经好多应用都有了。

    回复
    1. 是滴,比如QQ[/奋斗]

      回复
  2. 好像已经上了

    来自广东 回复