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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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）。

交互周期包括執行過程和評估過程，前者是行動所需信息差，后者是行動發生時各類情況所需理解的信息差。整體用戶體驗取決于交互過程中互動周期的每個部分。微交互的目標是消除差距，使產品變得直觀?，F在讓我們看看微交互的基礎結構，了解它們如何幫助消除信息差。

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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

前言

博學多聞，不同凡響。

博聞美育，是一款致力于提升用戶文化素養的產品。研發團隊以“長見識，會思考，懂審美”作為核心理念，設計出《中國故事》《四方采風》《高端文學》等的系列課程。

面對一個真正落實人文素養的全新課程產品，我們作為視覺設計師，首先希望的就是為用戶打造出最美的課堂，使用戶在高品質的美學場景中能沉浸式體驗到學習的樂趣。當然，我們同樣希望探尋如何通過設計幫助青少年在使用產品時養成高審美意識，加強文化自信。

在此次對博聞產品的視覺品牌設計中，設計團隊探尋了如何將視覺設計體驗與課程教學更好的結合，以下為我們的設計過程以及設計成果。

設計目標：提升學習體驗

首先，我們通過對產品特性的分析，明確了此次視覺品牌探索的主要設計目標 —— 重新定義什么是提升學習體驗的人文素養產品，從用戶視角轉變為參與者，更加沉浸于課堂。

基于對設計目標的進一步探索，我們提煉出了提升學習體驗的三種核心理念：

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

情感 · 價值認同

近年來，國潮文化與傳統藝術在青少年群體中“走紅”，成為青年對話傳統的方式。體現了青少年對中華優秀傳統文化的價值認同和情感認同。我們希望在青少年養成審美與內在的關鍵階段，也盡到自己的一份小小的努力。

經典 · 傳承創新

在保留傳統藝術精華的基礎上，我們尋求視覺上的創新，突破設計的思維慣性，使用戶可以通過現代的視覺表達形式與經典文化產生共鳴，傳達國風之美，多角度喚起青少年用戶對于傳統經典的文化價值和藝術價值的理解。

沉浸 · 專注體驗

我們希望將國風之美呈現在用戶面前，將有道博聞系列課程全面包裝成能夠讓學生身臨其境的國風互動課堂，豐富用戶的心智，發揮產品的雙重價值。

設計策略：探索國風之美

確立核心理念后，我們將中國傳統藝術中的精髓進一步提煉，最終選擇了以下關鍵詞作為視覺設計的表現點：

接下來，我們基于各個關鍵詞對具體方案展開探索

01 國風之美 · 符號

容納承載，歷史淵源。

為了確保博聞三個系列的課程（《中國故事》《四方采風》《高端文學》）在品牌視覺設計上能夠更好的進行拓展應用、傳播差異化、與用戶情感共鳴。我們結合了三個系列課程的特點與對傳統文化的研究，分別為各個課程建立了代表性的元素作為超級符號，加強用戶的記憶點：

① 中國故事 —— 講述中華經典

中國故事系列課程會通過詩、詞、歌、賦、散文、小說全類型文學作品，講述中華經典。玉璽作為皇帝的玉印，是至高權力的象征，在各朝各代中見證了各色各樣的傳奇故事。因此選用【玉璽】作為中國故事的符號圖形。

② 四方采風 —— 探訪文化名城

四方采風系列課程首次“走出屏幕”，采用文化直播結合外景采拍的形式，在歷史文化名城中講述各地的風土人情。使用【中國古建筑】作為這一系列課程的超級符號，見證和反映了各地社會的發展和歷史變遷。

③ 高端文學 —— 精讀文學作品

高端文學系列課程將帶領用戶學習重磅文學作品，該系列選用【卷軸】作為代表符號，卷軸不僅承載了國人對中國繪畫、書法的認識，更是寫入了古人的思想與信念。

在確認好三個系列的代表符號后，我們將構圖一分為二，左邊作為系列的重點信息區域，右邊作為符號以及視覺表現區域。

02 國風之美 · 色彩

濃墨淡彩，總相宜。

在視覺品牌的色彩方面，我們從古代寫意的濃墨重彩中，提取出了富有中國氣質的一抹顏料。

歷史厚重的「紅」，風光寫意的「綠」，靜心閱讀的「藍」代表了三個系列課程各自獨有的氣質。

03 國風之美 · 書法

剛柔并濟，行云流水。

我們依據行楷的筆畫特點，設計了三個系列的第一識別字體?！感锌菇橛诳瑫c行書之間，比端正的楷書多一分活潑自由，又比隨性的行書多一份端莊。我們在此行楷的靈活中增添一抹穩重，剛柔并濟，恰到好處。

第二識別字體的設計靈感來源于印章。「印章」的歷史可以追溯到戰國，至今仍在生活中廣泛應用，古人鑿銅刻玉，力艱功深，我們希望這種信念依舊可以傳承在青少年的品格中。受到印章印面形式的啟發，設計了第二識別字體。文字采用現代字體為基礎，增加辨識性。

04 國風之美 · 國畫

清新淡雅，水天一色。

國畫，以其永恒的藝術魅力穿越時空。國畫的繪制講求布局、造型、運筆、賦彩，不拘泥于自然物象的再現，強調主觀意境的創造，是中華民族傳統文化的瑰寶。我們借鑒了國畫中工筆畫的「留白」構圖理念，并添加水墨畫中的「墨韻」作為細節補充，創作了既符合現代視覺風格，又不失古韻的插畫；

最終，我們將提煉出的「符號」「色彩」「書法」「國畫」這四個關鍵詞融合在系列課程之中。

創作作品凝結：深挖沉浸體驗

01 除了賦予課堂知識，我們還能為用戶做什么？

除了設計課程產品常規的講義以及線上頁面，為了進一步提升用戶的沉浸式學習體驗，有道博聞獨創了「手賬本」這一教輔材料，并且隨課程附贈可以使用戶進一步體驗傳統藝術魅力的「國風禮盒」。

02 如何使用戶更加沉浸地參與課堂？

「手賬本」可以幫助用戶將課上的知識融會貫通，并收入「手抄報」「旅行MAP」「作家名片」「思維導圖」等模塊，讓用戶深度參與到【輸入-加工-輸出】的產品結構中，使用戶充分吸收課堂知識、加入自己的思考理解，并最終輸出觀點和總結?！韭?想-做】循環，鞏固知識印象。我們最終會收集用戶的優秀作品，并集結成刊，出版成冊，進一步提升用戶的參與度，增強他們的學習熱情。

在手賬本的視覺設計中，我們根據課程內容繪制了精美插圖，考慮到用戶書寫的便捷性，設計了古風的書寫外框，力求用戶可以時時刻刻沉浸在充滿國風之美的課堂中，使視覺設計與教學內容完美融合。

03 所有心意，只為準備給喜愛課程的你！

「國風禮盒」將“長見識，會思考，懂審美”的概念植入到禮盒的選品和包裝中。封面設計我們選用了「時空穿梭」的概念，通過時空隧道，串聯古今，大開眼界。禮品內容里，充分尊重用戶的喜好，最終選取了「國畫顏料」「手繪扇子」「國風筆記本」「考古盲盒」。每一份禮品，都充滿著我們對它的嚴格要求和對用戶參與的期待。

寫在最后

“古老的種子，它生命的胚芽蘊藏于內部，只是需要在新時代的土壤里播種?！?nbsp;   ——泰戈爾

中華傳統文化正是一顆充滿驚喜和生機的種子，靜待著我們的細心發掘。我們會繼續探索，用設計在新時代中傳承優秀傳統文化。讓傳統藝術擁抱青少年，讓東方美學成為青少年心中最引以為豪的文化。

本次有道博聞項目的設計過程中，我們牢記以用戶為中心的理念，做與課程產品融合的設計，最終收獲了一份寶貴的經驗，也獲得了用戶的一致好評和贊許。未來，設計團隊也會堅持做以用戶為中心的產品，傳達設計的力量。

相信種子，相信力量。

                         

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系。 



作者： 有道LCT設計團隊  來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

01 前言

你有沒有注意過，App底部的圖標是如何變成選中的？大多數產品是將靜態圖標替換（硬切過渡），來完成狀態切換。

當我看完上百個動態后，找到了更有趣的方式...

02 App底部導航構成

通常由圖標、文字/點線裝飾、和底板卡片組成，（當然也有些產品只使用圖標或文字），但設計師在進行動態設計時則是針對這3部分。

03 Tab Bar動態類型

• 圖標動態
• 裝飾元素動態
• 底板卡片動態

動態效果由弱到強，視覺層級由低到高依次排序：圖標動態 — 裝飾元素動態 — 底板卡片動態。（根據本文案例效果來排序，但效果不同會有所差異）

▍圖標動態?
我們知道圖標風格可以簡單的分為：線性、面性還有線面。在這基礎上通過修改顏色或造型，又能延展出更多風格。

• 在底部導航中，假如圖標選中前后都是線性風格

最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調整百分百參數來控制線條生長。

但只是單色修剪，看起來很單調。我們可以在這個動畫基礎上再多復制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。

也可以換一種方式，只調整不同顏色圖標的位置屬性，便能得到故障效果。

如果你覺得這些太浮夸，那么單個圖標添加修剪路徑，再配合位移、旋轉等基礎屬性則是更好的選擇。

• 假如選中圖標是面型風格

通用的方法是調整不透明度，相比于硬切更柔和，且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產品來說，可能會顯得有些普通。

我們可以考慮使用遮罩來制作動態，首先在圖標周圍繪制幾個圓，再將圖標外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調整圓的縮放即可。

在一些特殊的時間，設計師們可能會技癢，而將圖標繪制的更加豐富，來營造氛圍。

對于這類圖標，只需要參考它們的物理狀態[下方解釋]，再遵循從下往上，從中心往四周擴張的原則來調整基礎屬性，便能制作出細節豐富的出場動畫。

（物理狀態：該物體在現實場景下的狀態，上圖獎杯真實世界狀態通常是放置地面，所以出場方向是從下到上。但假如你的圖標是錦旗，那么物理狀態應該是掛在墻上，所有出場方向是從上到下）

當然如果去掉高光和投影，在制作一些動態時會更方便。
例如：復制一顆星，將其初始位置設定為一個獎杯的距離，并記錄關鍵幀，然后整體再移動一個獎杯距離。耳朵則調整路徑來完成移動和變形，這樣便能營造出3d旋轉的錯覺。

• 假如選中圖標是線面風格

對于結構復雜的圖標，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標修剪路徑的起始點方向通常相同，以便保持一致性），而填充只需要調整元素縮放，并借助蒙版限制其顯示范圍就行。

▍裝飾元素動態?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當然這類方案很少見，原因在于商業價值不足，實現成本高，所以這里也只是提供一些創意練習思路）
在一些年輕化產品中，如果圖標含義很容易理解，那么設計師可能會用線或點來替代文字，讓整體更簡潔。
國外設計師Tubik，通過讓點元素在移動時呈現心電圖樣式，讓人眼前一亮。

通過動態效果，甚至能體現出產品行業屬性。

• 基于這種思路，我們同樣讓裝飾元素放在下方

嘗試修改軌跡樣式，然后為元素不透明度和位置添加動畫，你能猜出這是什么類型的產品嗎？

又或者再夸張些，將軌跡設計成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍，這個方案看起來適合科技或游戲類產品。

• 裝飾元素還可以放在上方

通過調整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態下的圖標出現。

• 裝飾元素還可以放在中間

假如你的圖標設計的足夠巧妙，我們可以提前繪制好關鍵筆畫的運動軌跡，便能通過修剪這條軌跡來完成筆畫的移動。

▍底板卡片動態?
這類動態少見的原因在于其動態效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個別產品中看過卡片凸起效果。

• 當選中圖標時，讓卡片凸起

在Ae中要制造這樣的效果，最先想到的可能是調整卡片路徑，但這樣的方式在制作彈性時非常麻煩。

我們有更簡單的方法，先多畫出一個圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數，便能讓邊緣圓滑。（這種方式有個缺點：會收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調整卡片大?。?/span>

完成圓滑處理后，修改其他元素的基礎屬性即可。

目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數。

• 除了凸起，還可以凹陷

這個效果靈感來源于Dribbble設計師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運算模式改為相減就行，其他元素同樣調整基礎屬性。

此方案目前還沒有在其他產品中看過，究其原因還是效果太過搶眼。

看了這么多，其實不難發現。同一個圖標，只需要改變不同屬性或元素的運動方式，便能帶來不一樣的感受。

或許創意的產生，并不是腦袋突然迸發出全新的東西。而是許多我們熟知的舊有內容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創意。

---

最后再說兩句：

每個產品都有自己的調性和目標用戶，動態效果也有強有弱。好的動態應該是能與其進行匹配，而不是根據某個產品得出一個絕對的答案。
本文演示了不同類型圖標用什么動態，并不代表只能這樣用。動態效果類型遠遠不止這些，而以上只是最常見的動態屬性組合方式，所以請不要局限你的想法。

作者：幺零三
鏈接：https://www.zcool.com.cn/article/ZMTQ5OTgwOA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

作者：幺零三      來源：站酷



藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司