UI界面设计规范.docx

UI界面设计规范.docx

《UI界面设计规范.docx》由会员分享，可在线阅读，更多相关《UI界面设计规范.docx（13页珍藏版）》请在冰豆网上搜索。

UI界面设计规范

UI 设计（流程/界面）规范

一：

UI 设计基本概念与流程

1.1 目的

规范公司 UI 设计流程，使 UI 设计师参与到产品设计整个环节中来，对产品的易用性进行

全流程负责，使 UI 设计的流程规范化，保证 UI 设计流程的可操作性。

1.2 范围

l 界面设计

l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI 界面设计

人员、界面评审人员和配置测试人员。

1.3 概述

UI 设计包括交互设计，用户研究，与界面设计三个部分。

基于这三部分的 UI 设计流程是

从一个产品立项开始，UI 设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研

验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。

UI 设计师应

全面负责产品以用户体验为中心的 UI 设计，并根据客户（市场）要求不断提升产品可用性。

本规范明确规定了 UI 设计在各个环节的职责和要求，以保证每个环节的工作质量。

1.4 基本介绍

A、需求阶段

软件产品依然属于工业产品的范畴。

依然离不开 3W 的考虑（Who,where,why.）也就是

使用者，使用环境，使用方式的需求分析。

所以在设计一个软件产品之前我们应该明确什

么人用（用户的年龄，性别，爱好，收入，教育程度等）。

什么地方用（在办公室/家庭/厂房

车间/公共场所）。

如何用（鼠标键盘/遥控器/触摸屏）。

上面的任何一个元素改变结果都

会有相应的改变。

除此之外在需求阶段同类竞争产品也是我们必须了解的。

同类产品比我们提前问世，我们

要比他作的更好才有存在的价值。

那么单纯的从界面美学考虑说哪个好哪个不好是没有一

个很客观的评价标准的。

我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。

B、分析设计阶段

通过分析上面的需求，我们进入设计阶段。

也就是方案形成阶段。

我们设计出几套不同风

格的界面用于被选。

C、调研验证阶段

几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观

真实的反馈。

测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。

调研阶段需要从以下几个问题出发：

用户对各套方案的第一印象

用户对各套方案的综合印象

用户对各套方案的单独评价

选出最喜欢的

选出其次喜欢的

对各方案的色彩，文字，图形等分别打分。

结论出来以后请所有用户说出最受欢迎方案的优缺点。

所有这些都需要用图形表达出来，直观科学。

D、方案改进阶段

经过用户调研，我们得到目标用户最喜欢的方案。

而且了解到用户为什么喜欢，还有什么

遗憾等，这样我们就可以进行下一步修改了。

这时候我们可以把精力投入到一个方案上，

将方案做到细致精美。

E、用户验证阶段

改正以后的方案，我们可以将他推向市场。

但是设计并没有结束。

我们还需要用户反馈，

好的设计师应该在产品上市以后去站柜台。

零距离接触最终用户，看看用户真正使用时的

感想。

为以后的升级版本积累经验资料。

经过上面设计过程的描述，大家可以清楚的发现，界面 UI 设计是一个非常科学的推导公式，

他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。

所以我们一再强

调这个工作过程是设计过程。

UI 界面设计不存在美工。

2. UI 设计流程

2.1 概述

根据上述原则，分析公司产品的特点，制定符合软件产品（或项目）生命周期的 UI 设计流

程。

每个产品（或项目）的生命周期中，UI 设计师应该严格按照流程，完成每个环节的职

责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。

二：

UI 界面用户体验设计原则与规范

1：

应该遵循的基本原则

无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正

的一致。

这样得到的好处：

1：

使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一

个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解

2：

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

3：

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

做法：

项目组有经验人士，确立 UI 规范：

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

界面控制程序人员、用户体验人员提出合理统一使用的控件库。

参考标准界面使用规范：

控件功能遵循行业标准，windows 平台参见《Microsoft 用户体验》

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

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

根据需要，设计特殊操作控件，准则为：

简化操作、达到一定功能目的

界面实施人员与美工商榷控件可实现性,（如不实行此步骤，将会导致各自对对方工作不满

意，也会产生不一致的混乱）。

重复叠代上述工作。

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

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

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

2：

（Color）颜色使用恰当，遵循对比原则：

1：

统一色调，针对软件类型以及用户工作环境选择恰当色调：

如：

安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现

浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等

2：

如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，

读取系统标准色表

3：

色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指

示符，?

quot;!

，?

着重号，以及图标等

4：

颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，

应该经过严格测试，不同机器进行颜色测试

5：

遵循对比原则：

在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以

白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色

和白色反差很大。

除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。

 6：

整个

界面色彩尽量少的使用类别不同的颜色

itop 色表

具体标准参考美术学统计学术标准。

 色表的建设，对于美工在图案设计、包装设计上起着

标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

3：

（Resource）资源

一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。

1：

也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形

成标准，参考 itop 的 outlookbar 图标设计标准

2：

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

片风格

3：

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

4：

图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物

件，绝对不允许画出莫名奇妙的图案。

5：

鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个

手的形状就有 4 钟不同的样子。

4：

（Font）字体

使用统一字体，字体标准的选择依据操作系统类型决定。

中文采用标准字体，“宋体”，英文采用标准 Microsoft Sans Serif 不考虑特殊字体（隶

书、草书等,特殊情况可以使用图片取代）,保证每个用户使用起来显示都很正常。

字体大小根据系统标准字体来，例如 MSS 字体 8 磅，宋体的小五号字（9 磅）五号字

（10.5 磅）。

所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况

ITop 采用 BCB，所有控件默认使用 parent font，不允许修改，这样有利于统一调整。

·系统大小字体属性改变的处理。

Windows 系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果

设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，

相对不会有什么特殊问题。

但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。

这个情况下，应该做相应处理：

1：

写程序自动调节大小，点阵值乘以一个相应比例

2：

全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻

烦。

BCB/DELPHI 中多采用这种方法，但是必然结果是和系统不统一。

5：

（Text）文字表达

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

1：

口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字

2：

断句逗号句号顿号分号的用法， 提示信息比较多的话，应该分段，

3：

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

4：

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

该统一规定。

5:

 根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为

儿童：

这可以语气亲切和蔼，老年用户则应该成熟稳重。

制定标准遵循之。

6：

（STYLE）控件风格，不要使用错误控件，控件功能要专一

有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能

不伦不类，杂乱无章

·不要错误使用控件，例如：

使用 Button 样式做 TTable 的功能，拿主菜单条显示版权信息，

·统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击

却没有任何反映

·一个控件只做单一功能，不复用

很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理

解增加难度，只有用户熟悉后才能理解。

 例如

改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只

有熟练用户才回使用，这种情况下解决方法：

1:

分组，使用双份控件

2：

使用 TABLE 页，给用户很明显的视觉变化

=====================================================

总结起来就是：

1. 产品制作人，写产品计划书。

2. 用户体验研究员，作调查分析。

3. 信息建构师，设计产品架构。

4. 互动设计师，作出互动流程。

5. 视觉设计师和用户界面设计师，作出页面视觉设计。

6. 前台工程师，前台开发。

7. 后台工程师，后台开发。

8. 用户体验研究员，做用户测试确保质量。

1.确认目标用户

在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需

求。

用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

例如：

对于科学用户

和对于电脑入门用户的设计重点就不同。

2.设计目标一致

软件中往往存在多个组成部分（组件、元素）。

不同组成部分之间的交互设计目标需要一

致。

例如：

如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该

目标需要贯彻软件（软件包）整体，而不是局部。

3.元素外观一致

交互元素的外观往往影响用户的交互效果。

同一个（类）软件采用一致风格的外观，对于

保持用户焦点，改进交互效果有很大帮助。

遗憾的是如何确认元素外观一致没有特别统一

的衡量方法。

因此需要对目标用户进行调查取得反馈。

7.可用性原则

7.1 可理解

软件要为用户使用，用户必须可以理解软件各元素对应的功能。

如果不能为用户理解，那

么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。

例如：

删除操作元素。

用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认

删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

7.2 可达到

用户是交互的中心，交互元素对应用户需要的功能。

因此交互元素必须可