《用户界面设计课程设计报告》由会员分享，可在线阅读，更多相关《用户界面设计课程设计报告（10页珍藏版）》请在金锄头文库上搜索。
1、第一章绪论21.1课程设计的目的21.2课程设计的背景和意义21.3课程设计环境及技术2第二章需求分析32.1开发背景32.2功能要求3第三章系统分析与设计43.1总体设计方案及思路43.2模块分析4第四章界面实现64.1页面编辑、页面截图及相关技术介绍64.2部分页面编辑界面8第五章 课程设计心得体会 9参考文献10第一章绪论1.1课程设计的目的1. 通过个人站点中界面的设计掌握站点及界面的制作方法。2. 实践中体会界面的布局模式、颜色搭配、声音搭配、光线柔和程度、操 作难以程度的变化对操作人员的感知影响。3. 理论结合实际，通过实践完善理论的掌握。1.2课程设计的背景和意义时下随着各种通讯
2、技术的发展，互联网已在中国逐步进入普及阶段，许多人 在充分享受浏览新闻，网上聊天，网络游戏，网上交易，收发电子邮件等网络的 各种乐趣后，开始不满足于被动式的接受，希望能主动参与网络，因此大量的个 人网站应运而生了。通过建立个人网站能更清晰的了解简单个人网站的结果组成 以及一些相应技术的使用。并且通过网站的设计能让我将书本上的东西与实际动 手能力相结合，将知识运用于现实，实现自我的知识储备的提升，在实战中让自 己得到锻炼。1.3课程设计环境及技术此次课程设计我运用windows xp操作系统，页面主要采用html语言、Java Script语言以及少量js语言，美图效果采用美图工具秀秀剪辑。Wi
3、ndows xp系统开发环境较为成熟，进行开发设计的时候比较稳定。Html语言是页面编辑的基本语言，易于上手，较为简单。Java Script语言用于页面的动态图片及动画效果的实现。Js语言简化页面代码的编辑，方便修改和读取。美图工具可以简化背景页面的修改和美化。第二章需求分析2.1开发背景此次网站设计主要针对界面的方面进行考察，所以仅实现简单的跳转和相关 的页面操作即可，不需进行后台数据库的操作。我的课程设计是针对个人网站的界面设计，所以在进行设计之前我浏览了一 些个人网站的界面效果，进行对比参考发现，个人网站主要切入点应该是简单易 懂、易于操作、个性突出。所以我先进行了有个人特色的页面背景
4、的美化，突出 我的网站，我的特色这一要点。之后在网站的开发上主要关心用户操作的方便性 和色调搭配的舒适性以及背景音乐的愉悦性进行设计。2.2功能要求首页：能够完成页面跳转功能，可以自主选择头像，具有滚动欢迎字体，具 有滚动图片功能，有动态上浮云朵功能。（首页中设有五个超链接，可方便的跳转到其下的子页面，对子页面进行浏 览和编辑。）管理员登录：能够完成页面跳转功能，有添加和更新用户信息功能，用户自 主选择时间功能。（管理员登录页面设有不同于首页的五个超链接，可进行主页和其他相关子 页面的跳转。）学生登录：能够完成页面跳转功能，有添加和更新用户信息功能。（学生登录页面设有返回首页的超链接，方便跳转
5、回首页） 课程设置：能够完成页面跳转功能，有添加和更新用户信息功能。（课程设置页面设有返回首页的超链接，方便跳转回首页） 学生成绩查询：能够完成页面跳转功能，有添加和更新用户信息功能。（学生成绩查询页面设有返回首页的超链接，方便跳转回首页） 学生考试评价：能够完成页面跳转功能，有添加和更新用户信息功能，有静 态文本显示功能。（学生考试评价页面设有返回首页的超链接，方便跳转回首页）第三章系统分析与设计31总体设计方案及思路1. 要建立个人网站，首先必须要了解一下目前网页制作的基本语言HTML, 我通过网络学习了一些简单的HTML语言，这让我对页面的处理有了 一定的了解。2学会使用目前流行的网页制
6、作软件，如Frontpage、Dreamweaver等一些 功能强大，所见所得的软件，初步了解就可，不用全部掌握，一般是边用边学， 不断提高使用水平。我选择了使用Dreamweaver， Dreamweaver的好处是简单易 于上手能在短时间内实现网站的大体结构。3广泛的上网浏览各种网页，一开始最好能下载一些较简单的个人网页， 因为他们所用到的技术较为简单，可用网页制作软件打开研究。然后推荐去浏览 一些专业的网页设计网站，学习一些排版经验，同时可下载一些网页结构模版供 自己套用。4确定我的网站主题，本次我主要设计一个简单的介绍自己的网站而且时 间有限，技术还不够成熟，所以做出来的作品可能还不够
7、成熟5网页最好不要用特别与众不同的颜色、字体，因为每个人使用的计算机 各不相同，特别的颜色、字体别人不一定能看得到。3.2模块分析3.2.1网站功能框架:3.2.2网站站点配置:孙畤荣的站点定义为基本髙级站点定义一空宦您的站点包含以下设置：本地信息：（将创建本地根文件夹）站点名称：孙璐荣本地根文件夹：D:TDDClWNLOArDreamweawer 8孙璐荣远程信息：访问:我将在以后完成此设置测试巌务罔：迈问:本地/网貉远端文件夹:D: TDDOWNLOAD VDr e amw e aver 8孙璐荣 可以使用高级选项卡对您的站点进行进一步配置3.2.3站点截图: CSS应用程序标签检查器文件
8、B）孙璐荣V本地观團V矗C& 站点-孙璐荣（D:TDDOWHLC3.2.4网站站点地图:第四章界面实现4.1页面编辑、页面截图及相关技术介绍4.1.1首页的编辑及截图4.1.2首页的相关技术介绍1. 此页面运用上下排版和竖直连接样式简单易懂方便各种用户操作2. 页面中插入动态欢迎文字同时采用对比色差法着重引起用户注意3. 页面中运用js添加动态上浮云朵图案 可增加用户的愉悦程度4. 图片中上部引用动态图片滚动显示技术增加用户的感官新鲜感5. 用户可自主选择图片效果增进用户与网站的互动操作6. 页面采用同一色系可避免用户操作时的反感情绪7. 页面中下部有个人简介信息页面背景将本人图片剪辑于其中区
9、别其他 页面凸显个性4.1.3管理员登录页面的编辑及截图4.1.4管理员登录页面的相关技术介绍1. 页面色泽饱满 与首页采用同色系 背景图片以风景为主题 并嵌入本人 照片突出个性2. 操作简单易于理解3. 登录时间中有选择日期按键可避免用户错误操作的发生4. 页面返回按键采用图片形式增加用户操作时的感官舒适感5. 页面插入轻快的背景音乐促进用户操作时的感官愉悦程度4.1.5学生登录页面的编辑及截图4.1.6学生登录页面的相关技术介绍1. 页面采用与首页同色系背景 并将本人照片嵌入页面左上部 用以突出自 我并区别其他页面2. 信息界面居中显示易于用户操作3. 页面设有重置按键 可便于用户错误录入
10、时简单清楚页面信息 减少用户 操作负责程度4. 页面左下部采用图片作为返回按键增加用户操作的新鲜感5. 页面插入轻快的背景音乐促进用户操作时的感官愉悦程度4.1.7课程设置页面的编辑及截图4.1.8课程设置页面的相关技术介绍1. 页面主要以淡黄色为基调 与页面采用同一色系 并嵌入本人图片 采用 美图工具进行透明增强操作与背景融为一体 减小用户视觉冲突可减小用户长 时间登录的疲劳感2. 页面属于子页面按键较少操作简单方便用户3. 信心录入界面居中显示方便引起用户注意4. 页面返回按键采用图片形式增加用户操作时的感官舒适感5. 页面背景音乐清新自然减少用户长时间登录的疲惫感4.1.9学生成绩查询页
11、面的编辑及截图4.1.10学生成绩查询页面的相关技术介绍1. 页面采用淡色系与首页属同色系减少用户浏览页面时的冲突感本人 背景图片嵌入页面右下方突出个人风格2. 输入框排列整齐 居中用户进行数据录入时不会产生厌烦的情绪 设置 重置按键方便用户对错误录入改正3. 信心录入界面居中显示方便引起用户注意4. 页面返回按键采用图片形式增加用户操作时的感官舒适感5. 页面插入轻快的背景音乐促进用户操作时的感官愉悦程度4.1.11学生成绩查询页面的编辑及截图4.1.12学生考试评价页面的相关技术介绍1. 页面色泽饱满 与首页采用同色系 背景图片以风景为主题 并嵌入本人 照片突出个性2. 操作简单易于理解3
12、. 信心录入界面居中显示方便引起用户注意4. 页面返回按键采用图片形式增加用户操作时的感官舒适感5. 页面插入轻快的背景音乐促进用户操作时的感官愉悦程度6. 插入静态文本并采用对比背景的颜色字体引起用户注意4.2部分页面编辑界面4.2.1首页页面的编辑V lacroaedia Dreaweaver 8 - D: TDDOINLOADDreaeaver 8#w荣(XHTIL)文件匹）編辑g）查看）插入d）修改龜）文本Q）命令 站点0 窗口地）帮助插入常用布局表单文本HTML应用程序Flash元素收藏夹0 S | B旨團色同S旧|世宙 CSS应用程序1.标签检查器文件!=旦空拆分设计 标题：无标题
13、文档资源代码片断（3=1234567891011121314151617181920 21 22232425262728 29!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1. 0 Transitional/ZEN ffhttp:/ww. w3. org/TR/xhtml 1/DTD/xhtmil-transitional, dtd t itle小爱-学生成绩管理系统-主页欢迎进入小爱学生成绩管理系统0(A_A )0哈哈(cent er 首页a href=2.管理员登录inbsp ;inbsp ; ;inbsp:a href=3.学生登录 4nbsp ;4nbsp ; ;4nbsp:凍程设S /ainbsp: inbsp: inbsp: inbsp:$a href=5.学生丧绩查询 inbsp ;inbsp ;inbsp:学生考试评价h2个人简介 FORM name=jnyform action* inethod=post :请选择图片：INPU
