Najlepsze narzędzia do tworzenia szkieletów dla Twojej aplikacji
Opublikowany: 2018-03-23Przygotowaliśmy listę narzędzi do tworzenia szkieletów , dzięki którym tworzenie aplikacji lub witryny internetowej będzie mniej onieśmielające. Jeśli szukasz świetnego narzędzia do tworzenia prototypów , zamieściliśmy również kilka sugestii dotyczących tych narzędzi.
Stworzenie nowej aplikacji lub strony internetowej to godny szacunku wyczyn, którego niewielu dokona w swoim życiu. Nie oznacza to, że powinieneś zrezygnować z robienia tego, ale raczej, że powinieneś to wszystko zbadać i zrozumieć, zanim zaczniesz nurkować w głowie. Wielu nowicjuszom trudno jest zrozumieć różnicę między modelem szkieletowym, prototypem i makietami, więc ten post jest tutaj, aby pomóc Ci zrozumieć każdą z nich.
INDEKS
CO TO JEST RAMKA?
NAJLEPSZE NARZĘDZIA DO OKABLOWANIA ROKU 2018
CZYM JEST PROTOTYP?
NAJLEPSZE NARZĘDZIA DO PROTOTYPOWANIA 2018
Twórz makiety swojego produktu
CO TO JEST RAMKA?
Masz genialny pomysł na nową aplikację lub stronę internetową, ale jak zacząć przekształcać go w rzeczywisty produkt? Z makietą! Jest to pierwszy krok w procesie planowania, dlatego ważne jest, aby go nie pominąć.
Podstawy szkieletu
Zanim podejmiesz jakiekolwiek ważne decyzje projektowe, Twoja aplikacja lub witryna internetowa będzie najpierw potrzebować funkcjonalnego układu, który ma sens. W tym miejscu pojawia się model szkieletowy. Większość ludzi zaczyna od odręcznego szkicu tego, jak ma wyglądać ich aplikacja lub strona internetowa. Następnym krokiem jest przekształcenie tego szkicu w cyfrowy układ lub kontur, który wygląda na bardziej zorganizowany i profesjonalny.
Twój szkielet będzie musiał komunikować podstawową strukturę strony bez żadnych elementów projektu ani rzeczywistej treści.
Praca z modelem szkieletowym, zanim zaczniesz cokolwiek upiększać, pozwoli Ci wyłapać wszelkie błędy w użyteczności, z którymi trudno byłoby sobie później poradzić. Na tym etapie ważniejsze jest upewnienie się, że zawarte w nim elementy mają sens i są funkcjonalne, szczególnie dla grupy docelowej. Jeśli próbujesz przyciągnąć uwagę inwestorów, makieta pomoże im również znacznie łatwiej zrozumieć Twój produkt. W rzeczywistości brak gotowego modelu szkieletowego może spowodować, że inwestorzy bardzo szybko stracą zainteresowanie. Elementy, które są zawarte w modelu szkieletowym, to zazwyczaj pola na nagłówki, przyciski, pola tekstowe i pola obrazów.
Model szkieletowy a makieta
Łatwo pomylić model szkieletowy z makietą, ponieważ zawierają one bardzo podobne elementy. Jednak pracując z zespołem programistów, projektantów i inwestorów, musisz zrozumieć, co ich wyróżnia.
Na początek szkielet służy do organizowania zawartości i funkcji aplikacji , ale w bardzo prosty sposób. Pomyśl o tym jako o zarysie, który pokazuje podstawową strukturę tego, co zostanie zawarte w Twojej aplikacji. Gdy zaczniesz dodawać inne elementy, takie jak kolor, ikony, obrazy, czcionki i zdjęcia, zacznie się przekształcać w makietę.
Makieta zapewnia wierną reprezentację Twojej aplikacji lub witryny w fazie rozwoju. To znacznie bardziej realistyczna reprezentacja tego, w jaki sposób kształtowana jest Twoja aplikacja. Pomyśl o tym kroku w procesie jako o dodaniu odrobiny treści do szkieletu szkieletu lub nadaniu mu nieco więcej życia.
NAJLEPSZE NARZĘDZIA DO OKABLOWANIA
BALSAMIQ
MOCKPLUS
MOQUP
RAMKA.CC
MOCKFLOW
BALSAMIQ
Dostępne dla wszystkich systemów operacyjnych, ponieważ jest oparte na sieci WWW.
Najważniejsze cechy: Balsamiq to wysoce zalecane narzędzie do tworzenia modeli szkieletowych, które umożliwia użytkownikom tworzenie modeli szkieletowych dla aplikacji komputerowych, aplikacji mobilnych, witryn internetowych, okien dialogowych, aplikacji internetowych, aplikacji na tablety i nie tylko . Tworzenie makiety za pomocą Balsamiq jest podobne do rysowania na tablicy, a program umożliwia także przeciąganie i upuszczanie elementów interfejsu użytkownika, uzyskiwanie opinii na temat szkiców od zespołu, poprawianie projektów i udoskonalanie pracy w czasie rzeczywistym.
Ceny: Cena tego narzędzia będzie się różnić w zależności od wielu sytuacji. Możesz zacząć od 30-dniowego bezpłatnego okresu próbnego, ale potem będziesz musiał płacić miesięczne lub roczne opłaty, w zależności od wybranej platformy. Na przykład wersja w chmurze będzie kosztować 9 USD miesięcznie lub 90 USD rocznie za maksymalnie dwa projekty. Wersja na komputer kosztuje 89 USD za licencję dla jednego użytkownika.
Bonus: Balsamiq oferuje bezpłatne kursy dostępne za pośrednictwem Udemy i Skillshare, aby pomóc Ci nauczyć się korzystać z ich produktu i uzyskać z niego najlepsze wyniki.
MOCKPLUS
Dostępne dla systemów Mac OS, Windows, Android i iOS.
Kluczowe funkcje: Ponieważ projekty można łączyć z pamięcią masową w chmurze, MockPlus pozwala całemu zespołowi na łatwą współpracę nad pojedynczym projektem. Użytkownicy mogą komentować projekt bezpośrednio i oznaczać go, aby inni mogli go zobaczyć. Możesz również wysyłać do swojego zespołu e-maile z powiadomieniami, aby pozostać w kontakcie o zmianach. Najlepsze jest to, że możesz to wszystko zrobić bez kodowania lub programowania, dzięki czemu łatwiej jest skupić się na pracy przed Tobą.
Ceny : Dostępna jest bezpłatna opcja dla pojedynczych użytkowników, która obejmuje nieograniczoną liczbę produktów, chociaż jest ograniczona w innych aspektach. Następnie cena będzie wynosić od 199 USD rocznie dla osoby fizycznej do 2999 USD rocznie dla przedsiębiorstwa. Możesz także kupić licencję, która będzie wynosić od 399 USD dla jednego użytkownika do 5999 USD dla przedsiębiorstwa (30 użytkowników).
Bonus: Największą zaletą MockPlus jest to, że umożliwia programistom tworzenie szkieletów z większą szybkością dzięki narzędziom, które zaprojektowali w celu przyspieszenia procesu.
MOQUP
Dostępne dla wszystkich systemów operacyjnych, ponieważ jest oparte na sieci Web.
Kluczowe cechy: Moqups to platforma internetowa, której można używać do tworzenia szkieletów aplikacji internetowych i aplikacji mobilnych na iOS, Androida i Bootstrap. Ponieważ platforma jest oparta na sieci, masz możliwość łączenia się i pracy z dowolnego miejsca. Platforma służy nie tylko do tworzenia makiet, ale także do tworzenia diagramów i prototypów. Możesz łatwo przeciągać i upuszczać elementy, używać ich zestawów szablonów, wybierać spośród różnych czcionek, zaznaczać obiekty oraz przeciągać i upuszczać własne obrazy do tego, nad czym pracujesz.
Ceny : podobnie jak większość narzędzi do tworzenia szkieletów, Moqups oferuje bezpłatną wersję próbną. Następnie cena będzie zależeć od wielu czynników. Na przykład roczna subskrypcja, która obejmuje nieograniczoną liczbę projektów, obiektów, przestrzeni dyskowej i komentarzy, będzie kosztować 13 USD miesięcznie dla jednego użytkownika i 19 USD miesięcznie dla zespołu kreatywnego (3 osoby). Będziesz musiał skontaktować się bezpośrednio z Moqups, aby uzyskać wycenę dla konta Enterprise.
Bonus: Jeśli należysz do organizacji pozarządowej, szkoły lub organizacji non-profit, Moqups zapewni Ci konto Premium bez żadnych kosztów.
RAMKA.CC
Dostępne we wszystkich systemach operacyjnych, ponieważ jest oparte na sieci Web.
Kluczowe cechy: Wireframe.CC jest uważany za jedno z najbardziej podstawowych dostępnych narzędzi wireframe . To niekoniecznie jest zła rzecz, zwłaszcza jeśli jesteś początkującym. W rzeczywistości, ze względu na prostą konstrukcję, programiści mogą łatwiej skupić się na swojej pracy. Ten program internetowy może być używany do tworzenia szkieletów okien przeglądarki, aplikacji mobilnych lub aplikacji na tablety.
Ceny : Wireframe.CC oferuje 7-dniowy bezpłatny okres próbny i bezpłatne konto podstawowe. Następnie będzie kosztować 16 USD miesięcznie lub 144 USD rocznie za jednorazowe użycie, 439 USD miesięcznie lub 390 USD rocznie dla trzech użytkowników lub 99 USD miesięcznie lub 990 USD rocznie dla przedsiębiorstwa (nieograniczeni użytkownicy).
Bonus: Prostota tego programu sprawia, że trudno jest się rozproszyć i zwlekać. W rzeczywistości elementy interfejsu użytkownika będą wyświetlane jako opcje tylko w razie potrzeby.
MOCKFLOW
Dostępna jako aplikacja komputerowa dla systemów Mac OS i Windows lub jako aplikacja internetowa.
Kluczowe cechy: Ten program może być używany do projektowania aplikacji internetowych, aplikacji mobilnych, interfejsów i oprogramowania między innymi. Oferują pakiety komponentów dla wybranego interfejsu, aby ułatwić pracę. MockFlow oferuje również funkcje współpracy, które pozwalają wszystkim członkom Twojego zespołu zobaczyć zmiany w czasie rzeczywistym, a jednocześnie umożliwiają tworzenie komentarzy z adnotacjami, które wszyscy mogą zobaczyć. Możesz eksportować swoje pliki w wielu formatach, w tym DOC, PDF i HTML.
Cennik : Konto podstawowe, które obejmuje jednego użytkownika i maksymalnie jeden projekt w każdym narzędziu, jest bezpłatne. Konto premium dla jednego użytkownika kosztuje 14 USD miesięcznie. Jedynym minusem są ograniczenia udostępniania. Pakiet zespołowy dla trzech użytkowników kosztuje 29 USD miesięcznie, ale możesz dodać użytkowników do tego konta za dodatkową opłatą. Konto firmowe nie ma limitu liczby użytkowników i kosztuje 160 USD miesięcznie.
Bonus: Jedną z zalet korzystania z MockFlow jest ich MockStore, który sprzedaje szablony UI dla wszelkiego rodzaju interfejsów. Jeśli nie czujesz się zainspirowany, możesz przejrzeć ich sklep w poszukiwaniu pomysłów, a nawet kupić szablon.
CZYM JEST PROTOTYP?
Prototyp nie jest jeszcze gotowym produktem, ale powinien być do niego bardzo podobny pod względem wyglądu i ogólnej funkcjonalności. Ten prototyp Twojej aplikacji lub witryny o wysokiej wierności powinien służyć do testowania produktu i uzyskiwania opinii użytkowników, aby pomóc Ci rozwiązać wszelkie problemy, które mogą się pojawić.
Podstawy prototypów
Prototyp zwykle pojawia się pod koniec procesu projektowania i pełni funkcję pomostu do produktu końcowego. Na tym etapie projektanci będą mogli zaprezentować swoją pracę i wykorzystać ją do uzyskania przydatnych informacji zwrotnych. Prototyp powinien zawierać nie tylko elementy projektowe, ale także pokazywać, jak projekt będzie działał po jego ukończeniu.
Prototyp może nie zawierać wszystkich animacji i interakcji końcowego projektu, ale powinien być w stanie zademonstrować przepływ aplikacji. Pozwala na przetestowanie jego wydajności.
Możesz poprosić użytkowników o przetestowanie go i przekazanie opinii, aby poprawić wrażenia użytkownika. Możesz mieć wrażenie, że używasz prawdziwej aplikacji, ale prototyp to tylko zbiór połączonych ze sobą obrazów. Tego typu prototypy, interaktywne prototypy, są idealne, ponieważ możesz zobaczyć gotowy projekt, jednocześnie z nim współpracując. Stworzenie dobrego interaktywnego prototypu może zająć trochę czasu i kosztować, ale zdecydowanie jest warte inwestycji.
NAJLEPSZE NARZĘDZIA DO PROTOTYPOWANIA
PROTO.IO
MARVELAPP
PROTT
AXURE RP
INWIZJA
PROTO.IO
Dostępne dla systemów Mac OS i Windows.
Kluczowe cechy: Slogan Proto.io brzmi: „ Prototypy, które wydają się prawdziwe” i nie bez powodu. Ich produkt pozwala projektantom tworzyć prototypy o wysokiej wierności , które są jak najbardziej zbliżone do rzeczywistości. Może być używany do tworzyć prototypy aplikacji mobilnych jak i webowych. Ich narzędzie do nagrywania ekranu pozwala Twojemu zespołowi dokładnie zobaczyć, w jaki sposób Twoi odbiorcy wchodzą w interakcję z prototypem, a tryb offline pozwala na interakcję z prototypem bez połączenia z Internetem, a wszystko to bez konieczności pisania nawet jednej linii kodu.
Ceny : Możesz rozpocząć przygodę z Proto.io od 15-dniowego bezpłatnego okresu próbnego, a następnie mieć możliwość uzyskania bezpłatnego konta, chociaż jest to dość ograniczone. Płatne konta wahają się od 24 USD miesięcznie (roczna subskrypcja dla jednego użytkownika, która obejmuje 5 projektów) do 160 USD miesięcznie (roczna subskrypcja, 10 użytkowników i obejmuje 30 aktywnych projektów).
Bonus: Niektóre z ich najnowszych narzędzi zawierają animacje wektorowe, które możesz zaimportować samodzielnie lub wybrać z ich biblioteki animacji wektorowych. Niedawno wprowadzili również bibliotekę komponentów VR, która umożliwia łatwą integrację obrazów 360.
MARVELAPP
Dostępne jako aplikacja internetowa dla systemów Mac OS, iOS, Android i Windows.
Kluczowe cechy: MarvelApp to świetne prototypowe narzędzie dla projektantów z minimalnym doświadczeniem. Jego prosty interfejs może wyglądać dość prosto, ale to część jego uroku. Jest to nie tylko dobry punkt wyjścia dla nowych projektantów, ale także oferuje profesjonalne rezultaty, których poszukują bardziej doświadczeni projektanci. Marvel ułatwia śledzenie zmian, nowych komentarzy i postępów dzięki opcji importowania zespołu ze Slacka lub Asany. Chociaż jest to aplikacja, możesz jej używać do tworzenia prototypów dla aplikacji internetowych lub mobilnych.
Cennik : MarvelApp jest dostępny za darmo dla jednego użytkownika i obejmuje dwa projekty. Ich płatne subskrypcje zaczynają się od 12 USD miesięcznie za jednego użytkownika, nieograniczoną liczbę projektów, prototypy chronione hasłem i opcję pobierania prototypów.
Bonus: MarvelApp działa na wszystkich urządzeniach z systemem iOS, co oznacza, że możesz szybko i łatwo przeglądać swoją pracę na iPhonie, iPadzie, Apple Watch, a nawet Apple TV.
PROTT
Dostępny jako aplikacja na iOS i Androida.
Kluczowe cechy: Praca nad aplikacją mobilną w celu stworzenia prototypu może wydawać się nieco ograniczona, ale Prott udowadnia, że nie musi tak być. W rzeczywistości ta platforma jest pełna funkcji i narzędzi, które można wykorzystać do tworzenia makiet interfejsu użytkownika, prototypów oprogramowania komputerowego, układów stron internetowych, interaktywnych modeli szkieletowych i prototypów. Jeśli pracujesz z dużym zespołem, Prott ułatwia udostępnianie im zmian i otrzymywanie opinii w czasie rzeczywistym.
Ceny : Prott oferuje bezpłatną wersję próbną, która zamienia się w bezpłatną subskrypcję po upływie 30 dni. Ta opcja jest przeznaczona dla jednego użytkownika i jednego projektu. Ich płatne plany zaczynają się od 19 USD miesięcznie za jednego użytkownika, trzy projekty, nieograniczoną liczbę ekranów i nieograniczoną liczbę recenzentów.
Bonus: Platforma Prott pozwala na zostawianie komentarzy w dowolnym miejscu projektu, pomagając znacznie łatwiej i wyraźniej komunikować się z zespołem. Członkowie Twojego zespołu mogą odpowiadać bezpośrednio na Twoje komentarze, upewniając się, że po drodze nic się nie zgubi.
AXURE RP
Dostępne dla komputerów Mac i Windows.
Kluczowe cechy: Axure RP jest uważany za jedno z najbardziej wszechstronnych narzędzi do prototypowania , więc nie jest zaskoczeniem, ilu mają użytkowników. Chociaż jest to bardzo kompletny interfejs, jest to lepsza opcja dla osób z dużym doświadczeniem. Innym powodem, dla którego jest tak dobrze znany w branży, jest to, że istnieje od dłuższego czasu i jest narzędziem, na którym większość projektantów nauczyła się swoich umiejętności na początku XXI wieku. Warto wspomnieć, że będziesz potrzebować trochę wiedzy o kodowaniu, aby uzyskać to, czego potrzebujesz z tego narzędzia.
Ceny : możesz zacząć od 30-dniowego bezpłatnego okresu próbnego. Następnie subskrypcje zaczynają się od poziomu Pro za 29 USD miesięcznie na użytkownika i sięgają nawet 99 USD miesięcznie na użytkownika na poziomie Enterprise. Licencje wieczyste zaczynają się od 49 USD miesięcznie na użytkownika, ale nie są dostępne na poziomie Enterprise.
Bonus: Axure RP oferuje projektantom najwięcej opcji w porównaniu z innymi narzędziami do prototypowania. Chociaż jego interfejs zapewnia największą funkcjonalność, kosztuje go bardziej skomplikowany system. Po opanowaniu Axure RP zapewni Ci wspaniałe rezultaty.
INWIZJA
Dostępne we wszystkich systemach operacyjnych, ponieważ jest oparte na sieci Web.
Kluczowe cechy: InVision to dobrze znane i cenione w branży narzędzie, które pozwala projektantom tworzyć prototypy dla sieci, iOS i Androida. Ta platforma została zaprojektowana z myślą o dużych zespołach, więc współpraca to pestka. Jest dość łatwy w użyciu, wystarczy przesłać pliki projektu i dodać do nich elementy, takie jak animacje, gesty i przejścia. Efektem końcowym jest niezawodny prototyp o wysokiej wierności.
Ceny : InVision oferuje bezpłatny plan, który obejmuje jeden aktywny prototyp, po czym płatne plany zaczynają się od 15 USD miesięcznie za trzy prototypy dla jednego użytkownika. Subskrypcja zespołowa dla pięciu użytkowników, która obejmuje nieograniczoną liczbę prototypów, będzie kosztować 100 USD miesięcznie.
Bonus: InVision niedawno wydało swoje długo oczekiwane Studio, które twierdzi, że jest „najpotężniejszym narzędziem do projektowania ekranów na świecie”. To nowe narzędzie ma uprościć proces między projektowaniem a tworzeniem funkcjonalnych prototypów. Najlepsze jest to, że to nic nie kosztuje!
Twórz makiety swojego produktu
Gdy Twój prototyp jest już gotowy i wrócisz, aby naprawić wszelkie problemy, które napotkałeś podczas procesu testowania, prawdopodobnie zbliżasz się do daty premiery. Ale zanim rozpoczniesz transmisję na żywo, upewnij się, że masz odpowiednie narzędzia do właściwego promowania swojej aplikacji lub witryny . Korzystanie z makiet, które pokazują, jak wygląda Twoja nowa aplikacja lub witryna na prawdziwych urządzeniach, może pomóc przyciągnąć do niej większą uwagę.
Co to jest makieta?
Wcześniej omawialiśmy różnicę między modelem szkieletowym a makietą , ale rodzaj makiety, o której tutaj mówimy, to coś zupełnie innego. Ten rodzaj makiety pojawia się na końcu, gdy Twoja aplikacja lub witryna jest gotowa do uruchomienia. Są to w zasadzie zdjęcia, które można dostosować za pomocą obrazów lub zrzutów ekranu końcowego produktu. Na przykład możesz zrobić zrzut ekranu swojej aplikacji i upuścić go na ekran iPhone'a X.
Makiety są ważne, ponieważ mogą być wykorzystywane do marketingu i promocji Twojej aplikacji lub witryny. Można ich również używać podczas tworzenia zrzutów ekranu aplikacji dla App Store lub Play Store. Makiety Placeit są łatwe w użyciu i mają ogromny zakres. Możesz znaleźć wszelkiego rodzaju makiety, w tym makiety iPhone'a, makiety iPada, makiety MacBooka, makiety przeglądarek i makiety Androida.
Zaprezentuj swoją pracę na makiecie
Prawdopodobnie jesteś podekscytowany, że w końcu kończysz projekt, nad którym tak ciężko pracowałeś przez tak długi czas. Wiemy, że prawdopodobnie nie masz już tony pieniędzy na reklamę, w której w grę wchodzą makiety Placeit. Są łatwe w użyciu, tworzą wspaniałe obrazy Twojego produktu i są bardzo przystępne cenowo! Bez względu na to, co promujesz, aplikację na iPhone'a, aplikację na iPada czy nową stronę internetową, Placeit ma najnowsze makiety gadżetów, które Cię obejmuje!
Jeśli podobał Ci się ten post, wypróbuj listę 10 narzędzi do optymalizacji sklepu z aplikacjami lub zapoznaj się z 7 wskazówkami, jak promować swoją aplikację.