7-те най-добри инструменти за създаване на кадри и прототипи за производителите на приложения

Напоследък имах много дискусии за UI и UX. Никой не се е оплакал от това, така че предполагам, че стигаме до точка, в която всички, занимаващи се с разработването на приложения, осъзнават важността на UI и UX.

Страхотната идея за приложение е толкова лесно разрушена от лошо обмислен интерфейс и опит. И с много инструменти, които сега са на разположение за бързо изграждане на карти и прототипиране, не би трябвало да има причина да не се изпълни брилянтно изживяване.

Въпреки че термините често се използват заедно, има ясно разграничение между каркас и прототип.

Каркасът е скелетно оформление на структурата на вашето приложение. Обикновено се прави без никакъв цвят - просто черно и бяло - и докато една рамка показва къде ще отидат текст, изображения и други елементи на дизайна, тя не включва действителни изображения, текст и т.н. Въпреки това, всеки от елементите на рамката е показани в истински мащаб. Причината за това е, че телените рамки имат за цел да фокусират вниманието ви върху структурата, а не върху действителния дизайн. Подобно на чертежите за къща или сграда: получавате ясна представа за структурата и разположението на всичко, без да се разсейвате от дизайна.

Прототипите попадат между телени рамки и напълно функционално приложение. Най-важната част от прототипа е използването на анимация, която ви позволява да проверите как вашето приложение ще реагира на потребителското взаимодействие и преходите на страницата или екрана. Прототипите могат да включват и действителни изображения, набори от икони и текст, но това се определя от целта на прототипа. Ако тествате само взаимодействия и поток на екрана, можете да създадете прототип, който включва само анимации и може би малко цвят. Ако се опитвате да потвърдите идеята си или да представите потенциални инвеститори, искате прототипът ви да бъде по-полиран, като се използват правилни изображения, текст и т.н.

Въпреки че инструментите, които съм включил в този обзор, улесняват създаването на прототипи, включително повече елементи над анимацията и цвят на пръскане, означават, че ви е необходимо повече време, за да направите промени в прототипа.

1. Balsamiq

Ако се интересувате само от съставяне на каркасна идея за вашето приложение, тогава Balsamiq е инструментът за вас. Предлага се както като десктоп, така и като уеб приложение, Balsamiq съществува от 2008 г.

Предполага се, че телените рамки изискват много малко усилия и време, така че Balsamiq е създаден, за да ви помогне да създадете бързо телените си рамки. Просто добавете основните елементи, от които се нуждаете, след което преоразмерете, позиционирайте и персонализирайте според нуждите. Жичните рамки, които създавате с Balsamiq, ще изглеждат малко груби, но това е умишлено. Творческият екип зад инструмента вярва, че каркас, който прилича повече на скица, насърчава мозъчната атака. Което на първо място е голяма причина за изграждането на каркаси.

Опростеният контрол на версиите ще ви помогне да следите откъде сте започнали и къде сте сега. И това, че това е каркас, не означава, че не можете да получите информация от потенциални потребители / клиенти. Не можете да създадете напълно интерактивен прототип с помощта на Balsamiq, но можете да свържете екраните / страниците, които създавате, за да генерирате прост прототип за кликване. Без анимации или взаимодействия: целта е единствено да демонстрира поток.

И ако Balsamiq изглежда малко прекалено ограничен, винаги можете да добавите някое от създадените от общността разширения, шаблони и пакети с икони.

Balsamiq се предлага като настолно приложение на цена 89 щ.д. / потребител, уеб базирано приложение, започващо от 12 щ.д. / месечно, или свързано приложение с Google Диск, на цена 5 щ.д. / потребител. Но можете първо да започнете с безплатна пробна версия, за да видите дали това е правилният инструмент за вас.

2. WireframePro

Въпреки че лицензът MockFlow включва достъп до осем различни приложения, именно WireframePro ще ви интересува, когато започнете да разработвате собствено приложение. Отново това е уеб базирано приложение с интерфейс за плъзгане и пускане, за да се създаде без усилие каркасна рамка.

Той се предлага с всички стандартни елементи на потребителския интерфейс, заедно с множество други компоненти, от които може да се нуждаете, включително избор за интелигентни часовници на Apple и Android. Приложението ви дава достъп и до Mock Store, който предлага голям избор от шаблони на трети страни, които можете да използвате или за вдъхновение, или като бърза отправна точка за собствената си рамка.

Както при всички инструменти, изброени тук, WireframePro е предназначен за отделни лица и екипи, с вградени инструменти за съвместна работа. Приятно включване е възможността за автоматично генериране на спецификации за всеки елемент, така че ако не правите проекта сами, вашият дизайнер ще има лесен достъп до всички подробности, свързани с дизайна.

И накрая, когато споделяте някой от вашите проекти, вие сте в състояние да присвоите права, ограничавайки някои хора само да могат да преглеждат и коментират проект, докато други също ще могат да го редактират.

WireframePro няма никакви безплатни планове, но можете да го изпробвате за 30 дни, преди да преминете към платен план. Лицензите започват от $ 19 на месец за един потребител и $ 39 на месец за до трима членове на екипа.

3. UXPin

Както подсказва името, екипът зад UXPin подчертава UX. Нищо лошо в това, каркасното проектиране и прототипирането има за цел да ви помогне да усъвършенствате UX на приложението си. С UXPin можете да се грижите както за каркасното проектиране, така и за прототипирането, така че няма нужда да превключвате инструменти.

Както бихте очаквали, UXPin поддържа изходни файлове на Sketch и Photoshop. Но също така има вграден редактор, който поддържа CSS кодови фрагменти, което ви позволява да персонализирате всеки елемент, използван във вашата рамка и прототип. А UXPin улеснява проследяването на всяка итерация на всеки файл, който добавяте или създавате, така че няма да се налага да кликвате през десетки файлове, търсейки оригиналната версия.

Създаването на основни телени рамки и прототипи е бързо и лесно, с всички налични стандартни взаимодействия с прототипи. Естествено, все още можете да създавате персонализирани взаимодействия, ако възникне необходимост. И след като вашият прототип е готов, можете да го изпратите на всеки за тестване, като всички взаимодействия се заснемат на видео, заедно със звука на коментарите на всеки тестер.

UXPin поддържа каркасно проектиране и прототипиране на уебсайтове, мобилни приложения и уеб приложения и се предлага с предварително зададени 14 точки на прекъсване, което ви позволява лесно да преглеждате дизайна си на множество устройства. Ценообразуването започва от $ 19 / mo за основния план и $ 29 / mo за отключване на разширени функции.

4. Прот

Въпреки че Prott е брандиран като инструмент за прототипиране, той също включва функция за каркасно проектиране. Ако идеята за приложението ви е малко повече от грубо начертани скици, можете да ги снимате и да ги импортирате директно в приложението. След това тези скици могат да бъдат анимирани или използвани като основа за вашата рамка. Плъзнете и пуснете предварително зададени форми и елементи на потребителския интерфейс директно върху вашата скица, за да преминете незабавно от нестабилни линии към професионална lo-fi каркасна рамка.

Prott включва голям брой UI комплекти за различни устройства, от iOS до Android и уеб. Но можете също да създадете своя собствена библиотека от елементи на интерфейса.

Вместо просто да споделяте своя прототип с други хора, вече можете дори да включите подробна карта, която ясно показва структурата на вашето приложение. И всеки, с когото споделяте вашия прототип, може да коментира директно на всеки екран, така че е по-лесно да разберете за какво се отнасят техните коментари.

Prott предлага пълнофункционален 30-дневен пробен период, с безплатен план без ограничения, освен броя на проектите, които можете да създадете. Ако трябва да създадете повече проекти, можете да преминете към план за начинаещи или професионалисти на цена от $ 19 / mo.

5. InVision

InVision е изключително за прототипиране, но с поддръжка за различни приложения. С InVision можете бързо да създавате интерактивни прототипи на вашия уебсайт, уеб приложение или мобилно приложение и след това да преглеждате прототипа на действителни устройства. И това включва таблети и носими устройства, а не само мобилни телефони.

Процесът е толкова прост, колкото:

  • Добавете дизайнерските си активи (InVision поддържа GIF, PNG, JPEG, PSD и Sketch изходни файлове) чрез плъзгане и пускане или чрез синхронизиране с Dropbox.
  • Начертайте горещи точки върху всеки актив и ги настройте да се свързват с други активи, външни URL адреси или котви.
  • Добавете интерактивност под формата на жестове (докосване или плъзгане), фиксирани области (лента с меню и т.н.) и преходи.

След като приключите, можете да прегледате проекта на телефона, таблета или компютъра си, или дори SMS или да изпратите по имейл връзка към приятели и колеги. Това ви улеснява да включвате други хора в процеса на проектиране, като всеки, на когото изпратите връзка, може да коментира всеки дизайн.

Ценообразуването за InVision започва безплатно за един прототип, $ 25 / mo за неограничени прототипи и $ 99 / mo за екипи с до 5 членове.

6. Чудо

Подобно на InVision, приложението Marvel е за прототипиране. Той включва стандартна поддръжка за файлове на Sketch и Photoshop или можете да използвате вградения им инструмент за проектиране на Canvas. Marvel има и приложение за iOS и Android, което ви позволява да снимате свои собствени драскулки и дизайни и да ги качвате директно във вашата библиотека на Marvel.

Лесно е да създадете горещи точки по вашите проекти, с десетки взаимодействия и преходи на екрана, за да оживите вашия прототип. И можете да тествате своя прототип на множество екрани, включително Apple Watch.

Разбира се, нито един инструмент за прототипиране не си струва да се обсъжда, ако не включва сътрудничество. И с Marvel можете да коментирате своя прототип, за да подчертаете конкретни области, които искате хората да коментират. Коментари може да прави всеки, на когото изпращате вашия прототип, без да е необходимо първо да създава акаунт в Marvel.

Ценообразуването на Marvel започва от $ 0 / месец за един потребител и до два проекта, но с ограничени функции. Срещу $ 14 / месец получавате неограничени проекти и всички функции, с отделно ценообразуване за екипи и корпоративни клиенти.

7. Proto.io

Proto.io е популярен инструмент за прототипиране, който получи мащабна актуализация през 2016 г. Proto.io включва всички функции, необходими за инструмент за прототипиране, но актуализацията донесе и множество опростени функции.

Заедно с преработения потребителски интерфейс, който прави всички основни функции по-достъпни, Proto.io също е поставил много акцент върху анимацията. Движението е важна характеристика на мобилните приложения, а функцията за държавни преходи на Proto.io улеснява всеки да създава и персонализира анимации в своя прототип.

Proto.io също така въведе библиотека с модели за взаимодействие, което прави добавянето на взаимодействия без усилие. Тези модели включват взаимодействия като плъзгащи се менюта и изтегляне за опресняване. Всичко, което трябва да направите, е да добавите взаимодействие към вашия проект и да го персонализирате.

Новата версия на Proto.io разширява възможностите ви да накарате потребителите да тестват и коментират вашия прототип. Той се интегрира с платформи за тестване на потребители като Validately и UserTesting, като ви дава достъп до по-голям набор от реални потребители. А с интеграцията на Lookback получавате неограничени записи - само за iOS засега - показващи ви как потребителите взаимодействат и навигират през вашето приложение.

Proto.io предлага пълнофункционален 15-дневен пробен период, след който можете да преминете към много ограничен безплатен акаунт. Платените планове започват от $ 29 на месец, в зависимост от размера на вашия екип.

Заключение

Когато тепърва започвате да разработвате приложения, може да искате да създадете както каркаси, така и прототипи на вашата идея за приложение. Но когато се чувствате по-добре с процеса на разработка, можете да помислите просто да правите едното или другото.

Тъй като телените рамки са толкова основни в дизайна, те ви принуждават да се съсредоточите върху правилния поток и потребителски опит. Прототипите могат да ви помогнат да усъвършенствате както потока, така и UX, да подчертаете всички дизайнерски недостатъци и по-важното да изглеждате по-добре от каркасите, ако трябва да представите на клиенти или инвеститори. И макар че може да е изкушаващо да се задоволите с инструмент, който съчетава както каркасни, така и прототипиране, решаващият фактор винаги трябва да бъде кой инструмент включва всички функции, от които всъщност се нуждаете, и е най-удобен за използване. И тъй като всеки от инструментите, изброени тук, предлага безплатен план или пробна версия, защо не прекарате един ден, за да ги тествате, преди да вземете решение?