网站建设问答小编今天给大家整合了一篇有关《web表格设计解析》的文章，关于web表格设计解析的详细内容欢迎往下阅读，下面就由小编一一给大家介绍，一起去了解吧！

　　为大家梳理一个web表格设计框架，希望还能给你们带给完整的不一样的内容。全文12,598字，预计阅读30分钟，建议收藏。

　　在网站或桌面端为载体的B端产品和制造力工具中，越来越多的设计师必须和数据打交道，查询和处理数据的素质是当前正在设计的大多数产品的关键要求之一，表格被公觉得是呈现数据最为清晰、高效的方式之一，也是全球上最常见的用户界面软件，其重要性不言而喻。

　　表格，展示行列数据，既是一种可视化交流方式，又是一种整理数据的方式。表格帮助我们组织和展现信息，同时确保信息的可读性，从长期信息中找到所需内容；借助合理布局，感知不同信息间的关联与差别，进行预测和非常；对数据进行顺序、搜索、分页、自定义操作等复杂行为。

　　1.1表格的布局

　　表格的行元素和列元素行和相交就会产生一个简单的二维表，行，列元素的空间组合就确认了一个个单元格。常见的表格布局有水平型、垂直型和矩阵型三种基本布局，分别提出行、列、单元格。

　　水平型会削弱列的存在，强调行信息的连贯性，适用于客户阅读信息时是从左到右，然后自上而下逐条扫描。垂直型是借助强化列的视觉特性来突显不同列信息的对比。矩阵型的表格有均匀统一的分割线，单元格非常显著，适用于列信息增多而没有足够空间用留白来分割信息的表格，同时我觉得单元格合并的状况也属于矩阵型。

　　也有相当常见的表格类别层级型：

　　层级表

　　是表达结构性关系的表格，表现得就像树的分支，所以又叫树列表。每一个条目可展开或折叠包含的更具体的行信息，也包括嵌套子表格。

　　层级表并不如矩阵表直观，但借助结构化的组织形式逐级展示表的数据内容，让整体信息架构一目了然，非常合适大型数据表。

　　结合层级表的使用画面，多以查看为主，编辑需求较少。

　　同时也有特殊的表格类别，图表型与卡片型：

　　图表型

　　比如在单元格中引用图表之外，很多之后就会提供图表/表格视图切换，便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的方式，这之后，表格通常只成为明细放在页面底部。大量的表格也会造成视觉的单调。

　　卡片型

　　可以用卡片的方式来展现信息，将信息以组的概念呈现，单张卡片内的信息按优先级进行排列。此外，卡片彼此之间又产生一个整体。

　　卡片是一种承载信息的容器，对可承载的内容种类无过多限制，它让一类信息集中化，增强区块感的同时更容易操作；卡片通常以网格或矩阵的形式排列，传达彼此之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。

　　注：在有限的表格空间内需注意卡片信息之间的间距，若卡片信息过长可做截断处理。

　　在实际工作中，上述表格类别还有或许互相结合，以更好的超过相应的预测目的。

　　例如垂直–层级，矩阵–数据立体表等。

　　1.2表格的构成

　　从视觉结构的体现角度，个人将“表格”的构成分为：标题、表左边筛选操作区、表头、表体、底栏。由表头、表体组成外部区域，由标题、筛选操作、底栏构成外部区域。

　　标题

　　标题是对表格信息内容的整体概括，可包括数据来源及属性(日期、地区等)，以便用户对表格内容有整体认知。给数据表格起一个清晰简明的标题，与其它的设计同等重要。有了好的标题，表格就可以独立使用，如果导航菜单层级清晰，同样能起到标题的功效。标题作为最重要的识别元素，默认展示在左上角。

　　筛选操作区域

　　此处特指位于表头的顶部的操作区域，包含筛选，操作按钮等其它操作。筛选区包括模糊搜索和条件筛选，按钮分为增删改和其他业务处理操作，合理设计筛选区可以大大提升用户的效率。

　　表头

　　表头对数据性质的归类。表头按惯例要对数据的简况做出反映，如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济情况等。表头的字段名称应该符合他们的认知习惯，保证客户理解。如果有必须解释，则在字段名称后面加表明小图标(小问号)。表头在此处也能指列行标签，是对所属行或列数据的表述。

　　比如容纳行/列标签此外，表头也可以进行顺序、搜索、筛选等。

　　表体

　　表体是表格的主体内容，具体信息数据内容的填充区域，由一个个基础的单元格构成，单元格是表格呈现数据信息的基本单位，可以是计数、百分比、均值、"-"等任何数据。表体包括数据，分割线，背景，单元格数据可进行点击操作，如链接跳转(项目以及商品等)、展开嵌套表的子集信息(子表格)、操作按钮(查看编辑)等。

　　表尾通常是统计类数据，例如合计、平均数等。表尾使用频度较少，且重要性显著不如表头，我就把它归到表体这类。

　　底栏

　　底栏在表格最下方，主要展现正文中的数据量或单页数据的概述信息，也常提供统计用途，供用户知道总体进展。底栏通常放统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。

　　底栏最常用的元素就是分页，分页可以置于背部或顶部，常见的而是放在上面，分页固定能省去用户必须翻到上方或顶部进行操作的麻烦。分页可分为整体页码平铺式、全功能版、简易版等，需要按照不同的画面选择最优的设计方案，比如有的之后并不应该定点跳转。

　　无限滚动可以代替分页，但针对功能优先的应用或许适用。下图为查看更多按钮，比较少见：

　　同时，在选中操作的下，操作按键也可以位于底栏，在未选中时操作置灰。

　　采用格式一致外观，突出有促使对象识别的关键信息。

　　2.1视觉标准填充与宽度

　　合适的填充和宽度对于视觉设计至关重要，既包含确保数据单元格之间的留白，又包含单元格内部留白，以确保易读性，当建立表格设计完善并严密遵守后，就可以建立视觉一致的表。表格原本应具备最小厚度，在不同场景中宽度应可以下降到整个空间，所以每位列也需具有最小长度。如果页面宽度大于表格，那么表格应水平可拖拽。

　　对齐方式

　　数据合适的位置排列就能提高数据的浏览效率和具体度。对齐能够较好的产生视觉引导线，会让表格变得完善易理解，给用户视觉上的统一感，视线流动更流畅，让用户迅速的捕捉到所需内容。

　　正如连续律所表述的，人们偏好于把那个经历最小变化或阻断的直线或圆滑曲线知觉为一个整体，倾向于使知觉对象的直线继续作为直线，使曲线再次作为曲线。在界面设计中，将元素进行对齐，既符合用户的感知特征，也能引导视觉流向，让客户更顺畅地接收信息。

　　数字应该右对齐

　　在表格中，诸如金额、数量等数值排列时，通常选用“右对齐”模式，既便于客户快捷读取数据，还可以使用户进行横向数据对比。数字是从右向左读的，是由于我们对比数字时，首先看个位，然后十位、百位。当个位数值对齐时，我们就可以迅速查看里面的数值，比较多个数据的大小。因此，表格的数字应该右对齐。

　　当我们常见的字体如果不同数字间距不一致时，会造成千位分隔符不在一条直线上，所以要选用数字等宽的图标，等宽的数字在同一竖线时更容易对比。

　　文字信息左对齐

　　由于我们阅读文字信息是从左向右读，如果不运用左对齐，会增加浏览文字的效率。

　　混合型文本左对齐

　　当数字、文字、字母构成混合数据时，标题和正文左对齐，使用了一个视觉起点。

　　在实际工作中，主流框架部件，表格列数据对齐同时对于分割线，虽不是完美中的对齐，但开发成本低。

　　不论什么对齐方法，都必须考量到该字段可能存在的极端状况。如：普通文本若过长，可在鼠标悬停状态时单元格展开列出全部字段信息。

　　色彩

　　通常表格具备的色彩尽可能少。颜色和可读性是紧密相关的，要合理的使用材质，普通表尽量使用简洁的背景色和衬托色。背景色方面，除了行/列交替颜色(可以区隔内容，引导视线)、悬停高亮颜色(便于精确判断光标所在行)等处理方式，还可以对表头表尾进行视觉区分。但不能降低过多颜色以造成混乱。

　　分割线颜色尽量不要与背景色相差太大。当字体选用深蓝色，背景为浅黄色时，边框选择浅蓝色，这样可以降低我们视觉疲劳，不会使表格看上去令人生畏。

　　2.2表头的优化

　　表头标签必须简炼准确，以超过节省表头空间和减少视觉压力的作用，让用户注意力聚焦在数据本身。当然针对产品而言，先能把事情说知道，再考量文字的简单性。

　　当数据结构非常复杂的之后，使用多级表头来表现表头与数据的层次关系，如下图：

　　当数据有看不懂或生僻的信息时，用户希望有人告诉他为什么会这么，就必须在表头标签后加上小问号，鼠标悬停弹出说明文字的提示框。

　　不需要表头

　　如果表格数据可以自我解释，表头就可以不应该。电子邮件的表格是一个好实例，邮件主题，发送者，发送日期都区分度高不会混淆的。当然有的状况表头是不能除去的，例如有两个不确立的日期，这之后你就必须定义一个表头。

　　2.3行的优化默认顺序

　　所有行按逻辑顺序，比如按风险由小到大，将最安全的操作放最上面；或根据信息时间顺序，由新到旧，以建立时间进行顺序，即最新创建的排在最上面。

　　合适的行高

　　行高是相当重要的参数，直接制约着阅读感受。较小的行高承载更多信息，让客户无需滚动鼠标就能发现更多数据，但会增加扫描效果，导致视觉解读错误。适宜的行高使得数据更容易被阅读，但这不代表行高越大越利于阅读。

　　设置行高的原则：

　　A.单行数据显示时，数据显示紧凑、有序。

　　B.多行数据显示时，弱化表格方式，提供丰富的视觉感受。

　　此外，对于单行显示的表格，建议行高为字体高度的2.5倍到3倍；针对多行显示的表格，建议内容区到上下边框的距离略大于文字高度。当然，也可以提供切换按钮让用户自己控制显示密度。

　　横向斑马线

　　斑马线又称作间行换色、隔行变色、行的交替样式。它能让行间边界更为显著，同时提高视觉流的纵向引导，避免在阅读表格时发生迷失情况，要留意两种形状不能反差过大。另外，可以按照实际状况选择是否与边框同时使用。

　　行的强调

　　有时为了指出行内信息的连续性，可除去单元格的横向分隔线，仅使用纵向分割线和颜色分隔，使纵向信息非常连续通畅，以提高阅读效率。

　　表格还可以借助颜色来指示状态，颜色指示可以帮助客户辨识这些行可能必须非常注意的行数据。

　　同时可以对行内信息进行扩展，进一步减弱表格方式，丰富各类信息的视觉呈现，同时兼具行与行之间的关键信息的对比，如上文表格布局提到的图表的使用。

　　2.4列的改进提高列的数量

　　尽量避免列的总量，关注客户必须的必要信息。当数据列过多时，要分清主次列，非重点、辅助性信息可以借助次级入口来缓解，如固定重要列(主体名称/操作列)，次级列在表格后面区域左右拖动。

　　合适的列宽

　　列宽严谨的处理方法有三种。第一，通过栅格，由列的总量决定列宽，主流框架模块通常是这样；第二，可以固定部分列的长度，其余列则按百分比处理；第三，在固定长度的基础上，允许用户自由缩放调整列宽的大小。（也许我认为不要太拘泥这个，合适就好）

　　列的强调

　　为以便用户对数据进行对比分析，可以在原始数据的基础上给出差值、升降变化等数据处理结果，减少客户数据加工的过程，直达用户获得信息的目标(应该明确用户目标)，提高用户的阅读速度。

　　通常列的指出是配合列顺序功能使用的，如点击率、访问量的顺序。有时会使用不同长短的横向分隔线或不同颜色对列信息进行区隔，增加同类信息的对比性。

　　2.5单元格数据展示度量单位的使用

　　其中的关键差别在于数字的大小。数据的度量单位无需重复，一般在表头标识清楚即可。

　　空白单元格处理

　　通常指空数据或零数据的状况，空白单元格容易导致客户问题并且误解，用户会搞不知道究竟是没有数据，还是数值为零？正确做法是，对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下数据格式保持一致；针对没有数据的单元格，通常是用“－”表示。

　　B端后台数据类型众多，最好能为空数据做出释义，可以在“列标签”或底栏给出解释文案。

　　数据过多

　　单元格的长度按照列中字符的长短自动变化宽度，超过该脚注可以省略显示，末尾以"..."显示，鼠标悬停时出现气泡显示完整内容。

　　关键属性标识

　　包括用户重点关注数据状况、某些数据的攀升和增加等，可用符号进行标示，帮助客户快速定位到目标信息。

　　2.6分隔线

　　水平分隔线，能明显减少表格在平行方向的视觉重量，内容非常条理清晰，便于用户对比查看数据。

　　垂直分隔线，在表格中使用合适的对齐方法后，那么就可以省略；数据量级非常大的表格，列之间更加紧密时建议保留，可以使用较淡的分割线，将不同列数据区分开来，提升浏览速度。

　　下图采用了同时使用水准和平行分隔线：

　　如果在表格中使用合适的对齐方法，分隔线就是多余的。但鉴于表格数据量级不同，即使要用，分隔线也要淡，不能影响迅速浏览。

　　2.7分页及翻页

　　在web端，表格的的数据内容达到一定“数量”时必须提供翻页功能，这个“数量”由表头的高度、表格的行间距、目标客户群体的显示设备的配置等原因来决定，原则是不要达到一屏，考虑到每个客户的使用习惯，可以让用户自定义每页的显示的总量。相比于跨屏翻页而言，向下滚屏会更便利，在下文控制表内容中展开非常了无线滚动与分页。

　　分页控件内容：用户自定义每页显示的总量，当前页码(行数)，全部数据的页数(行数)，向前翻页，向后翻页，到达第一页，到达最终一页等。

　　当用户的数据未达到一页时，可以隐藏翻页控件。翻页按钮不只用时，须给出置灰态或不可点击。

　　分页控件做为筛选数据的一种方法，通常可以结合排序、筛选等其他控件一起使用，来提高客户的操作效益，如网易的邮箱，翻页与日历结合使用，对于有长期邮件数据的客户来说，查阅邮件的效率更高。

　　比如无限滚动，还有第三种翻页模式，鼠标单击“加载更多”按钮以查看更多数据。

　　2.8简化表格

　　干净的表格使人愉快。特别是在处理长期数据时，巨大的数据量会降低客户的压力，因此要避免视觉干扰。删除不必要的分割符与背景，去除阴影等。信息内容的有效传达是表格设计的本质，让客户注意力聚焦在核心内容上。所以，做减法设计就变得可贵了。

　　实现简化的方式是适度删减。如果场景视觉很糟糕，请删除辅助信息、不常用的控件和分散注意力的样式，但要小心删除必要内容。“简单并不意味着没有杂乱，这是简洁的结果。简单性在某些程度上基本上表述了对象和产品的目的和位置。想设计出一个井然有序的产品。这并不简单。“-JonathanIve

　　减少分隔线

　　这需要是在数据允许的状况下。水平分隔线能明显减少长表格在平行方向的视觉尺寸，加快数值的对比效率。但即使在表格中使用合适的对齐方法，竖直分隔线就是多余的。它们最大的贡献就是增加元素之间的距离，明确了单元格范围。即使要用平行分割线，也要淡，不能影响迅速浏览。

　　不使用斑马线，使用不同颜色区别指示不同种类的数据是有必要的，但是用来区别同一类数据，斑马线在这些之后又是没有必要的，因为水平分割线已经明显区隔了。

　　省去分隔线，对于较小的，动态性较小的表，可以省去所有分割线，并取得醒目的外观。当然，这更多是数据量不大且易区分的状况。

　　尽量以黑白为主

　　采用彩色表达组织或意义或许会降低误解，并且导致视觉障碍者的易用性难题。普通表格通常使用材质代表状态或进度。

　　克制图形元素的使用

　　其他图形元素，如星号、三角、圆点、对勾、叉等，虽然无法帮助组织数据、更直观的传达信息，但要留意数量，物极必反，要留意克制那些元素的使用。

　　优秀的表格交互给予用户操控感，不让其迷失在数据中。提供便利的过滤筛选组件，配合鼠标悬停、点击、框选等操作，方便客户查看更多数据信息，快速定位目标数据，或依据特定规律对数据进行顺序、突出、降维等处理。当我们将这种模块与交互动作结合，用一些习以为常的交互去操控表格时，用户将更清晰、有自信、提效率。

　　3.1筛选与搜索

　　筛选和搜索是客户精确目标数据的好办法，这是一项基本功能，可让用户从默认的表格数据轻松获得要查找的内容，在数据量较大的表中非常有用，一般位于表左边的操作区域或表头区域。

　　表上方

　　当表格的数据量较大时，可在表左边操作区域降低对象搜索或数据分类来提高客户查找效率，且能同时使用。提供多维的筛选和排序，是提高客户效率的有效方法。

　　输入搜索框输入用户关心的内容，既可以即时筛选，也可以点击触发，一般须支持模糊查询，否则客户需要牢记所有内容，才能查出要找的目标项，成本降低。也有特殊状况，如保密性较高的帐号密码列表查询需精确输入。

　　无论手动查询还是自动查询，如果查询条件是组合的几个，那么通常是填好全部筛选条件再让客户点击查询按钮。因为即使客户要查询的表格数据带有多个属性且相互联系时，组合条件的查询往往是更合理的。

　　如果筛选操作是单个条件独立查询，各个筛选条件都是互相独立的，那么最好填好一个条件便自动查询。

　　筛选条件有之后既需要汇总数据的，又需看单一条件下的数据，比如状态包括“待付款、待提货和待收货等”，此时则是变成Tab单选较好，如右图图示。

　　表头

　　放置在表头标签上的筛选，受列内容的制约，一般做单次筛选。通过对表头标签旁按钮的单击，使用户更便捷进入到自己的筛选条件中。通常，表单越左的列数据越重要的，也是筛选频率与意愿最高的，因此高频的筛选场景基本可以得到满足。

　　3.2滚动与固定平行滚动固定表头

　　垂直滚动时，固定表头可以让客户知道当前单元格数据信息的属性和意义，体现界面友好性。当数据列差异不大，用户不能直接按照表格数据判断种类时，尤其必须固定表头。当表头有操作时，固定表头更能提高使用效率。

　　数据列表比较庞大而复杂的之后，使用固定表头可以帮助用户区分列与属性。

　　水平滚动列固定

　　当呈现长期数据时，表包括的列数超过了该表的最大长度，水平滚动就能够防止。第一列(前几列)或操作列固定能更便于信息的对比与操作。基于我们读取信息的方法，从左到右放置关键列。最右侧的列会导致最多的关注，当我们感兴趣时，才会查看其它列，它会妨碍用户阅读所需时间与精力。

　　在大型表格中，我们才可以水平滚动，最好是寻求可取代方案。表格中文本为什么这样长？能降低字数嘛？可以将文本换至第二行以避免水平宽度吗？如何为过长的文字选择别名吗？能否用图形条目取代？能否可以采取工具提示？能否可以安排在窗口或对话框里？

　　通常有两个解决方法：文本换行，对它缩排；在单元格区域截断文本，在提醒中显示完整文本。方法一意味着我们要提高表格高度，且每行高度可能不同；原则二，如果不同文本内容的头几个字一样就存在弊端了。但这两种方式都比水平滚动好。

　　3.3排序

　　表格初始有一个默认顺序，也叫初始排序。但有时，用户期望将表格中某一行位置换到另一位置。

　　拖曳排序

　　拖放似乎很简单。就是抓住某个元素把它放在另一个地方而已。可是，事实上，拖放过程涉及到了长期细节，在拖放期间，需要处理许多特定的状况。

　　用户在缩放模块时，页面整体发力基本维持不变。因为移动的不是模块，而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小，有拖曳排序需求的画面。又可以利用在多个表一起的状况。

　　穿梭表格

　　就是多表格拖拽的状况。比如左侧的表格内容可拖拽至左侧列表框，同时支持表内上下拖拽更换位置排序，也可直接选中对象在两栏中按钮移动，完成拖拽行为。

　　那怎么让用户了解可拖拽呢？

　　增加意向符号；改变光标样式；提高被拖拽对象临时性色彩，突出显示。

　　如何让用户了解怎样拖拽到哪里？

　　被拖入区域应降低插入位置符号，可以确立指出放置模块的目标位置，减少客户问题，也可以对放置操作出现后的页面外观提前给出预览。同时设计时考量上下左右两个方向的拖拽运动分别可以触发什么结果，超出表格范围拖拽对象消失。

　　被拖动对象应呈现为轻微透明的颜色？应当显示为完全不透明？以及改为使用缩略图表示？我觉得这三种方式都可以。透明效果也会让更多表格内容对用户可见，有助于用户预览最终放置后的结果。从而便于客户查看页面，也会说明该模块处于一种特殊方式中。透明可以说明相应被拖拽对象已经定位，或者说正进入过渡状况。

　　表头排序

　　排序又分为逆序和倒序，比如，事件相关的表格，默认时间降序排列；风险相关的表格，默认安全降序排序。

　　表头排序可以辅助用户迅速挖掘出必须关注的信息，发现数据信息之间的关系，一般可按数字大小、文字注音顺序、字母排序等其他数据特点进行顺序。如果表格中不是所有数据都能顺序时，则必须标识出可顺序操作的列，一般采取三角箭头做为标志，实时反馈当前操作状况。

　　3.4控制表内容控制列

　　可伸缩列

　　因为存在多个数据标题和列，我们没法根据表格的宽度来展现数据。在这些状况下，表格可允许用户选择它们关注的列，在其固定长度基础上，让用户可以自由缩放列宽边缘以微调列宽。

　　自定义选择列

　　因为数据报表，往往必须满足各类不同的角色在不同画面下的意愿，因而在表格数据显示上，一般采用宁多勿少的方法，即尽可能提供具体的数据，由此会数据指标过多，难以在表内完整展现，导致必须水平拉伸，降低了表格的可读性。

　　对于前面这个难题上，可将所有的指标名称列出在表格上方，并提供多选操作，在默认情况下仅展现最常见、最重要的几个指标（如下图）。这样能让用户在表格上方提到所有指标名称，避免了原本应该水平拖拽而造成指标浏览不全的状况。其次，用户可以按照自己的应该，自由的选取显示所需指标，隐藏不必要指标，减少干扰。

　　B端后台通常会对应不同的角色及不同的意愿，可让顾客按照自己的意愿来定义表格的展示列及列的排序。同时平台应记住用户上一次自定义列的设定。

　　控制行

　　控制行高

　　较小的行高让用户无需滚动页面能够查看到更多的数据，但可扫描性的疗效易造成视觉迷失。这就是为什么许多成功的数据表设计包括了控制行高(显示密度)的功能。

　　树形表

　　行也可以结构化分为不同的类型，前面看到了层级表/树形表，可以嵌套子表格，展开和折叠。可操作按钮通常位于各级行标题右侧，具有极佳的视觉效果并带有扩展或折叠的用途。单击表中的类型标题会在种类的展开或折叠状态之间切换。展开与折叠也将极大的妨碍行内容显示。

　　分页

　　分页可以将表内容信息划分成独立的页面来显示。

　　优点：

　　1.良好转换：当用户是在结果列表中查找特定信息而不只是浏览信息流时，分页就是好的选择。你会了解表格数量与当前页的确切数量，能够决定在那里停下以及去哪儿。

　　再次寻求特定数据时，分页方案让我们无法估计定向到目标数据位置。用户或许无法记录目标数据页准确数字，但通常能记录大约范围，而页码链接能让顾客更容易到达哪里。

　　2.掌控感：无限滚动就像个无止境空间——无论你滚动多久，你会觉得永远结束不了。当用户了解可用行次数时，他们可以自己主观做出决定而不是被动滚动。同样的，当用户无法看见结果的次数时，他们将无法预测它们查看表数据估计要节省多长时间。

　　缺点：

　　额外的动作：在分页方案中，用户要到达下一页表内容，就需要点击分页控件上的按键跳转，等待表格新内容的加载。

　　无限滚动

　　表格无限下拉加载使用户在数据内容面前仍然滚动查看。向下滚动的之后不断加载新内容，虽然非常便利与诱人，但不是哪个场景都适用。

　　优点：

　　1.高效浏览：无线滚动提供了一个高效的方式让客户浏览表数据信息，而不必期待表格新内容的加载。当客户并不特意寻求特定的内容时，他们必须借助查看大量内容找到自己中意的信息。

　　2.体验更好：用户使用滚动能获得比点击分页有更好的感受。滚动行为要比点击更快更易于，对于这些连续且漫长的内容，无限滚动要比把分页的有更好的易用性。尤其在表格区域狭小时，使用无线滚动更能节省空间。

　　缺点：

　　1.受限性能：页面加载速率是良好体验的一切。尤其是表格计算数据时需留意使用无限滚动，缓慢的加载速率会导致用户的不耐烦与离开。用户在一个表格页面中越向下滚动，就会加载更多的内容，当数据量过大时，结果就是页面性能越来越低。

　　2.位置丢失：无线滚动同分页相比，没法标记当前位置且不能再轻易回到之前位置。一旦离开，就会丢失当前的浏览记录，如果要重返以前的位置，必须得再次滚动去寻求。当客户有这样行为的话，无线滚动就会让用户造成困惑厌烦。尤其当你刷新页面时看到自己又重回表格顶部，不得不再次滚动等待结果的加载以再次查看。

　　3.信息缺失：滚动条并没有体现出实际数据量。假设快要接近底部了，当得到引诱滚动条再滚动一点点时，结果却会看到表格数据量又刷新了。从一个只用性的视角来说，打破滚动条的正常使用规则对用户来讲是糟糕的。

　　一般来说，无限滚动适用于在数据有限且信息重复的表格，有促使内容构建。分页则适用用户在寻求特定信息及浏览记录，易快速访问。

　　3.5查看次要信息

　　表格内容的抉择要确立在对业务的知道之上，尽量精简指标，隐藏不必要信息，减少干扰，避免无主次的铺出所有信息。不要让客户一次性接收过于庞大的信息量，建议默认只展示顾客所需要的信息，其他次要信息通过展开下拉等方法展现，为辅助信息提供深层入口。

　　展开行

　　展开行允许用户无需开启新页面在表格内就能查看附加信息，防止用户迷失。

　　子表格

　　表格中打开表格，表格组节把相关的行组合在一起，并且无法收缩和展开，各组节层级要有颜色区分。如有必须，在每位组节里可以显示数据概要信息。

　　弹窗

　　包含模态弹窗和非模态弹窗，模态弹窗是仅支持打开一个弹窗进行具体查看，非模态弹窗是可以同时开启多个，并允许拖动弹窗位置进行信息对比。

　　模态允许用户留在表格视图中，且更多地关注附加信息和操作：

　　非模态弹窗对于主动使用的客户来说或许很有用，可以借助一系列操作，比较不同行数据的细节：

　　视图切换

　　可以借助视图切换查看更多细节，比如在“表格”和“左列表+右详情”之间切换，或者提供“只看文本，看文本和缩略图，只看缩略图”几种查看模式。相比弹窗减少了页面层级和隔离感。单击行链接将表格转化为左边的列表项目和左侧的其它具体信息，这让客户无法解读大型数据集，而且在涵盖到多个项目时不会丢失位置。

　　3.6数据的编辑操作

　　编辑表格数据在大众化的Web应用程序中并不常用。不过，在企业级Web应用程序中，表格则占领统治地位。此时，最常见的用户需求，就是想要像使用Excel一样实现表格编辑。毕竟Excel逐渐变成编辑网格数据的一种标准。

　　表格数据的操作大体可分为显性与隐性。显性操作，指操作选项显示在行内，直观明了；隐性操作，当鼠标悬停时或勾选才显示操作选项，界面简单明快，可降低空间压力，减少干扰。

　　单行操作和批量操作

　　操作项通常存在于行数据最终，为固定列，或表左边位置，两者对应多种操作场景。

　　单行数据操作

　　文字按钮操作项通常不少于三个时，图标按钮不多于四个时，操作项跟在行条目上面；当达到时，建议将操作折叠收起，点击更多弹出多个操作选项。当操作按键致灰时，鼠标选中可显示原因。

　　如果行操作不这么重要，或者说行操作更加啰嗦影响客户阅读时，可使用隐形操作，鼠标在行区域悬停时，可对当前行背景做出区别，或放大悬停区域，同时行尾发生可操作按钮，进行行操作。如谷歌邮箱：

　　批处理操作

　　针对数据批量操作的画面，建议将操作放到表格上方，与复选框操作配合使用。批处理操作方式允许客户对一行或多行对象执行操作，并在选中复选框后激活表左边操作按钮，如删除、批准、拒绝、复制等等的操作，这将花费用户时间，避免重复对多行进行同样操作。

　　表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏，如果空间限制造成操作按钮排列不下，则使用“更多操作”按钮。

　　二次确定提示：对于客户操作结果给出提示窗反馈，用户单击「删除」后，直接操作；发生提示框告知客户操作成功，并提供客户「撤销」的图标；用户进行下一个操作以及15s内不进行任何操作，提示框消失，用户能够再「撤销」。

　　在执行这些能够撤销的操作时，点击删除后，出现模态弹窗进行二次确定，在当前页面完成任务。同时禁止滥用模态弹窗进行二次确定，就既打断用户心流（能够将上下文带到弹出框中），也能够防止失误的出现。

　　单选、多选和全选

　　数据增多时，单个选择数据费时费力。单选框是没法单选，而复选框是能选用单个、多个或全部选择项，而实际上单纯的单选很少见，所以建议通常场景下在表格最右侧加上复选框，如上面说到的批量操作，多选后，就可以批量操作。点击选框所在行的局部能让整行被选中，每个选定的行都接受突出显示处理，这种做法可减小点击区域降低界面的混乱。

　　具体设计时，可以根据数据类别进行选取，如邮件已读、未读等。

　　可进行选取的表格需告知客户已选数据量，在翻页时是否允许跨页选择；全选是当前页视图中的所有项目而是选择表格中的所有项目。

　　单元格编辑、行编辑与表格编辑

　　对于于必须进行数据编辑的表格。表内编辑能使数据更具可操作性，表内编辑通常优于弹窗。要推进编辑功能，必须借助鼠标单击，而非鼠标悬停。这样才能保证整洁的网格显示效果。假如是借助鼠标悬停来触发，鼠标每经过一个单元格就得显示一个编辑框，那这些编辑方式都会干扰到不同单元格间的切换，会有如此烦人。

　　单元格编辑：针对单个，不连续的可编辑的单元格，为了让功能更易于被看到，可以在单元格数据旁放置编辑界面，这样可编辑和不可编辑的单元格视觉对比就非常显著。单击该按钮即可触发编辑，单元格内出现输入框，保存数据并退出。有了这个随时可见的链接后，编辑功能就更容易被注意到了。

　　单元格编辑时，也可以设定整个单元格为热区，以便用户触发。

　　覆盖层编辑：点击编辑界面触发；借助在页面底部添加一层来放置编辑数据。虽然编辑之后也不会离开当前页面，但却不是在页面中直接实现编辑。而是把一个轻量级的弹出式覆盖层（如对话框）成为编辑窗口。

　　选择覆盖层编辑而非行内编辑的缘由也好多。有之后，不可能把某个复杂的编辑任务安排在同一个页面中完成，如果嵌入页面的编辑区域太大，会由于把内容过多地走向下方而损害页面的整体感。

　　而其它状况下，也可以选取中断当前页面流，尤其是被编辑的信息本来十分重要时。覆盖层无法为客户提供明确的编辑空间。提示如果有必要占用专门的屏幕空间摆放编辑窗格，而且页面的上下文对编辑任务也不重要，就可以考量使用覆盖层编辑。

　　行编辑：针对同一行标签下的数据编辑。新增数据行后，视图定位到新增的行并高亮显示，让用户迅速聚焦。几秒后高亮消失，以免过于干扰用户。

　　不过，表内编辑界面会涉及平衡页面中视觉干扰的弊端，如果功能以及提醒在页面中的次数过多，很可能导致功能的借助率降低。如果一行有多个编辑选项，则可以适度使用弹窗编辑数据；即使表格有大个别单元格数据必须编辑，则可以全局编辑。

　　全局表格编辑：点击表格编辑按钮，当前表格所有可编辑的数据单元格内显示文本修改框或类似XLSX的图标，进入一种特殊得编辑状态，不会给人直觉造成混乱。这一用途基本用于大面积还要填写和设置时，如大型填写报表。

　　大型数据表因为支持编辑数据处多，这种方式的另一个难题是容易填错单元格，想象单元格的密集，用户意外编辑错误也时有出现，这样的话应该编辑/暂存/提交三个操作。如果看到编辑的内容报错可被更正，应直接鼓励用户更正；即使报错内容不可被更正，则告知用户原因。

　　大型数据表如需避免与表格无关的视觉干扰，提供表格的沉浸式阅读感受，可提供全屏查看的入口，但应注意可以让客户方便的退出。全屏方式可以直接屏蔽掉页面其它内容，只留下表格区域，用户借助ESC键或按键随时退出全屏方式，学习成本较低。

　　当表格数据为空时，在表格的空白内容处加入可建立的便捷入口，引导用户新建表格数据，或者导入数据。如下图邮箱已发送邮箱为空时：

　　当没有创建诉求的，直接告之暂无数据。如数据是平台形成的，不是由用户建立的，直接告之暂无数据，话术的说法则需与后台文案的整体格调保持一致。

　　后记

　　个人关于web表格设计的见解基本写完了，在小结归纳中也看到了自己平时设计表格中的其它问题。大多表格设计在不同画面中必须随机应变，没有绝对的完善，只有相对的规范。我们要理解规范背后的方法，推导出适应其他场景的规范。

　　以上就是网站建设问答网小编为您整理的相关内容，我们提供系统定制、微信开发、小程序定制、微商城开发、网站建设等互联网项目定制开发服务。

  目前，《web表格设计解析》页面仍在完善中，后续将为您提供丰富、全面的关于《web表格设计解析》的最佳回答，小编将持续从百度问答、百度百科、搜狗问答、搜狗百科、微博问答、头条百科、悟空问答、知乎热门问答以及部分合作站点渠道收集和补充完善信息。

  深圳蚂蚁网络网站建设公司提供，系统定制，微信开发、小程序定制、微商城开发、网站建设、网站排名优化推广等互联网项目定制开发服务。版权声明：如发现内容存在版权问题，烦请提供相关信息发邮件至3310459304@qq.com，我们将及时沟通与处理。本站内容均来源于网络，涉及言论、版权与本站无关。