Как создать прототип мобильного приложения в axure
Прототипы стали незаменимым этапом профессиональной разработки веб-проектов и программного обеспечения. Прототипы облегчают жизнь всем людям, вовлеченным в процесс создания того или иного проекта: клиенту, менеджерам, дизайнерам и разработчикам. Прототип визуализирует конечный продукт и помогает выявить серьезные проблемы на самых ранних этапах, помогая избежать геморроя на поздних стадиях разработки.
Конечно, первоначальные эскизы, выполненные, к примеру, на бумаге и воплощающие первые идеи дизайнера еще никто не отменял. Но всю дальнейшую работу, в которую будут вовлечены все члены рабочей группы, лучше всего проводить в специальном программном обеспечении, которое поддерживает редактирование, управление версиями и совместную работу.
Сейчас мы рассмотрим 11 сервисов для прототипирования, часть из которых бесплатны, а другая часть — с весьма бюджетными для данной категории программ ценниками.
PowerMockup — плагин для PowerPoint
PowerMockup — это плагин, превращающий Microsoft PowerPoint в инструмент для прототипирования. Он добавляет в PowerPoint новую панель, содержащую сотни элементов и значков, которые можно с легкостью перетащить на слайд.
PowerMockup работает с Office 2007, 2010 и 2013. Однопользовательская лицензия на PowerMockup стоит $59,95; стоимость лицензии для рабочей группы зависит от количества человек в ней.
Moqups — онлайн-инструмент для создания макетов и прототипов
Moqups — интерактивное приложение на HTML5, позволяющее разрабатывать векторные прототипы.
Сервис разработан 6 увлеченными программистами из Румынии, бесплатен и не требует регистрации.
Совсем недавно ребята представили премиум версию, в которой было добавлено несколько интересных особенностей, таких как неограниченное количество изменений макета и онлайн взаимодействие между членами рабочей группы.
Fluid UI — средство разработки прототипов для iOS- , Android- и Windows приложений
Fluid UI — онлайн средство для прототипирования мобильных приложений. Может быть использован как для создания простых макетов, так и сложных высококачественных макетов и прототипов. Сервис содержит библиотеки с элементами интерфейсов для iOS, Android и Windows 8 приложений.
Аккаунт для одного проекта с ограничением в 10 экранов доступен бесплатно. Платные планы начинаются с $29 в месяц.
Wireframe.cc — минималистичный бесплатный онлайн-сервис для прототипирования
Wireframe.cc отличается от других инструментов прототипирования чрезвычайно простым интерфейсом без огромного количества наворотов. Когда вы заходите на сайт сервиса wireframe.cc, вы сразу же можете начать рисовать, перетаскивая элементы мышью по рабочей области. Чтобы сохранить макет достаточно нажать кнопку «Save», после чего сервис сгенерирует уникальный URL, которым вы сможете поделиться с другими людьми или добавить его в закладки.
Wireframe.cc на данный момент бесплатен, премиум-версия с доп. функциями ожидается в ближайшее время.
Axure RP
Цены на это ПО начинаются с $289 за стандартную лицензию. Конечно, такая цена весьма велика. Однако, набор функций программы вполне оправдывает цену для некоторых категорий пользователей.
Axure может быть использован не только для создания простых макетов, но и для создания комплексных прототипов, а также для нормативных документов.
Из особенностей стоит также упомянуть возможность подключать к проекту клиента, чтобы показывать ему результат, отслеживать обратную связь, управлять дискуссией, удобно взаимодействовать с членами команды.
Axure — это десктопное ПО, доступное для Mac OS X и Windows.
Balsamiq Mockups — инструмент для быстрого прототипирования на основе Flash
Balsamiq Mockups — чуть ли не самый известный инструмент для прототипирования.
Продуктом, выпущенным в 2008 году силами одного программиста, в настоящее время пользуются десятки тысяч клиентов. Команда сервиса выросла до 11 штатных сотрудников.
Balsamiq Mockups стремится передать опыт рисования макетов на бумаге, поэтому прототипы выглядят не так формально, как в других программах.
Вы можете использовать Balsamiq Mockups непосредственно в браузере (потребуется Flash) или загрузить в качестве приложения Adobe AIR. Однопользовательская лицензия стоит $79.
Pencil — инструмент для прототипирования с открытым кодом
Pencil — инструмент с открытым кодом для создания GUI-макетов и прототипов. Содержит большое количество встроенных фигур, начиная от элементов общего назначения и элементов блок-схем до элементов управления пользовательских интерфейсов (речь как о десктопных приложениях, так и о мобильных).
Вы также можете скачать пользовательские коллекции элементов из раздела Download на сайте Pencil. Инструмент доступен как автономная версия для Linux, Windows и Mac OS X. Также может быть использован в качестве расширения Firefox.
UXToolbox — инструмент для прототипирования под Windows
С помощью UXToolbox вы сможете создавать макеты и интерактивные прототипы для мобильных приложений, веб-сайтов и десктопного ПО. </b>
Что интересно, программа позволяет в один клик переключаться между скетчем и попиксельно-выверенным прототипом.
После того, как вы закончите работу над проектом, вы сможете экспортировать макет в формат HTML, PNG, XML и Word или распечатать материалы для рабочей группы.
UXToolbox работает с Windows XP и с более поздними версиями и стоит £159 (около $240) за копию.
Mockups.me — инструмент для создания пользовательских интерфейсов
Mockups.me очень похож на Balsamiq Mockups, но имеет ряд преимуществ. В частности у Mockups.me есть приложения для IOS и Android. Кроме того, Mockups.me включает в себя встроенные коммуникационные системы для сбора обратной связи через аннотации и комментарии.
Стоимость десктопной версии Mockups.me — $49, версия для планшета доступна за $19,99, а цены за веб-версию начинается от $99 за год.
Live Wires — приложение для создания прототипов под iPad
Live Wires поможет вам протестировать и создать прототипы непосредственно на iPad. Приложение может быть использовано для создания интерактивных прототипов приложений для iPhone и iPad.
Live Wires включает в себя большую коллекцию легко настраиваемых элементов упрвления.
Прототипы могут быть экспортированы по электронной почте а затем импортированны на другое утсройство.
Live Wires сейчас доступен по специальной начальной цене в $9,99.
HotGloo
Мой любимый инструмент для прототипирования. Ему посвящена отдельная статья.
Резюме
Как вы видите из приведенного выше списка, существует большой выбор доступных инструментов для прототипирования, из которых можно выбирать тот, который подходит именно вам.
Использовали ли вы какой-то из них? Если да, пожалуйста, поделитесь своим опытом в комментариях.
Тестирование продукта перед его запуском на рынок крайне важно в любой сфере. Говоря о мобильных приложениях, нельзя не согласиться, что тестирование является одним из основных этапов разработки приложения, так как при его работе крайне важны условия и мобильное устройство, на котором оно работает.
Итак, что такое прототип?
Прежде всего, давайте определим, чем является и чем не является прототип. Прототип – это искусственно созданный объект, ориентированный на тестирование. Его основной целью является развитие и обеспечение функционального взаимодействия. Это не значит, что он должен взаимодействовать с реальными данными, хотя иногда это возможно. Лучший вариант тестируемого прототипа обладает только теми функциям и возможностями, которые вам необходимы. Главное быстро его создать, протестировать, и сделать выводы. Это дешевый вариант, который экономит ваше время в процессе работы над основным проектом.
В этой статье я покажу вам, как я использовал Axure RP 6,5 для создания прототипа приложения для iPhone для чикагского офиса компании Interaction Design Association (IxDA). В своей работе я подошел к вопросу так, как будто я создаю реальную модель.
Если вы еще не знакомы с Axure RP, то это специальный инструмент для быстрого создания прототипа, который работает на Mac и Windows. Его можно использовать для создания интерактивных прототипов как для сайтов, разработанных под стационарные компьютеры, так и для их мобильных аналогов. Основной особенностью использования Axure RP является то, что написание кода не требуется. Axure стоить $ 589 за пользовательскую лицензию для двух компьютеров. Я использую Axure на MacBook Pro на работе и на iMac дома. Существует и несколько альтернатив Axure RP:
Как начать
Первое, что вам нужно сделать, это создать новый файл Axure.
Настройка проекта
Для мобильного сайта или приложения, просто создайте страницу прототипа с длиной и шириной аналогичными размеру экрана смартфона. Если вы ориентируетесь на iPhone, вам нужно создать страницу с параметрами 320 × 480 пикселей (или 1024 × 768, если вы занимаетесь проектированием приложения для IPad). Поскольку большинство страниц для мобильных устройств превышают высоту экрана гаджета, обратите особое внимание на ширину. Такая ширина будет работать как на Retina, так и на других дисплеях IOS. Так как Axure является инструментом WYSIWYG дизайна, вы не можете рассчитать размер страницы в процентах в зависимости от ширины экрана. Как результат ваш прототип не всегда будет расширяться, чтобы заполнить ширину экрана, когда вы переключаете устройство с книжного на альбомный формат. Помните об этом.
Для телефонов Android стандартной шириной является 480 пикселей. Хотя я часто просто создавал одну 320-пиксельную версию для тестирования мобильных сайтов на обеих платформах. Этот размер корректно отображается на большинстве современных телефонов Android, в чем я убедился, пока тестировал свои продукты (а также на некоторых моделях BlackBerry и других мобильных устройств). Поскольку ширина пикселей проекта Axure зафиксирована, тестирование на устройствах Android контролируется легче всего из-за максимально доступного разрешения экрана. Но помните, что это тестирование прототипа, так что не думайте о его несовершенствах. Если вам необходимо провести тестирование на устройстве пользователя (возможно, потому, что вы должны иметь доступ к родному приложению, например как родная адресная книга), то в процессе разработки своего продукта, проводите тестирование прототипа на нескольких различных версиях платформы, например Android. Используйте специальное программное обеспечение для вашего сайта, чтобы выяснить, какие версии Android и какие модели мобильных телефонов являются самыми популярными среди ваших пользователей.
Создание прототипа родного приложения для Android или iPhone, вы можете начать, добавив существующие библиотеки виджетов для Axure. Перечень платных и бесплатных библиотек виджетов есть на сайте Axure (см. «Ресурсы» ниже). Если у вас есть доступ к ресурсам по визуальному конструированию и вам нужен более высокий уровень точности, вы можете использовать другие виджеты. Если вы создаете прототип с низким уровнем точности, то формы и объекты, построенные в Axure, это все что вам нужно.
Я обычно использую прототипы с высоким уровнем точности потому, что мне важно видеть взаимодействие пользователей с различными функциями моего прототипа, иконками, кнопками и другими средствами управления. Тестирование прототипов с низким уровнем точности поможет вам узнать, понимают ли пользователи идею вашего приложения. Однако используя прототип такого рода, вы не узнаете, как пользователи реагируют на ту или иную иконку вашего продукта.
Начав свой проект, мне нужно было создать основную базу для прототипа
Я начал свой проект с одной страницы в панели «Sitemap». Я поместил прямоугольник, размером 320 × 460 пикселей на странице, чтобы создать холст для работы.
Создание многократно используемых компонентов.
Первое, что я сделал, это было создание заголовка страницы с помощью «мастера», который представляет собой многократно используемый компонент. Этот компонент может быть добавлен к любой странице в Axure. Использование «мастера» заметно экономит ваше время, так как любые изменения, внесенные в один компонент, сразу же появляются в каждом его экземпляре в прототипе. Я создал «мастер» размером 300 × 50, который создает заголовки страниц приложения, кроме главной страницы
Теперь у проекта есть одна страница и один «мастер».
Использование динамических панелей для нескольких экранов и их состояний
Следующим шагом нужно поставить динамические панели, которые называются «ContentPanel» на холст в верхний левый угол, (X = 0, Y = 0). Динамическая панель представляет собой виджет, который может содержать несколько «состояний», как их называет Axure. Эти «состояния» представляют собой разные взгляды на одну позицию на экране. Взгляды основаны на действиях пользователя и значения переменной. Размер ContentPanel составляет 320 × 415 пикселей и содержит в себе контент прототипа, которые находится выше панели вкладок IOS. Динамические панели прокручиваются, так что ваш контент может быть выше 415 пикселей, и будет появляться из-под панели вкладок, когда пользователь будет прокручивать страницу. Чтобы полоса прокрутки не появлялась, я выбираю опцию «Never Show Scroll», в разделе «Edit Dynamical Panel» контекстного меню. Теперь проект имеет одну динамическую панель, которая была создана с одним «состоянием» по умолчанию. Можно добавить и другие, также их можно переименовать. Полосы прокрутки были установлены таким образом, чтобы пользователь их никогда не увидел. Позже мы используем функцию «Pin to Browser» чтобы установить панели вкладок в нижней части экрана iPhone.
Затем я создал вторую динамическая панель под названием «TabBarPanel», ее размер составил 320 × 45 пикселей. Ее я установил под ContentPanel. Эта панель была использована для хранения изображений панели вкладок. Она увеличила общую высоту страницы до 460 пикселей. Остается еще 20 пикселей для меню iPhone, которое отображается в верхней части экрана мобильного устройства.
Панель вкладок изображений PNG помещена в «состояние» Tab Bar в TabBarPanel. Это «состояние» всегда отображается.
Мне пришлось создать специальный контейнер для изображений панели вкладок - динамическую панель, так чтобы я мог бы привязать ее к окну браузера. При расположении TabBarPanel на главном экране, выберите из контекстного меню Order → Bring to Front. Это поможет вам убедиться, что TabBarPanel не охвачена другими контентом.
Панель вкладок будет прикреплена к нижней части экрана iPhone, контент будет появляться из-под этой панели при прокрутке страницы.
Диалог «Pin to Browser» позволяет вам указать позиции.
Всегда используйте имена объектов
Пояснение о наименовании объектов: Axure позволяет называть все объекты, которые вы включаете в прототип, и я всегда стараюсь это делать. Чем сложнее становится ваш прототип, и чем больше людей вносят в него свой вклад, тем сложнее найти необходимые объекты. Я называю свои объекты, используя свой вариант Венгерской Нотации. Так что название кнопки будет иметь форму «btnButtonPurpose», а название ввода текста «txtTextInputPurpose». Вы можете создать свои собственные варианты после «BTN» и «TXT».
Добавление интерактивности в динамические панели
Теперь нам нужно создать несколько состояний для ContentPanel и приступить к работе над фактическим экраном приложения. Ваша панель уже имеет одно «состояние», потому что оно создается автоматически и называется «State1». Вы можете переименовать его, дважды щелкнув по его имени. Я предпочитаю переименовывать «состояния» для того, чтобы сделать прототип более управляемым. Чтобы создать дополнительные «состояния», просто выберите «Добавить состояние» из контекста существующего меню «состояний».
Вы можете добавить неограниченное количество «состояний» в динамическую панель.
Слово прототипирование очень распространено и актуально для людей, занимающихся разработкой программного обеспечения, а также архитектурной разработкой. Когда дело доходит до архитектурного развития, в Египте есть прототипы Великих пирамид Гизы. Они были построены с (конечно) меньшей версией, чтобы получить согласие или одобрение правителя.
Этот небольшой, но значимый пример точно иллюстрирует цель прототипа. Согласно Википедии, прототипом является «первая или предварительная версия устройства или транспортного средства, из которого разработаны другие формы».
Для мира разработки программного обеспечения определение можно адаптировать как предварительную версию страницы, экрана или функциональности, которая поддерживает другую разработку, эффективно визуализируя элементы экрана и демонстрируя взаимодействия. Это определение включает в себя наиболее важную часть, взаимодействие.
При разработке программного обеспечения для разработки части функциональности или самой полной функциональности требуются значительные инвестиции с точки зрения времени и усилий. Это бесконечный процесс разработки, проверки и исправления проблем в соответствии с отзывами клиентов.
Большинство компаний-разработчиков программного обеспечения хотят, чтобы этот процесс был максимально быстрым. Следовательно, они не идут вперед с усилиями и временными затратами от всех членов команды. Вместо этого они делают умный ход, наняв инженера пользовательского опыта (UX), который обладает навыками визуализации конкретной функции. Это приводит их к водительскому креслу при разработке продукта.
По сути, прототипирование требуется для моделирования и визуализации требований к программному обеспечению на самых ранних этапах разработки. Этот процесс в конечном итоге становится выгодным как для компаний-разработчиков программного обеспечения, так и для клиентов, поскольку он уменьшает неизвестность в функции, тем самым обеспечивая правильное направление развития.
Правильная фаза для разработки прототипа
В нынешнюю эпоху разработки программного обеспечения высокого профиля в общей таблице жизненного цикла разработки программного обеспечения было много достижений. Эти достижения связаны с технологиями, а также с ролью / положением конкретного члена команды в жизненном цикле. Одна такая позиция начала набирать обороты, которая называется UX инженер.
Инженер UX оснащен набором навыков, который выгоден для клиентов. Используя различные методы или шаги, чтобы лучше узнать клиента, инженер UX может получить хорошее представление о том, что пользователь ожидает от данного программного продукта.
Обычно, когда происходит процесс сбора требований, технологические компании привлекают инженеров UX, чтобы выйти на рынок, чтобы понять, что нужно пользователю. С последним трендом Responsive Web XDesign и Mobile-First подход к разработке программного обеспечения, может быть ряд областей, на которых хочется сосредоточить свое внимание. Инженер UX использует такие процессы, как пользовательские интервью, обзоры рынка, чтобы знать пульс своей целевой аудитории.
Этот процесс занимает много времени, а также важен, поскольку он дает возможность программному продукту увидеть его пригодность на рынке. Эти шаги используются при сборе требований к программному обеспечению и их выявлении. Это идеальный этап, поскольку он снижает общую стоимость разработки. Однако, когда программный продукт является зрелым, можно ввести этап исследования UX, чтобы измерить жизнеспособность производимого усовершенствования.
Для инженеров UX процесс понимания их пользовательской базы не ограничивается только получением информации от клиента или связанных разговоров. Есть несколько интересных шагов, которые они должны предпринять, чтобы понять, чего хочет пользователь. Настоящая работа начинается тогда, когда ему становится ясно, что пользователь может ожидать от программного продукта.
Как только становятся доступны некоторые данные о том, как пользователь воспринимает предстоящее программное обеспечение или усовершенствование существующего программного обеспечения, инженер UX возвращается в свое логово, чтобы разработать пользовательский интерфейс для них. Традиционно или в качестве общего подхода, когда кто-то говорит о дизайне, это означает программное обеспечение, такое как Adobe Photoshop, CorelDraw или даже Microsoft Paint. Иногда, чтобы быстро вернуться к пользователям, дизайнеры UX используют старые добрые ручки и бумагу для проектирования интерфейсов.
Введите Axure, современное программное обеспечение для разработки красивых пользовательских интерфейсов и взаимодействий. Axure существует уже около десяти лет, чтобы позволить инженерам UX с легкостью добраться до деталей создания прототипа программного обеспечения. Axure, помимо того, что является инструментом для создания прототипов, имеет мощное сообщество, вносящее свой вклад в мир UX с множеством примеров и умелых взаимодействий.
- Диаграммы и документация
- Эффективное прототипирование с динамическим контентом
- Условные потоки
- Красивые анимации для улучшения взаимодействия
- Адаптивные виды
- Поддержка на Windows и Mac
Для быстрого создания прототипов Axure RP предоставляет разнообразный набор инструментов и методов, которые всегда помогают инженерам-аналитикам / пользовательскому интерфейсу визуализировать конечную цель.
Благодаря сильному сообществу, которое всегда готово оказать помощь, Axure RP становится предпочтительным инструментом для энтузиастов и практиков UX.
После установки Axure вам будет представлен интерфейс, как показано на следующем снимке экрана.
Этот экран всегда будет отображаться при запуске, пока вы не решите не показывать его.
- Начать новый файл в Axure
- Откройте существующий проект Axure
Давайте теперь создадим новый файл с Axure.
Когда вы нажмете кнопку «НОВЫЙ ФАЙЛ», вы увидите следующий экран для создания нового прототипа.
Как показано на рисунке выше, рабочее пространство разделено на 6 частей.
- страницы
- Библиотеки
- Инспектор
- Контур
- Мастера
- Площадь дизайна
Давайте пройдемся по этим частям по очереди.
страницы
В этом разделе показаны страницы, над которыми вы работаете. Эти страницы отображаются в древовидной структуре по умолчанию следующим образом. Домашняя страница имеет следующие дочерние страницы.
Главная
Как и большинство доступных инструментов, этот раздел позволяет вам взаимодействовать со страницами вашего прототипа. Вы можете использовать его для планирования экранов в предполагаемом прототипе.
Панель библиотек
Общие библиотеки включают в себя основные фигуры, кнопки, текст заголовка, Hot Spot, панель Dynamic и т. Д.
С Axure RP, для всех ваших требований к прототипированию, появляется очень эффективный контроль, называемый Hot Spot. Используя этот элемент управления, вы можете обеспечить взаимодействие щелчка практически с любым элементом управления в пользовательском интерфейсе. Пример будет приведен на последующих страницах.
В библиотеку форм, как следует из названия, включены элементы управления List Box, Checkbox, переключатель, текстовая область и текстовое поле. Для разработки формы пользовательского ввода вы можете использовать элементы управления из этого раздела в библиотеке.
Меню и таблицы имеют традиционную структуру. Такая структура, возможно в горизонтальной или вертикальной форме, доступна в этой библиотеке, называемой Меню и таблицы.
Наконец, что не менее важно, идет библиотека разметки, которая включает в себя стикеры, маркеры и стрелки. В основном, это будет использоваться для аннотаций в вашем прототипе.
Площадь дизайна
Это настоящая площадка для инженеров UX. Это пространство будет использоваться для создания прототипов в соответствии с вашими требованиями. Для начала обратитесь к области, выделенной цифрой 6 на следующем скриншоте.
В этой области вы можете перетащить нужные элементы управления из библиотеки. Давайте создадим быструю строку меню, используя библиотеку.
Как только вы перетащите элемент управления в область дизайна, вы увидите следующий экран.
Как показано на приведенном выше экране, Axure RP достаточно интеллектуален, чтобы отображать нужный текст в меню. Учитывая, что это строка меню, Axure RP автоматически создал File, Edit и View как меню в элементе управления.
Как указано стрелкой, в разделе инспектора отображаются свойства элемента управления. Используйте этот раздел, чтобы создать имя для вашего элемента управления для уникальной идентификации при создании сложных прототипов.
Давайте дадим имя этому элементу управления TestMenu. Мы будем использовать это имя в следующих примерах.
Свойства страницы
При планировании прототипа имеет смысл иметь четкое представление о пользователе и, следовательно, об устройстве, на котором будет демонстрироваться / просматриваться прототип. Для лучшего взаимодействия с прототипом в Axure предусмотрена функция настройки свойств страницы.
Как показано на рисунке выше, область, обозначенная цифрой 3, является разделом свойств страницы. В этом разделе вы сможете увидеть выпадающий список взаимодействий и подраздел Adaptive.
Давайте обсудим эти разделы подробно.
В разделе «Взаимодействия» рассматриваются возможные взаимодействия (случаи) со страницей. Как видите, случай взаимодействия OnPageLoad обрабатывает события при загрузке страницы. В большинстве прототипов инженеры UX предпочитают помещать анимацию, чтобы произвести первое впечатление. Это конкретное событие для отображения анимации обычно вызывается в случае OnPageLoad.
Благодаря адаптивному разделу Axure RP начинает адаптивный веб-дизайн. В настоящее время разработка опыта для веб-сайтов не является достаточной, наряду с этим, предприятия предпочитают, чтобы мобильные сайты сосуществовали с веб-сайтами.
Одна и та же страница, если смотреть с разных размеров экрана и макетов, представляет собой разные адаптивные виды. Как правило, адаптивные представления предназначены для мобильных телефонов и планшетов. Axure предоставляет эту функцию адаптивных представлений, так что инженеры UX могут контролировать адаптивный аспект прототипов с нуля.
Панель инспектора для виджета
Панель взаимодействий виджетов является наиболее важной частью Axure. Вы можете увидеть эту панель, щелкнув любой виджет в области дизайна.
Рассмотрим пример пункта меню, который мы использовали в предыдущем разделе. Выберите пункт меню с именем TestMenu и обратите внимание на раздел, выделенный на следующем снимке экрана.
Как вы можете видеть на вкладке Свойства, существуют различные взаимодействия, такие как OnMove, OnShow, OnHide и OnLoad. Они относятся к элементу управления меню в целом.
Теперь нажмите «Файл» в элементе управления меню.
Вы заметите изменение типа взаимодействий на панели свойств виджета. Кроме того, он предоставляет гибкость, чтобы дать имя для этого пункта меню. Давайте возьмем случай OnClick в качестве примера.
Панель «Примечания». В самой панели инспектора имеется подраздел «Примечания». В области заметок вы сможете добавить некоторые запоминающиеся моменты для управления по вашему выбору.
Эти моменты будут понятны, когда мы погрузимся в пример в следующей главе.
Сетки и направляющие
Для прототипа с максимальным уровнем качества и точности инженерам UX требуется умение совмещать / позиционировать элемент управления с другим элементом управления.
Например, предположим, что вы хотите показать всплывающее окно входа в систему. Если это всплывающее окно должно отображаться в центре экрана, вам нужны общие размеры экрана. Кроме того, чтобы выровнять точно в середине экрана, у вас должны быть сетки, чтобы выровнять его соответствующим образом.
Axure предоставляет функцию гридов и направляющих, что позволяет эффективно использовать область проектирования.
Чтобы увидеть доступные сетки и направляющие, щелкните правой кнопкой мыши область дизайна, и появится контекстное меню, показанное на следующем снимке экрана.
Теперь позвольте нам понять доступные варианты.
Мы рассмотрим варианты, которые обычно используются для руководства.
В этой главе вы познакомитесь с базовым набором взаимодействий, предоставляемым Axure при разработке экрана.
Целью Axure RP является предоставление интерактивных прототипов. Теперь, когда дело доходит до создания интерактивных прототипов, всегда есть предостережение о создании чрезмерно интерактивного прототипа. По этой причине имеет смысл начинать с одного важного взаимодействия за раз, чтобы пробежаться по остальным доступным страницам.
Axure Взаимодействия
При создании прототипа HTML Axure RP преобразует взаимодействия в реальный код (HTML, CSS и JavaScript). Это действует как катализатор, чтобы показать предполагаемый дизайн и взаимодействия на странице.
Как правило, взаимодействие начинается с того момента, когда взаимодействие происходит. Например, когда страница загружается в браузере, когда пользователь нажимает на один из элементов и т. Д.
Затем возникает вопрос, где на экране происходит взаимодействие. Это может быть простой элемент экрана, такой как прямоугольник, который мы хотим превратить в нажимаемую кнопку для меню (пример показан ниже).
Наконец, есть описание того, что происходит во взаимодействии. Давайте рассмотрим загрузку страницы, когда браузер загружает страницу; Вы можете просто выбрать конкретное слайд-шоу, чтобы начать или увеличить изображение при вводе на экране.
Axure Events
События в Axure могут быть двух типов, инициируемые двумя типами событий.
События уровня страницы и мастера
Когда страница загружается, происходит множество событий, извлекающих информацию о дизайне, содержание и, следовательно, выравнивание каждого элемента на экране. Поскольку эти события происходят во время начальной загрузки страницы, вы можете считать, что эти события будут повторяться при каждой загрузке страницы. Ниже приведены некоторые примеры событий уровня страницы и мастера.
- OnPageLoad
- OnWindowResize
- OnMouseMove
- OnAdaptiveViewChange
События уровня объекта или виджета
Давайте рассмотрим, мы создали страницу и определенный виджет кнопки на странице. Теперь для взаимодействия с этим виджетом кнопки, возможно, прикосновением (на мобильном прототипе) или щелчком мыши. Ниже приведены некоторые примеры событий уровня объекта или виджета.
- По щелчку
- OnMouseEnter
- OnDrag
- OnDrop
- OnMouseHover
случаи
Как обсуждалось в предыдущей главе, в разделе свойств страницы может быть разработано конкретное взаимодействие с виджетами. Это так называемые случаи . Конкретное взаимодействие может представлять собой совокупность нескольких случаев.
Давайте рассмотрим пример, чтобы понять это лучше.
Чтобы начать с этого примера, создайте новый файл, щелкнув « Новый» в меню « Файл» или с помощью сочетания клавиш Ctrl + N.
В этом примере мы собираемся разработать простую строку меню, как это видно в большинстве программных продуктов. Структура меню будет иметь следующие элементы меню и подменю под каждым из них.
редактировать
- Показать строку состояния
- Панели инструментов
- Главная панель инструментов
- Панель инструментов для укладки
- Начиная
- Использование справки
- Что это
В конце описанной выше процедуры вы сможете увидеть конечный результат, как показано на следующем снимке экрана.
Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в моём Telegram-канале. Подпишитесь, мне будет очень приятно.
Прототипирование является ключевой частью проектирования UI и UX. Дизайнеры могут создать прототипы как с высокой, так и с низкой точностью, в зависимости от их назначения. Таким образом, прототипы дают возможность опробовать функцию, приложение или сайт. Их основная цель — протестировать идеи до того, как они будут полностью разработаны, а также улучшить пользовательский опыт.
Существует множество способов продемонстрировать дизайнерское взаимодействие с многочисленными инструментами прототипирования, которые доступны дизайнерам.
Мы рассмотрим топ-10 новейших инструментов, которые помогут UX/UI-разработчикам создать интерактивную модель для дизайна и концепции продукта.
Adobe XD — один из самых популярных инструментов среди UI/UX-дизайнеров. Данная программа функционирует в качестве универсальной платформы для создания вайрфреймов, дизайна сайтов, мобильных приложений, голосовых интерфейсов и т.д. Adobe XD позволяет командам коллективно работать между платформами в режиме реального времени, получая ценные комментарии и отзывы напрямую от клиентов.
Figma предоставляет простой в использовании редактор перетаскивания, чтобы создавать вайрфреймы и практические прототипы. В программе также имеется много элементов для анимации прототипов.
Большинство дизайнеров уже знакомы с данным UI-инструментом. Несмотря на то, что Figma считается программой по проектированию UX, она также имеет программное обеспечение для быстрого прототипирования. Дополнительные функции включают такие плагины, как Figmotion и Autoflow, а также Arc Tool и Vector Networks.
На сегодняшний день Webflow набирает популярность, поскольку ускоряет работу разработчиков, предлагая семантический код, и дизайнеров. По сути, платформа помогает в прототипировании, одновременно создавая живой сайт. Webflow — это широко известный способ прототипирования для разработки чувствительных к программированию без кода сайтов. Дизайнеры могут использовать встроенные сложные функции для высокоточных проектов, которые Webflow может преобразовать в готовый к производству сайт одним нажатием кнопки.
Sketch — одна из наиболее широко используемых программ для создания пользовательского интерфейса и прототипирования среди миллионов программистов по всему миру. Это одно из лучших современных приложений для разработки всех форм пользовательского интерфейса. Платформа напоминает усложненную и широко поддерживаемую версию Figma. Однако программа доступна только для iOS.
Это векторная платформа с элегантным графическим интерфейсом, которая позволяет управлять стилем, масштабированием и дизайнерскими шаблонами. Помимо этого, Sketch обладает широким спектром границ, градиентных заливок, режимов смешивания и т.д. Программа поддерживает целый производственный процесс, в котором дизайнеры разрабатывают высококачественные проекты.
InVision — еще одно веб-приложение, которое ориентировано на архитектуру. Оно предлагает все необходимые материалы для перехода от варфрейминга до UI-дизайна, а также полезные методы для лучшей командной работы и прототипирования.
InVision — один из самых больших и популярных инструментов прототипирования, которые используются сегодня дизайнерами и ведущими предприятиями. Платформа поддерживает изменения дизайна в режиме реального времени, а также быстро собирает ответную реакцию команд, позволяя разработчику организовать свой рабочий процесс. Такой подход упрощает проектную работу.
Axure RP сочетает эффективные инструменты проектирования, SVG-импорт, интеграцию Sketch и Adobe XD с прототипированием мирового уровня. Вы можете легко обмениваться прототипами Axure RP и монтажными областями Adobe XD, быстро рисовать и собирать входные данные поверх экранов, проверять макет, получать CSS-фрагменты и загружать ресурсы, а также конвертировать статические изображения в динамические прототипы Axure Cloud.
Платформа также облегчает комплексную документацию, автоматизированные красные линии и передачу материалов разработчикам без необходимости писать какой-либо код.
Framer известен своей универсальностью, разносторонним интерфейсом, функциональным дизайном и понятными шаблонами. Данный инструмент расширяет дизайнерскую динамику от метода перетаскивания, поскольку эта платформа основана на коде и использует CoffeeScript для создания прототипов.
Недостатком данного инструмента является усложненный интерфейс и рабочий процесс, поэтому разработчикам и дизайнерам приходится тратить много времени на его изучение.
Origami Studio — приложение для macOS, созданное и используемое Facebook. Существует также аналог мобильного приложения, который позволяет просматривать прототипы на реальном устройстве.
Facebook применяет данный инструмент прототипирования на ежедневной основе. В 2013 году Origami Studio стал доступен всему миру. Изначально он работал с Quartz Composer, но ни для кого не секрет, что эта часть Xcode-среды — не лучший способ прототипирования. Поэтому в прошлом году Facebook предоставил Origami Studio — предыдущий прототип инструмента, который работает с их собственной средой. Его производительность значительно повысилась благодаря этому шагу, но, к сожалению, он по-прежнему доступен только для пользователей Mac.
Marvel называет себя «дизайнерской платформой для цифровых продуктов». Хотя это утверждение не является полностью верным, программа отлично подходит для создания прототипов мобильных и цифровых приложений.
Marvel обладает всеми доступными ресурсами для разработки всевозможных мобильных и сетевых интерфейсов — от концепций до шаблонов. Платформа также облегчает взаимодействие жестов для создания анимированных приложений для смартфонов.
Justinmind — инструмент прототипирования, который позволяет дизайнерам сфокусироваться на пользовательском опыте. Платформа идеально подходит для создания вайрфреймов и адаптивного прототипирования, которые совместимы с различными разрешениями экранов. Дизайнерам стоит правильно использовать полный набор шаблонов и UI-библиотек, чтобы создать высокоточные прототипы. Более того, JustInMind помогает работать с формами и списками данных, не требуя при этом умения писать код.
Ниже представлено еще несколько платформ, которые не попали в список лучших инструментов для создания прототипов.
1. UXPin объединяет дизайн, прототипирование и совместную работу в одном месте на Windows, Mac или в любом браузере.
2. Blocs предоставляет возможность добавить множество интересных эффектов прокрутки и анимации в любую часть адаптивных сайтов без необходимости писать код.
3. Principle позволяет разрабатывать анимированные и интерактивные пользовательские интерфейсы через поток многоэкранного приложения или новых взаимодействий и анимации.
4. Omnigraffle предоставляет инструменты для мокапов пользовательского интерфейса, которые позволяют строить диаграммы и создавать прототипы, а также инструменты проектирования для специалистов, нацеленных на организацию работы и визуальное взаимодействие.
5. Mockflow — простое программное обеспечение для разработки вайрфреймов и совместной работы над UI-дизайном путем быстрого создания эскизов макетов интерфейсов.
6. Slickplan — система веб-прототипов, которая позволяет легко определять папки, страницы и структуры ссылок с помощью интерфейса перетаскивания.
7. Proto позволяет создавать полностью интерактивные высокоточные прототипы.
8. Moqups — оптимизированное веб-приложение, которое помогает создавать вайрфреймы, макеты, диаграммы и прототипы в режиме реального времени.
9. iPlotz обеспечивает разработку кликабельных навигационных макетов и вайрфреймов для прототипирования сайтов и программных приложений. К тому же, вы можете обсудить свои творения с другими пользователями.
10. Gliffy — программное обеспечение для построения диаграмм и рисования, которое позволяет перетаскивать фигуры или использовать шаблоны и темы для прототипирования.
11. HotGloo — UI-программа для создания вайрфреймов и прототипирования. Используется для разработки интерфейсов для цифровых, мобильных и переносимых устройств.
12. Mockingbird — UI-инструменты для создания макетов с помощью элементов перетаскивания на страницу с возможностью менять размеры.
13. Protoshare — инструмент совместного прототипирования, который помогает командам визуализировать требования с помощью вайрфреймов сайтов, интерактивного программного обеспечения и мобильных прототипов.
14. Balsamiq — программное обеспечение для разработки низкоточных вайрфреймов с большим количеством онлайн-курсов и ресурсов для изучения варфрейминга и дизайна пользовательского интерфейса.
Разработка программы или сайта всегда начинается с формирования требований и составления технического задания. Чтобы наглядно познакомиться с интерфейсом будущего продукта до начала основных работ, проектирование начинают на бумаге, затем создают прототип. Для этого существует множество специальных программ, одна из которых - Axure RP. Результат работы таких программ - несколько html страниц (сайт). Заказчик сможет ознакомиться не только с описанием функциональной части, но и увидеть прототип продукта, открыв страницу в браузере.
Зачем мы делаем прототипы в Axure RP
С помощью прототипирования в Axure RP проектировщики создают прототип из набросков. Программа позволяет корректировать предварительный набросок, принять решение о том, какие функциональные возможности будут реализованы на сайте. После утверждения предварительного проекта (прототипа), продукт передается в работу программистам и дизайнерам.
Прототип позволяет снизить количество переделок и доработок. Простые наброски проекта на бумаге не интерактивны, поэтому на них достаточно сложно представить точные размеры элементов. Прототипирование всегда начинается с наброска, затем его переносят в специальную программу. Поработав в Axure RP, проектировщики получают точную копию продукта, но без графического и цветового оформления. Этого достаточно, чтобы увидеть все ошибки, дополнить недостающие элементы и убрать лишнее.
Благодаря прототипированию удается снизить вероятность будущих исправлений на готовом сайте. Стоимость этой услуги намного ниже, чем работа по созданию верстки или дизайна, а для ее осуществления нужно совсем немного времени. Чем позже появится необходимость исправлений сайта, тем дороже это будет стоить, т. к. сами работы будут достаточно сложными. Прототип позволяет минимизировать возможные трудности, финансовые и временные траты, потому что все исправления будут произведены до начала дизайна и разработки.
С помощью прототипа можно оценить работу и согласовать ожидания разных специалистов до того, как над проектом начнут работу.
Особенности функционала программы Axure RP
Создание прототипа интерфейса
Программа имеет широкий набор типовых элементов, с помощью которых можно оперативно создавать простые и сложные интерфейсы. Инструментарий стандартный: элементы, которые размещаются на страницах - текстовые блоки, кнопки, элементы форм, а также настройки.
Публикация прототипа
Финальный прототип, генерируемый в виде набора html-страниц, можно просматривать во всех браузерах. Также можно быстро публиковать прототип на AxShare – специальном сервере для загрузки и хранения прототипов. По окончанию закачки на сервер дается ссылка, по которой могут перейти другие люди, чтобы увидеть прототип.
Спецификация интерфейса
Программа автоматически создает документ со скриншотами интерфейса и его описанием в формате Microsoft Word. Такие спецификации помогают утверждать объемные прототипы в больших компаниях.
Мобильные устройства
Относительно недавно компания Axure выпустила новшество: теперь программа может создавать прототип приложения для мобильной платформы, загружать и публиковать их на AxShare. Ссылку на прототип, которая будет выглядеть как мобильное приложение, можно создать в iOS.
Включения
С помощью программы, в частности - специальной функции Master, можно сделать отдельный элемент, и в дальнейшем вставлять его на другие страницы. Суть этой функции в создании часто используемых блоков. Достаточно сделать один такой блок, вставить его в шапку или “подвал” сайта. Если потребуется его изменение, можно переделать только один блок, - другие будут скорректированы автоматически.
Основные этапы работы над прототипом
Работа с заказчиком начинается с обсуждения задачи, для чего можно встретиться, либо поговорить по телефону. Во время интервью проектировщик создает бриф анкету для лучшего понимания задачи. Затем дмы приступаем непосредственно к работе: рисуем набросок на бумаге и создаем прототип в Axure.
Наши проектировщики делают прототип сайта перед его созданием или редизайном. Детальное прототипирование в Axure RP позволяет избежать ошибок на разных этапах создания сайта, а также сэкономить деньги и время заказчика.
Читайте также: