表格|亲身经历｜B端网格系统的升级经验( 三 )

文章插图
除了全是正文的情况，列表还有另外两种情况，分别是带文案标题和不带文案标题的那种，我也分别做了尝试，这里就不说过程了，直接上结果。
1）带文案标题的列表
我输入框的高度是26px，竖着排版，分别尝试了2px、4px、8px和16px四种情况，最后发现如果是带标题的还是8px的最为舒服。

文章插图
2）不带文案标题的列表
输入框的高度还是26px，因为像这种列表的内容比较多就没有尝试2px的间距，分别尝试了4px、8px、16px这三个数值，最终选择定为8px和16px两种间距，对应不同的场景使用，效果最好。

文章插图
3. 表格里的间距表格也是B端里面常见的一个组件，与列表相比，表单承载的信息密度更高。而且表格里面又分为单列表、双列表、组合列表，有图标的列表、有按钮的列表等等。
这里我还是直接上结果，还是以正文13字号为例，以4px和8px两个间距为例子，最终还是觉8px的间距高度最为合适。

文章插图
四、总结我们回顾一下，本篇文章讲述的重点：
第一，通过与C端产品进行对比，了解B端产品有什么特点。
第二，了解网格、组件和容器三个概念的基本含义和三者之间的关系。
第三，我分享了组件、列表和表格三个元素之间的间距，如果你也刚做B端的系统，不妨试一试我提供的间距数值应用到你的产品中，看看效果图如何。
小插曲我在参加人人都是产品经理2021年度作者评选，希望喜欢我的文章的朋友都能来支持我一下~
点击下方链接进入我的个人参选页面，点击红心即可为我投票。
每人最多可投3票，投票即有机会获得百万惊喜礼品起点课堂千元豪礼哦！
投票传送门：http://996.pm/Y2y8E
#专栏作家#斜杠7湿兄，公众号：斜杠7湿兄，人人都是产品经理专栏作家。星光不问赶路人，时光不负有心人，励志做一个知识的分享者。
本文原创发布于人人都是产品经理，未经许可，禁止转载
【表格|亲身经历｜B端网格系统的升级经验】题图来自Unsplash，基于CC0协议