UXPUB

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

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

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