发布时间：2023-12-4 分类： 电商动态
用户界面和互动都是从国外进口的，翻译成中文时可能会有一些不尽如人意的错误。在传播过程中可以进一步放大这些误差。我们可以在互联网上看到很多与设计相关的文章或书籍，在不同的地方，相同的东西可能会有所不同，其中一些可能仍然是矛盾的。这给我们的设计师带来了极大的不便，因为他们没有达到统一的标准。其中，像素和分辨率是最典型的。您可能已经看过许多类似的文章，但您仍然不明白什么是像素，分辨率是多少。然后我希望我的文章可以帮助你解决这个困惑。
首先，像素和分辨率之间的关系
我认为许多设计师不理解分辨率和像素的原因是因为他们不理解英寸是多少。当我们年轻的时候，家里的电视机会说21英寸大彩电，25英寸大彩电，29英寸大彩电等。包括手机在内我们也会说4.7英寸，5.0英寸等。但是显示器毕竟是一张脸，而你使用英寸代表一张脸，所以在很多人的脑海中都会把英寸误认为是一个区域单位，也就是说英寸是平方英寸。
将英寸视为面积单位的设计师将对分辨率有完全不同的理解。实际上，这里的英寸是指屏幕对角线的长度，而英寸实际上是长度的单位。
分辨率可分为两种类型，ppi和dpi。
Ppi：每英寸像素数（长度）。
Dpi：每英寸（长度）包含的点数。
对于dpi，我认为只要你理解它，ppi就更重要了。从上面的定义可以看出，dpi和ppi之间的差异并不大，只是像素（px）是设计者最小的设计单位，而point（pt）是iOS的最小开发单位。我们每天使用的双重地图，三重地图指的是屏幕上一个点中的两个像素或三个像素。无论设备使用双倍还是三倍，只需查看ppi与dpi的比率。 （ps:加上ppi/dpi=2.6，大约等于3）
有些设计师可能会发现这些知识毫无用处，或者认为这些知识属于前端而与自身无关。但掌握一些基本的开发知识可以帮助我们更好地完成设计工作，然后我将给出三个例子来说明。
第二，分辨率转换
我也在前面说过，设计师只能理解dpi，真正需要掌握的是ppi。那么ppi给我们带来了什么样的帮助呢？因为像素的物理尺寸不是绝对的，所以它会随着屏幕ppi的不同而相应地改变。了解ppi有助于我们避免错误。
例如，我们经常在iOS给出的设计规范中看到44,88这些数字。那么44是怎么进来的？实际上，iOS推荐的最小可点击元素大小为44 * 44像素。 iPhone1就是一个例子。由于提出了此设计规范，Apple尚未适应视网膜屏幕。 Apple在iPhone 4上开始使用视网膜屏幕。当时的屏幕ppi是163px。用户可以在屏幕上点击的物理尺寸为7mm-9mm。我们计算7毫米，一英寸有163像素，一英寸有25.4毫米。 7毫米应该有多少像素？
一个简单的数学转换可以发现是44.92px，这就是我们常说的44px。所以44px只是相对长度，随着屏幕ppi的变化而变化。如果你不明白这一点，你可能会死掉这个44px。任何分辨率屏幕都是44像素，这显然是错误的。
三，适应误差区
适应也是一些设计师目前头疼的问题。有许多小细节需要我们注意。目前，该应用程序的界面设计基本上是750次; 1334（iPhone6/7/8）的大小基于2x图表，然后3D图表应用于plus和iPhone X.匹配，三重地图适应是我们的重点，因此设计师经常忽略大小iphone 5。
可能有设计师感到困惑。我使用2x图表作为基准，iPhone5也是2x。为什么我要适应？
事实上，这是事实。 iPhone 5中的大多数组件与设计草案的大小相同。但是有一些设计元素会改变尺寸以适应iPhone5 640及时代; 1136屏幕。这种尺寸转换一般分为两种：一种是比例缩放，这适用于图片类。其次，高度恒定，水平间距减小。这适用于设计组件，例如上面的搜索框。
当然，要调整的工作量非常大，我们需要注意很多小细节，文章的长度肯定没有完成。我对大家的建议是在iPhone5和iPhone6下播放QQ音乐，然后截取屏幕截图进行分析和比较。这是一种非常愚蠢但也非常有效的方法，这种方法也是由一位伟大的上帝介绍给我的。事实上，您也可以将其视为“竞争产品分析”。当然，这里没有竞争产品，但核心理念是相同的：当你不这样做时，让我们看看别人做了什么。
当我以前做屏幕广告的设计时，我能够分析几个产品的开幕画面。
ps:所以在双图的基础上，一定要注意组件的大小不能单一，例如，你的按键高度是75px，那么到三重图，75px放大倍数1.5倍肯定会出现虚边。我们必须回避这种问题。
四，控件的设计风格
对适应性知识的理解也可以帮助我们控制产品的设计风格。例如，我们过去更喜欢产品主页上的以下排版。这种排版的优点是可以充分显示信息，可点击区域足够大，并且用户操作方便。然而，进行改编将非常困难，特别是如果iPhone X的屏幕进一步扩展，这种单屏改编将非常困难。
这种主页设计模式将来一定会被一次又一次地考虑。并非这种设计模式不好或可用性差。将来很难适应设计。
五，沟通的重要性
实际上，本文主要讨论设计师如何更好地适应像素和分辨率的学习。然后我认为适应是一项团队工作。依靠设计师是不够的。例如，我在上面的例子中提到主页的布局模式很难适应。但是界面的框架不是由UI设计者决定的。在绘制线框时，产品经理或交互设计师已经确定了整个界面的布局。因此，UI设计人员参与之前的线框和原型绘图非常重要，因为必须从UI设计者的角度来看待一些问题。
除了与产品经理沟通并与我们互动外，我们还需要与开发人员进行更多沟通。几天前我正在按一个按钮，当我剪切它时背景是透明的。但是，从ps导出的透明背景的gif将显示为杂项，并且根本无法使用。后来，我问过一些朋友，大家都没有合适的解决方案，而且AE没有插件可以直接导出高保真gif。最后，我很绝望。这位前端同事告诉我，这个效果可以通过代码来实现。那时候，我很尴尬，觉得我以前做过这么多工作（AE做动画，导出视频，将视频导入PS，然后导出gif）。因此设计师必须与开发人员进行沟通，这可能会减少很多工作，同样适合于调整。
总结
以上是我的像素，分辨率和适应性的摘要。我希望我能在你的脑海中解决一些疑惑，并且可能会有一些错误的东西。欢迎更正消息。
文/王M竞赛微信公众号：王M大赛
