Меняем стандартные иконки в главном меню GetCourse
GetCourse
Кому как, а мне дизайн главного меню GetCourse не нравился никогда. И вот дошли руки поковыряться с ним. В первую очередь — замена иконок.
Новые иконки можно вставить как изображения, но мне больше нравится использовать иконочные шрифты. В этом случае иконки можно свободно перекрашивать с помощью стилей, без необходимости красить их в графическом редакторе и снова загружать в файловое хранилище, если захочется поменять гамму.
Можете использовать любой иконочный шрифт, я выбрал Font Awesome.
UPD. Добавил еще один пост с наборами иконочных шрифтов, которые мы использовали при оформлении школ. Бонусом там подробный код для подключения и добавления подписей под иконками.
Первое, что нужно сделать — создать так называемый Kit для использования в ваших проектах. Зарегистрируйтесь на fontawesome.com. На главной странице нажмите кнопку «Start for free», введите свою почту и следуйте инструкциям.
В результате у вас в личном кабинете должен появиться ваш набор иконок. Перейдя в него, вы увидите варианты его использования. Вам нужен самый первый — скрипт для подключения к сайту.
Нажмите кнопку «Copy Kit Code» и переходите в GetCourse. Нам нужен раздел «Профиль — Настройки аккаунта». В настройках перейдите во вкладку «Настройки» и пролистайте до поля «Счетчики и прочие скрипты». В это поле вставьте скопированный код набора иконок. Сохранитесь.
Пока ничего не поменялось. В это же поле, на следующей строке после скрипта с набором иконок, вставьте css код:
<style>
/*Скрываем стандартные иконки меню*/
.gc-account-user-menu .menu-item img {
display: none
}
/*Задаём для ссылок меню иконочный шрифт Font Awesome*/
.gc-account-user-menu .menu-item a:before {
font-family: "Font Awesome 5 Free", sans-serif;
font-weight: 900;
line-height: 1;
color: #fff; /*Задаём цвет иконок*/
font-size: 24px; /*Задаём размер иконок*/
}
.gc-account-user-menu .
menu-item-profile a:before {
content: "\f007"; /*Код иконки профиля*/
}
.gc-account-user-menu .menu-item-cms a:before {
content: "\f015"; /*Код иконки Сайт*/
}
.gc-account-user-menu .menu-item-teach a:before {
content: "\f51c"; /*Код иконки Обучение*/
}
.gc-account-user-menu .menu-item-user a:before {
content: "\f0c0"; /*Код иконки Пользователи*/
}
.gc-account-user-menu .menu-item-tasks a:before {
content: "\f14a"; /*Код иконки Задачи*/
}
.gc-account-user-menu .menu-item-notifications a:before {
content: "\f0e0"; /*Код иконки Сообщения*/
}
.gc-account-user-menu .menu-item-sales a:before {
content: "\f158"; /*Код иконки Продажи*/
}
.gc-account-user-menu .menu-item-chatium img {
max-width: 24px; /*Размер иконки Chatium*/
}
.gc-account-user-menu .menu-item.active a:before,
.gc-account-user-menu .menu-item.selected a:before {
color: #333; /*Задаём цвет иконок в активном состоянии и при нажатии*/
}
</style>
Сохраните изменения.
Коды иконок можно оставить такие же, можно использовать другие.
Тимур
В нашей команде отвечаю за дизайн и техническую часть проектов. Статьи — моё хобби. Всегда рад, если мой материал оказался полезен для кого-то.
Иконки для меню сайдбара
На этом уроке, мы создадим сайдбар с иконками, для этого нам пригодится иконочный шрифт и хорошие знания в HTML + CSS.
Надо сказать, что мода на минималистический дизайн и увеличение просмотров сайтов с мобильных устройств, подталкивает дизайнеров, чаще использовать в оформлении сайтов – иконки. Все какое-то разнообразие.
Подключение Font Awesome
Font Awesome
Для подключения, через CDN, вставьте ссылку между тегами <head>.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> Поиск иконок и вывод их в меню сайдбара.
Первым пунктом меню у нас будет главная (дом), вбиваем в поиске home и выбираем соответствующую иконку.
Запоминаем код и вставляем в меню сайдбара. Аналогичным образом находим все
HTML код
Создадим левую колонку (сайдбар) с пунктами меню и иконками (тег i), находящиеся внутри ссылок.
<div>
<a href="#"><i></i> Главная</a>
<a href="#"><i></i> Услуги</a>
<a href="#"><i></i> Портфолио</a>
<a href="#"><i></i> Контакты</a>
</div> Значения классов тега i
<i></i> - fa-home – код иконки
- fas – иконка Solid
- fa-fw – фиксированная ширина
Создадим правую колонку, где и будет размещаться основной контент, которая будет прокручиваться при скролле.
<div>
<h3>Иконки для сайдбар меню</h3>
<p>какой-то контент. .</p>
<p>какой-то контент</p>
<p>какой-то контент</p>
</div> 
.</p>CSS код
Меню сайдбара должно всегда оставаться наверху и быть видимым на всю высоту экрана. Свойство overflow-x, не даст, длинному названию, выйти за пределы сайдбара, но в тоже время не обрежет его, а перенесет ниже.
.sidebar {
height: 100%;
width: 180px;
position: fixed;
z-index: 1; // сайдбар выше main колонки
top: 0;
left: 0;
background-color: #673AB7;
overflow-x: hidden;
padding-top: 16px; // отступ сверху окна браузера
} Стилизация текста меню и иконок одновременно. Ссылки – строчные элементы и чтобы можно было применить к ним паддинги, следует отобразить их как блочные элементы.
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block; // отображение как блочных элементов
} Сделаем отступ, от левого края браузера на ширину самого сайдбара.
.main {
margin-left: 180px; /* равна ширине сайдбара */
padding: 0px 10px;
} Меняем цвет текста при наведении мышки на ссылки сайдбара.
.sidebar a:hover {
color: #d1c4e9;
} Медиа-запрос для маленьких экранов
Когда высота экрана, станет меньше 450 пикселей, следует уменьшить отступ и размер шрифта.
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
} Посмотреть код целиком можно на Codepen
- Создано 04.02.2019 10:01:59
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.
ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Как выбрать правильный значок меню для навигации по сайту? —
Навигация вашего веб-сайта вызывает путаницу? Выбор правильного значка меню может иметь решающее значение. Это руководство содержит советы и рекомендации по выбору идеального значка для удобного использования.
Много раз, когда вы посещаете веб-сайт, вы видите, что на веб-сайте есть разные категории или разные страницы для навигации.
Эти страницы представлены с помощью значков в виде изображений. Это так называемые значки меню. Значок меню (или значок гамбургера) — самый важный визуальный элемент на любом веб-сайте. Они делают веб-сайт более привлекательным и придают индивидуальный подход. В последнее время использование значков меню в навигации по веб-сайту увеличивается.
Эти маленькие странные значки покорили Интернет, их можно найти на самых разных веб-сайтах и они обычно используются в мобильных версиях веб-сайтов и приложений. Знаете, иногда бывает так, что вы хотите добавить меню на свой сайт, но не знаете, какой значок меню выбрать для навигации. В этом блоге мы рассмотрим различные значки меню и предложим несколько советов о том, что вам следует использовать для навигации.
Согласно исследованию The Gomez Report, 88% онлайн-потребителей с меньшей вероятностью вернутся на веб-сайт после неудачного пользовательского опыта.
Это полезный контент. Во многих случаях иконки могут заменять текст, что делает их такими популярными в мире современного дизайна.
Они небольшие, но жизненно важны для повышения эффективности любого приложения или веб-сайта. Они выглядят просто, но требуют много времени и усилий, чтобы чувствовать себя так.
– Ануджа
Кажется интересным, что значки меню для навигации были вдохновлены продуктами питания.
Гамбургер Значок меню Значок гамбургера сегодня является одним из наиболее часто используемых значков на веб-сайтах и в приложениях. Как следует из названия, значок выглядит как гамбургер с двумя булочками и котлетой между ними. Это трехстрочная кнопка, при нажатии на которую открывается меню. Значок обычно находится в верхнем или нижнем углу веб-сайта или приложения и указывает пользователям, что есть еще контент для изучения за пределами текущей страницы или экрана. Значок гамбургера можно использовать для отображения области меню приложения, особенно при наличии нескольких разделов.
В таблице ниже показаны плюсы и минусы значка меню гамбургера:
| ПЛЮСЫ | ПРОТИВ |
| Узнаваемый | Делает страницы менее важными |
| Чистый | Низкое зацепление |
| Дополнительный доступ | Неэффективный |
Значок меню кебаба (три точки, расположенные на вертикальной линии) — хороший выбор, если вы хотите предоставить пользователям возможность доступа к скрытому меню параметров. При использовании этого значка важно учитывать контекст, в котором он будет использоваться. Например, если на вашем веб-сайте много контента, вы можете использовать значок кебаб-меню, чтобы предоставить пользователям быстрый доступ к наиболее важным разделам.
В качестве альтернативы, если на вашем веб-сайте ограниченное количество страниц, вы можете использовать значок меню кебаба в качестве основного инструмента навигации, так как это обеспечит более удобную работу.
Меню фрикаделек, также известное как меню с тремя горизонтальными точками, представляет собой значок, используемый для открытия меню с дополнительными параметрами. Этот значок обычно располагается в верхнем правом или верхнем левом углу экрана или окна. Когда вы увидите этот значок, просто нажмите на него, чтобы открыть меню и просмотреть дополнительные параметры! Используемые для открытия меню или отображения действий для связанного элемента, раскрывающиеся списки просты в использовании и повторяются на веб-страницах. Поскольку они горизонтальные, они хорошо работают с таблицами и другими горизонтально ориентированными элементами.
Донер Значок меню Донер-меню, популярный турецкий символ, превращающий блюдо в фильтр, чаще всего используется в сочетании с глобальными фильтрами в современных приложениях.
Оно состоит из вертикальной стопки из трех строк разной длины — одной длинной, одной более короткой внизу и еще одной обрезанной внизу — что делает его отдельным элементом пользовательского интерфейса от гамбургер-меню, состоящего из трех строк одинакового размера. длины укладываются друг на друга.
Меню бенто, названное в честь коробок для бенто, представляет собой меню элементов в виде сетки. Значок Bento чаще всего используется для открытия меню с различными приложениями, решениями или функциями в рамках одного продукта, чтобы пользователи могли быстро переключаться между ними. Этот значок обычно находится в правом верхнем углу интерфейса. Например, в магазине Google Play этот значок можно найти в правом верхнем углу экрана.
Что еще нужно помнить при выборе значков меню ➡️
- Значки должны быть легко узнаваемы и разборчивы.
- Иконки должны соответствовать общему дизайну сайта.
- Значки должны быть интуитивно понятными и простыми в использовании.
- Значки должны быть равномерно расположены в строке меню.
К настоящему моменту вы должны хорошо понимать, как выбрать правильный значок меню для навигации по вашему веб-сайту. В общем, лучшими значками для навигации будут стандартные стрелки, которые используются для навигации в каждом браузере. Но могут быть случаи, когда пользовательский значок является лучшим выбором. Что вам нужно учитывать, так это значение значка и то, как он связан с контентом на вашем веб-сайте.
Часто задаваемые вопросы О веб-сайте Навигация Значки меню Что такое значки меню?Четкий и лаконичный значок меню может иметь огромное значение для улучшения общего пользовательского опыта веб-сайта.
Forbes
Значки меню — это небольшие графические символы, которые появляются на экране компьютера или мобильного устройства, как правило, в списке или меню и указывают, какие параметры доступны пользователю.
Они часто используются для представления различных функций или опций в приложении или системе и могут быть эффективным способом навигации по пользовательскому интерфейсу.
Значок с тремя горизонтальными линиями обычно называется гамбургер-меню. Этот значок используется для обозначения меню, и при нажатии на него часто открывается список параметров или вариантов навигации. Этот значок назван в честь бутерброда с гамбургером, так как три линии напоминают слои булочки для гамбургера. Это способ сконцентрировать большое количество информации в небольшом пространстве.
Где найти меню навигации?Меню навигации находится в верхнем левом углу экрана. Он представлен значком гамбургера (три горизонтальные линии). При нажатии на значок появится раскрывающееся меню, показывающее различные страницы веб-сайта.
5 советов по созданию лучших иконок меню Fintech
В этом посте мы рассмотрим важность иконографии меню в дизайне приложений Fintech и несколько советов, которые следует учитывать при их использовании.
Представьте, что вы ищете бухгалтерскую фирму для своего бизнеса. Фирма Money Money Money кажется законной и имеет массу положительных оценок клиентов и отзывов в Интернете. Поэтому вы звоните им, чтобы получить дополнительную информацию о тарифных планах, а также задать оставшиеся у вас вопросы.
Единственная проблема заключается в том, что вы не узнаете ни одной подсказки в меню, которую механический голос на другом конце провода произносит:
- «Выберите 1 для мер предосторожности дяди Сэма»
- «Выберите 2 для взвешивания книг»
- «Выберите 3 для Консультативной группы по суете»
- «Выберите 4 для всех остальных абонентов»
Что бы вы ответили на это? Вы можете поначалу смеяться, думая, что это просто фирма забавная или причудливая.
Но тогда можно подумать: «Хммм… Эта компания поможет мне управлять своими деньгами. Может быть, им не стоит шутить». Вы также можете задаться вопросом, будет ли так сложно понять разговоры, которые вы ведете с их бухгалтерами, или, что еще хуже, счета, которые они вам присылают.
То же самое может произойти, если приложение финансовых услуг использует неправильную иконку в дизайне своего меню. И все это сводится к одной и той же проблеме:
Когда вы используете неправильный язык, будь то вербальный или визуальный, вы посылаете пользователям неверные сигналы. В некоторых случаях это может даже подорвать доверие ваших пользователей и ухудшить их способность действовать. А поскольку меню вашего приложения — единственное место, где они могут изучить и использовать основные функции приложения, вы не можете позволить себе испортить его неправильной иконографией.
Я установил пару десятков приложений для финансовых услуг, чтобы посмотреть, как выглядит их меню. Я определил ряд тенденций и использовал их для создания следующих советов и рекомендаций, которые вы можете использовать при разработке иконок меню финансовых технологий в будущем:
1. Главное меню всегда должно включать ярлыки
Я приведу два примера, которые продемонстрируйте, почему меню без меток — плохая идея.
Это первое меню в мобильном приложении Venmo:
Это второе меню мобильного приложения PayPal Mobile Cash:
Можете ли вы сказать, что означает каждый из этих значков?
Одна из проблем этих конкретных дизайнов значков заключается в том, что они представляют непонятную функциональность приложения — например, QR-код, который появляется первым в ряду значков меню Venmo.
Еще одна проблема заключается в том, что дизайн не так уж и оригинален. Возьмите знак доллара, который появляется вторым слева в меню PayPal. Это может относиться к ряду особенностей финтеха. Для этого конкретного приложения пользователи отправляют и запрашивают платежи.
Существует очень мало общепризнанных значков меню. Что касается дизайна приложения, я бы сказал, что вы в безопасности, используя следующее:
- Дом для дома
- Силуэт пользователя для учетной записи
- Лупа для поиска
- Шестерня для настроек
- Звонок для уведомлений
- Гамбургер для меню
Если вы размещаете какие-либо из этих значков за пределами главного меню (например, в верхнем левом или верхнем правом углу интерфейса приложения), им не нужны метки.
Однако в главном меню каждый значок должен сопровождаться меткой, даже если он узнаваем. Это единственный способ убедиться, что каждый пользователь понимает, какие функции доступны в приложении и где их найти.
Укрепление доверия с помощью функций безопасности Fintech
2. Не стесняйтесь включать значок «Домой»
На веб-сайтах больше не принято включать значок «Домой» в меню. Большинство пользователей уже знают, что логотип бренда приведет их домой. И пока он отображается в верхнем левом углу, у них не будет проблем с быстрым поиском пути назад.
Однако в мобильных финтех-приложениях довольно часто первую ссылку меню называют «Домой», как это делает NerdWallet:
50% из тех, что я смотрел, имели меню таким образом. Затем были такие, как Mint, которые использовали значок дома, но дали ему другую метку:
Вместо «Домой» значок дома сочетается с меткой «Обзор».
Мне нравится, что «Обзор» более конкретен и понятен в отношении того, что находится на первой вкладке, хотя я понимаю, что это не всегда может быть подходящим дескриптором для ссылки основного меню.
Я видел много меню, которые начинались с «Учетных записей» в моем исследовании. И определенно имеет больше смысла называть их таковыми.
Но если ваша первая вкладка — это панель инструментов или какая-то лента, я думаю, что обычная «Главная», вероятно, лучше всего. Финансы уже являются нервирующей темой для многих пользователей, и последнее, что вы хотите, — это сделать функции приложения чрезмерно техническими. А «Дом» дает им безопасное и надежное место, куда они могут уйти, когда закончат использовать другие функции.
3. Используйте короткие метки и описательные значки
Если вы хотите создать более уверенных пользователей, функции вашего меню должны быть кристально четкими. Есть две вещи, которые могут помочь в этом:
1. Используйте характерную и описательную иконографию. Уникальный значок для каждой вкладки снижает вероятность того, что пользователи запутаются или запутаются при использовании меню.
2. Делайте этикетки как можно короче.
Пробелы между значками важны по двум причинам. Во-первых, они улучшают способность пользователя фокусироваться на каждой вкладке. Во-вторых, большие промежутки повысят доверие к кликам. Более короткие этикетки помогут вам открыть это пространство.
Возьмем, к примеру, меню приложения Bank of America:
Все первые три значка содержат знак доллара ($) внутри них. Хотя значок «Перевод» является самым уникальным из трех, он по-прежнему содержит элемент стрелки, аналогичный элементу «Оплата счета». И «Счета» и «Оплата счетов» почти идентичны, за исключением направленной вправо стрелки на значке «Оплата счетов».
Давайте посмотрим, как Discover обрабатывает аналогичную структуру меню:
Давайте сначала сосредоточимся на различиях между этими тремя ярлыками: Transfer, Deposit и Pay. Все они лаконично написаны в приложении Discover. Избавившись от лишних деталей, пользователи смогут быстро выбрать вкладку, содержащую нужную им функцию.
Теперь поговорим об этих значках.
В то время как «Перевод» и «Оплата» Discovery содержат знак доллара, дизайн совершенно другой и лучше описывает, что делает эта функция. «Депозит» интересен тем, что в нем не используется подход, основанный на деньгах. Вместо этого он фокусируется на том, как пользователей будут использовать эту функцию, т. е. фотографируя свой чек, чтобы внести его в приложение.
Если вы сможете создавать значки, точно описывающие функцию, пользователи будут меньше зависеть от меток. Тем не менее, наличие четких и кратких меток в качестве резервной копии является обязательным.
4. A/B Test Solid и Outline Styles
Примерно 75% финтех-приложений, которые я рассматривал, разработали свои значки в стиле структуры, как это делает Merrill Edge:
На мой взгляд, эти значки меню выглядят лучше, чем сплошные значки, такие как те, что можно найти в приложении Stripe Dashboard:
С меньшим количеством деталей выделенные значки кажутся более аккуратными и понятными.
Но это только мое личное мнение и предпочтение. Похоже, это относится и ко многим дизайнерам, учитывая, насколько распространен выбор дизайна иконок.
Тем не менее, мне было любопытно посмотреть, есть ли что-то в этом, действительно ли пользователи предпочитают внешний вид обведенных значков сплошным. Или если, возможно, они были лучше для удобства использования.
Магистерская диссертация и исследование под названием «Заполненные и контурные значки: влияние стиля значков на удобство использования» рассмотрели этот вопрос и обнаружили, что на самом деле между ними нет заметной разницы. Единственным исключением было это:
«В среднем по 20 уникальным формам значков, использованным в тесте, стиль контура привел к немного большему времени выполнения задачи, но только тогда, когда значки отображались белым цветом на черном фоне».
Если вы хотите обеспечить максимальное удобство использования вашего финтех-приложения, я бы рекомендовал A/B-тестирование двух стилей, независимо от того, используете ли вы светлую или темную тему.
Хотя у меня есть ощущение, что выделенные значки могут работать лучше, я не думаю, что вы должны исключать возможность увеличения скорости использования или уверенности в кликах при использовании сплошных значков.
5. Учетная запись для специальных возможностей
В наши дни доступность приложений является обязательной. И хотя вы знакомы с распространенными ловушками доступности, которых следует избегать при разработке приложения, существуют определенные проблемы доступности, которым могут быть более подвержены значки меню финансовых технологий.
Например, дальтоникам может быть трудно ориентироваться в приложении, если выбранная вкладка выглядит как «Рынки» в приложении Kraken Pro:
Пользователи узнают выбранную вкладку по значку и цвету текста . Итак, «Рынки» — синие, а остальные вкладки — стандартные темно-серые. Некоторые дальтоники могут не заметить этой разницы.
Лучше использовать подсветку прямоугольника, как это делает QuickBooks Self-Employed:
Несмотря на то, что значок и метка для выбранной «Информационной панели» меняются с серого на зеленый, именно заштрихованная рамка вокруг нее позволит всем пользователям заметить разницу между значками.
Пока мы здесь, мы должны решить другие возможные проблемы доступности, связанные с дизайном значков. Например:
Цветовой контраст — Светло-серого цвета QuickBooks может быть недостаточно для чтения слабовидящими пользователями.
Интервал — QuickBooks неплохо справляется с этим, но я бы рекомендовал укоротить метки или немного уменьшить текст, чтобы они совпадали с соответствующими значками. Подобно тому, что мы видим в приложении PayPal для бизнеса:
Все это дополнительное пустое пространство поможет улучшить читаемость и доверие к кликам. Просто убедитесь, что значки или метки не слишком малы.
И последнее, о чем следует подумать, это местоположение и дизайн , не зависящий от возраста. Например, PayPal для бизнеса использует бумажные купюры для значка «Деньги». А как насчет стран с безбумажной валютой? А как насчет молодого поколения, которое растет с кредитными картами и приложениями для цифровых денег вместо долларов и монет?
Хотя это восходит к идее использования узнаваемых значков, вы также должны учитывать, насколько они вечны.