此次我将按照不同受众用户，进行 哔哩哔哩 产品设计 细节分析，一起来看 B 站在往多元化发展的设计发力点都有哪些。

往期回顾：

音乐体验天花板！14个网易云音乐的情感化设计细节 一款口碑两极分化的软件。

阅读文章 >

事先声明 /attention。

强烈建议使用电脑查看， 用户体验 更佳。 Gif 体积较大，请耐心查看。 为了让设计细节更容易被看到，用 GIf 来呈展示。 前言 众所周知，B 站是一个二次元、鬼畜、学习、娱乐等等于一身的综合视频社区。近 82%的用户是 Z 世代用户（90-09 年出生的人群），他们也是生长在互联网下的一代人。用户规模与活跃度都持续高位，除了其产品侧的发力，设计中的体验感知也功不可没，本次分享 bilibili 中用户最常能感知到的产品设计细节，帮助你丰富 B 站玩法的同时，学习产品中的过人之处，以便了解设计发力点。

越往下看你越惊叹，总有一个你不知道的彩蛋设计细节。

1.「防偷窥」登录页 – 2233 娘遮眼 使用场景

再熟悉不过的页面了吧。登录页面是除首页外，每个用户大概率要进入的页面。如何给予用户安全感知，同时增强产品记忆点。

设计思考

设计目标：提升用户登录 B 站时的安全感知。

设计方案：当用户在输入验证码或者密码等较为敏感的信息时，2233 娘会遮住眼睛，暗示隐私信息我们是不会偷看的。强化 B 站对安全隐私的重视度。增强用户信任感。同时 B 站的品牌 IP2233 娘从儿时到成年产品中都有体现。用户登录注册账号时，儿时 Q 版的 2233 娘呈现在眼前，暗示着 2233 娘未来的一路陪伴，共同成长的愿景，这是第二层含义。

2.「选封面」开屏页 – 自选模式 使用场景

作为一个二次元发展起来的视频社区，用户对于产品品牌具有亲切感。但 B 站发展至今二次元内容逐渐被多元生态所代替，类目占比逐渐变小，老用户的情感记忆那里体现。

设计思考

设计目标：提升品牌 IP 传播，让用户享受更加丰富的开屏页，从而满足用户情绪。

设计方案：在「设置」-「开屏画面设置」中，你可以随机展示或者自定义选择画面，总共为用户提供 20 张图片，每一个都是 2233 娘和 B 站重要日子的组合插画，其中不乏几张经典页面。当用户选择特定画面时，不仅能强化 IP 记忆点，同时也体现出产品对用户的重视程度。

3.「弹幕清屏」视频页 – 双指点击快速隐藏 使用场景

B 站弹幕是出了名的有趣，当弹幕狂热者看一个热门爆款视频，很可能弹幕全程霸屏，气虽然氛感十足，但也会存在遮挡用户查看所关注的内容，从而错过精彩瞬间。如何解决？

设计思考

设计目标：优化弹幕开关的便捷操作，给予用户优质的交互体验。

设计方案：在视频播放页面，常规开关弹幕的方式是点击左下角弹幕按钮。想要在便捷一些，你可以双指点击屏幕，触发开关弹幕功能，相比常规「先点击屏幕」「再关闭弹幕」两步操作，双指点击屏幕更加高效，虽然多指操作学习成本高，但这种隐藏交互会大大提升观感体验。如今的产品功能不断堆叠，有时候常用的功能要进入 3 个层级才能使用，何不换种思路，运用多指交互来提升用户操作体验，未尝不是一种好的体验升级。

4.「进度条」视频页 – 眼睛跟随方向 使用场景

一个产品除了空状态、界面元素外，如何在视频页中给予用户品牌感知，增加趣味体验。

设计思考

设计目标：提升视频页进度条的趣味性，从而强化 B 站品牌透传。

设计方案：在视频页中，当你对视频进度进行左右拖拽时，进度条的指示图标「小电视」的眼睛会左右移动，当你向左滑动眼睛跟随左边，向右滑动小眼睛跟随右边，很是有趣，通过 IP 结合进度条的交互设计让原本单一的形态变得趣味横生。当然，进度条的样式不止一种，还有很多彩蛋视频也有不同的样式，快去找一找吧。（对了，最近在使用「优酷」时也发现进度条的微设计，感兴趣的朋友不妨看看。）

5.「一键三连」视频页 – 长按点赞触发联动 使用场景

一键三连最早的发源地，或许你此时才知道这个功能吧。

设计思考

设计目标：提升在同质化产品中的特殊功能点设计，强化产品一键三连功能。

设计方案：在视频页浏览时，看到超级喜欢的 UP 主视频，激动到想要一键三连，可以长按点赞按钮，你会看到右边投币和收藏显示进度条占比，当一圈走完，点赞、投币、收藏同时完成，这就是一键三连的激活功能。不仅如此，移动端、网页端、以及接下来的「写笔记」中都可触发一键三连功能，产品特有的功能感知满满。

6.「快速听歌」视频切换 – 你的下一款听歌软件何必是一款听歌软件 使用场景

想听周董的歌，网易云音乐没有，QQ 音乐又要付费听，好难受啊～

设计思考

设计目标：解决用户听歌时视频弹幕干预，将视频切换音乐模式，专注听歌。

设计方案：在视频页，点击「更多」选择「听视频模式」，当前视频会切换成音乐页面，这难道不就是音乐软件嘛。常用的循环、上一首、下一首功能都有、收藏、评论、转发也有，简直不要太棒。因为 B 站是 UGC（用户生产内容）、PGC（专业生产内容）视频平台的独特性，自身就不会太担心侵权问题。难怪 B 站中 Z 世代的用户更多，一款产品，满足多场景多人群使用，怪不得能俘获民心。

1. 「视频放大」双指移动 – 放大缩小画面 使用场景

当你用 B 站学习时，小小的手机屏幕很难看到细节，该怎么解决？

设计思考

设计目标：提升细节放大展效果，让用户看清具体信息，提高学习效率

设计方案：在视频页，除了上面说的双指点击触发弹幕开关，你可以通过双指拉伸把视频任意放大，当然你也可以捏和把视频缩小。当改变了原始视频尺寸，底部会有一个「还原屏幕」的按钮，点击即可快速矫正视频。还不快快用起来～

2.「学英语」老友记 – 学习注释 使用场景

是不是还在边看英文电影边学英语，这样虽然是个办法，但遇到不懂得单词或是语法你还要在第三方翻译软件中翻译，效率性大打折扣。

设计思考

设计目标：提高音乐学习效率，在视频中增加实时英文解析，帮助快速学英语。

设计方案：目前已知在「老友记」中，用户可以通过点击左侧「学音乐」进入到英文学习分栏中，演员的每段对话，以及出现时间，都清晰罗列出来，你可以重复收听某段对话，也可以针对当前对话中不理解的单词或语法进行学习，简直就是学习英语者的福音。

3.「一起看」放映厅 – 学习氛围瞬间拉满 使用场景

一起刷 B 站、一起看视频、一起聊天等等这样的场景可能只在现实中存在。真的是这样吗？

设计思考

设计目标：解决异地分开刷 B 站的阻隔感，提升随时随地一起刷剧学习的幸福感。

设计方案：在视频页，点击「一起看」进入放映厅，你可以自己新建放映厅，也可以进入别人的放映厅，总之可以多些朋友一起看视频，一起交流，完美解决异地或者独处的孤独感～

4.「写笔记」笔记功能 – 教学视频的高效学习工具 使用场景

同样是看视频学习，当你身边只有手机时，需要做笔记，还在通过备忘录等形式在 App 之间来回切换记录吗？

设计思考

设计目标：解决看视频时难以记录重点知识的情况，提升记录笔记效率，从而高效学习。

设计方案：在公开课等教学类视频中，通过点击「更多」找到「笔记功能」就能解决一边看视频一边记录的痛点了。不仅如此，还能查看其他用户的笔记内容并且可以一键三连进行互动，具有双向学习性，简直不要太棒。笔记做完还可以一键复制，粘贴到你的知识库中，解决内容迁移问题。在 B 站学习的用户不妨快来试试～

1. 「弹幕撤回」2 分钟内可撤回 – 避免文字误伤 使用场景

B 站是个弹幕网，很多时候观看者头脑一热随意发表的弹幕言论，会给其他用户带来观影不适以及平台污染，如何解决。

设计思考

设计目标：为用户增加弹幕删除功能，从而提升弹幕评论的绿色言论，净化弹幕内容。

设计方案：在视频页发送了一个弹幕，用户可在视频中看到自己的弹幕，鼠标进入，选择撤回，要注意只能在 2 分钟内进行撤回，并且一天之内只能撤回 5 次弹幕。目的也是为防止用户频繁撤回的操作。手机端可点击弹幕列表，找到自己的弹幕，长按会出现撤回选项，点击撤回即可。

2. 「鬼畜秘密」网页端鬼畜区长按「返回顶部」按钮 10s 输入对应字母进入经典鬼畜区 使用场景

人们总对好奇的事物产生兴趣，尤其是在自己不知道的前提下。

设计思考

设计目标：增加鬼畜区弹幕彩蛋功能，提升此类目视频曝光。

设计方案：在鬼畜区频道，长按 10s 右下角的返回顶部按钮，会激活底部黑色输入列表，文案写着：“尝试输入字母，发现鬼畜秘密…”带你进入另一个神秘空间。

3. 「鬼畜霸屏」在鬼畜搜索下长按 A 键头会有另一个彩蛋等你 使用场景

文案的引导会激发用户好奇产生尝试。

设计思考

设计目标：引导用户进行随机字母输入，提升彩蛋互动玩法。

设计方案：在搜索框随机输入英文字母，会出现提示输入的字母，当你输入完点回车，网页会出现经典的一句话弹幕。如果你长按 AAAAAAAA…,网页弹幕伴随音效不断出现，很是鬼畜。当你对某个弹幕头像产生好奇，可点击进入视频页，进行视频浏览，同时可以后评论区同样是彩蛋进来的伙伴一起交流，很是热闹。

4. 「小黑屋」了解规则 – 查看案情加深学习 使用场景

当 B 站上传视频以及评论不加以管制和制度教育，会带来流失用户的风险。

设计思考

设计目标：为了建立良好的视听环境和用户体验，规范产品的内容形式。

设计方案：在社区中心，小黑屋中，可以查看已经被关小黑屋用户的案情，针对案情的严重程度，进行封禁时间限制，相比长篇文章的制度规范，这种实际案例，更能让用户了解平台规则，防止关进小黑屋出不来。

1. 「代码良言」小黑屋 右箭源代码 – 金石良言 使用场景

程序员在小黑屋页面，想要越狱查看代码等行为。

设计思考

设计目标：告知程序员，开发者们小黑屋不仅是用来规范视频用户做出的行为，同样也是针对开发者以及程序员的。

设计方案：在「小黑屋」页面，右键「显示 网页源代码」，在一行代码中间，你会看到一句话：“一朝耍流氓，十年挂南墙；不乖的孩子统统都要打屁股；越狱是不可能越狱的，这辈子是不可能越狱的”极具搞笑的语言让本就是严肃的事情变得轻松许多，同时增强小黑屋的准则态度，让 B 站用户做一个遵守准则的好用户。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。

认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

本期产品细节分析结束，点击原文链接查看更多，那我们下期再见！

参考文献：

B 站 2022 第一季度财报： https://mp.weixin.qq.com/s/ctzbvBqPxtbQxCV2_XAGDQ

MikuFans 弹幕视频网 ： https://www.bilibili.com/read/cv14244675/

Advertising： https://mp.weixin.qq.com/s/831jX19aq8cfI_WU7RQubw

时趣研究院： https://mp.weixin.qq.com/s/BUZoVle8ByLQjAFrCMm4ag

欢迎关注作者微信公众号：草蓉三石

这是一篇有格局的文章，这是一篇娱乐的文章，这是一篇整活儿的文章。

设计师如何做晋升汇报？来看大厂高手的分享！ 每年年初或年底，各大公司都会要进行述职，年终总结或者晋升，我工作这么多年也参加了很多次晋升面试，也经历了很多坑，也有很多小伙伴提问我，如何去做一份晋升 PPT 或者如何去述职，今天，我结合一下我之前的工作经验，和大家梳理出一套框架，这套框架不一定对，但是希望可以帮助到大家。

阅读文章 >

所以各位观众姥爷们不要批判我。本文目录如下:

前言 项目背景 设计目标 设计策略 设计方案 设计验证 前言 先来看这段话，大家猜猜这说的是一件什么事情？

我联合硬件排查部门、采购部门、电力工程部门等等，结合这些资源。我快速找到了问题根结，推动各个部门协同合作，在各部门共同努力之下，最后成功和圆满的解决了问题。

最后，我也总结出了一套流程，打造出了一个新系统，该系统可用于自动检测类似问题。一旦被系统发现问题，系统将自动下发指令给最精准的业务部分，自动完成整个工程，解决问题。

该系统不但节省了资源，还节省了人力。以前需要多人才能解决的问题，现在只需要 1 个人即可完成失去光明的时间，由以前的一个月，缩短到了 1 小时，在线时间达到 99.99%。

如果用通俗的语言来说，就是：买了个灯泡，问了一圈同事，最后自己换了。以后灯泡再坏，也自己换了就好。

明明一句话就能说明做的事情，为什么非通过黑话去进行转译？

因为在日常工作中，大部分同事做的事情大同小异，很多都是很小的事情，如何能拉开差距，体现自己做的事情有价值，那么这时候，通过黑话可以很好的拉开和大家的差距，虽然本质上大家做的事情都大同小异。

黑话的流行，个人认为有以下两种原因：

同事间相互内卷的结果，通过黑话的包装，去拉开和同事间的差距。 更加高效地沟通。一个黑化名词，是一两句话极度简化的结果。如果每次大家沟通都大篇幅的白话去沟通，效率就会降低。 例如：消费者对品牌和产品形成固有看法和观念，这句话用“消费认知”这个词代替，就很高效了。

随着时代的进步，上面换灯泡的黑话来自于 2019 年，现在看来，已经显得很朴素。不够更黑话，步入 2022 年，黑话的维度也迎来升维增幅。

我进行一波修改，大家感受下这样是不是感觉更高级呢？

拉通多部门角色倒逼流程迭代，建立模型化、标准化、流程化范式。通过对建立范式的流程化复用，实现核心业务价值转化。通过新范式的迭代，形成不同业务标准分层，人效提升高达 2000bp。

一个小小的换灯泡，都能说得如此高深莫测。那么在实际工作中，即使是对文案进行小修改，那文字会变得更加高深莫测。干的活立马就显得高级了。

接下来让我们来看看如何将黑话整进项目里面。

项目背景 以下这段是常见的项目背景的白话文：

目前购买流程用户流失率高，通过优化该流程，提升整体转化效率。

如何将这句话包装的高大上呢，显示的有格局呢？那么可以这么说:

通过数据分析发现整个购买转化漏斗，用户流失率高。通过设计手段重塑用户动线和购买心智，加固消费购买场，以此提升整体转化率和整体 GMV。

通过上面可以看出，要将具体的细节手段写出来，具体的手段通过一些对应的高端词汇去替换，这样一整段话，就有比较深度和格局的样子。

最后通过具体的核心指标去验证项目背景的设计优化的意义。

设计目标 以下这段是常见的设计目标的白话文：

统一设计风格，提升整个购买流程统一性。 减少操作层级，降低多层级导致的流失率。 简化视觉元素，强化重要信息。 上述的这个设计目标通常来说没毛病，说的也比较清晰，但是不够黑话。接下来看看下面这个升级版，感觉如何：

通过平台 IP 统一植入到购买链路，深度绑定购买心智场景，全面占领用户心智。 通过设计策略透传平台的信任价值。 信息降噪，通过重构用户动线和视觉布局，简化用户认知与操作负荷。 重建购买链路的优惠服务承载力。 设计策略 以下这段是常见的设计策略的白话文：

统一性：通过优化图标，文字和视觉布局，提升整个流程的统一性。 简化层级：通过简化用户操作次数，提升转化率。 上述的这个设计策略，比较好懂，主要通过两方面提升整体转化率。如果给其他高纬度的大佬看的话，显得小白好懂，接下来看看下面这个升级版。

深挖品牌价值、提炼 IP、强化信任，形成多矩阵购买心智，通过平台 IP 反哺购买链路。 透传信任，通过官方、第三方保险、用户评价等多维度组合拳深化用户信任感知。 通过对用户调研，重构用户购买动线，简化操作流程和信息降噪等方式提升转化率。 通过视觉表现和交互布局全方位展示优惠服务卖点，提升操作能效。 设计方案 常见的设计方案，都是直接放主界面和交互流程。但是这会显得不够高级。项目方案显得普普通通。

如果按照升维思路的话，那么就应该先展示以下四部分:

深挖品牌价值、提炼 ip、强化信任，形成多矩阵购买心智，通过平台 ip 反哺购买链路。 透传信任，通过官方、第三方保险、用户评价等多维度组合拳深化用户信任感知。 通过对用户调研，重构用户购买动线，简化操作流程和信息降噪等方式提升转化率。 通过视觉表现和交互布局全方位展示优惠服务卖点，以此提升购买效率。 首先单独建一个画板，将上述的四个方面全方位展示。

然后做一个整体的方案汇报，展示全局性、局部性以及异常等。

最后才展示具体的设计方案。

最重要的是展示的角度要让阅读者眼前一亮，富有创意和高格局。

设计验证 以下这段是常见的设计验证的白话文：

本次优化，用户反馈良好。设计感官有一个整体的质量提升。上线之后，收到了业务方的好评。

上述的描述，只能说明上线效果良好，缺乏更细节的东西，例如可以这样说:

定量方面：

核心指标：GMV 提升 360bp，月人均订单数从 5.1 提升至 6.2 大幅度降低用户操作时长，降低用户跳出率。用户操作时长从 45s 降低到了 30s 整个购买链路，用户完成率提升 550bp。 定性方面：

进一步完善购买场景操作链路，强化用户对平台消费心智。 通过对用户问卷数据回收，购买链路整体好感完成了一个新的升维定位。 以上是晚上临时写的，欢迎大家友好留言。如果反馈的好，下期出迭代 2.0 版。

欢迎关注作者的微信公众号：「Echo的设计笔记」

这是一篇有格局的文章，这是一篇娱乐的文章，这是一篇整活儿的文章。

设计师如何做晋升汇报？来看大厂高手的分享！ 每年年初或年底，各大公司都会要进行述职，年终总结或者晋升，我工作这么多年也参加了很多次晋升面试，也经历了很多坑，也有很多小伙伴提问我，如何去做一份晋升 PPT 或者如何去述职，今天，我结合一下我之前的工作经验，和大家梳理出一套框架，这套框架不一定对，但是希望可以帮助到大家。

阅读文章 >

所以各位观众姥爷们不要批判我。本文目录如下:

前言 项目背景 设计目标 设计策略 设计方案 设计验证 前言 先来看这段话，大家猜猜这说的是一件什么事情？

我联合硬件排查部门、采购部门、电力工程部门等等，结合这些资源。我快速找到了问题根结，推动各个部门协同合作，在各部门共同努力之下，最后成功和圆满的解决了问题。

最后，我也总结出了一套流程，打造出了一个新系统，该系统可用于自动检测类似问题。一旦被系统发现问题，系统将自动下发指令给最精准的业务部分，自动完成整个工程，解决问题。

该系统不但节省了资源，还节省了人力。以前需要多人才能解决的问题，现在只需要 1 个人即可完成失去光明的时间，由以前的一个月，缩短到了 1 小时，在线时间达到 99.99%。

如果用通俗的语言来说，就是：买了个灯泡，问了一圈同事，最后自己换了。以后灯泡再坏，也自己换了就好。

明明一句话就能说明做的事情，为什么非通过黑话去进行转译？

因为在日常工作中，大部分同事做的事情大同小异，很多都是很小的事情，如何能拉开差距，体现自己做的事情有价值，那么这时候，通过黑话可以很好的拉开和大家的差距，虽然本质上大家做的事情都大同小异。

黑话的流行，个人认为有以下两种原因：

同事间相互内卷的结果，通过黑话的包装，去拉开和同事间的差距。 更加高效地沟通。一个黑化名词，是一两句话极度简化的结果。如果每次大家沟通都大篇幅的白话去沟通，效率就会降低。 例如：消费者对品牌和产品形成固有看法和观念，这句话用“消费认知”这个词代替，就很高效了。

随着时代的进步，上面换灯泡的黑话来自于 2019 年，现在看来，已经显得很朴素。不够更黑话，步入 2022 年，黑话的维度也迎来升维增幅。

我进行一波修改，大家感受下这样是不是感觉更高级呢？

拉通多部门角色倒逼流程迭代，建立模型化、标准化、流程化范式。通过对建立范式的流程化复用，实现核心业务价值转化。通过新范式的迭代，形成不同业务标准分层，人效提升高达 2000bp。

一个小小的换灯泡，都能说得如此高深莫测。那么在实际工作中，即使是对文案进行小修改，那文字会变得更加高深莫测。干的活立马就显得高级了。

接下来让我们来看看如何将黑话整进项目里面。

项目背景 以下这段是常见的项目背景的白话文：

目前购买流程用户流失率高，通过优化该流程，提升整体转化效率。

如何将这句话包装的高大上呢，显示的有格局呢？那么可以这么说:

通过数据分析发现整个购买转化漏斗，用户流失率高。通过设计手段重塑用户动线和购买心智，加固消费购买场，以此提升整体转化率和整体 GMV。

通过上面可以看出，要将具体的细节手段写出来，具体的手段通过一些对应的高端词汇去替换，这样一整段话，就有比较深度和格局的样子。

最后通过具体的核心指标去验证项目背景的设计优化的意义。

设计目标 以下这段是常见的设计目标的白话文：

统一设计风格，提升整个购买流程统一性。 减少操作层级，降低多层级导致的流失率。 简化视觉元素，强化重要信息。 上述的这个设计目标通常来说没毛病，说的也比较清晰，但是不够黑话。接下来看看下面这个升级版，感觉如何：

通过平台 IP 统一植入到购买链路，深度绑定购买心智场景，全面占领用户心智。 通过设计策略透传平台的信任价值。 信息降噪，通过重构用户动线和视觉布局，简化用户认知与操作负荷。 重建购买链路的优惠服务承载力。 设计策略 以下这段是常见的设计策略的白话文：

统一性：通过优化图标，文字和视觉布局，提升整个流程的统一性。 简化层级：通过简化用户操作次数，提升转化率。 上述的这个设计策略，比较好懂，主要通过两方面提升整体转化率。如果给其他高纬度的大佬看的话，显得小白好懂，接下来看看下面这个升级版。

深挖品牌价值、提炼 IP、强化信任，形成多矩阵购买心智，通过平台 IP 反哺购买链路。 透传信任，通过官方、第三方保险、用户评价等多维度组合拳深化用户信任感知。 通过对用户调研，重构用户购买动线，简化操作流程和信息降噪等方式提升转化率。 通过视觉表现和交互布局全方位展示优惠服务卖点，提升操作能效。 设计方案 常见的设计方案，都是直接放主界面和交互流程。但是这会显得不够高级。项目方案显得普普通通。

如果按照升维思路的话，那么就应该先展示以下四部分:

深挖品牌价值、提炼 ip、强化信任，形成多矩阵购买心智，通过平台 ip 反哺购买链路。 透传信任，通过官方、第三方保险、用户评价等多维度组合拳深化用户信任感知。 通过对用户调研，重构用户购买动线，简化操作流程和信息降噪等方式提升转化率。 通过视觉表现和交互布局全方位展示优惠服务卖点，以此提升购买效率。 首先单独建一个画板，将上述的四个方面全方位展示。

然后做一个整体的方案汇报，展示全局性、局部性以及异常等。

最后才展示具体的设计方案。

最重要的是展示的角度要让阅读者眼前一亮，富有创意和高格局。

设计验证 以下这段是常见的设计验证的白话文：

本次优化，用户反馈良好。设计感官有一个整体的质量提升。上线之后，收到了业务方的好评。

上述的描述，只能说明上线效果良好，缺乏更细节的东西，例如可以这样说:

定量方面：

核心指标：GMV 提升 360bp，月人均订单数从 5.1 提升至 6.2 大幅度降低用户操作时长，降低用户跳出率。用户操作时长从 45s 降低到了 30s 整个购买链路，用户完成率提升 550bp。 定性方面：

进一步完善购买场景操作链路，强化用户对平台消费心智。 通过对用户问卷数据回收，购买链路整体好感完成了一个新的升维定位。 以上是晚上临时写的，欢迎大家友好留言。如果反馈的好，下期出迭代 2.0 版。

欢迎关注作者的微信公众号：「Echo的设计笔记」

一款口碑两极分化的软件。虽然它不是歌曲最多的听歌软件， 但绝对是听歌软件里情感体验最好的。

网易云小程序设计：

音乐类小程序如何设计？来看网易云音乐的重设计案例实战 Tips：以下说的「网易云音乐小程序」均为重设计尝试版DEMO 前言 最近写了一篇关于小程序的文章，得到了很多同学的认可，非常感谢。

阅读文章 >

事先声明 /attention。

强烈建议使用电脑查看， 用户体验 更佳。 Gif 体积较大，请耐心查看。 为了让设计细节更容易被看到，用 GIf 来呈现展示。 前言 碳水 Sir｜5 年村龄｜听过上万首歌｜发布过几首翻唱歌曲｜黑胶·伍级｜LV.9，众多身份都不能表达我对网易云的喜欢程度。因为它不仅是一款音乐播放器，更像是一个有血有肉、有情感的虚拟人一直陪伴在我身边，治愈着我～ 你很好奇它具有什么力量，能使用户粘性如此持久，那么我不妨带大家看看 网易云音乐 中情感化驱动的魅力所在。

情感化设计 ：

关于情感化设计，这篇干货带你快速入门这个知识点！ 小溜Epik：情感化设计是完善产品，提升用户体验的关键，在当今移动应用泛滥的时代，只有存在情感化设计的产品才能脱颖而出。

阅读文章 >

「送信猫头鹰」 飞鹰传信 – 在第 43 秒送你入学通知书

1. 使用场景

在听歌页面，呈现猫头鹰送信环节，带领粉丝回忆那个魔法学院，重温经典音乐。

2. 设计思考

设计目标：通过增加彩蛋，纪念《哈利波特 40 周岁暨电影重映》，提升歌曲二次曝光度。

设计方案：首页搜索哈利波特 第二首 「海德薇变奏曲」，当音乐播放到 第 43s 时，黑胶唱片中会突然飞出一只叼着通知书的猫头鹰，重现海德薇送入学通知书的经典桥段。猫头鹰飞过，你会看到评论区图标变成了一封信。用极具创意的动画手法，引导用户进入评论区进行后续操作。

这也给做产品设计的同学了一些灵感，当有合作方时，尝试着换种设计思路（例如：当前影视与音乐结合的彩蛋），来绑定产品与合作方之间的联系。形成高级记忆点，从而达到用户主动传播的裂变效应。

「穿越 9¾站台」 双击评论 – 进入魔法车站

1. 使用场景

在上一个场景中，点击信件进入评论区，通过评论区用户引导继续彩蛋探险之旅。

2. 设计思考

设计目标：为了使上个彩蛋具有连续性，提升彩蛋引入玩法达到评论话题热度。

设计方案：点击通知书- 在评论区找到第 9-10 评论，在中间空隙位置双击两下，出现一个缝隙随后逐渐放大，映入眼帘的是魔法站台，随后飞速而来一辆通往霍格沃茨的列车，当门打开时，又一个强光出现，随后穿梭回评论区。整体动画一气呵成，仿佛真的穿梭了一回。

当用户不知情下进入评论区，会看到其他用户都在以“彩蛋”为话题，展开激烈讨论，这时就激发出你的评论欲望，以及彩蛋入口探索，为彩蛋话题持续供热发光。该手法也是利用“圈内梗”标志事物，再结合穿梭般的动画体验，给「哈迷圈」用户体验了一波惊喜感，同时为后续「哈利波特魔法觉醒」游戏做好引流铺垫。

「旗帜仪式感」 分院帽之歌 – 评论区的特殊仪式感彩蛋

1. 使用场景

正式入学前，怎么能少了入学典礼这么重要的仪式。

2. 设计思考

设计目标：提升歌曲传播性以及记忆度，通过彩蛋强化音乐仪式感。

设计方案：点击「分院帽之歌」评论区 输入学院名称如格兰芬多，院旗降落，迎风飘扬，出现代表学院的旗帜，分院仪式就完成啦！仪式感是不是瞬间拉满。

没看过哈利波特的用户，我这里为大家收集好了四个学院名称，分别是赫奇帕奇、格兰芬多、斯莱特林、拉文克劳，想体验的用户快去试试吧～

「丁磊粉丝」 99999 以不变胜万变

1. 使用场景

用户进入 CEO 丁磊的主页可以看到 99999 粉丝，在强迫症驱使下为丁磊增加粉丝。

2. 设计思考

设计目标：通过 99999 粉丝，来“骗取”新粉丝关注，提升粉丝量。

设计方案：可能是程序员们被产品或 CEO 的各种需求堆压的透不过气，想着拿 CEO 来整活一下，这就有了上面的神奇一幕。进入首页，搜索「网易 CEO 丁磊」进入主页，第一次和 CEO 这么近距离接触，当你看到 99999 粉丝时，心想我原来就是那幸运的第 10 万粉丝，心中很是激动，当你点击关注后，返回首页再一次进去时，你会发现，粉丝数从新回到了 99999 粉丝，你以为是有人取消关注！其实这是程序员写的一个欺骗代码。利用这种仿制数字，来为 CEO 骗粉。这是程序员想到的点还是 CEO 丁磊的阴谋。就不得而知了～

这么细小的改动，确实让用户对网易云音乐产生神秘感，或许还有很多彩蛋没有发现，因此更能激发用户的探索欲望～感兴趣的同学快去试试吧～

「无渴不爽」 汽水特效 – 夏天的感觉就是如此清爽

1. 使用场景

网易云音乐与雪碧达成的深度合作，要通过（音乐+设计）手段探索跨界营销方式。

2. 设计思考

设计目标：传播品牌主张， 通过彩蛋提升品牌新主张“透心凉、渴释放”。

设计方案：在播放「无渴不爽」时，在特定位置会激活雪碧动效，你能看到右上方一个雪碧瓶开启，并倾倒而出，上深到一半高度清爽柠檬炸开效果，不仔细看还以为换手机进水了。

通过对设计的高度还原，模拟真实世界汽水反馈，例如二氧化碳气体等极具细节的动画效果，以及开瓶时“呲”的音效声让用户更好投身于音乐背后的情境中，以及紧扣歌名「无渴不爽」的“透心凉、渴释放”理念。用“音乐彩蛋”来赋予用户“视觉+听觉+味觉”三觉的沉浸式体验，让品牌主张成为用户切身感受。

这种营销方式，作为用户的我都很难拒绝，心里暗暗道：“这样的营销手段，多给我来一些，真的不错，喜欢～”。换做是你，也同样喜欢，对嘛～

「城南花已开」 纪念云村人 – 满屏花瓣飘落

1. 使用场景

17 年的一个遥远的往事，网易云团队为了纪念「音乐人-三亩地」给「城南花已开」ID 用户专门写的音乐。

2. 设计思考

设计目标：缅怀用音乐纪念的骨癌「南城花开时」用户，放大产品人情世故的高度，从而提升品牌对于用户的重视程度。

设计方案：在每年 3-4 月时，收听「南城花开时」这首歌，在播放页就能看到满屏花瓣飘落，点击最亮的一瓣，会看到花海中有一个少年。对于老用户来说无疑勾起了往日回忆，通过彩蛋动画来强化音乐缅怀的力量。同时吸引围观用户的好奇，引导查看评论区，翻找彩蛋根源，进而提升评论区活跃度以及产品情感关联。

毕竟产品本身是冰冷的，用产品本身的功能来安抚用户以达到共鸣效果那就太棒了。这也正是网易云音乐依靠评论区获得业界影响力的重要体现。即使版权少的可怜但依然稳居前 3 宝座的原因之一。

「Light The Light」 灯光彩蛋 – 完美结合硬件生态

1. 使用场景

面对疫情，网易推出「光援行动」通过「Light The Light」歌曲「LTL」功能，给用户传递音乐的治愈力量。

2. 设计思考

设计目标：结合硬件生态，提高闪光灯与音乐的多重组合玩法，用音乐与光传递希望给到用户。

设计方案：网易团队通过歌曲《Light The Light》歌词”每个人都是一处微光，每当我们闪烁一次灯光，也许某处黑暗就会被我们照亮”中获得灵感，配合歌曲中的鼓点来不断闪烁节奏光，营造氛围感的同时，传递出即使是一颗小小的微光，凝聚起来依然可以照亮一片天地。

同时表示面对防疫，人民团结一致，互相帮助的社会凝聚力。宣扬音乐的力量以及对未来美好生活的祝福。

「抱抱安慰」 评论区 – 两指捏合 送给陌生人一个抱抱

1. 使用场景

为响应 “云村评论治愈计划”，设计“抱抱彩蛋”，传递温暖的社区氛围。

2. 设计思考

设计目标：通过彩蛋玩法，提升社区情感鼓励，净化社区良好氛围。

设计方案：再任意歌曲评论区，对着评论双指向中间捏和的方式，去“抱”一个用户的评论给予情感抚慰。视觉方面呈现两个可爱的白、红小人相互拥抱安抚的画面，评论者的头像也会出现“收到抱抱”的提示，以达到与陌生人之间互相鼓励温暖的目的。

这种方式挺暖的，通过音乐平台送出抱抱以及接受抱抱的形式，更加体现出音乐无边界的魅力所在。

「银河赴约」 孔明灯 – 考生与家长的祝福

1. 使用场景

每年高考时，「银河赴约」都会收到来自音乐人以及网易的各种祝福，祝旗开得胜。

2. 设计思考

设计目标：在高考前夕，通过孔明灯来收集用户的祝福语录提高评论话题统一性。，为用户提供高考话题入口。

设计方案：在 2020 年疫情期间的高考阶段，网易云音乐制作了助力高考自制「银河赴约」曲目，用户在听歌时，能看到评论区占位符变成了孔明灯。要知道，孔明灯是中国特有的手工艺术，又叫天灯，俗称许愿灯、祈天灯。它的作用是祈福，许愿，保佑。用这种视觉效果，引导暗示用户评论区特殊的意义，真诚的祝福，高考加油！带话题输入祝福，还能获得“网易云音乐高考助力 buff”。形式拉满，意义非凡有没有～

「搜索‘自杀’」 云村治愈所 – 生活有你才更美好

1. 使用场景

音乐是人心灵深处的对白，很多抑郁的用户都有沟通障碍不想与人交流，唯有音乐可以独自倾听。

2. 设计思考

设计目标：解决抑郁用户危险的心理活动，通过治愈所提高用户对生活的美好追求。

设计方案：在首页搜索“自杀”等敏感词汇，会立即跳出云村治愈所页面，标题写着“生活没有那么奇妙，但有你才会变得更好”。让抑郁用户感受到自我的重要性。

（2.1）开头用生活中的美好事物来告诉用户真实世界值得回味。

（2.2）精选了四类治愈歌单来温暖用户的心情。

（2.3）罗列了一线城市心理咨询热线，间接体现出在一线城市生活压力指数。

（2.4）精彩评论，云村村民的八方支援，感受到网络中温暖纯良一面。以治愈的文字、音乐推荐、心理咨询热线、热心评论来唤醒抑郁用户，既有文字的力量也有音乐的力量，多维度努力，一起帮助云村用户积极生活，健康快乐。

最后，当我看到阅读总人数 863.7 万时，心情还是无比复杂，虽然很多都是闻声前来，但大部分还是真实抑郁用户搜索而来，衷心希望音乐的力量可以帮助他们战胜困难，也感谢网易云音乐平台用特殊的方式来治愈用户。这真是很珍贵的用户洞察点。

「黑胶故事」 歌单 – 双指下滑的视觉享受

1. 使用场景

在听歌时，播放页用视频展示歌曲背后的故事，听觉视觉双重享受。

2. 设计思考

设计目标：满足用户“边听边看”需求，通过视频拉近用户与音乐人的距离。

设计方案：在特定曲目中，对黑胶播放界面双指下滑，激活“黑胶故事”，黑胶内将自动播放 30s 的无声视频，再次点击即可跳转至完整的音乐视频播放页面。形成快速切换的视音交互链路。

这种尝试，也是进一步把音乐延伸，每首音乐都有属于自己的故事，很多都是在听音乐时才会引发共鸣，再去搜索音乐背后的故事，链路长、操作不便捷，网易推出的黑胶唱片，音乐人只需自主上传，审核通过后，便可以最低成本，进行歌曲宣传，同时用户能极大的节约时间，从而更加沉浸在音乐世界中。

想要体验，直接搜索「黑胶故事」找到歌单就可以啦～

摸鱼计算器 1. 使用场景

计算上班摸鱼听歌的时间，看看朋友群里谁是摸鱼之王。

2. 设计思考

设计目标：通过热点话题并结合数据分析，来提高 H5 活动玩法，达到裂变传播。

设计方案：只需要在活动页中输入自己的名称，就能分析出，摸鱼总时长和具体流量。这个功能的开发，起因网络热点话题吐槽包含网易云音乐等产品消耗 10GB 以上流量为基础，发掘出可结合产品自身做的测试尝试，「摸鱼计算器」依靠平台数据流量分析，根据「上班听歌时间在工作时间的占比」估算出全年的「摸鱼流量」。来满足用户猎奇心。

虽然此活动只是休闲放松的形式，并非真的宣传摸鱼有多好。但为了说明一下，还是文字提醒：“摸鱼”虽好，可不要贪摸哦，正确听歌有助于提升工作效率！告诉用户，正确的价值观。

8 级证明书 1. 使用场景

在网易云大约需要听上千首新歌，看很多故事，明白许多道理才是个好男孩。

2. 设计思考

设计目标：创造「网易云八级」梗，通过活动提升产品热度。

设计方案：只需要在活动中，选择性别，依靠听歌数据分析，总结网易云等级段位。当时也有女孩说，找男朋友就找网易云八级，因为懂得很多很沉稳。当然女孩子也是同理。

据了解，这个活动也是因为有网友晒出等级截图，并且上了热搜，而这一事件瞬间被网易云团队看到，迅速整活。同时间上线「8 级证明书」，8 级以上的用户可获爱好听歌的“好男孩”“好女孩”认证。没错，看到配图的朋友都知道了吧，我是 8 级哦～

表白翻译机 1. 使用场景

七夕节，表白日，语言组织不行，说不了浪漫的情话。

2. 设计思考

设计目标：结合音乐，提升表白语言的趣味呈现，为用户提供浪漫语言帮助。

设计方案：在搜索框输入名字，就会随机推荐表白歌词，都是心动的感觉，帮助不会说情话的你。当然我也可以输入你的的名字，因为你的名字本身，也足以吸引我。有没有被甜到～

除此之外，搜索特定名称，会出来特殊的表白，一语中的。例如搜索苏炳添，出来的是“我会用 9 秒 83 的速度出现在你面前”完全整活了，有木有～不仅如此，页面配图，绘制了大量精美小线稿，在我尝试了很多名称后都没遇到重复的图形，可见这个小细节做了 N 个图形出来，很是用心。是一个很棒的设计细节。

个人感受 早期受到“网抑云”的负面冲击，评论区中存在太多抑郁情绪发言，导致很多用户看到后都同情怜悯随后一起陷入抑郁。后来网易云音乐推出各种「治愈计划」包括「云村治愈所」「抱抱功能」「治愈专辑」等等设计手段。

最终，越来越多的用户用正能量回怼丧文化「网抑云」变成了「网愈云」，把人间美好给到大家。这也是产品从用户情感诉求出发，反向驱动设计。或许这才是网易云音乐取胜的重要法宝。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

参考文献及链接：

https://www.sohu.com/a/506317507_120099902 https://baijiahao.baidu.com/s?id=1667366524064453555&wfr=spider&for=pc https://www.zhihu.com/question/404810159/answer/1326228938 https://xw.qq.com/cmsid/20210328A0A1JB00 欢迎关注作者微信公众号：草蓉三石

一款口碑两极分化的软件。虽然它不是歌曲最多的听歌软件， 但绝对是听歌软件里情感体验最好的。

网易云小程序设计：

音乐类小程序如何设计？来看网易云音乐的重设计案例实战 Tips：以下说的「网易云音乐小程序」均为重设计尝试版DEMO 前言 最近写了一篇关于小程序的文章，得到了很多同学的认可，非常感谢。

阅读文章 >

事先声明 /attention。

强烈建议使用电脑查看， 用户体验 更佳。 Gif 体积较大，请耐心查看。 为了让设计细节更容易被看到，用 GIf 来呈现展示。 前言 碳水 Sir｜5 年村龄｜听过上万首歌｜发布过几首翻唱歌曲｜黑胶·伍级｜LV.9，众多身份都不能表达我对网易云的喜欢程度。因为它不仅是一款音乐播放器，更像是一个有血有肉、有情感的虚拟人一直陪伴在我身边，治愈着我～ 你很好奇它具有什么力量，能使用户粘性如此持久，那么我不妨带大家看看 网易云音乐 中情感化驱动的魅力所在。

情感化设计 ：

关于情感化设计，这篇干货带你快速入门这个知识点！ 小溜Epik：情感化设计是完善产品，提升用户体验的关键，在当今移动应用泛滥的时代，只有存在情感化设计的产品才能脱颖而出。

阅读文章 >

「送信猫头鹰」 飞鹰传信 – 在第 43 秒送你入学通知书

1. 使用场景

在听歌页面，呈现猫头鹰送信环节，带领粉丝回忆那个魔法学院，重温经典音乐。

2. 设计思考

设计目标：通过增加彩蛋，纪念《哈利波特 40 周岁暨电影重映》，提升歌曲二次曝光度。

设计方案：首页搜索哈利波特 第二首 「海德薇变奏曲」，当音乐播放到 第 43s 时，黑胶唱片中会突然飞出一只叼着通知书的猫头鹰，重现海德薇送入学通知书的经典桥段。猫头鹰飞过，你会看到评论区图标变成了一封信。用极具创意的动画手法，引导用户进入评论区进行后续操作。

这也给做产品设计的同学了一些灵感，当有合作方时，尝试着换种设计思路（例如：当前影视与音乐结合的彩蛋），来绑定产品与合作方之间的联系。形成高级记忆点，从而达到用户主动传播的裂变效应。

「穿越 9¾站台」 双击评论 – 进入魔法车站

1. 使用场景

在上一个场景中，点击信件进入评论区，通过评论区用户引导继续彩蛋探险之旅。

2. 设计思考

设计目标：为了使上个彩蛋具有连续性，提升彩蛋引入玩法达到评论话题热度。

设计方案：点击通知书- 在评论区找到第 9-10 评论，在中间空隙位置双击两下，出现一个缝隙随后逐渐放大，映入眼帘的是魔法站台，随后飞速而来一辆通往霍格沃茨的列车，当门打开时，又一个强光出现，随后穿梭回评论区。整体动画一气呵成，仿佛真的穿梭了一回。

当用户不知情下进入评论区，会看到其他用户都在以“彩蛋”为话题，展开激烈讨论，这时就激发出你的评论欲望，以及彩蛋入口探索，为彩蛋话题持续供热发光。该手法也是利用“圈内梗”标志事物，再结合穿梭般的动画体验，给「哈迷圈」用户体验了一波惊喜感，同时为后续「哈利波特魔法觉醒」游戏做好引流铺垫。

「旗帜仪式感」 分院帽之歌 – 评论区的特殊仪式感彩蛋

1. 使用场景

正式入学前，怎么能少了入学典礼这么重要的仪式。

2. 设计思考

设计目标：提升歌曲传播性以及记忆度，通过彩蛋强化音乐仪式感。

设计方案：点击「分院帽之歌」评论区 输入学院名称如格兰芬多，院旗降落，迎风飘扬，出现代表学院的旗帜，分院仪式就完成啦！仪式感是不是瞬间拉满。

没看过哈利波特的用户，我这里为大家收集好了四个学院名称，分别是赫奇帕奇、格兰芬多、斯莱特林、拉文克劳，想体验的用户快去试试吧～

「丁磊粉丝」 99999 以不变胜万变

1. 使用场景

用户进入 CEO 丁磊的主页可以看到 99999 粉丝，在强迫症驱使下为丁磊增加粉丝。

2. 设计思考

设计目标：通过 99999 粉丝，来“骗取”新粉丝关注，提升粉丝量。

设计方案：可能是程序员们被产品或 CEO 的各种需求堆压的透不过气，想着拿 CEO 来整活一下，这就有了上面的神奇一幕。进入首页，搜索「网易 CEO 丁磊」进入主页，第一次和 CEO 这么近距离接触，当你看到 99999 粉丝时，心想我原来就是那幸运的第 10 万粉丝，心中很是激动，当你点击关注后，返回首页再一次进去时，你会发现，粉丝数从新回到了 99999 粉丝，你以为是有人取消关注！其实这是程序员写的一个欺骗代码。利用这种仿制数字，来为 CEO 骗粉。这是程序员想到的点还是 CEO 丁磊的阴谋。就不得而知了～

这么细小的改动，确实让用户对网易云音乐产生神秘感，或许还有很多彩蛋没有发现，因此更能激发用户的探索欲望～感兴趣的同学快去试试吧～

「无渴不爽」 汽水特效 – 夏天的感觉就是如此清爽

1. 使用场景

网易云音乐与雪碧达成的深度合作，要通过（音乐+设计）手段探索跨界营销方式。

2. 设计思考

设计目标：传播品牌主张， 通过彩蛋提升品牌新主张“透心凉、渴释放”。

设计方案：在播放「无渴不爽」时，在特定位置会激活雪碧动效，你能看到右上方一个雪碧瓶开启，并倾倒而出，上深到一半高度清爽柠檬炸开效果，不仔细看还以为换手机进水了。

通过对设计的高度还原，模拟真实世界汽水反馈，例如二氧化碳气体等极具细节的动画效果，以及开瓶时“呲”的音效声让用户更好投身于音乐背后的情境中，以及紧扣歌名「无渴不爽」的“透心凉、渴释放”理念。用“音乐彩蛋”来赋予用户“视觉+听觉+味觉”三觉的沉浸式体验，让品牌主张成为用户切身感受。

这种营销方式，作为用户的我都很难拒绝，心里暗暗道：“这样的营销手段，多给我来一些，真的不错，喜欢～”。换做是你，也同样喜欢，对嘛～

「城南花已开」 纪念云村人 – 满屏花瓣飘落

1. 使用场景

17 年的一个遥远的往事，网易云团队为了纪念「音乐人-三亩地」给「城南花已开」ID 用户专门写的音乐。

2. 设计思考

设计目标：缅怀用音乐纪念的骨癌「南城花开时」用户，放大产品人情世故的高度，从而提升品牌对于用户的重视程度。

设计方案：在每年 3-4 月时，收听「南城花开时」这首歌，在播放页就能看到满屏花瓣飘落，点击最亮的一瓣，会看到花海中有一个少年。对于老用户来说无疑勾起了往日回忆，通过彩蛋动画来强化音乐缅怀的力量。同时吸引围观用户的好奇，引导查看评论区，翻找彩蛋根源，进而提升评论区活跃度以及产品情感关联。

毕竟产品本身是冰冷的，用产品本身的功能来安抚用户以达到共鸣效果那就太棒了。这也正是网易云音乐依靠评论区获得业界影响力的重要体现。即使版权少的可怜但依然稳居前 3 宝座的原因之一。

「Light The Light」 灯光彩蛋 – 完美结合硬件生态

1. 使用场景

面对疫情，网易推出「光援行动」通过「Light The Light」歌曲「LTL」功能，给用户传递音乐的治愈力量。

2. 设计思考

设计目标：结合硬件生态，提高闪光灯与音乐的多重组合玩法，用音乐与光传递希望给到用户。

设计方案：网易团队通过歌曲《Light The Light》歌词”每个人都是一处微光，每当我们闪烁一次灯光，也许某处黑暗就会被我们照亮”中获得灵感，配合歌曲中的鼓点来不断闪烁节奏光，营造氛围感的同时，传递出即使是一颗小小的微光，凝聚起来依然可以照亮一片天地。

同时表示面对防疫，人民团结一致，互相帮助的社会凝聚力。宣扬音乐的力量以及对未来美好生活的祝福。

「抱抱安慰」 评论区 – 两指捏合 送给陌生人一个抱抱

1. 使用场景

为响应 “云村评论治愈计划”，设计“抱抱彩蛋”，传递温暖的社区氛围。

2. 设计思考

设计目标：通过彩蛋玩法，提升社区情感鼓励，净化社区良好氛围。

设计方案：再任意歌曲评论区，对着评论双指向中间捏和的方式，去“抱”一个用户的评论给予情感抚慰。视觉方面呈现两个可爱的白、红小人相互拥抱安抚的画面，评论者的头像也会出现“收到抱抱”的提示，以达到与陌生人之间互相鼓励温暖的目的。

这种方式挺暖的，通过音乐平台送出抱抱以及接受抱抱的形式，更加体现出音乐无边界的魅力所在。

「银河赴约」 孔明灯 – 考生与家长的祝福

1. 使用场景

每年高考时，「银河赴约」都会收到来自音乐人以及网易的各种祝福，祝旗开得胜。

2. 设计思考

设计目标：在高考前夕，通过孔明灯来收集用户的祝福语录提高评论话题统一性。，为用户提供高考话题入口。

设计方案：在 2020 年疫情期间的高考阶段，网易云音乐制作了助力高考自制「银河赴约」曲目，用户在听歌时，能看到评论区占位符变成了孔明灯。要知道，孔明灯是中国特有的手工艺术，又叫天灯，俗称许愿灯、祈天灯。它的作用是祈福，许愿，保佑。用这种视觉效果，引导暗示用户评论区特殊的意义，真诚的祝福，高考加油！带话题输入祝福，还能获得“网易云音乐高考助力 buff”。形式拉满，意义非凡有没有～

「搜索‘自杀’」 云村治愈所 – 生活有你才更美好

1. 使用场景

音乐是人心灵深处的对白，很多抑郁的用户都有沟通障碍不想与人交流，唯有音乐可以独自倾听。

2. 设计思考

设计目标：解决抑郁用户危险的心理活动，通过治愈所提高用户对生活的美好追求。

设计方案：在首页搜索“自杀”等敏感词汇，会立即跳出云村治愈所页面，标题写着“生活没有那么奇妙，但有你才会变得更好”。让抑郁用户感受到自我的重要性。

（2.1）开头用生活中的美好事物来告诉用户真实世界值得回味。

（2.2）精选了四类治愈歌单来温暖用户的心情。

（2.3）罗列了一线城市心理咨询热线，间接体现出在一线城市生活压力指数。

（2.4）精彩评论，云村村民的八方支援，感受到网络中温暖纯良一面。以治愈的文字、音乐推荐、心理咨询热线、热心评论来唤醒抑郁用户，既有文字的力量也有音乐的力量，多维度努力，一起帮助云村用户积极生活，健康快乐。

最后，当我看到阅读总人数 863.7 万时，心情还是无比复杂，虽然很多都是闻声前来，但大部分还是真实抑郁用户搜索而来，衷心希望音乐的力量可以帮助他们战胜困难，也感谢网易云音乐平台用特殊的方式来治愈用户。这真是很珍贵的用户洞察点。

「黑胶故事」 歌单 – 双指下滑的视觉享受

1. 使用场景

在听歌时，播放页用视频展示歌曲背后的故事，听觉视觉双重享受。

2. 设计思考

设计目标：满足用户“边听边看”需求，通过视频拉近用户与音乐人的距离。

设计方案：在特定曲目中，对黑胶播放界面双指下滑，激活“黑胶故事”，黑胶内将自动播放 30s 的无声视频，再次点击即可跳转至完整的音乐视频播放页面。形成快速切换的视音交互链路。

这种尝试，也是进一步把音乐延伸，每首音乐都有属于自己的故事，很多都是在听音乐时才会引发共鸣，再去搜索音乐背后的故事，链路长、操作不便捷，网易推出的黑胶唱片，音乐人只需自主上传，审核通过后，便可以最低成本，进行歌曲宣传，同时用户能极大的节约时间，从而更加沉浸在音乐世界中。

想要体验，直接搜索「黑胶故事」找到歌单就可以啦～

摸鱼计算器 1. 使用场景

计算上班摸鱼听歌的时间，看看朋友群里谁是摸鱼之王。

2. 设计思考

设计目标：通过热点话题并结合数据分析，来提高 H5 活动玩法，达到裂变传播。

设计方案：只需要在活动页中输入自己的名称，就能分析出，摸鱼总时长和具体流量。这个功能的开发，起因网络热点话题吐槽包含网易云音乐等产品消耗 10GB 以上流量为基础，发掘出可结合产品自身做的测试尝试，「摸鱼计算器」依靠平台数据流量分析，根据「上班听歌时间在工作时间的占比」估算出全年的「摸鱼流量」。来满足用户猎奇心。

虽然此活动只是休闲放松的形式，并非真的宣传摸鱼有多好。但为了说明一下，还是文字提醒：“摸鱼”虽好，可不要贪摸哦，正确听歌有助于提升工作效率！告诉用户，正确的价值观。

8 级证明书 1. 使用场景

在网易云大约需要听上千首新歌，看很多故事，明白许多道理才是个好男孩。

2. 设计思考

设计目标：创造「网易云八级」梗，通过活动提升产品热度。

设计方案：只需要在活动中，选择性别，依靠听歌数据分析，总结网易云等级段位。当时也有女孩说，找男朋友就找网易云八级，因为懂得很多很沉稳。当然女孩子也是同理。

据了解，这个活动也是因为有网友晒出等级截图，并且上了热搜，而这一事件瞬间被网易云团队看到，迅速整活。同时间上线「8 级证明书」，8 级以上的用户可获爱好听歌的“好男孩”“好女孩”认证。没错，看到配图的朋友都知道了吧，我是 8 级哦～

表白翻译机 1. 使用场景

七夕节，表白日，语言组织不行，说不了浪漫的情话。

2. 设计思考

设计目标：结合音乐，提升表白语言的趣味呈现，为用户提供浪漫语言帮助。

设计方案：在搜索框输入名字，就会随机推荐表白歌词，都是心动的感觉，帮助不会说情话的你。当然我也可以输入你的的名字，因为你的名字本身，也足以吸引我。有没有被甜到～

除此之外，搜索特定名称，会出来特殊的表白，一语中的。例如搜索苏炳添，出来的是“我会用 9 秒 83 的速度出现在你面前”完全整活了，有木有～不仅如此，页面配图，绘制了大量精美小线稿，在我尝试了很多名称后都没遇到重复的图形，可见这个小细节做了 N 个图形出来，很是用心。是一个很棒的设计细节。

个人感受 早期受到“网抑云”的负面冲击，评论区中存在太多抑郁情绪发言，导致很多用户看到后都同情怜悯随后一起陷入抑郁。后来网易云音乐推出各种「治愈计划」包括「云村治愈所」「抱抱功能」「治愈专辑」等等设计手段。

最终，越来越多的用户用正能量回怼丧文化「网抑云」变成了「网愈云」，把人间美好给到大家。这也是产品从用户情感诉求出发，反向驱动设计。或许这才是网易云音乐取胜的重要法宝。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

参考文献及链接：

https://www.sohu.com/a/506317507_120099902 https://baijiahao.baidu.com/s?id=1667366524064453555&wfr=spider&for=pc https://www.zhihu.com/question/404810159/answer/1326228938 https://xw.qq.com/cmsid/20210328A0A1JB00 欢迎关注作者微信公众号：草蓉三石

周二早上好！现在你看到的是这个炎热的 7 月第最后一波干货，这一次所梳理的干货素材有一部分会更加偏向于前端和开发者，比如可以直接复制的按钮 CSS 代码素材和可以直接编辑样式的 React 代码编辑器，当然也有很多东西是设计师甚至非设计从业者都能用得上好东西，比如借助机器学习直接给图片分层的插件，单独提取图片背景的工具，一次性生成品牌相关的主要素材和模板的服务，总会有那么一款素材正好是你需要的。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年7月精选实用设计干货合集 7月第1波设计干货合集来了！

阅读文章 >

第二波！2022年7月精选实用设计干货合集 现在你看到的是7月第2波设计干货合集，不过严格意义上来说，这一波完全是干货合集中的合集。

阅读文章 >

第三波！2022年7月精选实用设计干货合集 周二早上好！

阅读文章 >

下面我们具体看看这一期的干货：

优质设计素材合集分享网站 https://www.produkit.co/

如果你对于设计素材有搜集癖，或者正在寻找高素质的设计素材，那么这个名为 Produkit 的网站一定要收藏一下，这个网站的内容筛选核心是素质，他们会尽可能选择足够优质的最新设计素材，其中相当一部分都是付费的，不过通常价格不会太高，相应的，其中免费的素材的素质也大都是非常过硬的。

图片放大提升清晰度+优化 APP https://apps.apple.com/us/app/alto-ai-photo-enhancer/id1634488334

和以往所提供的工具不同，这个名为 Alto AI 的工具是一个移动端的 APP，你可以直接在自己的手机上将素质不佳的照片的效果直接提升起来。这个 APP 有 iOS 的版本也有 Android 的版本，完全免费。相信有很多同学有类似的需求，可以下载下来体验一下。

React 组件的可视化编辑器 https://aspect.app/

这个名为 Aspect 的工具也是为了最大程度地降低设计和开发的难度而诞生的工具，它本身是一个可以直接编辑 React 控件的编辑器，但是为了更加贴合大家的使用场景和需求，你可以直接直接在其他网页中找到你感觉可以用的空间，直接复制粘贴就能在这个编辑器当中进行处理了，当然它还支持直接导入 React 和 HTML 代码来进行编辑，不过最近他们还加入了将 Figma 控件直接转化为可用的 React 控件的功能，随后还会支持 Sketch 和 Adobe XD。

从图片中快速提取背景的工具 https://extractbg.com/

不得不说，用了那么多去背景的工具，从来没想过这个事儿反过来一样也非常有用。当你发现一张非常漂亮的图片，但是前景的人物或者元素你不需要的话，可以使用这个名为 Extract Bg 的服务，将前景的元素干掉，直接生成可以随便哪里都能用的背景图。这个工具和各种去背景的设计服务简直是绝配。

超智能的图片素材分层处理插件 https://www.figma.com/community/plugin/1123355421740529204/ClipDrop

和上一个服务截然不同的地方在于，这个立足于 Figma 的图片处理插件 ClipDrop 干脆就借助 AI 算法，直接把图片本身的前后景素材全部拆分开来，想用前景的素材就用前景的，想把背景拿走就把背景拿走，按需取用，可以说是非常自由了。当然你也可以当之前的那些去背景或者去前景元素的工具一样使用。

一键生成所有控件样式列表的插件 https://www.figma.com/community/plugin/1116018586739867857

随着今年 Figma 追加了「组件属性」这个功能之后，设计师在设置每个组件的状态的时候就更加方便了，不过在有的时候，还是需要将控件的不同样式和状态都罗列出来，在对接的时候可以更加直观地看到，而且你还可以根据需求改变这个表单的呈现方式、优先级排列等等。

根据LOGO自动生成品牌素材的服务 https://www.crowdspring.com/brand-studio/

品牌设计通常会需要完整的设计规范和大量的辅助素材作为补充，而这个名为 Brand Studio 的服务可以根据他们事先提供的海量数据，通过算法根据你所提供的品牌、行业等信息，帮你直接生成可用的品牌设计素材，各种不同功用的免费模板，包括商业提案、发票、传单模板、演示文稿模板等等等等。

100 款超级好用的按钮样式 CSS https://ui-buttons.web.app/

这是一个包含有 100 种截然不同的按钮的 CSS 代码，它所提供的这些素材并不只是静态的样式，还包含有各种个样的动画效果，方便设计师和开发者直接一键使用。当你选好感兴趣的样式之后，点击进去，直接复制这个按钮对应的 CSS 和 HTML 代码，相当方便了。

成长路上有踩过坑，有平平坦坦，也有收获的高光时刻，本篇文章将分享我这 7 年的设计工作与成长历程，分享我在其中的心得感悟，希望能与你共勉～

毕业一年从小公司到天猫设计师，我是如何快速成长的？ 编者注：一个非科班的毕业生，用一年时间从创业公司跃升至天猫设计师，这一年时间他用哪些方法驱动自己，有哪些让他快速成长的学习方法？

阅读文章 >

在一线城市漂泊，最不差的大概就是焦虑感，年龄的焦虑、性别的焦虑、未来的焦虑，尤其每天身边、网络中都可以看到很多优秀的存在与新起，为了解这些优秀的存在，以我自身视角，大致把他们划分为三类人群：1、遥不可及的高峰；2、可复用能量的榜样；3、未来的自己；究其根本，我焦虑的所在是希望能够通过借鉴榜样的力量成就未来更好的自己。

我，一名处于 30+阶段的在职 UI 设计，也更希望能通过一些知识、经验的沉淀与积累，达到职场、生活双得意的美好愿景，过程中难免有急功近利的时候，也有踩坑放弃，或迷茫质疑的时刻，因此以本篇记录下我的经历感悟，若你正在面对同样的问题，希望你能从中收获一些解决的灵感与思路，参考使用。

自我觉醒有七个阶段：动物本能、自我反思、管控情绪、知行合一、专注忘我、利他之心以及开悟觉醒，这个过程其实就是心智不断提升的过程，也是正视自己本身、进阶提升的过程。

如此回顾我过去几年的大部分时间都只是遵循了本能去行动，即便知道要反思、管控与知行合一，但也会潜意识偷懒，只做到流水账似反思，负罪式谴责和 flag 立了又倒的程度。

想要避坑上述状况，我们可以结合设计产品的思维，去设计属于自己的曲线人生，那就需要先明确提升目的与方向，做好规划安排，再去实践中验证，找出适合自己的成长之路，这个过程中我们也需要保持正向的心态，给予我们前行的动力。

1. 定目标 做主动成长者，有针对性的学习，这是关键的第一步，反思以往囤课、零散学习的“绕路”经历，制定有效的目标更能为我之后的行动指明方向，并且成为一种对齐标杆，避免中途偏离太远；

（1）什么是有效目标？

有效目标基于 SMART 法则理念，具有清晰、明确、可量化、强相关以及时限性这五个特点，是那些你完成之后可以勾掉，并有收获正向价值的结果，即罗列 todolist 清单，例如：今天五点之前产出一版 XX 项目首页风格设计方案，对接 XX 负责人以待提案审核；

（2）如何制定有效目标？

赖德·卡罗尔的《子弹笔记》这本书中就有提到目标的设定方法，有效目标可以分为长期目标、短期目标、执行目标及停顿目标；

长期目标

选择周期：根据自己所处的人生阶段，选择周期时长，可以是五年、十年，也可选择一年、三年，我是以 3 年为一个长周期；

过去 3 年：首先罗列出过去 3 年内，我经历的高光时刻，例如职场中的收获成长、生活经历的趣事见闻等；

3 年以后：然后重启一张新的清单，罗列 3 年后我希望记录下哪些内容，按优先级排序，从中选出一个最主要的目标，以一个专注点去全身心投入；

温馨提示：长期目标需要对应场景预期，让自己憧憬并有动力去实现，例如 3 年后我要成为行业中的设计专家、拥有圈层影响力，那达成之后我要做什么事情呢？是要积累人脉实现地理自由，还是进行知识讲座等，为目标设立完成标志与应用场景。

短期目标

也叫分解冲刺目标，即短时间内完成的单个小目标，传统阶段目标会随着时间的拉长，动力逐渐下降；而把目标分解为多个独立的冲刺目标，如此就可以在一定程度上保持动力的输出与激活，增加目标完成的几率；

例如图中我的进度一般为三周发表一篇设计类文章，其中从选题到书写再到最后的发布，每一项都是可行的冲刺目标；

短期目标设立原则有三：

从简单的开始，让自己能快速入门上手； 步骤清晰可行，如发表文章的时间流程，先通过网络搜索或请教有经验的前辈，了解做一件事需要哪些步骤，再制定短期冲刺目标； 短期内完成，常规设定为 1-2 周左右，最长也要控制在一个月内，超过的则需要继续拆解细分，避免时间太长而消耗自己的意志力。 温馨提示：短期目标可以让我们在单独的小目标阶段中保持一定的动力输出，并在进行下一个独立小目标时可以快速激活状态；同理在设计项目中，也可以具有“最小可交付”的思维，短期内先产出目标 1.0 版本，在实践中总结经验，再进行优化迭代的循环过程，即先完成再完美。

执行目标

执行目标就是把独立目标再细分，具体到日期、时间、时长为记录，即每天的 todolist 来源；

例如 7 月 1 日，浏览内容源网站，记录 10 个备选主题，预计总用时 1 小时；7 月 2 日，优选 2-3 个主题，记录主题来源，预计用时 1 小时；等等。

我们每一天都会存在一些不确定性，比如工作上的突发事项、任务安排变动等，当遇到自己的目标实际完成时间与计划不一样，该怎么办呢？

这里我们就可以善用截止日期这个设定，以它为验收成果与暂停反思的时间点，思考这个目标是否还值得继续，是否给自己或他人带去价值，之前完成的进度、效率如何，还有没有改进与调整的空间，为后续目标进行优化与及时止损。

温馨提示：细分到每日待办的事项中要与自己的年度目标相关联，若充斥了大部分的紧急临时待办，那么就需要自查进行目标调整啦！以截止日期为一个验收时间点，暂停反思可以让自己更明确目标的可行程度与价值，为后续优化提供助益，也能及时止损，减少踩坑几率。

停顿目标

设计类工作很多时候需要灵感，它区别于其他可被周密安排的事项，例如学习一门课，我们可以详细计划如何去听课、如何记笔记等，但设计一个项目方案时则需要灵感爆发的支持，如果卡在瓶颈期或没有灵感时，我就会快速制定停顿目标，即与主目标无关，短期且独立，能够为自己带来成就感的小事，例如做手账排版与记录，与家人一起出门散散步，下班去超市购买喜欢的食材等日常生活中会做的事情；

制定停顿目标需要明确以下 4 个点：

短时间可做，例如 1-2 个小时就可以完成的事； 容易完成，提升自信心，如收拾书桌、整理衣橱、更换床单用品等，都是可以让自己获得舒适与开心的事； 与困扰自己的主目标无关，短暂的抽离，以新的视角与思维获取灵感； 停顿目标可随主目标进行或大或小的调整，停顿目标过大时也需要细化拆分，逐一完成即可； 温馨提示：停顿目标只是作为环境与思维的抽离，让自己能换个新的视角，适当放松一下，所以无需太大压力或周密计划，小到去买个菜、享受一个下午茶都是可以哒～

2. 列规划 有了目标与方向，我们还需要具体执行的内容，首先进行能力梳理，即我们需要具备哪些能力才能更好的达成有效目标；

这里以 UI 设计师 的能力模型为例，可分为 3 大类：

基础的模型框架仅是范围的概念参考，还需结合市场的实际需求去对标具体能力，关于市场的实际需求，最直观的方式就是搜索招聘网站，精选 5 家最想去的公司，找到岗位的招聘信息，汇总其中的能力关键点；筛选其中自己不具备的能力或弱项，针对性的补充提升。

其次就是确定学习提升的途径：

（1）自主学习

如果自己有足够的专注力与明确的方向计划，可以优选第一种途径，它可以让我们对目标有个基础认知，并能低成本快速试错，方便调整优化，或及时止损；

自主学习的方式有很多种，我们可以通过阅读专业类书籍沉淀理论基础，通过设计分享会、大厂公众号文章进行学习，还可通过一些社群、赛事活动提升自己的技能与项目沉淀，方法很多，通过实践精选几个适合自己的方式就可，然后就是交给时间去见证成果了。

（2）寻求指导

当迷茫没有目标的时候，寻找一位导师，跟着课程的知识体系，按进度去学习也是一个常见且高效的方式，寻求专业指导的前提是我们需要筛选对比，通过授课老师的资历背书、讲课方式、收获内容等方面，找出适合自己的课程体系，进行系统学习。

温馨提示：切忌贪多，行业瞬息万变，就像女生总觉得自己的衣橱里少那么一件衣服似的，我们在提升的迫切渴望中也总觉得自己缺乏很多，想学的、需要学的也很多，此时仍需要我们按捺一下躁动的内心，一个类目只精选一门即可，只要认真对待，通过体系的学习我们至少可以算是“师傅领进门”，掌握了基础理论与技法，剩下的就是“修行在个人”，需要日后在工作中通过真实项目、经历去检验、不断沉淀的过程。

3. 去践行 不要在没有行动与经历的情况下为自己先设定“不行”的限制，我们把目标由大拆解细分到一个个小点，也是为了能够快速明确的上手去做；践行过程中除行动本身，我们还需要做好 2 点：

（1）阶段复盘

阶段复盘可以看作是一种自我调节机制，在践行过程中定期反思，通过反思审视自己，让我们从目标计划本身抽离，以旁观视角思考周身的事情及其价值，是一个自己跟自己学习的过程，看清问题真相，避免重复犯错。

那如何进行复盘呢？这里我分享我学到的 3 个复盘模版，工具仅供参考，适不适合还是要结合自身去应用才可！

（2）奖励机制

必要的正向反馈与鼓励，也是项目执行过程中必不可少的一环；

正如我们对游戏的痴迷，也是因为每次通关的成就感、获得的装备奖励等，让自己充满信心与激情；同样的心理应用到我们的规划体系中，我们可以尝试让它变得很有趣，例如把每个阶段、每个项目比作一个关卡，当成功通关时，可以给予自己夸赞鼓励，提升大脑潜意识的满足感；也可以通过一顿美食犒劳自己，当完成一个中级/满级目标的时候，奖励自己一场说走就走的旅行，都是很棒的方式，给予自己一定的放松享受时光，还能开拓视野，从中收获更多其他有价值的存在。

温馨提示：只有正视自己，不断的激励自己，才有满满的动力去迎接想要的未来～

4. 正心态 心态 1: 勇于试错

只要朝着目标深耕，大胆尝试，允许犯错，这是很重要的心态之一；

因为我自己吃过几次反复犹豫而错失良机的亏，所以现在但凡有想法，有下一步要做什么的指向，我会优先选择去做，这样的本质原因就一个“不让想法落空”；

我所理解的面对新挑战或机遇时，我们需要以成长型思维去认知自己、观察新事物，尝试接触了解，然后在倾心经历、记录实际行动所获后，客观分析这个事物给予我们的结果，再以批判性思考去全面认知它，包括重新审视自身的优点与不足，认知自己的极限点，接受未知、坦然面对，最后思考下一个阶段可行的提升优化方案，不断提炼属于自己的运行体系，而非再度陷入否定/肆意放纵的僵局。

与其询问他人“我能去做/去学 XX” “我还来得及改变吗？”之类的话题，何不多关注“我想达成 XX 目标，目前我拥有哪些相关能力，还需要补充什么，如何有效补充……”然后落实到实践中去反复验证、优化迭代；

温馨提示：简单来想，勇于试错的底层逻辑是：全力以赴的行动 – 出现问题 – 拆解分离 – 多选择方案 – 逐一践行 – 反复检验 – 达成目标 – 复盘反思 – 复用/沉淀知识体系，化繁为简，这是一个循环的过程。

心态 2：长期主义

“罗马不是一日建成的”，在我们的人生中，会经历不同的阶段、有不同的愿景与目标，我们想要成长与提升，需要沉下心来脚踏实地的干事儿，经过长期的积累与沉淀，拥有扎实的基础与核心竞争力，才能带领自己突破每一个瓶颈，达成所愿；

心态 3：利他复利

利他即自己掌握的知识能力能够帮助到他人，复利是努力使一件事物按指数增长的一种思维方式，这两种思维都有一个普通人可以马上开始且时间增值最快速的起步方式 — 分享；

通过输出倒逼输入、输入促进输出的循环模式进行分享，把简单的事情反复做，反复的事情认真做，逐步建立影响力，只要一直在场，有效进行，就有机会获得翻倍成果，不论是自身、团队或者被影响到的其他人。

我们总会在某些时候，对于过去自己所做的决定有所后悔或遗憾，想象着“如果当时我做了别的选择……”，但幻想终归是“如果”的假设，我没有时光机可以倒退回去，索性就总结了过去的成长误区，以对标现在的行动，时时警醒自己，以避免重复遗憾的发生。

误区一：沉迷知识付费

我最“疯狂”的时期大概就是 20 年与 21 年，在这之前的几年虽也有报课学习，但数量有所控制并且只注重在设计领域，例如交互、C4D、UI 进阶等；

近两年伴随着疫情影响，学习思维的转变，我开始拓展了其他方面的知识接触，包括参加读书会、线下讲座、理财课、手账等一切我喜欢、觉得不错的内容，这样的情况下往往会出现两种问题：

囤货式学习

不管三七二十一，只要自己觉得有用，就“囤”，然后根据开课日期及上课时间安排去学，我记得曾经有一年是 4 月底体验完 python 的 7 天入门后，报名正式课，并选择了延期 9 个月直到次年 2 月才开始，结果到了快开课的时候，我发现自己短期内又安排了其他“不错”的课，无奈只能同时进行，但也总有取舍，而 python 就是被我暂时舍掉的那一个，舍弃原因定的是“暂时用不到”，然后慢慢失去热情与动力，也就不了了之了；

并且囤货式学习总会让自己处于忙乱、被动之中，形成逆反心理；

我先浅算了下 20 年-21 年报名学习的课程数量，分别为 20 年 17 门，21 年 26 门，这还不算额外赠送的一些福利课，这些课程安排让我除去必要的工作时间外，基本全部“奉献”给了书桌这一亩三分地，平均最多时一个月有 2-3 门同步并行的课，能穿插就穿插学，有重叠的部分就做下取舍，然后再找其他时间补回来，大量减少了社交、娱乐活动，这期间让我出现了“报复性娱乐”、“阶段性摆烂”等状况。

零散且皮毛

没有明确系统的课程类目，仅靠喜欢、想学、觉得有用而囤，面临的第二个问题就是知识零散且皮毛，我基本上是学完设计理论，接着学理财，穿插练瑜伽，时不时还会整两句英文练一练，每门课程都只是阶段性了解了体系结构的一小部分，却忽略了深挖根本，与形成完整的体系闭环；到面对每一个可能的机会点时，总会后知后觉的想自己好像没有什么拿得出手的作品。

误区二：学 = 会？

“糟糕的坚持，也好过什么都没做”，每当我遇到课时撞车或者慵懒因子冒头时，我总会抱着这个想法，然后采取的行动之一竟是一心二用，比如慵懒因子冒头的时候，我会进入课程直播，当作背景音乐播放，偶尔也会参与群内互动，听的过程中伴随”啊，原来如此“或者“这个我知道”的感叹，结束课程后就会觉得自己基本掌握了这个课程内容，大概率也不会再回看复习呀，或者记录笔记等等；

如此也忽略了学后的实践与应用掌握，待到下次再进入类似的课程学习时，又会旧景重现的发出同样的感叹，似曾相识的感觉，或许会令自己尴尬的回想到上次的课程，或许也就一笑而过了。

误区三：早晚用得上

不论知识或灵感，先码住收藏的心理，让我的收藏夹明明上千的干货、素材，但每到项目的时候自己仍会重新检索，这种循环除了让自己的本地存储负担更大，也起不到知识的本来价值；

除了狗熊掰棒子似的遗忘，或回归“填鸭式学习”的泥沼，早晚用的上这个想法使得这些内容于我而言只空有其表，也渐渐迷失了自己的初衷，忽略问题的存在，进入恶性循环的状态。

总会有一个契机促使我们发生改变，这也是自我觉醒的前提；我是从意识到焦虑带给我的影响开始，不再接受“摆烂”与“躺平”，选择一条对我来说具有挑战的道路；

在初期的启航之旅中，我确定了属于自己的有效目标，拆解罗列规划方案，并且仍在不断进行挑战的过程中，以上提到的方法与技巧都是亲测有效的内容，希望看到的你能从中收获灵感，选择适合自己的方法进行改变与提升。

最后分享我很喜欢的一句话：

不要过度拘泥于曾经的得失，而是要享受当下，放眼未来，才能成为自己想成为的那个人，最终心成事享！

加油吧～设计师们～

声明：图中 3D 插画素材来自 Ouch!

成长路上有踩过坑，有平平坦坦，也有收获的高光时刻，本篇文章将分享我这 7 年的设计工作与成长历程，分享我在其中的心得感悟，希望能与你共勉～

毕业一年从小公司到天猫设计师，我是如何快速成长的？ 编者注：一个非科班的毕业生，用一年时间从创业公司跃升至天猫设计师，这一年时间他用哪些方法驱动自己，有哪些让他快速成长的学习方法？

阅读文章 >

在一线城市漂泊，最不差的大概就是焦虑感，年龄的焦虑、性别的焦虑、未来的焦虑，尤其每天身边、网络中都可以看到很多优秀的存在与新起，为了解这些优秀的存在，以我自身视角，大致把他们划分为三类人群：1、遥不可及的高峰；2、可复用能量的榜样；3、未来的自己；究其根本，我焦虑的所在是希望能够通过借鉴榜样的力量成就未来更好的自己。

我，一名处于 30+阶段的在职 UI 设计，也更希望能通过一些知识、经验的沉淀与积累，达到职场、生活双得意的美好愿景，过程中难免有急功近利的时候，也有踩坑放弃，或迷茫质疑的时刻，因此以本篇记录下我的经历感悟，若你正在面对同样的问题，希望你能从中收获一些解决的灵感与思路，参考使用。

自我觉醒有七个阶段：动物本能、自我反思、管控情绪、知行合一、专注忘我、利他之心以及开悟觉醒，这个过程其实就是心智不断提升的过程，也是正视自己本身、进阶提升的过程。

如此回顾我过去几年的大部分时间都只是遵循了本能去行动，即便知道要反思、管控与知行合一，但也会潜意识偷懒，只做到流水账似反思，负罪式谴责和 flag 立了又倒的程度。

想要避坑上述状况，我们可以结合设计产品的思维，去设计属于自己的曲线人生，那就需要先明确提升目的与方向，做好规划安排，再去实践中验证，找出适合自己的成长之路，这个过程中我们也需要保持正向的心态，给予我们前行的动力。

1. 定目标 做主动成长者，有针对性的学习，这是关键的第一步，反思以往囤课、零散学习的“绕路”经历，制定有效的目标更能为我之后的行动指明方向，并且成为一种对齐标杆，避免中途偏离太远；

（1）什么是有效目标？

有效目标基于 SMART 法则理念，具有清晰、明确、可量化、强相关以及时限性这五个特点，是那些你完成之后可以勾掉，并有收获正向价值的结果，即罗列 todolist 清单，例如：今天五点之前产出一版 XX 项目首页风格设计方案，对接 XX 负责人以待提案审核；

（2）如何制定有效目标？

赖德·卡罗尔的《子弹笔记》这本书中就有提到目标的设定方法，有效目标可以分为长期目标、短期目标、执行目标及停顿目标；

长期目标

选择周期：根据自己所处的人生阶段，选择周期时长，可以是五年、十年，也可选择一年、三年，我是以 3 年为一个长周期；

过去 3 年：首先罗列出过去 3 年内，我经历的高光时刻，例如职场中的收获成长、生活经历的趣事见闻等；

3 年以后：然后重启一张新的清单，罗列 3 年后我希望记录下哪些内容，按优先级排序，从中选出一个最主要的目标，以一个专注点去全身心投入；

温馨提示：长期目标需要对应场景预期，让自己憧憬并有动力去实现，例如 3 年后我要成为行业中的设计专家、拥有圈层影响力，那达成之后我要做什么事情呢？是要积累人脉实现地理自由，还是进行知识讲座等，为目标设立完成标志与应用场景。

短期目标

也叫分解冲刺目标，即短时间内完成的单个小目标，传统阶段目标会随着时间的拉长，动力逐渐下降；而把目标分解为多个独立的冲刺目标，如此就可以在一定程度上保持动力的输出与激活，增加目标完成的几率；

例如图中我的进度一般为三周发表一篇设计类文章，其中从选题到书写再到最后的发布，每一项都是可行的冲刺目标；

短期目标设立原则有三：

从简单的开始，让自己能快速入门上手； 步骤清晰可行，如发表文章的时间流程，先通过网络搜索或请教有经验的前辈，了解做一件事需要哪些步骤，再制定短期冲刺目标； 短期内完成，常规设定为 1-2 周左右，最长也要控制在一个月内，超过的则需要继续拆解细分，避免时间太长而消耗自己的意志力。 温馨提示：短期目标可以让我们在单独的小目标阶段中保持一定的动力输出，并在进行下一个独立小目标时可以快速激活状态；同理在设计项目中，也可以具有“最小可交付”的思维，短期内先产出目标 1.0 版本，在实践中总结经验，再进行优化迭代的循环过程，即先完成再完美。

执行目标

执行目标就是把独立目标再细分，具体到日期、时间、时长为记录，即每天的 todolist 来源；

例如 7 月 1 日，浏览内容源网站，记录 10 个备选主题，预计总用时 1 小时；7 月 2 日，优选 2-3 个主题，记录主题来源，预计用时 1 小时；等等。

我们每一天都会存在一些不确定性，比如工作上的突发事项、任务安排变动等，当遇到自己的目标实际完成时间与计划不一样，该怎么办呢？

这里我们就可以善用截止日期这个设定，以它为验收成果与暂停反思的时间点，思考这个目标是否还值得继续，是否给自己或他人带去价值，之前完成的进度、效率如何，还有没有改进与调整的空间，为后续目标进行优化与及时止损。

温馨提示：细分到每日待办的事项中要与自己的年度目标相关联，若充斥了大部分的紧急临时待办，那么就需要自查进行目标调整啦！以截止日期为一个验收时间点，暂停反思可以让自己更明确目标的可行程度与价值，为后续优化提供助益，也能及时止损，减少踩坑几率。

停顿目标

设计类工作很多时候需要灵感，它区别于其他可被周密安排的事项，例如学习一门课，我们可以详细计划如何去听课、如何记笔记等，但设计一个项目方案时则需要灵感爆发的支持，如果卡在瓶颈期或没有灵感时，我就会快速制定停顿目标，即与主目标无关，短期且独立，能够为自己带来成就感的小事，例如做手账排版与记录，与家人一起出门散散步，下班去超市购买喜欢的食材等日常生活中会做的事情；

制定停顿目标需要明确以下 4 个点：

短时间可做，例如 1-2 个小时就可以完成的事； 容易完成，提升自信心，如收拾书桌、整理衣橱、更换床单用品等，都是可以让自己获得舒适与开心的事； 与困扰自己的主目标无关，短暂的抽离，以新的视角与思维获取灵感； 停顿目标可随主目标进行或大或小的调整，停顿目标过大时也需要细化拆分，逐一完成即可； 温馨提示：停顿目标只是作为环境与思维的抽离，让自己能换个新的视角，适当放松一下，所以无需太大压力或周密计划，小到去买个菜、享受一个下午茶都是可以哒～

2. 列规划 有了目标与方向，我们还需要具体执行的内容，首先进行能力梳理，即我们需要具备哪些能力才能更好的达成有效目标；

这里以 UI 设计师 的能力模型为例，可分为 3 大类：

基础的模型框架仅是范围的概念参考，还需结合市场的实际需求去对标具体能力，关于市场的实际需求，最直观的方式就是搜索招聘网站，精选 5 家最想去的公司，找到岗位的招聘信息，汇总其中的能力关键点；筛选其中自己不具备的能力或弱项，针对性的补充提升。

其次就是确定学习提升的途径：

（1）自主学习

如果自己有足够的专注力与明确的方向计划，可以优选第一种途径，它可以让我们对目标有个基础认知，并能低成本快速试错，方便调整优化，或及时止损；

自主学习的方式有很多种，我们可以通过阅读专业类书籍沉淀理论基础，通过设计分享会、大厂公众号文章进行学习，还可通过一些社群、赛事活动提升自己的技能与项目沉淀，方法很多，通过实践精选几个适合自己的方式就可，然后就是交给时间去见证成果了。

（2）寻求指导

当迷茫没有目标的时候，寻找一位导师，跟着课程的知识体系，按进度去学习也是一个常见且高效的方式，寻求专业指导的前提是我们需要筛选对比，通过授课老师的资历背书、讲课方式、收获内容等方面，找出适合自己的课程体系，进行系统学习。

温馨提示：切忌贪多，行业瞬息万变，就像女生总觉得自己的衣橱里少那么一件衣服似的，我们在提升的迫切渴望中也总觉得自己缺乏很多，想学的、需要学的也很多，此时仍需要我们按捺一下躁动的内心，一个类目只精选一门即可，只要认真对待，通过体系的学习我们至少可以算是“师傅领进门”，掌握了基础理论与技法，剩下的就是“修行在个人”，需要日后在工作中通过真实项目、经历去检验、不断沉淀的过程。

3. 去践行 不要在没有行动与经历的情况下为自己先设定“不行”的限制，我们把目标由大拆解细分到一个个小点，也是为了能够快速明确的上手去做；践行过程中除行动本身，我们还需要做好 2 点：

（1）阶段复盘

阶段复盘可以看作是一种自我调节机制，在践行过程中定期反思，通过反思审视自己，让我们从目标计划本身抽离，以旁观视角思考周身的事情及其价值，是一个自己跟自己学习的过程，看清问题真相，避免重复犯错。

那如何进行复盘呢？这里我分享我学到的 3 个复盘模版，工具仅供参考，适不适合还是要结合自身去应用才可！

（2）奖励机制

必要的正向反馈与鼓励，也是项目执行过程中必不可少的一环；

正如我们对游戏的痴迷，也是因为每次通关的成就感、获得的装备奖励等，让自己充满信心与激情；同样的心理应用到我们的规划体系中，我们可以尝试让它变得很有趣，例如把每个阶段、每个项目比作一个关卡，当成功通关时，可以给予自己夸赞鼓励，提升大脑潜意识的满足感；也可以通过一顿美食犒劳自己，当完成一个中级/满级目标的时候，奖励自己一场说走就走的旅行，都是很棒的方式，给予自己一定的放松享受时光，还能开拓视野，从中收获更多其他有价值的存在。

温馨提示：只有正视自己，不断的激励自己，才有满满的动力去迎接想要的未来～

4. 正心态 心态 1: 勇于试错

只要朝着目标深耕，大胆尝试，允许犯错，这是很重要的心态之一；

因为我自己吃过几次反复犹豫而错失良机的亏，所以现在但凡有想法，有下一步要做什么的指向，我会优先选择去做，这样的本质原因就一个“不让想法落空”；

我所理解的面对新挑战或机遇时，我们需要以成长型思维去认知自己、观察新事物，尝试接触了解，然后在倾心经历、记录实际行动所获后，客观分析这个事物给予我们的结果，再以批判性思考去全面认知它，包括重新审视自身的优点与不足，认知自己的极限点，接受未知、坦然面对，最后思考下一个阶段可行的提升优化方案，不断提炼属于自己的运行体系，而非再度陷入否定/肆意放纵的僵局。

与其询问他人“我能去做/去学 XX” “我还来得及改变吗？”之类的话题，何不多关注“我想达成 XX 目标，目前我拥有哪些相关能力，还需要补充什么，如何有效补充……”然后落实到实践中去反复验证、优化迭代；

温馨提示：简单来想，勇于试错的底层逻辑是：全力以赴的行动 – 出现问题 – 拆解分离 – 多选择方案 – 逐一践行 – 反复检验 – 达成目标 – 复盘反思 – 复用/沉淀知识体系，化繁为简，这是一个循环的过程。

心态 2：长期主义

“罗马不是一日建成的”，在我们的人生中，会经历不同的阶段、有不同的愿景与目标，我们想要成长与提升，需要沉下心来脚踏实地的干事儿，经过长期的积累与沉淀，拥有扎实的基础与核心竞争力，才能带领自己突破每一个瓶颈，达成所愿；

心态 3：利他复利

利他即自己掌握的知识能力能够帮助到他人，复利是努力使一件事物按指数增长的一种思维方式，这两种思维都有一个普通人可以马上开始且时间增值最快速的起步方式 — 分享；

通过输出倒逼输入、输入促进输出的循环模式进行分享，把简单的事情反复做，反复的事情认真做，逐步建立影响力，只要一直在场，有效进行，就有机会获得翻倍成果，不论是自身、团队或者被影响到的其他人。

我们总会在某些时候，对于过去自己所做的决定有所后悔或遗憾，想象着“如果当时我做了别的选择……”，但幻想终归是“如果”的假设，我没有时光机可以倒退回去，索性就总结了过去的成长误区，以对标现在的行动，时时警醒自己，以避免重复遗憾的发生。

误区一：沉迷知识付费

我最“疯狂”的时期大概就是 20 年与 21 年，在这之前的几年虽也有报课学习，但数量有所控制并且只注重在设计领域，例如交互、C4D、UI 进阶等；

近两年伴随着疫情影响，学习思维的转变，我开始拓展了其他方面的知识接触，包括参加读书会、线下讲座、理财课、手账等一切我喜欢、觉得不错的内容，这样的情况下往往会出现两种问题：

囤货式学习

不管三七二十一，只要自己觉得有用，就“囤”，然后根据开课日期及上课时间安排去学，我记得曾经有一年是 4 月底体验完 python 的 7 天入门后，报名正式课，并选择了延期 9 个月直到次年 2 月才开始，结果到了快开课的时候，我发现自己短期内又安排了其他“不错”的课，无奈只能同时进行，但也总有取舍，而 python 就是被我暂时舍掉的那一个，舍弃原因定的是“暂时用不到”，然后慢慢失去热情与动力，也就不了了之了；

并且囤货式学习总会让自己处于忙乱、被动之中，形成逆反心理；

我先浅算了下 20 年-21 年报名学习的课程数量，分别为 20 年 17 门，21 年 26 门，这还不算额外赠送的一些福利课，这些课程安排让我除去必要的工作时间外，基本全部“奉献”给了书桌这一亩三分地，平均最多时一个月有 2-3 门同步并行的课，能穿插就穿插学，有重叠的部分就做下取舍，然后再找其他时间补回来，大量减少了社交、娱乐活动，这期间让我出现了“报复性娱乐”、“阶段性摆烂”等状况。

零散且皮毛

没有明确系统的课程类目，仅靠喜欢、想学、觉得有用而囤，面临的第二个问题就是知识零散且皮毛，我基本上是学完设计理论，接着学理财，穿插练瑜伽，时不时还会整两句英文练一练，每门课程都只是阶段性了解了体系结构的一小部分，却忽略了深挖根本，与形成完整的体系闭环；到面对每一个可能的机会点时，总会后知后觉的想自己好像没有什么拿得出手的作品。

误区二：学 = 会？

“糟糕的坚持，也好过什么都没做”，每当我遇到课时撞车或者慵懒因子冒头时，我总会抱着这个想法，然后采取的行动之一竟是一心二用，比如慵懒因子冒头的时候，我会进入课程直播，当作背景音乐播放，偶尔也会参与群内互动，听的过程中伴随”啊，原来如此“或者“这个我知道”的感叹，结束课程后就会觉得自己基本掌握了这个课程内容，大概率也不会再回看复习呀，或者记录笔记等等；

如此也忽略了学后的实践与应用掌握，待到下次再进入类似的课程学习时，又会旧景重现的发出同样的感叹，似曾相识的感觉，或许会令自己尴尬的回想到上次的课程，或许也就一笑而过了。

误区三：早晚用得上

不论知识或灵感，先码住收藏的心理，让我的收藏夹明明上千的干货、素材，但每到项目的时候自己仍会重新检索，这种循环除了让自己的本地存储负担更大，也起不到知识的本来价值；

除了狗熊掰棒子似的遗忘，或回归“填鸭式学习”的泥沼，早晚用的上这个想法使得这些内容于我而言只空有其表，也渐渐迷失了自己的初衷，忽略问题的存在，进入恶性循环的状态。

总会有一个契机促使我们发生改变，这也是自我觉醒的前提；我是从意识到焦虑带给我的影响开始，不再接受“摆烂”与“躺平”，选择一条对我来说具有挑战的道路；

在初期的启航之旅中，我确定了属于自己的有效目标，拆解罗列规划方案，并且仍在不断进行挑战的过程中，以上提到的方法与技巧都是亲测有效的内容，希望看到的你能从中收获灵感，选择适合自己的方法进行改变与提升。

最后分享我很喜欢的一句话：

不要过度拘泥于曾经的得失，而是要享受当下，放眼未来，才能成为自己想成为的那个人，最终心成事享！

加油吧～设计师们～

声明：图中 3D 插画素材来自 Ouch!

周二早上好！现在你看到的是这个炎热的 7 月第最后一波干货，这一次所梳理的干货素材有一部分会更加偏向于前端和开发者，比如可以直接复制的按钮 CSS 代码素材和可以直接编辑样式的 React 代码编辑器，当然也有很多东西是设计师甚至非设计从业者都能用得上好东西，比如借助机器学习直接给图片分层的插件，单独提取图片背景的工具，一次性生成品牌相关的主要素材和模板的服务，总会有那么一款素材正好是你需要的。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年7月精选实用设计干货合集 7月第1波设计干货合集来了！

阅读文章 >

第二波！2022年7月精选实用设计干货合集 现在你看到的是7月第2波设计干货合集，不过严格意义上来说，这一波完全是干货合集中的合集。

阅读文章 >

第三波！2022年7月精选实用设计干货合集 周二早上好！

阅读文章 >

下面我们具体看看这一期的干货：

优质设计素材合集分享网站 https://www.produkit.co/

如果你对于设计素材有搜集癖，或者正在寻找高素质的设计素材，那么这个名为 Produkit 的网站一定要收藏一下，这个网站的内容筛选核心是素质，他们会尽可能选择足够优质的最新设计素材，其中相当一部分都是付费的，不过通常价格不会太高，相应的，其中免费的素材的素质也大都是非常过硬的。

图片放大提升清晰度+优化 APP https://apps.apple.com/us/app/alto-ai-photo-enhancer/id1634488334

和以往所提供的工具不同，这个名为 Alto AI 的工具是一个移动端的 APP，你可以直接在自己的手机上将素质不佳的照片的效果直接提升起来。这个 APP 有 iOS 的版本也有 Android 的版本，完全免费。相信有很多同学有类似的需求，可以下载下来体验一下。

React 组件的可视化编辑器 https://aspect.app/

这个名为 Aspect 的工具也是为了最大程度地降低设计和开发的难度而诞生的工具，它本身是一个可以直接编辑 React 控件的编辑器，但是为了更加贴合大家的使用场景和需求，你可以直接直接在其他网页中找到你感觉可以用的空间，直接复制粘贴就能在这个编辑器当中进行处理了，当然它还支持直接导入 React 和 HTML 代码来进行编辑，不过最近他们还加入了将 Figma 控件直接转化为可用的 React 控件的功能，随后还会支持 Sketch 和 Adobe XD。

从图片中快速提取背景的工具 https://extractbg.com/

不得不说，用了那么多去背景的工具，从来没想过这个事儿反过来一样也非常有用。当你发现一张非常漂亮的图片，但是前景的人物或者元素你不需要的话，可以使用这个名为 Extract Bg 的服务，将前景的元素干掉，直接生成可以随便哪里都能用的背景图。这个工具和各种去背景的设计服务简直是绝配。

超智能的图片素材分层处理插件 https://www.figma.com/community/plugin/1123355421740529204/ClipDrop

和上一个服务截然不同的地方在于，这个立足于 Figma 的图片处理插件 ClipDrop 干脆就借助 AI 算法，直接把图片本身的前后景素材全部拆分开来，想用前景的素材就用前景的，想把背景拿走就把背景拿走，按需取用，可以说是非常自由了。当然你也可以当之前的那些去背景或者去前景元素的工具一样使用。

一键生成所有控件样式列表的插件 https://www.figma.com/community/plugin/1116018586739867857

随着今年 Figma 追加了「组件属性」这个功能之后，设计师在设置每个组件的状态的时候就更加方便了，不过在有的时候，还是需要将控件的不同样式和状态都罗列出来，在对接的时候可以更加直观地看到，而且你还可以根据需求改变这个表单的呈现方式、优先级排列等等。

根据LOGO自动生成品牌素材的服务 https://www.crowdspring.com/brand-studio/

品牌设计通常会需要完整的设计规范和大量的辅助素材作为补充，而这个名为 Brand Studio 的服务可以根据他们事先提供的海量数据，通过算法根据你所提供的品牌、行业等信息，帮你直接生成可用的品牌设计素材，各种不同功用的免费模板，包括商业提案、发票、传单模板、演示文稿模板等等等等。

100 款超级好用的按钮样式 CSS https://ui-buttons.web.app/

这是一个包含有 100 种截然不同的按钮的 CSS 代码，它所提供的这些素材并不只是静态的样式，还包含有各种个样的动画效果，方便设计师和开发者直接一键使用。当你选好感兴趣的样式之后，点击进去，直接复制这个按钮对应的 CSS 和 HTML 代码，相当方便了。