UI界面设计综合规范.doc

WI-PSMIS-DJ-B008 02.01.000（内部保密资料）ECE项目图形用户界面设计规范自8月 日起正式生效广州从兴电子开发 编制： 审批： 日 期修订版本描 述作 者-8-101.00.000初始版本苏寒目录1引言41.1目标41.2范围41.3参考资料42概述43标准53.1易用性53.2规范性53.3合理性63.4美观和协调性63.5独特征74设计规范74.1登录界面74.2首页74.3框架设计74.4按钮设计84.5对话框84.5.1通常对话框84.5.2有模式对话框94.5.3无模式对话框94.6面板设计94.7菜单设计94.8图标设计104.9滚动条104.10换肤功效105保留字105.1常见保留字10电力营销图形用户界面设计规范1 引言1.1 目标统一和规范软件界面。1.2 范围电力营销改造。1.3 参考资料2 概述界面是软件和用户交互最直接层，界面好坏决定用户对软件第一印象。而且设计良好界面能够引导用户自己完成对应操作，起到向导作用。同时界面如同人面孔，含有吸引用户直接优势。设计合理界面能给用户带来轻松愉悦感受和成功感觉，相反因为界面设计失败，让用户有挫败感，再实用强大功效全部可能在用户畏惧和放弃中付诸东流。现在界面设计引发软件设计人员重视程度还远远不够，直到最近网页制作兴起，才受到教授青睐。而且设计良好界面因为需要含有艺术美天赋而遭拒绝。微软企业和苹果企业是这方面典范。微软企业全部产品包含Office、Windows、MSN Messenger和其全部网站全部是我们追随对象。而且微软企业全部文档和产品介绍也是我们模拟和学习对象。苹果企业更是这方面鼻祖，它全部产品无不表露着它在这方面是无人能及。我们考虑GUI设计时应该遵照基础规则然后参考成熟设计，并能够添加自己独特征。在一个时期很流行界面风格在另外时期可能已经落后，所以我们要有创新和超前意识。3 标准3.1 易用性1. 完成同一功效或任务元素放在集中位置，降低鼠标移动距离。 2. 可写控件检测到非法输入后应给出说明并能自动取得焦点。 3. 复选框和单选框按着选择几率高底而前后排列。 4. 复选框和选项框要有默认选项，并支持Tab选择。 5. 选项数相同时多用选项框而不用下拉列表框。 6. 界面空间较小时使用下拉框而不用选项框。 7. 选项数较少时使用选项框，相反使用下拉列表框。 8. 专业性强软件要使用相关专业术语，通用性界面则提倡使用通用性词眼。3.2 规范性1. 完成相同或相近功效菜单用横线隔开放在同一位置。 2. 菜单前图标能直观代表要完成操作。 3. 菜单深度通常要求最多控制在三层以内。 4. 工具栏要求能够依据用户要求自己选择定制。 5. 相同或相近功效工具栏放在一起。 6. 工具栏中每一个按钮要有立即提醒信息。 7. 一条工具栏长度最长不能超出屏幕宽度。 8. 工具栏图标能直观代表要完成操作。 9. 系统常见工具栏设置默认放置位置。 10. 滚动条长度要依据显示信息长度或宽度能立即变换，以利于用户了解显示信息位置和百分比。 11. 状态条高度以放置五好字为宜，滚动条宽度比状态条略窄。 12. 菜单和工具条要有清楚界限;菜单要求凸出显示，这么在移走工具条时仍有立体感。 3.3 合理性1. 关键命令按钮和使用较频繁按钮要放在界面上注目标位置。 2. 错误使用轻易引发界面退出或关闭按钮不应该放在易点位置。横排开头或最终和竖排最终为易点位置。 3. 和正在进行操作无关按钮应该加以屏蔽。 4. 对可能造成数据无法恢复操作必需提供确定信息,给用户放弃选择机会。 5. 非法输入或操作应有足够提醒说明。 6. 对运行过程中出现问题而引发错误地方要有提醒，让用户明白错误出处，避免形成无限期等候。 7. 提醒、警告、或错误说明应该清楚、明了、合适。3.4 美观和协调性1. 长宽靠近黄金点百分比，切忌长宽百分比失调、或宽度超出长度。 2. 布局要合理,不宜过于密集，也不能过于空旷，合理利用空间。 3. 按钮大小基础相近，忌用太长名称，省得占用过多界面位置。 4. 按钮大小要和界面大小和空间要协调。 5. 避免空旷界面上放置很大按钮。 6. 放置完控件后界面不应有很大空缺位置。 7. 前景和背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常见色考虑假如使用其它颜色，主色要柔和，含有亲和力和磁力，果断杜绝刺目标颜色。 8. 大型系统常见主色有#E1E1E1、#EFEFEF、#C0C0C0等。 9. 界面风格要保持一致，字大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求地方。 10. 通常父窗体支持缩放时，子窗体没有必需缩放。 3.5 独特征4 设计规范4.1 登录界面应使软件开启封面最终为高清楚度图像，如软件开启封面需在不一样平台、操作系统上使用将考虑转换不一样格式，而且对选择色彩不宜超出256色，最好为216色安全色。软件开启封面大小多为主流显示器分辨率1/6大。假如是系列软件将考虑整体设计统一和延续性。在上面应该醒目标标注制作或支持企业标志、产品商标，软件名称，版本号，网址，版权申明，序列号等信息，以树立软件形象，方便使用者或购置者在软件开启时候得到提醒。插图宜使用含有独立版权，象征性强，识别性高，视觉传达效果好图形，若使用摄影也应该进行数位处理，以形成该软件个性化特征4.2 首页首页是用户成功登录后首先看到页面，应该能够显示全部和用户目前工作相关信息。这个页面应该是全部包含用户工作一个缩影或集成。这个页面最能够表现用户操作方便性和系统易操作性。4.3 框架设计软件框架设计就复杂得多，因为包含软件使用功效，应该对该软件产品程序和使用比较了解，这就需要设计师有一定软件跟进经验，能够快速学习软件产品，而且在和软件产品程序开发员及程序使用对象进行共同沟通，以设计出友好，独特，符合程序开发标准软件框架。软件框架设计应该简练明快，尽可能少用无谓装饰，应该考虑节省屏幕空间，多种分辨率大小，缩放时状态和标准，而且为未来设计按钮，菜单，标签，滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配，将软件商标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉步骤和用户使用心理4.4 按钮设计软件按钮设计应该含有交互性，即应该有多种状态效果：点击时状态；鼠标放在上面但未点击状态；点击前鼠标未放在上面时状态；点击后鼠标未放在上面时状态；不能点击时状态；独立自动改变状态。按钮应含有简练图示效果，应能够让使用者产生功效关联反应，群组内按钮应该风格统一，功效差异大按钮应该有所区分。按钮名称必需是保留字中定义词语。4.5 对话框4.5.1 通常对话框4.5.1.1 提醒如用户完成一项任务，提醒操作成功。通常在返回页面中提醒此信息。4.5.1.2 警告如用户输入了非法内容，提醒用户重新输入。以提醒语气，如：用户编号格式错误，请重新输入。4.5.1.3 确定在用户实施一个不可恢复动作时要让用户确定。以提问语气让用户确定操作，如：4.5.1.4 错误系统操作错误和程序运行错误。通常在目前页面中提醒此信息。4.5.2 有模式对话框给出一个确定任务。或是用户需要一段时间等候。如：计算电费和月初始化。此页面全部需要有一个“关闭”按钮。4.5.3 无模式对话框给出一个持久任务。用户在此界面需要深入操作或操作完成后要返回此页面。此页面全部需要有一个“关闭”按钮。提议尽可能不要使用此种对话框，因为这种对话框父窗口不好控制。4.6 面板设计面板是指编辑界面。面板应该对功效区间划分清楚，应该和对话框，弹出框等风格匹配，尽可能节省空间，切换方便。4.7 菜单设计每个菜单全部应该是一个单独按钮、图片、组合。一个菜单项显示、控制不依于其它菜单。菜单项不应该超出10个，菜单组要能够表现功效相同性和逻辑关系。每个菜单项名称要言简意赅，而且要专业。要有一定状态改变，如鼠标放上和离开。假如有必需要有一定提醒。鼠标形状最好能够变成hand形状。4.8 图标设计图标设计色彩不宜超出64色，大小为16x16、32x32两种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小范围表现出软件内涵，所以很多图标设计师在设计图标时使用简单颜色，利用眼睛对色彩和网点空间混合效果，做出了很多出色图标。4.9 滚动条4.10 换肤功效全部风格统一用CSS控制，严禁单独使用style。5 保留字这里讲保留字是用户界面上看到信息。保留字使用避免用户对操作产生二义性。能规范用户操作和统一设计风格。所以我们有必需约定用户界面词汇使用。5.1 常见保留字#名称说明1.确定用于用户确定。2.取消用于用户不确定。3.关闭关闭窗口，通常见于弹出窗口。4.返回返回列表页面。5.保留保留数据，停留在目前窗口6.保留并返回7.退出退出系统返回到登录页面。8.删除9.新建10.全选在列表框中11.反选12.查询“搜索”13.