【设计总结】像素，分辨率和适配

【设计总结】像素，分辨率和适配

无论是UI还是交互，都属于从海外引进的“洋货”。在翻译中文的情况下，很有可能有些词不尽如人意，不正确。在整个传播过程中，这种不准确性很可能被进一步放大。我们在网上可以看到很多与设计方案相关的文章或书籍，其中同样的东西很可能在不同的领域有不同的描述，其中有些很可能互不相同。这给我们设计师的工作造成了很大的困扰，因为我们还没有达到统一的标准。其中像素和分辨率是最典型的。很可能大家都看过很多类似的文章，但是还是搞不清楚像素和分辨率是什么。那么我希望我的文章可以帮助你处理这个疑惑。

像素和分辨率之间的相关性

我觉得很多设计师不了解分辨率和像素是因为不知道英寸是什么。我们家的电视机会曾经有21寸彩电、25寸彩电、29寸彩电等。包括4个。7英寸5英寸。0英寸等等。但是，显示器毕竟是一个面，但是你用英寸来表示一个面，那么很多人就会把英寸误认为是面积单位，换句话说就是把英寸误认为是平方米。

把英寸当成面积单位的设计师，对分辨率的理解会完全不同。其实这里的寸是指显示线的长度，寸其实就是长度的单位。

分辨率可以分为两种类型，ppi和dpi:

ppi:每英寸(长度)包含的像素数。

dpi:每英寸(长度)包含的点数。

对于dpi，我觉得掌握就可以了，ppi是关键。从上面的定义可以看出，dpi和ppi的区别不是太大，除了Pixel(px)是设计师最少的设计企业，Point(pt)是iOS最少的开发设计企业。通常，人们常说一个选定的显示屏有两个像素或三个像素。最后，机器或设备应该使用双图还是三图取决于ppi和dpi的比例。(PPI/DPIinps:plus=2.6，等于3)

很可能有些设计师觉得这种专业知识没用，或者觉得这种知识属于前端开发，与自己无关。但掌握一些开发设计的基础专业知识，可以帮助你在设计方案上下功夫。接下来我举三个例子来说明。

分辨率计算

前面说过，设计师只能掌握dpi，真正要掌握的是ppi。那么ppi能给我们什么样的帮助呢？因为像素的物理规格不是一定的，所以会和屏幕ppi有相对的变化。掌握ppi将有助于你防止错误。

比如在iOS给出的设计标准中，44，88的数据是大多数人经常看到的。那么44是怎么来的呢？其实iOS推荐的最小可点击元素规格是44*44 px。以iPhone1为例。因为明确提出了这个设计标准，所以iPhone并没有集成到视网膜屏幕中。iPhone在iPhone4的情况下刚开始选择视网膜屏。当时屏幕ppi是163px。并且客户可以在显示屏上点击的物理规格是7mm-8mm。我们以7mm计算，一英寸有163个像素，一英寸有25.4mm，那么7mm应该有多少个像素呢？

在简单的数学课上，可以得到44.92px，也就是俗称的44px。所以这个44px只是相对性的长度，它会随着屏幕ppi的变化而变化。如果你不明白这一点，你很可能会执着于这个44px，不会改变。44px适用于所有不同分辨率的显示屏显然不成立。

适应误解

改编也是现阶段一些设计师比较头疼的问题，有很多小关键点是我们必须要注意的。现阶段针对app的页面设计，大部分都是在750×1334(iPhone6/7/8)的规格上做的，也就是说，以2x的图片为标准，然后裁剪3x的图片，以适应plus和iPhoneX，三倍的图片适配对每个人来说都是关键，所以设计师往往忽略了对iPhone5规格的适配。

很可能设计师会感到困惑。我用2x图像为标准，iPhone5用2x图像。为什么我要改编它？

其实这种想法没有错。iPhone5中的大部分组件与设计规格相同。不过，有些设计风格会改变规格，以纳入iPhone5 640×1136显示屏。这种规格转换一般分为两种:一种是比例缩放，一种是照片式。第二，长宽比不会变，水平间隔会变小。这种设计组件比较合适，比如上面的输入框。

进行自然适应的劳动量是很大的，有很多小的关键点，一定要注意。毫无疑问，一篇文章的文章数量是无穷无尽的。我给大家的建议是，拿一个iPhone5和iPhone6下载QQ音乐，然后截图分析。这是一个很笨但是很有效的方法，有个高手详细介绍给我。其实这也可以算是“竞争对手分析”。这里自然没有竞争对手，但核心价值观都是一样的:做起来不容易，就看别人怎么做。

以前用开屏广告设计标准的时候，我其实截了很多产品的图片来分析。

Ps:所以，基本上画二分图的时候，一定要注意，组件的规格不能是奇数。例如，如果你的键的纵横比是75px，那么当75px放大1倍时，无疑会出现虚边。一式三份图表中的5次。我们必须避免这样的问题。

设计概念的控制

掌握改编的专业知识也可以帮助我们驾驭商品的设计理念。比如以前人们倾向于商品首页下面的排版设计。这类排版设计的好处是可以丰富的展示信息内容，点击面积足够大，方便客户的实际 *** 作。但是适应起来会非常困难，尤其是iPhone X的显示屏进一步加长的时候。这种单屏改编会很难。

我以后选择这类主页的策略模式无疑会三思。不是说这种策略模式不好看，就是说可用性差。只在未来改造设备将非常困难。

交流的必要性

其实本文的重点是设计师如何根据像素和分辨率的学习和训练来更好的适应。所以我觉得改编是一个精英团队作品，光靠设计师是不够的。比如我在上面的例子中提到，那种首页的合理布局是很难适应的。但是页面的结构不是UI设计师决定的，产品运营或者交互设计师在绘制原型图的情况下，已经定义好了所有页面的布局。所以UI设计师参与早期原型图的绘制和原型设计是非常重要的，因为有些难点问题必须站在UI设计师的角度去看。

除了和产品运营、交互沟通，大家还要和开发、设计沟通。前几天在做一个按钮的动画，网页剪切的时候背景是透明的。但是ps导出的背景透明的gif会出现杂边，根本无法使用。之后问了一些朋友，他们都没有合适的解决方案，AE里也没有功能强大的软件可以立即导出高保真的gif。最后，我迷失了。我的前端开发朋友告诉我，这种实际效果其实可以通过编码来完成。当时我也愣住了，感觉之前所有的工作都白费了(在AE里做动画特效，导出视频，把视频导入PS，导出gif)。所以设计师一定要多和开发设计沟通，这样很可能会减少很多人工，改编也是一样。

摘要[/s2/]

以上是我对像素、分辨率、适配的总结。期待处理大家心中的一些疑惑。在可能出现错误的地方，我们热烈欢迎留言板进行更正。