12 най-добри инструмента за прототипиране

Страница 1 от 2: Страница 1

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

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

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



Ако търсите конкретно инструментите за каркасно кадриране, разгледайте нашия списък с най-добрите каркасни инструменти на разположение.

Основна илюстрация: Нютон Рибейро

01. Proto.io

Цена: От $ 24 / месец (безплатен пробен период)

Професионалисти:

  • Запис на потребителски тестове
  • Споделени прототипи
  • Налично мобилно приложение
  • Поддържа VR прототипиране
  • Налични добавки

Минуси:

  • Не е чудесно за офлайн употреба

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

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

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

Proto.io е уеб-базиран инструмент и се предлага с куп добавки и функции, които включват импортиране на Sketch и Photoshop файлове, VR прототипиране, UI библиотеки и дори запис на екрана за потребителско тестване. Това наистина може да помогне, ако преминавате към и от други приложения.

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

02. Adobe XD CC 2018

Цена : $ 9,99 / месечно | £ 9.98 / месечно
Опитайте безплатен пробен период : НАС | Великобритания

Професионалисти:

  • Добавете взаимодействия само с няколко кликвания
  • Почистете потребителския интерфейс
  • Стартирайте и експортирайте прототипи за лесно тестване
  • Създавайте прототипи с много малко ограничения

Минуси:

  • Опциите за анимация са ограничаващи

Adobe XD предлага най-добрата среда за цифрови проекти в рамките на Adobe Творчески облак колекция от инструменти за дизайн. Въпреки че, ако сте запален потребител на Adobe и сте нов в XD, може да не намерите интерфейса много познат за начало, но той се натрупва спрямо другите водещи инструменти там. Това е скок, ако сте проектирали в Photoshop от известно време. Заслужава си обаче, ако сте голям фен на Adobe.

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

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

Днешните най-добри Adobe Creative Cloud се занимават с AdobeПрепоръчан търговец Creative Cloud Всички приложения £ 49,94 / mth Изглед в Adobe Creative Cloud Photography £ 9,98 / mth Изглед в Adobe Creative Cloud Single App 19,97 паунда / mth Изглед в Adobe

03. Axure

Цена: От $ 29 / месец

Професионалисти:

  • Страхотно за сложни сайтове и идеи
  • Отлично се справя с динамични данни
  • Условна логика
  • Възможност за експортиране като HTML файлове
  • Много функционален

Минуси:

  • Не е идеален за прототипиране на дизайни с висока точност

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

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

Основното предимство на Axure е, че той се справя наистина добре с динамичното съдържание, като ви позволява да го променяте и променяте според определени пътувания на потребителя или взаимодействия. Това се постига чрез комбинация от условна логика и манипулиране на страници, блокове със съдържание или текст чрез задаване на променливи и параметри.

Но потенциалът на това, което можете да направите с Axure, не спира дотук. Това е чудесна възможност за визуализиране на диаграми и диаграми, което е нещо, което ви помага да формулирате някои от по-техническите пътувания, които може да срещнете.

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

04. Студио Оригами

Цена: Безплатно

Оригами първоначално е разработен от Facebook, за да помогне на екипа да изгражда и проектира продукти. Сега тя е достъпна безплатно: можете да се регистрирате като разработчик на Apple, след което да изтеглите и инсталирате Xcode с Quartz Composer, за да стартирате Origami на Mac.

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

Скица и Photoshop дизайни могат да бъдат импортирани в Оригами и слоевете на вашия проект ще бъдат запазени, готови да бъдат свързани, анимирани и трансформирани при необходимост. Оригами също не е ориентиран към мобилния дизайн: можете да проектирате отзивчиви уебсайтове и да симулирате функции като въвеждане на текст, FaceTime камера и OS X плъзгане и пускане.

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

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

05. Уеб поток

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

Наскоро Webflow представи нова функция, променяща играта: CMS за вашите прототипи. CMS на Webflow е напълно визуален, което ви позволява да създавате мощни, динамични сайтове, без да пишете нито един ред код. Друга особено полезна функция е способността му да създава блог, използвайки концепцията за прототип на вашата страница в блога.

Ако сте дизайнер на свободна практика и сте имали затруднения да намерите разработчик, който да насочи вашите проекти към производствени сайтове, Webflow може да е за вас. Можете дори да настроите потребителски акаунти или да посочите администратор, който да управлява съдържанието и вашите клиенти ще могат визуално да правят промени.

Като алтернатива е лесно да експортирате прототипа в код. Чистият, семантичен код на Webflow може да спести часове на почистване на вашите инженери.

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

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

Webflow е отзивчив по природа, така че оформлението на уебсайта ви ще бъде оптимизирано за всички устройства: настолни, мобилни и таблети. Ако това не беше достатъчно, можете да проектирате анимации, които да работят на мобилни устройства и всички съвременни браузъри. И това все още не свършва дотук: Webflow има вградена разширяемост, което улеснява свързването на вашите прототипи на живо към Slack, MailChimp, Google Drive и повече от 400 други услуги.

06. Скица

Цена: $ 99 / година (безплатен пробен период)

Професионалисти:

  • Непрекъснат потребителски интерфейс
  • Много гъвкави по отношение на функционалността
  • Лесно за изграждане на прототипи
  • Изградете символи и активи за многократна употреба
  • Налични добавки
  • Споделете лесно вашия прототип

Минуси:

  • Опциите за анимация са ограничаващи

Sketch е приложение, което е много обичано от дизайнерската общност. Той е лесен за използване и ви дава всичко необходимо за създаването на красиви интерфейси. Доскоро Sketch разчиташе на разширения на трети страни, за да прототипира с InVision, но сега предоставя собствена среда.

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

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

Що се отнася до прототипирането, можете да рисувате взаимоотношения между обекти на вашето платно и страници. Тези взаимоотношения ще ви осигурят връзки между вашите страници, които можете да започнете да свързвате и ще ви позволят да симулирате пътуванията на вашите потребители, докато те навигират през вашия сайт. В рамките на Sketch можете също да споделите вашите прототипи с уникална връзка и да правите всякакви актуализации на проекта, както и когато е необходимо.

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

07. Фреймър

Цена: $ 15 / mo (безплатен пробен период)

Framer е един от най-популярните инструменти за прототипиране. Тя се основава на предпоставката, че с кода е възможно да се прототипира всичко, което води до нови и новаторски дизайни.

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

Въпреки това, за тези, които искат да се справят с предизвикателството, документацията за кодиращия език на Framer е много добре структурирана, с много примери, които демонстрират как работи езикът. Има видеоклипове с инструкции, както и курсове по Udemy и O'Reilly.

Този подход е особено полезен за дизайнери, които са нови в кодирането. Той предлага изглед от първа ръка колко гъвкав и мощен може да бъде кодът. В допълнение, приложението Mac на Framer е добре проектирано и предоставя визуализации на живо, докато пишете код, което е окуражаващо за тези, които пишат код за първи път.

Това не означава, че не е добре за дизайнери с опит в кодирането, които предпочитат да пишат HTML / CSS, за да прототипират своите дизайни. Framer може да е само инструментът, който търсите: няма да бъдете ограничени от инструментите за плъзгане и пускане на други приложения. Освен това, тъй като Framer използва код за създаване на прототипи, можете да включите данни в реално време във вашия прототип от източници като Twitter и Parse.

Подобно на други инструменти, Framer поддържа проекти на Sketch и Photoshop и също така ще запази слоевете на вашия дизайн. Друго предимство е, че - за разлика от повечето други инструменти - можете също да импортирате файлове с After Effects. Когато сте готови да споделите своя прототип, Framer може да генерира URL адрес, който може да бъде споделен с вашите клиенти. Тези URL адреси за споделяне могат да бъдат отворени на мобилни устройства за визуализации на живо. Framer ви позволява и прототип на VR.

08. Vectr

Можете да проектирате своите прототипи на Vectr

Можете да проектирате своите прототипи в уеб или настолни приложения на Vectr

Цена: Безплатно

Можете да проектирате своите прототипи в уеб или настолни приложения на Vectr за Mac и Windows, което е впечатляващо, като се има предвид, че приложението е безплатно. Прототипите остават синхронизирани, независимо дали работите на работния плот или уеб браузъра, освобождавайки ви да работите, когато сте готови и гарантирайки, че винаги имате достъп до най-новите промени.

Прототипите на Vectr могат да се споделят с URL и да се интегрират в приложения като Slack за мощно сътрудничество. Като допълнителен бонус тези, с които споделяте вашите макети, могат да ги коментират и редактират.

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

Прочетете за още 5 страхотни инструмента за прототипиране ...

  • 1
  • две

Текуща страница: Страница 1

Следваща страница Страница 2