界面设计规范上下文档格式.doc
- 文档编号:1476220
- 上传时间:2023-04-30
- 格式:DOC
- 页数:12
- 大小:46KB
界面设计规范上下文档格式.doc
《界面设计规范上下文档格式.doc》由会员分享,可在线阅读,更多相关《界面设计规范上下文档格式.doc(12页珍藏版)》请在冰点文库上搜索。
参考标准界面使用规范:
控件功能遵循行业标准,windows平台参见《Microsoft用户体验》(MSDN中有,中文已经翻译发行,项目组必须有一本)
控件的样式在允许的范围内可以统一修改其样式、色调。
参考其他软件先进操作,提取对本项目有用的功能,以使用,绝对不能盲从,漫无目的。
根据需要,设计特殊操作的控件,准则为:
简化操作、达到一定功能目的
界面实施人员与美工商榷控件可实现性,重复迭代上述工作。
建立合理化文档《UI标准》描述上述规范,并作为开发准则,SQA人员进行监控开发人员是否遵循,及时告诫开发人员。
(2)
(Color)颜色使用恰当,遵循对比原则:
a.统一色调,针对软件类型以及用户工作环境选择恰当色调:
如:
安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等
b.如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表
c.色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,如"
!
"
,"
?
着重号,以及图标等
d.颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试
e.遵循对比原则:
在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。
除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。
f.整个界面色彩尽量少的使用类别不同的颜色
itop色表
具体标准参考美术学统计学术标准。
色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。
2.3其他界面约定
(1)
(Resource)资源
一个多姿多彩的人机交互界面,少不了精美的光标图层、图标以及指示图片、底图等。
a.也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成标准,参考itop的outlookbar图标设计标准
b.有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格
c.底图应该融于背景图,使用浅色,低对比,尽量少的使用颜色。
d.图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件,绝对不允许画出默认奇妙的图案。
e.各种光标的样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手的形状就有4钟不同的样子。
《如何创建XP图标》
附件:
Itopoutlookhowto.doc描述itop项目中,outlookxp风格图标的制作方法
(Font)字体
使用统一字体,字体标准的选择依据操作系统类型决定。
中文采用标准字体,“宋体”,英文采用标准MicrosoftSansSerif不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。
字体大小根据系统标准字体来,例如MSS字体8磅,宋体的小五号字(9磅)五号字(10.5磅)。
所有控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况
ITop采用BCB,所有控件默认使用parentfont,不允许修改,这样有利于统一调整。
系统大小字体属性改变的处理。
Windows系统有个桌面设置,设置大字体属性,很多界面设计者常常为这个恼火,如果设计时遵循微软的标准,全部使用相对大小作为控件的大小设置,当切换大小字体的时候,相对不会有什么特殊问题。
但是由于常常方便使用点阵作为窗口设计单位,导致改变大字体后,出现版面混乱的问题。
这个情况下,应该做相应处理:
1:
写程序自动调节大小,点阵值乘以一个相应比例
2:
全部采用点阵作为单位,不理会系统字体的调节,这样可以减少调节大字体带来的麻烦。
BCB/DELPHI中多采用这种方法,但是必然结果是和系统不统一。
(3)
(Text)文字表达
提示信息、帮助文档文字表达遵循以下准则:
a.口语化、客气、多用您、请,不要用或少用专业术语,杜绝错别字
b.断句逗号句号顿号分号的用法,\r\n提示信息比较多的话,应该分段,
c.警告、信息、错误使用对应的表示方法
d.使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。
e.根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业属于,用户为儿童:
这可以语气亲切和蔼,老年用户则应该成熟稳重。
制定标准遵循之。
软件界面设计规范(下)
(4)
(STYLE)控件风格,不要使用错误控件,控件功能要专一
有设计好的同一风格的控件,如果没有能力设计出一套控件,则使用标准控件,绝对不能不伦不类,杂乱无章
a.不要错误使用控件,例如:
使用Button样式做TTable的功能,拿主菜单条显示版权信息,
统一类型的控件操作方式相同,例如一个控件双击可以执行某些动作,而同样控件,双击却没有任何反映
b.
一个控件只做单一功能,不复用
很多人为了写程序方便,喜欢把一个控件在不同情况下做不同功能用,这些对用户初次理解增加难度,只有用户熟悉后才能理解。
例如:
改变红色选项,左边的参数代表不同的设置,可能由于为了节省控件或者编程量,但是只有熟练用户才会使用,这种情况下解决方法:
分组,使用双份控件
使用TABLE页,给用户很明显的视觉变化
(5)
(ALIGN)控件布局,窗口不拥挤,按功能组合控件,
a.屏幕不能拥挤
拥挤的屏幕让人难以理解,因而难以使用。
试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40%,而分组钟覆盖度不应该超过62%。
让人看上去,不能太拥挤,也不能太松散。
整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不变的情况下,宁可留空部分区域,也不要破坏控件间的行间距。
b.区域排列
每一行控件,纵向中对齐,控件间距基本保持一致
行与行之间间距相同,靠窗体Border距离应大于行间间距(间距加边缘留空)。
当屏幕有多个编辑区域,要以视觉效果和效率来组织这些区域。
c.数据对齐要适当
说明文字,中文版应使用中文全角冒号,纵向对齐时,并按冒号右对齐。
纵向控件宽度尽量保持相通,并左对齐。
例如金额等字符穿应根据小数点对齐,或者右对齐
d.有效组合
逻辑上相关联的控件应当加以组合,以表示其关联性,反之,任何不相关的项目应当分隔开,在项目集合间,用间隔对其进行分组,或者使用方框划分各自区域。
e.窗口缩放时,控件位置、布局:
为了使界面不出现跑版或者难看的局面,解决方法:
固定窗口大小,不允许改变尺寸,
改变尺寸的窗口,在Onsize的时候做控件位置、大小的相应改变。
(6)
(TABORDER)TAB顺序
习惯用法,阅读顺序,从从左到右,从上到下
窗体中控件的Tab按键激活顺序,TabOrder,.BCB/DELPHI中使用窗体设计右键菜单选择taborder设置,VC中窗体RES编辑区域使用ctrl+D
(7)
(ShortcutKey&
Accelerator&
PopMenu)快捷键、加速键和弹出菜单
1.快捷键:
a.全局快捷键菜单中加以描述CTRL+XXX并入帮助列表。
b.快捷键写入帮助,特殊说明,并在使用培训时强调使用
2.加速键:
a.使用非破坏性缺省按钮,回车、ESC键的正确使用
一个窗体,有默认加速键,如回车表示激活当前窗口设置为default的按钮动作,esc表示关闭窗口。
在调用default按钮动作和关闭动作时候,不应该做有破坏性的操作,避免用户错误操作产生危害程度,例如不能把删除数据等功能的按钮作为缺省按钮。
当用户要提交很多数据时,应该屏蔽esc,或者做退出提示,告诫用户是否保存提交。
b.可接收动作控件必须拥有加速键,统一加速键描述(&
A)
为结合键盘使用,可操作控件都应该有加速键,加速键定义准则,为英文单词第一个字母,如果同一窗体重复则用第二个字母,以此类推,则加速方式为alt+这个加速键,用统一的方法标识在界面中,如XXX(A)或者wps的A.XXX英文可直接在字母下标识下划线Cancel,
对于无法像button一样显示快捷键的Edit等控件,则在Edit描述的Label中显示快捷键。
弹出菜单:
辅助菜单必须在可视化界面上拥有对应的按钮或者菜单选项。
由于辅助菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。
无法清晰的显示给用户,所以对应选项应该可以通过别的途径得到,例如界面上有相应控件或弹出右键菜单的按钮等。
(8)
(ACTION)用户交互
a.disable而不是notvisible
项目不可用时,灰掉而不是移走,用户才有形成精确的心理模型。
要使一个功能有时允许有时不允许用户使用,则这个控件的不能随便隐藏,应该使用disable属性进行表示,以免用户发现控件失踪后措手无策
b.窗口弹出位置要明显
点击一个控件,弹出窗口或者菜单,应该给人明显提示,最低要求是覆盖刚才点击的位置,让用户轻松跳转到新的界面。
c.执行动作要提示
给用户一个视觉感受的同时,写程序的时候应该注意用户的交互感受,UI作为人机对话的工具,用户做了任何动作,应该给用户一个视觉或者听觉、触觉提示。
而且这个提示应该行明显,但不应提示过长,可以有以下几种方法:
当用户点击按钮等动作进行一个工作时:
弹出交互对话框让用户点击确认。
改变UI中控件参数提示:
(处理不用用户确认的提示,有一定延时,或者用户按键后自动清除。
)
改变标题栏字符串,显示“信息:
提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。
3:
听觉提示:
在确定有声卡,用户可以听到声音的时候,发出特殊声音提示。
一般作为重要提示的辅助。
声音不应过长,紧急错误提示应该短促,频率较高,成功提示应该舒缓,轻松。
等等……
(HELP)联机帮助:
明确什么时候要帮助,什么时候不要帮助
a.系统默认、行业标准的控件操作不需要逐一描述,只需要对特殊控件加以描述
b.特殊操作、特殊功能界面,在界面上加控件直接连接到对应的HELP文件中
c.特殊设置详细,应该在界面上用简洁明了的语句说明,或者是好用Tiptool,并由第二步帮助
帮助文档:
结构化,按功能模块划分
必须阐述功能通过什么方法可以在软件中实现
帮助文件是帮助用户更好的使用软件,措辞要恰当、简捷、通俗易懂,每一句话都应该有目的,帮用户解决问题
帮助文件不是广告、商业软件不允许打广告。
描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持,网址连接、信箱地址、电话号码绝对不允许无效。
(9)发行时阐明规则
对统一的东西进行逐一阐述,并加以典型描述,放入HELP和用户手册中,同时加有词汇表
2.5界面设计样式
a.登录界面 (此处加入登陆界面图)
b.系统功能布局 菜单形式(此处加入界面图) 标签栏形式(此处加入界面图)
c.录入界面 (此处加入界面图)
d.查询界面 (此处加入界面图)
e.统计界面 (此处加入界面图)
2.6常见提示信息样式
a.当操作会带来严重后果时(默认按钮为“否“) (此处加入界面图)
b.当操作会带来一定后果时(默认按钮为“否“) (此处加入界面图)
c.当需征求操作者意愿时(默认按钮为“是“) (此处加入界面图)
d.当需提供操作者帮助时 (此处加入界面图)
e.当操作者操作有错时 (此处加入界面图)
f.当是一般提示时 (此处加入界面图)
2.7常见错误信息样式 (此处加入界面图)
2.8常见错误信息样式 (此处加入界面图)
常见图标设计制作规范
界面的图标设计规范图标样式应该有趣、色彩丰富且充满活力,因为现在的系统支持图标是32位图标,并且边缘非常平滑。
在矢量程序中绘制完每个图标后,再用AdobePhotoshop进行处理可使图像更加完美。
丰富的矢量和3D软件经验的图形设计者才能制作出漂亮且能表达出主题的图标。
结合经典的WindowsXP图标的样式,分析揣摩后才能为创建图标做好准备。
图标样式特性:
a.色彩丰富,是对WindowsXP外观的补充。
b.不同的角度和透视特性为图像增添了动态活力。
c.元素的边角十分柔和,并略微有些圆滑。
d.光源位于图标的左上角,同时有环绕光照亮图标的其它部分。
e.渐变效果使图标具有立体感,进而使图标的外观更加丰满。
f.投影使图标更具对比度和立体感。
g.添加轮廓可使图像更清晰。
h.日常对象(如计算机和设备)具有更现代化的个人外观。
图标尺寸
WindowsXP图标有四种尺寸,建议使用以下四种尺寸:
(1)48×
48像素
(2)32×
32像素 (3)24×
24像素 (4)16×
16像素图标色彩深度支持
WindowsXP支持32位图标。
32位图标为24位图像加上8位alpha通道。
使图标边缘非常平滑,且与背景相融合。
每个WindowsXP图标应包含以下三种色彩深度,以支持不同的显示器显示设置:
24位图像加上8位alpha通道(32位) 8位图像(256色),加上1位透明色 4位图像(16色),加上1位透明色调色板图标中使用的主要颜色。
对象的角度和分组
WindowsXP样式图标使用的透视网格:
并非所有对象使用16×
16的复杂图像都能获得较好效果。
某些对象通常以直观图像显示:
文档图标、符号图标(如警告或信息图标)、单一对象图标(如放大镜)除非创建重叠辅助对象可以更清楚地表达图标的含义,否则就可读性和完整性而言,还是应使用直观图像。
还应考虑如何按组查看图标,以便确定如何将对象分组。
投影:
使用投影后,WindowsXP图标将更清晰且更具立体感。
可在Photoshop中实现这种效果,若要为图像添加投影,请在Photoshop中双击图像的图层,并选择DropShadow。
然后将Angle更改为135,Distance更改为2,Size更改为2。
此时投影为75%不透明黑色。
轮廓:
绘制XP样式图标时,为图像添加轮廓可使之更清晰,并可保证图像在不同背景色上都具有较好效果。
概念设计图标时,请考虑以下因素:
使用已有概念以确保真实表达了用户的想法。
考虑图标在用户界面环境中以何种形式出现,以及如何作为图标集的一部分使用。
考虑图形的文化背景。
避免在图标中使用字母、单词、手或脸。
必须用图标表示人或用户时,请尽可能使其大众化。
如果图标中的图像由多个对象组成,应考虑如何使图像尺寸更小。
建议在图标中使用的对象不超过三个。
对于16×
16的尺寸大小,还可考虑删除某些对象或简化图像使之更容易辨认。
透明工具,将GifMovieGear(GMG)打开一个对话框,其中显示您的图标。
使用吸管工具单击图标的背景色。
此颜色将更改为暗黄绿色(或在GMG中选作透明背景色的颜色)。
重复所有4位和8位帧。
若要保存图标,请选择File->
SaveIconAs...。
创建工具栏图标,Windows工具栏图标除不使用投影之外,使用的样式与其它图标相同。
由于工具栏图标非常小,建议使用简单的图像。
如果以直观方式显示图像即可清晰地表达图标的含义,则不必使用其它复杂方式。
创建AVIWindowsXP使用8位AVI。
创建.avi文件的过程与创建图标的过程相同-在Photoshop中准备图像,然后将其拖动到GMG中。
请按以下指导创建8位图标。
若要使用GMG保存AVI,请转至File->
ExportAs->
AVIfile。
创建.avi文件时,请考虑以下因素:
使用品红(R255G0B255)作为背景透明色。
在Photoshop中,重要的一点是不要出现杂散像素
软件界面设计的基本原则
我们做界面设计的目的是去给用户的工作积极的支持而不是相反把无意义的东西强加于人。
界面在用户和他们要完成的任务之间应该是透明的,而且是高效、舒适、让人心情愉悦的。
下面介绍的是几个保证软件界面设计成功的基本原则。
简单:
不要在功能的可用性上妥协
保持界面简洁直观。
用户需要易于理解和操作的功能。
在一个组织糟糕的界面上,用户被大量高级功能所困扰,而无法直接的去使用最常用的功能。
而一个组织有序的界面会把用户要完成的任务结合到背景中去,让用户能更有效的操作。
最基本的功能应该让人可以立刻看到,而那些高级功能对于新用户来说可以不那么明显。
只有经过任务分析而确定的必要的功能才应该被放到界面上。
要让用户尽可能的使用最少的功能,经过最少的步骤完成他们的任务。
支持:
把控制权交给用户并且提供提示性帮助
把系统的控制权交给用户,允许他们使用在日常生活中习惯的各种步骤完成他们的任务,不要用你主张的所谓“正确”的操作步骤去人为的限制用户的操作。
系统应该允许用户建立并且维护自己的工作环境。
系统的当前状态和能够被使用的操作应该有明确的标示。
系统应该允许用户离开,并为他们保留离开时的工作状态。
提供有关联的工作环境会使用户对系统有稳定的感觉。
大部分用户都需要完成很多任务,在某些方面他们可能是专家,但在另外的方面,他们则可能是个新手。
要做到在用户需要的时候能及时提供帮助,系统就应该理解并预计到用户的目的,然后再协助他们更轻松的完成任务。
理想的帮助系统应该教给用户能够快速完成任务的知识。
帮助系统应该在用户选择要独立完成一些任务的时候教会他们。
相似:
建立在用户已有的经验上
允许用户根据以往的经验操作系统,特别是他们从现实世界中获得的经验。
这些经验的一小部分,被引用到交互界面中来,也将对用户完成大量的任务有很大帮助。
通过一次学习获得的概念和技术应该能被应用在各种环境下。
用户不应该为完成相似的任务而去学习新的东西。
在交互界面中采用用户已经在现实世界里学到的概念和技术,可以让他们立刻在计算机上开始工作并确保进展顺利。
隐喻的技巧曾经被用来让计算机世界里的事物与现实世界相对应,而在今天的界面设计中,隐喻已经逐渐不能满足需要了。
由于在视觉和交互技术上的进步,交互界面日趋接近人们的真实世界,对隐喻的依赖也越来越小了。
过去,当设计师不知道哪个方案最佳的时候总是遵循前后一致的原则。
选择用户已经理解的事物,保持概念的前后一致,也能够让界面更容易学习,更有效率,甚至更让用户心情舒畅。
要避免盲目的遵循一致性原则而忽略了去了解你的用户以及他们的任务和经验。
决定新的系统在哪些方面同以前保持一致性的之前,先去了解一下用户的需要,看看他们期望保留些什么东西。
确保用户在新的系统里有似曾相识的感觉才是设计一个真正直观的交互界面根本的目的。
显而易见:
让对象和操作都直观可见
只要有可能,就要使交互界面表现的和真实世界一样。
模仿真实世界和自然直接的交互方式能让交互界面更加直观,更易学易用。
利用用户在计算机领域外的经验的最早尝试是使用图标和窗口系统。
在我们逐渐趋向用真实世界的表示方法的时候,那些古老的表现方法将消失。
在一个面向对象的交互界面上,展现给用户的对象和概念都是与真实世界相同的。
例如我们的操作系统所提供的“回收站”,我们可以把没用的东西“扔”到里面。
对我们来说,它更象一个真实的垃圾筐而不仅仅是一个抽象的容器。
在需要的时候,我们甚至可以查看“回收站”里面都扔了些什么。
对系统的控制应该明晰可见,而且各种功能也应该是明确的。
对控制的可视化表现能够帮助用户理解操作规则,记住任务的步骤并且知道计算机正在做什么。
例如,我们使用计算机提供的电话功能的时候,电话键盘的图象明白的告诉我们可以象用真实的电话键盘一样使用它们。
允许用户直接去操作对象,尽量减少间接的操作步骤。
识别并使用一个物体,在真实世界中不是被分开的步骤。
同样的在计算机的操作中也没有必要把选择对象的步骤独立出来,因为选择的动作已经包含在拿起的动作中了。
三维图象的界面更容易实现直接的操作。
激励:
让操作是可以预期的同时也是可逆的
用户对每一个操作都期望得到预期的结果。
为了符合这些期望,设计师必须理解用户的任务、目的和思维模式。
使用用户熟悉的术语和图形,从而帮助用户弄明白计算机中的对象以及其间的相互关系和规则。
用户在进行一些尝试性操作的时候应该充满信心,他们知道自己可以去试着做些什么,然后就能看到结果,如果结果不满意还可以取消这个操作。
使用一个允许把错误操作撤消的界面,会让用户感觉很好。
即使是看上去最琐碎的操作,例如撤消选择或者移动对象,也应该是可逆的。
想象一下,当你花了几分钟的时间精心选择了一些文件,正准备把它们打包的时候丢掉了选择,而这个操作又无法撤消,你会有什么样的沮丧心情。
避免一次完成不同的操作,因为用户也许并不清楚那些副作用。
例如,如果一个用户选择了取消发送短信的操作,那么仅是发送的操作应该被取消,而不会附带着类似删除短信等其他操作。
把各个操作分开,而允许用户自己去定义操作的批处理。
满足:
创造一个有进展和
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 界面设计 规范 上下