Как с помощью пиктограмм отобразить строительные материалы, например цемент, гипс, известь? Продолжение
Илья Бирман |
||||||||
|
Хорошие интерфейсные пиктограммы не пытаются изображать сам предмет. Потому что когда речь о таких абстрактных понятиях как база данных, сетевая папка или гиперссылка, изображать нечего. Объяснить их без слов невозможно. И пиктограммы не для этого. Хоть текст и понятнее пиктограммы, но пиктограмму мы быстрее узнаём. Знакомая пиктограмма помогает быстро найти нужную кнопку: |
||||||||
|
|
||||||
|
Белое пятно слева — это новый документ. Жёлтое — открыть. Следующее — сохранить. А что именно изображено на пиктограмме не имеет практического значения. Папка в равной степени связана с открытием и сохранением, а дискету многие и не видели. И о том, что цепь и земной шар означают гиперссылку догадаться невозможно, это можно только знать. Крайний случай — когда рисунок пиктограммы вообще никак не связан с её смыслом: В конце 90-х среди пользователей Виндоуса были популярны темы оформления операционной системы, которые меняли не только обои рабочего стола, но и цвета интерфейса и набор пиктограмм. В одной теме оформления все иконки могли стать разными цветами, в другой — планетами. Но пользователи быстро научались узнавать, что Земля — это мой компьютер, а Юпитер — Корзина. Конечно, я не призываю рисовать на пиктограммах бессмыслицу. А ещё пиктограммы экономят место и расходы на локализацию. Чтобы пиктограммы работали, нужно их разрабатывать сразу набором и прямо в интерфейсе, а не на белом фоне. А главный критерий удачности набора — то, что находишь нужную кнопку даже «прищурив глаз», когда детали размываются. В 2008 году в Бюро спроектировали интерфейс для новой версии почтового клиента. В предыдущей версии основные кнопки управления почтой были неотличимы: Для каждой мы придумали узнаваемый символ: А потом раскрасили их в соответствии со стилем эпохи скеоморфизма: Узнаваемость этих кнопок не пострадает, если стиль поменять. Также важно, чтобы в наборе пиктограммы «дружили». Тут есть сложность, ведь нужно и чтобы они хорошо отличались. Эстетика здесь из начала 2000-х, но сделано хорошо: пиктограммы сильно отличаются по цвету и форме, но имеют достаточно общих признаков (ракурс, блики), чтобы выглядеть набором. |
О привычках |
|||||||
В первую очередь мы воспринимаем расположение, цвет и форму. Расположение особенно важно, потому что влияет не только на узнаваемость, но и на формирование моторных привычек.
И дизайнеру, и пользователю спокойнее, когда нарисованому есть объяснение. Но это отличная иллюстрация того, что пиктограмма нужна для узнавания, а не объяснения.
49 Строительные+иконки Video Templates — Envato Elements
49 Строительные+иконки Video Templates — Envato ElementsУточнить
Категории
Пакеты репортажей
Элементы
27
Инфографика
16
Заставки логотипов
Вступления
2
Рекламные материалы
2
Заголовки
2
Видеодемонстрации
Поддерживаемые приложения
After Effects
31
Premiere Pro
13
Apple Motion
2
Final Cut Pro
2
DaVinci Resolve
3
Плагины
Не требует плагинов
Hекоторым элементам требуются дополнительные плагины.
Вы можете убрать подобные элементы из результов, выставив этот флажок.49
Resolution
720p (HD)
1080p (Full HD)
11
4K (UHD)
1
Уточнить
Категории
Пакеты репортажей
Элементы
27
Инфографика
16
Заставки логотипов
Вступления
2
Рекламные материалы
2
Заголовки
2
Видеодемонстрации
Поддерживаемые приложения
After Effects
31
Premiere Pro
13
Apple Motion
2
Final Cut Pro
2
DaVinci Resolve
3
Плагины
Не требует плагинов
Hекоторым элементам требуются дополнительные плагины. Вы можете убрать подобные элементы из результов, выставив этот флажок.
49
Resolution
720p (HD)
1080p (Full HD)
11
4K (UHD)
1
Сортировать по релевантностипо популярностипо новизне
This video is currently unavailable
Строительные Иконки
От lezygraph
Добавить в коллекцию
Скачать
This video is currently unavailable
Изометрические иконки — Строительство
От MotionTheory
Добавить в коллекцию
Скачать
This video is currently unavailable
100 Иконки строительной линии
От MotionTheoryStudio
Добавить в коллекцию
Скачать
This video is currently unavailable
Здания и строительство — Иконки пользовательского интерфейса
От IconsX
Добавить в коллекцию
Скачать
This video is currently unavailable
Строительные анимированные Иконки | After Effects
От Graphiqa
Добавить в коллекцию
Скачать
This video is currently unavailable
Изометрические Иконки
От Holypix
Добавить в коллекцию
Скачать
This video is currently unavailable
Недвижимость — анимационные Иконки
От DesignSells
Добавить в коллекцию
Скачать
This video is currently unavailable
490 анимированных Иконки линий
От Anton-K
Добавить в коллекцию
Скачать
This video is currently unavailable
Шаблон для Premiere Pro с иконкой
От ninthmotion
Добавить в коллекцию
Скачать
This video is currently unavailable
Презентация Портфолио строительства
От ZuzuZa
Добавить в коллекцию
Категория: Иконки в разработке — Wikimedia Commons
Взято из Викисклада, бесплатного репозитория медиафайлов
Перейти к навигацииПерейти к поиску
Иконки для в разработке предупреждений.
Подкатегории
Эта категория имеет следующие 3 подкатегории из 3-х.
U
U+1F6A7 (20 F)
Медиа в категории «Иконки в стадии разработки»
Следующие 123 файла находятся в этой категории, всего 123.
«Незавершенное производство», анимированный.gif 684 × 37; 27 КБ
Aggiornare.svg 606 × 596; 25 КБ
Предупреждение Ambox синего цвета Construction.svg 378 × 326; 11 КБ
Предупреждение Ambox о зеленой конструкции.svg 378 × 326; 7 КБ
Яблоко-24.png 60×60; 6 КБ
Разработка приложений current.svg 59×46; 35 КБ
Apt Plan-Constr.png 40×40; 2 КБ
Apt Traf-Sched Int Constr.png 40×40; 2 КБ
Bandeau-encours.png 81×77; 1 КБ
Баннер «В разработке» версия 1.jpg 468 × 92; 20 КБ
Баннер «В разработке» версия 2.
jpg
478 × 70; 24 КБ Барнстар-робот.png 111×107; 12 КБ
Баустель зеленый.svg 700 × 613; 5 КБ
Baustelle-mittel.png 533 × 451; 25 КБ
Баустель.svg 700 × 613; 4 КБ
Разбитое сердце любви в стадии строительства.svg 453 × 464; 13 КБ
CanaleteConstrução.png 256 × 256; 40 КБ
Chemiemitarbeit-hell.svg 800 × 675; 15 КБ
Chemiemitarbeit.svg 800 × 675; 15 КБ
Circle-icons-roadblock.svg 512 × 512; 2 КБ
Часы — В разработке.svg 212 × 211; 15 КБ
Часы в стадии строительства.png 212 × 211; 19 КБ
Commons-эмблема-В разработке-green.svg 48×48; 8 КБ
Строительство.jpg 339 × 258; 66 КБ
Строительные Часы.PNG 689 × 587; 72 КБ
ConstructionClock.
CZ-Z02 Zábrana pro označení uzavírky.jpg 442 × 78; 3 КБ
Значок сухого дока.png 607 × 802; 32 КБ
Строительство.jpg 400 × 337; 22 КБ
Строительство2.gif 799 × 263; 33 КБ
Энобрас.gif 148×140; 15 КБ
Энобрас.PNG 361 × 12; 2 КБ
Enobres.png 40×40; 1 КБ
Фаэнца-приложения-разработка.svg 96×96; 29 КБ
Farm-Fresh roadworks.png 32×32; 2 КБ
FinkCommander используется.png 128 × 128; 18 КБ
Флаг .svg 350 × 200; 64 КБ
HK Roadwork.svg 200 × 176; 9 КБ
Иконка Строительство.png 32×37; 1 КБ
Icone travaux.png 32×28; 1002 байта
Итальянские дорожные знаки — work.gif 50×44; 448 байт
Linearicons Construction.
svg
20×20; 997 байт Людопедия 03.png 128 × 128; 19 КБ
Маки-барьер-11.svg 11 × 11; 381 байт
Маки-барьер-15.svg 15×15; 384 байта
Значок маркера карты — Николя Молле — Строительство — Промышленность — Classic.png 32×37; 882 байта
Значок маркера карты — Николя Молле — Строительство — Промышленность — Dark.png 32×37; 885 байт
Значок маркера карты — Николя Молле — Строительство — Промышленность — Default.png 32×37; 1 КБ
Значок маркера карты — Николя Молле — Строительство — Промышленность — Gradient.png 32×37; 1 КБ
Значок маркера карты — Николя Молле — Строительство — Промышленность — iOS.png 32×37; 1 КБ
Значок маркера карты — Николя Молле — Строительство — Промышленность — Light.png 32×37; 872 байта
Значок маркера карты — Николя Молле — Строительство — Промышленность — Simple.
png
32×37; 622 байта Значок маркера карты — Николя Молле — Строительство — Промышленность — Белый.png 32×37; 893 байта
Значок маркера карты — Николя Молле — Строительство — Транспорт — Classic.png 32×37; 891 байт
Значок маркера карты — Николя Молле — Строительство — Транспорт — Dark.png 32×37; 887 байт
Значок маркера карты — Николя Молле — Строительство — Транспорт — Default.png 32×37; 1 КБ
Значок маркера карты — Николя Молле — Строительство — Транспорт — Gradient.png 32×37; 1015 байт
Значок маркера карты — Николя Молле — Строительство — Транспорт — iOS.png 32×37; 1 КБ
Значок маркера карты — Николя Молле — Строительство — Транспорт — Light.png 32×37; 855 байт
Значок маркера карты — Николя Молле — Строительство — Транспорт — Simple.png 32×37; 628 байт
Значок маркера карты — Николя Молле — Строительство — Транспорт — Белый.
png
32×37; 900 байт Знак «Мужчины за работой» (зеленый).svg 664 × 580; 8 КБ
Мужчины на работе-148408.svg 512 × 449; 5 КБ
Разум в стадии строительства.png 460 × 460; 48 КБ
Nederlands verkeerssymbool — работа в uitvoering.svg 145×115; 2 КБ
Обрасс.jpg 550 × 408; 19 КБ
Страница в разработке.jpg 1030 × 1152; 50 КБ
ПАНКАЙ.jpg 650 × 650; 32 КБ
Pgconstrucao.gif 678 × 536; 47 КБ
Пиктограмма Baustelle.svg 370 × 290; 3 КБ
Дорожные знаки-works.svg 515 × 460; 9 КБ
Дорога в стадии строительства.png 388 × 339; 13 КБ
Песочница черный icon.svg 110 × 90; 411 байт
Зеленый значок песочницы.svg 110 × 110; 564 байта
Желтый значок песочницы.svg 110 × 110; 564 байта
Sinnbild — Baustelle, StVO 1956.
svg
389 × 308; 5 КБ Sinnbild — Baustelle, StVO 1970.svg 419 × 332; 4 КБ
SITIO-EN-CONSTRUCCION.jpg 1502 × 1127; 105 КБ
Уличный артист в Копенгагене — июнь 2014.JPG 1388 × 1856; 858 КБ
ThSpaceflightPortalConstruction.svg 512 × 512; 8 КБ
TrianguloConstrução.png 256 × 256; 37 КБ
Символ дорожного знака Великобритании S7.svg 300 × 225; 9 КБ
Undcstrmrc отмена.png 215 × 215; 44 КБ
Undcstrmrc.png 197 × 197; 33 КБ
Undcstrmrc.svg 160 × 160; 575 байт
Строится (thejmii).png 256 × 256; 21 КБ
В стадии строительства (ящик UC).png 233 × 278; 72 КБ
Строится анимационный.gif 200 × 180; 3 КБ
В разработке blue.svg 20×20; 6 КБ
Подсветка в процессе строительства (thejmii).
png
256 × 256; 19 КБ В разработке icon-blue.svg 600 × 500; 14 КБ
В процессе строительства icon-green.svg 600 × 500; 10 КБ
В разработке icon-orange.svg 600 × 500; 10 КБ
В разработке icon-red.svg 600 × 500; 8 КБ
В процессе строительства icon-yellow.svg 587 × 484; 6 КБ
Строящаяся линия.PNG 941 × 37; 3 КБ
В стадии строительства red.svg 20×20; 6 КБ
Строящийся робот.jpg 640 × 328; 30 КБ
В разработке yellow.svg 20×20; 6 КБ
Строится.jpeg 320 × 320; 16 КБ
Строится.JPG 298 × 39; 4 КБ
Строящийся бульдозер.gif 410 × 49; 29 КБ
В стадии строительства5.gif 399 × 330; 13 КБ
Черный значок UnderCon 1.png 2000 × 1636; 73 КБ
Черный значок UnderCon 2.
png
2700 × 1636; 109 КБ Значок UnderCon черный 3.png 3500 × 1636; 144 КБ
Значок UnderCon черный.png 70 × 59; 1 КБ
Значок UnderCon black.svg 110 × 90; 376 байт
Синий значок UnderCon 2.svg 110 × 90; 388 байт
Значок UnderCon white.svg 110 × 90; 360 байт
Значок UnderCon.svg 200 × 180; 544 байта
Значок часов в стадии строительства grey.svg 205 × 158; 9КБ
Значок незавершенного строительства grey.svg 188 × 158; 9 КБ
Незаконченная работа.png 120 × 120; 5 КБ
Страница пользователя calisma2.png 100 × 100; 57 КБ
Страница пользователя рабочая.png 100 × 100; 55 КБ
Логотип Викиданных в процессе строительства знак diamond.svg 1920 × 1920; 6 КБ
Логотип Викиданных в стадии строительства знак square.
svg
1,920 × 1920; 5 КБ Логотип Викиданных в стадии строительства знак wallpaper.png 2133 × 1200; 290 КБ
Логотип Викиданных в стадии строительства знак wallpaper.svg 1920 × 1080; 8 КБ
Логотип Викиданных в стадии разработки знак wide.svg 1920 × 1080; 5 КБ
Векторная версия WIP.svg 480 × 480; 30 КБ
Рабочий (13085) — The Noun Project.svg 512 × 512; 3 КБ
Строительство – Иконки | Портал Volvo Cars Design Portal
Узнайте, как создать значок, который эффективно коммуницирует и вписывается в семейство значков Volvo Cars. Для начала мы познакомим вас с некоторыми полезными терминами, используемыми в дизайне иконок.
Терминология
Чтобы уверенно создавать иконки, в первую очередь необходимо более глубокое понимание их анатомии. Вот некоторые общие термины, используемые в практике дизайна иконок.
1. Открытый ход с квадратным наконечником. 2. Кривая Безье. 3. Прямоугольный угол.
4. Закрытый путь хода. 5. Встречный ход (пробелы/разделение). 6. Область счетчика (исключения/негативные пробелы).
Сетки и размеры
Вспомогательная сетка необходима для обеспечения согласованности размера, формы, пропорций и компоновки всего набора значков.
При создании значка доступно несколько размеров сетки. Решение о том, с каким размером сетки работать, зависит от платформы и контекста.
На сетку и ее контурные линии можно ссылаться различными способами при формировании значка.
Конструктивные сетки Icon доступны для использования в библиотеке Icon Inventory Volvo Cars.
Оптимизация
Дизайн для размера. Разные размеры значков требуют разного уровня детализации и исправления.
Избегайте соблазна просто увеличить или уменьшить значок. Цель состоит в том, чтобы создать значок, который хорошо работает в различных размерах и/или состояниях.
Уменьшите или увеличьте количество деталей при разработке значка разных размеров.
Штрихи
Чтобы штрихи выглядели четкими и четкими, они должны быть выровнены по пиксельной сетке. Толщину обводки можно настроить, чтобы оптимизировать значок в соответствии с его контекстом. Всегда устанавливайте наконечники хода (торцевые заглушки) квадратными, а не закругленными. Чтобы избежать размытия, все штрихи должны располагаться на целых пикселях.
Типичная толщина обводки мобильных и веб-иконок.
Типичная толщина обводки автомобильных значков.
Встречные штрихи
Небольшие пустоты, которые появляются внутри значка, называются счетчиками.
Используйте встречные штрихи, чтобы вырезать пробелы и получить более простую и узнаваемую иконку. Толщина встречного штриха может быть отрегулирована, чтобы лучше всего соответствовать рассматриваемому значку.
Промежутки встречного штриха в идеале должны занимать целые пиксели.
Используйте встречные штрихи для вырезания и разделения частей значка.
Углы
Чтобы сохранить единый визуальный язык значков, мы ограничиваем выбор углов четырьмя вариантами: квадратными или закругленными со значением 3 или 4 для радиусов. Углы можно применять как к штрихам, так и к заливкам. Используйте углы в тех местах, где метафора значка выиграет от закругления.
Квадратные углы (1) можно использовать вместе со скругленными углами. Только закругленные углы, чтобы облегчить понимание.
Полностью закругленные углы (2) также можно использовать при разработке значков.
Линии сетки
Как и буквы в шрифте, значки должны выглядеть едиными по стилю, размеру, форме и толщине. Каждая иконка уникальна, но все они должны обладать общими чертами, которые помогут объединить их в семью. Чтобы обеспечить включение общих характеристик, создавайте значки, которые следуют за любыми соответствующими ключевыми линиями в сетке.
Формы
Ключевые линии формы можно использовать для определения общего размера и формы значка.
Углы
Ключевые линии также определяют идеальные углы и радиальные размеры для значков. Следование ключевым линиям, когда это возможно, приводит к более унифицированному семейству значков. Заливки, штрихи и концы штрихов можно располагать или обрезать под углами ключевой линии 90, 70, 45 или 30 градусов.
Значки с текстом
Текст внутри значков использует Volvo Novum, выравнивание по центру. На случай будущих запросов на изменение всегда сохраняйте неразвернутую (редактируемую) версию любого значка, содержащего текст.
Размер и/или вес текста могут варьироваться в зависимости от размера значка и его конечного контекста. Для текста внутри значков может потребоваться корректировка слежения и оптическая коррекция для оптимизации читаемости.
Толщина текста должна быть аналогична толщине обводки значка. Избегайте легких весов, чтобы улучшить разборчивость.
Значки и пиктограммы
Вы имеете дело со значком или пиктограммой? Важно понимать разницу.
Иконки
Как определить иконку: Иконки — это очень упрощенные, узнаваемые символы. Они используются для того, чтобы четко и быстро передать смысл. Иконки работают с удивительно маленькими размерами и во многих случаях могут работать в одиночку. Иконки лучше всего подходят для использования в пользовательском интерфейсе.
Пиктограммы
Как распознать пиктограмму: Пиктограммы обычно носят иллюстративный характер.
