Cơ bản về giao diện ứng dụng UWP

Một giao diện người dùng hiện đại là một điều phức tạp, được tạo thành từ văn bản, màu sắc và các chuyển động, cuối cùng được kết hợp lại xuất ra từng pixel trên màn hình của thiết bị mà bạn đang sử dụng. Khi bạn bắt đầu thiết kế một giao diện người dùng, số lựa chọn thiết kế có thể gây cho bạn đau đầu trong việc lựa chọn.

Để giúp đơn giản hơn, hãy cùng tìm hiểu cơ chế của một ứng dụng từ góc độ thiết kế. Hãy xem một ứng dụng được tạo ra từ các màn hình và các trang nội dung. Mỗi trang có một giao diện người dùng, được cấu thành từ 3 loại thành phần giao diện: điều hướng, ra lệnh và các thành phẩn nội dung.

Cơ chế của một ứng dụng

  Thành phần điều hướng

 Các thành phần điều hướng giúp người dùng chọn nội dung họ muốn hiển thị. Ví dụ cho các thành phần điều hướng như các thẻ tab và pivot, liên kết ngoại (hyperlink) và thanh điều hướng (nav pane).

Các thành phần điều hướng sẽ được trình bày chi tiết trong bài sau.

Thành phần ra lệnh

Các thành phần ra lệnh khởi đầu cho các hành động, chẳng hạn tạo, lưu và chia sẽ nội dung. Ví dụ cho các thành phần ra lệnh như nút (button) và thanh lệnh (command bar). Các thành phần ra lệnh cũng bao gồm các phím tắt (keyboard shortcut) dù chúng không thực sự hiển thị trên màn hình.

Các thành phần ra lệnh sẽ được trình bày chi tiết trong bài sau.

Thành phần nội dung

Các thành phần nội dung hiển thị nội dung của ứng dụng. Đối với ứng dụng vẽ, nội dung có thể là một bức họa; đối với một ứng dụng tin tức, nội dung có thể là một bản tin.

Các thần phần nội dung sẽ được trình bày chi tiết trong bài sau.

 

Tối thiểu, một ứng dụng phải có một màn hình khởi động (splash screen) và một trang chủ định nghĩa giao diện người dùng. Một ứng dụng đầy đủ sẽ có nhiều trang và màn hình, điều hướng, nút lệnh và các thành phần nội dung có thể thay đổi từ trang này sang trang khác.

Ví dụ sau minh họa một ứng dụng lý thuyết với các loại trang, mỗi trang có một loại điều hướng, nút lệnh và các thành phần nội dung khác nhau.

Hãy cùng xem qua một số mẫu giao diện phổ biến cho việc kết hợp điều hướng, nút lệnh và các thành phần nội dung.

Các mẫu giao diện phổ biến

Khi bạn kết hợp một hoặc nhiều thành phần với nhau, khi đó bạn đang tạo ra một mẫu giao diện (pattern). 5 mẫu giao diện được dùng phổ biến sau đây mà hầu hết các ứng dụng sẽ dùng 1 trong số này.

Thành phần giao diện Mô tả
Active canvas

Loại thành phần: Nút lệnh + nội dung

Active canvas được dùng cho các ứng dụng có duy nhất 1 màn hình (single-view) hoặc trải nghiệm dạng modal, ví dụ như trình duyệt, trình xem tài liệu, xem/sửa ảnh, hoặc các ứng dụng khác sử dụng màn hình chính không cuộn (free-scroll). Nó có thể gồm các thanh chức năng phía trên cùng (top level) hoặc dưới cùng (bottom

Thiết kế sau dành cho ứng dụng chỉnh sửa ảnh sử dụng một active canvas.

 

Master/detail

 

Loại thành phần: Điều hướng + nội dung

Mẫu master/detail này hiển thị một danh sách chính và các chi tiết cho một mục được chọn hiện hành. Mẫu này thường được sử dụng cho email và danh sách lên hệ/sổ địa chỉ.

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

 

Nav pane

 

Loại thành phần: Điều hướng + nội dung

Thanh điều hướng bao gồm 3 thành phần chính: nút (button), thanh tác vụ (pane) và vùng nội dung. Nút (button) là một thành phần giao diện cho phép người dùng mở và đóng thanh tác vụ (pane). Thanh tác vụ (pane) là một nơi chứa cho các thành phần điều hướng. Vùng nội dung hiển thị thông tin từ mục điều hướng được chọn. Thanh điều hướng cũng có thể tồn tại ở trạng thái nổi (dock state) để thanh này luôn luôn được hiển thị.

Thiết kế sau cho ứng dụng nhà thông minh sử dụng mẫu nav pane.

 

Tab và pivot

 

Loại thành phần: Điều hướng + nội dung

Hiển thị một danh sách các liên kết cố định đến các trang cung cấp phương thức nhanh để di chuyển giữa các pivot khác nhau (view hoặc filter) một cách đầy đủ với cùng một tập dữ liệu.

Thiết kế sau cho ứng dụng nhà thông minh sử dụng mẫu tab/pivot.

 

 

P/s: bài viết gốc.

Bạn có thể tải về bạn pdf của bài viết này tại đây.

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