编辑导语：你有没有设计过结构复杂、内容繁多的表单？在设计时有没有什么技巧可以化繁为简、提升填写者的体验感呢？本文作者为我们罗列出了表单设计中可能遇到的一些问题，并且提供了解决方案，让我们一起来学习吧。
距离上次发文已经快半年多了，实在是惭愧，好久没有输出内容了，看着每周增加的零星关注人数，内心更加焦灼难安。
这半年来我换了工作，也适应了新的环境，同时也在思考新的方向，估计和大多数的设计师一样，迷茫时常伴随着我。前段时间写了几周的产品体验日记，但觉得缺乏深度就没发上来，后续我将会继续写产品体验日记，完善后分享给大家。
2020所剩无多了，我也会将积攒下的一些内容陆陆续续发上来与大家分享，感谢关注，感谢阅读。哈哈哈哈
你平时填写过的最复杂的表单是什么？调查问卷还是文档信息录入？如果一个表单字段内容巨多、结构多变、填写耗时耗力，那你将如何设计你的表单使之体验更佳？
面临的问题:
不知道大家是否看过法律合同之类的文件，多则好几箩筐，少也有厚厚一叠；类似的文档如果进行线上结构化，势必要同样要花费巨大的人力去填写表单，完成基础信息的录入工作。
同时，由于录入的时间不确定，流程不明确等问题，也制约着表单的填写。
多个不同表单之间的互有关联又相互区别，填写的时候需要来回查看以确认信息，查阅和填写相互并行，操作繁琐。
几乎每一个字段都有对应的关联项，每个单选字段的不同项决定不同的内容。同时，由于字段数量，层级划分不明确，会使填写的人失去定位，产生迷惑。
根据业务内容分级，合理运用颜色、间距、字体大小、卡片层级等进行信息分级。
一般表单是与某项功能挂钩的，信息会在多个入口录入。因此在填写长表单的时候，如果能从系统中自动获取到数据，就可以自动为其填充，可根据业务场景，判断是否让其修改和更新。
一般的长表单在涉及非审批流的时候，可以让其无限二次编辑；如果是处于审批流，则需要根据业务场景限制其编辑次数或者限定其编辑规则（草稿可编辑，一旦提交则不可编辑）。
如果一个长表单，需要多个不同的业务域的人来填写，那么需要协同编辑，并实时显示编辑的人员信息。
同时，为了避免信息丢失和编辑错乱，在同一个表单下，同一时间应该限制只允许一个人进行编辑，等其提交完后，可允许其他人进行编辑。
前端实时校验字段输入规则，后端统一校验信息交换规则。
比如对于数字输入框的校验、电话号码的校验、身份证号的校验，应该在前端实时完成。
在鼠标离开焦点区域或定位到下一个字段的时候，提示其填写有误；这样做的目的是减少后续修改的次数，在长表单下，统一提示其填写错误会是一场灾难。
在点击保存并填写下一步或点击提交信息的时候，就需要跟后端交换数据，验证录入的信息；如果不匹配，则提示错误，并从上至下定位至相应的错误字段。
要通过多种方式，引导表单的填写。
1）在开始填写之前，简要说明该表单的业务目标，大概需要花费的时间等；
2）开始填写后，关于每个字段的特殊说明，都需要标注出来。重要的要显示在页面上，不重要的就收起在注释符号中；
3）填写的过程中，切记不要到最后才告诉用户哪里出错了，重要的信息一定要提示到位，否则一旦出错，前功尽弃；
4）填写完成后，引导其下一步的操作，或者返回至列表。
表单填写完毕后的产出物就是详情页，详情页是需要浏览的。因此在设计详情页的时候，应该本着让用户浏览方便的原则去设计，需要注意以下几个点：
1）结构清晰
结构清晰是指不要讲内容一股脑的全堆在页面上，要做好信息的分类；同时，注意规划页面的层级。
2）设置快捷导航
如果一个表单是长且复杂的，那么其对应的详情页也会变得复杂和冗长，因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。
快速返回顶部按钮的使用要注意场景，如果你的页面比较长，且没有分组浏览的导航，那就需要设置快速返回顶部的按钮。
但是在存在分组浏览导航和顶部悬浮标签的情况下，不建议使用快速返回顶部的按钮，因为在填写表单的时候，使用快速置顶的场景比较少。
当一个模块混杂着各种信息的时候，单纯的模块分组已经无法处理它的复杂度了，因此需要收起高频且信息量大的模块，可以合理的减少页面的复杂度。
步骤条可以单纯的作为步骤指示器使用，也可以作为一个表单完成度的提示区域。
在填写大量字段的表单时，阅读表单内容和填写表单同样耗时耗力。
如果我们将所有的提示信息隐藏在提示符中，一般情况下用户不会去查看；但是如果去挨个查看提示信息，则会多花费一个步骤去点击或者悬停来查看提示信息，浪费了大量的时间。
因此如果涉及到重要的提示信息，请直接展示在字段的后面，不要隐藏起来。
在后台产品上，关于组件的规范统一，想必是人尽皆知的设计原则。
无论是各类平台型设计组件，还是各个公司自造的设计组件，保持统一和规范对产品设计有着重要的作用，在这里不赘述组件应该怎样规范统一。
因为无论是Ant Design还是其他设计语言，都有详尽的关于组件的定义方法，我在这里讲述一个产品设计更高层面或者更深层面的原因：
组件的规范统一并不仅仅是为了省时省力，而是为了使用户在使用的过程中达到认知上的统一和行为上的统一，在进行高频次的操作后，界面的流程或者组件样式已大致在用户脑海中形成固定印象。
因此在操作相同类的流程时，用户会有更多的掌控感，试想一下：如果你在操作人事相关的流程后，去填写绩效部分的内容时，发现一个迥异的界面或者弹窗，你肯定觉得这是不是哪里出错了，甚至会怀疑这是否是同一个系统。
目前大多数公司的管理系统经过多次缝缝补补，内部的跳转逻辑已经异常感人，界面风格也大放异彩，但是使用起来却无从下手，深感迷茫。
因此大到界面样式，小到间距大小，产品设计的规范和统一应该是最基础又不可缺少的原则。
对付复杂的表单，你需要解决的主要问题并不是填写方式或者页面设计，而是信息分级和结构拆分。解决了这个问题，基本上就解决了业务问题，其余部分就跟我们常用的表单一致。
将复杂度降低并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉上的复杂度和流程上的复杂度，这样才会达到当前场景下的“最佳解决方案”。
随着互联网信息化的深入发展，复杂是避免不了的。
我知道大家都推崇简洁的设计，但那只是对视觉和样式的定义，而非对信息的定义。
我们所处的世界是复杂的，行业更是复杂的。信息的复杂度与日俱增，想要处理复杂的信息，就需要从复杂中寻求规律，这规律与业务息息相关。
B端360行，行行深如海，小伙伴们，我们一起慢慢修炼吧~
一、导语
1. 业务复杂，功能较多
2. 流程较长，操作繁琐
3. 字段较多，关联项较多
二、解决方案
1. 内容分组，分步填写
2. 实时保存，避免数据丢失，提供草稿功能，避免任务中断
3.字段分组，示意结构，联动项隐喻
4. 信息自动带入，节省时间
5. 提供二次编辑功能，防止信息输入有误
6.提供多人协作编辑功能
7. 实时检验
8.做好填写引导功能
9. 详情页也需要注意信息分级
三、小细节，大体验
1. 提供快速返回顶部的按钮
2. 提供分组模块收起展开功能
3. 步骤提供信息填写完成度提示
4. 重要说明性文字尽量显示而非收起
5. 产品内组件应该规范统一
6.庞大的信息录入，表单内部要分步填写，外部可拆分成不同的表单分别填写
四、结语
文章来源：人人都是产品经理 作者：米兰小铁匠
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
目前我主要深耕于B端设计中，深知B端表格设计与C端有很大的不同，无论是表格的展示形式以及承载内容上都有非常大的差异。而现在网上有不少关于表格如何设计的文章，但要真正落到实处的少之又少，因此今天我们就来聊聊表格，探讨一下B端表格究竟应该如何设计。
由于表格组件类型复杂，因此分为上下两篇，上篇主要讲基础知识点，下篇主要针对交流群中的20个问题进行解答，欢迎持续关注～
在我们B端表格页中，由导航、筛选、表格几大模块构成，因为表格面积占比最大，页面呈现最为重要，会直接影响用户的使用体验。
在我们对表格的设计思考过程中，需要注意两项原则：易读与易用
前者是提升使用者在表格浏览时的体验，主要是从信息密度、色彩分隔、以及视觉节奏三个方面去理解；后者是使用表格时的操作感受，比如快捷操作、多数据编辑等方面去理解。无论是B端的任何页面，表格都是必不可少的部分。
想要把这三种形式讲透，需要将数据的形式结合起来说，我会从展示形式、数据结构、前端标签 三个方面去解释三者的区别。
表单拥有一对一的数据结构，能够让用户明白数据间的对应关系。同时使用表单的门槛，拥有更合理的录入形式，比如在常见的问卷调查、登陆注册都是采取表单的形式。
在前端展示方面，表单采用的标签一般会包含：text、password、radio、checkbox、button、submit、reset、image、file等属性，我们也要针对不同的属性进行相应的设计区分。
列表能够将数据在一列中井然有序的展示，保持数据的有序与整洁。列表拥有一对多的数据结构，能够让用户理清一条数据下的多个对应关系，并且多个对应关系是相互并列。比如在常见地待办事项、走查清单中里，就是使用单维度数据进行排列。
在前端展示上，列表中的标签分为有序与无序。
• 有序列表：即有顺序的列表，其各个列表项按照一定的规则排列定义，前端标签上采取<ol><li>的结构。
通常有序列表一般为数字序号（1、2、3、4...）或者字母序号（a、b、c、d）
• 无序列表：无序列表的各个列表项之间没有顺序级别之分，为并列关系。前端标签上采取<ul><li>的结构。
在多维度的数据分析中，你是永远的逃离不了表格，使用多维度数据进行统一的结构化展示，让用户清晰的看到在同一主题下的多条数据的对比，使数据能够进行多维度的展示，保证数据的完整性。
在前端的方面，表格中都是采取 <table> 标签进行展示，同时表格中的行与列分别用 <tr> 与 <td> 标签，我们通常说的表头，则为 <th> 标签。但要注意，在前端眼中表格永远没有列的概念，列都是每行拼接而成。
正式开始之前，我们先定义一下表格～
表格是一种常见的信息展现形式，它是所有B端组件中信息展示密度最高，同时涵盖了B端的所有场景，因此是B端设计中的一个重要的组件。
在我们常见的B端产品改版中，除了对页面流程调整以外，更多就是围绕表格而展开的一系列优化。因此表格的设计，做为B端设计师的基础能力之一，也是检验一个B端设计师是否合格的关键因素。
表格属于形式十分单一的组件，对于没有经验的设计师来说，会认为能够调整的地方实在太少，往往在思考层面就会有所不足。对于一个B端表格来说，它需要具备数据浏览、数据新增、数据操作、数据统计，因此功能多而全，很难思考解决问题思路。
通常设计师设计单个组件，都会有较好的全量意识。而到了多组件的联动时，就会出现问题。
比如在表格中，除了表格本身，还会有搜索、筛选、视图、分页等操作，如果不对多组件的交叉使用进行思考，也会缺少对于这些场景的设计。
在表格中，会承载多种多样的字段类型，而每一个字段类型都会有相应的差异。形式的不同落到表格上就会有不同的呈现形式，在关键数值的处理上，也会差强人意。因此看上去简单的一个表格，其实会有很多需要设计的点。
而深入到表格的内部中，你会发现能做的远远不止于此，如果刚开始没有对表格进行梳理，那么你在设计的过程中，对于反复出现的表格将束手无策，为了让大家能够对表格有更深的理解，我将表格进行系统的拆解，结合实际案例，能够让表格更浅显易懂。
首先问大家一个问题，你觉得表格一共有几个部分组成，分别是什么？给大家五秒钟时间思考～
5
4
3
2
1
～
在我看来，表格一共分为五部分：
概括整个表格的内容信息，让用户一眼就知道该表格的用途是否符合自己心中的预期。
在实际场景中，除了通过标题文字去的形式之外，你还可以为每一个表格去设计不同类型的图标，这样能够让用户看到图标就能联想到内容，这也是现在无代码开发平台常见的处理方式。
但在工具栏的排列方式会有非常多的讲究，在市面上的操作区域一般可分为单行与双行的状态，可根据自身产品要求的特点进行随意的变化，会在文章后半部分具体讲到工具栏的设计思路，这里就不再过多赘述。
概括每列的主要信息，在用户使用表格中，起到数据解释作用，让数据能与之进行匹配，使用户能够看懂数据。同时在表头处会拥有一些操作，比如冻结、筛选、排序都会放置于此，因此需要进行留意。
承载用户的每一条数据，也是整个表格的核心。单元格的大小行高都会直接影响用户使用表格的体验，单元格的设计上也会有很多设计思路，在后半部分也给他家提供了我自己的看法，与大家进行探讨，在这个就先按下不表。
严格意义上讲，分页是不属于表格当中，但当数据超过用户所设定的阈值时，就需要使用分页拆解数据，所以分页和表格是经常联系在一起的。分页一共有：基础型、迷你型、完整型三种类型。
而如何进行跨页的操作，一直都是分页在B端中的难点，需要有好的思路与逻辑，在分页模块中与大家聊聊。
你知道表格类型的多少决定你了设计表格的下限。
虽然在大多数业务场景中都是使用基础表格，但在B端产品中业务的多样性使得很多特殊的表格有它独特发挥的空间。
我发现在我的B端交流群都有着类似的问题，他们不知道表格还存在这么多的类型，这时候你与别人之间的认知的差距就是你设计优势所在。
基础表格是根基，是由行与列的单元格组成。在使用层面上能满足用户多维度查看数据的需求。因为大家都很熟知，在这一章节并不是主角，我们就不做过多赘述。
当表格中的数据为包含与被包含的结构时，可采取树形表格。
通过逐级大纲的形式来展现数据间的层级关系，让整个信息结构变得一目了然。这一表格形式常出现于项目管理工具中，比如 Teambition、Tapd、飞蛾都有这样的设计。
作为腾讯最重要的项目管理工具，在产品设计之初，就考虑到类似情况，你能够在Tpad单列数据编辑点击入口，创建子数据，这样在项目管理的场景下，有着较为友好的交互体验。
前段时间，Teambition正式成为阿里旗下的办公套件，而钉钉的云钉一体化，或许证明这样庞大的市场仍然还要等待时间的挖掘。期待资本对于B端行业的更多动作
我们回到设计上，Teambition在9月份经历的改版，变化很多，有机会可以总结一个改版分析分享给大家，作为一个项目管理软件，Teambition也拥有树形表格的这样一共功能，它的添加入口出现在每个数据详情页的最下方，同时在视图层面，也可以筛选展示为：所有任务、仅父任务、仅子任务四种场景，更能满足用户的需求～
当一条主数据下有多条数据结构不同的关联数据进行嵌套时，这时候就可以用子表格进行创建。它能够对主数据进行更加细致的解释，详细的了解主数据中数据的含义。从表象上看，就是在一个表格中还能嵌套另一个表格。
比如在对某集团对旗下子公司的销售表格中，它能够通过嵌套子表格的形式，将每一个子公司下的销售人员的销售记录进行记录，从而能够更加细的了解到每一个公司、每一个人员的具体情况。
在国外报表中，这类表格很少出现，而在中国的报表中，嵌套子表格算是一种不折不扣的中国式报表。
当然这里我们依旧可以深入理解，比如在两个表格之间，用户是通过什么样的方式建立一个父子的关系？表格中当父数据删除时，子数据如何处理？设计上对父子之间的关联有着何种限制，这都是我们需要思考的，因为这里牵涉到业务实在太多，我也无法抽象出一个规律供大家学习，因此只有具体问题具体分析。
当一个表格里面有多条数据在同一个小范围的维度进行展示时，它就是交叉表格。从表象上看，就是表头有很多分组进行区分，因此它也叫做表头分组。
它能够通过硬拆分将数据进行切割，但是这样数据的易读性就是有很大的差距，比如在2010-2020公司年度收支表格中，需要同时展示每一年份的收入、支出与利润，使用交叉报表能够让用户一眼就是看清数据，而基础表格却不行。交叉表格也算是中国式表格中的一种，能够满足具体业务上的需求。
当一个表格里面有多种图表数据进行展示时，他就是图表表格。
在对一些项目做定制化开发时，这是十分常见的场景。用户点击某一数据后，直接跳出数据的统计图，方便用户进行对比。同时这一功能也可以通过仪表盘这样的功能去解决，也就说到国内最爱做的数据可视化。
这是很多人都会忽略的一个点，主要是大家对于表格的理解各不相同，也没有具体的文章对于表格尺寸有个非常明确的限制，在这里分享一个我常用的数据点，用于判断表格设计的优劣：表占比。
表占比：表占比是指在1920x1080的屏幕大小下，表格占整个页面的比例 即：表格面积 / 页面面积 = 表占比
这里需要指出，这里的表格面积是指，表头+单元格+分页（不包含工具栏）
在我对十几款主流B端软件的总结分析中，惊奇的发现大多数产品「表占比」都是在65-70%之间，而一些不注重交互设计上的产品则会有所偏差。
那为何65-70%是一个更为合理的数据？
因为只要在页面中出现表格，就代表这个页面一定是以表格作为核心。而表占比低于65%，代表页面中的表格不处于内容的核心，你需要重新审视这个页面所需要传达的功能。
如果表占比高于80 %，则代表表格出现面积过大，要考虑用户是否能够接受如此大的占比。
因此，设计的合理性来说，占比在65-70%之间能够保证数据展示的合理性，同时这主要是针对CRM产品，大家可以使用这个占比去衡量自己设计的B端产品～
当然这样的情况并不是一尘不变的，B端最大的魅力便是业务逻辑，我们来看一个看起来像是反面的例子：在销帮帮中，表占比为：61.2% ，看似是一个并不合格的成绩，而且数据十分异常，让我想要深挖，为何会如此的低。
通过进一步的分析，发现销帮帮是一款与钉钉生态深度绑定的产品，其产品只能通过钉钉软件进行使用，而钉钉本身默认并不是1080px的宽度，用户打开并且全屏的尺寸偏小。默认尺寸大小的不同，最终让销帮帮选择去满足业务而牺牲表占比去换取更多的功能。
因为在B端的工具栏的设计中，市面上缺少思路与方法的指导，会出现非常多的问题，因此我展开讲讲工具栏的设计，就不出单独系列进行讲解～
首先，对于工具栏，不同的产品，会对它有着不同的定义。比如在Apple MacOS 系统当中经常提到的Toolbars和Toolbar Items；又或者是Microsoft 产品中采取的Ribbon设计模式。在设计底层思路上截然不同，平台级产品思路与定制化产品思路存在很多截然不同的做法，我们今天简单聊聊大家遇到过多的表格工具栏设计，不做深挖～
在表格工具栏的设计中，信息分区与页面透气是非常重要的两个设计核心。
信息分区：
因为工具栏是由标题、筛选、搜索、视图、新建等操作组成，而功能间的区分是工具栏设计的一个关键。
当一个工具栏中，需要将如此多的元素进行组合排列时，必然会有其排序的规则，这时我们就可以通过亲密性原则，对工具栏中的信息进行相应区分
在设计的亲密性原则中，我们可以将功能相近的工具放在一起，比如：搜索与筛选都是数据过滤的操作，应该放在同一分区；
同样，工具栏也会存在一些功能点不太相近操作，我们就应该通过分区将其间隔开，比如在下图中，每个功能都将其用线条区分。
当然，在信息的去区分上，也有强弱两种不同的方式，一种是通过线条直接分割；另一种是将工具栏进行空间上的区分。因此可以通过信息区分去检查你的工具栏设计是否合理。
内容呼吸：
在一个定制化项目中，设计师一定要让自己的页面具有呼吸感。在B端业务中，信息量本身就已经足够庞大，而页面的中的疏密关系就显得尤为重要。
通常列表都承载着繁杂、冗余的数据，是一个信息集中的密；工具栏作为与表格关联的上部分，呼吸感便成为表格的重要因素。通常在表头处要将空间尽量分散开，这样才能满足整体的疏密关系。
经常看到一些十分冗杂的表头，甚至它丧失了表头的真正含义。在实际情况下，尽可能明确、简单的讲出表头的内容，以免造成表格的宣兵夺主。当然也会存在一些专业术语，这时候，给一个Tooltips再合适不过。
在表格中，单元格的行高是一直都是一个难以控制的变量，因为行高会直接控制表格中的信息密度，而信息密度永远是一个无法量化的元素。而在我们设计过程中，需要采取盒子模型的方式，让你的设计更加落地。
知识点补充：盒子模型
从前端开发而言，单元格是一个最为基础的盒子模型。而HTML中的所有元素都可以看作是一个盒子。而我们所设计的页面也正是由这个样的原理去还原出来。
Margin(外边距)：清除边框外的区域，外边距是透明的。
Border(边框)：围绕在内边距和内容外的边框。
Padding(内边距)：清除内容周围的区域，内边距是透明的。
Content(内容)：盒子的内容，显示文本和图像。
a.单元格内容
内容一般为文字、图标、头像等等，而对于数据中你想要格外突出的内容，这里称为关键数据标识别。从盒子模型的角度来看，它就是当中的Connect，但单元格内容中，一般会有一些处理技巧：
关键数据标识：
用户在使用表格时，会经常去留意一些关键的数据。比如数据的状态、变化的多少…
如果在系统中，你能够很明确知道用户想要了解的数据时，便可在关键数据上进行标识。这样能够帮助用户快速定位到自己想要的信息，减少数据寻找所化的时间。但如果你对关键数据标识出现误判，这条数据便是一条十分干扰的数据，因此在这里的设计，需要慎重考虑。
比如在飞书的成员与部门中，对于账号状态就是一个关键数据的标识，一方面用户可以快速了解到已经激活的成员，另一方面对于未激活状态的进行突出展示，同时给予用户未激活后的再次发送提醒的操作，是对用户使用的优化提升。但，如果将不重要的数据进行标识，例如手机号，那么这将会是一个令人痛苦的设计。
人员角色展示
人员角色展示在表格中十分常见，通常会是以用户名称+头像的形式展示。
但在真实场景的表格中，头像需要给予默认的形式，比如钉钉、飞书就是以用户“姓”作为头像的默认值，而在多个人员角色展示时，就需要考虑特殊情况，无论是极值省略展示与获取全量数据中，都需要我们进行设计上的处理。
进度条
进度条是属于关键数据的一种，它所涉及到的功能与图表表格类似，能够更直观展示数据的占比，方便用户对于多条数据间的值进行判断。进度条常见于“容量、使用量”的数据中。
表格空白处理
表格中经常出现空数据的情况，而表格的留白对于用户而言会造成一些困扰，特别存在与页面中的大面积留白，感觉像是数据没有加载出。因此在表格空白数据处理上，可以使用“-”来进行默认展示。
b.单元格行高
单元格行高一般由：文字大小、文字行高、左右上下边距共同组成。
从盒子模型的角度来看，它就是其中的Padding。因此行高的确定，是由上方四个条件共同组成。
文字大小：一般出现在表格中的文字大小都在12-16px之间，通常13、14px最为常见，建议大家设计也在此范畴内。
文字行高： 行高是一行文本垂直方向的高度，这个高度和字高无关，文字内容水平居中。可设置为字号的1.2-1.8倍，文字与分割线间距离可以设定为字号的1-1.5倍。
边距（Padding）：表格中的边距分为左上右下四个方向，而左上右下恰好就是对应前端去编写Padding代码的顺序，在对页面验收时，便可采取这样的形式。
单元格行高可配置：单元格行高直接影响着信息排列的密度，而在实际业务中，真正落地也有着不同的做法。
在对定制化项目的开发中，通常会设计一套设计师认为更加合理的单元格高度，一般为32px-56px区间内，而在很多通用化产品中，存在多个设备屏幕分辨率的差异，为了让每一个分辨率下的产品都能够有较好的展示效果，于是乎将选择权交给用户，在表格左下角会设置舒适、标准、紧凑三种高度来满足需求，使得表格更加落地合理。
总结：整个单元格的行高，就是由这三部分组成，它们的嵌套与组合，所形成了单元格的行高
c.表格分割
在表格设计当中，每一条线都有着它存在的意义。
当表格中展示横线；隐藏纵线。
用户的横向阅读体验更佳，强调一条数据的完整性，能够让用户进行快速的对应。
当表格中展示纵线；隐藏横线。
用户的纵向阅读体验更佳，强调数据上下间的对比，能够让用户找到同一纬度数据下的对比。
比如在一个组织架构的成员列表中，我相信大家都设计过类似页面，同样的设计方式，我一个采取展示横线、一个展示纵线，结果明显，我成员需要阅读完整条数据，因此横线会更加合理。
当然，在我们日常的设计中，展示横线的场景显然会更多，但我们日常使用时，数据对应的场景还会更多这是需要有更强的设计形式：
d.行、列冻结
当表格的行与列的数量过多时，会导致一屏展示不下，而表格中的关键信息与操作是需要在任何时候都展示，这是采取行、列冻结，能让用户快速触达。
表头冻结：通常出现在垂直滚动时，通过固定表头的信息，能够让用户阅读时对应不同的数据，使用户更好理解数据。
首尾冻结：通常出现在水平滚动，通过固定首列的主属性字段以及尾列的数据操作，来满足用户对于一列数据的认知，从而使用户进行快速操作。
在对分页设计的分析中，我们需要对分页中的元素进行拆解，才能明白分页的类型所带来的不同。
表格信息：会展示表格信息当中的数据总量、更新时间、默认排序方式等...
数据总量主要展示用户需要浏览的内容的总量；常见于管理后台搜索、筛选符合条件的数据记录时，搜索结果页通常会展示这个信息，这让销售人员在操作时有心理预期。
更新时间主要是展示用户当前表格所操作时的日期时间；常见于金融类产品中，他们对于表格中数据的时效性尤为关注，这样可以方便用户对表格数据中的有效性进行判断
默认排序方式主要是展示表格中是按照哪一个字段进行的排序；通常这种做法多出现于表头直接展示icon，但对于可配置化的产品而言，随着列数的增多，你越来越找不到你想要的默认排序方式，因此在表格的固定位置展示，就再好不过（记住，只针对特定场景）
页面展示数量：结构为「X条/页」
它能控制每个页面展示多少条数据；当在系统中有很多数据时，你可以直接通过「页面展示数据 * 分页总数」 直接算出整个表格的数据总和。
上一页和下一页翻页：分页中基本组成元素通过用户点击上一页、下一页的按钮，实现表格的翻页功能。翻页通常会根据场景不同，去省略翻页中的不同元素，比如在下面马上那个讲到的三种翻页类型，但是上一页和下一页是绝对不可省略的。翻页也如同你翻书一样，可以进行对数据的逐页阅读，遵从用户之前的使用习惯。
当前页码：当前页码说明了页面中数据当前所处的位置，方便用户进行翻页的操作。
相邻页码展示：相邻页码通常展示前后两页，比如你在第6页时，页面需要展示：4、5、6、7、8；但页码在第1页时，就需要展示：1、2、3、4、5；页尾同理。
更多分页：当表格数据过多时，就需要使用分页，同样，当分页过多时，我们需要进行处理，就是省略，采用更多分页，去展示多余的分页情况，当用户需要查看更多的分页，点击更多图标即可。
总页数：代表大概会有多少页此类数据，通过使用总页数才能让用户知道
总页数说明了内容一共有多少页，就像一本纸质书有总页数，一本有声书有总时长；通过这个元素，用户才能了解内容的多少，对整理内容有个把握。
页码跳转：页码跳转帮助用户从当前页面跳转到其他某个页面；比如用户在搜索了某件商品，按销量排序，这时浏览到了第15页，满意度越来越低；于是打算从前5页选一个，这时就能通过页码跳转快速跳转到第1-5页了。
简洁型：
当分页数量较少时，通常在7页以内，就只有最基础的展示：上一页、分页数量、下一页。
迷你型：
当页面空间不足或者降低分页的视觉影响时，可以采用迷你型，主要为当前页/总页数，可以直接跳转到某页面。
完整型：
当表格数据较多，为了满足更多的用户需求，可以根据需求选择分页类型。比较完整的分页还包括如下功能：显示总数、调整每页显示条数、直接跳转到某页。完整型的虽然满足各种功能需求，但是所占空间较大，所以我们要根据自己的需求合理拆分使用。
分页固定：
在表格中使用分页，除了选择合理的分页类型外，我们还需要注意当数据过多的时候，是否要固定分页。这个需要根据需求来决定，如果用户翻页很频繁，表格数据又特别长，就可以考虑分页固定在底部，免得每次用户翻页都要跑到表格的最底部才能分页，还可以在表头也放迷你型分页。但通常在设计表格的时候就没有固定，也很少使用表头分页，所以根据需求来定。同样按钮的设计也会存在类似的情况。
另外就是当数量过少时，只有一页或者无数据的时候，我们是不需要分页的，这个时候最好去掉分页，展示在这里没有什么意义了。但很多时候我们设计没有做区分，开发也就不管了。
老读者都知道，我会反复去强调“场景”这一概念（比如在导航菜单、筛选、弹窗、图标中经常提到这一词），因为你只有明白用户真正的业务场景，才能够真正的明白用户的痛点。我们回到表格中，在表格的场景主要分为五类不同场景：数据浏览、数据新增、数据操作、数据统计与通用场景。我会通过不同场景的梳理分析我们在不同场景中存在那些优化点，可以进行深入探讨。
在数据浏览的场景中，本质上是对大量数据进行寻找与确认。用户需要在此场景下进行准确的数据查找。而伴随着用户的寻找，就需要使用表格当中的工具进行辅助查找，比如筛选、搜索，这些工具的出现，都能够帮助用户进行数据的清洗，使得用户想要的数据能够快速的被找到。
比如：我们公司的销售人员在每天早上，都需要去 check in 今天自己所要跟进、回访的客户，销售人员就会通过表格中的各种工具，去帮助销售人员找到自己想要的那部分数据。
常见行为及设计点：
数据筛选浏览：通过自己对数据的一定了解，结合各种筛选条件，配合得到用户想要的筛选结果。
数据多选：用户可以通过多选，为他寻找的数据进行标记，方便之后的操作。
数据新增本质上是将复杂的数据结构，通过系统字段类型的相应规则，录入保存到系统中。这也就我们常说的增删改查的“增”
比如：销售人员在对新增的客户进行登记时，需要登记公司名称，联系人，联系方式，跟进记录等等。且需要不断更新跟进记录，因此销售人员在表格上的新增是一个非常高频操作～
数据操作分为对单个数据的操作、单行数据的操作、多行数据的操作三种情况
单个数据的操作，就是我们常见的快捷编辑，可以点击快捷编辑按钮，对单个数据进行录入，
为何需要快捷编辑，在销售使用场景中，使用表格去编辑一条信息是一个循序渐进的过程，比如在对客户进行沟通时，数据的不断更改，跟进内容也在不停修改，导致用户需要每次进入用户详情点击编辑之后才能进行操作，而在表格内进行快捷编辑直接满足实时编辑的需求，在交互层面上这是一个非常OK的需求
但落到开发层面上，就意味着要在用户进入表格中去判断权限，才能让用户知道是否能够点，点击过后需要判断字段属性，明确该字段是与哪些字段进行联动
单条数据主要通常会采取两种路径进行操作：进入用户详情页界面，对一整列数据进行编辑，这种情况通常都需要多个数据进行处理，因此进入编辑页面更容易寻找，同时也是最为正常的一种做法
多行数据操作主要采取多选过后的操作方式：当用户想要对多条数据进行操作时，就需要对多个数据进行checkbox 的勾选，从而满足多行操作的需求
数据统计主要针对用户需要审查分析。目的是在通过大量的数据分析去得出自己的某一些结论，由于关注的数据会有主次之分，数据与数据之间也会有内在联系，用户会更加跳跃地扫视页面，而且会更加反复地审查数据。例如，销售人员需要查阅本月的销售情况，进入到商品销售明细表中，分析本月的经营状况，若其中某些商品
了解了表格的使用场景过后，针对不同的场景，在设计上它的思路就会有所不同
使用上就会有不同的设计思路。由于篇幅原因，我们主要了解了表格的基本形态，如果对于表格的场景还不太清楚，我会在下篇中与大家通过20个问题，了解B端表格中究竟应该如何设计～
文章来源：站酷 作者：CE青年
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
扁平化网页设计的表现大多体现在配色、字体以及布局排版方面，这三样结合得当都能制作出漂亮的网站。在国内很多企业网站的布局架构几乎是一样的，最多就是LOGO和一点颜色变化，看不出什么特色和创新。
作为设计师，应该多花点心思在创新上，比如网页上的布局，其实它是可以变化多样的，正如今天为大家分享yi xie布局排版好看的网页设计作品，大家可以参考这些布局的设计，从中获得一些灵感。
附加精美流程图设计与赏析。
（以上图片均来源于网络）
（精美流程图设计）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
ui界面设计之网站设计案例欣赏(一)
牛津词典上有对Navigation一词在互联网领域的解释：
the way that you move around a website or the Internet when you are looking for information
翻译为：你在浏览网页时四处移动寻找信息的方式
也就是说用户看到的，影响其寻找信息的因素都可视为导航。
交互上：
用户在使用传统方式阅读时，所处的空间是单向的，只能向前或向后翻页；
而在网页领域，所有的内容都存放在各自的URL里，信息在多维度多空间里相互交错，各有联系，可跳跃的阅读方式让用户很容易失去位置感。
试想一下我们在大型商场里晕头转向的场景，会常常抱怨其导视系统的糟糕，网站有过之而无不及。
业务上：
从潜在用户想要了解某个产品时，导航就开始起作用了
影响点击量：网站排名高低，搜索带来的点击量
影响转化：网站的易用性，访问者转化为潜在客户和客户的概率
设计者创造易用的表单，展示有用的信息，建立流畅的交互，这些都要靠导航来引导用户达到。
内容涉及到的东西很多，内容之间的相互关系也不确定，因此不同内容导航需要不同的导航模式
1）种类
不同行业，不同业务重点对内容的分类方式不同
种类可以是符合大众认知，具有并列关系的信息，
也可以是按照设计者的意图创造出的种类，并区分其优先级
种类导航的出现无形中建立了用户心中对某类产品的预期信息架构，使其在浏览信息时更有方向性，例如在浏览一家服装店铺时，用户在进入导航列表前就对种类有了预期，诸如男士上装，男士下装，女士上装、女士下装、配饰，包袋等。
2）字母
以字母顺序排列信息。适用于信息量超大，且不存在主次、重要级关系的内容。常见于联系人列表，地区导航，介绍人名，合作伙伴等场景。
3）自然属性
以时间，地理位置等属性组织信息架构。
时间：展示在一段时间内发生的事情，以时间为导航可以直观地感受到信息的变迁，立体感更强。例如一个企业的发展历史
地理位置：展示在不同地理位置的事件信息，空间感更强
也叫做结构导航，根据信息的上下级关系、主体信息架构等因素将信息有序排列。分为全局导航和局部导航。
全局导航往往指页眉和页脚，存在于网站的大部分页面，便于用户随时跳转。
页眉：用户进入网站关注到的点，将网站进行功能分类后，将导航文字放置在页眉上
页脚：此空间是为隐私和法律链接保留的，还会加上联系方式，也有许多内容繁重的网站会把站点地图放置在页脚。
雅各布·尼尔森把全局导航在网站中的作用形象地比喻为机舱座位下的救生衣 ，你只要知道它哪 ，而不必时时关注它，需要时立即找到穿上即可。
局部导航是是更深层级的导航，不作用于全局，存在于特定的功能区，可分布在页面各部分。
业务上必要的一些功能入口，通常贯穿全局，例如很多网站的个人信息，用户需要在大部分时刻都可直接接触到该功能。根据用户的心理模型，这类功能会存在于页面的右上角。
用户使用较多，也是最重要的导航方式之一。当带有明确的目的性或无法通过内容，层级导航找到想要的信息时，用户会在搜索框内尝试输入一些信息。
而让用户主动搜索会出现下面的情况：用户无法清晰表达或错误地表达其想要搜索的内容，导致系统无法匹配上对应的信息，
为了让搜索导航更有效地发挥其作用，出现了自动填充，模糊搜索，推荐搜索，搜索历史，搜索纠正等一系列导航功能，这些功能都是为了想办法将用户引导到他可能需要的页面上。
以类似地图的样式来展示网站页面之间的层级关系，并提供相应的链接。可视性强，便于用户找到想要的信息。
考虑到排版布局，样式美观，除了用文字本身的含义用作导航外，图标也经常被用作导航，分为纯图标导航和文字+图标导航，这里图标的风格会很大程度上影响这个页面的视觉效果
将导航文字横向有序地排列，独立性强，占用空间较少，可放置的导航条目有限，但这个局限性也可以成为优点，它要求设计师创造出简短，易于理解，且满足业务需求的标题。
当内容过多时会选择在单个导航下放置下拉显示二级导航，下拉显示的二级导航可以很长或采用滚动显示的方式，这种临时的模态导航可以最大限度地利用到屏幕空间。
很多网页的横向页眉导航会保持滑动时固定的样式，便于用户时时找到主页面的入口。
占用空间较多，通常放置在页面左边位置，用不同的底色或分割线将其与主内容分开，内容文字一般采用左对齐，便于阅读，导航层级过多时会采用点击展开的样式，上下滚动的常用交互也让竖向导航容纳的内容更多。
部分竖向导航是可隐藏或收缩的
在拥有复杂信息的网页中，会将横向导航，竖向导航等其他样式混合使用，
面包屑导航是位于页面顶部或底部的一行内部链接，在不同层级的链接之间用“>”分隔，可让访问者快速返回上一版块或根网页。许多面包屑导航都将内容最宽泛的页面（通常为根网页）设置为最左边的首个链接，并在右侧列出更具体的部分。
占用很少的空间并提供主导航实现不了的深层次定位功能。
面包屑的使用让网站的结构更加清晰，强化用户的心理层级模型，并实现跨层级跳跃
分页显示的内容数量固定，有时用户可自定义内容数量，此外页面上通常有当前页，任意页，上一页，下一页，首页，末页的链接。具有定位性，当用户需要回到之前浏览过的某个位置时，可采用分页的形式
无限滚动希望用户只注意当前页的内容且不能快速到达页面的底部，适用于无法预测用户何时能够找到需要的信息的情况。在一些图片展示，内容推送的网站上设计者不知道用户想要的内容，同时也要展现网站内容丰富，资源库深不见底的特质会采用交互上更简单的无限滚动模式。
一些设计者想要用户优先注意到的内容，会采用突出的版面设计，通过改变文字图形的大小，颜色等与其他一般性内容形成对比或使用海报，弹窗等形式试图引导用户行为。
根据上面第三和第四点，分别从信息层和表现层给出导航设计的建议
1.信息结构尽可能扁平
多花一些时间去考虑信息体系结构，可根据首页规划全局的导航，首页是用户在网站中导航的起点，考虑如何让用户尽可能方便地从网站上的宽泛内容（首页）转到他们所需的更加具体的内容。
2.重视导航的顺序
当同一级别的导航数量很多时，顺序变的更加重要。根据用户的认知习惯，开头和结尾作为关注度（看到的）和保留度最高（刚刚发生的）的地方，其内容更加突出。
3.SEO优化
良好的网站导航结构可以帮助搜索引擎了解哪些是网站站长认为重要的内容，尽量用一些具体的描述词语而非大而宽泛的词汇，例如“产品”，“服务”。虽然搜索引擎的搜索结果是在页面级别提供的，但它也希望了解页面在网站这个更大层面上的角色。导航中关键词的使用会影响其在搜索引擎中被搜到的质量。
4.创建网站地图
用于显示网站结构的一个简单页面，通常包含网站页面的分层列表。如果在网站上查找页面时遇到问题，用户可能会访问此页面。此外搜索引擎也会访问此页面，以便使抓取范围尽量覆盖网站的全部页面。
1.一致性
同一类型导航的视觉表现与交互操作在整个网站页面中要保持一致，清晰一致的导航可以让用户预见每一步操作的结果。
2.清晰性
颜色与大小：文字颜色与背景颜色的对比，标题与内容的字号大小，这些最基本的元素直接影响导航的清晰度
留白与装饰：与平面设计中原理一样，留白让网站页面布局平衡，张弛有度；装饰与留白相结合，让导航表现得更精美，也有助于视觉分割
强调与弱化：有些导航起引导作用需要突出，有些起辅助作用需要弱化，强弱对比结合丰富了视觉层次，并让导航起到它该起的作用
3.凸显超链接
将可点击的超链接文本与常规文字在样式和交互上进行区分，常见做法有下划线，文字颜色，加粗，鼠标悬浮变色。
4.在常规位置放置导航
网页发展的几十年让用户对网页产生了一些常识性认识，例如用户会在进入一个网站时去页眉或侧边栏寻找主导航，尽量遵循这些常规用法。
5.导航数量不宜过多
无论是全局或局部导航，数目越多用户处理和记住信息的难度越大，可以通过分组分层来提高信息浏览效率
6.侧边栏
侧边栏导航会占据一部分的屏幕空间，将其与主内容部分进行分割有助于用户，例如用反差较大的背景色形成导航区与内容区
加入导航收缩功能，以便更好地利用屏幕空间，特别是在一些小尺寸屏幕上。
在做完网页设计后可以根据浏览网页的一般习惯，通过以下几个方面对导航设计进行简单审查
问自己以及团队其他成员以下几个问题
1.这是什么网站
2.网站有哪些主要内容
3.导航看上去是否像是导航，可点击的
4.导航的名称是否会引起歧义
5.现在处在网站的哪个层级
6.如何进退
7.具体的功能是否会在预想的地方出现
8.怎么进行内容搜索
借助工具
9.使用Google Analytics对网站的访问情况进行回顾并进行一些评估
例如一些页面的浏览量极低于预期或相较于同类页面浏览差距过大，就要考虑是否是指向该页面的导航出现了问题。
导航的最终目的是简化获取信息的过程，具体以何种方式表达还需要取决于业务内容，但总体上要以用户易接受的方式呈现。用户若是能在获取信息的过程中按照设计者所想的方式前进并感受到畅通无阻的快感，导航便是成功的。