top of page

iSAP - FRS App (人臉辨識門禁系統)

2018.09 - 2018.10

About Project

 iSAP 致力於多項 AI 智慧監控系統開發與整合,本次合作參與設計項目是正在籌備開發的 FRS(臉部辨識門禁系統),為訴求軟硬體整合,配合 iSAP 工程團隊進行 Dashboard 與 App 介面設計與操作流程優化等項目。

 

本專案以先行設計開發的網站系統 Dashboard 成果為規劃基礎,進行 App 端的延伸設計。

1. About Project

Role

UI/UX designer

Team

Application engineer,

Project manager,

Front-end designer

Client

iSAP Company

Client Goal

  • 打造能獲得企業青睞的產品視覺風格。

  • 透過視覺設計幫助提案與銷售。

  • 以產品開發技術為主的 UI 設計協作。

Project Goal

  • 產出能向買家進行提案與展示的原型。

  • 以視覺層面回應產品開發成果/進度。

  • 優化介面操作體驗。

Requirements

  • 設計產品 mockup。

  • ​打造專業視覺形象。

  • 制定 design guideline。

  • 產出 logic flow 與 prototype。

  • loading animation 設計。

User & Task

不同於其他競品包含出缺勤管理等複合型功能, iSAP FRS 網頁版系統專注於員工識別資料之分組管理以及對門禁監控系統的支援,因此在 app 中僅保留使用需求講求即時性的幾項主要功能。(以下介紹的三大功能也各別對應了三種權限之使用者身份操作任務。)

process.jpg
2. User & Task

Architecture

1.

臉部辨識系統

訪客與員工出入企業大樓時,透過與監視器接觸進行面部掃瞄辨識身份,判定開放進出之許可。

2.

企業識別資料庫

對於出入人員進行資料建檔,並可以將成員收入 VIP、黑名單等多種群組進行人員分類管理。

3.

訪客來訪通知

根據不同級別的管理者與訪客身份制定通知推送機制,使用戶能掌握貴賓到訪資訊並即時接待。

4.

訂立執行重點方向

配合開發時程,進行順序如下:

一、臉部辨識系統

二、新增臉部資料

三、訪客來訪通知

APP Flow

以 iSAP 企業端技術團隊提供已開發的功能畫面與流程圖為參考,在了解產品運作流程的設計規劃過程中,發現現有開發進度畫面缺少了一些呈現操作進度應有的狀態元件,以及一些流程頁面。

在滿足基本需求前提下,針對上述狀況另外追加提出了新的流程解決方案作為開發參考。

配合技術團隊持續更新的開發進度,最後爬梳整理出三大主要功能之流程脈絡,並完善即時掃描辨識功能流程中錯過的互動設計細節、敲定 app guideline。

flow-before.jpg

Before

After

After

3. Architecture
4. User Interface

User Interface

  • 視覺風格重點:
    以沉色系營造予企業用戶專業及信任感。
     

  • Guideline:
    繼承 Dashboard 風格,並制定 app 專用之元件樣式。
     

  • 尺寸技術需求:
    sketch / zeplin / overflow

Dashboard guideline

guideline.jpg

Guideline

Visual

Guideline

• Button
• Input
• Color & Font

為訴求整體產品服務介面的一致性,延用 Dashboard 原有的主色、並以一個版本介面支持雙系統作為考量;參考工程端所提供的已開發介面來進行設計以下規範。

• Button

納入手機操作介面尺寸及易讀性等需求考量,給予辨識判讀結果明確的紅綠用色引導使用者辨讀與操作。

UI-G1-button.jpg

​登入按鈕

主任務-取消按鈕

主任務-確認按鈕

當前狀態-取消按鈕

成功狀態-確認按鈕

錯誤狀態-確認按鈕

5. Strait & Solution

Strait & Solution

常見問題

6. Reflection
bottom of page