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

 

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

 

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

沉浸式体验智能家居全屋互联 | 网站设计策划

云米为这次网站建设做足了准备,给到我们项目团队的资料文件就有1000+,我们应该如何精准地提炼出各产品的卖点?这个时候,我们强大的捕捉与洞察力可以淋漓尽致地展示出来了。

 

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

1.产品核心(产品价值)

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

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

 

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


沉浸式体验智能家居全屋互联 | 网站设计策划

在云米全屋物联网这样一个未来家的构想下,原本冷冰冰的,孤立起来的智能终端可以有机结合起来,互相联动形成一张有温度、有情感的智慧生活网络。这时,我们有个大胆的设想,云米的国际网站要让访客身临其境在未来家的美好构想里。

 

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

沉浸式体验智能家居全屋互联 | 网站设计策划

就像VR显示屏所展示的内容,由于它有着对视觉技术的把控、对场景封闭的塑造,以及对交互技术的强化,所以人们可以戴着头盔参演一部电影。

 

网站内容的实质是在扮演信息交互的媒介,优质的内容可以让人直接与其进行交互,获得价值。不单只是网站内容,应该是所有内容,未来的内容传递更关注用户的沉浸感。

 

沉浸式体验智能家居全屋互联 | 网站设计策划

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

信息的沉浸

感官的沉浸

大脑的沉浸

 

沉浸式体验智能家居全屋互联 | 网站设计策划

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

 

为了强调云米的核心——5G家庭物联网,我们设计了一个专门的页面来展示,进入这个页面我们将云米5G时代的家具智能化战略斩钉截铁的作出强调——占满屏幕的“5G loT”

 

对云米没有充分了解的访客或许会想:“5G loT”是什么意思?或许也会想“5G”这个词为什么要设计为深色作出强调?这个设计不仅可以迅速吸引访客的眼球,更能挑起访客继续向下探索的好奇心。

 

当访客向下滑动鼠标,会从位于居中位置的字母“G”进入到下一个页面,一幅充满科技感的家庭物联网概念图,配合着一句“重新定义未来家园”,让访客正式进入云米的家庭物联网的美好构想里,并且运用标题式文案,向访客精准地传达着云米家庭物联网的特点和优势。

沉浸式体验智能家居全屋互联 | 网站设计策划

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

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验智能家居全屋互联 | 网站设计策划

在这一层次,不限制于用文字作为载体,我们可以通过其他表现形式作为载体,释放固定的刺激来唤起访客的感官感受,或是情绪体验,可能通过视觉、听觉、感觉而传递。

 

两个自动播放的视频分别向访客“讲解”了“从孤立到整体的物联网家庭场景体验”和“打破不同类型智能家电之间的壁垒”,将访客代入到整体、智能、互联的家庭生活方式体验,从而达到身临其境的效果,让访客对家庭物联网有更直观的理解和感受。用户被吸引往往是置身于某一种场景之中,场景的设计代入感很强,这是感官和认知相结合在一起的体验形式。

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验智能家居全屋互联 | 网站设计策划

让访客的大脑全然沉浸的状态,我们需要做的是稍微借助前两个层次的方法,从而让访客达到第三层次的沉浸。可见沉浸式设计的关键是吸引,用户的视线首先要被吸引过来。

 

沉浸感可以理解为注意力的高度集中,在注意力越是高度集中的状态,就越能体验到沉浸感。那么,深色能让用户感知到应该将注意力迅速集中起来,不然总觉得看不清或者会错过什么。所以说深色更容易让人进入沉浸式体验模式。

沉浸式体验智能家居全屋互联 | 网站设计策划

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

 

同时,我们也在云米首页的Banner图都做了深色调的设计,除了能更显现出科技感,也更能让用户一进到云米官网就被抓住眼球,使得他们集中注意力进行后续的浏览。

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸在云米的5G家庭物联网,感受过云米打造的智能互联未来的家之后,他们的主打产品又是如何在网站上做到,让访客有真实的产品体验感受,同时又能强调产品的竞争力?

 

这就需要我们网站在产品体验的沉浸式设计中,即要有吸引用户的产品优势,还需要营造主题场景空间,通过场景延伸融合不同场景下的解决方案,适时制造有趣的互动体验节点等等。从而使用户沉浸其中,忘却真实世界。

沉浸式体验智能家居全屋互联 | 网站设计策划

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

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验智能家居全屋互联 | 网站设计策划

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

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验智能家居全屋互联 | 网站设计策划

在网站的产品展示中离不开交互动效设计,合理有效的动效设计有助于提升用户体验,甚至可以进一步推动用户与品牌的情感建立。

 

有了直观明确的视频呈现之后,就不需要过于花哨、炫酷和动感太强的交互了,这样会使页面看起来混乱,效果就会适得其反。加之,在时隔今日百花齐放的各类产品大环境中,微交互已经逐渐从肤浅的炫酷,转型为富有内涵的用户体验的关键要素了。

 

我们向下滑动鼠标进入下一屏,左侧的扫地机器人概念图,会随着我们滑动鼠标的动作缓缓地滑进页面,再配合右侧“紫外线杀菌技术”这一标题式文案,直观点明了这个产品的核心功能。

沉浸式体验智能家居全屋互联 | 网站设计策划

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

沉浸式体验智能家居全屋互联 | 网站设计策划

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

沉浸式体验智能家居全屋互联 | 网站设计策划

常规产品的展示相对于主打产品的展示会简洁很多,只做了简单的产品功能及特点的介绍。不过,与传统外贸网站的产品展示不同的是,我们还运用具有科技感的产品应用示意图便于访客更好的理解。

 

同时,每个功能点的展示都伴随着微动效而出现,流畅的动效体验,可以让访客的阅读过程更自然,增加了浏览体验的舒适度。这样的微动效加上图片交错出现的排版方式,也让层级关系更加清晰,让信息渐进式呈现,这些小细节足以让视觉品质实现有效提升。

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验智能家居全屋互联 | 网站设计策划

沉浸式体验是一个相对新颖的概念,除了包括人的感官体验,也包括认知体验。在网站打造沉浸式体验,可以让访客进入网站之后的浏览体验有十分明确的目标,不会让他们感到不知所措,增加了他们在网站的停留时间。

 

当然,网站对访客的交互行为要有即时的反馈,就像游戏为何会让用户快速达到沉浸状态,这跟用户动作与响应时间的间隔设计是息息相关的。

 

从一堆像小山似的文件资料里进行提炼,再到构建出30+网站框架原型,我们站在一个高层次上观察着用户浏览视觉和相关行为,从而进行调研、需求分析,这一阶段可以归结为定义问题的阶段,产品设计本质上可以归结为设计解决方案的阶段。产品经理去思考网站设计方案、绘制原型图、制定各种网站设计方案,其实这些都是在解决方案上下功夫,我们始终带着产品思维来做网站。

 

做人要厚道,转载请注明文章来源: http://www.boxui.com/say-anythings/58825.html