Nếu bạn dự định thiết kế UI cho iPhone X, đây là 6 điều cần nhớ

Nếu bạn dự định thiết kế UI cho iPhone X, đây là 6 điều cần nhớ
Theo: Tấn Minh Theo Trí Thức Trẻ
Thể loại: Sản Phẩm Công Nghệ
Không có gì làm thoả lòng một nhà thiết kế sáng tạo hơn một thách thức mới. Các nhà thiết kế giao diện người dùng có lẽ đã quá chán ngán những kích cỡ màn hình tiêu chuẩn và các UI tương tự nhau.

Thế nên khi Apple giới thiệu chiếc iPhone X với màn hình khác thường, họ đã mang lại cho các nhà thiết kế UI - những người muốn tạo ra một thứ gì đó khác biệt - một công việc vô cùng thú vị mà có thể sẽ kéo dài trong nhiều năm nữa.

Tất nhiên, cơ hội càng lớn thì trách nhiệm càng cao. Dưới đây là một số điều quan trọng mà các nhà thiết kế giao diện di động cần lưu tâm khi làm việc với chiếc flagship mới của Apple.

Tinh chỉnh UI cho hợp với iPhone X

Thay đổi và cũng là thách thức đầu tiên là kích cỡ màn hình. iPhone X cao hơn khoảng 20% so với 3 chiếc iPhone trước đó là 6,7 và 8. Có nghĩa là các nhà thiết kế giao diện sẽ có thêm 145px không gian màn hình để thoả sức "nhồi nhét" vào đó những thứ trước nay không thể đưa vào được.

Nếu bạn có một ứng dụng được thiết kế dành riêng cho iOS, có lẽ bạn không phải lo lắng gì, bởi ứng dụng sẽ tự động tinh chỉnh để phù hợp với iPhone mới. Những tinh chỉnh đó bao gồm các thanh điều hướng, bảng biểu, các bộ sưu tập, và các tab. Chúng sẽ tự động được chèn và đặt vào các vị trí thích hợp. Tuy nhiên, nếu ứng dụng của bạn được viết bằng các mã phức tạp không phải của riêng iOS, bạn sẽ phải thực hiện một số bước như sau:

Hiển thị toàn màn hình

Hãy đảm bảo rằng bạn mở rộng nội dung ứng dụng ra đến viền của màn hình theo đúng hướng dẫn của tài liệu Human Interface Guidelines của Apple. Người dùng sẽ có thể cuộn nội dung xuống tận cùng của đáy màn hình, vượt qua cả các cạnh cong của máy.

Nếu bạn dự định thiết kế UI cho iPhone X, đây là 6 điều cần nhớ - Ảnh 1.

Thanh trạng thái

Thanh trạng thái là một thành phần không thể thiếu trên bất kỳ màn hình smartphone nào. So với các dòng iPhone trước, thanh trạng thái của iPhone X cao gấp đôi, tức là 44pt so với 22pt trên iPhone 8, và được tách làm hai phần mà chúng ta vẫn hay gọi là "tai thỏ".

Thanh trạng thái chứa các thông tin quan trọng về thiết bị như mức pin, mạng di động... Đó là lý do vì sao Apple khuyến cáo không nên ẩn thanh này đi khi ứng dụng đang chạy.

Tất nhiên, có một số loại hình nội dung (như ảnh, phim, game...) đòi hỏi phải hiển thị ở chế độ toàn màn hình, và đó cũng là lý do chính bạn phải ẩn thanh trạng thái này đi. Trong tất cả các trường hợp khác, bạn không nên làm điều này, mà hãy biến thanh trạng thái thành một phần của thiết kế sản phẩm bằng cách ứng dụng chế độ hiển thị toàn màn hình đã nói ở trên.

Các khu vực an toàn

Một thứ khác mà bạn không nên bỏ qua là đảm bảo nội dung hiển thị đầy đủ trong phạm vi các khu vực an toàn của màn hình. Cụ thể, bạn không nên đặt các yếu tố quan trọng hay có thể bấm vào được trong khu vực này để tránh tình trạng bấm nhầm. Apple có một hướng dẫn về khu vực an toàn tại đây.

Nếu bạn dự định thiết kế UI cho iPhone X, đây là 6 điều cần nhớ - Ảnh 2.

Đường rãnh màn hình

Đây là một thành phần hoàn toàn mới chỉ có iPhone X mới có, vừa để đảm bảo yếu tố kỹ thuật, vừa là một điểm nhấn khi marketing của máy. Đường rãnh này gây khá nhiều tranh cãi, và quả thực khi mới dùng màn hình, bạn sẽ cảm thấy hơi bị phân tâm, khó chịu.

Tuy nhiên, đến thời điểm hiện tại, các nhà thiết kế sẽ phải và đã tìm được nhiều cách để đưa đường rãnh này vào giao diện ứng dụng của mình một cách mượt mà. Đầu tiên, Apple yêu cầu các nhà thiết kế không nên giấu đường rãnh này đi, tức là tạo ra một thanh màu đen trên đỉnh màn hình, biến nó thành giống như iPhone 8. Cũng hợp lý, bởi nếu bạn đã bỏ cả ngàn đô ra để mua iPhone X, tại sao phải làm cho nó giống một chiếc iPhone giá rẻ hơn?

Thậm chí một số nhà thiết kế sáng tạo đã nghĩ ra những ý tưởng khá thú vị như dưới đây:

Nếu bạn dự định thiết kế UI cho iPhone X, đây là 6 điều cần nhớ - Ảnh 3.

Cạnh dưới màn hình

Thông thường, phần cạnh dưới màn hình là nơi chứa phần lớn các nút điều khiển ứng dụng. Tuy nhiên, nếu thiết kế cho iPhone X, bạn nên chú ý chừa lại phần "nút home ảo" (thanh ngang nằm ở giữa cạnh dưới). Bởi không còn nút home vật lý nữa, nên các nhà thiết kế cũng không được tự do đặt các nút điều khiển ứng dụng ở sát cạnh dưới màn hình.

Bên cạnh đó, nếu vẫn đặt các nút bấm như trước đây, người dùng sẽ thấy rối mắt vì có quá nhiều thành phần ở cạnh dưới màn hình. Đừng cố nhồi nhét mọi thứ vào thanh tab. Các nút bấm tràn cạnh, dòng thời gian, hay banner quảng cáo đều có thể được thay thế bởi các nút nhấn nổi. Hãy tận dụng chúng.

Nếu bạn dự định thiết kế UI cho iPhone X, đây là 6 điều cần nhớ - Ảnh 4.

Chế độ màn hình ngang

Chế độ màn hình ngang là cách duy nhất cho phép bạn thoải mái ẩn thanh trạng thái đi. Mục đích của việc chuyển sang chế độ này là nhằm mang lại không gian tối đa cho các nội dung, từ văn bản, game đến video.

Các nhà thiết kế cũng nên lưu ý là ở chế độ này, các thanh trên màn hình sẽ trở nên nhỏ hơn: thanh điều hướng ở chế độ ngang chỉ còn 32pt thay vì 44pt, thanh tab thì ngắn lại còn 30pt thay vì 49pt.

Các nhà thiết kế web cũng nên xem xét tinh chỉnh website của mình cho vừa chế độ màn hình ngang này, cho dù nó hiển thị hoàn hảo ở chế độ dọc. Các khu vực an toàn để lại khá nhiều không gian trống ở hai cạnh bên của website khi duyệt ở chế độ ngang. Và Apple cũng đã đưa ra một hướng dẫn dành riêng cho các nhà thiết kế để tinh chỉnh website của mình tại đây.

Nếu bạn dự định thiết kế UI cho iPhone X, đây là 6 điều cần nhớ - Ảnh 5.

Thao tác vuốt trên iPhone X

Việc không có nút home khiến các thao tác vuốt trở thành một thành phần cực kỳ quan trọng mà các nhà thiết kế UX nên chú ý. Apple đã thay đổi một số thao tác vuốt quen thuộc và thêm vào nhiều thao tác mới, dù ban đầu hơi phức tạp nhưng khá thú vị.

Người dùng đã khá vất vả để làm quen với các thao tác này, do đó việc giới thiệu thêm các thao tác vuốt khác dành riêng cho ứng dụng là một việc làm không nên. Một điều khác là nút Home đã bị thay thế bằng một thanh ngang ảo, và các nhà thiết kế không nên ẩn nó đi trừ khi thực sự cần thiết.

Nếu bạn dự định thiết kế UI cho iPhone X, đây là 6 điều cần nhớ - Ảnh 6.

Như vậy, có khá nhiều chi tiết mà một nhà thiết kế UI phải lưu ý khi thiết kế cho iPhone X. Điều quan trọng nhất trong khi thực hiện điều này là phải đảm bảo tương tác của người dùng được đơn giản và hiệu quả. Để đạt được hiệu quả cao nhất, nhà thiết kế không phải đơn giản chỉ cần sắp xếp các yếu tố trong giao diện, mà còn phải dự đoán được thao tác của người dùng và cân bằng được các yếu tố trong ứng dụng để người dùng tiếp tục sử dụng nhiều lần sau nữa.

Tham khảo: TheNextWeb

Redmi Note 7 sẽ được cập nhật chế độ chụp đêm Super Night View của Mi MIX 3

tinybook tinybook 1 ngày 9 giờ
Redmi Note 7 sẽ được cập nhật chế độ chụp đêm Super Night View của Mi MIX 3
Chế độ này sẽ tăng cường khả năng chụp ảnh trong điều kiện thiếu sáng của smartphone.

Samsung Galaxy S10 Plus lộ điểm hiệu năng không quá ấn tượng với 6GB RAM

tinybook tinybook 1 ngày 10 giờ
Samsung Galaxy S10 Plus lộ điểm hiệu năng không quá ấn tượng với 6GB RAM
Đây có vẻ như là phiên bản Galaxy S10 Plus cấu hình thấp nhất.

Xiaomi ra mắt công nghệ cảm biến vân tay dưới màn hình hoàn toàn mới

tinybook tinybook 1 ngày 13 giờ
Xiaomi ra mắt công nghệ cảm biến vân tay dưới màn hình hoàn toàn mới
Xiaomi cho biết công nghệ cảm biến vân tay dưới màn hình mới sẽ giúp giải quyết 2 vấn đề lớn của công nghệ cũ.

iPhone XR sẽ còn được giảm giá sâu hơn nữa tại Trung Quốc

tinybook tinybook 1 ngày 13 giờ
iPhone XR sẽ còn được giảm giá sâu hơn nữa tại Trung Quốc
Để đổi lấy thị phần, Apple sẽ tiếp tục giảm giá iPhone XR tại thị trường smartphone lớn nhất thế giới.

Rò rỉ thông số kỹ thuật của Samsung Galaxy A90, chiếc smartphone kế nhiệm thành công của Galaxy A9 (2018)

tinybook tinybook 1 ngày 14 giờ
Rò rỉ thông số kỹ thuật của Samsung Galaxy A90, chiếc smartphone kế nhiệm thành công của Galaxy A9 (2018)
Có lẽ Samsung đã tìm ra một cách đặt tên mới, thay vì tiếp tục gọi chiếc smartphone này là Galaxy A9 (2019).

Apple trình làng case "lưng gù" vừa bảo vệ vừa tăng thời lượng pin cho iPhone XR, XS và XS Max

tinybook tinybook 1 ngày 14 giờ
Apple trình làng case "lưng gù" vừa bảo vệ vừa tăng thời lượng pin cho iPhone XR, XS và XS Max
Mẫu case này có giá 129 USD và hiện đã có mặt trên trang chủ của Apple.

Khách sạn robot ở nhật bản sa thải một nửa số robot phục vụ sau khi chúng khiến số nhân viên con người tăng lên

tinybook tinybook 1 ngày 14 giờ
Khách sạn robot ở nhật bản sa thải một nửa số robot phục vụ sau khi chúng khiến số nhân viên con người tăng lên
Hóa ra robot cũng có thể bị đuổi việc.

Sony chính thức gửi thư mời tham gia sự kiện MWC 2019 vào ngày 25 tháng 2, có thể ra mắt Xperia XZ4, XA3 và XA3 Ultra

tinybook tinybook 1 ngày 15 giờ
Sony chính thức gửi thư mời tham gia sự kiện MWC 2019 vào ngày 25 tháng 2, có thể ra mắt Xperia XZ4, XA3 và XA3 Ultra
Xperia XZ4 là chiếc smartphone được mong đợi nhất của Sony trong năm nay.

Rò rỉ thiết kế mới của iPhone 11 với 3 camera sau nằm ngang

tinybook tinybook 1 ngày 15 giờ
Rò rỉ thiết kế mới của iPhone 11 với 3 camera sau nằm ngang
Thiết kế rò rỉ mới của iPhone 11 trông có vẻ hợp lý hơn so với thiết kế xấu xí trước đây.

Microsoft đang phát triển các thiết bị màn hình gập chạy Windows

tinybook tinybook 1 ngày 15 giờ
Microsoft đang phát triển các thiết bị màn hình gập chạy Windows
Các thiết bị này không chỉ do Microsoft sản xuất mà còn đến từ các hãng sản xuất PC vốn là đối tác của gã khổng lồ phần mềm.

Huawei chìm trong khủng hoảng, nhà sáng lập chính thức lên tiếng

tinybook tinybook 1 ngày 15 giờ
Huawei chìm trong khủng hoảng, nhà sáng lập chính thức lên tiếng
Ông Nhiệm Chính Phi, nhà sáng lập Huawei, đã lên tiếng sau nhiều năm giữ im lặng trước những cáo buộc của Mỹ...

Cụm camera 5 ống kính trên Nokia 9 PureView sẽ do Light phát triển?

tinybook tinybook 1 ngày 16 giờ
Cụm camera 5 ống kính trên Nokia 9 PureView sẽ do Light phát triển?
Light, công ty máy ảnh kỹ thuật số nổi tiếng với những thiết bị nhiều ống kính, vừa mở một mục riêng trên website của hãng với hình ảnh đầu trang trông giống chiếc Nokia 9 được "nhá hàng" cách đây không lâu.

Samsung tự hào khoe Galaxy F là "một đột phá trong đổi mới công nghệ"

tinybook tinybook 1 ngày 16 giờ
Samsung tự hào khoe Galaxy F là "một đột phá trong đổi mới công nghệ"
Trong tháng tới, Samsung dự kiến sẽ ra mắt 2 flagship mới, bao gồm dòng Galaxy S10 trứ danh và Galaxy F - thiết bị màn hình gập đầu tiên của hãng.

Tòa án Đức tuyên bố iPhone không vi phạm bằng sáng chế của Qualcomm trong vụ kiện thứ hai

tinybook tinybook 1 ngày 16 giờ
Tòa án Đức tuyên bố iPhone không vi phạm bằng sáng chế của Qualcomm trong vụ kiện thứ hai
Một thẩm phán tại Mannheim, Đức vừa xét xử một trong vô số các vụ kiện tụng giữa Apple và Qualcomm, và đưa ra kết luận rằng iPhone không vi phạm một trong các bằng sáng chế về quản lý năng lượng của Qualcomm.

CEO Xiaomi tuyên bố Mi 9 sẽ được nâng cấp khả năng sạc nhanh

tinybook tinybook 1 ngày 16 giờ
CEO Xiaomi tuyên bố Mi 9 sẽ được nâng cấp khả năng sạc nhanh
Xiaomi Mi 9 là một trong những chiếc smartphone được mong chờ nhất trong nửa đầu năm 2019.

Nhìn lại những thiết bị ấn tượng nhất của Oppo sau 10 năm tham gia thị trường di động

tinybook tinybook 2 ngày 8 giờ
Nhìn lại những thiết bị ấn tượng nhất của Oppo sau 10 năm tham gia thị trường di động
Từ camera xoay trên N1 tới thiết kế thò thụt cùng màn hình chiếm trọn mặt trước của Find X, 10 năm qua Oppo đã cho ra mắt khá nhiều thiết bị di động ấn tượng.

Từ ngày hôm nay, cảnh sát không được phép bắt nghi phạm mở khóa smartphone bằng dấu vân tay hoặc nhận diện khuôn mặt

tinybook tinybook 2 ngày 9 giờ
Từ ngày hôm nay, cảnh sát không được phép bắt nghi phạm mở khóa smartphone bằng dấu vân tay hoặc nhận diện khuôn mặt
Sau phán quyết này, có vẻ như các cơ quan điều tra sẽ phải nhờ đến sự giúp đỡ của các công ty bảo mật thường xuyên hơn.

Redmi Note 7 cháy hàng chỉ sau 8 phút 36 giây mở bán

tinybook tinybook 2 ngày 9 giờ
Redmi Note 7 cháy hàng chỉ sau 8 phút 36 giây mở bán
Có vẻ như 100.000 chiếc Redmi Note 7 mà Xiaomi chuẩn bị trong đợt mở bán đầu tiên không đủ để đáp ứng nhu cầu của người dùng Trung Quốc.

Sony Xperia XZ4 tiếp tục lộ ảnh mới, xác nhận cụm 3 camera sau

tinybook tinybook 2 ngày 9 giờ
Sony Xperia XZ4 tiếp tục lộ ảnh mới, xác nhận cụm 3 camera sau
Thành bại của Xperia XZ4 có thể quyết định số phận của mảng di động Sony.

Chính Steve Jobs là người đồng ý trả cho Qualcomm 7,5 USD trên mỗi chiếc iPhone bán ra, không ngờ bây giờ lại trở thành gánh nặng lớn cho Apple

tinybook tinybook 2 ngày 10 giờ
Chính Steve Jobs là người đồng ý trả cho Qualcomm 7,5 USD trên mỗi chiếc iPhone bán ra, không ngờ bây giờ lại trở thành gánh nặng lớn cho Apple
Mức phí trên mỗi chiếc iPhone không quá cao, nhưng Apple đang bán được hàng trăm triệu chiếc iPhone mới mỗi năm, dẫn đến phải trả một khoản tiền khổng lồ cho Qualcomm.

Vivo sẽ trình làng smartphone hình giọt nước vào ngày 24/1?

tinybook tinybook 2 ngày 10 giờ
Vivo sẽ trình làng smartphone hình giọt nước vào ngày 24/1?
Với tên mã "The Waterdrop", smartphone sắp tới của Vivo được cho là có thiết kế chưa từng thấy trên thị trường.

Redmi phải đóng cửa trang web đặt mua Redmi Note 7 chỉ sau 20 phút, do số lượng đơn hàng quá lớn

tinybook tinybook 2 ngày 10 giờ
Redmi phải đóng cửa trang web đặt mua Redmi Note 7 chỉ sau 20 phút, do số lượng đơn hàng quá lớn
CEO Lu Welbing của Redmi cho biết số lượng đặt hàng đã vượt quá mong đợi và để đảm bảo những người đặt hàng trước có thể nhận được máy đúng thời hạn, Redmi buộc phải dừng việc đặt mua Redmi Note 7.

Trên tay sạc dự phòng Xiaomi Mi Power Bank 3 Pro: 20000mAh, sạc nhanh hai chiều 45W, sạc được laptop, giá 790.000 đồng

tinybook tinybook 2 ngày 10 giờ
Trên tay sạc dự phòng Xiaomi Mi Power Bank 3 Pro: 20000mAh, sạc nhanh hai chiều 45W, sạc được laptop, giá 790.000 đồng
Mi Power Bank 3 Pro là pin sạc dự phòng vừa được Xiaomi ra mắt, sở hữu dung lượng lớn, hỗ trợ sạc nhanh với công suất lớn và mức giá hợp lý.

HMD Global định hồi sinh Nokia N9, chạy KaiOS

tinybook tinybook 2 ngày 10 giờ
HMD Global định hồi sinh Nokia N9, chạy KaiOS
Đây sẽ là sản phẩm hoài cổ tiếp theo mà HMD Global trình làng.

Apple đã thay 11 triệu pin iPhone trong năm 2018, mọi năm chỉ là 1 - 2 triệu pin

tinybook tinybook 2 ngày 11 giờ
Apple đã thay 11 triệu pin iPhone trong năm 2018, mọi năm chỉ là 1 - 2 triệu pin
Khoảng 8 - 9 triệu người dùng quyết định thay pin cho iPhone cũ, thay vì mua iPhone mới trong năm 2018.

Pixel 3 XL Lite trang bị chip Snapdragon 710, RAM 6GB, hiệu năng thất vọng

tinybook tinybook 2 ngày 13 giờ
Pixel 3 XL Lite trang bị chip Snapdragon 710, RAM 6GB, hiệu năng thất vọng
Có vẻ như Pixel 3 XL Lite sẽ không phải là phiên bản Android của iPhone XR.

Galaxy S10 “X” sẽ là phiên bản cao cấp nhất, RAM 10GB, 6 camera, pin 5.000 mAh, giá gần 40 triệu đồng

tinybook tinybook 2 ngày 14 giờ
Galaxy S10 “X” sẽ là phiên bản cao cấp nhất, RAM 10GB, 6 camera, pin 5.000 mAh, giá gần 40 triệu đồng
Galaxy S10 “X” sẽ là phiên bản được trang bị công nghệ 5G.

HMD Global hoãn ra mắt Nokia 9 PureView tới MWC 2019 và nguy cơ bị lu mờ trước nhiều siêu phẩm khác rất cao

tinybook tinybook 2 ngày 14 giờ
HMD Global hoãn ra mắt Nokia 9 PureView tới MWC 2019 và nguy cơ bị lu mờ trước nhiều siêu phẩm khác rất cao
Nếu HMD Global quyết định trì hoãn thời điểm ra mắt siêu phẩm Nokia 9 PureView tới MWC 2019, khả năng hãng sẽ phải cạnh tranh rất khốc liệt với nhiều đối thủ như Samsung, Sony, Asus,…

Samsung Galaxy M20 tiết lộ các tính năng

tinybook tinybook 2 ngày 14 giờ
Samsung Galaxy M20 tiết lộ các tính năng
Galaxy M20 sẽ có cả tính năng nhận diện khuôn mặt.

OPPO F9 giành nhiều giải thưởng từ các báo công nghệ

tinybook tinybook 2 ngày 15 giờ
OPPO F9 giành nhiều giải thưởng từ các báo công nghệ
Mang đến những nâng cấp đáng giá trong phân khúc, F9 không chỉ thu hút người dùng mà còn được vinh danh bởi nhiều giải thưởng công nghệ uy tín: Số Hóa Tech Awards (Báo điện tử VNExpress), Editor’s Choice Awards (Tạp chí Nghe Nhìn Việt Nam)…
tinybook Công Nghệ Thông Tin








Chat