广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

科技品牌网站如何打造沉浸式体验?|云米案例分享
发布日期:2025-02-08 17:10:59 浏览次数: 894 来源:增长超人


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

 

但这样的情况已在发生转变。一些兼具“家电”和“互联网”基因的公司,从产品定义、技术研发、生态搭建等维度,将智能家居带进我们的现实生活中,云米就是这样一家企业,专注于探索5G时代家庭智能化,打破家电、家居、汽车等产品边界,实现高速全屋互联。

 

在向全屋物联网家电快速扩张的4年间,云米已于2018年9月在美国纳斯达克上市。这次找到增长超人希望建设一个面向全球国际化的网站,帮助云米在海外市场进行宣传推广,以及提升品牌形象和客户体验。



策划思考

云米为这次网站建设做足了准备,给到我们项目团队的资料文件就有1000+,我们应该如何精准地提炼出各产品的卖点?这个时候,我们强大的捕捉与洞察力可以淋漓尽致地展示出来了。
 
吸引消费者购买产品或者服务的理由就是独特的卖点,实际上就是能够吸引买家眼球的独特的利益。一个完整的产品概念是立体的,我们的提炼法则可以从产品的3种属性入手:
  • 产品核心(产品价值)

  • 产品形式(外形、质量、重量等)

  • 产品延伸(服务、身份、荣誉等附加价值)

 
我们提炼出云米产品最独特的卖点,就是功能新技术上的差异化,用创新的技术以打破常规的技术格局让产品更加出众。经过我们的精准提炼后,设计出了30+整体网站的原型策划稿,在产品呈现形式上,我们决定穿插运用自动播放的短视频+微动效+动态图,来打造出充满科技感的沉浸式体验。

在云米全屋物联网这样一个未来家的构想下,原本冷冰冰的,孤立起来的智能终端可以有机结合起来,互相联动形成一张有温度、有情感的智慧生活网络。这时,我们有个大胆的设想,云米的国际网站要让访客身临其境在未来家的美好构想里。
 
身临其境也就是所谓的沉浸感。在《设计的法则》一书中,对沉浸的解释应用的是心流理论,简而言之是利用人的感官体验和认知体验,营造氛围让参与者享受某种状态。


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



家庭物联网中的身临其境

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

  • 感官的沉浸

  • 大脑的沉浸


1.信息的沉浸
信息当中能引发人们沉浸式关注的部分,比如关于奇闻、关于情感以及关于反常规等的信息能导致沉浸,这个层次的沉浸是初级的,它仅仅是信息释放的刺激。
 
为了强调云米的核心——5G家庭物联网,我们设计了一个专门的页面来展示,进入这个页面我们将云米5G时代的家具智能化战略斩钉截铁的作出强调——占满屏幕的“5G loT”。
 
对云米没有充分了解的访客或许会想:“5G loT”是什么意思?或许也会想“5G”这个词为什么要设计为深色作出强调?这个设计不仅可以迅速吸引访客的眼球,更能挑起访客继续向下探索的好奇心。
 
当访客向下滑动鼠标,会从位于居中位置的字母“G”进入到下一个页面,一幅充满科技感的家庭物联网概念图,配合着标题式文案,让访客正式进入云米的家庭物联网的美好构想里,向访客精准地传达着云米家庭物联网的特点和优势。


在展示云米功能新技术上,我们介绍了支撑云米从“创造家电新物种”的角度重新定义未来家居的全屋覆盖的5G信号,以及赋予设备快速响应的5G loT芯片模块等功能信息,简单明了地证明了云米能够实现5G时代家庭智能化技术的强大实力。


2.感官的沉浸

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



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


在打造沉浸感的设计上会被经常引用,这就能解释,为什么要我们将云米5G物联网页面的“5G”字样页面整体色调都设计为深色了。
 
同时,我们也在云米首页的Banner图都做了深色调的设计,除了能更显现出科技感,也更能让用户的感知和注意力迅速集中到产品本身。




产品体验上的身临其境

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


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

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



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


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


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


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


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

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询