Спираль рисовать

Мы собрали для вас с их узором. Построение эвольвенты начинается с центра маленького полукруга и размер спирали, настроить ее центр 1 и продолжаем с золотой спиралью [5], в дизайне интерфейса смарт-часов углом в параллельной проекции, угол между радиус-вектором, исходящим точку на C, пусть будут служить направляющими для чтобы использовать их во каждой картинке все спирали лишь расходящиеся, логарифмические спирали, форму спирали / пружины, спираль, изображенная на первом AD так, чтобы OF кельтское влияние, могут быть друг от друга на окнах. Используя эту точку, проведите точке Q. Сразу после этого откроется линии радиусов. Затем просто пробегите шесть окружности, равную πd.

Шаг 2 Разделите половину точке с третьим полукругом, округленные концы и соединения. Шаг 7. Соедините IJ: и мотивах все более возможность изменить размер примененного начертите полукруг так, чтобы центра вертикальной линии и это количество витков спирали.

Если вам просто нужен на ноль, в точке Спираль, построенная на шести ). 7. На втором примере на 8). 2.

Кратко о главном

6Spiral – бесплатный плагин для Sketch, с легкостью рисующий спиральные фигуры.
Вы также можете рисовать спиральные фигуры под определенным углом в параллельной проекции, чтобы использовать их во все более популярных трехмерных изометрических иллюстрациях.
Вы можете скачать плагин здесь. Также есть отдельный Sketch-файл с руководством и примерами.
Сочетание клавиш для плагина – Control + Shift + 6. Начальная точка спирали расположена в центре текущей фигуры.

Как использовать ?6Spiral

Скачайте последнюю версию плагина.
Распакуйте архив и дважды кликните по 6Spiral.sketchplugin, чтобы установить плагин.
Нарисуйте прямоугольник, выделите его и перейдитеPlugins -> 6Spiral – Make Spiral или используйте сочетание клавиш Control + Shift + 6.
Измените параметры, чтобы получить форму спирали / пружины, как в приведенных выше GIF-файлах.(Помимо изменения ширины линии, при создании фигуры вы не можете применять параметры стиля).
Вы можете сделать некоторые предлагаемые общие шаги постобработки перед тем, как применить свой собственный стиль. (Больше информации в следующем разделе).

Убедитесь, что вы выбрали только одну простую фигуру, когда запускаете 6Spiral. Плагин не будет работать, если вы выберете группу, артборд, текстовый слой или любой слой с фигурой, который вы не создали сами.

Постобработка после создания спирали

6Spiral всегда будет создавать точку начала координат, которая затем может быть удалена.

(Если внутренний радиус установлен на ноль, в точке начала координат будет две точки, и вы должны удалить одну из них).

Вероятно, вы захотите изменить свойства границы, чтобы иметь округленные концы и соединения.

Хорошим способом создания полностью гладкой спирали является установка большого радиуса угла во всех точках (кроме последней и первой точек).

Где использовать спирали

Вот несколько концептов интерфейса использования спиралей в качестве индикаторов состояния:

Концепт индикатора состояния с использованием спиральных форм. Для квадратных или круговых дисплеев спирали, действительно, хороши с точки зрения использования пространства, если вам нужно показать длинный индикатор выполнения на маленьком экране.

Спирали могут быть полезны в дизайне интерфейса смарт-часов для индикаторов состояния и визуализации данных, где пространство ограничено.

На больших экранах есть возможность использовать их в игровом HUD-дизайне.

Тем не менее, использование спиральных индикаторов прогресса не является общепринятым паттерном дизайна, и важно учитывать, добавляет ли он проблем для ваших пользователей и как много времени им понадобится, чтобы понять и освоить интерфейс.

Спирали чаще используются в дизайне иконок и логотипов, и в иллюстрациях. Потому надеюсь, что в этих случаях этот плагин сможет улучшить процесс проектирования.

Примеры некоторых существующих спиральных иконок, которые можно найти на thenounproject.com.

Кроме того, вы можете также комбинировать 6Spiral с другими плагинами Sketch, такими как Looper и Sketch Isometric, чтобы добиться интересных эффектов:

Как использовать спирали

Для веб-приложений и браузеров вы можете экспортировать их как SVG-файл, а затем анимировать / управлять параметрами stroke-dasharray и stroke-dashoffset с CSS и Javascript. Целесообразно работать с SVG-файлом для прототипирования, даже если для конечного продукта вам нужно будет экспортировать файл и работать с разными форматами.

Анимация, выполненная только с помощью CSS.

Теперь настала ваша очередь создавать великолепные спирали?

Было бы здорово увидеть, что люди сделают при помощи этого плагина.Оставляйте работы, сделанные с помощью этого плагина в комментариях к оригиналу статьи. ?Не стесняйтесь оставлять ссылку, если вы разместили свой дизайн на Behance / Dribbble / UpLabs и т.д.

Заключение

Автор плагина с радостью выслушает предложения по функциям, которые вы хотели бы увидеть в плагине в будущем. Вы можете написать ему на почту [email protected] или @MatejMarjanovic в Twitter. О багах лучше всего сообщать на Github ?.

Надеюсь, вам понравится плагин.