182021-10

什么是异步？

异步与同步是相反的

简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

什么时候用异步编程

在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。

现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。

为了解决类似这种问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

例如：




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

            
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                <title>回调</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <button>点击</button>
            

        

    

    

        

            

            

        

        

            
                <p></p>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var btn = document.querySelector('button');
            

        

    

    

        

            

            

        

        

            
                function fn1(){
            

        

    

    

        

            

            

        

        

            
                btn.onclick = function(){
            

        

    

    

        

            

            

        

        

            
                document.querySelector('p').innerHTML = '我出现了！'
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                setTimeout(fn1,1000)
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            
                </html>

它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 1 秒，然后执行回调函数 "fn1"，在命令行输出 "我出现了！"。

Promise 的使用

语法格式：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                console.log("Run");
            

        

    

    

        

            

            

        

        

            
                });

resolve和reject是参数

再看这个例子：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                var a = 0;
            

        

    

    

        

            

            

        

        

            
                var b = 1;
            

        

    

    

        

            

            

        

        

            
                if (b == 0) reject("Divide zero");
            

        

    

    

        

            

            

        

        

            
                else resolve(a / b);
            

        

    

    

        

            

            

        

        

            
                }).then(function (value) {
            

        

    

    

        

            

            

        

        

            
                console.log("a / b = " + value);
            

        

    

    

        

            

            

        

        

            
                }).catch(function (err) {
            

        

    

    

        

            

            

        

        

            
                console.log(err);
            

        

    

    

        

            

            

        

        

            
                }).finally(function () {
            

        

    

    

        

            

            

        

        

            
                console.log("End");
            

        

    

    

        

            

            

        

        

            
                });

这段打印结果为：

.then() .catch() 和 .finally() 三个方法

这三个方法的参数都是一个函数，

.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，

.catch() 则是设定 Promise 的异常处理序列，

.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                console.log(1111);
            

        

    

    

        

            

            

        

        

            
                resolve(2222);
            

        

    

    

        

            

            

        

        

            
                }).then(function (value) {
            

        

    

    

        

            

            

        

        

            
                console.log(value);
            

        

    

    

        

            

            

        

        

            
                return 3333;
            

        

    

    

        

            

            

        

        

            
                }).then(function (value) {
            

        

    

    

        

            

            

        

        

            
                console.log(value);
            

        

    

    

        

            

            

        

        

            
                throw "An error";
            

        

    

    

        

            

            

        

        

            
                }).catch(function (err) {
            

        

    

    

        

            

            

        

        

            
                console.log(err);
            

        

    

    

        

            

            

        

        

            
                });

打印结果为：

1111
2222
3333
An error

resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作，这一点从刚才的计时器的例子中可以看出来。

reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

但是请注意以下两点：

resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列；
resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。

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

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

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

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

评论(0) 浏览(2247)

182021-10

【举栗说明】JavaScript作用域，一次性给你总结！

前端达人

本文重点

函数案例
函数作为参数使用
arguments
作用域：写代码要注意变量的在哪声明和使用的问题
预解析：什么叫预解析, 什么东西发生了什么事

01 作用域:使用范围

全局变量:

声明的变量是使用var声明的,那么这个变量就是全局变量,
全局变量可以在页面的任何位置使用
除了函数以外,其他的任何位置定义的变量都是全局变量
如果页面不关闭,那么就不会释放,就会占空间,消耗内存
全局作用域:全局变量的使用范围

局部变量:

在函数内部定义的变量,是局部变量,外面不能使用
局部作用域:局部变量的使用范围

注意:

块级作用域:一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用;

说明:js没有块级作用域,只有函数除外

隐式全局变量:声明的变量没有var,就叫隐式全局变量

全局变量是不能被删除的,隐式全局变量是可以被删除的

定义变量使用var是不会被删除的,没有var是可以删除的

function f1() {  number=1000;//是隐式全局变量 }f1();console.log(number);   var num1=10;  num2=20;  delete num1;//把num1删除了  delete num2;//把num2删除了  console.log(typeof num1);  console.log(num1+10);  console.log(typeof num2);  num=100; console.log(num);  function f1() {  var num=100;  num+=10; }f1();//这个函数结束之后 { var num=10;  console.log(num);//10 }console.log(num);  if(true){  var num=10; }console.log(num); for(var i=0;i<5;i++){  var number=20; }console.log(number);   var i=0;  while (i<5){  var num=100;  i++;  } console.log(num);  function f1() {  var num=10; }f1(); console.log(num);  var num=10; console.log(num);//10

作用域链

 var num=10;  function f1() {  var num=20;  function f2() {  var num=30;  function f3() {  var num=50;  console.log(num);  } f3();  } f2();  } f1();

03 函数案例

求2个数中的最大值

 function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } console.log(getMax(10,20));  //console.log(getMax);//函数的代码 function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } var num1=10;  var num2=20;  //函数外面的num1和函数的形参num1不是同一个变量 var result=getMax(num1,num2);  console.log(result);  console.log(getMax);//函数的代码

求3个数中的最大值

 function getThreeMax(x, y, z) {  return x > y ? (x > z ? x : z) : (y > z ? y : z);  } console.log(getThreeMax(10,2,24));

判断一个数是否是素数(质数),只能被1和自身整除，质数是从2开始

用这个数字和这个数字前面的所有的数字整除一次(没有1的,没有自身的)

 function isPrimeNumber(num) {  for (var i = 2; i < num; i++) {  if (num % i == 0) {  //说明有一个数字整除了，就没有必要向后继续整除了， //此时就已经验证出不是质数 return false;  } } return true;  }//  console.log(isPrimeNumber(7) ? "yyyyyes" : "nnnnnno") var aa = isPrimeNumber(17);  if (aa) {  console.log("yes");  } else {  console.log("no");  }  function isPrimeNumber(num) {  for(var i=2;i<num;i++){  if(num%i==0){  //说明有一个数字整除了,就没有必要向后继续整除了,此时就已经验证出不是质数 return false;  } } return true;  } console.log(isPrimeNumber(8)?"是质数":"不是质数");   var result=isPrimeNumber(2);  if(result){  console.log("这个数字是质数");  }else{  console.log("这个数字不是质数");  }  function aaa(x,y){  return x-y;  } console.log(aaa(99,88))

通过函数实现数组反转

 function reverseArray(arr) {  for (var i = 0; i < arr.length / 2; i++) {  var temp = arr[i];  arr[i] = arr[arr.length - 1 - i];  arr[arr.length - 1 - i] = temp;  } return arr;  } console.log(reverseArray([1, 2, 3, 4, 5]));

通过函数实现冒泡排序

 function sortArray(arr) {  //控制比较的轮数 for (var i = 0; i < arr.length - 1; i++) {  //控制每一轮的比较次数 for (var j = 0; j < arr.length - 1 - i; j++) {  if (arr[j] > arr[j + 1]) {  var temp = arr[j];  arr[j] = arr[j + 1];  arr[j + 1] = temp;  }//end if }//end for }//end for return arr; } console.log(sortArray([0, 19, 34, 10, 100, 2]));

求一个数字的阶乘

function getJieCheng(num) {  var result = 1;  for (var i = 1; i <= num; i++) {  result *= i;  } return result; }console.log(getJieCheng(5));//1*2*3*4*5

求斐波那契数列

 function getFib(num){  var num1=1;  var num2=1;  var num3=0;  for(var i=3;i<=nnum;i++){  sum=num1+num2;  num1=num2;  num2=sum;  } return sum;  } console.log(getFib(12))

02 函数作为参数使用

函数是有数据类型,数据类型:是function类型的

函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数只要是看到一个函数作为参数使用了,那就是回调函数

function sayHi(fn) {   console.log("GOOD");  fn();//fn此时应该是一个函数}function suSay() {  console.log("HELLO"); }sayHi(suSay); function f1(x,y) {  console.log(x+y); }f1(10,20); function f2(x,y) {  console.log(x+y); }f2("HLS","MISS"); function f3(x) {  console.log(x); }f3(true);

04 arguments

计算n个数字的和

定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传了几个参数,没办法计算,但是如果在函数中知道了参数的个数,等于也知道了每个参数的值.

//定义function f1() {  //获取的是函数在调用的时候,传入了几个参数 //console.log(arguments.length);  //使用arguments对象可以获取传入的每个参数的值 console.log(arguments); } f1(10,20,30,40,100,200);//调用

 function f1() {  //arguments----->数组使用------伪数组--- var sum=0;  for(var i=0;i<arguments.length;i++){  sum+=arguments[i];  } return sum;  } console.log(f1(10,20,30));

05 预解析:提前解析代码

预解析:就是在解析代码之前,预解析做什么事?

把变量的声明提前了----提前到当前所在的作用域的最上面

函数的声明也会被提前—提前到当前所在的作用域的最上面

函数调用的时候, 把会函数的声明提升到作用域的上面

函数的声明提升到作用域

 f1();//调用  var num=20;//这个变量的声明会提升到变量使用之前  function f1() {  console.log(num);  //var num=10;  } function f1() {  console.log("小苏好猥琐");  } f1();  function f1() {  console.log("小苏没有助教猥琐");  } f1();

把变量的声明提前

 var num;  console.log(num);  num=10;  function f1() {  console.log("哈哈,助教好猥琐哦");  }   //f1();//报错

注意：预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面

  function f1() {  console.log(num);//undefined  var num = 10;  } f1();   console.log(num);//报错

函数中的变量只会提前到函数的作用域中的最前面,不会出去

预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)

 function f1() {  console.log(num);//undefined  var num=10; } f1(); console.log(num);// function f1() { console.log("哈哈"); }

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

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

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

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

评论(0) 浏览(1902)

182021-10

01.前言

总有一些人会让你感觉格外亲近，总有一些事会在不经意间打动你，慢慢的深入人心，是什么让你感觉亲近、愉悦、甚至兴奋？今天这篇文章主要从产品设计的视角分享一下深入人心的产品设计方法。

a

02.事势之流相激使然

“世事的变化趋势或态势是各种因素、力量相互碰撞、激发的结果”。同样想要让你的产品深入人心，本质是我们的产品要给用户提供独特的价值，而价值的产生可以理解为一个形象在用户心智中的建立，这里的形象类似于品牌VI，但绝不止于视觉层面，其实可以由多个维度构成。通过不同的维度影响用户的使用体验，最终形成产品的品牌价值。

我们可以把品牌价值理解为“人物个性”，美国心理协会(APA)将个性定义为“在各种场合、随时间变化，能够影响多种特征行为模式的个体的独特心理特质。”

产品的个性会影响用户的感受、思考、处理以及最终的结果。例如，当用户挑选并投递一个职位时，她希望听你成熟的建议来引导她。将品牌与几种典型的人物个性关联起来，就能创造关联性更强的故事，更容易使用户投入。换言之：人与人更容易亲近。如果你的品牌感觉像“人”，用户就会更亲近。

d

03.找到“人物个性” 明确品牌价值

定义“人物个性”，就是去思考如何面对用户，如何以最好的姿态向用户展示自己，首先要建立有效的价值体系。这里我们通过招聘业务的一个项目逐步讲解一下。

我们知道下沉市场的招聘环境十分恶劣，存在各种虚假信息的问题。结合这个背景我们对蓝领用户的求职现状进行了一系列详细的调研，收集了用户不同层级的需求（如下图）。

我们可以发现用户最基础的需求只是要求职位信息的内容真实，加分需求则是对职位品质提出了期望，在保障职位信息真实的前提下，需要提供更高质量的职位。结合需求的提及率和需求等级，我们输出了产品的价值体系（如下图）。

如图所示，产品的价值体系分为三个层级，分别是产品价值、用户价值和品牌价值。

强调产品价值：我们结合用户的基础需求，根据需求内容定义“真实”内容，例如：真实的薪资、真实的工作环境、真实的工作内容等，第二步则是通过产品底层逻辑或用户的评价反馈系统来创建这些“真实”。

提升用户价值：用户价值=产品价值-使用成本，例如：用户要购买苹果，A商店的苹果质量较高，但距离较远。B商店的苹果质量一般，但距离很近。则用户价值=苹果质量-商店距离。通过传递“真实”的方法降低用户选择职位的成本，从而提升用户价值。

形成品牌价值：品牌价值的形成则是通过多个体验维度的同时影响，以及用户不断的使用产品感受用户价值，长期积累形成的。

f

04.发掘用户感知拆解用户认知

基于前面建立的产品价值体系，我们来试着思考以下几个问题：

1.我们的品牌要说什么，怎么说？

2.在价值形成的不同阶段，我们的品牌分别对用户说什么？

3.用户希望得到什么，用户却只能感受到什么？

4.用户此刻正需要什么，用户此刻最不擅长什么？

创造价值不是目的，只有将价值有效的传递给用户，用户通过感受价值，从而更好的理解和使用产品。我们通过感知+认知的方式重新构建用户体验。

结合用户对直接/间接竞品的场景举例我们可以发现，用户对价值感知可以分为四个维度：

产品体验：“产品”可以理解为我们售卖给用户的商品，例如：京东的电器、招聘业务中的职位或者企业。

功能体验：“功能”类似于服务，例如：7天无理由、简历优化。

文案体验：“文案”指的是页面中信息字段的表达方式，是否足够详细、精准、及时等。

界面体验：“界面”其实就是页面的UI风格视觉语言。

同时我们发现用户认知的“真实”与以下几个词有很高的相关性。

接着我们根据价值体系的目标，通过以上四个维度拆解具体的优化内容（如下图）。

05.体验战略建立有价值的连接

清楚了价值目标，以及用户的认知和感知方式，我们开始将价值与用户做连接，也就是前面提到的价值传递（传递“真实”）。根据下图中的公式举两个例子。

打造产品体验：

左图是旧版的首页，右图是优化后的页面，我们可以直观的感受到页面两个产品的调性或者说页面的气质截然不同。我们来分析一下两者的区别，优化后的首页，在主视觉的位置，打造了“每日严选”。通过这个模块快速建立用户对产品的初步认知。这个模块的目的是为求职意图强烈但职位选择不明确的用户提供高质量的职位。这类用户在整体用户中的占比最高，同时这类用户的痛点十分明确，他们既希望选择一个高质量的职位，但自身缺乏对职位品质的判断能力。

打造服务体验：

为求职者提供了“安心投”服务，在用户投递前、投递中、投递后三个节点分别展示求职相关的保障，降低用户求职顾虑和心理担忧，提高投递率，服务包括：

A.求职保险：求职过程中被骗造成的经济损失平台会予以适当赔付

B.隐私保护：保护用户的相关信息，并进行加密处理

C.免打扰保护：保障用户的私人空间不被打扰

在职位描述（左图）的模块后面我们加入了“安心投”，用户了解工作内容后的第一时间告知他投递后我们会有哪些保障服务，从而减少他在投递时的心理担忧。

其次是在企业规模（右图）的模块中加入了“用户评价”，露出更多真实性相关的信息辅助用户对职位/企业的品质进行判断。

同样在后续的微聊页面我们也加入了“安全投”的提示，并且在用户投递后会再次与他确认我们为他提供了哪些安全保障服务，进一步延伸用户后续的操作流程。

06.总结

其实品牌形象建立的过程就是我们与用户交朋友的过程，在这个过程中我们的个性（价值）被用户逐渐发掘和欣赏，促使我们的关系越走越近。项目初期我们可以通过一些引导、开屏、二楼等方式对品牌进行宣传和曝光，同时我们不断提升自身的产品品质，提高产品价值。中期我们需要进一步优化用户在多个维度的体验感受，提升用户价值（用户价值=产品价值-使用成本），降低用户使用成本，进而提高用户使用频次，以建立长期有效的价值连接。在这个过程中我们不断优化体验，与用户共同成长，形成牢不可破的信任价值体系，即成功搭建了一款深入人心的产品。

原文地址： 58UXD（公众号）

作者：环铁艺术家

转载请注明：学UI网》体验设计构建品牌价值-打造影响用户心智的价值连接

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

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

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

评论(0) 浏览(2199)

182021-10

这些细节创新，大厂设计师都不一定全知道！

seo达人

虽然粗看没多大问题，但确实是一个很常规的设计，没有亮点。

试想，我们是否可以在布局、图标图形、色彩质感等做一些细微的突破，这些地方稍微做些改变都可以使得界面变得更好。

再比如上面这个作品，也是同样的问题，缺乏一丝灵魂。之前看很多设计师作品集里面包装的作品，就是这样设计的。

虽然现在UI趋于模式化设计，但是我们在确保体验最优的同时时，还是可以做一些创新设计。比如布局、图标、色彩、质感、杂志化等方向发力，下面我们来看看如何做一些差异化设计。

差异化圆角层叠布局

俗话说，当然不知道如何去做创新时，可以去找一些好的概念设计，从里面挖掘一些新的设计想法，用在自己项目中。

例如上图，我们将卡片圆角化与底部地图相呼应，整个设计看上去就有了细微纵深感。如果上下滑动时，再配上视差动态效果，那么细节也会更丰富。

上图的设计也是同样的思路，圆角图片作为背景，大圆角卡片在上层叠加布局，增加细节丰富度。

再来看一些优秀案例

圆角化布局设计在功能详情页的应用。

半圆角化布局设计的应用案例，只有一个边用圆角来布局设计，另外一边直角布局。

通过上面一些案例，可以提取一些布局方案用在项目上，如下图所示。

下面这个案例通过圆角卡片来布局，贯穿所有。

看到这，大家面对改版或者0~1的探索，布局上应该有新思路了，而且很多布局都是不断尝试与打磨出来的，下面我们继续看下图标如何做差异化设计。

打破常规的图标

图标可以说在设计中非常重要，承载着品牌性格传递，表达产品的气质，但也是我们最容易忽略的地方。

如果纤细的图标看腻了，是不是可以尝试下这种粗线性图标。

再或者就是将图标logo化，设计更有趣味性一些。这些图标应用场景可以是功能页面，比如像智能家居、智能镜等场景中。

用“点”来贯穿整个图标设计，下图，韩国NAVER的图标设计，通过点与线的集合来打造记忆点。

Naver

图标与品牌色集合，这种虽然现在应用较多，但是可以从不同角度来切入。比如上图中使用填充品牌色与断线集合，形成一种不一样的设计思路。

最后一种思路图标进行品牌化设计，整套图标延续品牌DNA特征。

上图app设计，里面图标就是将品牌DNA符号延续到整套系统里面，包括底部bar的功能图标和表情符号等。

弥散光感渐变背景

很多情况下会遇到需要做详情页或者个人页面，这时候就会涉及到头像与背景的关系设计。目前设计较多的方式就是高清大图、品牌图形、渐变色等。那么还可以用下面这种思路。

使用弥散光感渐变作为背景，相对于单一的渐变色，会多了一丝细节在里面。

好了，今天分享就到这，早期我们在做创新探索时候，不要惧怕太过于概念，如果一直被这个限制，就难以打破思维的墙，做出来的设计几乎很平庸。我们还是敢于挑战自己，善用逆向思维。

原文地址：功夫UX （公众号）

作者：功夫UX

转载请注明：学UI网》这些细节创新，大厂设计师都不一定全知道！

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

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

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

评论(0) 浏览(1996)

172021-10

人工智能的十大技术及应用

涛涛

人工智能从诞生以来，其理论和技术日益成熟，应用领域也不断扩大。本篇作者给我们介绍了人工智能的十大技术及其相关应用，一起来看看吧。

人工智能发展到现在已经将近有80年的历史。近日来特斯拉也说了自己不是汽车公司，是可再生能源公司、是机器人公司、是人工智能公司，特斯拉也明确表示未来人工智能汽车自动化驾驶的方向是视觉识别+机器学习。

人工智能从诞生以来，其理论和技术日益成熟，应用领域也不断扩大，接下来我将给大家介绍下人工智能的十大技术及其相关应用。

一、问题求解

人工智能的第一个大成就是发展了能够求解难题的下棋程序。在下棋程序中应用的某些技术，如向前看几步，把困难的问题分成一些比较容易的子问题，发展成为搜索和问题归约这样的人工智能基本技术。今天的计算机程序能够下锦标赛水平的各种方盘棋、十五子棋、国际象棋和围棋。

1997年5月，IBM公司研制的深蓝(DeepBlue)计算机战胜了国际象棋大师卡斯帕洛夫(Kasparov)。另一种问题求解程序把各种数学公式符号汇编在一起，其性能达到很高的水平，并正在为许多科学家和工程师所应用。有些程序甚至还能够用经验来改善其性能。

二、逻辑推理与定理证明

逻辑推理是人工智能研究中最持久的子领域之一。其中特别重要的是要找到一些方法，只把注意力集中在一个大型数据库中的有关事实上，留意可信的证明，并在出现新信息时适时修正这些证明。对数学中臆测的定理寻找一个证明或反证，确实称得上是一项智能任务。

为此，不仅需要有根据假设进行演绎的能力，而且需要某些直觉技巧。1976年7月，美国的阿佩尔(K.Appe1)笔人合作解决了长达124年之久的难题–四色定理，轰动了整个计算机界。他们用了三台大型计算机，花了1200小时。

三、自然语言理解

自然语言处理是人工智能的早期研究领域之一，已经编写出能够从内部数据库回答用英语提出的问题的程序，这些程序通过阅读文本材料和建立内部数据库，能够把句子从一种语言翻译为另一种语言，执行用英语给出的指令和获取知识等。有些程序甚至能够在一定程度上翻译从话筒输入的口头指令（而不是从键盘输入计算机的指令）。人工智能在语言翻译与语音理解程序方面已经取得可喜的成就。

四、自动程序设计

自动程序设计是人工智能的一个重要研究领域。目前已经研制出能够以各种不同的目的描述来编写计算机程序。对自动程序设计的研究不仅可以促进半自动软件开发系统的发展，而且也使通过修正自身数码进行学习(即修正它们的性能)的人工智能系统得到发展。

五、专家系统

专家系统是一个具有大量专门知识与经验的计算机程序系统，它应用人工智能技术，根据某个领域一个或多个人类专家提供的知识和经验进行推理和判断，模拟人类专家的决策过程，以解决那些需要专家决定的复杂问题。

专家系统可以解决的问题一般包括解释、预测、诊断、设计、规划、监视、修理、指导和控制等。随着人工智能整体水平的提高，专家系统也得到发展。在新一代专家系统中，不但采用基于规则的方法，而且采用基于模型的原理。

六、机器学习

学习是人类智能的主要标志和获得知识的基本手段。香克(R.Shank)认为：

一台计算机若不会学习，就不能称为具有智能的。

机器学习的主要目的是为了从使用者和输入数据等处获得知识，从而可以帮助解决更多问题，减少错误，提高解决问题的效率。

七、神经网络

人脑是一个功能特别强大、结构异常复杂的信息处理系统，其基础是神经元及其互联关系。对人脑神经元和人工神经网络的研究，可能创造出新一代人工智能机器。

20世纪80年代以来，神经网络研究职又得重大进展。例如，霍普菲尔德(Hopfield)提出用硬件实现神经网络，鲁梅尔哈特(Rumelhart)等提出多层网络中的反向传播(BP)算法。

目前，神经网网络已在模式识别、图像处理、组合优化、自动控制、信息处理、机器人学和工智能其他领域获得日益广泛的应用。

八、模式识别

模式识别是指识别出给定物体所模仿的标本，如文字识别、汽车牌照识别、指纹识别、语音识别等。这是一种用计算机代替人类或帮助人类的感知模式，是对人类感知外界功能的模拟，使一个计算机系统具有模拟人类通过感官接收外界信息、识别和理解周围环境的感知能力。

九、机器视觉

机器视觉或计算机视觉已从模式识别的一个研究领域发展为一门独立的学科。视觉是感知问题之一。在人工智能中研究的感知过程通常包含一组操作。例如，可见的景物由传感器编码，并被表示为一个灰度数值的矩阵。这些灰度数值由检测器加以处理。

检测器搜索主要图像的成分，如线段、简单曲线和角度等。这些成分又被处理，以便根据景物的表面和形状来推断有关景物的三维特性信息。机器视觉已在机器人装配、卫星图像处理、工业过程监控、飞行器跟踪和制导以及电视实况转播等领域获得极为广泛的应用。

十、智能控制

智能控制是一类不需要(或需要尽可能少的)人的干预就能够独立地驱动智能机器实现其目标的自动控制，是自动控制的高级阶段。1965年，傅京孙首先提出把人工智能的启发式推理规则用于学习控制系统。十多年后，建立实用智能控制系统的技术逐渐成熟。

百度公司董事长兼首席执行官李彦宏认为，人工智能是具有显著产业溢出效应的基础性技术，能够推动多个领域的变革和跨越式发展。例如：人工智能可以加速发现医治疾病的新疗法，大幅降低新药研发成本；可以带动工业机器人、无人驾驶汽车等新兴产业的飞跃式发展；可以大幅提升国防信息化水平，加速无人作战装备的应用。人工智能技术将极大地提升和扩展人类的能力边界对促进技术创新、提升国家竞争优势，乃至推动人类社会发展产生深远影响。

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

文章来源：人人都是产品经理作者：汪仔2461

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

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

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

评论(0) 浏览(8464)

172021-10

中台系统基础知识-文字规范系统

涛涛

版式设计是大部分设计师再熟悉不过的一个词了，市面上很多文章都有普及过各种版式设计知识，比如：印刷中的版式设计、移动界面中的版式设计等等。但是在我做中台规范时调研发现针对中台系统文字规范内容科普的知识较少，可能是中后台设计在国内还是处于初级阶段吧。所以结合调研内容到实际工作中的总结给大家分享关于Web端文字系统的相关内容。

加拿大印刷术家罗伯特·布林赫斯特（Robert Bringhurst）在他撰写的《印刷风格的元素》一书中将印刷术定义为以持久的视觉形式赋予人类语言的技艺。在中台界面文字排版的易读性、美观度是设计师的首要任务，要创建阅读性高和较美观的中台界面文字排版是设计师们必须学习的基础知识之一。因为不论在App界面还是Web网页设计中文字内容总是能占到整个版面的80%～90%的区域，好的文字排版能够大大提高用户的使用效率。所以本篇文章将站在一个网页设计师的角度分享Web端界面中文字系统的基础知识，从基本网页中的系统字体初识、字体排版基础理论、国际化文字适配，希望大家能够合理运用在中台界面的版式中。

内容概览

网页字体应用发展

1、网页排版初期

1990年12月25日，英国计算机科学家蒂莫西·约翰·伯纳斯-李爵士（Tim Berners-Lee）成功发明了万维网，并弄清了统一资源定位符（URL），其中超文本传输协议（HTTP）和超文本标记语言（HTML）的概念后，他在Internet上发布了第一个网站。自从Internet发明以来，字体在Web上扮演着重要角色。1990年至今，网络已经彻底改变了我们的生活方式和工作方式。在最初的20年中，Web经历了许多变化，例如采用Web标准，使用CSS进行布局以及处理动态数据。虽然网络从一开始就包含文本，但直到最近几年它们才得到很好的应用。

在1990年代中期，英国字型大师马修·卡特（Matthew Carter）设计的Georgia和Verdana两款字体广泛用在基于屏幕的网页中。为了使字体在当时分辨率较低的屏幕上清晰易读，马修·卡特设计的这些字体具有X高度大、开孔宽敞的字体空间。由Microsoft专门针对网页上的文本进行处理，Georgia和Verdana首先在位图中进行设计，以适配当时网页屏幕的分辨率，最后把文字转换为轮廓字体，进行文字图形化。

1990年代到2000年代中期是网页设计的一段过渡时期网页更加图形化，系统默认自带的字体如：Georgia、Verdana、Arial、Helvetica、Times New Roman已经满足不了设计师们的设计需求。设计师们必须使用Photoshop和Illustrator等相关工具将一些特殊字体的每一段文本切成图偏提供给开发人员，但是这种方式有着很多弊端，问题主要集中于本文不可选择、复制、翻译甚至是不可搜索。其中newyorker.com可作为典型代表，其网站在使用Typekit（可提供其自定义字体库）之前，为了让网页与原印刷出版物保持一致，便使用了切图方式将特殊定制化文本进行切图处理，直到该该公司2010年11月开始使用Typekit自定义字体库后才解决字体图形化这种耗时耗力的方式。

2、自定义字体库“Typekit”

在上面提到了在Jeff Veen还未创立字体服务Typekit之前，很多时候系统自带的几种字体满足不了设计师需求，所以设计师们使用文本转图片的技术进行处理。为了解决这些问题肖恩·英曼（Shaun Inman）2004年开发了SIFR，虽然SIFR解决了图片切图问题，但其中也还是有一些问题存在，比如，太过依赖Flash，并且设置SIFR还需要掌握大量的相关知识，门槛较高。2009年Simo Kinnunen又将技术改进称为Cufón，他使用canvas和VML快速替换文本，无需Flash或图像。Cufón由两部分组成：一个字体生成器（将字体转换为专有格式）和一个用JavaScript编写的渲染引擎。虽然文本图片转化技术一直在不断完善中，但是归根结底文本图片转化技术并不是网页中的文字排版。

直到2009年Jeff Veen离开了Google并且同一年创立了字体在线服务Typekit，极大的丰富了设计们的字体选择。2011年Adobe收购Typekit（也就是现在Adobe Fonts），并且Jeff Veen也因此成为Adobe产品的副总裁，负责Creative Cloud业务，负责Adobe旗下几乎所有产品的在线体验。

3、可变字体

可变字体指的是一个字体默认状态进行多个样式扩展，他是一种含有多种变化的单一字体：即所有字宽和粗细、甚至是斜体的变化都可以包含在一个单一、高效且可压缩的字体文件中。比如说PingFang SC，如果在系统上使用，同时包含了六种字重：常规体、中等、细体、特粗体、特细体、粗体。

可变字体是由Adobe, Apple, Google, Microsoft四大巨头在20016年9月联合在波兰华沙的ATypI会议上宣布的Variable Font的字体规格OpenType，OpenType特点在于可将多个字体打包成一个字体，并且不会增大字体文件包的大小。他解决了某单个字体文件可以获取各种粗细，宽度，高度，样式和其他属性的问题，具有灵活性。可变字体为Web上的排版提供了一个跨时代的变化。目前排版软件厂商、字体设计师、字体厂商都积极地大量投入可变自己提的研究和开发设计，并且广泛运用在操作系统和印刷行业。

目前在主流的操作系统、浏览器、设计软件都在不同程度上支持可变字体。像操作系统，Mac os、iOS、Android、Wear OS、Fuchsia。浏览器Safari、Chrome、Edge、Firefox。设计界最为熟知的图像编辑工具Photoshop、Illustrator、Sketch、Figma也已支持可变字体，设计师可以使用该设计工具进行同款字体不同样式的使用。

举个比较比较典型的例子，在2019年9月小米推出了全新的 MIUI 11 系统，并带来了小米兰亭Pro动态字体系统，小米兰亭Pro字体联合方正字库联合开发。在 MIUI 11操作系统中，用户可以通过系统设置进入字体模块，拖动相应滑块即可改变手机界面用字的字体大小和字重粗细。MIUI动态字体支持文字粗细无级调节，每个人都可找到适合自己的字重，下图是MIUI 11系统中可变字体的演示：

网页中的字体

1、字体工具推荐

字体是体系化界面设计中最基本的构成之一，选择字体是一个具有创造性和情感的过程，因为不同的字体传达出不同的情感。在制定用户界面规范时科学的定义字体规范系统，不仅能够有效的表达出不同的设计风格，还能通过定义字体的字族、字阶、字重、字体颜色、字体行高，有效帮助设计师在设计界面时使用字体达到统一性和整体性，保证界面有良好的阅读体验。首先，先为大分享一些非常实用的字体网站。

1.1 Adobe Font

第一个我要推荐的是Adonbe旗下的Adobe Font，网站中有非常多优秀的字体。但是网站字体需要收费，一般是按照使用量的形式进行支付版权费，特点是可设置属性进行字体样式实时预览，并且字体比较全。

1.2 Google Fonts

在Google Fonts，你可以免费下载你喜欢的字体，并且按照你的需要在项目中使用。由于在系统中使用其他字体的唯一方法就是将字体文件导入到系统中，因此Google Fonts的下载功能非常有用。Google Fonts包含超过1400种不同的字体，其中包含最著名的：Open Sans和Roboto字体，他们是Android系统使用的默认字体。

1.3 求字体网

设计师在做设计时常常会遇到某些网站或海报使用的字体特别喜欢，但是苦恼无法获取改字体的信息导致无法下载使用，求字体网解决了此痛点。你可以将喜欢的字体进行截图并上传到网站进行字体识别，确定后他会提供出字体下载链接或者字体信息，解决设计师们喜欢某个字体而找不到的烦恼。

1.4 字由

字由也是我比较推荐的一个字体网站，个人用的也会比较多。官网将全部字体进行整理分类方便用户快捷寻找字体，并且有个分类是免费商用字体库，避免了常常困惑的设计师使用字体导致版权纠纷问题。此有网站有两大亮点，第一是此网站在设计师选用字体时有个实际运用预览效果，直观的看到字体在实际使用效果，第二是网站提供客户端下载，在客户端中点击下载以后可直接进行在设计工具中直接使用。

2、如何定义系统“字族”

在选用系统字体时需要考虑在不同系统的兼容性，大家都知道在不同的操作系统及不同的游览器中默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同。在做字体规范时需要提供一套系统完整的字族，里面不仅需要包含系统默认的界面字体，还需要一套有利于屏幕显示的备用字体，方便维护不同系统及浏览器的实现，保证在任何场景保持良好的阅读性和可读性，下面是我在做界面规范时与相关同学一起选取的界面字体。

第一部分：-apple-system是在以WebKit为内核的浏览器，比如苹果的Safari中调用苹果系统macOS、iOS、watchOS、tvOS中默认字体，目前一般情况下英文使用的是San Francisco，中文使用的是PingFang。BlinkMacSystemFont是在Chrome中调用苹果系统的字体。

第二部分：主要是提供了Windows和MacOS下的字体。其中Segoe UI针对Windows and Windows Phone等系统。PingFang SC是苹果为中国用户打造了一款全新中文字体，整体样式看上去更加简洁，字族共6个字体：极细体、纤细体、细体、常规体、中黑体、中粗体。Hiragino Sans GB是是Hiragino KakuGothic的简体中文版，由日本设计师为MacOS和iOS系统中内置字体，简体中文有常规体和粗体两种，冬青黑体是一款清新的专业印刷字体，其小字在屏幕显示时足够清晰，拥有很多用户的追捧。Microsoft YaHei是从Vista开始，微软提供了这款新的字体，它是一款无衬线的黑体类字体，并且拥有Regular、Bold两种粗细的字重，字重有效提高了字体的层级显示效果。目前这款字体已经成为Windows游览器中最值得使用的中文字体。从Win8开始，微软雅黑又加入了Light这款更细的字重，对于喜欢细字体的设计或开发人员又多了一个新的选择。

第三部分：主要是系统备用兜底字体，Helvetica Neue在没有El Capitan versions系统的电脑中是最流行的，所以作为兜底，sans-serif也是常见的兜底字体；

第四部分：主要是系统的emoji，在我们的规范中选用了'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' 针对在macOS和Windows显示emoji。

3、如何定义字体规范

在设计规范系统中字体是用户体验相当重要的一部分，因为不论在App界面还是Web网页设计中，不同的系统分辨率、不同的显示器尺寸、不同的DPI都会对最终展现的文字大小带来影响，并且文字在内容区总是能占到整个版面的80%～90%的区域，所以要根据用户使用电脑的分辨率给予用户一个比较合适的默认字号。那么这个字号多大合适呢？是12px、13px、14px还是15px比较合适呢，所以我们回到这个老生常谈的问题进行分析。

3.1 定义默认字体大小

在做规范时调研了在市面上各大较流行的网站，目前大部分文本类字体大小都采用了12px-14px范围的文字大小。另外Windows自带的点阵宋体从Vista开始只提供12px、14px、16px三个大小的点阵。所以，如果13px、15px、17px虽然每个字的空间大了1px但是点阵却没变，从视觉上会显得略稀疏，可能导致显示效果不佳。偶数字号的文字，比如12px的“中”字，去掉1像素的间距，填充了像素的实际宽是11px，文字的中竖线左右是平分的显得均衡，具有美感。如下图所示：

但是也有少部分网站使用基数作为文本大小，比如知乎正文使用15px，豆瓣首页标题下面的的简介文字使用的13px大小，我简单的分析了一下，知乎在改版之前文本类内容用的13pt大小的可能是有用户吐槽页面文字太过于密集后来统一改成了15pt，知乎和花瓣页面虽然使用的是基数但是整体效果还算不错。不过为了字体使用更加的“安全”还是推荐偶数作为文本规范。

还有些因素会比较推荐用偶数，比如说从浏览器角度上看，因为某些电脑的浏览器上如在IE6浏览器会把基数的字号自动渲染成偶数系。在一些画图软件如Figma、Sketch、Photoshop等一些画图软件在设置字体大小属性时从12px以上都是采用偶数进行快捷选择，这也形成了一种常见的习惯。

在文字规范时也借鉴了设计界大佬AntDesign的规范，Ant Design 3.0 的时候，对主字号进行了研究，饮用AntDesign的解释“我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 Ant Design 的主字体进行了一次升级，从原先的 12 上升至 14，以保证在多数常用显示器上的用户阅读效率最佳。”

同时我们也站在电脑屏幕分辨率也有过调研，在上一篇分享分享的系统布局中也提到了，目前大部分中台系统中用户使用的电脑屏幕主流分辨率分别为1440*900、1366*768、1920*1080、1280*800，因此在这些主流电脑分辨率中经过实验，14px小大的文字效果以及阅读体验会比12px更加的舒适，并且内容会更加的清晰。

总结以上几点分析我们得出，在界面中使用偶数会比基数更加的美观、安全，也比较利于设计师的使用习惯，并且在纠结使用12px还是14px字体大小的很长一段时间里我们经过调研竞品以及进行不同屏幕分辨率下字号的实验最后确定我们字号使用14px正常文本大小，12px可作为辅助文字使用。

3.2 行宽

行宽是指一行字的长度，那么在用户界面排版中我们使用多少行宽比较合适呢？引用Fusion Design的解释“从生理结构分析，人在阅读文字的时候，理解并传递到大脑的信息是有限的。用户在阅读时，目光左右上下巡视、扫描和阅读，这意味着阅读要求大量的眼球运动。行宽越长，眼睛移动的距离太长太多。宽度较大，眼动位移较大，读者阅读换行时容易串行。行宽越短，眼睛阅读折行的次数太多。行数较多，眼动跳跃次数多，读者阅读行时会感觉到文字不连续。”所以在操作界面中避免过长、行数较多的文字，阅读是大脑活动中一种最复杂的过程，比如说在操作系统中界面操作较复杂，如果出现大段的文字用户不仅要操作复杂的系统，还需要进行阅读理解大大降低了用户的使用效率。

加拿大印刷大师罗伯特·布林赫斯特（Robert Bringhurst）有一个算法是：行宽=字号x30，例如：设置字号为14px大小，那么我们建议其基础行宽是420px左右。中文一个字体宽度是14px，那么建议一行建议30个文字。注：在文字宽度规范时，为了考虑国际化的适配，避免多语言差异我们不以文字个数作为度量单位，而是以整个行宽来计算，比如说表单Title、Table。

3.3 行高

行高是指在多行里面一行文字与另一行文字之间的的间距，每行文字占用空间的高度。我们定义行距(行高) = 字号 + 行间距，而不是单指字体高度，所以文字的高度不等于字号的高度，如：字号12px，行高为22px，根据Web页面平均分配原则，行距就是从文字的顶端上移4px到文字底部下移4px的距离。如下图所示：

网页中版式原理

1、视觉层级

在页面布局分享有提过视觉层次，因为视觉层次是设计过程中的核心方法之一，对于中台的UI设计师们而言，良好的理性思维相对比感性的视觉思维更加重要，因为在UI设计师设计界面时需要把界面中很多互不相关的元素有秩序的组织在一起，正确引导用户操作与使用。那么什么是视觉层次呢？官方概括：视觉层次结构致力于一种用户能够理解的方式呈现产品的内容，以便用户可以理解每个元素的重要性级别。它可以组织页面内容，以便大脑可以根据物理差异例如：大小，颜色，对比度，样式等区分对象。

视觉层次中的“层次”其实讲的是在设计用户界面过程中设计师需要有在内容上进行取舍，保证用户使用产品时能够让用户强烈的感知内容的主次，并且内容和功能优先级的高度进行区分，有效的减少用户在操作界面时对内容需要就行二次过滤。比如说某个提示说明在页面上最高，那么此提示在界面中一眼看过去需要最被突出和强调的。如果用户界面看起来一团“糊”，那么这个设计是失败的，因为它不能有效的帮助用户进行内容筛选，导致用户还需要使用时花大量时间去阅读操作。

视觉层次分为4个基础部分，其中包含了大小对比、字重对比、位置对比、颜色对比。

同样还是用苹果官网作为案例，真心觉得官网设计太好了。苹果的设计一直以来都是引领着设计趋势，其设计被国内外用户所认可，所以就以苹果官网作为案例。其中，字重对比：苹果官网在字重上给人眼前一亮的感觉，它采用Medium+Bold的字重使得标题与详情内容产生强烈的大小对比，用户进入官网的第一眼便能了解核心内容。颜色对比：在颜色上使用黑色背景承托产品和内容，强烈的黑白对比增强了信息传播中的识别度和对比度。图文排版：在图片与文字排版中使用了文字层和图片层互相叠加的视觉效果，使得页面层次感更加的丰富。如下图：

2 格式塔定律

格式塔原理或格式塔定律是感知场景组织的规则，人们感知由许多元素组成的复杂对象时，会采用有意识或无意识的方法将这些元素安排到整个组织的系统中，而不只是单一的元素级。它适用于不同级别的感知，其中视觉部分是设计师设计界面时最能体现价值的部分。

格式塔（Gestalt）这个术语来自德语单词Gestalt，中文翻译为“形状，形式”，格式塔心理学家库尔特·科夫卡（Kurt Koffka）的一句话可以捕捉到这一运动背后的基本思想：“整体不是元素基因的总和”。官网概括：“在心理现象中，人们对客观对象的感受源于整体关系而非具体元素，也就是说知觉不是感觉元素的总和，而是一个统一的整体，部分之和不等于整体，因此整体不能分割”。格式塔理论中元素之知见的原则分别为临近，相似，连续，封闭和连接。在用户打开界面进行阅读或者操作界面时视觉的第一感受是产品的整体效果，而并不会感知到一些较细节的元素。

在设计用户界面时需要理解格式塔定律中5大定律，分别是接近、相似、闭合、连续、简单，其中两个最重要的定律分别是接近定律和相似定律，这两个定律主要描述了我们感知事物的核心方式。

2.1 接近定律

人类的大脑总是把一些细节复杂的元素分析归类，将相对靠近或有相似的连接点的内容作为一个整体，在我们的生活中有类似的在我们的现实的生活中有很多自然规律中遵守了格式塔原理的接近定律，比如说比如说每到秋天，北方的严寒气候不再适合大雁生存，这时候大雁便会飞往较暖和的南方，当人们看到天空正在南飞的大雁队伍，它们组织链接得十分严密，并且群体在同一个方向移动，所以队伍的形状在我们的大脑中将它们视为一个群组的一部分，产生人字形或一字形的图形。当你看空中一些比较特殊的云朵比如像猫、像飞鸟等图形，是因为蓬松的气体发生形变，形成了酷似动物或生活中熟悉的物体。这其实都是人类大脑通过潜意识进行脑补和整理出来的画面，如下图中的元素彼此靠近的元素归为一组，相反距离较远的元素被视为不同组。

其中在元素排布中也有一定的规律性，比如当行向间距大于列间距时，那么视觉的行排布的横向关系密切形成整体。当纵向间距大于列间距时，那么视觉的列排布的纵向关系形成整体，如下图所示：

以今日头条和优酷视频作为案例，首先进入到今日头条首页后映入眼帘的是无穷式的信息流。可以看出设计师使用接近原则对信息进行分组、组织内容和整理布局。卡片承载的内容形成模块，模块与模块之间的这里发挥着至关重的的作用，因为它引导用户眼睛朝向预期的方向，有效引导用户使用。并且其排列方式是比较典型的纵向关系，可以看出行间距小于列间距，增强了纵向关系，有助于用户阅读和分类。把重要信息流的内容模块放置中间位置，其他次要内容放置左右两列。

优酷视频是个大型视频分享平台，进入到首页同样是无穷式的视频类信息流。我们可以看到产品排列方式与今日头条正好相反，除了顶部导航以外内容区的行间距大于列间距，增强了横向关系并且以横向关系密切形成了整体，属于典型的横向关系排列。其中视频封面与下面的文本形成一个内容小组，内容小组与内容小组形成一个大分类。由于产品视频分类较多，所以从页面排版上使用横排关系将白色的空间增强了视觉层次感有效将视频类型横向区分，帮助用户更快的找到相关类型的视频内容。

2.2 相似定律

接下来再说下相似定律。人们大脑总是把一些相似视觉特征的元素被认为是一类，与不具有相似视觉特征相比较具有相似特征的元素关联性更强。在用户界面排版中具有相似功能的元素在样式上应该保持一致，比如说在操作界面中Link的颜色为蓝色，那么用户在操作界面时默认会把蓝色的文字理解为可点击Link。

设计师在设计界面过程中可以使用相似定律将元素进行元素分组、元素组织、元素布局。但是需要强调界面中相同的元素（组件），如按钮、下拉、标题、正常文本等一些基础组件需要使用相同的设计语言，保持一致的颜色、尺寸、布局等。本·施耐德曼在《Designing The User Interface》里说过：“在界面设计中，要采取一致的行动顺序”。因为用户会将视觉属性相似的内容分组，将最相关的内容彼此靠近作为小组，小组与小组之间可组合成大组也就是我们在布局中提到的模块，最后由模块组合呈现出页面形态。

西瓜视频是个性化推荐短视频平台，从下图中可以看到首页分为影视和短视频两类，这也是西瓜视频的两大特色功能。设计师在设计界面时考虑到影视和短视频这两大类视频需要在视觉感知上需要进行区分，所以设计师运用了相似定律进行设计，其中竖版视频封面与下面的文本形成一种内容小组，横版视频封面与下方内容组合形成另一种内容小组。以不同的形状来告知用户的功能类型差异。如下图所示：

2.3 小结

在网页设计中不论是视觉层级还是格式塔定律，其实都是由我们人类的大脑神经感知事物的规律总结而来，在生活中每个人潜意识都具备这种技能，因为人们总是喜欢有规律的事物，规律可以让事情变得更容易理解。同理在设计用户界面时不仅仅是为了漂亮美观，还需将界面中内容有效的进行梳理并传达给用户。

适配多语言切换

随着公司业务不断快速发展以及互联网信息的快速交流与传播，很多产品已经突破地域的边界走向了海外市场，并且个人也因为在实际项目中产品切换多语言时产生了各种各样的体验问题，所以为了提高规范体验设计师们应该提前自主探索和思考关于产品国际化的相关内容。今天主要浅谈文本适配问题。

1、预留出足够的文字空间

在实际的工作中会遇到界面使用中文时布局非常的合理，但是一切换到其他语言时出现各种折行或者是遮挡的问题。主要原因是因为文字的长度会因语言不同而异，即使是使用同类字形的语言也是如此，比如说英文“New”翻译成法语是“Nouvelle”，并且法语的感叹号前面还需要留一个空格，字符数从4个变成了8个。所以设计师在做规范时一定要考虑预留出更大翻译空间，以下是网上找的一些Bad case。

2、书写顺序

在多语言适配时我们发现很多书写系统，如阿希伯来语、拉伯语、波斯语、乌尔都语等，都是以右到左对齐方式进行字符显示，并且在相同的字体大小情况下，这些字体可能看起来比西伯来语字体要小，所以需要考虑调整行间距和对齐方式，使得不同字体在相同界面中都适用。并且使用这些语言的人口数量相当大，特别是在波斯湾地区由于石油经济发展特别迅速。对于面对中东地区出海的产品，是不能回避的问题，所以要及时作出可配性方案。

3、匹配不同行高

在多语言适配时因为不同的语言可能在同一界面中需要设定不同的行高达到最佳效果，可以定义3种行高尺寸来做多语言适配，分别为大（l）、常规（lg）、小（s）。从下图可以看出区别较大的是泰语和阿拉伯语的字型高度相差较大，可利用相对合理的行高尺寸进行匹配，比如泰语字型较高可使用大（l）尺寸作为文本行高，阿拉伯语字型较低可使用小（s）尺寸作为文本行高。

4、避免组件与文本混排

设计师在设计界面时经常遇到文本与组件的组合排版方式，但是其中会有比较多的“坑”，设计师们很容易不小心就陷入“坑”中。举个例子，比如设计师们会为了更加美观会把组件插入一段文本中间中进行混合排版，这种组合方式有几个比较大弊端。第一不同语种有不同语法顺序，比如法语形容词的后置，日语里动词的后置。第二复数问题，在英语里面，每个名词都有一个单数形式和一个复数形式，比如One picture复数是Two pictures。但在俄语里面，复数有三种可能的形式。在法语里面，有不少单词变成复数之后拼写也会改变。所以，如果用户要在句子中间输入数字这种设计就可能造成语法错误。第三有些语言里面，单词是区分阴阳性的。比如在法语里面，形容词也是有阴阳性形式的。所以如果你在句子中间插入一个下拉菜单框，那么可能又会造成语法错误。

5、小结

产品国际化题材比较大涉及到的内容也会比较广，可能需要考虑的不仅限于文本适配，还需要考虑很多的因素比如说各国的文化差异、本地格式、地区标准等等，所以今天主要站在文字适配的角度给大家分享几个做国际时需要关注的小点。

写在最后

本篇文章主要是网页中文字系统初识，网页中的文字虽然看起来比较简单但是每个内容板块拆分开都是值得深挖的。比如说文字结构、如何结合印刷理论应用到网页排版中、解刨多语言适配等等吧。本片文章还是秉着启发的态度与大家进行网页文字系统的探索，希望大家能够可根据此篇文章结合工作中实际案例举一反三，更深入地探索相关内容。在这里再次强调一下产品国际化方面内容，互联网信息的快速交流与传播使得人与人的连接越来越容易，很多产品进入海外市场是必经之路，大家可提前做好相关知识储备，还是那句话也希望自己后续可以多归纳总结与大家展开探讨分享。

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

文章来源：站酷作者：熊细辉Neo

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

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

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

评论(0) 浏览(3137)

152021-10

车载智能助手设计：智能座舱的合作伙伴

鹤鹤

前言：

随着科技的发展从家庭到办公室，协作机器人(cobots)正在逐渐出现在我们的视野，汽车车载虚拟形象也越来越多地涌现，例如：蔚来的NOMI，理想的ONE，奔腾的YOMI。虚拟语音助手的形象也越来越符合大众口味。虚拟语音助手形象通过改善用户体验和培养情感联系来增加汽车的价值。但是我们在使用的过程中不难发现，机器人的设计很容易出错，从而让我们感到无聊、生气，甚至更糟糕的情绪——害怕。

那么，汽车公司如何设计虚拟语音助手，才能创造更安全、更高效、更有回报的驾驶体验呢?

本文将通过以下几点进行阐述，让虚拟语音助手的设计创造更好的汽车体验。

1.利用UX（用户体验）来驱散对人工智能的恐惧

如果在文化的进程中，高科技在其中扮演过一个坏人的角色，那么在设计时一定要谨慎。例如，在美国，小说作家史蒂芬·金写过一本关于杀人汽车的恐怖小说，这会让用户在使用汽车的时候产生联想。

谷歌公司也深知这一点，这就是为什么早在10年前，它将其早期的自动驾驶汽车Waymo设计得如此可爱，目的是为了帮助人们更适应自动驾驶这一遥远的概念。

undefined

史蒂芬·金恐怖小说《克里斯汀》谷歌第一辆无人驾驶汽车waymo

从另一个角度来说，创建一个可爱的，温柔的，虚拟形象是为了给用户一种优越感，从而消除恐惧。

外形的设计固然重要，但是行为比外观更应该受到重视，美国时间2016年6月27日，Anki发布的玩具机器人Cozmo的产品，它的面部是一块发光显示屏（OLED），眼睛则是随心情变化的方块。因为外形相似，Cozmo被认为是皮克斯动漫《机器人总动员》中瓦力（WALL-E）的现实版。看起来比较呆萌，给人一种畜类无害的感受。并且通过笨拙的行为，展现出它呆萌的性格，大大降低了人们得戒备心理。

呆萌的机器人Cozmo

以黑绿色代表邪恶的斯莱特林学院黑绿色的Cozmo

因此即使用了一些比较可怕的颜色，例如，黑绿色。你也不会产生恐惧的心里。由此可见，行为远比外观给用户带来的感受更具有说服力，也更加直观。

当我们在设计语音虚拟助手时也是一样，无论是作为一个合作机器人，还是车辆本身，要问问自己，我想展现的AI是什么样子的，这样你就可以在它跨屏幕迁移时设计一个有凝聚力的体验。

总结：虚拟语音助手的形象要降低用户的恐惧感，适当的为用户增加优越感。

2.不要越界

Jibo是一款设计来帮助你在家工作的合作机器人，由 MIT 科学家 Cynthia Breazeal 制造。它高约28cm，重约六镑，无法自由移动，拥有电子眼睛、耳朵和声音，头部可以 360 度旋转并进行声音定位，能够讲故事、聊天和提供安慰，也可以拍照和做日程提醒。但可惜的是它失败了，因为它承诺太多，更注重情感而不是功能，比如语音和人脸识别上存在一定的误差，并没有宣传视频里演示的那么生动；智能家居中控方面，因为要通过第三方平台实现控制，实际体验并不流畅；又比如，因为起初内容缺乏、功能未得到完善，Jibo 无法看视频、玩游戏和视频通话，除了挤眉弄眼之外，屏幕成了摆设。

简单来说就是它能做的事儿和它899美元的售价不匹配，自然就没有用户愿意为他买单。

经营失败而倒闭的机器人JIBO

Qoobo是一款带尾巴的靠垫，可以通过摆动尾巴来安慰用户，虽然看起来也没有特别智能，但它之所以能够成功的原因是因为它的功能和价格合理。在满足基本需求时，“摇尾巴”的功能可谓是“锦上添花”。

深受用户喜爱的坐垫机器人Qoobo

在车载中也是如此，比如蔚来的NOMI,经常有用户反馈，nomi有的时候所问非所答，要喊出指定的关键词才可以做出相应的应答，但是它能够成功的原因是，它们能增加真正的价值，并在受控的环境中运营，在那里人工智能可以成为“领域的老板”。同样的在设计虚拟语音助手形象时，需要有一个明确的目的，那就是它能做什么，不能做什么。换句话说就是：在不影响我驾驶的前提下，帮助我完成一些额外的工作。

总结：要使虚拟语音助手成为功能清晰的服务生态系统的一部分，满足用户的基本需求。

3.展现它作为助手功能性的一面。

恐怖谷理论是一个关于人类对机器人和非人类物体的感觉的假设，它在1970年由日本机器人专家森昌弘提出，虚拟形象或机器人的仿真度越高人们越有好感，但在相似度临近100%前，这种好感度会突然降低，因为你无法分辨某物是否是人类，这会让用户产生不安的心理。虽然车内人工智能显然不是人，但我们确实要避免这个令人毛骨悚然的情况发生。在赢得用户的信任并建立联系的同时，也需要让用户知道你的界限，并对数据的收集和使用保持透明。

undefined

恐怖谷理论

令人恐惧的设计看完就喊妈妈的动画

还要注意的是在设计的过程中，要区别人和人的交流以及人和虚拟语音助手的交流的交流。

机器人再说话时会说：请，你好等礼貌用语，这样父母在使用语音助手的同时，不会担心孩子学到一些粗鲁的用语

其次，我们在与功能性动物交流时，不会用人类的用语，更倾向于使用专门的动物用语。例如，在东北赶集的人，不会对马或者驴说，往前走，不要走了。而是会说：“驾” “屡” 等拟声词来代替，一方面是为了快速的下达指令，另一方面就是区分人类用语言。

你可能会经常看到这样的新闻：某演员入戏太深，走不出自己的角色，导致发生抑郁，带来糟糕的结果。这就是用户对角色情感的过度投入，导致无法区分现实世界和角色世界。因此语言另一个用处就是：防止用户入戏太深。

总结：保持和突出语音助手该有的特征，这样可以让用户更加容易走出和进入使用场景。

4.扮演它该有的角色

paro这是一个海豹幼崽的形象，这种机器人有助于痴呆症患者的护理。通过肢体接触，可以唤醒痴呆症患者过去养育子女、饲养宠物的记忆。它的感光装置能分辨白天和黑夜，它的位置感受装置可以判断自己是处于被抱着，还是处于跟主人相对的状态。它在充电时用一个奶瓶，这和他“被扶养”的定位相吻合。

代替动物为老人治疗的Paro

undefined

正在充电的Paro

宠物机器人Lovot，当你决定要收养它们时，也要意识到它们每天半个小时闹腾，还有那被“关爱”需求，真的也许会让你累觉不爱却又割舍不了，感叹自己为什么要“养”这两个小鬼。让我们感受到，这些机器人就像人一样，它也有婴儿期，需要我们耐心教导。

宠物机器人Lovot

再比如马里奥在最早的出道作品《大金刚》中，马里奥被设定为一名普通的美籍意大利人，从他的口音(或是从他的配音演员Charles Martinet的所配的口音)来看，他的英文确确实实带有一定的意大利口音，而且从服装上也是典型的美国公民装扮。

因此，无论是外形还是功能上都要有一定的隐喻和暗示。

总结：为所有情况寻找隐喻，这可以让用户有一个连贯的想法。无论在哪中场景，都要暗示和产品相关的特性，这样用户对虚拟语音助手的角色定位才会一直保持统一。

5.让互动更有价值

在设计过程中，始终要贯穿的思维就是如何使虚拟形象对用户的情感做出反馈。通过设计引起用户情绪价值与情感体验。比如，通过简单应答，或者简单的肢体动作来达到目的。建立一个专属于用户的体验设计。比如引导用户给虚拟形象命名等。

总结：培养感情纽带，让用户与虚拟语音助手建立长期关系，让用户对合作机器人更加满意。

在未来几年内，我们预计语音人工智能的个性、年龄和性别将会多样化，车内语音助手将继续被采用，尤其是随着更多的自动驾驶功能进入市场。对于一些原始设备制造商来说，将合作机器人设计成技术的实体表现形式，以帮助赢得用户的信任，这是有意义的，当然还有其他制造商将在人机界面(HMI)中以图形方式展示人工智能，就像Siri一样，以较为抽象的方式表现出来。无论哪种形式所遵从的原则是不变的，期待大家更好的设计！

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

文章来源：站酷作者：大牛李
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

评论(0) 浏览(2100)

152021-10

未来感设计汽车大盘点（上）

鹤鹤

在灵笼中，白月奎开着奥迪在满是噬极兽的世界驰骋。小伙伴们也惊呼连连。其实，这是一款名为AI trail的奥迪概念车已经被生产，预计2030年上市，那现实中是什么样的呢？接下来，就从奥迪开始，为大家盘点未来感的汽车是什么样子的吧。

1.奥迪AI trail

这也是一辆纯粹的SUV。它有四个电动马达，每个轴距上有一个，这使它具有四轮驱动能力，它在公路上的最高速度为每小时81英里，越野范围为155英里。它的轮胎压力可以根据地形，在移动中调整。

奥迪 AI trail外观

当你坐在里面，它会给出一个令人难以置信的宽广的观察范围，她甚至可以让你看到轮胎。因为里面有足够的空间，甚至没有任何多余的显示器，它是完全由你的手机进行控制的。

把手机作为屏幕，从而达到更广阔的视野

你可能已经注意到没有大灯，但这是因为它用于照明的灯被安装在自主的无人机上，这些无人机会在前面飞行，为你照亮道路。当你在光线不好的环境野营时，你可以通过折叠无人机，手电筒等照明设备。

无人机搭载照明灯

充当照明设备的无人机

2.雷诺EZ-Go

雷诺在2018年发布了他们的电子出租车概念车easy go，同样计划在2030年面世。其设计理念是：在未来，汽车的所有权已经不在是一种趋势，当我们需要旅行时，我们只需预约一辆自动驾驶的汽车。雷诺高层表示，网约车和共享移动服务将会是雷诺的主要发展方向。当你来到一个陌生的场景，你可以透过360的窗户来欣赏沿途的风景。进入内部，内部空间可容纳六名乘客，呈U型排列车顶从前面打开，提供存储空间。并且它还有四轮转向功能，意味着它可以在城市间轻松穿梭。当然，作为更明显的旅途用车，它的车速最高限制在50m/h。对于行动不方便的乘客，它有一个可伸缩的斜坡，当你需要下车是，将自动伸向路边，让乘客可以更加方便的进出。

在城市穿梭的ES-Go

通过显示器可以看到基本信息

汽车内饰

undefined 方便进出的设计

3.terrafugia tf-x

相信小伙伴们多少在科幻电影当中看到“会飞的汽车”，我在小的时候看过一个电影《第五元素》，依稀记得家里的七大姑八大姨，嗑着瓜子，坐在炕头，讨论着“我们有没有机会坐上这样的汽车”。这部这款汽车可能在不久的将来将会满足大家的远景。

电影《第五元素》

如果你正在寻找未来的汽车是什么样子的，那么 terrafugia tf-x就是我们我们理想的设计。这款汽车售价 28 万美元起，折合人民币约为190万左右。它拥有一双可折叠的螺旋桨，隐藏在车机两侧。

TF-X外观展开双翼的TF-X

这款汽车很快就由波士顿的设计公司开发出来了，这款概念车比它最初看起来的空间要大得多，它是插电式混合动力，能够实现全自动飞行，在紧急状态下可以手控或者遥控。在动力系统上采用插电式混合动力传动系统，有两个600制动马力的电机和一个33制动马力的燃料发动机，电脑自动控制，拥有有四个座位，可垂直起降空中续航可达640 公里，最高时速为 185 公里/小时，但是它在路上的最高速度或它的范围还没有被公司宣布，即它可以飞到可伸缩的翅膀上折叠出一个连接的螺旋桨的事实。

与此同时，各国的航空当局也在讨论和协商制定管理这一新兴交通业的政策和安全标准。如果未来将会普及飞行汽车，那么开上飞行汽车是否需要飞行驾照？人们是否会花费超过100万RMB来购买？

正在倒车的Terrafugia TF-X

飞行中的Terrafugia TF-X

4.雪铁龙19_19

雪铁龙1919确实是一款具有未来设计感的汽车，它的目的是要做到其舒适性已优先于其他每一个元素，它的设计理念是未来航空工业。结合前挡风和立体化的玻璃覆盖，上半部分更像一个漂浮的太空舱。

undefined

雪铁龙19-19外观

它在车顶后部安装了激光雷达探头，主要用于在长距离行驶时的自动化驾驶。它的踏板和方向盘，是可以伸缩的。但当驾驶者想自己驾驶时，踏板会降到合适的位置，方向盘会展开。当用户不想驾驶的时候，方向盘会自动缩回，智能音箱自动升起，几乎像一个潜望镜一样，帮助用户实时检测驾驶情况，并且把信息显示在挡风玻璃上。 undefined

自动驾驶模式，信息在挡风玻璃上显示

5.辆丰田LQ

丰田LQ的设计原则是，让司机和他们的车辆之间有更加紧密的联系。所以通过加入最先进的先进的AI，称为Yuyi，将人工智能打造成你在车内最好的朋友之一。

会眨眼睛的LQ

它是全电动的，拥有SAE L4级自动驾驶系统，这意味着不需要用户的参与，因此车厢的舒适性就显得尤为重要。在座舱内的乘客被不断地监测，AI将根据司机的情绪和警觉状态来调整温度，甚至是驾驶模式。并将进一步尝试在情感上吸引司机，使他们在旅途中保持愉快的心情。车内的每个控制都是语音激活的，这代表车内几乎没有任何物理按键，所有的信息将会投射在挡风玻璃上。甚至可以调整照明水平，在空气中释放平静的感觉，AI也会选择自己的音乐播放列表，唤起它认为目前最符合你情绪的音乐。

AI根据用户心情播放相关音乐

正在自动驾驶的LQ

6.梅塞德斯-奔驰Vision AVTR

如果你想看到世界上最有未来感和最有异国情调的轻型概念车，那么你一定要看的就是这辆车。相信小伙伴们都看过《阿凡达》这个电影，无论是科幻的剧情，还是绝美的场景，都在当时引起了不小的轰动。这辆车的灵感就是来自《阿凡达》这部电影。而且契合度可谓是非常的高。

阿凡达场景阿凡达宣传海报

它外观采用了仿生设计，整体观感十分科幻。车身两侧采用了全透明设计，意在大幅提高车内视野，强调车内、车外的交互。它还使用了33瓣采用了独立的仿生襟翼，看起来像爬行动物的鳞片，可以根据不断变化的条件来调整车辆上方的空气流动。

《阿凡达》电影中的精灵树

他的轮胎，借鉴了电影中，精灵树的样式，并且它去掉了传统的圆形轮，胎取而代之的是球形轮胎，它提高了机动性，对周围的影响较小，并且能够扭转30度，这意味着汽车可以以螃蟹的方式侧向移动。

AVTR外观

可以依据气流和感应翻转的仿生襟翼

内饰以流动的波浪和花朵形状为基础，这看起来是有史以来最舒适、最高效和最愉快的旅程。这辆车会与你交谈，了解你想去的地方，在给它下达指示后，你需要做的就是坐下来，让它做所有剩下的事情。值得一提的是，车内同样没有任何按键，当你伸出手站，并且注视手掌时，按键就会显示在你的手心上，你进行移动点击等操作。

AVTR内饰显示在手掌上的虚拟按键

通过手掌来控制方向用手掌进行交互

通过对趋势的了解和分析，相信小伙伴们对未来感汽车有了新的认识和理解。目的也是为了让大家更好的把自己的理念和设计与未来汽车相贴合，亦或是产生灵感，发散思维，做出更好的创作。希望在不久的将来，无论在汽车造型，还是内饰，或是仪表等，可以看到大家充满激情的设计。

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

文章来源：站酷作者：大牛李
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

评论(0) 浏览(2387)

152021-10

案例分享 PM/UX 必看 [用户体验]

鹤鹤

讲User Research | 用户研究之前，有必要先介绍下“用户体验”。这两者是密切关联的。

作为一枚互联网老兵，先说一下历史吧。

N年前，UX Designer还不怎么流行。

随着乔帮主iphone4的横空出世，惊为天人，彻底改变了整个手机生态。于是在中国市场，各种热钱涌入，到处都是创业公司（start-up），各类APP纷纷孵出（我在上海）。这是整个移动互联网行业野蛮生长的年代。公司那么多了，那么UI，iOS开发，Android 开发等等都是供不应求的。

当然，那么多创业公司，90%都会在一年内，在天使轮的阶段死掉。能活下来的，都是壮士！现在你看看你手机上装的啥耳熟能详的APP，基本也就是那些了。

题外话：我当时的公司楼上是一家知名网游公司。某天我很快乐（KU B）的去上班（Make Money），结果就看到新闻说那家创始人CEO昨天半夜心脏病发，人没了。隔天就看到他家公司门口贴讣告了。（此处默哀！）创业不易，真心能活下来的都是壮士！

野蛮生长的年代，对于岗位要求不会那么精细。做UI的，最好你什么都会，十项全能。平面/手绘/App UI/ Web UI/H5/交互/动效/前端最好也懂一些/其他。。。

那时候少有交互岗，因为交互岗通常会被产品岗，或者UI岗兼了。但随着这些年WEB/APP越来越成熟，用户对于体验的要求越来越高。另外，随着各类海归人才带回来的国外先进设计理念。各路大中小厂对于UX交互也就越来越重视。

于是，就有了UX Design | 交互设计的专门岗位，有些也叫User Experience Design | 用户体验设计，在互联网行业，两者基本一个意思。

（我们这里不讨论用户体验的五个层次，战略层、结构层、表现层之类的。这些太理论，大概知道就行了，多说我也困。真要硬掰，那交互设计实际算是用户体验中的结构层。但在国外专业文献中，UX Design=User Experience Design。不要硬刚。：P）

“人类总是情绪化的，总是对他们世界里的产品做出情绪化的反应”

-艾伦·库珀，Cooper公司总裁，Visual Basic之父

一．什么是 User Experience | 用户体验？

通常来说，“用户体验”就是人们在使用产品时候的感受。用户体验并不仅限于互联网行业，各行各业都有。

用户体验更关注的是人和物的交互(Human-Objects Interaction)之间的联系。

“物”在互联网产品中的应用可以是Web，APP，System等。

举个生活中的例子，迪斯尼。

迪斯尼，娱乐行业吧？但它更是一家彻彻底底的体验公司，极其注重体验管理。

迪斯尼乐园为小朋友们，大朋友们筑造了一个梦。迪斯尼的体验管理，就是从造梦这个目的出发的。

对于服务人员、演职人员的要求，干净、礼貌都是最基本的。

迪斯尼对演员的要求是，你不是演米老鼠，你就是米老鼠。用户体验细致到如下：

* 只要有宾客在，演员就不能把头套摘下。之前有新闻说演员中暑了，也坚持不取下头套。（这里我们不讨论劳工权益之类的问题）因为不能毁灭孩子们的梦。

* 在同一个视野里，不能有两个同样的米老鼠。因为对于孩子来说，米老鼠只有一个！

* 全世界演米老鼠的演员，都要苦练签名。因为对于孩子来说，全世界只有一个米老鼠，签名当然是一摸一样的。

这只是演员，还有其他工作人员，还有工作以外的服务。此处不再延申讨论了。

二．什么是 User Experience Design | 用户体验设计（即UX Design | 交互设计）？

用户体验设计，顾名思义，就是为产品/服务设计一个良好的体验。用户体验设计同样并不仅限于互联网行业，各行各业都有。

举个生活中的例子，麦当劳的打包袋设计。

传统设计是这样的。

汉堡薯条什么的全部装纸袋，没有提手，每次都捏到我手指抽筋。饮料再另外装个塑料袋。

一个捏，一个提。其实是不舒服也不方便的。

用户体验好的设计可以是这样的。方便快捷，节约资源，解放手指。

（gif动图，刷新页面重播）

我们这里想说的用户体验设计，特指互联网行业。

早期的Web页，几乎就是个静态网页，就提供些信息展示。那时候用的还是asp, php, .net技术，快捷点的话有个模板套套，新闻/产品就能后台维护了。

从大概2010年以后，Web就开始越来越复杂了，APP也开始越来越精细和规范了。这对于交互的要求就越来越高，需要有一个良好的用户体验设计。

举个APP的例子。

淘宝最近对“确认收货方式”做了优化（大致在2021.9），不知道你发现了吗？

淘宝购物时，首先，在买东西付款的时候，就需要输入第1次支付密码。

最后，在收货确认时，

Before: 原来，还需要再输入第2次支付密码。

Now: 现在，只需要点击“确认”就行了，不需要再输入一次支付密码了。此次优化，就是简化用户的操作，提升用户体验。

如下图为最新优化后的截图：

如图，

Before: 原来，在Step 3中，原来还需要再输入第2次密码。

Now：现在，在Setp3中，直接从Setp3——>Setp4.

三．为什么UX Design | 交互设计很重要呢？

产品成功与否，涉及到太多方面了。战略决策、产品、内容、用户体验、技术、运营、服务、竞品情况，资金投入、运气等等，缺一不可。而用户体验/交互是其中重要的一环。

专注于用户的交互设计，大大增加了项目成功的机会。因为产品是给人用的，尤其是互联网产品，用户不会因为产品是知名品牌，就坚定不移的支持它，买它，用它。

要是产品不好用，那放弃它，也是迟早的事情了。

毕竟，能让大家都喜爱的，还不管怎么样都爱到死的，也只有RMB人民币了。

四．什么是 UX Designer | 交互设计师？

交互设计师，需要通过调查和分析等用户研究方法来设计产品，或者对产品做优化改进，以保证用户能有一个良好的用户体验。

五．UX 和UI的区别？

UI，纯粹的UI，通俗来说，就是负责好看。把产品做好看了，做精致了，让用户看得赏心悦目，心情舒畅。这是美学意义上的工作。

UX，通俗来说，就是负责好用。让整个产品流程简单又便利，用户使用产品不会有停顿和疑问，让用户使用产品的感受非常好。最终目的是为了增加用户的粘性，提高产品的流量，促进产品的转化率，为公司带来直接或间接的收益增长。

UX是产品中的重要一环。

当然，在实际工作中，如果产品——长得好看+体验好。那就是王者~

这也应该是做产品的要求和标准，也应该是设计师对自己的要求和标准。

举个两者结合的例子，摩拜单车。

（虽然他欠用户押金，虽然他已经没了，成为了美团单车。但是他的故事还是可以讲一讲的）

设计方面，

摩拜单车的联合创始人王晓峰（负责具体的研发、运营及市场工作）回忆当年做摩拜单车的时候，首先考虑的是产品和服务要让消费者有面子。

前期他做了很多市场调研（看，用户研究），当年在校园外骑车的只有三种：除了专业骑赛车的，就是蓝领工人和老年人。

想让白领阶层都愿意骑自行车，就必须要让他们觉得有面子。如果让一个白领，骑着五花八门，甚至还叮当带响的自行车上路，那是很没面子的，这种生意一定会失败。

于是，摩拜就设计出一辆金属感十足的橙色自行车，好看又酷炫。

用户体验方面，

摩拜单车能够提供给用户的体验一直有着不错的口碑，比如车身结实、开锁方便、损坏率低。但是，在夸赞的后面，用户们往往会补刀:「好是好，就是太重了。」（第一代重量为25公斤，是普通自行车重量的2倍。）

于是，为了改善用户体验（看，基于用户反馈。又是用户研究。），第二代摩拜单车在确保安全和耐用的前提下对每个零件减重，整车仅重 15.5kg。比于第一代单车「减重」了约 10 公斤。

这还仅仅是车身重量，其他各方面，轮胎，锁，链条，车座等等，全部做了优化改进。此处不再延申讨论。

回到做WEB或者APP的设计上。

中国的互联网行业并不羞于抄袭对手，现在产品同质化这么严重，靠单纯的产品创意早已经无法取胜了。

现在产品更多的核心优势是ABC——人工智能（AI）、大数据（BIG DATA）和云计算（CLOUD）。我们顶尖的算法工程师们（Data Scientist）好不容易对数据做了识别、分析和精准有效的输出。

结果在交互这一环没做好，用户找不到，看不懂，不会用这些产品/内容。你做设计的良心会不会痛？

六．用户体验设计就是需要“以用户为中心”（user-centered）而设计

不要拍脑袋决定，不要自己YY。

不然只能设计出一个你自己想要的，或者是你老板想要的产品。

举个反面案例：生活中的例子，厕所标识。

用户体验—— 正常

这张图，好理解吧，厕所标志。就算右边那个清朝的个性了点，那也是设计得不错，能看懂。

用户体验—— 差

这张图，额。鸡？让我想想，哪个是公鸡，哪个是母鸡？只要我努力辨认，我还是有机会成功上厕所的。

用户体验—— 极品差

这就是设计师自己YY的结果。

这张图，这都是什么玩意儿？大象？长颈鹿？什么意思？设计师，你给我出来，你信不信我打不死你？

这样的厕所标志，我猜都猜不出来，我只能跑到厕所门口张望，当个女流氓，看看厕所里的坑位是什么样的，我才有指望上厕所。

好了，那位设计师现身说法了，他的灵感源于动物习惯，大家弄不清楚的原因是他们不了解动物的具体习性。

长颈鹿在嘘嘘时会张开双腿，这标志着女厕所，而大象则用象鼻喷水，这标志着男厕所。他的灵感在大部分人看来太牵强，因为一般人对于这些动物习惯一无所知，用大象和长颈鹿来分辨厕所之间的区别是不是很无语？

这设计师就光顾自己玩创意了，自己YY。厕所是为了给大家带来方便的，好的设计创意是一回事，但最大的问题也是要方便众人使用的。

举个正面案例：APP的例子， AR（增强现实）。

现在AR技术已经相对成熟了，导航，家居，翻译，试妆，试鞋，地球仪都有AR。

拿AR试鞋举例子。

Before: N年前，AR试鞋还是把鞋子投到地面上，看个大致效果。（左侧Before截图大概是我3年前截的）

Now: 现在，AR技术做强了，AR试鞋就直接投到脚上，能够看到鞋子上脚的效果。对用户而言，体验更好。对商家而言，转化率会更高。

好了，用户体验就讲到这了，是不是很轻松，看看故事就有些体会了？

最后，

今年是乔帮主逝世10周年，缅怀下！原来，他已经离开这么久了。

I skate to where the puck is going to be, not where it has been.

- Wayne Douglas Gretzky

这句话简单来说，就是预判形势，提前准备。

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

文章来源：站酷作者：Lu倾倾
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

评论(0) 浏览(2010)

152021-10

B端查询列表剖析和实战

鹤鹤

什么是查询列表？

首先我们先了解下官方Ant Design对查询列表的定义：

简介：

查询列表可以查看和处理大量的条目数据，常有导航至详情的作用，

用户可在列表页对条目进行筛选、搜索、对比、新增、分析、下钻至条目完整详情页等操作。

设计目标：

帮助用户更高效的查看、处理、查找条目。

设计原则：

易读性：采用格式一致外观，突出有利于对象识别的关键信息。利用富交互分层展示信息以减少认知负荷；

可寻性：列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息；

常规布局顺序：

数据过滤 + 数据统计 + 数据列表 + 批量操作

undefined

模板页面示例：

现在有了官方解答指导，我们就先从分析模仿开始

查询列表有什么？

从四个维度开始一一分析：

一、数据过滤：

常规的数据过滤分为两种类型：

1、条件筛选：

特点【结构化+有限范围】，筛选需求和数据都是结构化的，

比如有一个用户信息表，需要筛选出性别【男】+城市【北京】+年龄段【18-24岁】的用户，就是因为信息属性可以被量化和拆解处理，我们才能多条件组合筛选（且的关系）出来；

组件：选择器（单选/多选）；

布局：上下结构（常用）、左右结构，条件多时要配合可折叠操作；

形式：区域堆叠、表头、弹窗；

2、搜索查询：

特点【非结构化+模糊/精准匹配】，搜索的需求是非结构化的，

比如还是用户信息表，需要查到一个叫【宁荣荣】的信息，你就只能去手动打字去搜索，因为姓名是开放式的信息，无法被结构化处理。

undefined

组件：基础搜索框、高级搜索框；

布局：跟随列表，常放置其左上角或右上角；

关于具体使用，搜索不用多说，遵循系统统一性原则，选择一处固定位置就好，

对于B段产品，业务本身比较复杂，筛选条件偏多，原则建议从使用高低频入手，高频显性，低频置后、折叠都可（后续可以出一片详细的筛选篇分享下）

二、数据统计：

数据统计一般作为查询列表的重要配角出现，方便用户直观了解到当前页面的统计信息。

就是列表数据提炼出来统计信息，数据名称+数值，左右、上下布局都可，

有一点强调一下，业务的数据统计要求和条件筛选联动变化，就要放在条件筛选下方，

如果统计数值是固定值，就放置条件筛选上方。

三、数据列表：

这里的列表主要陈述标准的【表格Table】形式，

表格被公认为是展现数据最为清晰、高效的形式之一。

它常和排序、搜索、筛选、分页等其他元素一起协同，适用于信息的收集和展示，以及操作结构化数据，

明显优势就是结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。

常规内容构成：

Header：标题、筛选（高频）、操作按钮、表搜索、icon（列设置、刷新、全屏）

Table-Header：复选框、序号、列名称、icon（排序、提示、列筛选、列搜索）

Table-Content：数据内容、按钮

Footer：多选数量，分页器

四、批量处理：

批量操作是作用于整个页面的操作，故放置与页面最底部，当然这个可以根据应用场景调整位置，

常见操作有【批量删除】【批量禁用】【批量导出】。

如何设计查询列表？

笔者也是从0开始接触B端设计，开始查阅了相关很多设计规范体系，一顿狼吞虎咽，依葫芦画瓢出了设计模板

下图就是依据Ant Design设计出的第一版查询列表模板

经过产品和研发评审，这样的布局表现虽说“五脏俱全”、“兼容性较好”，但是脱离了用户实际使用场景和交互路径，割裂感也很强，

举个例子，你准备盖一个房子，常规讲应该有有客厅、卧室、书房、厨房和卫生间五个空间，但你现在只是单纯用砖块砌了五个房间，大小一样，毫无顺序，想必你也不会这么盖···，我们现在从头开始，你是不是会考虑：

1、是不是进门应该是客厅，是不是应该大一点好接待客人；

2、书房是不是应该远离，减少噪音；

3、哪些房子需要窗户，窗户朝哪边好通风，阳光充足；

4、等等···

总结一句：我们设计出的交互操作&视觉呈现，要契合用户实际使用场景和路径，而不是自己YY。

怎么获取你想要的答案？调研和竞品分析。

调研可以向产品、销售、交付人员获取你想要的信息，

竞品分析可以找同类型产品进行优劣分析，取其精华。

下面列举调研和竞品分析的几个点说明下：

调研一

问：产品或销售登门拜访客户时，演示电脑分辨率是多少？客户使用电脑分辨率是多少？

答：多为老式笔记本电脑且分辨率偏小，1440*900、1366*768偏多。

机会点：上图数据来自百度统计-流量研究院也只能作为辅助参考，最终还是要看产品实际用户设备情况，为了保证页面内容尽可能多的展示在屏幕上，布局得紧凑，要优先适配小屏幕效果，所以设计稿尺寸得调整为1440*800（去除浏览器顶部页签+地址栏+Win任务栏高度，再取整）。

调研二

问：询问客户使用查询列表页面是否能高效的查看、处理、查找条目

答：查询查看没问题，就是一屏数据内容展示的太少，标题栏、筛选和数据统计占了太多高度，而且筛选也不常用，导出按钮在底部不明显，横向滑动很难用，看错行。

机会点：优化布局，筛选考虑折叠或者表头筛选，横向数据堆积能否换行展示，导出操作是否可以放在上方？

竞品分析：纷享销客CRM

优点：列表内容占主要视觉面积，筛选采用表头和自定义配置条件功能结合，列内容可自定义隐藏/显示/前置和列固定左侧，优先展示用户自己想看的信息，减少横向滚动条操作和提升小屏用户体验，将主动权交给用户，列表视图和分屏视图也满足了不同用户的查看需求，以上这些都是很好的优化方向。

竞品分析：广联达

优点：同样列表内容占主要视觉面积，高频筛选放出来，低频筛选采用折叠交互方式，用户有需要则点开【更多筛选】去操作，顶部有数据统计支持总揽，Table内容对于强关联的内容进行上下组合（节省横向空间），所有的操作按钮集合到右上角，方便用户定位操作。

undefined

总结一下：

undefined

以上就是笔者在调研和竞品分析上可以获取到的主要信息，虽说第一版套用AntD模板的设计并不理想，但对于初入B端行业的笔者来说着实重要，对查询列表的框架、功能、和交互有了基础指导和了解，才能有后续的一些针对特定业务场景的设计优化改版，凡事还是得现有基础理论支持，后面的路才会走的更远。

言归正传，下图就是针对上面的总结优化后的查询列表，相比第一版（可上划参考对比）变化还是挺大的，各位可以对照的优化点细细体会下：

1、取消面包屑（系统深度较浅），优化（减少）标题栏高度；

2、增加数据统计，区域板块使用分割线划分，减少割裂感；

3、页面操作按钮集合放置在右上角，主按钮统一在最右侧；

4、高频筛选常驻+表头筛选结合交互（这里其实还是有问题的，对于组合筛选操作并不易用，待优化）；

5、增加Table刷新和列设置操作（刷新和设置icon）；

6、列锁定（锁子icon）可以快速自定义设置优先左侧固定；

7、Table内容根据业务内容属性合并上下组合展示，节省横向面积（宁可上下滑动，也不要横向滑动，至少减少横向滑动的距离）；

这一版看起来整体架构层级依然清晰明确，从视觉角度看更丰富、更有节奏感，从交互来看也更符合用户的操作场景，新增了几个辅助功能，让用户可以根据自己的业务需要自定义配置列表内容，更有掌控感，能更高效的查看、处理、查找相关信息，这也是基本达到了查询列表的设计目标。

经过和产品经理沟通，此次优化思路和方向也很准确，获得了肯定，后续的迭代还需持续进行。

调研和竞品分析带来的好处想必各位也体会到了，凡是我们不了解不精通的，就去多看看多搜搜，总会有收获，站在巨人的肩膀上总会看的更远。

Ending

这次的分享是自己在探索B端道路上的小经历，同时也体会到一些更深层次的东西，比如设计的意义在哪，什么是好的设计，怎么才能做出“好”的产品，在此分享给各位，希望能给大家带来些思维上的变化，共同进步。

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

文章来源：站酷作者：MinFan菌
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

评论(0) 浏览(4187)

首页

什么是异步？

什么时候用异步编程

回调函数

Promise 的使用

.then() .catch() 和 .finally() 三个方法

01 作用域:使用范围

全局变量:

局部变量:

作用域链

03 函数案例

求2个数中的最大值

求3个数中的最大值

通过函数实现数组反转

通过函数实现冒泡排序

求一个数字的阶乘

求斐波那契数列

02 函数作为参数使用

04 arguments

计算n个数字的和

05 预解析:提前解析代码

函数的声明提升到作用域

把变量的声明提前

01.前言

02.事势之流 相激使然

03.找到“人物个性” 明确品牌价值

04.发掘用户感知 拆解用户认知

05.体验战略建立有价值的连接

06.总结

差异化圆角层叠布局

打破常规的图标

弥散光感渐变背景

一、问题求解

二、逻辑推理与定理证明

三、自然语言理解

四、自动程序设计

五、专家系统

六、机器学习

七、神经网络

八、模式识别

九、机器视觉

十、智能控制

内容概览

网页字体应用发展

1、网页排版初期

2、自定义字体库“Typekit”

3、可变字体

网页中的字体

1、字体工具推荐

1.1 Adobe Font

1.2 Google Fonts

1.3 求字体网

1.4 字由

2、如何定义系统“字族”

3、如何定义字体规范

3.1 定义默认字体大小

3.2 行宽

3.3 行高

网页中版式原理

1、视觉层级

2 格式塔定律

2.1 接近定律

2.2 相似定律

2.3 小结

适配多语言切换

1、预留出足够的文字空间

2、书写顺序

3、匹配不同行高

4、避免组件与文本混排

5、小结

写在最后

什么是查询列表？

简介：

设计目标：

设计原则：

常规布局顺序：

模板页面示例：

查询列表有什么？

一、数据过滤：

1、条件筛选：

02.事势之流相激使然

04.发掘用户感知拆解用户认知