学做窗帘要下载哪个网站,做软件的公司网站有哪些,农村创业好项目,中小企业网络管理员实战完全手册一、 数据查看让我们先来回顾一下表格的基本构成#xff0c;最上面的为表头#xff0c;横为行#xff0c;纵为列#xff0c;内容区每一组展示数据区域为单元格。 表格的设计#xff0c;虽然看似简单#xff0c;但是作为用户最常用的组件之一#xff0c;我们需要对视觉和…一、 数据查看让我们先来回顾一下表格的基本构成最上面的为表头横为行纵为列内容区每一组展示数据区域为单元格。 表格的设计虽然看似简单但是作为用户最常用的组件之一我们需要对视觉和交互的精准把握才能保证用户在使用表格时更加高效。这里我推荐表格的四维自检法“对我们设计的表格是否合理做出一个标准的判断。分别是信息降噪、呼吸适中、高效易读、详情查看。信息降噪分别对表格内容和视觉层面进行重要性梳理剥离不重要的元素使表格轻量化呼吸适中保持内容和元素之间合适的间距使表格页拥有一个好的呼吸感将给用户营造一个舒适的操作环境高效易读通过对需求内容的解读对内容形式加以分类辨别做出可读性最强的样式详情查看b端系统往往伴随着表格数据类目庞大的问题通常会采用另一种形式去展示全部信息。1.1 信息降噪1.1.1 精简表格内容当表格的字段非常重要时一定要将字段全部展示出来让用户更清晰的了解数据。如果你的用户只需要了解部分字段那么全部展示是没有必要的只需在展示最重要的字段即可。1.1.2 自定义字段展示不同用户想看的的信息侧重不同有时候我们无法准确判断用户看重哪些字段还可以让用户自定义展示字段。1.1.3 精简字段名称当我们去设计表格的时候通常会发现表格需要承载的信息量是非常大的有时候为了表现出字段的准确含义在定义字段名称时往往会非常的长。但是当这些字段同时出现在一个表格里时过长的字段名称又会显得冗余让本就不大的页面空间更加杂乱。所以当我们设计表格的时候我们可以分析字段名称对字段名称做精简看看是不是少一个字用户就无法理解字段的含义。1.1.4 添加字段说明当字段名称过长又必须展示才能有效的理解字段含义时。我们可以定义一个专有名词代替并且在字段名称后使用添加字段说明的形式来对字段加以说明。这样一来用户既可以清晰的理解字段含义又可以在有限的页面空间下获取到更多的数据信息。1.1.5 简化表格样式早期表格的设计出发点主要以拟物形式以最接近现实表格的样式去设计。但是随着互联网的普及度加深极简的表格设计使界面更加轻盈让用户更加专注于数据内容。去除纵向列的分割线仅以浅色的横向分割线区分行但是要注意分割的颜色不能过于浅而缺乏辨识度部分人群对颜色的辨识度会偏低显示器的硬件性能也会影响颜色的可辨识性。1.1.6 减少不必要的颜色区分表格设计中一定不要使用过多的颜色区做状态或操作的区分过多的颜色细分会使表格变得更加混乱影响用户体验。对状态的区分仅用轻量的颜色区分即可操作栏保持主色按钮色。1.2 呼吸适中1.2.1 如何定义单元格的高度了解单元格的结构以及实现单元格的基本逻辑有助于我们更好的去把控我们的设计。单元格内的可控尺寸包含单元格高度、文字字号、文字/段落行高、文字上下间距。我们基于视觉呼吸感赋予各个元素合适的尺寸我在这里给出一套参考方案文字字号 N 文字行高 1.5N上下间距 1.2N单元格高度 内容高度 上间距 下间距1.2.2如何定义列的间距首先我们要了解列的两种类型第一种是定宽列第二种是自适应列。a.定宽列顾名思义就是它的宽度是固定的比如第一列我们设置宽度为200px第二列我们设置为300px五六七列分别设为100px那么我们这个列表就的宽度就等于200 300 100*3 1100px在任何分辨率尺寸下你的这个列表都会保持这个宽度不变。b.自适应列就是列会随着分辨率变化而产生宽度的变化比如列表有五列我们定义列表的宽度为界面宽度的50%假定界面宽度为1200px那么列表宽度就为600px而每一列的宽度则为120px。此时我们将界面的宽度缩小到600px时那么列表的宽度就为300px而每一列的宽度则为60px。在实际设计案例中我们往往会面临由于每一列的内容不同所需要的宽度也就不同我们希望在列不多时可以保持宽度自适应但是如果每一列都做成自适应列的话内容多的列无法展示全内容内容少的列空间又会很大。所以固定列 自适应列的综合运用可以让我们更好的实现我们想要的设计方案。c.列的结构然后我们一起来了解列的结构。每一列分为内容区和左右间距区在固定列里面内容区和左右间距区都是保持不变的。但是在自适应列却不同它的内容区是随界面分辨率变化而变化的左右间距区的宽度是保持不变的(在代码里间距区被叫做Padding)。d.固定列当表格字段数量不确定时通常我们会为自定义列的内容区写一个最小值(min-width),以确保字段很少时可以自适应宽度字段较多时仍然能保证完整展示表格数据不影响对内容的阅读。当表格的列过多又必须全部展示时固定必需固定的列(如姓名、任务名称、操作项等)其他字段横向滚动。1.3 呼吸适中1.3.1 列的对齐方式基于人的惯性浏览顺序设计每列合理的对齐方式能够辅助用户更高效的完成工作。a.标题和内容一般采用左对齐更高效的浏览顺序b.有长短不一的数字时(序号除外)右对齐方便比较 ;c.操作项一般放在尾列右对齐1.3.2 不留空白格从心理学的角度讲人对未知事物会产出恐惧情绪。我们在设计表格的时候要考虑到表格的各种展示情况非特殊情况不出现单元格空白。没有数量用“0”表示没有该项内容用“-”表示。1.3.3 选择合适的分页器表格是一种可以承载大量数据的组件当数据行数很多时我们通常会选择分页器使用分页器有哪些优点a.快速查看通过分页数据加载缓解服务器压力b.清晰易读由于界面的空间是有限的通过分页展示数据有助于缓解用户的阅读压力c.灵活便捷如果客户想在一页展示很多数据可以通过分页器自行选择还可以了解到数据的总数目。1.3.4 收起低频的操作项当界面空间有限、表格列数很多时如果表格的操作项过多会占用很多页面空间需要有选择的展示将低频操作项收起用点击更多按钮去触发选择。如果是1.0的产品我们可以和产品经理沟通分析每个功能按钮的优先级。如果是上线的产品我们还可以通过按钮点击PV(页面成功访问次数)来了解按钮的使用频率做出按钮优化。1.3.5 行的排序如果产品没有特殊需求那么默认最近创建的在最上面。可以用带有排序的表头让用户自定义排序。1.4 查看详情1.4.1 详情入口如果表格的内容项很多我们通常会在表格上只展示部分重要数据而其余数据放在详情页面展示。作为详情页面的入口通常会有两种设计方式a.将详情按钮放在操作项里b.将首行的名称做成可点击样式点击跳转至详情1.4.2 详情页的展开形式如果详情内容不多没有新开页面的必要我们可以采用展开行、弹窗、抽屉的形式但是要注意尽量减少过多的样式给用户增加疑惑感。如果详情的内容很多而且编辑的需求建议采用新开页的形式。建议根据详情页信息量的多少以此采用展开行、弹窗、抽屉、新开页的形式。二、数据过滤数据过滤是表格页很重要的组成部分包含搜索、筛选、标签页。这一部分的主要作用是帮助用户梳理表格数据信息精准定位所需的数据项。2.1 搜索2.1.1 模糊搜索模糊搜索是指在用户搜索意图不明确时搜索引擎将用户的查询与待检索的内容进行模糊匹配找出与查询相关的内容。模糊搜索无法精确理解用户的查询意图返回的结果中可能包括了一大批用户不想要的信息所以在使用模糊搜索时一定要结合自己的实际场景慎重使用。优点只要有相关的内容都会被检索出来减少了精准搜索带了的记忆负担缺点容易把相关的信息也带出来例如检索手机号把相关编码也匹配出来2.1.2 精确搜索精确搜索是指用户在搜索时针对某一数据字段搜索来查找所需要的数据。根据业务场景不同我们会查找某一字段或者是用标签切换不同字段来查找。优点搜索匹配精准度高缺点每次只能对单一条件进行搜索2.2 筛选筛选器主要是针对内容较少的字段进行查找的一种方式 通过筛选器的选择可以快速定位所需的数据取消用户输入的过程提升查找效率。一般筛选有两种形式第一种是下拉筛选第二种是平铺式筛选。2.2.1 下拉筛选下拉筛选就是将需要筛选的内容放置于选择器当中通过点击选择器下拉来选择需要筛选的内容。优点空间利用率高起到了很好的收纳作用缺点无法直观看到所有的筛选项2.2.2 平铺筛选平铺筛选就是将筛选项的内容直接展示于页面之上通过点击选择的方式直接进行筛选。或者可以通过自定义内容的筛选。优点操作效率高筛选项一目了然支持输入更多筛选条件缺点空间利用率低不适合选项太多的情况2.2.3 如何合理的使用筛选项当数据内容需要的筛选类目过多时如何合理的摆放才能提高用户的使用效率。a.信息排序基于用户使用场景以目标导向为依据将高频的筛选项排列到前面低频的筛选项置于后面b.默认折叠低频筛选项当筛选项过多时会极大的占用界面空间使用户在阅读数据时产生非常不好的用户体验通过展示高频筛选项、隐藏低频筛选项将更好的提升用户体验。c.所有筛选项都很低频以点击高级筛选按钮的形式触发将全部筛选项置于气泡或者弹窗之中。如何判定筛选项的使用频率呢通常会有两种方式第一种是给筛选项增加数据埋点这样一来就可以通过对用户点击行为的分析了解到筛选项的使用频率第二种是用户调研通过问卷或者面谈了解到用户的真实使用需求。2.3 标签页标签页又叫选项卡在组件中我们通常叫Tabs指的是分隔内容上有关联但属于不同类别的数据集合。2.3.1 默认展示常用项在使用标签页时有一点我们要特别注意通常在B端设计中我们会把标签页的位置定位在最常用的一个选项。2.3.2 增加数据条目如果是订单一类的分页我们还可以将数据条数展示在标签右侧用来帮助用户快速了解到待办数据量。三、数据操作3.1 分类数据操作即对表格的数据进行操作首先我们对数据操作进行分类。按控制范围分:a.单行操作b.批量操作c.全局操作按操作属性分a.新增数据b.编辑数据c.删除数据d.业务处理3.2 如何合理的设计数据操作第一步先判断控制范围第二步判断摆放位置第三步优化信息层级以上是操作项和筛选项较多的情况那么不多时我们还是要合理利用空间灵活设计以上就是《如何设计表格》的全部内容了后续还会努力更新更多B端设计分享与君共勉