В прошлом году, принятие Sketch в Google, где я работаю, снял и теперь широко предпочтительным инструментом.

Чем больше инструментов в наших поясов, лучше, так что вот мое взятие на то, почему Эскиз и новый материалы design ¹ Система отличный матч .

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

²

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

Давайте создадим приложение Notes

В этой статье мы собираемся сделать очень простое приложение — Заметки приложение.К счастью для нас, все компоненты мы должны уже доступна в последней Sketch приложение.Эти экраны Мы создадим:

⁴

Вы также можете скачать Эскиз | file__4 6 (ZIP), который был использован, чтобы сделать это приложение отмечает прототип;это может помочь вам в этом в учебнике .

Template

В нашем шаблона — File → New from Template → Material Design — Вы увидите широкий набор компонентов, значков и макетов.Сам лист был разработан трудолюбивой материал проектной группы в Google и была портирована с любовью и заботой Амар Sagoo и меня.Группы и объекты названы, оформлены и организованы в по-настоящему Sketch для пользователя способом .

Все это начинается с Artboard

С помощью нового документа открытом — File → New (или Command + N) — пресс-A ключ (который является ярлык для инструмента монтажной).Вы можете нарисовать монтажной области как если бы вы нарисовать фигуру, кусочек или любой другой объект.Это потому, что эскиз имеет простой набор объектов, которые все работают так же (подробнее об этом позже).При выборе инструмента монтажной, вы можете увидеть на правой стороне список размеров монтажной, в том числе — Вы догадались — все материальные проектных размеров.Нажмите на кнопку "Портрет" Мобильная размера и белая коробка должна появиться .

⁷

Убийца Sketch оснащены # 1: Масштаб-независимый Exports

Примечание: Материал конструкции определяется с помощью плотность-независимый pixels __37 | 9 .Как Android Разработчики страницы explains ¹⁰ , блок плотности независимая точка (DP), соответствует физическому размеру пикселя в 160 DPI.Хотя мы будем использовать пикселей units __49 | 11 (px) в этом уроке Sketch, это действительно плотность-независимый пикселей, потому что вы можете масштабировать их вверх или вниз по экспорт .

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

Пребывание в 1x пикселей, а затем просто export на визуализируются размеров.Эскиз делает, что так легко, как простым перетаскиванием.Вы увидите панель в нижней левой показывая вам, размеры прорези для экспорта, и вы даже можете добавить свои собственные соглашения суффикс для имен файлов.Когда вы делаете операцию "Экспорт всех" (Command + Shift + E), вы увидите, что монтажной области, а Эскиз будет экспортировать все версии растрового изображения .

¹²

Теперь голова шаблона стикер листа и выберите "мобильные глобальные элементы" монтажной области.Только важные вещи есть выбор, так что просто нажмите на эту монтажной области и скопировать и вставить в документ.Теперь у вас есть основной макет дизайна приложения мобильного материального.Как вы можете видеть на панели Layers, у вас есть группа с именем "экран".Вы должны будете только содержимое этой группе, так что просто идти вперед и разгруппировать (Command + Shift + G) группа "экран".Теперь вы увидите четыре слоя:

¹⁴

В Sketch, маски работать вверх, это означает, что слои выше в маскирующего объекта обрезаются по этому объекту.В Adobe Illustrator, однако, вы бы разместить форму поверх других слоев, чтобы создать маску отсечения;это бросил меня в первую очередь.Подробнее о масках, проверьте documentation__10 Чешский Кодирование-х | 16 .

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

¹⁷

Давайте вернемся к наклейке листа.Давайте захватить половину ширины карта components __38 | | 19__10 и вставить их в нашей композиции.Предложенные поля для этих карт 8 пикселей, так что идти вперед и пространство их .

²⁰

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

Отлично!Итак, мы получили композицию для нашего первого материала приложение.Это вид .__ 7 прокрутка карты |

Навигация Drawer

²²

Чтобы обойти различных областях нашего приложения, мы будем использовать компонент навигации ящика.Давайте дублировать наш оригинальный монтажной области: Нажмите на монтажной области в списке панели Layers или на название монтажной области на странице, а затем нажмите Command + D.Это будет дублировать монтажной области и переместите новые монтажной области 100 пикселей вправо.Вы можете продолжить подачу просто Дублирование и изменение, что то, что мы будем делать теперь .

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

Материал Forms

²⁴

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

ПовторноеArtboards

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

²⁶

Sketch в Убийца Особенность # 3: Цвет Picker

Эскиз обеспечивает мощный выбора цвета.Просто нажмите Control + C, чтобы выбрать цвет в любом месте на экране.Комбинируя это с Command нажмите по ссылке на элемент, вы можете легко перекрасить какой-либо объект в кратчайшие сроки .

²⁸

³⁰

При копирова� ...

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров