Jak prototypować aplikację mobilną z Adobe XD

Ten samouczek pokazujący, jak wykonać prototyp aplikacji mobilnych w Adobe XD, został użyty Adobe XD CC (beta 2017) W 2016 r Nowo uruchomiony Adobe XD CC miał kilka poprawek, dzięki czemu jest jeszcze łatwiejsze w użyciu.

• Zdobądź 15% zniżki na Cloud Adobe Creative Cloud

Jeśli jesteś projektantem, tworząc doświadczenia użytkownika dla aplikacji mobilnych lub stron internetowych, możesz być używany do korzystania z wielu narzędzi do różnych zadań, gdy prototypowanie .

Zaczynasz od badań. Następnie szkicuj pomysły na pióro i papier, a później prześlij swoje myśli na narzędzie do projektowania. Aby wymyślić najlepszy przepływ, wyeksportujesz wszystkie zasoby i przynieś je do innego narzędzia, aby zbudować prototyp. Stamtąd udostępniasz lub przetestujesz swój prototyp, zebrać sprzężenie zwrotne i powrócić do środka cyklu, aby iterować, przełączając się z narzędzia do narzędzia, jak udoskonalasz swój projekt.

Kilka narzędzi projektowych każdy spoczywa na inną część problemu. Ale zamiast ułatwić swoje życie jako projektant, przełączanie między tymi wszystkimi narzędziami zmniejsza tylko tempo.

Co jeśli wystąpiło pojedyncze narzędzie, które oznaczało, że możesz cieszyć się w pełni podłączony przepływ pracy? Gdzie można zaprojektować i prototypować swoje doświadczenia w ciągu kilku minut, udostępniaj je w sieci, aby uchwycić opinię, a następnie łatwo usunąć edycje bez złamania kroku? Cel z Adobe Experience Design CC - lub, jak nazywamy to, Adobe XD - miał to zrobić po prostu.

W tym samouczku pokażemy Ci główne obszary Adobe XD, projektowanie, prototypowanie i udostępnianie prostego "spotkaj się z aplikacją mobilną zespołową.

Utworzymy zawartość strony wymieniając członków zespołu produktu, a następnie użytkownicy będą mogli kliknąć indywidualne wpisy, które zostaną pobrane na bardziej szczegółową stronę BIOG. Dowiesz się, jak tworzyć wzory High-Fidelity, prototyp i podziel się nimi, aby zebrać informacje zwrotne.

Obejrzyj wideo powyżej i postępuj zgodnie z poniższymi krokami, aby dowiedzieć się, jak prototyp z Adobe XD. Nie tylko pokażemy, jak to zrobić, pokażmy Ci również, jak to przetestować, nagrać wideo podglądu w akcji i jak go udostępnić i eksportować.

Zauważ, że niektóre procesy mogły się nieznacznie zmienić w nowszej wersji Adobe XD.

01. Zainstaluj Adobe XD i uruchom nowy projekt

Najpierw upewnij się, że Adobe XD jest zainstalowany na komputerze . Uruchom go, spójrz na ekran Welcome i rozpocznij nowy design z szablonem artysty iPhone'a.

02. Utwórz drugą tablicę

Użyj narzędzia Tablica ( ZA ) Aby utworzyć drugą kartę, a następnie zmienić swoje tytuły (przez dwukrotne kliknięcie na nich) na "iPhone - strony zespołu" i "iPhone - strona szczegółów". Zmień kolory tła w twórczościach na czarno za pomocą inspektora nieruchomości po prawej stronie. Z narzędziem wyboru ( V. ) Wybrano, możesz nacisnąć kartę SPACJĘ w dowolnym momencie, aby patrzeć przez projekt.

03. Pobierz Tutorial Assets

Zebrałem folder aktywów, których będę używany przez cały ten samouczek. Możesz je pobrać tutaj . Od Finder przeciągnij "iPhone-Status-bar.Svg" na szczyt artysty 1 ( X: 8, Y: 5 ). Następnie skopiuj i wklej go do arcelarza 2, więc oba arki mają pasek stanu na górze. Trafienie cmd + l. Aby zablokować te paski stanu na obu stronach, więc ich właściwości nie mogą być modyfikowane. Aby je odblokować, możesz ponownie użyć skrótu lub kliknąć ikonę "Lock".

04. Narysuj prostokąt i ustaw wymiary

Skupmy się na art. 1 (strona drużyny). Korzystanie z narzędzia prostokątnego ( R. ) Rysuj różowy prostokąt (# FF2BC2 bez obramowania) w arceboardie 1 i ustaw wymiary do 375 x 230 za pomocą panelu Inspektora właściwości po prawej stronie.

05. Zmień kolejność obiektów

Aby włączyć i wyłączyć granicę lub wypełnić, kliknij ikonę "Eye" po prawej stronie. Trafienie Shift + CMD + [ wysłać go aż do tyłu lub przejdź do Object & GT; Umowa i GT; Wyślij wstecz . Jeśli chcesz zmienić kolory za pomocą wartości szesnastkowych, kliknij ikonę kolorów, a po pojawieniu się natywnego koloru Picker, wybierz drugą kartę na górze i zmień rozwijaną do "suwaków RGB".

06. Utwórz nagłówek

Korzystanie z narzędzia tekstowego ( T. ), Kliknij, aby utworzyć nagłówek do strony zespołu. Mój jest Helvetica Bold, 20, #FFFFFFF, X: 18, Y: 123. Zacznijmy odkładać naszą listę członków zespołu. Narysuj szary kwadrat, w którym zdjęcie członka zespołu będzie siedzieć (100 x 100, X: 8, Y: 238, # D0D0D0 bez granicy).

07. Dodaj kolejny prostokąt

Po prawej stronie tego potrzebujemy białego prostokąta (260 x 100, X: 108, Y: 238, #FFFFFF bez granicy), na której uwzględnimy nazwę członka zespołu jako tytuł nagłówka i stanowiska jako podszycie. Na razie użyj tekstu zastępczego i styl, jak chcesz.

08. Dodaj ikonę strzałki

Aby pokazać to pudełko, będzie obszarowym obszarem, uwzględnimy ikonę strzałki. Przeciągnij "PATH.SVG" Od Finder na płótno XD do stuknięcia z podręcznika. Następnie zmienia go do X: 330, Y: 279.

09. Umieść headshot

Od Finder przeciągnij headshot na miejsce na szarym placu.

10. Utwórz listę

Teraz możemy utworzyć naszą listę. W tym momencie zwykle można kopiować i wkleić górną pozycję, przesuwając kopiowaną wersję w dół i dostosowując margines. Zrobiłbyś to samo dla nowych przedmiotów, a jeśli chcesz zmienić marginesy, musiałbyś to zrobić ręcznie, jeden po drugim.

Cóż, nie z Adobe XD - możesz użyć funkcji powtarzania siatki. Wybierz elementy, które chcesz powtórzyć, kliknij przycisk "Repeat Grid" na inspektora właściwości po prawej stronie ( cmd + r. ) I użyj zielonych uchwytów, aby powtórzyć elementy pionowo. Możesz także powtórzyć je poziomo dla wersji tabletu.

11. Dostosuj margines

Dostosuj margines powtarzanej siatki, unosząc się na krawędzi przedmiotów, klikając i przeciągając. Ustawmy margines do 7. Przeciągnijmy powtarzaną siatkę na dno twórczości. Mamy teraz cztery rzędy.

12. Edytuj pola tekstowe

Podczas gdy właściwości (kolory, x i y, i tak dalej), są globalne, zawartość każdego elementu może być unikalna. Edytuj pola tekstowe do nazwy każdej osoby i tytułu pracy. Kliknij dwukrotnie, aby wejść do siatki i grupy lub cmd + click. Aby bezpośrednio wybrać dowolny element w grupie lub powtarzanej siatki. Teraz musimy po prostu chwycić wszystkie headshots na raz i przeciągnąć je na siatkę i skończyliśmy z tym ekranem.

13. Utwórz przyciemniony efekt

Przejdźmy do Arteboardu 2 (strona szczegółów). Ponownie zaczniemy od prostokąta zastępczego (375 x 444, X: 0, Y: 0, #fffff bez obramowania) i przeciągnij headshot, aby go wypełnić. Stworzymy przyciemniony efekt, zmieniając krycie obrazu do 60 procent i wysyłanie go do tyłu ( Shift + CMD + [ ).

14. Dodaj kolejną strzałkę

Następnie zablokuj element headshot ( cmd + l. ) i dodaj kolejną strzałkę ("back-arrow.svg"), aby wskazać, że użytkownik może powrócić do listy zespołów. To musi siedzieć w X: 20, Y: 40. Ważne jest, aby najpierw zablokować obraz, ponieważ w przeciwnym razie SVG zastąpi headshot.

15. Dodaj pasek informacji kontaktowej

Chcemy włączyć różowy pasek na każdej stronie, która wymieni dane kontaktowe członka zespołu (375 x 45, X: 0, Y: 400). Użyj narzędzia tekstowego ( T. ) Aby utworzyć element tekstowy, czytając "Łączce zastępcze", centrum go, styl It up i umieść go w X: 169, Y: 416.

16. Utwórz więcej instancji elementu tekstowego

Użyjmy narzędzia do powtarzania siatki, aby utworzyć dwa kolejne wystąpienia tego elementu tekstowego. Najpierw przekonwertuj tekst do powtarzanej siatki ( cmd + r. ), a następnie przytrzymaj klawisz opcji, rozszerzając siatkę poziomo. Piękny, prawda? Direct-Wybierz tekst ( cmd + click. ) I zmień zawartość, aby przeczytać "e-mail", "Twitter" i "LinkedIn".

17. Utwórz nazwę i Bio Box

Aby zakończyć projekt, utwórz białe pudełko (360 x 214, X: 8, Y: 445), który będzie zawierał nazwę członka zespołu i biog. Najpierw dodaj element tekstowy za pomocą nazwy osoby zastępczej ". Dla elementu tekstowego, który posiada biog, chcemy użyć tekstu obszaru. Aby to zrobić, wybierz narzędzie tekstowe ( T. ) i kliknij i przeciągnij, aby zdefiniować obszar swojej kopii. Ponownie wpisz jakiś tekst zastępczy na razie i dostosuj swoje właściwości stylizacji.

18. Utwórz stawki dla innych członków zespołu

Zróbmy teraz nowe stroje dla innych członków zespołu. Najpierw odblokuj główny obraz ( cmd + l. ), a następnie kliknij tytuł Artboard 2, aby go wybrać i trafić cmd + c. skopiować go. Pomniejsz ( cmd + - lub użyj trackpad do szczypania do zoomu), a następnie trafienie cmd + v. wklejać trzy nowe arty. Dodaj pewne informacje na temat biOOG do każdej strony. Zaktualizuj nazwy i obrazy w głowę i zorganizuj stawki na płótnie. Fajne! Nasz projekt jest gotowy na teraz.

19. Ustaw przepływ

Nadszedł czas, aby rozpocząć definiowanie przepływu aplikacji. Prototyp może być wart tysiąca spotkań, więc stworzymy jeden do przekazywania intencji projektu. Wystarczy przejść do trybu prototypu (po lewej stronie), wybierz element, który zostanie wybrany przez użytkownika (przytrzymaj cmd. Aby bezpośrednio wybrać) i przeciągnij drut do prawej ręki. Po zwolnieniu myszy możemy ustawić Segui, łagodzenie i czas trwania. Prosty.

20. Podłącz

Przejdźmy, choć każdy z pozycji na naszej liście na rysunku 1 i przewodź je na ich stronę szczegółową. Dla każdego z nich chcemy ustawić Sege, aby wysunąć w lewo i łagodzenie, aby ułatwić. Następnie możemy przekazać strzałki tylne na każdym szczegółach stron z powrotem do art. 1 - pamiętaj, aby ustawić Segue, aby wsunąć w prawo. Boom - nasz prototyp jest gotowy.

21. Sprawdź prototyp

Aby przetestować prototyp, kliknij przycisk Odtwórz w prawym górnym rogu (podgląd). Nie musisz zamykać okna podglądu, aby zaktualizować swój projekt lub przewody. Po prostu zacznij robić zmiany, a automatycznie znajdą się automatycznie w oknie podglądu.

22. Zrób wideo

Łatwo jest nagrywać film z interakcji podczas testowania prototypu. Dzięki otwarciu okna podglądu kliknij przycisk Record, aby rozpocząć i zatrzymać nagrywanie. Zapisz plik ".mov" i udostępnij za pomocą interesariuszy.

23. Udostępnij swoją pracę

Aby udostępnić prototypy w sieci, kliknij ostatni przycisk w prawym górnym rogu (Udostępnij online). Kliknij przycisk Utwórz link. Wszystkie aktywa zostaną przesłane do Creative Cloud i zostanie utworzony link. Jeśli konieczne są zmiany, możesz wrócić do trybu projektowania, wprowadzić zmiany i ponownie udostępnić. Cały przepływ działa.

24. Eksportuj pliki

Z XD można eksportować PNGS dla sieci Web, iOS i Android w różnych rozmiarach, a także bardzo zoptymalizowanych plików SVG.

25. Ciesz się wynikami

Gratulacje! Opanowałeś podstawy Adobe Experience Design CC (podgląd). Zapraszamy do udostępniania prototypów w sieciach sieciowych i społecznościowych - Dodaj #adobexd. Możemy więc zobaczyć twoją pracę.

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 280. Subskrybuj netto tutaj .

Powiązane artykuły

• Jak uniknąć prototypujących pułapek
• Jak korzystać z animacji w aplikacjach mobilnych
• 10 wskazówek na lepszą mobilną konstrukcję UX