Adobe XD: Responsywne menu

CC 2020+

0:00Cześć witam w kolejnej lekcji.

0:01W poprzedniej lekcji zajęliśmy się przygotowaniem komponentu menu oraz

0:05takiego mega menu pod spodem czyli naszego Armenii.

0:07No i teraz wypadałoby zastanowić się jak

0:09będzie to wyglądać na wersjach Response naszej strony.

0:13Czyli można by było przejść do wersji przykładowo desktop owej

0:17zaznaczyć komponent menu a następnie przejść do serwisu.

0:20Zobaczyć jak się to wyświetla. Jest całkiem nieźle.

0:23Tutaj też będzie OK możemy włączyć sobie

0:25ten komponent komponent a w widoku tym tablet owym czyli 768.

0:31Co prawda będzie to dalej w porządku ale

0:34być może dla niektórych widoków zdecydujemy się na jakąś przeróbkę.

0:38Przykładowo na tablecie a może nie będziemy chcieli aby widok był

0:42taki mniej czytelny tylko chcemy wszystko zrobić bardzo prominentny i przykładowo

0:47zaznaczyć sobie teraz Commander tło które znajduje się tutaj

0:51od 39 możemy to zmienić na FB a następnie to tło po prostu sobie

0:58rozciągnąć i powiększyć w ten sposób staje się to na urządzeniu takim jak tablet.

1:02Zdecydowanie bardziej czytelne.

1:04Trzeba było jeszcze zaznaczyć te dwa elementy może w sumie 20 pikseli

1:08oznacza trzy ich pozostałe i umieszczone centralnie względem całej strony

1:13i centralnie względem naszego tłumaczy komponentu.

1:17No i teraz mamy nieco inne menu.

1:19Moim zdaniem wygląda całkiem fajnie więc możesz się pokusić o

1:24zmianę właśnie nawet gdybyśmy teraz z menu wrzucili sobie pod główne menu.

1:28Może się pokusić o różne zmiany.

1:30Samo tło teraz możemy powiększyć które

1:32będą tutaj miały miejsce w przypadku tych konkretnych rozdzielczości

1:36i jest to o tyle fajne że w tym momencie może jeszcze

1:42trochę do góry bo teraz idealnie na środku że w tym momencie jeśli wejdziemy

1:47rzeczywiście do takiego komponentu to on w ramach rozdzielczości 1024 wygląda

1:53inaczej a tutaj wystarczy przełączyć go znów na ten tryb Services z domyślną.

1:58I będzie wyglądał inaczej.

2:00Takie rozwiązanie ma swoje plusy zwłaszcza

2:02jest to elastyczność i szybkość możemy bardzo łatwo i szybko sterować.

2:05Jest to jakaś konsekwencja no bo zawsze wchodzimy w serwis jest tylko po prostu w

2:09różnych widełkach po to żeby przełączyć się na różne warianty menu.

2:13No i naturalnie zmiana w pasterza czyli np.

2:16zmiana jakaś literówki tutaj spowoduje

2:19zmianę też we wszystkich wersjach jest masywne to jest to o co nam chodziło.

2:23Ma to jednak też swoje minusy.

2:25Największym z nich jest to że tym Master komponentu

2:29gdy będziemy przełączać nie będziemy widzieli wszystkich widoków

2:33w kursie w którym pokażę ci jak przygotować zasoby dla deweloperów.

2:36Koncentrujemy się właśnie na tym komponentu czyli pokażę ci jak można to

2:40zrobić trochę lepiej w momencie gdy pracujemy w zespole i chcemy bardziej

2:43intuicyjnie i czytelnie przygotować taki komponent jak myślą deweloperzy.

2:48Natomiast w tym przypadku gdy

2:50robimy prosty projekt może być to over Kill zwłaszcza jeśli nie pracujemy w

2:53zespole i lepiej jest szybciej sterować po prostu w ten sposób.

2:57Drugi pomysł bardziej elastyczny ale taki gdzie stracimy możliwość poprawiania tego

3:01jednocześnie będzie to stworzenie menu gdy mamy zupełnie inne komponenty np.

3:06menu mobilnym od podstaw czyli tworzymy

3:08sobie po prostu tutaj jakieś Tango łącza dla niego border.

3:12Oczywiście możemy pożyczyć te elementy które tutaj są jak najbardziej żeby ich

3:17nie tworzyć na nowo czyli pożyczanie sobie np.

3:20te wszystkie rzeczy

3:21numer telefonu zaraz jeszcze kopiuje umieszczamy je tu Command Shift gdzie

3:25zgrupowane teraz mogą ułożyć po prostu jeden po drugim.

3:29Nie przejmuje się jeszcze rozmieszczeniem

3:30dlatego że teraz mogę sobie je wszystkie zaznaczyć z Hofmanem i z Shift

3:35i wyrównać do lewej oraz zarządzić odstępy pomiędzy tymi elementami umieszczamy to

3:40menu na środku logo też mi się przyda więc mogę sobie logo też skopiować.

3:47OK.

3:48I wstawić tutaj.

3:51Następnie może całość umieścić trochę bardziej do góry.

3:55Natomiast numer telefonu który też mogę chyba stąd wydaje mi się wziąć.

4:01OK.

4:02Von Amber mogę też go w klasie tu np.

4:05umieścić na dole.

4:06Zróbmy może coś więcej w tym meczu jeżeli

4:08chodzi o logo wykorzystają jego białą wersję i tak samo zrobię z tymi elementami

4:12wypełnienie tutaj wszędzie rzucę na białe strzałki też strzałka w ogóle będę

4:17musiał obrócić więc możemy obrócić ją w ten sposób.

4:21Nie będzie to takie proste więc wyjeżdżamy i zarazem rzucamy o 180 stopni.

4:29Wszystkie teksty tutaj też zrobimy białe.

4:33Dzięki temu będę mógł zmienić kolor tła

4:36na kolor nasz granatowy ok i teraz zrobić sobie na przykład tego typu wariant menu.

4:44Spróbujmy teraz te wszystkie a w zasadzie

4:45nawet logo możemy przerzucić tutaj i teraz jest to może trochę bardziej czytelna.

4:49Numer telefonu też może się wtedy znaleźć w odstępie od tych elementów

4:56a wszystkie możemy w ogóle zaznaczyć i jeszcze dodatkowo zgrupowań.

5:00Czyli tak mamy tutaj te wszystkie elementy jeszcze.

5:04Zaznaczam to na panelu warstw Koman grupuje i to będzie mobilne menu.

5:10I na tym etapie zastanówmy się jak ma

5:11działać budzik serwis może nam rozwijać jakieś pod menu na dole a może np.

5:15przechodzi do jakiejś zupełnie innej strony.

5:18Możemy spróbować właśnie w ten sposób to zrobić.

5:19Czyli zamiast takiej strzałki mieć teraz

5:22strzałka w lewo całe serwisy przeniosą się właśnie do lewej strony.

5:28I teraz cały Mobile menu z kupujemy a następnie powiemy że to jest moment menu.

5:35Serwis.

5:37Czyli stworzymy jakby ten drugi stan.

5:40Bazując właśnie na wszystkich komponentów które tu mamy i teraz tym drugim stanie po

5:44prostu usunie tutaj numer usunięty przerzucił się strzałka tak

5:48naprawdę przydałoby się przerzucić tutaj mogę ją odwrócić tak żebyśmy mogli przejść

5:54do wcześniejszego ekranu a nie mogę odwrócić mogą ją powiększyć.

5:58Mogę dla niej wybrać jakiś większy Border Side.

6:02To jest naprawdę już dowolne Command

6:05and Girls grupuje wewnątrz sekcji serwisów mamy software.

6:12Właśnie zanim to zmienimy warto by było po

6:15prostu wyrównać do lewej wszystkie te pola.

6:17W zasadzie warto wyrównać do lewej bo one wtedy będą się dobrze zachowywać.

6:22Tutaj zrobimy marketing tutaj zrobimy blok na.

6:30Ok.

6:31Ponad menu którego potrzebujemy to możliwość otwierania i zamykania.

6:34Nie moglibyśmy umieścić tutaj X i

6:35przesunąć logo juz ale ja stworzy sobie trochę inny komponent

6:39stworzy go na razie na tym jasnym tle bo będzie to komponent do otwierania menu.

6:44Najpierw zrobimy Eclipse umieszcza ją tutaj.

6:47Będzie to przycisk który chciałbym żeby był w lewym dolnym w prawym dolnym rogu.

6:51Zawsze nie będzie miał orderu ale zrobimy jakieś fajne Shadow.

6:55Może właśnie dwa ale zdecydowanie większe i spróbujemy się może też delikatnie

7:02przesunąć a następnie włączyć nieco bardziej intensywny cień

7:06i taki przycisk podobny do fabuły Android owego będzie nam uruchamiał menu.

7:11Teraz zróbmy jeszcze Hamburger czyli bazując na linii ja tę linię może zmienić

7:17kolor na taki albo granatowy wszystko jedno.

7:21Zróbmy ją na dwa piksele lub trzy dwa myślę że będzie OK

7:25i teraz taką linię chciałbym powiedzieć zrobię z pomocą Rapid idea zrobimy trzy.

7:33Takie elementy 6 pikseli odstępu Command

7:35Shift grupuje Command G z grupuje jeszcze raz.

7:39Shift oznacza córeczkę i umieszcza to dokładnie na środku.

7:43Teraz warto Command 2 zobaczyć to w skali

7:46200 i 1 w skali 100 zobaczyć czy przypadkiem nie jest za duże.

7:50Czy jest odpowiedni z grupuje te dwa

7:52elementy razem może cień rzeczywiście ten Blur trochę zmniejsza.

7:58Natomiast sama wielkość komponentu zarazem

8:00podejdziemy jeszcze na urządzeniu mobilnym czy jest OK.

8:02No i teraz jest ten guzik białe.

8:05Możliwe że fajnie by było zrobić tak że odwróciły jednak kolory czy zrobimy jego

8:10alternatywną wersję która będzie miała tło granatowe.

8:14Spróbuję sobie zaznaczyć teraz wszystkie

8:15linie w liniach zmienimy kolor biały czyli teraz mamy tak

8:22granatowy guzik będzie w momencie gdy menu jest zamknięte czyli.

8:30Menu Fab.

8:33Manifa Open natomiast biały guzik będzie w sytuacji gdy będziemy mieli menu.

8:39FAP Claus.

8:43Czyli będziemy mieli otwarte i będziemy chcieli je zamknąć jeśli będziemy chcieli

8:46dać bardziej jasny sygnał użytkownikowi odnośnie tego że to jest zamykanie to

8:52możemy jedną taką kreskę ukryć a następnie te dwie kreski

8:57z Shift i z szefem tutaj zatem obraca zarówno jedna jak i druga.

9:05Zrobimy z nich ex.

9:07Następnie ten ich też zadbamy o to żeby

9:09był umieszczony dokładnie na środku i świetnie to mamy te dwa komponenty te

9:14dwa komponenty umieszczone jeden na drugim zaznacza je taras i jeszcze

9:19w odpowiednim miejscu tutaj teraz widzę że ten kolor nie jest do końca

9:24taki jak chciałem więc pozwolę sobie zmienić filtr

9:27a na chwilę to ukryje i zmienię też kolor tego X a nasz granatowy.

9:34Teraz jest wszystko OK dobra więc mamy dwa przyciski które są w odpowiednim miejscu

9:39będą otwierać zamykać szamani to też chciałbym przesunąć w to miejsce ok.

9:45przyciski wrócimy na górę

9:47i teraz mogę nawet pokazać przycisk Klaus rzucić go wyżej.

9:52Tak to mniej więcej będzie wyglądało.

9:54Z tych wszystkich rzeczy które zrobiliśmy

9:56teraz robimy komponent chciałem Ci pokazać taki alternatywny

9:59sposób tworzenia komponentów i robienia dla niego różnych stanów.

10:03Nie musimy ich projektować.

10:05Post factum możemy wszystkie najpierw

10:07zaprojektować a dopiero później się między nimi przełączać.

10:09Czyli Command K zamykamy to w komponent i mówimy że jest to MOBA teraz

10:15domyślny w stanie komponentu ukrywamy te rzeczy które mają być ukryte czyli

10:19zostawiamy tylko Manifa VPN która pozwoli nam otwierać menu.

10:23Następnie w stanie który stworzymy teraz kolejny stan New.

10:28Teraz będzie Open

10:29w tym stanie Open będziemy chcieli z kolei ukryć ten komponent menu i odkryć

10:35pozostałe serwisy serwisu jeszcze tylko właśnie MOBA menu.

10:42No i następny stan który zrobimy serwis odkryjemy w menu i odkryjemy Services.

10:50No więc teraz mamy takie

10:52menu które jest zamknięte menu otwarte i menu w trybie Services.

10:56Wszystko działa. Wszystkie stany tego komponentu są dobrze

10:59zrobione i to jest jakaś alternatywna droga alternatywny sposób

11:04ponieważ ten komponent był zupełnie inny nie wykorzystaliśmy bardzo wielu elementów

11:08które się tutaj znalazły no to jego zrobienie od podstaw w zasadzie było

11:12uzasadnione moglibyśmy spróbować zrobić go na bazie istniejącego

11:16komponentu tutaj wtedy zachowaliśmy możliwość edycji właśnie np.

11:21tych napisów w jednym miejscu.

11:22Ale z drugiej strony

11:24myślę że dość sporo czasu poświęcili byśmy na próbę dostosowania tego wszystkiego.

11:28Dużo więcej warstwy nam się zrobiło w różnych wariantach.

11:32A tak to mamy po prostu osobny komponent mobilnego menu.

11:35To jak to robić zostawiam Twojemu uznaniu

11:37natomiast tak jak wspomniałem w części poświęconej handlowi i pracy zespołowej

11:42postaram się trochę inaczej podejść do tego problemu i pokażę ci jak można to

11:45rozwiązać gdy pracujemy w zespole i chcemy przygotować trochę lepiej komponenty np.

11:50pod Design System.

11:51Tymczasem w tej lekcji.

11:53Dziękuję ci bardzo za uwagę i do usłyszenia.