Zalecenia dotyczące optymalizacji układu
Dotyczy tej rekomendacji listy kontrolnej optymalizacji środowiska dobrze zaprojektowanej struktury Power Platform:
| XO:06 | Zachowaj użyteczne, wizualne układy w rozmiarach i rozwiązaniach ekranu. Użyj technik adaptacyjnych, aby dynamicznie renderować zawartość na różne sposoby. |
|---|
W tym przewodniku opisano zalecenia dotyczące projektowania układów ekranów, które są łatwe w nawigacji i dostosowywania na różnych urządzeniach. Dzięki temu użytkownicy mogą korzystać ze spójnego i optymalnego wyświetlania informacji bez względu na posiadane urządzenie.
Definicje
| Termin | Definicja |
|---|---|
| Okienko ekranu | Widoczna część interfejsu cyfrowego, np. przeglądarki sieci web lub aplikacji mobilnej, w której jest wyświetlana zawartość. Zakresy okienek ekranu są często powiązane z klasami urządzeń (urządzenia przenośne, tablety i pulpity) w zależności od rozmiarów ekranu i rozdzielczości. |
| Punkty przerwania | Konkretne wartości pikseli definiujące zakresy okienek ekranu, używane do określania zachowania układu adaptacyjnego. |
Kluczowe strategie projektowania
Układy układów zapewniają elastyczne i wydajne środowisko pracy w różnych rozmiarach okien. Dostosowują się, skalując zawartość, przemieszczając elementy oraz wybiórczo wyświetlając tekst i obrazy. Odpowiedzialny układ spełnia potrzeby użytkowników niezależnie od rozmiaru ekranu.
Ustalanie spójnej ramki aplikacji
Ramka aplikacji składa się z zestawu kontrolek, które są spójnie dostępne na każdym ekranie. Składa się z trzech głównych składników: nagłówka, nawigacji i obszaru zawartości. Proste aplikacje umożliwiają korzystanie ze składnika nagłówka, a bardziej rozbudowane aplikacje często korzystają z nawigacji po stronie, aby włączyć wiele stron. Składniki podrzędne można dostosowywać. Na przykład można wykorzystać wyszukiwanie globalne w nagłówku lub grupie elementów w nawigacji po stronie, aby dostosować je do wymagań aplikacji.
Trzy główne składniki ramki aplikacji:
Nagłówek to składnik podstawowy zaprojektowany tak, aby stanowił część każdej aplikacji wewnętrznej. Składa się z składników podrzędnych, które zapewniają użytkownikom dostęp do funkcji w całym systemie, pomagają w poszczególnych interfejsach użytkownika i zapewniają spójność doświadczeń. Jest on wyświetlany u góry ramki aplikacji i powinien być utrwalany na wszystkich stronach aplikacji. Można też opcjonalnie hostować polecenia globalne, takich jak wyszukiwanie, ustawienia, powiadomienia, opinie, profil lub pomoc. Nazwa aplikacji powinna być zawsze wyświetlana, co najlepiej jest również kliknąć link do strony głównej lub na stronie docelowej. Nagłówek powinien być dynamiczny z poleceniami przenoszącymi do kontroli przepełnienia w okienkach ekranu o wartości maksymalnej 600 pikseli. Szerokość danych wejściowych wyszukiwania jest również na poziomie maksymalnym 1023 pikseli.
Nawigacja to system kontrolek, które działają razem, aby pomóc użytkownikom w znajdowaniu informacji i wykonywaniu zadań. Ułatwia ona użytkownikom przeskakiwanie z obszaru do obszaru aplikacji. Hierarchicznie nie jest dołączany do żadnej strony ani obszaru, ale istnieje nad całą inną treścią. Jest zawsze obecna i może być zminimalizowana do stanu zwiniętego (nazywanego również stanem poręczy), co pozwala uzyskać dodatkowe miejsce na zawartość strony. W przypadku mniejszych rozmiarów okien można je zminimalizować do menu wysuwanego. Najpopularniejsze formy nawigacji to nawigacja górna i nawigacja boczna. Nie używaj obu jednocześnie.
Region zawartości zawiera fokus ekranu. Rozmiar okna przeglądarki ma wpływ na ramkę zawartości i ilość miejsca dostępnego w głównym obszarze zawartości. Ta ramka dostosowuje się na podstawie punktu przerwania i odpowiedniego zachowania poszczególnych składników. Dowiedz się więcej w temacie Tworzenie macierzy punktów przerwania.
Obszar zawartości może opcjonalnie zawierać kilka pod regionów dostępnych w celu zapewnienia spójności rozmieszczenia elementów, takich jak nagłówek strony, wbudowane okienka boczne lub panele nakładające się na zawartość.
Dzięki spójnemu językowi projektu (schematy koloru, typografia i struktura układu) użytkownicy mogą szybko identyfikować różne elementy i korzystać z niego bez nieporozumień. Im bardziej spójniej jest używany wzorzec ramki aplikacji we wszystkich wewnętrznych aplikacjach biznesowych, tym większa jest spójność modelu użytkownika. Dostosowanie do standardów branży lub typowych wzorców platform dodatkowo zwiększa ten efekt.
Gdy ramka aplikacji zostanie określona, układ każdego ekranu znajduje się w obszarze zawartości ramki aplikacji.
Przemyślane użycie obszaru zawartości
Użytkownicy mogą korzystać z wygodnej funkcji, w której informacje są łatwo dostępne, tekst jest łatwy do odczytywania, a estetyka rozwija, a nie zmniejsza, użyteczność. Priorytetyzuj początkową widoczność kluczowych informacji, zapewniaj czytelność we wszystkich kolumnach oraz harmonizuj bezpieczeństwo elementów projektowych dla estetyki.
Upewnij się, że istotne informacje są natychmiast widoczne po otwarciu ekranu bez konieczności przewijania. Ustalaj priorytet wyświetlania istotnych informacji, takich jak opcje nawigacji, kluczowa treść i praktyczne elementy wyświetlane u góry ekranu. Zachowanie równowagi między wyświetlaniem wystarczającej ilości elementów a dostarczeniem szczegółowych informacji dla poszczególnych elementów stanowi duże wyzwanie. I odwrotnie, choć może się wydawać, że warto podać wszystkie możliwe informacje w widoku początkowym, będzie to zbyt duża liczba informacji, które będą stanowić zagrożenie dla użytkowników i przeciążenie kluczowych elementów. Warto rozważyć zastosowanie podsumowań lub podglądów, które zaoferują szczegółowe informacje, co pozwala użytkownikom zagłębić się w szczegółowe informacje. Pulpity nawigacyjne są zoptymalizowane w celu obsługi w tym celu i służą do wizualizacji dużych ilości danych.
Wykorzystuj wiele kolumn, sekcji lub grupowania w celu logicznego uporządkowania zawartości i zmaksymalizowania miejsca. Zwróć szczególną uwagę na szerokość kolumny, upewniając się, że tekst nie będzie zbyt duży i nie wymaga nadmiernego wychwycenia. Należy unikać zawężenia kolumn, które wymuszają, że użytkownicy ciągle przewijają poziomo, przerywając przepływ interakcji. Odwrotnie, zbyt szerokie kolumny mogą uniemożliwić odczyt, co wymaga od użytkowników śledzenia linii w długich odległościach. Staraj się osiągnąć równowagę, wygodne czytanie, a jednocześnie efektywniej korzystać z dostępnej przestrzeni.
Elementy wizualne powinny mieć rozmiar i pozycję odpowiednie do utworzenia wizualnego i zrównoważonego interfejsu. Wyrównaj ustawienia z odpowiadającymi mu elementami graficznymi lub tytułami, zachowaj spójność między elementami i przestrzegaj hierarchii opartej na potrzebach użytkowników. Przytnij niepotrzebne elementy i rozsądnie przydziel pikseli do elementów, które mają najwięcej znaczenia. Priorytetyzuj i podkreślaj zawartość i elementy nawigacyjne, szczególnie w przypadku aplikacji wymagających wielu nawigacji lub stron głównych, aby uniknąć nadmiernej dekoracyjności zakłócającej pracę.
Podstawowa siatka może być przydatna do spójnego układu elementów. Wybrane zachowanie siatki powinno być spójne w każdym obszarze zawartości ekranu w aplikacji, a także może być stosowane na poziomie składnika (np. w kartach lub okienkach na boku). Najczęstszy typ układu siatki używany w aplikacjach internetowych to siatka kolumn. Do implementowania ekranów dynamicznych jest zalecane zachowanie siatki płynnej (lub rozciągliwej).
Używanie ustalonych układów i wzorców grupowania
Użyj często rozpoznanych struktur i obiektów, które mają uporządkować zawartość i elementy w interfejsie użytkownika. Te układy i wzorce zostały udoskonalone i sprawdzone w czasie, przez co są dobrze i intuicyjne dla użytkowników, a także ułatwiają implementację wzorców adaptacyjnych. Po zidentyfikowaniu podstawowych scenariuszy i elementów zamapuj każdy z nich na ustalony układ, który zapewnia najlepsze współdziałanie. Ustalaj priorytety zawartości i funkcji ważnych dla wykonania zadania. Określ, które elementy powinny być zawsze widoczne i dostępne na ekranie, a które można ukryć lub uzyskać dostęp za pomocą innych menu lub akcji.
Na poniższej liście opisano ustalone układy często używane w aplikacjach biznesowych i biurowych. Wszystkie mogą występować w głównym obszarze zawartości.
Ekran docelowy/główny
Ekran docelowy lub ekran główny służy jako punkt dostępu do aplikacji, udostępniając użytkownikom przegląd ofert i funkcji aplikacji. Zazwyczaj ukierunkowany na skupianie uwagi gości, zachęca do podjęcia określonych działań, takich jak wykonanie pierwszego zadania lub poznawanie dalszej zawartości. Często zawiera on obrazy główne i czyste opcje nawigacji.
Jest to idealne rozwiązanie do powitania użytkowników, oferujące szybki dostęp do kluczowych funkcji, opcji nawigacyjnych i rozmów telefonicznych do akcji, a także ustawianie klimatu dla doświadczeń aplikacji. Aby skutecznie kierować użytkownikami, należy określić priorytet, a także intuicyjną nawigację.
pulpit nawigacyjny
Pulpit nawigacyjny jest scentralizowanym centrum w aplikacji, które przedstawia użytkownikom kompleksowy przegląd odpowiednich danych i informacji. Często składa się z dostosowywanych widgetów lub modułów, co umożliwia użytkownikom monitorowanie określonych metryk i wykonywanie działań.
Pulpity nawigacyjne są przeznaczone dla aplikacji o złożonych zestawach danych lub funkcjach wielodniowych, co umożliwia użytkownikom śledzenie postępu, analizowanie trendów i podejmowanie szybkich decyzji. Są one szczególnie przydatne w przypadku platform analitycznych, narzędzi do zarządzania projektami i aplikacji do zarządzania finansami.
Formularz
Formularz jest uporządkowanym układem, który ułatwia wprowadzanie danych przez użytkowników. Zazwyczaj zawiera pola do wprowadzania różnych typów informacji, takich jak tekst, liczby, daty i wybór. Formularze są niezbędne do zbierania informacji o użytkownikach, przetwarzania transakcji i pobierania interakcji w aplikacjach.
Są one często stosowane w przepływach rejestracji, procesach kasowych, zadaniach wprowadzania danych i we wszystkich scenariuszach wymagających wprowadzenia informacji przez użytkownika lub opinii.
Widok encji/profilu
Widok encji/profilu zawiera szczegółowe informacje o określonej encji, takie jak profil użytkownika, lista produktów lub element zawartości. Zazwyczaj zawiera opisowy tekst, elementy multimedia oraz odpowiednie akcje i interakcje.
Dobrze nadają się do pokazywania szczegółowych informacji o elementach w aplikacji. Dostarczają użytkownikom szczegółowej wiedzy, ułatwiają podejmowanie decyzji i obsługują zaangażowanie w określone encje, takie jak profile użytkowników w aplikacjach społecznościowych lub na platformach handlowych.
Strona listy
Lista lub tabela wyświetla kolekcję elementów lub obiektów w formacie strukturalnym, często przedstawiana w układzie liniowym lub siatkowym. Zazwyczaj zawiera krótkie podsumowania lub podglądy poszczególnych elementów oraz formanty nawigacyjne służące do przeglądania lub filtrowania.
Strony list mogą przedstawiać duże zestawy zawartości lub danych w czytelnym formacie, co umożliwia użytkownikom efektywne przeszukiwanie, wyszukiwanie i przechodzenie między stronami. Jeśli są włączone akcje w określonych wierszach, proces powinien być jasny. Strony list są często używane w systemach zarządzania treścią, zestawieniach katalogów, wynikach wyszukiwania i źródłach wiadomości.
Mini przegląd (podzielony ekran)
Mini przegląd lub ekran podzielony dzieli interfejs na dwie różne sekcje. Po lewej stronie jest wyświetlana lista, a po prawej stronie widok elementu. Lista zazwyczaj zawiera kolekcję elementów, a widok elementów zawiera szczegółowe informacje o wybranym elemencie z listy.
Ten układ jest szczególnie skuteczny w sytuacjach, gdy użytkownicy muszą szybko przeglądać listę elementów i wyświetlać szczegółowe informacje o poszczególnych elementach, na przykład podczas wykonywania operacji zbiorczych. Katalogi produktów, systemy zarządzania dokumentami, klienci poczty e-mail lub komunikacji oraz narzędzia do zarządzania zadaniami (na przykład Przeglądarka zapytań platformy Azure Dev Ops) to scenariusze, które zazwyczaj pasują do tego wzorca.
Kreator
Kreator prowadzi użytkowników przez serię sekwencji kroków lub zadań, zazwyczaj wykonywanych w sposób liniowy, w celu zakończenia złożonego procesu lub uzyskania określonego celu. Często obejmuje wskaźniki postępu, monity i walidację. Kreatory upraszczają złożone procesy, zmniejszając przeciążenie funkcji poznawczych i prowadząc użytkowników przez nieznane zadania lub przepływy pracy. Są one często stosowane w przepływach dołączania, procesach instalacji, formularzach wieloetapowych i interakcjach opartych na zadaniach, takich jak konfigurowanie złożonych ustawień lub transakcji.
Kontynuuj dostosowywanie układu standardowego i tworzenie go zgodnie z określonymi wymaganiami. Proces ten może obejmować dodawanie lub usuwanie elementów, dostosowanie ich rozmiaru i położenia, a także zastosowanie stylu zgodnego z tożsamością marki lub wytycznymi dotyczącymi projektowania wizualnego. Poeksperymentuj z różnymi konfiguracjami i odmianami standardowego układu, aby znaleźć najbardziej efektywny układ dla zawartości i ogólnego doświadczenia użytkownika.
Projektowanie układów dla wszystkich urządzeń
Układy są zwieńczeniem zdefiniowanych reguł i zamierzonej organizacji zawartości. Połączenie zawartości w przemyślane struktury jest kluczowe, ale połączenie przepływu wszystkich platform i rozmiarów ekranów wymaga skalowania logiki. Indywidualne, adaptacyjne i dynamiczne elementy projektowe mogą rozwiązać to wyzwanie. W niektórych przypadkach odpowiedni wybór stanowi połączenie projektu adaptacyjnego i dynamicznego.
Projektowanie dynamiczne używa tylko jednego układu, w którym zawartość jest już rozsyłana i może zaadaptować się do zmieniającego się formatu. Ta technika projektowa używa zapytań multimediów w celu sprawdzenia charakterystyki danego urządzenia i odpowiedniego renderowania zawartości. Zaprojektowanie systemu pozwala na zbudowanie funkcji i skuteczne działanie we wszystkich rozmiarach ekranów.
Układ adaptacyjny zmienia się w całości w zależności od formatu, w którym jest prezentowany. Adaptacyjne projektowanie ma wiele stałych rozmiarów układów i uruchamia przeglądarkę do ładowania danego układu w zależności od dostępnego miejsca. Witryny internetowe wbudowane z adaptacyjnym projektowaniem używają zapytań multimediów do wykrywania punktów kontrolnych, podobnych do projektowych. Korzystają także z dodatkowych nałogów w zależności od możliwości urządzenia. Ten proces jest nazywany „progresywnym udoskonalaniem”.
Zmiana położenia
Modyfikuj położenie elementów strony.
Optymalizacja zawartości wraz ze zwiększeniem rozmiaru okna powoduje uporządkowanie, czytelność i równowagę zawartości. Na przykład elementy skumulowane pionowo w okienku ekranu na urządzeniu przenośnym można zmienić się poziomo w większych okienkach ekranu. Dzięki tej zmianie następuje naturalna kolejność odczytu od lewej do prawej, tworzy odpowiednią równowagę w projekcie i zapewnia wizualne skupienie się na elementach kluczowych na stronie.
Zmień rozmiar
Dostosowuj rozmiar i marginesy dla elementów stron.
Zmiana rozmiaru elementów strony w celu zoptymalizowania bogatej zawartości przez wyświetlenie większej ilości zawartości w górnej części okna, zmniejszając konieczność przewijania w pionie. Dostosuj marginesy strony, aby dodać biały znak i równoważyć układ, co pozwala na poprawianie zawartości i zwiększanie atrakcyjności wizualnej projektu. Na przykład składnik główny może być rozsyłany na całą szerokość okna, co umożliwia pokazanie większej części obrazu w tle. Zawartość zdjęcia może zostać rozwinięta, ale użyj różnych marginesów w celu dodania różnych marginesów w układzie i zdefiniowania hierarchii wizualnej.
Zmień układ
Optymalizuj przepływ elementów stron.
Dopasuj elementy strony, aby zapewnić ich pełne wyświetlanie, biorąc pod uwagę rozmiar okna i orientację przez ponowne rozmieszczenie zawartości. Na przykład jedna kolumna zawartości w większym oknie może być przepełniona w większym oknie, w związku z co umożliwia wyświetlenie dwóch kolumn tekstu. Ta technika umożliwia wyświetlić więcej zawartości „nad zgięciem”.
Pokaż/ukryj
Optymalizuj zawartość dla rozmiaru okna i jej orientacji.
Wyświetlanie lub ukrywanie elementów strony w celu zoptymalizowania zawartości dla rozmiaru okna i jej orientacji. Ta technika polega na dopasowaniu ilości informacji do kontekstu wyświetlania. Na przykład kategorie wyświetlane na małym ekranie mogą wyświetlać ograniczone metadane, takie jak obraz, tytuł i link, tak aby inne informacje były widoczne, aby użytkownik mógł się skoncentrować na innych informacjach. Na większym ekranie w kategoriach można wyświetlać dodatkowe metadane, takie jak osoba, data i krótki opis, a jednocześnie mieścić je w okienku ekranu.
Ponownie strukturyzuj
Rozwidlaj lub zwiń elementy strony i zawartość, aby skoncentrować się na ważnych informacjach i działaniach.
Takie podejście jest podobne do postępowania w przypadku „progresywnego ujawniania” w projekcie, ale w przypadku różnych rozmiarów okien i orientacji. Na przykład rozwinięcie okna umożliwia wyświetlenie listy elementów obok szczegółów. To wizualne połączenie między zawartością umożliwia użytkownikom łatwe wybieranie innego elementu. Na mniejszym ekranie fokus pozostaje w wyświetlaniu kluczowych informacji.
Tworzenie macierzy punktów przerwania
Macierz punktów przerwania jest obrazem graficznym ilustrującym sposób dostosowania lub adaptacji projektu aplikacji w różnych rozmiarach ekranu i w różnych orientacjach. Zazwyczaj jest w nim prezentowana strukturalna siatka lub układ szczegółów odpowiedzi projektu w różnych punktach przerwania. Każdy segment odpowiada różnej szerokości ekranu, co pozwala na wgląd w strukturę, układ i funkcjonalność projektu. Macierz punktów przerwania obejmuje zagadnienia dotyczące szerokości ekranu, orientacji widoku, elementów projektowych, struktury układu, prezentacji zawartości, nawigacji, mediów i składników interakcyjnych, aby ilustrować sposób, w jaki witryna internetowa lub aplikacja odpowiada na różne rozmiary ekranów i orientacje. Takie podejście nie tylko pomaga w sfinalizowaniu projektu poszczególnych ekranów, ale ułatwia również implementację w przypadku, gdy zmiany właściwości składnika kluczowego są bezpośrednio śledzone i dobrze przekazywane.
Ułatwienia Power Platform
Układy formularzy aplikacji opartych na modelu są konfigurowane za pomocą Power Apps Studio. Projektant formularzy umożliwia twórcom dodawanie elementów do struktury siatki, co pozwala stronom formularzy być z responsywnymi. Osadzone składniki niestandardowe, takie jak strony niestandardowe, osadzone składniki kanwy i składniki kodu programu Power Apps Component Framework (PCF), muszą uwzględniać odpowiednie zachowanie w odpowiednich implementacjach. Na przykład strony niestandardowe muszą implementować zachowanie wzorców w taki sam sposób, jak czysta aplikacja kanwy, aby działały prawidłowo.
Aplikacje kanwy wymagają jawnej konfiguracji dla każdego składnika w celu zaimplementowania zachowania dynamicznego i umożliwienia większej kontroli nad działaniem. Wielkości ekranów są określane w definicji aplikacji, do których można się odwoływać w celu określenia pozycji, zachowania, widoczności i innych odpowiednich właściwości.