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

1、第一章绪论1.1课程设计的目的1.2课程设计的背景和意义1.3课程设计环境及技术第二章需求分析2.1开发背景2.2功能要求第三章系统分析与设计3.1总体设计方案及思路3.2模块分析第四章界面实现4.1页面编辑、页面截图及相关技术介绍4.2部分页面编辑界面第五章课程设计心得体会参考文献第一章绪论1.1课程设计的目的1. 通过个人站点中界面的设计掌握站点及界面的制作方法。2. 实践中体会界面的布局模式、颜色搭配、声音搭配、光线柔和程度、操 作难以程度的变化对操作人员的感知影响。3. 理论结合实际，通过实践完善理论的掌握。1.2课程设计的背景和意义时下随着各种通讯技术的发展，互联网已在中国逐步进入普

2、及阶段，许多 人在充分享受浏览新闻，网上聊天，网络游戏，网上交易，收发电子邮件等网 络的各种乐趣后，开始不满足于被动式的接受，希望能主动参与网络，因此大 量的个人网站应运而生了。通过建立个人网站能更清晰的了解简单个人网站的 结果组成以及一些相应技术的使用。并且通过网站的设计能让我将书本上的东 西与实际动手能力相结合，将知识运用于现实，实现自我的知识储备的提升， 在实战中让自己得到锻炼。1.3课程设计环境及技术此次课程设计我运用 windows xp操作系统，页面主要采用 html语言、 Java Script语言以及少量js语言，美图效果采用美图工具秀秀剪辑。Win dows xp系统开发环境

3、较为成熟，进行开发设计的时候比较稳定。Html语言是页面编辑的基本语言，易于上手，较为简单。Java Script语言用于页面的动态图片及动画效果的实现。Js语言简化页面代码的编辑，方便修改和读取。美图工具可以简化背景页面的修改和美化。第二章需求分析2.1开发背景此次网站设计主要针对界面的方面进行考察，所以仅实现简单的跳转和相 关的页面操作即可，不需进行后台数据库的操作。我的课程设计是针对个人网站的界面设计，所以在进行设计之前我浏览了 一些个人网站的界面效果，进行对比参考发现，个人网站主要切入点应该是简 单易懂、易于操作、个性突出。所以我先进行了有个人特色的页面背景的美 化，突出我的网站，我的

4、特色这一要点。之后在网站的开发上主要关心用户操 作的方便性和色调搭配的舒适性以及背景音乐的愉悦性进行设计。2.2功能要求首页：能够完成页面跳转功能，可以自主选择头像，具有滚动欢迎字体， 具有滚动图片功能，有动态上浮云朵功能。（首页中设有五个超链接，可方便的跳转到其下的子页面，对子页面进行 浏览和编辑。）管理员登录：能够完成页面跳转功能，有添加和更新用户信息功能，用户 自主选择时间功能。（管理员登录页面设有不同于首页的五个超链接，可进行主页和其他相关 子页面的跳转。）学生登录：能够完成页面跳转功能，有添加和更新用户信息功能。（学生登录页面设有返回首页的超链接，方便跳转回首页）课程设置：能够完成页

5、面跳转功能，有添加和更新用户信息功能。（课程设置页面设有返回首页的超链接，方便跳转回首页）学生成绩查询：能够完成页面跳转功能，有添加和更新用户信息功能。（学生成绩查询页面设有返回首页的超链接，方便跳转回首页）学生考试评价：能够完成页面跳转功能，有添加和更新用户信息功能，有静态文本显示功能。（学生考试评价页面设有返回首页的超链接，方便跳转回首页）第三章系统分析与设计3.1总体设计方案及思路1 要建立个人网站，首先必须要了解一下目前网页制作的基本语言HTML，我通过网络学习了一些简单的 HTML语言，这让我对页面的处理有了 一定的了解。2. 学会使用目前流行的网页制作软件，如Frontpage、D

6、reamweaver 等一些功能强大，所见所得的软件，初步了解就可，不用全部掌握，一般是边用 边学，不断提高使用水平。我选择了使用 Dreamweaver ，Dreamweaver的好 处是简单易于上手能在短时间内实现网站的大体结构。3 .广泛的上网浏览各种网页，一开始最好能下载一些较简单的个人网页， 因为他们所用到的技术较为简单，可用网页制作软件打开研究。然后推荐去浏 览一些专业的网页设计网站，学习一些排版经验，同时可下载一些网页结构模 版供自己套用。4 .确定我的网站主题，本次我主要设计一个简单的介绍自己的网站而且时 间有限，技术还不够成熟，所以做出来的作品可能还不够成熟5. 网页最好不要

7、用特别与众不同的颜色、字体，因为每个人使用的计算机 各不相同，特别的颜色、字体别人不一定能看得到。3.2模块分析3.2.1网站功能框架：3.2.2网站站点配置:3.2.3网站站点截图:3.2.4网站站点地图:第四章界面实现4.1页面编辑、页面截图及相关技术介绍4.1.1首页的编辑及截图4.1.2首页的相关技术介绍1 此页面运用上下排版和竖直连接样式简单易懂方便各种用户操作2 页面中插入动态欢迎文字同时采用对比色差法着重引起用户注意3. 页面中运用js添加动态上浮云朵图案可增加用户的愉悦程度4. 图片中上部引用动态图片滚动显示技术增加用户的感官新鲜感5. 用户可自主选择图片效果增进用户与网站的互

8、动操作6. 页面采用同一色系 可避免用户操作时的反感情绪7. 页面中下部有个人简介信息页面背景将本人图片剪辑于其中区别其他页面凸显个性4.1.3管理员登录页面的编辑及截图4.1.4管理员登录页面的相关技术介绍1. 页面色泽饱满 与首页采用同色系背景图片以风景为主题并嵌入本人照片突出个性2. 操作简单易于理解3. 登录时间中有选择日期按键可避免用户错误操作的发生4. 页面返回按键采用图片形式增加用户操作时的感官舒适感5. 页面插入轻快的背景音乐促进用户操作时的感官愉悦程度4.1.5学生登录页面的编辑及截图4.1.6学生登录页面的相关技术介绍1.页面采用与首页同色系背景并将本人照片嵌入页面左上部用

9、以突出自我并区别其他页面2信息界面居中显示易于用户操作3. 页面设有重置按键可便于用户错误录入时简单清楚页面信息减少用户操作负责程度4. 页面左下部采用图片作为返回按键增加用户操作的新鲜感5. 页面插入轻快的背景音乐促进用户操作时的感官愉悦程度4.1.7课程设置页面的编辑及截图4.1.8课程设置页面的相关技术介绍1. 页面主要以淡黄色为基调 与页面采用同一色系 并嵌入本人图片 采用美 图工具进行透明增强操作与背景融为一体减小用户视觉冲突可减小用户长时 间登录的疲劳感2. 页面属于子页面按键较少操作简单方便用户3. 信心录入界面居中显示方便引起用户注意4. 页面返回按键采用图片形式增加用户操作时

10、的感官舒适感5. 页面背景音乐清新自然减少用户长时间登录的疲惫感4.1.9学生成绩查询页面的编辑及截图4.1.10学生成绩查询页面的相关技术介绍1. 页面采用淡色系与首页属同色系减少用户浏览页面时的冲突感本人背景图片嵌入页面右下方突出个人风格2. 输入框排列整齐居中用户进行数据录入时不会产生厌烦的情绪设置重 置按键方便用户对错误录入改正3信心录入界面居中显示 方便引起用户注意4. 页面返回按键采用图片形式增加用户操作时的感官舒适感5. 页面插入轻快的背景音乐促进用户操作时的感官愉悦程度4.1.11学生成绩查询页面的编辑及截图4.1.12学生考试评价页面的相关技术介绍1. 页面色泽饱满 与首页采

11、用同色系 背景图片以风景为主题 并嵌入本人照 片突出个性2. 操作简单易于理解3信心录入界面居中显示 方便引起用户注意4. 页面返回按键采用图片形式增加用户操作时的感官舒适感5. 页面插入轻快的背景音乐促进用户操作时的感官愉悦程度6. 插入静态文本并采用对比背景的颜色字体引起用户注意4.2部分页面编辑界面4.2.1首页页面的编辑4.2.2管理员登录页面的编辑第五章课程设计心得体会通过本次个人网站的设计实验，我了解的一些简单的HTML编程语言，以及Dreamweaver 的使用，通过网站的设计我发现了一些平时书本知识中没有 发现的问题，实践才是检验真理的唯一途径，通过实践我也发现了一些自己的 不足。此次设计的个人网站虽然不是很大，但都