1 背景
最近接到公司一個客戶提的B端產(chǎn)品的需求——實現(xiàn)園區(qū)大門升降柱的智能控制。
由于是公司的業(yè)務，出于隱私問題，暫不進行詳細說明，此次產(chǎn)品需求分析，僅僅分析產(chǎn)品結(jié)構(gòu)和一些概要分析，詳細設計部分將省略后臺的設置和統(tǒng)計部分，只是簡單說明一下APP上對升降柱的升降操作的動畫實現(xiàn)過程。
2 用戶需求
- 要求能實現(xiàn)設備分組，自由控制設備組內(nèi)的升降設備；
- 要求能對大門的升降柱實現(xiàn)全升、全降、半升、半降；
- 需要嚴格控制升降柱權(quán)限問題，并在操作時進行安全須知的閱讀和密碼的確認。
3 產(chǎn)品需求
3.1 實體關(guān)系
下面對系統(tǒng)中實體關(guān)系進行簡單介紹：
- 一個場所下可以關(guān)聯(lián)多個設備組，一個設備組僅能在一個場所下；
- 一個設備組管理一組升降設備，一個升降柱只能在一個設備組里面；
-
設備組的屬性，可以設置安全須知、密碼驗證、以設備組為單位進行升降操作，形成升降記錄。
實體關(guān)系圖.png
3.2 系統(tǒng)運行流程
用戶在升降系統(tǒng)中的主要操作如下：
- 先設置基礎數(shù)據(jù)、包括新建場所、錄入升降設備、建立設備組；
- 對設備組進行升降操作，選擇操作方式，閱讀安全須知，輸入操作密碼；
-
形成升降記錄，可查詢、導出記錄。
業(yè)務流程圖.png
3.3 功能結(jié)構(gòu)圖
升降柱系統(tǒng)的主要功能模塊按照下圖的功能結(jié)構(gòu)進行劃分
3.4 APP升降控制
3.4.1 操作介紹
全升——對設備組進行操作時，點擊【全升】按鈕，閱讀安全須知后，點擊密碼確認，對設備組中所有的設備進行一個升起的操作。
全降——對設備組進行操作時，點擊【全降】按鈕，閱讀安全須知后，點擊密碼確認，對設備組中所有的設備進行一個降下的操作。
半升——對設備組進行操作時，點擊【半升】按鈕，閱讀安全須知后，點擊密碼確認，對設備組左邊或右邊的一半的柱子進行升起操作。
半降——對設備組進行操作時，點擊【半降】按鈕，閱讀安全須知后，點擊密碼確認，對設備組左邊或右邊的一半的柱子進行降下操作。
3.4.2 升降動畫
3.4.2.1 第一步：分為左右兩個面板
為了實現(xiàn)柱子的升降動畫，我們先降柱子分為兩種狀態(tài)：升起狀態(tài)、降下狀態(tài)。
我們以一個設備組有六根柱子為例，進行動畫說明。一個動態(tài)面板放一半的柱子數(shù)量——3根柱子，分為左右兩個面板。在進行半升，半降操作時會分別對左右面板的柱子進行操作。動態(tài)面板中有兩個狀態(tài)，如下：
升起：
降下：
當降下柱子時，柱子的動畫為向下移動，相關(guān)交互語句如下：
當升起柱子時，柱子的動畫為向上移動，相關(guān)交互語句如下：
設置好了一個動態(tài)面板后預覽效果：
3.4.2.2 第二步：四個操作按鈕點擊后的動畫設置
實現(xiàn)四個操作的不同動畫。
首先分析，全升和全降很簡單，就是對左邊的動態(tài)面板和右邊的動態(tài)面板實現(xiàn)一起升起、一起降下的操作。
全升時：
全降時：
半升時：
半升時需要判斷當前應該升起左邊的柱子還是右邊的柱子，我們默認從左到右升起，所以需要加入條件語句來判斷當前需要執(zhí)行的操作
情形一：翻譯過來就是，如果左邊的動態(tài)面板是降下狀態(tài)，則升起左邊的柱子
情形二：翻譯過來就是，如果左邊的動態(tài)面板已經(jīng)是升起的狀態(tài)，則升起右邊的柱子。
半降時：
半降時和半升一樣需要判斷當前應該降下左邊的柱子還是右邊的柱子，我們默認從右到左降下，所以需要加入條件語句來判斷當前需要執(zhí)行的操作。
情形一：翻譯過來為，當右邊的柱子為升起狀態(tài)時，則降下右邊的柱子
情形二：翻譯過來為，當右邊的柱子已經(jīng)為降下狀態(tài)了，則降下左邊的柱子。
設置完后的效果如下：
第三步：加入閱讀安全須知和密碼確認彈窗
在執(zhí)行每一次操作時，需要閱讀安全須知并輸入密碼驗證，驗證成功后才調(diào)用接口進行升降操作，現(xiàn)在我們加入彈窗確認。
新建動態(tài)面板，面板一放安全須知，面板二放輸入密碼框，執(zhí)行升降操作時，需要彈窗并按步驟進行，驗證通過后才進行下一步操作
因為在輸入密碼成功后，需要知曉用戶點擊的是哪個操作（全升、全降、半升、半降），所以加入全局變量select，在點擊操作按鈕時，記錄用戶點擊的按鈕，然后在輸入密碼后可以判斷用戶之間點擊的具體操作，再執(zhí)行對應的升降操作。
全升時——將select賦值1；
全降時——將select賦值2；
半升時——將select賦值3；
半降時——將select賦值4；
則輸入密碼確認通過后，需要判斷變量并結(jié)合操作按鈕需要的操作方式，設置為如下情形和交互：
3.4.2.4 最終效果
整體實現(xiàn)效果如下圖：
4 寫在最后
本文對升降柱需求進行了簡單的概要設計，和對升降柱動畫的實現(xiàn)進行了詳細介紹。目前只是從產(chǎn)品功能和交互設計層面寫了這篇文章，未對升降柱的需求進行更深入的分析，希望讀者有做過這方面的需求的可以不吝賜教，跟筆者進行交流一下，謝謝閱讀。
