分辨率与像素之间应该如何适配
新闻来源：优漫教育
日期：2021-08-13
对于初学UI设计的人来说，很难区分什么是分辨率和像素。所以在使用和理解上往往会出现一些误差和错误。今天UI设计培训学校就和大家聊聊什么是像素，什么是分辨率，如何适应。
一、像素和分辨率的关系。
许多设计师不理解分辨率和像素的原因是他们不理解什么是英寸。当我还是个孩子的时候，我家的电视机会说21英寸彩色电视、25英寸彩色电视、29英寸彩色电视等等。包括手机，我们也会说4.7英寸和5.0英寸。然而，显示屏毕竟是一个表面，你用英寸来表达一个表面。因此，在许多人眼里，英寸被误认为是一个面积单位，也就是说，英寸被视为一个平方英寸。
并且，以英寸为面积单位的设计者对分辨率有着完全不同的理解。事实上，这里的英寸是指屏幕对角线的长度，英寸实际上是一个长度单位。
分辨率可以分为ppi和dpi。
ppi:每英寸(长度)包含的像素点。
dpi:每英寸(长度)的点数。
对于dpi来说，只要你知道，ppi就更重要了。由以上定义可以看出，dpi和ppi的区别并不大，只是像素(px)是设计者最小的设计单位，而点(pt)则是iOS最小的开发单位。每提到的二倍图，三倍图是指屏幕上的一个点有两个或三个像素。究竟一个设备是使用两倍图还是三倍图，只需要看看ppi和dpi的比例。(ps:plus中的ppi/dpi=2.6，大约等于3)
一些设计者可能认为这些知识没用，或者认为它们属于前端，与他们自己无关。但UI设计培训学校掌握一些基本的开发知识有助于我们更好地完成设计工作。下一步，我将举三个例子。
二、像素和分辨率的关系。
分辨率转换。
正如我之前所说，设计师只需要了解dpi，而ppi才是真正需要掌握的。那ppi能给我们带来什么帮助呢？因为像素的物理尺寸并不是绝对的，所以随着屏幕ppi的不同，也会有相应的变化，了解ppi这一点有助于我们避免出错。
例如，我们经常在iOS给出的设计规范中看到44,88这些数字。那么44是如何产生的呢？实际上，iOS推荐的最小点击元素是44*44px。就拿iPhone1来说，苹果还没有适应retina屏幕，所以苹果在iPhone4的时候才开始使用retina屏幕。那时候的屏幕ppi是163px。而用户在屏幕上可以点击的物理尺寸是7mm-9mm。按7毫米计算，一英寸有163像素，一英寸有25.4毫米，那么7毫米应该有多少像素呢？
简单的数学转换可以得到44.92px，也就是我们常说的44px。所以这个44px只是一个相对长度，会随着屏幕ppi的变化而变化。如果你不明白这一点，你可能会抓住这个44px，在任何分辨率的屏幕上使用44px，这显然是错误的。
三、适应误区。
适应性也是目前一些设计者头疼的问题，有许多小细节需要我们关注。如今，我们对应用程序的界面设计基本上都是750×1334(iPhone6/7/8)的尺寸，也就是说，以2倍图为基准，然后切3倍图来适应plus和iPhoneX，这是我们关注的焦点，所以设计者常常忽视iPhone5的尺寸。
可能有些设计师很迷茫。我是基于两倍图，iPhone5也是两倍图。为什么要适应？实际上，这个想法是正确的。在iPhone5中，大部分组件的尺寸都是一样的。但是一些设计元素会相应地改变尺寸，以适应iPhone5640×1136的屏幕。这一尺寸的变化通常分为两类：一类是等比缩放，适合图片类。第二，高度不变，水平间距缩小，适合设计组件，如上面的搜索框。
自然，适应的工作量很大，有许多小细节需要我们去关注，一篇文章的篇幅肯定是说不完的。在iPhone5和iPhone6下，我给你的建议是拿QQ音乐进行截图分析比较。这种方法既愚蠢又有效，这种方法也是大神介绍给我的。事实上，这也可以算是竞争性产品分析。虽然没有竞争性产品，但是核心理念是一样的：做不到的时候，看看别人怎么做。
之前做开屏广告设计规范的时候，我就是截了几个产品的开屏图来分析做的。在两倍图的基础上做图，一定要注意组件的大小不能是单数。例如，您的按钮高度为75px，在三倍图中，75px放大1.5倍肯定会出现虚边。要避免这种情况。
四、控制设计风格。
了解适应性知识也可以帮助我们控制产品的设计风格。比如我们之前在产品首页会倾向于以下排版。这种排版的好处是信息可以充分显示，点击面积足够大，用户操作方便。但是很难适应，尤其是iPhoneX屏幕进一步拉长的时候。
我今后采用这个主页的设计模式，一定会反复考虑。这种设计模式并不漂亮或可用性差，今后很难适应设备。
五、沟通的重要性。
事实上，本文主要讲的是设计者如何通过学习像素和分辨率来更好地完成匹配，因此我认为匹配是一项团队工作，仅仅依靠设计者是不够的。例如，我在上面的例子中提到，UI设计培训学校主页的布局模式很难适应，但是界面框架并非由UI设计者决定，产品经理或交互设计者在绘制线框图时已经确定了整个界面的布局。所以，让UI设计者参与前期线框图和原型图的绘制是很重要的，因为有些问题必须从UI设计者的角度来看。
