Уловки, советы и методы Adobe Experience Design

Уловки, советы и методы Adobe Experience Design

Когда Adobe представила Experience Design в качестве публичного предварительного просмотра, компания совершила два довольно удивительных подвига одновременно. Во-первых, они заняли место на развивающемся рынке программного обеспечения для создания прототипов. Во-вторых, они создали возможность для пользователей поиграть с «незавершенным производством» и позволяют пользователям влиять на этот прогресс. Теперь, когда приложение было доступно в течение нескольких месяцев, мы подумали, что сейчас самое время поделиться некоторыми хитростями, советами и техниками Experience Design.

Но сначала вам может быть интересно, что подразумевается под Prototyping Software. Среди основных игроков в этом пространстве – Proto.io, Principle, UXPin, Atomic.io, Experience Design и InVision. В отличие от таких приложений, как Sketch 3, Photoshop и Illustrator, в которых создаются статические рисунки, эти графические редакторы предоставляют интерактивность, движение и другие функции, характерные для современного мобильного и веб-дизайна.

С появлением мобильной и неизбежной, лазерной фокусировки на Пользователе, дизайнеру уже не достаточно набросать несколько набросков, собрать несколько композиций, а затем выпустить проект или загрузить его на веб-сервер. Рабочий процесс UI/UX в корне изменил ситуацию. Каждый шаг процесса, от идентификации пользователя, эскизов, каркасов, макетов и прототипов, теперь подвергается обширному пользовательскому тестированию.

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

Фактически, это программное обеспечение стало ключевым компонентом в современной среде проектирования и разработки «Быстрое прототипирование».

С учетом сказанного, давайте повеселимся с Experience Design.

Создание булавки назначения с простым кружком в Adobe Experience Design

Одним из интересных аспектов XD является использование инструментов векторного рисования. Не можете найти значок? Нет проблем. Катайся сам. Вот как:

1. Выберите Инструмент эллипса и, нажав клавиши Option/Alt-Shift, нарисуйте круг.
2. Выделив круг, установите для Цвет заливки значение FF0000 , а для границы – «Нет» в свойствах.
3. Дважды щелкните по кругу, чтобы показать точки привязки. Перетащите нижний якорь вниз.
4. Дважды щелкните выбранную опорную точку , и кривые будут заменены линиями.
5. Нарисуйте еще один маленький круг с белой заливкой и без обводки. Переместите это в положение и выберите булавку и круг. На панели «Выравнивание» в верхней части окна «Свойства» нажмите кнопку Центр по горизонтали , и PIN-код будет создан.

Создайте размытие фона в Adobe Experience Design

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

1. Создайте новый артборд и добавьте фоновое изображение.
2. Выберите Rectangle Tool a и нарисуйте прямоугольник над изображением. Выделив прямоугольник, установите для параметра «Заливка» значение Белый , а для обводки – Нет .
3. Выделив прямоугольник, выберите Размытие фона на панели свойств. Три ползунка: Размытость, Яркость и Непрозрачность. Вот что они делают:

• Количество размытия . Регулирует размытость изображения под формой. Максимальное значение +50.
• Яркость . Регулировка яркости и теней на изображении. Минимальное значение равно -50, а максимальное значение +50.
• Непрозрачность . Влияет на прозрачность фигуры и видимость изображения под ней. Значения находятся в диапазоне от 0% до 100%.

Если вы действительно хотите «изменить положение вещей», измените цвет фигуры и поиграйте со значением «Непрозрачность», чтобы изменить «внешний вид» изображения.

Создать Scrim в Adobe Experience Design

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

1. Создайте свой артборд в XD, добавьте изображение, скопируйте и вставьте элементы интерфейса из соответствующего набора пользовательского интерфейса – Файл> Открыть набор пользовательского интерфейса … – в монтажную панель. На изображении выше видно, что строку состояния и панель приложения трудно увидеть.
2. Выберите инструмент “Прямоугольник” и нарисуйте прямоугольник. На панели свойств выберите «Заливка» и выберите «Градиент» в раскрывающемся списке палитры цветов. Установите цвета градиента на Черно-белый . Установите значение A – Непрозрачность – до 60% , а значение Белый A – до 0%.
3. Выделив прямоугольник, выберите Объект> Упорядочить> Отправить назад . Элементы интерфейса теперь видны над изображением.

Создание аватара изображения в Adobe Experience Design

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

1. Вы начинаете с изображения и круга или другой формы на артборде. Вы можете заполнить круг любым цветом. Вам не нужно добавлять цвет обводки. Он исчезнет, ​​когда вы создадите эффект, так зачем? Если вам нужно обвести круг, скопируйте его в буфер обмена.
2. Переместите круг на изображение и выберите изображение и круг. Выбрав оба объекта, выберите Объект> Маска с формой . Когда вы отпустите кнопку мыши, аватар будет создан. Оттуда вы можете изменить его размер.
3. Если вам нужно добавить обводку, вставьте кружок, сидящий в буфере обмена, в монтажную область. С выбранной копией отключите заливку в Свойствах и добавьте цвет обводки и ширину. Чтобы выстроить их в ряд, выберите оба объекта и нажмите кнопки «Выровнять по центру» в параметрах «Выравнивание» в верхней части панели свойств.
4. Если вы хотите переместить фотографию в маске, дважды щелкните маску. Это покажет изображение и форму маски. Нажмите на изображение и перетащите его на место. Когда вы отпустите кнопку мыши, изображение будет в новой позиции внутри маски.

Играйте с Adobe Experience Design Artboards

Артборды Experience Design предназначены не только для размещения контента. Им тоже можно манипулировать. Вот несколько вещей, которые вы можете сделать:

1. Если вам нужны альбомная и альбомная версии артборда, продублируйте артборд и, выбрав его, нажмите кнопку ландшафт на панели Свойства . Артборд изменится на альбомную ориентацию. Если в артборде есть контент, нажмите имя артборда , и свойства артборда появятся на панели свойств.
2. Чтобы добавить собственный цвет в артборд и проект по этому вопросу, выберите артборд и нажмите Цветовой чип заливки в разделе Внешний вид в разделе Свойства Панель. Введите шестнадцатеричное значение для цвета и нажмите знак + . Цвет будет добавлен как пользовательский цвет. Чтобы применить этот цвет в другом месте, выберите объект и нажмите чип Пользовательский цвет , чтобы применить цвет.
3. Артборды могут быть выполнены с вертикальной прокруткой. Для этого выберите артборд и измените его высоту на панелях Свойства или перетащите нижнюю часть артборда вниз. В области прокрутки на панели свойств выберите вертикальный в раскрывающемся меню и введите высоту области просмотра для экрана. Эта пунктирная синяя линия показывает нижнюю часть области просмотра. Чтобы проверить это, нажмите кнопку Воспроизвести и прокрутите страницу. Чтобы отключить прокрутку, выберите Нет в раскрывающемся меню «Прокрутка».

Отредактируйте комплект мобильного интерфейса в Adobe Experience Design

Experience Design содержит набор пользовательского интерфейса для разработки интерфейсов iOS, Android и Windows. Когда вы впервые открываете их, вы можете подумать, что они довольно хорошо установлены. Не совсем – каждая деталь в этих наборах полностью редактируема. Давайте выясним это, построив каркас Android.

1. Для начала выберите инструмент Artboard и выберите Android Mobile в разделе Google на Панели свойств .
2. Выберите Файл> Открыть набор интерфейсов> Материал Google . Откроется набор пользовательского интерфейса Material Design.Выберите увеличительное стекло и выделите артборд Направляющие экрана . Нам нравится начинать с этого, потому что он дает нам инструкции для правильного размещения элементов интерфейса на экране. Если вы нажмете на одну из синих полосок, вы увидите, что она заблокирована. Нажмите замок , прикрепленный к каждому из них, чтобы разблокировать его. Выделите монтажную область и скопируйте выделение в буфер обмена. Вернитесь к документу и вставьте экран в артборд.
3. Нажмите один раз на панель Приложение в верхней части артборда. Обратите внимание, как вы можете выбрать его. Выберите Объект> Упорядочить> Переместить на передний план. Теперь ваш выбор находится над направляющими экрана. Это должно сказать вам, что каждый из элементов на экране можно редактировать.
4. Дважды нажмите Строка состояния вверху и на панели свойств установите для Цвет заливки значение 455A64 . Дважды щелкните панель приложения и установите ее заполнение на 607D8B. Это должно сказать вам, что каждый элемент в наборе пользовательского интерфейса может быть отредактирован в соответствии с цветовыми спецификациями проекта.
5. А как насчет иконок? Вот как можно изменить их цвет. Дважды нажмите на сердце , чтобы выбрать его. Если вы посмотрите на панель свойств, вы можете предположить, что не можете изменить выбор. Не совсем. Дважды нажмите сердце еще раз. Свойства откроются, и вы измените цвет заливки на FF0000. Повторите этот трюк двойного двойного щелчка для оставшихся значков и текста.