「图」对于很多人来说是一个熟悉又陌生的东西，那么到底什么是图？以上图的小游戏为例，为了演示方便，我们抽取其中10个人关于键盘和音乐类型的喜好的信息，如果以键盘和音乐喜好为关系，把这10个人联系起来的话，会得到下方这样能一张关系图。
基于这张图能大致了解这10个人中对于音乐和键盘喜好是什么情况，比如：没有人喜欢流行乐和红轴键盘，甚至可以进行一些简单的推理：喜欢古典乐的人大概率会喜欢黑轴和青轴。
本质上来说，通过前面的小游戏收集到的数据是一张表格数据，当把这些静态的数据以某个维度的信息关联起来，就能构建成一张图，基于这张图我们能进行各种各样的解读和分析。这其实就构成了在我们图这个领域中的 DIKW 模型。把静态的数据，逐步转化成信息，再到分析出有意义的「知识」，在实际的业务场景中，借助算法或者更复杂的分析手段，甚至能从图中分析出价值更高的「智慧」。
随着一张图中的节点数量越多，节点之间能互相产生的关系会指数型的增长，对于这个关系网来说，它能产生的经济效益也是指数型的增长，在经济学领域把这一效应称之为「梅特卡夫效应」。其实在日常生活中，最常见的图，就是一张由人际关系构成的社交关系网络，我们每天都在用的各种社交平台都符合这一效应。
在实际的 B 端业务场景中，图在图数据库、网络安全、企业风控、知识图谱等场景下有非常广泛的应用。
分享一个在知识图谱这个业务场景下的真实故事，某天 PD 发过来如上图的钉钉消息，希望帮他设计一个图的需求，然后隔一段时间发来不同的希望在图上面表达的语义诉求。随着要表达的信息越来越多，后面再去设计图的样式时，就陷入了不知道该怎么办的境地…
在可视化设计中，常见的视觉通道就那么几种：形状、方向、纹理、尺寸、值、颜色，随着产品功能的拓展，需要在图上表达的信息维度越来越多，且根本没有停下来的趋势。这时我们会面临图这类产品设计时的第一个挑战：视觉通道有限，无法满足日益增长的语义表达的需求。
下图左侧是一张交付给前端同学的设计稿，基本上满足 PD 提到的各类语义表达的诉求。然而实际验收的时候，带进实际数据的时候效果是右图这样的。这是面临的第二个挑战，在设计一张图的时候，设计师往往是按照非常理想的情况去设计的，但当实际的数据灌入进去，再加上还原度的问题，布局的问题，会导致实际一张图渲染出来的效果是非常「惊人」的，可读性几乎为0。
下图的 GIF 是最基础的一种图分析的操作：从一个节点出发，逐步的选择感兴趣的节点展开，以随着关系的逐步扩散发掘出更多有价值的信息。GIF 中所看到的从起始的蓝色节点扩散到青色节点，再到红色、绿色节点，这样逐步扩展，分层展示，是一个设计师的理想情况。但实际的情况往往是下图这样的，每次扩展开的节点都会在原来的基础上覆盖，连续扩散几次之后，节点和边密密麻麻的重叠在一起。连续分析的情况下，效果再一次超出我们的预期。
回顾一下为何会出现上面的几个问题：在面对图这样一个陌生的设计对象时，在对其有更深入的了解之前，我们往往只能看到表面的静态的视觉的设计，单点的交互设计，看不到也没法控制的是藏在图这座冰山之下的数据量、布局效果、加载速度和用户连续分析的路径。
为了解决上面提到的几个挑战，以及便于更多设计师更快速的上手图产品的设计，避免一些我们此前踩过的坑，同时为了规范图产品的设计，我们基于在不同业务线的图产品的实践和思考，产出了「AntV 图可视分析设计指引」。
更好的阅读体验，推荐访问语雀版
设计指引从全局样式（Global Style）、交互规范（Guide）、组件（Conponents）、功能模板（Templates）、综合案例（Examples）几个视角出发组织相关的内容。由于大部分设计师对「图」是不太了解的，所以增加了一篇「总则」来介绍「图」是什么，在做相关产品的设计时，面临的设计对象是什么，以及几条最通用的设计指引内容。同时也提供了 Sketch 组件库模板资产，内置了优雅好看的图的样式和常用图的模板。
回顾前面提到的知识图谱里的这个图设计的需求，我们踩过那么多坑之后，再回头去看，该如何设计这一一张图呢？其实把上面这张 DEMO 图拆解来看，再复杂的图，本质上无外乎就是「两点一线」，以及在节点和边上的文字标签。
再抽象一层看，会发现组成图的最基础的元素有：点、边、箭头、标签、布局这么5种元素。以其中的点为例，再去拆解看一下，设计这个图里面最基础的元素的时候，适用于表达点的视觉样式的有大小、颜色、描边、形状、图标、角标 这么几个视觉参数。其中，「描边」还能细分为单层描边或多层描边，「图标」还能区分为线型还是面型，各自再对应不同的视觉参数。
有了最适合点的视觉通道和对应的参数之后，回顾一下我们此前需求中我们需要在节点上表达的各类语义，可以归纳3大类：
数据特性：数据中固有的一些特性，比如类型、规模、权限等，这些特性不会随着呈现的平台的不同而变化，而是属于数据本身的一些特性；
功能属性：在具体的产品中，随着产品功能的不断丰富，赋予给节点的属性，比如一个产品有了预测或推理的能力，就需要在图中表达出节点是否是「预测的」或者是「疑似」的；
鼠标状态：鼠标 Hover 、Focus、Disable 等常见鼠标交互事件
这3类语义，共同决定了一个节点应该表达什么维度的信息，样式应该是什么样子的。这时再去设计一个节点的样式时，其实就是一个把语义类型和适用的视觉通道和参数连线的过程。无论需要表达的语义如何新增，节点样式的表达都有一定的内在逻辑可循。
图的基础元素中，除了点之外，其他的基础元素也按照类似的思路梳理出需要表达的语义和使用的视觉通道，这样我们就完整的，成体系地归纳出了所有影响一张图「长什么样」的基础元素、视觉通道和参数。有了这样一张「参数表」，再去设计一张图时，就明确的知道有哪些要素可以考虑。
当然，能做的不止于此。结合我们前端同学的能力，我们把上述「参数表」工程化了，做成了一个在线工具 — GraphMaker 。在这个工具里可以根据实际的数据量，调整节点、边、布局的所有视觉通道参数，以调整到一个合适的视觉效果。最终导出成代码，用到实际的项目中。及时完全不懂图，也能在这个工具上，调试出理想的视觉效果，再将对应的代码导出给到开发同学使用。
在图产品中，常见的操作对象有：画布、节点、边、Combo 和其他这五种类型。为了捋清楚图产品中常见的交互事件，以交互事件三要素的形式，将所有的交互事件全部梳理和枚举出来，并以操作对象为分类维度，归纳整理出一份完整的「交互时事件库」，提供给设计师使用。
前面介绍了「交互事件」，很多时候，一个复杂的交互事件需要有一个独立的组件来承载。比如：关联节点的搜索查询、代码输入框、算法模板选择器等都有一个共性：都是属于「输入某中查询条件」的组件，这类组件则统一归纳为「条件输入组件」，主要由「条件输入」和「确认执行」两部分内容组成。相同的逻辑，我们将各类业务场景下常见的组件归纳为基础组件、条件输入、信息输出、高级功能四种类型。定义好每种类型组件的基本特性，确保产品在不断迭代新增新功能的过程中，新增的功能组件都能保持基本一致的体验。
以最常见的一个「算法模板」查询的场景为例，在左侧的条件输入面板选择一个合适的算法模板，画布上会渲染出对应的结果内容，然后用户会选择其中感兴趣的节点查看详情。这三个组件共同组成了一个完成的图分析操作，这类有固定条件输入的分析模式被定义为「有明确目的分析」。图分析产品中，常见的分析模式有3类：
有明确目的：这类分析模式是有明确的分析或查询条件，这个条件的呈现形式可能是一个规则表达式，一段 Gremlin 或 GQL 的查询语句，或明确的起点和终点，甚至是直接查看某个节点或某条边的具体信息。常见的模式有：规则查询、Gremlin 查询、关联分析、筛选/搜索画布、查看详情等；
无明确目的：无明确目的地探索是指基于已有数据内容，进行关系的 N 度扩展、下钻分析、子图探索、撤销回退等操作，来挖掘数据中的特性，发现价值或机会点的分析过程；
特殊场景：
内置了 AI 算法能力的分析场景：这类分析场景通常需要借助内置的算法或规则推理能力来实现，从海量数据中快捷的挖掘出符合特定规则的目标节点和关系，常见的有：担保圈、实控人、最短路径等；
结合时间或地理信息的分析场景：在源数据中含有时间和地理维度的内容时，会出现结合时间或地理信息的分析场景。
回顾一下前面介绍的内容，从「全局样式」到「分析模板」其实都是在做同一件事情：在面对一个「图」这样一个陌生的设计对象时，梳理其内在的逻辑，并在这个陌生的领域，定义清楚其运行和存在的逻辑。从最原子级的样式和交互、组件再到一个完整的分析模式，从不同维度去定义图产品的「规则」，以确保不论多复杂的场景，图分析产品的体验是可控且有序的。类似于积木一样，有了统一的接口规范，无论积木的形状如何变化，都能完美的拼装出玩家想要的形状。
从 ETCGG 的角度出发，介绍了「AntV 图可视分析解决方案」设计相关的内容，解决方案还有非常重要一部分的内容就是「技术方案」，稍后会由我的搭档 @山果 给大家带来更详细的介绍内容。
在整个分享中，我们介绍了图分析产品的4个不同的业务应用领域、3种图分析模式，定义出了4种图分析产品的组件类型，同时以交互事件3要素的形式梳理出所有的图交互事件，以及找到了所有影响「图」样式的基础元素和参数。理想情况下，有了这些信息之后，我们再去设计一个图分析产品时，可能就是一个从左到右的连线过程。为此我们也正在努力将这一理念转化为现实，开源工具 Graphin 2.0 正在设计&开发中，也尽情期待。
「系统看上去混乱无序，但在其背后却隐藏着一种非常微妙的秩序」 - 诺贝尔奖得主、物理学家 Murray Gell-Mann 曾经说过这样一句话来描述自然界中那些看上去混乱无序，实则内含秩序的系统现象。这句话用来描述「图」这类产品也非常贴切，当前图分析产品处于发展期，相关的设计领域更是一片不毛之地。AntV 图方向的同学们此前的一些探索，以及沉淀下来的「设计指引」和「解决方案」就是在图这类产品的混乱和无序的复杂中，找到其内在的秩序。
图可视分析领域是一个小众而又专业度很高的领域，希望以上的分享的实践和思考能给在这个领域相关的同学一些启发。目前设计在这一领域刚刚开始迈出一小步，还有巨大的未知和机会等着我们去探索，欢迎通过各种渠道随时交流。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户体验地图与服务蓝图常常会一起出现。因为，用户体验地图更聚焦于用户在前台端到端的体验，而服务蓝图更聚焦于由表面到核心后台业务及如何交付和幕后的操作，并且能与用户体验强关联起来。
服务蓝图是以公司角度展示的可视化界面工具。在每个阶段为用户提供的服务，且在服务过程中会涉及到的不同人员和不同的条件。并且在公司内，所有的人员都可以客观的理解并使用（所需各方的服务和支持）。
服务蓝图直观上同时从 4 个主要方面展示：
用户行为
用户在所有阶段中的体验节点。这里需要注意的是：一定要清晰的罗列出，用户在什么触点下做的什么行为。这样才能更好的进行技术（方案）评估及更好的服务用户。
前台
前台是围绕着与用户产生交互行为关系所展开的具体内容，内容可包含员工、数字设备、技术方案，也就是用户能看见的服务和能接触到的服务。
后台
后台是给前台提供技术方案支持的存在。
支持
支持过程包含内部人员和外部人员履行的服务步骤和互动行为。
优化产品/业务主要从 4 个关键点出发：
1. 找出服务流程的崩溃点或断点
对于线下智能服务，我们应该遵守一个基本原则：在一个完整的流程中，不应该出现「用户不知道要做什么和需要未知等待的事情」。
怎么找到崩溃点和断点？
主要从「田野调查」和「深度访谈」获得。可根据实际的项目展开定性研究。
2. 新服务、新体验该怎么执行
在更新体验流程的时候，一定要基于全新的角度出发。把自己想象成：我是一名刁钻的用户，你需要喂我吃饭的境界，最好还要帮我把饭粒粒分离。
还是以无人零售商店举例：前期准备节点
如（新服务）：在购物流程说明的物料中，把关键字圈出并划重点，在前期推广的时候安排店员进行随时讲解。
如（新体验）：把之前的定制便宜的物料，换成高逼格的、贴纸换成超大号的。
该怎么执行：根据蓝图规划设计“高峰值”的体验点，对购物流程说明的物料进行资源倾斜。
3. 衡量服务过程的每一步是否达标
衡量的标准：数据角度出发/用户购物速度/体验流程的衔接度等等
如（漏斗数据）：开业前期宣传来了 100 人，100 人阅读了购物流程，留下了多少人，在留下人中，多少人是在 10 秒内完成阅读进店体验（X 人….X 秒/分钟…）
4. 定义服务的“高峰值”
在不同的阶段设计用户的心理峰值曲线。
峰值和终值，是由 2002 诺贝尔奖得主、心理学家丹尼尔·卡尼曼提出的。他发现大家对体验的记忆由两个核心因素决定: 第一个是体验最高峰的时候，无论是正向的最高峰还是负向的最高峰，一定是能记得住的。第二个是结束时的感觉。这就是峰终定律（Peak-End Rule）
举个栗子：宜家购物
宜家会在每个阶段给与用户不同的情感体验（我特别喜欢那个冰淇淋，如果你也是的话文章末尾点个赞呗）。
那么如何在蓝图上体现增值的点？主要从以下 4 个方面：
1. 时间：服务质量再高也会随着时间的消耗而消耗。
服务蓝图中的一步可能需要 5 秒，也可能需要 5 分钟，所以在顶部增加的时间能帮助大家更好的理解这个服务。
2. 衡量标准：服务的成功或价值需要一些体验因素来衡量。
这些因素是用户在心里判断服务是成功还是失败的关键时刻。比如，等待时间。
3. 情绪表达：对某些服务来说，理解用户的情绪状态是非常必要的。
比如，用户注册时，突然手机断网了也需要纳入考量因素。
注释说明：在内部讨论时，将说明的重点用 icon 的形式标记出来
#完整的服务蓝图
企业的资源是有限的，你不可能在所有点都达到用户的预期或者给用户全程的超高体验 。所以，需要做的是，在服务蓝图上配置资源来制造用户体验，使用户拥有一个美好的峰值和令人回味的终值，并且全程不突破用户的底线。
服务蓝图的结构要素，实际上定义了服务传递系统的整体规划，包括服务的设置、服务能力的规划。服务蓝图不是一个人的事情，在服务环节中的每个人都必须把“用户满意”作为自己的服务标准。服务蓝图提供了一个全局观点。服务蓝图也可以平衡业务需求和用户需求。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：七月Xavier
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这篇文章很好，提供了一种“以用户为中心”把自己和项目组成员随时假定为一个用户的身份，去思考，提出一系列问题，把这些问题编号，去一一解决，注重用户体验，以此为基本框架，严格遵守，一旦设立不增加临时的多余的功能，不把没有用户故事的界面元素放在界面上，保证了精简的内容围绕确立的框架中，井井有条。这篇文章值得看十遍。
随着大数据的兴起，数据价值的不断挖掘，图表作为数据呈现与分析的有效手段，正扮演着越来越重要的角色。我们在进行B端平台设计时也在思考：如何让图表清晰的传达信息，同时带来美观的视觉感受。
为了达到清晰传达和视觉美观的目标，我们结合实际项目，进行大量探索及思考，梳理总结了一套适用于B端后台类产品的图表设计思路及方法，涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。
图表视觉层级
图表能够承载大量数据信息，同时视觉元素较多，如果只是凭借设计师的审美喜好进行视觉设计，没有整体信息读取考量，可能会导致重要信息未能凸显，降低用户读取效率。
为清晰传达信息，进一步提升读取效率，我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度，将图表元素分为三类，分别为“底层元素”、“中层元素”和“顶层元素”，并依据不同视觉强度分别设计三类元素。底层元素最弱，顶层元素最强。通过这种方法，梳理图表元素的前后关系，能够清晰把握元素视觉层次，保证信息传递效率。
| 底层元素设计
在各类图表中，我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰，最大程度突出主图形，底层元素全部使用浅灰色进行设计。我们发现，当元素与背景颜色的明度对比在1.2:1时，人眼较难看到元素；当对比度在2.0:1时，视觉强度过强，易吸引用户注意力。通过元素视觉强度的调研及视觉尝试，最终确定元素与背景对比度在1.6:1左右，视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀，只在需要查看时可以被发现。
| 中层元素设计
中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素，是图表中表达数据的关键元素。与底层元素相比，中层元素采用更低明度与更高饱和度的数据色来表现，使元素从页面中凸显出来，保证可读性。同时在样式上适当加入渐变、描边等样式，丰富视觉层次，带来美观的视觉感受。
| 顶层元素设计
我们把顶层元素定义为图表高亮信息，内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出，使用深灰色、强调色等强对比度样式，并辅以动画、投影等手法保证明显的视觉强调效果，保证顶层信息最有效的传达给用户。
| 最终效果
通过层级梳理，并绑定元素重要程度和视觉强度的方法，设计后图表主次信息均按重要程度进行对应视觉强度的展示，让用户能够在第一时间接收到最重要的信息，提升信息读取效率。
图表排版设计
图表排版是指各元素在图表中的尺寸及布局等，对于B端后台类产品来说，不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验？我们经过大量讨论推敲，梳理出一套针对B端后台类产品的排版规则，力求保证用户图表的使用体验。
| 图表尺寸
图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大，例如巨量数据的图表挤在名片大小的区域例显示，这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景，并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸，针对不同尺寸优化图表的信息展示密度，以达到高效读取信息的目的。
“迷你图”尺寸最小，舍弃了Y轴等不必要信息，利用小面积展示最关键的图表信息，并控制数据密度，保证信息高效读取。
“中号图表”尺寸受限，限制坐标轴刻度数量和数据的密度，例如曲线图数据点不高于每4像素1个数据点，Y轴坐标刻度不超过5个，以确保信息密度不过载，这类图表尺寸通常用在针对某大类内容进行多方面检视时。
“大号图表”尺寸最大，不限制数据信息密度，给予最全最详细的展示，这类尺寸通常用在数据详情页等详细分析场景中。
最后考虑到多图表混合排列时，饼图、地图等大面积填色图表，相较折线图等描边型图表，视觉感受更加膨胀。我们缩小了填色类图表的实际高度，保证多种图表混合排列时，视觉感受的均衡。
| 坐标轴
坐标轴在图表中出现的频率较高，那么坐标轴常见的设计问题有哪些呢？
第一是横纵坐标轴的刻度出现过密情况。
如果坐标轴所承载的是连续数据（连续数据指可量化的，连续不断的，在区间内可任意取值的数据，如时间、金额、人数等），设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据（离散数据指不可量化的，无关联的，不可在区间内任意取值的数据，如分类、软件版本、省份等），可采取增加坐标轴缩放功能以解决.
第二个常见问题是刻度的说明文字过长。
如果是X轴（横轴）文字过长，除了在可控范围内减少刻度，还可采取文字倾斜45°~90°的办法(如文字全部为中文，可用竖排代替倾斜90°)，缓解信息过密看不清的情况。
如果是Y轴（纵轴）文字过长，需联合研发一起调整数据的单位，比如把“元”调整为“百万元”。
如果不能调整，那就要根据所使用的图表库有针对性调整。例如常用的Echarts图表、D3图表等开源图表库，需要提前预估刻度文字长度并预留出来，否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是AntV等可自适应的图表库，则不必提前处理，图表库会自动按刻度长度进行整体调整。
| 图例
图例作为图表中不可或缺的部分，在各类图表库中位置不尽相同，由于不同图表样式差异很大，图例的位置需整体考虑并适当布局摆放，但在同一产品或页面内，过于随意的摆放图例，会导致页面统一性较差，同时增加用户的浏览成本。我们团队所负责的B端商业产品矩阵，作为面向用户的产品集合，产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题，我们基于业务特点，针对B端商业产品矩阵制定了图例布局指导原则。
我们以提升屏幕信息密度为目标，分析不同场景的页面排布，制定了顶部和右侧两种较为宽松的指导原则，供设计师在没有明确的更优方案时选用。
当图表是左右两端对齐的类型，例如折线图、柱状图时，建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布，减少占用空间。当图表本身左右都有空余空间时，例如饼图，建议将图例放置于图表的右侧。也能够节省页面的空间。
数据色板设计
色板作为常见的数据表达手段，能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试，梳理总结出图表色彩的两个关键维度：辨识度与统一性。既需要颜色间突出强烈可清晰辨别，又需要颜色整体能形成统一风格，以达到清晰传递和美观的目标。如何平衡辨识度与统一性，是我们遇到的难题。
| 辨识度
辨识度在图表中有两方面：颜色与页面底色的辨识度，各颜色之间的辨识度。对于第一种，我们采用控制颜色的明亮程度来确保色彩辨识度，尤其对于黄色、青色等本身较亮的颜色，降低颜色的明度，确保在浅色背景下颜色可辨识。
对于第二种也就是各颜色之间的辨识度，通过实验发现单纯的颜色色相变化，例如红色与橙色的区分，人眼不容易分辨。所以采用了色相变化+明度变化的方法，既深红色与亮橙色，深蓝色与亮紫色等，这样用户能在第一眼就明确分辨，保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中，运用欧几里得距离公式测算颜色间的距离长短，来衡量各颜色间色差数值。颜色间距离越远代表色差越大，利用数据辅助衡量辨识效果。
| 统一性
色彩统一性的作用在于确保图表整体风格一致，色彩搭配舒适，从而带来美观、统一的视觉感受。为达目的，我们首先提炼商业产品设计风格为明亮、强对比，其次把设计风格转化为色彩数值。经过实验，把颜色明度限制在50%-70%，把饱和度限制在75%-85%，并在区间内不断波动。这样既保证了色彩视觉感受的统一，各颜色间又能够有清晰的辨识度。
| 颜色量化与工具
量化颜色，将色彩转化为数值，利用数值来验证设计师的「感觉」，能够保证方案合理性，保证设计质量。但通过尝试，我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料，我们最终决定以小众的HCL色彩模式来衡量色彩。其中H表示色相、C表示饱和度、L表示明度。HCL区别于传统的RGB或HSB模式，它能够将人眼对颜色的感知精确的量化为数值，例如黄色相比蓝色明度更高，都能如实的反馈到数值上。也由于此特性，HCL模式在诞生距今不到20年间，已被一些先锋设计师用于数据可视化的呈现中。
但是HCL作为小众色彩模式，目前设计软件鲜有支持，造成了HCL色彩不直观、不方便调色等的问题。为解决此问题，我们已初步完成智能配色程序，只需输入品牌色，就能自动生成图表色版，并在风格上与品牌色匹配，达到整体色彩的统一。我们也将一套调配好的色板及HCL实用小工具附在文末，帮助大家直观的查看和使用HCL模式颜色。
结语
数据价值就像不为人知的宝藏，隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙，是发掘数据价值的强有力武器。通过对图表的不断探索优化，我们希望能够最大化数据的价值。通过图表，让数据最直观的展现；通过图表，让其背后的规律浮出水面被人探知；通过图表，让B端不再有难懂的数据。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：百度MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
很久以前我写过一篇讲「用户体验」的文章，文中提到电影的观影体验是可以通过灯光、镜头、脚本、台词、道具、特效等等手段去塑造出来的。比如，《教父》中对灯光塑造角色形象的首次运用，营造出阴暗、冷酷、深不可测的角色形象，帮助观众去建立更立体的角色印象。
所以许多学习电影的同学会去分析电影里的某个镜头或某个片段的细节，聊这个镜头的拍摄用了什么样的手法，演员的表演传递出了一种什么样的信息，以值得我们去学习。于是许多学电影的新人就会以为，学好这些东西，就能拍出一部好电影。
但是作为一名导演，如果只关注这些细节去学习所谓的理论知识，而不知道这部电影背后的宗旨，支撑起整个故事脉络的重要信息，众多人物角色的复杂情感关系，以及剧本背景所表达的时代现象等等，那么就不可能在自己的电影里代入那些细节理论。甚至连如何推进到这样的场景都做不到，试问又怎么可能去聊某个镜头下的细节呢？
这叫缺乏上下文联系，也是任何行业的从业人员在学习该行业所需要具备的理论知识时，都会忽略掉的重要条件。
说一个真实故事。设计师 Teisanu Tudor 前阵子在 Instagram 上做了个实验。他扮演成一位资深 UX，每天通过网上找来的几张图片组成各种设计案例、教程、原则等帖子，分享在上面。受欢迎程度远超他的预期，而其中热度最高的帖子，是案例改版对比图，以及两个方案比较图，再加几句简单的总结。比如：
通过这样的说法，难道就能认为现在所有 App 或网页上的 banner 设计都是错误的？当然不能这么随意下定论。
许多人都以为通过这种简单的几个步骤就可以学会设计，且认为这个学习过程是有趣且轻松，可以速成的。
Teisanu Tudor 说：这种速成贴如此火爆，不免让人有些担忧。这些帖子里的案例几乎都是脱离改版目标的上下文背景去探讨体验的，可许多人都忘了目标才能决定设计改版后的效果，而不是单独看起来如何。
或者这类：
A 与 B，真的是 B 更好么？在不同设备与不同用户的条件下，仅仅通过视觉理论得出这样的结论，未免也过于仓促。
我们都知道，一个设计方案不可能适用于所有场景，设计师的主要能力之一就是在具体限制条件下，平衡好不同利益相关者，以及多个变量，产出合理方案。而类似这种帖子的火爆似乎在传递出一种信息，就是设计是不需要具体问题具体分析的，甚至通过这种细节的通用解法就能解决绝大多数设计问题。这就属于误人子弟了。
我经常会在一些地方看到有人在整理某个页面当中的设计细节，然后有模有样总结一遍，试图将其当做产品设计的某种理论或准则。比如截一张某款产品中的界面，说它的按钮摆放有问题，会导致用户如何如何，而依据就是之前得出的设计准则。其中最有趣的一次是，有个人拿着一款产品的设计方案去吐槽另一个产品的方案，说没对上…
在前面两篇理论文章里，我反复说过理论知识的重要性，它可以帮助我们产出设计方案。但是有一个点是没有被提及的，就是「理论知识的连接性」。
许多人会把自己看到或学到的东西看作是一个独立的知识模块，且希望在工作时能运用上，然而却事与愿违。于是渐渐排斥理论，觉得理论无用，形成一种认知，就是理论无用论。再也不去读书，不去学习理论知识，以至于在知识体系层面停滞不前，无法说明白自己产出的方案，只能说感觉：我感觉可以。
这些人再也不会去思考自己为什么做这个需求，以及这个需求的利益相关者是谁，用户的目标，企业的目标，甚至是这次需求的指标，而只是看界面从某个原则上来说是否合理……而这所谓的原则，只是一些无关紧要的东西，却被人当做设计圣经。
这就是理论知识逐渐被人轻视的原因，许多人本末倒置，再也回不到正确的那条路上。
比如，前阵子有位读者问我：呆总，你看 QQ 这里把一些未开通的特权放出来，吸引用户去开通，但是绝大多数直播产品的勋章体系也挺丰富的，却很少看见会这么做的，是为什么呢？
类似这样的问题，在缺乏业务背景，商业目的，需求指标等前提下，是不可能得出一个绝对结论去证明其他产品为什么不这么做的。这是现在大多数人面临的问题，但却不自知。
就像我这个系列文章里说的一样，理论知识当然重要，但是破碎的理论，是有反作用的，所以需要串联，从全局角度出发，再深挖到细节。而不是只聊大方向，或只聊细节。
举个例子。当我们拿到一个需求，说要从 0-1 做一个长视频产品的弹幕体系。可能很多人就会无从下手，第一直觉想的是去找所谓的竞品抄一下。可能还会像上面那种对比图一样，把几个产品的弹幕界面截图下来比较下，试图从界面元素角度判断哪个设计得更合理。但是会发现，即使是抄，也会抄不到位，甚至会被老板质疑这个方案的合理性。而你能反驳的只是：别人也是这么做的。
而关于不同用户发布弹幕的权限，比如次数、时间限制、字符差异等重要信息，就被忽视掉了。包括各种违规弹幕，以及如何判断违规的弹幕，甚至是弹幕在屏幕上出现的密度、形式、速度等信息可能都无法考虑到。这就是现在许多设计师存在的问题 —— 过分专注界面元素，忽视其背后的信息。
虽然我在之前一篇文章里提到，注重细节的重要性，但是理论知识，从来都不是相互独立的，尤其是与项目相关的，更不可能从某个单点出发得出全面的设计方案理论。
如果你是刚入行的设计师，这么做无可厚非，就像学习电影的学生一样，它确实是学习理论的一种途径，只不过缺乏连接。但如果你已经入行一些日子，觉得自己进步缓慢，甚至感到迷茫，且读完我写的文章也意识到了这个问题，那你就要开始反思，自己对于理论知识的学习是否有主动去将它们串联起来。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：呆呆U理
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
人的时间精力都是有限的，建立良好的信息架构和层级，能让用户在有限的时间里快速获取和理解有用的信息，并进行下一步操作。
一张图上有四句话，读者根据 字号 判断先读哪一句。在从测试和调研中收集来的用户需求和期望的基础上，首先明确内容和交互的优先级，确认信息的先后顺序和关联性后，才能够设计出有重点的交互界面。这些行为是为了引导用户在阅读过程中 一眼获取重要信息。
用视觉语言来说，上面的例子只是通过调整 文案的尺寸 去探索如何设计页面层级。同时，通过调整其他平面设计元素例如 字重、颜色、透明度 等等也可以达成同样的效果。当然，这种行为同时适用于 按钮、菜单栏、表单 等其他控件。
通过距离划分视觉元素展示它们之间联系的基础前提是 格式塔心理学 组织原则，这是在构建数字界面时所考虑的设计系统的基础指导理论。因为用户一般通过 视觉元素的位置 来判断阅读顺序，设计视觉元素和控件的位置是为了促使用户完成任务，同时在某些情况下，也会引导用户去做他们所期望的事。在很多情况下，用户会自己选择想看的信息。
“在网络上，人们会一目十行而不是逐字逐句的阅读内容。他们一般倾向于付出更少的精力，以高效的方式达成目标。”
这意味着在一个拥有很多功能的页面上，用户会一目十行的迅速寻找他们的目标，因此 大部分的视觉信息会被屏蔽。
用户在网络上的阅读方式高度取决于：
用户的任务目标
用户习惯
页面层级
页面内容形式
这就非常明显了：最后两个因素是设计师可以控制的，并且考虑到网络设计越来越先进，运用知识和技术推动用户行为，而不是使电子产品成为用户的阻碍。基于这个原因，我提出一个设计原则。
有一些人说如果需要在图标旁边放一个文字说明，图标就没有存在意义了，因为它的认知优先级被降低了，成为了识别序列里的一个负担。因为图标视觉系统是建立在 逻辑原则 上的（和文字表达的意思相同），所以无论是对于有没有相关交互经验的用户而言，图标被认为是可以帮助用户迅速理解功能的。
一个只有文字说明的软件菜单和同时拥有图标和文字的菜单相比，图标可以帮助用户更快的理解。在上图中，根据用户所期望的功能，可以看到菜单中的图标带有要访问页面的标题名。接下来，当用户习惯图标后，图标将会更加简单的引导用户快速的在界面中寻找到所需要的内容。
当设计一个新界面时设计师需要知道，页面必定会被有不同阅读习惯的人使用。为了促进理解，我会把用户分成三种人并且定义为：新手用户、中间用户、专家用户。
新手用户 — 就像你所想象的那样，这是一个 第一次接触 这个界面的用户。如果这个界面是某个系统中的一部分，那意味着始终有某些功能点是他第一次接触到的。这个趋势是说，这个等级的用户 理解页面的速度会低于用户理解页面的平均值，并且花费更多的时间去理解语句直到找到所需的内容为止。
中间用户 — 比新手用户多一些数字产品的使用经验，但并不是一个界面使用专家，理解界面的时间大概是处于平均值左右。
专家用户 — 他们已经使用这个平台很多次了，所以可以较快的阅读，而且并不需要通过阅读所有的内容去理解界面，可以 快速识别元素、布局和交互的视觉呈现。也许正因为这些原因，很多用户 对产品界面的突然改变抱有抵触心理。
现在，想想看如果一个投资 APP 每周通过 Email 将以下这个界面发送给用户。用户会不会阅读上面所有的内容呢？每次打开都会阅读吗？或者只是阅读对他比较重要的内容？
这个来自金融 APP 的卡片信息展示了用户的收入。看看这个例子，你的阅读顺序是怎么样的？我可以通过元素的摆放位置、比重、尺寸大小…所形成的视觉层级逻辑来理解它。由于缺乏明确的层级关系，有一些内容无法被精准获知，必须在事后实际运营的过程中调试，通过用户使用数据反馈来决定内容的优先级和必要性，并进行修改（使用 Hotjar，Crazy Egg 之类的热点地图可以收集数据）。
请注意在这些内容中：唯一的 动态信息 就是整个【 3 】模块中的重要信息【 4 】中的内容。所有的邮件页面中位于【 1 】的内容都是一样的。【 2 】中的信息是不变的，并且重复出现在每一封这类型的邮件中，它们都是其认知标识的一部分。
第一次看到的用户需要理解这是关于什么内容的信息，所以信息全面是非常重要的，但是 并不需要把所有信息都放在突出的位置上。考虑到这点，通过 减少色彩饱和度、改变字号大小 等降低视觉重量的方式，是不打断用户阅读过程的选择。
一张展示了用户收入的来自金融 APP 的 Email 卡片，它应用合理排版促进用户更好的理解信息。
在上面这张卡片里，简单的改变了内容排布，突出了最重要的内容。他们展示了 层级关系 对用户体验的影响。一味格式化的信息传递被更具个性化、同理心的方法所取代。头部和底部信息与主体信息相合并，通过这种隔离降低了被突出的可能性。最后，将主按钮更改为次级按钮（具体情况要根据点击率来决定，主按钮可能是最好的方式，有背景色的主按钮更能激起用户点击欲望）
在商业软件环境中，确切的说是在大量的表格中，更多见的是列表标题比每一行的内容更加突出。因为标题是固定信息，而且用户可能每天都会看到，而不是将重要等级修改为 主要和可变内容（列表内的内容信息）。
认识到设计界面时成本和实现功能之间的复杂性，遵循这一思路可以帮助设计师确定元素优先级，并且创建层级关系以提升用户的使用体验。同时，因为引导对新用户来说是必须的，所以在设计产品的时候，重要功能需要结合良好的入门教程、功能提示和及时反馈。这样便建立了可以提升用户日活及留存的高效、友好的用户体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：ZZiUP
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
唐·诺曼提出了情感化设计的3个方向：本能层、行为层、反思层。但如何在一个项目中，通过情感化设计，让用户切实感受到这样的情绪，一直没有很系统的理论。恰逢58同城交友业务中有这样的项目，可以实践一下这方面的思考。本次活动中，嘉宾分享了直播礼物的价值与意义、直播情境情绪，并以此为基础，探讨了理性化搭建情感化礼物的设计体系。
礼物的价值是什么？有什么意义，为什么不直接用钱？礼物和金钱的不等价感受，决定了礼物是很好的消费载体；不同场景需要不同载体，礼物的多样性满足了不同场景的需求；直接送钱可能会让用户不爽。
礼物要匹配情境情绪出现，送钱也不太合适，而当前平台已存在30多款礼物，但是用户的使用次数较少，期望通过本次项目更新直播间的礼物，并提升ROI。因此需要重新探索直播间会出现的情境情绪，并设计与之匹配的礼物。
这款产品面向下沉市场、25~40岁、单身/离异的用户群体。
设计情感化礼物的灵感来自于彼得·MA·德斯梅特的理论模式。
情感产生的过程：用户对产品的关注点和产品所呈现的信息相结合会引发用户对产品的评估，而评估的结果会最终决定用户对产品的情感是什么样子的。由于个体的动机、价值观、态度的不同，情感产生的差异是不可控的，导致设计师在设计的时候处于一个相对被动的位置。因此期望可以为设计师提供一些方向性的指引，帮助他们更好地完成产品的设计。因此通过模型推导，了解用户对产品的情感和关注点，从而推导出产品应该呈现什么样的信息，从而帮助设计师做出更好的设计。
2.1 规划思路：
2.2 实施步骤：
基于上述结论，给到设计师合理的方向性指引，快速上线了一部分礼物。在产品逐渐趋于成熟之后，需要对最初建立的情感指标进行核准，了解真正用户在使用过程中对产品的情感诉求和关注点，进一步调整情感。
通过1V1电话访谈，对11名真实用户进行了深访。
在阶段二中，主要探讨了以下四点：
结合上述分析，提炼出了情感诉求和产品关注点两个层面的信息。情感诉求层面，通过送礼场景和送礼动机的分析，将原来的5个情感指标重新定义为3个情感指标：自豪、爱慕、情欲。这3个情感指标将成为后续建立礼物库的基础。
产品关注点层面，从功能、体验层面为设计师提供了方向性的引导。
用研通过上述一系列的研究和分析，仅仅可以给设计师一些方向性的引导，设计师在设计层面需要进一步结合分析结论进行拆解和设计。
情绪与意象具有一定的关联性，它可能是生活习得的。例如：秋雨、孤独的老人、掩面哭泣等都可以表达悲伤；又或者是被竞品教育的，例如：火箭、跑车等，用于表达自豪，均是来自竞品的教育。
我们可以从情绪诞生的场景来剥离构成意象的维度：
基于上述维度及元素，设计、产品、运营团队内收集意象，主要方式包括以下两类：
另一方面，也要收集竞品的意象，同时需要将前面头脑风暴产生的意象以及竞品的意象进行形象类型、礼物形态、价格定位的分析和提取。
以此为基础，可以构建情绪意象库。某一种形象，在不同的场景和不同的关系下，可以表达不同的情绪。例如同样是烟花，小仙女棒式的烟花和宏伟的漫天绽放的烟花所表达的情绪是截然不同的。因此我们根据所要表达的情绪，将所对应的形象、场景、关系收纳到对应的意象库中，这可以帮助一些视觉设计师快速给出设计方向。
下一步，即可为意象进行设计形态的处理。我们将需要处理的意象，以单一-复合 和 具体-抽象 为坐标进行了分类，从而划分小礼物、中礼物、大礼物，以提供定价参考。
由于直播间涉及的礼物品类繁多，同时参与设计的视觉同学也较多，为了使得最终的产出有视觉风格上的一致性，针对每一种情绪进行了配色、光效、样式、质感上的定义。
礼物定价趋势方面，对竞品的礼物进行了分析，将竞品的礼物按表达的情绪聚合，并分析在这种情绪上，礼物价格的分布，来帮助我们了解竞品针对不同情绪表达的礼物的定价规则，以指导自己产品的定价。
最后，礼物上线后，销售量top10的礼物中，新礼物占比达到60%。同时同档位中效益最好的一款，收益提升了1035.4%。
以上是关于理性思维搭建情感化设计体系的分享。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：UXRen 作者：宝珠
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在工作中常常被问到如何表达讲述自己的设计，为了让自己的设计有理可依，对接上下游汇报工作的时候，总结以下一些方法和观点，帮助不知从何讲述自己设计的人一些语言技巧。
以下仅是个人观点，用作探讨交流，文中所有举例均为本人工作设计输出。
设计师能做出好的设计，却缺乏系统化的语言包装，“如何讲设计”不该让它成为难题，做一个有产品思维的设计师，让你的设计以理服人，我们要不止停留在视觉表层，更要从多纬度看待产品设计，本文将从以下三点简述：01.产品设计的五个层面，02.讲述设计的流程，03.关于本次总结
做好产品设计的第一步，是了解产品， 要对于产品的需求如何确定、产品定位如何决定有一个基本的认识，在产品常识里面最重要也最常用的就是产品设计的五个层面，也简称用户体验五要素——
作为UI设计师，所处的视觉设计是表现层，是确定产品的最终形态，因此也处于产品设计的顶层（能被看到），是一个具象画的呈现；其次，往里推框架层，是确定产品外观，将界面信息和导航设计有序归类，让用户使用或者理解；结构层是为用户设计一个结构化的体验，将零散的元素转化为有序立体的空间；范围层确定产品的功能和需求；最后战略层是确定产品目标和用户需求；底层逻辑结构决定上层意识形态表现，因此在设计前我们要知道产品是属于洞察阶段，设计中是属于产品设计解决方案阶段，整体的产品设计是一个概念通过无数个层面的努力，经过时间，转化为具象表现的过程，所以我们在完成一项设计时，应该讲述一个完整的设计思路 ，不要让自己的设计思路仅停留在表面。
整个产品的设计产出是一个抽象到具象化的过程，设计的前期属于产品洞察阶段，这个时候一般由团队的老板领导结合当下市场需要，有用户的需求就有商机，想出产品大致的方向（战略层）然后通过产品经理整合梳理高层的意见确定产品大致的功能和内容输出原型（范围层），交给交互设计师优化产品细节逻辑和信息具体框架，经过研发评估能够技术实现产出交互稿（结构、框架层），这里已经过渡到设计解决问题执行阶段，最后是给到界面设计师美化视觉产出高保真（表现层）。
也就是到我们自己设计输出之前要经历这么多，如果能在讲述自己设计的时候，提前去了解这些，那么设计内容就不愁没法儿讲，光是阐述自己的设计思路就可以讲出一个故事，这也是为什么现在很多品牌卖货都开始营销产品背后的故事由来。我们设计能做好，也要会用语言推销自己的设计成果。
设计是对于某件事精心准备的过程。好的设计作品，应该拥有完整的设计流程，因此我们在讲述自己设计作品的时候，有一套完整系统化的方式是非常有效的。完整的设计流程包含以下4个步骤：
第一是我们需要去了解设计的需求背景，知道大概的方向——
来源（简单理解就是谁提出的问题）需求有可能是你的老板、你的产品经理、或者交互设计、或者视觉上的问题···
背景（笼统一点，就是这个需求是新需求还是原来有然后进行改版优化）需求的基层性质是什么，原本调性是什么，我们要做什么样的产品···
目标（目标一般都是需要解决什么问题）搞清楚为什么做这个需求，能解决什么痛点，不做无用功。
谁提出的问题，是新的需求还是旧的问题，或者我们要解决什么？围绕这几个方向将你的设计概述出来，会让非专业的人也能听懂你做了什么，举个简单的例子，我们公司后台一个很小的产品bug需求，往往这种需求就是产品经理的一个截图和他标注的两句话——
然后你完成了这个需求单，在传达给非产品经理以外的人的时候，你有可能是以下转述方式——
毫无疑问，你就是将需求者的意思一字不落的转达了，但是对于其他的听者来说，你的转述平平无奇、毫无意义，甚至都没有印象你做了什么，所以你应该讲清楚这个需求的背景——
设计需求来源是谁，原本属于产品哪个模块（来源），他原来功能是怎么样的，界面上展示的结构哪里有问题（背景），视觉用了什么样的方式改成什么样，解决了什么痛点（目标）
讲清楚谁给的需求，需要解决什么问题，是在原来的基础上不变动逻辑的情况下增加了什么达到了什么目的，才让你的叙述更完整，听起来更有逻辑。如果是一项新的需求，没有背景，那还得从设计分析说起，设计分析就是让你更专业的去做事，设计分析分为——用户分析，设计目标，和设计手段三个要点：
首先用户分析就是，分析你做的东西给谁看，而用户又分为群体用户和独立用户，在c端常见的就是独立用户，他们通常不定性，且有很多特征；在b端，目标用户一般是群体，他们大多数是有场景特性和行业特性，针对独立用户和群体用户，我们得出的用户特征、基本信息、需求结论也是不一致的，所以我们应该结合产品的调性分析一下我们做出来的设计究竟给谁看给谁用。常见的用户分析方法有：用户画像、用户访谈、问卷调查、焦点小组、眼动测试、用户反馈以及大数据分析，这些方法中最简单的是用户画像，就是举实际的例子列出真实用户的特征信息及使用场景。B端用户分析方法常用大数据分析和用户反馈，这两种方式通过对接需求的上下游就可以得知。
通过用户分析得出需求结论，满足需求就能达成设计目标——
设计目标结合卡诺模型来分析，卡诺模型—反应产品性能和解决用户需求的满意度的一种非线性关系，具体想了解的可以自行百度，站在巨人的肩膀上我们看得更远。 卡诺模型具备4种属性 ：1.必备属性：满足这个需求，用户满意度不会上升，但不满足这个需求，用户不满意会大幅度降低 ；2.期望属性：提供个性化需求，用户满意度会上升，不提供此需求，用户满意度会降低； 3.魅力属性：用户意想不到的效果，提供此属性，用户满意度大幅提升，不提供也不会降低 ；4.无差异：无论提不提供，用户满意度都不会改变，根本不在意；因此在做需求的时候我们应该尽力满足基本需求和期望需求，而可有可无的需求尽量不去做，降低效率。幸福需求是不容易达到的，如果能满足是非常棒的～这里就像是满足了设计心理学的三个层次——本能、行为、反思。
接下来是大家都熟知的设计手段，适当的讲一些述专业的设计技法，用不同的手段去实现的主画面，最后达到完成设计目标这样的结果，会让你显得更专业。设计的手段有很多种，这里主要讲述常用的三种，构图排版（采用什么构图方式，为什么这样构图是因为什么设计原则）、色彩运用（为什么使用这个颜色，因为这个颜色给人的心里感知是什么样的）、设计风格（采用什么风格最贴近产品调性，为什么用这个风格），但是讲设计时一定要记住产品的调性，不能偏离产品本身，不要盲目套用绚丽的技法，否则是不合适的。
很多时候面对非专业需求方收稿时，可能看到如下话语————
（心里是不是xxxx····“万马奔腾”，用个文明点的词）
非专业人士无法理解这二者的区别，他们认为他们的设计手段能达成设计目标，而作为专业设计师的我们就应该引导对方说出设计目标，再用我们专业的手段去满足对方的目标，去实现减少改稿次数，而不是让非专业人士去指导专业人士修改设计手段。分清这两者的区别，我们就可以在设计引导中更加主动。用设计分析的方法来讲述设计，举个例子——
会议管理——会议预约移动端优化，因为这是我们原有产品EKP里面的模块，PC端和移动端都有，因此用户可能是群体也可能是个人。所以针对独立用户和群体用户都做一个用户画像，得出他们的一些需求结论，然后目前幸福需求是没有的，纯属个人建议，日后如果有此功能，想必用户的满意程度也会大大提升。
概括一下已完成的整体主要页面，分析设计目标：
头部属于流量量较高的区域，采用卡片式设计，将会议内容置于此处，作为页面信息关键层，采用左对齐方式排版，突出会议标题和时间提醒用户。
通过不同的颜色标签，区分参会人员状态——
待进行未有操作反馈，选用橙色，属于可以持续进行并有明显提醒作用
已做反馈属于成功操作，选用已有用户认知心理的绿色
已知信息拒绝参与，是不太重要的，属于不再进行的阶段，选用灰色
接下来是设计作品的产出过程，一般情况下不可见的过程，为什么要去讲， 因为一个东西从无到有是很不容易的一件事，如果能讲述过程，就可以引燃情绪共鸣，让别人记住，让自己的设计作品也能有始有终——
设计过程一般分为四个阶段：初期阶段、中期阶段、最终定稿；具体的关键词和描述可以通过以下方式提炼出来，这里就不做详细说明了。
拿运营宣传来举个例子，我们公司中秋节月饼礼盒包装主视觉设计——
整个过程应该是有一个系统化的说明的，省略为写字的地方是我们可以插入的具体图片和过程，步骤差不多就是上述这些，可以有最初阶段的头脑风暴-提取关键词-清晰定位到中期阶段的团队合作—风格拟定-精选方案-细节刻画以及和物料方沟通对接的打样确定工艺等等过程…再到最后定稿的体验还原-问题优化…主画面的诞生是不容易的，强化这种过程参与，让不被看见的事也能展现。如果实在不好记录，你可以从一开始就截图你绘制的过程——
上图是用PS截图，再用时间轴将每一帧动态循坏播放，导出GIF然后截一张不变的底图合成就可以了。
最后是数据验证阶段，这个是设计落地的直观证实，包含主观认可和客观数据，具体内容就是通过用户或者专业的人士反馈给你设计落地的好坏，来判定你做的是否优秀成功。通常这一块的数据决定你验证你前面所有的过程，只要按照该流程认真做了，最后效果通常不会太差，如果出现很大的偏差也往往是意料之外的，因该寻求团队一起解决，不是某一个人的问题。
根据以上最后我们总结，好的设计就是满足以下4个方面：好看，好用，好记，能实现。设计师要考虑的维度不仅仅在视觉层面，什么是有产品思维的设计师，就是在执行时候要考虑上下游不同职能的工作内容，如果你的设计不能实现，再好看也是白费功夫的～从产品交互视觉多层面谈设计，会让你的设计包装显得不那么单调，系统化的方法总结到此，不足之处多多包含～谢谢你的阅读！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：YiVi_eleven
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
年少时，经常听到身边的同事聊一些名词概念，羡慕之余犹豫羞于提问，导致我经常会陷入其中无法自拔，痛苦不已；过了这么多年，大多数概念都随着工作的原因慢慢被理解和消化，或逐渐消失或不再提及。但唯独，“设计系统”这个词阴魂不散，反反复复的出现在我的面前，特别是在面试这个场景下，几乎每一场都会有这个词被提到。
也源于最近做B端稍微多一些，不如今天就以toB产品为例来唠唠我认知下的设计系统是什么以及如何帮助设计落地执行的。
理论上来讲，设计系统分为两个大部分，一部分是指导思想，另一部分是实际产出；前者去指导后者执行，二者的关系像极了竞技运动中的教练安排的“战术”和球员场上的“执行动作”，如果用一张图来表示，大概就是这么个事：
需要强调的是，要设计一套“设计语言”，首先需要聚焦到“语言”这个词上，通常我们认知里的语言无非是一套沟通方式，因为我们对他习以为常，所以并没有更进一步的了解，我试图去查了下语言的来源，以及为什么世界上会出现这么多语言之类的问题，搜过出来的结果很多很复杂，但概括来说就是支撑一套语言的核心分为“语言特性”以及“语言构成”这两大部分。
第一块，词汇：ta的作用是让你表达出想法，就好比如果你跟我一样English is not good的情况下，还嘚嘚瑟瑟的出国游玩，一定也经历过用“蹦单词+比划”的方式去问路、点菜吧，典型的通过word的方式传递信息。
另一趴，语法，ta会让你更顺畅的表达出自己的想法，通过对词汇的重组和编排，信息传递的有效性被大大增加，你可以通过“主动宾”来陈述观点或表达疑问，尽可能的丰富此刻你的所思所想。就像上面的例子，按照语法规则稍微调整一下，看起来就顺畅多的多了~
那么如果映射到设计上，显而易见，组件库对应词汇，交互流程对应语法；所以你会发现当我们不断迭代产品的时候，我们无非就是想把产品当做一件事情讲清楚罢了。
再就是当一套组件被创造出来，ta需要遵循一定的规则形成一个完整的页面，跟我们造句几乎一模一样；所以这个时候充当语法的交互流程就至关重要。现实情况下，往往交互形态是千变万化的，经常性的会因为业务场景的不同创造一些流程出来；但如果是基于语言的背景下，我们需要尽可能的抽练一些标准化的规则形成语法，我们称之为“设计模式”：
我从中挑了搜索这个比较通用的模式来简单讲下；抛开组件的“点”思维，需要我们定义的是“信息交互”的“线性”流程，我试着把其中的每个环节提炼了出来，抽练了一个流程出来：
通过上图也许你会发现“模式”注重的是流程节点的体验感知（用户跟产品交互的一来一往），并注重封装成标准化方案。另外有一点，我把整个搜索的过程分为了2个个小线程——输入行为和消费行为，这是为了以后团队协作更好的理解这条模式的运作方式，以及之后的拓展，举个例子：产品经理决定加一个历史搜索（就是显示用户过往的搜索结果），这个时候设计师就可以把这个功能当做一个拓展包，直接扔到这个主干里来：
另外，toB CRM鼻祖salesforce在自己的设计网站上公布了他们的设计模式，给出了一些特定的场景下的解决方案，不过写的相对更偏组件流程一些：
PS . 插个有的没的的小话题，一个很好玩的事，如果你细心琢磨的话，也许会发现其实组件本身也是带有一定的潜在交互，这种交互不需要你特意安插，天生就有，就好比一个按钮摆在那，在没有任何引导的情况下，正常人也知道点一点。所以映射到语言里，语法貌似并不是必要的（当然ta的存在是为了设计系统更完整，产品更好），比如这个烂大街的梗：
这种现象是著名的“贝叶斯理论”，利用相关信息总结出未知信息，也就是说我们的大脑是可以通过残缺的信息来补足未知的信息的，人类的大脑真的是奇奇妙妙啊~
相比构成，特性这个就好理解多了，相当于设计原则这类的，我们需要通过一定的规则约束对语言有一个明确的指向；比如现代汉语就具备适应性、开放性两大特征。
但不得不说，作为面试官我个人不是很喜欢作品集里描述设计原则的时候就3个词：“简洁”“高效”“清晰”。并不是讨厌这三个词，而是当我追问候选人为什么是这三个的时候，我得到的回复基本是Material Design（或其他大厂的设计系统）就是这么写的亦或是其他很苍白的回答，这无疑是暴露了对设计系统的认知残缺，是一个非常掉分的互动过程。其实，当google、IBM、salesforce在对外宣讲他们的设计原则的时候，也许就只有两个字“清晰”，但背后或许有非常多的思考，甚至超乎你我的想象。
但...异乎寻常的是，AntDesign 的设计原则写的很"深奥"，凭我的功力真的看不出背后的东西，也不知道如何指导设计（也许他们是在探索设计哲学吧哈哈哈哈）：
当我们对上述各方诉求梳理清楚后，首先要精准的概括和整理这些内容的权重和占比（需要注意的是，虽然允许多个原则存在，但也要有一定的侧重和比例，这种做法在顺畅的环节上不会有所建树，但在多个原则冲突的情况下为了保全大局，顺应占比最大的原则是相对稳妥的选择，一定程度上可以帮助设计师规避掉不必要的纠结或撕逼的过程）；再然后基于当下的情况产出相应的原则，形成整套设计系统的王炸：
但在实际操作中，高度整合后的设计原则虽然指明了方向，但缺失了可衡量性，这就会导致“认知偏差”的情况，因为每个人对图例中的“高效”或“灵活”理解不同，会对同一个事物有不同的理解，就跟“小马过河”这个典故一样，小松鼠觉着水很深，小马却觉着也就那样；也正是基于此，需要设计师们在此基础上拆分明确的细则，帮助整个团队建立统一认知：
到这一步基本上设计系统就被定了调了，我们可以明确对一个设计进行评判和衡量，以“清晰”为例，我们有个B端产品里面有个表单填写的页面，需要用户提供一些个信息，前两天，团队一个设计师做了个方案是把表单新开tab，但产品觉着不够清晰，反而觉着蒙版的形式更清晰。他就很疑惑，明明信息获得了更好的展示咋就不清晰了？
说到底，是我们在做设计定义的时候，对“清晰”的认知就是偏薄的，这个案例里面显然第一个方案对信息的展示更加充分明了，但在这个场景下“清晰”并不仅仅指的是信息呈现，产品经理希望用户透过浮层能确认当前处在哪一步（或哪个页面）也同样是一个维度；从这个case里，你会发现，定义一个原则真的不仅仅是搬运一个名词这么简单，所有的原则和特性必须遵循易于操作且合理，这样才是一条合格且优秀的原则。
ps . Salesforce的Lightning设计系统是我最喜欢的design system之一，原因很多，其中很重要的一条是因为他们真的是把“美”作为一个很重要的原则：
色彩体系的定制往往是重灾区，最常见的做法是把颜色用色块的方式一字排开，一排叫做品牌色，一排叫做辅助色，还有一排是灰度：
这种定义存在很大的风险，就跟菜谱只告诉你需要哪些食材，不告诉你配比一样，做出来的菜大概率是一塌糊涂，难以下咽。所以如果你正在建设一套团队协作级别的设计规范，务必要把“协作”当做最重要的事，用比例的方式来告诉你的队友他们应该怎么做：
同理，其他的模块，比如字号，间距，图标，我都建议尽可能的“场景化”，让设计规范有一定的代入感，这样会大大提高设计的效能和品质。
抛出这个问题，是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点；我个人是很难以认同这个的，对design system的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合，需要调动整个团队的想象力和创造力，最终达到一个统一共识才有可能被实施和执行；其次，创造力并不全是设计个btn或者弹窗，真正能展示创造力的是像乐高一样，通过零件（组件）拼装成各种各样的令人叹为观止的创意，那才是我理解的创造力：
另外从系统性思维上讲，如果在不考虑资源的情况下，我倒是挺支持每一位设计师都自己去设计一套设计系统，因为在我们平时看来，2/3年经验的设计师和10年的设计师他们的产出物或许不会差太多，但对设计观架构的能力千差万别，前者依赖感觉和直觉素养做事，后者更靠缜密的逻辑和推理来做事；我更喜欢后者多一些，并不是因为他们讲起自己作品的时候听起来多么高大上，而是因为依据推理方法可以时刻保持输出的稳定性。
我无意诋毁这两大巨星，也无意内卷，只是想说，做事，终究不能托付给“天赋”和“灵感”，勤奋和努力在一定程度上也许可以帮你飞到更高。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：负能量补给站
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
RayData作为一个系列的可视化工具，内容资产作为基础的构成发挥着重要的作用，在日益更新迭代的过程中，会发现每条产品线对图表组件的需求都很繁重，无法避免地重复开发。通过开发通用型组件可以一定程度的解决问题，但是存在灵活性差，组件库维护困难等问题，而且内部产品图表库各自独立，缺乏统一的设计语言。
通过对类似竞品的调研，发现图表做为承载数据信息的组件，本身只是工具，它的使用体验优劣还往往取决于业务需求、数据类型、图表本身的视觉效果接受度等因素。而且图表类型的丰富和灵活程度，使用的框架及响应时间，商业或免费和开源状态也都是评判标准之一。
无论是小而美的个人项目还是大数据可视交互管理系统，项目生命周期的前四分之三阶段，进行的缓慢纠结，充斥着大量需求变更，新想法的临时加入。当多个项目同时展开，图表组件效果是否灵活多变、复用性的高低对制作人员生产力、客户方耐力、项目最终达成时双方的消耗力有极大考验。
通过对类似竞品的调研，发现常见的可视化图表库都存在自身的局限性，体量大，功能冗余，更新缓慢。最终促成了我们从两个维度入手，提炼关键词，简化并转化成图表库系统的功能点。
图表存在很多分类方式，基于形状命名、作者命名、抽象概念命名和数据结构命名等。
为了更好的帮助使用者快速定位，我们简化了图表大分类，依据人对形状轮廓最初的感知，调动直观的感受来进行分类和命名。
整个图表库的设计层包含显性和隐性的两种，显性的规范面向用户，隐性的规范面向开发。
通过调研常见的工具类产品，结合对产品易用性的理解，我们把产品的颜色方案提出来单独定义一个全局的颜色方案，以便一套配色贯穿整个项目使用，然后对通用的设置和个性化设置分开设计。
可视化的组合来源有四种：视觉暗示、坐标系、标尺以及背景信息。
其中视觉暗示是比较重要的组成，以直角坐标系结构为例，对大分类下的参数进行深入挖掘。
从设计的角度出发，我们希望赋予图表样式更多的可能性，开放高度自定义的调节参数。
通常用户在初次浏览图表时会把注意力放在图形的差异化上，比如突出的颜色、突出的图形，但并没有及时将所有的数值联系起来，之后才会进行比较，然后再看整体、分布和多变量关系。在颜色和属性系统中单独设置最大值、最小值的颜色和样式，可以使得图表展示信息的信息维度更高一层。
数据可视化是基于物理世界反馈的信息，通过用各种视觉变量（例如图形、颜色、维度）把数据进行编码、再现的过程。
色彩是数据可视化中滥用和忽视最严重的变量之一，也是所有视觉变量中最富于变化的一种。
信息图表除图形外感官最明显的就是颜色，为了能够达到图表设计的高度自定义，色彩的搭配、自定义的程度，每个图元都有对应的颜色设置。
从设计的角度出发，尝试在颜色系统中加入阴影、发光、全局阴影等结构，进一步还原设计的图形处理习惯，丰富图表的表达。
可视化项目的配色一般来源于实际需求和3D场景效果的搭配，通常是不能预判配色的。
在这种情况下如果需要帮助项目的快速搭建，预置方案就要做到覆盖面广，适应性强，控制取色范围，由此提出以下原则。
制定规范时候我们确定了默认的布局方式，综合实际使用，以柱状图为例，宽度滑块的最大对应100%宽度，图形撑满，更贴近使用者的直觉，另外考虑到多端融合，涉及到一些放大预览的功能，默认选用百分比布局更合理。
在实际配置图表时候，图形和文字的位置关系千变万化，为了应对这种情况我们引入了文字基线位置和相对位置作为位置参照。使用中配合偏移量调节基本能覆盖所有的情况。
为了应对项目灵活配置的需求，我们把图表编辑和Config参数结合，可视化控制生成的图表Config参数，直接导出到项目使用。
除了匀速动画，为了达成更自然的动态效果，引入缓入缓出速度曲线，同时为了达成更丰富的表达，增加了一条简洁的回弹曲线
动效是图表数据表达的一个重要构成，针对图表的动效，通过总结图元的运动方式，结合Material Design的一些处理方式，整理了一套图表元素动效规范集合。
针对缺乏静态数据等真实数据源，检验生成图表的视觉效果的问题，我们为用户提供了指定范围随机数生成功能，可以快速生成与应用项目数据相类似的效果。
颜色配置方案能在同一项目中起到控制整个颜色风格的作用，可以快速应用到图表上。
图表库在项目中的应用
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者:RayData实验室
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com