表单制作：网页设计中的细节与规范

上传者：申桂英
|
上传时间：2016-08-23
|
密次下载

表单制作：网页设计中的细节与规范

就我自己看到的而言，很多网站的表单页面都存在样式混乱的问题，也许是不关注，还未意识到。下面就我们网页设计培训老师的理解，对表单设计的经验做些分享，欢迎交流与批评！

首先什么样的表单才能算的上是好的表单？这个得搞清楚！

（先撇开交互和产品，若加上这两点，那有的说了）

1. 能够清晰传递表单信息并使用户快速轻松完成

2. 对于整站而言，能够样式统一减少用户学习成本

3. 方便调整，与维护，具有较高的可持续性

表单是由各独控件按照需求逻辑组合而成，将每种独立控件严格定义样式，再通过统一的定位规则将其组合。

保证样式极高统一，便于开发维护和延展，提高用户可操作性，希望通过调整可提高表单的完成率，也就是最终目的。

样式中为了更加清楚的描述，下面会将表格的组成部分按照从属逻辑关系分为 F1、F2、F3。

F1 为整个表单部分；

F2 为整个表单中的一级分类；

F3 为表单中的独立模块（输入框，按钮、文字等）。

后面也可以以此方法与前端配合制作前端表单制作规范。

以下图表单为例：

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;

表单的制作规范为视觉规范的其中一部分，它需要和视觉规范的其他版块配合使用，不可独立。

此方法在项目工作中能迅速的完成表单制作，作为一个标准去检测开发的实现效果，同时可以使小组内多名成员迅速达到一定的共识，这些都尤为重要。

下载文档

网友关注

2019甘肃公务员考试申论每周一练：农民丰收节

2009年山西省党群系统公务员考试行测真题解读

2007年山西省公务员考试《申论》真题参考答案

2007年山西省公务员考试《申论》真题

2011年4月24日山西公务员考试行测真题

2011年山西省公务员考试面试真题

2019甘肃公务员考试行测题库：行测每日一练资料分析练习题答案

2010年山西省公务员考试申论真题参考答案

2006年山西省公务员考试《申论》部分真题含答案

2019甘肃公务员考试行测题库：行测每日一练言语理解练习题

2009年山西省公务员考试面试真题

2019甘肃公务员考试申论每周一练：青少年价值观

2011年4月24日山西公务员考试行测真题参考答案

2010年山西省公务员考试行测真题参考答案

2019甘肃公务员面试题库：面试每日一练结构化面试模拟题

2009年山西省公务员考试《行测》真题

2019甘肃公务员考试行测题库：行测每日一练判断推理练习题答案

9·18公务员考试联考行政能力测验解读

2008年山西省公务员考试面试真题

2009年山西省党群系统考试《申论》真题参考答案

2019甘肃公务员考试行测题库：行测资料分析模拟题

2006年山西省公务员录用考试面试真题含参考答案

2019甘肃公务员面试题库：面试每日一练结构化面试模拟题答案

2019甘肃公务员考试行测题库：行测每日一练资料分析练习题

2007年山西公务员录用考试《行测》真题

2010年山西省公务员考试面试真题

网友关注视频

外研版英语七年级下册module3 unit2第二课时

【获奖】科粤版初三九年级化学下册第七章7.3浓稀的表示

七年级英语下册上海牛津版 Unit3

【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案，安徽省

外研版英语三起6年级下册（14版）Module3 Unit1

沪教版八年级下册数学练习册21.4（1）无理方程P18

外研版八年级英语下学期 Module3

七年级英语下册上海牛津版 Unit5

《小学数学二年级下册》第二单元测试题讲解

化学九年级下册全册同步人教版第18集常见的酸和碱（二）

外研版英语七年级下册module3 unit2第一课时

沪教版牛津小学英语（深圳用）四年级下册 Unit 2

【部编】人教版语文七年级下册《过松源晨炊漆公店（其五）》优质课教学视频+PPT课件+教案，辽宁省

沪教版牛津小学英语（深圳用）四年级下册 Unit 12

外研版英语三起5年级下册（14版）Module3 Unit2

第12章圆锥曲线_12.7 抛物线的标准方程_第一课时(特等奖)(沪教版高二下册)_T274713

【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案，安徽省

冀教版小学数学二年级下册第二单元《租船问题》

北师大版数学四年级下册第三单元第二节小数点搬家

【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案，天津市

冀教版英语五年级下册第二课课程解读

30.3 由不共线三点的坐标确定二次函数_第一课时(市一等奖)(冀教版九年级下册)_T144342

沪教版八年级下册数学练习册21.3（2）分式方程P15

二次函数求实际问题中的最值_第一课时(特等奖)(冀教版九年级下册)_T144339

第19课我喜欢的鸟_第一课时(二等奖)(人美杨永善版二年级下册)_T644386

第8课对称剪纸_第一课时(二等奖)(沪书画版二年级上册)_T3784187

河南省名校课堂七年级下册英语第一课（2020年2月10日）

冀教版英语四年级下册第二课

外研版英语三起6年级下册（14版）Module3 Unit2

精品推荐

营造良好的企业文化

分类导航

生物学

申桂英

此文档贡献者

2016-08-23
贡献时间
密
下载次数

教育资源为主的文档平台

文档分类