网页设计表单数字选择 第1篇
处理交互提效建议:
2. 设计目标
三、表格构成
从视觉角度出发将表格分为:标题、筛选操作区、表头、内容、底栏五部分进行构建。
1. 标题
对表格信息内容的整体概括,让用户对表格用途一目了然。标题内容可以包含数据来源、日期、地区等信息。同时在具体业务中也可结合图标对标题进行补充,帮助用户更形象地理解表格传达的内容。
标题作为重要的表示元素一般会放在表格的左上角,符合用户的阅读习惯,同时也能突出标题的重要性。但在有些情况严格意义上的标题则不存在,会被页面标题、面包屑或其他内容代替,主要看其能否表达对表格的概括。
2. 筛选操作区
两个区域常被称为工具栏,其实两个区的功能各不相同,也可以分开讲筛选区与操作区。
筛选操作区指方便用户快速定位查询数据与操作数据,是承载表格核心功能“增删改查”的重要桥梁。筛选操作区的排序方式对整个表格“好查找”起到了至关重要的左右,对不同的业务进行分析对筛选操作区进行排序变化。
3. 表头
表格信息是对数据属性的分类或基本概括,可以理解为表格总结,是用户快速浏览表格布局的关键信息,表头字段应当符合人们的思维惯性,保证大部分用户能理解数据。
表头也可以指行标签,是对所属行或列的描述。表头也可以承担一些简单的筛选、冻结与排序,方便用户对具体的行列进行筛选操作。
4. 内容
内容就是表格的主体区,表格的全部内容信息都在这里获取。内容区是由一个个的单元格组成,单元格所承载的内容就是内容的基本单位。
单元格的排列组成行或列,行/列中的数据可以是文本、计数、百分比、状态、操作等任何形式,在表尾还可以进行数据统计,例如合计、平均值等。
5. 底栏
底栏位于表格最下方,一般展示正文的数据概要信息,有时也做数据的分类统计,或者配合筛选操作区放置批量处理操作、备注说明等内容。
四、表格规范 1. 标题规范
表格标题的示例展示:
示例:teambition项目截图
标题同时承担切换视图与分组的功能操作;飞书会议室管理标题随着右侧架构的变化进行变化,提醒用户当前表格显示内容;Prowork事项标题内容带表格展示日期的区间;TAPD查找过滤表格标题位于表格左上方鲜明扼要的表格展示。
上图标题使用图标样式,增加表格特征与归属感,强化品牌调性。
2. 表头规范
网页设计表单数字选择 第2篇
表格中字体保持一致,文字信息字体统一、数字信息字体统一即可。
数字信息字体选择——建议等宽等高字体,方便数字比较。
推荐一下几款等宽等高字体使用:微软雅黑、Arial、sans-serif。
下图左侧为苹方字体右侧为微软雅黑,右侧可以快速对比数据差异。
9. 分页规范
网页设计表单数字选择 第3篇
表头筛选是一种列表内置筛选形式,类似Excel表格的操作。表头筛选和筛选区的筛选相比,只能筛选一列数据,能节约一定的空间。
虽然表头筛选能在一定程度上节约空间,但对于复杂业务的产品来说,不推荐使用,原因如下:数据信息列多,高频筛选功能可能会被遮盖,表头复杂影响用户表格阅读。
网页设计表单数字选择 第4篇
图标的使用可以更形象地传达信息,但在严谨的表格中要尽量减少图标符号的使用,因为图标符号可能会使你本就繁多信息的表格变得更加复杂,而且为了避免用户对图标产生奇异还会加上文字说明,这样一来就会更加复杂。去除不必要的视觉干扰对表格来说是十分必要的。
网页设计表单数字选择 第5篇
通过对表格信息的排序可以帮助用户快速抓取有用的信息。
通常默认两种排序方式:升序/降序。
这种排序一般在表头触发,可以是正序或者倒序,按照一定的逻辑进行排列,例如是时间的表头则表示最近时间——最远时间或最远时间——最近时间排序。切换排序的逻辑一般认为是默认——升序/降序——降序/升序——默认之间来回切换,具体顺序根据业务确定。表头名称和切换图标都设置成操作热区更利于用户操作。
特殊排序方式较多时可以采用下拉选择直接有效展示,减少用户反复操作。
网页设计表单数字选择 第6篇
image类型的input也是具有一个提交的作用,不同的是可以指定一幅图片来作为按钮,不提倡使用image,因为它有时候会提交两次。
推荐一些系统学习的途径和方法。
每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。
HTML 和 CSS:
网页设计表单数字选择 第7篇
为了强调行内信息的连续性,或采用行的分割线或者斑马纹来进行行的强调。
分割线的分割较为弱,对用户的视觉干扰小。
斑马纹又称作隔行换色、行的交替样式。它能很好地区分相邻两行,有效降低读错行的情况,同时能够加强对用户横向阅读的引导。但在设计时要尽量的减少色的反差,还要注意区分hover态与斑马纹,避免造成视觉干扰,可以根据实际情况添加1px的行版框。
网页设计表单数字选择 第8篇
可以进行筛选选择,表现为表头复选框右侧的下拉操作,常用于用于业务复杂场景。
可以筛选状态也可以筛选当页或者全部页,选择时告知用户是否是当页还是全部页。
网页设计表单数字选择 第9篇
需要对一些批量操作进行二次确认,一般采用模态弹窗对用户进行强打断,以确保用户不是误点。
操作完成后提示用户操作结果,无任何操作后15秒消失。
网页设计表单数字选择 第10篇
筛选条件很多,单独筛选条件对应数据无交叉,常见于信息密集型产品,可以承载多维的数据信息。选中项的可见性也十分友好,用户理解成本与操作成本低。
缺点是占用太多页面空间,会压缩用表格的占比,影响首屏的展示效率,可以区分高频和低频的筛选项折叠展示。
网页设计表单数字选择 第11篇
分页可以将表内容信息划分成独立的页面来显示。
分页并不属于表格当中的必要构成,但当数据超过所设定的阈值时,就需要使用分页来分布加载数据,所以分页和表格是经常联系在一起的。
分页也可以根据不同的场景业务需求从简易型、基础型、完整型中选择最优的设计方案。
网页设计表单数字选择 第12篇
除了分页的使用还可以进行无限滚动的交互,例如下图的查看更多按钮,这个功能不太适合数据量较大的表格,在具体业务中一定要慎用。
五、表格应用场景 1. 基础表格
基础表格是根基,是由行与列的单元格组成。在使用层面上能满足用户多维度查看数据的需求。因为大家都很熟知,在这一章节并不是主角,我们就不做过多赘述。
从上往下堆叠,数据过滤模块在最上方,过滤数据后,用户再由总体到具体的的浏览逻辑理解和分析。