移动设计中不可或缺的交互

经验分类: 经验/观点 / 自译外文 原作者: Chris Bank

手势和动画对移动设备游戏的改变

在这篇文章中,来自UXPin(一款在线界面设计应用)的克里斯·班克(Chris Bank)介绍了移动应用交互的重要性,以及它在设计模式上的影响力。更多的细节可以阅读UXPin的免费电子书《Mobile UI Design Patterns 2014》,书中有超过50个热门移动应用的案例。

移动设计中不可或缺的交互

 

绝大部分新兴的用户界面设计模式的核心都只是对移动应用开发中的手势和动画的改进。

根据最新的营销活动了解到,要做出一款令人惊叹的移动端游戏,需要良好的交互性以及拥有精美的品牌网站。这就让移动应用设计师和开发者不得不承认交互的重要性。如今,各大市场中的应用在不同层次上都体现了交互性,比如:用户行为、导航、社交。不过这也是最近10年才发展起来的,而且都被重新定义以适应于新形式的移动设备,只以某种唯一移动设备的开发至今还不存在。

在我另一篇文章《移动设计模式:实际效果》中,总结了如何看待设计模式,深入了解手势和动画对长期困扰设计模式的问题的实现,以及构想出新的设计模式。为了表明自己的观点,我在《Mobile UI Design Patterns 2014》一书中以最热门的移动应用做为案例分析了大量的设计模式。这些应用包括:Uber,Pinterest, Tinder, OKCupid,Spotify,Instagram,Dropbox,Secret,Flipboard,Snapchat,Mailbox等等。其中一些用户界面设计模式和元素在UXPin的免费电子书《网页设计趋势》,《移动设计趋势》和《线框图指南》中也有介绍。东西太多,记得保存书签哦!

 

手势

还记得浏览网页时,只能通过点击、滑动、滚动和键盘快捷键来交互的日子吗?虽然如今它们不再是唯一的交互方式,但它们的确主宰了浏览网页时的用户体验

从另一方面来看,移动领域已经随着新设计模式的实现迅速扩大。也因为硬件和软件的持续发展,移动应用设计也随着史无前例的人机交互模式逐步发展成为现实。新的手势为解决方案提供了可能性,也因为响应式设计的进步,网页和移动端设计同步化加剧,使得应用程序能够适用于各种形状和尺寸的设备。同时,这也对网页体验的设计产生了重大的影响。

我们来看看安卓现有的手势,你的直觉认为像日历,信息或者相册这样的模型会有多少种交互方式?

移动设计中不可或缺的交互

移动设计中不可或缺的交互

网址点此

    再来看一看苹果珍藏的多点触控专利手势,相信你的脑袋里一定会充斥着各种能够设计的解决方法。下面给出的示例来自2010年的专利备案,已经有很多都被实现了,苹果公司的专利手势文档中一定远超这些示例。你可以把它当作是“少数派报告”未来的一种预见吧。

移动设计中不可或缺的交互

网址点此

    安卓系统,苹果系统和其他移动平台还会继续增加各种各样的手势,自然地实现应用中特殊的行为和导航。这不仅仅是去除屏幕上的按钮来保持屏幕的真实形态,更重要的是让体验变得直观有趣。再将这些手势和多样的动画结合起来,总有一天你就能够把用户界面设计模式应用到你的移动应用中。

 

动画

在移动终端使用手势让用户觉得使用很自然,响应也很真实。而动画扮演很重要的角色,放飞用户的幻想却又把他们限制在用户界面内。

除了有形的动画,他们还经常使用自然的法则和规律。定时,速率,弹力,图像和颜色过渡,滚动,以及各种设定。这些法则让用户觉得设计师的手段无穷无尽,充满了惊喜。

多种动画和手势的结合不仅增加了体验的乐趣性,也为用户提供了宝贵的视觉反馈。这里只做简要说明,之后我们会在博客设计库上做深入探讨。

移动设计中不可或缺的交互

 

Captivate上可以看到有名的移动应用动画。

移动设计中不可或缺的交互

 

如果你想看许多没有装饰的过渡,Dan Silver或许能给你灵感。

 

交互基础示例

Pinterest,当今时代最具有成效的拟真交互电子商务公司之一,其移动应用中的“可被发现的控制”模式令其大放异彩。下面,我要详细地说明这种模式要解决的问题,以及如何完美地运用动画和手势。

移动设计中不可或缺的交互

用户的问题

用户想要在不中断体验的前提下和内容交互

Pinterest的解决方案

Pinterest通过移除主要显示区域中几乎所有多余的信息和操作按钮来避免典型的电子商务或者信息网站的那种复杂体验。这种接近极简的主义让用户通过观察,拖动,滑动,触摸等方式去做最紧要的事,没有干扰,也不会分散注意力。

如期望的一样,当用户点击图片时,可以详细了解吸引他们的图片的更多信息。不仅如此,还可以进行其他的一些操作,如锁定,发送,或者是随心所欲的编辑图片。没有特殊声明的话图片可以随意使用。可是,如果长按图片,他们会发现从手指触摸的地方冒出了具有同样功能的3个气泡。当用户想去点击气泡时,手指离开屏幕它们又会消失。多次尝试这个过程后,用户很快学会需要将手指一直放在屏幕上,通过拖动手指到某个气泡按钮上来操作。这样做了过后,手指悬停的气泡会快速渐变成红色,告知用户这个按钮被选择了。一旦用户手指离开屏幕,这个动作就生效了。

可见的控制按钮配上娱乐性十足的动画,再加上符合直觉的手势控制,整个体验过程都会轻松愉快。类似Pinterest或者其他站点的功能,“可被发现的控制”设计模式,让内容更加切实,让人着迷。

 

乘上交互的浪潮

现在是移动设计令人振奋的时刻,移动应用中运用手势和动画已成爆炸之势发展。想要了解更多关于著名公司是怎样将手势和动画融入已经存在和新的设计模式中,请阅读UXPin的免费电子书《Mobile UI Design Patterns 2014》。使用你需要的模式,剩下就不用理会了,但一定要保证将他们调整到适合于你自己的问题,最重要的是适合你的用户

移动设计中不可或缺的交互

 

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/635/

(0)
Smiler李想Smiler李想
上一篇 2014-09-14
下一篇 2014-09-16

相关推荐

  • 平庸的产品和伟大的产品中间只隔了一个:微交互

    微交互,听起来很生疏的这个词,实际上却出现在我们每天的日常生活中,甚至可能早上起床后我们做的第一件事就是一次微交互操作的典型案例。

    2017-05-20
  • 聊聊交互新人容易犯的七个错误

    新手们在学习交互设计时永恒的问题

    2016-07-21
  • 我为什么喜欢sketch?

    数十万互联网从业者的共同关注!作者:luffy微信公众号:麒麟设计中心(ID:luffydesign)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质疑或吐槽。积极留言的同学,注意关注小编的回复,不定期送互联网畅销书以感谢你们的支持,么么哒!Adobe XD出来了,第一时间试用,感觉除了repeat grid和hotspot好像没什么亮点。笔者是一名无线U...

    2018-04-09
  • 如何提高用户体验

    不同复杂的需求需不同的设计例如:一个非常简单的优化,不会涉及太多修改和分析,就不需要过多冗余的内容;一个复杂庞大的需求,需要复杂的分析和展现。设计前,需要对需求的复杂度有认知,明确该采用什么方式来展现设计内容。绿色区域很容易触及、黄色代表需要展开,而红色代表用户需要改变设备手持方式将视觉简化,隐藏一切不必要的操作,注定用户认知成本的增加,不利用各个模块的跳转:突出某些功能的同时,也不必避免其他的内容被感知。不同的方式,可视化的表达,体验...

    2018-03-21
  • 产品不能忽视

    在做交互稿或视觉稿的时候,为了让界面尽可能的真实,设计师们会虚拟一些内容放在页面上。但是当看到前端同学产出的demo时,设计师们又总是会觉得为啥和我当初做的页面那么不一样捏?设计师总喜欢把图做的很漂亮,在虚拟页面的内容时,使用漂亮的图片,把内容安排的恰到好处。但是当产出界面demo时,这个页面可能是个空内容的页面,也可能内容很多,导致布局错位。所以在设计界面时,一定不能忽视空状态、内容过多等极限状态。这些状态也许只会在初次使用时遇到,也许只会有很小一部分用户遇到,但是这些都影响着产品的细节品质。

    2014-12-28
  • 国外干货!6个方法助你设计出优秀的APP

    编者按:今天这篇从品牌、颜色方案、愉悦感、精炼简化等方面提出不少实在的建议,而且全是作者通过某个APP设计实战后概括出来的经验,不少观点很受用,收。 很多人对Parable的设计赞不绝口,然后他们的第一反应就是…

    交互设计 2015-08-31
  • 新项目丨青岛东海凤凰:宽建筑[UCD]挑战中国第一仿生建筑

    *文章已由原作者授权发布▲凤凰中心效果图作者:王宽方案设计方:宽建筑 [北京城建] KUAN architects [UCD]项目名称:青岛市西海岸新区文化活动中心地址:中国,青岛,金沙滩设计团队:王宽,周媛,李鹏,梁文杰等结构咨询:中冶京诚工程技术有限公司  卢理杰数字模型&BIM咨询:北京华茂云信息科技有限责任公司施工方:北京城建集团(建筑部)、北京城建集团十六公司、城建精工钢构公司面积:31,313平方米状态:主体结构已封顶预计建...

    2018-03-13
  • 「以司机为中心」的用户体验设计

    Uber 如何将他们的设计哲学应用在司机端的 App 上面 ?这一次,饿了么商家端产品经理为大家翻译了「以司机为中心」的用户体验设计—— 细看如何从零开始重制 Uber 司机端 App。

    2017-05-20
  • 互动的未来不应只在手指上

    最近对未来交互设计发展的一个很流行的观点 — 用手指操作各种大大小小的触摸屏,下面还会有很多这种例子。这篇小文章并不涉及任何详细的“未来发展规划”, 我只是提供一些可供参考的点子。 在开始构想应该怎样同我们…

    2014-12-25
  • 【用户体验.春节特辑】我的家史馆,我的“义务”馆(总第267期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第267期使用我的家史馆APP以来,起初家谱树状图深深吸引了我,在不断完善添加家族成员的同时,越来越觉得只是单纯的成员图像和姓名显得很单薄,已不能满足我对家族每个成员的情感。想到我的后代、我的子孙后代将来看到的只是家族长辈的照片、姓名,这和见到一些陌生的照片姓名难道不一样吗?越想越觉得应该让家族人物更丰富起来。之后就仔...

    2018-02-21