【Web开发及人机交互导论】Bike Sharing网页设计

最新推荐文章于 2023-12-31 01:43:01 发布
最新推荐文章于 2023-12-31 01:43:01 发布
阅读量1k 收藏 4
点赞数 5
分类专栏： Web开发及人机交互导论
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pigpigpig64/article/details/117175915
版权

代码：Github仓库地址

一、项目要求

Bike Sharing Website Development

Bikesharing.com is a new website and mobile companion app that is designed to promote increased use of cycling to and from work. Its main aim is to educate both employees and employers about the health and financial benefits of enrolling in the national cycle to work programme.

The website will be mostly informational – but will also contain maps of cycle ways and advice on cycles including reviews and maintenance.

As a junior web developer, you are to pitch for the Bikesharing.com website by developing a prototype website and supporting documentation. This includes the mark-up, project plan, visual design, content design, navigation design, and target audience/user scenarios (see individual worksheets for specific deliverables).

The prototype Website should work on HTML5 / CSS3 compliant browsers.

The Employee

Typical Tasks Include: Looking for further information on the financial aspects of the scheme. Viewing the nearest cycle shops that are participating in the scheme. Locating suitable cycle maps to and from their home / place of work.

The Employer

Typical Tasks Include: How to enrol the organisation into the cycle to work scheme. General administration advice. Legislation and insurance information.

Suggested Content Areas. (Website)

  • Home Page
    Employers
    Employee’s
    Cycle Reviews
    How to guides
    Interactive Maps
    Cost calculator
    Social Media Integration

You are free to propose a suitable visual design that reflects the type of website and target audience requirements. There are no set colours or logos for Bikesharing.com – if you want to create these, you are free to do so!

二、项目知识点

  1. Web需求分析能力；
  2. Web页面的WireFrame设计能力；
  3. 使用各种HTML标记实现Web页面的各项内容
  4. 使用CSS技术实现页面的样式管理
  5. 使用javascript实现人机交互功能

三、Planning, Analysis and Design Documentation

1. Project Plan

根据对于项目要求的阅读，了解到本次项目的主要要求时构建一个以鼓动员工参与骑行活动为主题的Bikecycling.com网站建设。初步计划完成主页，导航，共享单车位置查询，登陆注册，以及针对雇员雇主的独立页面设计。

2. Audience Analysis

Primary Audience: 首要用户是公司的雇员。
Secondary Audience: 次要用户是公司的雇主们，再次是外网访问用户。

3. Statement of Purpose and Market Analysis

对于不同用户有着不同的目的。

雇员：主要任务是让他们了解到骑行的益处及便利，让员工们能进一步增强锻炼的意识，积极参加活动。
雇主：主要任务是参与对于雇员的管理任务，从各方位了解到员工们的参与度。同时，进行对于活动的策划与管理。
外网访问用户：主要任务是让他们了解了解到骑行的益处及便利，展示公司文化。

4. A Navigation Chart

Content Analysis:

Bikecycling.com的主要面向对象是雇主，雇员，外网访问用户，同时网站主要目的是推广骑行，所以主要内容是以个人骑行锻炼为主要方向。次要内容是以推广骑行活动，展示文化。

主要任务：

  1. 全体用户：导航+共享单车位置查询
  2. 雇员：骑行锻炼统计+骑行活动报名
  3. 雇主：活动策划

相关次要任务：

  1. 雇员：价格计算器（激励骑行）
  2. 雇主：骑行活动人员统计

可获取资源：

  1. 全体用户：有关自行车的新闻+自行车相关网页+与开发人员交流
  2. 雇员：深圳市自行车维修点信息
  3. 雇主：相关政策信息

5. Visual Style (Storyboard / Moodboard).

Storyboard:
在这里插入图片描述
在这里插入图片描述

四、Website Document Outline

1.Wireframe Design

主页：
在这里插入图片描述
雇主雇员入口：
在这里插入图片描述
登陆注册页面：
在这里插入图片描述

2.Functional Description

1. 主页

  1. 相关新闻及知识普及
    附上文章两篇：
    骑自行车的深层解析：“绿色、环保、健康”！&让你不再误解，骑自行车上班

  2. 自行车相关网页链接
    可以通过链接直接进入中国自行车爱好者，中国自行车协会网，自行车百度百科的网页

  3. 联系方式
    可以直接与网页开发人员直接联系

2. 百度地图导航查询

  1. 导航功能
    根据用户输入的起点与终点，提供最便捷的骑行路线规划，以达到既安全又省时的骑行之旅。

3. 百度地图共享单车位置查询

  1. 共享单车位置查询
    用户打开页面就可以看见深圳大学附近的共享单车位置（通过红点标出）。

4. 雇员入口

  1. 深圳自行车维修点查询
    向用户提供数个自行车维修点的位置信息，并且可以由用户向后台提供新的店名地址信息。（不会及时出现在页面上，需要后台经过审核校对）
  2. 每日骑行统计
    展示用户每天的骑行锻炼记录，也提供提交锻炼记录的接口。（由于是用户自身的锻炼记录，所以会立即出现在页面上进行展示，同时将数据同步到价格计算器）
  3. 价格计算器
    根据用户输入的每日骑行统计，计算出大概的节约费用，（依据假设快车每公里1.6元，共享单车每公里0.2元，即每公里节约1.4元计算），从而激励用户从节约费用的角度参与骑行活动。
  4. 公司骑行活动报名
    展示公司骑行活动的活动介绍及奖励，附上报名链接，激发员工的积极程度。（由于需要审核，不会立即反馈到雇主页面的人员统计表中）

5.雇主入口

  1. 公司骑行活动策划
    由公司雇主完成对于骑行活动的策划工作，雇主可以在此页面完成对于活动介绍及奖励的修改工作。
  2. 公司骑行活动人员统计
    展示公司参与骑行活动人员的姓名、工号、当前骑行总里程数。
  3. 相关政策信息
    展示有关“十三五”提倡的“鼓励自行车”的意见，并通过内嵌网页的形式进行展示。

6. 登录/注册页面

  1. 登陆页面
    用户通过用户名、密码、验证码登录网站，并且提供了自动登录的选项。如果用户未注册，也可以通过注册按钮跳转到注册页面。
  2. 注册页面
    用户通过用户名、密码、验证码注册网站帐号。

五、Website Layout，and Website Presentational, Enhancement

1. CSS design document and functional description

一： CSS design document

网页大框架CSS样式设置

主框架
.wrapper {
	width: 940px;
	margin: 20px auto 20px auto;
	border: 2px solid #000000;
	background-color: #ffffff;}
	网站总框架图，包含了所有的网页内容

在这里插入图片描述
利用position：fixed，z-index使得顶栏永远位于网页最高，且是最高图层

顶栏
.top {position: fixed;top: 0px;
	left: 0px;	padding: 0px;
	margin: 0px;	height: 50px;
	width: 100%;	background-color: gainsboro;
	/*位于最高层 永远位于页面顶端*/
	z-index: 2;}

在这里插入图片描述
导航栏与页脚根据不同网页内容布局，会有微小差别。具体区别在内嵌CSS设置。

导航栏，页脚
nav,
footer {
	clear: both;
	color: #ffffff;
	background-color: #aeaca8;
	height: 30px;
}

在这里插入图片描述在这里插入图片描述

内容框
section.courses {
	float: left;
	width: 680px;
	border-right: 1px solid #eeeeee;
}

在这里插入图片描述

侧栏，内含两个article，具体CSS见大作业.CSS。
aside {	width: 230px;
	/*紧贴section*/
	float: left;
	padding: 0px 0px 0px 20px;
}

在这里插入图片描述
特色部分CSS：

按钮样式：
input {
	font-size: 80%;
	color: #5a5854;
	background-color: #f2f2f2;
	border: 1px solid #bdbdbd;
	/*设置inputbox的边框圆角形状*/
	border-radius: 5px;
	padding: 5px 10px 5px 10px;
	margin-bottom: 10px;
}

在这里插入图片描述 在这里插入图片描述

侧栏超链接动态变化
aside section a {
	display: block;
	padding: 10px;
	border-bottom: 1px solid #eeeeee;
}

aside section a:hover {
	color: #985d6a;
	background-color: #efefef;
}

a {
	color: #de6581;
	text-decoration: none;
}

在这里插入图片描述
在这里插入图片描述

功能键动态变化
.functionButton {
	color: #444444;
	font-size: 16px;
	text-shadow: 0px 1px 1px #ffffff;
	border-bottom: 2px solid #b2b2b2;
	background-color: #b9e4e3;
	/*设置平常渐变颜色*/
	background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce));
	background: -moz-linear-gradient(top, #beeae9, #a8cfce);
	background: -o-linear-gradient(top, #beeae9, #a8cfce);
	background: -ms-linear-gradient(top, #beeae9, #a8cfce);
}
.functionButton:hover {
	color: #333333;
	border: 1px solid #a4a4a4;
	border-top: 2px solid #b2b2b2;
	background-color: #a0dbc4;
	/*设置hover时的渐变色*/
	background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9));
	background: -moz-linear-gradient(top, #a8cfce, #beeae9);
	background: -o-linear-gradient(top, #a8cfce, #beeae9);
	background: -ms-linear-gradient(top, #a8cfce, #beeae9);
}

在这里插入图片描述
在这里插入图片描述

二：functional description（以下为HTML&JS代码部分解析以及后期开发指南）

1.主页

  • 相关新闻及知识普及
<article>
<figure>
		<img src="image/bicycle1.jpg" alt="bicycle1" width="290px" height="180px" />
		<figcaption>节能环保 绿色出行</figcaption>
	</figure>
	<hgroup>
		<h2>骑自行车的深层解析：</h2>
		<h3>“绿色、环保、健康”！</h3>
	</hgroup>
	<p>在如今的时代，越来越多的人喜欢玩手机，喜欢宅在家里。锻炼身体这件事，也只是停留在嘴上，真正发生变化的，是我们肥胖的身体，以及颓废的心灵。这时，我们更应该多去外面骑骑车，看看大自然的景色，呼吸新鲜的空气，顺便放松一下心情。坚持每周骑行一次，既能锻炼身体，又能放松心情。</p>
</article>

<figure>因为float:left位于左侧，包含了图片+说明文字
<hgroup>为两个标题组，包含正标题与副标题
<p>是正文部分
上下两个部分为相同HTML结构。
后期如果需要添加新的文章，可以以同样的方式添加<article>，同时调整courses的高度，达到包含的目的。

  • 自行车相关网页链接
<section class="related-website">
	<h2>自行车相关网页</h2>
	<a href="http://www.chinabike.net/" target="_blank">中国自行车爱好者</a>
<a href="http://www.china-bicycle.com/" target="_blank">中国自行车协会网</a>
	<a href="https://baike.baidu.com/item/64?fr=aladdin" target="_blank">自行车百度百科</a>
</section>

利用超链接标签，链接到外网。target="_blank"是为了在新的标签页打开网站。
后期添加新的网站可以以相同的格式添加超链接标签。

  • 联系方式
<section class="contact-details">
	<h2>联系方式</h2>
	<p>微博：xxxxxxxx<br />
		微信公众号：xxxxxxxx<br />
		网页开发人员微信：xxxxxxxx
	</p>
	<form>
	<p>期待收到来自您的意见与反馈</p>
		<textarea name="message" cols="25" rows="6" style="resize: none;"></textarea>
		<input type="submit" value="提交" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="reset" value="清空" />
</form>
</section>

后期开发可以创立属于公司独有的社交媒体，并通过后端将意见反馈等汇总，做到网站的优化。

  1. 百度地图导航查询
  • 导航功能
<script type="text/javascript">
var name1 = null,
		name2 = null;
	alert("请输入你的起点与终点");
	name1 = prompt("输入你的起点", "深圳大学(粤海校区)");
	name2 = prompt("输入你的终点", "深圳腾讯滨海大厦");
	alert("如有需要，请在地图上选择具体出发点、终点")
	var map = new BMap.Map("container");
	map.centerAndZoom(new BMap.Point(113.94585, 22.537589), 18);
	map.enableScrollWheelZoom();
	var riding = new BMap.RidingRoute(map, {
		renderOptions: {
			map: map,
			autoViewport: true
		}
	});
//显示当行路径
	riding.search(name1, name2);
	var top_left_control = new BMap.ScaleControl({
		anchor: BMAP_ANCHOR_TOP_LEFT
	}); // 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
	var top_right_navigation = new BMap.NavigationControl({
		anchor: BMAP_ANCHOR_TOP_RIGHT,
		type: BMAP_NAVIGATION_CONTROL_SMALL
	}); //右上角，仅包含平移和缩放按钮
	/*缩放控件type有四种类型:
	BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；
BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；
BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
	map.addControl(top_left_control);
	map.addControl(top_left_navigation);
	map.addControl(top_right_navigation);
</script>

这是一个简易的基于百度地图API的导航网页设计。
基本思路是通过Alert框获取用户的起点与终点位置信息，然后通过riding.search查找骑行路径。
其中起点与终点位置可以是具体地址也可以是模糊地址。具体地址会根据起点终点直接给出推荐路径，模糊地址会给用户选项，进行起点终点的具体选择。
后面部分为地图提供了缩放控件，同时添加map.enableScrollWheelZoom();使用户可以通过滑轮缩放地图。
并且网页顶端给出了再次查询的按钮。
后期开发可以基于此网页添加新的地图图层，还可以添加路况判断等辅助工具，进一步优化地图导航系统。

  1. 百度地图共享单车位置查询
  • 共享单车位置查询
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(113.94585, 22.537589);
	map.enableScrollWheelZoom();
	map.centerAndZoom(point, 20);
	// 编写自定义函数,创建标注
	function addMarker(point) {
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
	}
	// 随机向地图添加25个标注
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lngSpan = Math.abs(sw.lng - ne.lng);
	var latSpan = Math.abs(ne.lat - sw.lat);
	for (var i = 0; i < 70; i++) {
		var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 1), ne.lat - latSpan * (Math.random() * 1));
		addMarker(point);
	}
</script>

这是一个基于百度地图API的仿真共享单车位置查询功能。
基本思路是确定地图中心点后，通过随机函数，随机生成70个红点，用来标注（意为共享单车位置）。
后期开发可以植入摩拜单车等共享单车数据库，通过联动查询单车位置。这里因为技术原因，暂时无法完成开发。

  1. 雇员入口
    *新功能添加方法（雇员功能与雇主功能添加方法相同）

设计思路：将功能区置于<div class=’functionX’>中，再将这个div置于<div class=’functionPlace’>中。通过按键触发JS动态效果，使得需要展示的div的display属性设置为block，不需要展示的div的display属性设置为none。
后期开发：添加新功能在功能栏处添加新button，再在内容区添加div。最后通过JS设置相对应的div的display属性，以达到自控功能展示隐藏的效果。

<section class="functionMenu">
	<h2>功能</h2>	
	<input type="button" class="functionButton" id="function1Button" value="深圳自行车维修点查询" />
	<input type="button" class="functionButton" id="function2Button" value="每日骑行统计" /><br />
	<input type="button" class="functionButton" id="function4Button" value="价格计算器" />
	<input type="button" class="functionButton" id="function3Button" value="公司骑行活动报名" />
</section>

document.getElementById("function4Button").onclick = function() {
	document.getElementById("function1").style.display = "none";
	document.getElementById("function2").style.display = "none";
	document.getElementById("function3").style.display = "none";
	document.getElementById("function4").style.display = "block";
}
  • 深圳自行车维修点查询
<div id="function1">
	<table>
		<tbody>
			<tr>
				<th>序号</th>
				<th>店名</th>
				<th>地址</th>
			</tr>
			<tr>
				<th>1.</th>
				<td>粤兴单车维修</td>
				<td>广东省深圳市南山区大板桥巷40-3号</td>
			</tr>
			<tr>
				<th>2.</th>
				<td>专业电动车单车维修</td>
				<td>深圳市龙华区弓村一区20-1</td>
			</tr>
		</tbody>
	</table>
	<form>
	<h4>
		欢迎提供新的自行车维修点:
	</h4>			
<label>店名：</label>
	<input type="text" name="shopname" size="15" maxlength="15" autocomplete="off" />
		<label>地址：</label>
		<input type="text" name="shopaddress" size="30" maxlength="30" autocomplete="off"/>
		<input id="form1" type="button" onclick="clear1()" value="提交" />
</form>
</div>

后期开发可以通过后台验证用户提供信息是否准确，从而确定是否展示地址信息。因为本次大作业只涉及前端，故不作验证工作。

  • 每日骑行统计
<div id="function2">
<form>
		<table class="table22">
			<tbody id="table2">
				<tr>
					<th>序号</th><th>日期</th><th>骑行距离（km）</th>
				</tr>
				<tr>
					<th>1.</th><td>2020-05-01</td><td>2km</td>
					</tr>
				<tr>
			</tbody>
		</table>
		<h4>输入并更新你的骑行日志:（可在价格计算器查询节约总费用）</h4>
		<form>
			<label>日期:</label>
			<input id="submitDate" type="date" name="date" />
			<label>骑行距离:</label>
			<input id="distance" type="text" name="distance" size="5" maxlength="5" autocomplete="off"/>
			<input id="form2" type="button" onclick="clear2()" value="提交" />
		</form>
	</form>
</div>

function clear2() {
	/*根据行数，推断下一次的序列号*/
	var rownum = document.getElementById("table2").rows.length;
	/*获得inputbox的输入属性*/
	var date1 = document.getElementById('submitDate').value;
	var distance1 = document.getElementById('distance').value;
	/*因为div为固定高度，若大于11行，信息会超出div*/
	if (rownum > 11) {
		alert("当前骑行信息太多，请联系管理员删除部分信息。");
		return;
	}
	/*检查是否为空信息*/
	if (date1 == "" || distance1 == "") {
		alert("请正确输入信息！");
		return;
	}
	/*添加新的一行*/
	addtr(rownum, date1, distance1);
	addtr2(rownum, date1, distance1);
	/*清空表单*/
	document.getElementById('form2').form.reset();
}
function addtr(num, date, distance) {
	var j = 1;
	var tableobj = document.getElementById("table2");
	var trobj = document.createElement("tr");
	var tdobj = document.createElement("td");
	var thobj = document.createElement("th");
	/*在dom树下添加新的子节点，第一项为th，后两项为td*/
	for (var i = 0; i < 3; i++) {
		if (i == 0) {
			var thobj = document.createElement("th");
			thobj.innerHTML = num + '.';
			trobj.appendChild(thobj);
			continue;
		}
		if (i == 1) {
			var tdobj = document.createElement("td");
			tdobj.innerHTML = date;
			trobj.appendChild(tdobj);
		}
		if (i == 2) {
			var tdobj = document.createElement("td");
			tdobj.innerHTML = distance + 'km';
			trobj.appendChild(tdobj);
		}
	}
	trobj.appendChild(tdobj);
	tableobj.appendChild(trobj);
}

本页的动态效果是由添加dom树子节点的方式完成的，同时完成了功能之间的联动效果，实现了信息的同步传递。Addtr（）实现本页数据更新，addtr2（）实现价格计算器页面的数据更新。
JS动态思路解释见代码区注释，for循环看似多余，实则是为了后期开发提供模板。因为本次每一栏之间有需要不同的if代码支撑，但是如果新添加的信息与前几栏信息相似度较高，可以使用for循环的方式简化代码。
Add2（）将在价格计算器中展示。

  • 价格计算器
<div id="function4">
	<p>说明：假设快车每公里1.6元，共享单车每公里0.2元，本页面可大致计算每月节约总费用</p>
	<form>
		<table class="table22">
			<tbody id="table4">
			<tr>
				<th>序号</th>
				<th>日期</th>
				<th>骑行距离（km）</th>
				<th>节约总费用（元）</th>
			</tr>
			<tr>
				<th>1.</th>
				<td>2020-05-01</td>
				<td>2km</td>
				<td>2.8</td>
			</tr>
				<th>4.</th>
				<td>2020-06-01</td>
				<td>3.2km</td>
				<td id="last5">21.98</td>
			</tr>
		</tbody>

function addtr2(num, date, distance) {
	var j = 1;
	var tableobj = document.getElementById("table4");
	var trobj = document.createElement("tr");
	var tdobj = document.createElement("td");
	var thobj = document.createElement("th");
	/*在dom树下添加新的子节点，第一项为th，后三项为td*/
	for (var i = 0; i < 4; i++) {
		if (i == 0) {
			var thobj = document.createElement("th");
			thobj.innerHTML = num + '.';
			trobj.appendChild(thobj);
			continue;
		}
		if (i == 1) {
			var tdobj = document.createElement("td");
			tdobj.innerHTML = date;
			trobj.appendChild(tdobj);
		}
		if (i == 2) {
			var tdobj = document.createElement("td");
			tdobj.innerHTML = distance + 'km';
			trobj.appendChild(tdobj);
		}
		if (i == 3) {
			var tdobj = document.createElement("td");
			var id = "last" + num;
			/*为新id做准备*/
			num++;
			/*获取前一次总价*/
			var sum_ = document.getElementById(id).innerHTML;
			/*强制转换为float型*/
			var sum = parseFloat(sum_);
			sum += distance * 1.4;
			/*保留两位小数*/
			sum = Math.round(sum * 100) / 100
			tdobj.innerHTML = sum;
			tdobj.id = "last" + num;
			trobj.appendChild(tdobj);
		}
	}
	trobj.appendChild(tdobj);
	tableobj.appendChild(trobj);
}

思路与更新每日骑行统计相类似，多的是对于原有数据的采集工作，需要获取前一次总价，再加上新里程*1.4，完成数学运算后添加。具体注释见代码区。

  • 公司骑行活动报名
<div id="function3">
	<h2>活动介绍：</h2>
	<p>加强国家的环保观念，我们公司提倡“低碳生活，从骑行开始;关爱地球，文明出行”的理念，营造一个“和谐、环保、健身、文明、沟通”的环境。<br />
		带领自行车爱好者进行活动，为广大员工增加一个互相交流学习的平台，促进同事间关系，增进大家的友谊，促进大家团队合作的意识。<br />
		为在员工提供一次锻炼身体的机会，增强大家的体质，提醒大家要时刻锻炼身体。<br />
	</p>
	<ol>
		<h3>奖励如下：</h3>
		<li>第1名：2000元+带薪休假3天</li>
		<li>第2-5名：1000元+带薪休假2天</li>
		<li>第5-10名：500元</li>
	</ol>
	<p>报名链接↓</p>
	<form>
		<label>工号:</label>
		<input id="workNum" type="text" name="workNum" size="8" maxlength="8" placeholder="00000001" autocomplete="off"/>
		<label>姓名:</label>
		<input id="workerName" type="text" name="workerName" size="5" maxlength="5" placeholder="xxxxx" autocomplete="off"/>
		<input id="form3" type="button" onclick="clear3()" value="提交" />
	</form>
</div>

后期开发可以进一步实现与雇主页面的互动。将从雇员页面获得的报名信息同步到雇主页面的人员统计栏，同时也将雇主页面的活动策划信息更新到雇员页面，做到更好的交互性。
目前通过JS，jQuery无法很好的完成不同页面之间的互动，可能需要后台数据库的支撑，故暂时无法完成此需求。

  1. 雇主入口
  • 公司骑行活动策划
<div id="function1">
	<form>
	<label>活动介绍：</label><br />
		<textarea name="ActivityInform" cols="68" rows="7" style="resize: none;font-size: 18px;">&nbsp&nbsp加强国家的环保观念，我们公司提倡“低碳生活，从骑行开始;关爱地球，文明出行”的理念，营造一个“和谐、环保、健身、文明、沟通”的环境。&#10&nbsp&nbsp带领自行车爱好者进行活动，为广大员工增加一个互相交流学习的平台，促进同事间关系，增进大家的友谊，促进大家团队合作的意识。&#10&nbsp&nbsp为在员工提供一次锻炼身体的机会，增强大家的体质，提醒大家要时刻锻炼身体。
		</textarea>
		<label>奖励：</label><br />
		<textarea name="AwardInform" cols="68" rows="5" style="resize: none;font-size: 18px;">第1名：2000元+带薪休假3天&#10第2-5名：1000元+带薪休假2天&#10第5-10名：500元
		</textarea>
		<input type="button" value="确认修改" />
	</form>
</div>

后期开发可以进一步实现与雇员页面的互动，及时将信息更新到雇员页面的活动报名。

  • 公司骑行活动人员统计
<div id="function2">
	<table class="table22">
		<tbody id="table2">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>工号</th>
				<th>骑行总里程数</th>
			</tr>
			<tr>
				<th>1.</th>
				<td>张三</td>
				<td>00000001</td>
				<td>45.2km</td>
			</tr>
		</tbody>
	</table>

后期开发可以进一步实现与雇员页面以及数据库的互动，及时将报名信息更新到雇主页面，再通过账号系统获取员工的骑行总里程数。

  • 相关政策信息
<div id="function3">
	<iframe src="政府如何实行“十三五”提倡的“鼓励自行车”的意见？ - 知乎.html" width="670px" height="450px" scrolling="auto" frameborder="0">
	</iframe>
</div>

运用的是内嵌网页的方法，由于网页较大，使用scrolling="auto"激活滑轮拖动页面。

  1. 登录/注册页面
  • 登陆页面
    在这里插入图片描述
  • 注册页面

在这里插入图片描述
在这里插入图片描述

2. User manual for the functions

用户使用手册：

  1. 登录与注册
    点击网页右上角的登录/注册按钮，进入页面完成登录/注册功能。登陆页面为用户提供了跳转注册页的功能。用户只需要根据页面提示进行操作。
    在这里插入图片描述
    在这里插入图片描述

  2. 相关网页查询
    进入主页，点击侧栏相对应的网页超链接，即可跳转到指定网页。
    在这里插入图片描述在这里插入图片描述

  3. 社交媒体联系方式
    进入主页/雇员雇主入口/登陆注册页面，右下角有网页开发人员的联系方式，同时用户也可以以提交表单的方式，向后台工作人员反馈意见。
    在这里插入图片描述

  4. 百度地图导航查询
    点击导航栏的“百度地图导航查询”进入导航页面。
    根据页面提示框信息，输入相对应的起点与终点位置信息。
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    然后地图上会根据输入的地址计算出推荐路径
    准确位置导航：（直接给出推荐途径）
    在这里插入图片描述
    模糊位置导航：（地图自动根据起点终点给出可能的位置，供用户选择）

在这里插入图片描述在这里插入图片描述在这里插入图片描述

地图使用指南：

  1. 比例尺与缩放控件
    方法一：利用左上角或者右上角的地图插件缩放地图
    在这里插入图片描述
    方法二：利用鼠标滑轮缩放地图
    在这里插入图片描述
  2. 路线指引
    点击地图起点或终点按钮，即可查看更详细的关于导航路线的文字指引。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    3.多次导航查询
    点击页面右上角的导航查询在这里插入图片描述按钮，重复上述查询操作。
  1. 百度地图共享单车位置查询
    打开页面即可看见位于深圳大学周围的单车位置信息，可通过鼠标滑轮缩放地图大小。
    在这里插入图片描述
  2. 深圳自行车维修点查询
    用户可以点击查看有关深圳市自行车维修点的信息（店名+地址）
    并且通过下方的表单提供新地址。

在这里插入图片描述

  1. 公司骑行活动报名
    点击“公司骑行活动报名”，查看活动介绍与奖励信息，并通过下方表单报名
    在这里插入图片描述
  2. 每日骑行统计+价格计算器
    点击骑行统计/价格计算器可以查看往日自己登记的锻炼日志/金额计算器
    在这里插入图片描述
    在这里插入图片描述

在下方表单选择日期/骑行距离提交
在这里插入图片描述
在这里插入图片描述

然后就可以在骑行统计与价格计算器中查看新增记录了
在这里插入图片描述
在这里插入图片描述

注：当输入有误（日期或骑行距离无输入时会报错）
在这里插入图片描述
当输入条数超过11条时，会报错（超出内容框范围）
在这里插入图片描述

  1. 公司骑行活动策划
    点击“公司骑行活动策划”，在textarea中修改内容，并点击确认修改按钮完成修改。
    在这里插入图片描述
  2. 公司骑行活动人员统计
    点击“公司骑行活动人员统计”，查看公司参与骑行活动人员的姓名、工号、当前骑行总里程数。
    在这里插入图片描述
  3. 相关政策信息
    点击“相关政策信息”，通过滑轮查看内嵌网页有关“十三五”提倡的“鼓励自行车”的意见。
    在这里插入图片描述

项目结果

1. 主页

在这里插入图片描述

2. 百度地图导航查询

在这里插入图片描述

3. 百度地图共享单车位置查询

在这里插入图片描述

4.雇员入口

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.雇主入口

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. 登录/注册页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

人机交互作业简单html网页制作
11-30
人机交互老师让做的html简单网页 主页：表格布局。其他的是另外的小网页
【人机交互技术】Web界面设计
欢迎来到关关雎鸠儿的博客
07-15 8741
一、实验目的和要求 1）熟悉 Web 站点的信息交互模型和结构 2）熟悉 Web 界面设计的基本思想和原则 3）掌握 Web 界面设计的工具和技术 二、实验内容与步骤 1）实验内容: 要求根据 Web 界面设计的原则(简洁、一致性、对比度)，进行 Web 界面规划、 概要设计和设计要素的选择，利用一种界面设计工具(Axure/HTML5/Dreamweaver / Frontpage)完成网页设计...
《人机交互技术》结课作业：界面调研报告&交互界面设计快速原型设计（华科软院）
热门推荐
哆啦一泓的博客
03-31 2万+
作业内容概述 ● 一、界面调研报告：图文并茂，不少于15页（Word或PPT） ● 二、界面改造：用Auxre RP或GUI Design对热力学计算的界面实现三种风格的改造:对话框方式、菜单方式、Tab栏方式 ● 三、界面仿造：用Auxre RP或GUI Design仿造Word、 QQ或PC版/手机版网上银行 (待更，电脑坏了送修ing，2020.4.7前更新完毕！) ...
网页设计与制作第2版导论课件
09-21
和钱锋主编的第二版教材相一致。
基于用户体验的网页人机交互才符合网站建设目的
互联网传奇爱好者
01-04 1635
作为直接呈现给浏览者眼前的东西，设计和交互一直是网站建设中的两大重要元素。网站设计不用多言，直接关系到用户认知和企业形象的展示。前些年，由于带宽、计算等资源限制，网站上多半以静态展示为主，人机交互方面最多颜色变化，BANNER广告图片交换轮播而已。现在的云计算的普及应用以及带宽资源的不断增加，让灵动的人机交互已经不复存在障碍，所以，我们看到很多网站不仅设计的非常好，人机交互方面也非常巧妙得体。这非
深圳大学课程试卷 - Web开发及人机交互导论1
08-08
本资源摘要信息基于深圳大学课程试卷 - Web开发及人机交互导论1，旨在探讨Web开发及人机交互导论的知识点。 Web开发 * 网站开发概述：Web开发是一种基于Web技术的开发方式，旨在创建动态的Web应用程序。Web开发...
前端的UI设计与交互之文案篇
weixin_56071908的博客
11-07 187
在界面中，我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。 在使用和书写文案时有以下几点需要注意：从用户角度出发表述一致重要的信息放在显著位置专业、精准、完整精简、友好、正面一、语言1、明确表述立足点在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述...
Java毕业设计： 共享单车信息网站（java+springboot+vue+mysql+maven）
q_1039692211的博客
12-27 398
运行环境： 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架springboot+vue 项目介绍 共享单车作为一种可持续型公共交通工具有着明显的优势：无噪音、零排放、灵活易存取、与其他公共交通工具无缝衔接。这一系列的优点令其在解决城市交通拥堵，缓解环境污染，降低能源消耗，解决出行最后一公里等方面的能力得到人们的广泛认可。如何解决科学发展所带来的各种环境问题，是新形势下的一个重要课题。本文系选题的目的正是研究利用共享单车管理系统，绿色解决居民
2020-07-01：设计共享单车的扫码开锁流程？给出系统模块、功能、交互逻辑
福大大架构师每日一题
07-01 1万+
福哥答案2020-07-01： 此答案来自群成员，感谢群员支持。 评论
StoryBoard使用示例
10-08
示例列举了使用StoryBoard的详细情况，以及使用多个StoryBoard，StoryBoard与xib文件的混用
人机交互设计概述
weixin_42907150的博客
03-03 6789
人机交互设计的概述知识，适用于期末复习
人机交互-任务4：图形交互界面的设计(web)
霜
01-10 5474
文章目录题目二、 实验内容三、 方案设计 题目 目的 (1) 使用掌握的计算机语言完成图形界面的设计，熟悉图形用户界面设计的原则并运用到设计中。 (2) 通过用户友好界面的设计，使学生深刻体会到以用户为中心的界面设计的重要性，提高独立完成界面设计的能力，为今后诸多课程设计打下一定的基础。 步骤 (1) 图形界面的设计可使用学过的语言来实现，可选VC++、C#、Web开发技术等。学生自选题目开发。图形界面设计包括颜色的使用、图标的设计、按钮的设计、屏幕布局的设计、菜单界面的设计、填表输入界面的设计等。We
人机交互设计的最佳实践
最新发布
AI天才研究院
12-31 1469
1.背景介绍 人机交互(Human-Computer Interaction, HCI)是一门研究人与计算机系统之间交互的科学和技术。它涉及到人的心理、行为和设计，以及计算机科学、软件工程和电子工程等多个领域。人机交互的目标是为人类提供便利、高效、安全和满意的使用体验。 在过去的几十年里，人机交互研究取得了显著的进展，从笨拙的命令行界面到现代的图形用户界面(GUI)、触摸屏、语音识别、虚拟现实...
Web开发及人机交互导论 大作业
上山打老虎的博客
06-10 2570
Bike Sharing Web DevelopmentProject requirements：Project knowledge pointsPlanning, Analysis and Design Documentation1. Project Plan2. Audience Analysis3. Statement of Purpose and Market Analysis4. A Navigation Chart5. Visual Style (Storyboard / Mood board
Bike Sharing 案例
zxymvp的博客
03-05 3711
通过对华盛顿的部分自行车租赁情况数据进行分析，对测试集的自行车租赁数目进行预测。 导入数据 train = read.csv("train.csv") test = read.csv("test.csv") str(train) str(test) 分别对两组数据进行概览，可以发现数据集存在以下特征： $ datetime : 日期 $ season : 季节，1—...
不用写代码 让StoryBoard为你创建人机交互流程
人生是自己设计的一次快乐旅行
11-01 6889
ios5只有，苹果用storyboard取代了先前的nib，虽然出来很久了，一直也没用过，今天看了storyboard的一些资料，才发现其强大之处，不用写代码也能创建交互流程，这种特性能够让应用开发人员更专注于功能的实现和程序逻辑的编写，ui可通过storyboard完成整个界面的设计及流程跳转，很快即可搭建一个初步的演示demo。 废话不说，开始了。 1、先建一个Single View Ap
《人机交互技术》 第七章 Web界面设计
学习笔记
06-19 5516
第七章 Web界面设计 1.Web相关概念（第二版 P164）        Web是一个由许多相互链接的超文本（Hyper Text）文档组成的系统，用户通过Internet对其访问，进行交流与共享信息。资源通过超文本传输协议（HTTP）传送给用户。         超文本（Hypertext）:是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元...
Web开发及人机交互导论 实验六 表格
上山打老虎的博客
07-05 2082
实验六一、实验目的二、实验环境三、实验步骤项目一：制作成绩登记表项目二：制作产品宣传页面项目三：简化版“江苏教育电子政务网站”四、结果与分析五、心得体会 一、实验目的 掌握制作表格的各种标记及其属性语法。 掌握表格行标记的属性及设置方法。 掌握表格单元格的各种属性及设置方法。 学会利用表格进行Web页面布局设计,设计形式多样、风格各异的页面。 二、实验环境 Windows10系统下的H Builder X 三、实验步骤 项目一：制作成绩登记表 在本项目中，成绩表的功能主要是由表格进行完成，整个成绩表即
前端知识总结（6）：JS是如何实现人机交互的
qq_42317011的博客
02-17 1379
上一篇：前端知识总结（5）：head标签详解 ​ 由于一两篇文章很难将JS基础总结完，为了管理，再给个标题吧 JS基础总结（1）：JS是如何实现人机交互的 ​ 在html、css、js之间的联系 提到对html进行逻辑上的装饰，使人机交互变为可能 ，但是具体来说JS是以什么方式来实现的呢？ JS控制HTML ​ 往深来说js控制html，就是在控制DOM元素。额，DOM元素是啥？ --------...
面向对象编程基础与WEB应用开发导论
在【标题】"WEB开发应用导论"中，主要涉及的是网页开发的基础知识，特别是面向对象编程的概念。这门课程旨在教授初学者如何进行网页制作，利用HTML、CSS和JavaScript进行WEB应用开发。 【描述】指出，课程内容非常...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alex_SCY

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值