Sketch с материальным дизайном

Posted on by riasevastopol

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

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

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

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

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

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

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

Шаблон

В отечественном шаблоне – ФайлСоздать из шаблонаМатериальный дизайн – вы заметите широкий комплект элементов, макетов и иконок. Сама страница была создана командой материального дизайна в Гугл и была аккуратно приспособлена Amar Sagoo и мной. Группы и объекты названы, оформлены и организованы специально для Sketch.

Все начинается с монтажной области

В то время, когда ваш новый документ открыт – ФайлСоздать (либо Ctrl + N) – надавите клавишу A (тёплая клавиша для инструмента монтажной области). Вы имеете возможность нарисовать монтажную область как если бы вы желали нарисовать любую фигуру либо каждый объект. Это сделано потому, как Sketch располагает несложным комплектом объектов, каковые трудятся подобным образом (подробнее об этом позднее).

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

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

Потрясающая функция Sketch # 1: Возможность инвариантного к масштабу экспорта

Примечание: Материальный дизайн определяется применяя пиксели, свободные от плотности. Как это растолковывают на сайте Android разработчиков, объект складывающийся из пикселей, свободных от плотности (DP) соответствует физическому размеру пикселя в 160 dpi. Но, в данном тьюториале, мы будем применять пиксельные объекты, по причине того, что вы имеете возможность их масштабировать вверх либо вниз Не смотря на то, что мы будем применять пиксельных блоков (ПВ) в этом уроке Sketch, это вправду плотность-свободный пикселей, по причине того, что вы имеете возможность масштабировать их вверх либо вниз при экспорте.

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

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

В то время, когда вы задаете операцию “Экспортировать все” (Ctrl + Shift + E), вы заметите эту монтажную область, а Sketch со своей стороны, экспортирует все версии битовой матрицы.

Неизменно трудитесь на 1 ? пикселях . Вы имеете возможность легко масштабировать вверх либо вниз на панели “Экспорт”.

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

Вы будет нужен содержимое лишь ее, так что следующим действием выберете разгруппировать (Ctrl + Shift + G). Сейчас вы заметите четыре слоя:

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

  • панель навигации
  • Это знак (знаки на панели Layers отмечены фиолетовым цветом), что свидетельствует, что будет везде однообразен, и если вы измените содержимое знака, оно будет изменяться везде в файле.
  • панель состояния
  • Это верхняя панель на экране с информацией о Wi-Fi, времени и т.п.
  • панель приложения
  • Это ваш главный хэдер навигации, что отражает наименование текущей страницы, и кнопку вверх либо кнопку открыть.
  • фоновый цвет экрана
  • Это цвет фона, но это кроме этого и маска. Вы имеете возможность удалить его, потому, что ваша монтажная область будет функционировать в качестве маски для вашего экрана.

Маски в Sketch работаютсверху!

В Sketch, маски трудятся сверху, это указывает, что слои выше маскирующего объекта обрезаются по этому объекту. В Adobe Illustrator, к примеру, вам необходимо размещать объект поверх вторых слоев, дабы создать оберточную маску; это в начале сбивало меня с толку. Чтобы подробнее определить о масках, почитайте Bohemian Coding s documentation.

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

Карты являются обычный паттерн и превосходно трудятся с разнородной информацией.

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

Потрясающая функция Sketch # 2: Управление по наведению

Одина из самых нужных функций Sketch имеет дело со спейсингом: Выберите объект, удерживая клавишу Alt, а после этого поводите около него мышью, дабы заметить расстояния от вашего выбранного объекта до всех остальных. А удерживание Ctrl + Alt и наведение мыши рядом с объектом, продемонстрирует размеры объектов, в зависимости от их соотношения величины с другими объектами, содержащимися в группе.

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

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

Панель навигации

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

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

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

Формы материального дизайна

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

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

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

Повторное применение монтажных областей

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

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

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

Потрясающая функция Sketch # 3: Выбор цвета

Sketch владеет потрясающим инструментом выбора цвета. Легко надавите Ctrl + C, дабы выбрать цвет в любом месте на экране. Сочетая это с Ctrl + нажатие на любой элемент, вы сможете легко перекрасить любой объект в считанные секунды.

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

Добавление вкладок

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

Скопируйте и засуньте и расположите рядом с панелью приложения. Если вы выберете всю вкладку “панели приложения” из перечня, вы увидите, что она неподходящего цвета. Исходя из этого измените цвет фона: Надавите (Ctrl + щелчок) на фоне вкладок, а поменять их цвет на отечественный главный цвет.

Переместите вкладки наверх, и все готово.

Вкладки разрешают по-различному представить одинаковые типы контента.

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

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

Создание перечня

Вы станете применять перечни довольно часто. Они являются фундаментальную компоненту любого приложения, а материальный дизайн дает нам пара опций. Мы сделаем отечественную вкладку “публичные заметки” в виде перечня.
Скопируйте перечень “из трех строчков” из комплекта стикеров и засуньте его в новую монтажную область. Разгруппируйте перечень, а после этого Alt + перетаскивание объекта, для комплекта элементов либо группы. Повторяйте это, пока у вас не будет страница, которая состоит всецело из строчков.

Перечни – это распространенный метод отображения данных.

Дополнительные действия – тёплые клавиши

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

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

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

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

Так, у вас показался взаимосвязанный комплект элементов.

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

Когда вы это сделаете, вы увидете, что другие последовательности машинально обновились. Ура знаков!

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

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

Нижняя панель

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

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

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

Диалоговое окно, в то время, когда оно необходимо

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

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

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

Стремительный старт посредством ресурсов для Sketch

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

  • Комплект стикеров материального дизайна. Это последний комплект стикеров. Хороший комплект стилей и элементов, каковые легко копировать и вставлять в ваши новые композиции.
  • Комплект иконок материального дизайна
  • Данный комплект иконок из хранилища материального дизайна на GitHub.
  • Фреймы материального дизайна
  • Это комплект иконок и цветов кроме этого хранилища материального дизайна на GitHub.

Вывод: Держите идеи в голове, а инструменты в руках

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

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

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

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

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

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

Перевод статьи

Случайные статьи:

Cкевоморфизм, плоский и материальный дизайн | #09 ДВВВ


Подборка похожих статей:

riasevastopol

More Posts