← 设计系统总览
CASE 10 / DESIGN ANATOMY PDF P.16

SHINING · 三周年回忆录

以时间线组织现场记忆

4 个作品 / 画面单元9 个解析章节SSR 视觉创作
01

原作与阅读方式

基于所提供 PDF 的视觉解析。原作画面为事实依据;风格关联属于分析,不代表创作者自述。色值为参考或量化近似;网格、字号、间距与图层顺序是便于复用的建议,非原稿参数。未提供源文件,不能恢复独立素材图层或确认字体名称。

02

逐张拆到基础元素

同一套视觉,也保留每张作品自己的结构与取舍。

PDF P.16 · 画面 01

ELEMENT STUDY / 01

周年回忆录封面

编辑式大字
排版与视线
Shining 与数字 3 构成上中两处重音,线框折面连接下方标题。
颜色关系
橙底、米白标题、黑色说明形成明确层次。
字体层级
衬线英文与粗斜体英文对照。
基本图形与材质
细线折面、箭头和周年数字。
#EB6130
#F08863
#BB5530
#603526

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

让装饰线框避开正文;数字 3 保留最强视觉权重。

PDF P.16 · 画面 02

ELEMENT STUDY / 02

2020—2023 时间线

节点式档案排版
排版与视线
时间节点在照片间串联,照片按纵向顺序展开。
颜色关系
橙色背景统一,白色年份与黑色节点分工。
字体层级
年份字号稳定,说明短段横排。
基本图形与材质
折线节点、实景照片。
#EB6130
#2D2D30
#CDCCCB
#8E2F2A

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

不改变事件时间顺序;本文只分析版式,不重新核验活动历史。

PDF P.16 · 画面 03

ELEMENT STUDY / 03

现场照片编排

编辑摄影拼贴
排版与视线
大场景与小特写叠放,形成远近镜头的切换。
颜色关系
用橙色留白区隔不同灯光照片。
字体层级
Shining 标记作为轻量串联,不给每张照片重复大标题。
基本图形与材质
圆角小图、直角大图和方向箭头。
#EB6130
#2E3347
#180B0E
#CFAEA7

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

同一区域最多一个明显叠放关系,避免照片难以辨认。

PDF P.16 · 画面 04

ELEMENT STUDY / 04

回顾与结尾

信息收束
排版与视线
大图之后留出说明区,再转入灰底回顾章节。
颜色关系
橙色到灰色的切换提示内容阶段变化。
字体层级
圆形文字作识别,规整正文负责阅读。
基本图形与材质
环形字、灰色分隔块、年份标签。
#EB6130
#C0BDBF
#242931
#925246

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

结尾保留明确的品牌和下一步信息,不继续堆叠高潮。

03

排版系统

把视觉顺序写成可以重复使用的结构。示意比例为建议,不是原稿测量。

01

封面:三周年与回忆录标题

02

时间线:2020—2023 的节点

03

现场影像:大小照片交替

04

回顾与系列嘉宾信息

从焦点到信息落点

  • 时间轴节点保持一种线宽和标记方式。
  • 现场照片保留自身色彩,用背景而非滤镜统一。
  • 长图分章由大图和留白完成,避免连续同尺寸图片造成疲劳。
安全边距4u模块间距6u章节留白10u

建议 u = 画布宽度的 1%。以 1000px 宽画布为例,4u = 40px;多列与长图按内容调整。

04

配色与色彩角色

以下为本组视觉提炼的参考色;逐张量化色见上方。混合风格组不应把全部参考色同时放进一张海报。

#EE6029RGB 238, 96, 41
#F8F0DDRGB 248, 240, 221
#24251FRGB 36, 37, 31
#B7B6B0RGB 183, 182, 176
#704129RGB 112, 65, 41

环境色

先从对应画面的背景选择环境色,统一照片与素材的整体色温。背景主色不等于文字主色。

强调色

从本张作品的对照色中选择一个强调,用于姓名、日期或主题,避免多个色块同时争夺注意。

信息色

正文落在稳定明暗区。浅色装饰、透明效果和照片高光不作为小字底色。

05

字体与信息层级

原始字体名称无法由平面图可靠确认。下面用系统字体示意角色,不冒充原作字体。

DISPLAY / 8–12u

VISUAL
EXPRESSION

NAME / 6–9u

SSR / 主题姓名

BODY / 2–2.6u

活动说明负责讲清楚内容,日期和地点负责帮助读者行动。

META / 1.8–2.2u

DATE / LOCATION / INFORMATION

  • Shining 细衬线与粗斜体 THREE YEARS 构成两种语气。
  • 年份作为导航而非装饰。
  • 文字不靠无限缩小去适应长图;每段只表达一个重点。

以上字号是以画布宽度为基础的复用建议,导出后必须在实际显示尺寸检查可读性;不能把海报参数直接当作网页字号。

06

图像处理与合成层次

从后向前的重建建议;所示原图为扁平化图像,不包含可编辑原始图层。

  1. L01橙色主底背景
  2. L02时间轴、边框和箭头叠加
  3. L03年份及标题叠加
  4. L04现场照片叠加
  5. L05短说明与品牌落款叠加

合成顺序

先建立背景与透视,确定主光方向;再放入主体并匹配明暗、色温与接触阴影。最后叠加姓名与必要装饰,在小尺寸下确认人物轮廓、标题与日期仍然清晰。这里描述可复用流程,不推断原作者实际使用的工具。

07

从元素到组件

COMPONENT / 01

年份节点

由本页人物、标题、边框与色彩角色组合;保持对齐和留白关系,允许内容更换。

COMPONENT / 02

现场照片组

由本页人物、标题、边框与色彩角色组合;保持对齐和留白关系,允许内容更换。

COMPONENT / 03

折面线框标题

由本页人物、标题、边框与色彩角色组合;保持对齐和留白关系,允许内容更换。

COMPONENT / 04

环形周年标识

由本页人物、标题、边框与色彩角色组合;保持对齐和留白关系,允许内容更换。

08

风格背景与关联

历史资料与本作品的视觉观察分开阅读。

非对称文字、线条和照片构成编辑式叙事;这里可以用现代信息设计讨论阅读顺序。现场内容属于俱乐部视觉文化,但当前资料不提供活动策划过程或传播效果数据。

09

一套可以继续生长的规则

保留什么

  • 时间轴节点保持一种线宽和标记方式。
  • 现场照片保留自身色彩,用背景而非滤镜统一。
  • 长图分章由大图和留白完成,避免连续同尺寸图片造成疲劳。

如何扩展

  1. 保留原画面的焦点与阅读顺序。
  2. 换人物或内容时先适配比例,再替换色彩与装饰。
  3. 横幅保留主题、主体与日期;长图增加简介和分章。
  4. 在真实尺寸检查文字、边距、素材清晰度与导出结果。
下载本章参考色与规则 JSON ↓

滚动查看细节 · 按 Esc 关闭