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-图片类别 (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 作业遵循流程规范
5 Art Designer作业中 Adobe Photoshop 专用层面图文件命名规范
6 软件包装设计的规范
7 宣传页的设计要素及注意事项
8 Art Designer日常学习交流
UI设计指南
年-月-日
版本:V1.0
作者: ***
审核: **
*
批准: *** 年-月-日
更改记录
日期 被修改的章节 修改的类型* 修改描述 修改人
年-月-日 全部 A 新建 **
* 修改类型分为 A - ADDED  M - MODIFIED  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) 日常对象(如计算机和设备)具有更现代化的个人外观。 图标尺寸
手机app设计模板
  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 。 创建工具栏
  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 运行环境(编程协定)
  [此处加入运行环境]
  2 .1.1 操作系统&数据库系统
  列出系统运行的有关操作系统&数据库系统的名称，版本号，对应版权单位
  [此处加入操作系统]
  [此处加入数据库系统]
  2 .1.2 编程工具
  列出开发此系统的所需的主要编成工具的名称，版本号，对应版权单位，并简述其特点
  [此处加入编程工具]
  2 .1.3 编辑、调试、联接程序
  [此处加入编辑、调试、联接程序]
  2 .1.4 编译工具
  [此处加入编译工具]
  2 .1.5 模拟、仿真数据
  模拟数据使用过去的真实数据，数据如下：
  [此处加入数据]
  过程如下：
  [此处加入过程]
  2 .1.6 诊断、测试程序
  [此处加入诊断、测试程序]
  2 .1.7 检测程序
  [此处加入检测程序]
  2.2 单元命名规则
  [此处加入单元命名规则]
  2.3 程序逻辑
  用图表列出本程序系统内每个模块（或子程序）的名称，标识符，以及这些模块（或子程序）之间的层次关系
  [此处加入程序逻辑]
  第3章 单元设计说明
  [此处加入单元设计说明]
  3.1 模块单元（或子程序）（标识符）1（名称）
  注明该功能模块的编号和模块名称
  3 .1.1 程序描述
  简要描述安排本模块（或子程序）的目的意义，程序的特点
  [此处加入程序描述]
  3 .1.2 功能
  (1) 功能说明
  详细描述此模块（子程序）完成的主要功能
  [此处加入功能说明]
  (2) 功能框图
  [此处加入功能框图]
  3 .1.3 输入项
  描述每个输入项的特征，如：标识符，数据类型，数据格式，数值的有效范围，输入方式等
  [此处加入输入项]
  3 .1.4 输出项
  描述每个输出项的特征，如：标识符，数据类型，数据格式，数值的有效范围，输出方式等
  [此处加入输出项]
  3 .1.5 算法
  [此处加入算法]
  3 .1.6 流程逻辑
  [此处加入流程逻辑]
  3 .1.7 接口

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。