近期完成了一個頗具成就感的項目——青海師范大學大氣污染可視化系統的界面視覺設計與交互設計。
項目背景：
該系統由青海師范大學委托進行重點頁改版，旨在參加環保信息化領域的比賽。原系統界面功能區劃分明確，但數據堆疊較為擁擠，視覺比重失衡，信息層級模糊，導致用戶難以快速聚焦核心內容。
設計策略與優化：
1、風格定位：采用科技感設計語言，以深藍為基底，通過背景圖案增強縱深感，輔以科技感邊框與線條點綴，在豐富頁面層次的同時突出關鍵數據。
2、信息重構：面對龐雜數據，去粗取精，提煉核心內容。通過文字顏色、粗細及高亮處理的差異化運用，強化主次層級，使用戶能夠以直觀的方式獲取信息，有效降低理解難度。
3、視覺優化：以清晰圖表替代文字堆砌，適度留白營造呼吸感。關鍵數據浮于場景之上，形成空間層次，在有擴展性的同時提升閱讀體驗。
4、場景落地：完成全國頁面及山西省臨汾市專題頁的精細化設計，涵蓋治理事件、效果分析及污染濃度趨勢等核心模塊。
一點感悟：
大屏設計的核心難點從來不是炫技，而是將復雜數據轉化為清晰易懂的信息。界面之美，在于讓用戶"一眼就懂"。
蘭亭妙微（藍藍設計）www.payeee.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.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。
藍藍設計的小編 http://www.payeee.cn
