交互设计趋势

这两天在一个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

相关推荐

  • 【媒体观察】“爆款”G一代,好品质给用户体验“上保险”

    春夏交替的四川地级市资阳,天气多变。但降温和阴雨,还是没能阻挡住中国西南最活跃经济区域,吊装用户的热情与期待。2018年4月23日,将近400位用户,来到了“徐工G能大咖&新产品交接仪式”现场。到场用户的业务范围、规模、设备不尽相同。其中既有已经开始“公司化”运营者,也有依靠零散数台吊车积累第一桶金的“拼搏者”;既有跟随上一轮热潮涌入的新手,也有从业十几年甚至几十年的“老司机”。虽然对市场的理解,对未来的规划各有所取,但谈及徐工G一代产...

    2018-04-29
  • 交互设计 | 2个概念,梳理成熟的交互设计作品思路

    直接上干货,给大家介绍作品设计中至关重要的两个概念——storytelling 和 process。这两词不是我拍脑袋想的,是我和很多hr(包括一些美国的agency,知名大公司如amazon)聊天的时候直接问的。不仅如此,我…

    2017-08-01
  • 【设计思考】中西医结合,开出交互良方

    中医通过“望、闻、问、切”四诊合参的方法,探求病因、病性、病位,这就好比定性研究中通过访谈法、观察法、焦点小组、可用性测试、卡片分类、情绪版等方法进行的研究工作。 西医更多的是借助医疗仪器和实验室对疾病…

    2017-05-17
  • 交互设计可以区分出一个好的产品和一个差的产品——「得米Micah」

    这是 Bestony 推荐给你的第141个公众号基础信息公众号名称: 得米Micah公众号类型:文章型订阅号公众号ID:MicahDesign更新频次:不定期更新简介今天为大家分享的公众号来自一个交互设计师 Micah 。搞互联网的或多或少都听过这个岗位,我在网易待过,也曾经为外包公司干活,也为初创企业作过技术服务,很多时候,不同产品的区别最大的点可能便是在于交互设计。小公司或外包公司会有设计师,但是是我们所说的「视觉设计师」,而大公司...

    2018-03-15
  • 阿里交互新手小记 | 交互工作流程的梳理

    头疼就是脑子里有什么正在激烈地进行改变,可能就是你从困难上学会的东西。—— 写这篇文章的人

    2017-05-23
  • 为什么我推荐使用Flinto做高保真交互设计稿?

    静电说:其实Flinto并不算一个新鲜的工具了,但是感觉在设计师中的流行程度并不高,可能是这个工具一直很低调的原因吧。在16年初,Flinto还只是个可以做连连看的工具,跟其它同类型的工具并没有太多的区别。但是随…

    2017-08-01
  • 清华美院交互设计考研经验分享:考试要懂得“扬长避短”

    2018年清华美院交互设计-黎娜大家好,我叫黎娜,我本科毕业于广州美术学院工业产品设计系。产品设计主要是偏向于生活家居类的小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2017年6月底就决定报考这个专业。接下来我想与大家分享的是自己的一些备考经验,希望能对你们有一些帮助。第一部分是关于专业一“上机”考试。我认为上机考试最重要的两部分分别是app和ppt。  app的练习方法有很多,这里我想分...

    2018-04-23
  • 按钮的优先级选取与用户体验最佳实践

    通常带有明确指向性和说明的标签(按钮内容,文本)会比通用的“OK”或者“确定”要更好。
    尽可能使用动词,而不是OK,因为前者意义会更明确,用户不会断章取义从而作出错误的选择。

    OK/[Do it]/Yes
    [Don’t do it]/No
    Cancel

    2017-05-23
  • 交互设计新人在阿里的走心实习总结 ▏新手设计成长指南

    互联网行业的设计师,工作中是埋头苦干?还是想要寻找一些能真正提升自己的“诀窍”?其实很多时候,所谓“诀窍”,就是厘清自己的思路,让成长有正确的方向。本文的作者走心地梳理了他在阿里几个月的实习期里为他留下…

    2017-08-04
  • 交互设计篇-如何处理需求

    如何处理需求,是产品经理的基本功,不管是来自老板还是客户的,亦或来自企业内部(运营、业务)及产品本身的发展,产品经理都需要把需求的收集、分析、管理做到有效进行。一、需求收集用户调研运用场景:产品规划初期或者遇到重大版本迭代,需要重新架构设计时,将会进行用户问卷、用户访谈的方式去挖掘用户的真实需求。基本方法:用户问卷-定量研究的方法,问卷问题一般为15个左右,包含用户基础资料信息(包括年龄、收入、教育水平等人口统计学范畴信息)和主观性的信...

    2018-05-06