2014年移动应用交互设计10大趋势

标签: 交互设计 | 发表时间:2014-04-17 15:19 | 作者:limengran
出处:http://mux.baidu.com

在移动互联网飞速发展的这几年,每年都会有一些新鲜的设计趋势涌现出来。2014年,又有哪些新的设计趋势脱颖而出呢? 百度MUX有一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出2014年在移动产品中会被广泛应用的十大交互设计趋势。希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验。


1 转场动效的极致平滑(TRANSITION ANIMATION IS SMOOTH EXTREME)

移动APP越来越强调沉浸式的体验,页面和页面之间切换也需要更加的流畅,转场动效需要更加的极致和平滑。如果你还没有为你的APP提供转场动效,那么你已经落伍了,如果你还是使用比较传统的转场动效,如向左滑动、放大缩小,那么你的体验也已经落伍了。平滑无缝的切换和体验,信息需要没有阻力的传递,用户需要集中注意力,专注于目标任务来进行一系列的操作。我们相信,优先注重转场动效的移动产品,会有极大的产品竞争力。

Yahoo! New Digest               Making of Making                     Facebook Paper


Yahoo! New Digest/Making of Making/Facebook Paper,都对转场的动效进行了精心的设计,平滑流畅的体验让我们眼前一亮。
设计师设计移动APP的的动效,需要像导演一样,布局不同场景中,界面元素的登场方式,不同元素之间的出现、运动、消失要足够的连贯。必要时,信息框架需要优化重构。动效的语义需要保持一致,避免认知的混淆。如果使用拟物化的动效语言需要符合物理定律。


2 多样化新手引导( VARIOUS GUIDANCE)

静态图片或蒙灰图层的新手引导容易被用户忽略,眼前一亮的新手引导才能让用户有学习的欲望与冲动。新颖的新手引导往往会突破静态图片这种方式,通过生动的故事、吸引眼球的动效、场景化的图片、语音引导及视频小短片等新颖的新手引导突破静态图片的方式,吸引用户的眼球。

Hue


视觉动效类的引导,各种视差动效、过渡动效、入场动效、强化动效等等多种多样,“Hue”通过动效将功能及引导元素串联起,活泼的展现在用户面前,也不失为一种吸引眼球的方式。


为Ta闹钟


语音视频类的引导,“为ta闹钟”则直接应用一个制作精良的动画短片让你了解APP的使用场景,激起用户对功能的尝试欲望。
另外,Facebook paper的新手引导使用真人语音配合动效教学基本的操作手势,而且是一步一提醒的交互形式,非常简单、“醒耳”。


3 信息框架扁平化(FLAT INFORMATION FRAMEWORK)

APP设计中一个比较重要的设计因素,是效率的最大化。2013年我们追求界面扁平,注重通过弱化视觉效果,来强化功能主义,界面风格的扁平化,还远远不够,2014年应该从信息架构角度,再进一步的去应用扁平化的设计理念,这就是信息架构的扁平化趋势。
信息框架扁平目的是减少信息层级,追求信息到达用户的最短距离。通常,移动APP的层级关系不比网页直观,不不存在面包屑或是站点地图允许用户任意跳转。纵深的返回机制会增加用户操作成本,扁平的信息框架会从根本上解决上述问题。

Google Now


Google Now使用卡片式列表框架展示信息,把用户需要的信息展示在首页,将搜索结果前置,省去输入、点击和页面跳转的步骤,让用户更快捷的获取所需要的信息。


Drippler


Drippler主要提供和自己设备相关的提示、软件更新等所有信息。首页以瀑布流的方式展示信息,支持顶部下拉菜单进行筛选,省去更多分类入口,缩短用户到达信息详情页的步骤。


4 动态数据可视化(Dynamic data visualization)

人类身体的微妙变化、运动耗能都会产生大量的数据。近几年由于可穿戴设备的兴起,人们可以通过数据更深入了解自己的身体。结合数据可视化的概念,这将掀起又一热浪。
现今数据可视化不只是静态展现数据,用户希望通过互动及时获取数据流,动态数据可视化(Dynamic data visualization)将更加强调数据转译实时更新的图形,以及动态的图形化表达。

Moves


实时数据监测,Moves会根据你的运动情况在后台计算步数、距离和时间,然后生成简单易懂的图表帮助你了解一天的运动情况和地点,如果你一边走一边掏出手机查看Moves,随着你步数的一步步迈出,oves相应运动的圆形会跟着你的步伐震动,同时数字也在不断增长,伱会产生一种莫名的成就感;Nike+会随着你跑步的行为以语音方式提醒你跑步的公里、速度;其他还有 Nike+furlband、latin。


UP Coffee


动态数据呈现,静态图形仅能表现数据的单一数据属性,当图形以动态效果呈现时,便能多维度呈现给用户实时信息、同时能与用户形成互动,提高数据表现的趣味性。
UP Coffee是一款追踪你体内咖啡因影响你睡眠的动态展示APP,计算你饮入的咖啡因与体内水分反应,引导你睡眠的最佳时间。


5 精细的视差效果(FINE PARALLAXF EFFECT)

视差是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的感官体验。视差动效在网站中应用不少了,在移动应用中,除了一些让人眼前一亮的新手引导页,还有一些精细的视差效果应用也能给我们带来错落有致的新鲜体验。
视差效果的应用需要横向考虑哪些是前景,哪些是背景元素,考虑在滚动的过程中状态的停留和过程中的效果呈现。

CORSSFADER


CORSSFADER/ IFTTT/ HUE产品都采用了精细化的视差设计,效果非常吸引人。


App Flow


微视差的设计,App Flow在从图文结构向文字转换阅览体验的过程中,标签前景、图片背景、底部文字区域部分在滚动过程中速度均不相同,呈现错落有致的效果,并且前景标签的形状会发生变化与文字场景融为一体。


Yahoo天气


Yahoo天气通过横向划动切换的方式查看两个城市天气时,前景的框和背景的图片以不同的速度滚动,如话剧表演序幕徐徐拉开的效果。


6 分层结构 (LAYERED INTERFACES)

通常,屏幕界面以水平方式展示,没有纵深层级感。然而iOS7的发布引发了一种层次感的变革,模糊背景、带有纵深感的层次及动效,拓展了屏幕空间,塑造出内容的层级感,这种设计手法,也被很多设计师逐渐运用到自己产品中去了。

分层结构可以想象在立体空间中,在XY轴的基础上,增加Z轴。将当前所在的界面盖在另一个的上面,将信息分层归纳,体验上能够感觉到明显的层级感,区分主次信息的展示 。这种设计更专注于内容,更多的暴露信息,减少结构层级,操作高效 。

Cal


Cal是Any.Do 的团队推出的一款设计精良的智能日历应用,主要内容的展示采用卡片形式而非全屏显示,大家可以明显的感觉到卡片和底图两个层级,能够烘托场景、交代背景、渲染气氛,带入情境,给人无限想象 。


DayBoard


还有的设计虽然在当前界面没有看出层次,其实只是将层级隐藏起来了。如DayBoard,它其实是侧边栏形式变更过来的,通过动效扩展了屏幕空间,渲染出带有纵深感的层次,将操作区和内容区划分开,培养用户使用习惯,使人印象深刻。


7 大视野背景(FULLSCREEN IMAGE BACKGROUND)

不不论是大屏电子设备、汽车的全景天窗甚至是落地的阳台玻璃,人们总在追求更大的显示区域和更佳的显示效果,大视野在同类产品中总是能在同类产品中带来更突出的体验,在移动应用中也是如此。
大背景图片已经成为营造设计氛围主要手法,需要设计师具有更好的细节雕琢能力才能出效果,会让APP更生动,更具创造力。
小贴士提醒,由于背景可能造成干扰,导致前景的内容可读性变弱。需要把重要操作用明确的按钮区隔出来,阅读型文字跟背景图要用明显的反色,甚至把文字浮在半透明蒙层上。

The Whole Pantry


Flink


VSCO Cam


来看这些产品The Whole Pantry / Flink / VSCO Cam,他们都有一些共同的特点,提升视觉表现力度,丰富情感化元素。一些信息或操作,浮动在图片上。这种设计方法,对字体和排版设计要求更高,难度也更多,但极容易渲染出氛围。


8 虚拟现实的游戏化(GAMIFICATIONS OF VIRTUAL REALITY)

众所周知,虚拟现实技术是对未来游戏产业发展关键的技术之一。近期,Facebook花20亿美元收购沉浸式虚拟现实技术厂商Oculus VR,索尼也正式公开了虚拟现实技术,微软以1.5亿美金购买可穿戴计算技术和专利。这些收购都预示着巨头公司要在虚拟现实领域里大展手脚了。
通过肢体、视觉和听觉等感官体系直接与虚拟场景交互,可以重建并简化交互方式,由原来的间接控制到直接交互;实现一维到多维空间体验全新体验。虚拟现实的游戏化和社交化都将会得到更广泛的应用。

口袋妖怪


“口袋妖怪”结合Google map,当用户到达Google 地图上所标注的妖怪捕捉点时,使用手中的智能手机的相机拍摄界面进行扫瞄的方式交互,便可以从屏幕中发现它们的踪影,进而丢出“宠物球”来进行捕捉;用虚拟现实技术给用户创造一种轻量游戏化的现实增强的交互体验。


Ingress


Ingress的现实增强游戏, 通过真实世界的体验基础上,用不同的视角观察它,从而实现不同的“真实生活”。结合 Google 地图和导航生成一副虚拟的游戏地图,但是地图上的街道、路线和地点都是真实的。玩家需要按照地图收集并积攒虚拟的“XM”能源,就像真人版《吃豆人》。收集足够的能源可以前往“传送门”完成“黑客”任务,传送门一般都设置在美术馆、图书馆这样的公共场所。


9 任务窗口模式(TASK WINDOW MODE)

手机越来越大,视野越来越广,给我们带来更优越体验的同时也带来了很多烦恼。面对大屏手机单手操作和手指操作范围有限的劣势,如何让用户灵活地操作成为设计师思考的问题;而另一方面,设计上能否因为大屏带来体验上更大的突破呢?
设计师们通过悬浮窗口进行了很大胆的尝试,利用小窗口镜像操作大屏幕,甚至可以同时展示多窗口,执行多任务,不但解决大屏手机手指操作受限的问题 ,而且拓展了大屏手机的功能,使屏幕空间得以充分的利用,给大屏手机带来全新的交互体验。

Galaxy Note 3


多任务窗口模式,跳出传统手机单屏使用的思路,三星Galaxy Note 3允许多窗口同时存在,可以实现同屏显示两个应用了。比如,同时显示邮件和相册,用户可以在主屏幕选择运行几个特定的任务。多任务窗口充分利用大屏手机显示空间,提升用户的操作效率。


百度浏览器PAD版


如今,手机和Pad的区别越来越小,Pad的大屏操作,已经有些优秀的设计,比如百度浏览器PAD版,可以同时展现2个预览区,还可以自由控制视频悬浮窗。


10 主动服务式设计(PROAC SERVICE DESIGN)

现在的APP怎么才能获得用户的芳心呢?功能可靠、界面高大上?还有一种可能性,就是智能和贴心,如果可以读懂用户当前的需求,并主动提供解决方案,为用户省去那些搜索、选择、纠结等不必要的步骤,还能抓不住用户的心么?尤其是移动场景下,场景变化往往会产生新的需求,这时更需要我们主动提供贴合当前场景的服务。
所谓的主动服务式设计,就是在用户主动操作之前,识别到用户的需求同时还能友好的给出最快捷的解决方式。

Shopkick


Shopkick让智能推送和智能导购成为现实,识别用户的地理位置信息,推送更有场景引导式的信息,主动为用户提供更有价值的信息。


Cover


Cover是一款支持安卓用户自定义创建锁屏菜单的应用程序,同时支持识别用户的情景(开车、家中或者工作),自动调整锁屏的内容,允许用户快捷切换和唤起合适的应用。


写在最后:每位设计师都应该对设计趋势有自己的敏感度,研究前沿的设计方向,关注最新的设计模式,并灵活的应用在实际的设计中,为你的设计增添有趣新颖的体验。

转载请注明出自”百度MUX”


相关 [移动应用 交互设计 趋势] 推荐:

2012年移动应用交互设计趋势

- - 曉生語錄
2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,交互设计又被提升到一个新的高度. 不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的交互体验. 本文汇总今年热门产品的界面案例,希望能从中总结出未来一年需要重点关注的设计趋势.

2014年移动应用交互设计10大趋势

- - 百度MUX
在移动互联网飞速发展的这几年,每年都会有一些新鲜的设计趋势涌现出来. 2014年,又有哪些新的设计趋势脱颖而出呢. 百度MUX有一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出2014年在移动产品中会被广泛应用的十大交互设计趋势. 希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验.

2012年移动应用发展的五个趋势

- - 互联网的那点事...
每一天,世界各地的消费者会使用笔记本、平板电脑、电子阅读器、智能电视和手机等设备下载数以百万计的应用. 时下的开发者们大多处于着一种相似的状态:他们清楚在不同的情况下,究竟应该为不同的系统分别打造本地应用,还是开发跨平台性更强的基于HTML5的Web应用;他们也知道通过怎样的渠道去发布自己的产品;而当前最大的挑战,似乎就是怎样保持对不断变化的市场需求的跟进.

情感交互 ——移动应用产品交互趋势

- - 百度MUX
随着互联网特别是移动互联网的飞速发展人们日夜与电脑、手机为伴,“人-人互动”逐渐减少,“人-机互动”不断增加,人们对人机交互技术提出了更高的要求,即情感需求. 因为人类之间的交流与沟通是自然而富有感情的,因此人们期望与之交互的机器也具有类似于人的观察、理解和生成情感特征的能力. 随着情感计算(affective computing)等技术的不断发展,情感交互成为高级信息时代人机交互的主要发展趋势.

2012年移动应用十大设计趋势

- - 百度MUX
2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,用户对移动应用的品质需求也呈现上升趋势,界面设计又被提升到一个新的高度. 移动应用不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从视觉感受、风格趋势、操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的体验.

移动应用大趋势:应用其外 媒体其中

- - ITeye资讯频道
北京时间12月27日消息,科技博客TechCrunch日前发表了由 埃里克•肖恩菲尔德(Erick Schonfeld)撰写的文章,指出移动应用将改变消费者对媒体的体验、发现与消费的方式,是未来媒体平台的大势所趋. iPhone风靡全球 iTunes音乐与电视受限. 随着移动设备的普及,五花八门的移动应用已经风靡全球——不信的话,可以看看这张由市场研究分析机构Asymco绘制的全球iPhone分布图,作为智能手机的先驱和标杆,它的市场遍及123个国家.

移动应用趋势报告:游戏是iOS用户的最爱 Android用户更关注工具类软件

- - 互联网的那点事...
近日 Chomp公司在一份2011年度应用搜索数据分析报告中,提供了移动应用的一些发展趋势. 该报告根据 Chomp公司每月的百万次应用搜索,总结了2011年移动应用在价格、类别、市场份额和应用排行等各方面的数据和趋势. 首先,从报告中可以看出,Android应用下载量最高的并非游戏类应用,而是娱乐类应用.

[趋势方向]BI报告:HTML5将在3-5年彻底取代移动应用![英文]

- - TechFrom科技源
TechFrom科技源 1.10日,后PC时代的应用和HTML5之争,双方观点目前都在争论. Apps ,native apps ,都是指移动应用为代表的应用,类似于PC电脑时代的本地应用程序;. 请阅读 [超级火爆]未来趋势大争论:应用 vs 网络,谁是未来?[全面详解]和 [跨世纪激辩]:网络Web Internet已死?还是应用App Internet 将死?[英],了解清楚基础内容.

交互设计-简单

- DayuLu - 腾讯CDC
  交互设计是近几年流行的一个词语. 现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等. 从场景,任务,用户,操作等分析. 但由于受实际情况的限制,往往不能很深入. 所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的. 如果要说什么是一个好的交互设计,个人浅见就是简单. 本文以下内容都是围绕简单2字进行展开.