Cloud Integrated Monitoring Backend Website
Cloud VMS l Access Control l B2B
Website l UIUX Design
綜述
將公司幾款影像監控、門禁控制、AI辨識應用程式串上雲端，並建立集結這些應用程式成一個集成式控制網站，並分成前台、後台，依照權限分用戶角色（總部、分支機構、供應商）授予訪問權限，以提取所需訊息。
我的角色
UX Designer + UI Designer
與產品經理 (PM) 和開發人員 (RD) 合作，了解需求來確立雲端產品網站架構。
識別適合雲端集成的公司產品有哪些，並規劃開發順序。
創建線框圖，設計風格，並組織功能和項目。設計線框稿、流程圖、prototyping，最後製作高保真原型圖，整理好設計交付物由開發工程師實現。
過程
1. 需求： 從產品經理(PM) 那裡收到需求，這個專案是 0-1的開發項目，屬於大型專案。
2. 研調： 開會討論，第一輪開會時參與成員一開始幾乎快每個開發部門都派人出席，後續才越來越精簡並且定調主開發人員跟需要配合的單位及產品。
3. 定義(解決方法)： 在非開會期間我習慣先用手繪線框稿方式來與產品經理討論是否合乎產品目標。
4. 低保真(流程圖、線框稿)： 這期間不斷地反覆與工程師、產品經理討論、迭代產品規劃，若前面需求定義階段不夠明確，這階段的便會遇上流程圖都確定好將到下一階段的程度便翻船，甚至取消需求。
5. 高保真(模型)： 規劃好介面設計，建立高保真模型。為了避免工程師重工開發，我還是會用高保真做prototyping來與團隊討論是否可行性，以雙重徹底確保所有佈局和功能。
6. 交付物： 建立好設計系統和元件，並整理成設計文件、切圖，交付予工程師coding用。
01
需求
開發一個 0-1網站。
這個新網站是套集結公司很多服務，包括桌面應用程序、影像監桌面控應用程式、APP等等，被視為公司的年度項目。
02
搜尋 & 調查
先行桌面調查在討論、定義出架構。
03
定義 & 解決方式
習慣用手繪線框稿獲低保真流程圖來與產品經理討論是否合乎產品目標。
- 解決方式 -
-
確立目標。
-
確定並分類層次和功能。
-
定義功能頁面之間的關係
用最粗暴的紙筆記錄與產品經理和工程師討論新產品的權限、功能和版面設計。
04
Lo-Fis
(UI-flows, wireframes, wireflow)
- 目標 -
建立低保真圖來討論細節
設計以單色線框圖來定義畫面、佈局、規劃流程，並在功能之間標註如何交互，
於是建立線框流程圖，在視覺化網站架構之前進行雙重檢查。
wireframes
Wireflow
重點仍在建立清晰的工作流程，以簡單的方式定義功能的位置。在這個階段，避免使用充滿活力和色彩的色調，以保持預期的簡潔。
- 解決方式 -
運用軟體
討論過程和調整細節
主要重點仍放在建立清晰的操作流程並且以簡單的方式定義功能順序、環節。在此階段避免使用鮮豔的顏色以保持專注在確認邏輯。