DPI设计师指南-转换为实际尺寸

披露: 您的支持有助于保持网站的正常运行!我们会为此页面上推荐的某些服务收取推荐费.


在网络上,DPI代表每英寸的密度像素。 PPI只是代表每英寸像素。 (尽管DPI起源于印刷行业,但由于其现代化的定义,因此经常在网络上代替PPI使用。)

无论您喜欢哪种首字母缩写,都需要了解DPI设置如何影响图形(如果设计网站或应用程序)在屏幕上的显示方式.

Web图形设计的非官方标准是72 DPI。那是第一台Mac计算机128K时代Photoshop的标准DPI设置。 (这是128K像素密度与iPad像素密度的很好比较。)

通过使用72 DPI,打印更加可靠。 72 DPI正确或错误地困扰着我们.

实际上,我们使用的许多设备的DPI都比72高得多,这带来了很多挑战。幸运的是,有一些已知的约定可以帮助您开发设计.

为什么屏幕分辨率很重要

假设您有两个物理尺寸相同的设备。设备1的屏幕显示为72 DPI。设备2显示144 DPI.

如果您以72 DPI设计图像,则图像将以您希望的尺寸显示在72 DPI屏幕上。但是在144 PPI屏幕上,它的大小仅为您预期的一半,因为显示屏的像素数是原来的两倍.

请记住:物理尺寸完全不影响DPI,只是较小的屏幕生产成本较低,因此它们的DPI往往比大屏幕高。在当今的设备上,即使对于大小相似的设备,DPI也会有很大的差异:

  • Apple Cinema Display:99
  • 微软Surface:148
  • 亚马逊Kindle Fire 7英寸:170
  • 苹果12英寸MacBook:226
  • 黑莓Passport:453
  • 三星Galaxy S7:576
  • 索尼Xperia Z5 Premium:801.

(您可以立即找到屏幕的DPI,以查看其比较。)

如果您在设计中没有对此进行校正,那么在Sony Xperia Z5 Premium上,您的72 DPI图形将很小。这就是为什么您需要知道如何处理像素分辨率的巨大差异的原因.

不要依赖品牌或行销来以任何一致的方式描述显示分辨率。例如,Apple的Retina品牌描述了许多不同的显示密度,具体取决于您要查看的设备。最低的Retina显示屏为218 DPI,最高的为400以上.

要开发一致的设计,您需要不同的方法.

使用Dp和点进行简单缩放

一旦了解了iOS和Android中的度量单位,就可以完全忽略设计中的像素度量.

相反,您可以使用虚拟像素或CSS像素的概念:

Android和iOS略有不同:

  • dp代表与设备无关的像素或与密度无关的像素。在Android上使用。 1 dp尺寸为1/160英寸.
  • 点数相当于iOS。 1点长1/163英寸.

因此,尽管密度存在细微差异,但系统非常相似.

如果您针对Android应用布局使用dp测量进行设计,则无需确切了解要显示该布局的每台设备的测量值。该设备知道自己的乘数,并将其应用于dp值,因此它将自动以预期的大小呈现您的设计。 Android开发人员文档中对此有更多介绍.

如果您为iOS设计使用点,则您需要知道的是,某些Apple设备将点显示为1像素平方,有些将其显示为4像素平方,而另一些显示为9像素平方。换句话说,点的测量必须乘以1、2或3,以适合任何iOS设备所需的屏幕分辨率.

使用Android屏幕密度限定词

每个Android设备均根据屏幕密度分类或分类。那里有成千上万种不同的设备,因此该概念通过缩小设计人员创建图像所需的设备的范围,有助于简化设计人员的准备工作。.

当您为Android创建图像(如应用程序图标)时,您需要了解以下六个限定符:

  • 低(LDPI):任何设备的DPI最高为120,乘数为0.75
  • 中(MDPI):介于120和160 DPI之间,乘数为1(基本密度)
  • 高(HDPI):160至240 DPI,1.5的倍数
  • 特高(XHDPI):240至320 DPI,乘数2
  • 特高(XXHDPI):320至480 DPI,乘数3
  • 特高(XXXHDPI):480至640 DPI,4的倍数.

创建应用图像或图标时,只需根据创建的存储桶将它们放置在文件夹中即可。连同您所创建布局的dp测量值,Android会自动为工作选择最佳的图像.

触控设计

DPI难题中有最后一块,那就是触摸屏和常规显示器之间的区别。尽管它与DPI没有直接关系,但还是值得考虑的.

假设它们具有相同的屏幕分辨率,则图形在触摸屏或非触摸屏上的外观显然相同。但有一个非常重要的区别:人们的导航方式不同。手指轻击要比鼠标指针精确得多.

触摸目标在iOS中为44x44pt,在Android中为48x48pt正方形。您需要将所有导航放大,并增加其周围的间距,以免发生潜在的错误.

资源资源

  • 将DP转换为PPI:Android Developer网站上的指南
  • Pixplicity DP到PPI转换器:出色的计算器和转换器
  • 设计师提示:详细了解Android的密度限定符和dp计算
  • BBC关于触摸目标尺寸的移动辅助功能指南:本文提供了有关在HTML中设计可访问的移动布局的出色的最佳实践提示
  • iOS设计指南:涵盖分辨率,下采样,图标,版式,标准布局组件和自动图标效果.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map