Иконки как мы работаем: Об иконках — — Независимое театральное объединение "Зрительские симпатии"

Содержание

Об иконках —

Иконки экономят место и выглядят свежо. Иконки — это быстрый ответ на сложные вопросы:

Как сделать красивее?
Как нам это забрендировать?
Как сделать веселее?

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

Иконки бывают разные: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для 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.

Делиться хорошо!

Facebook34
Twitter

Дизайн–система Acronis.

Часть вторая. Иконки, SVG шрифты, Gulp / Хабр

Меня зовут Сергей, и я все еще работаю старшим дизайнером в компании Acronis. Мы продолжаем оптимизировать работу отдела дизайна продуктов для бизнеса и все больше интегрируемся в процессы на стороне front-end разработки.

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

Первое погружение

До вмешательства ситуация с иконками выглядела следующим образом:

В первом случае использовались PNG спрайты, во втором — один из двух шрифтов с примерно одинаковым набором иконок, а в третьем случае SVG хранились в JS и инлайнились в проект по мере необходимости. Складывалась абсурдная ситуация, когда добавление новой иконки в несколько продуктов превращалось в утомительный квест с привлечением разработчиков из разных команд.

Дизайнеры не отставали и старательно поддерживали похожий бардак у себя. Часть иконок в виде отдельных SVG была разложена по папкам, другая часть хранилась в AI файлах, а остальные иконки были доступны только в Sketch и Zeplin.

Проблемы, которые требовали решения

Единое место для хранения и поиска актуальных иконок
Добавление и обновление иконок в Sketch файлах
Универсальное решение на стороне разработки

Забегая вперед скажу, что львиную долю проблем мы решили. Актуальные иконки собрали в одном месте, систематизировали и разбили по продуктам. В качестве универсального решения выбрали SVG шрифт, а процесс обновления и сборки шрифта автоматизировали и забрали на сторону дизайна.

Дизайнеры работают с терминалом, коммитят и пушат все изменения в git.

Sketch

На первом шаге мы собрали все иконки в одном Sketch файле, разбили по продуктам и добавили в Zeplin.

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

Вместо отсутствующих иконок и в макетах, и на верстке мы используем заглушки.

Как только недостающая иконка появляется в шрифте и новая сборка публикуется в npm, заглушка автоматически меняется на корректное изображение.

Lingo

На втором шаге собранные иконки мы добавили в Lingo и, для удобства поиска, протегировали. Теперь иконки ищутся по размерам, типам, синонимам, именам или фильтруются по продуктам.

Добавление иконок в новый документ или обновление уже существующего документа происходит с помощью Sketch плагина, который идет в комплекте с Lingo. К слову, в Lingo хранятся не только иконки, но и вся библиотека компонентов. Чуть подробнее об этом приложении я рассказывал в прошлой статье.

Технические особенности

Любую иконку из библиотеки можно покрасить в другой цвет через overrides без необходимости разгруппировывать символы или держать в наборе дубликаты с другим цветом. Достигается это за счет наложения квадратной маски на шейп внутри символа.

Несмотря на очевидные плюсы, у этого способа оказался один существенный минус. При использовании масок код после экспорта SVG выглядел так:

Корректно добавить такую иконку в шрифт нельзя, из-за маски на месте иконки будет цветной прямоугольник. Идею держать дополнительный набор «чистых» иконок для разработчиков мы отбросили сразу как трудозатратную и стали искать решение. Первым делом мы посмотрели в сторону SVGO и провели несколько тестов:

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

npm run remove-mask

Конечно же, мы выбрали второй вариант и решили собрать свой велосипед с катафотами и брызговиками. На всякий случай мы проверили несколько десятков иконок и убедились, что Sketch отдает примерно одинаковый код для любого экспортированного SVG из библиотеки.

В таком коде легко найти закономерности, а вырезать из него лишнее и заново пересобрать SVG — дело техники. Итогом непродолжительной работы стала gulp-задача которая делает следующее:

Для запуска задачи достаточно написать в консоли одну команду, а работа с набором из 200 иконок занимает меньше секунды и дает именно тот результат, который нужен.

SVG шрифт

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

До настоящего момента на стороне разработки использовались два способа сборки шрифтов.

Icomoon — веб-приложение. Сборка и обновление шрифта происходит в ручном режиме

FontCustom — набор консольных утилит. Сборка проходит в автоматическом режиме, но требует установки Ruby, Python, eot-utils и Fontforge

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

Дальше дизайнер пушит обновленную версию в git, где срабатывает триггер, который дергает задачу в Jenkins на сборку и публикацию в npm.

Давайте еще раз посмотрим на процесс до вмешательства:

А теперь после:

Вместо заключения

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

Отдельное спасибо Сергею Сабурову и Дмитрию Козлову за помощь, терпение и поддержку.

Кстати, мы всегда рады опытным дизайнерам. Если вы такой, напишите мне на почту: [email protected]

Если вы опытный, но не дизайнер, посмотрите открытые вакансии на HH.

Список ссылок

Дизайн-система Acronis. Часть первая. Единая библиотека компонентов
Lingo
Icomoon
FontCustom
Gulp-iconfont
Мой Facebook

190 033 рабочие иконки — бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 5,7 миллионам активов

Получите неограниченное количество загрузок

Работа Значок

Рабочее место Значок

Работа Значок

Работа из дома Значок

Работа Значок

Работа из дома Значок

Рабочая среда Значок

Работа Значок

Работающий человек Значок

Работа Значок

Работа из дома Значок

Рабочий сотрудник Значок

Работа Значок

Работа из дома Значок

Работа в команде Значок

Работа из дома Значок

Работа Значок

Работа из дома Значок

Рабочий стол Значок

Работа Значок

Рабочие Значок

Отвлечение от работы Значок

Работа в процессе Значок

Работа из дома Значок

Работа Значок

Рабочий стол Значок

Работа Значок

Работа из дома Значок

Рабочая среда Значок

Работающий Значок

Рабочий стол Значок

Работа Значок

Рабочее место Значок

Рабочая проблема Значок

Рабочий Значок

Работа из дома Значок

Рабочая среда Значок

Рабочий стол Значок

Рабочее время Значок

Работающий Значок

Работа из дома Значок

План работы Значок

Рабочий Значок

Отработать Значок

План работы Значок

Работа Значок

Рабочий стол Значок

Работа Значок

Рабочий процесс Значок

Работа Значок

Рабочий сотрудник Значок

Работа из дома Значок

Баланс работы и личной жизни Значок

Работа из дома Значок

Управление работой Значок

Рабочие Значок

Работа Значок

Работа выполнена Значок

Работа Значок

Рабочее давление Значок

Работающие женщины Значок

Рабочий процесс Значок

Работа из дома Значок

Нагрузка Значок

Рабочее место Значок

Работа из дома Значок

Работа на ноутбуке Значок

Рабочее время Значок

Рабочая группа Значок

Рабочий документ Значок

Работа из дома Значок

Ход работы Значок

Работа Значок

Ход работы Значок

Работающие женщины Значок

Работа Значок

Работа в процессе Значок

Работа Значок

Работа в процессе Значок

Работа Значок

Удовлетворенность работой Значок

Работа Значок

Работа Работа Компьютер Нажмите Цвет Значок

Нагрузка Значок

Рабочая форма Главная Значок

Работа Значок

Работающий Значок

Работа Значок

Рабочая жизнь Значок

Рабочий стол Значок

Работа на дому Значок

Работа Значок

Совет по поиску вакансий FlexJobs: использование значков вакансий

Мы хотим, чтобы соискатели могли легко ориентироваться в онлайн-списках вакансий. На сайте FlexJobs вы увидите значки и символы, которые помогут вам найти лучшие возможности.

Бри Вейлер Рейнольдс

Что отличает FlexJobs от других вакансий? У нас есть самая большая база данных гибких и удаленных вакансий, проверенная вручную: более 50 000 компаний активно нанимают более 30 000 удаленных и гибких рабочих мест.

Имея так много возможностей, мы хотим, чтобы соискатели могли легко ориентироваться во всем. На всем сайте вы увидите значки и символы , которые помогут вам найти лучшие возможности .

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

Значки заданий на FlexJobs: краткие советы

Ищите руководство по основным значкам

В левом верхнем углу любой страницы результатов поиска работы вы увидите круглую кнопку «i». Щелкните ее, чтобы получить доступ к полному списку значков FlexJobs. Вы можете обратиться к нему в любое время во время поиска работы на сайте.

Имена работодателей

Когда вы войдете в свою учетную запись FlexJobs, вы сможете увидеть название должности, уровень гибкости, местоположение и название компании, а также краткое описание роли.

Если вы не вошли в свою учетную запись, вы можете увидеть ту же информацию , за исключением для названия компании.

Мы даем каждому соискателю возможность просмотреть обширные списки вакансий на нашем сайте. Но только участники FlexJobs видят подробное описание вакансии, включая информацию о компании и о том, как подать заявку на вакансию.

Избранные компании

Некоторые публикации будут отмечены оранжевой звездочкой со словом «Избранное» над названием должности.

Избранные компании приходят напрямую на FlexJobs. Это работодателей, утвержденных нашими сотрудниками , которые могут размещать свои вакансии прямо на сайте.

Компании, не отмеченные звездочкой «Избранное» в своем списке, — это сообщения, которые исследователи FlexJobs просмотрели и проверили, чтобы убедиться, что они законны, прежде чем публиковать их на сайте.

Дата объявления о вакансии

Щелкнув по объявлению о вакансии, вы увидите более подробную информацию о вакансии, включая дату публикации вакансии на FlexJobs.

Должности на FlexJobs проверяются каждые шесть недель, чтобы убедиться, что они все еще доступны, а все занятые удаляются из базы данных. Средняя вакансия остается на доске объявлений в течение 45 дней , поэтому не позволяйте дате отбить у вас желание подать заявку.

Требуемое местоположение

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

Синий/Серый значок : Обозначает, что вакансия предназначена для кандидатов из определенного города, штата или региона. В этих заданиях также будет указано, какое место или места принимаются.

Флаги стран : Обозначает, что работа предназначена для кандидатов, проживающих в определенной стране.

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

Почести и награды

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

Например, судя по значкам на вакансии выше, этот работодатель: Пули, возможно, придется изменить в зависимости от рисунка

Избранный работодатель FlexJobs
100 лучших компаний из списка Fortune для работы
Компания из списка Fortune 500
одна из лучших компаний по гибким рабочим местам
одна из лучших компаний для удаленной работы
одна из самых этичных компаний мира
и самая надежная компания Forbes

Если навести указатель мыши на любую награду на странице результатов поиска работы, появится описание этой награды.

Тип работы, гибкость и график

Под каждой должностью (если вы не вошли в свою учетную запись) или названием компании (если вы вошли в систему) вы увидите тип предлагаемой работы: внештатная, временная, неполный рабочий день, полный рабочий день, удаленный, сезонный, гибкий график или альтернативный график. Каждая должность может быть комбинацией типов работы, гибкости и графика.

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

Краткое описание работы

Когда вы просматриваете список результатов поиска, вы увидите краткое описание каждой работы. Это уникально и написано нашей командой. Он предназначен для того, чтобы дать вам краткое представление о требованиях к должности, зарплате (если она указана), часах работы, льготах и отрасли .

Сохранить задание

Когда вы войдете в свою учетную запись FlexJobs, рядом с каждым заданием вы увидите сердце.