Podstawy projektowania widżetów

Ten artykuł zawiera wskazówki dotyczące projektowania układu widżetu Windows, rozmiaru, koloru i typografii. W przykładach kart adaptacyjnych użyto kontrolek renderowanych przez hosta. Zastosuj te same zasady projektowania do widżetów internetowych HTML, ale zweryfikuj ich układ na hoście docelowym, zamiast polegać na podglądzie projektanta Adaptive Cards.

Rozmiary widżetów

Widżety obsługują małe, średnie i duże rozmiary, jak zadeklarowane w manifeście dostawcy. Projektuj z myślą o wszystkich trzech rozmiarach, gdy jest to praktyczne, i dostosuj zawartość do każdego rozmiaru. Duże widżety mogą wyświetlać więcej informacji, podczas gdy mniejsze widżety powinny skupić się na najważniejszej zawartości lub akcji. Obsługa wielu rozmiarów zapewnia użytkownikom elastyczność podczas rozmieszczania ich tablicy.

Małe i średnie rozmiary zapewniają lepszą widoczność, ponieważ są częściej eksponowane w dynamicznym strumieniu danych.

Mały

Zasady widżetów błyskawiczne i skoncentrowane stają się ważniejsze w decyzjach projektowych podejmowanych dla widżetu o małym rozmiarze. Widżet o małym rozmiarze nie powinien wymuszać wszystkich funkcji, które mogą wygodnie zmieścić się w dużym widżecie. Skoncentruj się na jednej interakcji użytkownika lub kluczowej informacji, które mogą być tutaj wyświetlane za pomocą jednego elementu do dotyku.

Średni

Widżet o średnim rozmiarze pozwala na więcej miejsca w porównaniu z małymi, dzięki czemu można uwzględnić więcej funkcji lub dodatkowych informacji. Średni widżet może również dostarczyć takie samo skoncentrowane wrażenie jak mały widżet, ale oferuje 2–3 elementy dotykowe.

Duży

Duże rozmiary umożliwiają prezentowanie większej ilości informacji, ale zawartość powinna być nadal skoncentrowana i łatwo zużywana. Alternatywnie, karta o dużym rozmiarze może wyróżniać jeden obraz lub temat i oferować bardziej wciągające doświadczenie. Duży rozmiar powinien mieć nie więcej niż 3-4 obszary dotykowe.

Kolor i motywy

Windows 11 obsługuje dwa tryby kolorów: jasny i ciemny. Każdy tryb składa się z zestawu neutralnych wartości kolorów, które są automatycznie dostosowywane w celu zapewnienia optymalnego kontrastu. Dla każdego obsługiwanego rozmiaru widżetu należy utworzyć oddzielne projekty dla motywów jasnych i ciemnych, dzięki czemu widżet bezproblemowo integruje się w ramach szerszego systemu operacyjnego i wybranego motywu użytkownika. Tło widżetu można dostosować, wybierając solidne jasne/ciemne tło, gradientową tonację lub tło graficzne.

Podczas wybierania kolorów tła, obrazów i zawartości upewnij się, że istnieje wystarczający kontrast kolorów, aby zapewnić czytelność i dostępność.

Wytyczne dotyczące ułatwień dostępu do zawartości internetowej (WCAG) na poziomie 2.0 AA wymagają współczynnika kontrastu co najmniej 4,5:1 dla zwykłego tekstu i wartości 3:1 w przypadku dużego tekstu. WCAG 2.1 wymaga współczynnika kontrastu co najmniej 3:1 dla składników grafiki i interfejsu użytkownika (takich jak obramowania formularzy). Poziom WCAG AAA wymaga współczynnika kontrastu co najmniej 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu. Duży tekst jest definiowany jako 14 punktów (zazwyczaj 18,66 pikseli) i pogrubiony lub większy lub 18 punktów (zazwyczaj 24 pikseli) lub większych.

Marginesy

Zilustrowany układ domyślny używa marginesu 16 pikseli i rezerwuje 48 pikseli na obszar atrybucji dla nagłówka. Zachowaj regularną zawartość poza tym obszarem podczas korzystania z nagłówka domyślnego. Jeśli dostosowywanie nagłówka jest obsługiwane, dostawca może ustawić header na null, aby rozszerzyć zawartość do regionu nagłówka, ale ten region nie jest możliwy do kliknięcia. Zobacz Dostosowywanie obszaru nagłówka widżetu.

W przedstawionym układzie tylko kropki stronicowania zajmują prawe i dolne marginesy. Przykłady można znaleźć w temacie Pagination.

W przypadku widżetów korzystających z kontenerów rynna między poszczególnymi elementami wynosi 4px, a kontenery powinny dotykać krawędzi marginesów. Zawartość powinna również używać odstępów i wartości rozmiarów będących wielokrotnościami czterech pikseli , aby osiągnąć czysty, idealnie dopasowany wzór pikseli w różnych rozdzielczościach ekranu.

Należy również zapoznać się ze wskazówkami dotyczącymi odstępów i rynien w Domyślne podstawy projektowania aplikacji Windows podczas projektowania zawartości.

Typografia

W przypadku ułatwień dostępu poniższa tabela przedstawia tekst tabeli pokazanej na powyższej ilustracji.

Użyj czcionki Segoe UI i skali typograficznej powyżej, aby uzyskać spójny wygląd widżetów systemu Windows. Kolumna Adaptive Cards zawiera odpowiednie właściwości szablonu; host docelowy kontroluje ich renderowany wygląd. Aby uzyskać więcej informacji na temat tworzenia szablonów widżetów, zobacz Tworzenie szablonu widżetu za pomocą projektanta Adaptive Cards.

Użyj domyślnego koloru skojarzonego z motywem widżetu dla tytułów i tekstu podstawowego. Możesz użyć subtelnej wersji koloru domyślnego, aby odróżnić tekst podstawowy, pod warunkiem, że utrzymuje wystarczający kontrast. Zarezerwuj kolor akcentu dla hiperlinków w tym projekcie. Sprawdź efekt zarówno w motywach jasnych, jak i ciemnych na tablicy widżetów.

Obrazy profilów

Jeśli widżet zawiera wyświetlanie profili użytkowników (na przykład strumień lub kanał w mediach społecznościowych), użyj jednego z następujących dozwolonych rozmiarów okrągłych profili: 96x96px, 48x48px, 32x32px lub 24x24px.

Porady dotyczące narzędzi

Wskazówki dotyczące narzędzi mogą być używane, gdy tekst tytułu zostanie obcięty w widżecie. W przypadku najlepszych praktyk tekst powinien starannie mieścić się w obszarze widżetu i nie wymagać obcinania, jednak nie zawsze jest to możliwe, na przykład w sytuacjach takich jak lokalizacja językowa, skalowanie tekstu w systemie lub podczas cytowania czegoś, na przykład tytułów artykułów czy nazw utworów. Nie dotyczy to tekstu w widżecie.