Adobe

在屏幕上准确调整图形尺寸

作者 Paul Trani

Adobe

Content

屏幕规格
合理调整图形尺寸
始终不忘测试
下一步阅读方向

创建日期

17 October 2011

页面工具

在 Facebook 上共享

在 Twitter 上共享

在 LinkedIn 上共享

书签

打印

要求

必备知识

你应该基本熟悉 ActionScript 3并且了解矢量和位图图形相关知识。

用户级别

初级

必需产品

Flash Professional (Download trial)

你不得不确保你的图形是72dpi的时代已经一去不复返。随着支持web的移动设备和平板电脑的涌入，出现了各种尺寸、分辨率和像素的新屏幕。现在你必须确保无论针对什么设备你的移动应用程序图形应该具有合适的尺寸。

随着Apple iPad的推出，平板电脑设备已经成为年度的主打设备。但关键的问题是相应的设备是否新颖或是否具有持久价值。据Business Insider 报道，在它调查的 500个iPad拥有者中，从第一次购买算起，其使用率已经提升高达80%。根据本人经验，我可以告诉你我每天大约使用一个小时iPad用于阅读和游戏。

屏幕规格

既然平板电脑已经在市场占有一席之地，那么你如何为它设计应用程序呢？对于桌面系统和其它移动设备又是怎样呢？表1给出了大多数流行平板电脑的屏幕规格。

表1. 各种移动设备的规格比较

	桌面	移动设备	平板电脑
屏幕尺寸	15" laptops 17" – 24" desktops	4.3" Droid X 3.7" Droid 2 3.5" Apple iPhone 4	7" Samsung Galaxy Tab 7" BlackBerry PlayBook 9.7" Apple iPad
分辨率	1024 × 768 (20%) 1280 × 800 (higher 76%)	480 × 854 Droid 2 480 × 854 Droid X 640 × 960 iPhone 4	1024 × 600 Samsung Galaxy Tab 1024 × 600 BlackBerry PlayBook 1024 × 768 Apple iPad
每英寸像素	72	264 Droid 2 227 Droid X 326 ppi iPhone 4G	170 Samsung Galaxy Tab 170 BlackBerry PlayBook 133 Apple iPad
平台	Windows Mac	Android 2.2 iOS	Android 2.2 BlackBerry Tablet OS iOS

合理调整图形尺寸

对于桌面系统来说，你可以轻易地制作一个100像素宽、30像素高的按钮，并且确信用户能够利用鼠标指针选中它，因为其每英寸的像素（或每英寸的点数）是72。而对于平板电脑和移动设备来说，手指替代了鼠标指针并且相应的分辨率不再是72dpi。上述两个因素使得按钮尺寸变得极为重要。

注: 在你处理位图图形时，你必须知道 DPI越大，你的文件尺寸也将越大。参考本文的结尾部分的资源列表，以便了解关于优化图形的更多信息。

手指尺寸

如果你对成人平均指纹进行测量，则它至少为半平方英寸。这就是为什么iOS上的图标为这样尺寸的原因。因此，tat就是你希望的按钮尺寸。但是，你如何能够确保在所有设备上按钮的尺寸均是半平方英寸呢？

每英寸像素

在你学会调整内容尺寸之前，你需要确保所有图形不能自动缩放：

        stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
    

在快速查看这些规格之后，你将发现每英寸像素（ppi）已经发生变化。为了确保一个按钮的面积总是0.5平方英寸，你应该利用0.5乘以相应的ppi（也称为dpi）。在ActionScript 3中，它应该如下所示：

        next_btn.width = 133 * .5;
next_btn.height = 133 * .5;
    

但你的确不需要为每种设备都进行这样的计算。幸运的是，在Adobe Flash Professional中，你可以使用 Capabilities.screenDPI 属性来确定设备的屏幕 DPI。然后，只需将其乘以0.5即可：

        next_btn.width = Capabilities.screenDPI * .5; 
next_btn.height = Capabilities.screenDPI * .5;
    

为了避免太以美国为中心的做法，在你已知以毫米而不是以英寸为单位表示尺寸的情形下，这里给出了一种确定你的按钮像素尺寸的代码版本：

        next_btn.width = Capabilities.screenDPI * (mm / 25.4); 
next_btn.height = Capabilities.screenDPI * (mm / 25.4);
    

始终不忘测试

由于Android 2.2 不是为平板电脑设备设计的版本—尽管市场上存在各种平板电脑设备（例如 Samsung Galaxy Tab）—但当实际分辨率为170时，Capabilities.screenDPI 属性将给出一个错误的分辨率240。因此你必须进行额外的核查并且进行相应的更改：

        if (Capabilities.manufacturer == "Android Linux" && Capabilities.screenResolutionY == 1024)
{
next_btn.width = 85;
next_btn.height = 85;
}
    

图 1 给出了在三种设备尺寸合适的按钮：这三种设备是Droid 2、iPad和 Samsung Galaxy Tab。

图1. 在三种设备上尺寸合适的Play 按钮

下一步阅读方向

如需找到关于 Capabilities.screenDPI 属性的更多信息，请查看下列文章和参考：

在你处理位图图形时，你必须知道 DPI越大，你的文件尺寸也将越大。请参看我的下列视频以便了解关于优化图形的更多信息：

屏幕密度（Screen density） (Adobe TV)
利用ActionScript优化图形（Optimizing graphics with ActionScript） (Adobe TV)
在Flash Professional中优化Stage的图形（Optimizing graphics on the Stage in Flash Professional） (Adobe TV)

此外，你也可以通过使用Adobe Fireworks CS5等工具了解关于优化图形的更多信息：

根据 Creative Commons Attribution-Noncommercial 3.0 Unported License 授予本作品许可。