web cs 界面设计规范

交互界面设计规范

作者：deaya 2011.06.27

一、界面约定

窗体

●窗体的大小不能超过800*600 。

●次窗体的大小不能大于500*400 。

●给每个窗口提供一个标签，必须用标签来标明其用途。

图列：给窗口提供标签

菜单

●尽量用词语做菜单标题

●不要再字体间可以留空隙

●避免占多行菜单

●保持菜单稳定

●合理安排菜单项的顺序

●将无效菜单视为不可代替报错

●不要使用多列的下拉菜单

●不要使用右对齐菜单标题

图例：

消息框

●确保消息按钮与文本一致[例如绝对不要用“是”和“否”来作为非提问消息的响应]

●避免不必要的消息框[采用“是”和“否”，“确认”和“取消”很少同时应用在消息

框中。]

●选择默认按钮 [将最安全的或最常用的选项作为默认按钮。]

图例：

对话框

●不要使用可滚动的对话框。

●不要在作为二级窗口的对话框中使用菜单栏。

●确保模式对话框的模式，使其具有父窗口的模式对话框，提供正确父窗口句柄，而不

是提供空句柄[特别注意：对话模式下，父窗口不能拖动。]

●二级对话框页面布局和间距与父窗口保持一致。

图例：

组合框

●总给组合框提供一个标签，必须用标签来表明组合框的用途。

●避免组合框少于四行，考虑用单选按钮代替，保持与其他组合框一致。

图例：

编辑框

●总给编辑框提供一个标签，必须用标签来标明编辑框的用途。如果标签在左边，将标签

文字与编辑框文本垂直对齐。

●避免有输入限制的编辑框将编辑框用于用户对任何文本的输入或数字编辑框用于数字

的编辑。对于输入受限的情况，使用其他的控件，如组合框、列表、滑块和微调框。对

于日期和时间，使用日期和时间拾取控件。

●总采用数字编辑框用于数字输入* 当用户在数字字段中输入非数字文本时，不应该有任

何出错消息。

图例：

列表框

●总给列表框提供一个标签，必须用标签来标明列表框的用途。

●对多个选择考虑采用复选框复选框列表可以突出其多个选择的能力。如果不能接受复

选框列表，那么可以采用多选列表，并用静态文本表示选项个数，清楚指明可进行多

项选择。

●对多选列表考虑提供"全部选中"和"全部取消选中"命令由于希望全部选中或全部取消

使常见的事情，所以这两个命令方便了用户进行多项选择。

图例：

分组框

●利用分组框分组相关控件尽管分组框通常是用于单选按钮的分组，但也可用于任何控

件的分组。避免使用只有一个控件的分组框，除非是为了保持与同一对话框中其他分组

框一致。

●考虑采用静态线或文本标签来代替分组框分组框多时要占去许多空间。如果空间紧张

的话，一个替代分组控件的好办法是同时采用静态文本标签和静态线。

图例：

布局与间距

●窗体控件布局和间距尽量保持与Windows标准一致。

●控件与窗体的上、下、左、右边距为7象素。

●右下角主命令按钮之间的间距为6象素，如果主命令按钮在右上角，之间的间距则为4

象素。

●主命令按钮一般情况为75×21象素，如果按钮的文本很长，应该适当加宽按钮的宽度。

图例：

对话框内的命令按钮

●将主命令按钮与对话框主体分开，主命令按钮包括像"确定"、"取消"、"关闭"、"帮助"、

"停止"、"隐藏"，以及其他相关按钮的等命令按钮。这种分开使主命令按钮更易于查找

和识别。

●相似的方向。这将使对话框的外观看起来更加舒服，并且更易于在屏幕上进行定位。如

果按钮具有不同的大小，那么可以将它们放在对话框菜单底部。

●将排列在底部的主命令按钮右对齐右对齐主命令按钮适合从左到右的阅读习惯。

列表视图

●总给列表视图提供一个标签，必须用标签来标明列表视图的用途。

●使列表视图至少5行长少于5行的列表视图没有滑块，不便于滚动。如果列表视图没

有滚动条，那么使用一个更短的列表视图也是可以接受的。

●仅在列表可排序时采用可单击的表头[可单击的表头只应用于排序。首次单击时应按

正序对列表进行排序，而第二次单击时按反序进行排列。]

●对列项大约超过30的列表视图总使其可进行排序[用户能够对列表进行排序方便了对

信息的查找。]

控件

●尽量采用标准按钮。

●将无效的控件置为不可用 [将不适用于当前程序状态的控件置为不可用。]

●取消不必要的滚动条 [尽量使控件的尺寸足够大，避免使用滚动条。]

命令按钮

●采用最小的宽度和标准的高度[尽量将不同大小的带文字命令按钮的个数控制在两个

以内。]

●尽管不限制命令按钮的最大宽度[Width:160px]

●将无效按钮置为不可用，以取消报错，绝对不要使可用的按钮仅产生一条出错信息。

●总采用省略号来表示需要更多信息，命令中的省略号表示执行命令时需要更多信息，

而不是简单的确认。省略号并不表示一定会出现对话框。

●绝对不要指定双击行为[用户意料不到命令按钮会响应双击，因此不可能发现这样的行

为。]

●命令按钮大小使用Window标准75x21象素。

复选框

●用复选框开关选项，用单选按钮改变模式。[例如，可用一个复选框来表示是否显示工

具栏，但若用复选框来切换打印机的横向模式和纵向模式就会使人糊涂，对横向和纵向

模式应该用一组单选按钮代替。]

●避免一组复选框中选项个数超过8个 [应该考虑用复选框列表代替，它占用的空间更

少，但复选框列表需要滚动时使用就稍稍麻烦了。尽管控件足够或保持与同一窗口中其

他复选框一致时，采用复选框时可取的，但大于8个左右的复选框就未免太多了。 ]

●最好使用竖向对其，这样便于浏览

单选按钮

●避免一组单选按钮中的选项个数超过8个[考虑用列表或组合框代替，它们占用的空

间更少，但要记住控件使用更麻烦些。尽管控件足够或保持与同一窗口中其他单选按

钮一致时，采用单选按钮是可取的，但多于8个的单选按钮未免太多了。]

●总将单选按钮置于一个分组框中[由于单选按钮是一组相互排斥的选项，所以分组框

使选择更为明确。]

●竖向对齐 [这种对齐方式更易于浏览]

静态文本

●左对齐静态文本标签左对齐使得标签外观更有条理，且易于浏览。

●将静态文本标签置于相关控件的左边[长控件是例外情况，如列表视图、树形视图

（Tree）和多行编辑框。]

滚动条

●滚动条仅用于滚动[使用滑块或微调框来设置数值。]

●使滚动条足够长，保证有可用的滑块。没有滑块的滚动条不便于使用。

二、其他具体细节约定

字体

●字体统一使用以下设置：

Charset = GB2312_CHARSET

Name = '宋体'

Size = 9

Color = clWindowText

颜色

●使用系统颜色

●根据内容而不是外观来选择系统颜色[一般文字较多文本，使用白色背景

（Background=White），黑色字体（Color=black）]

●不要用颜色作为传递消息的唯一方式* 不依赖于对颜色的区分可以增强程序对色盲用

户的可访问性，并且使程序可运行在单色显示器上。

文本

●避免不必要的缩写词 [要么给文本更多的空间，要么改写文本使其占用更少的空间，

缩写词使文本不易理解。]

●避免复杂的标号 [尽量采用简单的标点，如句号、逗号、问号，以及破折号。避免使

用分号、感叹号、圆括号、括号，等等。]

●避免不好的背景 [将文本放在实地、颜色适中的背景上，确保在文本和背景之间存在

良好的对比。]

Web界面设计规范方案

Web应用界面设计规范（Design Specific ation for Web UI）主讲人：ARay 目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。到了地铁站，发现公交卡没有钱了。无奈之下只能去排队买票。排了3趟地铁，终于到公司了，但是你却迟到了。结果：尽管你已经非常努力，但是你还是迟到了。那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？ ②什么是用户体验

用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种

软件结构设计规范模板

软件结构设计规范

精选编制：审核：批准：

目录 1.简介 (6) 1.1.系统简介 (6) 1.2.文档目的 (6) 1.3.范围 (6) 1.4.与其它开发任务/文档的关系 (6) 1.5.术语和缩写词 (6) 2.参考文档 (8) 3.系统概述 (9) 3.1.功能概述 (9) 3.2.运行环境 (9) 4.总体设计 (10) 4.1.设计原则/策略 (10) 4.2.结构设计 (10) 4.3.处理流程 (10) 4.4.功能分配与软件模块识别 (11) 5.COTS及既有软件的使用 (12) 5.1.COTS软件的识别 (12) 5.2.COTS软件的功能 (12)

5.3.COTS软件的安全性 (12) 5.4.既有软件的识别 (12) 5.5.既有软件的功能 (13) 5.6.既有软件的安全性 (13) 6.可追溯性分析 (14) 7.接口设计 (15) 7.1.外部接口 (15) 7.2.内部接口 (15) 8.软件设计技术 (16) 8.1.软件模块 (16) 8.2.数据结构 (16) 8.3.数据结构与模块的关系 (16) 9.软件故障自检 (17)

1.简介 1.1.系统简介提示：对系统进行简要介绍，包括系统的安全目标等。 1.2.文档目的提示：软件结构设计的目的是在软件需求基础上，设计出软件的总体结构框架，实现软件模块划分、各模块之间的接口设计、用户界面设计、数据库设计等等，为软件的详细设计提供基础。软件结构设计文件应能回答下列问题：软件框架如何实现软件需求；软件框架如何实现软件安全完整度需求；软件框架如何实现系统结构设计；软件框架如何处理与系统安全相关的对软/硬件交互。 1.3.范围 1.4.与其它开发任务/文档的关系提示：如软件需求和界面设计文档的关系 1.5.术语和缩写词提示：列出项目文档的专用术语和缩写词。以便阅读时，使读者明确，从

民用建筑设计规范模板

民用建筑设计规范

民用建筑设计规范 1 建筑地面形式 1.1 平坡式≤5% 1.2 台阶式≥8% 1.3 混合式 2 建设用地适宜规划坡度 2.1 住宅用地0。2%-25% 2.2 道路用地0。2%-8% 2.3 公共设施用地最小坡度0.2% 最大坡度20% 2.4 (基地地面坡度不应小于0.3%; 地面坡度大于8%时应分成台地) 3 消防通道宽度(高层建筑防火规范) 3.1 4M 4M 距建筑物>5M 4 建筑物层数的限制 4.1 托儿所、幼儿园的儿童用房 4.1.1 不准设于4层 4.1.2 大于等于4班需独立设置 4.1.3 小于3班可设于其它建筑物内, 但一定要有独立的出口 4.1.4 不准设置于地下室半地下室 4.2 高层的人流集中的用房----大会仪, 多功能厅, 舞厅等 4.2.1 宜设置在123层 4.2.2 设在其它楼层需满足 4.2.2.1 《=400m

4.2.2.2 两个出口 4.2.2.3 设置阻燃材料 4.2.2.4 自动灭火系统 4.3 中小学教学楼要求 4.3.1 小学教学楼少于四层 4.3.2 中学教学楼小于五层 4.4 住宅 4.4.1 16m距离室外地平需设电梯 4.5 学校宿舍 4.5.1 21m需设电梯 4.5.2 层高单层床2。8m,双层床3。6米最小3。4m 5 建筑层高要求 5.1 室内净高限制层高: 《住宅设计规范》2.0.10层高上下两层楼面或楼面与地面之间的垂直距离。室内净高: 《住宅设计规范》 2.0.11楼面或地面至上部楼板底面或吊顶底面之间的垂直距离。 3.6.1普通住宅层高不宜高于2.8m。*《住宅设计规范》3.6.2房、厅净高≥2.4m, 局部≥2.1m( 不超过面积的1/3) *《住宅设计规范》3.6.3利用坡屋顶内作臥室、厅, 其1/2面积净高应≥2.1m。3.6.4厨房、卫生间净高≥2.2m。3.6.5厨房、卫生间排水横管下净距≥1.9m且不影响门、窗。《托儿所、幼儿园建筑设计规范》3.1.5生活用房的室内净高不应低于: 活动室、寝室、乳儿室 2.8m, 音乐活动室3.6m。《中小学校建筑设计规范》5.2.2学校主要房间的

web功能界面设计规范

Web页面通用规范XXXX软件技术有限公司

修订记录

目录 WEB页面通用规范 (1) 1引言 (1) 1.1目的 (1) 1.2范围 (1) 2一般页面功能说明 (1) 2.1新增 (1) 2.2修改 (1) 2.3删除 (1) 2.4查询 (2) 2.5取消 (2) 2.6提交 (2) 2.7重置 (2) 2.8返回 (2) 2.9分页 (2) 2.10全选 (3) 3一般页面规则说明 (3) 3.1默认值 (3) 3.2必填项 (3) 3.3界面传递 (3) 3.4窗口嵌套 (3) 3.5输入框 (4) 4页面元素交互 (4) 4.1操作结果确认 (4) 4.2其他规则 (4)

1 引言 1.1 目的本文用于规范我公司所开发的产品中对于页面的通用需求设计工作，明确在设计中所要遵循的准则和方法，web页面中各个通用功能元素的规格要求，确保所实现的通用功能按钮在结构和功能上的统一，提升软件产品的品质。 1.2 范围本规范适用于公司所有的软件产品。 2 一般页面功能说明 2.1 新增当新增一条或多条记录，要求： ●新增的记录必须排在首页首行； ●必填项字段必须有特殊标示； ●提交时需对必填项字段进行重复值、空值（空格）判断； ●新增内容提交失败后，须保留用户修改的内容，以便再次修改提交； ●新增成功后必须有成功提示。 2.2 修改当进行单条或多条记录的修改时，要求： ●如界面存在复选按钮，勾选多条记录进行修改时，每次只能对一条记录进行修改，默认修改内容为第一条的提示信息； ●必填项字段必须有特殊标示； ●修改后加载的内容应为的实际内容，而不再为默认值； ●修改完成后须回到原记录所在位置，且刷新显示修改后的值； ●修改内容提交失败后，须保留用户修改的内容，以便再次修改提交； ●在查询条件下修改后返回，如不满足查询条件则不显示； ●需对主标识字段进行重复值、空值（空格）判断； ●修改成功后必须有成功提示。 2.3 删除当删除一条或多条记录，要求：

施工图设计规范模板

施工图设计规范

前言在室内设计工作的过程中，施工图的绘制是表示设计者设计意图的重要手段之一，是设计者与各相关专业之间交流的标准化语言，是控制施工现场能否充分正确理解消化并实施设计理念的一个重要环节，是衡量一个设计团队的设计管理水平是否专业的一个重要标准。专业化、标准化的施工图操作流程规范不但能够帮助设计者深化设计内容，完善构思想法，同时面对大型公共设计项目及大量的设计定单行之有效的施工图规范与管理亦可帮助设计团队在保持设计品质及提高工作效率方面起到积极有效的作用。本书是以制图标准为基础，结合具体工程实例书写而成。书中内容更贴近于实际工程，对于图样画法的基础与理论读者可参见相关专业书籍。书中除涉及施工图构成的一些基本元素外，还对施工图的前期规划，绘制过程中的深化设计，以及施工图纸如何与施工现场衔接，和后期竣工图文件归档均作了一定的描述。另外书中还针对计算机绘图方式与制图标准的结合作了具体的描述，特别是模型空间与布局空间相互转换的绘图方法不但方便平面图的修改，提高工作效率，还能够在保证图纸的一致性以及图层管理，比例输出等方面起到重要作用。书中所附光盘内图纸均含标准图层。符号在布局空间内按1：1比例绘制，所制成的标准图按图幅规格在布局空间内可直接调用。图例也分别在模型空间与布局空间内按比例绘制，均可直接调用。写此书的目的一方面的对于以往学习工作过程中积累的关于室内设计施工图方面的知识经验作一次较详尽的梳理，另一方面希望起到抛砖引玉的作用，把自己一些浅薄的

认知以书面的形式与同道做一个交流，希望大家批评指正，以期引起专家同道对室内设计专业制图更深层次的关注。目录一、图纸幅面规格二、符号的设置三、材质图例的设置四、尺寸标注与文字标注的设置五、线型与笔宽的设置六、电脑图层的设置七、比例的设置八、图面构图的设置九、施工图编制的顺序十、图表十一、平、立、剖面图及节点大样图的绘制及相关标准十二、施工图在各设计阶段应注意的事项十三、施工图与现场深化设计十四、施工图的归档与分类十五、关于布局空间与模型空间在实际绘图中的应用十六、施工图工程实例宾馆类：天骄宾馆办公空间：商务部会议室

Web界面设计规范

Web应用界面设计规范（Design Spe cification for Web UI）主讲人：ARay 目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。到了地铁站，发现公交卡没有钱了。无奈之下只能去排队买票。排了3趟地铁，终于到公司了，但是你却迟到了。结果：尽管你已经非常努力，但是你还是迟到了。那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？ ②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。

表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。

硬件设计文档规范 -硬件模板

SUCHNESS 硬件设计文档型号：GRC60定位终端编号：机密级别：绝密机密内部文件部门：硬件组拟制：XXXX年 XX月 XX日审核：年月日标准化：年月日批准：年月日

文档修订历史记录

目录 1系统概述 (3) 2系统硬件设计 (3) 2.1硬件需求说明书 (3) 2.2硬件总体设计报告 (3) 2.3单板总体设计方案 (3) 2.4单板硬件详细设计 (3) 2.5单板硬件过程调试文档 (3) 2.6单板硬件测试文档 (4) 3系统软件设计 (4) 3.1单板软件详细设计 (4) 3.2单板软件过程调试报告 (4) 3.3单板系统联调报告 (4) 3.4单板软件归档详细文档 (4) 4硬件设计文档输出 (4) 4.1硬件总体方案归档详细文档 (4) 4.2硬件信息库 (5) 5需要解决的问题 (5) 6采购成本清单 (5)

1系统概述 2系统硬件设计 2.1、硬件说明书硬件需求说明书是描写硬件开发目标，基本功能、基本配置，主要性能指标、运行环境，约束条件以及开发经费和进度等要求，它的要求依据是产品规格说明书和系统需求说明书。它是硬件总体设计和制订硬件开发计划的依据，具体编写的内容有：系统工程组网及使用说明、硬件整体系统的基本功能和主要性能指标、硬件分系统的基本功能和主要性能指标以及功能模块的划分等 2.2、硬件总体设计报告硬件总体设计报告是根据需求说明书的要求进行总体设计后出的报告，它是硬件详细设计的依据。编写硬件总体设计报告应包含以下内容：系统总体结构及功能划分，系统逻辑框图、组成系统各功能模块的逻辑框图，电路结构图及单板组成，单板逻辑框图和电路结构图，以及可靠性、安全性、电磁兼容性讨论和硬件测试方案等 2.3、单板总体设计方案在单板的总体设计方案确定后出此文档，单板总体设计方案应包含单板版本号，单板在整机中的位置、开发目的及主要功能，单板功能描述、单板逻辑框图及各功能模块说明，单板软件功能描述及功能模块划分、接口简单定义与相关板的关系，主要性能指标、功耗和采用标准 2.4、单板硬件详细设计在单板硬件进入到详细设计阶段，应提交单板硬件详细设计报告。在单板硬件详细设计中应着重体现：单板逻辑框图及各功能模块详细说明，各功能模块实现方式、地址分配、控制方式、接口方式、存贮器空间、中断方式、接口管脚信号详细定义、时序说明、性能指标、指示灯说明、外接线定义、可编程器件图、功能模块说明、原理图、详细物料清单以及单板测试、调试计划。有时候一块单板的硬件和软件分别由两个开发人员开发，因此这时候单板硬件详细设计便为软件设计者提供了一个详细的指导，因此单板硬件详细设计报告至关重要。尤其是地址分配、控制方式、接口方式、中断方式是编制单板软件的

WEB UI 设计规范

内蒙古万德系统集成有限公司 WEB UI设计(流程/界面)规范目录一：UI设计基本概念与流程................................................................................................................................................................................................................ - 3 - 1.1 目的......................................................................................................................................................................................................................................... - 3 - 1.2范围.......................................................................................................................................................................................................................................... - 3 - 1.3 概述......................................................................................................................................................................................................................................... - 3 - 二：UI界面用户体验设计原则与规范 ................................................................................................................................................................................................ - 4 - 1：应该遵循的基本原则 ............................................................................................................................................................................................................... - 4 - 2：页面外观规范........................................................................................................................................................................................................................... - 4 - ②宽带页面 ........................................................................................................................................................................................................................... - 5 - ③自适应 ............................................................................................................................................................................................................................... - 5 - ④其他页面 ........................................................................................................................................................................................................................... - 5 - 基本结构 ................................................................................................................................................................................................................................. - 6 - 页面版式： ............................................................................................................................................................................................................................. - 6 - 版块基本元素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。 .............................................................................................. - 6 - 版块组合形式 ......................................................................................................................................................................................................................... - 7 - 3：色彩规范................................................................................................................................................................................................................................... - 8 - 4：字体规范................................................................................................................................................................................................................................. - 10 - ①文字格式 .......................................................................................................................................................................................................................... - 10 - ②标题类 ............................................................................................................................................................................................................................. - 12 -

UI界面设计规范模板

UI设计(流程/界面)规范一：UI设计基本概念与流程 1.1 目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。 1.2范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 1.3 概述 UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。 1.4 基本介绍 A、需求阶段软件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人

用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。B、分析设计阶段通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。调研阶段需要从以下几个问题出发：用户对各套方案的第一印象用户对各套方案的综合印象用户对各套方案的单独评价选出最喜欢的选出其次喜欢的对各方案的色彩，文字，图形等分别打分。结论出来以后请所有用户说出最受欢迎方案的优缺点。所有这些都需要用图形表达出来，直观科学。

UI界面设计规范模板

UI设计(流程/界面)规范一：UI设计基本概念与流程 1.1 目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。 1.2范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。1.3 概述 UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI 设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。 1.4 基本介绍

A、需求阶段软件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。因此在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比她作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。 B、分析设计阶段经过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。调研阶段需要从以下几个问题出发：用户对各套方案的第一印象

Web页面设计规范

Web页面设计规范编号：版本号：受控状态：作者：分发号：

文档修改历史记录文档修改记录

目录 1引言6 1.1 目的 6 1.2 范围 6 1.3 缩略术语 6 1.4 参考资料 6 2WEB页面框架内容6 2.1 页面框架 6 2.2 页面布局 6 2.2.1 布局原则 6 2.2.2 布局要求7 2.2.2.1 页面分割7 2.2.2.2 页面结构8 2.2.2.3 页面展现9 2.2.2.4 页面美化10 2.3 页面字体11 2.4 边距11 2.5 表格12 2.6 段落排版13 2.7 Frame 13 2.8 其他页面元素14 3页面风格15 3.1 风格分类15 3.2 页面风格应用15

4WEB页面交互15 4.1 页面元素焦点切换16 4.1.1 信息填写16 4.1.2 鼠标交互响应16 4.2 页面信息交互18 4.2.1 操作结果确认18 4.2.2 其他规则18 4.3 页面信息提示19 4.4 键盘响应支持21 5WEB页面通用规范22 5.1 一般页面功能22 5.1.1 新增22 5.1.2 修改22 5.1.3 删除22 5.1.4 查询23 5.1.5 取消23 5.1.6 保存23 5.1.7 重置23 5.1.8 返回23 5.1.9 分页23 5.1.10 全选24 5.2 一般页面规则24 5.2.1 默认值 24 5.2.2 必填值 24

5.2.3 界面传递25 5.2.4 窗口嵌套25 5.2.5 输入框操作25 5.2.6 在线帮助功能25 5.2.7 菜单功能要求26 5.2.8 快捷键功能27 5.2.9 快捷键的限制27 5.2.10 页面的规范性28 5.2.11 系统易用性29 5.2.12 输入安全性要求30 5.2.13 独特性要求31 5.2.14 多窗口的应用与系统资源31 6页面编程技术使用规范32 6.1 页面元素命名32 6.2 DHTMLx控件35 6.3 Flex控件35 7页面资源规格说明35 7.1 图标35 7.2 图片36 7.3 多媒体 36 8附录37 8.1 基于DHX的CSS规格示例37 8.1.1 表格CSS示例 37 8.2 典型应用的页面示例37

web配置界面设计规范

竭诚为您提供优质文档/双击可除web配置界面设计规范篇一：web应用界面设计规范 web应用界面设计规范发布时间：20xx-10-1010:21:40来源：aRay-csdn评论：0点击：2402次【字号：大中小】qq空间新浪微博腾讯微博人人网豆瓣网百度空间百度搜藏开心网复制更多9主讲人：aRay 目录：一、软件界面规范的重要性及其目的；二、用户体验为何如此重要；三、w eb规范体系介绍；四、界面设计开发流程；五、应该遵循的基本原则；六、界面设计规范主讲人：aRay 目录：一、软件界面规范的重要性及其目的

二、用户体验为何如此重要三、web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。二、用户体验为何如此重要 ①日常生活中的遭遇 x员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。到了地铁站，发现公交卡没有钱了。无奈之下只能去排队买票。排了3

趟地铁，终于到公司了，但是你却迟到了。结果：尽管你已经非常努力，但是你还是迟到了。那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？ ②什么是用户体验用户体验（userexperience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。表现四：违背使用习惯。你按 F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。表现六：还有一种糟糕的用户界面，乍一看很厉害，实

建筑设计规范大全模板

建筑设计规范大全

建筑设计规范大全(电子版)摘录的三科作图题相关规范 -04-12 01:43三秦房产网建筑设计规范大全(电子版)摘录的三科作图题相关规范条文,欢迎随贴, 特别是场地设计方面的。。。通路出口距城市干道交叉路口红线转弯起点处不应小于70m。第5.4.4条风管不宜穿过防火墙和变形缝。如必须穿过时, 应在穿过防火墙处设防火阀; 穿过变形缝处, 应在两侧设防火阀。 <文化馆建筑设计规范> 远离污染源一、功能分区明确, 合理组织人流和车辆交通路线, 对喧闹与安静的用房应有合理的分区与适当的分隔; 二、基地按使用需要, 至少应设两个出入口。当主要出入口紧临主要交通干道时, 应按规划部门要求留出缓冲距离; 当文化馆基地距医院、住宅及托幼等建筑较近时, 馆内噪声较大的观演厅、排练室、游艺室等, 应布置在离开上述建筑一定距离的适当位置, 并采取必要的防止干扰措施三、舞厅应具有单独开放的条件及直接对外的出入口。

第3.3.1条学习辅导部分由综合排练室、普通教室、大教室及美术书法教室等组成。其位置除综合排练室外, 均应布置在馆内安静区。七、综合排练室的主要出入口宜设隔声门。一、美术书法教室宜为北向侧窗或天窗采光第3.1.3条文化馆设置儿童、老年人专用的活动房间时, 应布置在当地最佳朝向和出入安全、方便的地方, 并分别设有适于儿童和老年人使用的卫生间。第4.0.7条展览厅、舞厅、大游艺室的主要出入口宽度不应小于1.50m。第4.0.8条文化馆屋顶作为屋顶花园或室外活动场所时, 其护栏高度不应低于1.20m。 <商店建筑设计规范> 第2.1.3条大中型商店建筑应有不少于两个面的出入口与城市道路相邻接;或基地应有不小于1/4的周边总长度和建筑物不少于两个出入口与一边城市道路相邻接。第2.1.4条大中型商店基地内, 在建筑物背面或侧面, 应设置净宽度不小于4m的运输道路。基地内消防车道也可与运输道路结合设置。

WEB页面设计规范

Web页面设计规范 1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话，高度是612-615之间。就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象。页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏每个标准页面为A4幅面大小，即8.5X11英寸全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。二、120*60，这种广告规格主要用于做LOGO使用。三、120*90，主要应用于产品演示或大型LOGO。四、125*125，这种规格适于表现照片效果的图像广告。五、234*60，这种规格适用于框架或左右形式主页的广告链接。六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。八、88*31，主要用于网页链接，或网站小型LOGO。 ==========================================================================

UI设计规范说明介绍模板之欧阳歌谷创编

UI设计规范说明书欧阳歌谷（2021.02.01）修订历史记录日期版本说明作者 1前言 1.1文档简介本文档是对整个系统界面设计风格进行描述，和用户交互的最终界面在《详细设计说明书》中设计和解释。 1.2系统定义用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。 GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。 1.3编写目的

统一图形界面规范，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面，便于用户识别与使用。 2界面设计准则 Rules 2.1引言 Introduction 在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、风格、颜色、术语、提示信息等方面确保一致。 2.2主要内容 Content 2.2.1显示信息一致性原则坚持图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。明确用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。界面设计必须经过最终确认才能完成。 2.2.2布局合理化原则

应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。在一个窗口中按tab键，移动聚焦的顺序不能杂乱无章，tab的顺序是先从上至下，再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。布局力求简洁、有序、易于操作。 2.2.3鼠标与键盘一致性原则尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成，即设计的应用中还应加入一些必要的按钮和菜单项。但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，此类操作可适当增加操作按钮。 2.2.4向导使用原则对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。 2.2.5系统响应时间

电控柜设计规范模板

电控柜设计规范 1 元器件安装 1.1 前提: 所有元器件应按制造厂规定的安装条件进行安装。适用条件需要的灭弧距离拆卸灭弧栅需要的空间等, 对于手动开关的安装, 必须保证开关的电弧对操作者不产生危险 1.2 组装前首先看明图纸及技术要求 1.3 检查产品型号、元器件型号、规格、数量等与图纸是否相符1.4 检查元器件有无损坏 1.5 必须按图安装(如果有图) 1.6 元器件组装顺序应从板前视, 由左至右, 由上至下 1.7 同一型号产品应保证组装一致性 1.8 面板、门板上的元件中心线的高度应符合规定元件名称安装高度( m) 指示仪表、指示灯0.6-2.0 电能计量仪表0.6-1.8 控制开关、按钮0.6-2.0 紧急操作件0.8-1.6 组装产品应符合以下条件: 操作方便。元器件在操作时, 不应受到空间的防碍, 不应有触及带电体的可能。维修容易。能够较方

便地更换元器件及维修连线。各种电气元件和装置的电气间隙、爬电距离应符合4.4 条的规定。保证一、二次线的安装距离。 1.9 组装所用紧固件及金属零部件均应有防护层, 对螺钉过孔、边缘及表面的毛刺、尖锋应打磨平整后再涂敷导电膏。 1.10 对于螺栓的紧固应选择适当的工具, 不得破坏紧固件的防护层, 并注意相应的扭距。 1.11 主回路上面的元器件, 一般电抗器, 变压器需要接地, 断路器不需要接地, 下图中为电抗器接地。 1.12 对于发热元件(例如管形电阻、散热片等) 的安装应考虑其散热情况, 安装距离应符合元件规定。额定功率为75W 及以上的管形电阻器应横装, 不得垂直地面竖向安装。下图为错误接法。

一个Web系统OA界面设计实施方案和开发

一个Web系统OA界面设计和开发早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念.时至今日，随着计算机和网络地不断普及，社会信息化程度日益加深，用户和市场地不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户地个人软件，还是企业应用地大型系统，界面设计在系统构建中都成为了一个非常重要地方面. 但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配地一席之地，并且在企业运作和协调中也没有形成成熟地模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨地一个问题. 我写这篇文章，主要内容是我参加一个面向质检行业地Web系统界面设计和开发工作地过程，包括其间地一些构思和想法；希望能和大家一起探讨一下这个问题，供大家参考. 另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计地文章，我会尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计地内容，请大家辨析清楚，欢迎指正. 1.工作流程下图，是整个开发过程中与界面设计相关地主要流程工作.

从最初需求分析开始，我就加入项目，自始自终参加整个开发过程. 在需求分析阶段，参与了对客户地访问和调研；在概要设计阶段，参与了部分系统设计分析工作；在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；在代码开发阶段，参与了系统表现层地设计开发. 2.需求分析在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研. 主要包括以下内容 ·受众用户群调查 ·系统使用环境调查 ·受众用户使用习惯调查 ·用户对旧版本软件使用情况调查这一阶段，由于成本原因，我并没有直接访问客户进行调查.工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研.另外，公司经验丰富地客服人员和市场人员，也是非常重要地需求来源之一. 本系统地客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有.对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良地环境.在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作.对本系统地前代使用，最主要意见是使用困难，不方便. 还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大地用户难以看清密集地较小文字等等. 3.界面设计原则在概要设计阶段，根据需求阶段地调研结果，我整理了系统界面设计地基本原则.因为在代码开发阶段，很多时候界面地具体制作是由开发人员直接写代码，因此必须确定一定地原则和规范，以保证系统界面地统一. 一般适用原则 ·简单明了原则：用户地操作要尽可能以最直接最形象最易于理解地方式呈现在用户面前.对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能地符合用户对类似系统地识别习惯. ·方便使用原则：符合用户习惯为方便使用地第一原则.其它还包括，实现目标功能地最少操