提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
自从国内C端产品用户到达天花板后,B端产品,中台,SAAS渐渐流行起来,B端产品基本离不开表格的设计,本文主要介绍谷歌的数据表格设计规范,希望给大家带来一些启发
谷歌数据表格设计规范主要从五个方面来进行阐述:
1.用法
2.构成
3.交互操作
4.深色主题规范
5.参数尺寸
一.用法
数据表以行和列的形式展示信息,以易于扫描的方式组织信息,便于用户查找和理解信息。
数据表可以包含:
数据表设计原则:
1.组织有序
表格内的信息呈现应该具备一定的组织原则,例如按照信息优先级原则或首字母A-Z排序。
2.交互原则
数据表格应该允许用户进行交互操作,使用户对表格信息进行自定义操作和展示
3.易用性
表格信息的呈现应该遵循一定的逻辑原则,便于用户理解表格内容
二.构成
数据表的内容由以下部分构成
1.表格
列
每列行高为52dp,列标题行高为56dp(比常规行高4dp)
列间距
列之间的间距填充为32dp或更多
列标题文本使用中等粗体字体(以区别于行文本)。
长于列宽的文本将被省略号省略。鼠标悬停时,显示全称。
为了帮助用户对信息进行排序,默认情况下,列可以显示列排序。
列标题的名称旁边放置一个向下或向上的箭头图标来表示列的排列顺序。用户点击标题名称或箭头图标可以进行反向排序,点击后,箭头图标旋转180度。向上箭头指示按列排序(升序),表格反向排序:向下箭头表示该列以降序排列。
选中行复选框后,该行应显示背景色。
当用户发大屏幕,显示器一屏的宽度显示不下复选框以及其他所有列的信息时,背景色可以提示用户选择是哪一行信息
行悬停
当用户将鼠标悬停在一行上时,该行应该显示背景色。
列悬停
当用户将鼠标悬停在列标题上时:
在表格的信息里面可以增加菜单选择,来展示更多的信息
分页控件一般位于表格底部,提供对所有页面的快速访问,同时暗示存在更多页面。
包括:
四.深色主题规范
背景色:#3C3C46 100% 正文颜色:#FFFFFF 100% 表头颜色:#FFFFFF 60%线颜色:#FFFFFF 12%
正文字号:14px
五.尺寸规范
交互式元素的最小点击区域是48 x 48 dp。点击区域可以大于图标大小
数据表默认情况下为带有细微的圆角的圆角矩形。圆角半径:4dp
将数字向右对齐以提高可扫描性。
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册