Projektowanie układów kanwy dla ekranów o różnych rozmiarach

Można projektować układy kanwy w taki sposób, aby były dostosowane do urządzeń o różnych rozmiarach, optymalizując zawartość wyświetlaną w przeglądarce z uwzględnieniem rozmiarów ekranu.

Tematy:

Projektowanie układów kanwy na potrzeby wyświetlania na urządzeniach z ekranami o różnych rozmiarach

Można projektować układy kanwy w taki sposób, aby były dostosowane do urządzeń o różnych rozmiarach, optymalizując zawartość wyświetlaną w przeglądarce, na przykład na smartfonie, tablecie lub laptopie.

Optymalizowanie układów kanwy dla ekranów o różnych rozmiarach

Po otwarciu skoroszytu na urządzeniach o różnych rozmiarach rozmiar ekranu kanwy jest skalowany do rozmiaru ekranu przeglądarki z użyciem wartości domyślnych przeglądarki. Zmiana rozmiaru okna przeglądarki na mniejszy może negatywnie wpłynąć na widoczność szczegółów w wizualizacjach. Na przykład mogą stać się trudne do odczytania dane na wykresie punktowym, dane na mapie termicznej albo większość danych miar w wizualizacji typu "kafelek", przez co niemożliwe będzie dostrzeżenie kluczowych informacji.

Zmniejszanie rozmiaru kanwy w przeglądarce może spowodować, że wizualizacje staną się zbyt małe, aby dane były wyświetlane prawidłowo.
Na tym rysunku pokazano kanwę ze zmniejszonym rozmiarem ekranu wyświetlaną w przeglądarce, gdzie niektóre wizualizacje stały się zbyt małe, aby można było prawidłowo odczytać dane.

Użytkownik będący autorem może tak zaprojektować punkty przerwania dla kanwy, aby podczas zmniejszania rozmiaru ekranu kanwy renderowanie wizualizacji zmieniało się na dopasowane do nowego rozmiaru. Jeśli na przykład dostępny rozmiar ekranu jest zbyt mały, aby wyświetlić kompletną wizualizację, można zmienić jej położenie lub ją ukryć w celu lepszego dostosowania układu do ekranu o mniejszym rozmiarze. Różne rozmiary ekranu i układy kanwy można określać za pomocą punktów przerwania kanwy - każdy punkt przerwania reprezentuje inny układ wizualizacji, wyświetlany na ekranie o danym rozmiarze.

Zoptymalizowana kanwa dla punktu przerwania dostosowanego do ekranu o mniejszym rozmiarze zawiera wizualizacje, których położenie zostało zmienione w celu poprawienia czytelności na mniejszym urządzeniu.
Na tym rysunku pokazano zoptymalizowaną wizualizację utworzoną przy użyciu punktu przerwania dla urządzenia o mniejszym rozmiarze ekranu.

Suwak służy do definiowania rozmiarów ekranu stosowanych w sytuacjach, gdy użytkownicy-konsumenci wyświetlają kanwy na urządzeniach o różnych rozmiarach. Można na przykład zmienić sposób wyświetlania wizualizacji, modyfikując ich położenie, rozmiar lub widoczność na kanwie.

Po dodaniu do kanwy punktu przerwania rozmiar ekranu punktu przerwania określa, w jaki sposób wizualizacje będą wyświetlane na ekranie o danym rozmiarze. W punkcie przerwania kanwy można zmieniać położenie i rozmiar wizualizacji, a także je usuwać, aby zoptymalizować wyświetlanie wizualizacji użytkownikom. Można określić różne konfiguracje wizualizacji dla każdego punktu przerwania, a różnice dla każdego punktu przerwania są wyświetlane użytkownikowi-konsumentowi tylko wtedy, gdy rozdzielczość rozmiaru ekranu przeglądarki odpowiada rozmiarowi ekranu punktu przerwania, dla którego wprowadzono zmiany.

Projektowanie układów kanwy na potrzeby wyświetlania na różnych urządzeniach

Można utworzyć punkty przerwania kanwy, aby określić, w jaki sposób wizualizacje są wyświetlane użytkownikom-konsumentom na ekranach o różnych rozmiarach. Można na przykład ustawić różne punkty przerwania w celu zoptymalizowania wyświetlania w przeglądarce na urządzeniu mobilnym, na tablecie lub na laptopie.

Ikona samouczka Samouczek

  1. Na stronie startowej wskazać kursorem skoroszyt, kliknąć Czynności i wybrać Otwórz.
  2. Kliknąć Edytuj, aby wyświetlić skoroszyt w trybie edycji.
  3. Rozwinąć kanwę do maksymalnego rozmiaru i w obszarze Właściwości kanwy ustawić opcję Układ na "Automatyczne dopasowanie", po czym kliknąć OK.
  4. W stopce kliknąć Edytor kanwy responsywnej, aby otworzyć edytor, w którym można definiować punkty przerwania w celu wyświetlania kanwy na różnych urządzeniach.
    Edytor kanwy responsywnej

  5. Ustawić punkt przerwania kanwy:
    • Dodawanie punktu przerwania w bieżącym położeniu suwaka - kliknąć i przeciągnąć suwak do takiej wartości oznaczającej rozmiar ekranu (w pikselach), która ma być używana dla tego punktu przerwania,
      Przeciągnąć suwak do wymaganej szerokości wyświetlanej w pikselach.

      a następnie kliknąć Dodaj punkt przerwania Kliknąć ikonę "Dodaj punkt przerwania", aby dodać punkt przerwania w miejscu, w którym znajduje się suwak., aby dodać punkt przerwania w bieżącej lokalizacji suwaka.
    • Ręczne wprowadzanie wartości dla punktu przerwania - kliknąć Otwórz menu edytora kanwy responsywnej, kliknąć Dodaj punkt przerwania, po czym w polu Położenie wprowadzić liczbę określającą miejsce, w którym ma się znaleźć ten punkt przerwania.
      Ręczne wprowadzanie położenia w celu dodania punktu przerwania

  6. Powtórzyć poprzedni krok, aby zdefiniować dodatkowe punkty przerwania kanwy.
  7. Uwzględnić lub wykluczyć wizualizacje dla każdego punktu przerwania kanwy:
    • Kliknąć prawym przyciskiem myszy punkt przerwania kanwy, który ma być zarządzany (Punkt przerwania kanwy i jego znacznik), po czym kliknąć Zarządzaj punktem przerwania.
      Skorzystać z okna dialogowego "Zarządzanie punktem przerwania", aby uwzględnić określone wizualizacje w punkcie przerwania tej kanwy lub je z niego wykluczyć.

    • Kliknąć wizualizację na liście, aby ją wykluczyć lub uwzględnić w kanwie dla tego punktu przerwania kanwy, po czym kliknąć OK.
      Skorzystać z okna dialogowego "Zarządzanie punktem przerwania", aby uwzględnić określone wizualizacje i filtry pulpitu informacyjnego w kanwie dla danego punktu przerwania lub je z niej wykluczyć.

  8. Opcjonalne: Utworzyć wizualizację i dodać ją do punktu przerwania, wybierając dane z okienka "Dane" i dodając je do kanwy.
    Nowa wizualizacja jest dodawana wyłącznie do bieżącego punktu przerwania, jednak można dodać wizualizację do innych punktów przerwania na kanwie. W tym celu należy wybrać taką wizualizację z listy w oknie dialogowym "Zarządzanie punktem przerwania" danego punktu przerwania.
  9. Opcjonalne: Zoptymalizować wyświetlanie wizualizacji dla punktu przerwania kanwy.
    Może zaistnieć potrzeba zoptymalizowania zawartości pod kątem wyświetlania jej na mniejszych urządzeniach, np. smartfonach.
    • Modyfikowanie położenia wizualizacji - klikać i przeciągać wizualizacje do nowego położenia.
    • Optymalizowanie wizualizacji - użyć okienka "Właściwości" w celu ukrycia niepotrzebnej zawartości takiej jak tytuł czy legenda.
    Podczas optymalizowania wizualizacji dla danego punktu przerwania wprowadzone zmiany nie są stosowane do innych punktów przerwania w kanwie.
  10. Kliknąć Zapisz.