UI/UX
PORTFOLIO / 2023-
鴻閣為直式手機遊戲平台 App 介面專案,模組架構與維亞系列相同(大廳、商城、聊天、贈禮、公會等)。素材目錄為 ../z_assets/images/uiux/final;此頁依版型精選代表畫面,同類布局只保留一張,並保留空狀態、流程等 UX 範例。
UI 資訊架構
大廳 index
遊戲分類 · 搜尋 · 跑馬燈 · VIP 列
左側浮動快捷
儲值 → 商城
任務
分享
聊天室
底部主導覽(5 tab)
活動
排行榜
商城
送禮
公會
個人與設定(大廳入口)
personal 個人中心
VIP
設定
商城
- 快速儲值 grid
- 一般儲值列表
- 申請存款
personal
- 我的/my
- 存摺、信箱、好友
聊天室
- 公頻/私聊
- 好友清單
贈禮
- 贈禮中心
- 紀錄、說明
公會
- 我的/所有公會
- 公會戰
系統功能
- 排行榜、任務
- 活動、VIP
資料夾結構即模組切分:根目錄為各功能主入口,子資料夾為流程步驟、空狀態與說明頁。下方畫面依此 IA 分區展示。
大廳 |
主畫面整合 VIP 列、活動 banner、遊戲分類 tab 與左側快捷入口;搜尋為覆蓋式子畫面。
|
|
|
商城 |
儲值彈窗含快速/一般兩段;各支付方式卡片版型相同,僅展示一種 grid 與申請存款表單。
|
|
|
|
聊天室 |
公頻/私聊共用 bubble 版型;好友清單另附空狀態。
|
|
|
|
贈禮 |
贈禮中心、紀錄與教學頁為不同版型;教學類說明頁擇一代表。
|
|
|
|
公會 |
公會列表與公會戰說明為兩種版型:列表頁 vs 規則 modal。
|
|
|
個人中心 |
personal 模組含存摺、信箱、好友與 my 子頁;表單類版型相近,擇二並列。
空/滿狀態 · 存摺
|
|
|
表單流程(擇二)
|
|
|
系統功能 |
排行榜、任務、VIP、設定各擇一;活動附列表+內頁。
|
|
|
|
|
活動 · 列表+內頁
|
|
|