系统界面设计规范样本.doc
《系统界面设计规范样本.doc》由会员分享,可在线阅读,更多相关《系统界面设计规范样本.doc(10页珍藏版)》请在咨信网上搜索。
1、资料内容仅供您学习参考,如有不当或者侵权,请联系改正或者删除。B/S 系统界面设计规范1. 引言界面美观、 操作易用性、 维护成本低是评价B/S系统的关键。本规范参考了一些成熟产品科学的开发方法, 将开发过程中的方式、 规则等强行的约束。希望藉此来提高用户操作感受, 提升B/S产品的质量。1.1. 编写目的广义的界面概念包含了除页面布局设计之外, 交互性的设计, 及人体工程学方面的研究。本规范制订的依据从广义概念出发, 总结以往项目的成败经验, 目的是从整体上提升公司B/S类产品的质量、 开发效率。从以技术为中心发展为以客户为中心, 将类似项目成功的经验继承和积累下来, 将B/S系统与C/S系
2、统开发过程上的区别降低到仅显示控制的极小的层面。新的开发方式强调分层, 规范出界面设计人员做什么, 服务器编程人员做什么, 这样就把页面和控制代码两个层面清晰的分开。1.2. 背景B/S模式系统以其易部署、 易扩展、 能够高度集成各种技术的特点, 在公司产品线中占越来越大的比重, .Net、 J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来, 突出服务器端技术, 这些变革要求界面设计人员和服务器端编程人员能够应用更加科学的方法合作, 团队的合作方式甚至决定了一个系统开发的成败。当前公司较多的服务器端编程人员依然处于”后ASP 时代”的开发方式, 表现为前台页面依然
3、与服务器代码高度的关联, 带来的后果是重复建设、 高昂的维护成本或失去控制的项目, 没有充分的发挥出集成开发工具的优势。在以往的开发方式下界面设计侧重在静态页面的建设上, 每个页面作为一个独立的模块来处理, 在页面交互中则是程序员根据自己的习惯来控制, 程序对个人的编程风格的依赖很强, 这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的, 甚至是背道而弛的, 当然也不利于规模化的团队合作。1.3. 定义术语定义: 效果图: 由界面设计人员设计的页面效果图, 综合了概要设计的业务需要和整个站点的风格, 它规定了页面布局上的每个细节。容器: 即HTML 标记的嵌套结构, 如在表格-行-单
4、元格内放置图片, 那么能够认为单元格是放置图片的容器。样式表: 即级联式样式表CSS, 它是W3C机构在HTML标记语言上扩展的格式语言。非标准交互控件: 是经过标准控件组合、 扩展等方法以提高特定业务执行效率而进行封装的控件, 或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。2. 界面设计规范细则总体目标以规范作为基本原则, 在此框架内进行合理的扩展和变化, 将站点内的每个模块服从于整个站点, 模块页面与”高内聚”的控制代码紧密的结合在一起, 同时对应于应用程序基于系统的架构分析。2.1. 通用原则1 界面色彩要求: 计算机屏幕的发光成像和普通视觉成像有很大的不同, 应该注
5、意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统, 应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色, 灰色系为主配色等等。切忌色彩过多, 花哨艳丽, 严重妨碍用户视觉交互。2 界面平面版式要求: 系统样式排版整齐划一, 尽可能划分不同的功能区域于固定位置, 固定的格式, 方便用户导航使用; 排版不宜过于密集, 保留一定的”留白”区域, 减轻查看时的视觉疲劳。3 数据显示集中原则: 各种列表在页面中往往是传递信息的核心, 尽量集中的表现出来, 并提供必要的关联数据、 表等恰当的组织起来, 而且在视觉上使用户很容易察觉数据之间的关系, 并方便查看、 编辑等;
6、冗长拖沓的数据组织形式可能给用户带来非常低的维护效率。4 主次分明原则: 页面中同时分布较多栏目的情况下, 按照页面( Flow) 的伸展方向, 即由上到下, 有左到右, 根据浏览的方向, 重要的内容应该在左边最易注意的位置, 导航等置于页面头部固定位置。使导航等重要内容始终处于用户的视野( Sight) 之中.页面右边一般是一些当前页面主要操作的扩展、 选项等内容。5 变化( 对比) 原则: 在页面主体内容部分往往有很多文本信息, 它是需要用户认真阅读的部分, 只在文本字体、 色彩上增加格式的变化, 如加粗、 下划线、 行前导符、 链接文本的不同状态定义( linkhovervisited)
7、 等, 就能够将冗长的文档、 表格等组织的很有条理; 冗长的内容”层次”就有了变化, 更容易辩识(Readable); 在美学角度增加了相临部分间的对比。6 页面留白: 页面留白同时也是一种增加可读性( Readable) 的方式。在文字区域防止用户读完一行无法定位下一行的位置的麻烦, 在整体布局上, 它能够减轻用户的视觉疲劳。7 即时响应原则: 每一个交互动作应该能够马上看到操作的结果, 而且用色彩、 文字粗细、 闪烁、 弹出、 页面布局的明显变化等突出方式告知用户。8 鼠标最短距离移动原则: 交互按钮控件等根据执行前后关系及表单中状态的控制等合理的组织起来。2.2. 显示( 版式) 设计1
8、 页面布局基于表格Table建立完全符合设计效果图。2 文字容易阅读。行间距、 字体大小等经过样式表统一控制。3 页面链接根据不同功能、 不同状态用不同颜色、 状态标志, 增加页面层次。4 基于表格Talbe的布局( Layerout) 控制, 便于控制实现不同分辨率下的适应, 和页面上下方向的自动扩展; 表格作为控件”容器”规范外观和规格, 不同页面中的行列分布基本一致。5 使用样式表修饰页面表格 Table,如表格单元格、 背景, 表格内字体等, 方便今后对于整个站点的维护和扩展。6 页面分组页面查询区域、 数据列表、 详细信息、 编辑区域等根据不同功能分组, 所在区域主题( Title)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 系统 界面设计 规范 样本
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【天****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【天****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。