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

  • Pazuzu

    Jestem ciekawy w jaki sposób będzie to wpływać na wydajność, wiadomo, że każdy wodotrysk obciąża komputer. Fajnie by było, gdyby Windows miał tryb LITE czy coś w tym rodzaju, gdzie dałoby się wyłączyć wszystkie zbędne bzdury w celu optymalizacji wydajności.

  • AdikX91

    Zamiast robić grafikę wzięliby się za poprawę stabilności systemu,

  • zynio

    a ja mam pytanko co do PC – lecę na oficjalnym – jeśli mi sie nie spodoba na insider to czy możliwy jest powrót na oficjalny/stabilny …aaaaa pytanko kolejne , rozumię że licencja pozostaje bez zmian czy jestem na oficjalnym czy insider ?

    • Sebastian Florek

      Powrót możliwy, licencja bez zmian

      • zynio

        klucz pozostaje bez zmian ?

        • Sebastian Florek

          Tak. Na laptopie przeprowadzałem taką operację. Z stabilnego wydania do Insidera i powrót. Wszytko bez martwienia się o klucze

  • Simon Pater

    To biznes nie potrzebuje aplikacji i dopracowanego systemu ale efekt przezroczystości i paralaksa jest MUST:P no tak…tak właśnie myśli MS

    • Konrad Uroda-Darłak

      Nie żeby coś, ale poprawa wizualnego aspektu mieści się w definicji „dopracowanego systemu”, więc o co Ci dokładnie chodzi? 🙂

      • RS2_15215

        Ale czy to będzie takie ładniejsze? Może dla młodzieży tak, ale czy będzie faktycznie przydatne? Czytelniejsze? Szybsze?

        • Konrad Uroda-Darłak

          Co ma do tego młodzież? Że niby jest dla dzieci, bo Tobie się nie podoba? Nie tak to działa 🙂

          • RS2_15215

            Fakt, gust mam inny, nie kolorki, blury, itp. Ale być może da rade to przeżyć 😉

          • Konrad Uroda-Darłak

            Ujmę to tak – póki nie zmienią obecnej sytuacji, tj, będzie to można wyłączyć, to problemu nie widzę 🙂

          • RS2_15215

            Oby dali wybór, liczę na to. Każdy wybierze sam i będzie ok 😉

          • Konrad Uroda-Darłak

            Nie „dali”, a „zostawili” – ten cały czas jest 😛

          • RS2_15215

            Jak w mobile to wyłączyć?

          • Konrad Uroda-Darłak

            Na chwilę obecną na smartphonach tego w zasadzie nie ma, a i artykuł dotyczył wersji desktopowej 😛

          • Artykuł dotyczy wszystkich urządzeń a informacja o możliwości wyłączenia pochodzi z dokumentacji Microsoft, gdzie nie ma rozróżnienia na wersje systemu. Być może pojawi się taka możliwość na telefonach w niedługi czasie.

          • Konrad Uroda-Darłak

            Najpierw niech się Fluent Design pojawi, a dopiero potem niech przełącznik robią ;P

          • Najbardziej spodobał mi się ten fragment w dokumentacji Fluent Design:

            This article describes functionality that hasn’t been released yet and may be substantially modified before it’s commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

          • Konrad Uroda-Darłak

            Cóż, klasyka. Deweloper dostosuje aplikację, a potem się okaże, że to jednak nie to 🙂

          • Na tę chwilę nie ma sporego zagrożenia ponieważ Microsoft też dostosowuje swoje aplikacje. Raczej nie wycofa się ze zmian wizualnych. Co najwyżej pojawią się drobne zmiany.

          • Konrad Uroda-Darłak

            Mnie już nic nie zdziwi 🙂

          • RS2_15215

            Wiem. Mam nadzieję, że w mobile dadzą również wybór 😉

          • Konrad Uroda-Darłak

            Najpewniej.

          • Na tę chwilę jedynie włączenie oszczędzania baterii wyłącza efekty. Innej możliwości nie ma.

          • RS2_15215

            Tak, tylko oszczędzanie baterii pewnie również wpływa na inne rzeczy 😉

          • Oczywiście. W końcu to tryb oszczędzania baterii 🙂

          • RS2_15215

            Więc czekam na ciekawsze rozwiązanie 😉

          • G_Lumia

            Wpływa, ale możesz nadać uprawnienia większości aplikacji nawet przy oszczędzaniu.

      • Simon Pater

        O przepraszam masz rację! Wywale iPada i Xiaomi i wrócę bo będzie dużo paralaxy! Podobnie zrobi z polowa użytkowników iOS. MS zmiażdży konkurencję tym ponadprzecietnym posunięciem!

        • Konrad Uroda-Darłak

          Bardzo adekwatna odpowiedz. Mogłeś sobie darować 🙂 Nie bardzo wiem czym chciałeś zabłysnąć. Posiadanym sprzętem?

  • Czerwiec 2017: „Plexi onstead of acrylic. And a brand new Share icon!”

  • nie podoba mi się to wprowadzenie w etapach, sklep na release preview wygląda jak w trakcie przebudowy, koszmar, chyba wrócę do production bo nei da się patrzeć na te niedopracowane efekty wizualne

    • RS2_15215

      W ogóle mam nadzieję, że te cudowne efekty specjalne będzie można w prosty sposób wyłączyć…..

    • Za kilka dni pojawi się nowa aktualizacja, która obecnie jest w szybkim kręgu. Program Insider nie nauczył Cię jeszcze cierpliwości? 🙂

  • notonlypierogi

    Najważniejsze, że dzięki temu fluent telefony nie wiedzą już co to płynność animacji 🙂 jak jeszcze na stałe używałem 640 to już wszystko ścinało a teraz jak czasami patrzę to jest masakra. No ale przecież poważny biznesmen nie zwraca uwagi na jakieś, phi, płynności animacji.