CC BY
71
УДК 004.584
АВТОМАТИЗАЦИЯ СОЗДАНИЯ ЦВЕТОВОЙ МОДЕЛИ САЙТА Ю. Н. Косников, В. В. Мелешкин
THE CREATION AUTOMATION OF COLOR MODEL SITE Y. N. Kosnikov, V. V. Meleshkin
Аннотация. Предмет. При проектировании веб-сайта основной задачей является создание макета интерфейса. Здесь ключевым моментом является разработка цветовой модели сайта. Для облегчения работы дизайнера созданы программные генераторы шаблонов интерфейса, но подобных сервисов в настоящий момент существует немного, да и те имеют ряд недостатков. Встает задача определения принципов построения генераторов шаблонов, отвечающих эргономическим требованиям и возможностям современных информационных технологий. Методы. Рассматриваются закономерности создания цветового дизайна веб-сайта, правила составления цветовой схемы и процедура верстки шаблона для конкретной системы управления контентом (content management system - CMS). Рассмотрены существующие генераторы шаблонов интерфейса для одной из самых популярных в мире CMS WordPress, определены их недостатки. Результаты. Предложена концепция автоматизации процесса создания сайта. Предполагается задавать ключевые параметры цветового решения сайта с привязкой к цветовой модели HSV, ориентированной на восприятие человека, а затем компьютерными средствами переводить их в цветовую модель RGB, ориентированную на реализацию техническими средствами. Принятые решения представляются пользователю в виде группы шаблонов, из которых можно выбрать один, изменив при этом его настройки в интерактивном режиме. Выводы. Реализация предложенной концепции позволяет разработать систему автоматизированного создания цветового дизайна веб-сайта, лишенную недостатков существующих аналогов. Функция автоматического подбора цветов позволяет пользователю избежать эргономических ошибок в дизайне.
Ключевые слова: веб-сайт, веб-дизайн, цветовая схема, цветовой круг, система управления контентом, шаблон веб-сайта, генератор шаблонов.
Abstract. Background. When designing a website design, the main task is to create an interface layout. Here the key point is the development of a color model of the site. To facilitate the work of the designer, software generators of interface templates have been created, but there are few such services at the moment, and they also have a number of drawbacks. The challenge is to determine the principles of constructing template generators that meet the ergonomic requirements and capabilities of modern information technologies. Materials and methods. The article discusses the patterns of creating a color design of a web site, the rules for drawing up a color scheme, and the template page-proofs procedure for a particular content management system (CMS). Considered the existing interface template generators for one of the most popular in the world of CMS WordPress, identified their shortcomings. Results. The concept of automating the process of creating a site is proposed. It is supposed to set the key parameters of the site color solution with reference to the HSV color model, focused on the person's perception, and then use computer tools to translate them into the RGB color model, focused on the technical implementation. The decisions made are presented to the user as a group of templates, from which you can choose one, while changing its settings in interactive mode. Conclusions. The implementation of the proposed concept allows us to develop a system for automated creation of color design
for a website, devoid of the drawbacks of existing analogues. The automatic color matching feature allows the user to avoid ergonomic design errors.
Key words: web-site, web-design, color scheme, color circle, content management system, web-site template, template generator.
Введение
Вследствие роста популярности и возможностей сети Интернет появилась новая область информационных технологий - веб-дизайн, основной задачей которой является проектирование интерфейсов для сайтов и web-приложений.
При проектировании дизайна веб-сайта основной задачей дизайнера является создание макета (mock-up) - прообраза будущего интерфейса взаимодействия пользователя с сайтом. Макет может создаваться средствами многофункционального графического редактора, например Adobe Photoshop либо Sketch (доступен на Mac OS). В макете дизайнер должен спроектировать и изобразить основные страницы будущего сайта. На данном этапе работы дизайнера ключевым моментом является подбор цветов. Правильно составленная цветовая схема делает сайт более информативным и эстетически приятным, ошибки на данном этапе способны значительно снизить эффективность работы с сайтом. Существуют эргономические рекомендации по выбору цветовой модели (цветовой палитры) компьютерных изображений [1]. В соответствии с ними интерфейс не должен содержать больше 3-4 цветов, не считая цвета фона. Как правило, дизайнер выбирает один основной цвет и под него подбирает палитру из 2-3 цветов, сочетающихся с основным. При этом каждый раз приходится решать вопрос о выборе основного цветового тона.
Принципы выбора основного и дополнительных цветов модели сайта
Подборка цветовой схемы может осуществляться в соответствии с корпоративными цветами, если сайт делается для компании. Цвет также может зависеть от тематики сайта, например, если он посвящен садовому декору, основным цветом для него станет зеленый. Иногда цвета подбираются в соответствии с желанием заказчика. Основной цвет цветовой схемы сайта имеет смысл выбирать по цветовому кругу Манселла (рис. 1).
Щ
Зелёный • . Синий
Рис. 1. Цветовой круг Манселла
В данном формате цветовое пространство представлено в виде круга, разделенного на сектора разных цветов. Цветовой круг Манселла является упрощенным представлением цветовой модели HSV [2]. Дело в том, что графическая система компьютера воспроизводит цвет в соответствии с моделью RGB, это обусловлено техническими особенностями синтеза цвета монитором компьютера. Человек не в состоянии задать компьютеру цвет в этой модели, так как не может определить доли красного (R), зеленого (G) и синего (B) компонентов выбранного цветового оттенка. Для выбора цвета человек нуждается в его привычном представлении, что обусловливает выбор цветовой модели, ориентированной на восприятие человека.
Точка в цветовом пространстве модели HSV имеет три координаты:
- цветовой тон (Hue) - принимает значение от 0 до 360° и отвечает за то, какой цвет спектра будет выбран;
- насыщенность (Saturation) - принимает значение от 0 до 100. Чем выше данный параметр, тем «чище» цвет;
- уровень яркости (Value) - варьируется в пределах от 0 до 100. Чем больше данный параметр, тем ярче цвет.
Цветовую модель HSV можно графически представить в виде цилиндра (рис. 2), для которого Hue - это полярный угол, Saturation - радиус-вектор, а Value - высота.
Цветовой круг Манселла по сути является верхним основанием цилиндра модели HSV. Он хорошо подходит для задания цвета человеком, потому что для получения нужной цветовой схемы достаточно определить значение одного параметра - Hue. Остальные параметры модели могут изменяться разработчиком в процессе настройки шаблона сайта. Используя основной цвет, можно выбрать дополнительные цвета в соответствии с одной из схем, описанных ниже.
Аналоговая триада. Цветовую схему образуют цвета, расположенные по соседству слева и справа от основного цвета, как показано на рис. 3.
Рис. 2. Наглядное представление модели HSV
Красный Фиолетовый
Рис. 3. Наглядное представление модели HSV
Комплементарная цветовая схема. Состоит из цветов, расположенных на цветовом круге напротив друг друга (рис. 4).
Фиолетовый'
Рис. 4. Пример комплементарных цветов
Контрастная триада. Это вариант комплементарного сочетания с тем лишь различием, что вместо цвета, противоположного основному, используются цвета, соседние с противоположным (рис. 5).
Рис. 5. Контрастная триада
Классическая триада. Данную цветовую схему образуют три равноудаленных друг от друга цвета (рис. 6).
Зелёный
Рис. 6. Классическая триада
Существуют и другие варианты цветовых схем, но в основе каждой из них лежат перечисленные выше.
Для облегчения задания цветов созданы специальные программы, например Adobe Color CC [1], Color Scheme [2], Color Rotate [3]. В подобном приложении дизайнеру нужно лишь указать код основного цвета, после чего программа автоматически подберет наиболее сочетающиеся с ним дополнительные цвета по одной из перечисленных схем.
После того как дизайнер распределит полученную цветовую схему по макету и выполнит прочие действия, необходимые для завершения работы над ним, макет передают программисту для его последующей верстки.
Концепция перестраиваемого генератора шаблонов сайта
Скорее всего, программист не будет реализовывать полноценный сайт с нуля, так как существует множество доступных систем управления контентом (Content Management System - CMS), которые предоставляют пользователям функции создания, редактирования, контроля и организации вебстраниц. К трем наиболее распространенным в России CMS можно отнести WordPress [4], Joomla [5], Drupal [6]. Дальнейшая верстка макета, созданного дизайнером, представляет собой создание шаблона для одной из CMS.
Недостатком данной процедуры является необходимость обладать знанием веб-дизайна и веб-программирования, что для большинства пользователей делает создание собственного шаблона невозможным. Решением данной проблемы являются генераторы шаблонов, которые позволяют пользователю настроить шаблон под себя. Подобных сервисов в настоящий момент существует немного: Lubith.com [7], Yvoschaap.com [8], Wpthemegenerator.com [9], да и те имеют ряд недостатков:
- непривлекательные и устаревшие стандартные шаблоны;
- всего один исходный шаблон;
- отсутствие русскоязычной версии;
- Lubith.com и Wpthemegenerator.com являются платными.
В качестве выхода из сложившейся ситуации можно предложить концепцию генератора шаблонов, в котором учтены ошибки предыдущих систем. Работать он должен по следующему принципу.
1. Для выбора пользователю предоставляется несколько различных заранее разработанных шаблонов.
Расположение типовых блоков шаблона и привязка к ним основного или дополнительных цветов могут быть заданы по результатам анализа цветовых схем и компоновки популярных сайтов. Можно предложить 6 вариантов шаблонов с различным расположением блоков: - Вариант с меню в левом сайдбаре (рис. 7).
Данный вариант будет удобен, когда в меню нужно разместить достаточно много пунктов или планируется его последующее расширение.
Шапка (Ьеас1ег.рЬр)
Контент (index.php, single.php, archive.php, search.php, page.php)
Рис. 7. Шаблон с меню в левом сайдбаре
- Вариант с верхним горизонтальным меню (рис. 8). Данный вариант подойдет сайтам с компактным меню. Его преимущество в том, что контент будет отображаться на всю ширину экрана.
Шапка (Ьеас1ег.рЬр)
Меню (Ьеас)ег.рЬр)
Контент (index.php, single.php, archive.php, search.php, page.php)
Подвал (РооЬег.рЬр)
Рис. 8. Шаблон с горизонтальным меню
- Вариант с горизонтальным меню вместо шапки сайта (рис. 9). Данный вариант имеет смысл использовать для сайтов, на которых важно разместить максимум контента на экране.
Меню (Ьеа<]ег.рЬр)
Контент (index.php, single.php, archive.php, search.php, page.php)
Подвал (Роо(:ег.рИр)
Рис. 9. Шаблон с горизонтальным меню вместо шапки сайта
- Вариант с правым и левым сайдбарами (рис. 10).
Данный шаблон подойдет сайтам, которым требуется большое меню и нужен сайдбар, в котором можно разместить ссылки на полезные или актуальные статьи. Плюсом такого решения является то, что ссылки на другие статьи в сайдбаре стимулируют пользователей дольше оставаться на сайте, увеличивая глубину просмотра. Минусом данного шаблона является то, что остается мало места для контентной части.
Шапка (Ь|еас1ег.рЬр)
Меню (з^еЬаг.рЬр) Контент (index.php, single.php, archive.php, search.php, page.php) Статьи ^¡¿еЬаг.рЬр)
Подвал (Рос^ег.рЬр)
Рис. 10. Шаблон с правым и левым сайдбарами
- Вариант с горизонтальным меню и сайдбаром слева (рис. 11).
Данный вариант подойдет для сайтов с небольшим количеством пунктов меню, в сайдбаре которых нужно расположить ссылки на самые популярные или актуальные статьи, чтобы стимулировать пользователей дольше оставаться на сайте.
Контент (index.php, single.php, archive.php, search.php, page.php)
Рис. 11. Шаблон с горизонтальным меню и левым сайдбаром - Вариант с правым сайдбаром (рис. 12).
Данный вариант шаблона расположением блоков схож с первым вариантом. Он также подойдет сайтам с большим количеством пунктов меню, но в этом случае сайдбар с меню будет расположен справа.
2. Пользователь должен иметь возможность изменять настройки шаблона.
Изменения прежде всего могут касаться расположения элементов и цветовой схемы сайта. Расположение следует задавать с учетом известного из эргономики принципа экономии движений. В соответствии с ним сначала определяются часто повторяющиеся при работе с сайтом траектории визира, после чего выбирается расположение элементов по возможности минимизирующее эти траектории. Для выбора цветовой схемы, с одной стороны, удовлетворяющей требованиям эргономики, а с другой, учитывающей индивидуальные предпочтения пользователя, следует представлять ему одновременно весь набор возможных схем, описанных ранее. Должна быть предоставлена возможность редактирования заданных по умолчанию параметров цветовых схем, а также распределения цветов между элементами шаблона. Манипулирование параметрами каждого из вариантов шаблонов может осуществляться с помощью специальных форм на сайте, пример показан
Рис. 12. Шаблон с меню в правом сайдбаре
на рис. 13. В подобную форму пользователь будет вводить нужные ему значения параметров, настраивая каждый отдельный блок шаблона. При редактировании шаблона следует реализовать принцип WYSIWYG (от англ. What You See Is What You Get - что видишь, то и получаешь).
Рис. 13. Схема формы для настройки меню сайта
3. Внесенные пользователем настройки сохраняются в суперглобальном информационном массиве, который создается при запуске языка программирования и позволяет передавать данные в другие файлы. Именно этим методом полученные от пользователя настройки передаются в файлы шаблона, после чего в них произойдут изменения.
4. После выполнения настроек пользователь может использовать индивидуальный шаблон, наполняя его содержимым своей предметной области.
Чтобы помочь пользователю создать правильный дизайн, в систему должна быть встроена функция автоматического подбора цветов для шаблона на основе различных цветовых схем. Для этого ему нужно ввести основной цвет с помощью формы выбора цвета в HTML 5 (рис. 14), выбрать нужную цветовую схему, после чего система вычислит дополнительные цвета и распределит автоматически их по шаблону.
Цвет X
Основные ивета ГГГ1Г1ГГ Шш ■ пиит 4
■■■■■гиг
Дополнительные цвета:
I Oiwok; 0 Красный; [255J | Контраст 240 Зеленый: [Ö |
Определить цвет » 1_1эет1 Заливка Яркость:[Тм] Синий: [Г~]
OK 1 Отмена Добавить в набор
Рис. 14. Форма выбора цвета в браузере Google Chrome
Вычислить нужную цветовую схему проще всего в цветовой модели HSV. Так, например, комплементарный (контрастный) цвет H можно получить по следующей формуле:
H =
H —180, если H > 180, H +180, если H < 180.
Но в формуле выбора цвета HTML 5 можно получить значение только в формате RGB. Поэтому перед расчетом цветовой схемы полученное значение основного цвета необходимо перевести в формат HSV. Перевод из RGB в HSV осуществляется по следующим формулам:
H =
0,
если А = 0,
G' — B'
60 X-mod6, если MAX = R',
60 X 60 X
S =
А
B '— R'
А
R '— G'
0,
А
+ 2, если MAX = G',
+ 4, если MAX = B'.
если MAX = 0, если MAC Ф 0.
MAX'
V = MAX,
где R', G', B' - интенсивности цветов, приведенные к единичному диапазону, R' = R /255, G' = G /255, B' = B /255; MAX - максимальное значение из R , G', B'; MIN - минимальное значение из R , G' , B'; А - разность (MAX - MIN).
Полученные системой цвета цветовой схемы для использования их графической системой компьютера нужно перевести обратно в цветовую модель RGB. Делается это по следующим формулам:
С = (V - S)
(
X = С
— I mod 2 — 1
60
Л
((, G', B' ) =
(С,X,0), если Hе[0,60], (X,С,0), если Hе [60,120], (0,С,X), если Hе [120,180], (0,X,С), если Hе [180, 240], (X,0,С), если Hе [240, 300], (С,0,X), если Hе [300,360],
M = V' - С', R = ((R'+M)255),
G = ((G'+M)255), B = ((B'+M)255),
где He [0, 360], а S', V' - значения насыщенности и яркости, приведенные к единичному диапазону:
S' =S/100,
V' =V/100.
Таким образом, в результате реализации данной концепции появится система автоматизированного диалогового создания цветового дизайна и компоновки веб-сайта, лишенная недостатков существующих аналогов, а функция автоматического подбора цветов позволит пользователям избежать ошибок в дизайне.
Библиографический список
1. Coats, R. B. Man-computer interface / R. B. Coats, I. Vlaeminke // Blackwell Scientific Publications, 1987. - 381 p.
2. HSV (цветовая модель) : [Свободная энциклопедия] / Википедия. - URL: https://ru.wikipedia.org/ Ш^цветовая_модель) (дата обращения: 15 декабря 2018).
3. Приложение для создания цветовых схем Adobe Color CC : [Веб-приложение]. -URL: https://color.adobe.com (дата обращения: 10 декабря 2018).
4. Приложение для создания цветовых схем Color Scheme [Веб-приложение]. -URL: https://colorscheme.ru/ (дата обращения: 12 декабря 2018).
5. Система создания и управления сайтом WordPress [Сайт программы]. - URL: https://ru.wordpress.com/ (дата обращения: 15 декабря 2018).
6. Система создания и управления сайтом WordPress Joomla [Сайт CMS WordPress]. - URL: https://www.joomla.org/ (дата обращения: 10 декабря 2018).
7. Система создания и управления сайтом Drupal [Сайт CMS Drupal]. - URL: https://www.drupal.org/ (дата обращения: 11 декабря 2018).
8. Генератор тем для CMS Wordpress Lubith [Веб-приложение]. - URL: http://www.lubith.com/ (дата обращения: 14 декабря 2018).
9. Генератор тем для CMS Wordpress Yvoschaap [Веб-приложение]. - URL: http://www.yvoschaap.com/wpthemegen/ (дата обращения: 10 декабря 2018).
References
1. Coats R. B., Vlaeminke I. Man-computer interface. Blackwell Scientific Publications, 1987, 381 p.
2. HSV (tsvetovaya model'): [Svobodnaya entsiklopediya] [ ]. Wikipedia. Available at: https://ru.wikipedia.org/ HSV_tsvetovaya_model') (accessed Dec. 15, 2018).
3. Prilozhenie dlya sozdaniya tsvetovykh skhem Adobe Color CC: [Veb-prilozhenie] [Application for creating color schemes Adobe Color CC : [Web- application]]. Available at: https://color.adobe.com (accessed Dec. 10, 2018).
4. Prilozhenie dlya sozdaniya tsvetovykh skhem Color Scheme [Veb-prilozhenie] [Application to create color schemes Color Scheme [Web application]]. Available at: https://colorscheme.ru/ (accessed Dec. 12, 2018).
5. Sistema sozdaniya i upravleniya saytom WordPress [Sayt programmy] [The system of creation and management of WordPress site [site program]]. Available at: https://ru.wordpress.com/ (accessed Dec. 15, 2018).
6. Sistema sozdaniya i upravleniya saytom WordPress Joomla [CMS WordPress sayt] [The system of creating and managing a WordPress site to Joomla [CMS WordPress site]]. Available at: https://www.joomla.org/ (accessed Dec. 10, 2018).
7. Sistema sozdaniya i upravleniya saytom Drupal [Sayt CMS Drupal] [Drupal site creation and management system [Drupal CMS site]]. Available at: https://www.drupal.org/ (accessed Dec. 11, 2018).
8. Generator tem dlya CMS Wordpress Lubith [Veb-prilozhenie] [Theme generator for CMS Wordpress Lubith [Web application]]. Available at: http://www.lubith.com/ (accessed Dec. 14, 2018).
9. Generator tem dlya CMS Wordpress Yvoschaap [Veb-prilozhenie] [Theme generator for CMS Wordpress Yvoschaap [Web application]]. Available at: http://www.yvoschaap.com/wpthemegen/ (accessed Dec. 10, 2018).
Косников Юрий Николаевич
доктор технических наук, профессор, кафедра информационно-вычислительных систем, Пензенский государственный университет
(Россия, г. Пенза, ул. Красная, 40) E-mail: kosnikov@gmail.com
Мелешкин Владислав Владимирович
студент,
Пензенский государственный университет
(Россия, г. Пенза, ул. Красная, 40); SEO-специалист, ООО «Интернет медиа системы» E-mail: zumawuu@gmail.com
Kosnikov Yuriy Nikolaevich
doctor of technical sciences, professor,
sub-department of information
and computing systems,
Penza State University
(40 Krasnaya street, Penza, Russia)
Meleshkin Vladislav Vladimirovich student,
Penza State University
(40 Krasnaya street, Penza, Russia);
SEO specialist,
LLC «Internet media system»
УДК 004.584 Косников, Ю. Н.
Автоматизация создания цветовой модели сайта / Ю. Н. Косников, В. В. Мелешкин // Модели, системы, сети в экономике, технике, природе и обществе. -2018. - № 4 (28). - С. 122-133.
