一套规则，多端伸缩的UI设计理念

好的，面对桌面（1920×1080）、手机（1080×2400像素，360dp基准）、户外100寸级大屏（15.36m×6.72m）这三种跨度极大的平台，传统的“一套固定列数网格打天下”已经完全失效。我们需要一套基于现代布局趋势的、能够根据观看距离和屏幕物理特性自适应弹性伸缩的栅格体系。

---

一、设计理念：一套规则，多端伸缩

我们不定义全局列数，而是定义弹性轨道行为与空间基准令牌。核心策略：

1. 轨道自适应：所有多列布局使用 repeat(auto-fit, minmax(最小列宽, 1fr))，让内容自己决定列数。
2. 间距令牌化：定义一组基于观看距离的缩放间距，同一套令牌名在不同端映射不同值。
3. 内容区按比例约束：桌面用最大宽度限制阅读体验；大屏用面积比例保证信息不被拉伸成扁条；手机自然满宽。
4. 栅格即辅助：设计工具中依然可以提供参考栅格列（如24/8/16），但它们只是视觉辅助，不是代码约束。

---

二、桌面端（1920×1080）栅格设计

设计画布：1920×1080，主要服务于距屏幕约50–70cm的桌面办公场景。

• 内容容器：
  主内容区最大宽度 1440px，居中。用 min(100% - 64px, 1440px) 实现，保证小屏时左右各留32px。
• 弹性网格（卡片、仪表板、列表）：
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
  间隙：24px
  效果：1440px容器内显示约4–5列，窗口缩窄自动减少，无断点突变。
• 固定比例区域：
  需要2:1等比例时，直接 grid-template-columns: 2fr 1fr，放弃“占列数”概念。
• 设计辅助栅格（可选）：
  如果团队仍习惯使用Figma栅格，可配置24列、水槽16px、边距随内容区变化，但仅作视觉参考。

关键参数：

• 最小列宽：280–320px
• 主间距：24px
• 次间距：16px
• 内容最大宽度：1440px

---

三、手机端（1080×2400，设计基准360dp）栅格设计

屏幕物理分辨率虽高，但逻辑像素基准为 360dp 宽（density=3）。设备距眼睛约30cm。

• 页面框架：padding: 16dp 全局水平边距，内容宽度 328dp 自动撑满。
• 弹性网格：
  grid-template-columns: repeat(auto-fit, minmax(152dp, 1fr))
  间隙：12dp
  行为：360dp时恰好两列（152×2+12=316dp），320dp时自动回退到一列，横屏时变3–4列。
• 容器查询：
  对于组件内部重排，使用 container-type 和 @container，不再依赖全局断点。
• 设计辅助栅格：可使用4列、水槽16dp作为默认模度。

关键参数：

• 最小列宽：140–160dp
• 主间距：16dp
• 次间距：12dp
• 全局边距：16dp

---

四、户外大屏（15.36m×6.72m）栅格设计

这是最有挑战的部分。 物理尺寸巨大（宽高比约2.285:1），观看距离通常≥10m，需要完全不同的视觉尺度。设计时不能直接用桌面逻辑，而需要建立一套适合远距离读取的“展示型网格”。

1. 设计画布与像素映射

户外LED屏通常由模组拼接，无标准逻辑分辨率。为了设计和开发统一，我们按比例画布处理：

• 取宽度为 3840px（4K超宽），高度按比例：3840 / (15.36/6.72) ≈ 1680px。
• 这样画布为 3840×1680px，比例与物理屏一致。
• 前端实际显示时，可让浏览器全屏映射到该分辨率，由播放器缩放。

2. 信息密度与最小元素尺寸

远距离观看时，字号、间距、点击区域必须成倍放大。通常大屏设计遵循最小可读尺寸原则。假设视距15米，最小可见字号约40px（设计稿）。因此网格的最小列宽必须非常大，避免列太窄内容折行难看。

推荐弹性网格参数：

• grid-template-columns: repeat(auto-fit, minmax(640px, 1fr))
• 间隙：48px ~ 64px
• 内容边距：80~120px（物理上约30-40cm留白）

这样在3840px宽容器中：

• 如果 minmax(640px, 1fr) + 间隙64px：大约可容纳 5列（（3840-80*2）/704 ≈ 5.2）。
• 大屏内容通常为数据看板、KPI卡片、监控图表，每列放一个独立指标，五列非常合适。
• 如果屏幕更宽（如拼接更大），列数自动增加，卡片不会变形。

3. 使用比例容器代替固定max-width

与桌面不同，大屏需要充分利用显示面积，但又不能无限拉伸文字行。更好的做法是将整体版面划分为固定比例的功能区域，内部再用弹性网格。

例如使用CSS Grid定义页面框架：

.dashboard-screen {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;  /* 左大区域，右两个小区域 */
  grid-template-rows: auto 1fr;
  gap: 48px;
  padding: 80px;
  height: 100vh;
}

内部每个区域再嵌套自己的弹性卡片网格。这样既利用了超宽比例，又不会让单行文本拉成一条线。

4. 间距令牌大屏版

沿用同一套命名，但赋予更大的值：

令牌	桌面(px)	手机(dp)	大屏(px)
--space-md	16	12	32
--space-lg	24	16	48
--space-xl	32	24	64
--space-2xl	48	32	96

这样设计师在调整间距时，只需选择相同的Token，无需记忆数值。

5. 设计辅助参考栅格

对于大屏，设计师可以在3840×1680画布上拉一个16或20列、宽水槽的参考网格，但同样只是定位辅助。真正交付的是以功能区域和弹性卡片为单元的组件库。

---

五、三端统一实现策略

在代码层面，利用CSS自定义属性和极少的媒体查询/环境变量即可管理这三套参数：

:root {
  /* 默认桌面 */
  --grid-min-col: 280px;
  --grid-gap: 24px;
  --page-padding: 32px;
  --content-max: 1440px;
}

/* 手机端检测（可用媒体查询或JS添加类） */
body.mobile {
  --grid-min-col: 152px;
  --grid-gap: 12px;
  --page-padding: 16px;
  --content-max: 100%;
}

/* 大屏端（例如全屏展示的看板页） */
body.bigscreen {
  --grid-min-col: 640px;
  --grid-gap: 48px;
  --page-padding: 80px;
  --content-max: none;
}

所有网格组件统一使用：

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-col), 1fr));
  gap: var(--grid-gap);
}

这样一套HTML结构，在三端自动呈现完全适配的列数和间距。

---

六、设计交付规范总结表

平台	设计画布	内容区/边距	弹性网格参数	间距主值	推荐设计辅助栅格
桌面	1920×1080	最大1440px居中，边距32px	minmax(280px,1fr)	24px	24列，水槽16px（可选）
手机	360×780dp	边距16dp，内容328dp	minmax(152dp,1fr)	16dp	4列，水槽16dp（可选）
大屏	3840×1680	边距80px，无最大宽度	minmax(640px,1fr)	48-64px	16列，水槽40px（可选）

最重要的转变：这套系统的核心不是规定几列，而是规定最小列宽和间距。设计师在Figma中使用自动布局+换行模拟，开发人员用弹性网格实现。从桌面到手机再到大屏，整个产品只用一种网格语言，却能在任何观看距离下提供清晰、舒适的体验。