172021-9

变量作用域

JavaScript是函数级作用域编程语言：变量只在其定义时所在的function内部有意义。

全局变量

如果不将变量定义在任何函数的内部，此时这个变量就是全局变量，它在任何函数内都可以被访问和更改。

遮蔽效应

如果函数中也定义了和全局同名的变量，则函数内的变量会将全局的变量“遮蔽”。

注意考虑变量声明提升的情况

这个程序的运行结果是什么呢？

形参也是局部变量

这个程序的运行结果是什么呢？

局部函数

先来认识函数的嵌套：一个函数内部也可以定义一个函数。和局部变量类似，定义在一个函数内部的函数是局部函数。

作用域链

在函数嵌套中，变量会从内到外逐层寻找它的定义。

不加var将定义全局变量

在初次给变量赋值时，如果没有加var，则将定义全局变量。

什么是闭包

JavaScript中函数会产生闭包（closure）。闭包是函数本身和该函数声明时所处的环境状态的组合。

函数能够“记忆住”其定义时所处的环境，即使函数不在其定义的环境中被调用，也能访问定义时所处环境的变量。

观察闭包现象

在JavaScript中，每次创建函数时都会创建闭包。

但是，闭包特性往往需要将函数“换一个地方”执行，才能被观察出来。

闭包非常实用

闭包很有用，因为它允许我们将数据与操作该数据的函数关联起来。这与“面向对象编程”有少许相似之处。

闭包的功能：记忆性、模拟私有变量。

闭包用途1 - 记忆性

当闭包产生时，函数所处环境的状态会始终保持在内存中，不会在外层函数调用后被自动清除。这就是闭包的记忆性。

闭包的记忆性举例

创建体温检测函数checkTemp(n)，可以检查体温n是否正常，函数会返回布尔值。

但是，不同的小区有不同的体温检测标准，比如A小区体温合格线是37.1℃，而B小区体温合格线是37.3℃，应该怎么编程呢？




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

            
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            

        

    

    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                function createCheckTemp(standardTemp) {
            

        

    

    

        

            

            

        

        

            
                function checkTemp(n) {
            

        

    

    

        

            

            

        

        

            
                if (n <= standardTemp) {
            

        

    

    

        

            

            

        

        

            
                console.log('你的体温正常');
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                console.log('你的体温偏高');
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                return checkTemp;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 创建一个checkTemp函数，它以37.1度为标准线
            

        

    

    

        

            

            

        

        

            
                var checkTemp_A = createCheckTemp(37.1);
            

        

    

    

        

            

            

        

        

            
                // 再创建一个checkTemp函数，它以37.3度为标准线
            

        

    

    

        

            

            

        

        

            
                var checkTemp_B = createCheckTemp(37.3);
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                checkTemp_A(37.2);
            

        

    

    

        

            

            

        

        

            
                checkTemp_B(37.2);
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </html>

闭包用途2 - 模拟私有变量

在Java、C++等语言中，有私有属性的概念，但是JavaScript中只能用闭包来模拟。

题目：请定义一个变量a，要求是能保证这个a只能被进行指定操作（如加1、乘2），而不能进行其他操作，应该怎么编程呢？




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

            
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            

        

    

    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                // 封装一个函数，这个函数的功能就是私有化变量
            

        

    

    

        

            

            

        

        

            
                function fun() {
            

        

    

    

        

            

            

        

        

            
                // 定义一个局部变量a
            

        

    

    

        

            

            

        

        

            
                var a = 0;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                return {
            

        

    

    

        

            

            

        

        

            
                getA: function () {
            

        

    

    

        

            

            

        

        

            
                return a;
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                add: function () {
            

        

    

    

        

            

            

        

        

            
                a++;
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                pow: function () {
            

        

    

    

        

            

            

        

        

            
                a *= 2;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                var obj = fun();
            

        

    

    

        

            

            

        

        

            
                // 如果想在fun函数外面使用变量a，唯一的方法就是调用getA()方法
            

        

    

    

        

            

            

        

        

            
                console.log(obj.getA());
            

        

    

    

        

            

            

        

        

            
                // 想让变量a进行加1操作
            

        

    

    

        

            

            

        

        

            
                obj.add();
            

        

    

    

        

            

            

        

        

            
                obj.add();
            

        

    

    

        

            

            

        

        

            
                obj.add();
            

        

    

    

        

            

            

        

        

            
                console.log(obj.getA());
            

        

    

    

        

            

            

        

        

            
                obj.pow();
            

        

    

    

        

            

            

        

        

            
                console.log(obj.getA());
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </html>

使用闭包的注意点

不能滥用闭包，否则会造成网页的性能问题，严重时可能导致内存泄露。

所谓内存泄漏是指程序中己动态分配的内存由于某种原因未释放或无法释放。

立即执行函数IIFE

IIFE（Immediately Invoked Function Expression，立即调用函数表达式）是一种特殊的JavaScript函数写法，一旦被定义，就立即被调用。

形成IIFE的方法

函数不能直接加圆括号被调用。

函数必须转为“函数表达式”才能被调用。

IIFE的作用1 - 为变量赋值

为变量赋值：当给变量赋值需要一些较为复杂的计算时（如if语句），使用IIFE显得语法更紧凑。

IIFE的作用2-将全局变量变为局部变量

IIFE可以在一些场合（如for循环中）将全局变量变为局部变量，语法显得紧凑。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2189)

172021-9

Web API介绍及DOM对象（一）

2.getElementsByTagName

2.1element.getElementsByTagName()

3.HTML5 新增的方法获取

3.1 document.getElementsByClassName('类名')

3.2 document.querySelector('选择器')

3.3 document.querySelectorAll('选择器')

一、API 和 Web API

1.API

API( Application Programming Interface,应用程序编程接口)
是一些预先定义的函数,目的是提供应用程序
与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
简单理解: API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能

2.Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。

比如我们想要浏览器弹出一个警示框,直接使用alert( '弹出')；

3.API 和 Web API总结

1. API是为我们程序员提供的一个接口,帮助我们实现某种功能，我们会使用就可以，不必纠结内部如何实现
2. Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果
3. Web API 一般都有输入和输出(函数的传参和返回值) ，Web API很多都是方法(函数)
4.学习Web API可以结合学习内置对象方法的思路学习

二、DOM 介绍

文档对象模型( Document Object
Model ,简称DOM) ,是W3C组织推荐的处理可扩展标记语言( HTML或者XML )的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

1. DOM树

文档：一个页面就是一个文档，DOM中使用 document表示
元素：页面中的所有标签都是元素，DOM中使用 element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用 node表示

DOM把以上内容都看作是对象

三、获取元素方法

1.getElementById()

使用 getElementById( ) 方法可以获取带有ID的元素对象




    

        

            

            

        

        

            
                <div id="time" >2019-9-9 </div>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var timer = document.getElementById('time');
            

        

    

    

        

            

            

        

        

            
                console.dir(timer);
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //返回结果为<div id= "time">2019-9-9</div>这一整个标签

注意:
1.因为我们文档页面从上往下加载，先得有标签所以我们script 写到标签的下面
2. get 获得element 元素 by 通过驼峰命名法
3.参数 id 是大小写敏感的字符串
4.返回的是一个元素的对象
5. console.dir 打印我们返回的元素对象更好的查看里面的属性和方法

2.getElementsByTagName

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
document.getElementsByTagName('标签名');




    

        

            

            

        

        

            
                <ul>
            

        

    

    

        

            

            

        

        

            
                <li>1</li>
            

        

    

    

        

            

            

        

        

            
                <li>2</li>
            

        

    

    

        

            

            

        

        

            
                <li>3</li>
            

        

    

    

        

            

            

        

        

            
                <li>4</li>
            

        

    

    

        

            

            

        

        

            
                <li>5</li>
            

        

    

    

        

            

            

        

        

            
                </ul>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var lis = document.getElementsByTagName('li');
            

        

    

    

        

            

            

        

        

            
                console.log(lis);
            

        

    

    

        

            

            

        

        

            
                </script>

1. 返回的是获取过来元素对象的集合以伪数组的形式存储的

2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for(var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}

3. 得到元素对象是动态的，标签里面的内容变了，得到的内容就变了.

2.1element.getElementsByTagName()

element.getElementsByTagName() 可以得到这个元素里面的某些标签




    

        

            

            

        

        

            
                <ul id = "nav">
            

        

    

    

        

            

            

        

        

            
                <li>1</li>
            

        

    

    

        

            

            

        

        

            
                <li>2</li>
            

        

    

    

        

            

            

        

        

            
                <li>3</li>
            

        

    

    

        

            

            

        

        

            
                <li>4</li>
            

        

    

    

        

            

            

        

        

            
                <li>5</li>
            

        

    

    

        

            

            

        

        

            
                </ul>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var nav = document.getElementById('nav');
            

        

    

    

        

            

            

        

        

            
                var navLis = nav.getElementsByTagName('li');
            

        

    

    

        

            

            

        

        

            
                </script>

3.HTML5 新增的方法获取

3.1 document.getElementsByClassName('类名')

根据类名返回元素对象集合




    

        

            

            

        

        

            
                <div class="box" >123</div>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var boxs = document.getElementsByClassName('box');
            

        

    

    

        

            

            

        

        

            
                </script>

3.2 document.querySelector('选择器')

根据指定选择器返回第一个元素对象
注意:里面的选择器需要加符号类选择器：.box id选择器： #box




    

        

            

            

        

        

            
                var firstBox = document.querySelector('.box');
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                var nav = document.querySelector('#nav');
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                var firstBox = document.querySelector('li');

3.3 document.querySelectorAll('选择器')

返回指定选择器的所有元素对象集合




    

        

            

            

        

        

            
                var allBox = document.querySelectorAll('.box');
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //返回所有 class 名为 box 的标签

4.获取 body 、html 元素




    

        

            

            

        

        

            
                var body = document.body ;
            

        

    

    

        

            

            

        

        

            
                // 返回 body 元素对象
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                var htmlEle = document.documentElement;
            

        

    

    

        

            

            

        

        

            
                // 返回 html 元素对象

四、事件和样式操作

1.事件概述

JavaScript 使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为

简单理解:触发---响应机制

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作

事件是有三部分组成事件源事件类型事件处理程序

事件源事件被触发的对象比如按钮
事件类型如何触发比如鼠标点击触发
事件处理程序通过一个函数赋值的方式完成

2.执行事件的步骤

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采用函数赋值形式）

2.1 常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获取鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

3. 操作元素

JS的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。注意一下都是属性

3.1 改变元素内容

① element.innerText

可用于获取标签中的内容。此时获取的是从起始位置到终止位置的内容，但它去除 html 标签，同时空格和换行也会去掉

获取到 p 标签再打印 p 标签中的内容
var p = document.querySelector('p');
console.log(p.innerText);

② element.innerHTML

获取内容时，获取的是起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

获取到 p 标签再打印 p 标签中的内容
var p = document.querySelector('p');
console.log(p.innerHTML);

普通标签使用，表单不能用

3.2 修改元素属性

src 、href、id 、 alt 、title

案例：点击不同按钮显示不同图片




    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                <style>
            

        

    

    

        

            

            

        

        

            
                img {
            

        

    

    

        

            

            

        

        

            
                width: 300px;
            

        

    

    

        

            

            

        

        

            
                margin-top: 20px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <button id="but1">按钮1</button>
            

        

    

    

        

            

            

        

        

            
                <button id="but2">按钮2</button>
            

        

    

    

        

            

            

        

        

            
                <br>
            

        

    

    

        

            

            

        

        

            
                <img src="../images/objpic07.jpg" alt="" title="图片1">
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var item1 = document.getElementById('but1');
            

        

    

    

        

            

            

        

        

            
                var item2 = document.getElementById('but2');
            

        

    

    

        

            

            

        

        

            
                var img = document.querySelector('img');
            

        

    

    

        

            

            

        

        

            
                item1.onclick = function() {
            

        

    

    

        

            

            

        

        

            
                img.src = '../images/objpic07.jpg';
            

        

    

    

        

            

            

        

        

            
                img.title = '图片1';
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                item2.onclick = function() {
            

        

    

    

        

            

            

        

        

            
                img.src = '../images/objpic08.jpg';
            

        

    

    

        

            

            

        

        

            
                img.title = '图片2';
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>

3.3 修改表单元素的属性

可操作的表单元素的属性： type 、value、 checked、 selected、 disabled

按下按钮修改表单框里面的内容，通过修改 value
input.value 等于 this.value 因为 this指向的是事件函数的调用者

案例：仿京东显示隐藏密码




    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                <style>
            

        

    

    

        

            

            

        

        

            
                .box {
            

        

    

    

        

            

            

        

        

            
                position: relative;
            

        

    

    

        

            

            

        

        

            
                width: 400px;
            

        

    

    

        

            

            

        

        

            
                border-bottom: 1px solid #ccc;
            

        

    

    

        

            

            

        

        

            
                margin: 100px auto;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box input {
            

        

    

    

        

            

            

        

        

            
                width: 370px;
            

        

    

    

        

            

            

        

        

            
                height: 30px;
            

        

    

    

        

            

            

        

        

            
                border: 0;
            

        

    

    

        

            

            

        

        

            
                outline: none;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box img {
            

        

    

    

        

            

            

        

        

            
                position: absolute;
            

        

    

    

        

            

            

        

        

            
                top: 2px;
            

        

    

    

        

            

            

        

        

            
                right: 2px;
            

        

    

    

        

            

            

        

        

            
                width: 24px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <div class="box">
            

        

    

    

        

            

            

        

        

            
                <label for="">
            

        

    

    

        

            

            

        

        

            
                <img src="../images/close.png" alt="" id="pic">
            

        

    

    

        

            

            

        

        

            
                </label>
            

        

    

    

        

            

            

        

        

            
                <input type="password" id="item">
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var item = document.getElementById('item');
            

        

    

    

        

            

            

        

        

            
                var pic = document.getElementById('pic');
            

        

    

    

        

            

            

        

        

            
                var flag = 0;
            

        

    

    

        

            

            

        

        

            
                pic.onclick = function() {
            

        

    

    

        

            

            

        

        

            
                if(flag == 0) {
            

        

    

    

        

            

            

        

        

            
                item.type = 'text';
            

        

    

    

        

            

            

        

        

            
                this.src = '../images/open.png';
            

        

    

    

        

            

            

        

        

            
                flag = 1;
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                item.type = 'password';
            

        

    

    

        

            

            

        

        

            
                this.src = '../images/close.png';
            

        

    

    

        

            

            

        

        

            
                flag = 0;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>

3.4 修改样式属性

① element.style 行内样式操作

② element.className 类名样式操作

行内样式案例：显示与隐藏文本操作（当Input获取焦点，文本框初始内容消失，失去焦点，内容出现）




    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                <style>
            

        

    

    

        

            

            

        

        

            
                input {
            

        

    

    

        

            

            

        

        

            
                color: #999;
            

        

    

    

        

            

            

        

        

            
                outline: none;
            

        

    

    

        

            

            

        

        

            
                height: 24px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <input type="text" value="手机">
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var item = document.querySelector('input');
            

        

    

    

        

            

            

        

        

            
                item.onfocus = function() {
            

        

    

    

        

            

            

        

        

            
                if(this.value == '手机') {
            

        

    

    

        

            

            

        

        

            
                this.value = '';
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                this.style.color = '#333';
            

        

    

    

        

            

            

        

        

            
                this.style.border = '1px solid pink';
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                item.onblur = function() {
            

        

    

    

        

            

            

        

        

            
                if(this.value == '') {
            

        

    

    

        

            

            

        

        

            
                this.value = '手机';
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                this.style.color = '#999';
            

        

    

    

        

            

            

        

        

            
                this.style.border = '1px solid black';
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>

类名样式案例：密码框验证信息（提示输入6~16位密码，不满或超出提示错误，正确则提示正确）




    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                <style>
            

        

    

    

        

            

            

        

        

            
                .box {
            

        

    

    

        

            

            

        

        

            
                width: 400px;
            

        

    

    

        

            

            

        

        

            
                margin: 100px auto;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                input {
            

        

    

    

        

            

            

        

        

            
                outline: none;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .pic {
            

        

    

    

        

            

            

        

        

            
                height: 15px;
            

        

    

    

        

            

            

        

        

            
                display: inline-block;
            

        

    

    

        

            

            

        

        

            
                line-height: 15px;
            

        

    

    

        

            

            

        

        

            
                text-indent: 18px;
            

        

    

    

        

            

            

        

        

            
                font-size: 13px;
            

        

    

    

        

            

            

        

        

            
                color:blue;
            

        

    

    

        

            

            

        

        

            
                background: url(../images/mess.png) no-repeat;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .wrong {
            

        

    

    

        

            

            

        

        

            
                background: url(../images/wrong.png) no-repeat;
            

        

    

    

        

            

            

        

        

            
                color: red;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                .right {
            

        

    

    

        

            

            

        

        

            
                background: url(../images/right.png) no-repeat;
            

        

    

    

        

            

            

        

        

            
                color: green;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <div class="box">
            

        

    

    

        

            

            

        

        

            
                <input type="password" class="ipt">
            

        

    

    

        

            

            

        

        

            
                <p class="pic">请输入6~16位的密码</p>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var item = document.querySelector('.ipt');
            

        

    

    

        

            

            

        

        

            
                var item2 = document.querySelector('.pic');
            

        

    

    

        

            

            

        

        

            
                item.onblur = function() {
            

        

    

    

        

            

            

        

        

            
                if(this.value.length < 6 || this.value.length > 16) {
            

        

    

    

        

            

            

        

        

            
                item2.className = 'pic wrong';
            

        

    

    

        

            

            

        

        

            
                item2.innerHTML = '您输入的位数不对要求6~16位';
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                item2.className = 'pic right';
            

        

    

    

        

            

            

        

        

            
                item2.innerHTML = '您输入的正确！';
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>

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

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2141)

172021-9

1.准备工作:npm下载相关包

1.1初始化npm得到package.json文件 (不初始化也可以之前初始化的文件获得package.json文件)

npm init --yes

1.2 express包

npm i express

1.3 multer 包

npm i multer

2.创建server文件:在同级文件夹下创建server文件(文件名可以自定义)

3.登录接口部分

3.1 登录接口代码




    

        

            

            

        

        

            
                const express = require('express')
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //将这个express的方法赋值给app
            

        

    

    

        

            

            

        

        

            
                const app = express()
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //引入multer这个包
            

        

    

    

        

            

            

        

        

            
                const multer = require('multer')
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //上传的文件会保存在这个目录下
            

        

    

    

        

            

            

        

        

            
                const upload = multer({ dest: 'uploads/' })
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //使用中间件
            

        

    

    

        

            

            

        

        

            
                app.use(express.urlencoded());
            

        

    

    

        

            

            

        

        

            
                app.use(express.json());
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //登录接口
            

        

    

    

        

            

            

        

        

            
                app.post('/api/login', (req, res) => {
            

        

    

    

        

            

            

        

        

            
                if (req.body.username && req.body.password) {
            

        

    

    

        

            

            

        

        

            
                res.json({
            

        

    

    

        

            

            

        

        

            
                "status": 0,
            

        

    

    

        

            

            

        

        

            
                "message": "登录成功",
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                // res.send(req.body)
            

        

    

    

        

            

            

        

        

            
                console.log('req.body', req.body)
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                res.json({
            

        

    

    

        

            

            

        

        

            
                "status": 1,
            

        

    

    

        

            

            

        

        

            
                "message": "登录失败",
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                // res.send(req.body)
            

        

    

    

        

            

            

        

        

            
                console.log('req.body', req.body)
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // res.send()
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                app.listen(8023, () => {
            

        

    

    

        

            

            

        

        

            
                console.log('8023端口运行成功,已经跑起来了...');
            

        

    

    

        

            

            

        

        

            
                })

3.2 终端运行代码

3.3 在Postman中测试发送请求,填写必要参数返回结果:

3.4 在Postman中测试发送请求,不填写必要参数返回结果:

4. 获取接口部分:

4.1 获取接口代码




    

        

            

            

        

        

            
                //引入express框架 
            

        

    

    

        

            

            

        

        

            
                const express = require('express')
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //将这个express的方法赋值给app
            

        

    

    

        

            

            

        

        

            
                const app = express()
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //引入multer这个包
            

        

    

    

        

            

            

        

        

            
                const multer = require('multer')
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //上传的文件会保存在这个目录下
            

        

    

    

        

            

            

        

        

            
                const upload = multer({ dest: 'uploads/' })
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //使用中间件
            

        

    

    

        

            

            

        

        

            
                app.use(express.urlencoded());
            

        

    

    

        

            

            

        

        

            
                app.use(express.json());
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //获取接口
            

        

    

    

        

            

            

        

        

            
                app.get('/my/user/userinfo', (req, res) => {
            

        

    

    

        

            

            

        

        

            
                if (req.body.Authorization) {
            

        

    

    

        

            

            

        

        

            
                res.json({
            

        

    

    

        

            

            

        

        

            
                "status": 0,
            

        

    

    

        

            

            

        

        

            
                "message": "获取成功",
            

        

    

    

        

            

            

        

        

            
                "data": {
            

        

    

    

        

            

            

        

        

            
                "id": 1,
            

        

    

    

        

            

            

        

        

            
                "username": "leopard",
            

        

    

    

        

            

            

        

        

            
                "nickname": "little-leopard",
            

        

    

    

        

            

            

        

        

            
                "email": "laotang@qq.com",
            

        

    

    

        

            

            

        

        

            
                "user_pic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAe"
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                console.log('req.body', req.body)
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                res.json({
            

        

    

    

        

            

            

        

        

            
                "status": 1,
            

        

    

    

        

            

            

        

        

            
                "message": "获取失败",
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                console.log('req.body', req.body)
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                app.listen(8023, () => {
            

        

    

    

        

            

            

        

        

            
                console.log('8023端口运行成功,已经跑起来了...');
            

        

    

    

        

            

            

        

        

            
                })

4.2 在终端运行

4.3 在Postman中测试发送请求,填写必要参数返回结果:

4.4 在Postman中测试发送请求,不填写必要参数返回结果:

5.post接口上传图片

5.1 上传图片代码




    

        

            

            

        

        

            
                //引入express框架 
            

        

    

    

        

            

            

        

        

            
                const express = require('express')
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //将这个express的方法赋值给app
            

        

    

    

        

            

            

        

        

            
                const app = express()
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //引入multer这个包
            

        

    

    

        

            

            

        

        

            
                const multer = require('multer')
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //上传的文件会保存在这个目录下
            

        

    

    

        

            

            

        

        

            
                const upload = multer({ dest: 'uploads/' })
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //使用中间件
            

        

    

    

        

            

            

        

        

            
                app.use(express.urlencoded());
            

        

    

    

        

            

            

        

        

            
                app.use(express.json());
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                app.post('/my/user/avatar', upload.single('avatar'), (req, res) => {
            

        

    

    

        

            

            

        

        

            
                console.log(req.file);
            

        

    

    

        

            

            

        

        

            
                if (req.file) {
            

        

    

    

        

            

            

        

        

            
                res.json({
            

        

    

    

        

            

            

        

        

            
                "status": 0,
            

        

    

    

        

            

            

        

        

            
                "message": "上传图片成功"
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                console.log('req.body', req.body)
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                res.json({
            

        

    

    

        

            

            

        

        

            
                "status": 1,
            

        

    

    

        

            

            

        

        

            
                "message": "上传图片失败"
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                console.log('req.body', req.body)
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                app.listen(8023, () => {
            

        

    

    

        

            

            

        

        

            
                console.log('8023端口运行成功,已经跑起来了...');
            

        

    

    

        

            

            

        

        

            
                })

5.2 Postman上传图片测试

5.3终端查看

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

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
作者：发与少年
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2108)

172021-9

前端保证一比一按源文件做，结果又是惨不忍睹

seo达人

但真的是相差很远诶！

我再仔细问了一下，终于知道原因了……

他确实是按照方案做的，但是所采用的，都是宽度和高度，而不是间距。

我说：

『界面布局的关键不是宽高，而是间距』

看他相当地不以为然，于是我只好这样从头开始解释：

前端原理

对于前端来说，界面是一个盒子一个盒子套起来的，而不是像画图工具那样一个图层一个图层叠加起来的。

如果把界面看作一个大盒子，那么里面的模块就是小盒子。小盒子里面会装有文字、图片或者更小的盒子

由于现在很多网站都是响应式的，所以这些盒子一般没有固定的宽度，而是根据固定的边距，来自由伸缩。

Sketch 和 Figma 等 UI 绘图工具，都提供了固定边距的自动布局功能，用的就是这个原理。

上图截自：Sketch

但是因为这些绘图工具的画板里用的是图层结构，所以只能固定元素相对于画板的边距，而不能固定元素相对于模块的边距，除非使用组件。

尺寸是变化的

前面提到了一个很关键的点，那就是「盒子」，或者说框架宽度不固定（响应式页面）。

既然宽度，那么框架的高度也同样是不固定的。

因为页面包含大量固定字数的文字或者固定比例的图片，在宽度不固定的情况下，高度自然也没法固定了。

那么既然页面内的元素无法固定高宽，那么什么才是固定的呢？

答案是：

间距是固定的

你可以想象一下栅格伸缩的情景，原理一样，只是真实页面上栅格替换成了各不相同的边距。

也就是说，设计师最好是一开始和前端交付时，就明确设计稿上各元素之间的边距，而不是高宽：

这一点，不但一些设计师不清楚，很多前端也不清楚。只是设计师不清楚是因为不知道前端原理；而前端不清楚，是因为他们不在意相应布局的视觉效果。

不过，虽然框架不固定高宽，但是按钮、图标、LOGO 等小元素，通常还是固定高宽的。

文字对尺寸的影响

一些设计师向前端提供文字参数时，只提供字体和字号，结果出来的效果还是相差很远。

通常来说，最容易产生问题的参数就是「行高」了，因为浏览器的默认行高是 100%，而很多系统平台都有自己的默认行高。

所以说，行高一定要明确才能确保效果，而且最好是提供百分比而不是数字，这样就能够跟随字体尺寸按比例变化了。

除此之外，还有「段落间距」和「字间距」可以注意一下，不过使用率较低就不多说了。

尺寸标注

我知道现在有很多工具可以查看设计稿的尺寸，但是如果前端是新手，也会 get 不到你的设计规范。

标注的时候，就可以只挑关键参数，即：字体、字号、行高、边距、色彩。

其实，如果你知道哪些是关键的，需要标注的东西也没有特别多，比以后东拉西扯地沟通细节高效多了。

很多设计师看了上图的标注，也许会惊呼“没必要”吧！

这说明你的前端同事很优秀，不需要解释太多。

可即便前端同事再优秀，按钮是否要自动灵活伸缩？按照文字内容还是按照界面宽度伸缩？这些东西，也还是要他们自己来“猜”。

像我这样对自适应方案想得比较多的，就更加倾向于标注清楚些。

总结

如果你有一名优秀而细心的前端同事，那么以上都不是问题，可能你根本不需要知道也能好好合作。

但是设计师的工作生涯中难免遇上几个难对付的前端，多点沟通技巧，也可以让自己心情愉快些。

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》前端保证一比一按源文件做，结果又是惨不忍睹

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

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

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

评论(0) 浏览(1884)

172021-9

01 单色配色的定义

大多数的设计项目都倾向于使用多色调进行搭配，获得丰富的视觉层次，但有些时候画面只使用少量颜色也可以做出优秀的设计。

单色并不是指只有一种颜色，而是只有一种色相。单色配色是只使用一种色相进行色彩搭配的方法。单色搭配虽然没有形成颜色的对比，但色相中却有着无数的色调变化，利用同一色相中纯度、明度的层次变化，也可以形成良好的视觉效果。

单色配色其实并不意味着单调，单色配色在很多设计项目中，都呈现出了极具表现力的一面，优秀的单色配色并不一定弱于多色配色。

在单色配色中，经常会使用一些无彩色（黑白灰）用于文本、背景和装饰元素来丰富画面层次。

使用紫色细微的渐变对比，画面形成丰富了的明暗层次，紫色的明度较低，可以很好的承载白色文字信息

使用黑色作为背景，可以很好的衬托出绿色主体，给人一种深邃、神秘的视觉感受。

02 单色配色的优点

对于新手设计师来说，颜色越少画面越容易把控，色彩层级越精简，就越容易达到整体色彩平衡。单色搭配可以产生低对比度的和谐美感，视觉上形成协调统一的感觉。

不需要使用过多的颜色，通过蓝色明度的层次变化，画面也可以很丰富，能很好传达出智慧、科技的主题。

以企业形象色为主色调进行设计，使设计的画面具有统一的色彩，还可以向人们传达出强烈的品牌效应。

单色配色简约大气、色调干净统一且稳定，容易营造出和谐与平衡的感觉，是较容易掌握的配色方法。

03 单色配色的方法

①使用HSB模式建立配色方案

HSB色彩模式是将颜色三属性进行量化，色相H以角度（0°-360°）表示，饱和度S和亮度B以（0%-100%）表示。

在确定基础色相（H）之后，可以通过调整饱和度（S）和亮度（B），来创造一套富有层次的配色方案。

此案例以“H:255”为基础色建立配色方案。

使用此方法可以得到同一色相中大量的色彩样本，但这并不意味着你需要在单色配色中使用很多颜色，一般选择3、4种足以。

接下来需要考虑色彩的明暗和饱和度，调整这些属性，让配色更贴合你的设计目标。

由于单色配色色彩的对比度没有多色配色那么明显，同一配色方案内不同的颜色之间，需要形成明暗变化，构成一个阶梯型的色阶。

②使用配色工具辅助配色

目前有大量的配色网站可以用来辅助配色，对于配色基础薄弱的新人会有很大的帮助。在这里给大家推荐的是Adobe公司出品的一款极为高效的在线配色工具：Adobe Color。

在Adobe Color中，使用色盘设置了基础颜色之后，另外四个关联颜色会自动生成。

在调色规则中选择“单色”。使用橙色为基础颜色，会自动生成四个关联颜色，筛选适合的颜色配置到画面中，就能很快完成配色方案：

再看一个案例，根据主体最显眼的紫蓝色为基色，按照生成的配色方案，筛选适合的颜色配置到画面中，这样的配色会非常协调统一。

04 总结

单色配色是较容易掌握的配色方法。单色搭配虽然没有形成颜色的对比，但利用同一色相中饱和度、明度的层次变化，也可以形成良好的视觉效果。

单色搭配可以产生低对比度的和谐美感，视觉上形成协调统一的感觉。在单色配色中，经常会使用一些无彩色（黑白灰）用于文本、背景和装饰元素来丰富画面层次。

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

转载请注明：学UI网》单色配色也能玩出这么多花样？

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

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

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

评论(0) 浏览(3305)

172021-9

中秋节排版设计这样做，真出效果！！

seo达人

接下来就是看看如何将这些元素用到设计中了，我们先来整理好文案。

然后将信息分布与构图用方块表现出来，深色重要，浅色次要，这样前期的构思就OK了。

接下来我们先刻画主体，这里主体我想用中秋与灯笼相结合，字体的笔画风格加入中式的回纹效果。

接着我们进行垫字设计，用画笔先勾出大概的骨骼，以画笔为基础用钢笔工具去完善。

然后我们将文字与灯笼结合，搭配小文字丰富细节，海报主体就确定了。

如果单独展示字体，可以找个中秋的背景素材，然后以横版banner去展示。

接着我们继续做海报，将主体放到画面中，由于两侧比较空，可以加上两个叠加的圆圈扩大占比，颜色以紫与金结合。

接下来将剩余的信息处理好，部分信息加入图形，字体统一用衬线体，也会更有韵味。

然后将处理好的信息放入相应的位置，根据空间布局来进行排放，要使画面平衡统一。

最后我们可以加入小英文与装饰线丰富画面，装饰线与主体相呼应，同时会使画面节奏性更好，信息之间的关联性更强。

那么这时我们可以上个样机，增强视觉效果，设计就完成了，噔噔噔噔~

OK，这次的分享就到这里，学会巧用AI自己带的工具，应用到我们的设计中，不仅会使我们的效率增加，还能更出效果哦。

原文地址：趣投记（公众号）

作者：趣趣熊

转载请注明：学UI网》中秋节排版设计这样做，真出效果！！

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

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

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

评论(0) 浏览(2095)

172021-9

一、什么是沟通？

沟通的本质：

双向信息传输，除了清晰传递自我信息以外还需要引导对方，让其也能准确表达诉求。

沟通的误区：

“表达”与“沟通”有巨大区别：前者是单项输出，如何把自己的观点清晰地传递给别人，后者是双向传输，除了清晰传递自我信息以外还需要引导对方，让其也能准确表达诉求。

举个例子：一个不善言辞的人在生活中遇到一个沟通感觉特别顺的人，能让自己愿意说出自己的想法，再复杂的事都能和他相谈甚欢。仔细观察一下，这往往不是因为对方表达能力好，而是对方的“沟通引导能力”特别好。

二、设计师为什么需要沟通？

1.提升工作效率：

沟通到位能让我们始终保持正确的目标和方向，避免无效沟通和模糊猜测，让工作事半功倍。

2.设计师技能加持：

设计师的专业能力是立足之本，而沟通能力是解决一切诉求的前提和助攻！具备良好的沟通能力不仅能展现设计师的职业素养和个人魅力，沟通中也能锻炼全局思考和解决问题的能力；

3.服务行业特性：

设计师作为一个服务行业，首先要保证是客户想要的（方向正确），其次是带给用户惊喜的（体验升级），能洞察/挖掘出客户真正的的诉求/痛点，才能解决根本性的体验问题。

三、如何完成一次有效沟通？

如何完成一次有效沟通？形成一套良好的“沟通”闭环机制？

有效沟通是指有效的把信息以明确的目的传递给对方，与对方达成共识并付诸行动的过程。只有沟通双方真正理解各自表达的东西，并能针对异议，达成共识，这样才能算一整个有效的沟通。

四、高效沟通法则

心态好

01.尊重和合作意识：这一点是高效沟通的前提，前面也说到了沟通跟表达的区别，沟通闭环是需要双方合作的，彼此尊重，抱着合作的态度一起推进目标达成，实现共赢那是再好不过了。

02.保持同理心：『百度对同理心解释为：同理心（Empathy），或称做换位思考、神入或共情，指站在对方立场设身处地思考的一种方式。』“自我意识”是同理心的基础。感知到别人情绪后，通过换位思考，用“自我意识”去理解别人的情绪，最终了解他人的想法。

擅表达

表达能力在工作中体现在方方面面，日常需求对接，组内主题分享，向上管理，述职晋升面试等，都离不开表达能力的支持。如果一个设计师不懂得推销自己的设计方案，明明作品很优秀却输在了表达上，专业能力会遭受质疑，也会阻碍个人影响力的拓展。

01.“三点式”表达法则：明确表达的核心，逻辑清晰，思路完整，训练自己对于复杂事情都能总结1.2.3的能力

02.多样性表达方式：沟通是要用对方听得懂的语言——包括文字、语调及肢体语言，针对不同的沟通场景和沟通对象，选择更适合的沟通方式

03.控制时间节奏：大多数人注意力集中的时间是有限的，大部分人难以关注细节

多交流

01.引导：主动跟需求方“聊天”，引导需求方说出“隐藏”诉求，明确目标和价值

02.倾听：消化理解诉求，反馈问题，思考方案

03.反馈互换意见：建立情感氛围，复述重点

找共识

01.价值导向：针对业务诉求点提供专业设计意见，求同存异，找到视觉偏好的“平衡点”
02.有理有据：针对目标和价值模糊不清的部分，理清思路并提供专业一件，有理有据

五、多场景下的沟通要点

1.独立需求的设计对接

Q：如何减少设计沟通中“试一试”的行为？

W：1.需求方没有预先的期望；2.需求方有自己的期望但无法准确表达。

Point：

1.风格稿很重要！擅长用图片去探索需求方的风格意向；

2.多跟需求方“聊天”，培养合作默契，有共识才能对话；

3.提供专业意见，主动介绍设计思路及过程，增强作品的说服力；

4.培养需求方的审美情趣，共鸣好的设计。

2.统筹角色的多任务协作

Q：如何提升多人协作的效率和质量？

多方沟通：

反复沟通确认
专业思考判断
预研方案效果

内部协作：

同步信息准确
思维共通交流
传达合作意识

以上就是我在实际项目中对沟通的一些心得体会。

结语：沟通能力能让我们更好的与他人建立信任，探究隐藏的核心问题，提高工作效率，同时也锻炼我们从感性认知上升到理性规律的归纳总结的能力，不断进阶为更优秀的体验设计师！

原文地址：京东设计中心JDC（公众号）

作者：何鹃

转载请注明：学UI网》设计师“进阶辅技” —— 高效沟通术

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

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

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

评论(0) 浏览(2045)

162021-9

设计赋能商业变现初探

鹤鹤

本文基于“价值链”理论、结合笔者当下支撑的业务去探究设计赋能商业变现的思路，旨在寻找设计赋能商业变现的理论方法，为设计师在商业层面如何发挥自身的最大价值以促进企业持续发展提供一定的方向指引。

关键词解读

为了更好的理解接下来的文章内容，笔者会首先对以下关键词进行解读：商业变现、设计赋能、价值链理论。

关键词

1. 商业表现
杰克·韦尔奇在《商业的本质》一书中提到：商业归根结底是一项“团队运动”，必须依靠团队的力量。就企业而言，笔者解读为「商业」的本质是：企业团队（个体、群体）通过创造一系列的价值活动实现企业和外部客户之间价值交换的运行模式；而「变现」则是指在此系统中“企业收入-支出成本”所得的实际收入，提升收入总额和降低支出成本均可以实现“变现”的目标。

2. 设计赋能

设计师站在用户和业务的视角，能够从全链路的视角出发，洞察各利益相关者的关注点，运用专业的设计方法去挖掘产品和设计的机会点，最终促进业务持续健康向上发展。

3.“价值链”理论

价值链的概念最早是由美国哈佛商学院的迈克尔•波特教授在其著作《竞争优势》中提出的，称作“价值链分析法”。把企业内外价值增加的活动分为“基础活动和支持性活动”。基础活动即企业生产经营的主体活动，涉及产品的物质创造及销售、转移买方和售后服务的各种活动，支持活动是辅助基础活动，是通过提供采购、技术投入、人力资源、及公司范围的职能支持的活动。不同企业参与的价值活动中，并非每一个环节都会创造价值，只有特定的价值活动才能真正创造价值。企业要密切关注组织的资源状态，特别关注和培养企业在关键价值活动上获得竞争力。

企业保持竞争 的 优势，既可以来源于价值活动所涉及的市场范围的调整，也可以来源于企业合作或调整价值链所带来的收益。

随着社会分工的细化和专业化以及互联网的普及和发展，价值链的内容也不断向前发展，目前已发展为“合作竞争的价值链”理论。

合作竞争价值链

价值链理论包含4个构成要素：价值主张、运营模式、界面模式和盈利模式。

1.价值主张：包括价值主张、客户关系、客户细分三大部分。

价值主张：不但包含了企业的战略方向，而且包含了企业提供给客户满足其需求的价值项，比如“快捷的渲染服务-10s出高清效果图”。
客户细分：确定目标客户群体，并对其进行细分，探索不同细分市场的客户需求。
客户关系：是在明确用户需求的前提下，找到吸引顾客、留住顾客、转化顾客的方式，从而对所提供的产品和服务进行不断的改进以维系和形成良好的长期往来关系，C端业务中常见的客户关系即是“会员”。

价值主张

2. 运营模式：企业将资源和能力转化为产品服务的过程模式。包括关键业务、核心资源两大部分。企业的产品和服务作为企业价值创造的载体，需要通过一定的过程将资源和能力转化为产品和服务，通过优化流程、提高效率则可以减少该过程中涉及到的成本和费用。

3. 界面模式：包含重要伙伴和渠道通路两个部分。通过渠道通路，企业可以将自身的产品和服务传递给客户，客户也可将信息、资源、能力等回馈给企业。而企业的合作伙伴，在一定程度上促成了企业的产品和服务的产生，是企业外部的重要资源。

4. 盈利模式：包含包括成本结构和收入来源两个构造块，企业可以通过“开源节流”以实现商业的高效运作。

赋能维度提取

初步确定 4 个维度

可基于价值链模型从“公司角度”或“具体业务角度”去作分析，可更加灵活的应用该理论。但需注意，以上构成要素中，设计师很难全面切入，定要找准设计切入方向，才可发挥最大价值。

那么我们来看如何确定设计赋能维度？

一方面，在上述的价值链理论中，“客户关系”“重要伙伴”通常会有专业的商务、销售、售前、运营人员去维系，盈利和收入模式也会有高层管理人员进行制定和分析管理，设计师在工作链路上很难触达盈利模式和客户关系相关的内容。“重要伙伴”侧，设计师通常会进行客户调研、竞品分析等，以挖掘更多的产品机会点，促成业务价值达成，因此在赋能方向上，“重要伙伴”会合并到价值主张侧进行分析，不再单独展开来讲。

另一方面，基于价值链理论的指导，我们进一步提炼企业或具体业务的核心价值链：企业需要将资源和能力整合，去生产或研发承载企业价值的产品/服务；产品/服务经过销售到达客户侧，客户付费购买则企业产生营收。在这条关键链路中，「生产/研发链路」「产品/服务」「销售链路」「客户/用户」都是非常重要的环节且缺一不可。而设计师基于“全链路”的设计思维，利用丰富的设计研究等方法均可以在此四部分进行有效切入挖掘业务价值，因此初步确认将此四部分对应价值链中的「运营模式」「价值主张」「渠道通路」「客户细分」作为设计切入的赋能维度。「生产研发链路」和「销售链路」作为直接赋能“降本”和“增收”的关键链路可作为设计赋能的持续探索方向。

确认赋能维度和方向

基于维度对业务进行分析，找到更加细分的赋能维度乃至设计机会点

虽然初步确认了赋能维度，但是对于设计师如何寻找设计赋能机会点尚没有清晰的思路，因此笔者从自己负责的房产业务入手，尝试进行分析和挖掘。以下为简要的分析，仅供大家参考。

1. 价值主张：房企业务在当下重要的价值主张在于探索全链路的业务解决方案。
思考设计可以做什么：

目前的解决方案是否完整，能否在房产上下游继续拓展。
已经有的解决方案客户是否真正用起来，能否真正满足客户的需求？
“数字化精装”到底如何做到数字化？
竞品做了什么？
如何链接到C端消费者？（客户对户型对喜好如何，对装修风格喜好如何）
...

设计做了什么：

对新房营销客户的核心诉求进行分析，基于C端消费者的购房链路整理客户关注的数据，提供到产品侧进行参考。
对同类产品进行详细竞品分析梳理得出产品的基础功能、进阶功能、增值功能，并且将报告提供到产品侧在后续的产品设计中进行参考。
基于对业务现状的分析，整理出期望的业务表现，根据表现的内容整理出可衡量的指标以及寻找可切入的设计机会点。

业务现状分析

2. 客户细分：提供更加精细化的产品和运营策略。

思考设计可以做什么：

目标客户的类型？
不同地产大客户的共性和差异性？
形成清晰的地产客户画像？
地产客户下的细分角色？不同角色的关注点？
...

设计做了什么：

通过“桌面调研、定性调研”的方法调研“新房营销”场景下的主要用户角色，梳理得出“决策者-营销总、管理者-案场销售主管、使用者-置业顾问”的用户角色画像，聚焦所服务客户（用户）的特征、动机、日常工作分析，为后续的产品功能规划提供参考。
根据当前客户细分情况，整理在客户细分侧期望的表现，整理可衡量标准以及可切入的机会点。

目标客户分析

3. 运营模式：将资源和能力转化为产品和服务的过程。前文已经提到，优化流程、提高效率均可以减少该过程中涉及到的成本和费用。针对此部分笔者还未进行系统分析，因此简单说明。

一方面可以思考产研基建能力建设是否完善，是否有进一步优化的空间。
另一方面可以思考产研、商务、运营等角色涉及的协作流程是否高效，能否进一步提升人效。

4. 渠道通路：跟增收有直接的关联，在 C 端业务中表现为「购买转化链路」，而在面向大 B 客户的业务中，可细拆为“产品 / 服务”从「触达客户 --> 新签 --> 续约」的全链路。

面向大B客户的转化链路

思考设计可以做什么：

运用链路分析法，对转化链路进行系统梳理，并明确链路中期望的目标表现，发现可用于衡量的数据指标和可挖掘的机会点。参考下图以“触达链路”为例进行详细说明：

“转化链路”分析

首先，需要对线上和线下的触达客户渠道进行枚举和系统梳理。比如线上涉及到官网、推文；线下涉及到展会、沙龙。线下渠道包含宣传册、折页等，可透出二维码引流到线上渠道；线上渠道还可以通过推文转发分享、搜索等进行引流。

其次，在触达链路中我们期望的目标表现是什么呢？在这个过程中，我们期望越来越多的人进入官网；希望线上的推文被大量分享；希望线下触达的客户量越多越好，期望品牌曝光次数越多越好，因为品牌曝光意味着触达客户量的机会增加，触达客户量也有可能随之增加。

再者，如何衡量目标是否达成呢？最终指标：一方面是触达客户数量，触达量增加很可能意味着转化率提升；另一方面是咨询率，在触达客户增加的同时，咨询率提升意味着对业务感兴趣的客户多，转化的可能性就更大。过程性指标包括官网访问量，推文阅读量与分享量，单场活动触达客户量等。触达链路的主要目标是引流和拓客，最终转化与否还要依赖新签过程，因为转化率不会作为触达链路的最终指标。

（此处推荐大家使用GSM模型的方法确立目标表现及衡量指标，在后续的文章中会进行详解，本文暂不详细说明）

GSM模型

最后，在触达链路中，切入赋能的方向在哪里呢？

一方面线上线下的渠道能否进一步拓宽？-分析现有渠道，线下客户扫码二维码后打开的是H5页面，关闭页面后无法再次查看页面，进而无法了解业务。因此建议增加“小程序”作为线上客户留存渠道，一方面可以依赖微信生态方便客户再次查看，另一方面在留存的同时还能提高客户间的传播分享。（下图是基于已有小程序时的触达链路）

另一方面，已有渠道的品牌曝光量能否增加？-分析现有的官网，在官网中透出“酷家乐地产业务”的入口较深，且布点少，这些都影响了业务曝光度；于此，我们可以去思考，SEO搜索酷家乐时是否可以透出“酷家乐地产业务”？线下渠道是否可以增加可被客户带走的物料？线下展会中播放配音视频，通过声音传达到更多客户处，然客户产生兴趣，吸引客户前来了解业务。

沿着上述的思路和方向，我们可以思考更多可切入的方向与机会点。

初步归纳整体研究思路

上述的分析是基于价值链理论，从「价值主张」「客户细分」「运营模式」「渠道通路」4个维度进行切入，从实际业务着手运用专业的设计方法进行分析，整理得出期望目标达成的具体表现，以及确定目标可衡量的数据指标或软性评估体系，最后挖掘出可赋能的方向以及机会点。

从业务着手，尝试挖掘赋能方向和机会点

由此，笔者也形成了相对清晰的研究思路：
基于价值链理论，选取赋能变现相关联的维度。从维度切入，运用专业的设计方法对业务进行系统梳理，挖掘维度下更细分的方向，并且确定相关的评估体系用以确保目标达成。由于单条业务挖掘的方向可能有限，因此后续需要对其他典型业务进行分析，尽可能从业务实践中抽离赋能方向，并且最后应用到其他业务实践中。

设计赋能商业变现的研究思路

影响因素

1. 产品 / 业务的生命周期：产品/业务所处的生命周期不同，所选择的维度也会存在差异性。笔者当前所负责的业务还属于从0->1阶段，业务品牌影响力需要不断增大，对外营销推广渠道也需要不断拓展，因此在业务的品牌影响力建设、渠道拓展方面都存在可深入挖掘的方向；而对于其他相对成熟的业务，赋能维度仍需要侧重在运营模式优化（内部流程优化、提效降本）和销售转化链路的优化与升级（直接影响营收）两个方向。

2. 业务类型：B端业务和C端业务的类型不同，可挖掘出赋能方向也会存在一定差异性。尤其是在销售变现链路上，B端业务重在分析「触达客户」->「新签客户」->「续约客户」的链路，需要对转化链路中涉及的商务、运营、市场人员的角色及其作用进行深入了解；C端业务更重在从消费者的角度对C端转化链路进行分析，包含「初识/了解」->「产生兴趣」->「下单购买」->「多次回购」->「分享推荐」的完整链路，更要侧重于分析消费者的心理和购买动机。由于目标用户/客户、转化链路、业务属性的差异性，赋能变现的切入方向也会存在一定的差异性。

总结

本文从“价值链”理论着手，选取设计赋能可切入的4个维度「价值主张」「客户细分」「运营模式」「渠道通路」。并且从实践出发，将上述维度落入到具体业务中进行分析，挖掘更加细分的赋能切入方向以及机会点。

读完该篇文章，希望各位设计师们可以达成以下2个目标：

1. 了解价值链理论的概念，并且将理论应用到当前自己负责的业务中进行分析。

2. 在设计赋能商业变现中找准设计赋能可切入的维度以及挖掘细分的维度和机会点，并且真正落实到具体业务中。

以上内容为设计赋能商业变现的初步探索，在后续的持续探索中会力求总结出更系统的理论框架和方法并分享给大家。

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

文章来源：站酷作者：酷家乐UED

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2060)

162021-9

表格设计-掌握表格设计方法（表格体验篇）

鹤鹤

前言

提起中后台，除了高效、灵活和强大之外，不可忽视的还有它的海量数据。海量数据的筛选与呈现，直接决定决策人员的效率高低。我这边主要是结合自己在实际工作中遇到的表格设计问题，针对Web端数据呈现方式之一，表格的设计进行探讨。

首先了解下表格的构成：顶栏、表格主体、底栏

顶栏：对表格信息进行概括，包含标题、筛选、搜索、操作按钮等功能
表格主体：承载数据内容，由行和列构成
底栏：主要用于设置当页条数及放置分页器

关于表格的文章有很多，这边我仅仅针对表格内部（即表格主体）与大家探讨需考虑哪些问题才能让表格整体的阅读体验更好！

“优秀的设计需要用心、规划、思考和理解人们的行为方式”

的确，表格作为中后台海量数据呈现的载体，能够【帮助用户快速“阅读数据”，获取有效信息，提高决策效率】，但是实际业务中，很多设计师往往没能够结合产品和业务场景，找到一个合适的方案。所以我结合了自己在实际工作中遇到的表格设计问题，总结出以下几点：

一、表格需自我解释 —【梳理数据关系，明确数据重点】

自我解释的最终目的就是让人看懂你，试想下用户面对一整张表格中数据却不知道表达什么意思，这极容易给用户带来阅读压力最终放弃。因为很多B端产品的数据面向的用户角色及场景都存在差异，所以在设计表格的时，我们首先需要对表格的表头（列）进行合理的排列。

如：管理员与普通用户所展示的数据内容就可能存在差异，所以需要根据阅读重点来定义表格列的展示顺序（依据信息重要程度从左到右放置），且思考每列间的数据关系，来引导用户。

案例：运用同学常见的拉新数据，其中的数据包含：日期、渠道、新增用户数、活跃用户数、用户启动次数、累计用户数、版本信息等。

首先我们应思考运营同学关注点是什么？作为运营方案的成果数据，他们肯定最想知道是否完成KPI「是否有效获取到用户？这些用户活跃情况？哪几天拉新效果最好等」。如果我们不考虑用运营同学特定的目的，随便排列，就容易导致用户第一时间很难获取到自己想要的有效信息，极大影响阅读效率。但如果抓住了这个主要目的，对指标进行排列，那么我们表格的逻辑性便会更强，更清晰，也更加贴合业务述求。

二、【配置表头类型，提高阅读效率】

表头不仅仅有解释当前数据内容，还可以集成：批量操作、排序筛选、解释说明、分组、固定等查看操作，而这些功能均不是必要元素，需根据用户查看数据的需要（如：用户想快速找到拉新用户数最多的某天等），适当的选配。

2.1、批量操作

在展示信息的同时，可以对表格主体内容中的数据进行删除、下载等操作，帮助用户批量操作，提高效率。如：QQ邮箱我们批量删除邮件。

2.2、排序筛选

排序能让用户可以改变数据的排序，筛选则可以改变数据展示的类型，帮助用户更好的观察数据，发现数据规律。有两种形式，一种是使用上下按钮进行排序（正序与倒序），另一种是使用下拉菜单进行排序（适用于多种排序及筛选）。

2.3、解释说明

表头的字段名称理应简洁明了，但有时精简后的名称用户还是看不懂，这时就需要跟一个释义标识，鼠标悬停时出现该字段的详细解释，同时满足不同用户的需求。

有时候宽度不够，文字会溢出，则需要悬停时出现完整的字段名称。

2.4、分组

适用于多种所属关系的信息展示（如：地址>街道>街区>楼号>门牌号）

2.5、固定

固定不光可以固定行，也可以固定列，特殊情况可以同时固定行和列。一般数据较多时，帮助用户在滚动过程中可以实时看到行和列对应的内容，提高阅读效率。

三、数据展示 —【规范展示方式，营造良好展示效果，提升数据阅读效率】

3.1、对齐方式

合适的对齐方式，能够让用户阅读时更加舒服。由于表格中的数据类型比较多，需根据数据内容选用合适的对齐方式。

数字：右对齐，有小数点的数值需按照小数点对齐，且数值较大时需每隔三位数使用，隔开，便于用户阅读与对比数值。

文字：左对齐，符合人们从左到右的阅读习惯。

混合型文本：左对齐（混合型内容包含图片，进度，状态标签，人物头像，链接等）。

多选操作：居中对齐。

！！表头的对齐方式与数据展示的对齐方式必须保持一致，这样能够统一整个表格的表格对齐方式，便于提升阅读与对比的效率。

数字：数值、金额、比率

undefined

文本对齐：纯文本

文本：判断性文本

文本：时间日期

混合型文本：状态标签、进度条

混合型文本：人员（单人、多人样式）

混合型文本：操作

混合型文本：显示/隐藏

混合型文本：评价

可操作：多选

3.2、数据多层级

在复杂的表格中，由于数据量较多，并且数据有层级关系，所以会对数据表格进行分层处理，优先展示第一层级的数据内容，将二三层级的数据隐藏起来，用户点击后再展示（如：教育类产品中题目设置章节信息编辑知识点编辑）

3.3、数据修改

支持直接点击内容，出现输入框后进行编辑

3.4、展示统计

方便用户快速了解总数

四、表格分割线 —【建议选用水平线、斑马条纹，阅读舒适度最高】

表格行列的分割方式有：

网格式：类似excel，这样的方式很好的所有行和列进行分割，但是网格很容易给人造成视觉疲劳。

水平线：仅对行进行分割，通过间距与对齐的方式对列进行视觉上的分割，这样的方式可以很好的对数据进行划分，便于阅读。

斑马条纹：通过低饱和度的颜色交替的对行进行分割，同样很好的对数据进行划分，便于阅读。

留白，不分割：直接留白，通过间距来划分，不建议使用这样的方式，因为数据较多的时候，用户十分容易将行对应错，容易造成混乱。

五、空数据

5.1、表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和误解，是系统没有加载出来吗或误以为出现了bug？明智的做法，是无数据时用「-」来填充显示，数据为零时与上下数据单位、小数点相同的0来显示。

5.2、表格无内容

没有创建诉求的，数据是系统产生的，不是由用户创建的，直接告之暂无数据。

是用户有创建诉求，数据是由用户或系统产生的则直接示意用户创建数据

写在最后

通过合理的组织架构和呈现方式，使原本枯燥的数据呈现出生命力，这是一件很神奇的事。而用心、规划、思考和理解人们的行为方式，围绕用户目的与实际使用场景，提供易读性高且规范表格更是需要设计师反复思考的事情！

最后感谢您看到最后，希望通过本篇文章的讲述，能对大家有所启示~~~~~~~

文章来源：站酷作者：小发歌

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2157)

162021-9

以用户为中心的设计：它是什么以及如何做

鹤鹤

以用户为中心的设计在设计领域取得了许多突破。

它提高了产品和界面的国际标准，扩大了设计中的创意机会，并协助了近代技术的发展。

以用户为中心的设计通过创建兼顾两者的解决方案来帮助消费者和公司设计产品。

可用性是这个设计过程的最前沿。每一步都是为了最大限度地提高设计团队创造令人满意和高效体验的能力。

什么是UCD？

以用户为中心的设计是一种设计过程，旨在通过根据用户的经验和要求创建设计解决方案来最大化可用性。

它是一个迭代设计过程，在很大程度上依赖于有关用户体验的反馈和数据，以创建适用于潜在消费者和企业的解决方案。它在数字产品的生成方法中很常见，在 UX/UI 设计中尤其重要。

例如，需要创建用户友好的网站界面的设计团队将应用 UCD 设计指南，以根据用户的观点、需求和愿望生成和完善解决方案。

原型将通过质量测试，并通过反馈和对其体验和行为的深入分析与用户合作，这将影响有关产品功能的决策。

为什么 UCD 很重要？

用户体验在产品设计、网页和界面设计以及营销方面很有价值。

消费者希望他们的生活变得简单。网站、应用程序或产品的存在是为了满足消费者，因此其成功取决于他们的经验。

以用户为中心的设计方法对公司的好处包括：

1) 不断返回业务的忠实用户

2) 销售额增加

3) 开发精致、高效且易于获取的产品

4) 深入理解问题，创造优秀解决方案

5) 客户和团队之间的协作

6) 避免常见错误

7) 提高竞争力

8) 帮助他们了解他们的市场

UCD 引领产品、软件和设计的发展，使我们更接近轻松、高效。

UCD 流程

交互设计协会强调了从头到尾考虑整个用户体验的必要性，并分4步定义了以用户为中心的设计方法：

1. 了解使用环境——这部分设计阶段至关重要。我们通过深入观察和采访用户来了解他们的行为和需求。这部分过程通常由行为科学专业人士执行，他们进行专家访谈。

2. 明确用户需求——一旦更好地了解用户，设计团队就可以编制一份用户需求和粗略概念列表，以指导他们如何设计成品。

3. 设计一个解决方案——这里的重点是“解决方案”。设计某产品的目的是为问题、需要或愿望提供解决方案。设计理念必须根据研究阶段发现的内容来解决问题。

4. 根据需求进行评估——一旦有了设计原型，就必须经过一个评估过程，在该过程中分析产品对发现的初始需求的满足程度。只要有差距，产品就会经历一个迭代过程，在这个过程中，将重新审视设计以填补这些差距，直到有一个满足所有用户需求的完整设计。通过可用性测试评估设计可以清楚地了解产品与用户需求之间的差异，从而推动流程向前发展。

最大化可用性的技巧

以用户为中心的设计过程旨在最大限度地提高可用性并满足消费者。上面提到的基本四步过程是一个基础。我们可以使用一些最大化可用性的技巧来充实它。

1. 同情和理解

同理心和理解是主要在用户研究阶段使用的关键设计技术，为团队提供关键见解。

同理心意味着理解和分享他人感受的能力。这是设计思维的第一步，因为深入了解各个级别的用户体验的本质有助于设计团队获得第一手的观点并确切知道要解决哪些问题。

移情设计略有不同。它是一种以用户为中心的设计方法，明确关注用户对产品的感受。这对于包含在以用户为中心的开发过程中也很重要。人们对产品的感受在消费者体验中至关重要。

一种产品可能提供了很好的解决方案并且效率很高，但它可能缺乏与消费者的情感联系和建立关系。用户需要感受到启发、关心和共鸣，才能取得成功。这就是视觉设计可以发挥重要作用的地方。

美观且鼓舞人心的界面和品牌大有帮助，并且是通过视觉品味吸引他们并与产品建立情感关系来与合适用户建立联系的门户。

2. 明确“为什么”

设计是一个高度有意的过程。它需要被规划出来，遵循步骤，最重要的是，以与业务目标一致为指导。

设计师必须知道他们为什么要创造一些东西，以便能够克服在实施阶段会出现的障碍。每个人都需要清楚为什么设计对用户和业务都有益。“为什么”是推动发展的动力。

它需要良好的项目管理和出色的领导能力——这是设计和商业成功的重要组成部分。

3. 使业务需求与用户需求保持一致

归根结底，企业也有必须满足的要求。只关注用户会存在局限性。一旦理解了他们的需求，他们就需要考虑收入、利益相关者和设计范围的业务目标和结果。

使用户需求与业务成功保持一致归结为目标和清晰的路线图。业务需求和目标需要从一开始就非常明确地规定，具有灵活性的空间来满足不可预见的用户需求，同时仍然与业务需求保持一致。这是商业模式将有助于指导设计过程的地方。

通过确保您拥有所需的所有资源、做出并履行承诺、与整体业务保持联系以及拥有高效的项目管理和领导能力，保持业务需求得到满足是从内部的角度为项目取得成功做好准备。

4. 磨练用户反馈循环

反馈是一个基本的设计原则，在任何设计过程中都是必不可少的。

用户反馈是响应用户输入的行为。用户反馈循环在以用户为中心的设计过程中至关重要，因为它向设计团队展示了改进和重新校准的地方。

它在产品或系统的整个存在过程中都得到维护，因此在产品或系统的整个存在过程中都将依赖于用户反馈循环或客户反馈循环。

它可以采用推荐和正面评论的形式，强调产品或系统运行良好的地方，因此可以保持原样或进一步改进该区域以获得更深层次的满意度。

5. 总是迭代

设计过程是一次又一次地尝试，直到它们奏效。

正如你们许多人所知，设计过程是一个迭代过程。这是一个贯穿开发和维护的持续过程，其中产品或系统不断得到改进。生活在如此快节奏的时代，对于必须掌握最新发展和技术的设计团队来说，意味着要做大量的工作。

迭代是任何设计过程和长期客户满意度的关键部分。在此过程中，原型将在重复循环中进行测试、调整和再次测试，直到找到解决方案。

在迭代过程中，原型将经过用户测试和可用性测试。用户将测试设计、被观察并提供反馈。

6. 轻松就是一切

设计中出色可用性的关键是使一切尽可能简单易行。友好的体验是一种愉快、轻松和令人满意的体验。创造简约是一门艺术。这是一个淘汰的过程。它需要深刻的理解。以用户为中心的设计实践通过以下方式带来便利：

1) 减少用户的工作量

2) 使用简单明了的语言

3) 让用户主导并赋予他们权力

4) 简化导航

5) 使信息完全清晰，并在轻松和复杂之间找到平衡。

优秀UCD的例子

以用户为中心的设计实例无处不在，尤其是在我们今天使用的大多数知名数字产品和软件工具中。我们列出了一些品牌的例子，这些品牌通过将用户体验放在他们所做的一切事情的中心，同时与业务需求保持一致而取得成功。

苹果网站

Apple 知道如何提供出色的用户体验。他们的成功归结为可用性。通过强调设计，品牌创造的一切都以简约和美为核心，既吸引用户，满足他们，也让他们的生活变得轻松。

Apple 网站使用户可以轻松访问。它在直观、组织良好的界面上以易于理解的语言提供有关产品的详细规格。

爱彼迎

另一个用户友好的直观设计解决方案的绝佳例子，在线度假租赁市场 Airbnb 通过专注于满足潜在消费者的每一个需求，将一个绝妙的想法提升到一个新的水平，从而取得了成功。

该应用程序是个性化的，易于导航，可以轻松查找和预订住宿，尤其是具有取消和退款等功能。他们还使用视觉设计作为激发用户的一种手段。

总结

你对以用户为中心的设计有更好的理解吗？

这个概念本身很简单。并且，这个过程是有效的，你现在应该可以知道了。它需要跨学科的专家团队、深入的分析和大量的迭代。如果我们不得不将其缩小到三个要点，它们将是：

1) 通过深入研究和同理心了解用户是设计解决方案的核心

2) 简单、轻松和愉快是我们的目标

3) 需要多次迭代才能取得成功

在本文中，我们了解了UCD 的关键原则、为什么它很重要，以及针对主要用户的设计的一些技巧。希望这些内容可以帮助到你的设计。

评论(0) 浏览(3989)

首页

变量作用域

全局变量

遮蔽效应

注意考虑变量声明提升的情况

形参也是局部变量

局部函数

作用域链

不加var将定义全局变量

什么是闭包

观察闭包现象

闭包非常实用

闭包用途1 - 记忆性

闭包用途2 - 模拟私有变量

使用闭包的注意点

立即执行函数IIFE

形成IIFE的方法

IIFE的作用1 - 为变量赋值

IIFE的作用2-将全局变量变为局部变量

一、API 和 Web API

1.API

2.Web API

3.API 和 Web API总结

二、DOM 介绍

1. DOM树

三、获取元素方法

1.getElementById()

2.getElementsByTagName

2.1element.getElementsByTagName()

3.HTML5 新增的方法获取

3.1 document.getElementsByClassName('类名')

3.2 document.querySelector('选择器')

3.3 document.querySelectorAll('选择器')

4.获取 body 、html 元素

四、事件和样式操作

1.事件概述

2.执行事件的步骤

2.1 常见的鼠标事件

3. 操作元素

3.1 改变元素内容

3.2 修改元素属性

3.3 修改表单元素的属性

3.4 修改样式属性

1.准备工作:npm下载相关包

1.1初始化npm得到package.json文件 (不初始化也可以之前初始化的文件获得package.json文件)

1.2 express包

1.3 multer 包

2.创建server文件:在同级文件夹下创建server文件(文件名可以自定义)

3.登录接口部分

3.1 登录接口代码

3.2 终端运行代码

3.3 在Postman中测试发送请求,填写必要参数返回结果:

3.4 在Postman中测试发送请求,不填写必要参数返回结果:

4. 获取接口部分:

4.1 获取接口代码

4.2 在终端运行

4.3 在Postman中测试发送请求,填写必要参数返回结果:

4.4 在Postman中测试发送请求,不填写必要参数返回结果:

5.post接口上传图片

5.1 上传图片代码

5.2 Postman上传图片测试

5.3终端查看

前端原理

尺寸是变化的

间距是固定的

文字对尺寸的影响

尺寸标注

总结

01 单色配色的定义

02 单色配色的优点

03 单色配色的方法

04 总结

一、什么是沟通？

二、设计师为什么需要沟通？

三、如何完成一次有效沟通？

四、高效沟通法则

五、多场景下的沟通要点

关键词解读

赋能维度提取

初步归纳整体研究思路