{"allowContribute":false,"item":{"artifactHtml":"\u003cstyle\u003e:root{--paper:#F6F8FA;--ink:#16202A;--ink-2:#4D5B68;--accent:#0B6E99;--soft:#E3EFF5;--hair:#D6E0E8;--warn:#8A5A00;--warnsoft:#FBF0D9} :root[data-theme=\"dark\"]{--paper:#11181E;--ink:#E8EEF2;--ink-2:#A9B7C2;--accent:#6FC3E8;--soft:#14242E;--hair:#2A3944;--warn:#E8B84B;--warnsoft:#2A230F} .doc{background:var(--paper);color:var(--ink);padding:28px 30px;font:16px/1.75 -apple-system,\"PingFang TC\",\"Microsoft JhengHei\",sans-serif} .eyebrow{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.16em;color:var(--accent)} h1{font-size:28px;line-height:1.25;letter-spacing:-.01em;margin:12px 0 0} .lede{color:var(--ink-2);max-width:68ch;margin:10px 0 0} h2{font-size:20px;margin:28px 0 8px} h3{font-size:16px;margin:18px 0 6px} p,li{color:var(--ink);max-width:72ch} p.sub{color:var(--ink-2)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:18px 0} .stat{background:var(--soft);border-radius:8px;padding:12px 14px} .stat .k{font-size:12px;color:var(--accent)} .stat .v{font-size:24px;font-weight:700;margin-top:4px} .stat .n{font-size:12px;color:var(--ink-2);margin-top:2px} .pattern{background:var(--soft);border-radius:8px;padding:14px 16px;margin:14px 0} .pattern h3{margin:0 0 6px} .pattern p{margin:6px 0} .tag{display:inline-block;font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:1px 8px;margin-right:8px} .src{font-size:13px;color:var(--ink-2);word-break:break-all} .src a{color:var(--accent)} .callout{display:flex;gap:13px;padding:14px 16px;background:var(--warnsoft);border-radius:6px;margin:18px 0} .callout .tag{flex:none;border:none;padding-top:3px;color:var(--warn)} ol.sources li{margin:10px 0} ol.sources .d{color:var(--ink-2);font-size:13px} @media (max-width:640px){.doc{padding:20px 18px}h1{font-size:23px}}\u003c/style\u003e\u003cdiv class=\"doc\"\u003e\u003cheader\u003e\u003cdiv class=\"eyebrow\"\u003e2026-09 · MOBILE UI TREND SCOUT · FIRST ROUND\u003c/div\u003e\u003ch1\u003eSeptember UI Trend \u0026 Extension Ideas\u003c/h1\u003e\u003cp class=\"lede\"\u003e掃描區間：過去 30 天（2026-08-22 ~ 2026-09-21）。全部搜尋皆帶時間篩選（tbs=qdr:m），每筆來源皆驗證 datePublished，超過 30 天者一律排除，未硬湊名額。\u003c/p\u003e\u003c/header\u003e\u003csection data-cube=\"stats\" class=\"stats\"\u003e\u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e掃描區間\u003c/div\u003e\u003cdiv class=\"v\"\u003e30 天\u003c/div\u003e\u003cdiv class=\"n\"\u003e2026-08-22 ~ 09-21\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e採用來源\u003c/div\u003e\u003cdiv class=\"v\"\u003e6\u003c/div\u003e\u003cdiv class=\"n\"\u003e皆驗證 datePublished\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e整理模式\u003c/div\u003e\u003cdiv class=\"v\"\u003e6\u003c/div\u003e\u003cdiv class=\"n\"\u003e皆附延伸建議\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e排除舊文\u003c/div\u003e\u003cdiv class=\"v\"\u003e8+\u003c/div\u003e\u003cdiv class=\"n\"\u003e逾 30 天不採用\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e\u003ch2\u003e模式與延伸建議\u003c/h2\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP1\u003c/span\u003eMaterial 3 Expressive：加粗形狀＋按壓回彈動效\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003eGoogle 最新演進的 Material 3 Expressive 強調更大的形狀、更重的色彩與觸摸有反應的動效；Pixel / Gmail 新畫面上按鈕看起來更厚，按下時帶一點彈跳。它不是 Material 4，而是既有 Material 3 以色彩、形狀、動效讓視線先落定的擴充。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e這是 Android 側最具權威的方向，元件級改造成本低（按鈕、開關、進度指示先行），能立刻讓 App 看起來跟上 2026 的 Android。建議先從主要 CTA 與按壓回饋動效切入，再鋪開到形狀 scale 與動態色彩。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：Yosuke 文章（見來源 2）＋ Hexbee 側寫作佐證（見來源 6）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP2\u003c/span\u003eLiquid Glass 真實落地：整套系統元件換膚\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003ePlanning Center Services iOS 6.11.0 全面擁抱 Apple 的 Liquid Glass：導覽列、按鈕、漸層與透明背景、分頁列、迷你播放器、圖示與子選單一起換上半透明折射質感，並明示 Android 版隨後跟進。這是第三方 App 如何跟進系統級玻璃語言的現成範本。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e證明了玻璃語言不是只做一兩顆按鈕，而是導覽＋分頁＋播放器等系統鉻整層換。建議檢視 App 的導覽列 / Tab bar / 播放器列，評估一輪半透明＋模糊層級的系統化升級，而非單點裝飾；同時注意對比度與可讀性開關。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：Planning Center Changelog（見來源 3）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP3\u003c/span\u003eBento Grid 成為功能區塊預設版式\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e以 grid-template-areas 排出大小不一的便當盒式區塊，正成為功能展示區的預設模式；最佳格數約 6–9 格，超過約 12 格或內容高度不可預測時會淪為雜亂的牆。行動端重點是原生 CSS Grid 重排，而非複製一套 DOM。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e資訊密度與層級感一次到位，適合首頁、功能總覽、儀表板類畫面。建議挑一屏資訊密集頁做 Bento 重排實驗：大卡放旗艦功能、小卡收次要入口，手機寬度下驗證重排順序與閱讀動線。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：ThePlusAddons（見來源 1）＋ Hexbee 側寫作佐證（見來源 6）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP4\u003c/span\u003eGlassmorphism 的成熟用法：只用在短介面\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e毛玻璃（backdrop-filter）在 2026 仍成熟，但用法收斂：最適合 sticky header、卡片與短標籤；不適合長篇正文，因為半透明背景難以穩定通過 WCAG 對比檢查。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e給了明確的可以用在哪、不能用在哪邊界，可直接轉成設計規範：玻璃只進導覽層與浮層標籤，內文區維持實色保證可讀性。建議把這條寫進設計系統的 usage guideline，避免日後每處重吵一次。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：ThePlusAddons（見來源 1）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP5\u003c/span\u003e摺疊機：不要拉伸，緊湊視圖維持手機導覽\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e摺疊機指引的核心是不要把手機版硬拉寬：緊湊視圖沿用手機導覽模式（底部導覽、導覽堆疊、返回），常用操作保持在拇指可及範圍；展開後才給雙欄等寬版佈局。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e這是低成本高覆蓋的相容性策略：不需為摺疊機重做一套 App，只要守住緊湊＝手機模式＋拇指區、展開＝加欄位的分界。建議下一輪設計評審加一項摺疊檢查：展開寬度下是否自動升級為雙欄，而非留白拉伸。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：UX Collective 摺疊機指引（見來源 4，內容細節引自搜尋摘要，fetch 僅取回日期結構）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP6\u003c/span\u003e即時內容 / Live updates 帶來即時感\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e即時更新與即時數據流被點名為 2026 顯著趨勢：live updates 與 instant data feeds 塑造新的即時體驗層次。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e適合有動態資料的 App（訂單、進度、名額、比分、行情）：在關鍵卡片上加正在更新狀態與增量動畫，感知新鮮度會大幅提升。建議選一處資料卡做 live 化試點，注意更新頻率與電量 / 流量平衡。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：MuseMind 趨勢總覽（見來源 5，細節引自搜尋摘要，fetch 僅取回日期結構）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"callout\"\u003e\u003cspan class=\"tag\"\u003e誠實聲明\u003c/span\u003e\u003cdiv\u003e來源 4、5、6 的頁面抓取僅能驗證日期結構，趨勢細節以搜尋摘要為準，已在上方逐項標註。另有 Claymorphism（柔軟黏土風，適合 onboarding / fintech / 兒童產品，不適合密集表單）來自來源 1，本輪列為備選、未列入主推。\u003c/div\u003e\u003c/div\u003e\u003ch2\u003e來源清單（含驗證日期）\u003c/h2\u003e\u003cp class=\"sub\"\u003e每筆 URL 獨立一行，日期為驗證到的 datePublished（以 2026-09-21 為準皆在 30 天內）。\u003c/p\u003e\u003col class=\"sources\"\u003e\u003cli\u003e\u003ca href=\"https://theplusaddons.com/blog/web-design-trends-2026/\"\u003ehttps://theplusaddons.com/blog/web-design-trends-2026/\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-21（當天）· 玻璃擬態 / Bento / Claymorphism\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://yosuke4061.com/new_toppage/briefings/brief071_en/\"\u003ehttps://yosuke4061.com/new_toppage/briefings/brief071_en/\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-09（12 天前）· Material 3 Expressive 解析\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\"\u003ehttps://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-08（13 天前）· Services iOS 6.11.0 Liquid Glass 落地\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\"\u003ehttps://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-17（4 天前）· 摺疊機 UX 指引\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://musemind.agency/blog/ui-design-trends\"\u003ehttps://musemind.agency/blog/ui-design-trends\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-08-23（29 天前）· 23 項 UI 趨勢總覽（含即時內容）\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\"\u003ehttps://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-08-28（24 天前）· 行動 App UI/UX 趨勢（含 Bento / 手勢導覽）\u003c/div\u003e\u003c/li\u003e\u003c/ol\u003e\u003ch2\u003e排除紀錄（誠實回報）\u003c/h2\u003e\u003cp class=\"sub\"\u003e以下來源因 datePublished 超過 30 天，本輪一律排除，未放寬：Fuselab（2024-11-29）、Designmodo（2024-11-25）、Fireart（2026-04-21）、Minimum Code（2026-06-18）、Capgo（2025-03-24）、Orbix 跨平台（2025-09-19）與 Figma 指南（2025-08-19）、Unico（2025-04-14）、DesignSystems.one（2026-01-15）、CompareAndRecycle（2025-10-01）、DesignStudioUIUX（原文 2023-05-22）。另有數篇（Compose Material3、PCMag、Purchasely、RipenApps、CoherentLab、SetProduct、iF）因抓取失敗或無可驗證日期而不採用。\u003c/p\u003e\u003ch2\u003e下一步\u003c/h2\u003e\u003cp\u003e本輪主推 P1（M3 Expressive 按壓動效）、P2（Liquid Glass 系統鉻升級）、P3（Bento 重排實驗）交給 App UI/UX Designer 評估是否納入本輪設計；P4 建議直接寫進設計規範；P5 列入評審檢查項；P6 選一處資料卡試點。\u003c/p\u003e\u003c/div\u003e","content":"\u003cdiv class=\"doc\"\u003e\u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e掃描區間\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e30 天\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e2026-08-22 ~ 09-21\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e採用來源\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e6\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e皆驗證 datePublished\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e整理模式\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e6\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e皆附延伸建議\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e排除舊文\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e8+\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e逾 30 天不採用\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ch2\u003e模式與延伸建議\u003c/h2\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP1\u003c/span\u003eMaterial 3 Expressive：加粗形狀＋按壓回彈動效\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003eGoogle 最新演進的 Material 3 Expressive 強調更大的形狀、更重的色彩與觸摸有反應的動效；Pixel / Gmail 新畫面上按鈕看起來更厚，按下時帶一點彈跳。它不是 Material 4，而是既有 Material 3 以色彩、形狀、動效讓視線先落定的擴充。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e這是 Android 側最具權威的方向，元件級改造成本低（按鈕、開關、進度指示先行），能立刻讓 App 看起來跟上 2026 的 Android。建議先從主要 CTA 與按壓回饋動效切入，再鋪開到形狀 scale 與動態色彩。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：Yosuke 文章（見來源 2）＋ Hexbee 側寫作佐證（見來源 6）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP2\u003c/span\u003eLiquid Glass 真實落地：整套系統元件換膚\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003ePlanning Center Services iOS 6.11.0 全面擁抱 Apple 的 Liquid Glass：導覽列、按鈕、漸層與透明背景、分頁列、迷你播放器、圖示與子選單一起換上半透明折射質感，並明示 Android 版隨後跟進。這是第三方 App 如何跟進系統級玻璃語言的現成範本。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e證明了玻璃語言不是只做一兩顆按鈕，而是導覽＋分頁＋播放器等系統鉻整層換。建議檢視 App 的導覽列 / Tab bar / 播放器列，評估一輪半透明＋模糊層級的系統化升級，而非單點裝飾；同時注意對比度與可讀性開關。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：Planning Center Changelog（見來源 3）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP3\u003c/span\u003eBento Grid 成為功能區塊預設版式\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e以 grid-template-areas 排出大小不一的便當盒式區塊，正成為功能展示區的預設模式；最佳格數約 6–9 格，超過約 12 格或內容高度不可預測時會淪為雜亂的牆。行動端重點是原生 CSS Grid 重排，而非複製一套 DOM。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e資訊密度與層級感一次到位，適合首頁、功能總覽、儀表板類畫面。建議挑一屏資訊密集頁做 Bento 重排實驗：大卡放旗艦功能、小卡收次要入口，手機寬度下驗證重排順序與閱讀動線。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：ThePlusAddons（見來源 1）＋ Hexbee 側寫作佐證（見來源 6）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP4\u003c/span\u003eGlassmorphism 的成熟用法：只用在短介面\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e毛玻璃（backdrop-filter）在 2026 仍成熟，但用法收斂：最適合 sticky header、卡片與短標籤；不適合長篇正文，因為半透明背景難以穩定通過 WCAG 對比檢查。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e給了明確的可以用在哪、不能用在哪邊界，可直接轉成設計規範：玻璃只進導覽層與浮層標籤，內文區維持實色保證可讀性。建議把這條寫進設計系統的 usage guideline，避免日後每處重吵一次。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：ThePlusAddons（見來源 1）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP5\u003c/span\u003e摺疊機：不要拉伸，緊湊視圖維持手機導覽\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e摺疊機指引的核心是不要把手機版硬拉寬：緊湊視圖沿用手機導覽模式（底部導覽、導覽堆疊、返回），常用操作保持在拇指可及範圍；展開後才給雙欄等寬版佈局。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e這是低成本高覆蓋的相容性策略：不需為摺疊機重做一套 App，只要守住緊湊＝手機模式＋拇指區、展開＝加欄位的分界。建議下一輪設計評審加一項摺疊檢查：展開寬度下是否自動升級為雙欄，而非留白拉伸。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：UX Collective 摺疊機指引（見來源 4，內容細節引自搜尋摘要，fetch 僅取回日期結構）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP6\u003c/span\u003e即時內容 / Live updates 帶來即時感\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e即時更新與即時數據流被點名為 2026 顯著趨勢：live updates 與 instant data feeds 塑造新的即時體驗層次。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e適合有動態資料的 App（訂單、進度、名額、比分、行情）：在關鍵卡片上加正在更新狀態與增量動畫，感知新鮮度會大幅提升。建議選一處資料卡做 live 化試點，注意更新頻率與電量 / 流量平衡。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：MuseMind 趨勢總覽（見來源 5，細節引自搜尋摘要，fetch 僅取回日期結構）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"callout\"\u003e\u003cspan class=\"tag\"\u003e誠實聲明\u003c/span\u003e\u003cdiv\u003e來源 4、5、6 的頁面抓取僅能驗證日期結構，趨勢細節以搜尋摘要為準，已在上方逐項標註。另有 Claymorphism（柔軟黏土風，適合 onboarding / fintech / 兒童產品，不適合密集表單）來自來源 1，本輪列為備選、未列入主推。\u003c/div\u003e\u003c/div\u003e\u003ch2\u003e來源清單（含驗證日期）\u003c/h2\u003e\u003cp class=\"sub\"\u003e每筆 URL 獨立一行，日期為驗證到的 datePublished（以 2026-09-21 為準皆在 30 天內）。\u003c/p\u003e\u003col class=\"sources\"\u003e\u003cli\u003e\u003ca href=\"https://theplusaddons.com/blog/web-design-trends-2026/\"\u003ehttps://theplusaddons.com/blog/web-design-trends-2026/\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-21（當天）· 玻璃擬態 / Bento / Claymorphism\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://yosuke4061.com/new_toppage/briefings/brief071_en/\"\u003ehttps://yosuke4061.com/new_toppage/briefings/brief071_en/\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-09（12 天前）· Material 3 Expressive 解析\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\"\u003ehttps://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-08（13 天前）· Services iOS 6.11.0 Liquid Glass 落地\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\"\u003ehttps://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-17（4 天前）· 摺疊機 UX 指引\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://musemind.agency/blog/ui-design-trends\"\u003ehttps://musemind.agency/blog/ui-design-trends\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-08-23（29 天前）· 23 項 UI 趨勢總覽（含即時內容）\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\"\u003ehttps://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-08-28（24 天前）· 行動 App UI/UX 趨勢（含 Bento / 手勢導覽）\u003c/div\u003e\u003c/li\u003e\u003c/ol\u003e\u003ch2\u003e排除紀錄（誠實回報）\u003c/h2\u003e\u003cp class=\"sub\"\u003e以下來源因 datePublished 超過 30 天，本輪一律排除，未放寬：Fuselab（2024-11-29）、Designmodo（2024-11-25）、Fireart（2026-04-21）、Minimum Code（2026-06-18）、Capgo（2025-03-24）、Orbix 跨平台（2025-09-19）與 Figma 指南（2025-08-19）、Unico（2025-04-14）、DesignSystems.one（2026-01-15）、CompareAndRecycle（2025-10-01）、DesignStudioUIUX（原文 2023-05-22）。另有數篇（Compose Material3、PCMag、Purchasely、RipenApps、CoherentLab、SetProduct、iF）因抓取失敗或無可驗證日期而不採用。\u003c/p\u003e\u003ch2\u003e下一步\u003c/h2\u003e\u003cp\u003e本輪主推 P1（M3 Expressive 按壓動效）、P2（Liquid Glass 系統鉻升級）、P3（Bento 重排實驗）交給 App UI/UX Designer 評估是否納入本輪設計；P4 建議直接寫進設計規範；P5 列入評審檢查項；P6 選一處資料卡試點。\u003c/p\u003e\u003c/div\u003e","createdAt":1790002337961,"deletedAt":null,"displayMode":"artifact","id":"b5594b5c4e8dd4e455ac6a1a","isNew":false,"isPublic":true,"itemType":"NOTE","name":"September UI Trend \u0026 Extension Ideas","parents":{"be3c70dead6ba9387c599754":1790002337961},"preParentID":null,"updatedAt":1790049953572,"updatedBy":{"userId":"6ab1415200264dd98fffdc","userName":"宋益維"},"version":5,"websiteContent":"[{\"originUrl\":\"https://theplusaddons.com/blog/web-design-trends-2026/\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://yosuke4061.com/new_toppage/briefings/brief071_en/\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://musemind.agency/blog/ui-design-trends\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\",\"title\":null,\"content\":null,\"imageUrl\":null}]"},"ownerName":"宋益維","subtree":[{"artifactHtml":"\u003cstyle\u003e:root{--paper:#F6F8FA;--ink:#16202A;--ink-2:#4D5B68;--accent:#0B6E99;--soft:#E3EFF5;--hair:#D6E0E8;--warn:#8A5A00;--warnsoft:#FBF0D9} :root[data-theme=\"dark\"]{--paper:#11181E;--ink:#E8EEF2;--ink-2:#A9B7C2;--accent:#6FC3E8;--soft:#14242E;--hair:#2A3944;--warn:#E8B84B;--warnsoft:#2A230F} .doc{background:var(--paper);color:var(--ink);padding:28px 30px;font:16px/1.75 -apple-system,\"PingFang TC\",\"Microsoft JhengHei\",sans-serif} .eyebrow{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.16em;color:var(--accent)} h1{font-size:28px;line-height:1.25;letter-spacing:-.01em;margin:12px 0 0} .lede{color:var(--ink-2);max-width:68ch;margin:10px 0 0} h2{font-size:20px;margin:28px 0 8px} h3{font-size:16px;margin:18px 0 6px} p,li{color:var(--ink);max-width:72ch} p.sub{color:var(--ink-2)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:18px 0} .stat{background:var(--soft);border-radius:8px;padding:12px 14px} .stat .k{font-size:12px;color:var(--accent)} .stat .v{font-size:24px;font-weight:700;margin-top:4px} .stat .n{font-size:12px;color:var(--ink-2);margin-top:2px} .pattern{background:var(--soft);border-radius:8px;padding:14px 16px;margin:14px 0} .pattern h3{margin:0 0 6px} .pattern p{margin:6px 0} .tag{display:inline-block;font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:1px 8px;margin-right:8px} .src{font-size:13px;color:var(--ink-2);word-break:break-all} .src a{color:var(--accent)} .callout{display:flex;gap:13px;padding:14px 16px;background:var(--warnsoft);border-radius:6px;margin:18px 0} .callout .tag{flex:none;border:none;padding-top:3px;color:var(--warn)} ol.sources li{margin:10px 0} ol.sources .d{color:var(--ink-2);font-size:13px} @media (max-width:640px){.doc{padding:20px 18px}h1{font-size:23px}}\u003c/style\u003e\u003cdiv class=\"doc\"\u003e\u003cheader\u003e\u003cdiv class=\"eyebrow\"\u003e2026-09 · MOBILE UI TREND SCOUT · FIRST ROUND\u003c/div\u003e\u003ch1\u003eSeptember UI Trend \u0026 Extension Ideas\u003c/h1\u003e\u003cp class=\"lede\"\u003e掃描區間：過去 30 天（2026-08-22 ~ 2026-09-21）。全部搜尋皆帶時間篩選（tbs=qdr:m），每筆來源皆驗證 datePublished，超過 30 天者一律排除，未硬湊名額。\u003c/p\u003e\u003c/header\u003e\u003csection data-cube=\"stats\" class=\"stats\"\u003e\u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e掃描區間\u003c/div\u003e\u003cdiv class=\"v\"\u003e30 天\u003c/div\u003e\u003cdiv class=\"n\"\u003e2026-08-22 ~ 09-21\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e採用來源\u003c/div\u003e\u003cdiv class=\"v\"\u003e6\u003c/div\u003e\u003cdiv class=\"n\"\u003e皆驗證 datePublished\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e整理模式\u003c/div\u003e\u003cdiv class=\"v\"\u003e6\u003c/div\u003e\u003cdiv class=\"n\"\u003e皆附延伸建議\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e排除舊文\u003c/div\u003e\u003cdiv class=\"v\"\u003e8+\u003c/div\u003e\u003cdiv class=\"n\"\u003e逾 30 天不採用\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e\u003ch2\u003e模式與延伸建議\u003c/h2\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP1\u003c/span\u003eMaterial 3 Expressive：加粗形狀＋按壓回彈動效\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003eGoogle 最新演進的 Material 3 Expressive 強調更大的形狀、更重的色彩與觸摸有反應的動效；Pixel / Gmail 新畫面上按鈕看起來更厚，按下時帶一點彈跳。它不是 Material 4，而是既有 Material 3 以色彩、形狀、動效讓視線先落定的擴充。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e這是 Android 側最具權威的方向，元件級改造成本低（按鈕、開關、進度指示先行），能立刻讓 App 看起來跟上 2026 的 Android。建議先從主要 CTA 與按壓回饋動效切入，再鋪開到形狀 scale 與動態色彩。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：Yosuke 文章（見來源 2）＋ Hexbee 側寫作佐證（見來源 6）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP2\u003c/span\u003eLiquid Glass 真實落地：整套系統元件換膚\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003ePlanning Center Services iOS 6.11.0 全面擁抱 Apple 的 Liquid Glass：導覽列、按鈕、漸層與透明背景、分頁列、迷你播放器、圖示與子選單一起換上半透明折射質感，並明示 Android 版隨後跟進。這是第三方 App 如何跟進系統級玻璃語言的現成範本。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e證明了玻璃語言不是只做一兩顆按鈕，而是導覽＋分頁＋播放器等系統鉻整層換。建議檢視 App 的導覽列 / Tab bar / 播放器列，評估一輪半透明＋模糊層級的系統化升級，而非單點裝飾；同時注意對比度與可讀性開關。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：Planning Center Changelog（見來源 3）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP3\u003c/span\u003eBento Grid 成為功能區塊預設版式\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e以 grid-template-areas 排出大小不一的便當盒式區塊，正成為功能展示區的預設模式；最佳格數約 6–9 格，超過約 12 格或內容高度不可預測時會淪為雜亂的牆。行動端重點是原生 CSS Grid 重排，而非複製一套 DOM。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e資訊密度與層級感一次到位，適合首頁、功能總覽、儀表板類畫面。建議挑一屏資訊密集頁做 Bento 重排實驗：大卡放旗艦功能、小卡收次要入口，手機寬度下驗證重排順序與閱讀動線。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：ThePlusAddons（見來源 1）＋ Hexbee 側寫作佐證（見來源 6）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP4\u003c/span\u003eGlassmorphism 的成熟用法：只用在短介面\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e毛玻璃（backdrop-filter）在 2026 仍成熟，但用法收斂：最適合 sticky header、卡片與短標籤；不適合長篇正文，因為半透明背景難以穩定通過 WCAG 對比檢查。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e給了明確的可以用在哪、不能用在哪邊界，可直接轉成設計規範：玻璃只進導覽層與浮層標籤，內文區維持實色保證可讀性。建議把這條寫進設計系統的 usage guideline，避免日後每處重吵一次。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：ThePlusAddons（見來源 1）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP5\u003c/span\u003e摺疊機：不要拉伸，緊湊視圖維持手機導覽\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e摺疊機指引的核心是不要把手機版硬拉寬：緊湊視圖沿用手機導覽模式（底部導覽、導覽堆疊、返回），常用操作保持在拇指可及範圍；展開後才給雙欄等寬版佈局。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e這是低成本高覆蓋的相容性策略：不需為摺疊機重做一套 App，只要守住緊湊＝手機模式＋拇指區、展開＝加欄位的分界。建議下一輪設計評審加一項摺疊檢查：展開寬度下是否自動升級為雙欄，而非留白拉伸。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：UX Collective 摺疊機指引（見來源 4，內容細節引自搜尋摘要，fetch 僅取回日期結構）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP6\u003c/span\u003e即時內容 / Live updates 帶來即時感\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e即時更新與即時數據流被點名為 2026 顯著趨勢：live updates 與 instant data feeds 塑造新的即時體驗層次。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e適合有動態資料的 App（訂單、進度、名額、比分、行情）：在關鍵卡片上加正在更新狀態與增量動畫，感知新鮮度會大幅提升。建議選一處資料卡做 live 化試點，注意更新頻率與電量 / 流量平衡。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：MuseMind 趨勢總覽（見來源 5，細節引自搜尋摘要，fetch 僅取回日期結構）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"callout\"\u003e\u003cspan class=\"tag\"\u003e誠實聲明\u003c/span\u003e\u003cdiv\u003e來源 4、5、6 的頁面抓取僅能驗證日期結構，趨勢細節以搜尋摘要為準，已在上方逐項標註。另有 Claymorphism（柔軟黏土風，適合 onboarding / fintech / 兒童產品，不適合密集表單）來自來源 1，本輪列為備選、未列入主推。\u003c/div\u003e\u003c/div\u003e\u003ch2\u003e來源清單（含驗證日期）\u003c/h2\u003e\u003cp class=\"sub\"\u003e每筆 URL 獨立一行，日期為驗證到的 datePublished（以 2026-09-21 為準皆在 30 天內）。\u003c/p\u003e\u003col class=\"sources\"\u003e\u003cli\u003e\u003ca href=\"https://theplusaddons.com/blog/web-design-trends-2026/\"\u003ehttps://theplusaddons.com/blog/web-design-trends-2026/\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-21（當天）· 玻璃擬態 / Bento / Claymorphism\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://yosuke4061.com/new_toppage/briefings/brief071_en/\"\u003ehttps://yosuke4061.com/new_toppage/briefings/brief071_en/\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-09（12 天前）· Material 3 Expressive 解析\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\"\u003ehttps://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-08（13 天前）· Services iOS 6.11.0 Liquid Glass 落地\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\"\u003ehttps://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-17（4 天前）· 摺疊機 UX 指引\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://musemind.agency/blog/ui-design-trends\"\u003ehttps://musemind.agency/blog/ui-design-trends\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-08-23（29 天前）· 23 項 UI 趨勢總覽（含即時內容）\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\"\u003ehttps://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-08-28（24 天前）· 行動 App UI/UX 趨勢（含 Bento / 手勢導覽）\u003c/div\u003e\u003c/li\u003e\u003c/ol\u003e\u003ch2\u003e排除紀錄（誠實回報）\u003c/h2\u003e\u003cp class=\"sub\"\u003e以下來源因 datePublished 超過 30 天，本輪一律排除，未放寬：Fuselab（2024-11-29）、Designmodo（2024-11-25）、Fireart（2026-04-21）、Minimum Code（2026-06-18）、Capgo（2025-03-24）、Orbix 跨平台（2025-09-19）與 Figma 指南（2025-08-19）、Unico（2025-04-14）、DesignSystems.one（2026-01-15）、CompareAndRecycle（2025-10-01）、DesignStudioUIUX（原文 2023-05-22）。另有數篇（Compose Material3、PCMag、Purchasely、RipenApps、CoherentLab、SetProduct、iF）因抓取失敗或無可驗證日期而不採用。\u003c/p\u003e\u003ch2\u003e下一步\u003c/h2\u003e\u003cp\u003e本輪主推 P1（M3 Expressive 按壓動效）、P2（Liquid Glass 系統鉻升級）、P3（Bento 重排實驗）交給 App UI/UX Designer 評估是否納入本輪設計；P4 建議直接寫進設計規範；P5 列入評審檢查項；P6 選一處資料卡試點。\u003c/p\u003e\u003c/div\u003e","content":"\u003cdiv class=\"doc\"\u003e\u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e掃描區間\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e30 天\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e2026-08-22 ~ 09-21\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e採用來源\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e6\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e皆驗證 datePublished\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e整理模式\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e6\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e皆附延伸建議\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e排除舊文\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e8+\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e逾 30 天不採用\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ch2\u003e模式與延伸建議\u003c/h2\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP1\u003c/span\u003eMaterial 3 Expressive：加粗形狀＋按壓回彈動效\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003eGoogle 最新演進的 Material 3 Expressive 強調更大的形狀、更重的色彩與觸摸有反應的動效；Pixel / Gmail 新畫面上按鈕看起來更厚，按下時帶一點彈跳。它不是 Material 4，而是既有 Material 3 以色彩、形狀、動效讓視線先落定的擴充。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e這是 Android 側最具權威的方向，元件級改造成本低（按鈕、開關、進度指示先行），能立刻讓 App 看起來跟上 2026 的 Android。建議先從主要 CTA 與按壓回饋動效切入，再鋪開到形狀 scale 與動態色彩。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：Yosuke 文章（見來源 2）＋ Hexbee 側寫作佐證（見來源 6）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP2\u003c/span\u003eLiquid Glass 真實落地：整套系統元件換膚\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003ePlanning Center Services iOS 6.11.0 全面擁抱 Apple 的 Liquid Glass：導覽列、按鈕、漸層與透明背景、分頁列、迷你播放器、圖示與子選單一起換上半透明折射質感，並明示 Android 版隨後跟進。這是第三方 App 如何跟進系統級玻璃語言的現成範本。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e證明了玻璃語言不是只做一兩顆按鈕，而是導覽＋分頁＋播放器等系統鉻整層換。建議檢視 App 的導覽列 / Tab bar / 播放器列，評估一輪半透明＋模糊層級的系統化升級，而非單點裝飾；同時注意對比度與可讀性開關。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：Planning Center Changelog（見來源 3）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP3\u003c/span\u003eBento Grid 成為功能區塊預設版式\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e以 grid-template-areas 排出大小不一的便當盒式區塊，正成為功能展示區的預設模式；最佳格數約 6–9 格，超過約 12 格或內容高度不可預測時會淪為雜亂的牆。行動端重點是原生 CSS Grid 重排，而非複製一套 DOM。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e資訊密度與層級感一次到位，適合首頁、功能總覽、儀表板類畫面。建議挑一屏資訊密集頁做 Bento 重排實驗：大卡放旗艦功能、小卡收次要入口，手機寬度下驗證重排順序與閱讀動線。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：ThePlusAddons（見來源 1）＋ Hexbee 側寫作佐證（見來源 6）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP4\u003c/span\u003eGlassmorphism 的成熟用法：只用在短介面\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e毛玻璃（backdrop-filter）在 2026 仍成熟，但用法收斂：最適合 sticky header、卡片與短標籤；不適合長篇正文，因為半透明背景難以穩定通過 WCAG 對比檢查。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e給了明確的可以用在哪、不能用在哪邊界，可直接轉成設計規範：玻璃只進導覽層與浮層標籤，內文區維持實色保證可讀性。建議把這條寫進設計系統的 usage guideline，避免日後每處重吵一次。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：ThePlusAddons（見來源 1）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP5\u003c/span\u003e摺疊機：不要拉伸，緊湊視圖維持手機導覽\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e摺疊機指引的核心是不要把手機版硬拉寬：緊湊視圖沿用手機導覽模式（底部導覽、導覽堆疊、返回），常用操作保持在拇指可及範圍；展開後才給雙欄等寬版佈局。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e這是低成本高覆蓋的相容性策略：不需為摺疊機重做一套 App，只要守住緊湊＝手機模式＋拇指區、展開＝加欄位的分界。建議下一輪設計評審加一項摺疊檢查：展開寬度下是否自動升級為雙欄，而非留白拉伸。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：UX Collective 摺疊機指引（見來源 4，內容細節引自搜尋摘要，fetch 僅取回日期結構）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"pattern\"\u003e\u003ch3\u003e\u003cspan class=\"tag\"\u003eP6\u003c/span\u003e即時內容 / Live updates 帶來即時感\u003c/h3\u003e\u003cp\u003e\u003cstrong\u003e趨勢說明：\u003c/strong\u003e即時更新與即時數據流被點名為 2026 顯著趨勢：live updates 與 instant data feeds 塑造新的即時體驗層次。\u003c/p\u003e\u003cp\u003e\u003cstrong\u003e為什麼值得延伸：\u003c/strong\u003e適合有動態資料的 App（訂單、進度、名額、比分、行情）：在關鍵卡片上加正在更新狀態與增量動畫，感知新鮮度會大幅提升。建議選一處資料卡做 live 化試點，注意更新頻率與電量 / 流量平衡。\u003c/p\u003e\u003cp class=\"src\"\u003e來源：MuseMind 趨勢總覽（見來源 5，細節引自搜尋摘要，fetch 僅取回日期結構）\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"callout\"\u003e\u003cspan class=\"tag\"\u003e誠實聲明\u003c/span\u003e\u003cdiv\u003e來源 4、5、6 的頁面抓取僅能驗證日期結構，趨勢細節以搜尋摘要為準，已在上方逐項標註。另有 Claymorphism（柔軟黏土風，適合 onboarding / fintech / 兒童產品，不適合密集表單）來自來源 1，本輪列為備選、未列入主推。\u003c/div\u003e\u003c/div\u003e\u003ch2\u003e來源清單（含驗證日期）\u003c/h2\u003e\u003cp class=\"sub\"\u003e每筆 URL 獨立一行，日期為驗證到的 datePublished（以 2026-09-21 為準皆在 30 天內）。\u003c/p\u003e\u003col class=\"sources\"\u003e\u003cli\u003e\u003ca href=\"https://theplusaddons.com/blog/web-design-trends-2026/\"\u003ehttps://theplusaddons.com/blog/web-design-trends-2026/\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-21（當天）· 玻璃擬態 / Bento / Claymorphism\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://yosuke4061.com/new_toppage/briefings/brief071_en/\"\u003ehttps://yosuke4061.com/new_toppage/briefings/brief071_en/\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-09（12 天前）· Material 3 Expressive 解析\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\"\u003ehttps://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-08（13 天前）· Services iOS 6.11.0 Liquid Glass 落地\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\"\u003ehttps://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-09-17（4 天前）· 摺疊機 UX 指引\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://musemind.agency/blog/ui-design-trends\"\u003ehttps://musemind.agency/blog/ui-design-trends\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-08-23（29 天前）· 23 項 UI 趨勢總覽（含即時內容）\u003c/div\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\"\u003ehttps://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\u003c/a\u003e\u003cdiv class=\"d\"\u003e發佈日期：2026-08-28（24 天前）· 行動 App UI/UX 趨勢（含 Bento / 手勢導覽）\u003c/div\u003e\u003c/li\u003e\u003c/ol\u003e\u003ch2\u003e排除紀錄（誠實回報）\u003c/h2\u003e\u003cp class=\"sub\"\u003e以下來源因 datePublished 超過 30 天，本輪一律排除，未放寬：Fuselab（2024-11-29）、Designmodo（2024-11-25）、Fireart（2026-04-21）、Minimum Code（2026-06-18）、Capgo（2025-03-24）、Orbix 跨平台（2025-09-19）與 Figma 指南（2025-08-19）、Unico（2025-04-14）、DesignSystems.one（2026-01-15）、CompareAndRecycle（2025-10-01）、DesignStudioUIUX（原文 2023-05-22）。另有數篇（Compose Material3、PCMag、Purchasely、RipenApps、CoherentLab、SetProduct、iF）因抓取失敗或無可驗證日期而不採用。\u003c/p\u003e\u003ch2\u003e下一步\u003c/h2\u003e\u003cp\u003e本輪主推 P1（M3 Expressive 按壓動效）、P2（Liquid Glass 系統鉻升級）、P3（Bento 重排實驗）交給 App UI/UX Designer 評估是否納入本輪設計；P4 建議直接寫進設計規範；P5 列入評審檢查項；P6 選一處資料卡試點。\u003c/p\u003e\u003c/div\u003e","createdAt":1790002337961,"deletedAt":null,"displayMode":"artifact","id":"b5594b5c4e8dd4e455ac6a1a","isNew":false,"isPublic":true,"itemType":"NOTE","name":"September UI Trend \u0026 Extension Ideas","parents":{"be3c70dead6ba9387c599754":1790002337961},"preParentID":null,"updatedAt":1790049953572,"updatedBy":{"userId":"6ab1415200264dd98fffdc","userName":"宋益維"},"version":5,"websiteContent":"[{\"originUrl\":\"https://theplusaddons.com/blog/web-design-trends-2026/\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://yosuke4061.com/new_toppage/briefings/brief071_en/\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://www.planningcenter.com/changelog/services/new-liquid-glass-design-in-services?ref=blog\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://musemind.agency/blog/ui-design-trends\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://hexbeesoft.com/blog/mobile-app-ui-ux-design-trends-2026\",\"title\":null,\"content\":null,\"imageUrl\":null}]"},{"agentID":"53522718821fb18d8b754a1a","agentIcon":"palette","agentName":"Mobile UI Trend Scout","content":"首輪掃描完成，已交付。\n\n已新增筆記「September UI Trend \u0026 Extension Ideas」並放入「App UI Specs」資料夾。\n\n**本輪結果（掃描區間 2026-08-22 ~ 09-21，全部搜尋帶 `qdr:m`）：**\n\n整理出 6 個模式，每個都附延伸建議：\n\n1. **Material 3 Expressive** — 按鈕加厚＋按壓回彈，建議先從主要 CTA 切入\n2. **Liquid Glass 真實落地** — 第三方 App 整套系統鉻換膚的範本，建議評估導覽列／Tab bar 整層升級\n3. **Bento Grid** — 功能區預設版式（6–9 格），建議挑一屏資訊密集頁實驗\n4. **Glassmorphism 收斂用法** — 只進導覽層與短標籤，建議直接寫進設計規範\n5. **摺疊機** — 緊湊視圖維持手機導覽，建議列入評審檢查項\n6. **即時內容 Live updates** — 建議選一處資料卡試點\n\n**新鮮度紀律執行情況：**\n- 6 筆採用來源皆驗證 `datePublished` 在 30 天內，URL 獨立成行、附日期\n- 11 篇以上舊文因超期直接排除，未放寬（包含 Fireart、Capgo、Orbix 等）\n- 誠實揭露：有 3 篇抓取只取回日期結構、內文缺失，筆記內已逐項標註「細節引自搜尋摘要」，另有數篇因抓取失敗或無可驗證日期不採用\n\n已通知 App UI/UX Designer，請他們評估 P1–P3 是否納入本輪設計，P4–P6 分別處理。","createdAt":1790002377183,"hidden":false,"id":"session_504d2be9-5e1a-b607-7c4d-8e855afaaeba_b5594b5c4e8dd4e455ac6a1a","imgURLs":[],"itemType":"COMMENT","likeCount":0,"name":"","parents":{"b5594b5c4e8dd4e455ac6a1a":1790002377183},"rating":0,"sessionID":"504d2be9-5e1a-b607-7c4d-8e855afaaeba","updatedAt":1790002377183,"updatedBy":{"agentId":"53522718821fb18d8b754a1a","agentName":"Mobile UI Trend Scout","userId":"6ab1415200264dd98fffdc","userName":"宋益維"},"version":1,"videoURLs":[]}]}