民宿預訂平臺的首頁設計如何精準捕捉年輕用戶？木鳥、途家、美團三大平臺通過差異化的首頁布局，分別滿足了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.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。
近期和團隊一起完成了一個超酷的項目——飛秒激光時域熱反射測量系統（TDTR）的軟件UI設計。
不得不說，做科研設備設計真的太“上頭”了！
這不僅僅是一個軟件界面，更是連接科學家與納米世界的窗口。
分享一下我們的設計思考，希望能給做B端、科研儀器設計的姐妹們一點靈感～
1. 項目背景：讓復雜的測量變簡單 客戶是一家專注于熱學測試設備領域的科技企業。
設備用途： 測量納米薄膜熱導率、界面熱阻等。
核心挑戰： 如何把微納尺度的復雜數據，轉化成直觀、易操作的視覺語言？ 我們輸出了深色和淺色兩套方案，客戶一眼相中了淺色方案！理由是：干凈、通透，長時間盯著屏幕做實驗眼睛不累。
2. 設計亮點：嚴謹中的“小心機”
配色邏輯：紅灰CP太絕了！
灰色背景： 作為基底，最大程度保證了數據圖表的清晰度，不搶戲。
紅色點睛： 作為品牌主色和警示色，關鍵操作按鈕和重要數據用紅色突出，既符合工業嚴謹性，又增加了視覺活力。
圖標設計：低飽和度的“科研風” 沒有用花里胡哨的漸變，而是采用幾何圖形+數據可視化元素。
線條扁平化，小尺寸下也能看清，降低科研人員的認知成本。
布局：多面板分欄 左側控制參數，中間展示實時數據，右側顯示擬合分析。
這種布局讓科研人員可以“一眼看全”，不用頻繁切換頁面，大大提升了實驗效率。
3. 從設計到落地：高還原度的秘密 讓人驕傲的是，我們不僅做了UI設計，還負責了QT前端開發！
通過多輪的效果走查，我們實現了設計稿的高還原度落地。看著設計圖變成真正能跑代碼、能測數據的軟件，這種成就感真的爆棚！
4. 設計師碎碎念
做科研儀器設計，“克制”是最大的美德。 我們不需要炫技，只需要讓數據更清晰，讓操作更流暢。每一個像素的打磨，都是為了致敬科學的嚴謹。
蘭亭妙微（藍藍設計）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。
在互聯網產品日趨成熟的今天，你會發現所有的App越來越像，似乎是同一套模版設計出來的產品；而這種普適化的設計會導致同質化嚴重，使得設計不精致，產品沒有氣質和品牌感。
一個App設計是否精致，是否富有設計感，在于它的細節，這就意味著我們在進行設計的時候，要從細微之處著手，從多方面去鉆研如何創造出打動人心的UI設計。
蘭亭妙微UI設計公司，總結了12個簡單直觀的提升設計感的小細節，一起來學習。
在對UI 文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比；單純使用字體大小對比，所營造的對比并不夠，嘗試結合色彩和字重來營造更好的對比效果。
每種顏色都有一個視覺權重，這有助于在內容中建立層次結構；通過使用顏色的深淺，為元素賦予不同的重要性。
如果可以的話，你甚至可以采用兩到三種顏色：
類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：
▲主標題字重為600，其他標綠點的文字字重都為400
應當盡量不要讓正文部分字重低于400，因為這一部分字體本身尺寸已經較小，低于400會使得可讀性不佳。
如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。
灰色文字在無彩/彩色背景下要分開處理：
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
▲左圖設計師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色
其次當涉及長篇內容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍；通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。
選擇一種基礎色，再調整色調和顏色深淺來增加均衡；設計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調整基礎色的飽和度和明度，利用這種簡單的方式為設計增加一致性。
陰影是UI設計中最常見的視覺表現手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強畫面的視覺層次感。
相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。
這種輕柔的陰影呈現出的干凈，增加了畫面的精致；如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現出不精致的畫面感。
陰影不一定是黑色的，還有一種擴算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調一致，因此呈現出十分融洽的畫面感。
在UI設計中，這種手法不宜過多使用，否則呈現出的各種色彩搭配會讓人眼花繚亂。
合格的設計師能夠繪制風格統一的圖標，而優秀的設計師能夠創造風格獨特的圖標。
我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現力加入更多的創意呢？例如下面這組圖標設計，無論是在圖形上的創新，還是顏色搭配上都呈現出無與倫比的創意。
標簽欄作為一個App的全局導航起著至關重要的作用，它的設計影響著整個產品的視覺風格。
通常，大多數App都是使用iOS規范的設計樣式（默認灰色，選中填充品牌色），這樣的設計太普通，太常見了；要想讓標簽欄圖標設計精致和富有個性，可以豐富每一個選中態圖標的視覺表現，例如給圖標加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。
3D立體圖標設計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產生輕微的視覺疲勞，同時因其復雜的結構會增加用戶的認知成本，一般在外賣美食類應用中比較常見。
Tab是App設計中最常見的控件之一，它源自Material Design的設計規范；現在很多iOS產品當中也開始使用這種導航欄樣式來進行設計，而原本屬于iOS規范當中的分段選擇器變得不那么常見了。
在視覺表現形式上，Tab和標簽欄同樣也分為選中態和未選態，它的設計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區分兩者的狀態；因為它簡單，卻越難設計出彩，要發揮極大的設計想象力，跳脫出設計規范的限制，才能找到完美的方案。
例如蝦米音樂的Tab選中態是一段音頻波線，再配合文字的大小對比，一個富有設計感又符合產品特征的Tabs就被創造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。
從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中態的小長條，這樣就建立起視覺上的聯系，讓用戶產生由內而外的一致感受；例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上，既讓界面視覺獨一無二，又進一步強化了用戶對品牌形象的認知。
在UI設計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法；使用過多會讓整個布局的設計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內容失去注意力，因此可以減少不必要的裝飾元素。
我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
1）使用陰影
陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力，讓內容更聚焦。
2）使用不同的背景色來區分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分；所以，你所需要做的就是在不同的區塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。
3）增加額外的留白
創建元素之間的分離效果，并不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了，通過留白和間距來實現元素分組是UI設計中的常用手法。
在App中的每一個界面都有許多元素，那些同類的元素應保持統一的設計樣式。
通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續使用。
如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續到其他界面中，成為圖形或按鈕的外觀；這樣，整個界面就被統一的設計元素聯系起來了，給用戶始終如一的一致感。
選擇符合產品氣質的字體，可以與產品的定位相吻合，傳遞給用戶正確的情感意識。
雖然默認字體可以滿足大多數App 的設計需求，但會出現一個問題就是——系統字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微；例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺，換成系統字體后，整體感覺在氣勢上就變弱了很多。
大多數App都支持三方登陸，他可以減輕用戶注冊的時間成本。
通常是在注冊登陸頁的底部展示第三方圖標入口，這也是設計師最常忽略的內容，往往是直接將第三方圖標調整一致大小和擺放整齊位置，沒有針對它們再設計；一個設計精致的App不應漏過任何的細節，我們可以以自家App的圖標風格為依據，對第三方圖標進行優化設計。
App中優美的圖文設計，能帶給用戶如沐春風的視覺享受，它非常重要。我們經常看到文字疊加在圖片背景上的設計樣式；為了減少復雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優的辦法。
我們可以從圖片中提取主色調用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設計感。
圖片的質量影響著整個App的格調和用戶的情緒，高品質的圖片給人愉悅的視覺享受，產生美好的聯想；而低品質的圖片會瞬間拉低App的質感。
在App設計中，一張漂亮的圖片從收集到上線，需要經過裁剪，調色等過程才能被使用；即使是普通的商品圖片，我們將它摳圖后調整成統一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。
現在的UI界面設計中，卡片式設計已經是一種非常常見的設計形式，它有利于信息分層和整合，劃分出更加清晰的組織結構，實現復雜內容的簡化處理，提高空間利用率；同時卡片式設計通常很依賴視覺元素，很強的視覺元素正是卡片式設計的一種優勢，也是提升設計品質感的良方。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司分享：當AI能夠深度理解'團圓經濟'的情感密碼，節日營銷正在從流量爭奪升級為心智滲透的精準戰役。58同城在中秋期間以'好崗離家近'為核心，通過AI生成融合城市地標與職業場景的個性化視覺，在6大城市實現千萬級曝光的同時提升簡歷投遞量40%。這場品效合一的實踐揭示了一個關鍵趨勢：AI不再是冰冷的效率工具，而是情感共鳴的放大器——它讓招聘廣告從信息堆砌轉向情感連接，真正實現了品牌溫度與業務增長的雙贏。
項目首先基于人口特征、營銷資源與業績需求，精準圈定長沙、成都、西安、無錫、南昌五大目標城市。這些城市的共性在于春節/中秋返鄉率超80%，鄉土情結與團圓氛圍尤為濃郁。
執行層面：項目聚焦6大城市的24個核心商圈，選擇電梯內、戶外大屏、公交站亭三大高頻觸達渠道。
主視覺采用“品牌區+創意區”雙分區布局：左側傳遞“好崗離家近”的核心主張，右側則分別針對B端企業（展示招聘實力）與C端求職者（突出崗位優勢），引導“求職者投遞-商家入駐”的雙向轉化。
AI設計的核心價值，在于讓“情感共鳴”與“高效落地”并行不悖。本次項目中，AI技術貫穿創意生成、視覺優化全流程，既精準傳遞“團圓+留鄉”的情感內核，又破解了多城市定制、短周期交付的效率難題，實現雙重突破。
設計提案方向：
設計緊扣“中秋團圓”與“留鄉就業”的雙重訴求，以主題文案將求職需求與家庭情感深度綁定，精準觸動目標人群的“本土情結”。
創意構思沿兩個方向展開：
「中秋+商圈實景」方向提案：
快速建立“本地招聘”的直觀認知，通過融合城市地標與品牌色，結合 “中秋團圓” 節點，延續 “好崗離家近” 的核心訴求，同時針對不同城市定制化文案（如西安的“照的見你的未來”、成都的“崗位和火鍋一樣沸騰”），既傳遞就業價值，又契合城市氣質，激活留鄉就業的情感需求。，讓城市印記成為情感紐帶。
「中秋+地標+職業人物」方向提案：
采用真實場景與AI生成插畫人物相結合的方式（如職場女性與城市景觀、特色元素的融合），畫面生動富有層次，打破傳統招聘廣告的單調感。
最終方案：
AI技術在此次項目中深度融入從創意到落地的全流程，實現“多快好省”的突破：
創意圖像生成：借助Topnow等工具，快速合成“中秋+商圈”的定制化場景，使AI元素與實景自然銜接，直觀傳遞信息，降低用戶理解成本。
高效素材處理：
即夢4.0：
字體設計：幾分鐘內完成字體設計方案。
處理圖片：快速調整建筑角度、優化圖片內容，適配戶外大屏的傳播需求，大幅減少后期耗時。
即夢3.0：
生成圖片：月亮的質感與主文案的藝術化呈現，通過 AI 技術實現視覺吸引力，既保證節日氛圍的營造，又讓文案具備強記憶點。
卡通插畫：效果比4.0優秀
在插畫生成上表現卓越，通過精準指令，快速產出風格統一的本地職業形象（如成都外賣小哥、西安青年群體），傳遞“本地工作的愉悅感”，效率遠超人工。
關鍵詞參考：
“一個外賣小哥抱著熊貓玩偶，大步跑，綠色系工作服，開心地笑，黑色單線描邊，扁平插畫，炫彩配色”
“一個女孩面對手機視頻通話，身穿襯衫，坐姿端正，張口說話，居家環境，黑色單線描邊，扁平插畫，橙色系配色”
“5個男女青年，抬頭看前方，一人手指前方，全身，站立，背影，時尚穿搭，黑色單線描邊，扁平插畫，豐富配色”
具體成效：
創意階段：半天生成4個完整方向，傳統方式需2-3天。
多城市適配：快速產出兼具系列感與地方特色的視覺方案。
修改優化：響應客戶反饋的速度提升70%以上。
基于“一套核心視覺，多場景適配”原則，AI擴圖、高清修復，協助快速延展生成線下物料、線上專場Banner、長圖海報等多尺寸物料，確保線上線下品牌形象統一，強化用戶認知。
AI賦能的設計創新，本次設計通過情感、商業、品牌三大邏輯，實現“品效合一”核心目標。讓設計不僅是視覺呈現，更實現了品牌價值與業務增長的雙重落地。
1.情感邏輯：激活本土情結，拉動C端轉化。AI設計精準觸達留鄉需求，讓“像鳥飛往自己的山”不再只是心理期許，而是有具體崗位支撐的現實可能。數據印證成效：長沙、成都、西安等地線上專場簡歷投遞量增長40%，“本地崗位”搜索量上升62%，有效拉動C端用戶參與度。
2.商業邏輯：精準賦能B端，超額完成業績。對B端商家而言，精準廣告投放是核心需求。通過“行業+地域”的定制化廣告設計，有效提升了商家投放意愿與合作轉化。
3.品牌邏輯：沉淀長期認知資產。設計圍繞“貼近受眾、強化認知、促進轉化”原則，將“提供家鄉好工作”的營銷邏輯，拆解為“明月+地標+文案+品牌信息”的直觀的視覺符號組合，降低用戶信息理解成本。通過品牌色、視覺等符號在多場景的重復曝光，持續強化“找本地好工作，就上58”的用戶心智，使品牌從工具平臺升級為“助力團圓”的伙伴，構筑獨特的品牌競爭壁壘。
本次實踐為行業帶來核心啟示：AI是設計師的“超級助手”，其核心價值在于提升效率與精準度。未來的品牌設計應聚焦于 “策略為先，AI賦能，情感共鳴”的融合模式——以策略為導向，用AI提效，最終以情感打動人心。
打動人心的永遠是對人性的洞察和情感的共鳴：
對招聘品牌推廣而言，這打破了“信息堆砌”的傳統廣告模式；對更廣的行業來說，則示范了“AI賦能設計，設計驅動品效”的新路徑。技術終究是工具，而深度的策略思考與人文洞察，永遠是設計師不可替代的核心價值。當AI與品牌策略、情感共鳴深度結合，營銷才能實現真正的突破，為品牌創造可持續的長期價值。
58同城此次中秋品牌營銷項目，正是技術理性與創意感性完美融合的例證。用AI實現高效精準的落地，用設計傳遞深刻的情感價值，最終成就了品牌聲量與業務增長的雙贏，也為行業提供了可復制的品效合一實踐范本。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
UI 設計中依舊有很多裝飾圖標要使用偏擬物的設計風格，雖然很多人以為可以通過 AI 來生成，但實際上真正符合頁面需要的設計很難通過 AI 來獲得，所以我們依舊要自己來繪制。
這類輕擬物圖標畫起來并不難，只需要掌握一定的規律以及幾個基本操作技巧即可。而最好的入門方式，就是從“畫圓”開始，就像學素描時最開始畫的圓形石膏，用它來認識光影的效果。
設計中對擬物效果的實現，就是對三個基本要素的塑造，形體、光影、材質。
形體就是物體本身的外輪廓和外形樣式，不同的風格和設計標準會對外形有不同的繪制要求，比如有的復雜寫實有的簡約隨意。除了外形復雜度外，還有個關鍵的知識點，即 —— 透視關系。
透視關系就是現實世界物體在人眼中成像的一種模式，離得越近的東西越大，越遠的東西就越小，也就是我們所說的近大遠小。用一個正方體來解釋，就是當它擺出不同角度時，那么側邊的面會朝遠端逐漸縮小。
如果不帶透視關系，那么它的不同面就沒有縮小的效果，上下邊平行處于等高的狀態。
設計師輸出圖形，就要正確的反映空間關系，加或不加都可以，但不能出現兩種混用的沖突，那就是沒想好要怎么表現。同時就是元素本身角度的控制會對下一步光影的應用產生巨大的影響，因為不同的角度就會形成不同的光影關系，而之所以素描最喜歡從圓開始練起，就是因為圓形 “只有一個” 角度。
第二個光影要素，就是物體在接受光照后呈現出來的高光反射與遮擋光源后形成的投影。如果只有一個圓，在接受一個光源的照射后就會形成下面這樣的光影關系。
也只有在光照的影響下，物體的表面才不會是純色的，也才能反應本身的弧度。所以每次繪制擬物圖形我們都要確定它的光源在哪，決定受光面和投影的方向。
最后一點則是材質，也就是物體表面使用哪種材料，這不僅會決定它使用哪種肌理紋路，也會決定它面對光影的效果。比如一個鏡面材質，表面就是光滑且高反光度的，而磨砂玻璃材質，則是弱反光且具有透明模糊的效果。
上面三個就是擬物圖標繪制最核心的知識點，也是最基礎的美術專業知識，雖然它們還有很多細節可以拓展和學習，但所幸我們今天設計的質感圖標不再是追求高度還原的擬物，而是經過簡化的 —— 輕擬物。
雖然那些知識不能被忽視，但因為我們要設計的東西也簡單，所以可以在一邊實踐中一邊學習，效果會更好。
接著我們就開始來畫圓，掌握擬物效果的實操方式，在這里我們演示用的軟件還是 Figma，只用到最基礎的矢量、填充、描邊、圖形效果等基礎功能。不管你用 Sketch 還是即時設計、Mastergo 都一樣。
第一步就是創建畫布后畫個圓，這個圓用 100-200px 大小就行，然后給圓填充一個基礎的顏色。
然后我們確定這個圓是鏡面材質的，光源是從正上方往下打。所以圓應該上方比下方顏色亮，且因為這是球體有弧度，所以添加的是 “徑向漸變”。通過這個漸變的添加為整個圓的色彩定調，確定明暗關系。
接著添加高光和投影，高光在頂部呈現不規則的橢圓狀，然后使用垂直透明度漸變向下逐漸消失。高光是種折射是會受到反射對象色彩影響的，所以高光也不可能是純白，而要使用和圓一樣色相的高明度色彩。
然后就是下方投影，這里一定要明白投影會反映空間的關系。如果使用默認圖層效果中的投影，它只能表現環境中的背景和我們的視線垂直，光源也是從視線這側來的。而我們現在希望塑造的是背景是在底部，且光源是從上打下來的，那么軟件自帶的投影模式就不適用。
軟件自帶投影的方向
我們希望創建的投影方向
想實現這個效果就要獨立繪制投影，最簡單的方式就是先畫個小點的深色投影輪廓，然后為它添加圖層模糊效果。
到這里圖形基本的狀態和光影效果都有了，但這看起來太粗糙了，想讓它更細膩更生動，就看我們怎么理解光影并為它添加更多細節進去了。
首先作為一個有顏色的玻璃球體，雖然會形成投影但也有光穿過它投射到背景上，那么這些穿過的光線就可以被表現出來，也就是底部要再疊加一層有色的投影。
同時因為光穿透到底部會再往回折射，所以球體底部實際上是會“積累”光線的，這不是明暗交界線，而是玻璃材質本身的一種特性，所以這個積累亮度的底部就要單獨畫出來，然后添加漸變和模糊效果。
而光在打到頂部時高光的形成是在表面之下（這個大家可以觀察玻璃珠），那么表層也有受光面，我們就可以再做個表面的橢圓模糊疊加到上方，讓它的高光面更自然。
最后，就是為圓添加一個描邊，這個描邊還有漸變色，來表現球體邊緣的厚度。而這個厚度在頂部是遠處不是受光位置所以較深，而底部在反光處所以有高亮。
完成上面的效果這個案例就做完了，要想做細節還可以再往下做。我們可以簡單在上面添加圖標，那么就是一個玻璃質感的按鈕。
做擬物類圖標的內核，就是你想表現什么樣的結果，要讓它的細節呈現到什么地步。復雜和極簡沒有對錯，關鍵的是你添加的每個細節都能有真實的物理特性去支撐，那么它們看起來才是合理的。
學習擬物就是認識美術的基本原理的過程，再學習不同細節呈現的軟件操作方式。
軟件是次要的，理解才是最重要的。
轉載自優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
附 Figma 官方文案節選：無論多少次被宣告 “消亡”，設計始終生生不息。它藏在幫你避免坐過站的地鐵圖里，藏在一目了然的菜單里，也藏在貼心的 App 通知里。設計不是轉瞬即逝的潮流，也不是可被替代的技術，它關乎體驗、關乎感受，而非僅僅追求功能可用。設計屢遭唱衰，卻一次次證明自身不可替代。官方鏈接：https://x.com/figma/status/2061101954034442293
蘭亭妙微（藍藍設計）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。
藍藍設計的小編 http://www.payeee.cn
