top of page
Cloud integrated monitoring backend APP

雲端影像監控 l Access Control l B2B

移動應用程式 l UIUX Design l iOS & Android

綜述

開發一款移動應用程式(APP),擴展雲監控控制平台的功能,使用戶可以根據其權限使用智慧手機提取信息並執行操作。

我的角色

UX/UI 

產品服務分別為網頁版和 APP版,開發時間先以網站先進行,而等待到網站版本已經有了初步的架構時,我與產品經理和 APP團隊,釐清開發APP應用程式內容的關鍵需求和方向。隨後,我與產品經理和研發人員進行了多次討論,以完善詳細的功能。由我設計規劃 UI 流程,建立原型,並最終完成了高保真模擬。最後,將設計件和設計切圖並整理為雙系統文件(iOS, Android),分別交給應用程式 Team負責的工程師進行應用開發。

我的工作流程
  1. 釐清需求、確定功能: 在掌握切確開發目標,與工程師討論網站的現有結構流程。擷取此階段必須要有的功能,並以APP端的觀點將功能延伸開發。
     

  2. UI flow: 規劃應用程式(APP)的軟體操作流程。使用 Flow-chart流程圖討論邏輯。
     

  3. Wireframe: 繪製了低保真畫面,並附有補充註釋(例如,互動備註,按鈕導向的畫面,點擊將到哪個畫面)。頁面、交互細節會合併在流程圖上,稱為 Wireflow。
     

  4. Prototype: 為了促進對操作流程的直觀理解,使用低保真畫面進行原型製作,然後進行了改進。如果需要更精緻的外觀,則進行頁面調整。
     

  5. Mockup: 高保真圖遵循公司的CIS色調,並遵守 Material Design、HIG 概念。建立高保真模型。
     

  6. 交付:交付開發單位為兩個系統分別為 iOS和 Android使用的設計文件。

01

​需求

起初,公司這套產品服務我們只有建立響應式網站,整合多個公司產品服務,

為客戶以權限之分,提供一個前後台網站,主要用於瀏覽、啟動等各種監控服務詢息。

然而,隨著我們收到客戶的反饋,客戶有移動應用程式(APP)需求,以便他們能够更加直接地互動,而不是通過瀏覽器。這促使我們開始規劃開發一款行動應用程式 。

這項服務的網站已經有初步架構,現在可以作為雲端網路平台存取。

02

目標

設計APP架構(iOS, Android)

03

User Flow

透過分析網站的 Sitemap (網站地圖),我們將功能分解成以 List(卡片)為主的元件。我們先將使用者所需要的功能做 Priority,識別相關功能,並區分為主要核心功能和延伸功能。

客戶對應用程式的最重要的功能是即時通知。最後,我們使用分層 UI 流程重新架構這些分類卡片,確保直觀操作和關注點分離 (SoC),

同時突出水平和垂直關係。

- 解決方式 -

  • 建立清晰的目標

  • 定義和分類層級和功能

  • 指定功能頁面之間的關係

運用軟體

04

Wireframe

- 目標 -

利用低保真線框圖搭配輔助線來製作流程圖

之前,我們已經闡明架構和功能,這階段,我提供線匡稿和PM, RD 確認應用程式的架構是否符合邏輯。

製作有註釋其功能、動作和狀態的流程線框圖,

其中包含關鍵交互註記。此文件有助於日後的調整和審查。

為了緊急開發,優先處理關鍵交互註記。

在此階段,重點放在操作流程和整體結構邏輯上,

而不是最終的介面視覺設計。

- 解決方法 -

此階段的首要任務仍然是確認操作流程和功能的放置,並以簡明扼要的方式呈現。刻意避免在此階段使用明亮鮮豔的多彩配色。