Template chuẩn để thiết kế trên iPhone and iPad & làm thế nào để sử dụng chúng?

Bài này được thiết kế để cung cấp cho bạn các công cụ & các thông số kỹ thuật mà bạn sẽ cần trong việc thiết kế.



Kích thước chuẩn của Màn hình và Icon

Độ phân giải của màn hình võng mạc là gì ? (Retina Screen)
Màn hình võng mạc iPhone là một điều đặc biệt đáng để xem. Khi xem bên màn hình mới và cũ ở bên cạnh, nó rõ ràng có sự thay đổi trong màn hình này và nó có ảnh hưởng đến việc thiết kế các ứng dụng của bạn. Xem video màn hình side-by-side và so sánh.
Bạn có thể thấy trong việc so sánh hai thiết bị có kích thước màn hình cho iPhone 4 không thay đổi từ mô hình trước đó. Tuy nhiên, cả iPhone 4 màn hình kích thước và mật độ điểm ảnh của màn hình được tăng gấp đôi, cho kích thước màn hình 640 x 960px (so với trước đây 320 x 480px kích thước) và một whopping 326 điểm ảnh trên mỗi inch (so với để 163ppi trước). Màn hình này mới ép 4 điểm ảnh có sử dụng để là một – đó là lý do tại sao những hình ảnh trông rất sắc nét và đẹp hơn!
Khi đọc về độ phân giải màn hình rất dễ dàng để nhanh chóng trở nên bối rối. Thực tế là khi xuất loại tập tin cuối cùng trên iPhone thường. Png và Xcode không xem xét giá trị dpi lưu khi vẽ hình ảnh. Nếu bạn làm theo các kích thước quy định dưới đây, bạn sẽ có trong hình dạng tốt!

Các thông số kỹ thuật cho thiết kế giao diện iPhone & iPad trong Photoshop

iPhone 3.0
Screen resolution: 72 ppi
Screen size: 320 x 480 px
Icon size: 57 x 57 px
File format: PNG-24 iPhone 4.0
Screen resolution: 72 ppi
Canvas size: 640 x 960 px
Icon size: 114 x 114 px
File format: PNG-24 iPad
Screen resolution: 72 ppi
Canvas size: 768 x 1024 px
Icon size: 72 x 72 px
File format: PNG-24

Graphics for the iTunes Store​

Icon: 512 x 512 px (.tif, .jpg or .png, 72dpi, RGB)​

iPhone Screenshots: 320 x 480 px or 640 x 860 px (.tif, .jpg or .png, 72dpi, RGB)​

iPad Screenshots: 1024 x 768 px (.tif, .jpg or .png, 72dpi, RGB)​

Kích thước cho màn hình tương lai

Bạn nên sử dụng các lớp hình dạng hoặc các đối tượng vector là cách tốt nhất để đối phó với sự gia tăng của các kích cỡ màn hình và hệ điều hành. Vì trong tương lai không biết có bao nhiêu smart phone or some things like that ra đời …
Vậy nên thiết kế cho 3.0 hay Retina trước ?

Đối với tôi, thiết kế cho các kích thước màn hình 320 x 480px và sau đó tăng kích thước lên tới 640 x 960px là lựa chọn tốt hơn. Vì khi bạn zoom 1 đối tượng từ nhỏ sang lớn, thì mọi thành phần trong đối tượng đó không mất đi mà chỉ rõ ràng hơn và bạn phải chắc rằng mọi đối tượng trong thiết kế đều phải là file vector.


Kiểm tra thiết kế của bạn

Cách dễ nhất để kiểm tra thiết kế của bạn là “Save for Web” mỗi thiết kế màn hình thành định dạng png. Và đồng bộ với điện thoại của bạn bằng cách sử dụng iPhoto. Một khi những hình ảnh được đồng bộ hóa, bạn có thể lướt qua và mô phỏng những gì các ứng dụng thực tế sẽ như thế. Đây cũng là một cách tuyệt vời để chia sẻ mockups với khách hàng để cung cấp cho họ xem trước của ứng dụng này.
Thiết kế templates cho iPhone & iPad

iPhone Templates
iPhone GUI PSD from Teehan + Lax
iPhone GUI PSD Retina from Teehan + Lax
iPhone Stencil for OmniGraffle from Patrick Crowley
iPhone UI Vector Elements from Mercury Intermedia


iPad Templates

iPad Stencil for OmniGraffle from Information Architects
iPad GUI PSD from Teehan + Lax
iPad Vector GUI from Icon Library


Định dạng tập tin mà tôi dùng cho thiết kề đồ họa iPhone ?

Tất cả các tài sản đồ họa sẽ được sử dụng để xây dựng một ứng dụng được xuất khẩu trong Portable Network Graphics (. Png) định dạng. Về mặt kỹ thuật, iPhone có thể hiển thị các định dạng tập tin khác là tốt, nhưng các tập tin PNG được tự động tối ưu hóa bởi SDK iOS, và do đó nên là định dạng ưa thích.
Điều này áp dụng cho tất cả các yếu tố (nav btn, bars , vv) và các hình ảnh bất kỳ khác trong ứng dụng trình diễn. Ví dụ, chúng ta hãy nói rằng ứng dụng của bạn là một danh mục đầu tư cho một nhiếp ảnh gia. Các bức ảnh trưng bày cũng sẽ được xuất khẩu trong định dạng png.
Các thiết lập để xuất khẩu định dạng png trong Photoshop (File> Save for Web và thiết bị) trông như thế này:

Chuẩn bị file cho developer

Trước khi giao các tập tin của bạn cho một nhà phát triển, điều quan trọng để hiểu khả năng của mình liên quan đến cắt và dicing tập tin của bạn. Nếu nhà phát triển của bạn có nhiều kinh nghiệm trong việc cắt và xuất khẩu, nó có thể là một tiết kiệm thời gian rất lớn để giảm tải nhiệm vụ đó. Cá nhân, tôi thích để cắt tất cả các tập tin của tôi để đảm bảo tất cả các hình ảnh được thái lát ra đúng cách.
Khi lưu hình ảnh cuối cùng của bạn, hãy thử sử dụng quy ước đặt tên tập tin trực quan mà sẽ làm cho vị trí và tham khảo các tập tin hình ảnh chính xác dễ dàng hơn cho các nhà phát triển của bạn. Dưới đây là một số ví dụ tiền tố và hậu tố tôi sử dụng:

• “btn-” for all button images
• “tab-” for all tab bar images
• “bkg-” for all background images
• “-up” for in-active state buttons
• “-down” for active state buttons
• “-hover” for hover state buttons
• “@2x” this is a standard suffix required for all retina display graphics

Một công cụ tôi sử dụng để giao tiếp với các nhà phát triển là một tập tin. Pdf bao gồm tất cả các màn hình cộng với ghi chú liên quan đến thiết kế. Tôi xác định các kiểu chữ, kích cỡ, khoảng cách dòng và tất cả các phong cách khác để có một tài liệu tham khảo dễ dàng mà các nhà phát triển có thể sử dụng mà không cần phải mở Photoshop. Tuy nhiên, một nguồn tài nguyên cung cấp, đặc biệt là khi tôi đang làm việc với các nhà phát triển off-site, là một hình màn ảnh (ScreenFlow và iShowU được yêu thích của tôi) của ứng dụng, đi bộ qua mọi khía cạnh của thiết kế. Điều này đặc biệt hữu ích nếu ứng dụng có chứa hình ảnh động và / hoặc các quá trình chuyển đổi tốt hơn được minh họa trong một video.