正如Redux一样，当你不知道是否需要Vuex那就是不需要。不要因为想用Vuex而使用它。

用过Vue的人都知道，Vuex是Vue的一个全局状态管理模块，它的作用是多个组件共享状态及数据，当某个组件将全局状态修改时，在绑定了该状态的另一个组件也将响应。实际上可以将Vue理解为一个function，在Vue的作用域中有一个数据代理，在每个Vue的实例中都能对其读和写



我们都知道Vue的数据驱动原理是用Object.defineProperty()进行数据代理，在setter中对数据绑定的view进行异步响应（vue3.0则是使用proxy）

通过查看Vuex源码可知Vuex的核心原理就是在Vue的beforeCreate钩子前混入（mixin）Vuex，并在init中将$store属性注册到Vue中





为了使案例更具体，我这还是简单使用脚手架搭了个项目（可参考另一篇文章），虽然只有两个组件，但是能清晰的理解其用法，我的src目录如下，除了最基础的App.vue和main.js外只有两个组件和一个store



先说明一下两个组件的作用，第一个组件是输入框，在里面输入字符，在二个组件div中显示，就是这么简单

首先我们使用常规方式(EventBus)实现一下，这里只需要在mainjs中创建一个vue实例，然后注册在vue中就可以通过事件emit和on来进行组件通信

main.js

import Vue
  from 'vue'
import App
  from './App'
Vue.prototype.$eventBus = new Vue()
 
new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})
<template>
  <div>
    {{
      val
    }}
  </div>
</template>
 
<script>
export default {
  name: "divComp",
  data () {
    return {
      val: ''
    }
  },
  mounted () {
    this.$eventBus.$on('changeVal', (e) => {//监听输入事件通过eventBus传递信息
      this.val = e
    })
  }
}
</script>
 
<style
  scoped>
 
</style>

如果到这一步，你仍然感觉难度不大，那么恭喜你，Vuex的使用已经掌握了一大半了

下面，我们来说说actions，在说actions之前，我们先回顾一下mutations，mutations中注册了一些事件，在组件中通过emit对事件进行触发，达到处理异步且解耦的效果，然而官方并不推荐我们直接对store进行操作
官方对actions的说明是：Action 类似于 mutation，不同在于1.Action 提交的是 mutation，而不是直接变更状态。2.Action 可以包含任意异步操作。

也就是说，我们要把组件中的emit操作放到actions中，而在组件中通过某些方式来触发actions中的函数间接调用emit，此时，为了让action更直观，我们添加一个清除输入框字符的方法，当点击清除按钮时清除state.val
在输入框组件中将value绑定到state上

<template>
  <input type="text" @input="inputHandler" :value="this.$store.state.val" />
</template>
 
<script>
export default {
  name: "inputComp",
  methods: {
    inputHandler(e) {
      this.$store.dispatch("actionVal", e.target.value);
    },
  },
};
</script>
 
<style
  scoped>
</style>
在另一个显示数据的组件中新增删除按钮并绑定删除事件，通过dispatch告知store并通过emit操作state

<template>
  <div>
    <button @click="clickHandler">清除</button>
    <span>{{ this.$store.state.val + this.$store.getters.getValueLength }}</span>
  </div>
</template>
 
<script>
export default {
  name: "divComp",
  methods: {
    clickHandler(){
      this.$store.dispatch('actionClearVal')
    }
  },
};
</script>
 
<style
  scoped>
</style>
最后在store中新建删除的actions和mutations

import Vue
from "vue";
import Vuex
from "vuex";
 
Vue.use(Vuex);
const state = {
  val: ''
}
 
const mutations = {
  changeVal(state, _val) {
    state.val = _val
  },
  clearVal(state, _val) {
    state.val = ''
  }
}
const actions = {
  actionVal(state, _val) {
    state.commit('changeVal', _val)
  },
  actionClearVal(state) {
    state.commit('clearVal')
  }
}
const getters = {
  getValueLength(state) {
    return `长度：${state.val.length}`
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
最终效果如下：


到这里为止，Vuex的基本用法就介绍完毕了。
然而除此之外，Vuex官方还提供了辅助函数（mapState,mapMutations,mapGetters,mapActions）和Modules（store的子模块，当有许多全局状态时，我们为了避免代码臃肿，就可以将各个store分割成模块）方便我们书写
下面我们用辅助函数重新实现一下上述功能
输入框：

<template>
  <input type="text" @input="inputHandler" :value="value" />
</template>
 
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "inputComp",
  computed: {
    ...mapState({ value: "val" }),
  },
  methods: {
    ...mapMutations({ sendParams: "changeVal" }), // sendParams用来传递参数,先把sendParams注册到mutations上，输入时触发sendParams
    inputHandler(e) {
      this.sendParams(e.target.value);
    },
  },
};
</script>
 
<style
  scoped>
</style>
显示框：

<template>
  <div>
    <button @click="clickHandler">清除</button>
    <span>{{ value + valueLength }}</span>
  </div>
</template>
 
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  name: "divComp",
  computed: {
    ...mapState({ value: "val" }),
    ...mapGetters({ valueLength: "getValueLength" }),
  },
  methods: {
    ...mapActions({ clickHandler: "actionClearVal" }),
  },
};
</script>
 
<style
  scoped>
</style>

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

大屏可视化界面设计可谓是当今行业、企业发展的见证，生动直观地再现了行业、企业的全貌。不仅作为展示，方便了解、监督；同时可以作为一个有效的管理平台，带来效益。大屏界面面向范围广，协同性好，易于被采用。下面几个大屏的界面设计，沉稳的背景上，加上亮色作为点缀和强调。既不失其风格，又富有灵动性。

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

蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。

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

更多精彩文章：

   大数据可视化界面设计赏析（一）

   大数据可视化界面设计赏析（二）

   大数据可视化界面设计赏析（三）

  大数据可视化界面设计赏析（四）

  大数据可视化界面设计赏析（五）

  大数据可视化界面设计赏析（六）

  大数据可视化界面设计赏析（七）

  大数据可视化界面设计赏析（八）

大数据可视化界面设计赏析（九）

大数据可视化界面设计赏析（十）

   其次，在自下而上的场景里，业务经验对于结果的影响可 能会更大，所以对于二级指标的预测，尽量依赖公司内部 的历史数据、市场上相似公司的实操数据、以及预测模型 来判断，控制个人经验对于结果的影响； 最后，通过自下而上的方式得到的业务预测结果，一定会

汇总到公司层面统一讨论和调整，再重新下发到业务部 门。所以后续可能会需要结合自上而下的方式，调整业务 预测结果，向公司的大目标看齐。

 

小结

现在你知道了，无论是自上而下，还是自下而上。本质 上，业务预测就是缩小公司发展目标和业务实现能力之间 的差距。 无论作为专业的数据分析人员，还是业务部门的操盘手， 都需要理解，没有完美的工具和模型， 实际问题；也没有绝对的权威，可以脱离数据做出正确的 决策。 可以脱离业务解决 网景(Netscape) 公司前任CEO Jim Barksdale的话， 就 可以概括这种平衡： “如果我们有数据，就让数据来发声。如果我们仅仅是意见 不一，那就得听我的。

          好，学完这节课的你已经掌握了业务预测的基本方法，可 以通过指标拆解、评估、分析和验证四个步骤对公司或者 部门的业务进行更加准确和全面的预测，为全年业务目标 的实现打下扎实的基础。

用数据思维武装头脑、洞察商业，做一个万事心中“有数”

的思维高手。

今天的分享，你学会了吗?

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

 

不同的阶段，临摹的目的不尽相同。一般来说，前期临摹更多的是练习软件、技法，后期练习别人的风格表达，综合运用。所以，我把临摹分为技法临摹、半原创到原创 3 个阶段，每一个阶段没有绝对的界限，都是在积累创意，完全是可以用到自己的项目中去的。

今天会分享一个我当年做临摹练习并融入实际项目中的小案例。

临摹

大概是在 15 年左右，在网上看到锤子设计师设计的一个图标，觉得非常惊艳，当时就想把它临摹下来，这是当时临摹的一个效果。

△ 原作

△ 这是我当时临摹的图

我在临摹这张图的时候，想达到的目标是能根据自己的 logo 色及文字，做一个半原创的设计。

然后实际练习中，不断观察原作发现有一些细节值得学习：

1. 图标分为水上和水下，2 个层级，在水下的图形因为折射的关系，会发生扭曲
2. 水下会有深浅的颜色变化
3. 真实的水会流动，所以在水下会画出带明暗细节的水纹线条
4. 水下会有气泡，且气泡的产生符合真实场景，气泡的大小由小变大
5. 水面的边缘因为透光而产生边缘反射
6. 投影因为红色盒子的影响，会偏红色色相，并且有近实远虚的关系
7. 盒子的边缘会有 1px 的高光和反光
8. 背景为了增加图标的展示效果，也做了单独的设计，把四周压暗，然后加上杂色，使得整体的质感更加强烈

当时，对我来说，在练习的过程中有一个难点就是关于第 3 个细节水的纹理执行有些难度，因为其中包括了粗细变化、虚实变化、明暗变化等等，单纯的用图层样式或者矢量去画的话，难度都比较大。这个细节当时耗费了我不少时间，后面突然想到其实也可以用合成的办法来实现，然后我去找了真实水纹的图片进行叠加，很快就搞定了。所以，只要能达到效果，不能太过于局限某一种思路。

分析并完成这些细节后，就是你在做这个练习中学到的点，尝试把它们学以致用。

运用

记得当时在 360 时需要设计一套关于摩洛哥蓝色小镇的官方定制版主题图标。从搜集的当地代表性的图片中发现，多彩颜料是当地的一大特征，所以决定以染料为关键词去画一个图标，又因为颜料本身自带多彩的特点，所以以它为主题图标就很合适了。

然后在思考这个图标的时候，首先会应用参考图中的配色，并结合染缸的造型做出了第一版的效果。

这个效果虽然是表达了那个意思，但缺乏亮点，联想之前练习过水的技法表达（临摹中第 3 点细节运用），正好可以利用水的纹理做下强化，这样就优化出了第二版。

嗯，看起来感觉有了一些特点，但感觉缺乏细节，接着思考水除了有纹理高光，应该还会有边缘高光（结合临摹中第 5 点细节），所以在边缘尝试加了高光，增加体积感，做出水要漫出来的感觉。

如果只有这一层高光的话，细节度感觉还是不大够，在之前的文章《如何从优秀作品中偷师，用一个游戏案例教你思路》我有分享到在 UI 大佬的作品中能学到他们对于 1px 高光的使用（临摹作用中的第 7 点），这里因为是液体的材质表现，所以增加一个高光点增加水的通透感。

到目前为止，似乎看起来已经差不多了，但考虑到现实世界中，溢出的彩色液体在透光性很好的情况下，也会对周围环境产生影响，所以我在颜料设计的四周，配上对应的四种颜色的模糊投影（临摹练习中的第 6 点）。

在思考下，在临摹的图标中为了使得图标更加自然，作品中其实结合了很多真实世界中会发生的情况，比如水的折射，气泡的比例，深浅等等，那对于染料来说，会有怎样的真实情况发生呢？我当时想到一点是，染料在用的过程中其实很容易洒出来，所以图标背板上现在太过于干净了，增加一些细节能够使得背板能够跟主体物产生关联，也更加自然。嗯，又是一个小细节。

最后，我们对比下第一版和最终版的效果，细节确实丰富了很多。

一张动态图可以更加清晰的看到变化。

总结

这次图标的优化过程，我觉得有几个要点对我来说印象深刻的：

图标的风格可以是扁平的，但想要增加自然舒服的细节，一样可以像画写实风格那样仿照现实。你需要留心观察这个世界，就算是一张照片中也能有非常多可以利用的细节。

碰到难做出来的细节，多想想有没有更效率的办法。比如在做水纹理的时候，一开始就想着完全靠鼠绘画出来，结果效果一直不大好，然后利用 PS 合成的方法，很快就能把效果做出来。

对于图标来说，要注意其整体性。比如图标中的主体物不要跟背景脱离，不要让图标背板只是作为一个容器，而要让背板也成为图标本身的一部分，这样图标的整体性会更好。

临摹的过程中，一定要多分析，多记录自己觉得是细节的点。每一次记录，都可能是将来设计时提升细节的灵感来源。

以上内容只是我在日常练习中应用到实际项目中的一个小案例，其实还有非常多的灵感想法都来自于你平时做的练习，关键是要多动手，多总结，才能增强自己对细节的把握能力。

文章来源：优设网     作者：彩云译设计

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

好的，看到⼤家这么热情，那班班接下来就化身Johnson

编辑导语：用户的体验感对于一个产品来说，是至关重要的。一个好的产品能够充分照顾到用户的感受，从而拥有大批的忠实用户，而品牌升级则是体现产品定位和发展策略的不二之选。当体验设计遇到品牌升级，设计师该如何做？本文作者对此展开分析讨论，一起来看看~

01 用户体验设计的现状

1. 同质化的现象

过去，我们在用户体验中一直强调以用户为中心，追求给用户带来更好的体验，不断强调一致性、易用性、可用性等等。但如今，我们放眼手机里的app的用户体验，在过去十几年的积累下，用户的使用习惯、用户的认知都得到了很大的提升，产品的基础体验也基本都做到了使用流畅、一致性的现状。

但这却带来一个问题：同质化严重。

比如，当我们打开电商类的app，发现某东越来越像某宝，xx越来越像xx。可能我们抹去了logo之后就不知道这究竟是哪家app了。

甚至，我还发现有的公司在设计时是从B抄个设计样式，再从A抄个设计样式，最后在从T上抄个样式，最后设计结果成了大家看到的现象：设计越来越趋同。

2. 品牌升级的现象及价值

大厂的动向

最近这两年，我们频频看到大厂的一些设计动作：品牌升级、设计语言升级。

很多外行人站在一个旁观者角色对升级的设计嗤之以鼻：“这升级了什么？怎么跟没做一样？”“花了几百万就做了个这，真不值”…………

实际上，其中的背后不是简单的设计样式更换，而是战略定位的调整。

比如支付宝去年突然换了logo的颜色，而这背后的战略调整是支付宝升级成生活开放平台的战略。

比如淘宝去年也换了字体logo的设计，而这背后的战略是新淘宝要更好的链接内容、用户、商业。

3. 品牌升级并不是仅仅换个logo

所以，看到这里，我们首先明确了品牌升级、设计语言升级不仅仅是设计样式变化，不是设计师随随便便设计画了个图形，随随便便吸了个颜色，而是基于品牌定位与品牌战略调整的背景，是通过多维度调研，积累了很多有价值的信息，经过科学的分析推导明确了设计方向，最终才形成可落地的品牌升级设计方案。

那么，问题来了！既然品牌升级了，在用户体验设计中如何体现新升级的品牌感呢，如何能体现品牌的定位和战略呢？

02 体验设计中如何体现品牌感

当我们在收到品牌设计方案后，就开始面临到体验设计升级如何体现品牌感了，这个时候不是仓促的先定义新升级的颜色等样式问题，而是需要先充分理解战略背后的意义，理解用户、理解目标、理解新商业方向……，再聚焦收拢在关键点上，从而针对体验设计中的设计体系定义好设计原则，在最终落地到设计元素上，比如颜色、控件、交互等。

设计过程：品牌战略理解-收拢关键点-定义设计规则-落地设计元素

1. 理解战略

战略理解实质上就是公司未来业务调整，方向调整，目标调整，我们的设计一定是基于这个方向的。

比如2016年我在公司一次红蓝战略定位后进行了2.0生态电商改版，这个红蓝战略从字面意思理解很抽象，但实质是内容化、视频化的业务方向，我根据这样的战略定位设计了创新的2.0的生态电商设计方案获得了认可。

2. 收拢-发散-聚焦

理解完战略方向后，一般会进行一些发散性的收集。比如滴滴在早期几年前的一次品牌升级分享案例里，那时候升级前品牌语是“滴滴一下美好出行”，后来在专车、顺风车业务发展后，各业务定位模糊，需要针对业务重新定位梳理，经过发散了很多关键词，最后针对不同业务线聚焦在舒适、活力、正式三个关键词，形成新的滴滴设计语言。

资料来源：滴滴李大声《c12d调分享》

3. 设计规则

设计原则也就是我们设计中的一份指南，是建立在前面的分析推导后，他所传达的是设计价值观。指导我们在设计中什么该做什么不该做。

说到这里，这就让我想起来经常看到很多设计团队定义自己的设计原则是：清晰、高效、简洁。这么一看没毛病，的确设计是要保持信息的清晰传达、有效的展示、简洁一些。但这些定义太过宽泛，毫无意义，根本无法指导实际的设计。

设计规则应符合什么规则呢？

首先，设计规则要贴近业务，真实而有效。

比如做外卖的要突出快、服务、准时的定位。做出行的要突出安全的定位。做金融的要突出收益增长等等，我们不能就笼统的把所有的不同行业业务规则都定义成清晰、高效、简洁，这并不能形成差异。

以平台要升级为“安全”为例，我们需要知道什么才是“安全”的设计规则，除了绿色、蓝色，还有什么行为才会产生产生信任安全感。比如规范、统一、征信公信力、理性的设计。

这样我们就可以针对升级“安全”的设计体系规范起来，把信息以用理性化的设计来呈现表达。

设计规则要有态度

实际上，每个设计都是有意义的，每个规则的背后都是不平凡的工作。举个动效的例子，有的设计师会认为动效看起来很酷，那就加的越多越好，结果适得其反，用户可能因为动效太多太酷不知道该干什么了。

谷歌在他的设计体系里提到“每个动效都是有意义的”，可见谷歌对动效的态度表达了自己独特的设计规则的魅力。

蚂蚁金服在自己设计体系里提到的独特四点设计价值观：自然、确定、生长、意义

• 自然：感知自然、行为自然
• 确定：设计确定，保持克制、探索设计规律，用户确定，体验一致
• 意义：明确目标，挑战过程
• 生长：价值连接、人际共生

这每一点都不是简单的“清晰高效”这么简单，具有深远的设计指导意义。以“自然”为例，用户对图形、色彩、图标等视觉感受的信息，遵从自然规律，降低用户认知成本。举例：明明红色是总所周知的警戒颜色，我们用绿色来做警戒色，这就违背了自然规律。

说到这里，我们大概就能清楚明白设计原则的意义了，当面对市面各种设计潮流：抽屉设计风、大字体设计风、新拟物设计风来临时，我们就可以从设计原则来理性判断如何取其精华，去其糟粕，为我们的业务和品牌传播来使用，而不是盲目的追赶潮流

4. 设计元素强化品牌记忆点

最后，从设计规则推导出来后，到具体的设计元素：颜色、图标、配图、文字设计等，我们还需要结合品牌找到具有记忆性的点，形成dna记忆符号，这个记忆符号给用户在视觉、触觉等感官上加深印象。

说到最具有品牌记忆点的无疑是耐克、阿迪、可口可乐这些图形深入人心，还有蒂芙尼蓝等等。

比如最近要上市的知乎，核心定位是社区价值，他的logo以及app的开屏都体现了社区交流的属性。

比如最具阿里云更新的品牌升级，利用光标这个符号贯穿整个设计体系，形成独特的超级符号，可以说是一个很经典的案例。

资料来源：阿里公众号

当然，提炼出具有记忆点的品牌dna的超级符号是需要经过长期推演和长期传播形成的品牌记忆点。

最后，总的来说，当体验设计遇到品牌升级，不是简单的画个图形，吸个颜色，每个设计背后都有遵循的依据，都有背后的科学分析推导。所以，我们不要再盲目拿清晰、高效、简洁来作为设计语言的理念了，需要探索真正有独特观点，贴近业务，贴近战略规划的设计价值理念，来指导未来长远的设计发展。

文章来源：人人都是产品经理   作者：Hellen咏舍

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