01
设计气质 DNA
游戏娱乐高端动态沉浸
一个从光洁的影院大厅过渡到互动游戏厅的空间
02
色彩
#0070C0Accent#FFFFFFInk#1F1F1FInk soft#000000BG#6B6B6BMutedrgba(0, 104, 189, 0.2)Line采用深黑与亮白构建高对比基础,让鲜艳的游戏艺术图和标志性蓝色点缀脱颖而出。
03
字体
- display
56px · 500 - heading
32px · 500 - body
16px · 400
针对中文本地化界面,使用系统字体栈 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', Arial, sans-serif。 · 导航文字保持16px大小,400字重以确保可读性。 · 通过叠加层确保文字与图片背景之间具有强烈对比。
04
间距
4px8px16px24px32px48px64px96px采用一致的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基础间距网格。










