隨著生成式 AI、智能體（Agent）技術的全面普及，人工智能正從工具屬性向產品核心架構深度滲透，最新行業數據顯示，超 60% 的企業已將 AI 技術融入產品全鏈路設計，95% 的頭部科技公司正加大智能體驗的研發投入。AI 不再是產品的附加功能，而是重構用戶體驗的核心驅動力，如何讓復雜的智能技術轉化為用戶可感知、可掌控、可信賴的體驗，成為 UX/UI 設計的核心命題。作為深耕智能產品體驗設計的專業團隊，我們落地超 300 個 AI 產品設計項目，沉淀出從體驗設計到數據指標落地的全流程方法論，助力產品實現技術價值與用戶體驗的雙向賦能。

在 UI 設計入門階段，掌握系統原生控件的定義、用法和設計規范，是搭建合規且易用界面的基礎。隨著 iOS26 對設計風格的更新，不少控件的形態、功能邊界和使用場景都發生了變化。本文將以 iOS26 官方組件庫為標準，全面拆解核心系統級控件，幫新手快速理清控件分類與設計要點，避開常見誤區。

蘭亭妙微作為一家專業的設計公司，我們從全球優質 UI 案例中提煉共性與亮點，為自身的設計實踐提供靈感與參考。以下是對這組精選案例的深度解析，展現我們對 UI 設計趨勢的敏銳洞察。

一、趨勢洞察：當代 UI 設計的核心走向

1. 情緒價值優先

    

   設計不再僅僅滿足功能需求，更注重營造符合產品氣質的情緒體驗。
    
   • 如 Lumio 智能家居平臺，用米白和淺灰的低飽和色調，營造了溫暖、安心的居家情緒價值。
   • Skillery 教育平臺則用活力藍，傳遞出專業且充滿活力的學習氛圍。
    
2. 信息架構輕量化

    

   復雜功能被拆解為直觀的模塊，降低用戶認知負荷。
    
   • AI 營銷工具將復雜的營銷鏈路，拆解為 “點贊 - 轉發 - 推廣” 等具象化微交互。
   • 智能家居平臺則用卡片式布局，將設備控制、能源分析等功能清晰分區。
    
3. 微交互與動效賦能

    

   細膩的動效反饋讓界面充滿生命力，提升用戶操作的愉悅感。
    
   • 例如，Lumio 平臺的空調溫度調節，通過平滑的數值與指針動畫，賦予日常操作以儀式感。
   • Skillery 平臺的排行榜，通過成就徽章的彈出動畫，強化了用戶的成就感。
    

二、分案 UI 設計亮點拆解

1. Lumio

• 色彩系統：采用 “無色彩 + 低飽和” 配色方案，以米白為基底，淺灰做區分，避免色彩干擾居家環境，讓視覺焦點回歸功能本身。
• 布局邏輯：左右分欄的 “品牌敘事 + 功能體驗” 雙動線設計，左側傳遞產品理念，右側直接展示操控界面，形成從認知到體驗的完整閉環。
• 控件設計：卡片式控件采用圓角 + 微妙陰影的組合，模擬真實家居設備的質感，同時保持界面的呼吸感。

2. Skillery 在線教育平臺

• 視覺層次：通過 “頂部激勵條 + 核心用戶卡片 + 完整榜單” 的三層結構，建立清晰的視覺層級，讓用戶第一眼就能抓住核心信息。
• 游戲化設計：將學習數據轉化為 “積分、徽章、連續天數” 等游戲化元素，并配合 “你離 TOP 10 只差 9 分” 的精準文案，將數據轉化為用戶行動的動力。
• 導航系統：側邊導航采用圖標 + 文字的極簡設計，在保證功能完整的同時，最大化釋放主內容區的視覺空間。

3. AI 營銷工具系列

• 材質表達：大量運用半透明玻璃態卡片和柔和漸變，營造輕盈、智能的科技感，與 “AI 驅動” 的產品定位高度吻合。
• 流動感布局：采用非對稱懸浮布局，模擬信息在虛擬空間中的流動，直觀體現產品的智能特性，讓抽象的 AI 功能變得可感知。
• 功能具象化：將復雜的營銷功能轉化為 “Repost products”、“Promote viral advertising” 等直白的行動指令按鈕，降低用戶的理解成本。

三、對我們的啟發

在 UI 設計中，導航是連接用戶與產品功能的 “橋梁”。一個清晰、高效的導航設計，能幫助用戶快速定位目標功能、減少操作成本，進而提升產品的用戶留存與轉化率；反之，混亂的導航會讓用戶陷入 “迷路” 困境，最終導致用戶流失。本文將聚焦 5 種常見的 UI 導航模式，解析其設計邏輯、適用場景與優化技巧，為 Web 與移動端設計提供實用參考。

在當今快速發展的數字設計世界中，尋找優質的設計靈感至關重要。無論你是專業設計師還是剛入行的新手，以下這些精選的網頁設計靈感站點將幫助你提升創意和設計水平。蘭亭妙微深耕 UI 設計與開發領域，團隊設計師始終保持持續學習、穩步成長的狀態，和你分享當代設計趨勢。

1. Curated Design - 設計精品集錦

[Curated Design](http://curated.design) 是目前最佳的網頁設計靈感資源之一。該平臺精心挑選了來自全球的頂尖網站設計，按照不同的風格和特點進行分類，包括暗色系、柔和色調、多彩設計、極簡主義等。

特色亮點：

- 提供精選的高質量設計案例

- 按設計風格和屬性進行詳細分類

- 提供專業版訂閱服務，解鎖更多功能

- 每周更新，保持最新設計趨勢

Curated Design 的界面本身也是一個設計典范，簡潔而富有美感，讓瀏覽體驗變得輕松愉悅。對于尋求高端設計靈感的專業人士來說，這是一個不可錯過的資源。

2. Landing Gallery - 全方位的著陸頁靈感

[Landing Gallery](http://landing.gallery) 專注于提供各個領域的著陸頁設計靈感。無論你需要設計什么類型的頁面，從主頁、定價頁面到聯系頁面，甚至是404錯誤頁面，這里都能找到優質的參考案例。

主要功能：

- 按頁面類型進行詳細分類（主頁、定價頁、關于頁等）

- 按網站構建工具篩選（Elementor、Framer、Shopify等）

- 定期更新最新的設計案例

- 提供深色/淺色模式切換

Landing Gallery 的組織結構非常清晰，讓用戶能夠快速找到所需的特定類型頁面設計，是進行目標明確的設計研究的理想平臺。

3. SaaS Landing Page - SaaS領域的專業靈感

[SaaS Landing Page](http://saaslandingpage.com) 專門收集了SaaS（軟件即服務）公司的優秀著陸頁設計。對于科技創業公司和SaaS產品設計師來說，這是一個寶貴的資源。

核心優勢：

- 超過800個頂級SaaS公司的著陸頁案例

- 按頁面類型細分（著陸頁、定價頁、功能頁等）

- 提供多種技術棧的模板參考

- 按流行字體和設計標簽進行篩選

如果你正在為SaaS產品設計網站，這個平臺提供的針對性案例將幫助你了解行業最佳實踐和設計趨勢。

4. Supahero - 精選的英雄區設計

[Supahero](http://supahero.io) 專注于網站最重要的部分之一——英雄區（Hero Section）設計。這個區域通常是訪問者首先看到的部分，對于吸引用戶注意力至關重要。

特色內容：

- 精心挑選的高質量英雄區設計

- 按風格分類（暗色、極簡、3D、彩色等）

- 提供相關設計工具和模板資源

- 定期更新最新設計趨勢

Supahero 的集中焦點使其成為尋找引人注目的網站開場設計的絕佳資源，特別適合想要在第一印象上脫穎而出的設計師。

5. Mobbin - 最大的UI/UX參考庫

[Mobbin](http://mobbin.com) 是目前最大的UI/UX設計參考庫之一，提供了大量的移動應用和網站界面設計案例。與其他平臺不同，Mobbin 不僅展示首頁設計，還提供完整的用戶流程和交互設計參考。

主要特點：

- 海量的移動應用和網站UI/UX設計案例

- 完整的用戶流程和交互設計展示

- 按行業、功能和設計模式分類

- 提供設計系統和組件庫參考

對于需要研究用戶體驗和界面設計的專業人士，Mobbin 提供了深入了解成功應用如何構建用戶流程的機會。

6. Dark Design - 暗色模式設計專家

[Dark Design](http://dark.design) 專注于收集優秀的暗色模式網站設計。隨著暗色模式在各種平臺上的普及，這個資源變得越來越有價值。

核心特色：

- 專注于高質量的暗色模式網站設計

- 提供模塊化設計元素和模板

- 按風格和功能分類

- 支持書簽功能，保存喜愛的設計

Dark Design 不僅提供整體網站設計靈感，還關注暗色模式下的細節處理，如色彩對比、可讀性和視覺層次，是設計暗色界面的絕佳參考資源。

總結

這些設計靈感站點各有特色，覆蓋了從整體網站設計到特定元素、從通用領域到專業行業的各個方面。作為設計師，定期瀏覽這些資源可以幫助你:

- 了解最新的設計趨勢和模式

- 獲取針對特定項目的靈感

- 學習行業最佳實踐

- 提升自己的設計技能和審美水平

無論你是在設計一個全新的網站，還是對現有項目進行改進，這些平臺都能為你提供寶貴的參考和靈感。

轉載：未來交互趨勢

蘭亭妙微（藍藍設計）www.tuquanmo.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。

2025 年移動端 UI 設計延續 “體驗優先、情感賦能、技術驅動” 的核心邏輯，在視覺表現上更強調輕量化與個性化，在功能設計上深度融合場景化與智能化。以下趨勢均結合本次解析的界面案例，提煉可落地的設計手法與適用場景。一、 視覺風格趨勢：輕量化質感與個性化表達

1. 磨砂玻璃（Glassmorphism）持續流行
   核心特征：半透明模糊效果 + 細微邊框 + 柔和陰影，營造通透、分層的視覺質感。
   案例對應：證件夾界面、數字錢包界面均采用該風格，既突出核心信息，又增強界面的呼吸感，尤其適合金融、隱私類應用，傳遞安全、專業的感知。
   設計要點：避免過度模糊導致信息可讀性下降；搭配低飽和度底色，強化玻璃質感的同時保證內容清晰。

【1】隨著iOS26發布，部分設計軟件陸續在增加玻璃材質能力

【2】IF發布《2025年iF設計趨勢報告》

【3】小米AI眼鏡上線

【4】蘋果iOS26 Beta3發布，液態玻璃效果回退

【5】Figma支持Liquid glass

【6】Figma Make AI 功能正式上線，面向所有用戶開放

【7】騰訊開源混元模型 1.0，一鍵生成可漫游的 3D 虛擬場景

【8】 Luma AI 新增指令修改，視頻編輯流程更快捷

1. 隨著iOS26發布，部分設計軟件陸續在增加玻璃材質能力

sketch beta版已加入液體玻璃效果，可以自定義相關的參數。

▲圖片來自：sketch beta版

Figma也支持液態玻璃效果。

▲圖片來自：figma軟件

2.IF發布《2025年iF設計趨勢報告》，報告將助力設計師深入理解未來變革性趨勢

F 設計趨勢報告 2025 是一本強調“設計介入社會系統”的指南。在面對數字化、生態危機、價值觀重塑等全球議題時，設計不再是表層的裝飾性行業，而是推動制度革新、關系重建和認知轉變的戰略工具。這份報告提供了：方向性判斷、策略設計靈感、對未來的責任感與使命感。

▲圖片來自： 《2025年iF設計趨勢報告》

今年的《iF Design 趨勢報告》聚焦于我們社會的六大主要轉變：

1、CONSCIOUS ECONOMY 有意識的經濟

2、HUMAN DIGITALITY人類數字化

3、CO-SOCIETY 共生社會

4、MINDSHIFT REVOLUTION思維轉變革命

5、ECO TRANSITION 生態轉型

6、GLOCALIZATION 全球本土化

CONSCIOUS ECONOMY 有意識的經濟

現在消費者買的不只是價格，更看重企業對顧客的關心、后續服務和有沒有社會擔當。所以未來產品要和服務綁得更緊，靠貼心體驗傳遞企業價值。企業得把戰略重心從“賣東西”轉到“顧人”上，在服務中既用技術解決問題，又滿足人的情感需求，這樣才能做出真正有溫度的服務。

如：這家新成立的足球人才經紀公司的品牌形象深受年輕足球運動員的喜愛，并充分體現了其對球員需求以及體育產業的深刻理解。其企業設計以目標群體的語言進行表達，迎合了他們大膽、充滿活力的天性。該設計注重在場上和場下創造空間的理念，象征著球員在職業生涯和生活中所面臨的全新機遇。

▲圖片來自： 《2025年iF設計趨勢報告》

HUMAN DIGITALITY 人類數字化

隨著技術的發展，現在的產品和AI交互太復雜了，過去光追求“簡單”已經不夠用了，得用“好玩有趣”的設計來化解復雜，讓大家用得更開心、更愿意用！

AI伴侶（如陪伴機器人Ballie）通過人工共情提升用戶體驗。

如：伊庫雷是個專門幫助自閉癥孩子練社交的智能機器人。它能懂得每個孩子不同的情緒和反應方式，用AR投影和感應裝備陪孩子玩，實時回應動作，在一個安全舒服的環境里幫他們練習。幫助這些孩子建立情感共鳴，增強他們的自我意識和表達能力。

▲圖片來自： 《2025年iF設計趨勢報告》

CO-SOCIETY 共生社會

繁榮需納入個體生活質量、社會參與和生態可持續性，產品和服務不再只有實際用途，更承載了情感體驗和價值理念，

如：這款科勒 x Remedy Place 聯名冰浴桶將醒目設計、優化人機工學和智能科技（Kohler Konnect®）融為一體，提供可定制的冷水浸泡療程，不僅兌現減少炎癥、提升情緒和增強心理韌性的健康承諾，更成為展現優雅健康生活的標志性設計。

▲圖片來自： 《2025年iF設計趨勢報告》

MINDSHIFT REVOLUTION 思維轉變革命

設計需打破刻板印象，踐行無性別理念，摒棄性別標簽；同時，更應關注心理健康，營造治愈性沉浸環境，緩解社會疏離感

如：德烏特兒童安撫背帶Aircomfort Sensic Vario Netzrucken 系統為家庭徒步旅行提供了極大的便利，它在小巧的兒童背帶中實現了出色的負荷分配和背部通風。該系統為父母和孩子都提供了舒適的體驗，配有柔軟的兒童頭部墊和方便的安全帶操作裝置。

▲圖片來自： 《2025年iF設計趨勢報告》

ECO TRANSITION 生態轉型

生態轉型（循環社會+綠色科技+能源革命）正重塑全球發展路徑。可持續設計作為關鍵響應，以智能循環、融入生物多樣性為方法，重構“人-自然共生”系統，營造支持性環境與獨特生態美學。

如：戴爾筆記本電腦套裝倡議戴爾筆記本電腦多包裝計劃旨在重新設計現有的包裝，拆箱過程節省了 60% 的時間。經過全面且反復的工程優化，與單個包裝相比，每單位包裝材料的重量減少了 38%，從而打造出更小巧、更環保、更具用戶友好性的設計。

▲圖片來自： 《2025年iF設計趨勢報告》

GLOCALIZATION 全球本土化

未來的設計需要在全球視野下，在文化層面融入本土特色，實現有共鳴的文化交流，促進全球本土化如：滴滴的多元國際業務需要在多個國家和市場中為用戶提供一致且高效的體驗，為此打造Global One彈性化設計系統，以靈活、可拓展和在地適配的特性滿足全球業務需求，在保障品牌一致性的前提下助力各國市場快速響應本土化需求。

▲圖片來自： 《2025年iF設計趨勢報告》

3.小米AI眼鏡上線

過去兩年，AI熱潮席卷智能硬件領域，從手機到PC，各類終端紛紛擁抱AI重塑自我。沉寂已久的智能眼鏡賽道也隨之迎來爆發：Ray-Ban Meta聯手AI注入新活力后，Rokid、雷鳥、李未可等國產廠商相繼推出形態功能各異的新品。  縱觀AI硬件，特別是以智能眼鏡復興為代表的發展態勢，一個核心趨勢已然顯現：設備體驗正經歷從“智能化”向“無感化”的深刻轉型。 

▲圖片來自： 小米官網

4.蘋果iOS26 Beta 3 發布，液態玻璃效果回退

在Beta3版本，將原來激進的高擬真液態玻璃效果，回退至霧面毛玻璃+漸變的形式，顯著提升了文字可讀性。

▲ 左：iOS 26 Beta 2 / 右：iOS 26 Beta 3 

來源：https://www.ifanr.com/1630100

5.Figma原生支持Liquid glass

▲圖片來自：Figma官網

▲圖片來自：X官網

繼 Sketch 和 Motif 之后，Figma 原生也支持iOS 26 的液態玻璃（Liquid glass）效果。設計師可在 Figma 中直接應用該效果。用戶可以靈活在工具欄中調節材質和效果。

https://x.com/i/status/1945513823949222239 

6.Figma Make AI 功能正式上線，面向所有用戶開放

設計平臺 Figma 正式向所有用戶開放其 AI 工具 Figma Make。用戶只需輸入需求，即可自動生成網頁原型、交互邏輯甚至基礎應用框架。此前僅限付費用戶使用的功能，現已全面開放。

網址：https://www.figma.com/make/ 

▲圖片來自：Figma官網

▲圖片來自：Figma官網

▲圖片來自：Figma官網

顛覆傳統設計流程的三大核心能力

1. 文字驅動創作

無需編寫 CSS 代碼，輸入指令如“創建帶郵箱/密碼字段的登錄頁”，AI 即刻生成高保真界面及可點擊交互元素。設計構想從概念到屏幕呈現的鏈路被大幅壓縮，省去重復搭建畫布的時間成本。

▲圖片來自：Figma官網

▲圖片來自：Figma官網

2. 視覺素材智能轉化

支持上傳 Logo、插畫或照片，AI 自動解析視覺風格與布局結構，將其轉化為可復用組件或頁面背景。該功能打通“視覺稿→可交互原型”的轉化路徑，尤其適用于品牌宣傳與內容營銷場景。

▲圖片來自：Figma官網

3. 現有設計深度增強

將 Figma 設計文件中的 Frame 直接導入 Make，AI 會智能補全交互邏輯與布局細節。在保留原始設計的基礎上，快速實現原型功能升級，顯著提升產出效率。

進階能力：從設計到上線的閉環

4.實時發布可訪問應用

生成的原型并非靜態稿，可一鍵發布為真實可訪問的 Web 應用。用戶可通過 Figma Make 預覽頁面，或部署至自定義域名。

5.集成 Supabase 后端服務

內置用戶認證、數據庫等后端能力，結合自定義域名功能，實現“設計-開發-部署”全流程貫通。

6.對話式實時微調

選中特定元素（如按鈕）后，通過自然語言指令調整細節：“添加紫色漸變效果”“增加懸停動效”。AI 即時響應修改需求，使原型優化更精準高效。

工具價值與適用場景

Figma Make 重新定義了設計生產力：通過融合文字指令、視覺識別與智能增強，將靜態設計轉化為可運行原型，并直接對接發布流程。

其價值在于：

a.消除設計師與開發者之間的協作斷層

b.釋放創意人員對技術實現的依賴

c.加速從概念到可體驗產品的轉化周期

適用群體：產品經理、UI/UX 設計師、初創團隊及任何需要快速驗證想法的創作者。建議即刻體驗，搶占AI驅動的產品開發效率先機。

7.騰訊開源混元模型 1.0，一鍵生成可漫游的 3D 虛擬場景

在2024世界人工智能大會上，騰訊正式發布并開源 混元3D世界模型1.0（HunyuanWorld 1.0）。該模型支持通過文本或單張圖片輸入，一鍵生成具備360°自由漫游能力的3D虛擬場景，生成內容可導出編輯。其創新性語義分層算法兼容Unity等主流開發工具，實測性能超越全球開源對標模型，將推動游戲開發、VR應用及數字創作領域的技術革新。

網址：https://3d.hunyuan.tencent.com/sceneTo3D 

效果展示unsetunset

一些HunyuanWorld 1.0生成的360°沉浸式、可探索3D世界：

▲圖片來自：混元官網

▲圖片來自：混元官網

技術突破：解決三維生成核心痛點

1.當前3D世界生成技術存在兩大局限：

視頻驅動方案：場景多樣性豐富但缺乏三維一致性，渲染效率低下

幾何驅動方案：結構穩定性強卻受限于訓練數據匱乏與內存效率瓶頸

2.HunyuanWorld 1.0通過融合雙方優勢實現突破性創新：

全景世界代理技術：以360°全景圖為媒介構建沉浸式空間

網格化資產輸出：生成標準3D網格模型，無縫對接圖形管線

解耦式物體表征：增強場景元素的可交互性與編輯自由度

8. Luma AI 新增指令修改，視頻編輯流程更快捷

Luma AI 近日為其視頻生成平臺 Dream Machine 上線自然語言指令編輯功能。用戶通過輸入文本指令（如“調整黃昏色調”“替換背景建筑”），即可動態修改視頻中的色彩、場景元素及視覺特效，編輯效率提升顯著。該功能將大幅優化視覺特效師、動態設計師等創意工作者的工作流。網址：https://lumalabs.ai/ 

▲圖片來自：luma ai官網

▲圖片來自：luma ai官網

▲視頻來自：luma ai官網

▲圖片來自：luma ai官網

▲圖片來自：luma ai官網

核心能力與技術進展

1. 語言驅動實時編輯

支持顏色分級、物體替換、場景重構等高頻需求

修改指令即時響應，避免傳統逐幀操作

2. 持續迭代的路線圖

正解除當前僅限首幀修改的限制

即將推出全時間軸的幀級精確控制功能此次升級標志著AI視頻編輯從生成向智能精修進化，通過降低專業技術門檻釋放創意潛能。影視后期、廣告創意及短視頻創作領域將率先受益。

轉自：騰訊ISUX

一、筆墨韻律：用線條講 “情緒故事”

• 狂草的張力：像圖 4 “創享” 海報，飛白的筆觸、大開大合的結構，將 “創享的熱烈” 直接通過線條的動感傳遞，黑底白字的對比更放大了這種酣暢感；

• 

• 行楷的溫潤：圖 7 “靜” 海報中，行書的婉轉筆鋒搭配水墨暈染，把 “寧靜自在” 的意境揉進筆畫的起承轉合里，讓觀者從字形中感受到松弛。

二、文化符號：讓文字成為 “信息錨點”

• 節氣 / 傳統主題：圖 5 “立秋” 海報，將 “秋” 字塑造成木雕質感的羽毛形態，既保留書法的筆意，又以 “秋雁” 的意象呼應節氣，讓文字成為 “節氣文化” 的視覺符號；

• 

• 國潮品牌主題：圖 9 “仙” 字海報，把書法筆觸與山水紋理結合，搭配 “Chinese Tea” 的英文標識，讓 “中式茶” 的文化屬性通過書法字體自然流露。

三、視覺層次：以字形造 “空間節奏”

• 立體塑形：圖 1 “周” 字海報，將書法轉化為浮雕質感，搭配背景的山水樓閣，讓平面海報生出 “中式器物” 的空間縱深感；

• 

• 虛實疊加：圖 8 “童真” 海報，把書法字體與英文單詞（“ZHEN”）拆分融合，水墨肌理的實與文字拆分的虛形成對比，讓 “赤子之心” 的主題更有設計張力。

在追求精致漸變、極簡留白的主流設計語境中，一種帶著粗獷質感、強烈對比的設計風格正悄然崛起 —— 它就是新粗野主義（Neo-Brutalism）。這種脫胎于 20 世紀建筑粗野主義的設計流派，在數字時代以反叛姿態打破審美慣性，用 "不修飾的真實" 和 "功能至上" 的理念，成為獨立創作者、創意品牌追捧的視覺語言，掀起一場關于設計本質的重新思考。