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

Đây là lý do Trung Quốc hơn tỷ dân nhưng chẳng ai thèm xếp hàng chờ mua iPhone XS cả

tinybook tinybook 16 giờ 57 giây
Đây là lý do Trung Quốc hơn tỷ dân nhưng chẳng ai thèm xếp hàng chờ mua iPhone XS cả
Điều gì đã khiến thói quen mua iPhone tại nơi đây thay đổi khó hiểu đến vậy, lại còn là iPhone XS vừa ra mắt nữa?

Cận cảnh mẫu case trong suốt đầu tiên của Apple, dùng để khoe màu sắc của iPhone XR

tinybook tinybook 16 giờ 2 phút
Cận cảnh mẫu case trong suốt đầu tiên của Apple, dùng để khoe màu sắc của iPhone XR
Từ trước tới nay, Apple cung cấp rất nhiều mẫu case cho các thiết bị của họ. Tuy nhiên, hãng này chưa bao giờ ra mắt case trong suốt.

Cận cảnh Galaxy Note9 phiên bản Silver: màu bạc sang chảnh, chỉ có 1 SIM, chưa có hàng chính hãng

tinybook tinybook 17 giờ 6 phút
Cận cảnh Galaxy Note9 phiên bản Silver: màu bạc sang chảnh, chỉ có 1 SIM, chưa có hàng chính hãng
Phiên bản màu Bạc mà chúng tôi trên tay hiện là sản phẩm từ nhà mạng của Hàn Quốc và đưa về Việt Nam theo đường xách tay với giá gần 18 triệu đồng.

Vì sao nói năm 2018 này, game trên di động đã chính thức vượt mặt game "chính thống" trên PC và console?

tinybook tinybook 17 giờ 30 phút
Vì sao nói năm 2018 này, game trên di động đã chính thức vượt mặt game "chính thống" trên PC và console?
Nói một cách đơn giản, những chiếc smartphone đã phát triển đủ mạnh để trở thành lựa chọn thay thế cho các thiết bị chơi game "nghiêm túc". Galaxy Note9 là minh chứng điển hình.

Liên minh Realme và Thế Giới Di Động: Lời cam kết nghiêm túc của thương hiệu non trẻ

tinybook tinybook 17 giờ 49 phút
Liên minh Realme và Thế Giới Di Động: Lời cam kết nghiêm túc của thương hiệu non trẻ
Dù chỉ mới thành lập từ tháng 5/2018, tại Ấn Độ, nhưng Realme đang cho thấy những bước phát triển mạnh mẽ đặc biệt tại thị trường Việt Nam khi gần đây hãng đã đặt mối quan hệ đối tác lâu dài đến chuỗi bán lẻ lớn nhất là Thế Giới Di Động.

Cụm camera mới của Huawei Mate 20 Pro hứa hẹn sẽ khuấy động cuộc chiến camera

tinybook tinybook 17 giờ 49 phút
Cụm camera mới của Huawei Mate 20 Pro hứa hẹn sẽ khuấy động cuộc chiến camera
Chỉ còn rất ít ngày nữa, chiếc màn bí mật về hai siêu phẩm cuối năm của Huawei sẽ chính thức được vén ra. Với những thông tin được đồn thổi thời gian gần đây, bộ đôi này hứa hẹn sẽ khiến những đối thủ khác trên thị trường phải dè chừng.

Hình ảnh rò rỉ cho thấy một phiên bản Huawei Mate 20 đặc biệt sẽ hỗ trợ bút stylus giống Note9

tinybook tinybook 22 giờ 3 phút
Hình ảnh rò rỉ cho thấy một phiên bản Huawei Mate 20 đặc biệt sẽ hỗ trợ bút stylus giống Note9
Chúng ta có thể thấy bên trái là hai chiếc Mate 20 có kích thước khác nhau, còn bên phải là một phiên bản với kích thước màn hình lớn hơn hẳn.

Nhìn thấu bản chất: Vì sao Google Pixel hay Microsoft Surface dùng rất sướng nhưng nhiều lỗi vặt và dễ hỏng?

tinybook tinybook 1 ngày 11 giờ
Nhìn thấu bản chất: Vì sao Google Pixel hay Microsoft Surface dùng rất sướng nhưng nhiều lỗi vặt và dễ hỏng?
Nếu như tháng 8 và tháng 9 là thời khắc tỏa sáng của Samsung và Apple thì tháng 10 sẽ lại chứng kiến 2 đối thủ còn lại tung ra át chủ bài: ngày 2/10, Microsoft vén màn Surface Pro 6 và đến ngày 9/10, Google ra mắt Pixel 3. Đây đều là các sản phẩm rất tốt về mặt trải nghiệm sử dụng, nhưng độ bền thì rất đáng lo ngại.

Cùng với Samsung Galaxy A7, Huawei Mate 20 Pro sẽ làm nên trào lưu smartphone 3 camera sau

tinybook tinybook 1 ngày 11 giờ
Cùng với Samsung Galaxy A7, Huawei Mate 20 Pro sẽ làm nên trào lưu smartphone 3 camera sau
Chỉ vài ngày sau khi Samsung Galaxy A7 với 3 camera ra mắt, Huawei Mate 20 Pro là thiết bị tiếp theo với trang bị tương tự chuẩn bị được giới thiệu.

Phút giây lịch sử của nhân loại: tròn 35 năm trước, chúng ta chính thức sở hữu mạng di động 1G

tinybook tinybook 1 ngày 15 giờ
Phút giây lịch sử của nhân loại: tròn 35 năm trước, chúng ta chính thức sở hữu mạng di động 1G
Với phần lớn những người đang sử dụng điện thoại di động, việc họ nhắn tin, gọi điện, lướt Facebook mỗi ngày dường như đã bắt đầu từ lâu lắm rồi. Nhưng thực ra, cơ sở hạ tầng hỗ trợ điện thoại di động lại mới có tuổi đời 35 năm mà thôi!

Xiaomi Black Shark 2 sẽ sớm ra mắt để đấu với Razer Phone 2

tinybook tinybook 1 ngày 20 giờ
Xiaomi Black Shark 2 sẽ sớm ra mắt để đấu với Razer Phone 2
Không chịu thua kém đối thủ Razer Phone 2, Black Shark 2 cũng đã sẵn sàng để được giới thiệu trên toàn cầu.

Samsung sắp đưa "tân binh" Galaxy A6s ra thị trường: mặt lưng bóng bẩy, dùng màn LCD 6 inch, vị trí đặt cảm biến vân tay hơi cao

tinybook tinybook 1 ngày 22 giờ
Samsung sắp đưa "tân binh" Galaxy A6s ra thị trường: mặt lưng bóng bẩy, dùng màn LCD 6 inch, vị trí đặt cảm biến vân tay hơi cao
Hình ảnh Samsung Galaxy Phoenix hay Galaxy A6s vừa xuất hiện trên mạng Weibo được kỳ vọng sẽ trở thành đối trọng với iPhone XR trên thị trường.

Microsoft có thể chấm dứt dòng sản phẩm Surface trong năm 2019?

tinybook tinybook 1 ngày 23 giờ
Microsoft có thể chấm dứt dòng sản phẩm Surface trong năm 2019?
Microsoft dường như thực sự muốn làm phần cứng, và màn ra mắt gần đây của Surface Pro 6, Surface Studio 2, Surface Laptop 2, và Surface Headphones là bằng chứng sống cho thấy gã khổng lồ phần mềm hoàn toàn không có ý định từ bỏ thị trường này.

Biến chiếc smartphone của bạn thành máy ảnh DSLR chỉ bằng 1 món phụ kiện

tinybook tinybook 2 ngày 8 giờ
Biến chiếc smartphone của bạn thành máy ảnh DSLR chỉ bằng 1 món phụ kiện
Thay vì bỏ gấp đôi số tiền để sở hữu 1 chiếc smartphone và 1 chiếc máy ảnh, bạn có thể sử dụng món phụ kiện này để đạt được mục đích!

Ảnh thực tế Xiaomi Redmi Note 6 Pro: Snapdragon 636, màn tai thỏ, lần đầu có 4 camera, mặt lưng không ấn tượng, giá 5 triệu đồng

tinybook tinybook 2 ngày 11 giờ
Ảnh thực tế Xiaomi Redmi Note 6 Pro: Snapdragon 636, màn tai thỏ, lần đầu có 4 camera, mặt lưng không ấn tượng, giá 5 triệu đồng
Với cụm camera kép trước và camera kép sau, Redmi Note 6 Pro trở thành điện thoại đầu tiên của nhà Xiaomi trang bị đến 4 camera.

Samsung Galaxy S9 sẽ nhận thêm các tính năng camera AI với bản cập nhật Android 9

tinybook tinybook 1 ngày 18 giờ
Samsung Galaxy S9 sẽ nhận thêm các tính năng camera AI với bản cập nhật Android 9
Với sự tăng cường của các tính năng AI mới, camera của Galaxy S9 sẽ mang đến cho người dùng nhiều trải nghiệm thú vị hơn.

Xiaomi ra mắt mặt nạ thông minh, dựa trên sóng não để phát nhạc giúp người dùng dễ ngủ và thức dậy một cách tự nhiên

tinybook tinybook 16 giờ 19 phút
Xiaomi ra mắt mặt nạ thông minh, dựa trên sóng não để phát nhạc giúp người dùng dễ ngủ và thức dậy một cách tự nhiên
Chiếc mặt nạ thông minh này được bán với giá 36 USD.

Google Home 2.6 xuất hiện tính năng đáng ra phải có từ cả năm trước

tinybook tinybook 20 giờ 19 phút
Google Home 2.6 xuất hiện tính năng đáng ra phải có từ cả năm trước
Google Home 2.6 sẽ sở hữu một dashboard tổng quan cho smart home cùng giao diện Material Theme mới mẻ, cho phép người dùng điều khiển các thiết bị thông minh ngay trên điện thoại của bạn.

Chuyên gia công nghệ cho rằng HDR là nhân tố rút ngắn tuổi thọ màn hình TV OLED

tinybook tinybook 21 giờ 19 phút
Chuyên gia công nghệ cho rằng HDR là nhân tố rút ngắn tuổi thọ màn hình TV OLED
Nội dung HDR đòi hỏi độ sáng cao hơn, và chuyên gia công nghệ của TechHive cho rằng điều này lại ảnh hưởng đến tuổi thọ màn hình TV OLED.

Trải nghiệm AirPods phiên bản “nửa mùa” giá 125.000 đồng: Suýt ngon như quảng cáo

tinybook tinybook 1 ngày 10 giờ
Trải nghiệm AirPods phiên bản “nửa mùa” giá 125.000 đồng: Suýt ngon như quảng cáo
Được quảng cáo là tai nghe thể thao phiên bản 2019 và có thiết kế tai na ná AirPods, sản phẩm này còn đang nhận hàng trăm lượt quan tâm và đặt mua.

Chẳng cần phải mang theo smartphone hay máy ảnh, chỉ cần dụng cụ thần thánh này là có thể bao trọn ảnh selfie rồi

tinybook tinybook 1 ngày 21 giờ
Chẳng cần phải mang theo smartphone hay máy ảnh, chỉ cần dụng cụ thần thánh này là có thể bao trọn ảnh selfie rồi
Hãy quên đi việc phải mang theo những chiếc gậy selfie hay smartphone kè kè bên người mỗi khi đi du lịch hoặc đi dạo chơi vì phụ kiện có tên OPPY này sẽ giúp bạn thay thế toàn bộ những thứ kia.

Kevdia: Cây gậy đi bộ tuyệt vời dành cho người già, thiết kế giống con lật đật nên chẳng bao giờ sợ bị ngã

tinybook tinybook 1 ngày 21 giờ
Kevdia: Cây gậy đi bộ tuyệt vời dành cho người già, thiết kế giống con lật đật nên chẳng bao giờ sợ bị ngã
Chiếc gậy đi bộ Kevdia sẽ là món quà không thể tuyệt vời hơn cho người cao tuổi vì họ không còn phải mất công cúi lưng chỉ để nhặt cây gậy vô tình đánh rơi, bởi nó có thể tự bật lại ngay khi bị đổ xuống.

Đại diện Leica: Ngàm E-mount của Sony không thích hợp cho cảm biến Full-frame!

tinybook tinybook 1 ngày 22 giờ
Đại diện Leica: Ngàm E-mount của Sony không thích hợp cho cảm biến Full-frame!
'Cuộc chiến không gương lật' đang trở nên nảy lửa, khi một đại diện của hãng Leica nói rằng ngàm của Sony không đủ chất lượng để cạnh tranh trong tương lai.

Đây là tấm ảnh động? Không phải, đó là màn hình TV

tinybook tinybook 2 ngày 10 giờ
Đây là tấm ảnh động? Không phải, đó là màn hình TV
Dưới đây là 5 thiết kế màn hình cho chế độ Ambient Mode của TV QLED đã giành được giải thưởng trong cuộc thi do Samsung tổ chức.

Phải chăng thời điểm bạn nên chuyển từ Mac sang Windows đã đến?

tinybook tinybook 2 ngày 10 giờ
Phải chăng thời điểm bạn nên chuyển từ Mac sang Windows đã đến?
Mike Murphy, phóng viên trang tin Quartz, một người đã sử dụng Mac từ năm 18 tuổi đến nay, giải thích tại sao đã đến lúc chuyển từ Mac sang Windows.

Google Pixel 3 vs. iPhone XS: mèo nào cắn mỉu nào?

tinybook tinybook 2 ngày 21 giờ
Google Pixel 3 vs. iPhone XS: mèo nào cắn mỉu nào?
Chỉ sau chưa đầy một tháng iPhone XS ra mắt, chúng ta có một siêu phẩm smartphone cao cấp tiếp theo để lựa chọn: Google Pixel 3.

Đây là 5 tính năng hấp dẫn trên Razer Phone 2 chắc chắn sẽ khiến bạn phải động lòng “xúc” ngay em nó về nhà

tinybook tinybook 2 ngày 21 giờ
Đây là 5 tính năng hấp dẫn trên Razer Phone 2 chắc chắn sẽ khiến bạn phải động lòng “xúc” ngay em nó về nhà
Không phụ sự chờ đợi của giới công nghệ, chiếc Razer Phone 2 ra mắt mới đây của Razer không chỉ sở hữu một cấu hình siêu khủng mà còn có những tính năng vô cùng hấp dẫn, đáng để tậu về chơi game và khoe với bạn bè.

Apple sắp mở Apple Store đầu tiên tại Thái Lan, bao giờ đến Việt Nam?

tinybook tinybook 2 ngày 21 giờ
Apple sắp mở Apple Store đầu tiên tại Thái Lan, bao giờ đến Việt Nam?
Cụ thể là tại khu tổ hợp giải trí Icon Siam ở thủ đô Bankok sắp khai trương vào ngày 9/11 tới đây.

Đánh giá iPhone X sau 1 năm sử dụng: Tróc sơn, tai thỏ, Face ID, mức độ giữ giá và những vấn đề liên quan

tinybook tinybook 2 ngày 21 giờ
Đánh giá iPhone X sau 1 năm sử dụng: Tróc sơn, tai thỏ, Face ID, mức độ giữ giá và những vấn đề liên quan
Đã gần 1 năm kể từ khi chiếc iPhone X chính thức được bán ra. Vậy, khoản đầu tư 1000 USD năm ngoái bây giờ ra sao?

Ming-Chi Kuo: iPhone XR sẽ giúp Apple thay đổi cục diện thị trường Trung Quốc khi các hãng nội địa đang dần suy yếu

tinybook tinybook 2 ngày 22 giờ
Ming-Chi Kuo: iPhone XR sẽ giúp Apple thay đổi cục diện thị trường Trung Quốc khi các hãng nội địa đang dần suy yếu
Khi các đối thủ tại thị trường Trung Quốc đang có doanh số không mấy suôn sẻ, Apple hoàn toàn toàn có thể tận dụng sự thành công của iPhone XR để vươn lên và lấy lại thị phần.
tinybook Công Nghệ Thông Tin








Chat