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

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

相关推荐

  • AXURE免费元件库分享-web

    分享个WEB端axure元件库下面是元件库地址:https://pan.baidu.com/s/1pLXHuf5

    2018-03-05
  • 2017年UX设计的3大预测

    本文作者总结了他在2016年对UX设计的预测,且又对2017年的UX设计进行了预测。

    2017-04-29
  • 三跨362分考取北邮交互设计,复习经验分享

    2018北京邮电大学交互设计- 连庆欣大家好,我是18年考上北邮艺术专硕的学姐,初试总分362分。回忆过去复习的日子,仿佛刚刚就在眼前。我本科是信息管理与信息系统专业,从一所二本学校三跨考研北邮艺术专硕。我是8月底9月初左右着手开始准备考研的,前后大约准备了4个多月。当时刚刚开始准备复习的时候,也思考了好一段时间,由于自己是跨考的,手绘能力实在太弱,找了好几个学校了解,都是比较偏重手绘能力的,直到我看到了北邮,找了它相关的真题,发现对手...

    2018-05-01
  • 设计师应不应该培养“审丑”能力?

    作者:TanghuiDesign   “审丑能力”是指 克服“与心理预期不符而产生的情绪抵触”的能力 无法审丑 几乎是所有设计师都难以治愈的毛病 或者说短板   没错,你如果是看到标题进来的,想必是“审丑”二字吸引了你。 关于设…

    交互专题 2017-08-07
  • 用户体验测量的工具:可用性度量

    说到用户体验度量就不得不说用户体验,用户体验即用户在使用产品、系统、服务的过程中建立起来的主观心理感受、因为它是纯主观的,就带有一定的不确定因素;而个体的差异也决定每个用户的真实体验无法通过其他途径来完全模拟或再现。

    2017-05-30
  • 从音乐属性改进用户体验,QQ音乐和虾米音乐如何再优化?

    本文将抛开市场占有率,将腾讯的QQ音乐与阿里的虾米音乐作对比,从音乐的本身属性和对人心理的影响出发,分析用户需求,对产品提出用户体验方面的优化建议。

    2017-05-18
  • 皮克斯教给我们的22条改善用户体验的原则

    注:皮克斯动画工作室(Pixar Animation Studios),简称皮克斯。1986年,在史蒂夫·乔布斯以1000万入主以后,创作了《玩具总动员》、《海底总动员》、《头脑特工队》等经典3D动 画电影。2006年,皮克斯被迪士尼以74…

    2016-06-12
  • 我对移动记账 App 的设计探索

    现代智能手机给我们提供了非常多丰富实用的功能,比如平时颇为在意金钱去向的我,就是一个 手机记账 App 的使用者,曾经尝试过各种记账 App,但好像都有那么一点不满意,于是我就想如果是我来设计这么一款 App 的话…

    2015-09-15
  • 40个全屏图片背景的网站设计欣赏

    Web设计灵感总是帮助我们走在新趋势, 设计结构、颜色和总体设计过程。有很多灵感的网站列出的主题就是我想要这一个是不同的。所以在这个今天的帖子我收集了40个全屏图片背景的网站设计欣赏,为你找设计的灵感。

    2017-06-03
  • 交互设计的综合性——后APP时代交互设计师的主场

    作者:司马西   1. 后APP时代-用户时间的争夺战 近几年来,移动互联的普及,各大厂商为了抢占市场激烈竞争。然而硝烟散去,我们统计并回视移动互联网的App世界,各大行业(包括:新闻、游戏、餐饮、医疗、教育、金…

    交互专题 2017-08-07