Thiết kế tương thích (responsive design) cho ứng dụng Windows hợp nhất (UWP)

Trong bài viết giới thiệu về ứng dụng Windows hợp nhất (UWP), bạn đã được giải thích cách làm thế nào bạn có thể cho phép ứng dụng UWP của bạn chạy trên nhiều thiết bị Windows với nhiều kích thước màn hình khác nhau. Vì Windows hoạt động phía sau để đảm bảo rằng giao diện ứng dụng của bạn rõ ràng và đầy đủ chức năng trên tất cả các thiết bị, bạn không bắt buộc phải tùy chỉnh ứng dụng của bạn cho bất kì thiết bị hay màn hình cụ thể nào cả. Tuy nhiên, có một số thời điểm khi bạn có thể có mong muốn canh đo ứng dụng của mình cho các thiết bị cụ thể nào đó. Ví dụ, khi ứng dụng của bạn chạy trên một chiếc máy tính để bàn hoặc laptop, bạn có thể cho hiển thị những nội dung bổ sung cho những phần màn hình mà một thiết bị nhỏ hơn không hiển thị chẳng hạn như trên điện thoại di động.

Có nhiều cách để cải tiến ứng dụng của bạn cho các kích thước màn hình cụ thể, một trong số đó thì nhanh và đơn giản, trong khi một số khác thì đòi hỏi phức tạp hơn.

Thiết kế với các ‘pixel hiệu quả’ (effective pixel)

Khi bạn thiết kế ứng dụng UWP, tức là bạn đang thiết kế với các ‘pixel hiệu quả’, chứ không phải là các pixel vật lý (physical pixel).

Những ‘pixel hiệu quả’ cho phép bạn tập trung vào khích thước cảm nhận thực tế của một thành phần giao diện mà không phải lo lắng về tỉ lệ phân giải hay khoảnh cách nhìn của các thiết bị khác nhau. Ví dụ, khi bạn thiết kế một thành phần có kích thước 1’’x1’’, thành phần này sẽ hiển thị xấp xỉ 1’’ trên tất cả các thiết bị. Trên một màn hình lớn với tỉ lệ phân giải cao, thành phần này có thể là 200px x 200px vật lý, trong khi trên một thiết bị nhỏ hơn, nó có thể là 150px x 150px vật lý.

Ví thế, việc này ảnh hưởng như thế nào đến cách bạn thiết kế ứng dụng của mình?

  • Bạn có thể bỏ qua tỉ lệ phân giải (pixel density) và độ phân giải màn hình thật khi thiết kế. Thay vào đó, thiết kế cho độ phân giải hiệu quả cho một dòng kích cỡ.
  • Khi hệ thống này co giãn giao diễn của bạn, nó thực hiện việc chia cho 4. Để đảm bảo việc hiển thị rõ ràng, gom các thiết kế của bạn vào lưới 4×4 pixel: kẻ các lề, các kích cỡ và các vị trí của các thành phần giao diện, và vị trí (nhưng không phải là kích cỡ – chữ có thể có bất kì kích cỡ nào) của văn bản một bộ số của các lưới 4 ‘pixel hiệu quả’.

Ví dụ dưới đây minh họa các thành phần thiết kế trùng lưới 4×4 pixel. Thành phần thiết kế này sẽ luôn có các cạnh rõ ràng và sắc nét.

Ví dụ tiếp theo minh họa các thành phần thiết kế không trùng với lưới 4×4 pixel. Những thành phần thiết kế này sẽ có các cạnh bị mờ trên một số thiết bị.

Mẹo: Khi tạo các bản mockup của màn hình trong các chương trình chình sửa ảnh, đặt giá trị DPI là 72 và đặt độ phân giải hình ảnh là độ phân giả hiệu quả (effective resolution) cho dòng kích cỡ mà bạn đang hướng đến.

Tại sao phải canh đo ứng dụng của bạn cho các dòng thiết bị và các kích thước màn hình cụ thể?

  • Để sử dụng không gian hiệu quả nhất và giảm thiểu sự cần thiết để điều hướng

Nếu bạn thiết kế một ứng dụng để hiển thị tốt trên một thiết bị có màn hình nhỏ, như điện thoại di động chẳng hạn, ứng dụng này sẽ có thể sử dụng được trên một chiếc máy tính cá nhân với màn hình lớn hơn, nhưng sẽ có nhiều phần không gian bị lãng phí. Bạn có thể tùy chỉnh ứng dụng này để hiển thị nhiều nội dung hơn khi màn hình lớn kích thước hiện tại. Ví dụ, một ứng dụng mua hàng có thể hiển thị một danh mục hàng hóa tại một thời điểm trên một chiếc điện thoại di động, nhưng hiển thị nhiều danh mục và sản phẩm đồng thời trên một chiếc máy tính để bàn hoặc laptop.

Việc đưa thêm nội dung lên màn hình, bạn sẽ giảm thiểu số lần điều hướng mà người dùng cần thực hiện.

  • Để tận dụng khả năng của các thiết bị

Các thiết bị hiện tại có những khả năng nhất định. Ví dụ, điện thoại di động có cảm biến địa điểm và một camera, trong khi một chiếc máy tính cá nhân có thể không có. Ứng dụng của bạn có thể nhận biết khá năng nào có hiệu lực và cho phép bật chức năng lên để sử dụng.

  • Để tối ưu hóa cho đầu vào

Các thư viện control hợp nhất với tất cả các loại đầu vào (bút cảm ứn, chuột, bàn phím…) nhưng bạn vẫn có thể tối ưu hóa cho các loại đầu vào hiện tại bằng cách sắp xếp lại các thành phần giao diện. Ví dụ, nếu bạn đặt các thành phần điều hướng ở cuối màn hình, chúng sẽ dễ dàng cho người dùng di động truy xuất – nhưng hầu hết các người dùng máy tính cá nhân mong muốn thấy các thành phần điều hướng ở trên đầu của màn hình.

Các kĩ thuật thiết kế tương thích (responsive design)

Khi bạn tối ưu hóa giao diện ứng dụng của bạn theo chiều rộng màn hình cụ thể, khi đó bạn đang tạo ra một thiết kế tương thích. Đây là 6 kĩ thuật thiết kế tương thích bạn có thể sử dụng để tùy chỉnh giao diện ứng dụng của bạn.

Tái định vị (reposition)

Bạn có thể thay thế địa điểm (location) và vị trí (position) của các thành phần giao diện của ứng dụng để tận dụng tối đa khả năng của từng thiết bị. Trong ví dụ sau, khi xem màn hình ở chế độ portrait trên điện thoại di động hay phablet cần thiết phải có giao diện cuộn (scroll) vì chỉ duy nhất một khung hình được xem toàn bộ tại một thời điểm. Khi ứng dụng chuyển sang một thiết bị cho phép hiển thị 2 khung hình đầy đủ dù là ở chế độ xem portrait hay landscape, khung hình B có thể xuất hiện ở vùng không gian kề bên. Nếu bạn đang dùng lưới để định vị, bạn có thể gắn vào lưới tương tự khi các thành phần giao diện được tái định vị.

Trong ví dụ sau với ứng dụng hình ảnh, ứng dụng tái định vị lại nội dung cúa nó trên các màn hình lớn hơn.

Tái kích thước (resize)

Bạn có thể tối ưu hóa kích thước khung hình bằng cách điều chỉnh lại lề và kích thước của các thành phần giao diện. Điều này cho phép bạn, như minh họa dưới đây, làm tăng trải nghiệm đọc trên một màn hình lớn hơn một cách đơn giản bằng việc tăng khung chứa nội dung lên.

Tái phân lung (reflow)

Bằng việc thay đổi luồng đi của các thành phần giao diện dựa trên thiết bị và hướng xem, ứng dụng của bạn có thể cung cấp màn hình nội dung tối ưu.

Minh họa dưới đây cho thấy cách một cột nội dung nằm dọc duy nhất trên thiết bị di động hoặc phablet có thể được tái phân luồng thành 2 cột nội dung trên màn hình lớn hơn.

n hin (reveal)

Bạn có thể làm xuất hiện giao diện dựa vào không gian màn hình, hoặc khi thiết bị đó hỗ trợ tính năng bỏ sung, các ngữ cảnh cụ thể, hoặc theo hướng xem.

Trong ví dụ dưới đây với các thẻ tab, tab giữa với biểu tượng camera có thể được xác định cho ứng dụng trên điện thoại di động hoặc phablet và không khả thi trên các thiết bị lớn hơn và là lý do tại sao nó được xuất hiện trong thiết bị ở bên phải. Một ví dụ phổ biển của việc hiển thị hoặc ẩn đi áp dụng cho các nút điều khiển trình chơi media nơi mà việc đặt các nút điều khiển được giảm bớt trên các thiết bị nhỏ và mở rộng trên các thiết bị lớn hơn.

Một phần của kĩ thuật hiển thị hoặc ẩn đi này bao gồm việc chọn khi nào để hiển thị nhiều metadata hơn. Khi không gian hạn chế, chẳng hạn như trên điệnn thoại di động hay phablet, tốt nhất là chỉ hiện thị một lượng metadata tối thiểu. Với một chiếc laptop hoặc máy tính để bàn, một số lượng metadata quan trọng có thể được hiển thị lên. Một vài ví dụ sau cho thấy cách hiển thị hoặc ẩn đi metadata bao gồm:

  • Trong ứng dụng email, bạn có thể hiển thị avatar của người dùng.
  • Trong ứng dụng về nhạc, bạn có thể hiển thị thêm thông tin về một album của một nghệ sĩ.
  • Trong ứng dụng về video, bạn có thể hiển thị thêm thông tin về một bộ phim hoặc một buổi trình diễn, chẳng hạn như thông tin vè diễn viên, hoặc nhóm biểu diễn.
  • Trong bất kì ứng dụng nào, bạn có thể chia thành các cột và hiển thị thêm thông tin chi tiết hơn.
  • Trong bất kì ứng dụng nào, bạn có thể đặt chồng theo chiều dọc, hoặc đặt nằm theo chiều ngang.

 

Thay thế (replace)

Kĩ thuật này để cho bạn chuyển đổi qua lại giao diện cho một dòng kích thước thiết bị cụ thể hoặc hướng xem thiết bị. Trong ví dụ dưới đây, thanh điều hướng và giao diện của nó hoạt động tốt trên một thiết bị có kích thước nhỏ, nhưng trên một thiết bị có kích thước lớn hơn, các thẻ tab lại hoạt động tốt hơn.

Tái cu trúc (re-architect)

Bạn có thể đóng hoặc chia nhánh cấu trúc ứng dụng của bạn để hướng đế các thiết bị cụ thể được tốt hơn. Trong ví dụ sau, việc đi từ phía bên trái sang bên phải của thiết bị thể hiện sự kết hợp của các trang.

Còn đây là một ví dụ của kĩ thuật này được áp dụng để thiết kế cho một ứng dụng nhà thông minh.

Thiết kế breakpoint cho các dòng kích thước cụ thể

Bảng sau mô tả các dòng kích thước khác nhau và cung cấp các đề xuất chung cho việc canh đo đối với các dòng kích thước này.

Dòng kích thước Nhỏ Vừa Lớn
Chiều rộng theo ‘pixel hiệu quả’ 320 720 1024
Kích thước toàn màn hình 4’’ đến 6’’ 6+’’ đến 12’’ 13’’ và rộng hơn
Các thiết bị Điện thoại di động Máy tính bảng, điện thoại di động với màn hình lớn Máy tính để bàn, laptop, Surface Hub
Đề xuất chung + Bạn có thể tạo điều hướng và các tương tác dễ dàng hơn trên các thiết bị cầm tay bằng cách đặt điều hướng và các thành phần ra lệnh ở cuối màn hình để người dùng có thể dễ dàng tiếp cận với ngón tay.

+ Đặt các thẻ tab ở giữa.

+ Đặt lề trái và phải 12px để tạo sự tách biện giữa biên trái và biên phải của ứng dụng.

+ Sử dụng 1 cột/1 vùng tại 1 thời điểm.

+ Sử dụng 1 icon đại diện cho chức năng tìm kiếm (không hiển thị ô tìm kiếm)

+ Đặt thanh điều hướng ở trạng thái bị che phủ (overlay) để tiết kiệm không gian màn hình.

+ Nếu bạn đang sử dụng thành phần master-detail, hãy sử dụng chế độ chồng (stacked) để tiết kiệm không gian.

 

+ Đặt các thẻ tab canh trái màn hình (left-align).

+ Đặt lề trái và lề phải 24px.

+ Có thể dùng đến 2 cột/2 vùng hiển thị cùng lúc.

+ Hiển thị ô tìm kiếm.

+ Đặt thanh điều hướng ở chế độ nổi (dock) để luôn luôn được hiển thị.

+ Đặt các thành phần điều hướng và ra lệnh ở trên đầu của ứng dụng.

+ Đặt các thẻ tab canh trái màn hình (lef-align).

+ Đặt lề trái và lề phải 24px.

+ Có thể sử dụng lên đến 3 cột/3 vùng hiển thị cùng lúc.

+ Hiện thị ô tìm kiếm.

+ Đặt thanh điều hướng ở chế độ nổi (dock) để luôn luôn được hiển thị.

Bạn có thể tải về bản pdf tại đây: tải về.

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

One thought on “Thiết kế tương thích (responsive design) cho ứng dụng Windows hợp nhất (UWP)

  1. Pingback: Giới thiệu về ứng dụng Windows hợp nhất (UWP) dành cho nhà thiết kế | 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