人机交互技术报告.docx
- 文档编号:841691
- 上传时间:2022-10-13
- 格式:DOCX
- 页数:17
- 大小:666.25KB
人机交互技术报告.docx
《人机交互技术报告.docx》由会员分享,可在线阅读,更多相关《人机交互技术报告.docx(17页珍藏版)》请在冰豆网上搜索。
人机交互技术报告
人机交互技术结课作品报告
文件状态
[]草稿
[√]正式发布
[]正在修改
文件标识
Index.html
当前版本
2.0
作者
赵嘉鹏冯雪琪
完成日期
2021.12.25
电子科技大学信息与软件工程学院
版本历史
版本/状态
作者
参与者
起止日期
备注
1.0
赵嘉鹏
冯雪琪
2021.12.05-2021.12.15
无法实现图片轮播
2.0
赵嘉鹏
冯雪琪
2021.12.15-2021.12.25
功能实现
01文档介绍
本文档的主要内容是介绍设计一个名为“里程〞的篮球俱乐部网页的具体流程及步骤,主要包括网页的系统需求,系统设计,系统实现和系统测试等内容。
02文档目的
编写此文档的主要目的是将关于“里程〞篮球俱乐部网页设计的根本步骤以及设计思路清楚明了的展现出来,更加简洁明了的展现在设计初期,中期和后期我们所遇到的问题以及相关的解决方法,展现我们组的同学对所运用知识的熟悉程度和掌握程度,也让自身对网页设计的整体流程更加清楚。
03工程背景
(1)工程的提出原因
为了群众和广阔篮球爱好者能够更加了解里程俱乐部,更方便的了解里程俱乐部的新闻以及相关安排,我们决定给实现一个关于“里程〞篮球俱乐部的网页工程。
(2)工程的技术背景
本学期,我们小组成员在人机交互课堂上学习到了许多交互设计的原那么和技术,并且了解并且掌握了利用HTML+CSS+JS开发前端网页的技术。
此工程便是我们将人机交互课堂上所学习到的知识运用到现实场景中开发出的产品。
04参考文献
[1].runoob./html/html-tutorial.html菜鸟教程-HTML教程
[2].runoob./css/css-tutorial.html菜鸟教程-CSS教程
[3].runoob./js/js-tutorial.html菜鸟教程-JS教程
05术语与缩写解释
术语/缩写
解释
JS
JavaScript
1系统需求
系统的功能构造框图如下所示:
图1.1里程系统构造图
在为“里程〞篮球俱乐部设计的网页中,必须要包含1.俱乐部的宗旨,文化,历史2.竞技队的根本信息〔教练团队,全体成员等〕,比赛安排,赛场风采,比赛结果等信息3.业余队的根本信息,比赛安排,聚会或活动安排等信息4.俱乐部经营的衍生产品信息。
页面构造深度要求为两级〔必要时可以到达三级〕。
界面最好到达简洁美观的效果,可以使用一些图片,使用的视觉元素需要考虑问题。
应该主动运用所学到的人机交互设计原那么和技术,使用HTML+CSS+JS技术进展前端开发。
2系统设计
根据系统需求,我们将网页分为六个局部,其中考虑到网页设计的通用规那么,我们将六个页面的头部设计成一样的样式,使网页看起来更加像是一个整体。
第一局部:
首页
(1)界面设计〔草图〕
图2.1首页设计草图
(2)功能设计
这一局部将主要展示俱乐部的重要信息。
首先采用了图片轮播的方式,将俱乐部近期的大新闻配上文字和图片放在页面的顶部;其次将近期的俱乐部新闻以及配图和里程近期比赛安排放在下方。
第二局部:
里程/竞技队
〔1〕界面设计〔草图〕
图2.2竞技队页面设计草图
〔2〕功能设计
这一局部是对竞技队的介绍,包括人员,比赛的信息。
首先将球员的风采图采用图片轮播的方式放在页面的上方;其次展示里程本赛季的全部赛程安排和比赛结果;最后对竞技队的球员以及教练进展根本的介绍并配图。
第三局部:
里程/业余队
〔1〕界面设计〔草图〕
图2.3业余队界面设计草图
〔2〕功能设计
这一局部主要是对业余队的介绍,包括根本信息以及相关活动安排。
首先采用图片轮播的形式对业余球队进展展示;其次分为两局部介绍,其一为里程业余篮球队的根本信息,其二为业余球队的比赛安排,训练以及聚会安排。
第四局部:
里程/文化
〔1〕界面设计〔草图〕
图2.4里程文化界面设计草图
〔2〕功能设计
这一局部主要是对里程俱乐部的文化介绍。
分为三个小局部,分别是俱乐部名字的由来;球衣的介绍以及对球队精神的概述。
第五局部:
里程/历史
〔1〕界面设计〔草图〕
图2.5里程历史界面设计草图
〔2〕功能设计
这一局部顾名思义,就是对俱乐部历史的介绍,让人们能够清楚的了解到俱乐部的来历以及开展。
第六局部:
里程/周边
〔1〕界面设计〔草图〕
图2.6里程设计草图
〔2〕功能设计
这一局部是对里程俱乐部的衍生产品的介绍。
包括产品名称,图片以及售价。
3系统实现
〔1〕“里程〞篮球俱乐部的各个界面如下所示:
图3.1首页
图3.2里程/竞技队界面
图3.3里程/业余队界面
图3.4里程/文化界面
图3.5里程/历史界面
图3.6里程/周边界面
〔2〕主要功能实现的核心代码
导航栏以及标志展示以及搜索栏实现的html代码:
url(images/1.jpg)no-repeat00">
url(images/search-bg.gif)no-repeat00"> url(images/search-field-bg.gif)no-repeat00;"> url(images/search-field-bg.gif)no-repeatright0;"/>