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

«Юзерфлоу представляет собой диаграмму последовательности движений или действий, людей или вещей, связанных со сложной системой или деятельностью». — Naema Baskanderi

Для построения юзерфлоу нам понадобятся элементы для страниц, стрелки, действия (включая решения и индикаторы «да» / «нет»), метки и примечания. Я рассмотрю каждый из этих элементов, как они должны выглядеть (если вы склонны копировать мой стиль), как они должны работать и как они вписываются в общую картину. Но прежде чем мы это сделаем, нам нужно придумать имена элементов. Это один из ключевых факторов в этой работе. Давайте приступим.

Символы Sketch превосходно подходят для создания блок-схем юзерфлоу
Символы Sketch превосходно подходят для создания блок-схем юзерфлоу

Имена слоев и групировка

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

Как мы будем именовать слои

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

  • Arrow/S-Shape/Left to Right
  • Arrow/S-Shape/Right-Down-Right

Тогда, если мы назовем еще один:

  • Arrow/Default/Left-Up-Left

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

Организованные символы в Sketch
Организованные символы в Sketch
Помните об этом, когда называете что-то по мере развития проекта, особенно текстовые слои, символы и общие стили.

Элемент страницы

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

Чтобы создать элемент страницы, нам нужен прямоугольник и текстовое поле над ним. Стили прямоугольника включают в себя цвет #325 372, шрифт Helvetica Neue, средний вес и размер шрифта 11. Вы можете создать общий стиль, так как другие элементы будут иметь одинаковую типографику, хотя элемент страницы будет использовать прописные буквы. Для этого в параметрах измените текстовое преобразование на верхний регистр.

Типографика в Sketch

Прямоугольник равен 144px на 96px с радиусом 5, цвет #F7FCFD для фона и #B7E7EE для внутренней границы в 1px. Это хорошая идея, поменять стиль прямоугольника страницы в общий стиль. Это позволит легко редактировать его в дальнейшем.

Общий стиль прямоугольника

Переименуйте текстовый слой в «Имя страницы» (Page name). Таким образом, при повторном использовании этого элемента в качестве нового символа, переопределение текста будет иметь заголовок вместо «text». Выделите оба и преобразуйте их в один символ через кнопку «Create Symbol» на панели инструментов.

Создать символ

Создание пользовательских сочетаний клавиш

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

Сначала перейдите в «Системные настройки» и выберите пункт «Клавиатура». Выберите вкладку «Сочетания клавиш». В левой панели выберите «Сочетания клавиш программ» и нажмите кнопку «+». Появится оверлей; в списке приложений найдите Sketch. В разделе Menu Title вам нужно указать конкретное название пункта меню, которое нам нужно, в нашем случае это создание символа (Create Symbol) (это первый пункт меню под Layer). Наконец, выберите комбинацию клавиш, и все.

Совет: это можно использовать для любого приложения.

Создание пользовательских сочетаний клавиш для Sketch
Создание пользовательских сочетаний клавиш для Sketch

Стрелки

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

Стрелки

Как видно на приведенном выше рисунке, стрелка будет иметь много форм; мы должны создавать ее с умом. Во-первых, нам нужна начальная точка и конечная точки. В моем случае это открытый круг и треугольник. Треугольник — это SVG-значок, который я нашел в Noun Project. Вы можете сделать простой треугольник самостоятельно или использовать этот значок.

Я использую цвет #325 372 для стрелки, границы круга и для линии. Круг имеет белый фон #FFFFFF. Теперь превратите их в символы и назовите их соответствующим образом. Если вы хотите немного сумасшествия, можете создать индивидуальные символы для треугольника с вершинами, направленными вверх, вниз, влево или вправо. Но это не обязательно.

Разные окончания стреловк

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

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

Создание символа прямой стрелки

Во-первых, давайте создадим квадратный артборд. Квадрат поможет нам сохранить форму, и будет легче делать стрелки. Мой квадрат размером 80px на 80px. Я хочу начать с создания артборда для каждой стрелки. Таким образом, я смогу увидеть их все сразу. Начнем с создания первых стрелок, обращенных влево, вправо, вверх и вниз. Теперь выберите свои стрелки и превратите их в символы так, как мы это делали прежде. Не забудьте также использовать недавно настроенное сочетание клавиш. Назовите эти символы, Arrow/Default /Left, Arrow/Default/Right и так далее (вы поняли принцип).

Создание символа прямой стрелки

Создание изогнутых стрелок

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

В новых артбордах, размером 80px на 80px, и используя векторный инструмент (V), нарисуйте линии стрелки для L-образных, S-образных и U-образных стилей. Убедитесь, что ваши линии в квадрате. Пока не делайте никаких кривых. Если у вас возникли проблемы с созданием идеальных линий, поместите точки более или менее там, где они должны быть, а затем отредактируйте их местоположение вручную, введя позиции X и Y.

Создание изогнутых стрелок

Взгляните на изображение. Далее нам нужно отредактировать кривые. Для каждой линии выбирайте только точки, составляющие углы. Не выбирайте начальную или конечную точку. С правой стороны увеличьте значение угла до нужного вам. Я установил 10px. Теперь углы будут автоматически изменяться без искажения линии.

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

Последнее, что нам нужно сделать, это добавить начальную и конечную точки. Но прежде, чем мы это сделаем, давайте превратим линии (пока только линии) в символы. Мы хотим, чтобы линия была регулируемой на основе ее фактических конечных точек, за исключением значков на ее концах. Мы добавим начальную и конечную точки через минуту. Назовите эти три стрелки Arrow/L-Shape/Right-Down, Arrow/S-Shape/Right-Down-Right и Arrow/U-Shape/Right-Down-Left.

Превратить линии в символ

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

Наконец, чтобы изменить размеры стрелок, как для начальной, так и для конечной точки, в настройках выберите fix width и fix height. Кроме того, не забудьте переименовать их в Начальную точку и Конечную точку (Start point и End point). Это изменение имени упростит понимание того, что есть что при изменении типов.

Символы стрелок

Мы должны повторить это с оставшимися стрелками, включая остальные направления стрелок L-образное, S- образное и U- образное. Сделайте это, повторив предыдущие шаги.

Как насчет разных стилей стрелок?

Вы можете иметь столько стилей стрелок, сколько хотите; штрих-пунктирная, пунктирная из точек, сплошная или любая другая. Довольно утомительно создавать новый набор стрелок для каждого стиля, если вы хотите использовать более одного стиля в одном файле. В противном случае просто обновите общий стиль. Не забудьте отрегулировать имена на Arrow/S-Shape/Right-Down-Right/Dotted или Arrow/Dotted/S-Shape/Right-Down-Right.

Действия

Я думаю, что они это самое важное. Остальные элементы не очень сложны. Элементы действия здесь включают элементы индикаторов «да» / «нет», решение, метку одного действия.

Индикаторы «Да» / «Нет»

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

Эти индикаторы просты (по крайней мере, по сравнению со стрелками). Я сделал их, загрузив два значка из Noun Project. Вот ссылка и ссылка для X. Значки Noun Project белые, #FFFFFF. Цвет фона #F89B8D для? и#FECD75 для ??.

Преобразуйте их в символы и назовите их. Annotation/Yes-No/? и Annotation/Yes-No/?? (да, эмодзи поддерживаются).

Блок принятия решения

Процесс создания этого элемента очень похож на создание элемента страницы. Создайте квадрат (мой 126px на 126px) и поверните его или преобразуйте его под углом 45º. Кроме того, я добавил радиус 5 пикселей на квадрат. Цвет его фона #F2F2F2, без границы. Сохраните его как общий стиль. На квадрате нам нужна текстовая область. Я назвал свой текстовый слой Decision. Помните, что названия слоев важны. Вы можете повторно использовать стиль общего текста, если вы сохранили его раньше. Если нет, стиль для текста: цвет #325 372, шрифт Helvetica Neue, средний вес, 11 размер шрифта. Если вы копируете мои стили, преобразуйте стиль и текст, и квадрат в общие стили.

Индикатор принятия решения

Наконец, пришло время преобразовать решение в символ. Я назову его Annotation/Decision.

Метка одного действия

Метка одного действия будет повторно использовать стили из блока принятия решения. Это прямоугольник; мой 117px на 24px. Повторите использование одного и того же стиля из индикатора принятия решения, как для прямоугольника, так и для текста. Не забудьте назвать текстовый слой. Я назвал свой Action. Преобразуйте его в символ и назовите символ Annotation/Action. И мы закончили здесь. Пойдем дальше!

Примечания и метки

Последние две вещи в нашем списке — это элементы примечаний и меток. Начнем с меток. Это немного сложно, но мы справимся. Чтобы упростить форму, вы можете скопировать прямоугольник и текст из действия, которое мы сделали ранее. Нам понадобится прямоугольник, мой 117px на 24px, с радиусом 5px. Он имеет цвет #6FCFDB для фона. Затем, область текста. Повторно используйте стиль текста из индикаторов действия или решения. Затем создайте новый общий стиль назовите его Label text и перекрасьте текст в цвет #FFFFFF. Затем преобразуйте их в символ еще раз (вы использовали сочетание клавиш и это входит в привычку? Отлично. ?)

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

Настройка ресайза в Sketch

Наконец, у нас есть примечания. У меня есть для него стиль: # A4A4A4 цвет текста, шрифт Helvetica Neue, обычный вес на этот раз и 11 размер шрифта. Это отличается от всего остального, поэтому не превращайте текст примечания в символ. Добавляйте его только, как общий стиль.

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

Соединяя все вместе

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

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

Пример использования юзерфлоу

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

Заключение

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

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