032021-6

从零开始部署到上线：手把手教你搭建属于自己的个人博客网站！

现在是互联网逐渐发展，已经出现了很多可以供自己写博客的网站，大家可以在上面发表自己的文章，供自己记录或者是供他人阅读。但是，可不可以自己搭建一个只属于自己的个人博客网站呢？这篇文章就带你从0开始搭建一个自己的个人博客网站，并部署到属于自己服务器。这里有一点要说的是，没有服务器的同学使用自己机器的linux系统也是一样的操作。我们选用一个很好用的博客框架Hexo进行搭建我们的个人博客。

博客框架Hexo介绍：

Hexo是一个快速，简介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成一个静态网页展示我们发布的文章，同时也提供了大量精美的博客主题供我们使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUkzFJqh-1622032930743)(pictures/image-20210524011732509.png)]

Hexo博客框架的优点

速度极快：Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
插件和可扩展性：这个也是hexo很强大的一个地方，强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

Hexo博客框架搭建：

我们使用Centos7系统作为演示，使用其他linux系统也是可以的，只需要更换为对应Linux版本的软件安装命令即可。

1.安装Git

直接使用yum安装即可，在命令行输入 yum -y install git

完成之后输入git version 查看是否安装成功，如果显示git版本信息即为成功，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVJMnq6W-1622032930745)(pictures/image-20210526142911469.png)]

2.安装Node.js

Node.js是一种运行在服务端的JavaScript，是一个基于Chrome JavaScript运行时建立的一个平台。

Hexo基于Node.js，所以安装Node.js是必须的一个操作，安装步骤如下：

2.1：下载安装包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    
        1

2.2：解压缩软件包并配置环境变量：

#解压 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移动到/usl/lcoal目录下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #创建软链接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加环境变量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #让环境变量生效  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

2.3：测试是否安装成功：

在命令行输入node -v 和 npm -v，若是显示出了版本号，即为安装成功：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47pt856h-1622032930748)(pictures/image-20210526143600103.png)]

3.安装并使用Hexo

Hexo的安装较为简单，使用如下命令安装

npm install -g hexo-cli #这里有一点要注意的就是，npm的源是在国外的，访问可能会很慢，这里可以换成我们国内的源进行安装加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    
        1
    

    
        2
    

    
        3

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEjeb2E6-1622032930750)(pictures/image-20210526143826327.png)]

3.1：初始化Hexo

上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化

#这个文件名字可以自己指定，之后会在当前目录下生成对应文件夹 hexo init <文件名字> cd 文件名字 npm install  


    
        1
    

    
        2
    

    
        3
    

    
        4

可以看到安装好之后的一个目录结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raE9WJQX-1622032930751)(pictures/image-20210526144057199.png)]

目录文件说明：

_config.yml：网站的配置信息，您可以在此配置大部分的参数。

package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds：模版文件夹。当您新建文章时Hexo 会根据 scaffold 来建立文件Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes：主题文件夹。Hexo 会根据主题来生成静态页面。

查看hexo的版本以及对应的数据：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1B3aWxn9-1622032930752)(pictures/image-20210526144143747.png)]

3.2生成静态文件，并开启Hexo服务：

进入到了hexo的安装目录之后，使用hexo generate来生成静态文件，也可以使用hexo g，之后使用hexo server（可以写成hexo s）命令启动服务，操作如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YuvIWOuI-1622032930753)(pictures/image-20210526144957135.png)]

可以看到4000端口的服务已经开启，之后在你的浏览器输入http://<你的linux机器的ip地址或者服务器公网地址>:4000,如下可以看到最开始的一个界面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w9ELcFFg-1622032930753)(pictures/image-20210526145217729.png)]

4.初步使用Hexo：

使用前，我们对我们的站点进行一个配置，也就是我们创建的hexo目录的_config.yml文件，可以修改的部分介绍如下：

# Site
title: QIMING.INFO #博客网站的标题
subtitle:          #博客网站的副标题
description:       #你的网站描述
keywords:          #网站的关键词  
author:            #作者的名字
language:          #博客网站使用的语言
timezone:          #网站时区  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

我自己的修改如下供大家参考，这里的修改没有太大的限制：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0cTYgQ1-1622032930754)(pictures/image-20210526145734893.png)]

4.1：开始使用Hexo发布自己的第一篇博客！

执行下面的目录创建一篇新文章：

hexo new post <文章标题>  


    
        1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

这里我创建了一篇标题为First_Blog的博客，创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件

4.2:编辑文章

进入到上面说的那个目录下可以看到我们创建的博客文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cuPREJLQ-1622032930756)(pictures/image-20210526150208204.png)]

直接使用vim或者vi就可以对我们的博客文章进行编辑了，打开此First_Blog.md后可以看到—分隔的区域，这部分主要对文章进行标注变量，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GOYKjBSu-1622032930756)(pictures/image-20210526150326264.png)]

title：标题

tage：标签

categories：分类

date：时间

这些标注大家在-----区域可以进行使用

4.3：发布文章

输入如下命令，生成静态网页，静态网页会存放在public文件下

之后就可以去浏览器访问了！可以看到我们发布的文章已经成功在浏览器显示，到这里个人博客网站就已经成功搭建了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZpSg9fl-1622032930757)(pictures/image-20210526150824449.png)]

5.主题的选择：

主题网站：https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择，选择喜欢的主题，在hexo目录下的themes文件夹下使用git clone下载主题，之后再配置文件_config.yml把theme后面修改成下载的主题的名字，之后运行hexo clean ，hexo g即可看到生效的主题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eN5cZDmN-1622032930757)(pictures/image-20210526161641366.png)]

将Hexo部署上线到服务器：

如果是有服务器的小伙伴，也可以将Hexo部署到服务器供全网访问，服务器的购买这里就不多说，阿里云跟腾讯云上面对于学生也有较为优惠的价格。部署到服务器的话，就需要将上面的全部操作，在你的服务器系统上面执行，之后我们使用Nginx（反向代理服务器）进行部署。

Nginx安装：

Nginx是一款高性能的 HTTP 和反向代理服务器，这里我们采用编译安装的方式,按照下面的指引依次执行命令

#安装gcc编译环境： yum install -y gcc-c++ #安装zlib-devel库： yum install -y zlib-devel #安装OpenSSL密码库： yum install -y openssl openssl-devel #安装pcre正则表达式库：编译nginx，需要需要指定pcre的路径，这里我们选择安装稳定版本的。 下载地址：https://ftp.pcre.org/pub/pcre/ #选择对应的版本下载下来之后上传到我们的服务器，也可以使用wget直接下载 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

下载编译安装nginx：

nginx下载官网：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #编译指定安装路径需要进入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  这是支持https的一个模块，就是可以使用https：//这样去访问。 make && make install #编译安装  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

启动nginx服务：

#启动： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式启动  -c #测试： /usr/local/nginx/sbin/nginx -t #这个用于测试nginx的语法是否有问题 显示is successful即为成功。 #关闭： /usr/local/nginx/sbin/nginx -s stop #继续输入以下命令使Nginx开机自动启动： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

之后我们需要配置服务器公网ip，编辑配置文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TOR7RVwA-1622032930758)(pictures/image-20210526174027780.png)]

之后再重启nginx服务，开启hexo服务，这个时候使用公网的ip就可以访问到我们的hexo服务了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

部分借鉴自：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2180)

032021-6

都2021年了，再不学ES6你就out了 —— 一文搞懂ES6

前端达人

JS干货分享 —— 一文搞懂ES6

导语：ES6是什么？用来做什么？

导语：ES6是什么？用来做什么？

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版
虽然15年就有正式版本了，但是国内普遍商用是在2018年之后去了，甚至到现在有很多前端仍然搞不懂ES6（都2021年了，兄dei~）
ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念
目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6
ES6提供了大量的语法糖，让你写代码的时候简直不要太爽！
你必须要知道的是：现在各企业都普遍使用，不会ES6意味着你很难找到工作，上班了你连别人的代码都看不懂

1. let 与 const

1.1 let 与 var

let：ES6新增，用于声明变量，有块级作用域
var：ES5中用于声明变量的关键字，存在各种问题（例如：红杏出墙~）
如果你的代码里还存在 var，那你的良心就大大的坏了！

var存在的问题：

 // 1.声明提升 // 此处会正常打印，但这是错误的（属于先上车后买票了！） console.log(name); var name = "大帅比"; // 2. 变量覆盖 var demo = "小明"; var demo = "小红"; // 此处会打印小红，这也是错误的（属于套牌车，违法的啊，兄弟） // 同一个项目中，发生变量覆盖可能会导致数据丢失以及各种不可预知的bug，原则上来说：变量不能重名 console.log(demo) // 3. 没有块级作用域 function fn2(){ for(var i = 0; i < 5; i++){ // do something } // 此处会正常打印出 i 的值，这是错误的 // i是定义在循环体之内的，只能在循环体内打印，当前现象叫做红杏出墙！！！ console.log(i); } fn2(); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22

let不会存在上述问题：

 // 1. 不会存在声明提前 // 此处会报错（这里必须报错，原则上来说不能先上车后买票） console.log(name); let name = "大帅比"; // 2. 不会有变量覆盖 let demo = "小明"; let demo = "小红"; // 此处会报错（不能使用套牌车！）告诉你已经定义了此变量。避免了项目中存在变量覆盖的问题 console.log(demo) // 3. 有块级作用域 function fn2(){ for(let i = 0; i < 5; i++){ // do something } // 此处会报错，无法打印，防止红杏出墙！！！ // i是定义在循环体之内的，循环体外当然无法打印  console.log(i); } fn2(); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21

const

const 声明一个只读的常量，一旦声明，常量的值就不能改变
一般用于全局变量
通常变量名全部大写（请按照规则来，不要乱搞，容易出事情）

const PI = "3.1415926"; 


    
        1

2. 解构赋值

解构赋值是对赋值运算符的扩展
针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
代码简洁且易读，语义更加清晰明了，方便了复杂对象中数据字段获取（简而言之：用起来很爽！）

在这里插入图片描述

2.1 用在数组上

let [a, b, c] = [1, 2, 3]; // a = 1，b = 2，c = 3 相当于重新定义了变量a,b,c，取值也更加方便 // , = 占位符 let arr = ["小明", "小花", "小鱼", "小猪"]; let [,,one] = arr; // 这里会取到小鱼 // 解构整个数组 let strArr = [...arr]; // 得到整个数组 console.log(strArr); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

2.2 用在对象上

let obj = { className : "卡西诺", age: 18 } let {className} = obj; // 得到卡西诺 let {age} = obj; // 得到18 // 剩余运算符 let {a, b, ...demo} = {a: 1, b: 2, c: 3, d: 4}; // a = 1 // b = 2 // demo = {c: 3, d: 4} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

3. 模板字符串

模板字符串相当于加强版的字符串，用反引号 ``
除了作为普通字符串，还可以用来定义多行字符串，可以在字符串中加入变量和表达式

3.1 普通字符串

// 普通字符串 let string = "hello"+"小兄弟"; // hello小兄弟 // 如果想要换行 let string = "hello'\n'小兄弟" // hello // 小兄弟 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

3.2 模板字符串

let str1 = "穿堂而过的"; let str2 = "风"; // 模板字符串 let newStr = `我是${str1}${str2}`; // 我是穿堂而过的风 console.log(newStr) // 字符串中调用方法 function fn3(){ return "帅的不行！"; } let string2= `我真是${fn3 ()}`; console.log(string2); // 我真是帅的不行！ 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

4. ES6 函数（升级后更爽）

4.1 箭头函数

箭头函数是一种更加简洁的函数书写方式
箭头函数本身没有作用域（无this）
箭头函数的this指向上一层，上下文决定其this
基本语法：参数 => 函数体

a. 基本用法

let fn = v => v;
//等价于
let fn = function(num){
 return num;
}
fn(100);  // 输出100 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

b. 带参数的写法

let fn2 = (num1,num2) => {
 let result = num1 + num2;
 return result;
}
fn2(3,2);  // 输出5 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

c. 箭头函数中的this指向问题

箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。在函数定义的时候就已经决定了

function fn3(){
  setTimeout(()=>{
    // 定义时，this 绑定的是 fn3 中的 this 对象
    console.log(this.a);
  },0)
}
var a = 10;
// fn3 的 this 对象为 {a: 10}，因为它指向全局: window.a
fn3.call({a: 18});  // 改变this指向，此时 a = 18 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

d. 箭头函数适用的场景

当我们代码里存在这样的代码：let self = this;
需要新建变量去保存this的时候
案例如下：

let Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

4.2 函数参数的扩展

1. 默认参数

// num为默认参数，如果不传，则默认为10 function fn(type, num=10){ console.log(type, num); } fn(1); // 打印 1，10 fn(1,2); // 打印 1，2 （此值会覆盖默认参数10） 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

需要注意的是：只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。

2. 不定参数

// 此处的values是不定的，且无论你传多少个 function f(...values){ console.log(values.length); } f(1,2); // 2 f(1,2,3,4); // 4 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

在这里插入图片描述

5. Class类

class (类)作为对象的模板被引入，可以通过 class 关键字定义类
class 的本质是 function，同样可以看成一个块
可以看作一个语法糖，让对象原型的写法更加清晰
更加标准的面向对象编程语法

5.1 类的定义

// 匿名类 let Demo = class { constructor(a) { this.a = a; } } // 命名类 let Demo = class Demo { constructor(a) { this.a = a; } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

5.2 类的声明

class Demo { constructor(a) { this.a = a; } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

请注意，类不能重复声明
类定义不会被提升，必须在访问前对类进行定义，否则就会报错。
类中方法不需要 function 关键字。
方法间不能加分号

5.3 类的主体

公共属性（依然可以定义在原型上）

class Demo{} Demo.prototype.a = 2; 


    
        1
    

    
        2

实例属性

class Demo { a = 2; constructor () { console.log(this.a); } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

方法：constructor

class Demo{ constructor(){ console.log('我是构造器'); } } new Demo(); // 我是构造器 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

如果不写constructor，也会默认添加

5.4 实例化对象

class Demo { constructor(a, b) { this.a = a; this.b = b; console.log('Demo'); } sum() { return this.a + this.b; } } let demo1 = new Demo(2, 1); let demo2 = new Demo(3, 1); // 两者原型链是相等的 console.log(demo1._proto_ == demo2._proto_); // true demo1._proto_.sub = function() { return this.a - this.b; } console.log(demo1.sub()); // 1 console.log(demo2.sub()); // 2 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20

6. Map()

6.1 Maps 和 Objects 的区别

一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值
Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是
Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算

6.2 Map中的key

// 1. key是字符串 let myMap = new Map(); let keyString = "string"; myMap.set(keyString, "和键'string'关联的值"); // keyString === 'string' myMap.get(keyString); // "和键'string'关联的值" myMap.get("string"); // "和键'string'关联的值" // 2.key是对象 let myMap = new Map(); let keyObj = {}, myMap.set(keyObj, "和键 keyObj 关联的值"); myMap.get(keyObj); // "和键 keyObj 关联的值" myMap.get({}); // undefined, 因为 keyObj !== {} // 3. key也可以是函数或者NaN  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19

6.3 Map 的迭代

// 1.使用 forEach let myMap = new Map(); myMap.set(0, "zero"); myMap.set(1, "one"); // 0 = zero , 1 = one myMap.forEach(function(value, key) { console.log(key + " = " + value); }, myMap) // 2. 也可以使用 for...of 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

6.4 Map 与 Array的转换

letkvArray = [["key1", "value1"], ["key2", "value2"]]; // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象 let myMap = new Map(kvArray); // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组 let outArray = Array.from(myMap); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

6.5 关于map的重点面试题

请谈一下 Map和ForEach 的区别（问到map，必定问到此题）

详细解析：

forEach()方法不会返回执行结果，而是undefined
map()方法会得到一个新的数组并返回
同样的一组数组，map()的执行速度优于 forEach()（map() 底层做了深度优化）

性质决定了两者应用场景的不同

forEach() 适合于你并不打算改变数据的时候，而只是想用数据做一些事情（比如存入数据库）

let arr = ['a', 'b', 'c', 'd']; arr.forEach((val) => { console.log(val); // 依次打印出 a,b,c,d }); 


    
        1
    

    
        2
    

    
        3
    

    
        4

map() 适用于你要改变数据值的时候，它更快，而且返回一个新的数组

let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(num => num * 2).filter(num => num > 5); // arr2 = [6, 8, 10]

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。


    
        


    
    
        

    
    
        部分借鉴自：csdn  
    
    
        分享此文一切功德，皆悉回向给文章原作者及众读者.
    

    
        免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
    

    
        蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2203)

032021-6

app界面赏析+图标分享 ——— 北京蓝蓝设计移动端UI设计资源分享（二十六）

前端达人

App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。

摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。

接下来为大家分享精美的app UI设计案例：

--手机appUI设计--

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

更多精彩文章：

评论(0) 浏览(2482)

032021-6

网站推广方式有：1、搜索引擎推广；2、电子邮件推广； 3、资源合作推广；4、信息发布推广；5、病毒性营销，即利用用户之间的主动传播，让信息像病毒那样扩散，从而达到推广的目的；6、快捷网址推广；7、网络广告推广；8、综合网站推广。

本文操作环境：Windows7系统，Dell G3电脑。

网站推广的八种基本方式

1、搜索引擎推广

搜索引擎推广是指利用搜索引擎、分类目录等具有在线检索信息功能的网络工具进行网站推广的方法。由于搜索引擎的基本形式可以分为网络蜘蛛型搜索引擎（简称搜索引擎）和基于人工分类目录的搜索引擎（简称分类目录），因此搜索引擎推广的形式也相应地有基于搜索引擎的方法和基于分类目录的方法，前者包括搜索引擎优化、关键词广告、竞价排名、固定排名、基于内容定位的广告等多种形式，而后者则主要是在分类目录合适的类别中进行网站登录。随着搜索引擎形式的进一步发展变化，也出现了其他一些形式的搜索引擎，不过大都是以这两种形式为基础。

搜索引擎推广的方法又可以分为多种不同的形式，常见的有：登录免费分类目录、登录付费分类目录、搜索引擎优化、关键词广告、关键词竞价排名、网页内容定位广告等。

从目前的发展趋势来看，搜索引擎在网络营销中的地位依然重要，并且受到越来越多企业的认可，搜索引擎营销的方式也在不断发展演变，因此应根据环境的变化选择搜索引擎营销的合适方式。

2、电子邮件推广

以电子邮件为主要的网站推广手段，常用的方法包括电子刊物、会员通讯、专业服务商的电子邮件广告等。

基于用户许可的Email营销与滥发邮件（Spam）不同，许可营销比传统的推广方式或未经许可的Email营销具有明显的优势，比如可以减少广告对用户的滋扰、增加潜在客户定位的准确度、增强与客户的关系、提高品牌忠诚度等。根据许可Email营销所应用的用户电子邮件地址资源的所有形式，可以分为内部列表Email营销和外部列表Email营销，或简称内部列表和外部列表。内部列表也就是通常所说的邮件列表，是利用网站的注册用户资料开展Email营销的方式，常见的形式如新闻邮件、会员通讯、电子刊物等。外部列表Email营销则是利用专业服务商的用户电子邮件地址来开展Email营销，也就是电子邮件广告的形式向服务商的用户发送信息。许可Email营销是网络营销方法体系中相对独立的一种，既可以与其他网络营销方法相结合，也可以独立应用。

3、资源合作推广

通过网站交换链接、交换广告、内容合作、用户资源合作等方式，在具有类似目标网站之间实现互相推广的目的，其中最常用的资源合作方式为网站链接策略，利用合作伙伴之间网站访问量资源合作互为推广。

每个企业网站均可以拥有自己的资源，这种资源可以表现为一定的访问量、注册用户信息、有价值的内容和功能、网络广告空间等，利用网站的资源与合作伙伴开展合作，实现资源共享，共同扩大收益的目的。在这些资源合作形式中，交换链接是最简单的一种合作方式，调查表明也是新网站推广的有效方式之一。交换链接或称互惠链接，是具有一定互补优势的网站之间的简单合作形式，即分别在自己的网站上放置对方网站的LOGO或网站名称并设置对方网站的超级链接，使得用户可以从合作网站中发现自己的网站，达到互相推广的目。交换链接的作用主要表现在几个方面：获得访问量、增加用户浏览时的印象、在搜索引擎排名中增加优势、通过合作网站的推荐增加访问者的可信度等。交换链接还有比是否可以取得直接效果更深一层的意义，一般来说，每个网站都倾向于链接价值高的其他网站，因此获得其他网站的链接也就意味着获得了于合作伙伴和一个领域内同类网站的认可。

4、信息发布推广

将有关的网站推广信息发布在其他潜在用户可能访问的网站上，利用用户在这些网站获取信息的机会实现网站推广的目的，适用于这些信息发布的网站包括在线黄页、分类广告、论坛、博客网站、供求信息平台、行业网站等。信息发布是免费网站推广的常用方法之一，尤其在互联网发展早期，网上信息量相对较少时，往往通过信息发布的方式即可取得满意的效果，不过随着网上信息量爆炸式的增长，这种依靠免费信息发布的方式所能发挥的作用日益降低，同时由于更多更加有效的网站推广方法的出现，信息发布在网站推广的常用方法中的重要程度也有明显的下降，因此依靠大量发送免费信息的方式已经没有太大价值，不过一些针对性、专业性的信息仍然可以引起人们极大的关注，尤其当这些信息发布在相关性比较高。

5、病毒性营销

病毒性营销方法并非传播病毒，而是利用用户之间的主动传播，让信息像病毒那样扩散，从而达到推广的目的，病毒性营销方法实质上是在为用户提供有价值的免费服务的同时，附加上一定的推广信息，常用的工具包括免费电子书、免费软件、免费FLASH作品、免费贺卡、免费邮箱、免费即时聊天工具等可以为用户获取信息、使用网络服务、娱乐等带来方便的工具和内容。如果应用得当，这种病毒性营销手段往往可以以极低的代价取得非常显著的效果。关于病毒性营销的详细介绍及案例分子请参考本文作者的《网络营销基础与实践》第2版(http://www.wm23.com)一书相关内容，网上营销新观察《120种网站推广实用方法》系列连载文章中也会有适当介绍。

6、快捷网址推广

即合理利用网络实名、通用网址以及其他类似的关键词网站快捷访问方式来实现网站推广的方法。快捷网址使用自然语言和网站URL建立其对应关系，这对于习惯于使用中文的用户来说，提供了极大的方便，用户只需输入比英文网址要更加容易记忆的快捷网址就可以访问网站，用自己的母语或者其他简单的词汇为网站“更换”一个更好记忆、更容易体现品牌形象的网址，例如选择企业名称或者商标、主要产品名称等作为中文网址，这样可以大大弥补英文网址不便于宣传的缺陷，因为在网址推广方面有一定的价值。随着企业注册快捷网址数量的增加，这些快捷网址用户数据可也相当于一个搜索引擎，这样，当用户利用某个关键词检索时，即使与某网站注册的中文网址并不一致，同样存在被用户发现的机会。

7、网络广告推广

网络广告是常用的网络营销策略之一，在网络品牌、产品促销、网站推广等方面均有明显作用。网络广告的常见形式包括：BANNER广告、关键词广告、分类广告、赞助式广告、Email广告等。BANNER广告所依托的媒体是网页、关键词广告属于搜索引擎营销的一种形式，Email广告则是许可Email营销的一种，可见网络广告本身并不能独立存在，需要与各种网络工具相结合才能实现信息传递的功能，因此也可以认为，网络广告存在于各种网络营销工具中，只是具体的表现形式不同。将网络广告用户网站推广，具有可选择网络媒体范围广、形式多样、适用性强、投放及时等优点，适合于网站发布初期及运营期的任何阶段。

8、综合网站推广

除了前面介绍的常用网站推广方法之外，还有许多专用性、临时性的网站推广方法，如有奖竞猜、在线优惠卷、有奖调查、针对在线购物网站推广的比较购物和购物搜索引擎等，有些甚至采用建立一个辅助网站进行推广。有些网站推广方法可能别出心裁，有些网站则可能采用有一定强迫性的方式来达到推广的目的，例如修改用户浏览器默认首页设置、自动加入收藏夹，甚至在用户电脑上安装病毒程序等，真正值得推广的是合理的、文明的网站推广方法，应拒绝和反对带有强制性、破坏性的网站推广手段。

文章来源：中文网

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计  、包装设计、图标定制、用户体验、交互设计、网站建设  、平面设计服务

评论(0) 浏览(2192)

032021-6

新站如何提高网站权重

lanlanwork

新站提高网站权重的方法：1、增加高质量外链；2、提高原创文章的质量；3、在权重较高的网站发布外链；4、降低导出链接；5、将首页的权重引导至比较重要的页面。

新网站如果没有权重的话就会很难获得排名，那么新站到底如何提高权重呢？

我们可以从两点来看：增加权重和降低权重的流失。

1.增加新网站权重

a.增加高质量外链

在绿萝算法的打击下高质量外链是很难发的，不过一旦找到高质量的外链那么效果也是十分明显的，优质外链的质量参数中讲解到高质量外链的几个特点，可以作为参考。

b.提高原创文章的质量

一个新的网站前期最好不要去采集大量文章来填充网站内容，新的网站应该有一些有价值并且互联网上少有的内容，搜索引擎喜欢新鲜的东西，喜欢不停的抓取新鲜内容的过程，持续的增加搜索引擎喜欢的内容自然会给你提高权重。

c.社会化媒体

社会化媒体对seo的影响会越来越大，特别是微博。我们可以将网站发布到微博里与粉丝互动，或者引导大家搜索我们的品牌词，或者发布网址链接。

2.降低权重的流失

a.降低导出链接

每个网站都必不可少的有导出链接，我们虽然不能避免，但是尽可能少的降低导出外链的数量。关键时刻可以用nofollow去降低权重的传递。

b.一个网站首页的权重往往是最高的。我们可以把首页的权重适当的引导至比较重要的页面以提高内页的权重。

以上是新站提高网站权重的方法，大家可以适当的使用千万不要使用过度。

文章来源：中文网

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计  、包装设计、图标定制、用户体验、交互设计、网站建设  、平面设计服务

评论(0) 浏览(2068)

032021-6

让价值被发现：如何在 B 端做增长

涛涛

增长设计是时下的热门话题，越来越多的企业开始关注增长设计，成立独立的增长部门。在蚂蚁体验技术部，我们除了做好体验设计的「老本行」外，也在往增长的方向探索。在现有的增长理论指导下，我们结合自身业务，边落地实践，边沉淀总结。以下是我们的一些小心得。

本文会讲述我们是如何利用增长大图梳理产品各个环节，以及如何用定量的用户行为数据漏斗，和定性的痛点比重数据，综合分析，去找到机会点。辅以在 Kitchen 和语雀中的增长实践案例说明。在增长一块，我们还处于初步探索阶段，若有不成熟的地方，欢迎大家一起讨论。

为什么要关注增长？

说到增长，过去 10 几年是中国互联网高速增长的阶段，但近 2-3 年来，随着人口、流量、资本的红利衰退，越来越多企业开始关注增长。典型的是，2017 年可口可乐宣布取消 CMO（首席营销官），由 CGO（首席增长官）替代，之后各种增长类职位相继涌出。

（来源：CNNIC 中国互联网网络发展状况统计调查，每年互联网网民用户数）

什么是增长？

增长是建立在用户基础上的，用户产生需求，需求又衍生出产品，产品之上才可能有增长。所以我们理解：产品在创造价值，而增长其实是传递价值，让价值被发现。只有让更多的用户，最大限度地体验产品的核心价值，才可能迅速扩张以及有效地变现。它有几个特点：

1.首先他是关注用户全生命周期，不仅仅是获客、变现。还需要关注怎么激活用户，让用户用起来，留存下来，传播出去

2.另外，增长不是一个单打独斗的独行侠，而是体系化的，以团队共创聚焦的方式来推动增长

3.强调数据和实验：从数据分析中洞察，提出假设，循环实验的过程

（增长过程是价值的传递过程）

什么产品适合做增长？

那什么样的产品适合做增长？我们所做的 To B 产品适不适合做增长？

首先看下 To B 和 To C 的差异：To B 产品，多数是群体决策，决策链路复杂，买的人不一定是用的人，如果是客单价较高的话，基本靠销售关系驱动购买，但像具有 C 类属性的产品，因为是个人消费场景，单一决策购买，就像平时大家在淘宝买东西一样，随心所欲。那运用增长策略去推动转化，能节约很大的获客成本，可见增长更适用于 C类属性的产品。

但经过大半年的实践，并且和其他增长团队交流，我们发现虽然 To B 增长很难，但在 SMB（中小企业）的增长很有机会。SMB 中小企业，有可能是 2-3 人组成的小团队，这类企业的客户和用户通常是同一类人，我们理解这也具有 To C 属性。并且中小企业数量多，实验数据也有保障。

一句话总结：To SMB 中小企业客群的产品可以做增长。

（面向中小企业客群的产品可以做增长）

那具体怎么做呢？结合我们自身经验，给大家分享 1 张增长大图，2 个实践案例。

增长大图

增长大图是基于 AARRR 模型，在用户旅程图的基础上进化得来。为什么不用用户旅程图，而用增长大图呢？用户旅程图主要通过情绪曲线来体现问题的严重性，但在使用上也存在难以量化的问题。

所以在增长大图上，我们选择定量的用户行为数据漏斗来取代情绪值。漏斗其实是对一个流程和路径的分析，目的是定位出问题的关键所在，这样才能对症下药。但定量数据通常只会告诉我们是什么，而定性数据能告诉我们为什么？

所以，我们还建议梳理用户调研中的定性数据，按流程、阶段、产品模块、问题类型等维度归类，通过痛点比重公式，算出每个维度痛点比重的百分比，去综合分析，找到机会点。另外，增长大图还可以记录从业务总目标拆解增长目标的过程，以及实验的策略、方案、指标结果，所以增长大图也是一份连接战略和执行，不断更新的「活文档」。

公式：痛点比重= [每个阶段的问题数 / 问题总数 ] X100%

那怎么用呢？当你确定某个项目可以做增长时，最关键是邀请不同角色的 Key Person，包括 PD、技术、运营共创去搭建增长大图。

从业务总目标出发拆解增长目标，然后将定量和定性数据梳理到大图上，找出机会点，从而确定聚焦领域，开始增长实验。想想就像大家在吃自助餐的过程，基本都是先看一遍有什么，再筛选一下，小份量的取餐尝试，最后再确定几样好吃的，重点吃。

小份量的取餐尝试，就等于增长实验的过程。分为 4 个步骤：

从定量和定性数据中分析洞察——不断的提出假设——然后排定优先级，进行实验——验证应用的过程。

接下来，分享两个我们在增长中做的小 Case。

案例一：1 块钱 6 周 Ant Design 设计工具 Kitchen 增长实践

Kitchen 是一款为设计者提升工作效率的 Sketch 工具集。先利用增长大图看下 Kitchen 的现状，我们捞取用户从访问——下载——安装——使用的数据漏斗，可以看出整体漏斗还是很不错的，整体留存率达到 40%。

然后我老板就说：「可以去做拉新增长，给你一块钱成本，去撬动一个地球吧。」其实，我当时就想给他一个白眼，现在一块钱能做什么？但反过来想想，这确实是增长很重要的一点：怎么用最小的成本去撬动最大的价值，找到最大的发力点。

基于当时的 DAU 数据现状，并初步讨论后，我们敲定 6 周 DAU 增长翻倍的目标。围绕这个目标，再进一步拆解为新增和留存，前面有提到留存率不错，所以我们这 6 周的增长聚焦在拉新上。那么拉新最重要是找到低成本的渠道运营。然后，我们脑爆了一些平时设计师会去的和我们可以切入的网站，虽然筛选了一些，但还是有很多，我们不可能全部去铺。在人有限、钱有限、时间有限的情况下，再回归我们的目标，需要找到最合适和低成本的渠道去运营。

所以基于 ICE 评分体系以及结合业务，我们做了局部调整，最终以渠道的「影响力」、「转化率」和「可行性」3 个维度进行打分，确定前 4 个打星标的渠道去做实验，这里主要分享下在 Ant Design 渠道上做的小实验。

在增长之前，我们已经在 Ant Design 首页投下过广告，通过数据发现转化率不足 0.2% ，后来我们分析 Ant Design 各个页面上的数据，从中发现一个有趣的现象，从招聘贴过来的用户竟然比首页过来的用户还多。

对比这两个入口，一个是首页，一个是很内页的文字链，比较偏僻的入口，位置是微不足道，但给 Kitchen 带来的用户却是首页的 10 倍。

我们又对比了他们之间的差别：首页虽然是比较大的位置，浏览量大，但用户普遍是大致浏览，看的欲望不强。而点击招聘页，通常是带着目的进来，所以这部分的用户是高欲望点击的。正所谓，欲望 - 摩擦 = 转化，为了提升转化，要么提升客户的欲望（Desire) ，要么减少摩擦（Friction)，往往消除摩擦要比提升客户欲望更简单。所以让用户有欲望进行来时，我们把摩擦尽量减少，则可以带来更大的转化。

（高欲望、低摩擦带来高转化）

所以我们就提出了一个大胆的假设：如果我们在用户点击欲望更强，关注度更高，浏览量更高的页面，并且和 Kitchen 功能相关的页面上增加引导，这个引流的效果可能会更好。因此开始了我们的实验，首先分析 Ant Design 浏览量最高的前 20 的页面，从中筛选出和 Kitchen 功能相关的页面。

在相关功能页面下，增加一个叫设计师专属的模块。在不同功能的页面下，加入了不同的引导文案，去吸引设计师点击。比如 Table 这个组件，我们加入的引导文案是：安装 Kitchen Sketch 插件，两步就可以自动生成 Ant Design 表格组件。（甚至连在文案前加 emoji 、文案后加或不加 emoji ，我们都尝试做了实验）

Ant Design 的用户有一半是设计师，那么当设计师进入到该页面，并且也想使用 Table 这个组件时，就可以减少用户的摩擦，增加转化。

1 个月后我们发现：对比首页，在功能页上的引流效果更好，也说明这次试验是成功的。通过 Ant Design 渠道过来的访问量，总体提升 2460%。并且这个影响是长久性的。

在同一时间，获得实验成功后，我们继续在不同的渠道尝试了不同的增长实验。6 周后，DAU 整体提升 42%，虽然6周的目标没有达成 100%，但最关键是不断试验的过程。

更详细的案例实践请查看：https://zhuanlan.zhihu.com/p/68707241

案例二：语雀用户增长实践

语雀，是蚂蚁金服孵化的一款知识协同产品。在蚂蚁、阿里内部，大家都是用语雀来管理自己的办公文档与个人笔记，是十万阿里人都在使用的笔记与文档知识库。当然，语雀不仅在阿里内部使用，对外，语雀也服务外部企业和个人用户，所以没有使用过的同学欢迎大家来试试：

https://link.zhihu.com/?target=https%3A//www.yuque.com/yuque/help

作为文档管理工具，「写」是其中的关键环节。因此，语雀将「注册后写一篇文档」作为用户的激活动作，此次增长实践的目标，就是提升新用户的激活率。

同样利用增长大图先梳理新用户注册激活的流程，从数据漏斗中我们可以看到，从注册登录后，到激活的转化率是非常低的，这是我们的一个机会点。

由此我们也去做了一轮用户调研，从调研结果来看，许多用户在注册后其实不知道「语雀能拿来干啥」「能怎么样解决我的问题」。具体反映在用户的操作和困惑上是：一是引导太弱不知道怎么开始写一篇文档，二是概念抽象令人费解，三是整个激活流程冗长容易失去耐心。这里边其实有比较大的提升空间，那我们能不能通过一些实验去提升转化率呢？

首先分析原有方案的问题

这是我们老的引导方案，用户注册完成后，默认会进入到他的个人页面，语雀默认为用户创建一个空的默认知识库。

现在回顾这个页面，也难怪用户会说不知道语雀能拿来干什么了。

首先，场景引导弱。每天不同用户带着各自的场景和问题，来到语雀，有希望做办公文档协同的，有希望做读书笔记的，有希望写专栏博客的。面对这形形色色的需求，语雀只提供了一个空的「默认知识库」，余下的便留给用户自行探索，也难怪用户会感觉无从下手。

此外，像「知识库」等概念，对于小白来说，其实非常抽象，难以理解。而且在此页面中还有像「关注了」「关注者」等与创作关系不太大的干扰信息。这些东西，都会阻碍用户激活，需要优化。

针对上述问题，团队同学经过讨论，提出假设：我们是否可以通过场景化引导的方式，来提升整个激活率呢？

所谓场景化引导，就是通过语雀产品定位以及用户实际使用情况，提炼出最典型的场景模板，打包出样板间。用户带着场景与问题来到语雀，语雀带着相应的解决方案去迎接用户，如此一来，需求和方案就能很好的匹配上，「语雀能用来干什么」的问题自然迎刃而解。

与此同时，新方案将「知识库」等很难理解的概念通过场景化包装，变成「笔记本」「攻略书」等更具像化的东西，用户不再需要上来就学习这些概念，只需要在使用的过程中慢慢去体会其作用即可。

以上就是我们最初提炼的六大场景，我们将它放置在新用户注册后进入的第一个页面。此处以学习笔记为例子：新用户完成注册后，如果想用语雀做学习笔记，他可以点击笔记下方的「立即新建」。

此时，会进入学习笔记的创建流程，语雀会默认帮用户填写好表单内容，并在右侧紫色框框内展示一个样板，通过样板见，用户就能大概知道语雀是如何解决他所在场景下的问题。下一步，用户只需要点击新建，就能创建出一个适用于做学习笔记的知识库。

瞧，一个学习笔记知识库也就新建好了，这里，用户可以选择自行「新建文档」，或者基于我们为他进行准备的模板文档，开始自己的创作。整个引导过程，始终围绕用户的目标与场景，并将结果前置供用户预览，让他更有体感。

最终，我们的增长实验取得了还不错的效果。相较于旧版，新版用户激活率提升了 52%。

既然实验效果不错，是否能百尺竿头更进一步，放大成功影响呢？这里运用了两个小方法，举一反三和乘胜追击：

· 举一反三：把成功模式运用到产品的其他地方

· 乘胜追击：针对同一个点进行更多实验，看能否进一步提升实验指标

回到刚才的例子，在验证了场景化引导的有效性后，我们也将模板用在用户日常的新建流程里，除新手引导外，用户在自己常规的新建过程中，也可以通过我们总结出来的场景模板去新建知识库或团队，做到举一反三。

这一设计有利于向存量老用户介绍语雀的用法，也方便他们去探索语雀更多的可能性，在弄明白「语雀怎么样解决我的问题」之余，还能知道「原来语雀也能干这个！」

与此同时，我们在原先六大模板的基础上，借着双 11 和双 12 的东风，提炼出了「电商团队」模板，乘胜追击。

希望借此转化一部分商家流量，让商户也在语雀中管理自己的进销存等内容。

经过一轮举一反三以及乘胜追击，场景化增长实验取得了还不错的效果，除刚刚说的整体激活率提升 52% 以外，自语雀场景化模板上线以来，语雀新建的所有团队中，有 57% 是通过模板创建的；新建的所有知识库中，有 21% 是通过模板创建的。可以说，我们的场景化模板还是比较契合用户实际场景，被用户接受的。增长实验取得了不错的成效。

整个过程，在产品功能上，其实并没有做多少增量，从前语雀能做的，现在也能做；从前语雀不能做的，现在也不太能做。

通过场景化的方式，让产品的价值显性化，通过让显性化后的产品价值被用户发现，促使用户增长。

场景化，让价值被发现，这是我们在语雀增长实践中学习到的小小经验，分享给大家。

结语

最后总结一下关键点：

利用增长大图，用定量的用户行为数据漏斗和定性的痛点比重数据，去综合分析，找到机会点，然后从业务总目标出发去层层拆解增长目标，确定增长实验的聚焦领域，现阶段先做什么，后做什么？用最小的成本去撬动最大的价值。但增长大图也只是工具和手段，最关键是与 Key Person 共创聚焦、共同推进，这样才能做到事半功倍。
增长实践不是一帆风顺、一蹴而就的，最重要的是持之以恒，反复迭代实验的过程。如果实验成功则可以通过乘胜追击和举一反三的方式，继续放大成功影响。如果实验失败则要吸取教训，了解原因，继续下一个试验。

最后想说的是，增长只是一种思维方式，在设计中增长，让产品核心价值被更多人发现和使用，通过设计的方式去最终帮助业务增长，甚至还可以做到对商业有影响。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：Ant_Design

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2116)

032021-6

利用原子设计体系构建自己的组件库设计语言

涛涛

原子设计理论并不是什么高大上的规则。

随着网页设计的持续发展，我们认识到开发设计系统（design system）的重要性，它最早就是为了让网页设计师更容易理解网页的构成，后来才延伸到UI设计当中。

简单来说，当公司的业务产品逐渐扩大时，我们需要制定一套完整的设计系统，提升设计和开发的协作效率，统一所有设计师的输出物。开始设计系统的制定时，大部分设计师可能都会先去网上找到大厂现成的设计系统，当拿到他们的成品的时候，会把自己的产品进行拆解和借鉴，这的确能快速解决问题，但是如果不理解其中的组织规则和逻辑，只是借鉴他们现成的设计系统，只能了解个大概，知其然而不知其所以然。因此，原子设计理论的出现就是为了帮助我们去搭建设计系统，这套理论已经逐渐被国外一些大厂应用于创建统一和富有层次的设计系统。

原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质，并且它们一旦被分解就会失去其意义。

分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质，并且相较于原子来说，更具实际意义和可操作

有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。

原子设计使我们可以将我们的界面UI细分为原子元素，并通过这些元素组合在一起形成最终的界面。

原子作为整个理论最基础的元素，当我们改变其中的原子时，整个体系都会发生变化。原子的设计概念和sketch中的“符号”有异曲同工之妙，当我们改变其中一个元素时，其他所有包含这个元素的页面都会发生变化，可以保证整个系统的一致性和层次感。原子设计为界面元素提供了应用规则和组织原理，这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：请叫我海锅锅

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2561)

022021-6

通过动效助力业务拿结果

鹤鹤

写在前面

什么时候该使用动效，什么时候该保持应有的克制，什么样的动效是好的动效我在之前写过一遍文章，感兴趣都盆友可以了解下，标题《动效/动画在直播类应用中都运用和落地》，本篇文章应该可以算是上篇文章的下半场

接下来要说的这个案例，它可能和我们平常所见的动效体验原则是“背道而驰”的,因为它终究是一个等待运力调度的场景（简单的说就是等待司机接驾的过程）每天成百上千万订单的背后有着一套非常复杂的算法去支撑，这就造成了这个场景它本身不会像动效指导原则那样顺利，平滑，愉悦，但是既然是做设计，核心是去解决问题，所以绕不开这个场景本身。通过数据去解读用户的想法和行为，将设计与业务进行更紧密的结合，从而达到更好的效果

对用户 “等待应答“这个场景的动效改进，以拉美地区最终AB测试数据为结论，使我更加确信动效能做的不仅仅是体验上的提高，在特殊场景下完全可以解决视觉感知层面无法解决的痛点，为业务方拿结果

所有数据对外均作了隐藏处理~

项目背景

滴滴出行在拉美地区飞速发展,单量持续增高的同时，用户对产品本身的期望也越来越大，我们一如既往的重视用户体验。无论严寒酷暑，早晚高峰，我们和我们的用户都不希望等待接驾变成一件漫长、无预期、盲目的行为

数据分析

* 乘客等待时长主要分布在A时段左右，多数乘客会选择在此时间段内取消订单，而消订单的乘客并不会停止叫车服务，而是进行二次发单，重新进入等待队列，这就造成了因个人因素延长了等待应答的总时长

* 等待应答B分钟左右，是较容易叫车阶段，数据显示用户处于这个时间段内容易被接单

*延长乘客等待预期,调节愿等时长阈值的操作空间，乘客愿等时长的具有较大弹性，如在打车较为容易的时段为 xx 秒，在打车较难时段为 xxx 秒

结论：用户对于排队规则的并不理解，使得用户在最容易叫到车的时间段之前会选择二次发单，取消订单会导致重新排入队列，进行排序

抓手：知悉乘客取消应答集中时间段和容易打车时间段后前提后，在不通过增加物理运力/调整算法的前提下，通过设计的手法去缓解用户的等待感知，从而增加用户的等待应答时长，将用户的等待时长延伸至容易打车时段，从而促成订单的完成，是这次设计的突破口

了解问题，明确挑战

对用户的调研我们发现用户对等待应答动画存在以下感知

通过对用户数据进行分析后得出结论，筛选出核心问题进行优化，让用户对等待应答有一个新的认知,是这次的关键所在。我们希望通过这次设计的优化，乘客能强感知此刻所处运力调动的状态，并最大程度上弱化时间概念降低人脑对时间的敏感程度，减缓用户的焦虑情绪，使其相信这是一个可以等待运力到来的排期

面对的挑战有：

1.增强播单动画感知,让用户明确自己所处状态,从而减少应答前的取消率 P0助力业务

2.通过设计吸引视觉弱化时间概念,降低人脑对时间的敏感,从而增长应答前平均取消时长 P0助力业务

3.符合用户打车预期的前提下,尽可能让动画用起来连贯,顺畅,可预期,让用户感到愉悦,用户体验提高 D1体验提高

4.符合品牌调性的场景动画,让应答场景融入App保持体验上的流畅，统一和性能平衡 D1体验提高

5.涉及到地图开发/端上研发同学的密切配合，高度还原设计文件也将是一个挑战 D2设计诉求

决策方向，设计执行

明确目标之后，就开始了设计的决策方向和关键词

作为一个单量百万级的应用，面对的用户群年龄分布也是非常广泛，因此动画的效果一定要适合大众群体的认知，不应该为了吸引视觉焦点而有个性化存在-> 波纹效果

运力调度本身是一件等待的过程，长时间的等待消耗用户的耐心，应该给予更多的可预见的可期待的暗示 ->路径

俯视视角更适合对周围环境，路况，运力的的观察和掌控，适合打车前对环境的观察，而一旦进入等待场景，用户需要做的只是等待接单，将场景透视化，贴近高空观察事物的视角，更加符合真实世界-> 透视视角

老版本沿用的等待应答场景，可以在地图上进行交互操作，但是无法带来明确的有效信息。新版设计为了增强调度的感知，增强了动画效果。而动画效果在地图上需要一直靠渲染运算生成，任何的地图移动都将加大运算量，耗电发热则会大大增加，因此这里为了保证性能将一个可自由操作的场景，变成了一个固定的场景 -> 蒙层

设计执行

明确了方向和关键词之后，设计的思路其实就已经非常清晰。在框架层考虑清楚信息布局，整体页面交互流程。在表现层吸引用户视觉，加强感知，降低用户对时间敏感度即可

初稿的设计其实非常顺利，整个设计稿从需求分析到第一个DEMO落地大概用时1天左右，而且1稿过完设计内部。在设计之初，leader建议不需要考虑太多落地问题，可以适当天马行空的，不要因为技术的限制而限制自己的想法。在完成设计稿之后我们与技术评审之前就开始与端上开发同学进行逻辑层的分析，发现这个设计稿虽然满足要求，但是在细节位置需要分情况考虑，造成研发成本的大额增加，开启漫漫改图路（细节就略过了）~

最终效果以这个动效为基础进行研发，中间涉及到了地图视角的偏移/定位点跟踪/X-panel规则/最佳view调整等复杂逻辑的调整

设计改进的细节

优化进入等待应答页的动效，优化页面布局

设计进场动效不仅仅是为了视觉上有强感知和更好的体验，核心是防止用户多次取消，多次叫单的行为发生

当长时间打不到车时，乘客会选择取消订单让系统重新派单，认为这样有可能会更快有司机接单。而真实情况则很像排队买票，前面的走不完买票流程后面的人则无法前进，所以当乘客选择取消，离开排队队列，只能重新回到对尾，重新排队

下方的等待应答信息卡片包含了等待时长和取消功能，规则是展示3s之后隐藏取消按钮,如果乘客要取消，需要上滑拉起卡片点击取消

通过调整视角和扩大蒙层动画范围，用户的视觉将会集中在屏幕的上方避免地图上的无效信息干扰，视觉持续注意力集中在3-6s左右，从而很好的为隐藏取消做了掩护

当用户的视觉从上方移动到其他位置的时候运力调度已经开始了6s+，无形中给用户时间感知的缓冲时间，使得平均等待时长延长，等待时长阈值向易接单时间段靠拢

后期通过数据分验证现乘客拉起卡片的几率相比之前刚发布时候已大幅下降，也从正面说明乘客已经适应了这种收起的策略

优化页面样式

旧版的等待应答，地图外露供乘客拖动地图观看周围情况。但是用户在等待接驾的情况下，是没有办法看到周围运力这条非常有用的信息，而地图上却外透了街道/店铺的信息，会使这个页面看起来非常沉重却没有很大的意义，且会弱化波纹扩散的感知

新版的等待应答，会在地图上方盖住一个80%透明度的的蒙层，同时会让地图视角整体抬高。让用户感觉到的是更大范围的运力调度，并且随着地图视角的抬高，街道/店铺的名称会得到隐藏，减少无意义信息的透传。通过对地图的缩放，自动减少了街道信息外透，无需通过代码层面的修改，减少了rd的工作量的同时让界面整体看起来更加清爽，拉美在发单前会有定位点的二次确认定位点，也保证用户正确感知到自己在空间上所处位置

旧版本的波纹，速度缓慢并且不够明显，很难给人一种强感知，不像是一个等待运力调度的场景

新版本的波纹，会增强波纹的速度，调整波纹的速率，让用户有一种强感知，此刻正在进行最大范围的进行运力调度的搜索

不再支持用户操作手机地图，查看周围信息。减少波纹因地图位移而产生的实时渲染，减少不必要的耗电行为发生

保证应答前后体验连贯性

在重新设计等待应答这个场景时，我不希望它是一个很重的loading的感觉

不希望像loading的原因在于loading处于数据调取状态，而数据调取一旦完成，会立刻跳转进入下个场景，会让整个体验被割裂，不流畅。而这里通过设计手法的表达我觉得可以做到体验上前后的一致,从而打通设计上的从发单->接单->送驾这一小闭环

在得到了数据请求后，我们会将View_3D视角返回到正常2D的俯视视角，而车作为最终的载体则会自然而然的出现，同时会根据最佳视角算法自动调整到，人和车同时出现在屏幕正中（距离越远地图View缩放越大，人车始终出现在屏幕当中）

接着，真实的车载路线会以路径生长的方式呈现于用户的手机当中，会根据距离的远近来控制路径生长速度的快慢，同时司机卡片同时加载出来~

等待应答的收尾过程不会像竞品那样直接进行页面跳帧而是一种 合理的有意义的（2D->3D->2D）完完整整的过程

推动落地，保证还原

完成了设计稿/产品/技术评审过后我们便开始与开发同学进行详细的对接

因为此次设计相对复杂，涉及到了端上和地图上的rd同学，所以非常考验研发的效果还原能力，既要把动效实现原理拆分的非常明确又要保证联调的时候前后一致性

这里就不多赘述，贴个输出图好了（开发动效逻辑拆分图by zhoulu）

其中有用到lottie输出（感兴趣的可以翻看我之前的文章）-》《动效/动画在直播类应用中都运用和落地》

结论~Rd同学非常OK的完成了最终的效果DEMO，还原度90%+

非常感谢rd （鞠躬）

数据验证

在拉美地区上线，进行了的AB测试，核心评估指标收益显著，整体数据远超当初的预期~

总结

成长方面：这是我来国际化团队的参与的第一个项目，也是设计内部带头发起的一个项目，现在回头来看还有些地方能做到更好，可能那多一点的“更好”能让我在产出的时候更加细致，和研发对接思考的更加的完整，对业务的提升也许会更好

在说点题外的，现在的大环境讲究“全链”，赋予了设计师更多的权利，对于设计来说绝对是利大于弊，这点深有体会，更多的上游思考，更前一步对业务的理解，把业务的场景想的明白，把数据看懂，站在全局的高度看问题，站在产品的角度去设计，设计赋能，通过设计去助力业务去拿结果

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：大宝蛋

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2008)

022021-6

让价值被发现：如何在 B 端做增长

鹤鹤

增长设计是时下的热门话题，越来越多的企业开始关注增长设计，成立独立的增长部门。在蚂蚁体验技术部，我们除了做好体验设计的「老本行」外，也在往增长的方向探索。在现有的增长理论指导下，我们结合自身业务，边落地实践，边沉淀总结。以下是我们的一些小心得。

本文会讲述我们是如何利用增长大图梳理产品各个环节，以及如何用定量的用户行为数据漏斗，和定性的痛点比重数据，综合分析，去找到机会点。辅以在 Kitchen 和语雀中的增长实践案例说明。在增长一块，我们还处于初步探索阶段，若有不成熟的地方，欢迎大家一起讨论。

为什么要关注增长？

说到增长，过去 10 几年是中国互联网高速增长的阶段，但近 2-3 年来，随着人口、流量、资本的红利衰退，越来越多企业开始关注增长。典型的是，2017 年可口可乐宣布取消 CMO（首席营销官），由 CGO（首席增长官）替代，之后各种增长类职位相继涌出。

（来源：CNNIC 中国互联网网络发展状况统计调查，每年互联网网民用户数）

什么是增长？

增长是建立在用户基础上的，用户产生需求，需求又衍生出产品，产品之上才可能有增长。所以我们理解：产品在创造价值，而增长其实是传递价值，让价值被发现。只有让更多的用户，最大限度地体验产品的核心价值，才可能迅速扩张以及有效地变现。它有几个特点：

1.首先他是关注用户全生命周期，不仅仅是获客、变现。还需要关注怎么激活用户，让用户用起来，留存下来，传播出去

2.另外，增长不是一个单打独斗的独行侠，而是体系化的，以团队共创聚焦的方式来推动增长

3.强调数据和实验：从数据分析中洞察，提出假设，循环实验的过程

（增长过程是价值的传递过程）

什么产品适合做增长？

那什么样的产品适合做增长？我们所做的 To B 产品适不适合做增长？

首先看下 To B 和 To C 的差异：To B 产品，多数是群体决策，决策链路复杂，买的人不一定是用的人，如果是客单价较高的话，基本靠销售关系驱动购买，但像具有 C 类属性的产品，因为是个人消费场景，单一决策购买，就像平时大家在淘宝买东西一样，随心所欲。那运用增长策略去推动转化，能节约很大的获客成本，可见增长更适用于 C类属性的产品。

但经过大半年的实践，并且和其他增长团队交流，我们发现虽然 To B 增长很难，但在 SMB（中小企业）的增长很有机会。SMB 中小企业，有可能是 2-3 人组成的小团队，这类企业的客户和用户通常是同一类人，我们理解这也具有 To C 属性。并且中小企业数量多，实验数据也有保障。

一句话总结：To SMB 中小企业客群的产品可以做增长。

（面向中小企业客群的产品可以做增长）

那具体怎么做呢？结合我们自身经验，给大家分享 1 张增长大图，2 个实践案例。

增长大图

增长大图是基于 AARRR 模型，在用户旅程图的基础上进化得来。为什么不用用户旅程图，而用增长大图呢？用户旅程图主要通过情绪曲线来体现问题的严重性，但在使用上也存在难以量化的问题。

所以在增长大图上，我们选择定量的用户行为数据漏斗来取代情绪值。漏斗其实是对一个流程和路径的分析，目的是定位出问题的关键所在，这样才能对症下药。但定量数据通常只会告诉我们是什么，而定性数据能告诉我们为什么？

所以，我们还建议梳理用户调研中的定性数据，按流程、阶段、产品模块、问题类型等维度归类，通过痛点比重公式，算出每个维度痛点比重的百分比，去综合分析，找到机会点。另外，增长大图还可以记录从业务总目标拆解增长目标的过程，以及实验的策略、方案、指标结果，所以增长大图也是一份连接战略和执行，不断更新的「活文档」。

公式：痛点比重= [每个阶段的问题数 / 问题总数 ] X100%

那怎么用呢？当你确定某个项目可以做增长时，最关键是邀请不同角色的 Key Person，包括 PD、技术、运营共创去搭建增长大图。

从业务总目标出发拆解增长目标，然后将定量和定性数据梳理到大图上，找出机会点，从而确定聚焦领域，开始增长实验。想想就像大家在吃自助餐的过程，基本都是先看一遍有什么，再筛选一下，小份量的取餐尝试，最后再确定几样好吃的，重点吃。

小份量的取餐尝试，就等于增长实验的过程。分为 4 个步骤：

从定量和定性数据中分析洞察——不断的提出假设——然后排定优先级，进行实验——验证应用的过程。

接下来，分享两个我们在增长中做的小 Case。

案例一：1 块钱 6 周 Ant Design 设计工具 Kitchen 增长实践

Kitchen 是一款为设计者提升工作效率的 Sketch 工具集。先利用增长大图看下 Kitchen 的现状，我们捞取用户从访问——下载——安装——使用的数据漏斗，可以看出整体漏斗还是很不错的，整体留存率达到 40%。

然后我老板就说：「可以去做拉新增长，给你一块钱成本，去撬动一个地球吧。」其实，我当时就想给他一个白眼，现在一块钱能做什么？但反过来想想，这确实是增长很重要的一点：怎么用最小的成本去撬动最大的价值，找到最大的发力点。

基于当时的 DAU 数据现状，并初步讨论后，我们敲定 6 周 DAU 增长翻倍的目标。围绕这个目标，再进一步拆解为新增和留存，前面有提到留存率不错，所以我们这 6 周的增长聚焦在拉新上。那么拉新最重要是找到低成本的渠道运营。然后，我们脑爆了一些平时设计师会去的和我们可以切入的网站，虽然筛选了一些，但还是有很多，我们不可能全部去铺。在人有限、钱有限、时间有限的情况下，再回归我们的目标，需要找到最合适和低成本的渠道去运营。

所以基于 ICE 评分体系以及结合业务，我们做了局部调整，最终以渠道的「影响力」、「转化率」和「可行性」3 个维度进行打分，确定前 4 个打星标的渠道去做实验，这里主要分享下在 Ant Design 渠道上做的小实验。

在增长之前，我们已经在 Ant Design 首页投下过广告，通过数据发现转化率不足 0.2% ，后来我们分析 Ant Design 各个页面上的数据，从中发现一个有趣的现象，从招聘贴过来的用户竟然比首页过来的用户还多。

对比这两个入口，一个是首页，一个是很内页的文字链，比较偏僻的入口，位置是微不足道，但给 Kitchen 带来的用户却是首页的 10 倍。

我们又对比了他们之间的差别：首页虽然是比较大的位置，浏览量大，但用户普遍是大致浏览，看的欲望不强。而点击招聘页，通常是带着目的进来，所以这部分的用户是高欲望点击的。正所谓，欲望 - 摩擦 = 转化，为了提升转化，要么提升客户的欲望（Desire) ，要么减少摩擦（Friction)，往往消除摩擦要比提升客户欲望更简单。所以让用户有欲望进行来时，我们把摩擦尽量减少，则可以带来更大的转化。

（高欲望、低摩擦带来高转化）

所以我们就提出了一个大胆的假设：如果我们在用户点击欲望更强，关注度更高，浏览量更高的页面，并且和 Kitchen 功能相关的页面上增加引导，这个引流的效果可能会更好。因此开始了我们的实验，首先分析 Ant Design 浏览量最高的前 20 的页面，从中筛选出和 Kitchen 功能相关的页面。

在相关功能页面下，增加一个叫设计师专属的模块。在不同功能的页面下，加入了不同的引导文案，去吸引设计师点击。比如 Table 这个组件，我们加入的引导文案是：安装 Kitchen Sketch 插件，两步就可以自动生成 Ant Design 表格组件。（甚至连在文案前加 emoji 、文案后加或不加 emoji ，我们都尝试做了实验）

Ant Design 的用户有一半是设计师，那么当设计师进入到该页面，并且也想使用 Table 这个组件时，就可以减少用户的摩擦，增加转化。

1 个月后我们发现：对比首页，在功能页上的引流效果更好，也说明这次试验是成功的。通过 Ant Design 渠道过来的访问量，总体提升 2460%。并且这个影响是长久性的。

在同一时间，获得实验成功后，我们继续在不同的渠道尝试了不同的增长实验。6 周后，DAU 整体提升 42%，虽然6周的目标没有达成 100%，但最关键是不断试验的过程。

案例二：语雀用户增长实践

语雀，是蚂蚁金服孵化的一款知识协同产品。在蚂蚁、阿里内部，大家都是用语雀来管理自己的办公文档与个人笔记，是十万阿里人都在使用的笔记与文档知识库。当然，语雀不仅在阿里内部使用，对外，语雀也服务外部企业和个人用户。

作为文档管理工具，「写」是其中的关键环节。因此，语雀将「注册后写一篇文档」作为用户的激活动作，此次增长实践的目标，就是提升新用户的激活率。

同样利用增长大图先梳理新用户注册激活的流程，从数据漏斗中我们可以看到，从注册登录后，到激活的转化率是非常低的，这是我们的一个机会点。

由此我们也去做了一轮用户调研，从调研结果来看，许多用户在注册后其实不知道「语雀能拿来干啥」「能怎么样解决我的问题」。具体反映在用户的操作和困惑上是：一是引导太弱不知道怎么开始写一篇文档，二是概念抽象令人费解，三是整个激活流程冗长容易失去耐心。这里边其实有比较大的提升空间，那我们能不能通过一些实验去提升转化率呢？

首先分析原有方案的问题

这是我们老的引导方案，用户注册完成后，默认会进入到他的个人页面，语雀默认为用户创建一个空的默认知识库。

现在回顾这个页面，也难怪用户会说不知道语雀能拿来干什么了。

首先，场景引导弱。每天不同用户带着各自的场景和问题，来到语雀，有希望做办公文档协同的，有希望做读书笔记的，有希望写专栏博客的。面对这形形色色的需求，语雀只提供了一个空的「默认知识库」，余下的便留给用户自行探索，也难怪用户会感觉无从下手。

此外，像「知识库」等概念，对于小白来说，其实非常抽象，难以理解。而且在此页面中还有像「关注了」「关注者」等与创作关系不太大的干扰信息。这些东西，都会阻碍用户激活，需要优化。

针对上述问题，团队同学经过讨论，提出假设：我们是否可以通过场景化引导的方式，来提升整个激活率呢？

所谓场景化引导，就是通过语雀产品定位以及用户实际使用情况，提炼出最典型的场景模板，打包出样板间。用户带着场景与问题来到语雀，语雀带着相应的解决方案去迎接用户，如此一来，需求和方案就能很好的匹配上，「语雀能用来干什么」的问题自然迎刃而解。

与此同时，新方案将「知识库」等很难理解的概念通过场景化包装，变成「笔记本」「攻略书」等更具像化的东西，用户不再需要上来就学习这些概念，只需要在使用的过程中慢慢去体会其作用即可。

以上就是我们最初提炼的六大场景，我们将它放置在新用户注册后进入的第一个页面。此处以学习笔记为例子：新用户完成注册后，如果想用语雀做学习笔记，他可以点击笔记下方的「立即新建」。

此时，会进入学习笔记的创建流程，语雀会默认帮用户填写好表单内容，并在右侧紫色框框内展示一个样板，通过样板见，用户就能大概知道语雀是如何解决他所在场景下的问题。下一步，用户只需要点击新建，就能创建出一个适用于做学习笔记的知识库。

瞧，一个学习笔记知识库也就新建好了，这里，用户可以选择自行「新建文档」，或者基于我们为他进行准备的模板文档，开始自己的创作。整个引导过程，始终围绕用户的目标与场景，并将结果前置供用户预览，让他更有体感。

最终，我们的增长实验取得了还不错的效果。相较于旧版，新版用户激活率提升了 52%。

既然实验效果不错，是否能百尺竿头更进一步，放大成功影响呢？这里运用了两个小方法，举一反三和乘胜追击：

· 举一反三：把成功模式运用到产品的其他地方

· 乘胜追击：针对同一个点进行更多实验，看能否进一步提升实验指标

回到刚才的例子，在验证了场景化引导的有效性后，我们也将模板用在用户日常的新建流程里，除新手引导外，用户在自己常规的新建过程中，也可以通过我们总结出来的场景模板去新建知识库或团队，做到举一反三。

这一设计有利于向存量老用户介绍语雀的用法，也方便他们去探索语雀更多的可能性，在弄明白「语雀怎么样解决我的问题」之余，还能知道「原来语雀也能干这个！」

与此同时，我们在原先六大模板的基础上，借着双 11 和双 12 的东风，提炼出了「电商团队」模板，乘胜追击。

希望借此转化一部分商家流量，让商户也在语雀中管理自己的进销存等内容。

经过一轮举一反三以及乘胜追击，场景化增长实验取得了还不错的效果，除刚刚说的整体激活率提升 52% 以外，自语雀场景化模板上线以来，语雀新建的所有团队中，有 57% 是通过模板创建的；新建的所有知识库中，有 21% 是通过模板创建的。可以说，我们的场景化模板还是比较契合用户实际场景，被用户接受的。增长实验取得了不错的成效。

整个过程，在产品功能上，其实并没有做多少增量，从前语雀能做的，现在也能做；从前语雀不能做的，现在也不太能做。

通过场景化的方式，让产品的价值显性化，通过让显性化后的产品价值被用户发现，促使用户增长。

场景化，让价值被发现，这是我们在语雀增长实践中学习到的小小经验，分享给大家。

结语

最后总结一下关键点：

利用增长大图，用定量的用户行为数据漏斗和定性的痛点比重数据，去综合分析，找到机会点，然后从业务总目标出发去层层拆解增长目标，确定增长实验的聚焦领域，现阶段先做什么，后做什么？用最小的成本去撬动最大的价值。但增长大图也只是工具和手段，最关键是与 Key Person 共创聚焦、共同推进，这样才能做到事半功倍。
增长实践不是一帆风顺、一蹴而就的，最重要的是持之以恒，反复迭代实验的过程。如果实验成功则可以通过乘胜追击和举一反三的方式，继续放大成功影响。如果实验失败则要吸取教训，了解原因，继续下一个试验。