2020 网站预览
2020 网站预览

2020

变化的色彩背景、网格布局与大字排版。

页面以随刷新变化的色彩为背景。字体采用 Helvetica LT Pro、Helvetica。视觉特点包括网格布局、大字排版。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • 将展示标题设置为 137px / 行高 0.79 / 字间距 -0.05em,使用 Helvetica LT Pro 400 —— 从不改变字重,书籍字重是其标志
  • 所有文字和边框均使用 Olive Ink(#4f503e)——无论背景色如何,文字必须保持相同的深暖色调,以使变化的背景产生统一身份感,表达不同情绪
  • 让页面画布从边缘到边缘填满视口的 100%,不设容器、最大宽度或外边距;满幅呈现是不可妥协的要求。
  • 使用 20px 作为唯一的间距单位——标题、副标题与网格之间的垂直节奏始终为 20px
  • 所有圆角均设为 0px——专辑方块、按钮和标签均为锐角;彩色区域提供页面所需的全部柔和感
  • 将画布色彩视为主要导航方式:用户通过更改背景来切换页面,而非点击链接
  • 所有文字元素均使用单一字重(400)——禁止引入粗体、中等或轻体变体

建议避免

  • 不要使用填充按钮——实心填充会与画布色彩冲突;所有操作均使用描边边框或纯图标
  • 不要为专辑方块添加边框、阴影或层高——它们直接位于画布上,不带任何装饰
  • 不要引入第二种字体——整个站点仅使用同一字体家族的单一字重
  • 不要居中正文——文字左对齐,全 满幅,自然换行
  • 不要使用最大宽度容器——布局始终是边缘到边缘
  • 不要将 Olive Ink(#4f503e)文字搭配既定调色板之外的彩色背景(牛血红、赭色、近黑色、鼠尾草绿、珍珠色);只有这六种表面色可以作为画布。
  • 任何大于 21px 的文字,行高不得高于 1.0——展示文字的紧密行距(0.79–0.80)是标题呈现为实体形状的关键