小厂B端产品啥都干——B端表格设计入门指南（上）
前言
众所周知，表格是一种可以清晰、全面、高效地将数据展示出来的组件，作为B端产品，表格一定是产品设计工作中接触最多的组件，今天我就以一个小场景来说说B端表格的应该如何入门。
关于本系列文章，有几点需要提前告诉你：
- 无特别说明的业务案例，都是虚构案例，逻辑合理，但可能过于简洁，不符合业务的复杂性；
- 使用的解决方案更像是一个临时方案；
- 简单的业务、临时的方案是为了将你快速地带入到场景中来，无需深究；
我是个野路子出身的产品经理，做过Java研发，后来转做过2G、2B的产品经理，我的学习历程是先看别人怎么做，想想为什么，然后尝试自己做一下，最后再想办法去学习怎么做，慢慢去提升。所以，我的文章通常会分为三个部分，本次B端表格设计入门指南将分为如下几个部分：
- 上篇：表格常见的样式、组件配合（看看别人怎么做的，为什么这么做，然后自己试一下）
- 中篇：表格的概念和设计原理（想办法去学习）
- 下篇：只能帮你到入门了（慢慢去提升）
一、 基础表格
假设有个系统，现在需要将人员信息展示出来，这时也许就是一个简单的表格。
随着信息的增加，业务的推进，表格可能变成下面这种情况。
这时候表格就会变得很长，在视觉体验上不会很好，所以此时就引入了固定列的概念。
二、 固定列+固定行
这样可以保证在表格长度很长的情况下，常用信息、重要信息、操作按钮能始终出现在用户的最佳可视范围内。
同理，如果表格高度非常高的的情况下，我们也可以使用固定行的设计，来将表头信息始终展现出来。
若展示出来的数据越来越多的话，或者操作按钮越来越多了，此时固定列将无法满足展示的需求，这时可以改成展开行、按钮组的形式来展示。
三、 展开行+按钮组
将展开行与按钮组的功能放在一起介绍，是因为他们有一个共同的特性，优先级分层，展开行是将信息分为了重要主要信息和次要信息，而按钮组则是将按钮分成了常用按钮和非常用按钮，也可以设计成预览查看类和操作类按钮等等。
四、 分页+搜索+筛选+排序
当数据的逐渐增多，在一屏中展示大量的数据会让用户感到疲惫和无力，这时就可以引入分页，来减少用户的视觉疲劳，同时再使用精准搜索+筛选这两种组件，来帮助用户更快、更舒适的查看和查找表格数据。
为了减少用户的记忆成本，我们也可以使用模糊搜索；同时，基于用户的习惯，或者说是视觉能力，我们也可以让用户来决定在每页展示更多（也可能是更少）的数据量；最后，加入一个简单的排序功能，一定能帮助用户更快的去找到那些关键人物，如年龄最小的那个人、工号最靠前的那个人。
五、 树表格+斑马线
随着产品的使用，用户可能不在要求数据内容的展示程度（数据维度），而更希望能在数据结构上、视觉体验上有一个更好的呈现方式，对于本次的人员信息，我们以部门为区分依据，对人员进行树结构调整。这里为了增加每行数据的辨识度，减少用户的阅读成本，还是用了一个隔行变色的设计。
六、 合并行+合并列
对于树形表格，其实并不是所有用户都能很好的接受他，虽然他很直观，但在B端用户中，他们可能跟习惯类似Excel中的一些展示形式。
七、 批量操作（删除、修改、导入/导出）
当需要操作的数据很多时，比如需要现在需要新增100个员工，用户可能需要现在线下先用Excel将新员工的信息收集上来，然后再一个个录入到信息中，又比如现在某个部门的人员集体辞职了，或者这个部门的人员全部调动到另一个部门了等等，这些同质化的反复操作，我们都应该将他做成批量操作。
八、小结
表格设计中可以用到的思路当然不止这些，比如表头可以使用合并列来对数据进行一个分类，可以实现鼠标指向的那一行高亮，可以使用气泡来增加隐藏字段的显示，可以使用标注信息来增加表头的内容等等，这些我会在下一篇中给大家讲到，但我认为，最基础的部分就是第一篇中介绍的这些内容，这些功能熟悉后，将决定你设计表的一个能力下限达到一个及格水平，及格水平意味着你设计出来的表格可能不美观、不好用，但一定是能用的，能满足用户需求的。
最后需要重提一下，第一篇中的业务场景和解决方案略微偏离实际，而且还有些理想主义在里面，但这并不影响，因为你需要了解的是，表格设计常用的手段有哪些，有固定行列位置、展开行、分页、搜索/筛选等等，而不是纠结于我当前的解决方式是否合理。
欢迎关注作者的微信公众号：Turning
小厂B端产品啥都干——B端表格设计入门指南（上）相关推荐
- 小厂B端产品啥都干——B端表格设计入门指南（中）
前言 书接上回,上一篇B端表格指南向大家展示了一些常见的表格样式,在产品设计能力中,一个人的眼界往往决定了这个人的产品设计下限,所以我将常见表格样式的介绍放在了第一篇,那么第二篇将从底层思维上给大家提 ...
- 决胜B端第2版（3）：都有哪些典型的B端产品？同样是B端，其实区别非常大！
这篇文章是新书第二章的节选,这部分内容写了较长时间,对第一版书中的产品分类做了较大调整,个人对新版本的产品分类更加满意,而且我觉得新的分类很好地体现出了B端产品特性以及在商业化上的显著区别.终于把前两 ...
- ERP、CRM、SCM、BPM、DSS... ...这10种主流的B端产品你都知道吗？
0. 引言 所谓B端产品,就是面向企业用户的互联网产品,是Bussiness的缩写.随着信息化时代的进步,人工的统计管理已经不能满足企业的管理需求,企业发展也越来越依赖于信息系统. 随着信息化时代的发 ...
- B端数据表格设计实战指南（建议收藏）
作者:nick (转载已取得作者授权) 1. 前言 在企业级中后产品中,通常大量使用表格来展示结构化的数据.合理地设计表格能给用户带来高效的信息获取率,但如何言而有物地设计表格,相信是绝大数刚入行B端 ...
- B端表格设计实战指南
作者:nick (转载已取得作者授权) 一.表格的介绍 1. 表格的定义 表格(Table):又称为表,是用来收集.整理.组织.分析数据的二维矩阵:它既是一种可视化交流模式,又是一种组织整理数据的手段 ...
- 《需求设计：构建用户想要和需要的产品》——第1章 情境驱动设计入门1.1 对需求进行设计...
本节书摘来自华章计算机<需求设计:构建用户想要和需要的产品>一书中的第1章,第1.1节,作者:[英] 克里斯·布里顿(Chris Britton) 更多章节内容可以访问云栖社区" ...
- 猫都能学会的Unity3D Shader入门指南（二）
关于本系列 这是Unity3D Shader入门指南系列的第二篇,本系列面向的对象是新接触Shader开发的Unity3D使用者,因为我本身自己也是Shader初学者,因此可能会存在错误或者疏漏,如果 ...
- 猫都能学会的Unity3D Shader入门指南（一）
动机 自己使用Unity3D也有一段时间了,但是很多时候是流于表面,更多地是把这个引擎简单地用作脚本控制,而对更深入一些的层次几乎没有了解.虽然说Unity引擎设计的初衷就是创建简单的不需要开发者操心 ...
- 进化计算机小游戏攻略,亘古幻想超详细攻略 新手全方位入门指南
亘古幻想是一款非常耐玩好玩的卡牌RPG,本作的角色收集.人物培养都有其特点,作为一款人气较高的游戏,该作品每次更新都有萌新入坑,因此本文针对新手玩家,做了全方位的详细攻略,可以帮助大家熟悉游戏,快速成 ...
最新文章
- 资深大佬：基于深度学习的图像边缘和轮廓提取方法介绍
- 命令行下执行带参数php
- 学习 Message(14): 区分左右 Shift、Ctrl、Alt
- sequelize的应用
- lodash _.size
- 杨辉三角形又称Pascal三角形，它的第i+1行是(a+b)i的展开式的系数
- mysql 删除多余帐号_安装完mysql数据库后的优化（删除多余用户和数据库）
- 详细讲述STP过程【转自56cto.com】
- php 通用购物车,PHP实现购物车代码[可重复使用]
- 知名大学硕士生被通报，这件事千万别做！
- 水彩在网页设计中应用的15个优秀案例
- SAR成像(七)：RD成像算法
- 拒绝PPT手机？魅族首款真无孔手机将开启众筹
- python数值类型教程_Python数值类型 int、float、complex 详解
- 频谱分析仪查看时域波形
- eplan连接定义点不显示_CAD和EPLAN！电气制图你会选择哪个？
- 计算机大赛鼓励语录,比赛鼓励的话
- springboot仓储系统出入库模块设计系统java ssm
- Android之手机卫士涉及的知识点总结
- 舞象云出席泰华商城智慧营销系统上线发布会，问道传统百货新未来
热门文章
- android多级列表
- 未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage
- 生活中的小技巧-2：洗衣机洗衣服打结缠绕，该如何解决？学上几个实用招数
- ibm服务器日志文件提取,IBM服务器日志搜集方法
- 本地docker不能登录远程harbor服务器，error response from daemon，error parsing http 403 response body
- 路由器设置服务器用什么协议,路由器配置基础知识
- C#学习之web网站制作入门篇（ASP.NET）
- 图文详解！java开发面试简历模板java
- flex-shrink 解决实际问题（flex-shrink:0避免图片被压扁）
- 亚洲首台BMD8K切换台开箱