“先有思想，后有设计”设计师自身应该逐步建立一套自己的设计体系，需要对设计方法论有专业的认识和理解。一直想收集整理日常说到的各类设计理论知识，也希望通过整理和总结能有新的收获，加深记忆。
格式塔心理学是视觉排版及设计中应用比较广泛，主要指人的眼脑作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体。格式塔的理论核心是整体决定部分的性质，部分依从于整体，人脑知觉到的东西要大于眼睛见到的东西。
古登堡法则是又称对角线平衡法则，由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：
1.第一视觉区(Primary Optical Area)：左上方，读者首先注意到的地方。
2.最终视觉区(Final Optical Area)：右下方，视觉流程的终点。
3.强闲置区(Strong Follow Area)：右上方，较少被注意到。
4.弱闲置区(Weak Follow Area)：左下方，最少被注意到。
通过古登堡法则我们知道用户的视觉中心往往在页面的左上方，而结束浏览时视线往往落在右下角，所以合理利用这个法则可以帮助用户更好地获取内容并采取行动。自上而下的界面设计，自左向右的界面设计，页面中通常将操作按钮放在右下角。
菲兹定律：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。意味着小而近的目标用户不需要花费太大的精力就能轻易触及或者关注，相反小而远的目标则需要花费用户更多的时间和注意力，菲兹定律阐述的是效率相关的问题
思考结论：1.必要时让按钮更大，2.让相关信息更近
希克定律：一个人面临的选择(n)越多，所需要作出决定(t)就越长。用数学公式表达为反应时间T=a+b log2（n）。在人机交互界面中选项越多，意味着用户作出决定的时间越长。如比起2个菜单，每个菜单有5项，用户会更快从有10项的1个菜单中做出选择。席克定律在产品应用中主要用于通过合理的选项及功能规划提高用户的决策及完成任务效率
应用场景：
1.分类编组，提高决策效率
2.过滤选项，隐藏/删除低频率功能选项
3.分布执行，提高流程转化率
米勒定律：头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。米勒定律在产品应用中主要在于合理的信息布局和信息处理可以提高用户对信息的获取效率和记忆难度。
应用场景：
1.控制数量，减少用户选择
2.信息分段，辅助用户记忆
3.流程分步，优化用户操作
4.信息排序，引导用户记忆
临近性原则：当对象离得太近的时候，意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框，用户会理解为按钮于文本框有关联性。换句话说当相互靠近的功能块是不相关的话，就说明交互设计可能是有问题的。
泰斯勒定律（复杂守恒定律):该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。
应用场景：
1.合理缩短用户使用路径，在设计中可有适度的简化缩短操作流程但是到一定的程度可能会影响整体的功能和价值。
2.将固有的复杂性从一个地方转移到另一个地方，例如搜索中历史记录，信息商品的收藏等功能，实际都利用了此定律。
3.将功能进行拆分，一次性无法降低复杂度的功能可以进行拆分。
奥卡姆剃刀原理：奥卡姆剃刀原理只承认确实存在的东西，认为那些空洞的普遍性的东西都是没有用的，应该剔除掉，概括起来就是“如非必要，勿增实体”实际上无论实体、视觉或认知上，多余的负担都会削弱表现效能，去除解决方案的杂质，让最后的设计会更严谨、更纯粹。在设计苹果产品的时候，乔布斯一直坚持认为：为了实现一个功能而造出一堆复杂的东西，没用，简单的才最好。Google专注于搜索，主页上也只有搜索，其他搜索引擎就没有做的这么彻底，这也是为什么Google用户量最多的原因之一。
防错原则：最早应用于汽车制造领域中，工程师新乡重夫（丰田精益生产庄家）于上世纪60年代，创造了这个理念。防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽，例如硬件设计上的 USB 插槽，酱油瓶口。防错原则有四项基本原则包括，轻松原则，简单原则，安全原则和自动原则。
状态可见原则：保持界面的状态可见，变化可见，内容可见。让用户知道发生了什么，在适当的时间内做出适当的反馈。 比如用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。
贴近场景原则：用用户的语言，用词，短语和用户熟悉的概念，而不是系统术语。遵循现实世界的惯例来呈现信息，功能操作符合用户的使用场景。进一步来说贴近场景，也是要求在设计的时候要考虑，产品面对的人群和人群所在的环境，比如，同一款产品在不同地区呈现形式需要考虑文化差异。不同属性的产品例如儿童教育和办公产品，需考虑使用人群的特性。
可控原则：操作应该是可逆的，可以支持“撤销”和“重试”，以此来离开“非预期” 的状态，简单来说就是不要让用户走进死胡同，提供出口和退路。例如微信发送消息可以撤回可重新编辑等。很多web端的表单，文章发布等都支持自动保存，很大程度上避免错误或者意外操作。
一致性原则：遵循平台的惯例。也就是，同一用语、功能、操作保持一致。
防错原则：核心观点是如何有效的在用户出错之前就尽量避免错误发生，在互联网产品中，比起回退修改错误信息或者操作更好的是，用设计防止这类问题发生。很多转账功能中输入数字后会显示千万等说明文字，用户输入卡号后会自动识别关联银行，避免用户出错。
1.限制操作范围和条件。例如很多手机登录等交互中默认设置手机号为11位避免了用户出错，提高了易用性。
2.对有风险的操作进行二次确认。
易取原则：尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。 很多产品搜索功能的关键词联想搜索，即使用户不能完全记住关键词也能轻松搜索。
1.让用户选择而不是输入，选择和输入的操作成本相差巨大，产品应给给用户提供选项，让用户可以直接选择，而不是自己输入，比如填写收货地址。
2.自动读取、记录信息、减少操作路径。在用户使用产品的过程中，会产生一些需要记忆的内容、或者操作路径，这个时候我们要避免用户记忆，把信息直接提取出来，送到用户手里
高效灵活原则：为大多数用户设计，兼容少部分特殊用户。允许用户进行频繁的操作，更加便捷灵活的代码和反馈。各大产品中常使用的搜索功能，提供历史搜索功能。微信朋友圈发布中选择可见/不可见人群时，提供上次选人记录。
1.提供快捷入口，例如支付宝的首页可以自主配置常用的小程序，微信下拉对话页面可以快捷进入历史小程序
2.方便用户重复操作，例如外卖平台中自动定位常用地址，订单中可以再来重复的一单等
3.预知用户操作缩短操作路径，例如截图后打开微信对话框会关联截图发送
简约原则：审美和简约设计，页面不应该包含无关紧要的信息，页面的每个额外信息都会降低主要内容的相对可见性。
容错原则：错误信息应该用语言表达（不要用代码），较准确地反应问题所在，并且提出一个建设性的解决方案。比如404。
人性化帮助原则：有必要提供帮助和文档。任何信息应容易去搜索，专注于用户的任务，列出具体的步骤来进行。帮助性提示最好的方式是：1、一次性提示；2、常驻提示；3；帮助文档。
通过这些方法的总结归纳，我发现其实很多原则原理我们在平时的设计中有意无意的总会用到，在实际工作中设计很大程度上是做选择，哪一种是对产品对用户最优的方案，有的设计师可以通过自己的经验作出选择，没有经验的可能需要多多理解这些原则原理，交互设计之父阿兰·库珀说过“除非有更好的选择，否则就遵从标准”只有反复的遵循使用标准才能建立自己的一套设计方法论，让工作更加得心应手。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
来源：站酷
作者：有鱼MUMU
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
“少即是多”是经常挂在嘴边的话题，在设计过程中，设计师们都会想尽一切办法去简化交互流程、组件元素及各种设计属性，让用户使用起来更简单。当产品简化到一定程度，就必须要面对其不可简化的复杂性。
诺曼曾说过 “复杂是世界的一部分，但它不应该令人困惑 ”，如果复杂性是合理的，我们应该学会如何去管理复杂，考虑好复杂的问题在流向用户后以何种方式处理，筛选控件就是用户自行处理复杂信息的方式之一，只要是符合用户行为做出的设计，将应有的复杂以筛选的形式呈现给用户，让其自行决定，用户反而会乐意接受。
筛选控件的使用频率非常高，本文根据笔者对各类筛选控件的拆解及自身经验进行分总结，整理了在移动端中常用筛选控件的类型、使用场景以及设计思路，帮助大家在设计中更好的选择适合自己产品的筛选控件。
一、现实生活中的筛选
二、筛选功能的重要性
三、常见的筛选类样式
四、筛选的几个维度
五、筛选功能设计准则
六、总结
在日常生活中，我们天天都在跟筛选打交道。设想一下，当你走进超市，在没有任何分类指示的情况下，看到琳琅满目的商品是否会不知所措，答案是肯定的，且不论超市规模大小、商品的多少，相信没有任何一个人愿意在不清楚的情况下花时间去找一个很可能不存在的商品，即便这点时间会很短。
道理还没说完，大家都感觉自己很懂，可依然逃脱不了如今在各种形形色色的应用中找不到自己需要的功能而苦恼，那么这些应用又是谁设计的呢？答案就是「大多数人」。
换言之，如果我们能通过标识牌、平面图指引（模糊查找），询问服务员、记忆指引（精准查找），就容易很多，这些指引路径就完全充当了筛选功能，至于通过什么方式，只能根据人们自身或现场条件自行选择，能满足自己的需求即可。在功能繁多、交互流程复杂的互联网产品中也是如此。
在我们设计筛选控件之前，需要清楚了解什么是筛选，东施效颦不是什么明智之举。筛选，即用户根据自身需求、通过一个或多个特定条件，在已有的内容中快速找到满足自己当前条件的信息，单独呈现的同时、并将未满足条件的信息暂时作隐藏处理，以便用户完成自己的目标需求。
筛选也可以称之为过滤器，是搜索框架的一部分。这里需要说明一点，筛选不同于搜索，它是系统结合用户提出的条件，对内容进行规则性的查找，准确的说，用户属于被动，筛选出的结果在产品侧「精准」、用户侧「模糊」；而搜索则是用户通过明确的目标主动进行精准查找，要么直接找到自己想要的结果、要么对结果不满意，搜索出的结果在产品侧「模糊」、用户侧需要「精准」。说直接点就是，搜索直接查找出结果、筛选只是缩小查找范围（并非绝对，也可以对搜索结果缩小范围）。
在电商应用中，如果有目标的用户更多使用的是搜索，那么没有目标的用户更多使用的则是系统推荐或商品分类，不管是哪种类型的用户，前面虽然已经进行过一次范围缩减，但下一步还是逃不掉要面对的海量商品，这时，不给用户提供选择上的便利，用户很可能因浏览商品耗时过长、选择性困难等原因扭头就走，即便离转化仅一步之遥，也无法避免用户流失的问题。
增加筛选功能就能很好解决这个困局，用户通过筛选、设置接近于目标需求的条件，缩短查找路径，就能从海量的商品信息中快速找到符合条件的内容，大大降低了用户的查找成本，节省了很多查找时间，用户体验得到很大程度的提升，由此可见，为什么要使用筛选，不言而喻。
1）系统定义筛选需求
方向性的筛选：用户通过系统提供的多种类型进行频道切换，还会存在多少子级，可定义为一级筛选。例如订单列表（待支付/待发货/待收货/待评价），优惠券（未使用/已使用/已过期）等，用户从已有的类型列表中选择自己所需。
2）用户自定义筛选需求
精细化筛选：当系统已提供方向性的筛选，用户依然可从分类筛选出的结果中进一步细化。例如针对单个类型的商品列表自定义价格区间、发货地、品牌...等，也可称之为二级次筛选，相比一级筛选，其筛选的结果会更精细化，也更接近于用户的真实需求。
（PS：系统定义筛选条件后，配合用户自定义二次筛选条件以及排序功能，则更容易满足用户需求）
Tab式筛选条件大部分在操作前、操作中、操作后基本都会一直显示，有横向Tab和纵向Tab两种，如新闻、视频类型的应用大多使用横向Tab，通过将不同的内容以大的方向、区块进行分类，便于用户随时切换、筛选出不同的内容；纵向Tab更多则是在电商类应用中出现，且会存在多个子级，例如我们在京东购买「鼠标」，则需要在tab分类中依次找到「电脑办公>外设产品>鼠标」进行筛选。
Tab类型主要以大的维度进行筛选，所筛选出的结果可能模糊且信息量极大，如果想要结果更加精准，则需配备其他类型的控件进行二次筛选。
操作中以蒙层的方式弹出，其他时候均为隐藏状态。弹窗类型的筛选最大的优点是占用空间小，仅需一个入口，能在有限的弹出空间中从多个维度展示筛选条件，用户选中或自定义对应的筛选项，即可快速筛选出自己想要的信息。
介于Tab式与弹窗式之间，筛选条件初始为隐藏状态并提供一个入口。点击后展开，期间不影响当前页面的任何其他操作且一直处于展示状态，需经过再次点击才会将筛选条件隐藏。
基于自定义筛选条件过多，为满足用户个性化需求，点击后会跳转到新页面操作多个条件进行筛选。相比前面提到的Tab、弹窗更为复杂，对筛选的要求较高。
高级筛选适合用在颗粒度很细的场景，为的是避开其他视觉元素的干扰，让用户更专注于当前页面较为复杂的筛选条件，降低因受其他因素影响而出错的情况。例如：在选择汽车时，需要对服务、价格、级别、排量...等各种情况作出非常细致的选择，这时用高级筛选就再合适不过。
筛选、排序组合方式算是商品列表中的标配了，尤其在空间资源有限的移动端设备中，能最大化的将多个控制条件一次性展示给用户，在筛选出结果后再使用排序功能，便于更快找到想要的商品。例如美团、饿了么将筛选与排序控件形成组合，极大的提高了用户筛选的效率。
单维度的筛选不管是设计还是操作都相对简单，无需操作确定/下一步按钮，触发筛选条件后会就会更新信息列表，大家最熟悉的订单系统（待支付、待发货、待收货...）即是单维度筛选。
另外，单维度具备短、明、快的特点，为方便用户识别，单个标签一般不超过5个文字，且语义明确，用户不用任何思考就能快速理解。
当产品中的属性过多，使用单维度筛选不仅会降低筛选结果的精准度，还可能会导致用户因反复/重复无用的操作而产生挫败感，已无法满足用户的需求。这时，需采用多维度筛选帮助用户缩小查找范围，让其快速找到符合自己需求的内容。
多维度筛选条件一般以按钮（单选/多选）、输入框为主，有些还会以滑块来控制数据范围。设定好筛选条件需通过重置、确认操作按钮，用来清空筛选条件或进入下一步。在移动端，因屏幕空间有限，一级筛选数量最好不要超过9个，如果太多，建议进行整合或并入二级筛选。
在多级筛选控件中，可以把当前筛选条件的上一级看成是筛选分类菜单，每个等级中可包含一个或多个单维度/多维度的筛选条件，移动端最多不超过3个等级。
从表面看，多级筛选与多维度筛选其本质是一样的，但多级筛选会存在下一级或再下一级，而多维度会将所有筛选条件平铺在空间中。当单维度、多维度筛选还是无法满足用户需求，多等级就能作为最好的延伸。
在设计筛选之前，需要思考用户为什么要使用筛选、在什么样的场景下使用筛选、以及如何满足用户的心理预期等，有了清晰的用户需求，设计出来的筛选才能更好的帮助用户满足其需求。
以「饿了么」用户点餐为例，使用点餐服务的用户类型虽然很多，不过主力还是来自于办公室白领、宅男/女这两大用户群体，有目标的用户会从搜索、收藏、订单记录等入口直接去购买，但绝大多数用户因长期点外卖的原因，“吃什么”就成了最大的问题，这时如果用户还要“吃”，就必须得使用筛选功能，从Tab分类（模糊）到弹窗式筛选（精准）再配合排序功能满足自己的点餐需求，得出结论：
1）一群不知道“吃什么”的白领、宅男/女用户；
2）需要使用筛选功能解决自己“吃什么”的问题；
3）问题很快得到解决后，对结果及使用体验非常满意。
上面的案例可以看出，用户想要在海量的信息中找到自身所需，从表面上看，最直接、真实的需求就是找到满意的商品去下单。站在产品的角度并非如此，最应该解决的应该是效率的问题，这才是筛选的终极目标，不管用户花多长时间，笔者相信都能找到想要的，但所花费的时间成本越少，满意度就会越高，其产品的可信度、使用粘性、用户体验也随之提升。
筛选并非千篇一律，不要一上场就来一波大众化的筛选条件，很多APP首页设计就是最好的例子，什么都不考虑，直接导航栏+轮播图+金刚区+内容推荐...传统的一套流程走下来，结果可想而知。
设计筛选功能时，不同类型的产品需要根据其产品定位、用户目标以及使用场景来定义筛选条件，用户需求是用来设定筛选条件范围的决定因素。例如：购物类产品需要结合商品的销量、评价、价格及知名度等，而新闻类产品侧重于用户偏好、点赞量、热度值来提供筛选，方便用户快速找到感兴趣的内容。
在满足上述两个条件后也不能将筛选项一股脑的挨个排出来，即便是在同一个页面内，也需要结合当前内容的属性对筛选条件进行优先级排序，将用户高频使用的条件按先后顺序依次排列，不重要的也可将其隐藏于某个入口。
以淘宝为例，在「手机」商品列表，筛选条件中首先看到的是品牌，其次是内存、容量...，我相信很少人不在乎手机品牌吧；而在「钢钉」列表中，依次是价格排序、销量...，品牌条件隐藏在了高级筛选中，试问，如果是你购买钉子这种实用性的商品，是在乎价格、还是品牌呢？
筛选功能旨在满足用户查找需求，通过缩短用户选择商品的范围，节约查找时间，快速将符合条件的信息呈现出来，并让用户在这一过程中产生愉悦的使用体验，以发挥产品的最大价值，从而增强用户的使用粘性。
至于在设计中该使用何种筛选控件则取决于用户需求和使用场景，设定符合需求的筛选维度及条件，且根据内容属性做灵活变动即可，切记筛选的核心需求是通过简单易用的方式来帮助用户提高操作效率。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
整个报告分两个部分，
一部分是调研概述，主要描述调研是如何进行的，包含：用户方法阐述，调研对象说明，用户画像等，简单清晰的告诉别人你数据是如何获取的，增加后期问题及数据阐述的科学性。（还有一部分，就是关于调研涉及人员，可以在合适的时机带一下是UED全员协作完成的整个过程的。）
另一部分是调研结论，我的描述思路是：总-分-总，先描述总结论，让观看报告的人对整体结论有个初步了解，然后详细描述各模块分结论，最后提出各模块共性问题。
结论部分是整个报告的重点，所以前面的概述就简单介绍清楚就好了，不需要占太多篇幅。
调研流程，确定标准，是汇报，也是邀功，调研本身就是个繁琐的过程，我们把过程直观的呈现出来，让老板知道我们整个调研过程，前前后后做了哪些准备。付出了哪些努力，体现工作量的同时，也能体现我们的专业性，但是不是记流水账，得有总结。
我把整个路程大体分了3个部分，第一个部分是调研前的准备，第二个部分是调研，第三个部分结果阐述。结果汇报，后期工作计划，汇报很重要，调研做得再好，你的结果无法呈现，问题就没办法结论，那就只会停留在发现结论。
评估纬度是为了阐述我们从哪些纬度去收集答案的，想要验证什么问题。
由于大部分人对调研都只是停留在问卷调查的层面，所以对样本量的选择有不理解，可用性测试主要是为了观察用户操作路径及反馈，所以样本量不需要太大，这个可以简单的解释下是如何挑选用户的。
数据整理也是汇报的一部分，一方面，材料佐证我们做过的努力和准备，另一方面，数据存档。
我们整个调研采用了录音与录音相结合，录音是为了便于后期多人协作帮忙整理问题，录屏是记录用户操作路径，收集用户使用过程中的卡顿，去挖掘卡顿原因，这是是我们做可用性测试的主要目的，这也是跟问卷调研最主要的差异。
在写报告的过程中，我一直在想关于整体满意度的结论，是放在第一部分还是第二部分，但是鉴于第二部分主要描述问题，所以思虑再三，还是把他放到了第一部分。
我们拿到各模块的数据后，要怎么用着很关键，单个零散的数据是体现不出问题的，只有对比着看才能看出问题。
通过数据对比我们明显能发现，付费用户对产品的整体要求要比增值服务的要求高得多，毕竟不要钱的，好不好用无所谓，好用我就用，不要用我就不用。但是如果是用户花钱了的，那他就需要考虑，我获取到的服务和花的钱是否成正比，这也就间接确定了我们后面问题处理的优先级。
这里建议做个中场页。
前面说过，问题描述采用的总-分-总的节奏，所以最开始描述了一下我们收集到的所有问题的概述，包含，总共多少个问题，已经分类类型的分类占比。
这里分享一个问题整理的表格，表格跟PPT的作用不一样，PPT是为了汇报成果，获取支持，表格是为了后续跟进落地，解决问题。
当然，先把问题整理出来也是为了更好的输出PPT。
共享文档可以让更多人清晰的看到问题，因为汇报的效果比较好，老板给了明确支持，所以汇报后我们将表格发给了各个产品，与设计师配合，认领问题，给出优先级和排期计划，整个过程推进的很顺利。
分结论部分，主要通过用户体验地图去描述用户路径，直观阐述用户使用过程中的情绪和痛点，右边整理出来了需要重点关注的一些点。
用户体验地图主要描述的是用户发现，不一定是问题，属于启发类，可以为后期优化方案的输出提供方向引导。
问题整理则是明确的已知问题描述。
各模块可以根据实际情况去描述各自的问题，这里就挑了几个典型的模块举例了一下，就不一一阐述了。
再来说一下，分结论讲完之后，整理的共性问题。先说问题，再说涉及的模块，体现问题的严重性。
到此，整个PPT就结束了，汇报完成后，老板就开始给各业务线下达任务了，就又回到了表格上，我们把之前的问题以界面纬度进行整理，跟产品确认优先级和排期计划，并与老板就排期计划进行了确认，然后责任到人，目前第一轮优化方案已经在陆续落地中，整个发现问题到推进落地的过程，还是比较顺利的，
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
最近几年以来，大家能看到B端设计趋势已经越来越火热，在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计，让设计出来的图表高大上，符合业务需求，让业务方和总监对你赞不绝口，本文就必须看完和收藏了，因为实在是太实用！
应用设计越来越依赖数据驱动，对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表，但我们其实可以通过遵循一些简单的规则来改变这个情况。
选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。
当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。
删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值B比D大3倍多，而实际上，两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。
对于折线图，总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势，因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。
折线图是由线连接的“标记”组成，通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的，并且对于较短的时间间隔非常有效，但当数据更新不频繁时，这可能会导致混淆。
例如: 使用折线图来代表年度收入，如果数据是每月更新的，则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值，而在特定时间实际的收入数字是未知的，所以可能会产生误会。在这种情况下，使用垂直条形图可能是一个更好的选择。
平滑的折线图可能在视觉上很好看，但它们错误地反映了背后的实际数据，而且过粗的线会模糊真正的“标记”位置。
通常，为了节省可视化空间，当有两个具有相同度量但大小不同的数据系列时，可能倾向于使用双轴图。但这些图表不仅难以阅读，而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例，只是浏览图表，然后就得出了错误的结论。
饼状图是最流行的也是经常被误用的图表之一。在大多数情况下，条形图是更好的选择。但如果你决定做一个饼状图，有2个比较好的建议:
1）不要超过5-7片，保持简单
2）可以将额外的最小段分组到“其他”切片
如果没有适当的标签，无论你的图表有多好，它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。
将数据放在切片上可能会导致多个问题，在可读性问题上和窄切片上都会有挑战。相反，添加黑色标签能清晰的链接到每个部分。
在确定饼片秩序时，有几种常用的方法:
1）将最大的切片放在12点的位置，然后将下一片切片顺时针降序排列
2）把最大的切片放在12点的位置，第二大的放在顺时针相邻位置，第三大的放在11点的位置，其余的切片按顺时针降序排列
同样的建议也适用于其他许多图表。不要默认采用字母排序，将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图)，以确保最重要的数值占据最突出的空间，减少眼球运动和阅读图表所需的时间。
饼图通常不是最容易阅读的图，因为比较相似的值非常困难。当我们把中间部分去掉，创建一个圆圈图表时，我们腾出了空间来显示额外的信息，但这样牺牲了清晰度，极端情况下，图表就会变得毫无用处。
不必要的造型不仅会分散注意力，还可能导致对数据的误解和用户的错误印象。你应该避免:
1）3D元素，明暗面
2）阴影、渐变和其他扭曲的多彩色
3）斑马图案，过多的网格线
4）过度装饰，斜体，粗体或衬线字体
颜色是有效的数据可视化的组成部分，在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性，所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合，可以创建一个连续的颜色集。
发散调色板是两个连续调色板的组合，中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。
看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以帮助你生成各种调色板。
根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。
1）在调色板中使用不同的饱和度和亮度
2）把现有配色去色然后检查对比度和可读性。
确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。
1）选择易读的字体，避免衬线和装饰过度的字体
2）避免使用斜体、粗体和全部大写
3）确保与背景有高对比度
4）不要旋转文字
这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。
如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。
帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
当设计师被迫待在家里时，终于能有时间去反思现有的设计并重新创造。无聊是艺术家最大的敌人，他们会尽可能地打破困局。
对我们来说，2021年相当困难。世界上最长寿的猫庆祝了它的34岁生日，这可能是发生的唯一一件好事，顺便说一下，你会在文末看到这只可爱的小猫照片。
那么，2022年的UI/UX设计趋势是什么呢？看看现在的情况，我们已经可以预测未来的设计趋势，就像我们对2021年所做的预测一样（回头看非常准确）。
在本文中，我们将发现：
3D视觉设计师的内卷将会越来越严重
数据可视化的工作将变得越来越重要
服务的移动化还需要做出更多努力
scrollytelling 技术会越来越流行
旧的滚动是无聊的。如果你想吸引注意力，你就需要实现滚动叙事（scrollytelling）。（彩云注：这个技术的核心在于边滚动页面边讲故事）
《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。
它是一种叙事形式，可以在网页和APP上呈现。想象一下，在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地，你会想看到这个故事的结局。它就像一个游戏，带你穿越迷宫。虽然你不能影响它的进程，但却让你感觉自己能参与其中。
2022年，Scrollytelling将会出现在你看到的每一个流行网站上。
另一方面，scrolllytelling让用户真正去阅读内容。你可以用动态文本让他们产生兴趣，比如谷歌的网站 (https://www.google.com/search/howsearchworks/)。他们的团队知道如何让信息看起来更好:
Scrollytelling在用户向下滚动时被激活，因此得名。没有点击，没有选择的麻烦，没有弹出窗口。你似乎停留在一个地方，但通过滚动，把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果，还需要认真思考一个你想要讲述的故事情节。
所以，最好的网站不可能在2天内建成，需要更多的时间去打磨。
IAmBinadam令人惊艳的叙述设计
滚动叙事的项目通常需要大量的时间和精力。不过，这样做的结果是值得的。页面变成“活的”，每一秒都有新的事情发生，所以在阅读时很难感到无聊。
那么移动端APP呢? Pure是一款约会应用（彩云注，这个应用在app store可以搜到，推荐大家安装一个体验一下，非广告），它创造了一种我称之为“tappytelling”的故事(当你第一次点击并打开应用时，它就会被激活):
Scrollytelling是为用户而创建的，用户很喜欢它，不需要到其他页面去阅读整个故事。相反，网页设计的整个故事都是事先考虑好的，并尽可能以最有趣的方式设计出来。
如何在2022年做出一个还不错的企业网站？你不会想告诉用户你是“XX领域公认的领导者，该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。
最好不要用形容词，而是用事实来说明:你有多少分支机构，在哪些城市，谁是你的客户，以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据，你需要让它不仅简单，而且有趣。
数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事（Scrollytelling）紧密结合。以下是IAmBinadam展示数据的方式:
通过去除数据集的复杂性，使信息更容易让读者感知。
不同级别的数据具有不同的大小，这样用户知道应该先从哪里查看
读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大，那些干净整洁的数字带来的正面影响更大。
有些图表乍一看甚至不像图表，这使得它们更加能被注意到
还有一种现象叫做“新冠后遗症”。这是Covid对公司及其员工的长期影响。根据英国国家统计局的数据，2018年，压力和焦虑的平均得分约为2.7/10。自新冠疫情发生以来，得分已升至4.0/10，很少低于这一水平。同样因为大流行，在过去两年里工作量增加了4个小时。
人们压力太大，卷的太辛苦，以至于不愿去看复杂的数据。
设计师做好数据可视化，以保持人们的注意力。记住，复杂的信息通常被忽略，因为读者试图节省他们的时间，更有可能使用滚动按钮。
Illustration by Mona Chalabi
以下是我们推荐的一些表示数据的方式
1）图表和曲线图
2）插图
3）静态信息图
4）互动信息图
Illustration by Ink Factory
一个好的图表，或者任何其他形式的数据可视化，都应该具有在Edward Tufte的“定量信息的可视化显示”中描述的特征。在他的书中，Tufte通过图表解释了好图表的3个原则：
1）展示数据的图形元素与数值总数的比值应趋向于1。简单地说，应该删除一切不必要的元素，保持整洁。
2）充分利用好画面空间。也就是说，需要将数据编排的更紧密
Graph by Hootsuite
3）客观地描述数据。不要使用夸张的图表，可视化数据可以看起来很酷，但真实永远是更重要的。
根据We Are Social的数据，2021年有52.2亿人使用手机，约占世界人口的66%。自2020年1月以来，手机用户数量增长了1.8%(9300万)，而手机联网总数量增长了7200万(0.9%)，到2021年初达到80.2亿。
过去一年，社交媒体用户的数量增长了13%以上。到2021年初，社交网络上已有近5亿新用户注册。根据App Annie的数据，Android用户每天花在手机上的时间超过4小时。2020年，安卓用户上网时长超过3.5万亿小时。
令人印象深刻的数字，是吗？似乎到2022年，为产品做一个APP将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用？有以下几点可供评估：
1）用户主要通过移动设备访问你的网站这是你应该了解的重要数据。
客户和你在一起的时间越长，你就有越多的机会去吸引他们，了解他们的习惯，并给他们想要的东西。（彩云注：这就是为什么各大厂之间都在拼命抢占用户的在线时长。）
2）帮助内部业务流程更加有效。
如果你想要提高员工的工作效率、改进工作流程或增加利润，那么就制作一个可以帮助管理业务流程的移动应用。
如今，像这样的手机应用使企业能够执行越来越复杂和多样化的任务，加快日常重复操作和文档管理。
3）实现一些网站上没有的新功能。
如果你认为APP能为用户打开新的触点，并让用户体验更加友好，那么它就值得考虑开发。问问自己的APP能提供什么新的商业机会？例如，随着疫情的蔓延，许多人开始用上健身APP在家里锻炼。
4）竞争对手做的情况。
要了解竞争对手在做什么，他们是否有APP，能做什么，以及他们是否真的对用户有用。
查看App Store和谷歌Play的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要，那么你就容易被甩在后面。
5）复购率。
一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了，给他们发送一个通知就能完成，成本更低。
在正确的时间提供的报价越有吸引力，人们购买的可能性就越大。
6）促销工具。
有了应用，你就不需要花钱设计和制作实体卡，客户也不需要随身带卡。将促销计划整合到APP，并分享有用的促销信息。
开发手机网站比开发手机应用需要更少的工作量，这反过来可以降低整体推广成本。
这部分是由于响应式设计的出现，它允许你根据打开网站的设备屏幕来调整网站。至于APP，它们必须为许多移动平台单独编写:Android、IOS、Windows等。
一些设计师认为“前端驱动的网络体验”会是2022年的一个好机会，我非常同意!（彩云注：在国内，现在开发小程序的肯定越来越多了。）
我们一开始并没有将其放在首位，因为这并不是一个新的趋势，在很久以前设计师们就已经设计了很多3D图像和动画了。
Cardi B rhymes with 3D
3D技术已经在过去流行了很多年，但它不会很快消失。此外，我们预测3D图形将变得更加多样化和包容。
在过去的几年里，3D艺术和动画已经出现在各种UI设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。
3D当然应该成为2022年最热门的趋势和预测之一，因为与经典动画相比，逼真的3D形状结合动画总是引人注目的。
“从技术上讲，通过3D更容易传达更多内容，因为它比平面图片更接近我们的感知。3D插图更有深度，信息量更大，也更具互动性。"
许多设计师将3D对象无缝地“安置”在2D空间中。它允许创建更有趣的组合，也作为一个优秀的工作方法蕴藏着巨大的潜力。
乌克兰政府网站用3D手模拟了黑客帝国
注意一点：在整合3D图形等重量级内容之前，确保你的应用性能是OK的，能够快速加载所有元素。
Meta的logo既不是2D也不是3D。或者两者兼而有之?这就是即将到来的2022年的莫比乌斯带和薛定谔的猫。
Meta logo的变化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：这个概念在去年简直不要太火，未来几年肯定还会是一个大的趋势，设计师也需要保持关注。跟着趋势走，易于放大自身价值。）
越来越多的公司在网站和移动应用中使用动画，以提高用户的沉浸感和体验，使内容更有趣。
动画是2022年重要的网页设计趋势。2022年，如果没有它，你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和3D动画的结合，2D动画和3D动画的结合。设计师这样做是为了获得不同寻常的风格解决方案，以及提高最终产品的质量。
2022年，动画设计将是品牌市场定位的重要组成部分，想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长，实现新想法的机会也在增加。
1）讲故事动画。
可以通过在界面和用户之间建立情感联系来传达信息。
加载动画Yoichi Kobayashi
2）更有趣的加载。
用户不愿意等待，除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力，还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。
3）光标效果。
用户可以精确地观察光标所在的位置。通过添加智能互动动画，对这个光标作出反应来探索网站。这种效果在21世纪初非常流行。如你所知，流行趋势往往每20年就会重演一次。
4）动态排版
你有没有想过让字母跳舞?
据Statista统计，2020年全球动画市场达到了2700亿美元。趋势是视频，而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问，动画插图的优势是它们非常灵活和多样化。
宝马历史动画
这样的作品通常用于两种情况:
1）用于解释视频
2）电商广告
动画解说的趋势出现在几年前，解说视频清楚地显示点击的位置或公司的项目是关于什么的。
在招聘或商业视频中，用户更喜欢看画出来的人物，而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣，就像活着的人一样。
微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果:它们显示发生了什么，将导致什么操作，下一步需要做什么。
图片来源awwards
动画交互将为你的设计注入活力，并有助于保持用户粘性。关注每一个细节是设计师工作的关键，因为设计中的所有元素都可以带来积极的用户体验。
重要的是要达到元素的和谐，而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色，它们为界面元素增强价值。
微交互有助于页面导航，解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能，以实现特定的行为。
2022年，在线品牌面临着新的挑战，需寻求新的解决方案，其中之一就是动画logo设计。
图片来源Toridori
动画logo主要有以下几点营销优势:
1）吸引注意力。这意味着它们有助于提高品牌知名度。
2）有助于提高SEO。谷歌更倾向于动态内容，带有动态图形的页面更容易吸引用户。
3）在移动端看起来更好。丝滑的动画看起来比静态的logo更有趣。
4）最重要的是展示了历史。静态logo背后的想法正在动画中发展。由于这一点，在几秒钟内，你可以展示品牌的使命，甚至它的价值!
一家洗衣机[公司]的标志(https://www.schulthess.ch/)
现在有很多设计模板，可以很容易地用字体制作一个动画logo:
图片来源Shabello, Bobby Voeten
记住，设计趋势总是在变化的，但是设计的意义不会变。如果你不能深刻理解这一点，那么任何设计趋势的文章不能帮你做好设计。
这是前面提到过的世界上最老的猫。她今年34岁(相当于人的160岁)
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
很多时候既让初入B端行业的设计师感到一丝丝迷茫，因为不同的B端系统也就意味着，它的业务一定就会有所不同。比如CRM系统当中的客户生命周期管理，OA的办公自动化，特定的行业往往都会蕴含着不同的业务类型
而作为设计师，如果只了解设计模式、设计组件，不去分析设计最后的业务诉求，其实是没有任何意义。因此想要通过B端设计指南，和大家一起聊聊B端业务，以及背后所牵涉的具体逻辑。今天就简单聊聊最为常见的 审批
开始之前，还得再多说两句，因为一个系统当中，业务本身就不是独立存在的。因此在去讲述审批的过程，一定会涉及到 流程、权限、表单配置 等一些基础内容，建议可以先做初步了解，再结合文章进行阅读
虽然在说起源，其实我更想给大家讲清楚 审批在B端系统 当中的重要性
审批字面意思是审查并加以批示，通常指对 下级呈报上级的公文进行审查批示，报请上级审批
现如今，任何事情一定都会有分工协作，而使用审批的好处是可以
规范员工行为
提高企业运转效率
系统存档便于溯源
保护环境（毕竟减少了纸张浪费）
当然在不同的阶段的公司，对于审批的诉求是不太一样
小公司：因为审批的决策路径短、流程上都非常简单，但因此就会缺乏规范保障。比如在外出办公时，看似只需要与老板当面进行口头上的沟通即可，但是在外出出现意外时，由于缺乏外出办公的相关证据，员工的权益则很难得到保障
大公司：因为审批的决策路径长，流程上都极其复杂，因此会在多人协作下完成整个流程审批。比如想要申请购买办公用品时，会由 行政、Leader、财务 层层审批，从提交审批到最终落实可能需要十天半个月，但是这样的流程，能够确保企业在清查财务状况时，更加有理有据
审批的演变，就是从最开始的规章制度而来。比如在早期去政务机构办理各种业务时，会让你去填写各种纸质表单。在审核过程中，则需要有各个机关的盖章及批准，而这种形式正是政府对于普通市民的自上而下的管理方式
审批其实是整个B端系统的灵魂，因为在B端系统当中，企业想要使用系统的一大痛点便是 核心的管控
因此你会发现，只要一个独立的系统，一定会存在独立的审批模块。因为B端管理系统当中企业的最终目的，是管理手中的人，而审批便是最为常见的一种手段
审批在如今的B端系统当中，可以理解为它是一组消息，在这一组消息当中会有：“具体的文本、对应的附件、以及照片视频”这些内容都是辅佐 申请人 去讲诉你需要申请的内容
比如我们在申请病假时，往往需要出示 三甲医院所开设的证明，对于这个证明，如何在表单当中出现，你会发现最为常见的便是拍摄证明图片，然后上传到表单当中（这个与字段属性紧密相连，我就不做不过介绍）
审批的这组消息还会有些特殊，因为它非常重要，你可以理解为它是一则“加急消息”会提醒审批人快速的进行处理，同时会告知相关的参与人（处理人、抄送人）审批的进度、并且无论成功与否，都会在系统当中留下 足迹，因此它起到了 “追踪、通知、留存” 三个非常重要的作用，我们首先对于审批进行一个基础的拆解
如果把审批单独拿出来，你会发现审批会牵涉到 发起人、处理人、抄送人
审批的发起人，也是整个审批流程的归属人，他最关心整个审批进展
因为在发起人的角度，创建完审批事项后，可能还需要进入审批页面，完善 后续附加信息、及时了解审批状态、催促审批人的审核、处理驳回意见 等等，因此站在发起人的角度，审批需要尽可能详细的展示 当前审批的状态、完整的审批流程、驳回信息的快速操作、成功信息的必要通知
审批的处理人主要在审批过程做出决策，因此他更在乎的是审批申请内容的信息。比如 审批的信息内容、直接的审批操作、多条审批的管理
当然，在一些大型的集团企业当中，会将审批分为审批「直接处理人」与「间接处理人」（后文以 直处人、间处人 简称）
「直处人」作为审批的第一处理人，也就意味着他的意见至关重要，如果「直处人」通过过后，相对而言整条审批的通过几率会大大增加。通常「直处人」是作为申请人的直系领导居多，因此多数情况下可以理解为直属领导进行 “把关”
「间处人」作为审批的后续处理人，同样在流程当中也十分重要。但在有些情况下，比如一些偏平化管理的企业，「间处人」更多像是“权利”的象征，因为权利已经下放给「直处人」，而「间处人」起到知晓审批以及企业的规章制度要求
审批抄送人主要起到通知对应角色的作用，因为一条审批的出现，会造成诸多影响，假设今天你需要申请事假，如何通知同部门的其他成员呢？
发送即时消息，显得过于简单；每个打电话，又有些麻烦；发送企业邮件，又怕他们没有看到
这时候抄送人会显得尤为关键
通常抄送会有企业流程上管理员配置的固定抄送人，以及发起人选择的自行抄送人 两种类型
固定抄送人 角色通常与管理员配置整个流程有关，他是角色当中 管理员 所配置的重要通知人，比如今天你的请假信息，肯定会告知行政，像这类默认的通知流程，则可以将其设为固定抄送人
自行选择抄送人 则是提供给发起人自行选择，该条审批可能会影响到的相关人群。比如就是发送给同事，让他们知晓今天你不在岗位上，因此自行选择可以增加审批抄送的灵活性
这里肯定会有很多读者会问，我选择抄送人与我发消息给同事，有什么区别么？
看似完全相同，实则有明确的区分
通过消息，将审批内容传达，本质上是你自行将内容发送给对方，对方会对于你这个消息的真实性会产生疑问？你是否通知了
而选择抄送，更为权威，更能体现你这条消息的真实性，并且整个流程都已经由领导进行批准，因此不会存在太大问题
其实审批的本质就是一组消息，而这一组消息当中，申请人 通过 表单配置 去获取需要补充的消息内容，而流程会根据企业所配置的流程方式将这一组消息进行合并转发给对应人，而审批人则需要对这一组消息进行回复“通过、驳回” 来让整个流程继续延续
审批当中，最主要的便是流程。因为你可以通过查看流程图，去了解整个企业的组织架构、规章制度、员工管理方式
串行审批主要是指当一个审核节点通过后，才能进入下一个审核节点。如果节点驳回，则可以根据业务实际需要，配置驳回的返回路径，会有：拨回到发起人、驳回到上一个节点、或驳回之前任意一个节点 重新审批
并行审批是指一个审批节点存在多个角色同时审批，这里会存在两种情况
任何一个人审批通过，则可以进入下个节点，这也就是系统当中常说的 「或签」
所有审批人员通过，才能进入下个节点，这也是系统当中常说的 「会签」
条件审批就是将企业当中的规章制度映射到实际的项目当中，通常就是某个审批内容会根据 金额多少、实际数量 等 进而选择哪个角色进行审批
比如销售人员在申请一个合同审批时，会根据合同金额的不同，审批人也会有所差异
当金额小于8000时，合同直接由财务专员进行审批，进而让流程进行快速审批
当金额大于8000时，合同会由销售主管进行审批，让销售主管能够掌握企业的重要合同
通过发起人选定一个审批事项后，将自主选择后续的审批内容，进而实现审批的后续选择。这是一种较为灵活的审批流程，当企业尚未形成标准化流程时，自主的核心就是当发起人发起一个审批，提交时需要自行选择下一个环节的审批人。而下一个环节的审批人审批通过后，可以选择继续流转到再下一个人去审批，或者结束这个流程
审批的背后，它映射的其实是企业的一条条管理制度，而它的设计一定是要满足企业的实际需求。因为你负责的产品不是为某一家企业提供的服务（定制化产品），并且企业管理制度的变动其实是家常便饭，你需要去考虑一个通用的解决方案，这个解决方案拆解下来会分为三个内容，分别是：申请表单、流程配置、更多配置 进行讲解
审批表单是最为一个“简单”的用户可配置化表单，因为现如今大多数B端产品都是以 SaaS 作为基础（如果是定制化产品 它的审批内容、流程也不会是固定不变的）也就意味着审批表单需要为企业提供“DIY”的方式，通过表单提供不同的字段类型，去构建审批的实际要求
比如在一个选择请假时，年假、事假、病假、婚假 等的要求都会有所不同
如何知道他们的差别，其实可以根据《劳动法》的相关规定 以及 各个其实的实际公司制度，进行个性化的处理
在申请婚假时，需要上传你的结婚证，以证明其真实性；在病假时，需要有3甲医院的病情证明；在年假时，则需要有你的剩余年假天数。而这些特殊诉求，其实都需要在表单当中进行各种定制化表单
当然这只是极为常见的 请假 场景，而在实际业务当中的复杂场景（更多需要将 审批与其他系统关联）一个简单的表单是没有办法进行满足
这也是很多企业会发现，无论是飞书、钉钉、企业微信，都没有办法满足其实际流程需求。又没有办法改变自身流程，只能够自研、定制化 产品，这也是为什么即便各行各业都有了初具规模的 SaaS 产品，但是还是会有很多企业愿意自行研发软件
企业可以根据自身的系统流程，在流程配置当中去定制特定的流程。在这个页面的设计上，需要注意不同参与人的状态，以及复杂流程时如何才能够进行清晰的阅读，因此增加了 颜色区分（发起人、审批人、抄送人）+ 视图缩放 功能
颜色自然不必多说，整个系统需要统一，因此不能够只考虑在管理后台的颜色，是一定要在详情页当中也能过保证颜色的一致。这样才能够满足实际业务所需
视图缩放只是小小提一下，常见的视图缩放会放在左侧，至于为什么，自己稍稍揣摩揣摩
由于流程配置的属性页面会涉及很多表单的复杂逻辑，这个只能够留在我的 训练营的课程 当中进行拆解，这里就不过多赘述
更多配置项则是审批在实际情况下的特殊处理，比如：申请人修改审批的具体时间、能够将审批转发给其他人、出现多次相同的审批人是否去重 等等... 其实就是将审批的设计方案进行“赋能”，去满足更多企业在实际场景当中的需求，感兴趣的同学可以去 钉钉、飞书 了解详情
审批，核心还是提高企业运转效率，如果在审批之间，还需要不同角色私下反复沟通，本质上就失去了审批的意义。而审批本身，就是一个典型的B端产品 从场景到需求，进而研发功能，最后又回归场景，你设计的好与坏，落地到真实的场景当中，试试便知
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
用户体验（User Experience，简称UE/UX）这个词是在上世纪90年代中期，由用户体验设计师 唐纳德·诺曼（Donald Norman）所提出和推广。
定义：用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。
可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品用户体验的核心，不好的可用性会导致用户放弃使用产品。
可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。
指的是用户学习如何与产品进行交互，以实现目标所花费的时间和精力，即用户能否在初次使用产品时完成简单的任务或实现用户目标。
用户在使用产品一段时间后，能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例，用户能否快速的下载想要的东西，在同一系列中，可以快速下载更多的相关内容。
我们常说互联网是有记忆的，好的产品体验是帮助用户去记忆。用户在体验中，要对一些有意识、无意识的行为进行记忆是一个比较大的负担，如果在一些环节通过系统能帮用户记录，会降低用户的负担。比如在搜索、历史记录、浏览记录等。
用户在使用产品时，发生错误后，能否快速帮助用户识别和纠正错误，帮助用户从错误中恢复的能力。如常见的注册登录，当用户属于邮箱格式不对的时候，给出提示，并且告知错在哪里。如果提示语只是："请输入正确的邮箱" 用户可能会疑惑，错在哪里。
满意度指的是用户与设计互动产生的愉悦程度，可以是用户使用产品时流畅的交互和优秀的视觉设计，也可以是用户在产品中得到的满足感。比如sir语音交互，王者荣耀等级（满足感）
产品能否提供用户在完成任务时所需要用到的基本功能，例如P图类软件，用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。
在满足实用性的基础上 针对用户提供不同场景下的功能定制，如美图秀秀，在提供图片美化的同时，针对用户不同的使用场景还提供视频剪辑、视频美容等功能。
用户能够预测到下一步操作或者整个流程的交互，将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。
可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。
物理功能可见性是基于对象的物理外观。在视觉上，这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件，最常使用的就是播放/暂停，上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中，这就是功能可见性。
当信息或者列表过多时区分状态的展示，将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来，会极大地破坏易用性，因为人们将不得不进入一个个邮件详情页当中进行确认，才能获取到原本由徽标提供的状态信息，这样的互动非常低效且乏味。
当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤，后面还有多少步骤，完整清晰的流程展示。如果将这些信息隐藏起来，用户会困惑当前进行到哪一步，接下来还有多少步骤。
强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素（如滚动条、命令按钮和图标等）的设计必须能够为用户提供足够清楚的建议，让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么，以及如何与它们进行交互行为（点击、长按、滑动 等）
给用户及时、恰当的反馈，是体验设计中非常重要的一项原则；对每个用户的操作都应该有恰当的系统反馈（包含视觉、听觉、触觉）。
明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。
当用户产生某个动作时，给予相对应的连接反馈。如大概用户点击某个按钮时，按钮默认的外观与点击后的外观发生变化，结合现实世界的开关去思考（按下 开灯）动作与反馈是连接的，即时的。
希克定律，是1951年由威廉·埃德蒙·希克首先提出的，认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。
如京东筛选，在搜索结果页会将筛选条件收起，因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单，并且做好归类，用户能够更迅速的作出决定。
费茨定律，是1954 年 由保罗.菲茨首次提出，在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。
T：代表完成移动所需的平均时间
A：代表光标开始/停止时间
B：代表光标移动速度
D：代表从起点到目标中心的距离
W：代表目标的尺寸
简单来说就是指：随着目标的距离增加，移动到目标的时间更长，并且随着目标的尺寸减小，选择目标的时间也会增加。
所以在界面设计当中会遵循越重要的功能，占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。
屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中，所以我们在进行产品设计的过程中，会将常用/重要的操作放置在屏幕边缘处，便于用户操作。
神奇数字7±2法则是1956年由 乔治·米勒 所提出的，根据乔治·米勒的研究，人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。
由于人类的大脑处理信息的能力有限，大脑会将复杂信息划分成 块 和小的单元。如：京东和每日优鲜的分类处理。
人类短期的记忆一般一次只能记住5-9个，所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。
复杂守恒定律是1984年由 拉里·泰斯勒 所提出的，也称作泰斯勒定律。认为每一个产品设计的过程中，都有其固有的复杂性，存在着一个临界点，超过了这个点产品设计的过程就不能再简化了，你只能将固有的复杂性从一个地方转移到另外一个地方。
在产品设计中，会尽量的简化界面。当功能过多时进行一个整合的处理，跳转或者滑动操作。如查看更多或者常见的汉堡导航。
新乡重夫认为遗忘有两种：一种是疏漏，另一种是忘却。他建议采用一些措施来预防产品的缺陷。
防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；比如常见的信息输入状态，未输入置灰不可点，输入变为可点击状态。
微信拍一拍：微信在出了拍一拍功能之后，很多时候点击头像的时候会不小心拍到别人，现在的拍一拍是可以撤销的，在客户端鼠标悬浮上就可以进行撤回，移动端长按出现撤回弹窗，两分钟内有效。
微信朋友圈动态：点击返回图标会出现的弹窗，避免误操作。利用防错原则，可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。
奥卡姆剃刀 定律 ：它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 （William of Occam，约1285年至1349年）提出。 这个 原理 称为“如无必要，勿增实体 ”，即“ 简单有效原理 ”
不必要的元素会降低设计的效率，不管是实体、视觉或者认知上，多余的设计元素，有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息，可以用「更多信息」来实现。如夸克浏览器，首页只放置重要功能 搜索 和几个整合内容的图标入口。
让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件，在播放音乐之后进入其他的tab，在上面都会悬浮播放/暂停的区域。都能够随时操作。
就是产品的易用性，如果年纪大点的人，也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验，简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内，并且抖音会根据用户的停留时长等推送用户感兴趣的内容。
页面的使用率，当你想要在一屏新增很多内容时，页面的布局就会变得拥挤和区域变小，容易过于干扰用户做出选择，重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口；uc浏览器首页内容过多，当用户想要使用搜索功能时很容易被其他内容干扰。
前面说到的希克定律说到，当选择的数量越多，用户做决定的时间就更长。做过多的决定也是一种压力，在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示，马蜂窝根据产品属性放置了6个重要的功能入口，便于用户更快的去选择所想要的功能。
最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是：艺术抛出问题，而设计解决问题。
我们设想一个场景，当你在艺术展厅站在一副名画面前，你所思考的是什么？是惊叹画家的画技还是整个画面给你的感觉是一种故事，你会不会思考艺术家在作画时的心情，处境，为什么要这么去画？想表达怎么样的情感？
然后我们再设想一个场景，同样在艺术展厅，你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧？因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、马蜂窝 — 人性化设计识别文章地点
二、微博 — 社区游戏化设计提升互动率
三、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咨询、用户体验公司、软件界面设计公司
具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表页面。 类别页面就像是特定产品类别的主页。他们可能不提供完整的产品列表，但可能会展示一些产品并提供产品子类别的链接。这种页面本质上是用户在进入产品列表页面的过程中经过的一个中间步骤，让用户不用一下子面对海量的分类信息。
Eddie Bauer 在其全局导航中， WOMEN 链接将用户带到了这个传统的类别页面。这些页面通常包含产品照片和营销内容，以及促销子类别（例如SHOP FLANNEL 和 SHOP FLEECE ）的链接。
类别页面通常提供以下组合：
并非所有产品都需要专门的类别页面。 不过这种情况有时候会让用户非常恼火，因为用户需要通过额外的步骤才能查看特定类别的产品。
许多网站完全省略了类别页面，而是将用户直接引导到产品列表页面，在那里他们可以借助过滤筛选的方式来浏览产品。
Bonobos 网站上的 Pants & Jeans 链接不是类别页面，而是将用户直接带到产品的列表页面。这种方法通常效果很好，因为它尽快向客户展示了他们可选的选择。
虽然本文偏向于电商网站中的类别页面的探讨，但实际上这些页面也用于其他类型的网站，特别是新闻资讯和教育类的网站。这些建议也可能适用于这些情况，但最好根据领域对你的设计进行测试，以防你的用户需求与购物型用户的需求不同。
如果您的电商网站所涉及的产品非常复杂，以至于您的许多客户需要经过学习之后才会使用，才能正确地过滤和比较产品，那么类别页面就是一个好主意了 。此外，具有 大类别和大量子类别的网站，有时会提供某种类型的独立类别页面，以帮助用户找到有意义的起点。
不过，你可以决定让特定的产品具有类别页面，而其他的则不具有独立的类别页面。例如，Lululemon 主打的健身服装产品（大多不需要分类页面），同时也销售一种名为 MIRROR 的昂贵的家庭健身产品，后者需要更详细的解释，因此有自己的分类页面。
Lululemon 为其复杂的家庭健身产品 MIRROR 提供了一个单独的类别页面，但并未为其所有产品类别使用类别页面。
类别页面可以对电子产品等复杂产品起到解释作用 。如果用户还不了解产品选项，他们可能还没有准备好单击单个产品。与随机点击不同的产品相比，类别页面为他们提供了一种更有效地了解各种潜在相关产品功能的途径。
例如，智能手表通常会有不同的功能和价格范围，著名智能手表品牌 Fossil 在自己的网站提供了一个类别页面，列出了不同类型的智能手表，并提供「立即购买」、「了解更多」 以及「比较」的选项。
Fossil 的 智能手表分类页面解释了不同型号的智能手表的功能和性能差异
购物型用户可能不需要通过网站来学习服装或食品等熟悉商品的内容和知识。然而，一个拥有大量产品和内容，并组织成许多子类别的网站，仍然可以从类别页面中受益——尤其当子类别页面可以通过独特的图文清楚地介绍产品的时候。这比一长串标签文本更容易方便用户了解产品，此外它还可以为国外的购物者提供帮助。
REI 销售用于各种户外活动的许多产品，从皮划艇到登山用具。如果点击网站的全局导航中Camp & Hike 链接之后，页面跳转到一个包含所有露营产品的列表面，用户可能会不知所措，而且无趣。相反，REI 让链接指向到一个传统的类别页面，而不是列表，这个页面包括：
REI 使用传统的类别页面来帮助购物者在庞大的 Camp & Hike 类别中找到适合自己的产品。
如果你的网站确实提供了传统的类别页面，请同样为用户提供了避免进入这些页面的简单方法，并在他们愿意时，也能直接转到产品列表页面。为你的站点的全局导航，提供指向子类别产品的列表页面（比如使用超大导航 Megamenu ），以及指向传统类别页面的链接。
可能还需要确保搜索结果始终指向产品选项，而不是将购物者引导到类别页面。在我们的研究中，Zappos 会将某些搜索结果指向到以品牌为中心的类别页面，而不是链接到该品牌的产品。
在用户测试的时候，一位参与者看到孩子后很生气，因为搜索她最喜欢的品牌 Sam Edelman 时，她进入了一个具有促销感的传统类别页面，而不是指向她要的产品。对她来说，这感觉像是一个不必要的额外步骤。
「当我进入 Sam Edelman 时，我想看到结果。我不希望打开一个品牌的分类页面。」
当用户在 Zappos.com 上搜索「sam edelman」时，她很恼火地看到一个没有列出任何单个产品的品牌类别页面。
当用户搜索时，他们希望立即看到结果。
为了避免传统的类别页面的缺陷，并提供对产品列表的快速访问，许多电商网站现在在主产品列表页面中，结合混用了少量的类别有页面的设计——例如简短的描述性内容，或简短的子类别菜单。
在女士紧身裤 产品列表页面上，Lululemon 包含了一些传统会在类别页面上显示的元素：营销内容（蓝绿色框标注的区域）和对不同紧身裤样式的解释，以及指向这些子类别的链接（以黄色框标注的区域）。
这种混合呈现方法效果很好，因为对描述或子类别菜单感兴趣的用户可以暂停并阅读它，而不感兴趣的用户可以简单地跳过，直接快速访问实际的产品列表。
一些电商网站在 产品 Banner 旁边加入营销的内容和元素，这些元素传达有用的信息而不会减慢用户的速度，就像传统的类别页面一样。
高级珠宝零售商 VRAI 使用混合式设计，在一些产品列表页面中包含类别页面样式元素。它的一个产品列表页面当中，圆形订婚戒指页面中，包含了带有价格的产品列表，以及解释性的内容。顶部的文字描述了此类产品的一般特征。侧面板提供了有关该类别中所有产品共有特征的说明，以及更多详细信息。
在这个列表页面中，VRAI 包含了促销内容（以蓝绿色框标注）和说明性内容（以黄色框标注）。其中所呈现的图文内容是典型的传统类别页面的特征（没有产品列表）。
一些零售类的网站不使用类别页面，而是提供指向产品列表页面上的子类别的导航链接。这些链接（这是最初发明类别页面的原因之一）让用户轻松浏览网站的产品库存。
例如，Ann Taylor 的 裤子 列表页面显示了不同款式裤子的类别，并提供指向该子类别的链接。这些内容直接显示在产品列表上方，帮助用户了解可用类别项目，并且直接导航到这些类别。
Ann Taylor 的网站在 裤子 的列表页面的顶部，加入了不同裤子款式和合身度的说明和图片，以便用户了解其中的差异。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
老龄化社会已经到来，如何让中老年群体更好地使用互联网产品是当今的热门话题。猫眼演出设计团队负责的一个 B 端项目的使用人群需覆盖到中老年用户，也属于适老化的涵盖范畴。
在前期调研和设计环节中，我们收集了一些相关的文献及案例，并且结合项目实践有所思考和沉淀，在这里与大家分享。
世界卫生组织根据现代人生命状况，提出了人生阶段年龄的新划分。45~59 岁为中年人；60~74 岁为年轻老年人；75~89 岁为老年人；90 岁以上为长寿老人。[1]
随着年龄的增长，人们的身体机能、心理状态、认知能力等都会出现衰退的情况。
适老化设计是无障碍设计中的一种。无障碍设计于 1974 年由联合国组织提出，设计中需要充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者（如残疾人、老年人）的使用需求。[2]
目前互联网产品中大多数的适老化设计，主要是集中在 C 端。针对不同障碍（视觉、肢体、听觉、认知障碍）[3]，目前普适的适老化设计原则有：
1. “强烈“好于“柔和”
针对视觉障碍，常见做法有增大字体大小，使用非衬线体字体，提高颜色对比度等。
相比原版的 App，百度大字版 App 和支付宝长辈模式修改了 UI 界面，每个功能模块都用了明亮的大色块、加大字体的设计。
2. 善用“辅助”和“替代”
针对听觉障碍，常见的做法有通过视觉辅助，将声音转化成文字、扩大音量、降低语速等。
Google 安卓系统推出了 Live Caption 功能，可自动将手机上播放的内容转换成字幕。Live Transcribe-「Sound Notification 声音通知」功能，可识别特定声音（比如烟雾警报器、婴儿啼哭、敲门声等），并转化成文字及视觉符号推送至手机，方便听障用户辨别生活当中一些重要的声音信号。
3. “点击”好于“滑动”
针对肢体障碍，减少页面信息的密度，避免使用过小的按钮以及复杂的交互手势。
有研究表明，老年群体在操作时难以瞄准物体，在浏览图片时，由于视力衰退导致无法对焦，他们会不断地用两只手指放大/缩小并反复点击屏幕。[4]
平安银行 App 关怀模式采用卡片拼接的设计方式，将间距放大，保证每个信息有更大的展示空间，同时也放大按钮点击热区，提高操作的准确率。
4. “具象”好于“抽象”
针对认知障碍，避免使用不易识别的图标，尽可能配有图标或图片，简化信息内容。
有研究表明，文字+图标为主的设计有助于提升老年新手用户对新 ATM 使用的学习效率和记忆。[5]
滴滴 App 关怀模式针对老年人进行功能精简，满足高优先级核心诉求，首页只放「一键打车」，操作简单，大字、无广告。
在很多行业中，中老年人因为拥有丰富的经验在岗位上更具竞争优势，譬如教师、医生、律师、会计等职业，工作年限长、经验足是优势，可以提供更好的服务。他们既会使用 C 端产品，也有使用 B 端产品的场景。
随着时代变迁，2015 年世界卫生组织提出了“健康老龄化”理念[6]，倡导改变过去“老了就要退出社会生活”的消极认识。
从“老有所依”到“老有所为”，很多的 B 端场景都覆盖了中老年用户，如何提升中老年用户的办公用户体验是重要课题。
另外我们看下 C 端与 B 端的主要差别：
C 端 App 中时常将简单作为适老设计宣传点。追求简单有一部分原因是，C 端用户是在自己的场域操作且几乎无时间压力。而 B 端产品却相反，业务逻辑复杂，用户要长时间使用而且要求效率。B 端面向企业定制化，针对特定人群、情景，使得在适老化设计中要解决的问题更清晰。
留意生活中的零售行业，如餐厅、商场、药局、便利店的服务人员，往往能看到中老年人的身影。
POS 系统是 B 端场景中使用率最高的产品之一，POS 系统的英文全名为 Point of Sale，中文名为销售时点信息系统。[7]它由硬件与软件组成，根据产业和店面类型的不同，会有功能上的差异。
最近团队参与了一个改造 POS 系统的项目，使用人群覆盖到了中老年用户，提升他们的办公用户体验是其中一个产品目标。
本次项目主要是 POS 界面的更新，完整的 POS 体验不仅有软件本身，有更大的部分在于实体环境与设备，例如：结账区的控件、店面的摆设、扫描枪，读卡器等，而 POS 界面是连结上述元素的节点。
在对 POS 系统进行改造时，我们是按照以下设计思路进行的：
第 1 步:沿用旧系统规则与结构
B 端系统背后往往由成熟的业务场景和复杂的业务逻辑构成。B 端系统往往不是一个从 0-1 全新的系统，而是存在一个被使用了很多年的系统。
在这种情况下，企业服务的每个用户都是趋向于规避风险的。人们可能已经习惯了原有的解决方案（尽管不好用，但是大家都会用了），但新的方案如果不好用，他们的生产力反而会因为不知道如何使用新方案而降低。
这就意味着在做 B 端设计时，现行的方案会产生很大的习惯引力。
当设计师要引入一个新方案时，取消或改变某些功能及操作行为将有难度，不能霸道性更改，取代需要合理性。
设计思路：
第 2 步：理清主要用户与使用场景
想要了解使用者的真实痛点，需从场景出发。
第 3 步:用适老化设计原则去解决场景中的问题
POS 使用场景有很多，这里列举 3 个常见的使用情境：
可能存在的障碍：无法聚焦信息内容，难做到边看屏幕边与顾客交流。
设计目标：确保信息在复杂的环境中，信息内容清晰可读。
设计思路：
1. 放大信息内容
服务至上，POS 使用者在工作时需保持端庄热情的姿态，不能只专注看 POS 屏幕信息而不顾顾客。
内容大小的确立由设备分辨率、环境灯光、字体、视距等因素决定，在复杂的现场环境中，信息内容要清晰易读。
2. 色彩对比度符合 WCAG 标准
参照 WCAG 有 AA 和 AAA 的对比度标准，界面中的信息与其背景间的关系对比度至少在 4.5:1 之上，保证信息易读性。
WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)。这是一套由无障碍功能专家编辑的指南，有若干国家在其网络无障碍功能法律要求中明令必须使用这些指南。[8]
一些设计插件可以帮助我们检验色彩对比度是否符合 WCAG 标准，给大家推荐 2 款：Sketch 插件 Cluse，Figma 插件 A11y-Color Contast Checker。
3. 设计有意义的动画
通过动效来表达静态视觉效果无法准确传达的信息，如反馈、引导下一步、状态表达等。好的动效与视觉设计是互补而成系统的。
比如用动画来展示商品被加进购物车的状态，引导下一步操作。
4. 加大点击热区
提高使用者点击操作的准确率和速度。
5. 一屏策略
在这次的项目中存在一个场景，除了销售端服务员看到的屏幕，顾客也会有一个客显屏，即服务人员看到的界面，顾客也会看到。
对于页面信息框架以及布局尽量“一屏”展示，确保双方的视线和注意力一致，便于沟通交流。但这时会有挑战：字放大、按钮放大，信息和功能在一屏上怎么放得下？
解决思路：
可能存在的障碍：在顾客的“催促”下，使用者也会着急，对事物表现出茫然的情绪，定位当前位置困难。
设计目标：追求信息的有效表达和操作的直觉性与效率。
设计思路：
1. 避免使用不易识别的图标
B 端系统中会有些功能很难用一个图标去表达其含义，此时文字+图标按钮优于纯图标按钮，能帮助 POS 使用者更好地理解语意并做出操作。
2. 信息的呈现符合用户眼动规律，操作轨迹越短越好
可运用古腾堡图表法 Diagonal Balance，它由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。他发现人们视觉阅读规律，左上角是视觉第一落点区，右下角是视觉最终落点区，右上角和左下角都是一个视觉落盲点，大多数情况容易被忽略。
在进行信息排布时，可根据用户习惯性的眼动规律，将最重要的信息放在左上角，右上角和左下角添加辅助元素，右下角作为整个视觉落点可以展示重要操作。
可能存在的障碍：百忙之中，应变能力下降，容易发生误操作的情况。
设计目标：预防不当行为，提升容错率，反馈要及时有效且清晰。
设计思路：
1. 通过二次确认避免误操作
在产品设计时，要把各种可能性考虑进去，通过模态对话框让用户二次确认来避免误操作行为。
当有重要操作时需告知用户处理结果，状态反馈信息采用的颜色需要遵守用户对色彩的基本认知，如红色代表警示，黄色代表警告、绿色代表成功等。
上述举例的设计原则是启发但不是限制，每个设计提案最后都要经过用户调研，看是否符合使用者的使用习惯，是否真能解决业务与工作中的痛点。
附上总结图：
其实设计到后面会发现，起初为了方便中老年用户使用 POS 运用的设计原则，最终都能给多数人带来很大便利。
这是因为我们每个人在某些时候都会遇到各种临时的无障碍需求。
适老化设计，不仅仅只是为中老年群体做设计，更是一种新的设计思维方式，去挖掘更多普适的场景痛点，来指导我们做方案设计。
市面上很多适老化设计方法为 B 端产品提供了借鉴，但 B 端产品不能为了适老而适老，理清相关工作情境和要解决的问题很重要；不能霸道性更改，取代需要合理性，因为 B 端产品现行的方案会产生很大的习惯引力。
以上是近期对 B 端引入适老化设计的一些思考和沉淀，是开始，也将继续，适老化设计还有很多值得深究和验证的内容。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com