——————————
工欲善其事，必先利其器。好的工具可以有效的激发设计师的灵感、提升设计师的效率。我们准备做一个设计效率工具系列，整个系列将好的设计工具贯穿到完整的设计流程中，并结合日常我们使用的情况向大家做推荐。通常的设计流程分为日常的积累、研究分析、设计创作、测试评估、对外宣传这几个环节。此篇为综述篇，之后的篇章会针对不同环节进行深入的陈述。
设计师日常除了应对当下的需求，每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法，也可以让我们潜移默化中得到提升。
Panda帮助设计师不错过每天的设计灵感和资讯，包括新的设计方法理念、流行潮流、也有一些新产品推出。我们可以把Panda替换Chrome主页，每次打开浏览器页面都可以随时看到最新的设计资讯。一些英文的订阅也可以用chrome浏览器的翻译功能可以粗略查看。
地址：https://app.usepanda.com/#
全球顶尖创意内容平台，作为中国成立最早、最受欢迎的创意垂直网站，以 “Open Your Mind” 为宗旨，始终专注在全球创意、艺术、灵感、人文领域寻找最有质感的声音。
我们总在生活中与「一瞬间的感动」相遇。Voicer的理念即是发现这「感动」， 将它传递给更多热爱生活的人们。内容包括创意内容品牌、在线杂志等。致力于分享生活和设计之美。
地址：https://www.voicer.me
涵盖设计商业思维、产品设计原则、设计系统等关于推动设计团队前进的实践读物，同时提供PDF和有声格式。
地址：https://www.designbetter.co
——————————
设计师在调研过程会研究用户、记录用户的行为和需求，会使用一些高效的记录工具。同时繁多的调研的信息需要汇总整理，协作整理，这里会推荐一些记录和整理的工具给大家。
Noted 是一款将录音和笔记相机相结合的软件。我们做访谈用户或做会议纪要的时候，经常错过记录的内容，如果通过一些软件录音的话，后期回听需要比较多时间成本。Noted可以在记录笔记的同时记录输入文字的时间点所对应的录音，输入的每个字的时间点都会对应到。当内容没记录下来时可以随时跳到对应时间的录音进行回听，方便在漫长的录音文件中快速检索。
重塑学习方式的阅读笔记工具，更加高效阅读书籍和学习，可以在阅读时摘录笔记，制作学习卡，提取关键词，根据笔记生成思维导图，梳理知识框架。非常适合阅读专业书籍，阅读论文以及复习。
地址：https://www.marginnote.com/chinese/home
一款功能强大的手写笔记软件，拥有多种笔记封面和纸张模板可以选择，支持自定义模板，可以简单处理图片，可以导入pdf、ppt等文稿并做标记，也适合做电子手账。
地址：https://www.goodnotes.com/zh-cn
调研阶段方便多人一起搜集资料和汇总，多人同时在线编辑，内容实时同步。随时随地高效协作，轻松创作。
地址：https://docs.qq.com/home
功能强大的思维导图软件，极简设计，流畅体验，多种结构图风格选择，方便资料的汇集和思路的整理。
地址：https://www.xmind.cn
——————————
当设计目标确定时，接下来进行具体的创意设计。设计师除了通过脑暴进行发散方案以外，一些高效的设计工具可以让我们事半工倍。
UI设计灵感库，基于dribbble平台精心挑选优质内容，提高效率便捷，为设计师提供专项更好的灵感。同时支持邮件订阅推送。
地址：https://collectui.com
Adobe color不仅从各个维度解决了我们的配色需求，同时也提供找图需求。其中包含 9 种智能调色模式可以选择。拾取主题色、拾取图片中的渐变色、协助工具可以合理帮助检查不同颜色的对比、探索behance趋势。
地址：https://color.adobe.com/zh/create
图标动态效果库，当绘制的图标需要一些巧妙的微动态效果时可以参考。
地址：https://useanimations.com/index.html
当插件特别多时候，FigmaEX极大的改善了Figma中使用插件的体验，将插件可视化。可以进行展开，同时显示插件的名称与图标。可以通过拖拽调整插件的顺序，调节高度。
地址：https://moonvy.com/figmaEX/
Autoflow｜流程图插件
输出交互设计稿的时候，方便快捷的在不同画板之间连线，提升输出效率。
地址：https://www.figma.com/community/plugin/733902567457592893/Autoflow
这是一个非常简单实用的 Figma 插件，它可以帮你将任何形状元素倾斜过来。
地址：https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio
最棒最全的插画库，支持快速搜索，一键调整颜色。
地址：https://undraw.co/illustrations
一款免费的在线服务，它通过 AI 自动去除图片中不需要的部分，只需要上传图片，等待几秒钟即可。用鼠标把不要的部分划掉，松开鼠标就会闪几下，被划掉的部分就消失了，比如去水印之类的小东西，如果用 PS 的图章，估计要十来分钟，而用 Magic Eraser 就几秒钟，简单易用，推荐使用。
地址：https://www.magiceraser.io
设计输出后可以通过这个清单去做最后的检查。网站列举了一些通用场景（页面、元素、流程、主题、品牌）下的基本设计要素。可以检查你的设计在这些场景下是否符合规范。样式、颜色、命名、易用性等是否合适。
地址：https://www.checklist.design/?ref=prototyprio
——————————
好的方案不是一蹴而就的，设计方案需要不断的打磨和迭代。方案需要持续和用户进行沟通和测试，才能得到完善的方案。也需要和开发工程师不断沟通，以达到最佳的实现效果。
用户测试阶段方便高效的收集用户反馈，一般用于定量的用户测试。
地址：https://docs.qq.com/
一般的眼动跟踪设备比较昂贵，使用繁琐。这个名为鹰眼的眼动追踪APP，可以通过手机前置摄像头捕捉用户在使用产品时的视觉动向。
地址：https://www.usehawkeye.com/?ref=prototyprio
覆盖产品经理、设计师、工程师协作需求。设计交付更轻松，有效管理和使用设计资产。
地址：https://codesign.qq.com/
在项目上线前设计师都会对最终的产品实现效果进行走查，以保证设计还原的准确性，体验的流畅性。这是一款视觉还原工具，帮助前端工程师在页面重构阶段就能快速发现开发稿与视觉稿的差异，实时对比、实时修改，减少工程师与设计师的沟通成本，提升整体开发效率。 ：
pixeleye.暂未对外开放敬请期待
——————————
设计完成后汇报展示、产品的宣传包装等，提供更便捷优秀的展示形式。
样机的类型全面而且免费，综合质量很高。
地址：https://www.mockupworld.co
素材非常优质精美，有免费和付费的资源。
地址：https://www.ls.graphics/#UI
主要面向设计师群体，帮助设计师建立个人在线作品集。几分钟就可以建好一个作品集网站，提供精美模板选择。最大的特点是易于操作，无需懂网页程式，都能在建立一个网站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收费。已订阅用户可免费使用。
地址：https://portfolio.adobe.com/start
此综述篇大家有了比较整体的了解，在设计流程中每个环节，介绍了一些比较好用的工具，后续的设计工具系列文章会针对某一环节进行更深入的探索。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
“效率一直是公共舆论中的一个重要话题：在古希腊人眼中，它是政治和社会运转的方式；工业革命早期，亚当·斯密将其视作提升生产力的强劲动力。”时至今日，它被奉为公共生活的首要目标，效率升级实质是广义世界里生产力的一次革新。
科技和物联网以看不见的方式正重塑这个世界，从生活到工作，科技把每一张有形的办公桌移到了云端，让每一场可能发生的对话跨过了坐标的限制。技术开放地定义着我们所理解的现实工作环境，腾讯文档以对效率协作世界新的理解重新归来。
我们希望“让协作更高效，让创作更轻松。” 站在新旧交替的路口，是时候以全新的设计语言，让工具退去冷冰的外壳，走进与智能隔空对话的新世界。
产品感知关键词：
Phase 1
我们把腾讯文档的品牌因子比做是架落与两岸的桥，从时间和空间的角度，连接现在与未来。在这里，代表效率协作先进生产力创造的新世界，转承着庞大信息流的无限可能性。希望在这里发生的每一次虚拟与现实间的交流都是如此贴近你。
在此，我们赋予这个新世界以“数字”之名为前缀：
在数的数字（number）里，从有限0到无限∞；在物的数字（digital）里，从有形到无形。
就像霍金所说，宇宙最根本的东西首先是空间，其次是物质，再次是时间。因为物质的存在和运动必须是在空间里进行。而没有物质，谈论时间是没有意义的。
而在这个广阔的效率世界里，由无形的空间结构支持，答应着无声的时钟….
关键词的联想：
连结、握手、相遇、构建、乐高、晶体、方块、魔术、火花、梦想、成就、有序、几何、空间、数字、代码、窗口
从联想中提炼具有关键的隐喻和形式：
把关键性的隐喻抽象出来，找到表现形式，使其更简洁纯粹，更容易被组合
品牌关键词
秩序是一切天体、物质、时间、生命、形态和形式秩序状态运行的最基本法则。
万物有序，虽然呈现的现象千变万化，但褪去复杂的外表，内在规律却是不变的。以更规整和原始的抽象基础形为所有应用元素的开端，以秩序作为布局的基本准则。
正如我们腾讯文档一直在思考的，寻找秩序中的效率，再从效率中找到变化的规律。
早在上世纪，透明性和通透感就追随着设计的平面到立面。从沃德装饰语言的中立性到密斯凡德罗建造的清晰，以形式的通透对内容的冗杂，以材质的纯粹对结构的多样。
在这里，我们用“轻和透”来体现技术带来的未来感，在画面中叙述的更多是余白空间所带来的无边想象力。
“光从来都是为了它所照亮的事物存在而不是为了它本身。”
流质的光影和颜色是整体设计中氛围的基调，用颜色之间缓慢的渐变预演空间中正在发生或者即将发生的故事。
我们用了色盘中相对沉静的极光色系（蓝紫绿），拓宽空间的边界感。
与正在交融和变化的颜色中间态，一同隐喻了智能和科技作用下的每一次协作和创作的真实实现。
Metaphor Box 协作盒子，我们用一个变化的立方隐喻一个协作空间站。在这里有可能发生的是各种各样的碰撞。思想的火花，创作的灵感，执行的高效。这里有属于一个也有属于一群人的精彩。
最终我们将腾讯文档的Logo图形化，赋予Metaphor Box协作空间的概念。利用有序的几何线条为空间背景构图。在原本的智慧的品牌蓝基础上，添加了一点灵动偏暖的渐变色，为整体画面增添生命力及亲和力。最终完善后应用到官网、官网登录页、闪屏页、空页面的场景。
闪屏
在闪屏的延展中，我们基于大的品牌理念延展出两个不一样的方向。
A. 以腾讯文档logo的形状为视觉元素载体空间，向里呈现一个轻盈有机的未来世界。
B. 以腾讯文档产品“协作盒子”的概念，立体的展现一个代表科技为基底，多方协同运转的动力世界。
最终，我们选择了整体画面更为清晰，主体更为清透明确的主图形。
调整细节后应用到闪屏
官网首页Banner是最直接、最具感染力的视觉传达路径，我们需要让用户在进入 docs.qq.com 即刻形成品牌印象，通过Slogan传达腾讯文档的产品价值，同时在Slogan的字段上添加了正在编辑态的光标元素，体现文档高效的协作能力，最终以响应式的方式适配到移动端。
在官网的其他页面，我们将品牌语言进一步落地。
在腾讯文档空状态的设计中，我们以几何的ip形象为页面穿插一个个不一样的故事性叙白。传递腾讯文档平易近人的智能语调。
在画面的整体构成中，我们增加了一些轻透的质感元素，结合几何形的整体图形语言，让画面轻盈也丰富。
古尔德在《奇妙的生命》一书中写道：“有些人觉得（人类是唯一智慧生命的）前景令人沮丧，我却总为之感到振奋。我将它当成是一个源泉，它带来了自由，也带来了道德上的责任。”效率的背后不止是关于工作方式的改变，仍然需要不负所望：构建责任。
我们在逐步进化腾讯文档的整体视觉语言系统。后续我们将推出下篇，向大家展示腾讯文档品牌在UI语言和其他品牌延展中的更多设计。
在这个快时代，精耕出自己的风格，打造更舒适的用户体验，敬请期待......
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
2015年之后的中国互联网，人口红利、流量红利逐渐退场。2019年遭遇第一场资本寒冬，上半年投资总金额同比下降了58.5%。也在2019年，“精益创业”、“精益数据分析”、“增长黑客”等一系列数据思潮开始流行。而UX设计师作为半个产品经理，我们很容易将这股“数据热”迁移到自己身上：每个UX设计师都要学数据分析了吗？数据和设计是什么关系？天天盯数据会限制设计师的想象力吗？数据到底要怎么用？……
过往，设计师一般不会把“数据”挂在嘴边。我们提倡“以用户为中心，打磨极致用户体验”，较少考虑成本和商业效益。
通俗来说，就是产品经理负责“生意”，设计师负责“体验”。以“造鞋”为例子，产品经理做了市场调研，决定要生产儿童运动鞋，设计师负责设计“适合4-11岁的儿童在城市公园玩闹”的鞋子应该长什么样、穿着它跑跑跳跳是不是舒服的。但是设计师不需要担心运动鞋的销量，产品经理则要跟老板汇报销量业绩。
在红利消退、产品同质化严重和快速迭代的多重压力下，UX设计迎来了更高的挑战：仅凭主观判断“好不好用、好不好看”来打磨产品内在体验，不考虑产品的生存、增长和盈利，很难在行业立足。与此同时，随着数据采集工具的日渐成熟，数据以“客观”和“便捷”两大特点，帮助我们更快获得“设计的依据”。精益化设计是必然趋势，而“数据分析”是精益化设计的手段之一。
沿用“设计鞋”的案例，UX设计师要在自己所在领域思考：在设计调研的过程中，我们用什么数据指标来衡量这个儿童鞋好穿、好卖？在鞋进行批量生产前，我们有没有数据资源支持我们研究父母/小孩对鞋子外观的偏好、小孩运动时容易受到哪些物理伤害等等？如果有条件进行小范围的数据实验，我们如何设计数据实验来评估好穿好卖？
“理解任何事物都需要先对它进行定义，这样才能够在头脑中清楚地知道正在讨论的是这个东西，而不是其他东西。”非常喜欢美国经济学家Thomas Sowell在《经济学的思维方式》里说的这句话。
如果我们对“数据”下定义，那么产品设计语境中的“数据”具体是什么？数据是怎么产生的？
从数据采集手段来看，互联网产品的数据来源主要有3个：二手资料数据、问卷调研数据和应用埋点数据。
行业数据和竞品数据一般通过二手资料获得，包括商业交易数据、用户群的态度和意愿、用户舆论指数、竞品的用户规模和盈利状况等宏观数据。常用的搜索渠道有：百度指数、企鹅智酷、艾瑞、尼尔森、各大科技资讯平台等。
我们可以将这些理解为“市场数据”，在立项期对产品方向有一定指导意义，能快速了解市场概况，也能帮助产品思考差异化定位的问题。
以“腾讯文档为”项目为例，我们想提高腾讯文档用户创建文档的成功率，通过模板创建文档是关键路径之一。研究用户通过模板创建的路径时，想大概了解用户找模板时可能会在意什么。于是我们尝试使用百度指数搜索“模板”、“文档模板”、“PPT模板”、“Word模板”、“Excel模板”，从搜索量得知：PPT模板搜索量最高，符合我们的推测；Word模板内容中，简历、合同需求量较大，而部分用户只是想要好看的Word背景等等。虽然我们得到的有效信息不多，但我们能够通过二手资料的方式，快速了解用户需求的基本面。
问卷调研数据是通过向目标用户发放问卷获得的，侧重于收集人口学信息、用户自述的历史行为、主观态度或意愿，比如用户满意度调查、流失用户原因调查等。本质上是通过建立假设、再进行抽样统计的方法来得到用户口述的答案。也就是，问卷倾向于听用户说了什么、而看不见用户真正做了什么。严谨的问卷分析也会比对后台数据，校验用户说的和做的是否一致，以清洗无效数据。
较之于问卷调研数据，我们想看“用户做了什么”，则通过分析应用埋点数据获得。
“应用埋点数据”也叫“埋点数据”、“前端页面数据”，我们可以简单理解为“通过技术手段获得用户在应用内（网站、客户端、小程序等）的操作行为数据”。其背后原理是：用户和界面发生交互，系统需要向服务器发送请求和返回请求，把这些请求预埋一段计数代码，就能得到页面的曝光数据和用户的操作数据。
埋点需要产品经理或设计师做好数据指标的定义，跟开发工程师提前沟通，让开发工程师在代码中嵌入埋点。一个埋点由多个字段组成，规范地定义字段，有利于我们在数据平台搜索埋点更方便。当我们怀疑数据有效性时，也更方便排查埋点问题。
埋点类型可分为曝光埋点、操作埋点和时长埋点：
1. 曝光埋点可以捕捉页面被展示的次数，可以是针对整个页面，也可以是页面中的某个区域。即我们常说的PV、UV。
2. 操作埋点则是在用户对页面某个区域（按钮、卡片、提示条等）进行手势操作（点击、双击、长按、滑动等）时，进行打点记录。对应的，也称之为某个操作的PV、UV。
3. 时长埋点是通过标记以上两类埋点、并计算时间差获得的。比如，我们记录用户选取模板耗费的时长，可以通过离开页面的时间（t2）-进入页面的时间（t1）计算。而离开页面则用点击左上角返回按钮、点击具体模板等“离开”操作来核算。
基于以上3种原始数据，我们可以运算得出点击率、功能渗透率、人均点击次数、人均使用时长等具有对比价值的数据。
较之于二手资料和调研数据，埋点数据更加贴近用户的真实表现，作为反馈指标的灵敏度更高，可挖掘性更强，也能作为客观衡量指标引入到每一次产品迭代中。
设计师理解埋点的原理，有助于在数据采集环节跟数据开发更好地沟通，并提出合理的数据需求。另外，当我们拿到一组数据，也需要从根本原理上去判断数据的信度和效度，确保数据没有质量问题再进行下一步分析。
数据分析能力会在UX设计师的岗位招聘要求中被提及，但除了电商和广告行业的数据化设计知识体系较为成熟，其他领域还在探索。另外，相比于市场营销、产品经理、产品运营等职能，设计师的分析框架是相对晚熟的。
实际上，我们很难从招聘广告中归纳“具备数据分析能力的设计师”长什么样，但我们期望这样的设计师对数据的感知力强、分析逻辑清晰、数据经验丰富，对某个垂直领域的数据仪表盘了如指掌等等。
数据对UX设计有什么用？或者说，在设计链路的哪一个环节，数据和设计才能发生化学反应？
UX设计日常流程为：得到一个需求（需求评审/需求挖掘）——输出设计方案（设计决策）——验证设计方案（设计实验）。顺着这个流程，我们来看看数据在UX设计各阶段的作用。
肖恩·凯利斯在《增长黑客》开篇就提到“仓筒组织”这个概念：职能组织有各自的KPI，但未必对最终的业务目标都有利。比如开发人力有限的情况下，产品经理想上线新功能，市场运营想搞推广活动，设计想做UI大改版做炫酷的动画——就像N匹马有N个方向，马车跑不快。
尤其是当产品进入成长期，我们会发现“能做的事情真的太多了”！不仅仅是来自老板和产品经理的需求，每天都有用户想教你做产品，刚刚竞争对手又上线了N个新功能等等。另外，当多个产品经理分管不同业务线，每个产品经理都会认为自己提的需求优先级最高。那么，ABCD这几个需求，哪个更值得即刻实现？
有目标导向和成本意识的设计师，不会拿到PRD就开始画稿，而是做需求评审。下次产品经理给你提需求，或者自己想要主动提案，不妨从下面几个问题开始思考效益。
如果这个新功能上线或对已有功能做这些优化点：
｜正向评估：如果做，能使哪些用户在什么场景受益？用户会因此使用、消费、甚至推荐我们的产品吗？
｜负向评估：如果不做，是否会造成用户口碑变差，甚至弃用我们的产品？
｜数据导向：预估这个需求对大盘数据（AARRR）有何贡献？如果无法在短期看到对大盘数据的直接提升，应该取什么样的数据指标来评估其价值（GSM模型）？
｜比对优先级：目前有ABCD四个需求，而人力资源有限，当下最应该解决哪个数据环节的问题？
我们以腾讯文档的Excel按行填写功能为例，阐述如何在需求评审阶段就思考数据效益。
一开始，我们只是从用户吐槽中了解到在手机端使用Excel录入信息的困扰：协作人之间容易窜行误删误改别人填写的行，甚至把创建人输入的表头信息都给删掉了。
我们模拟信息收集场景，摘出Excel移动端输入的体验节点，发现“在有限的屏幕内去处理表格信息，需要来回滚动/缩放表格，再回到自己的行再输入”这一点最容易发生错误，尤其在没有冻结首行的情况下。
我们有收集表功能，也支持表格转收集表，但是都依赖创建人主动去使用这个品类/这个功能。我们是否可以在创建人不干预的情况下，直接把来回滚动的表格输入变成纵向的表单输入？
以上都是从“感知”角度发现和分析问题，确认了“存在这么一个问题”，然后提出了一个可行的想法。往往这个时候，我们容易为之兴奋。
但是如果我们坚持更精益的投入产出比，我们应当评估“这是不是一个要优先解决的问题”，即评估收益：改变Excel移动端的输入体验，能带来什么收益？
首先，我们做正负向评估。
｜正向评估：如果做，用户可以在手机端更顺畅地录入信息，避免串行删改的错误。虽然这不足以吸引新用户使用我们的产品，但这个体验未在竞品实现，能形成差异化的记忆点，也许能带来好的口碑。
｜负向评估：如果不做，手机端的Excel输入体验跟其他竞品无差，用户倒不会因此流失，但是创建人会因为协作者的犯错苦恼，也许会因此转为采用“IM一对一沟通”来避免出错。
然后是设定数据目标：如果这个功能落到数据板上，能作何贡献？
｜数据导向：我们预期这个功能能够通过提升手机端的输入体验，来避免用户出错，降低创建人整理数据的负担，以提高用户留存（而非预期这是一个拉新功能）。并且，设计假设正确，应该能通过一些数据指标看到用户的行为变化。
最后，对比同期提出的几个产品需求，评估优先级。
｜比对优先级：假设Excel按行填写的需求是A（图中黄色点），同期有一个影响文档安全分享的需求B。如果我们按照正负向评估去考量优先级，将AB两个需求都放在象限图里，越外层越应该优先处理，那么我们就应该优先处理需求B。
以上是为了将思维可视化呈现给读者，实操时更重要的是数据意识和敏感度。图示仅供参考，用何种形式表达不重要。
掌握一套清晰的需求评审思路，才有话语权去讨论这个需求是做还是不做、即刻要做还是延后再做。这不仅仅是UX设计师需要具备的目标导向思维和需求分析能力，而是整个团队都应该建立的数据意识和工作流。这也适用于对设计师提案的自我审查，避免自娱自乐。
产品在不同的成长阶段关注的短期效益会有所不同。初创期，产品先要验证其假设的需求是不是用户真实需求、商业模式是否可行。当产品发展到一定的用户规模，我们可以通过对比关键数据指标，去判断现阶段是否符合预期。这就像我们去医院抽血做体检，血样指标可以反映我们当前是否健康。
如何检验产品健康度呢？我们首先关注宏观的数据转化是否符合预期，即AARRR。海盗指标这一套，想必大家耳熟能详。但对设计师来说，难点在于如何将宏观数据转化与具体的用户使用场景进行关联，进而落实到具体的设计任务。
以腾讯文档为例，在线文档的核心用户价值是“从创作到协作的多人多端无缝同步”，因此我们定义用户的关键路径是“创作→分享→协作”，即：
基于关键路径，我们继续下钻分析每一个环节，建立用于监控“转化质量”的行为漏斗。比如在“分享”这一步，落到APP里，这个行为漏斗是：
我们发现仅30%的创建人在分享文档前设置了非私密权限——这个数据并不符合我们的预期，因为这会导致创建人分享文档后，协作人无法直接查看或编辑文档。协作人需要进行权限申请，创建人则需要处理相应的权限申请通知或更改权限，从“申请权限”到“审批通过”的时间差降低了协作效率。
我们进一步去找关联的数据指标，来确认“这给用户造成了困扰”——“有多少用户在文档分享出去之后再返回来设置权限”‘、“一个创建者平均要处理多少次权限申请”等等。
通过小范围的用户测试，我们了解到“权限设置”是一个视觉盲区。于是，我们优化分享页的信息展示，来改善“用户看不见权限设置”这个问题。另外，当创建人在处理权限申请的通知时，提供修改权限的入口，以避免重复处理同一个文档的申请消息。
最终，我们将“分享前进行权限设置”的转化提高到80%——吹牛的，业务数据太敏感，无法以真实数据跟大家分享，本文的数字皆为脱敏数据。
这就像一个剥洋葱的过程。先找到产品的核心价值和对应的主路径，再拆解到对应的多个用户任务流，关注微观的某个环节转化是否有问题。利用数据诊断产品健康度，然后继续用数据或其他研究方法下钻，下钻到可以落地到设计点的层面。
2016年听了白木彰老师在杭州的一次现场分享，他对“Design”的理解非常透彻。“Sign”是“标志”，应该是大家最共通的常识，就像国旗是这个国家的sign。那“De”是什么？台下有人回答“重新定义”，而白木彰很自信地说：“不，这是一个否定词”。
对于UX来说，同理。每一次的设计都是一次否定，否定现有体验的合理性，否定现有的产品、服务或某一功能完全满足需求。反过来想，则是审问自己的设计方案：每一次的“否定”，真的更好吗？
这里举一个“小需求”为例：腾讯文档Excel的PC端右键菜单高度优化。笔者目前负责腾讯文档编辑模块的UX工作，日常就是很多这样的“小优化”，其实这更加考验数据敏感度和对“严谨”的坚持。
需求背景就是用户反馈“右键菜单太长了，小屏幕看不到菜单底部的内容”。
“展示问题”的解法有很多：
解法1/ 用UI手段，降低单个menu item的高度。
解法2/ 重新归类，通过折叠来缩短菜单。
解法3/ 当菜单无法完整展示，重新锚定其在屏幕的坐标。
对比竞品，确实有表格产品通过（2）去解决这个问题，但是我们捞数据发现：右键菜单中，插入行列是高频操作（红色部分），点击次数比其他功能高5～130倍，且人均点击量分别是3次和2次。我们决定不去对增加行列进行菜单折叠，因为这样做虽然我们解决了“菜单太高”的问题，但降低了点击效率。
接到某个需求的“A问题”，我们容易一叶障目。但是，会不会因为我们解决了A问题而引发B问题呢？数据帮助我们快速决策，避免B问题的出现。谨慎对待每一次小设计，因为每一次小设计都是一次否定。
大家对数据实验应该不陌生，常用的方法有AB测试和灰度测试，是一种控制变量的抽样实验方法。
AB测试是指通过抽取抽取等量用户样本进行AB两个设计方案的投放，对比两组数据，进行方案择优。这两个方案的差异要严格控制在“仅有一个因素的差异”。这跟我们初中做生物实验论证“一棵小树的生长需要阳光”的思路一样：两组等量的小树，一组有阳光，一组没有阳光，经历相同的时间后对比生长的平均高度差。水、空气、养分等其他条件要严格一致。因此大改版等“多变量”的设计并不适用于AB测试去印证。
大改版则通过灰度测试或拆分变量去做AB测试来确保效果。灰度测试是指如果软件要在不久的将来推出一个全新的功能，或者做一次比较重大的改版的话，要先进行一个小范围的尝试工作，然后再慢慢放量，直到这个全新的功能覆盖到所有用户。也就是说在全量发布的黑白之间有一个灰，所以这种方法也通常被称为灰度测试。
设计师需要观察综合的数据指标，以腾讯文档为例常规的指标有：PV、UV、人均点击次数、功能渗透率、使用该功能的留存率等等。另外是多渠道收集用户反馈，包括腾讯文档的“吐个槽”社区、微博搜索关键词、随访身边的用户朋友等。
数据化设计不是对“精心打磨体验”的否定。恰恰相反，对设计工匠来说，数据分析能力是一种新的“打磨工具”，提倡在设计实施和决策过程中更科学和客观。UX和数据的关系，就像我们期望鞋子被量产之前能够有数据佐证“这款鞋好看好穿好卖”，而不是否定“好看又好穿的鞋子能带来更好的销量”。
最后，“价值-设计-数据”是一个动态课题，必然随着业界经验的沉淀和数据工具的发展，不断迭代。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
通知是产品中极其重要的一部分，它能快速将内容的状态及变化通过不同的方式传达给用户，以便用户在收到信息后根据所传递的内容及时做出应对策略。
在这里，有一个很现实的问题，很多产品喜欢一股脑的把有效的/无效的、重要的/不重要的、用户想知道的/不想知道的等所有信息通通推送给用户。那么，你的推送渠道真的用对了吗？是否做了信息优先级区分？推送时间段是否有效？站在用户角度，下面这些场景你肯定碰到过：
◇ 手机屏幕总是频繁弹出信息，接二连三的震动、提示音让你一怒之下卸载了一些不太常用的APP；
◇ 桌面图标99+、主页的消息入口99+、进入消息分类还是99+，清理起来非常麻烦，还不如关闭几个分类通知，少一个也能缓口气；
◇ 一天少看了几个小视频，好不容易节省出来的流量被通知无情的消耗，还不如关闭系统通知权限来得快；
◇ 每隔一段时间，都要在手机短信中回复一大堆TD（退订），想吐的感觉；
◇ ......
在频繁地打扰下，用户关闭了一个个通知权限、甚至一度卸载APP。不难看出，好的消息通知能巧妙的将用户求留住（部分用户利用通知就能保持对微信、QQ的控制欲），做的不好就会起到负面作用、失去了消息通知的初衷，这里面最需要把控就是推送的一个“度”。
用户可能因为一条走心的推送而转化、也可能因为被打扰而放弃使用，站在设计角度，需尽可能打造让用户更喜欢的通知系统。那么，对于不同的业务需求及使用场景，又该如何差异化的进行消息推送，笔者通过本文进行分析总结，与大家一起了解。
一、消息推送的基本知识
二、消息通知渠道
三、让用户再次开启通知权限
四、提高触达率的小技巧
五、结语
消息通知是产品提供的一项服务，能够及时将产品的期待或内容的变化、根据其等级权重合理的通过不同渠道及时同步给用户，常见的如互动提醒、老用户召回、活动拉新、产品更新或帮助提醒等，通过站内红点、弹窗、短信、邮件等方式与用户进行信息交换。
用户层面，方便及时获取到想要知道的信息、以及对信息交换的控制权。例如：用户发布一条新的短视频想要对评论/点赞及时掌控、给心上人发了信息想在第一时间看到回复...等，产品也是借此用户对内容的控制欲，利用消息推送提升用户的使用体验。
产品层面，通过主动推送想让用户知道的信息，以达到新/老用户转化的目的。例如：通过手机短信形式发放优惠券对老用户召回、应用内通知或桌面推送对用户拉新...等，以此提高产品收益，获取更大的商业价值。
首先，一个好的消息系统首先需要将消息内容设计的全面，以便用户通过消息通知能准确无误的了解到对应内容；
其次，消息的触达方式需合理有效，必须提供便捷的操作入口以供用户及时反馈；
另外，为了避免过于打扰用户，需选择合理的推送渠道，提高用户触达概率及反馈效率。
消息通知渠道分为应用内通知应用外通知。应用内通知主要来源于消息中心或系统主动触发的弹窗来体现，而应用外通知包括桌面图标红点、手机短信、电子邮件、push、公众号信息（需绑定）等渠道推送。
1）消息功能入口
消息功能入口提示也称为红点提示，主要有底部Tad栏、首页右上角、个人中心右上角三种形式。当有新的通知出现时，对应图标的右上角会出现小红点提示，清晰明了，关于小红点设计，之前《小红点篇 | 用好这招，让用户的触达率大幅度提升！》这篇文章有详细说明。
红点提示的用户触达率较高，但需要用户在登录状态下才能查看，比如订单状态变化、用户与用户/产品之间的互动消息、产品活动通知等。
2）消息列表
当产品的消息类型较多时，点击消息功能入口即可跳转至二级分类列表。与上述相比，消息列表的内容则更加清晰，通过第一次消息入口功能的引导触发，这里的用户触达率将成倍增加。
3）弹窗通知
以弹窗的形式覆盖在页面内容顶层，阻碍用户的当前操作并迫使用户对弹窗做出决策，可以是系统主动弹出或用户手动触发，对用户的干扰极大。
弹窗通知最大的优势在于会100%被用户看到，无法忽略，否则将不能进行其他操作，很适合产品的一些重要事件提醒，例如应用升级、活动通知、优惠券引流等。
4）Toast 通知
Toast通知是用户在操作之后给出的即时反馈，与当前页面内容关联性极强，但不会中断用户的操作，出现的时间很短，一般持续3秒后自动消失，对用户的干扰也比较小。
需要注意的是，Toast容易在用户不注意的情况下被遗漏，所以适合用于操作后不影响大局、且不可二次操作、不可逆转的轻量提示，例如删除成功、提交成功等。
1）桌面小红点
小红点通常以圆点+数字的形式出现在图标右上角，用来提示应用内的未读消息数量，进入应用查看或清除后小红点则会消失。桌面小红点有一个必备前提，需要同时开启设备和应用内的通知权限方能接收提醒通知。
在部分应用中，桌面小红点具有较大的价值，能对用户产生积极的影响，使用频率得到进一定的提升。例如：社交类应用中的私信、评论、点赞等；商家端的咨询信息、下单提醒等，用户在看到后都会有强烈的点击欲望，对一些数据的提升起到推动作用。
2）PUSH推送
PUSH推送通知常见于设备顶部横幅（几秒后消失）、通知中心以及锁屏后的中部区域，用户可从卡片中的内容获取信息类型及重要程度，用以决策是否需要立即打开。
这种推送方式，用户几乎很难忽略，不处理的话会长时间浮于屏幕之上，非常适合价值及时效性较高的消息通知。除视觉提醒之外，还可通过听觉触达用户，例如支付号、微信的收款信息等，不过依然要同时开启设备和应用内的通知权限。
3）手机短信
短信推送是大家很熟悉的通知渠道了，毕竟现在都是用手机注册账号，手机号获取难度几乎为“0”，常见的有验证码短信（用户请求）、营销短信（产品推送）两种：
验证码类似“一问一答”的互动，没有什么特别的玩法；
营销类短信对于拉取新用户、老用户召回、节日/活动促销能起到不可替代作用，产品可通过短信发送图片、文字以及超链接，内容的时效性、用户的触达率都相对较高。
着重说明一点，因为短信通知的成本较高，在使用之前需要足够的思考分析，细分用户群体做到精准投放，避免所花费的成本与产生的价值不成正比。另外，如果需要放超链接，那么短信内容一定要有足够的说服力及吸引力，总是被用户当做诈骗短信删除、举报的话还不如不放。
为了减少对用户的打扰，让产品更人性化，一般会在短信结尾提供TD（退订）提示，用户回复即可取消后续的推送，但是否真的取消成功，这就得看产品了(¬◡¬)...
4）电子邮件
电子邮件推送方式使用的并不多，一方面需要产品有web端服务，纯粹的移动端APP邮件推送不会有什么效果；另一方面，绝大多数的用户登录电子邮箱并不频繁，还容易被用户一键清理或误删。
电子邮件唯一的好处就是用户可通过超链接直达内容出处，相比APP应用，免去了下载等一系列操作，还可以长时间滞留，便于用户随时查看或添加星标，处理时间段选择较为灵活，很适合web端服务。针对一些商业化的邮件推送，也需要花费一定的经济成本。
产品获取用户邮箱地址的难度较大（邮箱账号除外），不难理解，使用手机号一键登录、验证码登录、第三方账号登录远比邮箱地址登录要方便的多。除此之外，还可以通过个人设置的添加邮箱、问卷调查的邮箱地址预留来获取，不过这就要看用户的主动意愿了。
5）公众号消息
公众号背靠社交应用，普及程度及用户触达率是极高的，不过这需要产品利用部分业务、活动为导向，引导用户关注公众号后方能接收到消息通知。
目前公众号只能向用户发送符合部分场景要求的服务通知，例如刷卡通知、物流轨迹变化、商品购买等。如果预算足够的话，还可以购买公众号列表、内容详情页、朋友圈等产品广告位进行特定用户群体推送，无需用户关注也可以看到并进行转化。
用户一旦关闭通知权限，对产品来说无疑是一个损失，这意味着没有消息通知的推动，用户的使用频率以及与产品之间的互动显然会减少（就连夫妻之间都需要时常互动与沟通交流，何况对于有选择余地的产品），时间长了，用户转投其他产品的“怀抱”也不是不可能。
有没有想过，用户只是关闭通知权限而已，并没有卸载APP，真的就没办法了吗？是不是该做点什么...
用户之所以还未卸载APP，说明还有价值，归根结底，关闭通知权限的原因都是因为消息的“狂轰乱炸”带来的无尽骚扰，几乎没有例外，而产品还会添上一把火，用户再次打开APP时无底线的催促用户再度开启，耗尽用户最后一点耐心后，或许再也没有机会了。
这个时候，设计师考虑的不是频繁提醒用户开启，而是用户关闭通知的真正原因（“狂轰乱炸”只是概括），细化各种可能性，然后从中找出机会点，但凡有所改进都值得试一试，毕竟相比什么都不做不会更糟。这么解释似乎毫无说服力，下面举个例子：
当产品中的某项免费服务突然有一天开始收费了，但受到了大多数用户的抵触，这个时候你该怎么做，是无视用户诉求继续收费、还是恢复到之前的免费？这并不是一个选择题，继续收费会导致大量用户流失、恢复免费可能连维持运营成本都难，所以不经思索的选择草草收场、连下下策都算不上。用户抵触的原因可能收费过高或是与实际价值不符，有没有想过利用限时折扣、附加其他增值服务（成本较小）或者组合捆绑销售也不失为一种策略。
那么，到底该如何做既能愉快的发送消息通知、还能能挽回用户的心呢？
用户关闭通知权限，并非没有需求，最典型的就是在某宝、某东加了满满一“车”商品等待降价，然后抱怨消息通知太吵关掉了通知权限，最后就是无法收到折扣通知、还把问题怪在了APP身上，着实太冤。用户只要还有需求，通知权限就还有被重新开启的机会。
1）损失厌恶/利益引诱
首先，我们需要找出对应的价值点，利用优秀的文案给予用户思考的余地，用户每多思考一会，结果都有可能发生改变。
人们都讨厌失去，对于损失的不可控很难接受，在引导用户开启通知权限时，需要强调不开启会失去什么，毕竟面对“得到”和“失去”时，损失更加让人难以忍受，例如物流产品告诉用户“未开启通知，将错过重要的快递信息”。还可以通过激励等进行利益引诱，如“开启后能及时获取红包卡券、折扣通知”等，并提供快捷通道，促使用户重新开启通知权限。
2）消息分类/分别处理
每种类型的通知都不可能符合所有用户的“胃口”，针对社交、电商类产品，可将通知类型分类处理，用户希望接收哪种类型的消息单独开启即可。
例如支付宝将消息拆分为多个类型；京东还增加了午休免打扰设置，开启后在12：30-13：30不会收到任何消息提醒；微信群过多、消息太吵时，开启免打扰又担心错过重要人的信息，于是微信在去年上线了开启群消息免打扰后、可设置群内4个人的消息正常通知，算是比较人性化的设计了。
3）提供关闭/关不彻底
部分产品提供了关闭消息通知功能，但又关不彻底，这是产品基于妥协的基础上，依然在低频推送消息的“流氓”玩法，与用户完全关闭相比，已经算是不错的结果了。
常见于PC客户端，就像很多软件的插件一样，不管怎么关，总是无法彻底关闭，甚至还将开启操作伪装成其他内容引导用户误触；手机短信推送也会有这种情况，用户回复过“退订”后依然会收到相关短信。
这种方式需谨慎使用，在用户关闭通知后，需通过后续推送内容的质量、频率试探用户底线，然后逐渐提升，切不可无视用户操作。
反复推送相同的内容只会让用户更加反感，回复退订、卸载应用都可能在这一刻发生。
很明显，消息发出后，如果用户的触达率较高就没必要再次推送。反之触达率较低，重复推送会让用户有种被催促、胁迫的感觉，适得其反，触达率低有没有可能是文案不够友好、表达不够清晰或者吸引力不够？即便同一件事情，也尽量使用不同的表达方式，如何想办法重新引起用户的关注才是关键点。
中华文字博大精深，且有56个民族，其性格习惯各异，特别在利用当前社会热点、媒介进行的营销推送时，尽可能规避掉敏感信息，如地域/民族歧视、性暗示等。
很多时候，消息推送太少无法满足产品目标、太多则会惹恼用户导致通知权限被彻底关闭，所以不仅要考虑消息推送频率，更重要的是对受众群体进行分类、分别推送，不要每次都一股脑的将消息发给所有用户，当然，能做到千人千面（成本大）则会更好。
没有用户愿意在不明所以的情况下来看长篇大论的内容，需确保消息内容简单直接、清晰易懂，并符合用户认知习惯，还得保持友好的语气以及富有创造力的品牌形象。
处于营销目的时，可利用感兴趣的事件/事物勾起用户的点击欲望，例如网络热词、时下热点等，笔者虽然并不提倡“标题党”，但不得不说，很多标题党都能起到不错的效果。
消息通知需要一个有效操作入口，并且在消息内容中有对应的指向，点击应用内通知切换APP界面、应用外推送链接跳转至web页，从始至终都需要为用户提供一个查看更多内容或参与的有效途径。
消息通知设计的主要目的是在正确的时间、以正确的方式将内容呈现给用户，并提高产品的转化率，不管用户愿不愿意接受，这始终都是一个呈现信息的不错途径。
本文主要总结了消息的通知渠道、常见问题处理、提升用户触达率的方法，以帮助新手设计师快速掌握完整的消息系统。或许最终的结果事与愿违，但不能否认其魔力，需要做好的是确保消息内容质量、对应的受众群体及合理的推送渠道，相信总有一种方式适合你产品。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
文章来源：站酷 作者：大漠飞鹰CYSJ
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
众所周知，人机交互是一门集调研，构思，设计和测试为一体的学科。作为一门覆盖多领域的多学科，包括并不限于心理学，行为学，编程，工程，设计，调研，和工商管理，现代人机交互的核心已经不再是从技术层面去解决问题， 而是侧重于以多个视角去挖掘问题的本质并思考问题背后的价值。也因此，人机交互学术界一直以来都试图寻找一种思考模式，或者理论模型，去将复杂的思考流程提炼出来。
近三十年来，人机交互领域的方法论可谓百花齐放，尽管许多知名研究机构与院校都发布了不同的设计模型与流程图，但是其内核终究大致相同（寻找问题——定义问题——设计——测试）。
以下是近年来国际最主流的七种人机交互设计模型：
1. 尼尔森诺曼集团设计流程 （Nielsen Norman Group）
2. 斯坦福大学设计学院设计流程（Stanford Design Thinking Process）
3. 《情景化设计:为生活而设计》 中的设计流程 （Contextual Design: Design for Life）
4. IBM环形设计模型 （IBM Loop Model）
5. 英国设计协会双钻石设计模型（Design Council Double Diamond）
6. LUMA 学院设计流程（LUMA Institute Design process）
7. Dubberly Design Office 桥型设计模型（Analysis-Synthesis Bridge Model）
其中，前6种应该都是大家相对熟悉的，我们在文末也附上了官方链接供大家探索。今天这篇文章我们将简要的带大家了解列表中最后一个也是最有特色的一个人机交互模型：桥型模型（Analysis-Synthesis Bridge Model）。
桥型模型是美国 Dubberly Design Office发表的设计流程图（Analysis-Synthesis Bridge Model），对于不清楚的读者，此公司的创始人Hugh Dubberly 曾发布超五十篇人机交互领域的研究型文章，在多个知名设计协会挂名，并被录入美国 ACM 的 SIGCHI Academy， 成为公认对人机交互领域做出最杰出贡献的人之一。Dubberly 也曾在多个美国知名大学任职，因此，此模型也是多数国际人机交互学科的公认理论。
尽管相较于其他的流程图，这个流程图较为抽象，但是其所用的多维度分类却相对明了的阐释了设计的本质。如图所示，桥型模型的x轴分为现在和未来，y轴分为具象和抽象，以此来定义设计的状态。同时也加入了动词“形容”，“分析”，“研究”，“制作”去定义设计中的操作。在这个桥型设计流程中，设计师从左下角到右下角的过程代表从现象走向抽象再从抽象走向产品的过程，与此同时也代表着从今天走向明天，或者说从问题的现在态走向解决问题后的未来态。
起点从左下角开始，（what “is”）代表着问题本身，而左上角的（model of what “is”） 代表问题的抽象模型或者问题的本质。这两个阶段代表着设计中的调研阶段（Researching）。此时的设计师应该通过“形容具象的现象”（左下角格子 Describe+Concrete）即收集信息来拓宽对问题的了解然后再进行“分析抽象的模型”（左上角格子Interpret+Abstract）去制作问题模型来更清晰的看到现象的本质和规律。
在这个阶段，“世界并不清楚他想要什么样的设计”—— Paola Antonelli
在开始阶段之所以要抽象出问题模型，是因为作为设计师不能单纯的听从人们的诉求。当生活中出现一个问题时，生活中人们往往不太清楚自己烦恼的本质是什么，要么他们只看到了问题的表面，要么他们被太多因素混淆了。因此在这个阶段，设计师的责任就是去分析问题存在的环境与原因，并且以人为中心的角度去分析表象下人们的真正需求。也是因此，避免以技术为中心的分析（machine-centered-research）而选择以人为中心的研究（human-centered-research）才是交互设计师应有的职责。
在做以人为中心的研究时，收集和分析信息时避免内隐偏见（unconcious bias）是非常重要的。这里指由于生长在固定社会和文化下的而无意识带有的偏见，比如身体健全的人忘记考虑残疾人的需求，或者经常用电子产品的人下意识认为一些复杂操作很常规。在设计里，歧视不止包括在搜集用户信息时忽略了个别群体，同时也包括设计师本身所带的特定视角。一个成功的设计纵然应该满足大多数人的需求，但是一个向善的设计也不应该忽视特殊群体的情况。这里不得不提到，虽然现如今很多设计往往依靠大数据来进行设计，但是大数据本身就代表着忽略少部分群体的需求，导致少数群体的歧视愈发严重，甚至一度威胁到一些小众的题材。因此在调研时考虑到人种，年龄，经济情况，教育程度，是否残疾，和对科技的熟悉度可以更严谨的分析不同视角下问题的影响。
左下角常用的用户研究方法有情景调查（contextual inquiry），利益相关者逻辑图（stakeholder map)，和参与型研究(Participatory Research)等等。左上角常用的分析方式有带入虚拟人格（persona）和流程图（journey mapping）等等。
右侧的两个阶段则代表问题的未来态或者设计原型态（prototyping）。右上角的 （model of what "could be")代表问题的未来的可能性，也就是一般说的设计和构思部分，而右下角的（what “could be”）就是将这些未来的可能性做出来，从概念化为产品。
然而如何从右上角的抽象模型到右下角具体设计呢？在这里便需要了解一个大致的设计信息层级。
如图所示，一个设计的是由多层结构组成的，从抽象到具象分为五个阶段，策略（Strategy），内容（Scope），结构（Structure），框架（Skeleton），视觉（Surface）。一个严谨的设计应该是从下而上发展的（从深层的策略到浅层视觉），并且每次在考虑深层的策略时应该避免浅层的干扰。这是因为浅层只是策略的表现的方式，而深层策略才是决定产品核心价值的关键。决定策略（Strategy）时应该直接依据模型左上角“问题的本质”来决定要设立什么样的产品目标。只有策略定了，才能确定这个产品的内容与受众群体。假如目标是让盲人点餐，那么内容有可能就是在这个页面提供特殊的菜单形式和电话快捷键。而假如目标是让人听音乐，那么内容可能就是提供音乐推荐与保存。而在结构方面，确立内容后只需要一个完善的逻辑，比如用户的具体使用流程是什么，就可以快速具现这个产品的结构。最后，框架和视觉阶段则更多只是一种表现手法的选择。无论最终选择如何设计，只要保证框架和视觉元素在整个产品中保持一致并且符合产品定位即可。
从策略到视觉的过程也就是模型中从右上角到右下角的过程。每个设计师的目标都应该是以具象的产品实现相对抽象的策略。而要想让视觉和策略紧密联系，就应该尽可能在每一步的过度时都考虑到前后步骤的衔接是否逻辑通顺，避免层与层之间脱节的现象发生。尽管在现实中，层与层之间的分隔往往没有这么清楚，但是这种分层的设计逻辑可以作为一个有用的构思框架，让设计师在发散思维的时候不偏离目标。
而最后即便到了右下角的产品产出，一个完整的设计流程也不算结束。一个成功的设计总是需要多个设计迭代的。尽管在每一个一个迭代中，右下角可能是最终产出，但是在一个完整设计流程里，右下角还应该连接左下角，将已经完成的设计再一次进行分析和测试并总结出优缺点，再进行下一轮的设计。
在右上角的设计部分中经常使用的方法有故事模版（story boarding），纸质低保真模版（paper prototyping），和以人为中心设计（human centered design）等等。
总而言之，桥型模型作为国际人机交互院校最常用的模型，从多个角度描述了从一个问题从研究到解决的过程。我们可以看得出，设计从来都不是一个随性而为的过程。从左侧的无偏见而系统的分析问题到右侧的遵循结构进行设计，设计师都应该在一个严谨的框架下进行思考和设计，这样才能做到有针对性的解决问题。在这里也希望大家能多多关注各类人机交互设计理念并从中获取灵感亦或找到适合自己的设计流程。
下面是六种其他主流国际人机交互模型和官方链接供大家探索：
1. 尼尔森诺曼集团设计流程 （Nielsen Norman Group）
研究问题领域（discover），探索不同可能（explore），测试设计（test)，和倾听反馈(listen)
官网链接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
2. 斯坦福大学设计学院设计流程（Stanford Design Thinking Process）
抽离问题(empathize)，定义问题(define)，寻找灵感(ideate)，制作原型(prototype)，测试成品(test)。
官网链接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
3. 《情景化设计:为生活而设计》 中的设计流程 （Contextual Design: Design for Life）
理解问题(understand)，发明未来(invent)，情景话设计(design)，制作原型(validate)，和开发产品(develop)。
书本链接：https://www.goodreads.com/book/show/33805307-contextual-design
4. IBM环形设计模型 （IBM Loop Model）
观察(observe)，反思反馈(reflect)，和制作（make）。
官网链接： https://www.ibm.com/design/thinking/page/framework/loop
5. 英国设计协会双钻石设计模型（Design Council Double Diamond Model）
发现(discover)，定义(define)，制作(develop)，传递(deliver)。
6. LUMA 学院设计流程（LUMA Institute Design process）
看(looking)，理解(understanding)，制作(making)。
官网链接： https://www.luma-institute.com/about-luma/luma-system/
以上就是本篇的全部内容了，希望大家读完后能对国际主流人机交互领域多了一些了解或者从中获取一些启发。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
平时用QQ音视频来做什么呢？和好友聊天？与家人联系？还是工作开会？现在你有了新选择，解锁视频娱乐新方式，QQ一起派对让你不必出门，也能和好友一起玩聚会游戏。
挖掘更好玩的娱乐社交场景，能带给用户更愉悦的体验。疫情期间，线下聚会因此受限，线上娱乐应运而生，在此契机之下，期望借助音视频实时互动、声影重现的特性，开启了新的娱乐形态——QQ一起派对。
观察竞品普遍存在不足之处，即缺乏真实聚会游戏的氛围与互动。因此，解决社交游戏产品缺少真实情境的问题，成为QQ一起派对的创新机会点，有利于在竞品中突围，塑造差异化优势。
QQ一起派对是基于音视频展开的线上聚会游戏，结合了实时互动与娱乐化内容。为了让游戏过程更贴近真实聚会场景，我们从游戏氛围和自然交互两方面切入，寻找创新突破口。
游戏氛围
构建适用于游戏类型的界面框架，让线上聚会更贴近真实世界，并运用视觉感染力，营造环境氛围，包括场景具象化、增强代入感等方法，实时感知好友的情感变化，从而获得社交临场感，在心理上感到彼此的存在。
自然交互
有别于竞品需通过点击按钮作答，QQ一起派对利用实时语音识别，让用户通过更自然的人机交互方式，在游戏过程中进行语音抢答，彷佛置身于真实世界中与好友互动，成为QQ一起派对的独特卖点（Unique Selling Proposition）。
综上所述，QQ一起派对的设计要素包括：、
1. 社交临场感（Social Presence）：场景具象化、高度同步实时响应、感知他人情感变化
2. 沉浸感（Immersion）：营造氛围、增强代入感、突出内容与主角
3. 可玩性（Playability）：游戏界面、游戏机制、游戏互动
4. 凝聚力（Cohesion）：将好友聚在一起、吸引更多用户来玩
舞台场景化布局
QQ一起派对能让用户创建房间，邀请好友参加线上聚会，促使游戏氛围具象化。游戏类型聚焦于〝你演我猜〞、〝明星问答〞等猜题游戏，为了增强代入感，让用户融入情境之中，我们采用舞台表演的界面隐喻（Interface Metaphor），借由深色背景突出内容与表演者。界面框架选择一个大画面与多个小画面的组合，更贴近轮流上台表演的游戏类型。通过舞台场景化布局，模拟线下互动的真实感。
我们真实还原了线下抢答的互动体验，通过倒计时动效、实时分数标签，以及抢答成功反馈，增添游戏的紧张感与刺激感。
在游戏过程中，除了通过视频画面感知好友的情感变化，用户的语音状态也会实时反馈在头像上，响应抢答题目、好友交谈，以及各种表达情绪的声音，借着声音视觉化的效果，搭配视频与人声的重现，交织出多层次的感官体验。
发送邀请是召集好友的重要途径，而作为〝邀请函〞的消息，需要传达明确的信息，让用户一眼就能感知房间内的状态，包括准备开始、游戏中、游戏结束等，避免用户点击加入游戏时，却因游戏已开始或结束而无法加入。为此，我们将邀请消息实况化，持续更新当前状态、参与成员等，让用户能实时感知派对房间的变化。
QQ一起派对初期聚焦于好友一起玩，但仍不免发生创建了房间，当下找不到好友，或因等待过久而退出房间的状况，使得创建房间到实际参与的转化率受到影响。从用户访谈结果来看，用户存在排解寂寞的心理诉求，但对象不一定得是熟人好友，因此渴望找到游戏伙伴、快速开始游戏，成为QQ一起派对扩展至陌生人玩法的契机。
针对找不到好友的问题，我们新增了匹配陌生人的能力，用户可从游戏大厅进行随机匹配，倘若创建房间后找不到好友，也能在房间内匹配玩家，降低游戏参与门槛。
此外，进一步优化房间内的界面布局，将游戏卡片缩小平铺排列，让用户一眼就能看到多款游戏，提升对游戏数量的感知与转化率。在游戏类型上，新增了猜歌与知识问答两款游戏，并提升现有题库质量，避免游戏趣味性不足，影响用户留存率。
为了增强游戏氛围，我们通过情感化设计带领用户进入情景中，让用户更好地理解每个玩法，并从游戏玩法与情感诉求提炼出场景元素，以此搭建游戏世界观，并将故事情节加以推演，增强趣味性与独特性，还能进一步提升记忆度。
光效有利于吸引和聚焦视线，并以不同的表现形式来影响情绪。我们从光的色彩、动效、光感和造型等层面，创造出五种增强感官体验的光效设计，将其应用在游戏大厅入口，借由不同的光效类型与动画形态，强化用户的世界观感知。
带有情感的故事会在记忆中发酵，引领用户进入场景。我们将游戏入口的功能属性，转化为富有故事性的场景设计，当用户被故事所吸引，多感官区域被激活，将会激发用户情绪，有利于记忆与理解游戏入口，对游戏产生共情，进而超出产品的功能价值，与用户建立情感链接。
例如匹配陌生人入口，使用QQ的IP形象驾驶UFO，准备召集用户前往神秘的太空之旅，意味着通过陌生人匹配，你将摆脱寂寞，以光速般的速度找到游戏伙伴、快速开始游戏。通过故事剧情激发情感共鸣，并适当结合IP渗透品牌价值，吸引用户参与游戏。
破格设计能够加强张力、突出游戏主题，我们运用破格效果的3D图标造型，彰显游戏的独特调性，树立鲜明的品牌印象。
组件化除了提高设计效率，还能从整体一致性考量差异化。我们将游戏卡片、题库卡片、提示卡片和入口卡片等功能界面，构建一套组件系统，让框架布局贯通全流程，打造体验一致的可玩性，利于后续的扩充与延展。
根据游戏可玩性研究，提供挑战与磨练技巧的机会，对持续参与游戏的动机有正面影响。有鉴于此，除了提供随机匹配、召集同好共乐，我们还设计了极限生存战玩法，希望借着1v1淘汰赛制增添乐趣与挑战性，激发用户持续参与的动力，特别是年轻人酷爱这种竞技感，击败的对手越多，获得的奖励就越高，有利于勾起用户的胜负欲。
为了营造同场竞技的临场感，我们利用匹配动效强化氛围。随着已加入玩家的数字不断增加，底部会实时展示用户头像，具象化呈现玩家数量，烘托热闹气氛，消除等待时的焦虑感，让用户处于蓄势待发的状态，而红蓝对战布局则进一步强化PK宣战的氛围。过程中若有玩家遭到淘汰，用户也能通过底部头像感知剩馀玩家数量，以此增强游戏临场感与成就感。
每轮击败对手时，答题区域将变为全屏的庆祝画面，搭配撒花特效、头像聚光灯，营造欢愉的胜利氛围。而在游戏结果页，我们同样利用色彩和动效的差异对比，塑造胜败双方的情绪氛围，以此增强荣誉感与仪式感。在生存战登顶挑战成功的用户，将会站上颁奖台授予最高荣誉，在舞台聚光灯的照耀下，迎接光荣胜利。排行榜有助于强化击败众多好手的感知，激发胜利者的分享欲。
QQ一起派对推出后深受用户喜爱、获得广泛好评，调研结果显示，用户整体评价相当高，也乐于将QQ一起派对推荐给好友。
综而观之，音视频除了广泛应用在通讯场景，正逐渐赋能更多创新场景，而娱乐场景更成为兵家必争之地。QQ一起派对开启了新的娱乐形态，充分发挥音视频声影重现的独特优势，消弭了空间距离，尝试解决社交游戏产品缺少真实情境的问题，让游戏过程更具临场感，就像面对面进行游戏一般。未来将从玩法丰富性、游戏挑战性、题库可玩性三方面持续优化，打造更好玩的音视频体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
距离业界首次提出“全链路设计师”这个概念已经过去了几年，从称谓的变化我们就可以感受到设计师这一角色职责的变化。在近几年的产品设计工作中，我们和上下游之间的协作越来越紧密，介入阶段越来越往前，新的趋势对设计师也提出了更高的要求，包括更深入的产品思考，对用户的时时洞察，高效的沟通合作，以及细致的质量把控等等。那么如何成为一个全能型的互联网设计师呢？本文以日常工作流程为路径，为大家整理了一波实用小技巧和小工具。希望能够帮助大家在保持设计的专业度的同时，在工作的方方面面都能够得心应手。
有效的设计积累让我们事半功倍。养成随手记录的习惯，逐渐形成自己的素材库，不仅能够让我们在需要的时候能够快速检索灵感，偶尔回顾也总能有新的感受。
字体识别神器：WhatFont
当你想知道一个设计精美的网站设计使用了什么字体时，可以安装一款叫做 WhatFont 的浏览器插件，开启时鼠标 hover 到文字上即可快速识别出字体、字号、字重、行高和颜色。对于不习惯使用控制台的朋友来说非常简单实用。
插件最新的版本停留在 2017 年，不过在大部分网页上都是可以正常使用的。同类产品还有 Fonts Ninja 等，除了识别字体还可以收藏和管理字体，可根据你的需要进行选择。
用户体验设计档案: UXArchive
该网站收集了来自世界一流的科技公司的产品用户体验流程。例如，你正在设计“忘记密码”体验，需要参考时通常都是打开不同的 App 一个一个体验和截图。而通过这个网站，你可以根据场景快速浏览其他公司的示例，对比不同的解决方案。
地址：https://uxarchive.com/
素材管理: Eagle
Eagle 应该是很多设计师耳熟能详的素材管理产品了，它支持图片和视频等基础格式，有丰富的标签系统和智能分类功能。此外还支持可视的字体管理，也能够预览 PSD 格式（常用的图形和文稿格式基本都支持），可用于放一些 mockup 素材。自动解析图片色板，从而允许按颜色搜索也是相当实用。
地址：https://cn.eagle.cool/
灵感速记: Flomo
Flomo 是一款非常轻量的笔记工具，用类似发微博的方式快速记录一些知识片段。相比 Eagle 用于“剪藏”已有的内容，Flomo 更注重主动创造和记录。产品的功能目前非常简单，但背后的「卡片笔记法」理念很有意思，提倡先快速积累卡片，然后通过标签和关联让结构涌现，积累知识的复利。感兴趣的朋友可以了解他们对于“知识管理”的思考。
地址：https://help.flomoapp.com/weekly/orgin
当我们进入到产品设计工作中时，了解用户往往是最重要的前提和基石。大公司的团队往往有专职的用户调研团队来协助产品设计，但对小型一点都团队可能用户调研这个流程是全部归到设计师角色里的。而且即使有专门的用研报告，直接观察用户的行为和描述往往是最直观的，也更容易洞察到问题和机会。这里介绍两种我们常用的低成本的方法。
用户反馈什么: 七麦
如果你的产品是一个成熟的上架了各大应用商店的 App，可以通过一些第三方平台看到各应用商店的评分评论汇总，构成和趋势，也可以将自己的 App 和竞品放到一起对比。例如我日常使用的“七麦”，可以通过微信订阅每日评分变化，也可以导出指定时间段的评论的汇总表格，做更深入的检索和分析。
用户谈论什么: 微博
商店评分和用户反馈通常的内容通常比较有针对性，大部分都是围绕已有的功能。如果想要看到用户在生活中如何使用我们的产品，使用过程中有什么样的情绪和感受，看他们如何理解在用的这个东西，则可以去社交平台上搜索产品的关键词，常常会有些很有趣的发现。据说早期微信的剪刀石头布的想法就来源于一个微博用户的分享。
来到我们最熟悉的设计实操阶段。设计类工具非常多，Sketch 和 Figma 也都有相对丰富的插件市场，这里选择了几个我们日常使用的小工具来进行分享。聪明地使用已有资源，可以帮助我们呈现最好的设计概念。
Mesh Gradient 网格渐变工具
一款 Figma 插件，Illustrator 里强大的 Mesh 功能在 Figma 里也能用了。做好的渐变还可以保存下来多次复用。
Runner Pro
如果你主力使用 Sketch，习惯键盘操作，熟悉各种指令名称，而且有完整的组件库，那么 Runner Pro 将会是一个很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系统聚焦搜索，通过一个搜索框即可快速完成组件插入，指令运行，插件安装，以及快速前往某个画板。
Runner 的组件搜索支持中文，但对于多个关键词的模糊搜索还是对英文支持比较完整。
Blush 插画插件
一个由 Pablo Stanley 设计的免费可商用的手绘风格的插图库。任务造型有数十种选项可供选择，可以自定义角色的头发、裤子、肤色等等，无需打开 Illustrator 即可创建独一无二的插图。适合用来做运营插画，拼用户故事版，PPT配图等。
地址：https://blush.design/zh-CN
另外也有越来越多的设计师开始用 Figma 的原型功能直接做 PPT 了，顺应这个趋势他们还提供同系列的 ppt 模板，一键套娃。
POSE 人体姿势参考
在自己画人物插画的时候，如果对人体动作和比例难以把握，那一定不能错过这个插件—POSE。它是我发现的用于创建解剖学和身体插图的最佳工具。Gal Shir 在 Behance 和 Dribbble 上都有众多的粉丝，这是他在 Snapchat 做插画师时创作的软件。
地址：https://galshir.com/pose/
动画曲线预览
细腻的动画能够让体验更有温度，这个网站提供了五种简单的网页版式和最基础的三组动画曲线，你可以选择最适合你的 demo，体验不同动画曲线在实际页面上的感受。底部还可以调整具体参数来达到想要的效果。
地址：
需求过程中我们需要反复和上下游沟通，在这个阶段里设计稿是解决方案的可视化呈现，是中间产物，首先要满足方便沟通和传递的诉求。方案定稿后，交付的则是产品的设计蓝图，首要确保方案的完整性，要能够拆解和执行。
Design Project Template
这是由 Dropbox 团队整理的设计项目模板，可以从 Figma Community 中复制一份使用。每份设计稿都包含基础的项目信息，责任人，进度等概览信息，尤其对于直接和开发、产品经理共享 Figma 稿件的团队而言很好地保留了相关的上下文信息，提升项目沟通效率。
设计协作工具 XSHOW
XSHOW是一款由 ISUX 研发的高效设计协作平台，通过其官方 Sketch 插件，你可一键将设计稿上传到云端，XSHOW 会保留完整的版本记录和成员操作。上传到云端后分享给开发人员即可在线查看标注，多端预览。除此之外 XSHOW 的团队管理还可以控制权限时效，这一点在敏感项目对外合作的场景下可以说非常实用了。
地址:
https://xshow.tencent.com
还原自检 Window Resizer + Zeplin
Window Resizer 是一款 Chrome 插件，正如其名就是可以把浏览器窗口固定到指定尺寸，可用于检查网页的自适应策略，或截特定尺寸的图。
我们常常配合标注工具 Zeplin 的叠图功能使用。将浏览器设置为和设计稿相同的尺寸，再将半透明设计稿叠上去即可一眼看出网页是否还原到位，还有哪些地方需要调整。一图胜千言，再也不怕开发哥哥说“看不出来”了，显著提升了沟通效率和团队和谐气氛。
使用示例: 上层为设计稿，下层为对应浏览器尺寸的实现效果。
图片压缩工具
如果仍采用非在线的较为传统的交付方式，通常需要导出为图片发给对方。有时输出网页设计或者完整流程交互稿的尺寸较大，可以多做一步压缩工作。一来同步方案的时候合作方更容易打开，另外需要导出多个版本时占用我们自己电脑空间也比较少。
如果图片在 5M 以内或者需要批量处理，可以用 ImageOptim 或者 Tinypng 应用来进行无损压缩，通常可以减少 60-90% 左右。但如果图片尺寸超过 5M ，使用以上两个应用耗时较长而且容易失败，此时可以试试在线压缩网站 https://compresspng.com/，即使是超过 20M 的大图也可以稳定压缩。
Rotato 动态 Mockup
Rotato 提供了很多常见的动态 Mockup 效果，只要将你的设计稿放进去（图片或视频皆可），即可快速实现高端大气的展示效果，支持非常完备的苹果设备以及部分主流安卓设备，效果包括界面的反转，拉近，滚动展示等。
地址：
https://www.rotato.app/mockups
设计上线后效果如何？有效的验证能够帮助我们有目的持续迭代精进。
AB 测试用户样本计算小工具
AB 测试，也称为分桶测试或分批测试。AB测试本质上就是把平台的流量分为为几个不同的组进行实验，然后观察不同组的用户数据指标，例如：点击率、次日留存、人均观看时长等等核心指标，最终选择一个更有效的实验组上线。
在开始设计实验之前，需要明确实验的目标。基于假设方案中的元素个数，AB 测试可以分为单一变量测试和多变量测试。这里以单一变量为例来进行简单的说明，如何进行流量分桶。我们推荐这个免费的小工具，来进行流量分配：https://www.evanmiller.org/ab-testing/sample-size.html，根据实验的预期结果，大盘用户量，来确定实验所需最小流量。
以腾讯文档里面某一个按钮的点击率为例，目前大盘点击率为5%，预期实验能够提升0.5pp。
这个工具还可以进行很多其他维度的流量配置，感兴趣的同学可以进行深入的研究。我们希望大家在设计的同时，能够大胆创新的提出假设，然后进行科学的验证，从而得到一个更有效的设计。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Meet more beautiful colors.
在《腾讯文档-构建科学有效的色彩系统》这篇文章中，我们阐述了腾讯文档如何升级了新的品牌色，为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和品牌认知，以及如何构建一个科学有效的调色板。
在设计系统的实际运行中，我们也需要着眼于如何应用调色板，建设协同工作流，并给各个角色提供有关色彩的扩展指导，以达到在腾讯文档中构建一致且有品牌感的数字界面并有效提升效率的目的。
在建设腾讯文档色彩系统的工作中，我们首先构建了一个包含品牌色、灰色、辅助色的调色板，但仅有这个调色板不足以支撑我们流畅、无障碍的协同工作。日常工作中，“这里我用哪个蓝色？”“这里我用哪个灰色？”“开发同学能否快速的变更某些元素的颜色？”等等问题层出不穷，建设系统的协同工作流迫在眉睫。
HIG强调不要在APP中使用“硬代码”，即十六进制色值进行编码，但前期我们构建的调色板仅有色值，这种硬代码应用到app中导致项目效率低下，维护也会成本激增。
于是在腾讯文档中，我们开始采用颜色变量（color token）和主题（theme）来管理颜色，颜色变量（color token）基于任务（role）、主题（theme），为UI中的任务指定十六进制代码的色值（hex value），以弭平设计师之间、开发与设计师之间的沟壑，将颜色变量（color token）嵌入设计组件中与开发代码形成联动，便于开发利用程序中的变量来做全局修改，横向提升团队的协作效率。
所谓颜色变量，通俗的意思就是可以将一个颜色按任务用途去抽象，抽象成一个有命名的颜色样式，这个颜色样式就是颜色变量。
在设计或者代码中，可以通过修改这个颜色变量的值来进行全局颜色的更新。例如，我们现在需要给button一个颜色，不要将其写为 #1E6FFF这样的色值，而是将button的颜色指定为命名是Fill-01的颜色变量， 如果有重大版本更新，仅需将颜色变量Fill-01的色值更新，即可实现全局颜色的高效更新。如果在不同的主题下（例如浅色/深色模式）button有不同的颜色表现，颜色变量Fill-01可以在不同主题下，映射不同的十六进制色值。这就是我们建设协同工作流的的基础逻辑。
调色板的各个色值（hex value）是最底层的基础样式，我们将色板上的颜色进行规则化命名，以方便后期将其引用到颜色变量中。
腾讯文档包含核心蓝色、蓝灰色、中性灰色及其他辅助色，按照颜色属性，将其命名为：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色阶后缀。
*腾讯文档调色板命名图表
1、 从调色板中选择合适的颜色并测试
从调色板中根据UI中的任务挑选合适的颜色并进行可用性测试，做具体任务中颜色选择的最优解。
例如，我们需要选择一个蓝色作为链接色，作为文本，对比度必须达到4.5:1以上才符合WCAG2.0的可用性标准。经过测试我们选择了primayblue-02作为链接色。
腾讯文档的界面中，灰色系列占主导地位，起着至关重要的作用，为产品界面创造结构、表达边界、建立信息层次。在调色板中，我们选择了两种灰色：中性灰色和蓝灰色，来支撑系统的设计。蓝色系列是腾讯文档产品和体验的主要动作颜色。
同时我们也使用了其他颜色以满足一些冲突性任务（警示等）的颜色使用，这些颜色需要谨慎、有目的地使用。
经常会有设计师问，“这里我能用这个灰色吗？”出现这种问题，根本上还是颜色使用规则定义的不够清晰，含混的口口相传的规则会导致更多的混乱。于是，需要我们根据任务和使用场景把颜色的使用规则清晰的定义。
首先定义在界面中占主导地位的灰色、蓝色的使用规则。
在腾讯文档中，蓝灰色与品牌蓝共同建立品牌印象，由此，蓝灰色主要应用于与风格相关的场景。包括：图标色、填充底色及大面积的背景色等。
中性灰色主要应用于一些全局系统行为。如：文本、分割线及交互反馈hover、press等场景。
品牌蓝色主要应用于系统中的各种行为，如蓝色图标、button、文本链接等。
其次定义在界面中用于警示、状态提醒的其他颜色的使用规则。
红色主要应用于系统中需要警示的场景，如红色警示图形、错误文本、红色tag等。
在腾讯文档中，会针对不同的任务应用不同的颜色，如左滑操作、成功提示、高亮显示等。
在腾讯文档中，不同的品类有不同的基准色。
定义了颜色在系统设计中的使用规则后，我们需要根据颜色变量的使用用途对其进行语义化命名。一套好的语义化命名规则需要易于维护且具备可拓展性，如果只是将调色板的色值命名为 blue-01、blue-02... ，语义化的收益并不明显。哪天设计团队需要调整品牌风格，或是苹果又掀起什么新潮流，把所有命名为 blue_x 的变量改为 gradient_serenity， 对于开发来说也是巨大的灾难。
根据 HIG 的建议，语义化命名不应该描述外观或者色值，而是指明这个颜色的任务用途——标签 Labels，分割线 Sepatators 或者填充 Fill。
在思考如何赋予颜色语义化的命名时，设计师也需要用更概括和结构化的视角来看待界面设计，同时也需与开发同学达成一致，使用同样的命名，满足以更好地维护一套收敛和统一的设计语言。
在腾讯文档中，颜色的任务用途定义为为以下几种：背景色 Background、文本色Text、图标色Icon、分割线 Border、透明填充 Transparent fill 、实色填充 Opaque fill 、默认交互反馈 Feedback、语义 Intent。统一使用ultrastrong、strong、medium、weak、ultraweak作为后缀来表达颜色强度。在需要更明确的用途说明的任务中，直接描述其用途，例如：hover，pressed、disabled等。
以上种种，最终目的在于建设团队的协同工作流，将颜色变量（color token）嵌入设计组件中与开发代码形成联动，便于设计利用变量及组件、开发利用程序中的变量来做全局修改，横向提升团队的协作效率。
在设计系统中，颜色变量属于底层的设计原子，需要将其生成为颜色变量并嵌入到设计组件中，便于设计内部使用。我们将已根据任务用途命名的色值，生成figma中的颜色样式（color style），后续无论是进行组件的设计，还是项目的设计，都可以直接赋予设计元素明确的颜色样式。
我们生成了一个面向内部、外部的颜色变量表，进行颜色变量的说明和信息的同步，沉淀落到实处的资料文档。（此处推荐使用腾讯文档，多人协作实时沟通～）
最终形成了设计组件库与开发组件库的联动，构建了一个协同工作流，横向提升工作效率。
上篇的调色板设计后，一直在酝酿这篇调色板的实际应用。在设计一个较为复杂、庞大的产品时，提效是永恒的课题。痛过、踩过坑的设计师应该深有感触，沟通的无力、推动的困难都推动着我们发动自己的能量去想办法提效。
设计师们可以在自己的项目中与开发同学多多沟通，尝试这种方法，去建设更高效的色彩设计系统。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
交互文档，是一份用来解释项目交互方式、内容、规则的说明文档，也叫 DRD ( Design Requirement Document )。
在过去的分享中，我们有解释过，B 端项目会包含大量的交互内容，需要前期绘制交互原型来展示和确认交互方案。
如果是比较简单的小型项目，或成熟产品的小迭代，那么这样的连线图确实就足以表达交互的意图和方案了，写太多注释文字反而会画蛇添足提高观看者的认知成本。
但是，如果项目和展示的流程内容，逻辑非常复杂，包含非常多的选项和状态，那么单靠原型和连线是绝对不够的，添加更多的图文说明就变得非常有必要了。
同时在团队协作场景中，就需要将这些内容制作成一份规范的 “文档”，用来进行统一的展示、备份、归档。
所以做交互光靠画交互原型是不够的，“文档” 就成为必要的输出成果。
在产品侧（非开发），文档就有好几类：
- 商业需求文档:BRD,Business Requirement Document
- 市场需求文档:MRD,Market Requirement Document
- 产品需求文档:PRD,Product Requirement Document
- 交互说明文档:DRD,Design Requirement Document
- 设计规范文档:DGD,Design Guidline Document
BRD 和 MRD 是一个产品经理行业内部也在反复科普讨论的东西，和我们没多大关系可以暂时忽略。设计规范文档 DGD 大家应该也有概念，比较容易辨识，也不需要在这里强调。
而产品需求文档 PRD，是和交互文档最撞脸的文档类型。它们的文档规格、样式几乎一致，还包含大量界限模糊、相互交叉的内容范畴，会对新手的理解造成很大的不便。
要理解产品文档和交互文档的核心差异，就得从他们各自的工作职能说起，产品经理的主要产出是解释产品要做的功能和逻辑，所有的原型和连线的目标都是为了解释功能本身。
部分产品经理会 “顺带” 在这个基础上增加交互的元素，以及相关的说明。这恰恰是问题的关键所在，因为产品经理制作产品原型的过程是可以覆盖一部分交互信息的，所以很多设计师也天真的认为交互内容是应该由产品来出的。
这当中一定要关注里面的 “顺带”，因为一份有效的 PRD 主旨一定不是以交互为核心的，在面对需要大量图例、连线、方案、解释的交互问题下面，产品经理往往选择直接跳过，只把功能描述清楚，剩下的就交给交互设计师还是 UI 设计师来完成具体的交互方案。
所以，交互文档就是在产品文档的基础上，进行交互内容的补充，专注于解释项目的交互内容，让设计师和前端开发可以更直观得理解后续的工作内容。
来自 UEDART 的付费文档，案例地址：http://vip.uedart.com/interactive.html
交互文档和产品文档是相互独立和补充的，当产品文档无法完成对产品交互的有效解释时，我们就应该选择输出独立的交互文档，来提升项目协作的效率。
主流的交互文档输出有三种方式：
1. Axure/墨刀 导出
2. 一般文档制作
3. 线上 Wiki 记录
Axure 和墨刀是用来制作产品原型的软件工具，也是目前在产品经理、交互设计行业中应用最广泛的原型工具。
它的主要优势，在于可以比较方便的制作可交互的组件、连线、导出。
当然，光制作原型图并不能叫交互文档，它们还提供了比较全面的内容标注、文本记录、图形绘制的功能。
这就可以让我们完成原型绘制以后，结合页面结构的管理，添加交互文档所需的其它信息，并最终输出文件。
而在一些比较传统的行业或外包领域，使用的记录文档往往要使用 Word 或 PPT（方便开会演示或要打印）。这就要在原型完成以后，导出原型图例，并使用这些文档软件进行文字的记录和连线。
受限于 Word、PPT 的布局限制（强行分页），使用它们做交互文档是非常难受的，并且这些文档需要保存到本地，存在各种文档版本管理的问题。
所以还有另一部分也希望使用普通文档格式记录，并满足云端同步、备份、版本管理的团队，就会使用 Wiki 类的工具来制作交互文档。如语雀、飞书、Confluence、Notion 等工具。
如果只是一些比较小的项目迭代、一次性使用的交互文档，使用前两种方法都可以胜任。而真正大型、系统性的交互文档，往往都使用团队内部的 Wiki 进行创建和管理。和设计稿不同，这些使用了内部账号或需要内网访问的文档资料，是不会没事发到网上来分享的，这也是在网上找不到完整交互文档的主要原因。
和你们网上可以找到的大多数交互设计干货不同，我即不推荐你们使用 Axure/墨刀 来画原型，也不推荐用它们或普通文档、Wiki 的形式来输出交互文档。因为：
—— 太低效了！
产品经理和交互设计师的主要产出物就是文档，自然可以耗费比较多的精力和时间去制作原型和编写内容。而 UI 设计师的主要工作肯定是最终的视觉界面和交付，所以用最复杂的方法去制作交互文档，显然是不合理的。
同时还要提一句，Axure/墨刀 等软件用来制作一般的线框图原型，效率实在是太低了。且绝大多数情况下的页面跳转、交互都是可以忽略不做的。而且随页面增加，它的左侧导航层级、数量会非常庞大，导致查找和浏览的效率进一步降低。
在我自己的所有课程和分享中，我始终都建议直接使用你们正在用的云端 UI 设计软件直接绘制产品、交互原型并输出文档，如即时设计或 Figma。
原因包含：
- 速度快：能用 Axure 五分之一的时间完成所有原型绘制
- 可复用：做好的原型方便复用，而且可以直接在原型上完成后续设计
- 交互性：对于表达交互流程所需的基础跳转和动效都能满足
- 更自由：一些需要复杂图文结合的说明方式不再受到普通文档布局限制
比如下面这样的原型案例，就可以通过一个简单的链接快速分享出去，或者添加团队成员自由查看。
在我过去长期的实践体会中，这种方式是优势最明显，效率最高，最易懂，也符合 UI 设计师工作需要的。如果项目中有其它因素要求，你们也可以选择前面的方式输出。
任何文档的目标都是为了书面记录和让看的人更容易理解我们要表达的信息，不要被固定的方法局限住，要努力去探索适合团队当前场景的方式。
前面把基本的信息聊完了，这里就来具体讲讲交互文档应该如何进行输出。
当然，输出交互文档前需要先理解交互是什么，交互设计的具体设计内容和步骤。交互文档是对你已经设计出来的方案的书面记录，你不能在对交互一无所知的情况下强行编写文档。
交互文档制作首先要确认文档的记录内容和文档结构。
记录内容指的是你在该文档准备放哪些交互内容进去，并不是每次项目设计都要把项目所有页面和流程交互都重做一遍。
比如一次中等规模的迭代，新增几个通用的列表页面，调整了一些细节字段，增加了一个功能流程。那么文档重点记录内容肯定就是流程而不是所有页面。毕竟通用的列表页和细节更改，在产品需求评审阶段就可以完整的解释，而功能流程则不行。
如果是全新的项目，包含数十上百个页面。把所有流程、页面的交互内容全部表现出来的工作量是顶不住的，在绘制原型的过程中，你就会发现有大量的重复页面、流程和交互。所以制作文档就要有目的性的对重复的内容进行合并，以及只保留重要的页面和流程。
具体该放什么要考虑项目的实际情况，需要设计师自己评估。除此以外，标准的交互文档里面会包含背景介绍、编辑日志、文字图例、业务流程、名词解释、页面结构等等。
这些 “文绉绉” 的细节，并不是必备的，你可以根据当前场景自己决定需要加哪些。比如项目、业务背景前面的产品需求已经讲清楚了，业务流程、名词解释团队成员也都了如指掌的时候，那么这些页面模块就完全没有放的必要。
并且，基于前面对放置内容的考虑，结构的顺序并不一定要类似下方案例，完全按照产品的导航目录来走。
所以，根据一个中等规模的迭代项目，我会制定一个这样的一级文档结构。
- 基本信息：项目的简单信息，快速目录，参与人信息等
- 基本组件：涉及的相关组件展示和交互规则说明
- 原型一览：本次迭代涉及的所有页面原型和连线一览
- 流程介绍1：流程1的所有页面、状态、说明展示
- 流程介绍2：流程2的所有页面、状态、说明展示
- 流程介绍3：流程3的所有页面、状态、说明展示
每个1级文档结构对应 UI 软件中的 Page 目录，力求所需的 Page 数量越少越好，而不是像 Axure 的做法一样密密麻麻的。
结构可以根据复杂程度做进一步的细分，它像写文章的大纲一样，帮助我们提前规划好后续完成文档所需的内容和工作量。
有了结构，就要在对应的 Page 中填充内容了。其中一般的文字介绍、流程图、思维导图，只要正常输入或将导出的图例黏贴进来就可以。
而针对具体的交互内容，流程解释上，则重点处理连线和标注说明。比如下面是我自己在课程演示中的一个简单的交互流程演示案例。
在 UI 软件中，制作连线其实是很简单的事情，只要画出一个直线，再设置箭头和尾部图形、描边色彩和粗细即可。
然后，将该线段的图层放置在画布之外，起点放置在触发交互的区域之中，终点尖头则紧贴目标画布的边缘（不用特意延伸进画布内）。如果使用水平、垂直的方式连接两个画布，那就可以双击进去添加锚点制作 90 度的折角。
连线的应用是非常简单的操作，不要舍近求远通过插件或是其它的一些功能来实现。而除此之外，我在文档中添加的解释性文本主要有两种，交互事件和交互规则。
交互事件代表了连线的两个页面是如何被触发跳转的，所以我会在线段中帖一个文字卡片，解释触发的条件和交互操作是什么。
然后，就是页面或流程中的交互细则，包含两个部分，数字标签和对应文字注释。它们都是用 Auto layout 可以快速制作出来的组件，每次要做备注的时候，只要复制标签到页面上，设置对应的数值，再将右侧的文字卡片复制到页面旁边，再加上对应的数字、内容信息即可。
在设计软件中，画布的自由度极高，你想要怎么备注和添加内容都没关系，只要在内容翔实的基础上保证 —— 团队成员能看懂，就是一份优秀的交互文档。多在绘制过程中和同事沟通，优化展示的做法，可以避免很多会出现的问题，进一步加速我们的制作效率。
将文档全部做完以后，最终就是关于交付和协作的问题了。
既然我们使用线上的 UI 软件来完成交互文档的制作，那么文件设置公开访问权限，再分享链接自然是最简单的办法。
但每次项目分享个网页链接，或者并行有好几个项目，需要其它成员自己去收藏网址，也是挺麻烦的。所以尽量充分应用软件中的团队协作功能，通过创建一个团队，添加成员，让他们自行查看当前文件目录中的交互文档。
查看过程中，团队其它成员可以通过评论的功能对交互内容进行纠错、提问、建议，方便我们进行优化改进。
通过这种简单高效的文档协作模式，我们可以非常快得完成整体交互内容的定稿，并开始后续的工作。
再回到前面的话题，我们是 UI 设计师，不是全职交互设计。原型文档输出完了，下一步可是要做视觉界面的，所以交互文档就可以不用管了嘛？
交互文档的最佳状态是 —— 应用最终界面图例解释交互内容。
也就是当我们把所有页面内容设计完成后，强烈建议将界面的展示和交互文档进行整合。除了前端和产品可以看到最终的交互落地效果外（有时候最终设计和前面的交互不一致），还可以直接通过这个文档查看界面数值标注，而不用往返于交互和设计文档来回切换，这才能让文档作用最大化。
以上就是关于交互文档的相关解释。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网上对介绍导航文章已经有很多，有部分已过时，今天自己再重新整理一遍，方便自己也方便更多人理解。
如2、社区产品引导用户发帖子
如3、凸显核心功能，如百度地图、高德等
优点：
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：UX设计笔记 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com