网页表单细节与
规范
编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载
就我自己看到的而言，很多网站的表单页面都存在样式混乱的问题，也许是不关注，还未意识到。下面就我们网页
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
培训
焊锡培训资料ppt免费下载焊接培训教程 ppt 下载特设培训下载班长管理培训下载培训时间表下载
老师的理解，对表单设计的经验做些分享，欢迎交流与批评！
首先什么样的表单才能算的上是好的表单？这个得搞清楚！
（先撇开交互和产品，若加上这两点，那有的说了）
1. 能够清晰传递表单信息并使用户快速轻松完成
2. 对于整站而言，能够样式统一减少用户学习成本
3. 方便调整，与维护，具有较高的可持续性
表单是由各独控件按照需求逻辑组合而成，将每种独立控件严格定义样式，再通过统一的定位规则将其组合。
保证样式极高统一，便于开发维护和延展，提高用户可操作性，希望通过调整可提高表单的完成率，也就是最终目的。
样式中为了更加清楚的描述，下面会将表格的组成部分按照从属逻辑关系分为 F1、F2、F3。
F1 为整个表单部分；
F2 为整个表单中的一级分类；
F3 为表单中的独立模块（输入框，按钮、文字等）。
后面也可以以此
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
与前端配合制作前端表单制作规范。
以下图表单为例：
F1 样式
1. 表单位置宽度得按照栅格严格执行，（30+10）*N （栅格规范事先确定，整站统一）
2. 表单页面根据表单宽度定表单位置
1000宽度，表格部分为25格，表单左侧留5格（包含左侧标签部分），右侧留3格 中间自适应 (如下图)
800宽度，表格部分为20格，表单左侧留4格（包含左侧标签部分），右侧留两格 ，中间自适应
F2 样式
1. 表单中的文字规范，字号 12px ，行高18px ，段高24px，（颜色等规范与整站的文字规范保持一致）；
2. 单行高度为40px ，上下板块间距10px（视实际逻辑定）；
3. 对齐方式为中对齐，间距10px；
4. 表单高度26px，长度按照实际需要，并按照栅格对齐，保证相同表单在不同页面保持一致；
5. 输入框中提示文字 12px 宋体/Arial, #888；
6. 图标需使用图标库中字体图标，若需要特殊图标，需要独立制作加入字体图标中（制作完成需内部讨论决定）；
F3 样式
1. 输入框，单行高度为40px ，为输入框框高26px加上下间距7px，26+7+7=40;
2. 单行文字，单行高度为40px，为文字行高18px加上上下间距11px，18+11+11=40;
多行文字（两行） ，高度为58px，为两行字高加上上下间距11px，18*2+11+11=58;
多段文字(两段，每段两行)，高度为四行字高18*4加上段高6px加上上下间距各11px，18*4+11+11+6=100;
以此类推
3. 按钮，单行高度为40px，为按钮高度26px加上上下间距7px,26+7+7=40;
表单的制作规范为视觉规范的其中一部分，它需要和视觉规范的其他版块配合使用，不可独立。
此方法在项目工作中能迅速的完成表单制作，作为一个标准去检测开发的实现效果，同时可以使小组内多名成员迅速达到一定的共识，这些都尤为重要。
我一直坚持简化设计，减少的是视觉污染和垃圾，减少开发成本和维护成本，减少用户学习成本，提升效率与体验。
做科学设计，一同探索！
【一网学，我的未来我设计】
本文资源来自一网学 UI设计培训：
浙公网安备 33021202002483