Thời gian gần đây dân công nghệ không ai là không biết đến sự xuất hiện "vạn người mong" của iPhone X. Apple đã mạnh dạn bỏ đi phím home kiêm cảm biến Touch ID trên thiết bị, việc này cũng giúp phần viền bezel của chiếc iPhone mới mỏng hơn. Đây chính là điểm thay đổi lớn nhất về phần thiết kế trên iPhone X khi so với những người tiền nhiệm của mình. Có thể nói rằng đây cũng chính là bước đầu trong một phương diện mới đối với các nhà thiết kế (designer).

iPhone X thực sự đang có doanh số rất ấn tượng nhờ vào thiết kế viền cạnh siêu mỏng. Ngoài Apple, chúng ta còn có Galaxy S8 của Samsung hay Xiaomi với Mi MIX. Tương lai sẽ có nhiều hơn nữa smartphone áp dụng công nghệ này. Hiện tại những người làm việc trong lĩnh vực phát triển nội dung web như web designer đang loay hoay trong các vấn đề như: thiết kế mobile page sẽ như thế nào trong thời gian tới, những điểm nào cần phải lưu ý khi thiết kế web cho smartphone có màn hình full như vậy,... Bài viết này sẽ giới thiệu cho người đọc 3 điều cần chú ý liên quan đến Mobile navigation trong thời đại iPhone X

1. Thời đại của menu dạng humburger sắp kết thúc?

Trong giới thiết kế web mọi người đã từng cho rằng "menu thiết kế dạng humburger là thiết kế sẽ sớm bị tuyệt chủng", tháng 5/2014 tại TechChrunch đã từng có ý kiến phát biểu rằng "không nên sử dụng menu dạng humburger". Tuy nhiên, dù có nhiều web designer, apply designer không sử dụng menu dạng này với lý do "nếu không click vào menu thì sẽ không xem được" thì menu này vẫn tồn tại đến ngày nay bởi chính lý do đó. Một ưu điểm nữa là khi thiết kế menu dạng này ở phía trên bên trái hay phía dưới bên phải thì nó đều không gây ảnh hưởng gì đến view xem. Hơn nữa, do menu này có thể hiển thị ẩn nên đối với các designer nó khá hữu ích. Hầu hết các website hay apply sử dụng menu dạng humburger này đều đặt nó ở phía trên bên trái hoặc phía dưới bên phải - những vị trí dễ sử dụng trên smartphone.

Tuy nhiên, iPhoneX được thiết kế dài hơn iPhone 7 hay iPhone 8, và cấu trúc 4 góc của nó không còn giống như những bản tiền nhiệm. Vậy nếu sử dụng menu dạng humburger này thì không khó để thấy rằng nó sẽ rất bất tiện.

Trên thực tế thiết kế menu dạng humburger cũng đã không còn được sử dụng trong hầu hết các mockup do Dribble công bố.

2. Cách sử dụng bottom area chính là chìa khóa

Theo một điều tra của Bộ Nội vụ Nhật Bản, người dùng ngày nay ngoài nhà riêng thì họ thường xuyên sử dụng internet trên thiết bị mobile khi đang di chuyển, thực tế đã cho thấy rằng số lượng người sử dụng smartphone khi đang di chuyển đã tăng gấp 10 lần so với máy tính cá nhân.

So với iPhone 8, iphone X to hơn cả về chiều dài và chiều rộng tuy nhiên điều này cũng không cản trở người dùng có thể vừa di chuyển vừa sử dụng thiết bị bằng một tay. Do đó việc đặt menu vào phía dưới màn hình nơi mà ngón tay cái dễ dàng thao tác có lẽ được coi là thượng sách.

Tuy nhiên, kiểu thực hiện navigaton truyền thống ở bên dưới cũng đang dần dần biến mất. Mặc dù phương thức đặt bottom navigation như ở màn hình bên trái của mockup trên đã được sử dụng từ khá lâu nhưng có nhiều designer cho rằng không thể vận dụng hết được các ưu điểm của "chế độ toàn màn hình" nếu sử dụng bottom navigation.

Hiện nay, thiết kế website và apply đang sử dụng menu button như ở mockup trên đang dần thay thế menu dạng humburger. Button này không gây ảnh hưởng đến thiết kế vì vậy có thể nó sẽ được sử dụng rộng rãi trong thời gian tới.

3. 3 loại màn hình có thể sẽ được phổ cập ở iPhone X

“Màn hình nào sẽ có thể ứng dụng được hết các ưu điểm của chế độ toàn màn hình của iPhone X” - đây có lẽ là câu hỏi được đặt ra nhiều nhất trong thời điểm này. Theo Dribble có 3 loại màn hình sau có khả năng được ứng dụng rộng rãi ở iPhone X

A. Loại toàn màn hình (full screen)

iPhone X Web Navigation Idea on dribbble Màn hình dạng toàn màn hình là là thiết kế được sử dụng nhiều trong các thiết kế apply,... Đặc trưng nổi bật của thiết kế này là giao diện người dùng được điền đầy bởi độ phân giải cao,... nên nó trông giống như một tác phẩm nghệ thuật 　　 B. Loại phân trên dưới (Bottom split type)

Màn hình kiểu phân chia trên dưới có xu hướng được áp dụng rộng rãi trên các apply hay mobile page. Với thiết kế này thường ở bên trên sẽ là nội dung chính như ảnh,...và bên dưới sẽ là các thông tin chi tiết. Ngoài ra, kiểu thiết kế này cũng sẽ không gây ảnh hưởng đến thiết kế tổng thể.

C. Loại thẻ (card type)

Màn hình dạng này rất phù hợp với các trường hợp có lượng thông tin lớn, các thông tin sẽ được hiển thị nội dung theo dạng thẻ. Với dạng trượt ngang như trên thì giao diện người dùng cũng có thể được mở rộng bằng cách tab vào thẻ muốn hiển thị chi tiết, các thẻ sẽ hiển thị theo chiều dọc giống như các ứng dụng của App Store.

Màn hình dạng thẻ là một thiết kế phức tạp hơn do nó kết hợp giữa 2 màn hình đã được trình bày ở trên là màn hình dạng toàn màn hình và màn hình dạng phân chia trên dưới. Do có thể mở rộng, thu nhỏ thẻ nên người dùng sẽ có trải nghiệm như đang di chuyển site map ba chiều.

Tổng kết

Iphone X mới được đưa ra thị trường chính thức từ đầu tháng 11/2017 tuy nhiên do đây là một thiết kế hoàn toàn mới nên nó vẫn còn khá nhiều vướng mắc trong vấn đề thiết kế. Các nhà thiết kế adapter hiện tại vẫn ngày ngày đưa ra các ý tưởng mới. Tuy nhiên đến tận thời điểm này vẫn chưa có ý tưởng nào được coi là lý tưởng nhất, do đó chúng ta hãy cùng suy nghĩ và thử nghiệm để đưa ra được một thiết kế ưu việt nhất cho người dùng.

Trích nguồn: https://ferret-plus.com/9087