全文预览已结束
下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
一网学-有课堂的远程培训:_网页表单细节与规范就我自己看到的而言,很多网站的表单页面都存在样式混乱的问题,也许是不关注,还未意识到。下面就我们网页设计培训老师的理解,对表单设计的经验做些分享,欢迎交流与批评!首先什么样的表单才能算的上是好的表单?这个得搞清楚!(先撇开交互和产品,若加上这两点,那有的说了)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;表单的制作规范为视觉规范的其中一部分,它需要和视觉规范的其他版块配合使用,不可独立。此方法在项目工作中能迅速的完成表单制作,作为一个标准去检测开发的实现效果,同时可以使小组内多名成员迅速达到一定的共识,这些都尤为重要。我一直坚持简化设计,减少的是视觉污染和垃圾,减少开发成本和维护成本,减少用户学习成本,提升效率与体验。做科学设计,一同
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 空乘服务礼仪
- 公司企业如何激励团队
- 端午节日记五篇
- 年度框架合同印花税计税依据
- 内墙砌筑合同范本
- 摩托车停放协议书范本
- 广东省梅州市2025届高三生物第二次质检试题含解析
- 山东省新高考2024-2025学年高二地理下学期期末冲刺拉练八含解析
- 吉林省白城市通榆县第一中学2024-2025学年高二数学下学期网络期中试题理含解析
- 全国各地2024年中考物理真题分类汇编第3期专题16内能的利用及热学综合含解析
- 2024铁路钢结构高强度螺栓连接施工标准
- 浙江省2024年中考数学试卷(含答案)
- 2024语文新教材培训:新教材发生了哪些变化
- 道路开口施工方案6
- (2024)年度保密教育线上培训考试题库含完整答案(历年真题)
- 鲁教版七年级上册音乐教案
- 心理测量在心理疾病诊断中的应用
- 人教版九年级化学上册《第一、二单元》综合测试卷-附参考答案
- (人教部编版)三年级上册语文课课练(全册)含答案
- 保险公司服务方案及承诺
- 镁矿资源可持续利用与循环经济研究
评论
0/150
提交评论