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

新闻 2023-03-06编辑：深圳网站建设阅读（）标签： 沉浸 如何打造

深圳网站建设公司 帮助企业提升网站形象,彰显公司实力,PC+手机+微信+小程序
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务】24RX365 为您提供1对1的专属VIP服务

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

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

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

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

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

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

　　家庭物联网中的身临其境

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

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

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

　　2.感官的沉浸

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

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

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

　　产品体验上的身临其境

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

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

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

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

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

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

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

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

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

　　写在最后

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

• 上一章：面对非设计师的模板网站建设指南
• 下一章：企业家和网页设计师之间的天作之合