用户界面设计说明书（样例）.doc

2009数字媒体创新课程-7班X组xxxxxx系统用户界面设计说明书 第24页 共24页文档信息：文档名称“XXXXXXX系统”用户界面设计说明书描述本文档对系统界面的布局、设计风格、交互部分进行描述，包括界面原型的展示。用户对界面设计的需求参考需求分析说明书；与艺术设计相关的其他动态部分（例如项目需要用到的flash制作的互动动画、影视以及音乐等非静态媒体）详细说明另参考UI动态设计。负责人江海状态0.9版文档变更历史：时间版本号修改人章节描述2009-9-50.9江海所有章节用户界面设计说明书（样稿）-初稿文档路径：审核结果：审核人审核时间意见签名档备注目 录1 引言71.1 编写目的71.2 背景71.3 定义71.4 参考资料82 任务概述92.1 目标92.2 项目描述92.3用户特点93 用户界面设计规范103.1 用户界面设计原则103.2界面一致性103.2.1显示信息一致性标准103.2.2布局合理化原则113.2.3鼠标与键盘对应原则113.2.4快捷键113.3向导（WIZARD）使用原则133.4系统响应时间的界面表现133.5用户帮助设施143.6出错信息和警告143.7命令交互153.8一般交互原则153.9信息显示原则153.10数据输入原则164用户界面设计更改和追加说明174.1更改说明174.2追加说明175 用户界面设计175.1 全局用户界面设计175.1.1结构布局175.1.2整体风格185.2 首页界面设计195.1.1结构布局195.1.2动漫作品部分设计195.1.3原创歌曲排名部分设计195.1.4合作区部分设计205.1.5粉丝团活动部分设计205.2 歌曲征集活动界面设计205.2.1歌曲征集母版页设计205.2.2歌曲征集首页设计215.2.3歌曲征集歌曲播放页设计215.2.4歌曲征集最新歌曲列表页设计215.2.5歌曲征集投票排行页设计216. 附录与说明211 引言本文档对系统界面的布局、设计风格、交互部分进行描述，包括界面原型的展示。用户对界面设计的需求参考需求分析说明书；与艺术设计相关的其他动态部分（例如项目需要用到的flash制作的互动动画、影视以及音乐等非静态媒体）详细说明另参考UI动态设计。1.1 编写目的本文档的编制是为了让用户和软件开发者双方对该开发软件的UI（User Interface）初始规定有一个共同的理解，定义所要开发的“XXXXXXX系统”的用户界面布局、风格等设计目标。是整个项目中软件产品开发设计与实现的重要根据，也是软件产品的测试和验收的依据。该说明书的读者为该项目的客户以及项目开发人员。1.2 背景1. 本系统名称：XXXXXXX系统；2. 本系统的需求提出者：指导老师； 本系统开发单位：数字媒体07级7班X组 本系统的用户：3. 客户要求浏览器为MS IE浏览器，版本为6.0及以上。4. 本系统为Windows平台下B/S模式网络版。1.3 定义定义关键词如下：1. UI：User Interface用户界面，又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间的数据传送的系统部件。2. GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。3. HTTP：Hyper Text Transfer Protocol (超文本传输协议）4. HTML：Hyper Text Markup Language (超文本标记语言)5. Web Browser：万维网浏览器6. DateBase：数据库7. ODBC：开放数据库连接8. IPO：Input & Process & Output(输入、处理、输出)9. B/S：服务器/浏览器模式10. XML：扩展标记语言。11. SQL：结构化查询语言。12. Ajax：Asynchronous JavaScript + XML（异步的XML和JavaScript）1.4 参考资料1 GB/T 11457：软件工程术语2 GB/T 8566 1995：计算机软件开发规范3 GB 8567：计算机软件产品开发文件编制指南2 任务概述2.1 目标为使用本系统的用户定义界面结构、色彩、风格等设计要素。为程序开发人员规范数据展现的形式和规格。2.2 项目描述该系统为位于Internet上的一个网站，用完成XXX XXXX XXX XXXX的功能，系统功能构成图如下图：2.3用户特点“XXXXX系统”的最终用户为网站管理员、未注册用户、会员用户三种，要求基本熟悉网络及Windows操作规范。将使用本系统的用户定义为：管理员用户，对应用程序或计算机的一般用法有一定了解，此类用户希望后台管理界面符合WINDOWS XP特别是OFFICE2007风格，对易用性、简洁性有比较高的要求，对界面快速交互没有很强的要求（即不希望通过命令方式快速交互）；普通用户，网站的普通访问者，可以注册为会员用户。界面需求希望可以吸引其兴趣并引导其注册为注册用户。会员用户，网站的注册会员，可以较之普通用户使用更进一步的功能和服务。3 用户界面设计规范3.1 用户界面设计原则本系统坚持图形用户界面（GUI）设计相关原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。强调“以用户为中心的设计”原则，界面设计应该明确软件中用户是所有处理的核心，不应该由应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。界面设计必须经过最终的实际用户确认才能完成。3.2界面一致性在本系统的界面设计中应该保持界面的一致性。一致性既包括各子界面使用标准的控件以及一致的框架结构，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。（POPOCC创意网站快男参考采用的部分标准，请同学按自己项目的实际需求进行设置）3.2.1显示信息一致性标准 （1）标签提示：字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号（10号）； （2）日期：正常字体、宋体、白底黑字（红色背景使用白色字体）；（3）对齐方法：左对齐：一般文字、单个数字、日期等右对齐：数字、时间、日期加时间。 （4）分辨率为1024*800（图片质量为72ppi），增强色16色（5）字体缺省为宋体、五号、黑色（6）底色缺省采用灰色这些信息的排列显示风格供参考，在本项目中，这些信息的表现方式不一致，会使得用户分散注意力，影响这一软件的使用，因此应当注意在同一软件中表现形式的一致性。3.2.2布局合理化原则应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。在一个窗口中按tab键，移动聚焦的顺序是先从上至下，再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。 布局力求简洁、有序、易于操作。3.2.3鼠标与键盘对应原则本项目遵循的是可不用鼠标的原则：应用中的功能只用键盘也应当可以完成，即设计的应用中还应加入一些必要的按钮和菜单项。鼠标的双击、拖动对象等操作，不能简单地用键盘来模拟实现。例如在一个列表框中用鼠标双击其中一项可以表示选中该项内容，为了用键盘也能实现这一功能，必须在窗口中定义一个表示选中的按钮，以作为实现双击功能的替代（或其它方式）。本项目未实现鼠标拖拽功能。 3.2.4快捷键本项目使用少量快捷键，可以让使用键盘的用户操作得更快一些，本系统中应用的快捷键在各个配置项上语义必须保持一致，尽量采用和Windows操作系统类似的快捷键设置。面向事务的： l Ctrl-D 删除（浏览器和控件支持）l Ctrl-F 寻找 （浏览器和控件支持）l Ctrl-I 插入（浏览器和控件支持）l Ctrl-N 新记录 （JavaScript实现）其它： l Ctrl-C 拷贝（浏览器和控件支持）l Ctrl-H 帮助（JavaScript实现）l Ctrl-P 打印（浏览器和控件支持）l Ctrl-V 粘贴（浏览器和控件支持）l Ctrl-X 剪切（浏览器和控件支持）MS Windows保留键: l Ctrl-Tab 下一窗口 l Ctrl-Esc 任务列表 l Ctrl-F4 关闭窗口 l Alt-F4 结束应用 l Alt-Tab 下一应用 l Enter 缺省按钮/确认操作 l Esc 取消按钮/取消操作 l Shift-F1 上下文相关帮助 其它快捷键其它快捷键使用汉语拼音的开头字母，不常用的可以没有快捷键。3.3向导（WIZARD）使用原则对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。本项目中用户注册为原创歌曲用户以及支付信息注册流程将采用向导。3.4系统响应时间的界面表现系统响应时间包括两个方面：时间长度和时间的易变性。用户响应时间应该适中，系统响应时间过长，用户就会感到不安和沮丧，而响应时间过短有时会造成用户加快操作节奏，从而导致错误。系统响应时间的易变性是指相对于平均响应时间的偏差。即使响应时间比较长，低的响应时间易变性也有助于用户建立稳定的节奏。因此在系统响应时间的界面表现设计上本项目坚持如下原则：响应时间长度界面设计0-10 秒鼠标显示成为沙漏10到18 秒由微帮助来显示处理进度18 秒 以 上显示处理窗口，或显示进度条一个长时间的处理完成时应给予完成警告信息 响应时间的易变性界面设计用户感觉不到不考虑用户稍微感觉到由微帮助来显示处理进度容易性大而且时间绝对差别大显示易变性提示3.5用户帮助设施常用的帮助设施有两种：集成的和附加的。集成的帮助设施一开始就是设计在软件中的，它与语境有关，用户可以直接选择与所要执行操作相关的主题。通过集成帮助设施可以缩短用户获得帮助的时间，增加界面的友好性。附加的帮助设施在系统建好以后再加进去的。通常是一种查询能力比较弱的联机帮助。本系统提供这两种帮助设施，设计和实现时遵循以下原则：1） 进行系统交互时，提供部分帮助功能，即：提供主要操作的帮助（形式为浮动在关键部位的帮助窗口或者标签式的帮助信息）2） 用户可以通过帮助菜单访问帮助（设计在页面主框架中的左上角）3） 表示帮助时根据需要提供三种方式的选择：另一个窗体、微帮助和指出参考某个文档4） 用户如何回到正常交互方式有两种选择：返回键、返回链接和主窗体的首页链接5） 帮助信息的构造：采用平铺式帮助，单网页结构6） 微帮助提供：由状态栏提供，或控件上的提示文本3.6出错信息和警告出错信息和警告是指出现问题时系统给出的坏消息，本系统对于出错信息和警告应该遵循以下原则：1） 信息以用户可以理解的术语描述；2） 信息应提供如何从错误中恢复的建设性意见；3） 信息应指出错误可能导致那些不量后果，以便用户检查是否出现了这些情况或帮助用户进行改正；4） 信息应伴随着视觉上的提示，如特殊的图像、颜色或信息闪烁；5） 信息不能带有判断色彩，即任何情况下不能指责用户；6）错误展现的方式两种，弹出式对话框或者独立的错误页面，不采用弹出式的页面。3.7命令交互由于本系统用户是WEB用户，故本系统不提供命令交互。3.8一般交互原则 本系统一般交互遵循以下原则：1） 一致性：菜单选择、数据显示以及其它功能都应使用一致的格式。2） 提供有意义的反馈3） 执行有较大破坏性的动作前要求确认4） 在数据录入上允许取消大多数操作5） 减少在动作间必须记忆的信息数量6） 在对话、移动和思考中提高效率7） 允许用户非恶意错误，系统应保护自己不受致命作物的破坏8） 按功能对动作分类，并按此排列屏幕布局，设计者应那里提高命令和动作组织的内聚性9） 提供语境相关的帮助机制3.9信息显示原则本系统信息显示遵循以下原则：1） 只显示与当前用户语境环境有关的信息；2） 不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息，例如原创歌曲页面只列出排名前10的摘要信息；3） 使用一致的标记、标准缩写和可预测的颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源；4） 产生有意义的出错信息，见3.6；5） 使用缩进和文本来辅助理解；6） 使用窗口分隔控件分隔不同类型的信息；7） 高效地使用显示器的显示空间。3.10数据输入原则 本系统数据输入遵循以下原则：1） 尽量减少用户输入动作的数量；2） 维护信息显示和数据输入的一致性；3） 交互应该时灵活的，对键盘和鼠标输入的灵活性提供支持；4） 在当前动作的语境中使不合适的命令不起作用；5） 让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序（如果允许的话）以及在不退出系统的情况下从错误状态中恢复；6） 为所有输入的动作提供帮助，见3.5；7） 消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。4用户界面设计更改和追加说明4.1更改说明更改本用户界面设计时应该征得所有开发者的同意，所有开发者应该按更正后的原则修改和设计用户界面。4.2追加说明追加本用户界面设计时应该发布给所有开发者，所有开发者应该按追加后的原则修改和设计用户界面。5 用户界面设计5.1 全局用户界面设计5.1.1结构布局本系统为.net开发的WEB应用，包含4大快男创意征集板块，分别为独创歌曲征集、独创歌词征集、动漫形象征集、粉丝团征集，各版块结构布局都采用head+top+left +center+footer的5分结构，示意图如下：整体页面布局示意图各部分的规格和简要说明如下：名称宽度高度备注Head99054首页导航、登录入口、帮助按钮Top990不同板块自定展示板块风格的修饰Left212可根据center内容变化板块重点内容摘选和导航Center778不同板块自定对应内容的主体页面Footer990根据合作单位的多少进行扩充合作单位链接、版权信息示例： 粉丝团版块首页 快男活动首页5.1.2整体风格整体网站为快男作品征集活动开发，是一个草根参与大众支持的网络应用，要求能烘托出快男活动的热烈气氛。各种原创作品要参加激烈的角逐，所以主要色调采用红色，色彩使用比较多样灵活。5.2 首页界面设计5.1.1结构布局首页是整个活动的第一个展示页面，需要充分体现目前正在进行的4个征集活动的主题和进展情况。主体框架参考全局用户界面设计5.1，首页、帮助页面、用户注册页面都采用统一的母版页文件DefaultMasterPage.master（详细见5.1.2DefaultMasterPage母版页设计）。除DefaultMasterPage.master定义的元素外，首页主要包括以下界面元素：名称说明注册用户入口文本框设计视频区播放快男活动的宣传视频视频合作区加入优酷的视频连接（选择一个相关视频播放）音频合作区加入5SING的音频连接（选择一个相关音频播放）原创歌曲前十名采用.net的GridView控件，每个数据单元用缩略图和提示信息构成动漫作品前十名图片+作品名称+作者+点击数+投票数，图片使用静态IMG，选用快男排名前3的歌手的相关动漫形象作品图片。粉丝团口号前十对应内容的主体页面歌手专题区快男歌手的图片链接，进入其静态的介绍页面，图片的顺序按快男活动过程中选手的排名要及时调整。5.1.2动漫作品部分设计左边放置一个10万征集的广告图片，右边为最热的动漫形象设计展示，如下图：5.1.3原创歌曲排名部分设计该部分分左中右三个部分：左部是征集广告；中部是最新作品列表采用GridView控件，选取显示的字段为歌曲类型、歌曲名称、作者名称，在第一列放置一个小的歌曲图标；右部是排名前5的列表。如下图示意：5.1.4合作区部分设计5.1.5粉丝团活动部分设计5.2 歌曲征集活动界面设计5.2.1歌曲征集母版页设计歌曲征集活动版块的功能是收集展示为快男活动的原创歌曲，体框架参考全局用户界面设计5.1，该部分的所有页面所使用的母版页文件为SuperMusicMaster.master（详细见5.2. SuperMusicMaster.master母版页设计）。SuperMusicMaster.master定义以下界面元素：名称说明注册用户入口文本框设计视频区播放快男活动的宣传视频视频合作区加入优酷的视频连接（选择一个相关视频播放）音频合作区加入5SING的音频连接（选择一个相关音频播放）原创歌曲前十名采用.net的GridView控件，每个数据单元用缩略图和提示信息构成动漫作品前十名图片+作品名称+作者+点击数+投票数，图片使用静态IMG，选用快男排名前3的歌手的相关动漫形象作品图片。粉丝团口号前十对应内容的主体页面歌手专题区快男歌手的图片链接，进入其静态的介绍页面，图片的顺序按快男活动过程中选手的排名要及时调整。歌曲征集母版页结构设计原型界面如下：该模板SuperMusicMaster.master是音乐部分的通用网站。5.2.2歌曲征集级联样式表设计歌曲征集部分内容和风格有区别于其他版块，所以单独定义了一套级联样式表。（本文样例只列出部分）名称样式用处.dengluheight: 13px;width: 90px; 登录文本控件.denglu_wenzifont-size: 12px; color: #FFFFFF;登录文字.tuopiaofont-size: 12px; line-height: 16px; color: #FFFFFF;投票数显示.fengyunfont-size: 12px;line-height: 20px;color: #FFFFFF;风云榜样式.xiangxi_titleline-height: 26px;font-weight: bold;color: #000000;font-size: 12px;详细信息的标题样式.xiangxi_bodyfont-size: 14px;