“世界上为什么会有周报这个东西啊？”“大家 周报都弄了么？”“每天工作那么忙，还要写总结，真的好累啊！”

最近身边总听见大家的哀嚎声！！！我自己也是这样，每到快要总结的时候，就满面愁容，不知道从何处写起，但是愁归愁，总是要写的是不，周末在家写 周报 时总结了一些小技巧，在这里想和大家分享一下，大家有什么小技巧也可以告诉我哟。

更多总结撰写技巧：

设计师学会这个五步复盘法，让自己成长更快！ 设计师这样复盘成长更快 复盘，源自围棋术语。

阅读文章 >

设计师不会做总结汇报，执行再好也很难提升！ 当你有机会去独立负责一块业务设计需求的时候，你要关注的点已经不单纯只是局限执行层面了。

阅读文章 >

在页面流程中，当用户没有进行必填项操作时，点击操作按钮，这时候就会出现报错。那么针对于报错场景如何设计更合理，更科学呢？

本篇文章将和大家探讨 校验报错 如何设计更合理科学，本文大纲如下：

C 端报错设计 B 端报错设计 总结

抓住这4个核心，搞定UI中报错信息的用户体验设计 错误总是难免的。

阅读文章 >

1. C 端报错设计 C 端校验报错，大部分设计方案为：必填项未填写时，保存、提交等操作按钮置灰处理。

如下图所示，在添加银行卡流程中，当用户没有输入银行卡号时，如果用户点击下一步，该流程没办法继续下去，微信设计的逻辑是通过置灰「下一步」按钮让用户不可点，以此来解决报错校。微信发照片同理。

上述设计有一个好处，是避免用户犯错。如果按钮为正常可点击态，那么用户有去点击的概率，这样会有意或者无意中引导用户去犯错。所以目前针对于 C 端报错设计，大部分采用这种做法。

但必填项没操作，置灰处理的设计方式，仅限于简单的表单操作。

当表单填写较多，如下图所示，且只有两个表单是必填项。如果通过置灰按钮的话，用户很难直观的理解到，仅需要填写两个必填项，操作按钮就恢复正常态。

所以针对 C 端表单复杂的场景，合理的设计是：提交按钮正常态，通过 toast 提示报错的方式去提示用户。

而针对于格式错误校验，C 端常见的通过 toast 去提示告知用户，也有类似微信这种 tips 提示，但这种有一个缺点，就是内容区顶部如果有内容，会被遮挡住。优点则是持续展示给用户。

最后让我们看一个比较特殊的 C 端案例：登录场景。登录前，需要用户手动勾选服务条款和隐私政策。

按照上述说的，登录按钮应该置灰，为啥现在主流的登录按钮正常态呢？

因为用户很难去理解这个操作逻辑关联：需要先勾选服务条款和隐私条款，才能完成登录。 我们作为设计师，能知道这个关联关系，也是在设计前产品经理或业务方告诉过我们。

其次登录场景是 App 最重要的流程之一，所以为了保险起见，将按钮正常态，通过 tooltips 去提醒用户先勾选再登录，更加保险，让用户顺利完成操作。

2. B 端报错设计 B 端一大特点是：需要填写的表单内容多，且有些必填，有些选填。

如果通过按钮置灰去避免报错，那么用户在使用时，要时刻注意哪些必填，用户认知成本和操作成本高。

对于 B 端 PC 端，最合理的设计是通过原位红字提示告知用户。如下图所示：

这种做法的好处是，提示效率高，一次性就可以将所有的问题告诉给用户。避免出现重复报错的情况。

对于移动端，使用原位红字提示这种方式不太行。因为移动端的表单布局通常如下图所示，原位提示没有空间来展示。

采用 tosat 提示会比较好。如下图，这是支付宝一个表单填写页面。

3. 总结 C 端：

简单的表单操作且业务好理解的，可以通过操作按钮置灰，去规避错误报错。这部分支付宝、微信等主流 App 已经教育用户多年了。 对于业务逻辑比较难理解的，操作按钮正常态，用户点击操作按钮时，通过 toast、tooltips、tips 等方式告知用户。如登录等场景。 对于表单填写量较大，且有的选填，有的必填，则同第 2 点。 B 端：

PC 端的话，操作按钮正常态，通过原位红字提示告知用户。 移动端的话，操作按钮正常态，通过 toast 或者 tips 告知用户。 欢迎关注作者的微信公众号：「Echo的设计笔记」

在页面流程中，当用户没有进行必填项操作时，点击操作按钮，这时候就会出现报错。那么针对于报错场景如何设计更合理，更科学呢？

本篇文章将和大家探讨 校验报错 如何设计更合理科学，本文大纲如下：

C 端报错设计 B 端报错设计 总结

抓住这4个核心，搞定UI中报错信息的用户体验设计 错误总是难免的。

阅读文章 >

1. C 端报错设计 C 端校验报错，大部分设计方案为：必填项未填写时，保存、提交等操作按钮置灰处理。

如下图所示，在添加银行卡流程中，当用户没有输入银行卡号时，如果用户点击下一步，该流程没办法继续下去，微信设计的逻辑是通过置灰「下一步」按钮让用户不可点，以此来解决报错校。微信发照片同理。

上述设计有一个好处，是避免用户犯错。如果按钮为正常可点击态，那么用户有去点击的概率，这样会有意或者无意中引导用户去犯错。所以目前针对于 C 端报错设计，大部分采用这种做法。

但必填项没操作，置灰处理的设计方式，仅限于简单的表单操作。

当表单填写较多，如下图所示，且只有两个表单是必填项。如果通过置灰按钮的话，用户很难直观的理解到，仅需要填写两个必填项，操作按钮就恢复正常态。

所以针对 C 端表单复杂的场景，合理的设计是：提交按钮正常态，通过 toast 提示报错的方式去提示用户。

而针对于格式错误校验，C 端常见的通过 toast 去提示告知用户，也有类似微信这种 tips 提示，但这种有一个缺点，就是内容区顶部如果有内容，会被遮挡住。优点则是持续展示给用户。

最后让我们看一个比较特殊的 C 端案例：登录场景。登录前，需要用户手动勾选服务条款和隐私政策。

按照上述说的，登录按钮应该置灰，为啥现在主流的登录按钮正常态呢？

因为用户很难去理解这个操作逻辑关联：需要先勾选服务条款和隐私条款，才能完成登录。 我们作为设计师，能知道这个关联关系，也是在设计前产品经理或业务方告诉过我们。

其次登录场景是 App 最重要的流程之一，所以为了保险起见，将按钮正常态，通过 tooltips 去提醒用户先勾选再登录，更加保险，让用户顺利完成操作。

2. B 端报错设计 B 端一大特点是：需要填写的表单内容多，且有些必填，有些选填。

如果通过按钮置灰去避免报错，那么用户在使用时，要时刻注意哪些必填，用户认知成本和操作成本高。

对于 B 端 PC 端，最合理的设计是通过原位红字提示告知用户。如下图所示：

这种做法的好处是，提示效率高，一次性就可以将所有的问题告诉给用户。避免出现重复报错的情况。

对于移动端，使用原位红字提示这种方式不太行。因为移动端的表单布局通常如下图所示，原位提示没有空间来展示。

采用 tosat 提示会比较好。如下图，这是支付宝一个表单填写页面。

3. 总结 C 端：

简单的表单操作且业务好理解的，可以通过操作按钮置灰，去规避错误报错。这部分支付宝、微信等主流 App 已经教育用户多年了。 对于业务逻辑比较难理解的，操作按钮正常态，用户点击操作按钮时，通过 toast、tooltips、tips 等方式告知用户。如登录等场景。 对于表单填写量较大，且有的选填，有的必填，则同第 2 点。 B 端：

PC 端的话，操作按钮正常态，通过原位红字提示告知用户。 移动端的话，操作按钮正常态，通过 toast 或者 tips 告知用户。 欢迎关注作者的微信公众号：「Echo的设计笔记」

本文要推荐的「 dig.ccMixter 」是提供 免费音乐 素材下载的数据库网站，主要收录创作者上传到 ccMixter 网站的音乐，用户利用关键词或标签方式进行搜寻、筛选，每个音乐都能直接在线预览播放，网站主要使用 Creative Commons（CC 授权）和 TuneTrack 两种授权方式，只要标示作者就能免费下载，部分可用于商业用途。

免费可商用！提供超多风格音乐/音效素材下载的「Sampld」 本文要介绍的「Sampld」是一个免费下载、分享高音质免版权音乐音效平台，开发者考虑到当今社群媒体、短影片流行（像是 TikTok、Instagram 和 YouTube），希望提供让每个人都能轻松搜索并下载优质音乐素材的网站，以便在制作影片时作为背景音乐使用。

阅读文章 >

除此之外，dig.ccMixter 也精选了一些适合使用于影片制作、游戏开发的音乐素材，如果没有灵感，也能从这些音乐的标签延伸搜寻找出更多类似的音乐。标示为 CC-BY 授权方式能在标示作者后使用于个人或商业用途，CC-BY-NC 授权需要标示作者，但是不能用于商业用途。

dig.ccMixter 网站链接： http://dig.ccmixter.org/

使用教学

开启 dig.ccMixter 网站后直接从上方选单点选「tag search」以标签方式搜寻、筛选音乐，也可以直接使用关键词进行查找，除此之外，在「featured」还会有适合电影（影片）制作或游戏的精选音乐，也有可免费商业用途的 音乐素材 。

每个音乐都有标题和创作人，从前方的按钮可播放、在线预览或是下载 MP3 格式。

从「tag search」页面可针对音乐类型、乐器或风格进行筛选，如同标签功能，让搜寻范围逐渐缩小更能够找出自己想要的音乐素材。

右侧还会有一个「筛选器」可选择要显示的音乐授权方式，例如可供商业用途免费使用，或是免版税的免费 ccPlus 授权形式，对于要找商业用音乐来说会更有效率。

点选进入音乐页面后从左侧第二个按钮「下载」音乐，从页面中还会看到创作者姓名、标签和右侧的授权方式，如果要使用音乐时授权方式就很重要，点选标示可连接到相关说明。

下载前会有提示画面，举例来说，使用音乐时必须要标示原作者（来源），可以直接复制纯文本或是 HTML 程序代码使用，点选右侧「Download」就能下载 MP3 档案，如果标示为 CC-BY-NC 代表不可使用于商业用途。

dig.ccMixter 使用三种授权方式，可参考「Licenses」页面取得详细说明。

值得一试的三个理由：

免费音乐素材下载网站，收录超过百万首可做商业用途配乐 透过音乐类型、乐器、风格或是关键词进行搜寻 在线预览播放也能快速下载 MP3 格式

本文要推荐的「 dig.ccMixter 」是提供 免费音乐 素材下载的数据库网站，主要收录创作者上传到 ccMixter 网站的音乐，用户利用关键词或标签方式进行搜寻、筛选，每个音乐都能直接在线预览播放，网站主要使用 Creative Commons（CC 授权）和 TuneTrack 两种授权方式，只要标示作者就能免费下载，部分可用于商业用途。

免费可商用！提供超多风格音乐/音效素材下载的「Sampld」 本文要介绍的「Sampld」是一个免费下载、分享高音质免版权音乐音效平台，开发者考虑到当今社群媒体、短影片流行（像是 TikTok、Instagram 和 YouTube），希望提供让每个人都能轻松搜索并下载优质音乐素材的网站，以便在制作影片时作为背景音乐使用。

阅读文章 >

除此之外，dig.ccMixter 也精选了一些适合使用于影片制作、游戏开发的音乐素材，如果没有灵感，也能从这些音乐的标签延伸搜寻找出更多类似的音乐。标示为 CC-BY 授权方式能在标示作者后使用于个人或商业用途，CC-BY-NC 授权需要标示作者，但是不能用于商业用途。

dig.ccMixter 网站链接： http://dig.ccmixter.org/

使用教学

开启 dig.ccMixter 网站后直接从上方选单点选「tag search」以标签方式搜寻、筛选音乐，也可以直接使用关键词进行查找，除此之外，在「featured」还会有适合电影（影片）制作或游戏的精选音乐，也有可免费商业用途的 音乐素材 。

每个音乐都有标题和创作人，从前方的按钮可播放、在线预览或是下载 MP3 格式。

从「tag search」页面可针对音乐类型、乐器或风格进行筛选，如同标签功能，让搜寻范围逐渐缩小更能够找出自己想要的音乐素材。

右侧还会有一个「筛选器」可选择要显示的音乐授权方式，例如可供商业用途免费使用，或是免版税的免费 ccPlus 授权形式，对于要找商业用音乐来说会更有效率。

点选进入音乐页面后从左侧第二个按钮「下载」音乐，从页面中还会看到创作者姓名、标签和右侧的授权方式，如果要使用音乐时授权方式就很重要，点选标示可连接到相关说明。

下载前会有提示画面，举例来说，使用音乐时必须要标示原作者（来源），可以直接复制纯文本或是 HTML 程序代码使用，点选右侧「Download」就能下载 MP3 档案，如果标示为 CC-BY-NC 代表不可使用于商业用途。

dig.ccMixter 使用三种授权方式，可参考「Licenses」页面取得详细说明。

值得一试的三个理由：

免费音乐素材下载网站，收录超过百万首可做商业用途配乐 透过音乐类型、乐器、风格或是关键词进行搜寻 在线预览播放也能快速下载 MP3 格式

如何写出优秀的 UX 文案？ 在框架层除了界面设计和导航设计，还有一个非常重要的模块——信息设计。经常有设计师问我，信息设计属于交互或UI的设计范畴吗？我都会回答是的，因为我们每个设计师都肩负着信息传达设计的责任。

图1 信息设计与用户体验设计的关系

我将信息设计拆分为信息形式和信息内容，产品中所有可感知的元素都是信息内容，包括可见的文本、图片、视频，不可见的振动、声音……

图2 信息设计的分类

而这些内容被用户感知到的状态就是其形式，比如文本的字体、字号、颜色，图片的大小、清晰度、动静，声音的音量、音色、音调等。

今天我们要聊的 UX 文案，则隶属于文本信息设计，除了标签系统和数据内容之外，其他所有告知、引导、解释、说明性的文案都属于 UX 文案。

图3 UX文案与信息设计的关系

UX文案怎么写？来看看谷歌的方法总结 写作是很容易的，你要做的就是删掉那些错误词句。

阅读文章 >

以浏览器为例：

图4 各类文本信息举例示意

标签系统包括底部导航、各个设置项名称、各个站点的名称等

数据内容包括框内的热词、新闻的标题、来源、时间、评论等。

UX 文案则包括系统/功能当下所处的状态、操作前后的说明、状态、引导文案等。

在项目流程中，并没有明确规定 UX 文案的具体责任人（除了少数大厂有 UX writer 的角色），所以往往会出现产品、交互、视觉都以为是他人在负责，导致结果没人真正为文案负责的情况，所以我才倡导每一个设计师都要将其视为己任，以提升整体的产品体验。

1. WHAT | 什么是 UX 文案 ① UX 文案的起源

UX 文案，又称微文案（microcopy），由 Joshua Porter 在 2009 年在“Writing Microcopy”一文中提出。

图5 UX文案的案例

他在文章中介绍了一个电子商务网站。用户在该网站的购买流程中需要填写付款表单，但 5%-10%的交易由于地址填写错误而意外终止，导致了一部分转化的流失。当时 Porter 提供了一个修改方案是在地址栏下方增加了一行提示语：”请务必输入与您信用卡相关联的地址“。这个提示不仅为用户提供了正确的引导信息，改善了网站的转化率，也为网站带来了可观的收入。UX 文案由此诞生并取得了行业的重视。

② UX 文案的类型

Google 曾将 UX 文案总结为 8 大类：

图6 Google归纳的微文案类型

分别是：行动按钮、简介、导航按钮、确认信息、错误信息、隐私条款、加载页面、404 错误。也就是把标签系统和内容数据之外的信息都可以看做是 UX 文案（国内大厂的隐私条款是由法务撰写的，不属于 UX 文案的范畴）。

8 种类型不太好记忆，所以我将其归纳为 2 大类：

图5 悦姐归纳的微文案类型

名称类：主要包括按钮名称和链接名称； 说明类：包括操作前的规则、引导、预期说明，操作时的状态、进度、预期说明、操作后的（成功/失败）状态、结果、下一步引导说明等。 2. How | 如何撰写 UX 文案？ Google 曾介绍过撰写优秀 UX 文案的模型，我也是比较认同的，所以跟大家一起分享一下：

图6 Google的文案写作模型

在文案撰写之前，我们先要想清楚我们到底想通过文案传达什么信息？让这些文案符合写作的 3 个基本原则，然后再结合我们的品牌基调，看看以什么口吻和语气来传达这些信息与产品气质更一致。

① UX 文案写作 3 原则

UX 文案不同于营销文案，不是为了销售，吸引用户，追求让用户过目难忘。

图7 UX文案与营销文案的差异

而是以产品体验为目标，以简短的文字帮助用户在每个与产品交互的瞬间提供自然的对话，辅助用户快速准确地达成目标。

基于此，Google 设计师归纳了 UX 协作的 3 个原则，我调整了其顺序将其整理如下：

图8 UX文案写作3原则

实用性

结合奥卡姆剃刀原理：如无必要勿增实体。这个原理普适于所有功能、信息和元素，文案也不例外。任何一句文案，都要先考虑其价值。如果能通过形式明确传达信息的，就不应该增加文案徒增干扰。

图9 不重复显示文案

如很多表单，都会显示标签名，然后再在输入框内重复显示与标签名相同的引导提示（如左上图），这就属于显示了没有提供增量价值的文案，这种情况下输入框内不必显示引导文案。

相比上图中规中矩的表达方案，我更喜欢 Google 灵动的解决方案：

图10 Google关于输入框的提示方案

默认在输入框内显示引导提示，无标签名称，当用户开始输入后，引导提示上移变成标签名，框内显示输入的手机号。这个设计让默认界面简洁，输入过程也一直能知道应该输入什么内容。

文案除了有用以外，还要贴合场景，让用户能够通过文案预知下一步的行为或反馈。

图11 为下一步的行为提供预期

比如上图中，如果按钮是「下一步」用户就只能点击后才能从下一个界面上知道反馈，而「获取短信验证码」则提前告知了用户系统接下来的行为，让用户可以马上准备接收和输入验证码，增加了用户对系统和自身行为的掌控感。

清晰性

清晰性侧重文案要以用户视角出发，准确无歧义，易于用户理解。

比如要尽量避免技术术语：

图12 避免技术术语

这种研发术语自从设计师介入后，基本不会再出现了，研发同学每次遇到这些提示都会找产品或设计师要提示语（如果研发同学喜欢自己发挥，那用户就很有可能还会遇到上述的技术术语提示）。

再比如设计中比较常见的 CTA 按钮举例，为什么要用行动召唤按钮，也是因为行动召唤按钮更清晰，用户甚至可以忽略提示语，直接根据按钮的名称就做出选择：

图13 行动召唤按钮更清晰

学会这3个方面，帮你提高CTA按钮的点击率 怎样设计 CTA 按钮，能够增加点击率和转化率呢？

阅读文章 >

多数行动选择我们都可以这么处理，但是当用户的召唤行动本身具有取消涵义时，则不能再套用这个形式，否则又会出现歧义：

图14 行动召唤按钮具有取消涵义时的设计

比如，当询问用户是否要撤销输入时，如果同时用撤销和取消就会有些混淆，这个时候就建议将取消按钮，直接改为不撤销，让按钮涵义更清晰。

清晰的按钮不仅可以传递更有价值的信息，而且还可以促进功能的转化，带来巨大的业务价值，给大家举两个案例：

图14 UX文案的价值

第一个来自 Google。当 Google 把文案「Book a room」改成「Check availability」后，减轻了用户点击的压力，订单的转化率提升了 17%。

第二个来自滴滴。当滴滴把模糊的「查看详情」按钮改为清晰的「点击领取」按钮后，点击率提升了 287%。

这都属于改变文案，让文案的下一步行为更清晰，操作更明确所带来的价值提升。

简洁性

在表达清晰的基础上，还要力求简洁，减少用户的阅读成本。

图15 力求简洁

这就需要设计师惜字如金，不仅要去掉重复的提示，而且还要把提示中不影响信息传达的修饰语都去掉。甚至可以回到第一步，思考是否需要用提示语。比如 iPhone 登录时，如果密码输入错误，并不会显示提示，而是左右摇晃然后删除密码，让用户重新输入。

最后我们再以一个密码输入的案例，来串联 UX 文案协作的 3 原则：

图15 力求简洁

首先要确保文案的有用性，然后力求清晰、简洁、最后再加入下一步的引导说明，一个合格的 UX 文案就诞生了。

② UX 品牌文案

UX 文案的本质是产品与用户之间的对话。

我们需要考虑产品的定位（自己）、用户的画像（对方），以及当下的场景，才能输出合适的 UX 文案，构建一场愉快的对话。

UX 文案的 3 原则，可以指导设计师完成一些工具型产品的文案，帮助用户快速完成任务。但对于希望通过文案来巩固其品牌认知的产品而言，UX 文案更重要的是符合其品牌信念，强化其品牌个性。

先给大家举 2 个有品牌感的文案案例：

图15 夸克的品牌文案

夸克。在一堆中规中矩工具化/平台化的浏览器类产品中，夸克的文案就明显独树一帜，其语言风格与其产品定位、用户画像更加契合。

图15 躺平的品牌文案

躺平。在一大批积极阳光正能量的产品中，躺平以其独特的形象切入用户的视野，文案充满了对现实生活中年轻人生活状态和心态的洞察，戳中了很多年轻用户的心声，让人过目难忘。

从这个角度来看，品牌文案其实有点类似于前面的营销文案，除了传达准确的信息之外，还致力于给用户打造特定的品牌印象。这一趴我们在基础课程中不再展开。

最后在小结一下 UX 文案的写作清单：

用户导向：以用户视角撰写文案，而非产品开发视角。 实用：确保每一句文案都有价值，能够引导用户的下一步行为。 清晰：去掉专业术语，准确无歧义， 简洁：惜字如金，没有冗余的字词，把关键信息放在最前面。 品牌一致性：根据品牌基调定义语言风格，使 UX 文案助力品牌形象的建设。 好了，到这里 UX 文案的设计就介绍完毕了。

欢迎关注作者微信公众号：「悦姐聊设计」

如何写出优秀的 UX 文案？ 在框架层除了界面设计和导航设计，还有一个非常重要的模块——信息设计。经常有设计师问我，信息设计属于交互或UI的设计范畴吗？我都会回答是的，因为我们每个设计师都肩负着信息传达设计的责任。

图1 信息设计与用户体验设计的关系

我将信息设计拆分为信息形式和信息内容，产品中所有可感知的元素都是信息内容，包括可见的文本、图片、视频，不可见的振动、声音……

图2 信息设计的分类

而这些内容被用户感知到的状态就是其形式，比如文本的字体、字号、颜色，图片的大小、清晰度、动静，声音的音量、音色、音调等。

今天我们要聊的 UX 文案，则隶属于文本信息设计，除了标签系统和数据内容之外，其他所有告知、引导、解释、说明性的文案都属于 UX 文案。

图3 UX文案与信息设计的关系

UX文案怎么写？来看看谷歌的方法总结 写作是很容易的，你要做的就是删掉那些错误词句。

阅读文章 >

以浏览器为例：

图4 各类文本信息举例示意

标签系统包括底部导航、各个设置项名称、各个站点的名称等

数据内容包括框内的热词、新闻的标题、来源、时间、评论等。

UX 文案则包括系统/功能当下所处的状态、操作前后的说明、状态、引导文案等。

在项目流程中，并没有明确规定 UX 文案的具体责任人（除了少数大厂有 UX writer 的角色），所以往往会出现产品、交互、视觉都以为是他人在负责，导致结果没人真正为文案负责的情况，所以我才倡导每一个设计师都要将其视为己任，以提升整体的产品体验。

1. WHAT | 什么是 UX 文案 ① UX 文案的起源

UX 文案，又称微文案（microcopy），由 Joshua Porter 在 2009 年在“Writing Microcopy”一文中提出。

图5 UX文案的案例

他在文章中介绍了一个电子商务网站。用户在该网站的购买流程中需要填写付款表单，但 5%-10%的交易由于地址填写错误而意外终止，导致了一部分转化的流失。当时 Porter 提供了一个修改方案是在地址栏下方增加了一行提示语：”请务必输入与您信用卡相关联的地址“。这个提示不仅为用户提供了正确的引导信息，改善了网站的转化率，也为网站带来了可观的收入。UX 文案由此诞生并取得了行业的重视。

② UX 文案的类型

Google 曾将 UX 文案总结为 8 大类：

图6 Google归纳的微文案类型

分别是：行动按钮、简介、导航按钮、确认信息、错误信息、隐私条款、加载页面、404 错误。也就是把标签系统和内容数据之外的信息都可以看做是 UX 文案（国内大厂的隐私条款是由法务撰写的，不属于 UX 文案的范畴）。

8 种类型不太好记忆，所以我将其归纳为 2 大类：

图5 悦姐归纳的微文案类型

名称类：主要包括按钮名称和链接名称； 说明类：包括操作前的规则、引导、预期说明，操作时的状态、进度、预期说明、操作后的（成功/失败）状态、结果、下一步引导说明等。 2. How | 如何撰写 UX 文案？ Google 曾介绍过撰写优秀 UX 文案的模型，我也是比较认同的，所以跟大家一起分享一下：

图6 Google的文案写作模型

在文案撰写之前，我们先要想清楚我们到底想通过文案传达什么信息？让这些文案符合写作的 3 个基本原则，然后再结合我们的品牌基调，看看以什么口吻和语气来传达这些信息与产品气质更一致。

① UX 文案写作 3 原则

UX 文案不同于营销文案，不是为了销售，吸引用户，追求让用户过目难忘。

图7 UX文案与营销文案的差异

而是以产品体验为目标，以简短的文字帮助用户在每个与产品交互的瞬间提供自然的对话，辅助用户快速准确地达成目标。

基于此，Google 设计师归纳了 UX 协作的 3 个原则，我调整了其顺序将其整理如下：

图8 UX文案写作3原则

实用性

结合奥卡姆剃刀原理：如无必要勿增实体。这个原理普适于所有功能、信息和元素，文案也不例外。任何一句文案，都要先考虑其价值。如果能通过形式明确传达信息的，就不应该增加文案徒增干扰。

图9 不重复显示文案

如很多表单，都会显示标签名，然后再在输入框内重复显示与标签名相同的引导提示（如左上图），这就属于显示了没有提供增量价值的文案，这种情况下输入框内不必显示引导文案。

相比上图中规中矩的表达方案，我更喜欢 Google 灵动的解决方案：

图10 Google关于输入框的提示方案

默认在输入框内显示引导提示，无标签名称，当用户开始输入后，引导提示上移变成标签名，框内显示输入的手机号。这个设计让默认界面简洁，输入过程也一直能知道应该输入什么内容。

文案除了有用以外，还要贴合场景，让用户能够通过文案预知下一步的行为或反馈。

图11 为下一步的行为提供预期

比如上图中，如果按钮是「下一步」用户就只能点击后才能从下一个界面上知道反馈，而「获取短信验证码」则提前告知了用户系统接下来的行为，让用户可以马上准备接收和输入验证码，增加了用户对系统和自身行为的掌控感。

清晰性

清晰性侧重文案要以用户视角出发，准确无歧义，易于用户理解。

比如要尽量避免技术术语：

图12 避免技术术语

这种研发术语自从设计师介入后，基本不会再出现了，研发同学每次遇到这些提示都会找产品或设计师要提示语（如果研发同学喜欢自己发挥，那用户就很有可能还会遇到上述的技术术语提示）。

再比如设计中比较常见的 CTA 按钮举例，为什么要用行动召唤按钮，也是因为行动召唤按钮更清晰，用户甚至可以忽略提示语，直接根据按钮的名称就做出选择：

图13 行动召唤按钮更清晰

学会这3个方面，帮你提高CTA按钮的点击率 怎样设计 CTA 按钮，能够增加点击率和转化率呢？

阅读文章 >

多数行动选择我们都可以这么处理，但是当用户的召唤行动本身具有取消涵义时，则不能再套用这个形式，否则又会出现歧义：

图14 行动召唤按钮具有取消涵义时的设计

比如，当询问用户是否要撤销输入时，如果同时用撤销和取消就会有些混淆，这个时候就建议将取消按钮，直接改为不撤销，让按钮涵义更清晰。

清晰的按钮不仅可以传递更有价值的信息，而且还可以促进功能的转化，带来巨大的业务价值，给大家举两个案例：

图14 UX文案的价值

第一个来自 Google。当 Google 把文案「Book a room」改成「Check availability」后，减轻了用户点击的压力，订单的转化率提升了 17%。

第二个来自滴滴。当滴滴把模糊的「查看详情」按钮改为清晰的「点击领取」按钮后，点击率提升了 287%。

这都属于改变文案，让文案的下一步行为更清晰，操作更明确所带来的价值提升。

简洁性

在表达清晰的基础上，还要力求简洁，减少用户的阅读成本。

图15 力求简洁

这就需要设计师惜字如金，不仅要去掉重复的提示，而且还要把提示中不影响信息传达的修饰语都去掉。甚至可以回到第一步，思考是否需要用提示语。比如 iPhone 登录时，如果密码输入错误，并不会显示提示，而是左右摇晃然后删除密码，让用户重新输入。

最后我们再以一个密码输入的案例，来串联 UX 文案协作的 3 原则：

图15 力求简洁

首先要确保文案的有用性，然后力求清晰、简洁、最后再加入下一步的引导说明，一个合格的 UX 文案就诞生了。

② UX 品牌文案

UX 文案的本质是产品与用户之间的对话。

我们需要考虑产品的定位（自己）、用户的画像（对方），以及当下的场景，才能输出合适的 UX 文案，构建一场愉快的对话。

UX 文案的 3 原则，可以指导设计师完成一些工具型产品的文案，帮助用户快速完成任务。但对于希望通过文案来巩固其品牌认知的产品而言，UX 文案更重要的是符合其品牌信念，强化其品牌个性。

先给大家举 2 个有品牌感的文案案例：

图15 夸克的品牌文案

夸克。在一堆中规中矩工具化/平台化的浏览器类产品中，夸克的文案就明显独树一帜，其语言风格与其产品定位、用户画像更加契合。

图15 躺平的品牌文案

躺平。在一大批积极阳光正能量的产品中，躺平以其独特的形象切入用户的视野，文案充满了对现实生活中年轻人生活状态和心态的洞察，戳中了很多年轻用户的心声，让人过目难忘。

从这个角度来看，品牌文案其实有点类似于前面的营销文案，除了传达准确的信息之外，还致力于给用户打造特定的品牌印象。这一趴我们在基础课程中不再展开。

最后在小结一下 UX 文案的写作清单：

用户导向：以用户视角撰写文案，而非产品开发视角。 实用：确保每一句文案都有价值，能够引导用户的下一步行为。 清晰：去掉专业术语，准确无歧义， 简洁：惜字如金，没有冗余的字词，把关键信息放在最前面。 品牌一致性：根据品牌基调定义语言风格，使 UX 文案助力品牌形象的建设。 好了，到这里 UX 文案的设计就介绍完毕了。

欢迎关注作者微信公众号：「悦姐聊设计」

由于众所周知的原因，设计师访问 Dribbble 、Behance、Pinterest 这些网站是需要借助梯子或者「机场」一类的服务来正常访问。不过最近 Behance 直接封禁中国大陆帐号，加上之前 Figma 屏蔽大陆的部分企业机构的帐号，目前设计师连浏览同行的设计作品、搜集灵感都成了问题。

Figma封禁大疆账户！国产软件的春天来了？ 就在上周六，刷微博时一条微博引起了我的关注： 这则消息很快引起了轩然大波，有网友在评论质疑消息可靠性后，很快博主贴出了Figma 官方发给大疆的通稿，并表示向大疆朋友确认了消息属实。

阅读文章 >

Behance显示无权访问？别急，还有这些方法可以挽救！ 大家好，我是和你们聊设计的花生。

阅读文章 >

不过，这些著名的设计作品平台已经存在了很多年，这些年也一直有新的团队试图在不同的分野、领域中成为它们的替代品。 今天的这篇文章来自北爱尔兰设计师 Paddi MacDonnell ，她搜集了 15 个同样有影响力，能够在某种程度上替代 Dribbble 和 Behance 的优质网站。

注： 如果访问不畅，需要借助梯子。

第四波！2022年8月精选实用设计干货合集 各位8月好！

阅读文章 >

下面是正文：

网页和 UI 设计的停滞不前，很大程度上是是因为多数设计师都集中关注在特定的趋势上。而加剧这种趋势的另外一个重要因素，则是推荐算法。推荐算法给设计师喂养来更多他们更加「喜好」的内容，然后逐渐陷入同质化的恶性循环。

多年来，设计圈也一直在讨论设计的差异化，但是Behance 和 Dribbble 这样的平台则在同质化的道路上一去不复返。

并不是说 Dribbble 和 Behance 没有价值，它们都是绝佳的设计灵感来源，但是我们作为设计师，是需要拓展设计灵感的来源，在跳脱出日常的设计当中获得打破同质化的灵感，这样对于我们自己对于设计都更加健康。

所以，今天的这篇文章为你专门挑选了 15 个网站，它们可以用来替代 Dribbble 和 Behance 帮你在日常设计中获取灵感。

1、Awwwards https://www.awwwards.com/

Awwwards 是网页设计领域的顶级网站，世界上最好的网页设计，最知名的设计工作室，都会在这里发布作品。Awwwards 最引人瞩目的奖项是「每日最佳网站」，获得这项荣誉的网站可以在自己的网站上添加上相应标识，这可以说是设计圈中最高的荣誉之一。如果你正在找设计灵感， Awwwards 可能是最值得你去看看的网站之一。

2、Admire The Web https://www.admiretheweb.com/

Admire The Web 比起前面的 Awwwards 在网站的筛选要求上更高，几乎是最极致的网站才会被他们收录进去，如果你没有时间去仔细发现优秀的设计，那么不妨直接打开这个网站来寻找最好的设计。

3、One Page Love https://onepagelove.com/

这是一个专注于单页式设计设计素材和作品的网站，这个网站所整合搜集的设计作品，一部分是网页，还有一部分是 APP，如果你在寻找 APP 的页面设计，单页式网站或者初创企业的网站设计，那么这个网站是个好地方。

4、Godly https://godly.website/

这也是搜集优质网页设计作品的好地方，Godly 突出的地方在于它的作品展示当中加入了动态缩略图，你可以在打开网站之前快速了解这些网站本身的总体设计。另外，如果你正在找着陆页的设计，Godly 可以给你提供海量的参考。

5、Hoverstat.es https://www.hoverstat.es/

Hoverstat.es 同样也整合搜集了大量的优秀设计作品，不过和其他的网站不同，它并不经常更新，对于其中的网站也不会做过多介绍，但是终究是一个适合找参考的好地方。

6、Siteinspire https://www.siteinspire.com/

Siteinspire 是一个相当成熟的设计 灵感网站 ，被搜集地网站和作品被精心地划分为不同地风格，你可以借此快速找到你想要的类型。

7、Land-book https://land-book.com/

Land-book 可能是网上最好的网站精选合集，这些网站截屏被处理的非常用心，而且被整合为不同主题不同情绪的合集，特别适合找特定感觉的参考。

8、Savee https://savee.it/

Savee 是获取各类灵感的优质平台，在某种程度上它和 Pinterest 非常接近。在内容上 Savee 更偏向于摄影和艺术类设计，用它来构建情绪板是个不错的选择。

9、UIJar https://uijar.com/

UIJar 同样是一个精选网页类设计作品的网站，有意思的是，UIJar 当中所搜集的网站和绝大多数的其他平台有所不同，这里搜集的作品大都非常的有个性，非常适合给设计师的个人网站以及工作室作为参考。

10、Brutalist Websites https://brutalistwebsites.com/

如你所见，这是一个专门搜集粗野主义风格网站的网站，如果你喜欢这类风格，或者在寻找这方面的设计参考，那么这个网站就是你需要的。这里的粗野主义设计作品大都素质不错，也从侧面证明了这种风格为什么会如此受欢迎。

11、Minimal Gallery https://minimal.gallery/

Minimal Gallery 是一个专注于极简主义风格网页作品的网站，和上面的 Brutalist Websites 一样保持专注，不过由于它和设计趋势相关，所以网站本身的生命周期可能不会太长，感兴趣的同学一定要早点看。

12、Ello https://ello.co/

Ello 也是一个展示优秀设计师作品的平台，它在插画和艺术作品方面的品质相当扎实，另外网站中还有大量的摄影作品，在创意设计上，也非常有独到。

13、DeviantArt https://www.deviantart.com/

DeviantArt 是一个老牌的设计社区，这里所涵盖的设计作品类别比起 Dribbble 和 Behance 还要多，从动漫创作到古典风格的插画都有，你可以根据自己的需求筛选出你想要的内容。

14、Figma 社区 https://www.figma.com/community/

Figma 社区里面有很多用户自己上传的优秀作品，如果你能正常访问 Figma 的服务，应该就可以直接从社区当中获得其他设计师的作品，寻找灵感。

15、Lapa https://www.lapa.ninja/

Lapa 是一个集中了 5000 多个高品质着陆页的合集，这些网站的设计大都是直接从网站上抓取下来的。如果你没有太多时间一个网站一个网站寻找，那么直接来 Lapa 找可能是个正确的选择。

由于众所周知的原因，设计师访问 Dribbble 、Behance、Pinterest 这些网站是需要借助梯子或者「机场」一类的服务来正常访问。不过最近 Behance 直接封禁中国大陆帐号，加上之前 Figma 屏蔽大陆的部分企业机构的帐号，目前设计师连浏览同行的设计作品、搜集灵感都成了问题。

Figma封禁大疆账户！国产软件的春天来了？ 就在上周六，刷微博时一条微博引起了我的关注： 这则消息很快引起了轩然大波，有网友在评论质疑消息可靠性后，很快博主贴出了Figma 官方发给大疆的通稿，并表示向大疆朋友确认了消息属实。

阅读文章 >

Behance显示无权访问？别急，还有这些方法可以挽救！ 大家好，我是和你们聊设计的花生。

阅读文章 >

不过，这些著名的设计作品平台已经存在了很多年，这些年也一直有新的团队试图在不同的分野、领域中成为它们的替代品。 今天的这篇文章来自北爱尔兰设计师 Paddi MacDonnell ，她搜集了 15 个同样有影响力，能够在某种程度上替代 Dribbble 和 Behance 的优质网站。

注： 如果访问不畅，需要借助梯子。

第四波！2022年8月精选实用设计干货合集 各位8月好！

阅读文章 >

下面是正文：

网页和 UI 设计的停滞不前，很大程度上是是因为多数设计师都集中关注在特定的趋势上。而加剧这种趋势的另外一个重要因素，则是推荐算法。推荐算法给设计师喂养来更多他们更加「喜好」的内容，然后逐渐陷入同质化的恶性循环。

多年来，设计圈也一直在讨论设计的差异化，但是Behance 和 Dribbble 这样的平台则在同质化的道路上一去不复返。

并不是说 Dribbble 和 Behance 没有价值，它们都是绝佳的设计灵感来源，但是我们作为设计师，是需要拓展设计灵感的来源，在跳脱出日常的设计当中获得打破同质化的灵感，这样对于我们自己对于设计都更加健康。

所以，今天的这篇文章为你专门挑选了 15 个网站，它们可以用来替代 Dribbble 和 Behance 帮你在日常设计中获取灵感。

1、Awwwards https://www.awwwards.com/

Awwwards 是网页设计领域的顶级网站，世界上最好的网页设计，最知名的设计工作室，都会在这里发布作品。Awwwards 最引人瞩目的奖项是「每日最佳网站」，获得这项荣誉的网站可以在自己的网站上添加上相应标识，这可以说是设计圈中最高的荣誉之一。如果你正在找设计灵感， Awwwards 可能是最值得你去看看的网站之一。

2、Admire The Web https://www.admiretheweb.com/

Admire The Web 比起前面的 Awwwards 在网站的筛选要求上更高，几乎是最极致的网站才会被他们收录进去，如果你没有时间去仔细发现优秀的设计，那么不妨直接打开这个网站来寻找最好的设计。

3、One Page Love https://onepagelove.com/

这是一个专注于单页式设计设计素材和作品的网站，这个网站所整合搜集的设计作品，一部分是网页，还有一部分是 APP，如果你在寻找 APP 的页面设计，单页式网站或者初创企业的网站设计，那么这个网站是个好地方。

4、Godly https://godly.website/

这也是搜集优质网页设计作品的好地方，Godly 突出的地方在于它的作品展示当中加入了动态缩略图，你可以在打开网站之前快速了解这些网站本身的总体设计。另外，如果你正在找着陆页的设计，Godly 可以给你提供海量的参考。

5、Hoverstat.es https://www.hoverstat.es/

Hoverstat.es 同样也整合搜集了大量的优秀设计作品，不过和其他的网站不同，它并不经常更新，对于其中的网站也不会做过多介绍，但是终究是一个适合找参考的好地方。

6、Siteinspire https://www.siteinspire.com/

Siteinspire 是一个相当成熟的设计 灵感网站 ，被搜集地网站和作品被精心地划分为不同地风格，你可以借此快速找到你想要的类型。

7、Land-book https://land-book.com/

Land-book 可能是网上最好的网站精选合集，这些网站截屏被处理的非常用心，而且被整合为不同主题不同情绪的合集，特别适合找特定感觉的参考。

8、Savee https://savee.it/

Savee 是获取各类灵感的优质平台，在某种程度上它和 Pinterest 非常接近。在内容上 Savee 更偏向于摄影和艺术类设计，用它来构建情绪板是个不错的选择。

9、UIJar https://uijar.com/

UIJar 同样是一个精选网页类设计作品的网站，有意思的是，UIJar 当中所搜集的网站和绝大多数的其他平台有所不同，这里搜集的作品大都非常的有个性，非常适合给设计师的个人网站以及工作室作为参考。

10、Brutalist Websites https://brutalistwebsites.com/

如你所见，这是一个专门搜集粗野主义风格网站的网站，如果你喜欢这类风格，或者在寻找这方面的设计参考，那么这个网站就是你需要的。这里的粗野主义设计作品大都素质不错，也从侧面证明了这种风格为什么会如此受欢迎。

11、Minimal Gallery https://minimal.gallery/

Minimal Gallery 是一个专注于极简主义风格网页作品的网站，和上面的 Brutalist Websites 一样保持专注，不过由于它和设计趋势相关，所以网站本身的生命周期可能不会太长，感兴趣的同学一定要早点看。

12、Ello https://ello.co/

Ello 也是一个展示优秀设计师作品的平台，它在插画和艺术作品方面的品质相当扎实，另外网站中还有大量的摄影作品，在创意设计上，也非常有独到。

13、DeviantArt https://www.deviantart.com/

DeviantArt 是一个老牌的设计社区，这里所涵盖的设计作品类别比起 Dribbble 和 Behance 还要多，从动漫创作到古典风格的插画都有，你可以根据自己的需求筛选出你想要的内容。

14、Figma 社区 https://www.figma.com/community/

Figma 社区里面有很多用户自己上传的优秀作品，如果你能正常访问 Figma 的服务，应该就可以直接从社区当中获得其他设计师的作品，寻找灵感。

15、Lapa https://www.lapa.ninja/

Lapa 是一个集中了 5000 多个高品质着陆页的合集，这些网站的设计大都是直接从网站上抓取下来的。如果你没有太多时间一个网站一个网站寻找，那么直接来 Lapa 找可能是个正确的选择。