1 背景
最近接到公司一个客户提的B端产品的需求——实现园区大门升降柱的智能控制。
由于是公司的业务，出于隐私问题，暂不进行详细说明，此次产品需求分析，仅仅分析产品结构和一些概要分析，详细设计部分将省略后台的设置和统计部分，只是简单说明一下APP上对升降柱的升降操作的动画实现过程。
2 用户需求
- 要求能实现设备分组，自由控制设备组内的升降设备；
- 要求能对大门的升降柱实现全升、全降、半升、半降；
- 需要严格控制升降柱权限问题，并在操作时进行安全须知的阅读和密码的确认。
3 产品需求
3.1 实体关系
下面对系统中实体关系进行简单介绍：
- 一个场所下可以关联多个设备组，一个设备组仅能在一个场所下；
- 一个设备组管理一组升降设备，一个升降柱只能在一个设备组里面；
-
设备组的属性，可以设置安全须知、密码验证、以设备组为单位进行升降操作，形成升降记录。
实体关系图.png
3.2 系统运行流程
用户在升降系统中的主要操作如下：
- 先设置基础数据、包括新建场所、录入升降设备、建立设备组；
- 对设备组进行升降操作，选择操作方式，阅读安全须知，输入操作密码；
-
形成升降记录，可查询、导出记录。
业务流程图.png
3.3 功能结构图
升降柱系统的主要功能模块按照下图的功能结构进行划分
功能结构图.png
3.4 APP升降控制
3.4.1 操作介绍
全升——对设备组进行操作时，点击【全升】按钮，阅读安全须知后，点击密码确认，对设备组中所有的设备进行一个升起的操作。
全降——对设备组进行操作时，点击【全降】按钮，阅读安全须知后，点击密码确认，对设备组中所有的设备进行一个降下的操作。
半升——对设备组进行操作时，点击【半升】按钮，阅读安全须知后，点击密码确认，对设备组左边或右边的一半的柱子进行升起操作。
半降——对设备组进行操作时，点击【半降】按钮，阅读安全须知后，点击密码确认，对设备组左边或右边的一半的柱子进行降下操作。
3.4.2 升降动画
3.4.2.1 第一步：分为左右两个面板
为了实现柱子的升降动画，我们先降柱子分为两种状态：升起状态、降下状态。
我们以一个设备组有六根柱子为例，进行动画说明。一个动态面板放一半的柱子数量——3根柱子，分为左右两个面板。在进行半升，半降操作时会分别对左右面板的柱子进行操作。动态面板中有两个状态，如下：
升起：
升起.png
降下：
降下.png
当降下柱子时，柱子的动画为向下移动，相关交互语句如下：
当升起柱子时，柱子的动画为向上移动，相关交互语句如下：
设置好了一个动态面板后预览效果：
升降操作-单.gif
3.4.2.2 第二步：四个操作按钮点击后的动画设置
实现四个操作的不同动画。
首先分析，全升和全降很简单，就是对左边的动态面板和右边的动态面板实现一起升起、一起降下的操作。
全升时：
全降时：
半升时：
半升时需要判断当前应该升起左边的柱子还是右边的柱子，我们默认从左到右升起，所以需要加入条件语句来判断当前需要执行的操作
情形一：翻译过来就是，如果左边的动态面板是降下状态，则升起左边的柱子
情形二：翻译过来就是，如果左边的动态面板已经是升起的状态，则升起右边的柱子。
半降时：
半降时和半升一样需要判断当前应该降下左边的柱子还是右边的柱子，我们默认从右到左降下，所以需要加入条件语句来判断当前需要执行的操作。
情形一：翻译过来为，当右边的柱子为升起状态时，则降下右边的柱子
情形二：翻译过来为，当右边的柱子已经为降下状态了，则降下左边的柱子。
设置完后的效果如下：
升降操作-无密码.gif
第三步：加入阅读安全须知和密码确认弹窗
在执行每一次操作时，需要阅读安全须知并输入密码验证，验证成功后才调用接口进行升降操作，现在我们加入弹窗确认。
新建动态面板，面板一放安全须知，面板二放输入密码框，执行升降操作时，需要弹窗并按步骤进行，验证通过后才进行下一步操作
面板一.png
面板二.png
因为在输入密码成功后，需要知晓用户点击的是哪个操作（全升、全降、半升、半降），所以加入全局变量select，在点击操作按钮时，记录用户点击的按钮，然后在输入密码后可以判断用户之间点击的具体操作，再执行对应的升降操作。
全升时——将select赋值1；
全降时——将select赋值2；
半升时——将select赋值3；
半降时——将select赋值4；
则输入密码确认通过后，需要判断变量并结合操作按钮需要的操作方式，设置为如下情形和交互：
3.4.2.4 最终效果
整体实现效果如下图：
升降效果-总.gif
4 写在最后
本文对升降柱需求进行了简单的概要设计，和对升降柱动画的实现进行了详细介绍。目前只是从产品功能和交互设计层面写了这篇文章，未对升降柱的需求进行更深入的分析，希望读者有做过这方面的需求的可以不吝赐教，跟笔者进行交流一下，谢谢阅读。
网友评论