Dorun Dorun 結伴跑步社交 App 全案體驗價值解析

北京蘭亭妙微 UI 設計公司，成立 16 年來，始終保持著對國內外優秀設計作品的學習與研究。我們持續追蹤全球前沿的 UI/UX 設計趨勢，從中提煉可落地的設計方法論，分享給同樣熱愛設計的你。今天，我們來深度拆解一套結伴跑步社交 App 的ui設計，從信息架構、配色策略、移動端適配到數據敘事的視覺表達，逐一解析其背后的設計決策。

一、項目基礎概述

項目背景與核心用戶痛點

Dorun Dorun 是一款主打「結伴慢跑、運動社交」的輕量化跑步記錄 App，核心服務兩類人群：日常慢跑愛好者、想要養成運動習慣卻難以獨自堅持的普通用戶。傳統運動類產品普遍存在用戶體驗短板：

1. 獨自運動缺少陪伴與正向激勵，用戶極易放棄打卡，運動留存率低；

2. 運動頁面數據繁雜冰冷，純數字圖表枯燥，缺少情緒共鳴；

3. 社交鏈路薄弱，無法實時查看好友運動狀態，運動分享形式單一；

4. 界面視覺生硬嚴肅，長時間使用容易產生疲憊感。本項目通過「陪伴式 IP + 實時社交 + 輕量化運動記錄」的設計思路，從情緒、功能、視覺三層解決用戶堅持運動難、社交互動弱的核心痛點。

項目核心設計目標（以用戶體驗為核心）

1. 降低運動門檻：新手引導清晰易懂，操作步驟極簡，零基礎用戶也能快速上手；

2. 打造陪伴式情緒體驗：專屬卡通 IP 貫穿全流程，消解獨自運動的孤獨感，持續給予運動激勵；

3. 完善運動社交閉環：實現好友實時位置 / 運動狀態查看、運動成果個性化分享、長期運動數據沉淀；

4. 統一全頁面視覺語言：搭建標準化組件庫，保證從引導頁、運動頁到個人中心，操作邏輯、視覺感受連貫統一。

完整用戶使用鏈路

產品完整覆蓋運動全生命周期：新手引導 →運動前好友狀態查看→運動中軌跡實時記錄→運動后個性化打卡分享→個人長期運動數據存檔，形成完整的“運動—社交—復盤”閉環。

二、全鏈路用戶使用體驗拆解

新手引導頁：直觀傳遞產品核心價值

開屏三頁引導完全站在用戶視角，直白展示三大核心功能：結伴跑步、查看好友實時運動、打卡分享運動日常。頁面搭配治愈 IP 形象，文字簡短易懂，底部統一行動按鈕，無多余信息干擾，用戶 3 秒就能明白產品能為自己帶來什么，大幅降低新用戶認知成本。

運動前頁面：社交激勵喚醒運動動力

用戶進入 App 首頁即可實時查看全部好友運動動態：包含好友跑步距離、上次運動時間、在線狀態。配套暖心喚醒通知機制：針對 3 天以上未運動的好友推送提醒，通過社交督促激發用戶運動意愿，解決 “獨自運動沒動力” 的核心痛點。頁面信息分層清晰：好友動態列表為核心區域，底部放置一鍵開啟跑步的主按鈕，用戶無需多次跳轉就能快速開啟運動。

運動中記錄頁：輕量化呈現運動數據

跑步過程頁面摒棄繁雜數據堆砌，只保留用戶最關心的 4 項核心信息：實時距離、運動時長、配速、步頻；搭配彩色漸變地圖軌跡，直觀展示跑步路線，視覺柔和不刺眼；全程僅保留 “暫停記錄”“結束跑步” 兩個核心操作按鈕，避免多余功能分散用戶運動注意力，適配戶外跑步單手簡易操作的使用場景。

運動后上傳分享頁：個性化打卡豐富社交場景

跑步結束后支持兩種打卡展示形式：標準軌跡地圖、自定義實景照片背景；用戶可自由替換背景圖，搭配運動數據生成專屬運動動態，豐富分享素材，提升用戶主動分享至社交平臺的意愿。極簡一鍵發布按鈕，完整打通 “運動完成 - 分享互動” 的社交鏈路。

個人中心頁面：可視化沉淀長期運動成果

個人主頁分為兩大模塊：打卡相冊、月度運動記錄清單。打卡相冊以日歷圖文形式留存每一次運動瞬間，月度清單清晰展示每日跑步數據，讓用戶直觀看見長期運動收獲，強化堅持運動的成就感，提升用戶長期留存。

三、品牌 IP 與視覺體驗體系：用治愈感提升用戶粘性

專屬陪伴式卡通 IP 形象

項目打造專屬藍色軟萌球形 IP，覆蓋全套情緒表情：開心奔跑、疲憊低落、加油鼓勵、心動點贊等，適配 App 全部使用場景。核心設計邏輯：將冰冷的運動數據賦予情緒溫度，用戶運動時、懈怠時、完成目標時都有對應 IP 形象陪伴，消解獨自運動的枯燥感，建立情感聯結。IP 統一應用在彈窗、氣泡提示、卡片、引導頁，品牌記憶點極強。

色彩視覺體系（適配長期手機瀏覽）

· 主色調：柔和淺天藍色，低飽和度不刺眼，適配長時間戶外、室內看手機場景，傳遞輕松治愈的運動氛圍；

· 輔助色：淺灰、純白作為頁面基底，深藍色作為主操作按鈕，區分主次操作；

· 狀態色：火焰橙、愛心粉、星星淺黃作為情緒點綴色，僅用于 IP、標簽小元素，不破壞整體干凈清爽的視覺基調。

標準化全頁面組件系統

整套 App 搭建完整可復用 UI 組件庫，覆蓋按鈕、輸入框、列表、卡片、彈窗、底部導航、標簽氣泡等全部基礎元素。統一組件帶來兩大用戶優勢：

1. 全頁面操作邏輯一致，用戶切換頁面無需重新適應操作方式；

2. 界面整潔統一，無雜亂視覺元素干擾，查找功能、閱讀信息效率更高。

四、交互與用戶體驗核心亮點

1. 實時好友同步機制：無需主動刷新，一鍵查看好友當前跑步位置與進度，實現“線上結伴跑步” 的陪伴感；

2. 輕量化信息減法：運動頁面只保留剛需數據，非必要功能全部收納至次級頁面，適配戶外單手操作；

3. 情緒化反饋設計：所有彈窗、通知、結果頁面搭配對應 IP 表情，運動完成給予正向鼓勵，懈怠時給予溫柔提醒；

4. 多形式分享載體：支持地圖軌跡、實景照片雙模式打卡，滿足不同用戶的社交分享喜好；

5. 數據可視化沉淀：日歷相冊 + 月度清單雙重形式記錄運動成果，直觀強化用戶運動成就感。

五、項目商業落地價值

1. 提升用戶留存：依靠陪伴 IP + 社交激勵雙設計手段，解決運動類 App 普遍存在的 “三分鐘熱度” 流失問題，拉長用戶使用周期；

2. 降低用戶獲客成本：豐富個性化打卡素材，驅動用戶自發向外分享傳播，實現自然流量裂變；

3. 差異化市場競爭力：市面上多數跑步軟件偏向專業硬核數據，本產品主打治愈陪伴社交，精準切入普通休閑慢跑人群空白賽道；

4. 低研發迭代成本：全套標準化組件庫，后續新增活動、功能頁面可快速復用，降低產品迭代開發成本。

六、全案設計總結

1. 以用戶情緒需求為底層邏輯，不止做運動數據工具，更打造陪伴式運動社交空間；

2. 全流程輕量化信息設計，區分運動前 / 中 / 后不同場景的用戶操作需求，精準簡化頁面信息；

3. 專屬 IP 貫穿全場景，建立獨特品牌情緒記憶點，和同類運動產品形成明顯視覺差異化；

標準化組件系統統一全端體驗，兼顧用戶使用流暢度與產品長期迭代效率。

圖片來自Behance

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

最近一直在做GIS監測類的項目，從大氣污染到生態資源，從氣象預報到城市管網。越做越覺得，GIS監測的設計，真的不只是“畫個好看的地圖”那么簡單。

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

蘭亭妙微UI設計公司：在用戶需求日益多元化的旅游市場中，會員權益的價值不僅在于提供優惠，更在于創造差異化的體驗與長期歸屬感。本次會員權益感知升級，我們通過權益展示規則優化和場景化等方式，加強用戶對會員權益的感知，讓用戶從預訂到旅程的每個環節都能清晰感知會員權益的價值。

一、背景

當前，集團持續加大在會員權益方面的投入，旨在通過更具價值的權益體系提升用戶體驗。優質的會員服務不僅能增強用戶粘性和忠誠度，更能有效提高權益使用率和訂單轉化率。此次會員體驗升級，正是希望通過優化權益設計和服務體驗，實現用戶價值與平臺效益的雙贏，最終形成"投入-體驗提升-效益增長"的良性循環。

二、問題洞察

通過走查線上各業務線（如機票、酒店等）的頁面，我們發現了以下 2 個問題：

1. 不同業務線間：權益的展示節點和感知強度不同，缺少一致的設計原則

目前各業務線在會員權益方面的設計手段不同，在權益展示點位和感知強度上存在明顯差異，缺少一致的設計原則進行規范。具體表現為：

酒店：主要通過貨架展示強化會員權益感知

機票：側重在列表頁和中間頁等固定位置展示

火車票：則聚焦于權益使用環節的觸達

2. 單個業務線內：優勢權益在流程中沒有充分傳達

通過對各業務線現有頁面的走查，我們發現會員權益在訂前、訂后部分關鍵節點存在展示缺失的問題。雖然用戶在流程中能看到權益信息，但整體感知度仍有不足。

針對上述問題，我們需要建立統一的設計原則，在保持各業務線自身特色的同時，形成協同一致的會員體驗，提升用戶對會員權益的整體感知效果。

三、設計優化——從"能看到"到"感知好"

本次優化主要圍繞兩個核心目標展開：一是建立規范的權益展示原則，二是提升用戶對權益的感知度。具體將從以下幾個方向著手：

1. 權益前置，強化展示

根據歷史機票和酒店的項目數據，我們發現將具有明顯優勢的權益提前展示，能夠顯著增強用戶的感知，并有效提升預訂轉化率。例如攜程酒店將會員賬戶中的的權益與預訂流程結合，將原本無早餐的劣勢轉化為會員可免費兌早餐的優勢展示。這樣的方式為我們提供了本次優化的思路——通過權益前置來強化權益，加強感知。

什么樣的權益需要前置？——設定強弱權益規則

為提升會員權益展示效果，我們通過對權益內容的系統分析，將其劃分為兩大類別：強權益和弱權益。

強權益：指與產品線直接相關或對價格產生顯著影響的權益，例如酒店業務的免費早餐服務和會員專享價格。這類權益在用戶購買決策中起關鍵作用，能有效提升用戶滿意度和預訂轉化率，因此需要在核心預訂節點進行重點展示。

弱權益：指與產品線關聯度較低的權益，例如機票業務的快速安檢服務。雖然這類權益不會直接影響用戶的預訂決策，但可作為增值服務提升用戶體驗，間接促進轉化。

為確保權益展示的客觀準確，我們也可以借助內部的權益價值計算公式，量化每項權益的實際價值，幫助我們精準評估和展示權益，為用戶提供更有價值的會員體驗，最終提升用戶滿意度和忠誠度。

2. 讓權益貫穿各節點的策略

在對各業務線的線上頁面進行走查時，我們注意到訂前、訂后部分節點常常出現權益感知缺失的情況。

為了充分提升權益的曝光，我們制定了強弱權益展示的規則，定義了在各節點展示的必要性。在預訂前節點，我們優先展示與用戶決策緊密相關的強權益，并在相關性較低的節點提前展示弱權益，以加深用戶印象并促進轉化。預定后，對收益、轉化率和 CPO（客服來電率）的影響較小，需要做到盡可能強的展示。

根據以上規則，我們在實際點位進行了應用：

以火車票業務為例，我們通過優化權益展示策略，在首頁新增曝光點位、強化現有頁面展示效果，并完善訂后權益展示，使會員權益的觸達貫穿用戶全流程。優化后，權益曝光率和用戶感知強度有了明顯的提升。

3. 更加嚴格的設計規范

此前制定的會員權益視覺規范，因各業務線復雜度不同，在多次迭代后逐漸出現差異，導致不同業務線之間展示不一致、單個業務線內流程不統一的問題。為此，本次優化中我們也重點明確了各類場景的標簽使用規范和文案規范，全面提升展示一致性，同時加強會員身份的表達。

經過以上幾點優化，上線后數據顯示用戶對會員權益的滿意度、會員權益的使用率都有顯著提升，驗證了設計方案的有效性。

四、強化重要節點的感知

除了常規流程中的會員感知，我們也在思考如何進一步加深用戶的印象，讓用戶訂票時優先選擇攜程。

1. 出行中節點——提供好用的體驗

訂后的節點往往容易被忽視，以機票的快速安檢權益為例，用戶通常需要打開攜程 App → 查找訂單詳情 → 定位權益入口 → 完成核銷，步驟較長，導致體驗打折。

新版本中，我們將出行相關的會員權益（如快速安檢）直接前置至攜程 App 大首頁的行程卡片。用戶打開 App 即可快速查看和使用權益，無需多層跳轉。改版后，用戶體驗和權益使

用率都得到了提升。

2. 會員升級節點——制造驚喜感

基于 KANO 模型，我們可以將用戶需求分為三類：基本型、期望型、興奮型，在前面的改版中我們已經滿足了用戶的前兩類需求。我們希望制造驚喜感和儀式感來滿足用戶的興奮型需求。攜程會員體系以“山峰”為視覺符號，不同高度代表不同等級，用戶每次升級，都象征著翻越一座新的高峰。象征用戶翻越山峰的升級節點正是滿足用戶“興奮型需求”的關鍵時刻。

因此，在用戶升級時，我們在攜程首頁增加升級彈窗強化驚喜感和儀式感。用戶打開 App 即可直觀感受到等級提升的成就，并快速了解新增權益。上線后帶來了人均使用權益訂單量、會員中心訪問率等數據的提升。

結語

通過系統化的設計與持續迭代，會員權益體系能夠深度釋放用戶價值，推動品牌的長期可持續增長。在這個過程中，我們需要確保用戶在全渠道觸點中獲得連貫一致的體驗，從而建立穩固的品牌信任，降低用戶的學習與決策成本。同時，我們需要強化會員的價值感知，通過具象化的權益呈現和情感化的設計表達，讓用戶切實感受到專屬特權與歸屬感，最終打造出更具黏性的用戶體驗閉環。

轉載：優設

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

在接觸和學習 UI 設計的時候，我們都必須面對國內外 UI 設計風格差異巨大的問題。比如最近 618，相信大家沒少被國產應用的廣告“親切的”問候。

一方面是尋找設計靈感時要做區分，另一方面則是我們學習 UI 時看的書籍，學習的理論、規范，都是由西方國家產出的，而國內設計的方向卻和它們背道而馳，用一個詞來形容現狀，那就是 —— 割裂。

所以在初學階段，理論學的越多，受到的沖擊也就越大，疑問也就越多。所以我們今天的目標，就是來幫大家解答這個疑問。

一、設計差異的根源分析

當我們研究國內外 UI 設計的差異時，樣式上的差異只是表象，它們是由更深層次的因素所激發，所以我們首先要深究這些問題的根源。

根據過去十幾年的 UI 研究經驗，我總結的設計差異包含下面這些因素：

1. 盈利模式的差異
2. 人工成本的差異
3. 用戶習慣的差異

1. 盈利模式的差異

國外產品相對國內的盈利模式相對簡單、健康，排除掉大型平臺和其它服務配套應用外（比如會員、硬件的配套），基本就是買斷、訂閱、廣告這三個途徑。

比如我們熟悉的 Figma、Canva、Notion 等，都是訂閱制服務，在產品具備足夠競爭力的條件下發展出海量的付費用戶，獲得巨大的收益和估值（團隊只有一兩百人時估值過百億刀）。既然做好產品就能盈利，那這些產品的目標自然是打造更好的產品和提供更好的服務或體驗來獲得收益。

而國內市場我們都知道，用戶付費的意愿是非常非常低的，這就導致很多產品即使做的還不錯也看不到盈利希望，尤其是大廠產品，比如迅雷，百度網盤，網易云等等。

靠基礎付費模式做不出讓人滿意的營收，產品團隊自然要使出渾身解數來找到盈利點，不管是增加一些奇怪的功能，還是制造各種營銷活動。而這些嘗試想要獲得持續的盈利是非常困難的，所以就得一直想，一直嘗試，一直投放。

雖然吃相往往看上去很難看，但不這么做就會“暴斃”，而這么做至少還可以“茍延殘喘”，為了生存和盈利，產品團隊做出什么離奇的操作都能做出來。

這里還要澄清一點，有很多優秀的工具產品不是國內做不出來，是做出來也很難盈利，所以有能力的團隊和開發者是不會輕易往火坑里跳的。

2. 人工成本的差異

第二點就是國內外人工成本上的巨大差異，發達國家的人工成本非常高昂，不只局限在產品開發團隊的成本，還包括底層運營、客服、銷售、業務員、快遞員等等。

而產品的衍生業務往往要借助大量的底層勞力，比如京東做外賣服務，得有充沛的、廉價的騎手作為依托才辦得起來，而這在發達西方國家是難以想象的。比如最近經常討論的為什么日本線下購物市場還很繁榮，線上發展不起來。主要原因之一就是快遞員的成本差了好幾倍，做不出即廉價又便捷的網購體驗。

加上西方國家對雇傭關系的保護，招人容易，裁員可就沒有那么簡單，所以多數產品團隊對擴張都持非常謹慎的態度。人數少，又不能輕易搞 996，就大大限制了產品作妖的范圍，這就直接導致他們沒有人力做一大堆次要功能的迭代以及運營活動，設計需求自然也會低很多。

3. 用戶習慣的差異

最后一點，就是用戶習慣的差異。除了前面說的付費意愿低以外，還有很多其它因素。其中在我看來影響最大的因素，就是國內用戶對互聯網的依賴是遠高于國外用戶的。

國內的移動互聯網行業爆發并不僅僅是局限在互聯網行業里，而是把觸手拓展到各行各業，用贏學的角度來講甚至它還大幅度完善了政府基建和民生服務。我們今天繳納水電費，辦理銀行卡通過線上就能完成，而很多發達國家甚至到今天還要你去營業廳手寫填表。

并且互聯網產品已經成為我們購物、娛樂的重要載體，大量的決策、交易、娛樂是在上面進行的。既然用戶習慣和粘性都成型了，離不開這些產品了，那么“適當損害”一下用戶體驗也不是不可以。尤其是大廠各類離奇的功能和運營活動可以輪番轟炸用戶，同時把用戶對這類負面操作的耐受度都拉高了。

既然用戶都適應了，那么為什么還要“裝清高”，做個簡約的、有原則的、有尊嚴的產品？當然是加入到運營的狂歡里和其它產品一起壓榨用戶的注意力，像孔雀開屏一樣，在最雞肋的器官上比劃……

以上三點，就是造成國內外設計差異的根本因素。最早國內產品的設計是和國外看齊的，但隨著市場的反饋和驗證，我們最終走出了自己的道路。這是商業的選擇，而不是簡單歸因給審美、民族、文化、消費力的限制。

不管創業者抱著什么樣的想法，進入這個牌桌以后，最終都會被市場調教成相同的模樣。

作為 UI 設計師來說，也不要認為這是錯誤的發展方向，因為這種模式大大增加了 UI 設計的需求量，間接提供了更多的飯碗。如果產品都按歐美的模式發展和設計，那對于國內 UI 設計行業來說真正的天塌了，設計崗位會銳減 8 成以上，而這是 AI 設計根本實現不了的破壞力。

二、國內外 UI 的具體差異

有了內因，下面再對國內外 UI 設計的具體差異做對應的拆解，幫助大家更好理解國內市場的設計特征。

1. 中英文字形排版差異

第一個差異，就是中英文的字體形態差異。中文文字是方塊化等寬的，而英文字母則是大小長短不一，詞組長度更長，節奏感更強。所以英文設計中，往往會將字體作為一部分融入到排版中，豐富視覺觀感。

而中文設計中文字的節奏感較弱，文本的主要作用基本就是傳遞信息，所以只用中文排版很難出現英文的相同效果，就會促使設計師添加更多的內容，來豐富界面的效果。

2. 運營需求的平面視覺

第二個差異，就是運營設計上的差異。歐美產品中運營活動不是沒有，但是數量少，而且往往在設計上也做的很隨意，說好聽點叫簡約，說難聽點就是敷衍。

而國內運營活動數量多，且投入精力更大，運營的設計是沒有限制的，可以用上廣告平面的所有視覺手段，不管是插畫還是 3D、AI、擬物、攝影。大團隊往往會配置平面設計師完成這部分工作，小公司就要 UI 設計師自己負責，所以沒有固定的設計要求，水平之間差距也巨大。

運營設計的差異，源自國內廣告設計方向的特色，從早年追求隱喻、創意的合成設計，到現在追求視覺沖擊力的大標題、大色塊設計。

而國內運營設計在今天絕不只出現在一般廣告位中，會見縫插針到所有元素中，比如頁面頂部、二樓、膠囊、圖標區、瓷片區、底部導航等等。

3. 字段和信息數量差異

國內有大量產品的功能和服務都更完善，這也就催生了更多的信息量和交互需求，單一頁面、組件的信息量、交互、狀態就遠遠比國外產品多。

這就導致我們在設計時要考慮這些復雜的情況，需要設計師做具體的業務分析整理字段，還需要做大量的稿件做測試和評審。

不像國外很多簡單的產品內容就那么點，可以花大量精力去搞用研或者測試，在這種情況下光是完成產品需求就很困難，更遑論圍繞那么海量的內容做用研也是很麻煩的。

所以國內團隊雖然會強調體驗，但實際設計過程中必然業務優先，體驗更多是圍繞業務的優化和改進。所以作品集表現上業務的權重是非常高的，絕對不是學習國外的項目包裝邏輯堆砌體驗和用研內容。

4. 品牌視覺特征的差異

在國內激烈的競爭環境中，建立品牌化的視覺感知就是每個產品都要認真對待的事情。但本身產品內容、信息量就已經很大了，要實現品牌化的視覺輸出就沒辦法走傳統品牌的“意識流”路線，使用簡單的配色和大量的留白。

同時，UI 的組件樣式又高度統一，使用常規樣式完成的設計是很難塑造品牌化視覺的。所以最終的解決方案，就是給組件增加更多樣式細節，通過局部的創意來塑造視覺上的差異，同時再和其它應用做出區分。

于是，主流產品就陷入這種樣式上的競賽，非常高頻的更新組件和視覺的設計，希望做出和別人不同的設計同時又有自己的特點。

這種現狀不能說是消極的，因為它確實推動了整個 UI 行業視覺的發展，但對 UI 設計師的視覺素養要求也就更高。所以今天國內的中高級 UI 設計師，轉入國外 UI 市場以后都能實現降維打擊，就是因為市場的要求對自身的磨練遠比外部市場高。

基于以上的差異，可以說在國內做 UI 和和在國外做 UI 是兩種難度，要學習和訓練的方式也完全不同。作為 UI 設計師要懂得理解背后的成因，并不會無腦迷信國外的設計要求和標準，才可以幫助我們更好融入真實的工作。

結尾

結尾再說點有趣的問題，從我們之前學員到國外工作的反饋來看，雖然國內設計容易被嫌棄，但是從設計質量和輸出上已經遠超歐美的平均水平。

而他們的設計師多數還在劃水搞一些無關痛癢的體驗和用研時，我們在解決更復雜的商業問題，如果有機會，建議你們也可以去卷國外的 UI，會有你們想象不到的優勢。

轉載：優設

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

近期完成了一個頗具成就感的項目——青海師范大學大氣污染可視化系統的界面視覺設計與交互設計。

項目背景：

該系統由青海師范大學委托進行重點頁改版，旨在參加環保信息化領域的比賽。原系統界面功能區劃分明確，但數據堆疊較為擁擠，視覺比重失衡，信息層級模糊，導致用戶難以快速聚焦核心內容。

設計策略與優化：

1、風格定位：采用科技感設計語言，以深藍為基底，通過背景圖案增強縱深感，輔以科技感邊框與線條點綴，在豐富頁面層次的同時突出關鍵數據。

2、信息重構：面對龐雜數據，去粗取精，提煉核心內容。通過文字顏色、粗細及高亮處理的差異化運用，強化主次層級，使用戶能夠以直觀的方式獲取信息，有效降低理解難度。

3、視覺優化：以清晰圖表替代文字堆砌，適度留白營造呼吸感。關鍵數據浮于場景之上，形成空間層次，在有擴展性的同時提升閱讀體驗。

4、場景落地：完成全國頁面及山西省臨汾市專題頁的精細化設計，涵蓋治理事件、效果分析及污染濃度趨勢等核心模塊。

一點感悟：

大屏設計的核心難點從來不是炫技，而是將復雜數據轉化為清晰易懂的信息。界面之美，在于讓用戶"一眼就懂"。

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

民宿預訂平臺的首頁設計如何精準捕捉年輕用戶？木鳥、途家、美團三大平臺通過差異化的首頁布局，分別滿足了00后的場景化需求、家庭度假的深度體驗和95后的低價偏好。本文將深入拆解各家平臺的流量分發邏輯，揭示從搜索框到金剛區的每一個設計細節，如何成為影響用戶決策的關鍵因素。

首頁作為每個平臺的門面，不僅是形象的體現，也是所有業務的入口、用戶的必經之路。不同功能的App有著不一樣的首頁模塊，選擇一種適合產品本身的首頁展示方式非常重要。國內民宿預訂平臺們，又是如何通過APP首頁設置實現增長的？

木鳥、途家、美團用戶群體差異

開始進行APP首頁對比分析之前，我們先看下木鳥、途家、美團用戶的差異。

木鳥民宿近年的年度報告中多次提到，00后用戶占比59%。從途家民宿五一客群看，報告中提到：“00后”和“80后”是小城民宿消費的兩大主力，預訂量占比都達到24%。美團旅行清明報告中提到，“95后”占比達到48%。

三大民宿預訂平臺紛紛聚焦95后及00后——那些已經不滿足于“酒店住宿”邏輯，對住宿體驗產生興趣的年輕用戶群。

據馬蜂窩數據，年輕用戶群基礎功能型的“硬性消費”占比從2021年約70%降至2025年約50%，而精神體驗型的“彈性消費”則從約28%升至約42%，沉浸式體驗年增速超過30%。千人千面的消費需求正在倒逼供給側從標準化產品轉向個性化、場景化供給。

回顧民宿市場十余年發展，一條清晰脈絡是“加法邏輯”：從最初的農家樂、日租房，再到網紅特色民宿，再到各種“民宿+”的挖掘。用戶不再滿足于單純的民宿入住，開始期待有更多住宿功能場景之外的體驗。

木鳥的細分場景、途家民宿的度假需求、美團民宿的低價體驗，都不是標準化復制，而是根據各自不同的定位、用戶、體驗需求定制設計。本質上，是回答清楚一個問題：用戶在什么場景下住民宿，旅游出片、攜寵出游、周末度假、同學聚會，不同場景對應不同需求，最終催生出不一樣的產品設計。

從首頁設計看流量分發邏輯

研究表明，較少的選擇會讓用戶更愉悅一些。木鳥、途家、美團作為垂類民宿預訂平臺，核心目標非常直接，省去了多元業務的流量取舍，流量分發和路徑非常清晰。

從三家民宿預訂平臺的首頁來看，首頁的結構制定邏輯決定了首屏內容是權重最高的，越往下權重越低，這是一種頭重腳輕的布局結構。基于這種邏輯，視覺效果的強弱也是由上到下衰減的，而不是下方權重低的模塊反而視覺最突出。

木鳥、途家、美團APP的首頁都把最核心的民宿預訂按鈕放到了首頁首屏中心位置，重要屬性依次下降。木鳥民宿區別于途家和美團民宿的點在于，木鳥民宿只有首屏，沒有下拉界面。這樣做的好處有二：一是用戶目光更聚焦，核心首屏只保留了必要的預訂功能和服務展示，減少用戶在首屏階段的跳出；第二點則是避免了二屏往后的流量衰減，對一個垂類平臺來說，后續屏的設置意義不大，用戶的核心目的就是為了訂民宿。

下面筆者結合各家APP的詳細路徑來詳細拆解。

（木鳥民宿）

木鳥民宿首頁，重要的分流模塊為：搜索、訂民宿、二級導航、金剛區，分發邏輯由明確需求和隱形需求兩部分組成。

明確需求：用戶有明確目的，通過城市及地標定位直接查找民宿；隱形需求：根據用戶興趣不同，潛在需要的分發邏輯，例如周末出游、人氣好房、寵物出游等。

明確需求各家差異不大，核心差異點在隱形需求。首頁的又一個關鍵目標，是為不同風格不同訴求的用戶鋪設合理的下單路徑。

按入住目的來分，有的用戶是精準型用戶，很清楚自己要住在哪里要哪天出行，這樣的結構就方便用戶一次篩選入離時間、地標位置等；有的用戶是半精準用戶，知道自己要去哪個城市但不具體，就可以通過目標推薦給與用戶選擇。

按出行喜好來分，有的用戶是問題導向型，只要有地理位置符合的民宿就可以入住；有的用戶是場景指向或特殊需求，比如攜寵出行、出片等等。

木鳥民宿的目的分區相對清晰，沒有重復的部分。

（途家民宿）

途家民宿的首頁功能則相對繁瑣，各種需求穿插出現。明確需求部分和木鳥民宿的邏輯相同，不同點在于宮格設置。途家民宿的宮格重點在平臺側的套餐推廣和會員，這個區別或許是由于途家民宿營收壓力增大，流量下滑導致單純的訂房傭金收入下滑，不足以支撐途家民宿的自造血，從而平臺側變現需求大。

（美團民宿）

美團民宿首頁沒有平臺業務需求的設計，單純的展示內容資源。首頁結構單一，視覺美觀，但屏幕效率低。

用戶為什么要留在這里？

從三家民宿預訂平臺的首頁結構拆解可以看出，木鳥民宿用戶側和平臺側設計相對平均，途家民宿重平臺需求，美團民宿重用戶需求。這與各平臺的運營現狀緊密相關。

木鳥和途家是中國最早的那批民宿平臺，在2017年之后進入長時間的木途美三大時期。但在2020年途家民宿關停20城直營房源之后，途家民宿的現金流和營收壓力驟然增加，攜程商旅流量下滑加之重心轉向跨境游，途家民宿可謂雪上加霜，難以獨立行走的途家靠自身引流的傭金費用并不足以支撐商業運轉，從而平臺側變現需求增加，這也是途家在首頁中增加套餐和會員業務的最大因素。

木鳥民宿自2020年實現連續盈利后，盡管是一個獨立運營的平臺，但80%的自有流量讓木鳥實現了良好的“流量-訂單-擴張”的循環，網紅民宿以及延伸的細分場景成為平臺引以為傲的產品力，這也使得木鳥兼具用戶體驗和營收增長的雙端利好條件。

美團民宿在首頁舍棄了平臺側內容，主要和美團本地生活的發展息息相關。自外賣大戰開始以來，美團確立的就是高頻帶低頻的戰略，酒旅的變現壓力更多的放在主站美團旅行板塊，對獨立APP的要求并不大。

首頁設計的最終目標還是要圍繞讓用戶多逛逛，多看些民宿，以更少的點擊完成轉化。除設計外，重要的還是民宿平臺的房源和服務。木鳥民宿依托特色民宿體驗場景守住核心用戶，途家期待通過家庭度假需求彌補商旅流量流失及特色體驗短板，美團聚焦絕對低價民宿削弱品質缺失。因此，真正能讓用戶留下來的，仍在于平臺能否在民宿市場的發展更新中，找到不可替代的生態位。

轉載自：人人都是產品經理

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

Voltera 新能源停車充電系統 UI 全案深度拆解

北京蘭亭妙微 UI 設計公司，成立 16 年來，始終保持著對國內外優秀設計作品的學習與研究。我們持續追蹤全球前沿的 UI/UX 設計趨勢，從中提煉可落地的設計方法論，分享給同樣熱愛設計的你。今天，我們來深度拆解一套雙端停車充電系統的ui設計，從信息架構、配色策略、移動端適配到數據敘事的視覺表達，逐一解析其背后的設計決策。

一、項目基礎概述

項目背景與核心痛點

Voltera 是一套服務于新能源停車場的一體化智能管控系統，主要面向兩大使用群體：停車場運營管理人員、新能源車主。

在傳統模式下，雙方都存在明顯使用困擾：車場管理者無法直觀查看車位狀態、充電樁使用數據，場地利用率難以把控；新能源車主尋找空閑充電車位費時費力，充電進度、能耗情況也無法實時了解，雙方使用體驗都大打折扣，信息不通暢成為最大問題。

項目核心目標

1. 面向車場運營者：把繁雜的運營數據簡化呈現，支持全天候實時監控、數據趨勢查看、車位預約管理，讓管理工作更高效；

2. 面向新能源車主：簡化操作步驟，快速找到合適的充電車位，實時查看充電狀態與能耗，打造便捷的用車體驗；

3. 全場景視覺與體驗統一：電腦管理后臺、手機 App、線下廣告屏保持體驗一致，線上線下服務無縫銜接。

1.3 項目覆蓋終端

系統支持多設備使用，包含 PC 端管理后臺、蘋果移動端 App、戶外立式信息屏，全面適配不同場景下的使用需求。

二、全場景使用體驗解析

使用流程：邏輯清晰，操作簡單

整套系統根據兩類人群的使用習慣，規劃了專屬操作流程：車主可完成登錄、查找車位、在線預約、實時查看充電狀態等操作；車場管理人員可查看全場車位數據、統計使用趨勢、管理充電訂單。

使用優勢：

1. 功能分區明確：系統劃分為登錄首頁、全場數據總覽、車位篩選、充電數據查看、系統設置幾大板塊，功能劃分清晰，上手零門檻；

2. 體驗持續優化：結合大量真實用戶的使用反饋反復調整流程，規避操作卡頓、查找困難等問題，適配不同年齡、操作習慣的使用者；

3. 人群需求區分：管理端側重全場宏觀數據，車主端聚焦個人用車需求，功能不冗余，每個人都能快速找到自己需要的內容。

多設備使用體驗（電腦后臺 + 手機 App）

（1）PC 管理后臺：功能全面，管理高效

電腦端專為車場管理人員打造，布局規整合理：左側為常用功能入口，中間展示車位信息，右側搭配全場停車場全景視圖，底部呈現各類運營數據。

使用特點：

1. 信息主次分明：首頁優先展示空閑車位、占用車位、充電車位等核心數據，再延伸至車位詳情、月度 / 周度使用率等輔助信息，查看邏輯循序漸進；

2. 操作靈活便捷：支持全景地圖縮放、鼠標懸停查看車位詳情，還可自由切換年、周、日不同時間維度的數據，滿足多樣化管理需求，適配長時間辦公查看的使用場景。

（2）手機 App：輕量化設計，隨手即用

手機屏幕空間有限，系統遵循 “核心功能優先展示” 的原則，打造極簡使用體驗：

1. 底部設置固定導航欄，將充電這一高頻功能放在核心位置，點擊即可直達；

2. 首頁優先展示停車場全景與推薦車位，充電頁面重點突出充電進度，能耗數據也以簡易圖表呈現，一目了然；

3. 全設備體驗統一：手機端沿用電腦端的信息展示樣式，僅精簡內容，用戶切換設備使用時，無需重新適應，學習成本極低。

視覺與標識體系：清爽直觀，一眼看懂

整套界面采用簡約商務風格，以易用性為核心打造視覺體驗：

色彩標識

· 整體以白色、淺灰色為基底，色調柔和，長時間查看屏幕也不易產生視覺疲勞；

· 用不同顏色區分設備與車位狀態：綠色代表車位空閑、充電運行正常，藍色專屬標識新能源充電樁，橙色提示使用高峰，黑色按鈕標注主要操作選項，無需閱讀文字，僅憑顏色就能快速判斷狀態；

· 品牌視覺統一：簡約品牌標識貫穿所有設備，線下宣傳物料也保持同款風格，整體觀感整潔專業。

文字與留白

文字大小區分明確，核心數據放大展示，輔助說明文字簡潔精煉；頁面預留充足留白，內容排布疏密得當，不會出現信息擁擠的情況。

圖形展示

系統搭配實景圖片、簡易圖表輔助展示：用車場、車輛實拍圖讓場景更直觀；用折線圖、柱狀圖展示數據變化；用彩色區塊區分不同車位類型，告別密密麻麻的文字描述。

 信息展示形式：分區規整，查閱高效

系統將各類信息整合為標準化展示模塊，分類清晰：

1. 車位信息模塊：清晰標注車位位置、步行距離、收費標準、充電標識與預約按鈕，電腦端多列展示、手機端單列排布，查閱方便；

2. 數據統計模塊：突出核心數據，搭配簡易圖表，使用率、能耗等數據直觀可見；

3. 充電詳情模塊：整合車輛狀態、充電功率、剩余時長等信息，電腦端、手機端均可靈活查看。

規整的展示形式，讓信息查找更快捷，大幅提升使用效率。

數據展示：直觀易懂，實時掌握

1. 重點數據放大呈現，車位占用率、充電進度、使用漲幅等核心信息第一眼就能捕捉；

2. 支持多維度數據對比，管理人員可清晰區分普通車位與充電車位的使用差異，為運營決策提供參考；

3. 懸浮提示功能：鼠標點擊或懸停即可查看數據解讀，不用反復跳轉頁面，查看數據更省心。

三、交互與使用亮點

1. 智能推送貼心便捷：車主打開 App，系統會自動推薦距離最近的空閑充電車位，省去手動篩選的麻煩；車場管理后臺首頁直接展示全場運營數據，無需層層點擊查找；

2. 數據實時同步：電腦后臺與手機 App 數據實時聯動，車位狀態、充電進度毫秒級更新，信息零延遲；

3. 操作流程極簡：從找車位、預約、充電到結束訂單，全程僅需幾步核心操作，無多余彈窗與繁瑣表單，使用流暢；

4. 線上線下體驗聯動：線下戶外信息屏與手機 App、電腦后臺使用同款視覺與內容，服務體驗保持統一。

四、項目價值與落地思考

1. 兼顧管理與使用雙重需求：一套系統同時滿足車場運營的大數據管理需求，和車主輕量化的用車需求，幫助停車場降低運營成本，提升整體服務效率；

2. 用數據賦能智慧運營：系統將車位空置率、充電樁使用率等運營數據直觀呈現，幫助車場管理者合理調整定價、規劃充電樁布局，實現精細化運營；

3. 貼合新能源行業調性：整體風格簡約大氣，契合新能源汽車科技、高端的行業定位，區別于傳統老舊的停車系統，提升車場整體形象。

五、核心體驗總結

1. 多設備無縫適配：電腦、手機、線下屏體驗統一，不同場景使用都順手；

2. 數據展示通俗直觀：不管是管理人員還是普通車主，都能輕松看懂各類數據；

3. 流程前置優化：結合真實使用習慣規劃操作路徑，從源頭減少操作麻煩；

4. 精準區分人群需求：針對管理者、車主打造專屬功能，各司其職，實用性拉滿。

轉載自Behance

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

近期和團隊一起完成了一個超酷的項目——飛秒激光時域熱反射測量系統（TDTR）的軟件UI設計。

不得不說，做科研設備設計真的太“上頭”了！

這不僅僅是一個軟件界面，更是連接科學家與納米世界的窗口。

分享一下我們的設計思考，希望能給做B端、科研儀器設計的姐妹們一點靈感～

1. 項目背景：讓復雜的測量變簡單 客戶是一家專注于熱學測試設備領域的科技企業。 

設備用途： 測量納米薄膜熱導率、界面熱阻等。

 核心挑戰： 如何把微納尺度的復雜數據，轉化成直觀、易操作的視覺語言？ 我們輸出了深色和淺色兩套方案，客戶一眼相中了淺色方案！理由是：干凈、通透，長時間盯著屏幕做實驗眼睛不累。

2. 設計亮點：嚴謹中的“小心機” 

配色邏輯：紅灰CP太絕了！

灰色背景： 作為基底，最大程度保證了數據圖表的清晰度，不搶戲。

 紅色點睛： 作為品牌主色和警示色，關鍵操作按鈕和重要數據用紅色突出，既符合工業嚴謹性，又增加了視覺活力。

圖標設計：低飽和度的“科研風” 沒有用花里胡哨的漸變，而是采用幾何圖形+數據可視化元素。

線條扁平化，小尺寸下也能看清，降低科研人員的認知成本。

布局：多面板分欄 左側控制參數，中間展示實時數據，右側顯示擬合分析。

這種布局讓科研人員可以“一眼看全”，不用頻繁切換頁面，大大提升了實驗效率。

3. 從設計到落地：高還原度的秘密 讓人驕傲的是，我們不僅做了UI設計，還負責了QT前端開發！ 

通過多輪的效果走查，我們實現了設計稿的高還原度落地。看著設計圖變成真正能跑代碼、能測數據的軟件，這種成就感真的爆棚！

4. 設計師碎碎念

做科研儀器設計，“克制”是最大的美德。 我們不需要炫技，只需要讓數據更清晰，讓操作更流暢。每一個像素的打磨，都是為了致敬科學的嚴謹。

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

一、AI產品應該如何選擇

現在 AI 產品這么多，作為 UIUX 設計師，我到底應該使用哪一款？

Figma Make、Gemini、Claude Code、Codex，每一款產品看上去都能生成內容、寫代碼、做頁面。

但真正深度使用過后，你會發現：它們擅長解決的問題并不相同。

蘭亭妙微UI設計：今天，我們就站在 UIUX 設計師的真實工作流程中，聊聊每一款產品的能力邊界，以及究竟應該如何選擇。AI 產品更新很快，后續能力仍然會不斷變化。

二、先別急著選工具

在對比之前，我們需要先明確一件事：

AI 產品不是功能越多越好，而是要看它能否進入你的真實工作流程。

比如，我要寫一篇公眾號文章、整理用戶訪談，這和我要搭建一個復雜的頁面 Demo，完全是兩種任務。

如果沒有理解差別，我們就很容易陷入一個誤區：

今天看到別人用 Claude Code，我就去折騰 Claude Code；明天發現 Figma Make 更新了，又把所有流程搬回 Figma。

工具收藏了一堆，最后真正工作時依舊不知道應該打開哪一個。

那對于 UIUX 設計師而言，我們應該重點關注哪些問題？

1. 它最擅長解決什么任務？
2. 使用門檻高不高？
3. 我需要提供多少信息，它才能理解需求？
4. 輸出的是文案、原型、代碼，還是完整工作流？
5. 結果不滿意時，能否快速修改？
6. 它能否與 Figma、瀏覽器和其他軟件進行協作？

接下來，我們逐個拆解。

三、Figma Make：最容易上手的原生設計入口

如果你本身就在使用 Figma，又不想折騰復雜配置，那么 Figma Make 應該是最容易開始的工具。

它最大的優勢在于：距離設計師原本的工作環境足夠近。

你只需要在 Figma Make 中通過對話，就可以創建交互原型、Web 頁面和功能 Demo。

同時，它支持將現有設計稿、競品截圖、產品文檔和圖片素材作為參考內容。比如，你可以丟給它一張競品截圖，讓它參考頁面布局、顏色和內容結構，生成一個相近的頁面。

如果公司已經有相對成熟的設計系統，還可以通過 Make Kits 引入組件、變量、樣式和使用規則，讓生成結果更接近團隊規范。

不過，這里大家需要留意：

接入設計系統，不代表生成結果一定正確。

特別是復雜業務頁面，仍然需要設計師反復檢查信息結構、組件使用和交互邏輯。競品截圖也只能作為參考，并不等于可以像素級還原。

這里稍微多說一點，現如今很多設計師都非常依賴 AI 工具，根本不用自己去做設計，但從來沒有思考過 AI 生成的結果是否正確。比如今天有同學來咨詢一個小的問題，在AI生成的頁面中，他沒有做任何的思考，直接使用結果導致提案失敗，所以我們現在是需要具備判斷能力的。

所以，Figma Make 更適合：

1. 已經深度使用 Figma 的設計師
2. 需要快速驗證頁面想法
3. 希望低門檻生成交互原型
4. 暫時不想學習復雜代碼工具

四、Gemini：更適合資料理解與表達潤色

在我的日常使用中，Gemini 更多承擔的是“內容助手”的角色。

它支持較長的上下文，也具備文本、圖片、音頻和視頻等多模態理解能力。

因此，無論是閱讀行業報告、分析競品資料、整理訪談記錄，還是拆解一段視頻內容，它都非常合適。

在我自己的工作流里，無論是視頻文案、公眾號文章，還是課程資料，我都會使用 Gemini 做初步整理和潤色。

從個人體驗來看，它在表達層面會更自然一些，也更適合處理較長的文本內容。

不過，如果你的目標是直接修改 Figma 頁面，或者搭建一套完整的設計工程化流程，它并不是第一選擇。

Gemini 更適合：

1. 閱讀和總結大量資料
2. 梳理用戶訪談與競品信息
3. 潤色報告、方案和 PRD
4. 生成公眾號文章與視頻腳本

五、Claude Code：復雜工程邏輯的穩定選手

Claude Code 的定位相對明確：

它首先是一款面向工程任務的代碼智能體。

如果你需要理解復雜項目、梳理代碼結構、定位 Bug，或者將一個頁面 Demo 做得更加穩定，那么 Claude Code 會是非常不錯的選擇。

它能夠讀取項目文件、執行命令、修改代碼，也可以通過 MCP 連接 Figma、Google Drive、Slack 等外部工具。

所以，Claude Code 并不是不能接入 Figma，而是它的重心依舊偏向工程實現。

在我的使用體驗中，如果任務涉及復雜代碼邏輯、項目級修改和穩定落地，我會優先考慮 Claude Code。

但如果目標是生成圖片素材、調整視覺風格，或者希望在設計工具之間快速往返，它就不是我的第一選擇。

Claude Code 更適合：

1. 需要處理復雜工程邏輯
2. 希望深入理解項目結構
3. 關注代碼質量和穩定性
4. 已經具備一定工程基礎

六、Codex：串聯設計師的完整 AI 工作流

最后，我們來聊聊 Codex。

目前在日常輔導中，我更建議 UIUX 設計師重點嘗試 Codex。

原因不是它在每一個單點能力上都絕對領先，而是：

它能夠把設計師原本割裂的工作流程串聯起來。

首先，Codex 可以通過 Figma MCP 讀取組件、變量、布局和設計上下文，也可以將代碼頁面重新傳回 Figma，生成可編輯的設計圖層。

這就意味著，設計稿與真實頁面之間不再是單向交付，而是能夠反復往返。

其次，Codex 支持圖片生成和迭代修改。

比如頁面缺少圖標、插畫、背景圖或者產品素材，你可以直接讓它生成，再根據頁面效果反復調整。

然后，它還支持 Computer Use、應用內瀏覽器和插件。

這就讓設計師可以進一步串聯：

需求梳理 -> 頁面生成 -> 素材補充 -> 瀏覽器驗證 -> 設計走查 -> 繼續優化

比如我們之前講過的設計驗收，就可以讓 Codex 通過瀏覽器查看真實頁面，再對照設計稿檢查問題。

當然，功能多也意味著使用時需要先想清楚任務。

Codex 并不是一個“一句話解決所有問題”的魔法工具。你依舊需要明確自己的目標，逐步搭建適合自己的工作流。

Codex 更適合：

1. 希望從想法快速推進到可運行 Demo
2. 需要設計、代碼和素材協同
3. 想搭建設計驗收與自動化流程
4. 希望逐步掌握 Vibe Coding

七、究竟應該如何選擇？

如果你只是想快速生成原型，可以優先使用 Figma Make。

如果你需要整理資料、理解長文本和潤色表達，可以優先使用 Gemini。

如果你要處理復雜代碼和工程邏輯，可以使用 Claude Code。

如果你希望進一步串聯設計、代碼、素材和驗收流程，可以重點嘗試 Codex。

八、寫在最后

其實在我看來，設計師不需要強行選擇唯一一款 AI 產品。

我自己更常用的方式是：

1. 用 Gemini 梳理內容和表達
2. 用 Figma Make 快速驗證原生設計想法
3. 用 Codex 串聯完整工作流
4. 遇到復雜工程問題，再使用 Claude Code 深入處理

工具永遠會不斷更新。

我們真正需要掌握的，不是某一個軟件的固定操作，而是理解它們的能力邊界。

當你面對一個新任務時，能夠快速判斷應該使用什么工具，把想法真正落地，這才是 AI 帶給 UIUX 設計師最重要的價值。

轉載自優設網

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