本原型以「南方潮」設計系統建置，涵蓋前臺民眾服務與後臺內容管理。介面、互動與無障礙皆為實際可操作；資料、帳號、AI 與下載則為展示用模擬內容。最終視覺與互動由本公司 UI 設計團隊定稿，並於需求訪談納入貴府意見。
真實呈現
- 畫面、版型、元件與互動
- WCAG 2.1 AA：語意標記、鍵盤操作、焦點樣式、字級調整
- 後臺流程編輯「即時預覽 → 發布」連動
展示用模擬
- 申辦資料與帳號登入（不連接真實系統）
- SSO、翻譯輔助、AI 分類（示意，不上雲）
- 檔案下載與外部跳轉
可操作
部分（區塊已具）
規劃中
右下角「返回總覽」可隨時回到本頁
前臺
Citizen民眾查詢、申辦與多語服務
F1首頁
人生階段、服務分類、熱門查詢、新住民入口、公告
✓ 可操作
F2清單頁
分類／人生階段下的申辦項目清單，篩選、排序、分頁
✓ 可操作
F3申辦詳細頁
承辦資訊、申辦流程圖、應備證件、FAQ、相關連結
✓ 可操作
F4搜尋結果
查詢回顯、即時建議、零結果導引、跨語意命中示意
✓ 可操作
F5新住民・移工專區
多語服務入口、語言切換、常用服務
✓ 可操作
F6表單頁
線上預約／意見回報，即時驗證、錯誤摘要
✓ 可操作
F7多語版本示意
以越南文呈現申辦頁，示意 i18n 與未翻譯回退
✓ 可操作
F8系統／規範頁
無障礙、隱私、資安、著作權、開放宣告、導覽
✓ 可操作
F9外部跳轉過場
「即將前往外部系統」確認過場頁
✓ 可操作
後臺
Staff局處內容管理、審核發布與權限治理
B1登入
本地帳密 ＋ SSO（OIDC／SAML／LDAP）示意
✓ 可操作
B2儀表板
我的草稿、待我審核、近期動態
✓ 可操作
B3申辦項目列表
依局處／分類／狀態／翻譯完成度篩選、批次動作
✓ 可操作
B4項目編輯器
基本・多語・流程・附件・FAQ・連結・SEO・預覽分頁
✓ 可操作
B5流程編輯器
新增／拖拉＋數值排序、節點類型、橫直切換、即時預覽、發布
✓ 可操作
B6節點／分類管理
樹狀分類維護，拖拉＋數值排序
✓ 可操作
B7媒體庫
附件／圖片網格、批次上傳（模擬）、白名單檢核
✓ 可操作
B8使用者與局處
使用者／局處列表、首次登入待授權
✓ 可操作
B9角色與權限
三級角色 × 局處 × 節點範圍授權
✓ 可操作
B10稽核軌跡
登入／權限異動／內容發布之可篩選紀錄
✓ 可操作
B11系統設定
語言集、逾時、備份等設定示意
✓ 可操作
B12AuthProvider 設定
IdP 端點／憑證／對應欄位設定（不寫死）
✓ 可操作
六分鐘示範動線
▶ 啟動示範導覽本原型 21 個畫面均可操作。點「啟動示範導覽」依下列動線逐站操作，畫面下方將出現導覽列引導下一步。
- F1自首頁進入，示範人生階段、服務分類與多語入口，並以 A−／A／A＋ 演示字級調整。可操作
- F3進入「申請生育津貼」，切換流程圖橫式／直式，展開 FAQ，檢視應備證件與承辦資訊。可操作
- F4回首頁查詢，示範即時建議與跨語意命中（越南文查詢命中中文內容）。可操作
- B1後臺登入，說明 AuthProvider 抽象與 SSO 串接彈性。可操作
- B5於流程編輯器新增與拖拉步驟、切換節點類型，即時預覽前臺呈現，按「發布」。可操作
- F3返回前臺，確認申辦流程已即時更新，呼應「所見即所得」的維運體驗。