编者按： 网易云音乐 「一起听陌生人版」项目，上线后周末的日均活跃用户数量增加了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 分），在云音乐所有主要功能中居首位。

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

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

编者注：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杂粮设计铺」

本文以 百度果园 为例，从长线运营活动的 增长设计 视角，分 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」

按钮是 UI 界面中最常见的功能元素。本文将分析四种不同类型的 按钮样式 ，以及对应的使用场景、设计要点，巩固这些基础但重要的 按钮设计 知识。

虽然单个按钮的设计相对简单，但把按钮放在整个界面中，我们不仅仅要考虑按钮的外观设计，还要考虑按钮与整个界面的关联，对用户行为的引导等额外的设计因素。

在不同的使用场景和视觉风格中匹配合适的按钮是很重要的能力，也是很多新手 设计师 容易忽略的地方。

一、填充按钮 填充按钮指由深色或渐变色填充的按钮。大多数场景下，通过文字和按钮间强烈的颜色对比，来最大程度吸引用户的注意力。

因此填充型按钮也是号召性按钮（CTA）的最佳选择。

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

阅读文章 >

1. 使用场景

如果想要提示用户完成某个特定操作，优先使用填充型按钮。例如 APP 上的登录/注册按钮、购买按钮等都是使用填充按钮，引起更多关注。

2. 设计要点

传递按钮状态。能够让用户通过查看按钮来了解按钮的当前状态。例如，按钮的禁用状态应该与可点击状态具有不同的视觉样式。

保持一致性。关于按钮的外观，有方形和圆角两种流行的形状。圆角按钮在用户看来更舒服，更容易被接受，因为我们自然倾向于避免具有锋利边缘的物体。

视觉一致性是创造良好用户体验的关键。虽然圆角按钮比较常见，但按钮的样式还是要根据 APP 的样式进行合理选择。

例如一个产品所有的 UI 元素都是方形的，那么界面中的按钮也应该保持一致的形状。

提供视觉反馈。提供有关交互操作的视觉反馈至关重要。微妙的悬停效果（PC 端）和点击动效，能够清楚地作为对当前操作的反馈。

添加阴影创建立体效果。阴影让按钮有了空间感，看起来更立体。阴影还可以增强视觉反馈，通过改变阴影的深度来模拟手指点击按钮的感觉。

与按钮的形状类似，阴影的使用也应该由整体的设计风格决定，并不能盲目使用，造成视觉风格不统一的情况。

二、描边按钮 描边按钮是指没有颜色填充的按钮，只有按钮的外轮廓可见。

1. 使用场景

描边按钮通常作为辅助操作按钮。主要操作按钮引导用户采取希望他们采取的行动，而次要辅助按钮提供了一个合理的选择。

对于不想分散用户注意力的 UI 界面，描边按钮也是一个不错的选择。由于描边按钮更轻量，具有较小的视觉权重，所以它比实心的填充按钮吸引的注意力较少，从而让 UI 界面看起来不那么拥挤。

描边按钮作为多功能的按钮，更适合在深色或浅色主题中灵活转变，在不同类型的背景下良好工作。

三、图标按钮 图标按钮指只有图标、没有文字的按钮，仅通过图标来表示。

1. 使用场景

图标类按钮不会占用太多的屏幕空间，因此适合用在菜单或者系统导航栏等功能比较多的设计中。

例如 Word 文档上密密麻麻的菜单图标，如果使用文字按钮来表现，看起来会杂乱不堪。

当需要在一个界面中呈现大量的功能或操作时，如果不想让它们堆叠在一起，就可以考虑使用图标按钮来设计。

2. 设计要点

确保用户明确知道图标的含义。图标的含义应该对用户非常清楚，如果不理解图标的含义，用户可能会倾向于避免与这些图标进行交互。

显示图标提示。如果设计 web 产品，可以考虑为图标按钮添加工具提示，当鼠标悬浮到图标上时，向用户展示该图标按钮的功能。

四、悬浮按钮(FAB) 悬浮按钮（Floating Action Button），简称 FAB，用于在界面中执行主要或最常见的操作。FAB 是一个图标按钮，按钮底部有细微的阴影，通常位于 UI 界面的右下角。

1. 使用场景

悬浮按钮是一个相对紧凑的按钮，通常用作移动 APP 中最主要或频繁使用的操作。例如 Twitter 的分享动态是很重要的功能，通过悬浮按钮帮助用户快速分享动态。

在桌面设计中也可以使用 FAB，但大多数情况下没有必要，因为桌面端有足够屏幕空间，不需要像移动端那样尽可能节省空间。

2. 设计要点

确保所有用户都能了解图标的含义。由于 FAB 通常代表最重要的操作，因此使用清晰的图标至关重要。如果用户不理解 FAB 图标的含义，他们不会与图标交互，这样会对产品产生较大的影响。

FAB 用于一项操作。在有些产品中，我们可能见到过点击悬浮按钮，弹出来多项操作或功能的设计。但大多数情况下，最好避免这种设计，因为这样会使界面 UI 操作起来更复杂，并影响用户的判断。

最好将 FAB 用于一项操作，一旦用户点击，就直接触发最重要的操作。

悬浮按钮不一定是圆形。对于 FAB，可以使用更加具有视觉趣味的形式，例如圆角矩形、方形等。

最后 以上是四种常见的按钮样式分析及设计要点总结，希望通过这些内容能帮你巩固对按钮设计基础知识的认识。

慢慢来比较快，希望对你有帮助！

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

按钮是 UI 界面中最常见的功能元素。本文将分析四种不同类型的 按钮样式 ，以及对应的使用场景、设计要点，巩固这些基础但重要的 按钮设计 知识。

虽然单个按钮的设计相对简单，但把按钮放在整个界面中，我们不仅仅要考虑按钮的外观设计，还要考虑按钮与整个界面的关联，对用户行为的引导等额外的设计因素。

在不同的使用场景和视觉风格中匹配合适的按钮是很重要的能力，也是很多新手 设计师 容易忽略的地方。

一、填充按钮 填充按钮指由深色或渐变色填充的按钮。大多数场景下，通过文字和按钮间强烈的颜色对比，来最大程度吸引用户的注意力。

因此填充型按钮也是号召性按钮（CTA）的最佳选择。

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

阅读文章 >

1. 使用场景

如果想要提示用户完成某个特定操作，优先使用填充型按钮。例如 APP 上的登录/注册按钮、购买按钮等都是使用填充按钮，引起更多关注。

2. 设计要点

传递按钮状态。能够让用户通过查看按钮来了解按钮的当前状态。例如，按钮的禁用状态应该与可点击状态具有不同的视觉样式。

保持一致性。关于按钮的外观，有方形和圆角两种流行的形状。圆角按钮在用户看来更舒服，更容易被接受，因为我们自然倾向于避免具有锋利边缘的物体。

视觉一致性是创造良好用户体验的关键。虽然圆角按钮比较常见，但按钮的样式还是要根据 APP 的样式进行合理选择。

例如一个产品所有的 UI 元素都是方形的，那么界面中的按钮也应该保持一致的形状。

提供视觉反馈。提供有关交互操作的视觉反馈至关重要。微妙的悬停效果（PC 端）和点击动效，能够清楚地作为对当前操作的反馈。

添加阴影创建立体效果。阴影让按钮有了空间感，看起来更立体。阴影还可以增强视觉反馈，通过改变阴影的深度来模拟手指点击按钮的感觉。

与按钮的形状类似，阴影的使用也应该由整体的设计风格决定，并不能盲目使用，造成视觉风格不统一的情况。

二、描边按钮 描边按钮是指没有颜色填充的按钮，只有按钮的外轮廓可见。

1. 使用场景

描边按钮通常作为辅助操作按钮。主要操作按钮引导用户采取希望他们采取的行动，而次要辅助按钮提供了一个合理的选择。

对于不想分散用户注意力的 UI 界面，描边按钮也是一个不错的选择。由于描边按钮更轻量，具有较小的视觉权重，所以它比实心的填充按钮吸引的注意力较少，从而让 UI 界面看起来不那么拥挤。

描边按钮作为多功能的按钮，更适合在深色或浅色主题中灵活转变，在不同类型的背景下良好工作。

三、图标按钮 图标按钮指只有图标、没有文字的按钮，仅通过图标来表示。

1. 使用场景

图标类按钮不会占用太多的屏幕空间，因此适合用在菜单或者系统导航栏等功能比较多的设计中。

例如 Word 文档上密密麻麻的菜单图标，如果使用文字按钮来表现，看起来会杂乱不堪。

当需要在一个界面中呈现大量的功能或操作时，如果不想让它们堆叠在一起，就可以考虑使用图标按钮来设计。

2. 设计要点

确保用户明确知道图标的含义。图标的含义应该对用户非常清楚，如果不理解图标的含义，用户可能会倾向于避免与这些图标进行交互。

显示图标提示。如果设计 web 产品，可以考虑为图标按钮添加工具提示，当鼠标悬浮到图标上时，向用户展示该图标按钮的功能。

四、悬浮按钮(FAB) 悬浮按钮（Floating Action Button），简称 FAB，用于在界面中执行主要或最常见的操作。FAB 是一个图标按钮，按钮底部有细微的阴影，通常位于 UI 界面的右下角。

1. 使用场景

悬浮按钮是一个相对紧凑的按钮，通常用作移动 APP 中最主要或频繁使用的操作。例如 Twitter 的分享动态是很重要的功能，通过悬浮按钮帮助用户快速分享动态。

在桌面设计中也可以使用 FAB，但大多数情况下没有必要，因为桌面端有足够屏幕空间，不需要像移动端那样尽可能节省空间。

2. 设计要点

确保所有用户都能了解图标的含义。由于 FAB 通常代表最重要的操作，因此使用清晰的图标至关重要。如果用户不理解 FAB 图标的含义，他们不会与图标交互，这样会对产品产生较大的影响。

FAB 用于一项操作。在有些产品中，我们可能见到过点击悬浮按钮，弹出来多项操作或功能的设计。但大多数情况下，最好避免这种设计，因为这样会使界面 UI 操作起来更复杂，并影响用户的判断。

最好将 FAB 用于一项操作，一旦用户点击，就直接触发最重要的操作。

悬浮按钮不一定是圆形。对于 FAB，可以使用更加具有视觉趣味的形式，例如圆角矩形、方形等。

最后 以上是四种常见的按钮样式分析及设计要点总结，希望通过这些内容能帮你巩固对按钮设计基础知识的认识。

慢慢来比较快，希望对你有帮助！

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

编者按：本文从什么是用户旅程图？为什么要绘制用户旅程图？如何绘制 用户旅程图 三个方面，帮你掌握 用户旅程 图的知识点。

往期回顾：

用户研究干货！设计师如何建立和利用用户画像？ 回顾个人工作经历，在用户研究中，我从未亲自进行用户画像建模，但却一直和用研同学保持密切的合作，并借助他们的用户画像建模成果输出过很多有益于业务的需求洞察和方案设计。

阅读文章 >

用户旅程，顾名思义，是用户旅行的过程。所以在讲用户旅程图之前，我们先了解一下现实世界的用户旅程，方便大家类比迁移理解。

我们以大家熟悉的旅游攻略为例来了解用户旅程：

图 1 旅游攻略

旅游攻略清晰的传达了：谁，在什么时间，通过什么方式、去到什么地方体验什么？包括体验景点的范围、顺序、时间、交通、住宿、经费等等信息。

如果把这些信息按时间顺序组织并可视化，我们可以得到以下图片（仅做示意，未绘制完全）：

图 2 旅游攻略可视化示意

详细的旅游攻略，可以让我们了解整个用户旅程每段时间的具体规划和注意事项，指导我们合理的安排时间和旅行事件，度过一个完美的旅程。

旅游攻略来自旅游规划和旅游游记的反复迭代：

图 3 两种用户旅程图

未旅行前的旅游规划（To-Be User Journey） 已旅行后的旅游游记（As-Is User Journey） 现在我们回归到今天的主角：用户旅程图。

1. What | 什么是用户旅程图？ 当我们把用户使用我们产品/服务的过程当成是用户的一次旅行，再用一张图把这个旅程可视化出来就得到了用户旅程图。

图 4 用户旅程图的定义

用户旅程图，是一种用户与产品/服务互动过程的可视化地图。

它以用户需求为导向，互动触点为架构，互动体验为内容，帮助设计者明确每个场景下用户的需求、痛点、态度和行为，从而提炼出合理的设计机会点和设计策略。

它可以用在产品/服务未上线时，规划目标用户与产品/服务的互动旅程构想。也可以在产品/服务上线之后，记录目标用户与产品/服务真实的互动旅程。

典型的用户旅程图包括以下 4 个模块：

图 5 用户旅程图的范例

① 用户画像。

包含 Personna 的核心信息（用户概要信息、场景和目标），每个 Personna 需要单独绘制旅程图，因为他们的产品使用行为、态度会具有显著的差异。

② 互动阶段及每个阶段用户的行为和态度。

根据用户旅程的全流程，把所有的小场景/步骤归纳成几个大的阶段，并描述每个场景/步骤下用户的典型行为、想法和态度。

③ 用户情绪曲线。

根据每个场景/步骤下用户行为和态度绘制用户情绪曲线，可视化用户情感变化。

④ 用户痛点和设计机会点。

根据用户表达和访谈观察，结合用户目标，提炼用户痛点，再结合业务目标和资源，提炼设计机会点并输出设计策略。

2. Why | 为什么要绘制用户旅程图？ 用户旅程图以典型用户视角，描述了用户为了达成目标而与产品交互的全过程。绘制用户旅程图有 4 大价值：

图 6 用户旅程图的价值

① 促进团队协同。

建立团队共识，以用户视角、场景和目标来设计产品，提升沟通协作效率。

② 完善产品设计。

帮助设计师以用户视角梳理细分场景和用户与产品的互动行为、想法，调整产品流程和反馈，使之更加契合用户的心智模型，提升任务完成度和流畅度。

③ 调节用户情感

了解用户当下旅程的情感曲线，并将峰终理论运用其中，填平体验低谷，拔高体验峰值，最低成本的提升用户整体的体验感受。

④ 洞察用户需求

将用户旅程场景化、可视化，方便 设计师 代入用户视角、运用同理心，提出更有价值的用户洞察和设计机会点。

3. How | 如何绘制用户旅程图 以浏览器搜索为例，按照用户旅程的 4 个模块，我们逐一来进行用户旅程的绘制，确保用户旅程图所有的信息都有据可依，所有的展示都恰如其分，所有的洞察都有价值和可行性。

① 提炼用户画像

在《设计师如何建立和利用用户画像》一文中，我们介绍了用户画像所包含的内容：用户概要信息、使用行为及态度、使用痛点和目标。

用户研究干货！设计师如何建立和利用用户画像？ 回顾个人工作经历，在用户研究中，我从未亲自进行用户画像建模，但却一直和用研同学保持密切的合作，并借助他们的用户画像建模成果输出过很多有益于业务的需求洞察和方案设计。

阅读文章 >

图 7 用户画像模板

在《一个公式教你搞定场景化设计》中，我们介绍了场景化公式：

用一个公式，从3个方面教你搞定场景化设计 之前我们讲了用户画像，让大家可以通过构建用户画像，去深入了解用户的行为、态度、痛点和需求。

阅读文章 >

图 8 场景化公式

在用户旅程图中，我们可以根据用户画像和场景公式，进一步提炼用户的概要信息、场景和目标如下：

图 9 提炼用户画像

用户概要信息：

郑慧（属于刚需工具党：有需要解决的问题时才使用浏览器，占比约 4X%）

今年 42 岁，已婚有 1 女孩在上高中，居住在济南，大专学历，职业是会计，工作较为清闲朝九晚五，重心在家庭及女儿的教育上。

场景

主要分两类：一类是工作场景，一类是生活场景。

工作场景：上班期间，在办公室用软件工作时，会遇到一些专业问题或者软件问题，有时候会问年轻的同事，不方便问的时候就通过搜索进行查询，以顺利完成工作。

生活场景：午餐时听同事或晚上听女儿聊一些自己不知道的人、事情，或者没有听过的一些词，空闲时间想起来会搜一下看看是什么意思。

目标：

解决工作问题，提升工作效率。 和同事/女儿有共同话题，增进感情。 ② 根据互动场景拆分阶段

用户旅程是用户和产品互动的全过程。我们可以把用户与产品互动的核心流程和步骤以线性的方式表达出来（浏览器搜索为例，这是一个场景比较简单的案例，方便大家理解）

图 10 根据互动场景拆分阶段

用户使用浏览器搜索一共有 5 个步骤：

启动浏览器； 点击搜索框； 输入关键词； 浏览搜索结果； 查看搜索详情。 根据每个步骤之间的关系，我们可以将这 5 个步骤简单划分为 3 个阶段：

搜索前； 搜索中； 搜索后。 我个人习惯把各阶段的目标跟阶段写到一起，随时提醒我如何在每个场景下帮助用户达成阶段目标（如下图）。

图 11 用户阶段示意

注意要点：

浏览器搜索的案例比较简单，直接以步骤当阶段也是可以的，满足米勒定律（4±1），当用户任务的步骤＞5 步时，需要设计师根据步骤关系进行阶段划分，提炼主要阶段。 划分阶段时，先只参考核心链路的必要步骤，分支路径和额外步骤先不考虑，以保持主路径和阶段的简洁性。 ③ 细化用户行为。

把用户与产品互动的主干路径和较大的分支路径的具体互动行为都一一罗列出来，了解多数用户是怎么完成目标任务的。

图 12 用户行为表达

我建议在传统的纯「行为节点」的基础上新增「界面节点」，并以不同的形态展示，让用户行为传达更加场景化（对于互联网产品，界面就是行为发生的场景）。

以上图为例，我在行为链路中新增了黄色的界面节点，让用户行为更容易理解。同时在深色的核心步骤之外，新增了数据量也相对较大的分支路径节点，以更加全面的展示用户的行为路径。（这一步要以后台的用户行为数据为参考，以上图为例，我之所以增加网页路径，是因为有非常大比例的用户属于热启动，还会进入之前浏览的网页）

④ 补充用户态度和想法。

将用户访谈及可用性测试中，相似用户所表达的每个阶段的观点，态度进行整理提炼，挑选该类型用户普遍具有的想法和观点，添加到对应阶段的描述里：

图 13 用户的想法和态度

注意：这里的想法和态度，一定是来自用户访谈或可用性测试中的用户反馈，而且是刚需工具党这一类型的用户反馈。

⑤ 绘制用户情绪曲线

结合用户各个阶段的行为，以及态度想法，设计师凭借同理心及访谈中对用户情感的决策，绘制相应的情绪曲线：

图 14 绘制用户情感曲线

建议在情感曲线的每个节点上直接展示表情来直观的传递用户的情感，并且在每个表情旁边附加用户的观点，以便让该情感更具真实性，也让团队成员更容易理解用户。

⑥ 总结用户痛点及对应的设计机会点

根据各个阶段用户的目标，现况与目标的差距，结合用户的反馈，总结用户痛点，并根据用户痛点，结合当下团队资源，给出有价值且可落地的设计机会点。

图 15 总结用户痛点及设计机会点

这里要注意的是：痛点一定是多个用户都提及到的点，且改善后会对显著提升用户满意度，而设计机会点和策略，则需要结合用户痛点及当下团队的资源来决定，并不是所有的痛点团队都有能力解决，所以一定是可落地的机会点。

最后说一下，对于设计师而言，用户旅程图只是一个过程工具，重要的是通过这个工具梳理用户与产品互动的流程、行为、想法、情感和痛点，从而帮助设计师导出设计机会点和设计策略，大家需要审视一下用这个工具是否有达成这样的目标，而不是为了绘制用户旅程图而绘制。

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

编者按：本文从什么是用户旅程图？为什么要绘制用户旅程图？如何绘制 用户旅程图 三个方面，帮你掌握 用户旅程 图的知识点。

往期回顾：

用户研究干货！设计师如何建立和利用用户画像？ 回顾个人工作经历，在用户研究中，我从未亲自进行用户画像建模，但却一直和用研同学保持密切的合作，并借助他们的用户画像建模成果输出过很多有益于业务的需求洞察和方案设计。

阅读文章 >

用户旅程，顾名思义，是用户旅行的过程。所以在讲用户旅程图之前，我们先了解一下现实世界的用户旅程，方便大家类比迁移理解。

我们以大家熟悉的旅游攻略为例来了解用户旅程：

图 1 旅游攻略

旅游攻略清晰的传达了：谁，在什么时间，通过什么方式、去到什么地方体验什么？包括体验景点的范围、顺序、时间、交通、住宿、经费等等信息。

如果把这些信息按时间顺序组织并可视化，我们可以得到以下图片（仅做示意，未绘制完全）：

图 2 旅游攻略可视化示意

详细的旅游攻略，可以让我们了解整个用户旅程每段时间的具体规划和注意事项，指导我们合理的安排时间和旅行事件，度过一个完美的旅程。

旅游攻略来自旅游规划和旅游游记的反复迭代：

图 3 两种用户旅程图

未旅行前的旅游规划（To-Be User Journey） 已旅行后的旅游游记（As-Is User Journey） 现在我们回归到今天的主角：用户旅程图。

1. What | 什么是用户旅程图？ 当我们把用户使用我们产品/服务的过程当成是用户的一次旅行，再用一张图把这个旅程可视化出来就得到了用户旅程图。

图 4 用户旅程图的定义

用户旅程图，是一种用户与产品/服务互动过程的可视化地图。

它以用户需求为导向，互动触点为架构，互动体验为内容，帮助设计者明确每个场景下用户的需求、痛点、态度和行为，从而提炼出合理的设计机会点和设计策略。

它可以用在产品/服务未上线时，规划目标用户与产品/服务的互动旅程构想。也可以在产品/服务上线之后，记录目标用户与产品/服务真实的互动旅程。

典型的用户旅程图包括以下 4 个模块：

图 5 用户旅程图的范例

① 用户画像。

包含 Personna 的核心信息（用户概要信息、场景和目标），每个 Personna 需要单独绘制旅程图，因为他们的产品使用行为、态度会具有显著的差异。

② 互动阶段及每个阶段用户的行为和态度。

根据用户旅程的全流程，把所有的小场景/步骤归纳成几个大的阶段，并描述每个场景/步骤下用户的典型行为、想法和态度。

③ 用户情绪曲线。

根据每个场景/步骤下用户行为和态度绘制用户情绪曲线，可视化用户情感变化。

④ 用户痛点和设计机会点。

根据用户表达和访谈观察，结合用户目标，提炼用户痛点，再结合业务目标和资源，提炼设计机会点并输出设计策略。

2. Why | 为什么要绘制用户旅程图？ 用户旅程图以典型用户视角，描述了用户为了达成目标而与产品交互的全过程。绘制用户旅程图有 4 大价值：

图 6 用户旅程图的价值

① 促进团队协同。

建立团队共识，以用户视角、场景和目标来设计产品，提升沟通协作效率。

② 完善产品设计。

帮助设计师以用户视角梳理细分场景和用户与产品的互动行为、想法，调整产品流程和反馈，使之更加契合用户的心智模型，提升任务完成度和流畅度。

③ 调节用户情感

了解用户当下旅程的情感曲线，并将峰终理论运用其中，填平体验低谷，拔高体验峰值，最低成本的提升用户整体的体验感受。

④ 洞察用户需求

将用户旅程场景化、可视化，方便 设计师 代入用户视角、运用同理心，提出更有价值的用户洞察和设计机会点。

3. How | 如何绘制用户旅程图 以浏览器搜索为例，按照用户旅程的 4 个模块，我们逐一来进行用户旅程的绘制，确保用户旅程图所有的信息都有据可依，所有的展示都恰如其分，所有的洞察都有价值和可行性。

① 提炼用户画像

在《设计师如何建立和利用用户画像》一文中，我们介绍了用户画像所包含的内容：用户概要信息、使用行为及态度、使用痛点和目标。

用户研究干货！设计师如何建立和利用用户画像？ 回顾个人工作经历，在用户研究中，我从未亲自进行用户画像建模，但却一直和用研同学保持密切的合作，并借助他们的用户画像建模成果输出过很多有益于业务的需求洞察和方案设计。

阅读文章 >

图 7 用户画像模板

在《一个公式教你搞定场景化设计》中，我们介绍了场景化公式：

用一个公式，从3个方面教你搞定场景化设计 之前我们讲了用户画像，让大家可以通过构建用户画像，去深入了解用户的行为、态度、痛点和需求。

阅读文章 >

图 8 场景化公式

在用户旅程图中，我们可以根据用户画像和场景公式，进一步提炼用户的概要信息、场景和目标如下：

图 9 提炼用户画像

用户概要信息：

郑慧（属于刚需工具党：有需要解决的问题时才使用浏览器，占比约 4X%）

今年 42 岁，已婚有 1 女孩在上高中，居住在济南，大专学历，职业是会计，工作较为清闲朝九晚五，重心在家庭及女儿的教育上。

场景

主要分两类：一类是工作场景，一类是生活场景。

工作场景：上班期间，在办公室用软件工作时，会遇到一些专业问题或者软件问题，有时候会问年轻的同事，不方便问的时候就通过搜索进行查询，以顺利完成工作。

生活场景：午餐时听同事或晚上听女儿聊一些自己不知道的人、事情，或者没有听过的一些词，空闲时间想起来会搜一下看看是什么意思。

目标：

解决工作问题，提升工作效率。 和同事/女儿有共同话题，增进感情。 ② 根据互动场景拆分阶段

用户旅程是用户和产品互动的全过程。我们可以把用户与产品互动的核心流程和步骤以线性的方式表达出来（浏览器搜索为例，这是一个场景比较简单的案例，方便大家理解）

图 10 根据互动场景拆分阶段

用户使用浏览器搜索一共有 5 个步骤：

启动浏览器； 点击搜索框； 输入关键词； 浏览搜索结果； 查看搜索详情。 根据每个步骤之间的关系，我们可以将这 5 个步骤简单划分为 3 个阶段：

搜索前； 搜索中； 搜索后。 我个人习惯把各阶段的目标跟阶段写到一起，随时提醒我如何在每个场景下帮助用户达成阶段目标（如下图）。

图 11 用户阶段示意

注意要点：

浏览器搜索的案例比较简单，直接以步骤当阶段也是可以的，满足米勒定律（4±1），当用户任务的步骤＞5 步时，需要设计师根据步骤关系进行阶段划分，提炼主要阶段。 划分阶段时，先只参考核心链路的必要步骤，分支路径和额外步骤先不考虑，以保持主路径和阶段的简洁性。 ③ 细化用户行为。

把用户与产品互动的主干路径和较大的分支路径的具体互动行为都一一罗列出来，了解多数用户是怎么完成目标任务的。

图 12 用户行为表达

我建议在传统的纯「行为节点」的基础上新增「界面节点」，并以不同的形态展示，让用户行为传达更加场景化（对于互联网产品，界面就是行为发生的场景）。

以上图为例，我在行为链路中新增了黄色的界面节点，让用户行为更容易理解。同时在深色的核心步骤之外，新增了数据量也相对较大的分支路径节点，以更加全面的展示用户的行为路径。（这一步要以后台的用户行为数据为参考，以上图为例，我之所以增加网页路径，是因为有非常大比例的用户属于热启动，还会进入之前浏览的网页）

④ 补充用户态度和想法。

将用户访谈及可用性测试中，相似用户所表达的每个阶段的观点，态度进行整理提炼，挑选该类型用户普遍具有的想法和观点，添加到对应阶段的描述里：

图 13 用户的想法和态度

注意：这里的想法和态度，一定是来自用户访谈或可用性测试中的用户反馈，而且是刚需工具党这一类型的用户反馈。

⑤ 绘制用户情绪曲线

结合用户各个阶段的行为，以及态度想法，设计师凭借同理心及访谈中对用户情感的决策，绘制相应的情绪曲线：

图 14 绘制用户情感曲线

建议在情感曲线的每个节点上直接展示表情来直观的传递用户的情感，并且在每个表情旁边附加用户的观点，以便让该情感更具真实性，也让团队成员更容易理解用户。

⑥ 总结用户痛点及对应的设计机会点

根据各个阶段用户的目标，现况与目标的差距，结合用户的反馈，总结用户痛点，并根据用户痛点，结合当下团队资源，给出有价值且可落地的设计机会点。

图 15 总结用户痛点及设计机会点

这里要注意的是：痛点一定是多个用户都提及到的点，且改善后会对显著提升用户满意度，而设计机会点和策略，则需要结合用户痛点及当下团队的资源来决定，并不是所有的痛点团队都有能力解决，所以一定是可落地的机会点。

最后说一下，对于设计师而言，用户旅程图只是一个过程工具，重要的是通过这个工具梳理用户与产品互动的流程、行为、想法、情感和痛点，从而帮助设计师导出设计机会点和设计策略，大家需要审视一下用这个工具是否有达成这样的目标，而不是为了绘制用户旅程图而绘制。

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

编者按：设计师创业有哪些注意事项？想开 设计工作室 应该具备什么能力？本文由创业五年的远麦刘斌出品，全是实战的踩坑经验，想 创业 的 设计师 记得收藏。

做设计师四年了，该选择继续、转岗还是创业？ 今天给大家分享的主题是：如果当老板要求你转岗时，你应该如何抉择。

阅读文章 >

今年是远麦刘斌（深圳）设计有限公司成立第 5 个年头，据闻有 90%的初创公司活不过 3 年，如果属实，我们应该活过了平均数。

所以跟大家谈一点这方面的故事，大家注意，仅是故事分享，不存在指导与教学。

设计创业是个大话题，也是大部分设计师感兴趣的话题，过去我在公众号或者虎课网视频分享中以小主题形式已经谈过很多具体内容。

谈过的内容再谈自然是没意思的，但可以换一下角度切入，本次作为一个直播分享，我想跟大家谈一下设计创业的框架。

我将其总结为 15 个字，开门见山，分别是：

开局要谨慎过程需坚持目标是维稳

接下来分别简单谈一谈他们的具体含义。

一、开局要谨慎 大凡创业过的人都不会自动劝他人创业，因为了解其中艰辛。

但同时要创业的人也压根不需要劝，反而拉都拉不住。

为什么开局要慎重，因为做好一个公司跟做好一个设计本身是两件事情。

很多优秀设计师破釜沉舟式出来来才发现自己驾驭不了一个公司。

除了设计，做设计公司还要懂得宣传营销、业务沟通、团队管理、生产管理及财务管理，假设懂一些法务效果会更佳。

这些能力需要在创业前有意识锻炼，不然失败率确实会很高，大家身边相信都会有活人的例子。

我从 2010 年就开始，有意识积累了足足 8 年才全职出来，这个时长因人而异，没有标准。

重点在于你要筹备，不能因为激情出发，或者因为失业了而出发。

我谈到设计之外的 6 种能力并非一个平均数，而是 6 个都要达到及格线，然后有 2-3 个特别强就可以。

比如我在宣传营销，业务沟通及团队管理方面见长。

这是“开局要谨慎”的精要。

二、过程要坚持 过程要坚持是老生常谈，任何行业都适用。

放在设计公司的语境中是因为你要积累案例及沉淀客户，另外则是打磨设计服务定位上的精确性。

刚刚开始你自然会很鸡贼的拿过去上班服务过的客户作案例，这非长久之计。

其一是宣传上有风险，其二是过去公司的实力与你自己初创公司的实力是有落差的。

你需要不断寻找及过滤适合自己发展阶段的客户。

这听起来有点拗口，比如刚刚开始我们只要有项目都会接，而且价格弹性很大，有一些甚至亏本做。

但慢慢随着案例积累多了，就需要过滤了，比如公司团队不擅长的，比如结款周期长的，比如要求很高但预算很低的，比如不符合公司日后发展定位的。

再者就是项目太大接回来难以消化甚至制造风险的。

如此一来公司就会走上良性循环，这个过程需要的是韧性与坚持，同时还有取舍。

过去就谈过我们不接一些大公司的项目，因为对方太大，我们除了没有沟通的主动权之外，就是承担不了某些风险。

但以后我们长大了自然也会有不同做法，在小的时候不能贪心，贪心就会有侥幸心理，而侥幸往往是不幸的开端。

如果按足我的说法走，过程中肯定会产生短暂性经济问题，我所说的“坚持”才真正登场。

南宋儒家学者朱熹说“存天理，灭人欲”被很多人误解。

以为是不能有欲望，其实真正含义应该是“欲望有度”。

比如吃饭于人而言自然是天理，但贪嘴吃很多就是人欲，三高就是这样来的。

放在我们这个话题中就是找业务是天理，但承接超出能力范围的业务就是人欲。

服务好客户是天理，但希望客户转介绍就是人欲。

拓展业务是天理，但不顾公司定位就是人欲。

比如小米不断发展手机之外的产品，但品控没做好，就导致了利润下降，透支消费者信任等一系列严峻问题。

我们要坚持的是设计创业的正确价值观。

比如远麦既然定位了品牌设计，那么 UI 设计一类价格再可观我们也不碰。

当做到这方面的坚持，你就能做好服务，积累一批保命客户。

三、目标是维稳 维稳的意思是维持稳定增长。

设计公司本身是一门小生意，或者说大部分都是小生意。

小的原因是我们提供的是“手艺型”专业服务，不管对外宣传时候怎么粉饰，本质上就是如此。

跟策划咨询公司、律师事务所或者会记事务所类似，我们提供的服务主要依赖核心人员的创意与劳务。

根据大部分经验与观察，这些人员在一所公司的数量不会太多，因为一但核心人员比较多难免就会产生裂变。

裂变的意思是一部分十分优秀的人会自然的选择自立门户。

我们先不探讨这个裂变情况，而是回到“维持稳定增长”这个问题上。

基于以上背景原因，设计公司最好的发展路径一定是稳定增长。

因为假设项目突然暴增，而核心人员有限，外包存在风险，那么生产就是一个大问题。

前面谈过，设计公司的核心产品是案例，所以当项目量超出范围而导致服务质量下降，就容易成为恶性循环的开端。

通常而言，我们要畏惧的不是事情的结果，而是事情的起因，错误的因必然养出痛苦的果。

所以我们首先要控制项目质量，这也是为何要做筛选过滤的原因。

设计公司的稳定增长可以从两方面着手。

其一是提升客单价，提升客单价的依据是项目效果越做越好，如此这般良性滚动，流水规模与利润增长应该从这里来。

比如我们从 2018 年至今，品牌服务的单价已经提升了 7 倍左右，但大家千万记住，不是盲目提价，是水平不断提高或者服务内容不断丰富带来的转变。

其二是随着知名度提升，项目数量增长时候要控制幅度。

举个示例，过去公司一个月可以服务 10 个客户，那么忽然增加到 12 个，这属于安全范围的量，可以通过加班或者人手调配顺利完成。

如果 12 个项目的情况维持了 2 个月以上，表示有稳定下来的趋势，那就要招募增加固定人手。

而如果 10 个客户，忽然暴增到 15 个，那就需要进行过滤式“拒单”，过滤方式前面已经谈过，优先承接我们更擅长的，客户更认同我们的，项目本身有持续性的等等。

大家不要认为我们拒单是臭牛逼行为，其实假设你本身不具备做好项目的条件，拒单是最理性的选择，也是对双方最负责的选择。

而且拒单不代表大家老死不相往来，拒单也讲究技巧，技巧很简单，就是坦诚相告，说明不能承接的原因。

假设对方不算急，愿意等待我们的空档，那当然是最好的，假设很急，就可以保持联系，往后有机会再合作。

一位老大哥曾经跟我说过一句话，这里也分享给大家：

“一夜暴富，不如日进分文”

设计公司首先完全不存在一夜暴富的情况，但日进分文是靠谱的，可执行的。

另外，一夜暴富放在任何行业都并不健康，容易扭曲人的行为与价值观，变得盲目自信，如此一来前面就会有大坑等着。

大家看到这里好奇，我好像将业务说得很简单似的，其实并不简单，原因前面我已经说过了，这里极简的回顾一下，怎么让你的项目越来越多。

过去上班有私单客户的积累，创业后就可以继续合作。 懂得在线上选择擅长的平台去包装分享完成的案例，持续不断的经营。 珍惜一切找上门的客户，悦近来远，服务好手上客户，本身就是项目的主要源头。 如果坚持做到这三点还是没什么项目就是设计水平不行或者人品不行，没其它原因了。

假设大家渴望借助设计技能在赚钱这件事情上有更多突破，我也有一个故事可以分享。

但大家注意，这并非一夜暴富，而是延迟享乐，同时也存在徒劳无功的风险。

那就是跟第三方合作做产品。

首先我要声明，这一类尝试很多设计师都也许试过，失败的可能性极高，包括我自身也失败过几次，然后才获得一次较理想的收获。

在我做设计公司的第二年，开始跟一所智能服装公司合作做海外产品众筹。

这款产品简单说来就是通过电脉冲技术结合服装，穿着运动可以缩短时间而提升效果，其设计雏形来自当年宇航员在外太空防止肌肉萎缩时候穿的特制衣服。

我们公司免费提供了品牌设计、页面设计、包装设计及 APP 界面设计等服务。

而客户则提供了样品制作、产品摄影、网站制作、视频拍摄与众筹过程投广的费用，这里有一部分项目也由我们收取成本价格去制作。

彼此约定了利润将按各自 50%进行分配。

经过接近一年的筹备，大家没有听错，足足一年时间投入。

产品在美国的 kickstarter 众筹平台上线，结果上线一个月才卖出 141 套，但是产品单价比较高，所以总额大致 34 万港币。

但远远没有达到我们的目标，算一下账目，怒亏十八万八。

故事没有结束，反转来了，项目结束不久开始有日本客户联系到我们希望在日本地区代理产品。

然后产品就在日本再上线众筹，因为旧素材全部可以使用，等于零成本。

最后日本客户合计卖出 1 个亿，当然是日元，换算过来大概 61 万人民币。

这里我们才开始盈利，这个客户就这样变成我们日常出货的客户，一年大概可以出 1000 套左右，对于远麦团队而言，这 1000 套的差价就是纯利润。

而故事还没结束，真正的高潮现在才来。

有了以上经验我们决定继续如法炮制，2020 年推出石墨烯加热服，这次直接跟美国当地众筹供应商合作，我们提供产品与基本素材，他们进行包装上线。

也是筹备足足一年，然后 2021 年上线。

这次就直接卖爆了，一个月时间合计售出 7161 套，总金额 1900 多万港元。

此时的回报就是非常可观的了，后来看平台数据才知道，居然进了 2021 年的项目排名前三甲。

这个故事希望告诉大家什么呢，不是提倡模仿复制，因为大家也知道这里面有很多运气与时机成分。

重点是，假设你希望在赚钱上有更多拓展，有三点比较重要，因为很考验人性，我知道说了对大家也帮助不大，因为很难真的完全做到（我自己属于磕磕碰碰后总结的）：

愿意尝试，哪怕失败或者白干（比如第一年确实就是白干了）。 敢承担风险，但不盲目冒险。（比如我的产品项目失败了我还有设计业务） 将专业用对位置，同时也要找对人。（比如我们的专业刚好可以在项目中发挥作用，同时我们选对了有实力的合作商） 我刚到深圳的时候，第一所公司的老板就是跟酒厂合作，免费提供设计，回报方式是参与销售分成。

其实他到底有没有赚钱我不清楚，但他这个举动让我看到一种可能性，于是才有了后来我愿意尝试的想法。

本次分享就到这里，感谢各位的时间！

希望我过去的这些小故事能对大家有一点点启发与帮助。

欢迎关注作者的微信公众号「设计史太浓」：

iPhone 14 刚刚发布，苹果官方就发布了展示 样机素材 ，涵盖了iPhone 14、iPhone 14 Plus、iPhone 14 Pro、iPhone 14 Pro Max 四款新机型和新的配色， 样机 包括PSD和PNG两种格式，我们已经打包好了，想用的抓紧下载哟。

关于最近大家热议的iPhone 14 Pro灵动岛设计：

iPhone 14正式发布！从设计师角度聊聊苹果的灵动岛功能 编者按：灵动岛作为苹果发布会的一大亮点，让无数人有了购买iPhone 14的理由，本文详细分析一下灵动岛的功能设计。

阅读文章 >

更多样机素材网站：

5个样机网站免费商用！提升设计质感必备 大家好，我是和你们聊设计的花生~ 样机网站是提升设计质感的利器，特别是在进行作品集呈现的时候，好的样机网站里的素材能让作品集质量直接上升一个高度。

阅读文章 >

2021年全网最新最好的样机资源被我找到了！免费打包！ 俗话说的好：“样机用的好，过稿过的早”，想来有段时间没有给大家分享样机了。

阅读文章 >

全方位实用测评！2款超强的免费样机生成器对比！ 整理了下近期比较火的 2 款免费智能样机生成器，做了个实用版的测评，也就是好的坏的都说一说，方便大家上手选择使用。

阅读文章 >

PS宝藏级小众样机插件，内附超多福利！ 好久不见，我又回来了，今天给大家带来一个宝藏级的 PS 插件：烤漆质感插件。

阅读文章 >

苹果官方样机网站戳 ? https://developer.apple.com/design/resources