最新BS系统界面设计规范
BS测试标准规范
B/S标准化测试规范一、界面测试1、页面元素标准➢字体大小：宋体，5号，标点符号全部用全角显示➢不同分辨率下包括：800*600、1024*768，页面上各元素显示正常➢按钮、列表框、选择框和弹出窗口大小一致，排列间距相同➢允许输入字符长度不超过输入框➢对齐：文字(标签)右对齐；数字(数据)右对齐；文字（数据）左对齐,比较短的可以居中对齐；金额，需加上千位符2、易用性➢界面支持键盘自动浏览按钮功能，即按Tab键的自动切换；Tab键的顺序与控件排列顺序一直，总体从上到下，同时行间从左到右。
➢默认按钮支持Enter操作，按Enter后自动执行默认按钮对应操作➢存在查询功能的页面，要对应有显示全部功能➢检测到非法输入后给出提示并自动获取焦点，并清空录入➢界面上控件按输入的先后次序和重要性排列3、合理性➢弹出窗口中心位置在对角线焦点上➢对可能造成数据无法恢复的操作必须提供确认信息➢模块的图形表示应与其功能相近➢在读入用户所输入的信息时，去掉前后空格二、功能测试1、链接测试➢所有链接都链接到了指示链接的页面➢所有链接的页面存在➢不存在没有链接指向的页面2、表单测试➢结合数据定义文档检查表单项的内容➢数据正确性验证、对于错误数据的处理、异常的处理3、正确性➢满足软件需求说明➢数据处理结果正确➢能够处理所有的边界值条件，包括最大值、最小值和非法值三、性能测试1、性能指标➢通用指标（指Web应用服务器、数据库服务器必需测试项）▪ProcessorTime: 指服务器CPU占用率，一般平均达到70%时，服务就接近饱和▪Memory Available Mbyte : 可用内存数，如果测试时发现内存有变化情况也要注意，如果是内存泄露则比较严重▪Physicsdisk Time : 物理磁盘读写时间情况➢Web服务器指标▪Avg Rps: 平均每秒钟响应次数＝总请求时间/ 秒数▪Avg time to last byte per terstion （mstes）:平均每秒业务脚本的迭代次数▪Successful Rounds：成功的请求▪Failed Rounds ：失败的请求▪Successful Hits ：成功的点击次数▪Failed Hits ：失败的点击次数▪Hits Per Second ：每秒点击次数▪Successful Hits Per Second ：每秒成功的点击次数▪Failed Hits Per Second ：每秒失败的点击次数▪Attempted Connections ：尝试链接数➢数据库服务器指标▪User 0 Connections ：用户连接数，也就是数据库的连接数量▪Number of deadlocks：数据库死锁▪Butter Cache hit ：数据库Cache的命中情况2、性能测试具体实施：⏹应用程序客户端的性能测试主要包括并发性能测试、疲劳强度测试、大数据量测试和速度测试。
BS界面规范V1.1
UI界面规范摘要：本文主要描述B/S应用程序开发中前台界面的规范，从显示设计和交互设计等方面阐述如何设计开发对用户友好的界面。
1引言界面美观、操作易用性、维护成本低是评价B/S系统的关键。
本规范参考了一些成熟产品科学的开发方法，将开发过程中的方式、规则等强行的约束。
希望藉此来提高用户操作感受，提升B/S产品的质量。
1.1编写目的1.2背景1.3定义2界面设计规范细则总体目标以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个站点，模块页面与“高内聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统的架构分析。
2.1通用规则2.1.1菜单1、功能菜单A、图标：目录关闭、目录打开、叶子节点B、间距：行高25px，2个间距分别为10px、5pxC、选中：菜单选中后蓝色背景，字体白色显示D、字体：宋体、12pxF、默认：展示所有关闭状态的一级菜单G、同一级菜单项不易超过20个2、弹出窗口菜单2.1.2查询列表1、查询框A、图标：弹出窗口图标、弹出日历控件图标、折叠隐藏查询框图标B、日历控件效果高25p x间距10p x间距5p xC、隐藏查询框效果D、弹出窗口：在弹出窗口中选中需要的项目确定后，所选项目代码回落隐藏域，所选项目名称回落对应文本框。
例如：选中一个部门后部门编码回落隐藏域itemCode、部门名称回落文本框itemName。
E、下拉框：默认显示“…请选择…”，20项以内适合用下拉框，多于20项适合用弹出窗。
F、日期框：格式样子2011-07-06，截止日期不能早于开始日期，G、必填项：如果需要必填项在录入项后加星号，例如H、校验：1、必填项没有录入。
2、日期、邮件、数字等格式不正确3、截止日期早于开始日期4、长度不合法，录入内容超出规定长度点击查询后提示：1、“[字段名]不能为空！”2、“[字段名]录入格式不正确！”3、“[字段名] 截止日期不能早于开始日期！”4、“[字段名]长度超长！”提示点击确定后光标回落提示字段录入框。
BS应用界面设计规范
B/S应用界面设计规范目录Web应用界面设计规范 (1)1 示例与说明 (1)1.1 登录界面 (1)1.2 桌面 (2)1.3 总体界面 (3)1.4 列表界面 (4)1.5 编辑界面 (6)1.5.1 上下结构主从式编辑界面 (6)1.5.2 左右结构主从式编辑页面 (7)1.5.3 一般编辑界面 (9)1.6 查询界面 (9)1.7 弹出窗口 (10)1.8 控件 (10)1.8.1 文本框 (10)1.8.2 下拉选择框 (11)1.8.3 单选按钮 (11)1.9 提示信息 (11)2 待确定问题列表 (11)1 示例与说明1.1 登录界面如上图例所示：登录界面的内容应该包括：1. 用户单位的名称和LOGO图案2. 应用系统的中文名称(也可加入英文名称)3. 用户名和密码输入框4. 本公司版权说明（中英文）1.2 桌面如上图例所示：桌面的内容应该包括：1. 桌面的文字标识2. 个人需要紧急处理的事务提醒3. 整个系统的信息公告滚动框（可选）4. 各种工具入口5. 本公司客户服务电话，传真，EMAIL提示1.3总体界面如上图例所示：总体界面的内容应该包括：1. 用户单位的名称和LOGO图案2. 应用系统的中文名称(也可加入英文名称)3. 系统功能入口(比如回到桌面，重新登录等功能)4. 功能菜单区域5. 主工作区1.4 列表界面1. 所在的菜单层次：说明本模块所在位置的文字，所在的位置必须对应功能菜单比如点击菜单上的；则模块位置说明文字必须对应起来:2. 选中的TAB页(每个tab页所包含的页面可以称之为一个卡片):a) 卡片的底色必须是白色的，卡片外的颜色是灰色的；b) 选中的tab按键的颜色必须和未选中的tab按键区别开来，未选中的按键上的字体是黑色的，而选中按键上的字体是蓝色加粗的如右图所示：3. 按钮说明：a) 按钮的颜色是统一的;b) 按钮上如果只有两个字，则这两个字之间和两个字的两边都需要一个空格；c) 如果是两个字以上的则只需要在字两边加一个空格；d) 按钮的最右端必须和列表的最右端对齐；e) 按钮之间没有空格；如右图所示：4. 文字显示多个记录说明：a) 列表必须提供对多个记录操作的功能，必须有一个选择本页所有记录的按钮；如右图所示：；b) 列表下面必须注明记录总数，如“共有15条记录”；5. 记录文字说明：a) 如果列表前选择框使用的是Radio Button，则应该默认选中第1条;b) 选中的记录必须和未选中的记录区分开来；c) 列表中数量数字必须靠右显示；金额数字采用千分位分隔符的形式，分隔符为西文逗号“,”如：。
BS系统界面设计与开发详解
B/S系统界面设计与开发详解早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。
时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为了一个非常重要的方面。
但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配的一席之地，并且在企业运作和协调中也没有形成成熟的模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨的一个问题。
这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一些构思和想法；其目的就是希望能和大家一起探讨一下这个问题，希望能供大家参考，起到抛砖引玉的作用。
另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章，我也尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。
1.工作流程下图，是整个开发过程中与界面设计相关的主要流程工作。
从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。
在需求分析阶段，参与了对客户的访问和调研；在概要设计阶段，参与了部分系统设计分析工作；在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；在代码开发阶段，参与了系统表现层的设计开发。
2.需求分析在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。
主要包括以下内容·受众用户群调查·系统使用环境调查·受众用户使用习惯调查·用户对旧版本软件使用情况调查这一阶段，由于成本原因，我并没有直接访问客户进行调查。
工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。
界面设计规范(BS)
界面元素设计规范
3. 按钮
设计 规范 必要性规范： 必要性规范： 1.相同字数的按钮大小要基本相近。 2.按钮设计应该具有交互性。 3.按钮上的文字名称不能太长，一般不超过4个字，最多不超过8个字。 4. 4.未满足操作条件的功能按钮应该加以屏蔽。 5.如果按钮采用图片为背景，则需按字数的个数差异，分别制作相应比例尺寸 的按钮背景图片。 建议性规范： 建议性规范： 1.菜单或按钮若要有图标图形，则必须加以文字说明该图形所表现的操作，且 图标必须是能直观的代表要完成的操作功能的图形。 2.按钮的大小要与界面的大小和空间要协调。 3.重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
火龙果?整理umlorgcn界面设计规范bs培训数据分析潘瑾时间日期火龙果?整理umlorgcnppt概要前言界面设计规范页面制作规范附录资料素材库火龙果?整理umlorgcn界面设计规范界面设计规范界面设计原则源文件规范界面元素设计规范火龙果?整理umlorgcn界面设计原则1
界面设计规范B/S培训 培训 界面设计规范
页面制作规范
页面制作规范 页面制作原则 页面制作规范 代码规范 CSS规范 规范 文件命名规范
界面元素设计规范
12. 编辑区
设计 规范 必要性规范： 必要性规范： 1. 编辑区内容的基本组成为：描述性标签和对应的输入或输出信息展示两部分， 并采用不同的样式，如不同的背景颜色，字体等。描述性标签采用：右对齐+ 中文冒号方式；对应的输入或输出信息展示采用：左对齐方式。 2. 表单内的描述性标签以用户可以理解的数据项对应文字描述为准，切忌模棱两 可。如果输入框前面的描述性标签描述不清，则需要在显示的区域以说明文字 注释清楚。 3. 必填项用不同颜色的“＊”标注（如红色），以示提醒。 4. 复选框和选项框按选择机率的高低而先后排列。
BS架构的软件系统Web界面设计和开发实现规范
BS架构的软件系统Web界面设计和开发实现规范
1.1B/S架构的软件系统Web界面设计和开发实现规范
1、页面设计规则
（1）页面命名规则
1）每个页面的title必须设置为和菜单配置中相同的中文，例如在菜单项中配置为“客户管理”，则此页面的title也要设置为“客户管理”。
2）对于JSP页面都需要在页面的最开始部分增加以下语句
<%@ page contentType="text/html; charset=gb2312" %>
3）对于HTML页面都需要在页面的最开始部分增加以下语句
4）对于页面中控件的属性设置都需要用双引号包括起来。
（2）页面表单中的控件命名规则
一般采用控件类型缩写前缀（小写）+英文单词（第一个字母大写）的方法来命名每一个控件。
具体规则如下：
2、变量定义规则
页面编码过程中用到的所有变量定义都需要遵循相应规则，方便
程序的可读性。
采用数据类型缩写前缀（小写）+英文单词（第一个字母大写）的方法来命名每一个变量。
具体规则如下：
3、函数定义规则
页面编码过程中用到的所有函数定义都需要遵循相应规则，方便程序的可读性。
采用前缀（fuc）+英文单词（第一个字母大写）的方法来命名每一个函数。
例如：fucAcceptOrder 4、CSS文件中的定义规则
（1）页面的规范
（2）表格的规范
（3）层的规范
（4）链接的规范。
系统界面设计规范
系统界面设计规范界面就是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。
而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。
同时界面如同人的面孔,具有吸引用户的直接优势。
设计合理的界面能给用户带来轻松愉悦的感受与成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。
目前界面的设计引起软件设计人员的重视的程度还远远不够,直到最近网页制作的兴起,才受到专家的青睐。
我们的界面设计遵循以下基本原则:1、易用性按钮名称应该易懂,用词准确,屏弃没楞两可的字眼,要与同一界面上的其她按钮易于区分,能望文知意最好。
理想的情况就是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
易用性细则:1):完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。
2):完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
3):按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。
4):Tab键的顺序与控件排列顺序要一致,目前流行总体从上到下,同时行间从左到右的方式。
5):复选框与选项框按选择几率的高底而先后排列。
6):界面空间较小时使用下拉框而不用选项框。
7):选项数较少时使用选项框,相反使用下拉列表框。
8):专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。
2、规范性通常界面设计都按Windows界面的规范来设计,即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应的就越好。
规范性细则:1): 状态条要能显示用户切实需要的信息,常用的有:目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条与进程提示。
2):状态条的高度以放置五号字为宜,滚动条的宽度比状态条的略窄。
3、帮助系统应该提供详尽而可靠的帮助文档,在用户使用产生迷惑时可以自己寻求解决方法。
汽车销售系统-界面设计规范
界面设计规范项目名称：汽车销售管理系统项目编号：ISB-AutoStar编写人员：编写日期：审批人员：审批日期：1．界面设计部分1.1界面的总体原则1.2必须显示公司名称、系列软件名称、版本号、版权等相应内容。
（主要是启动画面）1.3整体界面必须符合一般Windows风格或流行的界面标准。
1.4同一系列产品的总体风格应一致。
（比如：登录，按钮名称，图标样式等等）。
1.5主菜单、子菜单、弹出菜单以及窗口中的按钮（除“确定”、“取消”按钮外）都必须设置快捷方式。
（菜单快捷方式包括键盘快捷键和系统快捷键都要有，对于用户常用的功能提供系统快捷键。
）1.6必须使所有功能都能被鼠标、键盘所访问（尤其是键盘）。
（ESC键退出对话框，在输入信息时，回车、Tab键自动到下一输入项。
）1.7尽量提供鼠标右键功能，方便用户操作。
2控件的位置2.1重要或频繁访问的元素应当放在显著的位置上。
2.2位置必须符合用户的视觉习惯（从左到右，从上到下）。
2.3必须按照信息和功能按逻辑分组。
2.4按钮的位置必须与界面其他控件保存位置上的对应，上下保持对称，左右与第一行控件水平。
3界面元素3.1相同类型、相同功能的窗体必须保持一致性：类型、尺寸、背景、颜色。
3.2在同一个系列的软件中相同类型的控件应保持一致性：尺寸、颜色、字体、标题、内容（标准按钮的长度XXX，高度YYY）。
3.3在同一个系列的软件中，所有的表格、单元格应保持一致（标准单元格大小为高0.YYcm，宽X.Xcm）。
3.4分组的一致性：按照相应的业务分类进行控件的分组，以便于用户按照分组进行操作：同时也使得界面减少冗余内容。
（比如关闭，确定、取消等按钮应该与增加、修改、删除按钮分开等等）。
3.5各菜单项的名称必须合理，不应引起理解的二义性。
3.6对应窗口上的名称（caption）必须与各菜单项的名称一致。
（对于二次窗口的caption命名方法，可参考：比如主菜单中用户设置中增加对话框的caption为“用户设置–增加”，以此类推）；3.7当信息在一屏内无法完全显示，必须加上滚动条，且符合Windows标准（即当显示的内容超过显示位置的时候）。
BS结构应用系统技术规范
开放平台B/S结构应用系统技术规范第一章总则为了保证全行开放平台B/S结构应用系统的健康、稳定运行，加强对开放平台B/S结构应用系统建设的统一规划，特制定和下发本规范。
本规范制定了开放平台B/S结构应用系统的客户端、WEB服务器、应用服务器、数据库服务器四个层次的软硬件配置规范，并对WEB服务器、应用服务器和数据库服务器三个层次提出了部署的具体要求，从负载均衡、系统备份等方面详细描述了服务器的部署规范。
此外，还制定了群组划分、服务器整合的原则。
本规范的适用范围是：总行信息科技部、各一级分行及直属分行（以下简称“分行”）信息科技部、数据中心（北京）、数据中心（上海）、海外数据中心、软件开发中心（以下简称“各中心”）。
第二章 B/S结构服务器部署规范一. 概述传统意义下的B/S应用系统的结构分成三层，分别是浏览器层/服务器层/数据库层，服务器层可以细分为WEB服务器、应用服务器两层。
由于考虑处理能力、不同服务器之间的关联性等多方面的因素，往往分别为这两层服务器配备不同的硬件，因此，目前的生产环境的服务器硬件相对较多。
为了方便管理、合理利用开放平台资源以及提高运行稳定性，需要从结构和平台两个方面依据一定的规范进行整合。
虽然这些应用系统完成的功能互不相同，但是，基本上都是使用相同的体系结构、相同的开发平台，具有整合的可能性。
本章重点分析我行B/S结构应用系统WEB服务器层、应用服务器层的物理和逻辑结构，然后确定这两个层次的结构和每个层次中服务器的软硬件平台版本、负载均衡策略和系统的备份策略。
二. B/S结构应用系统的分析从应用系统的物理或逻辑结构来分析，我行B/S结构应用可以分成两大类，一类是典型的J2EE应用，即WEB服务器、应用服务器和数据存储服务（包括数据库和主机应用）；另一类是基于微软技术的应用，包括WEB服务器和数据存储服务两层。
从目前的实际情况看来，绝大部分应用都是典型的J2EE应用，只有个别应用是采取微软技术的，并且已经有明确的版本计划要进行平台移植，最终都会统一用典型的J2EE技术。
BS软件设计、测试界面规范
B/S软件界面规范V1.1目录一、总体目标 (2)二、通用原则 (2)2.1界面色彩搭配 (2)2.2界面布局 (2)2.3 文件命名和文本信息 (5)2.4 错误操作和提示信息 (6)2.5 图形 (7)三、具体页面的细则 (8)3.1 登录界面 (8)3.2.1头文件 (9)3.2.2欢迎页面 (10)3.2.3左侧菜单 (12)3.2.4右框架显示内容部分 (13)一、总体目标以规范作为基本原则，在此框架内进行合理的扩展和变化，使站点内的每个模块服从于整个站点的风格。
二、通用原则2.1界面色彩搭配计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别做出恰当的色彩搭配。
对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。
界面的配色应该尽量简单，尽量少使用各种刺眼的颜色。
2.2界面布局1、屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置内容时要注意利用这两个位置。
(如下图1和图2矩形区域所示)图1图22、界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。
界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。
3、系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，固定的格式，方便用户导航使用；排版不宜过于密集，保留一定的“留白”区域，减轻查看时的视觉疲劳。
4、布局要主次分明，页面中同时分布较多栏目的情况下，按照页面的伸展方向，即由上到下，由左到右，根据浏览的方向，重要的内容应该在左边最易注意的位置，导航等置于页面头部固定位置。
使导航等重要内容始终处于用户的视野之中。
页面右边一般是一些当前页面主要操作的扩展、选项等内容。
（如图3）图35、页面留白，是一种增加可读性的方式，在文字区域防止用户读完一行无法定位下一行的位置的麻烦，在整体布局上，它可以减轻用户的视觉疲劳。
网站和BS软件系统开发需要的几个技术规范
网站和B/S软件系统开发需要的几个技术规范做项目越多，结识各种项目的人也就越多。
从专注进入软件开发行业开始，就跟各种软件项目结下不解之缘。
以前在内地公司干，总以为发达地区的软件公司应该是什么都好，如编码规范、文档、架构设计等都一一俱全，但是在客户现场看到的，大部份与我所想象的差距很大，要么没规范，各自为政，只要能实现功能就行，要么规范只是一种摆设，基本不遵守。
网站开发和软件开发都一样，都需要有一定的技术规范，否则很容易造成项目各组员之间的内耗。
有时一些小的细节问题会造成很大的资源消耗，如果在项目开始就不规范下来，在开发过程中问题会越积越多，导致返工、项目延期，严重的造成项目失败。
曾经有位老大说，写程序要像写诗一样，要有韵味，但是我觉得这种要求太太...太高了，我们一般就要求像写小说一样，一段程序能把一件事情说清楚就OK了，做到不看注释，也能把程序看懂，这种要求其实不低，也要有一定的水准才能写得出来。
那就按照这种要求来协助我们的员工完成这种标准吧。
下面就把我经历和总结出来的一些东西分享一下，以便能让自己时刻记住，也希望能帮到一些项目管理过程中遇到问题的同学。
1、界面样式规范界面样式的要求对网站来说是非常重要的一块区域，网站好不好看，完全依赖美工的水平，而如果美工对样式的把握不好，切出来的页面虽然好看，但是可能会影响到网页的打开整度、网站seo的优化等。
比如我最开始做网站的时候，只会用table来对网站进行布局，一个内容非常多的网产首页使用一个大table来进行外层布局，然后再对大表格进行单元格切分后显示各个子模块，这就导致访问网页时半天都没反应，但是过几秒后突然就崩出一个完整的界面，这就是网页元素布局导致的，后面经过朋友建议改成多个小表格，按布局改成流式的，让网页一部份一部分的显示，打开体验上一下得到极大改观，虽然网页并不是否下就加载完，但是对用户来说就不存在等待时间。
这好比我们在堵车的时候，如果能慢慢的向前走，即使是很慢，心理也是比较愉快的，但是如果就让你干等着，然后突然一下让你加速通过，也会感觉到很烦恼，这是两种完全不同的心理反应，虽然结果可能是一样的。
BS系统界面设计规范标准
B/S 系统界面设计规1. 引言界面美观、操作易用性、维护成本低是评价B/S系统的关键。
本规参考了一些成熟产品科学的开发方法，将开发过程中的方式、规则等强行的约束。
希望藉此来提高用户操作感受，提升B/S产品的质量。
1.1. 编写目的广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。
本规制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司B/S类产品的质量、开发效率。
从以技术为中心发展为以客户为中心，将类似项目成功的经验继承和积累下来，将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层面。
新的开发方式强调分层，规出界面设计人员做什么，服务器编程人员做什么，这样就把页面和控制代码两个层面清晰的分开。
1.2. 背景B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占越来越大的比重，.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。
目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式，表现为前台页面仍然与服务器代码高度的关联，带来的后果是重复建设、高昂的维护成本或失去控制的项目，没有充分的发挥出集成开发工具的优势。
在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模块来处理，在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖很强，这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的，甚至是背道而弛的，当然也不利于规模化的团队合作。
1.3. 定义术语定义：效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的风格，它规定了页面布局上的每个细节。
容器：即HTML 标记的嵌套结构，如在表格->行->单元格放置图片，那么可以认为单元格是放置图片的容器。
系统界面设计规范标准
CS界面设计规目录1.界面规 (2)1.1.总体原则 (2)1.2.原则详述 (3)1.2.1.用户控制 (3)1.2.2.清楚一致的设计 (3)1.2.3.有良好的直觉特征 (4)1.2.4.较快的响应速度 (4)1.2.5.简单且美观 (5)1.3.细节约定 (5)1.3.1.界面风格 (5)1.3.1.1....................................................................... 普通外观51.3.1.2............................................................. Windows的可视提示61.3.1.3........................................................................... 交互61.3.1.4........................................................................... 程序71.3.1.5........................................................................... 默认81.3.1.6........................................................................... 窗体81.3.1.7..................................................................... 布局和间距81.3.1.8..................................................................... 图标、图片91.3.1.9.............................................................. 提示信息（Hint）91.3.1.10...................................................................... 标点符号91.3.1.11........................................................................ 对话框91.3.1.12......................................................... 对话框的主要命令按钮111.3.1.13................................................................ 属性表和属性页111.3.1.14.......................................................................... 向导121.3.1.15.......................................................................... 控件121.3.1.16...................................................................... 命令按钮121.3.1.17........................................................................ 复选框131.3.1.18...................................................................... 单选按钮131.3.1.19........................................................................ 组合框141.3.1.20........................................................................ 编辑框141.3.1.21.......................................................................... 滑块141.3.1.22...................................................................... 静态文本151.3.1.23........................................................................ 列表框151.3.1.24...................................................................... 列表视图151.3.1.25........................................................................ 滚动条151.3.1.26........................................................................ 分组框161.3.1.27.......................................................................... 菜单161.3.1.28.................................................................... 上下文菜单171.3.1.29........................................................................ 工具栏17引在参考了很多资料后，整理出来的一份界面规（是c/s程序的，但其中的原则部分对任何界面都是具有参考价值的），希望能给大家带来帮助。
UI设计规范文档-BS版
目录：一、适用环境和对象二、必要性三、技术原则四、代码编写规范五、页面模版使用规范一、适用环境和对象本规范适用基于浏览器的B/S版软件项目开发工作。
开发流程中的模版页面编写和模版文件套用工作必须遵照此规范执行。
适用对象为开发编码人员、UI设计人员、模版编写人员、界面测试人员等。
基于客户端的C/S版软件开发工作不适用本技术规范。
二、必要性本规范旨在制订开发编码人员和UI模版编写人员之间在工作交叉部分的技术标准，使他们遵循同一操作规范，利于交叉工作的平缓顺利交接。
以标准化方式，提高沟通和技术协作的水平，提高工作效率。
减少和改变责任不明，任务不清，和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。
三、技术原则代码规范化书写代码规范化书写实现了脚本整体风格的一致，保证了同一个人不同时期写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致。
因为开发不可能在孤立中进行，所以代码规范化书写是项目组人员合作沟通的前提。
数据层、结构层、表现层分离数据内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。
这里强调的“真正”，是指纯粹的数据信息本身。
把信息内容以一种合适的方式格式化，简言之就是页面排版，例如：分成标题、作者、章、节、段落和列表等，使内容更加具有逻辑性，条理清晰易读易懂，叫做“结构(Structure)”虽然定义了结构，但是内容还是相同的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。
所有这些用来改变内容外观的东西，称之为“表现(Presentation)”“表现”的作用使内容看上去漂亮、赏心悦目、打动人心！所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。
抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，人对页面内容的交互及操作效果叫做“行为（Behavior）”,对于数据、结构与表现相分离，最早是在软件开发架构理论中提出来的。
最新界面设计规范上下
界面设计规范上下软件界面设计规范（上）说明：软件界面设计属于详细设计，设计人员可根据项目的规模及时间跨度来决定是否单列出来，可灵活掌握。
以下所列举和分析内容基本上包括了大部分的软件的内容规范，结合具体软件开发项目，需适当的调整。
1目的：当今软件界的所有软件无不是可视化的用户界面，它的好处不外乎它有美观、直接、操作者易懂和操作方便等好处。
（具体目的）2 内容：2.1 界面设计思想：“为用户设计，而不是设计者”。
（1）美观、操作方便高效。
（2）根据用户需求设计。
（3）针对不同用户的层次设计。
（有的用户对计算机相当了解而有的从来就没碰过计算机）（4）避免出现嵌套式的界面设计。
（5）界面和代码要相互制约。
（6）界面要通“人性”。
即要有引导用户操作的功能，不能是操作一有错误就卡住什么都做不下去，又无任何提示来帮助用户如何进行操作。
2.2 界面设计原则：(1)遵循一致的准则，确立标准并遵循无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。
这样得到的好处：a.使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解。
b.降低培训、支持成本，支持人员不会行费力逐个指导。
c.给用户统一感觉，不觉得混乱，心情愉快，支持度增加做法：项目组有经验人士，确立UI规范：美工提供色调配色方案，提供整体配色表界面控制程序人员、用户体验人员提出合理统一使用的控件库。
参考标准界面使用规范：控件功能遵循行业标准，windows平台参见《Microsoft 用户体验》(MSDN中有，中文已经翻译发行，项目组必须有一本)控件的样式在允许的范围内可以统一修改其样式、色调。
参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。
根据需要，设计特殊操作的控件，准则为：简化操作、达到一定功能目的界面实施人员与美工商榷控件可实现性，重复迭代上述工作。
5系统设计-用户界面规范(4)
版本信息
版本信息标题：规范命名为：系统中文全称 版本信息内容：内容包括每次发布的版本、发布时间、增 加功能、修改功能、修复缺陷，每一条信息必须以增加、 修改或修复开头。（第一次发版除外） 发布时间按倒序排列
主界面– 主界面–菜单区
系统名称 • 系统名称：包括系统英文简称（大小：33px, 字体： 系统名称：包括系统英文简称（大小：33px, Arial）、系统中文全称（大小：16px, 字体：Arial）、 Arial）、系统中文全称（大小：16px, 字体：Arial）、 系统英文全称（大小：10px, 字体：Arial）、系统版本 系统英文全称（大小：10px, 字体：Arial）、系统版本 号(版本号只能为2位数 ) 四部分内容。（标题图片高度 版本号只能为2 不超过41px）。 不超过41px）。
公司标识
正确使用统一的公司标识 并放置在主界面顶部的左端位置。 正确使用统一的公司标识，并放置在主界面顶部的左端位置。 公司标识， 公司标识要符合公司CI标准 公司标识要符合公司CI标准(宽：49px，高：17px)。 要符合公司CI标准( 49px， 17px)。
主界面– 主界面–菜单区
一级菜单
登录 –
系统名称
系统名称包括：系统简称、系统中文全称、系统英文全称、 系统版本号（只能为2位数）, 系统版本号（只能为2位数）,这几部分的相对位置参见下 图示例 • ( 英文简称用Arial 斜体，大小为36pt,中文全称用微软简 英文简称用Arial 斜体，大小为36pt,中文全称用微软简 标宋，大小为15pt，英文全称用Arial，大小为12pt )。 标宋，大小为15pt，英文全称用Arial，大小为12pt )。
系统名称：（系统简称＋系统 中文全称＋系统英文全称＋版 本号）
系统界面设计规范
系统界面设计规范界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。
而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。
同时界面如同人的面孔，具有吸引用户的直接优势。
设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。
目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。
我们的界面设计遵循以下基本原则：1、易用性按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。
理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
易用性细则：1):完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。
2):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
3):按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
4):Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。
5):复选框和选项框按选择几率的高底而先后排列。
6):界面空间较小时使用下拉框而不用选项框。
7):选项数较少时使用选项框，相反使用下拉列表框。
8):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。
2、规范性通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。
规范性细则：1):状态条要能显示用户切实需要的信息，常用的有：目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。
2)：状态条的高度以放置五号字为宜，滚动条的宽度比状态条的略窄。
3、帮助系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Readable ）的方式。在文字区域防止用
户读完一行无法定位下一行的位置的麻烦，在整体布局上，它可以减轻用户的视觉疲劳。
7 即时响应原则： 每一个交互动作应该能够马上看到操作的结果， 闪烁、弹出、页面布局的明显变化等突出方式告知用户。
并且用色彩、 文字粗细、
8 鼠标最短距离移动原则：交互按钮控件等根据执行前后关系及表单中状态的控制等合 理的组织起来。
读的部分，只在文本字体、色彩上增加格式的变化，如加粗、下划线、行前导符、链接
文本的不同状态定义（ link\hover\visited
）等，就可以将冗长的文档、表格等组织的很
有条理；冗长的内容 “层次 “就有了变化，更容易辩识 (Readable) ；在美学角度增加了
相临部分间的对比。
6 页面留白：页面留白同时也是一种增加可读性（
精选范本
.
8 ． 页面留白页面有明显留白区域，且不同群组之间距离保持一致。 9 ． 分辨率适应页面布局以保证在低分辨率 [800*600] 下的正确显示为前提，适应高分辨 率情
2. 界面设计规范细则 总体目标
以规范作为基本原则， 在此框架内进行合理的扩展和变化， 将站点内的每个模块服从于整个
站点，模块页面与 “高内聚 ”的控制代码紧密的结合在一起，同时对应于应用程序基于系统
精选范本
.
的架构分析。
2.1. 通用原则
1 界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差 别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后 不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌 色彩过多，花哨艳丽，严重妨碍用户视觉交互。
.
B/S 系统界面设计规范
1. 引言 界面美观、操作易用性、维护成本低是评价
B/S 系统的关键。本规范参考了一些成熟产
品科学的开发方法， 将开发过程中的方式、 规则等强行的约束。 希望藉此来提高用户操作感
受，提升 B/S 产品的质量。
1.1. 编写目的 广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。
5 ． 使用样式表修饰页面表格 整 个站点的维护和扩展。
Table, 如表格单元格、背景，表格内字体等，方便今后对于
6 ． 页面分组页面查询区域、数据列表、详细信息、编辑区域等根据不同功能分组，所在 区 域主题（ Title ）标注该区域的名称，类似功能页面间布局保持一致。
7 ． 建立数据表格关系包含数据的表格使用户在视觉上理解相互间关系，如序列、父子表 等。
4 主次分明原则：页面中同时分布较多栏目的情况下，按照页面（
Flow ）的伸展方向，
即由上到下，有左到右，根据浏览的方向，重要的内容应该在左边最易注意的位置，导
航等置于页面头部固定位置。使导航等重要内容始终处于用户的视野（
Sight ）之中 .
页面右边一般是一些当前页面主要操作的扩展、选项等内容。
5 变化（对比）原则：在页面主体内容部分往往有很多文本信息，它是需要用户认真阅
容器：即 HTML 标记的嵌套结构，如在表格 -> 行 -> 单元格内放置图片，那么可以认为
Байду номын сангаас
单元格是放置图片的容器。
样式表：即级联式样式表 CSS ，它是 W3C 机构在 HTML 标记语言上扩展的格式语言。
非标准交互控件：是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封
装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。
应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。
目前公司较多的服务器端编程人员仍然处于 “后 ASP 时代 ”的开发方式，表现为前台 页面仍然与服务器代码高度的关联， 带来的后果是重复建设、 高昂的维护成本或失去控制的
项目，没有充分的发挥出集成开发工具的优势。
在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模
2.2. 显示（版式）设计
1 ． 页面布局基于表格 Table 建立完全符合设计效果图。 2 ． 文字容易阅读。行间距、字体大小等通过样式表统一控制。 3 ． 页面链接根据不同功能、不同状态用不同颜色、状态标志，增加页面层次。 4 ． 基于表格 Talbe 的布局（ Layerout ）控制，便于控制实现不同分辨率下的适应，和页 面 上下方向的自动扩展；表格作为控件 “容器 ”规范外观和规格，不同页面中的行列分布 基本一致。
2 界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，
固定的格式，方便用户导航使用；排版不宜过于密集，保留一定的
“留白 ”区域，减轻
查看时的视觉疲劳。
3 数据显示集中原则：各种列表在页面中往往是传递信息的核心，尽量集中的表现出来， 并提供必要的关联数据、表等恰当的组织起来，并且在视觉上使用户很容易察觉数据之 间的关系，并方便查看、编辑等；冗长拖沓的数据组织形式可能给用户带来非常低的维 护效率。
块来处理， 在页面交互中则是程序员根据自己的习惯来控制， 程序对个人的编程风格的依赖
很强，这些在以往开发 WEB 站点的方式扩展到 B/S 系统有时是不正确的，甚至是背道而
弛
的，当然也不利于规模化的团队合作。
1.3. 定义 术语定义：
效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的 风格，它规定了页面布局上的每个细节。
本规范制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司
B/S 类产品的质量、开发效率。从以技术为中心发展为以客户为中心，将类似项目成功的 经
验继承和积累下来，将 B/S 系统与 C/S 系统开发过程上的区别降低到仅显示控制的极小的
层 面。
新的开发方式强调分层，规范出界面设计人员做什么，服务器编程人员做什么，这样就
把页面和控制代码两个层面清晰的分开。
1.2. 背景
B/S 模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占 越来越大的比重， .Net 、J2ee 等技术的发展更是将 B/S 系统的开发和桌面应用程序开发的
工 程方法统一起来， 突出服务器端技术， 这些变革要求界面设计人员和服务器端编程人员可以