PlayStation 设计系统.
PlayStation 设计系统 — 游戏主机零售。三面通道布局,沉稳权威显示类型,青色悬停缩放。
在真实场景中查看
同一套设计 token 应用于不同类型的产物——网站、应用、幻灯片、海报。这些是用该系统重新换肤的原创样稿,而非截图。
it
real.
设计 token
56 个 token,符合 Open Design 的 token 契约——你的 agent 读取的正是这套结构化的配色、字体、间距和动效值,用以为任意产物设定主题。
表面
-
--bg#000000 -
--surface#ffffff -
--surface-warm#f5f7fa
文本
-
--fg#ffffff -
--fg-2var(--fg) -
--muted#cccccc -
--metavar(--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-monoui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace
字号层级
-
--text-xs12px -
--text-sm14px -
--text-base18px -
--text-lg22px -
--text-xl28px -
--text-2xl35px -
--text-3xl44px -
--text-4xl54px -
--leading-body1.5 -
--leading-tight1.25 -
--tracking-display-0.1px
间距
-
--space-14px -
--space-28px -
--space-312px -
--space-416px -
--space-520px -
--space-624px -
--space-832px -
--space-1248px -
--section-y-desktop96px -
--section-y-tablet64px -
--section-y-phone48px
圆角
-
--radius-sm6px -
--radius-md12px -
--radius-lg24px -
--radius-pill999px
层级阴影
-
--elev-flatnone -
--elev-ring0 0 0 1px var(--border) -
--elev-raisedrgba(0, 0, 0, 0.08) 0 5px 9px 0
聚焦
-
--focus-ring0 0 0 2px #0070cc
动效
-
--motion-fast180ms -
--motion-base200ms -
--ease-standardcubic-bezier(0.2, 0, 0, 1)
布局
-
--container-max1600px -
--container-gutter-desktop64px -
--container-gutter-tablet32px -
--container-gutter-phone16px
灵感来自 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 Mist(
rgba(245, 247, 250, 0.3)):用于置顶筛选栏背后的半透明背景——站点唯一的”玻璃拟态”时刻。
中性色与文字
- Display Ink(
#000000):白色曲面上的主展示标题。 - Deep Charcoal(
#1f1f1f):正文标题与静止链接颜色——比纯黑稍柔,以减少大段文字的视觉震动。 - Body Gray(
#6b6b6b):次要正文与元数据。 - Mute Gray(
#cccccc):三级标签、禁用状态。 - Placeholder Ink(
rgba(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 80(
rgba(0, 0, 0, 0.8)):Hero 摄影上文字背后使用的戏剧性遮罩。 - Shadow Wash 16(
rgba(0, 0, 0, 0.16)):卡片上的低权重高程环。 - Shadow Wash 08(
rgba(0, 0, 0, 0.08)):极轻卡片高程——几乎不可见,但能将白色面板与白色背景区分开来。 - Shadow Wash 06(
rgba(0, 0, 0, 0.06)):系统中最轻的阴影。
渐变体系
PlayStation 仅使用两种区段渐变:
- 浅色区段渐变:从
#ffffff→#f5f7fa——几乎感知不到的晕染,静静将面板从画布中抬起。 - 深色区段渐变:从
#121314→#000000——短促的纵向晕染,为 Hero 面板提供微妙的暗角效果,且不引入任何色相偏移。
两种渐变均仅作为区段背景使用,不出现在组件内部。没有渐变按钮、没有渐变文字、没有发光晕圈。品牌色是蓝色——不是蓝到紫,不是蓝到青。
3. 字体规范
字体家族
- SST / Playstation SST(Sony,专有字体)——回退:
Arial、Helvetica。Sony 的定制全球字体,由 Toshi Omagari 和 Akira Kobayashi 设计。首页覆盖 300 / 500 / 600 / 700 四个字重。22–54px 的字重 300 是 PlayStation 的字体签名。 - SST(condensed / alternate)——回退:
helvetica、arial。压缩变体,用于少数宽度受限的 UI 模块。 - Arial——极少数以系统无衬线字体渲染的按钮变体的实用回退。
层级
| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字间距 | 备注 |
|---|---|---|---|---|---|---|
| Hero Display (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | 页面最大的 SST 时刻——轻字重奢华标题 |
| Hero Display (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | 次要 Hero 标题 |
| Large Display | SST | 35px / 2.20rem | 300 | 1.25 | — | 功能面板标题 |
| Mid Display | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | 区段标题 |
| Compact Display | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | 模块标题——仍使用轻字重 300 |
| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | 促销副标题 |
| UI Heading Small | SST | 18px / 1.13rem | 600 | 1.00 | — | 紧凑 UI 标题 |
| Button / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | 主按钮标签 |
| Button / Emphasized | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | 高强调 CTA(购买、订阅) |
| Button Serif | SST | 18px / 1.13rem | 600 | 1.50 | — | 次要按钮标签 |
| Body Relaxed | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | 标准阅读正文 |
| Link Body | SST | 18px / 1.13rem | 400 | 1.50 | — | 行内链接文字 |
| Compact Button | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | 卡片内迷你 CTA |
| Utility Caption | SST | 14px / 0.88rem | 500 | 1.50 | — | 说明文字、标签标注 |
| Caption Body | SST | 14px / 0.88rem | 400 | 1.50 | — | 标准元数据 |
| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | 强调说明文字 |
| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | 半粗说明文字 |
| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | 紧凑行距的 UI 按钮 |
| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | 标签页/胶囊标签 |
| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | 最小 UI 说明文字 |
| Micro Caption | SST | 12px / 0.75rem | 500 | 1.50 | — | 页脚微型文案、法律文本 |
| Compact Caption Bold | SST | 12.06px / 0.75rem | 700 | 1.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%
- Background 填充为
- 激活:
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:可变(常为
999px或36px) - 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:功能卡片为
24px或19px - Padding:内部 32–48px
- Shadow:
rgba(0, 0, 0, 0.8) 0px 5px 9px 0px——仅当卡片与 Hero 摄影重叠时使用的戏剧性投影 - 悬停:细微缩放变换,主 CTA 出现青色描边
游戏封面瓦片
- Background:游戏封面图,无内边距
- Border radius:图片
12px或13px/ 卡片框架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:根据面板层级为
12px–24px - 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 生活方式图片。
- 圆角:根据卡片场景圆化至
12px、13px或24px。游戏封面为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 上的默认内容 |
| 1 | rgba(0, 0, 0, 0.06) 0 5px 9px 0 | 极轻编辑面板抬升 |
| 2 | rgba(0, 0, 0, 0.08) 0 5px 9px 0 | 标准网格瓦片高程 |
| 3 | rgba(0, 0, 0, 0.16) 0 5px 9px 0 | 强调卡片(悬停或激活) |
| 4 | rgba(0, 0, 0, 0.8) 0 5px 9px 0 | Hero 叠加阴影——用于摄影上的戏剧性投影 |
| 5 | 0 0 0 2px #0070cc(焦点环) | 主按钮焦点状态 |
| 6 | 0 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 |
| Mobile | 400–599px | 单列,瓦片全宽堆叠,内边距打开至 16px |
| Large Mobile | 600–767px | 仍为单列,但特定模块中有 2 列瓦片选项 |
| Tablet Portrait | 768–1023px | 2 列游戏网格,导航仍为紧凑态 |
| Tablet Landscape | 1024–1279px | 3–4 列网格,恢复完整导航 |
| Desktop | 1280–1599px | 完整编辑网格,最大 Hero 展示尺寸(44–54px) |
| Large Desktop | 1600–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)“
示例组件提示词
- “创建一个主 CTA 按钮,填充色为
#0070ccPlayStation Blue,白色文字使用 SST 18px / 500 / 0.4px 字间距,圆角 999px,内边距 12px × 24px。悬停时,背景过渡至#1eaedbPlayStation Cyan,出现 2px#ffffff描边,通过 box-shadow 绽放 2px#0070cc外环,整个按钮放大 1.2×——全部在 180ms ease 过渡内完成。” - “在
#000000Console Black 画布上设计一个 Hero 面板,标题使用 54px SST 字重 300,颜色#ffffff,-0.1px 字间距,行高 1.25。在标题下方放置单个主 CTA,采用标准 PlayStation 悬停效果。任何位置均不使用全大写标签。” - “构建一个游戏封面瓦片: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 字间距。” - “为 PlayStation Store 购买场景创建一个商业胶囊按钮:
#d53b00Commerce Orange 填充,#ffffff文字使用 SST 18px / 700 / 0.45px 字间距,圆角 999px,内边距 12px × 28px。激活状态加深至#aa2f00。悬停遵循标准青色反转效果,缩放 1.2×。” - “在深色 Hero 区段之间设计一个白色内容面板:
#ffffff背景搭配细微的#ffffff → #f5f7fa浅色区段渐变,24px 圆角,48px 内边距,羽化高程rgba(0, 0, 0, 0.06) 0 5px 9px 0,35px SST 300 标题,18px 正文段落,以及单个主 CTA。“
迭代指南
在对使用本设计系统生成的现有界面进行优化时:
- 审查展示字重。 22px 及以上的每个标题都应使用 SST 字重 300。如果看到 Hero 级别使用字重 500 或 700,说明 PlayStation 声调已经丢失。
- 审查悬停效果。 每个主按钮悬停时必须缩放 1.2×,并结合青色填充 + 白色描边 + 蓝色外环。缺少这四项中的任何一项,交互签名即告破裂。
- 审查圆角。 每个容器与按钮的圆角应落在 2、3、6、12、13、19、20、24、36、48 或 999px / 100%。直角会破坏品牌声调。
- 审查色彩蔓延。 框架中应只出现 PlayStation Blue(
#0070cc)、Cyan(#1eaedb)、Commerce Orange(#d53b00),以及已声明的灰色/黑色/白色。如发现其他色相,请更正。 - 审查曲面交替。 页面应交替排列:深色 Hero → 白色内容 → 深色 Hero → 白色内容 → 蓝色页脚。若相邻两个面板曲面相同,请插入一个过渡。
- 审查大小写。 仅使用句首大写与词首大写。不使用全大写标签、按钮或引导语。如发现大写,请转换。
- 审查阴影权重。 阴影不透明度应落在 0.06 / 0.08 / 0.16 / 0.8——不取中间值。如发现 0.1、0.2、0.3、0.5 的投影阴影,请更正至最近的已声明层级。
- 审查留白。 若两个模块感觉”相互竞争”(争夺注意力),请增加 48–96px 的纵向呼吸空间。PlayStation 的展览节奏不可妥协。
标签
design-systemfirst-partydesignmedia-consumer