PIMS APP
工廠自動化系統 UI/UX 設計
PIMS APP
工廠自動化系統 UI/UX 設計
成果展示
APP介面
針對B2B用戶需求製作有關智能秤重系統的APP介面
APP官網
針對APP製作產品官網，裡面包含產品詳細介紹、廠商案例、試算方案等功能
專案簡介
專案概要
自動化管理系統 APP，針對工廠現場秤重、記錄與出入庫管理的數位轉型需求設計。
目標是讓年齡層廣泛的使用者在第一線現場能夠快速理解並操作，減少錯誤與操作成本。
負責項目
UI/UX 設計｜Figma 視覺規劃｜UX 流程設計｜功能邏輯梳理｜與工程、廠商溝通協作
核心參與內容
Figma 視覺規劃與 UI 設計
UX 流程設計與邏輯梳理
與廠商進行現場訪談、觀察實際流程
與工程師協作系統邏輯與流程確認
製作 Prototype 交付動畫邏輯與互動細節
核心貢獻是主導整體使用情境與畫面設計，將模糊需求轉化為明確可實作的流程。
使用者分析
使用者痛點彙整
本研究針對四家合作廠商進行訪談，依照痛點特性分為A~D類型，用以歸納共通問題與需求。
A廠商-作業過程繁瑣
生產過程中需要大量的手動數據記錄，再到電腦進行編輯列印，不僅費時費力，還容易出現記錄錯誤，導致後續管理和追溯困難。
B廠商-人工紀錄太慢
依照法規每袋醫療廢棄物皆須貼上標籤，標籤內容須包含秤重資訊與來源和回收商。目前採取全人力做法，需要秤重>手寫標籤>手寫紀錄表>貼上標籤>才能丟至回收車太耗費人力與時間。
C廠商-年長使用者字看不清
使用者皆為年長者，需客製介面文字與大小去符合廠內用字，苦無法找到合適的服務商與系統。
D廠商-人工印標費時
生產過程中需要手動列印標籤，不僅費時，還容易出現記錄錯誤，導致後續管理和追溯困難。
設計思考
根據不同類型廠商常見痛點進行場景分群，用以推導設計應聚焦的真實問題。
Persona
使用者角色描繪
王先生
58歲，包裝區作業員
使用數位設備經驗低，習慣紙本記錄
常因字太小看不清楚標籤資訊，標錯商品
希望操作流程越少越好，最好整合在一畫面內完成
林小姐
32歲，工程部PM
須整理每日紀錄與異常報表
苦於多種系統分離，資訊要人工統整
希望能自動串接秤重與標籤資訊並留存歷程
初期訪談 → 三大關鍵設計方向歸納
透過現場訪談 PM、工程師及實際操作人員，歸納出以下三大設計方向以應對多元痛點與作業瓶頸：
模組化功能拆分：避免系統流程過於複雜，提高維護與客製彈性。
單畫面流程整合：減少跳轉與視覺干擾，使高齡使用者更易操作。
異常處理明確回饋：提升使用信心，避免錯誤操作時無法追溯原因。
UX使用流程規劃
User Journey Map
使用者地圖
實際訪談使用者所在廠區當前使用的工作流程進行使用者地圖分析，以下的使用者地圖以Persona裡實際操作的王先生為主，林小姐為輔製作， 根據訪談過程瞭解使用者想法以及推測在每個階段的情緒。
設計思考
透過製作使用者地圖，可以很清楚瞭解使用者流程的過程中哪個節點出了問題，可以針對痛點有效率的進行流程的改善，大幅優化使用者體驗。
User Flow
使用者流程圖
描述使用者在完成特定任務時，於系統中所經歷的主要畫面與操作節點。
透過此圖，可以快速掌握使用者的操作路徑，了解流程是否簡潔順暢，是否存在跳轉過多或資訊中斷的問題。
設計思考
流程設計盡量符合使用者需求，盡可能的減少操作步驟，無需人工確認的部分就讓系統自動化。
IA資訊架構圖
整理整體系統的畫面層級與內容架構。
幫助團隊清楚規劃每個頁面應包含的功能與資訊，確保使用者導覽邏輯清楚、操作直覺。
設計思考
APP架構設計方向盡量減少彈跳視窗，以清楚的分區去讓使用者可以快速找到要使用的功能。
作為 wireframe 和 UI 設計的結構依據，幫助釐清模組與內容分布。
Flowchart
操作流程圖
著重於系統邏輯與操作判斷的細節呈現，通常用來描述一個功能在不同情境下的邏輯分支與處理方式。
相比User Flow更偏重於「使用者視角」，Flowchart則偏重於「系統處理邏輯」。
設計思考
此圖用於與工程師溝通操作分支邏輯，確保系統錯誤處理清楚。
針對User Flow進行系統分析，去定義秤重數值穩定的標準，以及判定後的結果，讓系統有完整的迴圈。
Function Logic Flow
功能邏輯流程
描述單一功能在特定操作下的詳細執行邏輯。
包含系統如何處理使用者操作、條件判斷、錯誤處理與回饋顯示，主要用於與開發團隊溝通細部邏輯。
設計思考
思考每個功能按鈕背後需要去判斷的邏輯，以避免程式無法讓使用者正常使用。
UI設計與視覺延伸
Wireframe
設計草稿
根據設備操作場域的實地訪談與痛點回饋，結合 UX 問題整理與分析，製作出以下功能導向的 Wireframe 草圖。
設計思考
把所有資訊分類分區，常會操作到的功能集中放在順手的右邊及下邊，整體設計是環繞著中間的重量資訊區。
Hi-Fi UI 精搞
以Wireframe的設計搞為基礎，製作完整的UI設計，加入實際品牌色系與圖標樣式，整體介面更貼近最終產品使用情境。
設計思考
主色調使以我司的標準色為主再降低一點彩度，搭配中性色調淺灰色當作底色，讓整體看起來舒服不刺眼適合長期觀看。
出入庫狀態分明，保存的自動/手動列印表現鮮明，將重點功能以及常用功能都以淺白表示，進一步降低使用者學習成本。
Prototype互動設計
使用Figma製作prototype方便跟工程師做視覺化溝通以及核對流程。
補充說明
除了計重頁面之外，包含其他功能介面更複雜的功能因為透過prototype的方式讓工程師端更能瞭解我的想法。
Logo 設計與視覺延伸
以功能為形，打造視覺一致性
設計思考
本 Logo 結合 PIMS 四個字母結構，並以立體箱體作為視覺主體，象徵產品核心功能——秤重、管理與記錄。箱體結構呈現正在秤重的動態狀態，並加入上下限警示箭頭，傳遞即時監控與警示邏輯，強化「工業資訊系統」的功能性意象。藉由幾何化線條與模組化形式，建立一致性的品牌識別，亦對應 UI 設計中強調的數據準確與使用者引導，讓品牌在視覺上達成「識別性」、「語意性」與「系統性」的三重目標。
跨部門協作經驗
將邏輯圖以及相關文件交付給後端工程師，後續進行討論功能背後運作邏輯和條件，輔助不熟悉秤重相關知識的工程師。繪製Figma以及製作prototype，讓前端工程師能確定每個div和物件的屬性以及互動的相關動畫演示。
客戶溝通調整
廠商溝通照片
