Sprawdzone metody dotyczące kafelków

Grafika na czarnym tle

Projektowanie na czarnym tle jest kluczowe w przypadku Wear OS z dwóch głównych powodów:

  • Efektywny pobór energii: każdy podświetlony piksel na ekranie zużywa energię. Używanie czarnego tła minimalizuje liczbę aktywnych pikseli, wydłużając w ten sposób czas pracy na baterii.
  • Estetyka bez szwów: czarne tło pomaga wizualnie zmniejszyć opaskę zegarka, tworząc iluzję ciągłej powierzchni, która rozciąga się do krawędzi urządzenia. Umieszczenie elementów interfejsu w tym obszarze dodatkowo wzmacnia ten efekt.

Zrób to

Zawsze ustawiaj kolor tła na czarny.

Nie rób tego

Nie ustawiaj tła jako obrazu o pełnym spadzie ani bloku koloru.

Uwzględnij tylko niezbędne elementy

Gdy opcja jest włączona (np. za pomocą ProtoLayout Material3 PrimaryLayout), Wear OS automatycznie wyświetla stałą ikonę aplikacji, która pojawia się, gdy użytkownik przewija kafelki. Ikona aplikacji nie powinna być zaprojektowana ani dodana jako część kafelka.

Jeśli na kafelku masz dynamiczne motywy, upewnij się, że ikona aplikacji jest monochromatyczna. Zapoznaj się z wytycznymi dotyczącymi ikony aplikacji na Androida, aby dowiedzieć się, jak utworzyć ikonę aplikacji dla swojej marki.

Zrób to

Wear OS może wyświetlić ikonę aplikacji automatycznie, gdy użytkownik przewija karuzel kafelków. Nie musisz umieszczać ikony aplikacji w projekcie kafelka.

Nie rób tego

Nie dodawaj ikony aplikacji w ramach projektu kafelka, ponieważ może ona być widoczna dwukrotnie lub nałożona na siebie, jeśli jest też wyświetlana na poziomie systemu.

Ukrywanie tytułów aplikacji w celu zapewnienia minimalnych celów dotknięcia

Aby zapewnić wystarczająco dużo miejsca na elementy interaktywne na mniejszych ekranach, tytuł aplikacji może być ukryty, gdy kafelek używa 2 wierszy (i sekcji dolnej). Dzięki temu wiersze będą wystarczająco wysokie (co najmniej 48 dp). Tytuł może się ponownie pojawić na większych ekranach (225 dp+).

Zrób to

Na małych ekranach tytuł aplikacji jest ukryty, aby zapewnić 2 wierszom minimalną wysokość i obszar dotykowy o wysokości 48 dp.

Nie rób tego

Jeśli nie ukryjesz tytułu aplikacji na małym ekranie i użyjesz 2 wierszy, wysokość komponentów nie będzie zgodna z naszymi standardami ułatwień dostępu i będzie mniejsza niż minimalny rozmiar obszaru dotykowego. W tym przykładzie miejsce na przyciski jest mniejsze niż 48 dp, więc jest przycięte.

Wybierz jeden podstawowy przypadek użycia, który chcesz wyróżnić

Aby użytkownicy wiedzieli, co mają zrobić z każdą kartą (czy mają otworzyć aplikację, rozpocząć działanie czy dowiedzieć się więcej), układ musi zawierać co najmniej 1 element interaktywny.

Zrób to

Ta konkretna karta jest skuteczna, ponieważ zawiera niewielką kolekcję opcji, a następnie umożliwia wyświetlenie większej liczby opcji

Nie rób tego

To rozwiązanie jest mniej przydatne dla użytkownika, ponieważ powoduje paraliż decyzyjny z powodu zbyt dużej liczby opcji.

Uwzględnij co najmniej 1 kontener.

Każda karta w aplikacji musi zawierać co najmniej 1 element kontenera i być w pełni klikalna. Musi prowadzić do odpowiedniego ekranu w aplikacji. Informacje na karcie, niezależnie od tego, czy znajdują się w kontenerze, czy są prezentowane osobno, muszą wyraźnie wskazywać powiązane treści lub dostępną czynność.

Jeśli używasz przycisków, powinny one być zgodne ze standardowymi konwencjami projektowania i wyraźnie wskazywać swoją funkcję.

Zrób to

Ten kafelek działa dobrze, ponieważ użytkownik może podjąć działanie w ramach każdej z dostępnych funkcji, ponieważ ma do dyspozycji wyraźne opcje dotknięcia

Nie rób tego

Ten kafelek jest mniej skuteczny, ponieważ nie informuje wyraźnie, że użytkownik może dotknąć treści, aby wyświetlić dodatkowe informacje

Ułatwianie zrozumienia działań

Na zegarku nie ma zbyt wiele miejsca na przekazanie znaczenia, dlatego najbardziej skuteczne karty mają łatwo przewidywalne komponenty interaktywne.

Zrób to

Skuteczny element typu TIle wykorzystuje całą dostępną przestrzeń, aby wyraźnie przedstawić wynik każdego działania.

Nie rób tego

Działania na tym kafelku są niejasne – dokąd prowadzi użytkownika kontener z okładką albumu i czy różni się to od przycisku „Odtwórz”?

Wizualizacja priorytetów działań

Aby pomóc użytkownikom zrozumieć, które działanie jest najważniejsze na kafelku, interaktywne kontenery powinny być wizualnie wyróżnione.

  • Używaj kolorów podstawowych w przyciskach głównych.
  • Używaj kolorów dodatkowych lub trzeciorzędnych do dodatkowych działań.

Zrób to

Ta karta wykorzystuje połączenie wypełnień (z rolami kolorów podstawowego i dodatkowego) z przezroczystym przyciskiem w dolnej części, który wykorzystuje styl tonalnego wypełnienia.

Nie rób tego

Ta karta zawiera zbyt wiele przycisków w wypełnionym stylu, które dodatkowo używają koloru podstawowego

Uprość kod, korzystając z mniejszej liczby kontenerów.

W przypadku kafelków należy unikać używania więcej niż jednego interaktywnego komponentu do wywołania określonego działania. Zamiast tego należy uprościć ogólny układ, umieszczając w nim mniej kontenerów.

Zrób to

Ta karta używa kilku kontenerów, a każdy z nich działa jak przycisk do wykonywania określonych działań, takich jak uruchamianie minutnika lub tworzenie nowego.

Nie rób tego

Użycie 4 kontenerów jest tu niepotrzebne, ponieważ wszystkie informacje będą się wyświetlać w tej samej lokalizacji.

Używanie kontenerów do celów funkcjonalnych

Aby użytkownicy wiedzieli, co robi każdy element w płytce, nie zalecamy używania kontenerów do celów dekoracyjnych ani strukturalnych, aby uniknąć kliknięć, które nic nie robią.

Zrób to

To rozwiązanie działa, ponieważ jedynym działaniem kafelka jest proces tworzenia, a pozostałe treści są na czarnym tle.

Nie rób tego

Ta karta jest bardziej myląca, ponieważ wydaje się, że użytkownik może wchodzić w interakcję ze wszystkimi kontenerami.

wyświetlać wykresy i diagramy w uproszczony sposób.

W przypadku projektowania aplikacji na Wear OS najważniejsza jest czytelność. Ze względu na ograniczony czas wyświetlania (około 7 sekund) należy umieścić najważniejsze informacje w przejrzystym formacie, który jest łatwy do zrozumienia na pierwszy rzut oka.

Pamiętaj, że zegarek uzupełnia funkcje telefonu, zapewniając szybki dostęp do najważniejszych informacji.

Zrób to

wyświetlać szybkie, łatwe do odczytania informacje liczbowe lub statystyczne i umożliwiać użytkownikowi kliknięcie, aby w razie potrzeby wyświetlić więcej informacji w aplikacji;

Nie rób tego

wyświetlać szczegółowe informacje liczbowe lub statystyczne na kafelku.