Việc thiết kế ứng dụng iOS đôi khi có thể là một nhiệm vụ khó khăn, nhưng việc tìm kiếm thông tin chính xác và cập nhật về tất cả các thiết bị của Apple thì không nên như vậy. Những nguyên tắc thiết kế này sẽ giúp bất kỳ nhà thiết kế nào muốn xây dựng những ứng dụng gọn gàng cho iOS có thể bắt đầu chỉ trong vòng vài giây.
Những nguyên tắc sau đây mô tả cách thiết kế các ứng dụng tuân theo HIG chính thức cho iOS của Apple, chứ không phải những gì bạn có thể làm với các tính năng kiểm soát tùy chỉnh. Mục đích của tài liệu này là hướng dẫn bạn những điều cơ bản, chứ không cung cấp giải pháp cho những vấn đề thiết kế phức tạp và độc đáo.
Độ phân giải và thông số kỹ thuật màn hình
Thiết bị | Màn hình Retina | Kích thước dọc (px) | Kích thước ngang (px) |
---|---|---|---|
iPhone XS Max | Retina HD | 1242 x 2688 | 2688 x 1242 |
iPhone XR | Retina | 828 x 1792 | 1792 x 828 |
iPhone X, XS | Retina HD | 1125 x 2436 | 2436 x 1125 |
iPhone 6+, 6S+, 7+, 8+ | Retina HD | 1080 x 1920 | 1920 x 1080 |
iPhone 6, 6S, 7, 8 | Retina | 750 x 1334 | 1334 x 750 |
iPhone 5, 6SE (5, 5S, 5C, 6SE) | Retina | 640 x 1136 | 1136 x 640 |
iPhone 4 (4, 4S) | Retina | 640 x 960 | 960 x 640 |
iPhone (Thế hệ 1, 2 & 3) | Không | 320 x 480 | 480 x 320 |
iPad Air/Retina iPad (Thế hệ 1 & 2/3 & 4) | Retina | 1536 x 2048 | 2048 x 1536 |
iPad Pro (12.9" 2018) | Retina | 2048 x 2732 | 2732 x 2048 |
iPad Pro (11" 2018) | Retina | 1668 x 2388 | 2388 x 1668 |
iPad Pro thế hệ 1 (10.5") | Retina | 1668 x 2224 | 2224 x 1668 |
iPad Mini (Thế hệ thứ 2, 3 & 4) | Retina | 1536 x 2048 | 2048 x 1536 |
iPad (Mini, thế hệ 1 và 2) | Không | 768 x 1024 | 1024 x 768 |
Sự khác biệt giữa Point và Pixel
Pixel là yếu tố vật lý nhỏ nhất mà ta có thể kiểm soát trên màn hình kỹ thuật số. Càng nhiều pixel xuất hiện trên một kích thước màn hình cụ thể, PPI (pixel per inch) càng cao và nội dung được hiển thị càng rõ ràng.
Point là một đơn vị đo độc lập với độ phân giải. Tùy thuộc vào mật độ pixel màn hình, một point có thể chứa nhiều pixel (ví dụ, 1pt chứa 2 x 2pixel trên màn hình retina thông thường).
Khi thiết kế ứng dụng cho các loại màn hình khác nhau, bạn nên suy nghĩ dựa theo point, nhưng thiết kế bằng pixel. Điều này có nghĩa là bạn vẫn sẽ cần xuất tất cả asset của mình theo 3 độ phân giải khác nhau, bất kể bạn đang thiết kế ứng dụng nào, ở độ phân giải bao nhiêu.
Chú thích:
Nếu không được chú thích thêm (bằng cách thêm px vào một giá trị), thì hướng dẫn này luôn đề cập đến point khi nói đến các kích thước cụ thể. Nếu bạn cần giá trị tính bằng pixel, chỉ cần nhân 2 cho màn hình Retina hoặc 3 cho màn hình Retina HD.
Thiết bị | Độ phân giải asset | PPI | Kích thước màn hình |
---|---|---|---|
iPhone XS Max | @3x | 458 | 6.5″ |
iPhone XR | @2x | 326 | 6.1″ |
iPhone X, XS | @3x | 458 | 5.8″ |
iPhone 6+, 6S+, 7+, 8+ | @3x | 401 | 5.5″ |
iPhone 6, 6S, 7, 8 | @2x | 326 | 4.7″ |
iPhone 5, 6SE (5, 5S, 5C, 6SE) | @2x | 326 | 4.0″ |
iPhone 4 (4, 4S) | @2x | 326 | 3.5″ |
iPhone (Thế hệ 1, 2 & 3) | @1x | 163 | 3.5″ |
iPad Pro (12.9" 2018) | @2x | 264 | 12.9″ |
iPad Pro (11" 2018) | @2x | 264 | 11″ |
iPad Pro tthế hệ 1 (10.5") | @2x | 264 | 10.5″ |
iPad Air/Retina iPad (Thế hệ 1 & 2/3 & 4) | @2x | 264 | 9.7″ |
iPad Mini (Thế hệ thứ 2, 3 & 4) | @2x | 326 | 7.9″ |
iPad Mini (Thế hệ thứ 1) | @1x | 163 | 7.9″ |
iPad (Thế hệ thứ 1 & 2) | @1x | 132 | 9.7″ |