Język projektowania Material 3 Expressive
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Material 3 Expressive (M3) powstał z myślą o użytkownikach, którzy oczekują nowoczesnych, trafnych i wyróżniających się rozwiązań. Expressive umożliwia też projektantom odzwierciedlanie konkretnych emocji i uczuć w układzie i prezentacji interfejsu.
Kolor i typografia
System kolorów jest rozszerzany, aby uwzględniać głębsze palety tonalne M3, szerszy zestaw tokenów i uproszczoną skalę typograficzną, która wykorzystuje osie czcionek zmiennych, aby zapewnić większą ekspresję, dzięki czemu interakcje są bardziej wyraziste i przyjemne.
Motywy kolorystyczne
Nowe tokeny pozwalają stosować więcej kolorów w różnych motywach i w kontekście całego systemu projektowania.
Czcionki zmienne
Zaktualizowane wytyczne dotyczące czcionek zmiennych i ich osi, które można dostosowywać, wykraczają poza zastosowania w usługach własnych i obejmują też zastosowania w usługach innych firm, np. w przypadku czcionki Roboto Flex, która ma podobny zestaw osi zmiennych.
Oś czcionki zmiennej w ruchu
Wykorzystanie osi czcionki zmiennej do sygnalizowania ekspresywnych informacji zwrotnych dotyczących ruchu i sprawienia, że interakcje są bardziej ekspresywne i przyjemne w użyciu.
Przykładowe przypadki użycia:
- Dynamiczna grubość czcionki
- Dynamiczna szerokość czcionki
- Dynamiczna grubość i szerokość czcionki
Wpisz role
Oprócz zaktualizowanej i zoptymalizowanej skali typograficznej wprowadzamy też nowe role typograficzne, które są przeznaczone specjalnie do wyróżniania ważnych wzorców na urządzeniach z Wear OS.
Te nowe role typu obsługują kilka przypadków użycia, w tym tekst łukowy w tytułach powierzchni, proaktywne treści z przestrzenią na żywo i rolę typu przeznaczoną specjalnie dla cyfr. Umożliwiają one stosowanie większych i bardziej stylizowanych rozmiarów tekstu w przypadku ciągów znaków, które nie wymagają lokalizacji.
Kształt i ruch
Wykorzystujemy też język kształtów w znacznie bardziej rozbudowany i znaczący sposób, używając elastycznych kształtów kontenerów do stosowania zaokrągleń i wyostrzeń promienia narożnika, aby obsługiwać listy przekształcające kształty i stany przycisków. Wprowadzamy przyciski przylegające do krawędzi jako nowy, charakterystyczny wzór, który można wykorzystać na okrągłych urządzeniach z Wear.
Kontenery przylegające do krawędzi
Wprowadzamy pojemniki w kształcie, które są okrągłe i maksymalnie wykorzystują przestrzeń w okrągłym formacie.
Zastosowano kształt
Używanie zaokrąglonych rogów i unikalnych kształtów jako kontenerów, aby uwzględnić ekspresyjny projekt – od atrakcyjnych animacji ładowania, ciekawych układów, przycisków zmieniających kształt i adaptacyjnych grup przycisków.
Promień narożnika
Wykorzystanie kształtów narożników Material 3, aby umożliwić różnorodność, odróżnienie i związek między kształtami kontenerów.
Pogrupowane kontenery
Kontenery komponentów wykorzystują techniki elastycznego układu, aby dynamicznie dostosowywać się do dostępnej przestrzeni. Mogą oni równomiernie rozmieścić elementy, aby uzyskać symetrię, lub strategicznie je ułożyć, aby ustalić hierarchię wizualną, podkreślić ważne treści i kierować interakcjami użytkowników za pomocą ekspresyjnych i dynamicznych wskazówek wizualnych.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-07-27 UTC."],[],[],null,["# Material 3 Expressive design language\n\nMaterial 3 Expressive (M3) was built to meet user demand for experiences that\nare modern, relevant, and distinct. Expressive also allows designers to mirror\nspecific emotions and feelings in the layout and presentation of the interface.\n\nColor and typography\n--------------------\n\nThe [color system](/design/ui/wear/guides/styles/color/system) is expanding to adopt M3's deeper tonal palettes and a\nwider token set and the simpler typography scale is utilizing variable font axes\nfor more expression, making interactions more expressive and delightful.\n\n### Color theming\n\n\nThe [new tokens](/design/ui/wear/guides/styles/color/roles-tokens) allow for more color to be applied across different themes\nand in context of the design system as a whole. \n\n\u003cbr /\u003e\n\n### Variable fonts\n\n\nThe updated considerations for variable fonts and their customizable axis,\nextend beyond 1P to also serve 3P use cases such as Roboto Flex, which has a\nsimilar set of variable axis. \n\n\u003cbr /\u003e\n\n### Variable font axis in motion\n\n\nUtilizing variable font axis to signal expressive motion feedback and making\ninteractions more expressive and delightful to use.\n\nExample use-cases:\n\n- Dynamic font weight\n- Dynamic font width\n- Dynamic font weight and width \n\n\u003cbr /\u003e\n\n### Type roles\n\n\nAlong with an updated and optimized type scale, we are also introducing new type\nroles that specifically serve notable patterns on Wear.\n\nThese new type roles support several use cases---including Arc Text for surface\ntitles, proactive content with live space, and a type role specifically for\nNumerals---that allow for bigger and more styled text sizes for strings that don't\nneed to be localized. \n\n\u003cbr /\u003e\n\nShape and motion\n----------------\n\nWe are also leaning into shape language in a much more expansive and meaningful\nway by utilizing flexible container shapes to apply rounding and sharpening of\ncorner radius to support shape morphing lists and button states. We're\nintroducing edge-hugging buttons as a new ownable and iconic design pattern for\nround devices on Wear.\n\n### Edge-hugging containers\n\n\nIntroducing shape containers that embrace round and maximize the space within\nthe circular form factor. \n\n\u003cbr /\u003e\n\n### Shape applied\n\n\nUsing corner radius and unique shapes as containers to embrace expressive design\n---extending to delightful loading animations, interesting layouts, shape-morphing\nbuttons and adaptive button groups. \n\n\u003cbr /\u003e\n\n### Corner radius\n\n\nUtilizing Material 3 corner shapes to enable variety, distinction, and\nrelationship between container shapes. \n\n\u003cbr /\u003e\n\n### Grouped containers\n\n\nComponent containers use flexible layout techniques to dynamically adapt to\navailable space. They can distribute this space evenly for symmetry, or\nstrategically arrange elements to establish visual hierarchy, emphasize\nimportant content, and guide user interaction through expressive and motion-lead\nvisual cues. \n\n\u003cbr /\u003e"]]
