用户登录  |  用户注册
首 页毕业论文毕业设计下载定做交易过程截图支付宝在线支付
当前位置:完美毕业网毕业设计下载计算机毕业设计iOS毕业设计

带数据动画的社交类Web App的设计与制作

联系方式:点击这里给我发消息QQ212181988
官方主页:www.biye114.com
图片预览: ;论坛转帖
插件情况:
售后服务:请联系客服QQ:212181988
一键分享拿折扣:
  • 好的评价 如果您觉得此软件好,就请您
      0%(0)
  • 差的评价 如果您觉得此软件差,就请您
      0%(0)

软件简介

 摘 要
交互设计是一种目标导向设计,所有的工作内容都是在围绕着用户行为去设计的。交互设计通过设计用户的行为,让用户更方便更有效率的去完成目标,获得愉快的用户体验。
本课题以实现前端交互设计为目标,将数据动画带入交互设计中,交互性体现在点击屏幕时能得到反馈,发送的消息能够实时显示在虚拟角色上面,并被所有用户所看到。
为了达到点击反馈的效果,本课题设计了一套点击屏幕动画自动追踪算法,以完成虚拟角色点击移动到目标位置。用户界面的设计全部由p5.js编写,html标签也均由JavaScript生成。其中主要分为三部分:用户视窗、发消息按钮、输入框。发消息按钮是可以拖动的以免遮挡用户视线。
登录和注册页面采用了Bootstrap框架,对多尺寸设备可以进行适配和兼容。功能上,其使用了jQuery进行了简单的前端表单验证,Ajax投递表单数据,注册登录模块切换等。
储存用户的数据的数据库采用了mongodb,后台语言为nodejs。利用了socket.io的集成框架对前端进行了Websocket全双工通信。
APP的封装使用Xcode,主要有一个WebView构成。打开APP之后直接指向课题的应用入口,用户可以进行登录注册和交互。

关键词:Web App,交互,自动追踪算法,p5.js,Websocket,Xcode
目 录
引 言 1
1 绪论 2
1.1课题研究背景 2
1.2 课题现状 2
1.2.1 国外Web App发展现状 2
1.2.2 国内Web App发展现状 2
1.3 传统社交类Web App存在的问题 3
1.4 本课题的创新 4
2 课题开发工具和关键技术 5
2.1 开发工具简介 5
2.1.1 Sublime Text 2 5
2.1.2 Mongodb 5
2.1.3 Robomongo 6
2.1.4 Xcode 6
2.2 关键技术说明 7
2.2.1 p5.js 7
2.2.2 Node.js 7
2.2.3 Bootstrap 8
2.2.4 jQuery 9
3课题的设计与分析 10
3.1 课题项目的构建 10
3.2 Web App的Web前端部分制作 11
3.2.1 登录页面 11
3.2.2 创建用户界面 15
3.2.3 点击屏幕动画自动追踪算法 18
3.2.4 投递Ajax数据 20
3.2.5 Websocket通信 20
3.3 Web App的Web后端部分制作 20
3.3.1 开启服务端监听 20
3.3.2 接收前端Ajax数据 21
3.3.3 数据库查询 21
3.3.4 监听Websocket通信 21
3.4 Web App的封装 21
4 总结和评测 27
5 本课题前景展望 28
结 论 29
参 考 文 献 30
致 谢 31
微信、qq作为一个社交APP已经被大众所熟悉和熟知。其功能明确,用于用户收发文字、语音、图片消息。
类似这样的社交类Web App是用户直接所接触到的部分,其前端设计要求能充分了解用户获取信息的潜在需求
本课题从轻量化的Web App着手。用于实现一个带数据动画的社交功能,以完成一次对APP的深入了解,对社交功能的创新试验。数据动画所见所得,是在社交实现的过程中一个有趣的手段,能够看到用户的虚拟位置,也能够实时观察到用户的移动状态。
课题在制作过程中比较顺利,最后的结果如图4-1所示。

图4-1 测试示意图
点击屏幕,圆点角色可以在箭头所示任何方向移动,发消息按钮也能够拖拽。点击发消息按钮,会展开输入窗口,点击发送按钮后,会将输入的内容发送至角色头顶上方,被所有用户看到。左上角显示了角色的当前坐标位置,右上角实时显示了在线人数。
制作前端时,Bootstrap对整个登录和注册页面的布局起了很大的作用。在制作一个项目时,不仅需要善于设计项目逻辑,写代码,还需要能学会使用优秀的工具。
后端nodejs的工具库比较多,express框架基本使得nodejs的编写工作变得容易许多。需要注意的是在前端投递Ajax数据,需要页面跳转时,后端不可直接进行render渲染出页面,原因在于前端给出的信息必须由前端去处理,所以过程必须为返回给前端返回值,再由前端跳转url。
而项目的大致逻辑实现之后,细节部分的问题往往是比较多的,这需要长期的积累和经验。所以从用户层面来看,课题的复杂工作却似乎实现了一个简单的功能,这是制作过程中所没有考虑到的。课题需要完善的功能还有许多,想要打造成一个优秀的社交应用还有多模块需要去制作和构思,这就要求作者本身技术的跟进和坚持不懈努力。
5 本课题前景展望
当下APP发展趋势已经非常迅猛,社交类APP也层出不穷。本课题致力于制作一个“可视化”的社交APP。目前能够实现用户交互移动,在某一用户在地图中移动时,其它在线用户也能够看到其移动。这种行为就构成了虚拟社区的第一步——人群。在随后的探索道路中,可以扩大地图,增加建筑、树木、道路等等。用户便不仅仅局限在“交流”这一层面,可以打造一切现实生活能做的事,让用户有一种身临其境,完全进入另一个世界的感觉。但是由于本课题并不涉及具体的位置信息,所以在用户交互的同时,也保护了用户的隐私。

下载地址

点击此处→注册会员上传设计赚钱
以上是大纲和介绍,如需要完整的资料请在线购买.

软件评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论

下载说明

* 本站所有资料均已审核通过,内容原创保密,标准格式,质量保证
* 无需注册,点击在线购买后即可获取该套毕业设计(论文)完整
* 支付后请联系在线客服QQ:212181988发送资料
  • 官方微信