admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
28 KiB
28 KiB
受 PlayStation 啟發的設計系統
Category: 媒體與消費性電子 遊戲主機零售。三層介面通道版面、靜謐權威的展示字體、青色懸停縮放效果。
1. 視覺主題與氛圍
PlayStation.com 的氣質，像是一個恰好兼售娛樂商品的高階消費電子品牌行銷部門。頁面以交替介面的垂直通道為骨架：近黑色的標題列與主視覺區、中段一系列紙白色的編輯版塊，以及壓住整體視覺的深鈷藍色頁尾。在這些介面之間，網站大量倚賴攝影與 3D 產品渲染——PS5 主機、遊戲封面、DualSense 控制器——讓硬體本身承擔情感重量，而裝飾性元素則保持克制。
字體上最具辨識度的手法是大尺寸的 SST Light（字重 300）。索尼專屬的 SST 字族從 22px 至 54px 均採用字重 300，賦予展示標題一種低語般的優雅質感，更接近高端腕錶廣告，而非遊戲商店。這種「靜謐權威」與 The Verge 的 Manuka 大喊或 Wired 的雜誌密度截然相反——PlayStation 希望字體退讓，讓產品站到前台。內文與介面元素採用 500–700 字重，但展示語調始終輕盈而沉靜。
唯一打破克制的是互動設計。每個主要按鈕都有同一個懸停動效：填色切換為電藍色青 #1eaedb、出現 2px 白色外框、外圍浮現 2px PlayStation 藍外環，整個按鈕放大至 1.2×。色彩爆發、外框、外環與縮放提升的組合，是索尼在主流品牌中獨一無二的標誌動效——一個小型「開機」動畫，在單一頁面上重複出現數百次。
核心特徵：
- 三層介面通道版面：近黑色主視覺、紙白色內容區、鈷藍色頁尾——交替出現，從不混融
- 22–54px 的 SST 字重 300 作為展示字體——「靜謐權威」的標題，讓產品攝影主導視覺
- PlayStation Blue
#0070cc作為品牌錨點色；青色#1eaedb專用於懸停/焦點狀態 - 每個互動元素在懸停時放大 1.2×——PlayStation 獨有的「開機」縮放標誌
- 全膠囊按鈕，圓角半徑 999px；卡片圖片採用 12–24px 圓角矩形
- 商業橙
#d53b00專用於 PlayStation Store 購買類行動呼籲 - 最高支援 2120px 的寬螢幕斷點——網站可延伸至 4K 電視瀏覽情境
2. 色彩調色盤與角色定義
主色（品牌錨點）
- PlayStation Blue（
#0070cc）：品牌錨點色。用於主要頁尾、內聯連結、深色介面上的主要按鈕填色，以及所有「官方」標識。視為不可更動的基準——這是品牌在消費者記憶中最強烈的顏色連結。 - Console Black（
#000000）：純黑色，用於標題列、主視覺背景及產品展示區。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）：頂部導覽列與主視覺畫布——專屬於以產品為主的區域。 - 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 購買狀態行動呼籲、價格標示及「特價」標籤。網站上唯一的暖色——需謹慎使用，且絕不出現在商業情境以外。 - Commerce Orange Active（
#aa2f00）：商業按鈕的按下/啟用狀態。 - Warning Red（
#c81b3a）：表單錯誤與破壞性操作警告。 - Shadow Wash 80（
rgba(0, 0, 0, 0.8)）：產品攝影上主視覺文字背後的強烈遮罩。 - 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——短暫的垂直過渡，為主視覺版塊增添細微的暗角效果，且不引入任何色相偏移。
兩種漸層僅作為區段背景使用，絕不用於元件內部。沒有漸層按鈕、漸層文字或光暈效果。品牌色是藍色——不是藍到紫、不是藍到青的漸層。
3. 字體排版規則
字型家族
- SST / Playstation SST（索尼，專有字型）——備用字型：
Arial、Helvetica。索尼的全球專屬字型，由 Toshi Omagari 與 Akira Kobayashi 設計。涵蓋首頁使用的 300 / 500 / 600 / 700 字重。300 字重在 22–54px 是 PlayStation 的字體排版標誌。 - SST（壓縮／替代版）——備用字型：
helvetica、arial。在少數需要節省寬度的介面模組中使用的緊縮變體。 - Arial——用於極少數以系統無串線體渲染的按鈕變體的通用備用字型。
層級結構
| 角色 | 字型 | 尺寸 | 字重 | 行高 | 字距 | 備注 |
|---|---|---|---|---|---|---|
| 主視覺展示（XL） | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | 頁面最大的 SST 時刻——靜謐字重的奢華標題 |
| 主視覺展示（L） | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | 次要主視覺標題 |
| 大型展示 | SST | 35px / 2.20rem | 300 | 1.25 | — | 特色版塊標題 |
| 中型展示 | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | 區段標題 |
| 緊湊展示 | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | 模組標題——仍維持輕盈字重 300 |
| Playstation SST 副標 | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | 促銷副標題 |
| 介面小標題 | SST | 18px / 1.13rem | 600 | 1.00 | — | 緊湊介面標題 |
| 按鈕 / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | 主要按鈕標籤 |
| 按鈕 / 強調版 | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | 高強調行動呼籲（購買、訂閱） |
| 按鈕襯線版 | SST | 18px / 1.13rem | 600 | 1.50 | — | 次要按鈕標籤 |
| 內文寬鬆版 | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | 標準閱讀內文 |
| 連結內文 | SST | 18px / 1.13rem | 400 | 1.50 | — | 內聯連結文字 |
| 緊湊按鈕 | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | 卡片內的迷你行動呼籲 |
| 通用說明文字 | SST | 14px / 0.88rem | 500 | 1.50 | — | 圖說、標籤文字 |
| 說明文字內文 | SST | 14px / 0.88rem | 400 | 1.50 | — | 標準後設資料 |
| Playstation 粗體說明 | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | 強調說明文字 |
| Playstation 中等說明 | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | 半粗說明文字 |
| Playstation 按鈕 | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | 緊湊行高的介面按鈕 |
| Playstation 標籤頁 | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | 標籤頁/膠囊標籤文字 |
| Playstation 緊湊說明 | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | 最小介面說明文字 |
| 微型說明 | SST | 12px / 0.75rem | 500 | 1.50 | — | 頁尾微型文字、法律聲明 |
| 緊湊粗體說明 | SST | 12.06px / 0.75rem | 700 | 1.50 | — | 強調微型文字 |
原則
- 大尺寸字重 300 即是語調。 PlayStation 是唯一一個在主視覺標題使用輕字重展示的主流主機品牌。請抵抗將展示字體「升級」至 500 或 700 的衝動——輕盈正是個性所在。
- 介面層的字重跳躍。 18px 以下，系統切換至 500–700 以確保可讀性。從 300（展示）→ 400（內文）→ 500（說明）→ 700（按鈕）的字重漸層即是視覺層級。
- 字距幾乎微不可察。 多數數值在 0.1–0.45px 之間，或正或略負。54px 主視覺的
-0.1px讓展示字體稍微收緊，讀起來有「經過設計」的感覺，卻不會成為突出的排版宣言。 - 兩種 SST 大小寫系統。「SST」與「Playstation SST」在功能上是同一字族，度量指標略有不同（Playstation SST 在小尺寸下更緊湊）。在索尼內部授權以外的使用場景中，可視為可互換。
- 無全大寫。 不同於 The Verge 或 Wired，PlayStation 極少使用全大寫標籤。提要行與標籤維持首字母大寫或句首大寫——又一個「靜謐權威」的表現。
- 全站無襯線字體。 整個系統均為無串線體，不存在印刷語調的對位元素。
4. 元件樣式
按鈕
主要按鈕——PlayStation Blue 膠囊
- 背景：
#0070cc（PlayStation Blue） - 文字：
#ffffff，SST 18px / 500 / 0.4px 字距 - 外框：靜止時無
- 圓角半徑：
999px——完整膠囊形 - 內距：約
12px 24px（依尺寸類別調整） - 外框線：靜止時
rgb(255, 255, 255) none 0px - 懸停（標誌動效）：
- 背景填色切換為
#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焦點陰影 - 過渡：約 180ms ease，作用於背景、transform 及陰影
次要按鈕——深色背景上的白色外框
- 背景：
#ffffff - 文字：
#0172ce（PlayStation Blue 變體） - 外框：
2px outset #000000——真實的outset外框，在現代 CSS 中極為罕見 - 圓角半徑：不一（通常為
999px或36px） - 內距：
16px 20px - 懸停：同標誌性青色填色 + scale(1.2) + 外環效果
- 焦點：同外環效果
商業橙按鈕
- 背景：
#d53b00（Commerce Orange） - 文字：
#ffffff，SST 18px / 700 / 0.45px 字距 - 圓角半徑：
999px——膠囊形 - 僅用於 PS Store／購買／訂閱 Plus 行動呼籲
- 啟用：背景加深至
#aa2f00 - 懸停：遵循青色反轉規則，與其他所有按鈕相同（非橙色專屬懸停）
透明幽靈按鈕
- 背景：透明
- 文字：
#1f1f1f（Deep Charcoal） - 外框：
1px solid #dedede - 內距：
0 10px（緊湊，針對導覽列優化） - 懸停：青色填色、白色文字、2px 白色外框、scale(1.2)
- 啟用：文字切換至
#0072ce，opacity 0.6
圖示圓形按鈕
- 背景：攝影圖片上為
rgba(0, 0, 0, 0.2)；淺色介面上為#ffffff - 圓角半徑：
100%——正圓形 - 用於輪播上一張/下一張箭頭與分享按鈕
- 懸停：淡化至
var(--color-role-backgrounds-primary-link-hover)（淺色下約為#e5e5e5）
卡片內迷你行動呼籲
- SST 14px / 700 / 0.324px 字距
- 內距約 8px 16px
- 圓角半徑：
999px - 用於遊戲卡片內的「立即購買」/「加入購物車」迷你行動呼籲
卡片與容器
主視覺卡片（遊戲特色）
- 背景：攝影/渲染圖——通常以黑色為基底
- 圓角半徑：特色卡片為
24px或19px - 內距：32–48px
- 陰影：
rgba(0, 0, 0, 0.8) 0px 5px 9px 0px——僅在卡片疊加於主視覺攝影時使用的強烈投影 - 懸停：細微縮放變換，主要行動呼籲出現青色外框
遊戲封面磚
- 背景：遊戲封面圖，無內距
- 圓角半徑：
12px或13px（圖片）/19px（卡片框架） - 陰影：
rgba(0, 0, 0, 0.08) 0px 5px 9px 0px——羽量陰影 - 懸停：卡片主要行動呼籲亮起青色，卡片本身可能縮放至 1.02×
- 過渡：200ms ease 作用於 transform
內容版塊（白色）
- 背景：
#ffffff或淺色區段漸層#ffffff → #f5f7fa - 外框：通常無；以間距與細微陰影與相鄰元素區隔
- 圓角半徑：依版塊層級在
12px–24px之間 - 陰影：
rgba(0, 0, 0, 0.06) 0px 5px 9px 0px——系統中最輕的陰影
深色背景上的深色卡片
- 背景：攝影圖上的
rgba(0, 0, 0, 0.2) - 圓角半徑：緊湊型為
6px，特色型為24px - 用於主視覺影片上的「新聞資料包」或「數據區塊」嵌入
輸入框與表單
- 預設：
#ffffff背景，1px solid #cccccc外框，3px圓角半徑（比系統其他元素更緊湊——輸入框是 PlayStation 刻意呈現「功能性介面」感覺的唯一之處），#1f1f1f顏色的 SST 16px 文字，佔位文字rgba(0, 0, 0, 0.6)。 - 焦點：通過
box-shadow: 0 0 0 2px #0070cc產生 2px#0070cc焦點環，外框顏色不變——由焦點環負責所有工作。 - 錯誤：外框與文字切換至
#c81b3a（Warning Red），同色錯誤文字顯示於下方。 - 過渡：約 180ms ease 作用於外框與陰影。
導覽列
- 頂部導覽列：黑色（
#000000）全出血條帶，左對齊白色 PlayStation 標誌，SST 14–16px / 500 居中分類連結，右對齊小型「登入」行動呼籲。 - 導覽連結懸停：顏色從
#ffffff過渡至#1883fd（Link Hover Blue），無底線。 - 啟用區段：以
#0070cc的細微 2px 底線標示。 - 行動裝置：導覽列收合為漢堡選單抽屜。抽屜內，連結垂直排列，間距 16px，水平內距 20px。
- 黏性行為：導覽列在捲動時固定於頂部；進入淺色介面區域時不反轉——全程維持黑色背景。
圖片處理
- 長寬比：16:9 主視覺影片/攝影，1:1 主機渲染，3:4 遊戲封面，4:3 生活風格圖片。
- 圓角：依卡片情境圓化至
12px、13px或24px。遊戲封面為6–12px，主視覺圖片為24px。 - 全出血：僅限頁首主視覺與頁尾促銷橫幅。其餘圖片均置於有內距的內容欄中。
- 陰影：主視覺上的強烈
rgba(0, 0, 0, 0.8) 0 5px 9px 0投影，格狀磚上的羽量rgba(0, 0, 0, 0.06) 0 5px 9px 0。 - 懸停：圖片保持靜止，卡片框架與主要行動呼籲響應。
- 懶載入：摺疊線以下所有圖片使用
loading="lazy"，頁首主視覺使用eager。
遊戲商店膠囊標籤（特色元件）
- 背景：
#ffffff - 文字：
#000000，SST 14px / 500 - 內距：
14px 18px - 圓角半徑：
9999px——完整膠囊形 - 置於遊戲封面旁的中性膠囊標籤，用於標示平台（「PS5」、「PS4」、「PSVR2」）。深色背景上的白色對比。
5. 版面配置原則
間距系統
- 基礎單位：8px。
- 刻度：1、2、3、4.5、5、8、9、10、12、14、15、16、18、20、21px。
- 區段內距：主要版塊之間垂直方向 48–96px。主視覺至內容的過渡使用較大的數值。
- 卡片內距：20–32px。特色主視覺卡片可擴展至 48px。
- 內聯間距：標題與副標之間 8–12px，副標與行動呼籲之間 12–16px。
- 微刻度：1/2/3/4.5/5/9/10/12 等值用於膠囊內距、說明文字間距及外框偏移——非用於編輯節奏。
網格與容器
- 最大寬度：約 1920px（dembrandt 偵測到最高 2120px 的斷點）。容器上限依版塊在
1280–1920px之間。 - 欄位模式：12 欄響應式網格，依層級解析為 3/4/6 欄遊戲磚排列。主視覺區通常跨越 12 欄；特色磚採用 6+3+3 或 4+4+4 配置。
- 外側內距：行動裝置 16px → 平板 48px → 桌面 64–96px。
- 欄位間距：欄與欄之間 16–24px，磚群內部更緊湊（8–12px）。
留白哲學
PlayStation 對待留白的方式，如同奢侈品牌對待店內燈光——視為頂級信號。各模組之間的垂直呼吸空間，明顯多於任何其他主流零售網站；白色編輯版塊通常僅容納一個標題＋一張圖片＋一個行動呼籲，且以主視覺尺寸的內距呈現。效果如同「畫廊節奏」——每件產品擁有自己的展間，而非在縮圖格子中相互競爭。
圓角半徑刻度
- 2px——Cookie 橫幅按鈕與小型管理介面
- 3px——表單輸入框、標籤面板（比其他元素更緊湊——刻意傳遞「功能性介面」的視覺暗示）
- 6px——緊湊按鈕與內聯圖片
- 12px——標準遊戲封面圖與內容圖片
- 13px——特定圖片包裝容器（比 12px 多 1px，用於巢狀結構）
- 19px——特色卡片
- 20px——內聯標籤 span
- 24px——主視覺卡片、主要特色框架
- 36px——全膠囊導覽列與次要按鈕變體
- 48px——大型特色按鈕
- 999px / 100%——完整膠囊主要按鈕與圓形圖示按鈕
共十一個不同的圓角值——本目錄中圓角系統最豐富的網站之一。這個範圍的存在，是因為 PlayStation 刻意對不同層級使用不同圓角：3px 用於功能性元素，12px 用於媒體，24px 用於特色區塊，999px 用於行動呼籲。
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 |
主視覺疊加陰影——攝影圖上的強烈投影 |
| 5 | 0 0 0 2px #0070cc（焦點環） |
主要按鈕焦點狀態 |
| 6 | 0 0 0 2px #000000（懸停環） |
次要按鈕懸停環 |
| 7 | 區段漸層 #121314 → #000000 |
深色主視覺版塊的大氣深度 |
PlayStation 的深度哲學是分層但克制的。陰影刻度在正常狀態下從 0.06 到 0.16，然後在主視覺投影時跳至 0.8——不存在 0.2、0.3、0.4 的中間地帶。效果是頁面大部分幾乎是平的，但當主視覺卡片需要漂浮於攝影圖之上時，它會真實地漂浮。深度要麼輕聲細語，要麼大聲宣告，從不喃喃自語。
裝飾性深度
- 區段漸層（深色與淺色，如上所述）——僅作為區段背景使用
- 焦點/懸停環為 2px，依狀態始終為藍色或青色
- 區段過渡之外，無光暈、模糊或大氣效果
- 無漸層按鈕或漸層文字——視覺系統在區段過渡以外均為純色色塊
7. 應做與不應做
應做
- 應使用 PlayStation Blue（
#0070cc）作為主要行動呼籲填色與頁尾錨點色，這是品牌的錨點色。 - 應對所有 22px 及以上的展示標題使用 SST 字重 300。輕盈字重的標題即是語調本身。
- 應對每個主要按鈕應用完整懸停標誌：青色填色＋2px 白色外框＋2px 藍色外環＋
scale(1.2)。 - 應對主要按鈕與商業按鈕使用完整膠囊圓角（
999px）。 - 應將 PlayStation Cyan（
#1eaedb）專用於懸停、焦點和啟用狀態——絕不作為靜止背景。 - 應僅在 PlayStation Store／購買行動呼籲與價格標示上使用 Commerce Orange（
#d53b00）。 - 應以深色主視覺版塊與白色內容版塊交替出現，並以深藍色頁尾收尾——三層介面通道版面即是頁面節奏。
- 應在卡片疊加於產品攝影時使用強烈的
rgba(0, 0, 0, 0.8)主視覺投影。 - 應在所有捲動位置保持頂部導覽列為黑色——它不會在淺色版塊上反轉為白色。
不應做
- 不應將展示標題加粗。22–54px 的字重 300 是 PlayStation 的語調。700 字重的展示字體讀起來像「又一家遊戲零售商」。
- 不應使用全大寫標籤或提要行。PlayStation 極少使用大寫——這是一個靜謐權威的品牌，不是危險標語。
- 不應在兩種既定區段漸層以外使用漸層按鈕、漸層文字或漸層背景。
- 不應在 Commerce Orange 以外引入暖色。不使用紅色行動呼籲、黃色高亮或綠色成功標籤。
- 不應在按鈕或媒體上使用直角。系統有十一種圓角——選一個，但絕不使用
0。 - 不應省略主要按鈕的
scale(1.2)懸停動效。縮放提升是品牌互動標誌。 - 不應使用襯線字體。系統百分之百使用 SST 無串線體。
- 不應讓青色
#1eaedb以靜止狀態作為文字或背景色出現。它只存在於動態之中。 - 不應設計相互競爭的版塊。PlayStation 的留白節奏為每個模組提供專屬的「展示空間」。
8. 響應式行為
斷點
| 名稱 | 寬度 | 主要變化 |
|---|---|---|
| 小型行動裝置 | <400px | 單欄，導覽列收合為漢堡，SST 主視覺縮至約 28px |
| 行動裝置 | 400–599px | 單欄，磚塊全寬堆疊，內距擴展至 16px |
| 大型行動裝置 | 600–767px | 仍為單欄，但特定模組提供 2 欄磚塊選項 |
| 平板縱向 | 768–1023px | 2 欄遊戲網格，導覽列仍為緊縮版 |
| 平板橫向 | 1024–1279px | 3–4 欄網格，恢復完整導覽列 |
| 桌面 | 1280–1599px | 完整編輯網格，最大主視覺展示尺寸（44–54px） |
| 大型桌面 | 1600–1919px | 容器上限 1600px，外側邊距擴展 |
| 4K/大螢幕 | ≥1920px | 容器擴展至最大 1920px，主視覺內容放大以配合電視觀看距離 |
| 超寬螢幕 | ≥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——觸控友善。
收合策略
- 導覽列：隨視窗縮小，從完整導覽→緊縮版→漢堡抽屜。標誌固定於左側；行動呼籲固定於右側。
- 網格：6 欄→4 欄→3 欄→2 欄→1 欄。遊戲磚卡片重排時不裁切封面圖。
- 間距：隨視窗縮小，區段內距從 96px→64px→48px→32px→24px 收緊。
- 字體：SST 主視覺從 54px→44px→35px→28px→22px 縮小。輕字重 300 在每個尺寸下均保留。
- 主視覺攝影：藝術指導切換——桌面使用寬幅 16:9 裁切，行動裝置使用 4:3 或 1:1 裁切，產品置中。
圖片行為
- 響應式點陣圖（
srcset＋藝術指導<picture>），長寬比依斷點保留。 - 4K 就緒：網站在 1920px 以上提供高密度圖片，避免電視瀏覽時放大失真。
- 摺疊線以下所有圖片使用
loading="lazy"；主視覺使用eager並附帶預載提示。
9. Agent 提示指南
快速色彩參照
- 主要行動呼籲：「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）」
元件提示範例
- 「建立一個主要行動呼籲按鈕：
#0070ccPlayStation Blue 填色、白色文字使用 SST 18px / 500 / 0.4px 字距、999px 圓角半徑、12px × 24px 內距。懸停時，背景在 180ms ease 過渡中切換至#1eaedbPlayStation Cyan、出現 2px#ffffff外框、通過 box-shadow 浮現 2px#0070cc外環，整個按鈕放大 1.2×。」 - 「在
#000000Console Black 畫布上設計一個主視覺版塊：54px SST 字重 300 標題使用#ffffff顏色，字距 -0.1px，行高 1.25。下方放置一個使用標準 PlayStation 懸停效果的主要行動呼籲。任何地方都不使用全大寫標籤。」 - 「建立一個遊戲封面磚：3:4 長寬比圖片，12px 圓角半徑，羽量
rgba(0, 0, 0, 0.08) 0 5px 9px 0投影，下方 14px SST 700 標題、12px SST 500 平台標籤，以及 PlayStation Blue 的迷你主要行動呼籲，採用 14px / 700 / 0.324px 字距。」 - 「為 PlayStation Store 購買建立一個商業膠囊按鈕：
#d53b00Commerce Orange 填色、#ffffff文字使用 SST 18px / 700 / 0.45px 字距、999px 圓角半徑、12px × 28px 內距。啟用狀態加深至#aa2f00。懸停遵循標準青色反轉與 1.2× 縮放規則。」 - 「在深色主視覺區段之間設計一個白色內容版塊：
#ffffff背景配合細微的#ffffff → #f5f7fa淺色區段漸層、24px 圓角半徑、48px 內距、羽量rgba(0, 0, 0, 0.06) 0 5px 9px 0陰影、35px SST 300 標題、18px 內文段落，以及一個主要行動呼籲。」
迭代指南
在精修以此設計系統生成的現有畫面時：
- 稽核展示字重。 22px 及以上的所有標題應為 SST 字重 300。若在主視覺尺寸看到字重 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）以及既定的灰色/黑色/白色。若看到任何其他色相，予以修正。 - 稽核介面交替。 頁面應以深色主視覺→白色內容→深色主視覺→白色內容→藍色頁尾交替排列。若相鄰的兩個版塊介面相同，插入一個過渡版塊。
- 稽核大小寫。 僅限句首大寫與首字母大寫。不使用全大寫標籤、按鈕或提要行。若看到全大寫，予以轉換。
- 稽核陰影重量。 陰影不透明度應落在 0.06 / 0.08 / 0.16 / 0.8——不存在中間值。若看到 0.1、0.2、0.3、0.5 的投影，修正至最近的既定層級。
- 稽核留白。 若兩個模組感覺「相互競爭」（爭奪視覺注意力），增加 48–96px 的垂直呼吸空間。PlayStation 的畫廊節奏節奏不可妥協。