Najważniejsze efekty nowego projektu graficznego Fluent Design System

Microsoft oficjalnie zaprezentował nowy projekt graficzny o nazwie Fluent Design System podczas konferencji Build 2017, która odbyła się na początku tego miesiąca. Postanowiłem bliżej przyjrzeć się nowemu projektowi i wypisać najważniejsze efekty, które pojawią się już wkrótce na urządzeniach z systemem Windows 10 w wersji Fall Creators Update.

Materiał akrylowy (Acrylic material)

Jeden z najbardziej widocznych efektów to materiał akrylowy, który nadaje głębię projektom. W skrócie można napisać, że jest to dodanie efektu rozmycia wraz z przezroczystością do aplikacji jednak to nie wszystko ponieważ projektanci aplikacji mogą skorzystać z kilku możliwości akrylowych podczas tworzenia uniwersalnych aplikacji UWP.

Deweloperzy mogą dodawać materiał akrylowy do menu bocznego, podmenu, paska górnego lub też do całego okna aplikacji. Efekt może być widoczny przez cały czas w tle aplikacji lub pojawiać się dopiero po wysunięciu menu lub w innych elementów wewnątrz aplikacji. Twórcy mogą również dostosowywać stopień przezroczystości za pomocą wartości procentowych.

Na powyższym przykładzie widzimy zastosowanie materiału akrylowego w całym oknie a nie tylko w menu czy w innych elementach aplikacji. Tak jak wspomniałem wcześniej najprościej można napisać, że efekt składa się z przezroczystości oraz rozmycia, ale tak na prawdę złożony jest aż z 5 warstw, które widoczne są na poniższej grafice.

Materiał akrylowy składa się z tła pulpitu, rozmycia Gaussa, blendy mieszającej warstwy, nakładki w danym kolorze lub odcieniu i szumu w postaci kafelkowej tekstury. Połączenie wszystkich warstw pozwala na stworzenie efektu akrylowego, który jest częścią projektu Fluent Design.

Warto również wspomnieć, że używanie efektów akrylowych może być obciążające dla procesora graficznego co może powodować większe zapotrzebowanie na energię a tym samym skrócenie czasu pracy baterii na niektórych urządzeniach. Efekt ten jest automatycznie wyłączany w momencie kiedy urządzenie wejdzie w tryb oszczędzania energii. Użytkownicy w razie potrzeby mogą również wyłączyć efekty akrylowe dla wszystkich aplikacji.

 

Animacje (Animations)

Dzięki efektom animacji użytkownicy zobaczą łagodne przejścia między scenami zachowujące kontekst i utrzymujące ciągłość. Rozróżniamy dwa typy animacji. Połączona animacja (Connected animation) jest widoczna powyżej i charakteryzuje się tym, że obraz z wybranej przez nas pozycji z listy staje się obrazem tytułowym kolejnego ekranu.

Skoordynowana animacja (Coordinated animation) to drugi rodzaj animacji wykorzystywanej w nowym projekcie graficznym. W tym wypadku obraz z pozycji wybranej nie staje się obrazem tytułowym a jedynie miniaturką, która znajduje się na obrazie tytułowym.

 

Paralaksa (Parallax)

Efekt paralaksy to prosty sposób na dodanie trójwymiarowej perspektywy, głębi i ruchu. Jest to nieskomplikowany, ale efektowny wizualny zabieg. Na powyższej animacji widzimy dwa elementy – obraz w tle oraz lista. Zarówno jeden jak i drugi element przesuwa się w trakcie przewijania z czego ten widoczny „bliżej” nas przewija się znacznie szybciej względem drugiego co tworzy ciekawy efekt wizualny.

 

Odsłanianie (Reveal)

Odsłanianie to nowy efekt oświetlenia, który przyciąga uwagę do interaktywnych elementów. Przesuwając kursor lub palec po ekranie interaktywne elementy otrzymują efekt świetlny oraz ramkę. Efekt składa się z dwóch głównych komponentów wizualnych. Pierwszy z nich to odsłanianie po najechaniu (hover reveal) na dany element a drugi to zachowanie ramek (border behavior) w momencie zbliżania się do danego elementu. Doskonale widać działanie efektu na powyższej animacji.

Warto dodać, że odsłanianie, podobnie jak materiał akrylowy, składa się z kilku warstw, które są widoczne na powyższej grafice. Efekt składa się z 5 warstw i są to kolejno: obramowanie, zawartość, aktywne podświetlenie, tylna matryca oraz tło.

 

Niektóre z powyższych efektów są dostępne już teraz w wybranych aplikacjach zarówno spod skrzydeł Microsoft jak i niezależnych deweloperów. Widać również, że nie wszystkie efekty będą dostępne na wszystkich rozmiarach wyświetlaczy. Ta sama uniwersalna aplikacja może wyglądać nieco inaczej na komputerze i na telefonie pod kątem użytych efektów. Na przykład całkowita przezroczystość nie jest widoczna w telefonach ponieważ aplikacje są wyświetlane zawsze na pełnym ekranie. Z tego powodu Fluent Design będzie wyglądał bardziej okazale na komputerach niż na telefonach.

Na tę chwilę nowy projekt graficzny jest dostępny zaledwie w kilku aplikacjach w systemie Windows 10 Mobile. Zapraszam do tego artykułu, w którym opisałem występowanie nowych efektów w poszczególnych aplikacjach Microsoft.

Źródło: Opracowanie własne na podstawie Microsoft