Советы по дизайну, советы и методы Adobe

01 из 07

Советы по дизайну, советы и методы Adobe

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

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

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

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

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

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

02 из 07

Создание целевого контакта с простым кругом в дизайне Adobe Experience

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

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

03 из 07

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

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

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

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

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

04 из 07

Создайте Scrim в Adobe Experience Design

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

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

05 из 07

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

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

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

06 из 07

Play With Adobe Experience Design Artboards

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

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

07 из 07

Редактирование набора мобильных пользовательских интерфейсов в Adobe Experience Design

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

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