Kích thước được sử dụng cho màn hình hiển thị ứng dụng iOS là gì?


96

Tôi đang phát triển một ứng dụng bằng iOS SDK. Tôi cần biết những Defaultkích thước màn hình giật gân nào tôi cần.


2
Hãy nhớ rằng iOS không khuyến khích sử dụng Splash Screens. Thay vào đó, hãy sử dụng Hình ảnh Khởi chạy. Chúng giống nhau về mặt kỹ thuật, nhưng khác nhau về khái niệm. Màn hình Splash thường được sử dụng làm hình ảnh thương hiệu, trong khi Màn hình khởi chạy là hình ảnh hiển thị trước của giao diện người dùng của bạn để tạo cho người dùng ấn tượng rằng ứng dụng đang tải nhanh hơn. Kiểm tra Đường nét giao diện con người iOS về mối quan tâm này
Hugo A

Câu trả lời:


179

Cập nhật 2018 - Vui lòng không sử dụng thông tin này!

Tôi để lại bài viết dưới đây cho mục đích tham khảo.

Vui lòng đọc tài liệu của Apple Nguyên tắc Giao diện Con người - Màn hình Khởi chạy để biết chi tiết về màn hình khởi chạy và các đề xuất.

Cảm ơn
Drekka


Tháng 7 năm 2012 - Vì câu trả lời này đã khá cũ, nhưng ảnh tĩnh có vẻ phổ biến. Tôi đã viết một bài blog dựa trên doco của Apple và đặt nó trên blog của tôi . Tôi hy vọng các bạn thấy nó hữu ích.

Đúng. Trong quá trình phát triển iPhone / iPad Default.png, thiết bị sẽ tự động hiển thị tệp nên bạn không cần phải lập trình nó thực sự hữu ích. Tôi không có nó bên mình, nhưng bạn cần các PNG khác nhau cho iPad với các tên cụ thể. Tôi đã truy cập vào Google iPad default pngvà nhận được thông tin này từ trang phunkwerks :


Định hướng hình ảnh khởi chạy iPad

Để đối phó với các tùy chọn định hướng khác nhau, một quy ước đặt tên mới đã được tạo cho các hình ảnh khởi động iPad. Kích thước màn hình của iPad là 768 × 1024, hãy để ý kích thước theo chiều cao có tính đến thanh trạng thái 20 pixel.

Kích thước tên tệp

  • Default-Portrait.png * - 768w x 1024h
  • Default-PortraitUpsideDown.png - 768w x 1024h
  • Default-Landscape.png ** - 1024w x 748h
  • Default-LandscapeLeft.png - 1024w x 748h
  • Default-LandscapeRight.png - 1024w x 748h
  • iPad-Retina–Portrait.png - 1536w x 2048h
  • iPad-Retina–Landscape.png - 2048w x 1496h
  • Default.png - Không được khuyến khích

* —Nếu bạn chưa chỉ định Default-PortraitUpsideDown.pngtệp, tệp này sẽ được ưu tiên.

** - Nếu bạn chưa chỉ định tệp Default-LandscapeLeft.pnghoặc Default-LandscapeRight.pngtệp hình ảnh, tệp này sẽ được ưu tiên.

Liên kết tới "Thư viện nhà phát triển của Apple" cũng hữu ích.


16
Lưu ý rằng Default.png là những gì được sử dụng cho iPhone khi chạy ứng dụng phổ biến trên thiết bị đó, vì vậy nó cần phải là hình ảnh chuẩn 320 x 480 hoặc 320 x 460 của bạn. "Không khuyến nghị" chỉ dành cho các ứng dụng chỉ dành cho iPad.
Brad Larson

2
Cảm ơn! Tôi hiện đang sử dụng Default-Portrait.png với 768w x 1024h kích thước này dường như cũng hoạt động.
powtac

1
Theo mặc định, ứng dụng của tôi sẽ hoạt động ở chế độ Ngang. Nhưng làm cách nào để chỉ định hình ảnh mặc định ngang cho iPhone?
Satyam

2
Cần lưu ý rằng nếu bạn đang sử dụng các phiên bản được bản địa hóa, bạn cần xóa các tệp này khỏi thư mục gốc và đưa chúng vào thư mục <language> .lproj của bạn.
Jose Muanis

3
Liên kết đến blog trong bài viết không hoạt động nữa. Liên kết trên đến web nhà phát triển của Apple cũng không hoạt động nữa.
thể chất vào

31

Kể từ tháng 7 năm 2013 (iOS 6), đây là những gì chúng tôi luôn sử dụng:

IPHONE SPLASH 
Default.png - 320 x 480
Default@2x.png - 640 x 960 
Default-568h@2x.png - 640 x 1096 (with status bar)
Default-568h@2x.png - 640 x 1136 (without status bar)

IPAD SPLASH 
iPadImage-Appname-Portrait.png * 768w x 1004h (with status bar)
iPadImage-Appname-Portrait@2x.png * 1536w x 2008h (with status bar)
iPadImage-Appname-Landscape.png ** 1024w x 748h (with status bar)
iPadImage-Appname-Landscape@2x.png ** 2048w x 1496h (with status bar)

iPadImage-Appname-Portrait.png * 768w x 1024h (without status bar)
iPadImage-Appname-Portrait@2x.png * 1536w x 2048h (without status bar)
iPadImage-Appname-Landscape.png ** 1024w x 768h (without status bar)
iPadImage-Appname-Landscape@2x.png ** 2048w x 1536h (without status bar)

ICON
Appname-29.png
Appname-29@2x.png
Appname-50.png
Appname-50@2x.png
Appname-57.png
Appname-57@2x.png
Appname-72.png
Appname-72@2x.png
iTunesArtwork (512px x 512px)
iTunesArtwork@2x (1024px x 1024px)

4
Không nên Mặc định-568h@2x.png là 640 x 1136?
UXUiOS

16

Đối với iOS7, tạo hình ảnh khởi chạy ở các kích thước sau:

Đối với iPhone 5 và iPod touch (thế hệ thứ 5):

  • 640 x 1136 điểm ảnh

Đối với các thiết bị iPhone và iPod touch khác:

  • 640 x 960 pixel
  • 320 x 480 pixel (độ phân giải tiêu chuẩn)

Đối với iPad dọc:

  • 1536 x 2048 pixel
  • 768 x 1024 pixel (độ phân giải tiêu chuẩn)

Đối với iPad ngang:

  • 2048 x 1536 pixel
  • 1024 x 768 pixel (độ phân giải tiêu chuẩn)

Xem Tài nguyên thiết kế iOS 7> Nguyên tắc giao diện con người iOS> Khởi chạy hình ảnh

CẬP NHẬT 1

Đối với iPhone 6:

  • 750 x 1334 (@ 2x) cho dọc
  • 1334 x 750 (@ 2x) cho ngang

Đối với iPhone 6 Plus:

  • 1242 x 2208 (@ 3x) cho dọc
  • 2208 x 1242 (@ 3x) cho chiều ngang

CẬP NHẬT 2

Đối với iPhone X:

  • 1125 x 2436 (@ 3x) cho dọc
  • 2436 x 1125 (@ 3x) cho chiều ngang

Anh bạn, bạn có thể vui lòng kiểm tra câu hỏi của tôi stackoverflow.com/questions/43955856/… ?
Có thể Phyu

1
Tôi ước gì có một bảng đẹp ở đây với tên tệp và độ phân giải hình ảnh cho mỗi mục nhập, ôi và quên iOS 5,6,7. chúng ta đang ở vào năm 2017.
computingfreak

8

Bạn có thể đặt chúng là 1024 x 768. Bạn cũng có thể kiểm tra "Thanh trạng thái ban đầu bị ẩn" trong tệp plist.


5

Cập nhật 2020 - Xcode 11

Trong đó Xcode 11, bạn chỉ có thể cung cấp một hình ảnh có tỷ lệ 1x, 2x và 3x sau đó đặt nó LaunchScreen.storyboardđể lấp đầy màn hình và mọi thứ diễn ra tốt đẹp!

Ví dụ: (1242pt x 2688pt @ 1x)

Đây là kích thước màn hình dọc của iPhone 11 Pro Max , đây là kích thước màn hình iPhone lớn nên nó sẽ cung cấp cho bạn màn hình giật gân chất lượng cao trên tất cả các thiết bị iOS.

Cập nhật 2019 - iOS 12

Tôi đã thu thập tất cả các kích thước cần thiết cho màn hình giật gân. Tất cả những gì bạn cần là chỉ cần kéo hình ảnh với các kích thước này và thả chúng, Xcode sẽ đặt từng kích thước vào đúng vị trí.

Chúc may mắn.

Kích thước:

320 × 480

640 × 960

640 × 1136

750 × 1334

768 × 1004

768 × 1024

828 × 1792

1024 × 748

1024 × 768

1125 × 2436

1242 × 2208

1242 × 2688

1536 × 2008

1536 × 2048

1792 × 828

2048 × 1496

2048 × 1536

2208 × 1242

2436 × 1125

2688 × 1242

Ghi chú

Số lượng hình ảnh yêu cầu là 26 hình ảnh nhưng có 6 kích thước trùng lặp nên bạn sẽ thấy kích thước trên chỉ là 20.


Vì vậy, tôi cần 20 hình ảnh khác nhau chỉ cho màn hình giật gân? Nghiêm túc?
Tejas K

Đúng. Điều đó không khó đến vậy đâu! Nhà thiết kế của bạn nên làm điều đó một cách dễ dàng.
Essam Mohamed Fahmi

Bạn có thể sử dụng bất kỳ trình tạo màn hình giật gân trực tuyến nào .. vì vậy bằng cách cung cấp một hình ảnh duy nhất .. nó sẽ tạo ra tất cả các hình ảnh giật gân theo yêu cầu ở mọi kích thước
kumar

3

Ở đây tôi có thể thêm Độ phân giải và Thông số kỹ thuật hiển thị cho kích thước iphone 6 & 6+:

iPhone 6+ - Độ phân giải nội dung (@ 3x) - Độ phân giải (2208 x 1242) px

iPhone 6 - Độ phân giải nội dung (@ 2x) - Độ phân giải (1334 x 750) px

iPad Air / Retina iPad (Thế hệ 1 & 2/3 & 4) - Độ phân giải nội dung (@ 2x) - Độ phân giải (2048 x 1536) px

iPad Mini (Thế hệ thứ 2 & 3) - Độ phân giải nội dung (@ 2x) - Độ phân giải (2048 x 1536) px

iPhone (6, 5S, 5, 5C, 4S, 4) - Biểu tượng ứng dụng (120x120 px) - Biểu tượng AppStore (1024x1024 px) - Tiêu điểm (80x80 px) - Cài đặt (58x58 px)

iPhone (6+) - Biểu tượng ứng dụng (180x180 px) - Biểu tượng AppStore (1024x1024 px) - Tiêu điểm (120x120 px) - Cài đặt (87x87 px)


iPhone 6+ độ phân giải là 1242x 2208. [( developer.apple.com/library/ios/documentation/UserExperience/…
Sumeet Mourya

Đối với iPhone 6: 750 x 1334 (@ 2x) đối với dọc 1334 x 750 (@ 2x) đối với phong cảnh Đối với iPhone 6 Plus: 1242 x 2208 (@ 3x) đối với dọc 2208 x 1242 (@ 3x) đối với phong cảnh
imti

@imti, Bạn có thể vui lòng xem câu hỏi của tôi stackoverflow.com/questions/43955856/… anh bạn được không?
Tháng 5 Phyu

@MayPhyu Xin lỗi anh bạn, tôi đã mất liên lạc vì lý do đột ngột. Tôi hy vọng vấn đề của bạn đã được giải quyết. Nếu nó vẫn chưa được xử lý, hãy cho tôi biết.
imti

anh bạn @imti, không sao đâu anh bạn. Nó đã được sửa. Nhưng, tôi có bất kỳ vấn đề. Bạn vui lòng giúp tôi kiểm tra liên kết này stackoverflow.com/questions/44304498/… ?
May Phyu

3

Đối với Xcode 9 và các thiết bị mới nhất

Chân dung

iPhone 4 / 4S 640 x 960

iPhone 5 / 5C / 5S iPod touch thế hệ thứ 5 640 x 1136

iPhone 6/7/8 7 50 x 1334

iPhone 6/7/8 Plus 1242 x 2208

iPhone X 1125 x 2436

iPad không võng mạc 768 x 1024

iPad Retina 1536 x 2048

Phong cảnh

iPhone 6, 7 và 8 cộng với 2208 x 1242

iPhone X 2436 x 1125

iPad không võng mạc 1024 x 768

iPad retina 2048 x 1536



1

Với ứng dụng phổ quát, tôi đã thấy màn hình giật gân của iPad hiển thị trong trình mô phỏng nhưng không hiển thị trên thiết bị. Thay vào đó, iPad sẽ hiển thị màn hình Default.png cho iPhone. Tệp Default-Landscape.png và Default-Portrait.png hiện có, vậy bạn có muốn làm gì không? Độ phân giải phải chính xác vì tôi đã tạo ảnh chụp màn hình bằng Window | Ban tổ chức | Ảnh chụp màn hình và sử dụng 'Lưu dưới dạng Hình ảnh Mặc định' cho iPad, sau đó chỉ cần đổi tên nó.

Hóa ra (từ một ứng dụng của tôi), hai ảnh chụp màn hình iPad phải được chuyển đến thư mục Tài nguyên-iPad. Sau đó, tất cả hoạt động tốt. Bây giờ thì có vẻ rõ ràng, nhưng đề phòng có ai khác mất ngủ vì chuyện này ... -Larry


1

Đối với Nhà phát triển Adobe AIR iOS, hãy lưu ý rằng nếu hình ảnh Splash trên iPad của bạn "thay đổi" hoặc hiển thị và chia tỷ lệ sau một giây, đó là vì có các kích thước khác nhau tùy thuộc vào phiên bản AIR bạn đang sử dụng.

Mặc định-Portrait.png:
768 x 1004 (AIR 3.3 trở về trước)
768 x 1024 (AIR 3.4 trở lên)

Default-Portrait@2x.png:
1536 x 2008 (AIR 3.3 trở về trước)
1536 x 2048 (AIR 3.4 trở lên)

Tham khảo:
http://help.adobe.com/en_US/air/build/WS901d38e593cd1bac1e63e3d129907d2886-8000.html#WS901d38e593cd1bac58d08f9112e26606ea8-8000

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.