Giới thiệu về thiết kế ứng dụng UWP (Universal Windows Platform)

  • 93 lượt xem
  • Bài cuối 24 Tháng Mười Hai 2018
club vietsang. đăng này 19 Tháng Mười Hai 2018

Hướng dẫn thiết kế nền tảng Windows phổ biến (UWP) là tài nguyên giúp bạn thiết kế và xây dựng các ứng dụng đẹp, bắt mắt hơn. Đây không phải là một danh sách các quy tắc quy tắc – đó là một tài liệu sống, được thiết kế để thích nghi với  Fluent Design System (hệ thống thiết kế thông thạo) cũng như nhu cầu của cộng đồng xây dựng ứng dụng.Phần giới thiệu này cung cấp tổng quan về các tính năng thiết kế chung được chứa trong mọi ứng dụng UWP, giúp bạn xây dựng giao diện người dùng (UI) có quy mô đẹp trên một loạt các thiết bị.

Pixel và tỷ lệ hiệu quả

Các ứng dụng UWP chạy trên tất cả các thiết bị Windows 10 , từ TV đến máy tính bảng hoặc PC của bạn. Vậy làm cách nào để thiết kế giao diện người dùng có giao diện đẹp trên nhiều loại thiết bị và kích thước màn hình khác nhau?

UWP giúp bằng cách tự động điều chỉnh các phần tử giao diện người dùng để chúng dễ đọc và dễ tương tác trên tất cả các thiết bị và kích thước màn hình.

Khi ứng dụng của bạn chạy trên thiết bị, hệ thống sẽ sử dụng thuật toán để bình thường hóa cách hiển thị các yếu tố giao diện người dùng trên màn hình. Thuật toán mở rộng này tính đến khoảng cách xem và mật độ màn hình (pixel trên inch) để tối ưu hóa cho kích thước nhận biết (thay vì kích thước vật lý. Thuật toán mở rộng đảm bảo rằng phông chữ 24 px trên Surface Hub 10 feet cũng dễ đọc đối với người dùng dưới dạng phông chữ 24 px trên điện thoại 5 inch cách đó vài inch.

xem khoảng cách cho các thiết bị khác nhau

Do cách hệ thống chia tỷ lệ hoạt động, khi bạn thiết kế ứng dụng UWP, bạn đang thiết kế các pixel hiệu dụng, không phải là các pixel vật lý thực tế. Pixel hiệu dụng (epx) là đơn vị đo lường ảo và được sử dụng để biểu thị kích thước bố cục và khoảng cách, không phụ thuộc vào mật độ màn hình. (Trong hướng dẫn này, epx, ep và px được sử dụng thay thế cho nhau.)

Bạn có thể bỏ qua mật độ pixel và độ phân giải màn hình thực tế khi thiết kế. Thay vào đó, thiết kế cho độ phân giải hiệu quả (độ phân giải trong các pixel hiệu dụng) cho một lớp kích thước (để biết chi tiết, hãy xem bài viết kích thước màn hình và điểm ngắt .

Lưu ý

Khi tạo mockups màn hình trong các chương trình chỉnh sửa hình ảnh, hãy đặt DPI thành 72 và đặt kích thước hình ảnh thành độ phân giải hiệu quả cho lớp kích thước bạn đang hướng đến. Để biết danh sách các lớp kích thước và độ phân giải hiệu quả, hãy xem bài viết Kích thước màn hình và điểm ngắt .

Bội số của bốn

Kích thước, lề và vị trí của các phần tử giao diện người dùng phải luôn ở bội số của 4 epx trong các ứng dụng UWP của bạn.

Tỷ lệ UWP trên một loạt các thiết bị có chia tỷ lệ là 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% và 400%. Đơn vị cơ số là 4 vì nó là số nguyên duy nhất có thể được thu nhỏ bằng các số không phải là toàn bộ (ví dụ 4 * 1.5 = 6). Sử dụng bội số của bốn căn chỉnh tất cả các yếu tố giao diện người dùng với toàn bộ pixel và đảm bảo các yếu tố giao diện người dùng có cạnh sắc nét. (Lưu ý rằng văn bản không có yêu cầu này; văn bản có thể có bất kỳ kích thước và vị trí nào.)

lưới

Layout

Vì các ứng dụng UWP tự động mở rộng cho tất cả các thiết bị, nên hãy thiết kế ứng dụng UWP cho bất kỳ thiết bị nào theo cùng một cấu trúc. Hãy bắt đầu ngay từ đầu giao diện người dùng của ứng dụng UWP của bạn.

Windows, Frame (Khung) và Trang

Khi một ứng dụng UWP được khởi chạy trên bất kỳ thiết bị Windows 10 nào, nó sẽ khởi chạy trong một Cửa sổ có Khung, có thể điều hướng giữa các phiên bản Trang .

Khung

Bạn có thể nghĩ giao diện người dùng của ứng dụng dưới dạng tập hợp các trang. Bạn có thể quyết định điều gì sẽ xảy ra trên mỗi trang và mối quan hệ giữa các trang.

Để tìm hiểu cách bạn có thể sắp xếp các trang của mình, hãy xem Thông tin cơ bản về điều hướng .

Khung

Page layout (Bố cục trang)

Những trang đó nên trông như thế nào? Vâng, hầu hết các trang đều theo một cấu trúc chung để cung cấp tính nhất quán, vì vậy người dùng có thể dễ dàng điều hướng giữa và trong các trang của ứng dụng của bạn. Trang thường chứa ba loại phần tử giao diện người dùng:

  • Các yếu tố điều hướng giúp người dùng chọn nội dung họ muốn hiển thị.
  • Các thành phần lệnh khởi tạo các hành động, chẳng hạn như thao tác, lưu hoặc chia sẻ nội dung.
  • Các yếu tố nội dung hiển thị nội dung của ứng dụng.

Mẫu bố cục chung

Để tìm hiểu thêm về cách triển khai các mẫu ứng dụng UWP phổ biến, hãy xem bài viết về Bố cục trang.

Bạn cũng có thể sử dụng Windows Template Studio trong Visual Studio để bắt đầu với bố cục cho ứng dụng của mình.

Các control (điều khiển)

Nền tảng thiết kế của UWP cung cấp một bộ điều khiển chung được đảm bảo hoạt động tốt trên tất cả các thiết bị chạy Windows và tuân thủ các nguyên tắc Hệ thống thiết kế thông thạo . Các điều khiển này bao gồm tất cả mọi thứ từ các điều khiển đơn giản, như nút và phần tử văn bản, đến các điều khiển phức tạp có thể tạo danh sách từ một tập hợp dữ liệu và một mẫu.

Điều khiển UWP

Để có danh sách đầy đủ các điều khiển UWP và các mẫu bạn có thể tạo ra từ chúng, hãy xem phần điều khiển và mẫu .

Kiểu

Các điều khiển thông thường tự động phản ánh chủ đề hệ thống và màu sắc nổi bật, làm việc với tất cả các loại đầu vào và chia tỷ lệ cho tất cả các thiết bị. Theo cách đó, chúng phản ánh hệ thống thiết kế thông thạo – chúng thích nghi, cảm thông và đẹp. Các điều khiển thông thường sử dụng ánh sáng, chuyển động và chiều sâu theo kiểu mặc định của chúng, do đó, bằng cách sử dụng chúng, bạn đang kết hợp Hệ thống thiết kế thông thạo trong ứng dụng của bạn.

Các điều khiển chung cũng có khả năng tùy biến cao – bạn có thể thay đổi màu nền trước của điều khiển hoặc hoàn toàn tùy chỉnh giao diện của nó. Để ghi đè các kiểu mặc định trong các điều khiển, hãy sử dụng kiểu dáng nhẹ hoặc tạo các điều khiển tùy chỉnh trong XAML.

Accent color gif

admin đăng này 24 Tháng Mười Hai 2018

cảm ơn bạn

TEDU

Close