在日常生活中，说明书、指路牌、做ppt、设计网站、绘制海报中等都需要信息设计。可以说，信息设计已经渗透到了人们生活的方方面面，信息设计存在于我们目前看到的每一个画面。
对于B端产品来说，信息设计的好坏，一方面决定了用户在使用产品中的难易程度；另一方面也影响着后续当产品功能添加时，产品的延展性如何。
信息设计是我一直较为关注的设计领域，从早期设计感性的纯粹视觉思考，到现在越来越趋向于逻辑理性化的设计思维，这是一种设计提升的思维模式。
在二十世纪七十年代，英国伦敦的平面设计师特格拉姆第一次使用了“信息设计”这一术语。当时使用该术语的目的仅为区别于传统的平面设计以及产品设计等平行设计专业。从那时起，信息设计就真正地从平面设计中脱离出来，广泛应用在其他领域。
信息设计的主旨是什么？
通过对信息图表设计的基础认识,从信息的收集筛选、应用情景构思方式、视觉表现到信息图表的设计模式、制作流程等方法，设计出符合阅读顺序，使观众清晰有效阅读的设计方案。这种准确、形象、快捷的传达方式已经显示出信息设计方法独特的优势。
信息层级的排列不仅影响视觉上的美观度，更影响人们在检索信息时候的效率。尤其是对于B端复杂场景，我们不仅需要考虑清晰的传递业务价值，合理的信息层级划分也是提高产品体验的重要部分，好的信息层级则意味着更好的使用体验。
试想一下，如果我们想要买一个手机，那么我们会如何买到手机呢？首先，我们会收集相关手机的信息，例如，先上网搜索最新的手机信息（向朋友询问或者平时就有想好的品牌机型），然后我们的大脑会把这些信组合起来，得出买什么品牌什么型号的判断。最后，我们在一堆信息中，提取出有效信息，进而指导自己的下一步行动。由此可见，我们获取信息的步骤：
因此，我们在信息设计时可以借鉴以下基本思路。
1、根据自己的经验与用户需求收集尽可能全面的信息
2、分析信息池中哪部分信息是用户最关注的。
但是，当产品的目标用户不止一类时，我们就需要考虑多方案满足不同的用户对信息的需求。例如，在电商平台搜索商品，我们既可以通过店铺搜索或商品搜索，也可以通过天貓提供的商品目录树直接查找。
3、思考如何信息呈现，设计师更是需要思考如何呈现信息才能让用户更容易接受和理解，只有会组织信息，才可能打造一款用户喜爱的产品。
检测页面的设计是否有效，需要我们对用户的行为做分析。我们可以将用户浏览页面的行为也分为三个层次：
1、核心行为层：是指用户首先关注这个页面核心重点，触发到的用户首要、核心行为，对应信息分层的重点核心层。
2、了解行为层：是指用户产生了解的意愿，继续了解内容的行为，对应信息分层的次要辅助层。
3、查看更多行为层：是指用户接收到信息后寻求更多信息的行为，如行动按钮、文字链接等交互行为，对应信息分层的详细信息层。
所以，如果页面设计质量高、信息层级传达得准确，那么用户的行为层次应该会恰好和页面的信息层次相对应，这也是我们进行页面设计质量检测的标准之一。
既然信息层级设计对于使用体验比较关键，那么怎样做好页面的信息层级设计则显得尤为重要。
我发现网上的资料也是参差不齐，查阅到的资料几乎都在讲排版设计的四个基本设计原则：亲密、对齐、对比、重复。这四个方法虽然有用，但在面对复杂层级排版时仍会面对困惑。因此我对页面排版进行了进一步的探索及思考，今天我们来说说除去上面四大设计原则以外的方法：
平时我们很容易被忽略的一点，就是信息的前置处理。我也曾遇到过某些信息很复杂导致排版很困难，来来回回多次修改设计总是不满意，但却忽略了这些信息是否真实地被需要。
信息前置处理本质就是判断我们当前所要呈现的信息是不是必要的。这也是日常工作中经常遇到的场景，比如有时候产品给到了我们很多信息，可能仅仅是信息全部展开，所以我们在设计的时候就不能直接开始，需要通过当前页面的业务场景去进行判断，确定每个信息的合理性，两个步骤进行判断：
上述两个问题的确认，会直接影响后面的信息设计排版。因此我们需要在源头，比如去和产品或者业务沟通，弄清楚该信息呈现的缘由以及必要性，这样能够帮助我们最后理清楚信息层级。
我们在进行B端产品信息设计时，可以围绕“简约四策略”进行设计。
英国易用性专家协会主席贾尔斯 •科尔伯恩 ( Giles Colbore ）的《简约至上》一书详细讲解了简约的四策略：删除、组织、隐藏和转移。
删除是指将界面上不重要的内容及元素删掉，只保留对用户来说重要的内容。这样不仅可以让设计师在设计界面时只专注于重要的问题，也有利于用户专心完成目标。设计目的是聚焦可用信息，去掉分散用户精力的信息，从而为用户提供价值。
我们在删除的过程中，切记不要随意删除。删除信息非常考验判断信息重要程度的能力，毕竟删除了不该删除的信息会给用户造成不好的体验。
组织是指对确定下来的信息进行有层次的整理。如果我们不对筛选出来的重要信息进行有序的整理，那么用户在使用过程中就会觉得很复杂，抓不住重点。
信息组织的要求是以产品定位和用户需求为线索，先考虑信息展示的主题，再考虑信息的分类方式（如时间、 颜色、大小、字母等），最后将松散的信息组织起来，并保证信息间界限明确。
右图进行了信息组织，明显会比左图看上去体验更好
信息的重要程度就决定了我们需要将哪些信息作为主体，哪些信息作为次要辅助信息，哪些信息甚至可以收起或者省略。
隐藏是指将用户不常用的信息隐藏起来，在用户需要时才出现。但是，我们要注意隐藏策略的使用方式。
第一，隐藏与删除不一样，删除的信息是用户不需要的、多余的，但隐藏的信息是用户需要的，只是比较不常用而已。
第二，在设计信息隐藏时，要考虑清楚使用隐藏是否给用户带来了不必要的麻烦。例如，信息隐藏时没有给用户应有的提示，用户就很难发现该信息。
首先，彻底隐藏需要隐藏的信息，只在合适的时机出现相关内容。
其次，能在界面中给出细微的提示，让用户顺利地找到隐藏信息。
最后，提示要在用户的视线范围内，如果超出了用户的视线范围，即使提示再明显，用户也看不到。
在B端产品设计中，有一个永恒的争论话题：表格操作栏需不需要隐藏。
关于这个话题，一部分人认为不应该隐藏，原因在于隐藏了操作栏，用户就会以为表格数据是不能操作的。另一部分人认为应该隐藏，因为每条致据都把操作栏展示山來，感觉太多余。
1、需要隐藏的情况：当表格列数很多、已经出现横向滚动条且操作栏的功能不常用时，可隐藏操作栏。当用户将鼠标移到数据行上时，就会显示操作栏的功能。
2、不需要隐藏的情况：当表格操作栏的功能都比较重要，一旦用户操作频率较高，无须隐藏操作栏。这时隐藏会导致用户在操作时不直接。
3、隐藏一部分操作功能当表格列数很多、已经出现横向滚动条，但操作栏的部分功能很常用时，这部分常用的功能就无须隐藏。当用户将鼠标移到数据行上，就会显示操作栏中不常用的功能。
转移就是将合适的信息放到合适的地方。
例如，我们在设计一个 B端产品注册界面时，期望用户除了填写账号、密码、验证码以外，还期望用户填写生日信息。因为产品经理希望在用户生日时给用户发送生日祝福，让他们感受到产品的温暖。想要再做用户分层的时候，用年龄分层。但是，生日信息放在注册界面显然不合适，这时可以将生日信息填写步骤转移至用户注册完成后进行。当用户完成注册时，系统可以给予温馨提示，告诉用户 “你已完成注册，当你填写了生日，你将在生日的时候收到神秘礼物”。
注意：B端产品经理在设计界面信息转移时，要清楚该信息被转移的原因，如果盲目地转移，反而会让用户无法在合适的位置找到合适的信息，降低了用户获取信息的效率。确定了信息设计的前置的信息处理以后，就到了设计师的主场，信息的排版设计。
在信息量较大的页面中，设计师需要充分了解产品功能和用户所需，对页面的内容进行划分，明确各部分内容的优先级，建立信息层级。通常我们可以从产品设计的角度，可以将页面信息划分为3个层次：
1、重点核心层（吸引用户）是指用户在短暂的 3-5 秒内浏览页面后，最能够吸引他的核心内容。这部分也是页面的核心功能、是页面最想展示给用户的内容，必须少而精，在设计中需要突出展示。
2、次要辅助层（帮助理解）是指用户被重点核心信息吸引后，进一步在页面中停留 3 – 5 分钟，就会阅读相关的、帮助了解核心内容的辅助信息，如说明信息或其他相关功能，这部分信息比较重要，但不需要强化展示。
3、详细信息层（详细了解）是指更多的信息或补充信息，详细信息层会以更多的交互方式展示信息。这部分信息并不十分重要，但也需要展示。
B端产品业务比较复杂，页面内容也会较多，信息的有效组织尤其重要。信息设计不是简单的内容堆砌，需要根据用户场景和需求做出优化处理，构建有效的信息的层级帮助用户去理解业务内容。
总结出以下五种方法来帮助我们更合理地进行信息设计：
信息分组是最常用的设计形式，能够将复杂的信息打散重组，聚合相似信息，分割差异化信息，有助于降低信息的复杂性，帮助用户快速定位信息、浏览内容，从而降低页面整体的复杂度。
常用的分组方式有三种方式：间距、分割线、卡片。
我们可以根据信息复杂度更好地选择分割方式，让界面的表达清晰明确。
面对复杂的信息内容，用户容易产生退缩情绪，组件是目前大部分设计师在进行信息排布时必备的部分，包含：
1、树形结构：对于有关联性的多层级非常适合，可以将复杂的层级结构进行收拢，从而能够显著降低信息的复杂度。
2、表格结构：对于信息多且关联性不大的复杂信息，可以聚合到表格来进行呈现，但表格的呈现方式不宜滥用，需要根据我们场景来进行选择。
3、分步骤：将复杂内容分步拆解，把用户的关注点从页面内容转移到步骤进度上，可以减少用户的心理压力。另外节点信息页也可以帮助用户更好地理解业务流程。
4、tab标签：更适合同级的数据，对于同类型的结构可以更好地将页面进行拆分，从而让当前页面更简洁。
通过改变布局的设计方式，我们可以将多层结构的样式通过拆分布局来将其控制在三层内。这里底层逻辑就是当遇到相对比较复杂逻辑时，我们可以考虑通过改变结构来减少其复杂度，如下图：
我们可以利用信息融合的形式来减弱其对层级的影响。信息融合从本质上讲就是将某两种层级信息通过不同的组合方式，让其融入到同一个层级中。
在进行B端布局时，信息融入用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间，还能够降低信息层级的复杂度。
但在进行信息融入的过程中，我们需要注意的是：如果放在同一层级会造成理解上的误解时，这个时候不要采用该方案。比如搜索框的位置，放在哪个层级决定了对应的搜索范围。
信息弱化的原则是，将某些超出层级的部分进行弱化。比如有5个层级，但其巧妙地将功能筛选融入到了当前的结构中，使得即使超过3层我们也不会觉得其特别复杂，如下图：销氪平台就对数据和视图切换行进行了弱化，虽然还是有4种层级，但从视觉感知的层面上不会觉得视觉凌乱。
通过上述5种方案：信息分组、组件拆分、更改布局、信息融入、信息弱化，我们可以将大部分层级过多的复杂信息简化，从而让我们最终的页面呈现不会太过复杂，更容易被用户理解。
一、减少页面元素设计
不同于C端产品，B端产品更强调效率。正如奥卡姆剃刀原则所说“如无必要，勿增实体”。
页面内容需要以简洁为主，避免无关要素形成信息干扰。而设计师更加感性，担心设计过于平淡，会在界面中添加各种视觉元素，反而会增加用户的认知成本。
体验设计行业需要创新，但是B端产品设计需要更加谨慎，尊重用户的习惯，完整表达业务逻辑性、保证内容的可理解性，是设计师必须去关注的。
当你想用卡片来对信息分组时，你有没有纠结过到底是用线框卡片还是背景色填充呢？经过多次纠结和多次的设计对比，我发现分组方式其实也包含着一定的规则：
如果卡片少，用色块；
如果卡片多，用线框，你会发现卡片过多时，线性设计会让页面显得更整洁和清新，色块设计就会让页面显得更厚重。
当你整个页面都全是线框时，你可以利用色块的卡片来达到突出页面重心的效果，让整体页面没有那么单调，可以看到下图的例子，右侧的页面会相对更稳重一点。
在进行色块时，时常会纠结用灰色底还是彩色底来进行。那么这两者到底有没有界限的区分呢，我们应该何时使用这两种色彩呢。
可以看出目前这两种颜色的运用更多的是功能上的区分：
1.彩色背景更适用于「想要引起用户注意的界面」，比如一些功能引导或者营销性质的页面。从表现性质上来讲更重。
2.而灰色背景更适用于「利用灰色背景来区分层级关系」或者一些微弱提示的信息。从表现形式上来讲更轻。
在某些特定的场景下，内容页面也可以通过可视化展示帮助用户理解信息，例如常见的身份证图片上传等，很多用户无法分清楚正面反面，借助图片可视化提示，便于用户更好地理解信息。
作者：789研习社 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析，关注以人为本的用户需求。
交互设计有许多的方法和理论，如格式塔心理学原理、尼尔森可用性原则、7±2法则、3次点击法则、功能可见性原则、菲茨定律等。
系统应当在适当的时间内快速让用户知道当前所处的状态，即无论单击、双击还是滚动都会给用户一个反馈，让用户对过去发生、当前目标、以及对未来去向有所了解，防止用户出现错误操作。
常见的反馈有刷新提示、加载提示、支付提示、下载提示、进度提示等（具体见#产品中的反馈机制#文章）
示例：进度条、已读文章标题变灰
软件的使用更符合现实的场景，通过直观的视觉来贴近真实的世界，比如使用易懂和约定俗成的表达。
示例：图标ICON等图形化手法代替纯语言文字（音乐播放转盘）
产品需要支持用户“反悔”，即在用户出现误操作时，需要给用户提供“紧急出口”，做出“撤销”“返回”“取消”“重做”等功能。
示例：微信聊天的撤回及重新编辑功能；备忘录的恢复删除功能
产品的信息架构、交互方式、视觉表现等应该具有一致性，主要包括结构一致性、色彩一致性、文字一致性、操作一致性、反馈一致性
给用户错误的提示不如在用户发生错误之前避免它，可以帮助用户排除一些容易出错的情况，或者进行二次确认。
示例：微信朋友圈编辑内容后点选返回会出现是否保留此次编辑的弹窗以及在付款页面等重要操作之前给出弹窗是否确认支付，银行卡号输入时自动以4位数字为一组便于用户输入防错
将用户的记忆负担最小化，尽量减少用户记忆信息，应该提供信息让用户辨认。
示例：淘宝的搜索功能，使用关键词联想要搜索的内容，避免有些商品名称记不全可以轻松搜索到；引导页的新功能提示
既能保证第一次使用者能清晰明白功能，又能给老用户提供更高效的使用方式，允许用户可以定制常用功能。
示例：支付宝首页可以自定义放置常用功能；饿了么订单页面支持用户再次购买上次的菜单，不需要重复选择
去除冗余和不相关元素，适当留白，让功能突出，不会分散用户注意力，简洁精致的图形能留下深刻的印象。
示例：知乎、简书等内容为主的产品，减少元素使用，让用户聚焦内容，提升用户体验
尽量帮助用户从错误中恢复，让损失降到最低。指出错误信息，并给解决建议。
示例：word的自动保存功能；登录页密码输入错误，给出错误提示并修改建议
当用户需要帮助时给予用户适当的帮助入口，帮助文档要易于查找， 专注于用户任务。
示例：微信 、淘宝等页面的帮助与反馈
我们都会有一种习惯，越是对一件事情经验丰富，我们就越容易把事情想（做）得复杂，设计师也是如此，我们很容易过度思考，导致我们最终的解决方案很复杂。
这样看来好像我们是为了用户体验而想尽办法，但是最终会分散和混淆用户的意志力，反而让用户体验更糟糕。
怎样让我们在设计中做到“化繁为简”呢？这时候我们可以用到一个定律“奥卡姆剃刀定律”。
首先要说明的是“奥卡姆剃刀定律”它来源于哲学，就像“菲茨定律”、“希克-海曼定律”和“米勒定律”一样，它们出自心理学和物理学，它们都不是直接为了设计而出现的。
但是它们提出的原则是可以运用在设计中来提升我们的设计和用户体验。或许有人已经无形之中运用了这种方法，但是并不知道它的背后竟然还有这么一个理论。
在设计时，我们运用奥卡姆剃刀原则，剔除那些不必要的元素（视觉、交互、功能等），如果两个产品有相同功能时，奥卡姆剃刀的原则是建议选择更简单的。
因此我们在做设计时务必分析每个元素是否必要，在不影响整体功能的情况下应该尽可能的减少不必要的元素。
在如今强大的互联网时代和强大的设计工具下，设计师很容易忘乎所以，在设计时往往将简单的需求设计得非常复杂。
它们可能是一个很多功能和信息的网站，但是却很难使用和维护，有人认为我的网站设计就应该做得更多，它应该拥有更多的功能和信息，但实际上应该做得更少。
一旦出现这种想法时我们应该问自己，我们最开始的目标是什么？我们要解决的真正问题是什么？
十四世纪时期（文艺复兴时期），欧洲的学者们忙于“辩论”（打嘴炮），把研究“似是而非”的东西当作智慧的象征。
例如：
黑色的白色是否存在
上帝的喷嚏是哈欠还是电闪雷鸣？
不是张三也不是李四的人本身是否存在？
在这些毫无意义的“口嗨”中，奥卡姆实在是看不下去了，奥卡姆觉得他们的争论是毫无意义的，由此他提出了奥卡姆剃刀定律：如无必要，勿增实体。与我们中国哲学中的“大道至简”有异曲同工之妙
奥卡姆剃刀的观点是“不要浪费较多的东西去做用较少的东西同样可以做好的事情”，简单点就是“如无必要，勿增实体”
拉丁文形式有以下几种：
我们可以从三个方面来解释这个观点：
从三个解释奥卡姆剃刀的观点我们可以引申出设计中的一些方法：
如果一件事情可以用已有的“A”来解释，那么就不要再去发明“B”来解释这件事，新的这个解释可能存在漏洞。
这一条与雅各布定律中表达的想法是一致的，雅各布定律讲“用户会将大量的时间花在其他的网站（产品）上，而不是你的网站（产品）”。那我们在设计前就应该多看，一名优秀的设计师除了具备良好的理论知识和高超的技能外，还应该有开阔的眼界。
拥有开阔的眼界你才会知道原来已经有了这么好的设计解决办法，而不是固步自封的“创新”。
如果已经有了一种很好的设计方案"A"或者是某一个功能的设计大家已经有了一个统一的标准，那么我们在做同类设计的时候最好的方法是与之保持一致性，不要再去做设计“B”，因为新的设计“B”可能会比设计“A”更难用，然后最终导致这个设计是一个失败的设计。当然。如果你有成本能接受创新后的失败，那么也可以尝试，但最好的还是先选择设计“A”。
这一点其他详细内容可查看雅各布定律
如果同一件事情有N种理论来解释，那最简单的便是正确的。
在设计一个功能的时候，如果我们设计了几种方案，或者在计时有几种交互方式方案，那么最简单的交互方式肯定是最好的。
能够N次做好的事情，就不要用N+1次来完成。
这一点我们可以理解为“降低复杂性的最好办法就是避免复杂”，如果一个交互或者是一个步骤，能用N次来解决，那么我们就一定不要让他用N加一次来解决这个事情。
当我们接到用户的需求时，用户会根据自己想要的东西而提出很多的需求，有些是可以采纳的，有些却又是不可取的，用户并不会意识自己的对错，他们只会说我想要这些东西。
那匹马的故事大家应该都听过，但经典的例子还是可以一直举着：
一百多年前，福特公司的创始人亨利·福特到处跑去问客户：“您需要一个什么样的更好的工具交通工具？”
几乎所有人的回答都是：“我要一匹更快的马”。
很多人听到这个答案后就跑到马场去选好的马匹配种，以满足客户的需求。
但是福特并没有立马去马场，而是接着往下问。
福特：你为什么需要一匹更快的马？
客户：因为可以跑得更快！
福特：你为什么需要跑得更快？
客户：因为这样我就可以更早地到达目的地！
然后福特发明了汽车，很地满足了客户的需求。
我们可以说这是剔除现象看本质，看清用户到底需要什么，我们做出的产品才会是好产品。
UI设计师最忌讳的就是拿到原型就直接开始设计，这样做是很危险的。拿到原型的第一时间应该把刀直接架在原型上，反过来推动我们思考，什么东西是必须展示出来的，哪些直接去掉，哪些可以隐藏起来等等，又或者是哪些流程最好一步解决，哪些分开解决。总而言之，这一刀是让我们设计师在设计前对产品的原型有所思考。
正如前面所说的，越是经验丰富越容易将事情做复杂，有时候为了追求设计上的美感，或是完美的用户体验反而将设计做得复杂了，而这一刀的作用就是在我们完成设计后用来自我检查的，剔除我们设计中不必要的元素。
提起简单性最具代表性的就是“苹果”，它的创始人斯史蒂夫·乔布斯就是一个极简主义者，乔布斯在会议中会问大家“我们下一步应该做的十件事情是什么？”乔布斯会将大家的建议记下来，然后再删掉一些他认为愚蠢的，最后剩下最终确定的前十大“最应该做的事”。乔布斯会把最后七件全部都划掉，最后宣布只做前面三件事。
还有一个故事就是，在设计iPod时其中有一个设计方案是有可拆卸内存卡的插槽，乔布斯觉得它太复杂了所以没有选，第二个是转盘的设计代替按键的设计，转盘的转动可以让我们快速的下拉列表，而如果是按键找歌可能需要按几百次。
自从项目开始，乔布斯每天都投入其中。他最主要的要求就是“简化！”他会浏览用户界面的每一个页面，并且会做严格的测试：如果要找某一首歌或者使用某项功能，按键次数不能超过三次，而且按键的过程要自然。如果他觉得导航不够清楚，或者需要按键三次以上，他就会非常生气。
当然还有后续iPhone、iPad、MacBook的设计也同样如此，乔布斯对于产品一生都在追求极简设计。
乔布斯的故事有很多，毕竟他是一个极简主义者，有兴趣的可以去读一读《史蒂夫·乔布斯传》
简单≠容易，复杂≠完美，就像《小王子》的作者安托万·德·圣埃克苏佩里说的”完美不是在没有什么可以补充的时候实现的，而是在没有什么可以带走的时候实现的“
奥卡姆剃刀并不像“费茨法则”那样有明确公式告诉你怎么做，例如将按钮放置在用户最快能点击的地方，按钮的大小应该减少用户调整的过程，使用户能快速的击中目标。
奥卡姆剃刀在设计中的运用没有直接针对某一项设计，它算是对设计师思想上的一种指导，就像它指导其他科学家在科学创造中那样，它是一种方法，可以指导你在设计中思考问题时如何做出更好的选择和设计。
作者：宇宙设计大本营 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
大部分的设计师应该都没有见过所谓的“交互设计文档”吧？在实际工作中，所谓的交互设计文档是由交互设计师所输出的，但是大部分的互联网公司是没有交互设计师的。交互设计师的工作内容被UI设计师与产品经理相互分摊。那公司为什么不招聘一个交互设计师岗位呢？（boss：呵呵～一个人能完成的任务为什么要两个人！）
所以本篇文章为了让我们设计师能够很好的了解什么是交互说明文档？它是干嘛的？有什么用？如果制作？有哪些内容等多方面全面了解。（哪里有了解的不到位错误的地方，也希望各位大神多多指点相互学习。让我卷～）
交互文档，即交互设计说明文档（英文名“Design Requirement Document”）。又称“DRD文档”。用来承载交互说明、交互原型、项目背景等内容，存档并交互项目相关伙伴的团队协作文档。
也许你想到：什么？交互文档（DRD）我压根没见过，这难道不是口头说说就行嘛？无需交互设计师。（大部分公司的交互文档是由UI设计师/产品经理来撰写）但是有的公司产品也分担着UI设计师的工作.......只要你如果优秀干啥都行，不优秀话语权都没有。（比如我们这些“小美工”。职位只是对一个工作的划分不代表对你能力的划分，只是公司的一种小手段～
回归正题，作为交互设计师，工作职责起到“对接上下游，承上启下”的作用，不论是在方案评审的讲解，还是日常的工作沟通，都应具备优秀的沟通能力、语言表达和DRD表达能力。而DRD不仅能完美的诠释出产品的内容和需求，还能够为产品出一套完整的设计规范，让产品保持一致性，方便团队协作减少沟通成本，也方便后期的修改。
DRD是利于团队协作的媒介，也是产品规范与项目总结的重要输出文档。
交互文档撰写并不是只有给自己看，最重要的是给：产品经理、UI设计师、开发（最需要）等等。并且作为交互设计师的输出物，交互文档是联系开发流程上下游的重要文件，它需要具备良好的可读性、唯一性和时效性。
首先不同公司，不同团队产品经理与UI/UX设计师之间的配合输出物是不固定的。
1. 大部分公司，产品经理细心点会连交互说明和原型一起出了（包含在PRD文档里），但是大部分会出现体验层的漏洞。
2. 如果公司产品是负责传一句话，有交互设计师的情况下，交互需要从功能规划、信息架构、原型说明一起搞了。
3. 还有在小公司比较罕见的流程就是产品搞PRD，交互搞交互文档，彼此之间的逻辑可以互相印证。
作为交互设计师的下游，我们也需要较早的介入需求沟通之中，提早避免后期可能存在的问题出现。
（但是很多时候交互设计师就是我们自己）
开发是最需要看交互文档的重要成员之一，因为他决定着产品的逻辑以及页面的跳转流程、交互方式、动效方式等等。（不过大多数公司只有简单的PRD文档，开发也只是简单看看～）
你习惯用什么工具撰写交互文档？PPT、Sketch、AI、Axure … ？
你习惯用什么格式输出你的交互文档呢？PPT、PDF、HTML …？
其实使用什么工具都无所谓，只要能够正确的描述出交互文档所需要表达的内容和逻辑就行。（就是谁都看得懂）
我比较喜欢使用Axure软件撰写交互设计文档，大家可以根据自身爱好或者公司规定进行选择（例如sketch、figma、PS等等..都是可以的。
说了这么多，究竟交互文档包含哪些内容呢？
一般来说，一份最基本的DRD文档需要包含：DRD封面、更新日志、文档图例、产品背景、页面交互、业务流程图、交互原型、回收站等模块。
DRD封面：包括产品/项目名称、版本编号、撰写时间、撰写人等基本信息。按需可增加参与该项目的各方负责人。（如：产品经理，交互设计师，视觉设计师，开发，测试，团队名称等）
更新日志，包含具体新增或修改的内容，修改人，修改日期等信息。在实际工作中，方案的修改和优化是不可避免的。更新日志方便项目成员一目了然关注到重点更新的内容，也方便开发找到对应的负责人进行沟通，提升工作效率。
针对你在该文档所用到的图例进行说明，辅助阅读（如：操作/跳转图例、标签图例、流程图例以及手势操作图例。）。特别适合刚入团队，首次阅读你DRD文档的人来讲，是非常有利于团队成员对你文档的理解。
可包括一些项目背景、需求分析、用户调研、竞品分析等。用于设计思路的整理和记录，方便阅读，方便参与评审会的人理解整个项目背景下的设计思路，也方便日后总结与沟通。但无需将所有的分析内容都放入，结构化整理重点内容放入即可。
业务流程图的目的就是梳理并分析优化业务流程。我知道很多同学做UI设计师的时候可以完全不管业务，直接做设计，但是作为交互设计师了解产品业务是非常重要的，因为不了解业务你就无法完成交互设计，优化业务场景。
举个例子：在教育考试系统中一般流程是：教育局出通知→学生报名考试→老师审核→报名通过→老师编排学生考试名单→学生开始考试对号入座→教育局公布成绩→学生查询成绩→考试结束，看这一些列的流程，因为关联特别多，如果对业务不熟悉的话设计起来会非常的不便，如果前期因为业务流程不熟悉而设计出错误的交互稿的话，后面就会特别麻烦。
一听： 先听客户/产品介绍。以最简单的方式了解产品重点，即基本要素中的角色、活动、协作关系梳理出即可。
二沟通： 完成上一步后，就可以进行提问了。主要是沿着流程进行发问，重点放在分支、产物关系上。看看是否存在分支的情况，各协作之间是否有交付物。
三确认： 最后一步就是自己讲一遍流程，和客户代表或者业务产品进行确认是否有理解偏差的地方。
以医院APP取号业务为例
页面交互是交互文档的主要内容可以详细说明界面中元素的来源，控件的交互方式，数据的样式，字段的长度规定，页面元素的状态变化等。每个交互页面的内容应该包括：文档页面标题、界面标题、界面、设计说明。
文档页面标题：一般在每一页文档的顶部。写明当页内容是属于哪个模块或流程的，让看的人不容易迷失；
界面标题：注意命名，方便交互稿中的互相联系，如“跳转【XX页面】”，“回到【XX界面】状态”；
界面：界面尺寸建议按实际界面的比例缩小，避免你想当然的设计并不符合规范，也避免一个界面太大影响阅读效果；
设计说明：逻辑关系、操作流程或反馈、元素状态、字符限制、异常/特殊状态 等等，都可以放在设计说明中；
随着科技的发展，人们的工作方式打破了空间、时间的束缚，传统线下场景逐步迁移到线上，衍生出大量的工具型产品。由于实际业务场景灵活多变，为了尽可能覆盖场景需求，工具型产品往往功能庞大且逻辑复杂，经常会收到用户反馈产品「复杂、难以理解」。对于工具型产品的设计者，如何「简化设计」是他们必须要面对的重要难题之一。
本文将从用户感知层面尝试分析用户感觉复杂的原因，并根据以往项目经验给出一些工具型产品简化设计的方法。
提纲：
1、为什么用户感觉复杂
2、如何简化概念，降低认知成本
3、如何让流程简短高效
4、如何简化页面信息布局
5、如何让操作更轻松
6、结语
你是否曾收到过类似的反馈：
“这文案是什么意思？”、“这能干什么？我需要干什么”、“那个功能在哪里？我找不到”、“要设置这么多项，好麻烦啊”、“这不能拖动吗？”...
这些都是用户感到复杂的反馈。从用户的感知层面分析，让用户感到复杂的原因可以划分为四大方面：概念、流程、界面、操作，以下将详细阐述原因。
导致用户感觉产品复杂的其中一个主要原因是：用户难以理解产品的概念模型。概念模型指事物的基础定义及行为模式。（例如：汽车，一种在陆地上行驶的交通工具。通常需要司机驾驶，需要消耗汽油... ）用户根据概念模型对事物的行为进行预测，构建出自身的心理模型。
因此，当产品没有清晰、准确地传达出概念模型，将导致用户产生错误的心理模型。用户需要在大量探索过程中，逐步纠正自己的想法，最终才能了解产品实际的概念模型。
另外，根据「雅各布定律」和「设计心理学2：与复杂共存」，用户基于以往积累经验去理解新事物，即在使用产品前已构建心理模型。而当产品的概念模型与用户的心理模型不匹配时，用户在使用产品的过程中将持续产生认知冲突，也将给用户带来巨大的认知成本。尤其对于传统工具型产品，颠覆型的概念模型，反而提高用户的认知成本，让用户感到复杂难懂。
1.2 流程复杂
工具型产品的流程主要分为两方面：单功能使用流程、多功能组合使用流程。
在单功能使用流程方面，难免会遇到一些功能在生效前，需要经过多个设置步骤的情况。虽然环环相扣的流程能够降低产品的出错概率，但却会给用户带来更多的成本。对于每个步骤，用户都需要经历「理解」-「操作」-「反馈」的环节。在一些情况下用户甚至不堪忍受，直接放弃使用功能。例如，在Airtable中创建甘特视图，需要经历3步才能完成配置，查看到效果。对于一些抱着尝试心态的新手用户来说，这是难以接受的体验：在还没理解功能的作用效果前，就要经历如此复杂的流程。
而多功能组合使用流程方面，工具型产品在产品功能设计层面，往往将功能的颗粒度设计得相当精细，以灵活满足各种场景需要。就Excel中的单元格而言，可设置单元格字体、单元格背景、单元格边框。但如此精细的功能设计将导致，若用户需要简单实现整体的目标效果时，其操作流程就变得十分的冗长。甚至在一些需要重复设置的场景下，工作量将几何级数地增长，让用户的工作流程将变得极其复杂。
1.3 界面复杂
大多数工具型产品都希望能在一个界面让用户完成所有任务，却忽略了用户在现实场景下的使用流程。通常一个任务完成的前提是，需要按照一定的步骤完成若干个细项任务。若无法聚焦于每一个个细项任务，而需要耗费大量的时间精力来排除其他信息的干扰，则会产生“注意力被分散”、“太复杂”等体验感受，导致最终任务完成难度增加。
对用户来说，界面内的信息越多负担就越大。工具型产品通常伴随数量众多的功能和选项，一味的平铺功能，只为了展示自身的功能多样性，缺乏合理的组织布局，导致用户需要在几十甚至上百个选项中进行选择，则会大大降低用户使用效率。
1.4 操作复杂
设计者在不考虑具体操作场景的前提下，不同功能均使用同一种交互方式，名义上为了让用户降低学习成本，但实际上却是不负责任地将复杂的理解过程转移给了用户。对于用户而言，复杂的操作可以分为两种：一种是「步骤复杂」，例如需要多次点击、页面跳转、设备切换等；另外一种则是「认知复杂」，例如交互方式与心理预期不匹配，需用户自行转换。无论是哪种，对于工具型产品而言都是灾难的。
除此之外，缺乏及时的反馈也会给用户带来不必要的麻烦。用户需要反复操作比操作中的冗余更可怕，就像高速公路的减速带，不断降低用户的效率。
2.1 隐喻、类比已有事物
当产品的概念模型越趋近于用户的心理模型时，用户就越感觉产品容易理解和使用，所要求的使用能力和学习成本就越低。而用户心理模型是根据用户的目标，以及其过往的经验构成的。因此在设计产品的概念模型时，应尽量使用隐喻、类比的方式，让产品的文案概念及交互行为模式）与用户所熟知事物相近。从而让用户建立联想，激活行为记忆，降低认知探索成本。
HyperCard，苹果的早期时间的一款脚本系统。它以「Card」对产品进行命名，同时在产品交互形态上以一叠卡片的形态呈现。这让用户很容易就联想到现实生活中的卡片小册子，进而快速地了解到产品的大致行为模式。
需要注意的是，传统工具型产品的用户往往已被已有产品教育，积累了一定的使用经验、习惯。对于此类产品的概念模型简化应慎重考虑，因为用户所建立的心理模型是较难改变的，颠覆性的变化会让用户之前付出的学习成本付诸东流。此时可尝试用户的其他感知层面切入（流程、原型、操作），以探索简化的可能。
2.2 巧用大白话
在实际业务场景中，难免会遇到概念新颖、逻辑复杂的产品功能。由于用户从未曾接触过类似的事物，未建立起相应的心理模型。在设计产品概念时也就难以使用隐喻、类比的方式来降低产品的复杂度。此时可采用「目标导向」的设计方法，帮助用户快速理解产品功能。因为用户除了基于过往经验建立心理模型，还可根据目标而对产品的行为模式做预测。
与其生搬硬套地创造概念，不如在合适的使用场景下，使用目标导向的大白话，清晰的传达出功能的目标效果。让用户快速了解产品功能的目标效果，减少全新概念的理解成本。
例如，在交互原型设计中，按钮往往存在多个状态（默认态、悬停态、点击态、禁用态）。Figma对其赋予概念“变体（Variants）”，用户难以对此概念产生目标效果的联想，无法建立起对应的心理模型。而在MasterGo中，亦存在相同的功能，但使用的是更加符合目标效果的大白话“组件状态”。
3.1 快速、直观呈现效果
对于工具型产品来说，效果直观是非常必要的。一来能让用户的探索快速获得反馈，降低用户的理解成本。二来能带来更加轻量的操作体验，鼓励用户探索，给予用户充分的掌控感。工具型产品的设计者应以此作为设计理念之一。但难免会遇到产品功能的逻辑流程较为复杂，需要经历多个环环相扣步骤的情况。而研发者往往更关注与代码的逻辑及可维护性，更加推荐逻辑严谨但流程冗长的设计。这时设计者应坚守设计理念，不断在用户体验与功能逻辑中寻找平衡，贯彻落实设计理念。
对于冗长的流程，设计者可通过以下方式解决：
（1）根据场景自动化配置
良好的产品应该是聪明、高情商的，能够根据用户的实际情况进行自动化的配置，以减少用户操作。在进行自动化配置时，应谨慎梳理清楚用户的所有场景，以及每种场景意图，避免过度聪明，导致画蛇添足。
例如，在Notion中可一键创建Timeline视图，无需用户进行任何配置。因为其做了场景自动化配置处理：自动配置所需要的字段。
（2）清晰的修改配置入口
在进行自动化配置后，不可避免可能存在场景理解错误的情况，导致自动配置的结果不符合用户实际情况。此时应提供清晰的修改配置入口，例如在用户可发现错误的地方中提供入口，允许用户在发现错误后即可发起修改。
（3）异常后置处理，先让用户用起来
不应要求用户在功能生效前处理完所有异常。因为对于每一个步骤，用户都要付出理解及操作成本。尤其在处理异常情况时，用户需要耗费巨大的成本，极有可能因阻碍过大，从而放弃使用功能。设计者应将异常后置，确保用户能都快速查看功能效果并使用起来。对于异常的问题，应允许用户后续持续处理，不阻断功能的使用。
例如，在Figma中导入sketch文件会遇到，多种格式适配问题。但不影响导入流程以及FIigma的正常使用，用户可以在倒入后在对异常进行处理。
3.2 基于目标组合功能，一键快速设置
一般来说，工具型产品服务的用户群体较广，需要满足丰富的个性化需求。在产品功能设计上，功能的颗粒度较小，能支持精细化的配置。这样导致用户需要实现组合的目标效果时，需要执行多个功能配置，整体的配置流程较为冗长、复杂。设计者在设计工具型产品时，除了要考虑单个功能的使用体验，也要从用户目标出发，全局考虑用户使用产品的整体流程体验。
如何既能保持产品的「灵活度」以满足丰富的场景，又能减少整体操作流程，提升用户效率。「一键操作」及「自定义脚本」是较为有效的方法。
（1）一键操作
基于用户的目标，可以对一些列相关的功能进行组合，允许用户一键设置，快速达到目标效果。同时应存在更多配置的入口，允许进阶用户进行更加详细的配置。例如，Keynote中可对文本框进行快速样式设置，设置内容包含字体颜色、文本框背景颜色。当用户需求较为简单时，只需设置一次即可达到目标效果，而无需设置多次。
（2）自定义脚本
自定义脚本，指允许用户将一系列操作/设置组合为一个操作组的能力。在一些进阶场景，用户往往存在个性化的需求，对产品功能有着相对固定的使用习惯。自定义脚本，能够极大帮助用户减少重复性的操作，提高整体效率。
在Figma中，充满了类似概念的设计，如：组件、样式（文字、颜色、效果）。用户可自定义保存相关的配置参数，以方便多次复用或一键修改。
4.1 围绕行为组织功能，走一步看一步
在设计界面原型时，需要先了解用户的任务目标，用户想做什么，先做什么后做什么。充分掌握用户心理模型的行为路径，基于用户的行为路径进行组织功能，以确保用户在每个环节中所看到的信息都是必要且准确的。工具型产品通常拥有多个可选设置项，拆分任务步骤可减少用户被非必选项的干扰。
除此之外，不同的用户角色的行为路径也会有所不同，例如：创建者，协作者，以及是否有编辑权限等等。不同的用户场景对于功能的诉求也是不一样的，而这就需要设计师从产品的定位，主流用户以及使用习惯综合考量。在优先满足主流用户场景的基础功能上，再进行其他场景的功能增减。
4.2 功能层级分区，巧妙地藏起来
（1）功能分区
George A. Miller在《神奇的数字7加减2：我们加工信息能力的某些限制》中表明，人的大脑最多同时处理7±2个信息块（即5-9个），若超过则出错的概率将会大大提高。对于无法避免复杂信息的情况下，可以将烦琐的信息分块，组织成清晰的层级结构，例如：微软Office 中顶部工具栏包含上百个功能选项，为了便于用户能快速找到想要的功能，他们将所有功能进行分块，包括：字体、对齐方式等模块。每个模块下再细分具体设置项，具体设置项又包含了其它功能。基于清晰的层级结构，用户可快速通过「字体模块」-「字体设置项」- 「微软雅黑」三个层级中快速找到想要的选项。
值得注意的是在信息分块时，需制定出清晰的划分界限，可通过询问不同的用户来判断界限是否清晰。
与此同时，布局效果是否清晰，对于简化界面设计而言同样重要。合理运用「格式塔原理」中的「接近性原则」，将同类元素放在一起让用户在视觉上感觉是一组，再根据同组元素中的重要性不同，大小上也应有所差异。做到让用户只看一眼便可快速找到想要的功能。
（2）隐藏高级功能
「帕累托法则（二八法则）」同样适用于工具型产品设计，即20%的功能影响80%的用户体验结果。换句话说，大部分普通用户经常使用的基础功能仅占20%，但影响程度却远超于剩下的80%。所以需将功能划分为基础功能和高级功能，在优先展示基础功能的前提下，再考虑高级功能或自定义功能的展示，必要时可将高级功能或自定义功能进行隐藏，但前提需是可见的。例如：更多设置，更多选项等，即对专家用户始终保持可见，但又不打扰普通用户。
5.1 减少不必要的操作，使用更自然的交互
简化操作的过程中，针对不同的操作赋予最自然的交互形式能减少用户操作过程中的精力消耗。自然的交互应该是用户无意识的操作，是基于过往生活经验，阅历，学识等的一种本能，几乎不需要过多的学习成本即可完成。例如：用户旋转一张图片。相对于在输入框中输入旋转角度参数而言，将光标直接操控在图片上旋转显得更自然。输入需要至少三步（点击文本框-敲击键盘数字-点击确认），而直接旋转只需要两步（点击-旋转）。因为对于用户而言，点击图片进行旋转更接近现实生活中的操作，不管是交互步骤还是心理认知上，都会降低用户的操作难度，让用户觉得产品更简单更自然。
5.2 提供及时的反馈与帮助，避免重复操作
在操作过程中得不到反馈，出错后再重新填写，同样会增加操作的复杂性。在尼尔森十大可用性原则中，第一原则就是系统状态的可见性。系统需要让用户知道自己在做什么，需要让用户知道系统做了什么。例如：在表单填写时及时反馈是否出错，在格式设置时及时反馈是否生效，可以让用户少走弯路。必要时给用户提供帮助也能简化用户操作的复杂性，提高操作的成功率。
引用《简约至上》中的所说：创造简单用户体验的秘诀就在于把复杂性转移到正确的地方。任何产品都具有一定的复杂性，设计的目的不是为了消除所有复杂性，而是将它们放到最合适的位置。简化产品的复杂性替用户排除不必要的干扰，通过设计师的努力给每一个用户带来简单、愉悦的使用体验，让复杂的工作更简单。
作者：腾讯ISUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
7秒的消费决策中，67%的决策取决于色彩。
色彩是我们感知世界的重要媒介，在设计中仅次于功能的另一要素。色彩与我们的生活息息相关，怎样科学配色、灵活用色成了绝大部分设计师的难题。
作为一名拥有多年拧螺丝经验的设计师，不免每天都会和色彩打交道，在配色的过程中，你是否也曾遇到过以下困扰：每次做项目随便吸色？
盲目运用色卡？
配色总是看起来不舒服？
色感差，天天被老板和同事Diss？
…
接下来，请你花几分钟看看谷歌等其他大厂，都在用的系统配色方案。以下以船长BI为例，做品牌色彩的规范引导。
船长BI：
深圳船奇科技有限公司-是中国专业的跨境电商SAAS系统服务企业。旗下船长BI，专注亚马逊精细化运营与大数据分析，为不同阶段、不同规模的企业提供全场景多维度分析，一站式精准推广和全链路供应链协同管理，帮助企业实现数智化运营。同是船奇科技也是亚马逊SPN服务商。
01
1-1 设计主张
船长BI系统是亚马逊精准化运营及大数据下钻分析的高效化共同体。从单功能运作到多功能融合，再到大数据多元化产品下钻、闭环及溯源，打破了亚马逊跨境运营服务商单点运作的局限。我们希望新的品牌色，能够为船长BI在跨境企业中营造更加权威、高效向数智化转型的视觉感知。
船长BI 设计语言：英文Captain BI Design Language简称CapDesign。
经过团队的诸多调研到佐证,我们将品牌标准色太平洋蓝(Pacific Blue)，升级为更加科学、权威、智略的明亮立体的黑绿松石色(Dark Turquoise)。黑绿松石色在跨境电商行业中具有更多神秘的数智化意味，在实际应用中隐含着更多的生机和信任，表明了船长对进入数智化运营新挑战的气魄。同时，品牌色的升级能够快速区别于竞品，形成船长BI独特的色彩感知，通过色彩感知形成品牌记忆。
色彩命名源自潘通Pantone。
1-2 创建调色板
人的视觉系统在辨别颜色时，不会把色光分解成RGB或者CMYK几种单独颜色，而是按照色相度、纯度和明度来判断的，也就是HSB。HSB模式可以完美固定HSB中的某一个参数，只对其他两个参数做改变或者只改动其中的一个参数，符合人对色彩差异幅度的感知，而RGB、CMYK都是牵一发动全身的节奏。↗
我们以CapDesign品牌基准色#2AC5D4（H=185\ S=80\ B=83) 为起始点，S饱和度、B明度保持不变，H色相以185°为起点，以15°为增量或减量标准，生成24色色板。这个色板是我们选取辅助色的重要依据。
02
拓展丰富的辅助色
2-1 以邻近色、互补色、对比色为原则，选择绚丽多彩的辅助色↗
为了保有更多CapDesign 的品牌基调，我们选择了相对较多的邻近色，以保证整体色韵的清爽感和数智科技化意味。并利用对比色及互补色扩展色相，选择更加丰富多元的辅助色，使其色相对比鲜明，以保证能色彩够满足各种复杂场景。
Q：色相位到底选择多少个合适？
A：有的产品选择7个色相位，有的产品选择10几个色相位，都是允许的，选择的依据取决于：
1.色彩对比明显，选择色相数少；色彩对比柔和，选择色相数多；
2.产品功能的场景简单，选择色相数少；产品功能的场景复杂，选择色相数多；
Captain BI 是亚马逊运营与大数据集成，功能交叉比对及数据可视场景复杂，为迎合业务发展需要，CapColor选择的色相位为13个。
2-2 校正辅助色(波长和振幅)
虽然我们保持相同的饱和度和明度，使用科学的方法得到了较为合适的色相，但由于每个色相的波长各不相同，导致色彩在感官感受上存在差异。
在可见光波谱当中，波长越长其穿透力就越强；红色的波长是最长，穿透力就最强，感知度最高。↗
为了让不同色相在视觉感官上看起来更加协调，需要对色板的明度和饱和度进行反复的校验，以保证视觉感官更加和谐舒适。
校正原则
A.色相最好维系在同类色(色相环中15°夹角内的颜色)↗
B.色相感官保持平衡(明度和饱和度)
C.保证视障群体的识别度(WCAG 对比度)
调色的技巧
浅灰色调: 饱和度减少(S↓)，明度增加(B↑)
深色色调: 饱和度减少(S↑)，明度增加(B↓)
使用HSB调色模式时，可以参考以上规律，能让快速调和想要的颜色。校正后得到了以下色域清晰、对比明显的主色及辅助色。并且针对视障群体进行了色彩测试。
2-3 拓展梯度色谱
校正主色和辅助色后，我们需建立完整的梯度色板，来满足不同场景下颜色的应用。建立色彩层级，以提升品牌感知，达到信息传达辨识、强化界面层级等作用。
在梯度色板系统中，很多配色产品都是使用Tints and shades系统：通过在原有色相的基础上增加白色或者增加黑色，来改变它的明度和饱和度，形成梯度色板。但这种方法得到的调色板往往比较刻板生硬。CapColor在Material Design-Color的基础上进行了细化，构建更有层次感、空间感、立体感的梯度色板。
CapColor梯度色板：
1.在Primary的基础上，使用Tints and shades系统找到Light和Dark：
Light=(White+primary) 95%叠色；
Dark=Black 60%叠色；
Primary=原色相。
2.结合Material Design-Color实践，得到CapDesign梯度色板及相应的参数。
CapColor选择10阶梯度，对比稳健，更能凸显船长系列产品权威和成熟的形象；9阶梯度相对生硬跳跃，12阶梯度过于柔和平滑。
有的色相穿透性强、饱和度高，所以还需要进一步的校验，如蓝色 RYB：
运用以上的方法，得到CapDesign丰富的调色板，为后期业务做支撑：
03
易用的中性灰色
Captain BI系统大部分是由容器、面板、列表、卡片等其他组件及元素构成。中性色为系统锐化布局、表达边界、建立信息层次起到决定性作用。
3-1 中性色
中性色的搭建同时满足暗黑模式、换肤及印刷等诸多场景，故在实现时按照透明度的呈现方式。
3-2 黑绿松石灰色
中性黑绿松石灰色解决更多复杂的场景，如表格和表单双底色、图标的颜色等。中性黑绿松石灰色增强布局、区别背景，起到强化信息层次的作用。
黑绿松石灰在中性灰色的基础上增加色相和饱和度，这样得到的蓝灰色还是有些许生硬，还需要对饱和度和明度进行微调，让颜色更有层次感。
中性黑绿松石灰的方法：
在配色模式HSB中：
H=185(Brand Color)；
S=3(必要时微调)；
B=保持不变。
3-3 WCAG 2.1测试
为保证视障用户的使用，保证足够的对比度，CapDesign 遵守 WCAG 2.1 的标准，对调色板对比度进行了可用性测试，为后期灵活用色奠定基础。以中性灰色为例：
WCAG 2.1中规范了A、AA、AAA的对比值范围及使用场景，感兴趣的朋友可以前往WCAG 2.1官网详细了解，在这不在赘述。
3-4 场景案列
实践是检验真理的唯一标准，以下通表格的微交互对中性色进行完美的诠释：左边的表头和表格背景粘连到一起，视觉及信息识别困难。通过交叉运用中性灰色，明显右边的表格结构、信息层级得到强化，视觉更聚焦。
结语
主观情感的取色，一开始可能没遇到什么大问题，但随着产品不断完善，主观取色往往不能满足业务发展诉求。科学的系统配色，真正满足和服务设计；同时对设计一致性及提升团队效率起到肯定的作用。
通过这个漫长的配色过程，你是否重新审视过去设计中的配色方法？希望对配色困扰的你有所帮助。
色彩系统中的系统配色部分已经完成，接下来我们将死熬，续更系统配色在实际项目中的应用，做到科学配色、灵活用色。
作者：楚焱UX
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
做b端产品的设计师都知道，为了提升开发效率，我们的前端在投入开发前，一般会选择一种第三方前端框架作为底层来进行组件封装。所以开始内容前，我想先聊一聊第三方的UI框架。
目前国内主流UI框架且个人工作过程中接触使用过的有：
其他不太常用的框架我自己了解不多，如果有了解的朋友，欢迎在留言区讨论。
我个人比较喜欢使用【Ant design】，一方面最先接触Ant design，另一方面资源很全，下载的源文件基本能满足大部分通用功能，很多控件（比如：各类选择器、穿梭框等）的视觉与交互体验也相对较好，可直接复制组件粘贴至设计稿中。
但前端同学更倾向于【Element】，我目前做的几个项目都是基于Element组件封装的，据前端同学说他的组件封装简单容易修改，对于没接触过框架的同学也方便上手无障碍。所以基于此，为了提升开发效率，兼顾全局，我们的项目都是采用的【Element】，我也是花了一些时间专门熟悉新的组件。
1.1UI样式对比：
截取各官网中 Table 的基础界面样式，如下图：
两个产品示例出的默认组件样式有些许区别，【Element】直接列出了不同的样式类型， 而【Ant design】是结合功能综合展示的。样式皆可根据相对应的参数进行修改，前端同学在开发过程中可直接按照设计稿的标注进行修改样式即可。如果风格一致，直接使用组件默认样式也是可行的。
如果是数据信息平铺且单一的项目，直接使用第三方组件库表格的基础用法，视觉与交互也能够满足大众审美和习惯，普通后台简单数据表格是能够满足需求的。
像我现在负责的其中一个项目是供应商后台管理系统。就是直接用【Element】，作为数据统计信息展示完全足够，运营运维同事使用时也表示还算满意。
但有些复杂的B端后台界面除了承载信息，还有很多相关的操作与处理。产品供给B端客户使用，数据文档量大且类型繁杂，并且相互间有不同的关联关系。很多情况下需要重新根据需求设计，且为了兼顾开发工作量尽可能的在设计上找到折中方案。这就要求最好能够从框架组件中衍生出来，最少的修改满足更多的需求。
因我们已确定使用【Element】故而以下所有的对比，以此框架中的 Table 组件功能为基准，进行功能有无与相关差别性的比较。
由上对比看来【Element】与【Ant design】功能基本一致。
需要注意的是：上图没有的功能组件，并不代表是不能够实现，前端同学是可以基于组件重新写的。
可能很多人会问市面上已经有 Ant Design 如此成熟的 B端设计框架后，可以选择直接使用，为什么还要增加开发的负担。
开源确实是非常好的一件事，但是从另一方面考虑，市面上包含Ant Design和Element这一类平台，都有很多不同点，同时并不是所有的组件Ant Design 都会提供，企业级产品会有很多自身个性化的需求，我接触的项目一般是把 Ant Design 当作基础框架，或者底层参考，在此基础上去做设计框架。
当然在小项目或者初期产品的情况，为了提升效率降低成本会直接使用开源组件库，各有千秋，最终目的是为了更加有效、好用的完成项目。
当使用组件时，并不需要设置间距等规范，可直接选择一种一般不会有太大问题。更多的是关注表格中承载的数据字段类型。比如：
文本字段：可点击的字段、普通文本类、数字字母等，此类长短参差不齐的，最好给出左对齐；
既定字段：日期、时间、部分枚举类等，字符数一致且较短的，可与表头标题居中对齐；
特殊字段：金额、状态标签、类型标识等业务性较强的，可根据相关特性与阅读习惯确定其对齐方式。
不论何种对齐方式，都需要考虑到该字段可能存在的极端情况。比如：普通文本若超长，可在鼠标hover状态时将该单元格展开列出全部字段信息。或以tips形式，跟随鼠标位置展示全部信息。
表格（Table），又称为表，是用来收集、整理、组织、分析数据的二维矩阵。是B端产品中一种常见的信息展现形式，它是所有B端组件中信息展示密度最高，同时涵盖了B端的所有场景的一个重要的组件。
表格属于列表的一种。列表分为两种：
列表拥有一对多的数据结构，能够让用户理清一条数据下的多个对应关系，并且多个对应关系是相互并列。列表能够将数据在一列中井然有序地展示，保持数据的有序与整洁。常见的使用场景比如邮件、待办事项等等。
在多维度的数据分析中，最常见的就是表格，使用多维度数据进行统一的结构化展示，让用户清晰地看到在同一主题下的多条数据的对比，使数据能够进行多维度的展示，保证数据的完整性。
本篇文章想要说明的重点就是多维度表格样式。
表格常和排序、搜索、筛选、分页等其他界面元素一起协同出现。在企业级中后台中，具有以下优势：
列表属于形式十分单一的组件，对于没有经验的设计师来说，会认为能够调整的地方实在太少，往往在思考层面就会有所不足。对于一个B端表格来说，它需要具备数据浏览、数据新增、数据操作、数据统计，因此功能多而全，很难思考解决问题思路。
通常设计师设计单个组件，都会有较好的全局意识。而到了多组件的联动时，就会出现问题。比如在表格中，除了表格本身，还会有搜索、筛选、视图、分页等操作，如果不对多组件的交叉使用进行思考，也会缺少对于这些场景的设计。
在列表中，会承载多种多样的字段类型，而每一个字段类型都会有相应的差异。形式的不同落到列表上就会有不同的呈现形式，在关键数值的处理上，也会差强人意。因此看上去简单的一个列表，其实会有很多需要设计的点。
设计过程中如何在满足业务需求的基础上平衡用户的浏览目的和设计者的传达目的，如何让表格在表现层更合理、在操作层更易用，是很考验产品设计师的数据整合能力。
对于多数B端管理系统而言，数据的查询和管理都是非常重要且高频使用的功能，所以常规项目中会包含大量的表格页面。甚至，有的中小型项目的90%的导航一级页面都是使用表格，而不存在其它页面形式。所以，表格的优劣对用户工作效率和平台体验可以产生决定性的影响。
而优秀的 B 端项目表格又不能只像 Excel 一样可以使用固定的模版，不同项目、页面、模块对表格的可视需求天差地别，需要根据具体情况具体分析。
表格的使用场景主要分为四类：数据浏览、数据新增、数据操作与数据统计。
表格的数据浏览从本质上就是对大量数据进行寻找与操作，在此场景下用户需要进行高效准确的数据查找。当用户需要对信息进行排序、搜索、筛选、以及相关业务处理等复杂操作时，表格结构能够很好地保持页面效果的稳定性与一致性，提升用户的操作和阅读效率。
表格的数据新增场景从本质上是将复杂的数据结构，通过系统字段类型的相应规则，录入保存到系统中。这也就我们常说的增删改查的“增”，通常是一个比较常规且高频的操作。
分为对单个数据的操作、单行数据的操作、多行数据的操作三种情况。
单个数据的操作：就是常见的快捷编辑，可以点击快捷编辑按钮，在原位对单个数据进行操作。入口一般在数据行内。
单行数据的操作：主要通常会采取两种路径进行操作：一种是进入用户详情页界面，对一整列数据进行编辑，这种情况通常都需要多个数据进行处理，因此进入编辑页面更容易寻找。另一种是进入弹窗进行操作，这一方案路径更加清晰便捷，同时和新增可以共用一套控件。
多行数据的操作：主要采取多选过后的操作方式：当用户想要对多条数据进行操作时，就需要对多个数据进行checkbox 的勾选，从而满足多行操作的需求。入口一般在筛选操作栏。
表格适合信息的归纳与分类，数据经过归纳整理和合理布局后，更易于用户在信息之间进行对比，快速定位、查询其中的差异与变化、关联和区别。
主要针对用户需要审查分析。目的是在通过大量的数据分析去得出某一些结论，由于关注的数据会有主次之分，数据与数据之间也会有内在联系，用户会更加跳跃地扫视页面，而且会更加反复地审查数据。
表格的基本设计原则是“全面整合并呈现业务数据，提供顺畅阅读体验，便于用户发掘重要信息，进行便捷操作”，满足业务需求+符合用户心智模型。简而言之设计易读，易扫视，易比较，易操作的表格结构是表格设计的首要目标。
表格层级分明、一目了然，让用户更多地感受表格承载的内容信息而不是表格的形式。
对于提高表格查找效率，这里给出一些我个人的建议：
列表以易于浏览的逻辑排序，提供合适的搜寻组件帮助用户快速查找信息。
表格应该是可交互的，对于查找好的数据能让用户迅速找到对应操作进行决策，如导出、编辑等的快捷操作处理。
处理交互提效建议：
B端产品大多数业务场景都是使用基础表格，但在B端产品的业务多样性使得很多特殊的表格有它独特发挥的空间。除了了解基础表格样式以外，了解更多的表格类型也能帮助设计师在做复杂项目时更加得心应手。
基础表格样式，是由行与列的单元格组成，能满足用户多维度查看数据的需求。通常用于横向表格的纵列数据较少时，使页面不需要滑动条也可以展示完全。操作项一般置于页面最右侧，便于用户浏览完成后进行操作。
表格中的数据为包含与被包含的结构时，可采取树形表格。
每一个条目可展开或折叠包含的更详细的信息，也包含嵌套子表格。通过逐级大纲的形式来展现数据间的层级关系，让整个信息结构变得一目了然。非常适合大型数据表或者项目管理工具中。
一条主数据下有多条数据结构不同的关联数据进行嵌套时，这时候就可以用子表格进行创建。它能够对主数据进行更加细致的解释，详细地了解主数据中数据的含义。结合层级表的使用场景，多以查看为主，编辑需求较少。
设计中需要考虑：表格中当父数据删除时，子数据如何处理？设计上对父子之间的关联有着何种限制？
当一条主数据下有多条数据结构不同的关联数据进行嵌套时，这时候就可以用子表格进行创建。
它能够对主数据进行更加细致的解释，详细地了解主数据中数据的含义。从表象上看，就是在一个表格中还能嵌套另一个表格或其他信息。
当一个表格里面有多条数据在同一个小范围的维度进行展示时，或者说表头有很多分组进行区分，它就是交叉表格。
它能够通过硬拆分将数据进行切割，能够满足具体业务上的需求。
当一个表格里面有多种图表数据进行展示时，他就是图表表格。用户点击某一数据后，直接跳出数据的统计图，方便用户进行对比。同时这一功能也可以通过仪表盘这样的功能去解决，是目前很多产品最爱做的数据可视化。
除了在单元格中引用图表之外，很多时候都会提供图表/表格视图切换，便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式，这时候，表格往往只作为明细放在页面底部。大量的表格也会导致视觉的单调。
可以用卡片的形式来展示信息，将信息以组的概念呈现，单张卡片内的信息按优先级进行排列。此外，卡片彼此之间又形成一个整体。
卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
注意：在有限的表格空间内需注意卡片信息之间的间距，若卡片信息过长可做截断处理。
在实际工作中，上述表格类型还有可能互相结合，以更好地达到相应的分析目的。比如垂直–层级，矩阵–数据立体表等。
信息内容的有效传达是表格设计的本质，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上。所以，边框的颜色应非常淡，不能妨碍快速浏览。
表格有均匀而明显的分割线，边框单元格比较明显。
适合：对于数据之间的关系紧密（列信息较多而没有足够空间用留白来分割信息）且有对比关系的。
仅显示水平线可减少整个网格的视觉噪声。
适合：它能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比时的速度；因此对于所有数据集大小，此样式都是最常见的。
隔行交替使用不同底色来区分数据。
适合：每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法；对于较大的数据集，建议使用此样式，在较大的数据集中，交替模式将很清晰，并且不会引起特定行突出显示的混乱。
移除所有分割线，通过尽可能减少视觉噪声来创建极简外观。
适合：对于小型数据集，如果用户在阅读时不需要帮助就可以保持位置，则建议使用此样式。
前面我们聊了表格的行元素和列元素相交就会形成一个简单的二维表，行，列元素的空间组合就确定了一个个单元格。常见的表格布局有水平型、垂直型和矩阵型三种基本布局，分别强调行、列、单元格。
水平型会弱化列的存在，强调行信息的连贯性，适用于用户阅读信息时是从左到右，然后自上而下逐条扫描，适合大量信息的浏览，是b端产品用的比较多的一种布局。
垂直型是在行分割的基础上，通过强化列的视觉特征来突出不同列信息的对比。
矩阵型的表格有均匀统一的分割线，边框单元格比较明显，适用于列信息较多而没有足够空间用留白来分割信息的表格，同时我认为单元格合并的情况也属于矩阵型。
设计建议：
表格中所承载的数据信息才是主体，在进行表格设计时，尤其要注意去除所有非必要的视觉元素，让用户将注意力集中在数据信息上，而不是无关的边框、底色等。
表格由内（展示项）、外（操作项）两部分组成，其中内部构成元素包括标题、表头、表体等；外部元素包括筛选区、按钮区、底栏等，如图：
除了表头和列表内容外，其它模块内容都根据实际需求应用。任何表格设计的第一步都是制定大框架，即包含的模块和对应分布位置，再展开后续的细节设计。
1. 标题
标题是整个表格内容概述的名称，一般会放在表格的左上角，符合用户的阅读习惯，同时也能突出标题的重要性。但在有些情况严格意义上的标题则不存在，会被页面标题、面包屑或其他内容代替，主要看其能否表达对表格的概括。
标题尽量简洁明了，不要太长。如果标题名称难以理解的话，可以加二级提示，有两种常用样式：tooltips（常用）、二级提示语。
筛选操作区方便用户快速定位查询数据与操作数据，是承载表格核心功能“增删改查”的重要桥梁。筛选操作区的排序方式对整个表格“好查找”起到了至关重要的作用，所以表格设计筛选操作区的设计至关重要。
表头信息是对数据属性的分类或基本概括，可以理解为表格总结，表头也可以指行列标签，是对所属行或列的描述。表头也可以承担一些简单的筛选、冻结与排序，方便用户对具体的行列进行筛选操作。
表头是用户快速浏览表格布局的关键信息，表头字段应当符合人们的思维惯性，保证大部分用户能理解数据。
是表格的主体区，承载用户的每一条数据，也是整个表格的核心。是由一个个的单元格组成，单元格的排列组成行或列，行/列中的数据可以是文本、计数、百分比、状态、操作等任何形式，在表尾还可以进行数据统计，例如合计、平均值等。
单元格的大小行高都会直接影响用户使用表格的体验。单元格的设计上也会有很多设计思路，在后半部分也给他家提供了我自己的看法。
底栏位于表格最下方，一般展示正文的数据概要信息，有时也做数据的分类统计，或者配合筛选操作区放置批量处理操作、备注说明等内容。
分页是不属于表格当中，但当数据超过用户所设定的阈值时，就需要使用分页拆解数据，所以分页和表格是经常联系在一起的。分页一共有：基础型、迷你型、完整型三种类型。而如何进行跨页的操作，一直都是分页在B端中的难点，需要有好的思路与逻辑，在分页模块中与大家聊聊。
作者：789研习社 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
表格系列第一篇我们聊了表格的基础内容和表格的组成要素，包含表格由内（展示项）、外（操作项）两部分组成，如图：
表格作为展现结构化数据最为清晰、高效的形式，常和按钮、搜索、筛选、分页等其他元素一起协同，构成表格页。通常表格页面包含三个部分：数据过滤、数据操作、数据查看。
数据过滤是对数据进行筛选的部分，由搜索、筛选、标签这三个部分组成。产品设计上提供多维的筛选和排序，将操作者所关注的数据展示到前面，便于快速查看、对比、分析信息，是一种增加用户效率的有效方式。
一般搜索和筛选会同时出现，但是两者一般很少同时使用来对数据进行定位；
搜索的交互触发方式有“实时筛选”和“点击按钮触发筛选”。实时筛选只适合数据量较小、数据严谨的表格页面，建议谨慎使用。“点击按钮触发筛选”适合大部分表格场景。
因用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项。
用户搜索意图不明确时，将用户的查询与待检索的内容进行模糊匹配，使用模糊搜索时一定要结合自己的实际场景，慎重使用。
优点：只要有相关的内容都会被检索出来，减少了精准搜索带来的记忆负担；
缺点：容易把相关的信息也带出来，例如检索地址广州，把广州的相关编码也匹配出来。
用户在搜索时，针对某一数据字段搜索，来查找所需要的数据。
优点：搜索匹配精准度高。
缺点：每次只能对单一条件进行搜索。
搜索根据表现形式，可以分为以下四种类型：
单属性精确搜索：通过某个特定属性就可以快速定位到目标数据，具有唯一识别性的、高使用频率的、对用户决策有意义的。
切换属性搜索：可以设置几个常用的类别来快速切换搜索的维度，方便用户使用。
多标签模糊搜索：表格多个数据都具有特征，往往业务要求对数据的精确度较高。
多属性组合搜索：可以输入多个字段进行组合搜索（取并集），对空间的利用率高，适合更加复杂的列表内容。
筛选是将用户所需数据选出展示，其余数据暂时隐藏，通过筛选器的选择可以快速定位所需的数据，取消用户输入的过程，提升查找效率。一般筛选有三种形式：
平铺筛选就是将筛选项的内容，直接展示于页面之上，用于筛选条件很多，单独筛选条件对应数据无交叉，常见于信息密集型产品。
优点：可以承载多维的数据信息，选中项的可见性高，用户理解成本与操作成本低，且提高了用户筛选的效率。
缺点：占用太多页面空间，影响首屏的展示效率，增加用户的决策时间。一般配合“勾选即执行”使用，因此在执行筛选的过程（动画或加载时长）可能分散用户精力。
通常电商类产品在筛选区往往采用平铺布局。
条件筛选是最常用的筛选交互，便于从多个维度筛选，应对各种复杂的筛选情况。条件选择完后，选择触发筛选（若筛选条件不交叉可以选择实时筛选）。
优点：空间利用率高，起到了很好的收纳作用，整体页面更加美观。
缺点：当筛选过多时，信息量过于冗杂繁多。
2.3 表头筛选
优点：筛选当前列，更直观，一般情况下表单左侧数据筛选频次越高。
缺点：筛选的内容仅限于特定、单次列的筛选，对于首次使用者来说陌生，交互形式需要学习
2.4 如何合理的使用筛选项
信息排序：基于用户使用场景，以目标导向为依据，将高频的筛选项排列到前面，低频的筛选项置于后面。
默认折叠低频筛选项：当筛选条件有高低频之分，且对页面空间要求较高时，通过展示高频筛选项、隐藏低频筛选项，更好的提升用户体验。
所有筛选项都很低频：以点击高级筛选按钮的形式触发，将全部筛选项置于气泡或者弹窗之中。
在企业级中后台中，用户查看的数据往往属性较多且不唯一，通过简单的检索方式很难精确定位到目标数据，所以，在实际使用时，常会将大量非交叉关系的属性进行罗列，搜索、筛选、标签切换组合出现，形成多属性组合检索。
三、tab标签
标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容。数据类型在5个以下的建议采用tab页切换的方式进行交互，展示清晰，用户操作效率高；超过5个可以考虑下拉选择或模糊搜索。
优点：根据标签，可以很清楚知道划分，筛选的准确性高，切换tab就可以筛选内容。
缺点：分类需覆盖选项，并且保证每一项没有交集，分类不能过多，超过7±2个选项可选择下拉筛选。
在使用中，索引本身应该是0思考成本的，否则就失去了索引的核心价值。围绕这一点，有两个设计原则：
1）宁少勿多和高频前置：即不要揣测用户需要，最常使用的展示位置尽量靠前。
2）当搜索项不可避免的比较多时，可以进行分类展示，降低寻找成本。
数据操作是表格的操作部分，根据操作对象的不同，可以分为：
单行操作也称行内操作，常见的显性与隐性两种方式。
1.1 显性操作：
操作项显示在行内，直观；文字按钮操作项一般不多于三个，图标按钮不多于四个时，操作项跟在行条目后面；当超过时，建议将相对低频操作选项折叠收起，点击"更多"或“...”下拉显示。操作按钮致灰时，鼠标选中可显示原因。
如果单行操作不那么重要，或者说行操作过多影响用户阅读时，可将所有的操作进行隐藏；
当用户鼠标悬停时进行展开所有操作，界面简洁，留更多的空间给需要查看的数据内容，减轻空间压力，减少干扰。这种方式能最大程度上满足用户快速查看与编辑的需求，但是在实际使用中，用户的初次使用门槛较高，需要有一定的学习成本。
a、对齐式
将所有操作进行整齐排列，一般是一个操作对应一列，当有操作缺失时，展示为空，这种方式能够让用户直接了解到操作的缺失，但反复的出现会造成表格视觉上的冗余，适合列数较少的表格使用。
将所有操作按照一定的预设排列顺序进行平铺，这种方式能够适应B端的大多数场景，将操作都简单平铺出来虽然看上去简单粗暴，但是在实际工作中，也是一种不错的处理方式
设计点：操作按按钮是全局操作还是单行操作其实是可以根据具体业务场景来决定的，判断用户批量操作是不是高频功能，如果是，就采用全局操作，如果操作是低频操作，那么完全可以只提供单个操作功能。
二、批量操作（表格外）
批量操作适用于数据量较大的表格，通常把操作放在表外部上方，这样操作更便捷。批量操作允许用户对一行或多行对象执行操作，通常与复选框操作配合使用，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作，分显隐性操作：
较为常用，外漏操作简单易懂。如有赞的批量操作，表格左上角和左下角都有，这样不管用户从上往下选还是从下往上选的场景都能覆盖；飞书的批量操作外漏在表格表格的右上角，虽然按钮放在右侧符合用户右手操作鼠标的习惯，而且考虑到适配问题，但是批量操作的路径不符合用户的操作动线，路径变长，大家可自行抉择
容易造成记忆负担，增加学习成本，适合批量操作较低频的操作，产品没有那么复杂的产品。如飞书文档
统揽全局，无需选择数据内容即可进行的操作，常见的【新增】、【导入】操作。
数据查看是表格的主体部分，是信息的主要承载区域。在开始之前，我们先来看看该区的结构：主要由表头、行、列、单元格四个部分组成。
每个表头代表一个对象的属性，决定了下方每行对象要显示的数据类型。
表头在展示信息的时候尽量概括、准确、简化，达到节省表格头部空间，引导用户的注意力聚焦于表格中的数据本身。表头并不是表格的必要元素，当数据本身能自我表意的时候（例如邮箱），表头是可以删减掉的。
通常，表头的设计会和下方列表设计有一定的区分，标头文字有一定的标题属性，所以会通过背景色、分割线、文字加粗等方式来做区分。
根据表头的构成，可以分为以下三类：
除了容纳行标签之外，表头也可以添加排序、搜索、筛选等功能，通过对表头标签的筛选可快速完成筛选条件。这些功能受列的影响，一般只能做单次筛选。虽然表头筛选能在一定程度上节约空间，但对于复杂业务的产品来说，数据信息列多，高频筛选功能可能会被遮盖，表头复杂影响用户表格阅读，不推荐使用。
可配置列与配置筛选条件的功能类似，同样是考虑到不同角色的用户，查看数据的视角不一样，对应的关心的字段也会不一样。
有些表格由于数据量较大，需要对页面的上下滚动完成对数据的查阅，对表头进行固定，可以帮助用户更快地找到单元格的属性和含义，尤其是单元格属性信息数据没有特征时（比如都是数字、百分比、姓名等）固定表头可以大大提高使用效率。
当然还有固定列，当表格需要展示不同类别的数据较多一屏展示不下，可以对首尾字段进行固定，让用户通过左右滑动来实现对数据的快速翻阅，满足用户对数据的认知以及对数据操作的需求。
注意尽量避免横向滚动：正常鼠标横向滚动是需要用户按住 「Shift + 滚动」 才会使表格进行滚动，对于所有的鼠标用户而言，横向滚动都是极为痛苦的。
表头在能够概括的情况下，尽量简炼、准确，一般可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用。当数据结构比较复杂的时候，使用多级表头来体现表头与数据的层次关系。
对于比较复杂的表头，可以定义一个专有名词，如果有需要解释，则在字段名称旁边加说明小图标(小问号)。鼠标hover上去对专业术语或用户不常见的名词给予该字段的详细解释，同时满足新手、普通、专家用户的需求。
如果表格数据可以自我解释，表头就不是必须的。例如电子邮箱的收件表格，每列数据区别度高不会混淆，去掉表头也能轻易阅读。
表体部分所需要注意的设计点比较多，内容包括了数据的对齐方式、字体、分割线、行高、数据显示、单元格、行与列等，下面我们来依次聊聊。
表格内数据按照格式塔原理进行对齐，能让表格更加规范易理解，营造出良好的视觉引导线，视线流动更顺畅,提升数据的浏览效率，让用户快速的捕捉到所需内容。其对齐规则如下：
符合正常的心智模型，便于用户扫描过程中快速定位到下一行文本，左对齐的文本在展示的时候起到了纵向分割线的作用。多行情况下，居中和顶部对齐都是可以的。
包含金额、长宽高等需要关联比较的数字字段，这是因为我们在对比数字时，首先看个位，然后十位、百位等。
比如日期（2020-11-11），状态文字（未审核、已收款等）或者存在布尔关系的文本（是/否、男/女等），字段固定不变，居中对齐能更好地信息呈现。这里根据业务也可以按照文本型左对齐处理，让用户查看表格不会感觉混乱。
对齐方式保持相同可以使表格更好阅读，上下文保持一致，能保持表格竖直方向整洁，营造一致性和上下文环境。多级表头：多行或多列合并居中对齐，最底层表头可以按其数据对齐方式对齐。
使表格更加规则，视觉统一提高操作效率。
表格数据一般包含文本和数字，良好的字体能提高表格本身的阅读性。设计上需要注意以下几点：
表格中的数据要根据数量级确定展示形式，不需要精确的数学呈现，可以让用户更快地查找信息，下面是展示形式的建议。数据的度量单位无需重复标注，只需要在表头标识清楚即可，注意同一列单位保持一致。
深入了解用户需求，根据需求为用户提供差值、升降变化、合计值、平均值等直接展示形式。
表格中字体保持一致，文字信息字体统一、数字信息字体统一即可。数字信息字体选择——建议等宽等高字体，等宽的数字在同一竖线时更容易对比。推荐以下几款数字字体在表格中有更好的呈现效果，分别为：微软雅黑、Helvetica Neue、Helvetica、Arial、sans-serif。
设计表格时，尽量避免任何装饰性字体，简约至上才是关键
不要出现衬线字体：因为个性会产生阅读噪音，不利于用户对数据的理解和思考。
不要出现全大写字体：因为它很难读，需要转化思维。
不要出现使用斜体：易引起视线疲劳，影响阅读。不要出现多种字体：保持风格统一。
在表格设计当中，每一条线都有着它存在的意义，比如：
当表格中展示横线，隐藏纵线：用户的横向阅读体验更佳，强调一条数据的完整性，能够让用户进行快速地对应。
当表格中展示纵线，隐藏横线：用户的纵向阅读体验更佳，强调数据上下间的对比，能够让用户找到同一纬度数据下的对比。
在表格设计中，合理地使用分割线可以实现对表格行与列的强调。按照分割线的分布情况，可以分为4种类型：网格型、水平线型、斑马条纹型、极简留白型。这个部分在上一篇已详细说明。
设计tips：表格具有的颜色尽可能少，颜色和可读性是密切相关的，要合理的使用颜色，普通表尽量使用简单的背景色和点缀色。
背景色方面，除了行/列交替颜色(可以区隔内容，引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法，还可以对表头表尾进行视觉区分，但不能增加过多颜色以引起混乱。
分割线颜色尽量不要与背景色相差太大。当字体选择深灰色，背景为浅白色时，边框选择浅灰色，这样可以减少我们视觉疲劳，不会使表格看起来令人生畏。
分割线和斑马纹的应用色彩都不应该太深，如果你项目中对表格有比较多的选中需求，那么就不太建议使用斑马纹的格式，因为选中背景需要被高亮，那么一个列表就会出现 3 种颜色，是要尽力避免发生的。
开发同学工作的时候，使用的是盒子模型，设计师在出设计图的时候也要遵循开发逻辑。
为了让表格中的文字高度看起来舒适，有着视觉的呼吸感。我们首先得了解影响行高是由文字的高度以及上下间距组成。因此我们得出：
单元格高度=内容高度+上间距+下间距
单元格的尺寸包含：文字行高建议设为字号的1.5倍，上下间距设为字号的1.2倍。
对于单行显示数据内容的表格，建议行高约为内容高度的2.5-3倍；对于多行显示数据的表格，建议行中内容的最高点与最低点到行框的上下边距略小于文字高度。
当数据有单行信息展示有多行信息展示时（或长度不固定），要定义内容的行数（根据业务），根据行数确定行高多出的内容做省略处理。
固定行高时可以规范几种不同的表格行高，例如在我日常工作中规定了3种行高56px80px110px，行高较高时，我们数据内容都进行居中对齐就会有一些问题。有些单元格只有一行信息，有些有多行信息，会使页面看起来更混乱，信息查找速度降低。
表格行高跟随行内占用最多行数的单元格变化，设置固定的上下边距，表格行高随着数据信息的换行而变化如下图。
单元格数据一般有文字、图标、头像、进度等，在具体业务中，如果你找对了用户想看的关键数据，将会大大提升用户体验，反之则干扰用户查找信息，对于较为重要的数据可以进行关键数据的标识设计。
标签：关键数据较多，颜色与视觉重量要做区分。
图标：名称与文件类型图标区分。
人员信息：展示在表格中也十分常见，通常会用头像+名称的方式，例如下图temabition和飞书中对人员信息的展示。
度量单位的使用：其中的关键区别在于数字的大小。数据的度量单位无需重复，一般在表头标识清楚即可。
进度条：进度条或简单的数据图，它更能直观地展示数据的进度状态，方便用户对数据信息做判断如下图。
关键属性标识：比如用户重点关注数据状态、某些数据的上升和下降等，可用符号进行标识，帮助用户快速定位到目标信息。
空表格：表格数据为空时要给予一定的提示信息或快捷操作，让用户更快地进行对数据的操作。
空单元格：当表格单元格中没有相应数据时，要避免直接留出空白单元格。空白格容易造成用户的困惑甚至误解，用户会搞不清楚到底是没有数据，还是根本没有值？
正确做法是，数据不存在（数据库中没有该字段）用“-”，没有数量（数据库中有该字段）用“0”，且小数点后位数、单位，都要与上下单元格保持一致
是对单条数据的修改，直接在单元格编辑信息的形式有很多，针对不同的数据提供对应的编辑方案。
包含：原位编辑，悬停气泡编辑，下拉状态编辑，点击弹窗编辑拖曳排序等等。针对不同的业务性质对单元格采用不同的交互形式。
拖拽排序为用户的自定义排序，在用户拖拽时页面布局保持不变，适用于数据量较小有自定义排序的情况下。
可以通过视图切换查看更多细节，例如在teambition中支持对任务的表格/列表/看板三种视图的查看，每种视图的侧重点不同，可以 适应不同角色用户的不同专注点。
工作中常常会遇到单元格数据过多的情况，常见的方法有两种：
1、定义一个单元格长度或字数限制，超过该范围以"..."显示，鼠标悬停时出现气泡显示完整内容。
2、折行显示，这种方法让平铺直叙，用户可以直接了当的看到所有信息，建议不要超过三行，超出可“...”显示。
3、允许用户拖边框设置列宽，并记录设置。这种方案弊端是会占用横向的空间。
列宽的设置对于用户的高效阅读还是很有作用的，在设计时要根据具体的业务信息进行分析，列宽严谨的处理方式有三种：
第一，通过栅格，由列的数量决定列宽，主流框架组件一般是这种；
第二，可以固定部分列的宽度，其余列则按百分比处理；
第三，在固定宽度的基础上，允许用户自由拖动调整列宽的大小。（当然我觉得不要太拘泥这个，合适就好）
为了让不同数据在表格中相互独立，不混淆。我们需要保证首尾列的内容与表格两边的间距N1保持固定，不同列之间的间距N2在最小宽度的基础上，随着表格的尺寸不同而做自适应的变化。
在设计表格的初期，就需要做好设计规范，表格的边距要统一制定。
列的数量建议最多展示9条，因为人们的记忆在7±2之间，数据太多用户会找不到重点。但也不是必须，根据业务需求，如果需要大量数据展示时也要展示，因为视觉永远低于业务（好用比好看更重要）。
列信息从左往右视觉权重程度逐渐降低，最后一列权重高（以眼动实验或点击数据为依据得出权重高低）。所以尽量减少列的数量，关注用户需要的必要信息。当数据列过多时，要分清主次列，非重点、辅助性信息可以通过次级入口来解决，如固定重要列(主体名称/操作列)，次级列在表格中间区域左右拖动。
为便于用户对数据进行对比分析，可以在原始数据的基础上给出差值、升降变化等数据处理结果，减少用户数据加工的过程，直达用户获取信息的目标(需要明确用户目标)，提高用户的阅读速度。
在一些用户高度自定义表格中，数据的列宽不好确定的情况下，可以允许用户对列宽进行调节。通过光标的变化提示列宽自定义操作，拖动可完成列宽设置。
列数据还可以根据用户需求进行自定义设置，可以选择要展示的列，在默认情况下仅展示最常用、最重要的几个指标（如下图），也可以对列进行排序。在表格右上方的设置按钮对表格进行设置，清晰高效。用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。但需注意系统应记住用户上一次的自定义列设置，减少用户重复操作。
底栏在表格最下方，一般是统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。
底栏最常见的元素就是分页，分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。
1. 良好转换：用户在结果列表中查找特定信息而不仅仅浏览信息流。
2. 掌控感：分页可以让用户知道表格的总量以及当前页面在总量中的位置，知道浏览完页面需要多长时间。
3. 数据加载快：通过对加载内容的限制，可以极大的减少数据加载的时间。
额外的动作：用户要到达下一页表内容，就必须点击分页控件上的按钮跳转，等待表格新内容的加载。
简洁型：当分页数量较少时，通常在7页以内，就只有最基础的展示。
迷你型：当页面空间不足或者降低分页的视觉影响时，可以采用迷你型。
多功能型：当表格数据较多，为了满足更多的用户需求，可以根据需求选择分页类型。完整型的虽然满足各种功能需求，但是所占空间较大，所以我们要根据自己的需求合理拆分使用。
分页的选择需要根据不同的场景选择最优的设计方案。
表格无限下拉加载使用户在数据内容面前一直滚动查看。向下滚动的时候不断加载新内容，虽然十分方便与诱人，但不是什么场景都适用。一般来说，无限滚动适用于在数据有限且信息重复的表格，有利于内容探索。分页则适用用户在寻找特定信息及浏览记录，易快速访问。
1.高效浏览：一个高效的方法让用户浏览表格数据信息。
2.体验更好：用户使用滚动能获得比点击分页有更好的体验。
1.受限性能：缓慢的加载速度会造成用户的不耐烦与离开。当数据量过大时，结果就是页面性能越来越低。
2.位置丢失：没法标记当前位置且不能再随意回到之前位置。一旦离开，就会丢失当前的浏览记录，要回到上次的位置，必须得重新滚动去寻找。
3.信息缺失：滚动条并没有反映出实际数据量。
除了分页的使用还可以进行无限滚动的交互，鼠标点击“加载更多”按钮以查看更多数据。这个功能不太适合数据量较大的表格，在具体业务中一定要慎用。
分析产品，也是难到很多 UI 设计师的问题。很多人认为这属于产品经理的工作，但实际上 UI 设计师也离不开使用产品分析的技能来处理日常的工作，以及提升自己的产出质量。
产品的分析其实远远没有想象中那么玄乎，这篇文章就要教会大家如何通过正确的步骤完成对产品的分析。
以下为正文。
产品分析，顾名思义，就是对某互联网产品，进行系统的、多纬度的分析，并最终完成一份逻辑清晰，符合客观事实的商业报告。
为什么我们需要这个报告？那是因为对于我们工作的决策来说，获取越多有效的参考信息，就越能帮助我们做出正确的选择。
举个例子，如果我准备做一款针对定制奶茶外卖的 APP，那么就要了解这样的 APP 产品通常有哪些模块和功能，通过 APP 下单的流程是什么样的，以及用户更喜欢什么样的设计或者交互。这时候，光靠我自己脑补是没用的，我得分析同行或者相关外卖 APP 产品，才能得到明确的结论，然后作为依据开始设计我自己的产品。
或者，我们在面试或者客户谈判之前，有认真的分析过对方的产品，那么在沟通过程中就可以让我们的处境更有利，能进行更有质量的沟通和探讨。
产品分析的好处很多，不仅能帮助我们解决当前的问题，也可以帮助设计师锻炼自己的逻辑思维能力，产品能力以及业务能力，是升职加薪的必备技能。
接下来，可能很多同学已经忍不住摩拳擦掌，想要知道产品分析应该怎么开始了，但别急，我要先讲讲一个被很多人忽略，以及在众多讲解文章中都没有提及的东西，就是产品分析的 —— 目标。
前面提到，产品分析最后要以商业报告的形式呈现，而一份合格商业报告是要提供 “明确的结论” 的。如果这份报告指向性不清晰，洋洋洒洒写了一百页，像流水帐一样把所有能罗列的分析内容全都一股脑做进去，那对于自己和看的人都是一场灾难。因为这样的报告没有重点，缺乏阅读性。
开始分析前，我们要确定一个明确的目标，即想要通过这份报告获得哪些信息。在获取的内容上，往往不会只想得到一个结果，很可能会是复数形式，所以我们需要列一个表格，将它们罗列出来。
比如我们再用想做奶茶外卖服务的APP为出发点，那么我们分析美团或者饿了么的产品，定了下面这些目标：
可以看出，对于产品、交互层面的分析明显要大于设计的权重，根据 MVP 原则，第一个版本应该要得出的是一个流程可以跑通的产品，在前期过分关注设计和细节并不是首要任务。
所以，在不同的场景、时期、战略上，产品分析的侧重点就不同，而且留给我们的分析时间也不可能足够充足的，所以也要将精力集中在最重要的事情上，提升效率，才可以真正解决问题。
整个产品分析的内容，可以划分成多个纬度和若干的细节，我用下面这个思维导图表示出来。
这样的图表让人望而生畏，如果每一部分我们都认真做分析，那么势必得写出非常多的内容不可，所以才有了前面所说的要规划分析的目标，在实际执行过程中有很多分析项是不需要提及的。
再者，产品分析中还包竞品分析、运营分析、交互分析、视觉分析、文案分析等分支，它们各有侧重和取舍，所以不要为此而感到恐慌。
下面，我们分别对这些内容进行简单的说明。
1.产品的基本信息
分析任何产品的第一步，就是对它有一个大致的认识，首先就是去下载和体验它，并且能用一句话来概括它的功能，然后通过该功能解决了用户什么样的需求。
然后就是它所处的行业目前的状态，是否规模连年上升，有什么重量级新闻或者革新，未来的发展趋势是什么。如果我们不了解的情况下，可以多在百度、知乎、新闻门户上进行搜索和了解
尽可能收集可信的数据报告或者图表，便于信息的整理。
对于一些新上线不太久的应用，通常会带有非常明显的初创团队烙印，可能有一些匪夷所思的交互或者功能，这时候在应用上浪费时间干想是没有用的，可以花点时间在网上找找创始成员的履历，会对我们认识应用有更大的帮助。比如拼多多创始人在上线前有 “拼好货” 的多年积累，产品模式是经过检验的产物，有大量相似的特征。
最后，还可以对产品当前的处境做简单的收集，有没有强大的外部竞争，它们各自在市场中占比的数据，以及用户在不同商店、社交平台中对其的评价。这可以帮助我们对该产品的竞争力和商誉做出初步的认识。
2.用户研究
用户研究这个名词出现得非常频繁，想不看见都难，它是专业产品团队必备的项目准备工作。用户研究的方式和产出物多种多样，通常我们会建立清晰的目标画像找出目标用户，然后对他们进行访谈、调研，设计可用性测试、眼动测试等等，帮助我们更好的推出可以被用户喜爱的产品。
但在我们研究外部产品的时候，往往不需要将它想得太复杂（除非是对直接竞争对手的分析），否则只需要整理该产品的目标用户画像即可。
用户画像即总结核心用户多个纬度的特征，主要分成三个部分。
生理主要就是用户的年龄、性别、身高或体重等特性，外在的则是诸如学历、工作履历、所处城市、薪资状况等可以直接收集的内容，内在的则是性格、爱好、行为（喜好女装之类的……）等等和关联主观特征的内容。
根据我们的需要对这些属性进行筛选，就可以制作几个标准的用户画像卡片出来，比如下方这种。
3.用户体验要素
因为这两年对于产品、体验、设计的专业分析需求高涨，所以 《用户体验要素》 中的五要素就成为大家喜闻乐见的分析模型，它给我们提供了明确的分析步骤和方向，易于上手。
战略层：
战略层指的是产品在宏观、商业层面上的的考虑，需要我们自己的判断，因为如果不是内部人员，那么对于一款产品的战略层思考是无法做到绝对准确的。虽然网上可以搜索到很多商业分析和企业 PR 稿，但是这些内容的使用往往是具有欺骗性的，是基于运营需求抛给大众的障眼法。
比如我之前分析的一篇关于瑞幸咖啡的总结（个人总结）：
https://www.zhihu.com/question/306547560/answer/559771838
所以，报告中没有充足的把握时就不要在这个问题上侃侃而谈，只需要回答，一款什么样的产品才可以满足用户的需求获得商业上的成功。
范围层：
战略层可以获得的信息通常是一个比较宏观、含糊的概念，所以，我们要来制定更具体的方案，明确产品应该包含那些功能和服务，规划产品功能要覆盖的范围。
比如提供奶茶的外卖服务 APP，初期我们的功能包含选择店铺商品、加入购物车、交易结算系统，但不包含资讯推送、晒单社区等功能。
所以，范围层就是将该产品提供的最重要的服务、产品内容罗列出来。
结构层：
这就是一个产品的功能或者信息结构，通常我们可以用思维导图或者树状图的方式进行梳理。最初级的方法是通过对可视页面的层级做梳理，整理出产品的页面层级结构。
而更好的方式，是根据产品的几个核心功能建立产品流程图，将操作的结构与逻辑展示出来，绘制这个图表的过程中可以更好的加深我们对产品的理解。
框架层：
框架层即页面的布局结构，以及组件层面的交互和展示，一般来说，可以研究产品的主要流程页面，每个页面的布局和信息展示是否合理，操作是否顺畅。
如果觉得没法很好的理解，书中建议是通过 “界面设计”、“导航设计”、“信息设计” 三个角度切入，但这样操作性太差。建议在分析这个界面的时候，只要关注内容从上到下的布局内容有没有契合主题，并且重要的组件中，字段权重能不能很好的被表现出来即可。
比如我们看下面飞猪的航班页面，页面模块依次是城市、日期、班次列表、排序筛选。在航班列表中，最被用户关注的价格信息得到凸显（证明买机票的用户对价格更敏感），时间作为次级权重元素相对被弱化但依旧易于识别。
表现层：
这里就是着重分析产品设计本身的特点了，相对就容易了不少，只要分析配色的方案，设计的一致性，捕捉动效和情感化设计的细节即可。
就不展开更多的说明了。
用户体验五要素的分析一样不是散乱的抛出结果而已，如果按原书的方法做分析，肯定也会作出非常复杂的报告，所以我再提炼一次用户体验分析的思路。
通过分析产品的商业目标，进入划分功能和服务的范围，之后根据核心的服务总结主要操作流程，并在最后的交互、布局、设计的几个方向来判断它们是否有益于核心流程，能被用户接受。然后得出结论，如果有益，那么产品符合商业目标的条件，如果没有，则难以达成。
4.盈利模式
有一些产品本身就有购买要素，或者有付费的项目，那么对它作出分析是非常重要的。因为任何商业产品最终的目的都是为了盈利，所以多数产品会在这方面下足功夫。
如果是电商、外卖、快递这类直接发生交易的应用类型，只要分析产品本身的交流流程即可，相对比较直观。
如果是类似社交、资讯、工具类的应用，往往在盈利点上会比较隐晦，并通常包含较多零散的盈利来源，比如不同位置的广告位，订阅服务，付费道具等等。
我们要做的就是把这些盈利来源全部罗列下来，如果知道价格也对应填写上去即可。
5.运营策略
如果不是以工具为导向的产品，通常就有比较重的日常运营。包括用户运营、社区运营、媒体运营、内容运营和活动运营。
有不少产品的迭代是以运营为导向的，我们直接通过产品功能本身去分析它往往得不到理想的结果，所以需要从运营的角度进行切入。
比如每日优鲜这样的生鲜电商，如果仔细研究用过它的服务，就会发现这款产品本身交易的流程乏善可陈，但是出彩的地方是在于层出不穷的运营策略，无论是选品的内容运营或者活动运营上，而这些运营方式才是推动产品的改动和优化的主要因素。
作者：酸梅干超人 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
新手和初学者总会错误的将审美的能力托付给天赋或是科班教育，作为自己审美水平低下的借口。如果这么想，那肯定不会为自己带来任何改善。
今天，我要写一些不一样的东西出来。
按我一贯的风格，我不喜欢在入门问题上高开高走，一开始就讨论比较概念或者艺术性的问题，就讲讲在最初级月薪不过万，连自己工作设计类型相关的作品都没办法评判好坏的情况下，展开讨论。
所以，我要写一篇接地气的提高审美的回答。
关于比较
审美是一个宏大的话题，无论是文学、影视、视觉、时尚等我们都可以审视它们的 “美”。不同领域的 “美” 有不同的形式，不同的立场，不同的角度，不同的原则。
在这里，我们不谈具体某个领域审美的规则和方式，我们来讲讲提升审美的具体做法。
讲一个例子，在国内，我们普遍觉得女生在对穿衣打扮的审美上比男生更优，对于其它经过设计的事物所展现的审美也比男生更好。这种差别在高中时期便逐渐放大，在大学中就能明显得感觉出来这一点。
这是由于基因天赋论导致的吗？
是也不是。女生爱美这点是一个既成的事实，有比较大的先天因素，而因为对美好事物的追求比男生更强烈，所以在审美上整体大于男性。
但大家要注意，这个因果关系的模型太过简陋，我们要进一步来分析为什么对美好事物的追求就能导致审美上的差异，这就是我们提升审美的关键，先从衣品讲起。
原因1：
基于对美的追求，女生往往会花更多的时间在穿衣打扮上，也就意味着要购物。无论是在商场还是淘宝，女生逛起来的热情与时长都远远大于男生，这造成了女生在查看数量上也远远大于男生。
这就和很多设计前辈告诉你要 “多看” 的做法是一样的，通过量变引起质变，只要你看的够多，审美自然就可以提升了。
这话说的颇有道理，但依旧在推理上站不住脚。因为，量变为什么一定就能产生质变？这个变化的逻辑依据是什么？在青铜段位里打了一万盘，也不代表一定能打进最强王者不是。
所以，这就是要引入第二个原因，关于对比。
原因2：
女生逛街能逛这么久，往往在除了看以外，还会做一件事，就是大量的试衣服（此处被我言中的女性同学可以点个赞让我看见你们的双手），经常抱了一整箩筐的衣服进试衣间，在里面对着镜子鼓捣摆 Pose 大半个小时，然后才能挑选一两件自己喜欢的出来，或者干脆一件也不要。
嗯，不要问我是怎么知道的……
在这个过程里，就发生了提升审美中最重要的一环 —— 对比。通过大量的对比，来找出好看的、高级的、适合自己的衣服。也因为对比，女生们就通过实践来了解到，什么样的衣服是好看的，什么样的是丑的不适合自己的。
这个过程实际上收窄了选择的范围，比如一个个子比较高挑五官比较立体的女生，是很难在比较过后还会选择那些可爱、少女、小鸟依人的设计。很可能会偏向运动、男友、中性等风格。
而在有了具体的偏向以后，她们依旧会深入到这个范围，继续观察、尝试、对比，然后再次提升对这些东西的理解和审美。
所以，看吧，审美的提升第一步就是这么简单，通过大量的观察，然后对比和筛选，就能非常直接的提升我们的审美，这个提升的过程完全依靠的是人的主观能动性。
日常生活中我们遇到的绝大多数某些人审美比自己更好的人，都是因为他们在某些方面看过的，比较的比我们更多，而不是依靠天赋的加持，这个思路落实到创作中也一样。
当然，我丝毫不怀疑人类的历史长河里，有极少数人打娘胎里就因为染色体中某些基因片段神秘的律动，而获得了独特的审美与创作天赋，但那始终是一个可以忽略的概率。审美的提升是个人主动的行为，不要祈祷上帝在你身上投的骰子能得到你要的结果。
即使抛开这群有 “天赋” 的神仙，也依旧还有很多第二梯队、第三梯队的老法师们通过奋斗逼的经历功成名就不是。
所以别这么自恋总要搬达芬奇、毕加索、梵高等人举例，每次忍不住想要把锅甩给天赋前，就问问自己钥匙配嘛？
什么？您配？
您配几把……
具体案例
不正经到此为止，正经脸……
既然说了那么多关于比较的问题，空口白话难以令人信服，所谓没图我说个……锤子。因为很多新人都会说，你觉得大多数设计案例看起来都挺好，觉得挑不出什么毛病啊。
所以，下面我挑了几个与设计有关的方向，并找了一些案例出来，你们来看看同类型中，哪一张图是最优的。
而没被选上的那些，对于你选出来的图而言，它们当然都是有 “问题的”。
人像摄影
美食摄影
室内设计
产品设计
海报设计
管理界面
UI APP 界面
小结
审美提升的第一步，就是从对比开始，因为这个世界对所有事物的评判，都有不同方向的两个极端。善恶、美丑、高矮、胖瘦，是对立而相互依存。
就像左拉的《陪衬人》中所讲的：
“……另一个却总是奇丑无比，丑得刺眼，使路人不禁要看她几眼，并且拿她和她的同伴作个比较。要知道，你上了圈套。那个丑女子要是独自走在街上，会吓你一跳；那个相貌平常的，会被你毫不在意地忽略过去。但当她们结伴而行时，一个人的丑就提高了另一个人的美。”
之前我们讲了关于审美提升的第一步对比，但是我们留了一个疑问，为什么依靠对比我们可以提升，或者只靠对比我们就一定可以提升审美嘛？审美提升起来就如此容易？
当然不是！
对比的过程只是表象，我们还要追究深层次的原因，那就是“推理”。
在系统性提升审美的道路上，最大的敌人就是——主观感受。因为无论我怎么解释和审美提升相关的方法，总有人会觉得它就是依靠个人审美，不同人审美不一样，总能找出有的人就喜欢网红脸但看不上汤唯或者高圆圆的案例。
没错，每个人都有自己的审美，无论喜欢什么稀奇古怪的东西都可以，存在即合理。但是，设计师该拥有的审美是不能这么随意的，因为作为专业人士，我们的审美就要符合 “专业” 的要求，即通过客观标准来评价事物的内在价值。
比如茶、酒、咖啡这类饮品，都已经拥有非常成熟的市场，会根据产品的价值形成对应的价格。而有趣的是，这些饮品都不是甜的，都不符合我们本能的喜好。所以，还有很多人不接受它们，只喜欢带有甜味的饮料。这种个人的选择上，任何人都可以偏爱一杯 1 元不到的雀巢的速溶拿铁，厌弃红标瑰夏冰滴，但无论你怎么想，也无法改变它们价值不对等的事实，瑰夏手冲有远远超出速溶的口感和品质。
但超出的部分在哪里？答不答得上来，就是内行和外行的区别。
内行经过专业的训练可以品尝出其中蕴含的风味、口感，解释它们与产地气候的联系，储藏运输的条件，以及冲制过程的步骤。但外行往往只能给出好喝、甘甜、顺滑、难喝、太苦之类零碎、没有体系的评价。
如果设计师对设计相关的作品只能做到和外行一样的水平，那么他也只能是设计师中的外行，并且缺乏成为优秀设计师的必要基础。
所以，接下来我们来探究一下，作品的评价为什么重要！
丹尼尔·卡尼曼的畅销书《思考快与慢》中，将我们的思考方式简单的划分成了两个部分，用了非常简单粗暴的 “系统1”、“系统2” 命名。简单概括它们的含义，就是系统 1 是联想式思维，系统2是规则式思维，也可以看成是直觉与慎思的区别。
先说系统1，直觉是我们大脑对日常接受信息简化处理的产物，我们的大脑就像处理器一样，每天都要面对海量的信息通过视觉、味觉等五感导入，如果它没有任何区别的对这些内容进行深度、缜密的分析，那么它一定会超负荷运转并最终自我毁灭。
所以生物的演化，让我们的大脑进化出了一套可以对信息进行过滤和简化的系统，格式塔心理学中关于视觉对物体简化、完形的理论，也是由其产生，这就是我们对很多事物下意识反应的来源。比如在走路的过程中，看见一辆自行车直挺挺的从远处像你冲过来，那么你会马上感觉到危险并往某个方向规避，整个过程会在不到1秒的时间内完成。
而系统2，就是对事物进行逻辑推导的深入思考，如果用它来处理危险的事件，那么结果可能是我们先判断这辆自行车行驶的轨迹并得出它前进的方向与我站立的位置相交，并且它的时速约为 40km， 在撞到我的时间还有3S，如果以这种速度撞在我们身上，大概率会发生……
“BONG～”
那就不用想可能会发生什么事情，你已经被撞飞了，可以直接得到结果。类似的事情还有很多，无论是对与危险的，还是日常事务的作用，系统1都发挥出了极其重要的作用。也因为它的有效，而导致我们对它依赖过度。所以，很多人在对于美丑的审视上只依靠系统 1 来完成，而不会深入去思考各中原由。
系统 1 对美丑的判断，是个人的，但它并没有 “审” 的过程，专业的分析也就无从谈起。斯洛曼和费恩巴赫所著的 《知识的错觉》 里提到：
"直觉给予我们一个简化的、粗略的，而且通常足够好的分析，这让我们产生错觉，自以为所知甚广。但是当我们慎思时，我们才意识到事物实际上何其复杂，我们真的只是略知皮毛。"
审美和品尝美酒、咖啡一样，需要通过了解专业的知识，培养系统的分析方式进行刻意练习，逐渐摆脱依靠我们直觉做出的不可靠的判断。
因为任何优秀的设计作品，在创作过程中都不可能是随性而为的，都是经过创作者深思熟虑后的产物，我们对优秀作品的评价，就是通过专业的知识对其创作逻辑进行推导，哪里有亮点，哪些是败笔，都是清晰可见的。
它不仅帮助我们判断别人作品的优劣，也可以分析我们自己作品的不足，从而得到改进的思路。所以为什么说审美要先于实践，如果连什么是好的都不了解，自己设计出来的东西都不知道如何评价，又谈何进步？
在我自己的教学经验中，这个问题所表现出来的差异就很有意思。如有一些审美能力较差的学生第一次设计 Banner ，花了非常多精力和时间，自我感觉不错，但是作品质量极差，会在得到否定的评价以后表示诧异和茫然，因为他们已经预感应该得到赞美与肯定。而审美较好的学生则是在完成作业以后充分的发现自己设计的东西和较好的作品之间的差距，那么他希望在我这里获取的，就是如何缩小这种差距的具体方式，而不是对其作品做出评价，因为他们自己也会觉得作品质量差的没评价的必要。
但不幸的是，在商业视觉设计的领域中，提升我们的专业评价的能力，并不如其它行业一般有固定的流程和教学，按笔者自己长期的经验来看，如果我们盲目的从艺术、设计、心理多个学科的基础理论开始学起，那提升的速度太缓慢，需要的周期太长，而且有非常强烈的挫败感，如果没有好老师的引导，还容易钻牛角尖误入歧途。
所以，第一部分的对比，重要性才能体现出来。我们要通过实践作为基础，来系统性的提升我们的专业审美能力，通过应用推理的能力，抑制我们无所不在的直觉。
前面扯了这么一大堆，都是在纸面上的探讨，不太接地气，只分析一通原因，和你该如何提升审美没太多关系，这是最气人的。所以，最后一部分，我们来讲讲具体实施的做法。
先声明，审美提升是要通过刻意练习的步骤的，谁也不可能只通过区区几篇文章就以为自己已经明白了，所以需要执行下面这个循环步骤：
• 采集：大量观察和收集作品
• 对比：留下它们中最好的
• 分析：寻找优劣差异的原因
开始前，还要解释一件事，就是我们提升审美都要先从某个点开始突破，从你最感兴趣的，或是工作关联度最高的设计类型开始，而不是无差别的乱看。与美术学相关的所有设计中，底层的原则都是近似的，精通一种，就能更容易理解其它种类的作品。
1.采集
观察的来源多种多样，强烈建议初期只使用花瓣即可，不要分心到太多的平台上，选择太多往往不是好事，会增加干扰，让我们疲于奔命，模糊一开始的目标。
例如首先要提升在 APP 方面的审美，我们先在花瓣中创建一个 APP 的画板，然后搜索 APP 相关的关键字，但不需要关注第一页弹出的采集结果，直接查看 “画板” 选项。
画板是别的用户自己整理的采集合集，我们可以通过封面简单筛选出你喜欢的，然后打开它们，浏览里面收集的作品。
然后尽量按自己最高的要求来找到能让自己觉得满意的作品，再将它们 “采集” 到自己创建的画板中，并设定一个数量，比如采集到500张为止。
2.对比：
达到目标的数量就停下来，因为再采集下去能带来的作用已经非常有限了。虽然采集中已经包含了选择和对比的过程，但我们要更进一步，在自己的选出来的作品里进行比较。相信在完成这个步骤以后，你们已经可以明显感觉到最后 100 张收集的质量是远远高于前 100 张的。在罗子雄 TEDX 的演讲中就说过：你回头看三个月前收集的作品，会发现它们都是垃圾……
更极端一点，那就是我们只在挑选的作品中留下最好的十分之一，听起来是不是很刺激。
也就是我们要开始在自己选出来的作品中，你要删掉其中的 450 张作品 （最好有留底），即使当中有一些你非常喜欢，而且它们都是你的劳动果实。但就因为这样，你才会更慎重的进行比较。因为多数人的采集只是走马观花，后面根本就不会看这些东西。
当然，这个过程推荐用 Eagle 或者 花瓣 PRO 客户端，操作起来会更顺手一点。
3.分析：
在上一步操作里，我们会动用我们脑海里所有关于理性的分析方法来解释它们的优劣，并得出结论，虽然这些想法可能很幼稚或漏洞百出，但不要担心，最后一步就是用来解决这个问题的。
我们捉对挑选一些作品出来，在剩下的作品中和已经被你否决掉的作品各选一张，然后将它们排列到一起，对比它们的优缺点，比如下图是我从我自己画板中找出的近期和早期的采集作品。
专业的分析是怎么得出的？当然不像朱熹提出的 “格物致知” 一般盯着它们思考，就能把设计的理论给格出来，这条路是走不通的，所以才有王阳明 “知行合一” 的教诲。
我们要把对比的内容进行细化，把一套作品看成若干细节的合集，明确比较的目标，这样才能得到理想的结果，比如：
• 字体
• 配色
• 布局
• 配图
• ……
比如我们挑文字出来分析，这时候局势已经比较明朗了，上侧的设计中文字是能被清晰识别的，在不同的字段类型中字重有对应的调整，主次有序。而下侧的文字应用则缺乏对比，部分文字甚至和背景都无法做出区分，且字重几乎没有变化，使用了多种字体没有整体性，导致最后的阅读感受极差。
同理，你可以再试试分析其它几个细节，是不是简单多了。如果这时候你再觉得手足无措，完全分析不出什么具体的东西怎么办？
学啊！
如对比到配色，我们解释不出为什么右图的配色不行，那就针对配色去了解相关的配色技巧、理论，网上可以搜索的分享就一大堆了，比如关于色彩对比、用色比例等等，将你学到的知识现学现用套进这两张作品中，也就可以很快的得到验证。
后面每出现这样的问题，就现学现卖，不仅可以直接提升我们对作品的理解能力，还能巩固我们学过的理论知识。多分析几组对比，你就会发现对于这类作品的审美和理解已经得到了质的飞跃，这时候，你就可以以留下的这几十张作品作为你接受的下限，去收集新的作品，完成下一次循环。
结尾
对于设计基础审美的提升就解释到这里了，再写下去也没人看了（写不动了）。我们在职业相关的审美提升一定要具有实用性，接地气，目标准确的特点，不要这个阶段跑去听古典，看画展，读诗歌，所以整个回答我都尽量避开这些坑不提。
设计师的专业性首先不是追求审美的极限，而是先提高自己的下限。只有超出自己动手能力的下限，才能让我们拒绝粗制滥造的作品，驱动我们进步。
最后，在同意我前面观点的基础上，大家可以尝试我最后给出的方法，如果你觉得你的审美还提升不上去，那欢迎你们随时找我算账！而只是看完却没有实质行动，那就不要再抱怨自己什么提升上去了。
作者：酸梅干超人 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com