Thiết kế điều hướng cho ứng dụng UWP

Điều hướng trong ứng dụng Windows hợp nhất (UWP) dựa trên mô hình linh hoạt của các cấu trúc điều hướng, các thành phần đều hướng và các tính năng mức hệ thống (system-level feature). Cùng với nhau chúng tạo ra nhiều trải nghiệm người dùng trực giác cho việc di chuyển giữa các ứng dụng, trang và nội dung.

Những trải nghiệm điều hướng nhiều trang tốt trong các ứng dụng UWP bao gồm (sẽ được trình bày chi tiết sau):

  • Cấu trúc điều hướng hợp lý

Xây dựng một cấu trúc điều hướng hợp lý cho người dùng là điều quyết định để tạo nên một trải nghiệm điều hướng trực quan.

  • Các thành phần điều hướng phù hợp hỗ trợ cho cấu trúc đã chọn

Các thành phần điều hướng có thể giúp người dùng nhận nội dung họ mong muốn và cũng có thể cho họ biết chúng nằm ở đâu trong ứng dụng. Tuy nhiên, chúng cũng sẽ lấy đi một khoảng không gian mà có thể được sử dụng cho nội dung hoặc các thành phần ra lệnh, vì vậy việc sử dụng các thành phần điều hướng sao cho phù hợp với ứng dụng của bạn cũng khá là quan trọng.

  • Các phản hồi thích hợp đến các tính năng điều hướng mức hệ thống (ví dụ như nút Back chẳng hạn)

Để cung cấp một trải nghiệm thích hợp cảm nhận một cách trực quan, phản hồi đến các chức năng điều hướng mức hệ thống theo những hướng có thể dự đoán được.

Xây dựng cấu trúc điều hướng hợp lý

Hãy xem một ứng dụng như là tập hợp của nhiều trang, mỗi trang gồm một tập nội dung hay tính năng độc nhất. Ví dụ, một ứng dụng hình ảnh có thể có một trang để dánh cho việc chụp ảnh, một trang dánh cho việc chỉnh sửa, và một trang khác để quản lý các thư viện ảnh. Cách mà bạn sắp xếp các trang này thành từng nhóm định nghĩa cấu trúc điều hướng của ứng dụng. Có 2 cách phổ biến để sắp xếp một nhóm các trang với nhau.

Phân cấp Ngang hàng

 

Các trang được tổ chức thành cấu trúc cây. Mỗi trang con chỉ có duy nhất một trang chủ, nhưng một trang chủcó thể có 1 hoặc nhiều trang con. Để tiếp cận trang con bạn phải thông qua trang chủ. Các trang tồn tại kề nhau. Bạn có thể đi từ trang này sang trang khác theo bất kì thứ tự nào.

 

Một ứng dụng đầy đủ sẽ sử dụng cả 2 cách sắp xếp với một số phần được sắp xếp theo kiểu ngang hàng, và một số khác thì được sắp xếp theo kiểu phân cấp.

Vì vậy khi nào bạn nên sắp xếp các trang thành các cấp, và khi nào bạn nên sấp xếp chúng ngang hàng với nhau? Để trả lời câu hỏi này, bạn nên cân nhắc về số lượng trang trong nhóm dù các trang này nên được đi qua theo một trình tự nhất định nào đó, và mối liên hệ giữa các trang này. Nhìn chung, các cấu trúc phẵng hơn thì dễ hiểu và điều hướng nhanh hơn, nhưng đôi khi một cấu trúc phân cấp sâu lại thích hợp hơn.

Đề xuất sử dụng cấu trúc phân cấp khi

  • Bạn mong muốn người dùng đi qua các trang theo một trình tự nhất định. Sắp xếp phân cấp để thực hiện điều này.
  • Có một sự liên kết cha-con rõ ràng giữa một trong các trang và các trang còn lại trong nhóm.
  • Nếu có nhiều hơn 7 trang trong một nhóm.

Khi có nhiều hơn 7 trang trong một nhóm, sẽ khó cho người dùng để biết được vị trí hiện tại của chúng trong nhóm. Nếu bạn không nghĩ đó là vấn đề cho ứng dụng của bạn, hãy tiếp tục và làm cho các trang ngang hàng với nhau. Ngược lạị, hãy xem xét việc sử dụng một cấu trúc phân cấp để chia các trang thành 2 hay nhiều nhóm nhỏ. (Hub control có thể giúp bạn nhóm các trang thành các danh mục)

Đề xuất sử dụng cấu trúc phẳng (ngang hàng) khi

  • Các trang được xem theo bất kì thứ tự nào.
  • Các trang được phân định một cách rõ ràng với nhau và không có một mối liên hệ cha-con thực sự nào.
  • Có ít hơn 8 trang trong một nhóm.

 

 

Sử dụng các thành phần điều hướng phù hợp

Các thành phần điều hướng có thể cung cấp 2 dịch vụ: chúng giúp người dùng nhận nội dung mà họ mong muốn và một số thành phần cũng để cho người dùng biết chúng ở đâu trong ứng dụng. Tuy nhiên, chúng cũng sẽ chiếm một phần không gian mà ứng dụng của bạn có thể sử dụng cho nội dung hoặc các thành phần ra lệnh, vì thế việc sử dụng các thành phần điều hướng phù hợp cho cấu trúc ứng dụng của bạn cũng khá là quan trọng.

Các thành phần điều hướng ngang hàng

Các thành phần điều hường ngang hàng cho phép sự điều hướng giữa các trang trong cùng mức của cùng cây con.

Đối với điều hướng ngang hàng, đề xuất sử dụng các thẻ tab hoặc thanh điều hướng.

Thành phần điều hướng Mô tả
Thẻ tab và pivot

 

Hiển thị một danh sách các liên kết đến các trang trên cùng một cấp. Sử dụng thẻ tab và pivot khi:

  • Có từ 2-5 trang (Bạn vẫn có thể sử dụng khi ứng dụng có trên 5 trang nhưng nó sẽ có thể khó để hiển thị vừa các thẻ tab/pivot trên màn hình)
  • Bạn muốn người dùng có thể chuyển qua lại giữa các trang thường xuyên.

Thiết kế sau đây dành cho ứng dụng tìm kiếm nhà hàng sử dụng thẻ tab/pivot

 

Thanh điều hướng (navigation pane)

Hiển thị danh sách các liên kết đến các trang đầu (top-level). Sử dụng thanh điều hướng khi:

  • Bạn không muốn người dùng thường xuyên chuyển đổi qua lại giữa các trang.
  • Bạn muốn giữ phần không gian hiển thị khi người dùng chuyển liên kết trên thanh điều hướng.
  • Các trang tồn tại ở top-level.

Thiết kế sau đây cho ứng dụng nhà thông minh sử dụng thanh điều hướng.

 

 

Nếu cấu trúc điều hướng có nhiều mức (multiple level), đề xuất bạn các thành phần điều hướng ngang hàng (peer-to-peer) chỉ liên kết đến cùng cấp trong phạm vi cây con hiện tại của chúng. Minh họa sau thể hiện kiến trúc điều hướng có 3 mức.

  • Đối với mức 1 (level 1), thành phần điều hướng ngang hàng nên thực hiện việc kết nối đến các trang A, B, C và D.
  • Đối với mức 2 (level 2), các thành phần điều hướng ngang hàng cho các trang A2 nên chỉ liên kết đến các trang A2. Chúng không nên kiên kết đến các trang level 2 của cây con của trang C.

Các thành phần điều hướng phân cấp

Các thành phần điều hướng ngang hàng cung cấp việc điều hướng giữa mà trang chính và các trang con của nó.

Thành phần điều hướng Mô tả
Hub

 

 

Hub là một loại điều khiển điều hướng đặc biệt cung cấp khả năng xem trước (preview)/tổng hợp (summary) cho các trang con của nó. Không giống như các thẻ tab và thanh điều hướng, nó cung cấp việc điều hướng đến các trang con thông qua các liên kết và đầu mục (section header) được nhúng trong chính các trang đó. Sử dụng Hub khi:

  • Bạn muốn người dùng thấy được nội dung của các trang con mà không phải đi vào từng trang đề xem.

Hub phù hợp cho các ứng dụng về giải trí, đọc báo và mua sắm.

 

Master/Detail

 

Hiển thị một danh sách tổng hợp (master view). Chọn 1 danh mục để hiển thị phần chi tiết nội dung của trang đó. Sử dụng thành phần Master/Detail khi:

  • Bạn muốn người dùng chuyển qua lại giữa các danh mục con thường xuyên.
  • Bạn muốn cho phép người dùng thực hiện tác vụ ở high-level, chẳng hạn như xóa hoặc sắp xếp, trên các danh mục hoặc nhóm danh mục, và cũng muốn cho phép người dùng xem hoặc cập nhật chi tiết cho từng danh mục.

Các thành phần Master/Detail phù hợp cho ứng dụng hộp mail, danh sách liên lạc và dữ liệu đầu vào.

Thiết kế sau cho ứng dụng theo dõi chứng khoán sử dụng mẫu master/detail.

 

 

 

Thành phần điều hướng lịch sử (historical navigation element)

Thành phần điều hướng Mô tả
Back Cho phép người dùng xem lại lịch sử truy cập trong phạm vi ứng dụng và phụ thuộc vào thiết bị, từ ứng dụng này sang ứng dụng khác. Chi tiết phần này trong mục “Để ứng dụng của bạn hoạt động tốt với các tính năng điều hướng mức hệ thống” ở bên dưới.

 

Các thành phần điều hướng có nội dung nhúng (Content-embedded navigation element)

 

Thành phần điều hướng Mô tả
Liên kết ngoại (hyperlink) và nút điều khiển (button) Các thành phần điều hướng có nội dung nhúng xuất hiện trong phần nội dung của một trang.

 

 

Kết hợp các thành phần điều hướng

Bạn có thể kết hợp các thành phần điều hướng để tạo ra một trải nghiệm điều hướng phù hợp cho ứng dụng của bạn. Ví dụ, ứng dụng của bạn có thể sử dụng một thanh điều hướng để cung cấp việc truy cập đến các trang top-level và các thẻ tab để cung cấp việc truy cập đến các trang second-level.

Để ứng dụng của bạn hoạt động tốt với các tính năng điều hướng mức hệ thống (system level)

Trên Web, các trang web riêng lẻ cung cấp các hệ thống điều hướng của riêng chúng, chẳng hạn như các bảng nội dung, các nút nhấn, danh mục (menu), các danh sách liên kết đơn giản… Trải nghiệm điều hướng này có thể trải rộng từ website này đến website khác. Tuy nhiên, có một trải nghiệm điều hướng đặc trưng: quay lại (Back). Hầu hết các trình duyệt đều cung cấp nút Back hoạt động tương đồng bất kể website nào.

Với lý do tương tự, UWP cung cấp một hệ thống điều hướng quay lại nhất quán giúp truy ngược lịch sử điều hướng của người dùng trong phạm vi một ứng dụng, phụ thuộc vào từng thiết bị, từ ứng dụng đến ứng dụng.

Giao diện cho nút quay lại của hệ thống của tối ưu hóa cho từng nhân tố và kiểu thiết bị đầu vào, nhưng trải nghiệm điều hướng là tổng thể, và nhất quán trên các thiết bị và các ứng dụng UWP.

Các thiết bị
Điện thoại di động

 

  • Luôn luôn hiển thị.
  • Một nút của phần mềm hoặc phần cứng nằm ở phía dưới cùng của thiết bị.
  • Điều hướng tổng thể trong phạm vi ứng dụng và giữa các ứng dụng.
Máy tính bảng

 

  • Luôn hiển thị ở chế độ Tablet.

Không có hiệu lực ở chế độ Desktop. Thay vào đó nút Back ở thanh tiêu đề có thể được bật lên.

Người dùng có thể chuyển đổi giữa các chế độ khi đang làm việc bằng cách vào Settings > System > Tablet mode và chọn thiết lập “Make Windows more touch-friendly when using your device as a tablet”.

  • Một nút của phần mềm trong thành điều hướng nằm ở dưới cùng của thiết bị.
  • Điều hướng tổng thể trong phạm vi ứng dụng và giữa các ứng dụng.
Máy tính để bàn, laptop, máy tính bảng

 

  • Tùy chọn ở chế độ Desktop.

Không có hiệu lưc ở chế độ Tablet.

Mặc định là vô hiệu hóa. Phải tự kích hoạt.

Người dùng có thể chuyển đổi giữa các chế độ khi đang làm việc bằng cách vào Settings > System > Tablet mode và chọn thiết lập “Make Windows more touch-friendly when using your device as a tablet”.

  • Một nút của phần mềm trong thành điều hướng nằm ở dưới cùng của thiết bị.
  • Điều hướng chỉ có tác dụng trong phạm vi ứng dụng, không hỗ trợ điều hướng ứng dụng đến ứng dụng (app-to-app).

 

Surface Hub  
  • Luôn luôn hiển thị.
  • Một nút của phần mềm nằm ở dưới cùng của thiết bị.
  • Điều hướng trong phạm vi ứng dụng và giữa các ứng dụng.

 

Dưới đây là một số loại đầu vào thay thế mà không dựa trên giao diện nút Back nhưng vẫn cung cấp chức năng tương tự.

Các thiết bị đầu vào
Bàn phím (keyboard)   Phím Windows + Backspace
Cortana   Nói “Hey Cortana, go back”

 

Khi ứng dụng của bạn chạy trên một chiếc điện thoại di động, máy tính bảng, hoặc một chiếc máy tính để bàn hoặc laptop có hệ thống Back đã được kích hoạt, hệ thống này sẽ thông báo ứng dụng của bạn khi nút Back được nhấn. Người dung mong muốn nút Back điều hướng đến vị trí trước đó trong lịch sử điều hướng của ứng dụng.

Hành vi điều hướng của nút Back hệ thống

Điều hướng Back luôn luôn hoạt động trong bản thân một ứng dụng, và thông qua các ứng dụng, nếu được kích hoạt.

Dưới đây là một vài trong số các hành vi điều hướng của nút Back hệ thống dựa trên các yếu tố và các loại đầu vào.

Hành vi Mô tả
Nút Back của hệ thống Được hỗ trợ trên các thiết bị

Một nút phần cứng, hoặc phần mềm được hiển thị ở thanh tác vụ hoặc thanh tiêu đề của một ứng dụng phụ thuộc vào thiết bị và chế độ được thiết lập.

Chế độ Desktop sang chế độ Tablet Chồng Back (back stack) của chế độ Tablet dựa trên thứ tự của các ứng dụng đang được mở trong màn hình tác vụ hiện hành của chế độ Desktop
Chế độ Tablet sang chế độ Desktop Không có chồng Back app-to-app trong chế độ Desktop, chồng Back của chế độ Tablet được bỏ qua. Khi chuyển từ chế độ Desktop sang Tablet sang Desktop, hệ thống cố gắng khôi phục lại tất cả các ứng dụng đang mở sang trạng thái trước đó, có tính để bất kí điều hướng nào được thực thi ở chế độ Tablet.
Cấu trúc điều hướng của ứng dụng Điều hướng Back không hoạt động dựa trên các thành phần điều hướng được định nghĩa của ứng dụng, chẳng hạn như các thẻ tab và pivot. Trong mô hình điều hướng master/detail, điều hướng Back từ màn hình chi tiết luôn luôn trở về trang Home.
Focus Điều hướng Back luôn hoạt động trong vùng giao diện tập trung, cho dù đó là giao diện app-based hay Shell-based, chẳng hạn như các popup và flyout.
Close Điều hướng Back không ngắt ứng dụng. Ứng dụng đó có thể bị gỡ bỏ từ chồng Back, nhưng nó vẫn có hiệu lực khi sử dụng thanh tác vụ, trình xem tác vụ và danh sách các ứng dụng đang hoạt động thông qua tổ hợp phím Alt+Tab.

Ngừng một ứng dụng gỡ ứng dụng đó khỏi chồng Back

Resume Tái sử dụng một ứng dụng (Start, thanh tác vụ, trình xem tác vụ, hay Alt+Tab) luôn mang ứng dụng lên đầu chồng Back.
Virtual desktop Chồng back luôn luôn có hiệu lực nội bộ ở desktop đang làm việc
Snap view Mỗi ứng dụng có chồng Back và Back hệ thống riêng hoạt động tập trung trên ứng dụng đó

Nếu một ứng dụng được đẩy ra khỏi màn hình bằng trình chia màn hình (split screen divider), ứng dụng sẽ bị gỡ bỏ khỏi chồng Back

Giao diện tức thời (Transient UI) Giao diện tức thời (bàn phím chạm, các hộp thoại) được bỏ qua.
Deep link Điều hướng Back quay về ứng dụng đang gọi (trừ khi thiết bị đang ờ chế độ Desktop).
Selection Điều hướng Back trở lại bất kì danh mục nào đã được chọn và quay về danh sách chưa được chỉnh sửa.

 

Tùy biến hành vi điều hướng Back

Nếu bạn lựa chọn tự đưa ra điều hướng chồng Back thì trải nghiệm nên đồng nhất với các ứng dụng khác. Dưới đây là các mẫu (pattern) đề xuất để bạn thiết kế:

Hành động điều hướng Thêm vào lịch sử điều hướng hay không?
Trang đến trang, những nhóm ngang hàng với nhau

 Trong minh họa sau, người dùng điều hướng từ cấp 1 của ứng dụng đến cấp 2, qua các nhóm ngang hàng, vì vậy điều hướng này được thêm vào lịch sử điều hướng.

Trong minh họa kế tiếp, người dùng điều hướng giữa các nhóm ngang hàng cùng cấp, tiếp tục qua các nhóm ngang hàng, vì thế điều hướng này được thêm vào lịch sử điều hướng.

Trang đến trang, cùng nhóm ngang hàng, không có thành phần điều hướng trên màn hình (on-screen)

Người dùng điều hướng từ trang này đến trang khác trong cùng một nhóm ngang hàng. Không có thành phần điều hướng được hiển thị trên màn hình (chẳng hạn như thẻ tab/pivot) cung cấp việc điều hướng đến cả 2 trang.

 Trong minh họa sau, người dùng điều hướng giữa 2 trang trong cùng một nhóm ngang hàng. Các trang này không dùng các thẻ tab hoặc một thanh điều hướng nổi, vì thế điều hướng này được thêm vào lịch sử điều hướng.

 

Trang đến trang, cùng nhóm ngang hàng, có một thành phần điều hướng trên màn hình

Người dùng điều hướng từ trang này đến trang khác trong cùng một nhóm ngang hàng. Cả 2 trang đều được hiển thị trong cùng một thành phần điều hướng. Ví dụ, cả 2 trang sử dụng cùng thẻ tab/pivot, hoặc cả 2 trang đều xuất hiện trong thanh điều hướng nổi.

Không

Khi người dùng nhấn Back thì quay trở lại trang mà trước khi người dùng được điều hướng đến trong nhóm cùng cấp hiện tại.

 

Hiển thị giao diện tạm thời (transient UI)

Ứng dụng này hiển thị một cửa sổ pop-up hoặc cửa sổ con, chẳng hạn như hộp thoại, màn hình nháy (splash screen) hay bàn phím ảo, hoặc ứng dụng này vào một chế độ đặc biệt, chẳng hạn như chế độ đa lựa chọn.

Không

Khi người dùng nhấn nút Back, bỏ qua giao diện tạm thời (ẩn bàn phím ảo, hủy hộp thoại…) và trở về trang trước khi hiển thị giao diện tạm thời.

Liệt kê các danh mục

 Ứng dụng này hiển thị nội dung cho một danh mục trên màn hình, chẳng hạn chi tiết của một danh mục được chọn trong danh sách master/detail.

Không

 Việc liệt kê các danh mục tương tự như điều hướng trong một nhóm ngang hàng. Khi người dùng nhấn Back, điều hướng đến trang đã thực thi trang hiện tại có liệt kê danh mục.

 

Xem và tải PDF của bài viết này tại đây: tải về.

Link bài viết gốc: click.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s