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

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