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

时间的车轮滚滚向前，不断的改变我们对世界的认知，一些网站和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网站的特色是为用户提供了一种博弈式的体验，用户通过输入一些特定的信息来参与到一场数字的奇幻之旅。这个网站使用了奇妙的动画、视频分层以及一种标准化的汉堡包式的导航设计，主界面载入的时候通过一种极简的设计风格逐渐转变成一种宽屏视频播放的设计风格（这个网站能让你浏览几个小时而乐不思蜀）。