支付宝 10.6 · 数字生活新升级

让生活,
更简单。

12 亿用户的国民支付与数字生活平台.扫一扫、收付款、出行、政务、医疗、理财——一个 App 装下日常的一切.

12 亿累计用户
80+覆盖国家
9000 万商家合作
付款码
向商家付款
余额可用 ¥3,288.66
付款码 收款码
+¥18.80来自张三的转账
红包到账已存入余额宝
服务广场

日常需要的,都在这里.

不只是支付,支付宝是一个数字生活底座——从扫码支付到政务办理,从公共出行到医疗挂号.

扫一扫
付款 · 加好友
收付款
转账 · 收钱
余额宝
理财 · 享收益
蚂蚁森林
绿色出行 · 公益
健康医疗
挂号 · 电子医保
政务服务
证照 · 缴费
饿了么
点外卖 · 送药
公共出行
公交 · 地铁码
蚂蚁庄园
爱心捐赠 · 喂鸡
芝麻信用
免押 · 信用分
水电煤
生活缴费
会员权益
积分 · 红包
两个故事

从支付,到生活的方方面面.

国民支付的根基,加上情感连接的温度——支付宝是工具,也是日常陪伴.

国民支付 · 12 亿用户

让每一笔支付,
都安全、即时、无感.

从扫码到刷脸,从国内到 80+ 国家——支付宝以毫秒级清算和银行级安全,承载中国人最日常的金融动作.

了解支付能力 →
公益与温度 · 蚂蚁森林

每一个绿色行动,
都被认真记得.

绿色出行、电子发票、闲置回收——你的每个低碳选择都被换算成能量球,最终长成一片真实的树林.

查看我的能量 →
12 亿累计用户数
80+覆盖国家与地区
9000 万合作商家
99.99%支付成功率

支付宝陪你,
把生活打理得更简单.

iOS · Android · HarmonyOS · Web 全平台支持,首次注册即送 ¥10 通用红包.

立即下载 →
设计系统参考

蓝色的信任,加一点暖橙.

支付宝的视觉语言是"国民信任 + 生活温度":支付宝蓝 #1677FF 是主基调,负责安全与稳重;暖橙 #FF6034 偶尔出现在红包、会员、情感节点,让金融工具不冷冰冰.下面是 token.

查看 DESIGN.md ↗

色彩

支付宝蓝是品牌核心,从浅到深构成完整阶梯;暖橙仅出现在情感节点(红包、提示、欢迎);中性灰阶保持画面平衡.

品牌主蓝
支付宝蓝
#1677FF
浅蓝渐变
#4093FF
深蓝 · Hover
#0958D9
浅蓝 Soft
#E6F0FF
蓝色渐变
1677FF→4093FF
情感橙 · 红包/会员
红包橙
#FF6034
浅橙 Tint
#FFE9DE
会员金
#F5B544
金色 Tint
#FFF4DD
红包渐变
orange→gold
文字
极黑
#000000
主文字
#15191F
次要文字
#4a4f5a
弱化文字
#797f8c
占位文字
#b2b6c0
表面与语义
画布
#ffffff
表面 1
#F5F8FC
边框
#E4E9F0
成功 · 收款
#00B96B
错误 · 警告
#FF4D4F

字体

中文 PingFang SC,英文 Inter.金额采用 tabular-nums 等宽数字字形.字重以 600-700 为主——保持金融场景的稳重感.

Token样式字号字重用途
--display让生活更简单64 / 4rem700Hero
--title-1服务广场44 / 2.75rem700章节标题
--title-2让每一笔支付都即时30 / 1.88rem700子标题
--heading余额宝14 / 0.88rem700卡片标题
--amount¥3,288.6628 / 1.75rem700金额数字
--amount-pos+¥18.8016 / 1rem700收款金额
--body12 亿用户的国民支付14 / 0.88rem400正文
--caption向商家付款 · 已加密12 / 0.75rem400辅助说明
--badge新红包11 / 0.69rem600徽章
--mono#1677FF12 / 0.75rem500代码 · 订单号

圆角

支付宝的圆角倾向"温和但不夸张":按钮 12px,卡片 16px,服务图标 12px.金融感不能太软,但也不能像企业级那么硬.

极小
2px
标签
4px
输入框
8px
按钮 · 图标
12px
卡片
16px
大模块
24px
胶囊
9999px
圆形
50%

组件

按钮以蓝色渐变为主,带轻量投影;CTA 偶尔使用红包橙;输入框 1.5px 边框,聚焦变蓝;标签短小,只用于状态识别.

输入与标签
官方 新红包 会员特权
卡片
余额宝
昨日收益 +¥0.34
¥3,288.66
恭喜获得红包
¥8.88
已存入余额,可立即使用
查看 DESIGN.md ↗