B端表格的基础数据展示样式和常见的交互方式
选题来源
选题的来源于一个设计朋友/同行面试时候的问题，我们当时也是去找资料和视频会议践行讨论进行了补充，整理完了之后就重新发了文章。接下里的选题集中在面试难点上，有同行有遇到难回答的专业或者团队协同面试题的话，随时可以联系我。在此谢过。
表格前言
在针对企业中后台产品中，通常要使用大量的表格来展现结构化的数据,也包含了大量查询数据的场景。合理的数据表现方式和常见的交互设计能够让用户带来高效的信息获取效率。针对数据展现表示和交互形式，很多事时候是很难进行设计的，接下来结合自身工作中表格的来进行讨论，希望能帮助到大家理清楚基础数据展示类型和常见交互的选择方式。
基础数据展示样式
基础数展示拆分为表格与表头，有共用的部分也有自己相对特有的部分。
表头
仅图标
仅只有图标的场景常见于表头和表格的左侧，主要的操作是针对的是批量操作，例如删除/导出等等（具体的要根据业务场景判断）。
右侧图标
一般是用于配合下拉进行类型的筛选以及数据进行数据的筛选，一般组合是左边是文案配合，右边是相应的功能。
双图标
双图标是一般用于当文案修改到一定程度上时候也很难表达的时候，用辅助图标进行解释辅助说明，方便理解用户。
纯文案
纯文案是最常见的场景，包含了用户的姓名和所有的字段都可以进行填入。
表格
头像产品加文案
一般使用的场景是用人物或者是在电商或者是商品中，应对左侧表头的用户名称和产品名称，方便给用户进行理解。
显示产品有关的的状态（开关/可视化/标签）
常用场景是显示产品的状态，是否打开或者是在某个流程的状态，通常是已结束/正在开始/未开始。
纯数字
主要是针对于数量选项进行数字化进行展示，展现选项的数量。
多图标
一般适用于末尾多操作场景下要展示多功操作展示。
常见交互形式
筛选
搜索
常见的搜索形式分为4种：单属性搜索，切属性搜索，多属性搜索以及模糊搜索
单属性搜索
常见的场景是快速定位到某个目标数据上，能够让让用户快速的进行决策。
切换型属性
场景：通常是多个属性/类型之间的，对于搜索的精准程度比较高。
多属性组合搜索
使用场景：常用于多个搜索属性，对页面空间要求比较高，但是需要进行性多属性组合搜索就能得到精准的搜索结果。
多属性模糊搜索
使用场景：多个常用的搜索属性，搜索的便捷性高于精准高度时候，使用模糊搜索。
条件筛选
条件筛选也被称为为过滤器，产用于内容提取，帮助用户快速输入。
下拉选择
常见的一种控件，主要是弹出一个下拉菜单给用户进行选择操作，选项遵照7+-2原则。当选项低于5个时候建议方案是平铺
单选框
使用场景：常用于多选项中选中单个选项的场景，每个选项都是互斥的。数量上最低是2个，一般是在4个到5个。一般情况下，默认的选项是选择第一个选项。
复选框
使用场景：常用与一个或者多个选项中进行单选和多选。选项一般是不会太多，一般是遵守7+-2原则，常见的4个到5个选项一般是不宜多的。如果遇到更多选项的话，建议采用下拉交互。
日期选择
使用场景：用户选择一个或者是某个时间段的组件。根据业务属性，颗粒度大的只有年/月，颗粒度小的真是能够到秒。不同的业务，还可以增加不同的功能。
标签切换
使用场景：平级区域或者是功能的内容进行收纳和展现，来保证页面的容纳能力。
数据编辑
根据操作对象不同可以分为2类：批量才做和数据编辑
批量操作
针对多行已经选择的数据的编辑操作，常见的：导出，删除等等
单行数据编辑
单行数据编辑从位置来进行区分：内联操作，单行操作
内联操作
交互可以是原位编辑，也可以是单击之后的弹窗修改
单行操作
常见的场景是表格最右侧的操作栏中常见的删除/编辑等等
唤醒
所谓的唤醒就是表格数据详情展现方式，大致可以分为：弹窗，抽屉，嵌套以及新建页面。
弹窗
模态弹窗可以简单理解带有遮罩的，具有强的打断性，用户在这种场景下无法操作主页面。而非模态弹窗，唤醒时刻用户也可以操作主页面
模态弹窗
常见的使用场景是数据详情字段不多，不用要承受过多的字段，可以快速回到主页面
非模态弹窗
再不离开主路径的场景下，可以打开多个浮层，同时也可以操作主页面。
抽屉
抽屉是一种从页面上下左右都可以弹出来的交互方式，需要一个主页面来来控制一个子页面，常规的话是右边偏多。常见的场景是能够承受更多的内容，能够快速切换主体和比较内容。
嵌套
点击标题数据，表格下拉，直接表现相关数据的详情。一般用于内容比较少，针对数据进行的补充。
新建页面
当表格详情过于复杂的场景下，新建页面可以承载过于复杂的内容和操作。
滑动
表格内的极限列是9列，如果业务场景下必须承担更多的内容化的话可以进行滑动处理
这里会延伸出一个固定的交互。
总结
以上就是针对一个面试中关于基础数据表现方式的回答思路，这些要往往和产品和业务场景相结合，希望能够对大家有帮助。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）