Adobe XD: Rozdzielczości i Skalowanie

CC 2020+

0:00Witaj w kolejnej lekcji, w której chciałbym zacząć

0:02od pewnych wyjaśnień dotyczących rozdzielczości.

0:04Co prawda przygotowałem cały, obszerny,

0:06dodatkowy materiał, który możesz zobaczyć i zdecydowanie go polecam,

0:10dotyczący tego jak projektować UI na ekrany różnej rozdzielczości,

0:13jak te ekrany działają, jak działa Retina ale teraz chciałbym żebyś posiadał

0:17przynajmniej minimalną wiedzę na ten temat.

0:19Jeśli nie obejrzysz tamtego warsztatu.

0:20Otóż to jest tak, że wybierając konkretną rozdzielczość

0:23my w zasadzie pracując w UI nie musimy się nią do końca przejmować.

0:28Raczej pracujemy w kontekście danego typu urządzenia,

0:31będziemy przygotowywali przynajmniej layout desktopowy, layout tabletowy i mobilny.

0:37Aczkolwiek no, te rozdzielczości zawsze gdzieś tam pod spodem są,

0:40natomiast to, co widzisz teraz to jest rozdzielczość mojego monitora

0:44i opcje na Macu, które pozwalają ją dopasować.

0:47Jeśli przejdziemy sobie tutaj do opcji "Scaled",

0:49no to okazuje się, że mamy kilka ustawień do wyboru

0:52i chciałbym zwrócić Twoją uwagę na to,

0:54co jest napisane tutaj na dole, czyli "Looks like (...)" coś tam.

0:58Ja w tym momencie mam ustawioną rozdzielczość, która wygląda jak 2048 na 1152

1:03ale tak naprawdę mój ekran pod spodem jest ekranem 5K.

1:09W związku z tym zawiera dużo więcej pikseli

1:10niż te 2048 na szerokość ale po prostu zostaje w ten sposób przeskalowany,

1:16że wygląda tak, jakby to było 2048 na 1152.

1:21Dlaczego te opcje tu są

1:23i co, jako użytkownikowi, mi to daje.

1:25Otóż to, że w momencie kiedy wybiorę rozdzielczość, która wygląda np.

1:29jak 1600 na ekranie 5k będę miał wszystko zdecydowanie większe i bardziej wyraźne.

1:33Dlatego ja też nagrywam np.

1:34w takiej rozdzielczości co jest mniej więcej wygląda jak Full HD,

1:37więc będzie u ciebie dobrze wyglądało.

1:40Gdybym nagrywał natywne 5k wszystko byłoby maluteńkie.

1:43Wszystkie opcje interfejsu byłyby ledwo widoczne.

1:45No i takie właśnie skalowanie ekranu to cecha wszystkich nowoczesnych ekranów

1:51zwłaszcza tych Retina i tych na urządzeniach mobilnych,

1:53które zawierają bardzo gęstą siatkę pikseli.

1:56Dzięki gęstej siatce pikseli, oczywiście wszystko jest dużo bardziej wyraźne

2:00ale jednocześnie system stosuje skalowanie,

2:03które pozwala, żeby dla użytkownika było to po prostu duże i czytelne.

2:07I teraz jak to wpływa na projektowanie UI i czy w ogóle.

2:10Otóż oczywiście, że tak, no bo to determinuje właśnie rozmiar

2:13w którym zaczynamy pracować wyjściowo.

2:16Chcę żebyś pamiętał o tym, że ten rozmiar wyjściowy to zawsze tzw. rozmiar w skali 1

2:19i w Adobe XD też będziemy zawsze pracowali w tej skali 1.

2:24Co to jest skala 1?

2:25To jest właśnie ta "Looks like (...)".

2:27Czyli "Wygląda jak", czyli przykładowo,

2:29czyli np. dla nowego iPhona będzie to "Wygląda jak"

2:33370 pikseli, tymczasem pod spodem będzie on miał 1080 pikseli szerokości,

2:40więc wszystko będzie jakby przeskalowane 3 razy.

2:43I to jest właśnie skala o której mówimy.

2:45Mamy różne skale może to być 2, 3, 4 w przypadku Androida i np.

2:49dużych gęstości pikseli będziemy mieli większe skalowanie, żeby to było wyraźne,

2:53ale pod spodem tak naprawdę mamy dużo, dużo więcej pikseli.

2:57Natomiast my, jako designerzy, projektujemy zawsze w skali 1

3:01czyli w tej skali "Looks like (...)",

3:02czyli 1366 będzie dobrym wyborem a nie np.

3:05dla mojego ekranu 5 tysięcy pikseli szerokości,

3:08bo wtedy mógłbym jako UI designer wkleić tutaj dużo pierdół do tego layout'u,

3:13bo miałbym bardzo dużo miejsca.

3:14Natomiast zaczynamy od tego rozmiaru i to będzie poprawne zachowanie.

3:19Natomiast niesie ono za sobą jedną konsekwencję, jeżeli pracujemy z bitmapami, czyli np. ze zdjęciami,

3:25no to musimy pamiętać żeby te zdjęcia dostarczać w odpowiednio lepszej jakości.

3:30No optymalna jakość dla tego ekranu 5k,

3:32byłoby to zdjęcie 5k, jeśli miałoby się wyświetlać na całą szerokość a nie 1366.

3:37Jeśli dostajemy, dostarczymy zdjęcie o szerokości 1366

3:41wyświetlone na ekranie 5k, mimo że to jest "Looks like (...)",

3:45ale jednak pod spodem, natywnie to zdjęcie tych pikseli nie ma,

3:48zostanie ono nieładnie rozmyte.

3:50Jakie rozwiązanie tej sytuacji proponują inżynierowie Adobe XD?

3:53Otóż mam zdjęcia z Unsplash'a, w całkiem niezłej rozdzielczości.

3:58Command + i na Mac'u pokazuje, że to 1688 na 3000 pikseli

4:03czyli mamy 3000 pikseli na wysokość.

4:06Teraz po prostu przerzucam je w ten sposób do XD i upuszczam na interfejsie.

4:11I co się okazuje?

4:12Już na pierwszy rzut oka widać, że to zdjęcie w pewien sposób

4:15zostało przeskalowane.

4:16No, bo przecież miało 1600-coś

4:18a nasz artboard ma szerokość 1300.

4:21No i rzeczywiście tak jest.

4:22Okazuje się, że szerokość tego zdjęcia po przerzuceniu do XD to 844x1500.

4:28Ta wartość nam sugeruje, że to po prostu

4:30zostało ciachnięte na pół, ponieważ wysokość tu była 3000.

4:34No i rzeczywiście w ten sposób Adobe XD

4:37niejako zabezpiecza nas przed dostarczeniem gorszej jakości

4:42właśnie zdjęć i sygnalizuje, że to zdjęcie prawdopodobnie jest za małe na ten layout.

4:47Mimo, że rozmiarem jest ono większe niż 1366,

4:50to na większości urządzeń będzie przeskalowane

4:52i ta popularna skala to jest właśnie 2 razy,

4:55dlatego zostało poglądowo zmniejszone o pół wielkości, szerokości i wysokości,

5:00żeby pokazać nam czy wystarczy czy nie wystarczy.

5:03No i okazuje się, że nie wystarczy.

5:05Naturalnie pod spodem mamy więcej tych pikseli,

5:06czyli w tym layout'cie ja mogę spokojnie to zdjęcie sobie przeskalować

5:10do 1366 szerokości i ono wygląda, przynajmniej tutaj u mnie, całkiem nieźle.

5:17Natomiast jeżeli już się zaskaluje,

5:19to okaże się, że nie jest to najlepsza z możliwych jakości, jaka tutaj jest

5:23i ono tak naprawdę potrzebowało by jeszcze trochę pikseli,

5:27aby móc być wyświetlane idealnie na tych rozdzielczościach typu Retina.

5:29Czyli pamiętaj proszę, że to nie jest tak, że XD po prostu przecina

5:33ten rozmiar zdjęcia o połowę, ono wrzuca zdjęcie pełnej rozdzielczości

5:39ale sztucznie tak jakby przeskalowuje je o połowę.

5:42Oczywiście tę połowę możesz sobie odzyskać

5:44skalując to w górę i będziesz miał te detale

5:46ale jednak jest to jakaś sygnalizacja od Adobe XD,

5:49że na tych nowszych wyświetlaczach

5:51może to zdjęcie w tym przypadku akurat być niewystarczającej jakości.

5:55W przypadku bitmap, zwłaszcza takich które gdzieś chcemy umieścić np.

5:58na jakimś tle.

5:59No nie będzie miało to aż tak dużego znaczenia

6:02ale inne asset'y np.

6:03gdybyś miał ikonę w plikach rastrowych

6:06czego zdecydowanie nie polecam,

6:08no ale one będą wyglądać naprawdę bardzo kiepsko,

6:11jeżeli nie dostarczy ich w odpowiedniej jakości.

6:14Na wszelki wypadek zawsze najlepiej

6:16korzystać z wektorów a z bitmap tylko tam, gdzie to absolutnie konieczne,

6:20ponieważ aparaty nie robią zdjęć jeszcze w wektorach,

6:23no to będzie to właśnie tylko i wyłącznie w przypadku zdjęć i proponuje tego się trzymać.

6:28Jeśli to nie jest zdjęcie zawsze musi to być format wektorowy

6:32a o formatach ich importowaniu i współpracy z innymi aplikacjami

6:35opowiem Ci właśnie w kolejnej lekcji.