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

 

 

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

如下是我搜集的曾经受到用户热捧的现代交互设计技术，这些技术有些确实很是新奇，有些只是对旧思想的一些改进，可是无论怎样，这些技术会帮助你走在时代的前列，遇上世界前进的步伐。

一. 动画和过渡

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

对于交互设计来说动画效果并不稀奇，它们流行的真正缘由可能和HTML五、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项基本原则应该做为将来动效设计的基础。

二. 叙事性交互（图片网站）

尽管社交媒体的分享模式让信息可视化做为一个视觉信息媒介的做用飙升，可是网站平面设计的做用和交互设计同等重要，在网站中平面设计板式并非随处可见，然而咱们依然能够从中学到不少交互设计的知识。图形的设计方法和图片网站的设计方法很是类似，图片网站也使用HTML五、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/

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

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

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

虽然对将来的许多规划都仅仅是源于猜想，可是用户的基本特性通常不会变化，好比咱们能够预见，用户老是喜欢那种有互动性和参与感的设计，惟一的变化是提供这种互动和参与感的方法会发生变化罢了。