OpenDesign·你的设计资产库

网页参考

Playstation

索尼高端游戏生态门户,平衡大胆的电影视觉与简洁、功能化的导航。

ProductConsumerDark ModeMotionPlayful
Playstation 网站截图

历史页面片段,非最新首页;规范与授权仍需分别核实。

01

设计气质 DNA

游戏娱乐高端动态沉浸

一个从光洁的影院大厅过渡到互动游戏厅的空间

02

色彩

#0070C0Accent
#FFFFFFInk
#1F1F1FInk soft
#000000BG
#6B6B6BMuted
rgba(0, 104, 189, 0.2)Line

采用深黑与亮白构建高对比基础,让鲜艳的游戏艺术图和标志性蓝色点缀脱颖而出。

03

字体

grotesque-sans · humanist-sans · monospace

  • display56px · 500
  • heading32px · 500
  • body16px · 400

针对中文本地化界面,使用系统字体栈 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', Arial, sans-serif。 · 导航文字保持16px大小,400字重以确保可读性。 · 通过叠加层确保文字与图片背景之间具有强烈对比。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

采用一致的4px基础网格进行微间距控制,在主视觉区域放大至64px和96px的间距以营造呼吸感。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 16px
pill · 999px

极简的可见边框;主要依靠细微的2px高亮表示激活状态,或使用1px分割线融入深色主题。

0px 4px 8px rgba(0, 0, 0, 0.16) · 0px 4px 8px rgba(0, 0, 0, 0.8)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血沉浸式主视觉区块,随后是水平滚动的卡片轮播和结构化内容区块。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

所有交互元素(按钮、卡片、菜单项)使用平滑的0.2s ease-in-out过渡。 · 菜单和轮播的展开/收起使用高度和box-shadow过渡。 · 基于transform的悬停效果用于可点击项目的深度感知。

卡片有细微颜色变化或轻微缩放;按钮背景在悬停时变暗。 · 通过0.2s transform或阴影变化提供即时视觉反馈。

08

组件

  • button 胶囊形主操作按钮,使用#0070C0蓝色和白色文字;次级按钮使用#1F1F1F背景。
  • card 图片主导的卡片,16px圆角,细微阴影,选中时有2px高亮。
  • chip 用于标签式分类,内边距极小。
  • input 搜索界面,配以简洁、无装饰的放大镜图标。
  • hero 全宽电影感图片或视频,配有深色叠加层和大号白色字体排版。

09

文案语气与禁用清单

  • 语气 热情、有吸引力、高端,聚焦于游戏的兴奋感。
  • 标题风格 粗体、简洁、行动导向,常覆盖在动态图像上。
  • 按钮文案 直接且鼓励性,使用清晰的胶囊形按钮驱动参与度。
  • 不要使用过多边框——截图显示依靠阴影和背景对比。
  • 不要为主卡片使用尖锐的圆角——截图显示使用一致的16px和8px圆角。
  • 不要使用柔和或土质色调——截图显示使用高对比度的黑、白和鲜艳的蓝色。
  • 不要使用装饰性衬线字体——截图显示使用简洁、功能化的无衬线字体用于UI。
  • 不要使用低分辨率图像——截图显示使用高保真、电影感的游戏艺术图。
  • 不要在主视觉中使用复杂的多栏布局——截图显示使用单一、主导的视觉焦点。
  • 避免: 文字堆砌
  • 避免: 枯燥的企业语言
  • 避免: 低对比度的文字叠加
  • 避免: 过度的装饰元素
  • 避免: 模糊的行动号召

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是索尼PlayStation中文本地化主页,一个高端消费级游戏门户。其设计基因建立在深黑 (#000000) 和纯白 (#FFFFFF) 的高对比基础上,让鲜艳的游戏艺术图占据主导。主要品牌点缀色为标志性蓝色 (#0070C0)。排版上,UI使用简洁的人文无衬线系统字体栈 (PingFang SC, Arial),主视觉标题使用粗体怪诞无衬线字体。布局特点为全出血电影感主视觉,随后是水平滚动的、带有16px圆角的游戏卡片轮播。关键元素包括胶囊形蓝色CTA按钮和细微的0.2s ease-in-out过渡。关键禁忌:绝不使用装饰性衬线体,避免过多边框,不要在繁忙背景上使用低对比度文字叠加,避免土质色调,绝不让主视觉焦点过多,并始终保持4px基础间距网格。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。