Màn hình iPhone X: Kích thước và những điểm đặc biệt

iPhone X sở hữu màn hình Super Retina lớn, độ phân giải cao, bo tròn, viền màn hình siêu mỏng mang đến trải nghiệm phong phú và sâu sắc hơn bao giờ hết cho những tín đồ iPhone.

Kích thước màn hình

Theo chiều dọc, chiều rộng màn hình iPhone X khớp với chiều rộng màn hình 4,7 icnh của iPhone 6, iPhone 7 và iPhone 8. Tuy nhiên, màn hình iPhone X cao hơn 145pt màn hình 4,7 inch, điều này làm tăng thêm 20% không gian theo chiều dọc cho nội dung.

Cung cấp hình ảnh có độ phân giải cao cho tất cả các artwork trong ứng dụng

iPhone X có màn hình Super Retina có độ phân giải cao với hệ số tỷ lệ @3x. Đối với glyph và các artwork vector phẳng khác, nó cung cấp các tệp PDF với độ phân giải riêng. Đối với các artwork đã được rasterize, thiết bị cung cấp cả hai phiên bản @3x và @2x.

Bố cục

Khi thiết kế cho iPhone X, người dùng cần đảm bảo bố cục lấp đầy màn hình và không bị che khuất bởi các góc bo tròn, vỏ cảm biến hoặc chỉ báo truy cập màn hình chính.

Hầu hết các ứng dụng sử dụng các yếu tố giao diện người dùng chuẩn và được hệ thống cung cấp như thanh điều hướng, bảng và bộ sưu tập tự động sẽ tự động thích ứng với yếu tố hình thức mới của thiết bị. Background material (tài liệu nền) mở rộng đến các cạnh của màn hình và các yếu tố giao diện người dùng được nhập và đặt một cách hợp lý.

Đối với các ứng dụng có bố cục tùy chỉnh cũng tương đối dễ dàng, đặc biệt nếu ứng dụng sử dụng giao diện Auto Layout và tuân thủ các hướng dẫn bố trí vùng an toàn và lề.

Xem trước ứng dụng trên iPhone X

Người dùng có thể sử dụng Simulator (có trong Xcode) để xem trước ứng dụng và kiểm tra các vấn đề clipping (cắt) và các vấn đề bố cục khác. Nếu ứng dụng hỗ trợ chế độ nằm ngang, đảm bảo bố cục trông tuyệt vời bất kể thiết bị đã được xoay sang trái hay phải. Chế độ lộn ngược theo chiều đứng không được iPhone X hỗ trợ. Một số tính năng như nâng cấp màu mở rộng được xem trước tốt nhất trên các thiết bị thực tế.

Cung cấp trải nghiệm toàn màn hình

Đảm bảo nền mở rộng đến các cạnh của màn hình và các bố cục cuộn theo chiều dọc.

Thiết lập nội dung cần thiết để ngăn chặn vấn đề cắt bỏ nội dung

Nói chung, nội dung nên được căn giữa và đối xứng để trông tuyệt vời ở bất kỳ hướng nào và không bị che khuất bởi góc hoặc vỏ của cảm biến thiết bị hoặc chỉ báo để truy cập màn hình chính. Để có kết quả tốt nhất, hãy sử dụng các phần tử giao diện được hệ thống cung cấp và Auto Layout để xây dựng giao diện. Tất cả các ứng dụng phải tuân theo vùng an toàn và lề bố cụ được xác định bởi UIKit, đảm bảo các thiết lập insetting phù hợp dựa trên thiết bị và ngữ cảnh. Khu vực an toàn cũng ngăn nội dung khỏi chồng chéo lên thanh trạng thái, thanh điều hướng, thanh công cụ và thanh tab.

Chiều cao thanh trạng thái

Thanh trạng thái trên iPhone X cao hơn so với các phiên bản iPhone khác. Nếu ứng dụng có chiều cao thanh trạng thái cố định để định vị nội dung bên dưới thanh trạng thái, bạn cần phải cập nhật ứng dụng để tự động định vị nội dung dựa trên thiết bị. Lưu ý rằng thanh trạng thái trên iPhone X không thay đổi chiều cao khi các tác vụ nền như ghi âm và theo dõi vị trí đang hoạt động.

Trong trường hợp ứng dụng hiện đang ẩn trong thanh trạng thái:

Chiều cao màn hình trên iPhone cung cấp không gian theo chiều dọc cho nội dung nhiều hơn màn hình iPhone 4.7 inch và thanh trạng thái chiếm một diện tích màn hình nên các ứng dụng không thể sử dụng đầy đủ. Thanh trạng thái cũng hiển thị thông tin mọi người thấy hữu ích, vậy nên chỉ ẩn khi có thông tin quan trọng hơn.

Hãy chú ý đến sự khác biệt về tỷ lệ khung hình khi sử dụng lại các artwork hiện có

iPhone X có tỷ lệ khung hình khác so với iPhone màn hình 4,7 inch. Do vậy, hình ảnh toàn màn hình trên màn hình iPhone 4,7 sẽ bị cắt hoặc letterbox khi hiển thị toàn màn hình trên iPhone X. Tương tự như vậy, hình ảnh toàn màn hình trong iPhone X sẽ bị cắt xén hoặc pillarbox khi hiển thị toàn màn hình trên iPhone màn hình 4,7 inch. Hãy chắc chắn rằng nội dung hình ảnh quan trọng vẫn có thể xem được trên cả hai kích thước hiển thị.

Tránh điều khiển tương tác rõ ràng ở cuối màn hình và góc

Mọi người sử dụng cử chỉ vuốt ở cạnh dưới cùng của màn hình để truy cập vào màn hình chính và trình chuyển đổi ứng dụng. Tuy nhiên những cử chỉ này có thể hủy các cử chỉ tùy chỉnh thực hiện trong khu vực này. Các góc xa của màn hình có thể là khu vực khó tiếp cận của màn hình.

Không ẩn hoặc chú ý đặc biệt đến các tính năng hiển thị chính.

Không cố gắng ẩn các góc tròn, vỏ cảm biến hoặc chỉ báo để truy cập màn hình chính bằng cách đặt các thanh màu đen ở trên cùng và dưới cùng của màn hình. Không sử dụng các đồ trang trí thị giác như khung, hình dạng hoặc văn bản để gây chú ý đặc biệt đến các khu vực này.

Cho phép ẩn tự động chỉ báo để truy cập vào màn hình chính

Khi kích hoạt tự động ẩn, chỉ báo sẽ mờ dần nếu người dùng không chạm vào màn hình trong vài giây. Nó xuất hiện lại khi người dùng chạm vào màn hình một lần nữa. Hành vi này chỉ nên kích hoạt cho các trải nghiệm xem thụ động như xem video hoặc trình chiếu ảnh.

Màu sắc

Màn hình hiển thị trên iPhone X hỗ trợ không gian màu P3, có thể tạo ra màu sắc phong phú hơn, bão hòa hơn so với sRGB.

Sử dụng tăng cường màu rộng để nâng cao trải nghiệm thị giác

Ảnh và video sử dụng màu sắc rộng giống hệt nhau và dữ liệu hình ảnh và các chỉ báo trạng thái sử dụng màu rộng có tác động mạnh hơn.

Video

Trình phát video có sẵn trong hệ thống cung cấp hai chế độ xem: toàn màn hình và phù hợp với khung hình. Theo mặc định, hệ thống sẽ chọn chế độ xem dựa trên tỷ lệ khung hình của video và người dùng có thể chuyển đổi chế độ trong quá trình phát.

Chế độ xem toàn màn hình

Tỷ lệ video sẽ lấp đầy màn hình hiển thị. Có thể xảy ra sự cắt xén cạnh. Đây là chế độ xem mặc định cho video rộng (2:1 đến 2.40:1).

Chế độ xem phù hợp với khung hình

Toàn bộ video được hiển thị trên màn hình, có thể xảy ra trường hợp letterbox và pillarbox. Đây là chế độ xem mặc định cho video tiêu chuẩn (4:3, 16:9 và bất cứ tiêu chuẩn nào trên 2:1) và video cực rộng (trên 2.40: 1).

Đảm bảo trình phát video tùy chỉnh hoạt động như mong đợi

Mục tiêu là lấp đầy màn hình theo mặc định khi phát nội dung video trên iPhone X. Tuy nhiên, nếu việc làm đầy màn hình hiển thị có thể dẫn đến quá trình cắt xén nên video phải được thu nhỏ để phù hợp với khung hình. Người dùng cũng nên chuyển đổi giữa chế độ xem toàn màn hình và chế độ phù hợp khuôn hình dựa trên sở thích cá nhân.

Luôn hiển thị nội dung video ở tỷ lệ khung hình gốc

Nếu nội dung video sử dụng letterbox hoặc pillarbox để phù hợp với tỷ lệ khung hình cụ thể, iOS sẽ không thể định tỷ lệ video chính xác dựa trên chế độ xem của người dùng. Sử dụng padding được nhúng trong khung video có thể làm cho video xuất hiện nhỏ hơn ở chế độ toàn màn hình và chế độ phù hợp với khung hình. Nó cũng ngăn cản video được hiển thị chính xác trong các ngữ cảnh không phải toàn màn hình, như chế độ Picture in Picture trên iPad.

Cử chỉ

Màn hình trên iPhone X sử dụng cử chỉ cạnh màn hình để cung cấp quyền truy cập vào màn hình chính, chuyển đổi ứng dụng, Notification Center và Control Center.

Tránh can thiệp các cử chỉ cạnh màn hình

Mọi người dựa vào những cử chỉ này để sử dụng mọi ứng dụng. Trong một số trường hợp hiếm hoi, các ứng dụng lôi cuốn như trò chơi có thể yêu cầu các cử chỉ cạnh màn hình tùy chỉnh được ưu tiên hơn các cử chỉ của hệ thống, lần vuốt đầu tiên thúc đẩy cử chỉ dành riêng cho ứng dụng và vuốt lần thứ hai sẽ kích hoạt cử chỉ của hệ thống. Hành vi này (được gọi là edge protect) không nên sử dụng nhiều, vì nó làm cho người dùng khó tiếp cận các hành động cấp hệ thống hơn.

Các thiết kế bổ sung

Phương pháp xác thực tham chiếu một cách chính xác

iPhone X hỗ trợ Face ID để xác thực. Nếu ứng dụng tích hợp với Apple Pay hoặc các tính năng xác thực hệ thống khác, người dùng không nên sử dụng Touch ID trên iPhone X. Tương tự, đảm bảo rằng ứng dụng không tham chiếu Face ID trên các thiết bị hỗ trợ Touch ID.

Không lặp lại các tính năng bàn phím do hệ thống cung cấp

Trên iPhone X, phím Emoji/Globe và phím Dictation tự động xuất hiện bên dưới bàn phím - ngay cả khi sử dụng bàn phím tùy chỉnh. Ứng dụng của bạn không thể ảnh hưởng đến các phím này, do đó, tránh gây nhầm lẫn bằng cách lặp lại chúng trên bàn phím.