User Interface

Trước khi lập trình iOS bạn nên hiểu rõ những thông tin về các thiết bị của Apple để có thể dễ dàng lập trình cho tất cả giao diện của từng thiết bị chạy hệ điều hành iOS.

- Font chữ mặc định (system) của Label trên iOS 9.0 trở lên là "San Francisco". Từ iOS 8.4 trở xuống là "Helvetica" hoặc "HelvetacaNeue". Nguồn tại đây.

Thông tin trên những thiết bị iPhone:

	Độ phân giải	Độ phân giải vật lý	Retina	Thiết bị liên quan	PPI	Tỷ lệ màn hình	Tên Hậu tố	icon cho ứng dụng (bắt buộc)	Left & Right Margins
iPhone XS Max (6.5'')	1242 x 2688	414 x 896	O		458	9:19.5(1:2.16)	@3x	180 x 180	20px
iPhone XR (6.1'')	828 x 1792	414 x 896	O		326	9:19.5(1:2.16)	@2x	180 x 180	20px
iPhone X (5.8'')	1125 x 2436	375 x 812	O	XS	458	9:18(1:2.17)	@3x	180 x 180	20px
iPhone 6+ (5.5'')	1242 x 2208(*) (1080 x 1920)	414 x 736	O	6S+, 7+, 8+	401	9:16(1:1.78)	@3x	180 x 180	20px
iPhone 6 (4.7'')	750 x 1334	375 x 667	O	6S, 7, 8	326	9:16	@2x	120 x 120	16px
iPhone 5 (4'')	640 x 1136	320 x 568	O	5S, 5C	326	9:16	@2x	120 x 120	16px
iPhone SE (4'')	640 x 1136	320 x 568	O		326	9:16	@2x	120 x 120	16px
iPhone 4 (3.5'')	640 x 960	320 x 480	O	4S	326	3:2	@2x	120 x 120	16px
iPhone 3 (3.5'')	320 x 480	320 x 480	X	3S,2,1	163	3:2	@1x	57x57	Unknown

- (*) Riêng màn hình iPhone 6+ và iPhone 6S+ thì độ phân giải sẽ tự động giảm từ 1242x2208 xuống 1080x1920 (87%). Bài giải thích nguyên nhân các bạn có thể xem tại đây.
- Nếu ứng dụng của bạn viết trên nhiều loại màn hình thì nên có tên hậu tố để thiết bị tự động tối ưu cách load hình cho từng loại thiết bị.
- Nếu ứng dụng của bạn chỉ hỗ trợ từ loại màn hình retina trở lên thì có thể khỏi cần tên hậu tố là @2x.

Thông tin trên những thiết bị iPad:

	Độ phân giải	Độ phân giải vật lý	Retina	Những thiết bị liên quan	PPI	Tỷ lệ màn hình	Tên Hậu tố	icon cho ứng dụng (bắt buộc)	Left & Right Margins
iPad Pro (12.9'')	2048 x 2732	1024 x 1366	O		264	3:4	@2x	167 x 167	20px
iPad Air (9.7'')	1536 x 2048	768 x 1024	O	iPad 3, iPad 4, Air 2	264	3:4	@2x	152 x 152	20px
iPad Mini 2 (7.9'')	1536 x 2048	768 x 1024	O	Mini 3,4	326	3:4	@2x	152 x 152	20px
iPad Mini 1 (7.9'')	768 x 1024	768 x 1024	X		163	3:4	@1x	76 x 76	20px
iPad 2 (9.7'')	768 x 1024	768 x 1024	X	iPad 1	132	3:4	@1x	76 x 76	20px

Thông tin trên những thiết bị iWatch:

	Độ phân giải	Độ phân giải vật lý	Retina	Những thiết bị liên quan	PPI	Tỷ lệ màn hình	Tên Hậu tố	icon cho ứng dụng (bắt buộc)
iWatch 38mm (1.32")	272 x 340		O		326	4:5	@2x	172 x 172
iWatch 42mm (1.5")	312 x 390		O		326	4:5	@2x	172 x 172

Ngoài những thông tin trên những hình ảnh cần thiết trước khi bạn submit ứng dụng iPhone và iPad lên trên Apple như:
- Hình ảnh khi launch ứng dụng với kích thước như độ phân giải của từng loại thiết bị. Ví dụ: như iPhone 6 thì hình launch với kích thước là 750 x 1334 (px).
- Icon cho ứng dụng hiển thị trên App Store với kích thước là 1024 x 1024 (px).
Lưu ý: Nếu bạn không có những hình ảnh này thì Apple sẽ reject ứng dụng của bạn.

Thông tin chi tiết phần cứng của những thiết bị của Apple các bạn có thể xem tại đây.

Tài liệu tham khảo:

- iOS HIG.
- iOS design.
- iOS icon.
- iWatch icon size.