随着校园内图书交易需求的不断增加，为方便同学之间图书的流通，特委托我方项目组开发《智慧图书交易网站》软件系统，针对学生群体这一特定人群搭建基于大数据的智慧图书推荐系统，此款软件主要为北京交通大学全校学生提供图书交易服务，智慧图书交易网站为用户提供购书的基本功能，通过人工智能和大数据分析为用户进行相关书籍的推荐，同时为用户提供图书排行榜、图书词云等推荐，便于用户找到自己想要的图书。同时网站为卖家提供云店铺服务，卖家可以通过该平台进行图书的上架和店铺的管理，提高了校园信息化水平，提供了更加方便、快捷、高效的服务。 前端：html+js+css VUE框架 后端：python flask框架 数据库：MySQL云数据库+Navicat数据库管理 大数据分析：hadoop（用户聚类） 智慧图书交易平台的实现采取flask+vue框架。使用flask实现业务对象管理，pymysql作为数据对象的持久化引擎。其中，服务器使用flask架构，负责网页前端与数据库之间的数据传输；数据库采用Mysql数据库，用于存储用户基本信息数据以及图书信息、订单等数据；网页前端使用Vue等框架进行渲染和显示。 3.3 功能模块设计及实现 3.3.1 用户功能模块 3.3.1.1 个人信息模块 3.3.1.1.1 用户登录注册 在注册阶段，用户填写注册的用户名和密码，向后端发送post请求，后端将注册信息存入数据库，并将注册新用户的角色设置为普通用户，再返回给用户注册是否成功的提示。用户名已被注册，则返回错误信息给用户等待用户重新提交。 用户在登录界面需输入注册的用户名和密码并提交。页面通过post方法发送请求，调用方法将输入信息与数据库中已注册用户进行对比验证，若存在该用户，则返回登录成功信息，跳转至平台主界面，若不存在该用户，则提示登录失败，可进行新用户注册。 前端对于用户是否登录的判断：用户登录后将vuex仓库中的全局变量isLogin修改为true，并将user_id存入仓库全局变量user_id中 3.3.1.1.2 用户信息修改 已登录用户进入个人中心的账户信息，前端向后端发起post请求，服务器根据user_id在user_info表中查询用户的详细信息并返回到前端，在前端显示。用户修改信息后点击修改信息按钮向后端发送post请求，后端get前端发来新的信息，将user_info表中的信息更新。 3.3.1.1.3 用户修改密码 用户点击修改密码按钮，输入原密码和新密码，并向后端发起post请求，后端从根据user_id比对password是否与输入的原密码相同，若相同，则更新user_info表的password字段，改为新密码；若不同，向前端返回错误信息。 3.3.1.2 购书模块 3.3.1.2.1 根据分类查看图书 用户点击首页分类列表某一分类，向后端发起post请求，将分类的id传给后端，后端获取cate_id，在user_info表中根据cate_id查询此分类下所有图书的信息列表返回给前端，前端循环显示图书信息列表。 3.3.1.2.2 查看图书详情 用户在首页、分类详情、推荐榜处点击书名进入图书详情页，前端向后端发送post请求，后端获取前端发送的图书id，根据图书id在book_info表中查询图书详情，返回到前端，前端接收后在图书详情页显示。 3.3.1.2.3 为图书添加评论 用户在图书详情页切换至评论区域，输入评论内容并提交，向后端发送post请求，后端接收请求将评论内容，user_id,时间等信息存入数据库，并返回成功信息给前端。 3.3.1.2.4 加入购物车 在分类详情和图书详情页面，点击添加到购物车按钮，前端向后端发送post请求，将需要加入购物车的书籍信息发送到后端，后端将user_id和book_id存入cart表中，并向前端返回成功信息。 3.3.1.2.5 购物车列表获取、修改 用户进入购物车页面，后端根据user_id从cart表中获取购物车内物品详情并在购物车页面显示。用户可点击增减数量按钮改变购物车中商品的值或者点击删除按钮将书本从购物车中删除。前端向后端发送post请求，后端接收请求后修改cart表中的对应记录，并向前端返回成功信息。 3.3.1.2.6 生成订单 用户在购物车页面点击结算按钮，向后端发送post请求，后端将前端选中的商品从cart表中删除，并在orders表和order_detail表中插入新订单以及订单中包含的商品信息，添加成功后向前端返回成功信息。 3.3.1.2.7 提交订单 订单创建成功后跳转到订单详情页面，用户在订单详情页面填写收货人的信息并选择使用的快递，点击提交按钮，前端通过post请求将邮寄信息发送到后端，后端接收后将邮寄信息存入order_shipping表，并向前端发送成功信息，前端跳转到支付中心。 3.3.1.2.8 支付订单（支付宝API） 支付中心点击跳转到支付宝支付，调用Alipay接口，将订单号，订单信息和金额发送至alipay接口，alipay返回订单状态，若支付成功，则将数据库中订单状态改为待评价。支付页面实时获取数据库中订单的状态，若订单状态改为待评价，则前端跳转到支付完成页面。 3.3.1.2.9 查看订单 用户进入个人主页可查看自己的所有订单，点击查看详情可进入订单详情页面查看订单详情，包括邮寄信息、商品信息等。前端向后端发送查看订单请求，后端从数据库中根据userid查找出所有订单的信息，并将订单信息列表返回给前端，前端接收后在页面表格中显示。 3.3.1.2.10 评分 用户查看订单，若订单状态为待评价，则点击评价按钮可为订单中的书籍进行评分，滑动星星列表，前端产生0-10的评分，并将评分信息传给后端。后端接收评分信息后将评分信息存入数据库bx_book_ratings表中。 3.3.1.3 店铺功能模块 3.3.1.3.1 修改店铺信息 云店铺管理员登陆自己的账号后，可以在个人中心修改店铺信息，比如店铺名，联系*等。修改完成后点击确定按钮，即可保存。 3.3.1.3.2 图书上架 云店铺管理员在登陆自己账号后，可以在个人中心选择发布图书，即上架图书，发布时需注明图书名称、作者、图书图片等信息，然后点击发布即可上架图书。 3.3.1.3.3 图书编辑、下架 云店铺管理员在登录自己账号后，可以在个人中心查看本店铺上架的图书，店铺图书分为正在售卖和已下架两种情况，云店铺管理员可以在该界面选择编辑图书和下架图书，编辑图书可以修改该图书商品的名称、价格等。 3.3.1.3.4 店铺订单处理 云店铺管理员在登陆自己账号后，可以在个人中心处理店铺订单，店铺订单内可查看订单状态，若为待付款，则不可查看订单，若为未发货，则编辑物流单号后给用户发货，发货完成后店铺订单处理完成，等待用户评价 3.3.1.4 信息管理功能模块 3.3.1.4.1 用户信息管理 被分配了用户管理权限的角色才可以对用户信息进行管理，用户信息管理主要分为查看用户、编辑用户、添加用户、删除用户四块，查看用户将通过列表的形式查看，超级管理员可根据列表对用户进行一系列操作；违规用户或注销用户可通过删除按钮删除用户。 3.3.1.4.2 店铺信息管理 超级管理员以及被分配了店铺信息管理权限的角色可以对店铺信息进行处理，店铺信息管理主要分为查看店铺列表，编辑店铺，添加店铺，删除店铺四项功能。 该角色可以对店铺进行相关的增删改查操作 3.3.1.4.3 角色信息管理 只有被分配了可以进行角色管理的角色才能对此进行操作，该类角色可以未用户分配角色，删除角色等。 3.3.1.4.4 权限配置及前端鉴权 角色创建或角色编辑时可为角色分配权限，权限等级分配如下： 角色与权限的分配存入role_privilege表中，一级权限为目录权限，二级权限为页面权限，三级权限细化到按钮。用户登录时根据用户角色将权限对应的序号数组传到前端，前端加载页面时，根据一级权限加载不同的个人中心目录，根据二级权限限制查看不同的页面，根据三级权限配置不同按钮的disable属性。 3.3.2 数据处理模块* 3.3.2.1 样本数据处理 数据库中的数据由样本数据和爬虫数据两部分组成，爬虫数据由于是自主爬取，数据内容较为完整。最终在存入数据库前，针对爬虫数据缺失的图书id和店铺id等信息以及样本数据缺失的店铺id等信息进行了批量填补，完成了数据的整合，使其每一项内容能够对应数据库中的有效字段。 3.3.2.2 图书推荐（用户聚类+个性化推荐） 1.整体用户聚类数据： （1）图书的类别共有9个父类，因此设置每本书的信息向量为一个9位的数组向量，除了对应该图书类别的位置为1，其余位置都为0。 向量表示为， （2）用户对某本书做出评价时，该用户在该项类别上的得分增加，在遍历该用户所有的评价信息后，将该用户向量的每一项除以该用户的总评价量，得到该用户的平均得分向量。 用户平均得分向量的计算公式为， （3）通过每个用户对每本书的评价信息，得出每个用户的用户向量。使用kmeans算法将用户向量进行聚类，得出相似用户组，以及每个相似用户组的质心向量。 （4）根据该质心向量上每一项的值，得出该质心向量最偏向于的三类书 （5）在这三类书的每一类中根据用户对该类别书的评分取出评分最高的十本，作为该类别用户的推荐图书 2.单个用户分析数据： （1）当用户在页面上点击某本书进入图书详情页进行浏览时，则认为用户对该书所属的类别感兴趣，则从该类别中选出评分较高的图书 （2）记录用户最近的五次点击进入详情页的数据，将这五本书的类别向量按就近时间递减进行加权拟合，最终得到根据用户浏览数据生成的用户向量 （3）根据该向量所显示的得分前三的图书类别，从图书库中根据图书的评分选取对应类别的高分图书。得分第一的选择三本，得分第二的选择两本，得分第三的选择一本，以此类推，最终得到六本图书 （4）使用这六本图书替换原十本推荐图书中的后六本，并使其排序在原分类图书的前面，优先给用户显示 3.3.2.3 图书畅销榜 通过图书的订单信息提取出购买量前二十的图书id，再根据图书id从图书信息库中提取出图书的名称，将图书的排名、id、名称等信息存入图书畅销榜的数据表中，方便在前端调用显示。 3.3.2.4 词云生成 获取图书畅销榜的数据表中的排名和图书名称信息，将排名作为词频，使用python的wordcloud库绘制词云图片，并将图片转为base64形式存入数据库 3.3.2.5 获取购书转化率、平均访问时长、用户转化率等（基于点击流数据） 通过对日志流数据的清洗和去重，得到了不同ip的用户在网站上进行的点击操作的点击流数据，根据对点击流数据的分析，我们计算了购书转化率、平均访问时长、用户转化率等数据，并根据这些数据生成了相应的统计图，显示在前端。 1. 购书转化率： 首先计算出用户从点击加入购物车到最终点击支付的完整流程中所有的点击数，记为最小点击数。将每次用户从点击加入购物车到最终点击支付的点击数进行统计，将最小点击数除以统计数据，即算出用户的购书转化率。 在此基础上每天夜里24点时计算一次，即为当天的总购书转化率。每日中每小时的整时刻时计算一次，即为每小时的购书转化率。 2. 平均访问时长： 计算出某IP的用户在同一时段内从第一次点击到最后一次点击之间的时间差，即为该用户的访问时长，将所有用户的访问时长相加，并求平均值，即为用户的平均访问时长 3. 用户转化率： 计算某个IP用户第一次点击网页后是否执行了登录操作，将该天内所有打开网页的用户中执行登录操作的用户与访问网页的用户总数做比值，得出用户的转化率 在智慧图书网站里进行图书推荐，可以提高整个网站图书销售的有效转化率，增加图书销量。通过用户已经浏览、收藏、购买的记录，更精准的理解用户需求，对用户进行聚类、打标签，推荐用户感兴趣的图书，帮助用户快速找到需要的图书。图书推荐为常规推荐，商家选择一些固定图书放在推荐位，或者基于图书之间的关联性，进行相关的书籍推荐。常规推荐的图书不会因为用户不同产生差异，主要是运营配置的活动或固定图书（图书精选）。除了在固定推荐位选定某些图书进行配置，例如选取10本固定图书放在签到页进行推荐。还有一些固定规则的动态配置图书，例如图中图书销量排行榜、图书收藏排行榜、某类图书的销量排行榜（例如图书会有许多排行榜），这类根据浏览、收藏、销售数据做的图书统计在常规推荐时会经常用到，对用户的消费决策影响也比较大。 用户进入搜索页面时，输入框下方会显示“热搜推荐”与“历史浏览记录”两个分区，分别显示预置高点击关键词与用户的历史搜索信息。 接下来用户可以在输入框中键入搜索关键词，并请求搜索，系统对用户的搜索行为进行分析，猜想用户最想搜索的是什么最后将最符合用户需要的结果展现在用户面前。系统将快速响应用户的搜索需求，根据该字或词，推荐与该字或词相关联的关键词，当输入拼音时，将其转换成相应的汉字词组去图书库检索相关的图书信息，同时，当输入错别字时，系统自动纠正错后将正确关键词的搜索结果提示，并将结果展示给用户。 在用户进行搜索功能时，系统也将保存搜索记录，将其加历史搜索记录。 用户个人信息的变更，是会员制线上应用必不可少的功能。用户要在这里实现包括昵称、头像、介绍以及偏好设置等内容的个人信息变更，以更加完善画像。我产品基于用户需求，在个人信息中设置用户昵称、用户头像、用户签名、联系方式、收件地址几项可由用户自主变更的个人信息。其中，前三项作为用户的个性化信息，后两项作为进行平台活动的必要的功能性信息。 在用户成功登录平台后，可以通过点击个人中心跳转至个人信息模块。界面由上而下分别排列个性化用户信息（用户头像、用户昵称与用户签名）、收件信息（联系方式、收件地址）、我的收藏、客服中心、意见反馈及设置等。其中，可以由用户进行自主修改的信息部分为个性化用户信息与收件信息。通过点击相应模块进入编辑页面，完成修改后点击保存按钮，后台将记录用户的修改行为并改动数据库，用修改后的新信息替代原有的旧信息，并将其反馈给用户，完成了一次用户个人信息的修改。

Web前端游戏开发 2. 游戏流程与框架结构 2.1 游戏总体流程 2.2 作业基本功能  登录  注册  继续上次游戏  开始新游戏  猴子轮流报数，报到指定编号的猴子淘汰  猴子报数时发出声音  游戏过程中添加猴子，移除猴子 2.3 附加功能（如果有的话）  小猴跟随鼠标皇冠移动  给小猴改名  暂停、重启背景音乐  键盘控制小猴登山 3. 游戏设计与开发（界面及实现） 3.1 使用到的技术列表及其用途 （一）HTML5技术 使用的标签： 1) 标题/文本标签：用于文本的显示 2) 链接标签：用于文字超链接跳转 3) 图像标签：用于图片的显示 4) 列表标签：用于首页的气泡动画展示 5) 容器标签：用于分区和元素的添加，作为容器 6) 表单：用于登陆注册的表单 7) 音频：用于控制背景音乐的开始和暂停以及猴子报数声音的发出 8) 画板：用于制作键盘控制猴子登山页面的动画 （二）CSS3技术 使用的属性： 1) Background：用于定义元素的背景颜色或背景图片 2) Font：定义文字的字体、大小和阴影 3) Link：设置跳转的链接 4) ul：设置列表元素的颜色形状等 5) margin/border/padding/content：调整元素的布局 6) display、visibility：控制元素的显示和隐藏 7) position：使用了relative/adsolute/fixed给元素定位 8) float：设置元素的浮动 9) 伪类：控制链接跳转前后的不同样式，按钮点击后的效果 10) 边框/圆角：登录注册以及按钮的样式设置 11) 动画：登陆注册界面的气泡上升动画，开始页面的猴子晃动动画，以及猴子报数时气泡出现的动画和登上山顶的动画 12) 旋转移动：猴子围圈 （三）JS技术 1) Window.location.href 页面跳转及带参跳转 2) Ajax xmlHttp和后端服务器连接，使用request请求发送数据到后端并请求后端数据 3) JQuery：音乐的播放和暂停 4) Canvas：键盘控制小猴登山 5) Js控制html：控制音乐的播放和暂停 6) Js事件：鼠标进入、鼠标移出、点击、双击、拖放、键盘监听 7) Js子节点：动态添加修改移除html对象 8) Js控制css：动态修改css类 9) 计时器：设置定时循环执行和延时执行，用于控制动画效果 （四）后端服务器设计 1）后端服务器使用python的flask框架，连接本地mysql数据库，进行数据的存储和读取 数据库设计 monkey表：保存用户的信息，以及用户退出前保存的游戏数据 monkey_info表：保存用户的猴子信息，包括猴子编号，名称和是否被淘汰的信息 3）前后端接口设计  /login 登录 输入：用户名，密码 返回值：登录是否成功的信息  /register 注册 输入：用户名，密码 返回值：注册是否成功及错误信息（用户名已存在等）  /set_monkey 设置游戏初始值 输入：用户名，猴子数量，淘汰编号 返回值：初始化是否成功  /save 保存游戏数据 输入：用户名，猴子数量，淘汰编号，当前留在场上的猴子数，当前留在场上的猴子序列，当前报到的猴子编号，当前报到的猴子数，猴子信息列表 返回值：保存是否成功  /load 加载上一次游戏信息 输入：用户名 返回值：用户名，猴子数量，淘汰编号，当前留在场上的猴子数，当前留在场上的猴子序列，当前报到的猴子编号，当前报到的猴子数，猴子信息列表  /reset 重新开始新游戏，将当前用户的，猴子数量和淘汰编号都设为-1 输入：用户名 返回值：重置是否成功 3.2 登录界面（界面截图，核心技术，主要代码） 界面截图： 核心技术：表单，css动画，ajax访问后端，超链接跳转 主要代码： （1）表单： （2）css为不同type的input标签设置设置外观： （3）css设置背景图片的显示模式： （4）css为标签设置动画效果： （5）css为标签内的指定子节点设置显示效果： （6）ajax访问后端： （7）超链接跳转页面： 3.3 注册界面（界面截图，核心技术，主要代码） 界面截图： 核心技术：表单，css动画，ajax访问后端，超链接跳转 核心代码： （1）判断用户是否存在： （2）判断两次输入密码是否相同： 3.4 游戏开始界面（界面截图，核心技术，主要代码） 界面截图： （1）选择是否继续游戏或开始新游戏页面 （2）选择新游戏后输入猴子的总数和报数的最大数字 核心技术：表单，css动画，ajax访问后端，超链接跳转 主要代码： （1）页面间传参： 3.5 游戏界面（界面截图，核心技术，主要代码） 界面截图： 核心技术：css动画，css旋转位移，ajax访问后端，超链接跳转，计时器，json，js事件，js对象，随机数，子标签子节点，媒体音乐，jQuery，js动态设置html和css 主要代码： （1） 解析json数据： （2） 为每只猴子创建js对象： （3） 使用随机数随机生成猴子名字： （4） js动态创建子标签并设置属性 （5） css使图片旋转实现猴子围圈 （6） js设置计时器实现自动报数 （7） js动态增删子节点 （8） 报数主体流程 说明：首先判断场上是否只剩下一只猴子，如果是就停止报数，游戏结束，留下的猴子是大王。如果剩余猴子多于一只则继续游戏。While循环跳过已淘汰的猴子，循环中猴子的顺序号curMon增加，报数的顺序号curNum不变。直到curMon增加至一只未淘汰的猴子时跳出循环，该猴子报数完毕后，curMon和curNum各加一，等待下一次报数函数在计时器中的调用。 （9） jQuery设置css （10） html媒体标签 （11） js延时执行方法 3.6 游戏暂停界面（界面截图，核心技术，主要代码） 界面截图： 核心技术：ajax访问后端，超链接跳转， json， js对象，随机数，js鼠标事件，js点击事件，js拖拽事件 主要代码： （1） js拖拽事件-拖拽添加猴子，拖拽删除猴子 （2） js鼠标事件-鼠标经过显示待选特效 （3） js点击事件-鼠标点击切换淘汰和未淘汰状态 （4） 父节点子节点-动态修改css和内容 （5） js双击事件-双击后显示猴子改名输入框 3.8获胜猴子戴上王冠（界面截图，核心技术，主要代码） 界面截图： 核心技术：元素定位，获取鼠标位置，计时器，动态改变css 主要代码： （1） 获取某个html元素的定位 （2） 获取滚动条距离顶端的距离 （3） 获取鼠标位置 （4） 在鼠标位置绘制王冠图片 （5） 猴子跟随鼠标移动实现 说明：首先判断鼠标是否已将王冠给猴子戴上。如果没有，再判断鼠标在x轴的位置是否与猴子重合，如果重合，函数不执行，猴子停止移动。如果未重合，判断鼠标在猴子的哪一边，贴对应方向的猴子图片，并将猴子位置向该方向移动一定距离。在计时器中自动重复执行该函数，使猴子逐渐向鼠标位置移动。 3.7获胜猴子登山界面（界面截图，核心技术，主要代码） 界面截图： 核心技术：canvas画布，键盘监听事件，计时器 主要代码： （1） 在画布上绘制图片和文字 （2） 计时器控制画布绘制-实现动画效果 （3） 键盘监听获取左右按键信息 （4） 猴子登山实现 说明：键盘右键点击就将猴子下一步的位置x轴上的值增加，否则就减少，然后先绘制背景的山再绘制猴子，实现猴子再画布上被键盘控制左右移动。判定猴子的位置已经位于山脚下后，每次猴子的x值不变，y值减少，使猴子的位置升高，同时背景的山的图片位置向左移动，实现猴子爬山的动画效果。判定猴子到达山顶位置的高度后，使用计时器，循环增大猴子的大小，当猴子足够大时，使用另一个计时器在画布上绘制王冠的图，并循环增大王冠的y值，使王冠下落，直至戴在猴子头上。

项目主题： 让用户自己扫描杂物的尺寸和柜子的尺寸，然后智能安排物品存放的位置，用户按照我们的提示收纳物品，最后形成一个虚拟收纳柜。（2021.11.23：初期设想） 我们询问的用户认为这样多此一举。首先在图书馆情景里，用户即使完全按照虚拟书柜的安排摆放图书，最后生成的虚拟书架与真实书架完全对应，在真正找书时，用户还是要根据虚拟书架指示的大致位置，和原本的编号、书名，进行查找，顶多能确定在哪一个个书架的哪一层，大致在一排书的左边还是右边。而要达到这样的效果，却需要图书管理员一本一本的把书录入进我们的系统，着实费力不讨好。 另一个我们询问的用户主要说了在居住情景中的问题。她认为用户收纳时还要扫描录入物品的尺寸和收纳柜的尺寸，也是多此一举。物品能否放入收纳柜，放在哪里，这两件事对人来说都很容易判断，因此没必要借助软件。 针对这两条意见，我们决定首先缩小用户范围，将我们的APP做成一个专门针对普通用户收拾整理房间的收纳记录APP。用户不必扫描任何东西，只需要在收纳过后将放入柜子的物品名称加入进APP中对应建立的虚拟柜子中，也可为每个物品添加一些详细信息，如介绍、说明、食物和用品的保质期等等，还可将其添加一些分类标签，以便分类查看。（2021.11.25：用户调查结果） 功能概述： 用户扫描柜子位置和大小，并扫描待收纳物品的大小，app将根据尺寸生成物品的收纳位置，然后用户根据app的提示将物品放入对应的位置，使真实柜子与app中生成的虚拟柜子同步，方便下次收纳和查询。（2021.11.23：初期设想） 每个虚拟柜子也可以自己设计外形皮肤，添加说明和标签，包括所对应的实际柜子的位置大小颜色等。还会记录柜子上次收纳新物品的更新时间。 最后将形成多个对应现实柜子的虚拟柜子，展示在APP中，每个虚拟柜子都可展开查看内部物品，也可以在搜索框通过名称、描述、标签等搜索物品，确定物品是否在柜子中，在哪个柜子中。 解决了用户在长时间未使用某物品后忘记自己是否拥有某物品，打算重新购买，或忘记某物品位置的问题。通过虚拟柜子可以快速定位物品的位置，节省寻找物品的时间。（2021.11.25：用户调查后加入） 功能详述： （2021.11.30：整理思路后加入） 1. 在首页创建新柜子 2. 给创建的柜子命名和更换背景 3. 通过名称查找柜子和物品 4. 在首页通过翻页查看柜子 5. 点击柜子后可以添加物品 6. 添加物品时需要物品名称，同时可以输入物品的分类标签，物品的描述，物品的图片等详细信息，系统将自动加入存储时的时间 7. 柜子将记录存储物品的信息、数量，最近一次收纳的时间（2021.11.30：整理思路后加入） 8. 用户可以通过扫描柜子录入柜子的外形信息，录入后通过再次打开摄像头对准柜子，即可在屏幕中的柜子上通过AR技术显示柜子的信息，包括柜子的名称、存储物品的信息、数量，最近一次收纳的时间（2021.12.7：学习用户交互后加入AR技术） 页面描述： 1.开机动画页： （2021.12.2：在纸上进行草稿绘制后） 简述：显示app的图标，然后进入登录页 截图： 外观： 黄色的背景色是代表柜子的棕色系，文字用了书法的黑色，因为我们的动画设计就基于文字的象形化处理，在动画结尾时，存入柜子的物品变为白色，与其他颜色对比强烈，更为显眼，是为了强调我们的收纳主题，同时为用户的视线提供焦点。下方的文字中“收纳”为加大的白色字也是为了突出主题，使用户一目了然。 说明： 在开机动画页中，我们设计了一段符合我们APP主题的开机动画。我们的主题是柜子，因此我们在开机动画中将“柜”这个字进行了拆分。“柜”右边的“巨”像个带抽屉的柜子，而左边的“木”则像一个手里拿着物品的人。我们基于这个设计思路再融入我们的收纳的主旨设计了开机动画。首先是单独的“巨”，代表一个柜子，然后从左侧进入一个“木”，形似一个小人手里拿着一件物品，然后小人拉开“巨”代表的柜子的中间的抽屉，将手里的物品放入抽屉，完成了收纳动作。然后小人将抽屉推回去，物品被收纳入柜子中，并变为白色开始旋转。此时出现一行字“请开始您的收纳之旅”，为用户给出提示，同时，这段文字中的“收纳”两个字字号加大且为白色，鲜明的突出我们的收纳主题。用户点击屏幕，抽屉中的物品将变为一个白色的笑脸，同时下面将显示“收纳让生活愉快”，“愉快”二字加大且为白色，与笑脸相呼应。等待一秒后，将自动进入登录页。 2.登录页 简述：显示用户隐私协议，给用户*发二维码，用户登录 截图： 外观： 黄色的背景代表柜子的主题色，白色的格子模拟柜子中每一层的格子。“收纳柜”三个字同样用黄色，和前面灰色的字相比尤为醒目，突出收纳柜的主题。右下角的小猫为整体画面添加动力，其卡通的风格也是我们的主题风格。 说明： 进入登录页后，首先会弹出一个用户隐私协议，用户需要阅读五秒以上，否则无法点击同意按钮，以此强制性使用户注意隐私安全保护。同意隐私协议后进入登录页，用户将填写**，并接受二维码登录APP。用户收到二维码后会直接填入二维码的输入框，为用户节省时间，也可通过*或qq账号登录，提供多种登录选择。用户填写完毕登录信息后点击登录按钮即可登录APP。 3.柜子主页 简述：可以左右滑动选择柜子或增加柜子，可以滑动打开柜门查看或增加物品。 截图： 外观： 说明： 首先会有一个半透明的灰色引导，用右下角的小猫模拟引导助手，用卡通的风格向用户进行使用方法的说明，