摘要： “智慧公厕平台”是利用移动互联网模式，控制公共场所内已投放安装的智能换坐垫马桶盖，为用户提供自助使用卫生服务的一个物联网用户前端软件系统。经过细致的用户需求调研、相关用户系统的数据分析，确定了系统的可行性架构。框架包括三大服务功能模块：移动客户端借助二维码扫描生成订单，完成智能马桶盖硬件的自动更换一次性马桶坐垫的服务；基于GPS定位下电子地图实现公用卫生间位置导航；公用卫生间使用忙闲状况的移动客户端反馈引导。整个用户系统前端借助Sketch、Photoshop、Flinto、微信小程序开发工具等软件，实现基于iOS和Android主流移动端系统的图标、UI界面、高保真交互原型和微信小程序前端等设计。满足不同场景下的用户使用需求，以及项目各阶段的实际开发需求。

关键词： 交互；界面；小程序；物联网；智慧公厕

The front-end design of the "smart public toilet platform" user system

Abstract: "Smart Public Toilet Platform" is an Internet of Things (IoT) user front-end software system that utilizes the mobile Internet model to control smart toilet seats that have been installed in public places and provide users with self-service health services. After careful investigation of user requirements and data analysis of related user systems, the feasibility framework of the system was determined. The framework includes three service function modules: the mobile client generates orders through the QR code scanning, completes the automatic replacement of the toilet seat cover hardware with the hardware of the intelligent toilet seat; the electronic map based on the GPS positioning realizes the navigation of the public toilet; check usage of public toilets via mobile phone. The front end of the entire user system uses icons such as Sketch, Photoshop, Flinto, and WeChat applet development tools to implement icons based on iOS and Android mainstream mobile systems, UI interfaces, high-fidelity interactive prototypes, and WeChat applet front-end designs. Satisfy the user needs in different scenarios, as well as the actual development needs of the various stages of the project.

Keywords: Interaction; interface; small program; Internet of things; smart public toilets.

目录

摘要 i

Abstract i

目录 iii

1 绪论 1

1.1 研究背景 1

1.1.1 痛点需求分析 1

1.1.2 卫生设备市场 2

1.2 研究现状 3

1.2.1 环境现状 3

1.2.2 发展趋势 5

1.3 研究内容 5

1.3.1 技术背景介绍 5

1.3.2 研发关键任务 6

1.3.3 前端设计方案 6

1.4 研究方法 7

2 UI设计理念与定位 8

2.1 功能定位 8

2.2 受众群定位 9

2.3 运营定位 9

2.3.1 产品策略 10

2.3.2 定价策略 10

2.3.3 渠道策略 11

2.4 设计理念 11

2.4.1 便捷性 11

2.4.2 环保无菌 11

2.4.3 公益性 11

2.5 设计定位 12

2.5.1 图形风格定位 12

2.5.2 色彩风格定位 12

2.5.3 文字字体定位 13

3 产品原型结构设计 14

3.1 产品结构 14

3.2 登录注册页面架构 14

3.3 功能页面架构 15

3.4 客服消息页面架构 16

3.5 个人页面架构 17

4 具体UI设计 18

4.1.1 LOGO标准制图 18

4.1.2 iOS图标标准制图 18

4.1.3 品牌理念和LOGO释义 20

4.2 软件引导界面设计 20

4.3 软件启动登录界面设计 21

4.4 一级主界面设计 22

4.5 钱包界面设计 22

4.6 扫码界面设计 23

4.7 其他三级界面设计 24

5 交互设计 25

5.1 页面切换交互 25

5.2 控件交互 26

5.3 载入动画交互 27

6 微信小程序前端 29

6.1.1 地图首页 29

6.1.2 维修报故障页 32

6.1.3 登录页面 33

6.1.4 钱包页面 33

6.1.5 充值页面 34

7 智慧公厕平台总结与展望 35