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

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

相关推荐

  • 你的产品有没有为老年人考虑?

    原文:smashingmagazine 木为艾欧网-交互学堂翻译 如果你在科技行业工作,很容易忘记,年长的人存在。大多数技术工人真的很年轻,所以很容易看到为什么大多数技术是为年轻人设计的。 考虑到这一点:到2030年,在美国19%…

    2015-02-08
  • 页面状态还是组件?到底什么才是交互的中心?

    随着信息行业的日益发展,软件的开发设计得到了更多人的重视,软件的原型设计也同样的变得原来越重要。我们目前使用的原型设计工具中,设计的模式普遍为两种,一种是以页面状态为中心来设置交互,比如Flinto for Ma…

    2023-03-03
  • 用户体验要考查的十个原则

    用户体验是个筐
    什么都能往里装
    ——李白

    2017-05-27
  • 乐观派UI:真实的谎言

    我真诚地希望,这篇文章能帮助你理解乐观派UI设计背后的核心观念。乐观主义,形容词,对于未来充满希望和信心。

    2017-05-15
  • apple watch 中文手册:Apple Watch 整体架构

    整体功能预览 总体而言,WatchKit第一版SDK提供的功能远远超出了我的期望。因为我原本以为第一版WatchKit可能侧重于对iOS Today Extension功能的延伸,而不是真正开发Watch App。所以当知道真相后,我即惊讶又感到…

    2015-06-15
  • 为什么职场上的印度人总比中国人混得好?

    目前为止我还未有机会到过印度。身边去过的人有大致两边倒的两种观点,一种是这是一个思想自由的国度,人们开心知足、与世无争。一种是这是一个脏乱差效率低下的地方,一条公路几十年也修不整齐。我无从判断,因为每一种观点都主观。有一位曾经生活在帝都的印度女记者倒是写过一本比较中印差异的书叫《烟与镜》,值得一读。因为工作和学习的关系,我与很多印度人一起共事或者正在共事,有的只能算是点头之交,有的成为了挚友。1先说一件趣事,多年前,我没有与印度人近距离...

    2018-03-16
  • 无限滚屏、分页亦或加载更多,到底怎么选?【UXRen译#139】

    作者:Christian Holst(翻译:xiuxiu  审校:Gogi) 电商网站里展示商品的最佳交互形式是什么?是分页、“加载更多”按钮还是无限滚屏?我们在Baymard机构开展了几项持续整年的大规模可用性测试,研究了50多家主流电…

    2017-08-04
  • 优逸客【交互设计】直播课今晚8:00正式开播!

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-19
  • 新手入门:交互设计师的知识架构

    如果你也是一枚刚入门的交互设计师,是不是常有这样一种感觉:不知从何下手,闷头读了一大堆书、学了一大堆软件、画了一大堆图之后还是感觉心里不踏实,总害怕自己还缺点什么,恨不得要有本《交互设计学习大纲》就…

    2016-01-26
  • 帅气的YouTube改版交互设计,获Adobe大奖

    美国设计师Ziarekenya Smith为Youtube制作的概念交互设计,获得2014年Adobe设计大奖。项目视频↓↓↓Ziarekenya Smith一人承担了设计、动画、音效所有内容.新Logo,一个简洁的取景器,更强调用户UGC特色新的登录页面新…

    2017-08-02