Научная статья на тему 'ПРИМЕНЕНИЕ ЗОЛОТОГО СЕЧЕНИЯ В WEB-ДИЗАЙНЕ'

ПРИМЕНЕНИЕ ЗОЛОТОГО СЕЧЕНИЯ В WEB-ДИЗАЙНЕ Текст научной статьи по специальности «Компьютерные и информационные науки»

CC BY
180
26
i Надоели баннеры? Вы всегда можете отключить рекламу.
Ключевые слова
ПРАВИЛО ЗОЛОТОГО СЕЧЕНИЯ / ЗОЛОТАЯ СПИРАЛЬ / ИНТЕРФЕЙС САЙТА / ПРОПОРЦИИ

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Ганичева А.В., Филиппова К.А.

Целью данной работы является рассмотрение вопросов применения правила золотого сечения в веб-дизайне. Актуальность исследования определяется широким распространением сети Интернет. Новизна темы связана с постоянным развитием и видоизменением Web-дизайна, появлением новых интересных инструментов и возможностей. Практическая значимость проявляется в том, что золотое сечение добавляет макетам сайтов естественность, гармоничность и повышает эффективность работы пользователя.

i Надоели баннеры? Вы всегда можете отключить рекламу.
iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.

USE OF GOLDEN RATIO IN WEB DESIGN

The purpose of this operation is reviewing of questions of application of the rule of golden ratio in web design. Relevance of a research is defined by wide circulation of the Internet. Novelty of a subject is connected to continuous development and modification of Web design, appearance of new interesting tools and opportunities. The practical significance is shown that golden ratio adds to prototypes of the websites naturalness, the harmony also increases overall performance of the user.

Текст научной работы на тему «ПРИМЕНЕНИЕ ЗОЛОТОГО СЕЧЕНИЯ В WEB-ДИЗАЙНЕ»

Резонансная частота сдвинется до 7.95 ГГц. Отношение fo/fp1 для второй подложки = 1.301 (s=12,) по графику рисунка 3.3 главы 3 диэлектрическая проницаемость измеряемой подложки s=12.1, что дает ошибку <5%.

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

УДК 004.738.5(076)

Ганичева А.В., к.ф.-м.н., доцент профессор кафедры "Физико-математических наук

и информационных технологий " Тверская государственная сельскохозяйственная академия

Россия, г. Тверь Филиппова К.А. студент

факультет "Технологический" Тверская государственная сельскохозяйственная академия

Россия, г. Тверь ПРИМЕНЕНИЕ ЗОЛОТОГО СЕЧЕНИЯ В WEB-дизайне Аннотация: Целью данной работы является рассмотрение вопросов применения правила золотого сечения в веб-дизайне. Актуальность исследования определяется широким распространением сети Интернет. Новизна темы связана с постоянным развитием и видоизменением Web-дизайна, появлением новых интересных инструментов и возможностей. Практическая значимость проявляется в том, что золотое сечение добавляет макетам сайтов естественность, гармоничность и повышает эффективность работы пользователя.

Ключевые слова: правило золотого сечения, интерфейс сайта, блоки сайта, пропорции, золотая спираль,

Ganicheva A. V., к.ф. - m of N, the associate professor professor of department "Physical and mathematical sciences

and information technologies" Tver state agricultural academy

Russia, Tver Filippova K. A. student

the faculty is "Technological" Tver state agricultural academy

Russia, Tver

USE OF GOLDEN RATIO IN WEB DESIGN Summary: The purpose of this operation is reviewing of questions of application of the rule of golden ratio in web design. Relevance of a research is defined by wide circulation of the Internet. Novelty of a subject is connected to

continuous development and modification of Web design, appearance of new interesting tools and opportunities. The practical significance is shown that golden ratio adds to prototypes of the websites naturalness, the harmony also increases overall performance of the user.

Keywords: rule of golden ratio, website interface, units of the website, proportion, gold spiral.

Красоту математики отмечали еще древнегреческие ученые. Под красотой математики понимается восприятие человеком математики, как объекта эстетического удовольствие человека. Красота математики проявляется через удивительные закономерности, изящество, гармонию, выразительность, стройность, универсальность чисел, знаков, формул, форм, структур. Если трактовать в духе Платона, то в красоте математических объектов проявляется априорность математики, то есть их свойство существовать независимо от человеческого сознания. Наличие красоты у математики, причины этого явления и формы проявления являются философской проблемой. Считается, что красота субъективна и ее восприятие меняется с течением времени. Однако существует одно понятие, которое веками связано с красотой. Это золотое сечение (божественная пропорция). Оно способствует наилучшему зрительному восприятию и появлению ощущения красоты и структурной гармонии. Принцип золотого сечения основан на утверждении того, что оно - самая комфортная для глаза пропорция. Это такое пропорциональное деление отрезка на неравные части, при котором весь отрезок а + b так относится к большей части а, как сама большая часть относится к меньшей b. Отношение же отрезков а и b составляет 1,618.

Золотое сечение является в настоящее время одним из самых распространенных понятий. Так в системе РИНЦ Научной электронной библиотеки (eLibrary.ru) имеются сотни документов, связанных с этим понятием, например, [1 - 9].

Перечислим некоторые области, где используется золотое сечение:

1) архитектура, строительство, дизайн, скульптура, интерьер, бытовые предметы;

2) живопись, киноискусство;

3) презентации, видеолекции, фотографии;

4) поэзия, музыка;

5) тело человека, ритмы сердца и мозга;

6) строение животных, цветов;

7) функционирование солнца, земли;

8) метод нахождения минимума функции;

9) экономика, менеджмент;

10) баланс управления и самоуправления;

11) защита растений;

12) энергосбережение в системах электроснабжения;

13) организация гармоничного рынка.

Web-дизайн - это графический дизайн сайтов. Он включает в себя:

1) визуальное оформление;

2) разработку структуры сайта;

3) разработку логики сайта;

4) разработку удобного интерфейса сайта.

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

Принцип золотого сечения реализуется в веб-дизайне за счет:

1) определения размеров элементов Web - сайта;

2) вычисления и последующей реализации оптимального сочетания в расположении блоков и элементов на странице;

3) наложения золотой спирали;

4) использование сетки;

5) использования центров внимания на странице точек (правило третей) - это точки максимальной фокусировки внимания (точки, куда направлены взгляды всех посетителей).

Основными блоками сайта являются: шапка, контент, сайдбар, подвал

Самый верхний блок - шапка сайта (заголовок сайта). Здесь размещают название сайта, логотип, а также главное или второстепенное меню.

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

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

В подвале сайта размещаются рекламные ссылки, копирайты (свидетельство авторства), ссылки на разработчиков и т.д.

Рассмотрим применение золотого сечения к задаче определения размеров элементов веб-страницы. Пример блоков сайта, размеченных согласно пропорциям золотого сечения приведен на рис. 1.

Шапка

S

>55 >S %

Контент А Л Чф

=р If

л « к 5

щ

Подвал

Рис. 1. Соотношение блоков сайта согласно золотому сечению

Для определения оптимальной ширины контента на сайте следует разбить ширину экрана (например, 1024 пикселей) на две части (контент, боковую панель) таким образом, чтобы они смотрелись идеально, т.е. отношение ширины контента к ширине боковой панели должно составлять 1,618. Таким образом, лучшей будет ширина контента в 633, а остальные 391 пойдут на боковую панель. Контент такой ширины легко восприниматься пользователем. Можно разбить боковую панель (391 пикселей) на два блока (левый и правый сайдбар), при этом их отношение также соответствует правилу золотого сечения. Например, левый сайдбар - 149, правый сайдбар -242.

Для определения оптимальной высоты шапки, контента и подвала можно разбить высоту экрана (например, 768 пикселей) на две части:

1) контент; 2) другие элементы (шапка и подвал).

Отношение высоты контента к другим элементам должно составлять 1,618. Поэтому можно взять контент высотой 475, а другие элементы - 293. Применение золотой пропорции для шапки и подвала определит следующие размеры: шапка - 181, подвал - 112 (возможны обратные соотношения).

Для быстрого расчета элементов Web - сайта на основе золотого сечения используются специальные программы. Так, Phiculator - небольшое и удобное приложение, которое из любого введенного числа, автоматически вычислит, соответствующее Золотому сечению, значение; Golden Section Ratio Design Tool - мощный инструмент, который поможет избежать рутинных операций при работе с компоновкой объектов и форм.

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

логарифмических спиралей:

г = авЪ(р или ( = 11п(г / а),

Ъ

где e - основание натурального логарифма, a - произвольная положительная вещественная константа, коэффициент роста Ь находится из уравнения:

Ъ = — « 0,306349 11 ж/2 "

В формуле используется модуль коэффициента роста Ь, так как спираль может идти по часовой стрелке или против неё, а Ь может быть, соответственно, как положительным, так и отрицательным:

Можно использовать и другую формулу для золотой спирали:

г = ас(,

где константа c задаётся

формулой с = е =( « 1,358456.

Золотую спираль можно аппроксимировать спиралью Фибоначчи. В спирали Фибоначчи используются четвертинки окружности в квадратах с размерами квадратов, равным числам Фибоначчи. На рис. 2 показаны квадраты с размерами 1, 1, 2, 3, 5, 8, 13, 21 и 34.

Рис. 2. Спираль Фибоначчи.

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

В дизайне золотое сечение используется в каноническом виде и в качестве «правила трети». Правило третей является упрощением правила золотого сечения (поскольку 2/3 - это первое приближенное золотой пропорции). Правило третей применяют для быстрого выделения элементов на странице и управления вниманием пользователя, когда нет возможностей проводить детальные расчеты с помощью калькулятора элементов золотого сечения. Существо метода третей заключается в делении страницы или

элемента на три равных части по горизонтали (ширину) или вертикали (высоту). Пересечения линий - точки максимального притяжения внимания. Быстро сканируя сайт взглядом, люди чаще всего фокусируются на элементах, которые находятся на этих точках или рядом с ними. Трети можно еще раз разделить на три, для большей детализации и т.д. Если условно разделить экран на три части по вертикали и горизонтали, то внимание человека будет невольно фокусироваться в местах пересечения линий. Соответственно на экране следует располагать объекты таким образом, чтобы они находились на этих линиях по горизонтали или вертикали или даже в местах их пересечений. Правило третей очень часто применяется не только в дизайне, но и в рисовании, фотографии.

Известны 10 принципов эффективного веб-дизайна:

1) использование способствующих продаже цветов (определение, какие цвета наиболее эффективно способствуют продажам в отдельных нишах, как цвет влияет на эмоциональное восприятие пользователя сайта);

2) качественная типографика (выбор отношения шрифт\текст; увеличение размера шрифта в заголовках; расположение текста в общей композиции макета);

3) удобство пользования сайтом (не следует использовать сложную навигацию, неудачное расположение контента, слишком большой кусок текста без промежутков между абзацами);

4) правило 2х секунд ( если пользователь, зайдя на сайт впервые, за 2-5 секунд не поймет, куда он попал и что ему нужно сделать дальше, он уходит с сайта);

5) простота и понятность (оформление сайта должно помочь пользователю понять содержание сайта, а его элементы можно практически применить);

6) чем меньше текста, тем лучше (этот принцип следует из посылки, что не все люди любят много читать);

7) эффективный первый экран (первый экран - часть сайта, которую пользователь увидит первой, зайдя на сайт);

8) сначала формулируется цель, потом делается дизайн (сайт должен иметь определенную цель, а дизайн помогает в достижении этой цели);

9) ориентирование на целевую аудиторию (учитывается уровень образования, интересы, пол, национальность, возраст, социальное положение, примерный уровень дохода);

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

В Web-дизайне используют пять дизайнерских правил:

1) простота чтения; 2)простота навигации; 3)простота поиска; 4) согласованность в макете и дизайне; 5)высокая скорость загрузки. Yourlocalstudio (YLS), Jackson&Kent и другие разработчики сайтов широко применяют золотое сечение в дизайне своих сайтов.

В заключение следует отметить, что использование золотого сечения в Web - дизайне - новое, эффективное направление практического применения математических методов в практической деятельности людей.

Использованные источники:

1.Ганичева, А. В. Формула красоты в описании куполов храмов / Материалы 6-ой межрегиональной межвузовской научно-практической конференции. -Киров, 2003. С. 107-116.

2.Ганичева, А. В. Неповторимая гармония русских православных храмов / А.В. Ганичева // Краеведческая психология, .№5. - Тверь: ТГУ, 2005. С. 164174.

3.Ганичева, А. В. Развитие интереса - главная составляющая преподавания дисциплин в учебном процессе / Материалы межвузовской научной конференции. - Тверь: ТФ МГЭИ, 2008. С. 46-53.

4.Ковалев, Ф В. Золотое сечение в живописи / Учеб. пособие. - К.: Вы- ща шк. Головное изд-во, 1989.- 143 с.

5.Мелешко, С.В. Золотое сечение в математике и других областях / С.В. Мелешко, Е.Д. Беляева, Е.В. Куксова // Современные наукоемкие технологии, №6, 2013. С. 78-79.

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

6.Морозова, О.В. Золотое сечение в WEB - дизайне / О.В. Морозова, А.П. Писарев // В сборнике: Информационные технологии в науке и образовании. Проблемы и перспективы - Пенза: ПГУ, 2015. С. 240-242.

7.Прангишвили, И.В. Системная закономерность золотого сечения, системная устойчивость и гармония / И.В. Прангишвили, А.И. Иванус // Проблемы управления, №2, 2004. С. 2-8.

8.Сераева Н.Р. Золотое сечение - универсальный принцип гармонии / В сборнике: Наука и образование в XXI веке: теория, практика, инновации Сборник научных трудов по материалам Международной научно-практической конференции: в 4 частях. Общество с ограниченной ответственностью "АР-Консалт". 2014. С. 40-42.

9.Тимердинг, Г.Е. Золотое сечение / Г.Е. Тимердинг; под ред. Г. М. Фихтенгольца. - Москва, 2005. - 88 с.

i Надоели баннеры? Вы всегда можете отключить рекламу.