35 символов · копируйте свободно
Геометрические фигуры как символы
Блок Geometric Shapes на позициях U+25A0–U+25FF — рабочая лошадка текстовых интерфейсов: круги, квадраты, треугольники и ромбы, почти все — в виде пары «залитый плюс контурный» в двух-трёх размерах. Именно эта парность позволяет показать два состояния, двух игроков или два приоритета, не полагаясь на цвет. Скопируйте любой символ ниже; рядом с каждым указаны его название Unicode и код.
Круги
Залитые, полые и частично залитые — используются для рейтингов, фаз и состояний переключателей.
Квадраты
Три размера, залитые и полые. Маленькая пара смотрится в списках лучше, чем обычная точка.
Треугольники
Все четыре направления в двух размерах. Крупный залитый набор заодно служит кнопками управления воспроизведением.
Ромбы
Ромбы читаются как «особенное», не крича об этом, — обычный выбор для декоративного разделителя.
Нажмите на любой символ, чтобы скопировать его. Ничего не скачивается — это текстовые символы, а не изображения.
Блоки Unicode
- U+25A0–U+25FF Геометрические фигуры
- U+2756 Дингбаты
Как использовать Геометрические фигуры
Сочетайте залитое с полым, чтобы показать состояние
Почти каждая фигура здесь идёт парой «залитая плюс контурная». Использование ● против ○ для «включено/выключено» или «готово/в ожидании» передаёт различие формой — а значит, сохраняется при чёрно-белой печати и для людей с дальтонизмом, в отличие от пары «красный против зелёного».
Используйте маленькие варианты как маркеры списка
Маленький квадрат ▪ и белый маркер ◦ смотрятся рядом с основным текстом лучше, чем полноразмерный ■. Вложенные списки хорошо читаются как • затем ◦ затем ▪.
Используйте частично залитые круги для индикации прогресса
○ ◔ ◐ ◕ ● дают пять чётких ступеней выполнения по одному символу каждая — компактный индикатор прогресса для ячейки таблицы или строки лога.
Раскрашивайте их из CSS
Это текст, поэтому `color` применяется напрямую. Ряд из ● пяти разных цветов не требует ни картинок, ни SVG и остаётся чётким при любом масштабе.
О «Геометрические фигуры»
Блок Geometric Shapes — незаметно самый полезный диапазон в Unicode. Его организующая идея — парность: почти для каждой формы есть залитая и контурная версии, часто в двух-трёх размерах каждая. Эта избыточность кажется расточительной, пока не понадобится показать два состояния в монохромном контексте — терминале, распечатке, письме с обычным текстом, — и не выяснится, что контраст формы продолжает работать там, где цветовой контраст бессилен.
Именно поэтому эти символы повсюду встречаются в дизайне интерфейсов. Залитые и полые круги — это радиокнопки и точки карусели. Треугольники — стрелки раскрытия и кнопки управления воспроизведением. Маленькие квадраты — маркеры списков. Поскольку это текст, каждый из них наследует размер шрифта и цвет окружения, так что набор иконок, построенный из них, не требует ни набора спрайтов, ни шрифта иконок, ни SVG — и никогда не грузится с задержкой и вообще не может не загрузиться.
Частично залитые круги на позициях U+25D0–U+25D3 и соседние варианты с заливкой по четвертям — небольшая часть словаря дизайна, которую большинство людей никогда не находят. Последовательность от пустого к полному даёт индикатор прогресса или рейтинга, занимающий ровно одну ячейку символа, — поэтому он встречается в панелях командной строки и таблицах статусов, где горизонтальное пространство в дефиците.
Этот сайт активно опирается на этот блок. «Четыре в ряд» и Реверси используют ● и ○ для двух игроков; Simon использует крупные треугольники для своих четырёх панелей; «Выключи свет» и игра на память используют квадраты и ромбы. Цвет накладывается сверху через CSS как усиление, но смысл несут сами формы — именно поэтому доски остаются читаемыми для игрока с дальтонизмом.
Игры, нарисованные этими символами
Каждое игровое поле на этом сайте сделано из Unicode, а не из спрайтов. Эти игры используют символы, показанные выше.
Часто задаваемые вопросы
В чём разница между ● и ○?
Это залитая и полая версии одного и того же круга. В Unicode они называются «black circle» и «white circle», но эти названия описывают заливку, а не цвет, — оба символа текстовые, так что раскрасить можно любой в любой цвет. Их сочетание показывает два состояния, вообще не завися от цвета.
Какие символы фигур хорошо подходят для маркированных списков?
Маркер • (U+2022) — стандартный выбор, а белый маркер ◦ и маленький квадрат ▪ — для вложенных уровней. Полноразмерные ■ и ● обычно смотрятся слишком тяжеловесно рядом с основным текстом. Распространённая вложенность — это • затем ◦ затем ▪.
Можно ли использовать геометрические фигуры вместо иконок?
Для простых индикаторов — да, и у этого есть реальные преимущества: не нужен набор спрайтов, шрифт иконок или дополнительный запрос, а цвет и размер текста наследуются автоматически, так что они никогда не грузятся с задержкой и не съезжают. Треугольники работают как стрелки раскрытия и кнопки воспроизведения, круги — как состояния переключателей и индикаторы статуса.
Почему в одном шрифте некоторые фигуры выглядят крупнее других?
Unicode явно кодирует несколько размеров — маленький, средний и обычный, — а шрифты к тому же рисуют один и тот же код с разной оптической насыщенностью. Если ряд фигур выглядит неровным, вы, вероятно, смешиваете размерные варианты вроде ▪ U+25AA и ■ U+25A0. Придерживайтесь одного размерного класса в пределах ряда.
Работают ли эти фигуры как эмодзи?
У некоторых есть эмодзи-представление, и на отдельных платформах они могут приходить уже раскрашенными. Добавьте селектор текстового варианта U+FE0E, чтобы принудительно включить монохромный текстовый глиф и позволить ему принять ваш CSS-цвет. Большая часть блока — только текстовая и не требует такой обработки.
Support the arcade
Нравятся игры?
UnicodeGames бесплатен, без рекламы и всегда таким останется. Если игра скрасила вам перерыв на кофе, можете отплатить тем же.
Угостить меня кофеOne-off · No account needed · Handled by Buy Me a Coffee