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

Cover image for Создание круговых диаграмм в Sketch
Редакція
Редакція

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

Создание круговых диаграмм в Sketch

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

Наложение маски

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

Угловой градиент

Используя угловой градиент, вы можете создать круговую диаграмму. Хорошо то, что вы можете повторно использовать такую заливку для других окружностей. Недостаток такого способа в том, что изначальная установка довольно непростая. Угловой градиент Я узнал о такой технике из статьи “Как создать круговые диаграммы в Sketch

Дуги

Линейные дуги очень популярны в многих приложениях. Хорошим примером является приложение “часы” в Android. 1-gEoSI844HK2l1xal4KlpMQ Использование эффекта наложения маски даст вам эффект (ниже слева). Для того, чтобы сделать красивый график в виде дуги, вам необходимо использовать свойства границы овала и сделать разрыв (Open Path). различные виды диаграмм Использование границы вместо заливки позволит вам создавать различные виды диаграмм. Секрет использования дуг состоит в Open Path. Используйте его при редактировании точек дуги. Добавьте больше точек в разрыв для того, чтобы увидеть, какая часть дуги исчезнет при клике на Open Path. Ниже показано поведение по-умолчанию. Open Path sketch Open Path позволяет сделать красивую дугу. Добавьте/удалите точки вдоль дуги и вы получите желаемую длину Ниже показан быстрый пример того, как можно создать другие дуговые графики используя технику Open Path. Радиальный таймер Радиальный таймер Подкова Подкова


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

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