基于HTML5的移动化妆品销售系统前端设计与实现

摘要

智能移动设备飞速发展的今天,基于移动平台开发的移动应用受到更多用户的青睐。移动应用可以给个人带来更灵活多样的沟通方式(微博、微信、社交等),更丰富精彩的内容消费(娱乐、资讯、天气、点评等),也可以帮助企业建立高效的管理方式,降低运营生产成本,提高核心竞争力。
　　论文分析了移动应用的发展现状及移动应用给个人和企业带来的收益。对企业而言,他们正逐步认识到移动应用在生产环境中所扮演的重要角色。而传统的非IT企业由于缺乏专门的开发资源,在面对诸多平台设备时往往有心无力,因此帮助企业建立低成本、易维护、跨平台的移动应用方案显得非常重要。论文以实际项目为例,分析化妆品企业销售业务需求和移动平台的用户体验特点,设计一款满足其业务需求同时易于维护的跨平台移动应用原型,把传统的销售模式迁移到了移动平台上。
　　移动应用原型的设计分为界面设计与前端程序设计。界面设计是保证最终成品面向用户时具有良好的操作体验。作者查阅了安卓与iOS移动界面设计指导作为交互设计的依据,同时结合企业自身的视觉形象与产品特点在视觉外观上做了定制化设计。另方面在前端程序设计上,作者使用了目前流行的HTML5(Hypertext Markup Language 5.0)与CSS3(Cascading Style sheet 3.0)作为实现应用前端的主要技术。在前端开发领域,HTML5日渐成为趋势。HTML5正被谷歌,苹果等越来越多的IT主流公司产品所支持,所以具有一定的成熟度。从开发角度来看,HTML5最大的优势在于跨平台性和易于维护性,可以满足非IT企业的诉求。从用户体验角度来看,CSS3可以支持更多的页面特效与动画属性来模拟本机应用才具有的界面效果。使用HTML5开发前端会遇到移动应用独有的问题,比如响应多屏幕尺寸、手势识别、离线访问、本地存储、数据交互等等。作者通过查阅大量技术资料,结合实践设计了一套底层方法来解决开发时将会遇到的这些问题。
　　论文研究与应用设计开发耗费一年,最终完成移动应用的原型设计与前端开发测试工作。作者完成了整个应用的界面设计,实现了该应用前端底层开发,包括手势捕捉、多屏幕响应、与服务器端通讯,离线访问,本地存储。该底层方法可适用于所有使用HTML5开发的移动应用。基于该底层方法,作者完成针对化妆品销售应用的前端界面开发,主要包括产品模块、查询模块、订单模块、视频、消息模块、登录模块,同时完成前端测试与可用性测试。
　　本课题部分研究成果已使用在公司部分移动应用项目的前端实施过程中。随着未来HTML5的普及与增强,基于HTML5开发的移动应用凭借其独有的响应式、跨平台优势将会在企业web应用中发挥更大作用。

目录

封面

声明

中文摘要

英文摘要

目录

1 绪 论

1.1移动设备及应用的发展历史

1.2移动应用发展现状和展望

1.3课题研究的背景和意义

1.4课题研究的主要工作与创新意义

1.5论文结构

2化妆品移动应用需求分析

2.1产品需求分析

2.2系统需求分析

2.3小结

3移动应用上的用户体验设计

3.1移动设备上的用户体验设计原则

3.2小结

4化妆品移动应用界面与程序设计

4.1原型设计流程概述

4.2基于HTML5的移动应用原型设计

4.3移动应用程序设计

4.4小结

5化妆品移动应用开发实现

5.1移动应用前端开发技术

5.2移动应用运行环境与开发环境

5.3移动应用前端开发技术准备

5.4移动应用前端开发

5.5服务器后端数据接口开发

5.6小结

6化妆品移动应用测试

6.1概述

6.2测试环境

6.3测试方法

6.4测试结果分析

6.5小结

7总结与展望

参考文献

附 录

致谢

攻读学位期间发表的学术论文目录