近期完成了一个颇具成就感的项目——青海师范大学大气污染可视化系统的界面视觉设计与交互设计。
项目背景：
该系统由青海师范大学委托进行重点页改版，旨在参加环保信息化领域的比赛。原系统界面功能区划分明确，但数据堆叠较为拥挤，视觉比重失衡，信息层级模糊，导致用户难以快速聚焦核心内容。
设计策略与优化：
1、风格定位：采用科技感设计语言，以深蓝为基底，通过背景图案增强纵深感，辅以科技感边框与线条点缀，在丰富页面层次的同时突出关键数据。
2、信息重构：面对庞杂数据，去粗取精，提炼核心内容。通过文字颜色、粗细及高亮处理的差异化运用，强化主次层级，使用户能够以直观的方式获取信息，有效降低理解难度。
3、视觉优化：以清晰图表替代文字堆砌，适度留白营造呼吸感。关键数据浮于场景之上，形成空间层次，在有扩展性的同时提升阅读体验。
4、场景落地：完成全国页面及山西省临汾市专题页的精细化设计，涵盖治理事件、效果分析及污染浓度趋势等核心模块。
一点感悟：
大屏设计的核心难点从来不是炫技，而是将复杂数据转化为清晰易懂的信息。界面之美，在于让用户"一眼就懂"。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
近期和团队一起完成了一个超酷的项目——飞秒激光时域热反射测量系统（TDTR）的软件UI设计。
不得不说，做科研设备设计真的太“上头”了！
这不仅仅是一个软件界面，更是连接科学家与纳米世界的窗口。
分享一下我们的设计思考，希望能给做B端、科研仪器设计的姐妹们一点灵感～
1. 项目背景：让复杂的测量变简单 客户是一家专注于热学测试设备领域的科技企业。
设备用途： 测量纳米薄膜热导率、界面热阻等。
核心挑战： 如何把微纳尺度的复杂数据，转化成直观、易操作的视觉语言？ 我们输出了深色和浅色两套方案，客户一眼相中了浅色方案！理由是：干净、通透，长时间盯着屏幕做实验眼睛不累。
2. 设计亮点：严谨中的“小心机”
配色逻辑：红灰CP太绝了！
灰色背景： 作为基底，最大程度保证了数据图表的清晰度，不抢戏。
红色点睛： 作为品牌主色和警示色，关键操作按钮和重要数据用红色突出，既符合工业严谨性，又增加了视觉活力。
图标设计：低饱和度的“科研风” 没有用花里胡哨的渐变，而是采用几何图形+数据可视化元素。
线条扁平化，小尺寸下也能看清，降低科研人员的认知成本。
布局：多面板分栏 左侧控制参数，中间展示实时数据，右侧显示拟合分析。
这种布局让科研人员可以“一眼看全”，不用频繁切换页面，大大提升了实验效率。
3. 从设计到落地：高还原度的秘密 让人骄傲的是，我们不仅做了UI设计，还负责了QT前端开发！
通过多轮的效果走查，我们实现了设计稿的高还原度落地。看着设计图变成真正能跑代码、能测数据的软件，这种成就感真的爆棚！
4. 设计师碎碎念
做科研仪器设计，“克制”是最大的美德。 我们不需要炫技，只需要让数据更清晰，让操作更流畅。每一个像素的打磨，都是为了致敬科学的严谨。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
UI 设计中依旧有很多装饰图标要使用偏拟物的设计风格，虽然很多人以为可以通过 AI 来生成，但实际上真正符合页面需要的设计很难通过 AI 来获得，所以我们依旧要自己来绘制。
这类轻拟物图标画起来并不难，只需要掌握一定的规律以及几个基本操作技巧即可。而最好的入门方式，就是从“画圆”开始，就像学素描时最开始画的圆形石膏，用它来认识光影的效果。
设计中对拟物效果的实现，就是对三个基本要素的塑造，形体、光影、材质。
形体就是物体本身的外轮廓和外形样式，不同的风格和设计标准会对外形有不同的绘制要求，比如有的复杂写实有的简约随意。除了外形复杂度外，还有个关键的知识点，即 —— 透视关系。
透视关系就是现实世界物体在人眼中成像的一种模式，离得越近的东西越大，越远的东西就越小，也就是我们所说的近大远小。用一个正方体来解释，就是当它摆出不同角度时，那么侧边的面会朝远端逐渐缩小。
如果不带透视关系，那么它的不同面就没有缩小的效果，上下边平行处于等高的状态。
设计师输出图形，就要正确的反映空间关系，加或不加都可以，但不能出现两种混用的冲突，那就是没想好要怎么表现。同时就是元素本身角度的控制会对下一步光影的应用产生巨大的影响，因为不同的角度就会形成不同的光影关系，而之所以素描最喜欢从圆开始练起，就是因为圆形 “只有一个” 角度。
第二个光影要素，就是物体在接受光照后呈现出来的高光反射与遮挡光源后形成的投影。如果只有一个圆，在接受一个光源的照射后就会形成下面这样的光影关系。
也只有在光照的影响下，物体的表面才不会是纯色的，也才能反应本身的弧度。所以每次绘制拟物图形我们都要确定它的光源在哪，决定受光面和投影的方向。
最后一点则是材质，也就是物体表面使用哪种材料，这不仅会决定它使用哪种肌理纹路，也会决定它面对光影的效果。比如一个镜面材质，表面就是光滑且高反光度的，而磨砂玻璃材质，则是弱反光且具有透明模糊的效果。
上面三个就是拟物图标绘制最核心的知识点，也是最基础的美术专业知识，虽然它们还有很多细节可以拓展和学习，但所幸我们今天设计的质感图标不再是追求高度还原的拟物，而是经过简化的 —— 轻拟物。
虽然那些知识不能被忽视，但因为我们要设计的东西也简单，所以可以在一边实践中一边学习，效果会更好。
接着我们就开始来画圆，掌握拟物效果的实操方式，在这里我们演示用的软件还是 Figma，只用到最基础的矢量、填充、描边、图形效果等基础功能。不管你用 Sketch 还是即时设计、Mastergo 都一样。
第一步就是创建画布后画个圆，这个圆用 100-200px 大小就行，然后给圆填充一个基础的颜色。
然后我们确定这个圆是镜面材质的，光源是从正上方往下打。所以圆应该上方比下方颜色亮，且因为这是球体有弧度，所以添加的是 “径向渐变”。通过这个渐变的添加为整个圆的色彩定调，确定明暗关系。
接着添加高光和投影，高光在顶部呈现不规则的椭圆状，然后使用垂直透明度渐变向下逐渐消失。高光是种折射是会受到反射对象色彩影响的，所以高光也不可能是纯白，而要使用和圆一样色相的高明度色彩。
然后就是下方投影，这里一定要明白投影会反映空间的关系。如果使用默认图层效果中的投影，它只能表现环境中的背景和我们的视线垂直，光源也是从视线这侧来的。而我们现在希望塑造的是背景是在底部，且光源是从上打下来的，那么软件自带的投影模式就不适用。
软件自带投影的方向
我们希望创建的投影方向
想实现这个效果就要独立绘制投影，最简单的方式就是先画个小点的深色投影轮廓，然后为它添加图层模糊效果。
到这里图形基本的状态和光影效果都有了，但这看起来太粗糙了，想让它更细腻更生动，就看我们怎么理解光影并为它添加更多细节进去了。
首先作为一个有颜色的玻璃球体，虽然会形成投影但也有光穿过它投射到背景上，那么这些穿过的光线就可以被表现出来，也就是底部要再叠加一层有色的投影。
同时因为光穿透到底部会再往回折射，所以球体底部实际上是会“积累”光线的，这不是明暗交界线，而是玻璃材质本身的一种特性，所以这个积累亮度的底部就要单独画出来，然后添加渐变和模糊效果。
而光在打到顶部时高光的形成是在表面之下（这个大家可以观察玻璃珠），那么表层也有受光面，我们就可以再做个表面的椭圆模糊叠加到上方，让它的高光面更自然。
最后，就是为圆添加一个描边，这个描边还有渐变色，来表现球体边缘的厚度。而这个厚度在顶部是远处不是受光位置所以较深，而底部在反光处所以有高亮。
完成上面的效果这个案例就做完了，要想做细节还可以再往下做。我们可以简单在上面添加图标，那么就是一个玻璃质感的按钮。
做拟物类图标的内核，就是你想表现什么样的结果，要让它的细节呈现到什么地步。复杂和极简没有对错，关键的是你添加的每个细节都能有真实的物理特性去支撑，那么它们看起来才是合理的。
学习拟物就是认识美术的基本原理的过程，再学习不同细节呈现的软件操作方式。
软件是次要的，理解才是最重要的。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
附 Figma 官方文案节选：无论多少次被宣告 “消亡”，设计始终生生不息。它藏在帮你避免坐过站的地铁图里，藏在一目了然的菜单里，也藏在贴心的 App 通知里。设计不是转瞬即逝的潮流，也不是可被替代的技术，它关乎体验、关乎感受，而非仅仅追求功能可用。设计屡遭唱衰，却一次次证明自身不可替代。官方链接：https://x.com/figma/status/2061101954034442293
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
商品卡片是一个广泛存在于电商产品中的组件，不管是狭义上的商品，还是广义上的所有可交易产品 (包括课程、服务、游戏等虚拟商品)，都需要商品卡片来承载它们的关键信息，以方便用户快速了解商品的核心属性。
常见的商品卡片有两种形式，也是电商 App 普遍使用的两个视图，即：网格视图和列表视图，卡片在这两种视图中有着不同的布局，其信息包含能力也有所差异。
1. 两种布局
如 Part.1 种所说，商品卡片通常有两种布局形式，分别是网格布局和列表布局。
①网格布局
网格布局可以使用瀑布流，图片的尺寸相对来说会更单一一些，因为需要严格控制卡片的错落程度，不至于过于杂乱。
当然，并不是只能做成瀑布流，完全对齐的网格布局也很常见，只需要严格限制图片和字段的高度，且为有高度差异的字段 (一般是标题) 留出空间即可。
②列表布局
列表布局通常也会保持所有图片尺寸一致，但文本区域需不需要与图片等高，得看具体项目中商品需要露出的信息多寡，像京东这种信息非常多的，文本区域就可以超出图片的高度范围。而如果信息量中等，那么等高是一种比较好的选择。
但如果信息比较少，强行把某一字段与图片底对齐的做法会导致组件内的间距比组件间的更大，从而影响亲密性识别。
这时候可以在两个商品之间加分割线。
2. 卡片样式
主要有三种样式，我称之为有全包、半包和开放式。
全包：有明确的卡片背景，将图片和文本全部包括在内部，比较不常见。
半包：图片部分会撑满卡片的边界，而文本依然在卡片内部，比较常见。值得注意的是如果卡片需要做圆角，图片朝内的两个角不需要给圆角。
开放式：没有明确的卡片背景，图+文本自成卡片区域，在设计上通常会让文本两侧较之图片稍微向内缩进一些距离，在让亲密性表现得更舒适。可以两侧缩进，也可以只缩进右侧。
3.卡片内容
不同类型的商品、不同需求的产品所需要表达的信息是不同的，但总结来说有以下这几类：
其中，图片、标题和价格，这三个是最基础的信息，几乎每个商品卡片都必不或缺。其余的信息则并不一定每个都要包含在内，不同的 App 会根据自己的展示需求挑选其中几类排布在卡片内。
信息展示的顺序、和权重对比，都会根据实际情况略作调整。例如一些国外的电商 App，会把价格的权重做得比标题更大。而对于网格布局和列表布局，所展示的信息尽可能保持一致。但因为网格视图不适合展示的过长，所以如果信息真的非常多，那么网格视图可以适当省略。例如小米有品是一个典型的例子，网格视图相比列表视图只少了商品规格表，因为这个字段实在不适合放在网格视图展示。
4. 不同的使用场景
之所以会把使用场景放在这里，是因为商品卡片的使用场景会影响它所展示的信息类型。举个例子，淘宝首页推荐内的商品卡片内所包含的信息，就比搜索出来的完整商品卡片少了一些。
这是因为推荐中的商品信息务求直击要害，其导购需求远远强于展示需求，同时也考虑到推荐页应同屏展示更多商品，所以会把其他可能会影响用户获取核心信息，且可能造成卡片过长的字段全部隐去了。
同理，商品卡片在购物车中的信息也不一样，考虑到存在于购物车中的商品都是用户已经了解过大部份信息的商品，所以设计时要抓住用户在这种场景下最关注的内容——价格和规格，所以购物车中的卡片会多出一些价格变动、规格重选、数量修改等信息。
总之，商品的使用场景很大程度上会影响展示信息的选择，最核心的要点是一定要考虑用户在不用的场景下，最核心的信息诉求是什么，不同 App 对此可能有不同的做法，我在这里也无法一概而论。
5. 不一样的商品卡片
①Asos/Massimo Dutti
国外的电商 App，尤其是品牌自己的 App，总是会做得非常极简，一个标题一个价格一张图片，几乎做到了商品卡片最简洁的状态，这是品牌气质决定的，也是产品定位决定的。所以国内走出海路线的 App 大多也会是这个风格，比如 Shein。
②马蜂窝/飞猪
举这两个例子并不是因为两者的组件设计得有多精妙，而是因为它们有着另一种不同的商品，以及所呈现出来的不同的组件——酒店。
我在这里想要说明的是，不同的商品类型可能也会有其特有的字段类型，尤其是服务型商品，不同的服务所呈现出来的组件会有很大不同。
这里收集了一些商品卡片的线上案例，也可以作为设计时的参考：
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com
