С тех пор, как я начал создавать дизайн приложений, я раз или два жаловался на ПО для дизайна, особенно это касалось недостатка фич, которые были бы направлены на взаимодействие и поведение. На самом деле мы должны создавать актуальные системы, которые смогут реагировать на контекст (например: размер экрана, контент, принципы бренда…), больше, чем на создание скучных картинок, которые по сути являются просто пикселями. Это не просто наше удобство, это позволяет нам выражать истинные намерения посредством нашей работы, делая их понятной для каждого.
К счастью, в данный момент, создание систем стало более возможным благодаря более продвинутому подходу (спасибо Bohemian Coding и их Sketch).
Несмотря на то, что мы уже успели познакомиться с символами, это только часть решения. Недавно, разработчики Sketch подарили дизайнерами две прекрасные опции: вложенные символы и ресайз символов. И если первая подарила дизайнерам долгожданное удобство, то вторая является революцией в мире UI дизайна. Это подарило дизайнерам возможность погрузиться в мир разработки и представление того, как объединяются элементы. Это прекрасно!
Только задумайтесь: элемент UI - это не просто изображение или вектор. Он становится компонентом, который может адаптироваться в зависимости от отображаемого контекста. Например, одна и та же строка навигации может быть применена к рабочей области iPhone или iPad и/или иметь разные заголовки на экране. Элементы сетки, которые имеют разные изображения или текстовый контент, выглядят по-разному и их отношения с другими элементами или символом определяет их поведение. Внесите изменения в символ и изменения применятся везде. Изменяйте один элемент для добавления контекста. И теперь наступает самый захватывающий момент!
...
Руководство: адаптивный YouTube
Прежде, чем мы перейдем к практике, я бы хотел извиниться за слишком пафосное название статьи.
Давайте приступим! Я расскажу вам, как я сделал YouTube плеер используя Sketch 39 и новую фичу ресайза символов. Я покажу несколько прекрасных картинок в процессе рассказа. Некоторые из них было действительно сложно сделать! Пока, предлагаю вам взглянуть на введение в правила ресайза перед началом.
Этот файл можно бесплатно скачать здесь. Уверен, что он вам пригодится при создании ваших веб проектов!
...
Если вы уже познакомились с этими инструментами, перейдите к секции The Progress Bar. Вот, где находится самое интересное. Если вы не совсем уверены, и вам необходимо несколько советов, следите за моим рассказом!
Создание плеера
Прежде, чем применить любые правила,давайте просто создадим компонент в Sketch в исходном размере. Для большей точности, лучше использовать скриншот. Создайте иконки, прогресс бар, и нанесите эти элементы на прямоугольник (на рисунке внизу). Создайте общий стиль, для удобства (например для иконок).
На следующем этапе, создайте символ. Вы сможете редактировать его на странице символов и тестировать на любой странице. Финальная композиция должна иметь следующий вид:
Подготовка слоев
Следующий шаг: подготовка границ для объединения глифов. Иконки очень похожи на типографические символы. Они необязательно должны быть одинакового размера, но должны быть обязательно внутри невидимых квадратов и иметь такое же разрешение. Я называю такие квадраты Bounds. Обычно, я определяю ставлю же прямоугольник вокруг каждой иконки (в данном случае 36х36 пикселей), и группирую каждую иконку с обрамляющим его квадратом индивидуально. В таком случае, я помогаю улучшить понимание расположения элементов управления плеером при помощи пустого места вокруг элементов. Все слои таких квадратов должны быть невидимыми, поэтому я создаю общий стиль под названием _Bounds, который имеет наполнение и неактивную границу.
Важно отметить, что этот шаг не несет в себе какого-либо визуально заметного изменения и по сути, будет выполнять функцию предотвращения нежелательных смещений при ресайзе символа.
Добавление правил ресайза или ограничений
По сути, мы стартовали с того, что установили фоновое изображение в режим Fill. Это не новая опция в Sketch, но очень полезная. Как вариант, вы можете использовать режим Fit, в зависимости от ожидаемого эффекта (кстати, режим Fit - новый). Эти режимы дают уверенность того, что изображение всегда будет заполнено (fill) или помещено (fit) в доступную область при ресайзе.
Также важно, чтобы все иконки и элементы управления плеером оставались на одинаковом расстоянии от ближайшего угла, оставаясь в прежнем размере при ресайзе родительского элемента. И вот самое интересное! Используйте Pin to corner вместо дефолтной опции Sketch справа в инспекторе. Если вы их группируете, убедитесь, что для группы также выбрано Pin to corner. Дважды проверьте, достаточный ли размер для того, чтобы каждый элемент был размещен в углу, а не на равном расстоянии от двух углов.
Что касается градиента, если вы хотите изменить его размер вместе со всем компонентом, просто выберите Resize object. Все просто!
Итак, фоновое изображение будет иметь поведение заполнения (fill) или помещения (fit), элементы контроля будут находится в ближайших углах и градиент будет динамически менять свой размер. Хорошая работа! Но это еще не все, не удивляйтесь.
Прогресс бар
Ой, подождите, у нас же до сих пор красный прогресс бар и нам надо с этим что-то сделать. YouTube не будет YouTube без него!
Ожидаемое поведение: прогресс бар и строка загрузки должны быть прилеплены к левому краю используя постоянно один и тот же запас.Тоже самое и для нижней части с фиксированным значением. Опционально, они должны отображать одинаковое процентное соотношение прогресса в любом размере. Общий прогресс должен быть центрирован по горизонтали с одинаковым фиксированным запасом с обеих сторон в любом размере. Тоже самое и для нижней части.
Другими словами, нам необходимо, чтобы эти строки состояния изменяли размер горизонтально, но не вертикально. И всегда были бы на одинаковом расстоянии от левого, правого края и от нижней части.
Суть в том, что при наличии опций в Sketch (Stretch, Pin to corner, Resize object, and Float in place), моя первая мысль была: это нереально. Поверьте мне, я пробовал.
Но вот как это стало интересным: вы можете сделать комбо! Было бы здорово использовать немного из нескольких правил? Ну, это не совсем реально, хотя после того, как я здорово напряг свой мозг, мне удалось найти решение. Вот объяснение:
для начала, нам надо определить площадь, которая имеет одинаковое расстояние от левого и правого краев одновременно. Также, она должна находиться на фиксированном расстоянии от нижнего края. И вот, что делает Resize object. Создайте прямоугольник, который заполняет экран минус запас в 12 пикселей слева и справа и 37 пикселей снизу (почему не 36, YouTube?). Сгруппируйте его и установите группе Resize object. Попробуйте. Поведение должно быть таким:
Теперь у нас есть основа, давайте сделаем площадь невидимой. Нам необходимо, чтобы строки состояния всегда оставались внизу площади и при сохранении своих пропорций по горизонтали, имели фиксированную высоту. Это означает, что вы хотите растянуть их до нового значения, не влияя на высоту. Это нереально, если использовать обычные шейпы такие, как прямоугольники. Но простая линия с определенным ходом ( в данном случае в 3 пикселя), не будет изменять размер по толщине до крайней точки: 152 пикселя. Не знаю точно, почему. Но, сейчас не об этом.
Разместите прогресс бар и строку загрузки, как линии, у которых есть определенный ход, внутрь площади и убедитесь, что они привязаны к нижней части. По умолчанию, они установлены на Stretch. Эта опция сделает свое дело!
Теперь, вы можете изменять размер элементов, и даже контента, используя Overrides (переопределение) - истекшее время, глобальное время, фоновое изображение.
...
Так как этот случай - специфический, решение также нестандартное. Оно не будет подходить для любой ситуации, оно не самое элегантное, но оно работает. Снимаю шляпу перед Bohemian Coding за первую версию таких чудесных опций, простых и действенных. Кто знает, что они еще придумают в будущем? Адаптивный дизайн наконец-то появился и он развивается!
...
Если вы скачали файл, вы увидели, что я сделал 3 версии плеера: встроенный, встроенный с наведением и проигрывание. Три версии - три символа. Пока вы можете править контент каждого элемента, а также менять шаблон путем переключения символа. Было бы очень здорово создавать несколько композиций одного символа, скрывая или отображая определенные группы внутри символа (по принципу слоев в Photoshop). Это откроет новое измерение в поведении компонентов.
Я прекрасно понимаю, что эти ребята позиционируют Sketch чистым, комплексным и понятным, они лучше меня все знают. Уважаю их за это!
Перевод статьи Jérémy Paul
Топ коментарі (0)