Przed dwoma miesiącami Microsoft połączył dwa swoje repozytoria w GitHub — UI Fabric i Stardust — pod nową nazwą Fluent UI. Poprzez współdzielenie kodu umożliwiło to m.in. powstanie jednolitej biblioteki interfejsu dla Microsoft 365. Fluent UI podlega tymczasem dalszej ewolucji, której szczegółami projektanci z Microsoft podzielili się na blogu Medium.
Fluent UI jako kolekcja frameworków UX jest dla Microsoftu sposobem dostarczania narzędzi, takich jak Office, Outlook, OneDrive czy Teams. Jest on też zunifikowanym zestawem webowych i mobilnych bibliotek UI. Microsoft zapowiada, że w tym roku chce domknąć lukę między designem a kodowaniem, zaczynając od systemu tokenów designu. Na czym to konkretnie polega?
Fluent UI to coś więcej niż kolekcja frameworków UX do tworzenia aplikacji webowych i mobilnych, które współdzielą kod, design i zachowania interakcji. To nowe podejście do pracy w różnych dziedzinach i zespołach produktów, aby zapewnić bardziej naturalne doświadczenia w aplikacjach, których używamy na co dzień. Microsoft upraszcza ekosystem dewelopera, dzięki czemu partnerzy wszystkich typów mogą czerpać korzyści i samemu dokładać się do tych frameworków, budując własne rozwiązania.
Korzystając ze składników bibliotek Fluent UI React (web), Fluent UI Apple (iOS i macOS) oraz Fluent UI dla Androida, aplikacje Microsoft 365 są bardziej intuicyjne i spójne między platformami. Microsoft tworzy też składniki wieloplatformowe dzięki bibliotece FluentUI React Native, co ułatwia programistom JavaScript szybciej dostarczać rozwiązania dla wielu platform. Jeśli zaś chodzi o deweloperów celujących w Windows, ucieleśnieniem Fluent Design System nadal pozostaje dla nich WinUI.
Wierzymy, że oprogramowanie produktywne musi przede wszystkim wspomagać ludzką kreatywność. Musi schodzić z drogi i czynić wykonywanie zadań bezwysiłkowym, czy to na telefonie, tablecie, laptopie, czy na dużym ekranie. Podobnie jak w designie samochodów, uważamy, że wystarczy tylko kilka kluczowych elementów designu dla każdego produktu, by ukształtować wrażenie markowego doświadczenia w umysłach klientów. Te "esencjonalne" elementy tworzą jasność i strukturę, dzięki czemu ludzie wiedzą, jak używać produktu niezależnie od urządzenia. Nasze logo Microsft, znajome ikony aplikacji, rozpoznawalne nazwy aplikacji i rozróżnialne kolory aplikacji kształtują wrażenia ludzi dotyczące naszych markowych doświadczeń. Są jednak także bardziej specyficzne komponenty UI, które dają naszym aplikacjom poczucie unikalnego "Fluent". Przykładowo nasz własny panel nawigacji zapewnia naszym aplikacjom mobilnym znajomy akcent.
— Benedikt Lehnert, Director of Product Design for Fluent, Mobile and Office Experiences, Microsoft
Tworzenie spójnych doświadczeń dla wielu platform w Microsoft nie polega na odtwarzaniu zasad stylizacyjnych piksel po pikselu. Zamiast tego firma skupia się na tym, jak dana platforma się zachowuje i do czego przyzwyczajeni są klienci. Generalnie odnosimy się do zasady 80/20 — wyjaśnia Lehnert. Używamy natywnych wzorców przez 80% czasu, skupiając naszą energię na spersonalizowanych komponentach, które poprawiają doświadczenie klienta.
Dziś produkty Microsoftu dostarczane są na platformy Windows, Android, iOS, macOS i przeglądarki, a tworzenie dla nich motywów (theming) odbywa się niezależnie — i w taki sposób pracują poszczególne zespoły. Gigant szuka sposobów na zmodernizowanie architektury themingu, aby utworzyć skalowalny, nastawiony na przyszłość system designu. Przyszłe motywy będą łatwiejsze i szybsze w aktualizacji na platformach używających wspólnej infrastruktury themingu, taksonomii i scentralizowanego zestawu międzyplatformowych bibliotek stylu. W tym celu firma odchodzi od stałych wartości na rzecz bardziej agnostycznych zmiennych lub też tokenów designu. Tokeny te definiują wizualne atrybuty powierzchni UI i łączą design z kodem, używając powszechnej składni. Scentralizowane biblioteki stylu, dostępne dla narzędzi do projektowania i programowania, służą jako miejsce do wykonywania aktualizacji bez potrzeby rewidowania kodowanych składników.
Jako że wielu projektantów w Microsoft korzysta z narzędzia Figma, zastąpi ono natywny panel właściwości. Zamiast tworzyć projekty, przypisując kolory czy właściwości stroke-width poprzez panel właściwości, designerzy będą przypisywać tokeny do ich warstw. W razie potrzeby mogą oni przemapować te tokeny do innej wartości, umożliwiając propagację dowolnych zmian w designie. Microsoft tworzy też obsługę przetwarzania potokowego, które będzie tłumaczyć te tokeny designu na konkretne dla danej platformy wartości.
Wysiłki te mają na celu rozlokowanie wartości designu bezpośrednio w bazie kodu, oferując designerom i deweloperom w pełni zintegrowany przepływ pracy typu design-to-code. Korzyści z tego odczują też klienci. Ludzie będą mogli z łatwością korzystać z bibliotek motywów w aplikacjach, które tworzą. Będą też mogli personalizować te biblioteki, by lepiej odzwierciedlać markę lub rodzaj usługi, a także zapewnić większą spójność w ekosystemie. Deweloperzy pragnący bliżej zapoznać się z Fluent Design System znajdą dokumentację i zasoby na portalu Microsoft Design.
