다양한 모바일 장치 해상도 (예 : iPhone 4 및 iPhone 3G)를위한 설계

Question

디자인 커뮤니티가 모바일 장치 용 & 인터페이스 디자인을 설계하면서 새로운 문제가 발생했습니다. 다양한 화면 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 

그래서 같은 응용 프로그램에 두 개의 프론트 엔드를 가진 데스크탑과 모바일 사이에 명확한 구분이 확실히있다이다 특히 "터치"기반이고 다른 하나는 "포인트/클릭"기반이라고 생각할 때 논리적입니다.

도전 과제는 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

이 문제를 처리 한 것은 처음이 아닙니다. 충분히 오래 기다리면 모든 것을 볼 수 있습니다.

두 번째 옵션이 나옵니다. 방대한 양의 상황에서 사용중인 성능 향상을 위해 개발 시간을 희생하는 것이 좋습니다. 우리는 고객을 행복한 곳으로 만들어서 성공할 수 있습니다. 어느 것을 사용하면 사용자 환경이 개선되고 apps 유틸리티를 사용하는 것이 좋습니다.

요즘 고해상도 원본 이미지를 기반으로 다양한 해상도와 크기를 만들 수있는 배치 이미지 프로세서를 구할 수 있습니다. 따라서 여러 번의 해상도로 15 분이 걸릴 수 있습니다.