网站域名在哪里买,深圳电器公司简介,天津建设部网站保温,宿迁房产网58同城网二手房表格是桌面应用中常见的内容型组件#xff0c;它包含大量的信息和丰富的交互形式#xff0c;表格具有极高的空间利用率#xff0c;结构化的展示保证了数据可读性。高效、清晰且易用是进行表格设计的原则性要求。本文将从表格的内容组织到交互作一次汇总#xff0c;作为数据…表格是桌面应用中常见的内容型组件它包含大量的信息和丰富的交互形式表格具有极高的空间利用率结构化的展示保证了数据可读性。高效、清晰且易用是进行表格设计的原则性要求。本文将从表格的内容组织到交互作一次汇总作为数据类产品的设计总结。 初次设计数据表格建议阅读 Material Design 关于 Data Tables 的内容包含了对表格设计基础而全面的指导。 Data tablesmaterial.io1 系统化表格需求我们在选择信息的展示形式时需要思考的是「用户的需求」以及「不同交互模式的特点」。 除却基本表格组织根据用户需求表格需要增加一些额外的功能例如标记预警/异常值常见于数据监测系统、展现数据变化趋势的图标快速理解数据意义等。 结合数据特征我们可以梳理出一份包含数据内容、展现形式和交互的功能架构图便于指导表格设计和开发。 译自参考链接1 有删改2 信息组织2.1 行固定标题行 保证在垂直滚动时能够及时获取数据的指标含义。合理使用斑马纹 斑马纹强化了水平分割线的功能特别在宽表格/行样式复杂中能够引导阅读视线现今办公软件中的默认表格样式也依旧采用了斑马纹。但在大型结构化数据集中斑马纹带来了额外的视觉负担且会与单元格背景色冲突。需要按照场景权衡是否使用斑马纹。 斑马纹表格 VS 水平分割线表格浅色分割线分割线可以在更小纵向空间内将数据分隔开需要注意分割线色值防止干扰数据阅读并造成版面视觉过重。 各大设计规范分割线色值减少重复的元素常出现在数据单位和操作文案上为了保证清晰简洁设计时考虑调整重复样式和精简交互文案。 2.2 列「F型」 布局在左→右阅读习惯中将数据维度按照重要性高低从左至右排列遵循「F型」布局方便浏览时快速定位重要指标。固定列 首列或多列一般为样本身份标志例如名称、ID号与固定首行相似能够方便用户对应样本名称理解数据含义特别在存在水平滚动条时。 可以使用阴影样式和水平滚动条作为视觉线索。列分割线当表格的表头和内容整洁对齐时表格自然形成视觉秩序合适的间距可以取代纵向分割线。相对地当表格水平空间较小或是有着复杂表头时纵向分割线可以帮助数据识别。对齐方式定性内容左对齐定量内容数位对齐表头应用该列对齐方式。在表格中使用无衬线字体减少视觉噪音涉及数字时注意使用表格字体或等宽字体保证数位对齐能更方便阅读数字和比较大小。 免费数字字体blog.graphiq.com对齐方式可调节的列宽当表格指标过多或内容过长时我们会使用水平滚动条对实现信息隐藏。也可以通过可调节的列宽在一屏宽中展示更多的数据指标指标。设置最小列宽时以能显示可辨识的指标内容的最小宽度为依据当指标文本过长时设计为两行显示或悬停显示完整信息。悬停显示完整信息3 表格交互筛选筛选功能能够根据用户需要减少展示数据一般分为搜索和条件两种筛选方式。筛选区块设置在表格顶部内容过多时可以收起。 排序可以根据某个指标维度对表格样本进行重新排序。排序按钮一般设置在指标名旁在设计时需要注意可点击范围。 可点击范围批量操作当多行数据需要进行同一个操作时设计表格时可以归置为批量操作。 模态批量操作 当表格数据不全部满足批量操作触发条件时可以使用模态批量操作。在点击批量操作按钮后显示多选框不符合条件的数据处于禁用状态选择后「确定」实现批量操作。 内联操作内联操作即直接在单元格内进行编辑等操作用户可以通过双击单元格或是点击鼠标悬停后出现的功能按钮完成操作。 分页器表格加载有分页加载和渐进加载两种方式。使用分页加载能够实现数据页面直接跳转而不用依次加载全部数据。当表格高度超过一屏时可以在表格上方和下方都设置分页器实现灵活浏览。 文章列举了目前设计工作中常见的表格设计点除此之外还有许多需要优化和权衡之处例如键盘支持功能的优化Web 端表格的右键菜单等。在持续积累之外也欢迎各位的讨论。参考链接Slava Shestopalov, How to Design Large and Complex Web Tables, Medium MuzJeremiah Lam, 11 data table design guidelines, uxdesign.ccMatthew Ström, Design Better Data Tables, MediumQubstudio, Data Tables Design Basics, Design NationPage Laubheimer, Designing Tables for Desktop Apps with Lots of Data, NNgroup
