用户界面设计课程设计报告.doc

I 目目 录录 第一章 绪论 3 3 1 11 1 课程设计的目的课程设计的目的 3 1 21 2 课程设计的背景和意义课程设计的背景和意义 3 1 31 3 课程设计环境及技术课程设计环境及技术 3 第二章 需求分析 4 4 2 12 1 开发背景开发背景 4 2 2 功能要求 4 第三章 系统分析与设计 5 5 3 13 1 总体设计方案及思路总体设计方案及思路 5 3 23 2 模块分析模块分析 5 第四章 界面实现 7 7 4 14 1 页面编辑 页面截图及相关技术介绍页面编辑 页面截图及相关技术介绍 7 4 24 2 部分页面编辑界面部分页面编辑界面 11 第五章 课程设计心得体会 1212 参考文献参考文献 1313 2 第一章 绪论 1 11 1 课程设计的目的课程设计的目的 1 通过个人站点中界面的设计掌握站点及界面的制作方法 2 实践中体会界面的布局模式 颜色搭配 声音搭配 光线柔和程度 操 作难以程度的变化对操作人员的感知影响 3 理论结合实际 通过实践完善理论的掌握 1 21 2 课程设计的背景和意义课程设计的背景和意义 时下随着各种通讯技术的发展 互联网已在中国逐步进入普及阶段 许多 人在充分享受浏览新闻 网上聊天 网络游戏 网上交易 收发电子邮件等网 络的各种乐趣后 开始不满足于被动式的接受 希望能主动参与网络 因此大 量的个人网站应运而生了 通过建立个人网站能更清晰的了解简单个人网站的 结果组成以及一些相应技术的使用 并且通过网站的设计能让我将书本上的东 西与实际动手能力相结合 将知识运用于现实 实现自我的知识储备的提升 在实战中让自己得到锻炼 1 31 3 课程设计环境课程设计环境及技术及技术 此次课程设计我运用 windows xp 操作系统 页面主要采用 html 语言 Java Script 语言以及少量 js 语言 美图效果采用美图工具秀秀剪辑 Windows xp 系统开发环境较为成熟 进行开发设计的时候比较稳定 Html 语言是页面编辑的基本语言 易于上手 较为简单 Java Script 语言用于页面的动态图片及动画效果的实现 Js 语言简化页面代码的编辑 方便修改和读取 美图工具可以简化背景页面的修改和美化 3 第二章 需求分析 2 12 1 开发背景开发背景 此次网站设计主要针对界面的方面进行考察 所以仅实现简单的跳转和相 关的页面操作即可 不需进行后台数据库的操作 我的课程设计是针对个人网站的界面设计 所以在进行设计之前我浏览了 一些个人网站的界面效果 进行对比参考发现 个人网站主要切入点应该是简 单易懂 易于操作 个性突出 所以我先进行了有个人特色的页面背景的美化 突出我的网站 我的特色这一要点 之后在网站的开发上主要关心用户操作的 方便性和色调搭配的舒适性以及背景音乐的愉悦性进行设计 2 2 功能要求 首页 能够完成页面跳转功能 可以自主选择头像 具有滚动欢迎字体 具有滚动图片功能 有动态上浮云朵功能 首页中设有五个超链接 可方便的跳转到其下的子页面 对子页面进行 浏览和编辑 管理员登录 能够完成页面跳转功能 有添加和更新用户信息功能 用户 自主选择时间功能 管理员登录页面设有不同于首页的五个超链接 可进行主页和其他相关 子页面的跳转 学生登录 能够完成页面跳转功能 有添加和更新用户信息功能 学生登录页面设有返回首页的超链接 方便跳转回首页 课程设置 能够完成页面跳转功能 有添加和更新用户信息功能 课程设置页面设有返回首页的超链接 方便跳转回首页 学生成绩查询 能够完成页面跳转功能 有添加和更新用户信息功能 学生成绩查询页面设有返回首页的超链接 方便跳转回首页 学生考试评价 能够完成页面跳转功能 有添加和更新用户信息功能 有 静态文本显示功能 学生考试评价页面设有返回首页的超链接 方便跳转回首页 4 第三章 系统分析与设计 3 13 1 总体设计方案及思路总体设计方案及思路 1 要建立个人网站 首先必须要了解一下目前网页制作的基本语言 HTML 我通过网络学习了一些简单的 HTML 语言 这让我对页面的处理有了一定的了解 2 学会使用目前流行的网页制作软件 如 Frontpage Dreamweaver 等一 些功能强大 所见所得的软件 初步了解就可 不用全部掌握 一般是边用边 学 不断提高使用水平 我选择了使用 Dreamweaver Dreamweaver 的好处是简 单易于上手能在短时间内实现网站的大体结构 3 广泛的上网浏览各种网页 一开始最好能下载一些较简单的个人网页 因为他们所用到的技术较为简单 可用网页制作软件打开研究 然后推荐去浏 览一些专业的网页设计网站 学习一些排版经验 同时可下载一些网页结构模 版供自己套用 4 确定我的网站主题 本次我主要设计一个简单的介绍自己的网站而且时 间有限 技术还不够成熟 所以做出来的作品可能还不够成熟 5 网页最好不要用特别与众不同的颜色 字体 因为每个人使用的计算机 各不相同 特别的颜色 字体别人不一定能看得到 3 23 2 模块分析模块分析 3 2 1 网站功能框架 5 个人网站 首页 管 理 员 登 录 学 生 登 录 课 程 设 置 学 生 成 绩 查 询 学 生 考 试 评 价 3 2 2 网站站点配置 3 2 3 网站站点截图 3 2 4 网站站点地图 6 第四章 界面实现 4 14 1 页面编辑 页面截图及相关技术介绍页面编辑 页面截图及相关技术介绍 4 1 1 首页的编辑及截图 4 1 2 首页的相关技术介绍 1 此页面运用上下排版和竖直连接样式 简单易懂 方便各种用户操作 2 页面中插入动态欢迎文字同时采用对比色差法着重引起用户注意 3 页面中运用 js 添加动态上浮云朵图案 可增加用户的愉悦程度 4 图片中上部引用动态图片滚动显示技术 增加用户的感官新鲜感 5 用户可自主选择图片效果 增进用户与网站的互动操作 6 页面采用同一色系 可避免用户操作时的反感情绪 7 页面中下部有个人简介信息 页面背景将本人图片剪辑于其中 区别其他 页面 凸显个性 4 1 3 管理员登录页面的编辑及截图 4 1 4 管理员登录页面的相关技术介绍 1 页面色泽饱满 与首页采用同色系 背景图片以风景为主题 并嵌入本人 照片突出个性 2 操作简单 易于理解 3 登录时间中有选择日期按键 可避免用户错误操作的发生 4 页面返回按键采用图片形式 增加用户操作时的感官舒适感 5 页面插入轻快的背景音乐 促进用户操作时的感官愉悦程度 4 1 5 学生登录页面的编辑及截图 4 1 6 学生登录页面的相关技术介绍 1 页面采用与首页同色系背景 并将本人照片嵌入页面左上部 用以突出自 我并区别其他页面 2 信息界面居中显示 易于用户操作 3 页面设有重置按键 可便于用户错误录入时简单清楚页面信息 减少用户 7 操作负责程度 4 页面左下部采用图片作为返回按键 增加用户操作的新鲜感 5 页面插入轻快的背景音乐 促进用户操作时的感官愉悦程度 4 1 7 课程设置页面的编辑及截图 4 1 8 课程设置页面的相关技术介绍 1 页面主要以淡黄色为基调 与页面采用同一色系 并嵌入本人图片 采用 美图工具进行透明增强操作 与背景融为一体 减小用户视觉冲突 可减小用户长 时间登录的疲劳感 2 页面属于子页面 按键较少 操作简单 方便用户 3 信心录入界面居中显示 方便引起用户注意 4 页面返回按键采用图片形式 增加用户操作时的感官舒适感 5 页面背景音乐清新自然 减少用户长时间登录的疲惫感 4 1 9 学生成绩查询页面的编辑及截图 4 1 10 学生成绩查询页面的相关技术介绍 1 页面采用淡色系 与首页属同色系 减少用户浏览页面时的冲突感 本人 背景图片嵌入页面右下方 突出个人风格 2 输入框排列整齐 居中 用户进行数据录入时不会产生厌烦的情绪 设置 重置按键 方便用户对错误录入改正 3 信心录入界面居中显示 方便引起用户注意 4 页面返回按键采用图片形式 增加用户操作时的感官舒适感 5 页面插入轻快的背景音乐 促进用户操作时的感官愉悦程度 4 1 11 学生成绩查询页面的编辑及截图 4 1 12 学生考试评价页面的相关技术介绍 1 页面色泽饱满 与首页采用同色系 背景图片以风景为主题 并嵌入本人 照片突出个性 2 操作简单 易于理解 3 信心录入界面居中显示 方便引起用户注意 4 页面返回按键采用图片形式 增加用户操作时的感官舒适感 5 页面插入轻快的背景音乐 促进用户操作时的感官愉悦程度 6 插入静态文本并采用对比背景的颜色字体 引起用户注意 8 4 24 2 部分页面编辑界面部分页面编辑界面 4 2 1 首页页面的编辑 4 2 2 管理员登录页面的编辑 9 第五章 课程设计心得体会 通过本次个人网站的设计实验 我了解的一些简单的 HTML 编程语言 以及 Dreamweaver 的使用 通过网站的设计我发现了一些平时书本知识中没有发现 的问题 实践才是检验真理的唯一途径 通过实践我也发现了一些自己的不足 此次设计的个人网