实践经验！如何在网页后台设计表单和表格？

Vector Life(作者):一个完整的背景，由菜单/导航、数据/图形显示、表格、表单、控件/组件、弹出窗口等组成。下面给大家分享一下后台表格和表单的设计细节。当接到一个全新的网页背景项目时，先确定设计风格，再考虑背景大小是居中固定还是全屏响应式。全屏响应式网页设计，除非有规定，否则可以选择任意主流尺寸作为基础尺寸来设计网页。当然，无论你选择什么样的尺寸，你都得基于良好的背景来工作。

如何定义一个背景是好的？如果领导说好，用户说好，你自己觉得好，那就应该是好的。大多数情况下，产品的每个功能模块都已经定制好了，只需要在UI上美化一下原型就可以了。如果你这样做了，那么你做出来的东西肯定会让人觉得有问题，但是又不知道问题出在哪里，总想让你改。

和产品经理沟通好。他们只是设计功能模块，而不设计这些模块如何呈现、操作、组合、分类等等。后台设计交互很重要，关键词排名快。如果有专业的交互设计师，这些都可以交给他们。毕竟交互设计的收入比UI高。然而，在许多中小型企业中，直接设计产品原型是常见的。在缺乏专业交互设计的时候，不要让产品觉得我们只是在按照他们的原型美化。那和艺术设计有什么区别？并不是我们看不起艺术设计。艺术设计一直是艺术设计工程师，而且是很高的职称，但是人家还是不愿意这么叫。可能他们觉得太大的压力会来自于标题封面。其实UI要有基本的交互技能。

款式的选择很客观，需要产品经理/领导确认。如果他们相信你的实力，你得给出一个充分的理由，说明你为什么选择这种风格，而不是仅仅看起来高一点，或者仅仅是个人喜欢。

我对后台网页设计风格的理解大致可以分为三类:纯白背景风、浅色背景风、深色背景风。在开始后台设计之前，最好选择其中一种风格，因为后面所有组件的设计都必须基于这种风格。嗯，刚刚有一个三种风格的界面设计的后台作品已经在早前发布了。你可以看到每个模块的搭配和区别:

纯白背景风:线框/浅灰(灰色)背景(文字一般用黑色)。

浅色背景风:纯白色块状背景(文字一般为黑色)

深色背景风:透明的纯色背景(通常为白色文本)

设计过程非常主观。所有的设计参数都取决于设计师，但我们应该严格遵循设计规范，使所有的设计看起来和使用起来都合适。

全屏响应+轻背景风是目前非常主流的设计，也是非常保守安全的设计。光HSB色值请参考:H:0-360；s:0-5；B:90-97，当然绝大多数情况下用的是轻灰，比如H0；s0；B93-95 .

下面将是一个基于这种设计风格的例子。

一个完整的背景包括菜单/导航、数据/图形显示、表格、表单、控件/组件、弹出窗口等。我称这些元素为。这里主要分享一下后台的模块和组件的设计细节。下面，我想和大家分享一下表单和表单的设计。

你应该知道

为了避免在设计后台一个人在YY，保持与产品的左沟通和与前端的右沟通是非常重要的。可能很多朋友在接到项目的时候不知道从哪里入手，会在网上找一些相关的资料，然后会看到很多眼花缭乱的样式，比如各种数据/图形展示，各种统计图，宁国网站搜索优化的各种展示效果。我真想把它们拖到我想设计的背景上去。

当然，如果合适的话。但是，很多情况下，图表设计有很多现成的模板，比如统计分析。可以做的炫，但是前端不一定是按照UI效果图做的。技术上，没有前端达不到的效果。你真的不用怀疑前端的实力。所以设计和前端保持良好的沟通可以提高工作的质量和效率。而且，往往前端能看懂口头/文字描述是怎么表现的，是淡入淡出，还是弹出等等。通常情况下，动画只是产品的展示，而不是产品本身。自己练动画就好了。

简洁灵活的形式

典型的表格包含标题(标题单元格th)和内容(标准单元格td)，它们通常以行(tr)显示。设计时要将标题与内容区分开来，如标题文字加粗/颜色较深/字体较大或标题背景较暗。因为选择了浅灰色背景风，所以一般用白块原理来区分，桌子设计也尽量不用线框。但如果各行的标准单元格都是白色的，就不方便预览了，可以隔一行设置比主背景浅的背景。而且标题和内容一般有两种对齐方式，居中对齐和左对齐，全站列表只选择一种对齐方式保持一致。为了更简洁的展示，我们也可以去掉每一列的间隔线，但不代表间隔不存在。不要粘贴每一列的文本，标记前端间距(填充)值，告诉前端鼠标点击表头单元格的空白处仍然拖动列宽。拖动宽度时，保持每列的最小宽度，标题仍然完整显示。