1. 到底什么是图？

「图」对于很多人来说是一个熟悉又陌生的东西，那么到底什么是图？以上图的小游戏为例，为了演示方便，我们抽取其中10个人关于键盘和音乐类型的喜好的信息，如果以键盘和音乐喜好为关系，把这10个人联系起来的话，会得到下方这样能一张关系图。

基于这张图能大致了解这10个人中对于音乐和键盘喜好是什么情况，比如：没有人喜欢流行乐和红轴键盘，甚至可以进行一些简单的推理：喜欢古典乐的人大概率会喜欢黑轴和青轴。

本质上来说，通过前面的小游戏收集到的数据是一张表格数据，当把这些静态的数据以某个维度的信息关联起来，就能构建成一张图，基于这张图我们能进行各种各样的解读和分析。这其实就构成了在我们图这个领域中的 DIKW 模型。把静态的数据，逐步转化成信息，再到分析出有意义的「知识」，在实际的业务场景中，借助算法或者更复杂的分析手段，甚至能从图中分析出价值更高的「智慧」。

随着一张图中的节点数量越多，节点之间能互相产生的关系会指数型的增长，对于这个关系网来说，它能产生的经济效益也是指数型的增长，在经济学领域把这一效应称之为「梅特卡夫效应」。其实在日常生活中，最常见的图，就是一张由人际关系构成的社交关系网络，我们每天都在用的各种社交平台都符合这一效应。

在实际的 B 端业务场景中，图在图数据库、网络安全、企业风控、知识图谱等场景下有非常广泛的应用。

2. 设计挑战

分享一个在知识图谱这个业务场景下的真实故事，某天 PD 发过来如上图的钉钉消息，希望帮他设计一个图的需求，然后隔一段时间发来不同的希望在图上面表达的语义诉求。随着要表达的信息越来越多，后面再去设计图的样式时，就陷入了不知道该怎么办的境地…

2.1 视觉通道有限

在可视化设计中，常见的视觉通道就那么几种：形状、方向、纹理、尺寸、值、颜色，随着产品功能的拓展，需要在图上表达的信息维度越来越多，且根本没有停下来的趋势。这时我们会面临图这类产品设计时的第一个挑战：视觉通道有限，无法满足日益增长的语义表达的需求。

2.2 数据量超预期

下图左侧是一张交付给前端同学的设计稿，基本上满足 PD 提到的各类语义表达的诉求。然而实际验收的时候，带进实际数据的时候效果是右图这样的。这是面临的第二个挑战，在设计一张图的时候，设计师往往是按照非常理想的情况去设计的，但当实际的数据灌入进去，再加上还原度的问题，布局的问题，会导致实际一张图渲染出来的效果是非常「惊人」的，可读性几乎为0。

2.3 连续分析效果不可控

下图的 GIF 是最基础的一种图分析的操作：从一个节点出发，逐步的选择感兴趣的节点展开，以随着关系的逐步扩散发掘出更多有价值的信息。GIF 中所看到的从起始的蓝色节点扩散到青色节点，再到红色、绿色节点，这样逐步扩展，分层展示，是一个设计师的理想情况。但实际的情况往往是下图这样的，每次扩展开的节点都会在原来的基础上覆盖，连续扩散几次之后，节点和边密密麻麻的重叠在一起。连续分析的情况下，效果再一次超出我们的预期。

回顾一下为何会出现上面的几个问题：在面对图这样一个陌生的设计对象时，在对其有更深入的了解之前，我们往往只能看到表面的静态的视觉的设计，单点的交互设计，看不到也没法控制的是藏在图这座冰山之下的数据量、布局效果、加载速度和用户连续分析的路径。

为了解决上面提到的几个挑战，以及便于更多设计师更快速的上手图产品的设计，避免一些我们此前踩过的坑，同时为了规范图产品的设计，我们基于在不同业务线的图产品的实践和思考，产出了「AntV 图可视分析设计指引」。

       更好的阅读体验，推荐访问语雀版 

3. 设计指引

设计指引从全局样式（Global Style）、交互规范（Guide）、组件（Conponents）、功能模板（Templates）、综合案例（Examples）几个视角出发组织相关的内容。由于大部分设计师对「图」是不太了解的，所以增加了一篇「总则」来介绍「图」是什么，在做相关产品的设计时，面临的设计对象是什么，以及几条最通用的设计指引内容。同时也提供了 Sketch 组件库模板资产，内置了优雅好看的图的样式和常用图的模板。

  

3.1 全局样式

回顾前面提到的知识图谱里的这个图设计的需求，我们踩过那么多坑之后，再回头去看，该如何设计这一一张图呢？其实把上面这张 DEMO 图拆解来看，再复杂的图，本质上无外乎就是「两点一线」，以及在节点和边上的文字标签。

再抽象一层看，会发现组成图的最基础的元素有：点、边、箭头、标签、布局这么5种元素。以其中的点为例，再去拆解看一下，设计这个图里面最基础的元素的时候，适用于表达点的视觉样式的有大小、颜色、描边、形状、图标、角标 这么几个视觉参数。其中，「描边」还能细分为单层描边或多层描边，「图标」还能区分为线型还是面型，各自再对应不同的视觉参数。

有了最适合点的视觉通道和对应的参数之后，回顾一下我们此前需求中我们需要在节点上表达的各类语义，可以归纳3大类：

• 数据特性：数据中固有的一些特性，比如类型、规模、权限等，这些特性不会随着呈现的平台的不同而变化，而是属于数据本身的一些特性；

• 功能属性：在具体的产品中，随着产品功能的不断丰富，赋予给节点的属性，比如一个产品有了预测或推理的能力，就需要在图中表达出节点是否是「预测的」或者是「疑似」的；

• 鼠标状态：鼠标 Hover 、Focus、Disable 等常见鼠标交互事件

这3类语义，共同决定了一个节点应该表达什么维度的信息，样式应该是什么样子的。这时再去设计一个节点的样式时，其实就是一个把语义类型和适用的视觉通道和参数连线的过程。无论需要表达的语义如何新增，节点样式的表达都有一定的内在逻辑可循。

图的基础元素中，除了点之外，其他的基础元素也按照类似的思路梳理出需要表达的语义和使用的视觉通道，这样我们就完整的，成体系地归纳出了所有影响一张图「长什么样」的基础元素、视觉通道和参数。有了这样一张「参数表」，再去设计一张图时，就明确的知道有哪些要素可以考虑。

当然，能做的不止于此。结合我们前端同学的能力，我们把上述「参数表」工程化了，做成了一个在线工具 — GraphMaker 。在这个工具里可以根据实际的数据量，调整节点、边、布局的所有视觉通道参数，以调整到一个合适的视觉效果。最终导出成代码，用到实际的项目中。及时完全不懂图，也能在这个工具上，调试出理想的视觉效果，再将对应的代码导出给到开发同学使用。

3.2 交互规范

在图产品中，常见的操作对象有：画布、节点、边、Combo 和其他这五种类型。为了捋清楚图产品中常见的交互事件，以交互事件三要素的形式，将所有的交互事件全部梳理和枚举出来，并以操作对象为分类维度，归纳整理出一份完整的「交互时事件库」，提供给设计师使用。

3.3 组件 & 分析模式

前面介绍了「交互事件」，很多时候，一个复杂的交互事件需要有一个独立的组件来承载。比如：关联节点的搜索查询、代码输入框、算法模板选择器等都有一个共性：都是属于「输入某中查询条件」的组件，这类组件则统一归纳为「条件输入组件」，主要由「条件输入」和「确认执行」两部分内容组成。相同的逻辑，我们将各类业务场景下常见的组件归纳为基础组件、条件输入、信息输出、高级功能四种类型。定义好每种类型组件的基本特性，确保产品在不断迭代新增新功能的过程中，新增的功能组件都能保持基本一致的体验。

以最常见的一个「算法模板」查询的场景为例，在左侧的条件输入面板选择一个合适的算法模板，画布上会渲染出对应的结果内容，然后用户会选择其中感兴趣的节点查看详情。这三个组件共同组成了一个完成的图分析操作，这类有固定条件输入的分析模式被定义为「有明确目的分析」。图分析产品中，常见的分析模式有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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

前言

用户体验地图与服务蓝图常常会一起出现。因为，用户体验地图更聚焦于用户在前台端到端的体验，而服务蓝图更聚焦于由表面到核心后台业务及如何交付和幕后的操作，并且能与用户体验强关联起来。

什么是服务蓝图？

服务蓝图是以公司角度展示的可视化界面工具。在每个阶段为用户提供的服务，且在服务过程中会涉及到的不同人员和不同的条件。并且在公司内，所有的人员都可以客观的理解并使用（所需各方的服务和支持）。

1. 主要构成

服务蓝图直观上同时从 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

但是，究竟如何才能结合网页/产品特色和用户的真实需求， 将页面视觉内容层级化， 从而提供更加优质的用户体验，实现与用户的互动， 最终促成产品购买呢？下面小编就结合最新且具有极佳视觉层次感的网页设计实例分析和介绍视觉内容组织技巧，以及在原型化这些网页设计的过程中（结合小编最爱的一款又快又简单的原型工具Mockplus）需要注意的原型设计技巧：

1.利用界面元素尺寸大小建立层级结构

界面元素（例如文字，图片或形状等）尺寸越大，越突出，越容易吸引用户的注意。所以，在具体的网页界面设计中，设计师可以通过有梯度的尺寸变化，创建页面信息的层级关系。当然内容重要性上，也应该是与尺寸大小成正比的（即越大越重要）。

大图模式

如图，利用文字的尺寸大小，体现网页信息的层级。

注意：尺寸大小也要控制在用户能够接受的范围内

太大，能够展示的内容有限。太小，易读性差，也会比较繁杂。

原型设计技巧：

在利用Mockplus (一款具有丰富组件库和图标库的原型工具)创建网页原型时，绝大部分的组件都是可以简单通过宽高属性或拖拉边框两种方式调整其尺寸，轻松创建直观的层次结构。

大图模式

如图，Mockplus允许用户简单通过宽高属性或拖拉边框的方式调整组件尺寸大小。

2.利用界面元素明暗，阴影以及透明度的不同，体现简单层级

如白底黑字般，同类元素，同一色彩，不同的明暗，阴影以及透明度，也可体现简单的层级关系。当然，在没有过多颜色的参与下，不同文字，图片等多种的页面元素结合透明度，阴影以及明暗，也可使整款设计极具简约风和层次感。（点击链接更多的简约风网页设计技巧）

大图模式

如图，文字明暗，结合尺寸变化，让页面层级更加清晰简约：

原型设计技巧：

而在这一方面，小编发现Mockplus提供了专门透明度属性，可以根据层级设计需求，修改属性数值进行设置。

如若，需要添加元素阴影，也可轻松通过组件的重叠实现。

大图模式

如图，“图片”与“形状”组件的组合，实现阴影的添加。

3.利用色彩，划分页面层级

色彩，作为设计师最常使用的视觉层次工具，也为他们创建极富层级感的网页设计发挥着举足轻重的作用。而具体的设计技巧，大家可以参考以下几点：

首先，色彩明亮的页面元素更容易从相对柔和的元素中脱颖而出。如图：

大图模式

如图，明亮的红色和黄色更易从相对较柔和的粉色背景中脱颖而出。

而且，某些色彩，尤其是某些主题配色方案的选择，对于确定网页的整体基调，吸引用户注意，作用也非常明显。例如，蓝色，一般代表平静祥和，适合一些日常事物管理类软件选择。而红色，则代表热情喜气，适合一些节日相关购物促销类软件选择。

大图模式

如图，利用红色突出网页促销信息。

其次，色彩饱和度的梯度变化，也可体现直观而丰富的层次结构。

同一色彩，饱和度的梯度变化，也可帮助展现网站元素的层次结构。如图：

大图模式

最后，色彩模块，对于体现界面元素的逻辑关系，作用也是显而易见

存在同一逻辑关系的各个页面元素就近放置在同一色彩模块，可以让页面组织结构更加清晰，易于用户快速查看相关内容。

大图模式

如图，利用色彩模块，更直观地划分功能区。

原型设计技巧：

而这一方面，Mockplus提供了非常强大的色彩选择器，设计师们可以简单点击实现色彩的选择和添加。其色彩收藏功能，也为以后复用和保持整款设计配色的一致性提供了可能。

当然，结合“形状”组件，为页面添加丰富的功能色块，以及添加“鼠标悬停时”或“点击时”的简单色彩交互状态，也不是难事。

大图模式

如图，添加色块划分界面功能结构。

4.利用页面布局，展现网页层级结构

页面布局也是设计师们常用的视觉工具之一。一方面，同一网站，内部各个页面可以根据软件或产品展示内容需求，采用多样的布局模式，增加页面的多变性和可读性。另一方面，也可直接在不同页面采用重复的页面布局，方便帮助用户形成一定的阅读习惯，快速有效的查询需要的信息。

而具体单个页面的布局模式，大家可以尝试以下的方式实现：

*利用网格划分不同页面模块

网格是公认的划分页面功能模块的工具之一。而它在组织界面视觉内容方面，作用也不可小视。加之，结合各个网格的色彩变化，也能使整个页面更加炫酷直观。如下图：

大图模式

*利用位置不同体现逻辑关系

同一逻辑关系（比如同类，从属，因果等）或相近/相关的元素放在同一或并列的网页位置或模块内，更易于用户浏览所需页面信息。

当然，每个逻辑关系内，结合大小标题和列表进行展示，层级关系会更加深入清晰。

*利用点线

网页设计中，设计师不仅可以直接使用点线标出需要强调的内容，还可以利用点线划分页面板块和布局。

大图模式

如图，通过位置的不同体现内容之间的逻辑关系。同时，利用线条划分页面结构和布局。

*利用对齐方式的不同

文字，图片以及相关元素的对齐方式，也是体验不同层级结构的重要工具。

总之，页面布局也可帮助设计师们创建更具美感和层次感的网页设计。

原型设计技巧：

在使用Mockplus时，设计师可简单使用“快速格子+自动填充”的功能组合，实现界面网格的轻松添加。而且，在具体的设计过程中，对齐方式，标尺以及参考线等工具的使用，也可使网页布局设计更加简便快捷。

大图模式

如图，利用Mockplus的快速格子和自动填充功能制作网页网格，划分界面功能结构。

5.利用留白和间距，突出界面视觉内容

留白的巧妙运用，能够非常有效地突出页面信息。而页面内部元素之间，保持适当的间距，让彼此之间的相互联系而不“拥挤杂乱”，也是吸引用户注意的不错策略。如图：

大图模式

6.利用对比，凸显网页层级结构关系

以上所提及的各种视觉组织工具，例如尺寸，色彩，明暗，间距等等，同类或不同类之间的鲜明对比，也可以让页面视觉上更加美观而丰富，同时体现元素之间的结构层次关系。

大图模式

如图，利用色彩的强烈对比，突出页面层级。

此外，页面元素的相互叠加，清晰度，以及细节展示程度的对比，也能有效地凸显网页内容的重要性层级。

大图模式

如图，靠前的图片和文字应该更加重要，清晰，细节也应更丰富，从而方便用户识别读取，避免层次混乱。

7.采用不同的界面风格，打造独特的网页视觉层级

当然，并不是说设计师就必须通过以上的设计工具展示网页重要性层级结构。实际上，结合设计师特有创意，独特纹理（texture），图形或图像元素等，打造出具有设计师独特风格的视觉层级，也会是不错的尝试。如下图：

大图模式

总之，不管是否使用以上的设计工具，结合设计师创意，打造独具一格的视觉层级风格，都是不错的设计理念。

原型设计技巧：

而在这一点上，Mockplus提供了很多优质功能，帮助设计师随心设计，并简单快捷的原型化，测试和迭代这些天马行空的创意。

比如，其团队协作和团队管理功能，方便设计师更加高效地完成设计。其8种演示和分享方式，例如导出图片，HTML以及演示包等等，为设计师根据切实需要，选择适当的方式测试和分享相关设计提供了便利。

此外，其组件样式库，也为保存和分享需要的组件样式并随时复用提供了可能。

8.分析用户需求和网页浏览模式，优化页面内容和位置

在进行网页界面层级结构化的过程中，并不是毫无章法，盲目的随意添加或突出某个部分，而是需要分析用户行为，根据用户需求等级进行相应结构层次的划分。否则，再怎么赋有层次感，用户也会因为找不到需要的东西，莞尔离开。

此外，除了根据用需求决定哪些内容需要放在最紧要，最突出的位置，以吸引用户。同时还需要根据用户浏览网页时的阅读模式，分析重要内容的页面位置。

根据美国著名网站设计工程师Nielsen Norman Group研究表示，用户总是在网页浏览中惯用“F”或“Z”型阅读模式，即用户常常是从左到右，开头结尾详细阅读，而中间部分则根据网页或文章大小标题结构，选择性阅读的模式。如下图：

大图模式

那么，网页设计中，设计师就需要注意页面首尾内容的趣味性和实用性，以及中间主体部分注意大小标题简洁明了，建立清晰的框架层次结构。

总之，无论是用户行为画像，还是用户浏览模式分析，最终都是希望能够根据用户需求，更加合理的安排和分布页面内容，直观清晰，易识别。

9.其他设计工具

而其它视觉设计工具，例如界面文本方面，文本字体，排版，对齐方式等等，也可突出页面的层级关系。

原型设计技巧：

如若设计师希望通过网页文本的尺寸，字体，颜色，排版以及对齐方式等实现框架结构的构建时，Mockplus的“单行文字”和“多行文字”组件就可以轻松帮助实现。而且，适当的结合一定的交互设计，也可使整款设计更具吸引力。

结语：

当然，层次结构化不仅能让网页更加直观清晰，赏心悦目。而且，具有一定局限性的Android 或iOS app，例如页面尺寸的限制，设备屏幕的限制，响应与否的限制等等，更需要清晰的层次结构，让页面摆脱混乱繁杂，吸引更多用户点击使用。而这方面，也同样适用以上所有设计技巧。

总之， 无论如何， 及时地将各种设计想法，通过一款实用且强大的原型工具（比如以上介绍到的Mockplus）, 转化成直观可视的原型，更进一步的测试和迭代，才是创建真正美观实用，深受用户喜爱的web/app的必经之道。

总之，希望以上介绍的相关层次结构设计技巧和原型设计技巧能对你有所启发。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

每当我看到一个漂亮，优雅并且简洁美观的界面，就会忍不住保存下来。现在，我已经收集了100多个美不胜收的UI 界面。在一次次观摩，欣赏和学习后，我发现这些界面有很多共同点。可究竟是什么让我对它们一见钟情呢？现在我找到了答案，是色彩。

本文中，结合自身经历，我总结了一些UI 设计配色技巧。虽然它们不能像魔术一样让你摇身一变成为最优秀的UI设计师，但是我保证，这些为你量身打造的UI 设计配色技巧，定会让你受益匪浅。

1. 色彩的魔力

色彩是会说话的，甚至可以像语言一样强大。回想以下，每当你初见一个网站或产品，给你留下第一印象的是什么呢？是视觉外观，而视觉外观很大程度上是取决于色彩运用。

那么，在UI设计中，色彩究竟可以做些什么？

1）反映品牌的内涵和品质

颜色可以为品牌设定基调。 CCICOLOR的一项研究表明，用户在评估一款在线商品时，只需花费短短90秒，而判断的依据高达62％至90％将取决于配色方案。

2）实现更佳的用户体验

色彩的有效运用能提升整体美感，提供更优的阅读体验，创造清晰和谐的风格。

3）影响购买决策

根据Kissmetrics的说法，产品的视觉外观是影响消费者购买决策的首要因素。此外，QuickSprout的研究也表明，90％的产品评估都与颜色有关。Neil Patel曾写到，“颜色在你购买特定产品的原因中占据85％的分量”。正因如此，颜色已成为当今重要的营销手段之一。

2. 色彩的基本概念

色彩被长久的文化生活赋予了很多约定俗成的含义和寓意。每种色彩都形成了自己独特的语言和象征。解读色彩的语言，请看下表：

大图模式

3. UI 设计配色技巧

1） 色彩使用也讲究“天时地利人和”

存在即合理，没有哪一个色彩本身就是丑陋和不具备美感的，只能说，如果我们错误的使用了色彩，那么它的美一旦被破坏，就只剩下丑陋和别扭了。

想象一下，如果麦当劳大叔使用比较沉闷的灰色和黑色而不是明快的黄色和红色，你还对他们的炸鸡充满饥肠辘辘的感觉吗？女人喜欢穿着黑色礼服搭配鲜艳口红参加派对，为什么？因为这样会让她们看起来性感迷人。

不同的颜色传达不同的含义和感觉。如何明智地进行选取和搭配呢？这里请注意5点：选取合适的颜色，运用于合适的设计场景，注意时间变化，关注目标用户，明确想要达到的目的。

这里请认真查看上图，明确颜色的意义。但如果你非要冒险追求独一无二的设计，那么祝您好运。

大图模式

2）留心蓝色

为什么专门谈蓝色？蓝色不是海洋天空的专属色，蓝色也是UI 设计的青睐色。

看看你常用的一些比较有名的APP或者网站，比如Facebook，Safari以及办公软件等等。有什么发现呢？是的，它们的界面都是蓝色，各种层次的蓝色。

有研究表明，蓝色是唯一一种让女性和男性都钟爱的颜色。蓝色几乎无处不在，大自然中，各网站的UI界面，服饰衣物等，蓝色随处可见。包括我此刻写入文章的Microsoft Word，界面也是蓝色的。

蓝色无疑是一种安全的颜色，它能最大程度上获得用户的信任并被广泛接受，蓝色可以说是UI配色中的典型例子。如果你的UI界面没有更好的选择，请用蓝色。

大图模式

3）背景色和元素之间的色彩变化技巧

看看以下的界面：

大图模式

（来源）

这里暂且不谈这又是关于蓝色的UI界面，让我们专注于它的色彩变化。主题颜色是蓝色，其他元素是较暗的蓝色和更明亮的蓝色。整体看上去，各层次的颜色平衡和谐且又脉络清晰。

怎么做到自然而又极具美感的色彩变化？

只是一个简单的黄金法则：通过降低亮度和增加饱和度可以使色彩变得更深；通过增加亮度和降低饱和度来使色彩变得更浅。

4）色彩组合的黄金比例——（6：3：1）规则

在设计时，色彩组合必不可免。组合颜色很容易，但组合后如何避免色彩混乱和累赘？如何既能够不显得单调又展示设计感？

记住二个原则：

第一个：6：3：1规则

60％+ 30％+ 10％的比例是为了平衡颜色。这个公式能创造出一种平衡的感觉，并能提供更佳的用户体验，可以让用户的实现从一个点舒缓的移动到另一个点。

第二个：最多3个原色

这个规则与黄金（6：3：1）规则相匹配。这是避免混乱并保持平衡的最佳办法。

大图模式

5）颜色组合和互补

提供和谐的配色方案时，需要注意些什么？在这个过程中需要考虑以下方面：

第一， 色调

您可以在色环上生成单个“色度”的许多变体。通过添加白色，黑色和灰色来生成不同的色调。

实现平衡色调，最简单的方案是单色（单色）方案。

第二， 对比

颜色的不同对比可以唤起不同的情感反应。色轮上相对的两种颜色可以提供最高的对比度，比如黑色和白色。强烈的对比度可以让人集中精力，并且产生紧张的心情; 柔和的对比度则适用于轻松、休闲的UI设计。

大图模式

注意：对比的使用不要过火，这样容易使用户产生困扰。

6）黑白色搭配不过时

黑色是所有中性色中最强的，而白色是最常用的背景颜色。黑色是一个很好的选择，有种高端和永恒的感觉，而白色可以带给用户自由，宽敞和透气的感觉。如上所述，黑色和白色也是最大的对比色，如果合理的使用黑色配合白色，会营造出一种优雅的氛围。黑白色的搭配主要用于网站UI界面。

大图模式

7）从自然和艺术中获得灵感

自然与艺术是灵感的主要源泉。抬头看看天空，你会发现蓝色发挥到淋淋尽致的经典模样。从大自然中获得的配色灵感可以使您的设计更加切合用户的审美，非常自然，不带刻意的痕迹。而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。

大图模式

8）颜色心理学 – 避免性别误区

或许天生如此，女人不喜欢灰色，橙色和棕色。她们钟爱蓝色，紫色和绿色。而男人不喜欢紫色，橙色和棕色。男人喜欢蓝色，绿色和黑色。只要记住，当你的产品目标用户群是男性时，选择能传达男性气概的色彩。如果你把运动类App的界面使用了女性色彩，结果可想而知。

还有一个误区，人们以为粉色是女性的喜爱，但结果也许会让你大跌眼镜。

大图模式

4. 工具和模板

这里我总结了一些有助于UI配色的工具和模板，希望对您有所帮助：

1）Coolors.co

Coolors.co是挑选颜色的好工具。只需锁定所选颜色并按空格即可生成调色板，还提供了锁定部分色卡再次生成颜色的功能。包括HEX、HSB、RGB、CMYK等四种色彩模式。

2）Mockplus

Mockplus是一款非常方便的UI / UX设计工具，其启动页面加入了配色精美的示例项目和模板，可直接导入桌面客户端。其编辑器中，可对组件进行多样的色彩设置和编辑，内部也包含完整的颜色选择器，支持导入图片和GIF，如果您是要在原型设计过程中产出精美的UI 界面，Mockplus能满足您的需求。

大图模式

3）Paletton

Paletton有点类似于Kuler，但又不仅限于5个色调。当您已经拥有原色并想要使用其他色调时，Paletton将会是您很好的选择，它可以创建协同色彩组合工作，是强大的UI调色板。

4）Check my Color

Check my Color是一款可以用于检查所有DOM元素的前景和背景颜色组合的工具，也是一款能够检查不同网页自己的颜色亮度和对比度差异的工具。

5）Chinaz

该网站提供了丰富的配色资源，包括在线调色板，网页常用色彩，web安全色以及网页颜色选择器，会使您UI 配色的一个很好的帮助。建议对色彩运用比较初级的设计师可以做一个参考。

注意：可用性是关键

创建华丽的UI界面永远不是最终的目标。提供卓越的用户体验，为用户的生活增添快乐和幸福才是我们设计的目的。因此，在UI 设计配色上，每位UI设计师应该记住，界面应该是符合高度实用和并且清晰明了的。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

react全家桶从0到1(最新)

本文从零开始，逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解，通过这个项目，可以系统的了解react技术栈的主要知识，避免搭建一次后面就忘记的情况。

代码库：https://github.com/teapot-py/react-demo

首先关于主要的npm包版本列一下：

1. react@16.7.0
2. webpack@4.28.4
3. babel@7+
4. react-router@4.3.1
5. redux@4+

从webpack开始

思考一下webpack到底做了什么事情？其实简单来说，就是从入口文件开始，不断寻找依赖，同时为了解析各种不同的文件加载相应的loader，最后生成我们希望的类型的目标文件。

这个过程就像是在一个迷宫里寻宝，我们从入口进入，同时我们也会不断的接收到下一处宝藏的提示信息，我们对信息进行解码，而解码的时候可能需要一些工具，比如说钥匙，而loader就像是这样的钥匙，然后得到我们可以识别的内容。

回到我们的项目，首先进行项目的初始化，分别执行如下命令

mkdir react-demo // 新建项目文件夹
cd react-demo // cd到项目目录下
npm init // npm初始化 


    

        1
    

    

        2
    

    

        3
    

引入webpack

npm i webpack --save
touch webpack.config.js 


    

        1
    

    

        2
    

对webpack进行简单配置，更新webpack.config.js

const path = require('path');

module.exports = {
  entry: './app.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 定义输出目录
    filename: 'my-first-webpack.bundle.js'  // 定义输出文件名称
  }
}; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

更新package.json文件，在scripts中添加webpack执行命令

"scripts": {
  "dev": "./node_modules/.bin/webpack --config webpack.config.js"
} 


    

        1
    

    

        2
    

    

        3
    

如果有报错请按提示安装webpack-cli

npm i webpack-cli 


    

        1
    

执行webpack

npm run dev 


    

        1
    

如果在项目文件夹下生成了dist文件，说明我们的配置是没有问题的。

接入react

安装react相关包

npm install react react-dom --save 


    

        1
    

更新app.js入口文件

import React from 'react
import ReactDom from 'react-dom';
import App from './src/views/App';

ReactDom.render(<App />, document.getElementById('root')); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

创建目录 src/views/App，在App目录下，新建index.js文件作为App组件，index.js文件内容如下：

import React from 'react';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (<div>App Container</div>);
    }
}
export default App; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

在根目录下创建模板文件index.html

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
    <div id="root"></div>
</body>
</html> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

到了这一步其实关于react的引入就OK了，不过目前还有很多问题没有解决

1. 如何解析JS文件的代码？
2. 如何将js文件加入模板文件中？

Babel解析js文件

Babel是一个工具链，主要用于在旧的浏览器或环境中将ECMAScript2015+的代码转换为向后兼容版本的JavaScript代码。

安装babel-loader，@babel/core，@babel/preset-env，@babel/preset-react

npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D 


    

        1
    

1. babel-loader：使用Babel转换JavaScript依赖关系的Webpack加载器, 简单来讲就是webpack和babel中间层，允许webpack在遇到js文件时用bable来解析
2. @babel/core：即babel-core，将ES6代码转换为ES5。7.0之后，包名升级为@babel/core。@babel相当于一种官方标记，和以前大家随便起名形成区别。
3. @babel/preset-env：即babel-preset-env，根据您要支持的浏览器，决定使用哪些transformations / plugins 和 polyfills，例如为旧浏览器提供现代浏览器的新特性。
4. @babel/preset-react：即 babel-preset-react，针对所有React插件的Babel预设，例如将JSX转换为函数.

更新webpack.config.js

 module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

根目录下创建并配置.babelrc文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
} 


    

        1
    

    

        2
    

    

        3
    

配置HtmlWebPackPlugin

这个插件最主要的作用是将js代码通过

npm i html-webpack-plugin -D 


    

        1
    

webpack新增HtmlWebPackPlugin配置

至此，我们看一下webpack.config.js文件的完整结构

const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: path.resolve(__dirname, 'dist/index.html')
    })
  ]
}; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

执行 npm run start，生成 dist文件夹

当前目录结构如下

可以看到在dist文件加下生成了index.html文件，我们在浏览器中打开文件即可看到App组件内容。

配置 webpack-dev-server

webpack-dev-server可以极大的提高我们的开发效率，通过监听文件变化，自动更新页面

安装 webpack-dev-server 作为 dev 依赖项

npm i webpack-dev-server -D 


    

        1
    

更新package.json的启动脚本

“dev": "webpack-dev-server --config webpack.config.js --open" 


    

        1
    

webpack.config.js新增devServer配置

devServer: {
  hot: true, // 热替换
  contentBase: path.join(__dirname, 'dist'), // server文件的根目录
  compress: true, // 开启gzip
  port: 8080, // 端口
},
plugins: [
  new webpack.HotModuleReplacementPlugin(), // HMR允许在运行时更新各种模块，而无需进行完全刷新
  new HtmlWebPackPlugin({
    template: './index.html',
    filename: path.resolve(__dirname, 'dist/index.html')
  })
] 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

引入redux

redux是用于前端数据管理的包，避免因项目过大前端数据无法管理的问题，同时通过单项数据流管理前端的数据状态。

创建多个目录

1. 新建src/actions目录，用于创建action函数
2. 新建src/reducers目录，用于创建reducers
3. 新建src/store目录，用于创建store

下面我们来通过redux实现一个计数器的功能

安装依赖

npm i redux react-redux -D 


    

        1
    

在actions文件夹下创建index.js文件

export const increment = () => {
  return {
    type: 'INCREMENT',
  };
}; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

在reducers文件夹下创建index.js文件

const initialState = {
  number: 0
};

const incrementReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREMENT': {
      state.number += 1
      return { ...state }
      break
    };
    default: return state;
  }
};
export default incrementReducer; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

更新store.js

import { createStore } from 'redux';
import incrementReducer from './reducers/index';

const store = createStore(incrementReducer);

export default store; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

更新入口文件app.js

import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';

ReactDom.render(
    <Provider store={store}>
        <App />
    </Provider>
, document.getElementById('root')); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

更新App组件

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    render() {
        return (
            <div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick()}>点击+1</button></div>

            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

点击旁边的数字会不断地+1

引入redux-saga

redux-saga通过监听action来执行有副作用的task，以保持action的简洁性。引入了sagas的机制和generator的特性，让redux-saga非常方便地处理复杂异步问题。
redux-saga的原理其实说起来也很简单，通过劫持异步action，在redux-saga中进行异步操作，异步结束后将结果传给另外的action。

下面就接着我们计数器的例子，来实现一个异步的+1操作。

安装依赖包

npm i redux-saga -D 


    

        1
    

新建src/sagas/index.js文件

import { delay } from 'redux-saga'
import { put, takeEvery } from 'redux-saga/effects'

export function* incrementAsync() {
  yield delay(2000)
  yield put({ type: 'INCREMENT' })
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

解释下所做的事情，将watchIncrementAsync理解为一个saga，在这个saga中监听了名为INCREMENT_ASYNC的action，当INCREMENT_ASYNC被dispatch时，会调用incrementAsync方法，在该方法中做了异步操作，然后将结果传给名为INCREMENT的action进而更新store。

更新store.js

在store中加入redux-saga中间件

import { createStore, applyMiddleware } from 'redux';
import incrementReducer from './reducers/index';
import createSagaMiddleware from 'redux-saga'
import { watchIncrementAsync } from './sagas/index'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(incrementReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchIncrementAsync)
export default store; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

更新App组件

在页面中新增异步提交按钮，观察异步结果

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    onClick2() {
        this.props.dispatch({ type: 'INCREMENT_ASYNC' })
    }

    render() {
        return (
            <div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick()}>点击+1</button></div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick2()}>点击2秒后+1</button></div>
            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

观察结果我们会发现如下报错：

这是因为在redux-saga中用到了Generator函数，以我们目前的babel配置来说并不支持解析generator，需要安装@babel/plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime 


    

        1
    

这里关于babel-polyfill、和transfor-runtime做进一步解释

babel-polyfill

Babel默认只转换新的JavaScript语法，而不转换新的API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转译。如果想使用这些新的对象和方法，必须使用 babel-polyfill，为当前环境提供一个垫片。

babel-runtime

Babel转译后的代码要实现源代码同样的功能需要借助一些帮助函数，而这些帮助函数可能会重复出现在一些模块里，导致编译后的代码体积变大。
Babel 为了解决这个问题，提供了单独的包babel-runtime供编译模块复用工具函数。
在没有使用babel-runtime之前，库和工具包一般不会直接引入 polyfill。否则像Promise这样的全局对象会污染全局命名空间，这就要求库的使用者自己提供 polyfill。这些 polyfill一般在库和工具的使用说明中会提到，比如很多库都会有要求提供 es5的polyfill。
在使用babel-runtime后，库和工具只要在 package.json中增加依赖babel-runtime，交给babel-runtime去引入 polyfill 就行了；
详细解释可以参考

babel presets 和 plugins的区别

Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。
这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。
但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。
这个时候，可以采用Babel Preset。
可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。

更新.babelrc文件配置，支持genrator

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

点击按钮会在2秒后执行+1操作。

引入react-router

在web应用开发中，路由系统是不可或缺的一部分。在浏览器当前的URL发生变化时，路由系统会做出一些响应，用来保证用户界面与URL的同步。随着单页应用时代的到来，为之服务的前端路由系统也相继出现了。而react-route则是与react相匹配的前端路由。

引入react-router-dom

npm install --save react-router-dom -D 


    

        1
    

更新app.js入口文件增加路由匹配规则

import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const About = () => <h2>页面一</h2>;
const Users = () => <h2>页面二</h2>;

ReactDom.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route path="/" exact component={App} />
                <Route path="/about/" component={About} />
                <Route path="/users/" component={Users} />
            </Switch>
        </Router>
    </Provider>
, document.getElementById('root')); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

更新App组件，展示路由效果

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';
import { Link } from "react-router-dom";

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    onClick2() {
        this.props.dispatch({ type: 'INCREMENT_ASYNC' })
    }

    render() {
        return (
            <div>
                <div>react-router 测试</div>
                <nav>
                    <ul>
                    <li>
                        <Link to="/about/">页面一</Link>
                    </li>
                    <li>
                        <Link to="/users/">页面二</Link>
                    </li>
                    </ul>
                </nav>

                <br/>
                <div>redux & redux-saga测试</div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick()}>点击+1</button></div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick2()}>点击2秒后+1</button></div>
            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

点击列表可以跳转相关路由

总结

至此，我们已经一步步的，完成了一个简单但是功能齐全的react项目的搭建，下面回顾一下我们做的工作

1. 引入webpack
2. 引入react
3. 引入babel解析react
4. 接入webpack-dev-server提高前端开发效率
5. 引入redux实现一个increment功能
6. 引入redux-saga实现异步处理
7. 引入react-router实现前端路由

麻雀虽小，五脏俱全，希望通过最简单的代码快速的理解react工具链。其实这个小项目中还是很多不完善的地方，比如说样式的解析、Eslint检查、生产环境配置，虽然这几项是一个完整项目不可缺少的部分，但是就demo项目来说，对我们理解react工具链可能会有些干扰，所以就不在项目中加了。

后面会新建一个分支，把这些完整的功能都加上，同时也会对当前的目录结构进行优化。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

部分借鉴自：csdn  作者：郑清

原文链接：

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

在与客户的沟通中，聆听了许多建议，学习到了很多知识，也收到过赞美与批评，在经过千锤百炼过后  总结了一点点经验

首先：

框架选择

    网站css框架选择（简洁，节约成本，快速开发）

    对于一些简单静态网站，展示类网站项目，达到快速开发建站，而又节约成本人力的情况下 选择一些用于css库的框架最为合适，

1.Bootstrap

        Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

        预处理工具  虽然可以直接使用 Bootstrap 提供的 CSS 样式表，但是不要忘记，Bootstrap 的源码是采用最流行的 CSS 预处理工具

        一个框架、多种设备。 你的网站和应用能在 Bootstrap 的帮助下通过同一份源码快速、有效地适配手机、平板和 PC 设备，这一切都是 CSS 媒体 查询（Media Query）的功劳。

功能完备  Bootstrap 提供了全面、美观的文档，你能在这里找到关于普通 HTML 元素、HTML 和 CSS 组件以及 jQuery 插件方面的所有详细文档。

Bootstrap 是最受欢迎的 CSS 框架，被认为是拥有最好的响应性的CSS框架。专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。

2.layui

开源模块化前端 UI 框架

开源模块化前端 UI 框架

      由职业前端倾情打造，面向全层次的前后端开发者，易上手开箱即用的 Web UI 组件库

Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。

   3.Semantic-UI

Semantic 是一个开发框架，可以使用人性化的 HTML 帮助创建漂亮的响应式布局。Semantic UI 旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。

4.Pure

Pure 非常轻量级，经过压缩后不过 3.8KB。这是一个特别为移动端考虑的框架，为了压缩大小，每一行代码都经过仔细考量。当然如果你不使用框架给出的全部模块，体量还可以更小。

5.Skeleton

Skeleton 如其名字，非常小巧，设计简约，麻雀虽小五脏俱全。网格系统，文本，表单，按钮，列表，表格，媒体查询等功能面面俱到。非常适合快速创建简约网站的需求。

快速搭建

为客户节省时间成本， 并满足客户快速建站的需求，开发过程中 使用到css模块化,html也应简洁实用。

手写源生 CSS

在我们最初学习写页面的时候，大家都学过怎么去写 css，也就以下几种情况：

• 行内样式，即直接在 html 中的 style 属性里编写 css 代码。
• 内嵌样式，即在 html h 中的 style 标签内编写 class，提供给当前页面使用。
• 导入样式，即在内联样式中 通过 @import 方法，导入其他样式，提供给当前页面使用。
• 外部样式，即使用 html 中的 link 标签，加载样式，提供给当前页面使用。

我们在不断摸索中，逐渐形成了以编写内嵌样式和外部样式为主要的编写习惯。

读到这里大家肯定有所疑问，为什么不建议使用行内样式？

使用行内样式的缺点

• 样式不能复用。
• 样式权重太高，样式不好覆盖。
• 表现层与结构层没有分离。
• 不能进行缓存，影响加载效率。

然后我们继续剖析一下，为什么不建议使用导入样式？

经测试，在 css 中使用 @import 会有以下两种情况：

1、在 IE6-8 下，@import 声明指向的样式表并不会与页面其他资源并发加载，而是等页面所有资源加载完成后才开始下载。

2、如果在 link 标签中去 @import 其他 css，页面会等到所有资源加载完成后，才开始解析 link 标签中 @import 的 css。

使用导入样式的缺点 - 导入样式，只能放在 style 标签的第一行，放其他行则会无效。 - @import 声明的样式表不能充分利用浏览器并发请求资源的行为，其加载行为往往会延后触发或被其他资源加载挂起。 - 由于 @import 样式表的延后加载，可能会导致页面样式闪烁。

使用预处理器 Sass/Less

随着时间的不断发展，我们逐渐发现，编写源生的 css 其实并不友好，例如：源生的 css 不支持变量，不支持嵌套，不支持父选择器等等，这些种种问题，催生出了像 sass/less 这样的预处理器。

预处理器主要是强化了 css 的语法，弥补了上文说了这些问题，但本质上，打包出来的结果和源生的 css 都是一样的，只是对开发者友好，写起来更顺滑。

后处理器 PostCSS

随着前端工程化的不断发展，越来越多的工具被前端大佬们开发出来，愿景是把所有的重复性的工作都交给机器去做，在 css 领域就产生了 postcss。

postcss 可以称作为 css 界的 babel，它的实现原理是通过 ast 去分析我们的 css 代码，然后将分析的结果进行处理，从而衍生出了许多种处理 css 的使用场景。

常用的 postcss 使用场景有：

• 配合 stylelint 校验 css 语法
• 自动增加浏览器前缀 autoprefixer
• 编译 css next 的语法

更多 postcss 使用场景

CSS 模块化迅速发展

随着 react、vue 等基于模块化的框架的普及使用，我们编写源生 css 的机会也越来越少。我们常常将页面拆分成许多个小组件，然后像搭积木一样将多个小组件组成最终呈现的页面。

但是我们知道，css 是根据类名去匹配元素的，如果有两个组件使用了一个相同的类名，后者就会把前者的样式给覆盖掉，看来解决样式命名的冲突是个大问题。

为了解决这个问题，产生出了 CSS 模块化的概念。

CSS 模块化定义

• 你是否为 class 命名而感到苦恼？
• 你是否有怕跟别人使用同样 class 名而感到担忧？
• 你是否因层级结构不清晰而感到烦躁？
• 你是否因代码难以复用而感到不爽？
• 你是否因为 common.css 的庞大而感到恐惧？

你如果遇到如上问题，那么就很有必要使用 css 模块化。

CSS 模块化的实现方式

BEM 命名规范

BEM 的意思就是块（block）、元素（element）、修饰符（modifier）。是由 Yandex 团队提出的一种前端命名方法论。这种巧妙的命名方法让你的 css 类对其他开发者来说更加透明而且更有意义。

BEM 的命名规范如下：

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */ .block { } /* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */ .block__element { } /* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */ .block--modifier { }

通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免，毕竟只是一个命名约束，不按规范写照样能运行。

CSS Modules

CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的 css 样式。

并且 CSS Modules 在打包的时候会自动将类名转换成 hash 值，完全杜绝 css 类名冲突的问题。

使用方式如下：

1、定义 css 文件。

.className { color: green; } /* 编写全局样式 */ :global(.className) { color: red; } /* 样式复用 */ .otherClassName { composes: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }

2、在 js 模块中导入 css 文件。

import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; 

3、配置 css-loader 打包。

CSS Modules 不能直接使用，而是需要进行打包，一般通过配置 css-loader 中的 modules 属性即可完成 css modules 的配置。

// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use:{ loader: 'css-loader', options: { modules: { // 自定义 hash 名称  localIdentName: '[path][name]__[local]--[hash:base64:5]', } } } ] } }; 

4、最终打包出来的 css 类名就是由一长串 hash 值生成。

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }

CSS In JS

CSS in JS，意思就是使用 js 语言写 css，完全不需要些单独的 css 文件，所有的 css 代码全部放在组件内部，以实现 css 的模块化。

CSS in JS 其实是一种编写思想，目前已经有超过 40 多种方案的实现，最出名的是 styled-components。

使用方式如下：

import React from "react"; import styled from "styled-components"; // 创建一个带样式的 h1 标签 const Title = styled.h1`  font-size: 1.5em;  text-align: center;  color: palevioletred; `; // 创建一个带样式的 section 标签 const Wrapper = styled.section`  padding: 4em;  background: papayawhip; `; // 通过属性动态定义样式 const Button = styled.button`  background: ${props => (props.primary ? "palevioletred" : "white")};  color: ${props => (props.primary ? "white" : "palevioletred")};   font-size: 1em;  margin: 1em;  padding: 0.25em 1em;  border: 2px solid palevioletred;  border-radius: 3px; `; // 样式复用 const TomatoButton = styled(Button)`  color: tomato;  border-color: tomato; `; <Wrapper> <Title>Hello World, this is my first styled component!</Title> <Button primary>Primary</Button> </Wrapper>; 

可以看到，我们直接在 js 中编写 css，案例中在定义源生 html 时就创建好了样式，在使用的时候就可以渲染出带样式的组件了。

除此之外，还有其他比较出名的库：

• emotion
• radium
• glamorous

总结

最后放一张总结好的图。

下一篇我们讲一下主流js框架 与js开发

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

部分借鉴自：知乎 作者：孟思行

原文链接：

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

这篇文章很好，提供了一种“以用户为中心”把自己和项目组成员随时假定为一个用户的身份，去思考，提出一系列问题，把这些问题编号，去一一解决，注重用户体验，以此为基本框架，严格遵守，一旦设立不增加临时的多余的功能，不把没有用户故事的界面元素放在界面上，保证了精简的内容围绕确立的框架中，井井有条。这篇文章值得看十遍。

随着大数据的兴起，数据价值的不断挖掘，图表作为数据呈现与分析的有效手段，正扮演着越来越重要的角色。我们在进行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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务