编辑导读：想要做好一个设计师，就要多研究优秀人士的作品，取长补短。现在互联网的发达，很容易就能在网上找到相关的学习资料。本文以史蒂夫·克鲁格的名著作为引入，分享20句关于界面可用性设计的名言，希望对你有帮助。
设计，以及许多其他领域，都是建立在优秀专业人士的作品和发现之上的，每个想要成为某个领域专家的人经常寻求指导来学习如何把事情做好。专业导师的各种书籍和文章现在都可以在互联网上免费阅读，让努力学习知识的人很方便的找到。
我们经常会分享来自数字设计领域最优秀专家的名言和睿智的想法。你会在迈克·蒙泰罗（Mike Monteiro）所著《设计是一项工作（Design Is a Job）》里找到有关设计的短暂洞察，奥伦·沃特尔（Aarron Walter）的《为情感而设计》（Design for Emotion）以及排版大师埃里克·斯皮克尔曼（Erik Spiekermann）的一系列智慧思想也是如此。
下面我们要分享的是史蒂夫·克鲁格（Steve Krug）的名著《不要让我思考（Don’t Make Me Think）》中的一组引言。
2000 年初版，14 年后再版，《Don’t Make Me Think》在今天仍然切合时代发展，符合实际需要。史蒂夫·克鲁格为界面可用性设定了一些基本原则，并与该领域的专业人士分享，这使得本书成为 UX 设计师推荐的最重要的资源之一。
可用性第一定律——“不要让我思考”描述了关于网站可用性的要点、案例和见解。创造不需要用户过多思考的界面设计，不仅可以解决问题，而且易于使用。这里有 20 句名言，反映了“不要让我思考”的一些关键点。
1、如果某件事需要大量的时间投入——或者看起来会这样——它就不太可能被使用。
2、让每一页或每一个屏幕都不言自明，就像商店里都有良好的照明：它会让所有的商品看起来更好。访问一个不需要我们思考的网站会让人感觉毫不费劲，相反，为不相关的事情多花心思会浪费我们的精力、热情、还有时间。
3、无用的客套话（“happy talk”）都是一种沾沾自喜的宣传，你可以在蹩脚的小册子里找到。与好的宣传文案不同的是，它没有传达任何有用的信息，它一个劲的说我们有多棒，而不是描述是什么让我们这样棒的。指示说明必须被消灭。
4、可访问性（Accessibility）非常重要，它不仅仅是正确的做法，而且是非常正确的做法。关于无障碍访问，如果没有引起足够的重视，你就无法意识到，它能显著的改善一些人的生活。仅仅通过把工作做得更好就能显著改善人们的生活，这难道还不够厉害吗？
5、另一个让人困惑的来源是那些看起来不太明显的链接或者按钮。作为一个用户，我永远不应该花哪怕一毫秒的时间来考虑这些东西是否可以点击。
6、最近几年里，让产品更加易用成为几乎所有人的责任。现在，视觉设计人员和开发人员常常要做交互设计（决定用户单击、按下或滑动时下一步会发生什么）和信息体系结构（确定应该如何组织所有内容）之类的事情。
7、可用性（Usability）就是确保让一个能力和经验一般（甚至低于平均水平）的人，能够想出如何使用并完成任务，而不必费事。相信我：事情就是这么简单。
8、可用性是有关人们如何理解和使用事物，而与技术无关。
9、关于指示说明，你只需要知道一点就够了：除非“蒙混过关”多次尝试失败，没有人会去读它们。
10、你越仔细观察用户，并倾听他们明确表达他们的意图、动机和思考过程，你就越会意识到，他们对网页的个人反应是基于许多变量的。试图用一维的“喜欢”或”不喜欢”来描述用户是徒劳的，而且会适得其反。另一方面，好的设计会考虑到这种复杂性。
11、那些设计网站的人并不在乎让事情变的明显和容易，这会削弱我们对网站及其背后公司组织的信心。
12、然而在现实中，大多数时候我们不会选择最佳选项，而是选择了遇到的第一个合理的选项，即所谓的“满意”（satisficing）策略。
13、大部分的网页设计问题（至少是对重要的那些问题来说）都没有一个简单的“正确”答案。有效的答案是那些运作良好的、满足需求的综合设计，它们往往经过了仔细思考，良好的执行和测试。
14、删掉每页上一半的文字，然后把剩下的再删掉一半。
15、设计师喜欢微妙的线索，因为微妙是复杂设计的特征之一。但网络用户通常都很匆忙，经常会错过这些线索。
16、如果你在设计了很多不同的网站之后只发现一件事，那应该是：几乎所有的设计理念——无论一开始多么糟糕——都可以通过足够的努力，在合适的环境下变得可用。
17、你的主要职责应该是分享你所知道的，而不是告诉人们应该怎么做。
18、你的目标应该是完全删除说明文字，让每项内容不言自明，或者尽可能做到这一点。当说明文字绝对必要时，把它们减少到最少。
19、和遵循惯例去设计相比，设计师们面临很大的诱惑去重新发明轮子。很大程度上是因为他们觉得自己被雇来是要做一些新的、不同的事情，而不是做原有的旧事情。更不用说，来自同事的赞扬、奖励和高级职位很少是基于“最好地利用惯例”这样的标准。虽然少数时候，在重新发明轮子上花的时间足以制造出新的革命性滚动设备，但通常情况下，这只是浪费时间而已。
20、如果你想要一个很棒的网站，一定要测试。因为你在这个网站上工作了好几周，已经失去了新鲜感。你了解的太多了。要想知道它是否真的有效，唯一的方法就是测试它。
文章来源：人人都是产品经理 作者：Alina Arhipova
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计分析是作为交互设计师必备的一项基础能力，一套有效的分析思路可以帮助我们找准设计发力点，更效率的推导出合理的设计方案，它是一种思维能力，也是一种方法工具，但是在我们的实际项目中，常常会遇到这样几种场景：
新手设计师或者第一次做活动的设计师，设计分析不知道要如何入手
花了很多时间做分析，但感觉对实际画稿子并没有什么帮助
分析过程中发散了很多很好的点，但最后大多都落不了地
这些情况常常会导致设计分析流于形式，套用了很多方法、花了很多时间、输出了很长的文档，内容看上去似乎很丰富，但落地的方案却平平无奇，甚至也会自我怀疑设计分析真的有用吗？
总结下来，会出现这些场景的原因有两点：首先是设计分析太泛，没有聚焦到核心问题；其次是时间分配不合理，没有抓到发力重点。那么结合我们目前的项目来看，怎样做一个更有用的设计分析呢？
根据活动产品化设计思路，可以把我们的日常项目分为两类：迭代型项目以及探索型项目。
迭代型项目是指过往已有过积累的成熟项目，例如大促主会场、我的专属会场、榜单会场、攻略等等，通常是一些已经比较固化的经典业务，或基础的功能类业务；探索型项目则是一些全新的业务方向，例如下沉会场、直播会场等等，刚处于进入期或成长初期。
迭代型项目容易陷入的一个误区是时间分配不合理，没有抓到发力重点，尤其是对于很多新手设计师来说，往往大部分的精力花在重复之前已经做过的内容，比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等，但是对于已经比较稳定的迭代型项目来说，这部分背景内容相对来说已经比较固化（除非有明显的变化），这就可能会导致重复分析出来的结论跟之前的差别并不大，也很难带来实际业务提升。
既然迭代型项目过往已有过经验和策略的沉淀，也经历过多轮的数据迭代，核心思路应该是先定义要解决什么问题、然后才是如何解决，这样才能找准关键发力点。
要解决什么问题
首先要思考是不是真的有问题，没有问题的项目也可以不用再花时间做分析，效率做即可，例如像全部会场，本身的业务模式就比较简单，过往的效果也相对比较稳定，如果不考虑进行突破性的创新，通常是可以效率复用的，这种时候则不需要再去做分析，毕竟也要考虑投入产出比。
那么怎么定义要解决什么问题呢？有三个常用的思路：看数据、看用户反馈、看运营策略。
第一，从数据分析中找到关键问题，例如根据618的项目数据复盘，我们发现预售会场、品牌会场的页面跳失率较高，那么双11核心可以围绕“如何降低跌失率？”“如何提升流量利益效率？”去进行分析，从而推导出更有针对性的设计策略。
第二，根据用户反馈来找到关建问题，例如过往的主会场，用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容，那么可以围绕“如何更好的进行需求匹配？”“如何提升屏效？”来思考和分析，解决实际存在的问题，才更有可能提升体验和数据。
第三，结合运营策略，很多业务虽然已经相对稳定，但随着每次大促战略的变化，运营策略上也会有一些新的需求，那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场，在原会场定位不变的情况下，在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求，那么服务内容如何匹配“专属”会场的用户心智，则是这个会场可以重点解决的问题。
如何判断真正有效的解决方案
在定义清楚核心要解决的问题后，就可以按照常用的设计方法进行方案的推导，在发散解决方案的过程中，如何判断方案的合理有效，确保最后的可落地性，是让我们设计分析有价值的关键，因此总结了两个常用的技巧。
首先要理解业务逻辑，减少无用的策略发散，很多时候我们的方案很难推动落地的原因，是没有考虑到业务的诉求，越能够深入的了解业务，才能更好的解决业务侧的顾虑，保证方案的可落地性。
其次是要跳出来从整体来看优先级，我们在进入自己的思维逻辑中时，会比较容易陷入细节，有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视，并不是因为我们的方案不够好，而是没有关注到整体优先级，因此要学会看全局，通过多沟通多评估的方式来让自己的判断更加准确。
探索型的项目没有过往的参考依据，相当于需要从零开始去探索如何做，对于设计分析的能力要求会更高，那么常常容易陷入两种极端相反的误区，要不就是容易被方法论套路，设计分析过泛但得不出实际有价值的结论，要不就是完全没有头绪，属于想一步做一步的类型，分析的内容之间缺乏逻辑。
因此，探索型项目的核心思路是要先有分析框架、再做纵向深挖，就像画交互稿的过程一样，需要先定义交互框架，纵再进行交互细节的打磨，才能够保证设计效率及效果。
确定分析框架
确定分析框架的过程主要分为两步，一是先想清楚要分析哪些内容，包括哪些环节是必要的，哪些是重点的，时间要怎么分配。例如当我们第一次做宠物品类活动时，需要对这个品类有深入的理解，因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容，而如果我们做的是一次大促的综合会场，其主要用户群体如果跟常规站内主流群体并无差异时，则不需要再花费大量的时间单独去分析用户画像，因此，需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。
第二步是梳理清楚内容之间的逻辑关系，常见的逻辑结构有两种，一是递进式的推导（A→B→C），分析维度之间是先后关联的，通过严谨的逻辑步步推导而来，例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案；另一种逻辑结构是进行综合归纳（A+B→C），即通过几个不同的维度综合推导，例如经典的五导家分析方法，结合用户目标以及业务目标综合推导出设计目标。
在很多设计分析中，我们也会参考一些方法论，其实方法论提供的就是分析框架，在理解了这一步之后，相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。
纵向深挖如何得到有价值的策略
有了分析框架后，接下来就可以进入每个模块的具体分析了，如果要得到有价值的策略，同样有两个小技巧。
首先，策略要足够具体、有差异化，尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营，这个大的方向没有错，但如果只到这一步是很难指导具体内容落地的，所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们，才能够更准确的判断是否会存什么问题。
其次，策略最好能够关联验证指标，可以参考UGD数据增长思路，在推导策略时要能预判它能带来哪些数据指标的提升，以保证设计分析的结论是有理有据的。
文章来源：站酷 作者：大葱设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
「增长（Growth）」概念的火热源自几年前畅销书《增长黑客》，目前已经成为互联网公司的重要课题之一。
增长设计，顾名思义，即通过设计来促进增长。对于 C 类产品的增长，方法和渠道较为多样，设计师能够发挥的空间和价值也比较大，我们看到的增长设计案例通常也都是以 2C 产品的为主。而 B 类产品的增长设计则受限较多。即便如此，如果 B 类产品的设计师能抓住机会、拓宽思路、不断尝试，也能够创造出独特的增长价值。
本文以增长漏斗 RARRA 模型为线索，按 Retention（留存）、Activation（激活）、Referral（传播）、Revenue（变现）、Acquisition（获客）的顺序，分享 B 类产品增长设计的通用模式和行业案例。考虑到数据安全原因，部分具体数据暂不展示。
1. 迭代：分析-优化-测试
通过小成本、小范围测试，找到撬动的增长点快速迭代、持续优化，将效果提升到最高。整个测试流程：发现问题一数据分析一产生假设一展开测试一衡量结果，然后不断循环。随着产品的发展，必然会有新功能的加入和旧页面的调整，为了防止贸然上线新版本而带来不良影响，小范围测试就是一个很好的方式。
行业案例：软件开发与办公协作领域的头牌公司 Atlassian 的设计师曾经通过测试和优化迭代循环的方式来找出合适的设计方案。下图展示了他们测试新旧模态弹窗用户辨识度的数据，结果显示，新版的图文结合的方式反而容易让用户感到困惑。
经过测试结果分析，设计师们认为可能是弹窗底部大块的文字让用户难以快速抓住核心信息，因此他们对排版方式进行了改进，将底部的一部分文字移动到顶部，并进行了新一轮的测试，结果显示的版本效果最佳。
2. 特定的细分客户群
产品发展早期，很难迅速赢得广泛的关注。因此众多 B 类产品选择首先专注于一个组织中的一个部门，将产品传播给特定的人群，然后再逐步影响组织中的其他部门。具体可以采用以下步骤：
行业案例：成立于 2002 年的 Atlassian 在发展早期，首先在开发团队中扎根，然后以开发团队为切入点，逐步扩展到企业组织中的其他团队。因为开发团队喜欢使用 Jira（Atlassian 公司的项目协同管理工具）并且不想转换，所以带动了其他团队也开始使用 Atlassian 的系列产品。目前 Atlassian 在全球有超过 6w 家客户。Salesforce 在销售市场也做了同样的事情。该公司的产品一开始只是一个客户关系管理（CRM）工具，并锁定了销售团队为目标客户。但而以此为据点，现在他们正扩展到企业业务的几乎所有市场。
3. 优化产品性能
产品性能优化应该一开始就纳入考量范围，建立良好的框架结构。虽然因为近年来移动端设备和网络环境的大幅度提升，流量少、内存小、加载缓慢等因素对大部分用户已经不再是制约因素了，但是依旧要注意产品的交互性能。
行业案例：阿里巴巴研发效能业务的体验团队通过自主研发的数据工具，实时监控各产品的性能，并通过 6 个维度评分的方式给出好、中、差三个等级的奖牌增加业务方的体感，督促产品性能的优化。例如其中内部研发工具 Aone 的开发人员参考该数据，针对首页等核心页面的加载时长问题做了专项治理，取得了显著效果，也将奖牌等级提升了一级。
1. 让用户体验到惊喜时刻
惊喜时刻（Aha Moment）是指能够让用户眼前一亮的产品核心功能点。 如果你能让用户体验到产品的惊喜时刻，那么这个用户很有可能成为你产品的留存户。惊喜时刻的公式：
（谁）在（多长时间内）完成（多少次）（什么行为）
惊喜时刻能帮助我们了解哪些行为导致了用户的留存，帮助团队找到清晰的聚焦点。「Aha Moment」往往可以浓缩成某个「Magic Number（神奇数字）」。对于 Twitter 这个数字是 30，即关注了 30 个其他用户的人更有可能留存下来； Facebook 的是 10，如果一个新用户在一周内添加了 10 个及以上的好友，那么 ta 很可能在 Facebook 上长期保持活跃。
行业案例：对于号称「历史上增长最快的 SaaS 公司」 Slack 来说，这个惊喜时刻的「神奇数字」是 2000，即累计发送了 2000 条消息的客户更有可能继续使用并最终为服务付费，该公司是这样解释这个数字的：
如果一个团队在 Slack 上累计交流了 2000 条信息，这证明他们确实充分尝试使用了 Slack——真的试过了。对于一个50人左右的团队来说，这意味着大约10小时的信息量。对于一个10人的团队来说，这可能相当于一周的信息量。我们发现，不管其它因素如何，在收发了 2000 条信息后，93% 的客户至今仍在使用 Slack。
2. 消除摩擦
用户的欲望 – 摩擦 = 转化
摩擦是指阻碍人们完成他们想要完成的行动的障碍。摩擦无处不在，它可能是要你对一个刚开始用的 APP 进行打分的弹框、没有反馈的操作、填写不必要的信息、漫长的使用路径等等。
行业案例：以简单易用著称的项目管理工具 Basecamp 为新注册的用户提供了完整的项目样例，包括虚拟的人员、公告板、to-do list、时间规划表等等，一应俱全、简单易懂，还有可爱卡通形象来随时给与帮助，让用户放松心情、减少学习成本、顺滑地从新手过渡到熟练用户。
行业案例 1：蚂蚁集团区块链业务「蚂蚁链」包含的产品双链通，是帮助 B 类商家解决供应链金融问题的创新性平台。对应商家用户来说，该业务逻辑的理解门槛较高；入驻程序也较为复杂，特别是电子版身份证的验证，提交之后需要经过一段时间的等待，且通过率较低，客户也经常不知道为什么没有通过。这些原因导致用户一次激活率较低，往往需要尝试多次。
针对这些问题，设计师专门走访了上海、成都等地的多家客户进行现场观察，然后对入驻流程和相关页面进行了优化。优化后，用户激活一次性整体成功率显著提高；用户产品认知方面，选择「非常清楚」的用户比例翻倍，「不太清楚」和「不清楚」也明显降低。
行业案例 2：阿里妈妈是隶属于阿里巴巴集团的大数据营销平台。其营销推广产品直通车是全国营销收入领先的业内知名产品，但专业门槛非常高、推广价格也高，专职的用户需要 2~3 个月的时间才能完全掌握使用技巧，而对于精力和经费都有限的中小卖家来说，是否注册加入已成为一个纠结的问题。为了消除用户顾虑、减少认知成本带来的摩擦、提升注册率，设计团队将注册界面进行了优化：通过可视化的方式向用户直观地展现直通车的推广操作原理、核心推广位，鼓励商家点击注册。优化后商家的月均注册率显著提升。
3. A/B 测试寻找最优方案
增长的核心方法就是测试。测试可以免除设计师、产品经理、老板的主观看法和各持己见的争论，通过数据的反馈判断方案的效果。A/B则试，就是设计两种不同的方案，且两个方案之间只存在一个变量，以排除其它干扰元素。因为 A/B 则试只能存在一个变量，为了提率，我们可以同时进行多组 A/B 测试。
行业案例：为了提升从商家服务市场页面给营销推广产品的引流的效果，阿里妈妈的设计师先设计了两个版本的视觉方案同时上线，通过工具分流测试每个创意的点击率、转化率、跳出率，选出最优方案后继续通过 A/B 测试迭代优化，找出更好的创意方案。
4. 运营活动
利用人趋利的心理，运营活动和各种促销优惠是吸引用户屡试不爽的一个策略。 妥善运用不仅能影响用户的单次决策，还可以逐渐引导和改变用户习惯。电商的各种造节（双11、双12、 618)就是通过运营活动逐渐改变用户的购物习惯的典型案例。
常见的形式有满减优惠、满赠优惠、现金补贴、红包补贴、限时优惠、返利等等，不要以为这些「小恩小惠」只对 C 类用户有吸引力，B 类客户的老板们也很喜欢这种优惠和补贴哦~ 在蚂蚁链市场部举办的行业会议上，现场抽奖的奖品是几千到几万元的「代金券」（客户购买蚂蚁链服务时可抵扣），现场获奖的公司、银行的领导们都很开心。双十一也不只是淘宝天猫这些 C 类消费平台的节日，阿里云这样的 B 类技术平台一样有「五折」、「满减」活动。
行业案例：阿里巴巴的云技术业务阿里云，去年双 11 在云产品平台上展开了拼团购活动。玩法是这样的，用户通过开团建立熟人拉新关系群，被邀请者通过购买超低价折扣云产品获取参团资格，邀请者从中获取现金奖励及补贴返现，最终根据团内新用户数排名瓜分百万现金。此次拼团活动的一个特征是门槛较高，参团用户需购买 5 折云产品才可参团，这一限制将大量羊毛党拒之门外。除了新用户可享受的商品折扣外，额外增加了拉新后折上折返现、拉新现金红包奖励以及拉新现金返利。零头小利很难吸引 B 类云产品用户群为之付出成本参与任务，但综合收益可以满足用户预期。
5. 消息推送
消息推送是一种实时、精准、有效的提醒方式，形式包括 APP 的消息 push、邮件、短信等。 它的主要功能是用来激活用户，提升用户活跃度和留存率。 消息推送的核心指标主要为消息的到达率、点击率、转化率，可以通过测试和数据分析，建立起质量评估体系。下图为阿里云的推送邮件「您有一份创业助力金礼包待领取，免费领取！」：
6. 游戏化机制
「游戏化」就是在非游戏情境中，使用游戏的设计思想和机制。游戏化的最终目标不仅仅是为了让用户觉得好玩，它是一种桥梁和手段，用游戏元素和游戏式的设定创造出乐趣和粘性，从而驱动和引导受众，让商业目的更容易、更快速的实现。常用的游戏化元素包括等级、点数、徽章、排行榜、虚拟形象、通关解锁等等，如下图钉钉的捐步数排行榜。
行业案例：千牛作为淘系商家的一站式工作台，是双十一商家移动端的主阵地，提供了丰富的活动报名、规则解读、资讯直播等功能。但对于那些无法参加大促的中小卖家而言，这些功能无法吸引他们。针对这个问题，去年双十一，千牛首次尝试了互动玩法，并通过节日氛围的营造，向商家传播快乐双十一，提高非会场商家的参与感。在游戏的角色和内容设计上，将多角色子账号的创建和千牛品牌形象进行融合，加强商家对千牛多角色帐号的学习和了解，提升品牌及形象的认知度。此次互动游戏有大量商家积极参与，人均互动次数、互动率、首次尝试三项核心数据，均达到了预期效果。
7. 社区氛围运营
营造良好的社区氛围有利于用户之间建立良好友善的氛围。产品早期的社区氛围可以通过团队自身的运营来带动。
行业案例：语雀是蚂蚁集团内部孵化出的在线文档编辑与办公协同工具，同时面向 B 类企业客户和 C 类个人用户。为了营造知识传播分享的学习氛围，突破工具产品的定位局限，运营团队打造了「发现」板块，主要面向互联网行业的年轻从业者，并通过前端大牛的入驻吸引了很多同行业的用户来编写技术文档、分享技术文章。
1. 广告传播
广告包括线上和线下传播，线下大至户外广告牌、地铁广告，小至易拉宝、传单、杂志广告等，线上形式就比较丰富，各种渠道的广告投放、H5营销、新媒体营销等。线下广告因为难以监测影响效果和转化率，现在多为线上线下联动。
行业案例 1：之前钉钉「开工节」的线下广告因为社畜气息太浓重而饱受争议，虽然引起了上班族们的不满，但话题热度也相当高。2020 年的广告与新版表情包和疫情期间在线办公/上学的场景结合，成功引起了大家的共鸣。
行业案例 2：Slack 在发现网站关键页面的流量增长放缓之后，考虑到这意味着新用户增长动力不足。面对这种状况，Slack在展示广告获客方面进行了新的尝试，就是在投放渠道方面，在Google Display Network 的投放逐渐减少，同时增加在 Carbon Ads 上的投放。Google Display Network 是非常宽泛的流量平台，主要靠量取胜，并没有特定的人群属性。但 Carbon Ads 的受众人群则全部是程序员和设计师。这说明，除了原本典型的开发者用户，Slack 试图吸引新的设计师用户群体。
2. 借势营销
借势营销通常是借助节日、事件等，为自己的产品助力，扩大品牌曝光和品牌认知。借势营销的大佬杜蕾斯当仁不让，常常会引起大众的讨论和传播。
行业案例：阿里巴巴「素材中心」是面向全集团的素材采购、分享平台，素材种类包含素材图片、视频、字体等。平台上线初期，为了低成本地提升素材量、打开知名度，项目组与集团负责公益的社会责任部、摄影兴趣派、负责版权的法务合作发起营销活动，号召集团员工上传自己的摄影作品作为免费素材，每分享的作品被成功下载一次，平台即为免费午餐公益活动捐一笔 0.1 元的款，分享者可以申报公益时。
因为公司一向重视公益，鼓励每个员工每年累计公益时，且公司内摄影爱好者的规模庞大，所以这次活动得到了集团公益团队的大力支持，不但为平台带来了几千张原创免费素材，更大大增加了平台的知名度和用户群（PV、UV 翻倍）。
3. 社交裂变
社交裂变传播，人人都是节点，传播的效果可以几何式倍增。裂变是目前市场上最有效的推广方法之一。裂变常见于微博、微信等社交平台，激发传播，带来水 波式的反馈效果。
行业案例 1：腾讯云的「十年筑梦，伴你同行」 H5 互动，回顾十年发展历程，展现品牌实力，邀请用户继续使用，吸引用户参与领取十周年礼包的活动。内容策划和交互方式上，在标题界面下滑屏幕，浏览十年历程总结，包括 2010 年技术沉淀，2013 年拥有姓名，2013 至 2017 拓展数据中心、云产品上线，2018 年深入行业发力技术升级、构建基础设施平台，2019 年在品牌合作等四个方面的「100万」成绩，2020 年科技向善，最后是总结语和邀请链接。
行业案例 2：2019 年底，为面向 B 类客户推广蚂蚁链，同时向普罗大众科普区块链的落地场景，负责蚂蚁链业务的设计小组与市场部同事合作，结合市场部举办的「蚂蚁区块链金融开放峰会」等行业活动推出 H5 互动，通过线下会议和线上公众号同时传播，鼓励大家通过微信、钉钉分享。
4. 邀请拉新
因为线上流量红利的枯竭、获客成本越来越高，邀请拉新因其低成本、率的特点，已经成为各大产品常用的拉新工具。对被邀请的新用户和邀请的老用户，活动通常对双方都提供奖励。设计上要注意淡化广告的特质，营造分享优惠、提供帮助的感觉。邀请拉新最经典的案例，就是 Dropbox 的拉人涨空间的活动，据说当年让这个网盘产品在短短 15 个月内，增长了 3900% 的注册用户。
这种拉新方式已经成为 C 端产品中的常见套路，在 B 类业务中比较少见，但对于形成社群的中小企业和微型企业的企业主来说，也可以尝试使用。
1. 收费模式
基础功能免费，增值功能付费：通过免费服务吸引客户，再通过提供增值服务，将一部分免费客户转化为付费客户。
行业案例：Teambition 虽然允许企业用户免费使用，但限制项目人数和项目数量（具体限制信息在官网上都无法直接找到），只要团队达到一定规模就必须转换为付费，而且是按每人每年的收费模式。
免费试用/限时优惠：免费试用通过「免费试用 30 天」、「限时免费公测」等方式吸引客户开始尝试使用，到期后如果已经产生粘性则有转化成付费客户的可能。限时优惠包括「首单优惠」、「首年优惠」等等。
行业案例：语雀商业化的第一年时，对企业和个人客户均采用首年优惠（企业空间正常价格 5999 元/年，优惠价 2999 元/年；个人空间正常 99 元/年，优惠价 69 元/年）；第二年则对企业客户采用首单优惠方式，而个人客户不再有首年优惠。
专注服务付费客户：免费模式的基础是海量用户来分摊边际成本。这样即使转化率很低，在庞大总量的基础上也能得到不错的付费用户数；但是如果产品本身体量很小，免费用户带来的运营成本就会让企业难以负荷。
行业案例：Bidsketch（网站提案模板平台）发现随着免费用户量的攀升，付费用户比例缩 减到 1%，为了刺激用户付费，团队进行了一系列尝试：各种付费的优惠活动、15 天付费功能体验、消息推送等等，但是收效甚微…… 于是他们做了一个测试，从页面上删除了免费的选项，结果一周后，付费转化率提升了 8 倍。因此他们取消了免费账户的选项，专心向付费用户提供服务。目前 Bidsketc 的策略是：免费试用 14 天，然后就需要转为付费用户，付费有 solo\team\business 三种收费标准。
2. 用户细分
就像留存阶段那样，将用户分为群组，此时要重点关注每个群组带来的收益，可以根据用户的消费额、年龄性别地点、获客渠道、购买次数等等对用户分组。
行业案例：语雀作为从 2019 年起刚刚开始尝试商业化的办公类工具产品，用户增长是核心目标之一。考虑到阿里巴巴的电商基因，在商业化初期，语雀针对电商企业用户群进行针对性的增长实践。设计师通过用户调研和客户走访，首先验证了这个群体对于文档工具和知识库产品的需求；然后针对定量、定性调研结果，定制专门针对电商企业的文档模板、知识库模板、空间模板；接着设计了面向商家用户的落地页，并通过商家后台进行引流。最终效果显著，电商模板一度成为用户使用率最高的模板之一。
1. 优秀的官网和落地页
我们不能强调各种各样特殊策略的过程中，忽略最「传统」、但往往也是最关键的官网、落地页本身的设计。优秀的官网和落地页要能快速而准确地向目标用户传达出产品的核心价值，并吸引他们马上开始注册和使用。
行业案例：设计平台 Canva 为用户提供了创建社交媒体图形、演示文稿、海报、文档等各种设计模板和工具，该公司的愿景是「无摩擦地帮助每个人创造出美丽的设计」，目标用户是「渴望用更好的方法来创造美丽的设计的人」。基于这样的愿景，它的官网和落地页为这些目标人群充分展示出了他们需要的东西。
Canva 的主页风格非常简洁，直观的展现了产品的信息，并没有过多的解释产品，而是引导用户快速注册和使用。为了鼓励产品的使用，在注册登录的入口下面展示了一系列最常用的设计模板类型：
页面上提供的关于产品的信息不多，只有「世界上最容易使用的设计工具」、「1000万人在Canva上设计」和「设计任何东西，在任何地方发布」这样有很强说服力的宣传语。如果想进一步了解产品，最好的方式是立即注册或登录，直接感受产品本身的魅力，也可以比较免费版、企业版、商用版的异同。
2. 筛选优质种子用户
这个步骤通常是在产品的冷启动阶段，也就是从0开始导入第一批用户和制造内容的过程。早期种子用户的质量会决定产品初期的氛围和走向，影响产品的发展和运营策略。筛选种子用户的前提是要确保产品达到 PMF 状态，也就是产品和市场匹配状态（Product/market fit)。
行业案例：strikingly（一款快速制作网站的在线工具）在上线之初，并没有大范围展开推广，而是专注于找到 100 个“超级粉丝”。为此 stikingly 寻访了公司周围所有的学校社团和创业公司，邀请他们使用自己的产品。创始人 David Chen 在 facebook上添加了 2000 多名用户，每天和他们聊天，听取他们的反馈，有时候还会邀请用户出来喝茶聊天。这些种子用户不但在产品初期贡献了很多宝贵意见，还主动把产品推荐给其他人，甚至解答新用户的提问和困扰。
3. 外接资源引流
外接资源引流就是利用其它产品或平台为自己的产品进行用户导流。C 端产品通常利用拥有大量用户的社交平台，通过引流促进用户的快速增长，比如拼多多利用微信的社交关系，通过亲朋好友低价拼团快速吸引了大量的早期用户。而 B 类产品的引流通常是同领域、或使用场景相关联的产品进行互通，拥有同类用户群的产品之间的彼此导流。
行业案例：文档工具腾讯文档与项目管理工具 Tower 彼此打通，即为彼此的用户带来使用上的方便，又可以增加产品曝光度、相互引流。
4. 举办比赛
举办与产品相关的比赛或征集活动，参赛者需要上传作品来获得评比的机会。这样不仅提高知名度、带来新用户，还能激励用户去了解产品、使用相关功能，提高激活和留存量。需要注意几点：
行业案例：蚂蚁金融科技于 2019 年举办了「链创·未来」蚂蚁区块链创新大赛，一方面可以挖掘和助力区块链创业公司和团队，一方面可以推广蚂蚁链的 BaaS（Blockchain as a Service）产品。为期 9 个月的比赛累计收到 400 个报名参赛项目，参与人数近万；答疑群入群人数达到 2500 人，全国 60 多家媒体投放，媒体阅读量超 20 万+，同时举办了近十场线上培训以及多场线下活动，取得了一定推广宣传效果。
5. 搜索引擎和应用商店优化
网站利用搜索引擎的排序规则，采用 SEO（关键词优化、页面结构、文章标题、 内容长度、外链等等）和 SEM（竞价排名）的方法，影响搜索权重，提升网站曝光。 但是移动时代信息更加分散，相比其他获客方式，搜索引擎优化对于APP的获客转化效果不够直接有效了。
应用商店优化即 ASO，主要有 iOS 的 App Store 和安卓的应用宝、各大手机商的应用商店等，主要为应用标题、关键词、产品描述、缩略图和评论优化。
行业案例：Ant Deign 是蚂蚁体验技术部推出的开源设计体系，在业内有较高的影响力。为了推广 Ant Deign 的 Sketch 插件 Kitchen，设计团队的相关负责人通过搜索优化，使得搜索「Kitchen」、「Kitchen Sketch」等关键词的整体排名明显提升，通过百度、Google 搜索引擎渠道的访问量提升 40% 以上。
6. 地推
除了线上的宣传渠道之外，也会有线下的地面推广，常见的有发宣传单、路演、设置摊位做拉新活动等。地推要注意的是要根据产品定位，选择匹配的区域和用户人群。
行业案例：虽然不是设计师出身，但创业公司 Teambition 的 90 后帅哥老板齐俊元对于体验设计有着自己独到的见解和经验，他常年活跃在设计大会 IxDC中，会议期间除了演讲分享，还可以看到该公司的展台、宣传品。
以上就是笔者收集的 B 类业务增长设计的方法和策略、行业典型案例，以及自己实践和见证的项目。欢迎交流切磋，更希望听听你的故事~~
B 类业务的增长设计实践，机会和挑战相对有限，且设计工作往往和产品设计、市场营销、运营推广工作交叉，需要设计师们擦亮眼睛、抓住机遇、敢于面对风险和质疑、勇于挑战。加油~~
文章来源：优设 作者：木木叶
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。
BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，
接下来为大家分享一下我收集到的案例：
（图片均来源于网络）
点击查看更多UI/UE设计案例⬇️⬇️⬇️
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
编辑导读：如今，谷歌可以说是科技领域规模最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。
图片来自Material
在没有其他方法的情况下，图标可以成为理想的指示工具。——《谷歌材料设计指南》
在《Design of Everyday Things》一书中，有“以人为本的设计之父”之称的唐·诺曼（Don Norman）阐述了他对图标的理解：图标就是代表动作、同时可以指示该动作以何种方式完成的元素。在数字产品中，我们很少会出现“左滑-删除”这样的文字指示，而是通过左滑的动作引出一个红色的小垃圾桶来阐明“左滑就会删除”这样的设定。
在用户和产品交互之前，插入动画效果。——《谷歌材料设计指南》
如果我们希望一款数字产品有着极简主义外观，那么我们可以借助动画来达到这一点。在上图的例子中，最开始画面中甚至不会出现垃圾桶的图标。在我们手指滑动后，也就是人机交互的动作产生之后，才会出现这一垃圾桶，同时也会强化“滑动表示删除”这样的信息。动画效果有效简化洁面、改善用户体验的功能。
图片来自Medium｜制图Eddy Gann
动画可以展示图标所代表的执行动作，从而增加流畅感和愉悦感。在两个视觉效果之间插入带有动画效果的图标，可以反映这两个视觉效果之间的关联。——《谷歌材料设计指南》
在两个动作之间增加一个过渡的动画，这个效果我们应该很熟悉。最简单的例子就是“播放/暂停”按钮。在点播放后，该图标变成了暂停按钮；点下暂停按钮，该图标又变成了播放按钮。这个变化的图标展示了播放和暂停两个动作之间的关系。
这只是一个简单的案例。现在想象一段更加复杂的经验：比如将某个产品添加到购物车中，购物车图标会出现装进货物的动画效果；或者想象某一功能无法使用时图标的弹出效果。
带动画效果的图标本身并不复杂，我们可以在Adobe XD中完成：通过给图标添加预设效果，或者加入淡入、淡出的效果即可。
动画效果可以根据需要设计出简单或复杂的运动轨迹。图标虽然小，却是影响用户体验非常重要的一环，我们可以通过设计复杂的运动轨迹来强调它的重要性。——《谷歌材料设计指南》
请记住，如果界面上所有的元素和图标都在动，那么用户可能会不知所措。过度使用这一方法反而会削弱你想强调的重点。给图标添加动画应该适可而止。
调色板生成工具｜图片来自Medium
调色板生成工具（Material’s Palette Generator）可以调出任何你需要的颜色，色相，亮度，色度等都可以通过一系列算法调节出来，通过算法调出的色彩实用又美观。——《谷歌材料设计指南》
如果我们无法使用谷歌的调色板生成工具，手动调色就会变成一件非常麻烦的事。调色板生成工具最大的好处就在于它自动给你调出了同一种颜色的不同形态（如蓝色从暗到明、从深到浅的形态），你就不需要再对照标准调色板一点点矫正了。不过即使没有这样的自动生成工具，你也应该仔细检查并矫正自己的调色工具。
颜色对于数字产品的重要性，就像是盐和胡椒粉对吐司的重要性一样——添加太多了，就盖过了吐司自身的风味；太少了，味道就会变得寡淡。在选择配色以求增加品牌视觉效果时，一定要仔细考虑清楚给哪里添加什么颜色。
通过有节制地在APP里添加颜色，你还可以突出相应的内容，如文本、图片、按钮等。你可能已经注意到了，Instagram和Twitter上面布满了色彩鲜艳的图片和图标，与之相对应，它的用户界面非常简洁，不会喧宾夺主。
色彩也可以是一种交互元素，要考虑它们在什么地方交互，希望达到什么效果。最重要的元素要用最突出的色彩。——《谷歌色彩设计指南》
当一个元素的色彩与周围环境形成对比时，用户会更理解它的重要性。我们可以给重要的元素增加“色彩权重”，这个概念是说增加色彩的饱和度，使用更加大胆、更吸引人的色彩，制造视觉冲击。
另外，我们可以将重要的信息加粗显示，让它在第一时间进入用户的眼睛。简单来说，如果一种信息比另一种信息更重要，那么前者就要在色彩和篇幅上胜过后者，好让用户直观地进行区分。
文字类型生成工具｜图片来自Medium
Google Fonts是谷歌研发的一款文字类型生成工具，可以使用它来调节字体、大小等。您可以根据需要调整和优化产品的文字设计。——《谷歌材料设计指南》
字体设计是一门艺术，它不仅关乎选择某一种具体的字体，更设计如何使用、粗细调节、比例调节等，目的是增加界面的可读性，从而增强产品的实用性。谷歌研发的这款文字类型生成工具为设计师提供了多样的选择和排版支持。通过这一款文字类型生成工具，可以节省时间，迅速生成段落、标题、正文、按钮等。
文章来源：人人都是产品经理 作者：Danny Sapio. 译者：Michiko
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：作为一个设计师，有时候在工作中会过度重视美感和创意，辨识度是有了，但是缺失了品牌感。没有了品牌感，这个图标就可以放在任意一个产品上使用，无法与品牌产生强联系。那么，如何设计一个有品牌感的图标呢？本文将从三个方面展开分析，希望对你有帮助。
我们在画图标的时候，往往会忽略掉一个重要的问题：缺失品牌感。也就是说，这个图标和我们的实际品牌、业务并没有什么联系，它仅仅满足了可辨识这个温饱需求。
图标缺失品牌感，就会导致同质化的问题，这些图标放在任意一个产品上都可以通用。
对于产品，记忆点的缺失导致用户看完后对于我们的业务、品牌不会产生任何深刻的印象。对于我们设计师，图标和业务的断层则很容易让我们陷入反复改稿的被动局面，并且设计话语权也越来越小。
那么，有没有什么系统、易于理解的方法来让我们的图标具备品牌感？
当然有。
接下来的这个图标三步品牌化是我一直在用的办法，而且屡试不爽，基本用了这个方法，需求方基本一稿过～
文章案例选用了对接京东物流的国际物流项目。当时有一个着陆页的需求，需要在首屏下的优势板块中绘制六个图标，分别对应平台的六大优势。接下来，我将详细讲解如何运用这个图标三步品牌化方法绘制与品牌息息相关的图标。
品牌符号从广义上来讲也就是形状。
比如天猫最近的双十一购物节，便是用一个猫头来作为这次大促的品牌符号，通过每年固定时间节点的品牌形象建立心智。
再比如之前大热的腾讯综艺《演员请就位》，它的品牌符号就是不同矩形色块的叠加组合形态。
通过承载的不同信息可以扩展为不同的类型，比如下面的固态层、图片层和文字层就分别承载了内容、图片和文字。
Google在18年于material design中新增了一整块章节来阐述图形语言。
google原话是：形状可以引导注意力，让用户易于识别组件，识别状态和品牌语言传达。
也就是说，形状并非我们以往认知中的作用，品牌同样可以借助形状来加强效应。
最典型的就是谷歌自家出品的google play。你可以看到google play被提炼出的三角形符号被作为外轮廓延展到来所有相关的业务icon，显著加强了品牌记忆点。
再比如国内的蚂蚁财富，便是通过提炼logo中的箭头符号，将其延展到三个优势图标当中，一样得传达了蚂蚁财富的品牌表达。
所以，基于业务目标以及行业特征，我们将倒三角这个符号作为我们这次项目的品牌符号。
至于为什么选择这个形状，主要考虑到了稳定性（三角形自身的稳定性、象征专线的稳定可靠）、保障性（倒三角常被用于保障承诺类的徽章标志）、隐喻物流（由飞机和定位的图标变形而来）和三者的战略合作（开锣、中国制造网和京东）。
第二步相对而言就比较简单了，不过考虑到颜色在各个场景及状态到通用性，这里需要基于原本的品牌色额外不同明度的颜色。
这里我简单扩展出淡色和深色，为了避免页面过冷加入了暖色作为点缀色以提升温度。
将图标与业务紧密结合，能够与其他竞品拉开差异化，这是个相对简单但是很容易出效果的品牌化的方法。
具体的操作办法就是：首先根据所给文案脑爆出图标所对应的关键词，然后根据所在行业的特征筛选关键词，或者进行二次联想及转化。
下面我通过此项目中的三个图标案例来简单讲述下设计过程，仅为大家提供下思路：
运营所给文案如下：
这段文案意思就是，由于我们平台和清关行合作，因此让我们的业务更具有保障性，货物可以按时送到客户手中。
这里我一开始脑爆出了雨伞、锁和盾牌这三个形象，并且传统得用了盾牌符号传达保障性。
这种任何行业平台都可通用的形象，并不能关联我们这个物流类的平台。
后面联想到到我们跨境、外贸的行业特征，将“雨伞”这个形象变形转化为降落伞，来代替盾牌符号。
一来，降落伞外形似伞，相当于是货物的保护伞一样体现”保障“的感受， 另外，这种”空运“式的表达也额外传递出按时递交的概念，很好得体现出典型的”跨境物流“的行业特征。
运营所给文案如下：
同样，一开始我着眼于”跟踪“”实时“”轨迹“这些关键词，脑暴出定位、雷达之类的事物。
但是结合我们行业特征的话，其实有空间去更贴切到业务本身。
我们平台的业务线包含了两个站点——美国（主站）和马来西亚。供应商发货后，货物的轨迹必然是反映在世界地图中，从起点至终点得分布。
因此我用了地球仪映射全球，以定位来映射包裹收货地，以延展到定位icon中的虚线映射轨迹。这样产出的图标，不仅仅是指代了文案意思，同时表达出对应的行业特征，和业务紧密贴合。
文案如下：
一开始，我传统得想到了一个时钟图标来代表。但是仔细想想，这个时钟图标仅能代表”时效“的特征，而不能传达”快“的感受。如何更好得传达“快”？
发散思维，我联想到交通运输工具，飞机、轮船、火箭等等，最终我选取了飞机这类跨境物流专线主要使用的运输工具，它所带来的快捷相比轮船更加深入人心，又不像火箭那样脱离现实。
当然并非所有的图标一定需要去结合行业特征，其余的三个图标暂未想到更适合的元素，所以依然选用了常见的形象来传达概念。我们不需要完全硬坳这个方法，但是身为设计师，我们依然需要掌控我们的项目，充分发挥自己的创造力来赋予产品更多的power。
最后，我为所有图标加入了非线性动画。一方面为着陆页注入了活力，增加用户愉悦度，另一方面通过动态的表达引导用户更好理解平台优势，比如地球仪通过加入轨迹的修剪动画以及定位的弹跳动画，来更生动得传达物流轨迹全程跟踪的这个概念。相比原本的静态图标是不是更好理解了？
更重要的是，动画的加入也贴合了我们物流行业“运动”的特征~
篇幅原因，动画的制作今天先略过，后面可能另抽时间单独出个教程出来。当然，动力来自于你们的在看或转发啊～～（手动斜眼）
我们每次接手一个需求时，都要想想，这个设计可以在哪些地方和我们的业务、品牌进行关联？而不是每次都好像在做一个完全独立于业务外的项目，这很容易让你陷入反复改稿的被动局面，而且话语权也越来越小。
总之，品牌思维是需要设计师格外关注的！
最后，我们再来回顾一下这个图标三步品牌化这个方法！
第一步，融入品牌符号；第二步，注入品牌颜色；第三步，结合行业特征。
但愿今日份的分享对你有所帮助！
文章来源：人人都是产品经理 作者：Andrewchen
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
看到知乎上的一个问题：如何找到一家好的高端网站设计公司？
把回答的内容也转过来记录一下。
首先回答：何为高端？
高端与低端是对应的，目前网站设计，中低端基本是用模板改改，相对价格低，有一些小型公司或不依靠网站运营收入的公司，“有个网站就好”，所以可以用这种低投入，内容有就行的网站建设公司，特点是马上就能用，三五天把内容发布进去就可以。备案可能需要一定时间。
高端设计公司，一般是量身定做，为企业做网站策划、分析，按照用户研究、网站建站的目的来进行网站的定制栏目页的设计。做竞品分析、研究对方的优缺点，设计的色系和企业标准色、情感表达、人物场景、用户体验思维，越深入，思考越成熟，做的网站品质越有保障。所以需要的时间、精力、投入相对多。
因为投入相对多，所以经营业绩好的企业、集团公司、营销类大型网站来定制的比较多。
我们公司“北京蓝蓝设计”就是为定制的高端企业用户、政府网站、软件公司来服务的。我们挺喜欢要求高的客户，这样能体现出专业设计的水平，这也是我们和其它建站公司区别开来的地方。
我们主要是给大型软件公司平台、系统做UE、交互设计、视觉设计，用户体验优化，这个，比网站设计更难，更专业。 往往一个公司的核心产品，值得把精力金钱投入到上面，产出最大的回报。近年来，除了做软件UI，大屏大数据可视化项目外，我们也扩展了“愿意把公司网站做成核 心产品”这样的公司成为合作伙伴，更好的为客户提供全方位的服务。
一旦成为我们的客户，设计无忧。
我们一定会把该做的事做好，并提供超值服务和额外附加值的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如今，很难用界面动画给人留下深刻的印象甚至惊喜。它显示了屏幕之间的交互，解释了如何使用该应用程序，或者只是引起用户的注意力。在浏览有关动画的文章时，我发现几乎所有的文章都只是描述了关于动画的特定的用例或一般事实，并没有遇到任何关于界面动画通用规则的文章。在本文中我收集了界面动画的主要原则和规则，以便给想要设计动画界面的设计人员提供一些帮助。
当元素改变它们的状态或位置时，动画的持续时间应足够慢，以使用户可以注意到变化，但同时也要足够快，以免引起等待。
在动画中使用适当的持续时间，不要太快，更不要让用户过长等待
大量研究发现，界面动画的最佳速度在200-500毫秒之间。这些数据是基于人类大脑的特殊性得出的。任何小于100毫秒的动画都是瞬时的，根本不会被识别。而超过1秒的动画时长会传达延迟感，因此对用户来说很无聊。
最好在界面中保留动画的持续时间
在移动设备上，《材料设计指南》还建议将动画的持续时间限制在200-300毫秒之间。至于Web端，持续时间应延长30％，大约为400-450毫秒。原因在于：屏幕尺寸越大，物体在改变位置时可以克服的路径更长。因此，在可穿戴设备上，持续时间应缩短30％，大约为150-200ms，因为在较小的屏幕上，移动距离更短。
移动设备的大小会影响动画的持续时间
Web动画的处理方式有所不同，由于我们已经习惯了在浏览器中即时打开网页，所以我们希望也能在不同状态之间快速转换。因此，Web转换的持续时间应比移动设备短约2倍，150-200毫秒之间。在其他情况下，用户将不可避免地认为计算机死机或网络连接出现问题。
但是，如果你要在网站上创建装饰性动画或试图吸引用户对某些元素的关注，则无需考虑这些规则。在这些情况下，动画可以更长一些。
大屏幕电脑=慢动画？决不是！
需要记住的是，无论平台如何，动画的持续时间不仅取决于移动距离，还取决于对象的大小。更小的元素或带有小变化的的动画应该移动得更快。因此，大而复杂元素的动画在持续时间稍长的时候看起来更好。
在相同大小的移动物体中，停下来的是经过最短距离的物体。与大物体相比，小物体移动得更慢，因为它们的偏移量更大。
动画的持续时间取决于对象的大小和移动距离
当物体碰撞时，根据物理定律，碰撞的能量必须均匀分布在物体之间。因此，最好排除反弹效应，只在特殊情况下使用它才有意义。
避免使用弹跳效果，因为它会分散注意力
物体的运动应该是清晰和锐利的，所以不要使用运动模糊。即使在现代移动设备上也很难再现这种效果，并且根本不用于界面动画中。
不要在动画中使用模糊效果
列表项(新闻卡片、电子邮件列表等)在其出现之间应该有一个很短的延迟时间，每次出现的新元素应该持续20-25毫秒。元素出现较慢的话可能会惹恼用户。
列表项的动画应持续在20–25毫秒
缓和有助于使物体的运动更加自然，这是动画的基本原则之一。这一点在《迪士尼动画原则》(The Illusion of Life: Disney Animation)一书中得到了充分的描述，这本书是由两位重要的迪士尼动画师——奥利·约翰斯顿和弗兰克·托马斯所写。
为了使动画看起来不显得机械和人造，物体应以一定的加速或减速的方式移动，就像物理世界中的所有活动对象一样。
与线性动画相比，具有缓动效果的动画看起来更自然（这里提示下：注意看每段竖格的间距）
不受任何物理力影响的物体直线运动，换句话说就是匀速运动。正因为如此，它们看起来非常不自然，对人眼来说是人为的。
所有动画应用程序都使用动画曲线，我将尝试解释如何阅读它们以及它们的含义。曲线显示了物体的位置( y axis=position )在相同的时间间隔内物体的位置如何变化(x axis=time)。在当前情况下，运动是线性的，因此物体在同一时间行进相同的距离。
直线运动曲线
例如，直线运动只能在物体改变颜色或透明度时使用。一般来说，我们可以用它来表示物体不改变其位置的状态。
我们可以在曲线上看到，在开始时物体的位置变化缓慢，而速度则逐渐增加，这意味着物体正在以一定的加速度移动。
加速度曲线
当物体以全速飞出屏幕消失时，应使用此曲线，比如说系统通知或者是界面卡片。但请记住，只有当对象永远离开屏幕且我们无法调用或返回它们时，才应使用这种类型的曲线。
将卡片滑出屏幕的加速曲线
动画曲线有助于表达正确的情绪。在下面的示例中，我们可以看到所有物体的移动持续时间和距离是相同的，但是即使曲线上的微小变化也可以影响动画的气氛。当然，通过改变曲线，你可以使物体尽可能地接近于真实世界。
持续时间和距离相同，但却是不同的氛围
它与缓入曲线相反，因此物体会快速覆盖很长一段距离，然后缓慢的降低速度，直到最终停止。
减速曲线
当元素出现在屏幕上时应使用这种类型的曲线——它以全速向上飞入屏幕中，然后逐渐减速直到完全停止，这也可以应用于从屏幕外部出现的其他卡片或对象。
减速曲线，使动画更好地呈现
该曲线使物体在开始时获得速度，然后慢慢地将速度降回零。这种类型的移动是界面动画中最常用的。当你犹豫在动画中使用哪种类型的运动时，可以使用标准曲线。
标准曲线
根据《材料设计指南》，最好使用非对称曲线，使移动看起来更加自然和真实。曲线的末端必须比它的开始更加突出，以使加速的持续时间短于减速的持续时间。在这种情况下，用户将更加关注元素的最终移动，从而关注元素的新状态。
查看对称和非对称标准曲线之间的区别
当对象从屏幕的一部分移至另一部分时，使用缓入缓出功能。在这种情况下，动画避免了引人注目的戏剧效果。
卡片在屏幕上的移动以及相应的不对称曲线
当元素从屏幕上消失时，应该使用相同的移动类型，但用户可以在任何时候将其返回到先前的位置。它涉及抽屉式导航等。
抽屉式导航从屏幕上隐藏了标准曲线
从这些例子中可以看出，许多初学者忽略了一个基本的规律——开始动画并不等于结束动画。与抽屉式导航一样，它以减速度曲线出现，而以标准曲线消失。另外，根据谷歌的材料设计语言，物体出现的时间应该更长，以吸引更多的关注。
侧面菜单的出现和消失，分别通过减速度和标准曲线实现
使用函数cubic-bezier()来描述曲线。之所以称为立方，是因为它基于四个点。在图上已经定义了具有坐标的第一个点0;0（左下）和具有坐标的最后一个点1;1（右上）。
基于此，我们仅需描述图形上的两个点，这些点由函数的四个参数给出cubic-bezier()：前两个是坐标x和y第一个点，后两个是坐标x和y第二个点。
为了简化曲线的工作，建议使用easings.net和cubic-bezier.com网站。第一个包含最常用曲线的列表，你可以将其参数复制到原型工具中。第二个来源使你可以使用曲线的不同参数，并立即查看到物体将是如何移动的。
函数三次贝塞尔曲线的不同类型的曲线及其参数
就像在芭蕾舞蹈设计中一样，主要思想是在从一种状态转换为另一种状态的过程中，引导用户注意一个流动的方向上。舞蹈编排有两种类型——平等交互和从属交互。
平等交互意味着所有对象的外观都遵循一个特定的规则。在这种情况下，所有卡片的外观都被视为一种流程，可以引导用户的注意力集中在一个方向上，即从上到下。如果我们不按照顺序，那么用户的注意力将会分散。所有元素同时出现看起来也会很糟糕。
用户的注意力应引导在一个流动的方向上
对于表格视图，它有点复杂。在这里，用户的焦点应指向对角线，所以逐个地显示元素是一个很糟糕的主意。单个展示元素会使动画过长，并且用户的注意力会呈锯齿状，这是错误的。
卡片形式的对角线外观
从属交互意味着我们要有一个吸引用户注意力的中心对象，而所有其他元素都从属于它。这种类型的动画给人一种有序的感觉，从而引起用户对主要内容的更多关注。
在其他情况下，用户将很难知道该关注哪个对象，因此他的注意力将被分散。所以，如果有多个要设置动画的元素，则需要明确它们的运动顺序，并尽可能将动画设置为最小的对象。
只有一个中心对象的动画很有必要，其余元素应是被引导的。否则，用户将不知道关注什么对象
根据材料设计语言，当移动的物体尺寸发生不均衡变化时，它们应沿着弧线而不是直线移动。这有助于使动作更自然。“不成比例”是指物体的高度和宽度的增加/减少是不对称的，即以不同的速度进行(例如，一个正方形的卡片变成了一个长方形)。
当移动的物体不按原有比例变化时，应沿着弧线运动
当物体按比例改变其大小时，使用沿直线的移动。由于这种移动的实现比较容易，因此通常会忽略不成比例的圆弧移动的规则。看看实际应用的例子，你会看到线性运动的主导地位。
尺寸的比例变化是沿着直线上运动的
曲线上的运动可以通过两种方式实现：第一种称为垂直向外——物体开始水平移动并以垂直移动结束；第二种是水平向外——物体开始垂直移动并以水平运动结束。
物体沿曲线的移动路径必须与滚动界面的主轴线重合。例如，在下一张图片上，我们可以上下滚动界面，相应的卡片以“垂直输出”的方式展开-首先从右到下，然后向下。反向移动以相反的方式进行-即卡片首先垂直上升，最后水平移动。
卡片的展开/折叠方向应与界面的轴线一致
如果移动物体的路径彼此相交，则它们将无法彼此移动。这些物体应通过减慢或加快自身的速度，为另一个物体的移动留下足够的空间。另一种选择-他们只是推开其他物体。为什么？因为我们假设界面中的所有物体都位于一个平面中。
在移动过程中，物体之间不应相互穿过，而应为另一个物体的移动留下空间
另一种情况，移动物体可以高于其他物体。但也不能通过其他物体消失或移动。为什么？因为我们相信界面元素的行为符合物理定律，现实世界中没有任何固体物体能够做到这一点。
物体可以超越其他物体，然后移动
从以上总结的规则和原则能明白，UX界面动画是反映物理世界中存在的运动，如摩擦、加速等，模仿现实世界存在的行为。我们可以创建一个序列，让用户能够理解期望从界面得到什么。如果动画是正确构建的，那么它不会太引人注目，并且不会分散用户的目标，动画不应该影响用户使用或完成任务。
但是不要忘记动画更多的是一种艺术而不是科学，所以最好的方法是在用户身上试验和测试你的决定。
文章来源：站酷 作者：UX辞典
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图表是数据可视化的常用表现形式，是对数据的二次加工，可以帮助我们理解数据、洞悉数据背后的真相，让我们更好地适应这个数据驱动的世界。无论在工作汇报、产品设计、后台设计以及数据大屏中都能看到它的身影。然而，在实际工作中我发现很多初入行的设计师对于图表设计并不是很了解，同时市面上对于这方面的资料相对零散，不成体系。所以我结合了平时工作中的理解，梳理了这篇文章，希望能帮助到大家。
当我们把图表的结构进行拆解后，就会发现一个图表是由很多个细小构件组成的，这些构件有自己的名字和用途，分别是标题、轴、图形、图例、标签、提示信息。在平常使用的过程中，会根据场景去修饰删减一些构件元素，以此来减少冗余信息，用最适量的数据墨水比（Data-ink Ratio），帮助用户快速达成目标，在最少的时间内获取更多的信息。
标题 - 描述图表的主题（包含主标题和副标题）
标签 - 对当前这一组数据进行的内容标注
轴 - 用来定义坐标系中数据在方向和值的映射关系
图例 - 对图形本身的概括
提示信息 - 当tap或者hover的时候，以交互提示信息的形式展示该点的数据详情
图形 - 统计图表的视觉通道在形状上映射的视觉展现
接下来，我会一点一点地为大家讲解它们，方便大家合理的使用它们。但在此之前，我们先来了解一个知识点 - 数据墨水比，以便更好的理解接下来的内容。
数据墨水比——"data-ink ratio"，是1983年视觉大师爱德华·塔夫特（Edward Tufte）在《The Visual Display of Quantitative Information》中提出的一个概念：一幅图表的绝大部分笔墨应该用于展示数据信息，数据变化则笔墨也变化。他将数据油墨比定义为图表中用于数据的墨水量除以总油墨量。其中数据墨水指的是图表中不可删除的核心内容。比如，我可以删除图例、删除坐标轴、删除网格线，这可能不会影响你从图表中读取相关的信息。但如果我删除柱形图、饼图这些图表的主体元素，那么图表就失去所要表达的内容了。
我个人更喜欢用“信噪比”= 信号/(信号+噪音) 这个概念去理解，因为通过可视化传达的信息不仅仅是数据，还有业务洞察，像观点、结论性的信息往往需要用文字来呈现的也是至关重要。不过无论使用哪个词，最终的目的都是突出传达“信息”部分，去除那些干扰的“噪音”。
因此，图表中的数据墨水占比越多，那么该图表的冗余信息就越少，信息传递效果就越好。所以，在创建图表和图形时，我们的目标应该是在合理范围内最大化数据墨水比。
一个明确、相符的标题可以迅速让读者理解图表要表达的内容。通常图表的标题是根据图表所需要表达的内容决定的，大多数小伙伴可能认为命名没有太多问题。但当这个图表的结论是单一且唯一的时候，建议在概括图表内容的标题中加入结论性的信息点。这样能减少读者误解你的意图的可能，而且能够确保他们将注意力集中于你想着重强调的数据上 。
轴是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。换句话说，轴的功能像是把可视化对象置于共同的基准上，再以标尺进行数值量测。在数据可视化中，一般存在于笛卡尔坐标系（直角坐标系）和极坐标系中。对轴进行「原子」要素的拆分，我们可以得到以下几种元素，分别为：轴线、轴刻度线、轴标签、轴标题（单位）以及网格线。
根据对应变量是连续数据还是离散数据，轴可以分为：分类轴，时间轴，连续轴。
轴线一般只考虑是否显示，结合上面所讲的数据墨水比，在有网格线的情况下，柱状图/折线图会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪，突出视觉重点的目的。
轴刻度线是轴线上的小线段， 可以提供数值标签在坐标轴上的明确位置。轴刻度线有3种类型，分别为：置内、置中（即交叉方式）、置外。但刻度应置于数值坐标轴外侧， 不建议刻度采用置中或置内方式显示。
轴刻度线的使用就是加强映射关系，快速的对应到数据点。分类轴较多出现在柱状、条形中，对于映射有天然的对应关系，故在分类轴中习惯隐藏轴上的刻度线。
网格线是用来辅助图表优化映射关系的。使用网格线可以增加数据的可阅读性，网格线提供了两种功能：一是延伸数值刻度至可视化对象中，以便观察数据值之大小；二是增加可视化对象之间的比较基础 ，利于比较。
网格线一般跟随值域轴的位置单向显示，柱状图采用水平网格，条形图采用垂直网格。在使用网格线时，应该注意遵从主次原则，以轴线为主，网格线为辅，样式上可采用实线或者虚线。避免颜色过重，不要使用纯黑或者纯白，在视觉层级上不能抢了图表中的信息。
轴标题（单位）主要用于说明定义域轴、值域轴的数据含义。当可视化图表的其他部分内容（标题、图例、轴标签等）已经能充分表达数据含义，根据奥卡姆剃刀定律，可以略去轴标题，近一步增大数据油墨比，精简画面元素。
轴标签的设计较为复杂，涉及到的细节点比较多。这里将围绕直角坐标系的X轴和Y轴这两个方向进行讨论。
x 轴标签的设计重点在显示规则上，在可视化图表设计中，我们常常会碰到轴标签内容过长的情况，当空间有限时，轴标签会重叠在一起。如何处理此类问题，这里根据轴的不同类型给了对应的解决方案 。
在连续轴和时间轴中，我们可以利用抽样显示的手段来优化轴标签重叠的问题。这里不推荐使用旋转来缩减宽度。一方面从美观度上，旋转可能会破坏界面整体协调。另一方面，连续/时间轴并不需要显示所有的轴标签，参考格式塔中的[连续性原理]，尽管轴标签未能完全展示，但用户会在脑海中把缺失的部分补齐，轴标签仍然会像连续着的一样。
在分类轴中，由于标签与标签之间并没有紧密的逻辑关联关系。若采用抽样规则，隐藏了一些标签，则加大了用户对图表信息的提取难度，这是我们不想看到的。对于分类轴，这里建议通过标签旋转或转换成其他图表（条形图）来缩减宽度。
y 轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度自适应缩放。如果数组是固定的，就写成固定宽度，节省图表计算量，提高渲染速度。
轴标签的数量不建议过多，太多的标签必定导致横向网格线变多，造成元素冗余，干扰图形信息表达。根据 7±2 法则，Y轴标签数量应尽量控制在这个范围内。
一般来说，y 轴标签的取值应从 0 基线开始，以恰当反映数值。展示被截断的数据可能会误导用户做出错误的判断。比如数据本身没有那么起伏变化，处理上下限的颗粒度，把刻度拉长，一样能显得“长势喜人”。
从上面就能明白，在看图表的时候千万不要被表面给欺骗，仅仅观看柱状图的高低趋势往往不能得出正确结论，需要注意坐标轴起始位置有没有被人做过虚假处理。
但存在是有根源的，对于此类的取值方式不做过多评价。这里主要想讲一下我常用的取值方式：对于Y轴的上限即最大值根据实际数据进行动态计算。比如一排数字中最大的为1190，那么轴标签最高位为1200；一排数字中最大的是1210，那么轴标签最高位为1400。其中的1400和2100是根据轴上的分段数决定的。
但有些人对Y轴标签的取值给出了如下建议：在折线图中，取值一般保证图形约占绘图区域的2/3，或者将柱状的高度控制在图表高度的85%左右。
但我认为这种方式太刻意了，并且规则定制的比较细。但是得承认这样子确认会显的好看，做案例可以，做真实数据不行。因为考虑到实际数据有的时候会出现极限情况，比如有些特别大有些特别小，为了保证用户能从图表中准确地获取信息，不应该为了美感而破坏了它的真实性。因此并不推荐用这种方式来取值。
关于Y轴标签的数据格式，这里重点讲一些比较容易忽视的设计细节。第一，标签保留的小数位数保持统一，不要因为某些轴标签是整数值，就略去小数点。
第二，正负向的 y 轴标签，由于负值带“-”符号，整个 y 轴看起来会有视觉偏差，特别是双轴图的右 y 轴更明显。这里建议正负向 y 轴给正值标签带上“+”，以达到视觉平衡的效果。
图例是对图形本身的概括，在图表元素中属于辅助内容。它提供读者以对照的方式来理解可视化对象的项目归类。由映射图形形状和文本组成。
根据数据类型不同，分为连续型图例和分类型图例；根据状态不同，图例可以被设置为静态或可交互态。
正如，伦斯勒理工学院的行为经济学家高拉夫杰恩(Gaurav Jain)所说：“数字有一种语言的力量，能给予人一种特殊的感觉。当我们使用具体的整数数字时，人的衡量会减少。这种行为没有明显的原因。”
当人们的大脑在处理不以零结尾的不规则数字时，需要更多的脑力来处理，加大了获取信息的难度。因此在使用数字时，应该考虑这种偏好，倾向于一些取整的数字。同样的，这不仅仅适用于图例中的数字，同样适用于坐标轴上下限的数字。
带有连续性的倾向于使用水平图例，因为更符合人们的阅读习惯；带有分类属性的倾向于使用竖直图例，图例的右边可放置更长的文本。
默认把图例放在左上角去做一个通用的方案看起来没毛病。但考虑到人的视觉动线是从上至下，从左到右。这里有一个更好的做法：缩短用户对照图例看图形的本能路径，可以提升对信息的获取效率。如下图所示：
当我们在制作多折线图时，经常会出现个数据系列之间相互交错的情形，并使得各种数据标记与之前的出现顺序不一致，即与图例排列顺序不同。因此用户的眼睛必须在图例与折线之间进行连连看，最佳的做法是采用跟随图例形式，去标识出折线所属于的维值信息，这样会更直观有效。
在图表中，标签是对当前的一组数据进行的内容标注。包括数据点、拉线、文本数值等元素，根据不同的图表类型选择使用。
在绘制的图表的时候，我们倾向将标签直接打在图形外，但在「堆叠类」图表中，标签会显示在图形内。这样做会有个后果，标签的文本和图形经常需要交叠展示，所以可读性需要足够良好，所以通过对 HS 值的判断，决定文字的颜色是否需要反思。这样对比度就在可控范围内，不会出现可读性的问题。有时，还需要增加描边，让标签更清晰。
当数据特别多并且密的时候会造成全部标签挤在一起的情况。在标签重叠时，采用动态计算的抽样显示方式，自动隐藏其中一个，同时当 Hover 图表时，显示被隐藏的对应的数据。这样保证了图表的清晰度，也保证了信息的完整性。
提示信息一般是tap或者hover的时候，图表以交互的方式吐出该位置的数据，帮助用户更深入的了解数据。一般由视觉标记图形，文本标签，数值标记这3中元素构成。
提示信息的展现形式由4种。按不同的图表类型，分为悬浮、固定位置、固定在轴上、固定在图形上。
人类从图形中获取信息的效率远高于文本，可以说如今人类早已进入了读图时代。图形是统计图表的视觉通道在形状上映射的视觉展现，是图表的必备元素，承载着数据背后蕴含的信息。按照组件原子化的思路来定义现在千奇百怪的图表，大致可以分为六种基础样式：折线，面积，散点，气泡，饼/环，柱形，条形。
这里主要想重点讲一下，如何通过设计来强化图表信息的表达，以便简化用户获取信息的成本。关于具体某个图表的制作规范和运用场景，会在之后的文章中提及。
通过明暗对比、颜色对比以及色彩对比等手段可以有效的区分信息，在视觉层级上也是明显的处理了视觉噪音，便于用户区分信息。
通过添加标注，人为去干预信息的表达，多用于一前一后的标识，便于用户识别信息。
我们做数据分析的有句话叫“一图胜千言”，图表是展现数据的一种重要展现形式，选对了图表就能帮助我们更加快速、直观的传达数据信息。
那如何挑选合适的图表呢？在我看来大致分为三步：
1. 确定核心内容：明确要用图表传达的核心信息；
2.判断比较关系：判断数据之间的比较类型（如占比、数量、趋势等）；
3.选择图表类型：选择对应含义的图表（如饼图、柱状图、折线图等）。
很多朋友在判定和选择图表类型时会不知所措，但其实你只需要记住一句话：决定图表形式的不是数据，而是你要传达的信息。
同一组数据用不同的角度看，有不同的主题，比如下面这组数据：
从另一个角度看同样是5月份的数据，你还可能会将侧重点放在每个产品占销售额的百分比上。那你的图表主题应该是“5月份，产品 A 占公司产品总销售额的比例位居首位”。
综上所述，选择合适图表的关键，最初也是最重要的，就是明确要用图表传达的核心信息。
在实际工作中需要用图表反映数据的场景五花八门，但按数据关系分类无非以下几种情况，给大家简单举几个例子：
“预计在今后 10 年多的时间里，销售额将增长 ”对应的关系为时间趋势；
“雇员的最高工资额在 30000 到 35000 美元之间 ”对应的关系为频率分布；
“汽油并不是牌子越响价格越高其性能就越好”对应的关系为相关性；
“9 月份里，6 个区域的营业额大致相同”对应的关系为排名对比；
“销售部经理在他的领域内只花费了他 15% 的时间”对应的关系为占比。
国外专家Andrew Abela曾整理了一份图表类型选择指南图示，但其实结合我自己的经验，考虑到日常企业的数据分析场景，图中有些图表使用频率是非常低的。
所以我在此基础上结合自己多年的经验，总结出了常用商务图表的选择指南，总体我认为这是会更适合商务图表展示，而且会更接地气，适合大家参考使用。
折线图是通过线条的波动（上升或下降）来显示连续数据随时间或有序类别变化的图表，常用于反映数据随着时间推移而产生的变化趋势。
横轴为连续类别（如时间）且注重变化趋势、预测，适用于折线图。
举个例子：比如想看2020年上半年商品的营业额情况，并对走势做一个分析。由于每个月份的商品营业额相关的，它们代表一种数据在不同时间下的数据值，因此我们可以用折线图将它们连接起来。
但如果想看2020年上半年北京、上海、广州、深圳四个省份的营业额情况，由于每个省份的营业额是不相关的，所以我们不能随便用折线图来替代柱状图。
如果折线图上下浮动过于剧烈，那么可以尝试拉长时间间隔，比如不每天采样而以周为单位来采样。用户不太原因去阅读锯齿状的线条，或者说他们不会喜欢这样的图表。
但是如果有强需求说是一定要在某个范围，这条略过。
当有些特定的数值特别重要时，我们可以在线条上标注出他们，但全部标清数据点在大多数情况下标记出来的意义不大，从视觉上来看会显得非常琐碎。
若对比数据较多，为了避免信息繁杂。可采用实线的强弱和色彩的对比来区分主次内容，让用户更关注在主折线，获取主数据的波动感知。
折线图：更关注于点的数据，相对短的一段时间数据随时间变化的趋势；
曲线图：更关注点构成的线点数据，一段时间内整体数据随时间变化的趋势。
曲线图是折线图中的一种，当图表数据点过于密集时，使用曲线图更能表达数据随时间变化的趋势、周期性。
面积图又叫区域图，是一种随有序变量的变化，反映数值变化的统计图表，原理与折线图相似。它在折线图的基础上多了一个面积概念，填充的区域可以表示“累积”的含义（当X轴为连续的数值时）。
当注重随时间的趋势变化和累计的值时，适用于面积图。
例如：想要查看今年10月和去年10月每日的商品营业额走势，并对整月营业额进行比较，这时就可以采用面积图。但当自变量不是顺序性的变量，则不适合用面积图。
透明度可以很好的帮助使用者观察不同序列之间的重叠关系，没有透明度的面积会导致不同序列之间相互遮盖减少可以被观察到的信息。
当数据值相距很远时，区域是模糊不清的，此时不太适合使用面积图展示。
如下方示例虽然仔细分析能确定只展示了两个类别，乍一看，很可能会误以为图表上显示三种不同的颜色，但使用分组柱状图就可以很好解决这个问题。
面积图只适合展现少量的数据，最多建议不要超过四个类别，否则就会导致非常难以识别。因此在多个类别下，要尽量避免使用面积图，采用相似图表来表示，比如折线图。
堆叠面积图与面积图类似，都是在折线图的基础上，将折线与自变量坐标轴之间区域填充起来的统计图表。
唯一的区别是堆叠面积图有多个数据系列，它们一层层的堆叠起来，每个数据系列的起始点是上一个数据系列的结束点。
适用于观察多变量随时间的变化情况，且既能看到整体趋势又能看到各变量的构成情况。
为了保证数据传递的准确性，在适用堆叠面积图时，尽量不要对Y轴进行裁剪。
当数据系列过多时，往往造成难以观察，所以建议使用堆叠面积图时数据系列最好不要超过7个。
建议堆叠面积图中把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更加的展示效果。
堆积面积图要展示部分和整体之间的关系，所以不能用于包含负值的数据的展示。
柱状图，是一种使用矩形条，对不同类别进行数值比较的统计图表。使用垂直或水平的柱子的长短对比数值大小，其中一个轴表示需要对比的分类维度；另一个轴代表相应的数值。
在柱状图上，分类变量的每个实体都被表示为一个矩形（通俗讲即为“柱子”），而数值则决定了柱子的高度。纵向柱状图的柱是垂直方向的，如图：
横向柱状图的柱是水平方向的，又称条形图，如图：
柱状图最适合对分类的数据进行比较，尤其是当数值比较接近时，由于人眼对于高度的感知优于其他视觉元素（如面积、角度等），因此使用柱状图更加合适。
如下图所示，5组数据的数值很接近，若采用饼图，这无法直观的进行比较，右边的柱状图则能更好地传递图表信息。
当柱子太窄时，用户的视觉可能会集中在两个柱中间的负空间，而这里是不承载任何数据的。宽度推荐使用在1/2 柱宽到 1 柱宽之间，但也要视情况而定。
保证柱形图有的圆角，以确保柱形顶部测量柱形的长度；全圆角则有可能歪曲可视化图表的表达。
柱形图一般比较一组分类数据，柱子的高低已经传递了相关信息，不必通过颜色来区分，所以建议使用相同的颜色或同一颜色的不同色调，过多的颜色会增加理解成本。
如果需要强调某个数据时，可以使用对比色或者变化色调来突出显示有意义的数据点。
对多个数据系列排序时，如果不涉及到日期等特定数据，最好能符合一定的逻辑用直观的方式引导用户更好的查看数据。
可以通过升序或降序排布，例如按照数量从多到少来对数据进行排序，也可以按照字母顺序等来排布。总之，按照逻辑排序可以一定程度上引导人们更好地阅读数据。
条形图还可以通过省略横轴和纵轴，并直接在柱子上表明数值，来降低数据墨水比，进一步提高信息的获取效率。
堆叠柱状图（Stacked Column Chart），又称堆叠柱形图，是一种用来分解整体、比较各部分的图表。
它是柱状图的扩展，不同的是，柱状图的数据值为并行排列，堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比，并且这些子类别一般用不同的颜色来指代。
对比不同类别数据的数值大小，同时对比每一类别数据中，子类别的构成及大小。
例如下图显示的是每种化妆品在各个产品的销售情况，通过堆叠柱状图，我们可以很清晰低对比同一种化妆品到底在哪个城市销量更好。
堆叠柱状图最好的展示效果是每个组只包含两到三个类别，最多不要超过6个，因为太多的数据系列会很容易让人眼花缭乱， 如下图：
堆叠条状图的数值建议在图形之间，居中对齐，在图形左侧容易产生误解。
由于要分析部分数据在整体中的占比，避免用堆叠柱状图展示包含负数的数据。因为柱子的高度必须为正数，有负数则无法直观显示在图上。
大多数的堆叠柱状图都是垂直绘制的，但是如果你的数据标签特别长时，考虑更好地展示效果，可以选择使用水平堆叠的方式。
分组柱状图，又叫聚集柱状图。跟柱状图类似，使用柱子的长短来映射和对比数据值。每个分组中的柱子使用不同的颜色或者相同颜色不同透明的方式区别各个分类，各个分组之间需要保持间隔。
对比不同分组内相同分类的大小，对比相同分组内不同分类的大小。其中，分组个数不要超过 12 个，每个分组下的分类不要超过 6 个。
分组柱状图适合比较多组数值差异不大的数据，比如，对于要同时查看一个数值和百分比的时间趋势，双轴图就派上大用场了。
为了浏览起来更直观，建议用柱图来表示数值类数据，用线图来表示百分比。
分组柱状图强调组的概念，组是一个个重复单元。按照格式塔原理，每两个分组之间的间距要大于组内不同系列之间的间距，以免造成视觉上错误的归类和区分。
双向柱状图是使用正向和反向的柱子显示类别之间的数值比较，其中分类轴表示需要对比的分类维度，连续轴代表相应的数值，分为两种情况，一种是正向刻度值与反向刻度值完全对称；另一种是正向刻度值与反向刻度值反向对称，即互为相反数。
同样的，可分为垂直方和水平两个方向，其中水平双向柱状图又叫正负条形图。
双向柱状图一般用于正负两份相反数据的对比，例如一周内个人收入和支出的统计，其中收入为正数，支出为负数。
使用双向柱状图可以很明确的对收入和支出做出对比，并能从单个系列中分析收入和支出的数值及波动。
双向柱状图多用于展示含相反含义的数据，因此要避免不具有正负含义的数据使用而造成的误解。
如下图人口统计图表中使用双向柱状图一边绘制男性一边绘制女性，只是单纯的两类不同数据的对比，并不存在负数。这种情况将两个数据序列绘制成一个分组柱状图是更合适的。
向柱状图正向和负向的数据具有对比性，因此一般选用差值较大的具有对比性的颜色，保证的获取有效的信息。
饼图，或称饼状图，是一个划分为几个扇形的圆形统计图表。在饼图中，每个扇形的弧长（以及圆心角和面积）大小，表示该种类占总体的比例，且这些扇形合在一起刚好是一个完全的圆形。
饼图主要用于展现不同类别数值相对于总数的占比情况，尤其是想要突出表示某个部分在整体中所占比例，且该部分所占比例达到总体的25%或50%时，很适合用饼图。
饼图不适用于多分类的数据，因为随着分类的增多，每个切片的面积变小，视觉区分度随之降低。
当数据类别较多时，我们可以把较小或不重要的数据合并成第五个模块命名为”其它”。如果一定要保证数据的完整性和准确性，此时选择柱状图或堆积柱状图或许更合适。
由于人类对“角度”的感知力并不如“长度”，在需要准确的表达数值（尤其是当数值接近、或数值很多）时，饼图常常不能胜任，因此当各类别数据占比较接近时（如下左图），我们很难对比出每个类别占比的大小。
此时建议选用柱状图或南丁格尔玫瑰图（如下右图）来获取更好的展示效果。
大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时，建议从12点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块，有效的强调其重要性。
其余的数据分块有两种建议：一种是按照数据大小依次顺时针排列；另一种在12点钟的左边绘制第二大的分块，其余的分块按照逆时针排列，最小的分块放在底部。
让用户的视线焦点集中在上半部分，增强获取信息的速度。
环形图，又叫做甜甜圈图，是由两个及两个以上大小不一的饼图叠在一起，挖去中间的部分所构成的图形。
适用于展示分类的占比情况，与饼图用法相似，但环图相对于饼图空间的利用率更高，比如我们可以使用它的空心区域显示文本信息，比如标题等。
关于环图不适用分类过多的场景，否则阅读会将很差（如下图）。
可行的办法：一是将一些不重要的变量合并为“其他”，避免扇区超过5个；二是改用条形图或者表格。尤其是，如果你想让读者清楚的阅读到每一条数据，选用表格会更加直截了当。
下图中游戏公司的不同种类的游戏的销售量相近，所以不太适合使用环图，此时可以使用柱状图。
南丁格尔玫瑰图又名鸡冠花图、极坐标区域图，尽管外形很像饼图，但它是用半径来反映数值大小的（而饼图是以扇形的弧度来表示数据的）。
对比不同分类的大小，且各分类值差异不是太大时。由于半径和面积之间是平方的关系，视觉上，南丁格尔玫瑰图会将数据的比例夸大。
如下图展示一个班级男女同学的个数，这种场景下，使用饼图或者环形图比用南丁格尔玫瑰图更合适。
南丁格尔玫瑰图是将数值映射到半径上，而扇形的面积和半径是平方关系，因此视觉上看，数值的差异会被扩大。
因此，当数值差异较大、或者希望的比较数值大小时，推荐使用柱状图。
下面使用南丁格尔玫瑰图展示各个省份的人口数据，这种场景下使用玫瑰图不合适，原因是在玫瑰图中数值过小的分类会非常难以观察，推荐使用条形图（横向柱状图）。
散点图，又名点图、散布图、X-Y图，它是将所有的数据以点的形式展现在平面直角坐标系上的统计图表。它至少需要两个不同变量，一个沿x轴绘制，另一个沿y轴绘制，每个点在X、Y轴上都有一个确定的位置。
散点图适用于分析变量之间是否存在某种关系或相关性。其中，相关性包含正相关（两个变量值同时增加）、负相关（一个变量值增加另一个变量值下降）、不相关、线性相关、指数相关、U形相关等。
在观察两个变量之间的关系时，趋势线是非常有用的，趋势线的形状走向解释了两个变量之间的关系类型，还可以用来预测未来的值。但需要注意的是趋势线最可只能使用两条，以免干扰正常的数据的阅读。
散点图只有有足够多的数据点，并且数据之间有相关性时才能呈现很好的结果。如果一份数据只有极少的信息或者数据间没有相关性，那么绘制一个很空的散点图和不相关的散点图都是没有意义的。
如果数据包含不同系列，可以给不同系列使用不同的颜色，例如蓝色代表男性，红色代表女性，并增加图例标注出蓝色代表的含义。
帮助用户快速获取相关信息。但要注意，要避免数据分类过多的情况，过多的数据分类，会导致无法快速识别，失去可视化的意义和价值。
气泡图是显示变量之间相关性的一种图表，由笛卡尔坐标系（直角坐标系）和大小不一的圆组成，可以看作是散点图的变形。
与散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，在气泡图中，较大的气泡表示较大的值。可以通过气泡的位置分布和大小比例，来分析数据的规律。
一般而言，气泡图需要3个变量，其中2个决定了气泡在笛卡尔坐标系中的位置（即x，y轴上的值），另外一个则通过气泡的大小来表示。
当然，气泡图也可以容纳更多维的数据，例如用第4个变量决定气泡的颜色、透明度等。
特殊地，气泡图也可以用于二维数据，即y轴和气泡大小使用同一维度的数据（y轴和气泡大小的双视觉编码）。
这种情况下，相比于柱状图它能达到更美观的目的。例如，下图表示了2014年每个季度的销售额。x轴代表时间，y轴和气泡大小代表了销售业绩。
绘制气泡图时，需注意气泡的大小是映射到面积而不是半径或者直径绘制的。
以下图为例，如果两个数值是1：2的关系，如果按照半径1：2来绘制，那么实际的圆面积，将会是1：4的比例，这就夸大了数据之间的差异。
雷达又叫戴布拉图、蜘蛛网图。它是一种显示多变量数据的图形方法。通常从同一中心点开始等角度间隔地射出三个以上的轴，每个轴代表一个定量变量，各轴上的点依次连接成线或几何图形。
每个变量都有一个从中心向外发射的轴线，所有的轴之间的夹角相等，同时每个轴有相同的刻度，将轴到轴的刻度用网格线链接作为辅助元素，连接每个变量在其各自的轴线的数据点成一条多边形。
雷达图对于查看哪些变量具有相似的值、变量之间是否有异常值都很有用。雷达图表也可用于查看哪些变量在数据集内得分较高或较低，因此非常适合显示性能（见下图）。
同样，雷达图也常用于排名、评估、评论等数据的展示。
一个雷达图包含的多边形数量是有限的，如果有五个以上要评估的事物，无论是轮廓还是填充区域，都会产生覆盖和混乱，使得数据难以阅读。
如果变量过多，也会造成可读性下降，因为一个变量对应一个坐标轴，这样会使坐标轴过于密集，使图表给人感觉很复杂，所以最佳实践就是尽可能控制变量的数量使雷达图保持简单清晰。
漏斗图，形如“漏斗”，在开始和结束之间由N个流程环节组成。
漏斗图总是起始于100%的数量，并在各个环节依次减少，每个环节用一个梯形来表示，整体形如漏斗。与饼图一样，漏斗图呈现的也不是具体的数据，而是该数据相对于总数的占比、漏斗图不需要使用任何数据轴。
漏斗图适用于业务流程比较规范、周期长、环节多的单流程单向分析，通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。
其中，数据是要有序的，彼此之间有逻辑上的顺序关系，阶段最好大于3个。
漏斗图不适合没有逻辑关系的数据，换句话说，如果数据不构成“流程”，那么不能使用漏斗图。例如，想要展示不同游戏类型的销量对比，用漏斗图就是不合适的。
漏斗图作为一种统计图表，漏斗图的“长相”，本质上是由数据决定的。在传达数据时，漏斗图是通过“面积”表示的，对于人眼来说，面积的识别本来就不太容易。
如果我们在制作漏斗图时，再人为的改变漏斗中每一个梯形的高度，那么识别起来就十分困难。以下图为例，抹掉数字后，你几乎不可能知道第一层是第二层的三倍。
以上就是本篇文章的全部内容，关于可视化相关的知识还有很多没有涉及到，例如可视化图表的配色、商务仪表盘、以及其他的图表运用场景等等都还未讲到。以后有时间慢慢整理分享给大家，谢谢阅读！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
