主要观点总结
本文分享了关于B端表格设计的最终集案例,总结了表格设计的关键细节,包括表格外框样式、选项卡设计、筛选表单、表头设计、表格主体列表设计、多选和操作以及页码控件等。文章强调了不同元素设计的多样性和样式的组合,旨在帮助读者更好地理解和应用这些关键设计要素。
关键观点总结
关键观点1: 表格外框样式决定表格的突出方式,分为有边框和无边框两种。
有边框通过描边或卡片形式突出表格主体区域;无边框则依靠元素组合形成视觉区块。选择需根据表格所处的环境和层级来判断。
关键观点2: 选项卡设计用于切换表格的不同数据类型,其样式应保证不同级之间的差异性。
一级选项卡通常采用页签样式,而多级选项卡则需要使用不同样式来区分包含关系。
关键观点3: 筛选表单与表格结合时,对齐、操作类型和矩形边框规格是关键。
对齐方式根据其他元素的位置确定,操作类型包括输入、下拉菜单和开关等,而矩形边框应使用较小的规格以节省空间。
关键观点4: 表头设计关注高度、背景色、属性列的宽和单元格内布局逻辑。
表头高度通常在28-36之间,背景色根据设计风格和场景决定。单元格内的布局通常为自动布局,包括文本、排序或筛选图标的布局。
关键观点5: 表格主体列表设计的关注点包括列表形式、行高和单元格内排版。
列表形式有基础网格型、分割线型、斑马纹型和卡片型等。行高由内容决定,包括上下间距和内容高度。单元格内排版注重信息识别效率,避免样式内容辨识度差。
关键观点6: 多选和操作设计关注数据的选择和批量操作,独立放置操作选项,避免和其他操作混合。
多选通常在左侧,操作按钮化时需注意权重分配,避免影响用户体验。
关键观点7: 页码控件设计应注意操作体验,频繁换页时可使用带框按钮的设计。
有框设计中,按钮的高应与上方筛选输入框尺寸一致。
文章预览
表格之前做过不少详尽的分享,没有看过的同学可以回去仔细查阅: 年前最后一篇长干货,B端表格规范最终集奉上 案例解析 | 10个表格加分项设计(加了亿点点细节 但之前的分享主要是关于功能、规范、响应这些知识,所以本次分享的目标,就是补全表格具体的设计方法,让你们可以更快、更多样化地设计 B 端表格。 表格的元素设计要点 表格虽然长得都挺像,但并不是完全一样的, 不同的需求会设计出功能、交互不一的细节 ,下面我们就直接开始解释对于表格最重要的几个细节的样式设计思路。 1.表格外框样式 表格作为组件就有边缘的表现形式,一种是有边框,另一种是无边框。 有边框就是把表格主体区域被框起来进行突出,可以使用有色的描边,也可以是和背景色不同的卡片。 无边框则是表格没有明显的外边框进行突出,仅靠元素的组合
………………………………