设计和开发出色数据表的 20 条规则
表格和网格一直是产品和后台面板的重要 UI 组件. 然而, 即使到了今天, 也很容易找出设计不当或用户体验不好的数据表.
今天我们邀请了 Gil Bouhnick , 来跟大家一起聊一聊「如何设计出一个可观的数据表」.
接下来, 就进入正题吧~
我使用过 30 多种 SaaS 工具和 SDK , 经常用它们的后台面板看数据, 观察到了一些问题并做了反馈. 实话说, 它们在 UI 设计和基本功能上, 对表格的展现形式还挺糟糕的(虽然它们都是很好的 Saas 产品).
鉴于我开发使用表格 20 年的经验, 决定为大家来总结一下最基本的处理表格的 UI / UX 规则了. 请相信我, 这 20 条就足够了...
本文将从 功能, UI 设计 和 美观性, 这三个方面来阐述.
数据表设计之功能
1. 从排序和筛选开始:
是的, 我也知道排序和筛选很烦人, 我也讨厌他们, 但必须先说它们. 除非你打算做一个不到十条记录或者类似情况的精美表格.
排序和筛选不仅是可用性或易用性的功能, 更是 摘要数据的关键 : 了解趋势, 比较记录, 查找特定值, 没有排序和筛选就无法完成这些工作.
如果添加基于列的筛选 (如日期, 布尔值, 字符串等元数据) 成本太高, 那么可以从更基本的内容开始筛选, 例如现代搜索框或一些常用的硬编码.
2. 确保列的大小可调整
这是一种查看信息的方法, 无需深入研究每条记录.
不管你的列宽有多大, 也不要将列表固定住, 因为有时候用户需要进一步扩展.
3. 允许列重新排序
对于大型表格, 不能一种大小适用于所有 情况 .
通过重新排序列, 用户可以设置符合它们特定需求的表格. 这个相对小的功能可以减少混乱, 并节省一些来回滚动.
这时, 列的名称体现了大量信息. 重新排序列能够使用户可以专注于特定区域并理解小块信息.
4. 内联的编辑
有许多用于编辑单元格的 UI 解决方案: 内联框, 弹出窗口, 可扩展节等.
我不认为上面的方案是最佳的, 因为它依赖于功能, 数据类型, 使用案例. 从用户角度出发, 我最喜欢的方案是侧视图(快速视图).
一旦选择一个项目, 它就会从侧面弹出的方法.
这个方案, 我最喜欢的是它可以保持上下文(与弹出窗口不同), 易于使用, 即使是在垂直滚动视图中显示大量字段的情况下也效果良好.
数据表设计之交互设计
5. 小屏幕设计
当然, 大显示器看表格, 设计和开发都会很爽, 但是还是有人在用笔记本电脑或 iPad! 他们又做错了什么!/ 手动狗头
不停的滚动, 缩小的列, 隐藏的文本, 这些都会干扰用户体验, 所以一定要在小屏幕上验证你的设计, 并且尽可能使用上一段时间去切实体验用户使用情况(而不是随意测试).
如果确实很糟糕, 你可能需要在解决问题上发挥自主创造力, 不过前提是你很了解它.
6. 彩色交替行
使用大型数据表时, 很容易丢失.
斑马纹的表格可以帮助用户保持其位置, 但是彩色的行必须非常浅, 否则会引起误导, 看起来像选定的行.
使用浅色时, 应该将所有内容设置为浅灰色, 避免使用黑色线条和深色边框.
7. 使用固定表头和 "冻结" 列锚定一些标识符
我认为在任何屏幕上显示大量数据时, 表格都应该能正常浏览.
要浏览数据, 用户就需要经常滚动, 这意味着需要一些锚点来辅助:
向下滚动时, 列标题必须 固定 (这是最基本的)
第一列应该被 锁定 (MS Excel 和 Google Sheets 称其为 "冻结"), 因为, 当你水平滚动时, 需要该行联系上下文.
一个 全行选择 选项, 用于在水平滚动时标记重要行.
8. 设置固定的行高
表格和网格是体现 结构化信息的 , 但是, 当表格的列宽, 行高不同时, 就会变得 混乱 , 信息也就会变得没有体系.
因此, 为了整体的可用性和美观性, 我觉得不管内容如何, 所有行都应具有完全相同的高度.
为了更好地支持多行文本块, 请考虑以下事项:
用换行替换为空格, 并将整个文本变成一行(通过调整列宽的大小)
将 (所有行的) 行高设置为 2 行而不是 1 行(可以解决某些情况)
使用工具提示(可以用, 但是最好不要用)
通过单击行来展开 / 折叠(刚需)
采用浮动侧视图显示所选行的详细信息.
数据表设计之 UI
美学设计可以带来更好的使用感.
以下是通过简单的 UI 设计修改来消除杂乱并提高内容可读性的几种方法:
9. 增加单元格填充
使用空格.
加载信息的表, 正是用户想要看到更多空白的地方, 即使这会花费他们一些额外的滚动时间.
10. 消除不必要的边框
一旦数据结构良好并且留有空白, 就该摆脱那些多余的边框, 或者让边框线条变得超细且颜色浅.
11. 将黑色变成深灰色
黑色会增加眼睛疲劳感, 如果它与边框和框架一起出现, 简直是灾难.
深灰色使所有内容都变得精细柔和, 并且让表格看上去不那么杂乱, 更有利于用户专注于内容.
此技巧也与暗黑模式有关, 在暗黑模式下, 深灰色背景对眼睛比全黑背景更友好.
12. 文字应与顶部垂直对齐
如果你计划每个单元格有 2-3 行, 请确保它们都与顶部对齐, 否则, 你将最终遇到文本从中间行开始的单元格, 会逼死强迫症.
13. 文本应水平对齐到左侧
左对齐更容易阅读, 因此, 如果你的单元格显示大量文本, 请使用左对齐.
14. 数字应水平对齐到右侧
不要让你的用户担心小数.
当涉及数字时, 将文本向右对齐可以更轻松地查看.
15. 特殊字段应水平对齐到中间
布尔, 日期, 电话号码等应该中间对齐, 保持结构的一致性.
16. 使用一致的字符串格式
结构化字段 (如电话号码, 日期, 持续时间) 的格式都应该使用固定的格式.
例如, 1/1/19 的格式应设置为 01/01/19, 以确保所有日期都具有相同的视觉加权.
13-16 的规则体现, 如图所示
17. 避免使用太多颜色
从某种程度上说, 太多的颜色, 用户反而对颜色会不敏感, 所以应该精准地使用.
一般将颜色设定在一个专用的列内, 并且 1-2 种颜色就足够了.
18. 避免使用太多字体样式或粗细
如果采用太多的颜色, 字体样式, 不同粗细, 就会导致表格变得乱七八糟.
所以, 通常 1 种字体类型就足够了, 偶尔再加粗.
19. 不要用太多的状态图标或按钮来丰富你的表格
尽量减少视觉符号的使用, 因为视觉符号可能会使你的用户界面复杂, 产生难以理解的内容.
使用鼠标悬停, 可以突出显示一行以及相关的操作按钮.
20. 支持批量操作的多种选择
如果你的表格涉及大量编辑, 用户需要快捷方式.
提供快速简便的快捷方式的一种方法是允许多项选择.
以上 20 条就是非常基础的表格规则, 但是由于各种的原因, 在大部分的产品设计中会有一些规则被舍弃.
但是在设计时, 我们需要考虑到这些.
现在进入 墨刀 https://modao.cc/?utm_source=ui , 可以体验非常强大且简洁的表格功能(点击这里了解), 搭配 Element 相关组件, 定能助你设计出你心中最完美的表格.
Powered by Froala Editor https://www.froala.com/wysiwyg-editor?pb=1
来源: http://www.tuicool.com/articles/RVzA7fb