中秋节小长假结束了，给大家来一波干货吧！写的时候没注意，写完了我才注意到这波基于 人工智能 或者说 机器学习 的工具有点多，有专门为 M1 芯片 Mac 准备的 Stable Diffusion 客户端，有基于人工智能的纹身图案生成器，甚至广告效果和热图生成工具应该也是基于大量数据训练出来的。当然，此外还有不少实用的工具，大家可以往下仔细看看。

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

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

阅读文章 >

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

阅读文章 >

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

阅读文章 >

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

阅读文章 >

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

阅读文章 >

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

1、高素质产品和初创视频合集 https://www.flowjam.co/startup-launch-videos

通常初创公司那些轻盈有趣的视频都有哪些玩法？这个名为 Flowjam 的网站搜集了目前初创公司的的产品和公司本身相关的视频，你可以从这些优秀的视频内容当中获取灵感。不过 Flowjam 应该也是做视频内容创业的团队，他们自身也接受视频制作的委托。

2、在线图片编辑协作平台Picflow https://picflow.com/

传统设计软件在线化、协作化可以说是大势所趋，除了专门面向 UI、UX设计的工具开始往这个方向走，也有很多其他设计细分领域的软件会开始这样做，比如这个 Picflow 就是专门面向创意工作者、摄影师等群体的在线协作型修片工具。Picflow 照片的处理上提供修片所需要的全部功能，同时支持多人在线协同，即使是免费试用基础款版也有独立的云空间，Picflow 可以无缝的和 Lightroom 协同。

3、人工智能纹身图案生成平台 https://www.tattoosai.com/

人工智能和机器学习也开始在不同的细分领域当中发力了，以单色为主的纹身图案这样的小门类居然也有平台照顾到，不过如果你是平面设计师肯定也用得上这样的工具，毕竟图案就是图案，在平面、插画、banner甚至 UI 当中一样可以用得上对不对。Tattoos AI 提供初始 8 个图案免费生成下载的试用，你可以上手先试试看。

4、免费广告热图预测工具 https://www.zappi.io/app/digital_prediction

这个工具简直就是来造福设计师和营销人员的，Zappi 出品的这个工具可以根据大量的历史数据和专业的眼动测试数据，帮你快速预测你所设计的广告图片到底有没有效果，效果到底怎么样。这个工具是免费的，并且和 EyeQuant 集成，早期只能检测视频广告，如今也可以检测图片广告，实用性和易用性都非常强。

5、为 MUI 而准备的精美 React 组件 https://kit.uifoundations.com/

这套 UI 工具包当中包含了 64 个面向 MUI 的 React 组件，这些组件可和 MUI v5 无缝衔接协作，无需担心布局的兼容性和 CSS 样式的问题，你可以贴过去之后，根据自己的需求进行更加深入的定制。

6、免费高质量图标合集 iconscave https://iconscave.com/

图标绝对是日常设计当中的刚需，这个名为 iconscave 的平台提供高质量的 免费图标 ，其中包含绝大多数常见的图标样式和题材，你可以直接根据名称搜索，使用的方式也相当简单，直接点击就可以复制到剪贴板，然后粘贴到你需要使用的地方。

7、给 M1 芯片 Mac 的 Stable Diffusion 客户端 https://github.com/divamgupta/diffusionbee-stable-diffusion-ui

人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器 大家好，我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。

阅读文章 >

最近出来了不少基于语言描述就能生成高素质图片的人工智能平台，其中 Stable Diffusion 是非常著名的一款，不过由于它是基于 Creative ML OpenRAIL-M 开源许可证发布，所以很多不同的平台会直接接入它的算法，应用在不同的 APP 和平台当中。

目前这个是针对当前 M1 和 M2 芯片 Mac 所专用的本地客户端，直接接入 Stable Diffusion 平台，输入描述就能生成图片，无需代码，无需额外的知识，一键安装，使用 M1 Mac 的同学有福了。

中秋节小长假结束了，给大家来一波干货吧！写的时候没注意，写完了我才注意到这波基于 人工智能 或者说 机器学习 的工具有点多，有专门为 M1 芯片 Mac 准备的 Stable Diffusion 客户端，有基于人工智能的纹身图案生成器，甚至广告效果和热图生成工具应该也是基于大量数据训练出来的。当然，此外还有不少实用的工具，大家可以往下仔细看看。

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

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

阅读文章 >

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

阅读文章 >

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

阅读文章 >

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

阅读文章 >

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

阅读文章 >

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

1、高素质产品和初创视频合集 https://www.flowjam.co/startup-launch-videos

通常初创公司那些轻盈有趣的视频都有哪些玩法？这个名为 Flowjam 的网站搜集了目前初创公司的的产品和公司本身相关的视频，你可以从这些优秀的视频内容当中获取灵感。不过 Flowjam 应该也是做视频内容创业的团队，他们自身也接受视频制作的委托。

2、在线图片编辑协作平台Picflow https://picflow.com/

传统设计软件在线化、协作化可以说是大势所趋，除了专门面向 UI、UX设计的工具开始往这个方向走，也有很多其他设计细分领域的软件会开始这样做，比如这个 Picflow 就是专门面向创意工作者、摄影师等群体的在线协作型修片工具。Picflow 照片的处理上提供修片所需要的全部功能，同时支持多人在线协同，即使是免费试用基础款版也有独立的云空间，Picflow 可以无缝的和 Lightroom 协同。

3、人工智能纹身图案生成平台 https://www.tattoosai.com/

人工智能和机器学习也开始在不同的细分领域当中发力了，以单色为主的纹身图案这样的小门类居然也有平台照顾到，不过如果你是平面设计师肯定也用得上这样的工具，毕竟图案就是图案，在平面、插画、banner甚至 UI 当中一样可以用得上对不对。Tattoos AI 提供初始 8 个图案免费生成下载的试用，你可以上手先试试看。

4、免费广告热图预测工具 https://www.zappi.io/app/digital_prediction

这个工具简直就是来造福设计师和营销人员的，Zappi 出品的这个工具可以根据大量的历史数据和专业的眼动测试数据，帮你快速预测你所设计的广告图片到底有没有效果，效果到底怎么样。这个工具是免费的，并且和 EyeQuant 集成，早期只能检测视频广告，如今也可以检测图片广告，实用性和易用性都非常强。

5、为 MUI 而准备的精美 React 组件 https://kit.uifoundations.com/

这套 UI 工具包当中包含了 64 个面向 MUI 的 React 组件，这些组件可和 MUI v5 无缝衔接协作，无需担心布局的兼容性和 CSS 样式的问题，你可以贴过去之后，根据自己的需求进行更加深入的定制。

6、免费高质量图标合集 iconscave https://iconscave.com/

图标绝对是日常设计当中的刚需，这个名为 iconscave 的平台提供高质量的 免费图标 ，其中包含绝大多数常见的图标样式和题材，你可以直接根据名称搜索，使用的方式也相当简单，直接点击就可以复制到剪贴板，然后粘贴到你需要使用的地方。

7、给 M1 芯片 Mac 的 Stable Diffusion 客户端 https://github.com/divamgupta/diffusionbee-stable-diffusion-ui

人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器 大家好，我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。

阅读文章 >

最近出来了不少基于语言描述就能生成高素质图片的人工智能平台，其中 Stable Diffusion 是非常著名的一款，不过由于它是基于 Creative ML OpenRAIL-M 开源许可证发布，所以很多不同的平台会直接接入它的算法，应用在不同的 APP 和平台当中。

目前这个是针对当前 M1 和 M2 芯片 Mac 所专用的本地客户端，直接接入 Stable Diffusion 平台，输入描述就能生成图片，无需代码，无需额外的知识，一键安装，使用 M1 Mac 的同学有福了。

这是一个寒气森森的时代，大厂裁员，股市疲软，人心惶惶，华为创始人任正非甚至在内部文章中提到「把活下来作为最主要纲领」。

但是寒冰之下又是藏着火热生机的时代。越来越多的普通消费者开始向内探索探索自身的需求，在大厂收缩的同时，「新消费」所催生的新品牌、新产品正在快速拓展，在疫情之后逆势而上，和大厂们的困局形成鲜明的对比。

互联网基础设施的成熟为国产品牌和新消费品牌，制造了良好的土壤，疫情之后的用户对于健康和生活的关注点迁移，则让国产品牌、新消费品牌、个人品牌成为了越来越多用户的选择。

相比于「雀巢」与「星巴克」，你听到「三顿半」和「瑞幸」的频率更高。在社交媒体上叱咤风云的新消费品牌越来越多，「喜茶」、「泡泡玛特」、「元气森林」、「茶颜悦色」已有巨人之姿，仅咖啡这一赛道当中，「三顿半」就需要面对「时萃」、「隅田川」、「永璞」这些同样充满生命力的新品牌的竞争。

有的品牌正在老去，但永远有新品牌正年轻，对于 LOGO 和品牌设计的需求，在新消费的大趋势下，越来越强。

围绕着 LOGO 设计而拓展开的品牌策划和视觉设计，正在成为设计私单的蓝海：

截图来自 LOGO 特训营学员「奇峰」

而跟着贰喜哥掌握了快速拓展 LOGO 变体秘诀的学员 半夏 ，能在一个月之内出 5 版方案，堪称「无情的设计方案量产机」：

也正是这些往期学员的经历，给了贰喜哥灵感，在第十期的课程当中，做了全新的升级，在原有的 LOGO 设计知识点的基础上，拓展出针对性训练，输出更多更好的作品：

这套 LOGO 设计实战直播课总计 22 天

课程原价 499 元， 新课上新价仅需 399 元！

移动端扫码报名，网页端点击链接报名 ?  https://pro.uisdc.com/detail/p_63152f86e4b00a4f373cf6b2/6

一、高产、高效、高过稿率 LOGO 设计的秘诀 无论是私单还是正式项目，比稿和改稿总有一个是你逃不脱的。因为一个 LOGO 总会有各种各样的可能性。

但是你要如何推导出这些可能性？对的思维方式，对的练习方式，可以帮你基于基础需求，做出 LOGO 的快速变体，而我们本期的课程，贰喜哥将会重新整合以往的知识点，在第二和第四轮课程中，集中为你梳理文字和图形两大类 LOGO 设计的专项训练：

同时，在这些训练的基础上，喜哥保留了最为拿手的中式/日式 LOGO 风格化的设计，并且增加了视觉和品牌物料延伸的内容，带你延伸出更加成体系、项目级别的物料：

这些新增和提升的课程内容，将会让你在 LOGO 和品牌设计中更加有竞争力。改稿有更多的选择，比稿有更多作品，提案更容易通过，在新消费崛起的浪潮中，收获更多的私单、更高收益！ 下面是完整的课程大纲和排期：

这套 LOGO 设计实战直播课总计 22 天

课程原价 499 元， 新课上新价仅需 399 元！

移动端扫码报名，网页端点击链接报名 ?  https://pro.uisdc.com/detail/p_63152f86e4b00a4f373cf6b2/6

二、独立品牌设计师贰喜哥

可以看到，贰喜哥每组作品都拿了 3 个火苗，人气也高达 374W，正是靠这些品牌设计作品，成为站酷百万人气 设计师 的。

三、老师作品

贰喜哥的字体设计也相当有风格：

如果你想知道学完整个课程是什么效果，看看上期学员作品就知道了。

四、学员作品 作业主题：鸟松日料

作业主题：黑格动力

作业主题：林仙皇茶

作业主题：酱珍面坊

作业主题：雀喜

作业主题：云印

作业主题：猴购

作业主题：完整品牌提案

还有很多作业，篇幅有限就不一一展示出来了。

这套 LOGO 设计实战直播课总计 22 天

课程原价 499 元， 新课上新价仅需 399 元！

移动端扫码报名，网页端点击链接报名 ?  https://pro.uisdc.com/detail/p_63152f86e4b00a4f373cf6b2/6

编者按：本文分享了12个实用的排版设计技巧，很适合新手入门学习。

更多 排版 技巧：

掌握这5个Ai小技巧，帮你快速提升文字排版效率（四） 大家好，我是和你们聊设计的花生~ 今天继续为大家带来 Ai 排版技巧第四期，这期主要和大家分享 5 个与长文本排版相关的实用小技巧，一起来看看吧~ 上期回顾： [link https://www.uisdc.com/5-ai-tips-3] 1. 设置网格并转换为参考线[/m

阅读文章 >

大家好，这里是设计夹，今天分享的是「排版技巧」。页面的排版很灵活，但在排版时我们不单单要考虑视觉上的好看，还要考虑使用上的体验。

将页面中的内容和元素通过合理的方式方法进行排版，保证重点内容突出而且容易阅读是首要目的。

这次总结一些在页面排版和布局中需要注意的技巧，掌握这些容易上手的 排版技巧 能够大力提升设计效率。

一、邻近性 邻近性是指页面中有关联的元素比其他元素的距离更近。页面中的内容或元素按照邻近性分组，比按照形状或者颜色分组更直观。

格式塔原理中的接近性原则是如何影响排版设计的？ 人脑是一个相当出色的数据处理器，背后所蕴藏的功能非常丰富，直到今天都还没有得到充分的探索。

阅读文章 >

二、相似性 同一页面中表达相同功能的元素，通过相同的形状表示。相似性是视觉上相似元素的组合，通常通过大小、形状和颜色来区分。

相似的元素会表现出相似的行为，比如下图右边的选项中，都使用了一致的单选框，更利于用户做出选择。

让设计更有说服力的20条经典原则：相似性 编者按：「让设计更有说服力的 20 条经典原则」系列文章已经到了第 8 篇，每篇文章针对一个设计原则进行探讨，通过真实案例为你解析在设计中该如何运用。

阅读文章 >

如果像左图一样，单选框的样式不统一，那么用户在选择的时候可能就会产生疑问，是不是点击不同样式的单选框会有不同的意思，造成不必要的困扰。

三、连续性 现在很多移动端产品都采用 feed 流的形式，可以无限加载内容，用户怎么滑都滑不到底。这样的场景下就要考虑 feed 流内容的连续性，通过将内容进行合理地对齐，保证阅读上的连续性。

对齐的作用除了可以让页面的内容看起来更整齐，还能够下意识地影响用户的浏览视线和阅读顺序。比如 F 型和 Z 型视觉动线，通过不同的对齐排版方式来引导用户的视线。

四、闭合性 闭合性是通过排版布局元素自身的边距以及元素间的间距，来减少用户的认知负荷。现在流行的卡片式布局就用到了这个原则，通过将元素整合到一个卡片中，合理安排元素的间距来达到整齐的效果。

比如在“左图右文”的卡片布局中，要考虑图片与标题的间距、标题是否需要和图片顶部对齐、在规定空间内标题如果字数过多怎么折行和省略处理、标题和注释之间的距离和对齐方式等等一系列问题。

5000字干货！超详细的保姆级间距设计规范 编者注：UI设计中的间距到底是什么，有什么作用，如何合理有效地使用？

阅读文章 >

看到这里会发现，想要把一个简单的卡片式布局排版好，并不简单，需要考虑到很多的细节。

另外，卡片式的排版不一定必须带有外边框，如果每个卡片中内容排版很整齐，就算不用额外边框，用户也可以清晰地阅读。

五、共同行为 具有相同概念的元素需要设计为具有相同的行为。当元素沿同一方向移动时，它们被识别为同一级别的元素。比如在手机中有时候会看到横向排版的内容，这些内容处于用一个层级，用户左右滑动来观看。

六、前景和背景 设计使前景和背景清晰区分。当我们的视线感知到元素重叠时，会根据焦点分别识别前景和背景。

为了减少混乱，可以使用深色蒙版或者弹窗阴影来分离前景和背景。当页面中有弹窗跳出，通常背景会有一层深色的遮罩，以此来突出弹窗中的内容。

七、分组 当我们想把不同类别的内容进行分组时，可以添加线条或背景来区分。

聚集在同一区域的元素被看做为属于同一板块的元素，因此这些内容需要与其他元素有明显的区别。常用的方法是改变背景的颜色或者在背景中插入图片，让这个板块的内容和其他内容有强烈的对比。

八、单位 设定有效设计的最小单位。要在多个倍数（如 1.5x 2x）中使用设计元素，使用可以整除的偶数。

其中，8 点网格系统被广泛使用，它可以将主显示器的整个像素除以一个整数。但是 8 点网格并不能适用于所有的设计，比如 iOS 的 375 和 750 的屏幕尺寸。

如何用「8点网格」来规范你的设计？看这篇好文！ 8点网格流行有一段时间了，我最早知道这种设计方式是在看了谷歌的Material Design设计规范之后开始认识的。

阅读文章 >

九、网格 网格是一种高效设计的工具，通过定义一个大的框架来进行元素排版。网格系统易于构建，而且能提供一致的视觉节奏，非常适合应用在日常的设计工作中。

网格系统的具体用法可以看这篇文章多案例帮你掌握栅格系统的布局设计：

想要用好网格系统，这8个小技巧你必须掌握！ Hi，我是彩云。

阅读文章 >

十、屏幕尺寸 设计的时候要考虑移动设备的屏幕尺寸问题。就 iOS 而言，手机机型都是固定的，因此主要基于旗舰机型的尺寸进行设计。

由于使用 Android 系统的手机品牌太多，因此不可能优化所有屏幕，因此倾向于遵循谷歌提供的规范。

十一、密度 为了在屏幕放大时显示相同的大小，需要了解屏幕的密度。PPI 是常用的单位，代表每英寸的像素数，是指在 1 英寸 x1 英寸的屏幕区域中物理显示的像素数。

以 DP 和 PX 为单位进行设计，以便在任何屏幕尺寸上都能物理显示相同的大小。

十二、响应式 对于同时支持移动端和桌面端的产品，可以使用响应式设计来提升效率和体验，常用的结构形式分为导航栏、工具栏和内容区。

导航栏：顶级导航菜单区，如分类、菜单。

工具栏：搜索、书签等工具。

内容区域：文本、图像、列表等内容显示区。

腾讯出品！超实用的响应式设计技巧 响应式网页设计 (Responsive web design) 虽然早已被提出，不过因为国内开发习惯和APP设计优先，日常工作使用这种布局方式的机会不多。

阅读文章 >

最后 以上就是排版设计中要注意的细节和技巧，希望通过这些内容能帮助你对排版和布局有更多的思考。

慢慢来比较快，如觉得有帮助，

欢迎关注作者微信公众号：「Clip设计夹」

编者按：本文分享了12个实用的排版设计技巧，很适合新手入门学习。

更多 排版 技巧：

掌握这5个Ai小技巧，帮你快速提升文字排版效率（四） 大家好，我是和你们聊设计的花生~ 今天继续为大家带来 Ai 排版技巧第四期，这期主要和大家分享 5 个与长文本排版相关的实用小技巧，一起来看看吧~ 上期回顾： [link https://www.uisdc.com/5-ai-tips-3] 1. 设置网格并转换为参考线[/m

阅读文章 >

大家好，这里是设计夹，今天分享的是「排版技巧」。页面的排版很灵活，但在排版时我们不单单要考虑视觉上的好看，还要考虑使用上的体验。

将页面中的内容和元素通过合理的方式方法进行排版，保证重点内容突出而且容易阅读是首要目的。

这次总结一些在页面排版和布局中需要注意的技巧，掌握这些容易上手的 排版技巧 能够大力提升设计效率。

一、邻近性 邻近性是指页面中有关联的元素比其他元素的距离更近。页面中的内容或元素按照邻近性分组，比按照形状或者颜色分组更直观。

格式塔原理中的接近性原则是如何影响排版设计的？ 人脑是一个相当出色的数据处理器，背后所蕴藏的功能非常丰富，直到今天都还没有得到充分的探索。

阅读文章 >

二、相似性 同一页面中表达相同功能的元素，通过相同的形状表示。相似性是视觉上相似元素的组合，通常通过大小、形状和颜色来区分。

相似的元素会表现出相似的行为，比如下图右边的选项中，都使用了一致的单选框，更利于用户做出选择。

让设计更有说服力的20条经典原则：相似性 编者按：「让设计更有说服力的 20 条经典原则」系列文章已经到了第 8 篇，每篇文章针对一个设计原则进行探讨，通过真实案例为你解析在设计中该如何运用。

阅读文章 >

如果像左图一样，单选框的样式不统一，那么用户在选择的时候可能就会产生疑问，是不是点击不同样式的单选框会有不同的意思，造成不必要的困扰。

三、连续性 现在很多移动端产品都采用 feed 流的形式，可以无限加载内容，用户怎么滑都滑不到底。这样的场景下就要考虑 feed 流内容的连续性，通过将内容进行合理地对齐，保证阅读上的连续性。

对齐的作用除了可以让页面的内容看起来更整齐，还能够下意识地影响用户的浏览视线和阅读顺序。比如 F 型和 Z 型视觉动线，通过不同的对齐排版方式来引导用户的视线。

四、闭合性 闭合性是通过排版布局元素自身的边距以及元素间的间距，来减少用户的认知负荷。现在流行的卡片式布局就用到了这个原则，通过将元素整合到一个卡片中，合理安排元素的间距来达到整齐的效果。

比如在“左图右文”的卡片布局中，要考虑图片与标题的间距、标题是否需要和图片顶部对齐、在规定空间内标题如果字数过多怎么折行和省略处理、标题和注释之间的距离和对齐方式等等一系列问题。

5000字干货！超详细的保姆级间距设计规范 编者注：UI设计中的间距到底是什么，有什么作用，如何合理有效地使用？

阅读文章 >

看到这里会发现，想要把一个简单的卡片式布局排版好，并不简单，需要考虑到很多的细节。

另外，卡片式的排版不一定必须带有外边框，如果每个卡片中内容排版很整齐，就算不用额外边框，用户也可以清晰地阅读。

五、共同行为 具有相同概念的元素需要设计为具有相同的行为。当元素沿同一方向移动时，它们被识别为同一级别的元素。比如在手机中有时候会看到横向排版的内容，这些内容处于用一个层级，用户左右滑动来观看。

六、前景和背景 设计使前景和背景清晰区分。当我们的视线感知到元素重叠时，会根据焦点分别识别前景和背景。

为了减少混乱，可以使用深色蒙版或者弹窗阴影来分离前景和背景。当页面中有弹窗跳出，通常背景会有一层深色的遮罩，以此来突出弹窗中的内容。

七、分组 当我们想把不同类别的内容进行分组时，可以添加线条或背景来区分。

聚集在同一区域的元素被看做为属于同一板块的元素，因此这些内容需要与其他元素有明显的区别。常用的方法是改变背景的颜色或者在背景中插入图片，让这个板块的内容和其他内容有强烈的对比。

八、单位 设定有效设计的最小单位。要在多个倍数（如 1.5x 2x）中使用设计元素，使用可以整除的偶数。

其中，8 点网格系统被广泛使用，它可以将主显示器的整个像素除以一个整数。但是 8 点网格并不能适用于所有的设计，比如 iOS 的 375 和 750 的屏幕尺寸。

如何用「8点网格」来规范你的设计？看这篇好文！ 8点网格流行有一段时间了，我最早知道这种设计方式是在看了谷歌的Material Design设计规范之后开始认识的。

阅读文章 >

九、网格 网格是一种高效设计的工具，通过定义一个大的框架来进行元素排版。网格系统易于构建，而且能提供一致的视觉节奏，非常适合应用在日常的设计工作中。

网格系统的具体用法可以看这篇文章多案例帮你掌握栅格系统的布局设计：

想要用好网格系统，这8个小技巧你必须掌握！ Hi，我是彩云。

阅读文章 >

十、屏幕尺寸 设计的时候要考虑移动设备的屏幕尺寸问题。就 iOS 而言，手机机型都是固定的，因此主要基于旗舰机型的尺寸进行设计。

由于使用 Android 系统的手机品牌太多，因此不可能优化所有屏幕，因此倾向于遵循谷歌提供的规范。

十一、密度 为了在屏幕放大时显示相同的大小，需要了解屏幕的密度。PPI 是常用的单位，代表每英寸的像素数，是指在 1 英寸 x1 英寸的屏幕区域中物理显示的像素数。

以 DP 和 PX 为单位进行设计，以便在任何屏幕尺寸上都能物理显示相同的大小。

十二、响应式 对于同时支持移动端和桌面端的产品，可以使用响应式设计来提升效率和体验，常用的结构形式分为导航栏、工具栏和内容区。

导航栏：顶级导航菜单区，如分类、菜单。

工具栏：搜索、书签等工具。

内容区域：文本、图像、列表等内容显示区。

腾讯出品！超实用的响应式设计技巧 响应式网页设计 (Responsive web design) 虽然早已被提出，不过因为国内开发习惯和APP设计优先，日常工作使用这种布局方式的机会不多。

阅读文章 >

最后 以上就是排版设计中要注意的细节和技巧，希望通过这些内容能帮助你对排版和布局有更多的思考。

慢慢来比较快，如觉得有帮助，

欢迎关注作者微信公众号：「Clip设计夹」

这是一个寒气森森的时代，大厂裁员，股市疲软，人心惶惶，华为创始人任正非甚至在内部文章中提到「把活下来作为最主要纲领」。

但是寒冰之下又是藏着火热生机的时代。越来越多的普通消费者开始向内探索探索自身的需求，在大厂收缩的同时，「新消费」所催生的新品牌、新产品正在快速拓展，在疫情之后逆势而上，和大厂们的困局形成鲜明的对比。

互联网基础设施的成熟为国产品牌和新消费品牌，制造了良好的土壤，疫情之后的用户对于健康和生活的关注点迁移，则让国产品牌、新消费品牌、个人品牌成为了越来越多用户的选择。

相比于「雀巢」与「星巴克」，你听到「三顿半」和「瑞幸」的频率更高。在社交媒体上叱咤风云的新消费品牌越来越多，「喜茶」、「泡泡玛特」、「元气森林」、「茶颜悦色」已有巨人之姿，仅咖啡这一赛道当中，「三顿半」就需要面对「时萃」、「隅田川」、「永璞」这些同样充满生命力的新品牌的竞争。

有的品牌正在老去，但永远有新品牌正年轻，对于 LOGO 和品牌设计的需求，在新消费的大趋势下，越来越强。

围绕着 LOGO 设计而拓展开的品牌策划和视觉设计，正在成为设计私单的蓝海：

截图来自 LOGO 特训营学员「奇峰」

而跟着贰喜哥掌握了快速拓展 LOGO 变体秘诀的学员 半夏 ，能在一个月之内出 5 版方案，堪称「无情的设计方案量产机」：

也正是这些往期学员的经历，给了贰喜哥灵感，在第十期的课程当中，做了全新的升级，在原有的 LOGO 设计知识点的基础上，拓展出针对性训练，输出更多更好的作品：

这套 LOGO 设计实战直播课总计 22 天

课程原价 499 元， 新课上新价仅需 399 元！

移动端扫码报名，网页端点击链接报名 ?  https://pro.uisdc.com/detail/p_63152f86e4b00a4f373cf6b2/6

一、高产、高效、高过稿率 LOGO 设计的秘诀 无论是私单还是正式项目，比稿和改稿总有一个是你逃不脱的。因为一个 LOGO 总会有各种各样的可能性。

但是你要如何推导出这些可能性？对的思维方式，对的练习方式，可以帮你基于基础需求，做出 LOGO 的快速变体，而我们本期的课程，贰喜哥将会重新整合以往的知识点，在第二和第四轮课程中，集中为你梳理文字和图形两大类 LOGO 设计的专项训练：

同时，在这些训练的基础上，喜哥保留了最为拿手的中式/日式 LOGO 风格化的设计，并且增加了视觉和品牌物料延伸的内容，带你延伸出更加成体系、项目级别的物料：

这些新增和提升的课程内容，将会让你在 LOGO 和品牌设计中更加有竞争力。改稿有更多的选择，比稿有更多作品，提案更容易通过，在新消费崛起的浪潮中，收获更多的私单、更高收益！ 下面是完整的课程大纲和排期：

这套 LOGO 设计实战直播课总计 22 天

课程原价 499 元， 新课上新价仅需 399 元！

移动端扫码报名，网页端点击链接报名 ?  https://pro.uisdc.com/detail/p_63152f86e4b00a4f373cf6b2/6

二、独立品牌设计师贰喜哥

可以看到，贰喜哥每组作品都拿了 3 个火苗，人气也高达 374W，正是靠这些品牌设计作品，成为站酷百万人气 设计师 的。

三、老师作品

贰喜哥的字体设计也相当有风格：

如果你想知道学完整个课程是什么效果，看看上期学员作品就知道了。

四、学员作品 作业主题：鸟松日料

作业主题：黑格动力

作业主题：林仙皇茶

作业主题：酱珍面坊

作业主题：雀喜

作业主题：云印

作业主题：猴购

作业主题：完整品牌提案

还有很多作业，篇幅有限就不一一展示出来了。

这套 LOGO 设计实战直播课总计 22 天

课程原价 499 元， 新课上新价仅需 399 元！

移动端扫码报名，网页端点击链接报名 ?  https://pro.uisdc.com/detail/p_63152f86e4b00a4f373cf6b2/6

编者按： 网易云音乐 「一起听陌生人版」项目，上线后周末的日均活跃用户数量增加了21万，好评如潮。这个功能是如何设计出来的？来看背后设计团队的思考和总结。

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

阅读文章 >

一、背景 电影《再次出发之纽约遇见你》中有一个浪漫的场景，男主和女主通过一根耳机分线器一起听着音乐，一起感受着当下同一段旋律。通过这根分线器，他们分享着自己的歌单，分享着当下的情绪，隔绝外界的纷扰，游荡在大街小巷。

这种听歌方式我也很喜欢，同样的歌曲让人产生了不一样的感受。我想，可能是陪伴和共鸣赋予了这首歌新的生命力吧!

如今，无需分线器， 网易云音乐一起听 可以让你和那个 TA 随时一起欣赏音乐、分享心情。去年 7 月份上线的这个功能获得了用户的一致好评，之后的数据表现也是远超预期。但是，在众多的用户反馈中，最多的一个痛点是：身边没有人陪我一起听，能不能做个匹配功能，找陌生人一起听？

站在业务的层面考虑，一起听作为一个熟人听歌的功能，在恋人和亲密好友之间普及度非常高，但同时也要考虑当这部分用户数据增长到达瓶颈后，一起听如何拓展新的用户群。陌生人一起听是一个很好的方向，能够突破熟人社交的限制，拥抱更多社交关系拓展的可能性。

一、第一期探索 为了满足这一部分用户的需求，陌生人一起听的项目在决策层的支持下进入了探索阶段。这一阶段主要想要知道什么样的产品形态适合陌生人一起听，是在原有的熟人一起听的框架内进行拓展，还是大胆颠覆更加让人眼前一亮呢？每位小伙伴都描述着自己的构想，朝着不同方向探索。经过一轮轮的方案讨论，最终我们选择了“星球”作为框架，来承载陌生人一起听的设计。大概的构想是这样的：当我在听一首歌，感觉孤单并希望有人陪伴时。可以通过一个入口进入到一个由光点组成的星球，每个光点代表一个当前也在听这首歌曲的用户。我可以展示自己的状态，和其他的用户进行互动。当我对一个用户感兴趣时，可以选择“跟随”TA，每当 TA 去往另一个星球（也就是听其他的歌时），我也会自动移动到那个星球，跟随着 TA 一起听。

根据上述设想，设计团队还产出了一些方案来还原大家心中的“星球”，下面是早期一个方案的动态演示，黑胶上的封面变化为一个同色系的星球，每个光点代表一个正在听这首歌的陌生人。

我们将这个大概构想告知开发同学后，得知需要的人力和时间成本远超我们预期。由于决策层希望能够在一起听的热度未退时尽快上线陌生人版，我们不得不把这个星球版的方案暂时搁置，重新构想在原有框架内的设计方案。

决定在原有框架内进行设计后，我们就需要收拢之前发散的想法。针对主要需求进行设计，把有限的资源用到刀刃上。最终确定的产品形态似乎很简单直接，点一下按钮，匹配一个愿意和我一起听歌的人，但是到了视觉设计阶段，就需要考虑更多的问题。

从关系的角度讲。熟人之间比较亲密，陌生人之间要保持一定距离，慢慢了解对方。与熟人一起听有着稳定的预期，但是陌生人带来的是不稳定，这种不稳定可能是缘分和惊喜，也可能是骚扰和惊吓。考虑到这种不同，做陌生人一起听的功能就不能够完全套用熟人的设计，而是要针对性地进行重新思考。

首先，功能的入口能够给用户第一印象，我们用了一个动画表达两个陌生人沉浸在音乐中的含义，两个匿名小人安静地呆在一起，音符环绕着它们运动，暗示他们正在一起听歌。通过这种表达帮助用户快速了解功能，同时渲染氛围，吸引用户使用。

在熟人一起听歌过程中，为了表达亲密，表现形式上采用了耳机共享，头像叠放的表现形式。但在陌生人之间，为了避免过于亲密，就去掉了耳机线。为了控制社交距离，头像不再叠着放了。陌生人的头像也模糊处理来保持神秘感。

为了保证没有社交意愿的用户不被打扰，同时为了避免社交过程过于快餐化，陌生人一起听采用了一方申请，另一方同意才可以公开身份的规则。为了配合这个规则，我们设计了陌生人揭面机制来引导用户和传达信息。匹配成功后，双方会先隐藏身份听歌。以此来鼓励用户尽量关注音乐本身，而不是纯粹为了交友而进行一起听。当一起听了 5 分钟后，对方的面具会小幅度上下移动，暗示用户可以点击。点击对方的面具后会发出公开身份的申请，对方同意后才可以揭开面具。后续听歌过程中，双方就在身份公开的情况下一起听歌。如果相处愉快，可以去对方主页了解更多信息，甚至互关成为好友，下一次以熟人的身份邀请一起听。

“于千万人之中，遇见你所遇见的人”，这是我们想在匹配的过程中体现的缘分感。受限于开发成本，匹配动画只能在一个小小的圆形容器里去设计。下面四个方案是前期的探索稿，主要是把人抽象成一个个点，点可能代表一种颜色、一颗星星、一个光点，点的运动表达寻找的过程。

最后选用了第四个，进行最终优化后的呈现如下。通过雷达的转动表达寻找，浮动的光点代表一个个陌生人，最终受到召唤的那个 TA 飞入雷达范围，发出代表回应的音波后，变大形成一个蒙面的头像。（由于时间关系，此动画后半段仅在安卓端实现）

如果你仔细地用过一起听，可能会发现双红心彩蛋，这份惊喜感也是我们希望让双方感受到的。当你喜欢了一首对方也喜欢的歌曲，都会出现一个两个爱心碰撞出音符的动画，在惊喜的同时也会体验到来自陌生人的认同感。

至此，在这一版的一起听中，我们希望用户能够获得的感受是：“两个陌生人虽然素不相识，不方便通过言语交流，但是彼此分享同一首歌曲，互相陪伴，产生共鸣，温暖而美妙。”正如孤城的诗《门前》里的那句：“草在结它的种子，风在摇它的叶子。我们站着，不说话，就十分美好”。

三、倾听用户的声音 陌生人一起听上线后一个月左右，我们和用研团队一起在杭州的几个大学周边进行了用户访谈，包括面访和拦访，在一线倾听用户的声音。主要调研使用过一起听用户的使用情况、未使用过一起听用户对于一起听的认知情况，总结问题后为一起听后续的功能迭代和运营策略提供参考和建议。

根据调研结论，我们按照用户使用一起听前中后的顺序将问题进行排列，分析用户的问题和痛点，确定了之后的优化方向。

四、第二期探索 1. 一起听聊天

我们结合数据表现和用户调研，计划在接下来的迭代中实现更多有趣的玩儿法。首先亟待解决的是用户聊天的需求。在熟人一起听中，用户一般使用微信作为聊天工具，一般不会考虑在云音乐里进行聊天。当陌生人一起听上线后，能够即时地与陌生人聊天就是一个最刚需的社交需求了。虽然云音乐已经有私信功能可以供我们进行复用，但是我们希望能够将一起听时的聊天做得足够轻量且能够随时触达，以此来提高聊天功能的使用率。

设计过程中我们结合场景进行思考和创新，经过几轮方案的筛选，最后大家对于一个问题产生争论：是进入聊天模式才可以收发消息呢？还是直接在播放页展示消息，随时聊天呢？

下图中，方案 1 能够减轻打扰，但是无法在播放页第一时间看到对方发的消息。

方案 2 有一定的打扰，但是能够第一时间看到消息，让听歌场景和聊天场景无缝衔接。

为了减少用户的操作步骤，把功能做得轻量化，最终选择了更加直接的方案 2，同时为了避免打扰，每一方的消息气泡的展示数量设置上限为 2 条，超过 2 条就会收起到记录中。

下面的视频是聊天的简单演示，可以发现气泡通过背景模糊来区分前后内容，气泡的出现和消失不改变黑胶页的原有结构。

2. 个人信息逐步展示

很多人用社恐来自嘲，表达自己想与人社交，但是又存在迈出第一步的障碍。陌生人一起听是一个匿名功能，很适合希望轻度社交的用户。在匿名的基础上，我们希望在听歌过程中，能够为用户带来更多轻量的、无压力的社交方式，帮助希望社交的用户逐渐熟悉彼此，找到志同道合的朋友。

个人信息逐步展示就是基于上述的需求诞生的创新功能。随着匿名一起听的进程，用户可以逐步解锁对方的信息，一部分是双方的共同信息用以产生共鸣，另一部分是对方的特色信息用以展示自身特点。在听歌的过程中逐渐了解对方，最后决定是否揭面进行更深度的交流。

首先，在共同信息的提示方式的设计上，我们并没有简单地用一个红点去提醒用户。而是用头像的发光来表示共鸣的含义，头像四周飘散的粒子来隐喻共同信息。让每一处的设计都能贴合一起听的风格。

共同信息在一个浮层上展示，我们把当前展示的信息控制为一个，通过上下滑动来切换。除了共同信息，用户可以直观地设置自己的状态，让自己更加像一个活生生的人。

3. 一起听结果页

当完成一起听后，会有一个结果页来记录听歌过程中产生的各种数据。旧版的结果页用户反馈信息不够丰富，分享欲望不强。

新的结果页增加了双方的相似度、聊天条数这些数据，并且根据这些数据不同，会生成一个表达关系的成语，颜色有对应的变化。比如我们相似度很高，并且互发了很多条聊天消息的话，就会得到一拍即合的成语和红色的结果页。

与陌生人度过一段听歌之旅很容易让人产生分享欲，在社交媒体搜索一起听可以发现很多用户都用结果页配图发帖，并诉说自己与陌生人之间的互动故事。

5. 总结 一起听经过这两次比较大的更新后，获得一些不错的成绩。截止至 2021 年 12 月，周末的平均 DAU 数据从 130W 提升到了 200 万，增量的 70W 中有大约 30%来自于陌生人一起听。在 2021 年 3 月的云音乐整体满意度监测中，22%的用户表示自己经常使用一起听，满意度得分 4.66（满分 5 分），在云音乐所有主要功能中居首位。

未来，我们会继续一起听的创新脚步，还有更多的可能性等待我们探索。希望未来能够为用户带来更多元的一起听体验。最后，我想用下面的这张图来结尾，它是同样主打与陌生人社交和陪伴的游戏《光遇》的一张美宣图，是我最近无意间在它的官网发现的。当时看到这张图后突然发现它和陌生人一起听的入口介绍图表达方式竟然这么接近。在这个温馨的画面里，代表“光”的白鸟围绕着你和我正如音乐环绕着你和我，彼此陪伴、传递温暖、分享喜悦~

欢迎关注作者微信公众号：「设成于思」

本文以 百度果园 为例，从长线运营活动的 增长设计 视角，分 3 个方面分享运营活动的玩法如何设计，如何帮助百度 APP 持续提升用户活跃和用户留存。

实战案例复盘！如何用增长设计的方法提高10%的数据？ 考考大家： Q1. 在线教育平台的核心与基础是什么？

阅读文章 >

一、长线运营活动的价值 百度 APP 作为移动生态的搜索信息服务产品，用户会在什么场景想到百度 APP 并使用它呢？

十几年前，精力有限睡眠有限的打工人不惜牺牲睡眠时间，也要设置凌晨 3 点的闹钟；上网时间被严格控制的学生党也要注册五六个 QQ 小号，目的很明确：到点“收菜”，蹲点“偷菜”。十几年后每天早上睁眼先去蚂蚁森林收收自己的“能量”，再顺路去蚂蚁庄园喂喂小鸡，安排很多手机号码来种水果……各家产品通过带有游戏氛围的运营活动把产品的服务和功能以趣味化的方式传递给用户，让用户“薅羊毛”拿福利的同时也给产品带来增长价值。

二、百度果园设计打法 本文以百度果园为例，从长线运营增长视角分 3 个方面分享运营活动玩法如何设计，如何帮助百度 APP 持续提升用户活跃和用户留存：

建立心智：让用户相信百度果园的真实性，愿意参加活动，安全的“薅羊毛”； 养成习惯：根据用户不同的属性，设计玩法让用户养成来百度果园浇水的习惯，实现百度 APP 的长期留存同时把“羊毛”薅到手； 平衡：种植真实性+趣味化的方式传递给用户，实现产品增长和用户福利的双重价值，“羊毛”薅不停。

（一）心智建立： 让用户相信百度果园的真实性，愿意参加活动，安全的“薅羊毛”；

1. 从新用户视角打造真实性：新用户上我们区分两个用户角度进行设计：

“薅羊毛”心理用户：了解各类平台的运营活动，酷爱“薅各个平台的羊毛”，对福利性质的运营活动非常敏感；进入百度果园最先看到 Loading 页面，从 Loading 页面开始就在文案上告知用户“免费水果包邮到家” 的福利性信息，图片内容也是倾向于真实水果，利益点明确从而让用户继续往下进行；利益文案和真实水果图片继续延续到“选种子”页面上，明确的福利信息与行动点来打造百度果园的真实性。

“从众心理”的用户：这类用户会被「TA 人已经获得免费福利」的信息所打动，所以我们在“选种子”页面下方增加了动态弹幕，就像耳边有个声音在和你说：“隔壁已经领了 3 斤免费水果了，快来一起！”动态弹幕不仅是在信息上吸引用户参与活动，也是侧面描述了百度果园活动的真实性，与用户建立信任。

2. 精细设计果树成长阶段，与真实场景贴合：

为了营造更加真实的种植体验，我们在百度果园视觉呈现上也进行了升级，整体视觉效果与真实果树成长的 6 个阶段（种子→幼苗→大树→开花→果实→成熟）更加匹配，建立更加真实的果树成长过程，追求合理性和沉浸感，并且细化每一个不同水果对应的树、花朵、果实形态，让用户在参与活动的过程中体验果树成长到成熟的真实感受，也是在视觉效果上形成百度果园的特色。

3. 贯穿全流程的浇水动画增加真实性：我们在浇水动画上进行了体验升级，浇水动画分前中后 3 步设计来增加浇水的真实感受：

尝试通过动画模拟生活中水壶浇水的行动动线，点击浇水后水壶移动至树的位置并倾斜至浇水方向，倾斜的同时水开始从水壶里露出水滴，整条浇水动作一气呵成；

在浇水过程中，水滴分层陆续从水壶中浇水至树下土壤，下落时水滴逐渐变弱，就像真的滴落进土壤一样。

明确的浇水反馈，浇水动画完成后，我们在树木和土壤上同时增加了光感反馈动画，就像是树木真实的吸收到了水分一样，生动轻松的反馈给用户，让每一次浇水都有视觉上的满足。

（二）习惯养成： 根据用户不同的属性，设计不同玩法让用户养成来百度果园浇水的习惯，实现百度 APP 长期留存的同时让用户把“羊毛”薅到手。我们参考百度果园线上老用户数据，把用户分成 3 类，分别根据他们不同特点进行针对性的玩法设计：

沉默用户：这类用户很少来果园玩，活跃的时间也较少，很难长期坚持浇水；对于这类用户，我们尝试设计快速领水果的玩法吸引他们，把领水果当成一个完整的大目标，直接明确出领水果的时间周期，同时也把难完成大目标切割成每天要做的简单小目标，每天召回用户完成当日任务，从而抓住用户回流。

忠实用户：对于留存稳定的忠实用户，我们给这类用户增添游戏趣味，来百度果园做任务浇水时给到用户游戏感受，我们设计了“瓜分”玩法，给到用户一些惊喜感受。

召回用户：“来帮大姨浇个水”，是不是经常在微信群里看到这样的消息，对于帮助好友达成目标，我们设计了“合种”玩法给到用户，由一人玩百度果园到带动身边亲朋好友一起玩，帮助用户更快一步达成领水果的目标。

1. 沉默用户唤醒：

「浇水挑战领水果」玩法参考上瘾模型进行设计，从 push 渗透入口到用户，基于「稀缺」核心驱动力让用户产生兴趣，引导用户进入活动；当用户进入果园后，通过大转盘抽奖的方式继续抓住用户的注意力，持续利用「稀缺」「紧迫」心智让用户进入活动开始体验玩法。开启浇水挑战后果园首页上方增加明确的浇水进度提示，让用户了解整体玩法进度，从而建立收获奖励的信心。

为什么刷抖音停不下来？来了解这个经典的「上瘾模型」 大家好，我是胖小魚。

阅读文章 >

2. 忠实用户-丰富游戏玩法：

百度果园是一个长线养成类运营活动，为了让老用户持续保持新鲜感，我们在果园里增加具有趣味性的「瓜分水滴」玩法，是参与两日就可获得奖励的轻量化的玩法。第一天用户进入「瓜分水滴」活动，通过大额水滴奖池吸引用户的注意力，提起用户的参与兴趣，在行动操作上弱化付出成本突出行为动作，引导用户点击；用户报名后及时提醒用户打开订阅增加触达场景；并在弹窗上对付出成本与收获回报进行对比，吸引用户第二日再次打开百度果园参与领奖；在领奖的同时直接引导报名下一期活动，持续拉动用户回流。

3. 召回用户-好友之间的互动玩法：

为百度果园赋予情感与故事性，好友社交上分两步探索，第一步引导用户去“偷”好友的水滴，在好友之间持续互动，水滴是贯穿百度果园整体玩法的重要代币，好友的水滴被“偷”，就降低了好友“薅羊毛”的速度，但对用户自己来说，“偷”水也需要“偷”的高效，我们在果园里增加了连续“偷”水动作，边“偷”水边把好友喊回来；为了丰富用户的体验感受，在好友果园跳转之间增加了树叶遮挡的动画效果，动画转场同时也是替代小程序白屏转场的好思路，营造了好朋友在果园之间串门的感受。

第二步好友互动持续升级，通过家庭合种的概念加强用户之间的联系，情感化的方式来提升用户主动参与意愿，拉动身边亲朋好友一起加入“薅羊毛”的队伍，一方面帮助用户提升领水果的速度，另一方面也帮助百度果园在用户上实现破圈。在玩法设计上我们区分 3 个视角进行设计：

合种的发起者：突出快速收获，激励用户分享拉好友来帮忙种植水果，通过仪式感转场和主视觉的变化营造家庭故事氛围；

帮种者视角：通过弹窗上操作确认加入合种小队，加入合种后在每次浇水时增加『谢谢你帮我浇水』的情感动画反馈，烘托帮种氛围；

共同利益视角：阶段式的奖励激励用户召回和拉新的好友，把共同“薅羊毛”的氛围拉满。

（三）平衡： 种植真实性+趣味化的方式传递给用户，实现产品增长和用户福利的双重价值，“羊毛”薅不停。

百度果园在上线一段时间后，我们思考如何能进一步丰富果园玩法，要帮助业务稳定 ROI，同时也要在用户角度上玩的更加有趣。我们从体验、用户、增长 3 个角度进行分析，为百度果园增加“道具”玩法：

从体验角度上：打造更加真实的种植体验趣味性，让用户感知更丰富的活动玩法，并与用户的核心诉求相匹配，通过浇水道具来帮助提升用户的浇水效率、降低浇水难度；利用互动道具增加自身收益，再留出其它能够持续扩展的方向让百度果园的玩法更加丰富有趣；

用户角度上：帮助用户更快实现自身领水果的目标；以及种树人的路上永远不能孤单的互动方式；

业务增长角度上：后续可以持续扩展百度果园自身特色，持续把百度 APP 的服务、功能推荐给用户，持续体验产品，增加百度 APP 的粘性。

结合百度果园自身可落实上，我们优先在可以提升用户浇水效率，帮助用户快速拿水果的道具进行试水，结合线下实际生活中的种植场景去思考，所以我们将道具名称与玩法设定为「化肥」，在种植中增加化肥收益，提升果树的种植进度，让百度果园在玩法上更加生活化。

新玩法上线后，通过上线提示引导用户去使用道具，用户进入百度果园后先给到用户一袋「化肥」来体验玩法，让用户快速感受到道具带来的实际价值，从而建立信任。用户使用道具后，果园主页直接破壳「化肥」道具的状态，我们给到「化肥」道具 3 种状态来描述使用情况；健康有活力的绿色状态代表化肥的养分非常充足，果树的成长速度加倍；橙黄色代表果树的生长进度欠佳，需要用户关注；红色状态代表果树缺少养分，需要用户去使用新的「化肥」，并在红色状态下我们直接破壳使用引导，直接提示用户点击。

三、后续发散 随着百度果园的进一步成长，能够带给用户的不仅是“薅羊毛”类活动的概念，百度果园也会继续向带有社会价值与故事性活动内容延伸，更多的去赋予精神意义与社会意义；我们后续也会持续打磨、持续平衡产品收益与用户情绪的价值，不仅仅是在“薅羊毛”，更会让每一次的浇水、施肥和每收到的一箱水果都有自己的含义。

写在最后 增长是产品商业化持续的目标，有了百度果园的经验和设计思路，也为我们后续探索新的长线活动玩法提供了基础和经验，我们的工作也将持续充满着挑战和更多乐趣。

欢迎关注作者的微信公众号：「百度MEUX」

编者注：Banner设计看似简单，实则囊括了 平面设计 、设计心理学、用户研究、文案设计等多领域的知识点，本文用1万2千字的超长篇幅，帮你从零开始掌握 Banner 设计。

在工作中需求方往往不是设计出身，提需求时传达上往往也没有办法很好的表达自己的想法，在这种需求模糊的环境中往往做的 banner 会被需求方怒怼，而追问原因是，只会得到“不好看！”或者当我们每天疯狂填充自己的素材库时，很多小朋友都会有“该如何分辨作品的好坏”这样的疑问，那到底什么样的 banner 算是优质的 banner 呢？

一、简单了解 Banner 本质

他真的只是一张简单的图片么？答案肯定是否定的。这张图不但起到宣传的作用，而且是页面中最直接的流量变现的渠道。

1. Banner 在运营工作中的作用 从需求方的角度来看 banner 的作用大致分为两种：

便于上线操作

如果直接投放活动内容页面，首先屏幕使用空间有限，不能多个活动共同展示，其次每次活动上线基本上都是凌晨，暂且不说累不累，在人工成本上就会消耗大半。如果遇到大促或者重要节日，那全体运营需要时时刻刻更改内容。

而 banner 的定时上架和权重排序大大减少运营工作成成本，提高工作效率。

清晰看到数据反馈

说白了，banner 就是广告形式的一种，在一款 APP 中，除 banner 外还存在很多形式的广告比如开屏广告、弹窗广告、落地页内嵌广告等。而对于运营同学来说，他们需要清晰的了解每一条广告，每一种投放形式的数据反馈，根据数据对每次活动的内容进行复盘、优化。应对以后的不同的活动形式。

2. 优质 banner 的特点 由于 banner 的位置和大小都属于产品中的绝对的巅峰，但用户在此页面停留的时间往往很短暂，所以在整个产品页面中，视觉层面会呈现鲜明的中心，设计层面需明确视觉层级关系，以最短的文案加上图像形式直击目标用户内心，使用户快速获取信息。

三秒原则

通过对市面上大多数产品 banner 进行研究，发现轮播中每一张 banner 停留时间不超过三秒，在这里我们需要做的就是在三秒内传递用户所有重要信息。

增强可读性

由于 banner 是由文案、CTA 按钮、配图、装饰元素、背景组成，增强识别性一般指的是文案以及按钮元素。

文案部分需要尽量精简，控制在一级标题、二级标题、备注标题‌三段式，针对不同的目标用户做到内容可读性，确保用户快速获得信息。

设计部分不仅要保证页面整体美观、观看舒服，更重要的是确保信息层级关系，‌引导控制用户视觉动线‌。

其目的都是为引导用户不断的参与内容，促使 banner 极大程度的转化用户，同时也间接提升了企业的商业价值。

二、Banner设计的核心目标 在我看来，与文字信息相比，我们更容易被图形化的内容所吸引，也更加能够快速理解图形化内容。产品页面的 banner 也是主要展示一些产品最近的活动或者一些传递产品内容信息的图片，而根据 Jakob Nielsen（尼尔森十大可用性原则的那个男人）做了一个眼动实验，发现 2010 年后用户平均花费 80.7%的阅读时间在前三屏，其中首屏时间占总时长的 57%。基于在第一时间抓住用户注意的角度出发，我们必然将最显眼，最突出的 banner 放在首屏的位置，这样不仅让我们进入页面后第一时间看到，而且还可以在三秒内了解具体主要宣传信息。

咱就是说市面上一切的广告都是为了转化用户，Banner 作为产品吸睛的工具也不例外，通过展示现阶段真实准确的信息转化用户，从而达到实现商业价值的目的。

试想如果我们是一个企业的老板，我们在线上投放 banner 广告后，用户从打开页面到最终被我们转化会尽力哪些步骤呢？

（一）正确传达信息 有一天你的好朋友在过生日，你拿着一个生日礼物送给他，你的朋友肯定希望打开礼盒直接就能看到礼物，而如果里面和套娃一样全是包装盒，你的朋友也许只会这个表情，然后流露一丝尴尬。

这种感同身受就如同用户看到花里胡哨的 banner 看半天都不知道是个啥一个样。

为了缩短用户打开产品到点击 banner 之间的时间，我们需要将用户想成小朋友，从视觉动线上要快速传达准确信息，但一切的前提是不违法，遵守广告法中真实有效的法律法规。

1. 快速 − 精细调整Banner视觉动线

（1）什么是视觉动线？

我们可以将一个 banner 理解成你大学所在的城市的地图，回想一下当年你来到这所城市后，首先想到的是什么？

以我来说，我大学是稳坐中国宜居城市榜首的城市-成都，来到这所城市后首先想到的就是吃喝玩乐感受这座城市的美好。但我又不能没有目的的乱逛，相信喜欢旅游的朋友都做过攻略，都是想在最短的时间内逛某个城市，我也不例外，从路线到景点大小再到美食据点等等安排出一条最佳线路。而在欣赏景区的过程中如果遇到很不错的的地方，肯定会记住之后频繁到访，为其消费。

回归到 banner 中，视觉动线就是最终安排出的这一条旅游路线，而“做攻略的我”这个角色就相当于在手机面前的你“ 设计师 ”这个角色，由你来安排用户在 banner 内观看内容的顺序，而“不错的景点”对应在 banner 内是可以让用户进行下一步行为，保证用户留存，提高转化率的亮点区域。

如何在 banner 上改变色彩、文字、排版等，告诉用户先看哪里然后再注意哪里，在哪里改着重停留呢？有以下几种方法：

① 古腾堡图表法

首先是我们从古至今的习惯性的眼动规律使我们观看内容是都是从上到下，从左到右的规律，其次古腾堡图表法（对角线平衡的和谐状态）告诉我们浏览内容时往往是由左上至右下的视觉动线，左上角与右下角可以看做第一视觉落点区和最终视觉落点区，而右上角和左下角往往被视为视觉盲区，经常被忽略。

在视觉动线设计中与之相似的还有尼尔森 F 型视觉模型和 Z 型布局，这两种布局形式常常作为 Web 端的载体，我们可以简单的了解一下这两种布局形式。

② 尼尔森 F 型视觉模型

用户注意首先在顶部横扫一遍观看上半部分内容，造成了水平的一条视觉动线，之后用户将页面下拉看到的内容会比第一条动线短，之后受到用户在当前页面注意力的影响，持续下滑，观看内容也越来越短，浏览模式也形成了字母“F”的形状，被称为 F 型模型。

下面是尼尔森报告中的热度图，利用颜色来表示浏览者眼光聚集的热度，分为最热（红色）、较热（黄色）、不热（蓝色）和基本不关注（灰色）4 种。

③ Z 型视觉模型

通常在 Web 端打开一个网页后，用户注意往往在头部的 logo-导航横扫一遍，再到网站内容和构架，最后会移动到网站下方行动按钮处，形成字母“Z”，被称为 Z 型模型。

（2）如何让用户跟随视觉动线观看？

① 整体排版形式

左右排版

应用于 banner 内容排布时受限于 banner 的长条尺寸，视觉盲区压缩。往往将重要的信息放在左边，右边放主视觉图形和其他元素。运用视觉元素创建一条虚拟的“动线”，引导用户实现从左往右移动，符合用户习惯性的眼动规律。

在这种左右排版是最我们最容易上手的一种排版方式，虽然不算很惊艳，但是永远不会出错。其中根据文字与图形级别高低决定采用左文右图还是右图左文。

不论主视觉是产品还是人物，再怎么精准表达，没有文字衬托，用户无法迅速了解 banner 表达的具体内容，所以为了用户快速接收信息，在左右排版中文字部分与主视觉图片在版面中占比永远是接近黄金分割比例的 6:4，这样可以更多的关注文案内容。

如果将信息传达精准的图片排在画面中，不论有无文案，用户的惯性思维想到的内容都会八九不离十，例如下面这张图。

即使没有文案我们看到这张 Banner 后，也会以樊登读书 VIP 卡为中心想到销售会员卡、促销、打折等这些方向性明确的词。

试想一个问题，如果我们将识别性较弱的图像信息排在画面中，会出现什么样的情况呢？

首先当内容识别性较低图片排在画面中时，如果没有文案，我们没有办法准确的了解信息内容。例如这张图片只有正面的女生自拍照，我们可以将他放在任何信息元素的宣传中，例如美妆、服装、旅游或者其他。

其次如上图所示，如果内容识别度较弱的图像信息放在左侧，根据视觉动线原理用户优先看到内容含糊不清的图像信息后，接下来看右侧的文字信息，然后再回看左侧图像信息去理解文字内容，查看图片这个步骤相当于重复两次，这样的布局排版与我们之前说到的“3 秒原则”相违背，降低阅读效率，加重用户识别内容的时间导致用户接收重要信息时常陡增，可能会造成用户流失。

策略 1：左文右图

文字信息级别更高，文字较为重要更需要被用户关注，我们更倾向于将文字信息放在优先被识别的左侧，主视觉放在右侧，这时放在右侧的主视觉内容往往相对模糊，排版和设计上更加简单，更要注重左侧文字的识别性和易读性。

策略 2：右图左文

一般应用于音乐类或电商产品 banner，由于需要展示产品或者需要向用户展示重要的图像信息，这时图片层级更高，需要摆放在左边，需要右侧图片内容相对清晰更容易被用户读取，先利用主视觉图片吸引用户注意，再配上左侧优先级较弱的文字阐述，banner 节奏松弛有度，非常棒！而这时根据视觉动线原理，右侧文字排版的自由度则更高于左文右图。

除左右构图之外还有以下几种常见的构图。

文字居中排版

我称它为“左中右构图”这种形式是最好突出文字的一种方式，与左右排版上对比，这种方式比较难以掌控。趣味性也相对较低，形式上居中位置的文字是 banner 中层级最高，最需要被用户注意到的内容。周围元素主要起到陪衬作用。

文案中主标题是强制必须有的，作为重要的识别信息内容，字号也是最大最醒目的，设计上可以更加精细化更加有质感，这样可以快速吸引用户注意。副标题则可有可无，不需要着重去表现。

策略 1：环绕式排版

我将其称之为“图中有文”，由于文字居中，层级性较高。相关元素围绕文字形成环绕效果，有效的强调文字，但在单一的文字排版会造成视觉中心留白空间过大，画面太空，这时的文字设计就需要更大更加突出，字间距相对拉小。设计上装饰性会更多一些将文字设计更加偏向图形化。

策略 2：上下排版

常见于 banner 中出现多个主题物，主题物在下方一一排列，但依据视觉动线的原理，人们习惯性的从上而下的接收信息，所以上方文字在排版和设计上需要着重处理。

策略 3：纯色蒙版给文字垫底

一般用于图片以摄影作品或者抽象的图像为主，因为摄影作品为写实作品，抽象作品会加大减弱图像信息，这里的图像主要作为一个装饰，不能过多破坏其画面，所以选择文字的设计样式会相对简单，否则画面会乱成一团，影响用户识别信息。

2. 减轻辅助元素不等于元素粗糙

① 文字排版形式

文章开头我们也讲了，一个优质的 banner 本质是引导用户操作，当我们打开 app 后在 banner 中最先看到的是那一部分呢？是图像？是文案？还是装饰元素呢？

我想大家应该和我一样在第一时间被整体视觉所吸引，接下来在视觉动线的引导下才是局部的观看，在所有局部区域中是否进行下一步动作百分之七八十的原因在于文案的梳理与排版效果。

我把《写给大家看的设计书》中可以与文字排版有关的内容高度总结为以下几点：

文案中影响用户注意的元素：

排列顺序

当我们还是小朋友的时候，老师就告诉我们一篇好的文章结构式总分总结构，一篇文章或一个段落一定要把重要内容写在最前面，这样读者才会有读下去的欲望。

在 banner 视觉动线的指引下，我们也同样需要把重要信息或者转户用户的重点内容的放在最显眼的地方并且着重突出。

字号与字重大小

首先我们浅看一下字体字重与大小的影响。

在 banner 中，大标题一般都会很大，笔画越粗，画面中也会越亮眼，为了不抢大标题的风头，小标题则会相对变细变小，颜色选择上也会更加弱化。如上图所示，字体越大，画面中占比越大，用户看到画面时会直接被大文案吸引，同理字重越大，字体越粗颜色比例越重，也会吸引用户注意。反之，字号越小字重越小越不容易被用户注意到。

由于 banner 作为引流变现的一个广告内容，文字一定要有辨识度和可阅读性，所以文字不能太大或太小，在做好文案内容的量级区分后务必限定最小字号。

颜色饱和度

为了凸显文字的层级关系，我们平时除了加粗加大外，有一个更直接的办法就是给层级最高（大标题）的文字添加高饱和度的颜色，加快吸引用户视线。对于其他文字我们可以调整透明度来降低层级关系。

由于 banner 作为引流变现的一个广告内容，文字一定要有辨识度和可阅读性，所以文字颜色不能与背景颜色过于接近。在做好文案内容的量级区分后务必限定字体颜色规范。

根据视觉动线处理文案位置

从第一板块讲到的视觉动线了解到我们浏览信息的顺序是由上到下，由左到右，因此我们需要根据画面内容和传达的主要信息来决定文案的具体 位置。

接近原则

在打麻将时，什么时候我们会胡牌呢？

一般我们在摆牌时，都会把同类牌放在一起方便查看牌型。在文字排版中也是这样，相近的各部分趋于组成整体，便于用户直接提取关键信息。

文字颜色选取

文字作为 banner 中唯一可以突出买点的点，一般来说主标题都会做一定的设计或突出，很多同学就会忽略二级标题，字库字体随便一打，颜色也为了统一画面选择接近画面的颜色，导致小标题阅读成本增加。

在 banner 这种寸土寸金的地方任何一个元素都不能忽视，所以文字一定要清晰明了，一定不能选取与图片同色系的颜色。

② CTA 按钮

什么是 CTA

当我们了解到 banner 广告条的最终目的是转化用户，设计中如何让用户感知我们做的 banner 可以进行下一步操作呢？

在营销学中 Call to Action（CTA）又叫做“行为召唤”，可以引导用户进行点击的行为，是最常用的交互元素。经过测试，在 banner 中使用按钮形式的 CTA 会更容易引起用户注意，点击率也越高。直接链接到内容落地页的按钮形式诱导用户不自觉的的点击进行下一步操作从而提高 banner 转化。

如何利用 CTA 按钮中的文案

用户看到号召性文案时首先会考虑“我要不要点击？

少即是多

一般将关键信息放在 banner 主文案中叙述，在按钮中短小精悍的语言一般更加能够让用户快速产生共鸣，一眼激起用户点击欲望。

文案长度直接影响用户做出下一步决定的时间，按钮上的文案尽量短小精练，任何一个不必要的文字都有可能导致用户视线离开 banner。

激发用户点击

时刻想着按钮最终目的是为了用户点击进行转化，用户对画面中按钮功能性文案一目了然，才会更愿意点击。

一般为了激起用户的点击欲望，使用的文案都偏向于“点击 XX、领取 XX”这一类指导性较强的词，或者完全能够满足用户兴趣的“满送、满减”类促销词。

增强用户紧迫感

在我印象中，短时间内频繁更换 Banner，让用户时刻感到“错过一个亿”的时候就是每年大促，经常会在 banner 为和落地页内增加倒计时，营造满满的紧张氛围，就也就是这个时候我们会不经大脑直接下单。

我们在采用 CTA 文案时是否可以吸取经验而自用呢？

我们选取文案时经常采用“立即 XX”这种既可以增强用户紧迫感又非常简洁的文案类型。

满足以上要点的文案才能将用户行动力最大化，增加主题内容的紧凑感减少用户看完文案后的思考时间，提高用户参与度和 banner 点击率。

如何设计 CTA 按钮

在了解了视觉动线之后，我们来浅谈一下如何将视觉动线中的原理运用在 CTA 按钮设计中。

CTA 按钮位置

根据设计的一致性原则我们为了减少用户学习成本，经常将文案与按钮位置与市面上大多数排版一致的排版呈现在用户面前，这样布局可以提高用户对活动和企业的可信度而且可以更容易的理解内容。

对于用户来说观看内容时浏览是他们的第一行为，注意力会根据排版顺序进行移动最终停留在操作行动点上，此时 CTA 按钮就至关重要。

根据对古腾堡图表法的了解，我们可以看出三段文案内容中颜色深浅程度为用户观看停留时间长短，用户的浏览动线影响了文案信息的排布。

如果对这些不了解，只是单纯为了填充画面及文案留白区域将按钮随便摆放位置，则在阅读顺序以及操作上极大影响用户使用体验。

根据设计中亲密性选择，信息之间的间距越小，我们会直接将是看作一组，所以我们经常将 CTA 按钮放在文案内容之后，不仅可以提升查看效率而且可以促进用户转化。

通过对比提升按钮识别度

1）颜色区分

由此可以看出颜色的强烈程度直接影响用户的注意程度。对比度越强越能吸引用户注意，其中白色和黑色被称为中性色也是所有颜色中亮暗的极端值。

通过强对比的颜色可以快速表示按钮在画面中的重要程度，并且可以从背景颜色中跳脱出来并达到吸引用户的目的。

在亮色背景中使用黑色按钮，暗色背景中使用白色按钮，是最突出也是最具有吸引力的。

2）字重区分

除了增加颜色对比外，按钮上的文字可以选择有多重字重的字体，选择较粗的字体增加视觉权重，突出按钮的优先级。

通过改变外观提升识别度

1）大尺寸按钮

简单来说就是尺寸越大，在屏幕中占用空间越大，越会被用户注意。

从另一个角度来看，尺寸大不仅可以吸引用户注意，引导用户点击，而且会扩大用户的点击操作空间，提高操作容错率。

除了按钮变大外，在手机端的 CTA 按钮设计中需要留出足够的安全空间，便于用户快速进行点击操作。

在设计角度来看需要注意的是，不论按钮多大，都尽量不要超过文案长度，这样可以增强用户查看内容的紧迫感觉，提高用户点击率。

2）动效按钮

当画面中元素较多或者画面元素全都是静态的，此时我们应该如何让用户更快地被按钮所吸引呢？

如上图所示，给 banner 按钮加入动效，在整个静态页面中了快速吸引用户注意。

A/B 测试

虽然上面说了很多如何突出 banner 中 CTA 的方法，但为了最终结果不能纸上谈兵，还需要通过多轮 A/B 测试对比数据结果，测试出最吸引用户的样式、颜色、文案，便于下次设计是指出结果。

（二）吸引用户点击 1. 精准 − 分析用户人群

大家作为设计师，在做设计时不能两耳不听天下事，闷头干，在拿到需求时，首先要分析 banner 的产品定位、投放渠道等信息来了解目标用户的行为特征，情感和思想诉求，了解目标用户群体的群体特征提炼产品卖点。

近几年经常会听到“用户画像”一词。那什么是用户画像呢？用户画像有对我们的 banner 设计有什么用呢？

① 了解用户画像

在我们工作中的“用户画像”实质上是为了从感受上理解用户帮助我们推导结果的工具。

我们常见的“用户画像”分为两种，一种为大数据时代下推荐算法的用户画像，另一种是具有共性的用户画像。

推荐算法的用户画像

我们先来浅谈一下大数据时代下推荐算法的用户画像。

这里所说的标签就可以简单理解为是抖音对我朋友的用户画像。将我朋友所有爱好抽象为多个标签，利用这些零碎的标签打造出一个具体化的用户形象。从而对我这个用户进行针对性的服务。

设计师的用户画像

而另一种针对设计师的用户画像则有所不同，它是从众多的使用者的使用行为中抽取共同的行为，将其汇聚成一个虚拟形象，这个虚拟形象不一定完全符合这些使用者，甚至虚拟形象的某些行为与使用者行为相悖。

举个简单例子，还是在抖音中，我们找了 50 男孩子，其中有 40 个时刻关注球鞋产品动态及价格信息，而这 40 个男孩子中有 30 个会在肌肉体育生直播间直接购买，15 个男孩子会在专业博主直播间下单，还有 7 个男孩子一直在看价格信息，但迟迟不动手。

这 40 个男孩子关注球鞋就是我上面所说的是用这种的共同行为，将其汇聚成一个虚拟形象：比较喜欢球鞋，每天游荡在专业博主和肌肉体育生直播间坐等福利，将其收割。

如果我们作为抖音的设计师，我们要将两个案例中的用户画像作为一个标准提升设计部门与其他部分之间协作能力。防止各个部门由于对用户认知不清而导致的项目延期或者工作暂停。我们需要与我的朋友产生共情，设计出更针对他本人的设计方案。

当然了，用户画像并不是一两句话能说完的课题，我们在之后的文章中慢慢详谈。

② 如何利用用户人群做 banner

随着短视频自媒体的快速崛起，知识付费类产品涌现市场，知识付费不同于之前的教育类产品，他的用户人群更广，上到高端金融理财，下到摆摊卖烧烤。当很多小朋友面对用户人群体量如此之大的板块的 banner 思路混乱，无从下手。我们就浅谈一下如何通过用户人群来制作相应 banner。

首先我们要善用行业属性，要明确的是知识付费内容不属于强制性学习，主要以用户兴趣或者希望主动提升充实自己为出发点。设计就会相对容易一些，主打风趣幽默，短期速成，干货满满。

高端理财金融课

一听“高端”“理财”“金融”这三个词，你会想到什么？

这一部分的用户基本上都有一定的原始积累，他们自身会有一定的优越感，对于这部分用户来说他们学习的需求不仅仅是解决温饱，也不全是为了课程中的干货内容，更多的是体现自己的社会价值，他们对于课程内容更关心的是哪位行业大佬授课，与讲师产生链接，扩展人脉，建立圈层。

对于这一类人群，我们设计 banner 时不但要简约大方，而且要让目标人群感受到优越感。

对于这类用户我们该如何利用我们的设计能力体现出这门课程的含金量和专业度？

我们通常运用高饱和颜色（红黄蓝三色为主）、简单的元素和规矩的三段式排版体现课程的品质感。

兴趣特长类课程

对于选择 这一部分课程的用户，基本上人群定位在 30 岁之前 ，应该和在坐的同学年龄相仿，那我们这个年龄段的用户更需要什么呢？

这个年龄段的用户一般在外打工的居多，虽然生活辛苦，但对生活充满着向往，具有一定生活情趣，对兴趣爱好的需求是为了充实自己的业余生活，参与其中扩充自己的交际圈，找到志同道合的朋友，得到满足感。

但在课程内容的选择这部分用户往往不希望内容不要太冗长，浪费自己的业余时间，希望学习过程中不要太过枯燥，在较短的时间内可以稳，准，恨快速获得干货内容。

由于对于用户来说，每一个兴趣爱好都是一个新的技能，我们可以看到这类产品的 banner，基本上都以“0 基础、快速入门”快速吸引用户，内容主题感更强，设计更加简明了，甚至以文字为主视觉，直击用户痛点，更加容易接受和理解。

根据行业属性制定 banner

微信创始人张小龙曾经表示“用户都是懒惰的，不 愿主动获取信息，更倾向于被动获取”为了让用户快速定位企业定位，我们经常使用行业规范制定 banner 的部分内容，例如在颜色选取时，除大型节日类的特殊情况，往往优先选择行业默认色调，其次选择画面中扎眼的亮色调，最后才是符合文案内容的情感化色调。

用户在长期的被动获取下更容易识别每一类行业的大属性，为了促进用户识别和点击，我们要做的就是顺应用户规律，而不是调教用户重新认识某件事物。

③ 如何让利用目标用户选择文字

常言道：字如其人，笔记识心，在座的各位女同学应该都经历过这样的事吧，在路上对迎面走来的人总会上下打量，虽然只是人群中的一眼，但是也会从体型，身材，衣品，妆容等等一系列方面进行评价，甚至对于某一项分数极高的路人到家后还会细细品味。

这么看来其实我们字体也是一样的道理，我们一般拿到一个标题后会从字体结构，笔画特征以及字效感受到字体的性格特征。

banner 中的标题文案可以快速将活动内容完美植入在用户意识之中，这样不但可以让用户在较短的时间了解活动内容以及活动利益点，而且可以大大降低与用户的信息沟通成本，提高用户对活动的关注度与参与率。

所以在选择字体时首先要考虑的是目标用户群体，其次要考虑的就是字体性格气质是否符合画面调性。

纵观所有的字体无非是官方字体，手写字体以及装饰性字体三种。

官方字体

我们经常经常看到的宋体、黑体、等等这些四平八稳一看就是直接打出来的字体俗称为官方字体，使用这些字体四平八稳不会很出彩但也不会出错。

黑体（无衬线体）

黑体又称为为衬线体，字体笔画无过多修饰，直来直往非常硬朗，辨识度较高，偏向理性，气质简约大气，自带稳重感和现代感，大家可以用自己看一下，基本上所有手机厂商内置字体都是黑体。

在黑体中一般字重较小的黑体笔画纤细高挑，具有简约、年轻\有品质感觉。用于电子类产品以 Apple 为头阵的产品以及高端商品如珠宝首饰类，面向人群为小资女性。

字重大的黑体，具有严肃规矩的性格，用于比较有力量和冲击力的产品中主要针对男性用户为主。

优设标题黑字体下载！优设首款免费可商用中文字体来啦 优设标题黑请从优设官网下载，我们会将最新版本更新在此，大家记得收藏本页面。

阅读文章 >

圆体

除了以上笔画尖锐的黑体外，还有一种非常常用的黑体—圆体。

它属于合规的一种延伸产物，由于它将原始黑体的边角全部圆润化，让字体显得更加圆润，也没有了原始黑体的沉重和锋利感，具有活泼感及趣味性。

也正因圆体边角的圆润，可以让字体在后期笔画变形设计时拥有更大的可塑性，可以表现女性的柔美也可以表现儿童的灵动与天马行空的脑洞。

圆体主要出现在食品，宠物、低幼、家居等产品，主要针对的用户群体以小朋友和女性为主。

优设标题圆开放下载！优设网出品的第4套免费可商用字体 从「优设标题黑」发布至今已有两年多，在这款国民级字体发布后，优设马不停蹄，集结了团队的中坚设计师，继续发布了电商领域的宠儿「优设好身体」和另一个风格可爱的「优设字由棒棒体」。

阅读文章 >

宋体

宋体最大的特点就是笔画末端有一个小的角做修饰，整体显得横向笔画较为纤细，竖向笔画较粗，装饰性较强，属于自带浪漫气息与人文气息凸显文化的气质挂性格，除原始的宋体外，以宋体延展的字体同样有类似性格，经常出现在复古怀旧类，文艺以及美食和时尚类产品，面对用户群体主要也是女性为主。

可商用宋体推荐：

手写字体

一提到手写字体，让我们印象深刻的一定是毛笔书法体，这类字体笔触洒脱，随性写意。非常凸显产品个性与中国文化，一般使用在文艺主题或者出现在极具个性的 Z 时代年轻化产品之中。

还有一类比较稚嫩的手写体笔画相对柔和，充满稚气非常平易近人。经常出现在少儿类或者抒发情感的产品中。

书法字体笔画较为复杂，一般以图形的形式出现在 banner 内，或者为了吸引用户注意会在标题中某个文字上单独使用书法字体。

优设书华体正式上线！优设首款可商用手写书法字体火热下载中 这两年免费中文字体越来越多，优设也发布了4款：优设标题黑、优设好身体、优设字由棒棒体和刚刚发布的优设标题圆。

阅读文章 >

装饰性字体

装饰性字体一般非常强调 banner 的整体调性，以及人群划分，由于主要作为 banner 主文案使用，这里的装饰基本上以原字体本身特点为出发点，在不失文字可读性和辨别性的同时创造出携带艺术气息并且能够带入用户的字体，启发用户按照我们的想法去感受，去思考，最终达到吸引用户眼球的注意，引导用户参与的目的。

我们选择不同的字体其实也是在变相衡量我们产品用户定位。

作为 banner 的标题，我们一定要注意字体版权问题，不要被项目时长限制我们的设计能力，能够对字体逐一进行设计是最好的，如果时间紧能力弱，我们可以根据目标用户的使用场景选择字库字体或者利用可商用字体进行修改，切记我们做的是 banner 不是图形化 logo，文案内容直接影响用户操作，千万不要大刀阔斧“哐，哐”的改，一定要保证文案的阅读性和识别性。

*对于字体设计的知识点，我在这篇文章里讲的比较详细，这里我就不过多赘述了。

字体设计保姆级全方位教学！万字干货 前言 在平时的工作中，我们是否有考虑过运营设计的商业目标是什么？

阅读文章 >

2. 深挖 − 精准化痛点文案

在简单了解 banner 的排版规则和我们的视觉动线之后，有没有发现 banner 信息锚点引导认知方向：当我们看到一个 banner 时，往往先被看到的信息会直接影响我们后续接收信息的内容。

试想你是一个日常大量使用咖啡的社畜，但咖啡对你来说仅仅只是用来吊足精神的工具，当你看到以下两条 banner，哪一个会让你有进行下一步操作的欲望呢？

第一条 banner 被我们优先读取到的信息是咖啡的口感，而接收到这条信息后会思考“我好像也并不在乎它的口感”从而将其划走。

第二条 banner 第一眼就接收到”咖啡、0 元”两条重要信息，我们会下意识认为他很划算，并且点击进行下一步操作。

由此可见，文案是 banner 的重点展示部分，就如同前几年父母经常给我们转发的“标题党”文章类似，那些标题深深戳中用户的痛点，也直接收获了非常夸张的点击率和转载率。

当我们看到这些夸张的文章标题时，有没有想过我们为什么会情不自禁的点击进行下一步的行为呢？在我看来，“标题党”实质上是抓住了用户当时实际的心理变化从而引导用户进行操作。接下来我们从行为引导的角度出发列举出 banner 文案撰写中常被利用的几种心理状态：

① 占便宜的心理

从心理学角度来看，占便宜就像男朋友在我意料之外突然送给我一个惊喜一样，让我产生极大的快感和满足感，不可否认人的本性就是爱占便宜的，贪婪的，我们也经常会因为要占一点小的便宜而浪费很多时间，例如拼多多”助力红包活动”以及“砍一刀领取商品活动”

在文案撰写中在“占便宜”的路径中极大地提高用户点击率以及活动转化率。

② 有趣和猎奇心理

我们对未知世界来说就是一个好奇宝宝，我们天生就具有好奇心，这就像伊甸园里的那颗苹果，让我们有产生一种不可抗拒的行为动机。对于未知领域我们从不缺乏猎奇的双眼，这种心理让我们不断发现开阔自己的眼界，去适应不断变化的生活。

在文案撰写中，用户会被有趣的文案所哦吸引，从而参与其中进行探索。

有句话虽然不好听，但是我觉得很有道理“围观使人快乐”，否则怎么会有那么多吃瓜群众呢？

③ 好奇延伸的窥探心理

这样的文案撰写在引起用户联想的同时促使用户点击进行下一步行动。

④ 随机奖励带来的满足心理

在心理学中，在意外情况下获得的随机奖励会大脑会释放出一种叫做多巴胺的神经递质，会使我们得到极大的满足感。

⑥ 极限大奖激发用户行为

这种利用大奖激起用户行为的方式也是现在活动中最常见的一种形式。大奖作为用户行为的诱因，它能召唤起用户行为并且指导行为。即使用户得到大奖概率完全没有（在工作中曾经和运营同学沟通过大奖概率，他们就轻描淡写一句话“这种根本不会中的奖品，设计都不用出奖品图和弹窗”），最终侥幸心理还是没办法抵挡这么强有力的诱惑。

这样的文案的撰写，即使用户本身没有进行下一步操作的想法，中奖品诱惑足够大时也会激发用户的行为。

⑦ 总结

以上只是运营 banner 中最常利用的几种用户心理，更多的用户心理我们日后详细展开，在文案撰写中不论什么样的形式，文案都要与主题相关，我们一定要根据用户对产品的需求场景进行调整内容文案内容来引导用户进行下一步操作。

（三）实现用户转化

我在工作中，运营同学经常将 banner 称为“资源位”，从这个名称就可以看出 banner 在整体页面中的价值所在。它对产品来说起到了非常好的宣传作用，用非常短的时间让用户帮助用户了解主要内容，通过 banner 传达出的真实有效信息为用户提供愉快、优惠、收入、知识等情绪价值，促使用户做出行为。这也大大降低了企业在传播和获客的成本，而且可以快速增强产品竞争力。

三、总结 当下我们方方面面都在体现着良好的用户体验，由此我们在设计 banner 后，我们可以模拟用户去检查我们的 Banner，是否能直观感受到画面内容，内容是否吸引我们，是否第一眼就想了解画面内容参与其中。如果以上问题都是否定的，那可以说是相当失败了！

在整个 Banner 中不光要看表面的图形字体的美丑，更需要建立在用户研究和事实之上贴近用户，帮助用户零成本了解画面内容，了解用户行为，具体需求以及背后动机，从而打入用户内部，激发用户操作，提高内容转化率。

欢迎关注作者微信公众号：「YTY杂粮设计铺」