位图图像或SVG

#1 楼

您的任何建议都不是针对所有分辨率的清晰2D图形的解决方案。 SVG非常棒，并且可以无限扩展，但是由于您不知道最终渲染中像素边界将位于何处，因此无法在所有分辨率下获得清晰的边缘。例如，假设您的GUI是绿色背景上的红色框。如果红色和绿色之间的边缘落在一个像素的中间，并且SVG渲染器进行了抗锯齿，则将获得一行或一列半红色，半绿色的像素，看起来像糊状。如果渲染器不进行抗锯齿，则将边缘放置在错误的位置，这对于单个矩形可能很好，但是对于重复的图案，图案的每个实例可能会出现不同的宽度，这与

将位图缩小到显示分辨率同样不好。再次，假设您的绿-红边缘位于像素边界上，该像素边界将不会是缩小后的位图中的像素边界。您将再次获得一行或一列像素，它们是糊状的红绿色混合。最低的分辨率对于具有清晰的边缘最为重要，但受影响的最差。

如果可以接受限制，则可以使这些技术中的任何一种都能起作用。您愿意处理一组分辨率，而不是处理任何分辨率，最好是两个分辨率的乘方（例如，图标大小为512x512、256x256、128x128等）。在设计UI时，请绘制一个大的位图（512x512 ）或矢量图像，但请使用编辑器中的指南显示最小尺寸（例如64x64）。确保所有重要的边都与这些参考线对齐，但是您仍然可以使用曲线，渐变等。这样，您知道在低分辨率下不会得到模糊的糊状，但是仍然可以使用平滑的对角线和高分辨率的曲线。这是设计可伸缩UI的快速方法。

移动OS（设计用于一定范围的屏幕dpi）使用类似的技术，但有两个区别。首先，它们将屏幕的实际dpi“存储”到最接近的“标准” dpi。这意味着UI可能会在不同屏幕上显示更大或更小，但是您确切知道每个图标或小部件中会有多少像素。为了解决这个问题，他们没有将分辨率限制为2的幂，而是有一些中间的。

其次，他们让设计人员为每种分辨率指定不同的位图。这意味着您可以为更高dpi的屏幕进行更高细节的设计，而不必在低dpi的屏幕上太忙。 （例如，您可以使用精细的棋盘格或标尺图案，并使其在每种分辨率下都能正确显示。）您也可以考虑这样做，但这会使设计和管理位图资产更加耗时。 />
如果您的存储桶具有2的幂，则可以使用mipmaps存储图像（而不是使用内置的mipmap生成），无论您是为每种分辨率创建不同的图像还是只是缩小比例。这样一来，您就可以避免缩减运行时内存带宽的成本。