В скорошна инфографика на ApeeScape: „ Най-добрите UX инструменти , ”Разгледахме широкия набор от инструменти за дигитален дизайн на пазара, повечето от които могат да подпомогнат ежедневните задачи на отделния човек UX дизайнер .

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

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

Ето кратък преглед на конкурентите:

• Скица от Bohemian Coding със седалище в Хага, Нидерландия. Sketch е приложение само за Mac.
• Фигма от Figma, базирана в Сан Франциско, Калифорния. Figma работи на всяка операционна система чрез браузър.
• Axure от Axure Software Solutions със седалище в Сан Диего, Калифорния. Axure има версия за Windows и Mac.

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

1. Правене на идея за концепция
2. Създаване на резултати с ниска точност
3. Създаване на висококачествени резултати
4. Създаване на интерактивни прототипи
5. Създаване на система за дизайн
6. Доставяне за развитие

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

Задача: Правене на идея за концепция

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

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

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

Победител: Фигма

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

Файлове, споделени в Фигма може да се присъедини в реално време и се показва етикетираният курсор на всеки участник. Кликването върху представителни аватари в лентата с инструменти превключва изгледите към перспективата на този човек, което улеснява бързото споделяне на идея. Освен това Figma не изисква недизайнери да притежават копие; те отварят връзката към файла и започват да работят.

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

Задача: Създаване на резултати с ниска точност

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

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

Създаването на каркаси за вярност може да се извърши с инструменти, които са специално посветени на задачата, включително Макети на Balsamiq , Moqups , и FluidUI . Въпреки това, Sketch, Axure и Figma могат да изпълняват една и съща задача, особено когато потребителите създават библиотеки с компоненти на каркасни компоненти.

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

За телените рамки лекотата на използване, скоростта на доставка и модификацията са от съществено значение, защото позволяват на дизайнерите да произвеждат ефективно варианти на проекти.

Победител: Axure

Axure печели тук, защото има предварително опаковани компоненти за каркасно проектиране веднага след инсталирането на софтуера. Sketch и Figma имат инструменти които ви позволяват да създавате телени рамки, но трябва или да нарисувате компонент на каркасна мрежа, или да изтеглите файл, който ги съдържа. И в двата случая те трябва да бъдат интегрирани в a символ (Скица) или съставна част (Figma) библиотека за плъзгане и пускане като компонентите на Axure.

Axure има много трети страни библиотеки за създаване на продукти с ниска точност, а Sketch разполага с множество безплатни и платени файлове които могат да бъдат изтеглени, докато Figma’s публични ресурси все още са млади.

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

Задача: Създаване на висококачествени продукти

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

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

Това включва контрол върху запълването на обекти и щрихи, добавяне на ефекти като сенки и градиентни запълвания и експортиране на изкуство в лесно смилаем формат (png, pdf, jpg).

Победител: Фигма

Скица и Figma имат почти идентични набори от инструменти, които могат да създават макети с висока точност, но Фигма Моделът на взаимодействие е по-усъвършенстван и инструментът е по-лесен за използване от самото начало. И двата инструмента имат лесен достъп до усъвършенствани команди за редактиране и булеви команди като Join, Intersect, Union и Subtract. Въпреки че поддръжката на приставката на Sketch позволява на трети страни да създават допълнителни функции, тези инструменти не са налични веднага след инсталирането.

И трите инструмента имат функции, които позволяват създаване на персонализирани обекти, но Axure затруднява до известна степен достъпа до командите. Посочените по-горе редакции не са налични в лентата с инструменти. Достъпът се получава само чрез контекстното меню, когато са избрани множество обекти.

Освен това, Figma’s векторни мрежи направете работата с инструментите на линията лесна.

Задача: Създаване на интерактивни прототипи

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

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

Моделът за прототипиране на Figma е добре интегриран и лесен за използване и тъй като това е приложение, базирано в облак в реално време, няма нужда да опреснявате HTML страници, когато даден файл се актуализира.

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

Победител: Фигма

И Sketch, и Figma поддържат просто прототипиране с връзки „обект към артборд“ и ограничен набор от преходи. Приставки помагат за укрепване на възможностите за просто прототипиране на Sketch, но Axure е най-мощният, когато става въпрос за осигуряване на стабилен модел на взаимодействие за прототипи.

Задача: Създаване на система за проектиране

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

Победител: Фигма

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

Изграждането на система за проектиране с помощта на някой от тези инструменти все още е ръчен процес. Има обаче приставки за Sketch (като наскоро пуснатите от Google Приставка за материален дизайн ) и поне един инструмент на трета страна в произведенията за Фигма.

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

Задача: Осигуряване на развитие

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

Има десетки методи за предаване и още повече инструменти на трети страни, които улесняват пренареждането и заявките за информация за обекти от файловете на Sketch и Figma (вж. Avocode и Цеплин ). В това сравнение обаче разглеждаме оригиналния инструмент за дизайн, преди той да бъде допълнен с плъгини или други приложения.

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

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

Sketch ви позволява да избирате обекти и да използвате контекстно меню за „Копиране на CSS атрибути“, но не е идеално. Figma се справя коректно, като предоставя раздел „Код“ в панела със свойства, който създава CSS, iOS или Android стойности за избрани обекти (разработчиците могат да използват тази функция само в режим на преглед или прототип).

Победител: Axure

Понастоящем само Axure има мощни „генератори“, които произвеждат напълно публикувани HTML файлове, спецификации на Word и дори отчети, форматирани в CSV, за импортиране в електронна таблица. Въпреки че резултатите не са библиотека за проектиране, приложението предоставя полезни материали за предаване на разработчици.

Победителят в цялостния инструмент за проектиране: Figma

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

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

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

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

• • •

Допълнително четене в блога за дизайн на ApeeScape:

• Изхвърлете MVP, приемете минимални жизнеспособни прототипи (MVPr)
• Силата на Figma като инструмент за проектиране
• Как да създадете ръководство за стил на скица, библиотека и комплект за потребителски интерфейс
• Разбиране на дизайнерските системи и модели
• Смърт за Wireframe. Направо до висока вярност!

Разбиране на основите

За какво се използва Axure?

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

Axure най-добрият инструмент за прототипиране ли е?

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

Защо е важна идеята?

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

Какво е дизайн с висока точност?

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

Какво е прототип с ниска точност?

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