大客户专线

400-6065 301

24h在线售后

科学方法论

View More

navigation

元宇宙 · 网站设计视觉设计解决方案

分享22个元宇宙+网站,并阐述元宇宙+相关设计思维散发的步骤,了解黄金15'是如何着手项目落地。

2024.03.08

正文:

 

1992年,著名的美国科幻小说家尼奥·斯蒂文森撰写的《雪崩》中描述了一个平行于现实世界的网络世界-元界(Metaverse)。2021年,随Roblox上市元界即元宇宙成为了科技领域最火爆的概念之一。一时间无论是创业者还是资本市场对于元宇宙的关切骤然升温。可以说人类对现实世界的更深欲望,打开了虚拟世界和真实世界的大门,AR和VR技术在高速发展,也许很快,在不久的将来,我们都处于《头号玩家》的沉浸式体验,不知这是否值得期待。

 

 

巨头掌握的高端科技技术引领着行业发展,2021年至今,随着元宇宙概念火爆,我们承接了不少元宇宙+的相关项目,AR、VR、智能软件、智能硬件,在此,我们借助黄金15' 来一起分享沟通。

 

一、三大思维

 

 

从上至下的建站核心思维,让企业在互联网平台的展示发挥最大效益。

 

 

1. 时间思维

 

 

用户在互联网中找到企业网站的时间、用户在网页的停留时间、在有限的时间传递用户有用的信息、在一定的时间之后实现用户转化。

 

 

在看《头号玩家》的时候,哇哦,戴上眼镜、穿上皮肤、拿上手柄,滴的一声就进入了另一个世界,我们立足于元宇宙+带给用户的第一印象,技术的先发制人,商业资本需要企业拥有的实力出发拟定“夺人眼球”是这个行业最优先的词,而“体验”是这个行业最重要的词。

 

 

在制作此类项目时,我们抓住这两个关键词,结合企业自身的产品进行规划,从开屏动画开始,我们需要引人注目,利用静态场景+动态空间+交互体验构建一个能在15'内让用户发出“哇哦”的网站。

 

 

2. 品牌思维

 

 

围绕企业品牌推广运营为核心,打造品牌记忆点,通过专业的设计表达出行业的专业性,实现品牌网站高转化。

 

 

每个做品牌的企业都应该有自己的品牌调性、产品调性,Roblox、Facebook(Meta)、微软、腾讯、字节跳动收购的Pico,我们一听这些名词,就有呼之而出的品牌印象,随着“元宇宙”概念的流行,品牌方开始关注到消费者体验变化带来的营销机会,包括NIKE、GUCCI、 VANS、COCACOLA等纷纷与元宇宙空间建立品牌元宇宙主题世界,以品牌文化为主题,为用户提供沉浸式的互动体验。

 

 

目前元宇宙发展最为蓬勃的产业是更贴近娱乐化、社交化的场景,内容生产者以及智能硬件公司将成为这一时期的变现主力。在元宇宙营销生态系统的要求下,品牌需要能创造符合元宇宙特征的体验,根据元宇宙生态营销中的三大内容:人、货、场(用户、产品、场景),去搭建了自己的“数字经济”。我们根据品牌营销方向去规划我们的网站内容,其侧重点可以是技术或是元宇宙落地的场景或是元宇宙的热点营销。

 

 

从品牌营销的出发点,结合营销所处的市场环境,我们可以准确的得出网页的设计大方向,从而把控好用户进入网站之后的落脚点。

例如元宇宙的虚拟现实技术,载体为VR眼镜,企业是以买眼镜为核心,还是彰显技术性为核心,这个在我们的网站规划及逻辑体验中起到不可缺少的参考作用。结合品牌在互联网上的展示目的,通过视觉,抵达目标用户群体,从而产生用户对这个品牌的第一印象,是很炫酷的VR眼镜,还是很高端的前沿技术,抑或是独揽二则为一体。

当然对于不一样的tob与toc的市场环境,高端的前沿技术最终是吸引投资方、人才,炫酷的VR眼镜更多是消费者。所以品牌定位与品牌的未来发展方向,会影响网站的设计,当然,有人会说你们不就是个帮我们做网站的吗?不,我们是你们的品牌企划部、市场营销部、媒体部,这就是为什么我们做网站你会感觉我们是甲方的一份子。

 

 

3. 商业思维

 

 

我们需要应对大环境的瞬息万变,网站内容同步甚至需要先于企业发展,网站规划会结合企业目前乃至未来发展的全方位考虑,通过在互联网上的沉淀,获取足够体量的数据,来分析用户行为习惯及用户偏好,来迭代网站,甚至是迭代产品,从而获取持续转化。

 

 

在2022年3月,速途元宇宙硏究院推出的《2022元宇宙产业发展趋势报告》中就提出,2022下半年至2024年,随着元宇宙产业的定义与监管逐步到位,元宇宙的边界开始清晰,行业对于元宇宙的热情将开始回归于理性,随着入局门槛的提高,小企业开始被巨头并购,一些自身竞争力薄弱、伪元宇宙概念的企业开始离场。

随着元宇宙底层技术的开发,元宇宙的基础设施建设将开始进入到全面提速的时期,关键技术的升级,将成为元宇宙打破发展瓶颈的关键。同时,数字技术是实现推动数字经济与实体经济“双融合”的大引擎。

速途元宇宙研究院提出:人类社会与元宇宙将以“元宇宙+”的模式长期存在。通过将元宇宙工具化的形式,将成为继互联网之后,推动各行业效率提升至新的高度的重要抓手。想要到达元宇宙发展的终极形态,则必然要与其他行业融合,通过赋能“共生”的方式实现场景落地。以人工智能技术为例,其既能成为推动新医药、新材料、新能源发展的基础设施,又能成为各行各业数字化转型的新型生产力,是典型的“跨圈生产力”。

那么在如此的大环境之下,我们的元宇宙+网站的设计核心,其实就已经十分的明确,在共生的元宇宙+模式当中,我们的核心突出点是我们的技术,及我们的衍生的产业应用。

掌握流量、转化、运营三大核心关键词,从热搜的元宇宙到落地的实际产品,我们需要提升用户流量的精准度,通过视觉让用户产生好奇、印象、记忆点,加长用户在网站上的停留时间,从而接受更多的网站信息,是我们需要考虑的。运用浓郁的元宇宙氛围设计用户吸睛点,如何结合具体的落地产品从而产生用户转化是我们设计网站需要考虑的。

 

 

二、黄金15秒落地方案

 

 

时间思维 - 用户着陆的快与慢、长与短

品牌思维 - 围绕核心内容的逻辑与版块

商业思维 - 数字量化的反馈与迭代

 

 

1. 元宇宙共生的网站特征

 

例如我们最常合作的VR眼镜等数字化产品、数字化技术之类的解决方案,在网站需求上都有一定的共性。

 

主要是以下四个方面:

 

重视视觉展示效果

 

数字化产品的形象是实体或非实体,对内容的表现形式有较高的要求。

 

强调品牌实力赢得信任

 

希望通过数据、人才规模、合作规模等体现创新性、业内领先性。

 

着重技术与解决方案

 

数字化落地,通过实际的产品或者使用的场景。

 

差异化的体验感

 

从开屏的动态及内容的交互有良好的体验。

 

2. 网站设计步骤

 

2.1 需求分析

 

项目背景

 

结合企业所提供的服务:VR眼镜、VR技术、360°空间、软件解决方案、游戏、整合性平台、电子产品、元宇宙发布会、元宇宙会议室、元宇宙数字土地资产……

 

竞品调研

 

 

行业竞品调研,做竞品调研并不是为了模仿,主要是了解行业、用户的习惯,不论是审美还是业务划分,我们不能脱离行业共性与用户习惯去做天马行空的创新,例如我们的元宇宙共生行业为数字化的创新/科技/动态等设计风格,需要在核心技术的概念上去做一些概念化的设计,而如果参考医疗行业的严谨风格显然是不合适的。竞品调研可以从设计风格、内容结构、网站营销能力三个方面拆解进行,找出行业共同点,规避对方网站及自己网站现有问题,超越并做到行业领先。

 

 

企业定位/期许

 

巨头行业、创新企业……

 

目标群体分析

 

 

网站目的

 

短期宣传/中期赋能/长期沉淀

 

网站需要传递的诉求

 

技术、引领、尖端、引资……

 

2.2 网站内容整理及栏目规划

 

在此类企业的版块规划中,视觉展示占首要位置,结合我们最基础的网站版块逻辑结构,从网站第一屏就需要给出具有品牌调性的信息。

 

 

2.3 设计关键词

 

我们举行 可以实时反驳的头脑风暴(注释1):

 

以某VR眼镜企业为例

 

产品本身、未来的期许、品牌调性、虚拟现实、全景展示、沉浸式体验、空间、视觉差、产品爆炸图、产品拆解、黑色、蓝色、粒子效果、

 

我们可以衍生出很多关于VR眼镜的关键词(这些关键词是有要求的,详见注释1),灰色为头脑风暴中当场被“攻击”掉的,黄色为二次“攻击”掉的,最终我们可以整合出5大目标词作为此项目的设计基准与创意散发起点:

 

空间感、3D旋转、黑色、高级、体验

 

关于此类用户的“心智模型”:

 

体验、感官、记忆点、分享社交、未来消费者(潜在客户、目前阶段的观望者)

 

2.4 疯狂灵感

 

我们设计从来不是埋头苦干,网站设计需要商业性,商业需要市场验证,我们会收集大量参考快速获得启发,遵循几个找灵感的原则,按照我们上面确定的“定位”“目标词”“心智模型”为基础进行海量的如下步骤:

 

① 收集;② 提取;(就是 输入、输出);重复1与2

 

 

很多客户会在无数的尝试纠结中浪费时间,感觉没什么要改,但是就是要改。极简慕枫设计灵感不比客户的少,相信我们会选择最合适的一种展示手法。

 

 

 

2.5 精致布局及配色方案

 

结合完整的Vi手册,应用到网页或调整出网页应用的配色方案,以行业调性及品牌视觉体系为出发点,设计我们的颜色。

 

 

2.6 原型确认与效果图

 

原型是策划落地及用户体验梳理的重要步骤,通过原型可以快速地规划页面内容、网站页面之间的关系,模拟用户旅程。需要注意的是所有的策划要基于可以提供的真实内容,原型一定是可以落地的内容,这样才能保证后续实施的一致性 。

 

 

 

三、 极简慕枫优秀案例赏析

 

昀光科技

 

点状空间递增、交互视觉差、数据化动态字体

 

https://lumicore.com/

 

 

唐古科技

 

视觉差云层、建筑;动态海拔、实时温度;

 

观察镜(瞄准镜)设计,让用户感觉似乎真的在观察另一个世界。

 

http://tg.mfweb.club/

 

 

视驰科技

 

如何用简单干净的几何表达超低延时与高精度定位的结合,看下方案例

 

https://www.ivisionic.com/

 

极熵科技

 

视频开屏;3D建模结合触发动态;

 

https://maxtropy.com/

 

 

友达数位

 

统一的AUO集团视觉规范;

 

目前的静态3D,动态的内容版块,强调了内容,若是单独做3D色块的立体动态,则强调AUO集团视觉的统一性;

 

https://www.auodigitech.com/zh-CN/

 

 

四、灵感分享

 

我们全网搜集了22多个优质的元宇宙+的网站,包括VR眼镜、电子产品等数字化产品、数字化技术之类的解决方案、360°空间等场景展示、品牌游戏营销、元宇宙发布会、元宇宙会议室、元宇宙数字土地资产等虚拟场景应用,每一个都有自身的亮点。

 

BEAR 71VR

 

虚拟世界真实操作

 

https://bear71vr.nfb.ca/

 

 

Dpt

 

AR视觉增强技术

 

https://dpt.co/en/

 

 

Blobmixer

 

3D动态

 

https://blobmixer.14islands.com/

 

 

微软数据中心

 

3D建模

 

触发交互

 

https://news.microsoft.com/stories/microsoft-datacenter-tour/

 

 

OSSOVR

 

医学

 

https://www.ossovr.com/

 

 

OWN VR

 

3D动态触发旋转

 

https://osirisvr.webflow.io/

 

 

TRIVVER

 

开屏虚拟空间视频展示

 

https://www.trivver.com/

 

 

Museudastoninhas

 

全景展馆体验

 

https://museudastoninhas.com.br/o-museu-virtual/

 

 

COUNTER-DESIGN

 

展览馆沉浸式体验

 

https://counter-design.digital/

 

 

Fis - VR空间设计

 

简约、直白、固定式点击体验

 

https://www.fisaboldfuture.com/

 

 

ROCKET LAB

 

https://www.rocketlabusa.com/

 

 

OddBot

 

https://oddbot.oddcommon.com/

 

 

VR for Work

 

https://www.vrfor.work/

 

 

SILVERSTREAM TECHNOLOGIES

 

https://www.silverstream-tech.com/

 

 

PIAGET: POLO EXPERIENCE

 

http://polo-experience.piaget.com/video/360

 

 

EXXONMOBIL CARBON CAPTURE

 

https://ccs-ar.exxonmobil.com/

 

 

Motley Peers

 

https://www.motleypeers.com/projects

 

 

Are you okok?

 

https://areyou.okok.services/

 

 

MicroWaver

 

https://microwaver59.com/

 

 

Photon - WebGL experience

 

https://neuro-symbolic-lab.com/experience/play

 

 

SKP-S, WALKING ON MARS

 

https://m.skp-beijing.com/skps2021aw/index.1.html

 

 

DR/VRS NFT

 

https://weownthenight.io/

 

 

 

注释1 进阶版头脑风暴——可以实时反驳:

 

传统的头脑风暴的原则之一是在大家集思广 益的时候不能否定、或打断、或攻击,但是我们团队的头脑风暴明确说明了:可以被实时打断、实时反驳、实时迎接攻击,如果是有更好或者更加合适的想法,我们会实时表态,并可能引发对于这个问题的争执,在不断的实践中,我们不断的更新我们的思维模型,不断的去其糟粕,在头脑风暴之前,我们就已经做好防御、攻击的准备,这些准备,让我们在探讨的过程中,更加的高效、更加的激情、更加的为自己的言语、想法负责。

 

实施要求:

 

针对**网站的需求,进行设计关键词的输出,这些关键词,包含感受等抽象性名词、专业术语等概念性名词、热点词汇、需求功能、设计的灵光一现……

 

 

Methodology

 

极简慕枫-定义商业品牌官网,更多方法论请查看:

 

《官网设计必看的用户心理思维/指南》

 

《官网设计必看的品牌思维/指南》

 

《官网设计必看的头脑风暴思维/指南》

 

《官网设计必看的配色思维/指南》

 

《官网设计必看的灵感思维/指南》

 

SOURCES

 

参考资料:

 

《元宇宙内容营销指南》 白皮书|特赞 - 腾讯内容开放平台

 

《2022元宇宙产业发展趋势报告》:人类社会将以“元宇宙+”模式长期存在 - 澎湃

 

DISCLAIMERS

back to list