软件界面设计规范_V1.0 - 视觉部分

软件界面设计规范_V1.0

1概要

界面设计中一定要保持界面的一致性。

一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。

界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。

2色调风格

2.1色调：

软件界面设计中常用的主色调包括：蓝色、红色、绿色、黑色

蓝色：运用的行业较为广泛，如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。

红色：在政府单位运用比较多。

绿色：一般运用于教育、医疗、农林等行业。

黑色：能源、石油、房地产行业有时候会用中性的黑色作为主色调。

表现区：通常用浅色，如：白色、淡灰、或者淡蓝之类，因为大面积的文字信息在浅色上便于长时间阅读，不容易形成视觉疲劳。

2.2风格：

软件界面的风格通常比较简约。不同行业，使用的环境不同稍有差异。

3登录界面

基本元素：logo、系统名称、输入框、提交按钮。如下：

4页面逻辑结构

软件界面通常是上面这样的逻辑结构

首页：宏观预览各项设备管理数据，快速访问期望的数据功能

功能页面：查看某一功能模块的全部数据，查看某一对象的各类相关数据

弹出页面：填写和提交表单，对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。

5页面的基本属性

页面宽度：属性值为auto，最小值1024像素。默认状况下无横向滚动条。

注意：宽度、位置、边距为不可变数据

背景：页面整体为白色背景#FFFFFF 或者浅灰、浅蓝等，总之是非常接近白色的颜色。

注：白色为常用色值，对于特殊个性化页面可根据特殊要求变更色彩；背景色彩尽量少用饱和度高的颜色，减少用户视觉疲劳；背景图片遵循原则尽量选择可复用的图片，减少页面文件量

页面位置：居中

页面边距：上0px；下0px；左0 px；右0 px；

注意：有时候会专门设置一定数值的边距，这时通常

与模块间的间距相同，如上下左右都是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）必输项给出必输项标识（*）