WEB & APP-Android
料件倉儲管理系統
料件倉儲管理系統
從舊系統重構到行動化整合：倉儲管理體驗優化
從舊系統重構到行動化整合：倉儲管理體驗優化
視覺介面設計 & 操作流程規劃
視覺介面設計 & 操作流程規劃
WEB & APP-Android
料件倉儲管理系統
從舊系統重構到行動化整合：倉儲管理體驗優化
視覺介面設計 & 操作流程規劃
專案概覽
專案概覽
專案概覽
專案背景
專案背景
這是一個政府某機關單位專門管理倉庫物品庫存的倉儲管理系統，自啟用以來已超過20年，雖然中間有經過多次調整，但由於系統架構老舊，已無法滿足現代倉儲管理的需求，因此我們承接這項專案，以提升倉儲管理的效率和準確性，讓使用變得更加靈活。
這是一個政府某機關單位專門管理倉庫物品庫存的倉儲管理系統，自啟用以來已超過20年，雖然中間有經過多次調整，但由於系統架構老舊，已無法滿足現代倉儲管理的需求，因此我們承接這項專案，以提升倉儲管理的效率和準確性，讓使用變得更加靈活。
專案時程
專案時程
2023/07–2023/12，共6個月，交付後持續依實際需求進行優化調整
2023/07–2023/12，共6個月，交付後持續依實際需求進行優化調整
團隊成員
團隊成員
專案經理、UIUX設計師、前端工程師、後端工程師、APP工程師
專案經理、UIUX設計師、前端工程師、後端工程師、APP工程師
我的角色與職責
我的角色與職責
擔任 UIUX設計師，負責整體系統的介面設計（涵蓋 Web 與 App 端）及使用者流程規劃
擔任 UIUX設計師，負責整體系統的介面設計（涵蓋 Web 與 App 端）及使用者流程規劃
問題定義與任務目標
問題分析
問題分析
在專案初期，我與專案經理一同前往客戶端進行需求訪談，由專案經理主導訪談內容，我則負責記錄問題資訊與觀察使用者在操作現行系統時的痛點。後續回到內部，協助整理並彙整訪談重點，釐清當前待優化的核心問題。
在專案初期，我與專案經理一同前往客戶端進行需求訪談，由專案經理主導訪談內容，我則負責記錄問題資訊與觀察使用者在操作現行系統時的痛點。後續回到內部，協助整理並彙整訪談重點，釐清當前待優化的核心問題。
🤔 工作流程冗長又不方便
🤔 工作流程冗長又不方便
·現場與電腦之間需要往返 ，流程被切斷、效率低
．不少工作要靠人工紙本處理，容易出錯也很花力氣
·現場與電腦之間需要往返 ，流程被切斷、效率低
．不少工作要靠人工紙本處理，容易出錯也很花力氣
🥺 畫面缺少層級又不直觀
🥺 畫面缺少層級又不直觀
．畫面缺少清楚的結構和指引，容易操作錯誤
．重要資訊不夠明確，操作流程不夠順暢
．功能設計有重疊，常常不知道該用哪一個，增加學習成本
．畫面缺少清楚的結構和指引，容易操作錯誤
．重要資訊不夠明確，操作流程不夠順暢
．功能設計有重疊，常常不知道該用哪一個，增加學習成本
問題定義與任務目標
任務目標
任務目標
藉由系統重新建置，以及結合app電子化的方式，目標是提升操作效率、優化工作流程並改善視覺體驗，讓資訊更清楚明瞭，滿足現代倉儲管理的靈活需求。
藉由系統重新建置，以及結合app電子化的方式，目標是提升操作效率、優化工作流程並改善視覺體驗，讓資訊更清楚明瞭，滿足現代倉儲管理的靈活需求。
💡 這個專案最大的核心重點，是解決了倉儲人員必須在電腦與現場往返才能完成作業，造成流程中斷與效率低落的問題——流程被整合後現場就能一次完成。
💡 這個專案最大的核心重點，是解決了倉儲人員必須在電腦與現場往返才能完成作業，造成流程中斷與效率低落的問題——流程被整合後現場就能一次完成。
💡 改善重點
💡 改善重點
．APP 端整合流程：讓現場即可查詢與完成作業 → 解決往返問題與紙本操作減少錯誤。
．網頁端流程與資訊重新整理：優化視覺、資訊架構更清楚、使用流程更順暢。
．APP 端整合流程：讓現場即可查詢與完成作業 → 解決往返問題與紙本操作減少錯誤。
．網頁端流程與資訊重新整理：優化視覺、資訊架構更清楚、使用流程更順暢。
重新整理系統資訊架構
重新整理系統資訊架構
在專案初期，PM 先針對舊系統所有功能與頁面進行盤點，並提供各頁面需包含的功能與業務邏輯。
我則基於這些需求，產出整體的操作流程與畫面設計。在實際繪製畫面時，我會重新檢視操作流程、資訊層級，若發現流程冗長或邏輯不一致，會主動與 PM 討論調整。
重新整理系統資訊架構
在專案初期，PM 先針對舊系統所有功能與頁面進行盤點，並提供各頁面需包含的功能與業務邏輯。
我則基於這些需求，產出整體的操作流程與畫面設計。在實際繪製畫面時，我會重新檢視操作流程、資訊層級，若發現流程冗長或邏輯不一致，會主動與 PM 討論調整。
Before-痛點
Before-痛點
功能重疊、分類不當：例如表單查詢被拆成七個頁面，但其實只是「不同狀態的同一類表單」，卻被分開，以及像「代理設定」、「簽核移轉」其實有兩個幾乎相同的功能，僅名稱不同，增加理解與操作成本。
操作效率低：使用者為了完成查詢或簽核，必須頻繁跳轉，耗時又容易出錯。
整體架構膨脹：因為過度拆分，讓系統結構看起來龐雜，增加學習與維護難度。
功能重疊、分類不當：例如表單查詢被拆成七個頁面，但其實只是「不同狀態的同一類表單」，卻被分開，以及像「代理設定」、「簽核移轉」其實有兩個幾乎相同的功能，僅名稱不同，增加理解與操作成本。
操作效率低：使用者為了完成查詢或簽核，必須頻繁跳轉，耗時又容易出錯。
整體架構膨脹：因為過度拆分，讓系統結構看起來龐雜，增加學習與維護難度。
功能重疊、分類不當：例如表單查詢被拆成七個頁面，但其實只是「不同狀態的同一類表單」，卻被分開，以及像「代理設定」、「簽核移轉」其實有兩個幾乎相同的功能，僅名稱不同，增加理解與操作成本。
操作效率低：使用者為了完成查詢或簽核，必須頻繁跳轉，耗時又容易出錯。
整體架構膨脹：因為過度拆分，讓系統結構看起來龐雜，增加學習與維護難度。
After-優化後
After-優化後
整合類似功能：將原本分散表單整合，使用者可透過篩選或標籤切換不同狀態，快速找到需要的表單。
減少分類與層級：去除不必要的重複功能，讓資訊結構更精簡、清晰。
提升操作效率：使用者不再需要頻繁跳轉頁面，查詢與簽核流程更順暢。
整合類似功能：將原本分散表單整合，使用者可透過篩選或標籤切換不同狀態，快速找到需要的表單。
減少分類與層級：去除不必要的重複功能，讓資訊結構更精簡、清晰。
提升操作效率：使用者不再需要頻繁跳轉頁面，查詢與簽核流程更順暢。
設計理念｜視覺展示
設計理念｜視覺展示
設計理念｜視覺展示
重新設計層級架構｜優化使用流程
重新設計層級架構｜優化使用流程
因涉及客戶內部資料，舊系統畫面無法對外展示，本畫面依照舊系統實際結構重新繪製，文字內容皆為示意，藉此說明原介面問題與優化方向。此畫面為舊系統的「庫存查詢」頁，作為代表畫面來說明系統當時存在的介面與使用體驗上的問題。
因涉及客戶內部資料，舊系統畫面無法對外展示，本畫面依照舊系統實際結構重新繪製，文字內容皆為示意，藉此說明原介面問題與優化方向。此畫面為舊系統的「庫存查詢」頁，作為代表畫面來說明系統當時存在的介面與使用體驗上的問題。
Before-痛點
Before-痛點
視覺結構與層級
視覺結構與層級
左側選單僅顯示單一主功能，需切換才能瀏覽其他功能 ，導航階層過深，操作不便。
左側選單僅顯示單一主功能，需切換才能瀏覽其他功能 ，導航階層過深，操作不便。
按鈕缺乏主次區分，容易操作錯誤。
按鈕缺乏主次區分，容易操作錯誤。
查詢條件一次全部展開 ，視覺負擔大，資訊不易聚焦，另外，系統在不同頁面的標題、對齊方式、元件風格缺乏一致性。
查詢條件一次全部展開 ，視覺負擔大，資訊不易聚焦，另外，系統在不同頁面的標題、對齊方式、元件風格缺乏一致性。
操作流程
‧查詢流程設定條件後需換頁，若要修改必須回到上一頁，流程被中斷無法及時修改條件，效率低落。
操作流程
‧查詢流程設定條件後需換頁，若要修改必須回到上一頁，流程被中斷無法及時修改條件，效率低落。
After-優化後
After-優化後
在重構時，我們保留了使用者熟悉的整體版面架構，但針對資訊層級、操作流程與視覺規範做全面調整與優化。
在重構時，我們保留了使用者熟悉的整體版面架構，但針對資訊層級、操作流程與視覺規範做全面調整與優化。
視覺結構與層級
視覺結構與層級
扁平化左側導航功能，一層列出所有功能，點擊展開子項目。
扁平化左側導航功能，一層列出所有功能，點擊展開子項目。
採用模組化的排版方式區分不同資訊，並根據操作的重要性來規劃，像是按鈕的不同樣式，顏色位置等，在使用上會更明確。
採用模組化的排版方式區分不同資訊，並根據操作的重要性來規劃，像是按鈕的不同樣式，顏色位置等，在使用上會更明確。
查詢條件改為下拉多選，聚焦查詢流程。
查詢條件改為下拉多選，聚焦查詢流程。
操作流程
‧查詢條件固定上方，下方同步顯示結果，減少頻繁換頁操作。
操作流程
‧查詢條件固定上方，下方同步顯示結果，減少頻繁換頁操作。
Prototype
減少非必要的頁面跳轉｜根據任務靈活調整
減少非必要的頁面跳轉｜根據任務靈活調整
Before-痛點
Before-痛點
所有的新增與編輯操作，無論內容多寡或複雜性，都強制使用者跳轉到新的頁面。這種單一的處理模式，對於只需要填寫兩、三個欄位的簡單任務來說，會造成不必要的操作中斷感與操作負擔。
所有的新增與編輯操作，無論內容多寡或複雜性，都強制使用者跳轉到新的頁面。這種單一的處理模式，對於只需要填寫兩、三個欄位的簡單任務來說，會造成不必要的操作中斷感與操作負擔。
資料的「狀態」不同，會直接影響這筆資料是否運作，但舊版在顯示上與列表裡和其他資料「看起來一樣」，雖然有用顏色區分，但容易被忽略或辨識度不足。
資料的「狀態」不同，會直接影響這筆資料是否運作，但舊版在顯示上與列表裡和其他資料「看起來一樣」，雖然有用顏色區分，但容易被忽略或辨識度不足。
After-優化後
After-優化後
當內容簡單少量，使用彈窗進行編輯，可減少跳頁跟視覺干擾，但對於較為複雜的設定操作（如多欄位、需設定邏輯關聯、上傳附件等），則維持跳轉至完整編輯頁，確保操作空間與好的閱讀性。
當內容簡單少量，使用彈窗進行編輯，可減少跳頁跟視覺干擾，但對於較為複雜的設定操作（如多欄位、需設定邏輯關聯、上傳附件等），則維持跳轉至完整編輯頁，確保操作空間與好的閱讀性。
凸顯狀態的樣式，讓狀態從表格裡「跳出來」，一眼就能區分資料是否有效。
凸顯狀態的樣式，讓狀態從表格裡「跳出來」，一眼就能區分資料是否有效。
整合類似功能頁面｜讓功能使用更清晰
整合類似功能頁面｜讓功能使用更清晰
Before-痛點
Before-痛點
以常用的表單查詢來說，在進行盤點時發現多個查詢表單的功能，資料欄位幾乎是重複的，所以我們列出表格來去逐一比對，去了解每一個頁面它的目的，並將類似的功能頁做整合，降低學習成本與操作的負擔。
以常用的表單查詢來說，在進行盤點時發現多個查詢表單的功能，資料欄位幾乎是重複的，所以我們列出表格來去逐一比對，去了解每一個頁面它的目的，並將類似的功能頁做整合，降低學習成本與操作的負擔。
After-優化後
After-優化後
我們將相似的功能頁做整合讓功能集中，降低系統導覽的複雜度與學習成本。並把原本在列表頁可進行的操作移至詳細頁裡面，目的是希望提高確定性，讓使用者在執行像是撤銷、核准操作時能夠先進行內容的確認，因為這些都會影響到後續的作業。
我們將相似的功能頁做整合讓功能集中，降低系統導覽的複雜度與學習成本。並把原本在列表頁可進行的操作移至詳細頁裡面，目的是希望提高確定性，讓使用者在執行像是撤銷、核准操作時能夠先進行內容的確認，因為這些都會影響到後續的作業。
優化庫房儲位管理｜從扁平列表到階層式架構
優化庫房儲位管理｜從扁平列表到階層式架構
Before-痛點
Before-痛點
舊系統僅提供「庫房名稱」與其基本資訊的管理，並以列表形式呈現，資訊架構比較扁平，且未納入更細層的實體儲位，如區域、儲架、格位。對於實際進行料件管理與盤點作業的使用者而言，這樣的設計導致管理與查詢料件位置效率低下以及準確性不夠。
舊系統僅提供「庫房名稱」與其基本資訊的管理，並以列表形式呈現，資訊架構比較扁平，且未納入更細層的實體儲位，如區域、儲架、格位。對於實際進行料件管理與盤點作業的使用者而言，這樣的設計導致管理與查詢料件位置效率低下以及準確性不夠。
After-優化後
After-優化後
在這次優化中，需要加入「庫房 → 區域 → 架 → 格 → 儲位」等更清楚的位置標示，所以採用階層式結構搭配左右分欄設計，可以快速瀏覽與操作。而原先列表式可以看到每個庫房的狀態是否啟用，在新設計中將狀態以圓點+顏色呈現。
在這次優化中，需要加入「庫房 → 區域 → 架 → 格 → 儲位」等更清楚的位置標示，所以採用階層式結構搭配左右分欄設計，可以快速瀏覽與操作。而原先列表式可以看到每個庫房的狀態是否啟用，在新設計中將狀態以圓點+顏色呈現。
整合式操作選單，精簡介面視覺
在舊系統中，功能按鈕直接顯示在列表上方，這對於單純的列表頁面是可行的。但在新系統，我們採用階層式設計，這使頁面結構更複雜，如果將所有按鈕直接放上去，會讓畫面有點亂，所以將這些操作按鈕整合到單一按鈕中，減少視覺干擾，讓操作更順暢。
整合式操作選單，精簡介面視覺
在舊系統中，功能按鈕直接顯示在列表上方，這對於單純的列表頁面是可行的。但在新系統，我們採用階層式設計，這使頁面結構更複雜，如果將所有按鈕直接放上去，會讓畫面有點亂，所以將這些操作按鈕整合到單一按鈕中，減少視覺干擾，讓操作更順暢。
行動APP
輔助料件作業 | 提升工作效率
行動APP
輔助料件作業 | 提升工作效率
網頁端解決倉儲人員使用系統的作業痛點，APP則解決了實際在庫房的作業需求。
過去在執行料件管理時需在電腦使用紙本方式作業，流程冗長沒效率，這次導入行動化服務，我們提供PDA盤點機設備，讓使用者可以使用APP進行即時的料件查詢、執行入出庫及盤點等操作，與電腦系統同步更新數據，進一步提升工作流程與效率。
行動APP
輔助料件作業 | 提升工作效率
網頁端解決倉儲人員使用系統的作業痛點，APP則解決了實際在庫房的作業需求。
過去在執行料件管理時需在電腦使用紙本方式作業，流程冗長沒效率，這次導入行動化服務，我們提供PDA盤點機設備，讓使用者可以使用APP進行即時的料件查詢、執行入出庫及盤點等操作，與電腦系統同步更新數據，進一步提升工作流程與效率。
功能架構
功能架構
在設計APP 時，我們從倉儲人員的現場作業痛點出發，規劃了這套功能架構，主要包含幾個核心模組：
料件查詢：提供即時的條碼掃描與條件查詢，讓使用者能隨時隨地查詢料件位置與資訊。
倉儲管理：將入出庫等操作行動化，確保每次的料件異動都能即時同步到主系統。
盤點作業：簡化盤點流程，讓使用者能透過 APP 進行即時盤點與數據更新，取代繁瑣的紙本記錄。
在設計APP 時，我們從倉儲人員的現場作業痛點出發，規劃了這套功能架構，主要包含幾個核心模組：
料件查詢：提供即時的條碼掃描與條件查詢，讓使用者能隨時隨地查詢料件位置與資訊。
倉儲管理：將入出庫等操作行動化，確保每次的料件異動都能即時同步到主系統。
盤點作業：簡化盤點流程，讓使用者能透過 APP 進行即時盤點與數據更新，取代繁瑣的紙本記錄。
即時料件查詢｜減少來回作業
即時料件查詢｜減少來回作業
舊流程 vs 新流程 比較
舊流程 vs 新流程 比較
設計理念
設計理念
在 APP 中提供了即時料件查詢功能，倉管人員能於倉庫現場直接透過 PDA 操作，整體設計以「簡潔、清晰」為核心，強調操作效率與資訊辨識度。
在 APP 中提供了即時料件查詢功能，倉管人員能於倉庫現場直接透過 PDA 操作，整體設計以「簡潔、清晰」為核心，強調操作效率與資訊辨識度。
倉儲人員使用情境
‧在倉庫執行查詢，環境通常較為複雜、光線不足
‧需單手操作設備，同時查看實體料件與系統資訊
倉儲人員使用情境
‧在倉庫執行查詢，環境通常較為複雜、光線不足
‧需單手操作設備，同時查看實體料件與系統資訊
設計重點
‧簡單乾淨為主，盡量留白與使用同色系降低視覺干擾
‧精簡資訊層級，畫面僅保留必要操作與關鍵資訊
‧大按鈕與單手可及操作範圍設計，提升現場操作效率
設計重點
‧簡單乾淨為主，盡量留白與使用同色系降低視覺干擾
‧精簡資訊層級，畫面僅保留必要操作與關鍵資訊
‧大按鈕與單手可及操作範圍設計，提升現場操作效率
入出庫執行｜提升作業的準確性與效率
入出庫執行｜提升作業的準確性與效率
舊流程 vs 新流程 比較
舊流程 vs 新流程 比較
操作流程規劃
操作流程規劃
在規劃 APP 操作流程時，我先了解倉管人員熟悉的作業模式，再根據這次的業務需求重新梳理，規劃出新的操作流程。
規劃重點在延續了「先看單據、再執行料件」的操作順序，因為這是倉管人員熟悉的工作邏輯，只是把紙本換成系統任務列表，再用掃描去取代人工記錄，藉此降低學習成本，讓工作效率提升與增加準確性。
在規劃 APP 操作流程時，我先了解倉管人員熟悉的作業模式，再根據這次的業務需求重新梳理，規劃出新的操作流程。
規劃重點在延續了「先看單據、再執行料件」的操作順序，因為這是倉管人員熟悉的工作邏輯，只是把紙本換成系統任務列表，再用掃描去取代人工記錄，藉此降低學習成本，讓工作效率提升與增加準確性。
未處理｜白色
預設狀態，還尚未處理的料件
未處理｜白色
預設狀態，還尚未處理的料件
已處理｜灰色
已清點完畢且數量正確
已處理｜灰色
已清點完畢且數量正確
異常｜紅色
針對數量異常的情況
異常｜紅色
針對數量異常的情況
Prototype
入庫執行
顏色規範與設計元件
顏色規範與設計元件
反思與總結
反思與總結
反思與總結
雖然接案性質無法以數據迭代驗證，但我們仍以使用者需求，成功將原本繁瑣的流程優化為更直觀高效的平台，涵蓋 Web 與 App 兩端，大幅提升了倉儲作業的效率與準確性。
Web 端： 透過扁平化資訊架構與模組化設計，簡化了複雜的操作流程，並優化資料狀態的視覺呈現，讓使用者能更快速地完成任務，不再迷失於層層選單。
App 端： 導入行動化解決方案，讓倉儲人員能直接在現場完成查詢、入庫、出庫及盤點作業。這取代了傳統的紙本記錄與人工輸入，不僅降低了人為錯誤風險，也實現了即時資料同步，顯著提升了作業效率與準確性。
雖然接案性質無法以數據迭代驗證，但我們仍以使用者需求，成功將原本繁瑣的流程優化為更直觀高效的平台，涵蓋 Web 與 App 兩端，大幅提升了倉儲作業的效率與準確性。
Web 端： 透過扁平化資訊架構與模組化設計，簡化了複雜的操作流程，並優化資料狀態的視覺呈現，讓使用者能更快速地完成任務，不再迷失於層層選單。
App 端： 導入行動化解決方案，讓倉儲人員能直接在現場完成查詢、入庫、出庫及盤點作業。這取代了傳統的紙本記錄與人工輸入，不僅降低了人為錯誤風險，也實現了即時資料同步，顯著提升了作業效率與準確性。
