1 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>15 авг 2018</li>
2
<ul><li>15 авг 2018</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Axure RP - инструмент для создания интерактивных прототипов сайтов. Рассказываем на примерах, как работать с этой программой.</p>
4
</ul><p>Axure RP - инструмент для создания интерактивных прототипов сайтов. Рассказываем на примерах, как работать с этой программой.</p>
5
<p> vlada_maestro / shutterstock</p>
5
<p> vlada_maestro / shutterstock</p>
6
<p>Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.</p>
6
<p>Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.</p>
7
<p>Чтобы создать прототип простого сайта, открыть его в браузере и обсудить с заказчиком, достаточно изучить интерфейс программы и её базовые возможности. И, конечно же, владеть знаниями о прототипах и UX-дизайне.</p>
7
<p>Чтобы создать прототип простого сайта, открыть его в браузере и обсудить с заказчиком, достаточно изучить интерфейс программы и её базовые возможности. И, конечно же, владеть знаниями о прототипах и UX-дизайне.</p>
8
<p>Для этого Skillbox проводит курс "<a>UX-дизайн</a>", который даёт не только теоретическую базу, но и предоставляет стажировку в компаниях-партнёрах. А сейчас поговорим об азах.</p>
8
<p>Для этого Skillbox проводит курс "<a>UX-дизайн</a>", который даёт не только теоретическую базу, но и предоставляет стажировку в компаниях-партнёрах. А сейчас поговорим об азах.</p>
9
<p>Прототип - это детальная схема сайта. С его помощью легко продумать структуру страниц и разделов, расположение информационных блоков на каждой странице, а также согласовать всё это с заказчиком.</p>
9
<p>Прототип - это детальная схема сайта. С его помощью легко продумать структуру страниц и разделов, расположение информационных блоков на каждой странице, а также согласовать всё это с заказчиком.</p>
10
<p>Обычно прототип создают чёрно-белым, чтобы сфокусироваться на структуре и расположении контента, а не на красивой обложке.</p>
10
<p>Обычно прототип создают чёрно-белым, чтобы сфокусироваться на структуре и расположении контента, а не на красивой обложке.</p>
11
<p>На встрече с заказчиком делают примерный план сайта на бумаге. После этого - конструируют интерактивный прототип и обсуждают возникшие вопросы, исправляют ошибки и неточности. Такой подход позволяет сэкономить время и ресурсы.</p>
11
<p>На встрече с заказчиком делают примерный план сайта на бумаге. После этого - конструируют интерактивный прототип и обсуждают возникшие вопросы, исправляют ошибки и неточности. Такой подход позволяет сэкономить время и ресурсы.</p>
12
<p>В статье "<a>Скетчинг: как нарисовать сайт на бумаге</a>" мы придумали структуру страницы для компании, которая продаёт строительные блоки.</p>
12
<p>В статье "<a>Скетчинг: как нарисовать сайт на бумаге</a>" мы придумали структуру страницы для компании, которая продаёт строительные блоки.</p>
13
<p>Скетч - это план организации информации на странице. На его основе создают уже кликабельный прототип. Прототип удобно делать в программе Axure RP. Это полноценный инструмент для сложных макетов сайтов и приложений.</p>
13
<p>Скетч - это план организации информации на странице. На его основе создают уже кликабельный прототип. Прототип удобно делать в программе Axure RP. Это полноценный инструмент для сложных макетов сайтов и приложений.</p>
14
<p>Ответом на вопрос, как сделать прототип сайта самому, будет простой совет: освоить Axure, разобраться в интерфейсе и его базовых функциях.</p>
14
<p>Ответом на вопрос, как сделать прототип сайта самому, будет простой совет: освоить Axure, разобраться в интерфейсе и его базовых функциях.</p>
15
<p>Рассмотрим создание прототипа на примере сайта для компании с блогом. Необходимые страницы для такого сайта - главная, блог и запись в блоге.</p>
15
<p>Рассмотрим создание прототипа на примере сайта для компании с блогом. Необходимые страницы для такого сайта - главная, блог и запись в блоге.</p>
16
<p>Создаём новый проект:<em>File → New.</em>По умолчанию Axure откроет новый проект с тремя пустыми страницами. Переименуем их под структуру будущего сайта.</p>
16
<p>Создаём новый проект:<em>File → New.</em>По умолчанию Axure откроет новый проект с тремя пустыми страницами. Переименуем их под структуру будущего сайта.</p>
17
<p>Чтобы поменять имя страницы, достаточно кликнуть правой кнопкой мыши на название страницы в окне <em>Pages</em>и выбрать пункт<em>Rename</em>.</p>
17
<p>Чтобы поменять имя страницы, достаточно кликнуть правой кнопкой мыши на название страницы в окне <em>Pages</em>и выбрать пункт<em>Rename</em>.</p>
18
<p>Современные сайты проектируют для разных устройств: смартфонов, планшетов, компьютеров и ноутбуков. У каждого из устройств разное разрешение экрана, поэтому дизайнер обычно рисует несколько макетов одного и того же сайта в разных размерах.</p>
18
<p>Современные сайты проектируют для разных устройств: смартфонов, планшетов, компьютеров и ноутбуков. У каждого из устройств разное разрешение экрана, поэтому дизайнер обычно рисует несколько макетов одного и того же сайта в разных размерах.</p>
19
<p>Для простоты мы создадим прототип для экрана шириной 1 140 пикселей и больше. Чтобы все элементы будущего сайта выглядели лаконично и ровно, при проектировании мы используем сетку из CSS-фреймворка<em>Bootstrap 4.</em></p>
19
<p>Для простоты мы создадим прототип для экрана шириной 1 140 пикселей и больше. Чтобы все элементы будущего сайта выглядели лаконично и ровно, при проектировании мы используем сетку из CSS-фреймворка<em>Bootstrap 4.</em></p>
20
<p>Зададим вручную нужную ширину экрана с помощью направляющей: её можно вытащить из линейки справа от рабочей области. Работает это так же, как и в <em>Photoshop</em>.</p>
20
<p>Зададим вручную нужную ширину экрана с помощью направляющей: её можно вытащить из линейки справа от рабочей области. Работает это так же, как и в <em>Photoshop</em>.</p>
21
-
<p>Чтобы сэкономить время и не задавать вручную все направляющие для макета, создадим их автоматически: выбираем пункт меню<em><strong>Arrange → Grid and Guides → Create Guides</strong></em>. В появившемся окне задаём размеры.</p>
21
+
<p>Чтобы сэкономить время и не задавать вручную все направляющие для макета, создад��м их автоматически: выбираем пункт меню<em><strong>Arrange → Grid and Guides → Create Guides</strong></em>. В появившемся окне задаём размеры.</p>
22
<p>В результате получаем сетку для нужной ширины экрана, по которой удобно выравнивать контент.</p>
22
<p>В результате получаем сетку для нужной ширины экрана, по которой удобно выравнивать контент.</p>
23
<p>После того как мы задали сетку, переходим к созданию прототипа. Для этого используют элементы из библиотеки<em>(окно Libraries).</em></p>
23
<p>После того как мы задали сетку, переходим к созданию прототипа. Для этого используют элементы из библиотеки<em>(окно Libraries).</em></p>
24
ЭЛЕМЕНТНАЗНАЧЕНИЕBoxДля структурных блоков сайтаEllipseИконки, изображенияImage и PlaceholderИзображенияButtonКнопкиHeading, Label и ParagraphЗаголовки, основной текст, надписиHorizontal и Vertical LineЛинии, стрелки, указатели и другие элементыFormsСоздание форм<p>Чтобы использовать элемент, перетащите его из окна библиотек на рабочую область.</p>
24
ЭЛЕМЕНТНАЗНАЧЕНИЕBoxДля структурных блоков сайтаEllipseИконки, изображенияImage и PlaceholderИзображенияButtonКнопкиHeading, Label и ParagraphЗаголовки, основной текст, надписиHorizontal и Vertical LineЛинии, стрелки, указатели и другие элементыFormsСоздание форм<p>Чтобы использовать элемент, перетащите его из окна библиотек на рабочую область.</p>
25
<p>Шапка - это самый верхний блок сайта, где обычно размещают логотип компании, телефоны и меню сайта. В списке элементов выбираем<strong><em>Box 1</em></strong>, перетягиваем его на рабочую область и задаём нужный размер.</p>
25
<p>Шапка - это самый верхний блок сайта, где обычно размещают логотип компании, телефоны и меню сайта. В списке элементов выбираем<strong><em>Box 1</em></strong>, перетягиваем его на рабочую область и задаём нужный размер.</p>
26
<p>Мы задали размеры шапки, теперь разместим логотип, телефонный номер и меню. Логотип условно обозначим более тёмным прямоугольником<strong><em>Box 2</em></strong>.</p>
26
<p>Мы задали размеры шапки, теперь разместим логотип, телефонный номер и меню. Логотип условно обозначим более тёмным прямоугольником<strong><em>Box 2</em></strong>.</p>
27
<p>Телефон компании пишем, используя элемент<strong><em>Header 3</em></strong>, а кнопку с вызовом формы обратной связи указываем с помощью уже готового<strong><em>Button</em></strong>.</p>
27
<p>Телефон компании пишем, используя элемент<strong><em>Header 3</em></strong>, а кнопку с вызовом формы обратной связи указываем с помощью уже готового<strong><em>Button</em></strong>.</p>
28
<p>С помощью текстового элемента<strong><em>Paragraph</em></strong>создаём и заполняем область меню.</p>
28
<p>С помощью текстового элемента<strong><em>Paragraph</em></strong>создаём и заполняем область меню.</p>
29
<p>В прототипах с большим количеством страниц пользоваться такой шапкой неудобно. Для каждой новой страницы её нужно будет или рисовать с нуля, или копировать с предыдущей. А если потребуется внести изменения, то придётся редактировать шапку на каждой странице отдельно. Чтобы избежать этого, проектировщики используют панель<em>Masters</em>в правом нижнем углу.</p>
29
<p>В прототипах с большим количеством страниц пользоваться такой шапкой неудобно. Для каждой новой страницы её нужно будет или рисовать с нуля, или копировать с предыдущей. А если потребуется внести изменения, то придётся редактировать шапку на каждой странице отдельно. Чтобы избежать этого, проектировщики используют панель<em>Masters</em>в правом нижнем углу.</p>
30
<p><strong>Мастер</strong> - это специальный виджет, который применяют к нескольким страницам, но содержание редактируется один раз. Подходит для создания шапки сайта, подвала, формы заказа, меню и других повторяющихся элементов. Шапку, которую мы создали, можно конвертировать в мастер. Так её легче добавлять на другие страницы и редактировать содержимое с помощью одного клика.</p>
30
<p><strong>Мастер</strong> - это специальный виджет, который применяют к нескольким страницам, но содержание редактируется один раз. Подходит для создания шапки сайта, подвала, формы заказа, меню и других повторяющихся элементов. Шапку, которую мы создали, можно конвертировать в мастер. Так её легче добавлять на другие страницы и редактировать содержимое с помощью одного клика.</p>
31
<p>Выделяем шапку сайта, нажимаем правую кнопку мыши, в появившемся окне выбираем<em>Convert to Master<strong>.</strong></em></p>
31
<p>Выделяем шапку сайта, нажимаем правую кнопку мыши, в появившемся окне выбираем<em>Convert to Master<strong>.</strong></em></p>
32
Созданные виджет появляется на панели Masters.<p>Чтобы добавить шапку на новую страницу, перетащите на неё виджет.</p>
32
Созданные виджет появляется на панели Masters.<p>Чтобы добавить шапку на новую страницу, перетащите на неё виджет.</p>
33
<p>Основные блоки создаются с помощью базовых элементов. На первом экране разместим заголовок, призыв к действию, кнопку и изображение.</p>
33
<p>Основные блоки создаются с помощью базовых элементов. На первом экране разместим заголовок, призыв к действию, кнопку и изображение.</p>
34
<p>Следующий экран - это блок с преимуществами товара. Покажем фотографию и расскажем, в чём отличие от конкурентов. Изображение условно обозначим с помощью элемента<em>Placeholder</em>, а для иконок используем<em>Ellipse</em>.</p>
34
<p>Следующий экран - это блок с преимуществами товара. Покажем фотографию и расскажем, в чём отличие от конкурентов. Изображение условно обозначим с помощью элемента<em>Placeholder</em>, а для иконок используем<em>Ellipse</em>.</p>
35
<p>Чтобы показать работы компании, используем слайдер. Элементы управления легко создать с помощью горизонтальных линий. Перетягиваем<em>Horizontal Line</em>на макет, кликаем на серый круг около линии и выбираем внешний вид.</p>
35
<p>Чтобы показать работы компании, используем слайдер. Элементы управления легко создать с помощью горизонтальных линий. Перетягиваем<em>Horizontal Line</em>на макет, кликаем на серый круг около линии и выбираем внешний вид.</p>
36
<p>Отзывы о компании удобно разместить в виде карточек.</p>
36
<p>Отзывы о компании удобно разместить в виде карточек.</p>
37
<p>В Axure любой элемент прототипа может быть триггером для действий, так мы присвоим объекту определённую логику поведения. Это помогает смоделировать работу сайта.</p>
37
<p>В Axure любой элемент прототипа может быть триггером для действий, так мы присвоим объекту определённую логику поведения. Это помогает смоделировать работу сайта.</p>
38
<p>Рассмотрим, как сделать в прототипе кликабельное меню, чтобы перемещаться по сайту с помощью ссылок в шапке сайта. Для этого кликаем на раздел "Блог" и в свойствах элемента<em>(Properties)</em>выбираем действие<em>OnClick</em>.</p>
38
<p>Рассмотрим, как сделать в прототипе кликабельное меню, чтобы перемещаться по сайту с помощью ссылок в шапке сайта. Для этого кликаем на раздел "Блог" и в свойствах элемента<em>(Properties)</em>выбираем действие<em>OnClick</em>.</p>
39
<p>Триггер<em>OnClick</em>срабатывает при клике мыши по элементу, что прекрасно подходит для создания ссылок. Сделаем так, чтобы при клике в этом же окне открывался раздел с блогом.</p>
39
<p>Триггер<em>OnClick</em>срабатывает при клике мыши по элементу, что прекрасно подходит для создания ссылок. Сделаем так, чтобы при клике в этом же окне открывался раздел с блогом.</p>
40
<p>Для этого выбираем<em>Open Link ("Открывать ссылку") → Current Window ("В текущем окне") → Блог (какую страницу открывать)</em>. Весь процесс настройки:</p>
40
<p>Для этого выбираем<em>Open Link ("Открывать ссылку") → Current Window ("В текущем окне") → Блог (какую страницу открывать)</em>. Весь процесс настройки:</p>
41
<p>Готовый прототип можно сразу открыть в браузере, поделиться через серверы Axure или экспортировать как HTML.</p>
41
<p>Готовый прототип можно сразу открыть в браузере, поделиться через серверы Axure или экспортировать как HTML.</p>
42
<p>Посмотрите, как выглядит и работает прототип в браузере с помощью<em>Preview</em>.</p>
42
<p>Посмотрите, как выглядит и работает прототип в браузере с помощью<em>Preview</em>.</p>
43
<p>Вот пример из <em>Axure</em>в<em>Google Chrome.</em>Панель навигации справа показывает структуру сайта и при необходимости позволяет оставить комментарии.</p>
43
<p>Вот пример из <em>Axure</em>в<em>Google Chrome.</em>Панель навигации справа показывает структуру сайта и при необходимости позволяет оставить комментарии.</p>
44
<p>Готовый прототип легко опубликовать на сервере Axure, а затем просто дать ссылку заказчику. Также можно сгенерировать HTML-файлы и использовать их локально или на своём сайте.</p>
44
<p>Готовый прототип легко опубликовать на сервере Axure, а затем просто дать ссылку заказчику. Также можно сгенерировать HTML-файлы и использовать их локально или на своём сайте.</p>
45
<p>Нажимаем кнопку<em>Publish</em>в правом верхнем углу и выбираем<em>Publish to Axure</em><em>Share</em>, если нужно опубликовать прототип, или<em>Generate HTML Files</em>, если нужно скачать его на компьютер.</p>
45
<p>Нажимаем кнопку<em>Publish</em>в правом верхнем углу и выбираем<em>Publish to Axure</em><em>Share</em>, если нужно опубликовать прототип, или<em>Generate HTML Files</em>, если нужно скачать его на компьютер.</p>
46
<p>Освоить базовые функции Axure довольно просто. Поэтому программой пользуются не только UX-дизайнеры, но и менеджеры проектов, маркетологи, копирайтеры. Это экономит время и ресурсы.</p>
46
<p>Освоить базовые функции Axure довольно просто. Поэтому программой пользуются не только UX-дизайнеры, но и менеджеры проектов, маркетологи, копирайтеры. Это экономит время и ресурсы.</p>
47
<p>Например, менеджер рисует прототип при общении с заказчиком и передаёт дизайнеру уже чёткое руководство, как и что необходимо делать, сокращая количество итераций правок.</p>
47
<p>Например, менеджер рисует прототип при общении с заказчиком и передаёт дизайнеру уже чёткое руководство, как и что необходимо делать, сокращая количество итераций правок.</p>
48
<p>Кроме базовых функций в Axure реализуют сложные взаимодействия, всплывающие окна, адаптивные прототипы. Обычно этими функциями пользуются UX-дизайнеры на сложных и объёмных проектах.</p>
48
<p>Кроме базовых функций в Axure реализуют сложные взаимодействия, всплывающие окна, адаптивные прототипы. Обычно этими функциями пользуются UX-дизайнеры на сложных и объёмных проектах.</p>
49
<p>Стать UX-дизайнером и научиться работать с прототипами, создавать понятную структуру сайта, понимать пользователей, придумывать доступные и понятные решения можно на курсе "<a>UX-дизайн</a>" от онлайн-университета Skillbox.</p>
49
<p>Стать UX-дизайнером и научиться работать с прототипами, создавать понятную структуру сайта, понимать пользователей, придумывать доступные и понятные решения можно на курсе "<a>UX-дизайн</a>" от онлайн-университета Skillbox.</p>
50
<a>Научитесь: Веб-дизайн 3.0 Узнать больше</a>
50
<a>Научитесь: Веб-дизайн 3.0 Узнать больше</a>