对用户而言，要判断网站的用户体验是否足够优秀是很容易的事情，因为主观感受是很难被欺骗的。但作为网站设计师而言，需要花费大量的时间和精力去面对和体验各种复杂问题，才能完善整个网站用户体验的闭环。
数据表单是一种常见的平台设计样式，在看似乏味呆板的设计中，沉淀着许多优质的设计体验方法。尤其是在信息组织、信息传达、信息承载和阅读性方面，数据表单蕴含了许多设计规则和设计模式，使用户能够轻松地获取、处理信息。该篇文章介绍了固定表头、固定侧栏、自定义栏、分页器、过滤器、数据排序、多选项同时操作、简单且简约、普通的字体样式、项目链接、鼠标悬停这 11 个设计指南，为大家提供有关数据表单设计的实用性建议。
当然，在实际的数据表单设计中，还需要根据产品要求和用户目标进行相应的调整。你对数据表单设计有什么经验体会？有过哪些很棒的设计案例？欢迎交流分享～
对于大多数 SaaS 平台，数据表单是必不可少的组件，可让用户获得相关数据和洞察，从而采取正确的决策。
作为一个前企业家，我使用过各种 SaaS 平台，例如 Mailchimp，Shopify，Klaviyo，Zendesk 等。它们提供不同的服务 —— 电子邮件、订单管理、客户服务等解决方案，其共同点是，都需要将数据反馈给用户。而数据表单则是传输大量数据最好的方法。
数据表单之所以有效，是因为它们能够有序地组织信息和数据，使用户能够轻松地扫描、比较和分析自己选择的信息。这篇文章介绍了我在设计数据表时遵循的关键设计模式。
这一点对于超过 30 行的表单尤其重要。当用户必须向下滚动才能查看所有可用信息时，如果没有固定表头，用户将很难理解和区分多行数据 —— 其中大部分可能是随机数。一个固定的表头可以帮助他们轻松地使用数据表，避免了向上滚动查看字段含义 。
设计提示
我倾向使用 8px 网格系统进行设计，将表头尺寸保持在 16px（最小值）—— 防止你的设计看起来过于沉重和拥挤。
△ 当用户不理解某个数据字段时，固定的表头使得用户无需重复向上滚动查看表头内容
对于数据表单，需要两个组件对所有信息进行排序。一是表头，用于理解显示的数据。二是固定侧栏 ，与每一行数据相连接 ，常用于项目名称，例如活动名称、产品名称、股票名称等。
当数据表单需要水平滚动展示隐藏列时，通过固定第一列项目名称，可以获得与固定表头相同的组件优势，提升信息传达效率。
设计提示
设计固定侧栏时，请在该列的右侧添加阴影和垂直分隔线，提示用户该表支持水平滚动。
△ 当数据表有太多列时，通过固定第一列项目名称，使表单更易理解
自定义栏允许用户根据自己的偏好选择表单显示内容。当涉及多个指标和数据集时，该功能可以满足不同的用户目标 。常用于自助广告平台，例如 Facebook Ad Manager、Google Ads、AdRoll 等，在这些平台上有多种营销指标，每个用户的优先级都不同。
△ 自定义栏允许用户根据自己的喜好对数据表进行个性化设置
我从开发朋友那里学会了对表单进行分页，通过限制正在处理的信息量，减少加载时间。另一种方法是使用渐进式加载，当鼠标滚动到最后一行时，表单自动加载一组新的数据。对比后者，分页器允许用户一次跳过好几个组数据，满足用户非连续性浏览的需求。
设计提示
大多数表单每页显示行数可能超过 30 行，因此，将分页器固定在表单顶部或底部会更加友好，方便用户在页面之间切换，无需过度地快速滚动。
△ 使用分页可以减少加载时间，因为它限制了正在处理的信息量
过滤器组件对于筛选目标信息、屏蔽无关数据量至关重要。日期筛选是最基本的过滤器，能够根据用户指定日期来显示信息。当每列具有固定的展示字段，这意味着信息不是随机的，而是固定的选择，您还可以设置单项信息的过滤器。
最好在过滤器下拉列表中提供复选功能，允许用户选择多个变量 —— 过滤系统越灵活，用户就越容易操纵他们的信息。
△ 过滤器组件对于减少根据用户要求显示的数据量至关重要
排序类似于过滤，可以根据用户的需要重新排列信息，调整信息展示顺序。在大多数情况下，左列会对表单进行默认排序，用户可以单击标题对表单进行相应的排序设置。
您可以将排序添加到表头中，例如按数字或字母顺序对各个数据进行排序。但请不要滥用此功能，它对于状态或类别等特定指标，可能是多余的 —— 过滤器处理这些数据会更合理。
设计提示
尽量避免使用线型图标，选用面型图标来增加可见性。悬停状态能够传达整个区域可单击的视觉提示 。
△ 排序类似于过滤，根据用户的需要重新排列信息
复选框允许用户选择多个项目，并对所选项目执行某种操作 。帮助用户节省时间和精力，不必重复相同的步骤。想象一下，所有的行都有相同的选框，这些选框会重复出现 —— 这会使你的表单看起来杂乱无章。
设计提示
我通常将复选框的大小保持在 24px（最小尺寸），居中布局，提高可用性。此外，高亮显示被选定的行，增强对比性 。
△ 复选框允许用户选择多个项目并对所选项目执行操作
“极简主义” 这个词已经被广泛地使用，空白似乎是现在的趋势，但在这种情况下，少就是多。在设计数据表单时，重点应该放在数据本身而不是用户界面上。用户已经在与大量的数字和信息交互，复杂的界面只会增加用户的认知负荷。
设计提示
没有必要添加额外的视觉干扰，例如不必要的图标、斑马行、随机颜色等。
△ 当你让你的 UI 设计师疯狂的时候会发生什么？
在设计中，排版是样式指南中的一个关键元素，对于品牌推广至关重要。但在设计表格时，您应该遵循上面的指示（简单和简约），不要在表格中使用任何复杂的字体样式。
设计提示
没有推荐的字体，但建议尽量避免使用衬线字体，因为它们往往会吸引人的注意力，导致额外的视觉负担。此外，避免出现大写单词，它会使你的设计看起来沉重。
△ 衬线字体在表格上看起来很奇怪 —— 不知道你们是否看到过使用衬线字体的数据表单
对于特定的表单，项目名称还可以充当链接，这是一种符合用户习惯的交互形式，用户很容易理解链接会将其带到何处。
设计提示
设计文本链接时，请使用不同的颜色向用户展示此链接 —— 仅在文本上加粗或设置下划线并不能提供足够的视觉提示。
设计文本链接时，请使用不同的颜色向用户展示此链接
表单的操作通常放在最后一列。当没有太多的信息列，需要水平滚动信息时，这种模式就很适合。也可以将操作放在第一列或第二列，这样用户就不需要在滚动时跟踪这一行，但操作较多时，可能会产生认知过载，导致不必要的错误。
鼠标悬停可以保持简约的外观 —— 只有当用户将鼠标悬停在相应的行上时， 操作图标和文本才会出现。
以上内容只是原则性说明，主要为你提供一般性的建议，在实际的数据表单设计中，还需要根据具体的产品要求和用户目标进行相应的调整。
文章来源：优设网 推荐：TCC翻译情报局
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
表格和网格一直是产品和后台面板的重要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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com