АНАЛИЗ МЕТОДОВ РЕАЛИЗАЦИИ АДАПТИВНОГО UI ДИЗАЙНА НА РАЗЛИЧНЫХ УСТРОЙСТВАХ - Студенческий научный форум

XVII Международная студенческая научная конференция Студенческий научный форум - 2025

Личный портфель

АНАЛИЗ МЕТОДОВ РЕАЛИЗАЦИИ АДАПТИВНОГО UI ДИЗАЙНА НА РАЗЛИЧНЫХ УСТРОЙСТВАХ

Темиров Э.А. 1
1Мелитопольский Государственный Универитет
 Комментарии
Текст работы размещён без изображений и формул.
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF

Введение.Адаптивный веб-дизайн представляет собой стратегию, направленную на создание веб-страниц, которые адаптируются к поведению пользователя и окружающей среде в зависимости от размера экрана, платформы и ориентации. Адаптивная верстка предусматривает, что пользователи будут взаимодействовать с элементами интерфейса, такими как кнопки, текст и изображения, на различных устройствах. Дизайнеры думают об удобстве использования, чтобы обеспечить его для всех пользователей, независимо от того, какое устройство они используют [1].

Как инструмент метода реализации адаптивного дизайна можно использовать фреймворки. Фреймворк — это программное обеспечение, которое упрощает разработку и интеграцию различных компонентов крупного программного проекта. Благодаря такому набору инструментов верстка страницы становится значительно легче, так как нет необходимости вникать в детали адаптивности и думать о том, как страница будет отображаться на экранах мобильных устройств [3].

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

Материал и методы исследования

В ходе исследования, были проанализированы научные работы отечественных и зарубежных ученых. Проведен анализ среди различных метод реализации данной задачи. Выделены наиболее распространённые и актуальные методы решения.

Перечисление методов реализации адаптивного UI дизайна.

Результаты исследования и их обсуждение

В современных реалиях последних лет устоялись несколько методов реализации адаптивного дизайна интерфейса для различных сайтов:

Гибкие макеты — является методом веб-дизайна, при котором размеры элементов страницы задаются в относительных единицах измерения, таких как проценты (%), em и rem, вместо фиксированных пикселей. Это позволяет элементам интерфейса, таким как контейнеры, изображения и текст, автоматически подстраиваться под размеры экрана или окна браузера пользователя. В результате, макет страницы становится адаптивным и может корректно отображаться на различных устройствах, от смартфонов до настольных компьютеров [2].

em — это единица измерения, что задаёт размер шрифта руководясь параметрами родительского элемента.

Например, если у родительского элемента размер шрифта равен 10px, то font-size: 2.5em; будет задан размер шрифта дочернего элемента в 25 пикселей. Пример использования единицы em представлен на рисунке 1, а его вид на рисунке 2.

Рисунок 1 — Код для примера использования единицы измерения em

Рисунок 2 — Реализация примера использования единицы измерения em

В данном примере для заголовка h1 установлен размер шрифта, равный 2em, а для абзаца p — 1.2em. Это означает, что размер шрифта элемента h1 будет в два раза больше размера шрифта родительского элемента, в то время как размер шрифта элемента p будет на 20% больше.

rem — это единица измерения, что зависит от корневого элемента веб-ресурса, к примеру <body>. 1 rem равен размеру шрифта корневого элемента. К примеру если задан шрифт в 12 пикселей, то для элементов вложенных в нём font-size:3.0rem; установит значение параметра размера шрифта в 36 пикселей. Пример использования единицы rem представлен на рисунке 3, а его вид на рисунке 4.

Рисунок 3 — Код для примера использования единицы измерения em

Рисунок 4 — Реализация примера использования единицы измерения rem

В отличии от em, независимо от того, как изменяется размер шрифта родительского элемента(browser font-size), размер шрифта элемента с rem останется постоянным относительно корневого элемента(body). Из этого следует если, элементу h1 задать размер шрифта 2rem, это означает, что размер шрифта будет в два раза больше, чем размер заданного шрифта корневого элемента в параметрах самого сайта.

Проценты (%) — это единица измерения, которая задаёт размер в процентах относительно родительского элемента [4]. Размер родительского элемента всегда равен 100%, тогда если width:25%; дочерний элемент будет равен лишь четверти ширины родительского элемента.

Пример использования процентов представлен на рисунке 5, а его вид на рисунке 6.

Рисунок 5 — Код для примера использования единицы измерения em

Рисунок 6 — Пример использования процентов

Для элемента .container задана ширина 80%, что означает, что ширина контейнера будет составлять 80% от ширины родительского элемента. Если, например, ширина родительского элемента составляет 1000 пикселей, то ширина контейнера будет 800 пикселей. В тоже время для элемента .box задана ширина 50%, что означает, что ширина блока будет составлять 50% от ширины родительского элемента. Если ширина родительского элемента составляет 800 пикселей (ширина контейнера), то ширина блока будет 400 пикселей.

Медиа-запросы (@media) — представляет собой функциональность CSS, позволяющая изменять стили веб-страницы в зависимости от характеристик устройства пользователя. Они помогают задавать условия, при которых определенные стили будут применяться, а другие — игнорироваться. Это помогает адаптировать дизайн для различных размеров экранов, ориентации экрана и плотности пикселей дисплея. Пример использования медиа-запросов представлен на рисунке 7.

Рисунок 7 — Код для примера использования медиа-запросов

На данном примере медиа-запрос задает, если размер экрана устройства в ширину не превышает 680px, размер шрифта уменьшится с 16px до 12px, изображения и картинки будут занимать 85% ширины экрана, а фоновый цвет страницы измениться со светло-красного(lightred) на розовый(pink).

Система сеток (grid system) — это фреймворк, используемый в графическом дизайне для организации контента в структурированном и согласованном виде. Она состоит из пересекающихся горизонтальных и вертикальных линий, которые делят страницу на разделы. Это помогает дизайнерам проводить расстановку таких элементов, как текст, изображения и графика, улучшая их читаемость и визуальную привлекательность. Сетки обеспечивают последовательное расположение элементов, что делает дизайн более аккуратным и гармоничным [4].

Конструктивные особенности Grid-системы:

  1. Столбцы — это вертикальные контейнеры, в которых размещаются элементы, например изображения или текст. Они занимают значительную часть сетки. Количество столбцов зависит от ширины экрана устройства. Например, на мобильных устройствах сетка состоит из 4 столбцов, а на ноутбуках и настольных компьютерах — из 12 столбцов.

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

Пример использования Grid-системы представлен на рисунке 8, а его вид на рисунке 9.

Рисунок 8 — Код для примера использования Grid системы

Рисунок 9 — Пример использования Grid системы

В примере сетка состоит из двух столбцов шириной по 200 пикселей и двух строк высотой по 150 пикселей. Единица измерения px (пиксель) является абсолютной и фиксированной, что позволяет точно задавать размеры элементов.

Элемент <ul> с классом cats преобразуется в сетку с помощью свойства display: grid. Свойства grid-template-columns и grid-template-rows определяют количество и размеры столбцов и строк соответственно. В данном случае, сетка состоит из двух столбцов шириной по 200 пикселей и двух строк высотой по 150 пикселей.

Использование пикселей позволяет точно контролировать размеры элементов, что особенно полезно при создании фиксированных макетов. Однако, для более гибких и адаптивных дизайнов часто используются относительные единицы измерения, такие как проценты (%) или em и rem.

Блочная верстка — это комплекс условных способов и приемов верстки, при котором большинство веб-страниц для разметки используют CSS-свойство float. Основным применяемым элементом является универсальный тег <div>, что является по сути блоком. Используя свойство float и элементы div или другие элементы, можно легко создавать структуры из нескольких столбцов, как при табличной верстке, которые могут адаптироваться к различным размерам экранов.

Пример использования блочной вёрстки представлен на рисунке 10, а его вид на рисунке 11.

Рис. 10 Пример использования блочной вёрстки

Рис. 11 Внутренний код с примера

В данном примере множество важных элементов среди которых можно выделить:

  1. container — служит основным контейнером для всех других элементов на странице. Он имеет ширину 80% от ширины родительского элемента и центрируется с помощью свойства margin: auto.

  2. header — представляет собой шапку сайта и занимает всю ширину контейнера. Его высота составляет 55 пикселей, а фон окрашен в цвет #F5DEB3.

  3. navigation — является блоком навигации и также занимает всю ширину контейнера. Его высота составляет 25 пикселей, а фон окрашен в цвет #FE9798.

  4. sidebar — это левая панель, которая занимает 20% ширины контейнера. Его высота составляет 280 пикселей, а фон окрашен в цвет #40E0D0. Он выравнивается слева с помощью свойства float: left.

  5. content — демонстрирует основной контент страницы и занимает 80% ширины контейнера. Его высота составляет 280 пикселей, а фон окрашен в цвет #DCDCDC. Он выравнивается справа с помощью свойства float: right.

  6. clear — используется для очистки потока, чтобы элементы #footer не обтекались предыдущими элементами. Свойство clear: both гарантирует, что элемент #footer будет располагаться ниже элементов #sidebar и #content.

  7. footer — представляет собой нижний колонтитул сайта и занимает всю ширину контейнера. Его высота составляет 40 пикселей, а фон окрашен в цвет #00BFFF.

Таким образом, блочная вёрстка позволяет создавать структурированные и организованные макеты веб-страниц, используя блоки с заданными размерами и стилями.

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

srcset — это атрибут HTML, что позволяет разработчикам указывать несколько версий одного и того же изображения для различных размеров экранов и разрешений [5]. Особенно полезно это для адаптивного дизайна, где необходимо, чтобы изображения выглядели быстро загружались и не теряли чёткость на устройствах с разными характеристиками [6].

Пример использования srcset представлен на рисунке 12

Рис. 12 Внутренний код с примера

В этом примере srcset указывает три версии изображения: small.jpg (600 пикселей в ширину), medium.jpg (1000 пикселей в ширину) и large.jpg (1920 пикселей в ширину). Параметр sizes определяет, какое изображение использовать в зависимости от ширины экрана. Например, если ширина экрана меньше 600 пикселей, будет использоваться изображение шириной 480 пикселей.

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

Список литературы

  1. Букреев, Д. А. Современные веб-приложения: основные принципы и подходы к построению frontend архитектуры / Д. А. Букреев, К. Н. Коблюк // Современные проблемы геометрического моделирования и информационные технологии: материалы II Межрегиональной научно-практической конференции преподавателей и студентов, посвященной 60-летию образования Мелитопольской школы прикладной геометрии, Мелитополь, 28 мая 2024 года. – Мелитополь: Мелитопольский государственный университет, 2024. – С. 67-76. – EDN CCSCXG.

  2. Егорова И. Н., Толстая Е. А. Исследование принципов адаптивного веб-дизайна // Восточно-Европейский журнал передовых технологий. – 2012. – № 4. – С. 90-95.

  3. Журавлев, Д. В. Cовременное состояние реактивных технологий frontend разработки / Д. В. Журавлев, Д. А. Букреев // Современные проблемы геометрического моделирования и информационные технологии: материалы II Межрегиональной научно-практической конференции преподавателей и студентов, посвященной 60-летию образования Мелитопольской школы прикладной геометрии, Мелитополь, 28 мая 2024 года. – Мелитополь: Мелитопольский государственный университет, 2024. – С. 152-157. – EDN EGZAEX.

  4. Ткачева А. Как создать сетки на CSSGridLayout // Доктайп. – 2023.

  5. Ахметшин Б. Р. Блочная верстка сайта // Seostop. – 2021.

  6. Мальцев А. CSS медиа-запросы (mediaqueries) // ИТ Шеф. – 2024.

Просмотров работы: 3