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

Cover image for Фантастические стрелочные указатели для Sketch
Редакція
Редакція

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

Фантастические стрелочные указатели для Sketch

стрелочные указатели для Sketch - 1 Стрелки масштабируются, но углы не искажаются Это урок по созданию масштабируемых динамических стрелочных указателей для UX схем. На пост я вдохновился шаблоном User Flow Diagram Template от Jarosław Ceborski - увидел, что там создали и подумал, что было бы неплохо разобрать, как им это удалось. Скачайте мой Sketch-файл для наглядности.

Задача

стрелочные указатели для Sketch - 2 Обычная линия с закругленными углами и стрелка дают искажение в углах и на кончике, когда вы ее растягиваете.

Решение

Используйте символы и опцию закругления углов, чтобы масштабировать без искажений. стрелочные указатели для Sketch - 3 Рисунок 1 стрелочные указатели для Sketch - 4 Рисунок 2 стрелочные указатели для Sketch - 5 Рисунок 3

  1. Нарисуйте линию, используя инструмент Vector
  2. Присоедините точки к сетке, чтобы они были выровнены
  3. Выберите два угла и задайте параметру curving значение Straight, а также с помощью слайдера Corners задайте нужное закругление (см. Рис. 4)
  4. Сделайте линию символом
  5. Добавьте стрелку и сделайте так, чтобы она выступала за пределы символа, чтобы линия выровнялась с центром стрелки, а верхняя половина стрелки была за границами символа (Рис.2, центр)
  6. С помощью опции ресайза задайте Pin to Corner для стрелки (Рис. 5). Линия пусть остается по умолчанию в Stretch.
  7. Теперь можете дублировать, растягивать, переворачивать символ, как вам угодно.

стрелочные указатели для Sketch - 6 Рисунок 4: Настройки для двух точек в шаге 3 (см. выше) стрелочные указатели для Sketch - 7 Рисунок 5: Прикрепите стрелку к углу

Бонус

Этот прием работает для единичных стрелок, но вы можете использовать вложенные символы Sketch и для других типов (например, простые, одноугольные, U-образные стрелки), а также для различных форм острия стрелки (круглые, ромбовидные и т.д.)

Как здесь!

[caption id="attachment_34362" align="alignnone" width="800"]стрелочные указатели для Sketch - 8 Примеры: Все эти стрелки используют один и тот же символ, с разными линиями и верхушками.[/caption] Я оформил все в файле Sketch, там вы найдете один символ с вложенными стилями для четырех типов линий и восьми типов верхушек стрел.


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

Топ коментарі (0)