首页 Hero · 全幅淡化效果图(v3:三向淡化 + 文案块整体缩小一档)

参照 Hills 首页形态:右侧内容区顶部全幅大海报、上/左/下三向渐隐进背景;左侧边栏完整保留(导航 + 服务器 + 版本号),不是无边栏全屏海报。v3 改动:顶部与左侧新增淡化带(各约 18%、多段缓动、终点精确同色),文案块整体再缩小一档(字标 44px、年份行 12px、简介 11px、块宽约 36%),右下角位置不变;轮播点在左下角避让。画面为纯 CSS 渐变示意场景,未使用任何真实影视剧照或海报图。

顶部淡化带 18% 左侧淡化带 18% 底部淡化带 55%
星渊夜航
2026 · 剧集 · 科幻 / 冒险 · 全 12 集
一支远航船队在星渊边缘捡到一段无人认领的航行日志,日志里的坐标指向一片从未标注过的星域,而船员们的名字,正一个接一个出现在日志的乘客名单上……
TMDB 8.2

继续观看

查看全部 ›
星渊夜航 · 第 4 集

看到 21:36 · DS218

雾港旧事 · 第 2 集

看到 12:04 · hohai 公益

长安夜话 · 第 9 集

看到 33:17 · nyamedia

山野来信 · 第 1 集

看到 04:52 · DS218

图 1 · 新版全幅 Hero(v3,完整应用窗):左侧边栏完整保留(宽 230px:NovaPlayer Logo、发现/日历/资源库/成人专区/设置、分隔线、「我的服务器」nyamedia·主 / hohai公益 / DS218、底部版本号);右侧内容区顶部海报顶满整宽、无圆角卡片边框。四边淡化(上/左/下三向,右沿贴窗边不淡化):底部淡化口径不变(渐变终点 = 背景精确同色 #05070a(不透明度 1.0)+ 底部 64px 同色实底,渐隐带为海报高度 55%、多段缓动 stops(0/.18/.42/.66/.85/.96/1.0),另叠一层底部整体压暗,Hero 底部 20px 与内容区背景色值差为 0、到最后无色差);顶部淡化带约占海报高度 18%、左侧淡化带约占海报宽度 18%,均用多段缓动、终点为不透明度 1.0 的背景精确同色(顶部终点 #05070a 与顶栏底色一致、左侧终点 #0b0d11 与边栏底色一致),终点之外即顶栏/边栏同色区、相当于实底延续;主图上已用金色虚线小标签标出三条淡化带的位置。文案块整块贴右下角(右留白 44px,不贴边),整体再缩小一档:字标从 56px 降到 44px、年份行从 14px 降到 12px、简介从 12px 降到 11px、块宽从约 40% 收窄到约 36%,层级不变(字标仍最大、简介仍最小);轮播点在左下角,避免与右下文案重叠;下方紧接「继续观看」一行。

现行:圆角卡片 Hero

圆角 + 边框
海报被框在卡片里,底部一条硬边
  • 海报四边留白、带圆角和描边
  • 底部与背景之间有明显分界线
  • 文案位置偏中上,视觉重心高
  • 左侧边栏完整保留(不变项)

新版:全幅淡化 Hero

全幅 + 渐隐
海报铺满,底部渐隐融入背景
  • 去卡片边框,海报顶满整宽
  • 上/左/下三向渐变淡化,无硬边、无分界线
  • 右沿贴窗边不淡化
  • 文案下沉到底部,贴近轮播点
  • 左侧边栏完整保留(不变项,不做无边栏全屏海报)

图 2 · 结构对比:三处差异一次看清 — 去卡片边框、底部渐隐、文案下沉。淡化实现口径(给后续真机开发留档):渐隐带高度为海报 55%、多段缓动 stops、渐变终点为不透明度 1.0 的背景精确同色 #05070a、终点之下再垫 64px 同色实底,底部 20px 与背景色值差为 0,到最后无色差;轮播点落在同色实底区内,始终可读。

改前:左下文案 + 大字简介

星渊夜航

一支远航船队在星渊边缘捡到一段无人认领的航行日志,日志里的坐标指向一片从未标注过的星域……

TMDB 8.2
  • 文案块贴左下、简介 14px、占宽约 52%
  • 简介在画面里占比大,抢海报视觉
  • 轮播点居中,离文案较近

改后:右下角 + 文案块整体缩小一档

星渊夜航

一支远航船队在星渊边缘捡到一段无人认领的航行日志,日志里的坐标指向一片从未标注过的星域……

TMDB 8.2
  • 文案块整块贴右下、整体缩小一档(字标 44px、年份行 12px、简介 11px、占宽约 36%)
  • 简介占比明显变小,海报画面更透
  • 轮播点移左下,与右下文案互不重叠

图 3 · 文案改前 / 改后:左图是 v1 的左下大字简介,右图是 v3 的右下角整体缩小一档文案 — 不止简介,字标、年份行、徽章全套等比收小一档(字标 44px、年份行 12px、简介 11px、块宽约 36%),层级不变;轮播点在底部左下角,两边都不打架。

静态预览,非成品:画面、片名、评分均为示意;最终实现以 NOVX 实际数据为准。效果图确认后,再进 1.13.0 开发。