一、VUI的现状
随着智能音箱的迅速发展，谷歌（Google Home）、亚马逊（echo）天猫精灵、小爱音箱......智能产品的井喷式增长，人们对智能语音产品的需求也越来越多，也越来越高，智能音箱对人们的生活的影响也越来越深，自然孕育而生一些新的职业需求，比如VUI（语音交互设计师Voice User Interfaces Designer），语音体验设计师VUE（Voice User Experience Designer），但其实VUI和VUE的分界线是很模糊的，这里不做多叙述。国际的一些大公司已经做了很好的示范了，比如亚马逊，谷歌等等，都会有设立专门的职位，做一些专门的研究，当然近期国内的相关招聘也会看到有相关的职位，且薪资不低。那么接下来会个大家详细的分享VUI（语音交互设计师Voice User Interfaces）
二、VUI起源/历史
1.VUI的第一个时期
20世纪50年代，贝尔实验室建立了一个单人语音数字系统
20世纪90年代，诞生了第一个可行的非特定人的语音识别系统
交互式语音应答IVR系统的出现，代表了VUI的以一个重要时期
2.VUI的第二个时期
也就是我们现在所处的的时期
我们的现状，我们正处于下一阶段的初期阶段，我们手机已经可以用语音处理很多事情了，但是还有很多事情是无法处通过语音完成的
3.VUI的一些优势和局限性
优势
1.速度
显而易见的是速度变快了，国内的语音，语音转文字的技术已经很大程度上提高了人们效率
2.释放双手
比如你在开车的时候，你可以直接对着你的手机语音助手说，嘿XX，麻烦你帮我做XXX
3.直觉性
说话是每个人的天性（当然排除特出情况）
4.同理心
语音包含了语气、音量、音调、语速，这些特征包含了大量的感知信息，能够让你感知到对方在表达些什么。
局限性
1.环境
对环境的要求比较高，在公共场合，人多的地方不利于语音的接受和录入
2.不适应
还是有很多用户不喜欢，不适应对着语音设备说话的
3.喜欢打字
就是喜欢打字的一些用户，打字从某个方面能够带给他一些愉悦
4.隐私
这个就很容易理解了，每个人都不希望自己的隐私被别人知道。
三、VUI设计师是什么（是做什么的）？
1.需要思考，在系统和终端用户间，从开始到结束的整个个对话过程
2.用户研究是不可少的
3.负责设计，产品原型和产品描述
4.需要了解底层技术的优缺点
5.分析数据的能力
从项目的发布阶段到发布阶段都扮演着非常重要的角色。
当然很多人看到上面5条可能会有点怵，其实也并不是需要全部都需要会，也可以专门负责其中的一个链条，节点。比如用户研究，数据分析....
四、VUI的基本设计原则
1.对话式设计
定义：简单来说就是我问你答
目前我们使用的智能设备基本只能支持单轮对话，但这样并不是人们习惯的对话方式
一轮以上的对话，才是符合用户心理预期的。
请大家回忆下自己使用智能音箱的一些场景体验，
举个例子（天猫精灵）
用户:天猫精灵，明天我有闹钟么？
天猫：您明天没有闹钟呢
用户：那可以帮我设定一个么？
天猫：.....
你会发现，智能音箱这个时候像是失忆了一般，毫无反应，显然这并不是我们想要的一个交互，从用户社交属性来说，人们沟通的方式一直都是一轮以上对话式的，并不是单轮式的，一般来说，我们要做到让用户决定对话要持续多久，很显然，你有亲身体验过的话，能做到多轮对话的比较少。
插一个题外话，最近天猫精灵更新了游戏语音的玩法，算是踏进一步了吧，虽然不是很棒的体验，但起码跨进了多一步，相信未来会越来越棒的。那对话式是如何设计出来呢？大致是怎么样的一个流程呢？
2.设计工具、
这里说的设计工具并不是说是一个具体的工具，更多是指一个方法论
示例对话
定义：示例对话字面意思就是演示举例对话，它看起来像一个电影脚本，像两个人一起在对话
特点：是整个设计对话过程的关键方法。成本较低，简单易操作
用法：把要做成一件事情的场景用文字写出来，然后大声读出来，你会发现书写和口语化的还是有很多区别的，甚至是有些奇怪的，这时候你会发现有很多可以改进的地方，所以你会看到一些招聘都会有这一项对应的要求，甚至是要求一些事有话剧功底，有剧本写作相关经验优先。
作用：它能够让你在投入开始研发之前，知道你的设计效果是如何。
3.视觉原型
虽然是语音交互，但是还是离不开GUI的，它可以结合示例对话，将用户体验可视化。示例对话和原型组成了我们产品的故事板，GUI+VUI是用户一套完整的体验，所以，VUI和GUI在早期阶段就开始合作，这样对用户体验会更加流畅。
4.流程图
也叫做呼叫流程图，一般来说我们的流程图需要包括用户使用中所有可能存在的分支，但这样下来会有千万条复杂的情况，流程图就会很乱，也很难梳理，所以我们采用分组的方法，
具体的分类的方法可以根据分成多组（日历功能、搜索功能，电话..），也可以根据不同的目的进行分组。
流程图的使用到的工具就非常多了，这里就不一一列举了。
那大概我们设计完成了一组示例对话之后，我们就要对一些细节进行细致的研究，比如；确认
五、如何进行确认
1.用户语音的确认
2.非语言式确认
3.通用确认
4.视觉的确认
1.用户语音的确认
最重要的是用户语音的确认，分为显性确认和隐形确认
显性确认即：比较重要，强制用户确认信息。比如：天猫精灵你能帮我一份奶茶么？查到附近XXX奶茶，使用优惠后的价格是XX元，你要来一份么？
隐形确认：即不需要用户确认消息，比如：用户：XX你能帮我设定明天10点的闹钟么？好的，已经帮你设定好明天早上10点的闹钟。
1.1那么如何去判定什么时候用隐性确认和显性确认呢？
那么下面就要介绍一下三级置信度。
系统将在一定的阀值内作出明确的形式确认信息。而这个阀值我们设定为三个等级
1.2置信度？
就是智能音箱能识别到声音的清晰度。
用易懂的话说就是人与人之间沟通的语言接受的清晰度，当然听不清对方说什么话的时候时候一般会发起询问，或者直接说，对不起，我没有听清，你可以再说一遍吗？
1.3三级置信度
比如帮我再买一份外卖
1.当置信度大于80%，使用隐性确认
好了已经帮你在订了一份外卖。
2.当置信度为45~79%，使用显性确认
您是想再多订一份外卖是吗？
3.当置信度小于45%
对不起，我没有听清您的讲话，您想买些什么？
2.只用隐形确认.
智能语音音箱能够非常清晰的识别到你说的内容的时候，可以直接用隐形确认，这样带来的体验流畅感舒服很多
3.非语言式
比如说，灯光花几秒才能，那么只是让系统先恢复好了或者知道的来让用户知道后面发生什么。还有加一些特定的音效，来代表特定某一个意思。
4.有趣的通用确认。
就是说智能语音音箱不会单独的回答你是和否，会主动会询问您一些的问候，通过这样情感化的一些设计，将能够让用户感到更加的温暖和舒服。
那我们前面讲到了那么多的一些确认策略，那我们接下来再说一下对话式的标识。因为是让用户了解交谈进展以及进展情况的重要方式
5.对话式的标识
它包括了以下三个方面。
1时间线，开始，进行中，结束。
2接收回执，谢谢，知道了，好的。了解了。
3积极反馈。哇，你这个消息真的很棒。
那对话式对话作用是什么呢？是让用户了解交谈进展以及进展情况的重要方式。能够更好的追踪到用户的使用过程中的一种路径方法。
大家会发现我们很多时候智能语音设备并不是每次都能够快速，精准接受识别我们的信息的。出错率相对来说是比较高的，下面大概说下语音识别的出现错误异常的几种情况
六、语音出现错误异常和解决方法
错误异常的几种情况
1.未检测到语音
2.检测到语音，但没有识别
3.检测到语音，但没有识别
4.部分语音识别错误
1.未检测到语音
未检测到语音有大概两种情况，一是用户说了，系统没有接收到。二是用户没说。
主要说下用户说了，系统没有接收到的情况，建议采取两种解决方式，
第一种前面我们说到的三级置信度，我们采取直接询问，“对不起，我没有听清你说的话，你能再说一遍么？”
第二种是采取什么也不做
1.1那什么情况下使用询问呢？
用户必须回复后，系统才能继续进行任务
你的系统只是支持语音
没有其他回复方式了
1.2什么情况下更适合使用什么也不做呢？
用户还有其他选择（比如手机界面课、通过一个按键操作）
什么也不做，不会中断对话
有视觉信息可以提示用户做出明确的选择
2.检测到语音，但没有识别
处理方式和未检测到语音基本是一直的，这里就带过了
3.检测到语音，但没有识别
出现这种情况的原因一般是两点
1.系统程序没有针对这种情况的回复
2.程序中写了错误的回复
解决方法，这里我们就要通过测试来发现具体是哪个环节出了问题了，通过数据的收集分析能够找到具体的答案
4.部分识别错误
大概就是这样的场景，天猫精灵，嗯...我想..。嗯，好的，为您带来一首XXX的歌曲。
解决方法：这个还是需要技术的介入，可以通过使用N-Best列表（可以通过这个列表规避二次错误）和镇适用固件后相应的数据分析来构建此问题的解决方法
说完了错误异常处理以及解决方式，我们接下来说下延迟和消除歧义
5.延迟
在交互一般用户等待的时间是7秒（现在可能是5秒），当你询问等待回答的时间超过这个阈值，用户就会怀疑是不是系统出问题了，甚至烦躁。
解决方法：一是通过“请稍等”让用户知道你在运作和查找。2.非语言提示，比如音效，等等。
6.消除歧义
很多时候用户提供的信息只有一部分，再加上中文的多层含义的特殊性，消除歧义对用户体验的的提升有重要作用。
比如：问地名的天气，中国很多镇区的地名都是一样的。
鼓楼 河南省_开封市_鼓楼区, 福建省_福州市_鼓楼区, 江苏省_南京市_鼓楼区, 江苏省_徐州市_鼓楼区
解决方法：还是可以采用置信度的方式去判别，如果很确定就直接回答，要么就多轮询问确定
7.帮助功能
最后的模块说下帮助功能。也是至关重要的，能够在一定程度上消除用户的“恐慌”，所以，在我们VUI中设计对应的帮助是非常有必要的，比如：询问智能语音设备你能干什么呢？它会告诉你他能做些什么？比如：我的设备怎么样链接你的蓝牙。APP：好的，长按......
七、语音交互的几点原则
1.应该是省时、高效的
2.简短的
3.能够被随时打断
4.能够链接上下文语境
1.应该是省时、高效的
和视觉界面交互其实是差不多的，用户是非常不愿意花很多时间达到他想要完成的任务的。越高效，越短时间，用户的体验会更加愉悦。
2.简短的
只需要告诉用户主要关键信息即可，不要过于冗余。举个简单的例子购物APP的商品表现形式，一般都是把名称和价格放在主要的位置，把详情放进下一级页面。采用尽可能简短的表现形式，让用户直接获取到他想要的，当然这对用户的了解和洞察都要需要经验的积累和感知的
3..能够被随时打断
举个例子，用户：明天的天气怎么样？APP：明天XXX地方的天气19℃，小雨，适合穿.......，用户可能只是想知道天气而已，这时候我们是需要做到可以被用户打断，而不是“执拗”的把话说完，如果一直说下去，不允许用户打断，用户的请求没有被回应，这时候用户会产生反感心理，
4.能够链接上下文语境
这是目前很多智能语音设备体验上没有那么好的地方，也就是前面说的，可以进行多轮对话，当然如果要设定多轮对话，中间的交互情况将会比现在更佳庞大，需要考虑的可能性也会更佳复杂。
语音交互设计的前半部分设计流程基本已经概述完了，主要说了VUI的起源，一些VUI中用到的一些方法论，设计工具，一些异常情况的处理，和VUI设计的几点原则。下面将会和大家聊下用户测试和预发布、确认发布......
八、用户测试
语音用户界面的测试其实和视觉界面测试的方法有一些相同的地方，但也有一些差异。
一般来说，在开始测试之前呢，还是需要做用户调研的。大概分为以下几个步骤。
1.了解需求（用户用例背景研究。）
1.做用户研究和访谈之前，我们要先搞清楚，这个利益方的需求是什么，业务需求，用户诉求是什么，我们的产品能够给用户带来什么？能够给他们解决什么问题？最后我们要确定我们的目标用户，然后进行访谈和调研（大体的方法，详细可以去看一下阿里提出的五导家加方法论）
2.制定设计研究方案。
2.1给目标用户制定，任务流程。
就是给每一个受访的用户，一个特定的任务流程，但很多时候我们并不是只是测试一个任务，会有很多任务，那就会涉及到任务排序的问题。还有最好的方法是采用拉丁方阵设计,这样的话不必通过出现所有可能的排斥方式来试验。
那么设定好这次任务之后呢，我们就要进行招募受试人员了
2.2.招募受试人员
需要注意以下几点。
1.要在目标用户里抽取测试用户
2.人数大概控制在5~12人，可用性专家Jakob Nielseb提出效果一般控制在5-8人左右为最佳
对于小公司招募测试用户可能会相对比较困难，成本相对来说会比较高，当然是可以招募你身边的朋友和公司的同事来协助你的，但最好避开项目的直接核心人员。
那么在目前人员完成之后呢，我们大概会进行一些进行中的一些测试，比如说我们做一些提问。
请问这里会涉及到一个方法，我们在交互设计里面叫它为用户体验地图。
3.用户体验地图
我会给到用户一些任务的体验流程，然后根据他的一些反馈，通过语言、表情，然后绘制出用户体验地图，从而判断出，用户在这个任务流程中，得到了一些体验感受，找到可能存在问题的所在节点，然后进行修改。下面说下在访谈中需要注意的I点，如何进行访谈
4.访谈需要注意的点
那么在口头提问的过程中，我们需要注意些什么呢？
4.1.提问不要有一些语句上的偏袒，不要出现故意引导，比如说你喜欢这个功能吗？这样提问是不太合理的。最好提问是，你用完这个功能之后，你是什么样的一个感受？或者说你觉得怎么样？
4.2.要注意引导用户得出具体的结论。而不是用户说大概，可能我觉得应该是等等之类的词。要有具体的例子，不要一个抽象的结果。
4.3.少用为什么开头，会让受访者觉得你是在质疑他，或者说故意的，刁难他。比如说受访者说，语音天气询问功能特别难用，能够简单说一下你的使用场景吗？他是在什么情况下让你感觉到难用？描述我们需要更加具体化一些，而不是笼统的，抽象的。
5.可用性测试（用户调研）
目的是测试工作流程和易用性。但是在语音交互过程中，识别问题往往会阻碍用户完成任务。最好是找几位测试用户，尝试找出主要的识别问题，然后修复它。
可用性测试大概分为几类
5.1.远程测试（电话/视频访谈）
优点
更容易找到符合特征的用户
成本较低，只需要远程即可，不需要支付其他额外的支出，比如说来到你约定地方差旅费。
会更加自然，更贴近真实情景。
用户心理负担没有那么大会比较自在。
可以没有测试主持人
条件允许的话，最好使用视频通话，这样我们可以录制影像，后期方便我们去观察用户的表情和反应，以得出更加正确的测试结果。
缺点
没有办法实时跟进参与人员的反应。
5.2.拦访
这种测试方式是非常有难度的。意味着我们要去到公共场合去拦截受访者，然后让他参与到你这个测试当中，因为人与人的戒备心理，所以很多人都会拒绝你，如果你想提高成功率，最好准备一些小礼品或者其他的小奖励，这样有助于你提高拦访的成功率。当然你也很有可能得到的结果，会有一些偏差，受访者会出于某些目的而回答你的一些问题，有可能并不是出于真心的。所以呢，这里不是很建议大家用这种方法。
5.3测试完成
测试完之后，我们需要进行我们的结果分析和统计。
测试衡量的一些指标，我们大概分为5个关键指标。
准确性，响应速度，认知速度，清晰度，友好度和声音
5.4.注意事项
这里需要注意的点是，一定先要预先设定好，确定每项任务完成的标志是什么。不然后期对结果的一个标准很难去统计，会比较混乱。
我们需要总结这是用户对问题的回答及完成任务率错误数量和类型等等，从中找出用户的痛点，用户的一些干扰点。按任务出错时，用户是否能够自己解决呢？等等，具体需要得出的一些结论，要根据自己想要测试的一些目的来定。
在这样我们就完成了整个可用性测试的流程。
6.预测试
发布之前需要做一次与测试，可以权重没有那么高。但也是关键的一步。
7.识别测试
最重要的还是识别测试，这关系着整个产品的体验问题，整体的测试流程需要用三级置信度和N-Best列表、以及后台的表格相结合，找出相对应的问题节点，并且修复它。
8.负载测试
你得清楚明白你的设备，最多的承载量，不然流量一进来，服务器就崩溃了，这样的体验是极其差的。
9.效果的评估
你还得去做效果的评估。在试运行开始之前，你需要制定目标，然后看是否达到这个目标，这个效果大概是什么样的？是否达到预期？任务的完成率也是非常关键的一个成功指标。
10.试运行
最后到达发布阶段。为了产品的稳妥起见，我们还是会进行一次试运行，
11.发布
12.迭代
条件允许的话，重复上面一次的用户调研的方法，然后得出一些现阶段的一些问题。我们需要实时跟踪系统的故障并快速的改进，这是我们非常需要要做到的。
大概全部的语音交互流程就说到这里了，我们简单的回顾下下
1.语音交互设计的起源
2.语音交互设计的设计原则-示例对话
3.确认原则/纠错方法-三级置信度
4.可用性测试
5.发布
那语音交互设计的未来点在那里？设计师我们的机会在哪里
战略选择
世界一直都是存在不确定性的，如何能够应对呢？眼界和选择。
这里延伸下梁宁在《产品思维30讲》里面说到的点线面的战略选择的问题，她大概说了这样的例子：比如有一对双胞胎，2010年一起大学毕业，一个进入了腾讯，一个进入了报社。7年之后呢，腾讯的那位如果不出意外应该是年薪百万，而且满街都是猎头在挖，投资人在挖，只要出来创业就给钱，而去了报社的那位呢，报社的情况我们今天肯定了解整个产业都沉沦了，曾经他寄托理想的整个产业都没有了，其实一切都需要重来，在这个时候并不是说双胞胎他们的个人的素质有问题，或者是他们的能力点有问题，点是没有问题的，也不是他们分别跟随的领导，比如说我们就跟老大，他们的老大的能力点和个人操守也都是没有问题的，但是问题在哪里？问题是说这两个单位所附着的经济体，一个是在快速崛起，一个是在快速崩溃。你努力工作的公司收益，远远不如你在2010年以前或者2013年以前，比如说买腾讯的股票，或者是说你买一套北上广的房子，
我们本身是一个点，我们这个点需要附着在整个整个快速崛起的“线”上，战略的选择，眼界的层面显得尤为重要，和努力一样重要，甚至往往有时候选择比努力更重要，但选择也是努力累计的结果。我们设计师如何做出顺应这个迅速崛起的经济体的选择，也是我们当下 的机会，我们能看到什么机会，我们要附着到什么样的线上，在当下职业边界愈发模糊的时代，我们能力和眼界的提升，可以做到从容的应对未来的种种变故。
那么同样，随之AI的发展，5G的到来，我们的很多工作方式都有可能被颠覆，语音交互设计的将会是一片蓝海，虽然现在有诸多的桎梏，但这是趋势，是快速崛起的趋势。设计师工作你能想象未来没有显示器么？没有臃肿的主机么？等等，未来都有可能会发生。而这一切也正在发生.....
原文地址：站酷
作者：木七木七
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在终端APP中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。如何辅助设计师设计高性能炫酷的动画、如何将设计师设计的动画准确无误的还原到终端APP上是业界不断探索和解决的问题。
图1 传统动画实现流程图
当前最好的动画设计软件是Adobe After Effects（简称AE），从AE动画制作到终端APP呈现，传统的实现方式如图1所示，有三大痛点：实现成本高、沟通成本高和性能难以保证。
近几年，业界诞生了像Lottie、SVGA这样的动画工作流解决方案，虽然在一定程度上提升了生产效率，但存在AE支持能力有限、动画性能难以保证、配套工具支持有限的问题。
PAG（Portable Animated Graphics）是腾讯PCG发布器中台自主研发的一套完整的动画工作流解决方案，助力于将AE动画方便快捷的应用于各平台终端。PAG的流程图如图2所示，设计师在AE上设计出动画后，可以通过导出插件导出pag文件，同时PAG提供了桌面端预览工具，支持实时预览效果，在确认效果后，通过运行配置上线，各平台终端可以通过PAG SDK加载渲染pag动画。
图2 PAG动画工作流流程图
与Lottie、SVGA相比，PAG增加支持了服务端。除此之外，如图3所示，PAG动画方案在导出动画文件大小、AE特性支持和可编辑性方面具有较大的优势。
图3 PAG和Lottie对比图
和Lottie、SVGA实现不同的是，PAG不依赖平台端渲染接口，可以实现各平台的渲染一致性。PAG与Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
无论是PAG还是Lottie、SVGA，所支持的AE特性仅仅是AE众多特性中的很少的一部分，这在一定程度上限制了设计师的创造力。针对这个问题，PAG新增了BMP预合成的导出方式，支持导出所有AE特性，适用于不可编辑的场景。其原理如图4所示，在合成的层面将渲染结果截取成图片，然后进行视频编码。
图 4 BMP预合成原理图
针对视频不支持透明通道而动画需要包含透明通道的问题，在编码的层面扩展了透明通道的支持，如图5所示。
图6 PAG矢量和BMP预合成混合导出
针对导出动画和AE设计动画存在偏差的问题，PAG导出插件增加了使用了不支持AE特性提醒功能，如下图7所示。
图7 PAG导出面板
在预览界面，同样有不支持特性的提示，如图8所示。
图8 PAG导出面板预览窗口
在使用AE设计动画的过程中，设计师可以方便快捷的提前查看使用了那些不支持直接导出的AE特性，换种实现方式或者导出成BMP预合成，有效的解决了设计动画和导出动画存在偏差的问题。
在AE动画设计的过程中，PAG导出面板提供了一键设置BMP预合成的方法，如下图9所示。需要提示的是，一旦设置了BMP预合成，该合成中的文本和图片将不能再被用户编辑。
图9 BMP 预合成设置
由于BMP预合成可能会影响到可替换图片的数量，PAG同时会实时更新可替换图片的数量给设计以提示。
在用pag设置的素材中，经常会遇到用户填充的图片与默认占位图尺寸不一致的情况，在导出面板中PAG增加图片填充的四个规则，如图10所示：
图10 可替换图片填充设置
其中：
不缩放：画面不缩放，从左上角位置开始裁剪
黑边：在保持高宽比的情况下缩放到设备的可用屏幕大小，图像不发生变形，如果图片尺寸和填充区域比例不一致，会出现黑边，为默认填充模式
拉伸：不保持宽高比填充，会发生失变形
裁剪：在保持高宽比的情况下缩放到完全填满可用的屏幕大小
具体效果如图11所示。
图11 图片填充效果图
PAGViewer支持桌面端预览PAG文件动画效果，如下图所示。支持查看动画文件中包含有多少个可编辑文本和可编辑图片，且支持设计师本地填充素材，实时预览填充效果，无需等待上线后才能确认真实效果。图片占位图支持填充图片或视频，如果PAG文件内置了音频文件，支持播放音频效果。具体效果如图12所示。
图12 PAG效果预览
在pag动画实际使用的过程中，PAG经常遇到的问题是设计师辛辛苦苦设计的动画在终端上性能表现不佳，需要进行返工优化，同样的问题在使用Lottie方案时候也会存在。
除了效果预览，PAGViewer还增加了性能展示面板，可以很方便的看到pag动画的基本信息，如时长、帧率、尺寸、bmp预合成的数量，图层总数等，还有量化的性能指标，定量的评估pag文件的性能，如图13所示，方便设计师进行针对性的优化，而不需要等到上线前才会暴露性能问题。具体效果如图13所示。
图13 PAG性能展示面板
目前PAG方案已经广泛应用于腾讯公司内外几十款产品中，涵盖了众多的国民级应用。
总结下来，PAG目前主要使用在以下几大场景：
图15 UI动画场景
设计师设计出动画文件后，研发只需要替换预设的文本内容即可，并且文件体积非常小。
图16 贴纸动画场景
图17 照片/视频模板场景
PAG支持将内置的图片作为占位图替换，并保留所有动画效果。因此可以将整个PAG动画设计成一个模板，把预设的占位图替换成用户选取的照片，自动套用效果生成视频。全程可以让设计师自由批量生产模板，无需研发介入。
仍然基于图片替换原理，PAG也支持将占位图替换为视频，实现视频模板功能。
图18 智能剪辑场景
智能剪辑是围绕用户上传的视频内容，生成定制化的模板，模板本身是不固定的，可以从多个PAG文件组合而成，类似活字印刷。设计师可以利用这个特性，构建自己的特效组件库，然后对接AI的识别能力，根据一定规则组合得到无限数量的模板效果，可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能，随机生成游戏高光时刻视频。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
动效是用户体验的重要组成部分，也是产品调性的重要体现。如今动效设计也有了更多的解决方案，如Framer、Principle、Flinto、Protopie等，这些软件在制作交互原型时，确实有更轻量便捷的优势，但效果也有一定的局限性，或者要求使用者有代码基础，比较适合有针对性的人群。而After Effects作为动效软件的鼻祖，以其强大的兼容性、效果丰富性和清晰明了的图层操作逻辑深得设计师们喜爱，不论是UI、运营还是多媒体类型的设计都能满足，无疑是目前最具有普适性的动效软件。本文从AE的插件、操作以及落地三个方面，为大家整理了一波实用技巧，希望能帮助大家在工作中更加得心应手。
工欲善其事必先利其器，不论是AE还是其他软件，好的插件都能配合软件本身达到事半功倍的效果。这里介绍十款AE上不容错过的精品插件。
AE与PS有很好的兼容性，PS的图层以及各种样式都能无偏差的导入到AE，但同样是Adobe家族的AI，要导入AE却特别麻烦，更不用说没有血缘的Sketch了。偏偏AI和Sketch却经常需要和AE打交道，这时候以下两款插件便应运而生。
Overlord不仅可以实现AI导入AE，还能随时从AE导回AI修改，这对本身不适合用于绘制图形的AE来说，无疑是补上了一个短板。
最新的Overlord支持路径、形状、参数图形、剪切关系、文本、甚至大部分的渐变参数都能无偏差互导，并且可以设置导成子图层还是独立图层，可以说是非常方便了。
官网链接：https://www.battleaxe.co/overlord
如果说Overlord是AI和AE之间的一座桥梁，那AEUX就是Sketch和AE之间的一座桥梁。导入前在Sketch里将图层整理好，导入AE后图层关系也是一目了然。
官网链接：https://aeux.io/
如果说AE只能装一款插件，那必然是Motion Tools了，它将很多常用操作整合到一个面板上，并且可以跳过繁琐的常规操作。包括快速调整曲线、定位图层锚点、克隆关键帧、制作回弹效果、错位图层序列、生成多图层空对象等。这里演示几个常用功能。
快速调整速度缓动曲线：
不用再通过输入表达式，做出操控便捷又灵活的回弹效果：
锚点是元素变换时的基准点，更改锚点也是高频操作。Motion Tools不仅可以快速修改图层锚点，并且支持多图层批量操作：
官网链接：https://motiondesign.school/products/motion-tools/
新转成的预合成尺寸总是占满画布，不方便做动画且干扰其他图层选择。手动调节的话会影响元素的位置、位移等属性，Auto Crop很好地解决了这个问题，能够将预合成裁切至适合当前元素的尺寸。
官网链接：https://aescripts.com/auto-crop
Auto Sway能够很便捷的制作头发或者服装飘动的效果，在日常运营设计中，让你的人物快速变得生动灵活起来。
官网链接：https://aescripts.com/autosway
AE自身带有粒子效果器，点击“效果 → 模拟 → CC Particle World ”就是。但更强大更为人所熟知的却是这款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。
很多运营或游戏页面中的氛围元素，例如落花、飘雪、灰烬、火花、彩带等，Particular都可以快速做出。
除了运营设计，粒子在很多UI场景也同样适用，例如结合形变或路径做的飘散和拖尾效果，就可以用在充电或扫描等场景。
官网链接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite
Bodymovin能够将AE中矢量图形做成的动效导成json文件，变成一串纯粹的代码，再被Lottie渲染还原出来。这就让“尺寸”和“帧率”摆脱了以往体积的束缚，导出的即使是又高清又流畅的大图，也可以保持很小的体积。
QQ最新的Q弹超清表情，就是用Lottie实现的，大家可以在手机QQ上亲自体验这种爽滑Q弹的感觉哦。
官网链接：https://aescripts.com/bodymovin/
PAG（Portable Animated Graphics ）是一套完整的动画工作流，在动画导出与渲染方面和Lottie相似，但更进一步的是，PAG还引入了视频序列帧结合矢量的混合导出能力，这就保证了PAG能支持AE的所有特性和效果。
另外PAG还提供完善的桌面预览工具、性能监测可视化、运行时可编辑等特点，能很好的打通设计与开发之间，从创作到素材交付上线的流程。
官网链接：https://pag.io/
Gif格式因为不支持半透明区域且容易有锯齿，如今的实际开发中已经有了Apng、Lottie等很多更好的替代方案，但在网页浏览、文档编辑等许多场景，还是需要使用Gif来演示动效或者作为封面缩略图。AE从2014版本后就不支持Gif导出了，而Gifgun就是一款能很好地导出Gif格式的插件。
Gifgun导出的格式小巧清晰，本文所有动图就是用这款插件导出，真香。
官网链接：https://aescripts.com/gifgun/
AE本身不支持直接导出MP4，很多时候只能先导出体积庞大的MOV格式，再通过第三方软件转成MP4，操作繁琐不说，还损失画质。
Adobe自家的多媒体编码软件Media Encoder，也可以完美导出MP4格式，不过这款软件本身体积较大，每次打开都要运行很久。
这里推荐使用更实用的MP4导出软件 — Aftercodecs。安装后在输出模块设置里，就能找到对应的导出项了，并且导出的MP4也是小巧高清的。
官网链接：https://aescripts.com/aftercodecs/
小技巧这部分，整理了AE高频操作经常会遇见的一些问题，以及对应比较高效的解决方案。
当我们想调整的元素已经打上过关键帧，这时直接调整元素的位置或缩放属性，就会影响到原本的效果，使用空对象就可以解决这一问题。
关键帧比较多时，按住 “ Option ” 键，用鼠标拖动最末尾的关键帧，可以对所选关键帧进行整体等比拉伸，并且支持多图层同时操作。
新建形状层的定位锚点总是不对齐图层的中心，这在做一些带缩放或旋转属性的动画时就特别不方便，按住“Command”双击“平移锚点工具”，即可使图层锚点快速对位到图层中心。
还有更直接的方法，就是在“首选项”里将“在新形状图层上居中放置锚点”打上勾，以后新建的形状层锚点都会自动对齐图层中心啦。
AE的很多插件和表达式对中文版本不兼容，包括很多教程也都是国外案例，所以其实直接用英文版的AE是最好的。但是难免也有跟我一样看见英文界面就抓瞎的同学，平时还是习惯用中文版，有需要时才换成英文版。这里介绍一种AE快速切换中英文的方法，对2018以上的版本都适用。
以macOS系统为例，在以下路径找到：
前往 \ 电脑 \ Macintosh HD \ 资源库 \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml
将“application.xml”这个文件用“文本编辑”打开，然后按“Command + F”使用查找命令，将“zh_CN”文本替换为“en_US”，保存后重启AE就是英文版了。
Windows也是同理，对应路径为：
C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml
然后将“application.xml”这个文件用“记事本”打开，同样的查找“zh_CN”后替换“en_US”就好。
之后可以将“application.xml”文件分别存一份“zh_CN”中文和“en_US”英文的版本，下回再要切换时，直接将对应的“application.xml”文件复制到原路径替换即可。
新置入一段想要循环的视频素材时，很多人习惯将素材复制多次，或者通过时间重映射打上关键帧后在添加循环表达式。其实并不需要这么麻烦，在项目窗口右键对应的素材，选择“解释素材 → 主要”，在弹出窗口直接就可以设置素材循环次数。
虽然AE的全部快捷键可以写满长长一串列表，但在精不在多。实际使用时，其实只要记住一些常用的关键快捷键，就已经可以效率翻倍，享受“键步如飞”的感觉了。
以最常用的“添加关键帧”为例，在不使用快捷键的前提下，想要给对象添加一个“位置”关键帧，需要至少3个步骤：
而使用快捷键 “ Option+Shift+P ”，一步即可完成，并且不会展开不相关的属性：
这对于一个工程里需要用到成百上千次的k帧操作来说，着实可以省下不少时间，可以说是不得不用的一个快捷操作。
秉持在精不在多的原则，整理出以下一些高效又常用的快捷键，亲测好用哦！
因为作者是MacOS系统，所以下文中提到的 Option 可以对应 Windows 的 Alt ； Command 对应 Windows 的 Control 。
五大基础变换属性
在对应图层使用这五个快捷键，即可快速展开或收起对应属性。
位置：P（Position）
缩放：S（Scale）
旋转：R（Rotation）
不透明度：T（Transparency）
锚点：A（Anchor）
常用工具选择
选择工具：V
形状工具：Q
钢笔工具：P
摄像机工具：C
关键帧操作
快速添加关键帧：Option + Shift + “ * ”（ * = 对应属性快捷键）
向右移动关键帧一帧：Option + 右箭头
向左移动关键帧一帧：Option + 左箭头
向右移动关键帧十帧：Option + Shift + 右箭头
向左移动关键帧十帧：Option + Shift + 左箭头
缓动关键帧：F9
时间指针操作
定位到上一可见关键帧：J
定位到下一可见关键帧：K
定位到图层入点：I
定位到图层出点：O
设置当前为工作区开始：B
设置当前为工作区结束： N
图层操作
将图层拆分 ：Shift + Command + D
裁去时间线左侧图层：Option + [
裁去时间线右侧图层：Option + ]
设置当前为入点： [
设置当前为出点： ]
复制图层：Command + D
其他常用操作
展开/收起带关键帧的属性：U
展开/收起所有属性：UU
展开/收起遮罩属性：M
展开/收起音频属性：L
转为预合成：Shift + Command + C
图像自适应合成宽高：Shift + Option + F
After Effects官方快捷键大全：https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html
设计再好的动效如果不能实际落地，那一切也只是徒劳，所以动效输出在对接开发时非常关键。按照输出和实现的方式不同，我们可以将动效分为两种类型，一种是播放型动效，一种是交互型动效。
播放型动效是指在输出时效果就已经固定的动效，满足触发条件后播放出来，过程中并不会有影响效果的元素。
例如常见的APP底部导航点击效果，icon动效在用户点击时触发播放，这个效果在输出时就是固定的，不受任何其他因素影响，可以由设计师直接导出。
播放型动效有以下几种比较常见的输出格式：
Gif、Apng、Webp本质上都是将位图进行压缩和转换，而Lottie则是基于代码层面的动画渲染，PAG则结合了两者的特性。目前一般使用Apng、Lottie、和PAG就已经可以覆盖大部分的输出场景，是可以优先考虑的动图格式。
交互型动效是指变换内容跟我们的交互操作相关联的动效，并且包含无法由设计师直接导出的元素，比如用户的头像、名称等。
比如这个支付面板切换的效果，变换的元素中包含了用户的余额和绑卡信息，这些信息是无法由设计师输出的。
这种动效需要开发在代码侧还原。如果只是输出视频demo，开发同学很难将其中的细节（例如时间出入点、曲线速率等）还原出来。这就需要设计师有一份清晰的标注文档，将动效的细节参数跟开发更好的明确下来。
一份规范的动效标注文档，至少应该包含以下几个方面，
触发：在什么条件下触发动效，例如点击、双击、滑动、长按等；
对象：发生变换的对象，例如按钮、列表、文字等；
属性：具体变换的属性，例如位移、缩放、不透明度等；
参数：换化属性的具体参数，例如不透明度值从0到1；
时长：变换的起始时间点、持续时间；
曲线：变换的速率曲线，描述在固定的时长范围内，速度是如何变化的；
以上图的支付面板首次切换过程为例，我们的标注文档是这样的：
第一步定义好页面的起始和结束状态，并标明动效元素
第二步则是将各元素的运动细节用具体参数描述清楚
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在数据可视化的分析过程中，用户是所有行为的主体，通过获取的可视信息形成认知，在交互分析过程中获取解决问题的方法。
在这个过程中，感知和认知能力直接影响着信息的获取和处理进程，进而影响用户对外在世界环境做出的反应，这也是设计数据可视化产品服务蓝图的基础逻辑。
从数据到知识有两个途径:交互的可视化方法和自动的数据挖掘方法。
我们可以看到，下图展示的便是一个典型的可视分析流程图和每个步骤中的过渡形式。这个流水线的起点是输入的数据，终点是提炼的知识。
可视化的首要任务是准确地展示和传达数据所包含的信息。根据预期和需求，提供有效辅助手段以方便用户理解数据，从而完成有效的可视化。
但是当出现数据尺寸大、结构复杂的情况时，有限的空间大大限制了静态可视化的效果，有限的可视化空间和数据过载之间的处理是非常复杂的。有时我们会通过物理环境的变化来改变服务模型，但是更多时候我们需要通过交互设计来完成对复杂信息的处理，提升用户对数据解读的便捷性。
那么当我们在设计一张数据大屏时，我们该如何通过交互提升用户获取有效数据的效能呢，下面我们一起来探讨如何完善大屏设计中的交互设计：
一、信息架构
1、清晰易理解、可拓展的信息架构
2、清晰易理解的导航关系
3、清晰易理解的层级关系
案例分析：
在我们收到原型图时，首先我们需要梳理清楚大屏的信息架构，比如整个大屏的模块比例是按照1:1:1还是1:3:1的结构。又或者是如何设计重要功能的入口，比如整屏的导航tab选项，在布局设计上用户是否可以明晰它是是否是全屏筛选，在交互逻辑上用户是否可以通过最短的路径快速筛选抵达内容。那么当用户进行了导航的切换后又返回到上一页面，整个行为是可以形成路径闭环的。
二、流程设计
1、可下钻的模块需给用户以引导
2、相同功能的用户体验路径需保持一致
3、逆向流程的功能设计能形成闭环
案例分析：
我们经常会在大屏中间设计地图的样式来展示某个省的数据情况，比如，如图所示，当业务侧需要从湖北省跳转至武汉市，查看武汉市的详细数据，那么我们可以在省级地图轮播的数据气泡上给予用户以提示，用户可以清楚获取到跳转市级大屏的路径方法。
三、界面展示
1、一致可控的图表组件
可视化大屏中最核心的数据展示形式就是图表模块，我们需要正确地展示图表组件外观与组件关系，把控好相似功能的横向一致性，我们可以细分为以下几点。
（1）选择正确清晰的图表组件
（2）正确表达组件元素之间的关系
（3）一致性的组件样式和交互行为
（4）不要忽视组件的不可用状态（按钮）
（5）删减影响用户视线和注意力的冗余元素
案例分析：
当一个模块内需要展示数据的多个维度，我们如何将该模块设计得更加清晰呢。如下图，根据人从左往右的阅读习惯，在左边展示数据1和数据2的总指标数，在右边展示数据1和数据2的详细走势，右上角我们还可以添加tab选项，用户可以进行tab切换查看更多维度的数据内容。
所以，我们可以将用户使用习惯和交互行为很好地结合起来，不仅免去了图表多乱杂的场景，用户也可以更快地查看到想要获取的数据信息。
2、清晰的数据展示
配合图表展示的就是我们的“数据数字”内容了，在我们将设计稿传递给前端同事后，填充真实数据后的视觉效果可能看起来没有效果图规整，一方面在进行绘制效果图之前，可以与产品业务侧共同探讨数据内容，尽量给视觉设计师提供真实的数据，另一方面，在我们作图搬砖的时候，也要注意一下几点：
（1）不要遗漏了“无数据”的缺省空界面，当无法获取到数据时，我们需要给前端提供这样的缺省图；
（2）清晰的数据排序规则，比如环形图中，总起始点到终点，数据对应的数值量应该是递减的排序规则；
（3）考虑数据的极值情况，比如在搜索列表中学校名称文字的极限字数是多少，超出多少字用省略号显示，这些我们都需要考虑到；
（4）是否需要标明数据的更新时间节点，有的大屏强调数据实时性，我们经常会在右上角增加数据截止更新时间来来引导用户；
（5）特定的数值按照特定的格式和单位显示，比如羊字符能让用户第一时间识别到是人民币，而如果金额数字过长后面再加元会降低识别效率。
案例分析：
3、选择与输入的信息反馈
（1）展示合适的首选项或默认值
（2）输入前有效的文本提示
（3）输入完成后需及时反馈
案例分析：
4、用动效进行有效的交互引导
利用动效进行交互引导，即使大屏操作链路过长，也可以让用户快速上手操作，减少流程学习时间。进入下一场景后，又会有对应的区域提示用户返回全局或查看其他场景；当做到层层有响应，就能减少用户在每一步操作上的困惑时间，帮助用户快速上手操作流程，并且大大提升工作效率。
但是我们需要注意的是，不要为了酷炫而做太多无用的动效，不仅会让页面加载速度慢，也会让用户觉得杂乱无重点。
总结：
交互可提高可视化系统的效率，帮助用户处理更多的数据，完成更复杂的任务。然而，实现交互本身也有额外成本。互动的系统可以使用户能探索更大的信息空间，但随之而来的成本是用户需要花费更多的时间与精力去浏览和探索数据。
因此，可视化系统应当采用数据挖掘算法自动发现用户可能会关心的数据或者模式；并通过可视化呈现给用户，用户在这个基础上通过互动进行更深入的挖掘。设计师的设计决定了系统的可理解性，一旦掌握了这个逻辑，再复杂的页面也会变得有条不紊。
我们仍需在数据可视化的道路上不断探索挖掘数据价值，给决策者提供有效的数据分析支撑，让设计驱动数据价值最大化。
一、什么是格式塔原理？
格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt，因此这些理论也称做视觉感知的格式塔原理。
格式塔学派主张人脑的运作原理属于整体论，“整体不同于其部件的总和”。例如，我们对一朵花的感知，并非纯粹单单从对花的形状、颜色、大小等感官资讯而来，还包括我们对花过去的经验和印象，加起来才是我们对一朵花的感知。
格式塔心理学家认为这些原则之所以存在，是因为头脑具有天生的倾向，可以根据某些规则感知刺激中的模式。（是不是觉得hin神奇）
比如，这是著名的“人脸花瓶幻觉”图。如果以黑色为背景，白色为图形，则是一个花瓶；如果以黑色为图形，白色为背景，则是两个人的侧脸。它也反映了图形和背景对一幅图的影响。
二、格式塔原理分析
使用不同数量的空格来合并或分离元素是传达有意义的分组的关键。例如，在Ant Design的标题区域中，“ 搜索”功能与站点的主要导航位于同一行。但是，主导航和搜索之间的多余空格表示它们属于不同的组，因此具有独特的功能。对于使“ 搜索”功能在主菜单的其余部分中脱颖而出，此空格至关重要。
但是，在较小的屏幕上，无法保持此间距。为了避免将这些区域视为一个整体，页面收缩宽度的时候，搜索后的文字隐藏了。
应具有固定或锁头标题的网站特别可以从使用独特的背景颜色或清晰的边框中受益，从而有效地将标题与下面滚动的页面内容区分开。此外，大页脚的单一统一背景色 可有效地表示该区域中的所有链接都属于一个组。
创建清晰的边界是一种强大的视觉提示，可以压倒其他分组原则，例如接近性或相似性。因此，当需要包含几种不同类型的UI元素或无法调整对象之间的空白量时，它是一种强大的工具。我们做页面时如果需要把两个元素放成一组与其他元素区分，那么我们可以用线框画出边界来达到目的。
如果其它因素相同，那么相似的物体看起来归属于一组。接下来从形状、颜色、尺寸上来说明相似性原理，这也就是我们平时做视觉设计时的原理，比如我们设计稿宣讲时可能会被开发、产品以及测试同学问到“为什么用这个形状？为什么这里用这个颜色？为什么这两个尺寸不一致？等等，细细体会这个相似性原理就会给我们答案，让我们在画设计稿时能够有理有据。
在上图中，我们头脑中自然而然的会分成“四列”，也就是圆形一列，三角形一列，然后再圆形一列，三角形一列，而不会看成“三行”
应用共享的颜色来表示某些项目是相关的，因此可能具有相似的功能，这很有效。通用颜色往往比其他特征（例如形状）更加突出，因此可以用于组合不同类型的元素并传达它们确实相关。
在用户界面设计中，颜色通常用于指示常用功能。例如，使用单个链接颜色作为与用户交流可点击内容，链接颜色应仅保留给交互式文本和其他可单击元素，因为用户会意识到所有具有此特征的项目都是相关的，并且以相同的方式工作。因此，链接颜色不应用于关键字，不可点击的标题或实际上不可点击的附近图标。
如上图，就是一个用色的反面例子，“ 消息中心”中的所有按钮均为绿色，因此用户必须花时间确定哪个是提交表单的主要按钮。（此外，“ 提交”按钮离消息区域很远，并且根据Fitts的定律，这种缺乏接近性也会降低用户的速 度。）
相同颜色的按钮将被视为具有相同的重要性级别。因此，应为主要操作性按钮保留单独的颜色，以帮助它们在辅助按钮中脱颖而出。
在用户界面中，我们经常使用大小来强调内容或按钮中最重要的部分。相同的大小表示相同的视觉突出度，并且在所有其他条件相同的情况下，将共享该属性的所有元素连接在一起。一致地使用大小会创建视觉层次结构，并使页面易于扫描，因为人们可以立即看到并理解这些类型分组。
例如，在产品列表页面中，每个单独的产品列表都以相同的大小（和相同的形状）显示。这种一致的视觉样式告诉我们该区域中的所有物品都是产品。共享大小将其与其他不同的UI元素分开。当某项商品在此列表中以不同的大小或形状出现时，就会突出显示为不属于产品分组。下面这个产品集合的促销以单个产品列表大小的两倍显示。
下面是我最开始尝试的招聘系统首页的改版：
根据上面的相似性原理和接近性原理就可以很容易看出来，这个页面结构和逻辑不清晰：
1.待处理和招聘日程两个模块之间的区分不够清晰：因为这两个模块右侧应用了同样的形状和颜色的按钮（相似性原理），让用户在心理上产生联想，同时这两个模块之间只靠间距来区分，区分的太弱了（接近性原理）
2.招聘日程头部日期与下面的面试安排卡片联系太弱：因为面试卡片用了非常强的边界区分的线条（接近性原理-构建清晰的结构）确实在面试模块之间构建了清晰的结构，与此同时卡片与头部的日期之间看起来没有什么关联。
3.首页的选中效果太弱，分析这个页面的层级，左侧首页选中才应该是最重的，能让用户第一眼就知道在系统中的位置，很显然目前来看很容易忽视首页这个位置，关注点被吸引到了快捷入口。这并不是我们想要传达给用户的。
根据格式塔原理中的相似性原理和接近性原理，对页面的结构进行了调整，就看起来清晰多了。
所以，我们在制作完设计稿后，可以应用格式塔原理，分析下最终呈现给用户的结构和逻辑是否清晰。而这也是做视觉的理由和底气。
视觉倾向于感知连续的形式而不是离散的碎片。
连续理解起来是很简单的，但连续却解决了非常复杂的问题。通过找到非常微小的共性将两个不同的环连接成一个整体。在引导页中经常会用到这个。
视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。
闭合可以实现统一整体，这不难理解。但是有一个非常有趣的现象值得我们去观察和思考，就是不闭合时候也会实现统一的整体，更确切的说，这种现象是一种不完全的关闭。这些图形与设计给人以简单，轻松、自由的感觉。所以，完全的闭合是没有必要的。最著名的应用便是苹果公司的logo，咬掉的缺口唤起人们的好奇、疑问，给人巨大想象空间。
我们倾向于分解复杂的场景来降低复杂度。
我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素，其余则是背景。这个原理经常会在海报设计中应用，这也是为什么我们做海报，做平面时，一定要制作好背景，背景的氛围很重要。
提到轮播首先可能想到的是广告，我们经常在移动端首页或网站首页会看到各式各样的轮播banner，不管在移动端还是网页上通常点击数据都是非常差的，本篇文章带你深入了解banner轮播。
如果需要设计一个轮播，我们应该考虑哪些因素？如何让轮播更具有价值？如何让轮播的体验更好？如何避免轮播常见的问题。
本篇文章通过以下几点探索轮播的特性，预计阅读20分钟
1、用户真的使用轮播吗
2、轮播的轮换形式
3、轮播的进度展示
4、轮播定位
5、轮播的切换
6、对轮播进行分类
7、使用缩略图进行预知
8、轮播异形化
9、轮播时间
10、总结
用户是否对轮播有感知，这个则需要根据不同的场景进行判断，包括每个产品中的每个轮播对用户用户的定位也不相同，常见的应用场景品牌曝光、活动营销、产品展示，每个场景下相关的数据也不相同。
促销轮播banner
品牌推广轮播banner
产品介绍轮播banner
同时还有个关键因素，轮播的占比，这里以pc端为例若是产品是以品牌效应吸引用户的，大多轮播是以大的屏幕占比为主通常会占首屏的50%，如果是以营销、内容为主的产品，轮播通常以16:9、7:4的常规比例进行展示。
用户在使用产品时会默认忽略轮播区域，一般轮播都会有自动轮换机制，一定时间后自动轮放下一张banner，那么每当页面上进行轮播时便会吸引用户进行关注，效果上会有一定的提升，所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。
还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。
如果banner是作为内容传播希望用户通过banner了解内容，那么则要避免放在最后一位置，对于用户而言最后一张轮播路径过于长，并且用户很少会手动滑动banner。
国外一家公司在针对轮播中进行了相关的研究测试，随着页数的增加用户的点击逐步下降。
那么如果想让产品中的轮播更具有效果，则需要根据不同的场景设定策略达到目的。
不管在移动端还是手机端，轮播都有各种交互形式和尺寸，以pc为例在交互上会多样化一些，常见的几种则是通过滚轮滑动、通过点击切换两种。
如下图某艺术网站，它则是通过鼠标滚轮进行切换轮播banner，并且banner的占比也是铺满首屏，这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点，同时也符合用户目标。
在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换，并且占比也是铺满首屏，在医美领域用户更关注美感，而轮播形态也是符合用户的心理预期更加沉浸美观。
而在移动端轮播的形式就比较统一，大多都是自动播放+手指滑动进行切换。
在网页中轮播都会有当前的定位点，许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标，不用一张一张切换，但是在有些产品中会忽略这一点，设计中会做的非常小导致用户在点击上可用性不太友好，如下图中的banenr进度点设计上过于小导致点击上有些阻碍。
如以下网站去除进度定位的方式，通过缩略图预览来告知用户下一个banner的内容，空白区域也可以添加缩略图引导介绍等关键信息，帮助用户提前预知在体验上相对较好。
以下国外某网站在进度定位的设计上采用了标签文案方式进行设计，能够帮助用户更加全局的了解banner内容
定位主要是用来指示当前轮播的进度，像上图中讲的便于用户更加全局的观看banner的张数和当前进度。
以下网站的设计中则把定位与进度相结合，进度条展示该banner预计多久会切换下一张，对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。
以下是某个国外网站，不管是pc还是移动端都在轮播底部添加了水平条，告知用户当前位置
随着市场上产品同质化严重，产品的竞争力也更依赖体验，在下图中的数据可视化的网站上，在进度条上就利用了产品的特性以饼状图的形式进行展示。
在刚才上面举的例子中很多优秀的网站在设计上都很有创新性，但是需要注意一个点，在轮播中不只有自动播放，还需要考虑用户手动切换，因为在实际用户浏览中可能会对产品的播放时间达不到预期，此时则会使用手动切换，除去可点击的进度点，还需要上一张和下一张的入口切换。
在此基础上需要注意，在处于最后一张banner时，下一张切换还能不能点击，第一张时上一张切换还能不能切换，这个取决于产品特性和轮播张数，如果轮播张数过小的话则需要进行循环播放，如果过多的页数则第一步和最后一步不可点击。
上一张和下一张的距离远近取决于banner的大小，如果轮播banner占比较大时则需要考虑用户的操作时长，距离越短时间越快，为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出，便于用户寻找。
如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大，保持视觉平衡，因为小区域banner用户能够更加全局的观看，在使用上不会犹豫。
反观移动端在轮播中除了展示banner进度外很少展示切换按钮，移动端更加依赖手势交互。
当轮播banner过多时利用标签进行分类，用户通过点击标签进行查看相关的轮播组合。
此方式更适合一些电商平台、新闻网站这种内容过多的产品
如下图国外社交媒体网站则使用了标签进行分类，此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。
在banner首屏中，显示的内容越多，越能激发用户进行点击，像上面讲过的农业产品网站就使用下一张预览图的形式进行展示，当然不仅局限于这种形式，如下图中的餐饮网站把所有的轮播banner展示给用户观看。
相对于缩放图，图标展示效果上也较好，空间占用更少，使用这种方式需要谨慎，对图标的识别性要求较高，我印象中能够使用的这种方法的网站是苹果官网，让产品抽象化展示。
在移动端也存在这种设计手法，但是基于分辨率原因移动端的缩略图展示过少，最常见的如下图中的马蜂窝和企鹅电竞。
轮播最大的缺陷则是像刚开始讲的用户会默认为广告，对此可以使用个性化设计突破用户心理障碍，使轮播banner更具备亲和力。
如下图中的数码科技网站，利用产品与背景的结合营造出一种功能性的展示。
再例如下图中苹果官网入口，结合百度的定制化功能在大搜中进行个性化处理，把常规的banner轮播以功能卡片形式进行展示，同时卡片承载产品动画引导用户进行点击。
苹果官网进入后随意点击产品介绍页后会发现，苹果把轮播结合鼠标滚轮营造沉浸式观看，每个屏效内都展示产品一个功能特点，打破传统banner的展现形式。
自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级，如我们平常使用产品时会忽略banner广告，我们会更加关注移动中的东西，特别是在移动端上通常是banner进行轮播时才会关注。
谷歌设计团队曾对banner轮播的时间进行测试，测试结果得出5s-7s的轮播时间最佳，在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。
如下图谷歌商店的轮播时间设定在6s。
同时还需要注意，在自动播放的过程中如果用户鼠标hover上去后，则需要判定播放暂定，避免用户错过感兴趣的内容。
本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍，在实际产品中轮播有很多可用性上的问题存在，我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前两篇，探讨了个人对交互设计价值观的理解，以及其对从业者和用户的价值。
这一篇，我们就来探讨一下，如何做到之前提到的 4 点价值观。
先从“周到“开始。
仅为一家之言。欢迎留言交流，说出你的看法。
本着严谨的态度，先捋一捋概念。
常言道，金杯银杯，不如百姓口碑。
同理，周不周到，最终还是用户说了算。那用户是怎么评判的呢？通常是凭主观感受。
拿上篇文章中网易号文章编辑页面的例子来说，因为“保存”和“存草稿”功能做的不够好，所以给笔者留下了不够周到的印象。
翻译过来，就是，一些体验细节，影响了用户的印象。
《设计师要懂心理学》这本书中有条原则，叫“整体认知主要依靠周边视觉而非中央视觉”。
讲的是视觉和 UI 层面的用户认知。就是说，用户会关注并不显眼的边边角角的设计，而且这些边边角角的设计会影响用户对整体设计的认知和印象。
举个例子。假如说，微博信息流页面的扫一扫图标，在风格、大小等方面和其它图标不统一，就会给用户留下比较糟糕的印象，用户很可能会觉得微博的设计不够专业。
这些是 UI 设计层面的。在交互设计层面，也是类似的道理：体验细节会影响用户的认知。
总的来说，至少在常用的交互细节上，不要给用户留下负面印象，也不要让用户产生负面情绪，避免所有的不周到，才算是周到。
个人觉得，最关键的地方，是满足好小需求。
啥是小需求？
个人观点，笼统的讲， 小需求是一种共性需求， 主要是一些体验细节。比如信息的分类与展示、衔接不同页面的各种弹窗与提示、对各种状态的提示、对各种情况的到位解释，等等。
有小需求，就有大需求。
所谓大需求，更多是一种个性需求， 不同的产品，会有不同的大需求。比如短视频产品，它的大需求会包含视频的拍摄、上传、播放等；资讯类产品，它的大需求则包含文章的撰写、编辑、发布、查看等。
工作经历，笔者见过一些交互设计不够周到的产品。它们的共同特点就是： 大需求基本上得到了很好的满足，小需求没有得到很好的满足。
这一大段，就围绕如何更好的满足小需求来展开。主要建议如下。
笔者有个客户，是从事教育行业的，之前并没有接触过互联网行业的产品与设计工作。
这位客户找到笔者的时候，是想要设计一款小程序的界面。当时客户非常自豪的对笔者说，这个（原型）是我用墨刀画的，现学现做。
说起墨刀，本人也用过。和 Axure 相比，确实好用太多，在简洁性和智能性方面，感觉和 Sketch 有异曲同工之处。
关于墨刀如何好用，网上已经有太多溢美之词。笔者就结合自己的使用经历，简单总结一下：
1 好用，上手快。零基础，只要会操作常用办公软件，简单学一下就能上手
4 能查看页面之间的跳转逻辑。借助工作流功能，可实现这一点
以上主要是墨刀自身的优点。结合本段主题，我们再探讨一下，对于日常工作，墨刀这把利器有哪些优势。
1.1 可以把更多精力花在创作上
当我们不会用一款工具时，通常会有一些挫败感。如果必须要用，接着很可能就会有一点焦灼了。
而墨刀，基本上不会让我们体会到这些感觉。
我们也不用花无谓的时间去学习一些艰难的高深的技法，而是可以把更多的时间花在“创作”这件事上。
1.2 可以更好的去满足小需求
部分公司，可能面临如下情况。
公司没有专门的交互设计师，产品的原型由产品经理来画。产品经理本身还兼任项目经理。
如果项目又特别赶，客观上，产品经理确实没有太多时间去关注交互的体验细节。
主观上，如果产品经理对这些交互细节的兴趣或重视程度不足、同时产品经理上面的决策层也不去抓这些体验细节，最终的结果，就是产品的原型上可能会丢失很多体验细节。
笔者就有类似的经历。
一款 App，产品经理用 Axure 画的原型。评审或宣讲需求的时候，大家都是在电脑或会议室大屏幕上来看这个原型，同时所有人最先关注的是大需求。
理解完大需求，会有部分同学就大需求提出自己的看法或建议。最后，才会有部分同学就小需求指出不足并提出建议。
受限于职责、时间等各种因素，大家也不可能针对小需求提出太多建议。结果就是，仍然会有相当数量的小需求被遗漏，或者没有被很好的满足。
墨刀有两个功能，可以较好的规避这些问题。一个是工作流功能，一个是手机端预览功能。
工作流功能，类似流程图，即把所有页面以合乎逻辑的方式链接起来。客观上，会促使我们画出所有包含小需求的页面，包括弹窗、状态提示等。
支持多人的手机端预览功能，使得我们在手机上，可以通过点击等方式来模拟体验这款 App。这样的环境下，我们会更容易理解大需求，也更容易发现小需求存在的问题。
所以，个人的建议，就是用墨刀来画原型，同时把工作流和多人手机端预览（针对 App、小程序）这两项，作为硬性标准。
一款产品，在体验或使用时，非常容易发现问题。
因为这时候，我们可以松弛下来，把自己切换成普通用户。忘掉所有费脑子的需求和设计原理，只依赖经验和直觉来用这款产品。我们的主观感受，会告诉我们，这款产品的交互，到底周不周到。
据陆树燊的《微信团队的实验室文化》一文显示，张小龙评审微信的功能，不看原型图，不看设计稿，也不看 Demo，而是体验前后台代码开发好后的产品。这就意味着，如果一个功能在给到用户前有 N 个方案，就会有 N 个方案对应的前后台代码。
一定程度上，微信团队就是通过这种在正式发布前反复试错、不断打磨的方式，最终给用户提供了优秀的交互体验。
估计，绝大部分团队和公司，都做不到微信这样，开发 N 个版本，并去一一体验和比较这 N 个版本。
无法体验已经开发好的 N 个版本。但是，在真实的设备上体验 N 个原型，我们还是可以做到的。
原型虽然没有开发好的产品那么顺畅和流畅，但是，如果用墨刀在手机端体验一款加了链接和动效的 App 原型，一样可以发现很多问题。
不过，根据经历和观察，笔者发现，我们人类，是不喜欢体验原型的。
想一想，平常工作中，我们可能会乐此不疲的去体验开发好的测试版产品。但对于原型，大部分时候，都是匆匆忙忙就过掉了。
个人有个猜测，就好像人类喜欢逗猫遛狗、却不太喜欢逗桌子上的模型猫和模型狗一样，我们人类是不太愿意花费太多时间和精力去和原型这种“假产品”互动的。
所以，某种程度上，体验原型，是一种反人性的行为。
但却是一种非常经济和高效的方法。
因为首先，大部分时候，我们都是先选中一个原型方案，然后去设计、去开发；其次，等到开发好进入测试环节，这时候，原型往往就成了测试的标准，依靠测试来优化原型是不现实的。
所以，结合现状，综合来看，小需求能不能得到很好的满足，很大程度上还是要依靠原型。
也就是说，很有必要对原型进行优化。具体方法，就是在真实的设备上体验原型、反复体验、多人体验，并进行相应优化。
如前所述，用利器来创作原型，反复在原型里体验产品，这些强调的是内部力量，即自身的努力。
下面，再谈一谈外部力量，即外界海量的知识与经验。
说起外界知识，除了直接参考其他产品的设计以外，大家参考最多的，可能就是《iOS Human Interface Guidelines》和《Material Design》这些设计规范了。
根据笔者的实际经验，这两个来自苹果和谷歌的设计规范，很多时候，我们都是拿它们当字典用。即哪一点不会或不太确定的时候，去翻一翻查一查。
虽然这俩规范很优秀，但是却很难被我们“物尽其用”，因为它们的知识体系过于庞大，有点像一本字典。拿着“字典”里的每一条原则去检验我们的交互设计，这是很难做到的。
但是有一个设计规范，去非常适合拿来检验我们的交互设计，那就是尼尔森十大可用性原则。
太详细的就不赘述了，这里我们再简单回顾下这十条原则。
1) 状态可见
用户时刻清楚，正在发生什么
2) 环境贴切
营造一个用户熟悉的环境，比如语言、词语、图标等
3) 用户可控
控制权交给用户，并且多数时候，考虑支持撤销重做
4) 一致性
方方面面的统一，比如文案、视觉、操作等
5) 防错
尽最大可能，帮助用户，避免用户犯错
6) 易取：识别比记忆好
通过把组件、按钮等元素可见化，降低用户记忆负担
7) 灵活高效
优先考虑人数最多的中级用户，同时兼顾高级和初级用户
8) 易扫：优美且简约
阅读体验要好，扫视体验也要好；保持简约和美观
9) 容错
帮助用户识别、诊断，并从错误中恢复
10) 人性化帮助
日常的使用最好脱离帮助文档，但有必要提供帮助文档
个人非常建议，在日常工作中，把尼尔森十大可用性原则作为一把标尺，来时时刻刻检验我们的交互设计。
交互设计，在涉及体验细节的小需求上，避免所有的不周到，方才是周到。
用利器创作原型，要包含流程图；多体验原型或产品，以体验结果为准、而非讨论结果为准；参考优秀的设计规范，用尼尔森十大可用性原则来检验原型。
以上三点，可以帮助我们做到交互设计的周到。
其中，个人认为，最为核心的是第二点：多体验原型或产品，直到自己觉得周到为止。
因为，正如电影《霸王别姬》的一句台词所说：人，得自个儿成全自个儿。
最近有同学问老王，UI设计师是不是需要交互设计能力？
当然需要，不懂交互的UI不是好UI~
首先UI设计不仅仅需要把功能需求可视化，还需要注重用户体验。所谓用户体验，其实就是用户与页面的交互。而在交互设计中有很多的方法和理论，如格式塔心理学、尼尔森可用性原则、7+2法制、3次点击法制、功能可见性原则、菲茨定律等。他们大多的方法也是共同的。
所以呢，今天老王来说说交互设计用的最多的原则——尼尔森十大可用性原则。
很多情况用户是不知道当前状态的，所以在适当的时间内做出反馈很重要。不仅能让用户知道情况，还能防止用户发生错误操作。常见反馈有刷新提示、新页面加载提示、支付提示、下载提示。除了结果反馈提示外，对于进程中的页面会用进度条进行表现。
今日头条APP首页中，看过的文章标题变为了灰色、而没读过的文章标题依旧保留了黑色字体。
简单来说就是让软件看起来跟符合真实世界，还原现实认知。通过直观的视觉快速传达给用户。
音乐软件通过模拟现实唱片并结合旋转的播放动画，从而降低了学习成本，更轻松的理解界面。
说白了就是给用户发后悔药，当用户误操作时要给用户提供提供撤销、取消、重做等相关功能。买错商品可以无条件包邮退回。
拼多多凸显了“退货免运费”“7无理由退回”服务，解决了用户买到不满意产品的售后担心。减少了承担运费的成本，从而促使了用户快速下单。
一个好的产品从视觉上首先是统一的，色彩、字体、元素保持统一，能加强用户的记忆力。在交互中同样如此，页面结构、操作反馈都需要保持一致性。
QQ首页列表中不管你点击那一条目，下一级界面都是由右往左滑出。点击左上角返回按钮，会从左往右滑回，体验完全一致；几乎所有产品进入下一层级页面的交互方式都是如此。
为了减少用户错误的可行性，进阶是给出错误反馈是不够的，用心一点的设计师其实会发现很多的产品是这样做的。为了防止错误的发生，会进行防错设计。
比如在发朋圈时，点击返回按钮出现的提示弹窗。弹出框方式会增加不可逆操作的难度，减少操作删除带来的顺势。更人性化的是，提示给出了保留和不保留按钮选择，选择保留退出还可以再次编辑。
通过把组件、按钮及选项可见化，减少用户的记忆负荷，让使用更轻松。在使用过程中不需要记住上一页面的信息就能完成当前页的操作。
通常更新完APP之后，会出现新功能引导。引导提示能告诉用户新功能所在的位置和作用。这也是协助记忆原则的体现。
好的产品不仅仅需要满足新用户，还需要满足深度用户。保证第一次使用者，能清晰明白功能。对于老用户需要提供更高效使用方式。
对用户重复使用的功能，提供便捷按钮。比如叮咚买菜的再次购买。
适当的留白能让页面功能突出，也能让视觉更加舒服。精致的图形元素能给用户留下好的印象。
很多K12的产品会运用IP形象进行延展，不仅强化了品牌记忆力，更增强了互动感。
好了，以上就老王对尼尔森十大原则的解析。其实原理很简单，甚至很多都是很直观的废话，但如果不把它们一条条列出来，还是有很多人连这些废话都做不到。
关注细节，才能成就大事！
一、什么是交互设计？
先来看一下百度百科的定义
交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求。简而言之，交互设计是解决特定场景下的人群如何高效使用机器或软件的目标行为。
为什么要做交互设计
在使用网站，软件，消费产品或各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候，可能为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。因此交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了。
从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。
通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。
二、交互设计常用原则和定律有哪些？
尼尔森十大可用性原则
1、状态可见原则
系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。
即在用户操作界面功能时给予实时反馈，例如：页面加载状态提示、按钮点击后的状态变化、进度条提示等。
2、环境贴切原则
设计的一切表现和表述，尽可能贴近用户所在的环境，将现实环境的操作功能巧妙的转化为线上功能，使其贴近用户。使用用户能听懂的专业术语，涉及到专业化语言时要转化成用户熟悉的语言。
即模拟真实的事物，使用户更容易理解。例如：天气应用中的天气插图、音乐播放器的胶片都是生活中熟悉的场景和物品，降低理解成本。
3、操作可控原则
对于用户的误操作，提供二次确认或者撤销的功能，这样可提高用户的操作可控性。
例如：删除联系人二次确认提示、消息可撤回操作。
4、一致性原则
遵循统一的产品设计规范／逻辑。这里的一致性包含产品和跨平台产品之间的一致性。
一致性包含视觉交互、文案描述、组建样式等，例如：微信小程序设计规范。
5、防错原则
设置防错的机制，减少用户犯错。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。
例如：用户名称校验提示、手机号码位数限制等。
6、易取原则
减少用户记忆负荷，在适合的时机给用户需要获取的信息。
例如：验证码读取、找人转账提示等。
7、灵活高效原则
提供灵活的操作和高效的获取信息能力。
例如：手机号码一键登录、消息关键字识别等。
8、优美简约原则
保留产品最主要的信息，如果不是优先级最高，要尽一切可能避免去影响产品的简洁和美观。
9、容错原则
用户在使用产品过程中出现了问题，及时准确的告知用户出现问题的原因。
例如：信息输入提示、搜索无结果等。
10、提供人性化帮助
在用户需要的时候提供必要的帮助说明。
例如：新功能引导、解释说明文案等。
七个交互设计定律
1、菲兹定律
点击一个目标的时间同以下两个因素有关：
（1）设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；
（2）目标的大小（S）。目标越大，所用时间越短。
该定律经常运用于鼠标从点A到点B的运动。
例如常用按钮的尺寸设计等。
2、希克定律
一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。
交互设计中要合理设置选项，以免用户使用中决策时间过长，降低使用效率。
3、米勒7±2定律
乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。
例如：手机号码的分位显示、应用中标签栏数量等
4、邻近性法则
人们通常将距离近的事物划分为一组。
界面设计中可以用对象间的相对距离来区分信息层级。
5、复杂性守恒定律
每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节，这一固有的复杂度都无法依照我们的意愿去除，只能设法调整、平衡。
例如：在智能手机出现之前，手机上的操作按钮都是实体按钮。在智能手机出现手，手机被整个屏幕占据后，所有的操作都集合在了手机系统之中，等于把物理操作转移到了系统操作中，其本身的功能复杂程度并没有发生改变，只是转移了而已。
6、防错原则
大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。
例如：登录时用户名校验，手机号码位数限制等。
7、奥卡姆剃刀原则
“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。
”这个原理称为“如无必要，勿增实体”，即“简单有效原理”。
在设计中可以使用户关注最主要的信息而非其它无关紧要的事物，从而提升使用效率。
三、交互设计如何开展工作
首先在交互设计师拿到需求后不要急着打开软件开始绘制线框图，而是要先分析需求，了解产品的战略层和范围层的业务目标。把握产品设计大方向，只有方向对了后面的工作才是有价值的。
把握了产品方向，下面就该进行需求的分析，
首先针对需求考虑5个问题：
1、为什么要做这个功能？（业务需求）
2、产品期望得到怎样的成果？（业务目标）
3、谁来使用？（目标用户）
4、他们要怎样使用？（用户需求）
5、如何让他们都来使用？（将业务目标转化为用户行为）
清楚这5个问题后，再根据交互设计流程进行一步一步的进行
这实际上就是对需求的战略层分析。
我们进一步分析业务需求（业务目的、业务目标）和用户需求（目标用户、用户体验目标），把握关键因素（用户的动机、担忧和影响目标达成的障碍）。
归纳这些需求，明确设计策略。
将“业务目标”转化为“用户行为”，通过引导用户的使用来帮助产品实现目标。
从设计“用户行为”到设计“用户界面”，用户行为决定了用户界面，用户界面也导致了用户会出现什么样的行为。
设计需求分析方法就是要帮助用户创造动机、排除担忧、解决障碍。
四、如何进行用户研究，方法有哪些
评估的形式及方法
常见的评估形式分为三类：
1、评估主体：根据评估的主体不同来进行区分，即谁来做评估。
按照评估主体来区分主要有两个主体：用户和专家
用户评估主要靠收集用户使用数据，也就是用户测试，它的数据相对客观，但时间和费用较多，评估范围较窄。
专家评估是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。专家评估相对主观，但费时少、费用少、评估范围窄。
两种评估方法可以相互补充，并结合使用。
2、评估性质：例如定性评估、定量评估或着其它方式。
按照评估的性质来区分可以分为定量评估和定性评估。
定量评估是指对可以计量的部分进行评价，如点击量、使用率等，可以用数据来说明。
定性评估是指对非计量性的部分进行评价，如流畅度、舒适性、创造性等进行评价。它只能表示一个度，无法准确用数据来说明问题。
3、评估过程：按照评估的过程来进行区分。
从评估的过程来区分可以分为理性评估和感性评估。
理性评估相对客观，从客观的角度出发判断客观事物。
感性评估更为主观，评估结果并没有客观规律。
在实际应用中也需要将理性评估和感性评估结合使用，才能完整的完成我们的任务，达到我们的目标。
常见的评估方法有四种：
1、原型评估方法：在产品研发过程中，对于界面设计以及程序的测试来获得用户的反馈是至关重要的。以用户为中心和交互式设计的重要因素之一就是原型方法，原型方法的目的是将界面设计与用户的需求进行匹配。
一般来说原型评估方法分为三大类型：
（1）快速原型：原型迅速成型并分配实施，在原型实验收集的信息基础上，系统从草案中得以完善。
（2）增量原型：应用与大型系统，从系统的基本骨架开始，需要阶段性的安装，及系统的本质特征是在初次安装完成后允许阶段性测试，以减少遗漏的重要特征。
（3）演化原型：对前期的设计原型不断进行补充和优化，直到成为最后的系统。
2、简易测试评估方法
在条件不允许的情况下，可以采取简易的方法来对用户体验进行评价。步骤是：
（1）实验室环境准备：准备好测试用的电脑或其他媒介。两个房间，房间1用来对被测试者进行测试，房间2用于设计师和工程师的观察。
（2）被试选择：分为用户组和专家组。
（3）进行测试：房间1中被试者根据自己的选择进行操作和测试，同时说出自己的内心想法，观察员在调查表上记录被试者的每一次的操作情况，包括出错情况和被试者的口语描述，当被试者在测试过程中遇到困难或操作无法进行时，观察员要给予一定的客观提示。房间2中通过相关设备将房间1的情况传输到房间2，设计师和工程师实时观察和记录被试者的情况，以便今后对产品做进一步的修改和完善。
（4）结果分析：通过多次测试后，将测试结果汇总，提取出交互设计中存在的问题，以及对交互设计有益的建议形成测试报告。
3、眼动评估方法
眼动追踪可以用来评价对产品（包括硬件产品和软件产品）设计的感性意象，评测产品设计特征。眼动评估的主要指标有注视热点图、搜索过程测量指标、兴趣区域即用户视觉注意的焦点区。可以结合口语分析法了解用户的所想 和所做。
4、脑电评估方法
通过对脑电信号的分析，研究者可以探索大脑的认知加工过程和受试者的心理状况。近年来脑电评估方法在人机交互心理学等领域应用广泛，被用来评估交互设计、人机界面、产品设计等方面的内容。但是脑电评估也有一定的缺陷，例如空间分辨率上的局限性，因而对某些认知过程和脑区的定位并不是很准确。第二，在许多相似的实验研究中，由于研究者采用了不同的实验材料和方法等，实验结果也存在差异性。第三 ，由于采集记录时间的滞后性，脑电所记录的并不一定是当下被试者所想到的内容。
采取哪种方法来开展用户测试和评估，要根据不同的任务结合不同的环境来开展，比如：时间、成本、资源等。
启发式评估法
是专家评估法的一种，也被称为经验性评估，最初由Nielsen博士提出。简单来说，启发式评估是一种简易的可用性评估方法，使用一套相对简单、通用、有启发性的可用性原则，让几个评审根据专业知识和经验来进行评估，发现产品潜在的可用性问题。
启发式评估的两大要素：评估者和评估参照的原则。
对评估者的要求主要有四个方面：
（1）人数：推荐3-5人，有时会更少
（2）知识：最好同时具有可用性知识及设计知识
（3）身份：最好是非设计者本人，否者不具有客观性
（4）岗位：设计师或用户研究员
评估参照的原则有：尼尔森十大可用性原则、八项黄金法则、首页可用性指南、ios设计指南、拓展原则、HHS网页设计与可用性指南等。具体需要根据实际项目来选择，常用的是尼尔森十大交互原则。
什么时候适合使用启发式评估法？
交互设计和UI设计阶段、测试优化和产品发布后的阶段。
启发式评估的优缺点有哪些？
优点：成本低、效率高、发现大多数可用性问题，甚至是用户测试时不会出现的问题。
缺点：不能代表真实用户，相对主观、有时候发现问题过多、对评估人员知识背景要求较高。
什么时候适用？
（1）适合时间、资源有限的情况下快速发现可用性问题，降低风险及成本。
（2）版本变动不大的情况下，小成本检验。
（3）作为可用性测试的之前准备。
启发式评估流程是什么？
（1）准备阶段：确定范围、背景调查、参考评估原则、评委邀约、材料准备
（2）执行阶段：任务走查、整体走查、结果记录
（3）分析阶段：汇总讨论、报告总结、优化方案
可用性测试
先来看一下我们在平时工作中常常会听到这样的问题
产品经理：我们的用户觉得产品好不好用？使用过程中会不会遇到问题？他们是否满意？
设计师：设计的过程有一些纠结的地方，不知道实际用户是怎么理解和操作的怎么办？
产品开发后：想在大推前检验一下产品是否靠谱，适不适合大推？
当我们遇到这样的一些问题时，如何找到方法快速得到答案呢？
那就是接下来要介绍的可用性测试方法。
可用性测试是一种常用的、高效的方法。
它的定义是：通过观察具有代表性的用户，完成产品的典型任务，从而找出产品可用性问题并解决，目的是为了改善产品，让产品更容易使用。
什么时候适合做可用性测试呢？
一般是在：交互设计或UI设计、测试优化、正式发布三个阶段来做。当然是越早做越好，可以尽早发现问题并及时调整。
类型分为两种：形成式和总结式
形成式特点：小样本、发现问题为主、不能做定量对比。
总结式特点：大样本（30人以上）、定量的评估、可以做对比评估
可用性测试可以解决什么样的问题？
1、发现问题，产品在体验上是否存在问题
2、检验实现，期望的设计目的有没有达成，是否满足了用户的期望
3、产品评估，用户是否会满意
4、理解用户，了解用户行为习惯，了解用户认知，找到某些问题的原因
测试流程是什么？
整体上分为4个阶段：1、准备 2、测试 3、分析 4、优化
1、准备阶段要做的有哪些？
确定目标：确定测试目标决定了后面测试过程要怎样去设计
常见的测试目标有：
·对整个产品做可用性评估
·对新增的功能模块进行评估
·提前观察新方案对新老用户有怎样的影响
·提前检测改版是否达到预计目标
·设计时存在争议，如何选择解决方案
·某个环节流失率较高，检测是否为设计原因导致
·需要拓展某一类特殊用户，测试针对这类用户在设计上是否需要作出调整
准备测试方案
方案中应当包含以下内容：
·测试目的：明确测试的目的及范围，测试目的决定了测试方案
·测试关注点：与负责的设计师一起梳理测试中要关注的问题
·用户招募：招募要求，样本配比，招募渠道
·经费预算：奖励的形式和额度
·时间计划：用于把控时间计划
撰写测试脚本：设计测试任务，通过用户行为去观察提问来获得我们想要的内容
基本的流程有：
·暖场：3min，简单聊天，消除用户的紧张情绪
·测试说明：2min，对测试内容规则做说明
·测试前访谈：10min，了解用户基本信息
·简单试用：3min，让用户熟悉产品
·测试执行：30-45min，提示任务并观察
·事后访谈：15min，针对疑点问点追问，填写评价表
·道别：5min，支付礼金，送用户离开
招募用户
招募什么样的用户呢？
·根据测试目的来定，找出与测试目标有关的筛选纬度
·特别考虑用户使用行为相关的特征，例如竞品使用经验，使用产品的目的，用户的活跃度等
·挑选最核心的纬度，转化成用户招募的条件，并尽量客观化，具体化，可衡量
·避免设置交叉条件过多，导致样本代表性降低
·学会辨别真假的用户信息
招募多少用户合适？
·以发现问题为目的快速可用性测试，6-8名即可
·考虑产品的复杂性，覆盖人群差异性，适当做调整，拓展到10-15名
招募渠道有哪些？
·公司内部
·现有产品用户库
·公司其他产品用户库
·熟人，朋友等
·推广渠道：官微、公众号、门户网等
·社区，论坛，qq群等
·第三方调研公司
准备测试素材：低保真或高保真原型，或线上已经可以使用的产品，也可以准备一些量表工具来辅助测试。在测试
过程中需要用到的电脑或手机设备，摄像头，纸，笔，桌椅等。
测试场地选择：
·专业可用性测试实验室：一般对测试质量要求较高，旁听人数较多且需要采集丰富的数据的时候采用此方法。实验室有两个房间，一个测试间，一个观察间，中间有单向玻璃分隔。测试间中有多角度的摄像头，用来记录测试过程，观察间可以同步看到测试间里的情况，
·普通测试环境：在观察人数较少（小于3人），条件有限时使用。
预测试阶段：正式测试前进行预测试，保证测试流程通畅
·走查：记录可能出现的问题
·预测试：找人先测试一下
·调整：调整测试流程
正式测试阶段
测试参与人员有
·主持人：引导整个测试流程
·记录员：记录操作行为，访谈内容，发现问题等
·产品团队：参与旁听，观察，结束后交流
·用户：完成测试及访谈任务
测试过程中需要观察的要点：
·用户是否独立完成了任务
·是否存在无效操作或不知所措的情况
·用户是否满意
结果分析
边测试边总结，越及时越好
·测试完一个用户，做一次小结
·测试结束当天写小结，与设计师当场讨论
·重要问题反馈后再总结分析报告
·边测边改，边改边测
结果分析4个步骤：1、对发现分类 2、整理不确定项 3、评定优先级 4、结果记录
撰写报告
从4个方面来写：
·总体如何
·有哪些问题
·严重程度如何
·建议是什么
·除此之外，还可以围绕关注的问题，未满足需求补充分析
优化跟踪
在测试之后需要出优化的方案，测试优化的过程是循环的。
测试之后如果还有其他问题没有得到解决，可以结合其他的一些测试方法来得到。
问卷调研
问卷调查法是以书面提出问题的方式搜集数据的一种研究方法，研究者将所要研究的问题编制成问题表格，让受访对象以邮寄、当面作答、在线作答或追踪访问的方式填写，从而了解被试者对某一现象或问题的看法和意见。问卷调研可以用于需求挖掘阶段，也可以用于产品上线后的评估阶段。
如果是想了解用户对产品上线后的满意度，可以使用问卷调研的方法。它比较适合去了解用户的认知态度，也可以附带了解用户的行为习惯，
问卷调研的优缺点
优点：统一性、灵活性、量化性、匿名性
缺点：（1）只能获得书面的信息，而不能了解到生动、具体的情况。（2）缺乏弹性，很难做深入的定性调研。（3）调查者难以了解被调查者是否认真作答，是不是自己填写的。（4）填写问卷比较容易，有些别调查者会随意选择，或者按照社会主流观点选择，这样会使调查失去真实性。（5）回复效率低，对无回答者的研究比较困难。
问卷调查的使用场景
适用于：（1）需要进行定量分析的调研。（2）需要匿名进行调研的问题。（3）对已有假设进行检验。（4）寻找问题隐藏的关联。（5）对产品设计用户认知及态度的评估。
不适用于：（1）发现和描述具体问题。（2）探索受访对象的模糊态度。（3）获取创新想法。（4）获取精确的行为数据。
问卷调研流程
1、确定目标：确定调研目的、对象、分析目的和应用对象。
2、调研方案：通过访谈、经验、理论等，确定调研框架，题目选项，分析思路，投放渠道，相本配比等。
3、问卷设计：问卷设计，问题美化，投放渠道。
4、问卷测试：多人测试，确保问卷的可读性，逻辑通畅
5、问卷投放：按照计划好的投放渠道进行投放，回收数据，数据清洗
6、问卷分析及填写报告：分析及报告填写，调研结果落地
数据分析
概述：通过在网站或应用中进行数据埋点，获取用户对产品的使用和行为数据，并进行基于产品体验优化的数据进行分析。
数据分析可以做什么？
1、可以做到用户从哪里来，来了多少
2、获取用户属性，用户地域，用户设备
3、访问了哪些页面，使用了哪些功能，消费了多少钱，消耗了多少时间
4、哪些流量可能存在问题，忠诚度如何，活跃度如何，有没有达到目标，和行业相比如何
5、流失情况如何，离开之后是否还回来
可以作为产品的眼镜和大脑，提供客观衡量的依据，可以持续优化改进。
数据获取方式的对比
日志文件：优势，完整的服务端请求记录。
缺点，日志的获取和清洗有过滤成本，许多页面操作无法记录。
JS页面标记：优势，数据获取可控、灵活，可以对页面操作记录进行记录，获取数据比较完整丰富。
缺点，需要在页面植入JS标记代码，某些情况下无法获取，如当用户禁用JS功能时。
常用的数据监控平台
1、第三方监控平台：如Google Analytics、百度统计、腾讯云分析等
2、自研平台
数据分析流程
1、监控 2、定义 3、埋点 4、测量 5、分析 6、优化
Web分析常用的指标
PV：是指页面浏览量，网页浏览数实施评价网站流量最常用的指标之一，用户每一次访问网站中的页面均被记录，对统一页面多次访问，访问量累计
UV：是指独立访客，是通过互联网访问、浏览这个页面的自然人
UPV：是指唯一身份综合浏览量
访问：是指在一定时间范围内，网站所有访问者对网站发起访问的总次数，从访客来到网站到最终关闭网站所有页面，记为一次访问
识别用户的方式：IP、IP+User Agent、cookie、User ID、设备ID、其他
复合指标
跳出率：指用户来到网站，只浏览了一个页面就离开的访问次数，占全部访问次数的百分比，简称“来了就走”。跳出率可以被用来衡量流量和页面质量，高跳出率表示访问者对着陆页面不感兴趣，没有继续访问更深入的页面。也可能页面设计存在问题，也可能是导入的用户不匹配。跳出率可以通过调整广告渠道，优化页面内容来降低。
退出率：访问者离开网站一次被记录为一次退出，某一范围内退出的数量/该范围的综合访问量就是退出率。如果关键流程中的某一页面退出率高，代表某一页面可能出现了问题。
访问时长：网站停留时长，页面停留时长，应用使用时长。访问量是访问质量的一个衡量指标，较长的访问时间说明用户与产品进行了较多的互动。
访问深度：可以理解为单个用户平均访问的页面数，是PV/UV的比值。访问深度也是访问质量的一个衡量指标，可以考察用户是否和网站进行了较多互动。这个比值越大，代表网站的粘性越高。
转化率：指在一个统计周期内，完成转化目标行为的次数占总访问次数的比率。根据设置不同目的进行计算，例如注册转化率、付款转化率等，是一个重要的分析指标。
移动端基础指标
移动端的基础指标监测与web端略有不同，但分析思路大致相同。指标分为：新增设备、累计设备、启动次数、单词使用时长。
常见分析内容
流量分析（哪里来？）、用户分析（什么样的用户？）、行为分析（如何使用的？）、路径转化（表现如何？）、流失分析（粘性如何？）
A/B test
A/B测试是一种帮助网页优化实验的方法。A/B测试的目的在于通过科学的实验设计和采集数据的方式，来获得具有代表性的实验结论，从而寻找到更好的产品策略。
简单来说，就是为同一目标制定两个方案，让一部分用户使用A方案，另一部分使用B方案，记录用户的使用情况，对比两个方案的结果，选择更符合的方案。
A/B test一般会在产品改版正式上线之前使用，来验证新的设计是否可以提高产品的表现。
A/B test可以测试的元素有：标题、图片、颜色、社交元素、段落文本、按钮、导航、任务流程、页面布局、价格、视频等。可一次只改变一个元素或一次改变多个元素的方式来测试，这就是两个测试类型单变量测试和多变量测试。
A/B test工具
Google Website Optimizer：搜索巨头提供的免费A/B test工具，一个很好的入门级工具，但是没有一些先进的功能。
Visual Website Optimizer：一个易于使用的A/Btest测试工具，包含功能有所见即所得的编辑器，单机地图，访问者分割和标签等。
Unbounce and Performable：集成着陆设计的A/B测试工具。
Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target：企业级测试工具
App Adhoc Optimizer：国内A/B Test工具，同时支持前端（Web/H5、IOS、Android）及后端（Node.JS、PHP、Java）AB测试服务的专业Saas平台
Optimizely：是网上现有的最专业的AB测试工具之一，它的价格要比其他的工具高很多（也可以免费使用一个月），它提供了一些非常好的功能。
Unbounce：对于登录页面的测试来讲非常不错，而且它不仅仅是个测试工具，还可以在无需自己编写任何代码的情况下来创建登录页面。
如何做A/Btest
1、确定目标，例如提高网站的付费转化率，降低跳出率等
2、测试方案，建立假设：购买按钮的颜色会影响点击率？缩短流程可以提高复费率？改变导航可以降低跳出率等？
3、创建相比较的两个版本，改变其中的变量
4、发布测试，将部分流量导向B方案，但不一定是5：5
5、数据分析，收集数据，对比AB版本的转化率、跳出率、留存率等
感谢阅读！
蓝蓝设计的小编 http://www.lanlanwork.com
