TypeScript从入门到实践专栏是博主在学习和工作过程中的总结，实用性非常强，欢迎订阅哦，学会TS不迷路。

函数默认参数/可选参数

对于同一个函数我们在不同场景下传参，参数有时候全部需要，有时候部分需要，定义多个同名函数就会报错，那么该怎么实现这个操作呢？我们可以为函数设置默认参数和可选参数。
给每个参数添加类型之后，可以不用给函数本身添加返回值类型，因为TS能根据返回语句自动推断出返回值类型

function start(name:string,age:number,phone?:number,sex?:string):string{ if(phone&&sex){ return `name:${name},age:${age},phone:${phone},sex:${sex}` }else{ return `name:${name},age:${age}` } } start('zhangsan','14')//name:zhangsan,age:14 start('zhangsan','14',15678777777,'男')//name:zhangsan,age:14,phone:15678777777,sex:男 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

另外我们看它编译后的样子，其中返回值使用了concat来连接字符串，也让我们学习到模版字符串的实现原理。

function start(name, age, phone, sex) { if (phone && sex) { return "name:".concat(name, ",age:").concat(age, ",phone:").concat(phone, ",sex:").concat(sex); } else { return "name:".concat(name, ",age:").concat(age); } } start('zhangsan', 14); //name:zhangsan,age:14 start('zhangsan', 14, 15678777777, '男'); //name:zhangsan,age:14,phone:15678777777,sex:男 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

但是我们要是有很多场景，参数类型也都不一致，我们这样写很难维护，并且定义的规范很难适用于实际多个场景，那么我们可以使用函数重载来处理。

函数重载

什么事函数重载呢？当我们多次调用函数时传递不同参数数量或者类型，函数会做出不同处理。

1、函数签名

这里介绍个名次「函数签名」，顾名思义，函数签名主要定义了参数及参数类型，返回值及返回值类型。函数签名不同，函数会做出不同的处理，这是我对函数重载的理解。

2、构造器重载

举个例子，声明一个类Course，里面写一个start的方法，我们调用 start时传入不同参数类型已经参数个数，start方法会做出不同处理，那么怎么实现呢？具体如下：

type Combinable = number | string; class Course { //定义重载签名 begin(name: number, score: number): string; begin(name: string, score: string): string; begin(name: string, score: number): string; begin(name: number, score: string): string; //定义实现签名 begin(name: Combinable, score: Combinable) { if (typeof name === 'string' || typeof score === 'string') { return 'student:' + name + ':' + score; } } } const course = new Course(); course.begin(111, 5);//没有输出 course.begin('zhangsan', 5);//student:zhangsan:5 course.begin(5, 'zhangsan');//student:5:zhangsan 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

以上代码中定义了4个重载前面和1个实现签名。

3、联合类型函数重载

声明一个函数arithmetic，参数类型为联合类型，返回值也是联合类型，但是如下代码却报错了。

function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).length; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

原因是没有明确函数string类型没有toFixed属性`，那么怎么用函数重载解决这个报错问题呢？
我们可以可以根据传参的类型和函数返回值声明多个同名的函数，只是类型和返回值不同而已。

function arithmetic(x: number): number; function arithmetic(x: string): string; function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).toFixed(1); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

这样就不会报错啦，因为已经识别到arithmetic(1)的返回值是number类型。

拓展JS中函数重载

JS中函数重载怎么实现呢？

1、利用arguments参数

var arr = [1,2,3,4,5]; //注意:这里不能写成箭头函数，否则this指向的是window对象 Array.prototype.search = function() { var len = arguments.length; switch(len){ case 0: return this; case 1: return `${arguments[0]}`; case 2: return `${arguments[0]},${arguments[1]}`; } } console.log(arr.search()) //[1,2,3,4,5] console.log(arr.search(1)) //1 console.log(arr.search(1,2)) //1,2 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

2、利用闭包和arguments

 function addMethod (obj, name, fn) { var old = obj[name]; obj[name] = function () { if (fn.length === arguments.length) { return fn.apply(this, arguments) } else if (typeof old === 'function') { return old.apply(this, arguments) } } } var person = {name: 'zhangsan'} addMethod(person, 'getName', function () { console.log(this.name + '---->' + 'getName1') }) addMethod(person, 'getName', function (str) { console.log(this.name + '---->' + str) }) addMethod(person, 'getName', function (a, b) { console.log(this.name + '---->' + (a + b)) }) person.getName() person.getName('zhangsan') person.getName(10, 20) 





     来源：csdn  蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~ 希望得到建议咨询、商务合作，也请与我们联系01063334945。  分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。  蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

目录

一、VUE

1、基本介绍

2、Vue 指令

3、生命周期 

二、Element

1、基本介绍

2、Element 布局

一、VUE

1、基本介绍

▶ 概述

  Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

  我们之前也学习过后端的框架 `Mybatis` ，`Mybatis` 是用来简化 `jdbc` 代码编写的；而 `VUE` 是前端的框架，是用来简化 `JavaScript` 代码编写的。前面的综合性案例，里面进行了大量的DOM操作，如下

  使用 `VUE` 后，这部分代码我们就不需要再写了。那么 `VUE` 是如何简化 DOM 书写呢？基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们是将关注点放在了 DOM 操作上；而要了解 `MVVM` 思想，必须先了解 `MVC` 思想，如下图就是 `MVC` 思想图解

其中的C 就是咱们 js 代码，M 就是数据，而 V 是页面上展示的内容，如下图：

 `MVC` 思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。接下来了解`MVVM` 思想，如下图是三个组件图解：

 图中的 `Model` 就是我们的数据，`View` 是视图，也就是页面标签，用户可以通过浏览器看到的内容；`Model` 和 `View` 是通过 `ViewModel` 对象进行双向绑定的，而 `ViewModel` 对象是 `Vue` 提供的。双向绑定的效果：下图是提前准备的代码写出来的，输入框绑定了 `username` 模型数据，而在页面上也使用 `{{}}` 绑定了 `username` 模型数据

通过浏览器打开该页面可以看到如下页面

当我们在输入框中输入内容，而输入框后面随之实时的展示我们输入的内容，这就是双向绑定的效果。

▶ 快速入门

Vue 使用起来是比较简单的，总共分为如下三步：

1. 新建 HTML 页面，引入 Vue.js文件

<script src="js/vue.js"></scrip>

 2. 在JS代码区域，创建Vue核心对象，进行数据绑定

    


        


            


                


                

            

            


                

                    new Vue({
                

            

        

        


            


                


                

            

            


                

                           el: "#app",
                

            

        

        


            


                


                

            

            


                

                           data() {
                

            

        

        


            


                


                

            

            


                

                               return {
                

            

        

        


            


                


                

            

            


                

                                   username: ""
                

            

        

        


            


                


                

            

            


                

                               }
                

            

        

        


            


                


                

            

            


                

                           }
                

            

        

        


            


                


                

            

            


                

                       });
                

            

        

    

   创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

   ●  `el` ： 用来指定哪个地方的标签受 Vue 管理。 该属性取值 `#app` 中的 `app` 需要是受管理的标签的id属性值
   ● `data` ：用来定义数据模型
   ● `methods` ：用来定义函数。这个我们在后面就会用到

3. 编写视图

    


        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                           <input name="username" v-model="username" >
                

            

        

        


            


                


                

            

            


                

                           {{username}}
                

            

        

        


            


                


                

            

            


                

                       </div>
                

            

        

    

   `{{}}` 是 Vue 中定义的 `插值表达式` ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

▷ 整体代码如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <input v-model="username">
                

            

        

        


            


                


                

            

            


                

                        <!--插值表达式-->
                

            

        

        


            


                


                

            

            


                

                        {{username}}
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        //1. 创建Vue核心对象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){  // data() 是 ECMAScript 6 版本的新的写法
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    username:""
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                            /*data: function () {
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    username:""
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }*/
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

2、Vue 指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

▷ v-bind & v-model 指令

▷ v-bind

  该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化，例如：

<a v-bind:href="url">百度一下</a>

  上面的 `v-bind:"`  可以简化写成 `:`  ，如下：

    


        


            


                


                

            

            


                

                    <!--
                

            

        

        


            


                


                

            

            


                

                          v-bind 可以省略
                

            

        

        


            


                


                

            

            


                

                      -->
                

            

        

        


            


                


                

            

            


                

                      <a :href="url">百度一下</a>
                

            

        

    

▷ v-model

  该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：

<input name="username" v-model="username">

 ▷ 代码演示：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <a v-bind:href="url">点击一下</a>
                

            

        

        


            


                


                

            

            


                

                        <a :href="url">点击一下</a>
                

            

        

        


            


                


                

            

            


                

                        <input v-model="url">
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        //1. 创建Vue核心对象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    username:"",
                

            

        

        


            


                


                

            

            


                

                                    url:"https://www.baidu.com"
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

  通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据

▶ v-on 指令

我们在页面定义一个按钮，并给该按钮使用 `v-on` 指令绑定单击事件，html代码如下：

<input type="button" value="一个按钮" v-on:click="show()">

而使用 `v-on` 时还可以使用简化的写法，将 `v-on:` 替换成 `@`，html代码如下

<input type="button" value="一个按钮" @click="show()">

上面代码绑定的 `show()` 需要在 Vue 对象中的 `methods` 属性中定义出来

    


        


            


                


                

            

            


                

                    new Vue({
                

            

        

        


            


                


                

            

            


                

                        el: "#app",
                

            

        

        


            


                


                

            

            


                

                        methods: {
                

            

        

        


            


                


                

            

            


                

                            show(){
                

            

        

        


            


                


                

            

            


                

                                alert("我被点了");
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        }
                

            

        

        


            


                


                

            

            


                

                    });
                

            

        

    

注意：`v-on:` 后面的事件名称是之前原生事件属性名去掉on。
例如：
 ● 单击事件 ： 事件属性名是 onclick，而在vue中使用是 `v-on:click`
 ● 失去焦点事件：事件属性名是 onblur，而在vue中使用时 `v-on:blur`

▷ 整体页面代码如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <input type="button" value="一个按钮" v-on:click="show()"><br>
                

            

        

        


            


                


                

            

            


                

                        <input type="button" value="一个按钮" @click="show()">
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        //1. 创建Vue核心对象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    username:"",
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            },
                

            

        

        


            


                


                

            

            


                

                            methods:{
                

            

        

        


            


                


                

            

            


                

                                show(){
                

            

        

        


            


                


                

            

            


                

                                    alert("我被点了...");
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

▶ 条件判断指令

接下来通过代码演示一下。在 Vue中定义一个 `count` 的数据模型，如下

    


        


            


                


                

            

            


                

                    //1. 创建Vue核心对象
                

            

        

        


            


                


                

            

            


                

                    new Vue({
                

            

        

        


            


                


                

            

            


                

                        el:"#app",
                

            

        

        


            


                


                

            

            


                

                        data(){
                

            

        

        


            


                


                

            

            


                

                            return {
                

            

        

        


            


                


                

            

            


                

                                count:3
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        }
                

            

        

        


            


                


                

            

            


                

                    });
                

            

        

    

  现在要实现，当 `count` 模型的数据是3时，在页面上展示 `div1` 内容；当 `count` 模型的数据是4时，在页面上展示 `div2` 内容；`count` 模型数据是其他值时，在页面上展示 `div3`。这里为了动态改变模型数据 `count` 的值，再定义一个输入框绑定 `count` 模型数据。html 代码如下：

    


        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <div v-if="count == 3">div1</div>
                

            

        

        


            


                


                

            

            


                

                        <div v-else-if="count == 4">div2</div>
                

            

        

        


            


                


                

            

            


                

                        <div v-else>div3</div>
                

            

        

        


            


                


                

            

            


                

                        <hr>
                

            

        

        


            


                


                

            

            


                

                        <input v-model="count">
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

    

▷ 整体页面代码如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <div v-if="count == 3">div1</div>
                

            

        

        


            


                


                

            

            


                

                        <div v-else-if="count == 4">div2</div>
                

            

        

        


            


                


                

            

            


                

                        <div v-else>div3</div>
                

            

        

        


            


                


                

            

            


                

                        <hr>
                

            

        

        


            


                


                

            

            


                

                        <input v-model="count">
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        //1. 创建Vue核心对象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    count:3
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

通过浏览器打开页面并在输入框输入不同的值，效果如下

然后我们在看看 `v-show` 指令的效果，如果模型数据 `count ` 的值是3时，展示 `div v-show` 内容，否则不展示，html页面代码如下

    


        


            


                


                

            

            


                

                    <div v-show="count == 3">div v-show</div>
                

            

        

        


            


                


                

            

            


                

                    <br>
                

            

        

        


            


                


                

            

            


                

                    <input v-model="count">
                

            

        

    

浏览器打开效果如下：

通过上面的演示，发现 `v-show` 和 `v-if` 效果一样，那它们到底有什么区别呢？我们根据浏览器的检查功能查看源代码：

通过上图可以看出 `v-show` 不展示的原理是给对应的标签添加 `display` css属性，并将该属性值设置为 `none` ，这样就达到了隐藏的效果。而 `v-if` 指令是条件不满足时根本就不会渲染。

▶ v-for 指令

这个指令看到名字就知道是用来遍历的，该指令使用的格式如下：

    


        


            


                


                

            

            


                

                    <标签 v-for="变量名 in 集合模型数据">
                

            

        

        


            


                


                

            

            


                

                        {{变量名}}
                

            

        

        


            


                


                

            

            


                

                    </标签>
                

            

        

    

注意：需要循环那个标签，`v-for` 指令就写在那个标签上。

如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：

    


        


            


                


                

            

            


                

                    <标签 v-for="(变量名,索引变量) in 集合模型数据">
                

            

        

        


            


                


                

            

            


                

                        <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
                

            

        

        


            


                


                

            

            


                

                       {{索引变量 + 1}} {{变量名}}
                

            

        

        


            


                


                

            

            


                

                    </标签>
                

            

        

    

▷ 代码演示：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <div v-for="addr in addrs">
                

            

        

        


            


                


                

            

            


                

                            {{addr}} <br>
                

            

        

        


            


                


                

            

            


                

                        </div>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                        <hr>
                

            

        

        


            


                


                

            

            


                

                        <div v-for="(addr,i) in addrs">
                

            

        

        


            


                


                

            

            


                

                            {{i+1}}--{{addr}} <br>
                

            

        

        


            


                


                

            

            


                

                        </div>
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                        //1. 创建Vue核心对象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    addrs:["北京","上海","西安"]
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

通过浏览器打开效果如下

3、生命周期 

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 `mounted` 就行了。

`mounted`：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。

二、Element

 1、基本介绍

▶ 概述

 Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~

如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。

我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是：元素 - 全球最受欢迎的 Vue UI 框架 (eleme.cn)

进入官网能看到如下页面

 接下来直接点击 `组件` ，页面如下

2、Element 布局

Element 提供了两种布局方式，分别是：

 ● Layout 布局
 ● Container 布局容器

▷ Layout 局部

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

在左菜单栏找到 `Layout 布局` ，然后找到自己喜欢的按钮样式，点击 `显示代码` ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 `head` 标签内，将html标签拷贝到  `<div id="app"></div>` 标签内。

▷ 整体页面代码如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                        <style>
                

            

        

        


            


                


                

            

            


                

                            .el-row {
                

            

        

        


            


                


                

            

            


                

                                margin-bottom: 20px;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .el-col {
                

            

        

        


            


                


                

            

            


                

                                border-radius: 4px;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .bg-purple-dark {
                

            

        

        


            


                


                

            

            


                

                                background: #99a9bf;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .bg-purple {
                

            

        

        


            


                


                

            

            


                

                                background: #d3dce6;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .bg-purple-light {
                

            

        

        


            


                


                

            

            


                

                                background: #e5e9f2;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .grid-content {
                

            

        

        


            


                


                

            

            


                

                                border-radius: 4px;
                

            

        

        


            


                


                

            

            


                

                                min-height: 36px;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .row-bg {
                

            

        

        


            


                


                

            

            


                

                                padding: 10px 0;
                

            

        

        


            


                


                

            

            


                

                                background-color: #f9fafc;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        </style>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script src="element-ui/lib/index.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app"
                

            

        

        


            


                


                

            

            


                

                        })
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

现在需要添加一行，要求该行显示8个格子，通过计算每个格子占 3 栏，具体的html 代码如下

    


        


            


                


                

            

            


                

                    <!--
                

            

        

        


            


                


                

            

            


                

                    添加一行，8个格子  24/8 = 3
                

            

        

        


            


                


                

            

            


                

                    -->
                

            

        

        


            


                


                

            

            


                

                    <el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                    </el-row>
                

            

        

    

▶ Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。

如下图是官网提供的 Container 布局容器实例：

该效果代码中包含了样式、页面标签、模型数据。将里面的样式 `<style>` 拷贝到我们自己页面的 `head` 标签中；将html标签拷贝到 `<div id="app"></div>` 标签中，再将数据模型拷贝到 `vue` 对象的 `data()` 中。

▷ 整体页面代码如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                        <style>
                

            

        

        


            


                


                

            

            


                

                            .el-header {
                

            

        

        


            


                


                

            

            


                

                                background-color: #B3C0D1;
                

            

        

        


            


                


                

            

            


                

                                color: #333;
                

            

        

        


            


                


                

            

            


                

                                line-height: 60px;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                            .el-aside {
                

            

        

        


            


                


                

            

            


                

                                color: #333;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        </style>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <el-container style="height: 500px; border: 1px solid #eee">
                

            

        

        


            


                


                

            

            


                

                            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                

            

        

        


            


                


                

            

            


                

                                <el-menu :default-openeds="['1', '3']">
                

            

        

        


            


                


                

            

            


                

                                    <el-submenu index="1">
                

            

        

        


            


                


                

            

            


                

                                        <template slot="title"><i class="el-icon-message"></i>导航一</template>
                

            

        

        


            


                


                

            

            


                

                                        <el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">分组一</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="1-1">选项1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="1-2">选项2</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                        <el-menu-item-group title="分组2">
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="1-3">选项3</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                        <el-submenu index="1-4">
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">选项4</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    <el-submenu index="2">
                

            

        

        


            


                


                

            

            


                

                                        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                

            

        

        


            


                


                

            

            


                

                                        <el-submenu index="2-1">
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">选项1</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="2-1-1">选项1-1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    <el-submenu index="3">
                

            

        

        


            


                


                

            

            


                

                                        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                

            

        

        


            


                


                

            

            


                

                                        <el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">分组一</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="3-1">选项1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="3-2">选项2</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                        <el-menu-item-group title="分组2">
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="3-3">选项3</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                        <el-submenu index="3-4">
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">选项4</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                </el-menu>
                

            

        

        


            


                


                

            

            


                

                            </el-aside>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                            <el-container>
                

            

        

        


            


                


                

            

            


                

                                <el-header style="text-align: right; font-size: 12px">
                

            

        

        


            


                


                

            

            


                

                                    <el-dropdown>
                

            

        

        


            


                


                

            

            


                

                                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                

            

        

        


            


                


                

            

            


                

                                        <el-dropdown-menu slot="dropdown">
                

            

        

        


            


                


                

            

            


                

                                            <el-dropdown-item>查看</el-dropdown-item>
                

            

        

        


            


                


                

            

            


                

                                            <el-dropdown-item>新增</el-dropdown-item>
                

            

        

        


            


                


                

            

            


                

                                            <el-dropdown-item>删除</el-dropdown-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-dropdown-menu>
                

            

        

        


            


                


                

            

            


                

                                    </el-dropdown>
                

            

        

        


            


                


                

            

            


                

                                    <span>王小虎</span>
                

            

        

        


            


                


                

            

            


                

                                </el-header>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                                <el-main>
                

            

        

        


            


                


                

            

            


                

                                    <el-table :data="tableData">
                

            

        

        


            


                


                

            

            


                

                                        <el-table-column prop="date" label="日期" width="140">
                

            

        

        


            


                


                

            

            


                

                                        </el-table-column>
                

            

        

        


            


                


                

            

            


                

                                        <el-table-column prop="name" label="姓名" width="120">
                

            

        

        


            


                


                

            

            


                

                                        </el-table-column>
                

            

        

        


            


                


                

            

            


                

                                        <el-table-column prop="address" label="地址">
                

            

        

        


            


                


                

            

            


                

                                        </el-table-column>
                

            

        

        


            


                


                

            

            


                

                                    </el-table>
                

            

        

        


            


                


                

            

            


                

                                </el-main>
                

            

        

        


            


                


                

            

            


                

                            </el-container>
                

            

        

        


            


                


                

            

            


                

                        </el-container>
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script src="element-ui/lib/index.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data() {
                

            

        

        


            


                


                

            

            


                

                                const item = {
                

            

        

        


            


                


                

            

            


                

                                    date: '2016-05-02',
                

            

        

        


            


                


                

            

            


                

                                    name: '王小虎',
                

            

        

        


            


                


                

            

            


                

                                    address: '上海市普陀区金沙江路 1518 弄'
                

            

        

        


            


                


                

            

            


                

                                };
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    tableData: Array(20).fill(item)
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        })
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

▶ 完成分页条展示

在 Element 官网找到 `Pagination 分页` ，在页面主体部分找到我们需要的效果，如下

点击 `显示代码` ，找到 `完整功能` 对应的代码，接下来对该代码进行分析

▷ 上面代码属性说明：

●  `page-size` ：每页显示的条目数

● `page-sizes` ： 每页显示个数选择器的选项设置。

 `:page-sizes="[100,200,300,400]"`  对应的页面效果如下：

 ● `currentPage` ：当前页码。我们点击那个页码，此属性值就是几。
 ● `total` ：总记录数。用来设置总的数据条目数，该属性设置后， Element 会自动计算出需分多少页并给我们展示对应的页码。

▷ 事件说明：

● `size-change` ：pageSize 改变时会触发。也就是当我们改变了每页显示的条目数后，该事件会触发。
● `current-change` ：currentPage 改变时会触发。也就是当我们点击了其他的页码后，该事件会触发。

 来源：csdn



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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

正如题目所说：细节决定成败，微交互就是利用细节提升产品体验和设立品牌标志。

一、摘要

直到今天，人机交互已经有很长时间的发展。从例如烤面包机的简单产品到银行应用程序类的复杂数字产品，我们每天进行上百次的交互。这些交互转化为产品的可用性，最终转化成用户满意度、信任度和产品整体体验。

在过去的二十年里，设计师们一直在关注这些交互（按钮、滚动、长按等）。从电脑大屏幕到移动设备、智能手表以及现在的可折叠设备，交互也在不断地发展。本文研究了微交互的结构及其与交互模型的关系，审美体验的不同驱动力，以及我们如何通过改变微交互的元素来优化体验。最后，我们讨论了自下而上的产品构建方法。

二、简介

自灯泡、收音机、门铃等电气设备出现以来，微交互一直存在于我们的生活。微交互和技术共同出现、发展。在我们的日常生活中充满了与周围物体的微交互，例如使用烤面包机、解锁手机、将手机切换到静音模式、控制音量等。

从简单的按下按钮到摇动手腕激活智能手表，微交互随着技术的进步而不断发展。像复制文本或移动文件这类我们如今习以为常的、无形之中的微交互，都曾是新颖的微交互。观察微交互有助于设计师改进产品。

有趣的是，设计师将现实生活场景投射到产品来建立微交互，如剪切-粘贴、放大-缩小等。这些细节不仅提高了产品的可用性，也通过直观的互动降低用户学习难度。

我们如何准确定义什么是微交互，什么是交互？

论文《开启移动微交互》（Ashbrook，2010）将微交互定义为“接触设备开始到完成的时间不超过4秒的互动”。而《微交互》一书（Saffer，2013）将其定义为：“微交互是围绕着单个用例的产品使用场景——它们有一个主要任务。”整个应用程序或产品可能只是一个微交互，例如，天气应用程序（图1.1）或烤面包机，因为它们只关注一件事。

图1.1 天气应用程序能被看作是一个微交互，因为它只显示天气。

图1.2 LinkedIn 的“喜欢”按钮由两个微交互组成，（a）当你长按“喜欢”按钮时，它会打开一个空间展示多个表情符号以供选择（b）你选择表情符号发送给帖子。

一个功能可以由多个微交互构成，例如LinkedIn的“喜欢”按钮（图1.2），人们可以对帖子发送不同的表情符号。因此，微交互是一个功能模块，或者是整个产品。与产品互动时，微交互也许能帮助用户了解做什么，如何做，后续是怎样。精心设计的微交互使产品变得直观，优化了产品的用户体验。

当微交互打造了与品牌产生共鸣的特殊体验时，它化身为了品牌标志。专业术语称之为“标志性时刻——产品或服务中给人留下持久而难忘印象的突出互动”（Janhagen, Leitch & Judelson, 2020）。

Facebook的“喜欢”按钮是它的标志性时刻。微交互并不仅仅局限于视觉，它们可以是声音、触觉、实体硬件或手势交互。Snapchat的通知作为产品的标志性时刻是因其独特的声音。同样地，iPhone有一个中心按钮作为苹果的标志，它有多个微交互方式。

微交互通常首选（Narvhus, J.M. 2016）：

• 沟通反馈。
• 开启和关闭某项功能，如将手机静音。
• 实现一个单一的任务，如喜欢一个Facebook上的帖子。
• 控制一个正在进行的进程：显示更改或系统状态，如加载条或状态图标。
• 改变一个设置。
• 防止人为错误。
• 查看或制作内容。

我们将在之后的章节中研究一些微交互案例。

三、交互模型与微交互结构

1. 人类处理器模型

在进入交互模型之前，我们将尝试研究心智和心智表征，以更好地理解人类如何与世界上的物体互动。(Newell & Card, 1985)文章谈到了三个不同的处理器：感知处理器、认知处理器和运动处理器是如何工作以理解周围世界。

认知处理器与长期记忆和工作记忆一起工作，从现有的知识中提取物体、感觉、行动等的表征，以理解来自知觉处理器的输入。一旦认知处理器完成处理，它就会向运动处理器发出信号，以特定方式对特定情况采取行动。心智表征是现实世界中事物如何运作的心智模型或理解。

2. 诺曼交互模型

唐-诺曼的七个行为阶段（诺曼，2013）（图2）是一种更清晰的心智学形式，解释了人类如何与物体互动以实现目标。目标可能是打开一盏灯或在移动应用程序上进行在线交易。让我们把手机解锁的简单目标分解成七个行动阶段。

1. 目标是手机解锁。
2. 我如何解锁手机？输入密码或扫描手指指纹。
3. 选择哪个方式？如果我选择输入密码，那么就在屏幕上按顺序点击密码。
4. 一旦我有了行动规范，就可以执行任务。
5. 点击回车键后，将看到后续发生的事情。
6. 我看到我已经到达了主界面。
7. 我根据以往经验判断是否已经完成了目标。

在这个循环的每个阶段，都有一个输入->处理->输出的过程。在宏观层面上，我们也在遵循同样的过程来达到我们的目标。我们可以从行动模型的七个阶段推导出互动周期（Norman, 2013）（图3）。

交互周期包括执行过程和评估过程，前者是行动所需信息差，后者是行动发生时各类情况所需理解的信息差。整体用户体验取决于交互过程中互动周期的每个部分。微交互的目标是消除差距，使产品变得直观。现在让我们看看微交互的基础结构，了解它们如何帮助消除信息差。

3. 微交互的结构

微交互之所以强大，不仅仅是因为它们的细微交互差别或迷你尺寸，还因为它们构建的方式。微交互的结构包括四个部分（图4）（Saffer，2013）：开启微交互的触发器，决定微交互如何运作的规则，以及影响微互动的元规则——阐明规则、循环和模式的反馈。

触发器可以由用户触发，例如点击图标、填写表格等，触发器也可以由系统产生，例如低电量提示框，通知用户电池电量不足。

让我们以Duo应用中验证用户的微交互为例。

• 触发器：向我发一个推送通知是微交互的触发器（图5(a)）。
• 规则：它将发送带有两个动作的通知（图5(b)）。用户必须点击这两个动作中的一个（图5.(c)）。
• 反馈：一旦用户点击批准，它将显示带有“登陆”的绿色提示。(图5.(d))
• 循环和模式：如果你选择了在7天内记住本次登陆，下次登录时它将直接显示绿色提示，而不是向你发送推送通知。

现在当我们解构微交互并理解其结构时，微交互的结构支持行动七阶段理论，最终帮助消除执行和评估之间的鸿沟。精心设计的触发器便于用户进行计划->指定->执行行动，精心设计的规则和反馈便于用户进行感知->解释->对比结果确认完成目标。我们将在下一节中谈论触发器、规则和反馈的设计，以了解微交互如何有效构建所需的用户体验。

我们回看心智部分，认知处理器不仅包含了不同事物如何工作的心智模型，并且随着我们在日常生活中对新物体的体验而不断地发展。从这些心智模型中，设计师可以创建概念模型。作为关于产品和功能运作的高级计划，概念模型一旦被建立就能被转化为行动模型的七个阶段，从而帮助我们创建对用户来说很直观的微交互。这是一种自下而上的方法，用于建立交互 -> 功能 -> 产品。

四、审美与微交互

在上一节中，我们谈到了交互模型和微交互的结构，并探讨了它们如何携手使产品变得直观好用。现在我们将关注动态审美体验，以及微交互如何在产品的微观层面建立体验。

审美体验的韵律之舞有一个内在的、动态的结构。杜威指出了体验建立的相关过程，如累积、保存、紧张张力和预期，来指称体验的内部动态（McCarthy & Wright, 2004）。

完整的用户体验是这些动态的集合，它可以根据用户过往经验和知识认知而变化。过往经验和任何审美经验都取决于上下文：用户的过往和能力，人工制品的技术，以及互动发生的任一物理、社会空间（Petersen, Iversen, Krogh, & Ludvigsen, 2004）。当我们与物体/产品互动时，触觉、嗅觉、视觉和听觉都会唤起体验。

在过去的几十年里，设计师们一直在关注这些触发奇迹的交互。交互不应该仅仅是传达内容和完成任务，它应该引人思考，并鼓励人们以不同的方式思考变化。我们将展示一些唤起了不同审美体验的动态微交互案例。

1）积累：指伴随着体验时间展开的积聚。我认为谷歌支付作为微交互建立了用户体验，并包含非常优秀的展开界面和支付完成音效。

这个之所以判定为其微交互，是因为它只专注于一件事，而且建立了非常充实的体验。这个交互开始于点击支付端->选择银行卡->加载->支付完成（图6）。动画和音效带来了一步步徐徐展开的体验感受。

2）留存：指保留一些过往事物的趋势，不论体验还是内容。文本或信息的保存对优秀用户体验来说确实是必要的，毕竟这样能减少认知负担。在网站和应用程序上填写表格时，许多微交互都保留了之前的填写信息。

这类微交互的一个非常简单的例子是，当你复制一个链接并试图将其输入网络浏览器时，浏览器会显示直接粘贴链接的选项，甚至显示你复制的内容（图7）。我们在这此观察到与微交互的结构不同的是重点更多地放在了交互的反馈上，它传达的状态是：你复制的内容已保存，并可以用来搜索网页浏览器。这是一个展示了我们如何调整微交互侧重点来优化体验的优秀案例。

3）张力：指体验内和参与体验的人之间的关联。这是社交媒体和流媒体平台使用的一种技术，当用户期待在短时间内快速阅览内容时，用户不断下滑来反复触发刷新的微交互（图8.） 。微交互带给用户参与感以牢牢抓住其注意力。它带来的延迟满足，让用户在想快速浏览内容时耐心等待。

这个特殊的微交互的重点是方式：即在内容加载之前显示一个加载器。

4）预期：它包含两个时间阶段。第一阶段是用户在交互中开始期待，第二阶段是用户从交互中得到期望反馈。我想到的微交互是Google Pay India的刮刮卡奖励（图9）。

这个特殊的微交互为它在印度带来了巨大的成功。人们喜欢期待好事发生，即使期望没有发生。若是期望发生，那期待就是值得的。支付完成后，用户进入刮刮卡奖励界面，对刮奖产生期待，点击卡片进行刮奖。刮奖微交互的重点是动作的触发上，兼具有趣性和参与感，触发本来可以只是一个点击按钮，但他们设计了一个刮擦动作作为触发。

上文提到的各种例子可看出：通过调整微交互的元素来优化体验。微交互小而强的原因在于：它们是产品的差异化细节。好的微交互能让产品提升一个等级。

五、微交互会引人讨厌吗？

我们认识了精心设计的微交互在创造美好体验方面的力量，现在让我们来探讨一下，如果糟糕的微交互可能会引发什么问题。

我想到的案例是手机通知。并不是说通知很糟糕，而是它设计得如此之好，以至于它有违用户的意愿。通知是由系统发起的触发器，它仅显示部分信息来吸引用户点击。

每个人都会遇到这样的情况：明明只是想看看时间，但在看到通知时点击进入信息，无声无息之中半个小时就耗费了。这不仅仅耗费了时间，更严重的是人们在驾驶时也会分心看通知。

另一个案例是 Facebook 的著名的“喜欢”按钮。这个精心设计的微互动，是 Facebook 的标志，但没有人意识到一个微互动可以对人们的生活产生如此大的影响。近期 Instagram 停止显示帖子上的点赞数，因为它对用户行为产生了负面影响。上面的例子也显示出：小事情可以产生大影响。

微交互也会令人讨厌，例如，在填写表单最后点击提交时，弹出一个对话框（图10），说表单填写中存在错误。这里的触发器是提交按钮，规则是显示一个对话框，反馈是静态文本——“有填写有误”。

这里的微交互形式是错误的，如果填写有误，提示应该在出错点附近。而且这里的反馈是糟糕的静态文本，对用户没有任何用处，因为它没有说明出错的位置和类型。因此，微交互的使用和场景真的很重要。

六、结论

纵观全文，我们探讨了什么是微交互，以及如何创建符合交互模型的微交互来消除执行和评估之间的差距。接下来，我们研究了动态审美体验，以及我们如何在产品的微观层面上用微交互创造美好体验。

设计师有几种方法来创建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一种方法是把整个产品看成是一个微交互，如果你想增加另一个功能，那么就把它看成是另一个只包含一个微交互的产品。

我相信谷歌支付是以这种方式创建的，因为它是从支付开始，且只专注于支付，后来才引入了奖励和其他内容。

微交互有助于建立一个品牌标志和提升用户体验。我们喜欢或者讨厌产品的根源正是细节。细节是向用户展示你以用户为中心并为用户着想的方法。这就是微小的事情会带来巨大差异的原因。

作者：三分设

来源：人人都是产品经理

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

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

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

讲到UX文案，大家可能并不陌生：一个按钮、一个弹窗的文案填充，我们几乎每天都要与他接触。但即便如此，大家对他的态度通常是得过且过的：“文案嘛，有了就行，看得懂不出错就好，没什么值得注意的”。

确实，作为设计师，我们关注交互流程、视觉呈现，但UX文案似乎从来不是我们的首要考虑；在很多时候，文案与我们的设计流程是分裂的：要不就是设计完成后再填入，要不甚至直接让产品经理来提供文案素材；文案撰写，好像从来没有被我们真正重视过。

但UX文案真的只是一个无足轻重的辅助位吗？

一、 UX文案的重要性

首先，先抛结论，UX文案并不是无足轻重，相反的，它是好的产品体验中不可或缺的一部分。并且随着时代的发展和新兴应用场景的涌现，它对于产品体验的重要性正直线拉升。

在我们还将UX文案看作一个可有可无的流程时，一些先进的企业就有远见的意识到了它的重要性：早在2017年的I/O谷歌年度开发者大会上，三位职业UX文案作家就向我们展示了UX文案如何切实地为谷歌带来了产品数据的提升：

在用户在搜索”酒店“相关内容时，谷歌将直白的文案 “预定房间” 改为了更贴合用户心智的 “查看房源情况”；这一小小的改动，带来了17%点击量提升。

随着UX文案的价值不断的被发掘，在海外，已经有越来越多的团队将UX文案写作作为一个细分的的独立专业来看待。例如，在国际最大的旅游电子商务公司之一Booking.com，曾在不到一年的时间里增加了40名UX文案岗位，达到了每5或6个设计师中就有一个UX文案设计师的夸张比例。

二、 重新认识UX文案

面对海外对于UX文案的重视度激增场面，我们心中可能不免疑惑：“不还是为页面配文而已吗？平常不起眼的工作，怎么现在就好像突然变特殊了呢？”。

存在这样的误解，是因为我们对UX文案的认知还停留在过去，始终认为它仅仅是一个辅助位，最多起到“锦上添花”的作用，并不能真正影响核心用户体验的好坏。

而实际上，与我们印象中的边缘形象不同，UX文案（UX Writing），也叫内容设计（Content Design），所涉及的知识横跨体验设计、内容策略、用户调研，是一个多元的、完整的设计学科；旨在基于同理心与专业沟通技巧，通过合适的文字信息，在产品使用过程中为用户提供愉悦的体验，远不只是“为按钮填词”这么简单。

而随着时代的发展，UX文案的覆盖范围、呈现方式以及工作流程等都已经发生了巨大的变化；站在设计师的角度，我们希望通过以下几个方面介绍UX文案与过去相比发生了哪些变化，来帮助大家消除对UX文案的刻板印象，重新认识它在我们设计中扮演的角色，并学会运用它为用户呈现出更加优秀的产品体验。

1. 从「文字」到「语言」

首先，如今的UX文案有着比之前更广阔的范畴：过去关于文字，如今关于语言。

以前，我们讲到UX文案，指代的可能只包含APP里的标题、按钮等静态文字；但如今，随着智能家居、智能车机等新兴领域对于语音交互能力展现出的强需求，以及类似喜马拉雅等播客产品的持续火热，UX文案已经慢慢跳出了文字的范围，有了更广阔的发挥空间。

想象一下，当你结束疲惫的一天回到家时，你的智能家居助手应该以怎样的语气向你问好？应该使用什么措辞能最精准地得知你的意图？这些动态的、无实体的语音内容，也逐渐成为UX写作要关注的重点内容。

简单说，如今所有用户和产品产生交流的场景，都可以划分于UX写作的范畴。得益于科技的发展，UX写作逐渐地更接近了自己最终的目标，慢慢跳出了静态页面的框架，得以真正的与用户产生有意义的、愉悦的语言的交流。

2. 从「填充页面」到「主导页面」

其次，UX文案与过去最显著的不同之一是：不再仅是为页面填充文本，更多的是根据信息主导页面。

以下面一个常见的对话框为例，仅有一个小小的对话框来承载超额的信息；如果根据之前的“填充页面”的观念，我们要做的其实很简单，就是根据行文规范删减、重新排列文字，试图把过量的内容塞进小小的容器。

这样得到的结果在视觉上看起来可读了一些，但似乎也不尽人意。

这就是典型的机械性的填充页面，信息的展现完全受制于已给页面的结构，实际上已经脱离了更好传递信息的初衷。

如果我们调转思路，试着真正从传递信息本身出发，就能很明显的发现，原来的对话框最大的问题不是文字长短，而是信息过载—强迫用户在有限的空间里一次性确认两类信息：更改时间和通知参会人。而在我们上面的方案里，这个问题并没有被解决。

当我们真正开始用信息主导页面，应该做的是将一页多个问题拆分为每页一个问题，分步响应用户，对冗杂的信息进行分解，以真正创造清晰有效的对话。

如果体验没有达到理想的效果，通常需要改进的是整个设计，而不单单是文字。我们需要逐渐去理解的是，页面在根本上是信息传达的媒介，一昧的修改文本来适应页面，反而是本末倒置的做法。

3. 从「单纯可用性」到「体现品牌声音」

目前，UX文案通常仅需要保证基本的功能可用性；即使是已经有文案规范的团队，更多的也是将其作为辅助位，保证文案“有一致性，不出错”即可；对于品牌形象、差异化的诉求则基本一笔带过。

相较于UX文案，大家习惯用Icon的质感、品牌色的搭配等视觉的呈现去传递品牌声音，因为这样的效果简单直观，是可以直接被“看得见”的，这点无可厚非。

但随着语音交互的兴起，以及近年来轰轰烈烈的品牌去色化趋势，单纯的利用纯视觉的呈现来塑造品牌形象变得没那么万能了，与此同时，UX文案对于品牌形象的重要性也逐渐被发掘；我们发现，在很多时候，一句措辞得体的语音信息，或者是一句抓人眼球的标语（Slogan），就足以弥补视觉上品牌呈现的缺憾，甚至更能与用户产生共鸣。

这就需要UX文案在保证基本的可用性的基础上，更要考虑什么才是真正适合自己品牌的声音。

例如Google Earth 过去的一句经典的标语：“Hello, Earth”，这句标语完美的契合了Google Earth的品牌形象，它简洁正向，并且和产品名称之间有巧妙的双关，即代表了产品本身，也暗示了Google Earth带领用户去探索世界的功能定位。

仔细观察苹果、谷歌的产品，你就会发现从他们的UX文案除了保证了基本的一致性和可用性外，偶尔会隐藏一些小巧思，这些小巧思与他们的品牌形象相互呼应，能让用户在产品使用中潜移默化地对其品牌形象、产品价值观形成认知，而这样与产品体验本身结合的认知构成往往更加坚固，比传统的广告宣传更容易让人信服与认可。

三、 怎样做得更好，一些实用小tips

随着UX文案越来越广阔的范畴，我们过去熟悉的工作方法已经并不完全匹配如今UX文案的目标了；因为它包括的已经不仅是单纯的文字内容，更多的还有文案之间的层级结构、什么时候出现这段文字，以及这段文案向用户传递了什么情感等等，这已经超出简单的行文规则所涵盖的了。

那么，我们怎么才能真的做好UX文案呢？

我们根据以往的项目经验，总结出了除了通用行文规则之外，三个在关键节点上可以做到的几件小事，希望帮助大家能找到真正适合、高效的设计方法，并打造出优秀的UX文案。

1. 流程——更早地加入

首先，最基本也是最重要的：在流程上，永远要尽早的考虑文案问题。

我们过去熟悉的设计步骤是：“先把产品设计好，将有文字的地方空出，最后再填充。”

这样带来的问题是：关键的体验问题直到最后期才会被注意到，留给UX文案的发挥空间十分有限，能做的只是为糟糕的体验贴上掩饰的创可贴，并不能真正避免糟糕体验为用户带来的伤害。

正如我们上面所说，UX文案不仅仅是填充文字，它的核心是在产品与用户之间创造合适、愉悦的对话，所涵盖的内容几乎横跨产品体验的每个流程。

因此，要想真正缔造好的UX文案，永远要尽早地参与到设计流程中，这样才能真正的找出体验的问题，并最大限度的发掘UX文案究竟可以为此做些什么，创造与用户真正有效的交流。

2. 方法——模拟真实的对话

其次，在我们着手输出UX文案时，请尽量在脑海中模拟真实的对话场景。

这个方法来自于最近的全球开发者大会（WWDC22）上，苹果设计团队向大家分享的UX写作方法框架：“PACE”：Purpose（目的）、Anticipation（预判）、Context（环境）、Empathy（共情）。

其中，在Anticipation（预判）里提到了 “将UX文案想象成一种对话” 的概念，意思是在设计产品的过程中，应该把页面上的文字看作一个与用户的对话，而不只是一个静态的短语；这样能更好的帮助我们预判用户的诉求。

想象在这样的场景：当你的用户在周末的晚上打开手机，开始调节明早起床的闹钟时间；你会怎么设计这里的UX文案呢？

使用流程似乎很简单：打开闹钟app，调节明早闹钟时间，确认设置完成。

上述的交互没有问题，用户可以清晰的完成设置。但如果考虑到上面提到的 “想象成一种对话”，那这个流程就还有可改进的地方。

因为在一段有效的对话中，交流应该是有来有往的：其中的角色应该有时在聆听，有时在发言；而不应该仅仅一方是单方面的输出（在上述的场景里，仅仅是用户一股脑的对闹钟app进行信息输出，闹钟app只是单纯的服从命令，这不是一个正常对话的模式）。

让我们想象是自己在跟用户在交流，就能很容易地发现用户想传递的底层信息并不是 “我要调闹钟了 ”，而是 “好不容易到周末了，我明天要多睡一会”，能解读到这一层话外音，我们就成功利用“对话”预判了用户的目的。

打开ios的起床闹钟试一下，你会发现它比我们的基础流程多了一个贴心的询问 ：“你要将此更改应用到这个定时中的所有周末吗？”；在这里，苹果实际上做了两层预判，第一层是预判绝大多数人的周末和工作日起床时间是不一样的，所以将复用的范围限定在了周末；第二层预判是在大多数情况下人们只能确认明天的起床时间，所以主选项是“仅更改下个闹钟”。

简单的一个改动，就把机械性服从命令的程序，变为一个有智慧、思想的助手。如果我们在每次输出文案时，都能试着想象真实的对话并剖析，可能就能逐渐把一个“可用的产品“变成“贴心的朋友”，真正地走进用户的内心。

3. 验证——大声地念出来！

最后，如果你还是觉得心里没谱，不确定是否输出了合适的文案，有一条被苹果和谷歌共同推荐的验证方法，简单粗暴但有效，那就是 “大声将你的文案念出来”。

就像我们刚刚反复强调的，UX写作其实就是与用户创造有效的交谈，那么最简单的验证方法就是真正说出来，将它真正变成一段对话，然后再去聆听，最直观的感受到你的语言听起来是否自然不生硬？是否有一些不易察觉的重复或语法错误等等？

大声地将你的文案念出来，如果能使你自己信服，相信也能使你的用户信服。

四、结语

最后，读到这里，相信你已经对于UX文案有了一个全新的认识，并对如何做好它有了基本的概念。其实在日常工作中，每个产品对于UX文案的要求可能不尽相同，但重要的是作为设计师，我们能意识到他逐渐攀升的重要性并真正对他加以关注。引用苹果开发者大会上的一句话：UX写作其实就是始于对屏幕另一侧用户的好奇心，并真正怀着尊重和理解与其交流。只要能意识到这一点，相信大家都能呈现出真正有效的、令人愉悦的UX文案。

作者：腾讯ISUX
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

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

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

前言

博学多闻，不同凡响。

博闻美育，是一款致力于提升用户文化素养的产品。研发团队以“长见识，会思考，懂审美”作为核心理念，设计出《中国故事》《四方采风》《高端文学》等的系列课程。

面对一个真正落实人文素养的全新课程产品，我们作为视觉设计师，首先希望的就是为用户打造出最美的课堂，使用户在高品质的美学场景中能沉浸式体验到学习的乐趣。当然，我们同样希望探寻如何通过设计帮助青少年在使用产品时养成高审美意识，加强文化自信。

在此次对博闻产品的视觉品牌设计中，设计团队探寻了如何将视觉设计体验与课程教学更好的结合，以下为我们的设计过程以及设计成果。

设计目标：提升学习体验

首先，我们通过对产品特性的分析，明确了此次视觉品牌探索的主要设计目标 —— 重新定义什么是提升学习体验的人文素养产品，从用户视角转变为参与者，更加沉浸于课堂。

基于对设计目标的进一步探索，我们提炼出了提升学习体验的三种核心理念：

核心理念：情 感 | 经 典 | 沉 浸

情感 · 价值认同

近年来，国潮文化与传统艺术在青少年群体中“走红”，成为青年对话传统的方式。体现了青少年对中华优秀传统文化的价值认同和情感认同。我们希望在青少年养成审美与内在的关键阶段，也尽到自己的一份小小的努力。

经典 · 传承创新

在保留传统艺术精华的基础上，我们寻求视觉上的创新，突破设计的思维惯性，使用户可以通过现代的视觉表达形式与经典文化产生共鸣，传达国风之美，多角度唤起青少年用户对于传统经典的文化价值和艺术价值的理解。

沉浸 · 专注体验

我们希望将国风之美呈现在用户面前，将有道博闻系列课程全面包装成能够让学生身临其境的国风互动课堂，丰富用户的心智，发挥产品的双重价值。

设计策略：探索国风之美

确立核心理念后，我们将中国传统艺术中的精髓进一步提炼，最终选择了以下关键词作为视觉设计的表现点：

接下来，我们基于各个关键词对具体方案展开探索

01 国风之美 · 符号

容纳承载，历史渊源。

为了确保博闻三个系列的课程（《中国故事》《四方采风》《高端文学》）在品牌视觉设计上能够更好的进行拓展应用、传播差异化、与用户情感共鸣。我们结合了三个系列课程的特点与对传统文化的研究，分别为各个课程建立了代表性的元素作为超级符号，加强用户的记忆点：

① 中国故事 —— 讲述中华经典

中国故事系列课程会通过诗、词、歌、赋、散文、小说全类型文学作品，讲述中华经典。玉玺作为皇帝的玉印，是至高权力的象征，在各朝各代中见证了各色各样的传奇故事。因此选用【玉玺】作为中国故事的符号图形。

② 四方采风 —— 探访文化名城

四方采风系列课程首次“走出屏幕”，采用文化直播结合外景采拍的形式，在历史文化名城中讲述各地的风土人情。使用【中国古建筑】作为这一系列课程的超级符号，见证和反映了各地社会的发展和历史变迁。

③ 高端文学 —— 精读文学作品

高端文学系列课程将带领用户学习重磅文学作品，该系列选用【卷轴】作为代表符号，卷轴不仅承载了国人对中国绘画、书法的认识，更是写入了古人的思想与信念。

在确认好三个系列的代表符号后，我们将构图一分为二，左边作为系列的重点信息区域，右边作为符号以及视觉表现区域。

02 国风之美 · 色彩

浓墨淡彩，总相宜。

在视觉品牌的色彩方面，我们从古代写意的浓墨重彩中，提取出了富有中国气质的一抹颜料。

历史厚重的「红」，风光写意的「绿」，静心阅读的「蓝」代表了三个系列课程各自独有的气质。

03 国风之美 · 书法

刚柔并济，行云流水。

我们依据行楷的笔画特点，设计了三个系列的第一识别字体。「行楷」介于楷书与行书之间，比端正的楷书多一分活泼自由，又比随性的行书多一份端庄。我们在此行楷的灵活中增添一抹稳重，刚柔并济，恰到好处。

第二识别字体的设计灵感来源于印章。「印章」的历史可以追溯到战国，至今仍在生活中广泛应用，古人凿铜刻玉，力艰功深，我们希望这种信念依旧可以传承在青少年的品格中。受到印章印面形式的启发，设计了第二识别字体。文字采用现代字体为基础，增加辨识性。

04 国风之美 · 国画

清新淡雅，水天一色。

国画，以其永恒的艺术魅力穿越时空。国画的绘制讲求布局、造型、运笔、赋彩，不拘泥于自然物象的再现，强调主观意境的创造，是中华民族传统文化的瑰宝。我们借鉴了国画中工笔画的「留白」构图理念，并添加水墨画中的「墨韵」作为细节补充，创作了既符合现代视觉风格，又不失古韵的插画；

最终，我们将提炼出的「符号」「色彩」「书法」「国画」这四个关键词融合在系列课程之中。

创作作品凝结：深挖沉浸体验

01 除了赋予课堂知识，我们还能为用户做什么？

除了设计课程产品常规的讲义以及线上页面，为了进一步提升用户的沉浸式学习体验，有道博闻独创了「手账本」这一教辅材料，并且随课程附赠可以使用户进一步体验传统艺术魅力的「国风礼盒」。

02 如何使用户更加沉浸地参与课堂？

「手账本」可以帮助用户将课上的知识融会贯通，并收入「手抄报」「旅行MAP」「作家名片」「思维导图」等模块，让用户深度参与到【输入-加工-输出】的产品结构中，使用户充分吸收课堂知识、加入自己的思考理解，并最终输出观点和总结。【听-想-做】循环，巩固知识印象。我们最终会收集用户的优秀作品，并集结成刊，出版成册，进一步提升用户的参与度，增强他们的学习热情。

在手账本的视觉设计中，我们根据课程内容绘制了精美插图，考虑到用户书写的便捷性，设计了古风的书写外框，力求用户可以时时刻刻沉浸在充满国风之美的课堂中，使视觉设计与教学内容完美融合。

03 所有心意，只为准备给喜爱课程的你！

「国风礼盒」将“长见识，会思考，懂审美”的概念植入到礼盒的选品和包装中。封面设计我们选用了「时空穿梭」的概念，通过时空隧道，串联古今，大开眼界。礼品内容里，充分尊重用户的喜好，最终选取了「国画颜料」「手绘扇子」「国风笔记本」「考古盲盒」。每一份礼品，都充满着我们对它的严格要求和对用户参与的期待。

写在最后

“古老的种子，它生命的胚芽蕴藏于内部，只是需要在新时代的土壤里播种。”    ——泰戈尔

中华传统文化正是一颗充满惊喜和生机的种子，静待着我们的细心发掘。我们会继续探索，用设计在新时代中传承优秀传统文化。让传统艺术拥抱青少年，让东方美学成为青少年心中最引以为豪的文化。

本次有道博闻项目的设计过程中，我们牢记以用户为中心的理念，做与课程产品融合的设计，最终收获了一份宝贵的经验，也获得了用户的一致好评和赞许。未来，设计团队也会坚持做以用户为中心的产品，传达设计的力量。

相信种子，相信力量。

                         

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系。 



作者： 有道LCT设计团队  来源：站酷





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



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

01 前言

你有没有注意过，App底部的图标是如何变成选中的？大多数产品是将静态图标替换（硬切过渡），来完成状态切换。

当我看完上百个动态后，找到了更有趣的方式...

02 App底部导航构成

通常由图标、文字/点线装饰、和底板卡片组成，（当然也有些产品只使用图标或文字），但设计师在进行动态设计时则是针对这3部分。

03 Tab Bar动态类型

• 图标动态
• 装饰元素动态
• 底板卡片动态

动态效果由弱到强，视觉层级由低到高依次排序：图标动态 — 装饰元素动态 — 底板卡片动态。（根据本文案例效果来排序，但效果不同会有所差异）

▍图标动态․
我们知道图标风格可以简单的分为：线性、面性还有线面。在这基础上通过修改颜色或造型，又能延展出更多风格。

• 在底部导航中，假如图标选中前后都是线性风格

最常用的是添加修剪路径（Ae的一种路径效果），你可以把它理解成托尼老师，可以通过调整百分百参数来控制线条生长。

但只是单色修剪，看起来很单调。我们可以在这个动画基础上再多复制几层，并分别加入品牌色，这样可以让视觉看起来更丰富。

也可以换一种方式，只调整不同颜色图标的位置属性，便能得到故障效果。

如果你觉得这些太浮夸，那么单个图标添加修剪路径，再配合位移、旋转等基础属性则是更好的选择。

• 假如选中图标是面型风格

通用的方法是调整不透明度，相比于硬切更柔和，且不会过多吸引用户注意力。但对于带有娱乐类属性的产品来说，可能会显得有些普通。

我们可以考虑使用遮罩来制作动态，首先在图标周围绘制几个圆，再将图标外轮廓，作为圆的遮罩，来控制其显示范围，最后调整圆的缩放即可。

在一些特殊的时间，设计师们可能会技痒，而将图标绘制的更加丰富，来营造氛围。

对于这类图标，只需要参考它们的物理状态[下方解释]，再遵循从下往上，从中心往四周扩张的原则来调整基础属性，便能制作出细节丰富的出场动画。

（物理状态：该物体在现实场景下的状态，上图奖杯真实世界状态通常是放置地面，所以出场方向是从下到上。但假如你的图标是锦旗，那么物理状态应该是挂在墙上，所有出场方向是从上到下）

当然如果去掉高光和投影，在制作一些动态时会更方便。
例如：复制一颗星，将其初始位置设定为一个奖杯的距离，并记录关键帧，然后整体再移动一个奖杯距离。耳朵则调整路径来完成移动和变形，这样便能营造出3d旋转的错觉。

• 假如选中图标是线面风格

对于结构复杂的图标，可以提前分层。其中线条依旧可以使用修剪路径（在Tab bar中，不同图标修剪路径的起始点方向通常相同，以便保持一致性），而填充只需要调整元素缩放，并借助蒙版限制其显示范围就行。

▍装饰元素动态․
如果你觉得前面这些方案不够新颖，那我们可以对装饰元素下手。（当然这类方案很少见，原因在于商业价值不足，实现成本高，所以这里也只是提供一些创意练习思路）
在一些年轻化产品中，如果图标含义很容易理解，那么设计师可能会用线或点来替代文字，让整体更简洁。
国外设计师Tubik，通过让点元素在移动时呈现心电图样式，让人眼前一亮。

通过动态效果，甚至能体现出产品行业属性。

• 基于这种思路，我们同样让装饰元素放在下方

尝试修改轨迹样式，然后为元素不透明度和位置添加动画，你能猜出这是什么类型的产品吗？

又或者再夸张些，将轨迹设计成电路图。其中线条添加修剪路径，再借助Ae路径跟踪方法，使圆点沿路径运动。最后通过蒙版来控制整体动画显示范围，这个方案看起来适合科技或游戏类产品。

• 装饰元素还可以放在上方

通过调整元素路径来改变其造型，模拟液体滴落，再通过蒙版缩放，让选中状态下的图标出现。

• 装饰元素还可以放在中间

假如你的图标设计的足够巧妙，我们可以提前绘制好关键笔画的运动轨迹，便能通过修剪这条轨迹来完成笔画的移动。

▍底板卡片动态․
这类动态少见的原因在于其动态效果面积大，视觉层级高，容易过度吸引用户注意力。目前也只是在个别产品中看过卡片凸起效果。

• 当选中图标时，让卡片凸起

在Ae中要制造这样的效果，最先想到的可能是调整卡片路径，但这样的方式在制作弹性时非常麻烦。

我们有更简单的方法，先多画出一个圆，然后与卡片路径合并。
为了让边缘圆滑，整体添加高斯模糊和简单阻塞，分别加大参数，便能让边缘圆滑。（这种方式有个缺点：会收缩原有卡片宽高。所以添加效果后，需要借助参考线再次调整卡片大小）

完成圆滑处理后，修改其他元素的基础属性即可。

目前能记起的只有美团外卖看过这效果。但为了降低视觉干扰，其弱化了弹性次数。

• 除了凸起，还可以凹陷

这个效果灵感来源于Dribbble设计师（EuroART93），我们只需要将凸起案例中，圆与底板卡片的布尔运算模式改为相减就行，其他元素同样调整基础属性。

此方案目前还没有在其他产品中看过，究其原因还是效果太过抢眼。

看了这么多，其实不难发现。同一个图标，只需要改变不同属性或元素的运动方式，便能带来不一样的感受。

或许创意的产生，并不是脑袋突然迸发出全新的东西。而是许多我们熟知的旧有内容组合了起来。
正是它们之间这种奇妙的融合，给我们带来了新鲜感，或许这就是我们要的创意。

---

最后再说两句：

每个产品都有自己的调性和目标用户，动态效果也有强有弱。好的动态应该是能与其进行匹配，而不是根据某个产品得出一个绝对的答案。
本文演示了不同类型图标用什么动态，并不代表只能这样用。动态效果类型远远不止这些，而以上只是最常见的动态属性组合方式，所以请不要局限你的想法。

作者：幺零三
链接：https://www.zcool.com.cn/article/ZMTQ5OTgwOA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作者：幺零三      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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