Podgląd projektu graficznego aplikacji mobilnej na żywo

Projektowanie aplikacji mobilnych wymaga poza sporą wyobraźnią i wiedzą również możliwość podglądu na urządzeniu naszego projektu. Poszukiwałem bardzo długo najlepszego rozwiązania i chyba znalazłem coś co działa prawie perfekcyjnie.

Zacząłem od inteligentnych obiektów i podglądu słuchawki w Photoshopie (video na YouTube) i było fajnie ale ani to tak naprawdę nie pokazuje jak aplikacja wygląda w ręku i pod palcem ani nie jest szybkie jeśli mamy już kilkadziesiąt widoków skomplikowanej aplikacji – PS się przycina nawet na najmocniejszych maszynach.

Kolejnym krokiem była próba korzystania z iCloud i Dropbox … i tu czas aktualizacji danych kiedy potrzeba podejrzeć często i szybko efekty naszej pracy mocno rozczarowuje.

Zacząłem więc szukać rozwiązania dedykowanego, w pierwszej kolejności padło na:

Anypass

iphone 2.99$ / ipad 2.99$ / mac free

Pierwszym krokiem jest sparowanie programu na maku razem z odpaloną appką na iOS – wykonuje się to szybko prosto i łatwo. Program działa w sympatyczny sposób, bitmapę (jpg, png, gif i kilka podstawowoych) przeciąga się na górnej krawędzi okna upuszcza na okienko które wyjechało. Program posiada 2 wady, jedną jest konieczność generowania bitmap które dopiero można wysłać na urządzenie mobilne a druga wadą jest to że połączenia niezwykle szybko są zrywane i trzeba restartować program bo za chiny ludowe nie chcą same się ponownie połączyć mimo że powinny. Na minus trzeba jeszcze zaliczyć że nie da się nadpisac pliku (prawdopodobnie błąd), oraz że dostajemy listę plików które musimy otworzyć (brak podglądu na żywo).

Program odpadł podczas testów, poleciał do kosza a jego miejsce zajął Skala Preview.

Skala Preview

iphone / ipad free / mac free

Oba programy (na Mac i iPhone/iPad) pobieramy z Appstore. Niestety konfiguracja wymaga 1-2 min zanim będzie można używać. Należy wejść w Photoshopie w Edit-Remote Connection a następnie włączyć połączenia zdalne i zdefiniować nazwę oraz hasło (6 lub więcej znaków). Te same dane należy wpisać w aplikacji na komputerze. Po wykonaniu tych czynności szybko na ekranie urządzeń pojawia się widok pliku PSD prosto z Photoshopa. Ja się zachwyciłem i wyrzuciłem wszystkie inne programy do kosza. Najbardziej ergonomiczne rozwiązanie jakie można sobie wymyślić, robię aplikację w Photoshopie i mój plik na bieżąco mam np w iPhone.

Niestety to było działanie pochopne, program na Maca jest niestabilny i się często wykłada (sprawdzone na 3 maszynach). Co gorsza odświeżanie pliku z czasem zaczyna mieć coraz większe opóźnienia i w końcu na ekranie urządzenia mobilnego zostaje jakaś wersja, całość wymaga restartu. Prawdopodobnie zapełnia się cashe po jednej albo drugiej stronie. W końcu pracując nad plikiem w rozdzielczości retiny nie można podejrzeć pracy bez ingerencji rąk (podwójne tapnięcie) aby dostosować widok. Po kilku dniach te niedogodności zaczynają drażnić.

Wracam więc do poszukiwania optymalnego rozwiązania a aplikacja do kosza.

Designer Preview

iphone / ipad 1.99$ / mac free

Instalacja z Appstore oczywiście nie nastręcza problemów, łączenie urządzeń z kompem też nie jest problemo-genne. Jak przystało na makowe aplikacje już po paru chwilach można się cieszyć możliwością wyświetlania projektu na urządzeniu mobilnym. Jest jednak spora niedogodność – dodawanie obrazów wymaga dość sporego nakładu pracy. Klikania, wybierania na dysku wcześniej przygotowanych obrazów jest sporo. Nie jest to dla projektanta ergonomiczne narzędzie. Za to ma kilka swoich plusów gdzie indziej. Mając bitmapy z przezroczystością można je układać warstwami a na telefonie zostanie zaprezentowany połączony obraz. Ciekawe jest również to że bitmapa nie miesząca się w ekranie jest przycinana i można ją ustawiać – idealne dla maniaków zmieniania tapet na telefonie.

Niestety program jak pozostałe wylądował w koszu, czas zająć się teraz świetnym Silkscreenem.

Silkscreen mój wybór

iphone / ipad free / mac 13,99$

Aplikacja świetnie zaprojektowana, banalnie prosta instaluje się … jak zawsze, banalnie i bezproblemowo. Cała funkcjonalność to odpalenie w tej samej sieci aplikacji na urządzeniu mobilnym jak i na komputerze co powoduje natychmiastowe połączenie się. Następnie należy plik psd z projektem przeciągnąć na okno aplikacji i za chwile zobaczymy podgląd w telefonie/tablecie. Co ważne po każdorazowym zapisaniu w Photoshopie obraz się odświeża automatycznie. Bardzo dobre rozwiązanie i po dłuższych testach wróciłem do tej aplikacji mimo że za każdym razem, mając wiele plików trzeba przeciągać nowy – aplikacja okazała się po prostu najstabilniejsza ze wszystkich. Mimo że najdroższe rozwiązanie a i znajdzie się takie które teoretycznie jest wygodniejsze to jednak jak polecam Silkscreen z czystym sumieniem.

LiveView

iphone / ipad free / mac free

Darmowa zarówno na Mac jak i na iPhone i iPad, w Appstore znajduje się tylko wersja mobilna – na komputer aplikacje trzeba pobrać ze strony producenta. Instalacja bez problemu, urządzenia się łączą natychmiast. Sposób działania jest nieco inny od pozostałych – aplikacja pokazuje wycinek ekranu. A więc podgląd nie zawsze jest dokładny, widok w Photoshopie może się przesunąć, możemy powiększać czy zmniejszać. Idealne ustawienie co do piksela projektu też jest żmudne i czasochłonne. Na pewno jest to fajne narzędzie do prototypownia (co sam autor wspomina) no i ogromną zaletą może być to że rozwiązanie jest całkowicie darmowe, choć tu niedogodności Skala Preview są mniejsze – a też jest darmo.

Sumując: najdroższe okazało się najlepszym rozwiązaniem moich problemów. Zakładam jednak że nie znalazłem wszystkich rozwiązań i ktoś może podzieli się czymś genialnie prostym.