192021-10

01. 3D素材

@CANAAN，作品集封面3D素材

s

02. 样机素材

@嗡嗡嗡起，高质量的手持设备样机

f

03. 平面素材

@南风知我意，潮流高级全息海报模板31款

g

04. 样机素材

@是莹莹啊，苹果13样机+高端场景样机合集+iPhone13样机

w

05. 3D素材

@落微，UI素材丨3d丨手势丨psd

w

06. 3D素材

@阿轩，11个3D图标+png+3个拍摄角度

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

作者：sky

转载请注明：学UI网》作品集这样展示，秒出效果

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

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

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

评论(0) 浏览(1977)

182021-10

CRM系统：线索的获取和分配

涛涛

CRM代表了企业对客户的管理理念和运营方法，而对客户生命周期的管理也是大家非常关心的话题。本篇文章里，作者分别从客户画像、线索获取以及线索分配三个方面分析了售前的最重要步骤，一起来看看吧。

CRM代表了企业对客户的管理理念和运营方法，所以谈到CRM大家最关心的话题也就是对客户整个生命周期的管理，而在售前部分最重要的就是：线索的获取和分配。

一、客户画像

说到CRM客户画像是绕不过去的一个名词，客户画像是指公司客户的共性关键特征，如下图所示：

CRM系统：线索的获取和分配

vipkid为例，他的主要客户画像就是：一二线城市且孩子年龄为4—12岁区间的家长。

客户画像使用方法：

1）根据客户画像寻找渠道和方法获取销售线索

比如一家做英语培训的机构就可以联合钢琴培训机构联合做公开课，两家公司的客户画像相近，就可以互通客户达到共赢。

2）根据客户画像快速筛选线索，快速定位高质量线索

比如vipkid的电话销售人员了解到家长虽然有意愿让孩子学习英语，但是孩子年龄为2岁，没有达到客户画像的标准，则可以尽早放弃沟通下一个客户。

二、线索的获取

线索的获取不外乎两个部门：销售和市场。

1. 地推团队

一般TO B的公司的获客主要渠道为地推团队例如：

2C流量+2B广告变现模式如58同城房产业务、安居客
多边平台+佣金抽成模式如美团团购外卖业务、大众点评团购业务

这种公司会在每个城市设立分公司，培养大量的地推销售人员，并划分区域给到每个销售人员负责，销售人员就是通过扫街的方式获取及维护自己的客户。

2. 客户转介绍

一般TO C的公司的高质量获客渠道为客户转介绍例如：

2C产供销模式如VIPKID、火花思维、美术宝等在线教育公司
2C免费+增值模式如游戏软件王者荣耀、交友软件网易花田

这些公司会动用电销人员成单激励、用户转介绍活动激励等方式来促使客户完成转介绍行为如转发朋友圈、拉新注册、拉新购买等来获得转介绍线索。

3. 广告流量

通过投放广告（实体广告牌广告、电视广告、搜索网站关键词投放、大V软文）吸引用户进入到营销活动页或官网进行注册，从而收集到的线索。

4. 自媒体

通过内容产出如：

客户成功案例、系列录播课程、直播课程、行业解决方案、电子书、行业白皮书，发布到抖音、快手、公众号、头条、知乎、微博等平台上，获得客户认可并吸引客户持续关注。

5. 渠道商资源采买

从渠道商获取购买，但数据准确度往往很低，需要搭建数据清洗团队，清洗数据（确认客户信息正确并补全信息、确认客户需求存在）之后才能算线索并提供给到销售。

6. 商业合作&资源互换

通过企业与企业间的客户资源的互换，实现双方的共赢；建议找目标客户群重叠但又没有竞争的企业，以最小成本甚至0成本的方式合作，互补资源，实现双赢。

7. 市场活动

如行业会议、论坛峰会、交流活动、线下公开课、展会、促销活动等。

三、线索分配

线索分配是和销售模式息息相关的，主要的销售模式有三种：电话销售、地面销售、社群销售。

1. 电话销售

电话销售依赖于CRM系统分配leads，所以电销CRM可以从新leads转化到老客户续费等环节，做到对于销售的标准化精细化管理。

1）新分leads

首次分配：

业务增长时期分配策略模型：

这种分配模型是粗放式分配，优质和低值的leads混合随机分配给不同能力的销售，可能会有一些高质量的leads分配给低能力销售导致转化失败，但是也是因为低转化的销售有能接触到高质量leads的机会带来了工作的动力。

策略模型方案：

转介绍leads分原CC
优质leads按标分配CC
一般质量leads均分CC
支持管理者手动搬动leads

业务增速降缓&收缩时期分配模型：

业务增速降缓&收缩时期首要考虑的是降本提效，所以首要的会思考如果用更少的人干更多的事情、或是同样多的线索如何能转化更多，所以使用的策略会更激进一些，可能会导致转化低的销售长时间无法接触到高质量例子，工作积极性降低，从而流失速度增加。

策略模型方案：

建立leads打分模型：按照司龄、转化分层
建立销售能力打分模型：按照转化对各个渠道分层
尝试将好的leads分配给好的销售
全部改为系统自动分配

二次分配：

二次分配是一种对于销售的惩罚手段，主要出现在以下两种场景：
超过规定时间线索没转化：掉落公海&二次分配
超过规定时间销售没跟进：二次分配

2）库存leads

激活线索：

库存leads即无法转化的销售线索经过公司多年的积累数量庞大，如果人工再次致电确认用户需求则很低效成功率也很低，方法一是有效识别，库中成交可能性更高的leads，由人工触达转化。

而这种方式就是通过推送（短信、邮件、公众号等渠道）运营活动激活客户，让客户主动再次咨询，系统ke’yi再次分配销售跟进或公海打标签方便销售主动捞取。

周期扫库：

库存leads即无法转化的销售线索经过公司多年的积累数量庞大，如果人工再次致电确认用户需求则很低效成功率也很低，方法二是通过系统功能提高触达效率降低人工售卖成本，周期性的把公海中的leads全部触达一遍，避免遗漏漏网之鱼。但缺点是需要严格制定外呼策略避免骚扰到客户。

1、预测式外呼：

系统代替人工外呼，呼通线路转接给人工沟通，节省人工外呼等待电话接通的时间浪费。

2、智能AI电话：

全部由机器人外呼及沟通，无人工介入，但往往只沟通确认客户购买意愿是否存在。

2. 地面销售

前面提到了一般TO B的公司的获客主要渠道为地推团队。这种公司会在每个城市设立分公司，培养大量的地推销售人员，并划分区域给到每个销售人员负责，这个销售人员就是通过扫街的方式获取及维护自己的客户。

所以会有个弊端，CRM无法成为销售获取线索的主要来源，所以CRM对于地面销售的管控程度比较低尤其在于新客户转化环节，一般销售都是在确定客户购买后才将客户信息录入到CRM中，所以地面销售CRM系统的销售管控环节主要在于客户的维护任务及续费任务的流程及任务管控中。

而监控方式从电销人员的电话沟通情况改到地面销售人员的地点定位打卡签到的方式。

地面销售的线索二次分配，不会像电话销售的那么灵活，一般是整个片区的商户，以片区为维度的重新分配销售。

3. 社群销售

社群销售是在线教育大班课常用的一种销售手段，也是线下奥数教育学而思培优使用过的一种比较成功的获客手段，社群主要是将一群有相似目的或需求的人聚集到一起，在群中沉浸式的接收你的观点，从而形成思维的共振而达到思想的高度统一对公司想传递的价值观的的认可及信任。

上文说到，社群销售主要是教育机构使用的销售手段，所以往往和体验课的班期有关，上同一期的体验课程的学生或者家长会被拉入同一个群中，这个群会有一个专门的销售负责。

所以社群的线索分配是和销售负责的班期排班直接关联的，除非整个班期重新销售排班一般不会更换销售。所以主要依赖于销售对于社群的维护，一般不进行二次分配。

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

文章来源：人人都是产品经理作者：东悦思考笔记

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

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

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

评论(0) 浏览(2222)

182021-10

如何把握好平面设计中的节奏感？

涛涛

如何把握好平面设计中的节奏感？来看高手的分析！

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

文章来源：优设作者：美工美邦
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

评论(0) 浏览(3338)

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) 浏览(2421)

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) 浏览(2058)

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) 浏览(2483)

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) 浏览(2165)

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) 浏览(8698)

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) 浏览(3380)

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) 浏览(2329)

首页

02. 样机素材

03. 平面素材

04. 样机素材

05. 3D素材

06. 3D素材

一、客户画像

二、线索的获取

1. 地推团队

2. 客户转介绍

3. 广告流量

4. 自媒体

5. 渠道商资源采买

6. 商业合作&资源互换

7. 市场活动

三、线索分配

1. 电话销售

2. 地面销售

3. 社群销售

什么是异步？

什么时候用异步编程

回调函数

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 接近定律

02.事势之流相激使然

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