交互设计趋势

这两天在一个QQ群里看到了很多询问:交互实际是需要什么技能?要不要会设计界面等等的问题?我想做产品经理,需不需要会......?

我在之前所阐述了交互与视觉相统一的概念。交互设计在于对内容的整个、提取以及规划呈现。我们可以这么来形容一个产品工作的整体结构——

1470119255-3895-ngsENhDufjmSaY1eon08Cg
今天推荐的这篇文章恐怕很直观的就可以解答这方面问题。当一个产品达到一定程度,是相关配合的结果,你很难分清你每天考虑的问题是什么,因为并不单一,所有都在为产品的最终形态服务。对了,或许我忘记了把商务范畴放进去,哈哈!

1470119255-3658-9RjIzFOhced8EpfPSE3F4Q1470119260-2040-9RjIzFOhced8EpfPSE3F4Q

好了,言归正传,下面是文章内容(来自江沪团队):

5 寸以上的大屏手机已经成为移动设备的标准配置,原本顶部菜单以及侧栏汉堡包式的导航开始变得难以触达,进而慢慢地退出了历史的舞台,在界面中最为重要的 导 航模块上,我们发现了很多结合产品自身的使用场景,它们通过优化界面布局,融合简易手势为用户带来更为高效便捷的体验。

1470119259-1660-hJNtuRmtrWrJn3famVCjPg

在之前的导航设计上,功能性按钮一般被放置在顶部或则隐藏在侧栏导航。但对于大屏用户而言单手点击这些区域会变得更加困难。好奇心日报、MONO、Amazon Video等应用都选择了将主要功能置底的方式,从而缩短了点击路径,提升了使用效率。

而用户对于手势的认知日益增强,一些新的导航形式被应用到一些特定的场景中。譬如格志,通过上下左右的滑动手势来完成模块之间的 切换,使得任务之间的关联更 为顺畅自然。譬如MONO,在下拉“刷新”的标准动作之外,加入“玩游戏”,“看文章”,“看视频”,“听歌”4种核心功 能,用户可以通过下滑的手势快速 触达目标,从而提升了交互效率。
1470119259-5299-dlAHqpomiGlb5zUmjYXFRQ

通过改变导航的方式来适应现在大屏操作的需求,是我们认为未来的一段时间内APP设计的发展方向之一。

一、以内容为中心,减少界面干扰 Content Centric, Seamless Interface

    (1)滚动界面时,隐藏操作按钮

在以阅读信息为主的产品中,许多产品采用了向上滚动时隐藏操作按钮,滚动停止或者页面回滚时再次出现的交互方式。当用户向上滚动页面 时,主要目的是浏览信 息,这种贴心的按钮隐藏,最大限度地减少了视觉干扰信息,帮助用户轻松的把注意力放在内容信息本身。而适时的出现操作按钮又让用户 能在需要的时候操作,方 便用户在阅读的同时做出想要的操作。

1470119260-2770-kqWZWwRVsZ3C9RJVLL5cvQ

(2) 除此之外,由MaterialDesign与iOS7所带来的立体化思维开始真正流行起来,

越来越多的产品在设计上开始利用界面的层次去打破物理屏幕的限制,在空间感上进行了很多尝试,原来很多需要按钮或者交互控件完成的操作,能够通过更自然、更容易理解的手势完成。页面空间更大,不再刻意强调导航,打破 了现有的屏幕限制,做更多空间感上的尝试。在Y轴更是可以无限滚动,除了长内容加载的部分,篇与篇之间的切换也采用Y轴不 断向下加载的方式,提升了阅读效 率。增加Z轴维度的延展,提升产品在空间层面上的层级感。

1470119262-2396-lAQzfQUrY43U5RIOWZhJ1w
1470119262-6737-SyOySE9fPj9LGdLUnUiZ7Q
1470119265-8903-6CEFwy7fiVOgdUK-wSJjKw

例如paper的页面布局可以让用户随意的拖动画布,不再刻意强调导航。这样的方式,单个页面的空间被无限拓宽,能将较多的信息 都囊括于之中,减少为了分屏 而进行的页面转换带来的割裂感,带给用户更为连贯的信息阅读体验。Musical.ly、知乎日报等都是在Y轴可以无限滚 动,提升了阅读效率,在Y轴上可 以做到无限延伸。加之Z轴维度的延展,提升产品在空间层面上的层级感。例如musical.ly,Google移动搜索 等APP都将主导航的核心功能凸 出,增加Z轴方向的空间感。支付宝、淘宝、QQ音乐等产品的半屏设计,都是在Z轴上提升了产品的空间感。

长远看来,未来的很多的APP都将更加专注于让用户减少操作,关注内容并且在页面的设计上更加具有层次感,在空间上有更多的尝试。

二、更广泛地运用多媒体元素 Wider Use Of Multimedia Elements

随着网络技术和硬件水平的进步,用户终端的接入速度越来越快。多媒体元素——尤其是视频——开始越来越多地被运用到界面设计之中。宣传性的网站首页使用大幅面的视频背景已经不再稀罕。

我们观察到,移动端和网页端界面中,视频元素的展现方式不断创新。以往设计中界面中的视频会像“豆腐块”一样插入网页,类似界面 排版中的图文混排模式,在播 放时再扩展为全屏。视频控制的交互展现方式和视频网站中的大同小异。然而在Periscope为代表的移动直播App中,视 频被当做整个界面的背景来使 用,用户的评论、点赞和界面交互叠加其上,用户可以自由选择是要沉浸在视频中,还是参与更多互动。 1470119263-3923-sxt4CqhZHoeKxwPgxVzklg

和视频作为背景类似,“弹幕”互动也逐渐褪去ACG小众标签,被各大视频网站、新闻网站、甚至音乐网站应用。覆盖在多媒体元素上的文字信息,并没有想象的那么干扰视频内容的传达,反而因为穿插了更有趣的评论,带来了更丰富的互动体验和娱乐效果。

除 了替代大幅面的图片,带来更强的视觉印象之外,视频元素一个常见的,也愈加流行的应用场景还在于新用户引导和新功能介绍,很多 APP在首次启动时触发的引 导页不再是以静态图片和文字或者最为经(lao)典(tao)的蒙层引导,而是以短视频的形式为用户展示使用场景和操作方 法;在用户使用过程中,新功能的 引导也加入了真人视频教学的方式,增加了引导的趣味性和亲和性。

1470119266-2668-j7gGjwBNFf2XWiVmpdAD2g

手机QQ新推出的“视频对讲”功能使用了明星录制的小视频作为新手引导,原本用户忽略甚至嫌弃的新手教学环节通过这样的包装变得更具吸引力。

三、提高操作效率的手势操作 Improving Efficiency With Natural Gestures

相信大家对“手势操作”已经不再陌生了。随着一些产品功能的强大及界面的复杂化,简单操作不再满足需求,用户在操作上也感受不到快感。为了提高使用效率,合理运用符合自然语言的手势可以达到去繁存简的效果。所以,快捷手势在未来还有很多发展空间。

一 些硬件厂商也在硬件层面上增加了新的特性,以识别用户更为精密的交互操作,比如iPhone6S所具备的新特性3DTouch ——新引入的Peek和 Pop手势从硬件层面给予移动设备更多的交互形式,会给应用开发者更加广阔的功能开发空间,这会让今后的应用体验更加丰富。

在软件层面,一些复杂的功能操作可以通过快捷手势变得更为高效和有趣。当然,这需要适当的引导用户来发现,并且这种手势不可太复 杂,否则会事倍功半。POF 是一个相亲APP,它会推荐一些匹配对象供用户选择,用户若不喜欢,只需左滑,喜欢则只需右滑。通过滑动手势来满足选择对象的功能。当然,运用手势来提 高 效率的还有淘宝,在搜索结果页中下拉就可以完成在收藏店铺中搜索的功能,否则用户还要找到收藏页,进入某一个店铺搜索。

1470119267-6011-cBZSzzxBdh2MclQr4lX8dg1470119268-4903-layFVoMvPW-YaxLHwn-Pg

生活节奏的加快,人们更喜欢快速简单的解决方法。在合适的引导和合理运用的前提下,快捷手势是简化产品界面并提高复杂操作流程效率的方法之一。

四、与品牌结合的趣味修饰元素 Fun Decorations With Brand Elements

       (1)信息加载与空值页

信息加载的等待时间可以短暂到毫无知觉,也可以漫长到让用户抓狂,这短短的几秒钟在使用移动产品的过程中被几何倍的拉长或缩短, 比如下拉刷新、比如启动页、 比如页面切换。与其使用单调的菊花转来浪费生命,不如做点有趣的事情。例如京东的下拉刷新、timehop和same的上滑 加载、snapchat在静止 的背景页面上都做了一些有趣的尝试,好玩的同时也很好的传达了产品的理念。

1470119269-7327-y0BHg10AzNq8IncJQf7TTg

(2)节日运营

2015 年我们发现每逢重大节日或特殊事件发生,敏感的互联网公司们总能在自己的App上做出一些趣味性的品牌营销事件,比如双十二淘宝与京东在各自首页分类入口 icon上的骂战,上海大暴雨Uber将一键打车改成满屏幕的一键叫船。沪江网校的双十二也做了类似的尝试。虽说这种方式完全不符合icon的设计语义 学 要求,但是作为一个与品牌结合的营销案列的确赢得了足够的眼球和用户的好评。在未来的品牌运营活动中,在此基础上的延展及变化也被看好。

1470119269-1775-s-t4NDPqAZup6KclTvHHrA

五、跨设备互动 Cross-Device Interactions

跨屏互动不是一个新的概念,但跨屏互动发展到今天还有着很多的市场空白。我们相信2016年跨屏互动依然是设计趋势所在。因为互 联网设备和使用情景呈现出多 样化的倾向,智能手机、平板电脑、电视、PC等设备各自承担着不同场景下的用户需求,不同的设备协作完成一个任务、转换设备 环境后继续完成工作的跨设备操 作愈发频繁。

相信我们都有这样的经历:在手机上看见一个电影不错,希望和家人一起用电视观看;工作时间在电脑上看到一篇有趣的文章想要存下来,下班后回到家用Pad观看。手机上有几个刚拍的视频,但手机没有强大的视频编辑功能,需要传到电脑上编辑。

在 设计跨屏互动的功能时,要充分结合各种设备的不同特性,让每一种设备做最适合的事情。例如手机具有轻便可移动的特点,键盘输入 方便,并且自带麦克风。但是 屏幕小,不适合多人一起观看。而电视屏幕大,可看性高,但是不方便移动,更不要说键盘输入了。那么可以考虑让手机搜索视频内 容,电视负责播放。

1470119270-1260-d8g4qgbf1-VcJPZtR3JyAw

虽然跨屏互动还没有蓬勃的发展,但现如今已经涌现出一些好的跨屏互动的案例:微信中提供了摇一摇检测当前声音,从而判断电视节目的功能;通过Pad/手机 App操纵TV;乐视手机App扫描二维码可以发送弹幕到乐视T

1470119270-4907-RqNlat4GAGnWbF95-FCpEg

六、游戏化 Gamification

游戏化,是指在非游戏环境中将游戏的思维和游戏的机制进行整合运用,以引导用户互动和使用的方法,游戏化可以增加受众参与度、忠诚度和乐趣,它能在互联网、医疗/健康、教育、金融等领域中影响到用户使用时的心理倾向,进而促进用户的参与与分享。

虽然游戏化早已不是个新概念,但越来越多App设计(尤其是复杂的产品或功能)中,亦越来越多的引入游戏的思想,通过任务式的引导或游戏化的操作 方式,替代 枯燥的文案说明,降低用户进入的门槛,帮助用户更快上手,同时提升用户黏性。常见应用包括游戏化的运动类App、任务式新手教学、收集类任 务、好友竞争排 名机制、奖励系统等。

1470119272-8416-GVcwp7rAwlO5CV7BK-MlAg

七、新技术,新体验 New Technologies,New Experience

除了互联网领域的产品,功能和表现上的趋势,我们还关注了一些新技术领域的进步。技术变革会带来行业新的发展,而这必然会体现在用户体验,人机交互等领域。技术变革,也是我们行业发展的源动力。

虹膜识别,NFC,超声波指纹识别,VR等新硬件技术趋于成熟,必将会应用在更多的用户场景下,推动更多的行业与互联网相结合。 如:虹膜识别,NFC和指纹 识别技术等,会使得在移动场景下的身份识别,安全验证等跳过繁琐的登陆注册验证步骤,使得流程更为简单;而VR技术的应用更 是在游戏,教育等产业广受期待。

虚拟现实技术是一种可以创建和体验可交互的三维虚拟世界的计算机仿真系统。随着像索尼和微软这样大公司的蓄 力,Oculus/Facebook,HTC /Valve,VR今年在各大展会上出尽风头,值得期待的是,我们做为终端用户有也会更早的接触到这项技术,16年或将是其井喷的一年。

VR设计主要分为三块:显示、内容和交互。显示和内容已经有了比较成熟的标准,正如以上提到的几家VR头显公司。VR交互从某种意义上更像是3D空间交互,手势跟踪将会提供最好的交互体验。一种是光学跟踪,一种是将传感器戴在手上的数据手套。

来源:UE Buang   感谢分享,如有侵权请联系小编哦:tina@iamue.com

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/16750/

(0)
TinadminTinadmin
上一篇 2016-08-02 11:17
下一篇 2016-08-03

相关推荐

  • 门诊的用户体验,决定患者的选择

    口腔之声每晚8:00与您一起看口腔汇聚国内外口腔专家3000个视频随便您看世界华人牙医聚集地促进行业交流的价值门诊的用户体验,决定患者的选择现今的口腔医疗市场竞争,呈现出来的形态,公立医院的患者,到处挤满了人,号挂的满满的,而民营口腔医疗机构,又是大肆的营销活动,这家公益宣传,那家优惠活动,这家明星站台,那家老外看诊!的的确确呈现出同一个国家,面对两个市场的景象,当然每一个口腔医疗机构,或者说每一个家口腔,都有服务不同的患者层级。最近经...

    2018-05-06
  • 设计师进阶:从UED向UXD转型

    UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?

    三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。

    2017-05-12
  • 交互设计与人类行为习惯的一些思考

    在交互设计中,利用很多的人类行为习惯作设计指引,如从左到右的阅读习惯,格式塔原则的视觉习惯等。很多的研究者对此已经深入研究,本文主要围绕习惯与交互设计的联系及相互影响的思考。好的交互设计是培养用户获得更好的行为习惯,更好地解决问题。

    2017-05-26
  • 被忽略的交互设计本质

    谈论交互设计本质是起源于日常的很多谈论,不管是向朋友介绍自己从事“交互”相关岗位,还是需要向亲戚通过三言两语解释自己的工作内容;甚至在工作的上下游沟通中,也经常会被问道“你怎么就判断用户是这么想的”“产品如何从0(概念)到1(页面界面)的”;这些问题促使我想要追本溯源,捋顺一下交互的由来、工作内容,以及依照什么方法执行等问题。(1)把冰箱门打开→ (2)把大象放进去→ (3)把冰箱门关上(1)要充值的手机号码→(2) 确认充值多少钱(用“确认”是因为很多软件提供了默认金额)→ (3)付款搞定。

    2017-05-15
  • 实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19
  • 交互设计差异化:WebAPP和APP

    WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5 )的移植,故总结一下期间遇到的问题及不同点总结。 从使用场景上,WAP用户面临比APP用户更严峻的问题: 1、页…

    2015-01-26
  • APPLE WATCH 中文手册:APPLE WatchKit Apps--界面导航

    本文翻译自Apple Watch Programming Guide:Interface Navigation,敬请勘误。 对于内容超过一屏的WatchKit app来说,您必须在设计时选择一个导航类型。您所选择的导航类型定义了如何在应用程序中展示和管理界面控…

    2015-06-15
  • 7个技巧,帮你搞定网页首图设计

    首屏设计的7个技巧,它们并不复杂,却能帮你的首图设计更上一层楼。

    2017-06-06
  • 探讨:对话式交互会成为未来主流的交互方式吗?

    本文详细分析了对话式交互的优缺点和应用场景,适合产品经理、UI设计师和交互设计师来阅读。

    2017-05-07
  • 怎样绘制用户体验地图

    内容来自梁宁老师的《产品思维30讲》,这里是第17讲的笔记。怎么画用户体验地图1.完整的用户角色:需要对「第一只羊」有完整地了解。 (「第一只羊」的话题留在下次介绍)2.清晰的目标和预期:清晰描述用户的目标和预期,他为什么来到你的草地上?他要什么?比如,用户买钻孔机,但是他的目标不是拥有钻孔机,而是需要在墙上打个洞。比如吃饭,用户目标是吃饱?还是想要营造气氛?还是想获得一次交流机会?搞清楚用户的目标和预期到底是什么。3.服务触点:用户从...

    2018-04-01