10 советов по работе с Auto-Layout в Figma

Аудио перевод статьи

Продвинутые функции auto-layout в Figma

По ссылке в сообществе Figma находятся примеры, которые будут упомянуты в статье.

1. Горячие клавиши auto layout

Чем чаще вы будете использовать горячие клавиши auto layout, тем быстрее их применение войдет у вас в привычку.

Представляем вам следующие комбинации клавиш для auto layout с целью ускорения рабочего процесса:

• SHIFT + A = добавить auto layout
• SHIFT + ALT + A = превратить auto layout обратно во фрейм
• CMD/CTRL + SHIFT + G = удалить auto layout
• CMD/CTRL + D = дублировать элементы в auto layout

2. Копируйте свойства и стиль auto layout

Экономьте время с помощью горячих клавиш:

• OPTION + CMD / CTRL + C — копировать стиль auto layout
• OPTION + CMD / CTRL + V — вставить стиль auto layout

3.

С легкостью меняйте порядок объектов

Изменить порядок объектов внутри auto layout можно с помощью клавиш-скобок:

• CMD/CTRL + ] = передвинуть элемент вправо или вниз
• CMD/CTRL + [ = передвинуть элемент влево или вверх

4. Сделайте слайдер с помощью auto layout

Как это работает:

Очистите значение “spacing between items”

1. Выберите темно-синюю линию между ползунками
2. Меняйте значение “space between items” для auto layout, чтобы посмотреть, как это работает
3. Вы также можете очистить значение “space between items” путем его перетаскивания вправо или влево

Посмотрите обучающее видео на YouTube

С помощью auto layout и значения  “spacing between items”, довольно легко создать регулируемый компонент ползунка для диапазона значений, количества или индикатора выполнения. Выше указана ссылка на обучающее видео, чтобы можно было лучше понять, как это сделать.

5. Сэкономьте время с помощью слова “auto”

Попробуйте сами: напечатайте слово “auto” вместо цифры в поле “spacing between items”, а затем потяните контейнер вправо, и вы увидите, что элементы адаптируются под заданную ширину

Оптимизируйте свой рабочий процесс: напечатайте слово “auto” в поле “spacing between items”.

6. Выравнивайте элементы за пределами auto layout с помощью указания нулевого значения высоты фрейма

Rogie King объясняет этот хитрый трюк в своем обучающем видео на YouTube. Создайте фрейм, поместите объекты внутрь фрейма. Расположите фрейм внутрь контейнера auto layout, выберите параметр “fill container”, а затем задайте  высоту фрейма, равную 0,001 (она округлится до 0). 

Этот совет позволяет размещать объекты за пределами auto layout, что, как правило, невозможно, потому что Figma не допускает отрицательных значений.

7. С легкостью работайте с элементами в пределах auto layout

Попробуйте сами: выделяйте любые нужные элементы внутри auto layout

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

• ENTER/RETURN = выделить дочерний элемент фрейма
• SHIFT + ENTER/RETURN = выделить весь фрейм
• TAB = переход между дочерними элементами после того, как первый элемент был выделен в auto layout
• ESC = сбросить выделение элементов

8. Располагайте объекты внутри auto layout на свое усмотрение

Попробуйте сами: перетащите счетчик уведомлений внутрь фрейма, при этом удерживайте пробел нажатым

Удерживайте ПРОБЕЛ при размещении объекта внутри auto layout, чтобы расположить его так, как вам нужно, и избежать его автоматического размещения.

9. Сохраняйте расположение элемента по центру с помощью заголовка

Элемент всегда будет находиться в центре, если добавить третий прозрачный контейнер и использовать параметр Space Between

Если в составе контейнера auto layout есть заголовок, и нам нужно, чтобы объект оставался в центре, есть небольшая хитрость, как можно это осуществить:

1. Сделайте копию заголовка
2. Установите прозрачность второго заголовка равной 0%
3. Используйте CMD + [, чтобы переместить прозрачный заголовок вниз
4. Установите для всего контейнера значение Space Between

10.

Зафиксируйте минимальную ширину/высоту фрейма

Как это работает: Для того, чтобы минимальная длина контейнера auto layout оставалась фиксированной и не уменьшалась, если текст недостаточно длинный, нужно:  добавить в auto layout прозрачный фрейм с фиксированной минимальной длиной, далее для контейнера auto layout следует установить параметр “hug contents”.

Rogie King использует тот же трюк, что и в 6 рекомендации. Он размещает внутри контейнера auto layout фрейм с фиксированной минимальной шириной и задает ему значение высоты, равное 0. Таким образом, можно зафиксировать минимальную ширину (или длину) контейнера auto layout, чтобы он не становился меньше, если текст недостаточно длинный.

Посмотрите видео Rogie на YouTube

11. Бонус! Посмотрите продвинутое обучающее видео об auto layout

Посмотрите обучающее видео, чтобы узнать, как создавать полностью гибкие и адаптируемые интерфейсы с помощью auto layout.

Посмотреть обучающее видео на YouTube

IYKYK

Советы по функции Auto Layout в Figma

Я работал над рядом особенностей последнего обновления Figma

Я один из тех людей, которые за лето переключились со Sketch на Figma. Примерно через неделю после перехода и преобразования компонентов, Sketch незаметно выпустил функцию Smart Layout. Я корил себя. Наша компания, GatherContent, была на полпути к созданию дизайн-системы и мы переключились на Figma, чтобы извлечь максимальную пользу из среды совместной работы. Но тут Sketch выпустил новую функцию и заставил нас переоценить свое решение. Тем не менее, мы продолжили создавать дизайн-систему в Figma, периодически оглядываясь назад, чтобы увидеть забавные изменения, происходящие в Sketch.

А потом… Figma анонсировала функцию Auto Layout, и недавно наконец выпустила ее! Ура! Хотя она не лишена недостатков, я потратил пару дней на ее освоение. Я подумал, что вам будет интересно, если я поделюсь рядом изученных приемов.

Это должно быть особенно полезно для тех, кто управляет дизайн-системой, поскольку это может повлиять на Auto Layout компонентов каскадирования. Эта статья предполагает умеренный уровень знаний Figma и компонентов.

Преобразование Auto Layout

По большей части функция Auto Layout довольно проста в использовании, но вы можете устроить беспорядок, если не будете осторожны.

Поведение контейнера

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

На самом деле это простое, но умное решение от Figma. Давайте посмотрим, что произойдет, если вы включите Auto Layout для базового прямоугольника и компонента текстового слоя без преобразования …

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

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

Кнопки с иконками

Как только вы освоите описанный выше прием, то добавление дополнительных элементов в компонент с включенной функцией Auto Layout не вызовет проблем. Давайте посмотрим на кнопку с иконкой.

Конструкция и настройки простой кнопки с иконкой

Как мы узнали выше, сам фрейм компонента обрабатывает синий контейнер, поэтому все, что у нас есть внутри, это слои иконки и текста. Внутренний отступ устанавливается с помощью настроек справа. В нашем случае это отступ 18px слева и справа, и 9px сверху и снизу. Пространство между иконкой и текстом установлено на 8px.

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

В нашей дизайн-системе все иконки заключены в контейнер. В частности, иконки 16px находятся внутри контейнера 24px. Для этого есть две основные причины. Во-первых, это позволяет нам полностью контролировать иконки по вертикали и горизонтали. Вы когда-нибудь использовали треугольную иконку, и она не выглядела достаточно выровненной? Во-вторых, это заставляет нас учитывать область нажатия кнопок при проектировании новых интерфейсов.

Фрагмент системы сетки, которую мы используем для наших иконок 16px

Это, конечно, создает проблемы с Auto Layout. Функция Auto Layout не учитывает пустое пространство, она учитывает только размер элементов внутри компонента. Однако, это не подходит для тех, кто использует подобную систему.

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

Вложенные компоненты

Это метод позволяет быстро усложнять вещи.

Кроме того, я узнал, насколько быстро могу все испортить, предполагая, что комбинация клавиш Shift+A действует подобно переключателю. Это не так. Неоднократное нажатие на Shift+A приведет вас к бездне ада Auto Layout.

Вам помогут меню параметров и функция «Remove Auto Layout».

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

Структура компонента выпадающего меню

Главный компонент находится слева и содержит то, что мы называем «модулями» (справа). В приведенном выше примере меню состоит только из пунктов меню. Модули чаще всего 30px в высоту, но разделительная линия составляет всего 20px. В прошлом это могло бы привести к хаосу, если поменять местами экземпляры пунктов меню с разделителями, поскольку невозможно было изменить размер, чтобы компенсировать разницу в высоте.

Увы! Больше нет…

Однако для того, чтобы это волшебство случилось, нужно было сделать важный шаг. Поскольку разделительная линия составляет 20px по высоте, а не 30px, мне пришлось включить функцию Auto Layout для этого компонента и установить значения верхнего и нижнего отступов. Это означает, что главный компонент знает значения отступов, которые он должен использовать при замене этого компонента, в противном случае простая замена экземпляра пункта меню на разделитель просто заставит разделитель наследовать высоту 30px.

И поскольку у нас включена функция Auto Layout на главном компоненте, контейнер соответственно изменяет свой размер.

Переопределения на лету

С вложенными компонентами и функцией Auto Layout вы ожидаете, что сможете добавлять элементы, и все они будут органично увеличиваться / уменьшаться, не так ли? Да, но, возможно, не так легко, как вы себе это представляете.

Давайте посмотрим на еще один компонент …

Структура рабочего процесса нашего выпадающего компонента

Опять же, главный компонент слева состоит из экземпляров компонентов модуля (справа). 2 компонента «Completed», 1 компонент «Current», 1 компонент «Future» с экземплярами компонента «Линия разделителя» между ними.

Давайте посмотрим, что произойдет, когда я вставлю экземпляр главного компонента и попытаюсь добавить больше модулей…

К сожалению, компоненты и Auto Layout не так умны, как хотелось бы. Я знаю, что прошу Figma о многом, но надеюсь, что они это исправят. Однако, на данный момент, единственный способ сделать ваши компоненты суперизменчивыми – это отсоединить их от главного компонента.

Я признаю, это кажется неправильным.

Неплохо было бы иметь landing маркеры, чтобы я мог видеть, где мои компоненты появятся, но погодите, улучшения еще впереди. Разумеется, для каждого из этих компонентов модуля, а также для главного компонента, включена функция Auto Layout. Именно эта вложенность позволяет органически изменять размер всего компонента в зависимости от его содержимого, даже когда я изменяю текст слоя описания.

Функция Auto Layout находится в зачаточном состоянии, поэтому в ближайшие дни / недели после написания этой статьи, я ожидаю много изменений в ее поведении. На данный момент, однако, это все, что я могу вам о ней сказать.

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

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

---

Перевод статьи uxdesign.cc

Передовой опыт проектирования | Auto Layout in Figma

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

Auto Layout — одна из самых важных функций Figma, универсальность которой отличает ее от других инструментов дизайна. Короче говоря, он позволяет вам структурировать компоненты и фреймы таким образом, чтобы они могли автоматически увеличиваться, заставляя контейнер адаптироваться к размеру его содержимого, или наоборот.

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

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

Основы

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

Типичным примером является кнопка: рамка с текстом, настолько простым, насколько это возможно. Просто применив Auto Layout, вы уже можете увидеть некоторые вещи, которые мы будем видеть одну за другой, чтобы понять их и адаптировать к тому, что нам нужно.

При применении Auto Layout к компоненту вы сможете переопределить некоторые его значения из экземпляра, но не сможете изменить общую базовую структуру.

Направление

Для начала у нас есть направление. Это означает, как компонент будет расти, когда в нем будет больше или меньше контента. Это может быть вертикально (стрелка, указывающая вниз) или горизонтально (стрелка, указывающая вправо). В нашем первом примере мы установили его горизонтальным. Это означает, что если текст длиннее, то компонент будет растягиваться по горизонтали, чтобы освободить место для содержимого.

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

Одновременно можно установить только одно направление. Чтобы объединить направления, вам нужно будет использовать вложенные макеты, о чем мы поговорим позже.

Padding

Если вы раньше работали с CSS, это может показаться вам знакомым. А если нет, то вы можете понимать отступы как внутренние поля компонента. Когда вы применяете Auto Layout, Figma автоматически добавит отступы к каждой из сторон в зависимости от разделения на рамку контейнера, которое ранее было у элементов. Если вы нажмете на параметры заполнения, вы сможете увидеть примененные значения: Figma рассчитала, что они одинаковы вверх и вниз, влево и вправо. Тем не менее, вы можете изменить их, чтобы все значения отличались друг от друга.

Если все отступы не совпадают, вы увидите текст Mixed . Если вы предпочитаете применять одно и то же значение ко всем сторонам одновременно, вы можете просто ввести нужное число, и отступы будут применены одинаково.

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

Разделение

До сих пор у нас был только один слой внутри рамки, но что произойдет, если у нас будет еще один? Добавив дополнительный элемент, скажем, значок, вы увидите разделение между значком и текстом. Это расстояние не имеет ничего общего с отступом, который мы установили ранее; это значение, которое настраивается независимо. Это расстояние будет одинаковым между всеми элементами. Это означает, что если вы добавите еще один элемент справа, он автоматически сохранит то же расстояние: все слои внутри компонента разделены одинаково.

Разделение очень полезно, когда у нас есть компонент, содержащий несколько слоев, которые должны сохранять одинаковое расстояние друг от друга, чтобы макет не сломался, если вы добавите или удалите элементы. Ярким примером могут быть элементы в списке. При таком разделении, сколько бы элементов у нас ни было, все они всегда будут находиться на одинаковом расстоянии друг от друга. Когда мы добавляем (или удаляем) слой, он будет учитывать эти значения.

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

Это противоположно моему личному предпочтению (ура!). Вы должны иметь в виду, что если вы измените порядок слоев в списке слоев, это также повлияет на элементы на холсте. Таким образом, порядок слоев важен как никогда, и вы должны быть осторожны при использовании Auto Layout.

Вы также можете легко размещать элементы, перетаскивая их прямо на холст.

Распределение

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

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

Выравнивание

Когда мы работаем с Auto Layout, вам придется забыть все, чему вы научились до сих пор. Ну, не все, а кое-что конкретное: элементы не выровнены по отдельности, есть только одна конфигурация, влияющая на них всех одновременно. Это делается из того же раздела, где находятся параметры заполнения.

В этом же поле вы найдете возможные выравнивания, которые определяют, как элементы будут располагаться внутри компонента с помощью Auto Layout. Выравнивание представлено этим… светло-голубым? икона.

В следующем примере мы применили вертикальную автоматическую компоновку. Это означает, что мы сможем центрировать элементы только по горизонтали, потому что у нас применен параметр Hug content . Это то, что мы увидим позже, когда будем говорить о Изменение размера , но в основном это означает, что основной контейнер будет подстраиваться под размер своего содержимого.

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

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

Результат параметров выравнивания в значительной степени зависит от примененных настроек захвата и от распределения по фрейму контейнера.

Изменение размера

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

Давайте посмотрим, как это работает шаг за шагом, используя следующий пример: У нас есть Карточка с изображением, текстом и кнопкой. Там равномерный отступ 24 пикселя, а расстояние между элементами составляет 16 пикселов. Как вы можете видеть на изображении, не все элементы имеют одинаковую ширину и центрированы по горизонтали.

Содержимое объятий

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

Если бы мы добавили больше текста, то контейнер по-прежнему был бы как можно ближе (или обнимал) свое содержимое, сохраняя то же заполнение, которое было определено ранее. Это означает, что именно содержимое будет определять, насколько большим будет контейнер.

То же самое произошло бы, если бы изображения не было. Скрывая этот слой, мы можем видеть, как адаптируется контейнер, уменьшая его размер до того, который нужен видимым элементам.

Фиксированный

Теперь, если мы вручную изменим ширину и высоту контейнера, он перестанет конфигурироваться как Содержимое Hug , вместо него будет Fixed . Или, другими словами, с фиксированной высотой, определяемой главным дизайнером. Итак, теперь сам контейнер будет решать, насколько он будет высоким, а дочерние слои должны будут упорядочиваться в зависимости от параметра изменения размера, примененного каждым из них.

Если помимо всего этого мы еще и кнопку спрячем, например, то весь контейнер останется нетронутым и сохранит свою фиксированную высоту. Это можно легко изменить, перейдя к предыдущим Настройка Hug content , чтобы он снова адаптировался к своему содержимому.

Заполнить контейнер

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

Это конфигурация, которую можно применять слой за слоем внутри одного и того же компонента. С другой стороны, изображение, текст и кнопка могут вести себя по-разному, в зависимости от того, что мы решим (резюмируя: мы могли бы использовать все доступное пространство или фиксированный размер) 9.0003

Например, когда у нас есть два контейнера с фиксированной высотой, один рядом с другим. Заставив текст использовать все возможное доступное пространство (этот слой будет иметь настройку Fill container ), мы могли бы сделать так, чтобы кнопки всегда выравнивались внизу. Текстовый слой нажимает на кнопки (без каламбура) и использует всю возможную высоту.

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

Имейте в виду, что применение Заполнить контейнер приведет к автоматическому изменению ширины или высоты основного контейнера на фиксированное значение.

Ограничения

Параметры Ограничения обычно используются в Figma для определения положения, которое будет иметь объект, в то время как размер контейнера, к которому он принадлежит, изменяется. Таким образом, мы могли бы задать себе такие вопросы, как: должен ли он оставаться в центре или всегда оставаться на одном и том же расстоянии от одной из своих сторон? В контексте Auto Layout эти параметры также будут определять, каким образом компонент или фрейм будет увеличиваться при изменении его содержимого.

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

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

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

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

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

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

Вложенные макеты

До сих пор мы применяли автоматический макет только к одному кадру за раз, даже если мы изменили настройки и для дочерних слоев. Ситуация начинает усложняться (или, лучше сказать, весело?), когда мы также применяем Auto Layout к внутренним рамкам.

Это называется вложенным поведением: когда мы применяем Auto Layout к фрейму, а затем он также применяется к его дочерним элементам. Это дает нам гораздо больше возможностей для игры, чтобы получить более сложные аранжировки, где каждый из элементов будет иметь некоторую независимость от того, как он растет и адаптируется. Пойдем по частям.

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

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

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

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

Продолжайте учиться

И все! Я надеюсь, что прочитав это и увидев несколько примеров, вы лучше поймете, как работает Auto Layout в Figma. Как и во всем, требуется много практики, чтобы начать получать более предсказуемые и контролируемые результаты. И даже в этом случае всегда есть изрядное количество проб и ошибок, прежде чем достичь желаемого результата.

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

• Создавайте динамичные дизайны с помощью автоматического макета
• Детская площадка Figma Auto Layout

Как вам эта статья?

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

Помощь с отзывами

Полное руководство по автоматической компоновке Figma с реальными примерами, советами и рекомендациями

Автоматическая компоновка — ключевая функция Figma, которую легко освоить

Помимо компонентов и свойств компонентов, в Figma auto Функция макета — важная функция Figma, которая помогает нам создавать более точные проекты и работать более эффективно.

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

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

Что такое автоматическая компоновка в Figma?

Автомакет — это функция в Figma, которая позволяет автоматически изменять размер и положение объектов на их холсте.

Каковы преимущества использования автоматической компоновки в Figma?

Автомакет в Figma — это полезный инструмент, который поможет вам быстро расположить объекты на холсте и изменить их размер.

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

Как вы используете автоматическую компоновку в Figma?

Давайте посмотрим, как использовать эту функцию и как она работает.

Как добавить авто раскладку?

Чтобы добавить автоматическую компоновку в Figma, выберите объекты, для которых требуется автоматическая компоновка. Затем нажмите «+» рядом с меткой автомакета в правом меню (меню свойств).

Вы также можете использовать сочетание клавиш Figma shift+A (Mac и Windows).

Горизонтальное направление и вертикальное направление

Вы можете расположить элементы внутри рамки вертикально или горизонтально, нажимая эти кнопки.

Где его можно использовать?

• Выровняйте карты по горизонтали и вертикали.
• Создавайте аватары.
• Упорядочить группы кнопок.

Горизонтальное направление и вертикальное направление

Расстояние между элементами

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

Где вы можете его использовать?

• Установить расстояние между карточками.
• Установите расстояние между текстом и значком внутри кнопки.
• Установка интервала между строками в таблице.

Интервал между элементами

Отступы

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

Если вы хотите установить определенные отступы для каждой стороны, щелкните значок независимого отступа. Это откроет новые входы, где вы можете настроить отступы для определенной стороны.

Прокладка

Выравнивание

Эта опция позволит вам выравнивать объекты внутри автоматического макета. Вы можете установить выравнивание на:

• Верхний левый
• Верхний центр
• Верхний правый
• Центр левый
• Центр центр
• Центр правый
• Нижний центр
• Нижний центр
• Внизу справа

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

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

Автоматическая компоновка Выравнивание

Дополнительные параметры автоматической компоновки

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

Щелкните значок с тремя точками в правом верхнем углу раздела автоматического макета, чтобы открыть дополнительные параметры.

Дополнительные параметры автоматической компоновки

Режим интервала

Этот параметр позволяет установить интервал между элементами. У него есть два варианта:

• Упаковано: Это значение по умолчанию, и, как я объяснил выше, вы можете установить расстояние между элементами, например, расстояние между карточками.
• Пробел между: Он будет использовать все доступное пространство и автоматически вычислит пространство между каждым элементом. Например, вы можете использовать его для расчета пространства внутри нижней строки меню на мобильном телефоне.

Режим интервала

Штрихи

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

Strokes

Canvas stacking

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

Наложение холста

Выравнивание по базовой линии текста

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

Выравнивание базовой линии текста

Вложенный автоматический макет

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

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

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

Кроме того, вы должны создать рамку автоматической компоновки для строки меню, в которой значки и текстовые рамки располагаются горизонтально.

Дважды щелкните или переместите ручку, чтобы изменить размер интервала

Вы можете изменить расстояние между элементами и отступы, выполнив следующие действия:

• Переместите маркер между объектами.
• Дважды щелкните по ручке, и вы можете ввести текст внутри поля ввода, которое откроется.

Дважды щелкните или переместите маркер, чтобы изменить размер интервала

Дополнительные функции, поддерживающие автоматическую компоновку

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

Представьте, что у вас есть карта с тегом. Тег — это отдельный элемент, не имеющий отношения к авторазметке карты. В этом случае автоматический макет не должен влиять на тег.

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

Абсолютное позиционирование

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

Лично я использую его для добавления примечания над рамкой автоматического макета, но не более того.

Игнорировать автоматический макет

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

Вот что делает каждая из этих опций:

• Фиксированная ширина: Рамка автомакета будет иметь фиксированную ширину. Если вы добавите больше элементов, чем размер кадра, они будут вне кадра.
• Содержимое объятия: Размер кадра будет увеличиваться по мере увеличения объектов внутри. Представьте, что у вас есть 3 объекта внутри рамки автоматического макета. Каждый объект в кадре имеет ширину и высоту 100 пикселей, поэтому общий размер составляет 300 пикселей в ширину и 100 пикселей в высоту. Если вы добавите другой объект того же размера, рамка увеличится до 400 пикселей в ширину и 100 пикселей в высоту.
• Заполнить контейнер: С помощью этого параметра можно заполнить все пространство, существующее в кадре, но этот параметр недоступен при применении автоматического макета. Если вы хотите заполнить контейнер таким же эффектом, вы должны выбрать его в дополнительных параметрах (я объяснил, как это сделать выше).

Изменение размера по горизонтали и вертикали

Примеры создания некоторых компонентов с автоматической компоновкой

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

Как сделать кнопку автоматической компоновки в Figma?

• Создайте монтажную область шириной 120 пикселей, высотой 48 пикселей и радиусом 8 пикселей.
• Создайте текстовый слой с текстом «Создать».
• Добавить значок плюса.
• Поместите текст и значок внутри монтажной области.
• Выберите монтажную область и нажмите «Добавить автоматический макет».
• Добавьте отступ 16 пикселей.
• Установите расстояние между значком и тестом на 8 пикселей.

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

Кнопка с автомакетом Figma

Как сделать вложенную карточку автомакета в Figma?

• Создайте рамку размером 375px X 285px
• Добавьте внутрь изображение.
• Создайте текстовый слой размером 24 пикселя и напишите «Название продукта».
• Создайте текстовый слой размером 16 пикселей и напишите «Описание продукта».
• Выберите два слоя и создайте автоматический макет.
• Щелкните по вертикальному направлению и установите интервал 4 пикселя
• Установите отступ по горизонтали 16 пикселей
• Установите ширину 375 пикселей с фиксированным изменением размера по горизонтали.
• Выберите два слоя текста и установите горизонтальное изменение размера на «Заполнить контейнер».
• Выберите два кадра и создайте автоматический макет. (Теперь у вас есть вложенный автоматический макет)
• Нажмите на вертикальное направление и установите интервал на 16 пикселей
• Установите нижний отступ родительского фрейма на 16 пикселей
• Отметьте содержимое клипа и установите радиус на 16 пикселей.
• Добавьте на карту белый цвет.
• Установите обводку в 1 пиксель.

Теперь у вас есть карта с вложенной авто раскладкой. Размер карты будет автоматически изменяться при вводе любого текста.

Карточка с вложенной автоматической разметкой

К сводке

В этом руководстве я рассказал все, что вам нужно знать об автоматической разметке в Figma.

• Сначала я объяснил, что такое автоматическая компоновка и почему она полезна.
• Далее мы рассмотрели, как добавить автоматический макет, а также его основные и дополнительные параметры.
• Я показал вам некоторые приемы, такие как перемещение ручек из интерфейса и некоторые функции, поддерживающие автоматическую компоновку.
• Наконец, я поделился некоторыми примерами создания некоторых компонентов с помощью Auto layout.

Хотите узнать больше? Взгляните на эти статьи

• 10 советов по автоматической компоновке в Figma от Дэнни Сапио
• Новая автоматическая компоновка Figma за 5 минут от Кристин Валлаур
• Figma: настройка адаптивного дизайна с автоматической компоновкой, ограничениями и сетками от Кристин Валлорис
• Автоматический макет Figma. A Responsive Design Heaven от Christine Vallaure
• Auto Layout in Figma by Design передовой опыт

Спасибо за прочтение статьи. Надеюсь, эта статья помогла вам понять, как работать с автоматической версткой Figma. Пожалуйста, не стесняйтесь поделиться им со своими друзьями или членами команды, и если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать.

Новинки IT-индустрии, обзоры и тесты компьютеров и комплектующих

• ПК и комплектующие
  • Настольные ПК и моноблоки
  • Портативные ПК
  • Серверы
  • Материнские платы
  • Корпуса
  • Блоки питания
  • Оперативная память
  • Процессоры
  • Графические адаптеры
  • Жесткие диски и SSD
  • Оптические приводы и носители
  • Звуковые карты
  • ТВ-тюнеры
  • Контроллеры
  • Системы охлаждения ПК
  • Моддинг
  • Аксессуары для ноутбуков
• Периферия
  • Принтеры, сканеры, МФУ
  • Мониторы и проекторы
  • Устройства ввода
  • Внешние накопители
  • Акустические системы, гарнитуры, наушники
  • ИБП
  • Веб-камеры
  • KVM-оборудование
• Цифровой дом
  • Сетевые медиаплееры
  • HTPC и мини-компьютеры
  • ТВ и системы домашнего кинотеатра
  • Технология DLNA
  • Средства управления домашней техникой
• Гаджеты
  • Планшеты
  • Смартфоны
  • Портативные накопители
  • Электронные ридеры
  • Портативные медиаплееры
  • GPS-навигаторы и трекеры
  • Носимые гаджеты
  • Автомобильные информационно-развлекательные системы
  • Зарядные устройства
  • Аксессуары для мобильных устройств
• Фото и видео
  • Цифровые фотоаппараты и оптика
  • Видеокамеры
  • Фотоаксессуары
  • Обработка фотографий
  • Монтаж видео
• Программы и утилиты
  • Операционные системы
  • Средства разработки
  • Офисные программы
  • Средства тестирования, мониторинга и диагностики
  • Полезные утилиты
  • Графические редакторы
  • Средства 3D-моделирования
• Мир интернет
  • Веб-браузеры
  • Поисковые системы
  • Социальные сети
  • «Облачные» сервисы
  • Сервисы для обмена сообщениями и конференц-связи
  • Разработка веб-сайтов
  • Мобильный интернет
  • Полезные инструменты
• Безопасность
  • Средства защиты от вредоносного ПО
  • Средства управления доступом
  • Защита данных
• Сети и телекоммуникации
  • Проводные сети
  • Беспроводные сети
  • Сетевая инфраструктура
  • Сотовая связь
  • IP-телефония
  • NAS-накопители
  • Средства управления сетями
  • Средства удаленного доступа
• Корпоративные решения
  • Системная интеграция
  • Проекты в области образования
  • Электронный документооборот
  • «Облачные» сервисы для бизнеса
  • Технологии виртуализации

Наш канал на Youtube

Архив изданий

1999	1	2	3	4	5	6	7	8	9	10	11	12
2000	1	2	3	4	5	6	7	8	9	10	11	12
2001	1	2	3	4	5	6	7	8	9	10	11	12
2002	1	2	3	4	5	6	7	8	9	10	11	12
2003	1	2	3	4	5	6	7	8	9	10	11	12
2004	1	2	3	4	5	6	7	8	9	10	11	12
2005	1	2	3	4	5	6	7	8	9	10	11	12
2006	1	2	3	4	5	6	7	8	9	10	11	12
2007	1	2	3	4	5	6	7	8	9	10	11	12
2008	1	2	3	4	5	6	7	8	9	10	11	12
2009	1	2	3	4	5	6	7	8	9	10	11	12
2010	1	2	3	4	5	6	7	8	9	10	11	12
2011	1	2	3	4	5	6	7	8	9	10	11	12
2012	1	2	3	4	5	6	7	8	9	10	11	12
2013	1	2	3	4	5	6	7	8	9	10	11	12

• О нас
• Размещение рекламы
• Контакты

Популярные статьи

Моноблок HP 205 G4 22 AiO — одно из лучших решений для офисной и удаленной работы

В настоящем обзоре мы рассмотрим модель моноблока от компании HP, которая является признанным лидером в производстве компьютеров как для домашнего использования, так и для офисов. Моноблок HP 205 G4 22 — модель нового семейства, которая построена на базе процессоров AMD последнего поколения и отличается неплохой производительностью вкупе с привлекательной ценой

Logitech G PRO X Superlight — легкая беспроводная мышь для профессиональных киберспортсменов

Швейцарская компания Logitech G представила беспроводную игровую мышь Logitech G PRO X Superlight. Новинка предназначена для профессиональных киберспортсменов, а слово Superlight в ее названии указывает на малый вес этой модели, который не превышает 63 г. Это почти на четверть меньше по сравнению с анонсированным пару лет тому назад манипулятором Logitech G PRO Wireless

Материнская плата для домашнего майнинга ASRock h210 Pro BTC+

Как показало недавнее исследование Кембриджского университета — количество людей, которые пользуются сегодня криптовалютами, приближается к размеру населения небольшой страны и это только начало, мир меняется. Поэтому компания ASRock разработала и выпустила в продажу весьма необычную материнскую плату — h210 PRO BTC+, которую мы и рассмотрим в этом обзоре

Верхняя панель клавиатуры Rapoo Ralemo Pre 5 Fabric Edition обтянута тканью

Компания Rapoo анонсировала в Китае беспроводную клавиатуру Ralemo Pre 5 Fabric Edition. Новинка выполнена в формате TKL (без секции цифровых клавиш) и привлекает внимание оригинальным дизайном. Одна из отличительных особенностей этой модели — верхняя панель, обтянутая тканью с меланжевым рисунком

Изогнутый экран монитора MSI Optix MAG301 CR2 обеспечит максимальное погружение в игру

Линейку компьютерных мониторов MSI пополнила модель Optix MAG301 CR2, адресованная любителям игр. Она оборудована ЖК-панелью типа VA со сверхширокоформатным (21:9) экраном изогнутой формы (радиус закругления — 1,5 м). Его размер — 29,5 дюйма по диагонали, разрешение — 2560×1080 пикселов

Комплект SilverStone MS12 позволяет превратить SSD типоразмера M.2 2280 в портативный накопитель

Каталог продукции компании SilverStone пополнил комплект MS12. Он позволяет создать портативный накопитель на базе стандартного SSD типоразмера M.2 2280 с интерфейсом PCI Express

SSD-накопители ADATA XPG Spectrix S20G сочетают производительность с эффектным дизайном

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

Видеокарта ASUS GeForce RTX 3070 Turbo оснащена системой охлаждения с одним центробежным вентилятором

Линейку видеоадаптеров ASUS на базе графических процессоров NVIDIA пополнила модель GeForce RTX 3070 Turbo (заводской индекс TURBO-RTX3070-8G), предназначенная для оснащения игровых ПК. Одной из особенностей новинки является конструкция системы охлаждения

КомпьютерПресс использует

Обзор слоев-фигур, контуров и векторные изображения

Сведения о векторной графике и растровых изображениях

Векторные изображения состоят из линий и кривых, заданных векторами — математическими объектами, которые описывают изображение в соответствии с его геометрическими характеристиками. Примеры элементов векторных изображений в After Effects включают контуры маски, фигуры на слоях-фигурах и текст в текстовых слоях.

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

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

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

Некоторые изображения создаются в других приложениях в качестве векторной графики, но преобразуются в пикселы (растровый формат) при импорте в After Effects. Если слой непрерывно преобразуется в растровый формат, при изменении размера слоя After Effects повторно конвертирует векторную графику в пикселы, сохраняя четкость краев. Векторная графика из файлов SWF, PDF, EPS и Illustrator может быть постоянно растрирована.

Видеоруководство «Что такое растровые изображения и векторная графика?» от Аарона Рабиновича (Aharon Rabinowitz) входит в серию видео Multimedia 101, доступную на веб-сайте Creative COW, и предлагает общие сведения о растровых изображениях и векторной графике.

Некоторые возможности After Effects, включая маски, формы, обводки, обводки рисованием и пути движения, основаны на понятии контура.
Инструменты и методы для создания и редактирования различных типов контуров перекликаются, но каждый тип контура имеет собственные уникальные аспекты.

Контур состоит из сегментов и вершин.
Сегментами являются линии или кривые, которые соединяют вершины. Вершины определяют начало и конец каждого сегмента контура. Некоторые приложения Adobe для определения вершины используют термины опорная точка и точка контура.

Изменить форму контура можно перетаскиванием его вершин, дексрипторов направления в конце линий направления (или касательных) каждой вершины или самого сегмента контура.

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

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

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

Контур может быть открытым или замкнутым. Открытый контур имеет точку начала, которая не совпадает с его конечной точкой; например, прямая линия является открытым контуром. Замкнутый контур является непрерывным и не имеет начала или конца; например, круг является замкнутым контуром.

Можно нарисовать контуры в виде геометрических фигур — многоугольников, эллипсов и звезд — с помощью инструментов форм либо использовать инструмент «Перо» для рисования произвольного контура. Контуры, нарисованные с помощью инструмента «Перо», являются или нарисованными вручную контурами Безье, или контурами RotoBezier. Основное различие между контурами RotoBezier и нарисованными вручную контурами Безье заключается в том, что линии направления для контуров RotoBezier вычисляются автоматически, что упрощает и убыстряет их рисование.

При использовании инструментов форм («Прямоугольник», «Прямоугольник со скругленными углами», «Эллипс», «Многоугольник» или «Звезда») для рисования контуров форм в слое форм можно создать один из двух типов контуров: параметрический контур формы или контур формы кривой Безье. (См. раздел Сведения о формах и слоях форм.)

Контуры масок, контуры обводки рисованием и контуры форм кривой Безье можно связать с помощью выражений. Также можно выполнять копирование и вставку между контурами масок, контурами обводок рисованием, контурами форм кривой Безье, путями движения и контурами из Adobe Illustrator, Photoshop и Adobe Fireworks. (См. раздел Создание форм и масок.)

Для контуров форм можно использовать операцию «Объединить контуры» (похожа на эффекты обработки контуров в Adobe Illustrator) для объединения нескольких контуров в один. (См. раздел Параметры объединения контуров.)

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

Сам контур не имеет визуального представления в выводе после рендеринга; по существу это совокупность данных о том, как разместить или изменить другие визуальные элементы. Чтобы сделать контур видимым, к нему необходимо применить обводку. В случае пути маски можно применить эффект «Обводка». В случае контура для объекта слоя форм по умолчанию контур создается с группой свойства обводки (атрибутом) после групп свойств контура на панели «Временная шкала».

Цвет или градиент, применяемый к области, расположенной внутри контура, является заливкой.

Примечание.

Чтобы задать размер дескрипторов направления кривой Безье и вершин для масок и форм, выберите «Правка» > «Установки» > «Общие» (Windows) или «After Effects» > «Установки» > «Общие» (Mac OS) и измените значение параметра «Размер точки контура».

Сведения о фигурах и слоях-фигурах

Слои-фигуры содержат объекты векторной графики, называемые фигурами. По умолчанию форма состоит из контура, обводки и заливки. (См. разделы Сведения о контурах и Обводки и заливки для форм).

Слои форм создаются рисованием на панели «Композиция» с использованием инструментов форм или инструмента «Перо». (См. раздел Создание форм и масок.)

Контуры форм имеют две разновидности: параметрические контуры форм и контуры форм кривой Безье. Параметрические контуры форм определяются численно — свойствами, которые после рисования можно изменить и анимировать на таймлайне. Контуры форм кривой Безье определяются набором вершин (точек контура) и сегментов, которые можно изменить на панели «Композиция». Работа с контурами форм кривой Безье осуществляется таким же образом, как работа с контурами маски. Все контуры маски являются контурами кривой Безье.

Контуры формы можно изменять, используя операции с контурами, такие как «Контуры колебания» и «Втягивание и раздувание». Наложение на контур обводки или заливка цветом области, определенной контуром, выполняются с помощью операций цветового заполнения. (См. раздел Атрибуты форм, операции заливки цветом и операции с контурами для слоев форм.)

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

Битовая глубина цвета слоя формы совпадает с битовой глубиной цвета проекта и может быть 8 бит, 16 бит или 32 бита. (См. раздел Глубина цвета и высокий динамический диапазон цветов.)

Слои форм могут быть основаны на элементах видеоряда. Слои, которые не основаны на элементах видеоряда, иногда называют синтетическими слоями. Текстовые слои также являются синтетическими слоями и состоят из объектов векторной графики, поэтому многие правила и рекомендации, применяемые к текстовым слоям также применяются к слоям-фигурам. Например, слой-фигуру нельзя открыть на панели «Слой», также как и нельзя открыть на панели «Слой» текстовый слой.

Примечание.

Можно сохранять избранные формы как стили анимации. (См. раздел Сохранение стиля анимации.)

Ресурсы в Интернете, посвященные слоям-фигурам

Видеоруководство по созданию слоев-фигур из векторных слоев находится на странице обучающих пособий.

Крис и Триш Мейеры (Chris and Trish Meyer) представляют введение в слои-фигуры в виде отрывка (в формате PDF) из своей книги «Создание анимированной графики с After Effects» (5-ая редакция).

Крис Звар (Chris Zwar) предоставляет шаблон настроек анимации на своем веб-сайте. Этот шаблон настроек служит для создания целевого перекрестия с помощью одного слоя-фигуры с различными настраиваемыми свойствами, которые делают управление и изменение анимации с помощью перекрестия удобным и интуитивно-понятным.

Группы и порядок рендеринга для форм и атрибутов форм

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

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

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

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

A. Две формы в группе B. Два контура в составной форме C. Контур круга с применением операции «Контуры колебания» D. Одна обводка, примененная ко всем контурам над ней E. Контур звезды в отдельной группе F. Одна заливка, примененная ко всем контурам над ней G. Один контур с двумя обводками 

Порядок рендеринга для форм в слое форм

Правила рендеринга слоя форм аналогичны правилам рендеринга композиции, содержащей вложенные композиции.

• В пределах группы сначала визулизируются формы в нижней части порядка расположения на панели «Таймлайн».

• Все операции с контурами в группе выполняются перед операциями цветового заполнения. Это означает, например, что обводка учитывает искажения на контуре, созданные с помощью операции с контурами «Контуры колебания». Операции с контурами в группе выполняются сверху вниз.
  (См. раздел Изменение форм с помощью операций над контурами.)

• операции заливки цветом внутри группы выполняются снизу вверх в порядке расположения на панели «Таймлайн». Это означает, например, что обводка визуализируется поверх или перед обводкой, которая на таймлайне отображается после нее. Чтобы изменить это поведение по умолчанию для определенной заливки или обводки, на панели «Таймлайн» выберите для свойства композиции заливки или обводки «Выше предыдущего в той же группе». (См. раздел Обводки и заливки для форм.)

Операции с контурами и операции заливки цветом применяются ко всем контурам, расположенным над ними в одной группе.

Преобразование свойств для группы форм и контуров форм

Каждая группа имеет собственную группу свойств преобразования. Эта группа свойств преобразования представлена на таймлайне как группа свойств с именем «Преобразование: [имя группы]», а на панели «Композиция» — как пунктирная рамка с дексрипторами. С помощью новой группы свойств преобразования контур можно сгруппировать отдельно и трансформировать только его.

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

Каждый контур формы также имеет внутренние свойства, которые влияют на местоположение и очертания контура. Для параметрических контуров форм эти свойства (например, «Положение» и «Размер») являются параметрами, видимыми на таймлайне. Для контуров форм кривой Безье эти свойства определяются для каждой вершины, но включены в свойство «Контур». При изменении контура кривой Безье с помощью свободно-трансформируемой ограничительной рамки происходит изменение этих внутренних свойства для вершин, которые входят в этот контур. (См. раздел Сведения о формах и слоях форм.)

Группировка форм или атрибутов форм

При группировке форм опорная точка группы помещается в центре ограничительной рамки группы.

Разгруппировка форм или атрибутов форм

Создание пустой группы форм

контурных векторов скачать бесплатно 17 932 редактируемых файлов .ai .eps .svg .cdr

Сортировать по: По умолчанию В тренде Новейшие Рекомендовать Релевантные Популярные Непопулярные наброски новой коллекции Запросить дизайн

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

[ Векторы ] исламский замок значок черный белый традиционный арабский архитектура контур ( . ai .ai . EPS .svg 1,72 МБ)

Все-бесплатно-download.com

[ Векторы ] мандала значок флоры черный белый симметричный контур формы круга ( .ai .eps .svg 2.32MB )

All-free-download.com

[ Векторы ] bmw 840i 2021 модель автомобиля рекламный шаблон плоский черный белый нарисованный от руки разные виды контур ( .ai .eps .svg 2.21MB )

All-free-download.com

[ Векторы ] мандала цветок элемент дизайна черный белый симметричный контур иллюзии ( .ai .eps .svg 2.79MB )

All-free-download.com

[ Векторы ] kia carens 2022 модели автомобилей рекламный баннер черный белый нарисованный от руки контур ( . ai .eps .svg 1.74MB )

All-free-download.com

[ Векторы ] Арабский исламский орнамент шаблон элегантный плоский черный белый симметричный цветочный контур ( .ai .eps .svg 1.83MB )

Все-бесплатно-download.com

[ Векторы ] недвижимость город фон черный белый здания дома контур ( .ai .eps .svg 784.35KB )

All-free-download.com

[ Векторы ] audi r8 2021 модель автомобиля рекламный шаблон черный белый нарисованный от руки другой контур вида ( .ai .eps .svg 2.35MB )

All-free-download.com

наброски щит наброски банан наброски облако наброски школа наброски бесплатно вектор город наброски скачать глобус наброски вектор бесплатно бесплатно шляпа наброски векторные наброски Соединенных Штатов обувь наброски картинки кролик наброски вектор бесплатно животных наброски бесплатно вектор наброски Африки облака вектор автобус наброски розы наброски векторные наброски вектор искусства футболка бесплатно племенной клип арт наброски

[ Векторы ] значок древа жизни плоский симметричный нарисованный от руки контур ( . ai .eps .svg 1.84MB )

All-free-download.com

[ Векторы ] с днем ​​святого валентина типографика черно белая каллиграфия контур ( .ai .eps .svg 1.88MB )

All-free-download.com

[Векторы] амитабха будда иллюстрация значок черный белый мультфильм контур ( .ai .eps .svg 4.31MB )

Все-бесплатно-download.com

[ Векторы ] шаблон архитектуры исламского замка черный белый классический контур ( .ai .eps .svg 1.19MB )

All-free-download.com

[ Векторы ] suzuki vitara 2021 модели автомобилей рекламный баннер черный белый нарисованный от руки разные виды контур ( . ai .eps .svg 2.72MB )

All-free-download.com

[ Векторы ] мой маленький ангел кондитерская значок милый нарисованный от руки контур ( .ai .eps .svg 1.66MB )

All-free-download.com

[Векторы] значок iphone 13 черный белый реалистичный контур задней стороны ( .ai .eps 1.24MB )

All-free-download.com

религия повторяющееся заблуждение флора элемент мандала цветок цветок икона форма повторяющаяся этикетка значок вид сзади ислам элементы тег автомобильные кривые формы наклейка ислам эмблема арабский вид сверху цветочный закрученный восточный декор седан бесшовные архитектура лист листья элемент храм форма архитектурный дворец мечеть лепестки роскошный автомобиль ореол валюта символ нимб hyundai автомобиль лотос нарисованный от руки audi автомобиль надпись валентинка тексты внедорожник автомобиль духовный

[ Векторы ] исламский орнамент шаблон круг симметричный цветочный контур формы ( . ai .eps .svg 2.61MB )

All-free-download.com

[ Векторы ] лотос цветочный фон плоский нарисованный от руки белый контур ( .ai .eps .svg 2.37MB )

All-free-download.com

[ Векторы ] toyota avanza premio 2022 модели автомобилей рекламный баннер шаблон черный белый нарисованный от руки разные виды контур ( .ai .eps .svg 3.52MB )

Все-бесплатно-download.com

[Векторы] шаблон арабского исламского искусства черный белый элегантный симметричный цветочный контур ( .ai .eps .svg 2.10MB )

All-free-download.com

[ Векторы ] арабский декоративный шаблон плоский черный белый симметрия форма контур ( . ai .eps .svg 2.06MB )

All-free-download.com

[ Векторы ] audi a8 2021 lineart шаблон плоский черный белый нарисованный вручную контур вида сбоку ( .ai .eps .svg 1.16MB )

Все-бесплатно-download.com

[ Векторы ] toyota avanza premio 2022 значок автомобиля плоский черный белый нарисованный от руки вид сбоку контур ( .ai .eps .svg 2.00MB )

All-free-download.com

[ Векторы ] f 18 значок истребителя черный белый контур ( .ai .eps .svg 945.23KB )

All-free-download.com

[ Векторы ] цветочные мандалы значок знак обманчивый симметричный контур круга ( . ai .eps .svg 3.50MB )

Все-бесплатно-download.com

[Векторы] арабский исламский художественный шаблон элегантный черный белый симметричный цветочный контур кривых ( .ai .eps .svg 1.73MB )

All-free-download.com

[ Векторы ] Исламская архитектура замка значок черный белый симметричный контур ( .ai .eps .svg 1.24MB )

All-free-download.com

[ Векторы ] багет ломтики хлеба буханки иконки черный белый нарисованный от руки контур ( .ai .eps .svg 1.44MB )

Все-бесплатно-download.com

[ Векторы ] значок цветка мандалы плоский черный белый обманчивый симметричный повторяющийся контур украшения ( . ai .eps .svg 2.80MB )

All-free-download.com

[ Векторы ] hyundai kona 2021 модель автомобиля рекламный шаблон черный белый нарисованный от руки разные виды контур ( .ai .eps .svg 3.21MB )

All-free-download.com

[ Векторы ] usd элементы дизайна динамические падающие круглые монеты контур ( .ai .eps 1.39MB )

All-free-download.com

[ Векторы ] мандала ботаника элемент дизайна черный белый симметричный повторяющийся контур формы круга ( .ai .eps .svg 4.07MB )

All-free-download.com

[ Векторы ] Toyota Land Cruiser 2022 модели автомобилей значок плоский черный белый разные виды контур ( . ai .eps .svg 2.04MB )

Все-бесплатно-download.com

[ Векторы ] мандала цветок значок черный белый симметричный контур иллюзии ( .ai .eps .svg 2.37MB )

All-free-download.com

[ Векторы ] цветочные мандалы значок знак черный белый иллюзия симметричная форма контур ( .ai .eps .svg 2.25MB )

All-free-download.com

[ Векторы ] счастливого дня святого валентина типографика элегантный динамический черный белый нарисованный от руки контур ( .ai .eps .svg 1.72MB )

Все-бесплатно-download.com

[ Векторы ] Peugeot Landtrek 2021 модель автомобиля рекламный шаблон черный белый нарисованный от руки разные виды контур ( . ai .eps .svg 2.88MB )

All-free-download.com

[ Векторы ] значок цветка мандалы плоский черный белый симметричный повторяющийся контур иллюзии ( .ai .eps .svg 2.49MB )

All-free-download.com

[ Векторы ] hyundai Accent 2021 рекламный шаблон нарисованный от руки черный белый разные виды контур ( .ai .eps .svg 2.43MB )

All-free-download.com

Загрузка дополнительных элементов, пожалуйста, подождите…

Идет загрузка дополнительных элементов, пожалуйста, подождите…

Критерий поиска:

Тип поиска:

Совпадение с любымСовпадение со всеми

Искать в:

ВекторыИконкиФотографииШрифтыШаблоны сайтовPSD

Лицензия:

Все лицензииРазрешить коммерческое использование

Результат сортировки:

Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок

• Дом
• Лицензии
• Срок
• Конфиденциальность
• Около
• Связаться с

Контурные векторы: 5 основных причин, почему их любят компании

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

Вам также может быть интересно узнать больше о том, что такое векторный файл?

1. Контурные векторы

выглядят профессионально.

Существует распространенное заблуждение, что мультяшные персонажи создаются только для проектов, целевой аудиторией которых являются… дети. Это едва ли правда. Да, мультяшные персонажи невероятно хорошо влияют на детей: они милые, милые и привлекательные. Однако большинство людей упускают из виду, что 90 355 героев мультфильмов влияют на взрослых 9.0356 точно так же.

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

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

2. Они

подходят везде.

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

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

Еще одно преимущество: цветов не проблема . Эти символы обычно не имеют цветов или имеют один акцентирующий цвет, который можно легко изменить или удалить.

3. Выразительны

во всех размерах.

Во-первых, векторные контуры, включая персонажей мультфильмов, нарисованы в четких, минималистичных формах, что делает их невероятно выразительными, даже если они меньше. Цель того, чтобы не вдаваться в подробности – сделать такие мультфильмы легко различимыми. Зритель может с легкостью распознать выражение лица персонажа и то, что оно передает, даже при уменьшении масштаба . Сам рисунок не требует много времени для анализа. Вы просто видите это и получаете то, что оно «говорит» вам.

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

4. Контурные векторы

не привлекать к себе внимание.

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

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

5.

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

Контур мультяшного персонажа легко нарушает правила анатомии .

Как создать прототип мобильного приложения за 5 шагов + 3 примера

---

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

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

Фундаментальная отсылка. Прототип — это быстрая, черновая реализация будущей системы. А еще это работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании. Термин прототип произошел от древнегреческого πρῶτος «первый» + τύπος «отпечаток, оттиск» или первообраз.

«Одна картина стоит тысячи слов. Один прототип стоит 1 000  встреч. »

— Джон Маэда, дизайнер / remix известной цитаты Конфуция

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

Содержание:

• Что такое прототип для чего он нужен
• Инструкция по разработке прототипа мобильного приложения
  • Шаг 1. Определите полезное действие и конек
  • Шаг 2. Зарисуйте Sketchflow ключевых экранов и протестируйте бумажный прототип
  • Шаг 3. Перенесите бумажный прототип на интерактивную бумагу
  • Шаг 4. Придайте прототипу профессиональный облик 
  • Шаг 5. Поделитесь прототипом с заинтересованными в проекте и потенциальными клиентами и сделайте корректировки
• 8 моментов, которые важно учесть при создании прототипа
• 3 примера хороших прототипов мобильных и веб-приложений
• Что еще почитать на тему подходов к прототипированию
• Вывод и рекомендация

Что такое прототип и для чего он нужен

Прототип интерфейса приложения помогает представить дизайн и логику приложения, а также протестировать идею боем.

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

Пример прототипа мобильного приложения:

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

Использовать прототип следует по следующим причинам:

	Без прототипа приложения	С прототипом приложения
1. Прототип дает взгляд со стороны и открывает новую точку зрения	В вашем воображении идея выглядит просто и идеально. Существенные недостатки отсутствуют. На самом деле, это портал в бесконечные срывы ожиданий как клиентов, так и всех участников.	Взгляд со стороны помогает найти пробелы в задумке. Их уже можно устранить на этапе прототипирования и усовершенствовать идею.
2. Создает простор для эксперимента и поиска наилучшего решения с учетом ограничений	Доработки идеи, реализованной в коде — это трудоемко, дорого и рискованно.	В прототип мобильного или веб-приложения можно мгновенно вносить правки без какого-либо риска. К тому же эти изменения незначительны в рамках общего бюджета и помогают выбрать для разработки лучшее решение.
3. Прототип — предмет для исследований целевой аудитории	Когда вам нечего показать потенциальным клиентам, вы не можете рассчитывать на честную обратную связь о вашей идее или продукте.	Прототип веб- или мобильного приложения — это потрясающе точный инструмент для сбора данных с потенциальных пользователей. Дайте им поиграть с ним, понаблюдайте за прототипом на деле, и вас тут же накроет десятками идей о том, как доработать идею.
4. Прототип помогает оценить стоимость разработки программистами	На вопрос: «Сколько стоит такое приложение, как Facebook?» — вы не получите ясного ответа, потому что оценивать нужно комплект полезных пользовательских сценариев (User Flow), состоящих из конкретного количества экранов и состояний элементов управления.	Покажите прототип разработчикам и они в течение недели сделают точную и сбалансированную оценку по времени и бюджету на разработку.
5. Вовлекает в разработку и инвестиции	Идея звучит клево, всем нравится, но все ждут от вас каких-то действий, так как рисковать усилиями и деньгами хочется лишь единицам.	Помогает чувственно донести идею о будущем продукте и продемонстрировать ее на деле. Прототип повышает ваши шансы убедить заинтересованных.

Прототип мобильного или веб-приложения помогает вам проверить свою идею с минимальными рисками. На стадии прототипа вы можете добыть и осознать истинные потребности вашей целевой аудитории и скорректировать продуктовую идею.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в
Telegram
|
ВКонтакте,
Instagram,

Facebook

Инструкция по разработке прототипа мобильного приложения

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

Шаг 1. Определите полезное действие и конек

Данный этап выполняется по классическому алгоритму дизайн-мышления и оформить результат данного этапа можно в формате POV (Point-of-View).

Хороший POV одновременно создает пространство для развития и фокусирует на поиске решения. . Хороший POV — бесконечный источник идей для развития и совершенствования. 

__Пример POV__ / Сервис по доставке пиццы к вечеру пятницы

«Мы встретили ребят в пятничном офисе, у которых сегодня намечается вечеринка.»

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

«Мы можем изменить мир, если подкинем им идей по заказу еды и превратим их метания в понятный путь к клевому празднику.»

Близкая аудитории культура: Отдых и развлечения, Карьера и деньги

Более подробно о дизайн-мышлении вы можете найти материал в курсе Дизайн-мышление — Базовый курс. Это курс с оригинальными методиками легендарной Stanford d.school. Теория и практика дизайн-мышления для разных отраслей в экспресс-формате. Заглянуть в курс по дизайн-мышлению →

Шаг 2. Зарисуйте Sketchflow ключевых экранов и протестируйте плавность сценария

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

Как выглядит

Чтобы скетчи экранов получились жизненными, я стараюсь сразу оформлять их в формате User Flow и запускать по ним виртуального пользователя. 

Пример оформления Sketchflow.

Инструменты для скетчинга

Я беру карандаш, ластик и лист A4 или блокнот.

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

В чем фишка бумажного прототипа

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

Шаг 3. Перенесите бумажный прототип на интерактивную бумагу

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

Как выглядит

Фактические перед вами настоящее приложение, просто накиданное от руки в формате скетча. Но главное — оно работает как «живое». Клевая функция POP — создание интерактивных прототипов мобильных приложений. Вы просто связываете несколько экранов приложений: рисуете виртуальные области поверх фото и цепляете к ним переход на другое фото из серии.

Инструменты для дизайна

Вариант 1. POP by Marvel — превращает скетчи в прототипы для  iOS and Android-платформ. Для мобильных веб-прототипов тоже годится.

В чем фишка 

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

Шаг 4. Придайте прототипу профессиональный облик 

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

Инструменты для дизайна

Здесь под настроение я беру либо просто Figma или миксую Figma + Principle | ProtoPie — особенно когда хочется сделать эффектный выход.

Как выглядит

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

Пример Wireframe в Figma

В чем фишка

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

Шаг 5. Поделитесь прототипом с заинтересованными в проекте и потенциальными клиентами и сделайте корректировки

Поздравляю. Ваш прототип готов к первым испытаниям. И только сейчас на самом деле начинается самое интересное — первая корректировка рынком вашего решения.

Инструменты для дизайна

С помощью Figma или Principle | ProtoPie вы можете отправить ваш прототип по ссылке потенциальному клиенту и включить режим UX-тестирования.

Как выглядит

Вы можете проводить удаленные тестирования через Skype/Zoom с записью экрана или воспользоваться профессиональным софтом, например, Lookback для проведения модерируемых UX-тестирований.

В чем фишка тестирования прототипов на потенциальных клиентах

Чем раньше вы начнете получать настоящую обратную связь от аудитории, тем раньше вы узнаете, насколько вы действительно полезны.

Главный принцип — не дурачить самого себя. А себя как раз легче всего одурачить. Здесь надо быть очень внимательным. А если вы не дурачите сами себя, вам легко будет не дурачить других ученых. Тут нужна просто обычная честность.

Ричард Фейнман

Прототипы — инструмент обучения и погружения в предметную область. Прототипы помогают быстрее учиться и быстрее совершенствовать ваши идеи.

3 примера хороших прототипов мобильных и веб-приложений

1. Демонстрация мобильного UX по созданию документов в мобильном приложении Craft – Create Amazing Documents

2. Микровзаимодействия в веб-приложении крупным планом

3. Демонстрация работы навигации в приложении

Что важно учесть при создании прототипа мобильного приложения

1. Тестируйте прототипы в конкретных ситуациях и тестируйте чаще

А контекст — это жизненные ситуации, под которые создается приложение. Здесь все как в реальном мире — подводная лодка должна плавать на глубине, а значит нужно сначала разобраться с тем, что там за среда, какое давление и какие требования к продукту.

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

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

2. Начинайте со скетчей, а не с графического редактора

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

Суть идеи: Со скетчем у вас будет план. А еще скетч не сковывает вас в поиске решений.

3. Используйте живой контент, а не Lorem

Тексты — основа навигации. Мы сканируем пространство экрана и пытаемся зацепиться за слово, которое помогает сделать следующий шаг на пути к цели. Поэтому продумайте навигацию, а также содержание, за которым стремится пользователь.

Суть идеи: С живым текстом можно оценить пользу прототипа.

4. Наращивайте дизайн слоями

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

Суть идеи: С живым текстом можно оценить пользу прототипа, и получить нечто больше, чем WOW.

5. Применяйте дизайн-мышление

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

Суть идеи: Попробуйте дизайн-мышление. Эта международная практика помогает стартапам и продуктовым компаниям по всему миру делать мир лучше.

6. Изучайте паттерны и готовые библиотеки компонентов: лучше вспоминать, чем изучать заново

Есть много ресурсов, где собраны ux-паттерны и можно найти, как вашу задачу решали гиганты из Facebook, Spotify, Uber и Salesforce. Эти команды годами развивают свои продукты и ищут оптимальные решения для каждого сценария. Пользователи увереннее подойдут к решению задачи, когда увидят знакомые конструкции и знакомые механизмы.

Суть идеи: Готовые UI-киты сделанные на технологическом уровне значительно ускорят разработку.

7. Развивайте прототип через истории в формате POV (Point of View)

Изучайте обратную связь и формулируйте продуктовые истории с помощью техники POV (Point of View), так вы сможете нащупать концепцию с пространством для развития продукта.

Суть идеи: POV помогает сформулировать гипотезу о пользе продукта и создать контекст для тестирования и почувствовать аудиторию. 

Что еще почитать на тему подходов к прототипированию

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

Девять дизайнеров-исследователей и преподавателей в сфере дизайна Университета Сиднея в течение 15 лет исследовали приемы и техники дизайн-мышления. А потом собрали их в руководство. В книге методы сгруппированы в алфавитном порядке и промаркированы четырьмя символами «Придумай. Сделай. Сломай. Повтори». Помогает расширить пространство концепций, выйти за пределы обыденных решений и привнести свежий взгляд. 😊👇🏻

Придумай. Сделай. Сломай. Повтори | Настольная книга приемов и инструментов дизайн-мышления. Подробнее →

Вывод и рекомендация

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

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

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

создание и тестирование — Личный опыт на vc.ru

Разработка продукта — многоступенчатый процесс. И то, что получится в итоге, зависит от грамотно созданного прототипа. По сути, прототип приложения или сайта — это скелет, который затем обрастает мышцами в виде UI.

2896
просмотров

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

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

Мы, студия NoCode/LowCode-разработки Zero To One, постарались подробно рассказать о том, что же такое прототип, как его создавать и как это делают у нас 🙂

А еще мы запустили телеграм-канал о новостях из мира бизнеса и стартапов. Каждое утро говорим о главных событиях: кто сколько привлек, кто кого купил и какие стартапы сейчас поднимают самые большие раунды. Подписывайтесь!

Прототип: что это такое и зачем он нужен

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

Помимо этого прототип помогает:

• Визуализировать будущий продукт. Прототипирование помогает понять, что вы получите в результате разработки: какие функции и элементы будет иметь интерфейс, по каким сценариям пользователь будет взаимодействовать с продуктом и т. д.
• Выработать единую концепцию, правила дизайн-системы и иерархию блоков. Например, в соответствии с негласной дизайнерской матчастью, расстояния между блоками (к примеру, заголовками) и подблоками (абзацами) везде должны быть одинаковыми. Аналогичные правила работают и в случае с визуальным контентом (фото, видео и пр.) и графическими элементами (кнопки, иконки).
• Закрепить договорённости с заказчиком. Он страхует от ситуаций, когда команда разработчиков уже сделала весь интерфейс, выкатила итоговый продукт и передала заказчику для оценки, а всё работает, оказывается, совсем не так, как нужно: тут текст не влезает в границы кнопки, там блок не так расположен, где-то элементов не хватает, а какие-то из них вообще лишние. Прототип даёт возможность «свести» пожелания и видение заказчика с возможностями и видением разработчиков.
• Сформировать ТЗ для верстальщиков. Прототип показывает, какие расстояния должны быть между элементами, какие использовать отступы от края блока до его содержимого, в случае с high-fidelity прототипом (о нём расскажем дальше) можно договориться даже о цветах и анимациях переходов между окнами.
• Понять ЦА и собрать фидбек. Как мы уже рассказывали в одной из публикаций, MVP можно создавать в виде прототипа. Но для MVP подходят только high-fidelity прототипы: они могут выглядеть как реальный, законченный продукт и с ними можно полноценно взаимодействовать.

Виды прототипов

В зависимости от инструментов, используемых при создании прототипа, можно выделить следующие его виды:

• Бумажный прототип. Да, на бумаге и от руки. Обычно такой прототип создаётся в самом начале работы для иллюстрации концепта продукта, когда нужно быстро сделать набросок и скорректировать основные детали. Однако бумажное прототипирование совершенно не подходит для полноценной работы и тестирования.

• Low-fidelity прототип. Он выглядит как «голая» версия конечного продукта и, как правило, делается в ч\б. Такой прототип состоит из:

• Макетов экранов
• Контуров элементов
• Изображённой в виде стрелок логики взаимодействия элементов или базовой кликабельности элементов

Ключевые характеристики lo-fi прототипа — наглядность и интерактивность. Он может быть выполнен с помощью карандаша в Paint или фреймов и фигур в Figma — неважно. Главное — он должен показывать алгоритм решения проблемы пользователя.

Один из прототипов нашей студии

• High-fidelity прототип. Такой прототип гораздо больше похож на итоговый продукт, чем lo-fi. В нём уже есть актуальные изображения, текстовые заглушки с Lorem ipsum заменены на реальный UX-текст со смысловым наполнением. По сути, hi-fi прототип — это максимально подробный дизайн-макет, практически финальная версия проекта, но без фронт- и бэкенда.

При создании high-fidelity прототипа от точки А до точки Я прорабатывается логика взаимодействия элементов в каждом отдельно взятом сценарии, на каждую кнопку макета назначаются действия и кнопки демонстрируются во всех возможных состояниях, между собой связываются экраны приложения и т. д. Такой прототип должен давать полное представление о структуре сайта/приложения, навигации внутри них и решении всех возможных проблем пользователей.

Чаще всего все эти виды прототипов используются поочерёдно на различных стадиях разработки: всё начинается с бумажного наброска и приходит к high-fidelty прототипу.

Как правильно создать прототип: алгоритм действий

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

• Первое, что нужно сделать при создании любого пользовательского продукта, будь то сайт, приложение, текст или рекламный креатив — это изучить целевую аудиторию. Перед созданием прототипа вам необходимо узнать о потребностях потенциальных пользователей, их болевых точках. Как говорится, знание — сила. И в данном случае знание и понимание аудитории вашего продукта поможет уже на этапе прототипирования создать удобный UX, который потом только останется доработать.
• Формирование ТЗ. На этом этапе создания прототипа необходимо провести брифинг и совместное обсуждение требований к будущему макету, чтобы наметить план работы. Здесь обсуждается вся информация, полученная при изучении ЦА, структура сайта или приложения: подробно описываются экраны, текстовое и визуальное наполнение, функции отдельных элементов и навигация. На основании выводов обсуждения составляется техзадание для дизайнеров.
• Создание low-fidelity прототипа. Имея на руках данные исследования ЦА, техзадание от клиента и набросок интерфейса, можно приступать непосредственно к прототипированию.

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

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

Создание low-fi обычно занимает около 7-14 дней. После того, как черновик создан, нужно вновь обсудить всё с заказчиком и скорректировать имеющийся макет.

• Создание high-fidelity прототипа. По мере перехода к финальному дизайну продукта ваш прототип должен становиться более функциональным. Например, на стадии hi-fi прототипа можно добавить в макет строку поиска, которая будет подгружать данные, хранящиеся в прототипе (например, образцы товаров), на основе того, что пользователь или тестировщик вводят в поле, и представлять результаты в виде меню-аккордеона, выпадающего списка и других подобных элементов.

Еще один аспект, отличающий прототипы класса hi-fi от прототипов более низкого класса, заключается в том, что они часто хранят как числовые, так и текстовые данные, а также определенные настройки, вводимые пользователем. Эти настройки могут сохраняться и влиять на другие элементы прототипа, как на одном экране, так и на разных.

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

Плюсы тестирования — в следующем:

• Оно позволяет выявить ошибки на ранней стадии разработки;
• Оно экономит (иногда сильно) средства на разработку итогового продукта;
• Оно позволяет начать знакомство пользователей с финальным продуктом «на хорошей ноте»: правильно и ответственно проведённое тестирование гарантирует, что сразу после запуска приложения или сайта пользователи не столкнутся с критическими ошибками и не останутся недовольны.

Перед началом тестирования ставятся и распределяются по приоритетности цели, которые нужно достичь в процессе проверки прототипа. Например:

• «Оставить ли меню-бургер или вынести категории в шапку?»
• «Понятно ли из текста в окне, что именно нужно от пользователя?»
• «Достаточно ли крупный размер шрифта меню, чтобы пользователям было комфортно взаимодействовать с сайтом?»
• «В качестве обложки сайта лучше оставить изображение или заменить его на видео?»

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

Инструменты прототипирования

Есть более и менее удобные для прототипирования инструменты, специально созданные для него и универсальные. Здесь мы не откроем Америку, если скажем, что лучше всего для работы с прототипами подходят Figma, Sketch и InVision. Figma мы регулярно используем сами, а Sketch и InVision доверяют тысячи других команд.

Figma

Плюсы:

• Можно использовать бесплатно;
• Работает и на Windows, и на MacOS;
• Есть веб-версия;
• Удобна для командной работы;
• С помощью плагинов вроде Autoflow и Figmotion можно создавать интерактивные сценарии взаимодействия пользователей с интерфейсом и анимации окон.

Минусы:

• Ну тут даже мы бессильны в поиске минусов — Figma идеальный инструмент

Sketch

Плюсы:

• Легко создавать связи между экранами: это делается через перетаскивание векторов от одного экрана к другому;
• Понятный интерфейс;
• Можно массово редактировать типовые элементы (кнопки, векторы и т. д.) сразу на всех экранах прототипа: менять цвета, размер и прочие атрибуты;
• Есть бесплатная пробная версия.

Минусы:

• Работает только на MacOS;
• Стоимость полной версии — $99 в год и $9 в месяц.

Invision

Плюсы:

• Полностью работает в браузере;
• Удобно взаимодействовать в команде: функция Freehand позволяет рисовать, делать заметки и обсуждать проект;
• Можно быстро создавать интерактивные прототипы и воспроизводить их с помощью LiveShare.

Минусы:

• В бесплатной версии доступно создание лишь одного проекта. Тарифы начинаются от $15 в месяц.

Пара советов

• При разработке low-fidelity прототипа сфокусируйтесь на проработке userflow, сделайте взаимодействие пользователя с интерфейсом настолько понятным и комфортным, насколько это возможно. Lo-fi прототип не обязан быть красивым — он должен в первую очередь работать.
• Опять же: коммуницируйте. Обсуждайте всё, в чём сомневаетесь, даже то, что вам кажется незначительным. От вовлечённости разработчиков и самого заказчика зависят и скорость работы, и её качество.
• Если позволяют сроки, лучше сделать прототип максимально подробным и проработанным. Так на этапе тестирования вы сможете проверить больше гипотез.
• Делайте кликабельный прототип. Этот совет перекликается с предыдущим, но всё же немного о другом: можно сделать визуально подробный интерфейс, но не наделить его интерактивностью. Однако если прототип будет кликабельным, значит, он будет более приближен к реальному продукту. Следовательно, при разработке чистового проекта вы с меньшей вероятностью встретитесь с какими-либо подводными камнями: навигация будет проработана и протестирована.

Как создаются прототипы в нашей студии

• В начале было слово, и слово было бриф. Первое, что мы делаем — высылаем заказчику бриф (или он просто оставляет на сайте почту и ему приходит готовый шаблон), где просим как можно более подробно рассказать об идее, описать ЦА, конкурентов и задачи проекта, дать пожелания по дизайну и сервисами разработки.

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

• Приступаем непосредственно к прототипированию. Сначала создаём low-fidelity прототип интерфейса со всеми основными элементами и сценариями навигации, подробно описываем его наполнение и функции, существующие в системе роли и их возможности. Дальше результат работы согласовываем с заказчиком, вносим необходимые изменения.
• Создаём high-fidelity прототип: добавляем в lo-fi набросок цвета, иконки, окна подсказок и прочие графические элементы.
• Передаём разработчику high-fidelity прототип и ТЗ с полным списком требований к продукту. В техзадании мы описываем взаимосвязь элементов, логику их работы, те результаты, которые нужно получить при взаимодействии с каждым из них. Благодаря этому у разработчика не возникает дополнительных вопросов, он точно знает, что и где нужно делать, как именно это должно работать. Таким образом, процесс разработки не затягивается и вы можете получить готовый продукт в те сроки, которые поставили изначально.

Что в итоге

Этап прототипирования, пожалуй, один из самых важных во всей разработке приложения или сайта. Правильно собранный прототип интерфейса позволяет установить рамки, не выходя за которые можно быстро и спокойно создать удобный продукт.

Чтобы узнать о сроках, ценах и возможностях разработки больше — на сайте нашей студии ZeroToOne можно записаться на бесплатную консультацию. За полчаса обсудим ваш проект, поможем рассчитать сроки, стоимость и подобрать подходящие инструменты 🙂

БЕСПЛАТНЫЙ прототипирующий инструмент: Построить интерактивные проекты прототипа

Figma

. Платформа дизайна All-One

DesignPrototygingDesign Systemdownloads

Figjam

Столога для команды

онлайн-доборная доска. Бесплатные профессионально созданные файлы, которые вы можете дублировать, микшировать и использовать

Плагины и виджеты

Расширьте возможности и автоматизируйте работу

События и прямые трансляцииЛучшие практикиОбразовательная программаГруппы пользователейСоздатели сообществ

ВойтиНачать работу

Начать работу

Начать работу

Воплотите свои идеи в жизнь с помощью анимированных прототипов. Тестируйте концепции раньше и чаще. Создайте лучший план развития.

Начало работы

Создавайте прототипы, похожие на реальный опыт

Превратите файлы статического дизайна в интерактивный опыт — кодирование не требуется.

• Интуитивная сборка: Просто подключите элементы пользовательского интерфейса и выберите взаимодействия и анимацию.
• Взаимодействия: Определение малозаметных взаимодействий, таких как щелчок, наведение курсора, нажатие кнопки и т. д.
• Мобильный просмотр: Испытайте свои проекты в реальной жизни с помощью нашего мобильного приложения Figma, доступного для iOS и Android.

Показывайте, а не рассказывайте свое видение взаимодействия

Избавьтесь от догадок при разработке, подробно описав детали взаимодействия, которые вы представляете.

• Расширенные переходы с помощью Smart Animate: Автоматически анимируйте похожие объекты и создавайте детальные переходы.
• Динамические наложения: Создание нескольких слоев интерактивных наложений содержимого.
• Анимированные GIF-файлы: Используйте GIF-файлы для представления моушн-дизайна, видеоэлементов и тонких анимаций.

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

Бет Хорн, старший научный сотрудник Bulb

Сделайте все с помощью одного инструмента

Больше не нужно прыгать между инструментами. Создавайте дизайн, прототипируйте, делитесь и собирайте отзывы в Figma.

• Платформа «все в одном»: Переключение между файлом проекта и живым прототипом. Изменения дизайна мгновенно отображаются в вашем прототипе.
• Прототип, которым можно поделиться: Поделитесь ссылкой на свой прототип. Просматривайте его в любом месте, где есть Интернет.
• Встроенные комментарии: Комментарий в прототипе. Они переносятся в файл дизайна, поэтому ничего не потеряется.

Другие способы использования прототипов Figma

• Наблюдение за испытуемым на исследовательских сессиях
• Взаимодействие с живыми прототипами в Notion или Dropbox инструменты

Узнайте, как Figma может помочь вам спроектировать от начала до конца

Design

Learn more

Design Systems

Learn more

Design process

Learn more

• Twitter
• YouTube
• Instagram
• Facebook

Use Cases

• UI design
• UX design
• Каркас
• Диаграммы
• Мозговой штурм
• Гибкие рабочие процессы
• Стратегическое планирование
• Шаблоны
• Удаленное проектирование
• Agencies
• Figma for education

Explore

• Design features
• Prototyping features
• Design systems features
• Collaboration features
• Design process
• FigJam
• Pricing
• Enterprise
• Organization
• Professional
• Клиенты
• Безопасность
• Интеграции
• Контакты

Сравнить

• Sketch
• Adobe XD
• Invision Studio
• Framer
• Design on Windows
• Miro

English

Sketch · Инструменты прототипирования для всех

Пусть ваши грандиозные идеи говорят сами за себя. Создавайте прототипы в Sketch и воплощайте свои идеи в жизнь.

Начните бесплатно

Нет необходимости в таких инструментах, как

Посмотреть прототип

Посмотреть прототип

Посмотреть прототип

• Создавайте маршруты пользователей за считанные секунды

  Соединяйте экраны, артборды и элементы пользовательского интерфейса с помощью анимированных взаимодействий всего за несколько кликов.

• Создавайте элементы один раз (и навсегда)

  Используйте и повторно используйте общие элементы пользовательского интерфейса (и их взаимодействие) в своих прототипах. Избегайте покрытия старой земли и сэкономьте еще больше времени.

• Движение без трения

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

• A/B-тестирование так же просто, как ABC

  Имея несколько начальных точек в одном документе, вы можете представить тестировщикам несколько потоков из одного места. Дайте всем вашим великим идеям возможность сиять.

• Проверьте свои идеи в реальных условиях

  Контекст важен для четкого общения. Протестируйте свои прототипы в приложении для Mac, в веб-браузере или в нашем приложении для iPhone. См. их на месте мгновенно.

• Аутентичное взаимодействие с Hotspots

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

• Создать наложения

  Новый

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

  Прототип

  • Оверлеи бывают всех форм и размеров — от общих таблиц в стиле iOS до модальных окон, блокирующих взаимодействие и требующих внимания.

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

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

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

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

  • Хотите размещать наложения друг над другом — например, предупреждающие сообщения поверх контекстных меню? Нет проблем — все работает именно так, как вы ожидаете. Кроме того, вы можете выбрать, будет ли закрытие одного наложения закрывать их все или только активное.

  Подробнее о наложениях можно прочитать в нашем блоге и в нашей документации.

• Применяйте уникальные взаимодействия

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

• Специальный интерфейс для прототипирования

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

• Без дополнительных затрат

  Никаких дополнительных приложений, никаких дополнительных платежей — можете попрощаться с подпиской InVision.

• Делитесь напрямую, тестируйте где угодно

  Мгновенно создавайте ссылки на свои прототипы, отправляйте их по электронной почте или вставляйте в другие инструменты, такие как Notion, для встраивания — готовые к тестированию в приложении и браузере.

• Обмен отзывами, быстро

  Неограниченное количество гостей, которых вы можете пригласить для тестирования своих прототипов — бесплатно! Если кто-то новый нуждается в взгляде на ваш проект, его понимание будет только приглашением.

Приложение для iPhone

Если оно сделано для мобильных устройств, протестируйте его там

Создаете мобильное приложение? Избавьтесь от догадок при предварительном просмотре в настольном браузере. Получите реальный опыт, протестировав прототипы в нашем приложении для iPhone или в мобильном браузере по вашему выбору.

Скачать в App Store

Наше приложение для iPhone работает исключительно с документами Workspace.

Демо

Попробуйте их вживую

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