Adobe XD: Widok tabletowy
Interfejsy Stron WWW
6 godz. 4 min · Adobe XD · UI, UX i Webdesign
Grzegorz RógIdea ArchitectCzego się nauczysz
- Praktyczny projekt strony w XD
- Omówienie narzędzi do tworzenia UI
- Szereg tipów i skrótów klawiaturowych
- Wskazówki do projektowania na różne ekrany
- Formaty plików i eksport zasobów
- I wiele więcej!
Narzędzie do pracy z UI w Adobe CC
Jedną z ogromnych zalet Adobe XD jest fakt, że znajduje się w popularnym pakiecie Adobe, co znaczy że możesz z niego korzystać w ramach subskrypcji CC, jak również współpracuje z innymi aplikacjami, takimi jak Photoshop czy Illustrator. Kurs, który masz przed sobą to kompleksowe omówienie technik pracy w Adobe XD, jak również praktyczny projekt strony internetowej. Na tej samej zasadzie jesteś w stanie wykonać projekty mobilnych aplikacji.
Magia Adobe XD
Szereg pomysłów zastosowanych w Adobe XD sprawia, że projektowanie interfejsów z jego pomocą jest niezwykle wydajne. Jednymi z ciekawszych narzędzi jest przykładowo Repeat Grid, który pozwala Ci łatwo powielić powtarzalne elementy interfejsów, takie jak tabelki czy listy. Możesz także łatwo umieścić grafiki w każdym z elementów tak stworzonego grida, a nawet gotowy tekst, przeciągając obrazy czy pliki tekstowe do aplikacji!
Praktyczny projekt strony WWW
W tym Kursie skoncentrujemy się od początku na tworzeniu praktycznego projektu witryny, którą przełożymy na działający projekt w jednym z kolejnych kursów. Zaczniemy mniej typowo, bo od widoku desktopowego, a następnie dorobimy widok responsywny i przetestujemy go na telefonie. Po drodze przekażę Ci szereg wskazówek, tipów i skrótów po to, aby pracować w Adobe XD jeszcze wydajniej.
Czego nie znajdziesz w tym kursie?
Materiały z XD celowo podzieliliśmy na kilka kursów. Ten, który masz przed sobą jest fundamentem wiedzy o tym, jak tworzyć layouty w XD i zawiera szereg wskazówek związanych z samym projektowaniem UI. Nie obejmuje natomiast części pracy zespołowej, handoff (czyli przekazania do developmentu), ani prototypowania - do tego przewidzieliśmy osobne materiały. Zdajemy sobie sprawę, że nie wszyscy będą potrzebowali omówienia tych specyficznych funkcji, stąd taki podział kursów.
Dla kogo jest ten kurs?
Kurs przygotowałem dla wszystkich osób, które chcą zająć się - lub już się zajmują - projektowaniem interfejsów użytkownika i chcą tworzyć nowoczesne strony WWW oraz aplikacje. Nieważne, czy korzystasz już z innych aplikacji - uzupełnienie swojego zasobnika o XD, zwłaszcza, jeśli jesteś użytkownikiem Adobe CC, pozwoli Ci wykorzystać jego unikalne funkcje w niektórych projektach. Jeżeli zależy Ci na szybkości w projektowaniu UI, wielu iteracjach, a także szybkim prototypowaniu - zdecydowanie warto poznać XD. Z drugiej strony, jeśli potrzebujesz prostej aplikacji, która pozwoli Ci zaprojektować stronę dla siebie lub Twojego klienta - ten kurs również jest dobrym rozwiązaniem!
CC 2020+
Witaj w kolejnej lekcji.
Można powiedzieć że praca nad jedną z pod stron naszej witryny dobiega końca.
Czyli mamy przygotowaną całą stronę mamy
zrobione Az tyle tekstu mamy komponenty mamy kolory wyciągnięte do asa wszystko to
co trzeba było zrobić i warto naprawdę poświęcić trochę czasu na uporządkowanie
struktury jednej strony no bo chociaż czasem będziemy pracowali nad serwisami
tak zwanymi Landing bajkami czy literami które mają tylko jedną drugą stronę
to na ogół będziemy potrzebowali od strony powielać.
My nie będziemy tego robić nie będziemy
pracować na jakichś różnych stronach w tym kursie ponieważ byłoby to tylko powielanie
czynności które pokazałem ale zawsze po zakończeniu pracy z taką
stroną należy wykonać jej wariant response.
Jeśli zaznaczył aut okaże się że
pracowaliśmy w rozdzielczości 1366 czyli tej najbardziej popularnej
rozdzielczości desktop owej oczywiście różne ekrany mają różną
rozdzielczość pod spodem ale z reguły wygląda to poprzez malowaniu np.
ekranów Retina mniej więcej jak te 13 66
więc jest to dobry benchmark dla benchmark dla rozdzielczości tabletu.
Natomiast my teraz powinniśmy kliknąć w taki Harbor a następnie go powiesić.
Wybieram polecenie Komendy i zastanowić się jak mogłoby to wyglądać na tablecie.
Jeżeli teraz bezpośrednio przełącza się na rozdzielczość tabletu czyli 1024 No
to zobacz co się stało po prostu cały kontent został ścięty
i to samo by się stało gdyby poza znaczeniu tego zaczął go eskalować.
Czyli przykładowo złapał za tę córeczkę i zaczął eskalować.
No nic się nie dzieje po prostu przecina mamy to co jest pod spodem i już.
Czy xD ma jakieś inne opcje.
Oczywiście ma i pokazywać je prezentując opcje Response Française.
Jest ona dostępna zarówno dla grup
komponentów jak i dla całej Art borów i domyślnie dla Art Borów w
przeciwieństwie do innych elementów ta opcja jest wyłączona.
Trzeba w związku z tym ją włączyć żeby można było zobaczyć jak nasz projekt
będzie się skasował w momencie gdy jest włączona.
No i teraz zobacz że
jest to całkiem nie głupie zachowanie ponieważ te elementy które są w środku.
Przykładowo sekcja Send Panthers w
momencie gdy będę skasował całe lato out cały czas zostaje na środku.
Podobnie wydatkowane wygenerowane elementy
z faksem z pytaniami też zostanie na środku a będą zmieniać się margines od
lewej i od prawej więc działa to całkiem nieźle w tą stronę.
Ciekawe co się stanie w drugą stronę w drugą stronę też nie jest źle np.
na tym elemencie mamy dobrze dostosowane
marginesem cały czas zostaje na środku tutaj dopiero się skoczyło.
No ale już pozostałe niekoniecznie zachowują się tak jakbyśmy chcieli.
No to kiedy to działa doskonale to jest tylko przypadek chyba dem Adobe
które pokazują to na takich przykładach na których czyni się wszystko wskazuje.
Natomiast w przypadku naszych projektów na pewno tak nie będzie.
No ale jest to już coś.
Czyli ten Response i Flisa jest włączone.
Naprawdę coś nam już daje.
Warunek jest taki że przygotowujemy nasz projekt starannie czyli jeżeli coś ma być
na środku to rzeczywiście zaznaczała to i środkową jemy względem całego kampusu bo
jeśli miałoby to nawet offset jednego czy dwóch pikseli to wtedy już by nie
potraktowały tego że jest na środku tylko że jest przesunięte do tej krawędzi do
której mu po prostu bliżej i zachowując ten margines by nam to wskazywało.
Więc warto o tym pomyśleć warto mieć
wszystko zrobione poprawnie po to żeby Response w rejestrach mógł nam pomóc.
No i teraz schodząc rozdzielczości 13 66 do 10 24 zobaczmy jak się prezentuje taki.
Sporo rzeczy się leciało ale z drugiej strony nie jest tak źle np.
tej sekcji w ogóle nie musza poprawiać.
Miała ona dosyć dużo oddechu z lewej i z prawej strony ale wygląda całkiem dobrze
no i teraz zaczynamy zwykle właśnie od takiego rozwiązania
a następnie dopiero dostosowuje elementy które powinienem dostosować.
Czy chodzi tutaj o to żeby zmniejszać te wszystkie elementy.
Nie do końca. Przykładowo tekst który mamy na tablecie
powinien pozostać równie czytelne jak na desktop.
Wręcz czasem na mniejszych ekranach ten tekst należałoby jednak powiększyć a nie
zmniejszyć więc zupełnie nie o to tu chodzi.
Natomiast urządzenia mobilne mają taką
specyfikę że możemy spokojnie pozwolić sobie na zmniejszenie marginesu.
Czyli możemy zamiast tych marginesu w które mieliśmy teraz je włącza i teraz
tylko z jednej strony mi się pokazuje ten margines wielkości 62 piksele na pewno
możemy spróbować te margines przesunąć na np.
około 30 pikseli a nawet 24 piksele z każdej strony.
I to już daje nam dodatkowy oddech i tak samo od górnej krawędzi możemy
zdecydowanie zmniejszyć ten margines i też ustawić go np.
na 24.
I teraz już możemy robić to konkretny elementy czyli przesunięcie menu
w ramach menu znowu teraz wchodzę do logo przesuwamy sobie logo w odpowiednie
miejsce teraz zarządza położeniem tego euro mogę przesunąć go wyżej bo
zrezygnowaliśmy z marginesu no i mogę też dostosować tutaj sobie folder.
W Jałcie jest na 738 pikseli i w zasadzie
można pozostawić go niezmienionym albo zmienić tylko nieznacznie np.
na 710 pikseli.
Oczywiście mamy jakąś jakiś element
przeglądarki na przykład na jakieś 80 pikseli od góry z paskiem adresu ale
z drugiej strony większość tabletów ma proporcje 4 na 3.
Różnie to jest ale tablety Apple np.
mają proporcje 4 3 i w związku z tym ten hejt jest 768.
Jeśli weźmiemy pod uwagę te powiedzmy 50
60 pikseli na elementy przeglądarki to może być to 710 700 OK.
No i czy patrzymy tutaj też na GRID tak patrzymy na GRID więc staramy się
zgodnie z tym ideałem ułożyć elementy ale bardziej zależy nam na razie na
rozpoznaniu które z tych elementów trzeba by było powiększyć zmniejszyć.
Jeśli chodzi o zmniejszanie to głównie
będziemy operować na obrazkach które powinny być mniejsze.
Czy mogą być trochę mniejsze dla urządzeń mobilnych i na tablecie przykładowo
zobaczę możemy to teraz zrobić tak żeby też nie było aż tak ciasno.
No i teraz okazuje się że ten element
komponent sami możemy nawet przenieść ponad wodę albo zostawić dosłownie malutki
malutki zahaczył nim o wodę i zobaczmy co by się stało gdy jest włączony Response
Lisa jest teraz spróbuje go powiększyć bo zyskałem trochę przestrzeni.
Mogę to zrobić ale po to żeby skierować od
środka i zobaczę z włączonym Response Flisa jest genialnie to wskazuje.
Tak wygląda bardzo fajnie wyciągnięto do odległości Grid w ten sposób.
Wygląda na to że tak czy inaczej te rzeczy
są tutaj na zakładkę więc mam do wyboru dwie opcje albo będę układał je np.
w dwóch rzędach czyli powiększa je i
zrobię z tego dwa rzędy albo spróbuję je zmniejszyć.
Zobaczmy teraz ile miejsca mamy do dyspozycji.
To 976 potrzebujemy w związku z tym to 976 podzielić na cztery.
Ale zanim podzielimy na cztery możemy odjąć jeszcze trzy odstępy które
muszą być powiedzmy po 8 pikseli czyli na przykład minus 24 piksele.
I teraz dopiero podzielimy na 4 i to
wyjdzie 230 8 także zaznaczam że Command Shift wszystkie te elementy a teraz
wpisujemy tutaj 200 38 i zobaczmy od kliku zaznaczam rozciąga
dzięki Response Fritza jest ładnie mi się układało.
No i wygląda całkiem nieźle poza tym że
mieliśmy chyba nieźle wycen wyrównane ikonę wewnątrz komponentów
no i w związku z tym są one wyrównane do lewej strony chciałbym żeby były wyrównane
do środka taka zmiana musimy na nią dość mocno uważać dlatego że dopiero będzie
okaże się że nie da się kogoś indywidualnie traktować każdego z tych
kawałków i dla jednego wygenerować drugi koniec.
Ale generalnie jeśli wszystkie te ikony zostaną w centrum w ich kontenerach to
właśnie będzie to miało taki efekt jak tutaj zaprezentowały.
Więc to jest ok ale z drugiej strony można by było zastanowić się nad tym czy właśnie
rzeczywiście wysokość tych ikon powinna to powinno być 60 pikseli.
Możemy zadecydować że to będzie 50.
Już wtedy będą one ładnie się mieścić
także to nie jest jakaś na ten moment kluczowa rzecz to wygląda wszystko dobrze.
Natomiast wydaje mi się że odrobinę przyciągną te sekcje w górę
natomiast w tej sekcji poniżej musimy coś zrobić musimy coś zmienić i teraz co można
zrobić to można spróbować zachować taki układ jak mamy teraz przyciągając to
zostawiają mamy trochę większy margines więc przyciągając to w tę stronę
zmniejszając trochę ten obrazek i ewentualnie może dałoby radę trochę
włącznie z tym Response Fritza zmniejszyć to nie tracąc na czytelność.
Wydaje mi się że jak najbardziej teraz
powiększy jeszcze obrazek a bardziej ja widzę Response Fritza jest nie zawsze jest
pożądany trzeba go akurat w tym przypadku wyłączyć żeby się dobrze skierowało
no i wygląda w porządku więc zostawiamy tak jak jest.
Natomiast z praktyki wynika że w momencie kiedy robimy te break point Response one
warto pomyśleć nie tylko o tym jak to wygląda w tym konkretnym brak bądź np.
1024 ale trzeba jeszcze uwzględnić to że zaraz może to być delikatnie węższy break
point i jak to się zmniejszy jeszcze dwadzieścia pikseli to ktoś może zawsze
zrobić po prostu skandując okno przeglądarki nawet nie chodzi o to że musi
posiadać taką konkretną rozdzielczość ale wtedy nie mamy zbyt dużego
pola do manewru czyli nie mamy jakiegoś dużego zapasu marginesu więc można przyjąć
taką strategię robienia brak momentów które zawierają jeszcze trochę luzu.
Zdecydowanie to rekomenduje żeby nie spychać elementów bo wtedy zaraz będziemy
musieli za kolejne 20 pikseli zrobić następny fragment a tutaj zostawiając np.
trochę mniejszy obrazek jak również dając następnie wytyczne
deweloperowi odnośnie skasowania tego elementu że możemy tutaj eskalować jeszcze
Pat King aż do jakiejś wartości i zobaczy że naprawdę fajnie może się to Response
nie zmniejszać i w ten sposób do tych 768 pikseli.
Myślę że spokojnie dojdziemy a dopiero w
tamtym raporcie trzeba będzie coś z tym zrobić i np.
usunąć obrazek albo po prostu umieścić jeden element na drugim.
Także zawsze pamiętać o tym co się stanie.
Trochę niżej bo mimo tych popularnych rozdzielczości które mamy.
Jest jeszcze masa różnych pomiędzy które
użytkownicy mogą zmienić a my musimy je za adres.
Następna następna sekcja znów umieszczamy ją w miarę na środku.
Tutaj ta sekcja jest o tyle pechowa że zostało razem z nią
wciągnięta do panelu warstw tło i gdybyśmy tego nie zrobili czyli
zaznaczyli sobie menu Slide a następnie je zgrupowanie
to tak naprawdę teraz tło może pozostać zawsze przyciągnie do prawej krawędzi a
ten element moglibyśmy w środku i ładnie by się zachowywał.
Natomiast myślę że w tej rozdzielczości
nie musimy tutaj z nim specjalnie nic kombinować wygląda dobrze i ma jeszcze
sporo oddechu czyli może do 768 uda nam się dojechać.
Teraz przesuwamy to trochę wyżej.
I zarządzanie tymi typami.
Nie będzie to wcale trudne.
Mamy wszystko ładnie zgrupowane więc w
zasadzie od naszej wyobraźni zależy to jak będziemy chcieli je ułożyć.
Natomiast jeśli znamy trochę HTML CSS to
możemy także dać naszemu deweloperowi wytyczne które dzięki którym
on po prostu stworzy taki komponent Grid który będzie
elastycznie automatycznie dostosowywać się do różnych rozdzielczości.
Natomiast tak czy inaczej warto to
zaprojektować jak mniej więcej byśmy chcieli żeby to wyglądało.
I moim zdaniem tak jest ok bo zostawia nam znowu jeszcze trochę oddechu aż do tej
rozdzielczości powiedzmy 768 więc jest w porządku jeśli chodzi o fakt.
Tutaj w zasadzie oczywistym rozwiązaniem jest po prostu umieszczenie pytań jeden do
jednego pytania pod drugim i pytanie tylko czy w tej rozdzielczości 1024 już robić.
Czy na razie jeszcze ponieważ mamy tutaj
trochę miejsca spróbować te pytania zmniejszyć.
Tak samo jak robiłam w przypadku
kawałków na górze czy przypadkiem ich nie zaznaczyć i zamiast 606 szerokości np.
zrobić tutaj 500.
No ale w tym w tej sytuacji musielibyśmy
jednak już zmniejszać kąty czyli narażamy się na takie ryzyko że jak ktoś zrobi
jakieś dłuższe pytania no to już nie będzie to zbyt dobrze działać.
Z tego powodu wydaje mi się że już w tej rozdzielczości spokojnie moglibyśmy.
Wejdź sobie do tych pytań zaznaczyć te dwa
które są z prawej strony umieść jedne pod drugimi.
No i przesunąć cały komponent na środek
natomiast nic nie stoi na przeszkodzie żeby w tym momencie go rozciągnąć i teraz
zobacz że właśnie na Response Française daje nam możliwość bardzo łatwego
ściągnięcia ponieważ my zrobiliśmy dobrze przygotowaliśmy komponent no to fajnie to
działa czy trzeba rozciągać do końca znowu.
Moim zdaniem nie
damy wytyczne deweloperowi żeby się skalą wiało tak daleko jak się da czyli np.
dotąd do tej rozdzielczości jesteśmy
bezpieczni natomiast raczej nie powinniśmy zaczynać od tej bo nie wygląda to zbyt
naturalnie więc po prostu zacznijmy od tego jak to dojedzie do 7 8 to
prawdopodobnie będziemy już gdzieś blisko tych krawędzi i odtąd do tej
rozdzielczości powiedzmy jakichś sześciuset pikseli
będziemy jeszcze mieli taką możliwość interakcji po tym co tutaj
jest tak że zabezpieczamy się znowu na przyszłość.
The Block Rise and Article.
Czyli mamy kafelki i znowu możemy albo je zmniejszyć albo możemy je inaczej ułożyć.
W tym komponent sensownie by było jeszcze spróbować je rozłożyć tak żeby
rzeczywiście były dostępne w widoku tabletu.
Aczkolwiek zobaczymy 394 ta szerokość.
Pamiętam że dla czterech kawałków mieliśmy 328 no to tutaj możemy spróbować np.
300 i zobaczyć jak to będzie wyglądało i
spróbujmy też trzysta zrobić dla kolejnych elementów czyli zmniejszymy wszystkie
a następnie spróbujemy cały ten komponent rozciągnąć
chyba jest ok nawet moglibyśmy 305 zrobić ale jednocześnie ok.
mamy trochę oddechu żeby jeszcze przejść na trochę mniejsze rozdzielczości
i teraz to co można zrobić to każdy z tych kawałków.
I znów pracujemy na instancja a nie na całym komponentu.
Jeśli chciałoby się tego zrobić komponent żeby wszędzie zmieniało się
w obrębie całego tego projektu no to musiałbyś aplikować sobie komponent zrobić
nowy Master tak żeby nie zmieniał się wariant pierwszy.
Ja zamiast tego wolę pracować na
instancjach po prostu zrobię trochę dłuższe kafelki w pionie
i teraz mogę przerzucić Leasing Team Work w każdej z instancji możemy ułożyć sobie
to wyżej a ten napis możemy po prostu podzielić.
Czyli zrobić to w ten sposób i Bruce'a Obama wrócimy pod spód.
No i w tym konkretnym przypadku zamiast dorabiać te kolejne elementy
tak czy inaczej my chcemy po prostu coś wytłumaczyć jakąś koncepcję którą mamy
więc można zwyczajnie sobie aplikować i ułożyć w ten sposób ten sam kawałek.
Kolejny element to get out.
I to jest w porządku i będzie jeszcze w porządku przez
przynajmniej jedną rozdzielczość więc zostawiamy tak jak jest i w folderze
możemy zwyczajnie zmienić wysokość tych pól tekstowych.
One w zasadzie domyślnie w HTML nam się
tak zachowają natomiast w samym erze ponieważ futer może być wyższe zamiast
elementów które są jeden po drugim umieści my obok siebie teraz możemy przeciągnąć to
do prawej krawędzi tak maseczki i ułożyć sobie ładnie linki w ten sposób i about.
Wygląda na to że to są wszystkie
modyfikacje które powinniśmy zrobić w widoku tabletu.
No i kolejny widok robimy w następnej lekcji.
Do usłyszenia.