針對不同移動設備的分辨率設計，即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

回答

相關問題