网站后台制作表格 第1篇
有些表单是有逻辑/顺序的，比如地区的选择、出生年月与生肖/星座的对应等等。例如，在选择省份之前，市区是不可操作的，在UI上做灰度显示不可操作。除了灰度代表不可操作，透明度也可以起到同样作用，这种方式也可以运用在按钮上。
带有识别功能的输入框：
当输入有误时，尽量避免弹出框提示，可以直接对输入框设计不同的状态显示默认状态、选中状态、错误状态、成功状态。
通过以上方式设计的一组信息录入型的表单设计，如图：
表单的设计可以单独出一篇更详细的文章，还有筛选/选择器一类的表单，这里就不一一描述了。
网站后台制作表格 第2篇
结语
确定规范的意义，在于能够减少协作中的沟通成本。当产品、UI、前端都对同一套规范达成共识时，开发效率会成倍的提高。产品在原型图中无需添加常规的交互操作，也不用考虑前端的可实现性。UI和开发在看到你的原型图时，能迅速地根据之前的规范，明白你想表达的意思。这样，产品的精力就能更多地放在需求上。
在学习的过程中，大量参考了蚂蚁设计。推荐大家可以去了解一下。
本文有大量内容是从交互设计角度说明的。由于我之前是一直专注于需求，对于交互上的知识不是很充分，结果导致开发出来的产品的交互体验太差。所以自己去主动学习了相关的内容。对于中后台产品经理，尤其是团队内的开发资源不是很足够的情况下，引入一套规范来实现自家产品的标准化，是很有作用的。如果你的团队已经有成型的规范，请对本文中的内容适当采用。产品经理的主要精力还是应该放在需求上。
题图来自 Unsplash，基于 CC0 协议返回搜狐，查看更多
网站后台制作表格 第3篇
比较常规的组件用法，重点在于各字段的展示方式要进行区分，并且根据各状态的不同，其中的字段会有一些相应的变化。比如：
② 阶段任务：该列表比较复杂，且根据不同的用户权限，列表上方的按钮和表右侧操作列也有所区别，此处仅给出表内通用设计进行展示。
阶段和任务分属两个不同的对象，在此列表中。默认仅平铺展示阶段，故表头所列的属性项以阶段为主（此处考虑到部分字段的重要性，将任务“优先级”也展示了出来）；非任务属性项的则以通用的“-”进行标识。共有属性比如：“状态”，则通过不同的标签进行区分。
任务列表与该列表样式基本一致，仅属性项的差异，特殊字段样式也根据其业务特点进行了不同的字段展示方式，此处不过多赘述。
③ 工时上报与审批：与任务列表的属性项没有太多差别，报工列表底部增加了工时的合计（此功能在【Element】示例组件中有展示样式），然后去掉了结构层级，所有的任务进行平铺展示。