表格页面是B端项目中最主要的页面类型，以项目适用角度来说，利用不异样式的表格开辟起来本钱很低，效力很高。可是，站在设计师的立场，表格足不了作品集包装的规格，或抉剔的甲方和带领的评审。下面这篇文章作者就为我们讲授了若何进行表格优化。赶快看看吧。

即便我们利用准确的尺度和方式完成了表格的设计，照旧会发生一个问题，就是全部项目标所有表格页面仿佛都长得一样！特别在表格占有项目 80% 以上比例的时辰，全部项目看起来仿佛只有 “一种” 页面，不雅感特殊欠好。

假如以项目适用角度来说，利用不异样式的表格开辟起来本钱很低，效力很高的，只要对应的场景下用户利用起来不感觉有问题，那满是表格就没有甚么不公道的处所。

可是，站在设计师的立场，所有页面都是复制粘贴的情势即便能知足项目落地需求，也知足不了作品集包装的规格，或抉剔的甲方和带领的评审（没有设计感）。

所以，作为设计师必需要具有更多样的表格页面设计思绪，以应对评审和终究作品集输出的场景。所以这篇要站在政治不准确的角度动身，不再思虑体验和价值，完全就是环绕设计师“保命”体例睁开。

此次的分享，就环绕怎样优化表格页的设计睁开，下面是一个根本的表格案例，我们会用它来完成一系列的调剂演示。

表格页面自己可以优化的内容是很多的，在我们切换表格页面都是类型之前，起首要在固有根本上做尽力。可以调剂的内容包括3种：

这个功能说起，有时辰一些死板、简单的页面是很难做出设计感的，设计元素过少就很难有发挥的余地，所以需要报酬去增添一点细节。

固然模块、字段凡是是需要按照营业需求建造的，但不代表设计师不克不及按照本身的设法去提出一些新的需求建议，特别是在优化本身的作品集时。

例如增添和功能联系关系性不年夜的数字统计模块，和地图相干的场景中增添地图模块，针对层级挑选的侧边树状选择栏，或和本页面相干的其它模块。

让挑选和页面样式连系的更公道一点。最根本也最简单的挑选就是自力一个模块来放置挑选选项和矩形框，我们可以打破这类情势，一方面优化选项数目，另外一方面可以将它们和表格组件进行归并。

也是页面最要害的身分。假如真的有存眷过表格的样式，就应当知道表格的每一个细节都可以成为设计点。包罗表头、朋分线、斑马纹、堆叠、字段对照、字段样式、操作列、交互反馈等等。

即便是一个自己很死板的表格，我们也按照想要实现的结果，恰当的增减对应的字段信息，来到达指定的结果。

以评审和作品集的角度来看，表格页面需要尽可能能输出一些有 “设计感” 的样式出来，否则免不了被指出或低看。所以把握越多的设计思绪，就可以带给我们越多的收益。

除表格自己的样式拓展和优化，还必需存眷一个问题，就是表格页面其实不是必然要做表格！我们不是只能用表格的情势来显现数据信息的，还有此外选项可以用。第一个选项，就是转换成列表的情势。

这是良多人城市弄混的两种情势，表格是指利用横纵坐标来划分单位格排布内容的情势，而列表则是依序摆列同级信息的体例，没有固定的样式。

B真个表格素质上也是列表的一种，只是列表其实不是只能当表格，还可以当卡片，当图标，当画板，当图册来展现。这长短常要害的认知，决议了我们怎样在表格的根本上转换出其它的样式。

起首我们就说根本列表模式，和表格比力起来最年夜的区分，就是一个数据编组下的字段不消放进单位格内，没法直接用表头对数据进行辨识和排序。

而长处是字段信息不消再利用这么固化的模式，可以更自由的进行组合和排版，在一些不需要年夜量进行表头排序节制的页面中，常常利用体验更佳。

所以，当数据的条目数不长短常重大，且字段信息过量难以辨识的环境，便可以测验考试利用根本列表的模式来完成页面类型的切换。

至于根本列表还能拓展出甚么花腔，建议大师多在线上的网站中参考，而不要把眼光局限在 B 端产物中。

列表的第二种情势，就是卡片样式类型了，经由过程卡片化的设计，来实现横 / 纵向摆列而不是只有纵向的摆列模式。

卡片的设计具有更强的自力性，来凸起每一个对象的特点和信息。同时也由于不受表格自己的限制，卡片的设计也就具有更矫捷的阐扬空间。

而在设计卡片的进程中，必然要凸出题目，同时要在卡片中利用比力丰硕的字段样式，而不是仅仅把一堆文字换种排版堆到一个卡片里面。

好比下面是我们按照案例完成的调剂：

除根基的卡片样式外，还有一种以展现图片为主的卡片类型 —— 画板模式。这在以图片为主导的数据对象中很是常见，好比少许的新闻、商品、人员、门店对象的治理中，常常图形的辨认效力是远高于通俗表格的。

而当我们利用画板模式的时辰，就要确保数据华夏本就包括易于辨认的图片内容，假如没有是没法子强行利用这类模式的，好比上方的案例中，强行利用图片结果是不太抱负的，由于数据对象没有能易于辨认的图片对象。

同时，站在作品集角度，假如封面图片自己质量太差（乃至同类找不出好的），那末利用这类模式的设计结果就不会特殊抱负，必然要留意。

最后一种，就是图标模式的利用了，这在电脑资本治理器中最多见的显示模式。它和画板模式近似，但区分是每一个数据对象的辨识从独有的图片切换成了更有指向性和寄意的图标。

这类模式合用于资本文件的治理，或模块、功能、组件、项目等数据内容的枚举。

同理，图标模式的利用得合适图标辨认的特征，假如数据对象自己没有易于辨认或有现实意义的图标，那末强行利用这类模式的结果也就不会太好。

包罗此次我们利用的案例，利用代码类型、风险品级、风险环境肆意一个字段作为展现的图标，都没有太年夜的意义。所以能理解这个意思便可以，我就不在这里展现出来了。

总结起来，以上的“表格”页面设计思绪，素质就是拿到需求今后，思虑该页面合适利用哪一种情势展现，是只合适表格仍是合适列表。

假如只能用表格，那末在表格的根本上可以按页面现实环境做优化。假如合适做列表，那末利用根本的，仍是卡片、画板、图标模式。

这类设计的思绪和能力是B端设计师必备的能力，固然不是每一个项目都必然得这么输出，但它能帮忙我们打开思绪，应对更复杂多样的设计要求。