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

UNIVERSITY用户界面设计说明书第2页共24页UNIVERSITY文档名称描述原型的展示。用户对界面设计的需求参考《需求分析说明书》;与艺术设计相关的其他动态部分(例如项目需要用到的fl画、影视以及音乐等非静态媒体)详细说明另参考《UI动态设计》。负责人江海状态0.9版时间版本号修改人章节描述江海所有章节用户界面设计说明书(样稿)-初稿第3页共24页UNIVERSITY审核人审核时间意见签名档备注南2009数字媒体创新课程-7班X组 71.1编写目的 7 71.3定义 7 8 9 92.2项目描述 92.3用户特点 93.用户界面设计规范 3.1用户界面设计原则 3.2界面一致性 3.2.2布局合理化原则 3.2.4快捷键 3.3向导(WIZARD)使用原则 2009数字媒体创新课程-7班X组3.7命令交互 3.8一般交互原则 3.10数据输入原则 4用户界面设计更改和追加说明 4.1更改说明 4.2追加说明 5.用户界面设计 5.1全局用户界面设计 5.1.2整体风格 5.1.1结构布局 5.2歌曲征集活动界面设计 南2009数字媒体创新课程-7班X组第7页共24页FUNIVERSITY1.引言本文档对系统界面的布局、设计风格、交互部分进行描述，包括界面原型的展示。用户对界面设计的需求参考《需求分析说明书》;与艺术设计相关的其他动态部分(例如项目需要用到的flash制作的互动动画、影视以及音乐等非静态媒体)详细说明另参考《UI动态设计》。该说明书的读者为该项目的客户以及项目开发人员。本系统开发单位：数字媒体07级7班X组1.UI:UserInterface用户界面，又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间的数据传送的系统部件。第8页共24页UNIVERSITY3.HTTP:HyperTextTransferProtocol(超文本传输协议)4.HTML:HyperTextMarkupLanguage(超文本标记语言)5.WebBrowser:万维网浏览器7.ODBC:开放数据库连接8.IP0:Input&Process&Output(输入、处理、输出)9.B/S:服务器/浏览器模式[2]GB/T8566—1995:计算机软件开发规范[3]GB8567:计算机软件产品开发文件编制指南第9页共24页FUNIVERSITY2.2.任务概述为使用本系统的用户定义界面结构、色彩、风格等设计要素。为程序开发人员规范数据展该系统为位于Internet上的一个网站，用完成的功能，系统功能构成2.3用户特点2.3用户特点“XXXXX系统”的最终用户为网站管理员管理员用户，对应用程序或计算机的一般用法有一定了解，此类用户希望后台管理界面符合WINDOWSXP特别是OFFICE2007风格，对易用性、简洁性有比较高的要求，对界面快速交互没有很强的要求(即不希望通过命令方式快速交互);普通用户，网站的普通访问者，可以注册为会员用户。界面需求希望可以吸引其兴趣并引会员用户，网站的注册会员，可以较之普通用户使用更进一步的功能和服务。第10页共24页UNIVERSITY本系统坚持图形用户界面(GUI)设计相关原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。强调“以用户为中心的设计”原则，界面设计应该明确软件中用户是所有处理的核心，不应该由应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。界面设计必须经过最终的实际用户确认才能完成。在本系统的界面设计中应该保持界面的一致性。一致性既包括各子界面使用标准的控件以及一致的框架结构，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。(POPOCC创意网站快男参考采用的部分标准，请同学按自己项目的实际需求进行设置)(1)标签提示：字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号(10号);(2)日期：正常字体、宋体、白底黑字(红色背景使用白色字体);(3)对齐方法：右对齐：数字、时间、日期加时间。第11页共24页UNIVERSITY2009数字媒体创新课程-7班X组(4)分辨率为1024*800(图片质量为72ppi),增强色16色(5)字体缺省为宋体、五号、黑色(6)底色缺省采用灰色这些信息的排列显示风格供参考，在本项目中，这些信息的表现方式不一致，会使得用户分散注意力，影响这一软件的使用，因此应当注意在同一软件中表现形式的一致性。3.2.2布局合理化原则应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。在一个窗口中按tab键，移动聚焦的顺序是先从上至下，再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。布局力求简洁、有序、易于操作。本项目遵循的是可不用鼠标的原则：应用中的功能只用键盘也应当可以完成，即设计的应用中还应加入一些必要的按钮和菜单项。鼠标的双击、拖动对象等操作，不能简单地用键盘来模拟实现。例如在一个列表框中用鼠标双击其中一项可以表示选中该项内容，为了用键盘也能实现这一功能，必须在窗口中定义一个表示选中的按钮，以作为实现双击功能的替代(或其它方式)。本项目未实现鼠标拖拽功能。3.2.4快捷键本项目使用少量快捷键，可以让使用键盘的用户操作得更快一些，本系统中应用的快捷键在各个配置项上语义必须保持一致，尽量采用和Windows操作系统类似的快捷键设置。ICtrl-D删除(浏览器和控件支持)ICtrl-F寻找(浏览器和控件支持)ICtrl-1插入(浏览器和控件支持)第12页共24页UNIVERSITY2009数字媒体创新课程-7班X组Ctrl-C拷贝(浏览器和控件支持)ICtrl-P打印(浏览器和控件支持)ICtrl-V粘贴(浏览器和控件支持)ICtrl-X剪切(浏览器和控件支持)lCtrl-Tab下一窗口ICtrl-Esc任务列表ICtrl-F4关闭窗口lAlt-F4结束应用lAlt-Tab下一应用IShift-F1上下文相关帮助其它快捷键其它快捷键使用汉语拼音的开头字母，不常用的可以没有快捷键。第13页共24页UNIVERSITY对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。本项目中用户注册为原创歌曲用户以及支付信息注册流程将采用向导。系统响应时间包括两个方面：时间长度和时间的易变性。用户响应时间应该适中，系统响应时间过长，用户就会感到不安和沮丧，而响应时间过短有时会造成用户加快操作节奏，从而导致错误。系统响应时间的易变性是指相对于平均响应时间的偏差。即使响应时间比较长，低的响应时间易变性也有助于用户建立稳定的节奏。因此在系统响应时间的界面表现设计上本项目坚持响应时间长度界面设计0-10秒鼠标显示成为沙漏10到18秒由微帮助来显示处理进度18秒以上显示处理窗口，或显示进度条一个长时间的处理完成时应给予完成警告信息响应时间的易变性界面设计用户感觉不到不考虑用户稍微感觉到由微帮助来显示处理进度容易性大而且时间绝对差别大显示易变性提示第14页共24页UNIVERSITY2009数字媒体创新课程-7班X组 常用的帮助设施有两种：集成的和附加的。集成的帮助设施一开始就是设计在软件中的，它与语境有关，用户可以直接选择与所要执行操作相关的主题。通过集成帮助设施可以缩短用户获得帮助的时间，增加界面的友好性。附加的帮助设施在系统建好以后再加进去的。通常是一种查询能力比较弱的联机帮助。本系统提供这两种帮助设施，设计和实现时遵循以下原则：1)进行系统交互时，提供部分帮助功能，即：提供主要操作的帮助(形式为浮动在关键部位的帮助窗口或者标签式的帮助信息)2)用户可以通过帮助菜单访问帮助(设计在页面主框架中的左上角)3)表示帮助时根据需要提供三种方式的选择：另一个窗体、微帮助和指出参考某个文档4)用户如何回到正常交互方式有两种选择：返回键、返回链接和主窗体的首页链接5)帮助信息的构造：采用平铺式帮助，单网页结构6)微帮助提供：由状态栏提供，或控件上的提示文本出错信息和警告是指出现问题时系统给出的坏消息，本系统对于出错信息和警告应该遵循1)信息以用户可以理解的术语描述；2)信息应提供如何从错误中恢复的建设性意见；3)信息应指出错误可能导致那些不量后果，以便用户检查是否出现了这些情况或帮助用户进行改正；4)信息应伴随着视觉上的提示，如特殊的图像、颜色或信息闪烁；第15页共24页UNIVERSITY2009数字媒体创新课程-7班X组5)信息不能带有判断色彩，即任何情况下不能指责用户；6)错误展现的方式两种，弹出式对话框或者独立的错误页面，不采用弹出式的页面。3.73.7命令交互由于本系统用户是WEB用户，故本系统不提供命令交互。本系统一般交互遵循以下原则：1)一致性：菜单选择、数据显示以及其它功能都应使用一致的格式。2)提供有意义的反馈3)执行有较大破坏性的动作前要求确认4)在数据录入上允许取消大多数操作5)减少在动作间必须记忆的信息数量6)在对话、移动和思考中提高效率7)允许用户非恶意错误，系统应保护自己不受致命作物的破坏8)按功能对动作分类，并按此排列屏幕布局，设计者应那里提高命令和动作组织的内聚性9)提供语境相关的帮助机制本系统信息显示遵循以下原则：1)只显示与当前用户语境环境有关的信息；第16页共24页UNIVERSITY2009数字媒体创新课程-7班X组2)不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息，例如原创歌曲页面只列出排名前10的摘要信息；3)使用一致的标记、标准缩写和可预测的颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源；4)产生有意义的出错信息，见3.6;5)使用缩进和文本来辅助理解；6)使用窗口分隔控件分隔不同类型的信息；7)高效地使用显示器的显示空间。本系统数据输入遵循以下原则：1)尽量减少用户输入动作的数量；2)维护信息显示和数据输入的一致性；3)交互应该时灵活的，对键盘和鼠标输入的灵活性提供支持；4)在当前动作的语境中使不合适的命令不起作用；5)让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序(如果允许的话)以及在不退出系统的情况下从错误状态中恢复；6)为所有输入的动作提供帮助，见3.5;7)消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算第17页共24页UNIVERSITY更改本用户界面设计时应该征得所有开发者的同意，所有开发者应该按更正后的原则修改和设计用户界面。追加本用户界面设计时应该发布给所有开发者，所有开发者应该按追加后的原则修改和设 本系统为.net开发的WEB应用，包含4大快男创意征集板块，分别为独创歌曲征集、独创歌词征集、动漫形象征集、粉丝团征集，各版块结构布局都采用head+top+left+center+footer的5分结构，示意图如下：hsxdhsxd第18页共24页UNIVERSITY整体页面布局示意图名称宽度高度备注Head首页导航、登录入口、帮助按钮Top不同板块自定展示板块风格的修饰Left可根据center内容变化板块重点内容摘选和导航Center不同板块自定对应内容的主体页面根据合作单位的多少进行扩充合作单位链接、版权信息快男活动首页 整体网站为快男作品征集活动开发，是一个草根参与大众支持的网络应用，要求能烘托出快男活动的热烈气氛。各种原创作品要参加激烈的角逐，所以主要色调采用红色，色彩使用比较第19页共24页UNIVERSITY首页是整个活动的第一个展示页面，需要充分体现目前正在进行的4个征集活动的主题和进展情况。主体框架参考全局用户界面设计5.1,首页、帮助页面、用户注册页面都采用统一的母版页文件DefaultMasterPage.master(详细见5.1.2DefaultMasterPage母版页设计)。除DefaultMasterPage.master定义的元素外，首页主要包括以下界面元素：名称说明注册用户入口文本框设计视频区播放快男活动的宣传视频视频合作区加入优酷的视频连接(选择一个相关视频播放)音频合作反加入5SING的音频连接(选择一个相关音频播放)原创歌曲前十名采用.net的GridView控件，每个数据单元用缩略图和提示信息构成动漫作品前十名图片+作品名称+作者+点击数+投票数，图片使用静态IMG,选用快男排名前3的歌手的相关动漫形象作品图片。粉丝团口号前十对应内容的主体页面歌手专题区快男歌手的图片链接，进入其静态的介绍页面，图片的顺序按快男活动过程中选手的排名要及时调整。5.1.2动漫作品部分设计左边放置一个10万征集的广告图片，右边为最热的动漫形象设计展示，如下图：奖赏奖赏税密费：作品名称!%老期理按盖卷：春着+A]O%成击数：股密数 5.1.3原创歌曲排名部分设计该部分分左中右三个部分：左部是征集广告；中部是最新作品列表采用GridView控件，选取显示的字段为歌曲类型、歌曲名称、作者名称，在第一列放置一个小的歌曲图标；第20页共24页右部是排名前5的列表。人数据绑定数据绑定数据绑定数据绑定数据绑定数据绑定数据绑定数据绑定数据绑定数据绑定数据线定数据饼定数据蜘定效抵卿定数据州定李冠男词作内涵丰富淡雅脱李冠男词作内涵丰富淡雅脱俗极具穿透力独具风格 5.1.5粉丝团活动部分设计歌曲征集活动版块的功能是收集展示为快男活动的原创歌曲，体框架参考全局用户界面设计5.1,该部分的所有页面所使用的母版页文件为SuperMusicMaster.master(详细见5.2.SuperMusicMaster.master母版页设计)。SuperMusicMaster.master定义以下界面元素：名称说明注册用户入口文本框设计视频区播放快男活动的宣传视频视频合作区加入优酷的视频连接(选择一个相关视频播放)音频合作区加入5SING的音频连接(选择一个相关音频播放)原创歌曲前十名采用.net的GridView控件，每个数据单元用缩略图和提示信息构成动漫作品前十名图片+作品名称+作者+点击数+投票数，图片使用静态IMG,选用快男排名前3的歌手的相关动漫形象作品图片。粉丝团口号前十对应内容的主体页面歌手专题区快男歌手的图片链接，进入其静态的介绍页面，图片的顺序按快男活动过程中选手的排名要及时调整。UNIVERSITY版块形象图片X第21页共24页第22页共24页UNIVERSITY 5.2.2歌曲征集级联样式表设计歌曲征集部分内容和风格有区别于其他版块，所以单独定义了一套级联样式表。(本文样例只列出部分)名称样式用处height: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-weig