SKILL.md
readonlyread-only
name
mobile-design
description
（行動優先 · 觸控優先 · 尊重平台）
行動設計系統
（行動優先 · 觸控優先 · 尊重平台）
理念： 觸控優先。省電優先。尊重平台。可離線運作。
核心法則： 行動裝置不是縮小版的桌面電腦。
運作原則： 先考慮限制，再考慮美觀。
此技能旨在防止以桌面思維、AI 預設值及不安全假設來設計或建置行動應用程式。
1. 行動可行性與風險指數（MFRI）
在設計或實作任何行動功能或畫面之前，請先評估可行性。
MFRI 維度（1–5）
| 維度 | 問題 |
|---|---|
| 平台明確度 | 目標平台（iOS / Android / 兩者）是否已明確定義？ |
| 互動複雜度 | 手勢、流程或導覽的複雜程度為何？ |
| 效能風險 | 是否涉及列表、動畫、大量狀態或多媒體？ |
| 離線依賴度 | 該功能在無網路時是否會中斷或降級？ |
| 無障礙風險 | 是否影響動作、視覺或認知無障礙？ |
分數公式
MFRI = (平台明確度 + 無障礙準備度)
− (互動複雜度 + 效能風險 + 離線依賴度)
範圍： -10 → +10
解讀
| MFRI | 意義 | 必要行動 |
|---|---|---|
| 6–10 | 安全 | 正常進行 |
| 3–5 | 中等 | 增加效能與 UX 驗證 |
| 0–2 | 有風險 | 簡化互動或架構 |
| < 0 | 危險 | 重新設計後再實作 |
2. 開始任何工作前的強制思考
⛔ 停：先問再假設（必要）
如果以下任何項目未明確說明，你必須先提問才能繼續：
| 面向 | 問題 | 原因 |
|---|---|---|
| 平台 | iOS、Android 或兩者？ | 影響導覽、手勢、字體 |
| 框架 | React Native、Flutter 或原生？ | 決定效能與模式 |
| 導覽 | 分頁、堆疊、抽屜？ | 核心 UX 架構 |
| 離線 | 是否必須離線運作？ | 資料與同步策略 |
| 裝置 | 僅手機或包含平板？ | 佈局與密度規則 |
| 受眾 | 消費者、企業、無障礙需求？ | 觸控與可讀性 |
🚫 切勿預設使用你最喜歡的技術堆疊或模式。
3. 強制參考閱讀（強制執行）
通用（務必優先閱讀）
| 檔案 | 目的 | 狀態 |
|---|---|---|
| mobile-design-thinking.md | 反記憶、強制情境思考 | 🔴 必須優先閱讀 |
| touch-psychology.md | Fitts 定律、拇指區域、手勢 | 🔴 必須閱讀 |
| mobile-performance.md | 60fps、記憶體、電池 | 🔴 必須閱讀 |
| mobile-backend.md | 離線同步、推播、API | 🔴 必須閱讀 |
| mobile-testing.md | 裝置與端對端測試 | 🔴 必須閱讀 |
| mobile-debugging.md | 原生與 JS 除錯 | 🔴 必須閱讀 |
平台專屬（條件式）
| 平台 | 檔案 |
|---|---|
| iOS | platform-ios.md |
| Android | platform-android.md |
| 跨平台 | 以上兩者皆讀 |
❌ 若未閱讀平台檔案，不得設計 UI。
4. AI 行動反模式（嚴格禁止）
🚫 效能禁忌（無妥協空間）
| ❌ 絕對不要 | 原因 | ✅ 務必使用 |
|---|---|---|
| 長列表使用 ScrollView | 記憶體爆炸 | FlatList / FlashList / ListView.builder |
| 內聯 renderItem | 重新渲染所有行 | useCallback + memo |
| 以索引作為 key | 排序錯誤 | 穩定 ID |
| JS 執行緒動畫 | 畫面卡頓 | Native driver / GPU |
| 正式環境使用 console.log | 阻塞 JS 執行緒 | 移除日誌 |
| 無 memoization | 耗電與效能下降 | React.memo / const 元件 |
🚫 觸控與 UX 禁忌
| ❌ 絕對不要 | 原因 | ✅ 務必使用 |
|---|---|---|
| 觸控區域 <44–48px | 點擊失誤 | 最小觸控目標 |
| 僅靠手勢操作 | 排除部分使用者 | 按鈕備援 |
| 無載入狀態 | 感覺像當機 | 明確回饋 |
| 無錯誤復原 | 死路 | 重試 + 訊息 |
| 忽略平台慣例 | 破壞肌肉記憶 | iOS ≠ Android |
🚫 安全禁忌
| ❌ 絕對不要 | 原因 | ✅ 務必使用 |
|---|---|---|
| 將 Token 存於 AsyncStorage | 容易被竊取 | SecureStore / Keychain |
| 寫死機密資訊 | 可被逆向工程 | 環境變數 + 安全儲存 |
| 無 SSL pinning | MITM 風險 | 憑證固定 |
| 記錄敏感資料 | 個資外洩 | 絕不記錄機密 |
5. 平台統一 vs 分歧矩陣
統一 分歧
────────────────────────── ─────────────────────────
商業邏輯 導覽行為
資料模型 手勢
API 合約 圖示
驗證 字體
錯誤語意 選取器 / 對話框
平台預設值
| 元素 | iOS | Android |
|---|---|---|
| 字體 | SF Pro | Roboto |
| 最小觸控 | 44pt | 48dp |
| 返回 | 邊緣滑動 | 系統返回鍵 |
| 表單 | 底部表單 | 對話框 / 表單 |
| 圖示 | SF Symbols | Material Icons |
6. 行動 UX 心理學（非選擇性）
Fitts 定律（觸控現實）
- 手指 ≠ 游標
- 精準度低
- 可及範圍比精確度更重要
規則：
- 主要行動呼籲按鈕應位於拇指區域
- 破壞性操作應遠離拇指區域
- 不假設有懸浮效果
7. 效能原則
React Native（必要模式）
const Row = React.memo(({ item }) => (
<View><Text>{item.title}</Text></View>
));
const renderItem = useCallback(
({ item }) => <Row item={item} />,
[]
);
<FlatList
data={items}
renderItem={renderItem}
keyExtractor={(i) => i.id}
getItemLayout={(_, i) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * i,
index: i,
})}
/>
Flutter（必要模式）
class Item extends StatelessWidget {
const Item({super.key});
@override
Widget build(BuildContext context) {
return const Text('Static');
}
}
- 盡可能使用
const - 僅針對性重建
8. 強制行動檢查點
在撰寫任何程式碼之前，你必須完成以下內容：
🧠 行動檢查點
平台： ___________
框架： ___________
已讀檔案： ___________
我將應用的 3 項原則：
1.
2.
3.
我將避免的反模式：
1.
2.
❌ 無法完成 → 回去閱讀。
9. 框架決策樹（權威版）
需要 OTA 更新 + 網頁團隊 → React Native + Expo
高效能 UI → Flutter
僅 iOS → SwiftUI
僅 Android → Compose
未附理由不得爭論。
10. 發布就緒檢查清單
出貨前
- [ ] 觸控目標 ≥ 44–48px
- [ ] 離線處理完成
- [ ] 使用安全儲存
- [ ] 列表已最佳化
- [ ] 日誌已移除
- [ ] 已在低階裝置上測試
- [ ] 無障礙標籤已加入
- [ ] MFRI ≥ 3
11. 相關技能
- frontend-design – 視覺系統與元件
- frontend-dev-guidelines – RN/TS 架構
- backend-dev-guidelines – 行動安全 API
- error-tracking – 崩潰與效能遙測
最終法則：
行動使用者容易分心、被打斷且沒耐心——經常單手操作，網路不佳且電量不足。
為此現實而設計，否則你的應用程式將悄然失敗。
使用時機
此技能適用於執行概述中所述的工作流程或動作。
限制
- 僅在任務明確符合上述範圍時使用此技能。
- 請勿將輸出視為環境特定驗證、測試或專家審查的替代品。
- 若缺少必要的輸入、權限、安全邊界或成功標準，請停止並要求釐清。
