OPAY HOME / DESIGN WORKSPACE
先选底稿,再独立换装。
在完整首页里比较资产、图标、颜色和营销位;喜欢的组合可以保存和导出。
9 个基座6 个维度11 种 Kbox(含原样)5 套新图标五模块直点
打开 V18 换装工作台 ↗
说明口径:依据本轮 manifest、工作台和模块实现;官方设计来源单独标注。此处数量表示可选项,不表示效果提升。
首页改版 / 最终组合推荐
十套首页组合,按推荐顺序来看。
Top 1 是我最推荐的日常默认首页。如果更希望保留渐变旧稿的特色、同时展示两类资产,优先看 Top 2;希望沿用现状信息结构,则看 Top 3。
排序综合考虑日常操作、金额与标签可读性、信息主次、OPay 品牌和交易核对。它是基于公开资料的设计判断,不是用户投票、转化率成绩或审美偏好调查。
金额和标签清楚卡高主要取 92–118px,保留识别空间。
品牌统一、主次明确保持 OPay 绿,渐变与材质服务于分层。
每张效果图都可放大;“打开完整 H5”查看完整页面,“载入工作台”可直接继续调整。推荐配置不会写入你的已保存方案,喜欢后再手动保存。
TOP 01首选 · 优先进入评审
明绿清晰 · 日常主首页
面向大众的默认首页
首屏效果(原稿范围) · 点击放大
为什么排在这里
余额、最近交易、四个主入口形成清楚的操作顺序;明绿资产卡保留 OPay 识别度,深绿细线服务让主次容易区分。
取舍:储蓄仍放在页签内;对经常同时看两笔资产的人,第 2 套更直接。
最建议先进入设计评审与小范围用户测试。
查看这套组合的模块与尺寸
- 框架
- 明绿分区
- 背景
- iOS 分组浅灰
- 资产
- 页签单卡 · 明亮品牌绿 · 110px
- 文字链
- 明绿转账条
- 四入口
- 明亮实形 · 36px
- 八服务
- 深绿轻线 · 28px
- 间距
- 图文 8/8px · 服务行 18px · 模块 12px
- 运营位
- 礼盒话费横幅
TOP 02第 2 推荐
薄荷双资产 · 轻盈全能
同时关注余额与储蓄的人
完整效果 · 点击放大 · 长页面已展开
为什么排在这里
把 Available 与 Savings 并列展示;白卡黑字使金额清楚,顶部薄荷渐变承担气氛,主入口仍用明确的 OPay 绿。
取舍:两个金额区需要理解两类账户;搜索框和下方金融推荐增加了信息量,因此排在单卡方案之后。
最适合保留旧稿渐变特色的主推备选。
查看这套组合的模块与尺寸
- 框架
- 薄荷渐变
- 背景
- 旧稿 · 顶部薄荷渐变
- 资产
- 轻双资产卡 · 纯白轻卡 · 98px
- 文字链
- 轻量 History 条
- 四入口
- 绿圆角图标 · 44px
- 八服务
- 轻圆片图标 · 32px
- 间距
- 图文 8/8px · 服务行 18px · 模块 14px
- 运营位
- 礼盒话费横幅
TOP 03第 3 推荐
熟悉焕新 · 渐进改版
现有首页的渐进改版
完整效果 · 点击放大 · 长页面已展开
为什么排在这里
保留现状底座、单一余额和原交易状态,增强四大入口的轮廓与识别;保留现状的信息位置,尽量减少重新寻找内容的负担。
取舍:保留的历史信息结构限制了整页简化幅度;新鲜感不及前两套。
适合作为改版对照组,重点观察操作路径是否更顺。
查看这套组合的模块与尺寸
- 框架
- OPay 现状
- 背景
- 金融浅灰
- 资产
- 沿用原生结构 · 原生配色 · 110px
- 文字链
- 原生交易与订单
- 四入口
- 绿圆与几何 · 44px
- 八服务
- 黑绿点色 · 30px
- 间距
- 图文 8/8px · 服务行 18px · 模块 12px
- 运营位
- 现状储蓄推荐
TOP 04第 4 推荐
合并双卡 · 紧凑有序
想同时看两类资产,又希望首屏更紧凑
完整效果 · 点击放大 · 长页面已展开
为什么排在这里
沿用已校准字体的合并双卡,把两类资产压成一个完整区域;单行交易条与统一入口底板让内容顺着一条轴线展开。
取舍:并排金额的可用宽度较小,大余额或更大字体时仍需专项检查。
推荐给偏好紧凑布局的版本,不把 60px 极限高度当默认。
查看这套组合的模块与尺寸
- 框架
- 合并双卡
- 背景
- 云白
- 资产
- 沿用原生结构 · 原生配色 · 92px
- 文字链
- 单行转账条
- 四入口
- 深浅双色 · 40px
- 八服务
- 深绿轻线 · 28px
- 间距
- 图文 8/8px · 服务行 18px · 模块 12px
- 运营位
- 优惠券插画
TOP 05第 5 推荐
白卡直达 · 操作优先
首页主要用于转账与日常缴费
完整效果 · 点击放大 · 长页面已展开
为什么排在这里
以一张浅白余额卡减轻顶部重量,大轮廓主入口与饱满服务图形形成明显区分;保留一条话费优惠入口,放在核心操作之后。
取舍:不并列展示 Savings 金额,储蓄更多依赖 Save 入口;品牌大色块也比 Top 1 少。
适合测试“第一眼更容易找到下一步操作”的方向。
查看这套组合的模块与尺寸
- 框架
- 薄荷渐变
- 背景
- 金融浅灰
- 资产
- 单资产卡 · 纯白轻卡 · 92px
- 文字链
- 轻量 History 条
- 四入口
- 大轮廓与实形 · 48px
- 八服务
- 大轮廓与实形 · 32px
- 间距
- 图文 8/8px · 服务行 18px · 模块 12px
- 运营位
- 礼盒话费横幅
TOP 06第 6 推荐
绿白主次 · 钱包与储蓄
需要区分钱包资金和储蓄资金
首屏效果(原稿范围) · 点击放大
为什么排在这里
绿色主卡与白色次卡建立资产主次,圆角主入口与浅底服务保持一致;视觉上先看到可用余额,再看储蓄。
取舍:色彩有助分层,但含义仍依赖 Available / Savings 标签;两卡比单卡占用更多注意力。
适合作为绿白分层的双资产备选。
查看这套组合的模块与尺寸
- 框架
- 绿白双卡
- 背景
- 纯白
- 资产
- 沿用原生结构 · 原生配色 · 98px
- 文字链
- 绿白白卡交易条
- 四入口
- 绿圆角图标 · 44px
- 八服务
- 轻圆片图标 · 30px
- 间距
- 图文 8/8px · 服务行 18px · 模块 12px
- 运营位
- 礼盒话费横幅
TOP 07第 7 推荐
墨绿白瓷 · 克制质感
希望更稳重,但仍保持大众钱包风格
首屏效果(原稿范围) · 点击放大
为什么排在这里
墨绿资产区域与白瓷入口拉开层次,服务保持深线加绿细节;整页色彩集中,金额仍是第一视觉焦点。
取舍:深色卡与微投影更重,小屏上的细节识别需要验证;不作为全部用户的默认审美。
适合品牌质感方向的比选。
查看这套组合的模块与尺寸
- 框架
- 明绿分区
- 背景
- 纯白
- 资产
- 页签单卡 · 统一墨绿 · 118px
- 文字链
- 明绿转账条
- 四入口
- 白瓷与墨线 · 44px
- 八服务
- 白瓷与墨线 · 30px
- 间距
- 图文 8/8px · 服务行 18px · 模块 12px
- 运营位
- 优惠券插画
TOP 08第 8 推荐
翡翠任务 · 活跃运营
明确开展消费任务活动的阶段
完整效果 · 点击放大 · 长页面已展开
为什么排在这里
轻白双卡保持资金清楚,翡翠浅渐变与叠片图标增加活力;进度式活动把奖励步骤集中在一个模块内。
取舍:任务卡显著增加页面长度和阅读负担,必须先确认活动规则;不宜长期替代日常主首页。
作为活动期候选,排序低于常态首页方案。
查看这套组合的模块与尺寸
- 框架
- 薄荷渐变
- 背景
- 翡翠柔光
- 资产
- 轻双资产卡 · 纯白轻卡 · 110px
- 文字链
- 轻量 History 条
- 四入口
- 开放线与叠片 · 48px
- 八服务
- 开放线与叠片 · 32px
- 间距
- 图文 8/8px · 服务行 18px · 模块 12px
- 运营位
- 消费任务进度
TOP 09第 9 推荐
平面轻快 · 稳定识别
偏好简单块面、少装饰的首页
完整效果 · 点击放大 · 长页面已展开
为什么排在这里
借用 PalmPay 思路底座的组织方式,用 OPay 绿实形和统一白底形成稳定入口;交易记录保持独立,便于回看。
取舍:平面实形的一致性强,但部分图标彼此相近,需要靠文字标签完成辨认;布局与图标有别于现状底座,仍需验证既有用户的辨认和适应情况。
适合作为图标辨认测试的备选,不声称性能已经提升。
查看这套组合的模块与尺寸
- 框架
- PalmPay 思路 · OPay 绿
- 背景
- iOS 分组浅灰
- 资产
- 单资产卡 · OPay 原绿 · 98px
- 文字链
- 轻量 History 条
- 四入口
- OPay 绿实形 · 44px
- 八服务
- OPay 绿实形 · 32px
- 间距
- 图文 8/8px · 服务行 18px · 模块 12px
- 运营位
- 现状储蓄推荐
TOP 10第 10 推荐
柔雾雕塑 · 视觉探索
品牌视觉探索与设计评审
完整效果 · 点击放大 · 长页面已展开
为什么排在这里
鼠尾草浅底、白底内双卡与绿材质主入口组合成柔和层次;保留 OPay 色系,也保留完整的资金和服务标签。
取舍:资产外框与立体主入口都较显眼,可能分散日常操作注意力;目前没有市场证据支持它比前几套更好用。
列入 Top 10 的风格探索位,优先级最低。
查看这套组合的模块与尺寸
- 框架
- 薄荷渐变
- 背景
- 鼠尾草柔雾
- 资产
- 白底内双卡 · 纯白轻卡 · 110px
- 文字链
- 轻量 History 条
- 四入口
- 绿材质与点睛 · 48px
- 八服务
- 绿材质与点睛 · 32px
- 间距
- 图文 8/8px · 服务行 18px · 模块 12px
- 运营位
- 礼盒话费横幅
排名依据:公开事实与设计判断分开看
本次核验日期:。以下资料提供使用背景;它们没有比较这十个页面,也没有证明某一款配色更受欢迎。
- OPay 的核心服务。官网强调安全、易用和可负担,列出转账、钱包充值、话费/流量、账单及余额收益。OPay 官方网站(网页未标发布日期,本次核验)。
设计判断:余额与转账先于营销,话费/流量入口靠前。
- 数字金融用于真实支付和转账。EFInA A2F 2023 报告中,商户付款和汇款是数字金融常见用途;汇款包含国内转账。A2F 2023 完整报告,第 59–60 页(2024 年发布)。
设计判断:保留 To OPay / To Bank 的稳定位置,交易核对入口不能藏得太深。
- 费用与优惠需要讲清。EFInA 2024 年费用专题记录了用户对低费用的重视,也记录了使用后才发现费用的情况。EFInA 费用专题,2024 年 5 月。
设计判断:保留一条容易读懂的优惠,任务型活动排在常态首页之后。
- 金融理解能力并不相同。A2F 报告分别讨论金融能力的多个维度。A2F 2023,第 82 页。这不是 OPay 用户单独调查,也不等于识字率。
设计判断:保留文字标签,区分 Available 与 Savings;不为了紧凑而把所有卡片压到 60px。
- 互联网使用仍有门槛。GSMA 尼日利亚报告指出可负担性、数字技能等障碍;相关消费者调查来自 2022 年。GSMA Nigeria 报告,2024 年 5 月,第 40 页。
设计判断:优先清楚、稳定、容易学会的布局;本次没有做网络耗流量或设备性能测试。
- 帮助与安全功能要找得到。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 个首页基座,本轮重点是选中与调节体验、默认比例,以及四主入口和八服务的图标选择。下面逐条对应本轮要求;验收状态只代表已经执行的检查。
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大面积品牌绿圆形承载,白色图形保持充足留白;服务图标提炼为几何形与少量深浅块面。
四个主入口
八个服务
招商 · 白瓷与墨线
ref-ceramic四入口的小白瓷方块与绿图形形成精细质感;服务区保持墨线,用局部绿色强调识别点。
四个主入口
八个服务
云闪付 · 大轮廓与实形
ref-open放大断开的轮廓、圆角与留白;用 OPay 绿承载白线,服务图标采用饱满实形和浅色细节。
四个主入口
八个服务
支付宝 · 开放线与叠片
ref-layer提炼开放线框的层次,服务图标使用错位浅绿衬片;颜色转换为 OPay 绿,不移用参考图的蓝色主题。
四个主入口
八个服务
工行 · 绿材质与点睛
ref-sculpted主入口加入倾斜、厚度、单侧光泽和绿色材质;八服务采用深线轮廓加局部绿色细节。
四个主入口
八个服务
五套图标均可用于四主入口与八服务的独立选项;两组可自由交叉搭配。主入口默认外框 52px,白瓷款 48px;八服务默认外框 36px。这些是当前渲染尺寸,页面里可继续调节,不是参考 App 发布的官方尺寸规范。
历史
V8 历史:明绿分区与四套设计提案
以下保留 V8 的来源、设计取舍与当时的使用口径,用于追溯。这是历史记录;V9 的一键搭配范围、默认主题和本轮验收以上方章节为准。
当时吸收《首页UI视觉设计提案》与用户提供的四款首页截图。以截图最右侧第 4 款新增第 8 个基座「明绿分区·提案四」;原有 7 个基座、换装维度与方案操作继续保留。
设计来源:飞书《首页UI视觉设计提案》,读取版本 181(2026 年 9 月 11 日)。当时未打开其中的 Figma 链接。原文的核心方向是「专业可信、轻盈现代、品质统一」,通过同一绿色的深浅、卡片承载和图标体量组织页面。
用户提供的原始截图,原样内嵌;在小屏上可横向滚动查看。左至右分别对应提案一至四,最右侧是当时新增底座的布局来源。
第 8 个基座的页面层级
| 区域 | 处理方式 |
| 顶部与主资金区 | 用浅灰紫背景承接头像问候、资产卡、交易提醒和核心四入口,保留模块之间的留白。 |
| 资产卡 | 采用「页签单卡」:Available / Savings 同处一张卡片,金额为第一视觉焦点,收益与账户说明其次,Add Money 位于卡内。 |
| 交易与核心四入口 | 独立白色交易提醒条;四入口各有白色卡片,图形比普通服务更饱满,明确资金操作的优先级。 |
| 八服务与运营内容 | 下方白色大容器承接较轻的八服务图标、浅绿优惠券运营位和 Finance 可见部分。 |
| 底部导航 | 白色底栏与品牌深绿选中态收束页面,维持与资产卡的主次关系。 |
保持明确的事实边界
金额沿用截图所见。截图展示 Available 余额,但没有展示 Savings 余额;切换到 Savings 时使用「—」,不补造储蓄金额。
换皮肤不换业务文案。图标画法、资产卡颜色和材质可以交叉搭配;业务名称与顺序跟随当前基座。第三款截图中的 Loan、OWealth、BNPL 不会因选中曜石黑皮肤而自动替换进去。
Finance 只复现可见部分。截图未显示的内容不延伸为新的业务功能、账户数据或营销承诺。
像素属于视觉估算。飞书正文没有提供精确 HEX 色值、尺寸或阴影参数。当时的颜色、圆角和间距按截图与现有工作台尺度还原,不能当作飞书发布的精确规范。
四套提案如何映射到可组合模块
四个快捷预设使用完整方案原名。资产卡新增 4 种皮肤,核心入口与八服务采用对应画法;它们是可以继续独立修改的起点。
「曜石黑金」保留飞书原方案名;依据截图与正文,当时没有额外添加金色装饰。四套方案统一使用第 4 款的布局作为比较底座,避免布局与皮肤同时变化导致难以看清差异。
从一键提案开始,再自由混搭
1 · 选择起点
使用第 8 个基座
选择「明绿分区·提案四」查看最右截图的页面结构;四个一键提案可快速载入对应的资产卡、核心入口与八服务搭配。
2 · 拆开比较
一次替换一个模块
例如保留明绿分区布局,资产卡改成「统一墨绿」,核心四入口继续用明绿,八服务保留浅绿叠层;资产卡与两组图标分别调整。
3 · 保存组合
命名、导出、继续迭代
沿用“我的方案”、对比和导出操作。保存记录进入 V8 的独立命名空间;可导入旧 V5 / V6 配置,继续使用旧基座与既有选项。
混搭时守住三个主次关系:余额最先读到,四个资金入口其次,八服务与运营位再承接。普通服务不因换色而变成与核心四入口同等的大色块;品牌装饰避开金额、收益与主要操作区域。
V8 使用新的浏览器保存空间,不覆盖 V5 / V6 原有方案。旧浏览器里的记录不会自动搬入新页面;从旧工作台导出配置 JSON,再在 V8 导入。跨 Mac / Windows 时携带 V8 整个部署文件夹与导出的配置文件,保留相对目录结构。
01
底稿决定起点,模块决定细节。
六个独立维度
| 维度 | 可调整内容 |
|---|
| 页面底色 | 修改手机页面背景,观察卡片边界与留白;支持候选色和自定义色。 |
| 资产卡 | 分别选择卡片形态、颜色和高度;“原样”沿用当前基座。 |
| 首页文字链 | 比较交易入口、最近一笔消息、卡下组合和独立消息条。 |
| 四个主入口 | 图标画法、配色和外层承载分别选择;不改入口顺序。 |
| 八个服务 | 画法与配色独立选择;文字与图标语义跟随基座。 |
| 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交回继续调整。