PlayStation 设计系统.

PlayStation 设计系统 — 游戏主机零售。三面通道布局,沉稳权威显示类型,青色悬停缩放。

在真实场景中查看

同一套设计 token 应用于不同类型的产物——网站、应用、幻灯片、海报。这些是用该系统重新换肤的原创样稿,而非截图。

网站
幻灯片
应用
海报

设计 token

56 个 token,符合 Open Design 的 token 契约——你的 agent 读取的正是这套结构化的配色、字体、间距和动效值,用以为任意产物设定主题。

表面

  • --bg #000000
  • --surface #ffffff
  • --surface-warm #f5f7fa

文本

  • --fg #ffffff
  • --fg-2 var(--fg)
  • --muted #cccccc
  • --meta var(--muted)

边框

  • --border #cccccc
  • --border-soft #f3f3f3

强调色

  • --accent #0070cc
  • --accent-on #ffffff
  • --accent-hover #1eaedb
  • --accent-active #0068bd

语义

  • --success #16a34a
  • --warn #eab308
  • --danger #c81b3a

字体排印

  • --font-display "SST", "Playstation SST", Arial, Helvetica, sans-serif
  • --font-body "SST", "Playstation SST", Arial, Helvetica, sans-serif
  • --font-mono ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace

字号层级

  • --text-xs 12px
  • --text-sm 14px
  • --text-base 18px
  • --text-lg 22px
  • --text-xl 28px
  • --text-2xl 35px
  • --text-3xl 44px
  • --text-4xl 54px
  • --leading-body 1.5
  • --leading-tight 1.25
  • --tracking-display -0.1px

间距

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-8 32px
  • --space-12 48px
  • --section-y-desktop 96px
  • --section-y-tablet 64px
  • --section-y-phone 48px

圆角

  • --radius-sm 6px
  • --radius-md 12px
  • --radius-lg 24px
  • --radius-pill 999px

层级阴影

  • --elev-flat none
  • --elev-ring 0 0 0 1px var(--border)
  • --elev-raised rgba(0, 0, 0, 0.08) 0 5px 9px 0

聚焦

  • --focus-ring 0 0 0 2px #0070cc

动效

  • --motion-fast 180ms
  • --motion-base 200ms
  • --ease-standard cubic-bezier(0.2, 0, 0, 1)

布局

  • --container-max 1600px
  • --container-gutter-desktop 64px
  • --container-gutter-tablet 32px
  • --container-gutter-phone 16px

灵感来自 PlayStation 的设计系统

Category: 媒体与消费电子 游戏主机零售。三层曲面通道布局、克制权威的展示字体、青色悬停缩放。

1. 视觉主题与氛围

PlayStation.com 的气质,像一家恰好也卖娱乐内容的高端消费电子品牌的市场部门。页面以纵向交替曲面通道组织:近黑色的顶部导航与 Hero 区、中间一组纸白色的编辑内容面板,以及深钴蓝色的页脚将整体压稳。在这几种曲面模式之间,站点大量借助摄影与 3D 产品渲染——PS5 主机机体、游戏封面、DualSense 手柄——让硬件承载情感张力,而框架本身保持克制。

标志性的排版手法是 SST Light(字重 300)在大字号下的运用。Sony 定制的 SST 字体家族在 22px 到 54px 的范围内以字重 300 使用,为展示性标题赋予一种轻语般的优雅气质,更接近奢侈腕表广告而非游戏商城。这种”克制权威”与 The Verge 的 Manuka 式高喊或 Wired 的报摊式密度恰恰相反——PlayStation 希望字体退到幕后,让产品领衔。正文与 UI 倚重 500–700 字重,但展示层的声调始终纤细而沉稳。

唯一突破克制的地方是交互。每个主要按钮都有相同的悬停动效:填充色切换为电气青色 #1eaedb,出现 2px 白色描边,背后绽放 2px PlayStation 蓝外环,整个按钮放大 1.2×。这种颜色爆发、描边、外环与抬升缩放的组合,是 Sony 在主流品牌中独有的签名动效——一个微型”开机”动画,在单一页面中被重复使用数百次。

核心特征:

  • 三层曲面通道布局:近黑色 Hero、纸白色内容、钴蓝色页脚——交替出现,从不融合
  • SST 字重 300,22–54px 用于展示——“克制权威”的标题,让产品摄影主导视觉
  • PlayStation Blue #0070cc 作为品牌锚点;青色 #1eaedb 专属悬停/焦点状态
  • 每个交互元素悬停时放大 1.2×——PlayStation 独有的”开机”抬升签名动效
  • 全胶囊按钮采用 999px 圆角;卡片封面采用 12–24px 圆角矩形
  • 商业橙 #d53b00 专用于 PlayStation Store / 购买状态 CTA
  • 断点覆盖范围最高至 2120px——站点可一路缩放至 4K 电视浏览场景

2. 色彩体系与角色

主色(品牌锚点)

  • PlayStation Blue#0070cc):品牌的锚点色。用于主页脚、行内链接、深色曲面上的主按钮填充,以及所有”官方”标识。视为不可移动——它是品牌在消费者记忆中关联最深的颜色。
  • Console Black#000000):纯黑,用于顶部导航、Hero 背景与产品展示区。PlayStation 用黑色衬托硬件,一如博物馆用黑色衬托雕塑。

次色与强调色

  • PlayStation Cyan#1eaedb):交互色。用于按钮和链接的悬停、焦点与激活状态。永远不作为默认背景或静止文字颜色出现。悬停时搭配 2px #ffffff 描边与 2px #0070cc 外环,呈现完整的签名效果。
  • Link Hover Blue#1883fd):用于行内文字链接悬停的更亮变体。与青色有所区分——这是链接颜色,青色是按钮颜色。
  • Dark Link Blue#0068bd):浅色曲面上链接的静止颜色——品牌蓝的一个略微饱和的近亲。

曲面与背景

  • Paper White#ffffff):顶部导航与页脚之间编辑面板的主要内容画布。
  • Ice Mist#f5f7fa):浅色区段渐变的大气感终止色。隐约用于某些面板背后,将其从纯白中轻微抬起。
  • Divider Tint#f3f3f3):内容行之间安静的水平分隔线颜色。
  • Masthead Black#000000):顶部导航与 Hero 画布——专属产品主导区域。
  • Shadow Black#121314):面板需要大气深度时,深色区段渐变的起始锚点。
  • Filter Mistrgba(245, 247, 250, 0.3)):用于置顶筛选栏背后的半透明背景——站点唯一的”玻璃拟态”时刻。

中性色与文字

  • Display Ink#000000):白色曲面上的主展示标题。
  • Deep Charcoal#1f1f1f):正文标题与静止链接颜色——比纯黑稍柔,以减少大段文字的视觉震动。
  • Body Gray#6b6b6b):次要正文与元数据。
  • Mute Gray#cccccc):三级标签、禁用状态。
  • Placeholder Inkrgba(0, 0, 0, 0.6)):表单占位文字——60% 黑,而非独立灰值。
  • Inverse White#ffffff):深色与蓝色曲面上的主要文字。
  • Dark-Link Blue#53b1ff):深色/黑色曲面上链接的静止颜色——PlayStation Blue 在黑色背景上用于可读性的更轻盈变体。

语义色与商业色

  • Commerce Orange#d53b00):专用于 PlayStation Store 购买状态 CTA、价格标注与”特价”徽章。站点唯一的暖色——用量需克制,且仅在商业场景中使用。
  • Commerce Orange Active#aa2f00):商业按钮的按下/激活状态。
  • Warning Red#c81b3a):表单错误与破坏性操作警告。
  • Shadow Wash 80rgba(0, 0, 0, 0.8)):Hero 摄影上文字背后使用的戏剧性遮罩。
  • Shadow Wash 16rgba(0, 0, 0, 0.16)):卡片上的低权重高程环。
  • Shadow Wash 08rgba(0, 0, 0, 0.08)):极轻卡片高程——几乎不可见,但能将白色面板与白色背景区分开来。
  • Shadow Wash 06rgba(0, 0, 0, 0.06)):系统中最轻的阴影。

渐变体系

PlayStation 仅使用两种区段渐变

  • 浅色区段渐变:从 #ffffff#f5f7fa——几乎感知不到的晕染,静静将面板从画布中抬起。
  • 深色区段渐变:从 #121314#000000——短促的纵向晕染,为 Hero 面板提供微妙的暗角效果,且不引入任何色相偏移。

两种渐变均仅作为区段背景使用,不出现在组件内部。没有渐变按钮、没有渐变文字、没有发光晕圈。品牌色是蓝色——不是蓝到紫,不是蓝到青。

3. 字体规范

字体家族

  • SST / Playstation SST(Sony,专有字体)——回退:ArialHelvetica。Sony 的定制全球字体,由 Toshi Omagari 和 Akira Kobayashi 设计。首页覆盖 300 / 500 / 600 / 700 四个字重。22–54px 的字重 300 是 PlayStation 的字体签名。
  • SST(condensed / alternate)——回退:helveticaarial。压缩变体,用于少数宽度受限的 UI 模块。
  • Arial——极少数以系统无衬线字体渲染的按钮变体的实用回退。

层级

角色字体尺寸字重行高字间距备注
Hero Display (XL)SST54px / 3.38rem3001.25-0.1px页面最大的 SST 时刻——轻字重奢华标题
Hero Display (L)SST44px / 2.75rem3001.250.1px次要 Hero 标题
Large DisplaySST35px / 2.20rem3001.25功能面板标题
Mid DisplaySST28px / 1.75rem3001.250.1px区段标题
Compact DisplaySST22px / 1.38rem3001.250.1px模块标题——仍使用轻字重 300
Playstation SST SubPlaystation SST22.5px / 1.41rem4001.30促销副标题
UI Heading SmallSST18px / 1.13rem6001.00紧凑 UI 标题
Button / CTASST18px / 1.13rem5001.250.4px主按钮标签
Button / EmphasizedSST18px / 1.13rem7001.250.45px高强调 CTA(购买、订阅)
Button SerifSST18px / 1.13rem6001.50次要按钮标签
Body RelaxedSST18px / 1.13rem4001.500.1px标准阅读正文
Link BodySST18px / 1.13rem4001.50行内链接文字
Compact ButtonSST14px / 0.88rem7001.250.324px卡片内迷你 CTA
Utility CaptionSST14px / 0.88rem5001.50说明文字、标签标注
Caption BodySST14px / 0.88rem4001.50标准元数据
Playstation Caption BoldPlaystation SST14px / 0.88rem7001.40强调说明文字
Playstation Caption MidPlaystation SST14px / 0.88rem6001.40半粗说明文字
Playstation ButtonPlaystation SST14.4px / 0.90rem7001.000.144px紧凑行距的 UI 按钮
Playstation TabPlaystation SST14px / 0.88rem4001.100.14px标签页/胶囊标签
Playstation Compact CaptionPlaystation SST12.8px / 0.80rem4001.10最小 UI 说明文字
Micro CaptionSST12px / 0.75rem5001.50页脚微型文案、法律文本
Compact Caption BoldSST12.06px / 0.75rem7001.50强调微型文字

原则

  • 大字号的字重 300 就是声调。 PlayStation 是唯一一个在 Hero 标题使用轻字重展示字体的主要主机品牌。抵制将展示字体”升级”到 500 或 700 的冲动——安静感本身就是个性。
  • UI 层的字重跳跃。 18px 以下,系统切换到 500–700 以保证可读性。从 300(展示)→ 400(正文)→ 500(说明文字)→ 700(按钮)的字重梯度即为层级。
  • 字间距极其细微。 大部分值在 0.1–0.45px 之间,正负皆有。54px Hero 的 -0.1px 将展示字体紧收到恰好”有设计感”而不成为排版声明。
  • 两种 SST 写法。“SST”与”Playstation SST”功能上属于同一字体家族,只是度量集略有差异(Playstation SST 在小字号下更紧凑)。在 Sony 内部授权以外的场合,可视为可互换。
  • 不使用全大写。 与 The Verge 或 Wired 不同,PlayStation 极少使用全大写标签。引导语与标签保持词首大写或句首大写——另一个”克制权威”的体现。
  • 全程无衬线。 整个系统均为无衬线字体,没有印刷声调的对比。

4. 组件样式

按钮

主按钮——PlayStation Blue 胶囊

  • Background: #0070cc(PlayStation Blue)
  • 文字:#ffffff,SST 18px / 500 / 0.4px 字间距
  • Border:静止时无描边
  • Border radius: 999px——完整胶囊
  • Padding: ~12px 24px(根据尺寸等级可变)
  • Outline: rgb(255, 255, 255) none 0px 静止时
  • 悬停(签名动效)
    • Background 填充为 #1eaedb(PlayStation Cyan)
    • 文字保持 #ffffff
    • 出现 2px #ffffff 描边
    • 2px #0070cc 外环阴影绽放(0 0 0 2px #0070cc
    • transform: scale(1.2)——按钮实际放大 20%
  • 激活:opacity: 0.6——快速变暗以传达按下反馈
  • 焦点:与悬停相同,但外环变为 rgb(0, 114, 206) 0px 0px 0px 2px 焦点阴影
  • Transition:background、transform 与 shadow 约 180ms ease

次要按钮——深色背景上的白色描边

  • Background: #ffffff
  • 文字:#0172ce(PlayStation Blue 变体)
  • Border: 2px outset #000000——真正的 outset 描边,在现代 CSS 中极为罕见
  • Radius:可变(常为 999px36px
  • Padding: 16px 20px
  • 悬停:同款签名青色填充 + scale(1.2) + 外环效果
  • 焦点:同款外环效果

商业橙按钮

  • Background: #d53b00(Commerce Orange)
  • 文字:#ffffff,SST 18px / 700 / 0.45px 字间距
  • Border radius: 999px——胶囊
  • 仅用于 PS Store / 购买 / Subscribe Plus CTA
  • 激活:background 加深至 #aa2f00
  • 悬停:与所有其他按钮一样遵循青色反转规则(不是橙色专属悬停)

透明幽灵按钮

  • Background: transparent
  • 文字:#1f1f1f(Deep Charcoal)
  • Border: 1px solid #dedede
  • Padding: 0 10px(紧凑,导航优化)
  • 悬停:青色填充、白色文字、2px 白色描边、scale(1.2)
  • 激活:文字切换至 #0072ce,opacity 0.6

图标圆形按钮

  • Background: 摄影上 rgba(0, 0, 0, 0.2);浅色曲面上 #ffffff
  • Border radius: 100%——完美圆形
  • 用于轮播上一/下一箭头与分享按钮
  • 悬停:浅化至 var(--color-role-backgrounds-primary-link-hover)(浅色背景约为 #e5e5e5

卡片内迷你 CTA

  • SST 14px / 700 / 0.324px 字间距
  • Padding ~8px 16px
  • Radius: 999px
  • 用于游戏卡片内”立即购买”/“加入购物车”等迷你 CTA

卡片与容器

Hero 卡片(游戏功能)

  • Background:摄影/渲染图——通常以黑色为底
  • Border radius:功能卡片为 24px19px
  • Padding:内部 32–48px
  • Shadow: rgba(0, 0, 0, 0.8) 0px 5px 9px 0px——仅当卡片与 Hero 摄影重叠时使用的戏剧性投影
  • 悬停:细微缩放变换,主 CTA 出现青色描边

游戏封面瓦片

  • Background:游戏封面图,无内边距
  • Border radius:图片 12px13px / 卡片框架 19px
  • Shadow: rgba(0, 0, 0, 0.08) 0px 5px 9px 0px——极轻高程
  • 悬停:卡片主 CTA 点亮青色,卡片本身可能缩放至 1.02×
  • Transition: transform 200ms ease

内容面板(白色)

  • Background: #ffffff 或浅色区段渐变 #ffffff → #f5f7fa
  • Border:通常无;通过间距与细微阴影与相邻面板区隔
  • Radius:根据面板层级为 12px24px
  • Shadow: rgba(0, 0, 0, 0.06) 0px 5px 9px 0px——系统中最轻的阴影

深色背景上的深色卡片

  • Background: rgba(0, 0, 0, 0.2),叠于摄影之上
  • Border radius:紧凑型 6px / 功能型 24px
  • 用于 Hero 视频上的”新闻资料包”或”数据块”嵌入

输入框与表单

  • 默认#ffffff 背景,1px solid #cccccc 描边,3px 圆角(比系统其余部分更紧——输入框是 PlayStation 真正走向紧凑的唯一地方),SST 16px 文字颜色 #1f1f1f,占位符 rgba(0, 0, 0, 0.6)
  • 焦点:通过 box-shadow: 0 0 0 2px #0070cc 呈现 2px #0070cc 焦点环。描边颜色不变——外环承担所有工作。
  • 错误:描边与文字切换至 #c81b3a(Warning Red),下方显示同色行内错误文字。
  • Transition:描边与阴影约 180ms ease。

导航

  • 顶部导航:黑色(#000000)全幅通栏,PlayStation logo(白色)左对齐,分类链接居中显示 SST 14–16px / 500,右对齐小型”登录” CTA。
  • 导航链接悬停:颜色从 #ffffff 过渡至 #1883fd(Link Hover Blue),无下划线。
  • 当前区段:以 #0070cc 的细 2px 下划线标示。
  • 移动端:导航折叠为汉堡抽屉。抽屉内,链接纵向堆叠,间距 16px,水平内边距 20px。
  • 吸附行为:导航在滚动时钉在顶部;进入浅色曲面区域时不反转——始终保持黑色背景。

图片处理

  • 宽高比:16:9 Hero 视频/摄影,1:1 主机渲染,3:4 游戏封面,4:3 生活方式图片。
  • 圆角:根据卡片场景圆化至 12px13px24px。游戏封面为 6–12px,Hero 图片为 24px
  • 全幅出血:仅在顶部 Hero 与页脚促销横幅中使用。其余内容均置于有内边距的内容列内。
  • 阴影:Hero 上使用戏剧性的 rgba(0, 0, 0, 0.8) 0 5px 9px 0 投影,网格瓦片上使用羽化的 rgba(0, 0, 0, 0.06) 0 5px 9px 0
  • 悬停:图片本身静止,卡片框架与主 CTA 响应交互。
  • 懒加载:首屏以下所有元素使用 loading="lazy",顶部 Hero 使用 eager

游戏商城胶囊标签(独特元素)

  • Background: #ffffff
  • 文字:#000000,SST 14px / 500
  • Padding: 14px 18px
  • Radius: 9999px——完整胶囊
  • 紧靠游戏封面的中性胶囊标签,用于标注平台(“PS5”、“PS4”、“PSVR2”)。深色背景上白底对比。

5. 布局原则

间距系统

  • 基础单位:8px。
  • 刻度:1、2、3、4.5、5、8、9、10、12、14、15、16、18、20、21px。
  • 区段内边距:主要面板之间纵向 48–96px。Hero 到内容的过渡使用较大端。
  • 卡片内边距:内部 20–32px。功能 Hero 卡片可扩展至 48px。
  • 行内间距:标题与引言之间 8–12px,引言与 CTA 之间 12–16px。
  • 微刻度:1/2/3/4.5/5/9/10/12 的值用于胶囊内边距、说明文字间距与描边偏移——不用于编辑节奏。

网格与容器

  • 最大宽度:~1920px(dembrandt 检测到断点最高至 2120px)。容器上限通常在 1280–1920px 之间,视面板而定。
  • 列模式:12 列响应式网格,根据层级解析为 3/4/6 列游戏瓦片行。Hero 区通常横跨 12 列;精选瓦片采用 6+3+3 或 4+4+4 布局。
  • 外边距:移动端 16px → 平板 48px → 桌面 64–96px。
  • 列间距:列间 16–24px,瓦片簇内更紧(8–12px)。

留白哲学

PlayStation 对待留白,如同奢侈品牌对待店铺灯光——视之为高端信号。模块之间的纵向呼吸空间明显多于任何其他主流零售网站,白色编辑面板往往仅承载一个标题 + 一张图片 + 一个 CTA,搭配 Hero 级别的内边距。效果是一种”展览节奏”——每件产品都有自己的独立空间,而非在缩略图网格中竞争。

圆角刻度

  • 2px——Cookie 提示按钮与小型管理 UI
  • 3px——表单输入框、标签面板(比其他一切都紧——刻意的”功能性 UI”暗示)
  • 6px——紧凑按钮与行内图片
  • 12px——标准游戏封面图与内容图片
  • 13px——某些图片包装器(比 12px 偏移 1px,用于嵌套)
  • 19px——功能卡片
  • 20px——行内标签 span
  • 24px——Hero 卡片、主要功能框架
  • 36px——全胶囊导航与次要按钮变体
  • 48px——大型功能按钮
  • 999px / 100%——完整胶囊主按钮与圆形图标按钮

十一个离散圆角值——是本目录中圆角体系最丰富的站点之一。这个范围的存在,是因为 PlayStation 为不同的层级刻意选用不同圆角:3px 用于功能性,12px 用于媒体,24px 用于功能块,999px 用于 CTA。

6. 深度与高程

层级处理用途
0无阴影#ffffff 上的默认内容
1rgba(0, 0, 0, 0.06) 0 5px 9px 0极轻编辑面板抬升
2rgba(0, 0, 0, 0.08) 0 5px 9px 0标准网格瓦片高程
3rgba(0, 0, 0, 0.16) 0 5px 9px 0强调卡片(悬停或激活)
4rgba(0, 0, 0, 0.8) 0 5px 9px 0Hero 叠加阴影——用于摄影上的戏剧性投影
50 0 0 2px #0070cc(焦点环)主按钮焦点状态
60 0 0 2px #000000(悬停环)次要按钮悬停环
7区段渐变 #121314 → #000000深色 Hero 面板的大气深度

PlayStation 的深度哲学是分层但克制。阴影刻度在正常状态下从 0.06 到 0.16,随后跳至 0.8 用于 Hero 投影——没有 0.2、0.3、0.4 的中间地带。效果是页面大部分区域几乎完全平坦,但当 Hero 卡片需要浮于摄影之上时,它是真正地浮起来。高程要么低语,要么呐喊,从不含糊。

装饰性深度

  • 区段渐变(深色与浅色,均如上所述)——仅作为区段背景使用
  • 焦点/悬停环,2px,根据状态始终为蓝色或青色
  • 超出两种区段渐变之外,不使用任何发光、模糊或大气效果
  • 不使用渐变按钮或渐变文字——视觉系统在区段过渡以外全部为纯色色块

7. 规范与禁忌

规范

  • 以 PlayStation Blue(#0070cc)作为主 CTA 填充与页脚锚点色,它是品牌的锚点色。
  • 对 22px 及以上的所有展示标题使用 SST 字重 300。克制字重的标题就是品牌声调。
  • 为每个主按钮应用完整的悬停签名:青色填充 + 2px 白色描边 + 2px 蓝色外环 + scale(1.2)
  • 在主按钮与商业按钮上使用完整胶囊圆角(999px)。
  • 将 PlayStation Cyan(#1eaedb)专属保留给悬停、焦点与激活状态——永远不作为静止背景。
  • 仅在 PlayStation Store / 购买 CTA 与价格标注上使用 Commerce Orange(#d53b00)。
  • 以深色 Hero 面板交替白色内容面板,并以深蓝色页脚收尾——三层曲面通道布局是页面节奏。
  • 在卡片与产品摄影重叠时使用戏剧性的 rgba(0, 0, 0, 0.8) Hero 投影。
  • 在任何滚动位置保持顶部导航为黑色——它不会在浅色面板上反转为白色。

禁忌

  • 不应加粗展示标题。22–54px 的字重 300 就是 PlayStation 的声调。700 字重的展示字体读来像”另一家游戏零售商”。
  • 不应使用全大写标签或引导语。PlayStation 极少使用大写——这是一个克制权威的品牌,而非警示胶带。
  • 不应在两种已声明的区段渐变以外使用渐变按钮、渐变文字或渐变背景。
  • 不应在 Commerce Orange 以外引入暖色。不要红色 CTA、不要黄色高亮、不要绿色成功胶囊。
  • 不应在按钮或媒体上使用直角。系统有十一种圆角——选一种,但永远不要用 0
  • 不应跳过主按钮的 scale(1.2) 悬停动效。抬升缩放是品牌交互签名。
  • 不应使用衬线字体。系统 100% 为 SST 无衬线。
  • 不应让青色 #1eaedb 以文字或静止背景色的形式出现。它只存在于动态中。
  • 不应设计互相争抢注意力的面板。PlayStation 的留白节奏为每个模块提供专属的”展览空间”。

8. 响应式行为

断点

名称宽度关键变化
Small Mobile<400px单列,导航折叠为汉堡,SST Hero 缩放至 ~28px
Mobile400–599px单列,瓦片全宽堆叠,内边距打开至 16px
Large Mobile600–767px仍为单列,但特定模块中有 2 列瓦片选项
Tablet Portrait768–1023px2 列游戏网格,导航仍为紧凑态
Tablet Landscape1024–1279px3–4 列网格,恢复完整导航
Desktop1280–1599px完整编辑网格,最大 Hero 展示尺寸(44–54px)
Large Desktop1600–1919px容器上限 1600px,外边距扩展
4K / Big-Screen≥1920px容器扩展至最大 1920px,Hero 内容放大以匹配电视观看距离
Ultra-Wide≥2120px极限断点——页面保持锚定,外边距吸收额外宽度

dembrandt 扫描在 320px 到 2120px 之间检测到 30 个断点——响应式范围异常宽泛。PlayStation 专门为大屏场景(1920–2120px)调优,因为 PS5 用户经常通过主机自带浏览器或手机投屏在电视上浏览。大多数零售站点在 1440px 停止调优;PlayStation 一直调优至 4K。

触控目标

  • 主胶囊按钮高约 48–56px(SST 18px 文字 + 约 12–16px 纵向内边距)——轻松达到 WCAG AAA。
  • 导航链接在桌面端较小(约 32–40px 高);移动端在抽屉内填充至 48px 以上。
  • 图标圆形按钮为 40–48px——触控友好。

折叠策略

  • 导航:随视口收窄,完整导航 → 紧凑态 → 汉堡抽屉。Logo 始终左侧固定;CTA 始终右侧固定。
  • 网格:6 列 → 4 列 → 3 列 → 2 列 → 1 列。游戏瓦片卡片自动换行,封面图不被裁切。
  • 间距:区段内边距随视口收窄从 96px → 64px → 48px → 32px → 24px 收紧。
  • 字体:SST Hero 从 54px → 44px → 35px → 28px → 22px 缩放。轻字重 300 在每个尺寸均保留。
  • Hero 摄影:美术指导切换——桌面使用宽幅 16:9 裁切,移动端使用 4:3 或 1:1 裁切,产品居中。

图片行为

  • 响应式光栅图(srcset + 带美术指导的 <picture>),按断点保留宽高比。
  • 4K 就绪:站点在 1920px 以上提供高密度图片,避免电视浏览时图片放大失真。
  • 首屏以下所有内容使用 loading="lazy";Hero 使用 eager 并附带预加载提示。

9. Agent 提示指南

颜色快速参考

  • 主 CTA:“PlayStation Blue(#0070cc)”
  • 悬停 / 焦点强调色:“PlayStation Cyan(#1eaedb)”
  • 背景(白色曲面):“Paper White(#ffffff)”
  • 背景(深色曲面):“Console Black(#000000)”
  • 白色背景上的标题文字:“Display Ink(#000000)”
  • 白色背景上的正文文字:“Deep Charcoal(#1f1f1f)”
  • 黑色背景上的正文文字:“Inverse White(#ffffff)”
  • 商业 / 购买强调色:“Commerce Orange(#d53b00)”
  • 页脚锚点色:“PlayStation Blue(#0070cc)“

示例组件提示词

  1. “创建一个主 CTA 按钮,填充色为 #0070cc PlayStation Blue,白色文字使用 SST 18px / 500 / 0.4px 字间距,圆角 999px,内边距 12px × 24px。悬停时,背景过渡至 #1eaedb PlayStation Cyan,出现 2px #ffffff 描边,通过 box-shadow 绽放 2px #0070cc 外环,整个按钮放大 1.2×——全部在 180ms ease 过渡内完成。”
  2. “在 #000000 Console Black 画布上设计一个 Hero 面板,标题使用 54px SST 字重 300,颜色 #ffffff,-0.1px 字间距,行高 1.25。在标题下方放置单个主 CTA,采用标准 PlayStation 悬停效果。任何位置均不使用全大写标签。”
  3. “构建一个游戏封面瓦片:3:4 宽高比图片,12px 圆角,羽化投影 rgba(0, 0, 0, 0.08) 0 5px 9px 0,下方显示 14px SST 700 标题、12px SST 500 平台标签,以及一个 PlayStation Blue 的迷你主 CTA,使用 14px / 700 / 0.324px 字间距。”
  4. “为 PlayStation Store 购买场景创建一个商业胶囊按钮:#d53b00 Commerce Orange 填充,#ffffff 文字使用 SST 18px / 700 / 0.45px 字间距,圆角 999px,内边距 12px × 28px。激活状态加深至 #aa2f00。悬停遵循标准青色反转效果,缩放 1.2×。”
  5. “在深色 Hero 区段之间设计一个白色内容面板:#ffffff 背景搭配细微的 #ffffff → #f5f7fa 浅色区段渐变,24px 圆角,48px 内边距,羽化高程 rgba(0, 0, 0, 0.06) 0 5px 9px 0,35px SST 300 标题,18px 正文段落,以及单个主 CTA。“

迭代指南

在对使用本设计系统生成的现有界面进行优化时:

  1. 审查展示字重。 22px 及以上的每个标题都应使用 SST 字重 300。如果看到 Hero 级别使用字重 500 或 700,说明 PlayStation 声调已经丢失。
  2. 审查悬停效果。 每个主按钮悬停时必须缩放 1.2×,并结合青色填充 + 白色描边 + 蓝色外环。缺少这四项中的任何一项,交互签名即告破裂。
  3. 审查圆角。 每个容器与按钮的圆角应落在 2、3、6、12、13、19、20、24、36、48 或 999px / 100%。直角会破坏品牌声调。
  4. 审查色彩蔓延。 框架中应只出现 PlayStation Blue(#0070cc)、Cyan(#1eaedb)、Commerce Orange(#d53b00),以及已声明的灰色/黑色/白色。如发现其他色相,请更正。
  5. 审查曲面交替。 页面应交替排列:深色 Hero → 白色内容 → 深色 Hero → 白色内容 → 蓝色页脚。若相邻两个面板曲面相同,请插入一个过渡。
  6. 审查大小写。 仅使用句首大写与词首大写。不使用全大写标签、按钮或引导语。如发现大写,请转换。
  7. 审查阴影权重。 阴影不透明度应落在 0.06 / 0.08 / 0.16 / 0.8——不取中间值。如发现 0.1、0.2、0.3、0.5 的投影阴影,请更正至最近的已声明层级。
  8. 审查留白。 若两个模块感觉”相互竞争”(争夺注意力),请增加 48–96px 的纵向呼吸空间。PlayStation 的展览节奏不可妥协。
模式
design-system
场景
design
形态
web
Manifest ID
design-system-playstation

标签

  • design-system
  • first-party
  • design
  • media-consumer