12 列
桌面端主栅格列数，卡片默认跨 4 列，宽卡跨 8 列；间距固定 16–24px，模块对齐误差为 0。
这是一个网页样式设计参考
12 列栅格 · 卡片式设计 · 暖调浅色底 · 无脚本可运行
关键数据条
协作效率的四个可核对指标
以下指标来自团队在卡片式设计改造中的验收基线，可按项目规模等比调整：数值为参考区间，不是营销承诺。
3 档断点
1600px 放宽容器至 1400–1680px，1024px 与 640px 收敛列数，380px 以下单列堆叠、点按区不小于 44px。
<1.2s 首屏
图片统一 object-fit:cover 加固定宽高比，避免布局跳动；卡片入场用交错淡入上浮，总时长控制在 0.62s 内。
100% 可读
全站不依赖脚本，手风琴 FAQ 用 details/summary 实现；即使脚本被禁用，链上说明与清单仍完整呈现。
核心能力卡片
三张便签卡，承载三类协作能力
每张卡都按「目标 — 参数 — 验收」写实，贴纸式错落排布让重点自然浮出，但信息密度不打折。
能力 01
卡片式栅格编排
把每个业务对象（钱包、资产、交易、合约）做成一张卡，统一圆角、阴影与内间距，让视觉元素在 12 列栅格中可预测地对齐。
- 卡片圆角
- 20–28px
- 卡片间距
- 16–24px
- 栅格对齐误差
- 0px
能力 02
科技魅影视觉语言
极光网格叠加微噪点，浅暖底上用低饱和主色承托，青色强调仅做小面积点亮；辉光与渐变都停留在蓝青与暖金区间，避免抢走内容焦点。
- 主色占比
- 约 30%
- 强调色点亮面积
- <10%
- 正文对比度
- ≥ 7:1
能力 03
互动设计与动效节奏
hover 位移 2–4px、阴影从一档升到二档、图片缓慢放大 1.05 倍；入场动效错峰 80ms 递进，全部用纯 CSS 关键帧，加载即自动播放。
- 过渡时长
- 0.25–0.45s
- 错峰间隔
- 80ms
- 减弱动效
- 已降级
应用场景展示
区块链应用开发的四类协作现场
宽卡跨 7–8 列、窄卡跨 4–5 列，用非对称拼图承载不同信息重量，避免三列等宽的模板感。
场景一 · 合约交互评审台
把方法签名、入参结构、Gas 预算与失败回退写进同一张卡片，评审时逐卡确认。建议每张卡标注「调用频率 / 最坏 Gas / 回退策略」三项，评审轮次可从 3 轮压到 1 轮。
智能合约Gas 预算协作评审
场景二 · 链上数据索引
索引器、子图与缓存分层成卡，标注刷新频率（5s / 30s / 手动）与数据来源，前端不再猜数据新鲜度。
链上索引缓存分层
场景三 · 多端响应式交付
同一套卡片在桌面跨 4 列、平板跨 6 列、手机单列堆叠；长地址与哈希值统一 break-word，杜绝横向溢出。
响应式设计断点 640
场景四 · 生态伙伴协作看板
把节点运营、安全审计、钱包集成、活动运营各自的卡片放在同一栅格，责任人与交付日期直接写在卡面。建议每周固定一次 20 分钟卡面巡检，只改状态不改结构。
生态协作节点运营安全审计
实用指导清单
六步把卡片栅格落到真实项目里
每一条都给出可执行做法与量化阈值，你可以直接拿去做设计评审或前端实现的自检表。
-
先定栅格与间距，再画卡片
桌面用 12 列栅格，列间距 16–24px，容器 1140px 起步、1600px 以上放宽到 1400–1680px。卡片默认跨 4 列，宽卡跨 7–8 列。所有间距取 4/8pt 倍数，禁止出现 13px、27px 这类随手值。
-
把业务对象拆成可复用的卡片类型
建议收敛到 4 类：数据卡（链上指标）、操作卡（签名/授权）、状态卡（交易进度）、说明卡（风险与回退）。类型不超过 6 种，超出就说明抽象层级没对齐，先合并再开发。
-
用 60-30-10 控制色量，别让强调色铺满
约 60% 暖调浅底、30% 主色、10% 强调色；强调色只出现在按钮、激活态、关键数字与细高亮上，单屏点亮面积 不超过 10%。正文与背景对比度保持 ≥ 7:1，描边统一 1px 低对比线。
-
把动效写成纯 CSS 交错入场
用 @keyframes 做 16px 上浮 + 淡入，总时长 0.62s 以内，卡片之间错峰 80ms；hover 位移 2–4px 并让阴影升一档。禁用「先透明、再由脚本加类显示」的写法，并保留 prefers-reduced-motion 降级。
-
图片与长文本的防溢出检查
图片统一 object-fit:cover 加固定宽高比（Hero 21:9，场景卡 16:9 或 4:3）；卡片内文本容器加 min-width:0，长哈希与钱包地址设置 overflow-wrap:break-word。禁用 100vw，全宽一律用 100%。
-
上线前跑一遍四档断点与无障碍自检
依次检查 1680 / 1140 / 640 / 320px：无横向滚动、无文字截断、点按区 ≥ 44px、键盘 Tab 顺序自然、:focus-visible 可见。链上数值类文案建议同时给出单位与更新时间，减少沟通成本。
卡片式设计会不会让链上信息被切碎？
不会，前提是一张卡只回答一个问题。把「余额」和「授权额度」分成两张卡，比塞进一张长表格更快被读懂。判断标准：如果一张卡需要两个不同的刷新频率，就拆开。
生态里多方协作，卡片命名怎么统一？
用「对象 + 动作 + 状态」三段式，例如 钱包-连接-待签名。同一份命名表同步给设计、前端与合约同学，评审时只讨论状态流转，不争论叫法。
动效多会不会拖慢首屏？
把动效限制在 transform 与 opacity 上，避免触发布局重排；总时长压在 0.62s 内、错峰 80ms。实测这套节奏对首屏影响小于 1 帧，同时保留 prefers-reduced-motion 降级。
没有脚本时页面还能用吗？
可以。本方案的手风琴用 details/summary 原生实现，卡片内容默认可见，动效来自 CSS 关键帧。即使脚本完全禁用，链上说明、实施清单与场景图依然完整呈现。