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

上传者：申桂英
|
上传时间：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;

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

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

下载文档

网友关注

浙江公务员行测每日一练言语理解练习题答案01.29

浙江公务员面试每日一练结构化面试模拟题答案1.25

浙江公务员面试每日一练结构化面试模拟题2.2

浙江公务员面试每日一练结构化面试模拟题答案1.30

浙江公务员面试每日一练结构化面试模拟题答案2.7

浙江公务员面试每日一练结构化面试模拟题答案2.5

浙江公务员行测每日一练资料分析练习题02.08

浙江公务员面试每日一练结构化面试模拟题答案2.8

浙江公务员行测每日一练判断推理练习题02.05

浙江公务员行测每日一练言语理解练习题01.25

浙江公务员面试每日一练结构化面试模拟题答案2.1

浙江公务员面试每日一练结构化面试模拟题答案1.31

浙江公务员面试每日一练结构化面试模拟题答案2.6

浙江公务员行测每日一练数量关系练习题01.30

浙江公务员行测每日一练资料分析练习题答案02.08

浙江公务员面试每日一练结构化面试模拟题2.9

浙江公务员行测每日一练数量关系练习题答案01.30

浙江公务员面试每日一练结构化面试模拟题1.29

浙江公务员行测每日一练数量关系练习题答案01.24

浙江公务员面试每日一练结构化面试模拟题1.24

2016浙江公务员考试面试真题

2017浙江公务员考试面试真题（6月4日行政执法类）

浙江公务员行测每日一练判断推理练习题答案01.31

浙江公务员面试每日一练结构化面试模拟题1.25

浙江公务员面试每日一练结构化面试模拟题1.26

浙江公务员行测每日一练数量关系练习题02.02

浙江公务员行测每日一练判断推理练习题答案02.05

浙江公务员面试每日一练结构化面试模拟题答案1.26

浙江公务员面试每日一练结构化面试模拟题2.5

浙江公务员行测每日一练资料分析练习题02.01

网友关注视频

《空中课堂》二年级下册数学第一单元第1课时

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

苏科版数学七年级下册7.2《探索平行线的性质》

化学九年级下册全册同步人教版第25集生活中常见的盐（二）

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

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

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

8.练习八_第一课时(特等奖)(苏教版三年级上册)_T142692

冀教版小学数学二年级下册第二单元《有余数除法的竖式计算》

二年级下册数学第三课搭一搭⚖⚖

第4章幂函数、指数函数和对数函数（下）_六指数方程和对数方程_4.7 简单的指数方程_第一课时(沪教版高一下册)_T1566237

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

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

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

19 爱护鸟类_第一课时(二等奖)(桂美版二年级下册)_T502436

第五单元民族艺术的瑰宝_16. 形形色色的民族乐器_第一课时(岭南版六年级上册)_T3751175

第五单元民族艺术的瑰宝_15. 多姿多彩的民族服饰_第二课时(市一等奖)(岭南版六年级上册)_T129830

苏科版数学八年级下册9.2《中心对称和中心对称图形》

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

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

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

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

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

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

化学九年级下册全册同步人教版第22集酸和碱的中和反应（一）

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

外研版英语七年级下册module1unit3名词性物主代词讲解

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

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

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

精品推荐

营造良好的企业文化

分类导航

生物学

申桂英

此文档贡献者

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

教育资源为主的文档平台

文档分类