Kto wiedział, że Adobe CC może model szkieletowy?

Szkielet to ważny krok w projektowaniu dowolnego interfejsu użytkownika, niezależnie od tego, czy jest to witryna internetowa, aplikacja czy oprogramowanie. Bez rozpraszania uwagi w postaci wizualizacji, kolorów, typografii, stylów i efektów, możesz bardziej skoncentrować się na definiowaniu hierarchii treści i doświadczenia użytkownika.

Wykonywanie makiet i prototypów o niskiej wierności pomoże Ci testować i iterować wcześniej i częściej w trakcie procesu. Makiety o niskiej wierności pozwalają projektantom pracować szybciej i opracowywać produkty, które pokochają użytkownicy.

Na wolności istnieje wiele różnych narzędzi do tworzenia szkieletów. To, który wybierzesz, będzie zależeć od twoich osobistych preferencji i stylu pracy.

Podobnie jak wielu projektantów, którzy przeszli do projektowania cyfrowego ze świata druku, jestem ekspertem w aplikacjach Adobe, takich jak Illustrator, InDesign i Photoshop. Potrafię z nich korzystać sprawnie i intuicyjnie z dowolnego miejsca i o każdej porze (nawet jeśli ktoś budzi mnie w środku nocy i odmawia podania kawy).

Nic dziwnego, że te wszechstronne aplikacje stały się również narzędziami, których używam do projektowania wizualnego stron internetowych i aplikacji. Aby mój przepływ pracy był jak najbardziej wydajny, używam ich również do tworzenia szkieletów.

Przy każdym projekcie zwykle zaczynam projektowanie od robienia bardzo wstępnych szkiców na papierze lub na ekranie iPada lub smartfona, jeśli nie jestem w pobliżu biurka. Te szkice mają na celu skupienie moich myśli na wybranej koncepcji; klient prawdopodobnie nigdy żadnego z nich nie zobaczy. Kiedy mam pewność, że mój pomysł działa, przechodzę do wireframingu. Zwykle używam Adobe Illustrator i InDesign w połączeniu: Illustrator do tworzenia większości elementów zestawu UI i InDesign do samego szkieletu.

W dalszej części artykułu wyjaśnię krok po kroku, jak włączyć te narzędzia do procesu tworzenia szkieletów, ale zanim przejdę do szczegółów, pozwól, że pokażę Ci mocne i słabe strony korzystania z programu InDesign jako głównego narzędzia do tworzenia szkieletów .

Plusy i minusy używania Adobe InDesign jako narzędzia szkieletowego i prototypowania

Od jakiegoś czasu Adobe InDesign jest nie tylko aplikacją typu DTP, ale także szeroko wykorzystywaną do publikacji cyfrowych i tworzenia EPUB. Jest również kilka powodów, dla których jest to odpowiednie narzędzie również do tworzenia szkieletów:

• Strony wzorcowe — za pomocą stron wzorcowych można szybko i konsekwentnie stosować elementy projektu globalnego, takie jak nawigacja, nagłówki, stopki itd. Możesz utworzyć tyle stron wzorcowych, ile potrzebujesz, a ponadto jeden wzorzec może być oparty na innym.
• Obsługa siatek stałych — umożliwia łatwe tworzenie i stosowanie różnych rodzajów siatek, uzupełniających kolumn, poziomych i pionowych prowadnic do tworzenia modułów i podsiatek, co zapewnia większą złożoność i precyzję.
• Alternatywne układy — umożliwia tworzenie modeli szkieletowych dla wielu urządzeń i orientacji w tym samym pliku.
• Biblioteki CC — generuje bibliotekę różnych zasobów wielokrotnego użytku, takich jak często używane obiekty, kolory, znaki i style akapitów. Twórz zasoby w programie InDesign, Illustrator lub Photoshop albo za pomocą aplikacji mobilnej Adobe Capture — w zależności od preferencji.
• Warstwy — umożliwia selektywne organizowanie, grupowanie, pokazywanie/ukrywanie i blokowanie/odblokowywanie obiektów i treści w modelu szkieletowym. Każda strona wielostronicowego dokumentu InDesign ma tę samą liczbę i kolejność warstw. Wszystkie zmiany wprowadzane w warstwach są odzwierciedlane na wszystkich stronach, np. widoczność, kolejność układania lub usuwanie.
• Style i tabele — zapewnia pełną kontrolę nad wyglądem tekstu, obiektów i tabel dzięki użyciu stylów programu InDesign. Style mogą dziedziczyć po sobie nawzajem, zapewniając możliwość łatwego kaskadowania żądanego formatowania w całym dokumencie. Tworzenie i formatowanie tabel, które mają być używane jako elementy treści szkieletowych, a nawet pomocników do celów układu, jest bardzo proste.
• Integracja Typekit — w makietach o wysokiej wierności można używać dowolnych czcionek Typekit, które są synchronizowane z komputerem.
• Interaktywność i animacje — możesz użyć wbudowanych funkcji interaktywności i animacji programu Adobe InDesign, aby tworzyć różne stany elementów projektu internetowego lub aplikacji na potrzeby prototypowania interakcji. Większość ludzi korzysta z tych funkcji podczas tworzenia magazynów dla rozwiązań publikowania cyfrowego i eksportu EPUB o stałym układzie, ale nadają się one również do tworzenia prototypów.
• Opcje eksportu — InDesign może eksportować tworzone modele szkieletowe i prototypy w różnych formatach. Interaktywne pliki PDF będą prawdopodobnie preferowanym formatem w większości przypadków, ale możesz również użyć funkcji publikowania online, aby przekonwertować swój dokument na interaktywny kod HTML, który można wyświetlać w nowoczesnych przeglądarkach komputerowych i mobilnych. Niestety, nie masz dużej kontroli nad eksportem za pomocą Publish Online, a wyeksportowane pliki są hostowane na serwerach Adobe. Możesz udostępnić prototypowy adres URL swojemu klientowi lub osadzić go w swojej witrynie. Aby uzyskać większą kontrolę i bezpośredni eksport do HTML5, możesz użyć rozszerzenia in5 firmy Ajar Productions.

Adobe InDesign ma wiele zalet, które można wykorzystać jako narzędzie szkieletowe i prototypowe, ale ma też pewne wady:

• Brak predefiniowanych szablonów i elementów szkieletowych – ponieważ InDesign nie ma być narzędziem do tworzenia szkieletów, musisz samodzielnie tworzyć i przygotowywać szablony i zasoby obiektów. (W dalszej części artykułu pokażę ci, jak poradzić sobie z tym krokiem.) Dobra wiadomość jest taka, że ​​większość tej pracy zostanie wykonana tylko raz, a po kilku godzinach pracy będziesz gotowy do szybkiego rozpoczęcia Tworzenie szkieletów w programie InDesign. Ponadto istnieje wiele zasobów i zestawów szkieletowych, które można pobrać z Internetu, więc nie ma potrzeby samodzielnego rysowania wszystkiego.
• Funkcje interaktywności i animacji są ograniczone — chociaż możesz łatwo łączyć strony i dodawać interaktywność i animacje, proces ten może czasami zająć dużo czasu. Niektóre proste narzędzia interakcji nie są zbyt intuicyjne. Jeśli nie korzystałeś z funkcji interaktywnych programu InDesign, będziesz musiał pokonać niewielką krzywą uczenia się, zanim będziesz mógł je efektywnie stosować.
• Dokumentów InDesign nie można eksportować bezpośrednio jako wielowarstwowe pliki PSD — jeśli projektujesz w programie Adobe Photoshop i chcesz mieć oddzielne elementy szkieletowe do tworzenia projektu, musisz najpierw wyeksportować szkielety do formatu PDF. Następnie musisz otworzyć plik PDF w programie Illustrator i wyeksportować go ponownie jako warstwowy plik PSD. Osoby pracujące na komputerze Mac mogą również użyć darmowego skryptu napisanego przez Roba Daya do zapisywania plików InDesign jako warstwowych plików PSD.

Dobre przygotowanie szkieletu to połowa pracy

Zacznij od dostrojenia swojego środowiska pracy. Jeśli nie masz jeszcze zapisanej przestrzeni roboczej w programach Illustrator i InDesign do tego rodzaju pracy, utwórz ją. W programie Illustrator zacznij od wstępnie zdefiniowanej internetowej przestrzeni roboczej i dostosuj ją do swoich upodobań: zamknij panele, których nie używasz często, otwórz te, których będziesz używać, a następnie ułóż je zgodnie ze swoim stylem pracy.

Po zakończeniu zapisz przestrzeń roboczą, wybierając polecenie Okno > Przestrzeń robocza > Nowa przestrzeń robocza… Zrób to samo w programie InDesign, używając jako startera przestrzeni roboczej Publikacja cyfrowa.

Składanie zestawów szkieletowych/makiet/prototypów

Wydajny obieg pracy przy tworzeniu szkieletów w programach Illustrator i InDesign wymaga zainwestowania trochę czasu w przygotowanie najpierw zestawu zasobów interfejsu użytkownika. Od czasu wprowadzenia usługi Adobe Creative Cloud Biblioteki CC są najlepszym sposobem przechowywania wszystkich składników zestawu interfejsu użytkownika.

Możesz utworzyć jedną lub więcej bibliotek na potrzeby tworzenia szkieletów i prototypowania. Na przykład możesz utworzyć jedną bibliotekę do tworzenia szkieletów witryn internetowych, inną dla aplikacji na iOS, trzecią dla aplikacji na Androida i tak dalej.

Aby utworzyć bibliotekę Adobe CC, otwórz panel Biblioteki i wybierz opcję Utwórz nową bibliotekę z menu hamburgerów w panelu. Zasoby umieszczane w bibliotekach można tworzyć i wykorzystywać w różnych aplikacjach komputerowych lub mobilnych Adobe na wszystkich urządzeniach, do których logujesz się przy użyciu identyfikatora Adobe ID. Oznacza to, że możesz rozpocząć projekt na iPadzie lub iPhonie, kontynuować na komputerze stacjonarnym w biurze i wprowadzać zmiany w ostatniej chwili na domowym laptopie z tymi samymi zasobami dostępnymi na wszystkich urządzeniach.

Jeśli pracujesz jako część większego zespołu, zasoby biblioteki mogą być udostępniane między członkami zespołu. Biblioteki mogą zawierać kolory, grafikę, style warstw (tylko Photoshop) oraz style akapitowe i znakowe. Zasoby do bibliotek dodaje się, klikając odpowiedni przycisk u dołu panelu Biblioteki CC z wybranym elementem. Możesz także dodać zasoby graficzne, przeciągając je bezpośrednio z obszaru roboczego do panelu Biblioteki.

Zasoby w bibliotekach są uporządkowane według kategorii. Trzymaj się dobrych praktyk i zmień nazwę każdego zasobu na znaczącą nazwę. Biblioteki można przeszukiwać, a znalezienie zasobu przez wpisanie początku jego nazwy pozwoli zaoszczędzić mnóstwo czasu później, zwłaszcza gdy w bibliotekach znajduje się wiele różnych elementów. Aby zmienić nazwę zasobu, kliknij go dwukrotnie i wpisz nową.

Tworzenie komponentów zestawu szkieletowego

Chociaż Adobe InDesign ma kilka podstawowych narzędzi do rysowania, które są dość podobne do programu Illustrator, Illustrator jest znacznie lepszym wyborem do rysowania różnych elementów w modelu szkieletowym. Zasadniczo utwórz wszystkie elementy zestawu, które wymagają rysowania bardziej złożonego niż podstawowe kształty geometryczne w programie Illustrator. Twórz prostsze elementy zawierające tekst, który będziesz musiał zmienić w układzie, takie jak proste przyciski, w programie InDesign.

Na początek zrób listę wszystkich elementów, które będą potrzebne w modelu szkieletowym, takich jak elementy nawigacji, elementy strony, w tym obrazy, ramki wideo i pola tekstowe, ikony, awatary, elementy formularzy i wszystkie inne elementy interfejsu. Po uzupełnieniu listy możesz przejść do programów Illustrator i InDesign, aby utworzyć te elementy.

Zacznij od stworzenia nowego dokumentu dla komponentów zestawu szkieletowego lub zestawu makiety. Upewnij się, że w oknie dialogowym Nowy dokument wybrałeś Profil WWW/urządzenia w programie Illustrator lub Intencja publikacji internetowej/cyfrowej. Dzięki temu piksele są używane jako jednostki, a tryb kolorów jest ustawiony na RGB.

Uczyń zasoby zestawów szkieletowych tak prostymi, jak to tylko możliwe, ponieważ muszą dawać szybkie wizualne wskazówki dotyczące tego, co reprezentują, bez zbytniej szczegółowości. Należy używać bardzo ograniczonej palety barw, najlepiej kilku odcieni szarości. Zaakcentuj wizualnie ważniejsze elementy, zabarwiając je ciemniejszymi odcieniami lub nadając im większy kontrast.

Aby uzyskać makiety lub prototypy o wyższej wierności, utwórz zestawy interfejsu użytkownika z bardziej szczegółowymi elementami, które wykorzystują odpowiednią paletę kolorów każdego projektu. Aby uzyskać łatwy dostęp do palet kolorów, dodaj je do bibliotek CC.

Zasoby programu Adobe Illustrator w bibliotekach CC

Zasoby dodawane do bibliotek z programu Illustrator są domyślnie połączone (od Adobe CC 2015). Oznacza to, że gdy zmodyfikujesz zasób biblioteki w programie Illustrator, zmiany zostaną odzwierciedlone we wszystkich użytych instancjach. Jeśli chcesz dodać niepowiązany zasób do dokumentu, naciśnij klawisz opcja/alt podczas przeciągania go z panelu.

Gdy korzystasz z połączonych zasobów programu Illustrator w programie InDesign, podczas przeglądania dokumentu w trybie normalnym w lewym górnym rogu będzie widoczna mała ikona chmurki. Wszystkie są również wymienione w panelu Łącza. Jeśli zmodyfikujesz zasób biblioteki w programie Illustrator, zmiany w dokumencie InDesign nie zostaną wykonane automatycznie. Ikona chmury zostanie zastąpiona zmodyfikowaną ikoną wykrzyknika łącza i będziesz musiał zaktualizować te łącza.

Zasoby InDesign umieszczone w dokumencie InDesign nie są połączone. Oznacza to, że można edytować wystąpienia niezależnie od oryginału, a gdy oryginalny zasób zostanie zmodyfikowany, zmiany te nie zostaną odzwierciedlone w zasobach, które zostały już umieszczone w układzie.

Weź pod uwagę te właściwości podczas tworzenia modeli szkieletowych: Dodaj zasoby do biblioteki z programu Illustrator, jeśli zakładasz, że będą wymagały modyfikacji i aktualizacji globalnie, lub dodaj je z programu InDesign, gdy wiesz, że chcesz je zmodyfikować pojedynczo. Zwróć uwagę, że możesz także tworzyć grafikę w programie Illustrator, kopiować/wklejać je do programu InDesign, a następnie modyfikować w razie potrzeby przed dodaniem jej do biblioteki jako zasób programu InDesign.

Jeśli zdarzy ci się zapomnieć, który zasób graficzny jest tworzony przez którą aplikację, spójrz na prawą stronę każdego elementu w panelu Biblioteka, używając opcji Pokaż elementy jako listy.

Elastyczność programu Adobe InDesign z zawartością i kopiowaniem

Aby mieć pewność, że możesz łatwo zmieniać kopiowanie i typografię w swoich modelach szkieletowych, utwórz kontenery tekstu w programie InDesign. InDesign ma fajną funkcję wypełniania pól tekstowych tekstem zastępczym. Kiedy rysujesz pole tekstowe, kliknij je prawym przyciskiem myszy i wybierz opcję Wypełnij tekstem zastępczym .

Dodaj pola tekstowe do biblioteki Adobe, jak każdy inny element graficzny, przeciągając je. Gdy później użyjesz tych zasobów tekstowych jako części układu modelu szkieletowego, możesz zmodyfikować pole tekstowe, a także jego zawartość w modelu szkieletowym.

Rozważ tworzenie przycisków interfejsu użytkownika również w programie InDesign. Aby utworzyć przycisk, utwórz ramkę tekstową, wpisz tekst, a następnie użyj opcji Obiekt > Opcje ramki tekstowej, aby zdefiniować odstępy między wstawkami. Dostosuj wyrównanie w pionie tekstu wewnątrz ramki, wybierając żądaną opcję z menu rozwijanego Wyrównaj.

Przejdź do zakładki Auto-Size i wybierz odpowiedni auto-sizing (prawdopodobnie będzie to Width Only) oraz wygodny punkt odniesienia. Jeśli nie chcesz, aby program InDesign dzielił tekst na więcej niż jedną linię, zaznacz opcję Bez łamania linii.

Użyj istniejących zasobów

W Internecie dostępnych jest wiele zestawów do tworzenia szkieletów i prototypowania Adobe Illustrator, które można kupić, a nawet pobrać za darmo, jeśli potrzebujesz gotowego rozwiązania. Może masz już elementy, które możesz wydobyć ze swoich zrealizowanych projektów. Otwórz te dokumenty, w razie potrzeby dostosuj wcześniej utworzone elementy i umieść je w odpowiednich bibliotekach.

Jeśli projektujesz dla określonej platformy — na przykład aplikacji na system iOS lub Android — upewnij się, że dokładnie przeczytałeś wytyczne dotyczące interfejsu użytkownika i użyj odpowiednich zasobów. Wygodne może być posiadanie w zestawie elementów interfejsu użytkownika, które są specyficzne dla różnych platform.

Nie skupiaj się zbytnio na próbie uwzględnienia każdego przyszłego zasobu lub stanu w twoich bibliotekach, zanim zaczniesz właściwy proces tworzenia szkieletów. Możesz później dodawać zasoby do swoich bibliotek i budować na nich na bieżąco.

Tworzenie szablonów szkieletowych programu InDesign

Pozostał jeszcze jeden ważny krok przygotowawczy: Utwórz szablony InDesign, których będziesz używać do tworzenia makiet. Zacznij od stworzenia nowego dokumentu z intencją Web lub Digital Publishing i zdefiniuj odpowiednie rozmiary stron dla ekranów, dla których projektujesz.

Ponieważ zaleca się użycie pewnego rodzaju siatki do rozmieszczenia elementów szkieletu, ustaw marginesy i utwórz siatkę słupów, ustawiając żądaną liczbę słupów i przestrzeń na ścieki. Możesz zmienić te ustawienia później, wybierając Układ > Marginesy i łamy, wybierając odpowiednią stronę główną (lub strony) w panelu Strony.

Jeśli potrzebujesz prowadnic poziomych i uzupełniających prowadnic pionowych, utwórz je ręcznie lub utwórz dodatkową siatkę, korzystając z opcji Układ > Utwórz prowadnice. Podczas tworzenia siatki warto skorzystać z jednego z narzędzi kalkulatora siatki online, takiego jak Gridulator.

Możesz także tworzyć dodatkowe szablony do celów prezentacji z makietami urządzeń jako ramką dla swoich makiety. Ponieważ jeden dokument InDesign może być połączony z innym, można tworzyć szkielety w jednym dokumencie InDesign, a następnie umieszczać je w innym na potrzeby prezentacji.

Chociaż na początku może się to wydawać skomplikowane, w rzeczywistości jest to bardzo prosty i skuteczny przepływ pracy. Przechowywanie rzeczywistych makiet w osobnym dokumencie ułatwia kontynuację budowania od zatwierdzonych makiet do dopracowanego projektu wizualnego.

Tworzenie gotowych do prezentacji szablonów, w których można umieszczać makiety, dodawać etykiety i komentarze, a także prezentować klientowi swoje najlepsze rozwiązanie, jest proste. Kiedy wprowadzasz zmiany w pliku szkieletowym, po prostu zaktualizuj go tak, jak każdy inny link w dokumencie prezentacji i ta-daaa! Wszystkie zmiany są również w Twojej prezentacji.

W panelu Warstwy możesz przygotować oddzielne warstwy dla różnych rodzajów treści: elementów interfejsu użytkownika, funkcji interaktywnych, gestów, etykiet i notatek. Jeśli potrzebujesz więcej warstw do konkretnego projektu, będziesz mógł je łatwo dodać w dowolnym momencie podczas tworzenia szkieletu.

Po zakończeniu tworzenia zapisz szablony jako pliki szablonów InDesign.indt. Po zapisaniu wszystkich potrzebnych szablonów jesteś w końcu gotowy do efektywnego rozpoczęcia tworzenia szkieletów.

Budowanie szkieletów

Po pierwsze — zacznij od strony wzorcowej. Przeciągnij z biblioteki wszystkie elementy globalne, które będą takie same na wszystkich ekranach projektu. Jeśli projektujesz stronę internetową, są to zazwyczaj nagłówki z logo, nawigacją i stopką. Ponieważ możesz utworzyć więcej niż jedną stronę wzorcową i mogą one dziedziczyć po sobie, możesz skorzystać z zagnieżdżania stron wzorcowych.

Na przykład, w zależności od projektu, możesz utworzyć stronę wzorcową dla jednego elementu interfejsu użytkownika, takiego jak wyskakujące okienko modalne lub okno dialogowe, a następnie utworzyć nowe wzorce na podstawie pierwszego wzorca, zmieniając tylko te elementy, które muszą być różne.

Nie możesz zaznaczać, zmieniać ani usuwać elementów wzorcowych na zwykłych stronach dokumentu, chyba że klikniesz je, przytrzymując klawisze Command/Control + Shift, aby przesłonić wzorce. Gdy Twój element zostanie nadpisany, możesz zmienić dowolny z jego parametrów lub całkowicie usunąć go z układu.

Pamiętaj, że nawet jeśli nadpiszesz element, parametry, których nie zmieniłeś, nadal będą dziedziczone po wzorcu. Na przykład, jeśli nadpiszesz element, zmieniając jego kolor, jego rozmiar nie zmieni się, ponieważ nadal jest połączony z wzorcem. Co więcej, jeśli zmienisz go na stronie wzorcowej, zostanie on również zmodyfikowany na elemencie, który poprzednio zastąpiłeś.

Wstawiając dodatkowe strony do dokumentu szkieletowego, pamiętaj, aby opierać je na odpowiednim wzorcu. Jeśli chcesz zmienić wzorzec dla stron znajdujących się już w układzie, zaznacz je w panelu Strony, kliknij prawym przyciskiem myszy i wybierz Zastosuj wzorzec do stron. Użyj zasobów biblioteki i ułóż je za pomocą inteligentnych prowadnic i opcji Wyrównaj, aby utworzyć ostateczne układy szkieletu interfejsu użytkownika.

Jeśli tworzysz projekty dla więcej niż jednego rozmiaru ekranu, utwórz alternatywne układy za pomocą opcji Układy > Utwórz układ alternatywny lub panelu Strony. Podczas tworzenia układów alternatywnych można używać reguł układu płynnego, aby automatycznie dostosowywać elementy strony z jednego rozmiaru i orientacji do innego, lub można je kontrolować ręcznie. Aby zastosować i przetestować reguły płynnego układu, użyj narzędzia Strona lub otwórz panel Okno > Interaktywny > Układ płynny.

Dodawanie interaktywności

Adobe InDesign oferuje szereg funkcji interaktywnych, z których można skorzystać podczas tworzenia makiet lub prototypów. To, które funkcje uwzględnisz, będzie zależeć od ostatecznego formatu, jakiego będziesz potrzebować do swoich makiet, prototypów lub prezentacji.

Jeśli eksportujesz jako PDF, interaktywność będzie ograniczona, ale możesz przynajmniej sprawić, by łącza między ekranami działały za pomocą panelu hiperłączy, aby je utworzyć. Wybierz element, który chcesz zachowywać jako łącze i kliknij ikonę Nowe hiperłącze. Z menu rozwijanego Link do wybierz opcję Strona i wprowadź żądany numer strony. Powtórz tę czynność na wszystkich elementach, które chcesz zachowywać jako łącza między ekranami.

Możesz także dodawać hiperłącza do obiektów znajdujących się na stronach wzorcowych, co może oszczędzić czas rzeczywisty. Utwórz linki na stronie wzorcowej raz, a będą działać na wszystkich ekranach Twojego dokumentu.

Możesz tworzyć przyciski z dowolnej grafiki, tekstu, obrazu lub grupy elementów. Aby utworzyć przycisk z wybranego obiektu, użyj panelu Okno > Interaktywne > Przyciski i formularze i kliknij ikonę Konwertuj na przycisk.

Przyciski mogą mieć różne stany utworzone dla wyglądu normalnego, najazdu i kliknięcia. Aby dodać stany najazdu lub kliknięcia do przycisków, kliknij je w panelu Przyciski i edytuj wygląd przycisku dla każdego stanu. Aby dodać akcję do przycisku, kliknij znak plus i wybierz go z listy. Weź pod uwagę, że działania w SWF/EPUB nie będą działać w interaktywnych plikach PDF.

Aby utworzyć elementy wyskakujące, wybierz Pokaż/Ukryj przyciski i formularze. Aby ukryć przyciski do momentu wyzwolenia, zaznacz opcję Ukryty do wyzwolenia. W interaktywnym pliku PDF można umieszczać obiekty o wielu stanach, ale tylko wtedy, gdy najpierw wyeksportujesz je jako plik SWF, a następnie umieścisz z powrotem w układzie programu InDesign w celu wyeksportowania do pliku PDF. Ten przepływ pracy jest żmudny, a pliki PDF nie są poprawnie widoczne we wszystkich czytnikach plików PDF, więc staraj się tego unikać, chyba że jest to naprawdę konieczne.

Jeśli chcesz przekonwertować dokument na prototyp HTML za pomocą funkcji InDesign CC 2015 Publish Online, możesz skorzystać z wielu bardziej interaktywnych opcji, takich jak animacje, obiekty wielostanowe i operacje na wielu przyciskach, w tym wszystkie te przeznaczone do eksportu SWF/EPUB.

Możesz dodać proste animacje za pomocą panelu Animacja i wybierając jedno z wbudowanych ustawień wstępnych z menu rozwijanego i ustawiając jego właściwości. Do jednego obiektu można zastosować tylko jedną animację, ale jeśli chcesz dodać ich więcej, zgrupuj swój obiekt pustym polem i użyj nowej animacji na nowo utworzonym obiekcie.

W przypadku elementów interfejsu użytkownika, które wymagają wyświetlania różnych stanów, utwórz obiekt wielostanowy. Utwórz osobny obiekt dla każdego stanu. Obiekty mogą być pojedynczym elementem (obrazem, ramką tekstową, grafiką) lub grupą różnych elementów. Otwórz panel Okno > Interaktywny > Stany obiektów, zaznacz wszystkie obiekty utworzone dla obiektu wielostanowego i kliknij przycisk Nowy na dole panelu.

Po utworzeniu obiektu wielostanowego musisz utworzyć przyciski, aby przejść z jednego stanu obiektu do drugiego. Czynności Przejdź do następnego stanu lub Przejdź do poprzedniego stanu ujawniają określony stan obiektu za pomocą czynności Przejdź do stanu.

Jeśli chcesz mieć przewijaną ramkę w swoim makiecie/prototypie, najłatwiejszym sposobem jej utworzenia jest użycie rozszerzenia Universal Scrolling Frames z Ajar Productions. Po pobraniu i zainstalowaniu rozszerzenia możesz używać go jako panelu programu InDesign. W przypadku przewijanej ramki musisz utworzyć zawartość, a także jedną ramkę na kontener.

Przewijana zawartość może być ramką tekstową, obrazem lub kilkoma zgrupowanymi elementami. Po zakończeniu tworzenia zawartości i kontenera wybierz zawartość i Edytuj > Wytnij. Następnie wybierz kontener i wklej zawartość do środka, używając opcji Edycja > Wklej do. Wybierz kontener i za pomocą uniwersalnych ramek przewijania dostosuj żądany kierunek przewijania.

Łącząc przyciski, obiekty wielostanowe, animacje i przewijalne ramki, możesz uzyskać bogate, interaktywne wrażenia. Aby przetestować interaktywność w programie InDesign, użyj panelu Podgląd interaktywności EPUB. Możesz wyświetlić podgląd pojedynczej strony lub całego dokumentu. Powiększ panel podglądu zgodnie z potrzebami.

Jeśli nie korzystałeś z interaktywnych funkcji Adobe InDesign, przygotuj się, ponieważ na początku jest trochę krzywej uczenia się. Ale przy odrobinie praktyki i próbach i błędach szybko je opanujesz.

Eksportowanie gotowych dokumentów

Kiedy skończysz tworzyć makiety i pliki prezentacji, pozostaje tylko pokazać swoje świetne pomysły klientowi w najlepszy możliwy sposób. W tym celu musisz wyeksportować swoje makiety w formacie, który może wyświetlić Twój klient. Chociaż pliki programu InDesign można eksportować w różnych formatach, prawdopodobnie będziesz używać interaktywnego pliku PDF lub funkcji publikowania online podczas testowania funkcjonalnych prototypów o niskiej lub wysokiej jakości. Aby zapisać jako interaktywny plik PDF, wybierz Adobe PDF (Interaktywny) z menu rozwijanego Format w oknie dialogowym Eksportuj i dostosuj odpowiednio właściwości. Nie zapomnij zaznaczyć formularzy i media, jeśli istnieją elementy interaktywne, które chcesz uwzględnić. Klienci mogą przeglądać makiety PDF w darmowym programie Adobe Reader i zapisywać wszystkie swoje komentarze w tym samym pliku.

Możesz również użyć dokumentu PDF wyeksportowanego z programu InDesign, aby utworzyć prototyp programu InVision (lub innego narzędzia obsługującego pliki PDF). Jeśli Twoje standardowe narzędzie do tworzenia prototypów, na przykład Marvel, nie może zaimportować pliku PDF, wyeksportuj swoje strony szkieletowe programu InDesign jako obrazy JPEG lub PNG.

Aby wyeksportować interaktywny prototyp HTML, który można zobaczyć w nowoczesnych przeglądarkach na różnych urządzeniach, przejdź do Plik > Publikuj online lub kliknij przycisk Publikuj online na pasku aplikacji. Po przygotowaniu dokumentu do publikacji online i przesłaniu można skopiować adres URL dokumentu, aby udostępnić go zainteresowanym stronom i rozpocząć proces recenzji. Opublikowany prototyp możesz również osadzić w swojej witrynie.

Wadą funkcji Publish Online jest to, że nie ma ona dodatkowej kontroli nad eksportem, a pliki są zawsze przechowywane na serwerach Adobe. Ponadto nadal jest to funkcja podglądu i nie możesz być pewien, w jakim kierunku Adobe zamierza ją rozwijać, ani nawet, czy zostanie wycofana.

Po wyeksportowaniu szkieletu/prototypu nadszedł czas na rozpoczęcie procesu testowania, przeglądu i iteracji.