OPay Android 现网 · 组件一致性治理 · 按钮

OPay 按钮一致性审查

在真机上逐页点过底部 5 个 Tab、首页全部 12 个入口、Add 充值、扫码、通知，以及交易详情、安全中心和 3 个弹窗，实测每个操作按钮的尺寸、填充、位置和状态，再对照 OPay App 2026 规范。

采集日期 2026-11-08 设备 荣耀 MBH-AN10 外屏，353dp 宽，1dp = 3px 范围 23 个页面，27 个页面状态 实现 原生、H5、React Native、EaseMoni 子应用 对照 主按钮 280×48，14 SemiBold，全圆胶囊

11种主按钮尺寸，宽 66–296dp，高 29–48dp

4种Go 按钮画法

6种卡片内小胶囊高度（23–29dp），填充 6 种写法

2处一屏多个实色主按钮（Fixed 一屏 5 个）

6种入口图标容器

5种"查看全部"文字链写法

3套底部导航激活态（主 App、EaseMoni、Shield Pay）

问题清单

按钮的形状是统一的，全部是全圆胶囊。但尺寸档位、填充写法和放置位置各业务自成一套，原生页、H5 页和子应用之间的差异最大。

P0
主按钮有 11 种尺寸，没有统一档位原生吸底按钮 273×48，H5 的 Deposit Now 287×46、Start Now 293×45，EaseMoni 的 Get Funds 296×46，安全中心 134×48，弹窗 209×48。规范是 280×48，没有一处正好对上。
P0
同样是"填完金额去支付"，按钮档位差了一大截To Bank 的 Next 是 273×48 的大按钮；Airtime、Betting、Electricity 的 Pay 是挤在金额输入框右侧的小胶囊，尺寸分别是 88×32、70×30、66×29。三个缴费页的 Pay 也各不相同。
P0
一屏出现多个实色主按钮，违反"一屏只有一个实色主按钮"Fixed 定期页每个方案行都有一个实心绿 Save，一屏 5 个；SafeBox 页 Turn on 和吸底 Deposit Now 同时是实心绿；Cards 弹窗的主次按钮上下堆叠，虽然只有一个实色，但两个按钮等宽等高，主次区分弱。
P0
Me 页右上角图标压在系统状态栏上（显示 Bug）客服和设置图标的顶边在 12dp，与信号、电量图标重叠；首页同类图标在 48dp，位置正常。
P1
同一个 Go 有 4 种画法首页圣诞卡是纯绿 80×29，Rewards 是青到绿渐变 60×28，Loan Center 是白底绿描边的大写"GO ▸"62×27，EaseMoni 营销弹窗的 Claim & Borrow 是带投影的立体渐变。用户看到的是同一种操作，视觉权重却不同。
P1
同名按钮不同样式：Get FundsEaseMoni 主页的 Get Funds 是 296×46 的实心绿主按钮；从首页 Loan Center 进入，同一个 Get Funds 变成了绿卡片上 79×27 的白底小胶囊。
P1
次按钮有 4 种写法白底绿描边（Cards 弹窗 I Know）、浅绿底绿字（安全中心 Activate）、白底描边小胶囊（EaseMoni Learn More）、浅红底红描边（Emergency Lock）。规范的现网写法是浅绿底 #E2F5EB。
P1
导航栏右侧文字按钮颜色不统一原生页的 History 是绿色，H5 页（SafeBox、Fixed）的 More 是深灰，EaseMoni 的 Live Chat 是白色带图标。
P1
"查看全部"有 5 种写法View All ⌄ 深色无底、View All › 灰底胶囊、View All › 灰字无底、All › 深色、More › 灰色。Fixed 页同一张卡里还同时出现深色和绿色两种文字链。
P1
入口图标容器 6 种，Tab 选中态和底栏激活态各成一套详见下文"入口图标"和"Tab 与底栏"两节。
P2
看起来是按钮，点击区域却不一致首页圣诞卡的 Go 在代码里是一段文字，点到的其实是整张卡片；轮播 Banner 的 Go 才是真正的按钮。资产卡上，Wealth 的"金额 ›"可以单独点，Available 的"金额 ›"不能单独点。
P2
禁用态颜色各页一致，但和规范值不同；倒计时写进了按钮文字To Bank、Airtime、Betting、EaseMoni 的禁用底色实测都是 #BEE8D7 到 #C2EAD8，彼此一致；规范值是 #ACE3D0。EaseMoni 的 Get Limit (59s) 把等待时间放在按钮文字里。
P2
弹窗双按钮上下堆叠，和规范的左右并排不一致；暖色用在了非奖励场景Cards 弹窗两个按钮宽 209、上下排列；规范新版弹窗是左右各 110。EaseMoni 的入口图标用浅橙圆底，TV 的 1 Month 标签用橙色，规范要求暖色只用于奖励和时限。
一致
已经做到一致的部分所有按钮都是全圆胶囊；主绿在原生、H5、子应用之间一致；禁用态底色各页一致；原生二级页的导航栏结构（返回 + 标题 + 绿色 History）一致。Add Money 的 Copy Number（浅绿底）配 Share Details（实心绿），是规范 M 档主次按钮并排的标准写法，可以当治理样板；Electricity 的 Prepaid / Postpaid 选择块也符合规范。

主按钮

13 个主按钮样本出现了 11 种尺寸。高度分成 48、46、45、44、40、32、30、29 八档，同一流程类型里也没有统一。

页面	按钮	实现	尺寸 dp	位置	状态与写法
规范	主按钮	—	280×48	页面底部	实心绿，14 SemiBold，全圆
交易详情	Report Issue	原生	273×48	吸底	实心绿
To Bank	Next	原生	273×48	卡片内	禁用 #BFE8D6
安全中心半屏	Security Center	原生	134×48	底部双钮右侧	实心绿
Cards 提示弹窗	Manage Online Merchant	原生	209×48	弹窗内上下堆叠	实心绿
SafeBox（Save）	Deposit Now	H5	287×46	吸底	实心绿
Shield Pay	Start Now	H5	293×45	吸底	实心绿
EaseMoni（Loan）	Get Funds	子应用	296×46	卡片内	实心绿，右上叠橙红标签
EaseMoni 首次进入	Get Limit (59s)	子应用	296×46	卡片内	禁用，倒计时写在按钮文字里
EaseMoni 营销弹窗	Claim & Borrow	子应用	230×44	弹窗内	渐变 + 投影 + 倒计时角标
Airtime	Pay	原生	88×32	金额输入框右侧	禁用，小胶囊
Betting	Pay	原生	70×30	金额输入框右侧	禁用，小胶囊
Electricity	Pay	原生	66×29	金额输入框右侧	禁用，小胶囊
Add Money	Share Details	原生	137×40	卡片内，与次按钮并排	实心绿，M 档，符合规范

交易详情页 Report Issue 按钮 — **交易详情 · Report Issue**273×48 · 原生

SafeBox 页 Deposit Now 按钮 — **SafeBox · Deposit Now**287×46 · H5

Shield Pay 页 Start Now 按钮 — **Shield Pay · Start Now**293×45 · H5

EaseMoni Get Funds 按钮 — **EaseMoni · Get Funds**296×46 · 子应用按钮上叠了橙红渐变标签

安全中心底部的 Emergency Lock 与 Security Center 按钮 — **安全中心 · 底部双按钮**186×46 + 134×48左右两个按钮高度不同

EaseMoni 营销弹窗 Claim and Borrow 按钮 — **EaseMoni 弹窗 · Claim & Borrow**230×44唯一带投影和立体渐变的主按钮

To Bank 禁用态 Next 按钮 — **To Bank · Next（禁用）**273×48

Airtime 禁用态 Pay 按钮 — **Airtime · Pay（禁用）**88×32

Betting 禁用态 Pay 按钮 — **Betting · Pay（禁用）**70×30与 Airtime 同样的用法，尺寸不同

Electricity 禁用态 Pay 按钮 — **Electricity · Pay（禁用）**66×29第三种内联 Pay 尺寸

Add Money 页 Copy Number 与 Share Details 主次按钮并排 — **Add Money · 主次并排（样板）**137×40 ×2浅绿底次按钮 + 实心绿主按钮，符合规范

EaseMoni 禁用态 Get Limit 倒计时按钮 — **EaseMoni · Get Limit (59s)**296×46 禁用

Cards 页提示弹窗，主次按钮上下堆叠 — **Cards 弹窗 · 主次按钮上下堆叠**209×48 + 207×46规范新版是左右并排，各 110 宽

卡片内小胶囊

卡片和列表行里的小按钮有 6 种高度、6 种填充写法（实心绿、渐变、黑色、浅绿底、白底描边、绿底上的白胶囊）。规范的 S 档是高 28，Go 约 40×28。

页面	按钮	尺寸 dp	填充	问题
规范	S 档 / 卡片 Go	高 28，Go 约 40×28	—	—
首页圣诞卡	Go	80×29	实心绿	代码里是文字，不能单独点
Rewards · Daily Bonus	Go	60×28	青→绿渐变	与首页 Go 不同
Rewards · 券	Use	42×28	黑色 #202423	营销黑按钮，符合规范用法
Wealth	Join	50×28	实心绿	—
SafeBox	Turn on	68×26	实心绿	与吸底主按钮同屏
Fixed	Save ×5	48×29	实心绿	一屏 5 个实色按钮
安全中心	Activate	71×24	浅绿底绿字	—
Betting	Get（售罄）	50×26	禁用浅绿	—
首页资产卡	Add	35×23	绿底 + 浅绿描边	符合规范实读值
EaseMoni	Learn More	约 80×27	白底绿描边	—
Loan Center	GO ▸ ×3	62×27	白底绿描边，大写 + 三角	第 4 种 Go
Loan Center	Get Funds	79×27	绿卡片上的白底绿字	EaseMoni 同名按钮是 296×46 实心绿
Loan Center	Unlock	79×27	实心绿	—

Rewards Go 按钮 — **Rewards · Go**60×28 渐变

Rewards Use 按钮 — **Rewards · Use**42×28 黑色

Wealth Join 按钮 — **Wealth · Join**50×28 实心绿

SafeBox Turn on 按钮 — **SafeBox · Turn on**68×26 实心绿

安全中心 Activate 按钮 — **安全中心 · Activate**71×24 浅绿底

EaseMoni Learn More 按钮 — **EaseMoni · Learn More**约 80×27 描边

Betting 禁用态 Get 按钮 — **Betting · Get（禁用）**50×26

Loan Center 大写 GO 描边按钮 — **Loan Center · GO ▸**62×27 白底描边第 4 种 Go

Loan Center 白底 Get Funds 按钮 — **Loan Center · Get Funds**79×27 白底绿字与 EaseMoni 同名按钮样式不同

Loan Center Unlock 按钮 — **Loan Center · Unlock**79×27 实心绿

Fixed 页每行一个实心绿 Save 按钮 — **Fixed · 每行一个实心 Save**48×29 ×5列表行按规范应用 S 档浅底或描边

次按钮

次按钮有 4 种写法。规范画板写的是白底绿描边，现网主流是浅绿底，两种写法都在用，需要先定一个标准。

写法	出现位置	尺寸 dp	备注
白底 + 绿描边 + 绿字	Cards 弹窗 I Know；EaseMoni Learn More	207×46；约 80×27	规范画板的 Secondary 写法
浅绿底 + 绿字	安全中心 Activate；Add Money Copy Number	71×24；137×40	规范的现网主流写法（#E2F5EB）
浅红底 + 红描边 + 红字	安全中心 Emergency Lock	186×46	高风险操作，单独的危险样式，规范里没有定义
浅灰胶囊 + 灰字	To OPay 的 View All ›；Me 的 Smart Assistant 话题	79×20	介于按钮和文字链之间

需要团队拍板：次按钮默认用浅绿底还是白底描边。建议浅绿底作为默认次按钮，白底描边只用在弹窗的"取消 / 稍后"，危险操作单独定义一档红色样式并写进规范。

文字按钮与文字链

导航栏右侧的文字按钮有 3 种颜色，"查看全部"有 5 种写法，绿色和灰色文字链的分工没有规则。

原生页导航栏绿色 History — **导航栏 · History**原生，绿色

EaseMoni 导航栏白色 Live Chat — **导航栏 · Live Chat**子应用，白色带图标

Rewards View All 向下箭头 — **Rewards · View All ⌄**深色，无底

To OPay View All 灰底胶囊 — **To OPay · View All ›**灰底胶囊

SafeBox View All 灰字 — **SafeBox · View All ›**灰字，无底

Betting All 深色文字链 — **Betting · All ›**深色

Airtime More 灰色文字链 — **Airtime · More ›**灰色

Fixed 卡片中深色和绿色两种文字链 — **Fixed · 同卡两种文字链**Transactions › 深色 / 0 Active Plans › 绿色

通知页绿色 View 文字链 — **Notifications · View ›**React Native，绿色

扫码页深色导航栏白色 Album — **扫码 · Album**深色页，白色文字深色场景用白字合理，规范未定义

入口图标

图标入口本身就是按钮，容器有 6 种：无底、实心绿圆、浅绿圆、浅绿圆角方、浅灰圆、浅橙圆。规范定义了宫格无底线性图标、金刚 48 实心绿圆和浅绿 #E2F5EB 入口底；浅灰圆和浅橙圆不在规范里，圆形和圆角方也没有使用规则。

All Service 入口浅灰圆 — **All Service**浅灰圆，深色线性图标

EaseMoni 入口浅橙圆 — **EaseMoni**浅橙圆，橙色图标暖色用在非奖励场景

Me 页右上角图标与状态栏重叠 — **Bug · Me 顶栏图标压住状态栏**顶边 12dp，首页同类图标在 48dp

Tab 与底栏

页内 Tab 的选中态有绿字和黑色粗体两种，排布有等分居中和靠左两种；通知页另用胶囊筛选器；底部导航有 3 套激活态。

To OPay 页 Tab 两等分居中 — **To OPay**绿字 + 绿下划线，两等分居中

To Bank 页 Tab 靠左 — **To Bank**绿字 + 绿下划线，靠左与 To OPay 是同类页面

Data 页 Tab 绿字 — **Mobile Data**绿色粗体 + 绿下划线，可滑动

通知页胶囊筛选器 — **Notifications · 筛选胶囊**选中：浅绿底 + 浅绿描边 + 绿字，28 高

Electricity 页 Prepaid 与 Postpaid 选择块 — **Electricity · 选择块**选中：浅绿底 + 绿描边 + 右下绿三角勾符合规范

Shield Pay 悬浮胶囊底栏 — **Shield Pay 底栏**悬浮胶囊，激活项浅灰底块

治理建议

先定档位和语义，再按影响面从大到小收敛。原生、H5 和子应用三套实现要共用同一份按钮 token，否则治理完还会再分叉。

1. 定 4 档按钮尺寸

L：280×48，页面底部主操作；需要通栏时用屏宽减 2×16
M：高 40，卡片内、空状态
S：高 28，列表行右侧、卡片 Go
XS：高 24，只用在资产卡这类高密度区域（如 Add）
弹窗：单钮 200 宽，双钮左右各 110

影响：9 种主按钮尺寸 → 1 种；5 种小胶囊高度 → 2 种

2. "提交支付"统一用 L 档

Airtime、Betting 的 Pay 从输入框右侧的小胶囊改成 L 档，与 To Bank 的 Next 一致
金额快捷块保留，提交按钮单独放在页面底部

影响：缴费类页面（Airtime、Data、Betting、TV、Electricity 等）

3. 落实"一屏一个实色主按钮"

Fixed 方案行的 Save 改为 S 档浅绿底
SafeBox 的 Turn on 改为 S 档浅绿底或开关
加一条走查规则：一屏出现第二个实心绿按钮即不通过

影响：Fixed、SafeBox（均为 H5）

4. Go 做成一个组件

工具类和财富类卡片：S 档实心绿
渐变和立体投影只留给运营位，由运营组件承载，并写清使用边界
修正首页圣诞卡 Go 的实现，让按钮本身可点
同名按钮同样式：Loan Center 和 EaseMoni 的 Get Funds 统一

影响：首页、Rewards、Loan Center、EaseMoni

5. 文字按钮语义

操作类（History、Ask them、Learn More）：绿色 Medium
浏览类（View All、More）：统一为"灰字 + ›"，不加底色
H5 容器导航栏右侧文字与原生一致，改为绿色

影响：5 种"查看全部"写法 → 1 种

6. 入口图标收敛为 2 级

一级（首页宫格、全部服务）：无底，深墨绿线性图标
二级（Tab 首页的功能入口）：40 浅绿圆底
浅灰圆、圆角方、暖橙圆退出主流程

影响：Wealth、Cards、Me、All Service、EaseMoni

7. Tab 和底栏

页内 Tab 选中态统一为绿字 + 绿色短下划线；同类页面用同一种排布
子应用底栏激活态跟随主 App，或在规范里写明子应用例外

影响：To OPay、To Bank、TV、EaseMoni

8. 立即修复的 Bug

Me 页顶栏图标避让状态栏
Shield Pay 右侧悬浮 Help 被屏幕边缘截断，文字只露出一半
Available 卡的"金额 ›"补上单独的点击区域，与 Wealth 卡一致

影响：Me、Shield Pay、首页

范围与限制

这次只做浏览，不输入任何金额、账号和 PIN，也不点任何会产生交易或提交的按钮。下面这些没有覆盖到。

已覆盖	实现	已覆盖	实现
首页（展开 / 收起）	原生	To OPay	原生
Rewards	原生	To Bank	原生
Wealth	原生	交易详情	原生
Cards + 提示弹窗	原生	Airtime / Mobile Data / Betting / TV / Electricity	原生
Me	原生	All Service	原生
安全中心半屏	原生	SafeBox / Fixed / Shield Pay	H5
Loan Center	原生	EaseMoni（首次、营销弹窗、主页）	子应用
Add Money / 扫码	原生	Notifications	React Native

未覆盖的页面：设置及其深层页面、Me 列表里的二级页（My Loan、Bank Card/Account 等）、Rewards 和 Wealth 的下钻页。
未覆盖的状态：输入后才出现的可点击态、确认页、PIN 输入、成功 / 失败 / 处理中结果页。这些要用测试账号走完整流程。
颜色只作相对比较：截图的主绿实测为 #52B57B，规范是 #00B876，差异来自屏幕色彩模式或截图色彩管理。表里的色值用来比较页面之间的差异，不用来判断是否偏离规范色值。
尺寸误差约 ±1dp：尺寸来自界面结构的边界和像素测量。Rewards 和 All Service 页有持续动画，导不出界面结构，只用了像素测量。