只因解决一个 UI 问题，今天刚转正的产品小姐姐约我...

一. 序

刚入职的产品小姐姐，正在主导一款新的 Android TV App。最近在跟进内容的平面海报图效果，要确定标准尺寸之后，提交给设计师出图，问了我一个关于海报适配的问题。

产品小姐姐：在 1920x1080 的电视上，1:1 出的海报图，为什么在电视上会糊？例如：设计搞上视觉效果 100x100 的效果，出了 100x100 的海报。

答：放大 2 倍就清晰了。例如：设计图视觉效果 100x100 的海报，实际要出 200x200 的海报。

Waiting......

产品小姐姐：糊倒是不糊了，但是为什么要放大 2 倍？还有为什么手机上不糊？

答：电视和手机不一样，而且这不是设计师的事儿吗？你让她按 2 倍出就好了。

产品小姐姐：虽然图是设计师出，但我要定标准啊，而且要有理有据的定标准。

答：有追求！原理是这样的 balabalabal…

产品小姐姐：哦，原来如此。

答：你现在已经是掌握了 TV 端海报适配核心技术的产品了。

产品小姐姐：哈哈哈，晚上有空吗？一起吃个饭？

产品小姐姐成功的掌握了海报适配的核心技术了。

其实如果是手机端，正常按最大的视觉效果，按 1:1 的比例出海报，就不会糊。按正常的思路，如果图片存在模糊问题，只要保证图片宽高比例不变的情况下，尽可能的将其尺寸放大，就可以达到清晰的效果。

但是为什么 TV 上，1:1 会模糊？同时，为什么是 2 倍，不是 3、4 倍呢？

请看下文分解。

二. TV 的海报尺寸的问题

大多数情况下，我们工程师需要时候关心的只是 UI 效果，在不同设备上，对设计稿的还原度是否满意。

其实在手机 App 的场景下，海报图的尺寸，只要和设计稿的尺寸一致，就不会出现问题，但是 Android TV 上，却有点不一样。

为什么在 Android TV 上，使用获取屏幕尺寸的 API 得到的尺寸是 1920x1080，但是在电视上为了保证海报不模糊，需要放大 2 倍？

这么说，有点不太清晰，举个例子，下面是一款常见的视频类 TV App 的布局原型效果。

通过 Android 提供的 API，获取到设备尺寸为 1920x1080，如果我们的设计稿也是 1920x1080，那么如上图所示，假如填充海报的控件在设计稿上的尺寸 600x280，实际上我们只需要 1:1 的尺寸输出海报就可以满足，因为它最大就是这么大。

但是不好意思，在 TV 端上，它需要被放大 2 倍才能保证不模糊。

设计规范一定要确定好，市场和运营们，才可以按照规范出图，达到最好的视觉效果。这里的规范尺寸，就是 1200x560，而不是 600x280。

三. TV 端的海报怎么才能不糊？

当我们谈到 Android UI 适配的时候，大部分时候要达到的效果，都是对设计稿的还原，如何在不同的设备上，还原一致的效果。

在这个过程中，涉及到的参数，就是屏幕尺寸（分辨率），例如我们常说的 1920x1080，以及 density 值，例如我们常说的 1倍、2倍、3倍，其实就是由 density 或者叫 densityDpi 来决定的。

多数时候，屏幕尺寸和 density 是相关的，类似一种惯例。例如一个我的测试机是 1920x1080 的，它的 density 是 480，就是我们常说的三倍机，大多数时候都是遵循这个惯例。具体可以通过 adb shell wm size 和 adb shell wm density 查看设备的参数。

但是这两组参数，并不是绝对相关，尤其是在电视上，如果你关注过这一块的数据，可以找到很多设备的屏幕尺寸是 1920x1080，但是 density 却是 320，也就是 2 倍。

不止于此，我还找到了一张别人收集的尺寸截图，年份比较早了，但是也侧面反应了 Android TV 屏幕的乱像。

Android TV 的参数这么乱，还要怎么适配？

Android 的 UI 适配，网上的资料很多，其实发展到现在，最靠谱的思路就是按比例去适配，其他的思路，在不同的设备上，都会有各种问题。

所有按比例来做适配的方案，都适用于 Android TV 端，可以直接忽略掉这些不同机型的参数差异，得到对设计图的高保真和高还原度。

例如早年间我们自己实现的一套按 1920x1080 的设计图，等比计算尺寸的方案，以及现在今日头条开源的，通过修改 density 来达到等比适配的方案，在 TV 端都是 OK 的。

这里不展开说了，继续回到主题。

为什么 TV 端上的海报，需要按设计图再放大 2 倍。

在前文中我说到设备屏幕尺寸的时候，没有直接说它是分辨率，其实就是为了在这里做个区分。

在电商平台随便找一个手机的屏幕参数，里面的分辨率就等于我这里说的屏幕尺寸，但是在电视上，并非如此。

举个例子，在电商网站上，找小米一款销量靠前的智能电视。

可以看到，这是一个 4K 超高清的电视，分辨率是 3840x2160，如果你用 Android 的 API 查看一下电视的参数，你会发现它的屏幕尺寸是 1920x1080。

正好是 2:1 的关系，这就是为什么需要再放大两倍的原因。等同于我们在 Android 适配的一个重要的参数屏幕尺寸，其实被放大了。也就是原本的一个像素，被放大成了 4 个像素，这就是它模糊的原因。

可以简单的理解为，TV 屏幕的渲染效果，其实是 Android 的一个投影，会被按比例放大。

可能你还有疑问，我为了让产品小姐姐理解，专门画了一个图（是不是很贴心？），相信你看到此图，就能理解了。

这里按真实的 Android TV 尺寸参数举例子，最终投射的是一台 4K 超清电视屏幕。

这就是为什么要放大 2 倍的原因，因为 4K 的分辨率 3840x2180，正好是我们设计稿 1920x1080 的 2 倍。虽然现在已经有超过 4K 的屏幕，但是再清晰一些，肉眼已经无法分辨出区别，所以再大些，意义并不大。

四. 小结时刻

其实关于图片尺寸到多少的问题，看到最后一张图其实就已经清楚了，没有什么高深的概念。

这里简单小结一下：

1. Android TV 的屏幕分辨率，并不等于 Android App 中获取到的屏幕尺寸。

2. 4K 电视的屏幕分辨率，正好是设计稿尺寸的 2 倍，所以海报图应该按设计稿放大 2 倍的效果输出。

3. Android TV 上，和适配相关的参数很乱，常规适配代价太大，最靠谱的方案就是按比例适配的方案，推荐今日头条开源的 UI 适配方案。

就说到这里，有疑问欢迎留言，我要和小姐姐吃饭去了。

本文对你有帮助吗？留言、转发、点好看是最大的支持，谢谢！

---

「联机圆桌」????推荐我的知识星球，一年 50 个优质问题，上桌联机学习。

公众号后台回复成长『成长』，将会得到我准备的学习资料，也能回复『加群』，一起学习进步。