CASE← 断缘技术站
项目编号16
领域排版 · 栅格

版式系统:栅格、字阶与对齐

栅格系统 · 强对比字阶 · 工业感

Ausgangslage · 问题

旧站信息堆砌、字号混乱;要改成有秩序、层级清楚的版式。

Ansatz · 做法

用 12 列栅格与严格字阶(1.25 比例)重建版式;首屏用大字号标题 + 一句话业务定位,图与文字按模块对齐;配色收敛到黑、白、一色强调。

Detail · 细节

所有间距走同一套比例变量;移动端按断点把 12 列折叠成单列,保持字阶不变;图片统一裁切比例。

  • 排版
  • 栅格
  • 响应式
  • 品牌
同样的内容,阅读路径清晰;视觉一致性靠变量而非手工调。

打开演示 →

断缘技术站 · 个人技术笔记与实验
冀ICP备2026047080号-1·冀公网安备13020702000398号
联系:269170@163.com