Neemo Project 企業AI項目管理后臺全案運營價值解析
北京蘭亭妙微 UI 設計公司，成立 16 年來，始終保持著對國內外優秀設計作品的學習與研究。我們持續追蹤全球前沿的 UI/UX 設計趨勢，從中提煉可落地的設計方法論，分享給同樣熱愛設計的你。今天，我們來深度拆解一套企業AI項目管理后臺的ui設計，從信息架構、配色策略、移動端適配到數據敘事的視覺表達，逐一解析其背后的設計決策。
一、項目基礎概述
1.1 項目背景與核心用戶痛點
Neemo Project 是搭載 AI 輔助能力的企業級項目管控后臺，核心服務兩類人群：企業項目管理者、跨部門協作執行團隊成員。
傳統項目管理工具普遍存在運營與使用痛點：
管理者視角：項目工時、任務完成率、周期進度數據分散，需要手動匯總多表格統計，無法實時全局把控項目風險與交付節點；多團隊協作成員、會議、截止任務分散在不同頁面，統籌效率低下；
執行團隊視角：任務缺少清晰時間規劃，到期提醒滯后，流程重復工作占用大量人力，缺少自動化輔助工具簡化重復性工作；
界面體驗痛點：多數傳統管理后臺布局擁擠、深色界面色彩雜亂，數據圖表層級混亂，長時間辦公瀏覽極易視覺疲勞，缺少標準化狀態區分體系，任務進度難以快速識別。
本產品以「AI 自動化賦能 + 全維度數據可視化 + 輕量化任務協同」為核心設計思路，從管理層全局管控、執行層高效落地兩個維度，解決企業項目協同低效、數據統計繁瑣、節點管控缺失的行業痛點。
1.2 項目核心設計目標（以企業真實運營需求為核心）
全局數據直觀可視化：整合工時、任務完成量、周期活躍度、團隊協作信息，首頁一站式呈現，管理者無需多頁面跳轉即可掌握項目全貌；
AI 自動化降本增效：內置 AI 輔助模塊，自動簡化常規流程、分析項目績效、動態管控任務截止時間，減少人工重復操作；
標準化任務協同體系：統一任務狀態標識、日歷排期、會議管理、截止預警模塊，跨團隊成員快速看懂任務優先級與進度；
統一高端深色專業視覺體系：搭建完整組件庫，深色基底搭配高區分度功能色，兼顧長時間辦公護眼需求與 B 端產品專業科技感，全頁面操作邏輯、視覺語言高度統一。
1.3 完整企業項目管理閉環
產品覆蓋完整項目全生命周期管理：項目總覽數據大盤 → AI 績效分析輔助 → 月度日歷任務排期管理 → 截止節點風險監控 → 團隊協作人員管理 → 會議日程統籌 → 任務狀態動態更新與自動提醒。
二、全鏈路企業使用體驗拆解
2.1 項目總覽首頁：一站式全局管控大盤
頁面左側固定側邊導航欄，收納全部一級功能入口，便于管理者隨時切換模塊；頁面頂部為項目基礎信息欄，展示總投入工時、進行中 / 已完成任務總量、協作人員頭像組，配套獨立 AI 助手快捷入口，一鍵調用智能分析功能。
頁面核心區域分層排布多維度可視化圖表：長條柱狀圖展示項目全周期每日任務活躍度，環形進度環直觀呈現整體任務完成率；右側分區獨立卡片承載截止任務清單、團隊會議日程兩大核心模塊，卡片內自帶進度條清晰展示各子任務交付進度，主次信息層級分明，管理者打開頁面即可快速定位風險滯后任務。
2.2 日歷任務排期模塊：清晰規劃每日執行工作
首頁下方嵌入月度日歷視圖，按日期縱向排布當日全部待執行任務；不同狀態任務采用標準化色塊區分：綠色代表已核驗完成、橙色代表進行中、紫色代表待啟動規劃、紅色代表風險逾期任務。
單條任務卡片精簡展示任務名稱、歸屬模塊，鼠標懸浮可展開詳情彈窗，支持快速篩選任務狀態、自定義視圖排序，團隊成員可快速認領、查看自身負責工作，管理者可直觀查看每日團隊負載，合理分配工作量。
2.3 AI 績效分析與截止管控模塊：自動化降低管理成本
獨立 AI 績效分析模塊自動測算流程簡化效率，量化 AI 為團隊節省的工作量；截止管控功能實現全自動化管理：系統自動識別變更交付節點，推送到期提醒，任務逾期時自動重新分配對接人員，無需管理者手動跟進督促。
整套狀態標簽組件統一規范，Active、In Progress、Validation 三類核心進度標識色彩固定，全頁面通用，團隊成員無需額外學習即可快速分辨任務階段。
2.4 團隊協作與會議管理模塊：打通跨部門信息同步
頁面右上角聚合全部項目協作人員頭像，點擊可快速查看成員分工、在線溝通；獨立會議卡片統一記錄會議主題、時間段、會議規劃內容，區分「已規劃 / 進行中 / 已結束」狀態，自動留存會議記錄，避免跨部門信息斷層，減少線下同步溝通成本。
三、視覺與標準化組件系統：高端深色 B 端專業體驗
3.1 色彩視覺體系（適配企業長時間辦公場景）
基底主色：低飽和深紫深色背景，弱化屏幕強光刺激，長時間辦公不易視覺疲勞，塑造科技感專業企業氛圍；
數據高亮色：明黃色用于整體進度環形圖、績效重點數據，紫色作為 AI 功能、待啟動任務主色，綠色代表完成 / 核驗狀態，橙色代表進行中任務，四色形成強區分度，快速識別數據與任務狀態；
文字層級：純白色大號數字展示核心指標，淺灰色小字承載輔助說明，高對比度保障深色界面文字清晰可讀；
操作功能色：白色作為按鈕、彈窗基礎底色，與深色背景形成柔和對比，不刺眼。
3.2 全場景可復用標準化組件庫
整套后臺搭建完整統一組件體系，覆蓋：側邊導航、數據柱狀圖、環形進度指標、任務日歷卡片、截止任務卡片、會議日程卡片、任務狀態標簽、彈窗浮窗、AI 功能按鈕、人員頭像組件等全部頁面基礎元素。
統一組件帶來雙重企業使用價值：
管理 & 執行端：全頁面視覺、交互邏輯統一，新入職團隊成員快速上手系統，降低工具學習成本；
產品迭代端：新增項目模塊、AI 功能、管理報表可直接復用現有組件，大幅縮減設計、開發人力成本，系統拓展性更強。
3.3 品牌視覺體系配套
項目配套專屬點狀抽象品牌 Logo，以圓點陣列構成字母 M 圖形，簡約幾何風格和后臺科技極簡視覺完全統一，線上后臺、宣傳物料視覺語言貫通，強化企業項目管理工具專屬品牌記憶點。
四、交互與企業管理體驗核心亮點
全局信息前置設計：首頁聚合工時、進度、任務、會議、協作人員全部核心數據，減少多層級頁面跳轉，提升管理者統籌效率；
AI 自動化全流程賦能：自動績效分析、到期提醒、任務重分配，替代大量人工統計、跟進工作，壓縮管理人力成本；
標準化色彩狀態體系：任務、數據、功能通過固定色彩區分，無需閱讀文字即可快速抓取核心信息；
輕量化懸浮彈窗交互：任務詳情、人員信息、操作菜單均采用浮窗展示，無需新開頁面打斷當前工作流；
多模塊分區獨立卡片設計：截止任務、會議、周期數據分區隔離，信息互不干擾，邏輯清晰不雜亂。
五、項目商業落地價值
提升企業項目交付效率：全局可視化管控 + AI 自動化工具，提前識別項目滯后風險，降低延期交付概率，提升項目交付質量；
縮減企業管理人力成本：自動統計、智能提醒、任務重分配功能，減少項目專員、行政跟進、數據統計的人工工作量；
差異化市場競爭力：市面多數項目管理工具缺少內置 AI 輔助模塊，深色高端可視化界面精準面向中大型企業、科技團隊，形成獨特產品優勢；
可持續業務拓展：模塊化組件架構可后續拓展多項目臺賬、財務工時統計、客戶對接模塊，滿足企業長期數字化管理升級需求。
六、全案設計總結
雙人群需求平衡設計：同時兼顧企業管理者全局數據統籌、一線執行團隊輕量化任務操作兩類核心訴求；
B 端深色數據界面分層設計，核心指標放大前置，輔助信息收納至次級區域，解決海量數據閱讀困難問題；
AI 功能深度融入產品全流程，用自動化設計解決企業重復性管理工作痛點；
全組件化界面搭建，統一視覺與交互標準，兼顧團隊使用流暢度與產品長期迭代拓展能力。
圖片來自Behance
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
線上醫療問診預約 App 全案用戶體驗價值解析
北京蘭亭妙微 UI 設計公司，成立 16 年來，始終保持著對國內外優秀設計作品的學習與研究。我們持續追蹤全球前沿的 UI/UX 設計趨勢，從中提煉可落地的設計方法論，分享給同樣熱愛設計的你。今天，我們來深度拆解一套線上醫療問診預約 App 的ui設計，從信息架構、配色策略、移動端適配到數據敘事的視覺表達，逐一解析其背后的設計決策。
一、項目基礎概述
1.1 項目背景與核心用戶痛點
本項目是一站式線上醫生預約診療 App，核心覆蓋兩類使用人群：有問診、復診需求的普通就醫用戶、多科室私立診所 / 綜合醫療機構運營方。
傳統線下就醫與老舊醫療預約產品存在多重體驗短板：
用戶端：掛號流程繁瑣，科室查找復雜，醫生資質、出診時間、收費標準信息分散，預約操作步驟冗長；無法直觀查看患者真實評價，難以快速匹配適配自身需求的醫師；
機構運營端：多科室數據分散，預約、改期、取消流程依賴人工客服，人力成本高，缺少統一的患者管理與線上獲客渠道；
界面體驗：多數醫療軟件色調沉悶、信息堆砌，頁面層級混亂，中老年用戶操作門檻高，缺乏安全感與專業舒適感。
本產品以「簡化全流程預約、透明化醫療信息、輕量化多科室管理」為核心設計思路，從患者就醫體驗、機構運營效率兩大維度解決行業現存痛點。
1.2 項目核心設計目標（以用戶真實需求為核心）
降低用戶就醫操作門檻：科室分類直觀，預約鏈路極簡，全年齡段用戶均可獨立完成掛號；
醫療信息透明化：集中展示醫師從業年限、接診人數、收費、出診時段、真實患者評價，幫助用戶快速決策；
優化機構運營效率：線上自助改期、取消預約，減少客服接待壓力，打通多科室統一管理后臺；
統一專業溫和的視覺體系：醫療向低飽和藍為主色調，搭建標準化組件庫，全頁面視覺、操作邏輯連貫，塑造安心可靠的醫療品牌感知。
1.3 完整用戶使用閉環
產品覆蓋完整就醫線上流程：科室快速篩選 / 搜索 → 醫師列表瀏覽對比 → 醫師詳情資質查看與評價查閱 → 選擇就診日期時段 → 一鍵完成預約 → 預約單管理、線上改期取消、就診后評價反饋。
二、全鏈路用戶使用體驗拆解
2.1 首頁科室篩選頁：快速定位就診需求
頁面頂部設置全局搜索框，支持醫生、病癥、科室關鍵詞檢索；下方以統一圖標色塊分區展示全科室入口，心內科、牙科、婦科、心理科等八大常見科室一目了然，無需多層菜單查找。
下方醫師推薦卡片集中展示核心信息：醫師姓名、所屬醫院科室、綜合評分、每日出診時段，底部放置醒目黑色預約按鈕，用戶無需進入詳情頁即可快速發起掛號，大幅縮短操作路徑。同時支持收藏心儀醫師，方便后續復診快速查找。
2.2 醫師詳情頁：完整透明展示醫療信息
點擊醫師卡片跳轉詳情頁，分層陳列全部決策所需信息：
基礎資質：從業年限、累計接診患者數量、每小時診療費用；
就診預約模塊：下拉選擇就診月份、具體日期，多時段分時選擇框清晰區分可預約檔期；
患者真實評價板塊：拆分接診溝通、院內環境兩大評價維度，星級直觀展示醫師服務水平。
全部信息分區清晰，主次分明，用戶無需反復翻頁即可完整了解醫師情況，減少決策顧慮。
2.3 預約與訂單管理頁：自助化降低人工成本
預約成功后生成專屬就診訂單卡片，清晰標注就診醫師、時間、地址；支持用戶線上自主更改就診時間、取消預約，全部操作無需聯系客服。
訂單配套核對清單，區分線上問診、線下到院診療兩類服務，就診前自動留存預約憑證，方便到院核驗，同時減少機構前臺核對工作量。
2.4 就診評價頁面：完善雙向反饋體系
就診結束后用戶可提交多維度星級評價，分別針對醫師溝通服務、醫院環境兩大板塊打分，評價數據實時同步至醫師主頁，為后續患者提供真實參考，同時幫助機構優化服務短板。
三、視覺與組件系統：塑造專業安心的醫療氛圍
3.1 色彩視覺體系（適配醫療行業信任感需求）
主色調：干凈柔和的深海藍，醫療行業通用信任色，低飽和度不刺眼，弱化就醫焦慮感；
基底色：純白 + 淺灰頁面底色，弱化視覺壓迫，長時間瀏覽無疲勞感；
功能區分色：純黑色作為主行動按鈕（預約、提交），高對比度突出核心操作；淺灰用于次要標簽、輔助文字；紅色愛心作為收藏標識，輕微點綴提升頁面活力。
3.2 標準化可復用組件庫
整套 App 統一標準化組件，覆蓋科室圖標按鈕、醫師信息卡片、星級評分模塊、日期時段選擇器、評價表單、底部操作按鈕等全部基礎元素。
統一組件帶來雙重用戶價值：
患者端：全頁面操作樣式、交互邏輯一致，老人、新手無需反復學習頁面操作；
機構運營 & 迭代端：新增科室、活動頁面可直接復用組件，大幅降低開發與設計成本，系統擴展性更強。
四、交互與用戶體驗核心亮點
需求前置篩選：首頁直接展示全科室入口 + 熱門醫師推薦，用戶打開 App 即可完成核心操作，減少跳轉層級；
信息分層減法：醫師卡片只保留關鍵決策信息，詳細資質、評價收納至詳情頁，首頁不堆砌冗余文字；
全自助預約管理：支持自主改期、取消預約，減少機構人工客服壓力，提升用戶自主操作便捷度；
透明化評價體系：多維度星級評價直觀展示醫師服務水平，消除用戶線上掛號信息不對稱的顧慮；
極簡預約鏈路：從選科室到完成掛號僅 3 步核心操作，無多余彈窗、表單攔截。
五、項目商業落地價值
提升患者留存與轉化：簡化掛號流程、信息透明化，降低用戶就醫決策成本，提升線上預約轉化率，為醫療機構拓寬線上獲客渠道；
降低機構運營人力成本：線上自助改期、取消、評價全流程自動化，大幅減少客服、前臺接待工作量；
打造差異化線上醫療品牌：溫和簡約專業的視覺風格，區別于市面上雜亂繁雜的醫療 App，塑造安心可靠的品牌形象；
可持續業務增長：模塊化系統架構支持后續拓展會員套餐、線上問診、治療套餐等增值業務，幫助機構提升長期營收。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
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，覆蓋全套情緒表情：開心奔跑、疲憊低落、加油鼓勵、心動點贊等，適配 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.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
Voltera 新能源停車充電系統 UI 全案深度拆解
北京蘭亭妙微 UI 設計公司，成立 16 年來，始終保持著對國內外優秀設計作品的學習與研究。我們持續追蹤全球前沿的 UI/UX 設計趨勢，從中提煉可落地的設計方法論，分享給同樣熱愛設計的你。今天，我們來深度拆解一套雙端停車充電系統的ui設計，從信息架構、配色策略、移動端適配到數據敘事的視覺表達，逐一解析其背后的設計決策。
Voltera 是一套服務于新能源停車場的一體化智能管控系統，主要面向兩大使用群體：停車場運營管理人員、新能源車主。
在傳統模式下，雙方都存在明顯使用困擾：車場管理者無法直觀查看車位狀態、充電樁使用數據，場地利用率難以把控；新能源車主尋找空閑充電車位費時費力，充電進度、能耗情況也無法實時了解，雙方使用體驗都大打折扣，信息不通暢成為最大問題。
1. 面向車場運營者：把繁雜的運營數據簡化呈現，支持全天候實時監控、數據趨勢查看、車位預約管理，讓管理工作更高效；
2. 面向新能源車主：簡化操作步驟，快速找到合適的充電車位，實時查看充電狀態與能耗，打造便捷的用車體驗；
3. 全場景視覺與體驗統一：電腦管理后臺、手機 App、線下廣告屏保持體驗一致，線上線下服務無縫銜接。
系統支持多設備使用，包含 PC 端管理后臺、蘋果移動端 App、戶外立式信息屏，全面適配不同場景下的使用需求。
整套系統根據兩類人群的使用習慣，規劃了專屬操作流程：車主可完成登錄、查找車位、在線預約、實時查看充電狀態等操作；車場管理人員可查看全場車位數據、統計使用趨勢、管理充電訂單。
使用優勢：
1. 功能分區明確：系統劃分為登錄首頁、全場數據總覽、車位篩選、充電數據查看、系統設置幾大板塊，功能劃分清晰，上手零門檻；
2. 體驗持續優化：結合大量真實用戶的使用反饋反復調整流程，規避操作卡頓、查找困難等問題，適配不同年齡、操作習慣的使用者；
3. 人群需求區分：管理端側重全場宏觀數據，車主端聚焦個人用車需求，功能不冗余，每個人都能快速找到自己需要的內容。
電腦端專為車場管理人員打造，布局規整合理：左側為常用功能入口，中間展示車位信息，右側搭配全場停車場全景視圖，底部呈現各類運營數據。
使用特點：
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.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
現在 AI 產品這么多，作為 UIUX 設計師，我到底應該使用哪一款？
Figma Make、Gemini、Claude Code、Codex，每一款產品看上去都能生成內容、寫代碼、做頁面。
但真正深度使用過后，你會發現：它們擅長解決的問題并不相同。
蘭亭妙微UI設計：今天，我們就站在 UIUX 設計師的真實工作流程中，聊聊每一款產品的能力邊界，以及究竟應該如何選擇。AI 產品更新很快，后續能力仍然會不斷變化。
在對比之前，我們需要先明確一件事：
AI 產品不是功能越多越好，而是要看它能否進入你的真實工作流程。
比如，我要寫一篇公眾號文章、整理用戶訪談，這和我要搭建一個復雜的頁面 Demo，完全是兩種任務。
如果沒有理解差別，我們就很容易陷入一個誤區：
今天看到別人用 Claude Code，我就去折騰 Claude Code；明天發現 Figma Make 更新了，又把所有流程搬回 Figma。
工具收藏了一堆，最后真正工作時依舊不知道應該打開哪一個。
那對于 UIUX 設計師而言，我們應該重點關注哪些問題？
接下來，我們逐個拆解。
如果你本身就在使用 Figma，又不想折騰復雜配置，那么 Figma Make 應該是最容易開始的工具。
它最大的優勢在于：距離設計師原本的工作環境足夠近。
你只需要在 Figma Make 中通過對話，就可以創建交互原型、Web 頁面和功能 Demo。
同時，它支持將現有設計稿、競品截圖、產品文檔和圖片素材作為參考內容。比如，你可以丟給它一張競品截圖，讓它參考頁面布局、顏色和內容結構，生成一個相近的頁面。
如果公司已經有相對成熟的設計系統，還可以通過 Make Kits 引入組件、變量、樣式和使用規則，讓生成結果更接近團隊規范。
不過，這里大家需要留意：
接入設計系統，不代表生成結果一定正確。
特別是復雜業務頁面，仍然需要設計師反復檢查信息結構、組件使用和交互邏輯。競品截圖也只能作為參考，并不等于可以像素級還原。
這里稍微多說一點，現如今很多設計師都非常依賴 AI 工具，根本不用自己去做設計，但從來沒有思考過 AI 生成的結果是否正確。比如今天有同學來咨詢一個小的問題，在AI生成的頁面中，他沒有做任何的思考，直接使用結果導致提案失敗，所以我們現在是需要具備判斷能力的。
所以，Figma Make 更適合：
在我的日常使用中，Gemini 更多承擔的是“內容助手”的角色。
它支持較長的上下文，也具備文本、圖片、音頻和視頻等多模態理解能力。
因此，無論是閱讀行業報告、分析競品資料、整理訪談記錄，還是拆解一段視頻內容，它都非常合適。
在我自己的工作流里，無論是視頻文案、公眾號文章，還是課程資料，我都會使用 Gemini 做初步整理和潤色。
從個人體驗來看，它在表達層面會更自然一些，也更適合處理較長的文本內容。
不過，如果你的目標是直接修改 Figma 頁面，或者搭建一套完整的設計工程化流程，它并不是第一選擇。
Gemini 更適合：
Claude Code 的定位相對明確：
它首先是一款面向工程任務的代碼智能體。
如果你需要理解復雜項目、梳理代碼結構、定位 Bug，或者將一個頁面 Demo 做得更加穩定，那么 Claude Code 會是非常不錯的選擇。
它能夠讀取項目文件、執行命令、修改代碼，也可以通過 MCP 連接 Figma、Google Drive、Slack 等外部工具。
所以，Claude Code 并不是不能接入 Figma，而是它的重心依舊偏向工程實現。
在我的使用體驗中，如果任務涉及復雜代碼邏輯、項目級修改和穩定落地，我會優先考慮 Claude Code。
但如果目標是生成圖片素材、調整視覺風格，或者希望在設計工具之間快速往返，它就不是我的第一選擇。
Claude Code 更適合：
最后，我們來聊聊 Codex。
目前在日常輔導中，我更建議 UIUX 設計師重點嘗試 Codex。
原因不是它在每一個單點能力上都絕對領先，而是：
它能夠把設計師原本割裂的工作流程串聯起來。
首先，Codex 可以通過 Figma MCP 讀取組件、變量、布局和設計上下文，也可以將代碼頁面重新傳回 Figma，生成可編輯的設計圖層。
這就意味著，設計稿與真實頁面之間不再是單向交付，而是能夠反復往返。
其次，Codex 支持圖片生成和迭代修改。
比如頁面缺少圖標、插畫、背景圖或者產品素材，你可以直接讓它生成，再根據頁面效果反復調整。
然后，它還支持 Computer Use、應用內瀏覽器和插件。
這就讓設計師可以進一步串聯：
需求梳理 -> 頁面生成 -> 素材補充 -> 瀏覽器驗證 -> 設計走查 -> 繼續優化
比如我們之前講過的設計驗收，就可以讓 Codex 通過瀏覽器查看真實頁面，再對照設計稿檢查問題。
當然，功能多也意味著使用時需要先想清楚任務。
Codex 并不是一個“一句話解決所有問題”的魔法工具。你依舊需要明確自己的目標，逐步搭建適合自己的工作流。
Codex 更適合：
如果你只是想快速生成原型，可以優先使用 Figma Make。
如果你需要整理資料、理解長文本和潤色表達，可以優先使用 Gemini。
如果你要處理復雜代碼和工程邏輯，可以使用 Claude Code。
如果你希望進一步串聯設計、代碼、素材和驗收流程，可以重點嘗試 Codex。
其實在我看來，設計師不需要強行選擇唯一一款 AI 產品。
我自己更常用的方式是：
工具永遠會不斷更新。
我們真正需要掌握的，不是某一個軟件的固定操作，而是理解它們的能力邊界。
當你面對一個新任務時，能夠快速判斷應該使用什么工具，把想法真正落地，這才是 AI 帶給 UIUX 設計師最重要的價值。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
UI 設計中依舊有很多裝飾圖標要使用偏擬物的設計風格，雖然很多人以為可以通過 AI 來生成，但實際上真正符合頁面需要的設計很難通過 AI 來獲得，所以我們依舊要自己來繪制。
這類輕擬物圖標畫起來并不難，只需要掌握一定的規律以及幾個基本操作技巧即可。而最好的入門方式，就是從“畫圓”開始，就像學素描時最開始畫的圓形石膏，用它來認識光影的效果。
設計中對擬物效果的實現，就是對三個基本要素的塑造，形體、光影、材質。
形體就是物體本身的外輪廓和外形樣式，不同的風格和設計標準會對外形有不同的繪制要求，比如有的復雜寫實有的簡約隨意。除了外形復雜度外，還有個關鍵的知識點，即 —— 透視關系。
透視關系就是現實世界物體在人眼中成像的一種模式，離得越近的東西越大，越遠的東西就越小，也就是我們所說的近大遠小。用一個正方體來解釋，就是當它擺出不同角度時，那么側邊的面會朝遠端逐漸縮小。
如果不帶透視關系，那么它的不同面就沒有縮小的效果，上下邊平行處于等高的狀態。
設計師輸出圖形，就要正確的反映空間關系，加或不加都可以，但不能出現兩種混用的沖突，那就是沒想好要怎么表現。同時就是元素本身角度的控制會對下一步光影的應用產生巨大的影響，因為不同的角度就會形成不同的光影關系，而之所以素描最喜歡從圓開始練起，就是因為圓形 “只有一個” 角度。
第二個光影要素，就是物體在接受光照后呈現出來的高光反射與遮擋光源后形成的投影。如果只有一個圓，在接受一個光源的照射后就會形成下面這樣的光影關系。
也只有在光照的影響下，物體的表面才不會是純色的，也才能反應本身的弧度。所以每次繪制擬物圖形我們都要確定它的光源在哪，決定受光面和投影的方向。
最后一點則是材質，也就是物體表面使用哪種材料，這不僅會決定它使用哪種肌理紋路，也會決定它面對光影的效果。比如一個鏡面材質，表面就是光滑且高反光度的，而磨砂玻璃材質，則是弱反光且具有透明模糊的效果。
上面三個就是擬物圖標繪制最核心的知識點，也是最基礎的美術專業知識，雖然它們還有很多細節可以拓展和學習，但所幸我們今天設計的質感圖標不再是追求高度還原的擬物，而是經過簡化的 —— 輕擬物。
雖然那些知識不能被忽視，但因為我們要設計的東西也簡單，所以可以在一邊實踐中一邊學習，效果會更好。
接著我們就開始來畫圓，掌握擬物效果的實操方式，在這里我們演示用的軟件還是 Figma，只用到最基礎的矢量、填充、描邊、圖形效果等基礎功能。不管你用 Sketch 還是即時設計、Mastergo 都一樣。
第一步就是創建畫布后畫個圓，這個圓用 100-200px 大小就行，然后給圓填充一個基礎的顏色。
然后我們確定這個圓是鏡面材質的，光源是從正上方往下打。所以圓應該上方比下方顏色亮，且因為這是球體有弧度，所以添加的是 “徑向漸變”。通過這個漸變的添加為整個圓的色彩定調，確定明暗關系。
接著添加高光和投影，高光在頂部呈現不規則的橢圓狀，然后使用垂直透明度漸變向下逐漸消失。高光是種折射是會受到反射對象色彩影響的，所以高光也不可能是純白，而要使用和圓一樣色相的高明度色彩。
然后就是下方投影，這里一定要明白投影會反映空間的關系。如果使用默認圖層效果中的投影，它只能表現環境中的背景和我們的視線垂直，光源也是從視線這側來的。而我們現在希望塑造的是背景是在底部，且光源是從上打下來的，那么軟件自帶的投影模式就不適用。
軟件自帶投影的方向
我們希望創建的投影方向
想實現這個效果就要獨立繪制投影，最簡單的方式就是先畫個小點的深色投影輪廓，然后為它添加圖層模糊效果。
到這里圖形基本的狀態和光影效果都有了，但這看起來太粗糙了，想讓它更細膩更生動，就看我們怎么理解光影并為它添加更多細節進去了。
首先作為一個有顏色的玻璃球體，雖然會形成投影但也有光穿過它投射到背景上，那么這些穿過的光線就可以被表現出來，也就是底部要再疊加一層有色的投影。
同時因為光穿透到底部會再往回折射，所以球體底部實際上是會“積累”光線的，這不是明暗交界線，而是玻璃材質本身的一種特性，所以這個積累亮度的底部就要單獨畫出來，然后添加漸變和模糊效果。
而光在打到頂部時高光的形成是在表面之下（這個大家可以觀察玻璃珠），那么表層也有受光面，我們就可以再做個表面的橢圓模糊疊加到上方，讓它的高光面更自然。
最后，就是為圓添加一個描邊，這個描邊還有漸變色，來表現球體邊緣的厚度。而這個厚度在頂部是遠處不是受光位置所以較深，而底部在反光處所以有高亮。
完成上面的效果這個案例就做完了，要想做細節還可以再往下做。我們可以簡單在上面添加圖標，那么就是一個玻璃質感的按鈕。
做擬物類圖標的內核，就是你想表現什么樣的結果，要讓它的細節呈現到什么地步。復雜和極簡沒有對錯，關鍵的是你添加的每個細節都能有真實的物理特性去支撐，那么它們看起來才是合理的。
學習擬物就是認識美術的基本原理的過程，再學習不同細節呈現的軟件操作方式。
軟件是次要的，理解才是最重要的。
轉載自優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
商品卡片是一個廣泛存在于電商產品中的組件，不管是狹義上的商品，還是廣義上的所有可交易產品 (包括課程、服務、游戲等虛擬商品)，都需要商品卡片來承載它們的關鍵信息，以方便用戶快速了解商品的核心屬性。
常見的商品卡片有兩種形式，也是電商 App 普遍使用的兩個視圖，即：網格視圖和列表視圖，卡片在這兩種視圖中有著不同的布局，其信息包含能力也有所差異。
1. 兩種布局
如 Part.1 種所說，商品卡片通常有兩種布局形式，分別是網格布局和列表布局。
①網格布局
網格布局可以使用瀑布流，圖片的尺寸相對來說會更單一一些，因為需要嚴格控制卡片的錯落程度，不至于過于雜亂。
當然，并不是只能做成瀑布流，完全對齊的網格布局也很常見，只需要嚴格限制圖片和字段的高度，且為有高度差異的字段 (一般是標題) 留出空間即可。
②列表布局
列表布局通常也會保持所有圖片尺寸一致，但文本區域需不需要與圖片等高，得看具體項目中商品需要露出的信息多寡，像京東這種信息非常多的，文本區域就可以超出圖片的高度范圍。而如果信息量中等，那么等高是一種比較好的選擇。
但如果信息比較少，強行把某一字段與圖片底對齊的做法會導致組件內的間距比組件間的更大，從而影響親密性識別。
這時候可以在兩個商品之間加分割線。
2. 卡片樣式
主要有三種樣式，我稱之為有全包、半包和開放式。
全包：有明確的卡片背景，將圖片和文本全部包括在內部，比較不常見。
半包：圖片部分會撐滿卡片的邊界，而文本依然在卡片內部，比較常見。值得注意的是如果卡片需要做圓角，圖片朝內的兩個角不需要給圓角。
開放式：沒有明確的卡片背景，圖+文本自成卡片區域，在設計上通常會讓文本兩側較之圖片稍微向內縮進一些距離，在讓親密性表現得更舒適。可以兩側縮進，也可以只縮進右側。
3.卡片內容
不同類型的商品、不同需求的產品所需要表達的信息是不同的，但總結來說有以下這幾類：
其中，圖片、標題和價格，這三個是最基礎的信息，幾乎每個商品卡片都必不或缺。其余的信息則并不一定每個都要包含在內，不同的 App 會根據自己的展示需求挑選其中幾類排布在卡片內。
信息展示的順序、和權重對比，都會根據實際情況略作調整。例如一些國外的電商 App，會把價格的權重做得比標題更大。而對于網格布局和列表布局，所展示的信息盡可能保持一致。但因為網格視圖不適合展示的過長，所以如果信息真的非常多，那么網格視圖可以適當省略。例如小米有品是一個典型的例子，網格視圖相比列表視圖只少了商品規格表，因為這個字段實在不適合放在網格視圖展示。
4. 不同的使用場景
之所以會把使用場景放在這里，是因為商品卡片的使用場景會影響它所展示的信息類型。舉個例子，淘寶首頁推薦內的商品卡片內所包含的信息，就比搜索出來的完整商品卡片少了一些。
這是因為推薦中的商品信息務求直擊要害，其導購需求遠遠強于展示需求，同時也考慮到推薦頁應同屏展示更多商品，所以會把其他可能會影響用戶獲取核心信息，且可能造成卡片過長的字段全部隱去了。
同理，商品卡片在購物車中的信息也不一樣，考慮到存在于購物車中的商品都是用戶已經了解過大部份信息的商品，所以設計時要抓住用戶在這種場景下最關注的內容——價格和規格，所以購物車中的卡片會多出一些價格變動、規格重選、數量修改等信息。
總之，商品的使用場景很大程度上會影響展示信息的選擇，最核心的要點是一定要考慮用戶在不用的場景下，最核心的信息訴求是什么，不同 App 對此可能有不同的做法，我在這里也無法一概而論。
5. 不一樣的商品卡片
①Asos/Massimo Dutti
國外的電商 App，尤其是品牌自己的 App，總是會做得非常極簡，一個標題一個價格一張圖片，幾乎做到了商品卡片最簡潔的狀態，這是品牌氣質決定的，也是產品定位決定的。所以國內走出海路線的 App 大多也會是這個風格，比如 Shein。
②馬蜂窩/飛豬
舉這兩個例子并不是因為兩者的組件設計得有多精妙，而是因為它們有著另一種不同的商品，以及所呈現出來的不同的組件——酒店。
我在這里想要說明的是，不同的商品類型可能也會有其特有的字段類型，尤其是服務型商品，不同的服務所呈現出來的組件會有很大不同。
這里收集了一些商品卡片的線上案例，也可以作為設計時的參考：
轉載自優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
1. 初識B端產品和C端產品
C端 Consumer，表示為消費者、個人用戶或終端用戶設計，直接面向普通用戶提供服務來幫助他們實現個人需求。B端 Business，它面對商業和企業，是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺。
在我們日常生活中，在手機上使用的大多是 C 端產品，單一的 C 端產品通常是為了實現單一的需求。比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產品的核心功能。
而面向 B 端的產品，我個人稱之為「暗渡陳倉」，當個人用戶為實現個人需求產生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即 C 端產品的后臺產品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業、業務部門提供的企業級服務產品，以及面對企業或者個人提供的平臺級工具產品等。
雖說我們日常使用的更多是 C 端產品，但是 B 端產品對我們的影響也是時時刻刻存在著。C 端產品在明，逐漸改變著現代人的生活方式，B 端產品在暗，間接服務于用戶，讓一切流程化秩序化，并且具有多個主要功能點。
2. B端和C端產品的區別
在我看來，C 端產品以消費互聯網為主，B 端產品以產業互聯網為主，C 端更感性，而B 端更理性。
從使用者的角度來說：
從開發的角度來說：
3. 后臺產品常見分類
后臺產品按其作用可大致分為兩類，一是支撐前臺產品，二是管理各種資源。我認為后臺產品應當是囊括在 B 端產品的范圍之內的，常見的類型包括：
1. 初識后臺產品設計
說起后臺產品，很容易想到復雜、龐大、邏輯縝密，而作為設計師，則苦于競品短缺、架構復雜，設計的前期工作比設計本身要復雜得多等問題。
后臺產品不同于普通用戶所使用的 APP，它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的 app，再給他幾個其他的音樂 APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。
對于后臺產品來說，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產品的使用者一般都是在該行業沉淀了很久，所以要對后臺產品進行設計就需要同樣了解該行業，甚至更能洞察該行業，業務本身的復雜性質決定了后臺產品架構也會比較龐大；然后，無論是工廠商家的進銷存管理，還是政府醫院的工作流和業務流，乃至企業內部的產品，除了不同行業都有門檻外，對信息和產品也有「保密協議」的使命感，所謂「隔行如隔山」，在后臺產品更是如此；最后，后臺產品設計往往沒有固定的功能架構和商業模式，對于產品經理的邏輯思維能力要求更高，設計師不僅僅是做界面、優化流程，也要主動和產品經理溝通交流，并對產品進行思考和探索。
2. 后臺UI設計工作流程
后臺 UI 設計的工作，大體分為三個部分：需求分析、設計執行、數據分析。
在需求分析階段，要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況，比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。做這個產品是為了解決什么問題？想實現什么目標？使用這個系統的用戶有哪些？不同角色的用戶有哪些具體的權限？是否需要對每一個用戶的行為都生成操作日志？產品有哪些主要的功能模塊？產品的業務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？成功地做出大而全的后臺產品，是整個設計團隊和開發團隊能力的體現，而對很多小團隊來說，只能做一些大團隊不愿去做的產品，或另辟蹊徑在某些方面做專做精。
在設計執行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等，交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。原型設計完成，開始做 UI 視覺方面的設計，而這時后端同步構思需求的實現方案。UI 設計師向前端了解實現框架，方便交接和溝通。當界面實現，UI 設計師應該是最早進行測試的，力求視覺設計和代碼實現無誤差。在完成設計執行后，從信息層級、文字、圖標、圖片等方面進行設計走查，進行多次設計驗證與測試。
數據分析是產品優化迭代的重要依據。進行多番測試和評審后交付客戶（或內部）使用，根據產生的具體問題進行不斷迭代，且觀察產品能否通過準確的數據反映問題、體現能力，應虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優化產品的重要途徑。只有達到了管理和運營的指標，后臺產品才是真正產生了價值。
3. 制定設計規范的作用
為后臺產品制定設計規范有哪些作用和好處呢？簡單來說就是對產品好、對自己好、對團隊好、對客戶好。
以下數值為參考，請結合特定產品靈活運用。
統一尺寸
據統計，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設計的話，向上適配或者向下適配誤差會比較小。
適配方案：面向多個客戶，后臺產品設計功能型頁面的尺寸統一為 1440*900，按照柵格系統原則向上或向下適配。展示型頁面以 1440*900 為主，同時設計出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實現前端實現效果和高保真設計圖誤差最小。面向公司內部的后臺系統，由于各個職工電腦屏幕是統一采購、統一尺寸，所以開發適配的分辨率可以統一尺寸進行設計，這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。
頁面框架
頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側菜單欄、主體內容三大區域，其中頂部菜單欄、左側菜單欄為固定結構，右側主體內容根據分辨率進行動態縮放；上下欄布局包括頂部菜單欄和主體內容兩大區域，其中頂部菜單欄為固定結構，主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值；左右欄布局時，左側菜單可收縮展開，收縮狀態下固定寬度。
柵格布局
柵格系統的使用是為了解決自適應和響應式問題，從而更好地進行產品設計和產品開發。響應式柵格采用 24 列柵格系統實現，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進行動態縮放。
谷歌規定模塊和結構之間要以 8px 為基準，布局間相對間距可采用 8px 以及 8 的倍數，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準。柵格布局是為了輔助設計，靈活運用，不要被它所局限。
尺寸設定
一般在整體區域左上角放置產品 LOGO 及產品名稱，大部分系統頂部欄高度 48+8n，側邊欄寬度 200+8n。我常用的是頂部欄高度 56px，側邊欄寬度 200px，側邊欄收縮狀態寬度 56px，右側的側浮窗寬度 400px。
相對間隔
定義主體內容的上下左右邊距，定義主體區域內各模塊的邊距及安全寬度，超出內容區域的部分采用區域內滾動或整屏滾動，視情況固定導航欄。
顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求，可能也會將統計圖、標簽等進行統一標準色設定。
品牌色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等。
輔助色用于提示其他場景，比如成功、失敗、警告、無效等。
中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現不同的層級結構。
其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。
后臺系統常用的字體：windows 系統，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。
后臺系統中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。
行高設定，根據文字大小及使用場景設置行高，一般行高=文字大小+6px/8px。
圖標是 UI 設計中重要組成部分，一般分為功能圖標和應用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協調美觀。在后臺產品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。
除了某些常用的圖標，有一些專業性的操作和詞匯則需要設計師進行繪制，現在比較高效方便的方法是在 iconfont 提供的圖標模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標尺寸按照 8 的倍數進行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調用，調整大小和顏色更為方便，且能夠優化系統內存和性能。
按鈕是后臺產品進行交互設計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態包括默認、懸停、點擊和不可用。
按鈕根據需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照 8 的倍數設定。如高度分別設定為 24、32、40px。
規范整理時要規定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態展現出來。
填充按鈕之間間距最小為 10px。
導航的類型有很多種，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。
各類導航中的字體大小可進行統一設定。
頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。
側欄菜單為垂直導航菜單，可以內嵌子菜單。
下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。
步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。
分頁的高度設定為 24px、30px、32px，根據應用場景適當增減內容，比如設定每頁展示數據的條數、跳轉至指定頁等。
面包屑用于說明層級結構，使用戶明確當前所在位置，并且可以回到任一上級頁面。
徽標數用來通知用戶當前有未讀消息，一般出現在圖標的右上角或者跟在文字后面。
表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。
字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經常應用在登錄注冊，雖然減少了面積，但是增加了理解難度。
輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。
輸入框的尺寸可按照8的倍數進行設定，比如 24px、32px，也可根據系統實際情況進行設定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為 20px，有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側（預留出位置）。
表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內正文字體 14px，文字和左右兩邊邊框的邊距 10px。
選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復選框多為方形。
搜索框和選擇框的高度為 30px 或按照 8 的倍數自行設定，通常和輸入框保持一致。搜索框距離右側按鈕 4px，內部文字 14px。
單選多選框尺寸 16*16px，多個選項橫向排列間距 16px，縱向排列間距 8px。
開關按鈕外框 40*20px，內部圓形 16*16px。
表格在后臺產品 UI 設計中占比非常大，用來展示數據、統一管理、作為詳情入口，是最清晰、高效的形式之一。在設計規范中需設定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。
表格主要分為五大區域：選擇搜索區、操作區、表頭、正文、底欄。選擇搜索區放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區指各種對表格內容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數據，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內操作；底欄顯示分頁、總數統計等。
表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數據在第一列增加多選框。
行高
表格行高可設置為表格內字體高度的 2~3 倍，主表格會間隔顯示不同顏色，用于區分不同行數據、加強視覺流引導，展開單行的內置表格可采用純色，選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區分。表格行高可采用 36、40、48、60 等。
行數
表格行數太多加載速度會降低，延長用戶等待時間；行數太少會導致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數是 20 或 50，用戶可以根據自己需求選擇默認的行數。設定行數之后，如果每頁行數多于每屏行數，可在表格內引入滾動條，這時可以固定表頭滾動內容。
列寬
列寬根據內容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內容的長度固定時，列寬應大于固定寬度（比如時間、MD5、SHA1）；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以「...」展示，鼠標懸停出現完整內容（比如詳情、描述）。
列數
表格列不應過多，列數比較多的情況下應該合理進行合并、隱藏、刪除或進行優先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
對齊方式
表格內的文本應按照文本類型不同進行統一規范，如金額類數值保留相同位數小數，SHA1 雖然是一串數字但是其實那并不是數據而是一串編碼，所以可以像文本一樣左對齊。根據文本內容不同，對齊方式也應靈活調整，可采用文本左對齊、數據右對齊、金額小數點對齊的方式。數據前面有標簽的，將標簽前置對齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據產品需要在文本前面增加「復制」圖標，方便用戶調用。
詳情入口
表格內部數據的詳情入口，將能點擊下鉆查看詳情的內容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。
包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態等。分為模態框和非模態框，區別是是否會打斷用戶工作流。
彈框又稱對話框，是疊加在應用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。
彈框
彈框出現時，主題內容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時采用有關閉圖標的彈框和無關閉圖標的彈框，引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉， 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框，或者再次進行交互梳理。
側滑框
側滑框又稱抽屜，出現在右側，固定寬度 400px，高度覆蓋在主題內容之上，點擊側滑框以外的區域則收起側滑框。
骨架屏
為某些特定數據提供數據加載等待時的占位圖形組合。
全局提示
建議停留時間 3s，可根據文字字數調整停留時間，文字內容限制在 30 以內。
警告提示
用不同顏色和樣式展示需要關注的信息。
通知提醒
消息通知和警告信息用通知提醒框，單個消息從頁面右側以抽屜的方式劃出，用戶可手動關閉，或停留 3s 后自動關閉。
繪制不同類型的情感化插畫表示缺省狀態，如404、500、暫時沒有數據、沒有新消息等。
頁面需要一個默認的底色，錯誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。
數據可視化部分可能是后臺產品中對視覺設計要求較高的部分，使用情境為各類統計圖、大屏展示頁面等。
功能型頁面的數據可視化可以引入圖形化設計組件，Echarts、G2、d3等；展示型頁面的數據可視化則可以做得更有趣，比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。
考慮到數據可視化可能會需要深色淺色不同的背景，在數據可視化統計圖的色彩搭配上要注意顏色的拓展性。
不管是做 C 端產品還是 B 端產品，都是為了實現用戶的需求、幫用戶解決問題。
剛接觸后臺產品的時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發現項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多，對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力，合理引入 antdesign 和 element 等開源的設計組件，會使得設計師以及前端事半功倍，有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。
在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
分別站在整個產品設計研發流程中各個角色的不同角度，在工作中可能會有以下“抱怨時刻”：
由此，體現出搭建設計規范的作用和意義：
搭建設計規范的意義
產品側：?個產品不同分支多個團隊完成的時候，可以保證產品團隊使用同一份設計規范快速完成產品原型設計。保證可復用模塊的交互體驗的?致性。
設計側：通過設計規范去解決大部分需求，極大提高效率解放雙手，讓設計師能去做一些更發揮創意和想象力的設計。
開發側：形成開發資產，可以提升研發效率，降低維護成本。開發工程師無需再重復開發同?個組件，只需要去組件庫里調用即可，配合業務邏輯，高效完成界面開發，做到開箱即用。
測試側：標準化的設計規范，是測試人員最喜歡看到的。例如，設計規范規定彈窗 footer 區按鈕組居右，那么測試人員只要測到不居右，就可以給產品提優化建議了。
設計規范中具像化的環節是設計組件化，最早可以追溯到工業革命時期，福特創造的流水線生產方式。福特將汽車分解成零部件，再把零部件模塊化組裝，這?創舉極大的提高了生產效率。
根據資料顯示，T型車是世界第一款大量使用通用零部件，并進行大規模流水線裝配的汽車。這種方式極大地提高了T型車生產效率，降低了生產成本。1914年，福特已經可以做到93分鐘生產一輛汽車，而同期其他所有汽車廠商的生產能力總和也不及于此。到了1920年代，T型車的價格甚至降到300美元一輛（問世之初T型車的售價僅需850美元，而同期的競爭對手則通常為2000-3000美元一輛）。
原子設計理論最初來源于化學領域，這一點從名字可以聽出來。在化學中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。
2013年前端工程師BradForst將此理論運用在界面設計中，形成一套設計系統，包含5個層面：原子、分子、組織、模板、頁面。
當公司的業務產品逐漸擴大時，我們就需要制定一套完整的設計系統，提升設計和開發的協作效率，統一所有設計師的輸出物。
總之，將設計拆分成一些基本元素，例如一個按鈕、一個彈窗，再根據業務需求、產品邏輯重新組裝，形成最終的產品，這就是原子設計理論（組件化設計），區別于整體設計制造的一種新的工作流程。
1. 設計系統搭建—原子
原子是物質的基礎組成部分，是構成設計系統的最基礎元素。
在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、陰影等。
2. 色彩體系
中后臺產品的色彩體系主要分為3類：品牌色、功能色、中性色。
色彩體系
3. 文字體系
B端產品的文字系統設計目標：增強閱讀體驗、提升信息獲取效率，字體是體系化界面設計中最基本的構成之一。
字體的大小、字重、色彩區分體現界面信息的層級關系。
文字體系
4. 陰影、圓角、線條
陰影：在B端界面中，有些特殊的元素會使用到陰影，從陰影中我們可以看出物體距離平面的高度，距離平面越高的物體陰影越大；
圓角：從直角到圓角給人帶來從嚴謹冰冷到柔和親切的心理感受，在B端界面中，常用2-8px圓角；
線條：分割模塊及輔助定位。
5. 后臺設計系統搭建—分子
在界面中，分子是按照規律組合起來的元素，如：按鈕、搜索框、選擇器等。
以按鈕為例，文字、色塊、圖標和間距這些抽象的原子產生關聯組合成分子：圖標、文字傳達含義；顏色、圓角傳遞特性；間距、尺寸定義規范。
6. 后臺設計系統搭建—組織
分子+原子組合成更復雜和可拓展的組織（區塊組件），如搜索區、卡片列表區、表單區、數據統計區等。
7. 后臺設計系統搭建—模板
由原子+分子+組織構成的更復雜更專注頁面底層架構，并非具體頁面。
8. 后臺設計系統搭建—頁面
帶業務邏輯的場景案例，如標注場景、權限管理、詳情設置等，將頁面模板填充真實的文字、圖片后形成頁面，即帶交互邏輯的高保真原型圖，真實內容使設計系統有了“生命”。
雖然通過設計規范可以對產研流程提效，但在開發還原中還是會經常遇到一些棘手的問題。
為了解決和優化上述的問題，DesignToken應運而生。它可以解決產品設計和開發過程中的細節、變更和風格一致性的問題，有效提高產研團隊設計質量和協作效率。
1. Design Token 介紹
“Token”原本的意思是“令牌，指令”，與Design連在一起指“設計變量”。在工程邏輯中用于用戶身份與服務器端進行驗證，而在設計體系中，DesignToken則可以簡單理解為封裝的視覺樣式參數。它通過規定樣式參數，并通過一套符合設計師、工程師理解的統一的命名規則，為這些樣式參數的定義名稱。
2. Design Token 優勢
① 設計語義更易理解
幫助設計師和開發建立統一語言，設計方案更加一致。
從下到上的Design Token 命名思路
②主題皮膚一鍵替換
主題皮膚的替換可以用在兩個維度，一是淺色模式和暗色模式的替換，二是不同品牌色之間的替換。我們可以將不同主題的同一個場景下的顏色使用同一個Token命名，達到一鍵換膚的效果適配不同客戶方案。
③設計變更高效維護
替代傳統工作流一鍵替換效果。例如修改二級文本的顏色，傳統工作流需要先修改設計規范，修改設計稿，然后輸出給開發，開發逐一更新代碼，完成后提交給設計師進行走查驗收。而當使用Token之后，只需要更新Token參數，就可以直接導出JSON給開發，一鍵自動更新。提高效率不止一點點。
④設計效果精準還原
代碼編輯器自動化提示顏色選擇，如不正確則產生報錯。
使用Token開發和傳統開發的對比
總結一下使用 Token 開發的優勢：
3. Design Token 應用流程
第一步：提煉 token 元素；第二步：定義命名規則；第三步：整理 Design Token 資產表；第四步：開發與應用。
Design Token 應用實踐
接下來具體說說如何為 Design Token 命名，命名方式目前并沒有絕對統一的要求，不過有一定的邏輯規則，可以由設計師找前端開發一起商量出一個都能通俗易懂便于理解的命名規則，舉個例子：
命名規則示意
為了更好的統一規范，應用 Token，建議成熟的互聯網公司設計團隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。
轉載自優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
AI 行業的爆發始于2022年 ChatGPT 和 Midjouney 的發布，到現在已經快4年了，整個發展過程用突飛猛進、日新月異形容一點都不過分。
但不管它過去還是現在，發展得有多迅猛，都依舊處于行業早期的開荒和發展階段，離真正成熟的理想形態還有很長的一段路要走，這是我們首先要達成的共識。
而之所以有這樣的結論，原因就是 AI 的發展速度是超過現實世界匹配它的速度的，這造成了一種經濟和機會成本上的巨大阻力。
簡單來說，我們可以把 AI 技術的應用拆分成上、中、下游三個層，上層是 AI 的核心，主要是算法、大模型，中游是負責運行AI模型的硬件和支撐，即 AI 芯片、光模塊 CPO、高速內存 HBM、服務器液冷、特高壓電路等，下游即 AI 具體的應用工具，包括 AI 軟件、硬件、智能體等。
這是一個非常龐大且復雜的產業鏈，它們之間是需要相互耦合，才能順利應用到具體的使用場景中。
簡單來說，就是 AI 模型廠商需要根據技術路線和成本選擇硬件并購買算力中心，以及消耗海量的電力來訓練自己的模型并維持它的正常運轉。雖然這些背后的基建作為普通用戶可能感受不深，但頭部廠商的競爭已經到了白熱化的階段。
比如大模型的開發必然要關注硬件規格和架構，大洋彼岸除了英偉達外，還陸續推出了谷歌 TPU、微軟 Maia、英特爾 Gaudi 等芯片，它們代表了不同的技術方案，應用在了不同的模型上。
而因為貿易和地緣政治的因素，國內是無法進口這些高端芯片，所以我們只能自研生產以滿足國產大模型的需求。如阿里在自研并應用自家的真武系列芯片， DeepSeek 近期更新緩慢的重要原因就是因為要適配華為的昇騰系列芯片等。
之所以要提這點，是因為 AI 大模型的發展也適用馬太效應，贏家通吃。在接近性能和水平下誰家應用的算力、電力成本最低，誰就具備了最大的優勢。
而每家大模型廠商都要面臨技術路線的選擇，并投入海量的成本孤注一擲做基建，很難走回頭路。這種發展路徑注定會讓行業發展充滿波折和動蕩，會有很多企業倒在半路上，連帶著它們提供的產品和服務一起逐漸消亡。
比如文生圖的 OG Midjounery，已經無法跟上大廠的技術和訓練規模掉隊，在今天已經無人問津，而一年多前網上還到處都是用 MJ 生成UI界面設計，UI 設計師要下崗的帖子。
強如 OpenAI，也要應對 Google、X AI、Anthropic、Seedance 的沖擊和成本管理失控（GPT5 訓練量需要消耗一個中等規模城市1年用電量），也在近期放棄旗下的文生視頻工具 Sora。
模型和硬件端都充滿了巨大的不確定性，因為技術的發展是需要“試”出來的，總有前浪會被拍死在沙灘上。至于誰會被拍死在沙灘上就不是站在今天的視角上能回答的。
再回到我們今天的主角 Anthropic，這是一家非常務實的 AI 公司，專注于開發有商業應用場景的大模型，是寫作、編程等領域中的最佳選擇。與之相對的則是類似 ChatGPT、Gemini 這類全能多模態大模型。
因為其模型可用性極高，所以從去年開始付費用戶量暴增，在今年初預估年化收益已經超過300億美元，不僅用戶付費率遠高于 OpenAI，且運行成本也遠比它低。
而這家公司想要年底要上市（估值8000億美金），產品矩陣的拓展就成為非常重要的資本策略。通過發布 Claude Design，能很好的和 Claude Code 實現聯動，完成使用 AI 開發軟件的閉環。
至于現階段 Claude Design 夠不夠用不重要，畢竟故事和邏輯是成立的，作為初版它也有后續升級迭代和優化的空間。在我們目前的試用中，它的生成效果也就那樣，但消耗的 Token 量（你最好確保自己有個足夠鼓的錢包）……
Claude Design 有新上市的光環風頭正盛，那是否還記發布也還不久的Google Stitch、OpenClaw、FigmaMake、Rive、Pencil 等等。
再往前是否還記得使用 StableDiffusion 訓練 Lora 和 Checkpoint 的工作流？
工具一直在更新，即使今天還很粗糙。但用發展的眼光看問題的話，終有一天它生成的質量會足夠高足夠智能足夠可控，甚至通過腦機接口 BMI 實現所想即所得的水平（又到了做夢的時候）。
但是，那天是什么時候？
以及，和你現在設計的界面有什么關系？
作為設計師一定要搞清楚的邏輯，就是 AI 生成界面和圖像的過程，只是一種工具的發展和進步，提升了設計師的設計效率。就像人類發明了電腦和軟件，取代了尺規作圖，同樣也大幅度降低了設計的效率和成本，但設計師這個崗位并沒有消失。
因為使用工具的人之間的差異，會直接影響最終的輸出效果，就像用同一個 AI 生成工具你可能就是做不出網上高贊帖子的案例，都用美圖秀秀不用 PS 去 P 圖你也 P 不過有一定專業積累的攝影師。
而且任何工具使用都有門檻，就一個簡單的 Claude Design、Google Stitch 安裝和使用都需要學習和適應，生成結果還要做大量的調節和校準，這些就不是工作量，老板和產品經理也一定能閑得每天學習新工具并且直接自己干？
我相信有很多公司現在都很熱衷于擁抱 AI，強行推進 AI 的工作流，從企業戰略和發展的角度來講是能夠理解的，但在實際執行層面上卻不會像想的那么美好。其中最大的問題就是前面提到的整個產業的不確定性，產品還都有各自的局限。
每個團隊在搭建 AI 工作流的時候需要做技術的選型，以及圍繞自己的實際生產場景優化工具的使用方式。往往為了一個簡單的工作結果就要耗費大量的精力去搭建工作流，而這個工作流很可能是一次性的，因為之后的工作場景發生改變這套工作流就用不了了。
有些同學可能心態好點覺得這種過程可以收獲寶貴的經驗，但最不幸的，就是工具的升級和更新（甚至關閉）可以直接顛覆掉原來的做法，讓原先的成果毫無意義。
在我朋友中普遍得到的反饋，就是在稍微復雜的專業場景中，強行適配 AI 的結果往往只有增加工作量，原先目標的降本增效，實際導致了更長的工作時間和更晚下班，從去年到現在在不同 AI 工具中做研究疲于奔命。
換個角度思考，其實就是工作過程變成今天用 PS，明天用 Figma，后天用 Excel 或 PPT 進行設計，每一陣子換個工具設計相同的東西，而它們又不能解決設計過程中最復雜的決策部分。
也就是我們一直在使用充滿不確定性的工具去尋求相對確定的結果。
這就是今天 AI 工具在 UI 行業中應用的真相，不管我們怎么用邏輯還是格局去判斷未來 AI 要實現一切，但起碼不是今天和最近，就是變得更強了，也依舊需要有人去操作和控制。
而我們現在要做的是關注最終輸出的結果，而不是和別人炫耀 Figma 用的好，還是 Sketch、XD、即時、Pixso 用的好。等到市場競爭格局基本確認，通用的工具也普及以后，再去掌握和學習也不會低人一等（門檻不會高到哪里去）。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://www.payeee.cn