屏幕显示像素和UI设计之间的关系

2021-12-01 21:25:36

阅读 10790次标签： ui交互设计产品外观设计作者：蓝blue

　　不论是安卓手机的UI 设计还是苹果手机的UI设计，亦或者是电脑UI设计，UI设计师在设计的时候需要考虑最终屏幕显示像素。如果你的最终端的屏幕显示像素不高，比如说在手机端的画面看着很清晰，但是到了pc端可能就会变得比较模糊。

UI设计

　　混乱的管理

　　在高分辨率移动设备的初期，像素密度还仅仅为1倍或2倍。但是现在的设备有许多的像素密度。 Android就是一个很好的例子：在写这篇文章的时候不同的设备厂商就提供了六种常见的像素密度。这意味着，一个icon在所有屏幕上尺寸相同但实际上需要六种尺寸的切图。对于苹果设备来说，则是两个或三个不同尺寸的图形。

　　用1倍尺寸进行矢量设计

　　这有几个实践经验教训：第一个教训是，我们一开始应该用矢量图形来设计，这样我们的界面，icon和图形可以扩展到任意大小。

　　第二个教训是，我们应该用1倍的尺寸来进行设计。换句话说，在所有的测量尺寸下，设计单位使用的是点，然后导出时扩展到各种高像素密度而不是设计最终设备的像素尺寸，比如2倍、3倍等。而且这样也会在导出过程中遇到各种麻烦，比如缩放2倍的图形到150%产生的3倍图形会模糊，但缩放1倍图形到200%和300%却保留了视觉清晰度。

　　IPhone原型的标准尺寸是375×667像素，750×1334像素实际上是显示器的分辨率。大多数设计工具不辨别像素和点(Flinto是我所知道的唯一的例外)，所以它的设计师假装单位像素实际上是点，这样就可以灵活地导出两倍或三倍尺寸的图。

　　失之毫厘并不差之千里

　　这是很先进的一种做法，但它更值得一提的是：有时设备厂商假装像素到点的比例是常见的一种，比如3倍，但它实际上是2.61倍，然后图像被缩放到更为方便的3倍。这就和目前的iPhone Plus一样。它收缩1242×2208的界面以适应放在1080×1920的屏幕上。

　　由于图像只被缩小了一点点(87%)，所以图像看起仍然可观—— 一个1像素的直线在3倍屏幕上看起来仍然清晰。可喜的一个消息是，在未来苹果可能会发布一款真正的3倍iPhone Plus，批量生产也是可行的。现在的iPhone Plus只是模仿他直到它生产出来。

　　如果你想找UI设计服务，或者想要了解更多UI设计资讯，就上一品威客网。一品威客网入驻上百家专业UI设计公司，汇集全国千万优秀专业人才，提供最全面、最专业的UI设计服务。