Question

随着设计界开始设计应用程序＆amp;移动设备的接口出现了一个新问题：改变屏幕DPI。情况如下：

触：

* 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

桌面和移动设备之间肯定有明显的区别，因此在同一个应用程序中有两个独立的前端是合乎逻辑的，特别是当考虑一个是基于“触摸”的而另一个是基于“点/点击”的时候。 / p>

挑战在于设计可在160 dpi和300 dpi之间缩放的静态图形元素，并在缩放级别上获得一致且干净的设计。有关如何处理此问题的任何想法？以下是一些场景，但每个场景都有缺点：

* 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的方法。

Answer 1

这不是我第一次处理这个问题。闲逛很长时间，你会看到一切。

我选择了第二选项。在很多情况下，最好是牺牲开发时间以提高使用性能。我们通过让客户满意而不是为自己节省一些汗水而取得成功。哪种使用改善了用户体验，应用程序实用程序是最佳选择。

现在，您可以获得批量图像处理器，您可以设置这些处理器以基于高分辨率源图像生成各种分辨率和大小。这使得产生多个分辨率的工作差不多是15分钟。

设计不同的移动设备分辨率，即iPhone 4＆amp; iPhone 3G

1 个答案: