您的当前位置:首页正文

UI设计心得

2024-08-29 来源:步旅网


界面设计的行业标准总结

 界面设计的行业标准总结--- GUI设计的相关行业标准

1.1 GUI整体标准的制定GUI的整体标准包括以下四个方面: 1. 规范性 2. 合理性 3. 一致性 4. 界面定制性 一、GUI设计的规范性

遵循一致的准则,确立标准并遵循,是软件界面设计中必不可必的环节。确立界面标准的好处:

1. 便于用户操作:用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能

2. 使用户感觉到统一、规范,在使用软件的过程中愉快轻松的完成操作,提高对软件的认知

3. 降低培训、支持成本,不必花费较多的人力对客户进行逐个指导 二、GUI布局的合理性

界面的合理性是指界面是否与软件功能相融洽,界面的颜色和布局是否协调等。例如: 1.界面布局 a.屏幕不能拥挤

l Mayhew在1992年的试验结果表明屏幕总体覆盖度不应该超过40%,而分组覆盖度不应该超过62%。

l 整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不变的情况下,宁可留空部分区域,也不要破坏控件间的行间距。 b.控件按区域排列

l 一行控件纵向中对齐, 控件间距基本保持一致,行与行之间间距相同,靠窗体的控件距窗体边缘的距离应大于行间距。

l 当屏幕有多个编辑区域,要以视觉效果和效率来组织这些区域 c.有效组合

逻辑上相关联的控件应当加以组合以表示其关联性,反之,任何不相关的项目应当分隔开。在项目集合间用间隔对其进行分组,或者使用方框划分各自区域 d.窗口缩放时,控件位置、布局

l 固定窗口大小,不允许改变尺寸

l 改变尺寸的窗口,在窗口尺寸发生变化时控件的位置、大小做出相应的改变

l 改变尺寸的窗口,在窗口改变尺寸时增加相应在的纵向、横向滚动条,以方便用户使用窗体上的控件

2.界面颜色搭配

使用恰当的颜色,可以使软件的界面看起来更加规范: a.统一色调

针对软件类型以及用户工作环境选择恰当色调,如:安全软件,根据工业标准,可以选取黄色。绿色体现环保,蓝色表现时尚清新、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等。

b.与操作系统统一,读取系统标准色表

c.遵循对比原则

在浅色背景上使用深色文字,深色背景上使用浅色文字,如蓝色文字以白色背景容易识别,而在红色背景则不易分辨。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色 d.整个界面色彩尽量少的使用类别不同的颜色

e.颜色方案也许会因为显示器、显卡、操作系统等原因显示出不同的色彩 f.针对色盲、色弱用户,可以使用特殊指示符 三、GUI风格的一致性

界面的一致性既包括使用标准的控件,也指相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 1.在不同分辨率下的美观程度

软件界面要有一个默认的分辨率,而在其他分辨率下也可以运行,分别在800×600,1024×768,1280×768,1280×1024,1200×1600分辨率下的大字体、小字体下的界面表现。 2.界面布局要一致

如所有窗口按钮的位置和对齐方式要保持一致。 3.界面的外观要一致

如控件的大小、颜色、背景和显示信息等属性要一致,一些需要特殊处理或有特殊要求的地方除外。

4.界面所用颜色要一致

颜色的前后一致会使整个应用软件有同样的观感,反之会让用户觉得所操作的软件杂乱无章,没有规则或言。 5.操作方法要一致 如双击其中的项,触发某事件,那么双击任何其他列表框中的项,都应该有同样的事件发生。 6.控件风格、控件功能要专一 a.不错误的使用控件

例如使用Button样式做Table的功能,拿主菜单条显示版权信息等 b.一个控件只做单一功能,不复用

如果在特殊情况下出现复用的时候,可采用以下两种方法解决: l 分组,使用双份控件

l 使用Table页,给用户很明显的视觉变化 7.标签和讯息的措词要一致

如在提示、菜单和帮助中产生相同的术语。 8.标签中文字信息的对齐方式要一致

如某类描述信息的标题行定为居中,那么其他类似的功能也应该与此一致。 9.快捷键在各个配置项上语义保持一致

如Tab键的习惯用法是阅读顺序从从左到右,从上到下。在定义软件快捷键时也可以将现有一些快捷键的属性作为参考,如表1-3-1(见附件)列出了常用的快捷键及其功能。 四、GUI界面操作可定制性

界面的可定制性大致可分为以下几个特性: 1.界面元素可定制

允许用户定义工具栏、状态栏是否显示,工具栏显示在界面上的位置;允许用户定义菜单的位置等。

2.工具栏可定制

不同用户对常用工具的使用是不同的,因此允许用户建立新的工具栏,选择要显示的工具栏,定制工具栏上的按钮等功能在软件系统中经常被用到

3.统计检索可定制

对于某些特殊行业的软件可以提供统计检索的可定制性,在充分了解用户需求的基础上制定大量的安全供用户选择

1.2 GUI所包含各类元素标准的定制 GUI的元素大致可分为以下几个方面: 1. 窗口 2. 菜单 3. 图标 4. 控件 5. 鼠标 6. 文字 7. 联机帮助 一、GUI窗口的标准

窗口是显示设备中的一个区域,用于观看对象、对象相关信息以及应用与对象的动作进行交互。从外观上来说,通常窗口是由标题、边框、菜单、工作区、滚动条等组成。窗口的标题栏可以进行打开、关闭、创建、缩放、移动、删除、重叠等操作 好的GUI窗口应该具备以下标准:

1.窗口控件的大小、对齐方向、颜色、背景等属性的设置和程序设计规约相一致

2.显示相关的下拉菜单、工具条、滚动条、对话框、按钮、图标和其他控制,既能正确显示又能调用

3.若窗口无法显示,所有内容能够改变大小、移动和滚动 4.活动窗口能够反显加亮 5.窗口能够正确的关闭

6.多个窗口叠加时窗口的名称正确显示

7.窗口的数据能够利用鼠标、功能键、方向前头和键盘操作 8.当窗口被覆盖并重新调用后,窗口能够正确再生 9.如果使用多任务,所有的窗口能够被实时更新 10.窗口支持最小化和最大化或放大 11.窗口上的控件随着窗体的缩放而缩放

12.父窗体支持缩放时,子窗体也应该支持缩放

13. 一个窗口中按Tab键,移动聚焦按顺序移动。先从左至右,再从上到下 14.子窗口位置在父窗口的左上角或正中,正上方1/4处为易吸引用户注意力的位。父窗口或主窗口的中心位置应该在对角线焦点附近,如下图2-1-2所示

15.当多个子窗口弹出时依次向右下方偏移,并且显示出窗口标题,如下图2-1-3所示 16.重要的命令按钮与使用频繁的按钮放在了界面醒目的位置 17.与正在进行的操作无关的按钮应该加以屏蔽 18.按钮大小要与界面的大小和空间协调 19.窗口中所包含的标签左对齐排列 20.多窗口的切换响应时间不宜过长 二、GUI菜单的标准

菜单是否易用主要体现在它能否提供线索帮助用户识别,而不用强迫用户去记忆,一个好的菜单设置可以分为以下几个方面: 1.菜单设置符合软件的需求

2.菜单项的措词准确,能够表达出所要进行设置的功能 3.菜单项的顺序合理,具有逻辑关联的项目集中放置 4.图形布局一致

5.菜单设置在窗体标题栏的下方 三、GUI图标的标准

图标是表示实体信息简洁、抽象的符号,它还可以作为可视按钮项,当被选中激活时,可以完成指定的功能。那么图标的设计当中应该着重考虑哪些问题呢,以下提供几点可供参考: 1.图标的设置符合常规的表达习惯 2.不同的目标采用不同的图标

3.图标具有清晰的轮廓,轮廓清晰的图标可保证图像在不同背景色上都具有较好的效果 4.选择合适的尺寸来定义图标。Windows XP系统的图标有四种尺寸(以像素为单位)可作为参考: 48×48, 32×32,24×24以及16×16,图标大小的选取决定于工具栏所定义的宽度

5.图标的外形与实际功能相似,应尽量避免抽象。这样的图标可以使用户很轻松、容易地认识图标的作用

6.在图标上加以标注,用来说明图标所完成的功能 7.图标放置在菜单栏的下方 四、GUI中控件的标准

软件系统功能的实现与控件是密不可分的,各控件位置的摆放直接影响到软件的使用,及其美观程度。下面举例说明软件系统中最常用到的控件对其元素间距、摆放位置进行说明: 1.控件元素的间距 a.单个元素间距

输入框之间垂直间距为5px

Label文本标签和输入元素之间水平间距为8-22px 复选框、单选按钮之间垂直间距为8px 多种元素混合垂直排列时,复选框和单选按钮边上的间距无论在什么情况下都为8px b.元素分组间距

窗口边框和内容区域的四周边距为11px; 父组和子组之间的四周间距为10px;

分组框边框和内部内容区域的四周边距为5px; 复选框组、单选框组的组水平间距为15px

2.按钮的位置,如下表2-4-1对按钮摆放位置的规则做了总结 指向对象 单个对象 多个对象

对象举例 输入框 界面元素组

按钮位置

按钮仅靠在输入框的右边

按钮与最底部的对象左对齐,如果空间允许则仅靠在最底部对象的右边

按钮位于分组框左下角,并和分组框内其它元素左对齐

位于表格下方,并和表格左对齐

窗口区域,页签面板,分组框 表格,网格

分组框

表格按钮

五、鼠标在GUI中的标准 用户会把鼠标移进、移出窗口,或当光标在窗口中,用户按下、释放鼠标键,鼠标是否准确、灵活,对一个软件系统来说也很重要。以下几点标准可作为在软件系统中鼠标设计的参考: 1.在整个交互的过程中,可以识别鼠标操作 2.多次点击鼠标后,仍能够正确识别

3.鼠标有多个按钮的情况下,能够正确识别每个按钮所要完成的功能 4.光标、处理指示器和识别指针随操作恰当的改变

5.点击选中时,鼠标指针停留在选中内容上,而不会滑动 6.支持鼠标滑轮上下翻动操作

7.对于相同种类的元素采用相同的操作激活

8.采用动态图标形象的表示出当前的操作,如用水漏表示系统忙,用手型表示可以点击等 9.鼠标无规则点击时不会产生不良后果

10.单击鼠标右键弹出快捷菜单,取消右键后该菜单隐藏

11.鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况 六、GUI文字的标准

文字在视觉上向用户传达各种信息,界面文字包括界面文字的字体和界面文字的用语两个方面,那这两方面都有哪些要求呢?以下分别阐述。 1.字体

a.使用统一字体,如规定软件系统的中文字体为“宋体”,英文及数据采用“Times New Roman” b.所有控件、描述信息尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况

2.文字表达

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

a.口语化描述,用词客气多用您、请,不要用或少用专业术语,杜绝错别字

b.标点符号(断句、逗号、句号、顿号、分号)的用法要统一, 提示信息比较多的话要进行分段

c.警告、信息、错误使用对应的表示方法

d.使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定

e.根据用户不同采用相应的词语语气语调 七、GUI联机帮助的标准

帮助文档适用于以下三种情况:

l 系统默认、行业标准的控件操作不需要逐一描述,只需要对特殊控件加以描述 l 特殊操作、特殊功能界面,在界面上加控件直接连接到对应的帮助文件中 l 特殊设置的详细信息,除了应该在界面上用简洁明了的语句说明外,还可以在界面上加控件直接连接到对应的帮助文件中 帮助文档的标准要求:

l 结构化,按功能模块划分

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

l 措词恰当、简捷、通俗易懂,明了的帮助用户解决问题 l 不在帮助文档中做广告宣传

 界面设计的行业标准总结--- WEBUI设计的相关行业标准

WEBUI的特点:

1. 感官体验:呈现给用户视听上的体验,强调舒适性

2. 交互体验:呈现给用户操作上的体验,强调易用、可用性 3. 浏览体验:呈现给用户浏览上的体验,强调吸引性 4. 情感体验:呈现给用户心理上的体验,强调友好性 5. 信任体验:呈现给用户的信任体验,强调可靠性

2.1 WEBUI整体标准的制定

WEBUI的整体标准也从以下四个方面入手: 1. 规范性 2. 合理性 3. 一致性 4. 界面定制性

一、WEBUI的设计规范性

WEBUI也要遵循一致性的准则,其目的与GUI一致: 1. 便于用户操作

2. 使用户感觉到统一、规范,在使用软件的过程中愉快轻松的完成操作,提高对软件的认知

3. 降低培训、支持成本,不必花费较多的人力对客户进行逐个指导 二、WEBUI布局的合理性

WEBUI界面的合理性直接影响到软件系统的可用性,下面将从几个方面讲述WEBUI的布局特点:

1.设计风格:符合目标客户的审美习惯,并具有一定的引导性 2.页面布局:重点突出,主次分明,图文并茂

3. LOGO:确保logo的保护空间,确保品牌的清晰展示而又不占据过分空间 4.页面导航:导航条清晰明了、突出,层级分明

5.图标使用:简洁、明了、易懂、准确,与页面整体风格统一

6.图片展示:比例协调、不变形,图片清晰。图片排列既不过于密集,也不会过于疏远 7.动画效果:与主画面相协调,打开速度快,动画效果节奏适中,不干扰主画面浏览 8.页面色彩:遵循GUI界面颜色标准,主色调+辅助色不超过三种颜色 9.页面底色:所选颜色不能干扰主体页面的阅读 三、WEBUI风格的一致性

WEBUI的一致性与GUI大同小义,也指相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致,但不同的是WEBUI对浏览器有一定的要求。 1. 在不同分辨率下的美观程度

WERUI要求所有页面要在800*600,1024*768两种分辨率下运行通过 2.在不同版本浏览器上的运行

例如要求在IE5.0,5.5以及6.0下运行通过而不发生错误 3.在不同厂商的浏览器上运行

例如软件系统可以在IE、Firfox、Google等浏览器上正常运行 4.WEBUI的菜单、地址栏、图标、状态栏等风格、位置要一致 5.遵循GUI风格一致性的2-9所规定的一致性

四、WEBUI的可定制性

WEBUI的可定制性大致可分为以下几个特性: 1.界面元素可定制

允许用户定义工具栏、状态栏、地址栏等是否显示,工具栏显示在界面上的位置;允许用户定义菜单的位置等。 2.工具栏可定制

不同用户对常用工具的使用是不同的,因此允许用户建立新的工具栏,选择要显示的工具栏,定制工具栏上的按钮等功能在软件系统中经常被用到

2.2 WEBUI所包含各类元素标准的定制 WEBUI所包含各类元素:

在WEBUI中页面所包含元素与GUI有所不同,大至分为页面、界面控件、菜单、图标、鼠标、文字、帮助,见下图2-1为WEBUI的基本页面构成 一、WEBUI页面的标准

根据WEBUI的特性,下面列出十六个点来分别描述页面的制定:

1.页面大小:适合多数浏览器浏览,如15寸、17寸、19寸等显示器

2.按钮设置:对于交互性的按钮必须清晰突出,以确保用户可以清楚地点击

3.点击提示:点击浏览过的信息颜色需要显示为不同的颜色,以区分于未阅读内容,避免重复阅读

4.错误提示:若表单填写错误,应指明填写错误之处,并保存原有填写内容,减少重复工作

5.显示路径:无论用户浏览到哪一个层级,哪一个页面,都可以清楚知道看到该页面的路径

6.栏目的命名:与栏目内容准确相关,简洁清晰,不宜过于深奥 7.栏目的层级:最多不超过三层,导航清晰

8.内容的分类:同一栏目下,不同分类区隔清晰,不要互相包含或混淆

9.页面的长度:设置一定的页面长度,避免页面过长而影响阅读 10.分页浏览:对于较长的内容可以进行分页浏览

11.表单填写:尽量采用下拉选择,需填写部分需注明要填写内容,并对必填字段作出限制

12.页面速度:正常情况下,尽量确保页面在5秒内打开,对于大型软件可以适当的延长等待时间

13.页面刷新:尽量减少页面的刷新率,或采用无刷新技术

14.新开窗口:尽量减少新开的窗口,以避免开过多的无效窗口,设置弹出窗口的关闭功能

15.网页地图:为用户提供清晰的网页指引

16.可以复用一些GUI窗口的相关标准,如菜单、标签、按钮的位置、字体、颜色等标准

二、WEBUI其他元素的标准

WEBUI的其他元素的制定标准,包括界面控件、菜单、图标、鼠标、文字、帮助信息等与GUI一致,并且可根据具体情况酌情予以改变。

 界面设计的行业标准总结---报表的规范

报表是软件对用户输出的重要方式,报表的制定也要有一定的规范,以下几点标准可作为在软件系统中报表设计的参考:

1.报表风格统一、结构合理、分类明确,能够清晰的表达报表中所要体现的内容 2.报表结构要连贯

3.同一软件系统产生的全部报表的字体类型、字体大小、字体颜色要一致

如报表标题为楷体_GB2312字18号字粗体,表前字段为宋体10.5号字,表中标题列、行为宋体11.5号字粗体,表中其他字段为宋体11.5号字,表后字段为宋体11.5号字,且上述字体颜色均为黑色

4.报表线条规整,不存在线短或线过长的情况 5.报表所选线型要一致

如要求报表的边框线为0.5磅黑色双线,表格中线条为0.5磅黑色单线等 6.报表单行间距相同

7.报表中各字段的对齐方式一致

如报表名称在报表表格横向距离居中的位置,表前字段与表格左对齐,表中标题要求水平居中,报表中为字符型的字段内容为水平居中,数值型的字段内容为中部右对齐,备注等表述为说明的字段可采用中部两端对齐的方式,表后字段左与表格对齐 8.报表的输出要规范

例如软件系统会有报表导出的功能,报表导出为各种格式(.doc、.excel、.pdf、.rpt等格式)后其形式、内容要统一,不会因为格式的不同而使报表发生失真的现象 9.报表横向不产生换行

也就是说报表的水平距离不应过大,而产生换行显示的现象,这类报表在导出为.doc格式的时候往往会产生报表格式失真或数据丢失的情况

10.报表支持打印输出功能,打印输出后的报表不产生失真。

因篇幅问题不能全部显示,请点此查看更多更全内容