Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. General
Webdesign

Створення піктограм веб-смартфонів 

by
Length:MediumLanguages:

Ukrainian (українська мова) translation by Tanya Ira (you can also view the original English article)

Ця стаття є першою в серії з трьох частин, показано нові підходи до іконографії знакових будуть доставляти. Якщо вам подобається, що ви бачите в цій статті, будь ласка, розглянути питання про підтримку знаменитого на Kickstarter. 


Що таке розумний значок? 

 Розумний значок розроблений таким чином, що елементи всередині нього підлаштовуватися введення, взаємодії та пов'язані з ними дані. Коротше кажучи, він динамічний. Розумні іконки в SVG-засновано і управляється з комбінацією JavaScript і CSS.


Чому це актуально 

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

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

Розумні іконки також дають дизайнерам можливість відображати відповідну контекстну інформацію в ікону. Добре розроблений значок вже відносно піків щільний об'єкт.  Додавання контекстної інформації до ікони, його інформаційну щільність ще більше, якби не значне збільшення когнітивної навантаження.  В теорії ці типи ікон буде здатний взяти на себе важку комунікації, таким чином, зменшуючи кількість інших елементів на екрані. 


Приклади використання смарт-ікони 

Існує безліч різних напрямків розумні іконки можуть піти—деякі з них простіший в реалізації, ніж інші. Ми все ще в процесі пошуку, але поки ми придумали три основних варіанти використання: 

Надання контекстної інформації 

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

clock

Діючи як прості дані-ВІС елементів (при d3.js це занадто багато) 

Один з кращих використання-чохли для смарт-значки простий візуалізації даних. Іконки, які вписуються в цю категорію, звукового спектру, датчик/метр і індикатор завантаження.  Розумні іконки можуть значно спростити процес створення панелі відображає думаю, просто додавши чотири або п'ять іконок в HTML і регулювання значення датчика з атрибутом даних. 

audio-spectrum-analyzer

 Відображення різних держав

 Багато ікон, часто потрапляють в серію варіацій, щоб передати всі їх різних держав. Приклади включають батареї, бездротовий доступ в інтернет, відтворення медіа-файлів (наприклад, відтворення, пауза і т. д.) і потужності (наприклад, включення, вимикання, режим очікування).  Ще одна можливість застосування смарт-іконки згорнути всі держави-ікона в єдину СВГ. Тому замість заміни активів зображення, коли предмет державного змінюється, ви просто змінити атрибут даних у відповідний стан.

battery

Гайки і болти 

 Примітка: перед вдаючись в подробиці, важливо відзначити, що в прикладах ми просто доказ концепції прототипів.  Ці прототипи призначені для передачі функціональності, яку ми будемо створювати. Жоден з наступний код є остаточною, не кажучи вже бета.  Ми все ще в стадії розробки цього методу і ми знаємо, що є багато питань, які ще належить вирішити. Ми будемо працювати над більш конкретне спрямування на цей метод після того, як кампанія на 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-logo

Будь ласка, розглянути питання про підтримку знаменитого на Kickstarter. 

Advertisement
Advertisement
Advertisement
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.