软件工程用户界面设计报告书
目录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版）》，清华大学出版社，1900年01月
[2] 杨培添，《软件界面设计》，电子工业出版社，2007年02月
[3] 林锐，《Web软件用户界面设计指南》，电子工业出版社，2005
年5月
[4] 吴士力，汪孝宜，胡俦，《网络系统开发实例精粹（JSP
版）》，电子工业出版社，2006年8月
[5] 黄艳群，黎旭，李荣丽，《设计·人机界面》，北京理工大学出版社，2007年5月
https://www.360docs.net/doc/3413006170.html,/view/43210.html?wtp=tt
https://www.360docs.net/doc/3413006170.html,/view/119481.htm
0.5 术语与缩写解释
1. 应当遵循的界面设计规范
软件界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得软件设计变成了一门独特的艺术。软件用户界面的设计应遵循以下几个差不多原则：
用户导向原则：
明确到底谁是使用者，要站在用户的观点和立场上来考虑设计软件。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。网页的设计者要清晰，用户之间差不专门大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对专门多的颜色分辨不清；有的用户的听觉也会有障碍，关于软件的语音提示反映迟钝；而且相当一部分用户的计算机使用经验专门初级，关于复杂一点的操作会感受到专门费劲。另外，用户使用的计算机机器配置也是千差万不，包括显卡、声卡、内存、网速、操作系统以及扫瞄器等都会有不同。设计者假如忽视了这些差不，设计出的网页在不同的机器上显示就会造成混乱。
◆KISS原则：
KISS原则确实是"Keep It Simple And Stupid"的缩写，简洁和易于操作是网页设计的最重要的原则。怎么讲，软件建设出来是用于一般网民来查阅信息和使用网络服务。没有必要在网页上设置过多的操作，堆集上专门多复杂和花哨的图片。该原则一般的要求，网页的下载不要超过10秒钟（一般的拨号用户56 Kbps网速）；尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，同时有明确的操作提示；软件所有的内容和服务都在显眼处向用户予以讲明等。
◆布局操纵：
关于网页排版布局方面，专门多网页设计者重视不够，网页排版设计的过于死板，甚至照抄他人。假如网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰扫瞄者的阅读。一般在网页设计上所要遵循的原理有：
?Miller公式。依照心理学家George https://www.360docs.net/doc/3413006170.html,ler的研究表明，
人一次性同意的信息量在7个比特左右为宜。总结一个公
式为：一个人一次所同意的信息量为7±2 比特。这一原
理被广泛应用于软件建设中，一般网页上面的栏目选择最
佳在5～9个之间，假如软件所提供给扫瞄者选择的内容
链接超过那个区间，人在心理上就会烦躁，压抑，会让人
感受到信息太密集，看只是来，专门累。例如https://www.360docs.net/doc/3413006170.html,的
栏目设置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八个分类。https://www.360docs.net/doc/3413006170.html,的栏目设置：
MSN Home、My MSN、Hotmail、Search、Shopping、Money
和People & Chat共七项。然而专门多国内的软件在栏目
的设置远远超出那个区间。
?（2）分组处理。上面提到，关于信息的分类，不能超过9
个栏目。但假如你的内容实在是多，超出了9个，需要进
行分组处理。假如，你的网页上提供几十篇文章的链接，
需要每隔7篇加一个空行或平行线做以分组。假如你的软
件内容栏目超出9个，如微软公司的软件，共有11个栏
目，超过了9个。为了不破坏Miller公式，在设计时使
用蓝黑两种颜色分开，具体能够访问https://www.360docs.net/doc/3413006170.html, ◆视觉平衡：
网页设计时，也要各种元素（如图形、文字、空白）都会有视觉作用。依照视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。因此，为了达到视觉平衡，在
设计网页时需要以更多的文字来平衡一幅图片。另外，按照中国人的阅读适应是从左到右，从上到下，因此视觉平衡也要遵循那个道理。
例如，你的专门多的文字是采纳左对齐〈Align=left〉，需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。一般情况下，每张网页都会设置一个页眉部分和一个页脚部分，页眉部分常放置一些Banner 广告或导航条，而页脚部分通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。同时，也决不能低估空白的价值。假如你的网页上所显示的信息特不密集，如此不但不利于读者阅读，甚至会引起读者反感，破坏该软件的形象。在网页设计上，适当增加一些空白，精炼你的网页，使得页面变的简洁。
◆色彩的搭配和文字的可阅读性：
颜色是阻碍网页的重要因素，不同的颜色对人的感受有不同的阻碍，例如：
?红色和橙色使人兴奋并使得心跳加速；黄色使人联想到
阳光，是一种快活的颜色；黑颜色显得比较庄重，考虑
到你希望对扫瞄者产生什么阻碍，为网页设计选择合适
的颜色（包括背景色、元素颜色、文字颜色、链节颜色
等）。
?为方便阅读软件上的信息，能够参考报纸的编排方式将
网页的内容分栏设计，甚至两栏也要比一满页的视觉效
果要好。
?另一种能够提高文字可读性的因素是所选择的字体，通
用的字体（Arial，Courier New，Garamond，Times New Roman，中文宋体）最易阅读，专门字体用于标题效果
较好，然而不适合正文。假如在整个页面使用一些专门
字体（如Cloister，Gothic，Script，Westminster，
华文彩云，华文行楷），如此读者阅读起来感受一定专
门糟糕。该类专门字体假如在页面上大量使用，会使得
阅读颇为费劲，扫瞄者的眼睛专门快就会疲劳，不得不
转移到其他页面。
◆和谐与一致性：
通过对软件的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的网页看起来应该是和谐的。或者讲，软件的众多单独网页应该看起来像一个整体。
软件设计上要保持一致性，这又是专门重要的一点。
一致的结构设计，能够让扫瞄者对软件的形象有深刻的经历；一致的导航设计，能够让扫瞄者迅速而又有效的进入在软件中自己所需要的部分；一致的操作设计，能够让扫瞄者快速学会在整个软件的各种功能操作。破坏这一原则，会误导扫瞄者，同时让整个软件显的杂乱无章，给人留下不良的印象。因此，软件设计的一致性并不意味着刻板和一成不变，有的软件在不同栏目使用不同的风格，或者随着时刻的推移不断的改版软件，会给扫瞄者带来新奇的感受。
◆个性化：
?符合网络文化
企业软件不同于传统的企业商务活动，要符合Internet网络文化的要求。首先，网络最早是非正式性、非商业化的，只是科研人员用来交流信息。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具有隐蔽性，谁也不明白对方的真实身份。另外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。现在网络用户的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候大相径庭。因此，整
个互联网的文化是一种休闲的、非正式性的、轻松爽朗的文化。在软件上使用幽默的网络语言，制造一种休闲的、轻松愉快、非正式的氛围会使软件的访问量大增。
?塑造软件个性
另外，软件的整体风格和整体气氛表达要同企业形象相符合并应该专门好的体现企业CI。
2. 界面的关系图和工作流程图
经客户要求及小组讨论，本接口学习网站各个界面关系图如下：
设计流程：
●确定网站的整体风格：由于我们设计的是学习网站，因此
采纳大方得体的风格。
●网页色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮
或ICON做点缀。
●确定网页设计的工具：用Dreamweaver来设计整个网站的
界面设计，用Photoshop来设计背景、框架等，用Fireworks 来对差不多设计好的图片进行切割成模块，以便插入Dreamweaver中，用Flash进行美工设计、网页配色，制作CI、LOGO、Banner等网页动画制作。
●编写JSP语言
3. 主界面
为了页面导航的清晰，本网站采纳了框架式页面设计。页面头放在上框架，课程介绍模块放中框架，下框架是放接口技术相关图片。功能导航、登陆界面放在右框架。
●课程介绍模块设计
该模块利用photoshop软件制作，制作边框，结合图片文字，对接口技术课程做个简单的介绍。
●教学资源模块设计
●登陆界面设计