Chọn giao diện phù hợp cho ứng dụng Metro Style

clip_image002

 

Chọn giao diện phù hợp

cho ứng dụng Metro Style

 

Khi thiết kế giao diện cho 1 ứng dụng Metro Style, chúng ta phải biết lựa chọn cách thể hiện các hành động, các xử lý sao cho thật phù hợp. Và đặc biệt là nên phù hợp với các tiêu chuẩn mà Microsoft đã đặt ra cho giao diện ứng dụng Metro Style. Mọi thành phần giao diện đều được xác định là có ý nghĩa riêng nhằm cho một số mục đích cụ thể nào đó. Mình sẽ giới thiệu qua các cách lựa chọn đó qua bài viết này.

Bài viết có tham khảo và sử dụng nguồn hình ảnh từ bài giảng sau:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465304

1.

Để chứa nội dung ứng dụng, các controls ta sử dụng App window (hay còn gọi là Canvas)

clip_image003

2.

Để chứa các nút chức năng chính của ứng dụng, ta sử dụng App bar, cũng tương tự Application bar trên Windows Phone

clip_image004

3.

Để chứa các nút mang tính chất thiết lập, giao tiếp, ta đặt vào Charm. Có thể App bar bên trên là mang tính đặc trưng cho 1 ứng dụng cụ thể, còn Charms sẽ mang đặc trưng chung cho tất cả ứng dụng.

clip_image005

4.

Context menu, còn được biết với tên Popup menu, có lẽ khá quen thuộc ai đã từng lập trình Windows Form, để thể hiện chức năng, các hành động mà người dùng có thể thực hiện khi chọn 1 thành phần nhỏ trong ứng dụng. ví dụ thường gặp là 1 đoạn văn bản. Tuy nhiên, ứng dụng Metro Style đưa ra giới hạn là chỉ cho phép có 5 hành động trên 1 context menu, nhằm giữ cho giao diện ứng dụng luôn gọn gàng, dễ nhìn.

clip_image006

5.

Nếu ta muốn ứng dụng tại 1 lúc nào đó sẽ yêu cầu người dùng lựa chọn hành động để tiếp tục ứng dụng, hoặc gặp phải 1 lỗi lớn làm ảnh hưởng đến tổng thể ứng dụng thì ta dùng Message Dialog

clip_image007

1 ví dụ sai điển hình là dùng Message Box để hiện thông báo báo sai mật khẩu người dùng. Mà chỉ có nút OK:

clip_image008

Nhưng lỗi “không truy cập được Internet trong 1 ứng dụng download nhạc” thì có thể dùng Message Box, vì đó làm cả ứng dụng không thể hoạt động.

 

6.

Để hiển thị lên thông tin chi tiết, chờ sự xác nhận của người dùng, hay những hành động mà người dùng không nhất thiết phải lựa chọn, chúng ta sử dụng Flyout. Flyout khác với Message Dialog ở trên là Flyout không làm gián đoạn ứng dụng và không bắt buộc người dùng phải chọn. Để lơ đi, người dùng chỉ việc tap ở bên ngoài Flyout.

clip_image009

7.

Khi chúng ta có nhu cầu muốn thông báo thông tin nào đó cho người dùng khi ứng dụng ở chế độ chạy background, chúng ta sử dụng Toast. Đây là 1 cơ chế thường được sử dụng khi lập trình thiết bị di động như windows phone, android,…

8.

Trường hợp chúng ta muốn thông báo lỗi thì chúng ta làm thế nào?

 

Loại lỗi

Cách thông báo

Lỗi quan trọng, làm ảnh hưởng cả ứng dụng, khiến người dùng không sử dụng ứng dụng được.

Message Dialog (đã nhắc ở mục 6)

Lỗi nhỏ chỉ ảnh hưởng 1 yếu tố trong ứng dụng

In ra trực tiếp dòng Text thông báo gần nơi xảy ra lỗi, thường ngay trên canvas. Gọi là Inline text

Lỗi nhỏ nhưng ảnh hưởng cả ứng dụng, và người dùng có thể tự giải quyết, ứng dụng vẫn còn có thể sử dụng tiếp được

In ra trực tiếp dòng Text thông báo như trên nhưng in ra trên góc trên cửa sổ ứng dụng

Lỗi nhỏ nhưng ảnh hưởng cả ứng dụng, ứng dụng có thể đề xuất cách giải quyết cho người dùng được.

Sử dụng Error or warning bar

 

Hình ảnh về Inline text

clip_image010

 

Minh họa Error or warning bar

clip_image011

clip_image012

clip_image013

 

 

Tóm lại, việc cho ra đời những ứng dụng có tính nhất quán với các ứng dụng khác có lợi thế là được người dùng dễ làm quen và sử dụng, nhưng bù lại việc thiết kế giao diện phải tuân thủ 1 số quy tắc nhất định.

Khi mới tiếp cận, chúng ta sẽ cảm thấy khó chịu và rườm rà, không khai thác óc sáng tạo, nhưng sau 1 thời gian, chúng ta sẽ cảm thấy các quy tắc trên thật sự khoa học và cần thiết cho một tập các ứng dụng cần sự đồng bộ và nhất quán.

Ngoài các cách lựa chọn thiết kế trên, ta có thể xem thêm và chi tiết hơn tại trang MSDN:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465304

One response to “Chọn giao diện phù hợp cho ứng dụng Metro Style

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s