表格和网格一直是产品和后台面板的重要UI组件。然而，即使到了今天，也很容易找出设计不当或用户体验不好的数据表。
今天我们邀请了 Gil Bouhnick ，来跟大家一起聊一聊「如何设计出一个可观的数据表」。
接下来，就进入正题吧～
我使用过 30 多种 SaaS 工具和 SDK ，经常用它们的后台面板看数据，观察到了一些问题并做了反馈。实话说，它们在UI设计和基本功能上，对表格的展现形式还挺糟糕的（虽然它们都是很好的Saas产品）。
鉴于我开发使用表格 20 年的经验，决定为大家来总结一下最基本的处理表格的UI / UX规则了。
本文将从功能、UI设计和美观性，这三个方面来阐述。
1.从排序和筛选开始：
是的，我也知道排序和筛选很烦人，我也讨厌他们，但必须先说它们。除非你打算做一个不到十条记录或者类似情况的精美表格。
排序和筛选不仅是可用性或易用性的功能，更是摘要数据的关键：了解趋势，比较记录，查找特定值，没有排序和筛选就无法完成这些工作。
如果添加基于列的筛选（如日期，布尔值，字符串等元数据）成本太高，那么可以从更基本的内容开始筛选，例如现代搜索框或一些常用的硬编码。
2.确保列的大小可调整
这是一种查看信息的方法，无需深入研究每条记录。
不管你的列宽有多大，也不要将列表固定住，因为有时候用户需要进一步扩展。
3.允许列重新排序
对于大型表格，不能一种大小适用于所有情况。
通过重新排序列，用户可以设置符合它们特定需求的表格。这个相对小的功能可以减少混乱，并节省一些来回滚动。
这时，列的名称体现了大量信息。重新排序列能够使用户可以专注于特定区域并理解小块信息。
4.内联的编辑
有许多用于编辑单元格的UI解决方案：内联框，弹出窗口，可扩展节等。
我不认为上面的方案是最佳的，因为它依赖于功能、数据类型、使用案例。从用户角度出发，我最喜欢的方案是侧视图（快速视图）。
一旦选择一个项目，它就会从侧面弹出的方法。
这个方案，我最喜欢的是它可以保持上下文（与弹出窗口不同），易于使用，即使是在垂直滚动视图中显示大量字段的情况下也效果良好。
5.小屏幕设计
当然，大显示器看表格，设计和开发都会很爽，但是还是有人在用笔记本电脑或iPad！他们又做错了什么！/手动狗头
不停的滚动、缩小的列、隐藏的文本，这些都会干扰用户体验，所以一定要在小屏幕上验证你的设计，并且尽可能使用上一段时间去切实体验用户使用情况（而不是随意测试）。
如果确实很糟糕，你可能需要在解决问题上发挥自主创造力，不过前提是你很了解它。
6.彩色交替行
使用大型数据表时，很容易丢失。
斑马纹的表格可以帮助用户保持其位置，但是彩色的行必须非常浅，否则会引起误导，看起来像选定的行。
使用浅色时，应该将所有内容设置为浅灰色，避免使用黑色线条和深色边框。
7.使用固定表头和“冻结”列锚定一些标识符
我认为在任何屏幕上显示大量数据时，表格都应该能正常浏览。
要浏览数据，用户就需要经常滚动，这意味着需要一些锚点来辅助：
向下滚动时，列标题必须固定（这是最基本的）
第一列应该被锁定（MS Excel和Google Sheets称其为“冻结”），因为，当你水平滚动时，需要该行联系上下文。
一个全行选择选项，用于在水平滚动时标记重要行。
8.设置固定的行高
表格和网格是体现结构化信息的，但是，当表格的列宽、行高不同时，就会变得混乱，信息也就会变得没有体系。
因此，为了整体的可用性和美观性，我觉得不管内容如何，所有行都应具有完全相同的高度。
为了更好地支持多行文本块，请考虑以下事项：
用换行替换为空格，并将整个文本变成一行（通过调整列宽的大小）
将（所有行的）行高设置为2行而不是1行（可以解决某些情况）
使用工具提示（可以用，但是最好不要用）
通过单击行来展开/折叠（刚需）
采用浮动侧视图显示所选行的详细信息。
美学设计可以带来更好的使用感。
以下是通过简单的UI设计修改来消除杂乱并提高内容可读性的几种方法：
9.增加单元格填充
使用空格。
加载信息的表，正是用户想要看到更多空白的地方，即使这会花费他们一些额外的滚动时间。
10.消除不必要的边框
一旦数据结构良好并且留有空白，就该摆脱那些多余的边框，或者让边框线条变得超细且颜色浅。
文章来源：优设网 推荐：墨刀_MockingBot
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编者按：互联网的诞生本就是一个奇迹，作为其中最重要的载体之一，网页就是这个大时代最重要的缩影，相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计发展史，我们可以看到技术、设计与思想的演进，看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。
当我发现设计网页有多投机取巧的方法之时，就逐渐开始对手打网页代码失去兴趣。的确，许多网页设计的问题并不止一种解决方案，但是很少有方案能解决所有的浏览器兼容性问题。最令我纳闷的是，为什么会有做设计和写代码的分工？随着技术的发展，许多在过去难以解决的问题现在可以轻松搞定，但为什么与此同时一些简单的事情反而越来越难以实现？这些问题的答案并不是简单的是与否，对与错，也许我们需要从网页设计的整个发展历程来寻找答案，找到真正弥合设计与代码之间隔膜的原因所在。
温故历史之前，不妨看看2014年最优秀的网页设计：《爱不释手！2014年最佳的20个优秀网页设计》
在互联网真正开始之时，黑色的显示屏仅能显示单色的像素。可以说，当互联网天地初开之时，Web Design 仅仅意味着字符和空格的排列组合。虽然图形化的界面早在80年代初就有了，但在此时普及率并不高。直到90年代，图形化界面才真正进入千家万户，而那时候，才是属于互联网的狂野西部。
能够显示图片的浏览器的诞生，是促使网页设计这个行业诞生的重要先决条件。实际上在当时，最接近于信息结构化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的网页设计书《Creating Killer Sites》讲述了他设计优秀网站的秘诀：在表格中嵌套表格，将静态的表格和动态的表格以巧妙的方式结合到一起。尽管表格本身是用来承载数据的，用来承载内容和图片有点奇怪，但是在那个时代，这种方法依然显得颇为靠谱，并且大行其道。
网页设计所面临的另外一个问题，就是如何保持网页那脆弱的结构。也正是因为这种需求，切片设计（Slicing Design）逐渐流行了起来。设计师创建出漂亮的网页布局，随后开发者将整个设计稿切片，找出呈现设计的最佳方法。另一方面，表格还有一些炫酷的功能，比如垂直对齐，以像素为单位或者以百分比来控制对齐。在那个时代，表格可是近乎栅格系统一般的灵活的设计神器，也正是因此，那个时代的开发者并不喜欢前端的代码。（表格嵌套表格有多乱？）
JavaScript的出现补足了尚且原始的HTML。举个例子，如果你想写个弹出窗，或者想动态修改某些对象的顺序？HTML不行，但是JS可以！不过此时JS的主要问题在于，它处于整个网页布局的顶层并且需要单独加载。很多时候它仅仅被懒惰的开发者用作一个简单的补丁，但如果使用得当，JS可以非常强大。今天，同样的功能如果CSS能实现，我们会尽量避免使用JS。不可否认的是，JS本身确实很强大，前端常用的jQuery，后端的Node.js都是不可多得的好东西。
作为一门新技术，Flash为网页开发者/设计师带来了前所未有的自由，它打破了之前网页设计所固有的限制。借助Flash，设计师可以随心所欲地在网页上展现任何形状、布局、动画和交互，可以使用任何喜欢的字体，他们借助Flash熔于一体。所有的这一切最终会被打包成为一个文件，然后被发送到浏览器端显示出来。这也就意味着，用户只需要拥有最新的Flash插件和些许等待时间，就可以享有一个魔术般的网页。这是启动页面（splash pages）、介绍动画以及各种交互特效的黄金时代。不幸的是，这种设计并不开放，也不利于搜索，还需要消耗计算机大量的运算能力。2007年，当苹果发布他们的第一台iPhone的时候，就决定彻底放弃Flash，也正是在这个时候，Flash开始走下坡路——至少在网页设计领域。
差不多是在Flash崛起的同时，一种更好的网页结构化设计工具CSS诞生了。CSS的基本概念是将网页内容的样式分离出来，所以网页的外观和格式等属性将会在CSS中被定义，但内容依然保留在HTML中。早期版本的CSS并没有现在那么灵活，和许多新事物一样，它最大的障碍在于许多浏览器还没来得及接纳这一新技术，对于开发者而言，这是一个头疼的事情。需要明确说明的是，CSS并非全新的编程语言，它仅仅只是一种声明性语言。那么网页设计师需要学习编程吗？可能需要。但是网页设计师需要懂得CSS么？当然需要。
此刻，在手机上浏览网页本就是一种全新的挑战。设计师除了要为不同设备设计不同的布局，还面临着内容控制的问题：小屏幕上展示的内容要和桌面端一样多，还是需要剥离开来？桌面端网页上闪亮精致的小广告要如何在手机上呈现？加载速度也是一个大问题，移动端设备的网络加载速度不够快，而且桌面端网页会消耗大量的流量。网页设计亟待改进。
第一个重大的改进是栅格系统的出现。经过摸索，960栅格系统最终胜出，经典的12栏栅格被设计师们广泛的接纳，甚至成为许多设计师最常用的设计工具。接下来，各种常见的设计元素诸如表格、导航、按钮被标准化，打包成为可复用的套件，这基本上就构成了视觉元素库，其中还纳入了常见的代码。其中最典型的代表就是Bootstrap和Foundation，它们也使得网站和APP之间的界限逐渐模糊。当然，它们也不是没有缺点，借助这些库设计出来的网页往往大同小异，而且网页设计师要想使用它们还得深入了解相关的代码知识。
惊才绝艳的设计师Ethan Marcotte决定挑战传统的网页设计，它让网页在内容不变的前提下，布局随着窗口和屏幕的变化而变化，并且将这种设计命名为响应式网页设计。网页设计师依然只需要HTML和CSS就可以实现这种功能，不得不承认这种设计理念非常超前。不过大家对于响应式设计依然有些许误解。对于设计师而言，响应式设计意味着为设计许多不同的布局。对于用户而言，响应式设计就意味着这个网页可以在手机上完美浏览。对于开发者而言，响应式设计意味着如何控制好网站图片应付移动端和桌面端，在不同情形和语义下，拥有良好的下载速度和呈现效果，等等。简而言之，就是一个网站能在任何情况下良好展现。至少在这一点上，所有人能达成共识。
设计网页布局总会花费大量的时间，好在这个时候我们开始抛弃复杂的光影效果，重新专注于根本的内容呈现。在此之前，网页设计讲求精美的图片和排版效果，漂亮的插画与周到的布局设计，而简化这些视觉元素之后，就是我们说所的“扁平化设计”。将复杂的效果淡化之后，视觉的扁平化，也促使内容和信息层级的扁平化。充满光影特效的按钮被扁平化的图标所替代，矢量图形和图标字体也开始被大范围使用，网页字体和版式设计的结合令网页视觉更加漂亮。有趣的是，这时候的网页设计开始有返璞归真的感觉。
技术的革新已经开始将网页设计推动到一个全新的境界。在许多设计平台上，设计师只需要在屏幕上移动不同的控件就可以生成整洁可用的代码出来，并且这些代码非常灵活，可控度极高！试想一下，开发者无需担心浏览器兼容性，可以专注于更加实际的问题！
新诞生的概念正在推动网页设计。CSS中新诞生的属性，诸如vh和vw（viewport height 与 width1），就使得网页元素的位置控制更加灵活自由，一次性解决了设计师纠结多年的顽疾。作为CSS一部分的Flexbox则是另一个新事物，它可以快速创建布局，轻松修改属性而无需编写过多代码。
网页设计正在飞速发展，未来还会有越来越多的创新，就让我们拭目以待吧！
文章来源：UI中国 推荐：陈子木
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
什么是表格？
表格页是公认为展示数据最为清晰和高效的形式，它的信息密度极高，就像是一个家庭衣柜，里面很多抽屉，我们需要把衣物整洁摆放收纳，提高空间利用率。
表格页由三个部分，如下图所示：
一、数据查看
数据查看可通过四个维度去自检设计是否合理，分别为信息降噪、呼吸适中、高效易读、详情查看。
1、信息降噪-内容
通过对表头内容删减，我们一眼就可以看到表格的重要信息，从而帮助用户能快速进行数据决策。因此，列数控制在7+-2，列表表头展示更为关注的数据，更多信息在详情中展示。
另外，如果不同用户想看到的信息侧重不同，我们还可以做自定义设置项，让用户自己去选择想要看到的表格内容。
用最少字数给表头做精简，精简到少一字不可。
另外，当遇到少一字都不可的长标题，我们可以定义专有名词，并且给一个解释专有名词的icon，便于第一次使用的用户易于理解。
2、 信息降噪-视觉
去掉不必要的分割线和斑马纹，用对齐和间距来区分列和行，可以鼠标滑上去给斑马纹，增强交互体验。
分割线的样式尽量轻盈，不要抢视觉，突出内容。
去掉不必要的装饰和颜色，为了防止视觉负担，少用面性图标，使用颜色保持克制，删除如果不是点击即可删除，可以不用预警色。
不要出现衬线字体，比如宋体，保持字体统一。
3、 呼吸适中-单元格
定义单元格高度。字号、行高、上下间距进行规范，这里有一个比较常见的规范，将字号设为N，那文字行高就是
1.5N，上下间距为1.2N，单元格高度=内容高度+上间距+下间距。
4、 呼吸适中-列宽
我们将首列和尾列定义为N1，列与列之间定义为N2，随着页面收缩和拉伸，N1保持不变，N2自适应变宽变窄，这样页面会看起来会更均衡，这样会显得有呼吸感。一般定义一个最小值，当表格宽度大于页面宽度时候，固定首尾列，左右滑动。
5、 高效易读-对齐方式
标题和内容一般采用左对齐，更高效的浏览顺序，有长短不一的数字时，右对齐方便比较。操作项一般放在尾列右对齐。
6、高效易读-不做无意义留白
当数据为零时就写上“零”，当没有数据时候就写上“-”。比如开发取不到的后台数据，我们就可以给“-”作为显示，如果得到的数据就是零，我们也要让它显示出来。
7、高效易读-选择合适的翻页器
选择合适的翻页器，利用分页可以缓解服务器的加载压力。无限浏览如果数据过多很容易使页面崩掉，使用功能较为强大的翻页器，每一页默认10行以上，减少翻页次数，增强用户体验，给出默认行数后，可以让用户自定义每页行数，相比跨屏翻页，向下滑动更便利。
8、高效易读-收起低频操作项
超过四项操作项收起来，可以用图标指引下一步操作。关于哪些可以操作项可以折叠起来，可以与产品经理沟通收起低频链接，或者埋点一个月时间查看点击量也可以做出决策。
9、高效易读-默认行数
当单元格内容长度不固定的时候，定义好内容的宽度和行数以及字数，超出显示的字数可以用省略号代替。
10、高效易读-行的排序
默认最近创建的在表格中第一行显示，使用户感知最新情况。也可以带排序的表头，让用户自定义排序。
11、详情查看-入口
入口可以在操作里加详情，也可以把发起人做成可以点击样式，跳转详情，并且可以避免视觉干扰，也就是降噪，当鼠标Hover上去时候，发起人才显示出跳转色，提示可点击状态。
12、详情查看-交互方式
第一种是用弹窗的形式。第二种是第一种的延伸，当内容过多时候可以考虑抽屉样式。这些交互的共同有点就是没有脱离原页面。当详情内容较多且需要编辑时候，我们就考虑跳新页面，使用新页面进行承载。(这里有个细节，新开tab页可以打开多个详情页，如果覆盖原页面则只能打开一个详情页，并且不能同时查看原页面和详情页。所以我们要根据具体场景、业务需求去设计)
二、数据过滤
数据过滤由搜索，筛选和标签页构成。
1、搜索
搜索可分为模糊搜索和带标签的搜索。工作中常用的搜索为模糊搜索，优点是只要有相关的内容都会搜索出来，减少了精准搜索带来的记忆负担。缺点是容易把不相关的信息也带出来，例如搜索手机号，把相关编码也匹配了出来。带标签的搜索优点是搜索匹配精准度高。缺点是每次只能对单一条件进行搜索，当用户要搜索的时候都要去切换选择信息，多了一个步骤。另外，在实际工作中，可以通过埋点或者调研，如果搜索框搜索手机号频率较大，我们可以把手机号设置为默认选项。
2、筛选
筛选框可以分为下拉筛选和平铺筛选。下拉筛选的优点是空间利用率高，起到了很好的收纳作用。缺点是无法直观看到所有筛选项。平铺筛选优点是操作效率高，筛选项一目了然，支持输入更多筛选条件，可以自定义输入。缺点是空间利用率低，不适合选项太多的情况。如果用户点击其中一个选项概率最多，我们就可以将点击率高的一项作为默认项，然后选择第一种下拉筛选框。如果用户点击每个选项概率相等，在空间允许情况下我们可以平铺出来。
当筛选项过多时，信息排序应是用户目标优于业务逻辑，即排序应该考虑用户的使用习惯。例如当用户查找订单时候，第一反应都是搜索框输入，而一般通过价格过滤较少的应该放在末尾。
当然，我们还有更多优化空间，当筛选项过多时，我们可以默认折叠低频筛选项。折叠哪些筛选项还是得基于用户习惯，可以通过数据埋点或者用户调研得到用户使用场景。
当通过数据埋点或者用户调研发现绝大多数用户只需要用到搜索项，那么我们就可以只保留搜索框，其他选项全部折叠到高级搜索里面，当点击高级搜索时候出现一个弹窗，既可以保留更多筛选内容，又可以使页面不会看起来很拥挤。
(当弹窗内容选择完毕时候，高级搜索按钮会呈现高亮颜色，未选择更多筛选内容时候则呈现默认态。）
3、标签页
标签页是比较常用的数据过滤方式，切换样式包括基本样式、卡片样式以及胶囊样式。一般和时间、状态的流转有关。
同样我们可以通过数据埋点或者调研，将用户最关注的选项设置为默认选项，减少用户的选择，提高用户体验。例如下图，用户更关注的是销售中的商品，即将到店的客户，以及即将发货的商品，所以我们将这些选项作为默认项。
三、数据操作
数据操作从控制范围可以分为单行操作、批量操作和全局操作。从操作属性可以分为新增数据、编辑数据和删除数据。
当从产品那里拿来一个原型图堆叠很多操作项，我们就可以根据控制范围来区分判断，从而明确摆放位置。单行操作可以放到表格里，批量操作根据亲密性原则放在左上方，这样可以离打勾矩形近一些，如果有利于用户操作，也可以放在左下方。全局操作则可以放单独一行，使得层级更加清晰。
调整后，我们发觉虽然解决了多个操作放一块的行为，但是层级还是不够清晰，我们可以通过割裂板块或者板块颜色不同来调整，使得识别性更强。
后记
B端设计强调的是在好用的基础上让页面变好看，所以更考虑用户体验。所有设计方式不局限与一种，只要操作上是顺手，业务上是合理的，都是优秀的设计。如果一个页面占据半屏都是筛选项，那么我们就得好好反思，因为所有筛选项不可能都是高频操作，接下来就需要去做数据埋点并进行页面优化了。另外，一张只有筛选项和表格的页面，表格数据查看区域建议占整个页面的百分之六十到百分之七十，这个时候浏览起来是比较舒适的。
文章来源：UI中国 推荐：最多三分糖
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，下面跟大家分享后台中的表格和表单的设计细节。
当接到一个全新的网页后台项目时，首先确定设计风格，然后考虑这个后台尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，除非有规定，否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然，不管选择什么尺寸，都得基于做好一个后台而开展工作。
如何定义一个后台是好的？领导说好，用户说好，你自己也觉得好，那应该就是好的。大部分情况下产品已经定制好了每个功能模块，UI上只需要对着原型加以美化，如果你是这样做的，那么做出的东西一定会让人觉得有问题但是又不知道问题在哪里，总是想让你改。
跟产品经理好好沟通，他们只是把功能模块设计出来而已，并没有设计这些模块如何呈现，如何操作，如何结合，如何分类等等。交互上在后台设计很重要，如果有专业的交互设计师，这些可以交给他们，毕竟，交互设计的收入比UI要高。然而在很多中小企业，产品原型直接给到设计是很常见的。当缺少专业的交互设计时，不要让产品觉得我们只是按照他们的原型做美化，那跟美工有什么区别，不是看不起美工，美工的全程是美术设计工程师，很高大上的职称，但是大家还是不太愿意这样被称呼吧，可能觉得头衔套太大压力会很大吧。事实上，UI本来就应该具备基本的交互技能。
风格选定是很客观的，需要经过产品经理/领导确认，如果他们很相信你的实力，你得说出足够充分的理由，为什么要选择这种风格，而并不只是看起来更高大上或只是个人喜欢。
本人对后台网页设计的风格理解，大致可以分为三类：纯白背景风，轻淡背景风，深色背景风。在后台开始设计之前，你最好先选定其中一种风格，因为后面的所有元件的设计，都得基于这个风格来设计。刚刚好，在早些时间就已经发布了一个后台的三种风格界面设计的作品，大家可以看出每个模块的搭配和区分：
纯白背景风：线框/轻淡色（灰）背景（文字一般采用黑色）
轻淡背景风：纯白色块背景（文字一般采用黑色）
深色背景风：带有透明度的纯色背景（文字一般采用白色）
设计过程是很主观的，所有设计参数都取决于设计师，但是要严格按照设计规范，并且让所有设计看起来和用起来都是合适的。
全屏响应式+轻淡色背景风是目前很主流的设计，也是很保守和安全的设计。对于轻淡色的HSB色值，可参考：H:0-360；S:0-5；B:90-97，当然没有绝对大部分情况用的浅灰是最多的，如H0;S0;B93-95。
以下将依据这个设计风格做例子展示。
一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，我把这些称为元件。这里主要分享的是构成后台中的模块和元件设计中的细节。下面重点跟大家分享表格和表单的设计。
为了避免在设计后台时一个人在YY，请保持左跟产品沟通，右跟前端沟通，这点非常重要。或许很多朋友在接到项目的时候不知道从何做起，会在网上寻找一些相关素材，然后会看到很多很炫的风格样式，像是各种各样的数据/图形展示，各种各样的统计曲线图，还有各种各样的展示动效，真想拖到自己要设计的后台。
如果合适当然可以，然而，很多情况下，统计分析一类的图表设计，产品已经有很多现成套用的模板，你可以做的很炫，但前端不一定会按照UI效果图来制作。从技术上来说，没有前端实现不了的效果，你真的不必怀疑前端的实力。所以，保持设计跟前端的良好沟通，更能提高工作的质量和效率，并且，很多时候口头/文字描述如何展示，是淡入淡出，还是弹出等等，前端是能理解的。通常地，做动效只是产品的一种展示，而并不是产品的本身，就当自己练手做动画吧。
一个典型的表格(table)包含标题（表头单元格th），内容（标准单元格td），通常都是一行行(tr)展示。设计时，应该将标题和内容区分，比如标题文字加粗/颜色加深/字号加大，或标题背景加深。因选择淡灰背景风，一般用白色块区分的原则，表格设计也尽量不使用线框，然而一行行的标准单元格如果都是白色的就不便于预览，因此可以隔一行给背景设置比主背景更淡的背景。标题和内容一般有两种对齐方式，居中对齐，居左对齐，整个站的列表只选择一种对齐方式保持一致性。为了更简洁显示，我们还可以把每一列的间隔线去掉，但并不意味着间隔不存在。每一列的文字都不要贴边，给前端标记间距（内间距padding）值，告诉前端鼠标点击表头单元格的空白地方仍然可以拖动该列的宽度，拖动宽度时保持每一列的最小宽度并且标题仍然完全展示。
我们都遇到过这样头痛的问题，当列表字段太多，一屏无法完全展示，这时应该怎么做？给表格设计一个左右滑动的滚动条？如果内容真的太多并且已经确定，这也未尝不是一种办法，但是，重新设计过表格的字段或许会更好，这个时候应该跟产品好好沟通了。有以下方法：
因为每个列表的宽度是可以拖动的，我们不能决定其固定的宽度，但每一行的高度可以设置一个值，建议所有元件的高度、宽度、间距的数值参数都设置为偶数。
如果列表的数据很多，一般都会设计page控件，但是也有一些列表会设计点击加载更多，或者直接滑动滚动条加载更多。另外一种情况更常见，即设计固定高度的列表，一页最多展示5/10/20…条数据，不管多少条，它的高度都是相对固定的。然而有时候数据太少只有一两条，这个时候仍然要固定默认最多展示条数的高度，如图：
那么问题来了，在响应式设计当中，可没有什么参数是固定的值，一般都是用百分比来设置。因为默认显示的数据条数在任何宽度的情况下仍然保持不变，因此当列表宽度缩小时，内容出现换行会增加高度而拉高整个列表的高度。值得注意的是，当其中一条数据的内容有出现换行而又有其他数据没有出现换行的时候，每一行的高度都应该按出现换行的且最高的高度保持一致，并且内容仍然保持垂直居中显示。另外，当前端做成这种响应式的列表时，一般不再让鼠标拖动列的宽度了。
当宽度拖到第三种情况，按钮也出现了换行，那每一行的高度都应该按照这个高度保持一致，即使有一些数据只有一个按钮/地址并没有出现换行，如图：
当然，如果你不想让内容出现换行，就可以用上面说的那三种方法来实现了。
不要再说为什么别人做的表格那么高大上，明明自己做的效果图还挺好看，为什么实现出来却那么丑，当你了解这里面的各种参数和逻辑，并且很好的跟前端沟通，参照以上规则，不管再复杂的列表都可以做的得心应手并且得以实现。
在后台设计中，表单出现的频率并不低于表格，甚至可以说几乎所有类型的网页都会出现。比如登录注册、信息录入、搜索、选择器等等。常见的表单有输入框、普通按钮、开关按钮、单选框、复选框、下拉菜单。
一个输入框，通常有标签名称label、提示信息placeholder（输入信息后提示文字消失）、初始值value（需手动删除）。如果是必填表单，在适当位置（标签的前后，输入框后）加上红色*号（或其他符号）。
一些有字数规定的输入框，可以增加一个剩余字段提示
事实上，在设计表单之前，我们就要先对表单的标签进行优化，标签字段尽可能的简约。每个组的表单，标签都必须是对齐的，输入框/选择框也应是对齐的。当这个组的表单的标签字数较少并且较对应时，可以采用左对齐的方式，并且最长标签的名称离输入框有margin值。
另一种情况，也是更经常遇到的情况，当一组表单的标签很多时，某些标签字段不能更好的简化，标签的字段都不对应，这个时候可以采用右对齐的方式，这种方式更灵活。
当一组表单的标签太多时，请跟产品沟通并对其进行分类。
有些表单是有逻辑/顺序的，比如地区的选择、出生年月与生肖/星座的对应等等。例如，在选择省份之前，市区是不可操作的，在UI上做灰度显示不可操作。除了灰度代表不可操作，透明度也可以起到同样作用，这种方式也可以运用在按钮上。
带有识别功能的输入框：
当输入有误时，尽量避免弹出框提示，可以直接对输入框设计不同的状态显示默认状态、选中状态、错误状态、成功状态。
通过以上方式设计的一组信息录入型的表单设计，如图：
表单的设计可以单独出一篇更详细的文章，还有筛选/选择器一类的表单，这里就不一一描述了。
弹窗在后台的出现频率非常高，其强度一般分为三种，弱弹窗、强弹窗、重弹窗。字面上已经很好理解，轻弹窗，一般鼠标经过的时候即可出现而不用点击，比如提示说明，显示更多信息，鼠标移过后立即消失，它不会影响下一层（当前页面内容）页面的视觉效果和操作，因此这个弹窗通常会设计一个浮动带有阴影效果的框。
而强弹窗则是一个对话框，它暗示你必须对这个对话框进行操作后才可以离开，如确认信息、错误提示信息。而重弹窗更像是一个新的页面，比如弹出的列表，详情，表单等。这两种弹窗通常是点击某一个按钮/经过某一个操作触发的。这两种弹窗一般会对下一层页面的视觉做蒙版处理，比如加上一定透明的黑色/白色，给下一层页面的内容做模糊滤镜等等。
当然，这三种弹窗式可以结合的，针对不同场景使用不同的弹窗设计这点非常重要，这直接关系到用户体验效果。你是否可曾遇到过使用一款产品时，动不动就弹窗，并且需要去点某一个按钮才可以关闭。
任何一种场景在设计上都可以得以解决，什么情况下使用什么弹窗设计，或者有时候必须使用强弹窗，但是又不想让用户操作关闭，我们可以设计几秒后自动关闭，或者点击弹窗以外的区域直接关闭。
弹窗还有两种主要的表现形式，一种是顶部有关闭按钮，另外一种是直接点击确认按钮或者读秒关闭。在保持规范性的同时，尽量避免按钮功能的重复，比如一个提示信息必须让用户点击确认按钮才可以关闭，那么就使用没有顶部关闭按钮的设计。对于重弹窗，一般都会采用顶部有关闭按钮的设计。
弹窗并不是后台的专利，它在移动端更高频率的出现，例如活动页面的弹窗，趣味性就显得更重要了。
这篇文章主要跟大家分享的是，当开始网页后台项目设计的时候，保持跟产品和前端的良好沟通。确定风格后开始设计，并分享了3个主要的点：
后台还有其他元件设计，欢迎大家共同探讨。
文章来源：优设网 推荐：程远
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着大数据的兴起，数据价值的不断挖掘，图表作为数据呈现与分析的有效手段，正扮演着越来越重要的角色。我们在进行 B 端平台设计时也在思考：如何让图表清晰的传达信息，同时带来美观的视觉感受。
为了达到清晰传达和视觉美观的目标，我们结合实际项目，进行大量探索及思考，梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法，涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。
图表能够承载大量数据信息，同时视觉元素较多，如果只是凭借设计师的审美喜好进行视觉设计，没有整体信息读取考量，可能会导致重要信息未能凸显，降低用户读取效率。
为清晰传达信息，进一步提升读取效率，我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度，将图表元素分为三类，分别为“底层元素”、“中层元素”和“顶层元素”，并依据不同视觉强度分别设计三类元素。底层元素最弱，顶层元素最强。通过这种方法，梳理图表元素的前后关系，能够清晰把握元素视觉层次，保证信息传递效率。
1. 底层元素设计
在各类图表中，我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰，最大程度突出主图形，底层元素全部使用浅灰色进行设计。我们发现，当元素与背景颜色的明度对比在 1.2:1 时，人眼较难看到元素；当对比度在 2.0:1 时，视觉强度过强，易吸引用户注意力。通过元素视觉强度的调研及视觉尝试，最终确定元素与背景对比度在 1.6:1 左右，视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀，只在需要查看时可以被发现。
2. 中层元素设计
中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素，是图表中表达数据的关键元素。与底层元素相比，中层元素采用更低明度与更高饱和度的数据色来表现，使元素从页面中凸显出来，保证可读性。同时在样式上适当加入渐变、描边等样式，丰富视觉层次，带来美观的视觉感受。
3. 顶层元素设计
我们把顶层元素定义为图表高亮信息，内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出，使用深灰色、强调色等强对比度样式，并辅以动画、投影等手法保证明显的视觉强调效果，保证顶层信息最有效的传达给用户。
4. 最终效果
通过层级梳理，并绑定元素重要程度和视觉强度的方法，设计后图表主次信息均按重要程度进行对应视觉强度的展示，让用户能够在第一时间接收到最重要的信息，提升信息读取效率。
图表排版是指各元素在图表中的尺寸及布局等，对于 B 端后台类产品来说，不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验？我们经过大量讨论推敲，梳理出一套针对 B 端后台类产品的排版规则，力求保证用户图表的使用体验。
1. 图表尺寸
图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大，例如巨量数据的图表挤在名片大小的区域例显示，这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景，并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸，针对不同尺寸优化图表的信息展示密度，以达到高效读取信息的目的。
“迷你图”尺寸最小，舍弃了 Y 轴等不必要信息，利用小面积展示最关键的图表信息，并控制数据密度，保证信息高效读取。
“中号图表”尺寸受限，限制坐标轴刻度数量和数据的密度，例如曲线图数据点不高于每 4 像素 1 个数据点，Y 轴坐标刻度不超过 5 个，以确保信息密度不过载，这类图表尺寸通常用在针对某大类内容进行多方面检视时。
“大号图表”尺寸最大，不限制数据信息密度，给予最全最详细的展示，这类尺寸通常用在数据详情页等详细分析场景中。
最后考虑到多图表混合排列时，饼图、地图等大面积填色图表，相较折线图等描边型图表，视觉感受更加膨胀。我们缩小了填色类图表的实际高度，保证多种图表混合排列时，视觉感受的均衡。
2. 坐标轴
坐标轴在图表中出现的频率较高，那么坐标轴常见的设计问题有哪些呢？
第一是横纵坐标轴的刻度出现过密情况。
如果坐标轴所承载的是连续数据（连续数据指可量化的，连续不断的，在区间内可任意取值的数据，如时间、金额、人数等），设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据（离散数据指不可量化的，无关联的，不可在区间内任意取值的数据，如分类、软件版本、省份等），可采取增加坐标轴缩放功能解决。
第二个常见问题是刻度的说明文字过长。
如果是 X 轴（横轴）文字过长，除了在可控范围内减少刻度，还可采取文字倾斜 45°~90°的办法(如文字全部为中文，可用竖排代替倾斜 90°)，缓解信息过密看不清的情况。
如果是 Y 轴（纵轴）文字过长，需联合研发一起调整数据的单位，比如把“元”调整为“百万元”。
如果不能调整，那就要根据所使用的图表库有针对性调整。例如常用的 Echarts 图表、D3 图表等开源图表库，需要提前预估刻度文字长度并预留出来，否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是 AntV 等可自适应的图表库，则不必提前处理，图表库会自动按刻度长度进行整体调整。
3. 图例
图例作为图表中不可或缺的部分，在各类图表库中位置不尽相同，由于不同图表样式差异很大，图例的位置需整体考虑并适当布局摆放，但在同一产品或页面内，过于随意的摆放图例，会导致页面统一性较差，同时增加用户的浏览成本。我们团队所负责的 B 端商业产品矩阵，作为面向用户的产品集合，产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题，我们基于业务特点，针对 B 端商业产品矩阵制定了图例布局指导原则。
我们以提升屏幕信息密度为目标，分析不同场景的页面排布，制定了顶部和右侧两种较为宽松的指导原则，供设计师在没有明确的更优方案时选用。
当图表是左右两端对齐的类型，例如折线图、柱状图时，建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布，减少占用空间。当图表本身左右都有空余空间时，例如饼图，建议将图例放置于图表的右侧。也能够节省页面的空间。
色板作为常见的数据表达手段，能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试，梳理总结出图表色彩的两个关键维度：辨识度与统一性。既需要颜色间突出强烈可清晰辨别，又需要颜色整体能形成统一风格，以达到清晰传递和美观的目标。如何平衡辨识度与统一性，是我们遇到的难题。
1. 辨识度
辨识度在图表中有两方面：颜色与页面底色的辨识度，各颜色之间的辨识度。对于第一种，我们采用控制颜色的明亮程度来确保色彩辨识度，尤其对于黄色、青色等本身较亮的颜色，降低颜色的明度，确保在浅色背景下颜色可辨识。
对于第二种也就是各颜色之间的辨识度，通过实验发现单纯的颜色色相变化，例如红色与橙色的区分，人眼不容易分辨。所以采用了色相变化+明度变化的方法，即深红色与亮橙色，深蓝色与亮紫色等，这样用户能在第一眼就明确分辨，保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中，运用欧几里得距离公式测算颜色间的距离长短，来衡量各颜色间色差数值。颜色间距离越远代表色差越大，利用数据辅助衡量辨识效果。
2. 统一性
色彩统一性的作用在于确保图表整体风格一致，色彩搭配舒适，从而带来美观、统一的视觉感受。为达目的，我们首先提炼商业产品设计风格为明亮、强对比，其次把设计风格转化为色彩数值。经过实验，把颜色明度限制在 50%-70%，把饱和度限制在 75%-85%，并在区间内不断波动。这样既保证了色彩视觉感受的统一，各颜色间又能够有清晰的辨识度。
3. 颜色量化与工具
量化颜色，将色彩转化为数值，利用数值来验证设计师的「感觉」，能够保证方案合理性，保证设计质量。但通过尝试，我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料，我们最终决定以小众的 HCL 色彩模式来衡量色彩。其中 H 表示色相、C 表示饱和度、L 表示明度。HCL 区别于传统的 RGB 或 HSB 模式，它能够将人眼对颜色的感知精确的量化为数值，例如黄色相比蓝色明度更高，都能如实的反馈到数值上。也由于此特性，HCL 模式在诞生距今不到 20 年间，已被一些先锋设计师用于数据可视化的呈现中。
但是 HCL 作为小众色彩模式，目前设计软件鲜有支持，造成了 HCL 色彩不直观、不方便调色等的问题。为解决此问题，我们已初步完成智能配色程序，只需输入品牌色，就能自动生成图表色版，并在风格上与品牌色匹配，达到整体色彩的统一。我们也将一套调配好的色板及 HCL 实用小工具附在文末，帮助大家直观的查看和使用 HCL 模式颜色。
数据价值就像不为人知的宝藏，隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙，是发掘数据价值的强有力武器。通过对图表的不断探索优化，我们希望能够最大化数据的价值。通过图表，让数据最直观的展现；通过图表，让其背后的规律浮出水面被人探知；通过图表，让 B 端不再有难懂的数据。
附：色板及 HCL 工具
文章来源：优设网 作者：百度MEUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图表是数据可视化中最常用的一种表现形式，一定要吃透它。
随着互联网数字化越来越完善，数据可视化这个词的使用频率也越来越高，而图表是数据可视化中最常用的一种表现形式。无论是工作汇报还是后台设计，都离不开图表的使用。然而关于图表类相关的资料太零碎了，不成体系，对于初学者非常不友好，本篇文章我从图表的祖辈开始，把它都给挖了出来，希望对你有帮助。
图表的定义：可直观展示统计信息的属性，对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观、形象地可视化的手段。
英文叫法：Chart。
用户对图形的敏感程度远远大于文字，所以产品就需要把数据信息可视化，用简单的图形表示出更多的信息量，而图表是数据可视化中最常用的表现形式。
接下来我们来介绍图表的具体构成及元素解析。
图表是由：标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴组成，每一个元素都有它存在的意义。在实际使用中不一定非得把元素全部展示出来，精简化显示想要展示的内容即可。
顾名思义，标题就是图表的名字，标题是必不可少的元素。标题的内容一定要言简意赅，不要太长，能两个字写清楚绝对不用三个字。
标题的常用位置有 3 个：左上角、顶部居中、底部居中。
一般情况下，标题字号 / 色值要突出一些，用户第一眼看到 chart 的时候，要清晰的看到这个图表是做什么的。
特殊情况下，如果需要对标题有额外解释的话，两种展现形式：
图例的组成
颜色、名称、数值、单位。
图例的展现形式
圆形、开关、矩形、鼓包线、实线、虚线。
图例的位置
从左至右、从上至下。
图例的作用
图例的颜色选择
同一组图例中，不要出现相近的颜色，否则在图表显示中分不清彼此。
产品使用中，要规范图例颜色使用，一般分为两种：
图例过多时如何展示
共用图例
如果多个 chart 的图例一样，可进行合并，减少冗余图例。
图例省略
如果 chart 中只有一个图例的话，可省略。
图例名称限制
根据不同使用场景，为了更好的展示效果，要给图例名称设置一个最大值，超过最大值后省略展示。
坐标轴分为 X 轴和 Y 轴，常规情况下为 1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。
刻度值代表的意义
坐标轴使用规则
是否带单位：
对齐方式（常用，但非必须）：
刻度值过多时如何显示：
刻度值的选用一定要是同一个规律，禁止同距离的刻度值代表不同数据。
刻度点的样式使用规则：
刻度的线朝外。
数据的展示是 chart 中最为明显的地方，可以说如果只显示一个元素的话，就是他了。
数据展示的使用规则：
网格线的作用
呼应坐标轴，美观度。
网格线的使用规则
网格线使用实线居多，尽量不用虚线。
使用场景
横、纵、横纵结合、无网格线。
通常情况下，提示信息用来标识出 chart 中重要点的数据信息，需要注意的是：重要信息尽量简化，信息量不要太大，言简意赅就好。
根据不同产品的使用场景，有的时候会用到阈值，当达到某个阈值后，就会触发某种联动。这个时候就需要有个水位线了，它起到警示的作用。
形式有两种，实线和虚线，颜色的选取则取决于产品的警告级别。
水位线可以是一个，也可以是多个，视情况而定。
时间轴可以灵活地调节刻度值的上下限，从而更精确的看到自己想看的数据。
时间轴的功能及限制没有不是很复杂，所以就不过多解释了，需要用的话就用。
定义
折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。折线图是通过线条的波动来表示数据的波动，主要体现的是数据随着时间的推移而变动的图表。
使用场景
常用于观察一段时间内数据波动的浮动变化，比如：一天内内存的使用情况。
使用建议
Y 轴刻度值选择要合理，当前显示的数据波动要最大化的显示；
重要节点可以单独做重点标注；
数据拐点要平滑，不要太锋利。
定义
面积图和折线图比较类似，区别在于面积图把数据区域做了个面积划分，让数据的显示更加清晰。
使用场景
面积图展示尽量不要超过 3 个图例，否则数据多的情况下，数据的展示会特别乱，影响观看。
使用建议
面积区域要和折线的颜色用统一色系，不要换色系；
面积区域一般要比折线颜色浅一些，这样视觉上更加让人舒适；
如果多条数据情况下也用面积图的话，面积区域尽量使用透明度，否则有的数据会被遮挡看不到。
定义
柱形图，又称长条图、柱状统计图。用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。
使用场景
使用建议
柱状图的厚度不要是固定值，要做成自适应来应对不同尺寸的分辨率显示；
厚度与间距的对比要合理设计；
可使用小圆角，千万不要用大圆角，太丑了……
如果想要强调某个柱子的话，可以进行颜色区分，但是柱子颜色不要超过 2 个（同一维度下）；
如果想要在柱子上显示数值的话，使用建议（下面的顺序为推荐顺序）：
定义
饼图仅排列在工作表的一列或一行中的数据，它是有一个总和数据，方面查看每个类别分别占总数据的百分比的一种图表。
使用场景
使用建议
定义
环形图是由两个不同大小的圆叠在一起，切割中心部分得到的一种图形。
使用场景
使用建议
环形图的两个圆要从中心对齐。
定义
堆叠面积图是把数据面积按顺序逐步堆叠起来的一种图形。
使用场景
常用于不同资源中流量 / 容量的使用。
使用建议
定义
堆叠柱状图是把数据柱状图按顺序逐步堆叠起来的一种图形。
使用场景
常用于不同维度下相同几个指标的展示。
使用建议
上面介绍了常用的图表的使用建议，但是图表类型远远不止于此，还有很多非常用的图表类型，这次我先给大家列出来，如果大家感兴趣的话，我后面再写一期冷门图表的使用建议：
雷达图，散点图，K 线图，盒须图，热力图，旭日图，桑基图，树图，漏斗图，仪表盘。
1. echartsecharts
网站链接：https://echarts.apache.org/zh/index.html
2. highcharts
网站链接：https://www.highcharts.com.cn/
3. antv
网站链接：https://antv-g2.gitee.io/zh/examples/gallery
Chart 是数据可视化必修课中最重要的模块之一，不可忽略。只有了解每个 chart 的定义及使用场景，才能在产品中用到最合适的那一个。
文章来源：优设网 作者：Luck gg
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
再过几天就又双叒叕到「双十一」了，身边的许多朋友已经开始忙着囤优惠券，找链接了，而做为「设计“狮”」的我却还在连夜赶着各大品牌和公司的「宣传海报」，整天埋在做图—改图—再做图的循环中，不知道各位设计大大们最近的生活是不是也跟我一样呢。
好了，在开始今天的干货分享之前，我想先请大家一起来看几张海报：
看完之后，大家有没发现这几张海报有什么特点呢？
没错，他们的共同之处就在于，虽有通篇的文字，但画面依旧充满着空间结构感、层次感，而辅助图形的运用更是起到了点睛之笔的作用，给人眼前一亮的感觉。想必有的小伙伴肯定在思考，这是为什么呢？
版式设计，对，就是「版式设计」。
相信大家都曾有过，熬了一整晚，好不容易设计出几个画面的元素，结果看着一大堆的文字和图片，心中顿时思绪万千，脑海中却一片茫然，折腾来折腾去，还是不知道该如何排版才好的经历。
在当今这个高速发展的时代，无论是纸质媒体还是新媒体，信息的传播都离不开版式设计，一副好的版式设计作品，可以在有限的页面内，以最快速、最直接、最有效的方式传递出核心的内容和信息，并让读者和受众留下深刻而良好的印象。
所以，今天我就给大家分享一些版式设计知识，希望可以带给你些许灵感，帮助你早日做出爆款的设计作品~
曾在一本版式设计书上看到其对板式设计是这样定义的：“版式设计既版面编排，就是把特定的视觉信息要素，根据主题表达的要求在特定的版面上进行的一种编辑和安排。”
即排版并不是指简单的「东拼西凑」，而是需要经过合理化的对照排列整合，以此传递出高效的信息和特性差异的画面。
对比又称为「对照」，即把具有明显差异和矛盾的视觉元素配置在一起，碰撞出特性差异的现象，从而使主题更加的突出，视觉效果更加跳跃。具体又分为大小对比、粗细对比、虚实对比、主次对比等。通过利用不同方向、大小、粗细的字体重新排列整合，以突显出画面的主次信息，正如下面的几张海报。
△ 图一：大小对比
△ 图二：虚实对比
△ 图三：主次对比
文字作为「语言符号」，无论在何种视觉媒体中都直接影响版式的视觉效果，在提高作品诉求力的同时也赋予了版面审美的价值观。在选用字体时，我们应当依据设计风格来决定，不同风格的作品，选择不同的字体形式。而协调则是指画面内在的东西，元素、字体配合得适度和恰当。即说明他们内在相似的东西或状态，以达到画面相统一的风格。
△ 图四：风格统一
△ 图五：颜色统一
△ 图六：元素统一
版式设计有很多种的构成方式和方法，一切美的东西皆有规律，三分法、白银比例、黄金比例就是其中的代表。
三分法（1:2）即「井字构图法」，是日常生活中最常见的一种构图手法，通过将视觉重心或者最吸引人的东西靠近四条线的相交处，使「画面和谐」的同时，也达到了「突显主体」的目的。
△ 图七：三分法
白银比例（1:1.414），也是在排版设计中最为常见的比例，给人一种「安稳恬静」，「惬意」的感觉。
△ 图八：白银比例
相对于其他比例而言，黄金比例（1:1.618）则显得更加突出，正如它的名字，常常给人一种「恰到好处」、「自然」的感觉、无论是在LOGO设计中、还是排版设计、抑或是摄影中，灵活的运用黄金比例，都能够带来不错的效果。
△ 图九：黄金比例
怎么样，看完之后，有没有找到一些灵感呢
文章来源：优设网 作者：艺海拾贝Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编者按：设计原则总是看起来简单抽象不言自明的，但是在细分的设计领域，这些原则其实有着各自不同适用情况，有着「特定的条件」。图标设计，就是如此。今天的这篇文章，来自专业的图标设计师 Helena Zhang，她结合自己制作 Phosphor 系列图标的经验，来分享她对于图标设计原则的理解。
这些设计原则就像一份清晰的设计框架，或者设计自查表单一样，帮你规避设计陷阱，让你的设计成果更加出色。
创建高质量系列图标，你得使用一套周到系统的方法，需要有训练有素的双眼，大量的迭代学习，以及坚持实践，才能做到。下面，我将结合7项设计原则，和大量的实际案例，来为你详细说明，如何创建高质量的图标。
掌握这些设计原则，就是创造出优质图标的关键。
图标存在的目的，是快速传达概念。
下图是 Prius Prime 仪表板上的图标。
在这一系列符号当中，你能明白其中哪些的含义？对于这款车的驾驶者而言，可能会随着使用时间的积累，逐渐明白其中一部分图标的含义。很大程度上，这是因为这些图标本身并不直观。你可能需要对着说明书，才能明白它们各自的含义。
我们可以从下面看到，图标是怎么一步步变得难以识别的：
当图标开始使用我们不熟悉的含义和隐喻时候，它就自然变得难以理解。从左往右数第三个图标，是安全带的提示灯图标，当它亮起的时候，意味着你没有系好安全带。这个含义相对直观，你可能能够很快掌握。而最右边的这个「电动助力转向系统警告灯」含义就非常模糊了。
通常，不清晰的图标设计会让你感到沮丧，但是对于开车的人而言，含义模糊的图标意味着误解，而误解的结果可能是生命安全。
下面是我们更为熟悉的图标——喜爱、警告、音乐和向上。
上图为 Phosphor Carbon 中的图标
向上的箭头在很多场景当中，都是非常清晰、实用的符号。
纽约地铁中的标识
最成功的图标设计，不仅仅是让图标本身易于理解，而且对于不同的文化背景、不同年龄段、不同知识背景的人都能理解，只有做到这样才行。
如果你想要表达的信息过于抽象，那么单独使用图标，可能不是最清晰的解决方案，应当将图标和文本标签结合起来使用。
有了易于理解的图标之后，你需要确保它的可读性足够强。
Icons in the Amtrak mobile app
由于细节太过精细，很难让 Amtrak 的图标被清晰地感知到。
Transit 应用图标也有相同的问题。它们的剪贴板这个图标中的细节很难看清：
Icons in the Transit mobile app
稍加调整之后，好了很多：
Adjusted clipboard icon
当你在处理图标中多个不同的图形元素的时候，应该确保其中的空间留足。太细小的笔触细节、更多的信息量会让图标显得更加难以阅读。
Google Maps 的公交车图标就非常的出色——它看起来足够小，但是可读性也很强。
Google Map icons
确保每个图标都感觉平衡，尽量进行视觉对齐
不平衡的播放图标
Unbalanced play icon
在这个播放图标当中，尽管三角形被放置在中间位置，但是它并没有视觉对齐，我们的眼睛看到的时候，会觉得中间的三角形说向左靠的。三角形靠左的这一边在视觉上更重，因此它应该向右移动一点来确保平衡。
就像字体排版设计师，他们也经常会微调文字的布局来确保视觉平衡。比如字母 i 和 j 顶上的小圆点会偏移，而字母 O 的上下部分则为稍微超出边界，来确保字体的平衡。
设计的时候，适当的微调就能达到平衡的效果。
Balanced play icon
明显更好了。
要点：不要单纯的相信数据，要用你的双眼来进行检查和修正。
用尽可能少的词汇来进行表达和描述，这样会更加优雅高效。
「将你所学的知识分享出去，可以增强你对于这门学科的理解。」
Material Design 在他们的导视系统中，使用的图标大都足够简洁，他们善用图标而是说话：
这是一个复杂的船的图标：
它还有更为简约的版本：
Succinct boat icon (Source: Material)
简洁是图标设计的精髓之一，因为我们经常需要在很小的屏幕上操作，图标可以传达很多信息，而不同文本或者其他复杂的内容。
在用户界面当中，简约准确的设计风格能够凸显重点，让内容发挥效用。Telegram 的图标设计，就非常的简约有趣：
Telegram icons
有的时候，UI图标会选用更偏向插画风的样式。下面这些关于美食的图标就设计得非常令人愉悦，代表泰国菜的图标中，虾的描绘就非常传神：
Yelp icons by Scott Tusk
图标可以适用于各种不同的硬件平台，手机、 电脑、平板，适当的信息量意意味着设计师可以在色彩、层次纵深上，有更大的操作空间。因为图标本身会应用于特定的APP 或者网站当中，因此图标可以适时地凸显品牌和产品特征。
iOS 平台上的 Procreate 、火狐和 Netflix 的图标
为了让图标家族显得更加和谐，始终保证相同的样式和设计规则
在 iOS 13 之前，苹果的图标设计有着各种不同的粗细笔触，不同的填充样式，大小也各不相同：
仔细看看这套图标，是不是有的图标看起来比其他的更重？
任何图标都有着相应的视觉重量。而视觉重量取决于图标笔触的粗细、填充模式、大小和形状这几个属性。而图标设计的难点就在于，如何控制所有的这些参数，做到整体的一致性。
苹果公司最近引入了 SF Symbols 这个功能，将图标直接制作成为图标字体，在这套字体当中，图标有 9 种不同的「字重」和3种不同的的风格（也许有点复杂，但是绝对充分够用）。从图标到符号，在填充模式、笔触轮廓等多个不同的属性上，确保你能挑出感觉更加和谐的图标。
Icons from Apple’s SF Symbols
对于一个大型的成套图标而言，保持一致性并不是一件容易的事情，尤其当这套图标涉及到多个制作者的时候。遵循清晰的原则和规范在此时上至关重要的。
这套 Phosphor 图标是由我和另一位朋友共同制作并严格测试的，我们使用一套准则确保这 700 个图标保持一致性。尽管每个形状都不尽相同，但是它们给人的整体视觉重量是完全相同的，并且很好地相互组合到一起：
Subset of the Phosphor Carbon icon family
每套图标都应当尤其独有的风格和气质。是什么让它们与众不同？它们对于品牌是否有所助益？它们会给人什么样的情绪？
Waze icons
Waze 大受欢迎的用户界面，很大程度上是它本身所使用的图标设计所造就的。这些用色跳脱斑斓的图标，仿佛在说「我们就是特立独行！」
Twitter 的图标是柔和、清晰明亮的：
Sketch 的图标则是精致而通透的：
Freemojis 的图标是可可爱爱的：
而这些 Android 的图标则风格各异，抽象风、像素风、霓虹风，不一而足：
完美地绘制了整套图标之后，你的工作并没有完成。接下来，你需要继续做测试和其他的准备工作，比如让参与图标制作的志愿者可以更好地参与后续的制作和完善，让设计师在日常设计工作当中使用和测试，在数字屏幕和印刷品上应用确保效果，让开发者将它们集成到其他的服务当中，确保能够应用。
一套高质量的图标，需要经过良好的组织、记录，并且在不同的应用场景中进行测试，并且最好能够得到个性化图标制作工具的支持。
7.1、组织性
你需要确保图标集的整齐规范，有合理的命名，便于查找，并且想清楚以什么样的方式来进行分类。按照字母顺序？按照大小，还是类型？
这套 Nucleo Sketch 图标，是按照也没类型来进行组织分类的
7.2、有据可查
你需要阐明整套图标的核心原则：
我以我所制作的 Phosphor 系列图标为例（和以上原则内容有重复）来进行说明：
下面是技术规则。我还是以 Phosphor 图标作为返利：
按照这这样的步骤来进行设计，并根据需求来公开相应的文档，就像下面这样：
7.3、进行测试
检查一致性。确保图标在不同场合可以使用，并且尺寸合理。确保它们和大型是视觉系统能够协调存在。
将图标排列在一起，并且按照以上的 7 个原则来进行检测。
Phosphor 的品质控制流程中所用到的测试表。
7.4、定制化工具
最后，如果你有足够的资源，可以开发相应的工具来方便用户使用图标。
Material Design 让用户可以通过自定义库来访问图标，搜索文件，选择喜欢的格式、配色、大小和主题。
Font Awesome 的图标设计并没有完全遵循上面所提到的全部原则，但是它依然是目前来说最易用的图标集。它提供的功能甚至超出了以上提到的范畴：它支持前端框架、CDN、图标字体以及 SVG。
下面是一些额外的图标素材资源。
7.5、资源
这个图标合集项目虽然在质量上参差不齐，但却是非常适合拿来搜集灵感、作为参考好地方。
Icon Managers
这是一款来自 Nucleo 的应用程序，你可以导入图标集，查看，修改，导出，非常实用。
文章来源：优设网 作者：Helena Zhang
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如何打造视觉平衡：正确的尺寸+视觉对齐+完美的圆角修饰。
我们的眼睛很奇怪，经常误导我们。但如果你知道人类视觉的特殊性，就可以构建更好的设计。
20 世纪 20 年代，格式塔的视觉感知理论得到了发展。它解释了我们的眼睛如何处理不同的图像以及我们的大脑如何解释它们。你可能已经听说过诸如亲近原则或共同命运规则之类的话题，本文引用了格式塔理论的一些观点，重点介绍了实践方面而不是学术研究上的问题。在底部有关于这个主题的相关推荐列表，有兴趣的话可以浏览。
400 px 的正方形和 400 px 的圆哪一个更大？从几何角度来说，它们的宽和高是相等的。但看看下面的图片，我们的眼睛立刻发现正方形大于圆。
下图是带有标注的：
让我们再看一张正方形和圆的图。就视觉重量而言，它们相同吗？
至少很难立即指出哪一个比较重，不足为奇，因为我增加了圆的直径。
我重叠了第一个和第二个示例中的形状。左图，400 px 正方形的面积大于 400 px 圆的面积。这就是为什么我们在视觉上看到它更大的原因。右边，圆和正方形是平衡的，基本上它们的面积也相似，但是宽和高不同。
我们可以看到菱形、三角形具有同样效果。为了在视觉上与正方形保持平衡，它们应该更宽和更高，以使得它们的面积相似。基于面积的方法非常适合最简单的形状。
在 icon 中怎么使用呢？
当你创建一组图标时，重要的是要使它们保持平衡，以使图标不会显得太突出或太小。如果我们直接把图标放在正方形内，那么越像正方形的图标看起来就越大。
我建议补偿不同形状图标的重量，允许视觉上较小的图标悬挂在正方形外，并在视觉上较重的图标和正方形之间留出一些距离。
下面是一组修改过的图标：
现在了解了，为什么一个图标区域总是比图标主体大，只是为了让非正方形图标适合它并且看起来不小于正方形图标。
检查视觉平衡最简单的测试是模糊设计。如果你的图标变成相似的斑点，则它们具有形同的视觉权重。
例如，Facebook 和 Instagram 的图标是方形的，而 Twitter 的图标则是鸟的轮廓，Pinterest 则是一个环绕的「P」。这就是为什么 Twitter 和 Pinterest 的图标要大一点，以便于它们与 Facebook 和 Instagram 图标保持平衡。
视觉平衡的另一个例子是将文本框与圆形按钮放在一起。如果按钮的直径等于文本框的高度，那么按钮会显得更小。当你把它放大一点，整个结构就会变得更加平衡。
但如果你改变按钮的样式，就不需要放大了。在下图中，按钮和文本框的高度是 80 px，但是右边的按钮视觉上看起来并没有很弱，因为它是黑色的。
Tips：
视觉对齐是视觉平衡主题的延续。看下图：它们看起来一样长吗？
以 px 为单位，答案是肯定的。但是，第一眼看上去，第一条要比第二条长一些。
现在看下图，有什么变化吗？
我对第二条矩形应用了视觉补偿。允许尖峰值超过上条矩形长度的 20 px，是补偿峰值之间的间隙并使两个形状在视觉上相等。
还有一些特殊图形的例子：
所以，如果你设计一张带有折叠条纹和文字的海报，或者商品图角标设计时，请注意使它们达到视觉平衡。锐利的边缘应该超出形状的其他部分。
文本和有背景的段落怎么对齐？这取决于背景的视觉密度。如果它很轻，你可以将突出显示的段落与文本的其余部分对齐。
由于背景较浅，因此不会中断正常的文本流。
对于深色背景，可以使用不同的方法。在图片上，黑色背景与文本的其余部分对齐，而其中的白色文本以缩进方式放置。
与浅色背景的情况不同，黑色背景具有较大的视觉重量，如果目标是无缝浏览段落，则最好按照以下所示的方式对齐。
相同的原理同样适用于按钮和输入字段。当然这只是基于人类视觉感知的设计。
左侧输入字段的浅色背景可以超出输入标签和输入文本的范围。「发送」按钮的与输入背景的右对齐，因为该按钮较暗且从视觉角度看较重。
在右侧，输入具有实线边框，当用户输入的框内有凹痕时，我将其与标签对齐。「发送」按钮的侧面为三角形。该按钮向右移动一点，看起来与上面的矩形输入字段保持平衡。
在这里，我们探讨另一个对齐问题：文本和图标按钮的对齐。下图，文字看起来居中吗？
秘诀在于，右边是三角形，因此在右边的按钮上我将文本向左移动了一点。此外，箭头按钮的宽度为 40 像素，看起来与矩形按钮在视觉上相等。
文本按钮不仅具有水平对齐，而且具有文本和背景的垂直对齐。我想讲的第一种方法是在各种操作系统、站点和 APP 中使用的。它是基于字体的大写字母的高度（即上限）对齐方式，它等于「 H」或「 I」的高度。
基本上，大写字母上下的空间和按钮的边缘是相等的。这是有道理的，因为操作按钮通常以大写字母书写，并且英文字母的升序更多，上伸出部分（l，t，d，b，k，h）比下伸出部分（y，j，g，p ）多。
另一种方法是使用字体的小写字母的高度（所谓的x高度）来对齐文本和背景。在 sans 和 sans serif 字体中，它等于字母「 x」的高度。
由于文本的主要视觉重量集中在小写字母的区域，因此该方法也是可行的。
这些方法之间有什么区别吗？有区别，但差异不大。
对于「取消」和「确定」（常用按钮），由左列代表的上限高度方法肯定更好，因为「取消」没有下垂部分（y，j，g，p ），并且「确定」都是大写字母。
右栏中显示的 x 高度方法仅对「同步」按钮更好，该按钮的名称同时具有上下突出的元素；「取消」和「确定」两个词似乎位置太高了。
图标按钮的情况与文本按钮略有不同，让我们在圆形背景上放一个「发送」图标。哪个看起来视觉更加平衡？
希望你已经注意到左边的那个有问题。发生这种情况的原因是对齐方法不同。第一个选项将图标视为矩形，在某种程度上说是正确的，因为当你将 SVG 或 PNG 文件给开发人员时，它是一张矩形图。右侧显示图标的位置，使其所有尖锐边缘与圆形按钮背景的距离相等。
如果为开发输出文件，则需要保留一些区域，以便他们可以使图标在背景上正确居中。
同样「播放」按钮也一样，如果直接对齐这些形状（圆角矩形和三角形），它们将看起来很奇怪。
如果要使三角形的视觉位置更好，则将其围绕并使其与按钮背景对齐会更好。
Tips：
还有什么比圆形更圆的图形吗？
我曾认为没有，但是正如我在本文开头所说的那样，我们的眼睛很奇怪，有时会欺骗我们。那么，下面图片中哪个圆看起来最平滑？
我之前问过的人在 3 号和 4 号之间进行纠结。1 号和 2 号绝对太瘦了，5 号太丰满了。如果我们将第三个和第四个变体（一个几何圆和一个修改的圆）重叠在一起，我们会发现，后者比第一个重一些。
为了说明我的意思，我从 Futura，Circe 和 Geometria 这三种著名的几何字体中选取了字母「 o」。鉴于高质量字体是基于人类的视觉感知构建的，并且使用了复杂的视觉构造系统，因此我认为它们的圆形看起来比几何形状更圆。
让我们将它们与几何圆重叠。即使是最几何图形的 Futura 的「 o」也有四个突出部分。此外，Circe 和 Geometria 的字母比圆圈宽，但即使它们的高度和宽度相等，我们也可以看到这四个「肚子」好像小了。
因此，从视觉角度而言，修改后的圆（右侧）看起来比几何圆（左侧）更「圆形」。
我们如何使用这种现象？当然要进行圆角处理。如果你在图形编辑器中直接修改圆角，效果其实并不好。
人眼立即发现直线突然变成曲线的点，而且这种处理看起来并不自然。
考虑到我们的视觉感知，我修改了这个圆角。
这种嵌入具有超出几何圆的额外区域，使得直线与曲线相交的点不那么明显。
只是尝试感受一下这些嵌入方法之间的差异。
现在，我们可以将这种方法应用于圆形按钮。
你可能已经注意到，右侧的按钮具有更平滑的圆角倒角，并且你的眼睛更加舒适。
与 APP 图标相同，人们不只是使用标准的圆角整数来达到理想的效果。在深入探讨此问题前，让我们看一下下面图形的差异：
第一个是我在 Sketch 中创建的圆角矩形。第二个形状是超椭圆形，也称为 Lamé 曲线。它是由法国数学家加布里埃尔·拉梅（GabrielLamé）发现的，根据公式的不同，其范围可能从四点星形到实际上看起来像是圆角正方形。
马克·爱德华兹（Marc Edwards）提出了 Lamé 曲线的公式，该公式产生了平滑且视觉上完美的形状。从 iOS 7 开始的图标均基于此设计的。
后来，通过添加黄金比例和用于指导新图标设计者的网格来修改此形状。
使用超椭圆等形状的主要好处是其光滑的外观。另一方面，这些非标准形状很难到真实项目中。应该将多个 SVG 组合在一起，在代码中包含特殊的公式或脚本，或者像 Apple 为其应用程序图标那样使用 PNG 掩码。
至于设计过程本身，有一个简单的圆角修复方法。您需要调整合适的圆角度数。
锐角倒圆的差异更加明显，这对于绘制道路或交通设计非常重要。
Tips：
有时，非几何正方形看起来更像方形。你可能会想，「这是什么废话？」 那么，你看下面的正方形？哪种形状看起来更方形？
如果你选择了左侧的形状，你就能感受到视觉差异的点。
文章来源：优设网 作者：UX Talk
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本文从图标的起源、定义到基础的设计方法总结无一不包，还有大量的案例帮你理解布尔运算，是新人设计师学习图标设计的必备干货！
一说到图标，我想您一定会觉得非常熟悉。图标，也称为 icon 或 picto，是指有明确含义的图形视觉语言。那么当我们一提起图标设计，您的脑中会想起哪个图标来呢？有可能您想起的是微信APP ，由两个白色气泡组成的启动图标，或者是我们每天使用的 APP 中的那些返回、关闭等系统图标，也可能是商场导视里的卫生间图标等。没错，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富：有线的、有面的、也有拟物的等等。图标的历史可以追溯到象形文字（Pictogram），我们的祖先在发明文字之前就使用图标记录一天的生活了。听着是不是不可思议呢？从亘古时代的象形文字开始，我们的祖先就偏爱使用这种抽象的图形来表达意思了。在平面设计领域的商标其实也是一种图标，平面设计里的视觉导视（例如卫生间的图标）也有图标的应用，所以图标在我们的生活中应用非常广泛。
△ 生活中随处可见的图标
在计算机时代，从80年代的施乐公司界面中的单色图标开始，图标就开始出现在屏幕之中了，图标较编程语言更容易被大众理解。到了后来从 iMac 到 iPhone 引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦：拟物图标的质感、光影会吸引走用户的注意力，我们称之为「视觉噪音」。于是 UI设计师开始探索更新的表现形式来设计界面中的图标。扁平图标发展史上有过很多次尝试，比如微软引领的 Metro风格中的图标设计和 Google 引领的扁平设计风格中的长投影风格图标，但由于它们表现形式太过于抽象、缺乏情感的传递，并没有获得用户的垂青。而我们现在界面设计中的图标设计是一种「轻拟物」或「微扁平」的风格：在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。（关于图标风格的变化，可以参考这个网站：https://historyoficons.com）。
△ 不同的图标设计风格
如今我们界面中的图标可谓非常丰富了，如果根据 Material Design 对图标的分类，UI设计中的图标可以分为带有品牌属性和特性的产品图标、有功能指示作用的系统图标两种图标，下面我们将针对于这两种图标进行研究。
产品图标是我们在设计界面的时候体现品牌调性和特性的图标。通过产品图标，用户就可以大概感知这个产品主要是做什么的。比如微信的产品图标是两个对话气泡，暗示了这是一款社交APP；再比如 ofo 的产品图标是字母ofo 的组合，同时也是一辆自行车，这暗示了这款产品是共享单车的APP；再比如 KEEP 的字母「K」的图标，像极了一个在抬腿做运动的人，暗示了这是一个运动APP。
同时有些产品也依靠自身已经在用户心中产生的品牌来直接设计产品图标，比如淘宝APP 的产品图标就是一个「淘」字；支付宝的产品图标就是一个「支」字。优秀的产品图标都会在我们心中打上一个烙印，当我们看到这些图形、配色时，脑中会立即想起来它们的功能和特点。产品图标除了在手机屏幕中作为启动图标，也会出现在闪屏、情感化设计、「关于我们」界面等场景中，所以也要有一定的灵活性，在设计上要以简单、大胆、友好的方式传达产品的核心理念和意图。产品图标很类似在企业识别系统（VI）里的 logo，需要让用户一眼看到它就能够与脑中的产品相关联。所以设计一个优秀的产品图标对于任何产品来说都是非常重要的。
产品图标有不同的风格，这些风格有可能很拟物，也有可能很扁平；有可能很抽象，也可能很具象。通过不同的设计风格可以更加标新立异，从而被用户记住。让用户记住我们的图标真是一件非常重要的事儿，要知道，每个手机都像是一把瑞士军刀，它有无数个功能，而我们的产品只是万种功能中的一个。用户不可能记住手机里所有的 APP 都是什么，所以能在第一时间取得好感和记忆非常重要，产品图标设计得好看并且容易被人记住就成了非常重要的任务。产品图标的主要风格有以下几种。
文字风格
文字是最直白的信息，而且不容易被曲解。所以很多国内的产品都会使用文字来作为自己的产品图标。比如：支付宝、淘宝、今日头条、OFO、爱奇艺、知乎、网易新闻、毛豆新车等。这么做也有它的问题，比如文字给人美的感受不如图形，因为文字需要阅读而不是观察。并且移动端设备都会在启动图标之下加上一行辅助文字，如果图标上的文字和下面的辅助文字完全重合，会显得像介绍了自己两遍一样。如果您决意要使用文字作为产品图标，且是中文的话，那么一定要记得文字最好为1-2个，并且不应该是产品的全称。如果是英文的话，最好是首字母而不是产品全称。当然不管是中文还是英文都需要选择合适气质的字体并做一定的变化。
单读：单读是一个偏文艺的阅读产品，所以产品图标使用了黑白配色和两个非常有文艺气息的宋体繁体字，这样的设计符合产品调性，传递给用户一种产品的文艺气息。
今日头条：今日头条是一款优秀的新闻APP。它的图标非常直白，一张报纸上有红色的头条标题，头条使用了非常粗的黑体字，非常显眼。
淘宝：淘宝采用了一个俏皮的「淘」字作为 icon 的主要元素，并且背景颜色是令人兴奋和刺激的橘黄色，凸显了电商属性。并且这个字使用了很久，用户对此有一定的品牌认知。
爱奇艺：爱奇艺的 icon 采用了英文字母iQIYI 和上下边框相组合的形式。整体看来像是一个电视机，强调了品牌属性和功能，并且使用了在视频领域非常有识别性的绿色，让人一看便知这是爱奇艺了。
△ 单读、今日头条、淘宝、爱奇艺的产品图标
如果您的品牌使用英文作为产品图标，我们在设计的时候要格外注意英文字母之间的正负空间关系以及不同西文字体的不同气质。
ONE：虽然是中文产品，但是 ONE 的icon 显得非常的高端和小众。ONE 三个字母的正负空间关系做了微调，并且选择了无衬线字体来体现时尚感。下面的小字是一个 slogan，并且和 ONE 的宽度一致。
Pinterest：Pinterest 的产品图标是一个手写体的P，并且用红色圆形作为陪衬。这样一个字母作为 ICON 的好处就是方便用户记忆。
HULU：HULU 是一个国外视频产品，它的产品图标颜色很鲜艳，字母本身有韵律感，所以没有做过多的设计。
Facebook：作为一个社交产品，Facebook 的产品图标同样采用了一个字母代表较长的单词。
△ ONE、Pinterest、HULU、Facebook的产品图标
正负形与隐喻风格
图标的设计可以使用正负形和隐喻，来让图标更加有耐人寻味的看点。
抖音：抖音的产品图标是一个音符，但是不知道大家是否发现，下面圆形的负空间也是一个音符，所以显得非常巧妙。为了增加动感还加了红和蓝绿色的类似3D的动感效果。
Keep：Keep 产品图标是一个K，但是同时也是一个人抬着腿正在锻炼。
Skillshare：Skillshare 是一个技能交换平台，第一眼看是两个手像太极一样交换着技能，同时也是该产品的首字母：S。
△ 抖音、Keep、Skillshare、OFO的产品图标
折纸风格
折纸的效果会让人感觉很立体，所以很多产品也选择了折纸效果（比较扁平的手法）来设计产品图标。
Calendar：这个产品的产品图标是一个正在翻页的日历，非常简洁明了。
Snapseed：除了扁平的设计之外，使用了长投影的设计风格。这个长投影也是扁平化的设计。
Netflix：Netflix 的产品图标是该产品的首字母N，这个 N 用了一些阴影来表示立体感。
绘声绘影：同样是用了长投影和折纸效果，显得非常清新。
△ Calendar、Snapseed、Netflix、绘声绘影的产品图标
填充图标风格
产品图标使用填充图标风格是非常合适的。填充图标风格具有简洁和识别性强的特点。这种 ICON 的可扩展性更高，比如在一些特殊节日时可以用手绘、拼贴等形式来做辅助图形。所以很多公司都钟爱填充图标风格。
Lucking：这是一个线上咖啡外卖的产品。它的 APP图标使用了一个鹿回头的造型。这个鹿造型简洁，非常有识别性。
Tinder：这是一个国外社交APP，通过一个火的填充图标让人第一时间记住这个产品。
youtube：这是国外著名视频APP，它的产品图标同样使用了填充图标风格，是一个有电视机隐喻的圆角矩形，并且中心是一个播放键，简明扼要地说明了这个产品的功能。
Twitter：国外著名社交APP，它的 icon 同样使用了填充图标风格，非常简洁好记。
△ Lucking、Tinder、Youtube、Twitter的产品图标
线性风格
由于目前设计流行趋势，很多产品图标都会采用扁平的设计风格。扁平除了填充的图标之外，还有一种非常流行的形式——线性风格。线性风格一定要注意不要太细，因为手机和电脑设计环境显示尺寸不同，如果我们做得太细，那么在手机上看会非常尖锐，显得不太好点击。
Airbnb：Airbnb 的背景是一个微渐变，线性风格是一个曲线组成的 A，同时也是一个小蜜蜂。
LOFTCam：为了凸显文艺产品调性，使用了偏细的线条，同时使用了两种主题色。
NextDay：同样非常文艺的产品，使用了比较抽象的手法。这个 ICON 是一个牛奶，突出了这个产品必须今天看，否则就如牛奶一样会过期。
VUE：这是一个摄影产品，同样应用了黑色的微渐变，前面是非常前卫的45度长短不同的线。
△ Airbnb、LOFTCam、NextDay、VUE的产品图标
LOWPOLY风格
我曾介绍过 LOWPOLY 这种设计风格，这种风格如果应用在产品图标上同样非常抢眼，因为用户的手机上可能安装了很多 APP，那么第一眼扫过去一定会注意到最亮眼的图标。而 LOWPOLY 因为本身造型的独特性非常吸引眼球。当然 LOWPOLY 也有它的问题，比如容易让图标失去细节等，所以很多产品图标都是使用 LOWPOLY 作为图形的背景。
潮自拍：潮自拍使用了暖色邻近色渐变的 LOWPOLY 作为背景，前景使用了一个很潮的S。
潘通色：潘通色本身的最大特征就是色卡，所以使用了 LOWPOLY 的形式。
美妆相机：通常 LOWPOLY 的形式是方块，而美妆相机使用了三角作为基础元素，很特别。
人人：人人的产品图标使用了不同的矩形斜度45°，增加了设计的速度感。
△ 潮自拍、潘通色、美妆相机、人人的产品图标
微渐变风格
微渐变也是非常常见的表现手法。在拟物被扁平替代以后，我们会发现无法表达空间上的 Z轴。所以用轻微的渐变表现图片的深度非常流行。我认为微渐变可能是众多图标设计风格中最有竞争力的一种。
每日优鲜：每日优鲜在背景上用了很多炫彩的圆球，由于促销时段在原有图标上增加了一个双十一的小标识，在手机中非常抢眼。
陌陌：陌陌图标如果设计成扁平你还会注意到它吗？使用线性图标会使得图标厚度感不够，而微渐变可以非常好地解决这个问题。
全民K歌：使用了紫红色的渐变来塑造一只鹦鹉，如果遇到其他使用场景可以使用扁平版本，这样会让产品图标的使用更加灵活。
Mindnode：这款脑图软件的产品图标使用了三组邻近色的渐变，同时使用了非常微妙的阴影。
△ 每日优鲜、陌陌、全民K歌、Mindnode的产品图标
卡通风格
卡通风格的产品图标会让用户更有好感，所以我们可以为产品设计一个可爱的卡通角色。好多决策者会认为卡通是一种低龄的审美，其实是错误的。卡通可以说是一种通吃的风格，比如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。而卡通本身有不同的风格，比如拟物类的卡通、扁平类的卡通等，也会给人不同的感受。所以如果我们的产品要使用卡通作为产品图标，最好以目标用户群的喜好作为标尺。
开心消消乐：开心消消乐是一个休闲游戏，游戏类APP 的产品图标通常是使用拟物风格，这样可以最大地吸引玩家的注意力和兴趣。
映客：映客是直播APP，通常用户年龄不是很大，所以使用了一个很可爱的猫头鹰作为产品图标。
Waze：Waze 的产品图标不仅可爱而且突出了 Waze 的地图查找功能。
BOO!：BOO! 是一个儿童社交产品，用户比较低龄，所以更适合使用可爱的卡通作为图标。
△ 开心消消乐、映客、Waze、BOO!的产品图标
如果我们想设计一个小图标，那么我们可以把画布放大到400％来设计。同时可以使用网格和参考线来作为我们设计的辅助。网格在很多软件里都有，比如在 Illustrator 中点击视图 > 网格，即可开启网格了。参考线模板则需要下载第三方设计的模板，比如 Material Design 的参考线模板就有正方形、圆形、圆形和长方形结合等不同形式。如果对齐模板中的形状，即可得到面积相等的长方形、正方形、圆形。这对我们构建视觉上面积相等的图标很有益处。
△ 网格和参考线
△ 不同形状的网格布局
△ 在网格的辅助下可以设计出大小均衡的图标
苹果启动图标尺寸
苹果需要很多尺寸的图标用在不同的场景上，比如说在网页端打开iTunes会使用512px的大图标，而在手机、iPad桌面上的图标大小也不同。除了尺寸不同，这些图标的圆角也有不同的数值。为了简化这部分的难度，苹果为开发者提供了模板，有了模板就不用记那么多东西啦。苹果官方HIG 下载的这套资源中，有 Template-AppIcons-iOS 这个文件，这个文件提供了 PS、Sketch、XD等不同格式。我比较推荐使用 PS 的格式。
打开这个文件，用我们自己设计的启动图标替换掉任意智能对象里的内容。那么打开智能对象就是一个1024x1024px的矩形画布，把我们的产品图标放在这里，保存这个智能对象再关闭它就可以了。这时，你会发现所有尺寸的图标都变成了我们的图标。然后我们把背景隐藏，切出这些图标即可。如果是 AI 完成的产品图标可以直接 Ctrl+C 然后在 PS智能对象中 Ctrl+V复制过来就行。
△ Template-AppIcons-iOS
安卓启动图标尺寸
安卓启动图标同样需要很多尺寸，主流是需要：1024x1024px、512x512px、144x144px、96x96px、72x72px、48x48px这六种。我们提供给程序员的是直角的矩形，然后程序员通过代码进行切割变成圆角图标。在这里我也做了一个智能对象的模板送给您，只要替换其中的智能对象图像，换成您的1024x1024px图标保存即可。
△ 安卓图标模板
设计产品图标前，首先我们需要找一些和产品气质相符的图片制作情绪板。通过情绪板我们可以感受到产品的调性，然后我们从中提取一些形状和色彩作为我们产品图标的主要造型。这里我举我的产品每日名画的例子，每日名画是一个美术方面的APP，所以我找了一些和美术相关的图片。
△ 关于美术的情绪板
下面我开始在 AI 设计产品图标了。我建立了一个1024x1024px的画布，然后根据卢浮宫前的金字塔建筑设计了一枚抽象的产品图标，它内在的符号是：带领大家走进艺术的殿堂。同时我也增加了一些自己对美术的含义，如艺术来源于生活高于生活等。这些都写在了设计说明中。
△ 在Illustrator中设计产品图标
然后我给这枚图标加入了蒙德里安的配色，增加产品的艺术感，并最终完成产品图标的设计。这个图标也可以作为该产品的企业形象（VIS），将来产品周边都可以使用这个图形。
△ 最终定稿的图标
由于产品会首先上线到苹果设备上，所以我下面把 AI 绘制的产品图标全选复制，然后打开图标模板中的智能对象（双击图标模板中智能对象图层的缩略图），粘贴过来。粘贴的时候系统会提示选择粘贴过来的方式，这里我们选择：智能对象。然后保存并关闭智能对象，这时回到模板PSD 中，就看到了这个效果。
△ 替换了模板中智能对象的效果
接下来隐藏背景图层，然后按下键盘上的 ctrl+Shift+Alt+S，调出存储为Web所用模式，选择保存到桌面上，格式选择仅图片。关闭 PS，打开桌面上的文件夹，就看到图标被我们工整地切好了。
△ 产品图标的切图文件
第二种图标被称为系统图标。系统图标指的是担负着一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂。比如微信底部四个系统图标：「微信」、「通讯录」、「发现」、「我」就使用了比较简洁的线性风格。
当然系统图标也不一定要做的非常无趣，比如我们常用的58同城APP 中就有大量的系统图标，在保证识别性的前提下使用了多彩的颜色和不同的造型，显得非常活泼。所以系统图标同样可以做得有趣和多样，前提是保证图标的可识别性。
填充图标（Filled icon）
填充图标是以面为主要表现形式的图标。在微信APP 底部的 tab栏中，未选中的图标是线性图标，而选中态则是填充图标，并且会变成较为鲜亮的颜色暗示用户该功能被选中了。填充态图标占用的面积要比线性图标多，所以更加显眼。实际上，在最新的苹果设计规范中，苹果也建议开发者在 APP底部 Tab栏中全部使用填充图标，点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。
△ 图为填充图标
线性图标（Outlined icon）
线性图标的表现形式是线条，在系统图标里通常是由统一粗细的线条组成。这里可能很多新朋友不明白为什么要使用统一的粗细，这是因为通常系统图标并非单一出现，而是成组使用。比如微信底部的四个 tab图标、网易云音乐顶部导航栏的图标等。在一个场景下的几个同等重要的图标，如果线条粗细不一致，很容易造成它们存在权重上差异的感觉。所以我们在绘制线性图标时，线条通常都会使用统一的粗细。
△ 图为线性图标
圆角图标（Rounded icon）
无论是线性还是填充的图标，在图标的边角处使用圆角都是圆角图标风格。圆角图标的好处就是让人觉得很温柔，可以非常舒适地点击它。所以很多产品的图标都会使用圆角图标。
△ 图为圆角图标
尖角图标（Sharp icon）
无论是线性还是填充的图标，在图标的边角处使用尖角都是尖角图标风格。尖角图标的好处是让人感觉到有棱角，视觉上会多凝视几秒。并且给人以正式的感觉，所以像银行、办公等APP 中都较多地使用尖角图标风格。
△ 图为尖角图标
断线图标（Breaking Lines）
如果我们的线性图标显得太死板，我们可以使用断线这种方式来让它变得俏皮。断线图标就是线性图标的一种风格变化，它的特点就是在线条中出现断口。但是这个断口并不是看起来那么简单，它得遵循几个规则：第一，断线开口只有一个，否则图标会无法识别；第二，断线开口位置不应该在中心线上；第三，断线开口尽量在转折处；第四，断线不应该太过于琐碎。
△ 土豆APP的标签栏使用了断线的风格
双调图标（Two-Tone icon）
如果我们把图标简单地分为线性图标和填充图标，是不是太无聊了？比如我们要设计一个 iOS平台的 APP，它的底部Tab栏就一定是未选中态是线性的，选中就是填充的吗（或者全部是填充态，仅仅改变颜色）？这也太无聊了吧！所以又出现了双调图标的设计风格。即：双调图标的外形还是线性图标，但是用透明度很高的同类色填充到线性图标内部空间里。这样的图标显得俏皮可爱，并且感觉非常透气。
△ 图为双调图标
动态图标（Motion）
动态图标是非常有趣的，如果静态图标不足以让用户感受到新鲜，那我们不妨给图标增加动效。比如 QQ应用中底部 Tab栏的图标点击其中一个的时候，其他图标会「偷看」选中态图标的方向。除了底部标签栏之外，很多 APP 点击能触发导航的「汉堡包图标」，点击时也会有一个从导航图标变成返回图标的动画。这都是非常能够调动用户好奇心的。
△ Material Design中的动态图标
我们在使用 Photoshop 工具的时候会感叹，画笔比钢笔好用，橡皮比布尔运算好用。那么我们在画图标的时候能不能使用画笔这样的工具来绘制图标呢？在 Photoshop 里使用画笔工具和橡皮工具、涂抹工具、选区工具的填充、油漆桶工具制作的图形，以及从网络上复制过来的jpg图片文件，这些都是像素图形。它们是计算机记录每一个点的颜色来呈现图像的。这也是为什么我们把一张照片放得特别大它就虚了的原因。而我们通过 Photoshop 中的钢笔工具、布尔运算、贝塞尔曲线、形状图层制作的图形，以及 Illustrator 复制过来的图形、Sktech绘制的图形等，都是矢量图形。它们是计算机记录一个锚点到另一个锚点的方向、位置、色彩来呈现图像的。所以像素图形变化多端、颜色变换丰富、细节更多；矢量图形则文件较小，并且具有随意放大缩小都不虚的能力。因为每个锚点之间的方向、位置都是相对的，放大和缩小不受影响，而像素图形记录每个点的色彩，比如一张2000px x 2000px的图片，缩小到1000px x 1000px就会损失一千个像素信息。我们绘制图标比较适合用矢量图形来设计，因为我们可能需要随时调整图标的大小，并且在不同分辨率的适配中也更加方便。
布尔运算听着很可怕，其实非常简单，布尔运算是数字逻辑推演法，主要有数字逻辑的联合、相交、相减。在我们使用的平面软件中引用了这种逻辑运算方法来使基本图形通过联合、相交、相减等数学计算变成新的造型。比如两个圆形相减可以得到一个月亮的造型，这就是布尔运算了。那么为什么叫布尔运算呢？布尔指的是乔治·布尔（George Boole），一位19世纪最重要的数学家，为了纪念布尔在符号逻辑运算中的杰出贡献，所以我们将这种运算称为布尔运算。布尔运算在 Photoshop、Illustrator、Sketch、Adobe XD、After Effects等我们熟悉的软件中都有，并且操作基本一致。
布尔运算的核心就是两个形状的关系：即Union（并集）、Intersection（交集）和Subtraction（差集，包括A-B和B-A两种）。这些关系有点像我们初中学过的数学，应该比较好理解。但是很多软件中对于布尔运算的关系翻译不同，所以可能大家会有些不适应。比如在 Photoshop 中布尔运算被翻译成：合并形状、减去顶层形状、与形状区域相交、排除重叠形状。而在 Adobe XD 中则翻译成：添加、减去、交叉、排除重叠。虽然名字不同，但是功能是相同的，所以大家在学习新的软件时不妨先找一下布尔运算。
△ 图为布尔运算不同运算模式
贝塞尔曲线是用于二维图形绘制的数学曲线。1962年法国工程师皮埃尔·贝塞尔发表了贝塞尔曲线，它的诞生主要是为了汽车的主体设计绘制图形的。贝塞尔曲线是绘制矢量图形时的重要工具，我们使用钢笔工具画出的所有图形一般来说都是贝塞尔曲线组成的。贝塞尔曲线由锚点和线段组成，点击锚点就会出现两个手柄，一边是控制前面的线条走向，另一边是控制后端的线条走向。同时我们也可以通过增加锚点工具和删除锚点工具进行调整。要想学好平面电脑绘图软件，贝塞尔曲线是必须修炼的一课（练习贝塞尔曲线的在线游戏：https://bezier.method.ac/）。一般来说，二维平面软件都有贝塞尔曲线的痕迹，钢笔工具、增加锚点、删除锚点、转换点工具，这些都是平面软件的标配。并且，贝塞尔曲线和布尔运算可谓是一对好朋友，在绘制矢量图形时可以使用它们轻松地绘制出准确的造型。
△ 图为贝塞尔曲线绘制方法
那么我们使用什么软件来绘制图标呢？这里我建议使用 Illustrator。首先，UI设计师使用不同的软件来设计页面，目前主流是 Photoshop和 Sketch，也有很多设计师选择 Adobe XD。而这些软件都是兼容 Illustrator 的，所以使用它来绘制图标非常有灵活性。可能您对 Illustrator 并不熟悉，不过没关系，我们在这里只需要了解它与图标绘制功能相关的功能即可，比如钢笔、布尔运算、属性面板、描边、填充、混合工具等，并不需要学习非常深入。所以大家不必紧张。
笑脸图标
笑脸图标的设计步骤：画出一个正圆；接着画一个小圆，然后 ctrl+F复制平行移动到旁边，然后右键编组。接着，同时选中大圆和编组的小圆进行水平居中对齐。我们绘制一个圆形，然后通过布尔运算减去一个矩形得到半圆形组成嘴，完成。
△ 笑脸图标
对号图标
对号图标的设计步骤：使用矩形工具画出一个长方形，然后复制，将复制后的长方形向右上移动相同的距离，使用布尔运算剪切，旋转45°后变成一个对号。绘制一个正方形，使用路径选择工具选中，拖动圆角的圆点拉出圆角得到圆角矩形。对号和圆角矩形进行布尔运算，完成。
△ 对号图标
WIFI图标
WIFI图标的设计步骤：绘制多个圆形并且通过布尔运算相加减得出三个圆圈嵌套的靶子造型。通过旋转过的45°矩形和之前图形布尔运算得到 Wifi图标，完成。
△ WIFI图标
地理位置图标
地理位置图标的设计步骤：选择矩形工具单击画面输入数值，建立一个100px的圆形。然后选择这个圆形复制它，然后等比例缩小它，和之前的大圆进行布尔运算相减，得到环形。绘制50px的矩形，用对齐工具放在环形的左下方。旋转45°得到地理图标，完成。
△ 地理位置图标
云彩图标
云彩图标的设计步骤：绘制两个大小不同的圆形，使用对齐工具进行底部对齐。绘制一个矩形，同样底部对齐。合并形状，完成。
△ 云彩图标
眼睛图标
眼睛图标的设计步骤：绘制出一个正圆。复制这个正圆形，然后按着 Shift+方向键下键，并通过布尔运算得到眼睛外轮廓。绘制两个圆形，通过对齐工具和布尔运算工具得到最终眼睛造型，完成。
△ 眼睛图标
铃铛图标
铃铛图标的设计步骤：首先用圆形和矩形合并组成主体；使用矩形和圆形进行布尔运算绘制铃铛底部和铃铛顶部的零件，然后进行合并形状；铃铛底部的半圆使用圆形和矩形布尔运算，完成。
△ 铃铛图标
简易齿轮图标
简易齿轮图标的设计步骤：通过两个圆形进行布尔运算得到环形。绘制一个矩形，上下复制在圆形上，然后把它们俩编组和环形使用对齐工具进行水平垂直对齐。复制矩形编组并旋转90°，得到一个十字形。复制这个十字形并最终全部合并形状，完成。
△ 简易图标
齿轮图标
齿轮图标的设计步骤：用 AI 的爆炸图形和圆形进行布尔运算画出齿轮；用两个圆形进行布尔运算做出里面的零件，完成。
△ 齿轮图标
螺丝刀图标
螺丝刀图标的画法：用圆形和矩形做出螺丝刀主体；用矩形旋转并复制再布尔运算做出凹槽；使用矩形做出前面的造型，完成。
△ 螺丝刀图标
苹果图标
苹果图标的画法：绘制一个六边形。将水平中间两个点向上移动。在中心线上下建立两个锚点，并且向下移动。将下面两个点向内分别移动。使用圆角工具将每两个相同的点一组一组拉成圆角。绘制一个矩形并且旋转45°，然后将左右两个点向内拉得到菱形。用圆角工具使菱形变成叶子造型并且旋转45°。使用一个圆形和苹果造型相切，完成。
△ 苹果图标设计过程
放大镜线性图标
放大镜线性图标的画法：绘制正圆。绘制一条直线。用属性面板里的对齐工具把它们俩对齐。用描边面板里的属性将描边改成圆头，然后旋转45°即可。
△ 放大镜线性图标
时钟线性图标
时钟线性图标的画法：绘制正圆。绘制一个矩形，对齐圆形中心。用增加锚点工具在矩形左和下边上增加两个锚点。用直接选择工具框选没用的线条，删除即可。
△ 时钟线性图标
点赞线性图标
点赞线性图标的画法：绘制两个矩形，并用直接选择工具选择重合的四个锚点，在属性面板里使用对齐工具让它们完全对齐。将大的矩形底部锚点向左移动。绘制一个矩形并和大的矩形左对齐。用直接选择工具选中直角，拖动圆角小圆点让它们变成圆角，完成。
△ 点赞线性图标
如果您掌握了以上填充态图标的设计方法，相信其他图标的设计只要以此及彼的思考，就可以完成。比如线性图标，在绘制线性图标时，我们首先会建立一个半透明的矩形来固定图标应该绘制的范围，比如「40px」。然后我们把填充关闭，只使用描边来绘制线性图标即可。绘制完以后我们无需保存文件，仅通过 Ctrl+C的复制快捷键，然后打开 Sketch 或者 Adobe XD 就可以使用 Ctrl+V 将图标粘贴过去了。但是，如果您使用 Photoshop 做界面设计，可能会多两道手续，首先就是线性图标需要扩展才可以复制到 Photoshop 中。将图标复制一份（扩展之后的图标不方便修改，所以要留着可修改版本），然后点击对象菜单 > 扩展，点确定，就可以把原本是没有闭合的路径改为完整的形状。
△ 在Illustrator中的扩展
然后复制，打开 Photoshop 粘贴会打开提示框，我们可以选择把图标粘贴成为像素、智能对象、路径、形状。如果粘贴成像素的话，那无疑对修改是非常不利的。如果粘贴成智能对象，双击智能对象会回到 Illustrator 中修改，但是也有一定缺点，那就是智能对象不能直接在 Photoshop 中进行调整。如果粘贴成路径也不是很方便，所以最好是我们将 Illustrator 中绘制的小图标粘贴成形状。选择后，图标就粘贴成了形状图层，我们可以在 Photoshop 中对它进行布尔运算、锚点调整等操作了。
△ 粘贴到Photoshop中的选项
然而，我们会发现图标粘贴到 Photoshop 中，横竖的路径会出现虚边的情况（圆角和斜线是允许一定的虚边出现的，但是直线不可以）。这种虚边有可能会影响用户的体验，我们必须把它消灭掉。第一种方法：在 Photoshop 中我们可以用直接选择工具后界面上方的对齐路径功能，给它打钩来尝试修复这个问题。第二种方法：我们可以使用直接选择工具选中虚掉的某两个锚点，然后按 Ctrl+T（自由变换），再按键盘的上下或左右「摇一摇」，路径就会清晰了。第三种方法：也可以使用几像素的矩形进行布尔运算强行对齐。三种方法一定能够让图标的横竖路径没有虚边，达到完美的效果。当然 Sketch 和 Adobe XD 都是矢量工具所以复制后没有这个问题。
在 Photoshop 中使用「摇一摇」的方法对齐路径
在 Adobe XD 中，图标无需进行扩展，并可以实时调整描边粗细等属性。
标签栏图标
在苹果和安卓APP 的底部，一般都会有一个放置重要功能的常驻栏，在 iOS中被称为标签栏（也叫做Tab栏）。一般，Tab栏的图标是2-5个。每个图标的区域平分整个 Tab栏宽度，底部会有一个22px（11pt）的文字注释。当然如果图标释义较为清晰，也可以为了保持设计感去掉文字注释。如果我们是以 iPhone6/7/8尺寸设计界面，那么我们的标签栏图标尺寸应该是60px（30pt）左右，可以基于这个范围来设计我们的图标。
△ 互联网产品中优秀的标签栏图标设计
每个 Tab栏的图标都应该设计一个选中状态，可以做样式的变换也可以做颜色的改变，总之要让人知道当前所在的页面是哪个。如果您的 Tab栏由五个 icon 组成，那么可以在中间放置比较重要的功能，并做出突显的样式，比如使用一个圆球当作背景。还要额外注意，图标的选中态样式要和中间突出状态的图标保持区别，以免发生误会。
导航栏图标
在苹果APP 的顶部区域，我们称之为 Navigation Bar，就是导航栏。导航栏左右一般都会有图标，如果是二级页面，左侧一般是返回图标。安卓也有类似的设计。那么我们在设计这种图标的时候一定要保证所有导航栏上的图标大小和风格都是一致的。如果以 iPhone6/7/8尺寸设计界面，那么导航栏图标的尺寸大概是44px（22pt）左右。
△ 互联网产品中优秀的导航栏图标
金刚区图标
在我们逛淘宝和美团的时候您会发现，在它们页面首页都会有一个区域放置很多分类，一般是6-8个大小一样的图标，有可能是圆形，也可能是不规则形状。这个区域其实在苹果和安卓规范里并没有，属于设计师自创的规范。这个区域经常有八个图标组成，被称为「八大金刚图标」，后来很多产品在这个区域并不使用8个图标，我们就称它们为金刚区了。金刚区图标的设计风格应该尽量是微扁平、轻拟物的感觉，这样会有更好的点击感。尺寸方面，金刚区并没有规范，所以大家可以以设计稿最终效果为准。
△ 互联网产品中优秀的金刚区图标设计
图标设计是 UI设计中非常重要的一环，因为除了文字和图片的排版之外，在扁平时代我们能够传递给用户情绪和设计感的通道就是页面中的各种图形和图标了，如果做不好图标，用户就将在使用界面时失去乐趣。所以，我建议每位 UI设计师都需要在平时做大量的图标练习。在不同的图标风格中，学会使用各式各样的武器。
文章来源：优设网 作者：郗鉴
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com