В этой статье мы собираемся создать в Sketch юзерфлоу и схемы алгоритмов выполнения задач. Мы будем использовать символы Sketch, используя базовые элементы и несколько настроек, чтобы наши символы работали на нас.
«Юзерфлоу представляет собой диаграмму последовательности движений или действий, людей или вещей, связанных со сложной системой или деятельностью». — Naema Baskanderi
Для построения юзерфлоу нам понадобятся элементы для страниц, стрелки, действия (включая решения и индикаторы «да» / «нет»), метки и примечания. Я рассмотрю каждый из этих элементов, как они должны выглядеть (если вы склонны копировать мой стиль), как они должны работать и как они вписываются в общую картину. Но прежде чем мы это сделаем, нам нужно придумать имена элементов. Это один из ключевых факторов в этой работе. Давайте приступим.
Имена слоев и групировка
Да, по двум конкретным причинам. Во-первых, это хорошая практика, чтобы названия ваших слоев были упорядочены, особенно, если вы передаете файлы другим людям. Когда вы создаете символ с несколькими текстовыми полями в нем, правильно названные текстовые слои помогут вам различить, где какой текст, когда вы пытаетесь заменить или корректировать его.
Вторая причина намного важнее. Sketch автоматически группирует символы, стили текста и общие стили в разные слои, предполагая, что вы следуете определенному синтаксису. Sketch полагается на соглашения об именах URL и папок, например, следующие два символа будут сгруппированы аккуратно вместе.
- Arrow/S-Shape/Left to Right
- Arrow/S-Shape/Right-Down-Right
Тогда, если мы назовем еще один:
- Arrow/Default/Left-Up-Left
он также будет сгруппирован под стрелками, но в другой подпапке — Default. Эта категоризация позволяет нам найти именно тот символ, который нам нужен, когда он понадобится:
Помните об этом, когда называете что-то по мере развития проекта, особенно текстовые слои, символы и общие стили.
Элемент страницы
«Страница» является фундаментальной частью нашего юзерфлоу. Пользователи веб-сайта или приложения будут следовать различным маршрутам, выполнять различные задачи, и страницы всегда будут в центре этого процесса.
Чтобы создать элемент страницы, нам нужен прямоугольник и текстовое поле над ним. Стили прямоугольника включают в себя цвет #325 372, шрифт Helvetica Neue, средний вес и размер шрифта 11. Вы можете создать общий стиль, так как другие элементы будут иметь одинаковую типографику, хотя элемент страницы будет использовать прописные буквы. Для этого в параметрах измените текстовое преобразование на верхний регистр.
Прямоугольник равен 144px на 96px с радиусом 5, цвет #F7FCFD для фона и #B7E7EE для внутренней границы в 1px. Это хорошая идея, поменять стиль прямоугольника страницы в общий стиль. Это позволит легко редактировать его в дальнейшем.
Переименуйте текстовый слой в «Имя страницы» (Page name). Таким образом, при повторном использовании этого элемента в качестве нового символа, переопределение текста будет иметь заголовок вместо «text». Выделите оба и преобразуйте их в один символ через кнопку «Create Symbol» на панели инструментов.
Создание пользовательских сочетаний клавиш
В этой статье мы создадим много символов. Sketch не имеет конкретной встроенной комбинации клавиш для этого, но мы можем назначить собственное сочетание.
Сначала перейдите в «Системные настройки» и выберите пункт «Клавиатура». Выберите вкладку «Сочетания клавиш». В левой панели выберите «Сочетания клавиш программ» и нажмите кнопку «+». Появится оверлей; в списке приложений найдите Sketch. В разделе Menu Title вам нужно указать конкретное название пункта меню, которое нам нужно, в нашем случае это создание символа (Create Symbol) (это первый пункт меню под Layer). Наконец, выберите комбинацию клавиш, и все.
Совет: это можно использовать для любого приложения.
Стрелки
Вы можете сделать столько разных стилей стрелок, сколько пожелаете, но здесь я покажу вам, как для начала создать единую, настраиваемую стрелку. Вы можете добавить свой собственный стиль и варианты позже.
Как видно на приведенном выше рисунке, стрелка будет иметь много форм; мы должны создавать ее с умом. Во-первых, нам нужна начальная точка и конечная точки. В моем случае это открытый круг и треугольник. Треугольник — это 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 делает это автоматически за вас, но не всегда, поэтому лучше дважды проверить.
Наконец, у нас есть примечания. У меня есть для него стиль: # A4A4A4 цвет текста, шрифт Helvetica Neue, обычный вес на этот раз и 11 размер шрифта. Это отличается от всего остального, поэтому не превращайте текст примечания в символ. Добавляйте его только, как общий стиль.
Теперь мы закончили с основными фигурами и элементами, теперь мы можем объединить блок-схему вместе.
Соединяя все вместе
На приведенном выше рисунке показаны все символы, которые есть в моем распоряжении. Это своего рода коллекция, и я старался держать ее маленькой без особых настроек. На приведенном ниже рисунке показан пример блок-схемы юзерфлоу, созданный с использованием этих символов.
Все, что вам необходимо — это выбрать нужный элемент из раздела символов и упорядочить блок-схему на вашем артборде.
Заключение
Теперь у вас есть довольно классный Sketch-файл, который легко позволит вам или вашей команде создавать блок-схемы юзерфлоу и схемы алгоритмов выполнения задач!
Следующие шаги могут включать в себя создание руководства по стилю для ваших блок-схем; способы легкого изменения цвета, типографики и тому подобное. Возможно, также создание документации в своем файле Sketch, если вы планируете использовать ее вместе со своими товарищами по команде или раздавать ее даром. Следите за обновлениями по этим темам в ближайшее время!
Нет комментариев