如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1.无序列表
无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分，列如：

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>

2.有序列表
有序列表即为有顺序的列表，其各个列表项会按照一定的顺序排列，列如：

<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>


注：列表可以嵌套。

3.超链接标记< a>
1.超链接
一个网站通常由多个页面构成，进入网站时首先看到的是其首页，如果想从首页跳转到其子页面，就需要在首页相应的位置添加超链接。其基本语法格式为：

<a href="跳转目标" target=“目标窗口的弹出方式”>文本或者图像</a>
1
其中，target有两种取值方式：

–blank （在新窗口中打开）-self（默认在本窗口打开）

2.伪类
超链接标记< a >的伪类 含义
a:link{ CSS样式规则； } 未访问时超链接的状态
a:visited{ CSS样式规则；} 访问之后超链接的状态
a:hover{ CSS样式规则；} 鼠标经过，悬停时超链接的状态
a:active{ CSS样式规则；} 鼠标单击不动时超链接的状态
--------------------- 
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

Tab bar 设计中，有一个很重要但却常常会被设计师们遗漏的关键点──tab 切换时的 「图标动画设计」。如这些 APP 的底部 tab 设计都使用了这一种方式（以下视频）：

Tab bars图标动画的作用

精彩的图标动画，对整体的设计具有画龙点睛的作用，降低 tab 切换时的枯燥感，提升操作的愉悦度和期待感。甚至可以通过 tab 的动画设计给用户传达出整个 APP 设计的品牌及理念。

1. 动静对比

动态的设计丰富了图标更多可能性的表达，结合不同的动态效果表达出不同的情绪或情感。而除了情感的表达之外，最基础的作用在于动态比静态更加吸引眼球，增加视觉关注度，因此在切换 tab 时具有更强的视觉冲击力。

2. 柔和与生硬

缓动的动效过渡，相比于无动效的设计，在 tab 切换时整体的视觉感受会更加柔和、轻量。过渡直接的反馈，容易造成生硬而不具美感。

3. 趣味的表达

由于动效的加入，我们在设计 tab 切换时会变得更加多元化，而不是单纯的设计一个动作的反馈。在过渡的时间差中，可以进行很多趣味的表达。

3. 情绪代入

图标结合表情的设计，运用动效的设计，让整体的情绪感受更加直观。如下图案例，默认态与选中态通过前后的差异对比，点击后出现的表情惊喜，具有不一样的情绪变化。

Tab bar图标动画的基础类型

动画的设计是多样化的，Tab bar 图标动画的类型实际上并没有明确的划分，这里主要列举的是自己在日常浏览设计网站时的收集，以及个人认为比较常见的一些类型。我们可以基于这些常见类型的设计，对我们的设计进行再升华，从而提高整体设计的质感和趣味。

1. 缩放动画

点击后通过一定的比例 「缩放」 反馈，突出 tab 之前的变化，从而强化了 tab 操作的感知，提升对于操作区域的视觉聚焦。结合不同的缩放效果，可以呈现出不同的视觉感知，缩放动画大致分为线性和弹性两种类型。

线性缩放

图标在放大或缩小的过程中，使用了匀速的动画效果，整体动画一步到位、干净利落。整体视觉感知较为柔和。

弹性缩放

带有弹性缩放的 tab 反馈，让整体的设计更加具有趣味性，相比线性缩放也更有视觉冲击力。图标的运动规则：先从 0 放大到最大（数值根据实际情况设定），然后再回弹至正常大小。

2. 透明度自然过渡

让 tab 切换之间的过渡更加自然、柔和。相比于纯静态切换只多了一层透明度变化，但却具有完全不一样的视觉感受。

3. 位移

位移出现的图标会产生一定的速度感，但需要控制位移的速度，过快容易忽略中间的运动轨迹，而影响自然过渡的效果。

4. 抖动

通过图标的左右、上下快速位移或旋转形成，整体的动画效果节奏较快，具有一定的速度感。情绪表达上较为俏皮。

左右抖动

点击后，图标反馈进行上下快速位移。建议来回位移次数不宜太多，控制在 1-2 次左右，次数太多容易显得拖沓。

跳动的图标

点击切换后，图标从底部弹起再回到初始位置，整体视觉感受具有跳动的韵律感。

晃动的图标

旋转抖动的图标比上下或左右会更加具有趣味感。设定图标的中心点或角点为旋转轴，通过来回晃动而形成的效果。

5. 填充

切换时，默认 tab 由线性向面性的转变。填充类型的动画效果整体简单、直接，直观地表达出图标切换前后的对应关系。关键点在于处理好线性与面性图标的细节转换。

中心填充

使用某种几何图形（可以是圆形或其他）通过发散放大的设计方式，结合一定的节奏韵律扩展至填满整个图标。

扫描填充

动画效果从图标的一侧，通过划动变化至填满。

6. 画线-线性轨迹

以线性图标或线面图标中的线运动为主，在设计整套图标时，运动轨迹需要保持统一（线的初始与结束的位置/方向等）。轨迹不一致，容易导致图标的一致性被破坏。

局部细节画线

选择图标的关键细节或图标的特征进行画线设计，增强图标的特征细节，提高图标的记忆点。

整体画线

与局部细节画线基本一致，差别的点在于表达了不同的视觉感受。整体画线从视觉感受上会相对更加饱满。但需要根据图标的复杂程度而定，图标过渡复杂，可能容易造成拖沓的动画效果。

7. 结合容器

结合不同的几何形作为选中图标的当前态的背景，在背景上设计出现的动画效果。既强化了选中当前态，整体的 tab 切换的一致性也较高。

8. 元素介质

设计上结合某种图形元素作为当前选中态，在切换时通过元素的位移、跳动等方式来达到 tab 切换的动画效果。

Tab图标动画的组合形

除了以上单种类型的动画方式外，还可以尝试多种方式结合。通过不同的方式结合可以产生出更多的可能性，让你的设计更加具有创意和打破常规。

1. 填充+画线

2. 填充+抖动

3. 弹性缩放+填充

4. 元素介质+抖动

5. 位移+透明度

更多案例（来自dribbble）

总结

tab bar 的图标动画最大的作用在于解决切换时的枯燥与单调，我们在设计时除了单纯追求动画的变化及多样性之外，更多需要思考的是什么样的动画更符合我们的设计。

本文的主旨是分享自己日常看到的一些动画效果，以及对收集的内容进行的分析。实际的动画样式或者效果肯定远远不只这些，我们可以通过基础的方法再结合自己的创意发挥出更多满足自我设计的表达方式。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

HTML 中的div定义：

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。
用法

div是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

固有的唯一格式表现。可以通过 div的 class 或 id 应用额外的样式。
不必为每一个 div都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 div 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

实例
<div id = " text"><div> <div class = " text1"><div> <div class = " text1"><div>
//div 中可以设置id属性，通过引用id属性来为div设置一些样式

//在style标签中，可以对你写的代码进行样式的设计，样式设计可以通过以下几种方法来写
1.通过引用id来设置样式，在id名称前加上# 格式： #id名称{ }
#text{ }
2.通过class来设置样式，class后面的名字可以是一样的，而id取名唯一，因此在需要设置同类型的样式时可以使用class来设置 格式： .class名称{ }
.text1{ }
3.通过标签名称来设置样式 格式： div{ }
div{ }

样式：
1.width :50px; // 宽度
2.height :50px;//高度
3.border : 1px solid red; //边框,border可以设置三个属性，分别是边框宽度，边框样式（实线，虚线等），边框颜色
4.margin:属性定义及使用说明

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

margin:10px 5px 15px 20px;
    上边距是 10px
    右边距是 5px
    下边距是 15px
    左边距是 20px

margin:10px 5px 15px;
    上边距是 10px
    右边距和左边距是 5px
    下边距是 15px

margin:10px 5px;
    上边距和下边距是 10px
    右边距和左边距是 5px

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

文章来源：站酷

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1 状态共享

随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Observable API ，通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。

如下这个例子，我们将在组件外创建一个store，然后在App.vue组件里面使用store.js提供的store和mutation方法，同理其它组件也可以这样使用，从而实现多个组件共享数据状态。

首先创建一个store.js，包含一个store和一个mutations，分别用来指向数据和处理方法。

import Vue from "vue";

export const store = Vue.observable({ count: 0 });

export const mutations = {

setCount(count) {

store.count = count;

}

};

复制代码

然后在App.vue里面引入这个store.js，在组件里面使用引入的数据和方法

<template>

<div id="app">

<img width="25%" src="./assets/logo.png">

<p>count:{{count}}</p>

<button @click="setCount(count+1)">+1</button>

<button @click="setCount(count-1)">-1</button>

</div>

</template>

<script>

import { store, mutations } from "./store";

export default {

name: "App",

computed: {

count() {

return store.count;

}

},

methods: {

setCount: mutations.setCount

}

};

</script>

<style>

复制代码

你可以点击在线DEMO查看最终效果

2 长列表性能优化

我们应该都知道vue会通过object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止vue劫持我们的数据呢？可以通过object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

export default {

data: () => ({

users: {}

}),

async created() {

const users = await axios.get("/api/users");

this.users = Object.freeze(users);

}

};

复制代码

另外需要说明的是，这里只是冻结了users的值，引用不会被冻结，当我们需要reactive数据的时候，我们可以重新给users赋值。

export default {

data: () => ({

users: []

}),

async created() {

const users = await axios.get("/api/users");

this.users = Object.freeze(users);

},

methods:{

// 改变值不会触发视图响应

this.users[0] = newValue

// 改变引用依然会触发视图响应

this.users = newArray

}

};

复制代码

3 去除多余的样式

随着项目越来越大，书写的不注意，不自然的就会产生一些多余的css，小项目还好，一旦项目大了以后，多余的css会越来越多，导致包越来越大，从而影响项目运行性能，所以有必要在正式环境去除掉这些多余的css，这里推荐一个库purgecss，支持CLI、JavascriptApi、Webpack等多种方式使用，通过这个库，我们可以很容易的去除掉多余的css。

我做了一个测试，在线DEMO

<h1>Hello Vanilla!</h1>

<div>

We use Parcel to bundle this sandbox, you can find more info about Parcel

<a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.

</div>

复制代码

body {

font-family: sans-serif;

}

a {

color: red;

}

ul {

li {

list-style: none;

}

} import Purgecss from "purgecss";

const purgecss = new Purgecss({

content: ["**/*.html"],

css: ["**/*.css"]

});

const purgecssResult = purgecss.purge();

终产生的purgecssResult结果如下，可以看到多余的a和ul标签的样式都没了

4 作用域插槽

利用好作用域插槽可以做一些很有意思的事情，比如定义一个基础布局组件A，只负责布局，不管数据逻辑，然后另外定义一个组件B负责数据处理，布局组件A需要数据的时候就去B里面去取。假设，某一天我们的布局变了，我们只需要去修改组件A就行，而不用去修改组件B，从而就能充分复用组件B的数据处理逻辑，关于这块我之前写过一篇实际案例，可以点击这里查看。

这里涉及到的一个最重要的点就是父组件要去获取子组件里面的数据，之前是利用slot-scope，自vue 2.6.0起，提供了更好的支持 slot和 slot-scope 特性的 API 替代方案。

比如，我们定一个名为current-user的组件：

<span>

<slot>{{ user.lastName }}</slot>

</span>

复制代码

父组件引用current-user的组件，但想用名替代姓（老外名字第一个单词是名，后一个单词是姓）：

<current-user>

{{ user.firstName }}

</current-user>

复制代码

这种方式不会生效，因为user对象是子组件的数据，在父组件里面我们获取不到，这个时候我们就可以通过v-slot 来实现。

首先在子组件里面，将user作为一个<slot>元素的特性绑定上去：

<span>

<slot v-bind:user="user">

{{ user.lastName }}

</slot>

</span>

复制代码

之后，我们就可以在父组件引用的时候，给v-slot带一个值来定义我们提供的插槽 prop 的名字：

<current-user>

<template v-slot:default="slotProps">

{{ slotProps.user.firstName }}

</template>

</current-user>

复制代码

这种方式还有缩写语法，可以查看独占默认插槽的缩写语法，最终我们引用的方式如下：

<current-user v-slot="slotProps">

{{ slotProps.user.firstName }}

</current-user>

复制代码

相比之前slot-scope代码更清晰，更好理解。

5 属性事件传递

写过高阶组件的童鞋可能都会碰到过将加工过的属性向下传递的情况，如果碰到属性较多时，需要一个个去传递，非常不友好并且费时，有没有一次性传递的呢（比如react里面的{...this.props}）？答案就是v-bind和v-on。

举个例子，假如有一个基础组件BaseList，只有基础的列表展示功能，现在我们想在这基础上增加排序功能，这个时候我们就可以创建一个高阶组件SortList。

<!-- SortList  -->

<template>

<BaseList v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseList>

</template>

<script>

import BaseList from "./BaseList";

// 包含了基础的属性定义

import BaseListMixin from "./BaseListMixin";

// 封装了排序的逻辑

import sort from "./sort.js";

export default {

props: BaseListMixin.props,

components: {

BaseList

}

};

</script>

复制代码

可以看到传递属性和事件的方便性，而不用一个个去传递

6 函数式组件

函数式组件，即无状态，无法实例化，内部没有任何生命周期处理方法，非常轻量，因而渲染性能高，特别适合用来只依赖外部数据传递而变化的组件。

写法如下：

在template标签里面标明functional

只接受props值

不需要script标签

<!-- App.vue -->

<template>

<div id="app">

<List

:items="['Wonderwoman', 'Ironman']"

:item-click="item => (clicked = item)"

/>

<p>Clicked hero: {{ clicked }}</p>

</div>

</template>

<script>

import List from "./List";

export default {

name: "App",

data: () => ({ clicked: "" }),

components: { List }

};

</script>

复制代码

<!-- List.vue 函数式组件 -->

<template functional>

<div>

<p v-for="item in props.items" @click="props.itemClick(item);">

{{ item }}

</p>

</div>

</template>

复制代码

7 监听组件的生命周期

比如有父组件Parent和子组件Child，如果父组件监听到子组件挂载mounted就做一些逻辑处理，常规的写法可能如下：

// Parent.vue

<Child @mounted="doSomething"/>

// Child.vue

mounted() {

this.$emit("mounted");

}

复制代码

这里提供一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook来监听即可，代码重写如下：

<Child @hook:mounted="doSomething"/>

复制代码

当然这里不仅仅是可以监听mounted，其它的生命周期事件，例如：created，updated等都可以，是不是特别方便~

参考链接：

vueTips

vuePost

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

小山薰堂现在的职业是京都造形艺术大学副校长、艺术学部教授，而且写的第一个电影剧本还获得奥斯卡奖，除此之外，他还当过电台 DJ、企业顾问、作家、作词家、美食家、大学教授、综艺编剧等其他职业。

MOI J’ATTENDS

小山薰堂分享的主题是《幸福的策划术》，在一开始，他先是给我们分享了一本来自法国作家大卫·卡利（Davide Cali）的绘本《MOI J’ATTENDS》（中文译名《我等待》），这本插画书中，Davide Cali用一根红线，串联起一个男孩子一生每个重要时刻的等待的场景，从垂髫，到耄耋，从初生牛犊，到两鬓如霜。

△ 法国作家大卫·卡利（Davide Cali） – 「MOI J’ATTENDS」封面

这是一本让人很感动的绘本，从这本书中小山薰堂先生反思道，现在这个时代，我们仿佛都厌倦了等待，人越来越没有耐心，很多人认为等待是没有价值的，所以很多人会把「方便」和「幸福」划上等号，但是小山薰堂先生对这个观点是持怀疑态度的，他觉得幸福是需要被创造出来的。

△ 《MOI J’ATTENDS》书籍内页

BIRTHDAY PRESENT

小山薰堂先生说到，在他们公司，要求所有的员工都必须有策划和执行「birthday present」的能力，对于这个能力，小山薰堂先生觉得作为创意工作者，需要和偷偷去买个蛋糕制造惊喜这种桥段有所区别，小山薰堂对「birthday present」定下的 kpi 是「越夸张越惊喜越好」。在他看来，制定这个「birthday present」，可以提高员工对同仁的观察能力，并且可以得到这个惊喜之外的收获。

今年六月是小山薰堂的生日，他的同事给他送了一个在他看来很普通的杯子，但是得知了这个杯子的来历后，小山薰堂却很感动，原来，这个杯子是他们公司45名员工，从奈良到东京，每人跑十公里，通过接力，从奈良知名陶艺家辻村史朗一路传到他的手里的，接力的过程中全程都有视频的记录，并且在接力到每个车站站牌的时候都会有与站牌的合照，这些也是作为生日礼物的一部分，所以，小山薰堂觉得这是一个很满意很感动很不普通的生日礼物。在这次的生日中他不仅仅得到了一个酒杯，一段记录视频和站牌的合照，还因为全程的策划需要其他三个合作公司的通力合作，过程中消除了很多的问题，所以这对他来说也是一个很有意义的生日礼物的一部分。

△ 员工为小山薰堂生日特意设计的标志 | ©️小山薰堂

「Chalie Vice」

他还分享到，在日本有一个位于东京新宿伊势丹百货八楼的选物品牌──Chalie Vice。这个品牌也来源一个于「birthday present」。

△ ©️小山薰堂

原来小山薰堂公司有一个叫轻部政治的人，是他们公司的副社长，轻部政治特别喜好时尚，每天都会穿着自己觉得很满意的服饰来上班，不过在小山薰堂看来，轻部政治的着装略显浮夸和不稳重，所以在他生日来临之前，瞒着轻部政治策划了一场名为「Chalie Vice」的「birthday present」。

流程是这样的，在轻部政治生日前三个月，小山薰堂告诉他有一个时尚品牌「Chalie Vice」即将在东京设立分店，小山薰堂的公司负责这个品牌的落地和推广。前面说到，轻部政治对时尚很热衷，所以这个项目也就自然而然地交给轻部政治负责。

△ 员工为「chalie vice」特地设计的初始标志 | ©️小山薰堂

这样，「Chalie Vice」这个伪时尚品牌就在他们公司传开了，大家都开始讨论这个品牌，但也仅限在公司内部，因为外界根本不知道这个品牌。

因为「Chalie Vice」是海外的品牌，所以这个时候，需要一位关键的角色，就是「Chalie Vice」的投资人，为此小山薰堂还找了经纪外国人的日本公司进行面试，选了一位面相特别像阿拉伯人的外国男子，对其角色设定为「投资 Chalie Vice 的阿拉伯王子」，然后小山薰堂就把轻部政治带到一个时尚酒会上，假装和阿拉伯王子聊天，然后假装阿拉伯王子的人就转头对旁边的助理说了一些话，助理（当然也是找的演员）就对轻部政治说：「王子觉得你很帅，希望你可以作为品牌的代言人」。轻部政治肯定很乐意，就这样，轻部政治就顺理成章地成为「Chalie Vice」的日本地区代言人。

既然是当了代言人，那么就需要拍摄形象照，所以，在轻部政治生日的当天，小山薰堂让轻部政治穿上他花了一万多日元买的贴着「Chalie Vice」假吊牌的西装，进到黑色背景的摄影棚拍照，在轻部政治双手交叉在胸前摆好 pose 的时候，黑布后面站满了小山薰堂整个公司的同事在摄影师按下快门的瞬间拉下幕布，热烈庆祝轻部政治生日快乐。

△ 「整蛊」成功 | ©️小山薰堂

一个完美的好玩的生日策划就这样结束了，但是小山薰堂整个公司的人都有点不舍，虽然这是一个假的虚构的品牌，但是大家三个月来的一切策划和设计却都是实打实进行的，把它当成一个真正的品牌在策划，所以有一个同事就说，我们何不真的做这个品牌？刚好小山薰堂和伊势丹百货的社长共同参加一个晚宴。吃饭的时候，问他「你知道 Chalie Vice 吗？」社长说他没听过，小山薰堂就把这三个月来的「birthday present」策划活动告诉了他。第二天，小山薰堂的公司就接到了伊势丹百货高层采购的电话，表示对「Chalie Vice」感兴趣，希望可以在伊势丹百货八楼开店。

就这样，一个源于「birthday present」的惊喜，逐步演变成一个真正的品牌。而在开业前，小山薰堂还动用他在日本的影响力，请来了很多日本各行各业的人士，拍摄了一个《about ‘CHALIE VICE’》的视频，视频中，各行各业的人士纷纷一本正经地聊起了这个关于「Chalie Vice」的品牌，但其实这也都是小山薰堂的一个创意，因为他们聊的，关于这个品牌的历史文化等等其实都是虚构出来的。

△ 各行业的大咖介绍「chalie vice」品牌「历史」短片《who is 「chalie vice」》| ©️小山薰堂

△ 伊势百货商场「chalie vice」实体店 | ©️小山薰堂

幸福策划术

策划是什么，小山薰堂认为凡是帮助我们度过人生各种困难的方法，都可以称之为策划。策划现在还有没有人做，他觉得对于策划，需要衡量两个问题：

• 作为一个策划师，你感到快乐吗？
• 可以使谁感到幸福？

解决了这两个问题，就可以成为一名合格的设计师。

小山薰堂是一个擅长制造惊喜的策划师，也有剧作家，电台主持人，企业顾问等多重身份。他不拘泥于某一领域，并且在每一领域中都可以做得很好。最近几年他就把很大的精力投入到「汤道」中去，热衷于泡汤的他觉得泡汤文化不仅仅可以在日本流行，他也可以让全世界都喜欢上泡汤。

他有着无限的活力和对生活的细心观察。也有着日本人对于每一件事追求的态度，从举世闻名的熊本熊，由生日惊喜而诞生的新品牌「Chalie Vice」，到近几年一直推广汤道文化，他总是从让人感到惊喜、幸福的角度去考虑一个策划案，并且结果也常常让人感到幸福，正如他最后总结的，「作为一个设计师，作品能让人感到幸福，那就是最大的幸福」。

△ 小山薰堂的汤道品牌「汤道百选」 | ©️小山薰堂

「MODESTY」谦逊

李虎的分享主题是《建筑何为》，他觉得，现在是全球连接的时代，前所未有的联系却又离合，是一个创造力与破坏力同时存在的时代，虽然信息交流方便了，但是这个时代有一堵「新的墙」正在垒砌，贫富差距，欲望扩张，图像时代，环境破坏，正逐渐把这个时代的人隔开了，这也是一个极度消费的时代，所以他觉得，作为一个建筑设计师，对于这个时代，必须懂得「modesty谦逊」。

△ 美国《国家地理》杂志六月刊封面

「谦逊」意味着节制，有意识的建造，建造得恰到好处，不多不少。

「谦逊」意味着包容，意味着通过建造来打破屏障，连接人与人，消除差距、重构社会。

「谦逊」意味着保护，通过建筑来创造一个人与自然的庇护所。

「谦逊」意味着尊重，带着对当地环境的尊重去建造，无论是场地周围自然环境、它的历史，或是当地居住的人群。

「谦逊」意味着谦卑，以一种真实反映我们在世界中所处位置的方式去建造。我们不过是庞大网络中的其中一部分。

「谦逊」意味着远离虚荣的自由，建筑不仅是流于表面的美学，而是去追求深度的意义。只有做到这一点我们才能真正重新拥有勇气，去想象、去探险，并且回归诗意。

但他也强调，「谦逊」并不意味着建筑是无力的。

在他的案例分享中提到上海油管艺术中心的项目，这是一批位于上海徐汇滨江原龙华机场旧址的废弃储油罐，以及一些消防水池和配套设施。是一段历史的记忆。他希望能保留下这一批历史的见证建筑，所以在建筑设计上完全保留着这五个超大的储油罐外观，并对内部功能进行合理的划分，具体划分为一个油管保留原始风貌，几乎不对其进行任何的加工和改造，保留其原始质感和构造，可作为大型艺术作品的展示。一个在内部进行改造，增设平面展示墙，使其适用于精致艺术品的展示。剩下的三个被改造为多功能的展厅和活动休闲空间。

△ 五个油管的功能划分 | ©️OPEN ARCHITECTURE

李虎在改造中，加入了一个「超级表面」的概念，通过营造一片「都市森林」，将油管链接起来，使其融入到整片森林中去，这也给上海繁忙的都市中增加一片适合公众亲近自然并且可以感受当代艺术，提升城市生活品质的绿地。「超级表面」重新建立公众和城市艺术自然的关联。

△ 「超级表面」 | ©️OPEN ARCHITECTURE

李虎在城市建筑改造中，时常会考虑到公众和自然、建筑的关系，他在深圳坪山新区剧院的项目中，为了有别与其他城市的千篇一律，远离公众的剧院，提出了「演艺建筑的一种新的可能」概念，通过「空间叙事」的方式，区分建筑功能「正式与非正式」，也是使得公众可以融入到剧院建筑中，并且根据深圳的气候设计了剧院的绿化工程，使得剧院与公众与自然都可以得到一个很好的共处。

△ 深圳坪山演艺中心 | ©️OPEN ARCHITECTURE

「UCCA Dune Art Museum」沙丘美术馆

在最后，李虎还分享到在中国北部渤海湾昌黎县一段被称作黄金海岸的沙滩上，OPEN 设计了一座埋在沙子底下的美术馆──UCCA Dune Art Museum（沙丘美术馆）。他提到，随着社会的发展，人类生存空间不断的蚕食地皮，沙丘作为一种地理自然地貌，已经越来越少能看见了。但是接到的这个项目就是需要在沙丘上建造一座美术馆，这肯定会对沙丘有很大的破坏，他希望可以在这矛盾的两者中找到一种平衡，最后，他在海边玩泥沙的小朋友身上得到启发，何不让美术馆以「洞穴」的形态埋在沙丘之下，这是对自然的一种尊重，也是对沙丘的一种保护，因为沙丘美术馆的存在，这片沙丘将永远不会人为「被推平」。

李虎还从当地造船木工身上得到启发，因为美术馆的造型特别的复杂，所以用到造船的技术，通过用木模板等小尺度线性材料手工编织出的模板定型，再用混凝土浇灌成型，并且还在建筑内部保留了混凝土因为木板浇灌留下的不规则的肌理。希望让木工建造的痕迹可以被每一个进入美术馆的人感知和触摸。

△ 将造船术应用在建筑中 | ©️OPEN ARCHITECTURE

△ 建筑躯壳 | ©️OPEN ARCHITECTURE

△ 建筑覆盖上土后 | ©️OPEN ARCHITECTURE

△ 内部大量保存原始手工痕迹 | ©️OPEN ARCHITECTURE

因为是在海边，在美术馆的造型上，会留出很多的大小不一的洞口，每一个洞口望出去，都是大海不一样的风景，让人在美术馆中可以感受到不同画面切割的海景，并且因为建筑被埋在沙子中，冬夏的温度得到很好的调节，使得建筑非常节能，保证了建筑的可持续性，而巧妙的天窗开口，更是为美术馆提供全天候的自然采光。

△ 内部开口设计，保证了采光和观赏性 | ©️OPEN ARCHITECTURE

李虎是一位「诗意」的设计师，在他的作品中，可以处处体现人、自然与建筑之间的和睦相处，建筑不再是冰冷的存在，他可以被感知被「融入」，这是他对自然的敬畏，也是对「谦卑」最好的诠释。

不论是小山薰堂对于使人感到幸福惊喜的策划术，还是李虎对于现代建筑的思考和态度，他们都考虑到人和社会、自然的关系，正如小山薰堂在最后分享的一张他在纽约街头拍到的一个流浪汉在地上贴的「I LIKE SURPRISES」。人们都喜欢惊喜和快乐，这是能让人感到幸福的东西，他们让策划不再是按部就班的一套流程，建筑也不再是一栋冰冷的建筑，他们有温度、有情感，都可以使得所接触到的人感到幸福和快乐，引发人们对于人与社会、自然的思考。他们应该是这个时代，一个合格设计师的标准和榜样。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="../static/vue.min.js"></script>
</head>
<body>
<div id="vue_data">
<h1>title : {{title}}</h1>
<h1>url : {{url}}</h1>
<h1>{{info()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_data',
data: {
title: "Vue.js",
url: "https://cn.vuejs.org"
},
methods: {
info: function() {
return  this.title + " - 坚持学习！";
}
}
})
</script>
</body>
</html>
1、每个Vue应用都需要实例化Vue来实现

var vm = new Vue({
    //*******
})
2、el参数

在上面实例中的id为vue_data，在div元素中：

<div id="vue_data"></div>
意味着所有的改动均在这个id为vau_data的div中，外部不受影响。

3、定义数据对象

data用于定义属性，在上述实例中有2个属性，分别为：title、url。

methods用于定义函数，可以通过return来返回函数值。

{{ }}用于输出对象属性和函数返回值。

当一个Vue实例创建时，Vue的响应系统加入了data对象中能找到的所有属性。当这些属性的值发生改变时，html视图也会产生相应的变化。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="../static/vue.min.js"></script>
</head>
<body>
<div id="vue_data">
<h1>title : {{title}}</h1>
<h1>url : {{url}}</h1>
</div>
<script type="text/javascript">
//数据对象
var data = {title: "Vue.js",url: "https://cn.vuejs.org"}
var vm = new Vue({
el: '#vue_data',
data: data
})

//设置属性会影响到原始数据
vm.title = "spring";
document.write(data.title + "<br>");

//同样
data.url = "https://spring.io";
document.write(vm.url);
</script>
</body>
</html>
Vue还提供了实例属性与方法，以前缀$与用户定义的属性区分开来。

document.write(vm.$data === data) // true

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前言 

注解：

新闻的标题跟转发数才是观者关注的，而来源和时间就是次要关注信息，所以视觉上要为观者分出层级，这样不仅能够使观者看着更舒适，视觉上也很有层次，不杂乱。

旧版标题、来源、时间、转发数、都是相对于内容居中的状态，这种排版是不符合表格排版规则的，简单的做法就是文字左对齐，数字右对齐，数字右对齐能够更快速识别数据量大小，跟其他数据的对比，文字左对齐则是根据人从左到右的阅读习惯。

之前专门总结过一篇数据表格如何排版的文章，想了解的朋友，文章下面有数据可视化系列文章链接。

注解：

设计数据可视化大屏时一定要考虑用户浏览数据的优先级的构架，例如要遵循先总后分，先具体后抽象的逻辑，上图旧版把趋势放到了页面的第一视觉位置，就有点宣兵夺主了，根据先具体后抽象，改版后具体数据放到第一视觉位置，趋势信息排后。

旧版大屏没有标题，我是谁？我在干什么？我要去哪里？所以标题务必得有。

总结：

说了这么多设计要点，新手可能还是不知道设计的切入点在哪里，所以总结一个数据可视化设计分三步走法。

第一步：了解数据要表达的本质。

拿到一组数据，先分析主次，这组数据要表达什么？是展示数据，还是对比数据，或是实时监控数据，从而确定展示的优先级。

第二步：确定使用图表。

通过了解数据要表达的本质后，选择适合他的图表，这时候就需要打开几个开源的图表网站找图表，记住你的图表用的是网站的哪一个，开发如果找不到就丢给他网址。

网站有：Fusion Design、蚂蚁数据可视化-AntV、ECharts Examples、Highcharts

第三步：整体效果调整

功能性的数据展示都没问题，还要看下整体效果，例如用了过于多的柱状图，可能就会影响了整体的美感，图表尽可能多样性，数据表达信息就要用不同的图表展示。

 最后 

数据可视化设计核心就是，通过美学设计形式把数据精准和的分析和表达。

数据可视化设计是目前较为热门的设计工种，通过本文分享的项目迭代案例，希望能够让你对数据可视化有些许了解。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

让设计更有说服力