[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-mobile-app-production-14-design-choices-zh":3,"article-related-mobile-app-production-14-design-choices-zh":33,"series-industry-11bd0e30-051c-487f-9c83-3a37dba9326c":76},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":24,"views":29,"created_at":30,"published_at":31,"topic_cluster_id":32},"11bd0e30-051c-487f-9c83-3a37dba9326c","mobile-app-production-14-design-choices-zh","手機 App 上線靠這 14 個設計","\u003Cp data-speakable=\"summary\">手機 App 要在正式環境維持速度與穩定，靠的是模組化、BFF、版本控管、Feature Flag 和分批發布。\u003C\u002Fp>\u003Cp>手機 App \u003Ca href=\"\u002Fnews\u002Fanthropic-right-alarm-recursive-self-improvement-zh\">真正\u003C\u002Fa>難的，不是寫出第一版。難的是上線後還能活得好。這篇整理了 14 個設計點，從程式碼切分到發布控管，都很實戰。\u003C\u002Fp>\u003Cp>重點很直接。你不是只在做 App。你是在做一套能持續更新的系統。這套系統一旦亂掉，編譯時間、\u003Ca href=\"\u002Ftag\u002Fapi\">API\u003C\u002Fa> 耦合、Crash 率都會一起炸。\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>概念\u003C\u002Fth>\u003Cth>解決什麼\u003C\u002Fth>\u003Cth>對手機團隊的意義\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>14 個設計點\u003C\u002Ftd>\u003Ctd>上線後的建置與維運\u003C\u002Ftd>\u003Ctd>涵蓋開發、發布、監控\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>3 天審核期\u003C\u002Ftd>\u003Ctd>App Store 發布延遲\u003C\u002Ftd>\u003Ctd>Feature Flag 可先藏功能\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>5 個後端服務\u003C\u002Ftd>\u003Ctd>單一畫面資料聚合\u003C\u002Ftd>\u003Ctd>BFF 可減少 client 連線數\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>1 個小流量先發\u003C\u002Ftd>\u003Ctd>降低爆炸半徑\u003C\u002Ftd>\u003Ctd>分批發布先看 Crash 率\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>模組化不是漂亮，是救命\u003C\u002Fh2>\u003Cp>第一個重點是模組化架構。講白了，就是把 App 拆成多個功能模組。登入、首頁、購物車、設定，各管各的，不要全部擠在同一坨。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782267485547-e546.png\" alt=\"手機 App 上線靠這 14 個設計\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這種做法最實際的好處，是編譯速度會好很多。大型單體專案一改就重編，等個幾分鐘很常見。模組切開後，只動到哪一塊，就只重編那一塊。\u003C\u002Fp>\u003Cp>但模組化不是把檔案切小就算數。模組邊界要定清楚。共用元件、導覽列、分析 SDK、設計系統，通常要放在共用核心。否則依賴會越長越亂，最後變成循環引用地獄。\u003C\u002Fp>\u003Cul>\u003Cli>功能模組可分成登入、首頁、交易、設定。\u003C\u002Fli>\u003Cli>共用核心常放 analytics、navigation、UI 基礎元件。\u003C\u002Fli>\u003Cli>依賴圖工具能提早抓出循環引用。\u003C\u002Fli>\u003Cli>大型 monolith 一旦長歪，後面再拆很痛。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>BFF 讓手機少做白工\u003C\u002Fh2>\u003Cp>第二個重點是 \u003Ca href=\"https:\u002F\u002Fmartinfowler.com\u002Fbliki\u002FBackendForFrontend.html\" target=\"_blank\" rel=\"noopener\">Backend for Frontend\u003C\u002Fa>，也就是 BFF。這個模式很適合手機。因為一個畫面常常要打 3 到 5 個後端服務，像是個人資料、推薦內容、通知數量、訂單狀態。\u003C\u002Fp>\u003Cp>如果 App 直接去打每個服務，延遲會疊上去。網路請求多，電量也會多花。手機網路本來就不穩，這種 fan-out 玩法很容易讓使用者覺得「怎麼這麼慢」。\u003C\u002Fp>\u003Cp>BFF 的做法很簡單。App 只打一次。BFF 在後面把資料整理好，再回給前端。這樣 client 端比較乾淨，後端也能針對不同裝置做不同回應。\u003C\u002Fp>\u003Cblockquote>\u003Cp>“The BFF pattern is a backend specifically tailored to the needs of a frontend.”\u003C\u002Fp>\u003Cfooter>Sam Newman, \u003Ccite>Building Microservices\u003C\u002Fcite>\u003C\u002Ffooter>\u003C\u002Fblockquote>\u003Cp>這句話很到位。BFF 不是多一層裝飾。它是把前端需求和後端服務切開。像 \u003Ca href=\"https:\u002F\u002Fwww.netflix.com\" target=\"_blank\" rel=\"noopener\">Netflix\u003C\u002Fa> 這種多裝置產品，就很\u003Ca href=\"\u002Fnews\u002Fanthropic-export-ban-ai-regulation-clear-rules-zh\">需要\u003C\u002Fa>這種分層。\u003C\u002Fp>\u003Cp>但也別亂用。BFF 應該做聚合和轉換，不該自己長出一套商業邏輯。否則你只是把複雜度從 App 搬到另一台伺服器。\u003C\u002Fp>\u003Cul>\u003Cli>一個畫面可能對到 5 個 backend service。\u003C\u002Fli>\u003Cli>有 BFF 後，client 只送 1 次 request。\u003C\u002Fli>\u003Cli>payload 更小，通常也比較省電。\u003C\u002Fli>\u003Cli>不同裝置可回不同資料形狀。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>版本控管和 Flag 決定你會不會翻車\u003C\u002Fh2>\u003Cp>手機和 Web 最大的差別之一，就是使用者不會照你節奏更新。有人一天就升版，有人拖一個月。這代表後端要同時支援多個版本，不能今天改完明天就砍舊欄位。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782267482293-gnn8.png\" alt=\"手機 App 上線靠這 14 個設計\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這也是為什麼 API versioning 很\u003Ca href=\"\u002Fnews\u002Fprime-day-pc-hardware-discounts-matter-most-zh\">重要\u003C\u002Fa>。像 \u003Ccode>\u002Fv1\u002Fusers\u003C\u002Fcode> 和 \u003Ccode>\u002Fv2\u002Fusers\u003C\u002Fcode> 這種寫法，雖然看起來土，但很實用。舊 App 還能活，新 App 也能慢慢切過去。\u003C\u002Fp>\u003Cp>比較成熟的做法，是先加新欄位，再讓客戶端遷移，最後才清掉舊欄位。這種 Expand-Contract 節奏，比直接硬改安全太多。\u003Ca href=\"https:\u002F\u002Fstripe.com\" target=\"_blank\" rel=\"noopener\">Stripe\u003C\u002Fa> 在 API 管理上就是很好的參考。\u003C\u002Fp>\u003Cp>Feature Flag 和 remote config 則是另一種保命工具。你可以先把功能藏起來，上線後再遠端打開。這樣就算 App Store 審核要 3 天，你還是能先把程式送出去。\u003C\u002Fp>\u003Cp>這招很像留後門，但不是壞事。真出問題時，你可以直接關掉功能，不用等下一版發佈。對產品團隊來說，這比祈禱使用者快更新實際多了。\u003C\u002Fp>\u003Cul>\u003Cli>API 常見版本例子是 \u003Ccode>\u002Fv1\u002Fusers\u003C\u002Fcode> 和 \u003Ccode>\u002Fv2\u002Fusers\u003C\u002Fcode>。\u003C\u002Fli>\u003Cli>App Store 審核可能要 3 天。\u003C\u002Fli>\u003Cli>Feature Flag 可針對特定使用者開關。\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Ffirebase.google.com\u002Fproducts\u002Fremote-config\" target=\"_blank\" rel=\"noopener\">Firebase Remote Config\u003C\u002Fa> 常用來做遠端設定。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>分批發布和監控，才是最後防線\u003C\u002Fh2>\u003Cp>設計做得再漂亮，最後還是要看上線後表現。這就是分批發布的重要性。先放 1% 或小流量，觀察 Crash 率、效能、錯誤回報，再決定要不要擴大。\u003C\u002Fp>\u003Cp>這比一次全量推送安全很多。因為手機環境太雜了。機型、作業系統、記憶體、網路品質，每個都可能讓同一版程式出事。你不先縮小範圍，出包時就會整片倒。\u003C\u002Fp>\u003Cp>Crash-free rate 也是很實際的指標。它就是告訴你，有多少次使用沒有閃退。這種數字比「感覺穩定」有用太多。\u003Ca href=\"https:\u002F\u002Ffirebase.google.com\u002Fproducts\u002Fcrashlytics\" target=\"_blank\" rel=\"noopener\">Firebase Crashlytics\u003C\u002Fa> 就是很多團隊會用的工具。\u003C\u002Fp>\u003Cp>另外，graceful degradation 也很重要。某個服務掛了，不代表整個 App 都要死。至少要讓使用者還能看內容、登入、或完成一部分操作。\u003C\u002Fp>\u003Cp>這裡還牽涉到 accessibility、localisation、permissions、geo usage。手機產品不是只給同一群人用。不同語言、不同地區、不同權限狀態，都要考慮進去。\u003C\u002Fp>\u003Cul>\u003Cli>Crash-free rate 可當作 SLI 追蹤。\u003C\u002Fli>\u003Cli>分批發布能縮小爆炸半徑。\u003C\u002Fli>\u003Cli>graceful degradation 可保留基本功能。\u003C\u002Fli>\u003Cli>Crashlytics 很常拿來做閃退分析。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>這 14 項其實在講同一件事\u003C\u002Fh2>\u003Cp>看完這份整理，你會發現主題不是「怎麼寫 App」。主題是「怎麼讓 App 上線後不要亂掉」。模組化、BFF、版本控管、Flag、分批發布，全部都在處理同一件事：降低變更風險。\u003C\u002Fp>\u003Cp>我覺得這才是手機產品最現實的地方。你不只要寫功能，還要面對審核、舊版使用者、弱網路、低階機、Crash、回滾。任何一個環節出問題，使用者都會直接罵你。\u003C\u002Fp>\u003Cp>所以如果你現在在做手機 App，先別急著追新框架。先看你的架構能不能支撐版本並存、功能開關、和分批發布。這三個過不了，後面只會越修越累。\u003C\u002Fp>\u003Cp>下一步很簡單。去檢查你們的 App，有沒有至少做到：模組切分、API versioning、Feature Flag、Crash 監控、和 staged rollout。少一個，風險就多一個。\u003C\u002Fp>","手機 App 要在正式環境維持速度與穩定，靠的是模組化、BFF、版本控管、Feature Flag 和分批發布。","newsletter.systemdesign.one","https:\u002F\u002Fnewsletter.systemdesign.one\u002Fp\u002Fsystem-design-mobile",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782267485547-e546.png","industry","zh","02eda58c-984d-45d3-88cd-e3e9554cf28c",[17,18,19,20,21,22,23],"mobile app","system design","BFF","feature flags","staged rollout","modular architecture","crash-free rate",[25,26,27,28],"手機 App 上線後的重點，是降低變更風險，不是只把功能做完。","BFF、版本控管、Feature Flag 和分批發布，能明顯減少翻車機率。","模組化架構能縮短編譯時間，也能讓大型 App 比較好維護。","Crash-free rate 和 staged rollout 是手機團隊很實用的防線。",0,"2026-06-24T02:17:34.627279+00:00","2026-06-24T02:17:34.618+00:00","5ec48446-5a5a-4f34-82b2-faec57531d69",{"tags":34,"relatedLang":35,"relatedPosts":39},[],{"id":15,"slug":36,"title":37,"language":38},"mobile-app-production-14-design-choices-en","Mobile app production depends on 14 design choices","en",[40,46,52,58,64,70],{"id":41,"slug":42,"title":43,"cover_image":44,"image_url":44,"created_at":45,"category":13},"09b6ba70-3a14-4860-b63c-0609e0a8b577","project-solara-agent-first-devices-zh","Project Solara 想把設備變成代理人平台","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782280979543-2mnn.png","2026-06-24T06:02:32.125606+00:00",{"id":47,"slug":48,"title":49,"cover_image":50,"image_url":50,"created_at":51,"category":13},"15ce918c-ef94-4d6e-9c40-934a5cadd099","gemini-live-memory-galaxy-phones-tablets-zh","Gemini Live 在 Galaxy 上更懂你","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782279171191-kk0q.png","2026-06-24T05:32:23.341576+00:00",{"id":53,"slug":54,"title":55,"cover_image":56,"image_url":56,"created_at":57,"category":13},"3306beb9-6f22-4ab8-a21c-c278c3e23c6f","un-open-source-week-2026-ai-priorities-zh","UN 開源週 2026 鎖定 4 個 AI 重點","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782276470042-d5yb.png","2026-06-24T04:47:22.861497+00:00",{"id":59,"slug":60,"title":61,"cover_image":62,"image_url":62,"created_at":63,"category":13},"aaf32293-4bff-4709-9d82-8120307280cf","prime-day-pc-hardware-discounts-matter-most-zh","Prime Day 證明：硬體折扣在漲價時代最重要","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782266577487-jfk3.png","2026-06-24T02:02:29.217368+00:00",{"id":65,"slug":66,"title":67,"cover_image":68,"image_url":68,"created_at":69,"category":13},"4efea5b6-72f5-462b-95e0-396b892ac9ff","anthropic-export-ban-ai-regulation-clear-rules-zh","Anthropic 的出口禁令證明：AI 需要明確規則，不要臨時式打擊","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782264767399-px8a.png","2026-06-24T01:32:21.10655+00:00",{"id":71,"slug":72,"title":73,"cover_image":74,"image_url":74,"created_at":75,"category":13},"197dd50b-fb36-4a24-b8b0-31d61e3bc982","five-eyes-ai-cyber-risk-board-level-emergency-zh","五眼聯盟說得對：AI 網攻已是董事會級緊急事件","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782262973725-eglt.png","2026-06-24T01:02:23.531088+00:00",[77,82,87,92,97,102,107,112,117,122],{"id":78,"slug":79,"title":80,"created_at":81},"ee073da7-28b3-4752-a319-5a501459fb87","ai-in-2026-what-actually-matters-now-zh","2026 AI 真正重要的事","2026-03-26T07:09:12.008134+00:00",{"id":83,"slug":84,"title":85,"created_at":86},"83bd1795-8548-44c9-9a7e-de50a0923f71","trump-ai-framework-power-speech-state-preemption-zh","川普 AI 框架瞄準電力、言論與州權","2026-03-26T07:12:18.695466+00:00",{"id":88,"slug":89,"title":90,"created_at":91},"ea6be18b-c903-4e54-97b7-5f7447a612e0","nvidia-gtc-2026-big-ai-announcements-zh","NVIDIA GTC 2026 重點拆解","2026-03-26T07:14:26.62638+00:00",{"id":93,"slug":94,"title":95,"created_at":96},"4bcec76f-4c36-4daa-909f-54cd702f7c93","claude-users-spreading-out-and-getting-better-zh","Claude 用戶更分散，也更會用","2026-03-26T07:22:52.325888+00:00",{"id":98,"slug":99,"title":100,"created_at":101},"bd903b15-2473-4178-9789-b7557816e535","openclaw-raises-hard-question-for-ai-models-zh","OpenClaw 逼問 AI 模型價值","2026-03-26T07:24:54.707486+00:00",{"id":103,"slug":104,"title":105,"created_at":106},"eeac6b9e-ad9d-4831-8eec-8bba3f9bca6a","gap-google-gemini-checkout-fashion-search-zh","Gap 把結帳搬進 Gemini","2026-03-26T07:28:23.937768+00:00",{"id":108,"slug":109,"title":110,"created_at":111},"0740e53f-605d-4d57-8601-c10beb126f3c","google-pushes-gemini-transition-to-march-2026-zh","Google 把 Gemini 轉換延到 2026 年 3…","2026-03-26T07:30:12.825269+00:00",{"id":113,"slug":114,"title":115,"created_at":116},"e660d801-2421-4529-8fa9-86b82b066990","metas-llama-4-benchmark-scandal-gets-worse-zh","Meta Llama 4 分數風波又擴大","2026-03-26T07:34:21.156421+00:00",{"id":118,"slug":119,"title":120,"created_at":121},"183f9e7c-e143-40bb-a6d5-67ba84a3a8bc","accenture-mistral-ai-sovereign-enterprise-deal-zh","Accenture 攜手 Mistral AI 賣主權 AI","2026-03-26T07:38:14.818906+00:00",{"id":123,"slug":124,"title":125,"created_at":126},"191d9b1b-768a-478c-978c-dd7431a38149","mistral-ai-faces-its-hardest-year-yet-zh","Mistral AI 迎來最硬的一年","2026-03-26T07:40:23.716374+00:00"]