С чего начать изучение Axure RP

    Как правило процесс разработки нового сайта или программы начинается с составления технического задания и требований к продукту.  

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

 

    Конечно, многие скажут, что достаточно ручки с бумагой, чтобы быстро накидать прототип будущего интерфейса. Эту точку зрения призвана оспорить данная статья на примере одной из лучших программ данного рода — Axure RP. Скачать данную программу можно с сайта http://www.axure.com/ 

    Первая версия Axure RP увидела свет в мае 2003 года. В настоящий момент Axure RP используют 60% компаний из списка Fortune 100, а общее количество компаний, которые используют Axure RP в своей работе перевалило за 20 000. Цифры говорят сами за себя. 

    Рассмотрим кратко основные особенности Axure RP.

    Быстрое создание прототипов интерфейсов. Axure RP с помощью набора типовых инструментов позволяет быстро создавать интерфейсы практически любой сложности. Картинки, полупрозрачные и градиентные заливки, текстовые элементы, кнопки, ссылки, динамические элементы — вот неполный список основных примитивов. 

    Легкая публикация прототипов. Конечный прототип генерируется в набор html-страниц и может быть просмотрен в любом браузере. Кроме того, в программу встроена возможность быстрой публикации прототипа на сервере AxShare. После закачивания прототипа на сервер AxShare, выдается ссылка, по которой другие люди могут посмотреть этот прототип.

    Автоматическое создание спецификаций. Axure RP умеет автоматически составлять документацию по интерфейсу в формате документа MS Word.

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

 

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

    Мультиплатформенность. Axure RP работает как под Windows, так и под Mac OS X.

    Главный интерфейс Axure RP выглядит так.

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

    Давайте рассмотрим процесс создания типового прототипа данного сайта.

    Итак, создаем новый RP-проект.

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

    

 

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

    Давайте сделаем, чтобы при нажатии на элементы шапки открывались соответствующие страницы. Проще всего использовать виджет Image Map Region для обозначения областей нажатия. Перетаскиваем Image Map Region поверх нужных элементов, и добавляем ссылки на соответствующие страницы в окне «Widget Properties».

    Приведенный пример работы с Axure показывает насколько просто создавать шаблоны на основе навигации по страницам.

    Часто интерфейс включает в себя не просто переход от одной страницы к другой, а еще и динамические элементы внутри одной страницы, например появление/скрытие блока с текстом при нажатии на кнопку. Данный функционал также легко реализуется в Axure RP с помощью динамических панелей Dynamic Panel. 

    Для начала нужно расположить Dynamic Panel в нужной части страницы.

    Двойной клик на панели вызывает окно управления динамической панелью Dy
namic Panel State Manager. В этом окне можно дать название динамической панели, и определить их содержание в различных состояний.

    Давайте дадим название нашей панели «Пример динамической панели», и определим ее состав для состояния State1 кликнув 2 раза на эту надпись. В открывшемся окне добавим элемент прямоугольник и произвольный текст. После этого вернемся на предыдущую страницу и разместим кнопку, которая будет показывать или скрывать динамическую панель.

    Укажем в свойствах кнопки что при событии одиночного нажатия OnClick производить действие Toggle Visibility for panel(s) для нашей панели «Пример динамической панели». 

    Теперь давайте посмотрим как генерировать прототипы. Для этого служит простая кнопка «Prototype». При ее нажатии открывается окно «Generate Prototype» где указана директория куда будут сгенерированы html-файлы прототипа. 

    Отдельного внимания заслуживает вкладка Mobile/Device. В ней вы можете добавить иконки, загрузочные картинки, а также выполнить дополнительные настройки для iOS. Таким образом можно сгенерировать прототип, который будет запускаться на мобильных устройствах и будет максимально приближен к родным iOS-приложениям.

    После того, как прототип сгенерируется он откроется в браузере.

    Пример нашего прототипа вы можете посмотреть тут.

    Точно также создаются спецификации интерфейса.

    Скачать спецификацию нашего тестового примера вы можете тут.

    Для публикации проекта в AxShare служит одноименная кнопка. После ее нажатия, открывается окно настроек, где вы вводите свой логин и пароль от этого сервиса, и Axure RP автоматически закачивает прототип туда, вам же выдает ссылку по которой прототип доступен в интернете.

    Как видите, создавать прототипы интерфейсов в Axure RP действительно быстро и удобно. 

21 апреля 2013

Axure RP Pro 7.0.0.3155

Программа для проектирования интерфейсов веб-сайтов. Поможет быстро в визуальном режиме создать прототип сайта.  

условно-бесплатная|51 Мб|

Axure Tools for the Modern Web

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

Интерактивное прототипирование  — это проверенный временем способ быстро протестировать ваш продукт на мобильном устройстве. Итак, давайте рассмотрим поподробнее прототипирование, а также то, как вы сможете использовать этот мощный инструмент в своей работе.

Итак, что такое прототип?

Прежде всего, давайте определим, чем является и чем не является прототип. Прототип – это искусственно созданный объект, ориентированный на тестирование. Его основной целью является развитие и обеспечение функционального взаимодействия. Это не значит, что он должен взаимодействовать с реальными данными, хотя иногда это возможно. Лучший вариант тестируемого прототипа обладает только теми функциям и возможностями, которые вам необходимы. Главное быстро его создать, протестировать, и сделать выводы. Это дешевый вариант, который экономит ваше время в процессе работы над основным проектом.

В этой статье я покажу вам, как я использовал Axure RP 6,5 для создания прототипа приложения для iPhone для чикагского офиса компании Interaction Design Association (IxDA). В своей работе я подошел к вопросу так, как будто я создаю реальную модель.

Если вы еще не знакомы с Axure RP, то это специальный инструмент для быстрого создания прототипа, который работает на Mac и Windows. Его можно использовать для создания интерактивных прототипов как для сайтов, разработанных под стационарные компьютеры, так и для их мобильных аналогов. Основной особенностью использования Axure RP является то, что написание кода не требуется. Axure стоить $ 589 за пользовательскую лицензию для двух компьютеров. Я использую Axure на MacBook Pro на работе и на iMac дома. Существует и несколько альтернатив Axure RP:

Если вы новичок в Axure, начните с изучения тех вещей, которые вы не должны делать с помощью этого инструмента. Например, создание ненужных текстовых виджетов или безымянных прототипов. Советую вам прочитать следующее в  How to Avoid the Top 5 Mistakes When Starting to Use 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». Вы можете переименовать его, дважды щелкнув по его имени. Я предпочитаю переименовывать «состояния» для того, чтобы сделать прототип более управляемым. Чтобы создать дополнительные «состояния», просто выберите «Добавить состояние» из контекста существующего меню «состояний».

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

При первом открытии нового «с� …

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

Главная → Мобильные приложения → by Newsbot

Метки:mobile.smashingmagazine.com, редакторский перевод

10 заповедей эффективного проектирования в Axure

Русификатор Axure RP Pro 6.5.0.3044 от M.Charly

О программе:
Axure RP Pro — быстрое макетирование для приложений вебсайта, ориентированное под каркасные прототипы веб-сайтов.

О русификаторе:
Это тестовая версия русификатора Axure RP Pro. Не переведены строки Annotations, Formatting, Interactions в панели ‘Свойства виджета’, так как их изменение влияет на работоспособность этой части программы. При установке указывайте путь ‘C:\Program Files\Axure\Axure RP Pro 6.5’. Пишите комменты или на почту stalfan12@gmail.com. При установке не ставьте галочку на создание бекапов. При неудаче повторите установку. Для тех, у кого русификатор не установится, скачайте здесь www.onlinedisk.ru/file/983929/ архив с файлами, распакуйте и установите в корень программы.

Дата публикации русификатора: Nov 20, 2012

Размер: 816.2 кб. | Качество: 80% | www:

&nbspСкачать:&nbsp ( скачано 3925 раз )


Axure Widget Libraries

Веб разработка / Вэб дизайн


Axure RP Pro

Год выпуска: 2012
Версия: 6.5.0.3035
Разработчик: Axure
Язык интерфейса: Английский
Таблэтка: Присутствует

Системные требования:
— Windows 2000, XP, 2003 Server, Vista, or 7
— 1 GB RAM
— 1 GHz Processor
— 60 MB disk space
For specifications, Microsoft Office Word 2000, XP, 2003, 2007, or 2010
For prototypes, IE 6.0+, Firefox, Safari, or Chrome

Axure RP Pro — программа для быстрого макетирование вебсайта, ориентированное под каркасные прототипы веб-сайтов. Продукт предназначен для снижения издержек проектирования веб-сайтов. Это решение поможет быстро в визуальном режиме создать рабочий прототип будущего сайта, затем выгрузить прототип в html и просмотреть его через браузер.

Качество вполне приемлемо для дальнейшей постановки задач дизайнерам и программистам, а также для понимания заказчика конечного результата. Интерфейс программы аналогичен Microsoft Office 2003. «Blank» для создания веб-страниц похож на формы в ресурс-билдерах, подобных используемому в Delphi. Проектирование потоков диаграмм сходно с аналогичным проектированием в Microsoft Visio. В результате генерирования прототипа получается статический сайт, широко использующий javascript.

Возможности программы:
• Простое использование
• Быстрое применение изменений
• Мгновенное создание функциональных прототипов
• Создание интерактивных прототипов с аннотациями
• Настраиваемость
• Управление версиями
• Создание эффективного дизайна
• Экспериментирование с вашим дизайном для достижения максимального результата
• Автоматизация спецификаций для избежания утомительной документации

Скачать бесплатно: Axure RP Pro




Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *