10 Najlepszych narzędzi do prototypowania aplikacji mobilnych
W procesie tworzenia aplikacji na iPhone'a i Androida, wireframing jest niezwykle ważny. W pierwszym etapie, wstępny pomysł staje się szybkim szkicem do podzielenia się z kolegami z zespołu, podczas gdy później projektant UI/UX może użyć bardziej zaawansowanych narzędzi do stworzenia w pełni funkcjonalnego prototypu z przejściami, linkami i przepływami ekranu do modelowania doświadczenia użytkownika. Narzędzia do wireframingu są tym, co pozwala na przełożenie tego, co sobie wyobrażałeś, na coś bardziej realnego, coś, co może być widziane i rozumiane przez ludzi wokół, więc wybór odpowiedniego narzędzia jest kluczowy dla stworzenia płynnego przepływu pracy.
W ciągu ostatnich lat widzieliśmy setki, jeśli nie tysiące rozwiązań z zakresu wireframingu, od najprostszych do bardzo złożonych, od samodzielnych aplikacji po edytory internetowe, więc teraz trudno jest poruszać się po tym rynku bez przewodnika lub przynajmniej punktu wyjścia. Dlatego też wybraliśmy kilka z najbardziej użytecznych narzędzi do tworzenia prototypów, począwszy od aplikacji do rysowania szkiców, które nie wymagają specjalnych umiejętności, a skończywszy na bogatych w funkcje (choć często kosztownych) pakietach desktopowych z różnego rodzaju instrumentami, których może potrzebować w swojej pracy specjalista od UI/UX.
Sprawdź kilka najlepszych przykładów każdego typu narzędzi do tworzenia prototypów, a jeśli uważasz, że czegoś Ci brakuje, dodaj swoje ulubione rozwiązanie w sekcji komentarzy.
1. Axure RP.
Eleganckie i potężne narzędzie do wireframingu z aplikacjami desktopowymi dla komputerów Mac i PC, Axure jest tym, czego ludzie w Stanfy używają do tworzenia prototypów aplikacji mobilnych.
Axure RP pozwala użytkownikom na tworzenie interaktywnych prototypów HTML nie tylko dla każdego urządzenia mobilnego, ale także dla stron i aplikacji internetowych. Jest dość intuicyjny i wykorzystuje prosty interfejs "przeciągnij i upuść" oraz logikę warunkową do tworzenia scenariuszy użycia.
Cena: $289 do $589 za licencję, bezpłatna wersja próbna dostępna.
2. Proto.io.
To narzędzie internetowe jest w pełni funkcjonalna platforma dla wireframingu UI, jeden z najbardziej popularnych na rynku. Oprócz przyjaznego interfejsu użytkownika, Proto zawiera potężne narzędzie adnotacji, które może być używane przez klientów projektanta lub kolegów do przeglądu i dyskusji.
Kolejną wygodną funkcją jest możliwość testowania swoich mobilnych prototypów na prawdziwym urządzeniu z aplikacją Proto.io Player dostępną dla systemów iOS i Android.
Cennik: od 24 dolarów miesięcznie, dostępna jest bezpłatna wersja próbna.
3. Fluid UI.
Fluid to kolejne popularne internetowe narzędzie do prototypowania z ponad 200.000 użytkowników na całym świecie, wśród których znajdują się takie giganty jak Xerox, Motorola i eBay, według strony projektu. Posiada system wizualnych linków, który ułatwia tworzenie przepływów ekranowych, a także narzędzia do współpracy i makiety odtwarzaczy dla systemów iOS i Android.
Aplikacja internetowa posiada ponad 2000 gotowych widżetów UI do tworzenia prototypów dla systemów iOS, Android i Windows 8.
Cennik: od bezpłatnego do 49 dolarów miesięcznie.
4.
To minimalistyczne narzędzie do tworzenia wireframe'ów jest idealne dla nowicjuszy w świecie designu UI/UX, jak również dla tych, którzy muszą tylko tworzyć proste prototypy w czystym i wolnym od bałaganu środowisku.
Wireframe posiada tylko trzy proste szablony prototypów aplikacji dla stron internetowych, tabletów i smartfonów (a raczej iPadów i iPhone'ów) oraz zestaw gotowych elementów. Jest też inteligentny silnik sugestii, który ma odczytywać twoje myśli i zgadywać, co próbujesz napisać.
Cennik: od darmowego do 99 dolarów miesięcznie (dla nieograniczonej liczby użytkowników i projektów).
5. Omnigraffle.
Choć nie jest to wyłącznie mobilne narzędzie do podsłuchiwania aplikacji, Omnigraffle jest szeroko stosowany przez projektantów UI/UX do tego celu. Ta potężna platforma do tworzenia diagramów, dostępna jako samodzielna aplikacja na Maca i iPada, wykorzystuje mechanikę warstwową znaną każdemu, kto pracował z tradycyjnymi pakietami graficznymi, takimi jak Photoshop.
Użytkownicy Omnigraffle mają również dostęp do ogromnej biblioteki gotowych szablonów, które zawierają wszystko, od ikon Google Material Design do szablonów Apple Watch.
Cena znacznika: od 99,99 dolarów do 199,99 dolarów dla komputerów Mac i 49,99 dolarów dla iPada, dostępna jest bezpłatna wersja próbna.
6. Balsamiq.
Kolejne proste rozwiązanie w zakresie wireframingu, Balsamiq jest doskonałym narzędziem do szybkiego prototypowania. Aplikacja została stworzona tak, aby była jak najłatwiejsza i jak najbardziej intuicyjna, i zeszła z drogi wyobraźni użytkownika.
Twórcy Balsamiqa przyznają, że celowo ograniczyli opcje interaktywności, aby umożliwić użytkownikom tworzenie makiet, tak jak robiliby to za pomocą pióra i papieru, więc musisz dowiedzieć się, czy podoba ci się ten styl wireframingu, otrzymując bezpłatną wersję próbną.
Price tag: 79 dolarów dla systemów Windows, Mac i Linux; 12 dolarów miesięcznie za subskrypcję aplikacji internetowej, bezpłatna wersja próbna.
7. Tylko w Mind.
Sprzedawany jako "jedno rozwiązanie do prototypowania aplikacji dla wszystkich ekranów", Just in Mind jest platformą wireframingową dla systemów Windows i Mac, która pozwala na tworzenie responsywnych stron internetowych i aplikacji dla telefonów i tabletów z łatwością i komfortem. Możesz definiować transakcje gestami dla aplikacji mobilnych i testować je na rzeczywistych urządzeniach z systemem Android i iOS.
Projektanci uzyskują dostęp do szerokiej gamy widgetów, które mogą grupować w bibliotekach i wykorzystywać w swoich mobilnych prototypach.
Cena: od darmowych do 19 lub 29 dolarów miesięcznie lub 495 dolarów za licencję wieczystą.
8. UXPin.
Narzędzie do projektowania UX-ów, zbudowane przez projektantów UX-ów", UXPin wygląda jak odpowiednio wyważone rozwiązanie gdzieś pomiędzy szybkim oprogramowaniem do prototypowania a ogromnymi, bogatymi w funkcje platformami, które często są trudne do zbadania i mają sens.
Dzięki UXPin można prototypować aplikacje na smartfony lub tablety, a także responsywną stronę internetową. Daje to również użytkownikom możliwość współpracy w czasie rzeczywistym i przekazywania informacji zwrotnych.
Tag cenowy: od 15 do 40 dolarów za użytkownika miesięcznie, dostępna jest bezpłatna wersja próbna.
9. Moqups.
To narzędzie do szkicowania w stylu webowym jest nieco podobne do Wireframe i Balsamiq w swojej prostocie, pozwalając użytkownikom na tworzenie prototypów z szybkością myślenia za pomocą wiązki gotowych szablonów i szablonów dla iPhone'a i iPada.
Edytor wektorowy Moqupsa pozwala na łączenie stron z linkami i hotspotami w celu tworzenia przepływów ekranowych, a także eksportowanie makiet jako dokumentów PDF.
Cennik: od bezpłatnego do 50 dolarów miesięcznie (dla nieograniczonej liczby użytkowników).
10. Marvel.
Wreszcie, Marvel jest usługą, która pozwala projektantom tworzyć prototypy aplikacji dla smartfonów, tabletów, stron internetowych, a nawet urządzeń do gier. Współpracuje z Dropboxem i obsługuje pliki PSD, więc nie ma potrzeby konwertowania ich na inne formaty.
Oprócz internetowej platformy do prototypowania, użytkownicy mają do dyspozycji aplikację na iPhone'a, która pozwala na "animowanie" szkiców rysowanych na papierze w interaktywne wireframey.
Cennik: już wkrótce darmowa, płatna wersja "Pro".
O to chodzi i mamy nadzieję, że każdy znalazł coś, co rezonuje z jego sposobem pracy, gdyż na koniec dnia jest to najważniejsza jakość każdego rozwiązania z zakresu wireframów. Prawdopodobnie więcej niż jedno z opisanych narzędzi może znaleźć swoje miejsce na komputerach różnych członków zespołu w firmie zajmującej się tworzeniem aplikacji mobilnych. A jeśli nadal uważasz, że najlepszymi narzędziami do narysowania wczesnego prototypu są ołówek i papier, to niech tak będzie - zwłaszcza, że istnieją narzędzia, które pozwalają na inteligentną digitalizację takich szkiców do dzielenia się z ludźmi wokół.
Szczęśliwego prototypowania!
Popularność smartfonów sprawia, że coraz więcej programistów szuka zleceń jako developerzy gier, aplikacji i narzędzi na Android. Jest to atrakcyjna opcja zarówno dla tych, którzy dopiero poznali podstawy kodowania, jak i dla tych, którzy mają już pewną wiedzę w zakresie programowania, ale szukają dla siebie nowej niszy.
Z karierą developera Androida jest tak samo, jak ze wszystkimi nowymi umiejętnościami. Stosunkowo łatwo jest zdobyć podstawy, ale trudniej jest osiągnąć naprawdę wysoki poziom lub przekuć umiejętności w natychmiastowy sukces. Jak ze wszystkim, również tu potrzebna jest praca, pasja i wytrwałość oraz… pomysł, jak je ukierunkować.
Zebraliśmy 10 podstawowych rad, dzięki którym staniesz się lepszym developerem gier i aplikacji na Android. Przydadzą się one zarówno tym, którzy mają już za sobą pierwsze kroki, jak i początkującym koderom.
1. Poznaj wewnętrzną budowę frameworka Android
I nie chodzi tu o dokumentację, ale o sam kod frameworka. Jak wiesz, czytanie kodu napisanego przez innych programistów jest dobrą lekcją kodowania samą w sobie, ale w tym konkretnym przypadku ma jeszcze jedną funkcję. Zaskoczy cię, jak dużo możesz odkryć, kiedy widzisz, jak działają określone rozwiązania i jak ich części pasują do siebie.
Jeśli chcesz kodować lepiej, warto się przełamać i „przyjrzeć się” wewnętrznemu działaniu Android SDK.
2. Pogódź się z tym, że nie nauczysz się wszystkiego
Android to duży system operacyjny. Nie poznasz go w całości w ciągu miesiąca lub dwóch. Co więcej, im więcej się nauczysz, tym bardziej zrozumiesz, jak dużo jeszcze przed tobą. Dotyczy to zwłaszcza początkujących programistów, którzy często doświadczają obawy, że pominą naukę absolutnie kluczowej umiejętności albo informacji. Naturalną „techniką obronną” jest uczenie się wszystkiego, bez rozróżniania ani jak potrzebna będzie ci ta wiedza albo do czego ją wykorzystasz.
Zamiast tego spróbuj zaadoptować inną technikę: ucz się rzeczy, które są ci aktualne potrzebne i które wykorzystasz w aplikacji, jaką piszesz. W miarę pojawiania się kolejnych wyzwań będziesz rozszerzać horyzonty, ale dzięki temu podejściu unikniesz chaosu i zamętu, również w głowie.
3. Ucz się języków…
Warto jest śledzić nowości w świecie programowania, zamiast ograniczać się tylko do Androida. Znajomość różnych języków programowania otwiera nowe perspektywy, inspiruje, podsuwa nowe pomysły a jednocześnie pomaga rozwijać umiejętności w tworzeniu aplikacji na Android.
4. …zwłaszcza Javy
A dokładniej wzorców projektowych (design patterns). Trudno przecenić znajomość wzorców Javy dla developerów Androida. Zwróć uwagę na to, że design patterns nie są fragmentem kodu, ale opisem rozwiązania określonych problemów projektowych, które możesz napotkać w czasie pracy – i pod tym względem mogą uratować ci życie.
Znajomość design patterns pomoże ci także lepiej porozumiewać się z innymi programistami, kiedy zaczną mówić o mostach, trampolinach albo adapterach. Listę design patterns znajdziesz tu.
5. Zadbaj o architekturę
Prawdopodobnie kiedy tworzysz aplikację, wrzucasz cały kod w Activiser albo Fragments, tworząc jeden wielki boski obiekt, który nie sposób zarządzać ani nie sposób go przetestować.
Ten błąd popełnia wielu początkujących developerów, dlatego im szybciej zadbasz o dobrą architekturę aplikacji (na przykład MVP lub MVVM), tym większe korzyści odniesiesz i ty, i twoje projekty. Oddziel logikę biznesową aplikacji od ViewInteraction i DataInteraction w osobnych warstwach, żeby łatwiej było nimi zarządzać i przeprowadzać testy.
6. Przestrzegaj dobrych praktyk kodowania dla Androida
Naprawdę trudno jest utrzymać standardy coding guidelines Androida, kiedy pracujesz z developerami, którzy nie piszą przejrzystego, „czystego” kodu.
Pamiętaj, że stosując się do określonych wytycznych działasz nie tylko na korzyść społeczności, ale również… na swoją własną. Pomyśl, jaką przyjemnością byłaby dla ciebie praca na niechlujnie napisanym kodzie, który nie utrzymuje żadnego standardu. Jeśli na samą myśl cierpnie ci skóra, poświęć trochę czasu na zapoznanie się z zaleceniami Android (znajdziesz je np. tu).
Warto również przyswoić sobie najlepsze praktyki Androida. Kiedy wprowadzisz je do swojej pracy, aplikacje nie tylko będą dobrze wyglądały i dobrze działały, ale będą również łatwiejsze w zarządzaniu i rozwoju. Listę dobrych praktyk znajdziesz tu.
7. Pamiętaj, żeby nie przedobrzyć
Nie przedobrzyć, nie przekombinować, nie prze-projektować. Szczególnie na etapie planowania i projektowania aplikacji, kiedy masz dobry (naprawdę, naprawdę dobry) pomysł. Im dłużej nad nim myślisz, analizujesz i rozbudowujesz, tym większy twój niepokój, niepewność i wątpliwości co do całego projektu. Pod koniec nie masz nawet pewności, czy ten pomysł rzeczywiście był dość dobry…
Zamiast dzielić włos na czworo, zrób to, co aktualnie jest najlepsze dla aplikacji. Zawsze możesz dopasować się do zmieniającej się sytuacji (wymagań klienta, funkcji, lepszych rozwiązań), kiedy będą one potrzebne, bez zbędnego bagażu w postaci wielkiego, rozbudowanego planu, który mocno cię ogranicza.
8. Dziel zadania na mniejsze
Jako developer zawsze dziel projekty i problemy techniczne na mniejsze, łatwiejsze i niezależne części składowe, które mogą być łatwo zrozumiałe i równie łatwo rozwiązane. Dzięki temu twoja praca nabierze tempa, również w przypadku działania w zespole.
Nie daj się wystraszyć początkowemu rozmiarowi projektu lub temu, jak bardzo jest złożony i rozbudowany. Wszystko da się napisać jeśli przyjmiesz odpowiednią ścieżkę.
9. Testuj
Przyjmij jako swoją zasadę, że dana funkcjonalność jest zakończona dopiero, kiedy masz do niej również starannie przygotowane sytuacje testowe. Wysiłek włożony w testy zwróci się, kiedy gotowy kod nie będzie wyrzucał ci błędów na późniejszych etapach.
W trakcie pisania aplikacji korzystaj z techniki test-driven development (TDD). Najpierw napisz test, który na tym etapie nie powinien się udać, następnie napisz i zaimplementuj kod. Powinien on przejść napisany wcześniej test – kiedy tak się stanie, oczyść i zoptymalizuj kod (refaktoryzacja), aby spełniał on założenia i standardy.
10. Pisz projekt poboczny
Tak, to może brzmieć jak słaby żart – nie możesz odkopać się z pracy, więc po co ci jeszcze dodatkowy projekt? Tymczasem właśnie taki „plac zabaw” w pobocznym projekcie to świetne miejsce do testowania nowości i uczenia się nowych rozwiązań. Dzięki temu kiedy natrafisz na jakąś nowość dotyczącą Androida, możesz bez przeszkód przetestować ją w swoim pobocznym projekcie, bez ryzyka „zaburzenia” działania tego, co już masz napisane.
10 kroków, aby stać się lepszym programistą Android
Jak być może widzisz, nasze rady i wskazówki dotyczą zarówno samego sposobu uczenia się, jak i zarządzania zadaniami w ramach projektu oraz organizacji samego kodu. Bycie dobrym developerem nie oznacza tylko tego, jak szybko jesteś w stanie dostarczyć gotowe rozwiązanie, ale również w jakiej formie oraz… jakim kosztem własnym.
Dzielenie zadań na mniejsze części, zajmowanie się tylko tym w projekcie, co jest istotne w danym momencie, testowanie i poznawanie narzędzi, które ułatwiają pracę to tylko podstawowe rady. Teraz czas na twój ruch i wprowadzenie ich w życie. A może uzupełnisz naszą listę o wskazówki oparte na twoim doświadczeniu? Zapraszamy!
Z tego wpisu dowiesz się:
jak się zachować otrzymując negatywny feedback?
co zrobić, żeby niepochlebna ocena nie działała demotywująco?
w jaki sposób krytyczne uwagi przekuć na swój sukces?
Krytyka to groźny przeciwnik każdej pracy twórczej. Jest również nieodłącznym elementem w pracy programisty. Wysokie standardy w branży IT sprawiają, że powszechną praktyką są m.in. code review, czyli poddawanie ocenie przez innego developera fragmentu kodu, aby upewnić się, że jest on odpowiednio wysokiej jakości. Sytuacje, kiedy okazuje się, że trzeba coś poprawić nie należą do rzadkości. Najgorsze, co programista może wtedy zrobić to obrazić się. Dlatego kluczowa jest umiejętność zmierzenia się z negatywną oceną i wykorzystanie jej do tego, aby stawać się coraz lepszym specjalistą. Tylko jak to zrobić?
Oddziel krytykę od wypowiadającej ją osoby
Dlaczego relacje między programistami i testerami bywają dalekie od ideału? Pierwsi często traktują drugich jak wrogów. Tymczasem zakładanie, że negatywny feedback to nic innego jak efekt czystej złośliwości, do niczego nie prowadzi. Jeśli krytyka jest konstruktywna, nie powinno mieć znaczenia, kto ją wypowiada.
Zatrzymaj pierwszą reakcję
Słysząc krytyczne uwagi na swój temat, zwykle zaczynają nam puszczać nerwy. Nie pozwól sobie jednak na działanie pod wpływem emocji. Weź głęboki oddech, odczekaj i zdystansuj się. Wysłuchaj krytyki do końca, dając tym samym rozmówcy do zrozumienia, że traktujesz go poważnie, a samemu zyskując czas na ochłonięcie i przemyślenie dalszych kroków.
Zrozum zarzuty
Jeśli czujesz się zupełnie zaskoczony krytycznymi słowami, poproś rozmówcę o czas do namysłu lub sprawdzenie faktów. W sytuacji, kiedy ocena wydaje ci się zbyt ogólnikowa lub niesprawiedliwa, poproś o doprecyzowanie. O ile masz taką możliwość, „prześpij się z problemem” i zastanów, na ile feedback ten rzeczywiście jest słuszny.
Zareaguj asertywnie
W zależności od tego, jak oceniasz słuszność zarzutów, dopasuj swoją reakcję. Jeśli jesteś przekonany o swojej racji, możesz na przykład powiedzieć: „Dziękuję za informację, ale pozwól mi zachować swoje zdanie”. Jeśli natomiast negatywna ocena twojej pracy jest trafna, zaakceptuj ją bez okazywania poczucia winy. Zapewnij, że w przyszłości będziesz bardziej uważał. Reagując w dojrzały sposób powstrzymasz nawet tych, których krytyka jest daleka od konstruktywności, a miała na celu jedynie wyładowanie niezadowolenia.
Wykorzystaj szansę
Zaakceptuj to, że nie jesteś idealny a jedynym sposobem, żeby się czegoś nauczyć jest popełnianie błędów, wyciągnięcie wniosków i ruszenie naprzód. Potraktuj więc krytykę jako okazję do lepszego poznania siebie i inspirację do rozwoju. Co może być cenniejszego niż wskazanie obszarów do poprawy?
Nikt nie lubi krytyki, nawet tej konstruktywnej. Jeśli jednak spojrzymy na nią jak na prezent, który ma służyć naszemu rozwojowi i sprawić, że staniemy się lepszymi specjalistami, dużo łatwiej będzie nam ją przyjąć. Warto ją docenić.
Leave a Comment