通用界面规范

规范

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

1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解

2:降低培训、支持成本,支持人员不会行费力逐个指导。

3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加

做法:

项目组有经验人士,确立UI规范:

·美工提供色调配色方案,提供整体配色表

·界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范:

控件功能遵循行业标准,windows平台参见《Microsoft 用户体验》(MSDN中有,中文已经翻译发行,项目组必须有一本)

控件样式在允许的范围内可以统一修改其样式、色调

参考其他软件先进操作,提取对本项目有用的功能,以使用,绝对不能盲从,漫无目的。

根据需要,设计特殊操作控件,准则为:简化操作、达到一定功能目的

·界面实施人员与美工商榷控件可实现性,(如不实行此步骤,将会导致各自对对方工作不满意,也会产生不一致的混乱)。重复叠代上述工作。

·建立合理化文档《UI标准》描述上述规范,

·强行界面设计者理解之,并作为开发准则,

·SQA人员进行监控开发人员是否遵循,及时告诫开发人员。

二:(Color)颜色使用恰当,遵循对比原则:
1:统一色调,针对软件类型以及用户工作环境选择恰当色调:

如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等

2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表

3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,?quot;!,?着重号,以及图标等

4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试

5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。 6:整个界面色彩尽量少的使用类别不同的颜色

itop色表

具体标准参考美术学统计学术标准。 色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

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

1:也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成标准,参考itop的outlookbar图标设计标准

2:有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格

3:底图应该融于底图,使用浅色, 低对比,尽量少的使用颜色。

4:图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件,绝对不允许画出默认奇妙的图案。

5:鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手的形状就有4钟不同的样子。

如:《如何创建XP图标》http://www.microsoft.com/china/msdn/library/dnwxp/html/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:断句逗号句号顿号分号的用法, 提示信息比较多的话,应该分段,

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设置

时间: 2024-11-08 18:56:11

通用界面规范的相关文章

迅雷核心技术开放 免费提供行业通用界面引擎

3月19日,迅雷BOLT界面引擎http://www.aliyun.com/zixun/aggregation/11307.html">官方网站于3月19日14:00正式上线,开放BOLT界面引擎最新版本的SDK下载,宣告迅雷正式开放其基础核心技术Bolt界面引擎.第三方可以使用BOLT界面引擎以更低的成本开发效果更绚的客户端应用. 据了解,该网站涵盖了Bolt界面引擎的框架设计.核心流程思路分析.入门教程以及参考手册等大量相关资料,同时也开放了相关辅助工具和实例的下载.此外,该网站还介绍

简要分析基于图形界面的人机软交互设计

导读: 广义的交互设计,包括人与人之间发生的事情,比如你去一个店里消费,营业员给你拿物品找钱等:人与物发生的事情,你去试用一些(PMC)便携消费电子产品产生的一些交互过程:以及物与物或自动化发生的一些事情,这些都可以称为互动交互,交互的过程大致都是这样,区别在于人.物(机器或物品)产生的不同层级类别的体验.现在(HCI)人机交互领域发展的最好的无疑是互联网web2.0甚至web3.0呼之欲出的交互,基于图形界面的人机软交互设计. 我们熟知的互联网领域经历了2000年时候的泡沫,经历了web2.0

移动界面设计的一些心得

软件开发者 Johannes Fahrenkrug 在自己的博客 Springenwerk 讲述了移动界面设计的一些心得,值得参考. 跨平台界面是一种观念的错误 跨平台界面是一个从未实现的幻想,是否记得 Java Swing?它许诺在任何运行 Java 的平台统一界面,而这个许诺从未兑现,为什么? 跨平台 UI 糟糕透顶.跨平台 UI 意味着它在任何平台的视觉和感觉都很糟糕. 因为人们喜欢自己平台的特殊性,如果你想为某个平台开发应用,必须深入了解每个平台的特点.跨平台界面意味着你的界面在任何平台

VC之美化界面(内容覆盖十分全面,经典)

界面美化 摘要本文专题讨论VC中的界面美化,适用于具有中等VC水平的读者.读者最好具有以下VC基础: 1. 大致了解MFC框架的基本运作原理: 2. 熟悉Windows消息机制,熟悉MFC的消息映射和反射机制: 3. 熟悉OOP理论和技术: 本文根据笔者多年的开发经验,并结合简单的例子一一展开,希望对读者有所帮助.  正文1. 美化界面之开题篇相信使用过<金山毒霸>.<瑞星杀毒>软件的读者应该还记得它们的精美界面:     图1 瑞星杀毒软件的精美界面程序的功能如何如何强大是一回事

分享非常漂亮的WPF界面框架源码及其实现原理

原文 http://www.cnblogs.com/baihmpgy/archive/2013/05/09/3068370.html 在上文<分享一个非常漂亮的WPF界面框架http://www.cnblogs.com/baihmpgy/archive/2013/05/06/3062220.html>中我简单的介绍了一个界面框架,有朋友已经指出了,这个界面框架是基于ModernUI来实现的,在该文我将分享所有的源码,并详细描述如何基于ModernUI来构造一个非常通用的.插件化的WPF开发框架

什么是UNC通用命名规则?

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   UNC (Universal Naming Convention) / 通用命名规则,也叫通用命名规范.通用命名约定. 网络(主要指局域网)上资源的完整 Windows 2000 名称.它符合 \\servername\sharename 格式,其中 servername 是服务器名,sharename 是共享资源的名称.目录或文件的 UNC 名称可以包括共享名

[译]谷歌 HTML/CSS 规范

背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除非文件在两种协议下都不可用.这种方案称为 protocol-relative URL,好处是无论你是使用 HTTPS 还是 HTTP 访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一部分字节. <!-- Not recommended -->    <script src=&

VC中的界面美化

本文专题讨论VC中的界面美化,适用于具有中等VC水平的读者.读者最好具有以下VC基础: 1. 大致了解MFC框架的基本运作原理: 2. 熟悉Windows消息机制,熟悉MFC的消息映射和反射机制: 3. 熟悉OOP理论和技术: 本文根据笔者多年的开发经验,并结合简单的例子一一展开,希望对读者有所帮助.  正文1. 美化界面之开题篇相信使用过<金山毒霸>.<瑞星杀毒>软件的读者应该还记得它们的精美界面:     图1 瑞星杀毒软件的精美界面程序的功能如何如何强大是一回事,它的用户界面

RSS简介

rss 一.什么是RSS? 也许大家是第一次听到RSS这个概念,那什么是RSS呢?RSS 是站点用来和其他站点之间共享内容的一种简易方式(也叫聚合内容),通常被用于新闻和其他按顺序排列的网站,例如Blog.一段项目的介绍可能包含新闻的全部介绍等.或者仅仅是额外的内容或者简短的介绍.这些项目的链接通常都能链接到全部的内容.网络用户可以在客户端借助于支持RSS的新闻聚合工具软件,在不打开网站内容页面的情况下阅读支持RSS输出的网站内容. 说得更加简单一点,RSS就是一种用来分发和汇集网页内容的XML