Giới thiệu về ứng dụng Windows hợp nhất (UWP) dành cho nhà thiết kế

Khi bạn tạo ra ứng dụng Universal Windows Platform (UWP, ứng dụng Windows hợp nhất), cũng có nghĩa là bạn đang tạo ra một ứng dụng có khả năng chạy trên bất kì thiết bị Windows nào, đó có thể là:

  • Dòng thiết bị di động: điện thoại di động, máy tính lai (phablet).
  • Dòng thiết bị máy tính cá nhân: máy tính bảng, laptop, máy tính để bàn.
  • Dòng thiết bị gia đình: Surface hub.
  • Dòng thiết bị IoT: các thiết bị nhỏ gọn như thiết bị đeo hoặc vật dụng trong nhà.

Bạn có thể giới hạn ứng ụng của bạn chỉ dành cho một dòng thiết bị duy nhất (dòng thiết bị di động chẳng hạn), hoặc bạn có thể cho phép ứng dụng của bạn có thể hoạt động trên tất cả thiết bị.

Chỉ việc thiết kế ứng dụng làm sao cho trông ‘ổn ổn’ trên tất cả thiết bị di động cũng đã là một thách thức lớn. Vì thế làm thế nào để thiết kế một ứng dụng cung cấp trải nghiệm người dùng trên một số thiết bị có nhiều kích thước khác nhau và các cách nhận dữ liệu khác nhau?

Việc thiết kế cho nhiều dòng thiết bị thực sự đòi hỏi việc cân nhắc, lên kế hoạch và thiết kế bổ sung, nhưng nền tảng Windows hợp nhất (UWP) cung cấp một tập các tính năng được xây dựng sẵn và các khối hợp nhất giúp cho việc tạo trải nghiệm người dùng cho nhiều thiết bị trở nên dễ dàng hơn.

Những tính năng được xây dựng sẵn cho nhà thiết kế

Hãy cùng nhau lướt qua một trong số những tính năng này. Bạn không phải làm bất kì điều gì từ những tính năng này, chúng hoàn toàn tự động.

  • Pixel hiệu quả và nền tảng tùy biến

Khi ứng dụng của bạn chạy trên các thiết bị Windows, hệ thống sử dụng thuật toán để trung hòa cách các control, phông chữ và các thành phần giao diện hiển thị trên màn hình. Thuật toán tùy biến này dựa vào khoảng cách nhìn và tỉ lệ màn hình (pixel/inch) để tối ưu hóa kích cỡ cảm nhận (perceived size) hơn là kích cỡ vật lý (physical size). Thuật toán tùy biến này đảm bảo rằng một phông chữ kích thước 24px trên Surface Hub cách xa 10ft cũng hiển thị rõ ràng như phông chữ kích thước 24px trên một chiếc điện thoại 5’’ chỉ cách xa người dùng vài inch.

Chính vì cách mà hệ thống tùy biến này xử lý, khi bạn thiết kế ứng dụng UWP, nghĩa là bạn đang thiết kế với các ‘pixel hiệu quả’ (effective pixel), chứ không phải là các pixel vật lý (physical pixel). Để tìm hiểu thêm về cách thiết kế sử dụng pixel hiệu quả, bạn có thể xem qua bài “Thiết kế tương thích (responsive design) cho ứng dụng Windows hợp nhất”.

  • Đầu vào hợp nhất và các tương tác thông minh

Mặc dù bạn có thể thiết kế cho các thiết bị đầu vào cụ thể (bút cảm ứng chẳng hạn), nhưng bạn không phải làm như vậy vì các ứng dụng UWP sử dụng một hệ thống đầu vào sử dụng các tương tác thông minh (smart interaction). Điều này có nghĩa rằng bạn có thể thiết kế xoay quanh một tương tác ‘click’ mà không cần phải quan tâm ‘click’ này đến từ một click chuột, hay là một cái chạm ngón tay.

Khối xây dựng hợp nhất

UWP cũng cung cấp một số khối xây dựng hợp nhất giúp cho việc thiết kế ứng dụng cho nhiều dùng thiết bị trở nên dễ dàng hơn.

  • Nút điều khiển hợp nhất (universal control)

UWP cung cấp một tập các nút điều khiển hợp nhất được đảm bảo hoạt động tốt trên tất cả thiết bị Windows. Tập hợp này bao gồm tất cả từ những form control phổ biến như radio button và text box cho đến những control phức tạp hơn như grid view và list view có thể tạo ra các danh sách từ một nguồn dữ liệu hay mẫu sẵn có. Những control này tự nhận biết thiết bị đầu vào và triển khai với tập hợp các tương tác đầu vào, các event state và tất cả tính năng thích hợp cho từng dòng thiết bị.

Danh sách đầy đủ của các control và các mẫu (pattern) mà bạn có thể tạo ra từ chúng, bạn hãy xem bài viết “Control and patterns”.

  • Phong cách hợp nhất (universal style)

Ứng dụng UWP của bạn sẽ tự động lấy một tập kiểu thiết kế (style) mặc định cung cấp cho bạn những tính năng sau:

  • Một tập các kiểu thiết kế mang lại cho ứng dụng của bạn theme sang hoặc tối (tùy theo lựa chọn của bạn) và có thể kết hợp với tham chiếu màu nhấn mạnh của người dùng (accent color).

  • Một kiểu chữ dựa trên kiểu Segoe đảm bảo phần chữ trong ứng dụng của bạn trông đồng bộ trên tất cả thiết bị.
  • Các chuyển động mặc định cho các tương tác.
  • Tự động hỗ trợ cho các chế độ tương phản cao.
  • Tự động hỗ trợ cho các ngôn ngữ khác. Các kiểu thiết kế định sãn sẽ chọn đúng phông chữ cho từng ngôn ngữ mà Windows hỗ trợ. Thậm chí bạn có thể sử dụng đa ngôn ngữ trong cùng một ứng dụng và chúng sẽ được hiển thị một cách tốt nhất.
  • Hỗ trợ sẵn cho việc đọc RTL.

Bạn có thể tùy chỉnh những phong cách này để mang lại cho ứng dụng của bạn trải nghiệm duy nhất. Ví dụ bên dưới với ứng dụng thời tiết được thiết kế với phong cách độc đáo.

  • Mẫu có sẵn hợp nhất (universal template)

Microsoft cung cấp các mẫu thiết kế dành cho Adobe Illustrator và Microsoft PowerPoint gồm tất cả những gì bạn cần để bắt đầu thiết kế các ứng dụng UWP. Những mẫu thiết kế này bao gồm các control và giao diện cho từng dòng thiết bị.

Những câu hỏi thường gặp

  • Tôi có thể tạo ra một giao diện duy nhất và dùng nó cho tất cả các thiết bị không?

Được, bạn có thể tạo ra một giao diện duy nhất và dùng cho tất cả các thiết bị – bạn không phải tạo ra một giao diện khác cho từng dòng thiết bị. Các hướng dẫn thiết kế có thể giúp bạn tạo ra một giao diện duy nhất có thể hoạt động tốt trên tất cả các thiết bị.

  • Ứng dụng UWP của tôi có phải chạy trên tất cả các thiết bị không?

Không, ứn dụng của bạn không bắt buộc phải chạy trên tất cả các thiết bị. Bạn không thể chỉ tập trung vào một thiết bị duy nhất – chẳng hạn như điện thoại đi động – nhưng bạn có thể hạn chế ứng dụng của bạn đối với một dòng thiết bị, chẳng hạn như dòng thiết bị di động bao gồm điện thoại di động, phablet và một vài máy tính bảng. Khi bạn xuất bản ứng dụng, bạn có thể cho phép ứng dụng hoạt động trên tất cả các thiết bị, một vài dòng thiết bị, hoặc chỉ một dòng thiết bị duy nhất.

 

P/s: Bạn có thể download về bản pdf của bài này tại đây.

One thought on “Giới thiệu về ứng dụng Windows hợp nhất (UWP) dành cho nhà thiết kế

  1. Pingback: Thiết kế tương thích (responsive design) cho ứng dụng Windows hợp nhất (UWP) | Huy Tran's space

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