针对不同移动设备的分辨率设计，即iPhone 4和iPhone 3G

随着设计社区转向设计移动设备应用程序接口，出现了一个新问题：变化的屏幕DPI。这里的情况：针对不同移动设备的分辨率设计，即iPhone 4和iPhone 3G

触摸：

* iPhone 3G/S ~ 160 dpi 
* iPhone 4 ~ 300 dpi 
* iPad ~ 126 dpi 
* Android device @ 480p ~ 200 dpi

点/点击：

* Laptop @ 720p ~ 96 dpi 
* Desktop @ 720p ~ 72 dpi

当然是有台式机和移动设备之间有明显的区别，以便有两个独立的前端相同的应用程序是合乎逻辑的，特别是当考虑一个是“触摸”的，另一个是“点/点”的。

我们面临的挑战在于设计静态图形元素，例如160dpi和300dpi之间的缩放比例，并在缩放级别上获得一致且干净的设计。有关如何解决这个问题的任何想法？以下是一些情况，但每种情况都有缺陷：

* Design a single set of assets (high resolution), then adjust zoom levels based on detected resolution/device 
     o Drawbacks: Performance caused by code layering, varying device support of Zoom 
* Develop & optimize multiple variations of image and CSS assets, then hide/show each based on device 
     o Drawbacks: Extra work in design & QA.

任何人有关于如何处理此问题的想法或经验？我们当然应该研究使用/支持HTML5和CSS3的方法。

来源

2010-06-07 Joshua

为什么你在电脑显示器上使用电视分辨率？对于体面的笔记本电脑而言，720p是相当破旧的，更不用说任何桌面。 – 2010-06-07 20:48:33

这实质上是普通用户分辨率设置的简写。我的经验是，普通用户倾向于设置他们的显示器以尝试增加字体大小。此外，大多数上网本和笔记本电脑在默认情况下都拥有720p的区域。 – Joshua 2010-06-07 22:30:10

这不是我第一次不得不面对这个问题。徘徊很长时间，你会看到一切。

我在选项二下。在许多情况下，最好牺牲开发时间以提高使用性能。我们通过让客户满意而不是靠节省自己的汗水成功。哪种用途改善了用户体验，而应用程序实用程序则是要走的路。

现在，您可以获得批量图像处理器，您可以根据高分辨率源图像设置出各种分辨率和尺寸。这使得几乎15分钟的工作产生多个解决方案。

来源

2010-06-07 20:58:08 TechZen

针对不同移动设备的分辨率设计，即iPhone 4和iPhone 3G

回答

相关问题