Skip to content

KTV UI 结构线框说明

这份文档给的是页面结构图,不替代尺寸文档。尺寸和颜色以 ui_rebuild_spec.md 为准。

1. 首页宽屏

text
+----------------------------------------------------------------------------------+
|                                 顶部工具栏                                       |
|  金调KTV                                             搜索 已点 原唱/伴唱 切歌 ... |
+----------------------------------------------------------------------------------+
|                                                                                  |
|    +----------------------------------+   +----------------------------------+   |
|    |                                  |   | 排行榜 | 歌名                   |   |
|    |                                  |   +----------------------------------+   |
|    |           16:9 预览区            |   | 歌星   | 本地                   |   |
|    |      视频 / fallback / 状态层     |   +----------------------------------+   |
|    |                                  |   | 收藏   | 常唱                   |   |
|    +----------------------------------+   +----------------------------------+   |
|                     底部进度条                                              |
|                                                                                  |
+----------------------------------------------------------------------------------+

2. 首页紧凑

text
+------------------------------------------------------+
| 金调KTV                                              |
|                              搜索 已点 原唱/伴唱 ... |
+------------------------------------------------------+
|                                                      |
|                  16:9 预览区                          |
|                                                      |
|------------------------------进度条-------------------|
|                                                      |
|   排行榜                歌名                          |
|   歌星                  本地                          |
|   收藏                  常唱                          |
|                                                      |
+------------------------------------------------------+

3. 点歌页宽屏

text
+----------------------------------------------------------------------------------+
|                                                                                  |
|  +--------------------------+   +---------------------------------------------+  |
|  |                          |   | 已点 原唱/伴唱 切歌 播放/暂停 重唱          |  |
|  |       左侧小预览区        |   | ‹ 主页 / 歌名                    返回       |  |
|  |      16:9 + 小进度条      |   | 全部 国语 粤语 闽南语 英语 日语 韩语 其它  |  |
|  +--------------------------+   +---------------------------------------------+  |
|  | 搜索框                   |   |                                             |  |
|  +--------------------------+   |              右侧内容区                      |  |
|  | A B C D E F G            |   |        歌曲双列 / 已点双列 / 歌手网格       |  |
|  | H I J K L M N            |   |                                             |  |
|  | O P Q R S T U            |   |                                             |  |
|  | V W X Y Z 123            |   |                                             |  |
|  +--------------------------+   +---------------------------------------------+  |
|                                                      上一页  1/8  下一页        |
+----------------------------------------------------------------------------------+

4. 点歌页紧凑

text
+------------------------------------------------------+
|                    左侧小预览区                       |
|------------------------------------------------------|
| 搜索框                                               |
|------------------------------------------------------|
| 字母键盘 / 快速说明卡                                 |
|------------------------------------------------------|
| 已点 原唱/伴唱 切歌 播放/暂停 重唱                    |
| ‹ 主页 / 歌名                              返回       |
| 全部 国语 粤语 闽南语 英语 ...                        |
|------------------------------------------------------|
|                右侧内容区(改为下方)                  |
|                                                      |
|           歌曲双列 / 状态卡 / 占位页                  |
|                                                      |
|                 上一页  1/8  下一页                   |
+------------------------------------------------------+

5. 歌手页

text
+------------------------------------------------------+
| 已点 原唱/伴唱 切歌 播放/暂停 重唱                    |
| ‹ 主页 / 歌星                              返回       |
| 歌星 48   本地聚合                                    |
|------------------------------------------------------|
| +--------------------+  +--------------------------+ |
| | 头像               |  | 头像                     | |
| | 歌手名             |  | 歌手名                   | |
| | 12首           ->  |  | 8首                 ->   | |
| +--------------------+  +--------------------------+ |
| +--------------------+  +--------------------------+ |
| | ...                |  | ...                      | |
| +--------------------+  +--------------------------+ |
|                                    上一页 1/3 下一页 |
+------------------------------------------------------+

6. 已点列表

text
+------------------------------------------------------+
| 当前播放项                                            |
| 歌名                                                  |
| 歌手 · 当前播放                                       |
+------------------------------------------------------+
| 队列项                                                |
| 歌名                                                  |
| 歌手 · 队列 1                 [置顶] [移除]           |
+------------------------------------------------------+
| 队列项                                                |
| 歌名                                                  |
| 歌手 · 队列 2                 [置顶] [移除]           |
+------------------------------------------------------+

7. 全屏播放层

text
+----------------------------------------------------------------------------------+
| [返回点歌] [伴唱] [切歌] [重唱]                                                 |
| 当前歌曲标题                                                                      |
| 歌手名                                                                            |
|                                                                                  |
|                                                                                  |
|                               全屏视频区域                                        |
|                                                                                  |
|                                                                                  |
|----------------------------------------------------------------------------------|
|                                  底部进度条                                      |
+----------------------------------------------------------------------------------+

说明:

  • 顶部和底部都不是实体栏,是通过黑色渐变罩叠加出来的。
  • 点击空白区域显示或隐藏顶部控制和底部进度条。

8. 设置弹窗

text
+------------------------------------------------------+
| 媒体库设置                                           |
|------------------------------------------------------|
| 顶部说明文字                                         |
|                                                      |
| [本地 MV 路径卡]                                     |
|                                                      |
| [Android 重授权提示卡,可选]                         |
|                                                      |
| [媒体处理引擎信息卡]                                 |
|                                                      |
| [启动时自动扫描 SwitchListTile]                      |
|                                                      |
| [选择目录] [清空路径]                                |
|                                                      |
| [错误提示卡,可选]                                   |
|                                                      |
| 底部说明                                             |
|------------------------------------------------------|
|                                  [关闭] [完成]       |
+------------------------------------------------------+

麦麦KTV 官方网站与文档