交互输出文档的作用
文档这个东西，我们又爱又恨，爱的是它能够记录并且在工作中让大家高效的协调合作，恨的就是很多人对文档嗤之以鼻非常敷衍，以至于文档不但没有起到它应有的作用，反而成为了一个不负责任的借口。所以一份合格或者优秀的交互输出文档对于一个项目的流转以及团队的配合来说是至关重要的。交互文档的主要利益相关者通常是以下几个角色：交互、产品、开发、UI
交互
首先优秀的交互文档必须在交互组内部进行过审核，包括一致的撰写标准和模式的使用，一个比较规范的交互设计组对于交互的撰写标准也是有严格的规范的，以及在什么情况使用什么交互模式还有组件库的调用都会有详细的说明，那么你的交互输出文档就必须满足团队设定的规范。
其次对于其他交互设计师来说，你的设计方案中是否会出现其他人负责的模块，那么在评审的时候需要同步，虽然交互输出文档对于其他交互来说不是直接受益人，但是在团队同步过程中也是非常重要的。
产品
每个公司对于文档的要求和规则不一样。小公司可能没有交互设计这个岗位，那么可能产品连prd文档也没有，仅仅只是一个简易的需求说明文档，就更不用说针对交互规则的说明文档了。
很多有完善规模和流程的团队不仅会有详细的需求说明文档也有很完善的交互说明文档。我们首先要明确的一点是那么多文档最后是给谁看的，一共在项目中会有多少文档产生。
通常产品经理会在项目初期做一份prd文档（Product-RequirementDocument，需求说明文档），这个prd文档主要是给业务方、交互和开发看的，在这个文档中需要包含一些业务规则以及交互规则，所以交互的输出文档是需要和产品的prd文档合并的。
当然如果你是一位很有自驱力的人，那么你可以自己推进需求并落地，一个人就可以完成prd文档的撰写和需求的落地了。
开发
特别想给各位提个醒，在开发需求评审的过程中，请一定记住你们评审的目的，开发同学也要注意，请把重点放在需求是否能实现以及开发相关的地方即可，请不要考虑为什么要这样做，或者你觉得应该怎么设计，一旦进入了开发对需求和设计的评头论足那么这个会议效率就相当低下。专业的事情就交给专业的人去做吧，可以私下讨论但不要在评审会上各抒己见。
交互输出文档对于开发的作用就是，开发可以更好的还原该功能中交互的跳转以及逻辑，所以我们尽量把交互规则写明白写详细，比如按钮在press和default时候是否样式会有变化，或者页面转场的方向，这都是一些细节，减少不必要的低效沟通。你会发现有些时候为什么开发总是来问一些规则，就是因为文档中没有描述准确，所以开发和交互都需要花时间去同步这个细节。
所以这个也非常考验交互设计师对需求文档撰写的功底，并不是图片文字随意摆放就可以的。和开发合作时也是一项内部的体验设计，你把文档写好了，开发看起来也舒服，满意度也高。如果是一堆文案，连基本的对齐都没做到的话，谁来看都会看不下去。
UI
交互输出文档对于UI来说，作用就非常简单了，但是这里也会碰到问题，那就是交互同学只需要把信息的层次表示出来即可，千万不要画到连视觉同学都没有发挥余地的程度。所以为什么现在UXD体验设计那么火，就是因为交互和UI其实重合度是很高的，只要有智能化组件库和工具做支撑，那么在交互和UI的设计流程中，时间就会大大降低。
交互输出文档的内容
在这里，我们就将整个prd文档的内容给大家分享一下，不仅仅是交互需要输出的部分。因为一个高阶的交互是需要能够独自产出prd文档的。然后不同的公司对与文档的要求也是不同，大家做参考即可。
一份基础的prd文档主要由这几部分组成（其实就是这个需求的来源以及推导过程和如何落地的说明）：
1.项目概要
a.需求背景
这个是一个项目最重要的部分，可以说背景没有搞清楚，后面都可以不用做。这个指的就是我们做这个需求的价值和原因。比如我们app中业务方（运营）需要做一个扫一扫功能，那么这个功能首先我们就从业务价值和用户价值两个方面去评估，根据对业务方的沟通之后我们发现扫一扫功能将会在周年庆的时候通过物流包裹上的二维码，让用户进行扫码参与活动这样的玩法。
所以这个需求对于业务方来说是一个转化手段，通过扫码参与活动-领券-消费，确实是一个不错的玩法，但是大家如果只盯着眼前的问题或许就不够了，比如当周年庆结束之后这个功能还有什么用，他在以后的规划中的存在是怎样的。在所有的包裹中印上活动的二维码这个时间周期和成本有多大。
其次，对于用户来说，扫一扫并不是帮助他们解决了某个问题，而是我做了一个东西，同时搭配着这个功能让你们去使用，对用户来说是一个很可有可无的功能，如果线下包裹上的二维码破损了也是非常影响体验并且是不可控的。那么综上所述，既然要做一个临时的活动用其他的方式会不会更好？
所以在这个文档中的第一步，首先就是要确定需求的背景、价值，也就是说，你这个需求是怎么来的，比如再来讲我们一个店铺的优化项目，在这个项目中，首先我们必须在评审的时候说清楚我们为什么要对其进行优化和改版，一定是出现了或者我们定义到了某个比较严重的问题，这边大家对我们app业务可能不是很了解我就简单说了，就是个人中心和店铺营销场景重合过多，并且卖家的同时可以买和卖两个场景存在，所以店铺页通过我们的数据分析和用户的访谈我们发现了一些机会点，以及我们必须突出一个核心场景让用户有明确的分辨。
另外就是背景的描述也可以带上你的调研结果和分析，比如之前我们做首页优化，我们观察了近5个月的数据，都呈现下降的趋势，所以之后有进行了一系列的访谈和用户体验地图分析才有了这个需求的背景产生。
b.需求目标
目标很好理解，就是我们希望通过这次需求迭代达到一个什么成果，比如我们之前做过一次整体的体验优化改版，那么我们的目标就是减少用户的流程跳失、提升整体体验满意度、提高用户的任务转化率，其中我们做了一个商品关注的功能，由于是限时特价商品所以是限量的，在规定时间进行抢购，为了让用户的使用场景统一我们打算在应用内做一个商品关注功能，所以在这个需求的初期，我们对这个功能的目标和预期是提升xx百分比的转化，提高x%比的gmv，提高用户对关注商品下单的效率和满意度，之前很多用户想要购买商品需要自己在手机端设置闹钟，不方便。所以这个功能的一个目标就是解决用户场景迁移的问题。设定目标之后，就是为了在上线后对其进行复盘和数据跟踪还有用户跟踪。
可以用一句话来描述：针对什么用户在什么场景下解决用户的什么问题，达到什么目的？
c.需求范围
需求范围也相当于范围层，指的就是在该需求中我们需要做哪些相关功能以及功能涉及面。举个例子，之前说的扫一扫功能，不同的产品定位对于扫一扫功能的要求也是不同的，比如说微信在扫一扫功能中承载了：扫一扫、相册、封面、街景、翻译、手电筒等诸多功能，再比如淘宝，有扫一扫（ar、拍立淘）、相册、历史、帮助、手电，这说明了不同产品对扫一扫功能有不一样的要求，所以在需求范围内我们需要把本次需要做的功能进行描述，并且该功能是否影响其他功能的使用和对整个产品的影响范围。并且我们也会讲所需要的功能进行拆解和优先级拆分，在表格中编辑。
d.调研分析
调研分析其实就是为我们第一步背景和价值做准备，由于汇报方案和评审，或者在项目推进时，我们需要有相应的论据来支撑我们方案的客观性，所以在这一板块中输出的结论就非常重要，比如之前的首页改版，经过用户研究小组的访谈和数据分析得出相关的结论，通过埋点找到相应板块的点击数据和异常点，然后再进行一系列的问卷和访谈研究，找到结果，都是为了辅助项目的背景以及在评审中大家对需求价值的灵魂拷问。由于数据和调研结果比较敏感就不过多放了。
e.版本日志
日志是一个非常重要的组成部分，做过开发的同学都知道log 的重要性，当我们跑不通的时候我们都会去检查log，然后多测试几遍可能就找到问题所在了，其实我们的版本日志的作用也是这样，但是一个是对自己来说可以记录自己的工作过程，还有思路的变化，第二就是对外，包括和需求方的讨论，会议的纪要等。
要注意的是会议纪要在备注中需要详细说明，以做证据。同时也要邮件通知相关人员和负责人。可能有些公司还会放一些评审记录，比如各部门负责人对方案和需求的建议，业务方和技术负责人的一些建议也会放在项目概要中，而这个prd文档也可通过内部服务器进行实时更新和保存，如svn。方便大家对需求的进度和迭代有一个直观的追踪。
f.项目成员
这个就不用多说了，产品、运营、交互、视觉、开发各司其职，照相馆人员即可，就不至于当项目开始进行了人员分配还没到位就尴尬了。
2.需求方案设计
a.业务、任务、界面流程图
有些同学不是特别明白业务流程图和任务流程图的区别，这边给大家简单介绍一下
业务流程图：
意思就是在这个需求系统中，相关利益者的业务关系，任务信息的流向的一个图标。比如这个简单的例子，用户在点外卖这个场景中，相关的利益者有用户、店家、外卖员三者，那么当用户开始触发流程后，这3者在这个流程中就会各司其职，而业务流程图也很明显的告诉大家所有联动者的指责和流程走向。
任务流程图：
用户在具体执行某一个任务时候的工作流程，以及其核心任务的操作步骤，比如在登录注册这个任务中，用户需要进行一系列的操作，在这个流程中用户的操作引发的系统判断需要详细说明。
界面流程图：
界面之间的跳转关系和路径，在这个流程图中，我们不需要吧详细的说明写上，只需要将需求中涉及到的页面跳转进行叙述即可。
b.相关说明和规则
接下来就要开始我们交互文档最为关键的部分了，如何书写交互说明，以及交互说明应该包含的内容。
1.全局思考
在做交互方案也就是我们画原型的时候会思考一些问题：
a.整体思考
1.信息架构是否容易理解，信息分类是否合理，比如我们的信息架构是否采用了用户容易理解的，市面上常用的信息架构。
2.信息层级和路径是否合理，不一定要最简，但是要高效，信息的优先级是否放置准确，信息组织是否具有相关性、逻辑性。
3.主题是否清晰，3秒内告诉“我”在哪里，并且可以做什么
4.方案的延展和后续功能规划的可扩展性
b.用户权限
根据不同用户的权限对该需求进行检查，比如普通用户、vip用户、内外网用户、游客用户，在登录未登录时候对需求内功能的使用是否有影响
c.登录方式
用户登录和注册、终端的兼容，不同方式注册的用户是否需要补填相关信息等等
d.流程
1.该需求中的功能流程是否和其他类似或者相同功能流程保持一致性；
2.逆向流程和非正常流程的思考有没有完全；
3.流程的闭环有没有做好；页面跳转的方式是否合理；
4.中断后的恢复状态如何呈现；
5是否保留原信息等等
2.内容、状态和显示
a.内容的获取来源
例如下方的图片为例，banner的图片来源和发现feed流的图片来源肯定是不同的，那么就要写清楚，图片或者数据的来源是来自于用户的上传还是系统后台的配置获取；并且获取的方式是如何的，是需要手动下啦刷新还是切换页面自动刷新，还是设定时间自动刷新。
字段、图标是从接口获取还是前端写死，以及气泡展示的规则等等。另外一张图片可能用在多个地方，而可能呈现的尺寸不同，所以在涉及到相关图片使用时要注意剪裁规则和图片的来源。
b.缓存机制
图片以及一些资源通常我们需要对其进行缓存，有些同学不清楚什么是缓存，缓存是在计算机上的一个原始数据的复制集，一般来说需要缓存的内容是通过浏览产生的，包括图片以及cookie等，浏览过的视频和广告也会被缓存。同时在不同的网络环境下缓存的时间标准也不同，无网络那肯定只能读取缓存文件，wifi环境下缓存时间可设置的短一些，而流量环境下时间就可以设置的偏长。
c.状态
状态大家都应该都会写，主要包含的就是初始状态（冷启动无缓存第一次进入）、空状态（无任何内容比如空的购物车）、常规状态、异常状态（网络中断、接口报错）还有过期状态等
d.显示
数据和内容的极限值，最大和最小，比如粉丝和关注的数量，小于1万人则显示完整的数量，大于等于1万小于11000则显示1万，大于11000小于12000则显示1.1万，这样的方式。另外包括标题极限为一行显示，超过部分的显示规则。敏感信息、错误提示以及超时的信息提示。金额的格式使用¥xxx还是xxx元，小数点保留的规则。日期的显示格式是xxxx年xx月xx日还是xxxx-xx-xx还是xxxx/xx/xx等等
3.反馈、提示、手势
反馈和提示的样式有很多种，一般反馈指的是用户对某一个控件进行触发后获得的反馈，比如按钮按下的反馈，以及之后收到的反馈，是进行跳转还是给用户提示，采用的是模态还是非模态的提示。比如点击关注某个人的按钮后会提示关注成功，比如退出某个图文编辑会二次确认是否退出，再比如抖音长按后出现的3个操作反馈，还有支付成功后的动效提示、恶意多次操作后的提示等等
如果有手势交互也需要说明，比如滑动后内容置顶、拖拽、左右轻扫的tab滑动、重按的3dtouch等等
4.加载
使用模态还是非模态，如果是模态加载请尽量使用情感化设计来减少用户焦虑。如果是非模态，根据信息呈现和体验采用分步加载还是预加载还是智能加载。如果是分布加载就选择先加载资源较小的内容，再加载图片，可以先将图片模糊化粗渲染给用户呈现，包括在浏览信息流的时候的分页加载也是可以的。如果更智能化一些也可以预判用户的行为进行内容加载，例如当用户在某个图文前停留时间达到某个值后就预先给用户加载里面的内容。
加载的全局方式在方案中需要考虑，页面加载、下啦刷新等等，需要统一。
5.环境、设备与场景
a.不同设备、厂商的不同版本
都会影响到方案的落地和用户体验这个要非常注意。比如一些交互控件我们在6、iphonex和大屏幕尺寸上使用起来效果很好，但是小屏幕的时候这个交互控件显得就很难受，所以需要仔细斟酌用户的使用情况。另外还有横竖凭情况的交互方案是否兼容、是否需要与其他硬件进行兼容。
b.白天和晚上是否需要做不同的风格设计，以及在是否需要给用户遮挡隐私的功能。
6.文案
文案这点很多设计师都忽略了，你们有没有听说过一个叫文案设计师的岗位。其实文案在我们产品设计中是非常重要的。首先一个产品的文案对应的语气和产品调性也是相关的，就好比我们说产品有它自己的性格一样，另外文案的使用直接就影响用户对该信息的理解，比如一个对话框的文案是：确定退出吗？下面会有两种不同的选择，一个确定，一个是退出，大家觉得哪个比较好？还有就是不加“吗”，就变成了：确定退出？这样描述出来的语言给人感觉很冰冷，甚至有一些威胁。
所以首先我们的文案是否有温度，和产品的个性是否相匹配。其次文案的表述是否准确和通俗易懂，比如你告诉程序员一句话，帮我去菜市场买西瓜，如果有西红柿，帮我买两个，你会带什么东西回家？程序员版：if（看到西红柿）西瓜等于2；else 西瓜=1。buy 西瓜。条件：看见西红柿 执行命令：买两个西瓜一语道破版：其实吧，看到西红柿呢是卖两个西瓜的触发条件…没看到就买一个西瓜，看到就买两个西瓜。所以这里出现的不仅仅是程序员的思维和我们的差异化，也说明了一句话没有表述清楚所带来的问题是很大的。
另外就是文案用语的一致性，在整个产品同样的场景中，我们需要统一文案用语。
7.常见控件
具体见下方列表
8.撰写方式
作为一个设计师，不管是否在做视觉，我们都需要对文档有一个美化意识，如果你的文档非常凌乱，那么在别人眼里就会觉得你是一个比较粗心大意，不够负责任的人，所以我们尽量在做交互输出文档的时候也画的美观一些。
目录
首先在目录的撰写时候要进行分类，通常我做的时候会对该需求以页面父子集关系进行创建，父集为核心页面，子集为其下的相关子页面，这样页面的流转和归属关系就不会搞错。
说明
在撰写规则与说明时可以通过标签法进行标签说明的撰写方式，同样在视觉上保持美观，对比与对齐的运用，具体该写什么东西上面已经说明就不赘述了。除了交互规则以外，高阶的交互设计或者产品经理还需要补充业务规则，比如排序、商品抓去规则、权重、算法、活动规则等等这里就不展开说了。
总结
文档的形式有非常多种，针对不同的公司和产品也需要作出相应的调整，能够满足需求和方便协作，目的就达到了，我们并不希望过多的时间花在文档的撰写上，而是希望大家在做设计时多思考业务，本次分享就到这里啦～
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在某些元素周围使用多个放置阴影或非常精细的边框（仅比实际阴影暗一点）可以使这些元素看起来更清晰、更清晰，并帮助你避免那些看起来浑浊的阴影。
你的标题很可能会比正文更大，也比正文更重，所以字母之间的间距有时会看起来更大，
减少一点间距，就可以使你的标题更加清晰
在ui中实现图标时，保持一致。
确保它们具有相同的视觉风格； 相同的重量，或者填充，或者轮廓。
在创建设计时只使用一种字体是比较好的，这样做实际上可以帮助你产生统一的设计效果。
使用字重、大小和颜色的组合，你还是可以用一个单独的字体表达清晰的文字的结构
留白可以让你的设计具有呼吸感，更加舒适
通过选择一个基色，然后使用你选择的颜色的色调和阴影，可以以最简单的方式为你的设计增加一致性
允许用户随时跳过你的移动应用程序登录序列，并将该跳过链接放在拇指容易触及的位置。
只是一个简单的调整，可以让你的用户有更好的体验（我常常体验国内一些APP，关闭按钮特别远，特别难按）
确保你的阴影总是来自同一个光源，会素描的同学很好理解，光源关系一致表达空间统一性的基础
基本的处理方式是，在图片上增加一个透明渐变蒙版来使得字体看的更加清楚
如果只使用一个字体，尽量选择有多字重的字体，比如：阿里巴巴普惠体、思源、OPPO
在浅色背景下工作时，文字颜色不要太浅，虽然看起来很舒服，但可见性不较差，不利于阅读
当涉及到长格式的内容时，某些常规的粗体字体在屏幕上看起来还是有点太重，太呆板了。
建议，选择像深灰色（即# 4f4f）来降低文本的色调，这样阅读起来会更加舒服
通过使用颜色对比、尺寸和标签，确保“行动按钮”尽可能突出
随着字号的减小，增加行高可以获得更好的易读性。
在设计应用程序内部使用的菜单时，请确保提供最常用的操作（即； 上传图像，添加文件等…）最突出的屏幕
只需从你的产品图像中挑选颜色，然后将你选择的颜色的各种色调和阴影应用到你的背景、文本、图标……，就能为你的设计增添大量的视觉趣味
不同x高度的字体需要不同的行高测量来实现文本行之间的正确分隔。
即使你可能有两种字体大小相同（即； 18px）它们的x高度可能会有很大差异，选择正确行高是非常有必要的
通过使用字体大小、权重、颜色和布局的组合，你可以轻松突出UI中最重要的元素
在用户刚刚执行的操作附近添加一条错误消息，可以帮助用户提高正确登入，也可以缓解用户焦虑（他可以更加清晰那里出错）
当为移动设备设计时，尝试创建足够大的可点击区域
对于按钮和仅由文本组成的链接来说，点击区域会很小，所以尽可能使用带有标签的图标。
iOS和Android的最低建议点击区域
iOS为44 x 44pt
安卓48 x 48dp
长标题都是大写字母的话，阅读转化上比较慢（你明白他是什么意思比较慢）
短标题都是大字母的话，相对来说比较快可以和记忆中的单词对应上
始终确保浅色文本在浅色图像背景下清晰可见。
只需在文本后面应用一个低透明的深色背景，就能保持这些元素之间的良好对比度
标题、正文、标题、正文……这样的排列中如果是间距都是相同的，那么在阅读上就很难区分标题是属于上文还是下文的。
正确的做法是，标题距离上文的距离＞标题距离下文的距离，这样阅读起来，标题会比较清晰的对应的是下文
当下载速度是一闪而过时，则无需提示
当下载等待时间＞3S时，建议给进度提示
在项目中处理文本时，选择正确的字体将影响文本的语音类型。 那么大声、或者温柔、或者正式，严肃，或者有趣。每种字体都有自己独特的声音
基于人阅读情绪，如果阅读一行很长，一直阅读下去，会出现你眼前阅读的内容“不见”的情况
对于单列页面，45到75个字符被广泛认为是令人满意的行长，66个字符的行（包括字母和空格）是最合适的。
当然，字体大小和行高也是决定可读性的一个因素，但是对于行长，要保持在45到75个字符之间
需要适当，如果装饰的强了主要表达的，则不可取
按钮。 通知。 UI中两个独立但必不可少的元素。
一定要确保你的用户能够快速准确地将他们区分开来
舒服的投影会增加你的设计的质感，和透气感。太重的投影会显得你画面比较脏
高度饱和的颜色（明亮的蓝色、红色、绿色等）在网站上看起来很不错，但过度使用时，会让用户眼睛疲劳，主要是与文本内容一起使用时。
在向设计中添加图标时，使用用户熟悉认知的图标。新的图标虽有很好看，很有个性，但是会让用户疑惑
需要承上表达的元素，排版上接近对应的元素，可以让用户心理联系起来是一体的
与长格式正文文本（需要足够的行高以提高可读性）不同，标题通常要短得多，因此可以稍微缩小间距。标题的建议行高通常是文本大小的1到1.3倍
类比色和邻近色是最和谐的配色方案之一，也是最不会出错的配色
在处理特定项目时，使用类似于所有小写字母的文本可以表达更加轻松的意思
但需要注意，在图像和文本之间使用某种颜色叠加，以获得更强的对比度
当在浅色背景下设置深色文本时，偶尔可以选择较轻的字体。
但是…
反之：浅色文本>深色背景。
最好是把字体的重量增加一点，尤其是长文本，原因是，让用户避免视觉疲劳，获得更好的易读性
正确的字体选择对于让你的内容更快的正确传达更重要
只需稍微增加字母之间的间距，就可以提高字迹的易读性，并为大写字母增加一些设计感
确保错误提示，解释了哪里出错和如何解决
始终让用户了解最新情况，即使是普通的表单，让这些错误消息变得有用，不要让用户懵逼
使用占位符可以更好的缓解用户焦虑
在应用可能产生后果的特定操作之前，请详细地通知用户。尤其适用于具有不可逆转后果的行为，例如永久删除某个内容。让用户知道将要发生什么，并要求他们确认
用户需要采取的基本操作（例如，注册或登录）隐藏在下拉列表中，甚至可能找到用户想要的。
解决：将重要的功能提出来，不要隐藏
原文地址：站酷
作者：木七木七
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、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) 人性化帮助
日常的使用最好脱离帮助文档，但有必要提供帮助文档
个人非常建议，在日常工作中，把尼尔森十大可用性原则作为一把标尺，来时时刻刻检验我们的交互设计。
交互设计，在涉及体验细节的小需求上，避免所有的不周到，方才是周到。
用利器创作原型，要包含流程图；多体验原型或产品，以体验结果为准、而非讨论结果为准；参考优秀的设计规范，用尼尔森十大可用性原则来检验原型。
以上三点，可以帮助我们做到交互设计的周到。
其中，个人认为，最为核心的是第二点：多体验原型或产品，直到自己觉得周到为止。
因为，正如电影《霸王别姬》的一句台词所说：人，得自个儿成全自个儿。
蓝蓝设计的小编 http://www.lanlanwork.com
