APP交互设计之10个值得设计师学习的创新方向

下面我们之间来看看是哪10个在app交互设计中,值得APP设计师跟APP产品经理去深挖的创新方向。

1、APP界面切换之间极致平滑转场动效效果。

上榜理由:移动APP越来越强调沉浸式的体验,页面和页面之间切换也需要更加的流畅,转场动效需要更加的极致和平滑。平滑无缝的切换和体验,信息需要没有阻力的传递,用户需要集中注意力,专注于目标任务来进行一系列的操作。我们相信,优先注重转场动效的移动产品,会有极大的产品竞争力。

所以,对于app设计师的知识面要求更加全面。

4196_131226125212_1

比如设计师设计移动APP的的动效,需要像导演一样,布局不同场景中,界面元素的登场方式,不同元素之间的出现、运动、消失要足够的连贯。必要时,信息框架需要优化重构。动效的语义需要保持一致,避免认知的混淆。如果使用拟物化的动效语言需要符合物理定律。

 

2、多样化新手引导设计和导航,菜单等设计

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

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

 

3、APP信息布局扁平化或是磁铁设计

APP设计中一个比较重要的设计因素,是效率的最大化。2013年我们追求界面扁平,注重通过弱化视觉效果,来强化功能主义,界面风格的扁平化,还远远不够,2014年应该从信息架构角度,再进一步的去应用扁平化的设计理念,这就是信息架构的扁平化趋势。

信息框架扁平目的是减少信息层级,追求信息到达用户的最短距离。通常,移动APP的层级关系不比网页直观,不不存在面包屑或是站点地图允许用户任意跳转。

包括APP扁平化设计和卡片式设计、微软metro 磁铁设计等。

 

4、APP动态数据可视化

现今数据可视化不只是静态展现数据,用户希望通过互动及时获取数据流,动态数据可视化(Dynamic data visualization)将更加强调数据转译实时更新的图形,以及动态的图形化表达。

比如运动类Moves,

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

目前此类APP在运动,健康领域很常用,html5模版网(www.html5code.net)也认为也会在其他领域都会涉及到。

因为动态数据呈现,静态图形仅能表现数据的单一数据属性,当图形以动态效果呈现时,便能多维度呈现给用户实时信息、同时能与用户形成互动,提高数据表现的趣味性。

 

5、精细精美的视差效果

视差是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的感官体验。视差动效在网站中应用不少了,在移动应用中,除了一些让人眼前一亮的新手引导页,还有一些精细的视差效果应用也能给我们带来错落有致的新鲜体验。

视差效果的应用需要横向考虑哪些是前景,哪些是背景元素,考虑在滚动的过程中状态的停留和过程中的效果呈现。

比如:

App Flow

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

 

6、合理的分层结构 

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

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

比较好的分层结构可以通过动效扩展了屏幕空间,渲染出带有纵深感的层次,将操作区和内容区划分开,培养用户使用习惯,使人印象深刻。达到我们意想不到的效果。

 

7、大视野背景或者多边形等元素的应用。

大背景图片已经成为营造设计氛围主要手法,需要设计师具有更好的细节雕琢能力才能出效果,会让APP更生动,更具创造力。

大背景APp设计

小贴士提醒,由于背景可能造成干扰,导致前景的内容可读性变弱。需要把重要操作用明确的按钮区隔出来,阅读型文字跟背景图要用明显的反色,甚至把文字浮在半透明蒙层上。

采用大视野背景的设计都有一些共同的特点,提升视觉表现力度,丰富情感化元素。一些信息或操作,浮动在图片上。这种设计方法,对字体和排版设计要求更高,难度也更多,但极容易渲染出氛围。

 

8、APP 虚拟现实的游戏化

虚拟现实技术是对未来游戏产业发展关键的技术之一。近期,Facebook花20亿美元收购沉浸式虚拟现实技术厂商Oculus VR,索尼也正式公开了虚拟现实技术,微软以1.5亿美金购买可穿戴计算技术和专利。这些收购都预示着巨头公司要在虚拟现实领域里大展手脚了。

通过肢体、视觉和听觉等感官体系直接与虚拟场景交互,可以重建并简化交互方式,由原来的间接控制到直接交互;实现一维到多维空间体验全新体验。虚拟现实的游戏化和社交化都将会得到更广泛的应用。

国外知名的口袋妖怪

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

 

9 、多任务窗口设计模式

手机越来越大,视野越来越广,给我们带来更优越体验的同时也带来了很多烦恼。面对大屏手机单手操作和手指操作范围有限的劣势,如何让用户灵活地操作成为设计师思考的问题;而另一方面,设计上能否因为大屏带来体验上更大的突破呢?

设计师们通过悬浮窗口进行了很大胆的尝试,利用小窗口镜像操作大屏幕,甚至可以同时展示多窗口,执行多任务,不但解决大屏手机手指操作受限的问题 ,而且拓展了大屏手机的功能,使屏幕空间得以充分的利用,给大屏手机带来全新的交互体验。

三星的多窗口设计

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

 

10、 主动服务式设计

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

所谓的主动服务式设计,就是在用户主动操作之前,识别到用户的需求同时还能友好的给出最快捷的解决方式。

 

总之,看完这10点设计精华,html5模版网(www.html5code.net)认为每位设计师都应该对设计趋势有自己的敏感度,研究前沿的设计方向,关注最新的设计模式,并灵活的应用在实际的设计中,为你的设计增添有趣新颖的体验。

【网站声明】本站除付费源码经过测试外,其他素材未做测试,不保证完整性,网站上部分源码仅限学习交流,请勿用于商业用途。如损害你的权益请联系客服QQ:2655101040 给予处理,谢谢支持。

相关文档推荐

今天html5模板网跟大家介绍一款计步器APP,该款APP的界面设计非常柔和舒适!作为一款针对女性运动的计步器APP是非常适合。什么是计步器?计步器通过统计步数、距
据目前的智能手机的2大操作系统之争,拼的非常的火热!今天,html5模板网跟大家来分享下,站在移动APP设计的角度来对比iOS7和Android4.4到底有什么区别?第一、iOS7和And