随时随地在家在宽屏上畅享您喜爱的电影、电视剧、音乐等。
资源
类型 | 链接 | 状态 |
---|---|---|
设计 | 设计源(Figma) | 可用 |
Inter(Google 字体) | 可用 | |
实现 | Jetpack Compose(Github) | 可用 |
主题
颜色主题
颜色主题是使用 Material Design 3 主题生成器生成的。

排版
JetStream 的字体比例使用 Inter 字体,为电视屏幕创造简洁明了的外观。

形状
卡片和按钮应用了细微的圆角,以创建友好且易于接近的边缘。

焦点
JetStream 使用 3dp 外轮廓和外轮廓颜色。

首页
首页
JetStream 应用的登录页面。

特色轮播
带有卡片式布局的轮播。

内容行
JetStream 使用标准卡片样式,纵横比为 2:3,采用 5 列布局。

沉浸式列表
使用沉浸式列表组件突出显示应用中的特殊内容,例如前 10 名热门电影。

类别
类别
类别页面以网格格式显示流派,方便导航和访问。

类别卡片

类别详细信息
使用带有标题的 2:3 卡片网格创建类别详细信息页面。

媒体
电影
标准电影选项卡,顶部有 16:9 特色卡片,底部有内容网格。

剧集

资料库
收藏夹
收藏夹选项卡在屏幕顶部包含筛选芯片,以便快速搜索内容。

搜索
搜索登录
搜索页面包含一个搜索栏,其中包含根据最近搜索生成的建议搜索查询。

活动搜索
当用户将焦点放在搜索栏上时,键盘会弹出,并且下面的结果会随着用户输入而动态更新。

实体详细信息
详细信息登录
详细信息页面以电影视图呈现,并提供简要的情节摘要和一个醒目的号召性用语按钮以观看电影。

演员和剧组
演员和剧组部分包含一行经典卡片,其中包含标题和描述,每个卡片都附带 2:3 的图像资产。

评分
评分部分包含一个自定义经典宽卡片,其中包含其他信息。

播放
视频播放器
符合最佳实践的标准视频播放器。

视频播放器设置
视频播放器上的隐藏字幕弹出窗口。

设置
帐户设置
帐户页面布局采用双列设计,左侧是列表组件,右侧是自定义卡片组件,以网格格式排列。

删除帐户对话框
对话框以对比色背景设计,使其在屏幕上脱颖而出。对话框中的两个按钮都左对齐,以保持简洁有序的外观。

关于
“关于”部分包含一个右侧面板,其中包含一个可滚动的文本视图。

字幕设置
使用列表组件显示字幕下的各种设置,并使用开关或标签等操作。

历史记录
搜索历史记录使用布局显示之前搜索的查询列表,以及清除所有搜索历史记录的选项。

帮助
“帮助和支持”部分使用自定义列表组件显示各种选项,包括联系信息和常见问题解答。
