界面设计规范.docx
- 文档编号:9902761
- 上传时间:2023-05-21
- 格式:DOCX
- 页数:16
- 大小:501.63KB
界面设计规范.docx
《界面设计规范.docx》由会员分享,可在线阅读,更多相关《界面设计规范.docx(16页珍藏版)》请在冰点文库上搜索。
界面设计规范
界面设计规范
版本号:
VXX版1.0
XX版
文档代号
更改说明:
序
版本号
编制人
校对人
完成日期
更改说明
01
V1.0
尚利辉
02
03
04
05
06
07
08
09
10
审核人(公司)
(公司审核人签字)
日期
年月日
批准人(公司)
(公司批准人签字)
日期
年月日
批准人(客户)
(客户批准人签字)
日期
年月日
目录
1前言1
1.1目的1
1.2范围1
1.3定义1
1.4参考资料1
2总体原则1
3统一约定1
3.1窗体1
3.2常用控件1
3.2.1按钮1
3.2.2TDataGrid2
3.2.3工具条2
3.2.4其它2
3.3必填项规则2
4一般界面样式3
4.1Grid样式3
4.2记录表单(LableEdit)样式3
4.2.1三列显示风格3
4.2.2二列显示风格4
4.3表格文档样式4
4.4分类树样式5
4.5分类列表明细样式6
4.6列表详细样式6
4.7分类树详细分页样式7
4.8对话框样式8
4.9记录表单的单据样式9
4.10数据引用对话框样式9
4.11列表样式10
4.12报表界面:
11
5其它约定11
5.1不可见控件11
1前言
1.1目的
1.2范围
1.3定义
[列出本文件中用到的专门术语的定义和外文首字母组词的原词组]
1.4参考资料
[列出用到的参考资料]
2总体原则
●简介、美观、大方(与其他业务系统风格保持一致)。
●界面设计后,开发人员在调试时,屏幕分辨率要为1024×768,且要在IE下进行调试。
尽量是数据项可以满屏显示。
3统一约定
3.1窗体
1.窗体或Panel的Color为白色(White)
2.默认字体:
宋体或Arial、小五号或9点、常规、黑色
3.弹出窗体Width<=800,Height<=600
3.2常用控件
3.2.1按钮
1.按钮大小:
如无特殊说明,所有按钮宽度为:
77,高度为:
21
2.按钮间距:
均为7
3.可使用的按钮类型:
统一使用TToolButton、TButton两种控件,不使用TBitBtn、TSpeedButton等控件。
3.2.2TDataGrid
1.Grid网格设置:
Ø选中ShowGroupPanel(编辑页面中的网格不要分组栏)
ØLookAndFeel设置为lfFlat
ØHeaderMinRowCount设置为2
ØHeaderColor设置为InactiveCaptionText
ØGroupPanelColor设置为BtnFace
ØGroupPanelFontColor设置为Gray
Ø页脚汇总(行数)
2.颜色设置:
Ø奇偶行颜色:
OnCustomDrawCell事件
ifnot(ASelectedorAFocusedorANode.HasChildren)then
begin
if(ANode.Indexmod2)=1then
AColor:
=Graphics.clCream;
end;
Ø选中行颜色:
选中Options->egoRowSelect
HideSelectionColor:
RGB(251,245,205)
HideSelectionTextColor:
RGB(0,24,126)
HighlightColor:
RGB(251,245,205)
HighlightTextColor:
RGB(0,24,126)
3.2.3工具条
ØTControlBar:
Align设置为“alTop”;Color设置为“White”
ØTToolBar:
选中AutoSize;EdgeInner设置为“esNone”;EdgeOuter设置为“esNone”
Ø数据集导航:
TBizToolBar
Ø打印工具条:
TDocViewBar
Ø工具条中按钮的摆放顺序要统一
3.2.4其它
1.DocView:
ViewAttributes->Style设置为vsFlat
2.Edit框:
取消Ctl3D选项
3.Tab页:
统一采用“TGraphicPageControl”控件
4.图标:
使用TImageList(注:
TBizImageList内的图标有排序的缺陷)
5.日期时间字段,象创建日期、制单日期等,统一精确到日期,不显示时分秒。
但象“修改时间”等,是需要到时分秒的。
6.参照输入时,点击下拉按钮总能列出数据,并注意调整下拉列表框的宽度
7.下拉列表:
取消Ctl3D选项、BevelKind设置为bkFlat
3.3必填项规则
界面中的必填项,在标题后面加“*”号,如“国家”为必填项,则标题为“国家*”
字段的LableEdit名称显示,当字段标签显示不下,可利用Hint来提示。
4一般界面样式
4.1Grid样式
生效放在首列,已使用放在末列
4.2记录表单(LableEdit)样式
4.2.1三列显示风格
考虑到在800*600分辨率下,三列LabelEdit正好可以将用户区域填满,使界面显得紧凑、整齐。
排列方法见表(2.7.1):
A.LableEdit尺寸:
高度21,宽度121。
LableEdit控件的Left属性值
第一列
第二列
第三列
Label
Edit
Label
Edit
Label
Edit
8
70
202
264
396
457
Label、LableEdit控件的Top属性值
Top属性
第一行
第二行
第三行
第四行
第五行
类推公式
Label
9
35
61
87
112
本行=上一行+26
Edit
5
31
57
83
109
表(2.7.1)
示列:
4.2.2二列显示风格
4.3表格文档样式
详细界面:
说明:
1.页签和工具栏表现同列表;
2.第一行第一列设置为行高3mm,列宽5mm;
3.第二行为表单标题(根据实际需求可没有),字体为宋体16,高度为自适应;
4.第三行行高2mm;
5.表格中的分块标题字体为宋体10(粗体、斜体),高度为6mm,背景色:
灰色-25%;
6.表格中的文字字体为宋体10(正常体),高度为6mm;
7.非空项以正蓝色标识;
8.字符串全是左对齐;数字全是右对齐。
9.最左侧第一列标题项左对齐;其它标题项居中对齐。
4.4分类树样式
注意:
没有向前向后等按钮。
4.5分类列表明细样式
左面列表不可编辑。
工具条的操作针对的总是右面的网格
4.6列表详细样式
4.7分类树详细分页样式
左面为树形,不可编辑。
详细TAB页是用来编辑修改的。
4.8对话框样式
运行功能时弹对话框,专用于初始化等功能。
(1).使用方法:
(2).提示信息:
(3).信息提示用词组合原则:
4.9记录表单的单据样式
4.10数据引用对话框样式
●以弹出窗口显示被引用的数据
●在引用窗口中根据情况设计查询条件
●弹出窗口中统一在右下角包含“确定、取消”按钮。
●右键菜单的条目如果太多(超过7条)可以根据需要去掉选择和取消选择选项
示例如下:
4.11列表样式
4.12报表界面:
说明:
第一行第一列设置为行高3mm,列宽5mm;
第二行为表单标题(根据实际需求可没有),字体为宋体16,高度为自适应;
第三行行高2mm;
字体大小=16粗体居中,高度为自适应;
表单字体大小=10;
表头信息背景色:
灰色-25%
5其它约定
5.1不可见控件
所有不可见控件(FuncBroker、InfoBroker、DataSetBroker、TQuery等),纵向排列、等间距中对齐;
所有不可见控件应放在窗体可见区域内。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 界面设计 规范