Apple One里面有6款不同类型的应用捆绑在一起，页面开篇这6款应用图标横向平铺，随后依次翻转，接着Apple One也翻转出来，向用户强调它们被包含在该产品里。
品牌图标演化出多种圆形内容，内容还会不断变化切换，最后又融合成品牌图标，简单明了直观告诉用户这个功能可以解决用户哪些问题。
开篇在浅黄色背景上告诉用户智能家居应用被重新设计，随后不断加深的黄色房屋造型逐渐由大变小叠加起来组成了Home app的图标，引出介绍内容；通过放大品牌情感温度从而向用户传达品牌理念。
为了让更多的人使用Apple Pay，苹果向用户展示了真实的使用过程，降低认知成本，让用户更容易接受并使用。
用全屏视频内容刺激用户感官，然后内容逐渐缩放到电视内，一开始就把试听体验注入到了用户脑海中。
背景颜色及内容伴随电视中的视频一同切换，让用户明确感知产品能做哪些内容。
特写展示遥控器，随着遥控器角度变化，内容也跟着变化，就像有位销售拿着产品在你面前，详细为你讲解每一个按键的功能。
苹果钱包图标及文字逐渐放大向下移动，并将文字顶出屏幕以外；整体接着放大，钱包底子继续下移消失，只留下钱包内的彩色卡片，说明文字上升出现。
随着页面往下，蓝色卡片向上移动，卡片内文字渐显，页面整体变成蓝色，苹果巧妙的将图标元素与卖点内容结合，并通过不同颜色来区分不同内容。
滑到页面最底部，四张彩色卡片又逐渐插到钱包里，最后再强调用户去使用。
卖点先后出现，层层递进，随后产品被新功能及核心特点弹开， 将产品大、有多大、续航强以及新功能先后映射到了消费者脑海里。
产品用广角的视角依次出现，一方面展示产品颜色规格、另一方面暗示产品屏幕大。
Plus和电池一同进行充电动画，仅仅一个关键词和一个图标，就形象的描述了电池容量大的事实，紧接着更加具体的参数逐一显示，强化究竟有多大。
产品旋转运动最后合并成一个由大变小，最后出现价格，强调改产品很实惠。
手机旋转放大，原来的桌面壁纸变成了产品卖点的背景，将产品和卖点顺滑的联系在一起。
电池图标与卖点一起进行充电动画，将卖点顺其自然的表达出来。
让每一句文案丝滑的连接出现，让用户能够感知出产品低延迟的优点，接着产品侧影出现将之前内容擦除，引出处理器的强大。
就如卖点所说，产品很贴心的前后为你旋转展示它的面板，让用户看的真真切切。
水花下落被手机弹开，直观的告诉用户它是防水的。
漆黑的背景写着14Pro的标题，随后标题消失，同时产品从无限大缩小，看完这个动画才发现，原来之前漆黑背景是新款产品的灵动岛，随后灵动岛展示了在不同场景下的状态，吸引了用户注意。
产品说明内容使用新款手机墙纸进行渐变显示，加强了用户对新款产品的感知。
运用视差，营造空间感，手机和里面的内容先是很大，并且展示第一段说明内容；随着鼠标往下滑，手机缩小屏幕内容变化，营造了一个真实的场景画面，来强化新功能的卖点。
标题不断放大，文字中间的圆逐渐演变成一个圆角矩形，随后带出灵动岛功能动画，用户从头到尾都沉浸在苹果编排的情节中，用户喜欢了解新功能也就顺理成章了。
内容往下看，箭头按钮从左向右滑动，显示查看详细内容的入口，引导用户点击查看，这样做没有哪位用户会拒绝自己的好奇心点进去看看。
最开始只有大标题和一个科技感的芯片，随着页面下滑，详细内容显现，芯片伴随着分层镜头元素逐渐组装起来，展现出了产品的科技与精密。
手机背部摄像头用特写镜头伴随机身从平视到俯视的角度变化，将用户视线引到摄像头上，随后显示说明文案强化产品宣传。
开篇全屏出现一朵具有科技感的3d花朵收拢绽放的视频，随后镜头后推，2台产品旋转展开，呈现出一个展翅翱翔的造型，传达出产品性能强劲展翅高飞的势能。
处于合起的笔记本渐渐被打开，里面播放着三维动画界面，暗示用户它正在处理三维任务，随后旋转出2台电脑，关于电脑的核心参数被显示出来，告诉用户具体哪些性能有了提升。
电脑屏幕做爆炸图动画处理，形象展示内部结构，吸引用户关注产品特点内容。
多台不同颜色的电脑旋转排列，镜头不断变换角度，最后依次排在一起用侧视图来唤出标题，在营造出欢快的氛围的同时，还体现出产品多彩的特点。
颜色文案内容不断切换，电脑变换不同组合方式轮番切换展示，接着营造欢快氛围。
体现电脑薄的文案放大显示，随着页面往下，文字缩小，逐渐被电脑侧边遮住，用动态对比的方式让用户感受到电脑的厚度很薄，再往下，屏幕微抬，搭配关于屏幕旋转角度的卖点。
电脑切换颜色体现内容发生变化，旋转角度可以全方位看清新版插口的位置以及体现更方便的使用。
支持多方应用的文案在应用图标的包围中下落，下落的过程中同步显示的应用可以体现支持的应用多，最后和详细介绍文案碰撞，可以很好的衔接用户的阅读视线。
产品逐渐被放大，镜头进入内部，里面迸发碰撞的液体体现产品内部有着强劲动力。
承接上一个内容，体现刚才那么强大的动力的源泉就在你眼前，去选一个吧，伴随着芯片的光影运动，让你觉得这是一个具有魔法般的崭新器物。
深入产品内部，不同颜色的光束旋转流动，用具象的形式体现产品在散热方面的工作原理以及性能是多么强。
产品快速运动对文字造成拖尾效果，体现产品的轻，以及速度快。
文案内容居于2台电脑狭小缝隙之间，有一种压迫感，体现出新产品的实力很强大，紧接着M2芯片由大变小出现，交代出产品之所以强大得益于芯片。
屏幕里的应用在不停的变换，体现电脑在进行不同的应用操作，随后文字出现，强调续航能力很高。
2台电脑屏幕旋转变化，对比出2者间摄像头位置做了更新。
产品旋转，展现轻薄侧面，搭配携带更少，携带更多的文案，让消费者更加肯定它的轻薄。
看了苹果公司网站中的动画，不难看出，动画的核心功能就是用关联的方式强调、强化卖点
具体方法如下：
1、产品如果有多种颜色，那就尽量在画面中一起体现
2、让产品自己说话，善于利用产品的不同角度、运动方式强化产品功能特征
3、不做无用动画，让每一个动画表达明确的意图，不要让用户觉得它只是在动
4、把控文案展现在用户眼前的先后顺序，用故事把它们串联在一起，从而掌控用户阅读节奏
最后我们试想一下，如果网站中的动画内容全部变成静态，那会带来什么样的后果
1、内容会变得枯燥，卖点得不到强化，用户购买欲下降
2、静态内容很难描述一些抽象的功能，例如：如何体现产品散热很好，音质怎么个好法
3、内容太多占空，原本一个动画就能说明的内容，非要写大篇文字
行为设计就是通过一些方法来引导行为，博取用户的注意力和时间。用户每次使用产品都是一次和产品交流的旅程，在这个旅程中，我们可以通过一些方法来影响用户的决策，引导用户的行为，从而达到产品目的。
斯坦福大学的B.J.福格总结了行为模型：
从这个模型中可以看出，福格教授把行为归结为3个影响因素：动机、能力和提示
这三个因素又是以什么样的具体方法对我们的行为进行影响的呢？有以下几个方面：
动机是做出行为的欲望，是人行为的动力源泉，动机也是最难提高的。
人是群居动物，有强烈的社会属性，在判断什么是正确的时候，人们通常会根据其他人的意见行事。而且通常我们对社会认同的反应方式是无意识的，特别是在自己内心有不确定性时，最有可能认为大多数人的选择是正确的。
在产品设计中，“多数人的选择” 常常会作为一个重要的信息展现给用户。比如寸土寸金的淘宝首页推荐卡片里会把XX人付款作为露出信息。网易云音乐会把播放量当做歌单的必要信息之一。都是告诉用户，看，许多人都购买了这件商品；看，好多人都选择听这首歌，如果你也这么选应该不会错。
在 「Airbnb」 的详情页，有XX条评价，XX人推荐，都是在告诉用户，这是一间靠谱的，让人放心的好民宿，是众多人的选择，你可以放心的按下“预订”按钮。
「 权利服从研究试验 」
1961年，耶鲁大学心理学教授斯坦利·米尔格拉姆做了“权力服从研究”实验，证明了绝大多数人对权威有服从性和信任感。 实验中有一个学生单独在一个房间里，负责实验的科学家向他进行提问，如果回答错误，科学家就会要求接受实验者通过控制台对学生进行电击，电压从15V到用红字标注着危险的450V。尽管电压上升，学生尖叫时，大多数接受实验者都会有所犹豫或抗议，但还是有65%的参加者服从了科学家的指令。这些参加者涵盖了20-50岁，各种教育背景的人。这个实验证明了大多数人都会对权威信服，甚至去虐待一个陌生人。
人对权威有天然的服从性。在产品应用上，我们可以通过放权威性的信息，获得用户信任感，从而促进行为的发生。比如五常大米会把自己的官方认证码放在上面，告诉用户自己是官方五常大米；被李佳琦这种意见领袖推荐过的商品会写明自己是李佳琦推荐；
「 得物 」则提供第三方平台检验真伪后再发货，让用户买的放心。而大众点评则开创了黑珍珠甄选，作为优秀餐厅的官方认证背书。都是用“权威”触发用户的顺从心里，获得用户的信任感。
人们普遍相信“物以稀为贵”，对某样东西失去的恐惧，会比获得这样东西的渴望，更能激发人们的行动力。渴望拥有一件众人争抢的东西，几乎是一种本能。限量版的球鞋，限量版的手办都让人狂热，仿佛沾上“限量”两个字，它的价值就可以翻上几翻。
淘宝的收藏，京东的“即将售罄”等都告诉你有限的货物已经是低库存状态，已经快要卖完了，你若再不快点购买就很有可能会失去拥有它的机会，来增加紧迫感。
而商家经常推出的限时优惠、限时秒杀功能，则是用营造时间的稀缺感，告诉用户时间有限，再不买便会错过这难得一见的低廉价格，促使用户马上行动。
「 舒兹多巴胺试验」
剑桥大学神经科学教授沃夫蓝.舒兹（Wolfram Schultz）做了一个实验，研究脑内奖赏系统。这个实验也很有趣，它不仅可以作为预热行为的论证实验，还可以作为行为设计另一个重要模型峰终效应的论证实验多巴胺是大脑中传递兴奋、开心的物质。可以引起激动感、迫切感或渴望感。猴子每次在得到香蕉之前都会先点亮一盏灯，而后才会得到香蕉，几次过后，研究人员发现，每次灯亮时猴子分泌的多巴胺越来越多，而在得到香蕉时分泌的多巴胺越来越少。多巴胺分泌峰值是在亮灯时。这种期待的快感比实际吃到的快感更强烈。
「 淘宝试妆 」 用AR技术让我提前体会到的“拥有这只口红”的快乐。在贝壳用AR看老破小的时候，因为房间破旧杂乱给房子的感官大大减分，但经过一键AR装修后，仿佛看到了我拥有这套房子改造之后的样子，怎能不心动。
「 海淘的APP考拉 」 在让我续费会员时，会告诉我之前购买的会员卡为我省了一笔大钱，用300多元卡费省下1989元是多么明智之举。所以，“放心续费，这波不亏”。同时买会员卡还可以领其它家会员，续费还可以用红包低价购买我常买的东西，统统都是在告诉我续费会员卡的价值。
「 拼多多的月卡 」让我印象深刻，在让我开月卡的详情页，会直接把红包列出来：给4张5元的无门槛券，还有价值174的别的券。这些明明白白的优惠只需要7.8元就可以拥有三个月，简直不要太划算。
“宜家效应”是由美国行为经济学家Dan Ariely提出。源自有很多人热衷于购买宜家的半成品家具，付出劳动自己进行组装，并为此感到成就感。 当人们对某件事物的投入越高，对它的感情就会越深，就越会认为它有更高的价值。宜家效应是一种认知偏差，也是一种内在动力。
在产品设计中任务系统勋章设计正是用了这个原理 ，
比如QQ的能量值，需要通过互动、购买等行为获得的，这图标本身的意义是不大的，但它却是在qq中行为活动的象征，炫耀的资本；
想要获得运动软件KEEP中的勋章，就要付出体力：进行。这些勋章不仅仅只是一个标识，因为我的付出，让它们每一个都很有意义。
好奇心也是人的一种内在动力。 激发好奇心，唤醒用户兴趣，促使用户进行下一步行动。
尤瓦尔·赫拉利的著作人类简史中里面有个观点：
人类发展成尼安德特人之后有一部分发展成智人，另一部分没有。是什么让尼安德特人发展成智人呢？是好奇——强烈的窥探欲和交流欲，让尼安德特人慢慢发明了语言，最后成为智人。好奇心，是人类本能。
比如「 知乎 」，首页信息流都是用问问题的方式勾起用户对不同内容的好奇心，是点进去查看的动力。社交软件Soul则通过好奇心驱使用户进行多维度的灵魂测试，看看自己是个什么样的灵魂以及需要什么样的契合。
淘宝的收藏，京东的“即将售罄”等都告诉你有限的货物已经是低库存状态，已经快要卖完了，你若再不快点购买就很有可能会失去拥有它的机会，来增加紧迫感
从福格行为设计模型里面可以看出，用户对做一件事情的能力越强，干扰和纠结越少，能力门槛越低，这个行为就越容易触发成功。
比如很多软件在截图之后会直接弹出分享或下载选项，让我在当前页面便可以进行操作。 在登录注册时很多软件可以直接记录手机号，让用户可以不用输入信息一键登录，减少操作步骤，促进登陆行为的发生。
有研究证明一个成年人的阅读速度大约是每个字250毫秒，多行的文字会给人造成压力，专业性文字会让人觉得难以理解。
一个小程序中的一个删除确认弹窗，之前的有个版本放了大段文字想要解释如何把删除的任务从回收站复原，在做调研时发现到这个流程时用户就会卡住，阅读这长段的文字，双眉紧簇，不知如何是好。
美国认知心理学先驱，G.A.米勒 做了一系列的实验，得到了得出了人类工作记忆的上限徘徊在7+-2项。称为“米勒定律”。后来的科学家们重新评估回忆结果并修正实验方法后，目前的数据表明，真实的工作记忆是4到5项。
在「贝壳APP」中，对用户提问不能接受最老的房子，给出的选项并未对时间做过多的细分，可以让用户用最快的速度分辨信息做出选择，不耽误继续浏览信息流。在租房提示面板中看房时间和入住时间也只给出4个选项，让用户快速阅读快速选择。
同样是做用户反馈，「 饿了么 」使用了简洁的文案和2个选项，「 美团买菜 」择用了两行文案和一个很多选择的选项，相比之下，美团买菜的用户调研让我太有压力了
有时会因为某些原因不得不给用户提供多种选择，过多选择带来的内心纠结和思来想去往往只会拖延行动，甚至还会让行动不了了之。因此
「 贝壳APP 」会帮助用户做房源对比，在价格，户型，面积，朝向，装修等等方面进行对比，帮助用户进行更好的决策。「 喜马拉雅 」会在我听完一个节目后根据我近期所听内容推荐我可能喜欢的内容，而不用用户再去费心费劲的搜索。
对于用户想做，但能力又不足的事情，降低门槛可以有效的促进用户行为的发生。
比如「 微信读书 」的无限卡兑换门槛很低，读1分钟，读1小时，读3小时就都可以兑换，除此之外还有很多很多的常驻活动都能兑换无限卡，降低读书行为的门槛，让没卡这件事，尽量不要成为读书的阻力。
「 京东支付 」会有京东白条的选项，可以分期付款，降低消费能力的门槛，促进购买行为的发生。
提示是提醒行动的信号，仿佛在对你说“现在就行动”，它必须是个明显的存在。大多数人都无法抗拒的想要点APP上的红色数字标签，它们就是被刻意设计出来吸引注意力，促使我们行动的。
比如「 闲鱼APP 」首页的标签栏中，把卖闲置这个按钮做了颜色和形状的特殊处理，让它成为底部栏中最与众不同的一个，吸引用户触发点击。美团优选“新人礼包”弹窗用鲜明的高饱和度红黄配色，让用户满眼都是“它”
编写程序是为了让我们更高效的处理问题，但在生活中我们常常遇到一些重复性的动作，也就是当我们希望一遍又一遍的执行多次代码，但是每一次执行代码的值有不同的时候我们就可以使用循环语句来解决问题。
JavaScript支持不同类型的循环:
循环：具备的四个条件
do...while语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。
语法:
while(条件){
需要执行的代码
}
比如:
//打印0~3
let n = 0;
while (n < 3) {
n++;
}
do...while语句创建一个执行指定语句的循环，直到condition值为 false。在执行statement 后检测condition，所以指定的statement至少执行一次，理论上,所有的while循环都可以使用doWhile
语法:
//初始化条件
var index = 0;
do{
//递归条件
index++;
//循环体;
}while(条件);//同样的这个条件是一个Boolean
比如:
//列出1~10之间的所有奇数
var index = 0;
do{
index++;
if(index % 2 == 1){
console.log(index);
}
}while(index<10);
比如:
var a = 10;
//while循环
while(a<4){
console.log("执行while循环");
}
//dowhile循环
do{
console.log("这是doWhile循环");
}while(a<4)
for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。
语法:
for(初始条件;循环条件;迭代条件){
//循环体
}
比如:
for(var i = 0 ; i < 10 ; i++){
console.log("输出第"+i+"次循环");
}
上面的执行顺序如下：
for...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
语法:
var 对象名 = {}
for(属性名 in 对象名){
//循环体
}
比如:
var info={name:"xiaoming",sex:"man",age:18};
for (x in info){
txt=txt + person[x];
}
for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
语法:
for (属性名 of 对象名) {
//statements
}
比如:
var arr = ['nick','freddy','mike','james'];
for(var item of arr){
console.log(item);
}
拓展
- 拓展1 数组的长度 数组的名字.length
- 拓展2 数组的元素当中 可以是不同的数据类型
来源：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
前言：
本次案例是一个基于 Vue2 的全局事件总线通信的仿 Github 用户搜索模块，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（发送请求时需要将输入的用户名称绑定替换掉xxx），如果对全局事件总线不太熟练的小伙伴可以看这篇文章：http://t.csdn.cn/oHEOW
http://t.csdn.cn/oHEOW
代码共分为了两个子组件，一个是搜索组件（Search），另一个是列表组件（List），其次search组件中输入框v-model双向数据绑定，点击搜索后开始查询，其中过程分为了四步：第一是未搜索的欢迎页面背景，第二是请求未加载出来的loading背景，第三是渲染用户列表，第四是请求失败的报错提示页面背景。
绑定自定义事件在List组件中，data中的数据是定义了userinfo对象来存放其四个状态的布尔值，后续的数据传递是直接传递userinfo这个对象，使用 $on 绑定自定义事件 getuserinfo，当这个事件触发时执行后面的箭头回调函数，将传递来的对象接收并覆盖掉data中原有的四个状态布尔值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list组件收到了传来的用户数据',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
点击搜索按钮即可使用 $emit 触发自定义事件，在请求成功前会将 isloading 改为true，其余改为false进行数据传递，传递给 list 组件后期就会显示出loading的背景页面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
-
前言：
本次案例是一个基于 Vue2 的全局事件总线通信的仿 Github 用户搜索模块，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（发送请求时需要将输入的用户名称绑定替换掉xxx），如果对全局事件总线不太熟练的小伙伴可以看这篇文章：http://t.csdn.cn/oHEOW
代码共分为了两个子组件，一个是搜索组件（Search），另一个是列表组件（List），其次search组件中输入框v-model双向数据绑定，点击搜索后开始查询，其中过程分为了四步：第一是未搜索的欢迎页面背景，第二是请求未加载出来的loading背景，第三是渲染用户列表，第四是请求失败的报错提示页面背景。
绑定自定义事件在List组件中，data中的数据是定义了userinfo对象来存放其四个状态的布尔值，后续的数据传递是直接传递userinfo这个对象，使用 $on 绑定自定义事件 getuserinfo，当这个事件触发时执行后面的箭头回调函数，将传递来的对象接收并覆盖掉data中原有的四个状态布尔值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list组件收到了传来的用户数据',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
点击搜索按钮即可使用 $emit 触发自定义事件，在请求成功前会将 isloading 改为true，其余改为false进行数据传递，传递给 list 组件后期就会显示出loading的背景页面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
来源：csdn 蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~ 希望得到建议咨询、商务合作，也请与我们联系01063334945。 分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
目录
1、基本介绍
▶ 概述
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
我们之前也学习过后端的框架 `Mybatis` ，`Mybatis` 是用来简化 `jdbc` 代码编写的；而 `VUE` 是前端的框架，是用来简化 `JavaScript` 代码编写的。前面的综合性案例，里面进行了大量的DOM操作，如下
使用 `VUE` 后，这部分代码我们就不需要再写了。那么 `VUE` 是如何简化 DOM 书写呢？基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们是将关注点放在了 DOM 操作上；而要了解 `MVVM` 思想，必须先了解 `MVC` 思想，如下图就是 `MVC` 思想图解
其中的C 就是咱们 js 代码，M 就是数据，而 V 是页面上展示的内容，如下图：
`MVC` 思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。接下来了解`MVVM` 思想，如下图是三个组件图解：
图中的 `Model` 就是我们的数据，`View` 是视图，也就是页面标签，用户可以通过浏览器看到的内容；`Model` 和 `View` 是通过 `ViewModel` 对象进行双向绑定的，而 `ViewModel` 对象是 `Vue` 提供的。双向绑定的效果：下图是提前准备的代码写出来的，输入框绑定了 `username` 模型数据，而在页面上也使用 `{{}}` 绑定了 `username` 模型数据
通过浏览器打开该页面可以看到如下页面
当我们在输入框中输入内容，而输入框后面随之实时的展示我们输入的内容，这就是双向绑定的效果。
▶ 快速入门
Vue 使用起来是比较简单的，总共分为如下三步：
1. 新建 HTML 页面，引入 Vue.js文件
<script src="js/vue.js"></scrip>2. 在JS代码区域，创建Vue核心对象，进行数据绑定
创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
● `el` ： 用来指定哪个地方的标签受 Vue 管理。 该属性取值 `#app` 中的 `app` 需要是受管理的标签的id属性值
● `data` ：用来定义数据模型
● `methods` ：用来定义函数。这个我们在后面就会用到3. 编写视图
`{{}}` 是 Vue 中定义的 `插值表达式` ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。
▷ 整体代码如下：
2、Vue 指令
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
▷ v-bind & v-model 指令
▷ v-bind
该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化，例如：
<a v-bind:href="url">百度一下</a>上面的 `v-bind:"` 可以简化写成 `:` ，如下：
▷ v-model
该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：
<input name="username" v-model="username">▷ 代码演示：
通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据
▶ v-on 指令
我们在页面定义一个按钮，并给该按钮使用 `v-on` 指令绑定单击事件，html代码如下：
<input type="button" value="一个按钮" v-on:click="show()">而使用 `v-on` 时还可以使用简化的写法，将 `v-on:` 替换成 `@`，html代码如下
<input type="button" value="一个按钮" @click="show()">上面代码绑定的 `show()` 需要在 Vue 对象中的 `methods` 属性中定义出来
注意：`v-on:` 后面的事件名称是之前原生事件属性名去掉on。
例如：
● 单击事件 ： 事件属性名是 onclick，而在vue中使用是 `v-on:click`
● 失去焦点事件：事件属性名是 onblur，而在vue中使用时 `v-on:blur`▷ 整体页面代码如下：
▶ 条件判断指令
接下来通过代码演示一下。在 Vue中定义一个 `count` 的数据模型，如下
现在要实现，当 `count` 模型的数据是3时，在页面上展示 `div1` 内容；当 `count` 模型的数据是4时，在页面上展示 `div2` 内容；`count` 模型数据是其他值时，在页面上展示 `div3`。这里为了动态改变模型数据 `count` 的值，再定义一个输入框绑定 `count` 模型数据。html 代码如下：
▷ 整体页面代码如下：
通过浏览器打开页面并在输入框输入不同的值，效果如下
然后我们在看看 `v-show` 指令的效果，如果模型数据 `count ` 的值是3时，展示 `div v-show` 内容，否则不展示，html页面代码如下
浏览器打开效果如下：
通过上面的演示，发现 `v-show` 和 `v-if` 效果一样，那它们到底有什么区别呢？我们根据浏览器的检查功能查看源代码：
通过上图可以看出 `v-show` 不展示的原理是给对应的标签添加 `display` css属性，并将该属性值设置为 `none` ，这样就达到了隐藏的效果。而 `v-if` 指令是条件不满足时根本就不会渲染。
▶ v-for 指令
这个指令看到名字就知道是用来遍历的，该指令使用的格式如下：
注意：需要循环那个标签，`v-for` 指令就写在那个标签上。
如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：
▷ 代码演示：
通过浏览器打开效果如下
3、生命周期
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数
看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 `mounted` 就行了。
`mounted`：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。
1、基本介绍
▶ 概述
Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。
Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~
如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。
我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是：元素 - 全球最受欢迎的 Vue UI 框架 (eleme.cn)
进入官网能看到如下页面
接下来直接点击 `组件` ，页面如下
2、Element 布局
Element 提供了两种布局方式，分别是：
● Layout 布局
● Container 布局容器▷ Layout 局部
通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。
在左菜单栏找到 `Layout 布局` ，然后找到自己喜欢的按钮样式，点击 `显示代码` ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 `head` 标签内，将html标签拷贝到 `<div id="app"></div>` 标签内。
▷ 整体页面代码如下：
现在需要添加一行，要求该行显示8个格子，通过计算每个格子占 3 栏，具体的html 代码如下
▶ Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。
如下图是官网提供的 Container 布局容器实例：
该效果代码中包含了样式、页面标签、模型数据。将里面的样式 `<style>` 拷贝到我们自己页面的 `head` 标签中；将html标签拷贝到 `<div id="app"></div>` 标签中，再将数据模型拷贝到 `vue` 对象的 `data()` 中。
▷ 整体页面代码如下：
▶ 完成分页条展示
在 Element 官网找到 `Pagination 分页` ，在页面主体部分找到我们需要的效果，如下
转自：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
大家好，我是清风。今天给大家分享一个项目中遇到问题解决问题的案例，编程其实就是一个思考的过程，缺少思考就没有灵魂，遇到问题先静下心去思考，想到方法后再去实践。我们要学会灵活变通去解决问题，掌握方法，这样才能举一反三，临危不乱，遇到所有问题都能很好地去解决。
事情是这样的，做的一个答题小程序，要求在后台编辑题目，编辑题目是用的textarea文本域，即输入的是文本内容，配置之后小程序里查询显示后台配置的题目列表。
当然在测试时后台去配置文本内容，小程序显示是没有问题的。因为配置的题目是纯文本，小程序里也是直接在text里显示的，没有问题。
后台配置题目
小程序显示题目
问题往往只有在用的时候才会发现，用户或管理员的各种操作才能显现出各种问题。现在小程序里已经不能正常显示了，有些显示的是html格式富文本格式，有些不显示。显然和需求大相径庭，已经出现问题了。
如上图，在用的时候因为是从word文档里直接复制过去的题目（事先在word里整理好了题目，由于各部门工作对接，先是在word文档进行审核），直接复制会把富文本内容也携带过去，携带过去的当然也有style样式，小程序里不显示的原因是富文本的字体颜色是黑色字体，和小程序面背景都是黑色，导致看不到文字。打开控制台调试，问题确实是这么出现的。
word文档编辑的题目会出现不同的富文本的样式格式，这都会导致小程序的不正常显示。
富文本的文字颜色是黑色，这导致的小程序页里题目的不显示。
既然后台有可能出现富文本，我们直接把小程序题目的渲染方式换成富文本渲染，这样就算是纯文本也可以显示的。而第二个问题，由于小程序页面背景颜色是黑色，所以题目的字体颜色不能是黑色，我们做一个查找替换，把style样式里的字体样式替换掉就可以了。
样式可能是各种各样的，通过查找style样式里的字体样式考虑的匹配太多了，比如说color属性值可以是rgb形式，也可是rgba形式，也可能是#号颜色值形式，还有可能是英文形式颜色，所以不可取。我们换一种思路，直接把style属性替换掉，即查找到style，换成一个无效的属性名。案例中我们替换成了c，c是一个无效的属性，不会触发节点的查找和计算。
replace函数
我们用到replace函数，replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
参数
请注意，regexp/substr 是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp对象，返回值是一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
that.setData({
_list: res.data
})
let data = that.data._list
data.forEach((element, index) => {
var stemContent = '_list[' + index + '].stemContent'
that.setData({
[stemContent]: element.stemContent.replace(/style/g, 'c')
})
element.choiceTopicVos.forEach((item, i) => {
var listCheck = '_list[' + index + '].choiceTopicVos[' + i + '].optionDes';
that.setData({
[listCheck]: item.optionDes.replace(/style/g, 'c')
})
})
})
用到的replace函数，进行了字符串的查找替换，查找到style属性，把它替换到了无效的属性c，没有了样式属性，从而达到了去除内联样式的效果，经过调试，完美解决问题。
这是一个小问题，我为什么要拿出来说呢？抛去开发的测试流程不说，我认为它能引发一些思考。写代码的过程必须是一个思考的过程，怎么样更好地去实现效果，怎么样更简单有效地解决问题，怎么样优化，要去考虑一个大的方面。善于发现问题，解决问题，并不是说用了什么高级语言就鄙弃了思考，机器语言是相通的，开发中各种各样地应用才是魅力所在。编程是一门是艺术，最重要的是你怎样去巧妙地运用，就像解一道数学题，精绝巧妙的解法会让人眼前一亮，增色太多。同样都做出来了，但是你做的就显得十分优雅！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。
// 为什么要数据可视化
数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。
举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律
关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。
一、选择适合的图表
数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。
1. 分析数据关系
根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。
构成关系
构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。
常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。
关键词：“占比、比例、百分比”
比较关系
比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。
常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。
关键词：“增减、升降、涨跌、波动”
分布关系
利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。
常用图表：散点图、热力图、雷达图等
关键词：“随着……而变化、A/B之间的相关性、交/并集”等
关联与流转
流转关系是B端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。
常用图表：关系图、桑基图、漏斗图、进度图等
关键词：“流程步骤、留存、转化、关系”
2. 分析数据特征
按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。
变量特征
分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。
维度特征
多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类
层级特征
多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：
例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。
流程特征
流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。
二、强化视觉层次
选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。
1. 强化数据特性
使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差
2. 色彩视觉传达
除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。
我们在之前的文章里有介绍过图表的取色模型，通过调整颜色HSL值的区间，可以得到以下三种意图色板：
那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。
定性型：使用色调来进行分类
数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：
定量型：使用深浅色板强调内在顺序
如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。
三、图表中的响应式设计
B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。
1. 布局框架适配
在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。
如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。
2. 图表元素适配
要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。
3. 极值适配
因B端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。
还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。
// 结语
数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、项目背景
语音搜索场景在功能不断迭代的同时，也在探索更年轻化的玩法、传递更多元的体验感受。在产品初期，我们尝试在语音搜索场景下增加AI伙伴的形象，虽然线上版本已经实现，但从产品形态以及用户反馈上看，还没有达到可情感互动的效果。所以在本次迭代上，我们着重从情感联结、闲聊互动的维度，对语音搜索进行创新性尝试。
二、设计挑战与目标
围绕项目背景，从现在语音搜索的用户行为与框架来看，有几个比较明确的问题：
因为前期在语音搜索的优化中，已经尝试在面板中引入AI形象，上线后用户反响强烈，用户的行为中聊天、互动的诉求也明显增加。由此可见，满足用户对AI伙伴的情感化诉求是十分有必要的，同时语音搜索引入AI伙伴是体现同行业差异化的有力创新点，从行业报告《2021年中国智能语音市场分析报告》中，也阐述了打造沉浸感语音搜索体验与引入AI是目前智能语音市场的发展趋势。
综合以上原因，设计团队在与产品讨论过后，达成本次升级的核心目标：
三、设计举措
1、构建认知 - 语音搜索基础框架升级
在旧页面中，语音面板限制了人物与按钮的展现，人物既要承载功能反馈又需要作为物理操作按键进行点击操作，与用户认知相悖且也不利于功能扩展。因此在新版本设计中，需要明确“人”在语音搜索里的属性，以及AI伙伴与语音搜索的关系。
我们将语音搜索页面框架分为主要功能与辅助功能区。从旧语音面板中剥离出人物，并保留收音球在面板中做物理交互功能（发起收音、停止收音操作），利用AI伙伴的人物属性，打造智能拟人的交互反馈，满足用户情感诉求。以“人”为中心，最大化展示AI形象，增强情绪传递感的同时保证框架可拓展性。
同时，将原堆积在面板中的功能与信息按优先级归位，确保页面信息清晰易读、功能操作热区无重叠、信息反馈区无干扰。新框架上线后，AI伙伴互动与语音搜索的认知关系更加清晰，语音搜索跳框量明显增加，AI伙伴带动面板整体导流增加，面板退出率下降。
2、引入情感 - 全场景情感化体验提升
除了通过框架层面进行认知优化之外，为营造更贴合“人”的互动体验与情感建立，我们又根据语音场景对每个状态进行了情感体验升级。改版上线后，用户闲聊诉求和互动点击行为均有所提升，从而验证情感化的体验提升，满足了用户互动诉求。
1）情感化引导提示：视觉上人物破框展示配合AI招手/比心的动作展示，不再是图片，而是可以对话的实体，同时使用年轻化的引导语气拉近与用户间的距离，增加数字人曝光，建立新用户心理预期，激发兴趣点提转化。
2）互动提示规则升级：围绕“人”的真实情感，通过弹出气泡的方式模拟AI伙伴状态，比如听歌、读书、游戏。以此引发用户点击或进行互动行为尝试。并且配合AI伙伴升级引导规则，使引导能够根据不同场景进行适配，保证其既可以承接语音常规引导功能，又可以承接负一楼聊天互动，点击气泡可跳转对应负一楼场景、联动数字人语境内容，避免造成场景情感化割裂。
3）增加“AI伙伴”情感反馈：增加人物动作、丰富情感化动态反馈，想要模拟更真实的“人”的状态，就需要满足更多拟人反馈。将语音搜索常见场景划分为聆听、识别解析、异常状态、指令响应、引导等5种状态。对应不同的状态，规划相应的数字人反馈动作或组合使用方式，可复用拓展其他相关场景，为设计与开发提效。
3、感知升级 - 营造沉浸视觉氛围
确定了产品主要改版方向后，通过对目标的提炼，提取设计关键点「年轻化」与「情感化」，配合AI伙伴形象，需要呈现出轻松活力的氛围感，设计中运用了大面积的毛玻璃质感，使场景更加轻盈、沉浸。通过对色彩的运用来演绎年轻的视觉效果，诠释语音搜索年轻化的设计突破。
1）定义视觉风格：围绕改版目标，定义设计关键词，由关键词延伸设计风格要点。
2）形色字构质动：从「形色字质构」5个方面提炼设计特征。
基于视觉方向及特征提炼，在质感、形状、颜色三个设计中改动最大的方向详细描述。
考虑到语音搜索场景日后的拓展，色彩上希望可以营造给用户一种轻松柔和的视觉氛围，并且元素的色彩需要与AI伙伴服饰相呼应，从而使AI伙伴形象更加灵动、场景搭配更加和谐生动。
①基础色彩范围制定：
以度晓晓为示例，遍历目前线上所有度晓晓服饰装扮，对色彩进行归类处理，从中提取主题色系，从搜索色库中对应选出主题色环。
②如何在数字人装扮中提取主体色：
我们需要把色彩量化，建立特定场景取色规则，根据规则层层筛选，我们可以从中获取N种主体侯选色。
③校正主体色，与搜索智库色彩形成映射关系：
通过对数字人装扮的色彩分类，我们以H值为标准，通过调整S值与B值，划分了12个色相，设定对应色系的H值区间范围，如智能取色色值在该色相区间范围内，且吸取到的候选色个数最多，就在对应的色库卡中选取主体色。
校正原则：色相必须保持是同类色、保持感官明度同频、保证视障人群的识别度
④建立辅助色搭配规则：
为了保持背景层的色彩氛围营造，保证其具有清晰的识别度，我们以主体色为起点，选择了颜色相对较多的邻近色，在色温上保持整体色调的一致性，其次利用对比色和互补色，选择更加丰富多元的色相，制造更强烈的色彩对比，以保证满足各种使用场景下对色彩的需求。
⑤组件化思维拆解页面元素：
在梳理了智能取色机制后，我们也在思考，语音面板涉及到的元素过多，往往会面临不同场景不同适配的情况出现，那么在做到视觉减负的同时，如何能灵活的替换对应元素呢？
我们以组件化思维去拆分设计，进行立体化的分层，将引导层（热词推荐引导关注）、信息展示层（承接语音各类状态与信息）、形象层（强化AI伙伴智能感知）、背景层（烘托视觉氛围感）罗列出来，各场景可根据需要进行颜色延展，保证视觉样式达成横向统一，呈现出更加丰富的视觉内容，避免审美疲劳。
总结本次语音搜索的改版升级，我们通过“构建伙伴认知、满足情感互动、增强沉浸体验”等手段，增强AI伙伴的曝光率，进一步向用户传达智能搜索的感知，从而促进搜索行为转化。
构建认知过程中强化AI伙伴形象，增强语音搜索功能拓展性；同时结合“情感化”等全场景引导手段，营造更贴合“人”的互动体验与情感建立，对每个状态进行了情感体验升级；最后重新定制视觉风格，围绕「年轻化」关键点对整体氛围进行强化，让语音搜索场景更加年轻、有氛围感。本次改版上线后，搜索行为、互动行为均有所提升，用户体验也得到了显著提升。
四、写在最后
我们正处于数字化快速变革的时代，传统工具的基础功能已不再满足用户的诉求，人们的感官也从现实空间延伸到虚拟空间，AI伙伴会逐渐融入人们的生活，未来语音搜索将不再是一个信息输入-结果输出的传统搜索工具，引入AI伙伴，可以让搜索更加智能，拥有人类一样的思维、表达、情感和学习能力，满足人们更高层次的情感诉求的同时，也可以让搜索更加简单有趣。
未来我们持续对语音搜索进行升级，将AI伙伴与搜索链接的更加紧密，提升用户体验，创造出更多有趣的、创新的、别出心裁的年轻化设计。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com