Adobe XD: Widok telefonowy
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+
Cześć Witaj w kolejnej lekcji ilość
literacki naszego ja się znacznie zwiększyła a my teraz robimy jeszcze
wersję telefon nową Command D publikuje 768 ten art Board.
To będzie szerokość 380 Typowa szerokość telefonu i zmieniamy szerokość ale z
włączonym Response i Flisa jest na razie czyli trzysta osiemdziesiąt.
Teraz wyłącza Response Française i do
wysokości dodaje na przykład 3 tysiące pikseli.
Po to żebym mógł teraz mieć bardzo dużo miejsca na to żeby
zaznaczyć wszystkie sekcje poza tą którą z którą pracuję i umieścić je trochę niżej.
No dobrze to przejdźmy do głównej sekcji o
ile lekcje w poprzednich rozdziałach były bardzo uporządkowane i po kolei to teraz w
zasadzie specjalnie przechodzę przez taki mój proces myślenia o tym co zrobić.
Co teraz począć z takimi elementami auto.
Jeżeli chodzi o menu to ono się już tutaj nie mieści.
Menu w kontekście telefonu nie jest najlepszym rozwiązaniem.
Nawet jeżeli by było całkiem dobrze
ułożone na górze ponieważ musimy wziąć pod uwagę tzw.
target w skrócie chodzi o to czy coś jest wygodne dotknięcia bo palec jest
zdecydowanie mniej dokładnym wskaźnikiem niż myszka.
No i jeśli zmniejszamy odległości
zmniejszamy odstępy między linkami staje się to bardzo niewygodne w nawigacji.
Taki minimalny target mówi się że to 44
punkt 34 na 44 punkty ale w przypadku menu mobilnego zdecydowanie lepiej jest po
prostu pozbyć się go w tej formie i zrobić zupełnie inne.
Jakie. No takie które będzie np.
dostępne po kliknięciu jakiejś ikonki hamburgera czy zrobimy je np.
na dole.
Ale ja po prostu sobie z tego nie zrezygnuję.
Poza naszym logo gdzie tutaj jest to nasze
logo jest pomocą komend X i logo zostawię w tej wersji mobilnej wstawia sobie
na górę tak żeby reprezentowało jednak nasz brand.
A kolejna rzecz na którą musimy się zastanowić to jest ten tekst zwłaszcza
tekst którą tutaj już możemy pozwolić sobie na naprawdę bardzo mały margines np.
rzędu 8 czy 12 pikseli z od prawej i lewej krawędzi.
Ale tak czy inaczej jakiś oddech zostawiamy bo inaczej użytkownik pomyśli
jeżeli coś będzie ściągnięte do skrajnej krawędzi że np.
da się przewijać w prawo czy w lewo a tego byśmy nie chcieli.
Co z tekstem.
Wspomniałem że nie jestem zwolennikiem zmniejszania tekstu na urządzenia mobilne.
Wręcz przeciwnie czasem nawet powiększać tekst ale dotyczy to tekstu kopii który
jest wyraźniejszy na urządzeniach mobilnych.
Wtedy lepiej się go czyta natomiast tekst nagłówków czasem rzeczywiście warto trochę
zmniejszyć bo w sytuacji gdzie mamy widok gdzie ten sport hejt może być np.
około 550 pikseli albo może troszeczkę więcej.
Około sześciuset.
Mam tutaj też na względzie ten cały interfejs paska
przeglądarki i przewijania często na dole też jest interfejs w telefonie.
No i rzeczywiście tego jest zdecydowanie mniej np.
zostawmy sobie na 550.
No to teraz widzieliśmy tylko ten duży
nagłówek więc to co możemy zrobić to zaznaczyć takie pole.
I ja przechodzę do pola typu point.
Dzięki temu mam możliwość kliknięcia na
dół i zestawienia tej samej struktury tekstu czyli tych
trzech linii a jednocześnie zmniejszenia tego nagłówki.
Czy to muszę zmniejszać. Nie muszę.
Moim zdaniem jest w porządku.
Czy guzik może zmniejszać czy też nie.
Po prostu zmieniliśmy trochę ten nagłówek
ale nadal jest on jak najbardziej czytelny na urządzeniach mobilnych.
Obawiam się tylko że jest w środku.
Jest cudownie a teraz mogę jak widzisz umieścić
te kafelki wyżej w wyniku zastosowania tych kafelki ach Response Force One po
prostu się zachowały jeden po drugim więc można teraz spróbować.
Gdzie tutaj mamy jakieś właśnie pod spodem
jest ten jeden kawalek i jeszcze jeden musimy wyciągnąć.
Zdaje się że ten ok.
Shift i strzałka w dół po prostu
umieszczamy to w odpowiedni sposób zostawiam taki sam
margines odstęp i w ten sposób będą ułożone nasze kafelki.
Jedyne co moglibyśmy przemyśleć czy przypadkiem nie zmienić ich wysokości.
Tutaj wysokość jest 140 moglibyśmy spokojnie zrobić 120 zaznaczyła.
Wszystkie i trochę zmniejszyli
jednocześnie bo starajmy się teraz zadbać o to aby odstępy między nimi były równe
a mając to zrobione możemy złapać za całą grupę i dostosować odstępy w pionie
odległości w pionie i teraz zyskaliśmy trochę miejsca a jednocześnie nie
straciliśmy na czytelność więc wygląda to w porządku.
Teraz następna sekcja no i w tym momencie już będziemy mieli problem z tym
na główkę ale znowu ten nagłówek można albo potraktować w ten sposób że jeśli
chodzi o Body kopii to ja zwykle staram się domyślne zachowanie HTML a zmienić to
tak żeby po prostu się rozciągał ten element.
A jeśli chodzi o nagłówek no to możemy
teraz sprawdzić jaką wielkość wybraliśmy tutaj jest to 35 i możemy odnieść się do
tej wielkości po prostu wszystkie nagłówki zrobić 35.
Jeśli chodzi o te elementy wpływające to
czyli to co znajduje się w tle to też możliwe że stało się to już trochę
za dużo więc można się pozbyć niektórych po prostu je ukrywając.
Niektóre z nich będzie można przykładowo może nie jedną koparkę tylko
ale przesunąć znowu tak żeby te były do lewej z prawej strony i do lewej strony
wyrównane w ten sposób nawet chyba bardziej trzeba było przesunąć te kropki
to już jest można powiedzieć że to jakaś wtórna która
jest tylko metalem estetycznym i można na etapie Development zadecydować jak ma się
to skierować ja jeszcze muszę zadbać o to aby to było równo właśnie w poziomie.
No i kolejna sekcja do zrobienia.
Teraz zobaczmy co się stanie z włączoną
funkcją Response i wpisać jak zaczniemy to eskalować.
Już zdecydowaliśmy że tutaj wielkość to
będzie 35 i zmienimy wielkość tych nagłówków więc dopracować to.
No i myślę że te numery po prostu trzeba te
sekcje trzeba umieścić jedna pod drugą i w środku.
Czyli zrobimy to tak to też będzie być odkrywane zaraz jeszcze
numerki przesunie jeszcze niżej tak żeby nam się zrobiły dobre odstępy pomiędzy
guzik em to można przecież przesunąć i zrobić trzy linie.
Ten sposób ma się to skasować i teraz już
tę sekcje zaczynają wyglądać teraz ładniej lepiej.
Załóżmy ja w środku.
Możemy zadecydować co się stanie z tymi numerami.
Z tymi statystykami Ja myślę że po prostu możemy je ułożyć jedna pod drugą.
Jeszcze tu dołożyć trochę tła na dole znów warto zadbać o mikro GRID.
Jeśli będziesz na nim pracowała
przynajmniej o to żeby odstępy parkingi były w miarę równe.
No i teraz oddech pomiędzy poszczególnymi akcjami też powinien być równe.
Przy czym na telefonie może on być już trochę mniejszy.
Czyli moglibyśmy się pokusić o to aby
trochę tę sekcję jeszcze ze sobą wcisnąć ale dalej zachowując trochę oddechu.
Nienaturalne będzie takie długie
skierowanie pomiędzy akcjami na telefonie więc warto zwrócić na to uwagę.
Następna sekcja jak to wszystko poukładać.
Mamy teraz znowu możliwość np.
usunięcia tego całego elementu i
skorzystania z tego czyli pożycza sobie z autu jego układ.
Dlatego że wydaje mi się że lepiej tutaj po prostu będzie zostawić menu.
W ten sposób natomiast sam ten element
po prostu umieścić na dole gdzie rozciągnięty od lewej do prawej.
Na razie patrzę tylko na treść która tutaj się pojawia.
Zostawimy to tak jakby domyślnie w HTML u
się ta treść zachowywała czyli po prostu ona się
rozlewa w polu tekstowym zostawimy sobie odstęp odległość powiększy to pole
i umieści grafikę możemy w ogóle się jej pozbyć możemy umieścić ją gdzieś tutaj.
Szczerze mówiąc nie wiem może
fajnie będzie wyglądać tak że możemy trochę powiększyć pole i ją też zostawić
ale jeżeli twierdzimy że ona nie pomaga tutaj pełnić funkcję naszemu komponent owi
to po prostu możemy się równie dobrze jej pozbyć.
Ja na razie zostawię i przejdę do kolejnej części to jest ta część z logo typami.
I w tym momencie już nie ma sensu robić
jej jako taką chmurę tagów tylko powinniśmy się tutaj zajmować a następnie
poukładać najpierw zajmiemy się tym głupkiem a zmniejszymy go do 35.
Tak jak wszystkie nasze nagłówki on z jakiegoś powodu
nie przez kierował się dobrze ale to nie istotne ale możemy go rozciągnąć.
Bardzo możliwe że po prostu nie był idealnie na środku i
dlatego fajnie było wcześniej o to jeszcze jeszcze zadbać ale teraz jest OK.
Nie podoba mi się tylko ta linia która
teraz w przypadku wielkości 35 musi być zmieniona bo jest 61 i trzeba by było też
to zmienić w tych pozostałych nagłówków które mają dwie linie tekstu.
Te akurat zobaczymy jaka tu jest linia a
ona się skierowała do 40 no to dobra to zróbmy na wszystkich 40.
I tak samo zrobimy właśnie tutaj
i teraz jeśli chodzi o logo no to już powinniśmy raczej zrobić to w
taki sposób że wybieramy sobie be grunt i wskazujemy Granady tak
teraz usuwamy wszystkie inne logotyp tak jak powiedziałem to nie jest.
Nie chodzi tutaj o to aby wszystkie te elementy zrobić idealnie tak
jak powinny być widoczne w każdym widoku szkoda tracić na to czasu.
Deweloper w momencie kiedy zobaczy coś takiego no to będzie już wiedział jak ma
te elementy rozmieścić i nawet jeśli sobie je teraz podzielimy no to możemy zostawić
to tak jak jest i będzie wiedział jak te roboty powinny się tutaj ułożyć.
Możemy po zaznaczać same tła i delikatnie
je zmniejszyć mając na uwadze to że niektóre loga są
poziome więc prawdopodobnie będziemy musieli zostawić trochę więcej miejsca po
lewej i po prawej stronie ale tak wygląda to chyba nieźle.
Więc przechodzimy do kolejnej sekcji
sekcja efektu znów umieszczamy ją na razie mniej więcej orientacyjny nie później.
Pamiętajmy o tym aby te te odstępy dostosować i znów najpierw możemy
zmniejszyć to do trzydziestu pięciu automatycznie się linia zmieniła do 40.
To także jest w porządku.
Jeśli to ma zostać to może przesunie się to może może trochę zmniejszymy ale
generalnie chyba będzie łatwiej później przesunąć.
No i co zrobić z tymi pytaniami.
Też wydaje mi się że jak na wielkość
ekranu telefonu i to jak blisko trzymamy telefon to one będą dosyć duże.
Możemy w związku z tym pozwolić sobie na to aby trochę zmniejszyć np.
do 24.
Ale one przy 24. Teraz jest OK.
Tak czy inaczej się nie zmieszczą w jednej
linii więc powinniśmy tak czy inaczej założyć że te pytania będą raczej na
przykład właśnie w dwóch liniach w ten sposób i teraz możemy próbować dostosować
dynamikę ustawić odpowiednie odstępy strzałę czy też tło też to zaraz jeszcze.
Najpierw wstępnie zmniejszymy a teraz przesuwamy cały komponent.
I zobaczymy.
No prawie mi się udało trafić także z
Response Fritza jest łatwo można sobie już to dostosować ale zakładamy że tak czy
inaczej to pytanie będzie na dwie linie nie ma sensu tego zmniejszać aż do takiej
małej skali gdzie byłoby to w jednej linii ponieważ wtedy byłoby niespójne z całym
naszym autem strzałki możemy zostawić po prawej stronie i teraz wygląda to już
całkiem nieźle i możemy powielać ten komponent z Time i to przyciąga.
I jeszcze raz zatem w tym.
I ja już teraz nie będę tego robił
ponieważ byłoby to powtarzanie tych czynności ale pamiętaj że ten komponent ma
dwa stany czyli trzeba się jeszcze w trybie Response przełączyć w drugi stan.
No i najlepiej ten drugi stan też po prostu zmieniać tak żeby wyglądał
dobrze na telefonie czyli pytanie po rozwinięciu.
No bo wtedy deweloper będzie miał większą
wiedzę na temat tego jak zrobić szybko ten stan po kliknięciu przez użytkownika.
Nam zostały ostatnie sekcje do zrobienia i tak jak w przypadku poprzedniej sekcji
mogę jeżeli nie chce korzystać z tego układu poziomego.
W tym momencie
to mogę po prostu usunąć ten komponent i skorzystać z tego układu pionowego.
Mógłbym oczywiście zrobić to też poziomo ale myślę że w przypadku tych
rzeczy to fajnie będzie jednak wrócić do tego układu który mieliśmy wcześniej.
Teraz znowu przejdę w Point text po to żeby zmniejszyć do 35.
Mogę pozostałe kafelki w zasadzie usunąć
ponieważ ten będę chciał chyba jakoś trochę dopracować.
Wygląda nieźle ale zobaczymy może go jednak przesunąć na całą szerokość.
Teraz będzie lepiej będzie trochę bardziej
spójny z tymi innymi częściami to zróbmy odpowiedni odstęp i tutaj i tutaj.
A może pewnie popracować jeszcze trochę
jeśli chodzi o GRID i mikro GRID ale chcę jedynie zasygnalizować ci
jak uważam że powinno to być zrobione a więc kolejna sekcja w ten sposób.
No i ostatnia sekcja przed fotelem. Kłopot.
Znowu zmniejszamy jest jeden element który zdecydowaliśmy
się zmniejszyć dużo elementów wyrzucali same.
Takie jak obrazki które były niepotrzebne.
Ten akurat w całości nie ma a tutaj to się pięknie zmieści na całą szerokość także to
co sugeruje zrobić to po prostu ze sobą i trochę eskalować.
Wyciągniemy do lewej krawędzi upewnij się
że odstępy są ok i nie musimy tutaj w ogóle nic zmieniać.
Poza tym że te grafiki możemy przesunąć odpowiednie miejsce grafiki tła
i sam futer futer powinniśmy po prostu na pewno rozciągnąć
i prawdopodobnie zdecydujemy się na to żeby każdy z tych elementów zrobić sobie w
osobnej linii buty później linki czy to powinno być w kanale środka.
W zasadzie moim zdaniem nie musi to być
wyrównane do środka z umówmy się do logo razem z Belką.
Przy takiej rozdzielczości już warto by było tą belkę
albo zrobić na całą szerokość albo zrobić przynajmniej na szerokość do tych magnesów
które zarządzili byśmy to umieścili generowane plus copyright.
Można to połączyć w grupę i wtedy wyrównać te łatwiej do środka.
A same ikonki mediów społecznościowych umieściły trochę poniżej.
Nie chcecie pokazywać dokładnie tego co do
piksela ponieważ myślę że masz już teraz dokładnie wiedzę na temat tego co powinno
być zrobione a reszta to generalnie taka trochę żmudna praca i
trzeba chwilę się z tym napracować ale z drugiej strony
zobaczysz że Response Fritza jest i samo Adobe xD dzięki temu że tak szybko fajnie
działa pozwala nam bardzo łatwo i szybko sobie poukładać.
Mamy w związku z tym cztery leje żółte
czyli ten topowy od którego wyszliśmy aż do telefonu w dół ale twoim zadaniem praca
domowa jest przygotować jeszcze jeden szerszy break point ponieważ możemy
iść prawą stroną po to żeby zmniejszać ale też niektórzy mają zdecydowanie większe
monitory i przykładowo tutaj warto by było zrobić jeszcze taki out zaznacza Response
Française który ma 1920 pikseli na szerokość.
Zobacz jak to wygląda domyślnie.
Sam Response Willisa jest sporo pomógł ale
jest tu dużo rzeczy do układania jak również można by było zrobić nawet
jeszcze jeden projekt taki który ma przykładowo 2560 pikseli.
Wtedy gdybyśmy za adresowe te wszystkie
rozdzielczości rzeczywiście można powiedzieć że mielibyśmy bardzo dobrze
przygotowane auto także pod RWD i programista miałby z tym zdecydowanie
mniej pracy ponieważ te pozostałe dwa auta to już jest po prostu przestawienie
elementów dokładnie tak jak to robiliśmy przez trzy ostatnie lekcje.
To ja nie będę tego już w całości
tłumaczył ale zostawiam to tobie jako pracę domową.
Tymczasem to wszystko na teraz. Do usłyszenia już za chwilę.