1. 首页
  2. 设计网站
  3. 正文

科技品牌网站如何打造沉浸式体验?

  智能家居的浪潮在国内一波又一波涌起,其实消费者并不太买账,体验感差,部分功能可有可无等一系列问题阻碍着智能家居在家庭的落地。

  但这样的情况已在发生转变。一些兼具“家电”和“互联网”基因的公司,从产品定义、技术研发、生态搭建等维度,将智能家居带进我们的现实生活中

  吸引消费者购买产品或者服务的理由就是独特的卖点,实际上就是能够吸引买家眼球的独特的利益。一个完整的产品概念是立体的,我们的提炼法则可以从产品的3种属性入手:

  1.   产品核心(产品价值)
  2.   产品形式(外形、质量、重量等)
  3.   产品延伸(服务、身份、荣誉等附加价值)

  身临其境也就是所谓的沉浸感。在《设计的法则》一书中,对沉浸的解释应用的是心流理论,简而言之是利用人的感官体验和认知体验,营造氛围让参与者享受某种状态。

  就像VR显示屏所展示的内容,由于它有着对视觉技术的把控、对场景封闭的塑造,以及对交互技术的强化,所以人们可以戴着头盔参演一部电影。 网站内容的实质是在扮演信息交互的媒介,优质的内容可以让人直接与其进行交互,获得价值。不单只是网站内容,应该是所有内容,未来的内容传递更关注用户的沉浸感。


  家庭物联网中的身临其境

  实现用户在网站能有身临其境的感受,是关于沉浸感的“争夺”,可以从三个层次来切入:

  1.   信息的沉浸
  2.   感官的沉浸
  3.   大脑的沉浸

  1.信息的沉浸信息当中能引发人们沉浸式关注的部分,比如关于奇闻、关于情感以及关于反常规等的信息能导致沉浸,这个层次的沉浸是初级的,它仅仅是信息释放的刺激。

  2.感官的沉浸

  在这一层次,不限制于用文字作为载体,我们可以通过其他表现形式作为载体,释放固定的刺激来唤起访客的感官感受,或是情绪体验,可能通过视觉、听觉、感觉而传递。 两个自动播放的视频分别向访客“讲解”了“从孤立到整体的物联网家庭场景体验”和“打破不同类型智能家电之间的壁垒”,将访客代入到整体、智能、互联的家庭生活方式体验,从而达到身临其境的效果,也会有更直观的理解和感受。用户被吸引往往是置身于某一种场景之中,场景的设计代入感很强,这是感官和认知相结合在一起的体验形式。

  3.大脑的沉浸让访客的大脑全然沉浸的状态,我们需要做的是稍微借助前两个层次的方法,从而让访客达到第三层次的沉浸。可见沉浸式设计的关键是吸引,用户的视线首先要被吸引过来。 沉浸感可以理解为注意力的高度集中,在注意力越是高度集中的状态,就越能体验到沉浸感。那么,深色能让用户感知到应该将注意力迅速集中起来,不然总觉得看不清或者会错过什么。所以说深色更容易让人进入沉浸式体验模式。


  在打造沉浸感的设计上会被经常引用,这就能解释,为什么要我们将云米5G物联网页面的“5G”字样和页面整体色调都设计为深色了。

  产品体验上的身临其境

  沉浸在云米的5G家庭物联网,感受过云米打造的智能互联未来的家之后,他们的主打产品又是如何在网站上做到,让访客有真实的产品体验感受,同时又能强调产品的竞争力? 这就需要我们网站在产品体验的沉浸式设计中,即要有吸引用户的产品优势,还需要营造主题场景空间,通过场景延伸融合不同场景下的解决方案,适时制造有趣的互动体验节点等等。从而使用户沉浸其中,忘却真实世界。

  1.直观明确的表达方式——短视频和动态图

  我们不同于常规网站直接用产品图加文字描述的形式,当你从首页Banner图的产品展示进入主打的产品详情页面——机器人和无绳吸尘器,只见一个自动播放的短视频,直观明确的演示了产品的工作状态。

  在沉浸感的设计中融入图片、视频,将产品的操作、状态可视化,这些具象的形式可以让访客快速理解。

  2.增加整体体验的细节——微交互和动态图

  在网站的产品展示中离不开交互动效设计,合理有效的动效设计有助于提升用户体验,甚至可以进一步推动用户与品牌的情感建立。 有了直观明确的视频呈现之后,就不需要过于花哨、炫酷和动感太强的交互了,这样会使页面看起来混乱,效果就会适得其反。加之,在时隔今日百花齐放的各类产品大环境中,微交互已经逐渐从肤浅的炫酷,转型为富有内涵的用户体验的关键要素了。 我们向下滑动鼠标进入下一屏,左侧的扫地机器人概念图,会随着我们滑动鼠标的动作缓缓地滑进页面,再配合右侧“紫外线杀菌技术”这一标题式文案,直观点明了这个产品的核心功能。

  我们还运用了【视差滚动】的交互效果,也就是当你滚动鼠标滚轮的时候,各图层以不同速度移动,形成立体的运动效果,可以带来十分出色的视觉体验,搭配深色背景更能使访客集中注意力沉浸其中,大大提升访客体验。

  为了让访客可以看清楚这个产品的全貌,我们还做了产品3D示意图,可按住鼠标左键根据环绕产品的圆形虚线进行拖动,可直观地看清楚产品的全貌。

  常规产品的展示相对于主打产品的展示会简洁很多,只做了简单的产品功能及特点的介绍。不过,与传统外贸网站的产品展示不同的是,我们还运用具有科技感的产品应用示意图便于访客更好的理解。 同时,每个功能点的展示都伴随着微动效而出现,流畅的动效体验,可以让访客的阅读过程更自然,增加了浏览体验的舒适度。这样的微动效加上图片交错出现的排版方式,也让层级关系更加清晰,让信息渐进式呈现,这些小细节足以让视觉品质实现有效提升。

  写在最后

  沉浸式体验是一个相对新颖的概念,除了包括人的感官体验,也包括认知体验。在网站打造沉浸式体验,可以让访客进入网站之后的浏览体验有十分明确的目标,不会让他们感到不知所措,增加了他们在网站的停留时间。 当然,网站对访客的交互行为要有即时的反馈,就像游戏为何会让用户快速达到沉浸状态,这跟用户动作与响应时间的间隔设计是息息相关的。

    延伸阅读

  • 沉浸式网站设计特点有哪些?

    一、常见的沉浸式设计手法叙事性设计(讲故事),利用情境,沉浸,角色,气氛,情节,节奏的设计来让观众融入故事本身当中来。这也是最基础的设计手法之一。二、沉浸式网站设计特点有哪些?...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/4575.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();