如何写“完”UI设计说明书.docx
《如何写“完”UI设计说明书.docx》由会员分享,可在线阅读,更多相关《如何写“完”UI设计说明书.docx(26页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、如何写“完”UI设计说明书 如何写“完”UI设计说明书.txt男人应该感谢20多岁陪在自己身边的女人。因为20岁是男人人生的最低谷,没钱,没事业;而20岁,却是女人一生中最灿烂的季节。只要锄头舞得好,哪有墙角挖不到?1004*623 如何写“完”UI设计说明书 我们中的大多数人都写过UI设计说明书(或UI规格说明书),论坛里也经常会有类似的讨论,对UI设计说明书的框架和结构我就不做过多的说明了。为什么有人写了上百页的UI设计说明书,别人还是看不懂,或者说忽略了细节呢?那今天我们重点讨论一下关于细节阐述和表达的一些经验,以免写出只有自己看得懂的UI设计说明书。 我先说说我总结的一些经验吧,希望大
2、家积极讨论: 我们的目标是:(没有蛀牙,_ 玩笑!) 既要清晰描述用户界面原型中的细节和交互方式,又要方便项目组的其他开发人员、需求人员以及测试人员等角色交流察看的说明文档。 主要内容包括: 1. 产品的目标和成功标准,(例如一个全新的预言项目不可能要求用户满意度在90%以上,对升级产品要求就会高一些。) 2. 产品最终用户群及产品用途(了解用户的年龄、职业、产品的使用环境等都是非常必要的) 3. 首先满足基本功能。(例如DVD机的基本功能是播放影碟,可能还有播放CD的功能等等) 4. 主要功能(在产品的几十个功能中通过用户验证和项目组筛选,选取用户最常用到的功能,将其优化,以不同层次展现于界
3、面上。) 5. 用户界面特性。(每一款界面都有自己的特性,比如触摸屏的操作界面与手机的操作界面就算功能完全一样,结构、布局等特点也不会相同的。) 几点注意事项 1. 必须紧贴需求,围绕功能点展开。 2. 描述语言简短精确(这样别人看的时候才不会烦) 3. 保持文本的易维护性,建议使用WORD的大纲视图编写,便于更改和查找。 4. 说明书一定要有版本管理,对每次更新内容要做详细说明。 5. 图标要与名称一同提交,并说明是什么类型,如桌面图标、列表中的图标、工具栏图标、按钮图标、属性框或提示信息框中的图标等等。 6. 注意纪录,包括项目组和用户以及合作伙伴,如果在解释某一特性时令两人以上会感到困惑
4、,那这一部分就需要更清楚的阐述了。 7. 设计与实现同步,这个时最难的了,很多设计由于程序无法实现都被“卡”掉,早期程序也无法确定是否可以实现,伤脑筋! 8. 维护UI设计说明书时不要忘记维护原型,作为UI设计说明书的补充原型是很重要的。UI设计中容易被忽略的地方 1. 支持错误提示和撤销操作 2. 简便的安装和卸载。 3. 必要的设置和帮助。 4. 异常处理、错误消息的描述和问题回应提示。 5. 除界面上有的图标和按钮外,还要有快捷键、菜单访问键、右键菜单、是否支持从其它软件界面内托拽复制文件等操作的说明。 6. 域、菜单和按钮在什么情况下为不可点击状态。 7. 状态区,用来描述界面状态的区
5、域,通常位于页面下方。(PS存储时状态区会显示进度条) 8. 剪贴板行为,用户在我们产品中拷贝的文字或图片的局部,是否可以贴入其他程序。 9. 指针的行为,说明超过多长时间的等待时应出现沙漏状态,在文本输入区光标应有改变、 有链接的地方有变为小手等 10. 声音行为,警示音、按钮触发音等 11. 统一消息窗的弹出位置、背景色、大小、布局及特色 12. 菜单栏和下拉选项等程序动作的描述,是向下还是向右弹出等。 13. 动态状态描述,如果要求窗口渐隐或渐显,那就要说明渐隐或渐显过程的时间以及方式(半透明还是马赛克)等。 Art Designer作业规范书 1定义 2作业环境 ? Art Desig
6、ner日常作业的主要编辑工具: ? 软件图标主要编辑工具: ? 各种Logo设计及印刷设计: 其他常用的编辑工具: 2.2 Art Designer 一般作业要求 ? 各个产品需求图档主要是: Logo & Symbolic Mark:软件的识别标志象征图及标准字搭配方案; Autorun:光碟自动执行界面; Splash:软件激活时的欢迎及说明画面; Login:登陆界面; Banner:显示版权信息及系列软件版本号画面; Icon:软件工具栏,应用程序配套图标; Source:各类软件所图形资源。 ? 命名规范: aaa_ c aaa-软件代号 bbb-图片类别 (splash、sanne
7、r、logo等)ccc-文件后缀名(文件类型) ? 备份共享方式: 3产品相关图文件编辑规格 3.1 图文件编辑规格 以下为产品图文件编辑模板的举例说明: 图文件编辑规格(附图以“XXXXXX”为例) Logo & Symbolic Mark:软件的标志和象征图形用于宣传和视觉记忆。 (由于标志的范围很广,设计制作时必须用适量设计软件完成,以满足各种不同运用的需求)Autorun:软件CD安装时有不同选项在以此图为基础添加不同选项的链接按钮。 (软件直接安装无选项时以此图为底图) 软件执行图标 (Icon) 编辑规格 应用程序图标规格: ? 64*64 32bit、48*48 32bit、32
8、*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 De
9、signer 作业遵循流程规范 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工作整体流程更具规范化和为
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设计主要流程 时间1 时间2 时间3 UI启动阶段 UI细化阶段 UI构造阶段 数据采集分
14、析报告交互模型使用性测试界面原型设计使用性测试评审美术制作验证性测试 需求分析报告需求分析报告 2.4 UI设计时间表和里程碑: 数据采集* 交互模型* 使用性测试* 启动阶段分析报告细化阶段需求分析报告 细化阶段需求分析报告 验证性测试* 美术制作评审使用性测试* 界面原型设计 :表示时间点 “*”:表示可裁减的活动 “.”:表示阶段生成文档 2.5 参与人及担任角色和工作量 角色人员工作量 项目经理 交互研究工程师 设计角色 制作角色 界面设计之图标设计规范图标样式应该有趣、色彩丰富且充满活力,因为现在的系统支持图标是32位图标,并且边缘非常平滑。在矢量程序中绘制完每个图标后,再用Adob
15、e Photoshop 进行处理可使图像更加完美。本规范是专为设计者编写的。在创建图像时,建议您与高水平的图形设计者一起工作,尤其是具有丰富的矢量和3D软件经验的图形设计者。图标设计概述的目的是让您熟悉WindowsXP的新样式,为创建图标做好准备。图标样式特性 (1) 色彩丰富,是对WindowsXP外观的补充。(2) 不同的角度和透视特性为图像增添了动态活力。(3) 元素的边角十分柔和,并略微有些圆滑。(4) 光源位于图标的左上角,同时有环绕光照亮图标的其它部分。(5) 渐变效果使图标具有立体感,进而使图标的外观更加丰满。(6) 投影使图标更具对比度和立体感。(7) 添加轮廓可使图像更清晰
16、。(8) 日常对象(如计算机和设备)具有更现代化的个人外观。图标尺寸 Windows XP图标有四种尺寸,建议使用以下四种尺寸:(1) 4848像素(2) 3232像素(3) 2424像素(4) 1616像素图标色彩深度支持 WindowsXP支持32位图标。32位图标为24位图像加上8位alpha通道。使图标边缘非常平滑,且与背景相融合。每个WindowsXP图标应包含以下三种色彩深度,以支持不同的显示器显示设置:24位图像加上8位alpha通道(32位) 8位图像(256色),加上1位透明色4位图像(16色),加上1位透明色调色板 图标中使用的主要颜色。对象的角度和分组 WindowsXP
17、样式图标使用的透视网格:并非所有对象使用1616的复杂图像都能获得较好效果。某些对象通常以直观图像显示:文档图标、符号图标(如警告或信息图标)、单一对象图标(如放大镜) 除非创建重叠辅助对象可以更清楚地表达图标的含义,否则就可读性和完整性而言,还是应使用直观图像。还应考虑如何按组查看图标,以便确定如何将对象分组。投影 使用投影后,WindowsXP图标将更清晰且更具立体感。可在Photoshop中实现这种效果,本指南的后面部分将对此进行描述。若要为图像添加投影,请在 Photoshop中双击图像的图层,并选择Drop Shadow。然后将Angle更改为135,Distance更改为 2,Si
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 UI 设计 说明书
限制150内