您的位置: 首页 > 技术文档 > 网站建设 > 通用界面指南
Web设计里的软件工程思想 回到列表 网站设计的标准时代
 通用界面指南

作者: 时间: 2004-05-10 文档类型:转载 来自:蓝色理想

 一:遵循一致的准则,确立标准并遵循
无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致。
这样得到的好处:

1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解
2:降低培训、支持成本,支持人员不会行费力逐个指导。
3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加

做法:
项目组有经验人士,确立UI规范:
•美工提供色调配色方案,提供整体配色表
•界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范:

控件功能遵循行业标准,windows平台参见《Microsoft 用户体验》(MSDN中有,中文已经翻译发行,项目组必须有一本)
控件样式在允许的范围内可以统一修改其样式、色调
参考其他软件先进操作,提取对本项目有用的功能,以使用,绝对不能盲从,漫无目的。
根据需要,设计特殊操作控件,准则为:简化操作、达到一定功能目的

•界面实施人员与美工商榷控件可实现性,(如不实行此步骤,将会导致各自对对方工作不满意,也会产生不一致的混乱)。重复叠代上述工作。
•建立合理化文档《UI标准》描述上述规范,
•强行界面设计者理解之,并作为开发准则,
•SQA人员进行监控开发人员是否遵循,及时告诫开发人员。

二:(Color)颜色使用恰当,遵循对比原则:
1:统一色调,针对软件类型以及用户工作环境选择恰当色调:
如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等
2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表
3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,如"!","?"着重号,以及图标等
4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试
5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。
6:整个界面色彩尽量少的使用类别不同的颜色
itop色表
具体标准参考美术学统计学术标准。
色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

三:(Resource)资源
一个多姿多彩的人机交互界面,少不了精美的鼠标光标、图标以及指示图片、底图等。

1:也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成标准,参考itop的outlookbar图标设计标准
2:有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格
3:底图应该融于底图,使用浅色, 低对比,尽量少的使用颜色。
4:图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件,绝对不允许画出默认奇妙的图案。
5:鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手的形状就有4钟不同的样子。
如:《如何创建XP图标》http://www.microsoft.com/china/msdn.../winxpicons.asp
附件:Itop outlook howto.doc 描述itop项目中,outlookxp风格图标的制作方法

四:(Font)字体
使用统一字体,字体标准的选择依据操作系统类型决定。
中文采用标准字体,“宋体”,英文采用标准 Microsoft Sans Serif 不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。
字体大小根据系统标准字体来,例如 MSS字体8磅,宋体的小五号字(9磅)五号字(10.5磅)。
所有控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况
ITop采用BCB,所有控件默认使用 parent font,不允许修改,这样有利于统一调整。
•系统大小字体属性改变的处理。
Windows系统有个桌面设置,设置大字体属性,很多界面设计者常常为这个恼火,如果设计时遵循微软的标准,全部使用相对大小作为控件的大小设置,当切换大小字体的时候,相对不会有什么特殊问题。
但是由于常常方便使用点阵作为窗口设计单位,导致改变大字体后,出现版面混乱的问题。
这个情况下,应该做相应处理:
1:写程序自动调节大小,点阵值乘以一个相应比例
2:全部采用点阵作为单位,不理会系统字体的调节,这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法,但是必然结果是和系统不统一。

五:(Text)文字表达
提示信息、帮助文档文字表达遵循以下准则:

1:口语化、客气、多用您、请,不要用或少用专业术语,杜绝错别字
2:断句逗号句号顿号分号的用法,\r\n 提示信息比较多的话,应该分段,
3:警告、信息、错误 使用对应的表示方法
4:使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。
5: 根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业属于,用户为儿童:这可以语气亲切和蔼,老年用户则应该成熟稳重。制定标准遵循之。

六:(STYLE)控件风格,不要使用错误控件,控件功能要专一
有设计好的同一风格的控件,如果没有能力设计出一套控件,则使用标准控件,绝对不能不伦不类,杂乱无章
•不要错误使用控件,例如:
使用Button样式做TTable的功能,拿主菜单条显示版权信息,
•统一类型的控件操作方式相同,例如一个控件双击可以执行某些动作,而同样控件,双击却没有任何反映
•一个控件只做单一功能,不复用
很多人为了写程序方便,喜欢把一个控件在不同情况下做不同功能用,这些对用户初次理解增加难度,只有用户熟悉后才能理解。
例如

改变红色选项,左边的参数代表不同的设置,可能由于为了节省控件或者编程量,但是只有熟练用户才回使用,这种情况下解决方法:

1:分组,使用双份控件.
2:使用TABLE页,给用户很明显的视觉变化

七:(ALIGN)控件布局,窗口不拥挤,按功能组合控件,
1:屏幕不能拥挤
拥挤的屏幕让人难以理解,因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40%,而分组钟覆盖度不应该超过62%。
让人看上去,不能太拥挤,也不能太松散。
整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不变的情况下,宁可留空部分区域,也不要破坏控件间的行间距。

2:区域排列
一行控件,纵向中对齐, 控件间距基本保持一致
行与行之间间距相同,靠窗体Border距离应大于行间间距(间距加边缘留空)。
当屏幕有多个编辑区域,要以视觉效果和效率来组织这些区域。
3:数据对齐要适当
说明文字,中文版应使用中文全角冒号,纵向对齐时,并按冒号右对其,如图。
纵向控件宽度尽量保持相通。并左对齐。
例如金额等字符穿应根据小数点对齐,或者右对齐
4:有效组合
逻辑上相关联的控件应当加以组合,以表示其关联性,反之,任何不想光的项目应当风格开,在项目集合间,用间隔对其进行分组,或者使用方框划分各自区域。
例如: 以下界面,选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围,和入帐方式无关,
则应该修改为: 搜索方式和入帐方式调换位置。以免用户产生误解。
5:窗口缩放时,控件位置、布局:

为了使界面不出现跑版或者难看的局面,解决方法:
1:固定窗口大小,不允许改变尺寸,
2:改变尺寸的窗口,在Onsize的时候做控件位置、大小的相应改变。
BCB/DELPHI的VCL中,大部分控件有布局属性:
某些控件拥有alignment属性,可以用来做布局调节:TcustomPanel,Tmemo等,考左靠右靠上靠下以及撑满(Client)属性,用来根据版面自动调节。
大部分控件有属性Anchors,里面上下左右akLeft, akTop等如果为true,则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。

八:(TAB ORDER)TAB顺序
习惯用法,阅读顺序,从从左到右,从上到下
窗体中控件的Tab按键激活顺序,TabOrder,. BCB/DELPHI中使用窗体设计右键菜单选择taborder设置,VC中窗体RES编辑区域使用ctrl+D

九:(ShortcutKey & Accelerator& PopMenu)快捷键、加速键和弹出菜单
•快捷键:

1:全局快捷键菜单中加以描述 CTRL+XXX 并入帮助列表。
2:快捷键写入帮助,特殊说明,并在使用培训时强调使用

•加速键:

1:使用非破坏性缺省按钮,回车、ESC键的正确使用

一个窗体,有默认加速键,如回车表示激活当前窗口设置为default的按钮动作,esc表示关闭窗口。

在调用default按钮动作和关闭动作时候,不应该做有破坏性的操作,避免用户错误操作产生危害程度,例如不能把删除数据等功能的按钮作为缺省按钮。当用户要提交很多数据时,应该屏蔽esc,或者做退出提示,告诫用户是否保存提交。

2:可接收动作控件必须拥有加速键,统一加速键描述(&A)

为结合键盘使用,可操作控件都应该有加速键,加速键定义准则,为英文单词第一个字母,如果同一窗体重复则用第二个字母,以此类推,则加速方式为alt+这个加速键,用统一的方法标识在界面中,如XXX(A) 或者wps的 A.XXX 英文可直接在字母下标识下划线 Cancel,

对于无法像button一样显示快捷键的Edit等控件,则在Edit描述的Label中显示快捷键。

•弹出菜单

辅助菜单必须在可视化界面上拥有对应的按钮或者菜单选项。

由于辅助菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。无法清晰的显示给用户,所以对应选项应该可以通过别的途径得到,例如界面上有相应控件或弹出右键菜单的按钮等。

十:(ACTION)用户交互
1:disable而不是not visible

要使一个功能有时允许有时不允许用户使用,则这个控件的不能随便隐藏,应该使用disable属性进行表示,以免用户发现控件失踪后措手无策

2:窗口弹出位置要明显

点击一个控件,弹出窗口或者菜单,应该给人明显提示,最低要求是覆盖刚才点击的位置,让用户轻松跳转到新的界面。

3:执行动作要提示

给用户一个视觉感受的同时,写程序的时候应该注意用户的交互感受,UI作为人机对话的工具,用户做了任何动作,应该给用户一个视觉或者听觉、触觉提示。而且这个提示应该行明显,但不应提示过长,可以有以下几种方法:

当用户点击按钮等动作进行一个工作时:

1:弹出交互对话框让用户点击确认。

2:改变UI中控件参数提示:(处理不用用户确认的提示,有一定延时,或者用户按键后自动清除。)

如:改变标题栏字符串,显示“信息:提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。

3:听觉提示:

在确定有声卡,用户可以听到声音的时候,发出特殊声音提示。一般作为重要提示的辅助。声音不应过长,紧急错误提示应该短促,频率较高,成功提示应该舒缓,轻松。等等……

十一:(HELP)联机帮助:
什么时候要帮助,什么时候不要帮助

1:系统默认、行业标准的控件操作不需要逐一描述,只需要对特殊控件加以描述

2:特殊操作、特殊功能界面,在界面上加控件直接连接到对应的HELP文件中

3:特殊设置详细,应该在界面上用简洁明了的语句说明,或者是好用Tiptool,并由第二步帮助

帮助文档:

结构化,按功能模块划分

必须阐述功能通过什么方法可以在软件中实现

帮助文件是帮助用户更好的使用软件,措辞要恰当、简捷、通俗易懂,每一句话都应该有目的,帮用户解决问题

帮助文件不是广告、商业软件不允许打广告。描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持,网址连接、信箱地址、电话号码绝对不允许无效。

十二:发行时阐明规则
对统一的东西进行逐一阐述,并加以典型描述,放入HELP和用户手册中,同时加有词汇表


附录:
美工何时参与进来:

美工作为界面美化的主要人员,不但拥有艺术设计、包装设计的才能,还应该穿插整个项目,给界面程序设计人员提出系统参考意见。

1:软件设计前期,美工参与需求了解,分析同类软件界面有缺点,提出主色调、典型界面风格、以及构思整个美术包装等。

2:界面原型设计过程中,与开发人员共同修改、商榷最终表现样式,以及确立UI标准。

3:程序开发过程中,提供标准风格的资源文件(icon,cur,bmp等),并总结出统一风格的资源的设计过程,形成规范文档* .

4:产品化方面,协助制作帮助文件、网站风格以及参与制作,制作附带宣传图片、动画、产品包装、海报等。

出处:蓝色理想
责任编辑:Yahoo

相关文章 更多相关链接
重构、标准、布局
FLASH,你要我怎么跟你说!
建立无障碍网站的五大指南
商业网站竞争优势研究
如何雇用网站设计人员
作者文章 更多作者文章
ATI壁纸大赛 22000 元等你来
用 Photoshop CS 做“魔眼”
优派·生活真彩QQskin设计大赛
揭开SVCHOST.exe进程之谜
全球优秀广告设计赏析
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2