大家好，4月的第3波实用设计 干货合集 来了！这次又找到了2个颇为不错的免费插画来源，不过这次最值得关注的其实是一款付费的动画曲线制作工具，和一个可以免费申请 Beta 测试版的 AI 矢量编辑插件，这俩工具都有独特的优势，具体可以往下看：

1、文字快速视觉包装插件 https://chrome.google.com/webstore/detail/text-to-image/nkljaohokglebeljcgchmehnhdieakda

有时候，单纯地分享文本内容，会显得过去单调，你可能会想将文本内容快速转换为视觉上看起来更加有趣的版本再展示出来，那么这个 Chrome 浏览器插件可以帮你快速完成这种设计。选中文本之后，右键呼出菜单选择插件，自动生成图片效果，修改配色和其他参数，即可导出图片。

2、2022 年可视化导图工具全搜罗

很多做产品的同学都是工具控，这个是脑图软件博客网站所总结梳理的最新的的脑图工具列表，你可以直接在这个列表中筛选出你可能用得上的脑图工具。最近几年，脑图工具的类型和数量翻了接近10倍，各种衍生的工具各有优劣，如果你对于这类工具感兴趣，不妨订阅这个博客的邮件更新：

https://mindmappingsoftwareblog.com/newsletter/

3、免费插画图库 Control Rocks https://control.rocks/

这是一套可以完全自定义角色的插画图库，总计有2种不同的样式——黑白描边和填色两种，它的完整版本是矢量的，可以直接在 Figma、Sketch 和 Ai 当中使用，免费版仅仅包含 PNG 格式的插画，但是完全免费可商用。

4、免费插画素材Figma 插件 https://www.figma.com/community/plugin/781441863578182316/Illustrations

这是一个可以用于 Figma 的 免费图库 插件，插件包含的插画都是高质量且免费可商用的，安装好这个插件之后，直接拖放插画即可应用于 Figma 的各个 UI 界面当中。

5、动效曲线编辑器 Converture https://ixeau.com/couverture/

如果你经常需要设计动效，那么你应该清楚一个好用且专业的动效曲线编辑器有多重要。这个名为 Couverture 的缓动编辑器出自一名德国柏林的独立开发者，这个工具不仅能够生成动态足够自然的缓动曲线，还能实时预览，内置的动效曲线效果极佳，而且可以非常自然地导出和 CSS、SwiftUI ，并且可以导入其他支持时序曲线的设计工具。这是一个收费的 APP，但是它确实非常好用且具有针对性，感兴趣的同学可以看看。

6、数据跟踪插件 Qualas https://www.qualas.io/

正确的数据跟踪能够帮助产品团队更好地进行决策，而这个名为 Qualas 的工具则是专门帮助团队更好搜集数据用的，从产品设计阶段开始进行数据跟踪节点的埋设，可以让数据团队、开发者、PM 和 设计师 直接在原型图上开始协作，确定需要跟踪的数据节点、类型、状态，无需花费大量的时间来编写 Excel 表格和数据库表单，而是直接可视化地完成这个环节，全部在 Figma 内完成。这个插件提供免费试用。

7、超强矢量轮廓编辑插件 https://www.lttrink.com/illustrator

Lttr/Ink 是一个面向 Adobe Illustrator 的笔触矢量编辑工具，它从根本上将 AI 中的钢笔工具进行了进一步的升级，尤其是用来设计字体的时候，这款工具能够帮你快速编辑字体骨架，修整字体轮廓，各个锚点井井有点，不会出现混乱的情况。目前这款插件可以免费申请 Beta 版试用，抓紧机会。

8、3D 图标包 Joycon https://designill.gumroad.com/l/joycon-free

这个名为 Joycon 的 3D 图标包出自设计社区 Designill，完整版 64 个图标的版本是收费的，不过提供一个免费的 Demo。这个设计师社区其实还会日常推荐很多别的设计资源，你可以访问这个链接 https://znap.link/designill 获得更多的免费资源。

9、开源 React 控制面板 Horizon UI https://horizon-ui.com/

Horizon UI 是一套适用于构建控制面板的开源系统，它适用于 Chakra UI 和 React，使用它来构建面板和呈现复杂多变的数据，不仅能够确保功能上的完善和多变，而且可以确保视觉层面上的自然好看。Horizon UI 还有付费的 Pro 的版本可供选择。

第一波！2022年4月精选实用设计干货合集 大家好，4月的第1波实用设计干货合集来了！

阅读文章 >

第二波！2022年4月精选实用设计干货合集 大家好，这里是 4月的第2波实用设计干货合集！

阅读文章 >

大家好，4月的第3波实用设计 干货合集 来了！这次又找到了2个颇为不错的免费插画来源，不过这次最值得关注的其实是一款付费的动画曲线制作工具，和一个可以免费申请 Beta 测试版的 AI 矢量编辑插件，这俩工具都有独特的优势，具体可以往下看：

1、文字快速视觉包装插件 https://chrome.google.com/webstore/detail/text-to-image/nkljaohokglebeljcgchmehnhdieakda

有时候，单纯地分享文本内容，会显得过去单调，你可能会想将文本内容快速转换为视觉上看起来更加有趣的版本再展示出来，那么这个 Chrome 浏览器插件可以帮你快速完成这种设计。选中文本之后，右键呼出菜单选择插件，自动生成图片效果，修改配色和其他参数，即可导出图片。

2、2022 年可视化导图工具全搜罗

很多做产品的同学都是工具控，这个是脑图软件博客网站所总结梳理的最新的的脑图工具列表，你可以直接在这个列表中筛选出你可能用得上的脑图工具。最近几年，脑图工具的类型和数量翻了接近10倍，各种衍生的工具各有优劣，如果你对于这类工具感兴趣，不妨订阅这个博客的邮件更新：

https://mindmappingsoftwareblog.com/newsletter/

3、免费插画图库 Control Rocks https://control.rocks/

这是一套可以完全自定义角色的插画图库，总计有2种不同的样式——黑白描边和填色两种，它的完整版本是矢量的，可以直接在 Figma、Sketch 和 Ai 当中使用，免费版仅仅包含 PNG 格式的插画，但是完全免费可商用。

4、免费插画素材Figma 插件 https://www.figma.com/community/plugin/781441863578182316/Illustrations

这是一个可以用于 Figma 的 免费图库 插件，插件包含的插画都是高质量且免费可商用的，安装好这个插件之后，直接拖放插画即可应用于 Figma 的各个 UI 界面当中。

5、动效曲线编辑器 Converture https://ixeau.com/couverture/

如果你经常需要设计动效，那么你应该清楚一个好用且专业的动效曲线编辑器有多重要。这个名为 Couverture 的缓动编辑器出自一名德国柏林的独立开发者，这个工具不仅能够生成动态足够自然的缓动曲线，还能实时预览，内置的动效曲线效果极佳，而且可以非常自然地导出和 CSS、SwiftUI ，并且可以导入其他支持时序曲线的设计工具。这是一个收费的 APP，但是它确实非常好用且具有针对性，感兴趣的同学可以看看。

6、数据跟踪插件 Qualas https://www.qualas.io/

正确的数据跟踪能够帮助产品团队更好地进行决策，而这个名为 Qualas 的工具则是专门帮助团队更好搜集数据用的，从产品设计阶段开始进行数据跟踪节点的埋设，可以让数据团队、开发者、PM 和 设计师 直接在原型图上开始协作，确定需要跟踪的数据节点、类型、状态，无需花费大量的时间来编写 Excel 表格和数据库表单，而是直接可视化地完成这个环节，全部在 Figma 内完成。这个插件提供免费试用。

7、超强矢量轮廓编辑插件 https://www.lttrink.com/illustrator

Lttr/Ink 是一个面向 Adobe Illustrator 的笔触矢量编辑工具，它从根本上将 AI 中的钢笔工具进行了进一步的升级，尤其是用来设计字体的时候，这款工具能够帮你快速编辑字体骨架，修整字体轮廓，各个锚点井井有点，不会出现混乱的情况。目前这款插件可以免费申请 Beta 版试用，抓紧机会。

8、3D 图标包 Joycon https://designill.gumroad.com/l/joycon-free

这个名为 Joycon 的 3D 图标包出自设计社区 Designill，完整版 64 个图标的版本是收费的，不过提供一个免费的 Demo。这个设计师社区其实还会日常推荐很多别的设计资源，你可以访问这个链接 https://znap.link/designill 获得更多的免费资源。

9、开源 React 控制面板 Horizon UI https://horizon-ui.com/

Horizon UI 是一套适用于构建控制面板的开源系统，它适用于 Chakra UI 和 React，使用它来构建面板和呈现复杂多变的数据，不仅能够确保功能上的完善和多变，而且可以确保视觉层面上的自然好看。Horizon UI 还有付费的 Pro 的版本可供选择。

第一波！2022年4月精选实用设计干货合集 大家好，4月的第1波实用设计干货合集来了！

阅读文章 >

第二波！2022年4月精选实用设计干货合集 大家好，这里是 4月的第2波实用设计干货合集！

阅读文章 >

前段时间我在 京东 买到坏芒果了，要申请售后。作为一个 界面设计 师我居然点错了按钮。Excuse me？我眼睛是不是不太行了？

找了几个人问，有的说不会误点，有的说页面确实有迷惑。但他们都是带着我提出的问题去看页面，不是真实场景下用户的反馈。这里的“问题”是基于我这个用户认知下的，实际上有没有问题得看京东这个页面的用户行为数据。

那就以我这个用户的角度，从设计层分析一下到底为什么会点错吧。初步认为，问题主要在于点线面关系，包括字号大小、颜色、视觉层级、组合等。

说到这个想起了几年前的一个项目。当时我们用字号和颜色都很谨慎，但产品说我们字号太多，大小不一显得整个页面很乱。我们核对了之后发现字号也不多呀。后来才明白“字号多”只是他们的感受，即使字号少，颜色、层级和组合多的话，也会造成视觉上的“字号多”。

发现问题：用户出错在哪里 A：我每次都点击横线上“请您描述问题并上传收到商品照片”这句话填内容，然后发现这里不是给我填内容的

B：我不知道退款要填多少东西，什么是一定要填的

C：提交的时候出错了，说是没写描述，又要回头去写

用户只会告诉你遇到的问题和使用感受，毕竟他们也不知道哪里出了错。所以对于用户提出的问题，我们得先发散，再归因。

分析问题：先发散，再归因 1. 发散问题 以问题为中心进行放射性发散，连接相关点，组成问题的图谱。尽可能提出更多的疑问点，从多方面考虑，找出关联性较大的因素。

问题 1：漏填

为什么不给出必填提示呢？

不同的申请原因，注释分别是什么？

全部的申请原因都要写描述吗，存在可以不写的情况吗（比如七天无理由）？

全部的申请原因都要上传凭证吗？

如果申请原因不同，填写描述的提示会不同吗？

说明一下，刚开始出现问题的页面是优鲜赔，我还没截图已经进行完赔付了，所以分析用的是退货界面的选项，内容大致一样，样式也一样。

分析之后发现：

1）必填提示很重要。

除了质量问题外，其他所有原因都需要填写描述文字，不然就无法提交。基于这一点，我认为给予必填提示*号是很重要的，淘宝的退货页面也会有必填提示。

2）选项之间可能有交叉或者重复，分类不明。

比如七天无理由一定要写理由；大小/颜色/型号不合适没写明需要寄回附件赠品；其他问题务必上传有效凭证，但在提交时不约束这个条件。

这些问题其实是产品层面要解决的问题。第一个问题好解决，增加必填条件约束就可以。第二个问题相对麻烦一点，需要对售后原因重新进行分析和归类，重新写规则。由于第二个问题对解决本次问题的价值不大，不用花心思在这上面。

问题 2：误点

为什么横线上更像是可以输入文字呢？跟字号颜色有没有关系？

怎么体现申请原因和描述问题的从属关系呢？

注释的内容可以直接放在描述文字输入框内吗？怎么结合？

页面的框架存在问题吗？卡片和分割线的规范是什么？

这种左右选项结构的组件形式是影响因素吗？

分析之后发现：

1）页面的框架不规范，各卡片之间的距离没有一致，层级也有问题。

一般来说，出现卡片距离不一致有几种情况：设计师特意设计；开发实现页面的代码问题。但从这个页面上来说不太需要设计不一样的卡片间距。如果项目时间允许，在设计走查的时候发现问题一定要提出让开发解决。

2）文字的颜色让人分不清主次从属。

这一点在下面有更详细的分析，先不在这讨论。

2. 收拢归因 经过对页面的观察和分析，我们可以把问题聚焦在以下几个点上。

3. 竞品分析大法 找到原因之后，比较有效快捷的方法就是进行竞品分析，看看别人怎么做。根据上面聚焦到的四个问题点，我们带着目的去做竞品分析。

万字干货！4 大模块帮你完整掌握竞品分析 互联网行业，竞品分析已不仅仅是产品经理的工作内容，对于 UI 设计师来说系统地分析竞品并且做出有理有据地分析已经成为必不可少的技能了。

阅读文章 >

观察淘宝和京东，我们可以发现：

1）淘宝有必填提示，京东没有；

2）淘宝的输入框比背景色浅，京东的输入框和背景色一致；

3）淘宝的描述作为补充项另起一个模块，京东的描述和申请原因在同一模块。

最后一点关于字体的，分析项比较多：

通过上图，我们可以发现，淘宝的颜色层级有 3 级，而京东的颜色层级有 6 级。将两个界面中的组件元素用色块来表示，淘宝有明确的视觉引导，而京东由于标题与注释颜色比较接近、标题与选项对比相差太大、模块缺乏统一性，造成了主次不清晰的问题。

我们再次看看京东的界面。从视觉体现上来说，选项使用了最深的黑色，确实能够吸引用户的目光，让用户知道哪里要选，但却弱化了标题和补充项的视觉。在退货退款页面，用户是带着目的去操作的，他们需要完整走完流程，完成申请，因此需要填什么类型的信息、怎么顺利完成流程就很重要。就像你到银行柜台办理转账的时候，你会希望银行能够按顺序告诉你每一步要做什么吧：取号、去单据区填单、到柜台办理。如果你一进去保安叫你准备好身份证、转账的相关信息，到了柜台发现还要填单，是不是体验感很差呢？

解决问题：低成本有效解决 经过一轮竞品分析后，我们得出了相应的解决方案：

1）统一页面结构

卡片间距保持一致；输入框颜色略浅于背景色。

2）文字视觉关系调整

文字颜色精简到 3 种；标题颜色与选项颜色一致，用字体粗细区分；申请原因的注释与输入框提示语结合。

3）准确引导操作

给予必填提示。

这是调整前后的对比图：

从整体的视觉上来看，设计规范是与原本几乎保持一致的，更多的是细节的调整。但是我们的目的不是把界面做得多好看，而是低成本有效地解决问题，也就是要综合考虑时间成本和开发成本。

文末，想说说我看到的一些现状。遇到问题的时候，有的设计师会无意识改掉原型字段、增删功能、改变运营方案…如果不改，他们就觉得自己做不了或者做不好设计稿。以前我也会有同样的问题，原因有可能是不够理解产品结构、思维受限、没有考虑时间成本和开发成本…现在除非逻辑有误、状态有缺失，我才会跟产品商量原型的问题。一般都尽量从设计层面解决问题。

网上很多改版的作品，会从产品层面、运营层面去分析，这点是挺好的，多思考才有多种方法。但是不代表平时做设计的时候我们要改掉产品和运营的内容（除非有特殊情况），这些需要和相关的同事商量评估。

有时候能用最低成本从设计层面解决问题，也是一种能力。

以电商为例，帮你掌握超全面的产品分析流程 曾经有段时间对竞品分析很困惑，市面上大部分的文章，多数是比较几个产品的功能、交互，总觉得少点什么。

阅读文章 >

欢迎关注作者微信公众号：「牙线y2x」

前段时间我在 京东 买到坏芒果了，要申请售后。作为一个 界面设计 师我居然点错了按钮。Excuse me？我眼睛是不是不太行了？

找了几个人问，有的说不会误点，有的说页面确实有迷惑。但他们都是带着我提出的问题去看页面，不是真实场景下用户的反馈。这里的“问题”是基于我这个用户认知下的，实际上有没有问题得看京东这个页面的用户行为数据。

那就以我这个用户的角度，从设计层分析一下到底为什么会点错吧。初步认为，问题主要在于点线面关系，包括字号大小、颜色、视觉层级、组合等。

说到这个想起了几年前的一个项目。当时我们用字号和颜色都很谨慎，但产品说我们字号太多，大小不一显得整个页面很乱。我们核对了之后发现字号也不多呀。后来才明白“字号多”只是他们的感受，即使字号少，颜色、层级和组合多的话，也会造成视觉上的“字号多”。

发现问题：用户出错在哪里 A：我每次都点击横线上“请您描述问题并上传收到商品照片”这句话填内容，然后发现这里不是给我填内容的

B：我不知道退款要填多少东西，什么是一定要填的

C：提交的时候出错了，说是没写描述，又要回头去写

用户只会告诉你遇到的问题和使用感受，毕竟他们也不知道哪里出了错。所以对于用户提出的问题，我们得先发散，再归因。

分析问题：先发散，再归因 1. 发散问题 以问题为中心进行放射性发散，连接相关点，组成问题的图谱。尽可能提出更多的疑问点，从多方面考虑，找出关联性较大的因素。

问题 1：漏填

为什么不给出必填提示呢？

不同的申请原因，注释分别是什么？

全部的申请原因都要写描述吗，存在可以不写的情况吗（比如七天无理由）？

全部的申请原因都要上传凭证吗？

如果申请原因不同，填写描述的提示会不同吗？

说明一下，刚开始出现问题的页面是优鲜赔，我还没截图已经进行完赔付了，所以分析用的是退货界面的选项，内容大致一样，样式也一样。

分析之后发现：

1）必填提示很重要。

除了质量问题外，其他所有原因都需要填写描述文字，不然就无法提交。基于这一点，我认为给予必填提示*号是很重要的，淘宝的退货页面也会有必填提示。

2）选项之间可能有交叉或者重复，分类不明。

比如七天无理由一定要写理由；大小/颜色/型号不合适没写明需要寄回附件赠品；其他问题务必上传有效凭证，但在提交时不约束这个条件。

这些问题其实是产品层面要解决的问题。第一个问题好解决，增加必填条件约束就可以。第二个问题相对麻烦一点，需要对售后原因重新进行分析和归类，重新写规则。由于第二个问题对解决本次问题的价值不大，不用花心思在这上面。

问题 2：误点

为什么横线上更像是可以输入文字呢？跟字号颜色有没有关系？

怎么体现申请原因和描述问题的从属关系呢？

注释的内容可以直接放在描述文字输入框内吗？怎么结合？

页面的框架存在问题吗？卡片和分割线的规范是什么？

这种左右选项结构的组件形式是影响因素吗？

分析之后发现：

1）页面的框架不规范，各卡片之间的距离没有一致，层级也有问题。

一般来说，出现卡片距离不一致有几种情况：设计师特意设计；开发实现页面的代码问题。但从这个页面上来说不太需要设计不一样的卡片间距。如果项目时间允许，在设计走查的时候发现问题一定要提出让开发解决。

2）文字的颜色让人分不清主次从属。

这一点在下面有更详细的分析，先不在这讨论。

2. 收拢归因 经过对页面的观察和分析，我们可以把问题聚焦在以下几个点上。

3. 竞品分析大法 找到原因之后，比较有效快捷的方法就是进行竞品分析，看看别人怎么做。根据上面聚焦到的四个问题点，我们带着目的去做竞品分析。

万字干货！4 大模块帮你完整掌握竞品分析 互联网行业，竞品分析已不仅仅是产品经理的工作内容，对于 UI 设计师来说系统地分析竞品并且做出有理有据地分析已经成为必不可少的技能了。

阅读文章 >

观察淘宝和京东，我们可以发现：

1）淘宝有必填提示，京东没有；

2）淘宝的输入框比背景色浅，京东的输入框和背景色一致；

3）淘宝的描述作为补充项另起一个模块，京东的描述和申请原因在同一模块。

最后一点关于字体的，分析项比较多：

通过上图，我们可以发现，淘宝的颜色层级有 3 级，而京东的颜色层级有 6 级。将两个界面中的组件元素用色块来表示，淘宝有明确的视觉引导，而京东由于标题与注释颜色比较接近、标题与选项对比相差太大、模块缺乏统一性，造成了主次不清晰的问题。

我们再次看看京东的界面。从视觉体现上来说，选项使用了最深的黑色，确实能够吸引用户的目光，让用户知道哪里要选，但却弱化了标题和补充项的视觉。在退货退款页面，用户是带着目的去操作的，他们需要完整走完流程，完成申请，因此需要填什么类型的信息、怎么顺利完成流程就很重要。就像你到银行柜台办理转账的时候，你会希望银行能够按顺序告诉你每一步要做什么吧：取号、去单据区填单、到柜台办理。如果你一进去保安叫你准备好身份证、转账的相关信息，到了柜台发现还要填单，是不是体验感很差呢？

解决问题：低成本有效解决 经过一轮竞品分析后，我们得出了相应的解决方案：

1）统一页面结构

卡片间距保持一致；输入框颜色略浅于背景色。

2）文字视觉关系调整

文字颜色精简到 3 种；标题颜色与选项颜色一致，用字体粗细区分；申请原因的注释与输入框提示语结合。

3）准确引导操作

给予必填提示。

这是调整前后的对比图：

从整体的视觉上来看，设计规范是与原本几乎保持一致的，更多的是细节的调整。但是我们的目的不是把界面做得多好看，而是低成本有效地解决问题，也就是要综合考虑时间成本和开发成本。

文末，想说说我看到的一些现状。遇到问题的时候，有的设计师会无意识改掉原型字段、增删功能、改变运营方案…如果不改，他们就觉得自己做不了或者做不好设计稿。以前我也会有同样的问题，原因有可能是不够理解产品结构、思维受限、没有考虑时间成本和开发成本…现在除非逻辑有误、状态有缺失，我才会跟产品商量原型的问题。一般都尽量从设计层面解决问题。

网上很多改版的作品，会从产品层面、运营层面去分析，这点是挺好的，多思考才有多种方法。但是不代表平时做设计的时候我们要改掉产品和运营的内容（除非有特殊情况），这些需要和相关的同事商量评估。

有时候能用最低成本从设计层面解决问题，也是一种能力。

以电商为例，帮你掌握超全面的产品分析流程 曾经有段时间对竞品分析很困惑，市面上大部分的文章，多数是比较几个产品的功能、交互，总觉得少点什么。

阅读文章 >

欢迎关注作者微信公众号：「牙线y2x」

前言 公开演讲者 Hamza Yusuf 曾这样说过“永远不要削弱语言的力量，言动于心, 心动于身”。笔者相信，在谈正事时，大家应该都很反感说话总是拖泥带水又模棱两可的人，因为在听一大堆废话后、你还不知道对方到底要表达什么，甚至有可能在理解错误的情况下产生误导。

在互联网 产品设计 中，语言本身就是一种界面、一种架构，是链接用户与产品的桥梁，在交互过程中能帮助用户更好地理解产品、如何跟产品沟通顺畅。更有甚者，一个产品语言表达方式的好坏，在用户眼中就代表着这个产品是否友好、好用，所以，有时候简短的几个字就能决定着用户的去留，而这些通过给用户传达信息的语言，我们就将它称之为微文案。

作为设计师，大多都会将自己的专注力集中在了视觉和交互上，潜意识的认为文案只是产品、运营者的工作，殊不知作为经常都在研究用户、跟用户打交道的人，在一些细节上会比产品更懂用户，相比美观的视觉设计，精致、简短文案的引导，则更加清晰、直接。

微文案对产品和用户都有着巨大的影响，清晰、准确、友好、一致的 文案设计 不仅能为产品带来好的体验，还能拉近用户与产品的距离，甚至可以当做改良 用户体验 和吸引用户的工具，因此文案设计就显得非常重要。下面，笔者就和大家简单地聊一聊那些在设计中看似不起眼的微文案设计。

了解微文案 Joshua Porter 在 2009 年诊断过一个电子商务网站，用户在该网站购买流程中填写表单时，有 5%-10%的用户因地址填写错误而终止交易流程，导致用户流失。于是，Porter 提出在地址栏旁增加“请务必输入与您的信用卡关联的地址”的文本提示，后来他在自己的文章中说道“就这样，错误消失了”。这种做法不仅节省了用户时间，还改善了网站的转化率、提高收入。

Porter 最终得出的结论是“在正确的位置、正确的时间、添加正确的引导性文案，就可以完全改变用户体验”，并把这类文案命名为“Microcopy”。

1. 微文案的定义

微文案（Microcopy）指的是在界面中，能够引导、帮助用户与界面交互行为的简短文案，可以是一个单词、也可以是一句话，常见的有表单文案、按钮文案、弹窗文案、错误提示等，大部分微文案都会对用户的行为产生直接的影响，如下所示：

交互前-引导用户去完成某个行为

交互中-鼓励、帮助用户去完成某个行为

交互后-及时给予用户行为之后的反馈（问题和解决方案）

2. 微文案被重视的原因

用户在与产品交流时，微文案作为最接近于用户与产品交互的位置，它可以帮助用户预测问题的发生、并鼓励用户进行下一步操作，提前预判操作过程中可能碰到的问题并提供解决方案，在很大程度上降低用户跳出率。

好的微文案可以清晰的表达出症结所在，消除用户疑虑，让其更快作出抉择，从而为产品带来收益。另外，在情感化方面，微文案的语气态度影响着用户的情绪，用户随时会在当前心情好坏的驱使下决定是否在这个流程中继续走下去。有很多产品在进行体验上的优化时，微文案就是其中的一大版块。

我们都知道，在这个互联网时代，个人信息早就不是什么秘密，但还是会遵循能不提供就不提供、能不注册就尽量不去注册的这一原则。用户体验专家 Jared M. Spool 就利用人们的这一心理在界面增加一段微文案创造了 3 亿美元的利益，基于用户在购物前不愿意提供太多个人信息，Jared M. Spool 在购物页面上写道「您无需注册即可在我们的网站进行购买，只需要点击继续按钮。为了方便您在网站的后续购买，您可以在完成付款流程后创建一个账号。」结果购买的客户数量增加了 45％；另外，Maggie Stanphill 在曾经对谷歌的一个旅店预定广告中将微文案「预定房间」改为「查看可用房间」，其点击率增加了 17%，结果是显而易见的。

3. 微文案专业岗位的出现

在国外，如谷歌这样这样的大型公司，对微文案设计非常重视，为了更好进行品牌文化传播以及给用户创造更好的使用体验，会有对应职位的「UX Writer」人员对微文案进行把关。

相比国内，虽然微文案岗位还处在一个比较尴尬的位置，但对微文案的重视程度明显在快速上升。

微文案设计的基本原则 1. 去开发化

首先，微文案需要简单直白，让用户一眼就能看懂，要规避掉开发语言（如 404、505、错代码 xxx 之类的描述）、双重否定等用户不易懂的文案，避免用户在操作前总是要去思考、陷入不知所措的境地，用户需要明确的知道当前发生了什么，以决定接下来的行为。

其次，避免模棱两可的文案，需要将发生的问题、行为指引等，清晰的表述出来，需要注意的是清晰表述并不是要长篇大论，能用词语表达的就绝不用句子、能用一句话标明就绝不多加半句，用户没有耐心来看你写小说。很多时候，用户在完成任务的过程中总是被很多「下一步」搞得一头雾水，用几个个字的简短描述来代替「下一步」需要完成的任务不是更好吗？当然刻意制造惊喜或氛围的除外，前提是你的惊喜真的能给用户或产品带来价值。

2. 委婉+鼓励

回想一下我们小时候做家务的情景，当父母用命令的语气对我们说“赶紧去扫地，等会我来检查”或者“我这会有些忙，你去帮忙把地打扫一下，扫的干净有奖励哦”，虽然都是不可抗拒事情，但很明显第一种方式是极不情愿的接受，做起事来可能是为了应付，以后会尽量找理由不去做；第二种语气则接受程度更高，还具备一定的吸引力。微文案也是如此，友好的表达方式会显得有诚意，用户更易于接受。

3. 应时应景

在一些特殊的场景下，微文案能起到安抚用户情绪、引导用户选择后续行为的作用。例如空状态/缺省页，可清楚的告知用户发生了什么问题以及解决方案，再通过按钮（按钮文案上述有说明）加以引导；在支付过程中，出现余额不足时，应明确提示金额还差多少、以及在附近提供便捷的充值入口；当用户有多张优惠券，下单时却无法选择使用，则需要将使用条件在原有文案的基础上强化、突出显示。

常见所处位置 1. 按钮

按钮微文案的好坏对产品、用户来说是至关重要的，尤其是「行为召唤按钮」。产品历经千辛万苦将用户带到转化（开通 VIP、下单、支付、登录）页面，就差按下这个按钮，如果因为文案的不清晰让用户有疑惑、增加了操作、理解、时间成本，或对用户产生误导，极有可能让用户从这里溜走，得不偿失，请记住。不管前面付出了多少努力，在用户按下决定转化的关键按钮前，都不算成功。

按钮是引导用户按下的关键因素，如果想要通过按钮为产品提高一定的转化率，那么你的按钮就需要一个优秀的微文案。通过下图中按钮微文案的左右对比，你更倾向于哪一种呢？

2. 表单

在表单页面，作为方向指引，标签只是一个清晰明确的简短文案，真正能给予用户更多帮助的是占位符，它能准确的提醒用户输入区域的交互位置，所以就成了每个表单项的必备元素，但就是因为这点，很多设计师站在必备的基础上，为了占位而占位，让占位符失去了本该发挥的作用，毫无价值。

下图是淘宝新增地址的表单页面，左侧的占位符直接重复标签内容，没人说这种搞法是错误的，但右侧描述了应输入内容的说明、规则、注意事项等，明显降低完成表单内容的难度。设计师可能没有感觉，怎么看都能看懂，但有没有想过填写这个表单的用户根本不是互联网人群，只是第一次想在网上买个东西而已。

道理大家都懂，说起来大家都会，但如果你真的玩了很多APP就会发现，除了那些大厂的产品设计之外，见过最多的不就是左侧的这种表达方式吗？

3. 错误/温馨提示

提示，并不仅仅是告知用户问题所在，而是需要在用户操作之前就给出温馨提示（如注销账号）；出现问题后自动定位到具体位置并提供解决方案（如填写表单），如果实在无法解决，尽可能的提供备用方案或求助渠道，尽可能的降低用户损失（如误删某数据）；操作即将完成或完成之后给予用户鼓励（如就差一点、太棒了）。

4. 缺省/空状态

空状态是产品中必然存在的一种状态，不管是用户初次使用还是系统出错，都可能给用户带来焦虑、挫败或疑惑的负面情绪。

优秀的微文案能达到安抚用户糟糕情绪、取悦用户的作用，从而弥补空白页面带来的失落，然后配合按钮中引导性的微文案帮助用户去消灭空白状态，避免下次出现同样的情况（部分特定的空状态只需安抚用户即可，无需/无法进行引导）。

微文案设计方向及思路 1. 清晰易懂

应使用用户熟悉的语言，尽量让微文案清晰明了、易于理解，避免使用一些专业术语和网络名词。如果不是写“小说”，就不要长篇大论，浓缩才是精华，没有必要在一个位置反复强调同样的内容，需要做的是精简语句，减轻用户的理解负担，降低时间成本。切记，产品每多一点使用成本就可能流失掉一批用户。

2. 统一性表达

对同一类型事务/事件的微文案，其语法、语种都需要保持统一性的表达，避免因用词偏差增加用户认知负担。频繁出现的词汇如新增/新建、您/你、确定/是否…等，即便不影响用户理解，也需要在无歧义的情况下选择其中一种表达方式始终保持一致。

3. 尊重用户

微文案需要永远站在用户角度考虑，不要使用命令和强迫的语气，多给予用户理解与包容、并加以支持与鼓励，让其感受到产品足够的友好、尊重。即便需用户自行承担相应的责任，文案也要克制谦逊，利用相对（万事没有绝对）的语气将出现问题的原因和结果反馈给用户，如果可能的话，尽量提供补救措施，将用户的损失降到最低后，利用微文案对用户情绪进行安抚。

4. 「您」和「你」的区别

「您」-正式且过于认真、严肃，刻意强调对用户的尊敬，感觉时刻保持着距离，少了一份亲切感；

「你」-距离更近，有种打成一片的感觉，试想一下，如果你跟朋友之间总是过于尊敬、客客气气，很可能会缺少一种默契，至少不会去交心。产品也是一样，在交互过程中与用户扮演的就是「你」和「我」的角色，为了拉近与用户之间距离，不妨多使用「你」「我」跟用户进行交流，会更亲切。

5. 两相矛盾的微文案

将两相矛盾的文案融合在一起，看似具有强烈的冲突性，却是一种因果关系。这种方式在营销文案中很常见，当用户害怕失去时，产品顺势给用户一种失去后的打击，文案就起到了“激将”的作用，然后再给予合适的引导，用户转化率很可能得到大幅度的提升。

6. 不要拒绝用户

不要拒绝你的用户，切记要避开如“不要、不能、不可以…”等负面的词汇，一开始就摆出一副拒人于千里之外的姿态，用户凭什么要惯着你的产品。多使用正向且具有引导性的文案，协助用户解决当前的尴尬处境，就算用户迫不得已离开，至少没有留下不好的印象，或许下次还有机会。

7. 省略不必要的标点符号

一句话或一个词就能说清楚的内容，可省略掉不必要的标点符号，例如标签、标题、小提示…等。另外，在部分弹窗中有两段语句的折行文案，去掉标点会显得更干净。

结语 很多初中级设计师认为，文案不属于设计的工作范畴，殊不知文案也和图形一样，都是引导用户的重要元素，在某些场景中，文案更能直击用户内心，起着不可替代的作用。好的微文案能为产品助力，让用户在完成任务的过程中不会迷路，甚至在关键环成为用户在黑暗中的一盏明灯，确保每一步都给用户带来更加顺畅、愉悦的产品体验。

以上是笔者对微文案的理解，不足之处敬请谅解，欢迎大家一起探讨，一起学习、取长补短。

如何快速增加17%的业绩？收下这份微文案设计基础指南 当我们想要设计一个用户体验良好的页面时，文案是我们不容忽视的重要元素。

阅读文章 >

欢迎关注作者微信公众号：「能量眼球」

大家好，我是和你们聊设计的花生~

上一期为大家推荐了 5 位擅长扁平风插画的艺术家：

这 5 位优秀的扁平风插画艺术家，是我每日学习的源泉！ 大家好，我是和你们聊设计的花生~ 之前有和大家聊到矢量扁平风插画在设计领域的应用越来越广泛，并且逐渐规范化，这表明这种插画风格将成为一种稳定的应用风格。

阅读文章 >

今天要为大家推荐的 5 位艺术家，都非常擅长「贴纸」设计。现在无论是在海报、产品包装，还是企业 VI 和手账中，贴纸都有广泛的运用。亮眼的贴纸可以成为一种风格代表，为设计增色不少，一起来看看吧~

Tony Balderama 「Instagram 主页」 https://www.instagram.com/tony_balderama/

「Behance 主页」 https://www.behance.net/eltonito

Tony Balderama 是一位来自墨西哥的 设计师 ，非常擅长潮流类的图标 贴纸设计 。

他的贴纸设计以线条勾勒元素形象，细节丰富；颜色偏好高明度中饱和度，鲜亮有活力却又不会扎眼；主体形象设计也非常有个性，标志性的“半闭眼”显示出随心自由的生活态度，受到很多年轻群里的喜爱。

Mrsl Va 「Behance 主页」 https://www.behance.net/mrsl_va

Mrsl Va 是一位来自乌克兰的插画师和设计师，她设计的贴纸带有噪点插画的特性，风格轻松文艺。小而精致的作品形式非常适合刚入门学习插画的小伙伴学习借鉴。

Martcellia Liunic 「Instagram 主页」 https://www.instagram.com/liunic/

「Behance 主页」 https://www.behance.net/liunic

Liunic 是一位来自印度尼西亚的插画师和视觉艺术家，她的插画形状抽象简单，用色大胆，充满童趣。

由于画风鲜明可爱，Liunic 与 Google、Adobe 等知名品牌都有过合作。在进行商业创作的时候，Liunic 大量使用贴纸拼接的方式，排版灵活，可以贴合不同形式的装饰要求。

Yangjin Kim 「Behance 主页」 https://www.behance.net/typo-yj

「Instagram 主页」 https://www.instagram.com/yangjin.c/

Yangjin Kim 是一位韩国图形设计师，他设计的贴纸简单又充满趣味，并经常将文字图形化进行直接的情感传达。贴纸还被添加了立体厚度效果，使其表现样式更加丰富多样。

Mat Voyce 「个人网页」 https://matvoyce.com/

「Instagram 主页」 https://www.instagram.com/matvoyce/

「Behance 主页」 https://www.behance.net/matvoyce

Mat Voyce 是一位来自英国的字体及动效设计师。他专门研究 2D 类型动画，其中以贴纸类型的动态字效最为出色，与可口可乐、Facebook、logitech 等知名品牌都有合作。

相关教程

贴纸类的元素设计起来并不复杂，喜欢这种风格的可以打开小伙伴打开下方教程学起来~

「AI+PS 教程！手把手教你制作镭射风贴纸插画！」 https://uiiiuiii.com/illustrator/1212378876.html

「AI 教程！手把手教你绘制快乐肥宅主题可爱贴纸！」 https://uiiiuiii.com/illustrator/1212284008.html

「更多相关资源教程」 https://uiiiuiii.com/

以上就是今天的分享。如果大家平时在设计上有疑问，欢迎在优设的「设计问答」版块提出，会有非常多优秀的设计导师为大家回答~

前言 满足用户需求、提升用户的产品使用体验，是产品在设计过程中必然要考虑的事情。比如针对老龄群体，如何才能做好适老化设计？针对某一具体场景，如何才能做好相应的 场景化设计 ？不妨看看本文拆解的 设计细节 ，也许会给你启发。

微信 快捷表情 – 关键词显示，减少交互路径发生

1. 使用场景

聊天场景中，表情包的使用相比文字更友好。有时也能缓解打字尴尬的情况。如何快速呈现表情包，让交流无障碍。

2. 设计思考

设计目标：解决表情包交互路径过长导致用户选择困难，提高表情包易用性，提升聊天趣味体验，减少文字表述时的尴尬场景。

设计方案：当用户输入文字后，会提取已添加相关标题内容的表情包，通过对话窗口的形式呈现 4s 然后消失。

这里说两点，第一表情框居右，代表是本人向对方发送内容、左边留有空区为了视觉更好聚焦到文本框内容中，第二 4s 的显示，很好展示表情包内容不至于看不到，且无操作时不需要二次关闭，降低长时间遮挡对话内容的查阅体验。

就表情包显示一个小点，体验是不是很好。微信的每个功能都是用完即走，学习成本很低，原因在于提前一步洞察用户需求并给出对应方案。多用表情包，避免尬聊。

Bluebird 猫头鹰的眼 – 跟随手势进行移动，增加产品亮点

1. 使用场景

专注模式下人是处于相对集中办公的状态，偶尔会扫视剩余时间，如何把产品 IP 融入到使用场景中。

2. 设计思考

设计目标：解决专注模式下页面内容单一问题，结合 IP 进行关联，增加趣味性，提高记忆点增加产品使用粘性。

设计方案：通过环形滑杆位置移动，让猫头鹰的眼睛跟随滑块旋转位移，眼睛对于猫头鹰来说本身就是一个记忆点，放在产品中不违和，相反还有助于提升操作时的趣味性，给产品自身带来记忆点。居中的猫头鹰也处在视觉中心位置，虽然眼睛很小，但因为聚焦更加突出。

微信读书 范围感知 – 当前进度了然于心，智能推算更用心

1. 使用场景

阅读书籍时，读了好久却只过了几十页，阅读的动力降低一半，尤其对于难啃的书籍。

2. 设计思考

设计目标：解决整本书籍阅读时长无法感知，无法合理的给阅读排期，造成阅读一半放弃的行为。给予正向提升用户阅读完成率。

设计方案：微信阅读会记录用户阅读当前书籍的阅读时长，当阅读 20%、40%、60%、80%、100%时，会给予顶部 Toast 提示，并且还有预估多久看完。这两点是让用户感知当前在书阅读籍的那个阶段，让用户合理安排阅读时间，标题前路虽远，尤可期许用文言文语句来向用户表达积极向上的心态，对未来充满期待和动力。给予用户自我勉励，从而有持续动力进行阅读。

漫漫漫画 男女模式 – 随心切换，快速查看不同内容

1. 使用场景

漫画按性别区分时，很容易会把想看的内容分到对应性别模式下，只能通过切换男女模式来查看。

2. 设计思考

设计目标：提升男女模式切换的便捷性，让用户更易选择操作。

设计方案：在首页顶部导航区，左侧位置添加切换模式功能，用户通过点击即可实时切换，并且会有弹窗强提醒，切换后会突出当前模式的类型，如果切换成 Girl，则 Girl 会在最上方展示；切换成 Boy 模式，则 Boy 会在最上方展示，给用户明确感知。

自如 头图位移 – 与手机功能的完美结合，呈现趣味观感体验

1. 使用场景

如今的 Banner 都是矩形条设计，只是里面内容不同，设计抓人眼球的点越来越小了。

2. 设计思考

设计目标：提升顶部 Banner 趣味体验，提高辨识度，加深用户心智，达到自传播效果。

设计方案：自如顶部头图设计结合 iPhone 硬件陀螺仪功能，通过手机左右扭转，水平移动，主体人物会在 X 轴水平位移，与背景形成错位感达到拟 3D 空间感觉。

不可否认，刚出来此模块时，玩了好久，至今还记忆犹新，这难道不是一个加深用户心智的改版尝试嘛。不过话说回来，你提这样的需求，开发小哥会不会拿刀追赶你就不得而知了。

微信 轻触文字朗读 – 高效聊天，适老化的细节体

1. 使用场景

老年人使用聊天对话功能，遇到不认识的文字或阅读障碍情况。如何做到易用原则。

2. 设计思考

设计目标：提升老年人聊天的流畅度，多场景辅助老人使用微信沟通。

设计方案：在适老化模式下，除了常规的形色质构动的调整，聊天内容也做了改变，放大文字目的就是看的清楚，不可否认老年人视力及文字阅读理解都较为吃力，微信在关怀模式中提供了，点击文本框，即刻播放语音内容，把文字语音化，提高聊天效率。

所以，适老化设计绝不是简单的构图放大，而是结合自家产品目标用户做细分的适老功能设计，助力老年人轻松使用。

网易云音乐 进度条的潮点 – 明确感知，直接定位整首歌的高潮处

1. 使用场景

每首歌都有经典的或者说高潮的句子，用户再听歌时想直接定位到高潮处，如何告知用户。

2. 设计思考

设计目标：解决听歌时无法通过进度条准确定位高潮位置，提高进度条定位易用性，并给出高潮点的视觉感知，服务用户增加使用粘性。

设计方案：对于歌曲来说，上半段与下半段是重复歌词，便于用户定位，在上半段歌曲的高潮处添加一个小白点，提示此位置是整首歌的高潮处（记忆点），用户可通过拖拽进度条准确定位，便于用户对已知信息带来确定感的滑动定位效率提升。

音遇 自动播放 – 快速提效，可切换可暂停趣味交互尝鲜

1. 使用场景

在瀑布流浏览时，想要播放下面的语音，可上面的已经在自动播放，如何切换。

2. 设计思考

设计目标：解决播放暂停感知不强的问题，提高语音易用性。

设计方案：在刷领唱页面时，当前停留内容最上方的语音会自动播放，黑胶唱片 360 度旋转，左侧还有音符动画，表示此模块播放中。下面模块暂停，黑胶唱片在最右侧且遮挡一半，左侧无音符动画，而这对比播放暂停较明确。通过点击黑胶唱片进行播放暂停；点击下面黑胶唱片向左划出播放，并且上面黑胶唱片向右划出，两个交互相关联，是一个不错的交互体验尝试。

最右 情感细节 – 输入密码，IP情感化举动

1. 使用场景

登录页输入账号密码时，如何能给用户安全感防止密码泄漏。

2. 设计思考

设计目标：提升输入密码时的趣味反馈，给产品增加记忆点，增强用户心智。

设计方案：在登录页面上方放有产品挥手打招呼的 IP 形象，当用户输入密码时，最右 IP 会变成一个遮眼的形象并且有对话气泡写着“密”，表示当前用户操作很重要不能偷看，虽然产品后台都有记录，但为了表达产品尊重用户保护用户隐私的感知，用 IP 来传达给用户安全感，让产品与用户更加亲近。相同的还有 bilibili 登录页，此方法可以尝试在任何产品中探索使用。

BOSS 直聘 进度感知 – 阅读文章，随时了解当前位置

1. 使用场景

阅读文章时，通过快速滑到底部才能猜测文章大概的长度，给予阅读预期，比较麻烦。

2. 设计思考

设计目标：提升用户查看文章内容长度的预期，更好的给用户进度感知，从而合理安排阅读时间。

设计方案：体验设计要解决用户心理层次的需求，当阅读一篇很长的文章，用户对进度无从感知，这就是体验差的设计。

BOSS 直聘文章阅读中，添加进度条显示，用户通过 Y 轴移动关联进度条 X 轴移动，形成联动效果，如果是很短的一篇文章，用户滑动文章进度条就会走很长反之很短。

为什么不加百分比，这样更简单明了？作者理解，百分比是数字显示，对于文章阅读尤其是文章版式不同的内容会进行视觉干扰，文章本身还是以阅读为主，如果百分比做的太明显会干扰阅读文章本身，就会变的为了达到 100%，粗略扫读，本末倒置。

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

本期 产品细节 分析结束，我们下期再见！

9个产品细节剖析，看看大厂是如何做设计的！ 前言 用户体验是用户对产品价值的整体感受，其中包括用户感受到的产品价值以及用户感受到的操作体验。

阅读文章 >

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

前言 满足用户需求、提升用户的产品使用体验，是产品在设计过程中必然要考虑的事情。比如针对老龄群体，如何才能做好适老化设计？针对某一具体场景，如何才能做好相应的 场景化设计 ？不妨看看本文拆解的 设计细节 ，也许会给你启发。

微信 快捷表情 – 关键词显示，减少交互路径发生

1. 使用场景

聊天场景中，表情包的使用相比文字更友好。有时也能缓解打字尴尬的情况。如何快速呈现表情包，让交流无障碍。

2. 设计思考

设计目标：解决表情包交互路径过长导致用户选择困难，提高表情包易用性，提升聊天趣味体验，减少文字表述时的尴尬场景。

设计方案：当用户输入文字后，会提取已添加相关标题内容的表情包，通过对话窗口的形式呈现 4s 然后消失。

这里说两点，第一表情框居右，代表是本人向对方发送内容、左边留有空区为了视觉更好聚焦到文本框内容中，第二 4s 的显示，很好展示表情包内容不至于看不到，且无操作时不需要二次关闭，降低长时间遮挡对话内容的查阅体验。

就表情包显示一个小点，体验是不是很好。微信的每个功能都是用完即走，学习成本很低，原因在于提前一步洞察用户需求并给出对应方案。多用表情包，避免尬聊。

Bluebird 猫头鹰的眼 – 跟随手势进行移动，增加产品亮点

1. 使用场景

专注模式下人是处于相对集中办公的状态，偶尔会扫视剩余时间，如何把产品 IP 融入到使用场景中。

2. 设计思考

设计目标：解决专注模式下页面内容单一问题，结合 IP 进行关联，增加趣味性，提高记忆点增加产品使用粘性。

设计方案：通过环形滑杆位置移动，让猫头鹰的眼睛跟随滑块旋转位移，眼睛对于猫头鹰来说本身就是一个记忆点，放在产品中不违和，相反还有助于提升操作时的趣味性，给产品自身带来记忆点。居中的猫头鹰也处在视觉中心位置，虽然眼睛很小，但因为聚焦更加突出。

微信读书 范围感知 – 当前进度了然于心，智能推算更用心

1. 使用场景

阅读书籍时，读了好久却只过了几十页，阅读的动力降低一半，尤其对于难啃的书籍。

2. 设计思考

设计目标：解决整本书籍阅读时长无法感知，无法合理的给阅读排期，造成阅读一半放弃的行为。给予正向提升用户阅读完成率。

设计方案：微信阅读会记录用户阅读当前书籍的阅读时长，当阅读 20%、40%、60%、80%、100%时，会给予顶部 Toast 提示，并且还有预估多久看完。这两点是让用户感知当前在书阅读籍的那个阶段，让用户合理安排阅读时间，标题前路虽远，尤可期许用文言文语句来向用户表达积极向上的心态，对未来充满期待和动力。给予用户自我勉励，从而有持续动力进行阅读。

漫漫漫画 男女模式 – 随心切换，快速查看不同内容

1. 使用场景

漫画按性别区分时，很容易会把想看的内容分到对应性别模式下，只能通过切换男女模式来查看。

2. 设计思考

设计目标：提升男女模式切换的便捷性，让用户更易选择操作。

设计方案：在首页顶部导航区，左侧位置添加切换模式功能，用户通过点击即可实时切换，并且会有弹窗强提醒，切换后会突出当前模式的类型，如果切换成 Girl，则 Girl 会在最上方展示；切换成 Boy 模式，则 Boy 会在最上方展示，给用户明确感知。

自如 头图位移 – 与手机功能的完美结合，呈现趣味观感体验

1. 使用场景

如今的 Banner 都是矩形条设计，只是里面内容不同，设计抓人眼球的点越来越小了。

2. 设计思考

设计目标：提升顶部 Banner 趣味体验，提高辨识度，加深用户心智，达到自传播效果。

设计方案：自如顶部头图设计结合 iPhone 硬件陀螺仪功能，通过手机左右扭转，水平移动，主体人物会在 X 轴水平位移，与背景形成错位感达到拟 3D 空间感觉。

不可否认，刚出来此模块时，玩了好久，至今还记忆犹新，这难道不是一个加深用户心智的改版尝试嘛。不过话说回来，你提这样的需求，开发小哥会不会拿刀追赶你就不得而知了。

微信 轻触文字朗读 – 高效聊天，适老化的细节体

1. 使用场景

老年人使用聊天对话功能，遇到不认识的文字或阅读障碍情况。如何做到易用原则。

2. 设计思考

设计目标：提升老年人聊天的流畅度，多场景辅助老人使用微信沟通。

设计方案：在适老化模式下，除了常规的形色质构动的调整，聊天内容也做了改变，放大文字目的就是看的清楚，不可否认老年人视力及文字阅读理解都较为吃力，微信在关怀模式中提供了，点击文本框，即刻播放语音内容，把文字语音化，提高聊天效率。

所以，适老化设计绝不是简单的构图放大，而是结合自家产品目标用户做细分的适老功能设计，助力老年人轻松使用。

网易云音乐 进度条的潮点 – 明确感知，直接定位整首歌的高潮处

1. 使用场景

每首歌都有经典的或者说高潮的句子，用户再听歌时想直接定位到高潮处，如何告知用户。

2. 设计思考

设计目标：解决听歌时无法通过进度条准确定位高潮位置，提高进度条定位易用性，并给出高潮点的视觉感知，服务用户增加使用粘性。

设计方案：对于歌曲来说，上半段与下半段是重复歌词，便于用户定位，在上半段歌曲的高潮处添加一个小白点，提示此位置是整首歌的高潮处（记忆点），用户可通过拖拽进度条准确定位，便于用户对已知信息带来确定感的滑动定位效率提升。

音遇 自动播放 – 快速提效，可切换可暂停趣味交互尝鲜

1. 使用场景

在瀑布流浏览时，想要播放下面的语音，可上面的已经在自动播放，如何切换。

2. 设计思考

设计目标：解决播放暂停感知不强的问题，提高语音易用性。

设计方案：在刷领唱页面时，当前停留内容最上方的语音会自动播放，黑胶唱片 360 度旋转，左侧还有音符动画，表示此模块播放中。下面模块暂停，黑胶唱片在最右侧且遮挡一半，左侧无音符动画，而这对比播放暂停较明确。通过点击黑胶唱片进行播放暂停；点击下面黑胶唱片向左划出播放，并且上面黑胶唱片向右划出，两个交互相关联，是一个不错的交互体验尝试。

最右 情感细节 – 输入密码，IP情感化举动

1. 使用场景

登录页输入账号密码时，如何能给用户安全感防止密码泄漏。

2. 设计思考

设计目标：提升输入密码时的趣味反馈，给产品增加记忆点，增强用户心智。

设计方案：在登录页面上方放有产品挥手打招呼的 IP 形象，当用户输入密码时，最右 IP 会变成一个遮眼的形象并且有对话气泡写着“密”，表示当前用户操作很重要不能偷看，虽然产品后台都有记录，但为了表达产品尊重用户保护用户隐私的感知，用 IP 来传达给用户安全感，让产品与用户更加亲近。相同的还有 bilibili 登录页，此方法可以尝试在任何产品中探索使用。

BOSS 直聘 进度感知 – 阅读文章，随时了解当前位置

1. 使用场景

阅读文章时，通过快速滑到底部才能猜测文章大概的长度，给予阅读预期，比较麻烦。

2. 设计思考

设计目标：提升用户查看文章内容长度的预期，更好的给用户进度感知，从而合理安排阅读时间。

设计方案：体验设计要解决用户心理层次的需求，当阅读一篇很长的文章，用户对进度无从感知，这就是体验差的设计。

BOSS 直聘文章阅读中，添加进度条显示，用户通过 Y 轴移动关联进度条 X 轴移动，形成联动效果，如果是很短的一篇文章，用户滑动文章进度条就会走很长反之很短。

为什么不加百分比，这样更简单明了？作者理解，百分比是数字显示，对于文章阅读尤其是文章版式不同的内容会进行视觉干扰，文章本身还是以阅读为主，如果百分比做的太明显会干扰阅读文章本身，就会变的为了达到 100%，粗略扫读，本末倒置。

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

本期 产品细节 分析结束，我们下期再见！

9个产品细节剖析，看看大厂是如何做设计的！ 前言 用户体验是用户对产品价值的整体感受，其中包括用户感受到的产品价值以及用户感受到的操作体验。

阅读文章 >

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

前言 公开演讲者 Hamza Yusuf 曾这样说过“永远不要削弱语言的力量，言动于心, 心动于身”。笔者相信，在谈正事时，大家应该都很反感说话总是拖泥带水又模棱两可的人，因为在听一大堆废话后、你还不知道对方到底要表达什么，甚至有可能在理解错误的情况下产生误导。

在互联网 产品设计 中，语言本身就是一种界面、一种架构，是链接用户与产品的桥梁，在交互过程中能帮助用户更好地理解产品、如何跟产品沟通顺畅。更有甚者，一个产品语言表达方式的好坏，在用户眼中就代表着这个产品是否友好、好用，所以，有时候简短的几个字就能决定着用户的去留，而这些通过给用户传达信息的语言，我们就将它称之为微文案。

作为设计师，大多都会将自己的专注力集中在了视觉和交互上，潜意识的认为文案只是产品、运营者的工作，殊不知作为经常都在研究用户、跟用户打交道的人，在一些细节上会比产品更懂用户，相比美观的视觉设计，精致、简短文案的引导，则更加清晰、直接。

微文案对产品和用户都有着巨大的影响，清晰、准确、友好、一致的 文案设计 不仅能为产品带来好的体验，还能拉近用户与产品的距离，甚至可以当做改良 用户体验 和吸引用户的工具，因此文案设计就显得非常重要。下面，笔者就和大家简单地聊一聊那些在设计中看似不起眼的微文案设计。

了解微文案 Joshua Porter 在 2009 年诊断过一个电子商务网站，用户在该网站购买流程中填写表单时，有 5%-10%的用户因地址填写错误而终止交易流程，导致用户流失。于是，Porter 提出在地址栏旁增加“请务必输入与您的信用卡关联的地址”的文本提示，后来他在自己的文章中说道“就这样，错误消失了”。这种做法不仅节省了用户时间，还改善了网站的转化率、提高收入。

Porter 最终得出的结论是“在正确的位置、正确的时间、添加正确的引导性文案，就可以完全改变用户体验”，并把这类文案命名为“Microcopy”。

1. 微文案的定义

微文案（Microcopy）指的是在界面中，能够引导、帮助用户与界面交互行为的简短文案，可以是一个单词、也可以是一句话，常见的有表单文案、按钮文案、弹窗文案、错误提示等，大部分微文案都会对用户的行为产生直接的影响，如下所示：

交互前-引导用户去完成某个行为

交互中-鼓励、帮助用户去完成某个行为

交互后-及时给予用户行为之后的反馈（问题和解决方案）

2. 微文案被重视的原因

用户在与产品交流时，微文案作为最接近于用户与产品交互的位置，它可以帮助用户预测问题的发生、并鼓励用户进行下一步操作，提前预判操作过程中可能碰到的问题并提供解决方案，在很大程度上降低用户跳出率。

好的微文案可以清晰的表达出症结所在，消除用户疑虑，让其更快作出抉择，从而为产品带来收益。另外，在情感化方面，微文案的语气态度影响着用户的情绪，用户随时会在当前心情好坏的驱使下决定是否在这个流程中继续走下去。有很多产品在进行体验上的优化时，微文案就是其中的一大版块。

我们都知道，在这个互联网时代，个人信息早就不是什么秘密，但还是会遵循能不提供就不提供、能不注册就尽量不去注册的这一原则。用户体验专家 Jared M. Spool 就利用人们的这一心理在界面增加一段微文案创造了 3 亿美元的利益，基于用户在购物前不愿意提供太多个人信息，Jared M. Spool 在购物页面上写道「您无需注册即可在我们的网站进行购买，只需要点击继续按钮。为了方便您在网站的后续购买，您可以在完成付款流程后创建一个账号。」结果购买的客户数量增加了 45％；另外，Maggie Stanphill 在曾经对谷歌的一个旅店预定广告中将微文案「预定房间」改为「查看可用房间」，其点击率增加了 17%，结果是显而易见的。

3. 微文案专业岗位的出现

在国外，如谷歌这样这样的大型公司，对微文案设计非常重视，为了更好进行品牌文化传播以及给用户创造更好的使用体验，会有对应职位的「UX Writer」人员对微文案进行把关。

相比国内，虽然微文案岗位还处在一个比较尴尬的位置，但对微文案的重视程度明显在快速上升。

微文案设计的基本原则 1. 去开发化

首先，微文案需要简单直白，让用户一眼就能看懂，要规避掉开发语言（如 404、505、错代码 xxx 之类的描述）、双重否定等用户不易懂的文案，避免用户在操作前总是要去思考、陷入不知所措的境地，用户需要明确的知道当前发生了什么，以决定接下来的行为。

其次，避免模棱两可的文案，需要将发生的问题、行为指引等，清晰的表述出来，需要注意的是清晰表述并不是要长篇大论，能用词语表达的就绝不用句子、能用一句话标明就绝不多加半句，用户没有耐心来看你写小说。很多时候，用户在完成任务的过程中总是被很多「下一步」搞得一头雾水，用几个个字的简短描述来代替「下一步」需要完成的任务不是更好吗？当然刻意制造惊喜或氛围的除外，前提是你的惊喜真的能给用户或产品带来价值。

2. 委婉+鼓励

回想一下我们小时候做家务的情景，当父母用命令的语气对我们说“赶紧去扫地，等会我来检查”或者“我这会有些忙，你去帮忙把地打扫一下，扫的干净有奖励哦”，虽然都是不可抗拒事情，但很明显第一种方式是极不情愿的接受，做起事来可能是为了应付，以后会尽量找理由不去做；第二种语气则接受程度更高，还具备一定的吸引力。微文案也是如此，友好的表达方式会显得有诚意，用户更易于接受。

3. 应时应景

在一些特殊的场景下，微文案能起到安抚用户情绪、引导用户选择后续行为的作用。例如空状态/缺省页，可清楚的告知用户发生了什么问题以及解决方案，再通过按钮（按钮文案上述有说明）加以引导；在支付过程中，出现余额不足时，应明确提示金额还差多少、以及在附近提供便捷的充值入口；当用户有多张优惠券，下单时却无法选择使用，则需要将使用条件在原有文案的基础上强化、突出显示。

常见所处位置 1. 按钮

按钮微文案的好坏对产品、用户来说是至关重要的，尤其是「行为召唤按钮」。产品历经千辛万苦将用户带到转化（开通 VIP、下单、支付、登录）页面，就差按下这个按钮，如果因为文案的不清晰让用户有疑惑、增加了操作、理解、时间成本，或对用户产生误导，极有可能让用户从这里溜走，得不偿失，请记住。不管前面付出了多少努力，在用户按下决定转化的关键按钮前，都不算成功。

按钮是引导用户按下的关键因素，如果想要通过按钮为产品提高一定的转化率，那么你的按钮就需要一个优秀的微文案。通过下图中按钮微文案的左右对比，你更倾向于哪一种呢？

2. 表单

在表单页面，作为方向指引，标签只是一个清晰明确的简短文案，真正能给予用户更多帮助的是占位符，它能准确的提醒用户输入区域的交互位置，所以就成了每个表单项的必备元素，但就是因为这点，很多设计师站在必备的基础上，为了占位而占位，让占位符失去了本该发挥的作用，毫无价值。

下图是淘宝新增地址的表单页面，左侧的占位符直接重复标签内容，没人说这种搞法是错误的，但右侧描述了应输入内容的说明、规则、注意事项等，明显降低完成表单内容的难度。设计师可能没有感觉，怎么看都能看懂，但有没有想过填写这个表单的用户根本不是互联网人群，只是第一次想在网上买个东西而已。

道理大家都懂，说起来大家都会，但如果你真的玩了很多APP就会发现，除了那些大厂的产品设计之外，见过最多的不就是左侧的这种表达方式吗？

3. 错误/温馨提示

提示，并不仅仅是告知用户问题所在，而是需要在用户操作之前就给出温馨提示（如注销账号）；出现问题后自动定位到具体位置并提供解决方案（如填写表单），如果实在无法解决，尽可能的提供备用方案或求助渠道，尽可能的降低用户损失（如误删某数据）；操作即将完成或完成之后给予用户鼓励（如就差一点、太棒了）。

4. 缺省/空状态

空状态是产品中必然存在的一种状态，不管是用户初次使用还是系统出错，都可能给用户带来焦虑、挫败或疑惑的负面情绪。

优秀的微文案能达到安抚用户糟糕情绪、取悦用户的作用，从而弥补空白页面带来的失落，然后配合按钮中引导性的微文案帮助用户去消灭空白状态，避免下次出现同样的情况（部分特定的空状态只需安抚用户即可，无需/无法进行引导）。

微文案设计方向及思路 1. 清晰易懂

应使用用户熟悉的语言，尽量让微文案清晰明了、易于理解，避免使用一些专业术语和网络名词。如果不是写“小说”，就不要长篇大论，浓缩才是精华，没有必要在一个位置反复强调同样的内容，需要做的是精简语句，减轻用户的理解负担，降低时间成本。切记，产品每多一点使用成本就可能流失掉一批用户。

2. 统一性表达

对同一类型事务/事件的微文案，其语法、语种都需要保持统一性的表达，避免因用词偏差增加用户认知负担。频繁出现的词汇如新增/新建、您/你、确定/是否…等，即便不影响用户理解，也需要在无歧义的情况下选择其中一种表达方式始终保持一致。

3. 尊重用户

微文案需要永远站在用户角度考虑，不要使用命令和强迫的语气，多给予用户理解与包容、并加以支持与鼓励，让其感受到产品足够的友好、尊重。即便需用户自行承担相应的责任，文案也要克制谦逊，利用相对（万事没有绝对）的语气将出现问题的原因和结果反馈给用户，如果可能的话，尽量提供补救措施，将用户的损失降到最低后，利用微文案对用户情绪进行安抚。

4. 「您」和「你」的区别

「您」-正式且过于认真、严肃，刻意强调对用户的尊敬，感觉时刻保持着距离，少了一份亲切感；

「你」-距离更近，有种打成一片的感觉，试想一下，如果你跟朋友之间总是过于尊敬、客客气气，很可能会缺少一种默契，至少不会去交心。产品也是一样，在交互过程中与用户扮演的就是「你」和「我」的角色，为了拉近与用户之间距离，不妨多使用「你」「我」跟用户进行交流，会更亲切。

5. 两相矛盾的微文案

将两相矛盾的文案融合在一起，看似具有强烈的冲突性，却是一种因果关系。这种方式在营销文案中很常见，当用户害怕失去时，产品顺势给用户一种失去后的打击，文案就起到了“激将”的作用，然后再给予合适的引导，用户转化率很可能得到大幅度的提升。

6. 不要拒绝用户

不要拒绝你的用户，切记要避开如“不要、不能、不可以…”等负面的词汇，一开始就摆出一副拒人于千里之外的姿态，用户凭什么要惯着你的产品。多使用正向且具有引导性的文案，协助用户解决当前的尴尬处境，就算用户迫不得已离开，至少没有留下不好的印象，或许下次还有机会。

7. 省略不必要的标点符号

一句话或一个词就能说清楚的内容，可省略掉不必要的标点符号，例如标签、标题、小提示…等。另外，在部分弹窗中有两段语句的折行文案，去掉标点会显得更干净。

结语 很多初中级设计师认为，文案不属于设计的工作范畴，殊不知文案也和图形一样，都是引导用户的重要元素，在某些场景中，文案更能直击用户内心，起着不可替代的作用。好的微文案能为产品助力，让用户在完成任务的过程中不会迷路，甚至在关键环成为用户在黑暗中的一盏明灯，确保每一步都给用户带来更加顺畅、愉悦的产品体验。

以上是笔者对微文案的理解，不足之处敬请谅解，欢迎大家一起探讨，一起学习、取长补短。

如何快速增加17%的业绩？收下这份微文案设计基础指南 当我们想要设计一个用户体验良好的页面时，文案是我们不容忽视的重要元素。

阅读文章 >

欢迎关注作者微信公众号：「能量眼球」