UXPUB

UXPUB - спільнота з 4,706 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
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)