Advertisement
  1. Web Design
  2. Sketch

Как сделать удобными и многоразовыми файлы эскиза

by
Read Time:11 minsLanguages:

Russian (Pусский) translation by Dima (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

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

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

Руководство пользователя

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

«Как использовать стрелки»

Начнем с новой монтажной доски, я называю «Как использовать стрелки». Нажмите A, чтобы создать новую Artboard, а в правом верхнем углу выберите Paper Size и Letter. Sketch автоматически разместит для вас правую редакционную панель (это также работает с размерами экрана рабочего стола и мобильного телефона!).

Paper sizes for Artboards in SketchPaper sizes for Artboards in SketchPaper sizes for Artboards in Sketch
Размеры бумаги для монтажных областей в эскизе

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

Организация стилей текста

Так же, как с символами или стилями слоев, мы также можем организовать текстовые стили. Для этих страниц руководства у меня есть три разных стиля текста: H1, H2 и тело.

Мой H1 - Helvetica Neue, Regular, 24px размером с высотой линии 30px. H2 - Helvetica Neue, Bold, размер 14px с высотой линии 20px. Тело Helvetica Neue, Regular, 12px размером с высотой линии 20px. Все трое используют цвет # 325372.


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

  • Ручные тексты/заголовок/H1
  • Ручные тексты/заголовок/H2
  • Ручные тексты/тело

Мне это нравится - это делает мои файлы Sketch более организованными!

«Как использовать аннотации»

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

Автоматически изменять размер кнопки

В первоначальном руководстве мы убедились, что аннотации Action и Label были изменены вручную с помощью собственных свойств Sketch. Однако, если вы хотите использовать классный плагин для изменения размера для вас, могу ли я предложить загрузить и использовать кнопку Rebel Button или Paddy?

«Как использовать страницу»

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

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

Руководство по стилю

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

Цвета

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

Создание и организация цветовых стилей

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

Во-первых, синтаксис: Styles/Colour/{Colour name} (Стили / Цвет / {Цветное имя}). Итак, Styles/Colour/Error red (стили / цвет / ошибка красного цвета) или Styles/Colour/Background blue (стили / цвет / фон синий). Когда вы закончите добавлять их, посмотрите и полюбуйтесь, как аккуратно организованы эти цвета в раскрывающемся списке Layer Style (Стиль слоя)! Кроме того, вы можете видеть, что в исходном учебном пособии есть оставшиеся стили. Мы договоримся об этом чуть позже.

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

Настройка цвета

Вернитесь на страницу с символами. Затем примените те же стили, которые мы только что создали, к элементам Action, Label, Yes и No. Таким образом, если вы решите, что вы больше не хотите, чтобы «Да» был желтым, но хотите чтобы он был зеленым, все, что вам нужно сделать, это обновить цвет в руководстве по стилю, а все «Да» во всем файле Sketch изменит цвет.

Цвета документа

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

Сохранение ваших монтажных работ и слоев

Если вам нравится быть организованным, я предлагаю загрузить плагин Sort Me. Он сортирует как слои, так и графические элементы, в алфавитном и цифровом (или наоборот). Вот несколько других ресурсов эффективности для Sketch:

Типография

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

Реорганизация стилей текста

Теперь я хотел бы показать вам, как реорганизовать ваши текущие текстовые стили и переименовать их (если это необходимо). В раскрывающемся списке Text Style (Стиль текста) выберите самый последний вариант Organize Text Styles (Упорядочить стили текста) ... Это приведет к появлению нового окна, заполненного каждым из ваших стилей текста. Если вы дважды щелкните, вы можете переименовать его. Я хочу, чтобы вы переименовали их следующим образом:

  • Текст по умолчанию > схема текстов/действий
  • Метка текст > схема текстов/этикетки
  • Примечания > схема текстов/примечания
  • Страница текста > схема текстов/страница
  • Ручные тексты /... > Текстовый документ/...

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

Совет: Маленький значок минус [-] в левом нижнем углу удалит выбранный стиль. Но будьте осторожны: нет отмены, и вас не спрашивают, уверены ли вы в том , что хотите сделать.

Обновите стиль текста в руководстве по стилю, чтобы обновить типографику по всему файлу (точно так же, как с цветами).

Общие стили в оставшихся элементах

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

Организация общих стилей слоя

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

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

  • Bg действия > фон/действия
  • Пунктирная стрелка - > стрелка линии/пунктир
  • Стрелка - твердая > стрелка линии/твердая
  • Ярлык bg > фон/этикетки
  • Страница настроек фона/страница

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

Помните минус значок [-] Я уже его упоминал? Это для удаления стилей. Мне нужно, чтобы вы удалили серый фон. Это остаток от моего первоначального исследования дизайна и  он нигде не используется.

Наконец, закройте окно, выберите фон из «Аннотации решения» и выберите Create new Layer Style (Создать новый стиль слоя) в раскрывающемся списке. Назовите новый стиль ”Background / Decision”. Мы перейдем к настройке стилей и вернемся на страницу руководства по стилю. Скопируйте фон из элемента ”Редактирование аннотации”и ”Элементы страницы”.

Добавление и обновление стилей общего слоя

Вернитесь в руководство по стилю, вставьте два фонов в панель Стрелки и Элементы. (Я собираюсь только скопировать страницу и аннотацию решения).

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

После того, как вы закончите, в раскрывающемся списке Layer Style (Стиль слоя) выберите Update Layer Style (Обновить стиль слоя). Если вы перейдете на страницу примера схемы или на страницу с символами, вы увидите, что стили были обновлены. Это отличный пример стилей обновления в действии. Это именно то, что вы должны ожидать, если бы вы обновили документ для нового стиля дизайна, например, разные цвета бренда.

Совет: Если вы измените стиль элемента со стилем слоя на нем, вы можете вернуть его к исходному стилю, выбрав Reset Layer Style (Сбросить стиль слоя).

“Стрелки, стили линий, начальные и конечные точки“

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

Создание стрелки с пунктиром

На странице символов я хочу, чтобы вы скопировали первую стрелку, Arrow/Default/Right (стрелку / по умолчанию / вправо) и переименовали ее. Arrow/Dotted/Default/Right (стрелка / Пунктир. / По умолчанию / Вправо). Выберите строку стрелки и в раскрывающемся списке Layer Styles (Слой слоя) выберите Arrow line (Стрелка), затем Dotted (Пунктирная линия). Вот и все! У нас есть первая пунктирная стрелка.

Еще две вещи. Во-первых, идите вперед, а затем к оставшимся стрелкам. Придерживайтесь названия конвенции Arrow / Dotted / ..., чтобы выстроить хорошо организованный Symbols. Говоря об условных обозначениях и синтаксисах, вторая вещь, которую вы должны сделать, - переименовать каждую из исходных сплошных стрелок. Выпадающее меню Symbols (Символы) будет грязным, если вы этого не сделаете.

Используйте плагин Rename It Sketch, чтобы сделать это более понятным для вас! Выберите Plugins > Rename It > Find and Replace Layers/Artboard Names (Плагины»> «Переименовать»> «Найти и заменить имена слоев / артефактов). Или вы можете нажать Control + Option + Command + R для появления окна плагина. Там введите Arrow/Default или Arrow/S-Shape и замените ее Arrow/Solid/Default и Arrow/Solid/S-Shape и т. д. Убедитесь, что текущая область поиска выбрана для текущей страницы вместо слоя.

Начальная и конечная точки

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

И с этим мы закончили создание руководства по стилю!

Заключение

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.