Программы для прототипирования – это связующее звено между творческой идеей и конечным продуктом. Совсем недавно в области UX/UI дизайна царил Photoshop, однако, проведенный опрос показал, что этот самый известный графический редактор стал терять популярность среди разработчиков.
Программы для прототипирования – это связующее звено между творческой идеей и конечным продуктом. Совсем недавно в области UX/UI дизайна царил Photoshop, однако, проведенный опрос показал, что этот самый известный графический редактор стал терять популярность среди разработчиков. В опросе приняли участие более четырех тысяч респондентов из почти двухсот стран, и по его результатам можно сделать однозначный вывод: разработчики всегда открыты для новых инструментов, призванных облегчить процесс концептуализации, прототипирования и проектирования цифровых продуктов.
Обзор Sketchbook✍🏻 Интерфейс. Любимые кисти. Функции
Инструменты для UX/UI проектирования
В последнее время на рынке появилось множество новых инструментов для прототипирования, среди них популярная программа Axure и новинка Mockplus. В данном обзоре приводится краткое описание восьми программ, на которые, по мнению редакции, стоит обратить внимание в этом году. Некоторые программные продукты могут использоваться только для создания простых прототипов, тогда как другие позволяют построить полноценный рабочий макет.
1. Axure RP
Axure RP Pro – это программное обеспечение для создания прототипов, макетов, спецификаций веб-сайтов и приложений. Программа позволяет вставлять виджеты простым перетаскиванием мышью, а также изменять их размер и формат. Axure RP Pro является полноценным UX-инструментом, позволяющим разработчикам проектировать сложные интерактивные прототипы, но для ее освоения потребуется время. Если вы профессиональный разработчик, с помощью Axure RP Pro вы сможете создавать более сложные интерактивные прототипы.
2. Mockplus
Mockplus – это простой инструмент для создания прототипов, созданный быстрорастущей инновационной компанией Jongde Software LLC. Программа рассчитана на автономное использование и поддерживает работу по прототипированию программного обеспечения для всех основных платформ: ПК, мобильные приложения и веб-приложения.
Это хороший выбор для пользователей любого уровня подготовки, так как программа отличается простотой в освоении и интуитивно понятным интерфейсом. Если вашей целью является быстрое создание интерактивных прототипов в сжатые сроки, и вы хотите полностью сфокусироваться на работе, вместо того, чтобы тратить время на изучение инструментов проектирования, не проходите мимо Mockplus. Программа имеет необходимый набор UI-виджетов и иконок – все, что нужно для работы с вашими виджетами. Существует возможность предварительного просмотра прототипа путем экспорта HTML/изображения, либо его тестированием на существующем устройстве с помощью QR-кода.
Как делают хороший UI в играх (а как плохой) — дизайн интерфейса в RPG, MMO, экшнах и платформерах
3. Balsamiq Mockups
Balsamiq Mockups – это экспресс-инструмент для прототипирования, который поможет вам работать быстрее и эффективнее. В программе реализован метод работы, максимально приближенный к рисованию на простой доске. Программа отличается простым интерфейсом и имеет большой набор UI-элементов. Стандартные виджеты упорядочиваются на экране простым перетаскиванием мышью. Существует две версии программы: для автономного использования и в виде расширения для Google Drive, Confluence и JIRA.
4. Justinmind
Justinmind представляет собой UX-инструмент для создания прототипов мобильных и веб-приложений, а также высококачественных макетов сайтов. Программа снабжена стандартными функциями: перетаскивание объектов мышью, изменение их размера и формата, а также экспорт и импорт виджетов. В дополнение имеется возможность добавлять к виджетам примечания и снабжать их интерактивными функциями, такими как ссылки, в том числе условные, анимация, вычисления, набор вкладок, скрываемые элементы, а также моделирование баз данных с реальными данными. Justinmind подойдет для тех, кто ищет возможность создавать сложные прототипы. Если вы не профессиональный разработчик, вам будет сложно освоить этот инструмент – вот такой недостаток.
5. InVision
Приложение InVision идеально подходит для совместной работы над разработкой предварительного проекта и получения информации от коллег и клиентов. С помощью InVision вы сможете быстро преобразовать статические мобильные и веб-проекты в интерактивные прототипы. Программа позволяет создавать модели в режиме реального времени.
6. UX Pin
UX Pin – это онлайн-инструмент для прототипирования, который позволяет построить требуемую модель интерфейса простым перетаскиванием мышью, без необходимости обращаться к программированию. Данная программа представляет собой экранный редактор, позволяющий выбирать необходимые элементы и составлять из них требуемые сочетания. С помощью UX Pin можно создавать реалистичные модели и импортировать слои из таких программ, как Sketch и Photoshop.
7. OmniGraffle
OmniGraffle – это приложение, разработанное компанией The Omni Group, для создания диаграмм и цифровых изображений, которое работает с Mac, iPhone, iPad и iPod touch. Программа может использоваться как автономно, так и как веб-приложение; в ее состав входит несколько инструментов для разработчиков. OmniGraffle позволяет перетаскивать объекты мышью, а также снабжена функцией вставки примечаний и создания спецификаций прототипов и моделей. Данное приложение является идеальным инструментом для работы на iPhone и iPad.
8. Flinto
C помощью Flinto разработчик может быстро создавать интерактивные прототипы и макеты для мобильных, автономных и веб-приложений. Программа снабжена всем необходимыми инструментами для создания анимации переходов, а также системой управления экраном для работы с большим количеством экранов приложений. Если вам необходим прототип для приложения под управлением iOS, Flinto – ваш выбор.
Заключение
Существует большое количество инструментов для прототипирования, и однозначно лучшего среди них нет, потому что все зависит от личных предпочтений и стиля работы. Если вам необходим простой недорогой инструмент, рекомендуем Mockplus, так как он не такой сложный, как Axure и Justinmind, а по функционалу превосходит Balsamiq. В случае, если вы можете позволить себе оплатить дорогостоящую лицензию и заинтересованы в создании сложных прототипов, есть смысл подумать об Axure.
Источник: spark.ru
Разработка интерфейса приложения на бумаге
Хочу поделиться некоторым опытом в создании интерфейсов приложений. Сейчас я занимаюсь созданием игрового редактора и часто возникает задача придумать интерфейс, для какой-то подсистемы. Конечно есть соблазн сесть и сразу начать создавать интерфейс программы, и уже по ходу его модифицировать, но считаю этот способ не правильным, по моему опыту, он приводит к большему числу итераций разработки.
При создании интерфейса часто возникает ряд одинаковых проблем, помочь решить которые помогают несколько вопросов. Эти вопросы нужно задать себе и прояснить с конечными пользователями:
1. Кто будет работать с модулем? — нужно найти людей, которые непосредственно будут использовать инструмент и с ними решать дальнейшие вопросы
2. Какие именно действия будет совершать пользователь? нужно понять, что должен делать модуль приложения. От этого сильно зависит интерфейс пользователя.
3. Будет ли пользователю удобно работать, при определенной раскладке окон и элементов интерфейса? — Очень важный вопрос, которому очень часто вообще не уделяют внимания.
Рисуйте прототипы
Чтобы ответить на эти вопросы пытаются сделать прототипы интерфейса. Проблемы тут заключается в том, что очень часто сделать сам интерфейс можно значительно быстрее, чем его прототип. Поэтому от практики создания прототипов интерфейса приложения обычно отказываются.
А зря, ведь есть способ прототипирования, который очень прост в реализации и очень эффективен при решение всех вопросов. Это разработка интерфейса на бумаге.
Нарисуйте окна вашего интерфейса и схематично очертите все важные его компоненты. Это поможет представить, как с этим инструментом можно будет потом работать. Попробуйте на этом нарисованном интерфейсе по шагам пройти весь путь пользователя. Попытайтесь сделать ту задачу, которую потом будет делать программа.
Если у вас этого не получится на бумаге, значит вы не понимаете, что вы хотите сделать. Если не прояснив всех важный функциональных деталей вы начнете реализовывать свой интерфейс, то после первого тестирования вам скажут, что он не удобен или вообще не пригоден для использования.
Конечно, можно добиваться удобства интерфейса итерациями разработки (что обычно и происходит), но если вы ошибетесь в базовых вещах (какие нужны окна, что они будут показывать, как пользователь будет работать в программе) то потеряете много времени и сил в дальнейшей работе. При следующей итерации вам придется или все переделать или пытаться мелочами улучшить удобство, добавляя все новый функционал и загромождая тем самым интерфейс. В любом случае вы придете к ситуации, когда добавление чего-то нового будет слишком сложным и непонятным и вам придется таки переделать базовый дизайн приложения.
Сэкономьте ваше время, нервы пользователя и деньги работодателя. Поговорите с пользователями будущего инструментария еще до того, как будет написана хотя бы строчка кода. Покажите им вашу схему и внешний вид будущих окон и они обязательно вам расскажут, что вы забыли, на что следует обратить особое внимание, а чем можно пренебречь. Поработайте в вашем интерфейсе на бумаге, и только когда будете представлять себе как это все будет работать и узнаете, что это будет удобно пользователю, смело приступайте к реализации.
Кстати, подобные схемы значительно облегчают процесс программирования интерфейса. Можно не бояться забыть что-то важное. Самое важное, вы уже нашли и обдумали.
(В этой статье я привел фотографии моих реальных схем, различных модулей приложения)
- c++
- разработка интерфейса
- интерфейс
- FiloXSee,
- 01 февраля 2012, 12:06
- рейтинг: +9
- это интересно | не интересно
Источник: itw66.ru
7 бесплатных инструментов Wireframe для проектирования интерфейсов и процессов
У разработчиков есть такое понятие, как Wireframe – детализированное представление дизайна, в котором с помощью блоков и связей представлены все важные элементы конечного продукта. Его применение позволяет хорошо описывать задачи проекта и задействованных в нем специалистов. Группы разработчиков, которые используют Wireframe при проектировании, стали его применять и для неформального внутреннего общения, когда проще быстро нарисовать схему задачи, чем объяснять ее словами. Поэтому создание Wireframe применимо не только для разработки интерфейсов или приложений, но и в других сферах проектирования процессов – например, при внедрении ITSM.
Для описания внедряемых ИТ-процессов и их взаимодействия с другими направлениями деятельности компании наравне с текстовой документацией удобно и наглядно можно применять Wireframe. В этой статье мы расскажем о 7 бесплатных инструментах для визуализации проектируемых процессов. Создавая с их помощью каркас будущей работы, вы сможете сэкономить много времени и усилий на стадии реализации проекта.
7 бесплатных инструментов для проектирования Wireframe
На самом деле таких приложений больше, но мы выбрали те, у которых меньше всего компромиссов. Это не временно бесплатные версии, а те, которые будут работать всегда и не потребуют через какое-то время оплаты. Конечно, их бесплатность и открытость накладывает некоторые ограничения по сравнению с аналогичным, но платным вариантом, поэтому мы специально остановимся на таких нюансах.
Lucidchart
Lucidchart – полнофункциональный и бесплатный инструмент для создания Wireframe интерфейса и другого проектирования. Позволяет нескольким пользователем одновременно работать над одной схемой и имеет расширение для Chrome, что делает возможным быстрое добавление диаграмм Lucidchart в документы и таблицы Google, если вы используете их для совместной работы.
Пользователи отмечают, что система облачная и интегрируется с множеством других широко используемых продуктов, а также предлагает ряд шаблонов, которые позволят быстро начать работу над вашими проектами. Тем не менее к ее минусам можно отнести недостаточную интуитивность и сложность в настройке рабочего пространства. Также Lucidchart периодически начинает тормозить и медленно работать.
Ограничения бесплатной версии:
- один пользователь;
- проекты ограничены 60 объектами.
Стоимость обновления до платной версии: минимальный тарифный план Lucidchart стартует с 5 долларов США в месяц для одного пользователя, а командные тарифы начинаются с 20 долларов США в месяц.
InVision
Вы можете использовать облачное решение InVision для проектирования процессов, мобильных приложений, сайтов и для создания документации по архитектуре проекта и визуализации связей. Приложение имеет инструменты совместной работы, вы можете получать комментарии и отзывы от коллег по команде, а наличие интерактивных функций позволяет реалистично представить конечный продукт.
Пользователям данного решения нравится удобный и интуитивно понятный интерфейс. Также они отмечают возможность создания профессионально выглядящих прототипов с высокой детализацией, которые отлично подходят для демонстрации итогового результата другим заинтересованным сторонам. Однако возможности визуализации еще стоит доработать, а прототипы, получаемые в других системах, выглядят иначе, чем в InVision.
Ограничения бесплатной версии:
- один проект;
- один пользователь.
Стоимость обновления до платной версии: самый дешевый тариф InVision стоит 15 долларов США в месяц и позволяет работать над тремя проектами.
Moqups
Moqups – еще один облачный инструмент для дизайна процессов, который содержит большую библиотеку блоков и иконок. Он предоставляет возможность не только создания диаграммы из базовых элементов, но и импорта ваших собственных изображений в соответствии с внешним видом проекта. Редактор drag-n-drop позволяет команде интуитивно разрабатывать блок-схемы и прототипы будущих проектов.
Пользователям Moqups нравится легкость и понятность интерфейса приложения, возможность создания диаграмм простым перетаскиванием готовых элементов, а также легкость обмена проектом с коллегами по команде и клиентами. Тем не менее они хотят, чтобы набор элементов был еще больше, а также появилась бы возможность работы с системой офлайн. Это приложение отлично подходит для проектирования процессов, наравне с дизайном интерфейсов.
Ограничения бесплатной версии:
- один проект;
- проект ограничен 300 объектами;
- хранилище на 5 МБ.
Стоимость обновления до платной версии: самый дешевый тариф Moqups стоит 13 долларов США в месяц для одного пользователя и неограниченного числа проектов.
Wireframe.cc
Wireframe.cc – отличный вариант для пользователей, которым нужен простой, незагроможденный пользовательский интерфейс. Вместо панелей инструментов Wireframe.cc предлагает всплывающие окна, которые появляются, когда они вам нужны, и остаются скрытыми, когда вы работаете в другой области приложения. Вы можете делиться прототипами со всей командой для совместного редактирования, и любой другой человек может оставлять комментарии к вашему проекту, если вы поделитесь с ним ссылкой. Правда, эта функция требует платной разблокировки.
Пользователи отмечают, что такой минималистичный интерфейс отлично подходит для создания макетов с невысокой точностью и детализацией. Для большего необходимо переходить на платную версию или выбирать другой инструмент. Также пользователи жалуются, что в Интернете недостаточно обучающих видео о том, как начать работу с системой.
Ограничения бесплатной версии:
- нет учетных записей пользователей;
- все макеты являются общедоступными;
- прототипы ограничены одной страницей.
Стоимость обновления до платной версии: стоимость премиальных версий Wireframe.cc начинается с 16 долларов США в месяц для одного пользователя и неограниченного числа проектов.
MockFlow
MockFlow предлагает обширную библиотеку шаблонов, которые помогут вам создать схемы процессов, диаграммы, макеты интерфейса сайта и приложения и визуализировать другие проекты. Вы также можете выбрать и использовать сторонние шаблоны, макеты и элементы. Встроенная коллекция изображений и элементов включает в себя формы, блоки навигации, фигуры и значки, поэтому вы можете создавать самые разнообразные макеты и прототипы.
По обзорам пользователей бесплатная версия MockFlow предлагает множество функций и проста в использовании. Однако в системе есть несколько ошибок, которые еще не исправлены.
Ограничения бесплатной версии:
- один проект;
- до двух пользователей;
- ограниченный доступ к библиотеке и интеграции со сторонними решениями.
Стоимость обновления до платной версии: платные тарифы MockFlow начинаются с 14 долларов США в месяц для одного пользователя и неограниченного числа проектов.
Fluid UI
Облачное решение Fluid UI предлагает разработчикам библиотеку более чем из 2000 элементов. Вы можете создавать интерактивные прототипы и анимации страниц, чтобы лучше понять, как будет выглядеть ваш конечный продукт. Также можно воспользоваться приложениями для Android и iOS Fluid UI, чтобы посмотреть, как ваш прототип будет выглядеть на мобильном интерфейсе.
Ограничения бесплатной версии:
- один проект;
- десять страниц;
- нет возможности загрузки своей графики;
- ограничения в использовании библиотеки;
- отсутствие возможности для членов команды оставлять комментарии или отзывы.
Стоимость обновления до платной версии: обновление до самого дешевого тарифного плана Fluid составляет всего 8,95 долларов США в месяц и открывает доступ к более продвинутому функционалу – например, к анимированным переходам. Чтобы иметь возможность совместной работы с коллегами по команде, вам нужно перейти на план «Pro» Fluid UI, который стоит около 19 долларов США в месяц.
Pencil – единственный в своем роде инструмент для создания Wireframe офлайн, и он обладает открытым исходным кодом, что делает все функции доступными пользователям бесплатно. Последнее обновление Pencil было опубликовано в июне 2017 года.
Система позволяет создавать многостраничные макеты со ссылками между страницами. Преимущество для веб-разработчиков – при экспорте макетов на веб-страницу HTML, Pencil сохраняет ссылки, поэтому вы можете использовать полные макеты приложений или веб-сайтов со ссылками на страницы. Pencil также предлагает ряд шаблонов, библиотеку элементов и возможность импорта внешних объектов. Вы можете использовать трафареты Android и iOS для дизайна интерфейсов под мобильные устройства.
Ограничения бесплатной версии:
Pencil – это инструмент с открытым исходным кодом, поэтому бесплатная версия является полнофункциональной.