二 - ES6的解构赋值的用途总结

2 - 什么是ES6解构

在ES6中添加了一个新属性：解构，允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。解构是一种打破数据结构，将其拆分为更小部分的过程，允许我们将右边的表达式看起来也像变量声明一般，然后在左边将值一一提取。 解构这种赋值语法较为简洁，比传统的属性访问更为清晰。

还不了解什么是解构赋值的，请参考：https://blog.csdn.net/azxqwe123/article/details/103296603

下面只讲怎么应用：



2.1 - ES6解构赋值7种场景案例—用途

（1）交换变量的值



[x, y] = [y, x];

上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。



（2）从函数返回多个值



函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。



// 返回一个数组



function example() {

  return [1, 2, 3];

}

var [a, b, c] = example();



// 返回一个对象



function example() {

  return {

    foo: 1,

    bar: 2

  };

}

var { foo, bar } = example();



（3）函数参数的定义



解构赋值可以方便地将一组参数与变量名对应起来。



// 参数是一组有次序的值

function f([x, y, z]) { ... }

f([1, 2, 3]);



// 参数是一组无次序的值

function f({x, y, z}) { ... }

f({z: 3, y: 2, x: 1});



（4）提取JSON数据



解构赋值对提取JSON对象中的数据，尤其有用。



var jsonData = {

  id: 42,

  status: "OK",

  data: [867, 5309]

};



let { id, status, data: number } = jsonData;



console.log(id, status, number);

// 42, "OK", [867, 5309]

上面代码可以快速提取JSON数据的值。



（5）函数参数的默认值



jQuery.ajax = function (url, {

  async = true,

  beforeSend = function () {},

  cache = true,

  complete = function () {},

  crossDomain = false,

  global = true,

  // ... more config

}) {

  // ... do stuff

};





指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。



（6）遍历Map结构



任何部署了Iterator接口的对象，都可以用for…of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。



var map = new Map();

map.set('first', 'hello');

map.set('second', 'world');



for (let [key, value] of map) {

  console.log(key + " is " + value);

}

// first is hello

// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。



// 获取键名

for (let [key] of map) {

  // ...

}



// 获取键值

for (let [,value] of map) {

  // ...

}



（7）输入模块的指定方法



加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。



const { SourceMapConsumer, SourceNode } = require("source-map");

本文从什么是场景化、场景化设计的案例、为什么要基于场景化做设计和如何进行场景化设计 4 个方面为你完整梳理场景化设计思维的知识点。

什么是场景化设计

「场景」在百度百科里的定义是：戏剧、电影中的场面，泛指情景。情景又指：

• 感情与景色
• 情形、景象
• 环境：假设是在这个情景。

在戏剧或影视剧里，场景由人物，时空，事件（行为），环境（社会环境和自然环境）等要素构成。

互联网中的「场景」我把它分为两类，一类是为了实现用户目标而产生的场景，这种类型的场景需要明确用户目标，可能并不需要涵盖用户是怎么实现目标的。这类场景指根据用户的精准需求，为其提供精准服务，用明确的差异化服务给用户提供一个使用产品的动机。比如微博和微信，微信定位是熟人社交，微博则是陌生人社交。另一类是更加精细化的场景，这类场景需要明确用户操作流程。本文主要针对第二类场景展开。

场景化设计指基于对场景的分析，得出用户痛点与需求，结合前后场景预判用户目标，通过设计提高用户效率，给予用户惊喜与感动。

场景要素包括：4W+1H，即Who人、When时间、Where地点、What事件 、How环境，什么人，在什么时候，在什么地方，做了什么事情，所处的环境如何。其中 Where 又包括线上地点和线下地点，线下指现实中的定位，可以通过手机信号塔数据（GPS），Wifi 连接等获取；线上指用户所处的具体页面。

如：用户（who）早上上班（when）在地铁上（where）看电子书（what），地铁上人多嘈杂且操作不方便（how）。再比如用户（who）中午（when）在办公室里（where）点外卖（what），肚子很饿还不知道吃什么（how）。五要素就像口诀，帮助我们全面快速地描述场景。

有哪些场景化设计的例子

为帮助大家更好的理解场景化设计，这里基于上面提到的场景五要素举一些例子。

人是变量：用户不同，看到的信息不同。随着大数据和智能推荐技术的普及，越来越多的产品通过挖掘不同用户的喜好，生成用户画像，为每位用户提供「千人千面」的个性化内容。这样的产品大家都很熟悉，比如抖音，淘宝，微博，今日头条。

时间是变量：时间不同，看到的信息不同。比如小米 MIUI11 的效率革新功能「智能出行」，当在出行类 app 上定好行程后，MIUI11 就会自动将该行程记录在负一屏显示并同步日历，同时会根据出行的时间点，在通知栏实时更新提示：

再比如在 Google Maps 的 app 里开启导航时，如果目的地在预计到达时间还没有开门，或者快要/已经关门了的话，会有个弹窗提醒。

还有蚂蚁森林的页面会根据用户打开的时间进行变化（白天与夜晚模式）等等，这些都是充分考虑了场景中时间这一变量，才有如此暖心的设计。

地点是变量：同一个用户，在不同地点看到的信息不同。比如，大众点评APP当用户从常住地北京（where）定位成非常住地杭州（where）时，根据用户的上个场景与当前场景预测用户可能处于旅游状态，从而预测用户下一步的目标是在杭州「吃喝玩乐」，所以首页和攻略页的内容都发生了变化，为用户推荐旅行地的「吃喝玩乐」。

环境是变量：不同环境看到的信息不同，比如设备环境发生变化时：iOS13 中的备忘录页面，将「添加」按钮移到了右下角。为什么？因为手机屏幕越来越大，把按钮从右上角移到右下角，更有利于用户单手操作。

再比如：我们在驾驶环境下，要保持注意力集中，避免或减少分心驾驶导致的交通事故，所以基于驾驶环境，iOS11 上线了驾驶模式功能。当 iphone 与车内的 USB 或蓝牙连接，或 iphone 感知到人的移动速度时，iphone 就会自动进入驾驶模式，在该模式下，任何人发短信，我们都不会收到提示，对方会收到「我正在驾驶，稍后回复您」的自动回复。同时，iphone 会追加一条短信，提示对方只要回复「紧急」关键词，我们就能立刻接收到他们的消息提示。

为什么要基于场景做设计？

通过上面的举例想必大家已经了解到了基于场景做设计的好处。由于与用户的空间相隔，设计师无法感知用户在真实场景中使用产品的具体情况。通过场景化设计的方法，对用户使用场景进行分析与预期，可以帮助设计师找到用户与场景的内在联系，探索新的功能及交互方式。

怎么进行场景化设计

可以概括为以下四步。

1. 根据用户使用流程和行为路径穷尽场景

根据用户的使用流程和行为路径列举场景，这里以乘坐飞机（手机购票）为例，列举乘坐飞机涉及到的关键场景：

• 乘客（who）在航旅纵横页面（where）购票（what），航班多查找起来麻烦（how）。
• 乘客（who）起大早拖着疲惫的身体（how）在去往机场的路上（where），又遇到早高峰堵车，内心焦躁烦闷（how）。
• 起飞前（when）乘客（who）在机场（where）过安检（what），安检流程复杂，又检测出不符合登机规定的物品，让人心烦，手忙脚乱（how）。
• 起飞前（when），乘客（who）在候机口（where）候机（what），人多嘈杂，没有座位，还背着繁重的行李，还要时刻关注航班信息（how）。
• 起飞前40分钟（when），乘客（who）背着行李排着队（how），将登机牌（纸质/电子）和身份证出示给工作人员（what），工作人员（who）站在入口处（where）开始检查每位乘客的登机牌和身份证（what）。
• 检完票后（when），乘客（who）拿着身份证和登机牌，背着行李（how）乘坐摆渡车（what），摆渡车上嘈杂、拥挤（how）。
• 下摆渡车后（when），乘客拿出登机牌，背着行李（how）排队检票登机（what），工作人员（who）站在飞机前（where）开始检查每位乘客的登机牌（what）。
• 在起飞前30分钟（when），乘客（who）登机（what），背着行李在狭窄拥挤的通道里（how）寻找自己的座位（what）。找到座位后，将沉重的行李艰难的（how）放到上方的置物架上（what）。放好行李后，坐到自己的座位上（what），系好安全带（what），调节座椅靠背（what），等待飞机起飞（what）。
• 飞行过程中（when），气流导致飞机颠簸，乘客感到恐慌不适（how）。飞行过程中，乘客通过看电影，看书，睡觉打发时间（what）。
• 到达目的地（when），乘客（who）从高处置物架上（how）取下行李（what），拿着沉重的行李（how）排队下飞机（what）。此时乘客对目的地的天气等其他情况都不清楚。
• 乘客走出飞机到达航站楼后，在陌生的机场（where），跟着标牌指示艰难的找到自己的行李（what）。拿着行李跟着指示牌（how）困难的找出口（what）。

通过对关键场景的详细描述，我们将摸不着的用户场景像过电影一样在眼前一一呈现，有利于我们发现很多想不到或者通过调研得不到的细节，帮助我们发现用户真正的痛点与需求，洞察设计机会点。

2. 根据场景挖掘机会点

完成了第一步的场景列举，我们对流程中涉及的场景有了深刻的了解。下一步就是对场景的判断与分析，挖掘机会点。机会点挖掘有两个方向，一是通过分析当前场景存在的痛点和需求挖掘机会点，二是通过对用户下一步目标的预判寻找机会点。

通过分析当前场景存在的痛点和需求挖掘机会点

支付宝「朋友」界面，当用户输入某数值时，输入框上方会自动显示「给对方转账***元」按钮，用户可点击该按钮完成转账。这是因为经常有用户误以为输入数值发送即完成了转账，导致很多尴尬的状况出现。基于该场景下的痛点与需求，支付宝做了这个改进，贴心又好用。

iOS 系统在切换 APP 操作时，会将一些金融类 APP 虚化，以此来保证用户信息安全。这一设计细节也是充分考虑了用户在切换 APP 时的场景，解除了用户在公告场合担心被窥屏而泄露个人财富信息的担忧。

还有，当我们用耳机听音乐或播放视频时，拔下耳机，声音就会自动停掉，这样就算在安静的场合听音乐或者看视频，耳机不小心掉下来也不会发出尴尬的声音，这些都是充分考虑了用户当前使用时的场景，才做出如此贴心的设计。

通过对用户下一步目标的预判寻找机会点

第二个方法是通过对用户当前场景的分析，预判用户下一步的行为与目标，从而寻找当前场景的机会点。

如何预期用户下一步目标？有三个方法：

• 通过成组动作进行预期，如复制→粘贴，编辑→保存。
• 通过用户认知流程预判，如，浏览时反向滑动→结束浏览/回到顶部；再比如谷歌翻译在发音时，第一遍是正常语速，第二遍语速变慢，第三遍又恢复到常速。是不是很贴心，很符合用户期望？
• 通过产品使用流程进行预期，如订外卖→取外卖→评价。

在谷歌浏览器，当我们打开多个浏览窗口时，通常需要手动一个个地关闭标签页。chrome 充分考虑到了用户的使用场景，当用户关闭一个标签页时，预期用户会关闭下一个标签页，所以当关闭一个标签时，相邻标签会自动靠近，保证关闭的按钮始终位于鼠标的当前位置，这样用户就不用移动鼠标关闭下一个标签页，提高了用户的使用效率。

3. 机会点转化为落地的设计方案

在将机会点转化为具体的设计时，有两个可作为依据的设计原则，分别为，情感化。

实现有以下几个方法：

行动点前置

通过对用户下一目标的预测，将用户目标在当前场景展示，缩短操作流程，达到的目标。如淘宝首页的 tab 栏会根据每个用户的浏览记录预测用户目标，千人千面个性化展现，缩短了用户查找商品的路径，提高商品购买效率。

行动点置换

还是拿淘宝举例，淘宝底部的第一个导航，当用户滑动首页下方的商品流时，该按钮由首页变成置顶。

行动点相关提示

意思是根据用户当前目标或下一步目标进行相关的提示。如支付宝朋友页面，当上滑时，会出现「找人转账」的提示，点击进入朋友列表的纯净模式（去掉了服务通知等跟转账无用的列表），提高了用户寻找的效率。

再比如，网易邮箱，当邮件中提到附件，但是没有上传附件时，点击发送后，系统弹出下方的提示，解决了用户常常忘记添加附件的困扰。

突出行动点

根据用户当前目标或下一步目标突出关键按钮，帮助用户快速找到关键操作，吸引用户点击，降低了用户思考成本，提升效率。运用这个方法进行设计的例子太多了，比如淘宝的商品详情页用红色突出购买按钮等。

直接执行

根据用户当前目标或下一步目标直接执行。比如滴滴的扫一扫界面，当检测到光线较暗时，手电筒会自动打开，提高了扫一扫的效率。

情感化

唐纳德·诺曼在《情感化设计》中提到设计的三个层次，分别为：本能的设计，行为的设计，反思的设计。情感化设计是能打动人的，它能传递感情，勾起回忆，给人惊喜，情感化设计是帮助产品与用户之间建立情感的纽带，能强化用户对品牌的认知，培养对品牌的忠诚度。

情感化设计的步骤依次为：提炼影响产品的的情感指标→聚焦用户对产品的情感诉求→产出设计方案→验证设计价值（来源于周姮—知乎蚂蚁金服体验技术部的一次分享）。

在谷歌表格每列的开头依次输入「Pride」五个字母后，表格会变成彩虹样式。

网易云音乐在用户生日时会变成「生日快乐」的蛋糕样式，点击进去的音乐列表，第一首歌是生日歌，让人心里暖暖的。

4. 设计检验

最后一步就是设计方案的验证，设计方案能否帮助用户缩短操作流程？降低用户思考成本？帮助用户地完成任务？是否能打动用户给他们带来惊喜与温暖？通过可用性测试及上线后的数据反馈，帮助我们更好的优化设计方案。

总结

1. 什么是场景化设计？

场景五要素：4W+1H，即Who人、When时间、Where地点、What事件 、How环境，什么人，在什么时候，在什么地方，做了什么事情，所处的环境如何。

2. 有哪些场景化设计的例子？

3. 为什么要进行场景化设计？

4. 怎么进行场景化设计？

• 根据使用流程和行为路径穷尽场景
• 根据场景挖掘设计机会点
• 将机会点转化为落地的设计方案
• 设计检验

在vue项目中，经常会遇到需要刷新当前页面的需求。

因为vue-router判断如果路由没有变化，是不会刷新页面获取数据的。



方式1：go(0)和reload()

通过location.reload()或是this.$router.go(0)两种强制刷新方式，相当于按F5，会出现瞬间白屏，体验差，不推荐。



方式2：定义一个空白路由页面，路由跳转到该空白页后立马跳回当前页，实现路由刷新。

在router路由表中定义一个空白路由，



 // 强制刷新当前页所用的中间跳转页

   {

        path: '/redirect/:path*',

        component: () => import('@/views/redirect/index')

  }



写一个空白路由组件



//redirect/index

<script>

export default {

  created() {

    const { params, query } = this.$route

    const { path } = params

    this.$router.replace({ path: '/' + path, query })

  },

  render: function(h) {

    return h() // avoid warning message

  }

}

</script>





在需要刷新的页面使用



refresh() {

      // 刷新当前路由

      const { fullPath } = this.$route

      this.$router.replace({

        path: '/redirect' + fullPath

      })

    }



这种方式，基本上能够应付绝大多数情况，推荐使用。

但是，有时候，有一些极端情况下，这种刷新不起作用，而又不想用第一种那种毛子般的简单粗暴的方式的话，下面的方式可以选择使用。



方式3：provede/inject 方式

vue官方文档说了，这个依赖注入方式是给插件开发使用的，普通应用中不推荐使用。

但是，效果却很好。

app.vue修改



<template>

  <div id="app">

    <router-view v-if="isRouterAlive" />

  </div>

</template>

<script>

export default {

  name: 'App',

  provide() {

    return {

      reload: this.reload

    }

  },

  data() {

    return {

      isRouterAlive: true

    }

  },

  methods: {

    reload() {

      this.isRouterAlive = false

      this.$nextTick(function(){

        this.isRouterAlive = true

      })

    }

  }

}

</script>





使用的时候：

demo.vue



<template>

  <div class="container">

  xxx

  </div>

</template>



<script>

export default {

  inject: ['reload], // 依赖注入

  name: 'Demo',

  computed: {

    message() {

      return '抱歉，您访问的页面地址有误或者该页面不存在...'

    }

  },

  methods: {

  handleReload() {

  this.reload() // 直接在需要刷新的方法中调用这个reload()

}

  }

}

</script>



<style lang="scss" scoped>

</style>



原理就是通过依赖注入的方式，在顶部app通过v-if的显示隐藏来强制切换显示，以此来让vue重新渲染整个页面，app中通过provide方式定义的reload方法，在它的后代组件中，无论嵌套多深，都能够触发调用这个方法。具体说明查看官方文档。

转自：站酷-呜呜吉良斯基

产品：这次需求很简单，对比上期只有字段和操作项的差异，把上次的稿子直接复制一下应该不用很多时间吧？

交互：上次你是不是做过高级筛选组合？我这期需求要用到，你把那部分稿子发给我用用吧。

研发：这个组件我在其他模块里看到过已有样式，这次为什么用不一样的？不然又要重复开发呀，能不能统一一下。

视觉：同一个按钮在不同的模块颜色不一样诶，这次要和哪个模块一致啊？

……

通过以上对话不难看出，最常出现在需求沟通与研发过程中，由于缺少统一的规范和标准化体系，导致实施环节各方沟通成本高，造成设计成果与实现有一定差距，影响用户体验；通用组件和业务组件混用，导致设计模式和代码复用率低。尤其是当业务发展到一定体量时，对于复杂产品的大量重复且类似的需求场景，如果没有一种的工具和规范来协同工作，将大大影响团队的生产及沟通效率。

问题

• 认知：产品、研发、设计师对于同一需求都有自己理解的解决方案，缺少统一规范的约束，难以达成共识。
• 效率：设计效率低，交互原型的维护成本及上下游团队的沟通成本高，易造成不专业的印象。
• 品质：认知和效率的局限性，最终导致实施落地的产品质量和用户体验难以得到保障。

解决

大家应该都知道乐高（LEGO）积木，它是一种可以互相嵌套组合的塑料积木，形状共有 1300 多种，每种形状都有 12 种不同的颜色，可以拼插出多种造型。其实组件库的工作方式就很像乐高，通过小元件的互相嵌套来产生多种组件或模块，多种组件模块结合生成页面结构。我们先来梳理一个概念，组件库是什么？

组件库是设计系统的一部分，是在我们常规界面设计过程中可以直接用来制作交互图例和搭建页面的组件集合，它可以作为单个组件独立存在，也可以通过多个组件组合而成的结构或模式来解决类似场景的设计问题。组件库是在约束条件下去构建解决方案的过程，所以组件的使用也需遵循一定的规范，按照一套标准化的体系复用于多个业务场景。

一个有效的组件库，可以帮助设计师和研发提高工作效率，提升设计专业度的同时让产品本身的体验更加一致、可学，品牌感更强，它所具备的基本特征一定是通用的、灵活的、复用的。

• 通用性：意味着足够基础和常见且不带业务属性，参与设计环节的每个人都应该知道这个组件的功能及目的，同时具备一定扩展性。
• 灵活性：要求元件的组合需灵活，可以在不同场景下通过互相组合来快速搭建交互框架原型图，并根据不同页面结构的演变来适应新的业务需求。
• 复用性：指的是适用于多个业务或产品，在设计过程和研发过程中都可以高频复用。

那么用组件库这种标准化体系来完成设计方案时，到底能带来怎样的价值？

组件库的价值

保证产品体验的一致性：对于一个含有多业务系统的大型复杂产品，每个独立的业务系统虽然在功能上有一定区别，但整体的用户体验需要满足基本的一致性。比如，当我使用同一个产品中的业务系统 A 和业务系统 B 时，我能通过类似的页面结构、组件及样式的一致性、操作反馈乃至提示文案结构的一致性，来感知到我使用的A、B业务系统隶属于同一个产品。

提升设计师的效率：在需求量巨大且需求来自不同的业务线时，需要逐一绘制页面及组件，造成大量重复劳动，并且在评审及需求沟通环节还可能存在不断地细节调优。所以对于设计师而言，组件的高频复用能大大提升设计效率，使设计师更多的将精力聚焦于理解和解决用户的实际问题。

提升产研团队的效率：通用场景及普通需求直接按规范进行设计和研发，减少上下游对同一页面及组件使用方式的不同理解而产生的多余沟通成本。

利于沉淀设计规范：组件本身的设计和使用方式就可以直接作为交互和视觉规范的一部分，按照统一的设计规范来确定需要使用的主题色、组件样式、组合方式及页面结构，可以快速搭建出一个或多个产品的交互框架。

构建「FishDesign」企业级UI组件库

那么如何构建一个企业级 UI 组件库？

我将用前段时间参与的「FishDesign企业级UI组件库」项目为例，通过在网易七鱼产品中的应用，来介绍一个企业级 UI 组件库的设计原则，内容构成包含哪些类型和元素，每种组件类型在分类和设计过程中是如何考量的。本文侧重讲述构建一个组件库所涵盖的内容，而不是某组件类别本身的设计方法。

顾名思义，「企业级」意味着 FishDesign 所服务的业务都是具备一定体量的，可能是服务一个包含了多个独立子业务系统的大型复杂产品，比如网易七鱼；也可能是同时服务多款产品，比如网易七鱼和网易定位等。

组件库是帮助设计者及前端工程师快速构建业务系统的工具，除了最重要的组件内容，还需要设计原则、配色方案及布局规范来指导具体业务产品的设计有效落地。

1. 设计原则

基于 FishDesign 目前主要是帮助搭建 B 端企业级产品，而 B 端业务的产品目的决定了它所才采取的设计模式，所以我们将用以下四点作为塑造组件库的设计原则：

• 简洁：如无必要，勿增实体，慎重筛选客户当前需要信息内容。
• 直接：提供用户操作后的直接反馈，保证用户的操作结果符合预期。
• 优雅：设计方案追求优雅，给使用者有质感的操作感受。
• 适应性：设计方案需提供可扩展能力及适应性，以适应不同模式的企业使用。

2. 颜色

产品会根据自身的产品目标和受众群体去选定产品的配色方案。前文提到，一个有效的组件库需满足通用性、灵活性、复用性，像配色方案就应该能被灵活自定义来应对多样化的诉求。以网易七鱼为例（下文均以网易七鱼为例），设置了 1 种主色，4 种辅助色和 6 种中性色来搭建一致的外观感受。

• 主色：选择蓝色系来传达智能服务、信任可靠、技术创新的品牌形象。
• 辅助色：除了品牌主色调蓝色，在辅助色中也存在一样的蓝色，那是因为蓝色是相对泛用性较广的色系，用于产品中的主操作按钮、文字按钮或 icon 等。红色唤起注意并昭示危险，所以一般用于谨慎操作及错误提示。黄色则常用于警示信息，提示用户操作可能带来的风险及后果。绿色能传递安全和健康的情绪感受，用于正向反馈提示或成功操作的引导。
• 中性色：一般采取黑灰色调来展示产品的文本信息、背景和边框色，用来表现层次结构。

3. 布局规范

为处理多业务中网页设计区域内的信息收纳问题，我们用规则的网格阵列来指导和规范版面布局以及信息分布，即栅格系统和页面布局。FishDesign 在 12 栅格系统的基础上，将整个设计区域按照 24 等分的原则进行划分，来增加页面的相似度，提升用户体验。

我们通过基本的配色及布局规范解决了产品风格及信息区块框架的设计，那组件库中重要的组件部分，是如何作用于产品搭建的？Brad Frost 提出的「原子化设计理论」可以帮助我们更好的理解，原子化设计的灵感来自于现实世界当中的分子结构，UI 中颗粒度最小的元素，即「原子」，组成了颗粒度较大的元件，即「分子」；而诸多分子又组成了更加复杂的组件与模块，即「有机体」。

组件库构建之初无法一应俱全，是需要后续不断的维护与迭代的。如何在最初海量组件中圈定适合的组件范围呢？最合适的切入点就是从身边的业务场景出发，从最基本、最简单、最小的元素入手。

4. 组件分类

我们根据当下已有的业务场景和对往后一段时期的业务发展方向进行规划，将组件库的组件类型分为通用组件和业务组件。一般业务组件库是不对外的（毕竟使用场景特殊也有限，放出来参考意义不大），所以在 FishDesign 官网只能看到通用组件部分。

• 通用组件：指适用范围广、复用频次高，可复用于多个业务且不包含业务逻辑。比如导航栏、按钮、toast、弹窗等。
• 业务组件：这类组件对比通用组件而言，最大的特点就是包含了较多业务属性，跟产品功能有较强的关联性，所以影响到适用范围可能仅限于 1~2 个业务系统或特殊场景，且复用频次不高。比如网易七鱼的在线和呼叫系统中的咨询分类组件。

一个大型复杂的业务产品通常有不止一位设计师或前端工程师参与设计，需要在多种处理方式中选择合适的设计模式来解决不同的场景问题，这要求根据组件属性的差异，需对通用组件做细分，那么如何确定通用组件中的子分类呢？

• 竞品学习与研究，穷举该部分产品类型中的组件类型。
• 遍历自己所负责产品内已有的业务场景，提取并整理业务场景中所用到的组件。
• 将整理好的两部分组件进行筛选去重，保留高频通用的部分。比如同样是下拉筛选组件，由于缺少统一规范和组件，可能导致的后果就是在同一产品不同业务系统的相同场景下，使用的组件从样式到交互方式都不一致。我们要做的就是对这部分在类似业务场景中使用了多种表达形式的组件做合并去重，然后通过设计组内审来圈定最后通用组件的范围。
• 基于组件的属性和使用场景，对圈定的组件范围进行归类。

由上述步骤，我们将通用组件继续细分为五个子类别：基础组件、导航、数据录入、数据展示、操作反馈。

• 基础组件：即按钮、图标等，相较于其他组件的使用场景更通用，或其他组件在实现时依赖了这些组件来实现的组件类别。
• 导航：即导航菜单、标签、面包屑等，可以帮助用户产品系统内快速找到所在页面层级或位置的组件类别。
• 数据录入：即输入框、选择器、表单等，支持用户将数据信息录入到系统的组件类别。
• 数据展示：即图表、表格、气泡卡片等，将录入到系统的数据信息多样化展示出来的组件类别。
• 操作反馈：即对话框、警告提示（Alert）、全局提示（Toast）等，在用户操作前后，使系统状态得以合理反馈的组件类别。

用组件库设计「网易七鱼」示例

以网易七鱼为例，看下有组件库参与搭建的设计示例，以下页面中所用组件均出自 FishDesign 组件库。

「导航组件」使用示例：

「表格组件」使用示例：

「弹窗组件」使用示例：

「步骤组件」使用示例：

总结

组件库最大的价值在于提升整个团队的产研效率，使设计质量得以保障的同时，提升产品整体的用户体验。

我们对构建企业级 UI 组件库的步骤及要素做个简单回顾：

• 首先，明确组件库所需解决的问题及存在的价值，这决定组件库的体量和服务范围是什么，以及构建的时机是否合适。
• 其次，通过竞品分析并结合身边最熟悉或深耕的业务入手，通过产品目的来选择设计模式，从最小元素开始逐步整理，包括产品配色方案和栅格系统等布局规范。
• 第三，需要对组件库的重要组成部分「组件」，进行圈定及合理分类。这里需要注意的是，组件范围的圈定，尤其在组件库搭建的初级阶段并不是越多越好，而是需要有效的覆盖那些经过规划的业务场景即可。
• 最后，组件库并不是构建完就结束了，是需要在后续项目中逐步维护与更新的长期积累过程。

任何组件库的构建都离不开一个优秀的团队在整个设计过程中的协同，十分感谢参与的设计师与前端工程师们。上文仅是个人参与过程中的一些经验总结，还不够全面，同时篇幅有限，关于组件的具体设计考量无法一次详尽，欢迎一起讨论组件库及标准化设计体系相关的更多内容。

文章来源：优设

说到渲染引擎就不得不提到延迟渲染，基本上一个引擎如果没有实现延迟渲染就不能说是一个好的渲染引擎，不过可惜的是three.js并没有实现延迟渲染（ps：呼吁作者赶紧实现mrt吧）。由于没有mrt和延迟渲染，本来不打算写后处理的，但是即使没有，我们也希望能实现一些炫酷的效果，那就在现在的基础上对three.js进行简单的改造来实现一套高性能的后处理渲染器吧。

要实现后处理我们首先要考虑需求，是否要兼顾移动端，是否要兼顾大屏（4k），是否要支持webgl1，是否要在各种显卡中都有一个还算不错的性能。目前我主要考虑的是：性能要好，可以兼顾大屏，不打算完美支持webgl1，尽量多使用webgl2的特性。后面所有的性能测试为都以N卡作为性能测试指标，先不管AMD卡（AMD抗锯齿的处理性能会高些的，但是动态处理性能会偏低，这里有很多细节问题）

好了，我们关心的是好的性能，尽量多使用webgl2的特性，尽量能兼顾大屏（这里主要是要注意显存问题），现在开始准备我们的渲染器吧

要完成一个后处理渲染器，我们首先要考虑抗锯齿，常用的有超采样技术和多重采样技术，具体可以看这个介绍 添加链接描述

three.js已经实现了SSAA，SMAA，TAA这三种超采样技术，效果都还不错，具体实现three.js都有例子，就不详细说明了。SSAA抗锯齿效果是最好的，但是性能最差，现实情况下根本无法使用。SMAA性能会好一些，2000个物体差不多掉15帧吧（SMAA比FXAA计算稍微复杂一些，SMAA研究的少，不知道能不能解决line的锯齿问题，如果知道的欢迎留言）。SMAA效果基本可以接受，但是2000个物体掉的帧率还是有点多，这个也不是我们首选的。TAA效果很好，如果场景里面很少动的东西，它是个不错的选择，如果有运动的物体或者动画等等，基本上抗锯齿就没效果了，理论上应该可以实现动态的TAA，但是用目前的技术很难实现。所以TAA先不考虑加入我们的后处理渲染器（真实使用场景下一般都有动画或者贴图流动效果，所以TAA无法使用）。

SMAA:效果不错，开销15帧左右（2000物体）

SSAA：效果最好，开销太大 （2000物体基本已经没有了帧率）





TAA：效果基本和SSAA差不多，但目前只有静止的时候才有效果



再来看看多重采样MSAA，这个特性必须使用webgl2，是webgl提供的方式，和浏览器自身的抗锯齿原理一样，效果不错，和正常渲染的结果没有区别，性能开销也不是太大，前提是我们不要使用stencilbuffer。而且three.js MSAA这块的释放有些小问题，详细可以在deallocateRenderTarget这个接口中进行修改。现在我们可以把MSAA作为主要的抗锯齿技术。MSAA虽然性能开销不大，但是唯一的不足是比较吃显存，如果是大屏，而且显卡不好的话还是容易崩，无法开启。因此我们还要继续选择一个开销小不吃显存的抗锯齿（当然也可以考虑SMAA，目前由于帧率开销较大（2000物体掉了15帧左右），我们不考虑加入SMAA）

MSAA：基本没有帧率开销，效果不错，但是耗费显存（2000物体）



最后的备选方案就是FXAA了，FXAA可以参考这个文章：添加链接描述讲的很详细，FXAA性能开销很小，但是效果很一般，特别是细线的锯齿没法解决，转动摄影机边缘的闪动效果也无法解决，而且还有一个问题是由于FXAA就是靠边缘模糊抗锯齿，所以必然导致画面会略有模糊。但是它最大的好处是开销很小而且不耗费显存，并且集成到后处理渲染器中最简单。但是当显存不足显卡太差的时候它还是个不错的选择。因此需要加入FXAA。

FXAA：效果一般，开销很小，无法解决线的锯齿问题，带来模糊（2000物体）

我们看了下各大引擎，基本每个引擎都实现了FXAA，还有很多引擎实现了FXAA3，FXAA3效果会好一些，但是依然无法解决线的问题。cesium的抗锯齿就是完全采用FXAA3，效果还可以接受，所以目前我们把cesium的fxaa3_11拿过来用，最终引擎选择使用MSAA加FXAA3_11的抗锯齿策略（当然SMAA和TAA也可以选择）。

HTML中如何引入图标



在头部引用在HTML中里面引用一个东西，。在头部引用<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"&gt;&lt;/script&gt;

然后在网上搜索font awesome。可以进那个官方（外国网站比较卡)。以下为点进那个中文网–字体图标



点击右上角图标库





3随便点一个进去





4复制<i class="fa fa-address-book-o" aria-hidden="true"></i>

引入你的代码中<span><i class="fa fa-address-book-o" aria-hidden="true"></i>></span>



<div><i class="fa fa-address-book-o" aria-hidden="true"></i>></div>

1

在div或span里引用，可以实现块状元素和行内元素的功能，不用管i标签，改变图标大小用font-size，调上下高度line-height，左右位置text-align。

部分图标可以引用不了，大致样式

3.完美是最无情的禁锢

是什么

ES5提供的数组的方法。

reduce() 方法接收一个函数作为回调函数（accumulator），数组中的每个值（从左到右）开始缩减（其实就是从左往右开始对每个数执行回调函数），最终为一个值。



PS: 回调函数的返回结果类型和传入的初始值相同



语法以及参数

arr.reduce(  callback(accumulator, currentValue,index ,array ) ,initialValue )

1

initialValue 可选

如果有的话则作为，第一次调用 callback函数时的第一个参数的值。

如果没有提供初始值，callback则使用数组的第一个元素，作为第一次调用的初始值。

在没有初始值的空数组上调用 reduce 将报错。



accumulator

默认传入上一次调用回调函数的的返回值。

初始值： initialValue存在的话，则是initialValue 若没有则是数组的第一个元素



currentValue

数组中正在处理的元素。



index 可选

数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。



array可选

调用reduce()的数组



一个小小的例子

例1 无initialValue

var  arr = [1, 2, 3, 4, 5];

sum = arr.reduce(function(result, cur, index, arr) {

    console.log(result, cur, index,arr);

    return result+ cur;

})

console.log(sum) // 最后的结果是15



result cur index arr

第1次 1 2 1 [1, 2, 3, 4, 5]

第2次 3 3 2 [1, 2, 3, 4, 5]

第3次 6 4 3 [1, 2, 3, 4, 5]

第4次 10 5 4 [1, 2, 3, 4, 5]

例2 有initialValue 传入10

var  arr = [1, 2, 3, 4, 5];

sum = arr.reduce(function(result, cur, index, arr) {

    console.log(result, cur, index,arr);

    return result+ cur;

},10)

console.log(sum) // 最后的结果是25



result cur index arr

第1次 10 1 0 [1, 2, 3, 4, 5]

第2次 11 2 1 [1, 2, 3, 4, 5]

第3次 13 3 2 [1, 2, 3, 4, 5]

第4次 16 4 3 [1, 2, 3, 4, 5]

第5次 20 5 4 [1, 2, 3, 4, 5]

回调函数的返回值

上面的例子返回的都是一个整型数字，如果希望返回其他类型的数据呢？



这个就跟accumulator的初始值有关系了。

下面的例子我们传入的是一个object {sum: 0}



var items = [0,1,2,3,4];

var reducer = function add(sumT, item) {

  console.log(sumT)

  sumT.sum = sumT.sum + item;

  return sumT;

};

var total = items.reduce(reducer, {sum: 0});

console.log(total); // {sum:1130}



运行结果



 {sum: 0}

 {sum: 1}

 {sum: 3}

 {sum: 6}

 {sum: 10}



reduce()的应用

1. 数组扁平化
   
   递归+reduce
   
   
   
   let arr = [1, 2, '3js', [4, 5, [6], [7, 8, [9, 10, 11], null, 'abc'], {age: 12}, [13, 14]], '[]'];
   
   
   
   function flatten(arr) {
   
     if(Array.isArray(arr)) {
   
       return arr.reduce((prev, cur) => {
   
          // 如果遍历的当前项是数组，递归调用flatten
   
         return Array.isArray(cur) ? prev.concat(flatten(cur)) : prev.concat(cur)
   
       }, [])
   
     } else {
   
       throw new Error(' 当前参数不是数组')
   
     }
   
   }
   
   console.log(flatten(arr));
   
   
   
   PS:这里的throw new Error只是用来判断一开始的arr，这是因为在递归只传入数组。
   
   
   

本文作者结合实际案例，跟大家分享一下在RARRA模型下，如何做用户增长？

从AARRR到RARRA的运营思路转变

众所周知，AARRR经典的增长黑客体系，也称之为「海盗法则」，分别是获取、激活、留存、变现以及推荐。提出这个模型的 Dave McClure 认为，所有创新型、成长型的企业都应该按照这样的模型来做增长。

AARRR专注于获客（Acquisition），作为一个2007年提出的概念， AARRR模型可能已经不再适用互联网运营这个瞬息万变的场景。原因有二：

（1）获客成本增加

市场竞争激烈，用户获客成本已经不再便宜，一组数据显示：阿里线上获客的成本翻了 6 倍， 京东的获客成本翻了 1.5 倍，趣头条用户获取成本增加了 8 倍，百度的流量获取成本增长了 41%。在当前的情况下，以拉新获客为中心的增长模式意味着要比十年前这个模型提出时平均增加5倍以上的成本。

（2）流失率高

一组数据显示，现在平均每个App在安装后的情况：前3天内将流失掉77％的DAU。在30天内，它将流失90％的DAU。而到了90天，流失率跃升到95％以上。不管你是否心存怀疑，这就是目前众多创业公司所面对的现实窘境，它创造了Brian Balfour所说的“无意义成长之轮”。

因为以上两个原因，现在黑客增长的真正关键在于用户留存，而不是获客。所以我们需要一个更好的模型——就是RARRA模型。

AARRR与RARRA的区别

RARRA模型是托马斯·佩蒂特Thomas Petit和贾博·帕普Gabor Papp对于海盗指标-AARRR模型的优化，RARRA模型突出了用户留存的重要性。

简单的说，AARRR模型的核心在于获客，而在RARRA的模型下，专注用户的留存。

RARRA模型下，如何做用户增长？（成功案例分享）

分享一个我们前不久自己做的RARRA模型下用户增长的成功案例：

我们做的是一个在线教育平台，课程的分类包括：

• 以拉新为目的的新用户免费体验课（0元）；
• 以转化为目的的低价专题课（50元以内）；
• 以盈利为目的的短期班课（999元以内）和系统课（1000-4000元）。

这样的课程显然是以拉新-留存-转化个流程进行的设计，也是现在很多在线教育平台通用的课程模式设计，其实本质上和其他行业的平台也是类似。

在RARRA的模型下，数据驱动更重要。因为如果专注获客，可以在渠道选择等方面凭借经验和主观判断来选择，但是专注留存，就必须用数据分析找出每个留存环节的差异因素，进而制定最的方案大幅度提升留存率。在在线教育平台的运营中，因为从推广到课程设计、课程质量、售前售后服务等，包含大量影响营收的因素，因此数据分析方法也相对复杂。

数据分析的第一步，也是关键点在于：构建指标体系。

对于一个平台来说，一般的数据指标都非常多，但必须确定唯一关键指标（OMTM），也是大家常说的北极星指标，作为驱动的方向。

回归商业本质，一切商业模式的终极目标当然是收入，但是收入这个指标并非北极星指标，而是决定北极星指标的上级因素。如下图所示，平台收入=有效听课用户数*客单价。因为课程的客单价有大致的市场标准，不会做太多变动。因此经过分析，我们认为直播课程运营的北极星指标是——有效听课用户数，也就是购买了课程并且有效听课的用户数量。

那么接下来，就要对北极星指标进行分解。

从指标拆解来看：

• 有效听课用户中的新用户数=外部流量导入*转化率；
• 有效听课用户中的老用户数=老用户数*续报率。

在最后分解的四个指标中，除了老用户数是直接由新用户转化率决定的之外，流量、转化率、续报率三个指标都是可以通过运营来提升和改善的。

但是由于时间和资源的限制，对于三个指标，运营策略上肯定会有侧重点和先后顺序。

一开始，我们采用的是AARRR模型，把重点放在提升流量和新用户转化率上。通过广告投放、拉新红包等大量引流，并在课程设计上做了很多设计促进新用户转化率。最后流量和转化率都提升了，但问题是，用户停留在0元免费课和低价转化课上，而续报高价课的有效用户很少，这样看似产品新增用户很多，热热闹闹，但整体的营收还是上不去。

团队分析后认为，AARRR模型可能并不适合我们。既然续课率出了问题，应该尝试采用RARRA模型，把运营重点放在留存上。

于是，数据组开始探索留存的问题点出现在哪里。

我们拉出不同维度用户数据进行对比，最后发现新用户和老用户的续课率差值竟高达53%。

也就是说，新用户进行初步低价课转化后，在从低价课到达正价课的留存续课阶段，是流失最严重的一块。

找到了最痛的点，问题其实已经解决了一半。

接下来，通过各种数据因素分析，我们判断出了影响新用户续课率的几个重点因素，分别是：用户来源、课前服务、课程质量。并且对每一个因素继续分解深挖。（标红为续课率效果最好）

• 在课程质量方面，三个细分数据指标综合可以衡量课程质量。
• 课前服务时间上，通过数据对比，我们发现课前两周进行服务的效果最好，续课率也最高。
• 用户来源上，短期班课的用户续课率远高于其他两个来源。

根据以上的数据分析，给出了运营策略指导为：

1. 教师和教研团队狠抓课程质量，改变以前主观评价模式。用出勤率、完课率和作业完成率三者综合考核教师KPI；
2. 助教团队的课程服务时间前置，从以前的课前一周和课后进行服务，改为课前两周开始进行用户服务；
3. 服务人群的重点转移到短期班课新用户上。

改进后的效果：

通过以上三个方向的运营策略调整，同样的团队，仅用了一个月的时间，就把新老用户续课率的差值从53%缩小到了9%！效果非常明显。同时平台整体收入也大幅增加，而运营成本却比以前大规模进行渠道投放大大节省了。

阶段性的成功，正是及时调整了用户增长模型，并采用系统的数据分析方法驱动用户增长。可以看出，数据驱动下，最终给出的运营策略非常简洁，但前面数据组背后付出的努力和精力是很难被看到的。这正是我们想要的结果，扎根稳且深入，但呈现的却是简洁明了的运营指令。