最近几年以来，大家能看到B端设计趋势已经越来越火热，在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计，让设计出来的图表高大上，符合业务需求，让业务方和总监对你赞不绝口，本文就必须看完和收藏了，因为实在是太实用！

应用设计越来越依赖数据驱动，对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表，但我们其实可以通过遵循一些简单的规则来改变这个情况。

1. 选择一个正确的图表可视化类型

选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。 

2. 根据正负值使用正确的绘图方向

当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。 

3. 条形图总是以0基线开始

删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值B比D大3倍多，而实际上，两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。

4. 折线图应该要清晰体现y轴上的趋势变化

对于折线图，总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势，因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。 

5. 使用折线图时要考虑时间连贯性

折线图是由线连接的“标记”组成，通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的，并且对于较短的时间间隔非常有效，但当数据更新不频繁时，这可能会导致混淆。 

例如: 使用折线图来代表年度收入，如果数据是每月更新的，则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值，而在特定时间实际的收入数字是未知的，所以可能会产生误会。在这种情况下，使用垂直条形图可能是一个更好的选择。 

6. 不把折线图强行”平滑“

平滑的折线图可能在视觉上很好看，但它们错误地反映了背后的实际数据，而且过粗的线会模糊真正的“标记”位置。 

7. 避免使用比例不同的双轴折线图

通常，为了节省可视化空间，当有两个具有相同度量但大小不同的数据系列时，可能倾向于使用双轴图。但这些图表不仅难以阅读，而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例，只是浏览图表，然后就得出了错误的结论。 

8. 限制饼图中显示的切片数量

饼状图是最流行的也是经常被误用的图表之一。在大多数情况下，条形图是更好的选择。但如果你决定做一个饼状图，有2个比较好的建议:

1）不要超过5-7片，保持简单

2）可以将额外的最小段分组到“其他”切片 

9. 在图表上直接标注

如果没有适当的标签，无论你的图表有多好，它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。 

10. 不要在切片上贴数据

将数据放在切片上可能会导致多个问题，在可读性问题上和窄切片上都会有挑战。相反，添加黑色标签能清晰的链接到每个部分。 

11. 保持饼图切片秩序以提升阅读效率

在确定饼片秩序时，有几种常用的方法:

1）将最大的切片放在12点的位置，然后将下一片切片顺时针降序排列

2）把最大的切片放在12点的位置，第二大的放在顺时针相邻位置，第三大的放在11点的位置，其余的切片按顺时针降序排列 

12. 避免随机排列

同样的建议也适用于其他许多图表。不要默认采用字母排序，将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图)，以确保最重要的数值占据最突出的空间，减少眼球运动和阅读图表所需的时间。 

13. 窄的饼图是难阅读的

饼图通常不是最容易阅读的图，因为比较相似的值非常困难。当我们把中间部分去掉，创建一个圆圈图表时，我们腾出了空间来显示额外的信息，但这样牺牲了清晰度，极端情况下，图表就会变得毫无用处。 

14. 视觉效果不要抢了数据风头

不必要的造型不仅会分散注意力，还可能导致对数据的误解和用户的错误印象。你应该避免:

1）3D元素，明暗面

2）阴影、渐变和其他扭曲的多彩色

3）斑马图案，过多的网格线

4）过度装饰，斜体，粗体或衬线字体 

15. 选择与数据性质相匹配的调色板

颜色是有效的数据可视化的组成部分，在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性，所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合，可以创建一个连续的颜色集。

发散调色板是两个连续调色板的组合，中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。 

看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以帮助你生成各种调色板。 

16. 设计的可访问性

根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。

1）在调色板中使用不同的饱和度和亮度

2）把现有配色去色然后检查对比度和可读性。 

17. 关注易读性

确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。

1）选择易读的字体，避免衬线和装饰过度的字体

2）避免使用斜体、粗体和全部大写

3）确保与背景有高对比度

4）不要旋转文字

18. 使用水平条形图代替旋转标签

这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。 

19. 事先选择合适的图表库

如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。 

20. 做成动态图表

帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。 

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

Duoton icon

双色渐变图标

-

1. 双色调多层质感(弥散渐变，直投影，混合模式)

2. 双色调混合模式叠加

Alpha icon

单色渐变透明图标

-

如下图左侧大卡片上面图标应用思路。

Cascade icon

层叠式图标

-

Brand icon

品牌植入

-

备注（因为视频比较麻烦，因此省略了）下面是截图，大家应该能大致感受到

同样多邻国在前段时间更新品牌，并将其LOGO特征符号植入字体中。

同样多邻国在前段时间更新品牌，并将其特征元素植入字体中

Motion icon

动态图标

-

动态图标是一个能提升产品体验的方法之一，也是微交互中的一种，它可以增加产品趣味性，Facebook在评论入口的表情动画就运用了动态图标， 包括苹果Apple Pay支付成功图标动画，Google Assistant智能助手，Messenger中的打招呼动画等等我们可以逐渐发现动态图标比静态图标的表达性更强，更受到青睐，随着硬件升级，这种动态图标运用逐渐在越来越多场景可见到。

备注（因为视频比较麻烦，因此省略了）

文章来源：优波设计   作者：设计TNT
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

很多产品经理和设计师在设计 B 端产品界面的时候不知道该怎么办，今天笔者给大家汇总了一些 B 端典型界面及其设计原则，帮助大家从容应对界面设计，不再不知所措。

Dashboard

Dashboard 页通常作为产品的首页出现，产品内各种重要的数据和信息都会展现在 Dashboard 上。用户可以通过点击 Dashboard 上的卡片或卡片上某条数据，快速链接到详情，这大大缩短了用户获取信息的路径。产品团队也可以通过 Dashboard 页，向用户传递产品迭代、运营活动等内容。

1. 设计原则

模块独立

Dashboard 是由承载不同内容的卡片组成的，每块卡片的内容都要独立，不该交叉。

有效统计

Dashboard 上所呈现的数据最重要的就是该数据是否为用户真实所需，如果统计数据不对用户产生任何价值，那还不如不统计，否则会干扰用户。

短路径导航

了解用户需要使用 Dashboard 的核心目标，为用户通过 Dashboard 达到数据详情页提供最短的路径导航。

2. 工作台

使用场景

将用户需要待办的事项、事项处理的进度等都完整的展示出来，方便用户随时查看，提升用户的工作效率。

核心功能

核心统计数据、待办任务、快捷入口、通知公告等。

设计建议

• 展示与使用角色日常工作相关模块，并且将重要模块放在首屏。
• 总模块数量尽量控制在 59 个。
• 不同的角色需求不同，应提供基于角色的差异化视图。

3. 新手引导

使用场景

当新用户第一次使用产品时，为了减少用户的困难和快速完成用户的任务，新手引导页可以将核心操作链路展现给用户。

核心功能

产品介绍、核心功能使用手册、相关内容指引。

设计建议

• 引导步骤尽量控制在 35 步。
• 引导语尽量简短并阐明要义。
• 可以添加视频学习窗口，帮助用户快速上手。

4. 监控页

使用场景

监控页是数据可视化页面中的一种，它通过一系列对数据高度概括的图表来展现系统的核心指标。指标监控页的使用者通常是管理者（即决策者），他们需要看到系统整体的运行状态，监控全局数据，从而调整自己的决策。

核心功能

关键指标统计。

设计建议

• 展示决策者关注的核心指标，并将重要模块靠前展示。
• 使用合理的图表展现数据。
• 图表配色要符合数据的特性，例如警示用黄色。
• 允许用户可以下钻查看详情。

5. 分析页

使用场景

分析页也是数据可视化页面中的一种，它通过对系统多维度的详细分析来展示系统的情况，从而使使用者可以发现问题，并尽早找出解决办法。监控页重在总览，而分析页重在明细，因此，分析页的使用者通常是执行者。

核心功能

关键指标明细分析。

设计建议

• 展示执行者关注的明细指标，并将重要模块靠前展示。
• 使用合理的图表展现数据。
• 明细数据模块不宜过多，59 个为宜。

表格页

表格页可以处理大量的数据条目，同时可以导航至对应数据的详情页。在表格页中，用户可以查询自己所需要的数据条目，以及对比数据条目、新增数据条目、删除数据条目等。

1. 设计原则

模块清晰

表格页通常由查询区、按钮区、表格区、分页器等模块组成，要保证模块间层次合理与清晰。

数据格式

表格页中最大的模块为表格区，该区域由列组成，列由数据构成，列中的数据格式展现要符合业务及用户的需求，例如“星期三”不能表现成“星期 3”。

数据对齐

对齐方式合理的数据，有利于用户定位数据、分析数据。通常数据对齐方式为数值右对齐，文本左对齐，特殊情况居中对齐。

2. 使用场景

全表格页是最常见的产品界面，全表格页主要由筛选条件、按钮区、表格区、分页器组成。表格区是表格页中的主角，当界面数据只需要一张表呈现的时候，使用全表格页。

核心功能

多字段筛选、操作区、表格区、分页器。

设计建议

• 将重要的字段和用户使用频率较高的字段放置在表格靠前的位置。
• 表格中重要的字段和数据保证让用户可以看完整。
• 表格中的时间、状态、操作栏等，以及其他业务规定的字段，需保持完整展示。
• 表格上方的筛选条件一次性展示不宜过多，建议 3-8 个左右。

3. 左树右表页

使用场景

左树右表页的界面布局基本与全表格页差不多，只不过其多了一颗左侧的树来帮助用户导航。

核心功能

导航树、多字段筛选、操作区、表格区、分页器。

设计建议

• 导航树上的文字尽量展示完整，便于用户定位信息。
• 导航树的层级不可太深，控制在 4 层以内。

4. 上下表格页

使用场景

上下表格页是表格嵌套表格幻化过来的，通常上表格为主表，下表格为子表，子表展示了主表中某条数据的详情。

核心功能

多字段筛选、操作区、表格区、分页器。

设计建议

• 主表数据对应的子表数据需要符合逻辑且展现清晰。
• 若主表和子表均数据量大，则需要都加入筛选条件。

4. 左右表格页

使用场景

左右表格页与上下表格页有异曲同工之妙，左右表格页通常左表为主表，右表为子表。

核心功能

多字段筛选、操作区、表格区、分页器。

设计建议

• 由于表格左右布局，表格列不宜过多，尽量不出现滚动条。
• 左右表格区分要明显，保证信息正确归属。

6. 折叠表格页

使用场景

折叠表格页的出现通常是页面上表格的信息需要分组，每一张表格展现一类信息。

核心功能

分组、操作区、表格区、分页器。

设计建议

• 建议加上分组的标题及描述信息。
• 每个表格为一个模块，建议模块可全部展开与全部折叠。

表单页

表单页是用于信息添加和录入的页面类型，用户根据系统的要求将必填字段信息填写完成，从而提交给系统，由系统接收并输出信息。

1. 设计原则

控件合理

通过选择合理的数据录入控件，及通过合理的信息组织形式，帮助用户可以快速完成数据录入的任务。

明确好用

表单页面中，每个表单项都要做到自身体验的明确与好用，例如针对一些有通用值的表单项建议设置默认值，针对必填项要明确标明，针对表单项标题、错误提示要明确传达含义。

清晰反馈

表单录入完后，允许用户进行返回、取消、清空、保存等操作，并且操作后提供明确的反馈，例如保存成功、保存失败等。

2. 基础表单页

使用场景

表单项较少，表单信息直接平展即可，表单录入任务简单且快速。

核心功能

表单项、填写说明、操作按钮区。

设计建议

• 表单项尽量单行纵向排列，引导用户纵向阅读。
• 在界面空间有限时，表单项可多个组合在一行中，进行多列排列，建议不超过 3 列。
• 表单项对齐方式一致，保证用户视线流舒适，高效完成数据录入。
• 表单整体要保持在用户合理操作范围，居左或居中。

3. 高级表单页

使用场景

高级表单页通常需要用户填写大量的信息，这样大型而复杂的数据录入任务需要被拆解为多个部分进行。

核心功能

分组/卡片分组、表单项、操作按钮区。

设计建议

• 任务的分组需要有层层递进关系，而不是无序的分组。
• 如果任务分组过多，最好不要超过 5 组，在 25 组之间较为合适，可以采用锚点定位的方式来帮助用户定位信息。

4. 分步骤表单页

使用场景

当表单填写有相应的步骤顺序时，采用分步骤表单较为合适。

核心功能

步骤条、表单项、操作按钮区。

设计建议

• 若步骤间有很明确的顺序关系，需在相关位置进行明确的提示。
• 若有些步骤为非必填，建议也做出合理的展现。
• 步骤不宜过多，在 25 项为宜。

5. 带树表单页

使用场景

当表单块归属不同的分类时，需要使用带树表单页去处理。

核心功能

导航树、表单项、操作按钮区。

设计建议

• 分类超过 10 项，且分类标题内容较长时，建议使用树导航。
• 分类带有层级时，建议使用树导航。

详情页

详情页的作用是向用户展示一个对象的完整信息，它的主要作用是帮助用户信息浏览，同时允许对详情页整体的数据或某部分数据发起编辑等操作。

1. 设计原则

层次分明

针对信息较少的详情，平铺展示即可；针对信息量大的详情，需进行合理组织，保证层级分明。

结构相近

针对详情信息的模块化组织，要求尽量模块的结构相似，减少复杂性，降低用户的理解成本。

2. 基础详情页

使用场景

基础详情页信息量较少，信息复杂度低，直接平铺展示即可。

核心功能

详情信息。

设计建议

• 建议呈现在一张卡片中，直接通过标题进行区分。
• 字段与内容要明显区分，不可糊在一起。

3. 高级详情页

使用场景

高级详情页需要展示的内容量较大，且复杂度高，需要拆分为多组来帮助用户浏览信息。

核心功能

卡片、分组、详情信息。

设计建议

• 分组维度要合理，保证一个维度讲一件事情。
• 若分组模块大于 5 项，建议使用锚点定位。

图

4. 可编辑详情页

使用场景

详情页中有部分字段由于业务需要，会进行修改。

核心功能

详情信息、可编辑信息。

设计建议

• 可编辑字段通常有两种情况，一种为常显编辑，一种为点击编辑。用户对常显编辑字段操作时，页面需要对是否编辑过做出适当反馈。
• 可编辑样式尽量统一，减轻用户认知负担。

我们如果能做到对 B 端通用型界面了然于胸，那么在面对用户需求时才能从容应对，举一反三。不断总结和抽象，是我们应对各种需求的不二法宝。

文章来源：优设网    作者：知果日记

目录

• 图标风格汇总

• 图标设计流程

• 案例讲解

• 图标资源输出

01 常见图标风格汇总

• 线性

• 面型

• 线面

1、线性

• 单色

• 双色

• 渐变

• 不透明度

• 一笔成形

• 断点

1.1单色

1.2双色

1.3渐变

1.4不透明度

1.5断点

1.6一笔成型

该风格设计感和个性都极强，很考验设计师对造型绘制的把控，功底不够就很容易导致设计后出现识别问题。所以设计难度较大，且延展性较弱，难以表达复杂语义，使用需谨慎。

2、面性

• 单色

• 双色

• 不透明度

• 晶白

• 磨砂玻璃

• 等轴侧（2.5d）

• 渐变

• 新拟态

• 轻质感

• 明暗质感

• 写实

• 抽象

• 卡通插画

• 像素风格

2.1单色

2.2双色

2.3不透明度

面型不透明度风格，通过调节前后不透明度可以带来较强的空间感，使用场景较广泛。

2.4晶白

晶白严格来说也算质感图标（白色质感）的一种，常见于品类图标设计，通过透明度、投影、渐变等参数调节，使整体立体感和空间感都很强。

2.5磨砂玻璃

又叫毛玻璃风格，是通过背景模糊，或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受，但由于容易与浅色背景相融，造成对比度不足难以识别的问题，所以在使用中需要注意无障设计。

2.6等轴侧

也叫2.5d，有很强的趣味性，及识别度，适合重要入口或运营设计。但这类风格较为卡通，且表现花哨。使用需要注意应用场景及目标人群年龄段，避免干扰信息阅读和不符和产品风格。

2.7渐变

这类风格可以很好的吸引用户注意力，在电商、美食类产品中较常见，主要注意配色干净协调。

2.8新拟态（Neumorphism）

新拟态图标色彩相对单一，与背景融合度较高，通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大，再有这类风格与背景对比较弱，无障设计问题较大。

2.9轻质感

通过大量渐变、投影来表现立体感，整体风格偏年轻化，常见在教育类产品中，使用注意配色干净和谐。

2.10明暗质感

通过调节同一色相不同明度、饱和度来营造前后空间感，整体风格统一。

2.11写实

这类图标特点很明显，有极高的识别度，目前美团外卖品类区入口就是该风格，整体偏年轻化。主要考验设计师造型绘制、技法表现能力。

2.12抽象

通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术（装饰）价值更大，不追求识别度，美观即可。

2.13卡通插画

这类风格既可以做图标又可以做空状态插图，设计美观有特色即可。

2.14像素风格

这类移动端界面较少见，目前只在一个海外电商产品（Jollychic）中看过，还有就是一些像素游戏中，比如「泰拉瑞亚」、「我的世界」。

3、线面

• 线面

• 描边插画

3.1线面

3.2描边插画

4性格

• 粗线

• 细线

• 圆角

• 直角

4.1粗线

力量感、稳重、男性等感受

4.2细线

4.3圆角

安全、亲和、年轻

4.4直角

由于图标风格繁多，所以以上列举并不包含所有图标风格。

02 图标设计流程

• 明确语义

• 关键词详解发散

• 确定风格

• 提取造型

• 创意输出

1、明确语义

图标存在的目的是起引导作用，在丰富页面视觉的同时，帮助用户更快的获取信息（当然图标的使用意义还有很多）。设计师在将文字翻译成图标前，必须先理解其文字含义。因为最终呈现的图标，需要用户一眼能准确反翻译其中含义（艺术抽象、装饰类图标除外）。

在C端设计中，以Tab为例，一些常见文案：首页、分类、发现、我的，这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。以我的工作来说，目前在做一款网站搭建工具，后台常会需要设计组件及对应的图标，比如：滑动商品、多图列表、上拉图文列表这些语义比较复杂的图标，在一定程度上会比较难精准传达文案。

2、关键词详解发散

这一步有点类似情绪版使用，但不同的是：我们需要将确定的词（A)进行详细解释，再将解释文案中关键的词语进行发散，得出一系列相关联的词（A1、A2、A3…）。有时间还可以根据这些词找到对应的图片，再看在这些相关联的图片中，有哪些细节可以传递最开始我们确定的那个词（A）的意思。

3、确定风格

我们可以借助情绪版，根据产品定位和目标用户描述，再结合应用场景，在目前已有的风格中找到符合产品气质，符合当前模块视觉层级的图标风格。

前面我们已经了解了目前常见的图标风格有三大类：线性、面型、线面，其中还有很多细分，比如在线性中又分粗线（沉稳、力量）、细线（品质）、曲线（女性化），还有圆角、直角，每种类型所传递的感受都不同。在创意前期，我们将每个点合理进行随机组合（如下图）即可创造一种更新颖的风格。

4、提取造型

经过关键词详解发散，其实我们已经获得了很细节点，接下来将这些细节点进行合理融合后，就可以得到代表同一语义但形式各异的基础图标样式（此时还只是想法阶段，可以通过手绘方式记录组合形式，不用特别精细化）。

5、创意输出

• 图标设计规范

• 图标设计注意点

5.1图标设计规范

• 常见图标尺寸

• 图标盒子使用

5.1.1、常见图标尺寸

在界面图标设计中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）

5.1.2、图标盒子使用

图标盒子即图标约束网格，来源于Material design。使用图标盒子有利于使我们创造的系列图标保持规范与统一。

5.2图标设计注意事项

• 简洁美观

• 易于识别

• 细节统一

• 像素对齐

• 视觉大小一致

• 饱满透气

• 融入品牌基因

1、简洁美观

图标是否美观，会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中，通常会尽量减少不必要的细节，降低图标复杂度，来帮助用户快速识别。当然图标也有丰富细节的做法，常见在一些重要运营入口上。

2、易于识别

识别度的问题，在最前面明确语义中就有提到过，这里就不赘述。

3、细节统一

在细节中包含：表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等（不同风格图标的细节不同，这里只是列举部分），上述细节在系列图标中都应保持一致。

4、像素对齐

在图标绘制中，需尽量避免坐标位置xy或宽高参数出现小数点，以此保证最终导出的图标是清晰的。

5、视觉大小一致

由于不同图标外轮廓不同，就会导致哪怕在物理大小上相同的图标（假设都是24x24），但视觉上可能还是会给人大小不一致的感受，因此我们需要借助前面提到的图标盒子进行约束调整。

6、饱满透气

图标的饱满透气，不一定需要加入很多笔画（描边、装饰等）细节。而是尽可能在形成风格的同时，简化能影响识别度的关键笔画，通过调节笔画大小、长短、位置使图标达到一个最平衡状态。

以如下途牛_我的页面_功能区图标为例：

图中标红图标就存在饱满度不足，及内部较拥挤的情况，第一感受是看起来不舒适，品质感比较低。除此外，还存在如下问题：

• 图标大小很明显不一致

• 设计语言不统一，有圆角有直角

• 图标风格不一致，有透明度+分割形式（我的保单）、有纯透明度形式（专属顾问、我的收藏）、还有其余单色实心形式

7、融入品牌基因

在图标中融入品牌基因可以有效的提升产品品牌感，作为高阶设计师必备技能之一，常见提取维度：

• 颜色

• 设计语言

• Logo轮廓 

以我之前的豆果美食项目为例，提取到如下细节：

根据提取到的基因，最终得到如下两套风格不同，但语言相同且都具备品牌感的图标。

Logo轮廓：在图标中融入品牌logo外轮廓（Google Play），或根据logo轮廓结合应用特性进行延展（Microsoft）。

03案例展示

1、明确语义

根据文案进行详细翻译，帮助我们充分理解文案。

2、关键词详解发散

释义：有专门的知识或经验，受聘为机关团体或单独个人提供专门咨询的人。

提取释义中关键信息，生成关键词：专业、专人，再根据关键形容词发散一系列具象名词。

3、确定风格

根据产品调性和模块视觉层级以及考虑延展性，初步确定如下风格组合起来是比较适合：

在实际查看中，发现Tab的风格为单色+不透明度+断点风格。

为了和Tab拉开差异，最终确定以如下风格进行组合表现比较符合产品调性：

线性：双色

面性：单色、双色、不透明度、轻质感、明暗质感

线面：线面

4、提取造型

通过手绘或大脑想象进行造型构思，这里我就不展示手绘过程（行吧，我承认就是画的太丑了不敢放）。

5、设计执行

由于不同风格对图标造型构思有所影响，且图标类型很多，不同特点组合起来样式更多。案例精力有限，所以只以线性双色风格做演示，希望大家灵活使用。

这一步就是将手绘图形矢量化，在矢量化创意过程中，我们可能会对手绘的图形进一步简化细节或新增造型，这都很正常。只需注意在整个绘制过程中遵循图标设计规范，以及注意图标设计注意事项即可。

图标盒子使用

创意输出

Tips：

1or2？

最后对专属客服进行多风格尝试，最终效果如下：

附上部分绘制过程中的淘汰稿：

04图标资源输出

矢量格式

• SVG：缩放无损、体积小、支持前端样式修改参数、单色情况下方便前端修改颜色来表达图标状态，减少重复上传。

  
  

位图格式

• PNG：支持透明格式

• JPG：兼容性强，适合大尺寸高饱和度图像

• GIF：动态图标使用，缺点是透明情况下边缘容易出现锯齿。

这里主要介绍静态图标中，svg格式在工作中如何输出给前端同学使用（借助iconfont）。

svg图标交接方式：

1、图标资源优化

在iconfont官方绘制指南中有描述，在导出前需要按如下规则优化图标资源：

2、选中图标导出svg格式

以Figma为例，优化图标资源后，选中图标将输出格式选择为导出svg。

3、上传iconfont

在资源管理下，选择需要上传的位置。

去除颜色并提交：适合单色图标，去除颜色提交可以方便前端使用代码修改参数，减少不同状态图标重复上传。

保存颜色并提交：适合多色图标（注意：在单色情况下，选择保留颜色提交，前端则无法通过代码修改图标颜色）。

最后当我们把图标都上传好后，就可以将前端同学拉入团队项目中开心进行玩耍。

好了，以上就是本篇要分享的全部内容，希望对各位有所帮助。

文章来源：站酷 作者：幺零三

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

1.1 图标的主要类型

理解图标，首先关注的是图标本身的类型，在整个 UI 体系中，图标基本就分成3个大类：

工具图标：包含一定产品功能隐喻的简化抽象图形，代替文字节省界面空间，方便用户理解

装饰图标：主要目的是用来装饰界面的视觉元素，样式大于功能，常用于节日活动中

启动图标：产品的启动图标，即用来在系统中打开该产品的图形按钮，基本以自身 LOGO 为主

在 B 端项目中，应用最广泛的必然是工具图标，而装饰、启动图标却鲜有露面机会。但出现的少，不代表没有，解释工具图标前，我们先优先讲解下装饰和启动图标在什么情况下会出现。

其中，SAAS 类服务就有很多会重点强调品牌、情感化设计的案例，例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。

启动图标则会应用在一些比较大型的项目里，当项目出现了很多下级功能模块或类似插件的体系时，就会采取使用应用图标的方式作为入口。

比如 Figma 也是一个 B 端工具，它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品，一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求，就自然而然会用到启动图标了。

最后，就是我们熟知的工具图标了，前两种图标，在前期画不好不要紧，毕竟这类规格的产品会有经验更丰富的设计或总监坐镇，新手当个切图仔即可……

但是工具图标，重要性就不言而喻了，B 端项目对工具图标的需求非常大，几乎每个组件中都会包含图标。

虽然今天网上有非常丰富的图标素材库，但在形式各异的 B 端项目里依旧是供不应求的，各种行业特有的功能、实物、隐喻，只能设计师自己完成。

B 端设计师在图标设计领域的主要工作，就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。

1.2 B端工具图标的风格

工具图标的应用主要包含两个部分，线性图标和面性图标。

这里再提图标风格，不是把以前的知识点重新讲一遍，而是要强调 B 端图标的特殊性。和 C 端相比，B 端图标的实用属性更高，并不需要过多凸显本身的视觉风格。

所以，工具图标中，使用大量渐变、插画、投影的类型都要排除掉，它们对 99.9% 的项目都只会造成体验的负影响，不要被网上的追波风飞机稿给带偏。

适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可，一定要划分出差异，应该只包含圆润、纤细、尖锐这几种。

很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢？答案是没有差异。

线性和面形的使用，纯粹看设计师在当前场景判断哪个合适用哪个，只要保证对应图标风格统一即可。

不过如果遇到一些比较特殊的情况，比如要表现各类设备的复杂图标，那用线性的做法还是相对合适和简单一点。

1.3 图标的统一性规范

对 B 端设计来讲，独立设计图标的步骤是必不可少的，应该掌握的图标规范还是必须要懂的。

我们虽然没有 C 端那么多风格和技法的拖累，但想画好 B 端图标却多出了其它难点，那就是一个页面中出现的图标实在是太多了。

这就引发了我们要讲的第一个规范要点 —— “统一性”，所有同规格类型图标具有一致性的特征，这些特征包含了：

• 粗细一致：首先使用统一的描边、线段粗细参数

• 圆角一致：使用一致的圆角数值，不要一下尖角一下圆角

• 透视一致：使用接近的透视角度，不要有的侧视有的正视图

• 大小一致：视觉的大小保持一致，有均衡的大小感受

如果不能保证统一性的基本要求，那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标，它们的细节完全不一样，统一性当然无从谈起。

而让整套图标保持统一性，是相当有难度的，其中最难的一点，就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸，但不代表图标实际图形的长宽数值是完全一致的。

几何图形对视觉有一定的欺骗性，有不同的大小体验，比如下方案例（鱿鱼游戏乱入？）：

所以，基于这样的特性，每个图标本身都包含了两层属性，图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小，是透明白的，排版的时候以这个尺寸作为实际的边缘来测量。

而视觉尺寸，则是在占位尺寸下图标图形的实际大小，这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的，我们用占位尺寸包裹它们来方便我们进行统一的应用。

所以，使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然，不同的素材，这个留白也是有区别的，下一个小节就会解释。

最后要声明一点，一套项目中可以包含多个规格（2-5个）的工具图标，比如导航用的图标比普通工具图标更复杂一点，设计师只要保证每种规格保持的统一性即可。

1.4 图标的栅格系统

图标越多，大小的控制越困难，所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。

在 Ant 的体系中，一个基于栅格的图标实际包含3层，背景层、格线层、图形层。

背景层，即图标展位尺寸，需要先确定出这个元素的大小，然后才是里面的绘制区域。通常，栅格系统会为边缘预留 1-4 像素的内边距（出血位），正所谓四周留一线，日后好相见。

格线层，则是使用的栅格线段，也是最重要的部分。格线层通常由 4 个基本图形构成，包含正方形、圆形、水平长方形、垂直长方形。

这四个图形的长宽大小不一，原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列，就可以发现它们的视觉大小非常接近。

这些格线的作用，就是提前帮我们确定好视觉比例，帮助我们快速绘制相同图形类型的图标。

但是，不是完美符合这四个图形要求的图标该怎么办，总不能格线把所有轮廓都给你实现出来吧？

格线的另一层作用，也就是最重要的作用，其实是一个用来做测量的工具，而不是轮廓依据。在几何视觉差中，最基础的大小原理是占用面积越大的图形，尺寸感受越大。所以，长宽一致的正方形大于圆形，圆大于三角形。

所以当我们绘制的非常规图形，和类似格线进行对比时，长宽缺少的一侧，就要由另一侧增加数值来填补它的面积。

比如下图 Ant 官方的电脑图标，它的宽是横向矩形，但是中间区域面积较小，所以增加了高度进行平衡。

再看一些其它的案例

这一步没有固定的参数使用技巧，设计师需要将完成的图标置入到其它图标旁边进行调试，确保尺寸是合适的。

格线只是一个图标大小设置的参考工具，一切以最终效果为标准。

理解完图标的基本规范，就到图标的使用逻辑了，解决一些常见的设置误区。

2.1 图标应该做多大

图标该做多大的，这是目前被问到最多的问题。本来应该是非常简单的一件事，但很多工作多年的设计师也搞不清楚。

仔细捋了捋，罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。

要重点强调，Ant 设计图标的意图，和一般项目的是完全不同的。Ant 作为一套庞大的开源项目，它的图标核心特征之一就是 —— 适应性。

这些图标要被应用到各种不同的设备、显示器、系统中，图标尺寸会用多大，在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成，后续实际应用中的缩放、匹配也就越容易，适应性越高。

但是，在我们自己的项目中，这种做法是完全没有必要的，1024 图标的负面影响包含：

• 像素数过多使得数值的制定难度大大提升，不管是元素尺寸还是描边粗细

• 矢量图形源文件进行缩放很容易发生错位，提前轮廓化会破坏源文件

• 缩放图标后描边的数值往往会出现非整数和 0.5 的状态，虚边问题严重

在常规项目里，一套项目是可以包含不同尺寸和规格的图标的，而不是我们做一套相同风格的图标在整个应用中无差别使用。

这也意味着，每个图标在产品中的使用场景通常只有一个尺寸，不需要去面临缩放的情况。即使需要缩放，也只是这套图标中的少数几个需要，或者相对特殊的项目。

所以，图标尺寸设定，就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适，然后创建同样的数值即可（尽量以4的倍数为标准）。

2.2 素材的正确使用方法

我们知道图标的素材非常丰富，不管是 Iconfont、IconPark 还是 Iconsearch 等网站，都提供了海量的素材。但是只要稍微专业点的项目，往往素材库都满足不了，部分规格的图标还是需要我们自己重新绘制。

所以说图标素材就完全没用了吗？当然不是。

图标的正确用法是作为一种快速试错的参照物，它可以帮助我们实现：

• 参考图标的具体尺寸在哪个数值最合理

• 参考当前场景使用面性还是线性的风格更合理

• 参考图标的设计风格是圆还是尖锐更合理

• 参考相关隐喻的图形样式哪种更合理

在项目的界面设计阶段，我们一向建议优先使用外部的素材，尤其是 IconPark 这种比较统一，还可以快速调节图标样式的工具网站。

这个过程即使素材找不到和寓意一致的也没关系，用相近的图标替代就可以。等到页面布局基本完成以后，最后再集中精力对需要绘制的图标重画一遍（甚至是在开发阶段绘制）。

通过别人的图标来快速匹配尺寸、风格、样式，会帮助我们节省非常多的时间，也有助于我们设计出更专业、美观的图标。

另外，就是针对项目一些偏小尺寸的通用图标，就可以比较放心的应用素材，例如翻页的左右、更多、下拉、搜索等等。

2.3 图标的色彩和状态

图标的尺寸、样式都确定了，最后就是关于图标的色彩和不同状态的制定了。

前面讲过，B 端项目对图标的装饰属性没有那么迫切，所以正常情况下，太花哨的图标是要尽量避免的。彩色、渐变色、投影，都不应该在这个情况下胡乱使用。

常规的图标只要使用中性色即可，而需要特别对待的图标，色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。

当然，如果项目涉及到一些特殊的工具图标，类似工厂、工业领域表达实体设备的拟物图标，可以打破这个原则。但是，同样避免这套拟物图标的每个图标用色不同，尽量只使用 3 种以内的颜色完成拟物的填色。

同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现，部分图标会承担按钮的功能，包含默认、选中两个基本状态。

普通权重的图标，未选中状态可以在默认色彩基础上使用透明度来实现。

高权重的图标，则可以在选中的状态替换色彩，或者更改图标的类型，将原本的线性更改成面形并填充色彩制造反差。

完成所有图标的设计以后，最后一步就是切图和导出了，这决定你的图标能不能被正确运用到线上项目中。

3.1 图标的收纳和命名

在一套专业的 B 端项目中，已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里，而是在规范页面中有统一的整理和收纳。

这种做法的流程是，先在软件的规范库中创建对应的图标组件（ Symbol / Compoent ），然后再在具体页面中应用，方便后续的统一管理和修改。

而在这个过程中，我们也需要对图标有正确的命名方法，来确保团队调用、检索图标的效率。通常，我的图标命名规范如下：

尺寸 / 类型 / 图标名-状态

示例：

48px/导航图标/表盘页-默认

24px/一般图标/搜索-默认

“/” 号的引用主要是方便软件中对组件层级进行划分，而我调用图标的规则势必是先从尺寸开始，再选择对应规格，最后类型和状态。

提前命名也是方便后续我们切图和导出，但要提及一点，图标的命名不要追求英文化，因为我们的词汇量不可能实现正式的英文命名规则，只会写一堆大家都看不懂的单词。

而开发在使用我们的图标切图时，也不会用我们之前取的命名，会根据自己的命名习惯重新命一遍，写个让他能看懂的名字远比用乱七八糟的英文强。

3.2 图标的切图格式

接下来，就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片，然后上传蓝湖发给开发自生自灭了，这是一个非常不合理的操作。

再或者，强行使用 Fonticon 格式，而不管实际情况如何，造成最后实现效果完全不同步或实现不了。

切图是通过前端调用并在浏览器中进行显示的图形，而要被浏览器正常显示，就有必要了解适合使用的切图格式。

图片的格式包含位图和矢量两种，位图是通过记录像素色值的图形格式，假设一张图是 100*100 像素，那么记录 1W 个像素点的色彩，所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式，可以支持自由缩放。

理论上，矢量格式是最佳的图标切图格式，但是它的限制同样有很多，例如：

• 无法记录渐变色

• 导出轮廓容易有错误

• 无法记录拟物图形

• 无法记录投影元素

前面说过，普通项目中同一图标是很少出现一会儿大一会儿小的需求，所以矢量最大的特征无损缩放，往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题，而不是网页端的基本使用。

当一套项目中出现了矢量格式无法覆盖的图标时，那么即用矢量切图，又用位图，就会显得非常的混乱。只有类似 LOGO 等图形元素，才需要考虑 SVG 格式，而不是一看到图标就上。

所以，最适合切图的格式就是位图的 PNG 格式，一方面它是无损的，另一方面它支持透明背景，在切图应用上可以完美和设计稿结合，而这是其它大多数位图格式不具备的特征。

当每次项目完成以后，并不需要通过蓝湖来实现切图的导出，如果切图文件分散在各个项目页面里，那么一定会有很多图标被遗漏，尤其是图标的不同状态切图。

所以，最理想的切图形式，就是将所有图标完成整理和命名以后，一起框选，然后导出成 PNG 格式，再同步给程序员即可。

以上就是关于 B 端图标应用的所有知识点了。后续会将这些内容进行分拆，更新到原子核系列课程中去，会有更细节的案例说明。

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

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

常见的分类是简单的线性分类，缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。

每一个设计需求的背后都必然有其商业逻辑在里面，所以在拿到设计需求后，尝试多去问几个为什么。有什么样的商业目标？为什么做这个功能？用户是谁...当你琢磨清楚这些之后，并以此为出发点的设计方案，必然是有据可依、有说服力的，多角度的参与产品设计也更能体现设计师的价值、培养全局观。

商业目标是个大方向，有了目标就会产生解决方案（需求），当然方案可能不只是一种类型（可能是APP、网站、宣传H5或宣传海报等），设计师负责的去做的可能只是其中的一种。

以我参与过的冬奥会某冰雪 APP TAB 栏的 ICON 风格设计为例：

01

业务沟通，商业目标分析，明确设计目标

这个阶段一定要多去沟通、沟通、再沟通，如果是产品公司，那么需要去和产品、研发、市场等多部门沟通；如果是外包项目，那么就需要和客户多次沟通。退而求其次，也要和负责该项目的直属领导多去沟通，以求更精准的了解商业目标，最终明确设计目标，从而为接下来的设计创意设计指明方向。

该项目为二次设计外包项目，着手出图之前，我和该项目负责人、项目小组成员多次深入的讨论了甲方为了什么目的去做？从而确认了商业目标：“传播冰雪文化，激发人们对冬季运动的兴趣和热情”。

这是个大方向，接下来去考虑用什么形式承载，可能是常见的APP、网站、小程序...（这个形式还需要考虑下目标用户的使用习惯）。以及更具体的有哪些内容分类、个性化主题设计、互动形式等。

最终，该项目负责人决定采取安全策略（作为项目负责人，对投入产出比等全局性因素的考量是极其重要的），先做一款内容型APP，内容分类借鉴、提炼几款APP的精华，暂不考虑独创功能。

虽然有时候结果未必和自己期待的一致，但积极去参与的过程是应该的。。

知晓了商业目标和产品内容，接下来就有方向了。我将设计目标定为：将设计与“水凝化冰、冰积成雪”的物理现象相结合，体现冰雪主旨，烘托冬季竞技氛围。

02

创意分析，设计推演

这个阶段重点在于说服力，或许关系到客户是否买单。由于是内容型产品，内容结构上和其它APP并无太大区别，那么客户会不会想：你们是不是抄了一个软件，改了改就发给我了。。基于此，我在设计创意推演前，做了内容分类由来的分析。

人类接受信息的三种方式：视觉、听觉、触觉，对用户传达冰雪文化采用这三种手段，规划APP内容，视觉：图文资讯、视觉画面；听觉：音视频、直播；触觉：榜单、互动等。

借用“水凝化冰，冰积成雪”物理现象，结合基因创意法，对 ICON 进行设计推演，紧扣冰雪主旨。

通过品牌LOGO取色法，提炼 ICON 配色。

03

设计执行

到了这个阶段，基本的设计思路应该是比较清晰了，剩下的细节打磨就可以自由发挥了。

至此，一个ICON的设计已完成。该过程的最大价值在于：帮助项目理清了整个项目的核心价值、创意思路与设计提案思路，甚至可以由此推测到未来产品的功能规划方向，当然最重要的是协助项目负责人成功拿下了项目。

一个简单的汉堡菜单就可以包括多种不同的样式，可能有的样式甚至没有官方的名称，但因为样式的差异在功能上这些菜单也会出现差异性。

我们可以通过分析这些样式，来思考不同的样式代表着怎样的设计含义和设计目的，不能因为简单常见而忽视了功能的内核。

汉堡菜单

关键词：横条、多个菜单选项

这个图标的样式简洁易懂，通常位于网页和 App 的上下角，用来告知用户这个按钮之外还有更多内容可以探索。

当产品有多个菜单选项时，考虑使用汉堡图标来显示，但尽可能避免在桌面视图中使用。

垂直三点式菜单

关键词：垂直、内嵌菜单

通常位于屏幕或窗口的右上角或顶部，是用于打开带有附加选项的图标，打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。

水平三点式菜单

关键词：水平、内嵌菜单、web

水平三点式菜单同样常位于屏幕或窗口的右上角，用于打开菜单或显示相关项的操作。

因为图标样式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。

九宫格菜单

关键词：子分类、子功能

九宫格菜单通常用于打开同一产品中包含不同子产品或子功能，可以在它们之间快速切换，此图标常位于产品主页的右上角。

过滤式菜单

关键词：过滤、排序

过滤式菜单由三行不同长度的线段水平叠放而成，是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用，或者与全局过滤器结合使用。

汉堡菜单变体

关键词：样式特殊、时尚感更强

作为汉堡图标的替代品，与显示列表菜单的目的相同吗，但是这些样式我们平常见的可能会比较少，更常用在充满现代感、时尚感和艺术感的网站上。

最后

不同的样式可能代表着截然不同的设计目的，常思考这些小而精的细节，是保证产品体验提升的关键。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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