Существует несколько причин для создания в WordPress меню с картинками (иконками). Во-первых, это отличный способ сэкономить место, заменив название главной страницы на «домик». Во-вторых, некоторые символы говорят намного больше нежели текстовые значения — кнопки Facebook, Twitter и т.п. И наконец, в-третьих, графические элементы могут сделать навигацию более наглядной за счет добавления изображений, например, в список категорий. Все три варианта вы можете видеть с превьюшке поста слева. А ниже я расскажу как их можно реализовать.
Итак, по сути, есть три принципиально разных метода вставки иконок в меню WordPress:
В первом случае придется немного «покодить», что не всем новичкам под силу. Второй же ориентирован больше на полноценные изображения, а не символьные шрифты. Третий — вообще универсален.
Иконки в WP меню с помощью Font Awesome
Ранее я уже писал детальную статью про использование . В ней найдете примеры кода для добавления символов в заголовки виджета, контент и навигацию. Хотя, последний вариант реализовывался там несколько иным образом нежели в текущем посте. Можете посмотреть, если интересно.
1. Итак, дабы вставить картинку в меню Вордпресс первым делом заходим внутри админки в раздел «Внешний вид» — «Меню». Создать новый элемент в навигацию сайта вы можете через «Страницы» или «Произвольный ссылки».
Какой бы способ вы не выбрали, главное в поле «Текст ссылки» добавить код символа Font Awesome, например, для главной:
add_action("wp_enqueue_scripts", "enqueue_font_awesome"); function enqueue_font_awesome() { wp_enqueue_style("font-awesome", "//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"); }
Скачивать скрипт не нужно, он грузится прямо с официального сайта сервиса . Там же в разделе Icons сможете посмотреть коды других иконок для WordPress меню.
В некоторых статьях я замечал, что разработчики включают в стили строки по типу:
| #menu-item-121 a, #menu-item-122 a {font-family: FontAwesome;} |
#menu-item-121 a, #menu-item-122 a {font-family: FontAwesome;}
Здесь двум элементам с ID с номерами 121 и 122 (смотрите в HTML коде) указывается использование символьного шрифта. Возможно, это какой-то старый вариант реализации, т.к. в моем случае ничего кроме подключения скрипта не требовалось. Однако на всякий случай дополнительно привожу эти стили.
Важный нюанс/проблема! Так как текст в данном пукте, по сути, отсутствует, то в мобильной версии навигации строка «Главная» не отобразится. Поэтому, если адаптивное меню в теме создается автоматически, вероятно, придется отказаться от такой реализации в пользу варианта из . При этом тексту в CSS ставите свойство text-indent: -99999px, а отображение иконки задаете в псевдоэлементе before.
WordPress плагин для меню с картинками
2. Этот прием добавляет в пункты новый элемент — класс стилей. Указываем в желаемом объекте название, например, my — menu .
3. Затем переходите в раздел «Медиафайлы» и загружаете необходимое для показа изображение.
4. После этого открываете файл стилей шаблона (style.css) и вставляете туда следующий код:
| .my-menu { background-image : url ("http://ваш_сайт/wp-content/uploads/menuimg.png" ) ; background-repeat : no-repeat ; background-position : left ; padding-left : 20px ; } |
My-menu { background-image: url("http://ваш_сайт/wp-content/uploads/menuimg.png"); background-repeat: no-repeat; background-position: left; padding-left: 20px; }
Сохраняете и смотрите результат.
В принципе, как я уже говорил выше, тут есть разные нюансы. Во-первых, можно было бы вообще не создавать новый класс, а просто посмотреть HTML код сайта и прописать стили, например, для #menu-item-121 и т.п. — система автоматически добавляет ID каждому пункту навигации.
Во-вторых, данный пример использования CSS свойства background можно заменить на тот же Font Awesome:
| li#menu-item-2996 a: before { content : "\f015 " ; font-family : FontAwesome; padding-right : 7px ; } |
li#menu-item-2996 a:before { content: "\f015"; font-family: FontAwesome; padding-right: 7px; }
Все зависит от того какую именно задачу вы хотите решить. WordPress плагин для меню с картинками значительно облегчает работу начинающим пользователям, хотя, возможно, он немного избыточен. Вариант с Font Awesome идеально подойдет, если у вас на сайте уже используется данный скрипт. Подключать его через WP админку проще простого. И наконец третий способ требует от вас небольших знаний верстки либо внимательного применения кода из статьи.
А что вы делаете для вставки картинки или иконки в меню WordPress? Делимся опытом и приемами ниже.
Но не каждый задался вопросом, есть ли какие-то скрытые возможности и насколько удобней может быть ОС Андроид, когда все скрытые возможности известны.
Секреты мобильной ОС, значительно расширят ваше представление о функциональности и методах управления системой. Ниже представлена самая интересная функция, представляющая самую большую пользу для новичков.
Секрет. Доступ к контактам телефонного справочника или электронной книги.
Чтобы не искать контакт, который вы используете больше всего.
Действия:
1. Продолжительным нажатием на свободном месте рабочего стола, вызываем контекстное меню (в зависимости от версии андроид либо внизу экрана либо сразу над пальцем), в котором выбираем "Добавить ярлык"(add shortcut – часто бывает, что в неоригинальной версии данная фраза на английском).
В данном случае будет создан ярлык, при нажатии вызывающий нужного вам абонента. По такой схеме вы можете установить на рабочем столе Андроид ярлыки на нужных Вам абонентов которые вы часто набираете.
Если необходимо часто писать СМС сообщение, для определённого абонента, то необходимо при настройке ярлыка выбирать "Контакт" или написать СМС.
Теперь вы овладели одним из секретов Андроид ОС и способны мобильно набирать нужных вам абонентов. Стандартный способ добавление номеров в избранное и использование 10 номеров быстрого вызова известный и не представляют большого интереса у пользователей Андроид устройств, потому для доступа к клавиатуре необходимо еще трижды нажать по экрану. А в этом случае на главном экране у вас сразу после разблокировки будут необходимы номера и приложения.
А также хотелось бы обратить внимание тех, кто работает в сфере развлечений и организации вечеринок и праздников. Потому как сценическое световое оборудование , которое предлагает компания limeagency.ru сможет оживить все Ваши праздники до неузнаваемости. Получив уникальные световые решения за приемлемую цену.
Думаю, многие знают о возможности добавления иконки сайта на рабочий стол мобильного устройства. Это удобно и причины могут быть разные (нету мобильного приложения, предоставляющего туже информацию, либо вы хотите сразу открыть определенную страницу сайта и т.д.). За некоторые свойства того, как будет отображаться сайт и как будет выглядеть иконка после добавления и отвечает файл манифеста.
Манифест для сайта
– это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое
Подробнее
Чтобы показать, как manifest влияет на отображение сайта, я создал простое, тестовое веб-приложение, которые возвращает название региона по коду.Сначала зафиксируем положение дел до добавления файла манифеста.
После того как пользователь добавил иконку, она будет выглядеть так (на Андроид 5.0)
Название браузер выдернул из тега tilte. Так что, если у вас нету файла манифеста, то хотя бы title должен быть нормальным. А вот иконка в виде буквы “G” появилась сама (не понятно, почему именно G).
А сам сайт будет выглядеть так 
Тут, собственно, ничего особенного, кроме того, что мы можем убрать адресную строку, чтобы приложение было похоже на нативное.
Встречайте, manifest.json!
С примером манифеста можно ознакомиться по этой ссылке . Кратко пройдемся по параметрам:name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.
Генерируй и властвуй.
Конечно, можно написать весь манифест ручками, но это скучно, долго и можно ошибиться. Уже нашлось немало умельцев, которые автоматизировали этот процесс. Ниже небольшой обзор инструментов для автоматической генерации манифеста.brucelawson.github.io/manifest - все что вам нужно – заполнить поля (есть краткое описание каждого параметра, так что процесс довольно легкий), остальное за вас сделает генератор.
www.favicon-generator.org - хоть прямое назначение этого сайта генерировать иконки, а не манифест. Он все же его создает и в отличии от предыдущего у вас уже будут и иконки (для iOS и Аднроид) и манифест. Правда, манифест придется подправить (изменить имя и прочее настройки).
manifest-validator.appspot.com - этот инструмент предназначен для валидации вашего манифеста.
Результат
Итак иконки нарисовали, манифест сделали. Дальше надо сообщить браузеру о манифесте, добавив в тег head следующиеВсе. Смотрим, что получилось
Иконка:
Слева до. Справа после (иконка получилась невпечатлительная, с удовольствием поменяю, если пришлете лучше). Тут уже заметно, что Android использовал имя из поля short_name, так как name не помещается, видимо.
Загрузка приложения:
Тут самые приятные изменения. Во-первых, вместо белого экрана вы видите подобие splash screen, который сам создается системой из иконки, полного имени и цвета, указанного в манифесте (возможно, это происходит только на android 5.0 выше). Во-вторых, этот splash screen плавно исчезает, что визуально красиво.
Сам сайт:
Тут тоже все стало лаконично. Без UI браузера сайт смотрится гораздо лучше и больше похож на нативное приложение.
Я перечислил не все свойства, которые можно указать в файле манифеста. С полным списком можно ознакомиться
Статья от Анны Себовой , занимающейся вышивкой и программированием. И то и другое она совмещает в своём блоге, попутно рассказывая нам о разных интересных фишках.
У меня есть блог “Мадам Стороженко ” о рукоделии. Он совсем юный, и я часто захожу на него с мобильного, думаю, о чём бы написать, как его улучшить. При этом хранить его в открытых вкладках браузера на мобильном не очень удобно, закладки в мобильном браузере мне тоже не подходят. Поэтому я решила закрепить иконку-ссылку (ярлык) на блог на рабочем столе мобильного телефона.
Делается иконка сайта просто: в настройках мобильного нужно выбрать пункт “Добавить на главный экран “. Но созданная иконка совсем не напоминала мне мой сайт, а вызывала недоумение. Только кликнув на ярлык или прочитав подпись, я понимала, что это вообще такое. Сами понимаете, это неудобно.
Тогда я нашла лёгкий способ сделать иконку (или ярлычок, кому как удобнее) более узнаваемой. Это очень просто, нужно выполнить буквально пару действий.
Действие первое
Взять исходное изображение логотипа сайта (или фавикон) и обрезать его до стандартных для разных устройств размеров. В моём случае логотип и фавикон – это одно и то же изображение.
Я выбрала следующие удобные для мобильных и планшетов размеры:
– для iOS
два файла: apple-touch-icon.png
и apple-touch-icon-precomposed.png
– размером 57 на 57 пикселей:
– для Windows Phone
файлwindows-icon-70-70.png
:
– Android подхватывает одну из картинок и не требует дополнительных изображений и ссылок.
Действие второе
< link rel = "apple-touch-icon" href = "/mobile-icons/apple-touch-icon.png" / > < link rel = "apple-touch-icon-precomposed" sizes = "57x57" href = "/mobile-icons/apple-touch-icon-precomposed.png" / > < meta name = "msapplication-square70x70logo" content = "/mobile-icons/windows-icon-70-70.png" / > |
Вывести ссылку на сайт на рабочий стол мобильного телефона. Для этого открыть в браузере нужный сайт:
Потом открыть меню браузера (нажать на три вертикальные точки в правом верхнем углу браузера) и выбрать выделенный на скриншоте пункт:
Появится такое окошко:
Выбрать пункт “Добавить “.
Затем свернуть окно браузера и… вуаля! Сайт с красивой и узнаваемой иконкой находится на рабочем столе, да ещё и доступен в одно касание.
Удобнее не бывает.
P.S. Статья от Анны Себовой о том, как вылечить .
Иконка, пиктограмма, значок, символ, образ — как только не называют эти элементы графического интерфейса. Зачем они вообще нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя.
Именно с дизайна иконок началась жизнь нашей студии в 2005 году. Поэтому мы с удовольствием поделимся с вами всеми знаниями, накопленными за все эти годы.
Почему человеку вообще пришла в голову идея использовать значки, вместо слов?
Этот вопрос касается не только интерфейсов. В повседневной жизни иконки окружают нас везде: преследуют на дороге в виде дорожных знаков, встречают у входа в магазин и даже сидят на ярлыках нашей одежды.
Даже футболки уже специальные придуманы для туристов, которые помогают найти общий язык с аборигенами в любой стране. Стоит только ткнуть пальцем на нужную иконку.
Почему мы так любим значки?
Потому что у них есть ряд преимуществ:
- Они бросаются в глаза;
- Они быстро передают информацию;
- Они запоминаются;
- Они экономят место;
- Они понятны на любом языке.
Иконки интерфейсов имеют еще ряд преимуществ:
- Они более приятны глазу, чем полотна текста, которые бы могли быть на их месте. Чем меньше становится экран, тем больше слов хочется заменить специальными значками.
- Они могут придать вашему приложению визуальную индивидуальность.
Но главное, чем должна обладать любая иконка — это ЯСНОСТЬ
.
Если пользователь не поймет значение иконки, он либо будет ее избегать, либо путаться.
С мороженым — нельзя, с сигаретой — нельзя, с единорогом — можно
Чтобы решить проблему с ясностью иконки, можно пойти несколькими путями:
1. Объяснять новую иконку текстом, давать подсказки, учить юзера использовать ее правильно
Таким образом вы создаете новый пользовательский опыт. Человек, подобно тому, как учит алфавит, должен выучить и значки интерфейса. Чтобы идти этим путем, нужно быть уверенным в своем продукте, в готовности пользователей учиться ради его использования.
Возьмем в качестве примера Instagram.
Иконка с изображением ящика была неясна, мало кто понимал, что с ее помощью можно отправлять личные сообщения.
Сегодня иконку отправки личных сообщений поменяли на более ясную.
Поэтому рассмотрим 2-ой вариант.
2. Бороться за ясность, создавать иконки максимально понятные пользователю
И именно о том, как это сделать и не ошибиться в выборе, пойдет речь далее.
Почему иконки интерфейсов не всегда понятны пользователям?
Давайте разбираться в причинах.
10 ошибок в дизайне иконок интерфейсов
1. Неточность дизайна образа иконки
Для начала проведем небольшой тест.
Это как раз и есть пример иконки, которую нельзя однозначно интерпретировать, а значит она может вызвать недоумение у пользователя.
В одной старой статье об ошибках в дизайне иконок приводился в пример курьезный случай, когда иконку фильтра данных создали в виде воронки.
Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!» 🙂
Чтобы избежать двоякого трактования, дизайнер должен четко передать образ, смысл которого можно будет легко уловить. Не заставляйте пользователя думать.
2. Неясность ассоциации
В отличие от первой причины, в этом случае обычно сам образ передан правильно, но пользователю не ясно, почему использована именно эта иконка и что она означает.
Посмотрите еще раз на пример со старой иконкой для отправки личных сообщений в Instagram. Образ вполне уловим — изображен ящик. Но с чем у вас ассоциируется ящик? Сохранить? Входящие? Добавить новый файл? Ассоциация слишком тонкая, пользователю нужно думать, значит образ подобран неудачно.
Вот еще один наглядный пример того, как меня запутал интерфейс.
Как потом выяснилось, при наведении курсора на иконку всплывает подсказка.
Гораздо яснее для пользователя в этом случае был бы образ мусорного бака.
Кроме того, здесь интерфейс позволяет разместить слова “Удалить аккаунт”, и в этом случае использование текста вместо иконки выглядело бы оправдано.
Вот еще один пример, когда возникает диссонанс значения иконки и ее образа:
Никогда бы не подумала, что этот значок может использоваться для удаления папки
С одной стороны, иконки в интерфейсе должны подходить по стилю и смотреться целостно и гармонично, чтобы не получилось вот так:
Но с другой стороны, иконки должны быть легко различимы между собой.
Когда 2 очень похожие иконки отвечают за разные функции, возникает путаница.
Вот еще один пример:
4. Не учтен предыдущий пользовательский опыт
Вы помните, как в Viber при отправке сообщения рядом висела иконка с изображением стрелки?
Многие новые пользователи путались, считая, что стрела имеет значение “Отправить сообщение”. Почему? Потому что многие новые пользователи пришли в Viber из Skype и других мессенджеров, где стрелка означала именно отправку сообщения и располагалась в том же месте.
Стрела в интерфейсе Viber означала отправку данных геолокации. Не удивительно, почему все мои друзья в то время были в курсе, где я;)
Сейчас интерфейс Viber выглядит иначе:
Поэтому, создавая интерфейс, внимательно изучите интерфейсы основных конкурентов, чтобы не путать и не переучивать пользователей.
Создавать новый пользовательский опыт — это сложный путь и часто неоправданный.
5. Не учтены ментальные особенности ЦА
Некоторые значки могут по-разному интерпретироваться в разных странах.
Подобно тому, как в разных странах неоднозначно воспринимаются жесты, также неоднозначно могут быть поняты иконки.
Если вы создаете универсальное приложение, ориентированное на многие страны, то используйте более универсальные иконки.
Хотя, признаться, их не так уж и много. Сейчас среди них можно назвать изображение принтера (печать), дома (возврат на главную страницу), лупы (поиск) и практически все. Иконка, обозначающая меню-гамбургер , вскоре тоже может стать универсальной. Однако, некоторые тесты показывают, что пользователям привычнее видеть кнопку с надписью “Menu”, чем 3 горизонтальные полоски.
Если ваше приложение ориентировано на целевую аудиторию конкретной страны, учитывайте ее особенности восприятия.
Так, например, для жителей США более привычной будет иконка с тележкой супермаркета (shopping cart
) для обозначения покупки (
).
Для жителей Великобритании в пользовательском интерфейсе привычнее видеть корзину (basket ) или сумку (bag ).
6. Неправильный посыл
Дизайн иконок может повлиять на поведение пользователя.
Так при выборе иконки для действия “Добавить товар в корзину” следует ориентироваться не только на ментальное восприятие, но и на подтекст, который они несут.
Тележка супермаркета подразумевает, что пользователь может в любое время, как положить товар в корзину, так и передумать, и выложить его. Т.е. в этом случае вы не давите на будущего покупателя и мягко склоняете к покупке.
Пакет или сумка гораздо больше влияет на сознание пользователя, призывая его именно к покупке, а не складыванию товара в корзину. Мы привыкли складывать вещи в свою сумку уже после оплаты их на кассе, т.е. эта иконка более настойчиво призывает именно к покупке.
Обе иконки могут быть использованы, и сработать как в плюс, так и в минус. Можно добавить товар в тележку и забыть о нем, а можно уйти с сайта, так и не решившись положить товар в сумку. Учитывайте специфику своего товара и выбирайте правильный посыл.
7. Устаревшие образы
Здесь нужно быть предельно аккуратным. Иконки стареют, как и люди.
Поймет ли новое поколение эту иконку, если оно никогда не держало дискету в руках?
С одной стороны, замена многих популярных иконок скоро станет необходимостью.
Но с другой стороны, поколения сменяются гораздо медленнее, чем меняется наше представление о каком либо предмете.
Возьмем к примеру изображение телефона.
Первая иконка до сих пор актуальна и понятна даже новым поколениям, т.к. ее форма легко узнаваема.
Если же расположить иконку смартфона, можно запутать пользователя. Смартфон ассоциируется не только с функцией звонка, а и кучей других возможностей.
Приглядитесь к иконке, которая используется в Твиттере для написания нового твита. Иконке придали форму гусиного пера, чтобы передать смысл “Кликни сюда и ты сможешь писать”.
Многие иконки, образы которых устарели, еще долго не потеряют своей актуальности, поэтому, оценивайте риски, меняя образ давно всем знакомой иконки на более новый.
Мы давно не слушаем музыку с кассет, не используем микрофон старого стиля или телевизор с рожками, но эти образы гораздо понятнее пользователю, чем если мы изобразим вместо них черные прямоугольники смартфона, которые могут заменить сейчас все эти предметы.
8. Перегруженный дизайн
Не забывайте, что иконка интерфейса должна быть ясна не только в самом ее большом размере, но и в миниатюре.
Именно поэтому лишние элементы будут создавать грязь в интерфейсе и вызывать недоумение у пользователя.
Сравните сами:
Сейчас эта проблема менее актуальна, чем она была до появления трендов плоского и чистого дизайна. Плоские иконки гораздо легче воспринимаются, чем сложные 3D объекты. и это одна из причин, почему они так популярны. Однако в руках умелого дизайнера и объемную иконку можно сделать узнаваемой в любом размере.
9. Использование текста или его отсутствие
Использовать текст в иконках или нет? Пояснять значение иконок или предоставить это пользователю? Нет однозначного ответа на эти вопросы.
Иногда нужно передать настолько сложное понятие, что без текста рядом или подсказки не обойтись.
В тоже время, если вообще отказаться от иконок и использовать только текст, мы не сможем быстро сфокусировать взгляд на нужной кнопке.
Если есть возможность добавить текст, который не перенасытит интерфейс, то лучше его добавить.
Но что касается текста в дизайне самой иконки, то лучше избежать его использование, т.к. в самом маленьком размере значка он будет нечитабельным, а дизайн выглядеть перегруженным.
10. Скалирование иконок
При увеличении и ли уменьшении растровых иконок они становятся нечеткими и размытыми, поэтому многие дизайнеры предпочитают создавать векторные иконки, чтобы потом не тратить время на прорисовку мелких деталей вручную, а просто увеличивать или уменьшать изображение.
Но такой подход также неверен.
Вот пример, как выглядит уменьшенная иконка (в красном круге) и прорисованная дизайнером в меньшем размере вручную (в зеленом круге).
Поэтому всегда просите дизайнера прорисовывать элементы вручную при создании новых размеров.
Выводы
Почему мы выделили именно эти 10 ошибок, а остальные, не менее важные оставили без внимания? Потому что эти ошибки влияют на ЯСНОСТЬ
иконки, вызывают недоумение, запутывают пользователей и могут повлиять на конверсию.
Как видите из примеров, одна лишь неверно подобранная иконка может заставить пользователя удалить аккаунт, отказаться от покупки или от использования неудобного приложения.
Так что, выбирайте правильные иконки и лучше доверьте это
