用户界面设计报告

学生科技实践综合治理平台

用户界面设计报告

文件状态： [ ] 草稿 [√] 正式发布 [ ] 正在修改

文件标识： Company-Project-SD-UI 当前版本： 作 者： 陈川州 完成日期： 2011-6-3 浙江工商大学

计算机与信息工程学院·软件工程系

版 本 历 史

版本/状态

作者 陈川州 参与者 陈川州 起止日期 2011-6-2~2011-6-3 备注

目 录

0. 文档介绍 ......................................................................................................................... 4 文档目的 .......................................................................................................................... 4 文档范围 .......................................................................................................................... 4 读者对象 .......................................................................................................................... 4 参考文献 .......................................................................................................................... 4 [1] 术语与缩写说明 .................................................................................................... 4 1. 应当遵循的界面设计标准 ............................................................................................. 5 2. 界面的关系图和工作流程图 ......................................................................................... 8 3. 主界面 ........................................................................................................................... 10 4. 子界面A ....................................................................................................................... 11 5. 子界面B ....................................................................................................................... 15 6. 子界面C ....................................................................................................................... 17 7. 子界面D ....................................................................................................................... 18 8. 子界面E ....................................................................................................................... 21 9. 美学设计 ....................................................................................................................... 23 10. 界面资源设计 ............................................................................................................. 24 11. 其他 ............................................................................................................................. 24

0. 文档介绍

文档目的

界面设计文档能够让用户对软件产品有了更直观的了解，而且了解各个模块的设计及用意。

文档范围

文档包括公用界面设计，学生用户界面设计，教师用户界面设计，专家用户界面设计，分类治理员用户界面设计，总治理员用户界面设计。其中各个界面包括框架设计，编程设计，按钮设计，面板设计，菜单设计，标签设计，图标设计，转动条及状态栏设计。

读者对象

登岸网站的游客、学生、教师、专家、分类治理员和总治理员。

参考文献

[1] 术语与缩写说明

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

1. 应当遵循的界面设计标准

软件界面的设计，既要从外观上进行创意以抵达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得软件设计变成了一门独特的艺术。软件用户界面的设计应遵循以下几个大体原那么：  用户导向原那么：

明确到底谁是利用者，要站在用户的观点和立场上来考虑设计软件。要作到这一点，必需要和用户来沟通，了解他们的需求、目标、期望和偏好等。网页的设计者要清楚，用户之间不同专门大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，关于软件的语音提示反映迟缓；而且相当一部份用户的运算机利用体会很低级，关于复杂一点的操作会感觉到很费力。另外，用户利用的运算机机械配置也是千差万别，包括显卡、声卡、内存、网速、操作系统和阅读器等都会有不同。设计者若是轻忽了这些不同，设计出的网页在不同的机械上显示就会造成混乱。  KISS原那么：

KISS原那么确实是\"Keep It Simple And Stupid\"的缩写，简练和易于操作是网页设计的最重要的原那么。毕竟，软件建设出来是用于一般网民来查阅信息和利用网络效劳。没有必要在网页上设置过量的操作，堆集上很多复杂和花哨的图片。该原那么一样的要求，网页的下载不要超过10秒钟（一般的拨号用户56 Kbps网速）；尽可能利用文本链接，而减少大幅图片和动画的利用；操作设计尽可能简单，而且有明确的操作提示；软件所有的内容和效劳都在显眼处向用户予以说明等。  布局操纵：

关于网页排版布局方面，很多网页设计者重视不够，网页排版设计的过于古板，乃至照抄他人。若是网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰阅读者的阅读。一样在网页设计上所要遵循的原理有：

 （1）Miller公式。依照心理学家George 的研究说明，人一次性同意的信息

量在7个比特左右为宜。总结一个公式为：一个人一次所同意的信息量为 7±2 比特。这一原理被普遍应用于软件建设中，一样网页上面的栏目选择最正确在5～9个之间，若是软件所提供给阅读者选择的内容链接超过那个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看只是来，很累。例如的栏目设置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八个分类。的栏目设置：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七项。但是很多国内的软件在栏目的设置远远超出那个区间。

 （2）分组处置。上面提到，关于信息的分类，不能超过9个栏目。但如果是你的

内容实在是多，超出了9个，需要进行分组处置。若是，你的网页上提供几十篇文章的链接，需要每隔7篇加一个空行或平行线做以分组。若是你的软件内容栏目超出9个，如微软公司的软件，共有11个栏目，超过了9个。为了不破坏Miller

公式，在设计时利用蓝黑两种颜色分开，具体能够访问视觉平稳：

网页设计时，也要各类元素（如图形、文字、空白）都会有视觉作用。依照视觉原理，图形与一块文字相较较，图形的视觉作用要大一些。因此，为了达到视觉平稳，在设计网页时需要以更多的文字来平稳一幅图片。另外，按照中国人的阅读适应是从左到右，从上到下，因此视觉平稳也要遵循那个道理。

例如，你的很多的文字是采纳左对齐〈Align=left〉，需要在网页的右面加一些图片或一些较敞亮、较夺目的颜色。一样情形下，每张网页都会设置一个页眉部份和一个页脚部份，页眉部份常放置一些Banner广告或导航条，而页脚部份通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平稳。同时，也决不能低估空白的价值。若是你的网页上所显示的信息超级密集，如此不但无益于读者阅读，乃至会引发读者反感，破坏该软件的形象。在网页设计上，适当增加一些空白，精炼你的网页，使得页面变的简练。

 色彩的搭配和文字的可阅读性：

颜色是阻碍网页的重要因素，不同的颜色对人的感觉有不同的阻碍，例如：

 红色和橙色令人兴奋并使得心跳加速；黄色令人联想到阳光，是一种快

活的颜色；黑颜色显得比较庄重，考虑到你希望对阅读者产生什么阻碍，为网页设计选择适合的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。

 为方便阅读软件上的信息，能够参考报纸的编排方式将网页的内容分栏

设计，乃至两栏也要比一满页的视觉成效要好。

 另一种能够提高文字可读性的因素是所选择的字体，通用的字体（Arial，

Courier New，Garamond，Times New Roman，中文宋体）最易阅读，特殊字体用于题目成效较好，可是不适合正文。若是在整个页面利用一些特殊字体（如Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），如此读者阅读起来感觉必然很糟糕。该类特殊字体若是在页面上大量利用，会使得阅读很是费力，阅读者的眼睛专门快就会疲劳，不能不转移到其他页面。

 和谐与一致性：

通过对软件的各类元素（颜色、字体、图形、空白等）利用必然的规格，使得设计良好的网页看起来应该是和谐的。或说，软件的众多单独网页应该看起来像一个整体。软件设计上要维持一致性，这又是很重要的一点。

一致的结构设计，能够让阅读者对软件的形象有深刻的经历；一致的导航设计，能够让阅读者迅速而又有效的进入在软件中自己所需要的部份；一致的操作设计，能够让阅读者快速学会在整个软件的各类功能操作。破坏这一原那么，会误导阅读者，而且让整个软件显的杂乱无章，给人留下不良的印象。固然，软件设计的一致性并非意味着刻板和一成不变，有的软件在不同栏目利用不同的风格，或随着时刻的推移不断的改版软件，会给阅读者带

来新鲜的感觉。  个性化：

 符合网络文化

企业软件不同于传统的企业商务活动，要符合Internet网络文化的要求。第一，网络最先是非正式性、非商业化的，只是科研人员用来交流信息。第二，网络信息是只在运算机屏幕上显示而没有打印出来阅读，网络上的交流具有隐蔽性，谁也不明白对方的真实身份。另外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。现在网络用户的利用环境所蕴涵的思维模式与坐在办公室里西装革履的时候截然不同。因此，整个互联网的文化是一种休闲的、非正式性的、轻松活泼的文化。在软件上利用幽默的网络语言，制造一种休闲的、轻松愉快、非正式的气氛会使软件的访问量大增。  塑造软件个性

另外，软件的整体风格和整体气氛表达要同企业形象相符归并应该专门好的表现企业CI。

2. 界面的关系图和工作流程图

注册页面选报项目查看比赛历届比赛信息申报项目上传项目成果学生主页查看我的项目查看个人信息修改个人信息选报项目查看比赛申报项目邀请函处理老师主页我的项目管理首页确认或退选组员查看个人信息修改个人信息评审项目打分专家主页查看个人信息修改个人信息发布比赛查看已有比赛审核项目分类管理员主页添加赛事裁判移除已添加裁判查看个人信息修改个人信息添加用户、学号和教师号发布新闻管理已发布新闻管理员主页添加比赛类型查看已有比赛类型查看个人信息修改个人信息 3. 主界面  新闻、通知模块设计

该模块要紧显示发布的新闻和通知，用户点击新闻和通知的题目，系统进入显示新闻通知详细信息页面。点击右上角的【更多】，能够查看更多新闻通知。

 登录模块设计

操作流程图：

登录模块注册输入用户名和密码否验证注册信息是否有效学生老师专家分类管理员管理员否是登录是否成功注册成功是用户界面

 竞赛信息模块设计

点击【历届竞赛信息】超链接，进入查看历届竞赛信息页面。

4. 子界面A 学生界面

功能选择菜单界面：

用户点击不同的功能菜单，进入不同的操作界面。

查看竞赛界面：

点击赛事题目，能够查看具体的赛事介绍信息；点击【选报项目】，进入选报项目界面；点击【申报项目】，进入申报项目界面。

选报项目界面：

点击项目题目，能够查看具体的项目介绍信息；点击【我要加入】，选报该项目。

申报项目界面：

在表单中填写相关信息，点击【申报项目】按钮，在该赛事下申报自己的项目。

上传项目功效界面：

点击【阅读…】按钮，选择文件，再点击【提交】，上传项目功效文件。若是想查看最近一次提交的项目功效文件，能够点击【上一次的版本】按钮下载文件。

我的项目界面：

该界面显示用户选报的项目列表，通过点击【查看组员】用户能够查看同组项目的组员信息。

确认组员及邀请指导教师界面：

关于自己申报的项目，若是项目被分类治理员立项了，那么用户能够在该页面给自己的项目邀请指导教师，而且能够通过点击【选定组员】链接给项目选择组员。

查看个人信息界面：

该页面显示用户的个人信息，点击【编辑】能够修改个人信息。

修改个人信息界面：

在表单中填写相关个人信息，点击【提交】按钮后系统更新个人信息。

5. 子界面B 教师界面

查看竞赛界面：

点击赛事题目，能够查看具体的赛事介绍信息；点击【申报项目】，进入申报项目界面。

申报项目界面：

在表单中填写相关信息，点击【申报项目】按钮，在该赛事下申报自己的项目。

邀请函处置界面：

在该页面能够进行处置学生的邀请函操作，能够选择同意或拒绝。关于已经处置的邀请函，能够进行删除操作。

我的项目界面：

在该页面能够查看项目是不是被立项，能够通过点击【进一步操作】进入确认组员界面。

确认组员界面：

教师能够在该页面确认或退选已经选报自己项目的学生。

6. 子界面C

专家界面

选择赛事界面：

专家在该页面通过下拉列表选择一个赛事，点击【提交】按钮，进入项目评审界面。

项目评审界面：

该界面显示所选择的赛事下的所有项目。关于已经上传项目功效文件的项目组，专家能够通过点击【下载】按钮下载项目功效文件，而且能够通过点击【评分】按钮给该项目打分；关于已经评分的项目，若是专家想修改评分，能够通过点击【从头评分】按钮从头给项目评分。

评分界面：

专家从方方面面对项目进行评分，而且在该界面上填写相关的分数，点击【提交评分结果】完成给项目的打分工作。

7. 子界面D

分类治理员界面

发布赛事界面：

分类治理员能够在该界面发布新赛事，填写赛事的相关信息（竞赛题目和相关介绍），选择所属的赛事类型，点击【确认】按钮即可完成赛事发布。

审核项目界面：

该界面显示相关项目的列表，通过点击【进一步操作】能够进入审核项目界面选择是不是对项目进行立项。

立项操作界面：

分类治理员能够在该界面选择是不是对项目进行立项。

赛事列表界面：

该界面显示相关赛事的列表，点击【选专家】能够进入选择专家界面给对应的赛事选择专家。

选择专家界面：

该界面上方显示能够选择的专家的相关信息，分类治理员能够选择一个或几个专家，点击列表下方的【提交】完成选专家操作。已选择的专家信息将在页面下方显示，分类治理员能够删除已经给赛事选择的专家。

8. 子界面E

治理员界面

用户治理界面：

治理员能够手工或批量添加用户。若是选择手工添加，只有填写表单的相关信息，然后点击【提交】按钮就能够够成功添加用户；若是选择批量导入，只要选择一个符合格式要求的Excel文件（Excel格式模板能够通过Excel文件模板下载链接下载）。点击【批量添加】就能够够成功添加。同时，治理员还能够在该界面添加本校学生的学号和教师号（在游客注册的时候验证用），一样有手工添加和批量添加两种方式。

发布新闻界面：

在界面表单上填写发布新闻的相关信息，点击【提交】按钮即可成功发布新闻。点击页面右上角的【已有新闻】链接，进入新闻治理界面。

新闻治理界面

该界面显示已经发布的新闻列表，点击新闻题目能够查看新闻详细内容。选中新闻前面的复选框，点击【删除选中的按钮】，即可删除新闻。

竞赛类型治理界面：

填写添加竞赛类型所需的必要信息（类型名称和相关介绍），点击【提交】按钮即

可成功添加新的竞赛类型。点击界面右边的【已有类型】链接，可查看系统已有的竞赛类型。

9. 美学设计  确信网站的整体风格：由于咱们设计的是科研治理网站，因此采纳大方得体

的风格。

 网页色彩的搭配：蓝为主调。白底，蓝题目栏，白色按钮。

 界面的布局及理由：本系统坚持图形用户界面（GUI）设计原那么，界面直观、

对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就能够够方便利用本应用系统。利用简单，布局美观大方，考虑用户的利用适应。  界面的色彩及理由：天蓝色，自但是轻松。

10. 界面资源设计 图标资源 、

、

图像资源

界面组件

11. 其他