Produktywne prototypowanie XD — samouczek dotyczący komponentów Adobe XD

System komponentów Adobe XD zapewnia projektantom zaawansowane funkcje do prototypowania produktów cyfrowych. Jednak nie jest pozbawiony dziwactw i wymaga szczególnej opieki. Wykorzystanie inteligentnych skrótów i postępowanie zgodnie z najlepszymi praktykami umożliwi projektantom usprawnienie przepływów pracy prototypowania XD.

Od czasu oficjalnego publicznego udostępnienia pod koniec 2017 r. program Adobe XD poczynił ogromne postępy w kierunku stania się wysoce konkurencyjnym narzędziem do tworzenia szkieletów i prototypowania dla projektantów UX. W szczególności nowy system komponentów rozszerza rodzaj interakcji, z którymi projektanci mogą eksperymentować. Mimo to komponenty nie są pozbawione dziwactw i wad. Podczas pracy z komponentami XD pomocne jest przyjęcie zestawu praktyk przepływu pracy, aby uniknąć pracochłonnej pracy i wykorzystać pełny potencjał systemu.

Czym są składniki Adobe XD?

Komponenty XD to wielorazowe grupy elementów, takie jak tekst, kształty lub linie. Komponent ma „Komponent główny”, który służy jako element nadrzędny, oraz „instancje” lub elementy potomne, które są umieszczane w obszarze roboczym. Podczas zmiany komponentu głównego zmiany są propagowane do wszystkich jego instancji.

Zastępując poprzedni „symbol” system XD, który służył podobnemu celowi, komponenty oferują kluczowy wyróżnik . Mogą mieć wiele stanów , które odpowiadają na różne wejścia zdefiniowane w trybie prototypu XD. Na przykład przycisk może mieć stan domyślny, ale zmieniać swój wygląd po najechaniu lub kliknięciu. Może odtwarzać dźwięk po kliknięciu, a nawet zmieniać jego wygląd zgodnie z danymi wejściowymi z rozpoznawania mowy.

System komponentów oszczędza czas, ale wymaga szczególnej opieki. Przemyślane podejście i starannie przygotowany przepływ pracy są niezbędne, aby wykorzystać moc systemu.

Zalecana jest znajomość Adobe XD

Projektanci z dość dużym stopniem zaznajomienia się z Adobe XD odniosą największe korzyści z poniższych wskazówek i sugestii. Aby uzyskać przewagę, pobierz zestaw Adobe XD Design Kit ze strony głównej Google Material Design. Zestaw zapewni zestaw komponentów Adobe XD do eksperymentowania i dekonstrukcji.

Wskazówka nr 1 – Rozważ wszystkie stany przed utworzeniem komponentu

Tworząc komponent ze stanami po raz pierwszy, projektanci powinni zrozumieć, jak potencjalne zmiany w komponencie mogą wpłynąć na inne instancje. Aby to zilustrować, rozważmy rozwijane menu z kilkoma stanami:

• Stan domyślny : menu jest zwinięte
• Stan najechania kursorem : kolor konturu może się zmienić, gdy znajduje się nad nim kursor
• Rozwinięty stan kliknięcia : wyświetlane są opcje menu rozwijanego

Podczas edytowania domyślnego stanu wystąpienia podrzędnego listy rozwijanej zmiany te nie będą propagowane do stanów najechania lub kliknięcia . Aby zaktualizować stan najechania lub kliknięcia wszystkich wystąpień, należy wprowadzić zmiany w stanie domyślnym w komponencie głównym.

Chociaż może być kuszące, aby wskoczyć i zacząć iterować na głównych komponentach , czasami zdarzają się nieoczekiwane problemy z powodu różnic w zachowaniu komponentów nadrzędnych i podrzędnych.

Dobrą praktyką jest rozważenie i przewidzenie wszystkiego, co jest potrzebne w domyślnym stanie głównego komponentu przed dodaniem innych stanów lub utworzeniem instancji komponentu — nawet posuwając się do ustawienia różnych stanów obok siebie.

Projektanci powinni również pamiętać, że mogą dodawać i zmieniać elementy w stanach innych niż domyślne komponentu głównego lub instancji podrzędnych bez wpływu na stan domyślny, ale nie jest to prawdą.

Rekomendacja dla firmy Adobe : nadaj stanom komponentów funkcję blokady, aby projektanci mogli zachować nienaruszone stany inne niż domyślne i uniemożliwić propagację zmian w domyślnym stanie głównego komponentu.

Wskazówka nr 2 – Nazwij komponenty podczas tworzenia

Utworzenie komponentu (kliknij element prawym przyciskiem myszy, a następnie wybierz „Utwórz komponent” z menu lub naciśnij Cmd-K na Macu/Ctrl-K na PC) dodaje komponent do panelu Zasoby na lewym pasku bocznym. XD nada komponentowi domyślną nazwę „Komponent XX” (gdzie „XX” to liczba). Nie jest zbyt opisowy, więc najlepiej byłoby nadać mu unikalną nazwę, którą można przeszukiwać.

Dlaczego to robisz? Gdy lista komponentów się zapełni, stanie się nieporęczna, jeśli wszystkie komponenty będą zaczynały się od tej samej domyślnej nazwy i nic nieznaczącego numeru. Chociaż opcja „widoku kafelków” pomaga, nie ma ona etykiet tekstowych, co sprawia, że ​​identyfikacja wizualna jest powolna i trudna. „Widok listy” z małymi miniaturami również utrudnia identyfikację różnic między komponentami o nieczytelnych nazwach. Komponenty mogą i będą się gubić. Umożliwienie ich wyszukiwania poprzez nadanie im nazw pozwoli zaoszczędzić czas później.

Zalecenie dla firmy Adobe : podczas tworzenia komponentu wybierz go automatycznie i skup użytkownika na panelu Zasoby->Komponenty, aby zmienić jego nazwę lub wyświetlić wyskakujące okienko nazewnictwa. Pomocne byłoby również umożliwienie przełączania tej funkcji w Preferencjach.

Wskazówka #3 – Utrzymuj porządek w głównych komponentach

Podczas tworzenia komponentu łatwo jest przypadkowo umieścić komponent główny na obszarze roboczym. Podczas gdy XD zapewnia narzędzia do znajdowania głównych komponentów (albo przeszukując panel Zasoby lub klikając prawym przyciskiem myszy i wybierając „Edytuj główny komponent” z instancji podrzędnej), zbyt łatwo jest dokonać niezamierzonych zmian w głównym komponencie, wierząc, że jest to instancja. Może to prowadzić do wielu niepożądanych zmian w wielu obszarach roboczych.

Nawet jeśli w obszarze roboczym znajduje się tylko kilka instancji komponentów, po sklonowaniu obszaru roboczego sprawy mogą szybko wymknąć się spod kontroli. Nieumyślna zmiana w składniku głównym może wydłużyć czas czyszczenia, którego można było uniknąć.

Najlepiej wyrobić w sobie nawyk odsuwania głównych komponentów od obszarów roboczych projektu natychmiast po ich stworzeniu . Idealnym sposobem na to byłoby umieszczenie głównych komponentów na stole montażowym w pliku XD lub na wyraźnie oznaczonych, dedykowanych obszarach roboczych. Spowoduje to, że później będzie działać wydajniej.

Zalecenie dla firmy Adobe : Rozważ monit podczas wprowadzania zmian w składniku głównym, aby ostrzec projektantów, że zmiany mogą zostać rozprzestrzenione na instancje podrzędne.

Wskazówka #4 – Utrzymuj porządek dzięki panelowi warstw

Łatwo jest wypróbować pomysły w obszarze roboczym i wejść w przepływ grupowania/rozgrupowywania komponentów i zmiany właściwości stanów komponentów. Może istnieć silna pokusa, aby zminimalizować lewy pasek boczny, aby mieć więcej miejsca do pracy. Istnieje jednak duża szansa, że ​​stany i przejścia komponentów nie będą zachowywać się zgodnie z oczekiwaniami w natłoku iteracji. Może się tak zdarzyć, ponieważ organizacja i grupowanie podelementów (takich jak kształty, wektory lub tekst) odbiega od tego, czym były potrzebne, aby przejścia działały poprawnie.

Widok warstw zapewnia 100% przejrzystość hierarchii i nazewnictwa elementów, a jego szczelna organizacja ma kluczowe znaczenie. Korzystanie z potężnego przejścia Auto-Animate w XD między stanami wymaga, aby elementy miały tę samą nazwę i pozycję w hierarchii warstw składnika. W przeciwnym razie przejście będzie domyślnie zanikać zamiast atrakcyjnej automatycznej animacji.

Czasami może być pożądane wyłączenie właściwości z interpolacji podczas przejścia z automatyczną animacją. Aby to osiągnąć, projektanci mogą zmienić nazwę elementu w innym stanie komponentu lub obszarze roboczym, aby przerwać łącze oparte na nazwie.

W obu przypadkach widok Warstwy można wykorzystać do rozwiązywania problemów w przypadku wystąpienia nieoczekiwanych problemów . Powinien to być pierwszy krok podczas debugowania problemów związanych z prototypowaniem, niezależnie od tego, czy jest to przejście między stanami komponentów, czy między obszarami roboczymi.

Wskazówka #5 – Użyj zanikania alfa do interpolacji kolorów

Auto-Animate to doskonały dodatek do XD, ale ma ograniczenia i dziwactwa. Jedno z tych dziwactw staje się widoczne podczas zmiany koloru elementu między dwoma stanami komponentów lub obszarami roboczymi za pomocą funkcji Auto-Animate. Zamiast płynnej interpolacji między dwoma kolorami, zmienia się gwałtownie podczas testowania.

Obecne obejście jest nieco niewygodne i ma konsekwencje dotyczące sposobu organizacji stanów głównego składnika. Polega na dodaniu dwóch obiektów o różnych kolorach zamiast jednego, a następnie przeniesieniu alfa na dwa obiekty w obu stanach, aby uzyskać płynne przejście. Domyślne przejście zanikania może działać, ale w przypadku interpolacji kształtów i rozmiarów za pomocą funkcji Auto-Animacja zanikanie może nie wystarczyć.

Wskazówka #6 – Wykorzystaj komponenty w powtarzalnej siatce

Repeat Grid to kolejna doskonała funkcja oszczędzająca czas w XD , która ułatwia organizowanie i utrzymywanie tablic podobnych elementów. Podobnie jak komponenty, siatki powtarzalne mają relację hierarchiczną, w której pierwszy element w lewym górnym rogu siatki jest „rodzicem”, który definiuje właściwości elementów „potomnych”. (Istnieją wyjątki: mapy bitowe mogą być unikalne dla elementu podrzędnego, podobnie jak ciągi tekstowe, ale nie właściwości tekstowe).

Jednak podczas korzystania z komponentów w ramach powtarzalnych siatek rzeczy się zmieniają.

Podczas normalnej pracy z powtarzanymi siatkami zmiany wprowadzone do elementu nadrzędnego natychmiast rozchodzą się na jego elementy potomne. Jednak zmiany składnika głównego są propagowane tylko do elementów podrzędnych w powtarzanej siatce, jeśli nie ma żadnych lokalnych nadpisań właściwości . Innymi słowy, zmiana właściwości komponentu w siatce „blokuje” go przed zmianami rozchodzącymi się z komponentu głównego.

Aby propagować zmiany z rodzica, który jest również komponentem w powtarzalnej siatce, zmień rozmiar siatki tylko do rodzica. To usuwa jego dzieci. Następnie przeciągnij uchwyty z powrotem do żądanych wymiarów, aby zaktualizować dzieci.

Gdy projektanci będą mogli obejść specyfikę komponentów i powtarzających się siatek, łączenie ich może być potężne.

Porada 7 – Załóżmy, że nie istnieją przejścia stanów komponentów zależne od czasu (na razie)

Stosując przejścia między obszarami roboczymi przy użyciu opóźnień opartych na czasie (nie opartych na danych wejściowych), naturalne jest założenie, że to samo jest dostępne między stanami komponentów. Niestety tak nie jest. Wszystkie zmiany stanu oparte na komponentach muszą opierać się na danych wejściowych użytkownika lub interakcjach w trybie prototypu, a nie na czasie.

Rekomendacja dla firmy Adobe: Dodaj do składników opcję przejścia na podstawie czasu, aby ich stany mogły być animowane niezależnie od danych wprowadzanych przez użytkownika.

Wskazówka nr 8 – Bądź dokładny podczas klonowania hierarchii głównych komponentów

Ta ostatnia wskazówka jest bardziej skrajnym przypadkiem, z którym projektanci XD mogą nie często się spotykać, ale powinni być tego świadomi .

Załóżmy scenariusz, w którym składnik główny wymaga odmiany, która nadal zachowuje jakość „jeden do wielu” dziedziczących właściwości potomnych, ale nie wpływa na żadne istniejące składniki potomne. Aby utworzyć nową hierarchię komponentów nadrzędnych, występujący komponent musi zostać rozgrupowany i przebudowany od podstaw. Rozgrupowanie komponentów spowoduje również utratę wszystkich stanów i właściwości przejścia skonfigurowanych w trybie prototypu. Oto obejście:

• Klonuj wystąpienie składnika dla każdego stanu w składniku.
• Ustaw stan każdej instancji na inny stan.
• Przejrzyj i rozgrupuj każde wystąpienie komponentu.
• Zacznij wprowadzać pożądane poprawki i zmiany w każdym wystąpieniu komponentu.
• Odtwórz nowy składnik główny.
• Przejdź do trybu prototypu i odtwórz interakcje i typy przejść, które zostały skonfigurowane wcześniej.

Zalecenie dla firmy Adobe: Po kliknięciu prawym przyciskiem myszy składnika głównego w panelu Zasoby udostępnij opcję menu „Powiel”.

Prototypowanie z komponentami Adobe XD: na wynos na sukces

W ciągu ostatnich kilku lat program Adobe XD znacznie ulepszył funkcjonalność i użyteczność. Stał się godną, ​​konkurencyjną alternatywą dla Sketcha i innych uznanych narzędzi do prototypowania. Opierając się na tym, jak narzędzie ewoluowało od czasu jego debiutu, prawdopodobnie w drodze jest wiele innych ulepszeń.

W szczególności system komponentów Adobe XD ma doskonały potencjał do ulepszania i rozszerzania typów interakcji, które mogą tworzyć projektanci.

Oto kilka kluczowych wniosków, o których należy pamiętać:

• Dowiedz się, jak zmiany propagują się między składnikami głównymi a instancjami podrzędnymi.
• Należy pamiętać o interakcji składników z innymi funkcjami programu Adobe XD, takimi jak Auto-Animacja i Powtarzanie siatki.
• Staraj się stosować spójne praktyki przepływu pracy, aby zaoszczędzić czas, takie jak nazywanie komponentów i utrzymywanie oddzielnego obszaru schowka głównego komponentu w pliku XD.

Pamiętanie o specyfikach pracy ze składnikami Adobe XD przy zachowaniu zdyscyplinowanego przepływu pracy zmaksymalizuje produktywność projektowania. Pozwoli to uniknąć niepotrzebnego czyszczenia i konserwacji oraz zapewni projektantom XD przewagę wydajności podczas prototypowania produktów cyfrowych.

Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

• Adobe XD kontra szkic – Showdown 2020
• Precyzyjne projektowanie — recenzja Adobe XD
• Odkrywanie projektowania multimodalnego — samouczek Adobe XD
• Mity UX – prototypowanie, testowanie przez użytkowników i materiały dostarczające UX
• Udoskonal swój proces projektowania UX – przewodnik po projektowaniu prototypów