Skip to content

视觉设计规范

设计方向

网站采用受苏联构成主义与央视航天日构成主义海报启发的工程海报语言。视觉必须服务于“学生共同维护的指南手册”,而不是把页面做成活动宣传页。

  • 首页可以使用强构图:天体弧面、斜向结构线、工程线稿和少量信号色。
  • 正文页保持克制:只保留纸面、结构线、短色标和明确的标题层级。
  • 不使用装饰性渐变文字、毛玻璃、圆角卡片墙或与校园内容无关的插画。

色彩

设计变量亮色暗色用途
Paper#ebe8de#0d0f10页面主背景
Paper deep#d8d5ca#171a1b次级表面、表头、侧栏层次
Ink#151718#f2eee0标题、正文、结构线
Mineral red#b9362a#d64732品牌重点、活动面、当前状态
Ochre#c99a32#d0a94b信号节点、射线、少量数据标记

蓝色不作为首页的大面积几何色块。若内容组件需要类别区分,可以小面积使用工程蓝 #274d73,但不得与矿物红争夺主视觉。

排版

  • 中文标题与正文使用系统无衬线字体栈,依靠字重、尺度和留白建立层级。
  • 首页主标题桌面端使用 88–128px,移动端使用 54–62px
  • 正文基础字号不低于 16px,辅助信息通常不低于 12px
  • 字间距保持 0,正文行高约 1.85,阅读宽度控制在约 800px

几何规则

  • 首页 HL-1 线稿是唯一主要具象图形。
  • 黄色分段射线以装置中心为几何原点,中线始终与装置中心水平对齐。
  • 射线采用不等长、不等节奏的分段和端点标记,避免机械重复。
  • 斜向色块用于建立动势,不得遮挡同色文字或关键装置轮廓。
  • 正文页只使用 1–4px 的水平结构线和短红色标记,不复制首页的大型天体或射线。

深浅主题

亮色和暗色模式分别设计,不做简单反色:

  • 亮色使用暖灰米白纸面,避免纯白长时间阅读造成刺激。
  • 暗色使用近黑纸面;首页长斜块保持深色,确保浅色线稿和标注可见。
  • 正文、链接、小标签和表格内容满足 WCAG AA 对比度要求。

响应式规则

  • 手机端首先保证正文与主要操作,不隐藏核心入口。
  • 构成主义图形可以裁切,但标题、按钮和设备标注不得被裁切或覆盖。
  • 固定格式的数据表在窄屏下允许横向滚动或采用受控列宽。

本文档由成都理工大学工程技术学院贴吧吧务团队运营与维护