B端表格设计实战指南.docx

《B端表格设计实战指南.docx》由会员分享，可在线阅读，更多相关《B端表格设计实战指南.docx（43页珍藏版）》请在装配图网上搜索。

1、B端表格设计实战指南一.表格的介绍.表格的定义表格（Table ）:又称为表，是用来收集、整理、组织、分析数据的二维矩阵； 它既是一种可视化交流模式，又是一种组织整理数据的手段。1 .表格的构成元素通常表格的组成元素以及相关元素会有多个部分，笔者根据自己设计表格的工作 经验将表格概括为容器、筛选区、功能性按钮、表头、表体以及底栏等六个部分。其各个部分包含的相关元素如图所示:3）案例小讲堂对于数据集较大的B端系统来说，往往筛选条件比较多，都将其展示出来会导 致空间占比过大，影响了用户对表格信息的获取。F面以我公司的财务中台为例，讲讲如何优化筛选区，希望对大家有所启示。版本中筛选区样式:现存问题I

2、筛选条件占用屏幕空间大，导致页面信息冗余，不利于用户对信息的生筛选条件全部展开，目的是让用户对信息进行快速的查询、过滤，以快速准确完 成目标任务。但业务复杂，数据集过多少，筛选条件也相应增加（空间占比大）， 看起来非常冗余，不利于快速定位目标。为了平衡扫描、查询、过滤、分析等这些操作，复杂业务的表格区筛选需要进行一定的优化处理，这样才能满足满足业务需求同时，又符合用户心智模型。方案A:整齐划一整合筛选项，采用表头筛选+标签筛选的样式，缩减筛选区的页面空间占比。方案A应收单应收减免单其他应收单品牌：全部业务类型：全部应收单号费项应收日期应收金额漉免W AR202002240001综合服务费202

3、0-02-272,050.500 AR202002240001综合服务费2020-02-272,050.500 AR202002240001综合服务费2020-02-272,050.500 AR202002240001综合服务费2020-02-272,050.500讨论结果：虽然这个方案使筛选区的空间占比缩小，整体页面也看似整洁不少。但表头筛选在复杂的业务系统中存在几个弊端:数据集往往很庞大，表格不能展示所有字段，往往采用列固定的形式来呈现数据的完整性。以财务中台为例，高频筛选功能已被遮挡（如上图），筛选前需先对表格进行横向滚动，无端增加操作;应无法展示全部字段，用户无法清晰的感知到筛选了哪些

4、内容，增加认知学习成本；表头中的属性并不是都可以进行筛选，用户不可感知哪些可以筛选，需要滑动表格检索。方案B:强调主次关系采用展开式的标签筛选样式，对不常用的筛选项做隐藏处理。但因业务场景的复杂度，高频筛选功能还是很多，没有解决本质的问题，如下图：方案B应收单应收减免单其他应收单A 费项：全部应收日期：核销状态:全部v高级福选应收单号费项应收日期应收金额履免WAR20200224000I综合服务费2020-02-272,050.500AR202002240001综合服劳费2020-02-272,050.500AR202002240001综合服务费2020-02-272,050.500方案C:分

5、状态展示（逐渐呈现）在方案B的基础上进行了优化。提炼与流程相关的状态，按步骤显示，每一步只显示当前需要关注的内容，如图：方案C应收单应收单应收减免单其他减免单未审核已审核待核销作废应收单号费项应收日期AR202002240001综合服务费2020-06-08AR202002240002固定租金2020-06-08AR202002240003电费2020-06-08状态的提炼过程整理每个单据的状态，理清关系：单据状态状态类型具体说明未审核新增或者修改后保存但是还未审核时单据的状态单据已审核进行审核操作并审核成功后单据的状态作废1进行作废操作后的单据状态未收款应收单还未进行收款，实收金额=0收款部

6、分收款应收单进行部分收款，实收金额0,但待收金额不等于0已收款应收单完成收款，实收金额0.待收金额二0核销未核销完成收款后单据的状态已核销进行核销后单据的状态结合业务流程可以很明显的注意到，单据只有通过了审核才能收款，只有收款才能进行核销。状态是一种递进关系（审核收款口核销）。结合财务人员的工作流，提炼出单据的以下几种状态，之前存在到问题（表格中 单行数据的操作不一致），也得到了完美的解决。如图：提炼状态 STATtab切换单据存在的状态对于操作未审核.审核、修改、删除、作废已审核待收款/已收款反审核、收款、减免待核销一核销作废生效设计指南012.功能区按钮设计1）按钮的表现形式建议在复杂系统

7、设计中使用圆角矩形的按钮样式。理由如下：a.人眼处理圆角更容易（认知负荷说）： Jurg Nanni （ Visual Perception的作者）表示：视网膜中区处理正圆形的时候是最快速的，而处理边边角角的时候则比较费力，大脑处理的速度也较慢。于是，长得圆润的圆角矩形相较于一般矩形，对于使用者来说就容易接纳许多。 Barrow Neurological Institute （巴罗神经病学研究）的研究也显示：一个物体的 显著度与边角的角度呈线性变化，锐角相较于钝角要显得更明显突出；换句话说， 角度越尖锐，物体就看起来越明亮；而越明亮的物体就越难以直视。b.使相似的内容更容易被区别：举个例子，如

8、下图所示，即便间距相同，B排的圆角矩形辨识度还是明显比A排 的矩形高。例子 EXAMPLEB端设计指南01这是为什么呢？首先，第一眼看过去的时候，A排的矩形整体是连在一起的，中间找不到断点； 而B排矩形，因为有圆角的关系，所以断点很明显。其次，两种矩形的视觉聚焦： A排由于直角的关系，视觉聚焦向外推，整体的效果比较发散；这会使得第一眼看过去的时候，容易分不清楚哪一条边框属于哪一块矩形。反之B排因为圆角收拢的关系，视觉聚焦向中心推，区块就比较容易区别开来。表格构成要素容器AR202002240001综合服务费2020-06-082,050.50AR202002240002固定租金2020-06-

9、0812,050.50AR202002240003电第2020-06-0850.50AR202002240004水费2020-06-08350.50AR202002240005物业管理费2020-06-08950.89AR202002240006维修费2020-06-08100.11AR202002240007固定租金2020-06-08122,050.90应收单号醒项应收日期应收金额 容器：包含表格的所有内容。 筛选区：包括搜索和条件筛选。方便用户快速蛰询定位数据，一般位于表格上方。 功能性按钮：比如常见的新增按钮和各种批量操作按钮。表头：说明数据的内容，可以包含筛选、排序等功能。综上所示，

10、圆角矩形是非常有效率的容器，在复杂场景业务中（存在很多种功能 型按钮），按钮采用圆角矩形样式最提效。这里要注意，圆角不是越大越好。在相同面积中，按钮的可操作区域随着圆角的增大而递减，因此在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作。同时在实际业务中，按钮常常被当作原子与下拉框联动组成下拉菜单控件；如若 使用半圆按钮则无疑增加了下拉框的设计难度并且匹配起来也会略显突兀。按钮圆角圆角更小，操作热区上会更大，页面的2）批量操作按钮的位置思考来看个举个例子（针对财务中台批量操作的优化方案）：现存问题：现存问题方案A:信息前置批量操作按钮全部展开不做折叠处理，信息前置来降低认知成本，方

11、便用户记忆。方案A容易造成页面：应收减免单其他减免单应收日期a应收单号AR202002240001综合服务费2020-06-08AR202002240002固定租金2020-06-082020-06-08AR202002240003讨论结果：对于复杂业务来说，会有很多批量操作功能，按钮很多，造成页面拥挤，进而影响用户操作体验；一个位置出现2个主按钮样式，不推荐。方案B:沉浸式操作体验对于一开始不可用的批量操作按钮进行隐藏，勾选激活状态，显示在筛选区。方案B功能阻断性较强应收单应收减免单其他减免审核打印删除H应收单号费项应收日期AR202002240001综合服务费2020-06-08AR202

12、002240002固定租金2020-06-08Q AR202002240003电费2020-06-08讨论结果：方案B的阻断性强一无法兼顾批量操作和数据筛选功能，无法满足复杂系统的场景操作。方案C:上内容下操作前2个方案的优化，不做隐藏，类灰布置于底部。勾选触发操作条件，未做勾选 时，用户点击时给出引导操作提示。方案cAR2020022400010固定租金2020-06-08AR2020022400011物业管理费2020-06-08AR2020022400012维修费2020-06-08AR202002240013固定租金2020-06-081AR202002240014综合服务费2020-

13、06-08AR2020022400015广告费2020-06-08需勾选激活I给出提示，类置灰于底部为什么选择方案C?理由如下：首先，根据古腾堡原则，用户的在做表格操作的时候，视觉流是左做到右,从上到下，方案A和方案B的视觉落脚点在表格的上方，显然是不符合眼动规律的。其次,批量操作的功能属于财务中台的核心功能点，隐藏不是第一选择，而是类 置灰的特除处理（在按钮旁给提示信息）。3 .表头设计表头在能够概括的情况下，尽量简练、准确，一般可根据上下文关系来进行减短 简化，以达到节省表格头部空间和减轻视觉压力的作用，让用户注意力聚焦在数 据本身。如果精简后的生僻字段难以自我解释，可以跟一个释义标识，鼠

14、标悬停时出现该 字段的详细解释；同时满足新手用户、普通用户以及专家用户的需求。表头.表体设计1）数据对齐方式在数据的对齐方式上，有以下3个建议：1 .文本左对齐；2 .数字右对齐；3 .表头与信息内容对齐方式一致。文本左对齐，符合正常的心智模型（阅读习惯从左到右）；表头与内容对齐一致, 则是为了简化?口降低视觉噪音，以便更好的获取数据信息；数字右对齐，有利于 数据间的对比。要注意的一个细节，例如：当列数二2的时候，由于列与列直接的间距过大，导致两者的关联性较弱，如图：自定义列二2费项综合服务费固定租金电费 水费这时又该如何处理?为了增强列与列之间的相关性，当鼠标hover在行的时候，产生高亮。

15、这种方 式可能不是最优的，但目前只能想到这种方法，如果读者有更好的想法欢迎留言。2）数字的字体选择建议选用：Helvetica Neue、Helvetica、AriaL sans-serif ,苹方在数字字符上，不同数字宽度不一致，导致干位分隔符不在一条线上；而Helvetica Neue数字等宽，千位分隔符有序的排列在一条线上；所以，选择表体：包含行和列数据，按列可以分为多选列、数据列、操作列。（多选列=多选 框；数据列:呈现业务展现需要的信息；操作列;针对单行数据的操作按钮，比如管 理、编辑信息等。）底栏：包含数据量、单页条目、总条目、分页等，底栏数据也可以放置在表格顶部。3.表格的样式1

16、）几种常见的风格样式： a.网格型：表格有均匀而明显的分割线，边框单元格比较明显。 b.水平线型：仅显示水平线可减少整个网格的视觉噪声。 c.斑马条纹型：隔行交替使用不同底色来区分数据。 d启由形式：移除所有分割线，通过尽可能减少视觉噪声来创建极简外观。Helvetica Neue作为数字字体的首选字体，数值上下对比的时候，相同位置的数字在同一条竖线上，更加容易对比。数字对比应收金额2,050 5012,050 50950 891234567100 11122,050 9050 50PingFang SC3）对操作项进行解耦“处理在财务中台系统中，常常由于权限的不同或者单据状态不同这两种原因，

17、使得每 行的数据拥有不同的操作项，如下图所示：应收单表格I A/R TABLE应收单号费项应收日期AR202002240001综合服务费2020-06-08AR202002240002固定租金2020-06-08AR202002240003电费2020-06-08AR202002240004水费2020-06-08AR202002240005物业管理费2020-06-08B端设计指南01存在的问题:当信息过载，操作项这个list非常长的话，页面将会非常拥挤;文字按钮因为视觉特征比较明显，造成了不必要的分散注意力；误操作率相对较高，同样因为表格空间有限，当操作区非常靠近，很容易一不小心就点错了。

18、针对这个问题所出的解决方案，如下：方案A:下拉框样式方案A应收单号费项应收日期应收金额AR202002240001综合服务费2020-06-082,050.50AR202002240002固定租金2020-06-0812,050.50AR202002240003电费2020-06-0850.50AR202002240004水费2020-06-08350.50AR202002240005物业管理费2020-06-08950.89讨论结果：下拉框中可能存在不同操作，同样避免不了误操作这个问题。方案B:错位显示方案B应收单号费项应收日期应收金额减免金AR202002240001综合服务费2020-0

19、6-082,050.500.AR202002240002固定租金2020-06-0812,050.501,000.AR202002240003电费2020-06-0850.500.AR202002240004水费2020-06-08350.500.AR202002240005物业管理费2020-06-08950.890.讨论结果：首先，这样的设计浪费大量的屏幕空间；其次，浪费开发工作量！因 为在列表中实现一系列权限判断和操作，在详情界面中往往还需要再开发一次相 同的权限判断和操作；再次，不同单据可能存在操作顺序不一样，上下移动鼠标 会存在不同操作，用户代价非常高。方案C:以不变应万变回归一个界

20、面一个用户任务的原则，列表中的单行数据只保留”查看或管 理操作，所有其它的单独操作都去往该单据的详情界面完成。方案c应收单号费项应收日期应收金额AR202002240001综合服务费2020-06-082,050.50AR202002240002固定租金2020-06-0812,050.50AR202002240003电费2020-06-0850.50AR202002240004水费2020-06-08350.50AR202002240005物业管理费2020-06-08950.89讨论结果：从开发的角度上看，此方案界面高度解耦，功能迭代方便，节约开发 工作量；从认知成本上看，列表界面操作高度

21、一致性，利于养成用户习惯；从操 作效率上看，在详情页用户会明显确认目标单据，几乎不会误操作；同时此方 案节约了大量屏幕空间，更有利于用户对信息的获取；4）关于表格中套表格的解决方案场景：在财务中台中，有这样一种用户，需要对表格内的数据进行对比并编辑。来看看之前的页面：应收单表格这样处理的不足点：在查看和编辑信息时，无效的信息太多。降低了获取信息的效率;切换单条数据时，页面出现超励，无法快速检索到相对应的信息。对此，在这个版本中，我们对其做了相应的优化运用侧视图（快速视图）的方式来呈现信息；一旦选择一个单据，它就会从侧面弹出的。方案应收单号、房间、租客、合同编号Q高级筛选口 AR202CM面熊应

22、收单号费项应收日期基本信息AR202002240001综合服务费2020-06-08费项：综合服务费AR202002240002固定租金2020-06-08减免金额：2.000.00AR202002240003电费2020-06-08AR202002240004水费2020-06-08商家信息0AR202002240005物业管理费2020-06-08客户：凡珠可AR202002240006维修费2020-06-08品牌：麦当劳AR202002240007固定租金2020-06-08账单信息，AR202002240008综合服务费2020-06-08应收金额：2050.50AR20200224

23、0009广告费2020-06-08代收金额：2000.00AR2020022400010固定租金2020-06-08费项：综合服务费AR2020022400011物业管理费2020-06-08财务月：2020-02AR2020022400012维修费2020-06-08账期：2020-01-06AR202002240013固定租金2020-06-08AR202002240014综合服务费2020-06-08AR2020022400015需勾选激活广告费2020-06-08B端设计指南01这个方案，它可以保持上下文，易于使用，即使是在垂直滚动视图中显示大量字段的情况下也效果良好。同时信息呈现的地

24、方是固定的，利于检索，查找。5）行高的制定方法开始之前首先明确一下开发是怎么实现行高的。从上图可以看出，开发在实现设计稿时，通常是按照行高来写的。因此，表格行高二文字行高+上下间距。其中，文字行高可以设定为字号的1.21.8倍，上下间距可以设定为字号的11.5倍；行高影响每行信息的易读性。除了上述的做法外，还有以下2种做法，来保证各场景下获取信息的效率与易读 性。做法1 :不同分辨率使用不同行高。设计两套不同的行高，在大分辨率下显示较高的行高，给数据间提供更多呼吸的 空间；在小分辨率下显示较小的行高，使一屏内可以看到更多的行高。Gmail就是这样设计的，如下图所示：表格样式I STYLE网格型

25、斑马条纹型B端设计指南012）关于样式的选取技巧谷歌邮箱主要社交50个新会话Behance、 FacebocMedium Daily DigestDashboards are DeadGoogleGoogle田峰，您好！请安装直主要Google AdsGoogle AdsGoogle AdsMedium Daily DigestGoogleGoogleGoogle AdsGoogle Ads做法2 :自定义行高自定义行高为兴奋需求，可以提高用户的用户体验。所以我们可以视表格的具体情况来设计设置行高的形式，可以放置在设置按钮 里，也可以在外部按钮较少的情况下展示出来。谷歌邮箱Q搜索邮件-卜写邮件

26、主要收件箱Medium Daily DigestDashboards are Dead | Tayl已加星标已延后您好！谓安装愚新的Google已发邮件安全提醒-有人在新设备上Google草稿提醒：完成设置，开始在线IGoogle Ads显示更多标签完成设置，开始在线网罗新Google Ads为您的新Google Ads帐号与Google Ads发起会议个新会话 C=卜4 Gmail工社交任Behance5.底栏设计表格的底栏，底栏也是不可缺少的一部分，承载的作用主要是告诉用户数据条数 以及当前位置。分页的设计是根据不同的场景进行选择最优的设计方案；在不需要定点图懒的场 景，建议建议删除跳页，

27、删除多于的功能，使页面简洁、清爽。三,其他设计细节.空白单元格的处理表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和 误解，是系统没有加载出来吗？明智的做法，是无数据时用-来填充显示，数据为零时与上下数据单位、小 数点相同的0来显示。1 .减少图形元素的使用尽量减少视觉符号的使用，因为视觉符号可能会使你的用户界面复杂，产生难以 理解的内容；去除不必要的视觉干扰，例如不必要的图标、无规律的色彩等。减少图形元素2 .省略（气泡展示位置）当列表中数据过长时，我们需要根据屏幕宽度调整列表展示方式，超过列表默认 宽度的内容可以省略，通常用表示，鼠标移入后出现气泡展示全部内容。位置：

28、建议展示在上方，因为我们的阅读顺序是从上到下，鼠标向下移动时不会 被上面的气泡遮挡住。气泡面积不宜过大，根据屏幕尺寸控制在一定比例，一版不超过内容区的四分之-,展示不下的内容可以在气泡中增加滚动条。气泡的位置这里是文案-很长很长真的很长后记感谢阅读！本文结合了实际项目经验对表格设计做了一次总结，在具体项目中， 你可能需要根据产品特性和用户需求进行调整。 网格型：对于数据之间的关系紧密（列信息较多而没有足够空间用留白来分割信息） 且有对比关系的。 水平线型：它能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比 时的速度；因此对于所有数据集大小，此样式都是最常见的。 斑马条纹型：每行交替

29、使用不同的颜色背景是帮助用户在阅读时保持其位置的另一 种好方法；对于较大的数据集,建议使用此样式，在较大的数据集中，交替模式将 很清晰，并且不会引起特定行突出显示的混乱。 自由形式：对于小型数据集，如果用户在阅读时不需要帮助就可以保持位置，则建 议使用此样式。信息内容的有效传达是表格设计的本质，就表格本身而言应该是隐型的，应该让 用户注意力聚焦在核心内容上。所以，边框的颜色应非常淡，不能妨碍快速浏览。二、表格的设计技巧表格是为可读性而生的，一个结构清晰的布局能大大提升用户对信息的接收速度 和理解程度。因此，设计易读、易扫视、易比较、易操作的表格结构是表格设计的首要目标。F面我将以公司财务中台的

30、表格改版为例，逐步说明表格中每个结构的设计。这是改版前后样式对比图：费项：全部应收日期：核销状态:全部v品牌：全部业务类型：全部应收单号费项应收日期应收金额减免金AR202002240001综合服务费2020-02-272,050.500.AR202002240001综合服务费2020-02-272,050.500.AR202002240001综合服务费2020-02-272,050.500.AR202002240001综合服务费2020-02-272,050.500/AR202002240001综合服务费2020-02-272,050.500.AR202002240001综合服务费2020-

31、02-272.050.500.3.2.3 -应收应收单应收减免单其他减免单应收减免单其他应收单应收单未审核 已审核待核销 作废应收单号、房间、租客、合同编号Q.筛选区设计应收单号费项应收日期AR202002240001综合服务费2020-06-08AR202002240002固定租金2020-06-08AR202002240003电费2020-06-08AR202002240004水费2020-06-08AR202002240005物业管理费2020-06-08筛选区可以看作表格的导航，由搜索和筛选这两部分组成。一般搜索和筛选会同时出现，但是两者一般很少同时使用来对数据进行定位一 一搜索更多的

32、是对单一或者包含某个字段的的数据来进行定位筛选则是用来查 询一类数据。根据MECE分析法，筛选区可以有以下的表现形式： 常用搜索少用筛选：若筛选项多，可以选择隐藏筛选项，筛选少可以展示出来； 搜索和筛选都常用：可以将搜索和筛选都展示出来； 常用筛选少用搜索：筛选和搜索同时展示； 筛选和搜索都不常用：展示搜索隐藏筛选。1）搜索在样式上，搜索可以分为简单搜索、标签搜索、高级搜索等三类。 简单搜索：由一个搜索框和一个按钮组成，可以输入一个或多个条件进行搜索。 标签搜索：在简单搜索的基础上加上标签，即先选标签，在输入搜索内容。 高级搜索：即点击更多展开其他搜索条件,减少了更多条件对用户的干扰，但降低 了易发现性。搜索简单搜索高级搜索关键词1 ：关键词4：关键词2：关键词5：2）筛选根据筛选的位置，可以分为标签筛选、表头筛选两类。