Advertisement
  1. Web Design
  2. General

Создание веб-иконки умнее

Scroll to top
Read Time: 10 min

Russian (Pусский) translation by Shaun Murphy (you can also view the original English article)

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


Что такое умный значок?

Умный значок разработан таким образом, что элементы внутри него подстраиваться ввода, взаимодействия и связанные с ними данные. Короче говоря, он динамичный. Умные иконки в SVG-основано и управляется с комбинацией JavaScript и CSS.


Почему это актуально

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

Целый ряд новых возможностей теперь возможен с массового применения браузера для SVG 1.1. Из-за семантической структуры СВГ, а умный значок может отображать полный диапазон состояний и вариаций. Это устраняет необходимость замены изображения и позволяет переходы между состояниями происходят плавно.

Умные иконки также дают дизайнерам возможность отображать соответствующую контекстную информацию в икону. Хорошо разработанный значок уже относительно пиков плотный объект. Добавление контекстной информации к иконе, его информационную плотность еще больше, если бы не значительное увеличение когнитивной нагрузки. В теории, эти типы икон будет способен взять на себя тяжелую коммуникации, таким образом, уменьшая количество другие элементы на экране.


Примеры использования для смарт-иконы

Существует множество различных направлений умные иконки могут пойти—некоторые из них проще в реализации, чем другие. Мы все еще в процессе поиска, но пока мы придумали три основных варианта использования:

Предоставление контекстной информации

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

clockclockclock

Действуя как простые данные-ВИС элементов (при d3.js это слишком много)

Один из лучших использования-чехлы для смарт-значки прост визуализации данных. Иконки, которые вписываются в эту категорию, звукового спектра, датчик/метр и индикатор загрузки. Умные иконки могут значительно упростить процесс создания панели отображает—думаю, просто добавив четыре или пять иконок в HTML и регулировки значения датчика с атрибутом данных.

audio-spectrum-analyzeraudio-spectrum-analyzeraudio-spectrum-analyzer

Отображение различных государств

Много икон, часто попадают в серию вариаций, чтобы передать все их разных государств. Примеры включают батареи, беспроводной доступ в интернет, воспроизведения медиа-файлов (например, воспроизведение, пауза и т. д.) и мощности (например, включение, выключение, режим ожидания). Еще одна возможность применения смарт-иконки свернуть все государства-икона в единую СВГ. Поэтому вместо замены активов изображение, когда предмет государственного меняется, вы просто изменить атрибут данных в соответствующее состояние.

batterybatterybattery

Гайки и болты

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

Умные иконки состоят из формата SVG, JavaScript и CSS. Наше нынешнее мышление к каждому значок как небольшие автономные приложения с помощью простого API для настройки элементов внутри значка. Для достижения такой надежной, такой подход требует разметки SVG, которые должны быть включены в дом.

Имейте в виду, что СВГ размечаем должен быть соответствующим образом структурирован для такого подхода к работе. Это то, что мы чувствуем, делает знаковые уникальные. Значки были спроектированы и изготовлены новые концепции в уме. Эти концепции опираются на четкую семантику и хорошо продуманная структура разметки для правильной работы. Это ничем не отличается от правильно структурированный HTML—если ваша разметка gobbleygoop, это будет сложно сделать, ничего сложного.

Много убедительных вещи могут случиться один раз хорошо структурированной разметки SVG в дом. Проблема в том, что при добавлении разметки SVG в HTML-это боль. Разметки SVG может добавить значительное количество наворотов в ваш код, и это становится труднее различать между структурными HTML и векторных изображений. Для того, чтобы убрать это трение, мы предлагаем инъекционных разметки SVG в DOM во время выполнения.

Мы сделали простой прототип инжектора СВГ, который заменяет все указанные теги img с разметки из ссылочного файла SVG. Так это...

Превращается в это:

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

После того, как СВГ вводят в DOM, JavaScript-код инкапсулирован в ее выполнении и готов к использованию. Некоторые иконки будут работать самостоятельно (как часы), тогда как другие требуют ввода для регулировки.

Значок работающей в автоматическом режиме

Часы-это прекрасный пример значок, который работает на своей собственной. После инъекции, он будет просто идти. Увидеть его в действии

HTML-код

Яш

СВГ: часы.СВГ

Значок ввода на основе

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

HTML-код

Яш

СВГ: аудио спектр-анализатор.СВГ

Добавление движения (вишенка на торте)

Умный значок становится еще лучше с движением. Есть много способов сделать это. В настоящее время мы используем элементы анимации SVG, так как это позволяет значительно функциональность встроена прямо в браузере—меньше кода в SVG. Поддержка еще не восстановилось (мы столкнулись с вопросами в Safari 6), но он становится лучше день ото дня. Увидеть его в действии

HTML-код

Яш

СВГ: термометр.СВГ


Заключение

Иконография имеет важную роль в дизайн интерфейса. Более актуальную информацию на наших иконах, тем более могущественными они становятся. Мы искренне верим, что умная иконография может быть незаменимым инструментом для дизайнеров, чтобы добавить еще один слой смысла в их иконах. Не каждая икона подходит для такого подхода—как и все хорошие вещи, он требует умеренности. Однако, когда используется должным образом, это может быть огромный новый инструмент.


Обратно знаковых на Kickstarter

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

iconic-logoiconic-logoiconic-logo

Пожалуйста, рассмотреть вопрос о поддержке знаменитого на Kickstarter.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.