一、马蜂窝 — 人性化设计识别文章地点
二、微博 — 社区游戏化设计提升互动率
三、QQ — 通过手势消除未读消息
四、最右 — 情感化设计保护用户隐私
五、抖音 — 深夜提醒贴心的功能
六、网易音乐 — 把分享游戏化
七、QQ音乐 — 歌词沉浸式体验
八、盯潮 — 趣味性banner轮播，增加用户点击
在马蜂窝任意文章中，如果出现地区则可以通过当前页面对地区进行提取
减少用户操作路径，降低产品使用成本
日常在各个平台浏览文章时大家都会遇到在文章内会出现一些如地名、人名、物品等相关名词，此时如果对名词感兴趣则需要切换场景去进行搜索，而马蜂窝在这方面深入洞察到用户痛点，基于旅游社交产品背景下在添加地点直达（包含多个地点）功能，解决了对景点感兴趣的用户使用体验。
根据马蜂窝这个人性化功能，是否可以在不同的产品内进行应用，如在一些游戏社区中所提到的虚拟装备、道具等物品添加弹窗简要说明，帮助新手玩家快速理解玩法、功用等
在微博动态详情中进行长按点赞触发动画
通过游戏化点赞玩法激励用户进行互动，提升互动率
打破传统点赞动画，微博设计动效采用大胆创新的全屏动画并搭配上散发的微表情，在长按与连点两种手势下动效规律不同，消除用户枯燥感，微博作为国内最大社交平台，页面展示上已经形成用户深刻认知，在不影响基本风格上进行彩蛋设计有效的提成用户互动率
在qq聊天页面中对底部消息气泡进行拖动，消除所有未读消息
提升用户操作效率和使用体验
qq作为社交工具，每位用户都会添加大量人、群以及关注各种推送，在这种场景下用户每条消息都去操作需要花费大量时间，QQ把传统的消息已读以一种简单的交互手势作为代替，相对全部已读在操作上更佳便捷
通过qq的这个交互细节，在其他产品场景中同样适用，如一些音乐、电台相关的产品在离开播放页面后播放状态会悬浮在页面之上，如果关闭的话则需要点击暂停或者进入详情后关闭，也可以考虑使用拖动手势进行关闭
在最右登录页面输入密码时ip形象会出现捂眼睛动作
强化用户隐私和心理信任感
日常在使用一些敏感性操作时我们都会注重隐私，如一些表单的填写、密码输入等相关操作，最右在登录页面使用到了ip形象的动作去向用户传递心理上的暗示，这种手法很好的把品牌曝光与体验相结合
长时间刷抖音时会系统会提示，在深夜使用时会支持设置提醒时间
防止用户疲劳使用产品，定时缓解注意力
在使用抖音时大家可能会经常深陷其中无法自拔，往往忽略了时间影响身体健康，提醒机制则在深夜不同时间段进行间接提示，虽然在用户体验中不提倡打扰用户，但在短视频这个场景下如果过渡沉浸便会造成反向影响
在网易音乐对某首音乐进行分享时可以对音乐进行个性化定制，对歌曲进行编辑添加文字、图片、语音等以视频方式呈现
把分享以一种偏游戏化的形式呈现，提升用户分享率
传统分享基本是直接让用户分享到第三方平台，而网易音乐这个设计把分享场景进行多元化处理，以定制音乐罐子为切入点，用户自由编辑个性化处理装进罐子进行分享，是一种视频剪辑融合音乐的一种新玩法，破圈传统枯燥的分享场景，提升用户分享率
在音乐歌词页面中可以支持设置歌词主题
新颖的呈现手段，强化用户沉浸式听歌
传统的音乐产品在详情页面展示了一屏歌曲歌词，面对大量的文字用户在寻找某段歌词时效率不是很高，对大量的字段也极为枯燥，而qq音乐使用了创新的展现形式，把手机主题概念融入歌词中达到新的视觉体验，根据不同的主题对应的动画也不同，大大的提高了用户的视听体验
在盯潮首页banner处对其进行拖动甩出
通过交互玩法提升用户对banner的点击
banner在页面通常点击率较低，用户会默认为广告，在盯潮内滑动banner时会发现banner可以进行拖动，并且松开时会自由掉多，把传统的banner切换做出了可玩性更高的效果，同时这个设计手段也能吸引用户注意力引导用户对banner进行点击
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
认知负荷是完成一项任务所需的精神努力总量。您可以将其视为用户与产品交互所需的处理能力。如果需要处理的信息超出了用户的处理能力，那么认知负荷就太高了。
造成用户认知负荷的的原因大多都是，产品在交互和视觉上过于复杂，设计的统一性不够，导致用户在使用时不断进行思考无法形成习惯
例如移动端中的空状态，目的是为了引导用户完成任务，在设计时无论是文案展示与视觉表现都应简单明了、层次分明、视觉统一
用户获得的初始信息会影响后续的判断，用户对某件事做出判断时，会不自觉的将开始看到的信息作为衡量标准。
在日常生活中锚点效应非常常见，例如平常不带帽子，偶尔带帽子出门的你，走在大街上会发现挺多人都有带帽子，因为心理活动是把带帽子这件事作为起始衡量，而你刻意的在寻找与帽子产生共鸣的事
在产品设计中最典型的就是会员体系，例如某视频平台的会员价格默认选中的那一栏会比其他的价格低，那么用户在使用时心理会默认这是会员的价格，相对应其他更高的价格只是作为衡量这个最低价格而存在
又称对比效应，指人们对两个不相上下的选项进行选择时,因为第三个新选项(诱饵)的加入,会使某个旧选项显得更有吸引力，通过对比诱导人购买商家想让他购买的商品。
有一位著名的行为经济学家他叫丹·艾瑞里教授，他曾经做过一本《经济学人》杂志的定价策略，这里不细讲感兴趣的可以搜一下。诱饵效应运用最多的是在超市场景，我们经常看到超市的货架上会有看起来很实惠的物品在，如一袋泡面可能是5元，而旁边还有3包泡面一起出售可能也就12元，然后开心的拿走了，这就是诱饵效应，那一袋5元的就是诱饵，商家的目的就是为了让你买走12元的
而在线上产品策略中运用最多的则是电商场景，如下图中的图书商品，单价610元，定价980元，三件单价488元，这里的单价和定价都是诱饵，目的是为了让用户同时购买三件商品，而用户内心是欣然接受因为更划算
在检查所有可能的结果时，我们倾向于关注一些看起来合理且熟悉的事物，从而忽略了其他结果。
13年9月twitter公司宣布IPO，当时11月份才开始交易，但是在这两个月时间里有一家名为twweeter的公司三天内涨了13倍，只是在名字上与推特公司极为相似，但实际业务毫无关系，机构就是利用用户的注意偏差让不了解实际情况的投资者只看到相关性，而另一面的不相关的结果用户自然的忽视掉
在产品设计的客服助手中，就属于注意偏差，我们习惯的认为向客服回复人工等关键字时，会自动切换人工客服，而产品则会设置一些虚拟的智能客服来节省成本，而用户在这个过程中则忽略了细节，误以为智能客服是人工客服
前苏联前苏联心理学家菜斯托夫提出特殊事物才易被人牢记。也就是说，有个性的人、与众不同设计得商品、不寻常的事情，都会让人留下更深的印象。
生活中我们很难记住某个点或某件事，但是当这件事足够突出拥有独特的个性我们便会深深印在脑海里，比如一串字符ezol4tpmb，我们最容易记住的是4，因为他是唯一的数字，在比如说让你去记忆国内某些城市的特点，如西安、开封、浙江我们想到的就是秦皇陵、包青天、西湖等著名具有特征的地点，因为这些事物比较特殊更容易被记住
在品牌设计中菜斯托夫效应运用的比较广泛，如何通过视觉的表现让用户对产品更加的印象深刻，对此就衍生出产品IP、品牌符号这种具有特殊意义的标识便于加强产品印象
任意一点移动到目标点的时间与该目标点的距离和大小有关，距离越远时间越长，目标越大时间越短，公式：
T = a + b log2(D/W+1)
在交互设计中经常用到此定律，无论是正向还是逆向此定律都能够很好的运用到交互中，如mac系统上的关闭按钮，始终在左上角并且很小，我们的鼠标在右侧，移动到左侧上角时间会随之变长，因此这一交互结构就避免了用户误操作关闭软件
再例如移动端中会把重要的按钮操作放置在屏幕右下或者居下，因为大多数人是右手使用手机，因此在使用时右手拇指距离点击区域会更近
幸存者偏差是指把一些事的不同角度的人员筛选出来，筛选出一部分人进行采访从而制造舆论，观察者只能看到事物的一面，而另一面则被忽略，也被称为以偏概全
某次春节记者采访到一些在火车上的群众，聊一些购票的过程以及买到票的心理感受，最后向公众公布出今年回家的票大家都买到了，但这个过程中却忽略了那些不在车上或者没买到票的人们，因此就以偏概全的传输单方面信息，这些被采访到的人们就是幸存者
在做产品时经常会听到用户画像这个词，用户画像就是利用幸存者偏差而把广大的用户数据通过典例呈现，当然这个幸存者的样本必须是压倒性的庞大，否则就掉入幸存者偏差的陷阱
彼此靠近或接近的对象往往会组合在一起，相近的元素可以建立关系，人们会不自然的把相近的元素看作一个整体。
在UI设计中，经常会用到邻近法则进行设计，如一些组件、卡片的建立，由不同的元素组成变成一个整体，其次邻近法则能够有效的用户层级的划分，如下图中的一些卡片、icon进行规律的排布最后组成一个整体，与上下模块的层级有效的区分
特斯勒定律又称复杂性守恒定律，他指出对于任何系统都存在一定的复杂度并且是无法避免的，问题是谁来处理它。
在任何产品设计中无论是功能还是流程都存在一定的复杂度，依据特斯勒定律有些复杂度是无法避免的，那么需要我们在设计中去解决这些问题，保证在用户的角度来看它是合理的简单的
像我们常见的话题功能，输入#自动引导出关键词供用户填写省去用户输入时间，再例如b站的一键三连，长按点赞的同时会把收藏、打赏功能一并完成；结构层面也会用到此定律如产品中的设置页面，按照不同的维度进行区分如系统维度、反馈维度、功能维度帮助用户更快的完成操作
它是由意大利经济学家帕累托提出，它指出对于许多事件，大约80%的影响来自20%的原因
在设计中我们会发现一个产品页面有几十上百个，对于用户而言能够提供价值的可能也就那么几个功能页面，这几个页面可能占总产品的20%左右，那么我们在做优化的时候则需要去考虑如果把20%做好把它的价值放大
再往细了说，例如打车软件在这个页面中能够为用户提供核心价值的区域则是地图区域和选择目的地区域，那么在做优化体验时应当着重关注此区域，而页面中剩下的区域则受上面20%的影响
社会证明是用户用来确定行为方式的便捷捷径，当他们不确定目标时，他们最有可能认为并接受他人的行为是正确的，人数越多，行动似乎越合理。
最近抖音在评论区新增了一个踩一下与点赞进行互补，但是奇怪的是我们进行踩一下时并不会展示具体数量，试想一下当点赞的数量大于踩一下的时候，我们有时就会被影响认为这条评论值得点赞
再例如购物中的评论排序，像京东把好评优先展示在前面，当好评的数量大于其他维度时就会影响用户判断，用户会把数量多的好评当作参考依据认定这个商品符合自己的需求
指用户知道的内容与他们想要或需要知道的内容之间的空间，这个空间叫做差距，差距会导致痛苦，要消除痛苦，用户需要填补知识差距。
例如在做产品设计中都会涉及到登录注册流程，那么对于有些产品则需要在登录注册阶段大量收集用户信息完成更好的推荐策略，但对于用户而言用户的认知是固有的流程，如填完手机号就收到验证码，最后完成注册进入首页，如果说中间的过程需要收集用户信息，则需要对应的解决方案来弥补用户的心理差距
即可App在收集用户信息的阶段使用了偏趣味性的一些设计表现，在用户的这个空间差里面来缓解用户的情绪，激起用户填写欲望
心智模型是对某人关于事物在现实世界中如何运作的思考过程的解释，它是对周围世界的表示，可能准确或不准确，用户认为他们对您的产品的了解会改变他们使用产品的方式。
心智模型其实就是我们对未来发展的预测，内心对要发生的事情进行预判，然后采取行动，例如我们要购物想到的就是淘宝、京东，想到吃饭可能就是美团、饿了么，这些产品就打入了用户的心智。往细了说心智模型是一个广泛的概念，它还包括行为模型、实现模型、表现模型
像我们常用的聊天软件，在聊天过程中撤回消息，就会有个重新编辑功能，这就是满足用户的心智模型，预判用户的操作例如微信、钉钉、飞书
拟态是在页面中模仿现实世界物品，通过它的外观和交互模仿现实，拟物化适合用来让用户适应新的页面和技术形态。
我们在做页面时都会涉及到图标的绘制，那么那些具有业务属性的图标则需要通过拟物的方式进行呈现，对于用户能够降低理解成本，如经典的红包、自如的金刚区等
与群体相比，用户对个人的关注不成比例，与大型抽象群体相比，人们更愿意同情一个单一的、可识别的人。
这个如果用逆向思维来想的话，类似于我们说的“对抗性人格”在大多数人都对一件事或事物看法一致时，出现一个不一样的声音，试想一下我们在刷短视频时评论区总有那么些人与大多数人的看法不太一致，这就是奇点效应
在设计中体现最多的是等级体系和勋章体系，一方面为用户的攀比心理，另一方面则是奇点效应，这类用户的想法就是为什么要一样，为什么不可以独树一帜。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
B端产品是很容易交互设计不一致的，随着多平台陆续融合为一个平台，暴露的问题就越发明显，因此改变现状便迫在眉睫，此时保证交互设计的一致性就是我们重点要考虑的问题。
目前有很多较火的组件平台，例如：Ant Design 、Element等。由于公司内部一些原因，前端开发会直接使用组件库，没有规范的约束，随意使用组件也是导致平台体验不佳的一点。
由于产品上线后，售后组、业务组经常会反映一些关于体验相关问题，有时只是单一模块进行迭代、改版、完善而遗漏了与它相关联的其他模块，便会影响全局感观。
此时会有人产生疑问，明明平台现存很多样式问题，功能交互不统一，为什么首要不是先快速建立设计规范文档？
因为在没有设计一定量的设计稿之前，所有规范都是华丽的泡泡！前期在设计阶段会遇到很多具体场景化的问题，根据不同的场景会不停的修改，还有多方评审来达到最优方案。此时的设计稿处在极不稳定的时期，自然而然也没什么规范文档可言，因此现阶段要做的工作是找到重点模块进行设计稿基础搭建。
当然设计师在做设计时一定要有全链路的思考和拆解问题的能力，不能局限于单个需求，钻入牛角尖。毕竟B端产品体量大，功能模块多，系统耦合度高，交互设计文档又是一个全局概念，这最基础也是最重要的第一步是非常考验设计师的。
重点模块功能搭建好设计稿以后，可以先让产品稳定发展一段时间。当团队对产品初期有了一定熟悉程度，此时就很适合创建自己的交互设计规范了。
把控视觉统一，减少重复出图，提高效率。在公司有多个设计师协同工作时，可保证体验、设计、交互等等的统一性。
提高设计稿的还原度，根据规范中组件使用情况建立公共组件库，提高复用率，减少返工，极大的提高开发效率。
在画原型图遵循交互设计规范以及排版格式会减少开发在看原型图和设计稿之间产生歧义，当然产品原型图不需要精致，只需按照规定规范中的交互制定即可。
通用组件通过测试后，以后将不在花时间在测试组件交互上，避免了重复工作。
B端最重要的设计原则就是效率优先，保证效率的前提是组件一致，交互及时反馈，以及合理的使用场景。
因此设计交互规范不仅仅只是颜色、文字以及一个个组件的展示，这样的文档对产品、测试毫无意义。规范是由基础容器盒子+组件库+交互状态+正确使用场景组成，在规范中每一项都应标注清楚。
思路：将原子【文字、颜色、控制器等】组合成分子【状态提示、数据展示、数据录入等】最终组合成元素【不同的容器页面、弹窗、抽屉、卡片等】一个一个的元素互相搭配，组成完整的基础平台。
在设计过程中，设计师需要建立适配的概念，根据具体情况进行适配，以及考虑哪些区块需要动态布局。中台系统的用户的主流分辨率为 1920*1080、1440*900 和 1366*768，一般常用画板1440进行区块动态适配。
栅格宽度：建议栅格系统的网格大小选定8作为栅格系统的原子单位，目前主流设计屏幕分辨率在水平以及垂直方向都可以被8整除，使用8作为最小原子足够适配。
水槽宽度：根据业务可自定义水槽的值。比如8、16、24、32、40等，经过实践经验，正常情况下，水槽宽度为24时，视觉效果最佳。
非常规设计时：不需要死板的坚持传统栅格系统，根据设计场景可自行修订。
顶部导航栏高度计算范围公式：48+8n。
侧边栏宽度计算范围公式：200+8n。
界面最大可达显示器最大值，侧边导航为定宽，右侧内容随栅格变化而变化。
为保持视觉、交互一致性，统一容器范围。容器是用来收纳原子、分子的，理论上信息不应该超出容器。
以有遮罩基本弹窗为例子进行分析，包括视觉+交互。开发可根据弹窗盒子创建基础容器组件，像素级也可帮助测试进行校准。产品及设计可根据使用场景规范自身，在制作原型以及设计稿时正确使用组件。
按钮用于开始一个即时操作。通常分为基础按钮（分为主按钮、次按钮）、图标按钮、文字按钮、图标+文字按钮，在不同场景下使用不同的按钮达到最佳交互效果。
基础按钮应用广泛，较多人分析这种场景。所以下面主要分享一下图标+文字按钮的基础规范以及使用场景。
录入类由输入框、选择器、单选框、多选框等多种控件组成，基础交互包括（默认、悬浮、点击、失效四种状态）
不同的控件相互组合成信息页、表单页、问卷页等。
基础输入框包括（标题+输入框）根据不同场景有多种情况，下面仅列出交互场景，具体视觉标注不再展示。
平台中反馈机制是非常重要的设计，能及时提醒用户当前操作是否成功，或是失败在哪里，因此不同的场景需要特定的反馈提示。
反馈提示包括（警告提示、全局提示、通知提示、气泡确认框提示、以及tips提示）
下面仅列出交互场景，具体视觉标注不再展示。
文字、颜色、间距、圆角相当于元素中的原子，完整的界面正是由这些原子一点一点组合而成，承载着最基础但也是最重要的一部分，因此规范也要更详细。
产出文档是否能真正落地需要来自多方评审包括产品、技术、测试等，尽量从多角度、全方位来进行审核。
投入开发前，多方评审，各抒己见达到最优方案。
投入开发后，若要优化修改定稿部分，需再次拉通会议讨论，结合当前实际情况将历史问题一次性解决到位，避免遗漏再次造成不统一。
由于篇幅原因，规范只是展开个别案例进行分析。
最终需要落地实现才是最重要的一步，所以我们还有很长的路要走。也要不断进行思考与总结，如何让一致性设计规范更符合设计原则和业务场景～
原文地址：站酷
作者：食文貘
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
如果你是一位经验丰富的设计师，你应该会同意这个观点：从他人的作品中获取到灵感并不算偷窃他人的作品。这是属于在对设计进行深入研究呀，这也属于一种设计模式呀，而且还遵守设计规范呢。所以，当然要以用户们所熟悉的那些模式来创造出可用性界面。
不过，有的设计师则会认为，过于遵守设计规范，而且，经常性的从他人的作品中获取灵感的话，自己本身的创造能力就会下降，这就导致了这样一个结果——一天下来，你的所有APP都长一个样。
从交互设计的角度看，我们会发现一个问题。什么问题呢？
习惯性的去应用一些所谓的最好的设计模式，可能会让你觉得Google，Facebook，Instagram或者说其他的一些你最喜欢的APP总是做的非常棒，你会觉得，他们的设计目标和你自己的设计目标并没啥差别，但是，人家成功了，而你的作品却失败了。所以，这里推荐一些被公认为是(至少曾经被公认为)最好的设计模式，可能在你第一次看来，这些设计模式也就那样。
1、隐藏导航
关于汉堡图标，已经有不下于50万的文章来争论它了。如果你一篇都未曾读过，试着去读一两篇吧。其实，简单说来，这些文章讨论的主题更主要的是这个图标里所隐含的那些导航，而不是这个图标自身。
上面图片这样的设计对于设计师来说其实是很有吸引力的，而且简直太方便了。根本不用担心屏幕大小的限制，只需要这样一个图标，然后，把所有的导航全部塞进这个可以上下滚动的东西里，然后，让他默认隐藏。就这样，就这么简单。
但是，实验证明，与完全隐藏导航相比，适当的展示出一些导航能够更多的增加用户的依赖度和满意程度，甚至为你带来更多的收入。所以说，现在的好多大公司的播放器都抛弃了以前的汉堡图标，将最常用的一些导航一直显示给了用户。
如果说你的导航比较复杂，那么，请在考虑优先级的基础上适当地隐藏导航。
2、图标，随处可见的图标
由于移动端的屏幕大小限制，许多无脑的设计师为了节省空间，在任何只要能够使用图标替换的文本域，都使用了图标。大家都这样想，象形文字或者图标占的空间又少，不需要额外的转换，而且，人们都很熟悉这些图标，难道不是这样吗？所以，每一个APP都这样做了。
设计师们将上面的那种假设放在脑海里，于是，有的时候，他们将实用性的功能蕴含在了图标里面，但事实上，那个图标是难以识别的。比如，你能猜到在下图的Instagram里的这个图标点击之后能够发送什么信息吗？
或者说，假如你从来没用过谷歌翻译，那么，你会期待下图的这个图标实现什么样的功能呢？
你总是假设你的用户们非常熟悉那些抽象的图标，或者说，你总以为用户们会花大量的时间去研究和学习你的这个图标的含义。这是一个很普遍性的错误，很多设计师都会犯这个错误。
Bloom.fm上让人觉得迷糊的标签栏
如果说你曾经设计过一个需要一个弹出框来解释从而提高可用性的图标，那么，即使你的用户们会不管怎么样都能了解它，你的这个做法也是错误的。
当然，并不是说你在设计中就一点都不使用图标。你的用户们熟悉大量的图标，这些图标中，有很大一部分都是能够代表普通的功能的，比如搜索，播放视频，邮件，设置等等。(但是，用户们可能不会很确定当他们点击一个心形图标的时候，会发生什么。)
一些能够被大多数用户所识别的图标并且被认为是通用的
对于复杂的和抽象的图标，在显示的时候，应该总是在旁边加上一个文本来进行说明。这样，你的图标才是真正有用的。同时，还能够提高菜单的可发现性，也能够为你的APP添加漂亮的触感和个性。
Pixelmator的导航
对于基本的功能，可以使用图标来展现；但是，对于复杂的功能，就需要使用文本来说明了。(如果你要使用图标的话，要时常性的做可用性测试)
3、基于手势的导航操作
当苹果公司在2007年发布了iPhone的时候，多指触控技术就成为了人们关注的主流技术，用户们发现他们不仅可以在屏幕上进行点击，还可以进行放大，缩小和左右轻扫。
手势在设计们的圈子中流行了起来，许多的APP都围绕着手势操作来进行设计。
Clear里的手势操作
就像隐藏的导航栏和使用图标代替文本一样，手势看起来似乎能够为设计师节约一些屏幕空间。(“屏幕上不应该有删除按钮的存在，人们只需要向左或者向右轻扫就可以进行删除了。我们会决定怎么操作的。”)
关于手势，你首先需要知道的是，手势是不可见的。人们需要记住它们，就像汉堡菜单的例子一样。如果你隐藏了一个选项，那么，用到那个选项的人就会越少。
另外，手势存在着与图标相同的问题：众所周知的手势有点击，放大，上下滚动，同时，每个APP也有那些需要慢慢发现和学习的手势。
不幸的是，触屏界面的设计仍然是一个新的领域，在各个APP中，大多数手势还不标准和统一。一个很简单的手势，比如左右轻扫，在各种各样的邮件APP中可能都会大相径庭。
在Apple的Mail APP中，向右轻扫，显示出了“标记为未读”的选项
同样的手势，在Mail Box中，就表示将邮件存档
或者说，想一想，摇晃你的手机，在两个APP中，也会有两种不同的含义。在iOS中表示撤销，在Google Maps中表示发送反馈信息。
永远都要记住，手势是隐藏的操作，人们不得不去记住它们。对于你的用户，这需要大量的努力。如果你是一个发起人，也许你可以让全世界的向右轻扫的含义都一样——但是，只有当它是你APP的概念设计里必不可少的一个部分的时候。
4、新手引导
新手引导，最近很火的一个话题，适用于用户第一次与APP打交道的时候。在很多情况下，这个简单的方式能够在一个透明的覆盖层上为用户展示一些标记来解释界面元素。
dcovery APP里的新手引导
为什么说这是一个很烂的解决方案呢？因为许多用户都会跳过你的介绍，他们想做的就是赶紧使用这个APP。即使他们注意到了你的这些标记，当他们把这个关掉的时候，这些所谓的教程也被他们忘得一干二净了(尤其是当屏幕上挤满了信息的时候)。最后说一句重要的，在你的屏幕上添加这些引导的标记，并不会提高APP的易用性，记住下面这句话：
原图翻译：用户界面就和讲笑话一样，如果这个笑话还需要解释才能明白的话，那么，这也不是一个好笑话。
对于你的用户来说，新手引导也许可以使用其他的方式来设计的更加有用。比如Slack这个APP，使用第一屏来创建一个用户场景。简单的介绍一下他们自己，着重于利益而不是屏幕上的功能。
留住你的第一批用户的一个更有效的方法就是逐步的引导。比如Duolingo，他没有向用户们解释这个APP是如何工作的，而是促使人们做一个指定语言的快速测试(甚至不需要登录)，因为用户们可以在做测试的过程中了解到这个APP是如何使用的。同时，这也是展示这个APP的价值的一个更有影响力的方法。
记得住左右轻扫的手势在Apple的Mail APP里和在MailBox里的不同吗？看看他们的逐步引导是如何做的：用户们在开始使用APP之前，必须在APP所提供的一个练习场景里尝试使用这个APP里的每一个手势。
在你准备在一个半透明的覆盖层上设计你的引导标记的时候，停下来好好想想第一次使用你的APP的用户会有写什么样的经历。关注一下使用环境，通常情况下，有更好的方法来欢迎你的用户们。
5、充满了创造力，但是并不直观的空白状态
很多没有经验的设计师很容易忽略APP的空白状态。但是，从一个APP的整体用户体验上来说，这是一个很重要的方面。
有的时候，设计师们把错误信息和空白状态的界面当作一块展示他们创造力的画布。
比如下面这张Google Photo的空白状态界面：
第一眼看去，简直太棒了不是吗？一个漂亮的矢量图加上完全符合设计规范的布局。
但是，再看一下，就会觉得有写奇怪的东西了：
・这块屏幕里什么收藏也没有，但为什么这里会有一个那么显眼的搜索按钮呢？难道是想让用户在什么都没有的界面里搜索什么？
・第二个很显眼的元素就是这个矢量图，很明显不可以点击(虽说会有很多人去尝试点击)。
・屏幕上的提示说，我应该找到在顶部的那个超级不起眼的“＋”标志。为什么这个提示自己不包含一个添加按钮呢？就像是在说“点击继续按钮来继续”
总而言之，上面这个空白屏幕没有能够帮助用户理解用户所在的这个环境：
・什么是收藏？他们为什么有用呢？
・为什么我什么都没有呢？
・我可以做些什么吗？(我应该做什么？)
当需要创造力时，越少有时会越有用。下面这个空白状态屏在可用性上就做的十分完美。(先让我们忽略那个“现在就点击下面这歌按钮吧”的引导提示)
在Lootsy里的空白状态屏
记住，空白状态(类似于网页里的404页面)并不只是美感和品牌特色。在可用性上，他们更为重要。要让空白状态更为直观。
多问多想
不要说我是错的：设计模式和最佳的实践仍然是你的好伙伴。但是要知道，APP和用户是不一样的：在一个APP里能够适用的方案，在你自己的APP里，也许就一点不适用。这不是一个通用方案就能解决的事情。另外，你永远不可能知道为什么一个APP会以某种方式来设计。
自己要多想想，多设计，多研究。
衡量，测试，验证——如果能够做得更好，就不要害怕打破设计规范。
作者： 郑小小莊
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
交互输出文档的作用
文档这个东西，我们又爱又恨，爱的是它能够记录并且在工作中让大家高效的协调合作，恨的就是很多人对文档嗤之以鼻非常敷衍，以至于文档不但没有起到它应有的作用，反而成为了一个不负责任的借口。所以一份合格或者优秀的交互输出文档对于一个项目的流转以及团队的配合来说是至关重要的。交互文档的主要利益相关者通常是以下几个角色：交互、产品、开发、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咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com
