作为产品设计师，无论在什么公司什么岗位，都免不了与研发团队进行沟通，如果不进行沟通就无法交付我们的设计稿，即便很成熟的团队也会出现在沟通上的问题，在产品研发的过程中沟通是必要的流程，为了创造一致的用户体验，设计师需要与开发人员在视觉上、交互上达到一致的想法，但是讲起来简单，说起来难，在整个过程设计师和开发都是站在不同的角度去看待问题的，我们思考的如何达到美观的界面、流畅的交互等问题，而开发关心的是做这件事我需要花费多长时间，实现难度如何等等，首先目标就不在同一个维度，那么必然会造成我们在对接的时候出现掰扯的问题，最后耽误的都是双方的时间，更严重点页面最后的体验也没有达到一致。
任何团队都会出现设计师与开发脱节的问题很常见，遇见什么问题解决什么问题，毕竟人与人的性格、沟通方式等都是不同的。
我们只需要在不同的流程里去做不同的事情就可以避免这些问题了，对于任何设计师基本都会适用，往下看～
1. 产品信息文档确认
在接到一个需求的时候产品经理会通知上下游进行需求的评审，这时候一般会是产品经理、设计师、开发三个组进行需求的评估，具体的需求评审在本章就不细讲，我们此次主要讲设计师与开发相关的信息同步。
在评审过程中产品经理会把需求背景、需求目标等相关信息同步给相关的人员，作为设计师这时候就要关注需求目标，这个目标不仅是产品经理的目标，也是整个项目的目标，所以与每个人都相关，需求目标清晰后期推动开发的时候才会有依据。
评审会议结束后，产品经理会同步期望上线时间，如果是常规需求，会当时就评估出设计时间、开发时时间，我们设计师这时候就要关注这些时间，因为我们通过上线时间就可以估算开发节奏，给我们后期的修改以及临时添加的一些动效制作时间会留出充裕的时间。
设计评审流程细节本章不进行细节讲解，本章重点讲与开发对接。
近期我在公司做了一个商业化的直播项目需求，由于产品方没有过多的产研经验（后面才知道），在项目前期虽然进行了评审，但是评审的参与人员没有拉上我，等到需求给到我的时候，我顺便问了一下才知道已经评审完了，这对于我来讲是没办法进行设计输出的。
第一我不知道评审过程中开发的排期时间，以及测试时间，如果研发开始开发的时间与设计稿交付时间有冲突那么就是影响上线节奏。
第二涉及的交互操作产品经理是不清楚的，有没有哪些地方需要加复杂的交互产品也是同样不清楚，那么开发就会默认这是常规的交互，如果过程中添加那将会影响开发进度。
第三流程上不符合要求，期间如果有关键性信息没有达到共识，那将会酿成很严重的后果。
面对这种已经发生的事情，如果重新拉个会评审一次会耽误大家的时间，很多人是不愿意的，但是呢我也不能单听产品一方面的沟通，因为很多细节他是不清楚的（产品经验较少），所以当时我的处理方法呢是我先通过产品给出的上线时间，然后与前端同学单独确认一下，这样至少保证上线时间是同步的，至于其他的细节我当时是利用设计评审的方式同步给开发交互逻辑、动效方式等。
此次这个需求呢本身不大是在旧版的基础上优化功能，理论上不需要走设计评审流程，但是因为当时没有通知参加评审导致很多信息不同步，而我需要传达给开发的东西也不能在后期在告诉他们，所以我利用设计评审流程把一些交互信息同步给开发。
2. 设计图准备
在设计稿完成后，如果是小需求一般是直接交付给研发，如果是大需求一般会进行设计评审，主要评审维度是设计稿是否与产品文档同步，设计目标是否符合产品目标等等，其次如果有复杂交互效果、设计细节、组件复用情况也需要与研发对齐。
若是直接交付研发，我们需要提前把设计稿内涉及的切图、图层间距、动效使用区域等关键信息提前准备好，避免在开发过程中临时进行补充，影响开发节奏。
在设计稿内的切图，我们要提前与研发沟通，切图的范围和形式，最后把设计稿传入公司统一使用的协作网站，如蓝湖、即时设计等平台，大公司会有自己的协作平台。
3. 确定设计规范组件
讲个自己的踩坑案例，还是商业化的那个需求，由于为了商业化赋能，产品的需求文档并没有按照规范组件进行设计，但是由于产品文档标注的不清楚，在设计过程中不断与产品进行沟通，最后结果当然也是无法复用组件，当时我就把组件规范修改了，重点是研发不知道，我当时想的是研发通过产品文档应该会了解到，事实确实我大意了，后面就导致组件方面我与研发进行了相爱相杀，通过自己的以身作则我劝大家不要忽略任何一个细节！
设计规范组件在设计前就需要进行确认，项目是否有存留的规范组件，如果有，需要在设计前以及设计中去确认哪些模块是否可以调用，开发是否已经将组件写入代码中，如果不了解这些情况贸然的设计，那在对接过程中会出现修改设计稿的风险。
如果是创新项目并且没有相关的设计规范和组件，我们则需要在设计前就把规范组件的时间给算到需求内，一个产品的规范组件，决定着后续产品是否严谨、项目研发效率等等，因为规范组件不止是设计师的事情，还是团队研发比较关注的事情，研发们在代码里同样需要进行规范的组件复用。
4. 输出设计文档
当在做一些在旧版的产品页面上优化的需求时，还需要输出对应设计文档，给前端和测试看，设计文档需要写清楚设计稿优化的点，例如图标的细节优化、文字的字号优化、色彩优化、界面交互等等细节。
如果涉及到一些页面的交互，我们在提供设计稿的同时需要把具象的交互文件单独交给开发，不要奢望前端大佬们能脑补出页面之间的交互，我们不及时提供的话，后期修改研发可能会直接拒绝，并且口吐芬芳～（最简单的找到竞品页面演示给研发看）。
我的方法
前端在看我们设计稿时如果不是结构上的修改，他们不会去关注这些细节的点，而给测试看的目的是，有些公司测试会帮我们进行走查，如果不出设计文档测试没办法进行对比（测试提 bug 比设计师提 bug 更具有一些权威性）。
这里看一下我工作中输出的设计文档，我会把需求的背景、目标在设计文档上强调一下，再添加上设计目标，设计目标为了需求目标去赋能，这样在文档开始就与研发达成共识，让研发是带着共同完成目标的态度去看设计文档，便于我们后续推动，其次放上页面之间的说明。
5. 交付开发
最后总结一下，我们要交付给开发什么东西，首先是基本的设计稿，包括切图、间距、动效文件，其次是设计文档，包括需求背景、需求目标、设计目标、设计修改点说明。
1. 不要频繁修改
在交付设计稿后（基本设计图、设计文档），我们就要避免频繁修改，频繁的修改会导致设计稿来回更新，对开发造成一种困惑，最后在测试的时候，开发同学容易写乱，另一方面工作过的设计师都应该经历过，我们在开发的过程中修改设计稿，大部分的开发都会带点情绪，甚至不给我们改，这其实是因为大多开发的代码写的是比较规范统一的，如果中途进行修改可能会影响开发同学的代码规范，就像我们在完成一个设计稿的时候，产品经理突然改变需求，我们也是担心做好的设计稿因为修改而被打乱。
如果实在需要修改，一定要说明原因，而不是突然一个想法觉得这里设计不合适就进行修改（产品需求修改除外），我们要换位思考，具有同理心去工作，并且让开发同学感受到我们是在帮助他们减少工作量，这样在后续的一些需求中，我们的对接会很顺畅。
2. 重要信息及时通知
上面说的是站在设计师的角度去修改，还有一种情况是研发在开发过程中，作为设计师的我们突然收到产品经理的修改建议，这时候我们需要及时的同步给开发，或者给开发同事达成共识信息，因为很多时候，产品经理让我们修改的时候往往不会通知开发，因为对于产品经理而言就是一个小的修改，例如改个位置、改个颜色等等，但不管是对我们还是对于开发其实都是比较重要的，不及时同步就会出现不好的结果，如果在测试阶段没有发现问题，上线后就会造成设计师背锅的情况。
我曾经在做一个页面改版的时候，就遇到类似的问题，当时产品找到我说改一个地方的交互，并且我也觉得那个交互方式应该改，当时的我以为产品经理会同时告诉开发修改的地方，但是直到项目上线后开发都没修改那个地方的交互，本来这个修改点是个小事情，谁知刚好那一个版本被用户吐槽那个页面的交互，结果可想而知领导拉个会议开始复盘，为什么没有改，索性大家没有互相甩锅的情况，产品经理说没有同步到开发，而我也是帮产品兜了一下说更新设计稿没有告诉开发，这个事情原本是个很小的事情，只需要我顺口同步给开发，就能够避免的，就因为我没有及时同步，造成用户的反馈，影响了产品的体验。
所以各位设计师工作中如果遇到类似的事情一定要及时同步！
3. 统一需求目标
开始讲到过，在需求评审的时候要与开发对齐目标，为什么需要对齐目标，因为一个项目如果目标不对齐，那么每个人都会站在自己的角度去做这个需求，设计师思考的是通过设计的手段，去帮助产品完成目标，如果设计稿上的复杂效果较多的时候，开发则会考虑你为什么这么做，这么做开发成本非常高等等，这也是说为什么我们开始就讲要输出设计文档，如果这一切都不存在的话就会导致开发是带着疑问写我们的页面，如果过程中在修改需求什么的，那我们跟开发又要相爱相杀了。
我的设计方式是通常是在产品评审阶段就与开发明确讲清楚，我大概要做什么样的效果，什么的交互形式，预计什么时候会交初步方案，中途也可能会有修改的点等等，提前让开发有个心理预期，避免在开发过程中产生抵抗情绪。
我的经验
4. 输出交互动画
如果在前期没有时间进行动效设计并没有关系，研发在开发过程中可以在把动效方面给空出来后续写，这里讲的交互动画分为两种，一种是展示的动画，一种是 ui 中的动效。
展示动画
目的是为了告知开发页面运动的轨迹，在 1-4 中讲到我个人用的方法，大家如果是刚对接研发的话，建议还是输出完整的交互动画，这里推荐一些工具 AE、Principle、Pixso、Figma 等。
AE：大家就比较熟悉了，经典的动效绘制软件，什么样的效果都能实现，但是使用成本比较高（不建议）
Principle：国外的一款交互软件，制作页面交互很方面，可以直接导入 figma 和 sketch，由于是国外软件需要使用英文界面，但是国内也有汉化版。
Pixso：国产最新的设计软件与 figma 类似，做交互的方式是使用多个页面添加热区进行使用，具体体验如何还不清楚（可以用用）
Figma：设计软件目前的天花板，流畅的体验，支持页面动画设计，但是需要安装插件才可以（建议使用）
动效文件
这个比较重要！我们一定要与研发同事沟通好，产品内使用什么样格式的动效文件，统一后能提升后续的开发效率，动效格式使用乱套的话，后续我们做更新迭代时做替换会很麻烦，开发也同样如此，这里推荐几种动效格式文件，分别是 GIF、json、pag、svga 这 4 种。
GIF：传统的动效文件格式，优点是学习成本低，第一个缺点是内存大，图片容易失真模糊，他的原理就是把每一帧的图片融合在一起，最后形成动画，图片越多，内存越大，第二个缺点是占用产品资源，当内存过高时，在加载时会出现卡顿。
Json：该文件格式是通过 Lottie 实现的，是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具，它的优点就是内存小、无需加载、动画不会失真，缺点呢就是支持得动画方式没有 gif 那么全面，以及使用成本也比较高。
具体使用步骤是需要我们装 ae 插件 bodymovin，通过插件导出 json，常遇见的问题就是在导出渐变动画时，渐变效果会消失，这是因为我们 ae 安装得都是中文版，而该插件更多的适配是英文版，不过没关系这里可以把渐变效果的名字改为 gradient fill1 就可以了，如果多个渐变的话我们更改后面序列号就可以，比如 gradient fill1、gradient fill2、gradient fill3…，这里把汉化插件链接也给大家找到了。
我的经验
Pag：pag 是腾讯研发的一种技术文件，最初主要用于游戏动画和直播动画，用来解决复杂的动画效果，目前在 ui 页面中运用也比较多，优点是占比内存比 json 文件更小，支持的动画方式也更丰富，运行时可编辑，缺点是适配原生有些问题，压缩位图时会出现不显示，这个软件目前还在完善阶段，我曾经也使用过，后来因为适配问题就放弃了，感兴趣的大家可以通过下面链接下载。
网站链接：https://pag.io/docs/install.html
svga：该文件格式的强大之处在于可以完整的将位图转换成二进制代码，并且内存占比较于 json 更小，播放资源占用更低，并且技术上相对稳定（建议使用）
网站链接：https://svga.io/designer.html
我们看下 svg 实现的效果
最后，我们一定要统一产品内使用的动效文件格式，这样既方便我们，也方便开发，让开发看到我们设计师的严谨性，便于后续合作。
1. 跟进开发进度
作为设计师，我们需要实时了解开发的进度，这样能够保证我们在过程中掌握自己的设计节奏，什么时间交给开发动效文件，如果进行修改也可以不影响上线时间（当然不建议这样做），那么具体需要怎么跟进呢，大概分为以下几个维度。
时间进度跟进：
设计师可以时不时的问一嘴，是否能按照正常的计划时间节点提测（正常需求提交后，开发会给出开发排期，尽量按照时间排期走，否则项目进度会变得很不可控）。
如果开发反馈时间会有延期风险，那设计师第一时间就要了解原因，以及预计延期多久，然后自身评估以下对设计上是否有影响。
需求变更跟进：
一般开发过程中，或多或少都会出现一些需求调整/变更的点，那么其中就会涉及设计上的改动，改动小的话产品经理有时候会直接告诉我们，并不会告诉开发，这时候如果身为设计师的我们要及时通知开发，并说明原因（避免争论）。
并且，需求变更后，需要和开发评估新的项目上线时间点，站在我们或者产品角度理解有时候我们认为的修改，对于开发来讲是耗费时间较长的，需要我们注意是否会影响上线时间。
交互动效实现跟进：
在 2-4 中讲到我们要输出交互动画，虽然我们输出的动画很直观，以及动效文件也完整，但是避免不了认知上的偏差，有时候开发会按照技术难度以及自身理解去完整交互效果，我们中途要随时跟进了解，避免开发在错误的路上越走越远。
测试跟进：
及时了解该需求是否已经提测、哪些还未提测，若到了提测时间的功能未进入测试，可以询问产品或开发什么原因，这样对项目或设计师都是负责的。
另外一点是我们设计师需要在提测阶段介入 UI 走查，因为各个公司或者项目测试时间有长有短，所以我们要及时把 UI 走查工作介入进去，给开发预留出修改时间，有的小公司不重视 UI 走查流程，这里我们就可以自驱进行走查，主动找测试同学了解提测时间，及时走查，保证页面还原度。
2. 设计走查
走查是 UI 工作中最为重要的工作，它决定着产品上线后能否完美的展现给用户，下面我大致把走查的流程以及范围给大家梳理下。
创建走查文档
在 UI 走查阶段，我们首先需要建立走查文档便于开发浏览解决，走查文档主要包含日期、版本、项目名称、模块、端口、问题描述、修改状态、图片标注，这样一方面能够让问题更加详细，体现设计师的专业度，一般我是使用在线表格去建立走查文档，当然这个看每个公司所使用的协作平台。
开通手机权限
一般在走查移动端产品时，安装测试包需要开通账号权限，这里可以找公司的开发或者测试同事给开通，避免影响走查效率。
走查范围
分为基础走查、细节走查、适配走查
基础走查包含字体、颜色、图标、间距、对齐方式等具体可根据产品形态进行延伸，其中间距走查比较费时间，需要我们通过测试机截图后，按照倍数缩放到源文件内进行测量，测试机分辨率需要保证与设计稿一致，否则测量不准确，例如设计图是 375*812，以 ios 为例测试机则需要使用与 375*812 分辨率相同的尺寸测试。
细节走查包含字体截字、按压状态、组件内容、交互状态
适配走查包含关键信息是否超出屏幕、是否出现挤压、是否出现重叠、识别度是否清晰
3. 避免添加复杂交互
在走查阶段如果我们发现部分的交互效果不太理想，并未达到预期，我们可以与开发进行沟通是否可以修改，或者添加新的交互效果，因为在这个阶段我们重新设计或者定义一个新的交互动效的话，会增加非常大的开发工作量，可能也会与开发产生争吵，我们在这个时期尽量避免这个问题，如果实在没有解决办法的时候再去添加新的交互。
我在工作中，如果遇到这种事情，会分两点考虑这个事情。
第一评估下当下这个交互效果是否会影响用户体验，如果影响用户体验我会要求开发必须 100%还原，当然我会讲述清楚为什么改，避免让开发产生情绪抵抗。
第二是如果不影响用户体验，但是还原度没有达到预期，我同样会先找开发进行沟通，例如按照交互稿还原会有什么困难，是时间上的困难还是技术上的困难，时间上如果困难我会沟通好下一期必须还原到位，技术上困难我一般会修改交互形式，尽量保证上线后给用户展现的是完美的状态。
4. 数据追踪
作为设计师在需求上线后并不代表需求就结束了，我们还需要追踪数据情况是好是坏，为什么我们设计师要去追踪这个数据呢，追踪数据是为了让我们在工作中提升自己的设计价值，随着现在互联网发展逐渐饱和，那么企业对于各个岗位的要求也跟互联网初期不一样，以前我们只需要画画图交付就可以了，但是现在的企业更看重的是综合能力，说简单点就是做 UI 的人很多，优秀的 UI 一样很多，那么我们就得被迫提升核心竞争力否则就是被淘汰。
而追踪数据其实就是增加我们得核心竞争力，同时也是能够体现自己设计能力的一项内容，设计最终是为商业而服务的，但我们不能嘴上说说，而是要拿出实际的行动，这个行动就是数据，我们的设计如何为数据赋能的，如何帮业务达到目标等等，数据如何分析是个很庞大的体系这里只讲下我们身为设计师为什么需要追踪数据。
简单讲下工作中数据解析的案例。
下面是我做的一个直播商业化改版需求，改版背景呢是直播业务由原先的为 c 端用户赋能改为，为 b 端企业赋能，通过与企业合作而产生价值，那么基于这个直播形态肯定是需要变化的，需求目标由原先的「用户收益」改为「企业收益」，新的目标具体为提升企业品牌曝光点击、互动、预约人数、提升直播在企业客户测的感知收益。
案例
基于这个目标，其实不难发现，目标已经从用户侧改为大客户，更多的是为企业去赋能，页面的结构肯定需要进行变化的，左边的图呢是改版之前的，右边的是改版之后的，那么我当时的思路呢其实就是基于数据方面去进行优化。
整体：产品策略添加了二级浮窗用来承载更多内容。
直播介绍：首先旧版策略是直播介绍对于用户而言并不重要，用户只需要通过看到直播标题就能够了解大致直播内容，更多是以引导形式存在，所以信息外漏较少，而新的策略是讲企业介绍默认展示在二级浮窗内，用户可选择关闭，提升企业感知。
投递简历：旧版策略是需要侧重用户投递率，因此在预约界面就展示入口，而新的策略是需要给企业强化观看人数、预约人数从而提升客户价值，基于这一点，我当时是通过数据后台看了下预约页面的点击数据，发现点击率最最高的是「投递简历」入口，而「预约直播」入口点击率相对较低，因此把投递简历入口调账到浮窗 tab 区域，降低层级，让预约直播成为视觉焦点，而上线后数据也是符合预期。
企业关注：将企业名称与关注结合并且放大，提升关注量，强化企业品牌感知和数据感知，关注与预约直播两者无论数据高低，都是符合企业目标，从而便于业务人员与企业进行合作沟通。
从我这个案例中我们能清楚看到，基本上任何需求都是可以通过数据的维度，进行优化，并且通过量化指标提升设计价值，无论对公司还是个人都有很大收益，并且我们追踪数据也便于后续我们与开发对接时，可以通过数据维度去促进我们设计上的修改、完善等工作，这也是为什么说我们需要对每个需求都要进行数据追踪。
无论是对接前、对接中、对接后，在哪个阶段都需要我们认真对待，熟知这些细节后，才能更好的与开发合作，进行项目推进，优秀的设计师不仅是专业和技术上的成熟，还需要有协作上下游的能力，在很多团队中设计师跟开发都会面临不一样的挑战最终可能会因为某些问题发生冲突，我们需要减少这样的冲突。
作者：爱吃猫的鱼
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
奇数法则意思是说，在设计作品中奇数元素比偶数元素更有趣。偶数元素在图像中产生了对称，这可能会显得过于正式和不自然。比如，在一行中排列三个或五个卡片会比 2 个或 4 个效果更好，作品会更加让用户感到舒服和自然。
Iskos Design 就是用的奇数原则做的网页设计
三分法构图（也被称之为黄金网格规则），在画面中以水平和竖直方向分成 3×3 的网格和 4 个交叉点。这个规则能很好的协助设计师将最重要的元素放在网格的交叉点上，这样可以很容易的设计出满意的构图。
为什么会这样？因为三分法构图创造了类似斐波那契数列(黄金比例)那种不对称的美，产生了更有吸引力的构图。
你希望用户关注哪些地方？高级设计师非常擅长引导用户的视觉焦点，这种引导可以通过可见和不可见的引导线来完成。这些线条在构图中也可以打造一种动感，也能为画面增添视觉冲击力。
达到这种效果通常用特定的形状和线条，或者是它们的组合形成难以察觉的引导线来实现。利用透视、颜色、对比度和正负空间同样可以帮助达到这种想要的效果。
从左到右的不易察觉的曲线将用户的视线引导到页面文字上
大小（scale）是设计中一个元素与另一个元素的相对大小。元素通过大小不同创建视觉层次，其中最大的元素首先会吸引用户的注意力，因此看起来是最重要的。常规的设计策略就是将最重要的元素做成最大的，然后逐级递减。
比例(Proportion)不同于大小，类似但有区别。比例原则是指一个整体设计中各部分的尺寸关系。设计中的元素可以有各种大小，但它们之间的大小差异，整体来看就是比例。
熟练地使用大小和比例是实现设计统一的关键。当一些元素的大小过大或过小，或者比例失调时，设计组合就会失去统一性。这种错误可能发生在排版和其他元素上。例如，标题与子标题和正文相比显得过大。当设计元素失衡时，设计就会“感觉不平衡”。
大小和比例都没做好时(左图)，看起来处理的比较细致了，但依然没有做到很好，在大小上正文和标题分不清(右图)。
强调原则用于使设计的某些元素突出(使用对比、接近、比例、留白等)或不突出，即弱化强调(例如在页面底部有一个几乎看不见的“小字”)。强调是层级之母，因为没有强调就没有层级。
与其他一些设计原则一样，“强调”是用来引导人们关注设计，并强调需要重点关注的第一、第二和第三点。首页面和电商转化页面在 99%的情况下都使用这种原则。
使用这个原则，在购物网站上强调了标语和产品，转化效果非常好
统一是指设计元素如何很好地结合在一起，形成“视觉凝聚力”。它指的是设计中的连贯性，让人们觉得所有部分都是一起的。每个元素都应该具有清晰的视觉关系，以帮助传达清晰、简洁的信息。整体性好的设计比整体性差的设计更有条理，质量也更高。
运用统一的配色，重复、平衡和对称之类的原则将有助于在设计中形成一种和谐感，也就是一致性。设计中良好的一致性就好比歌曲中一首歌被和谐地唱出来，形成一个完美的整体。
一致的颜色、重复的图案、平衡和对称在蒂芙尼的网站上创造了一种统一的感觉。
格式塔的接近原则让设计师将同类型的相关元素进行分组。把它们分开得更远，元素就显得越不相关，它们之间的关系就会减弱。一般来说，人们会认为远离的元素是不相关的。
不应该让用户在设计中分辨哪些元素是相互关联的，正如美国邮政服务的例子所显示的那样，缺乏对邻近性的关注会导致直接的认知紧张，损害用户体验。
接近原则没做好的案例。由于字段标签离它们下面的字段更近，人们可能会搞混
下面是一个邻近性原则做的好的案例，我们可以看到相关元素是如何通过邻近性关联起来的(分组的元素用紫色表示)。
一个把接近原则用好的网页设计案例
一致性原则使数字产品的使用更加可预测，符合用户的期望。设计中的一致性可以培养熟悉度，它可以提高用户体验、可用性和用户使用效率。另一方面，不一致的设计将产生更多的认知负荷/脑力劳动，并导致困惑和挫折。这就相当于在用户的路径上设置障碍。让用户的心流嘎然而止!
做好一致性可以增强“审美凝聚力”。“我们都知道，当我们使用应用时，应用的导航位置如果经常变化，或者像“加入购物车”这样的主按钮在不同屏幕上从红色变成绿色，这是多么令人沮丧。
除了视觉一致性和易用性，品牌一致性在产品设计中也发挥着重要作用。如果没有一致的元素呈现，如排版、配色和图案，高质量的品牌体验将无法传递。
在用户体验方面，一致性意味着在设计中使用相似的 UI 元素来完成相似的任务，即在整个产品中拥有相似的功能和行为。因为可用性是一种评估用户界面易用性的质量属性，所以一致性对用户体验的可用性有很大的贡献。
一致性是通过使用相同的配色、排版、间距、模式和交互来实现的。
颜色在设计中是非常重要，几乎是设计中最具影响力的创意元素。一个深思熟虑的配色可以让一个设计从普通到惊艳，而一个平庸的配色会降低用户的体验，甚至阻碍他们使用产品的能力。
明亮、丰富的颜色比柔和的颜色更引人注目，因此有更大的视觉冲击。柔和的颜色可以提供一个令人愉快的，微妙的配色方案，但适当的对比必须要有，特别是文字，必须保证可读性。
颜色甚至可以用于呈现 UI 中的结构感并指向可用的交互，但为设计制作一个配色方案并不是一项简单的任务。除了品牌化，还必须非常小心地创造颜色的和谐和耐用性，使得它能在各个场景下都能正常使用。
色彩心理学也不容忽视。色彩承载着意义和情感，可以向人的潜意识传递信息。在品牌方面，人们对颜色做了大量的心理学研究，因为在人们与品牌进行任何互动之前，颜色会让他们产生一种本能的反应。例如，蓝色通常被认为是可靠的、安全的和平静的，想想银行；而红色是刺激的，被认为是增加人们的心率，想想饮料包装。
一个极简主义的暗色主题设计传达了一个特定的品牌气质，并使用了少量的颜色。
排版在设计中扮演着非常重要的角色，它的重要性再怎么强调都不为过。在构图中，字体样式对人们感知设计的影响比任何其他元素都大，可能除了颜色。
因为我们的大脑以闪电般的速度运转，一个字体会对一个设计产生影响，以至于它可能在不到一眨眼的时间内改变用户的印象。与颜色一样，字体甚至会影响我们的情绪，资深设计师可以通过字体传达情绪和风格。通过选择合适的字体，我们可以传达出稳定、优雅、舒适、可靠、有力等信息。
排版层次结构可以快速建立视觉层次结构，并且通常在其中扮演重要角色。因此，在设计中经常使用不同的字体和字体大小来表示层次结构，例如标题、副标题、正文和引用。
“除了确保文本清晰易读，排版可以帮助你理清信息层次，传达重要内容，并表达你的品牌。” ——苹果的人机界面指南
兰博基尼的网站巧妙地使用了排版风格和比例来赋予其设计力量。
Claude Debussy 曾说过，“音乐是音符之间的空间“。同样的观点也适用于设计，元素之间的负空间给予设计强调、平衡和统一。
元素周围适当的负空间将焦点集中在元素本身。它强调了内容，并提供了必要的喘息空间，以确保布局不显得杂乱。没有了呼吸空间，人脑就不太可能扫描兴趣点，更容易感到困惑。
苹果官网提供了一个利用负空间创造强烈焦点的杰出例子。
人们已经开始期待所有平台和设备上的优化、无阻碍的用户体验。理解设计原则及其交互方式对所有设计师来说都是至关重要的。使用专业技能设计它们是创造具有视觉吸引力的功能性设计的关键。我们不要忘记，美学的完整性会严重影响用户体验。
基于原则的设计是设计师在感觉有点迷失或用尽创意时可以依赖的黄金标准方法。在没有理解和实现设计原则的情况下，也可能实现可接受的设计。然而，这可能需要大量的尝试和错误才能创造出看起来不错的内容，并创造出最佳的用户体验。
产品的美学质量与它的实用性密不可分，因为我们每天使用的产品影响着我们和我们的幸福。但只有精心制作的物品才会美丽。— Dieter Rams(迪特尔·拉姆斯)
当我们不关注由设计原则驱动的设计质量时，我们可能会忽视品牌质量及其所代表的一切。当某些东西设计不好时，品牌就会受到伤害，产品也会受到影响。这就是为什么伟大的设计师在他们的工作中极其严谨， 他们知道“你永远不会有第二次机会给人留下良好的第一印象。”
设计的细节成就了设计本身。—— 查尔斯 伊姆斯（Charles Eames）
作者：彩云Sky
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
悬浮小窗是什么？
先看张图，对悬浮小窗有一个大致的概念，下图是花椒直播 APP 中的直播悬浮小窗。（为方便书写，下文将悬浮小窗简称为小窗）
本文的悬浮小窗指的是视觉空间上的层级概念。
用户的感知是：
为什么这种感知能应用到互联网产品中？
原因就在于这符合尼尔森可用性原则中的系统与用户现实匹配原则。
即：设计应与用户现实生活中对相关产品的认知、经验、习惯等相符，以用户期望的方式表现出来，使用户可以利用已有的知识经验来执行操作任务。
翻译成人话就是让用户在使用我们的产品时能够和现实生活中的习惯对应起来。
举个例子：
电商软件中“购物车”为什么使用购物车这一形象和名称？
其实就是和现实生活对应起来的，生活中逛超市的时候会把要买的东西加入购物车一起结算。所以“购物车”这个概念迁移到互联网后用户的理解成本就非常低。
悬浮小窗也是一样的道理，小窗模拟了生活中的空间转移，在用户的心智层，界面与界面之间的跳转就类似于从一个房间到达另一个房间。
即使某些时候多个界面在技术的角度其实就是一个页面，但是站在用户的角度看不到这些底层逻辑，最直观的就是一个个房间之间的切换。
（其实这里还涉及到另一个概念，把简单留给用户，把复杂留给程序。不管逻辑多复杂，对用户来说，就是两个空间的跳转。）
悬浮小窗有三个特点：可切换界面、Z 轴最高、可拖拽（一般情况）。
① 可切换界面
如上一节所说，悬浮小窗就像是房间的切换，所以感官上悬浮小窗就是切换界面的作用。
② Z 轴最高
二维界面如何存在 Z 轴的概念？
大家在使用 APP 过程中一定遇到过弹窗和浮层的情况，如下图，可以看到图中 APP 的弹窗在感知上是覆盖在内容层上的。
而右边的截图中的浮层是浮在正文内容上的，这就是 Z 轴，在互联网应用中这是比较抽象的空间维度。但是却是用户可以明确感知到的，而感知的最直接方式就是覆盖或者悬浮，感觉到 A 元素是覆盖在 B 元素之上，或者 A 元素悬浮在 B 元素之上。
而悬浮小窗所谓 Z 轴最高则是因为悬浮小窗在 Z 轴的维度一般位于 APP 界面所有元素之上。
③ 可拖拽
可拖拽很好理解，即用户可以通过拖拽移动悬浮小窗的位置，不过一般非直播音频类产品会喜欢固定在界面的某个地方。比如得到 APP 在听书时退出听书页面会在底部固定一个播放条。
技术维度把悬浮小窗分为两种：系统自带和自行开发。
内容维度上把悬浮小窗分为三种：视频小窗、音频小窗、文档小窗（含白板）
由于系统自带画中画功能自定义程度不高，无参考意义，下文主要从自行开发的悬浮小窗入手，从视频小窗、音频小窗和文档小窗（含白板）三种分类来进行分析。
此部分内容是对第三部分的总结提炼，相关产品详细分析、截图以及录屏细节请查看第三部分。
① 视频小窗
GIF 演示（左滑屏幕边缘开启小窗）
GIF 演示（拖拽小窗超出屏幕边缘后关闭）
视频小窗 UI 集合
② 音频小窗总结
音频小窗 UI 集合
③ 文档小窗
文档小窗 UI 集合
本次调研 APP 覆盖直播、音乐、社交、教育、会议、资讯四个方向，包括斗鱼、虎牙、花椒直播、企鹅直播、CC 直播、阿里巴巴、淘宝、酷狗直播、陌陌、微信、陌陌、百度知道、迈聆会议、金山会议、网易会议、共计 15 款 APP。
视频小窗将从功能和 UI 两个大的维度进行分析，细分维度如下表格。
斗鱼
APP 简介：以游戏直播为主的互动式直播平台
亮点
a 导航栏免遮挡，小窗拖拽移动过程中不会覆盖一级导航和一级页面的底部 tab 栏，可避免将主要导航遮挡住
b「关闭」按钮视觉强度较弱的同时能够看清 icon
槽点
放大缩小不流畅，有卡顿的感觉
虎牙直播
APP 简介：包含游戏、娱乐的互动式直播平台
亮点
a 滑动小窗到屏幕关闭小窗：除了点击关闭按钮，还可以左滑小窗到左右屏幕边缘，超出屏幕 2/3 时关闭小窗
b 同斗鱼，导航栏免遮挡，小窗拖拽移动过程中不会覆盖一级导航和一级页面的底部 tab 栏，可避免将主要导航遮挡住
槽点
自动打开声音：在小窗上将声音关闭后，点击小窗上的放大按钮进入全屏模式，此时声音会自动打开。声音的开关应该由用户自行选择而非帮用户做选择，万一用户所处场合不适合开声音，突然开启的声音岂不是很尴尬。
花椒直播
APP 简介：包含游戏、娱乐的互动式直播平台
槽点
a 同虎牙，关闭声音的情况下打开直播间会自动打开声音
小窗会移动时可以挡住顶部一级导航栏
得到
APP 简介：知识服务 APP，提供电子书、课程等服务。视频以点播为主。
亮点
向下滑动视频触发小窗的方式交互非常友好且顺手
页面切换到有『发布』悬浮按钮时，悬浮按钮位置位于小窗之上，避免遮挡发布按钮
作者：土拨鼠
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
① 导航的起源与本质
导航，英文是 Navigation，是 Navigate 的名词形式，源于 1530 年代，由词根 Navis 船+agere 驾驶组合而成。指的是借助某些科学仪器，找到从一个岛屿到另一个岛屿的路径。
图1 导航的起源
诞生于中世纪大航海的导航，从诞生之初就跟起点、目标和路径密切相关。随着导航的发展，导航领域从海洋扩展到陆地，航空、太空，以及互联网。
图2 导航领域的类型
今天我们重点要聊的就是移动互联网产品的导航设计，虽然脱离了物理空间，但导航的本质始终是不变的。
图3 导航的本质
导航本质：告诉用户“我”在哪里（起点）？“我”能去到哪里（目标）？“我”该怎么去（路径）？
基于此，导航设计一定要能清晰的体现用户当前所在的位置（一般用选中态表示），并通过其他未选中的导航，来告知用户可以去的目标，再通过最简单的点击或滑动等操作让用户去往目的地。
图4 互联网产品导航示意
我归纳了移动端常见的 10 种导航形式，大家可以根据其优缺点和适用场景按需选用。
图5 移动端常见的10种导航形式
① 底 Tab 导航
底 Tab 导航在 iOS 中叫标签导航，在 Android 中称之为底部导航，我将其称为底 Tab 导航，它是 iOS 中最倡导和常见的导航形式。（现在也全面征服了 Android 系统）
图6 底Tab导航
优点：清晰直观的展示了产品的核心功能，点击切换方便快捷。
缺点：只能容纳 3-5 个，数量有限。
使用场景：产品包含 3~5 个需要高频切换使用的非同类型模块时可用。
② 舵式导航
舵式导航可以看做是底 Tab 导航的一个变异，区别就在于把中间的导航像船舵一样凸显，以此来强调中间的导航功能（一般用于承载发布类功能）。
图7 舵式导航
优点：舵式导航特殊的造型和颜色可以很好的吸引用户注意力，促进功能转化。
缺点：为了让舵居中，导航个数只能为 3 个或 5 个，数量有限制。聚合多个发布类功能时，需要二次选择，操作不够便捷。
使用场景：对于强调 UGC 类的产品或者特别高频的操作可以使用。
③ 顶 Tab 导航
顶 Tab 导航最开始是 Android 推出用以抗衡 iOS 底 Tab 导航的，结果大家已经有感知了（抗衡彻底失败）。但顶 Tab 导航并没有因此而消失，而是重新找到了自己作为次级导航的生态位。
图8 顶Tab导航
优点：可以承载 2~N 个导航，可拓展性强，手势切换比较便捷。
缺点：手势切换有学习成本，顶部点击不方便，看不见的导航内容不容易被发现和使用。
使用场景：作为主导航几乎已被底 Tab 取代，作为次级导航非常常见，特别是有多个并列层级的内容需要展示时。
④ 抽屉导航
如果产品只有一类核心展示的内容，可以使用抽屉导航而不用底 Tab 导航，以最大限度的利用屏幕空间。
图9 抽屉导航
优点：可拓展性强，可以收纳多个不常用的功能，释放屏幕展示空间。
缺点：被隐藏的功能不容易被发现和使用。
使用场景：某些核心功能比较单一的产品，或者跟底 Tab 导航组合使用，收纳不常用的功能。
⑤ 菜单式导航
跟抽屉式导航类似，把一组操作收纳到一个地方，用户可以点击快速选择。
图10 菜单式导航
优点：可拓展性强，可以收纳多个功能，释放屏幕展示空间。
缺点：被隐藏的功能不容易被发现和使用。
使用场景：当页面功能较多，无法全部直接展示时，可以使用下拉菜单统一收纳。
⑥ 宫格式导航
早期比较流行的主导航，现在是比较常用的局部导航。
图11 宫格式导航
优点：信息层级扁平，个数较少时，核心功能一目了然，用户选择成本低。
缺点：个数较多时视觉认知成本、查找成本都很高，进入功能后切换成本也高。
使用场景：平台类产品的核心功能展示，或者普通产品的重要功能/运营入口。
⑦ 列表式导航
对于主要以文本为载体的产品，采用列表式导航非常常见，比如短信、邮件、记事本、设置等。
图12 列表式导航
优点：有足够的文本/图标显示空间，可以显示标题和辅助文字，传递的信息内容相对丰富、直观，而且可以显示多条内容。
缺点：整体页面信息会比较密集，页面布局相对呆板，条目多时查找会比较困难。
使用场景：适用于展示多条以文本为主体的内容。
⑧ 瀑布流导航
对于主要以图片/视频为载体的产品，采用瀑布流导航的非常常见，比如花瓣、点评、淘宝、bilibili 等。
图13 瀑布流导航
优点：能够凸显图片的吸引力，让用户聚焦在图片上，促进内容的转化。同时可以承载无限多的内容，自动加载不翻页，增强用户浏览的沉浸感和效率。
缺点：屏幕空间占用较大，依赖于信息推荐的精准度。
使用场景：适用于展示多条以图片为主体的内容。
⑨ 轮播式导航
当产品/模块提供的信息足够简单扁平，一屏即可显示全部核心信息时，可以采用整屏轮播或区域轮播的导航形式。
图14 轮播式导航
优点：操作简单，信息呈现直观。
缺点：未轮播的信息曝光率和转化率都比较低。
使用场景：简单的小工具类产品可以整屏显示核心信息。运营广告位可以区域轮播展示。
⑩ 沉浸式导航
在活动类、游戏类产品中，常常采用沉浸式导航，增强用户沉浸感。
图15 沉浸式导航
优点：导航与页面融为一体，视觉感受沉浸，页面更有吸引力。
缺点：用户可能注意不到某些是内容的元素，导致该元素的转化率较低。
适用场景：活动类、游戏类的产品中。
① 确认信息结构
导航设计是以信息结构为基础的，所以在进行导航设计之前，我们需要将范围层提供的所有信息进行分析，删减、分类、整理形成特定的信息结构。
图16 从信息到信息结构
以微信的部分信息为例，我们将信息进行分类、整理、命名形成了上述的组织系统，让信息与信息之间的逻辑关系一目了然。
这里大家可以参考行业竞品的信息架构，结合自己对业务关系的理解，辅助以卡片分类的方式，整理出最适合的信息结构。
PS：为了提升导航的易用性，建议的导航广度最好不超过 5，深度不超过 3。这样符合米勒定律，用户的选择压力较小，也不容易迷失在较深的路径中。（当然这只是一个建议，优先要保证的还是信息结构的合理性，不能为了满足上述建议而破坏信息之间本身的逻辑关系，时刻牢记认知成本＞操作成本，不能为了减少操作成本而增加认知成本）
② 选择导航形式
根据信息结构中主导航功能的个数，以及主导航功能之间的优先级关系，再结合各导航的适用场景、个数限制、内容丰富度、功能可见性、操作便捷性等，匹配合适的主导航、次级导航和局部导航形式。
图17 导航总结
从现况来看，多数产品都愿意采用底 Tab 的主导航形式，因为可以曝光多个功能，用户点击操作方便，学习成本低，利于其他功能的转化，后续拓展也比较方便（可以配合抽屉式导航、顶 Tab 导航，菜单式导航和局部导航混合使用）
③ 优化导航路径
信息结构梳理了信息节点之间的逻辑关系，但用户在真正使用产品时，有些子节点的功能/信息，其优先级和频率反而更高，为了让用户能够方便快捷的使用这些子功能，还需要结合用户的使用场景，在合适的场景下添加一些节点和路径，以提升用户操作的流畅性和效率。
图18 组织系统和导航系统的关系
还是以微信的导航设计为例，因为添加好友，扫一扫、收付款功能重要性和使用频率，微信特地在首页增加了一个菜单导航，方便用户能更快捷的触达这些功能。
所以导航设计，不仅要正确的反映信息之间的结构关系，选择合适的导航形式，更重要的是根据用户的目标、认知和习惯来组织导航节点，让用户可以很直观的理解“我”在哪，“我”可以去哪？并通过最便捷的操作到达目的地。
作者：悦姐聊设计
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在选择网页设计尺寸时，我们并非只让产品在部分设备上对访问者保持可访问性以及吸引力，而是希望他们无论使用什么设备都可以更好的进行体验浏览。
在早期的设计中我们可能需要针对不同的分辨率输出不一样的设计稿，但现在大部分网站平台都是响应式，这意味着我们只需要做一个在不同设备上都兼容良好的设计即可。
因此我们可以得出B端Web设计中采用主流的最大宽度并非最佳选择，而是要基于不同设备上的尺寸选择最具合适的那个。
由于Web端分辨率太分散，我们只考虑占比最大的前几个，根据百度流量学院里面有关PC端分辨率的占比，排名前三的是1920×1080、1440×900、1366×768。
这三个主流的尺寸在市场中总计占比70.38%，意味着这几个分辨率的市场占有率体量巨大。它的背后说明了16:9的分辨率已经逐渐的形成一定的规模和使用习惯，我们只需要按照当下主流的分辨率进行针对性的设计即可。
设计稿可在1920、1440以及1366这三个尺寸中进行选择。
为了更好的在不同的尺寸中都保持体验的一致性，兼容性原则作为我们选择最主要的设计标准。
更直白点就是设计尺寸在放大或者缩小的情况下都可以减少因为分辨率带来的差异性。因此以1440作为基础的设计尺寸的话，向上或向下适配误差会较小。
那么假设我们用1366的尺寸做设计稿适配到1920的界面上，界面看上去肯定会特别松散。反之，如果我们用1920的尺寸适配到1366上，界面又会显得拥挤，甚至可能会出现错位，这个时候，就只剩下1440的尺寸最适合做设计稿。
设计分辨率的建立要优先考虑目标用户主要使用的设备，以真实的用户的应用设备作为基准。这个基准以外的分辨率都是可以进行次要考虑。
由于B端的业务属性，它需要满足更细分、特定的商业目标受众，我们对其进行定制化需求设计。
通过前期调研，发现该集团所有的操作电脑都是由企业统一派发的24寸、分辨率为1920×1080显示器。那么我们在设计中只需要选择该分尺寸即可，不需要考虑上下兼容的事。
同理，假如我们的目标用户都使用1366宽的商务笔记本，那么我们的设计尺寸则可以改为1366×768。
当我们确定好设计尺寸是1440×900后，最好不要直接使用900作为基础的设计高度，那么高度该如何定义呢。
这里我们不得不提首屏的概念，它指的是不滚动web网页屏幕的情况下就能被用户看到的画面。
根据尼尔森的可用性研究报告，首屏的关注度在80.3%，首屏以下的关注度仅有19.7%，这两个数据足以表明每一个需要转化率的网站首屏的重要性，因此我们需要掌握页面高度，尽可能的把页面中重要信息在首屏展示。
B端web界面的展示依托于浏览器，而浏览器除了主窗口显示的页面外，还包含了浏览器高度（页签栏、地址栏、书签栏）、底部状态栏。因此我们真实的设计高度=电脑分辨率-浏览器高度（130px左右）-底部状态栏（30px左右），因此可以得出首屏高度≤740为安全区，我们在这个区域内设计的话基本可以保证首屏的内容的展示效率最高。
作者：江鸟的设计生活
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
间距指的是界面各元素彼此相隔的距离，可以是文字自身的行距、与图片、与组件、与模块的间距，或是界面两侧的安全距离（如网页的宽度为1920px，内容区为1400px，那么安全距离为两侧各260px）等。
作为UI设计师，在设计界面的每一个元素都需要考虑到上、下、左、右以及毗邻元素的属性来合理调整间距，利用各间距之间的规律来组织界面内容，确保信息的节奏性，给用户轻松、预约的浏览体验。
间距可以让界面信息更有节奏，提升内容的可读性，还能通过不同的疏密程度来阐述各元素之间的关系，以吸引用户的注意力，所以在控制界面间距时，一定要有“较真”的心态，任何一次的改动与调整都要先考虑清楚为什么，能给产品和用户带来什么。要做好间距，不能仅停留在视觉层面，需要进行多方面思考。
设计师层面：规范的定义间距，不必每个元素都去考虑间距的大小，有效减少决策和思考时间，提升效率。
开发层面：开发可以按照基础间距去定义变量，长期如此，虽然不能炼成像素眼，但仅凭视觉也能看出间距的倍数。例如基础间距以8px增量，在使用8px、16px、24px、32px、48px...等，开发直接使用基础间距x1、x2、x3...，以此类推，在开发眼中，肉眼定然看不出1px的差别，但却能区分出8px的差距，不必每次都去测量，还能减少误差，高度还原设计效果。
用户层面：有节奏且具备一致性美感的界面效果，信息的有效传递变的轻松，用户体验能得到很大程度的提升。
设计规范的目的是提升设计师的工作效率、团队之间的高效沟通、让设计风格始终保持高度统一。同理，间距也是设计规范中非常重要的一环，它作为规范中的最小单元，如果没有遵循统一，将会直接影响界面整体的版式和布局，信息的疏密程度严重影响用户的浏览。不仅是设计师，开发每次面对同样的模块都需要定义不同的间距也是崩溃的，毫无规律可循。
统一的间距能让界面的视觉效果更有节奏，设计师在设计某些相似的模块时可直接复用组件，即便是多人共同完成同个项目或更换成员，也不会因间距不统一的问题造成整个APP的风格混乱。
对开发来说，如果清楚间距的使用规律，即便有小的误差，也能自行更正，例如使用8px增量，8、16、24...按倍数规律以此类推，若出现9的间距，开发会更正为8、15则会更正为16，自行多退少补，虽然设计师需要细心、尽量不出现这种小的出入，但任何事情都没法做到绝对，统一的间距能让减少设计的出入以及与设计师之间的频繁沟通，能进一步提高开发效率。
▲ 从上图可以看出，间距不规范、信息就像一锅粥，而规范的使用间距就能将信息自动分组。
文字是UI设计中非常重要的信息元素，虽然大多数设计师对文字的属性比较了解，但在真实设计中总会因其他信息的干扰不能合理运用，与上线后的视觉效果预期相差甚大。文字的各种间距处理看似简单，但实际上有很多因素要考虑，例如字间距、行高、段落等，下面带大家一起了解。
字符间距一般都是设计工具的默认数值，无需调整。当碰到多行文字需要避开头尾的标点符号时，使用工具中的避头尾功能即可自动调整字间距，如无此功能，则需手动调整，这里并没有所谓的技巧与方法，头尾避开标点符号即可。
另外，在设计卡片、瓷片区的标题时，有时需要通过调整字符间距来提升界面的舒适度，间距数值自行定义，但相同层级的内容标题字间距一定要保持一致。
行高是指上边框+下边框+字号的高度之和，这里主要针对多行文本。在平面设计中，行高没有一定的标准，如无特别需要，使用系统默认的行高即可。
在UI设计中，文字会有5～6个不同的等级，为便于用户阅读，一般会设定行高标准，尤其是新闻资讯类型的应用本身就以文字内容为主，不同的行高对文字的易读性会产生较大的影响。
文字行高一般会设定为字号的1.2～1.5倍，具体值跟字号有很大关系，文字越小，行高就越大。例如，我们可以设定字号32px为中间值（非绝对），小于或等于32的字体、行高为字号的1.5倍，大于32的为1.2倍。另外，也可以直接将所有行高固定在字号的1.5倍，不难发现，字体越大其折行的概率就越低，试想一下，如果将48px的文字折成几行，界面还能剩下多少空间？
文本段落间距的重要性在移动UI界面中并不明显，更多体现在网页设计中。需要着重纠正一点的是，部分设计师在设置段间距时习惯性的多敲一次回车键，这种方式并不可取，会造成间距过大、内容脱节。
如有需要，一定要手动设置段间距，这里没有固定的数值和规律，视觉舒适即可。笔者习惯将段间距设定为字号的0.5倍，例如字号为30、段间距为15，字号为40、段间距为20，仅供参考。
定义间距其实并没有一个绝对的标准，主要取决于最小单位，例如4px、5px、6px、8px都是可以的，到底使用哪个数值还得根据产品自身定位及内容组织形式，前提是所有间距都要遵循最小单位并基于倍数形成规律。
在设计界面时，需要利用间距来建立信息层级、提升浏览体验以及表达各元素之间的关系，这就是为什么当我们打开新闻资讯、电商类应用会发现信息非常紧凑，而打开工具、社交类应用时感觉信息比较宽松。间距的基数越小、页面就越细碎；基数越大、页面的留白就越多，使用不同的基数，呈现出来的视觉效果也形态各异。
笔者在工作中通常以8px作为基数，以此衍生出8、16、24、32、48、64这6个间距数值，完全能够满足绝大多数的使用场景。当然，针对信息较少的页面也会使用到120、160、200...其他间距数值，例如缺省页、登录页面等。不难看出，上述以8px为基数定义间距数值时，没有40、56这两个数值，难道他们不是8的倍数吗？我们以8和16做对比，后者是前者的2倍，其间距的变化尤为明显；但如果用56和64做对比，后者是前者的1.14倍，其间距的差别微乎其微。敲重点，设计师在定义间距时，需要遵循倍数规则，但同时也要为考虑界面美观及用户的浏览体验而跳出呆板的规则，当间距数值越大时，根据基数所跳跃的倍数就越大，其实设定字号也是相同的逻辑（后期详解）。
从信息层级角度来看，等级权重越高、间距就越大，在现实世界中也是如此，一个物体周围的空间越大，就越容易吸引人们的注意力。
模块间距分为块内间距（同一模块中不同元素或信息组之间的距离）和块外间距（同一个页面中不同模块的之间的距离），为了更好的区分信息层级，块外间距一定会大于块内间距，也能保持块内信息的亲密性。
如下图所示，将装修序列步骤、官方攻略、常用服务等看作不同的信息模块，每个模块内元素的间距都会比各模块之间的间距小很多。
需要通过各元素的间距来体现出信息的关联性，格式塔原理中的“接近性”原则告诉我们，相互靠近的物体被认为比相互距离较远的物体更有关联性，因此，相关联的元素之间靠的越近，用户越能感知到信息的关联，同时更能了解整个界面中各模块信息的逻辑关系。
很多时候，想让一个元素变的突出，可以用加大字号、修改色值或后加粗等方式进行强调，但这并不是突出信息的唯一方式，当所有元素都变的突出，那就等于什么都不突出了。如果想让界面中的元素不同程度的突出，留白也是一种强调信息的方式，它能引导用户将注意力集中在特定的内容上。
善用栅格系统（上述有详细说明），通过最小间距值进行递增，让整个界面看起来更协调。栅格系统可以让设计师在元素的亲疏关系上更快作出决策，后续不管是迭代还是更换设计成员，都能保持统计的间距规范。
这个问题在很多团队中都是硬伤，甚至在设计验收时还被直接忽略。在主流UI设计工具中，添加文本元素时，都会有默认行高，在前面的内容中有讲过多行文本的行高为字号的1.2~1.5倍，那么单行文字的行高到底是需要手动设置还是遵循默认，笔者认为都是可以的，但一定要与开发保持一致。
行高决定着文字边缘与定界框的间距，而开发只能看到定界框与其他元素的间距。
1）默认行高
默认行高值会随着字号的变化基于一定的倍数自动增减，需要将此规律或倍数告知开发，开发将此规则植入代码方能最大化还原设计效果。另外在设计界面时，尤其是多组文字元素的上下间距，需要通过计算（文字边缘到定界框的间距+文字元素间距=实际间距）或手动测量才能达到精准状态，下图为例：
2）手动设置行高
手动设置即字号是多少、就将行高设置为多少，确保文字边缘紧贴定界框，在设计过程中调整间距时，无需计算，根据设计工具的智能提示调整即可。
在同一APP应用中，根据最小基数定义的间隔值数量不易过多，一般在6个左右就能满足绝大多数的设计场景。例如以8px的基数为8、16、24、32、48、64等，以5px的基数为5、10、15、25、40、60等。数量过多会导致界面不同元素、模块的间距差异化不够明显，数量太少无法满足多元素、模块使用场景，也会导致间距跨度较大。
设定间距值需遵循一个原则“数值越大、递增的倍数就越大”。当相邻间距值的差异化较小时，用户很难感知到界面中信息之间的逻辑关系，我们需要根据栅格系统中间距值的增大、设置更大的区间值，让相邻间距值之间的视觉差异更加明显。
当界面中的信息较为密集、间距不足以满足信息的突出程度时，需跳出纯粹的间距规范束缚，换种方式或许更好。例如：给元素添加背景让其聚焦、使用分隔线/色块间隔、调整元素大小等，需知「此消彼长」的道理。
如果在处理界面信息层级时，改来改去还是觉得很乱，不防从间距角度出发，或许会有不一样的收获。虽然在刚开始的时候，规范间距带来的效果甚微，但随着团队规模不断扩大、界面数量越来越多、内容越来越复杂时就会发现，所有内容统一间距规范，不管是构建一致性界面视觉效果、还是对开发和设计师来说，既能提升用户体验、还能提高团队的工作效率。
间距是否规范使用，决定着界面是否规整、信息传达是否清晰，即便如此，间距也只是解决信息层级方式的其中之一，切不可让其限制设计师的发挥和思考空间。制定设计规范有助于项目的高效运转，间距也好、色彩也罢，设计师依然需要从实际用户场景出发，通过不断的思考和经验总结，打磨出更合理、更符合项目需求的设计规范。
作者：大漠飞鹰CYSJ
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在设计一个产品的时候，我们要透过现象看本质。
我们是为谁？解决什么问题？分析的结果将直接影响到方案的好坏。 这里推荐大家采用5W1H分析法，5W1H分析法也叫六何分析法，是一种思考方法，也可以说是一种场景创造分析法。
5W1H分析法包含如下几个方面：
Why：为什么要做，是原因。
What：做什么、做成什么，是目标。
Where：在哪儿做，是地点。
When：什么时候做，是时间。
Who：谁来做，是执行对象。
How：怎么做，是方法。
通过上述分析我们可以（假设）知道：我们的用户是技术人员、基层管理人员；做这个页面的目的是为了让用户随时掌握各项工作的进展情况，快速进入需要处理的工作事项。 根据结论可以得出工作台是一个导航页面或者综合管理页面，它是用户感知产品价值的重要“门面”，使用者有一定的经验，属于高级用户。从设计角度来看，首页工作台是整个系统规范与视觉风格的核心场景。
主要是技术人员、基层管理人员
P0:各类数据指标的汇总、我的动态
p1:总量趋势、数据排名、操作汇总
p2:分发汇总、待办事项
重点突出、简洁、清晰
下面这张图是产品给的原型，也是B端面试题中经常会遇到的题目。如果你打算就按照产品给的原型直接做美化，那估计很难被选中。
做需求分析的目的之一就是为了做信息处理，这里要提到一个词叫“屏效”。B端产品我们都知道，目的是“降本增效”，在合理的信息布局下尽量利用交互等手段让页面缩短。
比如：上面原型中有两个top10排名，如果一行展示会比较拥挤，也体现不了top10排名。考虑“易读性”我们会放两行，但这样又占据了屏幕空间，在与产品沟通后我们把它整合到一起，利用按钮组切换进行查看。同时排名也是业务人员需要关注的，所以我们把它们往上放。
顶部个人信息内容比较少，也没必要占一整行，我们把它移到右边；各类指标因前3个是不能点击的，为了和后面可点击按钮做区分，我们整合到一个卡片上；待办事项与产品沟通后说不太重要，移动到了最下面，操作汇总模块往上移；
到这里模块之间的信息优先级基本处理完成，下面就要对单个模块进行拆解处理。
首先我们要观察哪个是：重要信息、次要信息、辅助信息，上面我们提到了“效率”，把重要信息突出显示，就是为了让用户一眼就能看清，不需要去寻找或被次要信息干扰。
最后一个模块原型上只有一个标题，这真是验证了一句话：“巧妇难为无米之炊”，所以又去找产品沟通，为什么单个模型可以点击查看更多？用户在这个地方想要获取什么样的数据？
经过一番沟通，拿到了一些“米”，巧妇终于可以干活了。为了体现“易发现性”，我们在后面这个模块上加了一个详情按钮。
其实上面的图是我处理过的，产品的原型可不长这个样子，模块大小、间距都是随便给的。你如果也按照产品给的原型模块大小做，估计研发会“骂娘”，因为这样没法按照比例进行换算，也就没法做自适应。
这一步主要就是做栅格化处理，我们需要定义每个模块的占比与间距。B端产品通常选用24栅格布局，也就是24栏+23水槽+2页边距。
我遇到的工作台页面有两种，一种是带左侧树，一种是不带，这两种对应的栅格化数值不太一样。 按照目前常用的尺寸1440*900来计算：不带左侧树我采用的是1440=2*20+43*24+16*23。
如果大家做的是带左侧树，可以参考下图数据
重点来了，我个人觉得这一节才是工作台、数据分析页面的核心，但很多人都忽略了，觉得不就是几个图表，唰唰唰一下就搞定了......
上面我们提到过B端测试题给的都是原始数据（表格），需要设计师自己根据数据找合适的可视化图形进行展示。
如果你对可视化图表不熟悉，不知道什么时候该用柱图、折线图、饼图；不知道随时间变化该用什么图形；不知道体现排名的数据该用什么图形。那你很难输出一份有理有据的作品。
因图表类型太多，详细的留到后面文章讨论，这次只对原型中使用的到图表进行分析：
柱状图是常用的数据可视化图形之一，可用于随时间变化而产生变量的数据统计，也可用于数据类别的对比、排名。
如图，柱状图能展示知乎文章观看者地域分布，也能反应出不同时间段的情况，并通过图形能够快速了解 分布最多和最少的省份。
优点：
人眼对长短（高度）比较敏感，可以直观体现数据差异性。
缺陷：
分类过多时数据的展示效果会降低。
能把图形视觉与体验都兼顾好，才能体现设计师的价值。 设计师的能力不仅体现在技法上，更多的是体现在思考能力上。图形扩展性设计和创新性设计都需要设计师做缜密的思考，只有这样才会有出彩的设计结果。
信息层级：
视觉展示：
2个人站在一起我们除了对比高度、颜值，还有会对比胖廋。那么，柱状体的粗细和间距如何定义呢？ 在图中，中间柱状图的柱子间距过于疏散没有规律；右边图中的柱子间距又过小，视觉上显得拥挤，并且当分类过多时，过小的间距会导致柱状体之间没有独立性，不易阅读。
定义柱状体的间距可以用5分原则设计法，即柱子之间的间距为N，左右两边与柱子之间的距离就是2/N。 如图所示。这也是很多界面设计中常用的技法，其原理就是接近黄金比例，视觉上较为舒适。同时，在保证界面元素整体协调性的情况下，尽可能把柱子的宽度设计成N，这样视觉上最为协调。
另外，在设计图形前，设计师最好能了解到真实数据，这样才能结合真实的数据来设计图形，尽可能还原落地后的样子。在图中，图形的设计和落地后的样子存在较大的差异。问题就出在设计前设计师没有了解数据的真实情况，前端工程师按照设计图把X轴的数值固定了。
相似图表：
堆积柱状图：堆积柱状图可以展示两个或多个数据的变化，以及数据之间的综合比较情况。
分组柱状图：分组柱状图可以在同一数轴上展示各个分类下的不同分组数据。
有序柱状图：与有序条形图一样，有序柱状图也能呈现数据的排名情况。
折线图常用于表示一个连续时间段内数据的变化趋势，主要功能是能够清晰地反映出数据随时间变化的趋势。
如图，折线图不仅能展示不同月份的价格趋势，还能清晰呈现数据的峰值和低谷。折线图也可以是多条线，用来分析多组数据随时间变化的趋势及数据间的趋势比较。
优点：
直观反映数据变化趋势
缺陷：
无序的类别无法展示数据特点。
折线图可以用于展示数据的趋势变化，通过折线的起伏波动可以帮助人们探究数据背后的逻辑。但如果折线图的设计不够合理，在视觉上会让人产生错误的认知。在图中，有的折线图的刻度值设置不合理，如中间折线图的刻度值未从0开始，导致折线的呈现夸大；右边折线图的刻度值过高，趋势变化呈现过于平缓，这些都是在不客观地表达数据。正确的方式应该是刻度值从0开始，随着数据的增减，刻度值也做相应的变化。
视觉展示：
在折线图设计中，还需要注意折线的粗细要适中。在图中，其中一条折线过细，这会降低数据可视化的表现；另一条过粗，就会损失折线中的数据波动细节。在产品的图形设计中，一般网格线和起始线都是1像素，折线一般用2像素，这样的粗细会有较好的视觉表现。
相似图表：
阶梯线图：线在数据点之间形成一系列步骤。
面积图：与折线图唯一不同的是，其自变量数据和坐标轴之间有颜色填充，这样能更加突出数据的趋势变化。
提到数据的占比，相信你第一个就会想到饼图，主要用来展示数据分布情况。 饼图是展示占比数据最直观的图形，通过弧度大小来表示分类的占比多少。但饼图有一定的局限性，当占比数值接近或占比分类过多时，在视觉上就不容易辨别各个类别占比的大小。在数据可视化产品中，因为饼图是大面积的色块，视觉上会非常突显，很容易抢走重要数据的风头，所以使用时要酌情考虑。
优点：
直观显示各项占总体的占比，分布情况，强调整体与个体间的比较。
缺陷：
分类过多，则扇形越小，无法展现图表。
每个图形都有自己的设计规范，如当饼图分类过多时，一般不把文字放在图形元素上，因为一旦出现几个相对较小的占比数据，字就很容易溢出，不容易辨别指向的分类，如图中的右图所示。好的解决方案就是，在图形的外围用引线指出分类数据，或者加示例图展示。
视觉展示：
另外，饼图的分类最好从12点钟的位置开始，这样较为符合人的阅读习惯，即从上到下、从左到右，如图中。如果饼图随意从不同位置开始展示，就会缺少规范，这样当多个饼图同时展示时容易出现混乱。
同时，在饼图的分类中如果没带排序，如1月、2月……，那么占比最好能够从大到小依次排列，这样还能直观地呈现出分类的排名情况。任何时候，如果有“其他”这项分类，无论其占比多少都要放在最后，因为其数据通常是最不被关注的数据。
相似图表：
嵌套圈饼图：用于一个指标在不同维度的占比。
跑道图：看到占比的同时，可以直观看到指标在当前维度下的排名情况。
表格看起来简单，但想设计好也不是一件容易事。通常我们见到的（产品中）表格都属于比较简单的表格。
在BI系统中有一些复杂的表报，如果直接用组件信息会很难阅读。我们需要对表格的视觉进行调整，让信息获取更高效，这就需要一些设计技巧和原则。
而图中（上图）的项目名称长短不一，居中对齐在视觉上会使切入点呈现“Z”字形，影响阅读效率。左对齐可以使线性结构在视觉上不跳跃，阅读流畅且更具美感。表格中的数字需要右对齐，因为当我们在面对一个长数字时，一般会从右往左读。比如数字¥368,568,023.00，我们一般是从个位到最后的千万位顺序识别数字体量，有的人可以通过千分符迅速判断数字的体量，但其实也是从右到左的浏览顺序，因此数字右对齐最符合人的阅读方式。
在图中（下图），让我们感受一下数字左对齐、居中对齐、右对齐的阅读效率，以及对各个数据体量的对比感知。
文字左对齐和数字右对齐，针对的是长短不一的名称和大体量的数字，而对于文字数量一样、体量较小的数字也可以尝试用居中对齐的方式，对称的元素本身就具有美感。如图所示，通过对表格中的文字和数字的重新排版，相信在阅读效率上会有较大的提高。虽然提高了阅读效率，但这相比优秀的表格设计还差得很远，其中最明显的是表格的边框在视觉上过于突出，接下来我们继续调整。
如图（下图）所示，通过弱化边框在视觉上能够突出表格的内容。表格边框可以让信息的呈现更有条理，能够提高易读性，但在视觉层级上不能高于内容信息。
将表格的边框与分割线去掉，用留白分隔内容，无框胜有框，增大留白可以使表格更有空间感。这样的设计需要注意的是，元素的间隔不能太小，不然会显得拥挤。由于去掉边框后有些问题会被放大，比如标题与内容没有对比，因此需要增强对比，在整体上要有层次。
图中的表格加强了标题，这样看起来更有层次。强调标题的方法有很多种，不一定只是加粗字体或加大字号，还可以给标题栏添加背景，以形成对比。
如果在一组数据中有重要数据和次要数据之分，那么就需要在对重要数据的设计上着重突出，表格的设计同样如此。图中所示就是把重要的数据信息通过增加背景色与其他元素形成较为突出的对比，这种设计是一种为用户做选择的设计方法，容易让用户的视觉停留在他本想重点关注的地方。
由于人们常常会对熟悉的事物产生审美疲劳，因此设计中有创新才容易给人眼前一亮的感觉。
下图在背景上面给了一根横线，来凸显这一列的数据，这样除了可以加强信息传达也可以打破常规的表格样式（这里只是提供一种思路）。
表格数字最容易出问题的是数字字体的运用，因为很多数字字体不是等距设计，比如数字“1”所占的字间距面积要小于“8”的。如果遇到一组大量级的数字，就有可能会误导观者。
如下图所示，本来32,118,116,00大于28,558,363,00，但由于不同数字所占宽度不一样，这样的设计在视觉上容易误导用户。因此，表格中的数字要使用表格字体，因为表格字体每个数字所占面积一致，这样就不会出现案例中的问题了。
其实很多表格里面的数字字体都存在类似问题。下图是修改数字字体后的设计，这样就能客观地呈现数据了。
表格中常用的字体有Roboto、DIN、微软雅黑、思源黑体、宋体、苹方字体等。
四、视觉设计
参考631配色法
对有含义的颜色要谨慎使用，例如：红、黄、绿
常用的图标分为两类：
工具图标：包含一定产品功能隐喻的简化抽象图形，代替文字节省界面空间，方便用户理解，常用于b端产品里面。
如图，里面来自不同产品的图标，虽然表现形式不太一样，风格不太一样，但都是为了体现图标后面文字的意思。
装饰图标：主要目的是用来装饰界面的视觉元素，样式大于功能，常用于产品宣传、活动等页面。 如图，云计算、大数据相关的产品，语义都比较复杂，很难通过图标去表达，既然看不懂，就抽象点。
在 B 端产品中，应用最广泛的还是工具图标。 可能有人觉得工具类图标太简单了，它是看起来简单，想做好一点都不容易。
首先要保证“一致性”， 粗细一致、圆角一致、透视一致、大小一致，同时还要把语义用图形表达出来。
一般采用8的倍数：8、16、24、32、40、48、...
12px、14px、16px、20px、24px，可采用“回退机制”
作者：夜莺YEAH
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
根据公司结构和职能角色的需求不同，用研中部分是行为观察，部分是商业战略，部分是心理学，部分是数据分析，部分是设计，部分是团队促进。用研可以有不同的风格，因此可以在行业范围内四处移换位置。根据公司规模和类型的不同，我见过很多用研团队变成设计部门的一部分，有些则变成营销部门的一部分，还有一些则在产品管理部门——最终在哪都根据公司的规模和类型来决定。在我任职期间的某个时候，我自己的团队已经集结到了之前提到的各个部门。
所以...有没有一个部门可以更加适合配备用研部门，让用研更加成功且具有影响力呢? 这是我想找到的答案。
...
用研部门应该存在于...
...在设计团队？
摄影：Harpal Singh 于 Unsplash
优势：
研究与设计交织在一起：用研已经成为许多用户体验设计师工作职位描述中的一部分，而用研的核心就是指导设计。研究结果可以指导交互行为，并且它从一开始就已经嵌入了设计过程里。如果一个设计团队有专门设立研究部门，会让这个团队变成一个强大的联盟。让更大的设计团队统一研究整体用户策略，会让之后的调研和设计过程更加整体和完善。同样，设计师也有想改善用户体验的众多想法，并且通常很高兴能看到用户和他们的想法进行交流。这直接与这些创造用户体验改善的设计师们，促成了一个强有力的文化测试、迭代、再测试的过程。由于设计与用研的过程是结合在一起的，因此可以立刻将这些用户洞察应用到设计中去。
类似的工作流程：用研的工作流程与传统的设计流程十分相似。设计领导者可以无缝地理解研究的各个阶段：复查现有的数据，引导生产性研究，汇编各种信息从而寻找新的模式，创建一份报告，陈述研究结果，在上线后测试等等。同时，从设计概念开始，征求意见、进行测试比较设计方案的好坏、迭代设计、产出最终的版本、呈现并且在上线之后进行迭代。设计和用研通常希望携手合作，共同努力改善数字化体验。
劣势：
设计≠用研：不是所有的设计师都会进行研究，要么是因为他们没有时间，要么是因为他们没有接受过理解研究方法的训练。（相反，也不是所有的研究人员都是设计师）通常，公司会安排设计师同时做研究员的工作，反之亦然。这对最终实现的产品来说可能是灾难性的。尤其是在较小的公司中，设计师需要扮演很多职能。这意味着他们“有时候“有时间能亲自调研。不幸的是，在设计和用研没有明确定义的前提下，这意味着雇佣部门和领导团队认为这两者是可以互换的 (注意: 这并不意味着某些设计师没有资格，只是“视觉设计师 / 平面设计师”、“UI设计师”和“UX设计师”的技能组合是有区别的，但我不会在这里讨论这些!)
用户需求可能会被遗忘: 有时候，一个设计规划图会被过分热烈的创造性驱动从而创建，而不是来自于数据或研究。很多时候，创意人员会对他们喜欢的新想法产生依恋，即使它并非源于用户需要的东西(有时候我们都会为此感到内疚)。不幸的是，这意味着研究可能是事后的想法，更经常地被作为验证工具而使用，而不是在产品生命周期中预先定义需求。这对于用研来说可能成为难以克服的一个障碍，特别是如果设计概念与利益攸关方或决策者领导人一起审查，他们喜欢并认为这是一个“ 可以去做的设计”。这意味着研究的机会很有可能丧失。
...在市场运营团队？
摄影：Carlos Muza 于 Unsplash
优势：
相似的技能组合:市场研究和 UX / 产品的研究在他们特定的核心研究中，共享相似的过程和研究方法。在社会心理学、市场营销学、人类学、人的因素、运作和设计等许多领域进行 “人的研究” 所使用的工具包非常相似：定量方法，如大样本调查和分析；定性方法，如面对面的观察，焦点小组，适度的访谈，日记研究以及其他。每个领域的方法都需要研究设计、用户招募和研究分析。对于市场团队来说，这是一个非常熟悉的世界，作为 用研 流动到这个部门意味着领导者可能会对你的角色需求有一个彻底的了解。
共同的目标是了解用户: 市场团队也将是你的拥护者。无论如何，源自于产品和设计的用户研究的洞察力，为市场部门关注的许多举措增添了直接价值。透过略微不同的角度来看，市场营销和用户体验有着相似的目标(理解客户) 。尽管如此，当团队协作并共享信息，在以业务或用户为中心的举措之间建立平衡时，用研结果还是能够帮助我们进行决策。
劣势：
商业需求可能与用户需求相反:如果组成“聚焦点”的事物变化太大，那么这个”聚焦点“既可以将市场营销与用户体验结合起来，也可以将它们分开。当业务需求与用户需求相矛盾时，可能会产生摩擦。如果市场部门的领导层将眼前的业务优先级置于用户研究之上，那么获取工具和客户的途径就可能受到限制。在一天结束的时候，市场团队关注创收，即使这对用户来说不是最好的体验(比如在某个地方放置广告，可能会干扰网页，以确保用户看到它) ; 而用研团队关注什么是对用户体验最好的(比如在页面上放置一个广告，使其不会干扰用户的任务，冒着用户看不到并参与其中的风险)。
用研 ≠ 市场研究: 有时候，流动到市场部门意味着其他人将 用研视作为市场研究的延伸。由于这一点，一些项目有可能被认为应该由市场专家处理，而不是用户体验专家。例如，营销活动的目标可能是“我们如何让用户使用这次促销活动” ？另一方面，用研 可能会强调用户的需求，比如“用户希望如何获得有关促销活动的通知” ？这种情况（关注点的转移）并不可能经常出现在市场部的议程表上。
...在产品管理团队？
摄影：Marvin Meyer 于 Unsplash
优势：
为产品使用路径图研究分配时间:通过将 用研 嵌入到产品管理团队中，研究有机会通过在产品路径图中划出其应有的空间和时间来充分发挥其潜力。通过让 用研 和产品经理向同一个领导层汇报，这意味着目标和优先级可以被共享，并且在同一时间被一起审查。这可能是一个有效的工作方式，特别是当你与产品经理一起工作的项目，他们知道如何使他们的产品更直观地呈现给用户。用研的产品管理为定义实际产品需求创建了一种更加无缝的方法。这意味着路线规划图中留出了时间，在积压成定局之前走出去，获得用户见解。这告知了大家需要开发的功能的优先级，并在完成设计之前，就形成产品了本身的特性。当 用研 与产品经理的目标紧密相连时，每个注入了用户见解的产品阶段都变得更加容易(因为它应该是在一个理想的世界中!)
更容易地与决策者进行知识交换:将产品经理的内部结构与 用研 的内部结构相结合，也意味着他们可以获得更多用户关于他们的体验的言论，从而形成定期更新，并且可以更容易地进入用户途径。用研经常关注复查定性趋势的反馈(比如 Qualtrics 或者 Medallia 系统)（在线调查或客户体验管理系统），这意味着产品经理听到这些趋势的机会变得更加频繁。产品经理一般来说应该对他们的用户群有深刻的理解，但是他们通常很难在倾听用户的基础上来保持冲刺、业务分析、 KPI 和产品路线图规划。因为团队会议中现在有一个指定的用户代言人一直在场，这就是为什么与 用研 如此紧密地联系在一起对产品经理来说是有益的。参加这些会议使得 用研 有机会直接与那些最需要了解用户需求的人进行自发的对话。加入同一个团队可以使这些沟通渠道更加开放，并且可以更加频繁地了解用户对产品经理的需求。
劣势：
研究的优先级可能会降低:不幸的是，转到产品管理团队意味着有时研究的优先级会降低。当利益相关者对产品交付施加压力时，这通常意味着产品需要尽快推出。然之后，产品经理必须专注于发布他们产品路线图规划上的项目，并在时间表和开发周期内实现业务目标。为了满足这些时间要求，尽快交付某些东西成为更紧迫的目标，而不是交付一个经过研究和磨练的产品(这需要更多的时间)。
更多的评估而不是生产性研究: 把用研流动这个部门可能意味着这项研究变得更加可评估(或者验证、可用性和迭代测试) ，而不是生产性(或者理解需求、价值和概念发现或开发的测试) ，就像在设计团队下可以做的那样。这不是一件坏事，而只是需要牢记在心，以便作为一个用户倡导者，用研 的工作可以更直言不讳地说，需要留出时间来做更深入、生产性的工作，从长远来看而不是短期内为产品提供信息。提前了解这个可能的障碍意味着用研可以更好地装备自己的 ROI（投资回报率）影响，以便为更深入的研究腾出时间。
...在自己独立的部门？
摄影：José Alejandro Cuffia 于 Unsplash
注意: 我还没有在一个独立的，指定的 UX 研究部门作为一个 UX 研究员的工作经验。我只能推测将一个独立的 用研 团队集合起来会是什么样子，或者当 用研 成为一个大型组织中自己的分支时，领导力的优缺点是什么。
优势（推测）：
拥有自己带领的用研部门，可以为更深入地研究需求提供机会。它将有能力根据合作伙伴的规划路线图从而制定自己的规划路线图。它可以让部门领导层能够深入地支持研究人员的需求，因为需求经常遇到障碍（如招聘、用户日程安排、预算、批准、 ResearchOps（ Research Operation service 研究运营管理） 的行政工作等)。能够拥有一个研究路线规划图，并为发现和生成性研究腾出时间，从长远来看，可能会大大有助于产品和客户体验的信息共享。拥有一个独立的团队可以使这些研究成为奢侈品。当一个领导者致力于使研究成功，这意味着他们希望研究可以带来更多战略上的影响。
正如我之前提到的，一些被称为 “ ResearchOps（研究运营管理）” 或者研究操作的东西，是一个趋势短语，类似于 “ designnops①” 或者 “ DevOps②” 等等。抛开时髦不说，设立一个独立的部门和领导层可能意味着在决策层有一个更大的席位，这反过来又意味着在使体验研究产生影响方面有更多的投资。当投入更多资金进行研究时，业务侧就有机会进行战略思考并得到支持。一个独立的 用研 部门反过来将能够雇佣人来支持行政管理，为研究人员能够专注于他们眼前的工作和分析而负责。在小型组织中，甚至在大型组织中的小型 用研 团队中(比如我的团队) ，研究人员往往负责所有的职能，这也是可以的！但是，如果有一个专门关注于这些研究人员需求的部门，并扩大他们工作的影响(不管团队规模有多大) ，我相信将有更大的机会去收集更好、更深入的见解，研究过程也能充分发挥其影响力和潜力。
①Design Systems Ops 是设计团队的一部分，他需要足够了解设计，并且要了解他们试图概念化什么。同时，Design Systems Ops 需要理解工程师的需求和定义方法，这将有助于设计系统的装运和规模化。在某些程度上，一个 Design Systems Ops 是两个世界的翻译。
② DevOps（ Development和Operations的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。它是一种重视“软件开发人员（Dev）”和“IT运维技术人员（Ops）”之间沟通合作的文化、运动或惯例。透过自动化“软件交付”和“架构变更”的流程，来使得构建、测试、发布软件能够更加地快捷、频繁和可靠。
劣势（推测）：
相反，单独作为一个独立的 用研 部门，也可能使得决策层难以接受。如果不流入一个直接产生收入影响的部门内（至少在短期内，比如在销售或营销方面) ，那么 用研 的工作就很难得到认可。利益相关者之间的伙伴关系和一致性，对于用研人员能够成功地完成他们的工作来说至关重要。如果没有它，如果 用研 的需求被认为不是直接以产品为中心，同样的职位可以帮助 用研， 也可能会阻碍他们。开展生产性研究的时间可能被视为“有风险” ，而且当团队的领导层与其他更为成熟的角色(即风险较低的角色)分离时，可能很难获得合作伙伴和利益相关者的支持。
同样，投资一个独立的用研团队总的来说可能是有风险的。可能很难预测到有形的ROI（投资回报率）预测，以便业务合作伙伴能够理解，并在第一时间投入资金。这意味着，决策者们可能认为给用研分配预算或增加人数是有风险的，其他研究需求也是如此。一般来说，R&D（产品研发）在组织中是一个棘手的领域，而 用研 肯定会在这个预算范围内。尽管有证据表明，对研发的投资有能力改变企业经营的底线，并且可以通过创新保持企业价值，所以相对于独立的用研部门，紧迫的商业需求可能话语权更大。
...
作者：三分设
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在设计项目中，甲方通常会表述的需求是「我要做什么？」因为这个需求对于甲方来说，是最迫切和最直接的。但站在设计公司的角度来说，除此之外，还有另外三点甲方容易忽视的内容需要了解，一是「我是谁？」二是「为什么做？」三是「用在哪？」
「我是谁？」包括甲方公司的名称，品牌理念，所属行业，主营业务，主打产品和主要受众等；
「我要做什么？」包括甲方所需设计内容的具体细节，主要是设计类别，种类，数量，尺寸，以及预算和周期等；
「为什么做？」是指甲方通过设计内容想达到什么目的，是进行品牌的宣传，还是获得更多潜在用户信息；
「用在哪？」则是说最终完成的作品以什么途径进行展示，线上还是线下，网页还是包装等。
「明确」意味着，甲方向乙方所提供的需求内容，皆为真实的，准确无误的，有理有据的，不会随意修改的。
以上两点，则为本文提及的「清晰明确的需求」的整体框架和详细内容。在真实案例中，还需要依据具体的情况进行增减和调整，灵活运用。
不过万变不离其宗，牢记「清晰」代表甲方的需求是系统和完整的，「明确」代表甲方对自己提出的需求是清楚和确定的，就能够在实际操作中很好的运用。
在设计项目中，甲乙双方拥有一致的目标，都是为了产出优质的、令甲方满意的作品。但在具体的工作过程中，双方人员有不同的分工和职责。
设计项目中甲乙双方有自己的分工和职责
在整个设计过程中，设计师实际上是在充当“翻译”的角色，需要根据其设计领域的专业知识、经验、和设计技巧，将甲方的需求以视觉语言的形式翻译过来，最终呈现出与甲方企业品牌高度契合，并且能够强化和凸显品牌特色的作品。这些就是设计项目中设计师的工作职责。
好的设计需要甲乙双方共同努力
而完成好的设计作品，是甲乙双方共同努力的结果。并且，最终能否做出有价值的、令甲方满意的设计作品，取决于设计师对甲方需求的理解。而让设计师充分理解甲方需求的一个重要前提，就是甲方已经将自己的需求清晰明确地传达给了设计师。
虽然专业的设计师在做设计之前也会做很多的研究和背景调查，但对甲方各方面情况最为了解的，还是甲方自己。 所以，梳理出清晰明确的需求是甲方在设计项目中的工作职责。我的朋友小张产生了那么多的抱怨，也正是因为没有意识到这一点。
真实的设计项目工作中，常常能听到大家的抱怨，「完成工作不是最困难的，最难的是沟通」。
这种抱怨有时来自甲方，「你理解错了」，「我不是这个意思」，「你这个跟我想的完全不一样」……
有时来自设计师，「为什么要改」，「到底要怎么改」，「到底要改成什么样」……
甲方与设计师的矛盾：都感觉自己在对牛弹琴
可想而知，如果设计方始终在抱怨甲方没说清楚，甲方又始终认为设计方没有理解到位，那或多或少都会影响双方工作人员的情绪，造成工期拖延，最终的作品也很难让甲方感到满意。
所以，为了甲乙双方共同的目标，请甲方人员按照前文对「清晰明确的需求」的解释，尽量将自己的需求梳理完备。
也请乙方珍惜甲方的劳动成果，结合自身的专业知识，好好理解和消化。大家共同努力，去攻克这个千古难题。
需求沟通的目的是达成双方的共识
这一点，几乎是毋庸置疑的。如果甲方在项目工作中对自身需求进行了系统的梳理，并将需求完整无误的列出，那在和设计师沟通时，只需将提前准备好的需求对乙方进行传达，同时也能够更准确和迅速的对设计师的反馈做出判断，从而给到进一步的修改意见。
可以肯定的是，甲方前期的需求准备得越清晰明确，和乙方对接工作时所面临的其他问题就会越少。相应的就能大大提高工作的效率，也有助于更好的完成设计项目的目标，促使甲乙双方达到「双赢」的效果。
先思考 再行动
今天这篇文章的重点在于，「工作中，方法固然重要，但具有工作意识，认清自身工作内容，并明白自身工作的重要性，也同样重要」。
有了正确的工作意识，才能找到问题的关键，那么解决问题的办法自然就有了。 甲方提出清晰明确的需求，设计师才不会越帮越忙！
作者：子博设计
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在日常生活中，说明书、指路牌、做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咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com