Adobe XD: Tworzymy menu

CC 2020+

0:00Część Witaj w kolejnej lekcji w której przed nami następne wyzwanie.

0:03To wyzwanie będzie polegało na stworzeniu

0:04alternatywnej wersji menu mobilnego Nie pracowaliśmy jeszcze zbyt

0:08dużo z menu tylko przygotowaliśmy jego wzór jako szablon ale potrzebujemy

0:14jeszcze uzupełnić to menu rozmaite stany więc pracujemy teraz zmieniamy to co ja

0:19zrobiłem w trakcie między lekcjami to po prostu zaznaczyła ten element Command.

0:23Stworzyłem tego komponent komponent menu. Dlaczego.

0:27Dlatego że oczywiście teraz mając Master

0:30komponent w panelu komponentów to co dodamy zmienimy w jednym miejscu

0:35jest dziedziczone na wszystkie elementy naszego leja więc zdecydowanie warto

0:39przerobić to nie na komponent i teraz pracować na komponent.

0:43Takie elementy które np.

0:45widok KRS pasywnych będziemy ukrywać można albo po prostu zaznaczyć i przejść do

0:49panelu warstw następnie je ukryć za pomocą komend przecinek można też to

0:53zrobić albo można po prostu je w instancjach usunąć Adobe xD.

0:57Pozwala na to żeby w instancjach po prostu niektóre warstwy usuwać z komponentów.

1:02No dobrze czyli skoro mamy ten komponent menu spróbujmy na nim popracować.

1:07Spróbujmy przygotować dla niego rozwijane manifest Services.

1:12Będziemy w związku z tym tworzyli nowy stan tego komponentu.

1:15Przejdźmy do Stanów.

1:16The Wall Street zostawimy tak jak jest a teraz stworzymy.

1:20Niestety nie będzie to Hoover.

1:21Będzie to serwis

1:23będą dalej w tym stanie zajmiemy się stworzeniem takiego Mega Man.

1:26Chciałbym żeby nie było to jakieś proste rozwijane menu.

1:30Tylko chciałbym umieścić w nim cztery

1:32elementy dla każdej z usług które oferuje Asus czyli zrobimy mniej więcej taki

1:38podział na cztery elementy w ten sposób i to wszystko zrobimy na białym tle.

1:44Ale myślenie koncepcyjne o menu

1:47w kontekście takich kwadratów czterech elementów jest całkiem niezła bo

1:51warto myśleć tym Rapid wyglądem w momencie gdy tworzyć takie powtarzalne elementy.

1:55I zwykle właśnie zaczynam od

1:57jednego rozmiaru czyli wybierzemy sobie tutaj na przykład 300 na

2:01powiedzmy sto dwadzieścia pikseli i to będzie taki jeden kawalek w ramach którego

2:07przygotuje sobie strukturę jednego elementu pod menu.

2:12I będzie to mamy Software marketing MOBA czyli tak zróbmy najpierw ramkę tekstową

2:18piszemy tutaj Software tego już nie mam przygotowanego w plikach

2:22tekstowych ale myślę że nie jest to potrzebne.

2:25Natomiast jeśli chodzi o kolor możemy

2:27szybko pobrać go stąd ewentualnie też przełączyć się w komponenty żeby mieć

2:30szybki dostęp do naszych kolorów i naszych stylów tekstu.

2:34Kolejna ramka testowa którą tworzę będzie zawierała opis Basic Class developer teamu

2:38Multi Skills i ramkę tekstową spróbujmy format jednym ze stylów które mamy np.

2:43Body albo Captain BIG.

2:45Na tym możemy bazować ale chciałabym żeby

2:47nie były to kapitaliści więc wybierzemy standardowe standardową wielkość liter.

2:53I jeszcze spróbujmy użyć tego naszego ciemnego koloru szarego.

2:57Wydaje mi się że fajnie by było zrobić

2:59jednak trochę jaśniejszy kolor będziemy pewnie musieli ten kolor dodać.

3:03Warto sprawdzić czy spełniają kryteria.

3:07Na białym tle jest odpowiednio kontraktowe

3:09ale już teraz nie będę tego robił tylko po prostu zestawie sobie taki

3:13tytuł i podtytuł który w zasadzie jest taką osobną całością więc tutaj będę

3:18patrzył na na te dwa elementy względem siebie i względem tej ramki którą tworzę.

3:23Dodam tutaj jeszcze jeden element będzie

3:25to ikona i przygotowałem sobie w ogóle kilka czy wybrałem

3:28po prostu kilka ikon które będą dotyczyły każdej z tych naszych sekcji.

3:33W jednym z setów które miałam po prostu wrzucam sobie te ikony do Adobe XP

3:38i sekcji Software będziemy mieli tą ikonkę z C++.

3:41Umieści mi ją tutaj Just Shift powinno się całkiem nieźle eskalować.

3:45To jest efekt zerowa więc niech zatem możemy ją ładnie malować.

3:50Teraz wydaje mi się że jest w porządku.

3:53Zadbamy o to aby ta przestrzeń była dobrze zagospodarowana

3:58patrzę w kontekście właśnie tego kawałka i mając takie coś teraz mogę usunąć z niego

4:04bo order możemy potraktować jako pierwszy element Rybicki lider czyli Command R i

4:08teraz stworzy sobie dwa rzędy oraz dwie kolumny najpierw w dwie kolumny

4:13później jeszcze dorzucił do tego dwa rzędy i teraz możemy zarządzać tą przestrzenią.

4:18Margines który się tutaj stworzył to jest

4:20podwójny margines tutaj mamy margines i tutaj.

4:23Tymczasem tu jest tylko jeden i w wielu

4:25przypadkach to wygląda całkiem nieźle ale czasem jak optycznie na to spojrzeć będzie

4:30chciał zniwelować przynajmniej część tych marginesu np.

4:33minus 15 możemy sobie w ten sposób.

4:36I podobnie tutaj.

4:39No i wydaje mi się że to jest całkiem OK.

4:42Natomiast trzeba jeszcze odmienić treści ikonę i gdyby to były pliki PNG to by było

4:46fajnie bo moglibyśmy je po prostu przerzucać tutaj by się same zmieniały.

4:51Natomiast ja korzystam tablic jest jeszcze

4:54przynajmniej na razie moje Adobe z tym nie radzi może twojej już tak.

4:59Ja musiałem. Kupować tak żeby uzyskać dostęp do

5:01poszczególnych grup i po prostu wrzucam sobie tą ikonkę jedną na drugą tak żeby

5:06było równo i usuwamy ikonę z oprogramowaniem.

5:09To będzie marketing.

5:11Mam przygotowane treści więc mogę je szybciutko sobie skopiować i

5:16zadbać o to aby długość ramki była odpowiednia a tutaj kupiłem sobie kolejny

5:22tekst teraz następna ikonkę to będzie MOBA Development.

5:25Wrzucamy sobie we właściwe miejsce jej pozycja względem

5:30tej ikonki z oprogramowaniem znowu usuwamy i po prostu zrobimy sekcję Mobile.

5:36Mam też kawałek tekstu przygotowany który

5:38kuleje i software czyli tutaj wrzucamy umieszczamy w tym miejscu oprogramowania

5:45usuwamy soft zmieniamy na blok tak to powinien być blog

5:51i też jakiś krótki opis i tak w skrócie wygląda prezentuje się to moje menu.

5:57Jeśli chodzi o tło tutaj będę chciał stworzyć jeszcze jeden prostokąt r.

6:03Tango i tworzę prostokąt który będzie na całą całą wielkość tych elementów.

6:11Będzie stanowił dla nich uniwersalne tło.

6:14Poniżej teraz będę mógł pozbyć się border.

6:17Zaznaczam teraz z Shift tam i z Commander.

6:20Wszystkie te tła tutaj które się znajdują.

6:23To pomocnicze które już mi nie będą potrzebne.

6:25Zaznaczam usuwamy natomiast tutaj zrobimy jeszcze padał efekt.

6:32Obszary o które umieściliśmy tak mniej więcej z 7 8

6:35pikseli pod chce żeby ten cień padały z góry.

6:38A jeśli chodzi o Blair to rozumiemy go na jakieś 20 punktów można tutaj jeszcze

6:43trochę podciągnąć jego widoczność i teraz jest w porządku.

6:46Zamkniemy to wszystko w jedną grupę

6:48Command g no i mamy ten komponent który będzie pojawiał się tu pod serwis np.

6:54w taki sposób.

6:55Tyle że trzeba jeszcze całą tę grupę 360 którą nazwiemy menu

6:59przenieść do środka komponentu menu i teraz jeśli będziesz chciał to zrobić w

7:03taki sposób jakby nie da się dlaczego nie dlatego że jesteśmy Services.

7:08Nie dlatego że trzeba się tylko przerzucić tutaj też nie jestem w stanie

7:12tego przenieść więc chyba to jest jeszcze jakiś mały Adobe xD ale to co musisz

7:17zrobić to po prostu Command X następnie przejść do środka do tego menu np.

7:21zaznaczyć sobie tutaj jakąkolwiek warstwę

7:24i wklej ci z pomocą Command V wtedy działa.

7:27Dlaczego tak jest. Nie wiem trudno powiedzieć.

7:30Zobaczymy czy jesteśmy w odpowiednim stanie.

7:32No właśnie nie jesteśmy w dobrym stanie.

7:34W The World to co zrobimy po prostu z tą grupą to ją odkryjemy.

7:39Menu i znika a w tym stanie do którego

7:43chcemy się teraz przenieść w serwis odkryjemy samemu.

7:47W ten sposób zrobimy jeszcze jedną

7:48modyfikację mianowicie strzałki która tutaj jest Arrow.

7:52Nie możemy jej kręcić z pomocą tych opcji trudno.

7:55Mam nadzieję że się to uda

7:57z pomocą Shift 2 i z Egiptem i z autem jak na Jade w okolice górnej krawędzi albo

8:04dolnej krawędzi to będę mógł przekręt o 180 stopni.

8:08W tym momencie mamy.

8:12Sytuację w której mamy dwa statki mamy serwis to co jeszcze możemy zrobić to

8:18przygotować i jeszcze jeden stan dla takiego takiego samego.

8:22No i chcielibyśmy przygotować stan w

8:24którym gdy ktoś jedzie nad jeden z tych elementów on się w jakiś sposób

8:27podświetlenia w związku z tym mamy tutaj do czynienia z zagrożeniem

8:32komponentów bo teraz moglibyśmy zrobić znowu jako komponent więc taki bardziej

8:36skomplikowany komponent składający się z osób komponentów możemy jak najbardziej

8:41przygotować Antka ja teraz zrobiłem z tego nowy Master komponent Mazur komponent

8:46niezbyt mi jest na rękę jak zwykle czyli kopiuj i wklej w to samo miejsce

8:51a sam Master komponent Wietnam teraz tutaj już mam instancje a Master komponent jak

8:56zwykle polecimy gdzieś może obok tych wszystkich innych komponentów na razie

9:01gdzieś tutaj czyli niejako Master jest tu a w środku w

9:06menu mamy same niejako instancje i teraz chcielibyśmy przygotować stan tego

9:12komponentu czyli z The Old State przeniesiemy się do nowego

9:16stanu który nazwiemy stanem software i w tym stanie Software będziemy mogli

9:24wprowadzić następującą modyfikację stworzyć tutaj kolejne proste o kontrakt

9:28Tango w którym znów zaokrąglone krawędzie do ośmiu zrobimy sobie brak Border i

9:35wypełnienie wypełniamy to tym naszym granatowym standardowym kolorem

9:40umieszcza się taki zobaczymy gdzie jest ta grupa tu umieszcza taki prostokąt jako tło

9:45tej grupy czyli w tym miejscu a same treści zmieni ich kolor i na kolor biały.

9:54Oczywiście trzeba by było teraz to odpowiednio pozycjonowanie.

9:58Fajnie tutaj Adobe

10:00mi jakieś linie pomocnicze które mógłbym które prowadzą do samego środka z tym że

10:05korzystają z tych linii pomocniczych aby zachować odpowiednie budynki.

10:09Warto by było jeszcze trochę powiększyć zobaczmy jak to wygląda.

10:12Myślę że jest OK.

10:13No i mamy kolejny stan tego komponentu czyli jesteśmy w The World i software

10:19natomiast ten nasz komponent będzie miał stan The World i Services OK.

10:26No to mamy zaniżone komponenty.

10:28Zrobiona jest takim fajnym mega menu które

10:30się tutaj pojawia strzałka która się zmienia.

10:33No i jeszcze tam Hoover na jednym z

10:35elementów kolejnej elekcji próbujemy całe to menu przełożyć na warianty response.