Favicons, Touch Icons, Tile Icons і т.д.

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

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

У цій статті ми покажемо чудові приклади та найкращі практики використання іконок для підтримки контенту у веб дизайні.

1. Як використовувати іконки

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

Посилює список особливостей

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

Привертаємо увагу до нових особливостей веб-додатку

Іконки є візуальним запрошенням спробувати останні та найкращі особливості вашого веб додатку. Іконки повинні захоплювати увагу вашого відвідувача та спрямовувати його до нових особливостей. А як тільки увага відвідувача захоплена, розкажіть про те, які чудові можливості відкриваються йому.


Список різних додатків та продуктів

У даному випадкупотрібно розглядати іконку як логотип, пам'ятаючи, що мета логотипу - побудувати ментальну асоціацію між продуктом і зображенням. Іконка має бути унікальною, але простою: більшість іконок мають розмір 128 на 128 px, тому треба використовувати мінімалістський підхід і зуміти сказати багато, використовуючи мінімум коштів.

Приклад:


Перерахуйте ваші послуги та збільште легкість читання списку

Іконки повинні відповідати контенту та мати простий дизайн. Визначте, що ви хотіли висловити за допомогою контенту та створіть на цій основі іконку. Яка тема у веб-сайту чи статті? Які кольори використовуються? Що це за стиль? Модерн? Класик? Іконки мають бути візуально уніфіковані з ідеями, що виражаються в контенті.


2. Призначення та розміщення

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

Акцентування колонтитулів для надання заголовкам особливого вигляду

Навіть проста іконка може додати шарму та індивідуальності веб сайту.

Приклад:


Захопіть відвідувача читанням довгої сторінки

Використовуйте іконки як крапки в абзацах. Такий підхід суттєво підвищить зручність читання навіть найдовшого тексту.

Приклад:


Відокремлюємо заголовки та секції

Використовуйте іконки, щоб встановити візуальну точку, що відокремлює різні частини тексту.

Приклад:


Розмір не має значення! Навіть маленькі іконки можуть бути ефективними

Маленькі іконки забезпечують такий рівень візуального інтересу, як і великі, але без потенційної небезпекивідвернути увагу. Переконайтеся, що іконки легко розпізнати, і що вони близькі до тексту, на якому акцентують увагу.


Виділяємо текст, розміщуючи іконки праворуч від абзацу

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


Змінюєте розмір та розміщення іконок

Увімкніть уяву! Зміна розміру та розміщення іконок зробить контент більш динамічним та цікавим.


3. Виберіть свій стиль

Коли справа доходить до стилю, то потрібно мати як мету ефективність. Якщо ваш дизайн передбачає унікальність, то оригінальні іконки будуть хороші для нього, але ефективність набагато важливіша. Пам'ятайте, що іконки призначені для розширення та доповнення контенту та дизайну. Тому особливо важливо приділяти увагу тому, як ваші іконки відповідають решті веб-сайту. Не варто купувати іконки, що круто виглядають на якому-небудь сайті, на зразок iStockPhoto. Набагато важливіше, щоб іконки були в одному стилі з рештою змісту сайту.

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

Використання світлих квітіві відмінний 3D дизайн іконок відмінно доповнює зовнішній виглядсайту: GoodBarry



Використання неохайного стилю для 2D ікон додає глибини: Take the Walk


Вибір унікального та послідовного стилю надає динамічності та професіоналізму сайту: Squarespace


Монохроматичні іконки можуть наголошувати на контенті без відволікання: Studio 7 Designs


Використовуйте силу трансформації знімка екрана із простим градієнтом в унікальну іконку: Gist


Не треба використовувати іконку тільки тому, що вона виглядає круто. Виберіть те, що більше підходить до вашого сайту за стилем та маркою: Treemo


4. Додаткові приклади

Нижче наводиться кілька прикладів ефективного використанняіконок.

Іконки заощаджують місце та виглядають свіжо. Іконки – це швидка відповідь на складні питання:

  • Як зробити красивішим?
  • Як нам це забрендувати?
  • Як зробити веселіше?

Ми любимо ікон. Поки що не починаємо в них плутатися.

Іконки бувають різні: на продуктах, в архітектурі, в комп'ютерах, у списках, на кнопках, для Інтернету та додатків, для iOS та Android. Іконки на панелях інструментів, підписані та непідписані, стилізовані та стандартизовані, кольорові та монохромні, у іконкових шрифтах, файлах PNG або SVG…

Є багато безкоштовних і платних наборів іконок, векторних і растрових, плоских і об'ємних, і якщо записувати правила роботи з ними, знадобиться товстіший зошит. Чортових іконок так багато, що Диявол легко переконає вас, що вони витягнуть навіть поганий дизайн.

Але будьте обережні. Якщо «іконка» стане вашою відповіддю на будь-яке запитання, якось Дон Норман постукає у ваші двері, а коли відчините, уважно подивиться вам у вічі і скаже:

«Незрозумілі іконки засмічують інтерфейс, хоча наукова спільнота давно показала: люди запам'ятовують значення лише небагатьох іконок. Чи можете ви згадати значення всіх цих іконок? Я – ні».

Цими словами Дон Норман повчав свого колишнього роботодавця – Apple. Приклади іконотоксиозу Apple зустрічаються в iTunes, Mail та панелі керування iOS.

У твіттері айтюнсовими іконками лякають як Бабою Ягою. Ось чудовий приклад з Apple Mail для OS X: скільки з цих іконок ви розпізнаєте без підпису?

Що ми бачимо на цьому прикладі? Тільки те, що іконки заощаджують місце та виглядають свіжо. Призначення кнопок не викликає питань лише у дизайнера, який розмістив іконки на цій панелі. За іконкою може ховатися тисяча різних слів, і це головна проблема. Коли у слова – тисяча значень, лише гарне розуміння контексту дозволить уникнути різночитань. Ось ті ж іконки, але з підписами:

Підписи пояснюють ікон. З ними інтерфейс стає зручнішим. Через це деякі безсердечні люди стверджують, що «найкраща іконка – це текст». Логічно, правильні підписи рятують від плутанини. То чому б нам не використовувати лише підписи без іконок?

Функціонально чисто текстовий дизайн ясний як день (якщо інформаційні архітектори впоралися зі своїм завданням), але щось ламається, коли ви прибираєте зображення з інтерфейсу. Життя залишає його. Він перестає бути свіжим та веселим. Це не турбує дизайн-позитивіста. Але хвилює решту людей. Ми перевірили цю гіпотезу, вилучивши іконки з iA Writer. Реакцією користувачів було рішуче "Не треба!"

Можливо, краще не вибирати між текстом та іконкою, а зрозуміти, коли використовувати лише іконки, коли лише текст, а коли іконки з підписами. Давайте розберемося.

Тільки іконки

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

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

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

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

«Загальна проблема піктографічних систем у тому, що єдине їхнє обмеження – кількість предметів із навколишнього світу, які можна показати на зображенні».

Голі іконки на функціональних елементах інтерфейсу погіршують юзабіліті. Найкращий спосібповідомити про функцію - слово, а не картинка. Ще краще, якщо це дієслово.

«Коли справа доходить до завжди недосконалого обміну думками між людьми, найкраще, що у нас, людей, для цього є це мова. Письмова мова надає думкам довговічність і точність (ми рідко виправляємося в мову, а цю пропозицію я виправив кілька разів)».

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

«Іконка – це символ, однак незрозумілий будь-якою мовою. Не важливо, які мови ви знаєте, значення іконки вам доведеться навчитися. Люди не просто так вигадали фонетичні мови, де можна об'єднати кілька символів для створення будь-якого слова. Багато дизайнерів запевняли мене використовувати іконки в інтерфейсі. Я питав їх, «це справді найкращий інтерфейс, який можна придумати, чи він зроблений за звичкою?» Дизайнерів просто застрягли у цій парадигмі і не помічають її занепаду».

Іконки модно виглядають і круто вирішують проблеми із нестачею місця. Звичайно, не одна Apple винна у зловживанні голими іконками. Матеріальний дизайн Google отруєний фірмовими символами. Ось для порівняння Gmail:

Що ми тут бачимо? Іконки Gmail виглядають просто, але вони змушують подумати про призначення кнопок. Якщо ви зосередитеся і трохи зосередитеся, зможете вгадати. Через деякий час вам буде допомагати м'язова пам'ять, але і короткострокова і довгострокова пам'ять прийматиме їх з такою ж працею. У поштовому додатку концентрацію та зосередженість слід спрямовувати на розуміння та написання тексту, а не на розшифровку інтерфейсу.

Стоп! А хіба Google не вимірює все у світі? Вони, напевно, знають, що роблять, так? Там працюють вчені. Вони обрали підхід із іконками без підписів, і вони ніколи не помиляються. Значить, іконки – це правильно! Можливо, але те, що підходить Google або Facebook може не підійти нам. Як буде сказано нижче, Google могли знайти причину поза природничими науками. Як би там не було, Google пропонує і варіант із голим текстом.

Тільки текст

Зображення можна інтерпретувати по-різному. Залежно від контексту навіть всюдисуще збільшувальне скло читається і як «пошук», і як «збільшення». Значення слова також залежить від контексту, але читається воно завжди однаково. Що, якщо іконки замінити на текст? Логічно, що такий інтерфейс працюватиме краще за іконковий. У налаштуваннях Gmail можна замінити іконку на текстову версію:

Що сталося? Сенс кнопок тепер зрозумілий. Але інтерфейс став менш людяним, менш веселим. Він нагадує робочий інструмент, став холоднішим, і, на диво, здається складнішим. Як це можливо? Текстовий інтерфейс об'єктивно зручніший, але через естетичні нюанси він таким не сприймається.

Текст – це раціональний вибір. Правильно структуровані та названі функції – основа взаємодії людини з комп'ютером.

Іконки – це емоційний вибір. Правильні іконки додають позитиву. Емоційний вплив не виміряти, але він стає від цього менш реальним.

«Недостатньо створювати продукти, які працюють, які зрозумілі та прості у використанні. Треба створювати продукти, які привносять захоплення та збудження, радість та веселощі, і звичайно, красу в людські життя», - Дон Норман у книзі «Дизайн звичних речей».

Люди - і раціональні та емоційні створення: «Мозок не обробляє інформацію, здобуває знання та зберігає спогади. Якщо коротко: мозок – не комп'ютер». Якщо щось на тему зручності іконок і доведено, то це те, що «Іконки з підписами працюють краще, ніж чисто іконка чи чисто текст».

Значок з підписом

Іконка з підписом та емоційна та зрозуміла. Іконки з підписами працюють завжди. Якщо іконка не зрозуміла, підпис пояснить. То чому б не використати цю пару переможців?

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

Емоційно ми віддаємо перевагу іконкам. Раціонально краще замінити іконки на текст. Теоретично значок з підписом - безпрограшний варіант. На практиці у дизайні немає срібних куль.

Безпрограшних варіантів немає, але є компроміси кращі та гірші. Ми працюємо для людей. Люди відчувають та думають. Хоча краще не заглиблюватись у релятивізм.

Теорія та практика

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

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

Прості правила

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

Іконка позначає певний розділ чи функцію. Вона є словом, яке доносить простий і зрозумілий сенс. Зміст повідомлення залежить від контексту. Навіть найпрекрасніша іконка буде марною, якщо слово підібране незрозуміле чи не відповідне контексту. Перш ніж вибрати іконку, запитайте себе: Яке слово вона позначатиме? Це правильне слово? Зрозуміле? Воно працюватиме у цьому контексті? Значок може приховувати багато різних понять. Слова в контексті не такі пластичні. На відміну від іконок вони підкоряються багатьом правилам.

Коли ваша структура готова і настав час вступати в гру іконкам, радості та іншому, дотримуйтесь простого правила: додайте необхідний мінімум іконок, але не менше.

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

Іконки - це прикметники та прислівники у звичайному тексті. Їх видалення не перетворить ваш текст на літературний шедевр. Видаляйте зайве, шукайте підходяще, замінюйте розпливчасті та химерні формулювання на точні та лаконічні.

Есе написано фахівцями компанії iA.


З іконками ми зустрічаємося щодня під час використання комп'ютера, т.к. вони формують основу графічних інтерфейсів, що використовуються для сучасного програмного забезпечення. Ці маленькі малюнки використовуються для представлення файлів (включаючи веб-сторінки) та програм, а також для виконання команд.

Як ми використовуємо іконки?

Іконки зручно розташовуються на нашому робочому столі або всередині програм і чекають, поки на них клікнуть (один або два рази). Їх легко розпізнати, вони репрезентують зручний спосіббезпосередньо дістатися до потрібної функціональності не пробираючись через завали команд та меню.

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

Як розробляються іконки?

За своєю структурою, іконки мають стандартні розміри, зазвичай досить невеликі – від 16×16 до 48×48 пікселів (на Маках – до 128×128, у Windows Vista – до 256×256). Одна іконка зазвичай містить кілька малюнків, включаючи прозорі ділянки, щоб черзі її було видно фон робочого столу. Через це здається, що значок знаходиться над робочим столом або панеллю інструментів, на якій вона розташована.

Іконка містить кілька малюнків різних розмірів та кольоровості для того, щоб дозволити Windows або Mac OS використовувати найбільш підходящу з них для цієї ситуації. Цей вибір залежить від режиму, в якому знаходиться монітор комп'ютера та місця, де має з'явитися іконка. Наприклад, іконки, що відображаються на панелі завдань Windows, зазвичай мають розмір 16x16 в той час як іконки на робочому столі - 48x48.

Які формати використовуються для іконок?

Іконки Windows мають розширення "ICO", а маківські - "ICNS", "RSC", "RSRC" або "BIN". Одна іконка (включно з усіма варіаціями) міститься в одному файлі, в той час як групи іконок об'єднуються в бібліотеки.

У чому відмінність іконок Windows XP?

Іконки для Windows XP мають насичений колір та гладкі краї, доповнюючи стиль Windows XP. Їхні краї, як правило, злегка огруглені і джерело світла розташовується у верхньому лівому кутку, в той час як розсіяне світло висвітлює інші частини малюнка.

Градієнти, контури та тіні використовуються, щоб додати іконки розмірності та контрастності. Деякі іконки в XP мають панорамний вигляд, у той час як іконки, що використовуються для документів або ті, що зображують символи або одиночні об'єкти, повернені "обличчям". Загалом їх можна описати як сучасні та високоякісні.

У XP іконки праворуч від меню "Пуск" мають розмір 24×24, а використовувані в панелях інструментів – 24×24 або 16×16. Система підтримує 32-бітові іконки, які насправді є 24-бітними малюнками з 8-бітним альфа-каналом, через який краї іконок виглядають гладкими і поєднуються з фоном.

Іконки Windows XP включають три кольори для підтримки різних установок монітора: 24-бітові з 8-бітовим альфа-каналом, 8-бітові (256 кольорів) з 1-бітною прозорістю та 4-бітові (16 кольорів) з 1-бітною прозорістю.

  • Переклад

Від перекладача.
Це переклад статті Філіпа Бернарда із сайту css-tricks.com. Частину статті, що містить опис роботи зі створеним ним сервісом, я дозволив собі опустити. Якщо ви знайдете помилки, будь ласка, повідомити про них в особистому повідомленні.

Стаття містить результати проведеного ним дослідження, яким має бути фавікон (і те, що його замінює), щоб добре відображатися у різних випадках.

Фавікон був представлений в 1999 році, в Internet Explorer 5 () і стандартизований W3C через кілька місяців. Це була маленька іконка, яка представляла сайт.

З того часу більшість настільних браузерів слідують тенденції і використовують фавікон тим чи іншим способом. Це дуже просто, чи не так? Створити маленьку картинку і додати до будь-якого інтернет-проекту, щоб зробити його «завершеним». Нічого складного. Чи ні?

Влаштуємо вікторину!

Який основний файл фавікон?

Відповідь: favicon.ico.Просто переконатися: це не PNG, перейменований в favicon.ico. Хоча деякі браузери вибачать цю помилку, ICO це інший формат, який підтримує кілька версій зображення.

Питання: Якого розміру має бути favicon.ico?

A: 16х16.Стандартний.
B: 32х32.Хіба фавікон не оновлювався якийсь час тому?
C: 64×64.
D: Жоден із перерахованих.

Відповідь: D.

Формат favicon.ico спочатку задуманий Майкрософт та підтриманий деякими іншими виробниками. Майкрософт рекомендує розміри 16х16, 32х32 та 48х48. Так, один ICO може містити декілька зображень.

Браузери зазвичай відображають фавікон на вкладках і на звичайних дозволах, версія 16х16 виглядає добре:

16х16 на вкладці Chrome. Поки що все добре.

Але іконка 16х16 дуже мала для інших місць: панелі завдань та робочого столу.

16х16 у панелі завдань.


16х16 на робочому столі. Не добре.

Коли іконка містить кілька зображень, результат набагато кращий.

16х16, 32х32 та 48х48 favicon.ico в панелі завдань. Виглядає як проста програма.


16х16, 32х32 та 48х48 favicon.ico на робочому столі. Ідеально.

Запитання: Яке призначення favicon.png?

Насправді частіше зустрічається інший файл, favicon.png. Люди часто питають про це.
Що це насправді?

A: Значок для браузерів, які не підтримують favicon.ico.Такі як Firefox, мабуть?
B: Значок високої роздільної здатності.Знаєте, з усіма цими новими екранами із високою щільністю пікселів.
C: Артефакт із минулого.Тепер це нові іконки, наприклад Apple Touch icon.
D: Все разом.

Відповідь: D.
Починаючи з прийняття HTML5 favicon.ico не надто корисний. Було представлено атрибут sizes, що дозволяє оголосити кілька різних версійоднієї і тієї ж іконки, і це можуть бути файли PNG:

То що ми маємо оголошувати?

Давайте подивимося правді у вічі. Хоча майже всі настільні браузери підтримують favicon.ico, цей файл застарів. Так, ви, як і раніше, можете використовувати цей файл і все буде працювати, як задумано. Але серйозно це застарілий формат. Він не використовується ніде, крім Інтернету. PNG підтримується набагато краще.

Favicon.ico – для старих версій IE. Для інших браузерів та останніх версій IE використовуйте іконки PNG. Так які sizesнеобхідно визначати? Скоро дізнаємось.

Питання: Який формат потрібний для підтримки мобільних платформ?

Згідно з SmartInsights, більше 26% веб-трафіку генерується смартфонами та планшетами. Це майбутнє. Що потрібне для підтримки цього світу?

Відповідь: favicon.ico.Це працювало 15 років тому, працює й сьогодні.
B: PNG ікон.Ви сказали, що розкажете про це.
C: Apple Touch icon.Кеп.
D: Тут все одно немає правильної відповіді.

Відповідь: D.Потрібні PNG ікон. І Apple Touch icon. І плитки для Windows 8. І файл під назвою browserconfig.xml.

Мобільні платформи набагато гетерогенніші, ніж звичайні настільні браузери. Розміри екранів і роздільної здатності дуже сильно варіюються і немає переважаючої операційної системи, такий як Windows, як це було за часів появи інтернету.
Наслідок: не думайте, що мобільний фавікон може бути одним універсальним малюнком або мати універсальне оголошення в HTML коді.

Запитання: Якого розміру повинні бути PNG іконки?

A: 96х96 для Google TV
B: 196х196 для Android Chrome
C: 228х228 для Opera Coast
D: Усі перелічені

Відповідь: D, і навіть більше.Наприклад, 160х160 для старої версіїшвидкого набору Opera (давно в минулому), або 128х128 для Chrome Web Store, все залежить від платформи, яку ви збираєтеся підтримувати.

Запитання: Який розмір Apple Touch icon?

Apple Touch icon використовувані iOS для закладок та сайтів «на домашньому екрані». На думку спадає 57х57, браво. Це вірно. Тільки це було 7 років тому, коли було випущено перший iPhone.

Відповідь: Аж до 180х180.

Після появи першого iPhone, було 3 важливі релізи:

  • iPad. З екраном значно більшого розміру.
  • Retina-екрани. З подвоєною щільністю пікселів.
  • iOS7. Плоский дизайн відрізняється на iPhone/iPad.
Усього є 9 комбінацій.
Пристрій Екран Версія iOS Розмір іконок
iPhone Classic 6 і нижче 57x57
7 60x60
Retina 6 і нижче 114x114
7 120x120
6 Plus 8 і вище 180x180
iPad Classic 6 і нижче 72x72
7 76x76
Retina 6 і нижче 144x144
7 152x152



Стара 57х57 Apple Touch icon на блискучому Retina iPad. Мутно.


Великий 152х152 Apple Touch icon на Retina iPad. Обережно.

Якщо ви відповіли неправильно, не засмучуйтесь. З 5000 популярних сайтів, які надають apple-touch-icon.png, менше 4% роблять це правильно.

Деякі можуть заперечити, що всі 9 зображень не дуже потрібні. Однак, принаймні, основна Apple Touch icon має бути 152х152. Retina iPad під iOS 7 знайде, що потрібно, а молодші пристрої можуть зменшити зображення.

Питання: Чи потрібно оголошувати Apple Touch icon у HTML?

A: Не знаю.Потрібно ж щось відповісти!
B: Так.Інакше як iOS знайде їх?
C: Ні. Apple пропонує рекомендації, так що будь-яке iOS пристрійвсе одно їх одягнений.
D: Ні, але...

Відповідь: D… але деякі інші платформи також використовують Apple Touch icon, краще їх оголосити.

Як дивно це не звучало, пристрої під iOS не єдині, які шукають Apple Touch icon. Оскільки вони популярніші і зустрічаються частіше за інші PNG іконок високих дозволів, деякі браузери, на зразок Android Chrome, використовують їх. Таким чином, краще їх оголошувати, це дозволить відвідувачу із сумісним пристроєм або браузером використовувати одну з них.

Запитання: Як оголосити плитку для планшетів на Windows 8?

A: Планшет на Windows 8? Що таке?
B: favicon.Спадщина Стіва Балмера.
C: Мета-теги. Два msapplication-TileColorі msapplication-TileImage.
D: browserconfig.xml.

Відповідь: C для Windows 8 та IE 10, D для Windows 8.1 та IE 11. Відповідь A у чомусь теж вірна.

Оголошення для Windows 8.0 виглядає якось так:

Windows 8.1 та IE 11 очікують кілька версій зображення, оголошених у browserconfig.xml. Наприклад:
#2b5797
Новий інтерфейс Metro пропонує кілька нових принципів дизайну, наприклад, «білі силуети», які використовуються більшістю встановлених програм.


Плитки сайтів у Windows 8.

Запитання: Який розмір плитки square150x150logo?

A: 150х150.Ви не вмієте читати?
B: Інший.

Відповідь: B, 270х270.

«Шеф-редактор блогу GetGoodRank, веб-аналітик, блогер.
Як правильно оформити та застосувати іконки на сайті? Розповідаємо про простих правилахюзабіліті іконок, а також наводимо простий чек-лист перевірки.»

Іконка - схематичний елемент графічного інтерфейсу, що означає програму, функцію або тематичний розділ сайту/додатку. Іконки прості, лаконічні та ефективні. Використовуються для спрощення графічного інтерфейсу програми або сайту, а також для спрощення та прискорення комунікації з користувачем ( людська свідомістьв рази швидше обробляє та «розуміє» графіку, ніж текст). Іконки класифікуються залежно від виконуваної функції:

  • Навігаційні іконки- використовуються для позначення функції: навігаційні стрілки вгору та вниз для переміщення по довгій сторінці, кошик для переходу в кошик, лупа для активації рядка пошуку.
  • Інформаційні іконки- Вказують на тематику розділу. Наприклад, схрещені інструменти часто вказують на розділ з технічною інформацією, шестерня – на розділ з налаштуваннями, машина вказує на інформацію про доставку, цифри 24/7 – на цілодобовий графік роботи тощо.
  • Іконки-заклики до дії- Часто використовуються для позначення очевидних дій. Наприклад, на сторінці завантаження програми жирна стрілка вниз позначає заклик до завантаження софту, на сторінці товару плюс означає заклик додати товар у кошик і т.д.

Правила юзабіліті іконок

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

1. Супровідний текст- Різні сайти використовують навіть стандартні іконки з різною метою. Так, стандартна лупа може позначати пошук сайту або наближення/збільшення зображення. Графічні символи можна трактувати подвійно. Щоб спростити завдання користувача, слід супроводжувати текстові іконки. Це переважно стосується іконок навігації. Текст та графіка в парі працюють набагато краще, ніж щось одне.

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

3. Клікабельність- іконки, за якими доступна дія, повинні візуально демонструвати клікабельність: підсвічування при наведенні курсору, зміна кольору, збільшення. Це дасть зрозуміти користувачеві, що іконка функціональна, а не просто елемент графічного інтерфейсу. Застосовуйте мінімальну анімацію.

4. Тест 5 секунд- під час розробки індивідуальної концепції іконок (застосування нестандартних іконок) проведіть тест 5 секунд. Якщо ви протягом 5 секунд не зможете ідентифікувати іконку і зрозуміти, що вона означає на сайті, значить даний графічний символ неприпустимий в дизайні. Він створюватиме додаткові перешкоди на шляху користувача до мети: вивчення інформації на сайті, вибору товару/послуги.

5. Розмір має значення- занадто дрібні символи ризикують залишитися непоміченими в дизайні, тоді як занадто великі іконки можуть спантеличувати, домінувати над іншими елементами і перетягувати на себе увагу (особливо якщо великі іконки виділені кольором).

Як перевірити юзабіліті іконок

Використовуйте для перевірки юзабіліті іконок на сайті наступний чек-лист запитань:

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


 

Можливо, буде корисно почитати: