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

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