Dynamiczne techniki projektowania

Dynamiczny projekt używa tylko jednego układu, w którym zawartość jest płynna i może dostosować się do zmieniających się rozmiarów okien. Dynamiczny projekt umożliwia jednorazowe tworzenie funkcji i oczekiwanie, że będzie działać we wszystkich rozmiarach ekranu. Projekt adaptacyjny jest podobny, ale zastępuje jeden układ innym układem.

Aplikacje XAML używają efektywnych pikseli, aby zagwarantować, że interfejs użytkownika będzie czytelny i można go używać na wszystkich urządzeniach z Windows. Dlaczego więc kiedykolwiek chcesz dostosować interfejs użytkownika aplikacji dla określonego urządzenia lub rozmiaru ekranu?

• Aby najefektywniej wykorzystać przestrzeń i zmniejszyć konieczność nawigowania

  Jeśli projektujesz aplikację, aby wyglądała dobrze na urządzeniu z małym ekranem, takim jak tablet, aplikacja będzie można używać na komputerze z znacznie większym wyświetlaczem, ale prawdopodobnie będzie trochę zmarnowanego miejsca. Możesz dostosować aplikację, aby wyświetlić więcej zawartości, gdy ekran jest powyżej określonego rozmiaru. Na przykład aplikacja na zakupy może wyświetlać jedną kategorię towarów jednocześnie na tablecie, ale wyświetlać wiele kategorii i produktów jednocześnie na komputerze lub laptopie.

  Umieszczając więcej zawartości na ekranie, zmniejszasz ilość nawigacji, którą użytkownik musi wykonać.

• Aby korzystać z możliwości urządzeń

  Niektóre urządzenia częściej mają określone możliwości. Na przykład laptopy mogą mieć czujnik lokalizacji i aparat fotograficzny, podczas gdy telewizor może nie mieć żadnego z tych elementów. Aplikacja może wykryć, które funkcje są dostępne, i włączyć opcje, które z nich korzystają.

• Aby zoptymalizować dane wejściowe

  Uniwersalna biblioteka kontrolna współpracuje ze wszystkimi typami wejściowymi (dotyk, pióro, klawiatura, mysz), ale nadal można zoptymalizować działanie pod kątem niektórych typów wejściowych przez reorganizację elementów interfejsu użytkownika.

Podczas optymalizowania interfejsu użytkownika aplikacji pod kątem określonych szerokości ekranu mówimy, że tworzysz dynamiczny projekt. Poniżej przedstawiono kilka dynamicznych technik projektowania, których można użyć do dostosowywania interfejsu użytkownika aplikacji.

Zmienić położenie

Możesz zmienić lokalizację i położenie elementów interfejsu użytkownika, aby jak najlepiej wykorzystać rozmiar okna. W tym przykładzie mniejsze okno ustawia elementy pionowo. Kiedy aplikacja rozszerza się na większe okno, elementy mogą wykorzystać większą szerokość okna.

W tym przykładowym projekcie aplikacji fotograficznej aplikacja fotograficzna zmienia położenie zawartości na większych ekranach.

Zmień rozmiar

Rozmiar okna można zoptymalizować, dostosowując marginesy i rozmiar elementów interfejsu użytkownika. Na przykład może to zwiększyć doświadczenie czytelnicze na większym ekranie, po prostu powiększając obszar zawartości.

Zmień układ

Zmieniając przepływ elementów interfejsu użytkownika na podstawie urządzenia i orientacji, aplikacja może oferować optymalne wyświetlanie zawartości. Na przykład podczas przechodzenia do większego ekranu warto dodać kolumny, użyć większych kontenerów lub wygenerować elementy listy w inny sposób.

W tym przykładzie pokazano, jak pojedyncza kolumna pionowo przewijanej zawartości na mniejszym ekranie może być przekształcona na większym ekranie w dwie kolumny tekstu.

Pokaż/ukryj

Możesz wyświetlać lub ukrywać elementy interfejsu użytkownika na podstawie nieruchomości ekranu lub gdy urządzenie obsługuje dodatkowe funkcje, konkretne sytuacje lub preferowane orientacje ekranu.

Na przykład kontrolki odtwarzacza multimedialnego zmniejszają liczbę przycisków ustawionych na mniejszych ekranach i rozszerzają je na większych ekranach. Odtwarzacz multimedialny w większym oknie może obsługiwać znacznie więcej funkcji na ekranie niż w mniejszym oknie.

Część techniki ujawniania lub ukrywania obejmuje wybór, kiedy wyświetlić więcej metadanych. W przypadku mniejszych okien najlepiej wyświetlać minimalną ilość metadanych. W przypadku większych okien można wyświetlić znaczną ilość metadanych. Oto kilka przykładów tego, kiedy pokazać lub ukryć metadane:

• W aplikacji poczty e-mail możesz wyświetlić awatar użytkownika.
• W aplikacji muzycznej możesz wyświetlić więcej informacji na temat albumu lub artysty.
• W aplikacji wideo można wyświetlić więcej informacji o filmie lub pokazie, takich jak wyświetlanie szczegółów obsady i załogi.
• W dowolnej aplikacji możesz podzielić kolumny i wyświetlić więcej szczegółów.
• W dowolnej aplikacji możesz zmienić coś ułożonego pionowo na ułożenie poziome. W przypadku przechodzenia z małego okna do większego okna skumulowane elementy listy mogą ulec zmianie, aby wyświetlić wiersze elementów listy i kolumn metadanych.

Ponowne tworzenie architektury

Możesz zwinąć lub rozgałęzić architekturę aplikacji, aby lepiej dopasować ją do określonych urządzeń. W tym przykładzie rozwinięcie okna spowoduje wyświetlenie całego wzorca listy/szczegółów.

Układ adaptacyjny

Układ adaptacyjny jest podobny do układu responsywnego, ale całkowicie zastępuje interfejs użytkownika w zależności od formatu, w którym jest prezentowany. Projektowanie adaptacyjne ma wiele stałych rozmiarów układu i strona ładuje dany układ na podstawie dostępnego miejsca.

Ta technika umożliwia przełączanie interfejsu użytkownika dla określonych punktów przerwania. W tym przykładzie okienko nawigacji i jego kompaktowy, przejściowy interfejs użytkownika działa dobrze w przypadku mniejszego ekranu, ale na większym ekranie karty mogą być lepszym wyborem.

Kontrolka NavigationView obsługuje tę technikę, umożliwiając użytkownikom ustawienie pozycji okienka na górną lub lewą stronę.

Tematy pokrewne

• Projekt Fluent — układ
• Rozmiary ekranu i punkty przerwania
• Responsywne układy z XAML
• Kontrolki XAML