Как сделать сетку в акшуре

Обновлено: 03.07.2024

Axure – это мощное инструментальное средство для быстрого создания программных прототипов. Начать работать с этим инструментом очень легко, однако, в этом и заключается опасность. Данный инструмент настолько интуитивно понятен, что многие пользователи могут продуктивно работать без какого-либо формального обучения. Но всё же есть некоторые функциональные особенности, не зная которых, вы не сможете использовать Axure с максимальной пользой.

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

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

I) Никогда не используйте два виджета.

Наиболее распространенной ошибкой, которая приводит к повышению трудоемкости, является использование ненужных виджетов. Эта ошибка характерна для всех пользователей Axure, как для начинающих, так и продвинутых. Я до сих пор ловлю себя на этой ошибке и постоянно напоминаю себе об этой первой заповеди. Каждый виджет, который вы добавляете в свой проект, повлечёт за собой увеличение объемов работы, когда в будущем вам понадобится внести некоторые изменения. Все эти маленькие кусочки работы начнут расти после десяти повторных циклов. Ниже приведен простой пример того, как два визуально идентичных объекта могут быть созданы различными способами.

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

Оба эти варианта в случае необходимости внесения каких-либо изменений будут отбирать у вас достаточно много времени. Гораздо более подходящий способ заключается в создании нужного объекта, путём добавляя текста в окно виджета.

II) Нельзя дублировать объекты. Создайте мастер объект.

Когда я, оказавшись на последней стадии разработки, понимаю, что нам нужно изменить основную навигацию на каждой отдельной странице, то испытываю огромную радость. Не потому, что мне нравятся большие объёмы монотонной работы, а потому, что все, что нужно сделать, это изменить свой единственный мастер объект и обновить весь проект.

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

Помните, что не нужно превращать слишком большие группы в мастера. Чем больше группа объектов, тем выше шанс, что в определенный момент необходимо будет вносить изменения в мастер. Лучшим решением в этом случае будет объединение мастеров в другие мастера. Это удобно в тех случаях, когда вам необходимо создать различные вариации одного мастера с набором всегда неизменных элементов и тех которые в каждом случае будут меняться. Ниже показан пример:

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

III) Не размещайте стили перед мастером.

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

Интуитивно понятное (объективное или ощущаемое, воспринимаемое) свойство объекта (среды, интерфейса), указывающее на то, каким образом следует взаимодействовать или использовать кнопку часто усиливается с помощью mouseOver и подобных свойств. Такое поведение часто создаётся в Axure благодаря использованию динамических панелей. Различные состояния помещаются на разные панели и выбираются с помощью скриптов. Однако с помощью этого метода вы должны были бы зайти в каждую из панелей состояний и изменить характеристики кнопки.

IV) Придерживайтесь соответствующей организационной структуры проекта и используйте понятные имена.

Вы сможете сохранить понятную для вас организационную структуру. Если у вас есть сложные страницы, и вы хотите дополнить динамическую панель, для того чтобы найти подходящий элемент необходимо будет просмотреть длинный список всех вариантов. Вы можете использовать поле поиска — но только в том случае, если вы дали элементу адекватное название.
Члены вашей команды также смогут работать с проектом. Если вы, также как и я при создании проекта работаете в команде, то наверняка у вас возникали неожиданные обстоятельства. Вы или ваш коллега может неожиданно заболеть или вы должны работать над другим проектом. Очень важно, чтобы элементы проекта были понятны, чтобы любой мог вникнуть в суть и приступить к работе. Интерактивное построение другим человеком может быть особенно сложным шагом.
Вы сможете поделиться проектом с третьей стороной. В среднем проект, над которым я работаю, а также мои шаблоны одновременно направляются, по крайней мере, 10 людям. Некоторые люди будут сидеть со мной за одним столом, и могу без проблем с ними работать. С другими же людьми я никогда не встречался, и они не будут иметь ни малейшего представления о моём понимании шаблонов. В идеале прототип должен восприниматься без сопутствующих пояснительных документов.

Существует несколько вещей, которые позволяют мне достичь этих целей.

Создать страницу выгрузки.

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

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

Создайте блок-схему самых распространенных пользовательских потоков.

Большинство людей не представляет проект в виде дерева страниц; они думают о проекте, в первую очередь, как о совокупности потоков из каких-либо действий. В Axure существует возможность создавать блок-схемы, что позволяет отразить важные пользовательские процессы и объединять в узлы необходимые страницы. Вы также должны обеспечить дополнительный способ перемещения по прототипу (имена в блок-схеме должны основываться на тех, которые находятся в карте сайта. Таким образом, очевидной становится необходимость выбора понятных имен).

В прошлом материале мы подробно рассказали, что представляет собой этап аналитики и проектирования сайтов в нашем агентстве. Сегодня хотим расширить тему: поделиться своими принципами работы и рассмотреть инструменты, с помощью которых создаем прототипы разных digital-продуктов.

Принцип работы UX-специалистов агентства

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

Для разработки прототипов мы в Uplab используем программу Axure RP — мощный инструмент по созданию динамических страниц без использования кода. Несмотря на бум развития рынка инструментов прототипирования, аналогов ему по удобству и функционалу, на наш взгляд, пока что нет.

Не так давно версия Axure 9 вышла из беты. Мы уже успели реализовать в ней часть проектов и хотим поделиться, какие особенности и приятные новшества инструмента для себя отметили.

Для создания прототипов есть 2 популярных программы: Axure и Balsamiq.

Эта статья будет об Axure. При создании лендингов я пользуюсь именно им – он серьезный (без смешных и детских шрифтов как в Balsamiq), удобный и простой для работы.

Сегодня вы узнаете какой функционал есть у Axure и как в нем сделать прототип.

Зачем нужен этап прототипирования (или архитектуры)

Прототип выполняет несколько задач:

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

Функционал

Так выглядит только запущенная программа:

Нужные элементы находятся здесь в папке Default:

Как начать работать

Сперва рекомендую указать границу прототипа – ставьте 1000 пикселей:

Для этого наведите курсор на эту область…

… и перетягивайте курсор до нужной границы.

Элементы для редактирования текста:

Элементы, которые вам понадобятся:

2. Для конкретных изображений:

8. Границы для разделения блоков:

Как это выглядит в прототипе

Делайте простые и понятные прототипы!

Получите коммерческое предложение
по разработке landing page

Добавить комментарий (3) Отменить ответ

Супер статья! Монстры, подскажите, где делают такой красивый дизайн?

Петя, ну скрины из axure, а нам рисуют наши дизы (контакты не дадим, извините, слишком ценные сотрудники)

Теги статьи:

Получайте бесплатные уроки и фишки по интернет-маркетингу

Сделайте репост:

Создание Landing page
Разработка лендинга на Tilda
Настроить контекстную рекламу
SMM: продвижение в социальных сетях
Запустить e-mail маркетинг
Настроить таргетированную рекламу
SEO-продвижение сайта
Медийная реклама

Учебный центр
Календарь обучающих курсов
Marketing Monsters Club
Система 2022 NEW!
Head of SMM NEW!
Таргетолог 2022 NEW!
Интернет-маркетолог 2022
SMM-менеджер 2022 NEW!
Удвоение личного дохода на фрилансе NEW!
Трафик-менеджер 2022 NEW!
Instagram-маркетолог 3.0
SEO-оптимизатор 2022 NEW!
Web-аналитик 2022
Профессия: копирайтер 2022
Специалист по продвижению в TikTok NEW!
Корпоративное обучение интернет-маркетингу
Тест-драйв: попробуйте 11 курсов бесплатно

Партнерская программа
Аудит рекламной кампании
Поиск подрядчиков
Поиск сотрудников
Наши вакансии
Контакты
vkfbytinsttelegram
Convert Monster Blog
Партнер:
Политика конфиденциальности
Специальная оценка условий труда
Сотрудничество с авторами

ИП Петроченков Антон Сергеевич
ОГРНИП 320774600377737
ИНН 771875689505
Юр.адрес: 107023, г. Москва, ул. Суворовская, д.6, стр.7

Обзор конфиденциальности

Этот веб-сайт использует файлы cookie, чтобы улучшить вашу работу во время навигации по веб-сайту. Из них файлы cookie, которые классифицируются как необходимые, хранятся в вашем браузере, поскольку они необходимы для работы основных функций веб-сайта. Мы также используем сторонние файлы cookie, которые помогают нам анализировать и понимать, как вы используете этот веб-сайт. Эти файлы cookie будут храниться в вашем браузере только с вашего согласия. У вас также есть возможность отказаться от этих файлов cookie. Но отказ от некоторых из этих файлов cookie может повлиять на ваш опыт просмотра.

Функциональные файлы cookie помогают выполнять определенные функции, такие как совместное использование содержимого веб-сайта в социальных сетях, сбор отзывов и другие сторонние функции.

Файлы cookie производительности используются для понимания и анализа ключевых показателей производительности веб-сайта, что помогает улучшить пользовательский интерфейс для посетителей.

Аналитические файлы cookie используются для понимания того, как посетители взаимодействуют с веб-сайтом. Эти файлы cookie помогают предоставить информацию о таких показателях, как количество посетителей, показатель отказов, источник трафика и т.д.

Рекламные файлы cookie используются для предоставления посетителям релевантной рекламы и маркетинговых кампаний. Эти файлы cookie отслеживают посетителей на веб-сайтах и собирают информацию для предоставления персонализированной рекламы.

Другие файлы cookie без категорий - это те, которые анализируются и еще не были отнесены к категории.

20 рекомендаций для прототипирования в Axure RP Pro

Я проектирую сайты вот уже три года. И в процессе работы выработались определенные негласные правила, которым следую.

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

Если есть у кого свои рекомендации делитесь в комментариях.

2. Перед прототипированием желательно знать что вы прототипируете. Получить задание от начальства, собрать требования, провести исследования решений. Должен быть конкретный документ (Сжатый бриф ), в котором должна коротко (это не ТЗ) описываться функциональность, требования будущего сайта.

3. Если проект большой, то нужно убедиться что на диске есть достаточно места. В условиях офиса и злых IT-шников, у которых нужно выбивать дополнительное место на корпоративном сервере это может быть проблемой. Поэтому лучше подумать об этом заранее.

4. Скачайте с сайта готовые нужные библиотеки. Эти библиотеки существенно помогут при проектировании.

5. Настройте программу под себя. Если вы любите чтоб все окна с инструментами были свернуты, сверните их. Если вы любите чтоб панель инструментов была не сверху, а снизу сделайте это… Лучше это сделать сразу, чем потом раздражаться по таким мелочам.

6. Создайте дерево сайта. Создайте блок схему всех страниц будущего сайта со ссылками на эти страницы. Помимо того что в Axure есть Sitemap документа (Обычно размещается слева), создание дерева в виде блок схемы поможет четче понимать целостную структуру сайта и легко находить нужные страницы, переходить на них. Сразу создайте эти страницы, пускай пока пустые.

7. Называйте все своими именами. Присваивайте страницам реальные названия. Затейливые либо остроумные названия могут быть понятны только вам.

8. Lorem ipsum — sucks. При создании прототипа вставляйте реальный текст и реальные картинки. Это поможет рассчитать пространство, придаст прототипу реальные очертания.

9. Построить сетку будущего сайта. На сайте Axure RP есть готовая библиотека для системы шириной 960 пикселей. Можно создать самому мастер, если у вас ширина страницы не стандартная.

10. Описывайте нестандартные элементы. Если вы придумали какую-то новую фичу стоит ее описать. Чтоб не забыть механизм или то зачем вы сделали это так, а не иначе. Делайте это в любой удобной для вас форме, главное чтоб ваши гениальные идеи никуда не пропали. Поскольку идеи без реализации ничего не стоят!

11. Сохраняйте промежуточные прототипы. Это очень полезно. Особенно, когда решается изменить концепцию.

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

13. Делайте прототип аккуратно, сначала прикиньте структуру на бумаге. Лучший инструмент проектировщика бумага и карандашь с резинкой. В прототипе выравнивайте текст, блоки. Не ленитесь, кроме вас это придется смотреть еще кому-то. Запомните, оценивать вашу работу будут по прототипу.

14. Автоматизируйте работу. Используйте горячие кнопки. Создавайте Мастер для повторяющихся блоков (например для шапки или футера сайта), это ускорит работу — очень просто добавить мастер на нужные страницы прототипа.

15. Сразу расставляйте ссылки. Потом можно забыть. При многократном копировании элементов со страницы на страницу вы генерируете новую работу. Чем больше элементов- тем больше придется расставлять ссылки. В Axure RP нельзя проставить ссылку на выделенную группу объектов (Можно конечно поставить прозрачный прямоугольник поверх поверх объектов и поставить ссылку на него, но это может больше вас запутать).

16. Группируйте элементы (сгруппировать Ctrl+G, разгруппировать Ctrl+Shift+G ). Группировать удобно логически завершенные блоки. Помогает при простых манипуляциях: перетаскивание , выравнивание.

17. Используйте Preserv corners (правая кнопка на картинке/редактировать картинку). Эта функция полезна когда нужно растянуть не всю картинку, а какую-то ее часть, причем тянется часть между появившихся треугольников.

18. Не плодите не нужные элементы. Если что-то сделали как черновой вариант и махнули рукой, пусть будет, потом удалю — не катит. Удаляйте сразу. При демонстрации заказчику будет очень неловко, когда вылезут какие-то забытые черновые варианты.

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

И главная рекомендация:

20. Проектируйте с удовольствием, не насилуйте себя. Если уже не лезет в голову ни одна мысль, а все что было перепуталось — отдохните, встаньте с рабочего места, попейте чай/кофе, прогуляйтесь.

Читайте также: