网站设计新趋势:沉浸式交互设计

时间的车轮滚滚向前,不断的改变我们对世界的认知,一些网站和App从大红大紫到门可罗雀也许只需要几个月的时间,但是每一次一种旧技术的终结,也就意味着一种新技术的兴起。

以下是我搜集的曾经受到用户热捧的现代交互设计技术,这些技术有些确实非常新奇,有些只是对旧思想的一些改进,但是不管怎样,这些技术会帮助你走在时代的前列,赶上世界前进的步伐。

一. 动画和过渡

一提及交互设计,我们就会想到一个时下最流行的概念,那就是动画效果,从一个炫酷的悬停到一个全屏化的卡通动漫背景,都属于动效的范畴。

对于交互设计来讲动画效果并不稀奇,它们流行的真正原因可能和HTML5、Javascript和CSS有关,在Flash时代做动画效果是一种很奢侈的设计(哇塞,这个图标会反弹),但是现在它们却成为设计必不可少的一部分(嗯?这个图标不反弹吗?!)。

Photocredit:http://gaetanpautler.com/

动效不仅能够在视觉上吸引用户,还在界面切换的过程中扮演着重要的过渡角色,因为界面切换是把各个动效连接起来的纽带;用户是如何从一种状态转换到另一种状态的?在每一种状态下应该告诉或要求用户如何操作?一个高明的切换效果可以毫不费力的解决以上两个问题。

在用户体验良好的界面中,动效通过帮助用户了解如何与界面产生交互,从而起到一种承上启下的作用;(请注意,当人与界面交互时,一些新的技术或是交互方式也许会让用户感到不自然、陌生或是延时)动效对于长时间登陆的用户来讲也是一种明智的选择,因为它可以暂时的分散用户注意,减轻用户视觉压力,让用户长时间的保持良好的体验状态。

动效对于框架设计来讲也是一种不错的选择,在最佳的交互设计案例中,以下五种功能非常重要:

1.动效提醒(Animated notifications)

2.信息呈现(Revealing information)

3.内容强调(Highlighting content)

4.折叠式的表单和菜单(Collapsing forms and menus)

5.滚动动效(尤其是单页网站)(Scrolling, especially for one-page websites)

当交互开始的时候,连续的影片式的动效是整个交互过程的关键所在。用户通常喜欢电影风格、高清晰度和像素级别的设计,著名的迪斯尼动画家Frank
Thomas和Ollie Johnston’s概述的12条动画设计原则在今天依然适用,这12项基本原则应该作为未来动效设计的基础。


二. 叙事性交互(图片网站)

尽管社交媒体的分享模式让信息可视化作为一个视觉信息媒介的作用飙升,但是网站平面设计的作用和交互设计同等重要,在网站中平面设计板式并不是随处可见,然而我们依然可以从中学到很多交互设计的知识。图形的设计方法和图片网站的设计方法非常相似,图片网站也使用HTML5、CSS3和jQuery等工具通过色彩、文本、和流畅的动画去传递交互体验。

Photocredit:http://www.psd2html.com/10-years-in-review/

图片网站这个词是Venture Beat科技博客网站在2013年创造出来的,它通常要求用户去执行一个动作,在操作过程中获得完整的故事情节;这些动作有的时候会非常简单,比如一次轻微的点击,有的时候会相对的复杂,比如打字或是触摸屏幕上的图片。

图片网站真正的强大之处在于他们能够轻松的整合用户的行为,与信息可视化网站不同,你可以把图片网站设计成一种“山外青山楼外楼”的用户体验,这种设计可以让用户完全沉湎其中,在用户体验的过程中提供相关链接和信息可以让提供的内容更具有说服性。

Photocredit:http://www.irwinmitchell.com/safety-on-the-slopes.html

例如,上面这个“Safety on the
Slopes(让滑雪更安全)”的广告标语界面,就是图片网站一个很好的例子,这个网站把相关的信息、地图、视频、事件和成员整合到一起来说明冬季运动具有危险性,如果不用图片网站的形式来呈现这些内容,那么你就会觉得这些知识就像苍白的讲座一样无聊。

的确,图片网站没有用口号去呼吁你采取行动,也没有通过微妙的暗示让你去操作某些东西,但事实上这些动作和行为已经被实现了。例如,假设这个网站是一个户外运动装备的零售商所创建的,他把这个网站作为季节性促销活动的一部分,这时你就可以嵌入一些说明冬季运动具有危险性的产品或产品链接,从而表达冬季运动具有危险性的主题。

我们知道并不是每个人都有足够的资源去建立一个独立的交互式图表(不管是在他们自己的网站中还是设立一个独立的URL),但是你肯定可以利用信息可视化的一些技术让网站感觉起来更逼真。

Photocredit:http://humaan.com/about/

例如,滚动触发动效在信息可视化的交互设计中很常见,但是像上面Humaan(见上图)这样的去体现团队合作和扁平化管理的网站也会用到这样的技术。

Photocredit:https://houseofborel.com/

House of
Borel(上图)是一个流行奢侈品品牌网站,它给人们的感觉更像是在讲述一个互动性故事的网站,而不是一个传统意义上的网站。下面是一个体现信息交互元素的案例:通过滚动触发视频播放—这种体验会引导用户浏览不同的章节并且把重点放在视觉叙事方式而不是层级化的导航上;它适用于一些优雅高尚的品牌网站,这种交互体验会先让你体会那种优雅高尚的生活方式,然后才慢慢的展现它的产品。


三. 微交互

微交互是一种完成单个任务的瞬间交互事件,比如在iPhone上提醒用户的铃声、登录网银或是收藏Facebook上的一篇文章都属于微交互体验设计的范畴。

在浏览网站或是使用App的不经意间,你也许就已经参与到数百个日常微交互之中,所有的这些微交互加起来就形成了一个完整的用户体验。微交互可以说是最小的交互设计元素,但是作用却十分重要(据说快扣(FastCo)设计被称为设计的明日之星)。想象一下,如果你不能在几次点击之后就设置好用户名和密码或是浏览网站时广告弹窗太频繁,你离开这个网站的速度有多快。

Photocredit:https://www.formlets.com/

Photocredit:http://surpris.es/#url

不论是一个小小的博客还是一个大型的全球电子商务网站,这些微小的交互几乎都作用于每一个网站的核心功能:

?    执行任务—这种交互包含简单的动作,比如登陆到界面、添加更新状态、设置闹钟等等。

?    元素链接—在两台设备或是两个网站之间同步两个相同的元素以创造一种微观的交互,不论这种同步模式是设备之间通过多人模式同步还是通过APP同步,或是简单的通过蓝牙耳机和手机同步,都属于元素链接的范畴。

?  
 做调整—任何网站功能设置的变化(比如把某个APP调为静音状态或是把音乐播放器的音量调低一点)和相应的视觉或是听觉的反馈都会形成一种微交互,有些微交互非常之小,以至于用户在操作的过程中根本感觉不到,这也是为什么在微交互设计的过程中需要格外的小心,要让人们感到有足够的反馈而又没有任何被强迫的感觉。

?    状态调节—把一个网站或者某个功能打开或关闭从而改变他们的状态实际上就是一次微小的交互。

?    独特的数据交互—数据交互指的是获得实时的用户数据(比如查看当地天气或者交通状况),这个数据是你执行某个动作产生的结果,打开一个应用程序或者检查一个带有定位功能的网站都会产生相应的数据。

每一次操作都会启动以上的某一行为,用户都是通过在网站或者应用程序上的一些操作来启动程序的(即使是继上一步之后)。上述的这些原则都是按照用户的“行为召唤”模式进行设计(交互设计原则—将要发生什么和如何发生、用户的反馈—执行操作还是不执行操作、发生的方式—偶然发生还是重复发生),一旦交互开始,每一个微小的细节都成为整个设计规划的一部分,如果想了解更多的微交互的知识,我们强烈推荐您访问DanSaffer这个网站。


四. 层级关系

创造一种令人着迷的交互体验不是简简单单的把功能添加到网站上就可以了,需要有计划的去实现,这不仅需要分层的设计技术还需要对用户的流量和行为习惯了若指掌;而如果能够把视觉透视、长轴滚动和背景视频等技术结合起来,你的设计就可以从视觉上吸引并留住客户,但是这种技术要注意不要用过火了,一个糟糕的设计和和一个有精细层级关系的仅有一线之隔。

以下我们推荐三个良好的层级布局的网站,这些网站充分的诠释了沉浸式交互设计的内涵:


i.    AIGA 100 Years of Design

设计这个“100 Years of Design web
site(设计百年)”网站是为了去庆祝网页设计作为一种艺术形式已经走过100年的历史长河,这个网站使用了各种各样的技术和流行元素,从一个滚动操作到一个汉堡包式菜单再到用户投稿的视觉设计,每一页新的界面都包含信息、支持设计理念的动画效果和进行下一操作的线索(不论是通过导航还是适用显示屏上的引导键都是如此)。

Photocredit:http://celebratedesign.org/


ii.    Eventbrite Seat Designer

Eventbrite的网上订票平台为用户提供了一种令人称奇的工具,这种工具能够为特殊的地点和活动提供用户自定义的订座体验,而这种服务体验以前是只有大的场地才能能够做到的;用户只需在网站的操作平台上点击几下,就可以轻松的定制自己喜欢的座位排序方式。

Eventbrite的交互界面使用了一种近乎扁平化的设计风格,在界面中大量的适用鲜艳的色彩、易于操作的菜单和流畅的界面转换动画效果。

Photocredit:https://www.eventbrite.com/l/reserved-seating/


iii.    Sonoran’s Valley

Sonoran’s
Valley网站的特色是为用户提供了一种博弈式的体验,用户通过输入一些特定的信息来参与到一场数字的奇幻之旅。这个网站使用了奇妙的动画、视频分层以及一种标准化的汉堡包式的导航设计,主界面载入的时候通过一种极简的设计风格逐渐转变成一种宽屏视频播放的设计风格(这个网站能让你浏览几个小时而乐不思蜀)。

Photocredit:http://sonorans-valley.com/


思维要超越当前

以上这些网站和技术也许是当今最前沿的设计,但是这些先进的技术在用户的视线里又能停留多久呢?永远保持领先的最好的方法就是思维领先,仔细的研究用户需求的演变过程,我们可以自信的(不是必然)预测未来的流行趋势。

许多人都认为可穿戴装备是交互设计的下一片蓝海,但是可穿戴设备的交互设计有可能会转向使用更多微妙的触觉设计,而减少的视觉设计元素,手表的震动也许比语音提醒或是在屏幕上显示大的图片更受人欢迎。

Photocredit:http://cinderellapastmidnight.tumblr.com/

在所有的媒介中,交互设计也许更有可能会像电视机节目一样变成一种情节式的设计,但是它会保持其数字设计的核心功能。

当你想通过你的设计去帮助用户达成他们的目标的时候,就像你把用户的选择变为情节的一部分呈现在网站上一样,当然这种做法并不适用于所有的网站(比如电子商务网站或是银行网站),但是它一定会在内容流量高度可视化的网站中扮演一个重要的角色,我们已经见过这种技术作为一种常见的网页设计技术用于视频的背景设计了。

作为视觉媒介,电视、电脑和手机之间的界限将变得越来越模糊,交互设计将会不断的把视觉元素和环境元素进行融合,震动、声音和一些必要的操作将会变得越来越普遍,尤其是为手机或可穿戴装备这些具有用户控制元素的载体设计的网站和应用程序更是如此。

虽然对未来的许多规划都仅仅是源于猜测,但是用户的基本特性一般不会变化,比如我们可以预见,用户总是喜欢那种有互动性和参与感的设计,唯一的变化是提供这种互动和参与感的方法会发生变化罢了。

时间: 2024-10-21 09:06:56

网站设计新趋势:沉浸式交互设计的相关文章

网页设计新趋势响应式导航设计

响应式设计是当前网站设计的趋势,针对不同的设备,提供布局解决方案. 而且很多UI设计技术狂人正在不断的进行各种实验,争取让响应式设计越来越好. 响应式设计的难点是导航菜单界面设计.可不能像缩放页面那样缩放导航菜单.在界面设计之前,要谋划好导航菜单在手机.平板.桌面上的布局.今天蓝蓝设计收集了25例出众的响应式设计,大家可以使用响应式在线测试工具Responsinator来看看,他们的网站设计的导航菜单,是怎样UI设计的. Harvard University Boston Globe Disne

8大网页设计新趋势(转载)

网页设计属于设计的一种,而设计中最重要的就是要符合潮流,所以网页设计紧跟潮流是必须的,这样才能使你的网页设计有足够的新鲜度以及吸引眼球的能力.下面笔者总结了8点网页设计技巧的新潮流趋势. 一.使用平面设计 以前我们可能会觉得平面设计和网页设计以及UI设计有很大的区别,会平面设计的人可能未必能做好网页设计,但这样的观念是时候革新了.实际上好的平面设计师会将自己的平面设计功底融合到网页设计当中,如果我们在学网页设计的时候只是参照网站设计,那我们永远无法突破. 不论是用平面设计作为背景也好,或者是用平

web设计新趋势

2015 年 7 个重要的 Web 设计趋势:Web 设计趋势每一年都会有所变化.但设计师的创意天赋是推动改变网页设计标准的法则.设计师负责将创意转化为趋势.趋势转变为标准.如果在 2015 年,网页缺少以下 7 个设计元素,必定被淘汰. 1.排版更灵活 这部分的主要焦点在于,字体展现会受到新兴排版原则影响. 事实上,网页字体和打印字体还是有很大不同的,在 2015,我们会摆脱过去将文本挤在一起的老式思维. 其实,这并不是什么新鲜事,因为自 2006 年以来一直讨论这个概念,但设计适应缓慢,毕竟

移动端设计新趋势:化繁为简

我们在这个"极简主义"的世界生活已经有些时日了,之后又将去向何方? 过去几个月来,设计创新领域的先行者们,将"极简设计"推向了一个新的高度.Facebook.Airbnb和Apple都遵循着近似的原则,简化它们的核心产品,这种"化繁为简"(Complexion Reduction)的新趋势就在它们的移动端设计中得到体现. "化繁为简"究竟是什么? 你是不是从没听说过"化繁为简"的趋势?那是肯定的,因为这只是

Android4.4新特性 沉浸式模式

网上关于Android的沉浸模式,大多数讲的是状态栏与导航栏的透明与融合.查阅了一些资料以后,我想写一篇文章讲述一下沉浸模式的定义到底是什么? 参考资料:https://www.zhihu.com/question/24908570 <iPhone 人机界面指南>时经常出现一个词:“沉浸式程序”,从心理学角度来看,“沉浸”就是让人专注在当前的目标(由设计者营造)情境下感到愉悦和满足,而忘记真实世界的情境.实际上,从采取扁平化设计的iOS 7开始,苹果就开始采用了沉浸式程序的界面展示. 作为An

未来网页设计的趋势——响应式设计图标

说实话,第一次听到"响应式图标"我也觉得怪怪的,正如不久之前,人们为了让图标字体更适合不同设备,而更改它们的大小一样,但是这一想法却让响应式设计以及图标设计有了长足的进步. 他是什么? 响应式设计图标并不是说图标大小会随屏幕尺寸的变动而改变,而是意味着图标会根据自己所处何种设备来改变自身大小.这就意味着屏幕尺寸对图标来说不是那么重要了,因为它能自动调节,它可以变大变小--同一时间,同一屏幕.图标的设计上的差别不会太明显,一般都是细节问题.详细请看下图: 响应式设计图标很重要吗? 随着字

软件设计新趋势,云基类该如何实现?

基于云基类的框架设计-2015年末随想2015年马上要结束了,展望2016,对软件开发和设计有些感谢,想和园子里的朋友交流交流. 想想中的开发场景: 一个好的软件架构设计师设计一套好的架构,这套架构运行与云中的服务器,基于架构开发的人员通过“web service” ,“wcf”或其他还没创造出来的技术引用到本地,开发人员在此架构上完善自己的具体业务需求.(“web service” ,“wcf”,之所以加引号,是无法实现目前的想法) 特点:(1)所有的基类实现代码都在云服务器上,开发人员无法接

Android沉浸式通知栏设计

转载博客:http://www.2cto.com/kf/201503/381348.html Android4.4新特性,系统状态栏一体化. 实现的步骤主要有以下几点: 1.android4.4 以上版本 2.设置app全屏: 方法:在AndroidManifest.xml中设置android:theme="@android:style/Theme.Translucent.NoTitleBar" 3.加载nineoldandroids-2.4.0.jar 4.实现类:把状态栏背景设为全

Web 设计新趋势: 使用 SVG 代替 Web Icon Font

如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法. 这篇文章列举了目前 SVG 比较常见的使用方法. 关于使用 Icon Font 的缺陷,这篇来自 CSS Trick 的 <Inline SVG vs Icon Font> 可谓是总结的相当全面了.在我看来,Icon Font 的主要缺陷有以下几条: 浏览器将其视为文字进行抗锯齿优化,有时得到