Skip to content

DESIGN.md

Latest commit

 

History

History
895 lines (684 loc) · 44.7 KB

DESIGN.md

File metadata and controls

895 lines (684 loc) · 44.7 KB
Raw

Plex 导向的媒体产品设计系统

版本：1.1 调研基线：2026-07-13 适用范围：自部署媒体服务器、Web/桌面媒体客户端、服务器管理后台、产品营销站、帮助中心 性质：基于 Plex 官方公开产品与站点归纳的设计规范，不是 Plex 官方发布的 Design System

0. 使用声明与边界

这份文档提取的是 Plex 官方产品体系中可复用的设计规律：内容优先、影院氛围、低存在感的产品框架、金色功能强调、海报驱动的浏览结构，以及营销站与支持站之间一致但不相同的品牌表达；在此基础上补充一套与暗色模式语义对等的 Product Light 主题。

它不授权复制 Plex 的商标、Logo、专有字体、受版权保护的图片或界面资产。Plex 官方明确要求不得擅自改变其标志，也不得以造成合作、背书或品牌混淆的方式使用 Plex 标识；实际项目若不是 Plex 官方产品，应使用自有名称与标志，并将本文中的 Plex 命名令牌替换成项目自身的语义命名。参见 Plex Trademarks and Guidelines。

本文把规则分为三类：

  • 已观察（Observed）：在当前官方公开页面或 Plex Web App 未登录状态中直接测得。
  • 官方行为（Documented）：由 Plex 官方支持文档描述的结构或交互。
  • 实现建议（Recommended）：为响应式、可访问性与组件一致性补充的工程规范，不声称是 Plex 内部令牌。

1. 设计总纲

1.1 一句话定义

一个由媒体内容发光、由界面框架退场的双主题媒体系统：暗色模式像安静的家庭影院控制台，亮色模式像自然采光下的媒体资料馆；两者共享内容优先、金色强调和克制的管理体验。

1.2 设计 DNA

  1. 内容即主视觉：电影海报、横版剧照、频道画面和背景图承担色彩；产品 Chrome 只使用中性灰阶。
  2. 框架主动退后：暗色模式使用分级白色，亮色模式使用分级深灰；两者都不与媒体封面竞争。
  3. 金色只表达意图：金色用于主动作、当前选择、播放进度、焦点和关键状态，不铺满大面积背景。
  4. 高密度但不拥挤：内容行可以多，单个组件却保持清楚的标题、来源、状态和操作层级。
  5. 同一品牌，多种表面：产品端、营销端、支持站共享字体性格、黑白基底和金色强调，但不共享同样的渐变强度与组件密度。
  6. 媒体操作先于装饰：播放、继续观看、搜索、筛选、服务器状态和设置必须比品牌装饰更快被识别。
  7. 主题语义保持一致：亮色与暗色只改变表面、文字、边框和阴影映射，不改变信息架构、组件尺寸、状态意义或媒体资产。

1.3 氛围标尺

维度 Product Dark Product Light 营销端 支持站
明度 2/10，影院式低明度 8/10，柔和灰白而非刺眼纯白 3–9/10，深浅交替 7/10，正文以浅色为主
密度 7/10 7/10 4/10 6/10
色彩来源 媒体封面 媒体封面 + 中性浅灰层级 海报墙、渐变、品牌金 深色 Hero + 白色正文
动效 3/10，快速且功能性 3/10，与暗色一致 5/10，可有入场与背景运动 2/10，几乎静态
圆角 小而克制 小而克制 中等或胶囊形 小到中等
阴影 短、暗、贴近表面 极淡阴影 + 细边框 柔和且范围较大 内容卡片使用轻柔大阴影

2. 表面家族

2.1 Product Surface：媒体浏览与服务器管理

用于 Plex Web App、桌面客户端、自部署服务器入口、媒体库、详情页、播放器、设置和 Dashboard。

  • 同时提供 Dark 与 Light，两种主题共享完全相同的信息架构、尺寸和组件行为。
  • 主题影响产品 Chrome，不改变海报、剧照、视频画面和品牌资产的原始色彩。
  • 固定顶部栏与可折叠左侧栏构成应用骨架。
  • 首页采用一行一个主题的横向媒体轨道；标题、来源与控制位于轨道上方。
  • 海报和剧照是唯一允许高饱和、大面积出现的内容。
  • 设置和 Dashboard 降低装饰度，增强信息与状态密度。

2.2 Product Dark Theme：影院模式

  • 背景由 #1C1C1C、#202020、#262626、#333333 形成非常低对比的径向层次。
  • 导航、标题和辅助信息使用不同透明度的白色建立层级。
  • 海报卡阴影与黑色遮罩贴近画布，适合暗室观看和视频播放。
  • 播放器、全屏图片查看器和沉浸式详情 Hero 始终以此主题为基准。

2.3 Product Light Theme：媒体资料馆模式

  • 主画布使用 #F4F5F6，而不是长时间观看容易刺眼的纯白。
  • 卡片、顶栏和弹层使用白色；层级主要由 1px 中性边框和极淡阴影表达。
  • 文字使用 #1C1C1C、#3F4245、#575B61 分级，不采用简单的黑色透明度反相。
  • 金色填充仍使用 #E5A00D；小号文字、图标和链接改用深金色 #8A5F00。
  • 详情页背景图可以保留暗色“影院岛”区域，避免在亮色画布上用白色遮罩洗掉媒体内容。
  • 播放器本身不跟随亮色主题，仍保持深色，以降低画面周围的视觉干扰。

2.4 Marketing Surface：官方产品与功能页面

用于产品介绍、Plex Media Server、Watch Free、Plans、Downloads 等页面。

  • 黑色顶栏固定品牌与一级导航。
  • Hero 使用海报墙、全宽媒体图或多色径向渐变；正文置于深色遮罩之上。
  • 桌面一级标题约为 50/64，常用单个金色主 CTA。
  • 主体允许深色、白色、紫色或渐变区段交替，但每个区段保持单一信息目的。
  • 浅色区段采用深灰正文，不把产品端的半透明白字直接带入。

2.5 Documentation Surface：支持与长文档

用于帮助中心、支持文章和部署说明。

  • 顶部继承营销站黑色导航。
  • 页面开头使用深色或紫色品牌 Hero，随后叠放白色正文容器。
  • 桌面正文采用“文章 + 目录/搜索侧栏”两列结构。
  • 内容卡片应有大块留白与弱阴影，确保长文阅读不被背景视觉干扰。
  • 代码、路径、设置名和警告需建立独立语义样式，而不是只靠粗体。

3. 颜色系统

3.1 核心品牌与产品色

令牌 值 用途 来源
brand-gold #E5A00D 主动作、当前导航、进度、重点链接、活动状态 已观察
brand-logo-gold #EBAF00 官方 Logo 内的金色符号；非官方项目不得直接复用 Logo 已观察
brand-gold-bright #F7C600 营销插画、Hero 光源和大号装饰；不用于密集产品 UI 已观察
brand-gold-pressed #CA8D0A 金色按钮按下或深色背景上的较暗状态 已观察/归一化
brand-gold-ink #8A5F00 亮色主题中的小号文字、图标、链接与选中标签 实现建议
brand-gold-subtle #FFF4D6 亮色主题选中项和金色提示的浅背景 实现建议
live-red #DC3004 LIVE 标签、直播紧急状态、录制提示 已观察
success-green #69DD58 可用、连接成功、健康状态 已观察
info-cyan #15A9FC 营销渐变、非关键提示；不得成为第二主强调色 已观察

3.2 Product Dark 层级

令牌 值 用途
app-canvas #1C1C1C 应用主画布基底
app-canvas-soft #202020 背景径向层次、内容区过渡
app-surface #262626 悬浮表面、播放器和面板
app-surface-raised #333333 菜单、弹层、强调面板
app-fallback #3F4245 图片未加载时的后备底色
topbar rgba(0, 0, 0, 0.60) 顶部应用栏
sidebar rgba(0, 0, 0, 0.15) 左侧来源导航
card-placeholder rgba(0, 0, 0, 0.45) 海报骨架与缺图占位
hover-overlay rgba(255, 255, 255, 0.10) 暗色表面的悬停反馈
scrim-strong rgba(0, 0, 0, 0.72) 详情页背景图上的文字保护层

3.3 Product Light 层级

令牌 值 用途
app-canvas #F4F5F6 亮色应用主画布，降低纯白眩光
app-canvas-soft #EEF0F2 页面分区、骨架与次级背景
app-surface #FFFFFF 卡片、设置面板、表格与控件
app-surface-raised #FFFFFF 菜单、Popover、Dialog
app-fallback #D9DDE1 图片未加载时的后备底色
topbar rgba(255, 255, 255, 0.94) 亮色顶部应用栏
sidebar rgba(255, 255, 255, 0.72) 亮色来源导航
card-placeholder #E3E6E9 海报骨架与缺图占位
hover-overlay rgba(28, 28, 28, 0.06) 浅色表面悬停反馈
selected-surface #FFF4D6 亮色选中项、金色提示浅背景
border-default rgba(28, 28, 28, 0.10) 卡片、分隔线、控件边界
scrim-strong rgba(0, 0, 0, 0.68) 暗色媒体 Hero 上的文字保护层

3.4 文本层级

令牌 深色表面 浅色表面 用途
text-primary #FFFFFF #1C1C1C 页面标题、媒体标题、关键数值
text-body #EEEEEE #3F4245 正文、设置项标题
text-secondary rgba(255,255,255,.70) #575B61 来源、说明、未选导航
text-tertiary rgba(255,255,255,.45) #6B7077 年份、剩余时间、辅助元数据
text-disabled rgba(255,255,255,.30) #9BA0A6 禁用控制、不可用状态；不得用于正文

3.5 Marketing 与 Documentation 浅色表面

令牌 值 用途
light-canvas #FFFFFF 营销正文与支持文章主背景
light-subtle #F9F9F9 输入框、次级区段
light-border #E0E3E6 分隔线、表格、输入边框
light-ink #282A2D 标题
light-body #3F4245 正文

3.6 渐变使用规则

Product Dark 只允许非常暗的背景渐变：

background:
  radial-gradient(circle farthest-side at 0% 100%, #1c1c1c 0%, transparent 100%),
  radial-gradient(circle farthest-side at 100% 100%, #262626 0%, transparent 100%),
  radial-gradient(circle farthest-side at 100% 0%, #202020 0%, transparent 100%),
  radial-gradient(circle farthest-side at 0% 0%, #333333 0%, transparent 100%),
  #000;

Product Light 默认使用平整的 #F4F5F6 画布；若需要缓解大屏幕上的平淡感，只允许加入 #FFFFFF 到 #EEF0F2 的低对比径向层次，不使用彩色渐变。

营销 Hero 可使用多色径向光源，但必须满足：

  • 至少一半区域仍保持低明度，以承载白色文字。
  • 渐变是背景氛围，不用于按钮、输入、表格或 Dashboard 卡片。
  • 同一屏最多出现一个多色渐变背景。
  • 产品内部不得使用霓虹外发光、紫色按钮或彩色描边。

3.7 对比度约束

  • 金色按钮默认使用 #1C1C1C 文本；不要在 #E5A00D 上使用小号白字。
  • #E5A00D 在白色上的对比度约为 2.24:1，因此亮色主题的小号金色文字必须使用 #8A5F00；原金色只用于填充、粗指示线和大号非文字图形。
  • 文字覆盖媒体图片时必须叠加局部黑色渐变，不能依赖图片本身“看起来够暗”。
  • 选中状态同时使用颜色与形状：例如金色文字 + 左侧 2px 指示条，不能只改变文字颜色。
  • 焦点环需在金色外增加暗色或白色隔离边，确保在海报与深色画布上都可见。

4. 字体与排版

4.1 字体家族

Plex 当前不同表面并未完全使用同一字体：产品端正文以系统字体为主，媒体标题使用 PlexCircular；watch.plex.tv 正文使用 Inter、标题使用 Circular Bold；营销站和支持站正文使用 Plexeina、标题使用 Circular Bold。

:root {
  --font-product-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-brand-display: "Circular Bold", "Manrope", "Avenir Next", sans-serif;
  --font-brand-body: "Plexeina", Inter, "Segoe UI", sans-serif;
  --font-cjk: "PingFang TC", "PingFang SC", "Noto Sans CJK TC",
    "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}
  • PlexCircular、Circular Bold、Plexeina 仅在拥有合法字体授权和文件时使用。
  • 非官方项目的首选替代：展示标题使用 Manrope，产品正文使用系统字体，营销正文使用 Inter。
  • 中日韩文本必须进入 CJK 字体回退；不要让浏览器临时拼接宋体与西文字体。

4.2 标准字阶

名称 桌面规格 移动规格 字重 用途
display-xl 50/64 36/44 700 营销 Hero 一级标题
display-lg 40/48 32/40 700 营销区段标题、产品欢迎页
page-title 24/36 22/32 400–700 设置、Dashboard、库页面标题
section-title 21/32 19/28 700 媒体行标题
body-lg 18/28 17/26 400 营销引导正文
body 16/24 16/24 400 文档与表单正文
ui 14/24 14/22 400–600 导航、筛选和常规控制
meta 13/22 13/20 400 卡片标题、来源、剩余时间
micro 12/18 12/18 400–600 徽标、图例、辅助状态

4.3 排版规则

  • 媒体产品标题优先单行，溢出使用省略号；详情页标题可两行。
  • 营销正文行宽控制在 45–65ch；支持文章控制在 68–76ch。
  • Dashboard 数字和时间使用 font-variant-numeric: tabular-nums。
  • 标题使用字重和明度建立层级，不使用全大写段落。
  • 中文标题不使用负字距；英文大标题可使用 -0.01em 到 -0.02em。

5. 空间、形状与深度

5.1 间距比例

采用 4px 基准：

4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96

  • 产品端内容主边距：桌面 40px，紧凑桌面 24px，移动 16px。
  • 顶栏与侧栏内部以 8px 和 16px 为主。
  • 横向媒体卡间距：大桌面 30–32px，普通桌面 20–24px，移动 12–16px。
  • 媒体行之间保留 56–80px，让每一行形成独立浏览单元。

5.2 圆角

令牌 值 用途
radius-xs 3px 小型设置控制、标签
radius-sm 4px 产品按钮、海报卡、顶栏容器
radius-md 8px Watch 页面卡片、菜单、输入
radius-lg 12px 营销卡片、较大模态框
radius-pill 9999px 分类 Chip、营销 CTA、搜索框

产品端不得把所有容器做成 16–32px 大圆角。Plex 的产品性格来自小圆角、暗层次和媒体图像，而不是“圆角卡片海洋”。

5.3 阴影与边框

--shadow-media: 0 0 4px rgba(0, 0, 0, 0.30);
--shadow-media-light: 0 2px 8px rgba(15, 23, 42, 0.08);
--shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.40);
--shadow-popover-light: 0 12px 32px rgba(15, 23, 42, 0.14);
--shadow-doc-card: 0 10px 30px rgba(0, 0, 0, 0.05);
--shadow-marketing: 20px 20px 40px rgba(0, 0, 0, 0.20);
--border-dark: 1px solid rgba(255, 255, 255, 0.10);
--border-light: 1px solid rgba(28, 28, 28, 0.10);
  • 暗色海报卡使用短而暗的阴影；亮色海报卡使用细边框和极淡的向下阴影，不使用漂浮式大阴影。
  • 设置页主要依赖背景明度差和分隔线，不把每组设置装进独立卡片。
  • 支持站白色正文卡可使用宽而淡的阴影，与品牌 Hero 分层。

6. 图标与媒体资产

6.1 图标

  • 产品端使用 20px 或 24px 线性图标，视觉笔画约 1.5–2px。
  • 暗色默认颜色为 rgba(255,255,255,.70)，悬停提升到 .90，选中为 brand-gold。
  • 亮色默认颜色为 #575B61，悬停变为 #1C1C1C，选中图标使用 brand-gold-ink；2px 选中指示线仍可使用原金色。
  • 同一工具栏不得混用实心、描边和不同透视角度的图标。
  • 图标按钮必须有可访问名称；Tooltip 不能替代名称。
  • LIVE、录制、播放等关键状态可使用实心图形，其他操作保持描边风格。

6.2 媒体比例

类型 比例 典型用途
横版剧照 16:9 直播节目、继续观看、集数、推荐行
海报 2:3 电影、剧集、合集
方形封面 1:1 音乐、播客、照片集合
背景图 16:9 或更宽 详情页 Hero、播放器背景
头像 1:1 用户、共享成员
  • 媒体图像必须 object-fit: cover，主体安全区尽量位于中央 70%。
  • 详情页背景图使用渐隐遮罩连接到画布，不出现生硬矩形底边。
  • 图片加载中使用同尺寸骨架，不让布局跳动。
  • 暗色缺图状态使用深灰后备面；亮色使用 #D9DDE1。两者都显示媒体类型图标，禁止使用随机彩色渐变。

7. 应用骨架与导航

7.1 桌面 Product Shell

当前公开 Plex Web App 在 1363px 宽视口中呈现：64px 顶栏、260px 展开侧栏、主内容从 x=308px 起始，即侧栏后保留约 40px 内容边距。

Top bar: 64px fixed
Sidebar: 260px expanded / 72px compact
Main start: sidebar + 40px
Main right padding: 32–40px

7.2 顶部栏

从左到右：侧栏折叠/主页、品牌标志、全局搜索、账户或注册动作、工具/设置、播放器选择、用户菜单。

  • 高度 64px，外侧可保留 8px 安全边距。
  • 搜索框在桌面可达约 480px，胶囊形；暗色背景为 rgba(255,255,255,.10)，亮色背景为 #EEF0F2 并带 rgba(28,28,28,.08) 边框。
  • 普通图标按钮约 56×40px；可见交互区域不得小于 40px。
  • 账户主动作使用金色填充与深色文字，圆角 4px。
  • 顶栏在内容滚动时保持固定。暗色使用黑色半透明；亮色使用 rgba(255,255,255,.94)、底部细边框和最多 12px 的中性模糊，不使用彩色玻璃效果。

7.3 左侧来源导航

  • 展开宽度 260px，每项高度 40px。
  • 图标、标签与可选计数保持左对齐。
  • 暗色选中项使用原金色图标/文字；亮色选中项使用 #FFF4D6 背景、#8A5F00 图标/文字，并在最左侧显示 2px 原金色指示条。
  • 来源可固定、取消固定与排序；官方 Plex Web 支持用户重排和定制侧栏。
  • 服务器、在线内容、个人媒体和管理入口应分组，不混成单一长列表。
  • 折叠时只保留图标，并为每个图标提供 Tooltip 和可访问名称。

7.4 移动导航（实现建议）

  • 顶栏高度 56px，保留 Logo、搜索入口与账户入口。
  • 一级导航改为底部栏或抽屉，最多展示 4 个高频项 + “更多”。
  • 服务器管理与低频设置放入抽屉，不与播放入口争夺底栏空间。
  • 触控目标至少 44×44px。

8. 核心组件

8.1 全局搜索

  • 默认状态低对比，聚焦时提高表面与边框对比。暗色显示金色/白色双层焦点环，亮色显示深金色/白色双层焦点环。
  • 搜索范围可包括服务器、个人媒体和在线提供方；范围切换必须清楚显示。
  • 输入后在 100–200ms 内呈现结果框架；网络结果使用骨架而不是整页 Spinner。
  • 结果按“媒体、人物、来源、设置”分组；键盘上下键可浏览，Enter 打开。
  • 空结果提供可执行建议，如检查拼写、切换服务器或修改筛选。

8.2 媒体轨道 / Carousel

  • 每一轨道由标题、来源标签、可选“查看全部”和左右翻页组成。
  • 桌面横版卡参考尺寸 360×202px，保持 16:9；海报轨道保持 2:3。
  • 翻页按钮位于轨道标题右侧，禁用态透明度约 .15–.30。
  • 鼠标滚轮不应劫持整页纵向滚动；触控端使用原生水平滑动和 Scroll Snap。
  • 键盘聚焦卡片时，轨道自动滚动到完整可见位置。

8.3 媒体卡片

结构顺序：

  1. 媒体图像
  2. 角标或选择控件
  3. 播放进度/直播进度
  4. 主标题
  5. 年份、季集、剩余时间或来源

样式：

  • 产品端圆角 4px。暗色阴影为 0 0 4px rgba(0,0,0,.30)；亮色使用 rgba(28,28,28,.10) 边框和 0 2px 8px rgba(15,23,42,.08) 阴影。
  • 标题 13/24：暗色为白色，亮色为 #1C1C1C；元数据 13/20–22：暗色白色 45%，亮色 #6B7077。
  • 进度条固定在图片底部，已播放部分为 brand-gold，高度 3px。
  • LIVE 标签为 live-red，位于右上角，使用 12px 半粗体白字。
  • Hover 可将图片放大至 1.015 并提升遮罩，时长 160–200ms；不得造成相邻卡片重排。
  • Focus 使用 2px 外环与 2px 间隔，不能只依赖阴影。
  • 多选模式在左上角显示显式选择圆点；进入多选后顶部动作栏切换为批量操作。

8.4 分类 Chip

  • 高度 40px 左右，水平内边距 16px，胶囊形。
  • 暗色默认 rgba(255,255,255,.10)，悬停 .16，选中可使用白底深色字或金色描边。
  • 亮色默认 #E8EAED，悬停 #DDE0E4，选中使用 #FFF4D6 背景、#8A5F00 文字和 rgba(138,95,0,.24) 边框。
  • Chip 只用于类型、流派和短筛选；不要把普通导航和所有按钮都做成胶囊。
  • 一行放不下时优先横向滚动，不压缩文字。

8.5 主按钮与次级按钮

类型 暗色主题 亮色主题 文本 形状 用途
Primary Product #E5A00D #E5A00D #1C1C1C 4px 保存、播放、确认关键动作
Primary Marketing #E5A00D #E5A00D #1C1C1C 胶囊 注册、开始观看、下载
Secondary 白色 10% #FFFFFF + 灰色边框 主题主文字 4px 次级操作
Ghost 透明 透明 主题次级文字 4px 工具栏、低频动作
Destructive #DC3004 #B42318 白色 4px 删除、断开、停止录制
  • 按钮 Hover 提升 6–10% 明度，Pressed 下移 1px 或缩放到 .98。
  • Disabled 降低到 30–40% 视觉强度并移除阴影；仍保留可读标签。
  • 同一视区最多一个主要金色 CTA。

8.6 详情页 / Pre-play Screen

官方 Plex 详情页用于展示媒体信息和播放、Shuffle、Trailer、Playlist、Watched 等动作。

  • 使用全宽背景图，底部与左侧叠加深色渐变。
  • 前景内容按“标题 → 元数据 → 摘要 → 主动作 → 次级动作”排列。
  • 主播放按钮使用金色；更多动作收进省略号菜单。
  • 电影海报可在桌面左侧出现，移动端改为小比例封面或隐藏，避免挤压摘要。
  • 演员、相关内容和季集列表放在 Hero 下方，回到当前主题画布。
  • 亮色主题仍保留暗色媒体 Hero：Hero 内使用白色文字和暗色 Scrim，Hero 下方再过渡到 #F4F5F6。不要把背景图整体漂白。
  • 摘要最大宽度 65ch；长简介提供展开，不让首屏被文本占满。

8.7 设置表单

当前公开 Plex Web 设置页采用双栏设置导航、24/36 页面标题、13px 标签和紧凑控件。部分下拉框与复选框仍呈现浏览器原生外观；新实现应保留密度，但统一视觉。

  • 桌面采用设置侧栏 + 主内容，内容最大宽度约 980px。
  • 每个设置项包含标签、控件、帮助文本；帮助文本使用三级文字色。
  • 高风险或低频项放入“Advanced”，默认折叠。
  • Select、Checkbox、Switch 必须使用语义令牌统一样式，并分别验证暗色与亮色；不得沿用浏览器原生外观。
  • 保存按钮只在存在更改时启用；离开未保存页面时明确提醒。
  • 异步保存使用按钮内进度与成功 Toast，不遮挡整页。

8.8 菜单、Popover 与 Dialog

  • Popover 背景使用当前主题的 app-surface-raised，圆角 8px。暗色使用白色 10% 边框和 shadow-popover；亮色使用深色 10% 边框和 shadow-popover-light。
  • 菜单项高度 40px；危险项在分隔线后出现并使用红色文字/图标。
  • Dialog 宽度按内容选择 420、560 或 720px，不使用任意宽度。
  • Dialog 背景遮罩暗色为 rgba(0,0,0,.72)，亮色为 rgba(28,28,28,.42)；焦点必须锁定在 Dialog 内。
  • 关闭按钮、Esc、取消和确认行为保持一致。

8.9 Toast、警告与空状态

  • Toast 出现在右上角或底部安全区，不覆盖播放器关键控制。
  • 成功信息 4–6 秒后消失；错误信息保留至用户处理或主动关闭。
  • 空媒体库应解释原因并提供“添加媒体库”“扫描”或“检查文件夹”的下一步。
  • 连接失败、无权限、服务器离线和内容不可用必须是不同状态，不能统一写成“出错了”。
  • 亮色主题的成功、警告、错误文字分别使用深绿、深金和深红；不要直接把暗色主题的高亮荧光色放到白底上。

8.10 Skeleton 与加载

  • 骨架严格匹配最终卡片尺寸，背景使用当前主题的 card-placeholder；亮色 Shimmer 从 #E3E6E9 过渡到 #F7F8F9。
  • 当前 Web App 可观察到约 600ms 的海报 Shimmer；推荐在 600–900ms 内循环。
  • 首屏优先加载导航、标题和前 1–2 行媒体；后续轨道懒加载。
  • 不为整个媒体首页使用居中圆形 Spinner。

9. 服务器管理与 Dashboard

9.1 信息架构

官方支持文档把 Server Status 分为三类：

  1. Dashboard
  2. Alerts
  3. Conversions

Dashboard 的主要信息包括正在播放、带宽使用、热门用户、播放历史等；Activity 图标在扫描、转换或播放发生时显示金色状态和数量徽标。

9.2 Dashboard 布局

  • 第一屏优先展示服务器名称、连接/远程访问状态和 Now Playing。
  • 第二层展示带宽与转码趋势图。
  • 第三层展示热门用户、设备、内容和播放历史。
  • 卡片只用于独立监控单元；设置项和普通列表继续使用分隔线布局。
  • 暗色图表背景与画布同色，网格线使用白色 8–10%，主序列使用原金色，辅助序列使用灰白。
  • 亮色图表使用白色表面、深色 8–10% 网格线；主序列的线、点和小号图例文字使用 #8A5F00，大面积填充可使用 rgba(229,160,13,.16)。
  • 亮色 Dashboard 卡片优先用边框分组，只有 Now Playing、告警等真正独立的监控单元才增加阴影。
  • 实时状态应显示最后更新时间，并提供暂停刷新或手动刷新。

9.3 Now Playing 卡

  • 显示封面、标题、用户、设备、位置、本地/远程、播放方式和进度。
  • Direct Play、Direct Stream、Transcode 使用文字标签，不只靠颜色。
  • 转码中可展示目标分辨率与速率，但不要把所有技术字段暴露在默认视图。
  • 管理操作（停止播放等）放在二级菜单，并在执行前确认影响。

9.4 状态语义

状态 表达
健康/可访问 绿色图标 + 明确文字
正在扫描/转换 金色活动图标 + 进度或旋转边线
警告 金色/橙色图标 + 可执行建议
错误/断开 红色图标 + 原因 + 重试/诊断入口
未知 灰色图标 + 最后成功时间

亮色主题下，语义文字使用更深的映射：成功 #237A32、警告 #8A5F00、错误 #B42318、信息 #0B65C2。原来的高亮色可继续用于图标填充、状态点和徽标背景。

10. 页面模板

10.1 Home / Discover

  1. Product Shell
  2. 页面标题或个性化问候
  3. 继续观看/正在直播
  4. 用户固定的推荐行
  5. 最近添加、热门、分类行
  6. 懒加载的后续内容

首页不使用传统营销 Hero。媒体行本身就是首页内容。

10.2 Library

  1. 库名称、服务器来源和更多操作
  2. Recommended / Library / Collections / Playlists 等页签
  3. 筛选、排序、视图密度、项目计数
  4. 海报网格或列表
  5. 多选动作栏
  • 筛选与排序保持在顶部库工具栏。
  • 网格密度调整应连续且可预览。
  • 当前筛选条件以可移除的条件摘要显示，不把所有条件塞入 Chip 行。

10.3 Media Details

使用第 8.6 节的 Pre-play 结构，并保证播放主动作始终位于首屏。

10.4 Settings

  1. 全局顶栏
  2. 设置分类侧栏
  3. Appearance 中的 System / Light / Dark 三态主题设置
  4. 页面标题与 Advanced 控制
  5. 分组设置项
  6. Sticky 保存区或页尾保存按钮

10.5 Server Dashboard

  1. 服务器选择与状态摘要
  2. Now Playing
  3. Bandwidth / Transcoding
  4. Users / Devices / Locations
  5. History / Alerts / Conversions

10.6 Marketing Landing Page

  1. 黑色品牌顶栏
  2. 全宽媒体或渐变 Hero
  3. 左对齐标题、短正文、单主 CTA
  4. 浅色核心利益区
  5. 产品截图/硬件/步骤区段
  6. 计划或注册 CTA
  7. FAQ 与完整 Footer

10.7 Support Article

  1. 黑色品牌顶栏
  2. 深色品牌 Hero + 页面类型标题
  3. 与 Hero 叠放的白色文章卡
  4. Breadcrumb
  5. 文章正文 2/3 + 搜索/目录 1/3
  6. 相关文章、反馈和 Footer

11. 响应式规则

11.1 断点

断点 规则
< 640px 手机；单列、16px 边距、抽屉/底栏导航
640–899px 大手机/平板；紧凑轨道、侧栏默认折叠
900–1199px 小桌面；72px 侧栏、24px 内容边距
1200–1599px 标准桌面；260px 侧栏、40px 内容边距
>= 1600px 大屏；侧栏保持，增加同时可见卡片而非无限放大卡片

11.2 Product Surface

  • 侧栏在 1200px 以下默认折叠，在 900px 以下变为抽屉。
  • 媒体轨道保持横向，不在移动端强制改成巨长单列。
  • 横版卡移动端宽度为视口的 72–82%，让下一张露出一部分以提示可滑动。
  • 设置页在 900px 以下将设置分类移入顶部选择器或抽屉；表单改为标签在上、控件在下。
  • Dashboard 在小屏按“状态 → Now Playing → 警告 → 图表 → 历史”重排。

11.3 Marketing 与 Support

  • Hero 标题使用 clamp(2.25rem, 4vw, 3.125rem)。
  • Hero 在移动端加强背景遮罩并取消左右分栏。
  • 营销利益点从四列改为两列，再改为单列。
  • 支持文章在 900px 以下取消侧栏，目录改为可展开的页内控件。
  • 任何断点都不允许横向页面滚动。

11.4 TV / 10-foot UI（实现建议）

  • 所有内容进入 5% Overscan 安全区。
  • 字体与交互目标相对桌面放大 1.25–1.4 倍。
  • 遥控器焦点必须比 Hover 更明显：3px 高对比外环 + 轻微放大。
  • 轨道翻页以焦点移动驱动，不能依赖鼠标箭头。

12. 动效与反馈

当前产品端主要使用 100ms 和 200ms 的颜色过渡、300ms 的局部 Transform、600ms 的海报骨架 Shimmer。

场景 时长 曲线 规则
Hover/颜色 100–200ms ease 快速、低幅度
侧栏展开 200ms cubic-bezier(.4,0,.2,1) 内容同步让位，不覆盖关键信息
卡片聚焦 160–220ms ease-out 最大缩放 1.015–1.03
Popover/Dialog 180–240ms ease-out opacity + transform
页面/区段入场 240–360ms ease-out 产品端只在首次进入使用
Skeleton Shimmer 600–900ms linear 持续循环，低对比
Theme Change 150–200ms ease 只过渡颜色、边框与阴影；媒体图像不动画
  • 只动画 transform 与 opacity，侧栏宽度属于必要的布局例外。
  • 不使用弹跳、霓虹脉冲、持续漂浮或背景粒子。
  • 扫描/转换的旋转状态只在活动发生时出现。
  • prefers-reduced-motion: reduce 下移除缩放、位移与自动轮播，仅保留即时颜色反馈。
  • 首次加载时禁止播放主题切换动画；只有用户主动切换主题时才使用短暂颜色过渡。

13. 可访问性

  • 目标为 WCAG 2.2 AA。
  • 所有产品操作可通过键盘完成；焦点顺序与视觉顺序一致。
  • 媒体轨道的左右控制、页数变化和加载结果需向辅助技术播报。
  • 播放进度、直播状态、转码状态不能只通过颜色表达。
  • 图表提供文字摘要或同数据表格；Tooltip 不能是唯一数据入口。
  • 图片替代文本描述内容标题和图片功能，不重复相邻可见标题。
  • 默认桌面点击目标至少 40px，触控目标至少 44px。
  • 视频控制必须支持字幕、音轨和键盘快捷键，并明确当前选择。
  • 背景图上的正文在最不利图片上也要保持 4.5:1 对比度。
  • 暗色与亮色必须分别进行对比度测试；通过暗色测试不代表亮色映射也合格。
  • 亮色主题中 #E5A00D 不得作为普通文字色；小号金色文字使用 #8A5F00。
  • 系统主题自动改变时，不移动焦点、不关闭菜单、不重置表单或滚动位置。
  • 错误提示与对应控件程序化关联，焦点在提交失败后移动到错误摘要或首个错误项。

14. 内容语气与微文案

14.1 语气

  • 产品端：短、直接、动作导向。
  • 营销端：轻松、自信、带娱乐感，但不牺牲信息准确性。
  • 管理端：明确、可诊断、避免拟人化模糊描述。
  • 支持站：先给结论，再给步骤与例外。

14.2 文案规则

  • 按钮使用动词：播放、继续观看、扫描媒体库、保存更改。
  • 不使用泛化的 确认，除非上下文已经明确动作。
  • 状态写出对象：电影库扫描中，不要只写 处理中。
  • 错误同时包含发生了什么、可能原因和下一步。
  • 不制造虚假的播放量、性能、用户数或服务器健康数据。

15. 统一令牌参考

:root {
  /* Brand primitives: never change by theme */
  --color-brand: #e5a00d;
  --color-brand-logo: #ebaf00;
  --color-brand-bright: #f7c600;
  --color-brand-pressed: #ca8d0a;
  --color-brand-ink: #8a5f00;
  --color-brand-subtle: #fff4d6;
  --color-on-brand: #1c1c1c;

  /* Geometry */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Motion */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-standard: ease;
  --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
}

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: #1c1c1c;
  --color-canvas-soft: #202020;
  --color-surface: #262626;
  --color-surface-raised: #333333;
  --color-surface-fallback: #3f4245;
  --color-topbar: rgba(0, 0, 0, 0.60);
  --color-sidebar: rgba(0, 0, 0, 0.15);
  --color-placeholder: rgba(0, 0, 0, 0.45);
  --color-hover: rgba(255, 255, 255, 0.10);
  --color-selected: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-scrim: rgba(0, 0, 0, 0.72);

  --color-text-primary: #fff;
  --color-text-body: #eee;
  --color-text-secondary: rgba(255, 255, 255, 0.70);
  --color-text-tertiary: rgba(255, 255, 255, 0.45);
  --color-text-disabled: rgba(255, 255, 255, 0.30);
  --color-accent-ink: #e5a00d;
  --color-link: #e5a00d;
  --color-focus: #e5a00d;

  --color-live: #dc3004;
  --color-success: #69dd58;
  --color-warning: #e5a00d;
  --color-danger: #dc3004;
  --color-info: #15a9fc;

  --shadow-media: 0 0 4px rgba(0, 0, 0, 0.30);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.40);
  --shadow-doc-card: 0 10px 30px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] {
  color-scheme: light;

  --color-canvas: #f4f5f6;
  --color-canvas-soft: #eef0f2;
  --color-surface: #fff;
  --color-surface-raised: #fff;
  --color-surface-fallback: #d9dde1;
  --color-topbar: rgba(255, 255, 255, 0.94);
  --color-sidebar: rgba(255, 255, 255, 0.72);
  --color-placeholder: #e3e6e9;
  --color-hover: rgba(28, 28, 28, 0.06);
  --color-selected: #fff4d6;
  --color-border: rgba(28, 28, 28, 0.10);
  --color-scrim: rgba(0, 0, 0, 0.68);

  --color-text-primary: #1c1c1c;
  --color-text-body: #3f4245;
  --color-text-secondary: #575b61;
  --color-text-tertiary: #6b7077;
  --color-text-disabled: #9ba0a6;
  --color-accent-ink: #8a5f00;
  --color-link: #8a5f00;
  --color-focus: #8a5f00;

  --color-live: #dc3004;
  --color-success: #237a32;
  --color-warning: #8a5f00;
  --color-danger: #b42318;
  --color-info: #0b65c2;

  --shadow-media: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-popover: 0 12px 32px rgba(15, 23, 42, 0.14);
  --shadow-doc-card: 0 10px 30px rgba(15, 23, 42, 0.08);
}

所有组件只能消费语义令牌，例如 --color-surface、--color-text-primary、--color-accent-ink；组件文件中不得直接判断主题并硬编码另一组颜色。媒体图片、Logo 和直播徽标等固定资产除外。

16. 双主题切换与实现约束

16.1 主题模式

设置中提供三个明确选项：

模式 行为
System 跟随 prefers-color-scheme，系统变化时实时更新
Light 固定使用 Product Light
Dark 固定使用 Product Dark
  • 首次访问默认使用 System；无法检测时回退到 Dark。
  • 用户显式选择的设备偏好优先于系统设置。
  • 如果账号支持同步，可把账号主题作为“新设备默认值”，但设备上的显式选择仍拥有最高优先级。
  • 设置入口位于 Settings → Appearance；账户菜单可提供快速 Light/Dark 切换，但完整三态选择必须留在设置中。

16.2 首屏与持久化

  • 在应用框架和主 CSS 绘制前确定 data-theme，避免先亮后暗或先暗后亮的闪烁。
  • 主题优先级：设备显式选择 → 账号默认值 → 系统偏好 → Dark 回退。
  • 浏览器使用 localStorage 或同等同步读取机制保存首屏所需偏好；登录后再与账号默认值协调。
  • 同步主题不得重建页面、重置路由、滚动位置、焦点、播放器状态或未保存表单。
  • 同时设置 color-scheme，让滚动条、日期控件和浏览器原生表单与主题一致。

16.3 主题切换控件

  • 三态控件使用 System / Light / Dark 文本和显示器/太阳/月亮图标，不能只显示图标。
  • 当前选择同时用背景、文字和 Check 标识；不能只改变金色。
  • 快捷按钮若只在 Light/Dark 间切换，Tooltip 和可访问名称必须描述“切换到亮色主题”或“切换到暗色主题”。
  • 系统模式下，控件既显示 System，也可在辅助文字中说明当前实际使用 Light 或 Dark。

16.4 混合表面例外

以下区域无论全局主题为何，都使用 Dark 媒体表面：

  • 视频播放器与全屏播放控制
  • 图片全屏查看器
  • 以背景剧照承载白色标题的详情 Hero
  • 需要精确观看画面亮度、字幕和色彩的预览区域

混合表面边界通过渐变、1px 中性边框或明确容器区分，不能让暗色区域看起来像主题切换失败。

16.5 主题过渡

  • 用户主动切换时，只对背景色、文字色、边框色和阴影执行 150–200ms 过渡。
  • 海报、剧照、视频、Logo、图表数据和进度位置不得淡出或重新加载。
  • 初次加载、路由切换和系统自动切换时默认不播放全页过渡。
  • prefers-reduced-motion: reduce 下即时切换。

16.6 主题一致性矩阵

元素 Dark Light
画布 #1C1C1C 暗径向层次 #F4F5F6 平整柔和灰白
顶栏 黑色 60% 白色 94% + 底边框
侧栏 黑色 15% 白色 72% + 右边框
主文字 白色 #1C1C1C
金色文字/图标 #E5A00D #8A5F00
金色填充/进度 #E5A00D #E5A00D
选中导航 金色文字 + 金色线 浅金背景 + 深金文字 + 金色线
卡片深度 暗短阴影 细边框 + 极淡阴影
Skeleton 黑色 45% #E3E6E9
播放器 Dark Dark

17. 禁止模式

  • 不把产品端做成紫蓝霓虹 Dashboard。
  • 不在所有容器上使用大圆角、玻璃拟态和外发光。
  • 不让金色同时承担主动作、警告、成功和普通装饰。
  • 不在金色按钮上放低对比的小号白字。
  • 不在亮色画布上使用 #E5A00D 作为小号文字、链接或细图标颜色。
  • 不用 CSS filter: invert() 或颜色反相生成亮色主题。
  • 不对海报、剧照、视频帧和品牌 Logo 应用主题滤镜。
  • 不让亮色主题退化成纯白背景 + 黑色边框；必须保留柔和画布、白色表面和浅灰层级。
  • 不把营销 Hero 的多色渐变带入设置页和服务器 Dashboard。
  • 不用三列同尺寸营销卡片替代媒体轨道、步骤或真实产品截图。
  • 不在媒体卡片上常驻大量操作按钮；默认隐藏低频动作。
  • 不使用整页 Spinner、自动跳动的 Carousel 或无法停止的背景视频。
  • 不照搬 Plex Logo、专有字体文件、宣传图或受版权保护的截图。
  • 不用“Netflix 风”“Plex 风”作为唯一实现说明；必须落实为本文的具体令牌与组件规则。

18. 实现验收清单

18.1 视觉

  • 暗色背景保持中性深灰，亮色背景保持柔和灰白；两种主题的主要色彩都来自媒体内容。
  • 金色只用于主动作、选中、进度和活动状态。
  • 亮色小号金色文字使用 #8A5F00，没有直接使用低对比的 #E5A00D。
  • Product、Marketing、Documentation 三类表面没有混用组件语言。
  • 海报、横图、方形封面的比例与裁切一致。
  • 产品端圆角以 4px 为主，没有过度卡片化。
  • Player、全屏查看器和详情媒体 Hero 在 Light 模式下仍保持 Dark 媒体表面。

18.2 交互

  • 顶栏、侧栏、媒体轨道和设置导航具有完整键盘路径。
  • Hover、Focus、Selected、Pressed、Disabled、Loading 均有独立状态。
  • Carousel 支持鼠标、触控、键盘和遥控器中的目标平台输入。
  • 保存、删除、扫描、转换和断开等异步动作有明确反馈。
  • System、Light、Dark 三态可选择、持久化并正确跟随系统变化。
  • 主题切换不重置路由、焦点、滚动、播放或未保存表单。

18.3 响应式

  • 1200px 以下侧栏正确折叠，900px 以下变为抽屉或替代导航。
  • 移动端媒体轨道可横向滑动且不会造成页面横向溢出。
  • 设置、Dashboard 和支持文章按优先级重排，而非简单缩放。
  • 320px 宽度下无截断的关键动作。

18.4 可访问性

  • 正文、按钮、图片覆盖文字满足 AA 对比度。
  • 焦点在暗色画布、亮色画布和高饱和海报上都清楚可见。
  • Dark 与 Light 分别通过对比度检查，没有把单一主题的结果当作两者结果。
  • 状态不只依赖颜色。
  • Reduced Motion、屏幕阅读器和 200% 缩放通过测试。
  • 图表存在文字或表格等价信息。

19. 官方研究来源

Plex 当前公开 Product Surface 主要为暗色界面，因此本文的 Product Dark、信息架构和交互规律来自下列官方来源；Product Light 是在不改变这些结构与品牌规律的前提下完成的实现建议，不声称为 Plex 官方已发布主题。

当前公开产品与品牌页面

  • Plex Web App — Product Shell、导航、媒体轨道、设置与当前公开样式；本次公开状态显示 Web App 4.160.0。
  • Watch Plex — 当前公开浏览首页、分类 Chip、横向媒体卡、直播状态与渐变背景。
  • Personal Media Server — Plex Media Server 营销 Hero、字体、金色 CTA 与多色径向背景。
  • Watch Free — 海报墙 Hero、黑色顶栏、浅色利益区与营销排版。
  • Media Server Downloads — 下载流程和平台选择场景。

官方产品结构与行为文档

20. 最终设计指令

当设计或生成新页面时，始终先确定它属于 Product、Marketing 还是 Documentation。若是媒体浏览或服务器管理，再确定当前为 Product Dark 或 Product Light：两者共享结构、小圆角、金色功能强调和海报驱动内容，只切换语义令牌；若是营销页面，允许全宽媒体与多色 Hero，但保持单一主 CTA；若是支持内容，优先白色阅读表面、清楚目录和低干扰品牌背景。

无论哪种表面，都应让用户首先看见内容或任务，其次看见状态与动作，最后才感知品牌装饰。