Podstawy projektowania widżetów

Ten artykuł zawiera szczegółowe wskazówki dotyczące projektowania interfejsu użytkownika dla widżetu systemu Windows.

Rozmiary widżetów

Widżety zapewniają trzy rozmiary dla użytkownika do wyboru. Zaleca się utworzenie i rozważenie wszystkich 3 rozmiarów i dostosowanie projektu specjalnie dla każdego rozmiaru. Małe i średnie rozmiary zapewniają lepszą widoczność, ponieważ są częściej eksponowane w dynamicznym strumieniu danych. Duże rozmiary są przydatne do wyświetlania bardziej szczegółowych informacji. Obsługa wielu rozmiarów umożliwia użytkownikom elastyczne dostosowywanie widżetów, które wybierają do przypinania do tablicy widżetów.

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

System 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

Każdy widżet ma wokół niego margines 16 pikseli, a obszar autorstwa 48 pikseli , w którym nie można umieścić zawartości. Jedynym składnikiem, który może znajdować się na prawym marginesie bocznym i dolnym marginesie, są kropki stronicowania. Aby zapoznać się z przykładami umiejscowienia kropek paginacji, zobacz sekcję paginacji w przewodniku projektowania interakcji z widżetem .

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 marginesów w Podstawy projektowania treści dla aplikacji systemu Windows podczas projektowania treści.

Typografia

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

Interfejs użytkownika Segoe to czcionka używana w widżetach i w systemie Windows. Powyższa rampa typów obejmuje formuły dotyczące prawidłowego ustawiania odpowiednich stylów w Projektancie kart adaptacyjnych. Wygląd kroju pisma nie powinien odbiegać od formuł określonych powyżej. Aby uzyskać więcej informacji na temat tworzenia szablonów widżetów za pomocą projektanta kart adaptacyjnych, zobacz Tworzenie szablonu widżetu za pomocą projektanta kart adaptacyjnych.

W projektancie kart adaptacyjnych tytuły i treść używają domyślnego koloru skojarzonego z motywem widżetu. Dodatkową opcją odróżnienia tytułu od kopii treści jest użycie subtelnej wersji koloru domyślnego. Kolor akcentu jest używany tylko w przypadku hiperlinków.

Ikonografii

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.