栅格对齐引擎
所有卡片落在 12 列轨道，跨列只允许 3/4/5/6/7/8/12，禁止 1/2 列这类不可读的窄轨。
图文混排特写
灵感闪耀之前，先把区块对齐：一套可交付的区块链网页样式系统
我们在三条真实业务线（钱包、链上数据看板、企业联盟链）中收敛出这套规则：所有模块都落在 12 列栅格的整数轨道上，间距只允许取 4/8pt 节奏值。
栅格样例 · 12 列
-
栅格即契约
桌面 12 列、平板 8 列、手机 4 列；列间距跟随 --gutter 在 14–30px 之间弹性伸缩，卡片永远贴轨道，杜绝肉眼可见的「差 3px」。
-
半调网点做母题
用 radial-gradient 1.2px / 14px 铺出网点层，再以 mask 淡出，模拟链上数据「一粒一粒被确认」的节奏，避免大面积高饱和铺色。
-
状态可感知
确认中 / 已确认 / 失败三态分别用中性灰、主色描边、暖橙强调，色相差 ≥ 120°，色盲用户也能靠明度区分，符合用户体验优化的可达性要求。
协作时间轴
从想法到主网上线：区块链开发团队的纵向协作轨道
每一步都留下可回溯的产出物与量化门槛，让「灵感闪耀」不至于停在白板上。
-
STEP 01
灵感收敛与信息架构
用卡片法把业务拆成 ≤ 7 个一级模块，画出 12 列栅格的模块落位图；每个模块标注最小可用宽度，例如资产卡 ≥ 280px、交易表 ≥ 560px。
-
STEP 02
网页样式设计令牌落地
先定间距、圆角、阴影、字号四类令牌，再写组件；约定组件内不得出现裸数值，间距必须引用 --sp-1…--sp-8。
-
STEP 03
响应式断点联调
在 320 / 380 / 640 / 1024 / 1600 / 2560 六档逐一验证；重点检查横向溢出与点按区，移动端所有可点元素高度 ≥ 44px。
-
STEP 04
链上数据接入与降级
RPC 超时设 4s，超时后展示最近一次缓存快照并标注时间；余额用等宽数字，避免刷新时列宽抖动。
分段吸附导航
锚点滚动带 64px 顶部偏移，保证吸顶提示条不遮标题，长页面也能一眼定位。
钱包引导流
助记词备份拆成 3 屏，每屏只讲一件事；危险操作二次确认按钮与取消按钮间距 ≥ 16px，防误触。
链上资产看板
大数字用 tabular-nums，涨跌用暖橙强调色小面积点亮；色块面积控制在卡片 10% 以内。
合规与权限
企业联盟链后台按角色隐藏而非禁用入口，减少 40% 以上的无效点击与误操作投诉。
多端一致性
桌面、平板、手机共用同一组件库；差异只体现在列数与间距令牌，不重写业务样式。
服务档位
按团队节奏选择陪伴方式，而不是按功能砍刀
三档都包含响应式栅格规范与样式令牌；差异在于协作深度、交付频率与是否包含链上数据联调。
启航档 · 单人开发者
¥2,900/ 项目起
- ✓12 列栅格规范 + 断点清单（380/640/1024/1600）
- ✓基础样式令牌包：间距、圆角、阴影、字号
- ✓2 轮样式评审，单轮反馈 ≤ 24 小时
- ✓交付：规范文档 + 组件片段
共创档 · 小型团队
¥8,600/ 项目起
- ✓含启航档全部内容，增加组件级样式系统
- ✓链上数据看板联调：RPC 超时 4s 降级策略
- ✓6 条落地清单逐条验收，附量化指标
- ✓每周 1 次同步，响应式回归覆盖 6 档宽度
守护档 · 企业联盟链
按需评估/ 季度陪伴
- ✓含共创档全部内容，增加多角色权限与合规视图
- ✓设计系统文档托管 + 版本对齐机制
- ✓季度可达性与性能复盘，输出改进项排序
- ✓关键节点驻场支持，响应 ≤ 4 小时
实用指导清单
把响应式设计做扎实的 6 条操作要点（可直接照做）
每条都给出做法、阈值或避坑点，照着改完再上线，能挡掉大部分「换个手机就错位」的返工。
-
先定断点，再画稿
固定四档：
380 / 640 / 1024 / 1600，超大屏再加2200。画稿前先写min-width断点表，避免中途加断点导致整套栅格重排。避坑：不要在 768px 与 800px 同时设断点，二者语义重叠。 -
栅格子项一律 minmax(0,1fr)
写
grid-template-columns:repeat(12,minmax(0,1fr))，并给所有 flex/grid 子项加min-width:0。避坑：用minmax(280px,1fr)会在 320px 屏直接横向溢出，长英文链名与哈希值必须配overflow-wrap:break-word。 -
图片统一进固定比例容器
外层用
aspect-ratio定比例（Hero 4/3、资讯 16/9、图集 3/2），图片写object-fit:cover，可避免加载后布局跳动（CLS 目标 < 0.1）。避坑：直接给 img 写百分比高度会塌陷。 -
点按区 ≥ 44×44px，间距 ≥ 12px
移动端按钮最小高度 44px，危险操作的「确认 / 取消」横向间距不少于 16px。避坑：把整行做成可点却在内部放小图标，用户手指按不到热区，误触率会明显上升。
-
链上数据要有降级与占位
RPC 超时阈值设 4s，超时展示最近快照并标注「数据可能滞后」；骨架占位用与卡片同高的灰块。避坑：加载时用 0 占位，会让用户误以为资产清零，是体验投诉高发点。
-
动效纯 CSS、默认可见
入场动效写成
@keyframes+animation，元素默认就是终态，靠animation-delay错峰；并在prefers-reduced-motion:reduce下把时长压到 0.001ms。避坑：不要用opacity:0等 JS 加类，一旦脚本失败整块内容永久不可见。
最新动态
栅格、灵感与陪伴：团队近期的三条工作记录
我们习惯把每次改动都写清「改了什么、为什么、影响了哪些断点」，方便协作方快速接手。
