如何写“完”UI设计说明书

第一篇：如何写“完”UI设计说明书

如何写“完”UI设计说明书.txt男人应该感谢20多岁陪在自己身边的女人。因为20岁是男人人生的最低谷，没钱，没事业；而20岁，却是女人一生中最灿烂的季节。只要锄头舞得好，哪有墙角挖不到？1004*623 如何写“完”UI设计说明书

我们中的大多数人都写过UI设计说明书（或UI规格说明书），论坛里也经常会有类似的讨论，对UI设计说明书的框架和结构我就不做过多的说明了。为什么有人写了上百页的UI设计说明书，别人还是看不懂，或者说忽略了细节呢？那今天我们重点讨论一下关于细节阐述和表达的一些经验，以免写出只有自己看得懂的UI设计说明书。我先说说我总结的一些经验吧，希望大家积极讨论： 我们的目标是：（没有蛀牙，^_^ 玩笑！）

既要清晰描述用户界面原型中的细节和交互方式，又要方便项目组的其他开发人员、需求人员以及测试人员等角色交流察看的说明文档。主要内容包括：

1.产品的目标和成功标准，（例如一个全新的预言项目不可能要求用户满意度在90%以上，对升级产品要求就会高一些。）2.产品最终用户群及产品用途（了解用户的年龄、职业、产品的使用环境等都是非常必要的）3.首先满足基本功能。（例如DVD机的基本功能是播放影碟，可能还有播放CD的功能等等）4.主要功能（在产品的几十个功能中通过用户验证和项目组筛选，选取用户最常用到的功能，将其优化，以不同层次展现于界面上。）5.用户界面特性。（每一款界面都有自己的特性，比如触摸屏的操作界面与手机的操作界面就算功能完全一样，结构、布局等特点也不会相同的。）几点注意事项

1.必须紧贴需求，围绕功能点展开。

2.描述语言简短精确（这样别人看的时候才不会烦）

3.保持文本的易维护性，建议使用WORD的大纲视图编写，便于更改和查找。4.说明书一定要有版本管理，对每次更新内容要做详细说明。

5.图标要与名称一同提交，并说明是什么类型，如桌面图标、列表中的图标、工具栏图标、按钮图标、属性框或提示信息框中的图标等等。6.注意纪录，包括项目组和用户以及合作伙伴，如果在解释某一特性时令两人以上会感到困惑，那这一部分就需要更清楚的阐述了。

7.设计与实现同步，这个时最难的了，很多设计由于程序无法实现都被“卡”掉，早期程序也无法确定是否可以实现，伤脑筋！

8.维护UI设计说明书时不要忘记维护原型，作为UI设计说明书的补充原型是很重要的。UI设计中容易被忽略的地方 1.支持错误提示和撤销操作 2.简便的安装和卸载。3.必要的设置和帮助。

4.异常处理、错误消息的描述和问题回应提示。

5.除界面上有的图标和按钮外，还要有快捷键、菜单访问键、右键菜单、是否支持从其它软件界面内托拽复制文件等操作的说明。

6.域、菜单和按钮在什么情况下为不可点击状态。7.状态区，用来描述界面状态的区域，通常位于页面下方。（PS存储时状态区会显示进度条）8.剪贴板行为，用户在我们产品中拷贝的文字或图片的局部，是否可以贴入其他程序。9.指针的行为，说明超过多长时间的等待时应出现沙漏状态，在文本输入区光标应有改变、有链接的地方有变为小手等

10.声音行为，警示音、按钮触发音等

11.统一消息窗的弹出位置、背景色、大小、布局及特色

12.菜单栏和下拉选项等程序动作的描述，是向下还是向右弹出等。

13.动态状态描述，如果要求窗口渐隐或渐显，那就要说明渐隐或渐显过程的时间以及方式（半透明还是马赛克）等。

Art Designer作业规范书 1定义 2作业环境

? Art Designer日常作业的主要编辑工具： ? 软件图标主要编辑工具： ? 各种Logo设计及印刷设计：

其他常用的编辑工具： 2.2 Art Designer 一般作业要求 ? 各个产品需求图档主要是：

Logo & Symbolic Mark：软件的识别标志象征图及标准字搭配方案； Autorun：光碟自动执行界面；

Splash：软件激活时的欢迎及说明画面； Login：登陆界面；

Banner：显示版权信息及系列软件版本号画面； Icon：软件工具栏，应用程序配套图标； Source：各类软件所图形资源。? 命名规范：

aaa_bbb.ccc aaa-软件代号 bbb-图片类别(splash、sanner、logo等）ccc-文件后缀名（文件类型）? 备份共享方式：

3产品相关图文件 编辑规格 3.1 图文件编辑规格

以下为产品图文件编辑模板的举例说明： 图文件编辑规格（附图以“XXXXXX”为例）

Logo & Symbolic Mark：软件的标志和象征图形用于宣传和视觉记忆。（由于标志的范围很广，设计制作时必须用适量设计软件完成，以满足各种不同运用的需求）Autorun:软件CD安装时有不同选项在以此图为基础添加不同选项的链接按钮。（软件直接安装无选项时以此图为底图）软件执行图标(Icon)编辑规格 应用程序图标规格：

? 64*64 32bit、48*48 32bit、32*32 32bit、24*24 32bit、16*16 32bit ? 48*48 16bit、32*32 16bit、24*24 16bit、16*16 16bit ? 32*32 4bit、16*16 4bit（Windows 2000及以下版本支持16bit图标而Windows xp 支持32bit的图标，全规格的图标可以在不同系统中自动匹配，4bit的图标主要用于“安全模式”中显示）Tool Bar 图标规格： ? 24*24 16bit、16*16 16bit ? 16*16 4bit Menu 图标规格： ? 16*16 16bit ? 16*16 4bit 4.Art Designer 作业遵循流程规范 Art Designer作业中 Adobe Photoshop 专用层面图文件命名规范 6 软件包装设计的规范 宣传页的设计要素及注意事项 8 Art Designer日常学习交流

UI设计指南 年-月-日 版本:V1.0 作者: *** 审核: *** 批准: *** 年-月-日 更改记录

日期 被修改的章节 修改的类型* 修改描述 修改人 年-月-日 全部 A 新建 ** * 修改类型分为 AMODIFIED D-DELETED 1 简介 1.1 目的

提供UI设计流程定义，为交互设计提供依据。1.2 背景

使UI工作整体流程更具规范化和为这一规范更具有可视性。1.3 适用范围

任何具有UI设计阶段的项目。1.4 缩写和术语

1.4.1可用性 usability 以有效性、效率和满意度为指标，产品在特定使用背景下为了特定的目的可为特定用户使用的程度。1.4.2 用户 user 与产品交互的个体。1.4.3 任务 task 实现目的所必需的活动。1.5 参考资料

（本规范使用到的参考资料）1.6 本文结构概述

定义UI设计流程和角色定义。1.7 流程概述

介绍整个UI设计阶段的执行过程。2 流程定义 2.1 流程图划分 UI设计流程图

在流程图中其实是有两个纬度，分别是纵向和横向

2.1.1 纵向：是角色的划分对于一个项目来说通常会有三个角色分别是用户研究角色、设计角色、制作角色

用户研究角色：主要是让UI实现以用户为中心的设计主要工作有两点

在进行界面设计前了解整体产品的需求，并针对UI设计了解用户对UI的需求，再把这需求传达给设计师，即《UI需求分析报告》，这过程中的主要方法有焦点小组等。

在UI设计过程当中会不停的要求对设计进行评价这是就要求让用户来评价，我们称这种方法叫使用性测试，在流程图中的表现是对交互模型的使用性测试和验证性地使用性测试。

设计角色：主要是实现界面的交互设计即逻辑设计和界面设计

在做交互设计时一般是要根据《UI需求分析报告》做交互模型，即用一些工具实现一些交互的动作，让用户能直观的了解界面间的逻辑关系，来确认设计的可行性。

在界面设计时主要是设计皮肤即界面的布局图标的摆放等，这时的设计也是要遵循需求，并且要写《UI设计说明》。

制作角色：主要是实现界面的截图及坐标的定义

在这过程中制作角色要和开发人员沟通，两个角色相互配合完成项目的最后阶段。

2.1.2横向：是代表时间轴和整个项目开发的过程是对应的：UI的数据采集阶段实际上就是项目的启动阶段交互设计和使用性测试阶段就是项目的细化阶段界面设计和美术制作阶段就是项目的构造阶段。2.2 关于评审点的说明

在UI流程图中实际上可以把UI的工作划分成四个部分即数据采集、交互设计、界面设计、美术制作。

在数据采集阶段：会有可能是非正式评审主要会有交互设计师需求人员等参与；

在交互设计阶段：也会有评审主要会有用户研究角色、需求角色和开发人员角色来评审逻辑关系的合理性，包括使用合理性和设计合理性；

在界面设计阶段：在设计过程中会不断的和用户及需求人沟通以达到以用户为中心的设计，这结束后会有很正规的评审活动，这是的评审实际上是对整个UI项目的整体评审，包括工作量、质量等多项的正规的评审；

在美术制作阶段：美术制作阶段实际上就是制作角色和开发人员的不断的沟通完成全部开发工作的阶段，因此这过程的评审是由双方面的协调与合作来表现的。2.3 UI设计主要流程 时间1 时间2 时间3 UI启动阶段 UI细化阶段 UI构造阶段

数据采集 分析报告 交互模型 使用性测试 界面原型设计 使用性测试 评审 美术制作 验证性测试

需求分析报告 需求分析报告 2.4 UI设计时间表和里程碑：

数据采集** 交互模型** 使用性测试** 启动阶段《分析报告》 细化阶段《需求分析报告》 细化阶段《需求分析报告》 验证性测试** 美术制作 评审 使用性测试** 界面原型设计 ：表示时间点 “**”：表示可裁减的活动 “《..》”：表示阶段生成文档 2.5 参与人及担任角色和工作量 角色 人员 工作量 项目经理

交互研究工程师 设计角色 制作角色

界面设计之图标设计规范 图标样式应该有趣、色彩丰富且充满活力，因为现在的系统支持图标是32位图标，并且边缘非常平滑。在矢量程序中绘制完每个图标后，再用Adobe Photoshop进行处理可使图像更加完美。本规范是专为设计者编写的。在创建图像时，建议您与高水平的图形设计者一起工作，尤其是具有丰富的矢量和3D软件经验的图形设计者。

图标设计概述的目的是让您熟悉WindowsXP的新样式，为创建图标做好准备。图标样式特性

(1)色彩丰富，是对WindowsXP外观的补充。

(2)不同的角度和透视特性为图像增添了动态活力。

(3)元素的边角十分柔和，并略微有些圆滑。

(4)光源位于图标的左上角，同时有环绕光照亮图标的其它部分。

(5)渐变效果使图标具有立体感，进而使图标的外观更加丰满。

(6)投影使图标更具对比度和立体感。

(7)添加轮廓可使图像更清晰。

(8)日常对象(如计算机和设备)具有更现代化的个人外观。图标尺寸

Windows XP图标有四种尺寸，建议使用以下四种尺寸：

(1)48×48像素

(2)32×32像素

(3)24×24像素

(4)16×16像素 图标色彩深度支持

WindowsXP支持32位图标。32位图标为24位图像加上8位alpha通道。使图标边缘非常平滑，且与背景相融合。

每个WindowsXP图标应包含以下三种色彩深度，以支持不同的显示器显示设置：

24位图像加上8位alpha通道(32位)8位图像(256色)，加上1位透明色

4位图像(16色)，加上1位透明色 调色板

图标中使用的主要颜色。对象的角度和分组

WindowsXP样式图标使用的透视网格：并非所有对象使用16×16的复杂图像都能获得较好效果。某些对象通常以直观图像显示：文档图标、符号图标(如警告或信息图标)、单一对象图标(如放大镜)除非创建重叠辅助对象可以更清楚地表达图标的含义，否则就可读性和完整性而言，还是应使用直观图像。还应考虑如何按组查看图标，以便确定如何将对象分组。投影

使用投影后，WindowsXP图标将更清晰且更具立体感。可在Photoshop中实现这种效果，本指南的后面部分将对此进行描述。若要为图像添加投影，请在 Photoshop中双击图像的图层，并选择Drop Shadow。然后将Angle更改为135，Distance更改为 2，Size更改为2。此时投影为75%不透明黑色。轮廓

绘制XP样式图标时，为图像添加轮廓可使之更清晰，并可保证图像在不同背景色上都具有较好效果。概念

设计图标时，请考虑以下因素：

使用已有概念以确保真实表达了用户的想法。考虑图标在用户界面环境中以何种形式出现，以及如何作为图标集的一部分使用。考虑图形的文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时，请尽可能使其大众化。如果图标中的图像由多个对象组成，应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于 16×16的尺寸大小，还可考虑删除某些对象或简化图像使之更容易辨认。透明工具

将Gif Movie Gear(GMG)打开一个对话框，其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在 GMG中选作透明背景色的颜色)。重复所有4位和8位帧。若要保存图标，请选择 File->Save Icon As...。创建工具栏

Windows工具栏图标除不使用投影之外，使用的样式与其它图标相同。由于工具栏图标非常小，建议您使用简单的图像。如果以直观方式显示图像即可清晰地表达图标的含义，则不必使用其它复杂方式。创建AVI

WindowsXP使用8位AVI。创建.avi文件的过程与创建图标的过程相同-在Photoshop中准备图像，然后将其拖动到GMG 中。请按以下指导创建8位图标。若要使用GMG保存AVI，请转至File->Export As->AVI file。

创建.avi文件时，请考虑以下因素：使用品红(R255 G0 B255)作为背景透明色。在Photoshop中，重要的一点是不要出现杂散像素。

详细设计说明书编写规范

Detailed Design Specification 详细设计说明书编写规范

第1章 引言 1.1 目的

使项目详细设计说明书的编写规范化，从而规范软件管理。尽可能详细地描述程序的各成份的设计考虑，以利于编制程序。

[此处加入编写目的] 1.2 背景

说明该软件系统名称，开发者，详细设计原则和方案

[此处加入项目背景资料]

1.3 参考资料

列出有关的参考资料名称，作者，发表日期，出版单位

[此处加入参考资料]

1.4 定义

列出本文件中专用的术语，定义和缩写词

[此处加入术语和缩写词]

第2章 程序系统的组织结构

2.1 运行环境(编程协定)

[此处加入运行环境].1.1 操作系统&数据库系统

列出系统运行的有关操作系统&数据库系统的名称，版本号，对应版权单位

[此处加入操作系统]

[此处加入数据库系统].1.2 编程工具

列出开发此系统的所需的主要编成工具的名称，版本号，对应版权单位,并简述其特点

[此处加入编程工具].1.3 编辑、调试、联接程序

[此处加入编辑、调试、联接程序].1.4 编译工具

[此处加入编译工具].1.5 模拟、仿真数据

模拟数据使用过去的真实数据，数据如下：

[此处加入数据]

过程如下：

[此处加入过程].1.6 诊断、测试程序

[此处加入诊断、测试程序].1.7 检测程序

[此处加入检测程序]

2.2 单元命名规则

[此处加入单元命名规则]

2.3 程序逻辑

用图表列出本程序系统内每个模块（或子程序）的名称，标识符，以及这些模块（或子程序）之间的层次关系

[此处加入程序逻辑]

第3章 单元设计说明

[此处加入单元设计说明]

3.1 模块单元（或子程序）（标识符）1（名称）

注明该功能模块的编号和模块名称

3.1.1 程序描述

简要描述安排本模块（或子程序）的目的意义，程序的特点

[此处加入程序描述].1.2 功能

(1)功能说明

详细描述此模块（子程序）完成的主要功能

[此处加入功能说明]

(2)功能框图

[此处加入功能框图].1.3 输入项

描述每个输入项的特征，如：标识符，数据类型，数据格式，数值的有效范围，输入方式等

[此处加入输入项].1.4 输出项

描述每个输出项的特征，如：标识符，数据类型，数据格式，数值的有效范围，输出方式等

[此处加入输出项].1.5 算法

[此处加入算法].1.6 流程逻辑

[此处加入流程逻辑].1.7 接口

分别列出和本模块（子程序）有调用关系的所有模块（子程序）及其调用关系，说明与本模块（子程序）有关的数据结构

[此处加入接口].1.8 限制条件

说明本模块（子程序）运行中受到的限制条件

[此处加入限制条件]

3.2 模块单元（或子程序）（标识符）2（名称）

„„„

第4章 软件界面设计规范

说明：软件界面设计属于详细设计，设计人员可根据项目的规模及时间跨度来决定是否单列出来，可灵活掌握

4.1 编写目的

当今软件界的所有软件无不是可视化的用户界面，它的好处不外乎它有美观、直接、操作者易懂和操作方便等好处。（此处输入编写文档的具体目的）。

4.2 内容：.2.1 界面设计思想

“为用户设计，而不是设计者”。

4.2.2 界面设计原则

（1）界面要美观、操作要方便并能高效率地完成工作。

（2）界面要根据用户需求设计。

（3）界面要根据不同用户的层次设计。（有的用户对计算机相当了解而有的从来就没碰过计算机）

（4）避免出现嵌套式的界面设计。

（5）界面和代码要相互制约。

（6）界面要通“人性”。即要有引导用户操作的功能，不能是操作一有误就卡住什么都做不下去，又无任何提示来帮助用户如何进行操作。

4.2.3 界面设计样式

(1)登录界面

（此处加入登陆界面图）

（2）系统功能布局

菜单形式

（此处加入界面图）

标签栏形式

（此处加入界面图）

（3）录入界面

（此处加入界面图）

（4）查询界面

（此处加入界面图）

（5）统计界面

（此处加入界面图）.2.4 常见提示信息样式

（1）当操作会带来严重后果时（默认按钮为“否“）

（此处加入界面图）

（2）当操作会带来一定后果时（默认按钮为“否“）

（此处加入界面图）

（3）当需征求操作者意愿时（默认按钮为“是“）

（此处加入界面图）

（4）当需提供操作者帮助时

（此处加入界面图）

（5）当操作者操作有错时

（此处加入界面图）

（6）当是一般提示时

（此处加入界面图）

范例：

（此处加入界面图）

4.2.5 常见错误信息样式

（此处加入界面图）

4.2.6 其他界面约定

字体：一般界面字体为宋体，字号为9Twip（只要把窗体字体设为宋体，字号为9twip即可）。

颜色：界面颜色采用默认色（除非用户有特殊要求）。

按钮：高度375Twip，除“确定”和“取消”外都需含有快捷键。

常见按钮快捷键：添加(A)、删除(D)、查询(S)、更新(U)、打印(P)、关闭(C)、重新查询(R)、统计(T)、退出(E)。

数据：REAL型数据一律保留两位小数且右对齐。

对齐方式：界面上的标题（Label）右对齐，其他控件左对齐。

第5章 编码标准规范

5.1 编写目的：

使用统一编码约定集的主要原因，是使应用程序的结构和编码风格标准化，以便于阅读和理解这段编码。好的编码约定可使源代码严谨、可读性强且意义清楚，与其它语言约定相一致，并且尽可能的直观。

一组通用目的的编码约定应该定义完成上述目的所必需的、能让程序员自由地创建程序逻辑和功能流程的最小的要求。编码约定的目的是使程序易于阅读和理解，而不是用过份的约束和绝对的限制来束缚程序员本身的创造性。

5.2 内容：

程序设计语言的特性和风格会直接影响到软件的质量和可维护性。

编码原则：

应尽量避免在系统初始化时运行过多的代码。（此处加入详细原则）

（1）选用控制结构只准许一个入口和一个出口。

（2）程序语句组成容易识别的块，每块只有一个入口和一个出口。

（3）复杂的结构应该用基本控制结构进行组合嵌套来实现。

（4）语句中没有的控制结构，可用一段等价的程序段模拟，但要求该程序段在整个系统应前后一致。

（5）严格控制GOTO语句，仅在下列情形才可使用。用一个非结构化的程序设计语言去实现一个结构化的构造。

?

在某种可以改善而不是损害程序可读性的情况下。? 5.2.1 对象命名约定

公式：对象名称=对象前缀+自定义名称（自定义名称要有一定的意义且第一个字母大写）

说明：如果是不需要对其编码的对象，那么对象名用默认对象名。

应该用一致的前缀来命名对象，使人们容易识别对象的类型。下面列出了 Delphi 支持的一些推荐使用的对象约定。

（1）推荐使用的项目前缀

控件类型 前缀 例子

Class Module cmdl cmdlCheck

Data Environment dev devPrints

Data Report drt drtEnglish

Form frm frmEntry

MDIForm mfrm mfrmSinoexport

Module mdl mdlConnection

Project pjt pjtCkmis

（2）推荐使用的控件前缀

控件类型 前缀 例子

3D Panel pnl pnlGroup

ADO Data ado adoBiblio

Animated button ani aniMailBox

Check box chk chkReadOnly

Combo box drop-down list box cbo cboEnglish

Command button cmd cmdExit

Common dialog dlg dlgFileOpen

Communications com comFax

Control（当特定类型未知时，在过程中所使用的）ctr ctrCurrent

Data dat datBiblio

Data-bound combo box dbcbo dbcboLanguage

Data-bound grid dbgrd dbgrdQueryResult

xxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxx xxxxxxxx（3）推荐使用的数据访问对象的前缀

用下列前缀来指示数据访问对象。

数据库对象 前缀 例子

Connection con conReports

xxx db dbAccounts

一些例子：

（此处加入例子）

（4）推荐使用的菜单前缀

应用程序频繁使用许多菜单控件，对于这些控件具备一组唯一的命名约定很实用。除了最前面 “mnu” 标记以外，菜单控件的前缀应该被扩展：对每一级嵌套增加一个附加前缀，将最终的菜单的标题放在名称字符串的最后。下表列出了一些例子。

菜单标题序列 菜单处理器名称

（此处加入标题序列及处理器名称）

当使用这种命名约定时，一个特定的菜单组的所有成员一个接一个地列在 Visual Basic 的“属性”窗口中。而且，菜单控件的名字清楚地表示出它们所属的菜单项。

（5）为其它控件选择前缀

对于上面没有列出的控件，应该用唯一的由两个或三个字符组成的前缀使它们标准化，以保持一致性。只有当需要澄清时，才使用多于三个字符的前缀。

例如，（此处加入例子）

5.2.2 常量和变量命名约定

公式：常量或变量名称=常量或变量范围前缀+常量或变量类型前缀+自定义名称（自定义名称要有一定的意义且第一个字母大写）

除了对象之外，常量和变量也需要良好格式的命名约定。本节列出了（此处加入变量列表）。

变量应该总是被定义在尽可能小的范围内。全局(Public)变量可以导致极其复杂的状态机构，并且使一个应用程序的逻辑非常难于理解。全局变量也使代码的重用和维护更加困难。

Delphi中的变量可以有下列范围：

范围 声明位置 可见位置

过程级（此处加入名称）

模块级（此处加入名称）

全局（此处加入名称）。

较好的编码习惯是尽可能写模块化的代码。例如，如果应用程序显示一个对话框，就把要完成这一对话任务所需要的所有控件和代码放在单一的窗体中。这有助于将应用程序的代码组织在有用的组件中，并减小它运行时的开销。

除了全局变量（应该是不被传递的），过程和函数应该仅对传递给它们的对象操作。在过程中使用的全局变量应该在过程起始处的声明部分中标识出来。

变量范围前缀

随着工程大小的增长，划分变量范围的工作也迅速增加。在类型前缀的前面放置单字母范围前缀标明了这种增长，但变量名的长度并没有增加很多。

范围 前缀 例子

全局 g GstrUserName

模块级 m MblnCalcInProgress

本地到过程 无 DblVelocity

（此处加入说明）

变量

声明所有的变量将会（此处加入说明）。

应该给变量加前缀来指明它们的数据类型。而且前缀可以被扩展，用来指明变量范围，特别是对大型程序。

变量数据类型

用下列前缀来指明一个变量的数据类型。

（此处加入说明）

描述变量和过程名

变量或过程名的主体应该使用大小写混合形式，并且应该足够长以描述它的作用。而且，函数名（此处加入函数名称）。

对于频繁使用的或长的项，推荐使用标准缩略语以使名称的长度合理化。一般来说，（此处加入特例说明）就困难了。

当使用缩略语时，要确保它们在整个应用程序中的一致性。在一个工程中，如果一会儿使用（此处加入说明问题），将导致不必要的混淆。

用户定义的类型

在一项有许多用户定义类型的大工程中，常常有必要给每种类型一个它自己的三个字符的前缀。如果这些前缀是（此处加入前缀名称）。

5.2.3 结构化编码约定

（此处加入约定说明）

记住下列几点：

每一个重要变量的声明应该包括（此处加入变量名称）。

（2）格式化代码

因为许多程序员（此处加入问题）

（此处加入解决问题的说明）

（3）给常量分组

变量和定义的常量应该按功能分组，而不是分散到单独区域或特定文件中。

（4）运算符

（此处加入运算符列表及说明）

（5）为（此处加入问题）查询创建字符串

（此处加入说明）

5.2.4 数据源的约定

（此处加入数据源的约定）

5.2.5 数据库访问约定

访问数据库用ODBC drivers/ADO，但如果在有的技术ADO解决不了的情况下可用其他方法。

数据库访问技术有：（此处加入说明）

5.2.6 其他约定

（1）当日期、时间型数据要求严格时，（此处加入说明）

（2）记录集应用约束

（此处加入约束）

利用记录集

（此处加入记录集说明）

（3）文件命名约定

工程文件和各模块文件以汉字命名保存，这样可方便管理和查找。

第二篇：UI设计思路

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

UI设计思路

UI测试用例设计方向[转]

设计功能和界面测试用例

1.1 文本框、按钮等控件测试

1.1.1 文本框的测试

如何对文本框进行测试 a,输入正常的字母或数字。b,输入已存在的文件的名称；

c,输入超长字符。例如在“名称”框中输入超过允许边界个数的字符，假设最多255个字符，尝试输入

256个字符，检查程序能否正确处理；

d,输入默认值，空白，空格；

e,若只允许输入字母，尝试输入数字；反之；尝试输入字母； f,利用复制，粘贴等操作强制输入程序不允许的输入数据； g,输入特殊字符集，例如，NUL及n等；

h,输入超过文本框长度的字符或文本，检查所输入的内容是否正常显示；

精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

i,输入不符合格式的数据，检查程序是否正常校验，如，程序要求输入年月日格式为yy/mm/dd，实际输入yyyy/mm/dd，程序应该给出错误提示

在测试过程中所用到的测试方法： 1,输入非法数据； 2,输入默认值； 3,输入特殊字符集； 4,输入使缓冲区溢出的数据； 5,输入相同的文件名；

--命令按钮控件的测试

测试方法：

a,点击按钮正确响应操作。如，单击确定，正确执行操作；单击取消，退出窗口；

b,对非法的输入或操作给出足够的提示说明，如，输入月工作天数为32时，单击”确定“后系统应提示:天数不能大于31；

c,对可能造成数据无法恢复的操作必须给出确认信息，给用户放弃选择的机会；

精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

--单选按钮控件的测试

测试方法：

a,一组单选按钮不能同时选中，只能选中一个。

b,逐一执行每个单选按钮的功能。分别选择了“男”“女”后，保存到数据库的数据应该相应的分别为“男”“女”；

c,一组执行同一功能的单选按钮在初始状态时必须有一个被默认选中，不能同时为空；

---up－down控件文本框的测试

测试方法：

a,直接输入数字或用上下箭头控制，如，在“数目”中直接输入10，或者单击向上的箭头，使数目变为10；

b,利用上下箭头控制数字的自动循环，如，当最多数字为253时，单击向上箭头，数目自动变为1；反之亦适用；

精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

c,直接输入超边界值，系统应该提示重新输入；

d,输入默认值，空白。如，“插入”数目为默认值，点击“确定”；或，删除默认值，使内容为空，单击“确定”进行测试； e,输入字符。此时系统应提示输入有误。

------组合列表框的测试

测试方法：

a,条目内容正确，其详细条目内容可以根据需求说明确定； b,逐一执行列表框中每个条目的功能； c,检查能否向组合列表框输入数据；

------复选框的测试

测试方法：

a,多个复选框可以被同时选中； b,多个复选框可以被部分选中；

精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

c,多个复选框可以都不被选中； d,逐一执行每个复选框的功能；

----------列表框控件的测试

测试方法：

a,条目内容正确；同组合列表框类似，根据需求说明书确定列表的各项内容正确，没有丢失或错误； b,列表框的内容较多时要使用滚动条；

c,列表框允许多选时，要分别检查shift选中条目，按ctrl选中条目和直接用鼠标选中多项条目的情况；

滚动条控件的测试

要注意一下几点：

a,滚动条的长度根据显示信息的长度或宽度及时变换，这样有利于用户了解显示信息的位置和百分比，如，word中浏览100页文档，浏览到50页时，滚动条位置应处于中间；

b,拖动滚动条，检查屏幕刷新情况，并查看是否有乱码；

精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

c,单击滚动条； d,用滚轮控制滚动条； e,滚动条的上下按钮。

各种控件在窗体中混和使用时的测试

a,控件间的相互作用；

b,tab键的顺序，一般是从上到下，从左到右； c,热键的使用，逐一测试； d,enter键和esc键的使用；

在测试中，应遵循由简入繁的原则，先进行单个控件功能的测试，确保实现无误后，再进行多个控件的的功能组合的测试。

ps:密码输入框测试时要特别注意进行字母大写输入的测试。

查找替换操作

案例演示:打开word中的“替换”对话框 测试本功能有通过测试和失败测试两种情况 通过测试: 1,输入内容直接查找,或查找全部

2,在组合框中寻找已经查找过的内容,再次查找并确认文档的内容正

精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

确,如,已经查找过“测试用例”,再次进入不用重新输入查找内容,直接在文档中搜寻就可以.失败测试: 1,输入过长或过短的查询字符串.如,假设查询的字符串长度为1到255,那么输入0,1,2,256,255和254进行测试;2,输入特殊字符集,如,在word中.^g代表图片,^代表分栏符,可以输入这类特殊字符测试;

替换测试大体相同.关于编辑操作窗口的功能测试的用例: 1,关闭查找替换窗口.不执行任何操作,直接退出;2,附件和选项测试.假如,设定“精确搜寻”,“向后”搜索等附件选项等等来测试;3,控件间的相互作用.如,搜寻内容为空时,按钮“搜寻全部”,“搜寻”,“全部替换”,“替换”都为灰色.4,热键, Tab键.回车键的使用.插入操作

精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

1,插入文件 测试的情况 a,插入文件;b,插入图像;c,在文档中插入文档本身;d,移除插入的源文件;e,更换插入的源文件的内容;

2,链接文件 测试方法: a,插入链接文件;b,在文档中链接文档本身;c,移除插入的源文件;d,更换插入的源文件的内容.3,插入对象 要测试的内容

a,插入程序允许的对象,如,在word中插入excel工作表;b,修改所插入对象的内容.插入的对象仍能正确显示;c,卸载生成插入对象的程序,如,在word中插入excel工作表后卸载

精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

excel,工作表仍正常使用.编辑操作

编辑操作包括剪切,复制,粘贴操作.测试剪切操作的方法

a,对文本,文本框,图文框进行剪切;b,剪切图像 c,文本图像混合剪切 复制操作方法与剪切类似.测试时,主要是对粘贴操作的测试,方法是: a,粘贴剪切的文本,文本框及图文框;b,粘贴所剪切的图像;c,剪切后,在不同的程序中粘贴

d,多次粘贴同一内容,如,剪切后,在程序中连续粘贴3次;e,利用粘贴操作强制输入程序所不允许输入的数据.精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

界面测试用例的设计方法 1,窗体

测试窗体的方法: a,窗体大小,大小要合适,控件布局合理;b,移动窗体.快速或慢速移动窗体,背景及窗体本身刷新必须正确;c,缩放窗体,窗体上的控件应随窗体的大小变化而变化;d,显示分辨率.必须在不同的分辨率的情况下测试程序的显示是否正常;进行测试时还要注意状态栏是否显示正确;工具栏的图标执行操作是否有效,是否与菜单懒中图标显示一致;错误信息内容是否正确,无错别字,且明确等等;

2,控件 测试方法: a,窗体或控件的字体和大小要一致;b,注意全角,半角混合 c,无中英文混合.菜单

进行测试时要注意

精心收集

精心编辑

精致阅读

如需请下载！

演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案

a,选择菜单是否可以正常工作,并与实际执行内容一致;b,是否有错别字: c,快捷键是否重复;d,热键是否重复;

精心收集

精心编辑 精致阅读 如需请下载！

第三篇：UI设计教学

实用的UI设计教程

什么是UI？

UI英文全称是：USER INTERFACE，中文即是用户界面 UI包括三大块，UX用户体验，GUI视觉表现，HCI人机交互 零基础学员怎么学习UI 首先，工欲善其事必先利其器！

先要学会PS（98%的设计师工作中会用到）AI（60%的设计师工作中会用到）DW（30%的设计师工作中会用到）FLASH（15%的设计师工作中会用到）3D视频（10%的设计师工作中会用到）这些软件的教程，可以在搜索引擎里搜到。

或者在网店买一本带视频教学光盘的PS和AI的书籍，学习过程耗时1-2个月。

切记，在你软件基础不扎实的情况下，看任何画图标和画界面的教程都是枉然的，你也看不懂，只能徒增挫折感！基础不扎实，跟着别人教程画。就是依样画瓢，知其然不知其所以然！

学PS和AI的注意事项：

对UI来说，PS中的路径、图层效果、图层蒙版是UI最常用的功能，务必重点掌握。AI的话，也是路径操作、路径修改要重点掌握。

学完改课程后，你可试着画剪影ICON，通过加，减，交等布尔运算把图形拼出来。

再者：图标认知，图标主要是识别性

图标是对这个世界的一个隐喻，因为其国际通用性以及形、色、意比文字更有有视觉冲击力。所以，一个好的功能图标，首先要有很强的识别性，其次才是美不美，和整体UI界面是否风格相符。连功能识别性都不清的图标，只能算作一个装饰性的东西。

APP的线框图，这个呢就是一个APP应用软件的每个页面的布局结构，一般是由产品交互设计师来做线框图的。但是国外因为很多公司岗位定义不明确，所以现在很多PM产品经理在兼做产品交互，也有让GUI视觉设计师来做的。

其实，这个东西主要就是定义，功能在哪里，具体怎么跳转和应用的交互流程和框架。

品创设计UI设计流程：产品需求-产品定义-产品功能定义-技术评估-信息架构-线框布局-软件架构-数据定义-视觉设计-切图开发-上线测试-问题跟踪-问题反馈-迭代开发

第四篇：《UI设计》课程标准

《UI设计》学习领域课程标准

执笔：甄珍

审核：

时间： 2013-5-

5一、学习领域定位

“UI”热是近几年来兴起的潮流，近几年国内很多从事手机，软件，网站，增值服务等企业和公司都设立了这个部门。还有很多专门从事UI设计的公司也应运而生。

正是鉴于目前UI行业的发展状况，本专业第一次开设计《UI设计》课程。

《UI设计》是所有与网络通信软件相关专业课程，该课程既可以巩固前期所学的设计基础理论知识和设计软件应用知识，还重在给学生开拓新的专业知识面，认知一个新的设计领域，从而拓展职业能力和就业选择面。

二、职业分析

目前UI即用户界面设计行业刚刚在全球软件业兴起，属于高新技术设计产业，与国外在同步发展水平。其次国内外众多大型IT企业(例如：百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大、淘宝等众多企业)均已成立专业的UI设计部门，但专业人才稀缺，人才资源争夺激烈。但目前全国UI设计专业的系统教学极其稀少。UI设计师的待遇和地位也逐渐上升。

三、学习目标

知识目标：使学生能熟悉UI设计的流程和设计方法，并能使用制作有创意的，充满视觉冲击力的UI设计作品。

技能目标：使学生学会系统规划和全局思维，能够完成一整套UI系统的设计。

素养目标：使学生具备能从事UI系统的开发与设计能力，培养学生团队合作、及独立思考能力。

四、学习内容

四、学习领域课程设计思路

（一）设计理念

五、考核方式

学生成绩的评定，以学生平时表现和任务完成情况及最终考核来核定。评分细则如下表：

其中，平时成绩包括平时上课的表现和各任务的完成情况，占总成绩的30％；最终考核成绩所用考核方式为机试，占总成绩的70％。

第五篇：UI设计流程

UI设计流程

阶段一：分析

1用户需求分析 2用户交互场景分析 3竞争产品分析

这两者可以说是相辅相成的。对于一个较为正规的项目而言，必然有对用户需求的分析内容。Tanjurd瑭锦资深UI设计师表示其中用户UI需求是重要的组成部分。如果说UI设计原则是所有UI设计的出发点的话，那么用户UI需求就是本次设计的出发是好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考察，但是UI设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当然有的时候可以参考的并不一定是竞争产品。

阶段二 设计需求：（叶面设计前需提给UI页面组）

1.系统设计需求文档。2.系统结构文档（例如栏目划分，目录结构，导航方式等）。3.较复杂页面表现形式草图（手绘或相关软件绘制）。4.较复杂业务流程文档。5.如有可能提供参考和示例站点。6.与程序员沟通部分页面实现方法。

段三：页面制作：

1.经过确认的美术设计的方案图7.系统设计需求文档等，较复杂务流程文档。2.所需页面脚本需求，与程序员沟通部分页面实现方法。3提交给程序

用户交互case图（说明用户和系统之间的联系）用户交互流程图（说明交互和事件之间的联系）交互功能设计图（说明功能和交互的对应关系）最终得到UI的设计产品。

阶段四：验证

界面测试：（页面组提交给测试组包括：1.经确认的设计方案图。2.静态模板页面。以上二项均为便于查看嵌入程序后的叶面情况。3.常出现的界面错误：图片错误，页面不美观，布局不合理，与原先设计不符，文字 错误HTML代码错误，页面程序错误。4.界面bug测试报告：

正如Tanjurd瑭锦国际UI交互设计原则文中提到的，对于UI产品的验证主要从下面几个方面入手：

1、功能性对照UI设计的再好，和需求不一致也不可以。

2、实用性内部测试UI设计的最重要点就是实用性。

3、用户焦点小组UI设计是否优秀的重要衡量依据。最后，瑭锦Tanjurd说一点其他的问题。现在往往认为交互式设计和最终的UI效果设计可以截然分开。这就好比说需求可以和设计截然分开，是不可能的。

总结：

1.产品定位与市场分析这一类工作大多都是由新产品研发部门以及市场需求完成的，但UI设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。

2.用户研究与分析这个过程是非常重要的，设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等，提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析。

3.架构设计这里涉及到比较多的界面交互与流程的设计，根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。

4.原型设计我觉得这里应该是一个小的阶段标志，要对前面所有工作加以设计方面的实施，根据进度与成本，可以把原型控制在“手绘－图形－FLASH-视频”几个质量范围。原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性。

5.界面设计如果很倾向于图形界面设计，这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计，否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。

6.界面输出作为设计师，在这一部分的工作就是配合好开发人员完成相关的界面结合。7.完善工作这个环节是很多部门共同参与的，包括可用性的循环研究、用户体验回馈、测试回馈。同时，UI人员也应该把一些可行性建议进行完善。Tanjurd瑭锦表示很多设计师做了东西不喜欢改，这是一个大忌。

如上的流程，可能会有很多部门共同参与完成，UI设计师如何与团队配合并发挥自己应有的作用非常重要。一名合格的UI设计师，应该能贯穿整个UI流程进行工作，而并非是单纯的图形界面设计。