首页

102023-1

《服务设计与创新实践》深入导读 · 理解人与人际

鹤鹤

本章的内容围绕“人”这个中心，分成了两个要点：

1.人是服务的核心
2.洞见与数字

01.人是服务的核心

在人是服务核心这里，简而言之就是首先用户体验是至关重要的，单体产品并不能代表设计本身。

这个要点并没有什么新意，大家都知道用户中心设计思维在设计中的地位。而其实，真正“人是核心”想说是设计师要注意多个方面的参与者。

这里我给出一个例子，比如在中国非常火热的外卖系统，虽然我们会认为典型的user是点外卖的人，但实际上商家、外卖小哥甚至平台自身的客服人员都是服务设计所需要关注的“人”，但需要关注的理由各异，后续会讲到。

02.洞见与数字

洞见与数字，在英文原书中用的词是 Insights versus Numbers，注意是 versus 而不是 and, 也就是说原作者的意思是 insight 和 number 是存在一些对立和取舍的。

图片出处:Rosenfeld Media 图片授权：Attribution 2.0 Generic (CC BY 2.0)

如这张图所示：作者认为和传统的用户研究手段获得多个有用的可量化的 facts/truths 不同，服务设计的洞见需要的不是更多的 truth, 而是更深入但却不可量化的 insights.

所以，与其得到更多的 numbers 不如更深入的获得 insights. 由于第四章会对insight和获得insight的过程进行详细展开，这里我就不过多展开了。

03.with people

除了上述两个要点外，有个小点值得放大一下，中文版书中有个小标题叫“共同设计，而不是单方面只为客户设计”，英文原版叫做“design with people, not for them”.

我们也能够看出原书作者又一次强调了服务设计的共创属性，当然这个共创属性也是第二章中作者阐述过的内容，再结合本章第一点中对“人”的定义，那么共创的对象就应该是更多的参与者而不仅仅是用户了。

作者在原书中明确说设计师要和一线接触用户客户的员工进行共创，因为他们洞见更加深入，更有价值。

04.解读

首先大家都是做设计的，前期调研的事情一定没少做过，往往我们习惯了用饼图柱状图条状图等内容来表达自己的调研结果（事实上是调查结果，因为研究是基于调查结果的，真正的研究并没有开始）。

但在服务设计领域中，获得结果导向的数据往往意义不太大，我们需要的是基于洞察的共情，以及基于共情的用户体验确认，毕竟我们无法用简单粗暴的诸如1升汽油或者60°C的热水一样，用一个可量化的量词来规范人的情感。

正是因此，与传统UCD类似直男般 fact-problem-needs 的思维逻辑不通，服务设计需要我们设计师走入洞察-共情-需求 insight-empahize-needs 这样的路径。

其次，作者强调的是“人/people”，而非“user”，这个细节非常重要。

试想这个例子，比如这里有片广场，有一群活力四射的阿姨在跳广场舞，那么我们应该关注的是谁呢？是广场舞阿姨吗？

是，但不只是。因为，广场上还有其他的诸如看跳广场舞的大叔、玩耍的孩子、路过的市民甚至周边离得近的居民等，他们显然都是这里的people而很难剥离出一个人群我们称他们为user. 如果我们要做广场的优化设计，那么所有人都应该是我们关注的对象和共创的对象。

作者：马克笔设计留学
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

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

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

评论(0) 浏览(1540)

102023-1

VUE&Element简单介绍。

一、VUE

1、基本介绍

▶ 概述

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

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

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

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

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

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

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

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

▶ 快速入门

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

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

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

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


    

        

            

                

                

            

            

                
                    new Vue({
                

            

        

        

            

                

                

            

            

                
                           el: "#app",
                

            

        

        

            

                

                

            

            

                
                           data() {
                

            

        

        

            

                

                

            

            

                
                               return {
                

            

        

        

            

                

                

            

            

                
                                   username: ""
                

            

        

        

            

                

                

            

            

                
                               }
                

            

        

        

            

                

                

            

            

                
                           }
                

            

        

        

            

                

                

            

            

                
                       });

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

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

3. 编写视图


    

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                           {{username}}
                

            

        

        

            

                

                

            

            

                
                       </div>

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

▷ 整体代码如下：


    

        

            

                

                

            

            

                
                    <!DOCTYPE html>
                

            

        

        

            

                

                

            

            

                
                    <html lang="en">
                

            

        

        

            

                

                

            

            

                
                    <head>
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8">
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title>
                

            

        

        

            

                

                

            

            

                
                    </head>
                

            

        

        

            

                

                

            

            

                
                    <body>
                

            

        

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

                
                        <input v-model="username">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        {{username}}
                

            

        

        

            

                

                

            

            

                
                    </div>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    <script>
                

            

        

        

            

                

                

            

            

                
                        //1. 创建Vue核心对象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:""
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                            /*data: function () {
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:""
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }*/
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

2、Vue 指令

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

▷ v-bind & v-model 指令

▷ v-bind

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

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

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


    

        

            

                

                

            

            

                
                    <!--
                

            

        

        

            

                

                

            

            

                
                          v-bind 可以省略
                

            

        

        

            

                

                

            

            

                
                      -->
                

            

        

        

            

                

                

            

            

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

▷ v-model

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

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

▷ 代码演示：


    

        

            

                

                

            

            

                
                    <!DOCTYPE html>
                

            

        

        

            

                

                

            

            

                
                    <html lang="en">
                

            

        

        

            

                

                

            

            

                
                    <head>
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8">
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title>
                

            

        

        

            

                

                

            

            

                
                    </head>
                

            

        

        

            

                

                

            

            

                
                    <body>
                

            

        

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        <input v-model="url">
                

            

        

        

            

                

                

            

            

                
                    </div>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    <script>
                

            

        

        

            

                

                

            

            

                
                        //1. 创建Vue核心对象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:"",
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

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

▶ v-on 指令

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

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

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

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

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


    

        

            

                

                

            

            

                
                    new Vue({
                

            

        

        

            

                

                

            

            

                
                        el: "#app",
                

            

        

        

            

                

                

            

            

                
                        methods: {
                

            

        

        

            

                

                

            

            

                
                            show(){
                

            

        

        

            

                

                

            

            

                
                                alert("我被点了");
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        }
                

            

        

        

            

                

                

            

            

                
                    });

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

▷ 整体页面代码如下：


    

        

            

                

                

            

            

                
                    <!DOCTYPE html>
                

            

        

        

            

                

                

            

            

                
                    <html lang="en">
                

            

        

        

            

                

                

            

            

                
                    <head>
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8">
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title>
                

            

        

        

            

                

                

            

            

                
                    </head>
                

            

        

        

            

                

                

            

            

                
                    <body>
                

            

        

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    </div>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    <script>
                

            

        

        

            

                

                

            

            

                
                        //1. 创建Vue核心对象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:"",
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            },
                

            

        

        

            

                

                

            

            

                
                            methods:{
                

            

        

        

            

                

                

            

            

                
                                show(){
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

▶ 条件判断指令

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


    

        

            

                

                

            

            

                
                    //1. 创建Vue核心对象
                

            

        

        

            

                

                

            

            

                
                    new Vue({
                

            

        

        

            

                

                

            

            

                
                        el:"#app",
                

            

        

        

            

                

                

            

            

                
                        data(){
                

            

        

        

            

                

                

            

            

                
                            return {
                

            

        

        

            

                

                

            

            

                
                                count:3
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        }
                

            

        

        

            

                

                

            

            

                
                    });

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


    

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        <div v-else>div3</div>
                

            

        

        

            

                

                

            

            

                
                        <hr>
                

            

        

        

            

                

                

            

            

                
                        <input v-model="count">
                

            

        

        

            

                

                

            

            

                
                    </div>

▷ 整体页面代码如下：


    

        

            

                

                

            

            

                
                    <!DOCTYPE html>
                

            

        

        

            

                

                

            

            

                
                    <html lang="en">
                

            

        

        

            

                

                

            

            

                
                    <head>
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8">
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title>
                

            

        

        

            

                

                

            

            

                
                    </head>
                

            

        

        

            

                

                

            

            

                
                    <body>
                

            

        

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        <div v-else>div3</div>
                

            

        

        

            

                

                

            

            

                
                        <hr>
                

            

        

        

            

                

                

            

            

                
                        <input v-model="count">
                

            

        

        

            

                

                

            

            

                
                    </div>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    <script>
                

            

        

        

            

                

                

            

            

                
                        //1. 创建Vue核心对象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    count:3
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

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

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


    

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    <br>
                

            

        

        

            

                

                

            

            

                
                    <input v-model="count">

浏览器打开效果如下：

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

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

▶ v-for 指令

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


    

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        {{变量名}}
                

            

        

        

            

                

                

            

            

                
                    </标签>

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

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


    

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    </标签>

▷ 代码演示：


    

        

            

                

                

            

            

                
                    <!DOCTYPE html>
                

            

        

        

            

                

                

            

            

                
                    <html lang="en">
                

            

        

        

            

                

                

            

            

                
                    <head>
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8">
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title>
                

            

        

        

            

                

                

            

            

                
                    </head>
                

            

        

        

            

                

                

            

            

                
                    <body>
                

            

        

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                            {{addr}} <br>
                

            

        

        

            

                

                

            

            

                
                        </div>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                        <hr>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        </div>
                

            

        

        

            

                

                

            

            

                
                    </div>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    <script>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                        //1. 创建Vue核心对象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

通过浏览器打开效果如下

3、生命周期

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

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

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

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

二、Element

1、基本介绍

▶ 概述

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

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

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

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

进入官网能看到如下页面

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

2、Element 布局

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

● Layout 布局
● Container 布局容器

▷ Layout 局部

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

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

▷ 整体页面代码如下：


    

        

            

                

                

            

            

                
                    <!DOCTYPE html>
                

            

        

        

            

                

                

            

            

                
                    <html lang="en">
                

            

        

        

            

                

                

            

            

                
                    <head>
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8">
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                        <style>
                

            

        

        

            

                

                

            

            

                
                            .el-row {
                

            

        

        

            

                

                

            

            

                
                                margin-bottom: 20px;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .el-col {
                

            

        

        

            

                

                

            

            

                
                                border-radius: 4px;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .bg-purple-dark {
                

            

        

        

            

                

                

            

            

                
                                background: #99a9bf;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .bg-purple {
                

            

        

        

            

                

                

            

            

                
                                background: #d3dce6;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .bg-purple-light {
                

            

        

        

            

                

                

            

            

                
                                background: #e5e9f2;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .grid-content {
                

            

        

        

            

                

                

            

            

                
                                border-radius: 4px;
                

            

        

        

            

                

                

            

            

                
                                min-height: 36px;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .row-bg {
                

            

        

        

            

                

                

            

            

                
                                padding: 10px 0;
                

            

        

        

            

                

                

            

            

                
                                background-color: #f9fafc;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        </style>
                

            

        

        

            

                

                

            

            

                
                    </head>
                

            

        

        

            

                

                

            

            

                
                    <body>
                

            

        

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

                
                        <el-row>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        </el-row>
                

            

        

        

            

                

                

            

            

                
                        <el-row>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        </el-row>
                

            

        

        

            

                

                

            

            

                
                        <el-row>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        </el-row>
                

            

        

        

            

                

                

            

            

                
                        <el-row>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        </el-row>
                

            

        

        

            

                

                

            

            

                
                        <el-row>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                        </el-row>
                

            

        

        

            

                

                

            

            

                
                    </div>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    <script>
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app"
                

            

        

        

            

                

                

            

            

                
                        })
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

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


    

        

            

                

                

            

            

                
                    <!--
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    -->
                

            

        

        

            

                

                

            

            

                
                    <el-row>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    </el-row>

▶ Container 布局容器

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

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

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

▷ 整体页面代码如下：


    

        

            

                

                

            

            

                
                    <!DOCTYPE html>
                

            

        

        

            

                

                

            

            

                
                    <html lang="en">
                

            

        

        

            

                

                

            

            

                
                    <head>
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8">
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                        <style>
                

            

        

        

            

                

                

            

            

                
                            .el-header {
                

            

        

        

            

                

                

            

            

                
                                background-color: #B3C0D1;
                

            

        

        

            

                

                

            

            

                
                                color: #333;
                

            

        

        

            

                

                

            

            

                
                                line-height: 60px;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                            .el-aside {
                

            

        

        

            

                

                

            

            

                
                                color: #333;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        </style>
                

            

        

        

            

                

                

            

            

                
                    </head>
                

            

        

        

            

                

                

            

            

                
                    <body>
                

            

        

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                    <el-submenu index="1">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        <el-menu-item-group>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-menu-item-group>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-menu-item-group>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-submenu>
                

            

        

        

            

                

                

            

            

                
                                    </el-submenu>
                

            

        

        

            

                

                

            

            

                
                                    <el-submenu index="2">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-submenu>
                

            

        

        

            

                

                

            

            

                
                                    </el-submenu>
                

            

        

        

            

                

                

            

            

                
                                    <el-submenu index="3">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        <el-menu-item-group>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-menu-item-group>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-menu-item-group>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-submenu>
                

            

        

        

            

                

                

            

            

                
                                    </el-submenu>
                

            

        

        

            

                

                

            

            

                
                                </el-menu>
                

            

        

        

            

                

                

            

            

                
                            </el-aside>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                            <el-container>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                    <el-dropdown>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-dropdown-menu>
                

            

        

        

            

                

                

            

            

                
                                    </el-dropdown>
                

            

        

        

            

                

                

            

            

                
                                    <span>王小虎</span>
                

            

        

        

            

                

                

            

            

                
                                </el-header>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                                <el-main>
                

            

        

        

            

                

                

            

            

                
                                    <el-table :data="tableData">
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-table-column>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-table-column>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                        </el-table-column>
                

            

        

        

            

                

                

            

            

                
                                    </el-table>
                

            

        

        

            

                

                

            

            

                
                                </el-main>
                

            

        

        

            

                

                

            

            

                
                            </el-container>
                

            

        

        

            

                

                

            

            

                
                        </el-container>
                

            

        

        

            

                

                

            

            

                
                    </div>
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    <script>
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data() {
                

            

        

        

            

                

                

            

            

                
                                const item = {
                

            

        

        

            

                

                

            

            

                
                                    date: '2016-05-02',
                

            

        

        

            

                

                

            

            

                
                                    name: '王小虎',
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                                };
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    tableData: Array(20).fill(item)
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        })
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

▶ 完成分页条展示

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

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

▷ 上面代码属性说明：

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

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

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

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

▷ 事件说明：

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

来源：csdn

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

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

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

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

评论(0) 浏览(1735)

102023-1

[ 红队知识库 ] 常见防火墙(WAF)拦截页面

前端达人

一、云WAF

云WAF主要利用DNS技术，通过移交域名解析权来实现安全防护，用户的请求首先发送到云端节点进行检测，如存在异常请求则进行拦截否则将请求转发至真实服务器。

1、阿里云盾

http://aliyunyd.com/ 
        

            
                1

在这里插入图片描述

2、腾讯T-Sec Wb 应用防火墙

https://cloud.tencent.com/product/waf 
        

            
                1

在这里插入图片描述

3、华为Web应用防火墙 WAF

https://www.huaweicloud.com/product/waf.html 
        

            
                1

在这里插入图片描述

4、安恒云-Web应用防火墙（玄武盾）平台

https://www.dbappsecurity.com.cn/product/cloud119.html 
        

            
                1

在这里插入图片描述

6、百度云应用防火墙 WAF

https://cloud.baidu.com/product/waf.html 
        

            
                1

在这里插入图片描述

7、华为云-云防火墙 CFW

https://www.huaweicloud.com/product/cfw.html 
        

            
                1

在这里插入图片描述

8、安全狗云御WEB应用防护系统

https://www.safedog.cn/index/wafIndex.html 
        

            
                1

在这里插入图片描述

9、知道创宇-创宇盾Web应用防火墙

https://defense.yunaq.com/cyd/ 
        

            
                1

在这里插入图片描述

10、F5 分布式云 WAF

https://www.f5.com.cn/cloud/products/distributed-cloud-waf 
        

            
                1

在这里插入图片描述

11、奇安信网站卫士

https://wangzhan.qianxin.com/ 
        

            
                1

在这里插入图片描述

12、360磐云

https://wangzhan.360.cn/panyun 
        

            
                1

在这里插入图片描述

13、网宿Web应用防火墙

https://www.wangsu.com/product/52 
        

            
                1

在这里插入图片描述

14、奇安信网神WEB应用安全云防护系统（安域）

https://www.qianxin.com/product/detail/pid/400 
        

            
                1

在这里插入图片描述

15、腾讯云WAF

在这里插入图片描述

16、腾讯门神

在这里插入图片描述

17、绿盟网站云防护

https://www.nsfocus.com.cn/html/2020/458_0107/108.html 
        

            
                1

18、启明星辰虚拟化WAF

https://www.venustech.com.cn/new_type/xnWAF/ 
        

            
                1

19、深信服云Web应用防火墙云WAF

https://www.sangfor.com.cn/product-and-solution/sangfor-security/yun-web 
        

            
                1

20、瑞数动态Web应用防火墙（River Safeplus）

https://www.riversecurity.com/product-Safeplus.shtml 
        

            
                1

二、硬件WAF

硬件WAF通常部署在Web服务器之前，过滤所有外部访问流量，并对请求包进行解析，通过安全规则库的攻击规则进行匹配，识别异常并进行请求阻断。
常见产品：

1、安恒明御Web应用防火墙

https://www.dbappsecurity.com.cn/product/cloud150.html 
        

            
                1

在这里插入图片描述

2、长亭雷池(SafeLine)下一代Web应用防火墙

https://www.chaitin.cn/zh/safeline 
        

            
                1

在这里插入图片描述

3、铱迅Web应用防护系统

https://www.yxlink.com/index_product_index.html 
        

            
                1

在这里插入图片描述

4、绿盟Web应用防护系统

https://www.nsfocus.com.cn/html/2019/206_0911/6.html 
        

            
                1

5、远江盛邦Web应用防护系统(RayWAF)

https://www.webray.com.cn/channel/RayWAF.html 
        

            
                1

6、天融信Web应用安全防护系统(TopWAF)

https://www.topsec.com.cn/product/25.html 
        

            
                1

7、深信服Web应用防火墙WAF

https://www.sangfor.com.cn/product-and-solution/sangfor-security/waf 
        

            
                1

8、启明天清Web应用安全网关

https://www.venustech.com.cn/new_type/Webyyfhq/ 
        

            
                1

9、E5 Advanced WAF (API安全-新一代WAF)

https://www.f5.com.cn/products/security/advanced-waf 
        

            
                1

三、软件WAF

软件WAF安装在需要防护的服务器上，通过监听端口或以Web容器扩展方式进行请求检测和阻断。

1、网站安全狗

https://www.safedog.cn/ 
        

            
                1

在这里插入图片描述

2、云锁

https://yunsuo.qianxin.com/ 
        

            
                1

在这里插入图片描述

3、D盾

https://d99net.net/ 
        

            
                1

在这里插入图片描述

4、网防G01

https://www.gov110.cn/ 
        

            
                1

在这里插入图片描述

5、护卫神

https://www.hws.com/ 
        

            
                1

在这里插入图片描述

6、智创

https://www.zcnt.com/ 
        

            
                1

在这里插入图片描述

7、UPUPW

https://www.upupw.net/versions/ 
        

            
                1

在这里插入图片描述

8、宝塔网站防火墙

https://www.bt.cn/ 
        

            
                1

在这里插入图片描述

9、360网站卫视

在这里插入图片描述

10、悬镜

https://www.xmirror.cn/ 
        

            
                1

11、安骑士

https://help.aliyun.com/product/28449.html 
        

            
                1

来源：csdn

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

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

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

评论(0) 浏览(2506)

092023-1

微交互：细节决定成败

鹤鹤

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

一、摘要

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

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

二、简介

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

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

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

微交互：细节决定成败

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

论文《开启移动微交互》（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）是一种更清晰的心智学形式，解释了人类如何与物体互动以实现目标。目标可能是打开一盏灯或在移动应用程序上进行在线交易。让我们把手机解锁的简单目标分解成七个行动阶段。

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

微交互：细节决定成败

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

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

3. 微交互的结构

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

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

微交互：细节决定成败

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

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

微交互：细节决定成败

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

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

四、审美与微交互

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

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

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

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

微交互：细节决定成败

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

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

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

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

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

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

微交互：细节决定成败

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

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

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

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

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

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

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

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

微交互：细节决定成败

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

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

六、结论

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

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

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

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

作者：三分设

来源：人人都是产品经理

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

评论(0) 浏览(1247)

092023-1

设计探索｜重新认识UX文案

鹤鹤

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

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

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

一、 UX文案的重要性

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

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

设计探索｜重新认识UX文案

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

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

二、重新认识UX文案

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

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

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

设计探索｜重新认识UX文案

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

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

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

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

设计探索｜重新认识UX文案

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

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

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

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

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

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

设计探索｜重新认识UX文案

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

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

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

设计探索｜重新认识UX文案

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

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

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

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

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

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

设计探索｜重新认识UX文案

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

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

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

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

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

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

1. 流程——更早地加入

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

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

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

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

设计探索｜重新认识UX文案

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

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

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

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

设计探索｜重新认识UX文案

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

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

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

设计探索｜重新认识UX文案

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

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

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

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

设计探索｜重新认识UX文案

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

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

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

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

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

四、结语

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

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

评论(0) 浏览(1323)

092023-1

7个实用技巧，教你搞定可视化图表

涛涛

可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。

可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。

// 为什么要数据可视化

数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。

举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律

关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。

一、选择适合的图表

数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。

1. 分析数据关系

根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。

构成关系

构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。

常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。

关键词：“占比、比例、百分比”

比较关系

比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。

常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。

关键词：“增减、升降、涨跌、波动”

分布关系

利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。

常用图表：散点图、热力图、雷达图等

关键词：“随着……而变化、A/B之间的相关性、交/并集”等

关联与流转

流转关系是B端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。

常用图表：关系图、桑基图、漏斗图、进度图等

关键词：“流程步骤、留存、转化、关系”

2. 分析数据特征

按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。

变量特征

分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。

连续型数据：指在一定区间内可以任意取值的数据叫连续数据，其数值是连续不断的。如身高、体重等带有时间因素变量的数据等，通常用折线图体现变化趋势。
离散型数据：指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据，用柱图表现更加体现变量的特征。

维度特征

多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类

根据分析视角选择图表：对于多维度变量的数据我们需要明确分析的视角，去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据，如需要全局视角查看个班的综合素质，推荐使用雷达图；对比单科成绩的变化分布，则推荐使用堆积图。

层级特征

多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：

矩形树图：突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小，它以面积的形式突出展现各个子层级节点的占比，可帮助用户看到数据的层次结构以及各层级之间的关系。

例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。

旭日图：突出细分层级关系。由多个圆环图嵌套而成，也称为径向树图，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。常用于细分分析方法，将事物从大到小进行拆解。每个级别的数据通过1个圆环表示，离原点越近代表圆环级别越高。旭日图在显示一个环如何被划分为多个层级时最有效，而矩形树图适合比较相对大小。

流程特征

流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。

二、强化视觉层次

选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。

1. 强化数据特性

使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差

趋势易感知：折线图数值如过于平均导致趋势平缓，有时候无法体现偏差；在强调数据趋势的场景下，推荐用动态取值范围让波动保持在一定范围内，放大波动占比更突出趋势。

展示更准确：柱状图依靠柱体面积体现最终数值，使用动态范围截断将会导致数据解读不完整；始终将 y 轴从 0 开始，才能更准确的反映柱图中的值。

2. 色彩视觉传达

除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。

我们在之前的文章里有介绍过图表的取色模型，通过调整颜色HSL值的区间，可以得到以下三种意图色板：

定性型-分类色板：用于区分不同的类型，又称为无序色板。适合区分没有内在顺序的类别
定量分歧型-发散色板：通过两边互补色来体现，具有明亮的中间值，然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值
定量顺序型-顺序色板：从亮到暗或相反的渐变。适合可视化从低到高的数字。

那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。

定性型：使用色调来进行分类

数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：

选取尽量少的色调：取色时无需使用整个色环，使用邻近色或互补色的取色方式显得更加专业。

色板适度明暗交替：一些视障人士无法区分色相，主要靠颜色的明暗差异来识别，通过饱和度和暗度的调整，创造明暗交替的色板。

定量型：使用深浅色板强调内在顺序

如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。

顺序色板-选择合适的插值：根据数据的分布情况选择不同的的插值断点，突出数据的差异。如以下案例中，根据统计学概念设定不同的取值区间，左侧示例使用的是平均线性差值，反映的是数据的集中趋势；右侧示例使用的是中位数插值，能更好的体现数据分布的形态。

发散色板-关注对比色的识别性：尽量避免红绿配色，如需使用绿色，偏黄或偏蓝的绿色更易分辨，对视障人士也更加友好。

三、图表中的响应式设计

B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。

1. 布局框架适配

在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。

如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。

2. 图表元素适配

要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。

信息浮层：在图表中，信息卡元素是传达信息内容的重要组件，在网页端中悬浮展示，通常会占据很大空间；图表适配移动端后，信息浮层改动到图表上方常驻显示，并跟随手指的滑动变化响应数值，完整展示信息的同时也避免了页面抖动。

坐标轴标签：过长的坐标标签在适配过程中会产生重叠，而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配，避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配，精简空间避免堆叠。

3. 极值适配

因B端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。

缩放和平移：在数据范围过多时增加取值范围的缩略轴组件，通过限制展示范围让数据量显示可控。

互动切换视图：如果折线的类别过多且无法省略的，建议分组查看。默认状态仅当前组折线高亮，其他数据以浅色显示，通过切换的方式查看其他组别的信息。

悬浮鼠标高亮：在分类过多不好分辨时，可使用悬浮高亮的交互方式突出相关联的数据组。

还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。

// 结语

数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键。

* 以上图表中均为虚拟数据，仅作为案例参考

关于我们：
MEUX,百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。

作者：百度MEUX 来源：站酷

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

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

评论(0) 浏览(1615)

092023-1

文化美育产品1.0视觉设计探索

涛涛

前言

博学多闻，不同凡响。

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

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

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

设计目标：提升学习体验

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

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

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

情感 · 价值认同

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

经典 · 传承创新

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

沉浸 · 专注体验

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

设计策略：探索国风之美

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

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

01 国风之美 · 符号

容纳承载，历史渊源。

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

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

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

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

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

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

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

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

02 国风之美 · 色彩

浓墨淡彩，总相宜。

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

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

03 国风之美 · 书法

刚柔并济，行云流水。

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

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

04 国风之美 · 国画

清新淡雅，水天一色。

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

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

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

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

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

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

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

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

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

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

写在最后

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

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

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

相信种子，相信力量。

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

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

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

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

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

评论(0) 浏览(1916)

092023-1

Tab Bar 动态设计提示

博博

01 前言

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

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

02 App底部导航构成

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

03 Tab Bar动态类型

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

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

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

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

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

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

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

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

假如选中图标是面型风格

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

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

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

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

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

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

假如选中图标是线面风格

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

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

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

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

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

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

装饰元素还可以放在上方

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

装饰元素还可以放在中间

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

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

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

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

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

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

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

除了凸起，还可以凹陷

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

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

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

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

最后再说两句：

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

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

作者：幺零三来源：站酷

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

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

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

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

评论(0) 浏览(1559)

092023-1

动态引导设计

博博

01 前言

在产品设计中，当有新上线的功能或隐藏功能时，我们通常会给予用户提示。常见的有小红点、角标、黑色遮罩+文字提示等这类静态提示。

而人类是视觉生物，相比于静态内容，我们的注意力更容易被动态内容吸引。

今天来聊一下页面中常见的动态引导。

02 一个小案例

当你看到这个页面时

我想你会先被色彩凸出的元素吸引，然后是面积占比大的元素，最后根据阅读习惯从上到下，从左到右，依次查看其他内容。（大致如下图）

而当页面元素都赋予细节时

假如我想让你关注到其中某个较小元素

其实只需要为它添加动态，便能使其脱颖而出，这就是产品设计中的动态引导。

03 动态引导的作用

新功能提示
重要内容强调
诱导用户操作
操作教学指引
信息高效传递

▍新功能提示 ․

当产品上线新功能时，设计师们都会根据功能重要程度，来决定使用什么形式让入口元素和其他元素区分开来。常见的有小红点、标签、气泡这类静态点缀元素（通常这类形式只出现一次，当用户点击后就会消失）。当然，也有将上述点缀元素动态处理的。如果入口是图标，甚至可以为图标制作动画，这在很多电商产品的品类区经常可以看到。

动态处理的形式，比原本的静态更容易引起用户对元素的注意力（与动态方式有关），甚至传递某种情绪。由于是循环播放的动画，因此可以持续吸引用户注意力。

ps：据说，每当页面多出一个会动的元素，后台就会多出这样一些留言，捅了开发窝了[Doge]。

▍诱导用户操作 ․

动态引导还常常被设计师用来强调重要内容（有可能被产品、运营拿刀架脖子），来达成某些数据指标，通过利用动态诱导用户操作。

例如：在会员卡片中添加光效、在广告中让按钮进行缩放、为签到入口图标设置动画。

这些都能充分引起用户注意，甚至提升功能点击率。

▍隐藏功能提示 ․

我们知道，在大屏上有更多空间可以展示信息。但在移动端，受屏幕大小限制，设计师通常会折叠或隐藏不常用的功能，来保持页面简洁。

对于这些不可见的功能，在初次使用时需要进行引导，才能被用户感知与使用。

▍操作教学指引 ․

讲到引导，还必须要提的是手势引导，通过动态直观展示不同手势的作用，提示用户如何与产品进行交互。

这在游戏教学中就常常使用，它可以帮助用户快速理解游戏玩法。

回到视频 App 中，你是否留意到，当你第一打开视频时， App 会提醒你双击屏幕可以点赞，上下滑动可以切换视频。

在产品交互设计中，如果使用到一些新颖的交互方式，这类引导可以大幅降低用户学习成本，帮助用户快速上手。

▍信息高效传递 ․

动态叙述的直观性，使得我们可以减少对复杂信息进行大量文字描述。通过动态设计，我们可以创建视觉故事，这有助于将复杂信息以更简单、清晰的方式进行传递，从而帮助用户快速完成任务。

也因此，在一些含有复杂操作的弹窗中，渐渐开始应用。

但是需要注意的是，上述这些大多都只在第一次使用时才会触发。

当然有特例，例如：

在 App Store 每次下载应用进行验证时（面容解锁的情况下），系统会通过动态提醒用户电源键位置，并告知用户需要双击进行人脸识别。

在扫码时，弱光场景下出现的手电筒，通过动态引起用户注意，指引用户使用。

以及作为动态演示，帮助用户理解如何使用手掌滑动截屏

如何进行NFC感应等等..

04 总结

动态引导像是设计师用来控制我们眼睛的法宝，有的人用它改善产品体验，有的人用它提升商业转化。

但法宝虽好，我们只有理性使用，才能避免用户迷失在这眼花缭乱的世界中。

感谢大家看到这里，我是幺零三，咱们下期见...

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

评论(0) 浏览(1374)

092023-1

Web 开发与搜索引擎优化，你应该选择哪一个？

前端达人

什么是搜索引擎优化？

在搜索引擎优化 (SEO) 中，对网站或网页进行优化以提高其可见性。SEO 可以被认为是在线成功的“秘密武器”。它可以帮助您的网站在搜索结果中排名更高，为您的网站带来更多流量并增加您的底线。

⇒基本上有两种类型的搜索引擎优化：内容营销和搜索引擎优化。内容营销就是创造有价值的、高质量的内容，这些内容将被其他人共享和链接。这种类型的优化侧重于提高网站上单个页面的可见性和排名，而不是整个网站。

⇒搜索引擎优化：这是使您的网站或网页在搜索引擎中尽可能可见和相关的过程，编写出色的内容并向网站添加 SEO 关键字。目标是为您的网站带来更多流量，以便您可以从广告收入或通过这些访问者产生的销售中获利。

有许多不同的技术可用于 SEO，但最终归结为确保您的网站经过充分研究和设计，使其在任何给定搜索引擎中看起来都不错并且排名靠前。

搜索引擎优化和网页开发的区别

“搜索引擎优化”(SEO) 和“网页开发”这两个术语可能会让很多人感到不解。那么，两者有什么区别呢？SEO 是改进网站以使其在搜索引擎结果页面(SERP) 中显示更高的做法。这意味着搜索特定主题信息的人会更频繁地找到您的网站。

另一方面，Web 开发是设计、创建和维护网站的过程。虽然 SEO 专注于改善网站在搜索引擎上的外观和性能，但 Web 开发不仅仅包含设计和布局。

它包括确保网站在各种设备上正常工作，优化社交媒体平台的内容，以及开发电子商务商店或 CRM 解决方案等自定义功能。

最终， SEO 和 Web 开发之间的区别归结为目的。SEO 主要侧重于增加网站的访问量；而网络开发旨在确保用户一旦到达那里就可以真正找到他们正在寻找的东西。在大多数情况下，最好将这两种做法结合起来以达到您想要的结果。

Web 开发和 SEO 的优缺点

如果您正在考虑 Web 开发或搜索引擎优化 (SEO)，在做出选择之前需要考虑一些事项。下面比较了每种方法及其优缺点。

Web开发

优点：您可以从头开始构建自己的网站或博客，或者使用 WordPress 等现有平台。如果您想自定义网站的外观，或者不想自己托管和维护网站，这是一个多功能选项。

此外，在大多数情况下，Web 开发成本低于 SEO，如果您不确定将来是否需要它，这可能是一个因素。

缺点：如果您没有任何构建网站的经验或不熟悉编码，则 Web 开发可能具有挑战性。

此外，Web 开发并不总是与所有类型的内容兼容——例如，某些博客使用的视频内容无法轻松转换为文本。最后，一些在线流行的网站——如福布斯——是使用网络开发技术构建的，但他们的 SEO 工作是密集且昂贵的。

搜索引擎优化

优点： SEO 可以帮助您的网站或博客在与您的主题相关的特定关键字的搜索结果中排名更高。这可能会导致流量和转化率增加，从而可以通过两种方式提高您的底线：

首先，随着越来越多的人通过 Google 搜索找到您的网站，广告收入可能会增加；其次，某些网站（如 Netflix）提供的高级会员服务需要在搜索引擎结果中获得较高的排名。

缺点： SEO 是一个密集且耗时的过程，从长远来看可能很难获得一致的结果。此外，某些网站内容（例如产品说明或博客文章）可能更难通过 SEO 技术进行改进，因此如果您想要获得更好的结果，则可能需要考虑其他策略。最后，SEO 可能很昂贵，尤其是当您针对高流量关键字时。

选择适合你的行业！

Web 开发和搜索引擎优化 (SEO) 各有利弊。但在你做出决定之前，你需要了解你的优先事项。这里有四种策略可以帮助您决定哪一种适合您：

1.选择适合你风格的

如果 Web 开发更符合您的风格，那就去做吧。看到您的辛勤工作在搜索引擎结果页面 (SERP) 上获得更好的排名，您会感到满意。

但是，如果您更喜欢 SEO，请准备好长时间投入大量精力。您可能更愿意与顾问一起工作，他们将逐步指导您完成整个过程，但这也意味着要为他们的服务支付额外费用。

2.知道你在找什么

如果您知道您的行业或地区流行什么类型的网站，那么 SEO 可能更适合您。搜索引擎会奖励针对相关关键字进行了优化的网站，因此以这些术语为目标将使您的网站在竞争中更具优势。

如果您不确定从哪里开始，请尝试使用Google 的 AdWords 工具查看相关页面上最常搜索的关键字。这会给你一些关于从哪里开始优化你的网站内容和设计的想法。

3.开始使用快速提示和技巧

许多初学者在没有先学习如何优化他们的网站的情况下直接进行全面的 SEO 计划。这可能会很快适得其反，因为搜索引擎会惩罚包含不正确或过时信息的页面。

更好的方法是从快速提示和技巧开始，然后逐步采用更全面的策略。这样，您将有更好的机会获得预期的结果，而无需预先花费太多时间和金钱。

4.考虑混合策略

如果您不确定哪种方法适合您，请考虑将每种方法中的一部分结合起来的混合策略。

例如，您可以定位网站上的关键关键字，但也要确保您的网站针对搜索引擎结果页面 (SERP) 进行了优化。这将为您带来两全其美的效果——增加流量和提高排名。

评论(0) 浏览(1545)

« 1 ... 207 208 209 210 211 212 213 ... 940 »

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

首页

01.人是服务的核心

02.洞见与数字

03.with people

04.解读

一、VUE

1、基本介绍

2、Vue 指令

3、生命周期

二、Element

1、基本介绍

2、Element 布局

一、云WAF

1、阿里云盾

2、腾讯T-Sec Wb 应用防火墙

3、华为Web应用防火墙 WAF

4、安恒云-Web应用防火墙（玄武盾）平台

6、百度云应用防火墙 WAF

7、华为云-云防火墙 CFW

8、安全狗云御WEB应用防护系统

9、知道创宇-创宇盾Web应用防火墙

10、F5 分布式云 WAF

11、奇安信网站卫士

12、360磐云

13、网宿Web应用防火墙

14、奇安信网神WEB应用安全云防护系统（安域）

15、腾讯云WAF

16、腾讯门神

17、绿盟网站云防护

18、启明星辰虚拟化WAF

19、深信服云Web应用防火墙云WAF

20、瑞数动态Web应用防火墙（River Safeplus）

二、硬件WAF

1、安恒明御Web应用防火墙

2、长亭雷池(SafeLine)下一 代Web应用防火墙

3、铱迅Web应用防护系统

4、绿盟Web应用防护系统

5、远江盛邦Web应用防护系统(RayWAF)

6、天融信Web应用安全防护系统(TopWAF)

7、深信服Web应用防火墙WAF

8、启明天清Web应用安全网关

9、E5 Advanced WAF (API安全-新一代WAF)

三、软件WAF

1、网站安全狗

2、云锁

3、D盾

4、网防G01

5、护卫神

6、智创

7、UPUPW

8、宝塔网站防火墙

9、360网站卫视

10、悬镜

11、安骑士

一、摘要

二、简介

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

1. 人类处理器模型

2. 诺曼交互模型

3. 微交互的结构

四、审美与微交互

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

六、结论

一、 UX文案的重要性

二、 重新认识UX文案

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

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

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

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

1. 流程——更早地加入

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

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

四、结语

前言

设计目标：提升学习体验

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

情感 · 价值认同

经典 · 传承创新

沉浸 · 专注体验

设计策略：探索国风之美

2、长亭雷池(SafeLine)下一代Web应用防火墙

二、重新认识UX文案

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

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