Есть много вариантов, доступных для создания прототипов опытом мобильный пользователь, но если вам нужно для создания прототипа родные приложения для мобильных устройств, вы должны взглянуть на

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

Но первое, что нужно знать, что в отличие от большинства инструментов прототипирования, Proto.io является веб-приложением, поэтому you’ буду необходимо подключение к интернету, чтобы сделать Вашу работу.Это недостаток по сравнению с другими вариантами любит Axure RP ² , Blueprint ³ , Justinmind ⁴ , или iRise ⁵ .Это может повлиять, если вы планируете куда-то работать там, где Wi-Fi соединения don’ т всегда живут до их обещания, как во время полета, в аэропорту или в гостинице .

Но если предположить, you’ будете иметь доступ, когда вам это нужно, Proto.io предлагает много для мобильного дизайнеры любить, построенный прямо в приложение .

Pros

• Встроенная виджетов libraries для прошивкой 7 и 8, Android 4 (KitKat), и Windows 8 устройств.It’ Приятно не придется загружать сторонние библиотеки, чтобы начать, хотя вы можете добавить свои собственные активы в библиотеку, если Proto.io doesn’ т иметь контроль вам нужно.Вы также можете создавать прототипы 280 × 280px износа Android устройств или пользовательских размеров экрана для веб-приложений.Justinmind также имеет отличный набор библиотек виджетов загрузить отдельно .
• Приложение проигрыватель для IOS и Android . Это позволяет получить доступ к прототип вы опубликовали только путем открытия приложения без необходимости доступа к URL, как вы должны с AxShare ⁶ , бесплатно облако основе хостинг от Axure.Можно, однако, открытые прототипы Axure в полноэкранном режиме с рабочего стола на IOS устройств, если you’ ве уже добавили их в свой домашний экран .
• Поддержка Windows 8 prototypes (хотя это не имеет Player App Windows, так что вы должны получить доступ к URL).Windows 8 использование растет, но это не поддерживается каждого инструмента прототипирования.Justinmind также встроенную поддержку для Windows 8 устройств .
• Поддержка многих мобильных жестов и transitions (подробнее об этом ниже).Justinmind также имеет большоеподдержка различных мобильных жестов и переходов .
• Переменные, которые могут быть stored и служат для изменения отображения контента на основе условий и взаимодействия с пользователем.Это общая черта Axure, Justinmind и iRise .
• Автор проекты для общего интерфейса models как раздвижные меню и вкладок приложений.Это может быть реальная экономия времени, если вы знаете you’ будем использовать их в свой прототип.Axure также сделать примеры проектов, доступных через Axure forums ⁷ .

Cons

• Ни в коем случае, чтобы создать функциональные спецификации не . Хотя есть поддержка для комментариев и бесед в Proto.io, вы не можете генерировать подробные требования документов, как вы можете с Justinmind, Axure, или iRise.Если это необходимо, функция в вашем рабочем процессе it’ са серьезный недостаток .
• Ограничение управления версия . Если Надежное управление версию на странице или экране уровне что-то, что нужно для вашей команды, Axure, Justinmind или iRise лучше подходят для этого.Proto.io делает резервную копию каждого сохраненной версии проекта в целом, но не на страницы или экрана уровня, как команда проекты имеют в Axure.Отсутствие на уровне страницы версиями может быть серьезной проблемой в тех местах, где несколько дизайнеров, работающих на больших прототипов с большим количеством страниц .
• It’ са веб-приложение . Быть веб-значит внутренних условий сети или задержки в Интернет могут повлиять на вашу работу.В некоторых строго контролируемых корпоративных или государственных должностях, вы не можете быть в состоянии добраться до места Proto.io, и, возможно, придется работать с вашей командой безопасности, чтобы получить доступ .

Создание простой электронной почты Prototype

Теперь я буду ходить вас через шаги, чтобы создать очень простой прототип электронной намечено на iPhone 6 с использованием Proto.io’ с Библиотека прошивкой 7 и прошивкой 8 компонентов.Создание прототипа в Proto.io является потрясающе просто.После того как вы создать свой account ⁸ (бесплатно в течение первых 15 дней, прежде чем вы должны выбрать платную план), вы можете настроить ваш первоначальный проект с помощью нескольких кликов .

⁹

После создания проекта, пришло время, чтобы начать добавлять некоторые экраны.На панели экранов, вы найдете список экранов в вашей прототипа.Чтобы изменить имена экранов (которые вы обязательно захотите сделать), их ориентацию, или их цвет фона, выберите Свойства из правой части панели .

¹¹

В отредактировать свойства диалоговый экран можно переименовать на экране.Для моего прототипа я оставлю его по умолчанию портретной ориентации в .

¹³

Вы также можете изменить цвет фона в окне редактирования в диалоге свойств, выбрав цвет или добавить свои собственные HTML шестнадцатеричный код .

¹⁵

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

Теперь, когда я создал первый экран, пришло время, чтобы начать добавлять некоторые компоненты к нему .

Компоненты UI Library

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

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

¹⁷

Первый компонент я добавлю к прототипу является строка состояния IOS, один из многих компонентов, в IOS 7 библиотеке.Строка состояния имеет вид по умолчанию черном фоне с белым текстом, но это может быть изменено в панели свойств редактора.Панель свойств Плавающая панель, которая появляется, когда вы выбираете компонент, и где вы управляете настройки для размера и положения, взаимодействия, и других свойств компонента .

¹⁹

Следующий компонент я добавлю это навигационная панель с кнопками, которые появляются прямо под статусной строке.Это управление находится в разделе Панели инструментов ОС IOS 7 библиотеке .

²¹

Теперь я буду добавлять панели инструментов в нижней части экрана для сообщений обновления для входящих сообщений.Для этого я добавить компонент на панели инструментов, текстовую метку, и установите правильное значок, чтобы создавать новые сообщения .

После перетаскивания панель на холсте, поместите его в нижней части экрана.Мне придется изменить стандартные значки и добавить текстовую метку рядом .

²³

Сейчас мне придется удалить первые четыре кнопки и изменить пятый значок создания сообщений IOS.Чтобы удалить значок, щелкните на нем, а затем щелкните значок X на вкладке Свойства.При удалении значок кнопки с панели инструментов, ссылка на кнопке остается в компоненте.Но поскольку это не имеет иконки или взаимодействия, связанные, он фактически пустое пространство .

²⁵

Дляизменить значок, нажмите кнопку, чтобы выставить на вкладку Свойства.Чтобы изменить значок карандаша сообщений о значок создания сообщения, мне придется либо выбирать значок галереи к компонентам пользовательского интерфейса и прокрутите через иконки, или искать всю галерею, используя слово “изменить” .

²⁷

Теперь я просто нужно добавить текстовую метку, чтобы завершить состояние по умолчанию на панели инструментов почтовый ящик.Позже я добавлю два состояния, когда почтовый ящик обновляется .

²⁹

Прежде, чем я добавить любые другие компоненты, давайте взглянем на пункт браузере.Пункт браузер область редактора, в котором перечислены все виджеты на экране.Вы можете перетаскивать элементы вверх и вниз в списке, чтобы организовать их, но знайте, что элементы ближе к верхней части списка укладываются на верхней части элементов под ними.На панели инструментов я создал, я хочу Метка компонента будут размещены над панелью инструментов.Как вы уроните компонентов на верхней части других на холсте, Proto.io организует их в правильном порядке в пункте браузере .

³¹

Теперь я просто нужно создать список адресов электронной почты и просмотра по умолчанию почтовый ящик будет завершена.Чтобы создать список адресов электронной почты, я буду использоватьконтейнер таким образом я могу сделать это прокручивать в моем прототипе, когда он смотрел на устройстве.Контейнеры в Proto.io может быть использован для создания прокручиваемых области экрана или каруселей .

³³

Создать свой список адресов электронной почты, я буду использовать набор текстовых компонентов.Я также хочу, чтобы добавить интерактивности с прототипом, связывая пункт электронной почты в списке на экране сообщений электронной почты.Для этого я добавлю новый экран под названием E-mail Сообщение .

³⁵

Теперь у меня есть страницу, чтобы связать, я буду строить свою почтовой рассылки элемент и связать имя отправителя к экрану E-mail Сообщение .

³⁷

Я буду название моего взаимодействия “ Ссылка на электронную почту Message” так что это легче запомнить, что он делает.Я также установить триггер, чтобы быть простым нажатием .

³⁹

Однажды я дал название и вызвать для взаимодействия, мне просто нужно, чтобы закончить взаимодействие, выбрав экран, я хочу, чтобы отобразить, переход на использование, и его продолжительность.После завершения этого мои экраны соединены .

⁴¹

После того как я создал один адрес электронной запись я выберу их все и сгруппировать их по правой кнопкой мыши и выбрав опцию Group из контекстного меню.Когда элементы группируются вы увидите значок ссылка на справа от них в пункт браузере.Для того, чтобы мои компоненты легче работать с я переименовать их, что вы можете сделать с помощью двойного щелчка на имени в пункт браузере или нажав на название в панели свойств .

⁴³

Я выберу сгруппированные список адресов электронной почты и просто скопировать и вставить, пока те же самые компоненты не заполнит весь контейнер.Теперь я просто нужно добавить контейнер к моему холсте.Контейнеры добавил к экранам, открыв экран на холсте и выберите Добавить к � …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров