← 设计系统总览
CASE 05 / DESIGN ANATOMY PDF P.11

LUCY TIME · 时空派对

旧物、年代文字与纵向拼贴

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

原作与阅读方式

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

02

逐张拆到基础元素

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

PDF P.11 · 画面 01

ELEMENT STUDY / 01

时空派对封面

复古广告拼贴
排版与视线
放射线汇聚在手持电话附近,对话框承接主题。
颜色关系
军绿底配米色射线,砖橙为标签色。
字体层级
粗中文配轮廓英文,2023 用杂志剪贴式数字。
基本图形与材质
电话抠像、放射纹、纸片、对话框。
#41553A
#171411
#7A4523
#EECA99

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

复用要点

焦点放在电话与主题间,射线不要盖过正文。

PDF P.11 · 画面 02

ELEMENT STUDY / 02

70 年代章节

票券与旧报刊语汇
排版与视线
双边框包围段落,插画与广告式标题上下堆叠。
颜色关系
米色字面与深绿底,橙块分隔段落。
字体层级
大黑体、衬线和横排小标题分工。
基本图形与材质
旧产品、插画头像、纸感边框。
#A54215
#42563B
#7B7D5C
#CFA47C

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

复用要点

限制边框种类,以相同线宽串联高密度内容。

PDF P.11 · 画面 03

ELEMENT STUDY / 03

80 年代章节

旧物摄影蒙太奇
排版与视线
斜标题开头,唱片作为圆形断点,物件在两侧穿插。
颜色关系
绿色贯穿,旧照片棕调与橙色标记呼应。
字体层级
年代数字大于描述,说明块保持短行。
基本图形与材质
唱片、收音设备、人物与剪纸底。
#41553A
#2F1C0F
#D1B996
#726B5B

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

复用要点

用一个圆形物件打断矩形段落即可,避免连续斜排难读。

PDF P.11 · 画面 04

ELEMENT STUDY / 04

90 年代章节

记忆物件与图片网格
排版与视线
电视场景引入,头像矩阵与年份数字交替。
颜色关系
深绿与米色延续,照片自身色彩作为补充。
字体层级
大年代数字与网格中的单字形成重音。
基本图形与材质
电视、相机、人物网格、胶片感边缘。
#1A1716
#4C5339
#F2DAB7
#7E6C50

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

复用要点

统一头像裁切和格间距;不得把九宫格误读为九个独立品牌。

03

排版系统

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

01

封面:放射背景、主题与电话物件

02

70 年代:边框与广告式排版

03

80 年代:唱片与物件拼贴

04

90 年代:电视、人物九宫格与结尾

从焦点到信息落点

  • 建议统一米色边框和绿色底色,再为每个年代挑不同物件。
  • 正文避免直接叠在唱片和颗粒纹理上。
  • 本页 PDF 展示三条长图截面;不把截面边界误认为原始完整长度。
安全边距4u模块间距6u章节留白10u

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

04

配色与色彩角色

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

#40553ARGB 64, 85, 58
#DCC99CRGB 220, 201, 156
#AC451ARGB 172, 69, 26
#161A13RGB 22, 26, 19
#D6A934RGB 214, 169, 52

环境色

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

强调色

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

信息色

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

05

字体与信息层级

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

DISPLAY / 8–12u

VISUAL
EXPRESSION

NAME / 6–9u

SSR / 主题姓名

BODY / 2–2.6u

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

META / 1.8–2.2u

DATE / LOCATION / INFORMATION

  • 粗衬线和压缩展示字模拟旧广告的密度。
  • 年代数字成为长图分章标识。
  • 手写体只作情绪点缀;说明文字依然要有可读行距。

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

06

图像处理与合成层次

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

  1. L01深绿主底背景
  2. L02米色条纹和旧纸边框叠加
  3. L03年代照片与日常旧物叠加
  4. L04大号标题及年代标签叠加
  5. L05小字说明与纹理叠加

合成顺序

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

07

从元素到组件

COMPONENT / 01

年代章节标题

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

COMPONENT / 02

票券式信息框

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

COMPONENT / 03

旧物剪贴卡

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

COMPONENT / 04

人物九宫格

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

08

风格背景与关联

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

这是一种当代复古拼贴:电话、唱片、电视和旧广告字形共同唤起年代感。它描绘不同年代的生活记忆,不代表使用了那些年代的真实印刷工艺;“摄影蒙太奇”能解释其图片组接方式。

09

一套可以继续生长的规则

保留什么

  • 建议统一米色边框和绿色底色,再为每个年代挑不同物件。
  • 正文避免直接叠在唱片和颗粒纹理上。
  • 本页 PDF 展示三条长图截面;不把截面边界误认为原始完整长度。

如何扩展

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

滚动查看细节 · 按 Esc 关闭