正好，最近有些设计师私下问我关于竞品分析的事情，因此写一篇文章，把我的想法与大家分享，下面开始。
比如以音乐软件的搜索入口为例，站在用户视角看，这个产品核心功能是怎么布局的？体验亮点怎么设计吸引用户的？视觉质感呈现如何打造？主流表现技法？需要将每个竞品的做法优劣截图对比，并将优缺点写出来。
文章来源：公众号 作者：功夫UX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首屏页面是用户首次浏览网站时所接触的「第一视觉」，也就是说它是整个网站设计中的门面工程。因此，首屏页面的设计是网站设计的成功关键，它将关系到网页设计吸引用户停留并做出预期动作，或迫使他们直接离开网站。
对用户而言，要判断网站的用户体验是否足够优秀是很容易的事情，因为主观感受是很难被欺骗的。但作为网站设计师而言，需要花费大量的时间和精力去面对和体验各种复杂问题，才能完善整个网站用户体验的闭环。
数据表单是一种常见的平台设计样式，在看似乏味呆板的设计中，沉淀着许多优质的设计体验方法。尤其是在信息组织、信息传达、信息承载和阅读性方面，数据表单蕴含了许多设计规则和设计模式，使用户能够轻松地获取、处理信息。该篇文章介绍了固定表头、固定侧栏、自定义栏、分页器、过滤器、数据排序、多选项同时操作、简单且简约、普通的字体样式、项目链接、鼠标悬停这 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com