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

1、如何写“完” UI 设计说明书 .txt 男人应该感谢 20 多岁陪在自己身边的女人。 因为 20 岁是男 人人生的最低谷， 没钱， 没事业； 而 20岁， 却是女人一生中最灿烂的季节。 只要锄头舞得好， 哪有墙角挖不到？ 1004*623 如何写“完” UI 设计说明书 我们中的大多数人都写过 UI 设计说明书（或 UI 规格说明书） ，论坛里也经常会有类似的讨论， 对 UI 设计说明书的框架和结构我就不做过多的说明了。为什么有人写了上百页的UI 设计说明书，别人还是看不懂，或者说忽略了细节呢？那今天我们重点讨论一下关于细节阐述和表 达的一些经验，以免写出只有自己看得懂的 UI 设计说明书。

2、 我先说说我总结的一些经验吧，希望大家积极讨论： 我们的目标是：（没有蛀牙，八_玩笑！） 既要清晰描述用户界面原型中的细节和交互方式，又要方便项目组的其他开发人员、需求人 员以及测试人员等角色交流察看的说明文档。例如一个全新的预言项目不可能要求用户满意度在）产品最终用户群及产品用途 （了解用户的年龄、 职业、产品的使用环境等都是非常必要的） 首先满足基本功能。（例如DVD机的基本功能是播放影碟，可能还有播放CD的功能等等）主要功能（在产品的几十个功能中通过用户验证和项目组筛选， 选取用户最常用到的功能，主要内容包括：90%以上，1. 产品的目标和成功标准， 对升级产品要求就会高一些。3.4.2

3、.将其优化，以不同层次展现于界面上。 ）必须紧贴需求，围绕功能点展开。 描述语言简短精确（这样别人看的时候才不会烦） 保持文本的易维护性，建议使用WOR的大纲视图编写，便于更改和查找。说明书一定要有版本管理，对每次更新内容要做详细说明。图标要与名称一同提交，并说明是什么类型，如桌面图标、列表中的图标、工具栏图标、5. 用户界面特性。 （每一款界面都有自己的特性，比如触摸屏的操作界面与手机的操作界面 就算功能完全一样，结构、布局等特点也不会相同的。 ） 几点注意事项1.2.3.5.4.按钮图标、属性框或提示信息框中的图标等等。6. 注意纪录， 包括项目组和用户以及合作伙伴， 如果在解释某一特性时

4、令两人以上会感到困 惑，那这一部分就需要更清楚的阐述了。7. 设计与实现同步，这个时最难的了，很多设计由于程序无法实现都被“卡”掉，早期程序 也无法确定是否可以实现，伤脑筋！8.UI1.2.3.4.5.维护 UI 设计说明书时不要忘记维护原型，作为 UI 设计说明书的补充原型是很重要的。 设计中容易被忽略的地方 支持错误提示和撤销操作 简便的安装和卸载。必要的设置和帮助。 异常处理、错误消息的描述和问题回应提示。除界面上有的图标和按钮外， 还要有快捷键、 菜单访问键、 右键菜单、 是否支持从其它软 件界面内托拽复制文件等操作的说明。6.7.8.域、菜单和按钮在什么情况下为不可点击状态。状态区，

5、用来描述界面状态的区域，通常位于页面下方。（PS存储时状态区会显示进度条） 剪贴板行为，用户在我们产品中拷贝的文字或图片的局部，是否可以贴入其他程序。 指针的行为，说明超过多长时间的等待时应出现沙漏状态，在文本输入区光标应有改变、9.有链接的地方有变为小手等10.11.12.13.声音行为，警示音、按钮触发音等 统一消息窗的弹出位置、背景色、大小、布局及特色 菜单栏和下拉选项等程序动作的描述，是向下还是向右弹出等。 动态状态描述，如果要求窗口渐隐或渐显，那就要说明渐隐或渐显过程的时间以及方式半透明还是马赛克）等。Art Designer 作业规范书1 定义2 作业环境? Art Designe

6、r 日常作业的主要编辑工具：? 软件图标主要编辑工具：? 各种 Logo 设计及印刷设计： 其他常用的编辑工具：2.2 Art Designer 一般作业要求 ? 各个产品需求图档主要是： Logo & Symbolic Mark ：软件的识别标志象征图及标准字搭配方案； Autorun ：光碟自动执行界面； Splash ：软件激活时的欢迎及说明画面； Login ：登陆界面；Banner:显示版权信息及系列软件版本号画面；Icon ：软件工具栏，应用程序配套图标； Source :各类软件所图形资源。? 命名规范:aaa_bbb.ccc aaa-ccc- 文件后缀名（文件类型）?

7、备份共享方式:3 产品相关图文件 编辑规格3.1 图文件编辑规格以下为产品图文件编辑模板的举例说明:图文件编辑规格（附图以“ XXXXXX为例）Logo & Symbolic Mark :软件的标志和象征图形用于宣传和视觉记忆。（由于标志的范围很广， 设计制作时必须用适量设计软件完成， 以满足各种不同运用的需求） Autorun:软件CD安装时有不同选项在以此图为基础添加不同选项的链接按钮。（软件直接安装无选项时以此图为底图） 软件执行图标 （Icon） 编辑规格 应用程序图标规格: ? 64*64 32bit ? 48*48 16bit软件代号 bbb- 图片类别 （splash 、

8、sanner 、logo 等）、 48*48 32bit、 32*32 16bit32*32 32bit24*24 16bit24*24 32bit 、16*16 32bit16*16 16bit? 32*32 4bit（ Windows 2000 及以下版本支持 标可以在不同系统中自动匹配， Tool Bar 图标规格：、16*16 4bit16bit 图标而4bit 的图标主要用于“安全模式”中显示）Windows xp 支持 32bit 的图标，全规格的图? 24*24 16bit 、 16*16 16bit? 16*16 4bitMenu 图标规格：? 16*16 16bit? 16*

9、16 4bit4. Art Designer 作业遵循流程规范5 Art Designer 作业中 Adobe Photoshop 专用层面图文件命名规范6 软件包装设计的规范7 宣传页的设计要素及注意事项8 Art Designer 日常学习交流V1.0* 年-月 - 日UI 设计指南 年-月-日 版本 作者 审核 批准 更改记录 日期 被修改的章节 修改的类型 * 修改描述 修改人 年- 月-日 全部 A 新建 * 修改类型分为 A - ADDED M - MODIFIED D - DELETED1 简介1.1 目的 提供 UI 设计流程定义，为交互设计提供依据。1.2 背景 使 UI 工

10、作整体流程更具规范化和为这一规范更具有可视性。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 纵向：

11、是角色的划分对于一个项目来说通常会有三个角色分别是用户研究角色、设计 角色、制作角色用户研究角色：主要是让 UI 实现以用户为中心的设计主要工作有两点 在进行界面设计前了解整体产品的需求，并针对 UI 设计了解用户对 UI 的需 求，再把这需求传达给设计师，即 UI 需求分析报告 ，这过程中的主要方法有焦点小组等。在 UI 设计过程当中会不停的要求对设计进行评价这是就要求让用户来评价，我们称这种方法叫使用性测试，在流程图中的表现是对交互模型的使用性测试和验证性地使 用性测试。设计角色：主要是实现界面的交互设计即逻辑设计和界面设计 在做交互设计时一般是要根据 UI 需求分析报告做交互模型，即用一

12、些工 具实现一些交互的动作，让用户能直观的了解界面间的逻辑关系，来确认设计的可行性。 在界面设计时主要是设计皮肤即界面的布局图标的摆放等，这时的设计也是 要遵循需求，并且要写 UI 设计说明。制作角色：主要是实现界面的截图及坐标的定义 在这过程中制作角色要和开发人员沟通，两个角色相互配合完成项目的最后阶段。2.1.2 横向：是代表时间轴和整个项目开发的过程是对应的： UI 的数据采集阶段实际上就是 项目的启动阶段交互设计和使用性测试阶段就是项目的细化阶段界面设计和美术制作阶段就 是项目的构造阶段。2.2 关于评审点的说明在 UI 流程图中实际上可以把 UI 的工作划分成四个部分即数据采集、交互

13、设计、界面设计、 美术制作。在数据采集阶段：会有可能是非正式评审主要会有交互设计师需求人员等参与； 在交互设计阶段：也会有评审主要会有用户研究角色、需求角色和开发人员角色来评审逻辑 关系的合理性，包括使用合理性和设计合理性；在界面设计阶段：在设计过程中会不断的和用户及需求人沟通以达到以用户为中心的设计， 这结束后会有很正规的评审活动， 这是的评审实际上是对整个 UI 项目的整体评审， 包括工作 量、质量等多项的正规的评审；在美术制作阶段：美术制作阶段实际上就是制作角色和开发人员的不断的沟通完成全部开发 工作的阶段，因此这过程的评审是由双方面的协调与合作来表现的。2.3 UI 设计主要流程时间

14、1 时间 2 时间 3UI 启动阶段 UI 细化阶段 UI 构造阶段数据采集 分析报告 交互模型 使用性测试 界面原型设计 使用性测试 评审 美术制作 验证 性测试需求分析报告 需求分析报告2.4 UI 设计时间表和里程碑：数据采集 * 交互模型 * 使用性测试 * 启动阶段分析报告 细化阶段需求分析报告 细化阶段需求分析报告美术制作 评审 使用性测试 *界面原型设计验证性测试 * ：表示时间点 “* ”：表示可裁减的活动 “ . ”：表示阶段生成文档2.5 参与人及担任角色和工作量 角色 人员 工作量 项目经理因为现在的系统支持图 再用 Adobe Photoshop 建议您与高水平3D软件

15、经验的图形设计者。图标设交互研究工程师 设计角色 制作角色Win dowsX P的新样式，为创建图标做好准备。图标样式特性(1) 色彩丰富，是对 添了动态活力。 (3)界面设计之图标设计规范 图标样式应该有趣、 色彩丰富且充满活力， 标是 32 位图标， 并且边缘非常平滑。 在矢量程序中绘制完每个图标后， 进行处理可使图像更加完美。本规范是专为设计者编写的。在创建图像时， 的图形设计者一起工作，尤其是具有丰富的矢量和 计概述的目的是让您熟悉Win dowsXP外观的补充。(2)不同的角度和透视特性为图像增元素的边角十分柔和，并略微有些圆滑。(4) 光源位于图标的左上角，同时有环绕光照亮图标的其

16、它部分。(5) 渐变效果使图标具有立体感，进而使图标的外观更加丰满。(6) 投影使图标更具对比度和立体感。(7) 添加轮廓可使图像更清晰。(8) 日常对象 (如计算机和设备 )具有更现代化的个人外观。 图标尺寸Win dows XP图标有四种尺寸,X 32像素 (3) 24 X 24像素建议使用以下四种尺寸：(1) 48X 48 像素 (2) 3232 位图标为 24 位图像加上 8 位 alpha 通道。使图标边缘非 每个WindowsXP图标应包含以下三种色彩深度，以支持不同 8位图像 (256 色) ，加上(4) 16 X16 像素 图标色彩深度支持WindowsXP支持 32 位图标。

17、常平滑，且与背景相融合。的显示器显示设置：24 位图像加上 8位 alpha 通道(32 位)1 位透明色 4位图像 (16 色)，加上 1 位透明色 调色板图标中使用的主要颜色。 对象的角度和分组WindowsXP样式图标使用的透视网格：并非所有对象使用 16X 16的复杂图像都能获得较好效果。某些对象通常以直观图像显示：文档图标、符号图标 ( 如警告或信息图标 ) 、单一对 象图标 ( 如放大镜 ) 除非创建重叠辅助对象可以更清楚地表达图标的含义， 否则就可读性 和完整性而言，还是应使用直观图像。还应考虑如何按组查看图标，以便确定如何将对象分 组。 投影使用投影后，WindowsXP图标将

18、更清晰且更具立体感。可在Photoshop中实现这种效果， 本指南的后面部分将对此进行描述。 若要为图像添加投影， 请在 Photoshop 中双击图像的图 层，并选择 Drop Shadow。然后将 Angle更改为135, Distanee 更改为2 , Size更改为2。 此时投影为 75%不透明黑色。 轮廓绘制XP样式图标时，为图像添加轮廓可使之更清晰，并可保证图像在不同背景色上都具有较好效果。 概念设计图标时，请考虑以下因素： 使用已有概念以确保真实表达了用户的想法。考虑 图标在用户界面环境中以何种形式出现，以及如何作为图标集的一部分使用。考虑图形的文 化背景。避免在图标中使用字母、

19、单词、手或脸。必须用图标表示人或用户时，请尽可能使 其大众化。如果图标中的图像由多个对象组成，应考虑如何使图像尺寸更小。建议在图标中 使用的对象不超过三个。对于16 X 16的尺寸大小，还可考虑删除某些对象或简化图像使之更容易辨认。 透明工具将 Gif Movie Gear(GMG) 打开一个对话框，其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在GMG中选作透明背景色的颜色)。重复所有4位和8 位帧。若要保存图标，请选择File->Save Icon As.。 创建工具栏Windows 工具栏图标除不使用投影之外，使用的样式与其它图标相同。由于工具栏图标非常

20、小，建议您使用简单的图像。如果以直观方式显示图像即可清晰地表达图标的含义，则 不必使用其它复杂方式。 创建 AVIWindowsXP使用8位AVI。创建.avi文件的过程与创建图标的过程相同-在Photoshop中准备图像，然后将其拖动到GMG中。请按以下指导创建8位图标。若要使用 GMG保存AVI，请转至 File->Export As->AVI file 。 创建 .avi 文件时， 请考虑以下因素： 使用品红 (R255 GO B255)作为背景透明色。在 Photoshop中，重要的一点是不要出现杂散像素。详细设计说明书编写规范 Detailed Design Specif

21、ication 详细设计说明书编写规范第1 章 引言尽可能详细地描述程序的1.1 目的 使项目详细设计说明书的编写规范化，从而规范软件管理。各成份的设计考虑，以利于编制程序。 此处加入编写目的 1.2 背景说明该软件系统名称，开发者，详细设计原则和方案 此处加入项目背景资料 1.3 参考资料 列出有关的参考资料名称，作者，发表日期，出版单位 此处加入参考资料 1.4 定义 列出本文件中专用的术语，定义和缩写词 此处加入术语和缩写词 第 2 章 程序系统的组织结构2.1 运行环境 （ 编程协定 ） 此处加入运行环境 2 .1.1 操作系统 &数据库系统 列出系统运行的有关操作系统 &am

22、p;数据库系统的名称，版本号，对应版权单位 此处加入操作系统 此处加入数据库系统 , 并简述其特点2 .1.2 编程工具 列出开发此系统的所需的主要编成工具的名称，版本号，对应版权单位 此处加入编程工具 2 .1.3 编辑、调试、联接程序 此处加入编辑、调试、联接程序 2 .1.4 编译工具 此处加入编译工具 测试程序2 .1.5 模拟、仿真数据 模拟数据使用过去的真实数据，数据如下： 此处加入数据 过程如下： 此处加入过程2 .1.6 诊断、 此处加入诊断、测试程序 2 .1.7 检测程序 此处加入检测程序 2.2 单元命名规则 此处加入单元命名规则 2.3 程序逻辑 用图表列出本程序系统内

23、每个模块（或子程序）的名称，标识符，以及这些模块（或子 程序）之间的层次关系 此处加入程序逻辑 第 3 章 单元设计说明 此处加入单元设计说明 3.1 模块单元（或子程序） （标识符） 1（名称） 注明该功能模块的编号和模块名称3 .1.1 程序描述 简要描述安排本模块（或子程序）的目的意义，程序的特点 此处加入程序描述 3 .1.2 功能（1）功能说明 详细描述此模块（子程序）完成的主要功能 此处加入功能说明 （2）功能框图 此处加入功能框图 3 .1.3 输入项 描述每个输入项的特征，如：标识符，数据类型，数据格式，数值的有效范围，输入方 式等 此处加入输入项 3 .1.4 输出项 描述每

24、个输出项的特征，如：标识符，数据类型，数据格式，数值的有效范围，输出方 式等 此处加入输出项 3 .1.5 算法 此处加入算法 3 .1.6 流程逻辑 此处加入流程逻辑 3 .1.7 接口 分别列出和本模块（子程序）有调用关系的所有模块（子程序）及其调用关系，说明与 本模块（子程序）有关的数据结构 此处加入接口 3 .1.8 限制条件说明本模块（子程序）运行中受到的限制条件 此处加入限制条件 3.2 模块单元（或子程序） （标识符） 2（名称）第 4 章 软件界面设计规范说明： 软件界面设计属于详细设计， 设计人员可根据项目的规模及时间跨度来决定是否 单列出来，可灵活掌握4.1 编写目的 当今

25、软件界的所有软件无不是可视化的用户界面， 它的好处不外乎它有美观、 直接、 操 此处输入编写文档的具体目的） 。作者易懂和操作方便等好处。4.2 内容：4 .2.1 界面设计思想 “为用户设计，而不是设计者” 。4 .2.2（1）（2）（3） 碰过计算机）（4）（5）（6） 都做不下去，4 .2.3（1） 登录界面（2）系统功能布局菜单形式标签栏形式（ 3） 录入界面（4） 查询界面（ 5） 统计界面界面设计原则 界面要美观、操作要方便并能高效率地完成工作。 界面要根据用户需求设计。界面要根据不同用户的层次设计。 （有的用户对计算机相当了解而有的从来就没 避免出现嵌套式的界面设计。 界面和代码

26、要相互制约。 界面要通“人性” 。即要有引导用户操作的功能，不能是操作一有误就卡住什么 又无任何提示来帮助用户如何进行操作。界面设计样式此处加入登陆界面图） 此处加入界面图）（此处加入界面图）（此处加入界面图） （此处加入界面图）（此处加入界面图）4 .2.4 常见提示信息样式（ 1） 当操作会带来严重后果时（默认按钮为“否“） （此处加入界面图）（ 2） 当操作会带来一定后果时（默认按钮为“否“） （此处加入界面图）（ 3 ） 当需征求操作者意愿时（默认按钮为“是“）（此处加入界面图）（ 4 ） 当需提供操作者帮助时（此处加入界面图） （ 5） 当操作者操作有错时（此处加入界面图） （ 6）

27、 当是一般提示时 （此处加入界面图）范例： （此处加入界面图）4 .2.5 常见错误信息样式 （此处加入界面图）4 .2.6 其他界面约定 字体：一般界面字体为宋体，字号为 9Twip （只要把窗体字体设为宋体，字号为 9twip 即可）。颜色：界面颜色采用默认色（除非用户有特殊要求） 。按钮：高度 375Twip ，除“确定”和“取消”外都需含有快捷键。常见按钮快捷键：添加（A）、删除（D）、查询（S）、更新（U）、打印（P）、关闭（C）、重新查询（R）、统计（T）、 退出（E）。数据：REAL型数据一律保留两位小数且右对齐。对齐方式：界面上的标题（ Label ）右对齐，其他控件左对齐。第

28、 5 章 编码标准规范5.1 编写目的：使用统一编码约定集的主要原因， 是使应用程序的结构和编码风格标准化， 以便于阅读 和理解这段编码。好的编码约定可使源代码严谨、可读性强且意义清楚，与其它语言约定相 一致，并且尽可能的直观。5.2 内容：程序设计语言的特性一组通用目的的编码约定应该定义完成上述目的所必需的、 能让程序员自由地创建程序 逻辑和功能流程的最小的要求。编码约定的目的是使程序易于阅读和理解，而不是用过份的 约束和绝对的限制来束缚程序员本身的创造性。 和风格会直接影响到软件的质量和可维护性。此处加入详细原则）编码原则： 应尽量避免在系统初始化时运行过多的代码。选用控制结构只准许一个入

29、口和一个出口。程序语句组成容易识别的块，每块只有一个入口和一个出口。 复杂的结构应该用基本控制结构进行组合嵌套来实现。语句中没有的控制结构， 可用一段等价的程序段模拟， 但要求该程序段在整个系（ 1 ） （ 2 ） （ 3 ） （ 4）统应前后一致。（5）严格控制GOT（语句，仅在下列情形才可使用。用一个非结构化的程序设计语言去实现一个结构化的构造。? 在某种可以改善而不是损害程序可读性的情况下。? 5 .2.1 对象命名约定 公式：对象名称 =对象前缀 +自定义名称（自定义名称要有一定的意义且第一个字母大写） 说明：如果是不需要对其编码的对象，那么对象名用默认对象名。 应该用一致的前缀来命名

30、对象，使人们容易识别对象的类型。下面列出了 Delphi 支持的一些推荐使用的对象约定。（1）推荐使用的项目前缀 控件类型 前缀 例子Class Module cmdl cmdlCheckData Environment dev devPrintsData Report drt drtEnglish Form frm frmEntry MDIForm mfrm mfrmSinoexport Module mdl mdlConnectionProject pjt pjtCkmisctr ctrCurrent2）推荐使用的控件前缀 控件类型 前缀 例子 3D Panel pnl pnlGroup

31、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 （当特定类型未知时，在过程中所使用的） Data dat datBiblioData-bound combo box dbcbo dbcboLanguageData-bo

32、und grid dbgrd dbgrdQueryResultxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxx xxxxxxxx（3）推荐使用的数据访问对象的前缀用下列前缀来指示数据访问对象。数据库对象 前缀 例子Connection con conReportsxxx db dbAccounts一些例子： （此处加入例子）（4）推荐使用的菜单前缀应用程序频繁使用许多菜单控件， 对于这些控件具备一组唯一的命名约定很实用。 除了 最前面 "mnu" 标记以外， 菜单控件的前缀应该被扩展： 对每一级嵌套增加一个附加前缀， 将 最终的菜单的标题放在名称字符串的

33、最后。下表列出了一些例子。菜单标题序列 菜单处理器名称Visual（此处加入标题序列及处理器名称） 当使用这种命名约定时，一个特定的菜单组的所有成员一个接一个地列在 Basic 的“属性”窗口中。而且，菜单控件的名字清楚地表示出它们所属的菜单项。（5）为其它控件选择前缀对于上面没有列出的控件，应该用唯一的由两个或三个字符组成的前缀使它们标准化， 以保持一致性。只有当需要澄清时，才使用多于三个字符的前缀。例如，（此处加入例子）。全局 （Public） 变量可以导致极其复杂的状 全局变量也使代码的重用和维护更加困5 .2.2 常量和变量命名约定 公式：常量或变量名称 =常量或变量范围前缀 +常量或变量类型前缀 +自定义名称（自定 义名称要有一定的意义且第一个字母大写） 除了对象之外，常量和变量也需要良 好格式的命名约定。本节列出了（此处加入变量列表）变量应该总是被定义在尽可能小的范围内。 态机构，并且使一个应用程序的逻辑非常难于理解。 难。Delphi 中的变量可以有下列范围： 范围 声明位置 可见位置 过程级（此处加入名称）模