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

iPhone 12 có chi phí sửa chữa cao hơn iPhone 11

tinybook tinybook 6 ngày 7 giờ
iPhone 12 có chi phí sửa chữa cao hơn iPhone 11
Chi phí thay thế màn hình của iPhone 12 đã tăng từ 199 USD lên 279 USD, có lẽ là do mẫu máy này sử dụng màn hình OLED chứ không phải LCD như thế hệ trước.

Bán được 30.000 máy chỉ sau 1 phút tại Trung Quốc, thế nhưng OnePlus 8T lại chỉ có vỏn vẹn... 16 người cọc sau gần 1 tuần tại Việt Nam

tinybook tinybook 6 ngày 7 giờ
Bán được 30.000 máy chỉ sau 1 phút tại Trung Quốc, thế nhưng OnePlus 8T lại chỉ có vỏn vẹn... 16 người cọc sau gần 1 tuần tại Việt Nam
Trái ngược hoàn toàn với thành công vang dội tại Trung Quốc, OnePlus 8T lại có một khởi đầu đầy trắc trở tại Việt Nam.

iPhone 12 có dung lượng pin thấp hơn iPhone 11

tinybook tinybook 1 tuần 2 ngày
iPhone 12 có dung lượng pin thấp hơn iPhone 11
Nhờ kiến trúc 5nm của con chip Apple A14 Bionic mà thời lượng dùng pin trên iPhone 12 không thay đổi so với iPhone 11.

Lộ video đập hộp iPhone 12 và iPhone 12 Pro đầu tiên trên thế giới

tinybook tinybook 6 ngày 7 giờ
Lộ video đập hộp iPhone 12 và iPhone 12 Pro đầu tiên trên thế giới
Video cho chúng ta thấy cận cảnh chiếc iPhone 12 màu xanh và iPhone 12 Pro màu ghi xám.

Quên những chiếc điện thoại thông thường đi được rồi, khi màn hình gập đã trở thành hiện thực

tinybook tinybook 6 ngày 8 giờ
Quên những chiếc điện thoại thông thường đi được rồi, khi màn hình gập đã trở thành hiện thực
Xem video, chơi game, đọc sách... tất cả đều sẽ thay đổi hoàn toàn khi được trải nghiệm qua màn hình 7.6 inch "gói" bên trong một chiếc điện thoại có vẻ ngoài giống Galaxy S20 và Note 20...

Lộ thông tin xác nhận Apple đã giảm dung lượng pin của iPhone 12 và iPhone 12 mini

tinybook tinybook 6 ngày 8 giờ
Lộ thông tin xác nhận Apple đã giảm dung lượng pin của iPhone 12 và iPhone 12 mini
iPhone 12 có dung lượng pin thấp hơn so với iPhone 11.

Liệu iPhone 12 hỗ trợ 5G có thể mang lại 'siêu chu kỳ' cho Apple?

tinybook tinybook 6 ngày 9 giờ
Liệu iPhone 12 hỗ trợ 5G có thể mang lại siêu chu kỳ cho Apple?
Trước Apple, hầu hết các đối thủ, bao gồm cả Samsung, đã đưa điện thoại di động 5G ra thị trường.

Tại sao iPhone 12 không thêm tính năng mở khóa bằng vân tay?

tinybook tinybook 6 ngày 9 giờ
Tại sao iPhone 12 không thêm tính năng mở khóa bằng vân tay?
Mở khóa bằng vân tay là một trơng những tính năng bảo mật quan trọng của các thiết bị smartphone hiện đại. Nhưng điều đó dường như không đúng với Apple.

Điểm danh 4 smartphone cấu hình xịn, ngoại hình mượt, xứng làm quà 20.10 dành tặng nàng

tinybook tinybook 6 ngày 19 giờ
Điểm danh 4 smartphone cấu hình xịn, ngoại hình mượt, xứng làm quà 20.10 dành tặng nàng
Ngày Phụ nữ Việt Nam đã gần kề, mách ngay cho các anh em để không phải vò đầu bứt tai, đấu tranh tư tưởng trước bài toán chọn quà cho nửa kia.

Cận cảnh cáp sạc inCharge 6: Bé xíu, treo vào móc chìa khóa, thiết kế siêu bền, 6 cổng kết nối, giá hơi chát nhưng “xắt ra miếng”

tinybook tinybook 6 ngày 20 giờ
Cận cảnh cáp sạc inCharge 6: Bé xíu, treo vào móc chìa khóa, thiết kế siêu bền, 6 cổng kết nối, giá hơi chát nhưng “xắt ra miếng”
Chiếc cáp sạc mini inCharge 6 có thể treo vào móc chìa khóa, không những nhỏ gọn mà có thể “cân” hết các loại điện thoại và phụ kiện cần cắm sạc.

iPhone 12 không dùng được 5G khi lắp 2 SIM

tinybook tinybook 1 tuần 26 phút
iPhone 12 không dùng được 5G khi lắp 2 SIM
Tính năng quan trọng nhất của iPhone 12 là mạng 5G sẽ không hoạt động nếu như người dùng sử dụng cùng lúc 2 SIM trên máy.

HTC Desire 20+ ra mắt: Snapdragon 720G, 4 camera sau 48MP, pin 5000mAh, giá 6.9 triệu đồng

tinybook tinybook 1 tuần 52 phút
HTC Desire 20+ ra mắt: Snapdragon 720G, 4 camera sau 48MP, pin 5000mAh, giá 6.9 triệu đồng
Desire 20+ sở hữu thiết kế camera hình chữ nhật khá độc đáo, khác biệt nhiều so với các mẫu smartphone tầm trung trước đây của HTC.

DxOMark: Camera trên iPhone 12 Pro Max không phải là tốt nhất

tinybook tinybook 1 tuần 3 giờ
DxOMark: Camera trên iPhone 12 Pro Max không phải là tốt nhất
Mặc dù phải tới ngày 23/10 tới đây iPhone 12 Pro mới được bán ra chính thức, tuy nhiên ở thời điểm hiện tại DxOMark đã có những nhận xét ban đầu về camera của dòng Pro năm nay.

Tại sao iPhone 11 đáng mua hơn iPhone 12

tinybook tinybook 1 tuần 3 giờ
Tại sao iPhone 11 đáng mua hơn iPhone 12
Người dùng dường như quá dễ bị quyến rũ bởi những thứ mới mẻ và sáng bóng.

Xiaomi ra mắt công nghệ sạc không dây 80W nhanh nhất thế giới: Sạc đầy pin 4000mAh chỉ trong 19 phút

tinybook tinybook 1 tuần 3 giờ
Xiaomi ra mắt công nghệ sạc không dây 80W nhanh nhất thế giới: Sạc đầy pin 4000mAh chỉ trong 19 phút
Trước đó, Xiaomi từng giới thiệu công nghệ sạc không dây 50W trên chiếc Mi 10 Ultra khi ra mắt vào hồi tháng 8.

Bên trong OnePlus 8T: mọi thứ đều gấp đôi, 2 viên pin, 2 hệ thống làm mát

tinybook tinybook 1 tuần 6 giờ
Bên trong OnePlus 8T: mọi thứ đều gấp đôi, 2 viên pin, 2 hệ thống làm mát
Trong khi thiết kế bên ngoài và cấu hình không mấy nổi bật, nhưng nội thất trong OnePlus 8T có nhiều điểm nhấn rất thú vị.

Mất thêm 10 triệu đồng để sở hữu sớm iPhone 12 Pro Max tại Việt Nam

tinybook tinybook 1 tuần 6 giờ
Mất thêm 10 triệu đồng để sở hữu sớm iPhone 12 Pro Max tại Việt Nam
Để được sở hữu iPhone 12 Pro Max vài ngày sau khi Apple mở bán trên toàn thế giới, người Việt sẽ phải bỏ ra thêm khoảng 10 triệu đồng so với giá niêm yết.

Bộ sạc MagSafe mới và ốp lưng của iPhone 12 đã bắt đầu đến tay người dùng

tinybook tinybook 1 tuần 6 giờ
Bộ sạc MagSafe mới và ốp lưng của iPhone 12 đã bắt đầu đến tay người dùng
MagSafe mang đến một hệ sinh thái mới, gồm các ốp lưng có từ tính và phụ kiện gắn liền với ‌‌iPhone 12‌‌.

Đã có điểm hiệu năng iPhone 12: Thấp hơn iPad Air 4, điểm đồ họa thua iPhone 11 Pro

tinybook tinybook 1 tuần 7 giờ
Đã có điểm hiệu năng iPhone 12: Thấp hơn iPad Air 4, điểm đồ họa thua iPhone 11 Pro
Apple có thể đã hạn chế hiệu năng của chip A14 trên iPhone 12.

Galaxy S21 và S21 Ultra lộ ảnh render với cụm camera kiểu mới

tinybook tinybook 1 tuần 7 giờ
Galaxy S21 và S21 Ultra lộ ảnh render với cụm camera kiểu mới
Các hình ảnh render của thế hệ Galaxy S mới đã chính thức lộ diện, cho người dùng những cái nhìn đầu tiên về dòng sản phẩm này.

Galaxy S21 sẽ có chi phí sản xuất thấp hơn so với S20, giá bán có thể sẽ giảm

tinybook tinybook 1 tuần 7 giờ
Galaxy S21 sẽ có chi phí sản xuất thấp hơn so với S20, giá bán có thể sẽ giảm
Theo báo cáo của SamMobile, Samsung hiện đang đàm phán với các nhà cung ứng linh kiện để giảm giá thành.

Thảm họa thiết kế 2020: Smartphone Android thì giống nhau còn iPhone thì giống... iPhone cũ

tinybook tinybook 1 tuần 21 giờ
Thảm họa thiết kế 2020: Smartphone Android thì giống nhau còn iPhone thì giống... iPhone cũ
Hãy nhìn kỹ vào thiết kế smartphone năm nay và lắc đầu ngán ngẩm.

Ảnh thực tế OnePlus 8T tại Việt Nam: Bản cắt giảm nhẹ từ OnePlus 8 Pro, cấu hình gần như giữ nguyên, được kèm sạc siêu nhanh 65W, giá 18,99 triệu đồng

tinybook tinybook 1 tuần 22 giờ
Ảnh thực tế OnePlus 8T tại Việt Nam: Bản cắt giảm nhẹ từ OnePlus 8 Pro, cấu hình gần như giữ nguyên, được kèm sạc siêu nhanh 65W, giá 18,99 triệu đồng
OnePlus 8T 5G cũng được trang bị màn hình có tần số làm tươi 120Hz giống đàn anh, kích thước 6,55 inch, độ phân giải Full HD+, hỗ trợ chuẩn HDR10+ (OnePlus 8 Pro dùng AMOLED QuadHD+ và kích thước 6,78 inch).

Tin buồn cho iFan, dù có rất nhiều củ sạc cũ, nhưng nếu mua iPhone 12, bạn vẫn phải mua củ sạc mới

tinybook tinybook 1 tuần 1 ngày
Tin buồn cho iFan, dù có rất nhiều củ sạc cũ, nhưng nếu mua iPhone 12, bạn vẫn phải mua củ sạc mới
Apple loại bỏ củ sạc từ hộp đựng iPhone để bảo vệ môi trường, thế nhưng nhiều người mua iPhone 12 vẫn phải mua củ sạc ngoài, vì dây cáp trong hộp không tương thích với bộ nguồn cũ.

Sẽ thật tuyệt nếu Apple “mượn” 5 tính năng này từ Samsung cho iPhone 12

tinybook tinybook 1 tuần 1 ngày
Sẽ thật tuyệt nếu Apple “mượn” 5 tính năng này từ Samsung cho iPhone 12
Chiếc Galaxy mới ra mắt cách đây chưa lâu sở hữu những tính năng và cấu hình “khủng” đến nực cười, nhưng lại khiến biết bao người dùng iPhone ghen tị.

Thoát chết rồi, liệu Huawei có thể mơ trở lại đánh bại Samsung thêm lần nữa?

tinybook tinybook 1 tuần 1 ngày
Thoát chết rồi, liệu Huawei có thể mơ trở lại đánh bại Samsung thêm lần nữa?
Ngay trước khi nhận án cấm mua chip từ nước Mỹ, Huawei đã kịp một lần đánh bại Samsung để chiếm lấy vị trí số 1 thế giới về thị phần smartphone. Nay, khi đã được cấp phép làm ăn với AMD và Intel, liệu gã khổng lồ Trung Quốc có thể mơ trở lại đỉnh cao?

Huawei Mate 40 Pro lộ ảnh render: Cụm camera mới, chip Kirin 9000, sạc 65W

tinybook tinybook 1 tuần 1 ngày
Huawei Mate 40 Pro lộ ảnh render: Cụm camera mới, chip Kirin 9000, sạc 65W
Dự kiến, Huawei Mate 40 series sẽ chính thức được giới thiệu vào ngày 22/10 tới đây.

Cận cảnh iPhone 11 "date mới" với hộp siêu mỏng, bỏ củ sạc và tai nghe

tinybook tinybook 1 tuần 2 ngày
Cận cảnh iPhone 11 "date mới" với hộp siêu mỏng, bỏ củ sạc và tai nghe
Không chỉ iPhone 12, Apple cũng sẽ "cắt" củ sạc và tai nghe của cả những thế hệ iPhone trước đó.

Apple cuối cùng cũng dùng hoàn toàn cáp sạc USB-C cho iPhone, nhưng theo cách tồi tệ nhất có thể

tinybook tinybook 1 tuần 2 ngày
Apple cuối cùng cũng dùng hoàn toàn cáp sạc USB-C cho iPhone, nhưng theo cách tồi tệ nhất có thể
Cáp sạc iPhone mới không kèm theo cốc sạc sẽ tạo ra nhiều sự bất tiện và một mớ hỗn độn về chất lượng môi trường.

Google Nexus 4: giá rẻ chưa bằng một nửa Pixel 5 nhưng vẫn có chipset flagship

tinybook tinybook 1 tuần 2 ngày
Google Nexus 4: giá rẻ chưa bằng một nửa Pixel 5 nhưng vẫn có chipset flagship
Dòng sản phẩm Nexus có thể có khởi đầu không mấy thuận lợi, nhưng lại nhận được sự yêu quý từ cộng đồng fan theo cách mà dòng Pixel chưa bao giờ đạt được.
tinybook Công Nghệ Thông Tin








Chat