10 porad dotyczących eksportowania zasobów wektorowych ze Sketch do Androida

Zalety wektorów w stosunku do rastrów są oczywiste. Zasoby wektorowe są mniejsze, łatwe do edycji i znacznie łatwiejsze do zarządzania (szczególnie pod względem wielkości i koloru).

Pracuję na stosunkowo złożonej aplikacji, która obsługuje wiele różnych platform. Wraz ze wzrostem rozmiarów i rozdzielczości ekranu (patrząc na Ciebie, Nexusa 6P) dla Androida, uważaliśmy, że konieczna jest aktualizacja istniejących zasobów z formatu rastrowego na format wektorowy, aby zachować skalowalność zasobów ze względu na potrzebę obsługi różnych rozdzielczości.

Większość zasobów, których obecnie używamy, została pierwotnie utworzona za pomocą Sketch. Spowodowało to kilka interesujących problemów podczas próby konwersji. Ponieważ zasoby wektorowe są tylko częściowo obsługiwane przez system Android w obecnym interfejsie API (Android 24), wyeksportowane zasoby uległy awarii na wiele nieoczekiwanych sposobów.

Z punktu widzenia projektanta służy to jako dziennik śledczy. Kilka rzeczy nauczyliśmy się, próbując przekonwertować wszystkie zasoby rastrowe w aplikacji na wektory dla Androida. Podręczniki użytkownika Android Studio nie były szczególnie przydatne, jeśli chodzi o rozwiązywanie problemów.

Niezupełnie „pełne wsparcie”

Wiele zapisanych tutaj reguł dotyczy eksportowania zasobów wektorowych za pomocą Sketch. Są to jednak również dobre wytyczne dotyczące eksportowania czystych i funkcjonalnych zasobów wektorowych do użytku na wszystkich platformach.

1. Niech to będzie proste Głupie

Ta podstawowa zasada projektowania oprogramowania dotyczy również zasobów: im prostsze kształty, tym lepiej. Spróbuj użyć prostych kształtów, aby utworzyć złożone zasoby, których potrzebujesz. Ogólna zasada jest taka, że ​​im mniej ścieżek i kotwic jest używanych, tym „czystszy” jest. Użycie jednego kształtu jest zawsze lepsze niż użycie wielu nakładających się kształtów w celu utworzenia zasobu.

2. Unikaj używania masek

Maski wykonane przy użyciu Sketch nie są obsługiwane przez bieżącą wersję interfejsu API Androida. Wszelkie maskowania wykonane w programie Sketch są ignorowane przez system Android VectorDrawble (AVD), a maski wykonane w programie Sketch czasami powodowały awarię programu Adobe Illustrator. Jeśli zachodzi sytuacja, w której należy utworzyć efekt cieniowania, należy zastosować nakładający się kształt na istniejącej warstwie na rzecz masek.

Użyj operacji znajdowania ścieżki „Przecięcie” na warstwie cieniującej z warstwą podstawową, aby utworzyć potrzebny kształt

3. Wykonuj kontury, a nie obrysy

W sytuacjach, w których jest to możliwe, staraj się unikać pociągnięć, aby utworzyć pożądane kształty. Pociągnięcia nie zawsze są odpowiednio skalowane z resztą obrazu. Ponadto AVD nie rozróżnia różnych pozycji granic i traktuje wszystkie granice jako „środkowe” pociągnięcia.

Oznacza to, że wewnętrzna krawędź o grubości 10 na Sketch staje się środkowym obrysem o grubości 20 podczas renderowania na AVD.

Ponieważ kontury są kształtami, zawsze mają pożądany wygląd po skalowaniu lub transformacji. Kontury są również znacznie łatwiejsze do pracy, jeśli chcesz zastosować operacje poszukiwacza ścieżki.

Możesz łatwo zmieniać obrysy w kontury, używając CMD + Shift + O.

4. Pathfinders są twoim przyjacielem

Najbardziej złożone kształty można tworzyć z kompozycji prostszych kształtów za pomocą operacji wyszukiwania ścieżki. Zapoznaj się z nimi. Utworzone w ten sposób kształty mogą być poprawnie wyświetlane na każdym urządzeniu.

5. Adobe Illustrator to najlepsze narzędzie do rozwiązywania problemów

Adobe Illustrator renderuje zasoby wektorowe w taki sam sposób, jak VectorDrawable Androida (z niepotwierdzonych doświadczeń). Jeśli zasób nie wyświetla się poprawnie w AVD, spróbuj zdiagnozować problem za pomocą programu Illustrator. Często rozwiązanie jest tak proste, jak usunięcie wypełnienia.

Typowy problem podczas eksportowania zasobów dla Androida za pomocą Sketch.

6. Połączone i przekształcone kształty mogą nie wyglądać tak, jak wyglądają

Transformacje, takie jak odbicia i obroty wykonane w programie Sketch, nie są w pełni obsługiwane w systemie Android VectorDrawable. W rezultacie przekształcone warstwy nie zawsze wyglądają tak, jak oczekujesz. Najłatwiejszym rozwiązaniem byłoby spłaszczenie każdej ścieżki, która ma transformację, aby transformacja stała się częścią ścieżki.

Jednak w sytuacjach, w których transformacje są stosowane do całych grup, jedynym sposobem obejścia tego jest ręczna transformacja i pozycjonowanie każdej pojedynczej warstwy.

7. Folie są twoim przyjacielem…

Folie są odpowiednio obsługiwane i wyświetlane na wszystkich urządzeniach i platformach, używaj ich do tworzenia cieni / podświetleń tam, gdzie to właściwe.

Zwróć uwagę na cień pod stekiem

8.… a gradienty nie są

Z drugiej strony AVD nie obsługuje obecnie gradientów. Tak wykonane aktywa prawie na pewno pękną podczas importu. Cieniowanie celowe powinno być stosowane na rzecz technik cieniowania gradientowego.

Cień pod stekiem znika

9. Eksportuj obszary robocze, a nie warstwy

Używanie obwiedni w programie Sketch do definiowania wymiarów zasobu wektorowego jest techniką oldschoolową. Mimo że nadal jest użyteczną metodą definiowania granic dla eksportowania wektorów, lepszym podejściem jest utworzenie obszaru roboczego o takich samych wymiarach, jak rzutnia, którą próbujesz zdefiniować. Warstwa obwiedni w zasobie jest traktowana jako osobna, ale przezroczysta ścieżka po przetłumaczeniu na VectorDrawable xml.

10. Spłaszczanie kształtów rozwiąże większość problemów

Wyeksportowane zasoby zawierają metadane opisujące ich transformacje i kompozycje podczas edytowania, ponieważ informują użytkowników o tym, „jak” je utworzono. Jednak jeśli chodzi o eksport i renderowanie tych zasobów, ta dodatkowa informacja o tym, jak została skomponowana, często powoduje więcej problemów niż rozwiązuje (obroty i odbicia wykonywane w Sketch nie są obsługiwane), oprócz zwiększania rozmiaru pliku.

Wyświetlany jest tylko stan końcowy zasobu, dlatego w tym przypadku liczy się tylko wygląd stanu końcowego.

Spłaszczenie kształtu spowoduje przekształcenie operacji transformacji i poszukiwacza ścieżki w zasób. Zmniejsza to rozmiar pliku, usuwając nieaktualne informacje, i pozwala dokładnie wyświetlić podgląd obrazu.