软件界面设计规范V10视觉部分.docx
- 文档编号:3889669
- 上传时间:2022-11-26
- 格式:DOCX
- 页数:12
- 大小:366.79KB
软件界面设计规范V10视觉部分.docx
《软件界面设计规范V10视觉部分.docx》由会员分享,可在线阅读,更多相关《软件界面设计规范V10视觉部分.docx(12页珍藏版)》请在冰豆网上搜索。
软件界面设计规范V10视觉部分
软件界面设计规范_V1.0
1概要
界面设计中一定要保持界面的一致性。
一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。
功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之内,复杂的功能操作使用操作向导来辅助客户完成。
2色调风格
2.1色调:
软件界面设计中常用的主色调包括:
蓝色、红色、绿色、黑色
蓝色:
运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。
红色:
在政府单位运用比较多。
绿色:
一般运用于教育、医疗、农林等行业。
黑色:
能源、石油、房地产行业有时候会用中性的黑色作为主色调。
表现区:
通常用浅色,如:
白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。
2.2风格:
软件界面的风格通常比较简约。
不同行业,使用的环境不同稍有差异。
3登录界面
基本元素:
logo、系统名称、输入框、提交按钮。
如下:
4
页面逻辑结构
软件界面通常是上面这样的逻辑结构
首页:
宏观预览各项设备管理数据,快速访问期望的数据功能
功能页面:
查看某一功能模块的全部数据,查看某一对象的各类相关数据
弹出页面:
填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。
5页面的基本属性
页面宽度:
属性值为auto,最小值1024像素。
默认状况下无横向滚动条。
注意:
宽度、位置、边距为不可变数据
背景:
页面整体为白色背景#FFFFFF或者浅灰、浅蓝等,总之是非常接近白色的颜色。
注:
白色为常用色值,对于特殊个性化页面可根据特殊要求变更色彩;背景色彩尽量少用饱和度高的颜色, 减少用户视觉疲劳;背景图片遵循原则尽量选择可复用的图片,减少页面文件量
页面位置:
居中
页面边距:
上0px;下0px;左0px;右0px;
注意:
有时候会专门设置一定数值的边距,这时通常
与模块间的间距相同,如上下左右都是5px。
6导航菜单
常见的软件导航菜单有:
左侧树状菜单、左侧伸缩菜单、windows标准的定制导航
6.1左侧树状菜单
适用于多级结构庞大的软件架构。
6.2左侧手风琴式菜单
这种菜单适用于相对小规模的软件架构,简单舒适型。
规范
1)菜单深度一般不要超过两层
2)导航如不是客户特别要求的定制,均制成类似以上的导航,其中默认分辨率为1024*768。
一级菜单:
图标32px_32px,字体14px、不加粗、#000000;
二级菜单:
图标20px_20px,字体12px、不加粗、#333333;
6.3Windows标准的定制导航
7页面结构
7.1基本结构:
标准头、内容区、标准尾
头部和底部具体的的内容不同的软件设置有所差异,如有些软件将菜单栏设在标准头里边,而有些软件则设置在内容区的左侧,但在不同的同时,有很多的地方是相同的。
这里我们所说的就是共性。
7.2标准头
logo&系统名称|基本操作区适用范围:
所有常规页面尺寸:
宽100%高60px~80px
7.3标准尾
技术支持&版本情况|版权信息适用范围:
所有常规页面尺寸:
宽100%高30px~50px
7.4内容区
版块元素之间间距为5px
8窗口风格
窗口风格要注意表现的一致性。
1)报错页面的风格一致,最好有统一的报错页面
2)类似功能的窗口打开的风格要一致
3)相同功能在不同模块的名称要一致
4)子窗体应尽量在显示在主窗体的左上或居中放置
5)弹出式窗口尽量在不借助滚动条的情况下显示所有内容
6)框边界要与背景有区分,边界要清楚。
7)弹出框的文字要有对齐,当不同长度文字的排版出现对对齐不一致的时候,上下文字必须统一右对齐,输入框统一左对齐,如果文字对其空间不够,可考虑换行。
9页面留白
无论是在页面中还是在弹出层中,内容距离上下左右的边距都不能太近,这样有助于用户的浏览,给用户浏览以喘息的空间。
如下图:
顶部留白10px~15px,上下边距10px~15px,左右边距15px~20px,行与行输入框距离5px~10px。
具体留白大小可根据软件的具体情况统一设定,整体保持统一性即可,不可同一软件中不同标准执行。
10字体规范
10.1字体:
软件中所用字体一般是电脑系统的默认字体。
汉字:
宋体、黑体、微软雅黑。
英文:
Arial,Verdana。
10.2字号:
软件中一般用14px和12px,14px文字主要用于一级菜单和板块的标题区标题,12px文字
10.3字体颜色:
通常情况:
黑色(#000000)
深色背景中:
白色(#ffffff)
白色背景中:
深灰(#333333)
表格中链接的默认色:
天蓝色(#0059D5)
链接的鼠标滑过hover色:
红色(#ff0000)
警示性文字的颜色:
红色(#ff0000)如:
必选项的提示符号“*“。
11页面元素
11.1按钮
按钮风格相同,大小相似,字体一致无效按钮要屏蔽。
高:
24像素,宽:
根据文字长度定;按钮的文字居中,字体统一大小12px、右、下、左的边距分别为:
6x,12x,6x,12px,按钮之间的间距统一为8px;
11.2表格
表格整体色调采用灰调,便于用户长时间操作部视觉疲劳,表格分为标题部分,主体内容部分。
标题部分应该用相应的颜色加以区别,表格隔行应用不同的颜色加以区别。
表格选中行应用色调区分,表格的行高为25像素。
表格四周的文字要有空隙padding属性2px。
不同表格之间必须有对齐。
如(图19)三个表格之间表格的顶部、底部都应该有对齐,表格之间应有空隙,空隙。
11.3输入框
11.3.1必输项
1)必输项中不可为空,不可输入空格
2)必输项给出必输项标识(*)
11.3.2字段长度
超过数据库规定长度时不允许输入
11.3.3多行文本输入、文本区域
尺寸:
自定义
内边距上下左右皆为5px
行距为1.5em
边框:
宽度1px,颜色#666666
11.3.4格式校验
1)身份证号、E-MAIL、邮箱等特定字段的格式要符合需求的规定
11.3.5日期格式
1)日期显示格式一致,如:
yyyy-mm-dd
2)使用日期控件,尽量不是手工录入
3)如需要限制日期选择范围,则超出范围的日期应为灰色不可选状态。
11.3.6特殊字符
1)输入区域输入特殊字符,插入数据库时不出错或提示不允许输入特殊字符。
特殊字符包括:
'"=~$%^%¥@等
11.3.7英文输入
英文输入不区分大小写,不可输入汉字、数字及特殊字符
11.3.8数值字段
只能输入+-0~9及功能键(BackSpace光标)
11.3.9字符字段
1)如果支持日韩文字,则要判断全角假名/半角假名
单行文本框/多行文本框
1)长度合适,可以容纳相应文字,但不能超过数据库该字段长度,最好将可以输入的最大字符数标在旁边。
建议单行文本框中当输入的字符超过一定长度时再输入无效;对于多行文本框给出最大字符数标识
11.4附件
1)可正常添加符合格式的附件
2)附件可正常打开和保存,附件名较长时可正常操作
3)直接输入错误的附件地址,保存时应给出提示信息
4)附件打开/保存到本地时,文件名要显示原文件文件名
11.5密码输入
1)需在需求中定义密码是否允许为空或空格;密码是否允许特殊字符;是否区分大小写,密码的可输入长度
2)程序中应给出文字说明密码的可输入长度入无效;对于多行文本框给出最大字符数标
11.6Tab标签
圆角5px背景色分设当前选中与非选中状态,边框#ccc
如:
11.7图片
格式:
原则上尽量使用png格式图片,特殊图片可使用JPG
质量:
图片画面显示清晰,不采用改变显示尺寸的放大或缩小。
图片画面(尤其是人物图像)不允许变形。
文件大小:
控制在40KB内为宜。
命名规则:
图片按照图片描述直接命名。
图片名称均由小写字母、数字和“_”组成,不能有空格或其
他字符,放置于images文件夹中。
11.8框架
当框架界面长度超过显示终端最大分辨率高度,提供下拉滚动条;
框架部分的设计应考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮、菜单、标签、滚动条及状态栏预留位置;
主菜单放在左边或上边,滚动条放在右边,以符合用户使用中的视觉流程。
列表均采用表格或框架呈现,默认状况下尽量不出现横向滚动。
12用户界面行为
12.1鼠标
1)鼠标为不可点击状态时显示箭头,可点击状态显示手型;
12.2系统响应时间
系统响应时间应该适中,响应时间过长,用户就会感到不安和沮丧,而响应时间过快也会影响到用户的操作节奏,并可能导致错误。
因此在系统响应时间上坚持如下原则:
响应时间长度界面设计:
1)0-5秒鼠标显示成为沙漏;
2)5秒以上显示处理窗口,或显示进度条;
3)一个长时间的处理完成时应给予完成警告信息。
12.3光标定位
1)打开新增(修改)页面时,光标初始定位在第一个待输入的文本区
2)因输入不正确提示用户重新输入时,光标默认focus在出错的输入区,并高亮全选该错误输入
3)若必输项未填写完毕就提交,应给出说明信息并能自动获得焦点
4)可写控件检测到非法输入后应给出说明并能自动获得焦点
12.4TAB键
1)界面支持键盘自动浏览按钮功能。
即TAB自动切换功能
2)Tab键的顺序与控件排列顺序要一致,一般情况下总体从上到下,同时行间从左到右的方式
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 软件 界面设计 规范 V10 视觉 部分
![提示](https://static.bdocx.com/images/bang_tan.gif)