Środowisko na komputery stacjonarne jest od początku adaptacyjne i obsługuje różne rozmiary na podłączonych wyświetlaczach lub w oknach. Obsługuj pełną gamę urządzeń z Androidem, tworząc adaptacyjny interfejs. Układy adaptacyjne są niezbędne w przypadku komputerów, ponieważ umożliwiają użytkownikom płynną zmianę rozmiaru okien aplikacji.
Aby przygotować aplikację do działania na komputerze, zacznij od dostosowania interfejsu, a następnie przejdź do projektowania interakcji związanych z gęstością i danymi wejściowymi. Więcej informacji znajdziesz w artykule Układy adaptacyjne. Aby poćwiczyć w laboratorium projektowym, zapoznaj się z laboratorium projektowania adaptacyjnego.
Myśl w kontekście paneli
Zastosuj układ oparty na panelach, używając grupowania i zawierania. Treści można porządkować za pomocą kontenerów wizualnych lub przez niejawne grupowanie z użyciem białych znaków. Te panele są elastyczne, ponieważ można je rozwijać, ograniczać, ukrywać, przenosić lub wyświetlać jako wyskakujące okienka. Projektowanie z użyciem paneli upraszcza proces tworzenia spójnych interfejsów na różnych urządzeniach mobilnych i może być zintegrowane z obecnymi siatkami, aby usprawnić złożone wyrównania układu.
Tak
Waga
Duże ekrany zapewniają więcej miejsca na treści, ale należy wziąć pod uwagę dodatkową przestrzeń i czynniki ergonomiczne, takie jak odległość od ekranu. Typografia powinna być nieco powiększona, aby zapewnić komfort użytkownikom, którzy mogą być dalej lub pisać na klawiaturze.
Elementy interfejsu i tekst są skalowane na rozszerzonych i podłączonych wyświetlaczach i mogą mieć różne skale ze względu na rozdzielczość ekranu.
Zastosuj o 1–2 kroki większy rozmiar w dotychczasowych projektach skali typograficznej lub rozważ wdrożenie specjalistycznej skali typograficznej przeznaczonej na komputery i większe wyświetlacze. W projektach można wprowadzać subiektywne zmiany, aby uzyskać lepszą jakość redakcyjną.
Obraz jest też powiększany i zajmuje cały ekran. Dzięki temu użytkownik może zobaczyć roślinę w większej liczbie szczegółów, ale nie wykorzystuje to efektywnie przestrzeni. Pamiętaj o tym podczas tworzenia struktury elementów interfejsu.
Treści i elementy interfejsu
Gdy treści są już pogrupowane i skalowane, niektóre elementy interfejsu mogą się przesuwać lub aktualizować, aby lepiej pasować do punktów przerwania.
W każdym panelu treści zdecyduj, czy i jak ma się on dostosowywać. Sprawdź samą treść. Czy po zmianie wiersza listy na kartę treść traci skuteczność interakcji i możliwość szybkiego przeglądania? Komponenty mogą zachowywać się inaczej w różnych punktach przerwania. Możesz dostosować ich szerokość lub widoczność, a nawet przełączać komponenty.
Określ maksymalną szerokość każdego elementu interfejsu i tekstu w panelu. Elementy interfejsu nie powinny rozciągać się na całą szerokość ani być zniekształcone. Ustaw maksymalne dopełnienia i marginesy w okienkach. Tekst powinien być łatwy do czytania dzięki ograniczeniu długości wierszy. Krótkie teksty powinny mieć około 60 znaków, a dłuższe mogą być dłuższe.
Tak
Stosuj stopniowe odkrywanie bez utraty danych. Czy po zwiększeniu rozmiaru okna może się pojawić więcej treści? Zastanów się, czy dodatkowe treści zwiększają produktywność przy mniejszej liczbie kliknięć, czy też wprowadzają zamieszanie.
Układ treści w każdym panelu może się zmieniać w zależności od treści, poprzez przenoszenie do różnych kolumn i struktur siatki. Na przykład siatka pionowa z karuzelą może zostać zaktualizowana do siatki murarskiej z karuzelą funkcji. Rozważ zmianę pionową w przypadku elementów i połącz ją z ograniczeniami oraz zmianami prezentacji. W zależności od sposobu korzystania z treści możesz nie chcieć przesuwać takich komponentów.
Zezwól użytkownikowi na dostosowanie układu do jego preferencji, aby zapewnić maksymalną czytelność i produktywność.
Nawigacja
Po dostosowaniu treści i elementów interfejsu zdecyduj, jak panele treści będą wchodzić ze sobą w interakcje oraz jak będą powiązane z hierarchią nawigacji. Zamiast klikać, aby przejść do szczegółowych treści, możesz wykorzystać dodatkową przestrzeń na ekranie, aby wyświetlać szczegóły i treści pomocnicze obok siebie.
- Jeśli używasz paska nawigacyjnego, dolny pasek powinien zmienić się w pasek nawigacyjny z boku ekranu, aby zwiększyć ergonomię. Nie rozciągaj paska nawigacyjnego u dołu.
- W przypadku nawigacji dodatkowej, takiej jak karty, warto ustawić maksymalną szerokość, aby ułatwić precyzyjne poruszanie się po niej.
- Paski aplikacji mogą być też przypięte do odpowiedniego panelu treści, ale należy uważać, aby nie pomylić hierarchii nawigacji.
Gęstość
W przypadku komputerów stacjonarnych gęstość interakcji i gęstość wizualna mogą się zmieniać ze względu na precyzję wprowadzania danych i rozmiar ekranu.
- Możesz zwiększyć gęstość elementów wizualnych, takich jak dane w tabeli, bez przytłaczania użytkownika w porównaniu z kompaktowym układem telefonu. Gęstość treści powinna być opcjonalna, a skalowanie tekstu w układzie powinno być zawsze możliwe. Nie ustawiaj na stałe rozmiarów czcionek.
- Komponenty powinny mieć dokładniejszy cel kliknięcia. Wewnętrzne obszary kliknięcia wokół komponentów mogą prowadzić do przypadkowych kliknięć.
Wejścia
Dodatkowe dane wejściowe oznaczają dodatkowe wzorce interakcji dla użytkowników.
Gdy użytkownik ma mysz i klawiaturę, aplikacja musi uwzględniać stan najechania kursorem i stan aktywności.
- Dodaj stany najechania w przypadku urządzeń wskazujących, takich jak mysz i rysik.
- Rejestruj stany zaznaczenia elementów, gdy użytkownicy poruszają się po nich za pomocą klawisza Tab w celu ułatwienia dostępu.
- Uwzględnij stany kursora, ponieważ może on również informować użytkownika o interakcji i stanie aplikacji.
Dodatkowe stany mogą zwiększyć wydajność.
- Funkcja kliknięcia prawym przyciskiem myszy może obejmować menu kontekstowe umożliwiające szybki dostęp do funkcji.
- Etykietki po najechaniu kursorem mogą pomóc użytkownikom w rozpoczęciu korzystania z usługi.
- Skróty klawiszowe pomagają zaawansowanym użytkownikom zwiększyć produktywność.
