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;
表单的制作规范为视觉规范的其中一部分,它需要和视觉规范的其他版块配合使用,不可独立。
此方法在项目工作中能迅速的完成表单制作,作为一个标准去检测开发的实现效果,同时可以使小组内多名成员迅速达到一定的共识,这些都尤为重要。
我一直坚持简化设计,减少的是视觉污染和垃圾,减少开发成本和维护成本,减少用户学习成本,提升效率与体验。