# 现代流媒体界面设计 | Vodlix

**Source:** https://vodlix.com/zh/features/modern-uiux  
**Summary:** 流媒体服务的网页、移动端和电视界面均按各自的输入方式量身打造，底层共享同一套内容目录、观看权限和播放进度。  
**Publisher:** Vodlix

---

## 现代 UI 与 UX

每个界面都根据其实际的输入方式打造。遥控器、拇指和指针是三种不同的工具，而不是同一布局的三种宽度。

- **Feature Plan:** 2

- core-platform

## 流媒体应用的现代 UI 与 UX：为每块屏幕而打造

网页、手机和电视，均按各自的实际操作方式打造，底层采用相同的目录结构。

- **Featured Image Alt:** 现代 UI/UX — 主视觉图

### 为什么电视是界面最容易出问题的地方

Vodlix 的现代 UI 与 UX 是为每块屏幕专门打造的，而不是简单地缩放适配。电视是界面最容易出问题的地方：没有悬停，没有指针，观众坐在离屏幕数米远的位置。被拉伸到电视上的网页布局在这种环境中行不通。Vodlix 为遥控器设计电视体验，具有清晰可见的焦点、大尺寸的选择目标，以及跟随方向键的导航。对于 OTT 运营商而言，按屏幕进行原生设计，正是让客厅体验恰到好处的关键。

#### 网页就绪

熟悉的响应式布局。

#### 移动优先

专为触控和小屏幕打造。

#### 电视原生

为遥控器而设计，而非光标。

- **Image Alt:** 现代 UI/UX — 相同目录

### 相同的目录结构，不同的输入方式

在网页、移动端和电视上，Vodlix 底层保持相同的目录结构，只改变每块屏幕的操作方式。内容、分类、列表和账户在所有平台上完全一致；不同的只是输入方式——光标、触摸屏或遥控器。没有任何平台是被生硬地套用到另一个平台上的。观众在各种设备上获得一致的服务，而每台设备都拥有按其实际使用方式设计的界面。

### 坐在沙发上也能看清的电视布局

Vodlix 电视布局采用专为客厅观看距离设计的字号和间距。为笔记本电脑设计的字号坐在沙发上根本看不清，因此电视上的标题、简介和菜单项都比网页或移动端更大、间距更宽。海报图和内容行的排列方式让观众在房间另一端也能阅读和选择。远距离可读性是电视界面的基本要求，Vodlix 也将其作为基本要求来对待。

### 为遥控器、触控和鼠标设计的导航

在 Vodlix 中，电视界面上的每个元素都可以从当前焦点出发，通过上下左右四个方向移动到达，因此不会有遥控器无法触及的孤立元素。移动端界面专为触控打造，手势和点击区域均按拇指尺寸设计。网页端则为鼠标和键盘采用熟悉的响应式布局。每种输入方式都有与之匹配的界面，这正是同一服务在每台设备上都感觉原生的原因。

**Q: Vodlix 应用是否只是把同一套设计按设备调整尺寸？**

不是。Vodlix 根据每种设备的操作方式，分别设计网页、移动端和电视界面，底层采用相同的目录结构，因此不会把一个平台的界面硬套到另一个平台上。

**Q: 为什么 Vodlix 要区别对待电视界面？**

电视没有悬停，也没有指针，而且观众在数米之外观看，因此 Vodlix 电视应用采用基于焦点的导航、更大的文字，以及专为客厅观看距离设计的间距。

**Q: 网页、移动端和电视上的内容目录有区别吗？**

没有。内容、分类、列表和账户在所有 Vodlix 应用中完全一致。改变的只有界面和输入方式，因此观众在每块屏幕上都能获得一致的服务。

**Q: Vodlix 移动应用是否为触控而设计？**

是的。Vodlix 移动应用专为触控和小屏幕打造，提供手势操作、拇指大小的点击区域，以及适合手机和平板的布局，而不是缩小版的网页。

**Q: 按屏幕分别设计，能保持我的品牌一致吗？**

是的。您的 Vodlix 主题、配色和品牌元素会应用到每块屏幕上。各界面的区别仅在于操作方式，因此从手机到电视，您的品牌呈现始终一致。

**Q: 我可以修改设计吗？**

您可以修改配色、卡片形状、页眉和页脚以及整体模板。交互模式则有意不以同样方式开放，因为它们是对输入方式的回应，而不是品味问题。

**Q: 如何判断界面是否有效？**

看人们能否快速找到想看的内容并再次回来，并按平台分别衡量。一个界面可能在网页上表现良好，在电视上却行不通，而公司内部无人察觉，因为办公室里没有人以那种方式观看。

**Q: 为什么流媒体界面中的海报图这么大？**

因为海报比标题能让人更快做出决定，而观众给每个内容的时间大约只有一秒。大尺寸海报图并非风格偏好，而是对人们实际浏览目录速度的回应。