Adobe XD: Widok Tabletowy portret

CC 2020+

0:00Cześć bitew kolejnej lekcji w poprzedniej

0:02zrobiliśmy widok tabletu w 1024 czyli widok portret.

0:05Teraz zaznaczam to Command D i publikuje tworząc widok portret w tablecie.

0:11Czyli nie 1024 tylko 768.

0:14To kolejne bardzo popularne break point

0:16które powinniśmy obsłużyć i teraz już na pierwszy rzut oka się postanowił.

0:21Tutaj zmieniało sporo rzeczy zgodnie z regułą Fritza jest to jest OK.

0:24Natomiast widać które rzeczy może trochę

0:26gorzej zaprezentowaliśmy tu przykładowo celowo tak to zrobiłem zobacz że tu mamy

0:31bardzo małe odstępy i dlatego właśnie musisz myśleć o tym co się stanie za

0:35chwilę jak ktoś o kolejne 20 pikseli zjedzie.

0:38No to w większości jesteśmy bezpieczni

0:40przypadków bo tutaj możemy ustawić skanowanie na obrazku w dół.

0:43Tutaj jesteśmy bezpieczni jeśli chodzi o

0:45szerokość natomiast tutaj już nie bo mamy bardzo małe odstępy.

0:48Czyli powinniśmy w tym momencie albo przeznaczyć głodować w ten sposób żeby

0:55były dużo mniejsze ikonki i większy oddech.

0:58Jeśli nie no to ok.

0:59Jeżeli deweloper spojrzy na kolejny break point i zobaczy że w nim jest to inaczej

1:03zorganizowane no to przejdzie do tej innej organizacji zaraz jak mu się to złamie.

1:08Czyli jeśli ten

1:10się wywali ja zacznę eskalować to o nawet 10 pikseli w dół to deweloper spojrzy na

1:15kolejny break point ten niższy to jest break point 768.

1:20No i po prostu tam gdzie się złamie to on

1:23ustawi tak jak jest w tym kolejnym mniejsze.

1:26Jeśli tylko będzie o tym pamiętać będzie dobrze.

1:28Co możemy zrobić tutaj.

1:30Przede wszystkim można by było

1:32cały ten art Board zaznaczyć a następnie zmienić jego wysokość.

1:35Są dwa sposoby jak możemy to zrobić

1:37włączone bez pomocy Lisa Alice gdzie będzie nam się przy dobrze zrobionym

1:40Jałcie tak jak u mnie zwiększała odległość pomiędzy poszczególnymi akcjami.

1:44I to jest w porządku.

1:45A czasem będziemy chcieli wyłączyć Response Flisa i po prostu zacząć

1:49powiększać to w ten sposób a następnie zaznaczać sekcje które chcemy

1:54zniszczyć po to żeby uzyskać tu więcej miejsca na projektowanie.

1:57No i dzięki temu że mamy teraz więcej

1:59miejsca możemy sobie w tej przestrzeni coś dorzucić lub tak jak w tym przypadku

2:03musimy zrobić umieścić te elementy jeden pod drugim czyli zaznaczam dwa kafelki

2:09świtem i w ten sposób teraz zaznaczam całość i rozszerzać to.

2:16No i znowu zastanawiamy się jak to teraz

2:18powinno wyglądać czy bierzemy całość i umieszczamy na środku jeżeli wygląda

2:22dobrze to z Bogiem dlatego że mamy jeszcze dużo miejsca na kolejne break pointy.

2:26Jeżeli chcielibyśmy to zmienić to

2:29przechodzimy do każdego kawałka indywidualnie zamiast 238 robimy np.

2:34300.

2:35No i teraz mając 300 możemy rozszerzyć tak żeby został nam

2:39jakiś odstęp sugeruję żeby ten odstęp był dokładnie taki sam tutaj jak tutaj.

2:43Aczkolwiek poszukujemy w tym przypadku też metro.

2:46Jeśli jest tylko taka możliwość no i teraz to ustawiamy dokładnie na środku.

2:50Jest całkiem nieźle bo mamy oddech który

2:53jest z jednej i z drugiej strony dopuszczalne.

2:55Aha warto by było jeszcze wyciągnąć linie

2:57podziału którą postawimy tutaj 24 od prawej.

2:59No i mamy dodatkowy oddech też we wnętrzu

3:02tego komponentu w kursy które poświęciłem na pracę zespołową i handel będę pokazywał

3:06jeszcze mniej więcej jak ja oznacza te elementy dla developera tak aby on łapał

3:10się w tym co jak i nie mieści nam się też obrazek.

3:13Więc co zrobić z tym obrazkiem i co jest dla nas ważniejsze czy obrazek jest dla

3:17nas bardzo istotne czy też najbardziej istotne jest dla nas ten napis.

3:22No na pewno napis Hero jest ważniejszy niż obrazek.

3:25Pytanie tylko czy obrazek chcemy też

3:27zostawić i przykładowo rozmieścić to mniej więcej tak.

3:29Czy po prostu sobie go odpuszczamy.

3:32W większości przypadków

3:33w małych rozdzielczości odpuszczam sobie obrazki jeżeli nic nie wnoszą.

3:37Jeśli coś nie wnosi jakiejś funkcje do naszego leja

3:41i nie ma na to miejsca to zdecydowanie naszemu autorowi przeszkadza i naszej

3:44stronie w związku z tym po prostu wywala stąd obrazek i umieszczamy na środku.

3:49W takiej sytuacji można jeszcze ten tekst wyrównać do środka i przycisk

3:53kłopot umieścić centralnie w ten sposób tak samo jak Innovation in.

3:57Można zaznaczyć dwa elementy wyrównać je

3:59do środka no i wygląda to całkiem nieźle prawda.

4:03Pozbędziemy się obrazka ale moim zdaniem nie straciliśmy zupełnie na estetyce.

4:06Zwłaszcza tam gdzie ona nie jest potrzebna

4:08ważniejsza jest dla nas funkcja Auto to sobie umieszczamy w ten sposób.

4:13No i wygląda nieźle poza menu.

4:15Teraz menu nam się złamało też dlatego że

4:17nie starczyło miejsca na te wszystkie guziki ja w miarę starczyło.

4:23Wygląda na to że jest OK więc możemy to tak ciągnąć.

4:26Ale jeśli tak wyciągniemy no to znów kolejnych momentach mamy bardzo mało

4:30przestrzeni która mogłaby się tutaj nam zmienić.

4:32W związku z tym wydaje mi się że już na tym etapie warto pomyśleć o tym żeby

4:37przykładowo menu umieścić na środku a logo juz też sobie wrzucić np.

4:42na środek na górę.

4:43W ten sposób dzięki takiemu rozwiązaniu będziemy mieć rzeczywiście więcej miejsca.

4:48Poza tym może ten numer telefonu nie jest

4:51najbardziej istotną rzeczą na świecie w tym momencie.

4:53W tym widoku więc jeżeli chcemy go

4:55zostawić oczywiście to jest bardziej decyzja biznesowa nie projektowa.

4:59Tutaj jest istotny jeśli nie to można po

5:02prostu zostawić go w stopę a tutaj go sobie podarować.

5:05I wtedy zyskujemy jeszcze więcej miejsca.

5:08Jeżeli go usunie my to moglibyśmy nawet

5:10zadecydować że zostawiamy tak jak było a samo logo przeniesiemy do lewej strony.

5:16Dzięki temu będziemy mieli prawie do

5:18widoku telefon nowego jeszcze przestrzeń na to żeby tutaj

5:23żeby tutaj się ten moment skierowało dobra to zostawiam na środku i kolejne sekcje.

5:30Ta sekcja nadal jest okay nie musieliśmy w

5:32ogóle ruszać od samego początku więc zostawiamy.

5:35Ta sekcja już nie jest OK.

5:36I znów tutaj moim zdaniem po prostu wylatuje obrazek wcale nie jest potrzebny.

5:41A ten kawalek dwa rozwiązania albo robimy na całą szerokość i oznacza dla dewelopera

5:46co ma się procentowo później skierować potem to pokaże.

5:49Czyli jeżeli odpowiada nam estetycznie bardziej w ten sposób to zostawiamy.

5:53A jeśli odpowiada nam estetycznie bardziej

5:55w ten sposób to po prostu centrum i znowu przygotowujemy ten komponent.

5:58Dzięki temu na dużo więcej rozdzielczości skanowanie w dół.

6:02że tak szybko nam się to nie rozsypie.

6:04Jeśli chodzi o ten lider w mojej ocenie

6:06już teraz powinniśmy go rozdzielić na dwa komponenty to umieścić po prostu pod

6:10spodem natomiast treści umieścić obok siebie.

6:13Jeśli się zmieszczą zobaczymy czy one się nam zmieszczą w ten sposób

6:19powiedzmy z 25 podstępem i ile zostanie jeszcze pionie.

6:22Wygląda na to że jest nieźle.

6:24Kropkę możemy postawić na górze

6:25i myślę że jeszcze jakiś jeden break point spokojnie zostanie obsłużonych.

6:29Bo mamy miejsca po bokach więc zostawmy może tak jak jest.

6:33To sprzyja takiej estetyce tego rozwiązania a więc zostawmy to spróbujmy

6:40wyprodukować dobra no to mamy następną sekcję zrobioną sekcję z logo przesuwamy

6:46i trzeba nią znów zarządzić akurat to są takie elementy jak obrazki więc w mojej

6:50ocenie pozostawiając Active Response i Flisa jest pod warunkiem że znów mamy to

6:54dobrze zrobione i te komponenty mi się teraz ładnie układają na środku.

6:58Nie ma żadnego powodu aby np.

7:01nie zmniejszać tych elementów tak żeby

7:05tutaj były delikatnie mniejsze rozłożone też na jakimś powiedzmy.

7:11Natomiast na pewno na etapie ustaleń z deweloperami jak to finalnie powinno

7:16jak finalnie ten się powinien układać warto będzie ustalić czy to wcale nie musi

7:21być dokładnie tak jak to rozumieć chcieliśmy tutaj od linijki tylko po

7:24prostu zrobić jakieś reguły dotyczące tego Grada jak on ma się eskalować na różne

7:29ekrany i tych reguł się trzymać więc układamy tak żeby mniej więcej było

7:34optycznie fajnie a cały komponent w środku.

7:38Następnie sekcja która zostanie w takim kształcie a

7:45my będziemy mogli zmniejszyć po prostu szerokość pytań.

7:50No i ten artykuł trzeba będzie już coś zmienić w przeciwieństwie do poprzedniego

7:55komponentu gdzie mieliśmy cztery kafelki dało się je podzielić ładnie na dwa rzędy.

7:58Tutaj nie bardzo nie ma sensu robić dwóch w jednym ma jeden gdzieś tam osierocone na

8:03dole w związku z tym zrobimy to po prostu tak że każdy będzie w osobnym rzędzie.

8:07I znowu ponieważ to jest tylko rap to zostawimy sobie na razie tylko jeden.

8:11Zobaczymy jak to się przeskakuje i albo zrobimy to tak

8:16ale przyzna że nie będzie to najbardziej estetyczne rozwiązanie

8:20w związku z tym warto trochę dłużej się nad tym pochylić i

8:24spróbować przerobić to tak żeby obrazek na przykład zrobić.

8:30W tej części.

8:33Natomiast treść tutaj.

8:36No i czy potrzebujemy tak dużego oczywiście że nie potrzebujemy tak dużo bo

8:40kafelki teraz możemy zrobić zdecydowanie mniejszy ten kawalek w ten

8:44sposób trzeba by było jeszcze zmienić zaokrągleniu narożnika tego oraz

8:51tego w ten sposób alternatywny sposób to jeszcze zmniejszyć.

8:56Teraz ułożyć to tak i zmniejszyć szerokość całego tego kafelki wydaje mi się że tak

9:02jest w tym momencie najlepiej tylko jeszcze trzeba go zaznaczyć umieścić na

9:06środku znowu nie przejmuje się aż tak bardzo na razie mikro liderem ale finalnie

9:11rzeczywiście poświęcił bym tutaj trochę czasu na to żeby pasować to

9:15przynajmniej jakoś fajnie nam ich robicie i pozostawić równo odstępy od góry od dołu

9:20zadbać żeby to dobrze wyglądało i teraz można cały taki kawalek sobie powiesić.

9:26Ustawić dla niego odstęp 24 jest ok.

9:29i zdobyli komendę raz jeszcze i umieściły

9:32w ten sposób tak że tak się zmieniła sekcja.

9:34Ten artykuł może zróbmy trochę oddechu między sekcją która znajduje się wyżej

9:39a sekcja GT out się jakoś trzyma cały czas response.

9:42I umieliśmy ją po prostu we właściwym miejscu podobnie jak futer futer trzeba

9:48będzie prawdopodobnie delikatnie przerobić.

9:50Znów to pole tekstowe musimy trochę

9:52zmienić i teraz już możemy pociągnąć te elementy do lewej strony.

9:56W ten sposób zyskamy więcej miejsca zyskamy więcej miejsca to wszystko nam się

10:01ładnie zmieści i łącznie z nim z Peterem który wyciągamy do prawej wygląda OK.

10:07I to może zostać na razie tak jak jest.

10:09Ewentualnie osiągniemy to też do prawej strony.

10:11Ja na razie już to zostawię.

10:13Nie jest to aż tak istotna i kluczowa na ten moment.

10:16Jeśli teraz zaznaczył że Abbott znów

10:18upewnił się że Response Fritza jest wyłączona i zmniejszamy go jak widzisz że

10:22została bardzo podobna wysokość jak w pozostałych przypadkach.

10:26W ostatniej lekcji jeszcze przed nami dwie

10:28rozdzielczości i telefon oraz większa desktop.

10:31Do usłyszenia.