Как начать работу с UXPin
Когда мы переходим в сферу мобильного дизайна, дизайна приложений и гибкого дизайна, все больше внимания уделяется UX (User Experience) и wireframing, интерактивным прототипированию и макетам. Есть тонна инструментов, направленных на эту нишу, и они управляют полной гаммой от сложных, богатых героев бегемотов до редких и едва полезных. Одним из инструментов, которые попались мне на глаза, является UXPin просто потому, что он был разработан дизайнерами для дизайнеров.
Прежде чем двигаться дальше … предостережение. Если ваша организация - это организация, которая предпочитает владеть программным обеспечением, то UXPin не для вас. Вся работа, выполненная в этом приложении, выполняется в браузере, а сохраненные вами проекты сохраняются в вашей учетной записи.
Чтобы начать работу с UXPin, вы запускаете браузер и отправляетесь в UXPin. Отсюда вы можете подписаться на бесплатную пробную версию или договориться о ежемесячном плане, исходя из ожидаемой потребности. Процесс регистрации довольно прост, и после того, как вы установили свое имя пользователя и пароль, вы готовы начать работу.
Как начать проект в UXPin
Когда вы входите в систему, вы попадаете на панель мониторинга, и здесь вы можете создать новый каркас, новый мобильный проект или проект адаптивного веб-дизайна. Существуют также плагины для UXPin, которые позволят вам принести проекты Photoshop или Sketch. Для этого Как я собираюсь создать баннер с некоторым текстом и добавить кнопку сообщения на баннер. Для этого я выбрал Создать новый каркас.
Как использовать интерфейс UXPin
Проектная поверхность разбита на четыре области. В черной области слева есть ряд инструментов, которые позволяют вернуться на панель инструментов, открыть элементы, которые вы будете использовать, открыть панель «Смарт-элементы», найти элементы, добавить заметки на страницу и добавить членов команды. В нижней части находится кнопка, которая открывает короткий учебник, другой, который позволяет вам получить доступ к вашей учетной записи, а другой, который обращается к часто задаваемым вопросам, давайте зададим вопросы и даже обеспечим обратную связь.
В синей области вверху находятся ряд инструментов и свойств. Более темные кнопки с правой стороны позволяют выполнять итерацию вашего проекта, настраивать параметры проекта, обмениваться страницей и выполнять симуляцию страницы в браузере.
Панель «Элементы» - это место, где вы захватываете кусочки для поверхности дизайна, называете свой проект и добавляете или удаляете страницы.
Библиотека Elements является приятным сюрпризом для дизайнеров UX. Этот всплывающий экран позволяет вам выбирать из anon 30 библиотек от iOS до Android Lolipop. Также у вас есть доступ к элементам Bootstrap и Foundation, а также значки шрифта Awesome, значки жестов для мобильных устройств и коллекция социальных виджетов.
04 из 09Как добавить элемент на страницу UXPin
Чтобы начать работу, я перетащил элемент Box на поверхность дизайна, и, когда я отпустил мышь, Панель свойств открывается. Кнопка «Свойства» позволяет вам указать элемент и установить значения высоты и позиции ширины элемента. Вы также можете добавить дополнение к элементу, закруглить углы и отрегулировать его непрозрачность. При нажатии кнопки «Цвет фона» открывается выбор цвета RGBA.
Вы также можете назначить шрифт, границу и шаблон выбранному элементу. Молниеносный болт дает вам возможность добавлять интерактивность к выбранному элементу.
05 из 09Как добавить и форматировать текст в UXPin
Чтобы добавить текст, перетащите текстовый элемент на поверхность дизайна и введите текст. Щелкните текстовое свойство чтобы открыть свойства шрифта и отформатировать текст. Если вам нужен блок фиктивного текста, добавьте текстовый элемент и нажмите Генерал ЛОРЕМ IPSUM в свойствах шрифта.
06 из 09Как добавить изображение на страницу UXPin
Есть несколько способов выполнить эту задачу. Вы можете использовать Инструмент изображения на панели инструментов добавьте элемент изображения из библиотеки или просто перетащите изображение со своего рабочего стола на элемент на поверхности дизайна, как показано выше.
07 из 09Как добавить кнопку на страницу UXPin
Хотя есть элемент Button, вводя " кнопка "В Поиск область, как показано выше, открывает все кнопки, найденные во всех библиотеках. Перетащите ту, которая работает для вас на поверхность дизайна, и используйте Свойства, чтобы изменить цвет, шрифт и даже радиус границы. Чтобы изменить текст внутри кнопки, нажмите один раз на текст и введите новый текст.
08 из 09Как добавить интерактивность на страницу UXPin
Это не так сложно, как может показаться на первый взгляд. Для ввода электронной почты я добавил элемент ввода, изменил его размер, ввел текст и отформатировал текст. При выборе элемента Input нажмите кнопку «Свойства» и, когда Свойства элемента нажмите видимость кнопка - глазное яблоко - в верхнем правом углу панели.
Выберите кнопку и нажмите Кнопка взаимодействия - Молния в свойствах. Когда откроется панель «Взаимодействия», выберите «Новое взаимодействие». Выберите «Щелчок» по кнопке «Триггер». В области «Действие» выберите «Показать элемент». Теперь вам будет задан вопрос, какой элемент будет показан. Нажмите один раз на пистолет и нажмите на элемент ввода. С идентифицированным элементом теперь вы можете определить, нужно ли анимировать элемент. В этом случае я решил показать поле ввода с легкостью и пошел с значением продолжительности по умолчанию 300 мс.
Я также хочу, чтобы кнопка двигалась около 65 пикселей вправо при нажатии. Я выбрал кнопку, открыл панель «Взаимодействия» и выбрал Новое взаимодействие, Я использовал эти настройки:
- Спусковой крючок: Нажмите
- Действие: Перемещение по
- Переместить направление: 65 px по оси x
- Анимация: Линейный
- Продолжительность: 300 мс
Чтобы удалить взаимодействие, выберите элемент и откройте панель «Взаимодействия». Выберите взаимодействие на панели и нажмите «Корзина», чтобы удалить его.
09 из 09Как проверить свою страницу в UXPin
Из-за того, что вы работаете в браузере, тестирование прост. Нажмите Моделирование дизайна кнопка. Страница откроется в браузере, и вы сможете проверить способ. Также будет добавлена панель в левой части страницы, которая позволяет получать комментарии, карту сайта, если есть несколько страниц, тестирование удобства использования, совместное использование в реальном времени, редактирование и возврат к панели мониторинга.
В нижней части страницы находится еще одна небольшая панель, которая позволяет отображать интерактивные элементы, показывать или скрывать комментарии и совместно использовать ссылку проекта другим.
