OPAY HOME / DESIGN WORKSPACE

先选底稿,再独立换装。

在完整首页里比较资产、图标、颜色和营销位;喜欢的组合可以保存和导出。

9 个基座6 个维度11 种 Kbox(含原样)5 套新图标五模块直点
打开 V18 换装工作台 ↗
说明口径:依据本轮 manifest、工作台和模块实现;官方设计来源单独标注。此处数量表示可选项,不表示效果提升。
首页改版 / 最终组合推荐

十套首页组合,按推荐顺序来看。

Top 1 是我最推荐的日常默认首页。如果更希望保留渐变旧稿的特色、同时展示两类资产,优先看 Top 2;希望沿用现状信息结构,则看 Top 3。

排序综合考虑日常操作、金额与标签可读性、信息主次、OPay 品牌和交易核对。它是基于公开资料的设计判断,不是用户投票、转化率成绩或审美偏好调查。

先完成日常操作

先找余额和转账,再看服务与活动。

金额和标签清楚

卡高主要取 92–118px,保留识别空间。

品牌统一、主次明确

保持 OPay 绿,渐变与材质服务于分层。

核对与求助方便

交易文字链、客服和通知都保留。

每张效果图都可放大;“打开完整 H5”查看完整页面,“载入工作台”可直接继续调整。推荐配置不会写入你的已保存方案,喜欢后再手动保存。

TOP 01首选 · 优先进入评审

明绿清晰 · 日常主首页

面向大众的默认首页
Top 1:明绿清晰 · 日常主首页,工作台实际组合效果
首屏效果(原稿范围) · 点击放大

为什么排在这里
余额、最近交易、四个主入口形成清楚的操作顺序;明绿资产卡保留 OPay 识别度,深绿细线服务让主次容易区分。

取舍:储蓄仍放在页签内;对经常同时看两笔资产的人,第 2 套更直接。

最建议先进入设计评审与小范围用户测试。
查看这套组合的模块与尺寸
框架
明绿分区
背景
iOS 分组浅灰
资产
页签单卡 · 明亮品牌绿 · 110px
文字链
明绿转账条
四入口
明亮实形 · 36px
八服务
深绿轻线 · 28px
间距
图文 8/8px · 服务行 18px · 模块 12px
运营位
礼盒话费横幅
TOP 02第 2 推荐

薄荷双资产 · 轻盈全能

同时关注余额与储蓄的人
Top 2:薄荷双资产 · 轻盈全能,工作台实际组合效果
完整效果 · 点击放大 · 长页面已展开

为什么排在这里
把 Available 与 Savings 并列展示;白卡黑字使金额清楚,顶部薄荷渐变承担气氛,主入口仍用明确的 OPay 绿。

取舍:两个金额区需要理解两类账户;搜索框和下方金融推荐增加了信息量,因此排在单卡方案之后。

最适合保留旧稿渐变特色的主推备选。
查看这套组合的模块与尺寸
框架
薄荷渐变
背景
旧稿 · 顶部薄荷渐变
资产
轻双资产卡 · 纯白轻卡 · 98px
文字链
轻量 History 条
四入口
绿圆角图标 · 44px
八服务
轻圆片图标 · 32px
间距
图文 8/8px · 服务行 18px · 模块 14px
运营位
礼盒话费横幅
TOP 03第 3 推荐

熟悉焕新 · 渐进改版

现有首页的渐进改版
Top 3:熟悉焕新 · 渐进改版,工作台实际组合效果
完整效果 · 点击放大 · 长页面已展开

为什么排在这里
保留现状底座、单一余额和原交易状态,增强四大入口的轮廓与识别;保留现状的信息位置,尽量减少重新寻找内容的负担。

取舍:保留的历史信息结构限制了整页简化幅度;新鲜感不及前两套。

适合作为改版对照组,重点观察操作路径是否更顺。
查看这套组合的模块与尺寸
框架
OPay 现状
背景
金融浅灰
资产
沿用原生结构 · 原生配色 · 110px
文字链
原生交易与订单
四入口
绿圆与几何 · 44px
八服务
黑绿点色 · 30px
间距
图文 8/8px · 服务行 18px · 模块 12px
运营位
现状储蓄推荐
TOP 04第 4 推荐

合并双卡 · 紧凑有序

想同时看两类资产,又希望首屏更紧凑
Top 4:合并双卡 · 紧凑有序,工作台实际组合效果
完整效果 · 点击放大 · 长页面已展开

为什么排在这里
沿用已校准字体的合并双卡,把两类资产压成一个完整区域;单行交易条与统一入口底板让内容顺着一条轴线展开。

取舍:并排金额的可用宽度较小,大余额或更大字体时仍需专项检查。

推荐给偏好紧凑布局的版本,不把 60px 极限高度当默认。
查看这套组合的模块与尺寸
框架
合并双卡
背景
云白
资产
沿用原生结构 · 原生配色 · 92px
文字链
单行转账条
四入口
深浅双色 · 40px
八服务
深绿轻线 · 28px
间距
图文 8/8px · 服务行 18px · 模块 12px
运营位
优惠券插画
TOP 05第 5 推荐

白卡直达 · 操作优先

首页主要用于转账与日常缴费
Top 5:白卡直达 · 操作优先,工作台实际组合效果
完整效果 · 点击放大 · 长页面已展开

为什么排在这里
以一张浅白余额卡减轻顶部重量,大轮廓主入口与饱满服务图形形成明显区分;保留一条话费优惠入口,放在核心操作之后。

取舍:不并列展示 Savings 金额,储蓄更多依赖 Save 入口;品牌大色块也比 Top 1 少。

适合测试“第一眼更容易找到下一步操作”的方向。
查看这套组合的模块与尺寸
框架
薄荷渐变
背景
金融浅灰
资产
单资产卡 · 纯白轻卡 · 92px
文字链
轻量 History 条
四入口
大轮廓与实形 · 48px
八服务
大轮廓与实形 · 32px
间距
图文 8/8px · 服务行 18px · 模块 12px
运营位
礼盒话费横幅
TOP 06第 6 推荐

绿白主次 · 钱包与储蓄

需要区分钱包资金和储蓄资金
Top 6:绿白主次 · 钱包与储蓄,工作台实际组合效果
首屏效果(原稿范围) · 点击放大

为什么排在这里
绿色主卡与白色次卡建立资产主次,圆角主入口与浅底服务保持一致;视觉上先看到可用余额,再看储蓄。

取舍:色彩有助分层,但含义仍依赖 Available / Savings 标签;两卡比单卡占用更多注意力。

适合作为绿白分层的双资产备选。
查看这套组合的模块与尺寸
框架
绿白双卡
背景
纯白
资产
沿用原生结构 · 原生配色 · 98px
文字链
绿白白卡交易条
四入口
绿圆角图标 · 44px
八服务
轻圆片图标 · 30px
间距
图文 8/8px · 服务行 18px · 模块 12px
运营位
礼盒话费横幅
TOP 07第 7 推荐

墨绿白瓷 · 克制质感

希望更稳重,但仍保持大众钱包风格
Top 7:墨绿白瓷 · 克制质感,工作台实际组合效果
首屏效果(原稿范围) · 点击放大

为什么排在这里
墨绿资产区域与白瓷入口拉开层次,服务保持深线加绿细节;整页色彩集中,金额仍是第一视觉焦点。

取舍:深色卡与微投影更重,小屏上的细节识别需要验证;不作为全部用户的默认审美。

适合品牌质感方向的比选。
查看这套组合的模块与尺寸
框架
明绿分区
背景
纯白
资产
页签单卡 · 统一墨绿 · 118px
文字链
明绿转账条
四入口
白瓷与墨线 · 44px
八服务
白瓷与墨线 · 30px
间距
图文 8/8px · 服务行 18px · 模块 12px
运营位
优惠券插画
TOP 08第 8 推荐

翡翠任务 · 活跃运营

明确开展消费任务活动的阶段
Top 8:翡翠任务 · 活跃运营,工作台实际组合效果
完整效果 · 点击放大 · 长页面已展开

为什么排在这里
轻白双卡保持资金清楚,翡翠浅渐变与叠片图标增加活力;进度式活动把奖励步骤集中在一个模块内。

取舍:任务卡显著增加页面长度和阅读负担,必须先确认活动规则;不宜长期替代日常主首页。

作为活动期候选,排序低于常态首页方案。
查看这套组合的模块与尺寸
框架
薄荷渐变
背景
翡翠柔光
资产
轻双资产卡 · 纯白轻卡 · 110px
文字链
轻量 History 条
四入口
开放线与叠片 · 48px
八服务
开放线与叠片 · 32px
间距
图文 8/8px · 服务行 18px · 模块 12px
运营位
消费任务进度
TOP 09第 9 推荐

平面轻快 · 稳定识别

偏好简单块面、少装饰的首页
Top 9:平面轻快 · 稳定识别,工作台实际组合效果
完整效果 · 点击放大 · 长页面已展开

为什么排在这里
借用 PalmPay 思路底座的组织方式,用 OPay 绿实形和统一白底形成稳定入口;交易记录保持独立,便于回看。

取舍:平面实形的一致性强,但部分图标彼此相近,需要靠文字标签完成辨认;布局与图标有别于现状底座,仍需验证既有用户的辨认和适应情况。

适合作为图标辨认测试的备选,不声称性能已经提升。
查看这套组合的模块与尺寸
框架
PalmPay 思路 · OPay 绿
背景
iOS 分组浅灰
资产
单资产卡 · OPay 原绿 · 98px
文字链
轻量 History 条
四入口
OPay 绿实形 · 44px
八服务
OPay 绿实形 · 32px
间距
图文 8/8px · 服务行 18px · 模块 12px
运营位
现状储蓄推荐
TOP 10第 10 推荐

柔雾雕塑 · 视觉探索

品牌视觉探索与设计评审
Top 10:柔雾雕塑 · 视觉探索,工作台实际组合效果
完整效果 · 点击放大 · 长页面已展开

为什么排在这里
鼠尾草浅底、白底内双卡与绿材质主入口组合成柔和层次;保留 OPay 色系,也保留完整的资金和服务标签。

取舍:资产外框与立体主入口都较显眼,可能分散日常操作注意力;目前没有市场证据支持它比前几套更好用。

列入 Top 10 的风格探索位,优先级最低。
查看这套组合的模块与尺寸
框架
薄荷渐变
背景
鼠尾草柔雾
资产
白底内双卡 · 纯白轻卡 · 110px
文字链
轻量 History 条
四入口
绿材质与点睛 · 48px
八服务
绿材质与点睛 · 32px
间距
图文 8/8px · 服务行 18px · 模块 12px
运营位
礼盒话费横幅

排名依据:公开事实与设计判断分开看

本次核验日期:。以下资料提供使用背景;它们没有比较这十个页面,也没有证明某一款配色更受欢迎。

  1. OPay 的核心服务。官网强调安全、易用和可负担,列出转账、钱包充值、话费/流量、账单及余额收益。OPay 官方网站(网页未标发布日期,本次核验)。
    设计判断:余额与转账先于营销,话费/流量入口靠前。
  2. 数字金融用于真实支付和转账。EFInA A2F 2023 报告中,商户付款和汇款是数字金融常见用途;汇款包含国内转账。A2F 2023 完整报告,第 59–60 页(2024 年发布)。
    设计判断:保留 To OPay / To Bank 的稳定位置,交易核对入口不能藏得太深。
  3. 费用与优惠需要讲清。EFInA 2024 年费用专题记录了用户对低费用的重视,也记录了使用后才发现费用的情况。EFInA 费用专题,2024 年 5 月
    设计判断:保留一条容易读懂的优惠,任务型活动排在常态首页之后。
  4. 金融理解能力并不相同。A2F 报告分别讨论金融能力的多个维度。A2F 2023,第 82 页。这不是 OPay 用户单独调查,也不等于识字率。
    设计判断:保留文字标签,区分 Available 与 Savings;不为了紧凑而把所有卡片压到 60px。
  5. 互联网使用仍有门槛。GSMA 尼日利亚报告指出可负担性、数字技能等障碍;相关消费者调查来自 2022 年。GSMA Nigeria 报告,2024 年 5 月,第 40 页
    设计判断:优先清楚、稳定、容易学会的布局;本次没有做网络耗流量或设备性能测试。
  6. 帮助与安全功能要找得到。OPay 官方列出 App 内客服和紧急锁定账户/卡片等能力。OPay 官方网站
    设计判断:保留顶部客服、通知和最近交易核对,不用额外口号替代真实入口。

展示口径:十套均由 V13 已有组件实际生成;金额、账户名、活动和业务标签沿用各底稿演示内容,不代表当前真实账户或在售报价。长底稿展开全部已有内容;明绿、绿白等参考稿仅提供 Finance 的首屏局部,保留其原稿边界。本排名不改动既有业务顺序,也不假设额外的用户权限或已开通账户。

建议下一步:先测试 Top 1 与 Top 2,用 Top 3 作现状方向对照;比较找余额、发起转账、查最近交易、找客服四项任务的完成时间和误点情况,再决定上线方案。

从哪里开始

先选最接近目标的基座,再一次改一个维度。建议依次比较资产卡、主入口、八服务,最后调整 Kbox 与页面底色。

进入任一维度后,可选项直接平铺;也可以直接点击手机内的五个模块来定位设置。四套一键搭配只在最后一个「明绿分区」基座出现;图标画法、配色与间距可继续独立修改。

如何看差异

H5 用于查看点击反馈;原图 用于回看对应参考;叠加 可调透明度,检查比例与位置。

“恢复基座原样”恢复当前底稿;切换底稿时,可选择是否保留已调整的模块。

V18:电脑与手机分别预览

电脑工作台保留正常手机画幅,鼠标放在手机内上下滚动;薄荷渐变同样使用 390 × 867 画幅,原图按原比例截取首屏,切换原图和 H5 不改变手机尺寸。

扫码打开的手机预览、导出的完整 H5 与 PNG 使用完整页面。手机通过浏览器整页上下滑动,没有中间独立滚动区。

Kbox 切换保留全部素材地址,图片按需加载,避免切换中断影响图标和间距。高双卡去除多余外沿;现状稿移除错误拼接的悬浮角标,并按原稿校准现状与合并双卡的金额字重。

本版本仅在本地交付,未发布到 Netlify。手机扫码需要与电脑连接同一网络。

V17:原稿比例与元素修复

打开九个底座的原图 / H5 并排核对页

原样 H5 与原图保持相同画幅;切换 H5、原图和叠加时保持同一缩放比例。主动增高模块后,画布只增加对应高度。手机浏览器继续整页滚动。

恢复紧凑框架的浅灰底色、白色分区卡片,修复图标图集定位,并恢复薄荷渐变的完整长参考稿。本地版本的二维码指向当前预览服务,不会跳转到旧的线上版本;手机需与电脑在同一网络。

本版本仅在本地交付,未发布到 Netlify。

V16:完整适应、圆角恢复与流畅切换

桌面“适应屏幕”按当前整张页面高度计算比例,不再截掉长页底部;100% 和手动放大仍可滚动画板。手机扫码继续满宽、整页滚动。

H5 和原图恢复圆角。H5 的小图标单独拆成轻量图集,首次无需等待完整原图;已打开底座保留页面,切回直接显示,不弹加载提示。原图在后台加载,仅在查看尚未就绪的原图时提示“原图正在加载中”。

左侧控制台加宽,新增醒目的“模块”标题和六个入口。二维码默认显示在预览右侧,可关闭后重新展开。

V15:按需加载、整页滚动与微信扫码

工作台与手机页按需加载当前底座。原图在进入原图或叠加模式后才下载;左侧使用小缩略图,图片采用无损压缩并复用缓存。

完整首页展开为一张长画板,状态栏、内容和底部导航一起随外层页面滚动。手机页面保持等比满宽,不再把滚动限制在中间区域。

“微信扫码”二维码中间有微信图标,并使用高纠错。“下载本地”生成当前组合的完整 PNG 长图,方便手动发到飞书、在图片查看器中查看。原有“导出 H5”生成可离线打开的完整页面。

同一台电脑、Chrome 全新缓存、10 Mbps 下载与 40ms 延迟的模拟测试:V14 首次可用 27.29 秒,V15 为 1.12 秒。入口 HTML 从 33.18 MB 降到约 178 KB,首次实际加载约 1.35 MB(含所选底座和图片)。这是受控测试,真实网络速度会有差异。

浏览器和微信自身的顶部栏由应用控制。扫码展示当前配置快照,电脑修改后请重新扫码。历史二维码继续有效。

V15:手机扫码与预览缩放

画板右上角点“手机扫码”即可打开二维码。二维码携带当前底座、各模块样式、配色、尺寸与余额显示状态;手机打开后只有首页样本,自动按屏幕宽度铺满,内容可上下滑动。

功能使用方式
扫码预览扫码显示扫码时的搭配快照。电脑改完后二维码自动更新,手机重新扫码即可查看新样式。也可复制链接发到自己的手机。
手机全屏手机右上角“全屏”在支持的浏览器中隐藏浏览器界面。iPhone Safari 可“分享 → 添加到主屏幕”,从桌面图标打开。页面不加设备外框,内容等比满宽,整张首页上下滚动;浏览器及系统区域由手机决定。
电脑缩放预览下方“+ / −”每次增减 10 个百分点,手动范围 25%–250%;“适应屏幕”调整预览比例,完整长页可以上下滑动,“100%”恢复设计尺寸。放大后画板可滚动。缩放不改变配置、二维码或导出尺寸。

二维码使用线上 home-opay.netlify.app 的 V15 手机入口;本地 HTML 也可生成同一链接。手机只加载选中的底座与图片。二维码在本机生成,不依赖第三方二维码服务。

技术来源:Nayuki QR Code generator(MIT)浏览器 Fullscreen API。手机扫码无需安装工作台。

V13:底色扩充与紧凑比例

V13 首次打开默认“明绿分区”。已有命名方案继续保留;保存或导入即可继续已有搭配。

更新使用方式
8 款渐变页面底色 → 渐变底色:薄荷、浅光、翡翠、水青、鼠尾草、青柠、冰蓝、香槟。
14 款纯色页面底色 → 纯色底色:加入 iOS 分组浅灰、金融浅灰、银灰、蓝灰、米灰、暖象牙、青瓷浅绿。
资产卡紧凑高度滑块和数字输入下限 60px;推荐五档覆盖 70、80、90 多。低高度会同步调整行距、图标按钮占位和字号。
合并双卡复核按已有原图重新核对字体、字重、金额与标签比例;原样与叠加可直接对照。

已实测:九个原生底座、六种自定义资产卡形态在 60px 时文字未越界;99→100px 的字号与行距连续变化。首次打开默认明绿分区。

查看合并双卡原图与 H5 对照(左原图 / 右 H5) · 交互验证记录

合并双卡补齐 Poppins SemiBold 字重,校准金额、标签和标题的位置。按截图中可测文字定位对齐,缩放与字体抗锯齿仍可能造成约 1px 视觉差异。

iOS 分组浅灰为浅色界面的固定近似色;Apple 的系统背景是随界面环境变化的语义颜色。其他“金融浅灰”等名称表示本工作台的设计用途,不声称来自某家银行的精确取色。Apple:分组界面背景色

V12:薄荷渐变旧稿的拆解与融合

第九个“薄荷渐变”底座保留旧稿的搜索顶栏、白色双资产、轻量 History 条、四个绿色主入口、八个浅圆片服务,以及消费任务、Finance、Payment Bills、Loan 下半屏。原稿为长截图,工作台按 390 × 867 的手机视窗内部滚动;原图叠加展示顶部同等比例,不将整张长图压缩进一屏。

旧稿元素工作台位置
顶部青绿向灰白淡出的背景页面底色 → 旧稿 · 顶部薄荷渐变
头像、搜索与三个快捷工具页面底色 → 顶部身份与搜索
轻双卡、纯白轻卡皮肤资产卡 → 卡片形态 / 卡片颜色
细 History 文字链首页文字链 → 旧稿 · 轻量 History 条
绿圆角主入口、浅圆片服务金刚区 · 4 / 金刚区 · 8 → 图标画法
消费奖励、礼盒话费及组合Kbox → 旧稿系列

这些选项均可跨底座使用;各基座原有业务金额和标签保持独立。新增基座及任务卡的金额、奖励、利率均来自旧设计示例,不代表当前实际产品活动。任务卡用静态进度,不模拟真实发奖。

所有原有五档推荐、资产内容高度联动、区域开关、隐框点击、配置保存/回导和导出继续保留。新顶栏字段在旧配置中默认“基座原样”。

查看完整旧稿截图

V11:直接点选五档推荐

每个滑块下方都有五档推荐,可以直接点选,也可以继续拖动或输入数字微调。高度和间距从紧凑到宽松,图标从小巧到更大;每档显示实际像素值。资产高度和图标推荐会跟随当前底座、画法变化,连续点选不会使推荐值漂移。

资产卡高度调整会带动内部各行、留白和字号协调变化,双卡的同行保持对齐;长金额按实际横向空间限制放大,避免溢出。恢复原样可回到原始比例。独立间距滑块用于微调对应元素之间的关系。

叠加透明度也提供五档:H5、偏 H5、各半、偏原图、原图。区域边框继续默认隐藏,右上角开关仍可开启;以下保留之前版本的设计说明。

V10:区域边框默认隐藏

画板右上角新增「显示区域」开关,每次打开工作台默认关闭。关闭时仍可点击资产卡、文字链、四入口、八服务或 Kbox,左侧会切换到对应设置。打开开关后显示当前选中模块的边框。

开关只控制画板中的辅助边框,切换基座或继续换装时保持当前开关状态;PNG 和独立 H5 不包含边框。下方保留 V9 的设计与验收说明。

V9

本轮 8 项要求与对应实现

V9 延续 8 个首页基座,本轮重点是选中与调节体验、默认比例,以及四主入口和八服务的图标选择。下面逐条对应本轮要求;验收状态只代表已经执行的检查。

本轮要求如何落实当前证据范围
01一键搭配只在最后一个基座出现仅「明绿分区」显示四套一键搭配;标题使用「一键搭配」,去掉「飞书提案」字样。已验证可见范围
02全部基座都能调资产卡高度8 个基座都接入资产卡高度;选择原样布局时也能调整占位。8 个基座已实调 160px
03PalmPay 只参考结构,主题使用 OPay 绿保留底稿的结构思路;默认资产与图标配色使用 OPay 绿深浅。历史 palm 配色 ID 保留供旧配置识别。原生 H5 与完整 PNG 已查看,资产和图标均为 OPay 绿
04文字链细致还原并可混搭将原有基座的交易文字链作为可选起点;文字链可跨基座组合,业务名称与金额保持各自证据口径。9 种原基座文字链已逐一切换;现状订单无重复
05默认比例贴近原图,并允许继续调整默认从原图的高度、留白与图标比例起步;开放资产高度、图标大小、图文间距、服务行距与模块间距。服务尺寸 48px/图文间距 20px/行距 32px 时无交叠
06直接点击 H5 的五个模块选区在手机预览点资产卡、文字链、四主入口、八服务或 Kbox,即可选中对应模块并打开控制项。五模块直点选中 5 / 5
07只吸收五张附件的四/八入口风格新增 ZA、招商、云闪付、支付宝、工行五套图标语言;每套四主入口与八服务配对,又可独立选择,使用 OPay 主题。5 套新风格 PNG 已查看完整;本页为真实 SVG 预览
08实测异常、越界和不协调按实际 H5 检查点击、布局边界、导出和极端设置;本页只列已确认的结果,不把历史检查当成本轮证据。已列场景通过;保存、回导、对比与独立 H5 已实测
V9 当前已验证

手机预览五模块直点选中 5 / 5;8 个基座的原生资产卡高度实际调至 160px 均通过;一键搭配只在最后一个「明绿分区」基座显示。9 种原基座文字链已逐一切换,OPay 现状基座的订单没有重复显示。5 套新风格 PNG 已检查完整;服务图标尺寸 48px、图文间距 20px、行距 32px 的极限组合未出现交叠。方案保存后刷新恢复、配置导出后回导、方案对比均已通过;独立 H5 已重新打开,账户页签和隐私开关可用。

原样是比较起点

先使用“恢复基座原样”查看对应原图的结构比例。需要探索时,再分别调整资产卡高度、四入口和八服务的图标大小、图标与文字间距、服务两行间距,以及模块之间的留白。

例如只觉得服务区偏密,可以先增加两行间距;资产卡占位合适时,保留其高度继续比较图标。不必通过重做整个基座来试间距。

编辑选区与独立 H5

工作台里的模块选区帮助定位当前正在调整的部分。点击选区即可打开相应设置;预览中的账户页签、余额隐私开关等交互继续保留。

独立 H5 用于展示页面交互,不携带工作台的编辑选区和控制面板。需要回到可编辑组合时,保留工作台与导出的配置 JSON。

图标

五套入口设计语言,统一使用 OPay 绿

以下依据用户本轮提供的 ZA、招商银行、云闪付、支付宝与工商银行截图,只吸收四主入口与八服务的图标画法。业务仍是当前 OPay 基座的业务,不增加参考 App 中的账户、产品或入口。

预览由 V9 图标引擎实际生成:每套 4 个主入口+8 个服务,共 60 个内嵌 SVG。它们是矢量图形,未使用整页截图替代。预览统一使用「To OPay / To Bank / Save / Borrow」及明绿分区的八服务文案,方便比较画法。

ZA · 绿圆与几何

ref-za

大面积品牌绿圆形承载,白色图形保持充足留白;服务图标提炼为几何形与少量深浅块面。

四个主入口
To OPay
To Bank
Save
Borrow
八个服务
Airtime
Data
Betting
Electricity
Fixed
Loan Center
Refer & Earn
More

招商 · 白瓷与墨线

ref-ceramic

四入口的小白瓷方块与绿图形形成精细质感;服务区保持墨线,用局部绿色强调识别点。

四个主入口
To OPay
To Bank
Save
Borrow
八个服务
Airtime
Data
Betting
Electricity
Fixed
Loan Center
Refer & Earn
More

云闪付 · 大轮廓与实形

ref-open

放大断开的轮廓、圆角与留白;用 OPay 绿承载白线,服务图标采用饱满实形和浅色细节。

四个主入口
To OPay
To Bank
Save
Borrow
八个服务
Airtime
Data
Betting
Electricity
Fixed
Loan Center
Refer & Earn
More

支付宝 · 开放线与叠片

ref-layer

提炼开放线框的层次,服务图标使用错位浅绿衬片;颜色转换为 OPay 绿,不移用参考图的蓝色主题。

四个主入口
To OPay
To Bank
Save
Borrow
八个服务
Airtime
Data
Betting
Electricity
Fixed
Loan Center
Refer & Earn
More

工行 · 绿材质与点睛

ref-sculpted

主入口加入倾斜、厚度、单侧光泽和绿色材质;八服务采用深线轮廓加局部绿色细节。

四个主入口
To OPay
To Bank
Save
Borrow
八个服务
Airtime
Data
Betting
Electricity
Fixed
Loan Center
Refer & Earn
More

五套图标均可用于四主入口与八服务的独立选项;两组可自由交叉搭配。主入口默认外框 52px,白瓷款 48px;八服务默认外框 36px。这些是当前渲染尺寸,页面里可继续调节,不是参考 App 发布的官方尺寸规范。

历史

V8 历史:明绿分区与四套设计提案

以下保留 V8 的来源、设计取舍与当时的使用口径,用于追溯。这是历史记录;V9 的一键搭配范围、默认主题和本轮验收以上方章节为准。

当时吸收《首页UI视觉设计提案》与用户提供的四款首页截图。以截图最右侧第 4 款新增第 8 个基座「明绿分区·提案四」;原有 7 个基座、换装维度与方案操作继续保留。

设计来源:飞书《首页UI视觉设计提案》,读取版本 181(2026 年 9 月 11 日)。当时未打开其中的 Figma 链接。原文的核心方向是「专业可信、轻盈现代、品质统一」,通过同一绿色的深浅、卡片承载和图标体量组织页面。

用户提供的四款 OPay 首页设计截图,从左到右为深色渐变、墨绿统一、曜石黑和明亮品牌绿;最右第 4 款为 V8 新底座参考
用户提供的原始截图,原样内嵌;在小屏上可横向滚动查看。左至右分别对应提案一至四,最右侧是当时新增底座的布局来源。

第 8 个基座的页面层级

区域处理方式
顶部与主资金区用浅灰紫背景承接头像问候、资产卡、交易提醒和核心四入口,保留模块之间的留白。
资产卡采用「页签单卡」:Available / Savings 同处一张卡片,金额为第一视觉焦点,收益与账户说明其次,Add Money 位于卡内。
交易与核心四入口独立白色交易提醒条;四入口各有白色卡片,图形比普通服务更饱满,明确资金操作的优先级。
八服务与运营内容下方白色大容器承接较轻的八服务图标、浅绿优惠券运营位和 Finance 可见部分。
底部导航白色底栏与品牌深绿选中态收束页面,维持与资产卡的主次关系。

保持明确的事实边界

金额沿用截图所见。截图展示 Available 余额,但没有展示 Savings 余额;切换到 Savings 时使用「—」,不补造储蓄金额。

换皮肤不换业务文案。图标画法、资产卡颜色和材质可以交叉搭配;业务名称与顺序跟随当前基座。第三款截图中的 Loan、OWealth、BNPL 不会因选中曜石黑皮肤而自动替换进去。

Finance 只复现可见部分。截图未显示的内容不延伸为新的业务功能、账户数据或营销承诺。

像素属于视觉估算。飞书正文没有提供精确 HEX 色值、尺寸或阴影参数。当时的颜色、圆角和间距按截图与现有工作台尺度还原,不能当作飞书发布的精确规范。

四套提案如何映射到可组合模块

四个快捷预设使用完整方案原名。资产卡新增 4 种皮肤,核心入口与八服务采用对应画法;它们是可以继续独立修改的起点。

一键预设 · 原方案名资产卡
asset
核心四入口
core
八个服务
services
方案一|深色渐变 · 品牌质感页签单卡+深绿高光;深绿渐变、低对比品牌装饰。深浅双色绿色图标,白色独立卡片。轻量深绿线性图标。
方案二|墨绿统一 · 稳健专业页签单卡+统一墨绿;细腻渐变、克制光影。墨绿色图标,轻微立体层次,白色独立卡片。深墨绿线性图标,控制装饰强度。
方案三|曜石黑金 · 高端尊贵页签单卡+曜石黑;黑色渐变、绿色收益点缀。深色材质方形图标,加强光影。深色拟物图标,与主入口保持体量差。
方案四|明亮品牌绿 · 年轻活力页签单卡+明亮品牌绿;明快品牌色、低对比装饰。亮品牌绿实形图标,白色独立卡片。深绿线条+浅绿色错位叠层。

「曜石黑金」保留飞书原方案名;依据截图与正文,当时没有额外添加金色装饰。四套方案统一使用第 4 款的布局作为比较底座,避免布局与皮肤同时变化导致难以看清差异。

从一键提案开始,再自由混搭

1 · 选择起点

使用第 8 个基座

选择「明绿分区·提案四」查看最右截图的页面结构;四个一键提案可快速载入对应的资产卡、核心入口与八服务搭配。

2 · 拆开比较

一次替换一个模块

例如保留明绿分区布局,资产卡改成「统一墨绿」,核心四入口继续用明绿,八服务保留浅绿叠层;资产卡与两组图标分别调整。

3 · 保存组合

命名、导出、继续迭代

沿用“我的方案”、对比和导出操作。保存记录进入 V8 的独立命名空间;可导入旧 V5 / V6 配置,继续使用旧基座与既有选项。

混搭时守住三个主次关系:余额最先读到,四个资金入口其次,八服务与运营位再承接。普通服务不因换色而变成与核心四入口同等的大色块;品牌装饰避开金额、收益与主要操作区域。

V8 使用新的浏览器保存空间,不覆盖 V5 / V6 原有方案。旧浏览器里的记录不会自动搬入新页面;从旧工作台导出配置 JSON,再在 V8 导入。跨 Mac / Windows 时携带 V8 整个部署文件夹与导出的配置文件,保留相对目录结构。

01

底稿决定起点,模块决定细节。

八个完整首页基座

基座比较重点
01紧凑框架来自指定源文件的新方案,作为紧凑布局的起点。
02OPay 现状按当前截图保留单余额与服务标签,用于对照。
03合并双卡把两项资产放入共同容器,观察整体感。
04高双卡保留原稿较高的双卡,比较信息空间与首屏占位。
05浅光双卡以浅色、高光和轻边界减轻资金区视觉重量。
06绿白双卡比较品牌绿与白色资产卡的分工。
07PalmPay 思路 · OPay 探索只吸收其结构与实形图标思路;V9 默认使用 OPay 绿,保留 OPay 的入口语义。
08明绿分区·提案四新增:以最右截图为起点,页签单卡、白色四入口与大块白色服务区。

六个独立维度

维度可调整内容
页面底色修改手机页面背景,观察卡片边界与留白;支持候选色和自定义色。
资产卡分别选择卡片形态、颜色和高度;“原样”沿用当前基座。
首页文字链比较交易入口、最近一笔消息、卡下组合和独立消息条。
四个主入口图标画法、配色和外层承载分别选择;不改入口顺序。
八个服务画法与配色独立选择;文字与图标语义跟随基座。
Kbox切换营销素材与画法,在完整首页中看其占位和注意力。

各基座沿用对应原稿的金额、辅助文案与业务标签,并非全部使用同一组数据。现状基座没有储蓄金额,换成双账户形态时缺失值显示“—”。Fixed 与 OWealth 使用各自图形。

02

让手机预览优先占据画面。

页面底色 ≠ 画布底色

左侧“页面底色”改变手机内背景,随方案保存。右上“画布”只改变手机外的展示环境;暗画布为 RGB(35, 35, 35),两者独立。

适应屏幕 / 100%

“适应屏幕”按可用宽高缩放,便于看完整手机。切到“100%”可按实际比例查看,通过滚动画布浏览手机;手机内内容也可滚动。

保存面板按屏宽出现

笔记本通过右上“保存 / 我的方案”打开抽屉。浏览器视口宽度达到 1600px 时,方案面板在右侧常显。

1 · 保存

记下喜欢的组合

填名称和备注,保存到当前浏览器;在“我的方案”中再次使用或加入对比,最多三套并排。

2 · 导出

选择交付格式

PNG用于看完整首页效果;H5保留交互原型;配置JSON用于重新载入这套选择。

3 · 继续

跨设备带上配置

本机保存与跨设备交付分开。换电脑继续换装时,同时携带工作台HTML和导出的配置JSON。

03

营销素材也放进完整首页里比较。

本节为沿用的 Kbox 素材与 V6 历史效果图,原文件名保留以便追溯;不是 V9 新图标或新参数的验收截图。

Kbox共八项:基座原样、Small steps人物、原图1彩色角色、原图2优惠券、OPay现状储蓄,以及三组AI底图。早期最后三张简陋示意卡已撤下。

历史素材中的三组底图由内置 image_gen 分别生成,均为2172×724、约3:1;主体在右、左侧留白,标题与操作由H5单独排版。示例营销文案与活动规则仍需业务确认。

本节内嵌以上三张完整首页效果图。完整提示词、生成模式与图片路径见图片生成记录.json;原始图片没有文字或收益数字。

04

借鉴设计方法,保留 OPay 的表达。

沿用的设计依据与历史引用

用对齐、留白和字重建立层级。 Apple强调内容重要性、分组关系和可读文字。这里据此把调整重点放在卡片边界、图形体量与主辅对比上。Layout · Typography

颜色一致,材质有用途。 Apple要求色彩用途清楚,并把Liquid Glass主要放在控制与导航层。本轮“浅光”是轻视觉探索;营销图中的玻璃物体也不等同于把金额卡做成玻璃控件。Color · Materials

PalmPay官网按转账、储蓄、账单等服务组织介绍,可参考其主次表达;业务标签与规则仍依据OPay原稿。PalmPay官网

用户截图观察与设计判断

PalmPay 历史截图:当时提炼了浅色底、四个白卡实形入口和八服务的主次关系。V9 只保留结构思路,默认主题使用 OPay 绿;这里不是对实时 App 版本的核验。

ZA旧版 / 新版:分别提炼彩色圆角块+简洁图形,以及更清爽的平面混色;原入口与顺序由基座决定。

配色边界:OPay原绿 #00B876 是 V9 的默认主题起点,PalmPay 图标及自动推荐中的原彩色默认已转为品牌绿深浅。历史显式扩展配色继续保留供旧配置识别;它们不等同于正式品牌规范或上线结论。

05

验收记录与批注

V9 当前实测:五模块直点选中 5 / 5;8 个基座原生资产卡高度实际调至 160px 全部通过;一键搭配仅在最后一个基座显示。9 种原基座文字链已逐一切换,OPay 现状订单没有重复显示。5 套新图标风格的完整 PNG 均已查看,资产页签、金额和四/八入口标签保持完整;服务尺寸 48px、图文间距 20px、行距 32px 的极限组合未交叠。

保存与导出实测:保存后刷新并恢复方案、配置 JSON 导出再回导、已保存方案对比均已通过;独立 H5 已重新打开,账户页签、金额隐私开关正常,编辑选区未混入导出页。独立页无横向越界,验收时未记录到脚本错误。浅光、高双卡与绿白双卡缩到最小值时,充值按钮与金额原本可能相碰;已将充值按钮计入安全下限,分别在 85px、86px、85px 复测通过。本轮不代表所有自由组合已逐一测试,也未做 Windows 实机验收。

下方 V8、V6 记录保留原版本与原检查范围,仅用于历史追溯,不作为 V9 的本轮通过证据。

V8 历史实测:8 个基座均已在真实浏览器打开;4 套提案快捷搭配、账户页签、隐私开关、新模块搭配旧基座、方案保存与刷新恢复、方案对比、配置导出后重新导入均通过。PNG 已实际下载(780 × 1734),独立 H5 已实际下载并重新打开验证交互。曜石方案入口区已统一为 84px,服务区顶部圆角已修复。这里只覆盖列明的场景,不代表所有选项组合都做了逐一测试。

以下为 V6 历史验收记录。V9 当前证据仅限上方已列明场景,后续以本轮最终交付记录为准。

已完成 6,412 项分模块配置检查、241 项界面与尺寸检查、84 项基座组合检查,未发现文本溢出或脚本异常。分模块检查不等于所有选项的笛卡尔积。

覆盖 390×844、1024×768、1093×614、1280×720、1366×768、1440×900、1920×1080、2560×1440。紧凑基座与指定文件原方案截图哈希一致;高双卡内部及页面底层黑底均已移除,最终四角采样为浅色。

已实测方案保存、刷新恢复、H5/PNG 导出、配置导入、手机内隐私开关,以及页面底色和画布颜色互不影响。暗画布为 rgb(35,35,35)。

评审时优先看:金额与标签能否快速读清、主入口与服务图标是否有层级、运营位是否过重,以及长标签与小屏表现。

选中本说明的正文文字即可添加批注。批注自动保存在当前浏览器;完成后点击右下角“生成修改版”,将导出的HTML交回继续调整。