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

经验分类: 经验/观点 / 自译外文 原作者: 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

相关推荐

  • Sketchelp | 画笔是设计师的思考工具

    作为公众平台的第一篇推送~这不是一则成立宣言,而是一篇老友记。五年ACCD手绘教学实战+三年工业设计考研方法传授,期间无数沉淀,我们想用一种更纯粹的方式去记录。于是,Sketchelp这个名字诞生了。Sketchelp,顾名思义,秉持着助人的心态,提供国外知名设计学院ACCD扎实的手绘观念,结合设计师多年在造型上的实战经验,用浅显易懂、循序渐进的方式带给大众关于设计与手绘的知识。在此基础上,我们将根据行业需求及未来趋势,持续不断地更新及...

    2018-05-04
  • 稳健中求发展,中普集团兼顾合规安全与用户体验

    互联网金融行业在中国发展已有十余年,金融市场几经波折后进入合规发展阶段,2018年可谓是监管最为严格的一年,优胜劣汰,有实力的平台纷纷积极拥抱监管,合规运营。中普集团作为科技金融的重要践行者和普惠金融的倡导者,一直坚持“合规”运营这一核心宗旨,自成立起就坚持依法合规,诚信为本,全心全意为用户和社会着想。从2017年的金融工作会议召开以后,合规备案是整个行业最为关心的问题,也是各大平台稳健发展的核心要务。中普集团认为,现阶段平台除了要积极...

    2018-04-07
  • 提高交互技能点,一些常见移动端交互方法

    “在PC上常出现的下拉菜单,在移动端上都是用什么交互来实现的”,将最近项目里碰到的情况总结一下。

    2017-05-30
  • 使用 Sketch 3.9 快速实现响应式设计

    Sketch3.9 终于发布了原生的响应式设计解决方案。只需要设置一个属性,便可以快速实现任意尺寸的适配。 昨天晚上,Sketch发布了3.9beta版 http://www.sketchapp.com/beta/ 其中更新的一个非常重要的功能,就是是可…

    2016-06-27
  • JDC丨京东设计中心 - 电商大促攻略页设计指南

    通常我们看到的旅游攻略,游戏攻略等都是以文章资讯的形式呈现,只可阅读不可交互。而电商大促活动中的攻略页,可不仅仅是一篇资讯文章那么简单,除了要向用户传达促销信息,往往承载着引流,预约,发券,传播等营…

    2018-03-27
  • 清华社1月诚意书单 | 什么是交互设计?

    什么是交互设计?一、交互是个筐,啥都往里装交互(inter-action),从字面上理解,就是 A 和 B 之间的一系列动作和行为。比如,早上你出门时碰到邻居,冲 ta 喊一声“早”,ta 对你点头、微笑,说“早” —— 这就是一个完整的互动过程。当然,互动不仅限于人与人之间,还可以发生在系统和系统之间,比如人和机器,人和环境,机器和环境,等等。这可是个要命的问题:几乎在同一个次元的人和 “物”,都可能发生互动。当然,我们主要关注发生在...

    2018-01-31
  • 从单线走向双线,第三代用户体验即将到来?

    双十一在即,加之今年的新零售狂潮,零售业从线上到线下可以说纷纷摩拳擦掌。京东天猫剑指双十一已是老生常谈,值得注意的是,今年的双十一迎来了更多样化的全民购物盛事,比如飞凡推出的“2017飞凡狂逛节”。据了解,与京东天猫等电商大促有所区别的是,“2017飞凡狂逛节”重点是线下逛,与众多剁手党网上拼杀对比,着实令人耳目一新。新零售改革加速,用户体验核心发生质变可喜的是,我们看到零售业巨头和创业者们都在深挖线下。比如今年爆红的无人便利店和无人货...

    2018-02-03
  • 这3种移动端登录的交互方式,孰优孰劣?

    登录注册的界面看起来很简单,在交互上却有很多值得思考的地方。现在我们选以下三种较有代表性的登录方式来比较和小结一下。

    2017-05-26
  • 90后消费者对广告无感!90后心理研究PPT分享

      大部分企业的中高管人员都是90前出生的一代,很多CEO和传统大企业的高管,很可能还是80前。他们出生和成长的年代,根本没有手机或者互联网,接受的教育以及文化熏陶,和当下最有潜力的消费主力,也就是90后…

    2015-02-02