序言

《 一个 APP 的诞生 》被定义是一本教科书、工具书，适合想通过 APP 实现自己的产品梦的受众通读，即通过本书可让你快速了解 APP 产品的整个流程，从零到一，创造 APP 产品。

而通读本书籍后，或许你、我有同样的感受，即大部分内容是以设计师的角度看待问题的。这样，若你就是设计师，或许这将助你更加透彻理解 APP 的产出过程；若你是软件工程师，也可看待成是从另一角度理解软件过程。当然，这些知识只停留在书本层面，而对实际项目而言，有出入是无法避免的，但不失它的参考价值。简言之，这样一本图文并茂、实例贴近现实且含有众多跨界元素 (设计、开发、交互、产品等) 的工具书，特别是产品这一类别的书目 (下述还有同类型的书籍推荐)，不仅让你有机会感同身受业界优秀企业的工作流程，也是自身寻求产品方法论的不二选择。

• 推荐书目

  • 《 U一点·料 》：由阿里巴巴集团 1688.UED 团队历经多年实践之后的佳作，内容重实战、讲方法、求专业、论文化，且以 “道─术─器” 的思路为编排脉络，从设计观、思考体系、方法论上层层剖析，将零散的行业技术诀窍串成体系，对 “UED如何发展突破” 提出了自己的真知灼见。
    贴上本书的 豆瓣书评，供朋友评判，做出抉择。

  • 《 设计之下 》：由搜狐新闻客户端 UED 团队共同出品的佳作，分别以交互设计、视觉设计、设计师视觉，全面讲解了用户体验设计的流程和方法。
    贴上本书的 豆瓣书评，供朋友评判，做出抉择。

• 更新进程

  • 2018.03.25 - 完成序言；
  • 2018.03.26 - 更新内容 ( 共 6 章 )；
  • 2018.04.02 - 更新完毕.

零 思维导图

根据思维导图的架构，掌握知识；以及参考部分项目经验，文档归纳。

• 前景探索

  • 竞品分析
    • 熟悉竞品分析的流程；
    • 明确竞品分析的每个部分包含的内容；
    • 分析报告的输出.
  • 用户研究
    • 了解用户研究的方法及它们的定义；
    • 用户画像
    1. 掌握建立的流程；
    2. 用户画像的分类，每种分类的使用方法及优缺点；
    3. 用户画像的构成、价值.

• 设计规范及流程

  • 建立设计规范的特定情况；
  • iOS 和 Android 规范的差别；
  • 主要元素及作用.

• 交互设计

  • 用户体验
    • 交互设计师的工作内容、状况分析及处理；
    • 紧密联系生活.
  • 交互设计的基本流程
    • 交互设计五要素：人、目的、环境、媒介、行为；
    • 基本流程.

• 视觉设计

  • Ui 设计
    • Ui 设计制作流程；
    • 对未来设计趋势的了解与把握.
  • 图标品质的提升
  • 界面细节设计
    • 栅格系统提升界面易读性与可用性；
    • 切图标注的知识与技能；
    • 设计资源命名及文件分类整理.

• 开发实现

  • 如何与产品、运营、开发配合工作
    • 互联网企业中产品开发实现过程；
    • 主要工作岗位职责和工作性质，以及岗位配合的注意事项.
  • 发布制作完成的 APP
    • 发布方式
    • 常见市场

• 线上运营

  • 运营的定义
    • 什么是运营及运营的目标；
    • 运营手段及运营岗位.
  • 线上运营活动：策划线上活动流程
  • H5 页面和 Banner 设计

• 服务设计

  推荐阅读 This is service design thinking [1]

  • 服务设计的概念
  • 服务设计的流程
  • 工具箱：熟悉常见服务设计工具

• 跨界设计

壹 前景探索

竞品分析

竞品分析，能带来的价值：

• 企业：优势 (Strength，S) 和 劣势 (Weakness，W)
• 设计：User Interface

为什么要竞品分析

• 知己知彼
  • 市场：红海 (已经市场空间)；蓝海 (还不存在的产品)
  • 动向：目标人群、运营策略、用户体验、用户反馈
• 设计灯塔：权衡利益与设计成本的关系

如何做竞品分析

• 确立 竞争对手
  • 市场目标一致；
  • 目标用户相同；
  • 产品功能相同、相似；
  • 用户需求相同.

选择优质和合适的竞品，再进行分析。如表 1-1 所示，定位于即时通信类 APP ，即所要考虑的竟品类型及竞争关系。

<center>表 1-1 即时通信类 APP 的竟品类型及竞争关系</center>

• 挖掘 对手信息

  • 搜集资料
    • 数据资料，例如：APP 下载量，市场方面数据等。
    • 其他信息，例如：APP 新闻动态，研究报告，APP 评价等。
  • 搜集渠道
    • 公司内部资源
    • 运营部门
    • 搜索引擎

• 分析 数据信息

  • 分析数据模型
  • 整合收集的信息 (企业战略、目标人群、交互设计、视觉设计、运营策略等)

• 输出 分析报告 -- 可视化输出

分析数据信息

• 分析数据模型

  • SWOT 模型，即道斯矩阵、态势分析法，经常用于企业战略制定、竞争对手分析。

  详细解释见：MBAlib.智库百科.SWOT分析模型

  SWOT 分别代表企业的优势 (Stength)、劣势 (Weakness)、机会 (Opportunity) 和威胁 (Threats)。

  • 波士顿矩阵 [2, 3]，四象限分析法。详细解释见：MBAlib.智库百科.波士顿矩阵

  • KANO 模型 [4]，一种典型的定性分析模型，经常用于绩效指标分类。其定义了顾客需求的三个层次：基本型需求、期望型需求和兴奋型需求。详细解释见：MBAlib.智库百科.KANO 模型

• 关于 SWOT 分析模型

  • SW：竞争优势指一企业超越其竞争对手的能力，这种能力有助于实现企业的主要目标 -- 盈利。
  • OT：不利发展趋势所形成的挑战。

<center>表 1-2 SWOT 分析模型</center>

举例：对蚂蜂窝 APP 实行 SWOT 分析法

• S：旅游攻略是蚂蜂窝进军移动端的拳头产品，手持海量 UGC 数据和攻略引擎技术。

• W：盈利模式单一，知识与传统 OTA 合作的佣金 + 广告模式)。

• O：OTA & O2O。

• T：行业壁垒；变现能力还能支持技术和运营走多远？

• 关于波士顿矩阵：波士顿矩阵区分出4种业务组合，如表 1-3 所示。

<center>表 1-3 波士顿矩阵业务组合</center>

输出分析报告

• 竞品分析包括内容：
  • 市场趋势、行业现状； -- SWOT 分析法
  • 竞品的企业愿景、APP 定位、发展策略；
  • 目标用户，用户画像；
  • 核心功能；
  • 交互设计；
  • APP 优缺点；
  • 运营及推广策略；
  • 总结并建议.

用户研究

用户研究最终的输出产物之一就是用户画像，即用户研究 => 用户画像。

一般方法

• 场景观察：正常的工作环境或其他产品合适的 物理场景 中观察用户并与其交流。

• 可用性测试：用户在一定场景下使用产品。由可用性工程师对 用户操作过程、习惯 等进行 观察、记录和测量，以评估产品的可用性问题。

• 问卷调查：用 统一、严格设计的问卷 收集研究对象有关的 心理特征 和 行为数据 资料。

• 访谈研究：在访问用户过程中，提示被访者对某一问题的 潜在冬季、新年、态度和感情。

  潜在冬季、新年、态度和感情？

• 焦点小组：定性研究方法。一定的组织结构，让用户一起进行 互动，用以激发新的思考和想法。

• 桌面研究：对已收集信息进行调研活动，即对二手资料进行搜集、筛选，并判断问题是否已经 局部解决 或 全部解决。

• 专家评估：组织各领域专家运用专业方面知识和经验，通过直观归纳，对产品过去、现在及发展过程进行综合分析、研究，再作判断。

用户画像

• 输出用户画像的流程

  • 获取研究用户信息
  • 细分用户群
  • 建立并丰富用户画像

• 建立用户画像的方法

  • 定性 用户画像
  • 经 定量验证 的 定性 用户画像
  • 定量 用户画像

  定性 (性质) 研究：创立理论的过程。即 具体向抽象转化，形成理论。通常以 访谈、观察 等方法收集第一手描述性资料 (归纳法)。

  定量 (度量) 研究：提出理论假设，使用 问卷 等工具收集具有数量关系的资料，对资料进行 量化，以 数据形式 验证假设。

• 定性用户画像 -- 直接分用户群

  • 步骤
  1. 定性研究访谈；
  2. 细分用户群；
  3. 建立细分群体的用户画像。
  • 定性用户画像优缺点
    • 优点 - 省时省力、简单、需要专业人员少。
    • 缺点 - 缺少数据支持和验证。

• 经定量验证的定性用户画像 -- 分了用户群再验证

  • 步骤
  1. 定性研究访谈；
  2. 细分用户群；
  3. 定量验证细分群体；
  4. 建立细分群体的用户画像。
  • 经定量验证的定性用户画像优缺点
    • 优点 - 有一定的定量验证工作，需要少量的专业人员。
    • 缺点 - 工作量较大，成本较高。

• 定量用户画像 -- 验证了再分用户群

  • 步骤
  1. 定性研究；
  2. 多个细分假设；
  3. 通过定量收集细分数据；
  4. 聚类分析细分用户；
  5. 建立细分群体的用户画像。
  • 定量用户画像的优缺点
    • 优点 - 有充分的佐证、更加科学、需要大量的专业人员。
    • 缺点 - 工作量较大，成本高。

• 用户画像包含以下元素：

  • 基本信息 (姓名、照片、年龄、家庭状况、收入、工作)；
  • 典型场景；
  • 目标和动机；
  • 需求和痛点；
  • 对 APP 的态度；

  如图 1-1 以音乐沉侵爱好者为例，建立用户画像。

图 1-1 音乐沉侵爱好者的用户画像

调查问卷设计

设计问卷的目的是为了更好地搜集信息或者定量去验证定性研究的结果。故在问卷设计的过程中，要把握调查的目的和需求，具体可分为以下几个步骤：

• 问卷设计流程

  • 确定所需要的信息
    • 调研目的
    • 竞品分析文档
    • 用户画像
  • 确定问题顺序：先易后难
  • 问卷的测试和修改
    • 投放预测试
    • 问题修改

• 设计问卷题目

  • 用户基本信息 (年龄、爱好、APP 相关生活行为)
  • 用户使用 APP 典型场景 (碎片化时间使用，使用频次)
  • 用户的痛点与需求

  可参考书本 P27-30 的实例，全民 K 歌用户体验调研问卷。

贰 交互设计

用户体验

• 用户体验，即站在用户角度考虑问题。
• 交互设计师
  • 核心价值：沟通
  • 工作流程：
    • 对重要或者紧急设计任务进行准备、分工、安排；
    • 写解决方案，画稿；
    • 评审待确认的设计；
    • 总结方案，输出结果，同步给部门；
    • 输出设计稿，与产品、研发及时沟通；
    • 与项目接口人沟通.

交互设计基本流程

交互五要素

• 人 (Amber)：有记录灵感的设计师，有需求的人称之为用户。
• 媒介 (Tools)：用户使用的设备。
• 行为 (Behavior)：用户的具体操作。
• 目的 (Purpose)：要达到某种的效果。
• 环境 (Enviroment)：用户使用的设备，这里指手机。

图 2-1 交互设计五元素

如何参与一个项目

交互设计师接到一个项目或者需求后，他们的工作流程基本按照以下流程执行，即需求分析、信息架构设计、流程图设计、原型设计、最终进入产品的可用性测试，当然需求分析阶段完成后，也可以进行可用性测试，以验证方案的可行性。图 2-2 描述了交互设计师如何参与一个项目。

图 2-2 交互设计师如何参与一个项目

提示：实例中，我们以便签 APP 为主题展开讨论的。

• 1. 需求分析
  • 了解需求
  • 用户调研
  • 需求定位：竟品分析、头脑风暴、绘制故事板、人物建模 (用户画像)、产品数据
  • 实例：在需求分析阶段，我们从诸多研究方法和数据中简明得出便签 APP 的产品定位：
    • 产品定义
      • 使用人群 -- 设计师、学设计的学生
      • 主要功能 -- 记录想法、分享想法
    • 用户需求
      • 使用目标 -- 随时随地记录想法、把想法分享给同事和朋友
      • 使用场景 -- 商场、会议、课堂、工作、训练、作图
      • 用户目标 -- 操作方便快捷、耗流量少、学习成本低
• 2. 信息架构
  • 需求收集
  • 需求删减
  • 定义优先级
  • 用户任务
  • 实例：根据需求分析得到的信息，接下来便梳理架构，开始架构草图设计。如图 2-2 所示。
  图 2-3 信息架构图
• 3. 流程图
  • 操作流程
  • 页面流
  • 布局设计
• 4. 原型设计
  • 交互原型
  • 交互说明
  • 设计规范
  • 项目跟进
• 5. 测试
  • 可用性测试
  • A/B 测试
  • 用户反馈
  • 产品数据

需求分析的考虑因素

在产品设计的整个过程中，要充分考虑商业需求和用户体验的平衡。如图 2-4 所示，展示了需求收集需要考虑的因素。

需求的删减是需求分析中很有必要的步骤，他是设计师们综合考虑各种因素，取舍得到的结果。

图 2-4 需求收集需要考虑的因素<

如何组织需求

• 1. 定义信息优先级
  • 产品定位：核心功能，意味着这些功能的优先级最高。
  • 真实需求：区分次要需求。它们是围绕核心功能进行拓展的。
  • 需求删减：权衡删减需求。
• 2. 信息架构：深度和广度要均衡。

流程图设计

• 确定信息架构

• 确定用户任务

• 如何完成操作

  完成任务方法即我们所说的流程，任务流程是根据用户实际操作的心理和行为来确定的。

  [实例] 人在使用纸质版的便签的流程：

  • 首先拿出纸和笔；
  • 纸上记录想法；
  • 粘贴醒目的地方便于查看。

  在现实中使用便签的过程和在手机上使用便签的实际操作步骤基本吻合，如图 2-5 所示，展示了添加便签的流程图。

  这里的流程图设计，可以使用 C 语言程序设计中的程序流程图。

图 2-5 添加便签的流程图素

原型设计及设计原则

• 确立功能和逻辑后

• 设计草图

• 低保真线框图

• 高保真原型图

  图 2-6 是本人早期设计的沙漏记事 APP 的低保真线稿，强制插入了一段广告哈。而对应的高保真原型图，可参考对应的专题介绍。「沙漏记事」APP

  图 2-6 沙漏记事 APP 低保真线稿

总结

• 交互设计基本流程
  • 需求收集和分析
  • 定义优先级
  • 信息架构设计
  • 流程设计
  • 原型设计
• 需求分析过程，要综合考虑 商业、项目、用户 三要素。

叁 视觉设计

UI 设计

UI 的定义

用户界面 (User Interface，UI)，系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可接受形式之间的转换。

UI 设计流程

• 具体把 UI 设计流程分为前期准备和情绪板两个阶段。

  • 1. 定义：做好定义 / 用户细分。
  • 2. 找寻：找到同类竞品的 APP 安装并进行沉侵式体验。
  • 3. 分析：分析竞品并学习。
  • 4. 关键字：确定情感关键字。
  • 5. 收集：图片素材收集，建立情绪板。
  • 6. 分析：对情绪板进行色彩和质感分析。
  • 7. 访谈：用户验证确定设计风格。
  • 8. 完善：完善整个 APP 视觉设计。

  Step 1 ~ 4 为前期准备阶段，Step 5 ~ 8 为情绪板阶段。

• 做用户定义：如何定义用户在这不再重复阐述，详细见 第一章 前景探索。

• 找寻同类竞品 APP 使用并体验：站得高，看得远。即选择的竞品也要有足够的市场表现力。

• 确定情感关键字：该 APP 的视觉所要表达的情感感受。

• 情绪板：把每个人对情感的抽象理解成实际可定义的元素。

  • 关键字提炼；
  • 建立具象图库 (具体的事实物、场景) 和抽象；
  • 图库 (色彩质感等元素).

• 对情绪板进行色彩和质感分析，即把握图片上的颜色、元素的感觉，再抽象成颜色方案。

图标品质提升

素描色彩的基础

• 素描的三大面五大调

  • 三大面：亮面，灰面，暗面。
  • 五大调：亮面，灰面，明暗交界线，反光部和投影。

  在构图中，我们都是通过假设光源的方法来进行创作。

• 构图注意事项

  • 构图不能太小 (让人觉得画面不够饱满，显得小气)；
  • 构图应注重重心平衡；
  • 构图应注意透视的变化及比例关系.

• 色彩的魅力

  • 色彩的冷暖：物体通过表面色彩给人温暖或凉爽的观感。
  • 色彩的轻重：质感与色感的复合感觉。
  • 色彩的前进性与后腿性：一般而言，暖色比冷色更富有前进的特性。

一个像素也是事儿

• 边缘像素 的完美方案：图标变虚问题 => 没有边缘对齐，故在矢量绘图当中，需要对齐边缘，对齐像素。
• 旋转像素 的完美方案：
  • 旋转中心点挪到任意定点，再旋转。
  • 若是旋转并缩放，建议先旋转再缩放。
• Ai 到 Ps 的完美粘贴
  • 1. Ai 里选 对齐像素网格；
  • 2. Ps 里建一个图标大小相同的 选区，再粘贴进来，粘贴时最好选择 形状图层，这样便于后期编辑。

国际化的图标设计

• 表现形式上符合全球化潮流的设计趋势。

  这里非常容易理解，例如地铁、高铁、机场的指示标志，还有厕所指示标志等。

• 动感：动效与交互的相交融。

• 质感：拟物、扁平和微质感，这里视具体情况而决定，如公司文化、应用受众、市场趋势等因素，总得来说，调研、分析工作是少不了环节。

界面细节提升

栅格系统

栅格系统，又称网格系统。主要以规则的网格阵列来指导和规范页面中的版面布局以及信息布局。当然，栅格系统也只是一种布局辅助工具，在实际项目中应灵活地根据需求在整体或布局合理应用，即综合 iOS 或 Android 的规范准则，总体把控每个元素与界面的协调感。

资源规范

• 切图

  • iOS：选择一这种的分辨率，即 @2x，750 x 1334 px，再输出 @3x，@4x。当然，你的设计稿是基于 矢量工具 绘制的。
  • Android：MDPI (160 DPI)，HDPI (240 DPI)，XHDPI (320 DPI), XXHDPI (480DPI)，或更多。

  1. 关于切图适配的问题，除了上述的原始办法外，现有很多插件、工具可帮你完成此项工作了。
  2. 一套切图尽可能适配 iOS 与 Android，即找准 @ 与 DPI 的大小关系即可。

  • 在标注文档中，可采用 物理像素单位 描述元素的大小、布局的位置和间距留白的大小。
    这样做的好处是，开发人员直接设置参数，设计人员按照切图的倍率输出切图 (@2x、@3x、@4x)。

  • 特别地，切图是以偶数倍放大的，便于缩放，设计元素的大小注意使用偶数单位即可。

  例如，标注的基准信息是 14.0 DP / @1x，适配对应尺寸的参数即有：
  XHDPI / @2x <=> 28px，XXHDPI / @3x <=> 42px，@4x <=> 56px。

• .9.PNG

  • 最外围的一圈像素，必须限定是 1px 大小，必须是纯黑色 #000000，任何参杂都不行。
  • 文件名后缀必须是 *.9.PNG。
  图 3-1 .9.PNG使用演示图

• 压缩切图：在 Photoshop 中，输出方式为 存储为 web 所用格式；在 Sketch 中使用 导出功能 导出图片；其他工具可自行查阅资料，这里就不一一列举了。

• 标注

  • 常用的标注软件：Markman、PxCook、Assistor PS。
  • 若公司、团队有规范的设计、开发手册，则请按照规范标准进行设计。
  • 拥有自己的一套标注文档 (迎合大众的，容易理解的)。

  对于一界面来说，图片、图标、框架、文字等元素，是必不可少的。若是为了更高程度的还原，那么详细的标注描述、文字说明、交互说明是必要的。在一般情况下，很多朋友为了便捷 (偷懒) 会在同一界面一次性把上述工作都堆积在一起完成，而这样带来的问题就是 糟糕的阅读体验。

  这里推崇一种做法 分页描述法。即：

  1. 第一页，描述界面布局的信息，如间距大小、背景颜色；
  2. 第二页，描述文字属性信息，如文字的字体、字号、颜色、布局；
  3. 第三页，描述组件属性信息，如按钮、小图标等；
  4. 第四页，描述界面的交互信息，按照需求，你还可以细分为每个组件的交互信息；
  5. 以此类推...

• 资源命名

  • 组件类型_模块_子功能_状态 或者 模块_组件类型_子功能_状态；

  例如：btn_setting_logout_n.png / setting_btn_logout_n.png

  • 下划线相连命名，如 ico_appicon_normal.png

• PSD 源文件

  • 以模块为单位，归类于不同文件夹中；
  • PSD 源文件中，有 分组分层 的习惯.

肆 开发实现

如何与产品、运营、开发配合

互联网产品的研发流程

• 需求来了：产品经理，负责需求的策划和整理，输出产品需求文档 (Product Requirement Document，PRD)。那么产品经理的需求来自哪：
  • 版本规划：从无到有策划一款产品，这些功能不是一次性开发的，而是分布在若干版本中。
  • 动态演变的产品：根据市场的反馈，调整后续的增量版本。
  • 细节的优化：注重用户体验的优化。
  • 适应丰富的使用场景。
• 需求要评审：方案需要和开发、设计、测试、运维人员一起评审。
• 开始设计
• 开始开发
• 测试把关

与各种角色融洽相处

可借助一些 协作平台 来规范研发流程，如需求的追加、任务分派、提交 BUG 等。相关人员通过日志、文档开展工作。

协作平台：Worktile 、 有道云协作 、 ProcessOn (在线绘图)

发布应用程序

• 灰度发布：在发布新版本时，仅针对少部分用户样本发布。灰度发布是一种常用的产品测试及质量管理工具。对于用户量大的产品，贸然发布一个新版本取代用户当前使用的版本，风险太大。因此互联网公司摸索出了一种工具，即灰度发布。

快速制作原型

快速原型的工具有很多，推荐几款制作工具：墨刀 、 Axure PR 、 Proto.io

伍 运营

运营的概述

运营的定义

在互联网中，针对不同群体推广产品，进行内容建议，并通过数据指标优化运营手段、产品功能与体验等行为。

• 运营三要素：产品、用户和渠道，如图 5-1 所示。

图 5-1 运营三要素

• 运营的目标：运营是以目标为导向，数据为基础的工作。一切工作都围绕着运营三要素来进行，即产品、用户和渠道。运营的目标如图 5-2 所示。

图 5-2 运营的目标

• 产品、运营、设计工作的关系：为了达到运营目标，运营经理需要与产品经理、设计师等配合工作，如图 5-3 所示，简单地描述了产品经理、运营经理和设计师的工作关系。

  图 5-3 产品、运营、设计工作关系图

运营工作内容及岗位

• 典型的产品生命周期：即每个阶段的运营重点都不同。图 5-4 展示了一款产品的生命周期。

  图 5-4 产品的生命周期

• 运营目标：可量化的指标

  • 拉新：为 APP 带来下载或注册，或微信公众号拉粉。
    常用手段有：搜索引擎优化，广告投放，渠道合作、社交媒体推广。
  • 留存：想办法留住用户。运营的方式为：优化产品内容机制；策划活动与用户互动。
  • 促活：
    • 促用户更高频使用产品，增加用户黏性。可用 等级设定、激励体系、积分制度 等增加长期活跃性。
    • 已流失的用户，通过 站内信、邮件、短信 等手段召回。
  • 营收：增加付费用户和提高付费用户的活跃度。

运营工作方法论

• 如何让运营手段更抓住人心，追根溯源就是研究人性，一款好的产品及运营，一定能迎合人性七宗罪中的其中之一。下述为 利用人性 的产品功能举例。
  • 色欲：美女直播、陌陌、基于 LBS (基于位置的服务) 的陌生人社交。
  • 虚荣：游戏装备。
  • 贪婪：双十一折扣、抽奖、送红包。
  • 懒惰：一键下单、二维码。
  • 窥探：无秘、悄悄关注。
  • 傲慢：吵架营销、粉丝大战。
• 数据化运营：基于数据的运营决策更可靠。
  • 产品数据
    • 用户注册：包括下载量、注册用户激活数、APP 打开数、新增注册数等；
    • 用户留存：留存率、使用留存、购买留存等；
    • 用户活跃：活跃用户数、注册活跃转化率、APP 启动数、访问频率、浏览时长等；
    • 营收数据：付费用户数、付费转化率、付费金额、付费频次等；
    • 功能数据：每日评论数、交互反馈次数 (收藏、分享、喜欢等功能)。
  • 用户数据：用户画像 (性别、职业、学历、年龄、地域、使用设备、操作系统、消费行为)。

活动运营

什么是活动运营

• 传统行业短期的活动促销，带来一定人气增长、销售额增加。
• 社交网络的病毒式传播，例如春晚微信摇红包、支付宝集五福等。

活动使用场景

• 常规活动：有针对性提高某一指标，或新功能推广。其活动形式有：签到、邀请好友、新用户福利。
• 节日：每个节日都有其自带的属性，利用节假日的情感共鸣。如表 5-1 所示。

<center>表 5-1 常见节日举例</center>

每个节日都有其自带属性，例如春节会想到春运，双十一想到打折促销、中秋节想到团圆等。

• 突发热点事件：极具话题性，短期爆发力强，能迅速传播。如表 5-2 列举了一些热点。

<center>表 5-2 热点举例</center>

例如，肌萎缩侧索硬化症引发的冰桶挑战，达到的效果有：微博话题阅读超 7 亿，捐款总额达 137 万元。

如何策划线上活动

策划线上活动共四阶段，即准备阶段、策划阶段、执行阶段和总结阶段。

• 准备阶段：活动前的准备

  • 活动需求：目的、人群、平台、机会点 (借势发挥，如世界杯)
  • 活动目的：量化为数据指标，核心目标为推广品牌、拉新用户、促进消费、提升用户活跃度。

• 策划阶段：活动方案策划

  • 明确活动的时间、内容、规范、文案、流程；
  • 确认奖品及协调推广资源；

  [注意] 策划方案时应：

  1. 流程简单，文案清晰；
  2. 吸引力，例如奖励等手段；
  3. 适时反馈，精神激励。例如动态显示参与人数、突出用户收益、获奖用户轮播。

• 执行阶段：活动上线后做好三点

  • 客服跟进：解决用户疑难，平息用户情绪。
  • 监控数据：随时调整，保证活动质量和预期。
  • 分布活动结果和活动善后 (不要让用户感到被欺骗)。

• 总结阶段

  • 用户参与情况和数据，用以判断是否达到目标。
  • 总结活动经验，提炼亮点和失误点，为下次活动做准备。

案例分析

以 “新浪微博愚人节刮奖” 活动为例。

• 活动类型：游戏
• 活动目标：提升用户活跃度
• 活动时间：愚人节，七天活动
• 目标人群及切入需求：针对老用户 -> 逐利心理
• 平台：手机
• 交互方式：模拟真实的刮奖操作
• 规则判定
  • 每天每个用户可参与 5 次 刮刮卡活动，第一次免费。
  • 完成某些指定任务可获得更多抽奖活动。
• 奖品设置
  • 根据预算控制奖品数量和中奖概率。
  • 头奖要吸引眼球，配合普通奖品，增加用户获奖信心。
• 文案与视觉设计
  • 标题醒目，规则明确，页面简洁。
  • 结合活动主题渲染气氛。
• 活动指标：参与人数，传播度 (分享数)，任务完成度，活动期间的活跃用户数。

H5 与 Banner 的设计

H5 表现形式

H5，即第五代 HTML，也泛指利用 HTML5 语言制作的页面。在开始设计前，先了解 H5 专题页的类型。

• 按功能形式分：如图 5-5 所示。

图 5-5 按功能形式分的 H5

• 按目标分：如图 5-6 所示。

图 5-6 按目标分的 H5

• 在确定了专题页的功能与目标后，接下来的设计阶段尤为关键。即可从用户角度出发，思考用户的分享动机 (共六种情况)。

  • 利益相关：有奖形式 促进用户分享。
  • 有所收获：通过传播内容，学习自己感兴趣的知识，或 自我提升。
  • 身份认同：内容使某一类型人产生身份认同和归属感。
  • 成就吸引：朋友间竞技，满足用户 炫耀心理需求。
  • 情感共鸣：情感共鸣，从而产生集体回忆的分享冲动。
  • 借助热点：借助 当前热点，吸引用户眼球。

• H5 页面表现形式

  • 展示型：支付宝十年账单、微信故事。
  • 互动型：只能招聘的职场神曲 DIY。
  • 产品型：微信公众号里的微商城，如京东。

Banner

投放于线上 (PC端、移动端) 的各种尺寸和形状的广告图。

• 设计流程
  • 了解目的，定义信息优先级；
  • 确定文案，确定设计方向；
  • 视觉设计排版，讨论修改.
• 搭配方式 => 输出 Banner
  • 内容专题：文案 + 主体物或文案 + 背景形式。P238
  • 电商：文案 + 主体物 + 背景形式。P239
  • 活动：文案 + 主体物 + 引导 Button + 背景 + 引导 Button 的形式。P240-241

陆 服务设计

概念

服务设计的定义

一种新兴领域，主要关注通过 有形、无形媒介的结合方式 形成细致考量过的 体验设计过程。它已经在实践中为各种传统下行业都带来了更优良的用户体验。

相关术语

本章节将围绕一个虚构的餐馆为例，姑且称他为 美食与爱。

• 服务提供者：除一般含义的服务人员外，还包括电子显示屏、按钮开关等实体。

  在 美食与爱 中，就包括侍应、收银员、厨师、后台系统等。

• 利益相关者：服务提供者所属的商业实体负责人。

  餐馆老板、门店经理、收银系统的服务商。

• 服务设计团队：除设计师外，还包括利益相关者、一些顾客等。

• 顾客：指服务提供者面向的用户、消费者等。

• 触点：顾客与服务提供者之间每个有接触点的点。

  门口排位服务员、侍应、菜单、桌椅。

• 服务周期：前期、中期和后期。

  以就餐为例：

  • 前期 顾客感到饥饿时，有人推荐或搜 美食与爱，前往餐馆就餐。
  • 中期 到门店后，需排位等待，收号入座，点菜，等就餐，就餐，结账。
  • 后期 离开餐馆，呼叫的士回家 / 公司。

五个原则

• 用户至上：应通过客户的视角出发来设计整套服务。

• 合作创新：设计师 (主持人)，利益相关者，服务提供人员，顾客。每种角色必须从自己视角出发提出想法。

• 先后顺序：服务是一般以 时间为序 的 动态 的过程，而每一 服务片段 类似电影中的帧一样，把服务结构成一个个 独立触点 和 交互行为。

• 有理有据：服务是无形的，需要用人工制品的形式“显示”出来，让其容易被感知。

  例如，酒店的清洁人员在客人不在时打扫卫生。

• 全局视觉：涉及的角色、触点众多，具备全局视觉，以统筹好各个环节。

设计流程

以下介绍服务设计的基本流程，即 探索 => 创造 => 反思 => 实施。

• 探索

  • 了解公司对于设计思维的态度，是否接受服务设计这样需要合作创新的设计流程。
  • 找服务设计要解决的本质问题 (问题往往是公司自身的，或是从公司角度提出的)。
  • 找出问题本质所在。

  从 潜在顾客 和 顾客 的角度出发，理解他们当时的处境以及做出对应行为背后的真实动机。

  • 设计师要把研究后的发现和现有服务流程可视化方法展现出来。

• 创造：产生解决方案的阶段

  • 服务设计的最大特点：鼓励各种试错，而不是避免出错。

  • 阶段任务：

    • 基于探索阶段发现的核心问题；
    • 基于顾客需求；
    • 基于服务提供者本身诉求等约束条件；
    • 基于用户旅程图的一系列的触点.

    设计新的方案，并不断加以迭代验证、优化方案。

• 反思：创新阶段产生新方案后，这个阶段要进行测试验证。

  • 产品原型 (人机交互 Demo / 实体产品小样)，找顾客或者专家进行测试评估，然后不断改进以达到预期目标。
  • 服务原型：通过 角色扮演 等 互动沉侵 的方式，让顾客与服务之间产生 真实的交互 以及 情感上的沟通。

• 实施：工具 -- 服务蓝图

工具箱

在 This is service design thinking [1] 中，列举了 24 种服务设计的工具，下述选择了其中三款常用工具进行阐述，即 影子跟随法、顾客旅程图、服务蓝图，若对此模块有兴趣可查阅原书学习。

影子跟随法

• 概念：研究人员或设计师把自己融入到顾客的，前后台人员的日常生活或工作中去，像 影子 一样跟着他们去观察他们一举一动。

  该方法可以真正做到从全局或者 上帝视觉 审视整个服务运作方式。

顾客旅程图

• 概念：用 顾客 与 服务 之间产生互动的一个个 触点 来构成用户完整旅程的 地图。即这个图是从顾客的视角表达出所有与服务之间互动的行为以及由于互动而产生的情感。

• 如何绘制顾客旅程图

  • 1. 需要找到顾客与服务之间所有互动的行为触点。
  • 2. 当所有行为触点找出后，按时序的方式进行罗列以形成完整的体验流程。
  • 3. 然后通过访谈或利用顾客自己的描述和记录，以顾客口吻表达出他们每个步骤的心理活动，对应某种情绪，打分以形成情绪曲线图。
  • 4. 分析旅程图中情绪分值较低部分 (尤其是 谷底 时)，找出问题所在，往往当中存在不错创新设计机会点。

  如图 6-1 所示，为餐馆就餐的典型顾客旅程图。

图 6-1 餐馆就餐的典型顾客旅程图

服务蓝图

服务蓝图，类似建筑设计的蓝图。

• 从全局的视觉详细地设计服务体系里包含的所有对象、交互、触点等的图形化语言。

• 该图包含多种角色：用户、服务提供者，涉及服务流程相关者，触点及后台流程。

• 服务蓝图绘制方法：

  • 首先按时序把 用户新的行为 (设计后的行为) 从左到右罗列出来。并从服务的前中后阶段 (如就餐前、就餐时、就餐后) 对其进行分类。
  • 在行为 上一行，列出用户行为所接触的物理触点或环境。
  • 在行为 下一行，列出用户交互的服务提供者。
  • 在行为 下两行，是后台服务提供者以及提供的支援流程。

  如图 6-2 所示，针对餐馆优化后的服务蓝图。

图 6-2 针对餐馆优化后的服务蓝图

参考资料

[1] Schneider, Jakob. This is service design thinking [M]. Canada: BIS Publishers, 2011
[2] 赵晋. 波士顿矩阵分析在实际案例中的运用[J]. 中国高新技术企业,2008,(8).
[3] 张镜天. 波士顿矩阵在酒类营销中的运用[J]. 中国酒业. 2006,(1).
[4] 上海质量科学研究院. 顾客满意的测量、分析与改进[M]. 中国标准出版社,2009.10.
[5] Kofe. 一个 APP 的诞生：以设计师角度造产品（读书笔记）[OL]. kofes.cn. 2018