软件工程用户界面设计报告样本.doc

目 录
0. 文档简介 4
0.1 文档目 4
0.2 文档范畴 4
0.3 读者对象 4
0.4 参照文献 4
0.5 术语与缩写解释 4
1. 应当遵循界面设计规范 5
2. 界面关系图和工作流程图 5
3. 主界面 5
4. 子界面A 5
5. 子界面B 5
6. 美学设计 6
7. 界面资源设计 6
8. 其她 6
文档简介
0.1 文档目
界面设计是为了满足软件专业化原则化需求而产生对软件使用界面进行美化优化规范化设计分支。界面设计文档可以让顾客对软件产品有了更直观理解，并且理解各个模块设计及用意。
0.2 文档范畴
文档涉及公用界面设计，学生顾客界面设计，教师顾客界面设计，其中各个界面涉及框架设计，编程设计，按钮设计，面板设计，菜单设计，标签设计，图标设计，滚动条及状态栏设计。
0.3 读者对象
登陆网站游客、注册成会员学生、教师以及管理员。
0.4 参照文献
提示：列出本文档所有参照文献（可以是非正式出版物），格式如下：
[1] 张海藩，《软件工程导论（第5版）》，清华大学出版社，1901月
[2] 杨培添，《软件界面设计》，电子工业出版社，02月
[3] 林锐，《Web软件顾客界面设计指南》，电子工业出版社，5月
[4] 吴士力，汪孝宜，胡俦，《网络系统开发实例精粹（JSP版）》，电子工业出版社，8月
[5] 黄艳群，黎旭，李荣丽，《设计·人机界面》，北京理工大学出版社，5月

0.5 术语与缩写解释
缩写、术语
解 释
SPP
精简并行过程，Simplified Parallel Process
SD
系统设计，System Design

1. 应当遵循界面设计规范
软件界面设计，既要从外观上进行创意以到达吸引眼球目，还要结合图形和版面设计有关原理，从而使得软件设计变成了一门独特艺术。软件顾客界面设计应遵循如下几种基本原则：
u 顾客导向原则：
明确究竟谁是使用者，要站在顾客观点和立场上来考虑设计软件。要作到这一点，必要要和顾客来沟通，理解她们需求、目的、盼望和偏好等。网页设计者要清晰，顾客之间差别很大，她们能力各有不同。例如有顾客也许会在视觉方面有欠缺（如色盲），对诸多颜色辨别不清；有顾客听觉也会有障碍，对于软件语音提示反映迟钝；并且相称一某些顾客计算机使用经验很初级，对于复杂一点操作会感觉到很费力。此外，顾客使用计算机机器配备也是千差万别，涉及显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差别，设计出网页在不同机器上显示就会导致混乱。
u KISS原则：
KISS原则就是"Keep It Simple And Stupid"缩写，简洁和易于操作是网页设计最重要原则。毕竟，软件建设出来是用于普通网民来查阅信息和使用网络服务。没有必要在网页上设立过多操作，堆集上诸多复杂和花哨图片。该原则普通规定，网页下载不要超过10秒钟（普通拨号顾客56 Kbps网速）；尽量使用文本链接，而减少大幅图片和动画使用；操作设计尽量简朴，并且有明确操作提示；软件所有内容和服务都在显眼处向顾客予以阐明等。
u 布局控制：
关于网页排版布局方面，诸多网页设计者注重不够，网页排版设计过于死板，甚至照抄她人。如果网页布局凌乱，仅仅把大量信息堆集在页面上，会干扰浏览者阅读。普通在网页设计上所要遵循原理有：
² Miller公式。依照心理学家George A.Miller研究表白，人一次性接受信息量在7个比特左右为宜。总结一种公式为：一种人一次所接受信息量为 7±2 比特。这一原理被广泛应用于软件建设中，普通网页上面栏目选取最佳在5～9个之间，如果软件所提供应浏览者选取内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看但是来，很累。例如A栏目设立：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八个分类。M栏目设立：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七项。然而诸多国内软件在栏目设立远远超过这个区间。
² （2）分组解决。上面提到，对于信息分类，不能超过9个栏目。但如果你内容实在是多，超过了9个，需要进行分组解决。如果，你网页上提供几十篇文章链接，需要每隔7篇加一种空行或平行线做以分组。如果你软件内容栏目超过9个，如微软公司软件，共有11个栏目，超过了9个。为了不破坏Miller公式，在设计时使用蓝黑两种颜色分开，详细可以访问.com
u 视觉平衡：
网页设计时，也要各种元素（如图形、文字、空白）都会有视觉作用。依照视觉原理，图形与一块文字相比较，图形视觉作用要大某些。因此，为了达到视觉平衡，在设计网页时需要以更多文字来平衡一幅图片。此外，按照中华人民共和国人阅读习惯是从左到右，从上到下，因而视觉平衡也要遵循这个道理。
例如，你诸多文字是采用左对齐〈Align=left〉，需要在网页右面加某些图片或某些较明亮、较醒目颜色。普通状况下，每张网页都会设立一种页眉某些和一种页脚某些，页眉某些常放置某些Banner广告或导航条，而页脚某些普通放置联系方式和版权信息等，页眉和页脚在设计上也要注注重觉平衡。同步，也决不能低估空白价值。如果你网页上所显示信息非常密集，这样不但不利于读者阅读，甚至会引起读者反感，破坏该软件形象。在网页设计上，恰当增长某些空白，精炼你网页，使得页面变简洁。
u 色彩搭配和文字可阅读性：
颜色是影响网页重要因素，不同颜色对人感觉有不同影响，例如：
² 红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活颜色；黑颜色显得比较庄严，考虑到你但愿对浏览者产生什么影响，为网页设计选取适当颜色（涉及背景色、元素颜色、文字颜色、链节颜色等）。
² 为以便阅读软件上信息，可以参照报纸编排方式将网页内容分栏设计，甚至两栏也要比一满页视觉效果要好。
² 另一种可以提高文字可读性因素是所选取字体，通用字体（Arial，Courier New，Garamond，Times New Roman，中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用某些特殊字体（如Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），这样读者阅读起来感觉一定很糟糕。该类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者眼睛不久就会疲劳，不得不转移到其她页面。
u 和谐与一致性：
通过对软件各种元素（颜色、字体、图形、空白等）使用一定规格，使得设计良好网页看起来应当是和谐。或者说，软件众多单独网页应当看起来像一种整体。软件设计上要保持一致性，这又是很重要一点。
一致构造设计，可以让浏览者对软件形象有深刻记忆；一致导航设计，可以让浏览者迅速而又有效进入在软件中自己所需要某些；一致操作设计，可以让浏览者迅速学会在整个软件各种功能操作。破坏这一原则，会误导浏览者，并且让整个软件显杂乱无章，给人留下不良印象。固然，软件设计一致性并不意味着刻板和一成不变，有软件在不同栏目使用不同风格，或者随着时间推移不断改版软件，会给浏览者带来新鲜感觉。
u 个性化：
² 符合网络文化
公司软件不同于老式公司商务活动，要符合Internet网络文化规定。一方面，网络最早是非正式性、非商业化，只是科研人员用来交流信息。另一方面，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上交流具备隐蔽性，谁也不懂得对方真实身份。此外，许多人在上网时候是在家中或网吧等某些比较休闲，比较随意环境下。此时网络顾客使用环境所蕴涵思维模式与坐在办公室里西装革履时候大相径庭。因而，整个互联网文化是一种休闲、非正式性、轻松活泼文化。在软件上使用幽默网络语言，创造一种休闲、轻松高兴、非正式氛围会使软件访问量大增。
² 塑造软件个性
此外，软件整体风格和整体氛围表达要同公司形象相符合并应当较好体现公司CI。

2. 界面关系图和工作流程图
经客户规定及小组讨论，本接口学习网站各个界面关系图如下：
主界面
课程简介
教学资源
教学资源
在线测试
在线答疑
教学课件
视频教程
发帖
查询
课程习题
课程实验

设计流程：
l 拟定网站整体风格：由于咱们设计是学习网站，因此采用大方得体风格。
l 网页色彩搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。
l 拟定网页设计工具：用Dreamweaver来设计整个网站界面设计，用Photoshop来设计背景、框架等，用Fireworks来对已经设计好图片进行切割成模块，以便插入Dreamweaver中，用Flash进行美工设计、网页配色，制作CI、LOGO、Banner等网页动画制作。
l 编写JSP语言
3. 主界面
为了页面导航清晰，本网站采用了框架式页面设计。页面头放在上框架，课程简介模块放中框架，下框架是放接口技术有关图片。功能导航、登陆界面放在右框架。
l 课程简介模块设计
该模块运用photoshop软件制作，制作边框，结合图片文字，对接口技术课程做个简朴简介。

l 教学资源模块设计

l 登陆界面设计
进入登陆模块
输入顾客名、密码

注册新顾客
注册界面
游客身份
公共顾客界面
验证与否有效
注册成功
学生
教师
管理员
登陆成功
顾客界面

效果如下：

4. 教学资源界面
² 教学课件：分章节简介接口技术有关知识
网页左边显示章节目录，右边是相应知识解说。
² 视频教程：提供有关视频解说教学内容及实验
² 课程习题：
Ø 题库
制作一种文献叫wordlist.jsp，在这个页面中，先显示接口技术知识章节名称，再显示某个章节所涵盖详细目录，并提供【浏览】按钮，当学生单击【浏览】按钮时候，会弹出一种模式窗口，打开word文献，让学生浏览该word文献。
Ø 答案：上述同样办法打开一种word文档，可以查看相应答案。
² 课程实验：将实验环节及附图添加进网页当中，让学生们可以通过浏览网页学习
制作实验。
5. 在线测试界面
一方面创立一种名为test数据库，本程序采用SQL Server 数据库编程，然后连接到网页当中。
² 出卷模块测试。在主页左边导航栏上单击“出卷”链接，系统进入出卷页面。填写各类题型数目、分值分派、考试时间和试卷编号等信息，单击“提交”按钮，系统就会自动从题库中随后提取题目组合成一份新试卷。
² 在线考试模块测试。单击主页导航栏“在线考试”链接，系统进入试卷选取页面。
6. 美学设计
l 拟定网站整体风格：由于咱们设计是学习网站，因此采用大方得体风格。
l 网页色彩搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。
u 网页配色基本概念
　　（1）白纸黑字是永远主题，谁都说不出不好来。
　　（2）网页最惯用流行色
　 　·兰色——蓝天白云，沉静整洁颜色。
　　 ·绿色——绿白相间，雅致而有气愤。
　 　·橙色——活泼热烈，原则商业色调。
　　 ·暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激红色，
　　（3）颜色忌讳
　　·忌脏——背景与文字内容对比不强烈，灰暗背景令人沮丧！
　　·忌纯——艳丽纯色对人刺激太强烈抗议，缺少内涵。
　　·忌跳——再好看颜色，也不能脱离整体。脱离群众是自取其辱！
　　·忌花——要有一种主色贯穿其中，主色并不时面积最大颜色，而是最重要，最能揭示和反映主题颜色，就象领导者同样，虽然在人数上居少数，但起决定作用。
　 　·忌粉——颜色浅固然显干净，但如果对比过弱，整得苍白无力了，就象病夫同样无可救药。
　 　·蓝色忌纯，绿色忌黄，红色忌艳。
　　（4）几种固定搭配
　 　·蓝白橙：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。
　 　·绿白兰：绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。
　　 ·橙白红：橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。
　 　·暗红黑：暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。
u 网页设计理念
　　（1）内容决定形式
　 　 先把内容充实上，再分区块，再定色调，再解决细节。
　　（2）先整体，后局部，最后回归到整体。
　　 全局考虑，把能填上都填上，占位置。然后定基调，分模块设计。最后调节不满意几种局部细节。
　　（3）功能决定设计方向
　 看网站用途，决定设计思路.商业性就要突出获利目；政府型就要
突出形象和权威性文章；教诲性，就要突出师资和课程。