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

CITY CODE · 单身购物狂欢节

荧光标签与零售信息组件

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

原作与阅读方式

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

02

逐张拆到基础元素

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

PDF P.17 · 画面 01

ELEMENT STUDY / 01

购物狂欢节封面

物件拼贴与促销排版
排版与视线
购物车占中部,日期在左上,主标题压在底部荧光条。
颜色关系
绿、白、黑为核心,蓝色只作辅助对比。
字体层级
粗黑中文与紧凑日期构成强识别。
基本图形与材质
购物车抠像、商品、表情和荧光底条。
#FFFFFF
#ACECA2
#020605
#738172

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

复用要点

商品不能挡住日期,主标题确保完整落在底条内。

PDF P.17 · 画面 02

ELEMENT STUDY / 02

价格清单

条目式信息设计
排版与视线
产品与价格逐行排列,底部人物或物件只作收尾。
颜色关系
荧光条统一每行,深色文字保持对比。
字体层级
金额靠右,产品名靠左。
基本图形与材质
圆角条、编号或简短类别。
#FFFFFF
#8AFE16
#302929
#8F9189

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

复用要点

条高随最长一行确定;规则与金额不能藏进装饰。

PDF P.17 · 画面 03

ELEMENT STUDY / 03

福利与互动

模块化活动说明
排版与视线
福利短块、图形组合和大中文依次展开。
颜色关系
白底减少负担,荧光绿强调可执行信息。
字体层级
短句分行,关键动词或数字加重。
基本图形与材质
圆角信息块与简单表情形。
#FFFFFF
#86FF13
#000B27
#546649

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

复用要点

每块只描述一项福利,条件文字不可省略。

PDF P.17 · 画面 04

ELEMENT STUDY / 04

奖品与结束页

商品卡片系统
排版与视线
奖品图片与等级标签重复,末尾海报式落款。
颜色关系
绿色价签与蓝色小标识区分角色。
字体层级
Prize 标签次于具体奖品名称。
基本图形与材质
商品抠像、矩形底板和引号图形。
#EDEDED
#87FD13
#060B25
#385636

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

复用要点

统一商品图的视觉体量;不同数量用说明字表达,不只靠图片。

03

排版系统

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

01

品牌与日期建立识别

02

购物车主视觉提示主题

03

价格与福利形成信息列表

04

奖品与活动规则收尾

从焦点到信息落点

  • 统一荧光绿标签的高度与左右内边距。
  • 价格名与金额两端对齐,短句不随意居中。
  • 封面可以夸张,规则必须回到清晰、稳定的阅读结构。
安全边距4u模块间距6u章节留白10u

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

04

配色与色彩角色

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

#A3FF12RGB 163, 255, 18
#FFFFFFRGB 255, 255, 255
#080A09RGB 8, 10, 9
#2020A2RGB 32, 32, 162
#A0E89ARGB 160, 232, 154

环境色

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

强调色

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

信息色

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

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

一套可以继续生长的规则

保留什么

  • 统一荧光绿标签的高度与左右内边距。
  • 价格名与金额两端对齐,短句不随意居中。
  • 封面可以夸张,规则必须回到清晰、稳定的阅读结构。

如何扩展

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

滚动查看细节 · 按 Esc 关闭