---
# System prepended metadata

title: VMS Study
tags: [UX / UI]

---


## Conclusion
| 位置 | 說明                     | 資訊範圍 由大到小    |
| ---- | ------------------------ | --- |
| 上排 | 功能 tab bar              |   5  |
| 中間 | 各式相機窗格畫面呈現     |  4   |
| 左排 | 全部相機、用戶自定義view |  3   |
| 下排 | 相機視窗細節             |  2   |
| 右排 | 延伸功能                 |  2   |

## Conclusion wireframe
參考VMS 1+6 products:
**1. AXIS, [2. Milestone](https://www.milestonesys.com/), [3. Avigilon](https://www.avigilon.com), [4. Exacq](https://www.exacq.com/), [5. Nx](https://www.networkoptix.com/), [6. EEN](https://www.een.com/), [7. OpenEye](https://www.openeye.net/)





---

## Insights
Profie S
### 1. 上排 “功能Tab”欄位
    部分平台可根據使用者習慣新增、關閉tab。
- **AXIS**, **Nx**, **OpenEye**, **Avigilon** 可新增、關閉tab

    | pros     | cons     |
    | -------- | -------- |
    | 同時多開相同功能的分頁來使用     | 若分頁過多可能會影響尋找tab|

    = suggestion：提供使用者自訂tap名稱，利用前方icon來辨識是何功能即可。
    ![截圖 2024-03-27 下午12.26.41](https://hackmd.io/_uploads/Bkm2gm-1A.png)

- 沒有tab欄位 **Xprotect, Milestone** 上方是navi bar的概念，透過新增加值服務以解鎖 （e.g.加值 Aceess control )
![截圖 2024-03-27 下午12.26.47](https://hackmd.io/_uploads/rkG0xX-J0.png)


### 2. 左排

- 基本結構: 
    1. 搜索設備名稱（較特別的是EEG，下面介紹）
    2. view 分類
    3. 全部相機 分類
    4. 編輯 view 視窗按鈕

![截圖 2024-03-27 下午12.26.53](https://hackmd.io/_uploads/B17WWQbJR.png =50%x)
![截圖 2024-03-27 下午12.26.59](https://hackmd.io/_uploads/SJQWZQb10.png =50%x)
![截圖 2024-03-27 下午12.27.04](https://hackmd.io/_uploads/BkQWWQZkR.png)
![截圖 2024-03-27 下午12.27.12](https://hackmd.io/_uploads/HJ7W-QbJC.png =50%x)
![截圖 2024-03-27 下午12.27.16](https://hackmd.io/_uploads/By7bbQWJ0.png =50%x)
![截圖 2024-03-27 下午12.27.25](https://hackmd.io/_uploads/r1mZ-QZk0.png =50%x)


* EEN 因為沒有上方tab bar的設計，所以左邊bar的搜尋可以直接當作一個filter，搜尋“正門”時，能在左方篩出所有與正門有關的對應資料、畫面。

### 3. 下排
- 查看、搜尋所選相機所錄製的時間
    1. 時間軸
    2. 回播、倍速按鈕
    3. 事件發生時間段的顏色highlight
    4. 匯出片段
    
![截圖 2024-03-27 下午12.27.32](https://hackmd.io/_uploads/Hy34-m-kA.png)


### 4. 右排
- 延伸功能
    **Nx**將部分設定設計在畫面右側，彈跳視窗較少出現。
![截圖 2024-03-27 下午12.27.50](https://hackmd.io/_uploads/Hytr-QbkR.png =50%x)


---

### 所參考畫面

與市面上畫面佈局較相同的四間 **AXIS, Avigilon, OpenEye, Nx**
![Frame 40](https://hackmd.io/_uploads/B1HLhLC0a.png)

畫面佈局較不同 **milestone,Exacq, EEN**
![Frame 41](https://hackmd.io/_uploads/SyHI3ICCp.png)

---

## ip cam app on IOS

Uni Cam
![截圖 2024-03-25 上午10.19.44](https://hackmd.io/_uploads/SJpLJvACT.png)

Conclusion：簡單易上手、沒有特別AI搜尋功能


- **Device** 新增裝置、搜尋、編輯
- **layout** 查看實時監控
- **playback** 查看錄製影像

![IMG_4525](https://hackmd.io/_uploads/ry-7AIR06.png =50%x)

![IMG_4526](https://hackmd.io/_uploads/SJlXAU006.png =50%x)

![IMG_4527](https://hackmd.io/_uploads/SkxXRICAp.png =50%x)

![截圖 2024-03-25 上午10.16.00](https://hackmd.io/_uploads/SyOdAL0Ap.png =50%x)

![IMG_4529](https://hackmd.io/_uploads/ryXXRLRRp.png =50%x)
