更改之前的效果图:

更改之前浏览器窗口放大缩小图表都不会进行动态的缩放，
更改之后的效果图：

更改之后图表就会根据浏览器窗口大小实时监听进行缩放
代码：

 topChart.setOption({ series: [ {name: '最大值',type: 'line',stack: '最大值',data: dataMax}, {name: '最小值',type: 'line',stack: '最小值',data: dataMin}, {name: '平均值',type: 'line',stack: '平均值',data: dataAvg}, ] }); window.addEventListener("resize",()=> {//监听浏览器窗口大小 topChart.resize(); }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

如果有多个图表同时渲染，给个定时器就可以了，ss[0]，ss[1]，ss[2]，ss[3]分别表示四个图表的class

var resizeTimer = null; window.addEventListener("resize", () => { if (resizeTimer) { clearTimeout(resizeTimer) } resizeTimer = setTimeout(function(){ ss[0].resize(); ss[1].resize(); ss[2].resize(); ss[3].resize(); }, 10); }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

没了，结束了，是不是很简单呐，如有问题，欢迎留言。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

写在前面

vue文件最后要空一行，不然会报错，真的奇葩…

登录概述

登录业务流程

• 1.在登录页面输入用户名和密码
• 2.调用后台接口进行验证
• 3.通过验证之后，根据后台得响应状态跳转到项目主页

登录业务的相关技术点

• http是无状态的
• 通过cookie在客户端记录状态
• 通过session在服务器端记录状态
• 通过token方式维持状态

这里要清楚哦！

登录—token原理分析

• 1.登录页面输入用户名和密码进行登录
• 2.服务器验证通过之后生成该用户的token并返回
• 3.客户端存储该token
• 4.后续所有的请求都携带该token发送请求
• 5.服务器端验证token是否通过

登录功能实现

登录页面的布局

通过Element-UI组件实现布局

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

在vscode打开终端ctrl+~

git status 查看当前git状态
git checkout -b login 创建一个新的分支叫login
git branch 切换分支

在vue ui中启动！

终端指令npm run serve也可以运行！

在components文件下创建一个vue文件

import Vue from 'vue' import VueRouter from 'vue-router' import login from './components/login.vue' Vue.use(VueRouter) const routes = [ {path:'/login',component:login} ] const router = new VueRouter({ routes }) export default router 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

配置路由(并添加路由重定向)

const router = new VueRouter({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: login } ] }) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

一定要注意空格，不然会报错，可恶啊！

页面编写

先给一个全局样式表

/* 全局样式表 */ html, body, #app{ height: 100%; margin: 0; padding: 0; } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

并在main.js中导入

import './assets/css/global.css' 


    

        1
    

完成登录框居中

注意：translate 进行移动，完成真正的居中

.login_box{ width: 450px; height: 300px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

添加一个登录图标

 .avatar_box{ height: 130px; width: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0px 0px 10px #ddd; position: absolute; left: 50%; transform: translate(-50%,-50%); background-color: #fff;
        img{ width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

登录表单的布局

通过Element-UI组件实现布局

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

elements组件库网页
在网站里面可以找到一些可以使用的基础模板代码

导入组件

import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'//分开import会报错

Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

中间form和button都是直接到上面的组件库里面去找的

中间一些代码不贴了，比较枯燥呀

特别地，我们的小图标是从阿里的icon库里面下载的

具体用法见以前写得一篇博客
阿里巴巴icon图标尽在掌握(前端如何引入icon库,美丽图标随你处置T.T)

登录表单的数据绑定

• 1.:model=“loginForm” 绑定一个表单
• 2.在form-item中用v-model双向绑定数据对象
• 3.在export default中data() return表单数据

登录表单的验证规则

• 1.：rules="ruleForm"绑定一个规则
• 2.在form-item中用prop属性设置为需要校验的字段名

 // 这是表单的验证规则对象 loginFormRules: { // 验证用户名是否合法 username: [ { required: true, message: '请输入登录名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], // 验证密码是否合法 password: [ { required: true, message: '请输入登录密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' } ] } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

登录表单的重置

• 1.在el-form中添加ref引用名称，以便获取表单
• 2.在方法中添加方法，用this.$refs.loginFormRef.resetFields()来重置表单，注意表单的值会变为data里面设置的初值

登录预验证

• 1.同样的this.$refs.loginFormRef.validate()
• 2.配置axios

import axios from 'axios' // 配置请求的根路径 axios.defaults.baseURL = 'https://127.0.0.1:8888/api/private/v1/' Vue.prototype.$http = axios 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

• 3.如下获取查询的结果
  使用async 和await要获取返回结果

 this.$refs.loginFormRef.validate(async valid => { if (!valid) return const { data: res } = await this.$http.post('login', this.loginForm) console.log(res) if (res.meta.status !== 200) return console.log('登录失败') console.log('登录成功') }) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

登录组件配置弹窗提示

• 1.在element.js中引入message并挂载到vue上

Vue.prototype.$message = Message // 挂载到了Vue上 


    

        1
    

• 2.直接调用this.$message.error(‘登录失败！’)
  

登录成功后的行为

1.将登录之后的token，保存到客户端的sessionStorage中

• 1.项目中除了登录之外的其他API接口，必须在登录之后才能访问
• 2.token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
  将这个token存储到了会话存储中
  

背景

在 B 端设计领域中，不管是内部用户、产品、设计师、开发，还是外部产品、设计师等，总能听到关于界面「屏效」方面的诉求或吐槽。

「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。

为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。

探索阶段-为谁在何时何地设计

用户声音｜不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。

外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里，其中就有 2 点提到关键字「效率」。

通过了解不同用户和产品类型发现，不同的用户在工作场景的产品使用中有着相似的特征：

案例收集｜发现问题，大胆假设

纵观 B 端产品界面，发现普遍问题和收录在解决屏效问题上实践得比较好的案例，为了逐步突破问题，选择以数据产品中覆盖率极高的表格为设计切入点，通过线上跨产品多端地毯式的体验走查，发现表格三个层次的问题：

视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。

基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。

竞品分析｜寻找实践证据，谨慎验证

我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异，因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。

以数据产品中的表格为例，通过直接和间接竞对的方式，分别从数据的查阅（视觉）、分析（交互）维度进行功能点和设计细节上的比对，来看看优秀产品是如何解决屏效问题。

直接竞对：内部用户口碑较好的产品 A、B外界竞对：同领域的 Tableau、网易有数、金山、微软表格；间接竞对：谷歌邮箱、AntD 等的紧凑主题的常规列表（一维表格）

通过竞品分析可以发现，数据分析领域的表格留白率普遍较低（信息密度高），尤其是金山和微软的电子表格，其次是同类面向数据用户的 Tableau、网易有数，而谷歌邮箱等工作台常用的常规列表紧凑版本中，留白率和数据领域的电子表格不相上下。

紧凑版的使用场景也常常是面对数据量巨大的信息呈现，通过切换紧凑主题，提升信息的快速浏览，而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大，而在实际案例实践中，也已经将表格行高优化至 30px，克制的使用留白。

除此外，竞品其他层次的设计也做了比对，总结来看整体设计做法：高密度、少屏数、少留白等。

文字陷阱：中英文字高不等于字号

举个容易犯错的竞品参考是，谷歌在紧凑版主题下字号 12px，列表行高是 28px，但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤，缺乏呼吸感。

原因在于谷歌的 12px 是英文字体，实际字高只有 10px，而 AntD Table 的语境是中文字偏多，实际字高有 12px，所以留白的差异在于一个是 18px（28-10），一个是 16px（28-12），这也是为什么决定决定留白的两个重要因子是「字高」和表格行高，而非「字号」和表格行高，进一步推演，决定界面留白的是「元素视觉高度」和「元素间距」。

论文查阅｜寻找理论证据，谨慎验证

研究表明，低密度认知负荷低，但高密度任务完成率高，用户更喜好

参考资料：论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息，用户需要需要阅读（视觉），思考和理解（认知），需要点击按钮、操作鼠标和打字（行动），在人机工程学中，统称为负荷。即认知（记忆）负荷、视觉负荷、动作负荷，即分别对应用户体验设计的三个层级，信息/视觉/交互。而负荷所花费资源从多到少依次为：认知 > 视觉 > 行动。

认知负荷，举个例子，看了但不一定懂了。你是否有这么一种体验——刷抖音，虽然很多（信息密度小，输出效率低），但可以一直刷下去并且刷很久；而看一门 C4D 教学视频，即使就短短十来分钟（信息密度大，输出效率高），但是却要看上半天。因为刷短视频时，你的输入效率远高于作者的输出效率，而看一门 C4D 教学视频时，你的输入效率远低于作者的输出效率。可是，输出效率是客观的，输入效率是主观的。如果输出效率很高，你可以通过提高自己的输入效率（比如让自己成为 C4D 专家）来跟上作者，从而变强；否则输出效率很低（信息质量低），你的输入效率很高（很专业），信息于你而言都是无效的。

假设负荷总量不变的情况下，那么以上三类场景界面需要对用户负担分配大致如下，官网品宣类需要低认知成本，低视觉负担，视觉要求高，用户才会被吸引过来阅读，甚至酷炫的交互更能增加互动体验而带来的趣味感，比如苹果官网，信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息，而 B 端应用因为是专业使用，首先认知方面随着员工的专业度提高而降低，因此可以通过提高视觉负担，来降低行动负担，进而减少操作用时，当然最佳情况是三个维度能整体降低负担，让总负担降低，就需要更多设计巧思了。

面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中，设计师常用的 Top 3 做法为：【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。

实践阶段-如何设计

通过以上的探索，我们可以确定的是，B 端产品面向专业人员的工作界面设计中，提高屏效可从视觉、交互、信息三个层次进行，视觉层-高密度，即提高屏幕信息密度；交互层-低跳转，通过减少页面跳转、手势与常用操作的距离等；信息层-有效性，通过重组织或辅助信息帮助用户理解，甚至提供帮助手册等以提高用户专业能力。

基于以上的总结，对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，寻找运营机会点。

如下表格经过高屏效策略优化前后对比图，优化前相同维度下不同人群数量的对比需要视线来回跳动比对，而优化后的表格内容，更符合用户看差异场景下分析目的数据查阅，视线锁定相同维度，即可快速比对数值大小。

下面以视觉、交互、信息三个层次解剖设计过程背后的思考。

视觉层｜高密度-克制的留白

眼动理论：研究表明，人眼最小可视视角 0.3 度，水平最大眼动舒适转动区 30度，垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》

如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。

交互层｜低跳转-高频信息前置

理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律

表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。

信息层｜有效性-信息重组织

理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》

用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。

结语

设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

元宇宙是一个全新的数字世界，我们可以想象的任何东西都可以存在。在元宇宙中，每个人都可以是创造者，对于创意工作者们而言，这或许是一个全新的机会。

1. 元宇宙概念引爆资本圈
2. 什么是元宇宙（Metaverse）
3. 元宇宙的技术基础
4. Roblox 给出的元宇宙八大要素
5. 元宇宙初步发展的两种可能性
6. VR 设备出货量大增，技术日趋成熟
7. 非同质化代币（NFT）
8. 比特币（BTC）&以太坊（ETH）
9. AI 人工智能 ╳元宇宙
10. 结语

元宇宙概念引爆资本圈

今年 3 月 10 日，游戏公司 Roblox 通过直接上市的方式登陆纽交所，首日股价上升 54.4%，市值超过 400 亿美元。这是元宇宙的概念首次出现在上市公司的招股书当中。而在一年前，Roblox 的估值仅为 40 亿美元。

“4 月份，Roblox 还入选了美国《时代》杂志的先驱企业榜单，5 月，JP Morgan 评级报告首次覆盖 roblox，首次评级为增持，最新目标价为 85.00 美元；LightShed partners 授予 roblox“买入”评级，目标价 85.00 美元；morgan stanley 维持 roblox 评级为增持，最新目标价为 87.00 美元；6 月，Truist Securities 维持 roblox 评级为买入，最新目标价为 103.00 美元。”

后续，随着 Roblox 的上涨，元宇宙的概念引爆了资本圈。除了号称元宇宙第一股的 Roblox，Facebook、谷歌、亚马孙、迪士尼等公司也在纷纷布局元宇宙；国内市场中，腾讯、网易、字节跳动等互联网大厂也已悉数入局这一赛道。进入 2021 年以后，元宇宙这个赛道似乎突然变得十分火热，不少公司纷纷打上布局元宇宙的标签。

2021 年 3 月以来的部分相关融资

什么是元宇宙（Metaverse）

元宇宙就是数字世界，Metaverse，即 meta（超越）+universe（宇宙）的结合。元宇宙也可以理解为人类意识中的虚拟世界, 元宇宙不是特指某一款应用或产品，它更像是一个概念，通过数字化形态承载的平行宇宙，并且我们一定要明确，元宇宙并不仅是游戏，只是游戏是目前最佳形态的载体。

图 1 @READY PLAYER ONE

通过虚拟增强的物理现实，呈现收敛性和物理持久性特征的，基于未来互联网，具有链接感知和共享特征的 3D 虚拟空间（由 AR，VR，3D 等技术支持），它的本质是：平行宇宙。简单来说，就是现实世界的“人造映射版”，我们在虚拟世界中与一个全新的身份一一对应，并且不会间断地“生活下去”。——以上是维基百科对元宇宙的描述。

元宇宙与真实世界的关系

最终，我们将一直连接元宇宙，扩展我们的视觉、听觉和触觉，将数字项目融入物理世界，或者随时进入完全身临其境的 3D 环境。该系列技术统称为扩展现实（XR）。

1. 元宇宙在当下对创作者们的挑战

图 2 @Link Li

关注空间场景

元宇宙对接物理世界最后的挑战在于人的感官体验，我们的视觉、听觉和触觉都需要得到反馈，对于创作从业者来说，我们可以优先关注空间视觉的表达，在虚拟的世界中，人们会首先关注空间中的场景，如何低成本快速构建空间场景或许是新的机会。

图 3 @Mattey

提升创造力

除了技术能力，创造力会是创作者的主要生产力，因为元宇宙会迎来一大波创作浪潮，设计师们和艺术家们将在同一个舞台大展身手，而更优质的设计作品更具生命力和竞争力。

图 4 @Artman Studi

拓宽技能拓展知识面

创作者们需要关注许多新的学科内容还有拓宽自身技能，而不仅仅只局限在眼前所见，元宇宙要构建的是整个世界整个社会，而不是某一个产品某一个系统。

图 5 @Anatolii Babii

转换思维方式

设计师们需要关注的不仅仅是用户，而是所有的玩家——元宇宙中的所有人。这就需要转换思维，如何更合理、更高效、更便捷、更自由、更美观、更具象、更丰富、更公正。

元宇宙的技术基础

其一，通过算法、算力提升驱动渲染模式升级，提升游戏的可触达性。

其二，通过区块链、AI 技术降低内容创作门槛，提升游戏的可延展性。PGC（Professionally-generated Content 的缩写，专业生产内容）内容方面，第一方游戏内容是建立元宇宙的基础场所，而目前 3A 游戏在场景和人物建模上都需要耗费大量的人力、物力和时间资源。为实现元宇宙与现实社会高度同步，算法算力以及 AI 建模技术的进步有望提升 PGC 内容的生产效率。

其三，通过 5G、云计算技术支撑大规模用户同时在线，提升游戏的可进入性。元宇宙是大规模的参与式媒介，交互用户数量将达到亿级。

其四，通过 AR、VR 等交互技术提升游戏的沉浸感。

图 6 @由英伟达 Omniverse 的 3D 能力渲染出来的场景和人物

2018 年的时候，法国艺术团体 Obvious 就通过“生成对抗网络”算法（GAN）创作了一幅名为《爱德蒙·贝拉米肖像》的作品，在纽约佳士得以 43.25 万美元的价格拍出，成为第一件进入大型拍卖行的人工智能艺术品。

图 7 @人工智能艺术品：《爱德蒙·贝拉米肖像》

另一种 AI 会更为智能，比如微软小冰，经过 22 个月学习人类绘画之后的作品甚至能够得到央美老师的肯定，面对这样的人工智能，创作者可能需要思考的是如何利用如此强大的技术为元宇宙带来更为丰富和精彩的内容，探索一些规则上的玩法上的东西。

图 8 @小冰在接收了“自由”和“束缚”两个刺激源后创作的作品

图 9 @当输入“在人类讨厌你之前，你就自己消失”

Decentraland 和 Cryptovoxels 等基于区块链的虚拟世界是下一个前沿领域，它们是社交网络、游戏、商业和创造力的混合体。他们也是元宇宙的聚会场所。

图 10 @Cryptovoxels

那么，究竟什么是基于区块链的虚拟世界？Decentraland 和 Cryptovoxels 都是使用以太坊区块链构建的用户拥有的平台（世界）。用户通过购买稀缺的土地 NFT 来拥有世界的一部分。由于世界上的土地由 NFT 表示，这意味着每个地块都是独一无二的，并且可以轻松跟踪所有权。

图 11 @Decentraland

Decentraland 是一个 3D 空间，您可以在其中构建虚拟世界、玩游戏、探索充满 NFT 艺术的博物馆、参加现场音乐会等。如果您安装了 MetaMask 扩展程序，它可以在标准的 Web 浏览器中运行以访问加密货币和 NFT 功能。您可以买卖房产，为艺术画廊创作和出售虚拟艺术品，或者建造世界。有几家公司已经在 Decentraland 投资了土地，其中一些公司可能愿意支付熟练的建筑商来开发它。

图 12 @Decentraland

3D 场景设计师也能够通过为元宇宙设计场景体验而获取丰厚的回报。

Roblox 给出的元宇宙八大要素

身份：拥有一个虚拟身份，无论与现实身份有没有相关性。

朋友：在元宇宙中拥有朋友，可以社交，无论在现实生活中是否认识。

沉浸感：能够沉浸在元宇宙的体验当中，忽略其他的一切。

低延迟：元宇宙中的一切都是同步发生的，没有异步性或延迟性。

多元化：元宇宙提供多种丰富内容，包括玩法、素材、美术素材等。

随地：可以使用任何设备登陆元宇宙，随时随地沉浸其中。

经济系统：与任何复杂的大型游戏一样，元宇宙应该有自己的经济系统。

文明：元宇宙应该是一种虚拟的文明。

元宇宙八大要素

元宇宙初步发展的两种可能性

1. Roblox：通过开放式的平台和创作激励机制，由玩家主导建立了一个去中心化的世界，且不断扩大规模

Roblox 与 Steam 等游戏商店不同的是，每个玩家不仅可以挑选喜欢的游戏，还可成为创作者，在游戏引擎 Roblox Studio 上用简单的工具搭建出游戏、剧情、角色和空间，邀请其他用户进入体验，并从中获利。在 Roblox 中，玩家使用一种名叫 Robux 的虚拟货币购买游戏和道具，开发者亦可以将挣到的 Robux 换成现实货币，这极大地激发了玩家的创造力。

图 13 @ROBLOX CORPORATION

2. 堡垒之夜（Fortnite）：通过一种核心玩法吸引用户，然后不断添加新元素，通过丰富多样的联动和增加可玩性让用户加入到更多场景中

堡垒之夜近年来也在元宇宙概念上发力，希望打造超越游戏、更宽广的虚拟世界。堡垒之夜本是第三人称射击游戏，但因其丰富的玩法和联动备受玩家青睐。

2020 年，不论是邀请饶舌歌手 Travis Scott 开办虚拟演唱会，还是与一系列漫威 IP 达成梦幻联动，无不是充满想象力和野心的尝试。今年 4 月，堡垒之夜的开发者 Epic Games 也在新一轮融资中达到了 290 亿美元的估值。

图 14 @travis-scott-fortnite

VR 设备出货量大增，技术日趋成熟

据外媒 BusinessWire 报道，IDC 最新数据显示，2021 年第一季度全球 VR 头显出货量同比增长 52.4%，Oculus Quest 2 及 HTC Vive Focus 等 VR 一体机占据了绝大多数的发货量，本季度市场份额为 82.7%，高于 2020 年第一季度的 50.5%，VR 游戏和健身的日益普及提升了消费者对 VR 的认知，而 Facebook 等公司则使这项技术更易于使用。

图 15 @IDC 中国

基于区块链的元宇宙中的许多平台仍在研发增强现实（AR）和虚拟现实（VR）技术，这将使用户能够在虚拟空间中获得充分互动和沉浸感。

普华永道预测，到 2030 年，VR 和 AR 技术将为全球经济带来 1.5 万亿美元的增长，而 2019 年为 465 亿美元。

图 16 @Gerçeküstü Gerçeklik, Sanal Evrenler: Metaverse

AR/VR 对创作者而言也是一种可能性

面对潜力巨大的 VR/AR 市场，设计师其实大有可为，目前市场上 VR/AR 产品还没有非常有竞争力的，而且在这种硬件和软件高速发展的时刻，优质的设计内容可能是一个很大的突破口，UX/UI/动效/3D 在 VR/AR 的应用非常值得设计师思考和实践。

VR 绘画也是近年很火的一个部分，不少创作者已经尝试用 VR 进行艺术创作了，VR 技术硬软件的升级也使得 VR 绘画的视觉效果越来越好，并且可用性和可能性也大大提升。

图 17 @法国艺术家 Anna Zhilyaeva 的 VR 立体绘画创作过程

非同质化代币（NFT）

Uniswap 一双袜子卖 16 万美元，推特创始人五个单词拍出 250 万美元，加密艺术家 Beeple 在佳士得的 NFT 拍卖作品获得 975 万美元出价……

最近疯狂刷屏的除了元宇宙就是 NFT 了，什么是加密艺术，以其价值疯狂的增长而受到越来越多人的追捧，即使很大一部分人并不明白那是什么。

图 18 @前 5000 天-6900 万美元高价的数字艺术家 Beeple 的作品

1. 什么是 NFT

首先，什么是 NFT？NFT 是 Non-Fungible Tokens 的缩写，意思是不可互换的代币/非同质化代币，具有不可分割、不可替代、独一无二等特点。可互换的的代币具有相同的属性、价格，就像是你的 1 比特币和我的 1 比特币的本质是一样的。但 NFT 都是独一无二的，NFT 可以代表一幅画，一首歌，一项专利，一段影片，一张照片，或者其他的知识产权。在这个领域，NFT 起到的是专利局的作用：帮助每一个独一无二的东西进行版权登记，帮助其识别专利。

NFT 示例

2. 人们为什么愿意相信 NFT 的价值

为什么人们愿意相信 NFT 的价值呢？并且愿意为其争先恐后的花费巨额的真金白银。说到这里不得不提一下区块链技术，NFT 这种独特的数字资产的所有权在区块链上进行跟踪，例如以太坊。目前大部分的 NFT 交易都是通过以太坊来进行的，可通过使用以太坊的区块链作为公共分类账进行跟踪。也就是说你买到的任何数字资产你可以非常容易的证明你拥有它的所有权，NFT 一次只能有一个所有者。所有权通过其他令牌无法复制的唯一 ID 和元数据进行管理。然后你可以再把它卖出去，那么这个 NFT 的链上会记录你是曾经拥有过它的人，如果你是这个 NFT 的创造者，这个 NFT 每转售一次你都可以获得一定的版税收入，而且这是全自动的，在一些平台上你可以躺着收钱。就是因为它的这一种对创作者的友好性和对所有者的唯一性，使得越来越多的人加入 NFT 的创作和买卖，当越来越多的人信任它，它的价值就会越来越高，然后就会吸引更多的人信任它的价值，这就是一个循环。

下图是 OpenSea（第一个也是最大的加密商品点对点市场）近期排行前列的 NFTs：

图 19 @OpenSea 截止至 20210913

CryptoPunks 作为 OG（元老）依然稳定在前三，并且最近出现的另一种头像 Bored Ape Yacht Club 也是在以太坊区块链上空投出来之后马上受到了人们的追捧，这两者的成功都是完美契合了人们的社交需求与审美需求，人们购买他们就像购买收藏品一样，这是一种数字艺术品的交易。

图 20 @CryptoPunks

图 21 @Bored Ape Yacht Club

值得一提的是一周之内横空出世并且到达第一位的 Loot，单看下图是不是不太理解它为何这么火？

图 22 @Loot

其实这是一个以以太坊为基础的黑底白字的文字游戏，该项目是一个随机冒险者装备游戏，由 8000 个 NFT Loot 包组成，战利品是随机生成并存储在链上的冒险者装备。统计数据、图像和其他功能被故意省略以供其他人解释。还不懂？不懂就对了，不懂也是它火的原因之一。Loot 成功的原因当然不止这个让人一脸懵逼的噱头，它与其他 NFT 不一样的地方在于其可扩展性和创造性，意思是任何拥有它的人可以根据 Loot 字段来进行想象和创造，它是可编程的而不是创造者已经制作好了的固定 NFT 只能进行买卖，这就极大的刺激了任何参与者的创作激情。

现在已经出现了一系列令人眼花缭乱的 Loot 衍生品，比如比 Loot 更为简单的数字 NFT The N Project，同样的黑底白字，并且只有数字 0 到 14，推出三天就市值达到 4000 万美元，一跃成为排行榜前十。

图 23 @The N Project

不得不说 Loot 和 The N Project 的成功会令很多人不解，其实这也是元宇宙发展中出现的先驱性产品，它们没有精美的画面，但是这有助于降低开发人员的复杂性和开发成本，同时为用户提供自由、创造力和表达能力。正如 Loot 的口号“你可以做任何你想做的事”也正好契合了元宇宙的精神。Loot 的出现为元宇宙带来了一种底层规划的可能性，共同创造并且海纳百川，不正好契合了元宇宙的多元化属性？

3. NFT 对于艺术家来说是一个自由创作的舞台

借着 NFT 的风潮，艺术家在这里找到了一个自由创作的舞台，你可以不再局限于表达你的“甲方”想要的东西。没有风格、流派与地区限制，你只需要做你自己，尽可能多的发挥自己的想象力，这些都可以成为 NFT。如果你的 NFT 作品被买家购买收藏，恭喜你，你会获得对应的报酬。你的作品永远不会被“剽窃”，区块链可以带给你足够的安全感。

图 24 @Foundation

比特币（BTC）&以太坊（ETH）

不知你对于用黄金买苹果是怎样看待的？

比特币是是一种价值储存手段 (SoV)。它是不可篡改的、也是世界上最去中心化的资产，它也是最难攻击的链。它的价值是依靠人们的信仰而赋予的，只要有人相信它，它就会一直保值。从技术上讲，比特币区块链 (Bitcoin) 的存在是为了铸造和追踪 bitcoin (BTC)，而且只限于此，这是它最大的局限——仅仅能实现简单的价值传递。

图 25 @Mustafa AKMAN

而以太坊可不仅是一种加密货币，它支持复杂的价值传递。它是可编程的区块链，意味着人们可以使用写入代码的「货币」来开发 Apps 和产品，这也让以太坊成为了第二代区块链技术的代名词。

图 26 @WHAT IS ETHEREUM?

“以太坊为所有人提供数字货币和数据友好型服务的开放访问权限——无论您的背景或位置如何。它是加密货币以太 (ETH) 和您今天可以使用的数千种应用程序背后的社区构建技术。”- 以太坊官网

AI 人工智能 ╳元宇宙

图 27 @Ford Modular XR Space 2021

AI 人工智能是构建与维护元宇宙不可忽视的主要力量，以下有一些用例场景；

• AI 可用于创建、审计和保护智能合约，使其更安全、更易于创建和使用。
• 智能 AI 生物可以在元宇宙中漫游，并与我们和彼此互动。今天，人工智能可以生成逼真的图像和人脸 3D 模型，生成用于对话的文本，将该文本转换为听起来像人类的语音，并为 3D 角色制作动画以使其看起来像是在说话。
• AI 可以帮助我们创建元宇宙资产、艺术品和内容。
• 人工智能可以改进我们用来构建所有这些东西的软件和流程。再过几年，人工智能将改进人工智能并导致智能和技术的爆炸式增长。

最终，人工智能可能能够在我们探索时实时生成完整的虚拟世界。图形渲染技术和人工智能技术之间的界限可能会继续模糊。有一天，AI 可以接受一些输入，例如“茂密的丛林环境，从瀑布中流出的溪流”，并将其转变为我们可以探索和互动的完全身临其境的 3D 环境。

结语

我们今天的互联网多少是存在壁垒的，不同应用程序与空间所共享的信息相对较少，但加密和去中心化计算开始打破其中的一些壁垒。或许有一天创作者们可以跨应用实时协作，编辑和查看相同的资产，这就像在 3D 世界版的在线文档一样。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务