Hướng dẫn thiết kế ứng dụng

Thành phần kiểm soát hiện đại

Các điều khiển hiện đại trong ứng dụng canvas thể hiện sự tiến bộ đáng kể trong việc phát triển và thiết kế giao diện người dùng trong hệ sinh thái Microsoft. Dựa trên Hệ thống thiết kế Fluent của Microsoft, các điều khiển này được thiết kế để mang lại trải nghiệm người dùng nhanh chóng, hướng đến hiệu suất và dễ tiếp cận, đồng thời đảm bảo tích hợp liền mạch với các chức năng tạo chủ đề. Việc giới thiệu các tính năng điều khiển này, bao gồm danh sách tab, thanh tiến trình, nút thông tin, nút xoay và nhiều tính năng khác, nhấn mạnh sự thay đổi mang tính chiến lược theo hướng tạo ra các ứng dụng trực quan hơn, phản hồi nhanh hơn và hấp dẫn hơn về mặt hình ảnh. Bằng cách sử dụng các điều khiển hiện đại này, các nhà phát triển có thể dễ dàng triển khai các thành phần UI tinh vi vừa đẹp mắt vừa giàu chức năng, nâng cao sự tương tác và sự hài lòng của người dùng.

Thiết kế vốn có của các nút điều khiển này, chú trọng đến chủ đề, cho phép có giao diện thống nhất và nhất quán trên các ứng dụng, giúp giảm đáng kể công sức cần thiết trong việc tùy chỉnh và xây dựng thương hiệu cho ứng dụng. Khả năng tự động cập nhật kiểu dáng của tất cả các điều khiển dựa trên chủ đề đã thiết lập giúp đơn giản hóa quá trình thiết kế và đảm bảo các ứng dụng luôn nhất quán về mặt hình ảnh. Điều này hoàn toàn phù hợp với nhu cầu của các doanh nghiệp hiện đại muốn duy trì tính nhất quán của thương hiệu trong khi vẫn mang đến trải nghiệm kỹ thuật số chất lượng cao. Các biện pháp kiểm soát hiện đại cũng nhấn mạnh vào khả năng truy cập và hiệu suất, đảm bảo rằng các ứng dụng có thể được nhiều đối tượng sử dụng, bao gồm cả người khuyết tật, phù hợp với các nguyên tắc thiết kế toàn diện. Do đó, các điều khiển hiện đại trong ứng dụng canvas không chỉ là một tập hợp các thành phần UI mà còn là một bộ công cụ chuyển đổi giúp các nhà phát triển xây dựng các ứng dụng hiệu quả hơn, dễ bảo trì hơn, dễ truy cập hơn và gắn kết hơn, đáp ứng nhu cầu ngày càng thay đổi của cả doanh nghiệp và người dùng.

Quan trọng

Trong khi một số tính năng điều khiển hiện đại trong ứng dụng canvas đã được cung cấp rộng rãi (GA), thì bộ tính năng rộng hơn vẫn đang trong giai đoạn xem trước. Bạn được khuyến khích khám phá và cung cấp phản hồi về các điều khiển xem trước này. Tuy nhiên, điều quan trọng cần lưu ý là các tính năng và chức năng của chúng có thể được cải tiến dựa trên phản hồi và thử nghiệm trước khi được cung cấp rộng rãi.

Thiết kế biểu mẫu và hướng dẫn

Tổ chức biểu mẫu của bạn

• Chia biểu mẫu của bạn thành các phần hợp lý và nhóm các trường liên quan lại với nhau.
• Cố gắng giữ biểu mẫu của bạn trên một màn hình duy nhất. Nếu quá dài, hãy cân nhắc chia thành nhiều màn hình, bước hoặc tab.
• Sử dụng ngôn ngữ rõ ràng và đơn giản cho nhãn trường, tránh các thuật ngữ hoặc tiếng lóng không quen thuộc.
• Triển khai các quy tắc xác thực để đảm bảo tính chính xác của dữ liệu. Đối với các trường bắt buộc, hãy ghi rõ là bắt buộc. Xác thực địa chỉ email, số điện thoại và các định dạng khác nếu cần.

Tái sử dụng biểu mẫu

• Sử dụng một biểu mẫu duy nhất để tạo bản ghi mới, chỉnh sửa bản ghi hiện có và hiển thị bản ghi ở chế độ chỉ xem.
• Việc sử dụng lại cùng một biểu mẫu sẽ giúp giảm thời gian phát triển và bảo trì, đồng thời đảm bảo tính nhất quán.

Chế độ biểu mẫu

Thiết lập chế độ biểu mẫu một cách linh hoạt dựa trên hành động của người dùng. Ví dụ:

• Khi tạo một bản ghi mới, hãy đặt biểu mẫu ở chế độ "Mới".
• Khi chỉnh sửa một bản ghi hiện có, hãy đặt biểu mẫu ở chế độ "Chỉnh sửa".
• Khi hiển thị bản ghi, hãy đặt biểu mẫu ở chế độ "Xem".

Kiểm soát vị trí

• Đặt các nút điều khiển khác nhau (như thư viện, biểu mẫu hiển thị và biểu mẫu chỉnh sửa) trên các màn hình riêng biệt để dễ phân biệt.
• Kết hợp các điều khiển này với các công thức để tạo ra trải nghiệm người dùng thống nhất.

Vùng chứa

Khi ứng dụng canvas ngày càng mở rộng về quy mô để giải quyết nhiều tình huống kinh doanh hơn, số lượng các biện pháp kiểm soát sẽ tiếp tục tăng lên và cần phải sắp xếp các biện pháp kiểm soát dựa trên chức năng mà chúng thực hiện. Một cách dễ dàng để thực hiện việc này là chọn các điều khiển cùng nhau và nhóm chúng thành một nhóm. Tuy nhiên, việc nhóm các điều khiển không phải lúc nào cũng được khuyến khích. Ứng dụng canvas Container control có thể chứa một tập hợp các điều khiển và có các thuộc tính riêng.

Các vùng chứa có chức năng như những không gian trống nơi bạn có thể chèn và sắp xếp các điều khiển liên quan đến góc trên cùng bên trái của vùng chứa. Bạn có thể linh hoạt lồng các container, cho phép tạo ra các bố cục phức tạp hơn và tự do trong thiết kế.

Các container thực sự là các điều khiển có các thuộc tính riêng như Width và BorderColor. Vùng chứa ảnh hưởng đến bố cục ứng dụng và giúp người dùng trình đọc màn hình hiểu được cấu trúc của ứng dụng.

Mặc dù bạn có thể thêm bất kỳ điều khiển nào vào một nhóm, nhưng bạn chỉ nên thêm các điều khiển có liên quan về mặt logic vào một vùng chứa.

Việc sắp xếp các thành phần theo nhóm cho phép người dùng áp dụng các thuộc tính chung cho nhiều thành phần. Power Apps Tuy nhiên, việc thay đổi từng tài sản trong một nhóm có thể cần phải điều chỉnh thủ công. Hơn nữa, các nhóm không hiện diện trong cấu trúc logic của ứng dụng vì lý do trợ năng, vì trình đọc màn hình không thể nhận ra chúng. Ngoài ra, việc không thể lồng các nhóm khiến việc tạo các bố cục phức tạp hơn trở nên khó khăn.

Thiết kế và hướng dẫn của phòng trưng bày

Tránh thay đổi các mục trong thư viện từ bên trong

Tránh sửa đổi thuộc tính của thư viện trong các sự kiện của điều khiển con như Items hoặc OnChange . OnSelect Điều này có thể dẫn đến hành vi không mong muốn, đặc biệt là khi xử lý một số điều khiển kích hoạt sự kiện khi giá trị của chúng thay đổi.

Hãy thận trọng với các điều khiển được kích hoạt OnChange

Hãy thận trọng khi sử dụng các nút điều khiển như Hộp kết hợp, Chọn ngày, Thanh trượt hoặc Chuyển đổi trong thư viện ảnh. Những điều khiển này có thể kích hoạt OnChange sự kiện bất ngờ, dẫn đến các vấn đề tiềm ẩn như vòng lặp vô hạn.

Tác động đến hiệu suất khi vá lỗi

Hãy lưu ý đến tác động đến hiệu suất khi vá hoặc cập nhật các mục trong thư viện, đặc biệt là khi xử lý số lượng lớn mục. Việc vá lỗi có thể diễn ra chậm và thư viện có thể tải lại tất cả các mục, ảnh hưởng đến hiệu suất.

Xử lý vòng lặp vô hạn một cách cẩn thận**

Nếu việc sửa đổi dữ liệu thư viện kích hoạt các sự kiện dẫn đến vòng lặp vô hạn, hãy cân nhắc sử dụng các điều khiển hiện đại hoặc các điều khiển không kích hoạt OnChange khi dữ liệu của họ thay đổi để phá vỡ vòng lặp.

Tránh các thư viện lồng nhau

Thư viện lồng nhau có thể dẫn đến các vấn đề về hiệu suất và liên kết dữ liệu phức tạp.

Nếu có thể, hãy tránh việc lồng ghép các phòng trưng bày. Thay vào đó, hãy thử thiết kế cấu trúc dữ liệu và sử dụng các hàm theo cách tối ưu.

Sử dụng các phòng trưng bày có chiều cao linh hoạt

Thư viện có chiều cao cố định có thể làm hạn chế khả năng hiển thị nội dung, đặc biệt là khi xử lý dữ liệu động.

Sử dụng các thư viện chiều cao linh hoạt bằng cách thiết lập Height tài sản để Parent.Height hoặc giá trị động dựa trên dữ liệu của bạn. Điều này đảm bảo rằng thư viện sẽ điều chỉnh chiều cao để chứa được nhiều lượng dữ liệu khác nhau.

Tối ưu hóa việc tải dữ liệu

Khi tối ưu hóa việc tải dữ liệu trong Power Apps, bạn có thể muốn lấy và hiển thị chỉ những cột cần thiết trong thư viện thay vì lấy toàn bộ tập dữ liệu.

Sau đây là một ví dụ về cách bạn có thể thực hiện điều này: Giả sử bạn có một bộ sưu tập EmployeeData với nhiều cột và bạn chỉ muốn hiển thị các cột "Tên" và "Phòng ban" trong một thư viện.

// Collection named ProductSales with sample sales data

ClearCollect(ProductSales, 
    Table(
        { ProductName: "Phone", UnitPrice: 499.99, QuantitySold: 100 },
        { ProductName: "Laptop", UnitPrice: 999.99, QuantitySold: 50 },
        { ProductName: "Tablet", UnitPrice: 299.99, QuantitySold: 75 }
    )
)

// Bind the gallery to display only the "ProductName" and "QuantitySold" columns

Gallery1.Items = ShowColumns(ProductSales, ProductName, QuantitySold)

Nhận thêm thông tin về các biện pháp thực hành tốt nhất của Thư viện.

Xây dựng các thành phần có thể tái sử dụng

Khi nào tạo các thành phần mã tùy chỉnh bằng cách sử dụng Power Apps Khung thành phần (PCF)

Power Platform cho phép tạo ra các thành phần có thể tái sử dụng thông qua Power Apps Khung thành phần (PCF). Xem thêm chi tiết tại đây.

Sau đây là các tình huống mà bạn có thể cân nhắc tạo các thành phần PCF trong Power Apps:

Các thành phần UI phức tạp

Khi bạn cần tạo các thành phần giao diện người dùng phức tạp hoặc các điều khiển không có sẵn trong các điều khiển chuẩn. Power Apps

Kiểm soát tùy chỉnh cho các yêu cầu cụ thể

Khi ứng dụng của bạn có các yêu cầu cụ thể mà các điều khiển có sẵn không đáp ứng được và bạn cần tạo các điều khiển tùy chỉnh phù hợp với nhu cầu của mình.

Trải nghiệm người dùng nhất quán trên các ứng dụng

Khi bạn muốn duy trì trải nghiệm người dùng nhất quán trên nhiều môi trường bằng cách đóng gói các chức năng cụ thể trong một thành phần PCF. Power Apps

Khả năng tái sử dụng trên nhiều ứng dụng

Khi bạn dự đoán nhu cầu tái sử dụng một phần chức năng hoặc thành phần giao diện người dùng cụ thể trong nhiều ứng dụng, việc tạo thành phần PCF cho phép bạn xây dựng một lần và tái sử dụng.

Triển khai logic nâng cao

Khi bạn cần triển khai logic kinh doanh nâng cao hoặc các phép tính vượt quá khả năng của các công thức hoặc hàm tiêu chuẩn Power Apps.

Cải thiện trải nghiệm người dùng

Khi bạn muốn nâng cao trải nghiệm tổng thể của người dùng bằng cách tạo ra các thành phần hấp dẫn về mặt thị giác và tương tác mà các điều khiển mặc định không thể làm được.

Bước tiếp theo

Hướng dẫn thiết kế đáp ứng