软件工程用户界面设计报告书frmt.docx

《软件工程用户界面设计报告书frmt.docx》由会员分享，可在线阅读，更多相关《软件工程用户界面设计报告书frmt.docx（14页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、目录0. 文文档介绍绍40.1 文档目目的40.2 文档范范围40.3 读者对对象40.4 参考文文献40.5 术语与与缩写解解释41. 应应当遵循循的界面面设计规规范52. 界界面的关关系图和和工作流流程图553. 主主界面554. 子子界面AA55. 子子界面BB56. 美美学设计计67. 界界面资源源设计668. 其其他6文档介绍绍0.1 文档目目的界面设计计是为了了满足软软件专业业化标准准化的需需求而产产生的对对软件的的使用界界面进行行美化优优化规范范化的设设计分支支。界面面设计文文档可以以让用户户对软件件产品有有了更直直观的了了解，并并且了解解各个模模块的设设计及用用意。0.2 文档

2、范范围文档包括括公用界界面设计计，学生用用户界面面设计，教教师用户户界面设设计，其其中各个个界面包包括框架架设计，编程设计，按钮设计，面板设计，菜单设计，标签设计，图标设计，滚动条及状态栏设计。0.3 读者对对象登陆网站站的游客客、注册册成会员员的学生生、教师师以及管管理员。0.4 参考文文献提示：列列出本文文档的所所有参考考文献（可可以是非非正式出出版物），格格式如下下：1 张海藩藩，软件工工程导论论（第55版），清华大大学出版版社，19000年001月2 杨培添添，软件界面面设计，电子子工业出出版社，220077年02月3 林锐，WWeb软软件用户户界面设设计指南南，电电子工业业出版社社，

3、20005年年5月4吴吴士力，汪孝宜宜，胡俦，网网络系统统开发实实例精粹粹（JSSP版），电电子工业业出版社社，20006年年8月5 黄艳群群，黎旭旭，李荣荣丽，设计人机界界面，北京京理工大大学出版版社，220077年5月月0.5 术语与与缩写解解释缩写、术术语解释SPP精简并行行过程，Simplified Parallel ProcessSD系统设计计，Syysteem DDesiign1. 应应当遵循循的界面面设计规规范软件界面面的设计计，既要要从外观观上进行行创意以以到达吸吸引眼球球的目的的，还要要结合图图形和版版面设计计的相关关原理，从从而使得得软件设设计变成成了一门门独特的的艺术。软

4、软件用户户界面的的设计应应遵循以以下几个个基本原原则：u 用户导向向原则：明确到底底谁是使使用者，要要站在用用户的观观点和立立场上来来考虑设设计软件件。要作作到这一一点，必必须要和和用户来来沟通，了了解他们们的需求求、目标标、期望望和偏好好等。网网页的设设计者要要清楚，用用户之间间差别很很大，他他们的能能力各有有不同。比比如有的的用户可可能会在在视觉方方面有欠欠缺（如如色盲），对对很多的的颜色分分辨不清清；有的的用户的的听觉也也会有障障碍，对对于软件件的语音音提示反反映迟钝钝；而且且相当一一部分用用户的计计算机使使用经验验很初级级，对于于复杂一一点的操操作会感感觉到很很费力。另另外，用用户使用

5、用的计算算机机器器配置也也是千差差万别，包包括显卡卡、声卡卡、内存存、网速速、操作作系统以以及浏览览器等都都会有不不同。设设计者如如果忽视视了这些些差别，设设计出的的网页在在不同的的机器上上显示就就会造成成混乱。u KISSS原则：KISSS原则就就是KKeepp Itt Siimplle AAnd Stuupidd的缩缩写，简简洁和易易于操作作是网页页设计的的最重要要的原则则。毕竟竟，软件件建设出出来是用用于普通通网民来来查阅信信息和使使用网络络服务。没没有必要要在网页页上设置置过多的的操作，堆堆集上很很多复杂杂和花哨哨的图片片。该原原则一般般的要求求，网页页的下载载不要超超过100秒钟（普

6、普通的拨拨号用户户56 Kbpps网速速）；尽尽量使用用文本链链接，而而减少大大幅图片片和动画画的使用用；操作作设计尽尽量简单单，并且且有明确确的操作作提示；软件所所有的内内容和服服务都在在显眼处处向用户户予以说说明等。u 布局控制制：关于网页页排版布布局方面面，很多多网页设设计者重重视不够够，网页页排版设设计的过过于死板板，甚至至照抄他他人。如如果网页页的布局局凌乱，仅仅仅把大大量的信信息堆集集在页面面上，会会干扰浏浏览者的的阅读。一一般在网网页设计计上所要要遵循的的原理有有： Milller公公式。根根据心理理学家GGeorrge A.MMilller的的研究表表明，人人一次性性接受的的信

7、息量量在7个个比特左左右为宜宜。总结结一个公公式为：一个人人一次所所接受的的信息量量为 772 比特。这这一原理理被广泛泛应用于于软件建建设中，一一般网页页上面的的栏目选选择最佳佳在59个之之间，如如果软件件所提供供给浏览览者选择择的内容容链接超超过这个个区间，人人在心理理上就会会烦躁，压压抑，会会让人感感觉到信信息太密密集，看看不过来来，很累累。例如如Aoll.coom的栏栏目设置置：Maain、MMyAool、MMaill、Peeoplle、SSearrch、SShopp、Chhannnelss和Deevicces共共八个分分类。MMm的栏目目设置：MSNN Hoome、MMy MMSN、

8、HHotmmaill、Seearcch、SShopppinng、MMoneey和PPeopple & CChatt共七项项。然而而很多国国内的软软件在栏栏目的设设置远远远超出这这个区间间。 （2）分分组处理理。上面面提到，对对于信息息的分类类，不能能超过99个栏目目。但如如果你的的内容实实在是多多，超出出了9个个，需要要进行分分组处理理。如果果，你的的网页上上提供几几十篇文文章的链链接，需需要每隔隔7篇加加一个空空行或平平行线做做以分组组。如果果你的软软件内容容栏目超超出9个个，如微微软公司司的软件件，共有有11个个栏目，超超过了99个。为为了不破破坏Miilleer公式式，在设设计时使使用蓝

9、黑黑两种颜颜色分开开，具体体可以访访问u 视觉平衡衡：网页设计计时，也也要各种种元素（如如图形、文文字、空空白）都都会有视视觉作用用。根据据视觉原原理，图图形与一一块文字字相比较较，图形形的视觉觉作用要要大一些些。所以以，为了了达到视视觉平衡衡，在设设计网页页时需要要以更多多的文字字来平衡衡一幅图图片。另另外，按按照中国国人的阅阅读习惯惯是从左左到右，从从上到下下，因此此视觉平平衡也要要遵循这这个道理理。例如，你你的很多多的文字字是采用用左对齐齐Allignn=leeft，需要要在网页页的右面面加一些些图片或或一些较较明亮、较较醒目的的颜色。一一般情况况下，每每张网页页都会设设置一个个页眉部部

10、分和一一个页脚脚部分，页页眉部分分常放置置一些BBannner广广告或导导航条，而而页脚部部分通常常放置联联系方式式和版权权信息等等，页眉眉和页脚脚在设计计上也要要注重视视觉平衡衡。同时时，也决决不能低低估空白白的价值值。如果果你的网网页上所所显示的的信息非非常密集集，这样样不但不不利于读读者阅读读，甚至至会引起起读者反反感，破破坏该软软件的形形象。在在网页设设计上，适适当增加加一些空空白，精精炼你的的网页，使使得页面面变的简简洁。u 色彩的搭搭配和文文字的可可阅读性性：颜色是影影响网页页的重要要因素，不不同的颜颜色对人人的感觉觉有不同同的影响响，例如如： 红色和橙橙色使人人兴奋并并使得心心跳

11、加速速；黄色色使人联联想到阳阳光，是是一种快快活的颜颜色；黑黑颜色显显得比较较庄重，考考虑到你你希望对对浏览者者产生什什么影响响，为网网页设计计选择合合适的颜颜色（包包括背景景色、元元素颜色色、文字字颜色、链链节颜色色等）。 为方便阅阅读软件件上的信信息，可可以参考考报纸的的编排方方式将网网页的内内容分栏栏设计，甚甚至两栏栏也要比比一满页页的视觉觉效果要要好。 另一种能能够提高高文字可可读性的的因素是是所选择择的字体体，通用用的字体体（Arriall，Coouriier Neww，Gaarammondd，Tiimess Neew RRomaan，中中文宋体体）最易易阅读，特特殊字体体用于标标题

12、效果果较好，但但是不适适合正文文。如果果在整个个页面使使用一些些特殊字字体（如如Clooistter，GGothhic，SScriipt，WWesttminnsteer，华华文彩云云，华文文行楷），这这样读者者阅读起起来感觉觉一定很很糟糕。该该类特殊殊字体如如果在页页面上大大量使用用，会使使得阅读读颇为费费力，浏浏览者的的眼睛很很快就会会疲劳，不不得不转转移到其其他页面面。u 和谐与一一致性：通过对软软件的各各种元素素（颜色色、字体体、图形形、空白白等）使使用一定定的规格格，使得得设计良良好的网网页看起起来应该该是和谐谐的。或或者说，软软件的众众多单独独网页应应该看起起来像一一个整体体。软件件

13、设计上上要保持持一致性性，这又又是很重重要的一一点。一致的结结构设计计，可以以让浏览览者对软软件的形形象有深深刻的记记忆；一一致的导导航设计计，可以以让浏览览者迅速速而又有有效的进进入在软软件中自自己所需需要的部部分；一一致的操操作设计计，可以以让浏览览者快速速学会在在整个软软件的各各种功能能操作。破破坏这一一原则，会会误导浏浏览者，并并且让整整个软件件显的杂杂乱无章章，给人人留下不不良的印印象。当当然，软软件设计计的一致致性并不不意味着着刻板和和一成不不变，有有的软件件在不同同栏目使使用不同同的风格格，或者者随着时时间的推推移不断断的改版版软件，会会给浏览览者带来来新鲜的的感觉。u 个性化：

14、 符合网络络文化企业软件件不同于于传统的的企业商商务活动动，要符符合Innterrnett网络文文化的要要求。首首先，网网络最早早是非正正式性、非非商业化化的，只只是科研研人员用用来交流流信息。其其次，网网络信息息是只在在计算机机屏幕上上显示而而没有打打印出来来阅读，网网络上的的交流具具有隐蔽蔽性，谁谁也不知知道对方方的真实实身份。另另外，许许多人在在上网的的时候是是在家中中或网吧吧等一些些比较休休闲，比比较随意意的环境境下。此此时网络络用户的的使用环环境所蕴蕴涵的思思维模式式与坐在在办公室室里西装装革履的的时候大大相径庭庭。因此此，整个个互联网网的文化化是一种种休闲的的、非正正式性的的、轻松

15、松活泼的的文化。在在软件上上使用幽幽默的网网络语言言，创造造一种休休闲的、轻轻松愉快快、非正正式的氛氛围会使使软件的的访问量量大增。 塑造软件件个性另外，软软件的整整体风格格和整体体气氛表表达要同同企业形形象相符符合并应应该很好好的体现现企业CCI。2. 界界面的关关系图和和工作流流程图经客户要要求及小小组讨论论，本接接口学习习网站各各个界面面关系图图如下：主界面课程介绍教学资源教学资源在线测试在线答疑教学课件视频教程发帖查询课程习题课程实验设计流程程：l 确定网站站的整体体风格：由于我我们设计计的是学学习网站站，所以以采用大大方得体体的风格格。l 网页色彩彩的搭配配：蓝为主主调。白白底，蓝蓝

16、标题栏栏，橙色色按钮或或ICOON做点点缀。l 确定网页页设计的的工具：用Drreammweaaverr来设计计整个网网站的界界面设计计，用PPhottoshhop来来设计背背景、框框架等，用用Firrewoorkss来对已已经设计计好的图图片进行行切割成成模块，以以便插入入Dreeamwweavver中中，用Fllashh进行美工工设计、网网页配色色，制作作CI、LLOGOO、Baanneer等网页动动画制作作。l 编写JSSP语言言3. 主主界面为了页面面导航的的清晰，本本网站采采用了框框架式页页面设计计。页面面头放在在上框架架，课程程介绍模模块放中中框架，下下框架是是放接口口技术相相关图

17、片片。功能能导航、登登陆界面面放在右右框架。l 课程介绍绍模块设设计该模块利利用phhotooshoop软件件制作，制制作边框框，结合合图片文文字，对对接口技技术课程程做个简简单的介介绍。l 教学资源源模块设设计l 登陆界面面设计进入登陆模块输入用户名、密码注册新用户注册界面 游客身份公共用户界面验证是否有效注册成功学生教师管理员登陆成功用户界面效果如下下：4. 教教学资源源界面 教学课件件：分章章节介绍绍接口技技术相关关知识 网页页的左边边显示章章节目录录，右边边是对应应的知识识讲解。 视频教程程：提供供相关的的视频讲讲解教学学内容及及实验 课程习题题： 题库制作一个个文件叫叫worrdli

18、ist.jspp，在这这个页面面中，先先显示接接口技术术知识的的章节名名称，再再显示某某个章节节所涵盖盖的详细细目录，并并提供【浏浏览】按按钮，当当学生单单击【浏浏览】按按钮的时时候，会会弹出一一个模式式窗口，打打开woord文文件，让让学生浏浏览该wwordd文件。 答案：上上述同样样的方法法打开一一个woord文文档，可可以查看看对应的的答案。 课程实验验：将实实验步骤骤及附图图添加进进网页当当中，让让学生们们可以通通过浏览览网页学学习 制作实验验。5. 在在线测试试界面首先创建建一个名名为teest的的数据库库，本程程序采用用SQLL Seerveer 220000数据库库编程，然然后连

19、接接到网页页当中。 出卷模块块测试。在在主页左左边的导导航栏上上单击“出卷”链接，系系统进入入出卷页页面。填填写各类类题型的的数目、分分值分配配、考试试时间和和试卷编编号等信信息，单单击“提交”按钮，系系统就会会自动从从题库中中随即提提取题目目组合成成一份新新的试卷卷。 在线考试试模块测测试。单单击主页页导航栏栏的“在线考考试”链接，系系统进入入试卷选选择页面面。6. 美美学设计计l 确定网站站的整体体风格：由于我我们设计计的是学学习网站站，所以以采用大大方得体体的风格格。l 网页色彩彩的搭配配：蓝为主主调。白白底，蓝蓝标题栏栏，橙色色按钮或或ICOON做点点缀。u 网页配色色基本概概念（1）

20、白白纸黑字字是永远远的主题题，谁都都说不出出不好来来。（2）网网页最常常用流行行色兰色色蓝蓝天白云云，沉静静整洁的的颜色。绿色绿白白相间，雅雅致而有有生气。橙色色活活泼热烈烈，标准准商业色色调。暗红宁重重、严肃肃、高贵贵，需要要配黑和和灰来压压制刺激激的红色色，（3）颜颜色的忌忌讳忌忌脏背景与与文字内内容对比比不强烈烈，灰暗暗的背景景令人沮沮丧！忌忌纯艳丽的的纯色对对人的刺刺激太强强烈抗议议，缺乏乏内涵。忌忌跳再好看看的颜色色，也不不能脱离离整体。脱脱离群众众是自取取其辱！忌忌花要有一一种主色色贯穿其其中，主主色并不不时面积积最大的的颜色，而而是最重重要，最最能揭示示和反映映主题的的颜色，就就

21、象领导导者一样样，虽然然在人数数上居少少数，但但起决定定作用。忌粉粉颜颜色浅固固然显的的干净，但但如果对对比过弱弱，整得得苍白无无力了，就就象病夫夫一样无无可救药药。蓝色色忌纯，绿绿色忌黄黄，红色色忌艳。（4）几几种固定定搭配蓝白白橙：蓝为主主调。白白底，蓝蓝标题栏栏，橙色色按钮或或ICOON做点点缀。绿白白兰：绿为主主调。白白底，绿绿标题栏栏，兰色色或橙色色按钮或或ICOON做点点缀。橙白红红：橙为主主调。白白底，橙橙标题栏栏，暗红红或桔红红色按钮钮或ICCON做做点缀。暗红红黑：暗红主主调。黑黑或灰底底，暗红红标题栏栏，文字字内容背背景为浅浅灰色。u 网页设计计理念（1）内内容决定定形式先把内容容充实上上，再分分区块，再再定色调调，再处处理细节节。（2）先先整体，后后局部，最最后回归归到整体体。全局考虑虑，把能能填上的的都填上上，占位位置。然然后定基基调，分分模块设设计。最最后调整整不满意意的几个个局部细细节。（3）功功能决定定设计方方向看网站的的用途，决决定设计计思路.商业性性的就要要突出赢赢利目的的；政府府型的就就要突出形象象和权威威性的文文章；教教育性的的，就要要突出师师资和课课程。