UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Адаптивный дизайн в Sketch — Часть 1
Редакція
Редакція

Опубліковано • Оновлено

Адаптивный дизайн в Sketch — Часть 1

С последней версией Sketch (v.44) функция изменения размера группы была обновлена. Несмотря на то, что фундаментальных изменений нет, у нас появилось немного больше контроля над этой функцией. Я уже подробно писал об этой функции ранее. В этой статье я рассмотрю обновления и дам несколько новых советов. В следующей части этой статьи, я сравню функцию изменения размера групп с плагином Auto-layout от Anima.

Кратко о функции изменения размера группы

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

Что изменилось?

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

Яркий пример раскрывающий большинство возможностей

Наиболее важная деталь в этом примере – группа галереи в нижней части. Чтобы выполнить этот макет сетки, вам нужно использовать невидимые слои в группе. В противном случае пробел между сетками будет расти или уменьшаться при изменении размера. Символы в Sketch Я сделал таблицу, описывающую некоторые случаи, и показывающую соответствующие настройки в предыдущей версии программы. Конечно, некоторые из них не могли быть применимы в предыдущей версии, так как вы не можете выбрать несколько параметров одновременно. Sketch 44 символы

Советы и хитрости

1. Быстрое прикрепление ко всем сторонам

2. Сброс настроек изменения размера группы

3. Как изменить размер групп, содержащих текст

Для изменений текста, которые приводят к росту по вертикали, вы можете использовать математическую функцию ввода Sketch и значение высоты строки метки. Просто выберите группу и измените высоту на 241 + 24 * 2 и нажмите enter. 241 - это текущая высота, 24 - высота строки, а 2 - новое количество строк – да, вам нужно посчитать! Sketch будет вычислять результат и задавать высоту группы для корректировки значения. Для текстовых изменений, которые вызывают рост по горизонтали, например, кнопки, вы можете использовать плагин Sketch под названием Relabel (с плагином Runner это будет более эффективным). Я надеюсь, что функция автоматического изменения размера скоро появится, потому что вычисление размеров вручную кажется устаревшим!

4. Изучение функции “Авто выравнивание слоя” в символах

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

Критика

Прошел почти год с тех пор, как была введена функция изменения размера группы. Это был правильный и необходимый шаг. Но это обновление — это то, как эта функция должна была работать изначально. Поэтому я ожидал значительного улучшения вместо простого исправления. При этом не были добавлены очень необходимые функции, такие как: занесение в стеки, автоматическое изменение размера, привязка слоя к слою, сетки и макеты. Я думаю, что есть что-то очень важное, к чему компания Bohemian Coding не была достаточно внимательна – изменения рабочего процесса. Медленные и не продуманные обновления некоторых ключевых функций заставили дизайнеров найти временные неустойчивые рабочие процессы. Особенно в стилях слоев и функциях символов. Нехорошо подталкивать дизайнеров и команды к тому, чтобы настраивать вещи с нуля и часто адаптироваться к ним. Я думаю, что это действительно раздражает. В целом, я думаю, что у компании Bohemian Coding должна быть лучшая дорожная карта и она должна быть более осторожной при разработке ключевых функций. Мы любим Sketch и мы хотим,чтобы он был лучшим!

Что дальше?

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


Перевод статьи Emin Inanc Unlu

Найстарші коментарі (0)