UI设计心得

界面设计的行业标准总结
? 界面设计的行业标准总结--- 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.报表支持打印输出功能，打印输出后的报表不产生失真。