← 设计系统总览
CASE 12 / DESIGN ANATOMY PDF P.18

横版活动视觉 · 尺幅转译

把竖版语言压缩为横向入口

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

原作与阅读方式

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

02

逐张拆到基础元素

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

PDF P.18 · 画面 01

ELEMENT STUDY / 01

双 11 市集横幅

零售物件拼贴
排版与视线
购物车横向展开,标题在右上,日期在左下。
颜色关系
绿色商品搭配蓝色底部渐变。
字体层级
标题和日期形成两处清晰落点。
基本图形与材质
购物车、商品、爱心与星芒。
#5E6D76
#4A4A4B
#10529E
#1F282F

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

复用要点

底部渐变承接日期;商品不可挤占标题安全区。

PDF P.18 · 画面 02

ELEMENT STUDY / 02

双人嘉宾横幅

留白与大字
排版与视线
双人位于中部,标题在后,日期靠左下。
颜色关系
白到荧光绿渐变,人物服装保持浅色。
字体层级
大衬线与手写标题交叠,小字移向两侧。
基本图形与材质
金属小物与渐变。
#FCFFF9
#988E81
#A6ED55
#1B1915

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

复用要点

保留两张脸完整,复杂姓名移到详情中展开。

PDF P.18 · 画面 03

ELEMENT STUDY / 03

FLUORESCENT PARTY

夜光俱乐部视觉
排版与视线
标题中央对齐,光束沿对角方向扩散。
颜色关系
蓝绿光在黑底上形成强反差。
字体层级
无衬线大写标题保证远距离识别。
基本图形与材质
光痕、颗粒、网状纹理与暗场。
#033325
#010502
#027C6B
#022F93

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

复用要点

主标题背后保留稳定暗部,亮线避开字心。

PDF P.18 · 画面 04

ELEMENT STUDY / 04

MICRO·G & DJ.TT 横幅

电视涂写转译
排版与视线
电视与肖像作为中心,粉色涂写铺底。
颜色关系
粉黑色保留竖版识别。
字体层级
手写文字在背景,主信息由实际详情承接。
基本图形与材质
电视与涂写纹理。
#FFF0F8
#050D12
#1B2338
#6F788B

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

复用要点

原 PDF 下沿有所裁切,仅按可见内容分析,不重建不可见底部。

03

排版系统

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

01

左侧或中心形成单一视觉锚点

02

短标题占据可读安全区

03

日期与品牌保持同屏可见

04

次要信息转交详情页

从焦点到信息落点

  • 以主题物件、主标题和日期三项为最小集合。
  • 竖版改横版时重新布局,不能直接横向压扁。
  • 保留关键识别色与主体;背景装饰允许减少。
安全边距4u模块间距6u章节留白10u

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

04

配色与色彩角色

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

#9DF319RGB 157, 243, 25
#F942A0RGB 249, 66, 160
#06376ARGB 6, 55, 106
#152121RGB 21, 33, 33
#E4F0E7RGB 228, 240, 231

环境色

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

强调色

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

信息色

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

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短标题与日期叠加

合成顺序

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

07

从元素到组件

COMPONENT / 01

购物车活动横幅

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

COMPONENT / 02

双人嘉宾横幅

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

COMPONENT / 03

荧光派对横幅

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

COMPONENT / 04

电视拼贴横幅

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

08

风格背景与关联

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

横幅是传播载体的转译,而不是另一个历史流派。这里延续了俱乐部图形、拼贴和编辑式标题;压缩的是内容密度,不应压缩人物比例。

09

一套可以继续生长的规则

保留什么

  • 以主题物件、主标题和日期三项为最小集合。
  • 竖版改横版时重新布局,不能直接横向压扁。
  • 保留关键识别色与主体;背景装饰允许减少。

如何扩展

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

滚动查看细节 · 按 Esc 关闭