首页

Web前端-JS基础

前端达人

Web前端-JS

JS的历史和特点简介

JS诞生的背景

1.随着互联网的发展，页面传递给后台有太多需要验证的东西，尽管后端的代码是能够实现对传递过来的数据进行校验和判断的，但是这样的话无疑是加重了后台程序的工作任务量，于是广大互联网工作人员迫切需要有一种新的办法/语言能够实现这样的效果，于是js也就是在这样的一个大的时代背景下诞生的

2.js最开始的时候是不叫js而是叫scrpit语言，他们也想将这个前景光明的明日之星卖给微软，但是微软没有买下，在种种机缘巧合之后被Sun公司收购了，为了让其与java语言走的近点 ，更是改名为JavaScript简称为js

JS的历史

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成

1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

JS的特点

1.弱类型语言：在书写的时候不去做明确的数据类型的限定 例如 var a=3.14 var b=“998”

2.运行在浏览器端的解释执行性语言(js—>node.js可以运行在服务器上)

3.基于对象的编程语言

4.跨平台性：JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

5.动态性：JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页（Home Page）中执行了某种操作所产生的动作，就称为“事件”（Event）。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

可以简单的理解为：只要用户发出动作，js就会产生响应

6.安全性：JavaScript是一种安全性语言，它不直接允许访问本地的硬盘，并不能直接将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

小结：js现在的用途

1）作用于浏览器端帮助提升用户的体验度

2 ) 可以用来编写游戏脚本

3）可以被构建成各种组件(node.js,React.js，vue.js, Jquery)

JS的语法基础

第一个JS例子 

<html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> alert("Hello World"); /*弹出对话框*/ </script> </body> </html> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    •

在这里插入图片描述

小结：1.js在页面内使用的时候必须要写在<script>标签内

2.js代码书写的时候不用分号标识一行编程语句的结束

3.在js代码中xxx():此时表明这是一个函数

4.alert():以弹窗的形式将括号内的内容展示出来

JavaScript 语法

JavaScript： 是一个脚本语言。它是一个轻量级，但功能强大的编程语言

1.数据类型：虽然JavaScript在书写校验上不去区分数据的类型，但是并不意味着是不区分数据类型，而是通过在浏览器中内置的JS解析器/引擎自动的去判断的

---------------------------------------------------------------------------------------------------------

1.1数字：

var a=12 //整数

var b=2.3 //浮点数或者说是小数型

var c=-0.5

友情提示：1）在js中变量名必须以字母或下划线（"_"）开头

2）变量可以包含数字、从 A 至 Z 的大小写字母

3）JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量

---------------------------------------------------------------------------------------------------------

1.2逻辑型或布尔型：

var a= true

var b=false

alert(a)

alert(b)

---------------------------------------------------------------------------------------------------------

1.3Undefined 和 null

Undefined： 用于存放 JavaScript 的 undefined 值，表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性

null:可以通过将变量的值设置为 null 来清空变量，其意思为空值

var a=""

var a=null

var a

alert(typeof(a))

---------------------------------------------------------------------------------------------------------

1.4字符串： 可以使用单引号或双引号

var firstName=“biil”

var familyName=‘Gates’

alert(firstName+familyName)

---------------------------------------------------------------------------------------------------------

1.5日期：

var myDate=new Date()

alert(myDate)/默认是格里尼形式的日期格式/

提示：Date是js中的一个内置的类

new：为类Date在内存中创建一个内存空间，进而实现实例化

补充：关键字：就是具有特殊含义的词

---------------------------------------------------------------------------------------------------------

1.6数组：是一种存放数据的容器，其一般可以存放多个，且需要知道其长度

var array=[40, 100, 1, 5, 25, 10]

alert(array[0])

---------------------------------------------------------------------------------------------------------

注释：

单行注释：//

多行注释：/**/

扩展：注释的作用：

1）统一规范

2）注解，帮助理解/阅读代码

3）扯淡

---------------------------------------------------------------------------------------------------------

连接字符和转义字符：

连接字符：在js中场用+表示为连接字符

例如： var a=123

alert(‘变量a的值为：’+a)

转义字符：具有特殊含义的字符

\n 换行符 alert(“这是第一局 \n 这是第二句”)

\t 制表符 alert(“这是第一局 \t 这是第二句”)

---------------------------------------------------------------------------------------------------------

2.运算符：

2.1算术运算符： +， -， *， /， %，++，--

++：自动加1 例如 var a=12

alert(a++)

++在前：先计算再输出； ++在后：先输出再计算

–：自动减1，例如 var h=6

alert(a–)

---------------------------------------------------------------------------------------------------------

2.2关系运算符： > ，>=， <，<=, !=, ==,===

---------------------------------------------------------------------------------------------------------

2.3逻辑运算符：

与 ：&& ：全真为真，只要有一个假则为假

或 ：|| ：全假为假，只要有一个为真则为真

非 ：！ ：取相反的

JavaScript 输出

JavaScript 可以通过不同的方式来输出数据：

1）使用 window.alert() 弹出警告框。 

<html> <body> <h1>使用 window.alert() 弹出警告框</h1> <script> window.alert(5 + 6); </script> </body> </html> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    •

在这里插入图片描述

2）使用 document.write() 方法将内容写到 HTML 文档中。 

<html> <body> <h1>我的第一个 Web 页面</h1> <script> document.write(123); </script> </body> </html> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    •

在这里插入图片描述

3）使用 innerHTML 写入到 HTML 元素。 

 <html> <body> <h1>使用 innerHTML 写入到 HTML 元素</h1> <p id="demo">我的第一个段落</p> <script type="text/javascript"> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    •

使用innerHTML方法，将前面定位到的选择器中的标签内容进行更改

在这里插入图片描述

4）使用 console.log() 写入到浏览器的控制台。 

<!DOCTYPE html> <html> <body> <h1>使用 console.log() 写入到浏览器的控制台</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    •

console.log()会将想要输出的数据写到网页的控制台中显示
在这里插入图片描述

基本语句

1）顺序语句：js默认是从上向下自动执行的

2）选择语句：

2.1）二路分支：

if(条件)

{

//JavaScript代码;

}

else

{

//JavaScript代码;

}

2.2）多路决策：

switch (表达式)

{

case 常量1 :

JavaScript语句;

break;

case 常量2 :

JavaScript语句;

break;

…

default :

JavaScript语句;

}

小结：switch…case…default不仅有多路决策的特性，还有穿透性

或者： 

if (time<10) { alert("早上好"); } else if (time>=10 && time<16) { alert("中午好"); } else { alert("晚上好!"); } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    •

3）循环语句：

for循环语句： 

for (var i=0;i<10;i++) { alert("当前i的值为:"+i) } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

while循环语句： 

var i =1 while (i>5) { alert("当前i的值为："+i) i++; } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

do…while循环： 

var i=5 do { alert("执行了") i++; } while (i<5); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

备注：for：知道次数的循环

while：>=0次的循环

do…while：>=1次的循环

break：语句用于跳出循环。

continue：用于跳过循环中的一个迭代。

JavaScript 数据类型的转换

1.typeof 操作符：可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

2.将数字转换为字符串 

 var a=123 //第一种方法，用String //var castResult=String(a)  //第二种方法，用toString方法 var castResult2=a.toString() alert(typeof(castResult2)) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

3.将字符串转换为数字 

 var a="123" //用Number转换 var b=Number(a) //用parseInt方法将字符串强行转换为数字 //var b=parseInt(a) alert(typeof(b)) alert(b+998) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    •

javaScript方法

1.match():匹配字符串可用正则表达式

2.search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置 

 var str = "abcderfha"; //返回查找到的下标位置 alert(str.search("er")) //返回 4 //查查找不到的时候返回-1 alert(str.search("zy"))//返回-1 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

3.replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 

var str = "Hello World"; alert(str.replace("World","javascript"))//显示结果为Hello javascript 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •

javaScript函数

js中的函数定义

语法： function 函数名( ){

}

实例一 

<html> <head> <meta charset="UTF-8"> <title>JS函数</title> </head> <script type="text/javascript"> function sum(a,b){ alert(a+b) } </script> <body> <input type="button" value="求和" onclick="sum(3,4)" /> </body> </html> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    •

定义一个求和函数，当点击求和按钮的时候将计算出传入的两个参数的和

ps：onclick单击事件
在这里插入图片描述

匿名函数定义

var xx =function(x,y){

alert(x+y)

}(23,34);

或

(function( o ){

alert(o)

})(“你好”)

实例二： 

<script type="text/javascript"> var fun=function(a,b){ alert(a+"\n"+b) } fun(12,45); </script> ------------------------- <script type="text/javascript"> (function( o ){ alert(o) })("你好") </script> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    •

在这里插入图片描述在这里插入图片描述

JS对象

数组对象

创建一个数组：三种方式

1：常规方式 

<script type="text/javascript"> var myCars=new Array(); myCars[0]="nike" myCars[1]="李宁" myCars[2]="安踏" alert(myCars[1]) </script> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

2：简洁方式 

<script type="text/javascript"> var myCars=new Array("nike","李宁","安踏"); alert(myCars[1]) </script> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

3：字面方式 

<script type="text/javascript"> var myCars=["nike","李宁","安踏"]; alert(myCars[1]) </script> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

2：访问数组：通过指定数组名以及索引号码，你可以访问某个特定的元素

例如：var name=myCars[0];

3:数组的方法和属性

数组名.length ： 数组 中元素的数量

数组名.indexOf(“abc”)：“abc” 值在数组中的索引值

4：数组的排序

数组名.sort(); ：将数组按正序排序，但是是按照字符串的排序方式来排序，不管里面是数字还是什么都是按字符串的排序方式来排序

reverse（）：将一个数组中的元素的顺序反转，（即是将数组中的元素的头变成尾，尾变成了头，不是其他的）

扩展：将数组先用sort（）方法进行正序排序，在利用reverse（）方法反转，即可达成降序的目的

字符串对象

字符串中常用的属性和方法

str.length:获取字符串的长度

str.match("")：内容匹配

str.replace（）：替换内容 

var str="adsfadsf"; var n=str.replace("adsf","abcx"); var s=str.length; 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

JS面向对象编程

1.对象：是属性和/方法的组合

属性：是对象所拥有的一组外观特征，一般为名词

方法：是对象可以执行的功能，一般为动词

例如：对象：汽车

属性：型号：法拉利 颜色：绿色

方法：前进、刹车、倒车

PS:三类已经存在的对象：

浏览器对象：BOM(已经存在于浏览器中的，到时候我们直接调用即可，例如Screen,History,Location,Navigator)

js脚本对象:数组，字符串，日期，Math等(JS语言中已经写好的具有某一些功能的对象，例如Array,Number,Math…)

HTML文档对象：DOM（已经存在于HTML中的，且已经写好了，用的时候可以直接调用即可，例如Document）

例如： 

<script type="text/javascript"> function Car(name,color) { this.name=name; this.color=color; this.type="轿车"; this.fun=function(){alert("100km/h");} } var car1=new Car("奥迪","蓝色"); var car2=new Car("奔驰","绿色"); alert(car1.type); //轿车 car1.fun();//100km/h </script> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    •

javaScript选择器

1.id选择器：通过 id 查找 HTML 元素，如果找到该元素，则该方法将以对象的形式返回该元素。 

document.getElementById("id1").value //获取id为id1的标签中的value值 

    

    
  • 
        1
    
    •

2.name选择器：通过name查找到HTML的元素，如果找到元素了，则会返回一个数组 

 var arr=document.getElementsByName("like") //将name为like的标签全部存入arr数组中 

    

    
  • 
        1
    
    •

3.通过标签名找到 HTML 元素： 

getElementsByTagName("p"); var habbies=document.getElementsByTagName("input")//其他的都与步骤2一样 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

javaScript弹框

确认框 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>确认框</title> </head> <body> <p>点击按钮，显示确认框。</p> <button onclick="myFun()">点击</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=confirm("是否提交商品订单");//弹出一个确定框，确定，返回true，取消返回false if(r==true){ x="提交成功，已确定" } else{ x="提交失败，已取消" }、 //抓取掉id为demo的标签，在屏幕显示x内容 document.getElementById("demo").innerHTML=x; } </script> </body> </html> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    •

在这里插入图片描述

点击确定，会在屏幕显示”提交成功，已确定“，点击取消，会在屏幕显示"提交失败，已取消"

对话框 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>确认框</title> </head> <body> <p>点击按钮，显示输入框。</p> <button onclick="myFun()">点击</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=prompt("请输入你的名字","Hello"); //弹出对话框，可输入名字 //判断如果输入的不为空或者不是空字符串，则x被赋值 if(r!=null && r!=""){ x="早上好"+r+"今天又是新的开始，加油" } //抓取掉id为demo的标签，在屏幕显示x内容 document.getElementById("demo").innerHTML=x; } </script> </body> </html> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    •

在这里插入图片描述

点击确定以后则会将被赋值的x显示在屏幕中

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

截屏2021-05-13 上午11.41.03.png
转自csdn博客


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

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

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


评论(0) 浏览(1746)

位移类手势交互解析

资深UI设计者

一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。

我非常理解这些读者的痛点，因为我在日常的工作中，也经常遇到一些难题。比如同样是滑动，但是些许参数的变化就会导致体验的天差地别，应该如何进行选择。再比如与开发同学沟通过程中如何准确描述自己想要的效果，让最后的结果不至于与自己的预期不一致。这些难题也促使我大量思考，大量体验各种产品的手势操作，希望能够从中总结出规律，让手势的设计与落地能够有理有据。现在经过一段时间的积累，我认为我在这方面可以讲一些能够帮助大家的内容了。不足之处，希望大家指正。今天给大家带来专栏的第一篇《交互手势全解析之位移类手势》。

位移类手势的描述维度

手势作为图形界面与用户之间沟通的方式之一，在便携电子设备上大量应用。与实体按键相比，它有着纯粹的简洁性和无尽的创造性，手指的个数变化、不同变量的组合能够创造出无数的操控方式。

位移类手势是指代那些通过手指接触屏幕后的位置变化从而操控电子设备的手势，本篇文章主要讲解单指操作的位移类手势，多指的位移类手势（如捏合）将放到后续文章中讲解。

一谈到位移类手势，大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而，当我们想仔细谈论他们三者之间的区别时，大部分设计师可能无法准确地描述。为了能够准确描述三者的区别，我们在这里引入三个维度的概念，它们分别是控制方式、稳定化效果、以及阈值类型，这三者的不同的变化组合可以创造不同的位移类手势，拖拽、甩动和轻扫之间的区别也是这三个维度影响的。当我们在讨论不同位移类手势之间的区别时，不如说是在讨论这三个维度之间的区别。比如常见的轻扫手势，因为这三个维度的变化就会产生不同的变种，而且不同变种在体验上也存在很大差别，若不分场景随意使用，很容易就影响用户体验。那接下来我们首先了解一下这三个维度。

1. 控制方式

第一个维度是控制方式，它分为绝对控制和相对控制，也可以通俗的表达为跟手和不跟手，区别如下。

绝对控制/跟手：施加控制的一方（后文简称施控物）的某个属性变化与被施加控制的一方（后文简称受控物）的某个属性变化是对应的。

相对控制/不跟手：施控物的某个属性变化与受控物的某个属性变化不是对应的。

比如在网易云音乐的播放页，左右滑动黑胶时，手指是施控物，黑胶是受控物，手指的横向位置变化和黑胶的横向位置变化是对应的，即绝对控制。上滑调出评论页时，评论页的位置和手指的位置没有对应关系，手指的上滑仅仅控制评论页是否出现，即相对控制。

万字干货！交互手势全解析（一）：位移类手势

与相对控制相比，绝对控制允许用户去操控受控物的属性变化过程，因此给予了用户更强的掌控感。比如在微信读书阅读页边缘右滑，手指的横向位置与书籍封面的变化过程对应，模拟现实生活中慢慢合上书的感觉，如下图。

万字干货！交互手势全解析（一）：位移类手势

但是在有些场景，为了避免混乱，属性变化过程是不适合被用户绝对控制的，此时我们应采取相对控制的方案。比如 iOS 的相机中，左右滑动切换拍摄模式，由于前后不同模式之间的页面框架变化较大，切换时会有过多元素的属性变化，如果使用绝对控制就会导致切换拖沓且混乱，使用相对控制就能避免这个问题。

万字干货！交互手势全解析（一）：位移类手势

2. 稳定化效果

定义

当我们使用手势控制某个受控物时，由于手势的某个属性（如手指位移）达到阈值，进而导致受控物的某个属性稳定在了特定状态的效果被称为「稳定化效果」，或者也可以称为「吸附」。

稳定化效果能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。

是否有稳定化效果是区别轻扫与另外两个手势即甩动和拖拽的重要维度，当某个位移类手势有稳定化效果，我们就将其称作轻扫。

以滑动切换抖音视频为例，当手指上滑的位移距离和释放速度其中的某一项属性达到阈值后，下一条视频会往上移动一个固定的距离然后进入稳定状态，而不会出现停留在不完整的中间状态，如下图所示。

万字干货！交互手势全解析（一）：位移类手势

在 iOS 端的微信消息页左滑某条消息后会出现更多操作按钮，按钮会在手指滑动的距离达到阈值并松开后稳定在一个固定的大小，而不会停在类似下图左所示的混乱的中间状态。

万字干货！交互手势全解析（一）：位移类手势

在多内容选择的场景中，如果滑动与选中是绑定的话，一般需要使用稳定化效果。例如在 iOS 相机里选择滤镜时，滑动滤镜选项不但能够控制滤镜选项的位置，并且会自动选中一个位于中间位置的滤镜，位置的稳定化避免了被选中选项的不明确。

万字干货！交互手势全解析（一）：位移类手势

如果滑动与选中是分开的，比如美图秀秀的滤镜选项需要先滑动后选中，这种情况下稳定化效果不是必要的。

万字干货！交互手势全解析（一）：位移类手势

与效率的关系

不同的稳定化规则带给用户的体验差异是非常大的，最明显的差异是在效率方面。我们使用稳定化效果的强弱来理解，稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。

比如在比较常见的 banner 切换功能中（下图左），无论手指位移和释放速度的值有多高，banner 只能切换并稳定到下一个，不能够一次切换多个 banner。而在网易云音乐的首页排行榜中，一次滑动能够切换多个内容卡片，我们可以说前者的稳定化效果比后者强。

万字干货！交互手势全解析（一）：位移类手势

拖拽和甩动虽然没有稳定化效果，但是也存在效率的高低。我们可以将其与轻扫放在一起做对比，如下图所示，拖拽、稳定化效果强的轻扫、稳定化效果弱的轻扫、甩动它们切换效率依次增加。

万字干货！交互手势全解析（一）：位移类手势

那么我们决定添加稳定化效果后，如何选择强弱程度呢？选择没有绝对的对错，整体来说主要考虑两点，业务诉求和用户诉求。例如在常见的 banner 切换中，banner 的总数量一般不会很多，业务的诉求是希望尽可能曝光每一个 banner，使感兴趣的用户进行消费，因此这里比较适合做稳定化效果强的轻扫。在云音乐的排行榜案例里，不同用户感兴趣的榜单是不同的，稳定化效果弱的轻扫可以方便用户单次滑动切换多个，快速切换到自己感兴趣的榜单的大概位置。

百度 App 的表情面板原本是左右轻扫浏览表情，在一次改版中改为了上下甩动浏览。主要目的之一就是为了提高浏览效率、降低非首屏表情的曝光难度。

万字干货！交互手势全解析（一）：位移类手势

微信视频号的改版是一个典型的案例，旧版的微信视频号的视频流并不是类似抖音那样的全屏化形式和轻扫手势（下图右），而是占据屏幕尺寸三分之一到二分之一之间的卡片形式（下图左），并且使用甩动而非轻扫。视频号问世初期优质内容匮乏，社交推荐算法不完善，贸然模仿抖音式的全屏化形式和轻扫手势的话，会导致用户浏览到劣质视频时负面感受被增强且切换效率变低，反之卡片形式加甩动手势给予了用户更自由的选择空间，提高了用户的切换效率，降低了负面体验。等到如今时机成熟，再从卡片形式和甩动手势换成全屏化形式和轻扫手势就势在必行了。

万字干货！交互手势全解析（一）：位移类手势

在某些场景，用户需要先通过高效的方式选择特定区域的内容，然后进入聚焦状态进行内容浏览和慢速的切换，此时我们需要设计两种切换效率不同的手势应对前后场景的变化。如下图，在 iOS 的照片 App 中，先使用切换效率较高的甩动进行粗略切换找到目标图片大概位置，点击进入大图模式时使用切换效率较低的轻扫进行精确切换查看。

万字干货！交互手势全解析（一）：位移类手势

触发时机

触发稳定化的时机可以分为释放前和释放后，不同的时机带给用户的体验也不同。释放前稳定化指的是用户使用手指滑动屏幕时，手指位移达到阈值后，手指无需离开屏幕，稳定化即可被触发。如下图左，iOS 的相机滑动切换滤镜使用的就是释放前稳定化。释放后稳定化指的是用户使用手指滑动屏幕时，手指位移或释放速度达到阈值后，手指必须离开屏幕，稳定化才能被触发。如下图右，常见的 banner 切换。

万字干货！交互手势全解析（一）：位移类手势

释放前稳定化可以避免拖沓，增加切换效率，但是缺点是无法反悔回退且缺乏掌控感。反之，释放后稳定化可以反悔回退，掌控感强，但是缺点是比释放前稳定化拖沓了一些。

3. 阈值类型

阈值是能够触发变化的最小值。比如当水的温度达到 100 度时就开始变成水蒸气，100 度就是一个阈值，温度是阈值类型。在手指与屏幕的交互中，手指在屏幕上的某个停留时间、位移、释放速度、点击次数等都可以成为一个阈值类型，达到相应阈值后就可以触发相应的变化，常见的变化有受控物的位置、大小、不透明度等，理论上变化可以是任意的。

在位移类手势中，通常会用到的阈值类型有手指位移和释放速度，手指位移是用户在手指触摸屏幕时的位置与之后某个时间手指位于屏幕的位置之间的距离，释放速度是用户的手指在屏幕表面进行位移后离开屏幕那一瞬间的速度。

市面上的 App 暂时不存在仅通过释放速度判定而与手指位移无关的阈值判定方式，因为其不太符合常识。因此我们在设计位移类手势时，能够选择的阈值判定方式常见的有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。

当我们设计手势时，就需要考虑两者的区别。由于 ① 比 ② 增加了释放速度带来的额外移动距离，因此 ① 的主要优点是高效。但是由于我们无法预判释放速度带给受控物的移动距离长短，所以相对应的缺点就是易误操作和不精确。②就恰恰相反，由于不存在释放速度造成的不确定因素，它的优点是不易误操作和精确，缺点是低效。

甩动和拖拽之间的区别就在于阈值判定方式，甩动是 ① ，拖拽是 ② 。如下图，当在微信消息列表找相应的消息时，用户的诉求就是能够快速找到特定消息的位置，对特定消息的出现在屏幕的位置也没有特定要求，只要能够被手指点击到即可，因此选用甩动较为合适，但是对于调节音量、亮度这一类的操作，滑动的范围有限，因此用户对效率没有特别的要求，但是对于滑块位置的精确度有要求，因此选用拖拽是更为恰当的。

万字干货！交互手势全解析（一）：位移类手势

再举一个反例，在 Steam 移动端横滑首页的泳道卡片时（下图左），使用的手势是拖拽而不是甩动，浏览起来特别低效。更适合的做法应为甩动，会更符合此场景下的快速浏览的诉求，如下图右的豆瓣。

万字干货！交互手势全解析（一）：位移类手势

对于轻扫来说，使用哪种阈值判定方式有多种情况（如下图所示）。在本文中，根据阈值类型、稳定化效果以及控制方式的不同我将把轻扫分为 A-E 共 5 类（A-E 的命名方式仅存在于本文章，因此在向其他人传达时，尽量使用在后文我介绍的手势描述而不是类别名称，以便于对方理解。）。后续会为大家仔细举例讲解，大家现在仅了解一下即可。

万字干货！交互手势全解析（一）：位移类手势

当我们在刷抖音视频时使用的手势就是轻扫，是否滑动到下一条视频进行播放的判定方式是① 判定手指位移和释放速度满足任意一个即可，对应的手势类别是上面表格中的轻扫A。如下图所示，在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向位移大于半个屏幕高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离但是手指离开屏幕时保留一个速度从而切换到下一个视频。大部分情况下用户都会使用判定释放速度的方式，因为既省力又便捷。

万字干货！交互手势全解析（一）：位移类手势

如果将阈值判定方式改为 ②仅判定手指位移，对应的手势类别是上面表格中的轻扫 B，并且位移的阈值设置得比较大的话，给用户带来的负面体验可能将是非常大的。比如下图中打开美图秀秀的短视频评论浮层后，想要下滑收起时，App 仅判定手指位移，而且这个位移阈值设置得比较大，对于希望通过快速滑动一小段距离收起浮层的用户来说体验很差。即使由于开发资源有限我们只能做到仅判定手指位移，我们也可以通过减少手指位移的阈值来降低负面体验。

万字干货！交互手势全解析（一）：位移类手势

但是某些场景下，②仅判定手指位移是更加合适的。比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页。这样处理的原因是在微信消息列表页，上下滑动浏览微信消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值的话，用户可能就极易在下滑消息列表时误操作，无意间打开小程序选择页。

万字干货！交互手势全解析（一）：位移类手势

因此，对于位移类手势，选用哪种阈值判断方式要依据用户使用场景和诉求，不能想当然地设计。

常见位移类手势解析

了解完三个基础维度后，我们再将其进行组合，从特定手势的角度更全面地理解它们的差异和使用场景。三个维度的排列组合能够生成十余种位移类手势，我列举出了常见的 7 类，如下图所示，这 7 类基本涵盖了 95% 以上的场景，我将一一举例说明。由于施控物控制受控物改变的属性一般都为位置，因此接下来在描述下面手势的定义时我都以受控物的位置变化进行举例。

万字干货！交互手势全解析（一）：位移类手势

1. 拖拽

定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动，无论释放时手指是否仍有速度，受控物都会立即停止移动。（下图的动态演示由 Principle 制作，观看会有些不太直观）

万字干货！交互手势全解析（一）：位移类手势

特点

精确度高但效率低。由于阈值类型仅判定手指位移且没有稳定化效果，拖拽适用于对操作精度要求高，对效率要求低的功能。

案例

在 iOS 设置中调节亮度时，在有限范围内，手指左右拖拽可以控制亮度变化。

万字干货！交互手势全解析（一）：位移类手势

2. 甩动

定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指仍有速度，受控物将移动一段距离后才慢慢停止，移动的距离与释放速度呈正相关。若释放时手指速度为 0，则受控物立即停止移动。

万字干货！交互手势全解析（一）：位移类手势

特点

精确度低但效率高。由于阈值类型判定释放速度和手指位移，甩动适用于需要快速浏览较多内容的场景，如滚动浏览列表。

案例

在微信的消息列表页，使用甩动手势控制列表上下移动，若释放时仍有速度，列表将仍移动一段距离后才慢慢停止。

万字干货！交互手势全解析（一）：位移类手势

3. 轻扫 A

定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时的速度和手指位移有任意一个达到阈值，受控物将稳定在一个新位置。若释放速度和手指位移没有任何一个达到阈值，受控物将回到原位置。

万字干货！交互手势全解析（一）：位移类手势

特点

由于轻扫拥有稳定化效果，因此它能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。接下来讲解的其他轻扫类型都有这一特性，就不一一赘述了。轻扫 A 与接下来要讲解的轻扫 B-E 的最大不同之处在于轻扫 A 的阈值类型为「释放速度和手指位移」，这让轻扫 A 与轻扫 B-E 有两点不同，一是轻扫 A 可以通过释放速度的快慢去控制内容的切换数量的多少，更加高效，二是轻扫 A 可以通过用手指在屏幕滑动很短的距离但离开屏幕时保留一个速度来切换内容，因此更加省力。

案例

在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向移动大概半个视频高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离并且手指离开屏幕时保留一个速度从而切换到下一个视频。

万字干货！交互手势全解析（一）：位移类手势

4. 轻扫 B

定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指位移达到阈值，受控物将稳定在一个新位置。若释放时手指位移没有达到阈值，受控物将回到原位置。

万字干货！交互手势全解析（一）：位移类手势

特点

轻扫 B 与轻扫 A 相比唯一的区别是阈值类型减少了释放速度的判定方式，这提高了触发切换的难度，使操作成本变高，但是在某些场景下，这也降低了误操作的概率。如下拉刷新等。

案例

比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页，这样处理的原因是在消息列表页上下滑动浏览消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值判定方式，用户可能就极易在下滑消息列表时误操作，无意间打开小程序页面。

万字干货！交互手势全解析（一）：位移类手势

因此，当页面已存在一个滑动操作的情况下，还存在另外一个方向相同的滑动操作且仅会在边界情况下才能触发时，为了避免误操作，会将后者的手势设计为轻扫 B。

上文提到，轻扫 A 的阈值类型为判定「释放速度和手指位移」，轻扫 B 的阈值类型为仅判定「手指位移」，由于前者的实现成本比后者高，导致本应适合做成轻扫 A 的功能有时只能妥协做成轻扫 B，比如之前提到过的美图秀秀的短视频评论浮层案例，但我们也可以通过减少手指位移的阈值来降低负面体验，后文会讲解如何与开发同学沟通。

5. 轻扫 C

定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是受控物并不随着手指的控制而同步移动，仅当释放时手指位移达到阈值时，受控物才开始移动并稳定在一个新位置。若释放时手指位移没有达到阈值，受控物位置则一直保持不变。

万字干货！交互手势全解析（一）：位移类手势

特点

上文讲到过释放后稳定化和相对控制的缺点，释放后稳定化比较拖沓，相对控制让用户缺乏掌控感。两者如果应用到了同一个手势（即轻扫 C ），就会导致用户在滑动屏幕时得不到任何反馈，用户会疑惑是否因为自己操作不当或是设备出现故障。只有当用户手指离开屏幕后才会发现触发了操作，整体的交互流程给用户一种滞后与延迟的感觉。

因此轻扫 C 与其他类别的轻扫相比存在劣势，但是它也存在很多的 App 的 H5 页面中，我的猜测是由于 H5 对于判定释放速度和绝对控制这两个维度与客户端相比难度大很多，因此只能退而求其次选择轻扫 C 这个较差的方案，实际上在同样的应用场景中用轻扫 A 替换轻扫 C 可以带来更好的体验。

案例

下图左是 QQ 的个性装扮的 H5 页面，卡片的切换使用的就是轻扫 C，如果能够优化为轻扫 A 体验会更好，比如下图右的音街首页卡片的设计。

万字干货！交互手势全解析（一）：位移类手势

6. 轻扫 D

定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是手指位移达到阈值前受控物并不随着手指的移动而移动。若手指位移达到阈值，无需手指释放，受控物将开始移动并稳定在一个新位置。若手指位移没有达到阈值，无论是否释放，受控物位置则一直保持不变。

万字干货！交互手势全解析（一）：位移类手势

特点

相对控制的方式降低了用户的掌控感，释放前稳定化减少了操作的拖沓感。使用此手势的场景是在多个对象之间切换时，我们不希望用户过于自由地操控对象之间的属性变化过程，并且牺牲掌控感从而增加单次的切换效率。

案例

比如 iOS 的相机中，左右滑动切换拍摄模式时，由于前后不同模式之间的页面框架变化较大，切换时会有不同元素的属性变化，如果使用绝对控制和释放后稳定化就会导致切换混乱且拖沓，使用相对控制和释放前稳定化就能避免这个问题。

万字干货！交互手势全解析（一）：位移类手势

7. 轻扫 E

特殊说明

上文我们讲到，通过轻扫手势 A-D 对受控物的绝对/相对控制都是存在于稳定化前，受控物一旦稳定化，就脱离了手指的控制，需要手指离开屏幕后再次接触屏幕开始下一次控制。

轻扫 E 的不同之处在于它可以在受控物稳定化后，仍然控制受控物朝着下一个节点稳定化，在每个节点之间切换时能够明显感觉到分段感，如下图案例所示。

万字干货！交互手势全解析（一）：位移类手势

由于轻扫 E 相对于轻扫 A-D 的特殊性，控制方式中的绝对控制和相对控制无法覆盖这个特殊现象，因此我们使用「多段相对控制」来命名轻扫 E 的这种特殊的控制方式。

定义

使用手指在受控物位置按下后，操控受控物沿着某个方向移动，若手指位移达到阈值，无需手指释放，受控物就稳定在了一个新位置，但是此时手指还是仍然可以操控受控物继续移动的，并且继续移动过程中如果手指位移达到阈值将会到达下一个稳定化状态。

万字干货！交互手势全解析（一）：位移类手势

特点

轻扫 E 适用于需要在多个对象之间快速切换和确认的场景，它的使用感觉很接近拖拽。如下图所示，我们可以这样理解，当被切换的对象数量接近于无穷大同时每个对象之间的距离接近无穷小时，轻扫 E 就可以视为拖拽。

万字干货！交互手势全解析（一）：位移类手势

案例

iOS 相机人像模式切换打光方式、微信的通讯录滑动字母索引导航，它们都使用轻扫 E 来满足多个对象之间快速切换和确认的需求。

万字干货！交互手势全解析（一）：位移类手势

实战案例

了解完上述的维度和常用手势后，我们在脑中就可以形成一个思考框架。当我们要针对一个功能设计位移类手势时，就可以从阈值类型、稳定化效果以及控制方式这三个维度思考。接下来我用一个我参与过的实际项目作为案例给大家讲解一下思考过程。

本案例是网易云音乐陌生人版一起听中的一个功能，一起听的双方在听歌过程中会收到彼此共同信息，比如听歌口味相似度、是否同城、都喜欢哪些歌手等，目的是为了增加可玩性和互动性、降低退出率，鼓励用户互相了解、提高一起听过程中的社交体验。

为了营造仪式感和避免信息过载，共同信息的展示方式设计为了一次只能看一条，进入浮层后默认展示最新的一条，可以通过滑动查看上一条。因此为了避免出现两条同时占据展示区域的混乱状态（如下图左），我们为其添加了释放后稳定化效果（如下图右），同时为了方便用户可以快速浏览旧的共同信息，这里使用的稳定化效果是较弱的，用户可以通过滑动一次切换多个共同信息。

万字干货！交互手势全解析（一）：位移类手势

由于需要满足用户快速浏览旧的共同信息的诉求，阈值类型选用了「判定手指位移和释放速度满足任意一个即可」，用户可以通过控制释放速度进而控制信息的切换数量。控制方式则选择了掌控感强的绝对控制。最后的结果如下图所示。综合三个维度进行归类，此手势为稳定化效果较弱的轻扫 A。

万字干货！交互手势全解析（一）：位移类手势

手势角度的处理

位移类手势的方向一般为上下或左右，但并不是一定要完全垂直或水平才能够触发手势。当上下滑动和左右滑动同时存在于一个页面时，默认会有一个容错角度，比如上滑时手指滑动方向只要左右偏移不超过 45° 都会被判定为上滑，如下图所示。

万字干货！交互手势全解析（一）：位移类手势

但是有时开发同学出现失误，导致容错角度没有均分，例如下图中触发上滑和下滑的角度极小，导致用户在上下滑动时非常容易误操作为左滑和右滑。

万字干货！交互手势全解析（一）：位移类手势

云音乐也曾有过类似的遗留问题，iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌（如下图 A，现已修复），安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏（如下图 B ）。

万字干货！交互手势全解析（一）：位移类手势

因此，在验收阶段，除了上述的三个维度外，角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下，最好要切换不同的手持方式分别体验一次，因为有些问题只有在特定的手持方式下才能够被发现。（下图素材来源于网络，侵删）

万字干货！交互手势全解析（一）：位移类手势

客户端的角度判定方式实际上是一个比较复杂的过程，上述的内容是简化的版本。后续将延展为一篇独立文章给大家仔细聊一聊。

客户端的差异

上文讲到，基础的三个维度即阈值类型、稳定化效果和控制方式决定了手势的类别，是设计阶段一定要定义清楚的。但是除此之外，设计一个手势需要定义的细节非常多。比如受控物的移动是否有速度曲线？手指位移与受控物之间的位移的比率是多少呢？这些都是开发阶段不得不面对的。幸运的是，安卓和 iOS 有系统封装好的一套系统组件可以调用，操作系统自行解决了刚才讲到的细节问题，但是 H5 框架下是无法调用系统组件的，手势的各种细节都需要前端开发人员自己编写，难度较大，大部分情况只能实现一些比较简陋的效果，这也是为什么在很多 H5 框架下的界面滑动的体验比较差的原因。

高效沟通

由于信息不对称，与开发的沟通过程中，很容易出现理解偏差。比较常见的错误有：将甩动误解为轻扫 A，将轻扫 A 误解为轻扫 B 或甩动。如果造成效果达不到预期的情况，很多设计师不知道如何让开发同学修改，只能说“这个手势不丝滑，优化一下”，开发同学也是一头雾水，不知道往哪个方向优化。如果我们能够直接说出“阈值判定方式现在只有手指的位移，需要释放时的速度也能够触发跳转；这个位移的阈值太高了，滑动时很难触发跳转，需要把阈值改为 16pt ”类似这样准确的描述，就能够大大降低沟通成本，顺利验收。为了避免沟通出现问题，下面我将日常经验总结出现希望能够帮助到大家。

首先，一旦涉及到位移类手势，除了必要的文字描述外（可参考上述的手势定义的描述），最好给开发体验 demo 或者其他 App 上类似的效果，否则很容易产生理解偏差。各种 App 上的类似效果大家可以用本文的每个手势的案例给开发同学展示，但是 App 可能会更新，案例可能在未来某个时间就找不到了，所以我用 Principle 做了一个简易的基础 demo 集合，和我上述介绍的手势是对应的，大家可以拿着这个 demo 给开发同学演示大概的效果，也可以在这个 demo 源文件修改。

万字干货！交互手势全解析（一）：位移类手势

拖拽和甩动由于需要定义的细节参数都被操作系统提前封装好了，不需要我们给到额外的标注。但是对于轻扫，我们需要将细节定义清晰，下面将详细讲解。

1. 阈值类型

上文讲到，阈值类型一般有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。①的开发成本高于②。

如果我们选用轻扫的阈值类型是①，开发同学编写代码需要两个参数的阈值，分别是手指位移和释放速度。手指位移阈值一般默认为受控物的1/2，例如下图的全屏短视频和 Banner 。

万字干货！交互手势全解析（一）：位移类手势

当然我们也可以自定义一个阈值，比如 100pt、受控物高度的 1/6 等，没有特别的需要的话使用默认值即可而且也不用给开发同学特殊说明，但是如果有特殊需要想要修改默认值，就要告知开发同学你自定义的手指位移阈值。对于释放速度阈值，通常默认就非常的小，几乎是大于 0 即可触发，一般情况下使用默认值即可。

在本应该选用①的场景中，如果由于技术成本原因不得不选用②，需要注意的是由于缺少了释放速度的判定，手指位移的阈值我们需要设置得小一些方便用户触发，否则就会出现上文中美图秀秀浮层的那样的体验问题。经过我的实验，手指位移阈值一般定为 16pt 是比较适中的，既不会太容易误操作也不会难以触发。

2. 稳定化效果

轻扫是一定存在稳定化效果的，关键在于告知开发是释放前稳定化还是释放后稳定化。从开发的角度讲，系统会监测用户的行为，用户在使用滑动时会有按下（down）、移动（move）、抬起（up）三个行为，释放前稳定化是在移动阶段判断阈值并触发操作、释放后稳定化是在抬起后判断阈值并触发操作，开发成本几乎没有区别。

上文提到过稳定化效果强弱的概念。稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。首先，我们需要确定单次滑动允许切换多个还是只允许切换一个，如果允许切换多个，开发同学会设定一个控制切换难度的系数，而只允许切换一个的话就不存在这个系数。通常我们也不需要修改这个默认系数，但如果想让操作更加难或容易触发，可以告知开发同学修改这个系数。

3. 控制方式

绝对控制比相对控制的开发成本高，如果开发资源并不是很紧张，需要绝对控制的场景就不要退而求其次使用相对控制。涉及到轻扫手势一定要告知开发同学控制方式，否则很可能被视为相对控制处理。

手势排查

通过本文的学习，我们不但可以在开发工作进行前与开发同学高效沟通，保证开发工作的顺利进行，也可以对自家移动端产品的现有手势进行逐一排查发现问题点进行记录，并且找到合适解决方案，然后用准确的语言描述给开发同学。下图是我在进行手势排查后输出的表格，挑选出一些有代表性的案例给大家作参考，开发同学可以通过它快速明确问题，理解解决方案。

万字干货！交互手势全解析（一）：位移类手势

结语

本篇文章的归纳总结是通过日常积累和思考得来，希望能够帮助大家在设计与沟通层面解决实际问题，如果有任何疏漏和不严谨的地方，希望大家能够指出，后续的更新会将专栏不断完善，交互手势系列暂定的后续更新计划如下。


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

截屏2021-05-13 上午11.41.03.png



文章来源：优设 作者：设成于思

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

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

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


评论(0) 浏览(1552)

移动端响应式设计的高效方法

资深UI设计者

以前，设计师们都需要去跟开发沟通并手动标注所有文件，现在，有了像 Zeplin 和 Abstract 这样实用的标注工具，设计师几乎不需要花太多的时间在对接上。

但是，还是避免不了很多东西会在对接过程中出现问题。比如，这个按钮是固定大小的还是弹性大小？是保持底部边距固定还是在一个较大的对象内居中？让我们来看下约束布局在对接过程中的使用方法。

约束布局是定义控制应用中内容的规则。这些规则通过使用统一的元素和间距，保持跨平台、跨环境和跨屏幕大小的一致性。通常应用在 iOS 和 Android 中。

彩云注：这里想跟大家科普下相对布局和约束布局的区别。相对布局是通过相对定位的方式让控件出现在布局任意位置，相对布局因为逻辑原因，层级较多；而约束布局能够有效解决布局过多问题，让页面更加扁平化，布局之间相对位置也更好控制。约束布局也是继相对布局后，谷歌官方针对相对布局问题给出的一个更优解决方案，意在将来替代掉相对布局。当然，这里不再过多阐述，感兴趣的可以自行去了解下，可能偏开发方面会更多一些。

约束条件

如果在 sketch 文件中已经设计布局好了所有元素，就可以开始了！

1. 基础单位

Lyft设计总监：移动端响应式设计的高效方法

8×8

首先从定义基本单位开始，每个度量值都是其倍数。我建议使用偶数 8 来调整大小和间距，因为这样可以方便且一致地适配各种设备。

  • 8 更容易整除！10/4=2.5 vs 8/4=2
  • 大多数流行的屏幕尺寸都可以被 8 整除，这样更容易适配（与 6 或 10 相比）
  • 分辨率为 1.5 倍的设备很难清晰地显示像素为奇数的，若按 1.5 倍缩放 5 个像素就会导致半像素偏移。

在 Sketch 中选择首选项>画布，将“通过 Shift+方向键调整移动对象中的 10px 改成 8px”，这样会解决很多问题！

2. 间隔单位

间隔单位是常用间距的视觉表达。例如，一个“2 间隔单元”是 16 pt/dp，因为 2×8=16。这些符号应该在设计中使用，别名应该被标注成代码，以便在和开发对接时使用相同的语言。

Lyft设计总监：移动端响应式设计的高效方法

垂直和水平间隔

在项目很赶的时候，你可能没有足够的时间手动做到完美像素对齐。通过使用这些通用单位来标识，而不是标注工具自动生成的标注像素，它可以告诉开发实际间距。数字别名与“Shift +方向键”移动对象的次数相匹配。

Lyft设计总监：移动端响应式设计的高效方法

响应式按钮：iPhone8、三星 Galaxy S8、iPhoneSE

间隔大小永远不会改变。如果是水平间隔，则垂直高度被锁定，反之亦然。这意味着在不同的手机宽度上，组件的尺寸会发生变化，但用于创建它的边距的间距将保持不变。

对齐指标

有时元素在间隔之间对齐。间隔之间对齐的主要方法是中心对齐和底部对齐。

Lyft设计总监：移动端响应式设计的高效方法

垂直居、中水平居中和居中对齐

中心对齐是指你想要一个对象或一组对象向中间集中对齐。对象可以水平居中，垂直居中，或者向中间集中对齐。

Lyft设计总监：移动端响应式设计的高效方法

底部对齐

底部对齐是指希望对象与其中一个对象的底部对齐。当有两种不同的文本大小并且想要在基线处对齐时，底部对齐就是比较常见使用方法。

1. 点击对象

Lyft设计总监：移动端响应式设计的高效方法

48 x 48

在手机上，最小点击对象尺寸为 48x48dp /pt。这尺寸来自于谷歌设计指南，物理尺寸约等于 12 英寸。(HIG 建议使用 44x44pt，所以我选择更大的)。将元素放在一起时考虑点击对象大小。你也可以使用点击对象符号来表示元素的哪些部分是可点击的。

组件布局

让我们通过一些组件示例切换来测试所有约束的使用：

Lyft设计总监：移动端响应式设计的高效方法

组件示例：列表项、按钮和复选框

2. 基本尺寸

组件的基本尺寸，它的最小高度和宽度，应该基于最小点击对象的尺寸。视觉上小于点击对象的组件仍应由相同的最小点击对象大小触发。这意味着，如果用户在复选框之外触摸了一点，也会承认他们点击了复选框。

Lyft设计总监：移动端响应式设计的高效方法

组件相对于最小点击对象的视觉尺寸：精确、高于和低于。

3. 内边距

使用间隔表示组件内的边距。

Lyft设计总监：移动端响应式设计的高效方法

长字符串的水平边距

你可以通过设置水平边距来限制元素的水平位置，比如文本框。当文本太长时，你需要指出文本是否应该调整大小、换行和/或截断。换行到两行比截断一行更好！

Lyft设计总监：移动端响应式设计的高效方法

动态类型的水平和垂直边距

垂直填充最常用于动态适配。尽管组件在当前手机尺寸、当前语言和当前字体大小下看起来可能很好——但所有这些因素都是最坏情况下的变量。当类型增加时，组件将变得比它的基本大小更大，并且你希望确保它仍然有垂直填充。

4. 基线对齐

使用居中和基线标记来示意，如何让那些没有接触到所有边的间隔元素表现出来。这部分主要是方便给开发理解的。

Lyft设计总监：移动端响应式设计的高效方法

垂直居中的列表项文本、底部对齐的价格和居中的复选框

界面布局

现在你已经布局好了一个页面，使用与在组件中相同的方式使用间隔、点击目标和对齐符号。

Lyft设计总监：移动端响应式设计的高效方法

插图来源于 Meg

……瞧!这就是移动端的响应式布局!

提示：为你在界面布局中引用的组件创建单独的 symbol 画板。在组件中，将所有组件规范包含在一个文件夹中，该文件夹可以轻松打开和关闭。没有什么比同时标记组件和界面布局更好了。

总结

即使是一个精心制作的交接文件也不能取代你与开发之间良好的语言交流。这应该与开始、移交和书面文档一起使用。你越让开发了解你的设计，还原的结果就越接近实际发布的产品。


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

截屏2021-05-13 上午11.41.03.png



文章来源：优设  作者：彩云译设计

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

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

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


评论(0) 浏览(2157)

设计模式｜输入线索：如何让用户清楚该输入什么？

ui设计分享达人

本文是《设计模式周周看·Ant Design 为你讲透设计模式》周刊第五期内容，上期内容，我们介绍了一种辅助用户输入的设计模式：输入说明

这一期，我们继续介绍一种辅助用户输入的设计模式：输入线索。


What 是什么

简介：「输入线索」是指用示例输入或说明文本以占位符（Placeholder）的形式显示在输入框中，以帮助用户理解需要输入的内容，或给出相关线索的一种设计方式。

例子：  在 Ant Design 输入框组件 的示例中（如下图），我们可以看到「输入线索」可以更好地帮助界面说明输入字段的内容或解释输入字段的功能。


Why 为什么

「输入线索」这种设计模式可以让界面不言自明。由于输入线索的内容位于用户输入的位置，因此用户往往不会忽略这个信息。



对比：「输入线索」VS「输入说明」

「输入说明」与「输入线索」都是辅助用户输入的设计模式，这些模式可以帮助用户明确输入信息的内容形式。

那么这两种模式有什么差异性呢？


使用「输入说明」这种模式时，快速浏览用户界面的用户可能会轻易地忽略说明信息，因为用户的目标是尽可能快地完成表单，然后进入下一步操作（虽然有的场景下这也是其中一个设计目标，但在这里不讨论）。因此，过多的文本说明也会给用户带来较大的心智负担。


Google 注册账号页是结合使用「输入说明」与「输入线索」的一个典型案例。通过使用「输入线索」告诉用户需要填写的内容，通过「输入说明」来补充填写信息的相应意图，进而使得用户可以清晰地意识到需要填写什么，并输入相应信息。


When 什么时候使用

用户可能不一定清楚需要在输入框中输入的内容。在设计上，你可能不希望在输入框附近上添加更多的字，造成视觉压迫。还有一种情况，如果界面空间有限，无法使用「输入说明」时，也可以考虑使用「输入线索」。当出现下拉菜单或者组合输入框时，往往需要配合该模式进行使用。


使用条件

· 输入框要求输入的内容可能不容易让人马上理解；

· 设计上不希望在其他地方补充新的内容；

· 可以承载文本的输入空间可能没有太多；

· 配合下拉菜单或者组合输入框使用；


How 如何使用

1. 选择适当的提示文本

· 对于下拉列表，使用 “选择”、“选取”等单词，英文使用 Select Choose 或者 Pick 等；

· 对于文本输入框，使用“输入”等单词，英文使用 Type 或 Enter；

· 尽量使用祈使句，以动词短语开头；

· 以描述输入内容的名词结尾，例如“选择状态”，“在此处输入消息”或“输入患者姓名”等；


2. 提示文本的位置

有关文本提示的位置应该和输入值的位置一致。 比如，提示本身不应该是下拉菜单中的可选值。


Example 案例

案例一：Ant Design Pro 登录功能预览

用户需求：用户登录功能的预览与体验

Ant Design Pro 是一个中后台开发的模板脚手架，其并不提供真实账号登录服务。因此 Ant Design Pro 的开发者为了模拟真实使用环境，提供了一个可正常登录的账号，账号密码分别 user 和 ant.design ，其余情况下用户输入的账号密码均会提示不正确。


在这个场景下，通过将正确的账号密码以输入线索的方式显示在占位符中，巧妙地告诉体验 Ant Design Pro 的用户正确的账号密码。


案例二：163邮箱登录页面

用户需求：登录账号

163邮箱登录页面的账号输入框中的输入线索非常有用。正常用户在看到后缀有 @163.com 时可能并不一定能意识到可以输入手机号码。而通过在占位符中 显示「邮箱账号或手机密码」，高效便捷地提示了用户可以直接输入手机号码进行登录。


案例三：小米账号登录页面

用户需求：输入账号密码

「输入线索」有一种设计上的变体，称为「浮动标签」。因为一般来说，当用户激活输入框时，占位符文本会消失。而「浮动标签」不会消失，通过移动位置和更改大小驻留在界面中。这种设计方式可以使得界面变得简洁、优雅。


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

截屏2021-05-13 上午11.41.03.png



文章来源：站酷  作者：Ant_Design

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

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

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



评论(0) 浏览(1780)

综合指南：产品设计 vs. 用户体验设计

ui设计分享达人

区别指南 


产品设计和用户体验设计（以下简称UX设计）之间的区别在于，后者侧重于用户对应用程序或网站的体验感是否流畅，而前者则更多地是逻辑方面是否流畅。也就是说UX设计师负责确保设计看起来不错，使用起来感觉更好，使交互更愉悦。但产品设计师不处理这些，他们设计的是产品应该如何工作（甚至应该是什么样子）。


不过产品设计师还有一个更重要的责任——查看产品的不同部分如何相互作用。这里我们展开举例，比如进行手机设计时，他们就要确保操作系统与屏幕上的触控以及与物理按钮都能很好地匹配；如果是笔记本电脑或台式电脑，那么硬件和各式端口就需要合理地设计分布，这样用户在使用时才不会出现连接线乱糟糟的情况。


UX设计师的主要职责是确保用户可以轻松地在产品的数字部分执行他们希望的操作。


产品、UX设计师会使用不同的工具来完成其工作。例如，产品设计通常在AutoCAD等程序中完成，而UX设计则常常用Figma、Adobe Xd或Sketch创建。


产品设计师会更注重全局意识，因为他们需要将所有部件组合进同一个产品内，一起工作。


Vip Sitaraman作为设计顾问，服务的客户不光有创业公司还有财富500强


我与行业资深人士Viputheshwar Sitaraman聊了这个问题——UX设计和产品管理之间的区别是什么，他的回答很有帮助。Vip曾为初创公司和财富500强公司担任过设计顾问，亲身体验了许多不同的产品开发方式。


他认为这些角色有不同的职责需要考虑，他说：「关键的区别在于UX设计师更关注用户体验，而产品设计师关注整体业务目标（包括用户经验）。以及，他们各自与业务发展目标和关键绩效指标 (KPI) 的关系。」


关于用户体验设计师角色的具体细节，他告诉我：「UX设计师的主要/唯一KPI是用户对体验的满意度。因此，用户体验设计师的大部分工作都集中在优化、改进和创新客户流程上。」


他还进一步解释了产品设计师负责产品或项目时的更大蓝图：「产品设计师的 KPI与整个业务相关联，例如：扩展新市场、构建有机增长（organic growth）引擎或提高转化率。可以想象，这类决策与典型的UX角色体验设计任务大不相同。」


工作、职责和技能方面的不同

UX设计师主要关注产品的可用性，而产品设计师则更多地关注产品整体的感觉和体验。产品设计师并不总是用户体验设计师，但他们主要致力于产品的感觉和可用性。

by UX Store on Unsplash


产品设计师的职责

产品设计师从各个维度负责产品的外观和感受体验；

使用草图、线框图或其他设计工具来创造可以成为实际产品的想法；

产品设计师需要了解平面、色彩和排版等的设计理论；

他们需要衡量KPI并确保产品达到预期水平。


UX设计师的职责

UX设计师负责用户在使用产品时的体验与感受；

确保一切以直观明确为基准，避免用户感到迷茫或困惑；

UX设计师需要了解用户研究方法，如可用性测试、访谈、日记研究和现场实验等；

需要对认知负荷理论等人机交互原理有很好的理解；

UX设计师通常会在项目规划的初步阶段就开始制作线框图。


RadCollab的资深资深设计师Nolan Perkins提到，UX设计师的责任并不小，但也取决于公司。他告诉我：


根据公司的规模，产品设计师可以从前面提到的任何步骤开始。他们可以从报告或见解开始，也可以从用户故事或线框图开始。无论他们从哪里启动，产品设计师都会把这些信息带到完整的高保真模型中。


每个职业的利弊

产品设计师和UX设计师的工作内容虽有不同，但两者都对人们每天使用的产品产生着重大影响。

by JESHOOTS.COM on Unsplash


UX设计师更注重技术，并通过研究、设计工程或原型来解决问题；而产品设计师则通过产品体验来创造视觉和思想。这两种工作角色都为产品的许多方面提供了信息， 从市场营销再到界面功能都包揽其中。在一个凝聚力强大的公司中，请确保为每个职位雇用合适的人！


产品设计师的难处

这要看你怎么觉得了，辩证来说也许算不上难处，作为产品设计师的你，需要对研发的产品负责。而最重大的挑战之一，是要确保在交付时间及合理预算内，进行原型设计或功能试验。


要在这个行业取得成功，需要极大的决心和动力，其实所有高薪工作皆是如此，但产品设计会更迫切需要这种素质。这不仅仅是为了让一些东西看起来很漂亮，而是关于如何创造性的解决问题。


UX设计师的难处

UX设计师是设计过程中不可或缺的一部分，他们确保每个项目都能获得个性化的细节呈现。从前期一步步调研到草拟线框图，以及对不同部分的优化修改，UX设计师可以了解到产品开发的各个方面，全程跟进。


设计师们的兴趣也是多种多样的，有的人对整个项目感兴趣，而另一些人则更喜欢设计工作，比如原型搭建。有些招聘人员要求比较高，偏好能够完成全栈工作的UX设计师，这就需要一人同时拥有多项学科知识储备。


我经常听到的一种说法是UX需要大量的奉献精神，有时设计师会因接收信息繁多而感到不知所措，但这也侧面说明了UX设计师对产品开发过程如此重要的原因。设计师们应学习处理信息和研究，以易于理解的方式呈现结果同时推动设计决策。


成为产品设计师的益处

产品设计师可以在许多领域工作，无论是UI设计、业务策略还是产品架构。这些领域使得创意人员和来自不同背景的人聚集在一起，创造有价值的东西。

产品设计师有很多责任


产品设计师是少数通过工程思维方式和极强同理心，来塑造组织文化的人，而践行的方法则是他们用各式新设计出的产品去处理不同的问题，从而得出方法论。产品设计主要是解决问题，日复一日，它们也有助于平衡功能与形式，虽然总有新的难题出现——但也请你继续成长，迎难而上！


产品设计师横跨多个行业，因为他们拥有的技能非常多样化！当今产品设计师必须有像变色龙一样强的适应力，处理任何状况，这促使他们成为非常有价值的员工。


成为UX设计师的益处

UX设计师是炙手可热的高薪专业人士，他们在设计无缝体验方面发挥着强大的作用。UX设计师往往兼具创造性和协作性，这意味着他们也能很好地跨设备或平台（如移动设备）与来自不同背景的人共同工作。

UX设计师的工作似乎与产品设计师的角色重叠


UX设计工作可能要求很高，但个人成长的机会却是巨大的。你会发现这个方向将激励那些热爱学习技术的人，因为人机交互模型是不断变化的，它们对我们的行为有着很大影响，所以，很多时候你会觉得业务需求之间的交集也是一个发挥技能的领域。


实际工作中，设计师与用户/客户的沟通时间会占比较多，因为要对他们与产品或服务相关的行为、需求深入研究。这些信息能非常有利于他们创建原型图与线框图，同时，还能帮助用户在新设计实施前，深入了解提高客户转化率或增加收入流的方法。


如何知道自己是否适合这两种角色呢？

我与三位业内人士进行了交流，并问了问他们「觉得在这两个领域取得成绩需要什么」。

Lindsey Allard是PlaybookUX组织的CEO兼联合创始人


Lindsey Allard，PlaybookUX的CEO兼联合创始人告诉我：

如果满足以下条件，你非常适合在UX设计领域：有用户研究或用户测试过程的经验；同理心强，能从用户角度思考；能够客观和批判性思考的人；并且需要了解UX流程（必要的）。


如果符合以下条件，则你适合从事产品设计：熟练使用Adobe、Sketch等工具；对设计、美的事物有强烈渴望，并擅长结合品牌；跟得上潮流；能够将一个愿景变成设计。


它们是相似的，甚至UX设计师可以转为产品设计师（反之亦然），但在公司内部运作方面还是存在明显差异。


用户体验一直是我的热情所在，我也会继续在UX设计领域深耕（曾经有一段时间我本可以转到产品设计上），两者大部分差异来自我们对项目采取的方法，以及我们制定的完成目标。


Nolan Perkins，RadCollab资深设计师告诉我：

我认为新人不应该上来就专攻产品设计或UX设计，因为两者都是更高级别的职位。相反，在决定从事具体的细分岗位之前，建议先打好基础。


Viputheshwar Sitaraman，数字顾问告诉我：

作为一名UX设计师，要能通过交互设计来预测用户行为。对用户行为、UI流程和可访问性等具有敏锐洞察力的设计师，将在UX设计角色中茁壮成长，并通过提升客户体验来推动增长。


另一方面，产品设计师要能找到新的机会来扩展价值。一个商业和营销意识俱佳的人，如果对更广阔的市场（即竞争、趋势）有自己的深刻理解，也会更好地帮助产品和功能改进优化，在产品设计角色中快速成长。


产品和UX设计角色都需要对现代趋势（无论是业务、市场、用户行为和交互）有深入和最新的了解——这就是为什么找到你最关心/享受的东西是如此重要！


要想成为这两种角色，有什么建议？

好问题！UX设计师和产品设计师拥有截然不同的技能组合，每个人的职责都是独特的。为了让大家对这些区别有一个了解，我将逐一概述。


如何成为一名UX设计师

首先，如果你没有学过任何技术经验，只学过设计，那么成为UX设计师的道路会稍微复杂一些。用户研究方法深深植根于用户体验技术中，所以第一步是获得技术技能，帮助你以不同的方式探索用户需求，比如原型和其他需要时间来研究的活动。


Quick tips

加入一个UX的在线提升训练营；

在用户体验领域继续深造，例如读硕读博；

丰富自身技能，比如学习用户心理学；

向你认识的UX设计师学习请教。


如何成为产品设计师

成为产品设计师有两条关键路径：第一种是通过专业的设计学校，获得产品设计学位；另一种是获得工程学位，进入具有产品设计岗位的公司，通过转岗或是晋升获得。决定走哪条路可以改变你的整个职业轨迹！


Quick tips

确定您想要设计的内容和位置。产品设计师更多的是构建产品的专家，并不局限于设计一个项目，这也是为什么产品设计师必须在许多学科上多才多艺，这样才能对从构思到开发和生产的不同方面给予指导，比如工程、工业设计和用户界面设计 (UI) 和甚至创业技能；

产品类型千差万别，从服装或汽车等消费品到纳米机器人或3D打印设备。请尝试找到你擅长的领域，术业有专攻，你不可能掌握一切！

探索你的兴趣——通过阅读相关领域的博客或新技术的文章/视频，看看它是如何与为你关注的行业联系起来的。


写在最后

产品设计师搭建产品体系，UX设计师通过调研和数据推进决策，并确定最适合用户的交互体验。两个角色通常会一起工作，但也取决于公司的大小。如果需要，高级UX设计师可以同时完成这两项工作！


有人常将二者理解为是一码事儿，因为他们通常都会参与早期的开发阶段（无论是概念阶段还是线框图阶段时）。在很多情况下，会有一个团队专门从事UI设计。总而言之：


抱歉，你不能通过一件事来定义UX设计师或产品设计师！


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

截屏2021-05-13 上午11.41.03.png



文章来源：站酷  作者：UX词典

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

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

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


评论(0) 浏览(2270)

折柱饼 +3 个套路，简单图表你真的会用吗？

ui设计分享达人

本文一句话概括：数据可视化中，如何用最简单的图表高效地传递信息。


人人熟知的 3 类图表

看似简单的 3 类常挂在嘴边的「折柱饼」，你真的知道怎么使用吗？

@rubyxrli 在 纽约的Uber数据可视化大会上所做演讲中提到： 
根据我的经验（基于原型研究超过10年）大多数可视化问题可以通过一些图表来解决。很少情况下，需要你去想出一个全新的表达方式。像条形图、折线图、散点图、透视表等「图形化主力」真的很难被替代！ 


对于大部分的企业级产品使用者来说，基本的图表类型，通常可以为大多数当前页面的问题作出解释，但是我们要做并不是简单地调用一个图表就结束了，如果想让你的页面更有效地传递结论、原因，可以让使用者探索更多可能性，甚至去发现新的分析思路，那么首先你需要掌握下面的分析套路：


3 个套路

「对比，细分，溯源」，给简单的图表加点「戏」

在数据分析中，分析思路一般可以概括为「对比，细分，溯源」，这也是《数据化管理》中提到六字箴言。首先我们来了解一下这六字箴言的具体含义：

此处引用部分《分析思维 第三篇：数据分析的三板斧》内容


1、对比

对比分为横向对比和纵向对比。

· 横向对比是指和“他人”比较，比如，两个网站的用户流失率；

· 纵向对比是指按照某个维度，和“自己”比较。比如，这个网站上个月今天和这个月今天的用户流失率。

2、细分

细分是指分维度、降低粒度来分析数据。

· 分维度是指增加维度，比如，离职率按照部门维度来分析；

· 降低粒度是指降低数据聚合的程度，比如，离职率不按年份，而按照月份来统计。

3、溯源

溯源是指在对比、细分锁定到具体维度和粒度之后，依然没有结论，那就需要查看原始数据或相关联数据，洞察数据，从数据中寻找灵感。


3x3 实践

第一个 3 代表图表类型；第二个 3 代表分析套路。

了解分析思维的三个套路后，可以尝试在自己的图表中检验打钩。

下面我用几个例子来说明一下，如何打开图表设计的脑洞：  


折线图

通常在一个数据概览页面，人们都会使用一个折线图，来表示一个关键指标的发展趋势，当然这么做非常直观，也非常准确。当我们为折线图添加一个对比的维度，就可以使折线图表达的内容更加丰满。

横向对比

可以是横向对比“和他人比”。


纵向对比

也可以是纵向对比“和自己比”。


添加辅助元素，强化关键信息进行对比

G2Plot 为图表提供了很多图表辅助信息组件：https://g2plot.antv.vision/zh/examples/general/label

例如：

· 参考型组件：参考线、趋势线、辅助区域等

· 极值型组件：最高/低点、预警线等

undefined


细分维度

通过右上角的 TAB 切换，提升和降低数据聚合的程度


柱 / 条形图

横向对比

和别人比。


细分维度

将维度拆分进行分析。


在使用柱状图/条形图时，问问自己「对比」的呈现效果好吗？

这是使用者在使用柱形图做对比时，经常遇到的问题：

· X 轴类别数量过多，柱子非常密集

· 轴文字标签数量过多，文字在 45%旋转后可读性降低

这时，设计者应该试着旋转柱图，把它变成一个条形图。


对比是好的，但不要做无用的对比


饼 / 环图

纵向对比

饼/环图天生自带「纵向对比」的性质，但是除了用一个饼/环图之外，还有什么做法？


细分维度


溯源，显示更多详情帮助用户定位问题


合并极小值的维度，在有需要的时候做细分


拓展：N x N 实践

第一个 N 可以代表图表类型，也可以代表页面，但需要是一个实体；

第二个 N 代表分析思路，上文中提到的 3 个套路只是众多分析思路中被总结出最为常用的，还可以根据不同业务场景的诉求去添加思路。

这个矩阵的表格填出来后，除了可以帮助设计者检验是否高度利用了图表区域之外，还可以总结出一份属于自己业务场景的图表指引，传递给下一个设计者使用。


结语

在企业级产品设计的领域中，用可视化的方式表达信息，让数据不再枯燥难懂，是一种常见的设计手法。在真实的业务场景中，大部分用户青睐 dashboard（报表页面），来呈现「数据概览」、「数据监控」、「数据明细」等信息，其中的重要组成部分即「统计型图表」。如何恰当使用「统计型图表」来实现用户的分析目的？ 这对没有可视化基础的制作者来说，还是有一定的难度。

通过以下三步，让用户更高效地读取重要信息，驱动业务决策，实现商业价值。

本文用简单直白的工具方法，为「零基础」的图表制作者提供一种简单易学的思路，让你的图表在 Dashboard 里更全面、更有效地传递关键信息。


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

截屏2021-05-13 上午11.41.03.png



文章来源：站酷  作者：Ant_Design

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

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

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


评论(0) 浏览(1533)

数据可视化的驱动与使能

ui设计分享达人

老司机开车

开车的同学知道，一般我们用“指哪打哪”来形容汽车转向精准、没有虚位。“指哪打哪”是指汽车的操控体验，更是驾驶乐趣的一部分。驾驶员轻拨动方向盘，轮胎转向带来的阻力以及路面反馈传至车身，动力的线性输入与制动的时实响应让驾驶员能控制自如。


“指哪打哪”形容车听从驱使，是人对车的输入控制以及车对人的输出反馈，是一个互相修正的过程。在数据可视化设计中，操作“听从驱使”的可视化作品又是一种什么样的体验呢？



听从驱使示例

示例一

某公司运营同学需要找出品类销量下滑的原因。在图表上，运营同学的思路是找出症结、定位问题、关联分析、验证设想、得出结论并给出运营策略调整方案。



示例二

某同学向公安报案称账户被盗大额资金，公安案件科分析专员从受害人的资金流向追溯至相关木马团伙，通过关系扩散查验可疑人员，顺藤摸瓜最终找到嫌疑人并抓捕。

上面两个示例提供足够便捷的过滤筛选组件，配合鼠标悬停、点击、框选等操作，方便用户查看更多视图空间，快速定位感兴趣的数据空间，这种操作体验能帮助用户事半功倍。



何谓听从驱使

听从驱使本质上是用户对可视化的控制能力，是一种主观感知与信念。听从驱使包括两部分，“驱动 Drive”与“使能 Enable”，这两步正向不断迭代，引导用户一步步剥开数据的面纱。



驱动 Drive

数据可视化听从差遣，用户可根据前馈信息预示、驱动可视化，用户对可视化作品享有控制权，数据可视化符合用户的显性需求。


使能 Enable

数据可视化遂用户心愿，用户根据反馈引导进行下一步操作，帮助探索数据规律或者发现更多数据奥秘，数据可视化符合用户的隐性需求。



为什么要听从驱使

增加探索意愿

用户处在海量、无序、异构数据的海洋中时，需要随时面对有限屏幕空间与无限数据空间带来的冲突。可视化应当给予用户适当的选择权，让其可对信息进行控制，具备信息聚焦、下探的能力。这些可视化能力能提升用户的参与度和探索意愿，不让其迷失在数据的海洋中。


减少焦虑感

移动端长按滑动（Touch & Hold）更新激活点数据、左右轻扫（Swipe）平移视图是用户的既定认知。左图长按滑动后的反馈为平移视图，此时用户心里咯噔一下，又继续操作了一遍，操作的预期与结果确实不一致，有些“不听使唤”。右图符合用户心智模型，预期与输出结果一致。


不听从驱使：视图平移，不符合预期-长按滑动时数据点不更新（如下图）


听从驱使：视图不动，符合预期：长按滑动时数据点更新（如下图）


由此可以看出，如果可视化作品操作时不符合用户的既定认知，可视化则变得不受控，用户心里会紧张、导致重复范错，甚至责怪自己。


如果赋予用户较高的驱使感且得到正向的反馈指引，引导用户操作下一步，那么用户心态会更积极，更愿意接受挫折及试错，这种听从驱使可以消除未知、不确定性所带来的紧张与焦虑。



怎么做到听从驱使

前面讲过，可视化听从用户驱使需具备两点能力：

· 驱动 Drive：通过前馈预示让用户知道可视化能做何互动；

· 使能 Enable：通过反馈引导用户进一步让用户与可视化互动；


可视化交互时，驱动用户完成一期探索，探索后反馈引导发出的信号成为下一步操作的前馈提示，再次驱动用户操作可视化后，如此反反复复直到帮助用户找到数据的潜在规律或者找出数据真相。


从心理学的四个概念进一步解释：

· 示能：可视化特性与预设交互的关系，是否可被操作；

· 意符：即信号，告诉用户可采取什么操作，如何行动；

· 映射：事物之间的关连关系，是怎么联系的；

· 反馈：操作之后的回应，是否及时、有效；


示能

示能 Affordance  指可视化作品可能的潜在行动，只有当它们都是可以被感知的用户才容易地发现它们，它揭示了用户与可视化互动的可能性。


例如我们默认认为屏幕上的可视化都可以进行交互，PC 可视化作品可以 Hover 交互，移动端可以点点按按。示能存在但可能不可见，可视化设计师的一部分职责就是实现示能的可见性。



意符

意符 Signifiers 是可视化作品传递的信号，暗示可能的潜在行动，让用户该知道该如何去控制可视化。无论是示能还是交互方式，都应照顾用户已有习惯，需符合用户心智模型。




在 PC 可视化上，可视化设计师很容易忽略鼠标指针样式设计，经常默认一个鼠标样式进行到底，可视化如何驱动用户以及如何让用户具备可视化的能力全靠猜。




映射

映射 mapping 表示可视化元素间关系，应用于控制-反馈模式的设计或布局；比如方向盘可控制汽车转向，下拉筛选器出来的选择框。以空间布局对应关系的自然映射为例。




反馈

反馈 feedback 是用户操作之后的回应，反馈应当是即时、有效的。在可视化设计时，如果需要，我们建议给出用户深层次的反馈以便指引其进行下一步的操作。




小结

要做到听从驱使，需给用户控制感，让用户享有对可视化的控制能力。例如提供足够便捷的过滤筛选组件，配合鼠标悬停、点击、框选等操作，方便用户查看更多视图空间，快速定位感兴趣的数据空间，亦或根据特定变量对数据进行排序、突出、降维处理等。当我们将这些组件与交互动作进行结合，用一些习以为常的交互去操纵可视化时，用户将会很清晰、并且有信心控制好当前视图。



数据可视化不仅仅只是一张好看的图，它构建的是一个系统，这个系统随时在解决有限屏幕空间与无限数据空间带来的冲突。这个系统可以驱动用户完成一系列操作后引导用户有能力进一步拿到结果，如此反复交替迭代，帮助用户完成一些平时看来不可思议的任务。只有这样，用户才能操纵听从驱使的可视化，就像文章开头所述，如老司机开车一样丝般润滑。

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

截屏2021-05-13 上午11.41.03.png



文章来源：站酷  作者：Ant_Design

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

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

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



评论(0) 浏览(1660)

js判断当前浏览器的分辨率

前端达人

var events = navigator.userAgent;
if (events.indexOf('Android') > -1 || events.indexOf('Linux') > -1 || events.indexOf('Adr') > -1) {
console.log("安卓手机");
} else if (events.indexOf('iPhone') > -1) {
//根据尺寸进行判断 苹果的型号
if (screen.height == 812 && screen.width == 375) {
console.log("苹果X");
} else if (screen.height == 736 && screen.width == 414) {
console.log("iPhone7P - iPhone8P - iPhone6");
} else if (screen.height == 667 && screen.width == 375) {
console.log("iPhone7 - iPhone8 - iPhone6");
} else if (screen.height == 568 && screen.width == 320) {
console.log("iPhone5");
} else {
console.log("iPhone4");
}
} else if (events.indexOf('Windows Phone') > -1) {
console.log("诺基亚手机");
} else if (events.indexOf("iPad") > -1) {
console.log("平板");
}

使用js动态引入js和css文件方法

方法1： 

//引入css var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = 'css/style.css'; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); //引入js var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = 'js/js.js'; script.type = 'text/javascript'; head.appendChild(script); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    •

方法2： 

//引入css new_element=document.createElement("link"); new_element.setAttribute("rel","stylesheet"); new_element.setAttribute("type","text/css"); new_element.setAttribute("href","css/style.css"); document.body.appendChild(new_element); //引入js new_element=document.createElement("script"); new_element.setAttribute("type","text/javascript"); new_element.setAttribute("src","js/js.js"); document.body.appendChild(new_element); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    •

方法3： 

var importCssJs = { css: function(path) { if(!path || path.length === 0) { throw new Error('参数"path"错误'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); }, js: function(path) { if(!path || path.length === 0) { throw new Error('参数"path"错误'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } } //引用方法 importCssJs.css('css/style.css'); importCssJs.js('js/js.js');




















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

截屏2021-05-13 上午11.41.03.png


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

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

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


评论(0) 浏览(1908)

layui 鼠标移动在文字上显示 lay-tips 方法

前端达人

代码：

在源代码加上 

<i class="layui-icon layui-icon-tips" lay-tips="最大长度为16个文字" ></i>

JS代码

加上js代码 

$('*[lay-tips]').on('mouseenter', function(){
var content = $(this).attr('lay-tips');

this.index = layer.tips('<div style="padding: 10px; font-size: 14px; color: #eee;">'+ content + '</div>', this, {
time: -1
,maxWidth: 280
,tips: [3, '#3A3D49']
});
}).on('mouseleave', function(){
layer.close(this.index);
});






禁用鼠标事件,设置pointer-events属性为none:

pointer-events:none

开启鼠标事件,设置pointer-events为auto:

pointer-events:auto








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

截屏2021-05-13 上午11.41.03.png


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

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

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


评论(0) 浏览(6102)

5个技巧，让你的做图效率翻10倍！

seo达人



相信很多设计师都会觉得每天时间不够用，没有效率，没有收获，那么今天分享5个时间管理的方法，帮助你提升效率的同时，个人也能得到成长。请看今天的分享，enjoy it。

 

如何做好时间管理？

图片

网上流传一张王健林的行程单，可以看得出时间分配相当满，于是我就特别好奇，专门问了一些我们公司的高P，他们每天那么多工作，是如何去平衡生活和工作的，其中有一个很重要的点就是做好时间管理且自律。

比如今天晚上8点要和孩子去看一个音乐会，就会在8点之前把所有的工作全部搞定，然后去陪孩子！是呀，厉害的人，能在某一个点把事情全部搞定，本身就是超强的能力，那么作为职场人，我们该怎么合理管理时间呢，今天分享6个小方法给大家。

 

方法一：番茄工作法 

番茄工作法是由弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。因为创始人使用番茄定时器，所以叫番茄工作法。

图片

 

如何使用？

选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在短暂休息一会（5分钟就行），每4个番茄时段多休息一会儿。

这个方法为什么好用呢？我相信很多设计师和我一样，每次工作几分钟后就会玩玩手机，看看微信，一边听歌，刷着网站，同时做着几件事情。

这个就是明显的一心多用，不够聚焦，番茄时钟好处就是督促你在这个25分钟内，专心只做一件事情。充分利用大脑的集中注意力去高效完成一件事，然后休息5分钟，再开始下一个番茄时间。

图片

当然你也可以根据你个人习惯来调整时间，我将番茄时间的25分钟改成了45分钟，这样有助于我更好的聚焦。比如我有一个需求时，我会花45分钟看完交互流程，45分钟去和开发还原开发细节，45分钟去收集设计灵感，45分钟去把页面框架搭建好，或者设计好一个局部等等，然后休息5分钟，让自己短暂休息下。

图片

 

合理拆解需求

学会拆解任务，设计师的需求有大有小，大的比如一个首页改版，一个设计语言的建立，小的有一个弹窗设计，一个图标绘制等等，那么运用番茄时间的第一步就是你需要对工作任务进行合理的拆解，才能用多个番茄时间段来覆盖整个项目，比如需要做一个首页改版，那么我就需要进行拆解任务。

图片

首页改版可以分成四个大的关键节点，需求讨论，设计风格探索，视觉设计，交付开发，然后每个大的模块下再细分小的任务，然后进行番茄时钟的评估，比如色彩收集我可能需要2个45分钟，那么就2个番茄时钟去完成它。

所以我们要学会合理的去拆分你的需求任务！明确到可执行的番茄时钟。

 

及时提醒

图片

每个25分钟或者45分钟的时间点提醒一定要及时，闹钟响了，停下手上工作，短暂的休息调整下，切忌继续一直工作下去，因为只有适当休息，我们才能更加高效，高质量的完成接下来任务。

 

听听白噪音

图片

很多同学在工作时，喜欢戴着耳机听着音乐，但是在使用番茄时钟时，我不太建议这样做，原因在于音乐会干扰我们思考，有时候音乐还会影响你的情绪，所以这个时候建议大家听听舒缓的白噪音，比如海浪声音、风声、雨声，我个人比较喜欢听海浪拍打的声音，能够让自己静下心来。

这里推荐一个番茄时钟的MAC工具，叫番茄钟，里面除了设置番茄钟外，还自带很多白噪音，非常好用！

图片

 

方法二：四象限时间法 

美国的管理学家科维提出的一个时间管理的理论，把工作按照重要和紧急两个不同的程度进行了划分，基本上可以分为四个“象限”：

1.既紧急又重要：

如同事投诉、即将到期的任务、上线危机等

2.重要但不紧急：

建立人际关系、设计培训、制定设计规范等

3.紧急但不重要：

如取快递、部门会议等

4.既不紧急也不重要：

如网购、闲谈、邮件、发朋友圈等

我们需要把每天工作任务，按处理顺序划分：先是既紧急又重要的，接着是重要但不紧急的，再到紧急但不重要的，最后才是既不紧急也不重要的。我们具体来看看设计工作中的一些场景。

图片

 

既紧急又重要

设计师工作场景：比如项目上线前的设计更改，明天和主管汇报的PPT，需求设计评审，这是我们每天工作的核心，大多数设计师在公司中日常任务就是产品的迭代，那么重要的事都是不能一拖再拖，都是迫在眉睫。

因为整个产品是赶时间点的，比如双11那天必须上线，那么无论如何都要按时保质量的完成，所以这时候是考验我们经验、判断力的时刻，如果没有做好，很有可能影响你的考核和晋升。

我自己的方法是每晚睡前给自己列出明天最重要的必须完成的3件事情，并用工具软件记录下来！

图片

 

重要但不紧急

这里主要是和你个人成长发展有关，比如学习英语、提升动效技能、掌握C4D、理财等等，这些很重要，但是很多时候我们每天都在处理重要又紧急的事情，特别是互联网公司，每天都在做需求，对于自己的个人规划，根本没有时间处理，就会导致你个人的提升这些事情完全没有时间做，多把精力放在这个领域去提升自己，必须主动去做，这是对于你个人成长最有帮助的。

比如你未来3年希望去大厂工作，那么你就要列出来大厂设计师的技能有哪些，比如科学设计方法、设计思维、动效、数据能力，然后都放在你重要不紧急事情里。在精力有限的基础上多做投入和提升，慢慢才能达到目标，否则就一直成为流水线设计，或者项目里面一个资源方，个人成长永远没有！

图片

 

紧急但不重要

比如PM找你聊需求，当然正常需求该聊还是聊，但是工作中经常有的聊，真的只是陪聊，很多时候真的在没有必要，没有结果的开会，聊需求真的是浪费时间，表面看似第一象限紧急事情里，因为迫切的呼声会让我们产生“这件事很重要”的错觉——实际上就算重要也是对别人而言。我们花很多时间在这个里面打转，其实不过是在满足别人的期望与标准。

设计师经常遇见的，改文案啊，产品会议，开发排期这种会议在我看来，出来关键节点有结果的需要参加，更多事情能少参与就少参与。

图片

 

既不紧急也不重要

这里的既不紧急也不重要就是每天你花费时间最多的地方，比如群里聊天，刷朋友圈，抖音，看八卦新闻，当然人都是需要一些无聊消遣的，但不值得花很多时间在这个象限。刚开始时也许有滋有味，到后来你就会发现其实是很空虚的。

我经常给大家说，你怎么比别人进步更快，就是设计之外的8小时你在做什么。别人工作时间外8小时都在学设计，学各种课程，而你在做些无聊事情，一年下去差别就出来了，不是说我们不应该去娱乐，而是需要注意时间分配。

总之，关于时间的4象限，需要大家多多的关注，多把精力放在重要又紧急，然后允许情况下，多提升重要不紧急事情的投入，长期坚持下去，你会有巨大的改变。

 

方法三：先思考再动手 

图片

在接到需求时候，多问自己几个为什么，这个页面为什么要改版？改版是为了提升用户留存，还是活跃度？还是提升页面转化？还是优化了什么？了解清楚，梳理清楚逻辑、流程关系以后再动手，这才是一个正确的做事方式，同时也需要思考，你在这中间做了哪些有价值的事！

这个道理很简单，但是很多人都没有做到，我也有很多时候，做着做着掉进一个坑里，所以做之前想清楚，想好了再做会更好！

 

方法四：避免重复造轮子 

图片

 

避免重复，经常总结积累

做一件事情，学会举一反三，学会从点到面，在很多公司面试晋升过程中，比如阿里，P6资深设计师和P7专家设计师，很重要的一个技能点就是，如何从点做到面。

我们在做很多需求时候，需要思考，这次做的这个需求后续如果遇见类似的，能不能快速解决，而不至于浪费时间和精力投入进去没有成长！比如说按钮设计，我们随便抓一个市场上的按钮，你会发现按钮的样式、大小颜色就是各种不统一，浪费开发资源和设计资源！如果你每天的工作都是做这种浪费精力没有存在感的事情，对于个人是很不利的，平时做项目多留心下，比如我做一个专题页面是不是可以去思考下，这个页面做完哪些控件我可以沉淀下来，复用到其他的场景中，赋能给其他设计师呢，这个是很重要的！

同样的，比如我们最近在研究一个弹窗，那么是不是我做这次弹窗，我就把弹窗彻底研究透彻，弹窗尺寸大小、颜色、按钮、状态都研究彻底，彻底掌握了这个知识点，后面再做弹窗信手拈来，深刻搞定一个任务，避免反复，经常总结和积累，也是提升效率很重要的方法。

图片

 

当你觉得很难的时候其实是在上坡

这是我很有感触的一句话，人的成长体现在同样的事情上，万事开头难，但后面会越来越顺手，因为在这个过程中你已经掌握了方法，我们需要做的就是不要半途而废，要学就学透学完整，后面工作效率就上来了。

图片

我们的专业知识就像这4个空杯子，一个代表AE，一个是C4D，一个是UI，一个是插画，很多东西都想掌握，于是每天学习一次就往这个杯子浇水一点，但是坚持10天就坚持不下去了，要么学别的，要么没有动力了，然后导致最后什么都没学到。

图片

正确做法是把一件事情学透了，学彻底了再去学下一件事情，你学AE就彻底把AE掌握了，再去学下一个，这样避免反复，彻底掌握不仅能加速你的成长，更能让你专业更深！

 

方法五：放下手机，定时间点 

最后这个方法对我来说很有效，学会放下手机，放下干扰，中国口香糖的营业额持续下降，大家知道为什么吗？口香糖一般都会摆在收银台的旁边，因为用户在超市收银台排队的时候，都在玩手机，没有人去看前面的货台！可见手机对我们影响有多大，所以当你准备学习时候，或者去完成一个任务时候，最有效就是手机放起来，至少一个番茄时间不要去看，这样保证你的效率变高。

另外一个方法就是定时间点，定结束时间点很重要，人对于时间点都是有天然遵守的，比如地铁错过末班车就回不了家，火车飞机晚点你也回不去，所以我们做事情时候可以立一个最晚完成时间，然后去做，比如我写作，定的时间就是每周末必须写完，所以我周末再忙，都会去抽空写完。

 

最后 

今天分享的这些经验，都是我实践过并有效的方法，希望可以帮助到大家一同实践起来，照着做下去，你会发现能压缩至少1/3的时间出来，让我们都把时间花在正确的事情，和正确的人身上，快乐工作，快乐成长，快乐生活！

 

原文地址：我们的设计日记（公众号）
作者：sky

转载请注明：学UI网》5个技巧，让你的做图效率翻10倍！

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

截屏2021-05-13 上午11.41.03.png


文章来源：站酷   作者：陈皮Celia 

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

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

评论(0) 浏览(1686)

分类

日历

链接

个人资料

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

存档