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

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

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

目录

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

要求

预备知识:

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

需要下列产品：

• Flash Professional (下载试用版)

屏幕规格

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

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

桌面
移动设备
平板电脑
屏幕尺寸15" laptops
17" – 24" desktops4.3" Droid X
3.7" Droid 2
3.5" Apple iPhone 47" 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 41024 × 600 Samsung Galaxy Tab
1024 × 600 BlackBerry PlayBook
1024 × 768 Apple iPad每英寸像素72264 Droid 2
227 Droid X
326 ppi iPhone 4G*170 Samsung Galaxy Tab
170 BlackBerry PlayBook
133 Apple iPad平台
Windows
MacAndroid 2.2
iOSAndroid 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 属性的更多信息，请查看下列文章和参考：

• 创建适用于多种屏幕尺寸的移动Flash内容（Authoring mobile Flash content for multiple screen sizes）
• flash.systemCapabilities类（flash.systemCapabilities class）（Flash Platform的 ActionScript 3参考资料 ）
• mx.coreRuntimeDPIProvider类（mx.coreRuntimeDPIProvider class）（Flash Platform的 ActionScript 3参考资料）
  

在你处理位图图形时，你必须知道 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等工具了解关于优化图形的更多信息：

• Fireworks的设计学习指南：优化多导出文件（Design Learning Guide for Fireworks: Optimizing files for multiple exports）*
• 优化及导出图形（Optimizing and exporting graphics） (Fireworks documentation)

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

关于作者

Paul Trani是Adobe的一名技术传教士。他在Adobe TV上主持一个系列视频教程*， 演示如何将Adobe Flash Professional集成到设计工作流中，从而在Web和移动领域发挥更大作用。Paul同时积极在各种会议和用户组中提供专家建议和指导。他的博客是： paultrani.com*.

原文链接：http://www.adobe.com/cn/devnet/devices/articles/sizing-graphics-across-screens.html