1. aspro.ru
  2. Аспро: Приорити
  3. Для разработчиков
  4. Графические материалы

Графические материалы


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

В разделе «Оформление» показаны варианты отображения текста с использованием заголовков различных уровней для разбиения информации на блоки меньшего размера, что упрощает ее восприятие, и позволяет отделить смысловые блоки друг от друга.

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

7cdb9246-7b5f-11f1-8fe4-fa163e2ff576

Для приверженцев интересной подачи материала приведен пример оформления цитат и буквиц, гармонирующий с общей стилистикой решения.

Цитата – это ключ, основная идея статьи, поэтому она должна особым образом выделяться на общем фоне и «цеплять» даже беглый взгляд посетителя. 

1da035fa-7b5d-11f1-8fe4-fa163e2ff576

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

a905e184-7b60-11f1-8fe4-fa163e2ff576

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

2a067cca-7b65-11f1-8fe4-fa163e2ff576

В этом же разделе вы можете ознакомиться со стилями оформления таблиц, которые удобно использовать для представления структурированной информации (к примеру, отображения реквизитов компании).

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

8cc7c330-7b5e-11f1-8fe4-fa163e2ff576

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

bb529cae-7b5b-11f1-8fe4-fa163e2ff576

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

d5982dd9-7b5f-11f1-8fe4-fa163e2ff576

Раздел «Элементы» содержит примеры внешнего вида ярлыков (Labels) – иконок, содержащих исчерпывающую информацию, например, об участии предложения в действующей акции или отношение товара к хитам продаж.

ea7742e4-7b64-11f1-8fe4-fa163e2ff576

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

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

c644dc8a-7b5b-11f1-8fe4-fa163e2ff576

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

0d7e3e7e-7b62-11f1-8fe4-fa163e2ff576

Один из вариантов аккордеона используется на странице «Вакансии» в решении Аспро: Digital-компания при выборе соответствующей темы оформления раздела.

1a76f352-7b61-11f1-8fe4-fa163e2ff576

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

f54bfffb-7b5d-11f1-8fe4-fa163e2ff576

Размеры навигационной панели по страницам раздела представлены в 3х вариантах.

6ceeecb7-7b5f-11f1-8fe4-fa163e2ff576

Присутствуют дополнительные средства визуального оформления текстовых блоков.

d1811288-7b5b-11f1-8fe4-fa163e2ff576

Также в поставку включены элементы для работы с изображениями – Carousel, Fancybox и рамки для миниатюрных изображений.

26118280-7b61-11f1-8fe4-fa163e2ff576

77b2d742-7b64-11f1-8fe4-fa163e2ff576


Предыдущая статья Мобильная шапка и мобильное меню
Следующая статья Использование библиотеки UI-элементов