Adobe XD: Podstawy Responsive Resize

CC 2020+

0:00Cześć Witaj w kolejnej lekcji w której

0:01mówimy sobie podstawy działania funkcji Response Française Adobe xD Ale zanim

0:05przejdę do naszego przekładu to pokażę ci jak to wygląda na jednym z gotowych

0:09weekendów który jest przystosowany do ekspansji Fritza jest momencie gdy

0:12zaznacza Art Board domyślnie a wybory nie mają włączonej funkcji Response Française.

0:17Możesz ją włączyć na Art portal grupach i na komponent.

0:20Natomiast domyślnie Art Board gdybyśmy chcieli je eskalować przykładowo

0:23gdybym chciał z tej rozdzielczości sklepowej zrobić trochę mniejszą tablet

0:27ową bo musiałbym najpierw zmierzyć Art Board wcześniej bym go oczywiście powalił

0:31teraz spróbował dostosować położenie tych wszystkich elementów.

0:34Funkcja Response Chrisa jest po włączeniu ułatwia nam trochę tę pracę.

0:38Oczywiście ona działa teraz w trybie

0:41automatycznym natomiast możemy dostosować trochę jej parametrów i w skrócie możemy

0:45określić pewne relacje elementów które znajdują się w kontenerach np.

0:49możemy powiedzieć że te strzałki mają zawsze być w prawej górnej krawędzi.

0:53No i wtedy podczas skanowania całego takiego leja to zobacz że te elementy w

0:58miarę płynnie fajnie się dostosowują i łatwo jest w takiej rozdzielczości zrobić

1:02taką a co więcej jeśli użyjemy tutaj RIP grodów to zobaczy elementy tych ryb np.

1:08tutaj i tutaj też automatycznie zostają

1:10podzielone tak że może to nam oszczędzić sporo pracy.

1:14Również obrazki w kontenerach które się

1:16powiększają automatycznie się tutaj dostosowują to działanie funkcji Response

1:20Fritza jest na dostosowanych do niej wcześniej.

1:23Musisz wiedzieć że nigdy nie zadziała coś takiego że zrobimy spróbować i z pomocą

1:27jednej magicznej funkcji przełączyć go w tryb mobilny.

1:30Oczywiście wymaga to więcej pracy i nie polecam Ci nawet teraz w tym

1:34kontekście myśleć o ekspansji Fritza że będziemy cały Art Borges celować raczej.

1:39Najważniejsze jest to abyś pomyślał oraz

1:41Matthew Willisa jest na tym etapie atomowym.

1:44Na tym etapie komponentów które tworzymy i jeżeli zaczniesz od tych fundamentów i

1:48od podstaw i przy okazji tworzenia każdego komponentu będziesz sprawdzał jak

1:53wyglądają jego funkcje Response Flisa i myślał o tym jak ten komponent mógłby się

1:57przez malować nawet o kilka kilkadziesiąt pikseli w górę w dół.

2:01To wtedy rzeczywiście będziesz miał przygotowane dużo lepiej do tego żeby

2:05później poddawać go na różne rozdzielczości.

2:07Zacznijmy od kompletnych podstaw ekspansji

2:09Philipsa stwórzmy kształt może dwa kształty.

2:12Pierwszy to będzie prostokąt w ramach którego chciałbym stworzyć Eclipse Eclipse

2:17wyłączenie obramowanie i umieszcza w lewym górnym rogu.

2:20Teraz zaznacza te dwa elementy stworzy z

2:23nich grupę i mam zaznaczone tą grupę dla której automatycznie została włączona

2:26funkcja Response Side i jej właściwość jest ustawiona na auto.

2:30Gdybyśmy ją wyłączyli próbowali skierować taką grupę kółko zniekształcenia

2:35natomiast przy włączonej funkcji Response Française xD rozpozna że kształt albo np.

2:39ikona którą trzeba chronić nie będzie zniekształceń.

2:42Zamiast tego wyświetla stałe margines to są takie kreski które możesz zaobserwować

2:46są kreski do lewej i do górnej krawędzi i w ten sposób informuje nas że wykrył że

2:52to piłeczka jest bliżej lewej górnej krawędzi więc będzie trzymać stały

2:55margines od krawędzi i po prostu pozostawi kształt w tym miejscu.

2:59Mamy oczywiście wpływ na to jak układają

3:02się elementy w ramach Response Flisa jest przełączać się na manual

3:06jedna niezwykle istotna sprawa w tym momencie przeznaczyliśmy ustawienia

3:10Response Flisa jest na mało dla całej grupy.

3:13Nam chodzi o to aby ustawienia Response

3:15Flisa dostosować dla konkretnych elementów które chcemy przestawić.

3:18Przykładowo klikamy Commander na elipsy a wtedy jest ona zaznaczona i zmieniamy

3:23Response First auto na mało w tym momencie widzimy jakie funkcje automatycznie

3:28zastosował dla niej xD zastosował Fix It i fix it.

3:33Czy to znaczy że nie będzie już przekształcać.

3:34Zawsze będziemy mieli kulkę jednego rozmiaru a dodatkowo przyciągnął ją o

3:39stały margines to jest właśnie ta oznaczenie stałego marginesu do lewej i do

3:44górnej krawędzi połączymy się jeszcze raz na chwilę.

3:46Auto zapamiętuje więc te ustawienia i

3:48spróbujmy ustawić je na środku centralnie w poziomie i w pionie.

3:53Teraz łączymy się na manual i zobaczymy co teraz się stało.

3:56Zmieniło się to ustawienia czyli xD odczep stały margines z lewej i od górnej

4:01krawędzi i zamiast tego zostawił tylko Fix It fix it.

4:05Dzięki takim ustawieniu w momencie gdybyśmy skierowali tą grupę kulka będzie

4:09miała stałe rozmiary ale cały czas będzie pozostawała na środku.

4:13Wyłączenie tych ustawień które Ci

4:14pokazałem czyli wyłączenie tych stałych marginesu powoduje że do żadnej krawędzi

4:19nie mamy przyjętej kulki o jakąś konkretną wartość w punktach.

4:23Innymi słowy jeśli te punkty są szare to każda z tych krawędzi oddziałuje na ten

4:26obiekt tak że będzie ta odległość zwiększała się procentowo proporcjonalnie

4:32do tego jak będziemy skierowali cały kontener.

4:35Jeszcze innymi słowy jeśli chcesz zachować

4:37stałą odległość od jakiejś krawędzi wciśnij tę funkcję.

4:40Jeśli chcesz aby skazują cały kontener

4:43proporcjonalnie ta odległość się zmniejszała.

4:45Po prostu zostaw to szare.

4:47Jeżeli chcielibyśmy w związku z tym umieścić kulkę gdzieś tutaj niżej i

4:51zablokować ją do tej dolnej krawędzi pozostawiając jej stałe rozmiary możemy to

4:56tak zrobić i teraz zawsze ona będzie na dole.

4:58Zobacz.

4:59Jeśli nawet spróbujemy od góry dopiero zmniejszać kontener dopiero teraz ten

5:04margines nam się może zmodyfikować a tak to cały czas zawsze oddalona jest kulka o

5:09tę konkretną wartość w punktach od dolnej krawędzi.

5:12Możemy użyć skanowania od lewej i od np.

5:16prawej krawędzi ale tylko wtedy jeżeli zdecydujemy się czyli możemy przyciągnąć

5:21do lewej do prawej naraz ale tylko wtedy jeżeli zdecydujemy się wyłączyć.

5:26No bo naturalne jest to że jeśli ten element przyjmiemy do lewej i prawej

5:30krawędzi i ustalimy tutaj też sztywny margines no to margines zawsze zostanie te

5:36kilkadziesiąt pikseli kilkadziesiąt pikseli tutaj ale przy skierowaniu

5:40kontenera co się musi stać z obiektem musi się eskalować na szerokość.

5:44W związku z tym musi ta opcja być wyłączona jeśli ją włącza.

5:48Nie mogę mieć przyciągania do jednej do drugiej strony.

5:51W skrócie Tyle teorii ale teraz praktyka która jest znacznie trudniejsza z umówmy

5:54się teraz do pierwszego komponentu czyli do przycisku.

5:57Co by się stało gdybym zaczął go eskalować bo oczywiście on jest Fritza jest włączone

6:01do każdego tworzony komponent będzie miał tę funkcję włączoną.

6:04Natomiast wyskakuje nic w zasadzie się nie dzieje.

6:07Dlaczego.

6:07Dlatego że ważniejsze jest parking który jest na każdej krawędzi ustawiony na 13.

6:11I w tym przypadku jeśli mamy włączony

6:13parking Response czy mamy włączone czy wyłączone.

6:16Nie ma to większego sensu kiedy miałoby zróbmy może kopię tego przycisku.

6:20Kupujmy ten komponent i stwórzmy nowy matka.

6:23To będzie mój nowy komponent który dla

6:26którego wyłącza parking jest wyłączony domyślnie ale wyłączona jest z Moskwy.

6:29Jeśli teraz coś się dzieje no teraz trochę inaczej zachowuje się ten tekst.

6:34To co moglibyśmy zrobić to kliknąć

6:36Commander na tekst i zobaczyć jakie właściwości ma w lidze.

6:40Okazuje się że jest sztywny margines od lewej i od prawej.

6:44W przypadku tekstu nawet jak on jest na środku środku czasem to nie zadziała.

6:47W takim sensie że nie ustawi go idealnie równo na środku więc wyłącza tę opcję

6:52i włącza Fix It i Fix It żeby nie zmieniało mi rozmiaru tekstu i teraz

6:57ewentualnie gdybyśmy skierowali ten guzik jeżeli skierujemy go w poziomie.

7:00Wygląda nieźle jest cały czas w środku

7:03tekst więc nawet gdybym go tutaj zmienił to będzie w środku.

7:07Aczkolwiek tutaj jeszcze powinienem ustawić na nim wygenerowanie dla samej

7:11ramki tekstowej i teraz zmieniając go będzie fajnie działać bo będę mógł.

7:16Sorry muszę skierować cały komponent czyli

7:18nie będę mógł teraz dopasować sobie guzik czyli zmieniam tekst about

7:23a następnie klikamy na cały komponent i dopasowuje jego szerokość.

7:27I to działa. Czyli jakby alternatywny sposób na

7:30tworzenie przycisków moim zdaniem Reading trochę lepsze szybciej działa ale tutaj

7:33mamy nieco więcej kontroli dlatego że w tym momencie mogę też zmienić na przykład

7:38go na wysokość i też tekst mi się ładnie dostosuje ponieważ

7:42będzie poruszał się w ten sposób że jest zawsze na środku w poziomie i w pionie.

7:46Czyli jeśli mielibyśmy tworzyć Response

7:48Force guziki to raczej właśnie w ten sposób.

7:50Przejdźmy teraz do drugiego naszego komponentu który jest odrobinę ciekawszy

7:53jeśli chodzi o ekspansję Flisa jest na nim warto zapamiętać jedną ważną zasadę tutaj

7:57Response ulica jest włączone i zobaczmy jak to działa.

8:00Działa to taki dosyć dziwny sposób to

8:02znaczy tak po pierwsze elementy które tutaj są to dwie ramki

8:06tekstowe i każda jest inna to znaczy ta jest typu point text a ta seria Text To

8:11tłumaczy dlaczego podczas skanowania ta pierwsza skanuje nam wielkość tekstu a

8:15druga skanuje nam wielkość ramki ale nie skanuje wielkości tekstu.

8:19Więc ważna rzecz jeżeli chcesz żeby tekst

8:21się skasował wewnątrz ramki to musisz go mieć.

8:24Typu point tekst w tym momencie mamy dwa

8:26elementy typu point text i one automatycznie będą eskalować.

8:30W moim przypadku akurat chcę tutaj wybrać chcę zrobić tak żeby te teksty się

8:35nie wskazywały ale mogę to też osiągnąć w trochę inny

8:39sposób mianowicie bardziej zależy mi na tym żeby one poruszały się po prostu razem

8:43czyli żeby były razem przyjęte do lewej krawędzi a w tym momencie odległość między

8:48nimi margines między nimi tutaj się zmienia cały czas i jak można to osiągnąć.

8:52Ta ważna cecha jest o której musisz pamiętać.

8:55To właśnie jeśli chcesz elementy trzymać razem po prostu zamknij je w grupie.

9:00Mam zaznaczone dwa elementy Zamykam je teraz w grupie.

9:03Zobaczmy na domyślne w ustawieniach.

9:04Jak to będzie działać.

9:06Jak widzisz działa znakomicie są one

9:08zamknięte w grupie i po prostu trzymają jeden rozmiar.

9:10Ta grupa ma Fix It i fix it.

9:13I to dlatego nie zmieniają się rozmiary tekstu gdybym to wyłączył a ona cały czas

9:16jest wyrównana o stały margines do lewej krawędzi.

9:19Zobaczmy jak to będzie działać.

9:21Zmienia mi się tekst ale odstępy są stałe więc mogę albo zostawić to w ten sposób

9:26albo jeśli chciałbym żeby tekst się nie zmieniał to po prostu ustawić na tą grupę

9:30w której się znajduje tekst Fix It i fix it.

9:32Jeśli chodzi o ikonkę z komputerem ona

9:35jest ustawiona dobrze bo nie chcę zmieniać jej proporcji i chcę żeby była wyrównana

9:39do prawej strony gdybym chciał żeby się skierowała razem z kontenera.

9:43Mógłbym to od czepiać.

9:44Natomiast i wyłączyć w ich i fix it.

9:46Natomiast ja chcę zostawić ten margines i

9:49teraz wydaje mi się że to jest optymalne ustawienie dlatego kafelki.

9:52Ponieważ jeśli będziemy go modyfikować

9:55trochę w górę w dół będzie OK ponieważ wszystkie te elementy.

9:59Na środku dla nas kluczowe jeśli będziemy go modyfikować w lewo i w prawo też będzie

10:04w porządku ponieważ będziemy mieli zawsze te rzeczy przy pięter w tym miejscu w

10:08którym trzeba czyli zmiany jakieś mniejsze np.

10:11gdybyśmy chcieli dla rozdzielczości tabletu dopasować to w ten sposób a dla

10:15rozdzielczości jakiejś większej typowej i jeszcze powiększyć np.

10:19tak moim zdaniem będą tutaj OK.

10:22I będzie nam się to wygodnie skierowało

10:24tak że to są te podstawy o które warto zadbać przy tworzeniu każdego komponentu

10:28określić które rzeczy mają być razem i wtedy zamknąć je w grupę i określić w jaki

10:32sposób mają być pozycjonowania czy mają być przykleja one do którejś z krawędzi.

10:36A może mają być wygenerowane wtedy albo włączamy wszystkie te ustawienia tak żeby

10:41było wielkości procentowe albo w przypadku tekstu wyrównuje sobie do wpisujemy do

10:46lewej do prawej ale sam tekst w ramce tekstowej wyrównuje do środka.

10:50To już zależy od ciebie ale wyposażony w

10:51tę wiedzę na pewno będziesz lepiej na tym etapie atomowym tworzenia tych małych

10:55komponentów właśnie mógł dopasować Response Fritza

10:58jest po to żeby później raportowanie na inne rozdzielczości było trochę bardziej

11:02przyjemne to wszystko teraz zajmiemy się jeszcze tą funkcją później.

11:05Ale chcę żebyś już teraz wszystkie

11:07komponenty tworzył tak jakby z myślą o tym jak będą się eskalować.

11:11Dzięki za uwagę w tej lekcji do usłyszenia.