似乎是听进去了外界的议论之声，继今年1月10日被评为“史上最冷清”的一届微信公开课后，微信团队决定为上一次不完美的公开课，再补上一课。 3月28日晚，2023微信公开课PRO·微信之约在广州召开，这一次仍没等来张小龙。但与1月份公开课上“各业务线派出一位同事念

近日，2023年的第二场微信公开课正式亮相，在本次公开课上，我们可以看到一些相对亮眼的数据，与此同时，在产品功能和后续的业务规划、思考上，微信也在此次公开课上做了“补充”。一起来看看作者的分析和解读吧。

似乎是听进去了外界的议论之声，继今年1月10日被评为“史上最冷清”的一届微信公开课后，微信团队决定为上一次不完美的公开课，再补上一课。

3月28日晚，2023微信公开课PRO·微信之约在广州召开，这一次仍没等来张小龙。但与1月份公开课上“各业务线派出一位同事念PPT”的拘谨不同，昨晚微信生态内的视频号、小程序、企业微信、微信支付、搜一搜五位业务负责人纷纷亮相，坦诚谈了谈业务逻辑和新打法。

相比年初在线上召开的微信公开课，这场线下的“微信之约”，更像是对此前公开课的一次产品思考的重要补充。

一、几个新变化 1）本次公开课上发布的几个极为有限的亮点数据包括：

过去一年，视频号直播带货销售增长了800%，累计有收入的作者数对比2021年增长2.64倍。消费时长增长3倍，万粉作者增长4倍，主播总收入增长447%。 企业通过企业微信运营私域的成交GMV规模上千亿，运营私域的公司数量增至1200万家。 小程序整体交易规模同比增长40%，单个用户年交易金额增长34%。微信搜一搜MAU破8亿，同比增长54%。 2）视频号延续朴素愿望：绞尽脑汁帮创作者多赚钱

其实这也是去年视频号团队的“许愿”之一，今年只不过延续得更彻底了，今年视频号将计划推出创作者分成计划和付费专区。

创作者分成计划即发布原创视频后，只需开通自动挂广告功能便会产生收益。这个广告不需要像互选广告一样有比较长时间的线下勾兑，会在线上自动完成。只要作者同意在视频评论区里挂载广告，便可以参与广告分成。可以理解为公众号文末下方自动匹配的广告，也可以理解为今日头条的文章点击率的现金奖励计划，这对于不擅长变现的优质内容创作者来说是很大的利好，可以有效减少创作者对广告收益的焦虑，帮助更多优质内容创作者坚持下去。

另一个是即将推出的付费专区订阅功能，虽然官方并未提及关于付费订阅功能的更多细节信息，但从直播介绍截图来看，用户可通过缴纳月费成为会员，获取创作者付费内容专区的专属原创直播、视频、直播回放等。

此外，付费订阅加上私域运营的双轮驱动，这意味着知识博主很可能会在视频号迎来新一轮的狂欢。

3）视频号依旧是“原子化组件”，但也可以是更丰富“个人名片”

本次公开课上，视频号内容负责人张孝超再次重申对视频号角色的基本认知——“原子化组件”，即视频号将作为基础内容的组件，在微信生态内流转。

作为一个内容组件，视频号将自然地与微信生态相融，并与其他组件发生反应，使其自然地在生态中滚动和循环起来，这依旧延续了2年前张小龙提到的“典型的微信style”，这是一种典型的微信style的产品方法，即通过产品而非运营的方法，找到事情的撬动点，通过产品能力让事情运转起来。

同时，视频号也将为个人名片添加更多展现形式，作为微信里唯一一个不添加好友也能看到对方视频号内容的展示窗口，视频号将来还会挂接更多内容，不仅包括现在的短视频、直播，也会支持音乐、长视频和长音频。小宇宙和喜马拉雅等音频软件将面临强敌的新一轮竞争。

4）微信“搜一搜”加足马力，新增“问一问”功能

目前问一问已处于灰度测试阶段，用户能在该功能中提问、回答、可以对答案点赞转发，关注对应用户。有点类似微信里的一个问答板块，会让人联想到百度知道、知乎，还有字节的悟空问答。

把它放在「搜一搜」里，倒也符合逻辑，就是人们有问题有搜索需求的时候，才会打开“搜一搜”，搜索微信生态里的内容，比如公众号文章等。之前更多呈现的是文字或者图文内容。现在视频号视频内容逐渐丰富起来了，微信也期待“问一问”和视频号擦出更多火花。

目前，“问一问”只允许用视频号身份登录，其实也相当于在给视频号导流，让视频号创作者用文字+视频的方式，回答微信用户提出或者搜索的问题，这其实是知乎之前一直想干的事情——鼓励平台上的文字和图文创作者改用视频创作来回答问题，以便跟上现在整个互联网视频化创作的趋势。

但因为还处于内测阶段，目前的“问一问”，无论内容丰富度还是体验，都还比较粗糙。至于未来能否能做出百度知道、知乎或小红书那样甚至超越它们的超级产品还未可知。

二、视频号如星辰，小程序才是大海 腾讯Q4财报的最大亮点，是下面这句话：

小程序和视频号使用时长分别为去年同期的2倍和3倍。

视频号已经从泛资讯的内容生态变得更加多元和丰富，小程序也以最低调的姿态获得了肉眼可见的增长，使用时长超过朋友圈使用时长。

有业内人士分析认为， 比起视频号的增长，小程序的增长更值得重视。 正如 iOS是所有App的集合一样，微信是所有小程序的集合。因此，微信生态内小程序的使用时长同比增长 1倍，背后的生态能力是非常可怕的。

这代表着：微信，这个 iOS、Android中的小的操作系统，正在持续壮大。微信没有操作系统之名，却已有操作系统之实。而且还可能是升级版的操作系统，不仅掌握了iOS、安卓的流量，还掌握了社交关系链。

那么能否提出一种假设，抖音和微信的竞争某种程度上是操作系统的竞争，只不过目前的赛点是短视频，从小程序的增长就会发现，腾讯这个庞然大物也变得更大了。

小程序的世界更是大有可为，例如智能硬件正创造更多交互的可能。在连接控制上，用户能用小程序无感解锁电动汽车，可以不用找车钥匙；也可以借小程序 NFC打开小区楼下的门禁大门，给生活提供更多的便利。控制硬件能力支持轻量配网，连接硬件的框架能力也得到优化，支持车机运行小程序、同一ID多端运行，支持解决各种长尾需求的体验。

而且不仅是企业，普通人也可以轻松玩转小程序服务市场。2022年整体交易额达数万亿元人民币，在2022年第四季，小程序贡献了百分之十几的商业支付金额。

三、健康，但还不够茁壮 这些年来视频号从不同程度表现了自己的佛系和激进，混乱与秩序，但自然地与微信生态相融，并与其他组合相融又谈何容易。

微信十周年时，张小龙曾用两个词来描述微信，一个是连接，一个是简单。“对产品来说，做连接，意味着做服务的底层设施。微信公众号、小程序目标都是连接，连接人和内容、人和服务，包括微信支付也可以认为是一种货币的连接，视频号的目标也是连接。重心不是在做内容，而是在做底层的连接，这很重要。”

另一个词简单，张小龙也反复谈及，“十年来，微信加了很多功能。我很庆幸的是，现在的微信，还几乎和十年前的微信一样简单。虽然比十年前多了非常多功能，但这些功能，已经用最简单的办法上了，所以增加的复杂度会小。简单才会好用。特别是一个产品有十亿人在用的时候”。

今年的微信公开课没有激起张小龙的表达欲，这也许是件好事，意味着一切都还在既定轨道上运行着。

任其徐如林，其疾如风。

作者：熊小宇，编辑：月见

来源公众号：新熵（ID：baoliaohui），洞察商业变量，探寻商业本质。

本文由人人都是产品经理合作媒体 @新熵 授权发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自 Unsplash，基于 CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

最近社交媒体“整活”的矛头好像对准了职场人，《中国工人》杂志公众号都在关注职场“语言后遗症”的问题。 文中的梗引起了大量互联网人的共鸣： “雍和宫偏殿里都是什么菩萨？” “嗯，一些垂直细分领域的菩萨”…… 正所谓一千个人眼中有一千个哈姆雷特，工人杂志看到的是现

如果用雍和宫的菩萨们来比喻，那坐拥8亿日活的抖音就像“主殿”，而它的旁边一直拱卫着不少“奇奇怪怪的知名/不知名APP”。本文作者以其中的青桃和汽水音乐为例，对抖音的“偏殿菩萨”们进行了分析，一起来看一下吧。

最近社交媒体“整活”的矛头好像对准了职场人，《中国工人》杂志公众号都在关注职场“语言后遗症”的问题。

文中的梗引起了大量互联网人的共鸣：

“雍和宫偏殿里都是什么菩萨？”

“嗯，一些垂直细分领域的菩萨”……

正所谓一千个人眼中有一千个哈姆雷特，工人杂志看到的是现代社会中工作对生活的挤压和入侵，而互联网人看到的是灵山的公司构架有可取之处（大雾）。

一、互联网的“雍和宫偏殿”里，都是什么菩萨？ 关于灵山业务结构的调侃自然只是玩笑，但也并不是没有启发。

作为行业观察者，我们早知道有一家大厂是真的喜欢搞“细分领域菩萨”，那就是字节跳动。

坐拥8亿日活的短视频王者抖音就像“主殿”，而它的旁边一直拱卫着不少“奇奇怪怪的知名/不知名APP”，从知名的西瓜视频、抖音火山版、懂车帝、飞书，到不太知名的巨量引擎、小荷医疗等等，总有一批软件的核心卖点上写着“背靠字节”。

抖音的孵化器策略并没有停止，去年上线的音乐平台“汽水音乐”，以及这个月刚刚推出的视频平台“青桃”都进一步丰富了“偏殿菩萨”矩阵。

短视频带来的巨大流量并没有完全被消化，这是抖音“偏殿”的基本逻辑，通过矩阵吸收一部分抖音外溢的流量，或许就可以支撑一款APP从0到1的起势。

譬如汽水音乐，靠着抖音BGM的流量外溢起家，做到了接近千万月活（2022年10月数据），对“互联网小厂”来说已经是个不错的成绩了。

看起来，抖音似乎像是字节跳动在传统RPG网游里开了个大号，随便给点“传家宝”，就可以让小号活得很容易。

然而，也正像网游高手们面对的状况，并不是每一个小号都能练起来。

以两个最受关注的“偏殿菩萨”为例——被称为“抖音版B站”的青桃和被寄予厚望的“汽水音乐”——他们能练好吗？

形势似乎并不那么乐观。

二、只细分，不垂直：抖音偏殿菩萨的隐形天花板 “偏殿菩萨”策略肯定是有合理性的。

一方面，大家都已经意识到了短视频固有的问题，它主要是用来“杀时间”的娱乐形式，制作门槛低，但做出精品很不容易；另一方面，人们投入在短视频上的时间很“松散”。

我们并不能同时关注声音、图像和画面中的文字，也因此略过了许多信息，导致信息效率很低 ，所以在浩浩荡荡的短视频潮流中，其实留下了许多细分赛道产品的空隙。

短视频可以将BGM推成神曲，却无法真正替代专业的音乐APP，因为人们刷短视频时是被BGM影响，而不是主动在听音乐、关注乐曲的信息。

当前抖音有能力制造数十亿播放量的神曲，最终却只能选择向外导流来获取收益和影响力，因为上游（生产制作、版权交易）不在它手里，下游（为音乐花钱的专业用户消费端）也不由它掌握。

这对已然是巨头的字节来说，肯定是不满意的，这是它做音乐版权交易平台“银河方舟”的原因，也是它做“汽水音乐”的原因，试图利用抖音的流量效应，去滋养一系列有竞争力的专业音乐业务，掌握更长的产业链。

战略不无合理性，字节已经是与AT齐肩至顶的巨头，完全可以有这个野心，也承担得起试错成本。

可汽水音乐下一步的问题是，它的撒手锏“抖音外溢”在千万级月活时或许已经差不多用满了，许多人对“汽水音乐”的第一印象都很类似：

酷似抖音的界面逻辑，与抖音曲库直连的方便快捷。

与抖音共享账号、曲库和功能，这在初期是很大的优势，但很难想象它到上亿月活时依然靠此作为第一增长动力。

当然，字节在音乐产业的上游布局也是下了血本，2021年的新闻就披露字节在音乐领域投入超10亿。

在《 中国数字音乐版权：从“独家”时代，进入“独家首发”时代？ 》一文中我们也提到：知情人士透露，抖音往往愿意花网易云音乐等平台两倍甚至更高的价格，购买同一份音乐版权。

但坦率说，在TME和网易云音乐的两强格局中，字节还需要再用好多个10亿，才能缓缓追赶对手已经拥有的海量版权库。

要知道，早在2017年，腾讯音乐为了拿下环球音乐3年版权，就付出了高达3.5亿美元现金加1亿美元股权的价格。

“汽水音乐”也很清楚这一点，主打“独立音乐人”，就是明白短期内没有拼曲库完整度的“内力”，只能用一些别的招式。但是，抖系APP的“招式”有哪些呢？总不能绕来绕去还是算法和 “抖化”……

所以，最值得抖音担心的问题还是：有一天抖音会发现，汽水成长以后，是一个音乐版的自己：算法推荐、上滑换曲、抖音曲库……

偏殿菩萨共享正殿的流量，也继承了同样的消费者画像。

如果不能找到一条真正的差异化路径，汽水音乐会做得越来越像抖音——在它体量小的时候没问题，消化溢出流量、丰富矩阵、增加收益，都是好事。

但如果字节期待这些偏殿中能够出一个拓展流量的“大菩萨”，甚至建造下一个“正殿”的话，就需要注意了。

那些像极了抖音模式的APP，最后冲的是不是抖音自己？

三、“抖音版”APP？无法速成的“差异化” 被称为“抖音版B站”的青桃刚刚起步。

（左图为青桃界面，右图为B站界面）

我们当然乐见更多的互联网APP，毕竟今天行业太需要创新的产品。但从目前来看，也只能说：青桃也有着和汽水音乐类似的问题。

我当然知道它存在的“合理性”，即使现在长视频普遍是“亏钱大户”，但如果有人建议大厂放弃长视频，估计当场就要被叉出去。

短视频不可能永远一统天下，因为没有人真能用半分钟讲完《红楼梦》，曹雪芹活过来也不行。

B站连年亏损，但很少有人觉得它真的要垮，因为朴素的逻辑告诉我们， 如果“大视频时代”真的全面到来，一定会有长视频的位置。

有时候“时长”本身就是一种内容价值，将来无论是VR技术成熟，还是脑机接口突破，新业态的内容生产依然是需要时间来容纳的。

所以，抖音爆火的同时，依然要投入资源维持西瓜、青桃这样的“偏殿”。但是，没有太多特征显示，青桃能从B站口中夺食：无论从业者还是用户，还没有看到青桃令人眼前一亮的特质。

如果仅仅是中长版抖音，就太缺乏吸引力了。B站的核心竞争力“社区生态”，从来不是抖音的强项。

或者可以说，抖音系APP在依托流量迅速崛起的同时，天然缺乏一种“社区基因”。悟空问答抢知乎大V，西瓜视频挖B站UP主……最终结果都一再论证了这一点。

（2020年巫师财经与B站短暂分手）

所谓社区产品，大都需要长期养成，由用户主导内容建设。

抖音那套“通用菩萨平台——垂直细分菩萨平台——菩萨极速版”的流量分发式打法确实很高效，但它只在平台内容和人之间建立了联系，并没有强化人与人之间的粘性，而社区恰恰是由“人—内容—人”的联结方式构成的。

抖音“主殿”的通用菩萨平台都没有构建好这一套关系，又怎么能够传承给它的“偏殿菩萨”呢？

反而是一些在算法上不如抖音先进，甚至形式上感觉“落后”的社区，都在长期养成后具有独特的生态位，视频的B站、图文的小红书，甚至文字起家的知乎，也都在视频潮流下保持了自身的基础流量（相关分析可参看《 B站的转折 》《 被围猎的小红书 》）。

差异化无法速成，这是抖音系APP都要面临的大问题。

四、寻找“南方增长天王” 当然，并不是说抖音就一定无法在垂直细分领域做得更好，只是对于体量已然庞大的巨头，打天下时就带着的“基因”恐怕是很难改变的。

抖音想要寻求未来的流量增长点，似乎应该更改一下从主殿承接流量的“偏殿菩萨矩阵”模式。

其一，擅长短视频，从不意味着要把所有产品都短视频化。

“可颂”去做短图文，成为小红书的追猎者之一，虽然未必能成功，但它至少在一种意义上是有突破的，就是尝试做一个不那么“抖化”的APP。

视频虽然是这个时代里最厉害的“时间杀手”，但它的形态显然还不完整 ，带着抖音标志性的“刷一刷”杀向音频小说等赛道，或许比“刷青桃”“刷音乐”这样在类视频赛道里去卷自己更有前途。

其二，又或者继续向上游进军，也可能是一条出路。

既然抖音已经是神曲的生成器，意味着它掌握了版权的下游渠道，虽然当前音乐版权市场无比昂贵，腾讯网易积累巨大的“吨位优势”，但只要持续投入，同样在流量生意中日进斗金的抖音，未必不能撬动令人恐惧的“版权之墙”。

从这个维度来看，“银河方舟”或许还是值得继续的：平台生意往往要大，但内容生意永远有“小而美”的空间。何况，内容帝国版图，也是一块一块拼出来的。

简单说，对于想要「激发创造，带来欢乐」的抖音而言，不断开拓新边疆是再自然不过的事。只不过，在“偏殿菩萨”矩阵的打造中，还需要更加注重差异化，探索更多不同（而不是相近）的赛道。

流量外溢，让偏殿菩萨在流量KPI上可以很“灵”，可如果过分依赖主殿流量，就永远无法期待它们能在未来成为下一个主殿。

真正的“南方增长天王”在哪里？抖音还需要继续寻找。

作者：河马君  楚青舟

来源公众号：深瞳商业（ID：DEEP-FOCUS）

本文由人人都是产品经理合作媒体 @深瞳商业 授权发布，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

早上好呀，又到周五了！来看看这周发生了什么吧~ 从参加百度智能云闭门交流会客户处获悉，百度正式推出“文心千帆”大模型平台，这是百度面向客户提供企业级大语言模型服务的平台。据了解，文心千帆大模型平台不仅包括文心一言，还包括百度全套文心大模型、相应的开发工具链。未

早上好呀，又到周五了！来看看这周发生了什么吧~

从参加百度智能云闭门交流会客户处获悉，百度正式推出“文心千帆”大模型平台，这是百度面向客户提供企业级大语言模型服务的平台。据了解，文心千帆大模型平台不仅包括文心一言，还包括百度全套文心大模型、相应的开发工具链。未来，文心千帆还会支持第三方的开源大模型。

广州举行的2023微信公开课PRO上，微信“搜一搜”团队宣布，将在微信推出“问一问”搜索功能，输入问题后，汇集答主回答，优质答主的原创内容将优先呈现。业内普遍认为这将是微信版的知乎，未来将对知乎产生一定竞争压力。

一、值得关注 马云谈ChatGPT：要用人工智能去解决问题

据云谷教育官微，马云表示，ChatGPT这一类技术已经对教育带来挑战，但是ChatGPT这一类技术只是AI时代的开始。我们要用人工智能去解决问题，而不是被人工智能所控制，虽然人的体力、脑力比不过机器，但机器只有“芯”，而人有“心”。他说，工业时代是知识驱动，知识的竞争；数字时代，是智慧驱动，是创造力和想象力的竞争，是领导力、担当力、责任的竞争，是独立思考的竞争。

华为盘古大模型4月发布在即，号称超过文心一言最强国产版Chat GPT应用

华为宣布即将推出其最新的盘古大模型4，这是一个超过文心一言的最强国产版ChatGPT应用。据悉，盘古大模型4将是超过任何其他类似应用的最先进、最强大的自然语言处理应用。华为表示，盘古大模型4将是超过文心一言的最强国产版Chat GPT应用，这是对该应用的充分肯定和认可。华为将继续致力于技术创新，不断推进人工智能的发展，为中国乃至全球的数字化转型作出更大的贡献。

阿里组织变革：设立六大业务集团，全面独立经营，或将独立上市

阿里巴巴集团董事会主席兼首席执行官张勇发布全员信，宣布启动“1+6+N”组织变革。在阿里巴巴集团之下，将设立阿里云智能、淘宝天猫商业、本地生活、菜鸟、国际数字商业、大文娱等六大业务集团和多家业务公司。业务集团和业务公司分别成立董事会，实行各业务集团和业务公司董事会领导下的CEO负责制，阿里巴巴集团全面实行控股公司管理。张勇在信中表示：“市场是最好的试金石，未来，具备条件的业务集团和公司，都将有独立融资和上市的可能性。”

马斯克、苹果联合创始人等千名专家发公开信叫停人工智能开发：对社会和人性存潜在风险

包括马斯克、苹果联合创始人斯蒂夫·沃兹尼亚克在内的1000多名人工智能专家和行业高管日前签署了一份公开信，他们呼吁将AI系统的训练暂停六个月，理由是对社会和人性存在潜在风险。他们在公开信中呼吁暂停高级人工智能开发，直至此类设计的共享安全协议经由独立专家开发、实施和审核。此外，他们还在信中呼吁开发人员与政策制定者就治理和监管进行合作。

AIGC人才供需结构失衡，热门技术岗平均百万年薪

据财联社、财新消息，旷视科技CEO印奇表示，“未来中国开发大模型的战役分三个阶段。第一年拼的是融资和技术团队，先跟上ChatGPT；第二个节点是三年左右，需要解决芯片紧缺的问题；第三个阶段则是会在核心应用上决出胜局。”ChatGPT背后的大模型技术是AI领域的决胜点，中国一定要做好卡位，但目前中国市场只是很“热”，还没有完全“相信”。市场应当在做大模型的技术路线上达成共识，并充分认知技术难度、关键节点和攻克的重要性。

二、产品动态 百度推出企业级大模型服务平台“文心千帆”

从参加百度智能云闭门交流会客户处获悉，百度正式推出“文心千帆”大模型平台，这是百度面向客户提供企业级大语言模型服务的平台。据了解，文心千帆大模型平台不仅包括文心一言，还包括百度全套文心大模型、相应的开发工具链。未来，文心千帆还会支持第三方的开源大模型。在收费模式上，文心千帆的推理服务调用以0.012元/1000 tokens收费，按调用输入输出总字数付费。

京东云首次发布数智平台“优加”

京东云2023品牌增长峰会在上海举行，都市丽人、伽蓝集团、LVMH、林清轩等品牌嘉宾分享实践经验。会上，京东云锚定DaaS新赛道，发布开放的数智平台优加，以及1+3+N全景图。该平台定位于全场景、全渠道、一体化，融合京东大数据能力、 智能算法、系统软件工具，面向品牌增长。

腾讯宣布推出微信版知乎 “问一问”搜索功能即将上线

广州举行的2023微信公开课PRO上，微信“搜一搜”团队宣布，将在微信推出“问一问”搜索功能，输入问题后，汇集答主回答，优质答主的原创内容将优先呈现。业内普遍认为这将是微信版的知乎，未来将对知乎产生一定竞争压力。

视频号将发布付费订阅功能

2023微信公开课PRO·微信之约直播开讲。会上视频号公布了包括付费订阅功能与“原创权益”扶持等多项产品计划，未来将支持创作者设立付费内容专区，同时提供包括评论区广告分成、原创内容保护等功能。

360发布中国版ChatGPT产品“360搜索”

在2023数字安全与发展高峰论坛上，360集团创始人周鸿祎发布了关于大语言模型的中国版ChatGPT产品。在现场演示环节，当提出问题“梅西在阿根廷国家队进了几个球”时，360AI给出的答案是:100个球。三六零集团创始人周鸿祎表示，360在发展人工智能大语言模型上具备数据获取和处理的工程化能力、人工知识训练、场景三大核心优势，将坚持“两翼齐飞”战略，先占据场景，同步发力核心算法技术。在To C端，将推出新一代智能搜索引擎，并基于搜索场景推出人工智能个人助理类产品；To SME端，将基于生成式大模型推出SaaS化垂直应用；To G&To B端，360计划结合数字安全业务推出企业私有化AI服务。

三、运营动态 支付宝：今年超百亿资金资源专项支持服务商

支付宝平台宣布，升级生态服务商助力体系：通过技术支持、产品开放、培训体系、流量开放、现金和政策助力、市场推广资源等6大支持，帮服务商实现快速冷启动、精准获客和提高商业变现能力。据了解，整个助力计划现金部分加上流量扶持等政策，整体预计超过100亿。另外，平台与服务商全年计划共建1000个有规模化商业潜力的数字化解决方案，提升服务商市场竞争力。

2022年快手总营收达942亿元，净亏损136.9亿元

财报显示，2022年快手总营收达942亿元，同比增长16.2%；净亏损136.9亿元，上年同期净亏损780.8亿元。2022年全年，快手国内业务在经营层面实现盈利，经营利润达1.92亿元，集团经调整后EBITDA实现转正，达18.1亿。2021年同期，国内业务经营亏损为86.8亿元。2022年全年，快手海外业务经营亏损66亿元，同比收窄44.7%。

微信公众平台推迟模板消息内容规范措施生效日期

据界面新闻，3月30日，微信公众平台运营中心发布公告称，根据用户的反馈与建议，同时为了给予开发者更充裕的时间，平台现对原计划今天生效的模板消息内容规范措施进行调整，将于2023年5月4日起去除尾部/备注内容、自定义颜色、表情符号、首行内容。此措施不会影响模板消息下发，自5月4日起，当公众号进行模板消息下发时，平台会自动去掉相关内容。

ForecastWatch气象权威评测：墨迹天气中国区天气预报准确率斩获全球第一

国际权威气象服务评测机构ForecastWatch最新评测结果显示，墨迹天气在中国区1-3天综合预报准确率（高温、低温、晴雨、风速）排名第一，同时高温、风速单项预测准确率方面排名第一。该结果是ForecastWatch对全球22家天气服务提供商的天气预报数据进行分析后得出的。据介绍，墨迹天气在数值模式-EC欧洲中心的预报数据基础上，针对中国地区进行了数据同化和算法优化，并组建运营小组，监控预报准确率，持续输出高准确率的预报产品。

掌阅科技：正在接入AI大模型进行内容生成的Prompt Engineering工作

掌阅科技在互动平台表示，公司正在接入AI大模型进行内容生成的Prompt Engineering工作，公司将利用在内容版权资源、创作者生态、海量用户资源、数字阅读场景等方面的优势，在内容生产、营销推广、丰富产品形态等多方面加大投入力度，不断探索新的商业模式。

四、好文推荐 《年轻人逃离大厂，如同80后逃离北上广》作者@瑞瑞女士

编辑推荐：今年的招聘市场从开年以来就颇为不乐观，岗位减少、薪酬降低、裁员，曾经的金三银四变成铜墙铁壁。而在这样的环境下，大厂的生存状况也不乐观，一些年轻人甚至主动离开大厂，寻求更广阔的职业发展。本文作者采访了几位离开大厂的年轻人，一起来听听他们的故事。

>>>点击此处立即跳转阅读

《共享单车，怎么越来越难骑了？》作者@Norah

编辑推荐：作为解决出行“最后一公里”的便捷选择之一，相信许多人都曾使用过共享单车。但在网络平台上，有关“共享单车难骑”的声音已经越来越多。难道曾经疯狂跑马圈地的共享单车行业在经历大洗牌之后，留给用户的体验没有更好，只有更差？

>>>点击此处立即跳转阅读

《1年100场直播，我们收获了什么？》作者@韩叙

编辑推荐：在做直播的过程中，有很多真切的感受，慢慢地也会成为习惯。本文作者基于自己100场直播的经验，分享了所得的收获与感悟，并对如何长期发展提出了自己的观点，希望对你有帮助。

>>>点击此处立即跳转阅读

五、精彩问答 Q：通勤路上沿街取咖啡，这个服务你看好吗？

3月21日，星巴克中国与高德地图宣布，双方合作推出的“沿街取”服务已正式上线。该服务主要面向在通勤高峰、繁忙路段有咖啡需求的司机或乘客，顾客只需提前在高德地图App上设置好目的地和沿途取餐点，届时摇下车窗就能拿到星巴克咖啡师递来的咖啡。这个服务，你看好吗，为什么？

欢迎来围观：点击此处，前往回答

 

本文值得关注、产品动态、运营动态内容，综合选取自泡面小镇微信公众号、财联社

问题来自人人都是产品经理旗下问答平台 ——  天天问 ，欢迎各位小伙伴前往交流、切磋~

前言随着互联网的不断发展，设计师和开发人员之间的界限越来越模糊。在过去，设计师只需要关注设计方面的工作，而开发人员只需要关注编程方面的工作。但现在，设计师需要具备一定的开发知识，以便更好地与开发人员合作，共同完成项目。

前言

随着互联网的不断发展，设计师和开发人员之间的界限越来越模糊。在过去，设计师只需要关注设计方面的工作，而开发人员只需要关注编程方面的工作。但现在， 设计师 需要具备一定的开发知识，以便更好地与开发人员合作，共同完成项目。接下来讲一些基础知识拆分为车架/外壳/动力系统进行讲解，希望通过具象化的策略帮助各位同行理解前端知识。

更多前端知识：

想让设计落地效果更好？5分钟帮你掌握前端基础知识！ 编者按：设计师应该学习哪些前端基础知识，才能和工程师顺畅沟通？

阅读文章 >

一、设计师理解开发知识的难点 设计师可能不熟悉开发中使用的技术术语和概念，例如编程语言、技术框架、数据库等。这些术语和概念对于开发人员来说非常熟悉，但对于设计师来说可能比较陌生，需要花费一定的时间和精力去理解。

设计师可能对于某些技术实现的复杂性感到困惑或者无从下手。例如，设计师可能不了解如何使用代码实现某个功能，或者不知道如何集成不同的技术框架。这些问题需要通过学习和实践来逐步解决。

设计师可能无法理解开发人员使用的术语和技术，而开发人员可能难以理解设计师的想法和需求。在这种情况下，需要通过积极的沟通和协作来解决问题。

很多时候无法理解某些技术在实际应用中的优缺点，以及如何解决实际问题。在这种情况下，需要通过实践和学习来积累经验，并且与开发人员保持合作，共同解决问题。 在实际工作中，设计师需要不断学习和掌握开发知识，以便更好地与开发人员协作，完成项目的开发和实现。同时，设计师也需要保持开放的心态和积极的态度，不断学习和探索，提高自己的专业素养和实践能力。

二、基础认知 常见的 WEB 端的基础开发分为 HTML，CSS 以及 JavaScript：

HTML：方便对网页的结构进行调整，这里具象化为车架还有底盘。 CSS：需要了解网页样式，例如：字体大小，颜色等等。这里具象为车。 JavaScript 基础：UI 设计师需要了解 JavaScript 的基本语法和常用 API，以便在设计过程中实现一些简单的交互效果和动画效果。这里比喻为发动机和传动系统。 三、车架+底盘 HTML 是 HyperText Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。HTML 使用一系列标记（tag）来描述网页中的各种元素，例如文本、图像、链接、表格等等，通过浏览器解析这些标记，最终呈现出整个网页的样式和内容。HTML 标记通常由一对尖括号（< >）和一个标记名组成，名通常表示标记的类型，例如表示一个 HTML 文档的开始，表示文档的头部，表示文档的主体部分。

除了标记名之外，标记还可以包含一些属性，用于描述标记的一些特性和属性。例如，标记用于插入图像，可以包含 src（图像的 URL）、alt（图像的说明文字）等属性。HTML 标记语言非常强大和灵活，可以通过各种标记和属性来实现各种不同的功能和效果，例如创建表格、列表、链接、表单等等。同时，HTML 也是一门相对容易学习的编程语言，可以为初学者提供一个良好的入门门槛，帮助他们了解网页开发的基础知识和技能。

三、车身 CSS 是 Cascading Style Sheets（层叠样式表）的缩写，是一种用于描述网页样式的语言。CSS 可以为 HTML 文档中的各种元素（包括文本、图像、背景等）定义不同的样式和布局，从而改变它们在浏览器中的外观和行为。CSS 中的样式通常由一对花括号（{ }）和一些属性-值对组成，例如：

plaintextCopy code h1 { color: red; font-size: 24px; }{{{pre> 这个样式表示将所有的 h1 标题颜色设为红色，字体大小为 24 像素。其中，color 和 font-size 是样式属性，red 和 24px 则是对应属性的值。这些属性和值的组合可以控制元素的字体、颜色、边框、内边距、外边距、定位等等方面的样式。CSS 还支持选择器的使用，可以根据元素的标签名、类名、ID 等属性来选择特定的元素，并对其应用样式。例如：

plaintextCopy code p { color: blue; }{{{pre> 这个样式表示将所有的 p 段落文字颜色设为蓝色。而如果想仅对 class 为 content 的元素应用样式，可以这样写：

plaintextCopy code .content { font-size: 16px; }{{{pre> CSS 的强大和灵活性使得它成为现代网页设计中不可或缺的一部分。通过 CSS，设计师和开发人员可以轻松地控制网页中各个元素的外观和行为，从而实现丰富多样的视觉效果和交互特性。

除了基础的样式，还有栅格系统和开发的布局方式。

四、常规的网页布局 1. 盒模型布局：

基于盒模型的布局方式，即将网页上的每个元素看作一个盒子，通过设置盒子的宽、高、内边距、外边距、边框等属性，来控制元素在网页上的布局。

2. 浮动布局：

通过设置元素的浮动属性，使元素脱离文档流，从而实现多列布局等效果。

3. 定位布局：

通过设置元素的定位属性，来控制元素在网页上的位置，常用的有相对定位、绝对定位和固定定位等。

4. 弹性布局：

基于 CSS3 弹性盒子布局模型，通过设置元素的弹性属性，来实现网页的自适应布局。

5. 网格布局：

基于 CSS3 网格布局模型，通过设置网格列数和行数，以及各个网格元素的位置和大小，来实现网页的复杂布局效果。

五、栅格栏 前端中的栅格布局可以通过使用 CSS 框架来实现，比如 Bootstrap、Foundation 等。这些框架都提供了栅格系统的封装，使得开发者可以通过简单的 HTML 和 CSS 代码，实现网页的栅格布局。 以 Bootstrap 为例，它的栅格系统基于一个 12 列的网格布局，可以通过在 HTML 中使用

编辑导读：导航栏是用户对产品架构了解的第一途径，是作为产品各个功能之间的桥梁，能够对产品功能进行分发、引导。本文作者以 B 端产品的导航栏为例，对其进行分析，希望对你有帮助。相关干货：5000字干货！

编辑导读：导航栏是用户对产品架构了解的第一途径，是作为产品各个功能之间的桥梁，能够对产品功能进行分发、引导。本文作者以 B 端产品的导航栏为例，对其进行分析，希望对你有帮助。

相关干货：

5000字干货！全方位掌握「导航栏设计」知识点！ 前言 APP 的顶部导航栏（以下简称“导航栏”）对我们来说再熟悉不过了，它是 UI 设计中必不可少的组成部分，几乎每一个页面都会使用到。

阅读文章 >

一、定义 B 端导航栏，是 B 端产品最重要的模块，对于大多数用户来说，使用 B 端产品主要是对具体功能进行操作，而导航栏作为产品各个功能的桥梁，他的作用是对产品功能进行分发、引导，让用户可以高效、准确的在各模块间穿梭。

导航栏的作用可以归纳为以下 4 点：

作用一：这里有什么，告诉用户这里有些什么，导航栏通过将功能结构可视化的方法，告知用户产品有哪些功能；

作用二：我在哪里，确定用户的位置，好的导航会告诉用户当前所处位置，避免迷路；

作用三：怎么去，告诉用户如何使用，好的导航能够帮助用户规划行程，执行完这一步操作后，下一步该去哪操作，帮用户快速找到所需内容；

作用四：怎么回，告诉用户怎么返回，逆向导航，告知用户路径或者规划好用户的返回路径，让用户可以无感回到起始页面。

二、菜单 B 端产品设计中，导航栏是功能菜单的载体，核心是功能。因此在进行 导航栏设计 时，一个非常重要的前提就是要对菜单进行规划，整理。

1. 菜单的历史变迁

2. 整理菜单

导航栏设计，必然要满足 “导航” 这个核心目标，组件的样式、交互必须为功能服务。通常情况下，导航是反映产品功能模块的入口，产品中包含多少模块、子模块，就需要有序的布置到导航里面。我们可以通过思维导图的将菜单罗列出来，思维导图能解释不同功能层级的结构和从属关系，尤其是当菜单数量多，且层级超过两级的时候，思维导图就显得很有必要了。

理想状态下，导航菜单建议最多不要超过 9 个，最少不要低于 5 个。

根据“7±2 原则”描述明确到：在导航菜单当中，超过 9 个会给用户查找时带来困难，低于 5 个说明导航菜单的分配效率不够高效。但在实际业务中，很多时候会超过 9 个菜单，这时需要对菜单进行分组，因为导航过多，用户寻找会十分迷茫，通过分组的方式，能够对菜单进行再次分类，提高查找效率。

7±2 原则解释：1956 年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有 7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

3. 菜单的深度和广度

当菜单广度过大，我们也能够通过设计的方法来优化导航菜单，

方法一：增加搜索栏，筛选菜单；

方法二：千人千面，据用户角色的不同，展示不同的菜单，大部分 B 端用户并不需要使用到全部功能菜单，管理员可以根据自身公司的业务不同，给用户配置出不同的角色权限予以满足用户的导航需求，这样在设计层面上能够减少很多不必要的麻烦。

某云目前拥有大概 100+功能，这些都需要在导航菜单上显示，因此在导航设计上，它的模式是：全部菜单导航+搜索菜单

4. 导航菜单不能隐藏超过两级

导航菜单隐藏超过两级时，代表着产品在用户的使用规划中，没有深入思考整个用户体验，导航菜单层级越多，用户查找就会越慢，有一些三级导航的菜单，会通过设计优化来实现隐藏导航的合并，从而减少用户操作负担。

三、导航 1. 导航栏-PC

多种导航栏类型，该如何选择？功能型产品适合侧边导航，侧边导航效率高、迟疑和错误更少，用户也普遍比较喜欢，信息型产品适合顶部导航，比如门户网站。

Jennifer Rose Kingsburg 曾经对网页的三级菜单导航进行过一份研究，结论是左侧导航相对顶部导航优点更多些

① 侧边导航栏

将菜单栏放置在左侧，页面布局上基本为左右结构，侧边导航在国内产品中最为常见，国内厂商对于侧边栏导航的尤为偏爱，也就造成了现在 B 端产品的发展也逐渐趋同。

那么为什么国内 B 端为什么大多数是侧边导航栏呢？我把这种现象归纳为以下 3 个原因：

原因一：中文文字宽度较短，侧边导航能最大发挥出他的优势，能最大限度减少空间的使用率；

原因二：国内的业务复杂，以及对于扩展性的要求较高，每个企业都想做一个又大又全的产品，因此侧边导航栏更加适合国内的实际需求；

原因三：一级导航在左侧时，效率高、迟疑和错误更少，用户追求的是使用产品完成目标任务，注重的是功能完整性和操作便捷性。

② 顶部导航栏

将菜单栏放置在顶部，页面布局上基本为上下结构，顶部导航早期出现于各类门户网站，比如企业官网，各种咨询类的网站经常会采取这样的导航形式。顶部导航通常在 B 端产品中也是十分常见的，但还是以国外产品最为集中。

③ 混合导航栏

将顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部，通过一级菜单的点击后，展示侧边的二、三级菜单。在一些产品拥有复杂的逻辑关系，菜单之间关系分明的产品中，混合导航也是一个不错的选择。

2. 导航栏-APP

① 拇指热区

移动端的交互都在手掌上完成，因此，在对移动端产品进行设计时，手势是不可忽略的一部分。

拇指热区概念来源于交互大神 Steve Hoober 的一个观察实验，他发现在手机大屏时代，大部分的用户是以下图的方式抓握手机：以拇指的底部为支点，抵在手机的右下角。

设计导航系统的时候，也会遵循拇指热区的原则，把主要功能放在绿色区域，辅助功能放在黄色或者红色区域。

② 底部导航栏

APP 最常使用的导航模式，用于一级目录的导航，位于页面底部，无论用户单手还是双手操作都能轻松点击，能告诉用户当前位置及用户切换统一层级之间的不同模块。底部 Tab 栏具有很强的包容性，可以形成最基本的信息框架，然后用其他的导航模式来承载具体的功能和内容。展现形式有文字 + icon，也有纯 icon 形式，大部分是文字+icon，可能是减少用户记忆负担。

优点：可以在第一时间让用户了解使用频率最高、最重要的功能和信息，同时能够支持用户在不同模块之间的快速切换。

缺点：底部导航栏超过 5 个就容易引起误点操作，同时在底部会占据一定的屏幕空间。

③ 底部（舵式）拓展栏

为了突出中间的功能，把 Tab 做的比较突出，鼓励用户更多使用该功能。常见的 APP 如某鱼、某乎等使用了这种导航栏，把第三个 Tab 标签做的更加突出，放进了一些常用的功能。

优点：可以提高导航栏趣味性，让用户贡献更多的内容。

缺点：此类导航也是一种二级导航，既然是重要功能为什么会放在二级导航呢？把重要功能放在二级界面，会增加用户的记忆负担以及操作负担。

④ 顶部 Tab 栏

用于展示同一模块下不同类别的信息或者筛选不用模块的信息，一般二级导航且支持左右滑动。

优点：可以很好地扁平化信息层级，让用户可以迅速实现同一模块下不同类别信息之间的切换并且不会迷失方向。

缺点：位于顶部切换起来不是很方便，同时占据空间，导致屏幕可展现区域变少。

⑤ 侧边（矩式）导航栏

通常针对产品偏沉浸式阅读的情况下使用，主导航模块切换频率低，放入其中的模块使用频率低。常与底部标签式导航组合使用，将一级页面内的信息再细分，给人以清晰的呈现方式。通过把非核心功能的低频操作都放到一个抽屉里，使得用户获得沉浸式的体验，而且能够集中用户的注意力，让用户去更好地完成核心功能，不被打扰。

优点：用户可以将注意力放在首页，减少其他类型的导航带来分散用户注意力的情况，给用户更沉浸式的操作感和阅读感，同时可以最大限度利用屏幕空间。

缺点：侧边导航属于二级导航，用户使用的频率会降低，不利于产品页面流量的最大化，越放在下面的功能点击率越低，如果产品框架比较大，有很多功能需要推广时，一般不用此类导航。

⑥ 列表式导航栏

通常用来展示某个具体模块内容的信息进行分类，以列表的形式呈现大量的条目。多用于辅助主导航来展现信息甚至更多层次的内容，有时候需要一些提示信息。

优点：

列表式结构具有很强的延展性，调整的弹性高，菜单的排序更符合人的阅读习惯，它的导航效率高；

可以引入字母索引，在菜单很多时对菜单进行二次分类。

缺点：

承载的信息种类比较单一，容易引起用户的单调感，很难让用户长时间停留，如果列表中蕴含的信息量比较庞大，往往需要加入搜索功能或者索引，否则用户会遇到寻找信息的困难。

⑦ 宫格式导航栏

一般作为信息或平台的入口，为产品或项目信息提供聚合的载体，适合承载订阅类产品或众多属性差异非常明显的分类信息，此类导航信息的呈现内容比较少，但是每个项目选取的效率比较高。

优点：

可以通过入口来进行流量的分发，具有较强的延展性，可以无限扩展内容； 可以划分多个内容、多个模式，由不同团队独立开发每个模块再聚合。 缺点：

宫格式结构是信息或平台的入口，所以具体的信息往往隐藏在下一级界面，用户无法第一时间看到信息，会增加用户的认知成本； 同时多个入口的情况下用户选择压力大，不同入口之间缺乏联动性，有可能会增加用户的操作。

⑧ 卡片式导航栏

宫格式导航的一种延展形式，通过增加内容的可视化程度让每个条目呈现更多的信息。它能根据页面内容的变化及时更新图片，适合以图片为主的内容，像新闻、美食、旅行、视频图片等经常使用，常作为二级导航。

优点：对运营量的要求比较低，而且单个条目的转化率会相应的提高。

缺点：当运营量较大的时候，这种结构会降低用户寻找信息的效率。

⑨ 轮播（平铺）式导航

适用于足够扁平化的内容和随意浏览的阅读模式，将所有信息平铺在一个页面，很容易带来高大上的视觉体验。

优点：最大程度的保证了页面的简洁性和内容的完整性，且一般都会结合滑动切换的手势，操作起来也非常方便。

缺点：用户只能切换的相邻页面，很难跳转到非相邻的页面，容易迷失位置。

四、设计落地-以 PC 端为例 1. 第一步：整理层级框架

制定出一个能满足层级显示和操作的交互结构出来，值得注意的是，导航选项中，并不是所有的选项都是用来跳转的，有的菜单是用来辅助区分内容和用来展开的，我们可以在菜单上标注说明。

2. 第二步：思维导图提取信息

现状：一级菜单 11 个，二级菜单 37 个，最多有三级，产品经理反馈二期会有新增功能

分析：一级菜单目前 11 个已经超过顶部导航的显示范围，且后续会不定数量新增，考虑到导航的扩展性及容纳性，侧边导航可能更适合产品本身

3. 第三步：设计导航栏

整理好上方的内容层级，到具体设计步骤里，首先要做的，就是制定出一个能满足层级显示和操作的交互结构出来。

再整理一遍，侧边栏的内容包含：

不可点击的分类标题 可以展开的一级分类 可以实现跳转的一级分类 可以点击的二级分类 而可交互的元素，对应的交互状态就包括：

鼠标悬浮一级菜单样式 鼠标悬浮二级菜单样式 选中一级分类，一级分类高亮 展开一级并选中二级分类，二级分类高亮 先用原型做个示意，它的状态包含了默认、选中一级、选中二级三种情况：

4. 第四步：导航栏的选中样式

菜单的选中样式是指示用户当前所处位置的重要因素

设计时要注意：

子级和父级之间的区分 悬停状态与选中状态的区分 如果有悬停展开的子级，就要注意，显示悬停菜单时，一级菜单尽量不出现背景填充的样式。

5. 第五步：功能拓展

前面提到，产品二期会有新功能上线，后面还会有三期、四期…需要考虑导航栏的可拓展性，功能太多该怎么调整？

思考方向：侧栏如何容纳超过一屏的菜单？如何快速找到我想要的功能？

解决方案 1：单一用户或角色所需要使用的功能菜单一般只有几个，管理员可以针对角色或用户进行权限配置，特定角色展示特定菜单；

解决方案 2：可以增加搜索栏，对菜单进行快速查找。

6. 最后落地

通过上述的分析与整理，便得出能满足我们现有功能的导航栏。

注意踩坑：如果一种导航模式用起来不够好用，是否需要在重构时切换到另外一种模式呢？根据 Jira 的用户测试 ，95% 的老用户对于这种情况会感到非常迷惑，即使是再小的导航功能修改都可能直接影响到大量用户的日常使用，因此不管哪种导航模式，一旦选定，尽量不要改变，所以在选择使用何种导航时，一定要结合产品的特性来谨慎选择。

五、逆向导航 横向导航和前进导航分别指引用户操作的水平渐进和层级渐进，逆向导航则负责对反向轨迹进行定义和实施，三者结合，实现对页面的全局操控。

PC 产品，通过页面常驻的导航栏+面包屑+浏览器的返回键，用户可以很轻易地返回或者向上跳转。相较之下，移动端的逆向导航需要进行更多的设计。后面的讨论以移动端为例。

逆向导航的概念官方定义出自 Material Design：从用户行为维度，分成三类：Lateral navigation（横向导航）、Forward navigation（前进导航）以及 Reverse navigation（逆向导航）

1. 什么时候需要逆向导航？

2. 反向导航的设计要点

① 逻辑：操作闭环

不管是由用户还是系统触发，都必须保留回退的通路。使用过程中不能给用户留下死胡同、断头路。

② 体验：满足预期

在完成第一步的基础上，需要对反向导航做更多的思考。

当用户进入比较深的页面，并不一定希望按照顺序依次返回。 当任务流结束的时候，用户更期待返回“首页”,而不是“上一页”。 90%的情况下，我们可以用 “从哪来回哪去“的方式满足需求。但是在 B 端产品中，容易出现链条很长的任务流，用户一个页面一个页面地操作，最后完成提交或者保存。这时候用户进入层级太深，“逐层返回“的方式就不太合适了，回到首页更符合用户的预期。

六、结束语 工作中还有很多可以进行深入研究的地方，这里就说到这，文中如有不当的地方，欢迎大家一起交流。

上次的基础教程反响还不错，自己也有了继续写下去的动力。最近工作小忙，只能每天抽空写一点。肝了一周，终于是拿出跟大家见面了，希望能带给你一点点小小的帮助~超详细！

上次的基础教程反响还不错，自己也有了继续写下去的动力。最近工作小忙，只能每天抽空写一点。肝了一周，终于是拿出跟大家见面了，希望能带给你一点点小小的帮助~

超详细！AI 绘画神器 Midjourney 基础使用手册 一、前提条件 需要魔法： 新用户可免费创作 25 张图片，超过需要办会员 版权问题：会员生成的图片版权归创作者所有 Midjourney相关资讯： 二、注册/链接 服务器 温馨提示：下方多图预警 1. 注册、创建服务器 ① 打开Midjourney官网，右下角选择"J

阅读文章 >

声明

因为我也处于学习阶段，一些案例也是其他博主那里学习来的。但为了尽可能不出错，每个案例都是自己尝试了很多次后才拿出来的。挑选了几个效果比较好，使用场景较高的类型来给友友们分享。希望大家喜欢，后续还会一直研究下去~

好了，废话不多说，直入正题~

下面是用来提升画面质量的关键词，大家想要出图更精细可以酌情添加，教程案例中就不单独讲解了~

一、通用场景模版 1. 具象描述法：

*模版只是列举了常用的几类关键词，大家根据实际情况自行加减即可

句式：

「媒介」+「画面风格」+「画面主体」+「画面环境」+「光照」+「色彩」+「视角」+「渲染方式」+「出图质量」+「官方指令」

以什么为媒介出图？（雕塑、油画、手稿...[非必要]） 用什么风格出图？（插画、漫画、照片...） 画面主体是什么？（人、物品、动物...） 主体材质是什么？（黏土、模型、玻璃...[非必要]） 主体之外的环境？（卧室、森林、城市...） 主环境打什么光？（柔和光、荧光、工作室灯光...） 整体色调什么样？（高饱和、柔和的颜色、蓝色调...） 用什么视角出图？（全景图、透视、轴测图...） 例子1：

译：插画，赛博朋克，一个身穿夹克的老人在街道上捡垃圾，废墟，霓虹灯冷光，鸟瞰图，虚幻引擎，8k 质量 ,渲染质量 2Illustration, Cyberpunk, an old man in a jacket picking up garbage on the street, ruins, neon cold lighting, aerial view, Unreal Engine, 8k --q 2

例子2：

译：中国油画，一个带着白色帽子的少女，在乡间小路上，道路两旁是向日葵，柔和的光，暖色调，透视，8k，高品质，杰作 --q 2 --v 5In Chinese oil painting, a young girl with a white hat is on a rural road flanked by sunflowers, with soft light, warm colors, and perspective,8k,hyper quality，high detail，masterpiece --q 2 --v 5

2. 抽象描述法：

*这种方法不需要描述具体的事物，只通过描述一个场景的情绪氛围和故事来进行出图

句式：

「故事场景」+「画面情绪」+「电影关键词」+「摄影关键词」

「年代」加上年代，可以让出图更具有特定的年代氛围；

「摄影」加上摄影的关键词，诸如相机型号或镜头参数，可以让出图更真实；

「电影」加上一些电影关键词，诸如电影艺术，电影色彩可以让出图有电影的质感。

例子 1：（*来源网上，亲测）

译：台湾爱情剧中的感人时刻，深情的爱情，深情的角色，艺术的摄影作品，充满活力的城市生活，引人入胜的对话，复杂的爱情故事--v 5Touching moment in Taiwanese romance drama, deep affection, soulful characters, artistic camera work, vibrant city life, engaging conversation,complex love story--v 5

例子 2：（*来源网上，亲测）

译：台湾年轻人一起欢笑和行走的动态镜头，时尚的街头服饰，夜市场景，索尼 A7 III，电影色彩 Dynamic shot of Taiwanese young people laughing and walking together, stylish streetwear, night market scene, Sony A7 III, cinematic colors --v 5

二、通用人物模版 这里主要讲人物，所以背景就以 pure white background（纯白色背景，方便后期抠图）

1. 基础人物生成

句式：

「年龄」 + 「性别」 + 「人种」+ 「身体特征」 + 「衣着描述」 + 「拍摄视角」

例子：

译：50 岁，中国，大妈，卷发，金色耳环，褶皱的衣服，刺绣夹克，棕色棉裤，卷发，老人鞋，纯白背景，摄影，（全身镜头），正视图，8k，超高质量 画面比例 1:2，v 5a 50-year-old Chinese woman, gold earrings, wrinkled clothes, warm embroidered jacket, brown cotton pants, curly hair, old people’s shoes, pure white background, photography,(FULL SHOT) ,Front view,8k,hyper quality --ar 1:2 --v 5

下面是关于整个人物视角和拍摄角度的关键词：

2. 卡通 IP 类人物

*不喂图就需要更多关键词来约束画面，大家可以酌情选择两种方法，或者结合使用效果更佳~

方法 1：关键词直接生成

句式：

「人物描述」+「关键词」

译：泡泡玛特女孩，中国人，棕色卷发，黑色大眼镜，兔子鞋，柔和的颜色，实物模型，精细的光泽，干净的背景，3D 渲染，软焦，oc，搅拌机，IP，最佳质量，8k-v 5girl by pop mart,chinese,Brown curlyhair,black bigglasses,Rabbit shoes,(FLS),pastel color,mockup,fine luster,clean background,3D render,Soft focus,oc,blender,IP,best quality,8k --v 5

方法 2：喂图+关键词

句式：

「参考图」+「人物描述」+「关键词」

① 找参考图

去找几张预期风格的图3~5张即可

② 描述主体人物

参考基础人物句式，此处不做赘述

③ 加风格关键词

soft color,model, fineluster,clean background, 3D*其他什么渲染器之类的都不用加，更具有质感一些。

例子1：

译：女医生，戴着护士帽和口罩，穿着白色外套，戴着听诊器，向前看，颜色柔和，模型，光泽细腻，背景干净，3D

Female doctor, wearing a nurse's cap and mask, wearing a white coat, and wearing a stethoscope,Look ahead,soft color,model, fineluster,clean background, 3D --v 5

例子 2：

译：女孩，棕色头发，戴着眼镜，拿着一本书，颜色柔和，模特，光泽细腻，背景干净，3D

Girl, brown hair, wearing glasses, holding a book,soft color,model, fineluster,clean background, 3D --v 5

例子 3：

想要更风格化一点，可以加上「by pop mart」

译：泡泡玛特制成的女孩，棕色头发，戴着眼镜，拿着一本书，颜色柔和，模特，光泽细腻，背景干净，3D

Girl by pop mart, brown hair, wearing glasses, holding a book,soft color,model, fineluster,clean background, 3D

例子 4：

如果还不够，可以把喂的图换一下，或者通过「--iw 0.5」命令降低参考图的权重

换了参考图，同样的关键词，出图↓↓↓

做头像：

当然，如果你想用真人照片来生成卡通头像，就用「真人照片」+「照片描述」+「方法 1 的关键词」来处理即可，下面是我拿自己照片头像生成的（ps：就不露脸~），还不错。大家自行尝试。↓↓↓

总结：

细心的友友可能发现了我刚开始喂的图其实也是 AI 生成的。这就要给大家提个醒了，在玩的过程中如果生成了自己比较满意的图，一定要记得存起来。下次想要同种类型的就可以直接拿来喂图，效果要比重新找的好很多哟~

三、3D 建模类型 1. 基础模版

主打的就是大道至简，用最少的关键词，出最好的效果。

句式：

「3d」+「画面主体」+「灯光」+「渲染器」

以下是示例：

① oc渲染：3d,air blower,Soft Lights,octane render

② blender渲染：3d,air blower,Soft Lights,blender

③ 换个灯光：3d,air blower,neon cold lighting,blender

了解基本组成后，就可以随意组合灯光和渲染关键词喽，其实也可以将所有渲染器都加到后面来出图的，例如上面的 oc 和 blender 可以同时添加，大家可以自行尝试。

2. 最简单的建模质感

低多边形「low poly」

没错，只需要这一个关键词，出来的结果就类似于 3d 里的低模渲染，很适合做一些小物品和场景，再也不用吭哧吭哧建模了

例子①：low poly，airplane

例子②：Low poly, Swimming pool, volleyball, swimming circle

例子③：low poly,Office area, computer, keyboard, mouse

效果就不多说了，有目共睹，这么简单粗暴，赶紧玩起来吧！

四、APP 图标 经过很多测试，目前 3d 风格的效果还不戳，其他的出来结果都不咋地

句式：

「app icon 」+「主体」+「风格」+「dribble,pinterest,Clean background,Minimalist」

解释：

app icon 定义图标，dribble，Pinterest 是给定参考，Minimalis 是极简主义，干净背景是为了后期抠图，以下是示例：

① 3d图标：isometric 3d

例子：app icon,isometric 3d,Water cup,pinterest,dribble,Clean background,minimalist --q 2 --c 100

② 渐变图标：gradient

例子：app icon,gradient,Water cup,pinterest,dribble,Clean background,minimalist --q 2 --c 100

③ 扁平图标：flat

例子：app icon,flat,Water cup,pinterest,dribble,Clean background,minimalist --q 2 --c 100

五、特写镜头 关键词：closeup view（特写）FHD（全高清）

*适用于一些产品特写，微观景物的镜头，精密器械的出图

例子 1：

*这是 V5 刚出来时生成的第一张图，整个被震惊到，大家自行体会下↓↓↓

译：一份中等程度的牛排，上面放着盐和薯条，特写镜头，FHD--ar 1:1--v 5A steak medium rare with salt and chips on top, extreme closeup view, FHD --ar 1:1 --v 5

例子 2：

根据这个关键词思路，尝试了其他的

译：黑色入耳式耳机，哑光磨砂外壳，极致特写，FHD--q 2--v 5Black over-ear headphones with matte frosted shell,extreme closeup view, FHD --q 2 --v 5

例子 3：

译：一只由精密机械制成的苍蝇，特写，FHD-q-v-5a fly made of precision mechs,closeup view, FHD --q 2 --v 5

六、喂图思路 1. 确认需求

需要一张科技感的隧洞来做动效的背景

2. 找参考

花瓣等网站找到 1-2 张大概的样式参考

3. 关键词分析

描述画面：赛博朋克风格，方形隧道，纵深，霓虹冷光，凹凸不平，科技。关键词：cyberpunk style, square tunnel, depth, neon cold lighting,undulation,technology 加细节和官方命令：high detail,8k --ar 1:2 --q 2 --v 5 控制参考图权重：--iw 0.8（我找的这张跟我预期很贴近，所以我就不设置了，默认是 1）

4. 生成结果

图片链接+关键词+官方命令

5. 选一张自己满意的即可

以上是我工作时的一个实例，只是给大家提供一个思路。想要同样「风格」「配色」「构图」「材质」等等都可以按照这个思路来喂图，在你可以找到画面参考图的情况下，参考图+关键词可以帮你事半功倍。更多例子：

最后总结 喂图：看完整套教程大家可能发现了，很多地方我都用到了喂图。学会喂图，是非常重要的一个midjourney技能，可以令出图质量和效果更加贴切自己的预期，所以在使用过程中灵活的喂图，能达到事半功倍的效果。

方法：分享我对关键词的学习方法，当我看到其他人的关键词分享，我都会大胆的去举一反三脑洞大开。例如这个效果是用在景物身上的，那我试试用在生成人像图什么效果。虽说是AI出图，大家的想象力和思路才是更重要的，这样我们才能将每个关键词利用到极致，也是一种高效的学习方法。

思路：在看教程时注意方法，关键词其实很多，不可能一一列举。咱们主要学的是基础的句式语法，就好比主谓宾宾状补一样。掌握了基本句式和描述方法，就可以通过现有的关键词进行自由搭配组合了，旨在教会大家一个关键词思路和方法。就不多啰嗦了，后面如果有新研究，会再分享，感谢观看~

「腾讯文档」midjourney 关键词汇总（持续更新）： https://docs.qq.com/sheet/DTHRpUkRZeEpmSEVn

提高3倍效率！能落地的AI绘画&设计系统课来了！ 如何快速入门AI绘画和AI设计？

阅读文章 >

前言随着互联网的不断发展，设计师和开发人员之间的界限越来越模糊。在过去，设计师只需要关注设计方面的工作，而开发人员只需要关注编程方面的工作。但现在，设计师需要具备一定的开发知识，以便更好地与开发人员合作，共同完成项目。

前言

随着互联网的不断发展，设计师和开发人员之间的界限越来越模糊。在过去，设计师只需要关注设计方面的工作，而开发人员只需要关注编程方面的工作。但现在， 设计师 需要具备一定的开发知识，以便更好地与开发人员合作，共同完成项目。接下来讲一些基础知识拆分为车架/外壳/动力系统进行讲解，希望通过具象化的策略帮助各位同行理解前端知识。

更多前端知识：

想让设计落地效果更好？5分钟帮你掌握前端基础知识！ 编者按：设计师应该学习哪些前端基础知识，才能和工程师顺畅沟通？

阅读文章 >

一、设计师理解开发知识的难点 设计师可能不熟悉开发中使用的技术术语和概念，例如编程语言、技术框架、数据库等。这些术语和概念对于开发人员来说非常熟悉，但对于设计师来说可能比较陌生，需要花费一定的时间和精力去理解。

设计师可能对于某些技术实现的复杂性感到困惑或者无从下手。例如，设计师可能不了解如何使用代码实现某个功能，或者不知道如何集成不同的技术框架。这些问题需要通过学习和实践来逐步解决。

设计师可能无法理解开发人员使用的术语和技术，而开发人员可能难以理解设计师的想法和需求。在这种情况下，需要通过积极的沟通和协作来解决问题。

很多时候无法理解某些技术在实际应用中的优缺点，以及如何解决实际问题。在这种情况下，需要通过实践和学习来积累经验，并且与开发人员保持合作，共同解决问题。 在实际工作中，设计师需要不断学习和掌握开发知识，以便更好地与开发人员协作，完成项目的开发和实现。同时，设计师也需要保持开放的心态和积极的态度，不断学习和探索，提高自己的专业素养和实践能力。

二、基础认知 常见的 WEB 端的基础开发分为 HTML，CSS 以及 JavaScript：

HTML：方便对网页的结构进行调整，这里具象化为车架还有底盘。 CSS：需要了解网页样式，例如：字体大小，颜色等等。这里具象为车。 JavaScript 基础：UI 设计师需要了解 JavaScript 的基本语法和常用 API，以便在设计过程中实现一些简单的交互效果和动画效果。这里比喻为发动机和传动系统。 三、车架+底盘 HTML 是 HyperText Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。HTML 使用一系列标记（tag）来描述网页中的各种元素，例如文本、图像、链接、表格等等，通过浏览器解析这些标记，最终呈现出整个网页的样式和内容。HTML 标记通常由一对尖括号（< >）和一个标记名组成，名通常表示标记的类型，例如表示一个 HTML 文档的开始，表示文档的头部，表示文档的主体部分。

除了标记名之外，标记还可以包含一些属性，用于描述标记的一些特性和属性。例如，标记用于插入图像，可以包含 src（图像的 URL）、alt（图像的说明文字）等属性。HTML 标记语言非常强大和灵活，可以通过各种标记和属性来实现各种不同的功能和效果，例如创建表格、列表、链接、表单等等。同时，HTML 也是一门相对容易学习的编程语言，可以为初学者提供一个良好的入门门槛，帮助他们了解网页开发的基础知识和技能。

三、车身 CSS 是 Cascading Style Sheets（层叠样式表）的缩写，是一种用于描述网页样式的语言。CSS 可以为 HTML 文档中的各种元素（包括文本、图像、背景等）定义不同的样式和布局，从而改变它们在浏览器中的外观和行为。CSS 中的样式通常由一对花括号（{ }）和一些属性-值对组成，例如：

plaintextCopy code h1 { color: red; font-size: 24px; }{{{pre> 这个样式表示将所有的 h1 标题颜色设为红色，字体大小为 24 像素。其中，color 和 font-size 是样式属性，red 和 24px 则是对应属性的值。这些属性和值的组合可以控制元素的字体、颜色、边框、内边距、外边距、定位等等方面的样式。CSS 还支持选择器的使用，可以根据元素的标签名、类名、ID 等属性来选择特定的元素，并对其应用样式。例如：

plaintextCopy code p { color: blue; }{{{pre> 这个样式表示将所有的 p 段落文字颜色设为蓝色。而如果想仅对 class 为 content 的元素应用样式，可以这样写：

plaintextCopy code .content { font-size: 16px; }{{{pre> CSS 的强大和灵活性使得它成为现代网页设计中不可或缺的一部分。通过 CSS，设计师和开发人员可以轻松地控制网页中各个元素的外观和行为，从而实现丰富多样的视觉效果和交互特性。

除了基础的样式，还有栅格系统和开发的布局方式。

四、常规的网页布局 1. 盒模型布局：

基于盒模型的布局方式，即将网页上的每个元素看作一个盒子，通过设置盒子的宽、高、内边距、外边距、边框等属性，来控制元素在网页上的布局。

2. 浮动布局：

通过设置元素的浮动属性，使元素脱离文档流，从而实现多列布局等效果。

3. 定位布局：

通过设置元素的定位属性，来控制元素在网页上的位置，常用的有相对定位、绝对定位和固定定位等。

4. 弹性布局：

基于 CSS3 弹性盒子布局模型，通过设置元素的弹性属性，来实现网页的自适应布局。

5. 网格布局：

基于 CSS3 网格布局模型，通过设置网格列数和行数，以及各个网格元素的位置和大小，来实现网页的复杂布局效果。

五、栅格栏 前端中的栅格布局可以通过使用 CSS 框架来实现，比如 Bootstrap、Foundation 等。这些框架都提供了栅格系统的封装，使得开发者可以通过简单的 HTML 和 CSS 代码，实现网页的栅格布局。 以 Bootstrap 为例，它的栅格系统基于一个 12 列的网格布局，可以通过在 HTML 中使用

编辑导读：导航栏是用户对产品架构了解的第一途径，是作为产品各个功能之间的桥梁，能够对产品功能进行分发、引导。本文作者以 B 端产品的导航栏为例，对其进行分析，希望对你有帮助。相关干货：5000字干货！

编辑导读：导航栏是用户对产品架构了解的第一途径，是作为产品各个功能之间的桥梁，能够对产品功能进行分发、引导。本文作者以 B 端产品的导航栏为例，对其进行分析，希望对你有帮助。

相关干货：

5000字干货！全方位掌握「导航栏设计」知识点！ 前言 APP 的顶部导航栏（以下简称“导航栏”）对我们来说再熟悉不过了，它是 UI 设计中必不可少的组成部分，几乎每一个页面都会使用到。

阅读文章 >

一、定义 B 端导航栏，是 B 端产品最重要的模块，对于大多数用户来说，使用 B 端产品主要是对具体功能进行操作，而导航栏作为产品各个功能的桥梁，他的作用是对产品功能进行分发、引导，让用户可以高效、准确的在各模块间穿梭。

导航栏的作用可以归纳为以下 4 点：

作用一：这里有什么，告诉用户这里有些什么，导航栏通过将功能结构可视化的方法，告知用户产品有哪些功能；

作用二：我在哪里，确定用户的位置，好的导航会告诉用户当前所处位置，避免迷路；

作用三：怎么去，告诉用户如何使用，好的导航能够帮助用户规划行程，执行完这一步操作后，下一步该去哪操作，帮用户快速找到所需内容；

作用四：怎么回，告诉用户怎么返回，逆向导航，告知用户路径或者规划好用户的返回路径，让用户可以无感回到起始页面。

二、菜单 B 端产品设计中，导航栏是功能菜单的载体，核心是功能。因此在进行 导航栏设计 时，一个非常重要的前提就是要对菜单进行规划，整理。

1. 菜单的历史变迁

2. 整理菜单

导航栏设计，必然要满足 “导航” 这个核心目标，组件的样式、交互必须为功能服务。通常情况下，导航是反映产品功能模块的入口，产品中包含多少模块、子模块，就需要有序的布置到导航里面。我们可以通过思维导图的将菜单罗列出来，思维导图能解释不同功能层级的结构和从属关系，尤其是当菜单数量多，且层级超过两级的时候，思维导图就显得很有必要了。

理想状态下，导航菜单建议最多不要超过 9 个，最少不要低于 5 个。

根据“7±2 原则”描述明确到：在导航菜单当中，超过 9 个会给用户查找时带来困难，低于 5 个说明导航菜单的分配效率不够高效。但在实际业务中，很多时候会超过 9 个菜单，这时需要对菜单进行分组，因为导航过多，用户寻找会十分迷茫，通过分组的方式，能够对菜单进行再次分类，提高查找效率。

7±2 原则解释：1956 年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有 7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

3. 菜单的深度和广度

当菜单广度过大，我们也能够通过设计的方法来优化导航菜单，

方法一：增加搜索栏，筛选菜单；

方法二：千人千面，据用户角色的不同，展示不同的菜单，大部分 B 端用户并不需要使用到全部功能菜单，管理员可以根据自身公司的业务不同，给用户配置出不同的角色权限予以满足用户的导航需求，这样在设计层面上能够减少很多不必要的麻烦。

某云目前拥有大概 100+功能，这些都需要在导航菜单上显示，因此在导航设计上，它的模式是：全部菜单导航+搜索菜单

4. 导航菜单不能隐藏超过两级

导航菜单隐藏超过两级时，代表着产品在用户的使用规划中，没有深入思考整个用户体验，导航菜单层级越多，用户查找就会越慢，有一些三级导航的菜单，会通过设计优化来实现隐藏导航的合并，从而减少用户操作负担。

三、导航 1. 导航栏-PC

多种导航栏类型，该如何选择？功能型产品适合侧边导航，侧边导航效率高、迟疑和错误更少，用户也普遍比较喜欢，信息型产品适合顶部导航，比如门户网站。

Jennifer Rose Kingsburg 曾经对网页的三级菜单导航进行过一份研究，结论是左侧导航相对顶部导航优点更多些

① 侧边导航栏

将菜单栏放置在左侧，页面布局上基本为左右结构，侧边导航在国内产品中最为常见，国内厂商对于侧边栏导航的尤为偏爱，也就造成了现在 B 端产品的发展也逐渐趋同。

那么为什么国内 B 端为什么大多数是侧边导航栏呢？我把这种现象归纳为以下 3 个原因：

原因一：中文文字宽度较短，侧边导航能最大发挥出他的优势，能最大限度减少空间的使用率；

原因二：国内的业务复杂，以及对于扩展性的要求较高，每个企业都想做一个又大又全的产品，因此侧边导航栏更加适合国内的实际需求；

原因三：一级导航在左侧时，效率高、迟疑和错误更少，用户追求的是使用产品完成目标任务，注重的是功能完整性和操作便捷性。

② 顶部导航栏

将菜单栏放置在顶部，页面布局上基本为上下结构，顶部导航早期出现于各类门户网站，比如企业官网，各种咨询类的网站经常会采取这样的导航形式。顶部导航通常在 B 端产品中也是十分常见的，但还是以国外产品最为集中。

③ 混合导航栏

将顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部，通过一级菜单的点击后，展示侧边的二、三级菜单。在一些产品拥有复杂的逻辑关系，菜单之间关系分明的产品中，混合导航也是一个不错的选择。

2. 导航栏-APP

① 拇指热区

移动端的交互都在手掌上完成，因此，在对移动端产品进行设计时，手势是不可忽略的一部分。

拇指热区概念来源于交互大神 Steve Hoober 的一个观察实验，他发现在手机大屏时代，大部分的用户是以下图的方式抓握手机：以拇指的底部为支点，抵在手机的右下角。

设计导航系统的时候，也会遵循拇指热区的原则，把主要功能放在绿色区域，辅助功能放在黄色或者红色区域。

② 底部导航栏

APP 最常使用的导航模式，用于一级目录的导航，位于页面底部，无论用户单手还是双手操作都能轻松点击，能告诉用户当前位置及用户切换统一层级之间的不同模块。底部 Tab 栏具有很强的包容性，可以形成最基本的信息框架，然后用其他的导航模式来承载具体的功能和内容。展现形式有文字 + icon，也有纯 icon 形式，大部分是文字+icon，可能是减少用户记忆负担。

优点：可以在第一时间让用户了解使用频率最高、最重要的功能和信息，同时能够支持用户在不同模块之间的快速切换。

缺点：底部导航栏超过 5 个就容易引起误点操作，同时在底部会占据一定的屏幕空间。

③ 底部（舵式）拓展栏

为了突出中间的功能，把 Tab 做的比较突出，鼓励用户更多使用该功能。常见的 APP 如某鱼、某乎等使用了这种导航栏，把第三个 Tab 标签做的更加突出，放进了一些常用的功能。

优点：可以提高导航栏趣味性，让用户贡献更多的内容。

缺点：此类导航也是一种二级导航，既然是重要功能为什么会放在二级导航呢？把重要功能放在二级界面，会增加用户的记忆负担以及操作负担。

④ 顶部 Tab 栏

用于展示同一模块下不同类别的信息或者筛选不用模块的信息，一般二级导航且支持左右滑动。

优点：可以很好地扁平化信息层级，让用户可以迅速实现同一模块下不同类别信息之间的切换并且不会迷失方向。

缺点：位于顶部切换起来不是很方便，同时占据空间，导致屏幕可展现区域变少。

⑤ 侧边（矩式）导航栏

通常针对产品偏沉浸式阅读的情况下使用，主导航模块切换频率低，放入其中的模块使用频率低。常与底部标签式导航组合使用，将一级页面内的信息再细分，给人以清晰的呈现方式。通过把非核心功能的低频操作都放到一个抽屉里，使得用户获得沉浸式的体验，而且能够集中用户的注意力，让用户去更好地完成核心功能，不被打扰。

优点：用户可以将注意力放在首页，减少其他类型的导航带来分散用户注意力的情况，给用户更沉浸式的操作感和阅读感，同时可以最大限度利用屏幕空间。

缺点：侧边导航属于二级导航，用户使用的频率会降低，不利于产品页面流量的最大化，越放在下面的功能点击率越低，如果产品框架比较大，有很多功能需要推广时，一般不用此类导航。

⑥ 列表式导航栏

通常用来展示某个具体模块内容的信息进行分类，以列表的形式呈现大量的条目。多用于辅助主导航来展现信息甚至更多层次的内容，有时候需要一些提示信息。

优点：

列表式结构具有很强的延展性，调整的弹性高，菜单的排序更符合人的阅读习惯，它的导航效率高；

可以引入字母索引，在菜单很多时对菜单进行二次分类。

缺点：

承载的信息种类比较单一，容易引起用户的单调感，很难让用户长时间停留，如果列表中蕴含的信息量比较庞大，往往需要加入搜索功能或者索引，否则用户会遇到寻找信息的困难。

⑦ 宫格式导航栏

一般作为信息或平台的入口，为产品或项目信息提供聚合的载体，适合承载订阅类产品或众多属性差异非常明显的分类信息，此类导航信息的呈现内容比较少，但是每个项目选取的效率比较高。

优点：

可以通过入口来进行流量的分发，具有较强的延展性，可以无限扩展内容； 可以划分多个内容、多个模式，由不同团队独立开发每个模块再聚合。 缺点：

宫格式结构是信息或平台的入口，所以具体的信息往往隐藏在下一级界面，用户无法第一时间看到信息，会增加用户的认知成本； 同时多个入口的情况下用户选择压力大，不同入口之间缺乏联动性，有可能会增加用户的操作。

⑧ 卡片式导航栏

宫格式导航的一种延展形式，通过增加内容的可视化程度让每个条目呈现更多的信息。它能根据页面内容的变化及时更新图片，适合以图片为主的内容，像新闻、美食、旅行、视频图片等经常使用，常作为二级导航。

优点：对运营量的要求比较低，而且单个条目的转化率会相应的提高。

缺点：当运营量较大的时候，这种结构会降低用户寻找信息的效率。

⑨ 轮播（平铺）式导航

适用于足够扁平化的内容和随意浏览的阅读模式，将所有信息平铺在一个页面，很容易带来高大上的视觉体验。

优点：最大程度的保证了页面的简洁性和内容的完整性，且一般都会结合滑动切换的手势，操作起来也非常方便。

缺点：用户只能切换的相邻页面，很难跳转到非相邻的页面，容易迷失位置。

四、设计落地-以 PC 端为例 1. 第一步：整理层级框架

制定出一个能满足层级显示和操作的交互结构出来，值得注意的是，导航选项中，并不是所有的选项都是用来跳转的，有的菜单是用来辅助区分内容和用来展开的，我们可以在菜单上标注说明。

2. 第二步：思维导图提取信息

现状：一级菜单 11 个，二级菜单 37 个，最多有三级，产品经理反馈二期会有新增功能

分析：一级菜单目前 11 个已经超过顶部导航的显示范围，且后续会不定数量新增，考虑到导航的扩展性及容纳性，侧边导航可能更适合产品本身

3. 第三步：设计导航栏

整理好上方的内容层级，到具体设计步骤里，首先要做的，就是制定出一个能满足层级显示和操作的交互结构出来。

再整理一遍，侧边栏的内容包含：

不可点击的分类标题 可以展开的一级分类 可以实现跳转的一级分类 可以点击的二级分类 而可交互的元素，对应的交互状态就包括：

鼠标悬浮一级菜单样式 鼠标悬浮二级菜单样式 选中一级分类，一级分类高亮 展开一级并选中二级分类，二级分类高亮 先用原型做个示意，它的状态包含了默认、选中一级、选中二级三种情况：

4. 第四步：导航栏的选中样式

菜单的选中样式是指示用户当前所处位置的重要因素

设计时要注意：

子级和父级之间的区分 悬停状态与选中状态的区分 如果有悬停展开的子级，就要注意，显示悬停菜单时，一级菜单尽量不出现背景填充的样式。

5. 第五步：功能拓展

前面提到，产品二期会有新功能上线，后面还会有三期、四期…需要考虑导航栏的可拓展性，功能太多该怎么调整？

思考方向：侧栏如何容纳超过一屏的菜单？如何快速找到我想要的功能？

解决方案 1：单一用户或角色所需要使用的功能菜单一般只有几个，管理员可以针对角色或用户进行权限配置，特定角色展示特定菜单；

解决方案 2：可以增加搜索栏，对菜单进行快速查找。

6. 最后落地

通过上述的分析与整理，便得出能满足我们现有功能的导航栏。

注意踩坑：如果一种导航模式用起来不够好用，是否需要在重构时切换到另外一种模式呢？根据 Jira 的用户测试 ，95% 的老用户对于这种情况会感到非常迷惑，即使是再小的导航功能修改都可能直接影响到大量用户的日常使用，因此不管哪种导航模式，一旦选定，尽量不要改变，所以在选择使用何种导航时，一定要结合产品的特性来谨慎选择。

五、逆向导航 横向导航和前进导航分别指引用户操作的水平渐进和层级渐进，逆向导航则负责对反向轨迹进行定义和实施，三者结合，实现对页面的全局操控。

PC 产品，通过页面常驻的导航栏+面包屑+浏览器的返回键，用户可以很轻易地返回或者向上跳转。相较之下，移动端的逆向导航需要进行更多的设计。后面的讨论以移动端为例。

逆向导航的概念官方定义出自 Material Design：从用户行为维度，分成三类：Lateral navigation（横向导航）、Forward navigation（前进导航）以及 Reverse navigation（逆向导航）

1. 什么时候需要逆向导航？

2. 反向导航的设计要点

① 逻辑：操作闭环

不管是由用户还是系统触发，都必须保留回退的通路。使用过程中不能给用户留下死胡同、断头路。

② 体验：满足预期

在完成第一步的基础上，需要对反向导航做更多的思考。

当用户进入比较深的页面，并不一定希望按照顺序依次返回。 当任务流结束的时候，用户更期待返回“首页”,而不是“上一页”。 90%的情况下，我们可以用 “从哪来回哪去“的方式满足需求。但是在 B 端产品中，容易出现链条很长的任务流，用户一个页面一个页面地操作，最后完成提交或者保存。这时候用户进入层级太深，“逐层返回“的方式就不太合适了，回到首页更符合用户的预期。

六、结束语 工作中还有很多可以进行深入研究的地方，这里就说到这，文中如有不当的地方，欢迎大家一起交流。

上次的基础教程反响还不错，自己也有了继续写下去的动力。最近工作小忙，只能每天抽空写一点。肝了一周，终于是拿出跟大家见面了，希望能带给你一点点小小的帮助~超详细！

上次的基础教程反响还不错，自己也有了继续写下去的动力。最近工作小忙，只能每天抽空写一点。肝了一周，终于是拿出跟大家见面了，希望能带给你一点点小小的帮助~

超详细！AI 绘画神器 Midjourney 基础使用手册 一、前提条件 需要魔法： 新用户可免费创作 25 张图片，超过需要办会员 版权问题：会员生成的图片版权归创作者所有 Midjourney相关资讯： 二、注册/链接 服务器 温馨提示：下方多图预警 1. 注册、创建服务器 ① 打开Midjourney官网，右下角选择"J

阅读文章 >

声明

因为我也处于学习阶段，一些案例也是其他博主那里学习来的。但为了尽可能不出错，每个案例都是自己尝试了很多次后才拿出来的。挑选了几个效果比较好，使用场景较高的类型来给友友们分享。希望大家喜欢，后续还会一直研究下去~

好了，废话不多说，直入正题~

下面是用来提升画面质量的关键词，大家想要出图更精细可以酌情添加，教程案例中就不单独讲解了~

一、通用场景模版 1. 具象描述法：

*模版只是列举了常用的几类关键词，大家根据实际情况自行加减即可

句式：

「媒介」+「画面风格」+「画面主体」+「画面环境」+「光照」+「色彩」+「视角」+「渲染方式」+「出图质量」+「官方指令」

以什么为媒介出图？（雕塑、油画、手稿...[非必要]） 用什么风格出图？（插画、漫画、照片...） 画面主体是什么？（人、物品、动物...） 主体材质是什么？（黏土、模型、玻璃...[非必要]） 主体之外的环境？（卧室、森林、城市...） 主环境打什么光？（柔和光、荧光、工作室灯光...） 整体色调什么样？（高饱和、柔和的颜色、蓝色调...） 用什么视角出图？（全景图、透视、轴测图...） 例子1：

译：插画，赛博朋克，一个身穿夹克的老人在街道上捡垃圾，废墟，霓虹灯冷光，鸟瞰图，虚幻引擎，8k 质量 ,渲染质量 2Illustration, Cyberpunk, an old man in a jacket picking up garbage on the street, ruins, neon cold lighting, aerial view, Unreal Engine, 8k --q 2

例子2：

译：中国油画，一个带着白色帽子的少女，在乡间小路上，道路两旁是向日葵，柔和的光，暖色调，透视，8k，高品质，杰作 --q 2 --v 5In Chinese oil painting, a young girl with a white hat is on a rural road flanked by sunflowers, with soft light, warm colors, and perspective,8k,hyper quality，high detail，masterpiece --q 2 --v 5

2. 抽象描述法：

*这种方法不需要描述具体的事物，只通过描述一个场景的情绪氛围和故事来进行出图

句式：

「故事场景」+「画面情绪」+「电影关键词」+「摄影关键词」

「年代」加上年代，可以让出图更具有特定的年代氛围；

「摄影」加上摄影的关键词，诸如相机型号或镜头参数，可以让出图更真实；

「电影」加上一些电影关键词，诸如电影艺术，电影色彩可以让出图有电影的质感。

例子 1：（*来源网上，亲测）

译：台湾爱情剧中的感人时刻，深情的爱情，深情的角色，艺术的摄影作品，充满活力的城市生活，引人入胜的对话，复杂的爱情故事--v 5Touching moment in Taiwanese romance drama, deep affection, soulful characters, artistic camera work, vibrant city life, engaging conversation,complex love story--v 5

例子 2：（*来源网上，亲测）

译：台湾年轻人一起欢笑和行走的动态镜头，时尚的街头服饰，夜市场景，索尼 A7 III，电影色彩 Dynamic shot of Taiwanese young people laughing and walking together, stylish streetwear, night market scene, Sony A7 III, cinematic colors --v 5

二、通用人物模版 这里主要讲人物，所以背景就以 pure white background（纯白色背景，方便后期抠图）

1. 基础人物生成

句式：

「年龄」 + 「性别」 + 「人种」+ 「身体特征」 + 「衣着描述」 + 「拍摄视角」

例子：

译：50 岁，中国，大妈，卷发，金色耳环，褶皱的衣服，刺绣夹克，棕色棉裤，卷发，老人鞋，纯白背景，摄影，（全身镜头），正视图，8k，超高质量 画面比例 1:2，v 5a 50-year-old Chinese woman, gold earrings, wrinkled clothes, warm embroidered jacket, brown cotton pants, curly hair, old people’s shoes, pure white background, photography,(FULL SHOT) ,Front view,8k,hyper quality --ar 1:2 --v 5

下面是关于整个人物视角和拍摄角度的关键词：

2. 卡通 IP 类人物

*不喂图就需要更多关键词来约束画面，大家可以酌情选择两种方法，或者结合使用效果更佳~

方法 1：关键词直接生成

句式：

「人物描述」+「关键词」

译：泡泡玛特女孩，中国人，棕色卷发，黑色大眼镜，兔子鞋，柔和的颜色，实物模型，精细的光泽，干净的背景，3D 渲染，软焦，oc，搅拌机，IP，最佳质量，8k-v 5girl by pop mart,chinese,Brown curlyhair,black bigglasses,Rabbit shoes,(FLS),pastel color,mockup,fine luster,clean background,3D render,Soft focus,oc,blender,IP,best quality,8k --v 5

方法 2：喂图+关键词

句式：

「参考图」+「人物描述」+「关键词」

① 找参考图

去找几张预期风格的图3~5张即可

② 描述主体人物

参考基础人物句式，此处不做赘述

③ 加风格关键词

soft color,model, fineluster,clean background, 3D*其他什么渲染器之类的都不用加，更具有质感一些。

例子1：

译：女医生，戴着护士帽和口罩，穿着白色外套，戴着听诊器，向前看，颜色柔和，模型，光泽细腻，背景干净，3D

Female doctor, wearing a nurse's cap and mask, wearing a white coat, and wearing a stethoscope,Look ahead,soft color,model, fineluster,clean background, 3D --v 5

例子 2：

译：女孩，棕色头发，戴着眼镜，拿着一本书，颜色柔和，模特，光泽细腻，背景干净，3D

Girl, brown hair, wearing glasses, holding a book,soft color,model, fineluster,clean background, 3D --v 5

例子 3：

想要更风格化一点，可以加上「by pop mart」

译：泡泡玛特制成的女孩，棕色头发，戴着眼镜，拿着一本书，颜色柔和，模特，光泽细腻，背景干净，3D

Girl by pop mart, brown hair, wearing glasses, holding a book,soft color,model, fineluster,clean background, 3D

例子 4：

如果还不够，可以把喂的图换一下，或者通过「--iw 0.5」命令降低参考图的权重

换了参考图，同样的关键词，出图↓↓↓

做头像：

当然，如果你想用真人照片来生成卡通头像，就用「真人照片」+「照片描述」+「方法 1 的关键词」来处理即可，下面是我拿自己照片头像生成的（ps：就不露脸~），还不错。大家自行尝试。↓↓↓

总结：

细心的友友可能发现了我刚开始喂的图其实也是 AI 生成的。这就要给大家提个醒了，在玩的过程中如果生成了自己比较满意的图，一定要记得存起来。下次想要同种类型的就可以直接拿来喂图，效果要比重新找的好很多哟~

三、3D 建模类型 1. 基础模版

主打的就是大道至简，用最少的关键词，出最好的效果。

句式：

「3d」+「画面主体」+「灯光」+「渲染器」

以下是示例：

① oc渲染：3d,air blower,Soft Lights,octane render

② blender渲染：3d,air blower,Soft Lights,blender

③ 换个灯光：3d,air blower,neon cold lighting,blender

了解基本组成后，就可以随意组合灯光和渲染关键词喽，其实也可以将所有渲染器都加到后面来出图的，例如上面的 oc 和 blender 可以同时添加，大家可以自行尝试。

2. 最简单的建模质感

低多边形「low poly」

没错，只需要这一个关键词，出来的结果就类似于 3d 里的低模渲染，很适合做一些小物品和场景，再也不用吭哧吭哧建模了

例子①：low poly，airplane

例子②：Low poly, Swimming pool, volleyball, swimming circle

例子③：low poly,Office area, computer, keyboard, mouse

效果就不多说了，有目共睹，这么简单粗暴，赶紧玩起来吧！

四、APP 图标 经过很多测试，目前 3d 风格的效果还不戳，其他的出来结果都不咋地

句式：

「app icon 」+「主体」+「风格」+「dribble,pinterest,Clean background,Minimalist」

解释：

app icon 定义图标，dribble，Pinterest 是给定参考，Minimalis 是极简主义，干净背景是为了后期抠图，以下是示例：

① 3d图标：isometric 3d

例子：app icon,isometric 3d,Water cup,pinterest,dribble,Clean background,minimalist --q 2 --c 100

② 渐变图标：gradient

例子：app icon,gradient,Water cup,pinterest,dribble,Clean background,minimalist --q 2 --c 100

③ 扁平图标：flat

例子：app icon,flat,Water cup,pinterest,dribble,Clean background,minimalist --q 2 --c 100

五、特写镜头 关键词：closeup view（特写）FHD（全高清）

*适用于一些产品特写，微观景物的镜头，精密器械的出图

例子 1：

*这是 V5 刚出来时生成的第一张图，整个被震惊到，大家自行体会下↓↓↓

译：一份中等程度的牛排，上面放着盐和薯条，特写镜头，FHD--ar 1:1--v 5A steak medium rare with salt and chips on top, extreme closeup view, FHD --ar 1:1 --v 5

例子 2：

根据这个关键词思路，尝试了其他的

译：黑色入耳式耳机，哑光磨砂外壳，极致特写，FHD--q 2--v 5Black over-ear headphones with matte frosted shell,extreme closeup view, FHD --q 2 --v 5

例子 3：

译：一只由精密机械制成的苍蝇，特写，FHD-q-v-5a fly made of precision mechs,closeup view, FHD --q 2 --v 5

六、喂图思路 1. 确认需求

需要一张科技感的隧洞来做动效的背景

2. 找参考

花瓣等网站找到 1-2 张大概的样式参考

3. 关键词分析

描述画面：赛博朋克风格，方形隧道，纵深，霓虹冷光，凹凸不平，科技。关键词：cyberpunk style, square tunnel, depth, neon cold lighting,undulation,technology 加细节和官方命令：high detail,8k --ar 1:2 --q 2 --v 5 控制参考图权重：--iw 0.8（我找的这张跟我预期很贴近，所以我就不设置了，默认是 1）

4. 生成结果

图片链接+关键词+官方命令

5. 选一张自己满意的即可

以上是我工作时的一个实例，只是给大家提供一个思路。想要同样「风格」「配色」「构图」「材质」等等都可以按照这个思路来喂图，在你可以找到画面参考图的情况下，参考图+关键词可以帮你事半功倍。更多例子：

最后总结 喂图：看完整套教程大家可能发现了，很多地方我都用到了喂图。学会喂图，是非常重要的一个midjourney技能，可以令出图质量和效果更加贴切自己的预期，所以在使用过程中灵活的喂图，能达到事半功倍的效果。

方法：分享我对关键词的学习方法，当我看到其他人的关键词分享，我都会大胆的去举一反三脑洞大开。例如这个效果是用在景物身上的，那我试试用在生成人像图什么效果。虽说是AI出图，大家的想象力和思路才是更重要的，这样我们才能将每个关键词利用到极致，也是一种高效的学习方法。

思路：在看教程时注意方法，关键词其实很多，不可能一一列举。咱们主要学的是基础的句式语法，就好比主谓宾宾状补一样。掌握了基本句式和描述方法，就可以通过现有的关键词进行自由搭配组合了，旨在教会大家一个关键词思路和方法。就不多啰嗦了，后面如果有新研究，会再分享，感谢观看~

「腾讯文档」midjourney 关键词汇总（持续更新）： https://docs.qq.com/sheet/DTHRpUkRZeEpmSEVn

提高3倍效率！能落地的AI绘画&设计系统课来了！ 如何快速入门AI绘画和AI设计？

阅读文章 >