Wskazówki dotyczące projektowania interakcji widżetu

Ten artykuł zawiera szczegółowe wskazówki dotyczące projektowania interakcji dla widżetów Windows.

Widżet powinien być czytelny i skoncentrowany i powinien reprezentować jeden aspekt podstawowego celu aplikacji. Widżety mogą oferować jedno lub więcej wezwań do działania. Gdy użytkownik kliknie wezwanie do działania, widżet powinien uruchomić skojarzoną aplikację lub witrynę internetową, zamiast wykonywać działanie bezpośrednio w samym widżecie. Widżet ma tylko jedną stronę główną, która może zawierać wiele interakcji. Kliknięcie elementu w widżecie nigdy nie powinno spowodować, że nastąpi przejście do zupełnie innego widoku widżetu. Na przykład w widżecie pogody możesz wyświetlać pogodę na kilka dni, ale kliknięcie jednego z tych dni nie spowoduje rozwinięcia szczegółów bezpośrednio w widżecie, lecz zamiast tego otworzy aplikację lub witrynę internetową.

Poniżej przedstawiono maksymalną liczbę punktów dotykowych zalecanych dla każdego obsługiwanego rozmiaru widżetu.

Rozmiar widżetu Maksymalna liczba punktów dotykowych
mały 1
nośnik 3
duży 4

Następujące elementy nawigacji nie są obsługiwane w widżetach Windows:

  • Tabele przestawne nie będą obsługiwane w widżetach
  • Strony L2 nie będą obsługiwane w widżetach
  • Przewijanie w pionie lub w poziomie nie będzie obsługiwane w ramach widżetów

Containers

Na poniższych obrazach przedstawiono przykład użycia elementów kontenera w szablonie widżetu. Kontenery grupują elementy wizualne w kolumny i wiersze, aby utworzyć hierarchiczną strukturę siatki.

Cztery obrazy widżetów ilustrujących kontenery. Widżety na obrazach mają elementy podzielone na wiersze i kolumny, aby zapewnić hierarchiczną strukturę siatki.

Poniższe obrazy przedstawiają przykładowe zastosowania elementów łączy obrazów w szablonie widżetu.

Dwa obrazy widżetów ilustrujących linki do obrazów. Obrazy są rozmieszczane w kolumnach i wierszach tworzących siatkę.

Pagination

Na poniższych obrazach przedstawiono przykłady stronicowania w szablonie widżetu. Kontrolki stronicowania można wyrównać w poziomie lub w pionie. Strzałki nawigacji są wyświetlane w odpowiedzi na wskaźnik myszy.

Ten zestaw dwóch obrazów przedstawia poziome stronicowanie. Na pierwszym obrazie kolumna kropek jest wyrównana wzdłuż prawej strony. Jedna kropka jest większa, aby wskazać aktualnie aktywną stronę. Na drugim obrazie kursor myszy nad strzałką wskazującą w dół w dolnej części widżetu, która umożliwia użytkownikowi przejście do następnej strony. W górnej części widżetu znajduje się zgodna strzałka wskazująca w górę, aby przejść do poprzedniej strony.

Ten zestaw dwóch obrazów przedstawia stronicowanie pionowe. Na pierwszym obrazie wiersz kropek jest wyrównany wzdłuż dolnej części. Jedna kropka jest większa, aby wskazać aktualnie aktywną stronę. Na drugim obrazie kursor myszy nad strzałką wskazującą prawo po prawej stronie widżetu, która umożliwia użytkownikowi przejście do następnej strony. Po lewej stronie widżetu znajduje się zgodna strzałka wskazująca lewą stronę, aby przejść do poprzedniej strony.

Te dwa obrazy pokazują, jak kontrolki stronicowania wyglądają, gdy widżet ma tło obrazu.

Na poniższych obrazach przedstawiono przykład hiperlinków w szablonie widżetu.

Dwa obrazy widżetów ilustrujących hiperlinki. Pierwszy obraz przedstawia hiperlinkowy ciąg tekstu. Tekst jest zwykły. Na drugim obrazie kursor myszy unosi się nad hiperlinkiem, co powoduje podkreślenie tekstu.

Obraz przedstawiający hiperłącze wyśrodkowane na dole widżetu, tuż nad poziomym rzędem kropek paginacji. Czerwony znak X wskazuje, że kropki paginacji i hiperłącze nie powinny znajdować się w tej samej przestrzeni. Po prawej stronie inny obraz pokazuje hiperłącze na dole, ale kropki paginacji są ułożone pionowo w kolumnie po prawej stronie. Zielony znacznik wyboru wskazuje, że takie rozmieszczenie tych dwóch elementów jest poprawne.

Dwa obrazy widżetów ilustrujących menu rozwijane. Na lewym obrazie menu rozwijane jest zwinięte. Na prawym obrazie lista rozwijana jest rozwinięta i rozciąga się na obramowanie widżetu

Widżety mogą tymczasowo wykraczać poza rozmiar widżetu, jeśli użytkownik wchodzi w interakcję z menu lub listą rozwijaną. Zachowanie menu powinno być lekkie i zamknij menu, jeśli użytkownik kliknie poza obszarem menu/listy rozwijanej.

  • Last updated on