前言：
对于B端而言他们使用导航菜单目的性很强，到后台主要是对具体功能进行操作。因此，其主要的功能就是对B端产品进行分发、引导，帮助用户找到自己想要的功能。
分享内容：
1. 导航是什么，存在的意义
2. 导航的设计目标
3. 其设计原则
4. 设计建议
5. 几种常见的导航类型
导航用来展示当前产品中，用户在哪儿，可以去哪儿。在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。当设计者使用导航或者自定义一些导航结构时，请注意：
a. 尽可能提供标识、上下文线索，避免用户迷路。
b. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本。
c. 尽可能减少页面间的跳转（例如：一个常见任务需要多个页面跳转时，请减少至一到两次），让用户移动距离保持简短。
导航菜单是将内容信息友好地展示给用户的有效方式。在确定好网站的信息架构后，应当按需选取适当的导航菜单样式。
导航菜单是让用户明确知晓当前所处产品中的位置，并方便快捷地带用户到他想去的地方。
用户可定位到他们想要的信息。
a. 多接入点：对同一目的地提供多个链接。
b. 捷径：提供访问内容的捷径，如相关链接。
c. 逃生舱：点击 logo 回到首页重新启动信息搜寻。
• 设计时应尽量保持浅平宽的信息架构层级；
• 从用户的使用路径考虑导航，而非仅基于层级结构；
• 常见的组织方式有：
a. 按主题，例如产品提供的服务或内容分类，好处是直接呈现站点的内容范围。
b. 按受众群体，例如管理员、运营、操作员。
c. 按任务，例如了解合作模式、联系合作专员、签约流程、合作联调、业务运营、客户服务。
完善的导航应该允许用户沿多种路径移动：
a-平移：同层级跳转
b-下钻：进入低层级的内容
c-返回：返向浏览历史或高层级内容
d-联想导航：根据相关性导航至内容
正确理解和使用导航组件对产品全局体验至关重要。
我们将导航划分为以下 6 种类型：
a. 全局导航（侧边导航、顶部导航、弹出式导航）
b. 子站点导航（沉浸式导航、多级站点导航）
c. 页内导航
d. 下钻类导航
e. 返回类导航
f. 联想类导航
全局导航体现网站的核心组织结构。
a. 各菜单权重常常与排列顺序呈正相关，即排列顺序影响用户使用频次。
b. 建议 2~7 项内容使用。
c. 建议 1-2 个层级；超出 2 个层级时，建议采用弹出式导航。
垂直导航较横向的导航更灵活，易于向下扩展， 且允许的标签长度较长。类目数量不限，可配合滚动条使用，适合信息层级多、操作切换频率高的管理性质的应用。
a. 很多菜单时使用，建议菜单多于 6 项时使用。
b. 可以承载多个层级，但建议 1-3 个层级。
c. 企业级产品推荐使用侧栏导航，其可见性更好易于扫读，各菜单重要性受菜单排列顺序影响较小。
用于拓展导航承载层级，适用于大型网站。站点地图式导航可以让用户对整个网站的可用功能一目了然。
a. 不要让用户延着狭窄的悬停路径获取导航菜单。
b. 不要让用户逐层打开每层菜单去查找，低效又困难。（此建议仅针对导航类菜单，不适用于操作类菜单。）
子站点导航（沉浸式、多级站点）
企业级产品常采用层级+数据库混合结构的信息架构，这种信息架构通常层级较深，为了实现用户感知层面的浅平宽，将较深几个层级组织为一个子站点，降低单个站点层级数量，减轻用户认知负担。
另一种子站点场景是，面对一些任务复杂，需要较大的工作空间，以子站点的方式沉浸式处理任务。最常见的是编辑器。子站点模式下，对全站导航功能需求低，通常只需提供一个返回上级或回到首页的出口。
（此处的数据库是一种信息架构形式，各页面内容独立，但都遵循一致的形式/格式。）
a. 菜单数量较多的子站点使用。
b. 子站点设计上，应明显区别于全站导航，使得进入子站点需要成较大的过渡波动，提示用户进入了新的空间。
点击进入信息架构下层内容，默认站内跳转，站外新开标签页，典型场景为列表下钻至详情。
反映当前页面在网站结构中的位置，在少于三个层级时无需展示，此时的全局导航能直接呈现位置。用户可通过面包屑返回上级页面。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
你一定也发现了，在这个时代下只要处在同一赛道的产品，大多数免不了日趋同质化，不论是功能还是形式、内容还是算法。就拿内容型产品来举例：去掉颜色，以下四个产品的首页，你能分得清谁是谁吗？
虽然可以做品牌差异化，但很多产品在招牌打响前，也会经历相当漫长的一段成长期。而在大家都卷的分不清谁是谁的时候，通过趣味性来建立情感链接倒是一个独辟蹊径的狠招。
之前在团队有幸负责过一次产品趣味性的探索，虽未全部落地，但沉淀了不少经验。今天，我将这些经验以文章的方式分享给你，希望对你有所启发。
为什么产品需要趣味性
1.符合本能需求
马斯洛的“需求层次理论”（Hierarchy of Needs）你一定听过。这个理论提出人类的需求状态是持续不断的，一段时间内，个人的动机或许可以获得暂时性的满足。但从人的成长角度来看，人类的需求永远不会止步于一个阶段。类似的还有亚伦·瓦尔特基于此提出的需求层次理论——有用的、可靠的、可用的、愉悦的。在满足了温饱阶段后，自然会需要情感的满足。
尤其现在这个相对严峻、内卷成风的时代下，大家都渴望在上了一天班之后，自己用的产品可以给自己解压，而不只是个单纯的冷血工具。
2.影响用户行为
产品传达趣味性的信息，那么这些信息便更容易被用户接受、甚至激发兴趣。正如用户关系和精准化运营的先驱——史蒂文·贝莱格姆的那句话：“趣味是设计产品中最人类化,最直接,最能引起人们兴趣的因素。”
根据艾达模型这个经典理论，一旦用户对某件事产生兴趣后，则更容易促成他的决策、乃至最后行为的发生。毕竟我们绝大多数的决策并非源自理性。
另外，《疯传》这本书提及过一个重要的概念：情绪唤醒。当情绪唤醒度较高时，往往会更容易激发用户的分享行为（比如愉悦、惊喜这样的正面情绪，当然也会包括愤怒、恐惧这样的负面情绪）。而产品所呈现的趣味性，很大程度上更容易引发用户的高唤醒情绪，从而主动采取一些产品希望他实施的行为。
3.缓解负面情绪
使用一款产品的过程中，必然会出现不够正向的反馈，比如404、断网、填写格式错误、输入隐私信息等等。一旦超出了用户的容忍能力，很容易造成行为中断甚至流失。
但此时如果通过一种趣味性的方式呈现，很大程度上可以缓解用户的负面情绪。
比如readme的登录页面，当你输入密码时，猫头鹰捂住双眼，很好得缓解了用户的不安全感。再比如饿了么，恶劣天气下会实时记录当前的天气状态，通过同理心的触发也可以缓解用户等待时产生的焦虑。
4.实现情感链接
对应诺曼在《情感化设计》中的「反思层」，通过品牌差异、独有内涵等方式来唤起用户深层的记忆和情感，产生情感共鸣，从而形成认知，建立起深厚的情感链接，以让用户越来越忠实于产品。此时产品作用更多的是作为一个承担情感的载体。
我们旅游时经常会购买一些貌似没什么实用性的纪念品，明信片、木雕、徽章等等，可能最多只能放在房间当装饰。但是纪念品的关键意义，在于承载着旅游时的记忆。类似的还有单机游戏发售时，除了标准版外，往往会同步发售包含手办、美术设定集等物品的豪华版，同样用来承载玩家的情怀。
最典型的例子，就是Google的Doodle设计，在不同的节日、纪念日、或者缅怀一些先驱、艺术家时，会投入很高的成本起设计各种趣味性的插画logo，丰富有趣，而且很多时候可以支持互动游戏。比如18年的万圣节，就做了一个有趣的多人对战的小游戏。
Doodle不仅是Google文化、价值观的象征，也通过这种趣味性的创意让用户实现更深层次的情感交流，建立情感纽带并增加粘性，不会轻易得流失到其他替代品中。
趣味性是什么
关于这个概念，有三条相对客观专业的说法。
德国古典哲学创始人康德《实用人类学》中，指出趣味性是人类由于受到外部环境的影响而对客观事物产生的直接的感性反应，不具有普遍性和必然性。通俗来讲是人们对身边的事物感到新奇、有趣、有意思，从而心理产生愉悦的变化。
另外，康德在《判断力批判》也指出，趣味是指主体以积极主动的姿态，在超功利的层次上对某一对象表现出喜爱和愉悦的情绪状态。
《汉语词典》将趣味释义为：使人感到愉快，能引起兴趣的特性。
看似各不相同，但根据这三个概念提炼下，可以发现他们都是在融入一种正向的情绪加以解释。
那么，趣味性背后的情绪到底是什么？
趣味性背后的情绪
情绪这东西千变万化，为了避免主观臆断的不准确，我搜罗了关于情绪的研究资料，目前相对权威的有三个：plutchik情绪轮、日本感性工学、诺曼的三层理论。
后两者未对情绪进行指标的定义，所以这里只聚焦在情绪轮上。
情绪轮由罗伯特·普洛特契克开创，这个理论指出人类的基本情绪一共由8种，生气、厌恶、恐惧、悲伤、期待、愉悦、意外和信任。撇去那些负面情绪，能够符合趣味性带来的情绪基本就三种：愉悦、期待和意外。
为了为产品所用，就需要提炼出更具象的特征。下面，我通过脑暴的方式对每类情绪进行发散联想。
联想了大量可以引发愉悦情绪的事物，比如可爱的猫猫、各类好玩的表情包、毛绒玩具、影视作品里那些会突然说话的动物、解压神器等等。
我发现这些事物，一般具备了以下特征：
1.会给予我们即时反馈；
2.拟人化，比如带有人类才有的表情，或者是人类的动作语言；
3.柔软的、毛茸茸的、圆润的、有温度的；
4.会动的、解压的
联想了大量可以引发期待情绪的事物，比如被买爆的泡泡玛特盲盒，商家售卖的福袋，各种诸如掷骰子、老虎机的随机性游戏，各类抽奖活动，一些游戏开局roll属性点的环节（比如金2、河洛等游戏，当年玩的时候我惊讶得发现我居然能roll上一整天）
这些事物大致会带有这些特征：
1.未知的、神秘的；
2.满足人类的好奇心的；
3.对结果能满怀希望的；
4.随机的正向奖赏；
5.只需要一步简单到发指的操作（打开容器、拉动拉杆、点击按钮等等），不需要任何的行动门槛，也没有等待时间
比如《设计中的设计》这本书中提到的出入境的印章案例、一兰拉面碗底的细节、电影或者游戏中突然出现的彩蛋、iPhone第一代的发布现场、突然发现的世外桃源、突袭的生日惊喜等等。
这些事物大致会带有这些特征：
1.超出原有预期的；
2.未提前告知的；
3.正向结果的；
4.产生共鸣的
那么，这些特征又该如何更具象得落地成策略，产品中又是如何利用这些策略，引导用户产生这些情绪的呢？
下面，我将基于这三类维度，并结合大量的大厂案例来为一步步你抽丝剥茧。
如何制造愉悦感
基于上面的挖掘，我发现能引发愉悦感的一个明显特征，就是拟人化，这个非常有意思。
克利福德·纳斯在《the man who lied to his laptop》这本书中提出过一个观点：人们对待电脑的方式，与我们在与他人交流时使用的社会规范是一致的。我们对电脑的反应，就好像它们是人类一样。
也正因此，很多原本没有生命体征的物体，一旦被赋予了拟人形象，就容易被大家所接纳、引发愉悦。
做一下细分的话，拟人化基本涵盖了三个方面：语言、形象和表情。
1.1拟人化的语言
人对于具体的拟人形象更容易产生情感，其中便包含拟人化的口吻。使用这种口吻与用户交流，而非冷冰冰的设备语言，就可以提升产品温度，引导用户对产品产生正向情感，关于这块我总结了两方面。
一方面，文案尽量得接地气、轻松。
拿京东这款产品举例，文案从口吻上都会采用一种很轻松、接地气的拟人语气，来拉近和用户间的距离。比如在引导词后加入“哦~”“~”这种轻松的语气词。
另外，「京东问答」版块的引导词：传统产品是“添加问答”，是不是平平无奇。但京东使用了“我来助你一臂之力~”
QQ浏览器的评论暗提示，也不是传统的“写评论”“输入评论”，而是像日常聊天那样“我来说两句”，非常接地气、生活化。知乎直接套用了流行语，诙谐的同时引导用户注意言论。
另一方面，人类富有情绪变化，所以一旦用户触发了某个正面/负面行为，就可以给与情绪反馈。
在用户完成商品评价后，京东不仅仅是很传统得反馈“评价成功”，而是又加入了“感谢您！”的感谢词。看似加了三个字，但行动过后的正向感激反馈，和我们日常生活中受到正向反馈一样，被唤起正向的愉悦情绪。并愿意继续这个行为。
知乎的圈子业务，在用户完成签到后，反馈完成的基础上，使用了正向的情感反馈“ 我就知道你会再来看我”，仿佛是一位关系不错的老朋友，来唤起用户正向情绪。
另外，知乎在改版后，回答收到赞也不仅仅是“点赞成功”这类冷冰冰的机器语言，而是“已收到你的喜欢，谢谢！”并且配以作者头像，非常形象得传出对对方对我们的感谢反馈。这种正向反馈，相比”点赞成功“更有效得唤起正向情绪，形成正向激励。
当然，用户的消极行为也可以产生情绪反馈。
比如现在很多产品的取关反馈，不是传统的“确认”“取消”，而是用“残忍取关”和“给个机会”这种融入情感的文案来做挽留，就好像真的有个活生生的人，在被你否定后反馈给你的情绪，请求你再给个机会。有趣的同时一定程度上也可以唤醒用户的同情。（虽然这种做法过于业务导向，且有绑架用户的嫌疑）
人对于具体的拟人形象更容易产生情感。因此，树立一个拟人化的品牌形象（也就是我们常说的IP），可以使用户对产品快速建立情感联系，也可以强化品牌感知。比如优酷的猴子、高德地图的老鹰、钉钉的燕子、linefriends等等。
世界杯的吉祥物也是同理，每一届的吉祥物必定会融入拟人化的特征，凭着亲切、可爱的形象和全世界的观众一起热情互动。
说到产品，以京东的这只狗子为例，兜底页、缺省页、启动页，都做了狗这个拟人形象的贯穿。
如果你记得没错的话，形象改版之前这只狗还是四脚坐地上的，但改版后就两脚着地了。这同样是通过更拟人的形象来赋予「人格」，以此提升愉悦感，拉近距离。
再比如夸克，它甚至单独新增了底tab入口，通过3d品牌形象，实现与用户的智能交流。另外，卡片和语音搜索都做了形象贯穿，后者还使用了形象的眼睛，来通过眼睛的变化进行情感交流。
一段文字在加入了表情后，我们就能迅速了解到对方的情绪（比如我们日常的聊天）。因此表情这一招，也可以用以加深用户与产品的情感交流。
它可以和语音、形象灵活结合使用。通过全面的拟人化，来大幅提升用户对产品的形象感知，促进用户情感的产生、加深用户和产品的情感链接。
比如用语言输入，当系统未识别清楚时，传统的方案可能是一个错误图标加上「未识别声音，请再试一遍」的文案，但夸克中则使用了品牌形象的双眼来传达失落的表情，并结合了拟人化的语言。
同样做法的还有百度的未开麦提示、段子头图，快速传达产品的情绪，和用户情感交流。
另外，闲鱼设置昵称时，正在输入时、以及超出了限定字数，右侧的形象表情也会发生变化。
除了拟人化能引发愉悦外，还有一个很容易被忽略的要素同样能起到作用——动画反馈。
提起动画的作用，我们更多人首先想到的可能是强引导、注意力吸引，但动画同样能触发用户愉悦。比如当动画更加贴近现实，或者结合拟人化的特征时。
最典型的例子，就是苹果appstore从卡片到详情页的转场过渡，点按的预备动作、卡片的放大展开、缓出的曲线、转场完成的惯性等等，都很贴近现实物理世界的运动规律。而这种自然的丝滑也更能引发用户的愉悦。
比如知乎的加载动画，结合了拟人化的特征，让这个过程变得格外有趣。刘看山奋笔疾书的动作也很符合知乎这款产品的定位。
如何制造期待感
根据我们对期待感的脑暴，发现能触发这种情绪最典型的特征，就是随机性。
在产品中，则可以通过随机给予用户有价值的内容来引发用户的关注。结果的不确定使过程充满神秘，这种状态让用户兴奋和满怀期待，不会轻易离开。
比如网易新闻在进行新闻加载的操作时，会在加载动画上加入一个随机的小贴士。内容大致有三类：黄历、名言和一句话新闻。而且这些内容完全是随机出现，这种刷新过程好像在开盲盒，你无法预知会给你什么内容，非常有趣。而且它们入口深，不干扰；内容对用户也具有价值。
同样的还有丁香医生。在首页每次下来刷新后，都会出现不一样的健康类的小贴士。随机性很强，富有趣味。而且可以很好得满足求知欲。
雪球的个人页上，上划时也会随机给一条关于投资、市场的名言和网友的热门观点。
把现实生活中的游戏搬到了手机，同样能激发用户的好奇和期待。比如微信读书的翻牌子、摇一摇、老虎机。还有天猫的翻牌子。
如何制造惊喜感
格雷戈里·伯恩斯曾做个关于脑部区域的研究，发现大脑不仅探寻未知，而且实际上还渴望未知。相比那些已知的日常惯例，新鲜新颖的事物更容易引人注意。所以提供一些以往没有过的、出乎意料的事物或互动，不但能引起注意力，而且也会带来惊喜感。
产品中的惊喜感设计，可以说是使用瞬间能够触达我们内心的一种短暂性愉悦，一个体验的峰值。
根据对惊喜感的挖掘，一个典型的特征就是超出预期，并且未提前预料。
比如Figma使用过程中，团队成员和你同时长按鼠标，并且靠在一起后，就可与触发击掌的动画彩蛋，非常有意思。
比如京东在五星好评后，会放烟花庆祝。
比如很多内容型产品，在详情页长按点赞按钮后，会触发全屏的「爆赞」动画。
再比如用户生日当天，通过启动页、弹窗等场景送上生日祝福等等。
这些能够超出用户预期的细节，即便多么细枝末节、出现频率多低，但只要能够被触发，都可能因为惊喜感而生成情绪峰值，加深用户和产品的情感链接。
最后
以上，便是趣味性背后的情绪挖掘和案例讲解。
作为设计师，我们在工作中总是强调以用户为中心，通过不断的调研、跟访、可用性测试来了解、分类用户，但更多的结果可能只是让产品不断得贴合用户的心智、符合预期。但如何增加粘度、建立深层链接，就需要通过趣味性这种情感化表达方式，来为用户制造愉悦、期待甚至惊喜。
正像诺曼在「情感与设计」中说的那样，每个产品都需要令人更放松、更愉悦的设计，以此来增强产品的适用性。
希望这篇文章能对你有所启发。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在上一篇《如何设计高质量B端调研问卷？用户研究方法(一)》一文中，详细介绍了如何通过调研问卷的方式，整理发现用户的浅层需求。
本文将分享另一个更为深层全面的B端用户研究方法——用户访谈。通过面对面地沟通，以及观察用户的表情、行为去挖掘更深层的需求。（文末附模板下载链接）
下面是本次分享的文章结构，标⭐️的为重点部分。
01
用户访谈的两种路径
用户访谈通常可以采用线上会议、电话或者线下面对面交流两种形式。
线上会议和电话访谈的优势显而易见，可以不受地域限制展开调研访谈，整体的成本也比较低，设计师可以自己找领导或者协调资源去推动。
缺点也是比较明显，沟通起来效率低下，比如我们一定有过“电话里说不清，我们见面详谈”的经历。
所以，相较而言线下访谈无疑是最佳的调研形式。首先当面沟通更加高效，其次对于搭载硬件设备的产品来说，让受访者在真实场景里操作演示，可以发现更多隐性问题。
02
常见的3种受访者类型
在访谈过程中通常会接触到以下3种类型的受访用户，不同类型的用户我们应该怎么接触交流呢？
话痨型的受访者占大多数，通常就是想法、意见比较多。他们不仅有一大堆不满意的点要诉说，甚至连对应的解决方案都想好了。
整体接触下来，我觉得该类型的受访者，可提供的有价值信息会更多一点。只不过我们要学会过滤信息。因为他们的修饰用词通常比较多，例如：“太难用”、“超级麻烦”、“哎 我真的是受不了啊”...
访谈话痨型的受访者，我们需要注意无论怎么聊都要紧扣主题，防止变成了吐槽专场。
其次也要表达肯定，安抚情绪，并对问题进行进一步提问：“您的这些建议真的很棒，也给我们提供新的思路，我都记下来了，我还想确认下，刚才您说的3个关于结算环节的问题，哪一个给您造成的困扰最大？”
顾名思义，受访者可能是因为性格内向或害怕说错了不好意思等缘故，在受访过程中问一句答一句，比较容易冷场。答案的价值也比较低，例如：“对，是的”、“还行吧”、“没啥感觉啊”、“反正就这样用用吧”、“说不上来”。
这种情况下要尝试缓解下氛围压力，换个形式沟通：“就是随便聊聊，公司派我们来呢，就是因为非常关注用户的使用感受，想收集一波用户反馈与建议，您有啥不满意的地方都可以跟我讲讲，越多越好。”
其次我们在提问的时候也要带有引导性，例如：“还有呢、然后呢、具体说说呢”，如果对方实在说不出所以然，最有效的办法就是进入上机操作环节，通常操作过程中那些问题也会随之暴露出来。
专业型的受访者一般是老板或者店长、经理岗位的员工，他们对于产品或整个门店乃至行业都了解的比较透彻。
和这样的受访者沟通，不仅是局限于产品的一些问题挖掘，他们会从这个行业的角度阐述一些个人的见解观点，给我们提供一些有价值的优化方案或者改进方向。
例如餐饮的老板其实并不是很关心点餐、结算的流程有多么的顺畅高效，毕竟他们不需要亲自去做这些执行，而且坦率的说，对于绝大部分产品而言，好用并不能成为其核心竞争力。
他们关心的是如何带来更大的商业价值，类似于如何提升坪效，如何提升门店会员的储值能力等等。而这些老板的关注点，也会给我们未来的产品优化方向打开新的思路，去思考如何给我们的用户创造更高的商业价值。
03
我们在做访谈之前，首先一定要熟悉产品业务的相关背景、受访商户的基本情况。
访谈过程中可能会提及一些专业名词，例如餐前餐后模式、明档、一鱼多吃、坪效、估清等等。我们具备了这些基础相关知识以后，省去了不必要的解释环节，可以使访谈推进地更顺利。
其次建议要了解下行业相关的基础知识。尤其是餐饮业态，华南、北方、四川等地都因为饮食习惯的不同，在产品的功能和使用上的需求也是相差很大。具备了这些知识点以后，在提问过程中，也更利于提出一些深刻的问题，而不是浮于表面的提问。
行业相关的分析报告，可以去艾瑞、36氪、发现报告等网站进行查询收集，在此不做赘述。
在访谈初期，需要准备一份访谈框架，但并不意味着我们整个过程只能按提纲来提问。尤其是B端这种千载难逢的访谈机会，只按规定的框架提问属实是太吃亏了。所以在时间允许的情况下，除了框架以内的问题，尽可能多发散的去提问。
例如餐饮业态，会有各种不同载体的终端设备联动使用，一体机POS、手持的POS、厨房KDS、厨显大屏、各类打印机等等都可以顺便了解、调研下，让我们对于全链路的协作流程也会有更深刻的认知。
再例如后厨会涉及到KDS大屏显示，可以问问目前的大屏显示是否够清晰（字够大），也可以和负责海鲜称重的工作人员聊聊，海鲜的售卖、计价流程，以及菜品双单位（例如：1【条】鱼，重量1【公斤】）的使用等等。
在沟通过程中，一定会有一些触类旁通的收获与问题被发现。这些问题也许来自一个模块、或者某个特定角色，又或者是主产品关联的其他后台产品。
在提问的时候要考虑到受访者的年纪和理解能力，如果措辞过于专业，可能会导致受访者理解不到位，因此沟通的过程中要尽可能的说大白话。
我们都知道没有经历过的事，很难感同身受。有时候看到客户群里，因为产品的各种原因导致商户情绪激动，我们理智上非常理解，但是情感上很难共鸣。
因此每次的门店调研，我都会抓住机会观察整个门店的运营情况，去感受那种忙碌的氛围。有时候开始进入营业高峰期，机器出现卡顿或者外卖不接单等情况时，自己的情绪都会一下子紧张起来，也能够深刻感受到产品给客户带来的困扰。
当再次有产品迭代优化时，这些体验总能让自己能更容易代入用户的角度思考问题。
除了去体会产品对情绪的直接影响，还可以关注下整个门店的布局、收银产品的数量与摆放位置、不同产品的协同使用等等。
这些都会帮助我们发现，到底什么是门店运营环节里最重要的模块。
在访谈过程中，不排除受访客户会反馈一些暂时无法解决的问题。这时候一定要告诉受访商户：“您的问题我已经记录下来，回去会针对这个问题反馈上报，最迟X天我会让顾问给您回复的”。
这么做一方面也是细节处维护公司品牌的整体售后体验，其次也有助于我们再次回访时，受访商户乐意花时间跟我们聊。
04
了解了用户访谈的一些基本信息和注意点以后，到了本文核心部分，关于整个访谈的推进过程，一共分为3个阶段。
首先明确访谈的类型，用户访谈的类型主要分为以下三种，最常见的就是第三种类产品使用回访。
新品调研的访谈，一般是由于业务的发展，可能需要升级或者打磨一款新产品来满足市场的需求。
在访谈的过程中，我们需要关注的点就是用户画像、商户诉求、使用场景、终端载体等一系列因素。
当去往一个城市进行批量客户调研的时候，偶尔会有拜访潜在客户的调研机会。这种类型访问的关注点集中在商户的痛点与需求上。
由于是潜在客户，我们势必是要了解他们想要购买或者替换产品的前因后果。也是借此机会了解到竞对的优劣势，他们放弃竞对的原因，以及我们当前产品的功能是否满足客户的需求，还有哪些点不满足，客户重点关注的是什么。
使用回访是最常见的访问类型，主要目的是对商户进行售后维护、提升使用体验。
且由于B端产品的复杂性和远距离特点，以及新功能同步给商户存在的滞后性，公司会安排定期的上门回访。如果有这样的机会，UED一定要尽量申请跟着去门店调研。
到了最关键的一步，就是关于访谈的问题设计。
总结一下，问题的设计渠道来源主要有3种。主要还是根据调研目标进行问题设计，另外两种方式，作为辅助。
那具体问题应该怎么设计，这边我们分为3个步骤，从面到点依次拆解进行问题设计。
B端产品的特点可以借用《U一点料》的9个字概括，“多场景、全链路、多角色”，所以设计问题前，我们可以从场景+链路+角色/节点功能的维度来设计问题。
以餐饮行业的产品举例，首先建议了解自家产品的全场景业务能力。即从商家端到消费端会经历的产品模块和具备的现有功能，做到心中有数即可，毕竟不会一下子调研这么多模块和功能。
其他ToB产品同理，可根据某个操作链路为主线，确定主流程后进行问题设计。其实就可以理解为确定调研的目标。例如下图要调研的主流程，就是提取点餐>下单>结算为主线。
根据刚才确定的主流程 我们找到所有关键节点进行问题框架设计。
以上3个步骤可以理解为，如何在功能极其复杂的B类产品当中，筛选出与访谈目标紧密相连的功能链路。避免我们的访谈提纲做的过于冗余没有核心。
这点也非常重要，每一次去门店调研之前，先由当地负责的顾问与受访商户提前沟通。
一方面是需要与对方预约时间，另外一方面这种访谈对商户而言就相当于优质的售后服务，会有受访商户提前列框架，准备问题。
那么这种情况更有利于调研，因为受访者明确自己的问题点在哪里，就等着调研团队（售后团队）来门店后，好好拉扯一番。
万事具备，只欠东风。我们再盘点确认下本次访谈的各类工具是否备齐，准备进入访谈阶段，大致需要准备的东西是以下4种材料工具。
在了解了受访者类型、采访者需要注意的点，以及带着我们设计好的问题，下面正式进入访谈阶段。
到达门店后，我们的顾问会给受访客户做一下来访成员介绍，并讲明此次到店的目的。一般都是产品使用回访，或者新功能推荐培训。
通常来说，受访商户对来访团队总是有很多”心里话“想唠一唠，因此暖场氛围比较容易起来，也有助于我们接下来的沟通
进入正题以后，我们会先大致了解下受访者最近使用的体验以及遇到的问题，而后会根据问题框架进行提问。在整个过程中也需要注意观察用户在描述问题时候的表情和肢体语言，搜集用户对于产品的真实态度。
其实整个访谈流程我们归纳一下，需要关注的就是四个关键点，手+口+心+颜。
关于实操演示放在第一个讲，是因为这个环节非常重要。线下访谈时强烈不建议“脱机访问”，这种形式对受访者而言需要花更多的时间去思考问题的答案。
会遗忘甚至想不起来当时的具体情况，随便的敷衍回答“嗯，还行”、“挺好的”，或者干脆彼此都不在一个频道上。
其次，在操作过程中，建议用手机进行拍摄记录。因为每个人对产品的理解方式与程度不同，在用户操作的过程中，会发现一些有意思的代偿方案。这些也是思考的切入点。代偿方案是否比原先设定的实现方法更便捷。
回去通过视频仔细分析受访者的操作路径，以及每个操作之前是否有迟疑等等。并且将问题点一一记录下来。
这个就是根据问题框架进行提问。在这个过程中，通常会穿插着上机操作演示，在现场记录的时候可以先记录个大概，等结束后再仔细整理。
问受访者的心理感受，其实就比较偏主观了，我们可以从“我们家的产品”和“人家的产品”两个维度去对比询问心里感受。值得注意的是，即使是这样开放式的提问，也有提问技巧。
比如“你觉得现在还有什么不好用的地方”就比“你感觉现在的产品好用么”这样的提问方式更有效。
因为产品一定是有可有优化的空间，“有什么不好用的地方”这样提问的方式就是具体到了某个点上面，具体什么点不好用。
而后者的提问方式是基于整个产品，受访者可能会出于不好意思等原因直接说“你们的东西还行吧，还可以”。
当我们提问产品优缺点的时候，受访者大部分都会带上表情和肢体语言，并且情绪表现和性格有比较大的关系。
性格比较雷厉风行、急躁一点的，通常会像连珠炮一样疯狂输出，并且措辞会比较极端。例如：“真的太难用了”、“太麻烦了”、“严重影响门店营业了啊”。
接受到这种信息我们首先要做的就是安抚对方的情绪，其次对于这些信息要学会剔除一些夸张描述。
而性格温和一点的受访者，在阐述问题的时候也会比较婉转。“不是太方便”、“这个改动没啥感觉”、“也还行、都可以”，如果某个高频操作真的很影响日常工作效率，往往会表现得很无奈，甚至还有点委屈。
那么无论是哪种表现，其实都要考验采访者的经验，结合产品的功能去考虑，找到反馈中真实有效的部分。
通过以上4个环节，其实就可以收集到很多有用的信息，语言信息、视频信息、动作表情信息等等。接下来的任务就是信息的梳理归纳。
访谈结束后，我们需要做个简单的总结回顾。将关键问题再次复述确认，进行查漏补缺并且再次感谢受访者，表达他们今天提的建议价值很大，后续会梳理出可落地的点优化到产品当中。
如果说聊得比较开心，大多数的受访商户都会邀请来访团队吃个饭再走，也算是额外的福利。在就餐过程中的非正式场合交流，也可以聊聊门店的一些运营情况等等，帮助我们更深入的了解这个行业。
我们在访谈过程中会有大量未整理的一手记录，结束后需尽快的梳理，尽可能详细的记录下用户描述的细节、肢体动作表情语言等等。建议使用石墨、语雀、腾讯文档等在线编辑工具，方便分享修改。（本文提供模板可下载）如果是连续访谈几位商户，我会在访谈结束以后，迅速地将刚才的访谈内容整理出一份原始资料。并罗列出一些受访者反馈但访谈提纲里没有的问题，去下一家受访商户的时候可以验证下该问题的普遍性。
② 整理落地
输出后我们需要再次进行提炼，将有价值可落地的问题点提取出来，进行汇报分享，并找到相对应的产品研发进行探讨排期，这样就形成了一个完整的闭环，真正做到了发现问题、解决问题.
③ 流程概括
前文絮絮叨叨说了很多，其实关于用户访谈这事用6个字就可以概括，简单理解：
问谁？问啥？答啥？改啥？
能够回答清楚这4个问题，那么这就是一次有价值的访谈经历。
ToB业务的特点就是会有一定的行业壁垒，设计师在刚接触的时候一定会有很多茫然时刻。对于各种专业词汇的一脸懵，对于行业的不了解。
或者很多人对于B端的认知还停留在，B端好像没啥好设计的，都是现成的组件库拖一拖，成就感比C端差远了。
那么做访谈、体验优化的意义是什么呢？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
TypeScript从入门到实践专栏是博主在学习和工作过程中的总结，实用性非常强，欢迎订阅哦，学会TS不迷路。
| TS系列 | 标题 |
|---|---|
| 基础篇 | TS入门（一） |
| 基础篇 |
TS类型声明（二） |
| 基础篇 | TS接口类型（三） |
| 基础篇 | TS交叉类型&联合类型（四） |
| 基础篇 | TS类型断言（五） |
| 基础篇 | TS类型守卫（六） |
| 进阶篇 | TS函数重载（七） |
| 进阶篇 | TS泛型（八） |
| 进阶篇 | TS装饰器（九） |
在前几篇介绍了断言，在使用断言时我们已经确定了变量的类型，确定该类型时一定存在（否则则会欺骗编译，运行时报错），那么为什么还要类型守卫呢？因为类型断言还是需要借助类型守卫的，类型守卫主要是用来判断未知类型是不是所需要的类型。
类型守卫主要包括四种方式：
先写两个接口Teacher、Student，然后将这两个接口进行联合声明，使用in来判断属性是否在传递的参数中，然后分别作输出。
缺点：用 in 关键字缩小数据类型必须有一个独特的属性作为判别标准，否则不能用 in 关键字
interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } type Class = Teacher | Student； function getInfo(val:Class){ //此时val类型缩小为Teacher类型 if('courses' in val){ console.log(val.courses) } //此时val类型缩小为Student类型 if('study' in val){ console.log(val.study) } } getInfo({ name: 'student', study: "Philosophy" }); //打印结果为Philosophy，因为传参中含有study属性，所以走了第二个判断
为什么用typeof做类型守卫呢？因为typeof能判断JS基本数据类型。typeof只能识别以下类型：
写法：typeof a，a是变量（基本数据类型）
奇怪为什么typeof不能识别null呢？
let a= null typeof a;//object
null是一个只有一个值的特殊类型，表示一个空对象引用，可以用来清空对象，它是object 类型是历史遗留下来的问题，曾提议改为null类型，被拒绝了。
typeof 识别其他的类型比如数组，正则等都是object类型
let a =[1] typeof a;//Object var reg = RegExp("a","i"); typeof reg//reg
typeof 怎么起到守卫的作用呢，通过typeof判断变量类型然后执行相应的逻辑，具体如下：
function class(name: string, score: string | number) { //识别到sore为number类型 if (typeof score === "number") { return "teacher:" + name + ":" + score; } //识别到sore为string类型 if (typeof score === "string") { return "student:" + name + ":" + score; } }
上面案例的传参都会基本类型，当传一个对象时候，我们也可以用对象中的属性来进行判断，比如：
interface A{ a:string; } interface B{ a:number; } type Class = A | B； function getInfo(val:Class){ //判断val的属性a的类型为number类型 if(typeof val.a === "number"){ console.log('B:'+ val.a) } //判断val的属性a的类型为string类型 if(typeof val.a === "string"){ console.log('A' + val.a) } }
为什么用instanceof呢？因为typeof有局限性，引用类型比如数组，正则等无法精确识别是哪一个种型，instanceof能够识别变量（比如实例对象）是否属于这个类。instanceof不能检测原始值类型的值，但是原始值对应的对象格式实例则可以检测。具体instanceof是怎么做类型守卫的呢?
a instanceof b，a是参数，b是一般都是接口类型。
interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } type Class = Teacher | Student； function getInfo(val:Class){ //判断val的类型是否是定义的接口Teacher类型 if(val instanceof Teacher){ console.log('teacher:'+ val.courses) } //判断val的类型是否是定义的接口Student类型 if(val instanceof Student){ console.log('student' + val.study) } }
TS中有一个关键字is可以判断变量是否属于某种类型。
a is b，意思是a是b类型，a是函数参数，也可以是this关键字，this关键字一般用在累中判断，b可以是接口类型，b也可以是number、string等其他合法的TS类型。这种写法称作类型谓词，使用类型谓词的函数称为类型谓词函数，该函数的返回值必须的boolean类型。
isTeacher，代表了参数cls是Teacher类型，然后用这个变量来判断。
函数中的参数类型为多个类型，通过is关键字自定义类型，将函数参数精确到某种类型，然后再执行相应的逻辑。
interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } const isTeacher = function (cls: Teacher | Student): cls is Teacher { return 'courses' in cls; } const getName = (cls: Teacher | Student) => { if(isTeacher(cls)) { return cls.courses; } }
下面代码中的 User 是抽象类，不能被实例化，Staff 和 Student 都继承自 User。实例方法 isStaff 用于将类型收窄为 Staff，实例方法 isStudent 用于将类型收窄为 Student
abstract class User { name: string; constructor(name: string) { this.name = name; } isStudent(): this is Student { return this instanceof Student; } isStaff(): this is Staff { return this instanceof Staff; } } class Student extends User{ study: string; constructor(name: string, study: string) { super(name) this.study = study } } class Staff extends User { workingYears: number; constructor(name: string, workingYears: number) { super(name) this.workingYears = workingYears } } function judgeClassType(obj: User) { if (obj.isStaff()) { // obj的类型被缩小为 Staff } else if (obj.isStudent()){ // obj 的类型被缩小为 Student } }
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在本教程中，我将向大家展示如何使用 Laravel + Vue 3 使用 typescript 和 Vite 设置你自己的单页应用程序。
这是在 Laravel 项目中添加 PWA 的手动方法。我们不会使用 InertiaJS 或其他类似的东西，我们也不会混合使用。我们将手动实现我们自己的 VueJS 前端。
composer create-project laravel/laravel laravel-vue-manual
在我们的 laravel 项目中，让我们使用 yarn 运行一个命令，并选择 vue 和 typescript。
yarn create vite
将项目名称设置为：FrontEndApp
选择：Vue
选择：TypeScript
然后转到我们的FrontEndApp目录并运行yarn或yarn install安装依赖项。
配置 Vite
让我们配置我们的 vite 配置FrontEndApp\vite.config.ts
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default ({ mode }) => { // 检查是否开发 const isDevelopment = mode === "development"; return defineConfig({ server: { port: 3000, }, build: { // 生成的文件将添加到此处 outDir: "./../public/app", }, // 也将更改基于模式的基础 base: isDevelopment ? "/" : "/app/", plugins: [vue()], }); };
然后让我们更改build脚本FrontEndApp\package.json，这样每次我们构建它时都会替换以下文件public/app：
{ ... "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build --emptyOutDir", "preview": "vite preview" }, ... }
现在，如果我们在FrontEndApp中运行yarn build，它应该在laravel项目的根目录中的public文件夹中创建一个名为 app 的文件夹。
让我们设置我们的 laravel 路由，以便我们可以访问我们刚刚创建的文件。
让我们编辑这个文件 routes\web.php
<?php
use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('welcome'); }); Route::get('/app/{any}', function () { $path = public_path('app/index.html'); abort_unless(file_exists($path), 400, 'Page is not Found!'); return file_get_contents($path); }) ->name('FrontEndApp');
现在，如果我们http://127.0.0.1:8000/app在浏览器中打开，我们现在可以看到我们的应用程序已启动。
我们将在我们的根项目目录中添加一个开发包，并同时调用它。我们用它来一次运行 2 个或更多命令。
安装：
yarn add -D concurrently
如果我们想要自动工作，不想每次使用时都重新构建frontednapp，我们要做的是在package.json项目的根目录中添加一个新脚本。
{ ... "scripts": { ... "front:serve": "cd FrontEndApp && yarn dev", "front:build": "cd FrontEndApp && yarn build", "serve": "concurrently \"php artisan serve --port=8080\" \"yarn front:serve\"", "deploy": "yarn setup && yarn front:build && php artisan migrate" }, ... }
这样， running yarn serve将同时运行 127.0.0.1:8080 和 localhost:3000。你现在可以同时使用这两个项目。
完成 FrontEndApp 的工作后，你可以运行 yarn deploy 以构建我们的前端。
我相信这也是大家可以在 laravel 项目中添加 pwa 的一种方式，这样你就可以将它们保存在一个项目中。
考虑到这一点，你可以添加routes到你的 FrontEndApp 项目中，还可以添加状态管理器PiniaJA，例如 等等。
《Vue.js 快速入门实战》
【内容简介】
Vue.js 快速入门实战以Vue.js的知识点为基础，结合TypeScript的使用，循序渐进地介绍了Vue.js 3.0（简称Vue3）的知识点和实战技巧，可以帮助零基础的读者掌握独立开发项目和部署项目上线的技术。全书共14章，包括Vue.js概述、搭建开发环境、Vue.js组合式API、Vue.js的模板语法、Vue.js的计算属性和侦听器、Vue.js中class和style的绑定、Vue.js的表单开发、Vue.js的组件开发、Vue.js的网络请求、Vue.js的状态管理、Vue.js的路由管理、Vue的项目部署、在线招聘网站开发实战以及招聘网站后台管理系统开发实战。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
目录
computed计算属性: 依赖其他的值,有缓存, 当它依赖的属性值发生改变,在下次获取computed的值时,才会重新计算computed值,而watch监听器,更多的是起到监听的作用,它没有缓存,每当监听的数据发生了都会执行回调进行后续的操作.
例如老板要让你使用组件写分类栏，然后使用该组件生成两个分类栏，这两个分类栏里的数据都不一样，但是整体结构是一样的，这就要求组件的结构一样，但是内部 DOM 结构是由使用组件的时候决定的，这就需要插槽，其就像放在组件中的占位标签，使用组件时我们将要放到占位标签处的DOM结构写入组件标签体中即可。
例如如下图例子，第一个分类框我们要展示热门电影，第二个分类框我们要展示一张风景图，整体的框架是一样的，只是其内部填充的东西不一样下面会做出更深刻的理解。
此板块我们讲述第一个插槽：默认插槽。之前我们使用组件的时候，引入进 App.vue 后注册就可以采用 自闭合 与 完整组件标签 的方式使用，以下就是常采用的自闭合与完整组件标签方式（以 test组件为例）
但是插槽的使用我们就要把要放在插槽中的内容写在组件标签体内，例如我们要在插槽中放入一个 ul 列表，那么我们使用组件时就要这样书写：
接下来说说默认插槽的写法，如果我们只在使用组件时的组件标签体内写上内容，那页面上是显示不出来任何东西的，这是因为标签体内的内容确实被解析了，但是vue不知道要把这些东西放在组件中 template 的哪个位置，故我们要在组件的 template 中设置一个插槽来占位，以保证使用组件时其解析的内容可以放入占的位置中去。占位我们使用一个很重要的标签 ------ slot，我们需要在组件的 template 中这样书写：
这样使用组件时组件标签体中的内容就可以放入组件的默认插槽中了
我们来实现一下上述的分类案例，让第一个分类展示电影，第二个分类放一张图片进去，但整体组件结构一样
classify.vue组件：
-
<template>
-
<div class="classify-box">
-
<div class="title">{{name}}</div>
-
<slot></slot> //slot设置默认插槽来占位
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:'Classify',
-
data() {
-
return {
-
}
-
},
-
props:['name'] //propos接收传来的标题名称
-
}
-
</script>
-
-
<style scoped>
-
//css太占地方就删掉了
-
</style>
App.vue组件：
-
<template>
-
<div class="app-box">
-
<Classify name='热门电影'> //使用组件并在组件标签体中书写要放进插槽中的内容
-
<ul>
-
<li>肖申克的救赎</li>
-
<li>1912</li>
-
<li>零的执行人</li>
-
</ul>
-
</Classify>
-
<Classify name="风景">
-
<img src="./img/QQ图片20220818163031.jpg" alt="">
-
</Classify>
-
</div>
-
</template>
-
-
<script>
-
import Classify from './components/classify.vue' //引入组件
-
export default {
-
name: 'App',
-
data() {
-
return {
-
}
-
},
-
components: {
-
Classify:Classify //注册组件
-
}
-
}
-
</script>
-
-
<style scoped>
-
//css太占位置删掉了
-
</style>
这样就可以实现一个最基本的默认插槽案例了
具名插槽其实只是在默认插槽的基础上给每个插槽起了名字，作用为可以在组件中设置多个插槽，可以更具体细分。首先给组件插槽起名字，使用 name="xxx"。
上面就在组件中定义好了三个具名插槽，下面我们来看使用插槽的写法，依旧是在使用组件标签时在标签体内写入内容，但是要注意要使用 slot="xxx" 写在组件标签体外层盒子上来指明放入哪个插槽中
上面的写法其实并不完善，slot写在每个指定插槽的外层大盒子 div 上了，这样会给其增加一层 DOM 结构，我们最好把 div 换成 template 标签，因为 template 标签不会被解析，结构更清晰不多余。
下面简单实现一下具名插槽的使用
classify.vue组件：
-
<template>
-
<div class="classify-box">
-
<div class="title">下面是具名插槽的内容</div>
-
<slot name="header"></slot>
-
<slot name="body"></slot>
-
<slot name="footer"></slot>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:'Classify',
-
data() {
-
return {
-
}
-
},
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
App.vue组件：
-
<template>
-
<div class="app-box">
-
<Classify>
-
<div slot="header">
-
<span>我在header插槽中</span>
-
</div>
-
<div slot="body">
-
<span>我在body插槽中</span>
-
</div>
-
<div slot="footer">
-
<span>我在footer插槽中</span>
-
</div>
-
</Classify>
-
</div>
-
</template>
-
-
<script>
-
import Classify from './components/classify.vue'
-
export default {
-
name: 'App',
-
data() {
-
return {
-
-
}
-
},
-
components: {
-
Classify:Classify
-
}
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
这样就简单实现了具名插槽
作用域插槽较难理解，但其简单解释就是带有数据的插槽，把组件中的数据绑定给插槽，然后谁使用这个组件谁就能拿到这个数据使用，也相当于一种数据通信，其需要这样把数据绑定定义给组件插槽（名称没有要求）
然后就要使用组件时使用 slot-scope="xxx" 去接收，或者直接使用 scope，要注意的是此处标准一点最好写在 template 中，这里的 xxx 不需要和组件插槽中起的名字一样，随便起就行。然后我们打印一下接收到的数据看看其是什么
可以看到我们接受到了一个对象，对象中包含的是你插槽中绑定的所有数据（我们只绑定了一个所以对象里只有一组数据），对此我们就能在组件标签体中使用得到的数据了
下面简单实现一下作用域插槽的使用
classify.vue组件：
-
<template>
-
<div class="classify-box">
-
<div class="title">下面是作用域插槽的内容</div>
-
<slot :hobby="hobby"></slot>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:'Classify',
-
data() {
-
return {
-
hobby:['打游戏','睡大觉','吃大餐']
-
}
-
},
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
App.vue组件：
此处 slot-scope 接收的数据使用了es6解构把数据解构出来了
-
<template>
-
<div class="app-box">
-
<Classify>
-
<template slot-scope="{hobby}">
-
<ul>
-
<li v-for="(h,index) in hobby" :key="index">{{h}}</li>
-
</ul>
-
</template>
-
</Classify>
-
</div>
-
</template>
-
-
<script>
-
import Classify from './components/classify.vue'
-
export default {
-
name: 'App',
-
data() {
-
return {
-
-
}
-
},
-
components: {
-
Classify:Classify
-
}
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
这样就简单实现了作用域插槽的案例
感谢支持'
来源：csdn
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
画面平衡是一个很基本的设计理念，但很多朋友在平时的作品中容易忽视这个点。彩云在星球中帮不少朋友看过作品集，发现最多的问题之一就是画面平衡没做好，我觉得只要把这个基本问题解决了，作品就能提升一个档次。
用户本能地会对不平衡的设计感到厌烦，如何在画面中创造一个有吸引力的平衡？是本篇文章要分享的内容。
平衡是一个作品中最重要的元素之一。平衡中的对称关系能够创造平衡与和谐，这种平衡状态直观上能够让用户感到舒适。
人体是垂直对称的，我们的视觉接收也与之相对应。我们喜欢物体在垂直轴上保持平衡，直觉上总是倾向于平衡一种力量与另一种力量。
在设计环境中，平衡是基于元素的视觉重量，而视觉重量是用户对图像的注意力范围。如果画面是平衡的，用户会下意识地感到舒适。画面平衡被认为是其元素在视觉上的比例安排。
如何让一个页面看起来平衡？
最常见的平衡例子就是使用对称。
在潜意识层面上，对称的视觉能让人愉悦，能让画面看起来和谐有条理。对称的平衡是通过在水平或垂直的中轴两侧均匀放置元素来创造的。也就是说，画面中间假想线的两边实际上是彼此的镜像。有些人认为对称的平衡是无聊和可预测的，但它经受住了时间的考验，到现在仍然是在页面上创造舒适和稳健感觉的最好方法之一。
二、不对称（动态）平衡
两侧重量不相同的元素构成具有不对称平衡。
动态平衡通常会比静态平衡更有设计感，让画面不至于呆板。在缺乏平衡的情况下，我们的目光会条件反射性地开始寻找平衡点，这是一个很好的机会，可以将注意力吸引到页面上可能还没被注意到的部分。页面重点就应该放在这里——抓住用户的注意力，就像产品的生命线一样。
比如一般这样去“配重”的元素会是一个按钮或者标题。
重要信息（或者是行动按钮）就是我们需要去配重的价值元素。
不对称的现象越严重，用户就越想找出其中的原因（检查配重）。人们本能地比平时更仔细地研究这样的画面。然而，这里需要注意分寸，过于古怪的构图并不总是能被很好的感知。
平衡中的另一种类型，特点是视觉元素从一个共同的中心点放射出来。径向平衡在设计中不常用。它的优点是，注意力很容易找到并保持一个焦点——恰好就在它的中心，这通常是构图中最引人注目的部分。
这是一种平衡中的混乱，就像 Jackson Pollock的画作一样。这样的组成没有突出的焦点，所有的元素都有同样的视觉重量。没有层次，乍一看，画面就像视觉噪音，但所有元素又相互匹配，形成一个连贯的整体。
（彩云注：这是一种比较高阶的设计平衡处理手法，用的好可以让画面非常具有设计感，但把握不好的话，就会非常凌乱。所以，我们平时能看到很多大师的作品看似一些简单图形的使用，但就是好看，轮到自己设计的时候就会发现，越简单的设计似乎越难设计好。）
五、视觉平衡的秘密？
当谈到构图中的重量平衡时，他们经常将其与物理世界中的重量进行比较：重力、杠杆、重量和支点。我们的大脑和眼睛感知平衡的方式非常类似于力学定律。我们很容易把一幅画想象成一个在某一点上平衡的平面，就像一个天平。如果我们在图像的边缘添加一个元素，它就会失去平衡，有必要修复它。元素是否是一组色调、颜色还是点并不重要，目标是找到图像的视觉“重心”，即图像的重心。
不幸的是，没有精确的方法来确定一个物体的视觉质量。一般来说，设计师依赖于他们的直觉。不过，下面这些有用的观察可能会有所帮助：
1）大小
大的物体总是更重。
2）形状
不规则形状比规则形状的元素轻。
3）颜色
暖色比冷色重。
4）色调
深色物体比浅色物体重。
5）图案
带有图案的元素显得更重。
6）3D
带有纹理贴图的元素显得更重。
7）位置
物体离中心越远，其视觉重量越大。
8）方向
垂直元素比水平元素更重。
9）密度
许多小元素可以抵消一个大元素。
10）内部复杂性
物体内部越复杂，视觉重量更大。
11）填充空间关系
正形空间比负形空间更重。
12）对重量的感知
照片中的哑铃看起来会比一只钢笔更重。
当使用对称时，作品看起来可以更加的专业和有科学性。其中，静态对称的作品显得更加有专业精神和严肃的；而动态对称的设计方法则能吸引用户的兴趣，表达出个性和创造力，能让用户集中注意力。
作者：彩云sky
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
过去一年，一些新词频繁在行业中出现。诸如“元宇宙是什么？NFT能赚钱吗？AIGC前景在哪里？虚拟数字人怎么带货？XR有未来吗”这样的问题，不断被提及和讨论。
或许是因为行业内卷带来的焦虑，很多人渴望在新世界中寻求红利，发掘机会，2022年也确实涌现出不少新行业、新趋势。
今天，新榜编辑部筛选出去年最值得关注的6大行业新趋势，希望能和各位一起回顾2022，展望2023。
以Meta为代表，元宇宙堪称2022年最火的商业概念之一。
自2021年10月将Facebook更名为Meta，虽然饱受质疑，但扎克伯格对元宇宙的投入堪称坚决。有报道称Meta2022年在元宇宙上的研发投入高达百亿美元。
2022年1月18日，微软宣布以687亿美元收购动视暴雪，希望为微软构建元宇宙打下基础。据麦肯锡公司估计，2022年前五个月，企业、私募股权公司和风险资本家共进行了总额高达1200亿美元的元宇宙相关投资。
而在国内，更是呈现出一片热闹景象。
城市方面，除了上海发布《上海市培育“元宇宙”新赛道行动方案（2022—2025年）》外，深圳、成都、杭州等城市也有元宇宙相关规划或园区布局。
图源：上海市人民政府
大厂方面，腾讯上线“超级QQ秀”，字节上线“派对岛”，快手内测基于“附近同城”的虚拟形象社交，抖音上线虚拟空间“抖音小窝”，芒果上线元宇宙平台“芒果幻城”，映客更是宣布更名“映宇宙”，要全面进军元宇宙。
腾讯的“超级QQ秀”和字节的“派对岛”
2022年11月17日，B站董事长陈睿谈及“B站元宇宙构想”时曾称B站是中国最适合去实现“元宇宙”概念的公司之一。
但热闹非常的元宇宙也饱受质疑。在拥护者看来，元宇宙会是下一代互联网，被称为“元宇宙第一股”的沙盒游戏平台Roblox还总结了元宇宙的八大要素：身份、朋友、沉浸感、低延迟、多元化、随时随地、经济系统和文明。
但在质疑者看来，元宇宙只不过是一次旧技术的拼接，是一个营销游戏。中国工程院院士邬贺铨认为，元宇宙不会是下一代互联网。元宇宙是现代信息技术的集成，它涉及5G、IP网、云计算、人工智能、虚拟现实、区块链、数字货币、物联网、人机交互等，要满足元宇宙的技术需要，几年之内还不太可能。
2022年2月11日，元宇宙社交App“啫喱”曾一度超过微信、QQ，登上AppStore第一，但爆火3天后，就宣布主动下架。同年10月，字节的同类产品“派对岛”，同样在上线3个月后宣布裁撤团队；8月底，号称要成为“元宇宙时代的微软”的影创科技被曝欠薪200多人。
同年8月中旬，扎克伯格曾发布自己的一张虚拟自拍照，结果遭全网群嘲。截至当前，Meta已经连续第四个季度利润下滑。
不过就在2022年12月19日，Meta发布博客《为什么我们仍然相信未来》，表示将继续把20%的支出用于投资VR部门Reality Labs，这是他们元宇宙计划不可或缺的一部分。
显然，扎克伯格始终坚信元宇宙会是未来。
我们认为，受限于技术，类似头号玩家那样的全真元宇宙仍然非常遥远，但聚焦工业、娱乐等特定领域的元宇宙产品已开始初步落地。2023年，元宇宙也许能出现更具想象力的产品。
2022年或许可以说是AIGC元年。
AIGC（AI-Generated Content，人工智能生成内容）按照模态区分，可分为音频生成、文本生成、图像生成、视频生成等细分领域，以及文字生成图片、文字生成视频等跨模态生成。
引起热议的AI绘画获奖作品《太空歌剧院》
很多人是从2022年爆火的AI绘画开始了解AIGC的：4月Midjourney内测，7月Stable Diffusion横空出世，10月二次元模型NovelAI走红，11月无数人试图驯服AI绘画小程序，层出不穷的AI工具让人们看到了AI在艺术创作方面蕴藏的巨大潜力，同时也引起了猛烈的质疑和抗议：关于版权与道德，关于公平、安全、责任，关于人类和机器之间的关系。（相关阅读：《不明觉厉的AI绘画，对内容创作者来说有什么用？》《千万网友试图驯服的AI绘画，背后谁在赚钱？》）
到了2022年年底，对话式AI语言模型ChatGPT惊艳了海内外网友，它像人一样可以连续对话，帮助人们写作、写代码、回答一些常识性、生活性问题等，尽管有时会一本正经地胡说八道，但AI生成内容的能力已经突破我们的想象。（相关阅读：《刷屏的ChatGPT能帮自媒体人写稿吗？我们帮你试了试》《27个问题，让新晋懂王ChatGPT教我做网红》）
从PGC到UGC再到AIGC，内容生产范式的改变是大趋势，AI正在愈加渗透内容行业。
AIGC相关公司，图源硅谷Leonis Capital
百度创始人李彦宏曾在2022年7月的百度世界大会上表示：“AIGC或许将颠覆现有内容生产模式，实现以‘十分之一的成本’，以百倍千倍的生产速度，去生成AI原创内容。”
不过，目前国内的AIGC行业尚未进入大规模落地和体系化发展阶段，仍处于发展初期，大力投入大模型研发和落地的主要以大型云厂商为主，还有一些将AI技术产品化的互联网大厂和初创公司。除了存在算力成本高、技术不完善等难题外，C端用户的付费意愿也比较有限。
相对来说，B端客户的可发展空间较大，据Forrester预估，2023年财富五百大企业中将有1成通过AI工具创造内容，因为人工制作内容的速度永远无法大规模满足定制化内容需求。
图片来源：西湖心辰创始人蓝振忠在知乎的演讲
2023年可能会有越来越多的企业和个人使用AI来提高内容生成效率，激发创作灵感。正如Stability AI的CTO Tom Mason在极客公园的大会上提到的：“生成式AI正在做的，就是让消费者成为创作者，给他们创作他们自己消费的媒体内容的能力。”他判断，继文字生成图像后，下一波浪潮肯定是视频、音频和3D。
相比元宇宙，虚拟数字人可能更“实在”一些，至少是已经可见的。
关于虚拟数字人，新榜编辑部曾在“虚拟人专栏”中推出系列文章：《造价从100元到100万，虚拟人究竟是什么？》《90%玩家处在早期阶段，虚拟人靠什么赚钱？》《虚拟人四大难题：技术、产品、市场、中之人》。
按照“技术炒作周期曲线”
虚拟数字人行业正处于期望顶峰期
一个普遍共识是，目前虚拟人行业仍处于早期阶段，杀手级产品也尚未出现。也因此，去年虚拟人行业的一个主旋律是各类粉墨登场的虚拟数字人。
抖音方面，许安一、金桔2049等依靠直播成为了人气网红；快手方面，狐璃璃40天涨粉百万，快手技术团队还推出“快手虚拟演播助手KVS”；B站方面，海外虚拟主播vox的直播首秀，当晚直播1.7小时，营收达111万元。
此外，蒙牛、雪花啤酒、长安汽车等品牌也相继推出了自己的虚拟代言人。
虚拟数字人背后，则是动作不断的虚拟数字人公司、平台。
李未可科技、魔珐科技等相继完成融资，前者由字节独家投资，后者则由红杉中国等投资机构投资，B轮、C轮融资总金额达1.3亿美元。
百度除发布AI数字人希加加外，百度智能云曦灵还推出了两大SaaS平台“数字明星运营平台1.0”及“数字人直播平台2.0”，不断加码虚拟数字人基建。
2022年6月8日，日本知名虚拟主播事务所彩虹社成功登陆资本市场，成为VTuber界首家上市公司。在其招股书上，B站位列第三大股东。
企查查数据显示，截至2023年1月初，国内虚拟人/虚拟偶像相关现存企业近5千家，其中2022年共新注册1300余家，同比增长超25%。
政策方面同样传来利好消息。《北京市促进数字人产业创新发展行动计划（2022—2025 年）》《虚拟现实与行业应用融合发展行动计划（2022-2026年）》等政策相继发布，虚拟数字人价值得到肯定。
目前，业内普遍相信虚拟数字人的价值，但受限于技术、运营，如何发挥其价值仍然存在不小的难题。
2022年5月10日，国内虚拟偶像团体A-SOUL成员珈乐宣布进入“直播休眠”状态，引发粉丝极大不满，也由此引发对中之人的相关讨论。目前，市场对虚拟数字人的接受度仍是一个未知解。
截至目前，虚拟数字人已经尝试了广告、电商以及短视频、直播等多种形式、场景的应用，但仍处于尝鲜阶段，未出现普遍性的成功案例。
合理推测，谁能率先实现技术突破，孵化出第一个现象级虚拟数字人IP，谁就能第一个吃到红利。
历经多年市场低迷期，2022年，基于XR的技术、设备和内容生态受到了越来越多的消费者关注。
XR（Extended Reality，扩展现实）是指通过计算机将现实与虚拟相结合，打造一个人机交互的虚拟环境，涵盖虚拟现实（VR）、增强现实（AR）和混合现实（MR）等多种沉浸式技术。就像智能手机是移动互联网的入口一样，未来，XR设备被广泛认为是元宇宙的重要入口。
12月，国产AR眼镜Nreal的累计产量已达成10万台
Meta、苹果、谷歌、三星、字节跳动、腾讯、华为、爱奇艺等国内外科技巨头均有布局XR赛道。其中，Meta旗下VR产品Oculus系列在全球VR市场的占有量遥遥领先，字节跳动旗下的PICO系列位居全球第二，并在国内市场稳居第一。
XR设备双11销售榜单，图源天猫
2022年下半年，PICO 4和Meta Quest Pro的发布又掀起了VR硬件的市场热潮。可以看到，技术的进步带动了消费体验的提升，比如Pancake方案的规模化商用让VR一体机变得更小巧，彩色透视让VR向MR应用跨越。
PICO宣传图
PICO总裁周宏伟曾在接受采访时表示，目前VR行业虽然产品硬件在每一代都有进步，但整体上还是处于比较早期的阶段，用户基数比较少，还有很大的发展空间，“现在的大环境不是你死我活的问题，是你活我活的问题”。
一直以来，XR领域的护城河并不是硬件，很大程度上需要优质的内容生态来推动设备普及。
目前VR设备的应用场景主要集中在游戏社交和影视直播。
作为最大的VR内容平台，Steam截至2022年底已经有超7000款支持VR的游戏和应用。11月，PICO“轻世界”正式公测，提供各种3D场景创作工具和操作方式，希望开放生态让更多玩家在VR世界里创作内容。但相对来说，国内的VR平台内容生态还是略显薄弱，首发、独占内容较少，还处于“易落灰”的阶段。（相关阅读：《看完VR版世界杯总决赛，聊聊我对PICO 4的使用体验》）
根据IDC全球增强现实和虚拟现实头显季度跟踪报告的最新数据，2022年，全球VR头显和AR设备的出货量下降12.8%，降至970万台，预计2023年将恢复增长。出货量大降除了大环境的影响，XR产品本身及相关生态不够完善仍是主要原因。
展望2023年，XR产业正在进入一个新的发展阶段。苹果MR设备、索尼PS VR2等更多新产品或将登场，各类应用场景也等待着创业者和用户不断发掘。随着《虚拟现实与行业应用融合发展行动计划（2022-2026年）》的发布，国内XR市场也迎来政策利好。
罗永浩曾提到，AR行业正处于一两年后就能实现大规模商业化的节点，在科技巨头大规模入场之前，目前正是创业公司入局的好时机。
我们认为，除了产品形态的创新，内容生态的建设可能才是接下来XR大众化的关键，不仅是游戏，社交、办公、健身、视频、演唱会等多维度内容都需要共同发展，虚实之间，存在极大的发展机遇。
背靠区块链技术，数字藏品成为“元宇宙”概念下最快的变现途径之一。
2021年底NFT在海外爆火，2022年国内以“数字藏品”之名对NFT进行了本土化改造，迎来了快速发展。据国家语言资源监测与研究中心，“数字藏品”入选2022年度十大新词语。
数藏使用区块链技术为作品生成相对应的数字凭证，具有可追溯、难以篡改、唯一性等特点。知名IP作品上链限量发售，既可以保护原创版权，又能用新概念进行营销宣传，具备稀缺性和收藏价值。数藏和NFT的主要区别在于国内数藏禁止加密货币炒作，不开放二级市场；以联盟链为主，创作及定价方式由平台方决定。
整体来看，数藏行业在2022年经历了从爆发式增长到陷入寒冬的大起大落。
起初“万物皆可数藏”，国内媒体、政府、互联网平台等多与文博、书画、影视、艺术家合作发行数藏，明星名人也引领了一波数字时尚风潮。腾讯、阿里、百度、京东、B站、小红书等新老大厂纷纷布局数字藏品，据不完全统计，国内大大小小的数藏平台已经超过1000家。（相关阅读：《B站UP主定制的数字藏品，谁来买单？》《从爆火到理性，数字藏品还值得创作者入局吗？》）
图片来源：元飞船数藏舰
空投、合成、白名单、IP赋能……火热市场背后却是一片炒作乱象。很快，监管部门相继发布对数藏合规化的倡议。
2022年下半年，国内数藏市场虚假繁荣的泡沫开始显现，不乏平台暴雷、创始人“跑路”导致用户维权等现象，头部平台的藏品也出现了滞销情况。同年8月，腾讯幻核体面退场；10月~11月，至少有超过60家数藏平台主动发布清退公告。
即使在国外，加密货币交易所FTX崩盘之前，NFT市场就已经受到加密寒冬的影响，截至2022年底，日交易量从近10亿美元的高位下降到仅1800万美元。
据速途元宇宙研究院，目前数字藏品熊市的原因是供需关系的反转，“通货膨胀”的藏品缺乏与用户之间的联系或附加权益，难以产生更多价值增量。
很多新事物在发展初期都不可避免地产生投机炒作现象，只有当行业回归理性，虚火褪去后，数藏的价值才能真正显现出来。
NFT和数藏是区块链的新生产力发展带来的生产关系创新变化，高樟资本告诉新榜编辑部，这种生产关系对于解锁、赋能精神消费领域的生产力的作用是深远的，他们仍然看好该市场未来的机会和空间。
数字藏品行业全景图谱，图源亿欧智库
2023年起，国家队正式入场，全国首个国家级合规数字资产二级交易平台——“中国数字资产交易平台”于元旦上线。这标志着包括数字藏品在内的数字资产二级交易市场将迎来合规健康可持续发展阶段。
在合规趋势下，我们认为，数藏平台会趋向细分化，比如与实体经济的垂直领域进一步结合，或者融入AIGC，加强社区运营和赋能创作者生态，这些都是未来可能的发展方向。
Web3.0在2022年的第一波热度从一款游戏开始。
StepN，这款由浙大毕业生开发的Web3.0 App，曾在短短几个月时间里就卖出了上百万双虚拟鞋，月收入一度超过1亿美元。
财富效应之下，Web3.0成为2022年的显学之一。
2022年1月，NFT市场OpenSea的月交易量超过50亿美元；2月，红杉资本宣布推出一支专注于投资Web3.0相关技术创业公司的基金，资金规模在5亿至6亿美元之间；11月，耐克宣布将推出一个新的Web3.0平台Swoosh。目前，包括谷歌、Meta、阿里、腾讯等数十家大公司都开始探索Web3.0相关业务。
a16z在Web3.0的生态布局。图源：36氪
如何抓住Web3.0的机会？第一步就是要搞清楚什么是Web3.0。这也是Web3.0在2022年的重要主题之一。
因为Web3.0涵盖了区块链、数字货币、智能合约、DAO、DeFi、SciTS、CeSMO、CMO、DeSci、DeSoc、DeEco等一系列复杂概念，时至今日，仍然没人能给出一个服众的定义。
目前传播度最广的Web3.0定义来自研究员Eshita：Web1.0的特征是“可读”；Web2.0的特征是“可读+可写”；Web3.0的特征则是“可读+可写+拥有”。去中心化、确权、互联互通则是在Web3.0的相关讨论中最常出现的几个关键词。
但与此同时，特斯拉创始人马斯克曾表示“我不认为Web3.0真实存在，现在更像是市场营销的热词”，推特前首席执行官多尔西则认为“用户并不实际拥有Web3.0产品，Web3.0的实际拥有者是项目背后的风投机构，及其有限合伙人”。
因为共识的缺失，Web3.0显现出冰火两重天般的境遇。有人热情拥抱，有人态度谨慎，有人充满质疑。
2022年10月，周星驰在Instagram上公开招募Web3.0人才
截至目前，针对Web3.0数字资产的金融监管，美国仍未形成统一的监管架构，呈现出“多头监管”的态势。而在国内，强监管则是Web3.0从业者最大的共识。
回看去年，Web3.0就仿佛是一个充斥疯子、骗子、傻子以及理想主义者的蛮荒世界，每个人都希望能在Web3.0身上得到自己想要的。
2022年9月15日14时，以太坊正式完成“合并”，结束了区块链对挖矿的依赖，也成为Web3.0历史上的一个里程碑。但在2023年Web3.0能否迈入新的历史阶段，目前仍是一个未知数。
我们认为，Web3.0现在最大的困难在于如何从概念炒作转向项目落地，为市场提供一个真正的杀手级产品，只有如此，Web3.0才能真正获得持久的生命力，摆脱割韭菜的质疑。
不断涌现的新技术、新产品正为创作者和内容行业注入新的活力，我们相信，2023年会是充满可能性的一年，面对方兴未艾的技术应用和热点话题，新榜编辑部也将继续关注和跟踪，与你一起探讨和见证内容行业的大变革。
作者：新榜
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.
Linux & Mac OS (windows git bash)
export NODE_OPTIONS=--openssl-legacy-provider
windows命令提示符:
set NODE_OPTIONS=--openssl-legacy-provider
(1) 鼠标双击nvm-setup.exe文件，选择“我接受…”那一行，点击next
(2) 可以根据自身情况自定义选择路径盘，路径不要出现空格或中文符号（路径最好是在路径盘的根目录下，如C盘、D盘下的根目录），选好后点击next
(3) 选择node.js的安装位置，可以根据自身情况自定义选择路径盘，路径不要出现空格或中文符号（路径最好是在路径盘的根目录下新建一个文件夹，如C盘、D盘下的根目录）,选好后点击next。(若系统中已经安装node.js，则cmd打开终端，输入where node，查看node的位置，选择此文件目录)
(4) 最后一步，点击install即可安装完成
进入命令控制行窗口（win+R,输入cmd），
输入nvm -v,出现版本号即成功。
(1) 输入命令行nvm ls available查看可用的node.js版本号
若报错：Could not retrieve https://nodejs.org/dist/latest/.....
则打开nvm的安装目录，打开settings.txt文件，增加2行,然后保存
node_mirror:https://npm.taobao.org/mirrors/node/
npm_mirror:https://npm.taobao.org/mirrors/npm/
(2) 输入命令行nvm install node版本号(例如：nvm install 16.17.0)
(3) 安装成功后，输入命令行nvm use node版本号（nvm use 16.17.0）
若报错exit status 1: ��û���㹻��Ȩ��ִ�д˲�����
则权限不够，以管理员身份运行cmd
具体方法：点击电脑左下方搜索->输入cmd->以管理员身份运行（命令提示符）->重新输入nvm use
(4) 验证是否成功
分别输入命令行node -v和npm -v，检验node.js以及对应npm是否安装成功，如果可以显示版本号这说明安装成功。
小窍门：
1.输入命令行nvm ls可查看你安装的所有node.js版本号，以及你当前所选择的node.js运行版本
(2) 如果想删除某node.js版本的话，输入命令行nvm uninstall node版本号（例如：nvm uninstall 18.10.0）即可删除对应版本
npm run dev
来源：csdn
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com