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

OPPO F9 chính thức ra mắt tại Việt Nam: lần đầu trang bị camera kép cùng công nghệ sạc nhanh VOOC trên dòng F series, giá 7,69 triệu đồng

tinybook tinybook 2 ngày 20 giờ
OPPO F9 chính thức ra mắt tại Việt Nam: lần đầu trang bị camera kép cùng công nghệ sạc nhanh VOOC trên dòng F series, giá 7,69 triệu đồng
Bên cạnh đó, OPPO F9 cũng là sản phẩm tầm trung đầu tiên của hãng này sở hữu mặt lưng thay đổi màu sắc theo góc ánh sáng phản chiếu vào.

Trên tay Oppo F9 giá 7.69 triệu: Màn hình giọt nước, mặt lưng họa tiết, sạc nhanh VOOC, camera kép

tinybook tinybook 2 ngày 20 giờ
Trên tay Oppo F9 giá 7.69 triệu: Màn hình giọt nước, mặt lưng họa tiết, sạc nhanh VOOC, camera kép
Oppo F9 nổi bật bởi màn hình giọt nước, mặt lưng với họa tiết thay đổi, camera kép và công nghệ sạc nhanh.

Trên tay sớm Pocophone F1, hiệu suất hàng đầu, màn hình đẹp, pin tuyệt, giá siêu rẻ nhưng camera tầm thường

tinybook tinybook 2 ngày 23 giờ
Trên tay sớm Pocophone F1, hiệu suất hàng đầu, màn hình đẹp, pin tuyệt, giá siêu rẻ nhưng camera tầm thường
Hơn nữa, để giảm giá, Xiaomi chỉ trang bị cho Pocophone F1 lớp vỏ bằng nhựa, vật liệu chưa từng được dùng trên smartphone cao cấp vài năm gần đây.

Người dân Cuba sung sướng lần đầu được dùng Internet di động miễn phí

tinybook tinybook 2 ngày 23 giờ
Người dân Cuba sung sướng lần đầu được dùng Internet di động miễn phí
Chính phủ Cuba hôm 14.8 đã cung cấp kết nối Internet miễn phí cho hơn 5 triệu người sử dụng điện thoại di động trong 8 tiếng thử nghiệm, trước khi mở bán dịch vụ này.

Samsung ra mắt Exynos Modem 5100, chip 5G đầu tiên theo chuẩn của 3GPP với tốc độ download 2Gb/s

tinybook tinybook 3 ngày 4 phút
Samsung ra mắt Exynos Modem 5100, chip 5G đầu tiên theo chuẩn của 3GPP với tốc độ download 2Gb/s
Đây là con chip modem 5G đầu tiên trên thế giới theo tiêu chuẩn 5G-NR, mà tổ chức 3GPP vừa mới đưa ra cho mạng 5G độc lập.

Oppo hé lộ R17 Pro sẽ có khả năng thay đổi khẩu độ camera tương tự Samsung Galaxy S9/S9+

tinybook tinybook 3 ngày 6 phút
Oppo hé lộ R17 Pro sẽ có khả năng thay đổi khẩu độ camera tương tự Samsung Galaxy S9/S9+
Tính năng này cũng đã được Samsung đưa lên Galaxy Note9 vừa ra mắt.

Samsung đăng ký sáng chế lớp phủ tự phục hồi vết xước, chống bám vân tay cho smartphone

tinybook tinybook 3 ngày 35 phút
Samsung đăng ký sáng chế lớp phủ tự phục hồi vết xước, chống bám vân tay cho smartphone
Không chỉ hoàn hảo cho các smartphone màn hình gập, lớp phủ mà Samsung đang phát triển còn có thể được trang bị cho các mẫu smartphone thông thường khác.

Ông đồng Ming-Chi Kuo dự đoán Apple sẽ ra mắt kính AR vào năm 2020, Apple Car vào năm 2023

tinybook tinybook 3 ngày 4 giờ
Ông đồng Ming-Chi Kuo dự đoán Apple sẽ ra mắt kính AR vào năm 2020, Apple Car vào năm 2023
Kính AR và xe ô tô sẽ là những sản phầm phần cứng mới của Apple trong tương lai không xa.

Samsung: Vẫn sẽ có Galaxy Note 10, nhưng nó sẽ không phải chiếc smartphone cao cấp nhất của chúng tôi trong năm 2019

tinybook tinybook 3 ngày 4 giờ
Samsung: Vẫn sẽ có Galaxy Note 10, nhưng nó sẽ không phải chiếc smartphone cao cấp nhất của chúng tôi trong năm 2019
Giám đốc mảng di động của Samsung, ông DJ Koh đã phủ nhận thông tin Samsung sẽ gộp và dòng Galaxy S và Galaxy Note vào làm 1 để nhường chỗ cho một smartphone khác.

Huawei vượt mặt Samsung, mang cảm biến vân tay dưới màn hình và công nghệ quét mặt 3D lên cả Mate 20 và Mate 20 Pro

tinybook tinybook 3 ngày 4 giờ
Huawei vượt mặt Samsung, mang cảm biến vân tay dưới màn hình và công nghệ quét mặt 3D lên cả Mate 20 và Mate 20 Pro
Dựa trên hình ảnh rò rỉ về tấm nền mặt trước của Mate 20, ta biết được rằng rất có thể Huawei sẽ mang cả hai tính năng nổi bật nhất trên Galaxy S10 lên bộ đôi Mate 20 cao cấp sẽ ra mắt vào tháng 10 tới đây.

POCOPHONE F1 của Xiaomi lộ cấu hình trên Geekbench, mạnh ngang flagship cao cấp, giá chỉ 9 triệu

tinybook tinybook 3 ngày 4 giờ
POCOPHONE F1 của Xiaomi lộ cấu hình trên Geekbench, mạnh ngang flagship cao cấp, giá chỉ 9 triệu
Để có được sức mạnh này, Xiaomi đã tích hợp cho F1 một hệ thống tản nhiệt nước ở bên trong để đảm bảo chipset không bị "nghẽn cổ chai" khi phải thực hiện các tác vụ nặng.

Chuyên gia dự đoán giá khởi điểm của bộ 3 iPhone 2018 sẽ không vượt mức 999 USD

tinybook tinybook 3 ngày 4 giờ
Chuyên gia dự đoán giá khởi điểm của bộ 3 iPhone 2018 sẽ không vượt mức 999 USD
Tuy nhiên, điều này đồng nghĩa với việc iPhone X đời đầu rất có thể sẽ bị khai tử vì không cạnh tranh được với những người đàn em của mình.

Công nghệ pin của tương lai: sạc vài giây, dùng vài tháng, chẳng cần dây, không lo nổ

tinybook tinybook 3 ngày 4 giờ
Công nghệ pin của tương lai: sạc vài giây, dùng vài tháng, chẳng cần dây, không lo nổ
Điện thoại thông minh, nhà thông minh, và thậm chí là thiết bị đeo thông minh đang ngày một tiên tiến, nhưng chúng vẫn có những giới hạn về mặt năng lượng. Công nghệ pin vẫn dậm chân tại chỗ trong hàng thập kỷ. Nhưng một cuộc cách mạng sắp bùng nổ.

Không phải Snapdragon 855, cũng chẳng phải Apple A12 mà Kirin 980 của Huawei mới là con chip 7nm đầu tiên

tinybook tinybook 3 ngày 4 giờ
Không phải Snapdragon 855, cũng chẳng phải Apple A12 mà Kirin 980 của Huawei mới là con chip 7nm đầu tiên
Kirin 980 được tích hợp modem LTE Cat. 19 cho tốc độ download tới 1,6 Gbps, có khả năng hỗ trợ màn hình 4K, 3 chip tín hiệu hình ảnh và nhiều hơn nữa.

Huawei Mate 20 sẽ là chiếc smartphone bá đạo nhất năm nay khi gom hết ưu điểm của Galaxy S10 và iPhone X?

tinybook tinybook 3 ngày 5 giờ
Huawei Mate 20 sẽ là chiếc smartphone bá đạo nhất năm nay khi gom hết ưu điểm của Galaxy S10 và iPhone X?
Huawei dường như có tham vọng biến Mate 20 thành bom tấn của năm nay khi tích hợp hàng loạt tính năng "sát thủ" từ các sản phẩm của Samsung và Apple.

Giữa cơn sốt smartphone màn hình lớn như Galaxy Note9, vẫn có những gương mặt cho trường phái bé tí hon

tinybook tinybook 3 ngày 16 giờ
Giữa cơn sốt smartphone màn hình lớn như Galaxy Note9, vẫn có những gương mặt cho trường phái bé tí hon
Ở giữa cơn sốt smartphone màn hình to bự, chúng ta có cần một chiếc điện thoại mini?

Nếu 4.000 mAh trên Galaxy Note9 vẫn chưa đủ, hãy thử gắn thêm chiếc case kiêm pin dự phòng 2.525mAh này

tinybook tinybook 3 ngày 17 giờ
Nếu 4.000 mAh trên Galaxy Note9 vẫn chưa đủ, hãy thử gắn thêm chiếc case kiêm pin dự phòng 2.525mAh này
Ngoài viên pin 4.000 mAh đủ sức cân hầu hết mọi tác vụ trên Galaxy Note9 trong một ngày, bạn cũng có thể tăng thêm dung lượng pin cho Note9 thông qua chiếc case bảo vệ kiêm pin dự phòng siêu mỏng này.

iPhone mới sẽ vẫn không có jack headphone, nhưng đó liệu có phải là vấn đề nữa không?

tinybook tinybook 3 ngày 18 giờ
iPhone mới sẽ vẫn không có jack headphone, nhưng đó liệu có phải là vấn đề nữa không?
Bởi sẽ rất sớm nữa thôi, adapter headphone cũng sẽ không được bán kèm nữa!

Samsung Galaxy Note9 gây bất ngờ tại Việt Nam với giá tốt hơn dự kiến gần 2 triệu cùng nhiều ưu đãi khủng

tinybook tinybook 3 ngày 22 giờ
Samsung Galaxy Note9 gây bất ngờ tại Việt Nam với giá tốt hơn dự kiến gần 2 triệu cùng nhiều ưu đãi khủng
Chỉ ít ngày sau khi được giới thiệu tại New York, Mỹ, hôm nay Samsung đã giới thiệu Galaxy Note9 tại thị trường Việt Nam với mức giá cùng các ưu đãi gây bất ngờ so với các thông tin lộ ra trước đó.

Nhiều người dùng VN phản ánh Facebook trên Android bị lỗi, liên tục bị văng ra ngoài

tinybook tinybook 3 ngày 22 giờ
Nhiều người dùng VN phản ánh Facebook trên Android bị lỗi, liên tục bị văng ra ngoài
Theo ghi nhận từ phản ảnh của nhiều người dùng, Facebook lại tiếp tục gặp lỗi, tự động thoát ứng dụng mỗi khi truy cập.

IDC: Thị phần smartphone Xiaomi vượt mặt Samsung trong quý 2 tại Ấn Độ, OnePlus đứng thứ 2 trong phân khúc cao cấp

tinybook tinybook 3 ngày 23 giờ
IDC: Thị phần smartphone Xiaomi vượt mặt Samsung trong quý 2 tại Ấn Độ, OnePlus đứng thứ 2 trong phân khúc cao cấp
Giá bán hợp lí giúp Xiaomi chiếm lĩnh thị trường smartphone Ấn Độ trong quý 2/2018.

Đây là Xiaomi Mi 8 EE giá 19 triệu tại VN: Mặt lưng trong suốt, vân tay trong màn hình, quét khuôn mặt 3D

tinybook tinybook 3 ngày 23 giờ
Đây là Xiaomi Mi 8 EE giá 19 triệu tại VN: Mặt lưng trong suốt, vân tay trong màn hình, quét khuôn mặt 3D
Mi 8 EE (Explorer Edition) không chỉ được tích hợp nhiều công nghệ đầu bảng hiện nay như nhận dạng khuôn mặt 3D, cảm biến vân tay trong màn hình mà còn là thiết kế mặt lưng trong suốt độc đáo.

Motorola P30 lộ hình ảnh thiết kế, chấp nhận thay đổi bằng cách sao chép iPhone X

tinybook tinybook 4 ngày 8 phút
Motorola P30 lộ hình ảnh thiết kế, chấp nhận thay đổi bằng cách sao chép iPhone X
Motorola P30 sẽ góp mặt trong danh sách khá dài những chiếc smartphone Android sở hữu tai thỏ.

Rò rỉ thông số chi tiết cụm ba camera sau của Samsung Galaxy S10

tinybook tinybook 4 ngày 1 giờ
Rò rỉ thông số chi tiết cụm ba camera sau của Samsung Galaxy S10
Nguồn tin rò rỉ từ Hàn Quốc cho thấy Galaxy S10 sẽ là quái thú camera.

Cụm 3 camera trên Galaxy S10+ sẽ gồm một ống kính tele và một ống kính góc rộng

tinybook tinybook 4 ngày 1 giờ
Cụm 3 camera trên Galaxy S10+ sẽ gồm một ống kính tele và một ống kính góc rộng
Năm 2019, Samsung sẽ kỷ niệm 10 năm dòng flagship Galaxy S, và tất nhiên họ muốn chiếc điện thoại đặc biệt chào mừng sự kiện này phải thật hoành tráng.

DisplayMate: Màn hình Samsung Galaxy Note9 tuyệt vời nhất thế giới, phá vỡ nhiều kỷ lục

tinybook tinybook 4 ngày 3 giờ
DisplayMate: Màn hình Samsung Galaxy Note9 tuyệt vời nhất thế giới, phá vỡ nhiều kỷ lục
Note9 là thiết bị được DisplayMate chấm điểm cao nhất từ trước tới nay.

Chỉ vài tiếng sau khi được phát hành, Apple ngừng cập nhật iOS 12 Beta 7 do có quá nhiều lỗi

tinybook tinybook 4 ngày 3 giờ
Chỉ vài tiếng sau khi được phát hành, Apple ngừng cập nhật iOS 12 Beta 7 do có quá nhiều lỗi
Apple mới đây đã ngừng phát hành phiên bản thứ 7 của hệ điều hành iOS 12 Beta chỉ sau vài tiếng ra mắt do phát sinh quá nhiều lỗi liên quan tới hiệu năng của máy

Các ông chồng hãy coi chừng: Google có thể theo dõi bạn ngay cả khi đã tắt lịch sử địa điểm!

tinybook tinybook 4 ngày 4 giờ
Các ông chồng hãy coi chừng: Google có thể theo dõi bạn ngay cả khi đã tắt lịch sử địa điểm!
Một cuộc điều tra của Associated Press mới đây đã phát hiện ra rằng ngay cả khi bạn đã đề nghị Google không theo dõi vị trí và chuyển động trên các smartphone iPhone và Android, thì công ty này...vẫn làm như thường.

Tấm sạc không dây AirPower có thể sẽ ra mắt cùng iPhone 2018, giá khoảng 3.5 triệu đồng?

tinybook tinybook 4 ngày 4 giờ
Tấm sạc không dây AirPower có thể sẽ ra mắt cùng iPhone 2018, giá khoảng 3.5 triệu đồng?
Một nguồn tin vừa tiết lộ tấm sạc AirPower của Apple sẽ bán ra vào tháng 9 này cùng thế hệ iPhone mới.

Khái niệm đẹp của giới trẻ thời đại mới, kết hợp cả kinh nghiệm và công nghệ

tinybook tinybook 4 ngày 4 giờ
Khái niệm đẹp của giới trẻ thời đại mới, kết hợp cả kinh nghiệm và công nghệ
Quan niệm về cái đẹp mỗi thời một khác, song việc yêu cái đẹp thì giới trẻ thời nào cũng có. Trong thời đại mới, với những thay đổi của văn hóa, thói quen và cả công nghệ, những khái niệm về cái đẹp của người trẻ cũng có nhiều đổi thay, mang xu hướng hiện đại hơn, có tính kết nối và lan truyền hơn.
tinybook Công Nghệ Thông Tin








Chat