美团是什么风格?

美团示例

美团的样子就是中国日常生活的黄色:骑手的头盔、药丸形的下单按钮,以及灰底上紧紧堆叠的白色卡片。

美团速览

美团风格是一款中国本地生活超级 App 的界面语言。它围绕一种高饱和的黄色展开,常被叫作袋鼠黄,铺在浅灰色的页面上,上面一层层紧凑地叠着白色卡片:商家、优惠券、订单。这种黄色出现在 App 顶栏、药丸形的下单按钮上,也出现在屏幕之外——街头每一位骑手的头盔和外卖箱上。

这是一套为通过效率而设计、而不是为展示而设计的界面。它没有大面积留白和单一主视觉,而是提供五列宫格的入口图标、左图右文的商家列表,以及用粗重等宽数字排成的价格,数字前带一个较小的 ¥ 符号。评分、月售、配送时长和起送价都排在紧凑、便于扫视的行里。

它的支配性规则是:黄色只标出你要点的地方,其余信息保持安静。信息住在白色卡片里,层级靠字重和分组建立,而不是靠装饰,品牌色是信号而不是壁纸。正因为有这种纪律,即使屏幕承载了海量信息,这套风格依然保持清晰可读。

美团用在文章页上

美团从何而来?

这套风格要从公司说起。美团于 2010 年 3 月在北京上线,创始人是王兴,王慧文也被列为关键人物。它诞生在常被称作中国 O2O(线上到线下)热潮的中段,当时一大批互联网公司试图把屏幕与餐厅、影院、商店、服务这些线下生意连接起来。团购、优惠券与本地商家列表是这个想法最早的形态,这也解释了为什么界面如此围绕商家、券和订单来组织。

外卖业务让品牌色变成了街头景象。外卖服务“美团外卖”从 2013 年起采用袋鼠黄,戴黄色头盔、背着保温箱的骑手成了中国城市里最容易辨认的形象之一。于是这种颜色同时承担两层含义:在手机上是界面信号,在城市里是实体存在,两者相互强化。

后来公司统一了形象。2019 年 6 月 13 日,美团启用全集团统一的黄色标识,沿用至今。这一变化把许多分散的业务纳入同一个视觉旗帜下,也与平台公司日益成为餐饮、生鲜、出行、娱乐等服务统一入口的趋势相吻合。由此而来的设计系统必须模块化且信息密集,因为同一个屏幕可能要容纳非常不同的内容类型,同时又不失一致。

从设计史的角度看,这种风格属于超级 App 传统和平台外卖经济,衡量一个好屏幕的关键标准是用户能多快找到、比较并下单。它是中国移动产品中高密度、列表驱动界面的务实后代,与许多西方消费类 App 那种空灵、以留白为主的设计形成对照。两种路线回答的是不同问题:一个问屏幕可以少说多少,另一个问屏幕可以把多少信息说清楚。

美团的视觉特征是什么?

色彩

一种高饱和的袋鼠黄几乎承担了全部品牌职责。它出现在顶栏、主要下单按钮和小块高亮上,不进入页面主体。底色是浅灰,让白色卡片读起来像凸起的表面,文字则是深色中性色。由于黄色被严格配给,它成了清晰的信号:看到它的地方,就是可以点的地方。

堆叠的白卡片

内容被组织进直接放在灰底上的白色卡片里,每张代表一个商家、一张券或一份订单。卡片彼此靠得很近,只有细微的分隔,页面因此读起来像一条连续的信息流,而不是一堆孤立的面板。圆角温和,层级感很弱,分组主要靠白与灰之间的色彩对比来承担。

入口宫格

页面上部是一个五列的品类入口宫格,每个入口是一个图标加一个简短标签。它就像这款 App 的目录,用户一点即可跳到外卖、生鲜、娱乐或其他服务。宫格规整的节奏让屏幕立刻有了结构,也让种类繁多的服务显得井然有序。

商家列表行

每条商家行左边是缩略图,右边是几行事实信息:店名、评分、月售、配送时长、起送价与配送费。行内信息密度高,但层次有序,店名更重、辅助信息更轻。用户一次滑动就能比较许多商家,而不必点开任何一个。

等宽价格数字

价格用粗重的等宽数字排印,前面带一个较小的 ¥ 符号。等宽数字让一列价格自然对齐,便于一眼比较;更重的字重让数字成为该行最突出的内容;较小的货币符号既退让一步,又仍然标明这是钱。

药丸形操作按钮

下单、领券等主要操作使用完全圆角的药丸形按钮,招牌黄配深色文字。这个形状友好、便于拇指点按,颜色也让它从周围的白色和灰色内容中分离出来。每个决策点通常只放一个这样的按钮,让下一步毫不含糊。

美团用在仪表盘上

谁塑造了美团?

Wang Xing (王兴)

美团的创始人,公司于 2010 年 3 月在北京上线。他的公司从团购与本地商家列表成长为一个综合平台,这套系统的界面语言也反映了这段历史:为快速决策而组织起来的商家、券与订单。

Wang Huiwen (王慧文)

被列为公司早期的关键人物之一。他的参与属于美团在中国 O2O 热潮中站稳脚跟的阶段,也正是这段背景塑造了其界面的高密度与实用性。

Meituan delivery riders (外卖骑手)

这不是个人,而是一个群体,也可以说是品牌最醒目的载体。黄色头盔和保温箱把界面颜色变成了街头的实体存在,这也是为什么这种黄色与城市日常生活如此紧密相连。

今天怎么用美团?

在幻灯片里,美团风格适合运营与产品复盘类材料:周度经营回顾、商家入驻、活动总结与履约进展。灰色页面加堆叠白卡片,能让你并列呈现若干相关事实而不让标题互相争抢,一条黄色色带或标题栏则为每页定下锚点。议程或品类总览可以借用五列宫格的思路,每格放一个图标和一个简短标签。

数据页上,等宽数字和卡片分组天然合拍。把每个指标放进自己的白卡片,数字用重字重、标签用轻字重,只在你希望观众采取行动的数字或趋势上用黄色。由于等宽数字会对齐成列,对比表格显得干净,较小的货币符号也可以放在数值前面而不显拥挤。

在网页与 App 界面里,这套风格为本地生活、外卖与生鲜配送、优惠券页面、预订流程和订单追踪而生:凡是许多条目要在短时间内竞争一个决定的场景都适用。保持商家行的一致,让用户学会它的形状;在一个决策区域里只放一枚黄色药丸按钮;不要给品类标签再添别的颜色,否则会稀释信号。

在编辑与营销物料中,这种外观适合需要显得即时、日常的促销:优惠券公告、应季美食活动或全城优惠。黄色标题带、卡片式内容块与粗重的价格数字,放到海报和社交图上同样好用。它的语气务实、亲切而非奢华,因此在传达便利与实惠时效果最好。

最常见的错误是把它当作把一切刷成黄色的借口。这套系统的前提是黄色足够少、足以有意义;整页都是黄色,信号就消失了,读起来也累。另一个错误是只抄密度不抄纪律:行与行字重、对齐和分组不统一地塞满信息,得到的是杂乱而不是效率。保留灰色底、白色卡片和每一行里信息的排列顺序,密度才会显得是有意为之。

美团用在幻灯片 · 封面上

美团 · 常见问题

美团黄为什么这么好认?

因为它既出现在屏幕上,也出现在街头。美团外卖从 2013 年起采用袋鼠黄,戴黄色头盔、带保温箱的骑手让这种颜色成了城市景观的一部分。2019 年集团统一为同一种黄色标识,于是同一个色相如今把 App、包装和送餐的人串在一起。

它和以留白为主的西方 App 风格有什么不同?

以留白为主的风格问的是屏幕可以少说多少,依靠单一主视觉和宽裕的边距。美团风格问的是屏幕可以把多少信息说清楚:它用入口宫格、紧凑的商家行和等宽价格,靠卡片分组和字重建立层级。两者都成立,回答的是不同的需求;美团的路线适合快速浏览和比较大量条目。

除了外卖,它还能用在别的地方吗?

可以。任何条目众多、可比较、且有明确主操作的界面都合适:本地服务、预订、优惠券、订单追踪、内部运营看板和活动复盘。它不太适合品牌叙事或安静阅读的页面,在那里它的高密度与信号黄逻辑会和内容对着干。

为什么价格要用粗重的等宽数字?

等宽数字让价格在列中对齐,用户可以一眼比较;更重的字重让价格成为一行里视线最先落下的地方。较小的 ¥ 符号退居次要,却仍然标明这是金额。这是一个很小的排印决定,却承担了界面决策速度的很大一部分。

一个屏幕上应该有多少黄色元素?

越少越好。黄色应当只标记顶栏以及最重要的操作或高亮,其余都用白色、灰色和深色中性文字。如果一个屏幕上有好几块相互竞争的黄色区域,用户就不知道该点哪里,信号的意义也就落空了。

获取美团完整设计系统
© 2026 Curio