CMMIENGC03UI设计规范Word格式.docx
《CMMIENGC03UI设计规范Word格式.docx》由会员分享，可在线阅读，更多相关《CMMIENGC03UI设计规范Word格式.docx（15页珍藏版）》请在冰豆网上搜索。
应使软件启动封面最终为高清晰度的图像，如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式，并且对选用的色彩不宜超过256色，最好为216色安全色。
软件启动封面大小多为主流显示器分辨率的1/6大。
如果是系列软件将考虑整体设计的统一和延续性。
在上面应该醒目的标注制作或支持的公司标志、产品商标，软件名称，版本号，网址，版权声明，序列号等信息，以树立软件形象，方便使用者或购买者在软件启动的时候得到提示。
插图宜使用具有独立版权的，象征性强的，识别性高的，视觉传达效果好的图形，若使用摄影也应该进行数位处理，以形成该软件的个性化特征。
（2）软件框架设计
软件的框架设计就复杂得多，因为涉及软件的使用功能，应该对该软件产品的程序和使用比较了解，这就需要设计师有一定的软件跟进经验，能够快速的学习软件产品，并且在和软件产品的程序开发员及程序使用对象进行共同沟通，以设计出友好的，独特的，符合程序开发原则的软件框架。
软件框架设计应该简洁明快，尽量少用无谓的装饰，应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮，菜单，标签，滚动条及状态栏预留位置。
设计中将整体色彩组合进行合理搭配，将软件商标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用心理。
（3）软件按钮设计
软件按钮设计应该具有交互性，即应该有3到6种状态效果：
点击时状态；
鼠标放在上面但未点击的状态；
点击前鼠标未放在上面时的状态；
点击后鼠标未放在上面时的状态；
不能点击时状态；
独立自动变化的状态。
按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，功能差异大的按钮应该有所区别。
（4）软件页面设计
软件面板设计应该具有缩放功能，面板应该对功能区间划分清晰，应该和对话框，弹出框等风格匹配，尽量节省空间，切换方便。
（5）菜单设计
菜单设计一般有选中状态和未选中状态，左边应为名称，右边应为快捷键，如果有下级菜单应该有下级箭头符号，不同功能区间应该用线条分割。
（6）标签设计
标签设计应该注意转角部分的变化，状态可参考按钮。
（7）图标设计
图标设计色彩不宜超过64色，大小为16x16、24x24、32x32、48x48四种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小的范围表现出软件的内涵，所以很多图标设计师在设计图标时使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出了许多精彩图标。
（8）滚动条及状态栏设计
滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计，应该有上下箭头，滚动标等，有些还有翻页标。
状态栏是为了对软件当前状态的显示和提示。
（9）安装过程设计
安装过程设计主要是将软件安装的过程进行美化，包括对软件功能进行图示化。
（10）包装及商品化
最后软件产品的包装应该考虑保护好软件产品，功能的宣传融合于美观中，可以印刷部分产品介绍，产品界面设计。
2遵循一致的准则，确立标准并遵循
控件使用，提示信息措辞，颜色、窗口布局风格，需要遵循统一的标准，做到真正的一致。
这样得到的好处：
1.使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解
2.降低培训与技术支持成本，技术支持人员不会费力逐个指导。
3.给用户统一感觉，不觉得混乱，心情愉快，操作方便。
程序/步骤：
1.美工与项目组有经验人员，确立UI规范：
2.美工提供色调配色方案，提供整体页面资源文件
3.界面控制程序人员、用户体验人员提出合理统一使用的控件库。
参考标准界面使用规范：
4.控件功能遵循行业标准
5.控件样式在允许的范围内可以统一修改其样式、色调
6.参考其他软件先进操作，提取对本项目有用的功能，但绝对不能盲从，漫无目的。
7.根据需要，设计特殊操作控件，准则为：
简化操作、达到一定功能目的
8.界面实施人员与美工商榷控件可实现性,（如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱）。
重复叠代1至8的工作步骤。
9.建立合理化文档《UI设计说明书》描述上述规范，
10.强行界面设计者理解之，并作为开发准则，
11.QA人员进行监控开发人员是否遵循，及时告诫开发人员。
3颜色使用恰当，遵循对比原则：
1.统一色调，针对软件类型以及用户工作环境选择恰当色调：
如：
安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等，整个界面色彩尽量少的使用类别不同的颜色
2.如果客户未规定系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表
3.色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符：
包括?
、!
、※，以及图标等
4.颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试
5.遵循对比原则：
在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。
除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。
6.色表，具体标准参考美术学统计学术标准。
色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、布局，对话窗体调色起到有章可循的作用。
4资源
一个人机交互界面，少不了图标以及指示图片、底图等。
1.需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考13图标设计规范
2.有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格
3.图标背景应该融于底图,低对比，图标背景使用的颜色控制在3种之内
4.图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出无法直观联想的图案。
5.鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4种不同的样子。
5字体
使用统一字体，字体标准的选择依据操作系统类型决定。
1.中文采用标准字体，“宋体”，英文采用标准Arial不考虑特殊字体（隶书、草书等,特殊情况可以使用图片取代）,保证每个用户使用起来显示都很正常。
2.字体大小根据系统标准字体来，例如MSS字体8pt，宋体的小五号字（9pt）五号字（10.5pt）。
3.所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况
4.·
系统大小字体属性改变的处理，IE，FIREFOX等浏览器可设置大字体属性，很多界面设计者常常为这个恼火，如果设计时CSS定义的标准、完整，全部使用相对大小单位或绝对大小单位作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。
6文字表达
提示信息、帮助文档文字表达遵循以下准则：
1.口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字
2.断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段，
3.警告、信息、错误使用对应的表示方法
4.使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。
5.根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业术语；
若用户为青年，这可以语气亲切和蔼，老年用户则应该成熟稳重。
7控件风格，不使用错误控件，控件功能要专一
有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，不能不伦不类，杂乱无章
1.不要错误使用控件，例如：
使用Button样式做Table的功能，拿主菜单条样式显示版权信息，
2.统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映
3.一个控件只做单一功能，不复用
很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。
例如：
改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只有熟练用户才会使用，这种情况下解决方法：
1：
分组，使用双份控件.
2：
使用TABLE页，给用户很明显的视觉变化
8控件布局，窗口不拥挤，按功能组合控件
1、屏幕不能拥挤
拥挤的屏幕让人难以理解，因而难以使用。
试验结果（Mayhew,1992年）屏幕总体覆盖度不应该超过40％，而分组总覆盖度不应该超过62％。
让人看上去，不能太拥挤，也不能太松散。
整个项目，采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。
2、区域排列
1.一行控件，纵向中对齐,控件间距基本保持一致
2.行与行之间间距相同，靠窗体Border距离应大于行间间距（间距加边缘留空）。
3.当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。
3、数据对齐要适当
1.说明文字，中文版应使用中文全角冒号，纵向对齐时，并按冒号右对齐
2.纵向控件宽度尽量保持相通。
并左对齐。
例如金额等字符穿应根据小数点对齐，或者右对齐
4、有效组合
逻辑上相关联的控件应当加以组合，以表示其关联性，反之，任何不想关联的项目应当分隔开，在项目集合间，用间隔对其进行分组，或者使用方框划分各自区域。
5、窗口缩放时，控件位置、布局：
为了使界面不出现跑版或者难看的局面，解决方法：
1.固定窗口大小，不允许改变尺寸，
2.改变尺寸的窗口，在Onsize的时候做控件位置、大小的相应改变。
9快捷键
全局快捷键菜单中加以描述CTRL+XXX并入帮助列表。
快捷键写入帮助，特殊说明，并在使用培训时强调使用
使用非破坏性缺省按钮，回车、ESC键的正确使用一个窗体，有默认加速键，如回车表示激活当前窗口设置为default的按钮动作。
在调用default按钮动作和关闭动作时候，不应该做有破坏性的操作，避免用户错误操作产生危害程度，例如不能把删除数据等功能的按钮作为缺省按钮。
当用户要提交很多数据时，应该屏蔽esc，或者做退出提示，告知用户是否保存提交。
10用户交互
disable而不是notvisible
要使一个功能有时允许有时不允许用户使用，则这个控件的不能随便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后措手无策
窗口弹出位置要明显
点击一个控件，弹出窗口或者菜单，应该给人明显提示，最低要求是覆盖刚才点击的位置，让用户轻松跳转到新的界面。
3：
执行动作要提示
给用户一个视觉感受的同时，写程序的时候应该注意用户的交互感受，UI作为人机对话的工具，用户做了任何动作，应该给用户一个视觉或者听觉、触觉提示。
而且这个提示应该很明显，但不应提示过长，可以有以下几种方法：
当用户点击按钮等动作进行一个工作时：
弹出交互对话框让用户点击确认。
改变UI中控件参数提示：
（处理不用用户确认的提示，有一定延时，或者用户按键后自动清除。
听觉提示：
在有声卡，用户可以听到声音的时候，发出特殊声音提示。
一般作为重要提示的辅助。
声音不应过长，紧急错误提示应该短促，频率较高，成功提示应该舒缓，轻松。
等等……
11联机帮助
什么时候要帮助，什么时候不要帮助
1.系统默认、行业标准的控件操作不需要逐一描述，只需要对特殊控件加以描述
2.特殊操作、特殊功能界面，在界面上加控件直接连接到对应的HELP文件中
3.特殊设置详细，应该在界面上用简洁明了的语句说明。
帮助文档：
结构化，按功能模块划分
必须阐述功能通过什么方法可以在软件中实现
帮助文件是帮助用户更好的使用软件，措辞要恰当、简捷、通俗易懂,每一句话都应该有目的，帮用户解决问题
帮助文件不是广告、商业软件不允许打广告。
描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持，网址连接、信箱地址、电话号码绝对不允许无效。
12发行时阐明规则
对统一的东西进行逐一阐述，并加以典型描述，放入HELP和用户手册中，同时加有词汇表
13美工参与准则
1.美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出指导及帮助。
2.软件设计前期，美工参与需求了解，分析同类软件界面有缺点，提出主色调、典型界面风格、以及构思整个美术包装等。
3.界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。
4.程序开发过程中，提供标准风格的资源文件（css,jpg,gif,png,icon,cur等），并总结出统一风格的资源的设计过程，形成规范文档*.
5.产品化方面，协助制作帮助文件、网站风格以及参与制作，制作附带宣传图片、动画、产品包装、海报等。
14图标设计规范
数位设计引入了一种新的图标设计样式。
以下是设计和创建样式图标的具体规范。
图标样式应该有趣、色彩丰富且充满活力，因为现在的系统支持图标是32位图标，并且边缘非常平滑。
在矢量程序中绘制完每个图标后，再用AdobePhotoshop进行处理可使图像更加完美。
本规范是专为设计者编写的。
在创建图像时，建议您与高水平的图形设计者一起工作，尤其是具有丰富的矢量和3D软件经验的图形设计者。
图标样式特性
（1）色彩丰富，是对功能外观的补充。
（2）不同的角度和透视特性为图像增添了动态活力。
（3）元素的边角十分柔和，并略微有些圆滑。
（4）光源位于图标的左上角，同时有环绕光照亮图标的其它部分。
（5）渐变效果使图标具有立体感，进而使图标的外观更加丰满。
（6）投影使图标更具对比度和立体感。
（7）添加轮廓可使图像更清晰。
图标尺寸
图标有四种标准尺寸，建议使用以下四种尺寸：
（1）48×
48像素
（2）32×
32像素
（3）24×
24像素
（4）16×
16像素
图标色彩深度支持
ICO文件支持32位图标。
32位图标为24位图像加上8位alpha通道。
使图标边缘非常平滑，且与背景相融合。
每个图标应包含以下三种色彩深度，以支持不同的显示器显示设置：
1.24位图像加上8位alpha通道（32位）
2.8位图像（256色），加上1位透明色
3.4位图像（16色），加上1位透明色
投影
使用投影后，图标将更清晰且更具立体感。
可在Photoshop中实现这种效果。
若要为图像添加投影，请在Photoshop中双击图像的图层，并选择DropShadow。
然后将Angle更改为135，Distance更改为2，Size更改为2。
此时投影为75%不透明黑色。
轮廓
绘制图标时，为图像添加轮廓可使之更清晰，并可保证图像在不同背景色上都具有较好效果。
概念
设计图标时，请考虑以下因素：
使用已有概念以确保真实表达了用户的想法。
考虑图标在用户界面环境中以何种形式出现，以及如何作为图标集的一部分使用。
考虑图形的文化背景，避免在图标中使用字母、单词、手或脸。
必须用图标表示人或用户时，请尽可能使其大众化。
如果图标中的图像由多个对象组成，应考虑如何使图像尺寸更小。
建议在图标中使用的元素不超过三个。
对于16×
16的尺寸大小，还可考虑删除某些对象或简化图像使之更容易辨认。
透明工具
将设计好的图标存为GIF或PNG文件，这两种文件格式支持背景透明。
导入ICONWORKSHOP，分组生成不同尺寸，颜色深度的图标集。
15CSS选择符命名规范
B/S软件系统中所使用的基本样式类都定义在style.css文件中，存放在css/目录下。
Header
页面头部需要用到的几种样式，每种样式都已header做为名称的前缀。
headerLogo页头Logo
headerMiddle页头的中间部分
headerRight页头的右边部分样式
headerOperate页头右边的用户状态栏和常规链接栏
Menubar
Menubar菜单栏样式。
菜单样式都定义在css/menu.css中
Left
布局中左侧内容区，包含组织机构树。
相关样式都定义在该命名空间下。
leftTop左侧头部的样式
leftBottom左侧底部的样式
leftMenu左侧菜单
Menutree组织机构树
main
页面布局主要内容区域的样式。
和该区域有关的样式都定义在该命名空间下。
mainRoot主要内容区域的样式
mainContent主要内容区正文的样式
footer
页面布局中的页尾，包含状态栏、提示信息、版权，该区域有关的样式都定义在该命名空间下。
footerStates页尾提示信息
footerStatesImage页尾提示信息栏图标
footerCopyrights页尾版权和版本信息
dataTable
常规编辑修改表是页面中最常用到的一种控件。
像数据输入的表单、数据编辑的编辑表单、数据查看的表单等都属于dataTable。
命名空间如下：
dataTableContainer数据表格包含层，当限制宽高时会出现滚动条
listTable
listTable是页面中另外一种常见的样式。
在列表页中用来显示多条数据的表格都是listTable
listTableContainer常规列表包含层，当限制宽高时会出现滚动条
listTable_odd奇数行样式
listTable_even偶数行样式
operateBar
操作栏，用来显示增、删、改、查询、跳转等操作按钮，相关的类可以加不同的后缀
Button
按钮。
主要用来控制按钮的样式。
根据按钮不同分别在btn后边加按钮名称后缀来区分
btnUpdate更新按钮
btnPageup上一页的按钮
btnPagedown下一页的按钮
btnFirstpage第一页的按钮
btnLastPage最后一页的按钮
btnPage页码的按钮
btnShort短按钮
btnNormal普通按钮
btnLong长按钮
btnLonger较长的按钮
btnLongest最长的按钮
Error
错误信息的样式
errorDiv错误页的布局层
errorTable错误页的布局表格
errorNotes错误信息
Notes
系统的提示信息，可以出现在页面的任何位置
Input
这个样式用来定义input的显示样式。
根据显示控件的不同类别可以在后边加不同的后缀。
例如：
inputShort短输入框
inputLong长输入框
select
这个样式用来定义select的显示样式。
selectShort短选择框
selectLong长选择框
Calendar
日历的样式都定义在calendar.css中存放在CSS目录下,其命名空间都以calendar为前缀。
（注：
可编辑下载，若有不当之处，请指正，谢谢!
）
升级会员 