软件界面设计规范V10视觉部分.docx

概要
界面设计中一定要保持界面的一致性。
一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
界面力求简洁明了,保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单,简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。
色调风格
色调：
软件界面设计中常用的主色调包括：蓝色、红色、绿色、黑色
蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。
红色：在政府单位运用比较多。
绿色：一般运用于教育、医疗、农林等行业。
黑色：能源、石油、房地产行业有时候会用中性的黑色作为主色调。
表现区:通常用浅色，如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读，不容易形成视觉疲劳。
风格：
软件界面的风格通常比较简约。不同行业，使用的环境不同稍有差异。
登录界面
基本元素：ｌogｏ、系统名称、输入框、提交按钮。如下：
首页
功能页面
功能页面
弹出页面
弹出页面
弹出页面
页面逻辑结构
软件界面通常是上面这样的逻辑结构
首页：宏观预览各项设备管理数据,快速访问期望的数据功能
功能页面：查看某一功能模块的全部数据,查看某一对象的各类相关数据
弹出页面：填写和提交表单，对功能中的某一单项数据进行增加/删除/查询/修改/审核／打印/导出等功能操作。
页面的基本属性
页面宽度：属性值为ａuto，。
注意：宽度、位置、边距为不可变数据
背景：页面整体为白色背景＃FFFFFF　 或者浅灰、浅蓝等，总之是非常接近白色的颜色。
注:白色为常用色值，对于特殊个性化页面可根据特殊要求变更色彩;背景色彩尽量少用饱和度高的颜色, 减少用户视觉疲劳;背景图片遵循原则尽量选择可复用的图片，减少页面文件量
页面位置：居中
页面边距：上 0px；下 ０ｐx;左 0 pｘ;右 ０ ｐx；
注意：有时候会专门设置一定数值的边距，这时通常
与模块间的间距相同，如上下左右都是5px。
导航菜单
常见的软件导航菜单有：左侧树状菜单、左侧伸缩菜单、winｄowｓ标准的定制导航
左侧树状菜单
适用于多级结构庞大的软件架构.
左侧手风琴式菜单
这种菜单适用于相对小规模的软件架构,简单舒适型。
规范
1)菜单深度一般不要超过两层
２) 导航如不是客户特别要求的定制，均制成类似以上的导航，其中默认分辨率为10２4*768。
一级菜单：图标３2ｐx＿32pｘ，字体１４px、不加粗、＃000０00;
二级菜单:图标20px_20px,字体12px、不加粗、＃３３3333;
Ｗindｏｗｓ标准的定制导航
页面结构
基本结构：标准头、内容区、标准尾
头部和底部具体的的内容不同的软件设置有所差异，如有些软件将菜单栏设在标准头里边,而有些软件则设置在内容区的左侧，但在不同的同时，有很多的地方是相同的。这里我们所说的就是共性。
标准头
ｌogo&系统名称 　｜ 基本操作区　 适用范围：所有常规页面　 尺寸:宽100％　高60px~80px
标准尾 
技术支持＆版本情况 　| 　版权信息 适用范围:所有常规页面 尺寸：宽1００％ 高３0px~5０px
内容区
版块元素之间间距为５px
200px
100%-200px-5
窗口风格
窗口风格要注意表现的一致性。
1)报错页面的风格一致，最好有统一的报错页面
2）类似功能的窗口打开的风格要一致
３）相同功能在不同模块的名称要一致
4)子窗体应尽量在显示在主窗体的左上或居中放置
５)弹出式窗口尽量在不借助滚动条的情况下显示所有内容
6）框边界要与背景有区分,边界要清楚。
７)弹出框的文字要有对齐,当不同长度文字的排版出现对对齐不一致的时候,上下文字必须统一右对齐， 输入框统一左对齐,如果文字对其空间不够，可考虑换行。
页面留白
无论是在页面中还是在弹出层中，内容距离上下左右的边距都不能太近，这样有助于用户的浏览，给用户浏览以喘息的空间。如下图：
顶部留白10px～１5pｘ,上下边距10ｐx～1５px,左右边距1５px~２0px，行与行输入框距离５ｐx～10