Zalecenia dotyczące optymalizacji użytkowników i optymalizacji
Dotyczy tej rekomendacji listy kontrolnej optymalizacji środowiska dobrze zaprojektowanej struktury Power Platform:
| XO:07 | Zastosuj klasyczne zasady projektowe do elementów graficznych, takich jak kolor, typografia i układ. Staraj się ukierunkować, zrównować i intuicyjną hierarchię wizualną, która prowadzi uwagę użytkowników na ważne elementy i akcje. |
|---|
W tym przewodniku opisano zalecenia dotyczące wzorców projektowania wizualnego, które wpływają na jakość użytkowników, co może znacznie wpłynąć na zadowolenie i przyjęcie aplikacji. Elementy wizualne pełnią kluczowe elementy konstrukcyjne służące do tworzenia doświadczeń. Stosowanie zasad wizualnej wyrównanych ze sposobem, w jaki osoby nie pełnią tej usługi, i zawierają ustrukturalniejsze metody wybierania i rozmieszczania elementów graficznych w celu utworzenia efektywnej i pomocnej aplikacji.
Kluczowe strategie projektowania
Szerokie badania dotyczące projektowania wizualnego przez ludzi pokazują, że użytkownicy nie widzą elementów wizualnych w izolacji. Zamiast tego wpływają na ich zależność w stosunku do innych elementów i kontekstu ich pojawiania się. Te relacje wpływ na bezpieczeństwo użytkowników, zwrócenie uwagi na określone obszary, wywoływanie emocji, zrozumienie, bezpieczeństwo, tożsamość marki. Staranne wybór i rozmieszczenie elementów wizualnego może utworzyć zaangażowanie, zaangażowanie i skuteczne działania użytkownika rezonują z docelowymi odbiorcy.
Efekt estetyczno-użyteczny
Efekt estetyczno-użyteczny odnosi się do użycia w sposób powtarzający się i oznacza, że produkty, które można rozważyć jako bardziej użyteczne. Użytkownicy tworzą początkowe i wstępnie utworzone wyniki dotyczące aplikacji w ciągu około 50 milisekund. To pierwsze wrażenie zależy od różnych czynników, takich jak struktura, kolory, rozmiary, symetryczność, ilość tekstu i czcionki. Pozytywne pierwsze wrażenie może zwiększyć zadowolenie użytkownika. Z przeprowadzonych analiz wynika, że użytkownicy bardziej sięgają do niewielkich problemów z przydatnością, gdy znajdują interfejs bardzo atrakcyjny. Ponadto jakość projektu może służyć jako wskaźnik zaufania.
Równowaga i waga
Równowagi wizualnej nadaj elementówom wizualnej równowagi i wizualnej równowagi. Ułatwia ono użytkownikom przetwarzanie i organizowanie informacji wizualnej w bardziej wydajny sposób, zmniejszając wydajność funkcji poznawnych. Zdumione składniki są przeważnie niezrozumiałe i łatwiejsze do zrozumienia, co pozwala użytkownikom na efektywne skupienie uwagi i łatwiejsze przechodzenie do elementów za pomocą nawigacji wizualnej. Ten aspekt poznawczy równowagi wizualnej podkreśla jego znaczenie w usprawnieniu komunikacji i równoważeniu ogólnych możliwości użytkownika.
Skład jest zrównoważony, gdy wszystkie elementy znajdują się w najechanych elementach. Często rozmieszczenie pochyłej wymaga dostosowania. Niektóre elementy wpływające na wrażenia wizualne to rozmiar, kolor, gęstość i biała przestrzeń.
Rozmiar: większe elementy, przenoszą większe wrażenia wizualne niż mniejsze. W celu osiągnięcia równowagi można równoważenie większych elementów przez grupowanie ich z mniejszymi elementami lub ustawienie ich w układzie.
Kolor: jasne lub intensywne kolory mogą przyciągać więcej uwagi i wyglądać lepiej niż kolory neutralne lub przytłumione. Równoważenie kolorów obejmuje równomierne dystrybuowanie ich w całym interfejsie lub użycie kolorów w celu utworzenia elementów wizualnych.
Gęstość: odnosi się do tego, jak ciasno elementy są upakowane w danym obszarze. Równoważenie gęstości zapewnienia, że elementy są równomiernie rozmieszczone w obrębie interfejsu, aby uniknąć przepełnień lub luk w obszarach.
Biała przestrzeń: znana również jako przestrzeń negatywna, odnosi się do pustych obszarów między elementami. Spacja pomaga w tworzeniu wizualnej kontroli nad treścią, a także umożliwia zrównoważenie jej składem przez wyróżnianie i dostosowywanie pewnych elementów.
Zrównoważona kompozycja jest sumą sił wizualnych między elementami.
Równoważnie układu jest jednym z najtrudniejszych zadań, bo nie można go łatwo zmierzyć.
Color
Odcienie, zabarwienia, cienie i tony mogą wywoływać znaczenie, emocje i tworzyć estetyczny urok. Kolor odgrywa kluczową rolę w zwróceniu uwagi użytkownika, tworzeniu hierarchii, przekazywaniu informacji i przydatności w pracy. Jest klika powodów, dla których przemyślany wygląd kolorów w interfejsie użytkownika może mieć wpływ na użytkowników w inny sposób:
Uwaga i postrzeganie. Niektóre kolory przyciągają więcej uwagi niż inne, co pozwala projektantom na skupienie się przeglądarki na określonych elementach. Kontrast kolorów może zwiększyć czytelność i rozróżniać różne składniki, co powoduje szybkie przetwarzanie informacji.
Odpowiedź emocjonalna. Kolory mają skojarzenia psychologiczne, które wywołują emocje i nastroje. Ciepłe kolory, jak czerwony i pomarańczowy, mogą wywierać wrażenie energii i podniecenia, podczas gdy chłodne, jak niebieski i zielony, mogą wywołać spokój i ciszę. Można wywołać wymagane odpowiedzi, aby mieć wpływ na użytkowników korzystających z żądanego działania.
Tożsamość marki. Spójne stosowanie kolorów w materiałach brandingowych pomaga ustanowić silnym tożsamości wizualnej i zwiększyć rozpoznawę marki. Użytkownicy często kojarzą określone kolory z określonymi kolorami i kojarzą swoje doświadczenie z lojalnością i zaufaniem do marki.
Hierarchia wizualna. Kolor może służyć do ustanawiania hierarchii wizualnej i organizowania informacji. Przypisywanie różnych kolorów do różnych elementów w zależności od ich znaczenia lub kategorii w celu utworzenia jasnej hierarchii i ułatwienia nawigacji oraz łatwiejszego zrozumienia.
Bliskość
Elementy umieszczone bliżej siebie wydają się bardziej powiązane. Aranżując układ elementów upewnij się, aby była wyraźna różnica odległości pomiędzy elementami blisko powiązanymi, a tymi, które nie są powiązane.
Ta zasada oceny sugeruje, że odległości pomiędzy elementami graficznymi mają wpływ na to, w jaki sposób są one przetwarzane i uporządkowane, oraz nakreśla znaczenie tej różnicy w efektywnym przetwarzaniu i znajomości języka wizualnego.
Zgrupuj elementy pokrewne, które są funkcjonalnymi podobnymi elementami lub należą do tej samej kategorii hierarchicznej. Na przykład przyciski wykonywanie podobnych akcji lub opcji w menu rozwijanych powinny być blisko ze sobą zgrupowane, aby wskazać ich skojarzenie. Na pasku nawigacyjnym elementy menu, w których jest blisko odstępowany, sugerowany jest powiązany zestaw opcji, a większy zestaw opcji między kategoriami menu znacznie je rozróżnia. Powiązane elementy formularza powinny być grupowane (na przykład pola adresu w sekcji o nazwie „adres”).
Poprawianie czytelności w interfejsach tekstu przez przerwy między akapitami, zdaniami i słowami. Mniejsze przestrzenie w akapicie wskazują na logiczne połączenie lub konsekwencje przemyślanej decyzji, a większe połączenie oznacza przejście lub przerwę w zawartości. Ta metoda pozwala na efektywne zrozumienie informacji tekstowych.
Aby uniknąć nieporozumień, należy się upewnić, że istnieje rozróżnienie między elementami powiązanymi i niepowiązanymi. Przestrzeń na podstawie rozmiaru elementu może pomóc w spójnym określeniu odpowiednich przyczyn.
Okrąg po lewej jest bardziej powiązany z trójkątem niż z drugim okręgiem.
Przestrzeń między akapitami jest mniejsza niż między sekcjami.
Ciągłość
Elementy uporządkowane w linii prostej lub zakrzywionej są postrzegane jako elementy bardziej powiązane niż elementy nie wykazujące takiego układu.
Rozmieść elementy interfejsu, takie jak menu nawigacyjne lub kroki procesu, wzdłuż wiersza lub łuka, aby sekwencja lub skrót. Ten układ ułatwia użytkownikom zrozumienie relacji między elementami i zrozumienie logicznego przepływu informacji i akcji.
Umieść elementy powiązane, takie jak pole wyboru lub opcje radiowe, albo elementy listy punktowanej, wzdłuż linii, aby wizualnie grupować je razem. To rozsyłanie sugeruje użytkowników, że te elementy mają wspólne przeznaczenie lub należą do tej samej kategorii, co ułatwia nawigację i zrozumienie. Jeśli podobne elementy są wcinane do wewnątrz, taka pozycja elementu jest korelowana z niższym rozmieszczeniem w hierarchii wizualnej.
Użyj linii lub łuków, aby przyciągać uwagę użytkowników i tworzyć wizualne ścieżki przez interfejs. Na przykład strzałka może kierować okiem użytkownika z jednej sekcji zawartości do innej po określonej ścieżki, wskazujące połączenie lub błąd. Ta metoda ułatwia użytkownikom bardziej intuicyjne przechodzenie do interfejsu i zachęca do eksploracji.
Rozmieść kluczowe elementy interfejsu, takie jak przyciski wezwania do działania lub ważne informacje, w widocznym kierunku, aby zwrócić uwagę użytkowników i utworzyć punkty skupienia uwagi użytkownika. Na przykład wzorzec Fluent MessageBar jest często wyświetlany jako widoczny komunikat z równoważeniem w obszarze zawartości wraz z komunikatem po lewej stronie, co prowadzi do przycisków wywołanie akcji po prawej stronie. W tej strategii układu elementy te są wyróżniane i wyróżniane. Zwiększa to prawdopodobieństwo interakcji.
Linie proste/zakrzywione wywierają silniejsze wrażenie niż kolory.
Kreatory używają ciągłości, by pokazać użytkownikom, że kroki są połączone bez obciążania ich zbyt dużą ilością informacji.
Zamknięcie
Umysł ludzki ma tendencję do spostrzegania całego formularze, rozpoznaje pojedynczy znany wzorzec na poszczególnych obiektach, nawet jeśli brakuje pewnych informacji.
Zapewnianie wizualnej spójności elementów projektowych (takich jak kształty, kolory i rozmiary) w celu pomocy użytkownikom w odnajdowaniu wzorców, których powinni się spodziewać, nawet jeśli są prezentowane w różnych kontekstach.
Użyj prostych i znanych ikon lub symboli, które umożliwią użytkownikom wypełnianie brakujących informacji zgodnie z poprzednimi doświadczeniami. Na przykład ikona powiększania jest często skojarzona z funkcjami wyszukiwania, nawet bez tekstu dołączonego do produktu.
Stopniowe przedstawianie użytkownikom informacji (nazywane również stopniowym ujawnianiem). Zezwalaj użytkownikom na wypełnianie brakujących szczegółów w przypadku interakcji z interfejsem. W związku z tym użytkownik nie będzie poszukiwał zbyt wielu informacji i nie będzie ich już brakować.
Tworzenie spójnego wzorców wizualnej, które zachęcają użytkowników do insektowania obiektów jako całych obiektów. Na przykład grupowanie powiązanych elementów może pomóc użytkownikom w zrozumieniu ich relacji i celu. Wizualne rozmieszczenie elementów przy użyciu zasad Gestalt w celu wskazania segmentacji. Efektywne korzystanie z miejsca pozwala na tworzenie sensu zamknięcia się na elementach interfejsu.
Animacje i przejścia przyjmą uwagę użytkowników i będą wymagać od nich zmian w stanach interfejsu. Bezproblemowe przejście między różnymi stanami lub ekranami może pomóc użytkownikom w zrozumieniu relacji między elementami i wypełnieniu brakujących informacji. Wiele nowoczesnych formantów dostępnych w Power Apps domyślnie wyświetla animacje.
Najpierw rozpoznawany jest kwadrat, a potem niepełne okręgi.
Animacja z karty do modalności pomaga w zamknięciu przestrzeni między oboma i w powiązaniu ich ze sobą.
Punkt centralny
Punkt skupienia to element projektowy, który natychmiast poświęci uwagi widza. Najlepiej jest, aby projekt zawierał sekwencję punktów skupienia, zazwyczaj od jednego do trzech, tak aby poprowadził użytkownika przez zawartość w celowo przemyślany sposób.
Zaprojektuj interfejs w jasnej hierarchii informacji, w której najważniejsze treści lub działania są podkreślane jako punkty skupienia. Aby wyróżnić te elementy, należy użyć elementów kluczowych dla elementów kluczowych, takich jak rozmiar, kolor, kontrast i kolor. Prezentuj informacje, zaczynając od najważniejszych punktów skupienia. Ta technika pomaga użytkownikom szybko zidentyfikować najbardziej odpowiednią zawartość lub akcje i prowadzi je przez interfejs w kolejności logicznej.
Umieść w widocznym miejscu w interfejsie podstawowe przyciski typu wywołania akcji, co sprawia, że będą widoczne. Te przyciski powinny być wizualnie inne niż inne elementy i mają strategiczne położenie, aby kierować użytkowników do żądanych działań, takich jak zakup lub rejestracja. Język projektowy Fluent zaleca użycie koloru motywu marki dla tych elementów.
Skutecznie użyj kontrastu, aby utworzyć punkty skupienia. Elementy wyróżniane z powodu różnic w kolorach, jasności, rozmiarach i typografiach przyciągają uwagę użytkownika. Kontrastujące ze strony niejszej elementy, takie jak tekst i elementy marek, tworzą bardziej widoczny punkt skupiony.
Aby wyróżnić punkty skupienia, należy użyć przestrzeni pustej i ujemnej, tworząc wizualne oddzielenie od elementów otaczających. Ta metoda pomaga zapobiec rozpraszaniu uwagi i umożliwia użytkownikom skupienie się na najważniejszej zawartości lub działaniach. Elementy interfejsu użytkownika, które mają więcej skupienia i skupienia, a następnie odebrane jako elementy o większym znaczeniu niż elementy o mniejszej przestrzeni.
Zachować spójność używania punktów skupienia w całym interfejsie, aby zapewnić spójne korzystanie z nich. Dzięki ustawieniu wzorca punktów skupienia można kierować oczekiwania użytkowników na temat hierarchii, która musi być zrozumiała dla poruszania się po interfejsie, i pomóc im w znajdowanie ważnych informacji i działań na różnych ekranach lub stronach.
Należy pamiętać, że ważne jest, aby zachować równowagę i nie chronić użytkowników ze zbyt wieloma konkurującymi punktami.
Oko użytkownika jest najpierw przyciągane przez niebieski kwadrat.
Elementy, takie jak wywołania do akcji, mogą być punktami skupienia, by zapewnić, że użytkownicy je zauważą.
Podobieństwo
Obiekty widoczne jako podobne są często przypominane jako grupy lub wzorzec, przez co użytkownicy oczekują, że będą mieli taką samą funkcjonalność.
Zapewnić, że elementy interfejsu o podobnych funkcjach mają spójne style wizualne. Na przykład przyciski wykonywanie podobnych lub tak samo średnich akcji powinny mieć ten sam kolor, kształty i rozmiar, co w przypadku wykonywania podobnych lub tak samo ważonych akcji. Należy też dopilnować, aby elementy, które znacząco różnią się w funkcjonalności, zostały w sposób czytelny rozróżniowane. Obie metody zapobiegają pomyłkom i frustracji przez utworzenie czytelnych wskaźników wizualnej.
Spójna ikonografia i symbole reprezentują podobne akcje lub funkcje w interfejsie. Użytkownicy, którzy przeszli, mają skojarzyć znane ikony z konkretnymi funkcjami opartymi na przeszłości. Aby spełnić te oczekiwania, należy użyć metadanych, które są rozpoznawane względem ikon. Zapewnić spójność stylu ikon za pomocą ikon z tego samego zestawu, na przykład biblioteki ikonografia interfejsu użytkownika Fluent.
Kodowanie kolorów można stosować do oznaczania podobieństw między elementami lub kategoriami. Na przykład użycie tego samego koloru do wyróżnienia pokrewnych elementów na liście lub grupowanie na wykresie podobnych punktów danych pozwala poprawić wygląd i zwiększyć bezpieczeństwo użytkowników.
Zachowanie jednolitych elementów w typografiach i stylu tekstu dla elementów służącym do celów analogicznych. Spójne style czcionki, rozmiary i formatowanie przyczynią się do spójnego języka wizualnego, co pozwala użytkownikom na rozpoznawanie pokrewnej treści i działań.
Zawierają spójne interaktywne opinie na temat podobnych akcji w interfejsie. Po umieszczeniu kursora na przycisku lub kliknięciu łącza użytkownicy powinni oczekiwać jednolitych odpowiedzi, które będą skojarzenie między podobieństwem graficznym a funkcjonalnym. Mimo że platforma zapewnia najbardziej interaktywny sposób działania (na przykład wartości kolorów po umieszczeniu wskaźnika myszy i naciśnięciu stanu), należy pamiętać o tej zasadzie podczas tworzenia elementów składowych od podstaw lub ręcznego implementowania stanów opinii.
Upewnij się, że podobieństwa wizualne są uzupełniane przez inne wskazówki, takie jak etykiety tekstowe lub opinie dźwiękowe, aby uwzględnić potrzeby i preferencje użytkowników. Skuteczna komunikacja funkcji dzięki wielu testom zwiększającym funkcjonalność i zwiększającą czytelność.
Elementy są grupowane według kształtu i koloru, a nie układu (kolumny i rzędy).
Jeśli jedna karta na pulpicie nawigacyjnym otwiera się jako panel boczny, użytkownicy oczekują, że wszystkie będą się tak otwierać.
Ilustracja i tło
Osoby, które ponownie przejmują elementy jako „ilustracja” (co się dzieje na froncie) lub „tło” (czyli te, które są przenoszone w tle). Dlatego kontekst wpływa na bezpieczeństwo. Ma to decydujące znaczenie dla zapewnienia rozróżnienia ważnych elementów z tle. Biały znak (ujemna przestrzeń) zwiększa zrozumienie zawartości.
Aby utworzyć czytelną relację między ilustracjami i tłem, należy użyć kontrastu w kolorze, rozmiarze lub stylu wizualnego. Ważne elementy powinny być w widocznym miejscu w tle, dzięki czemu można je łatwo rozróżniać i skutecznie przyciągać uwagę użytkowników. Powierzchnie o jaśniejszych kolorach i bardziej kontrastujące elementy wizualne w tle mają większy efekt. Ta metoda zmniejsza specyfikację wizualną i ułatwia użytkownikom identyfikowanie kluczowych informacji. Zapewnić odpowiedni kontrast między elementami obrazu i tle, aby poprawić czytelność użytkowników dzięki wizualnej kontroli nad treścią, co poprawi ich dostęp do zawartości i zrozumienie jej.
Zachować spójność rozmieszczenia i stylu elementów interfejsu, a relacja ilustracji z elementami pozwala zrozumieć strukturę interfejsu i pozwala użytkownikom zrozumieć strukturę interfejsu. Spójne stosowanie wzorców projektowych i elementów graficznych umożliwia użytkownikom szybkie projektowanie między elementami i elementami tle na różnych ekranach i w kontekstach. Niespójności w projekcie mogą zakłócić modele modeli użytkowników i uniemożliwić ich efektywne przechodzenie do interfejsu.
Niski kontrast i minimalna przestrzeń ujemna przyczyniają się do postrzegania białych prostokątów jako części tła.
Obraz boczny musi być w tle, by użytkownicy mogli skupić się na ważnej zawartości.
Grupowanie
Elementy, które mają być odebrane jako grupy, jeśli mają one jednoznacznie określoną granicę.
Grupowanie powiązanych elementów w kontenerach graficznych, takich jak pola, karty lub elementy organizacyjne, ułatwia użytkownikom grupowanie ich jako jednostek pokrewnych. W tym podejściach zawartość i funkcjonalność jest uporządkowana wizualnie, co ułatwia identyfikowanie i przetwarzanie informacji. Jasne grupowanie pomaga uniknąć nieuprawniania interfejsu i ograniczenia nieporozumień lub nieefektywności. Grupowanie jest również skuteczne, gdy nie jest dostępna opcja; Na przykład pasek komunikatów obejmuje wiele formantów na ekranie, które są odbierane jako powiązane z jednostką z powodu zdjęcia i kolorów w tle.
Utrzymywanie spójnego stylu wizualnego dla pogrupowanych elementów poprawia połączenie i poprawia czytelność. Używanie podobnych kolorów, czcionek i ikon tych elementów podkreśla fakt, że należą do tej samej kategorii lub funkcji. Niespójności w prezentacji wizualnej mogą spowodować poważne grupowanie i spowodować, że użytkownicy relacje między elementami lub błędnie interpretują ich znaczenie lub przeznaczenie.
Dodawanie ramek dookoła elementu lub grupy elementów tworzy rozdzielenie od otaczających elementów.
Dzielenie zawartości pomaga użytkownikom zrozumieć, że temat jest przełączany.
Sygnały a zakłócenia
Wskazówki wizualne, takie jak linie, kontrast i rozmieszczenie, są używane do wskazywania użytkownikom, że coś jest ważne. Jednak zbyt wiele sygnałów lub sygnały wyróżniających informacje, które nie są ważne, szybko stają się zakłóceniami.
Stosuj główne punkty skupienia (takie jak pogrubiony tekst, kontrastujące kolory lub ikony) w celu istotnej informacji lub działań dla użytkowników. Na przykład wyróżnij je ważnymi przyciskami lub nagłówkami za pomocą paska kolorów.
Należy wybiórczo wyróżnić, aby uniknąć zbyt dużej większości informacji dla użytkowników. Elementy, które są w pełni ważne dla zadania lub celu użytkownika. Zbyt wiele sygnały może tworzyć nieporozumienia i trudno użytkownikom ustalać priorytety. Zidentyfikuj najważniejsze dla użytkownika informacje i wyróżnij je w odpowiedni sposób. Zazwyczaj zaleca się użycie tylko jednego przycisku wezwania do akcji na stronie. W formularzach wyróżnij wymagane pola, aby poświęcić uwagę użytkownika. Dzięki temu użytkownicy nie utracą niepotrzebnych szczegółów i będą się koncentrować na najważniejszych informacjach.
Upewnij się, że sygnały są zgodne ze spójnym językiem wizualnym w całym interfejsie, aby służyć jako wskazówka, która pomaga użytkownikom rozpoznawać wzorce i intuicyjnie rozumieć znaczenie różnych sygnałów.
Dostosowywanie sygnału do kontekstu i potrzeb użytkownika. Na przykład jeśli użytkownicy skanowania interfejsu, który przedstawia określone zadania, stan krytyczny i elementy, które można czynność jednoznacznie przyciągać uwagę. Sygnały kontekstowe ułatwiają użytkownikom szybkie znajdowanie odpowiednich informacji, bez rozpraszania ich przez niepowiązane szczegóły.
Sygnały pomagają prowadzić użytkowników poprzez zawartość i przekazywać to, co jest ważne.
Zakłócenia wizualne wprowadzają niepewność i mają efekt przeciwny do sygnałów.
Ułatwienia Power Platform
W aplikacjach kanwy można używać kontenerów układów do grupowania elementów pokrewnych. Najlepiej jest uporządkować wszystkie elementy stron w kontenerach, a także kontenery z układem mogą efektywnie oddzielać kontenery podrzędne, oddzielając właściwość.
W formularzach aplikacji opartych na modelu sekcje mogą służyć do grupowania pokrewnych pól lub elementów.
Implementacja spójności wspólnych elementów niestandardowych z ponownie używanymi składnikami niestandardowymi.
W aplikacjach kanwy nowoczesne formanty są zintegrowane w ich uchwyceniu. W szczególności kontrolki przycisk i odznaka oferują różne opcje we właściwościach stylu, co powoduje skuteczne sygnały. Przestrzegaj najlepszych rozwiązań dla poszczególnych składników i zastosuj wybiórczo, aby zapewnić optymalną komunikację.
Informacje pokrewne
- Zasady grupowania
- Psychologia kształtu
- Stosowanie efektu estetyczno-użytecznego
- Rampa przestrzni systemowego projektu interfejsu użytkownika Fluent