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

Điện thoại quả chuối Nokia 8110 phiên bản hiện đại chính thức ra mắt thị trường Việt Nam với giá 1,68 triệu đồng

tinybook tinybook 1 tuần 1 ngày
Điện thoại quả chuối Nokia 8110 phiên bản hiện đại chính thức ra mắt thị trường Việt Nam với giá 1,68 triệu đồng
Với hai màu sắc nổi bật là màu đen truyền thống và màu vàng chuối, Nokia 8110 sẽ tái hiện lại mọi thứ bạn ưa thích từ thương hiệu Nokia, bao gồm cả trò chơi "Rắn săn mồi".

iPhone SE (2018) sẽ được trình làng vào tháng Chín cùng iPhone Xs, Xs Plus và iPhone 9

tinybook tinybook 1 tuần 1 ngày
iPhone SE (2018) sẽ được trình làng vào tháng Chín cùng iPhone Xs, Xs Plus và iPhone 9
Trước đó, nhiều nguồn tin cho rằng iPhone SE (2018) sẽ được ra mắt ngay trong sự kiện WWDC diễn ra vào tháng Sáu tới.

iPhone 8 và iPhone 8 Plus màu đỏ chính thức mở bán tại Việt Nam, giá từ 20,99 triệu

tinybook tinybook 1 tuần 1 ngày
iPhone 8 và iPhone 8 Plus màu đỏ chính thức mở bán tại Việt Nam, giá từ 20,99 triệu
iPhone 8/8 Plus (PRODUCT) RED chính hãng (VN/A) sẽ chính thức lên kệ ngày hôm nay.

Qualcomm tuyên bố smartphone 5G đầu tiên sẽ xuất hiện vào cuối năm 2018

tinybook tinybook 1 tuần 1 ngày
Qualcomm tuyên bố smartphone 5G đầu tiên sẽ xuất hiện vào cuối năm 2018
Dường như công nghệ 5G đang phát triển với tốc độ cao hơn so với những gì chúng ta tưởng tượng.

Sẽ không có iPhone SE 2, thay vào đó là iPhone SE (2018)

tinybook tinybook 1 tuần 1 ngày
Sẽ không có iPhone SE 2, thay vào đó là iPhone SE (2018)
Giá bán của iPhone SE (2018) chưa được tiết lộ. Nhưng chúng ta có thể hy vọng rằng đây sẽ là chiếc iPhone có giá bán rẻ nhất của Apple trong năm nay.

Chip dành cho smartwatch sắp tới của Qualcomm sẽ hỗ trợ theo dõi ánh mắt

tinybook tinybook 1 tuần 1 ngày
Chip dành cho smartwatch sắp tới của Qualcomm sẽ hỗ trợ theo dõi ánh mắt
Một thông tin vừa xuất hiện hôm qua cho biết Qualcomm và Google đang hợp tác phát triển một con chip (SoC) mới dành cho các smartwatch Wear OS trong tương lai.

Không nghi ngờ gì nữa, nếu chọn smartphone selfie thật nữ tính thì đây là ứng viên hàng đầu rồi

tinybook tinybook 1 tuần 1 ngày
Không nghi ngờ gì nữa, nếu chọn smartphone selfie thật nữ tính thì đây là ứng viên hàng đầu rồi
Nếu bạn là fangirl của màu hồng thì điện thoại Huawei màu hồng (Sakura Pink) mới ra mắt vào ngày 05/05 vừa qua chắc chắn sẽ làm bạn hài lòng.

Cái chết của Windows Phone đã khiến Windows 10 bỗng chốc trở thành "kép phụ" ngay bên trong Microsoft

tinybook tinybook 1 tuần 2 ngày
Cái chết của Windows Phone đã khiến Windows 10 bỗng chốc trở thành "kép phụ" ngay bên trong Microsoft
Không còn khả năng duy trì sự thống trị lên chiến trường hệ điều hành, Microsoft buộc phải tìm đến một "tầng" công nghệ cao hơn để có thể tiếp tục kiểm soát cả thế giới. Sự kiện Build năm nay là minh chứng rõ ràng nhất cho sự đổi thay này.

Lộ báo cáo của EEC cho thấy toàn bộ smartphone mà Xiaomi có thể ra mắt trong năm 2018

tinybook tinybook 1 tuần 2 ngày
Lộ báo cáo của EEC cho thấy toàn bộ smartphone mà Xiaomi có thể ra mắt trong năm 2018
Danh sách này cho thấy Xiaomi vẫn sẽ tiếp tục tập trung vào các thị trường phân khúc tầm thấp với rất nhiều dòng smartphone giá rẻ.

Đánh giá Nokia 1: Khi phần mềm tốt không thể "gánh" nổi phần cứng tệ

tinybook tinybook 1 tuần 2 ngày
Đánh giá Nokia 1: Khi phần mềm tốt không thể "gánh" nổi phần cứng tệ
Mặc dù rất thích Android Go trên Nokia 1, tuy nhiên chúng tôi không thể khuyến cáo người dùng mua chiếc máy này, đặc biệt khi trên thị trường có những sản phẩm tốt hơn trong cùng tầm giá.

Amazon làm lộ hình ảnh OnePlus 6, hai màu sắc Mirror Black và Midnight Black, giá bán từ 519 USD

tinybook tinybook 1 tuần 2 ngày
Amazon làm lộ hình ảnh OnePlus 6, hai màu sắc Mirror Black và Midnight Black, giá bán từ 519 USD
OnePlus 6 sẽ là chiếc smartphone cạnh tranh với iPhone X và Galaxy S9, nhưng có giá chỉ bằng một nửa.

Để Galaxy S9 Plus dưới đường ray tàu hỏa và cái kết không thể đau lòng hơn

tinybook tinybook 1 tuần 2 ngày
Để Galaxy S9 Plus dưới đường ray tàu hỏa và cái kết không thể đau lòng hơn
Chiếc Galaxy S9 Plus lành lặn sẽ ra sao khi để trên đường ray tàu hỏa và mặc cho những bánh xe vô tư lăn qua?

Chuyến đi của "thái tử" Samsung tới Trung Quốc: Lá cờ trắng, hay cơ hội phản đòn lại người Trung Quốc?

tinybook tinybook 1 tuần 2 ngày
Chuyến đi của "thái tử" Samsung tới Trung Quốc: Lá cờ trắng, hay cơ hội phản đòn lại người Trung Quốc?
Có lẽ, trong thế giới smartphone đầy những lời cạnh khóe, bạn sẽ rất hiếm khi bắt gặp nhà lãnh đạo tối cao của một hãng lại cầm trên tay điện thoại của hãng khác. Khi đến Thâm Quyến những ngày vừa qua, Thái tử Samsung đã đến tận Mi Store để "trên tay" một chiếc Mi Mix 2S.

Microsoft sẽ thay thế miễn phí những máy Surface Pro 4 dính lỗi chớp màn hình

tinybook tinybook 1 tuần 2 ngày
Microsoft sẽ thay thế miễn phí những máy Surface Pro 4 dính lỗi chớp màn hình
Sau 3 tháng xảy ra lỗi chớp màn hình trên Surface Pro 4, Microsoft mới đây đã mở chính sách thay thế miễn phí màn hình của những máy gặp lỗi.

Nhà sản xuất case bảo vệ tiết lộ iPhone SE 2 sẽ giống bản thu nhỏ của iPhone X

tinybook tinybook 1 tuần 3 ngày
Nhà sản xuất case bảo vệ tiết lộ iPhone SE 2 sẽ giống bản thu nhỏ của iPhone X
Hình ảnh render về case bảo vệ cho iPhone SE 2 tiết lộ phần nào về thiết kế của máy giống với iPhone X.

Bằng sáng chế mới của Apple cho phép hiển thị 2 khung hình riêng biệt cho hệ thống dual-camera trên smartphone

tinybook tinybook 1 tuần 3 ngày
Bằng sáng chế mới của Apple cho phép hiển thị 2 khung hình riêng biệt cho hệ thống dual-camera trên smartphone
Người dùng có thể xem đồng thời hình ảnh từ 2 camera trên smartphone của Apple thay vì chỉ một như trước.

Không cần thị trường Mỹ, những nhãn hiệu smartphone Trung Quốc này cực kỳ thành công tại châu Âu

tinybook tinybook 1 tuần 3 ngày
Không cần thị trường Mỹ, những nhãn hiệu smartphone Trung Quốc này cực kỳ thành công tại châu Âu
Có hai trong số các công ty smartphone lớn trên thế giới vẫn đang đợi cơ hội để tấn công thị trường Mỹ. Trong lúc đó, họ lại nhận được sự chào đón nồng nhiệt từ người tiêu dùng bên kia Đại Tây Dương.

Một startup ốp lưng điện thoại đã kiếm hàng triệu USD bằng cách phá hủy những chiếc iPhone X như thế nào?

tinybook tinybook 1 tuần 3 ngày
Một startup ốp lưng điện thoại đã kiếm hàng triệu USD bằng cách phá hủy những chiếc iPhone X như thế nào?
Hãy hình dung có một người lạ đến chỗ bạn bên ngoài một cửa hàng flagship của Apple vào ngày iPhone X ra mắt. Anh ta lấy một chiếc điện thoại iPhone mới mua, lắp ốp lưng vào chiếc điện thoại đó và mời bạn ném nó vào vỉa hè. Bạn sẽ cảm thấy như thế nào?

Ngoài iPhone X, đây là những smartphone "tai thỏ" tốt nhất mà bạn có thể sở hữu ngay bây giờ

tinybook tinybook 1 tuần 3 ngày
Ngoài iPhone X, đây là những smartphone "tai thỏ" tốt nhất mà bạn có thể sở hữu ngay bây giờ
Đây là danh sách tổng hợp smartphone tai thỏ chạy Android với cấu hình tốt, hiệu năng cao chụp ảnh đẹp nhất trên thị trường ở mọi mức giá.

Microsoft hé lộ bằng sáng chế Surface Phone với 3 màn hình có thể gập lại được

tinybook tinybook 1 tuần 3 ngày
Microsoft hé lộ bằng sáng chế Surface Phone với 3 màn hình có thể gập lại được
Trong đó, một màn hình phụ sẽ nằm trên phần bản lề kết nối hai màn hình chính còn lại.

Tiki.vn mở bán độc quyền Xiaomi Mi Mix 2S – Tặng quà 1,5 triệu đồng chỉ trong ngày 15/05/2018

tinybook tinybook 1 tuần 3 ngày
Tiki.vn mở bán độc quyền Xiaomi Mi Mix 2S – Tặng quà 1,5 triệu đồng chỉ trong ngày 15/05/2018
Từ ngày 07/05/2018, siêu phẩm Xiaomi Mi Mix 2S đã chính thức ra mắt tại Việt Nam và là đối thủ “nặng ký” trong phân khúc smartphone từ 12 đến 15 triệu đồng. Được đánh giá là “Iphone X của thế giới Android”, sản phẩm này có thiết kế viền màn hình siêu mỏng, camera tích hợp trí tuệ nhân tạo cùng công nghệ sạc không dây đột phá.

Apple sẽ sử dụng nhôm thân thiện với môi trường để sản xuất MacBook và iPhone

tinybook tinybook 1 tuần 4 ngày
Apple sẽ sử dụng nhôm thân thiện với môi trường để sản xuất MacBook và iPhone
Apple có rất nhiều sáng kiến thân thiện với môi trường, như sử dụng năng lượng tái tạo được để cấp điện cho các nhà máy và khuyến khích các nhà cung ứng làm điều tương tự.

BlackBerry KEY2 có thể sử dụng chip Snapdragon 660 và RAM 6 GB

tinybook tinybook 1 tuần 4 ngày
BlackBerry KEY2 có thể sử dụng chip Snapdragon 660 và RAM 6 GB
BlackBerry KEY2 hầu như sẽ giữ lại thiết kế của người tiền nhiệm nhưng sẽ được nâng cấp về phần cứng.

Asus ra mắt smartphone chơi game ROG vào tháng 6

tinybook tinybook 1 tuần 4 ngày
Asus ra mắt smartphone chơi game ROG vào tháng 6
Sau Razer, Xiaomi, ZTE, có lẽ sẽ đến lượt Asus ra mắt smartphone chuyên trị game trong thời gian tới.

Nhờ iPad, một công ty xây dựng tiết kiệm được 1,8 triệu USD và 55.000 giờ làm việc mỗi năm

tinybook tinybook 1 tuần 4 ngày
Nhờ iPad, một công ty xây dựng tiết kiệm được 1,8 triệu USD và 55.000 giờ làm việc mỗi năm
Mọi nhân viên công ty có thể cùng nhau làm việc với các bản kế hoạch có thể chỉnh sửa theo thời gian thực nhờ lưu trữ trên đám mây.

Test pin Xiaomi Mi Mix 2s với iPhone và Galaxy S

tinybook tinybook 1 tuần 4 ngày
Test pin Xiaomi Mi Mix 2s với iPhone và Galaxy S
Thời lượng pin của Mi Mix 2s chỉ mở mức trung bình so với nhiều flagship khác trên thị trường.

Đi chụp hoàng hôn lại quên mang máy ảnh, tôi đã dùng iPhone X và Galaxy S9+ để chụp ra những bức ảnh này

tinybook tinybook 1 tuần 4 ngày
Đi chụp hoàng hôn lại quên mang máy ảnh, tôi đã dùng iPhone X và Galaxy S9+ để chụp ra những bức ảnh này
iPhone X hay Galaxy S9+, đâu mới là cứu cánh lớn nhất cho buổi chiều hôm ấy?

Qualcomm: Smartphone đầu tiên hỗ trợ kết nối 5G sẽ ra mắt ngay trong năm nay

tinybook tinybook 1 tuần 4 ngày
Qualcomm: Smartphone đầu tiên hỗ trợ kết nối 5G sẽ ra mắt ngay trong năm nay
Qualcomm cũng khẳng định 5G sẽ sớm có mặt trên tất cả các phân khúc smartphone và các thiết bị khác như tablet hay notebook.

YouTube chính thức hỗ trợ video HDR cho iPhone X và bộ đôi iPhone 8/8 Plus

tinybook tinybook 1 tuần 4 ngày
YouTube chính thức hỗ trợ video HDR cho iPhone X và bộ đôi iPhone 8/8 Plus
Người dùng iPhone cũng có thể trải nghiệm những video này ở rất nhiều độ phân giải khác nhau, từ 480p cho đến 1080p.

Samsung thực hiện cuộc kiểm tra quy mô lớn tại Mỹ vì doanh số Galaxy S9 không được như mong đợi?

tinybook tinybook 1 tuần 4 ngày
Samsung thực hiện cuộc kiểm tra quy mô lớn tại Mỹ vì doanh số Galaxy S9 không được như mong đợi?
Dù Samsung phủ nhận nhưng nhiều chuyên gia nhận định chính việc doanh số Galaxy S9 không như mong muốn đã khiến công ty phải tiến hành tổng kiểm tra các hoạt động kinh doanh tại Mỹ.
tinybook Công Nghệ Thông Tin








Chat