为新手设计师量身打造的DPI学习指南(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:优设   作者:w3ctech

关键词

SP和DP、PT从用途上来讲是不同的,但是工作方式相同。SP表示与比例无关的像素,通常用来定义字体大小,SP受用户Android设备字体设置的影响。作为一个设计师,为任何事物定义SP就像定义DP,最好基于清晰的1x的比例(以16sp为例,它是非常便于阅读的字体大小)。

附加: 始终使用分辨率或者非比例的值作为规范。屏幕尺寸、分辨率种类越多,它就越重要。

PPI配置

现在,你已经知道PPI、Retina、像素比是什么了,接下来我们要讨论的是 “如果我在设计工具里改变PPI配置,会发生什么呢?”

如果你问自己这个问题,那就表示你对设计软件比较熟悉。

任何非打印的设计使用像素大小不用考虑原始PPI配置。

软件PPI配置是打印的一个传统。如果你只是做web设计,PPI对位图大小没有影响。

这就是我们使用像素比而不直接用PPI值的原因。你的画布和图像总是会被被软件按照对应的像素比换算成像素点。

这里有个例子。你可以在允许配置PPI值的软件(比如Photoshop)里面进行试验。我在Photoshop上画了两个80*80px的正方形和16pt的文本,一个配置的PPI值是72,另一个是144。

为新手设计师量身打造的DPI学习指南

为新手设计师量身打造的DPI学习指南

如你所见,文本变大了,准确点说是两倍大,然而正方形还保持不变,原因就是Photoshop按照PPI值放大了pt值,结果在PPI值变为两倍的情况下文本大小增加为原来两倍。而用像素定义的蓝色正方形,保持了原来大小。像素就是一个像素点,不管PPI怎么配置它会一直保持一个像素。造成这个差异的是用来显示它的屏幕的PPI值。

我们需要记住的是在做数字化设计的时候,PPI只会影响你对设计的感知、你的工作流和以pt为单位的图案例如字体。如果你在工作资源文件里包含了各种PPI配置,程序就会根据接收到的文件的PPI比例在不同的文件里调整转移视觉的大小,这会成为一个需要解决的问题。

那么,解决方案是什么呢?就是坚持使用PPI(对于1x设计,最好控制在72-120之间)。我个人使用72PPI,因为这是Photoshop的默认配置,我的同事也是。

附加:

PPI配置对输出到web上的设计毫无影响。

PPI配置只对基于PPI独立计量(比如PT)产生的图案有影响。

像素是任何数字化设计的度量单位

保持像素比以及设计的目标,而不是PPI

在进行数字化设计时使用实际的PPI配置,你会感受到它在目标设备上的样子(以1x的web/桌面设计72-120ppi为例)。

在你的文件中自始至终保持相同的PPI配置

关于这个的额外趣味阅读:StackExchange post

iOS上的PPI处理

是时候钻研下特定平台的设计了。

让我们花点时间看看2014年年初时的iOS设备。 从屏幕大小和DPI的角度来看,iOS有两种类型的手机设备和两种类型的笔记本/台式电脑屏幕。

对于手机,有iPhone和iPad。 在手机分类中,有过去的3GS(iOS6依旧支持)和更高版本,其中只有iPhone 3GS是非Retina。iPhone 5以及后来的都用了和iPhone 4/4s有相同DPI的更好的屏幕。让我们来看看下面的列表:

为新手设计师量身打造的DPI学习指南

2014年9月Apple宣布,现在又有2个新类别的iPhone:iPhone 6和iPhone 6 Plus。

iPhone 6比5要大一点(0.7英寸左右),但是PPI相同。iPhone 6 Plus由于它的尺寸,5.5英寸,产生了iOS上新的像素比,@3x。

为新手设计师量身打造的DPI学习指南

相较于其他iPhone,iPhone 6 Plus控制展示比较特殊的是:视觉效果降频。

以为iPhone 6设计为例,设计的画布为1334750px,手机上就呈现1334750的物理像素。当为iPhone 6 Plus时,手机的分辨率小于渲染的图像,因此你设计的分辨率为22081242px,展示时降频为19201080px。如下图:

为新手设计师量身打造的DPI学习指南

物理分辨率比渲染分辨率小15%,会造成一些细节问题,比如半像素使得精细的地方变模糊。分辨率如此高也是很微妙的,除非你近距离观察。因此,在2208*1242px的画布上设计,需要注意设计中真正精细的地方,像是分隔符。模拟如下:

为新手设计师量身打造的DPI学习指南

感谢Paintcode的说明,看看他们专门的页面。点击查看

在iPod touch分类中,iPod第四代出来的时候使用的是iOS6和非Retina。iPod第五代以及后面的都使用Retina屏幕并且兼容iOS7,它的屏幕大小与iPhone 5相同。

最后说说iPad。除了iPad 第一代,其余的都用的是iOS7,同时只有iPad2和iPad mini是非Retina屏幕。从设计的角度来看,iPad mini只是普通的iPad(一样的PPI屏幕),但是物理体积更小,也就是说它们拥有相同的分辨率,只是大小从9.7英寸减小到了7.9英寸。保持同样的比例,便会相应地增大像素点的密度,你的虚拟资源就会显得更小了。

为新手设计师量身打造的DPI学习指南

为新手设计师量身打造的DPI学习指南

至于台式机和笔记本,我们不会全面讨论Apple提供的各种尺寸的屏幕。在今天,Apple提供的几乎都是1x像素比的Retina屏幕(Macbook,Macbook Air,旧版Macbook Pros,台式机显示器),Retina只应用于13和15寸的Macbook Pro。iPad和iPhone像素比是2x。为台式机设计与手机设计不同的是,你需要以相同方式设计来覆盖这两种不同类别的屏幕。

当只使用一种像素比时,基于iOS和OSX的设计是非常简单的。我建议开始设计时先用基础的PPI(例如,100%/1x)然后增加到2x并在2x的屏幕上校验你的设计并且生成2x的资源。当你熟悉在1x和2x之间切换设计后,就能够直接在2x上进行设计了,低分辨率时资源更小。如果你正在为Retina屏幕设计的话(Macbook Pro),这就特别有用。

引入资源,chrome为例

为新手设计师量身打造的DPI学习指南

如图所示,每次请求资源需要传送两张图片。非Retina下图片名为name.png,Retina的图片增加到@2x命名为@2x.png,这是iOS开发约定的命名规范。

如果你创建了一个图片只用在iPad上,我们在.@2x后面加上~iPad,这仅仅只是chrome的约定。对需要的资源都这样处理,不要只用一个版本的资源来覆盖所有DPI。

附加, iOS规则集:

@2x的资源必须始终是1x资源的两倍。

Retina资源加上@2x.

始终创建100%和200%比例的图片。

1x和2x的资源始终要保持名字相同。

在100%比例下开始设计,然后做乘法。

传递.png格式的图片。

使用pt创建规范而不是px。

Android上的PPI处理

Android平台的设备种类比iOS多,因为任何OEM都可以生产设备并且几乎没有比例的限制,然后加上自己版本号。结果就是生产出几乎无限制的屏幕大小和DPI种类,电话和平板电脑一样大,或者电话和平板电脑一样小的情况比比皆是。为此,你的设计总是需要做适配。

在这个部分,我们将采用不同于iOS的方法,我们先来讨论下像素比和DPI分类。

Android设备可以分为两类:手机和平板电脑。这两种设备又可以按照不同DPI分为:ldpi、mdpi、 tvdpi、 hdpi、 xhdpi、 xxhdpi和xxxhdpi。

幸好,有些比其他使用得更加频繁,有些甚至已经弃用了。

首先我们要找到等价于iOS上1x的基础单位。在Android上,这个基础单位就是MDPI。

让我们看看下面列表的像素比。

为新手设计师量身打造的DPI学习指南

是的,很多,而且还没有完,还有一个落下了。

为新手设计师量身打造的DPI学习指南

实际上,目前正在使用的DPI有4个:MDPI, HDPI, XHDPI和XXHDPI。 LDPI是过时的DPI,现在已经不再使用,TVDPI是TV UI的特殊例子,在2012年版的Nexus 7中短暂使用过,在手机和平板电脑的使用中没有考虑的必要。尽管如此,TVDPI的像素比(1.33x)还是被用在一些安卓系统的设备上,像是LG G手表,我们后面来讨论这个。

让我们结合带着各自DPI的Android手机和平板电脑全面客观地看待事物。

为新手设计师量身打造的DPI学习指南

为新手设计师量身打造的DPI学习指南

为新手设计师量身打造的DPI学习指南

为新手设计师量身打造的DPI学习指南

为新手设计师量身打造的DPI学习指南

为新手设计师量身打造的DPI学习指南

为新手设计师量身打造的DPI学习指南

也许在现在这个时候有一个设备使用XXXHDPI的实际app资源,但也不是很常见。如果你能用额外时间生产XXXHDPI资源,你的app便不会过时。

引入资源,chrome为例

每次请求资源都需要传递一组4张图片,从MDPI到XXHDPI,无需考虑LDPI。注意,在下面的chrome版本中,TVDPI的输入在这个例子里的5张图片里也很清楚。

和iOS一样,我建议把100%或者1x的像素比作为你设计的基础,这会让设计在适配其他像素比的时候容易一点,特别是在像素比为1.33和1.5的安卓系统上。

看看下面安卓上chrome的返回按钮的例子。

为新手设计师量身打造的DPI学习指南

DPI后面跟着的建议名称不是安卓官方指南强制要求的,这是我们为资源取名的方式,因为现在有限的设计工具很难给每个资源定义一个路径。 考虑到一个资源有时有上百个资源文件,站在设计师的角度来说这是使输出过程不那么痛苦以及避免重命名错误的一个途径。资源在资源仓库里面的存储方式是有结构的,参考后面:

drawable-mdpi/asset.png

drawable-hdpi/asset.png

etc…

如你所见,资源被截成了3232dp的正方形,Android像素比也会是小数。当用1.33或者1.5乘以一个数的时候,最后的结果很有可能就是小数。在这种情况下你需要通过四舍五入来让数字变得有效。在这个例子中,321.33=42.56所以四舍五入之后是43px。

你需要注意以像素为单位的元素,比如笔画。你需要确保你的笔画既不是1px宽也不是2px同时也不像屏幕分辨率部分描述的那样模糊。

附加, Android规则集:

Android有7种不同的DPI,你需要关注其中的4个:mdpi,hdpi,xhdpi,xxhdpi,如果希望你的app面向未来,可以关注XXXHDPI。

MDPI是基础的DPI或者1x像素比

Android使用dp代替pt当作参数规格,但是他们是一样的。

用你最好的判断来处理小数像素比。

传递.png格式图片。

确保检验命名约定,与执行负责人共同完成输出进程。

Mac、Chrome OS上的PPI

Mac(OSX)和Chrome OS在处理PPI方面是十分相似的。 两个OS都支持常规的PPI(100%)和hi-res/retina PPI(200%)。像iPhone和iPad,就只有2x像素比。

 收藏