CC BY
0Международный научный журнал «ВЕСТНИК НАУКИ» № 10 (79) Том 4. ОКТЯБРЬ 2024 г. УДК 004
Чудинов П.А.
магистр, прикладная информатика, управление разработкой корпоративных информационных систем факультет информационных технологий, Московский университет им. С.Ю. Витте (г. Москва, Россия)
ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС ДЛЯ КОРПОРАТИВНОГО ВЕБ-ПРИЛОЖЕНИЯ: РАЗРАБОТКА, ПРИНЦИПЫ И ЛУЧШИЕ РЕШЕНИЯ
Аннотация: в данной статье рассмотрен процесс создания и разработки пользовательского интерфейса для корпоративного веб-приложения, который предназначен для того, чтобы автоматизировать обработку заявок на техническое обслуживание в отделе технической поддержки пользователей. Описываются основные этапы создания интерфейса: разработка типографического руководства, выбор цветовой палитры, а также технологическая реализация макетов. Разработка велась с использованием методологии Agile и фреймворка Django, которые позволили гибко адаптироваться во время разработки и укорить процесс создания. Кроме того, в статье предоставляются примеры кода, благодаря которым можно будет лучше понять, как велась реализацию проекта.
Ключевые слова: интерфейс, корпоративное приложение, руководство, цветовая палитра, адаптивный дизайн, итеративный подход, методология Agile, фреймворк Django.
Неотъемлемой частью любого веб-приложения является пользовательский интерфейс (User Interface = UI). Удобство, функциональность и привлекательный внешний вид крайне необходимы для эффективного взаимодействия пользователя с системой. При разработке пользовательского интерфейса корпоративного приложения следует применять лучшие практики проектирования интерфейсов - тщательно разработанное типографическое руководство, цветовую палитру и технологическую реализацию макетов.
Для проекта была использована методология Agile, благодаря которой стало возможным эффективно адаптироваться к изменениям требований и осуществлять регулярную обратную связь с пользователями. [1, с.58]. Основной платформой разработки была выбрана Django, а благодаря встроенным инструментам и модульной структуре ускорился процесс создания веб-приложения. С пользованием Agile разработка велась короткими итерациями, спринтами, что позволило демонстрировать заинтересованным сторонам все то новое, что было добавлено за время одной итерации. Благодаря этому своевременно вносились изменения и учитывались поправки. Такой подход к работе обеспечил улучшение качества и то, что продукт полностью соответствовал ожиданиям пользователей.
На этапе анализа потребностей пользователей был выделен круг запросов, которым должно соответствовать веб-приложение. При разработке были учтены потребности будущих пользователей. Это позволило сфокусироваться на проблемах и осуществить эффективные решения. Для вдохновения за примеры были взяты успешные интерфейсы Trello и Asana, что также помогло определить основные принципы проектирования.
Типографика особенно важна для обеспечения визуальной согласованности интерфейса и удобства работы в веб-приложении. Высокая читаемость и современный вид были достигнуты благодаря таким шрифтам как Arial и Roboto. [2, с.58]. Так же был определен стиль оформления заголовков, основного текста и кнопок. В проекте были использованы основные принципы типографики такие, как различные размеры для заголовков и основного текста, применение жирного варианта шрифта для акцента на важные элементы и выравнивание текста для улучшения восприятия информации.
Пример кода CSS для определения стилей типографики:
font-family : 'Roboto', sans-serif; font-family : 'Arial , sans-serif;
Благодаря данному коду был достигнут единообразный внешний вид текста и улучшенное восприятие информации пользователями.
Типографическое руководство существенно облегчает работу дизайнерам и разработчикам и помогает следовать единым параметрам оформления.
Разработка цветовой палитры не менее важна, поскольку она помогает восприятию информации, создает общее впечатление от использования приложения и помогает делать акценты на ключевых моментах. Для данного проекта была разработана цветовая палитра с основными и второстепенными цветами. Основными цветами были выбраны синий для основных действий, серый для уменьшения визуальной нагрузки, зеленый для подтверждения успешных действий и красный для предупреждений и предотвращения вероятных ошибок.
Пример кода CSS для определения цветовой палитры:
background-color: var(--primary-color); background-color: var(--danger-color);
Таким образом, благодаря цветовой палитре был создан гармоничный и привлекательный интерфейс удобный для использования.
Разработка макетов является следующим этапом работы после разработки и согласования типографического стиля и цветовой палитры. Макеты особенно важны для моделирования пользовательского опыта. Основные элементы макетов включают формы заявок, фильтры, кнопки действий и таблицы. Макеты обеспечивают единообразие интерфейса точное расположение элементов. Среди основных страниц формы создания заявки, форма редактирования заявки, а также таблица списка состояния заявок.
Пример кода HTML-кода для формы создания заявки:
<],abei for* "titie"> Заголовок заявки:</labe1>
<textarea id="description" name=" description" requiredx/textarea>
Интуитивно понятный интерфейс, легко воспринимаемый пользователем, повышает продуктивность работы в веб-приложении.
При технической реализации интерфейса были использованы современные технологии и подходы к разработке веб-приложений. Интерактивность и удобство использования было достигнуто благодаря использованию HTML, CSS и Java Script.
Пример кода использования Java Script для фильтрации заявок:
const filter = document.getElementById{": ).value.toLowerCase();
const title - ticket.querySelector<' i.cket-tif '),textContent.toLowerCase();
document.getElementById(' ').addEventListener( filterTickets);
Фреймворк Щап§о использовался для разработки серверной части приложения. С использованием Щап§о и модели МУС (Моёе1^е,^Соп1хо11ег) улучшилась безопасность и производительность приложения, благодаря встроенным механизмам защиты и оптимизации запросов. Также встроенные механизмы аутентификации упростили реализацию системы управления доступом для различных типов пользователей.
Пример реализации в модели Django:
from django.db import models
class Ticket(modeis.Mode 1):
title = mt>dels.CharField{rtax_lengch=2':'.') description = model«.TextField{У
status = models. CharField (max length® , choiccs=[ (' nc', 1 ¡?оваи ') , (' in pr.ogr z-.-.zz*-, "3 p.:-:>«-••- '), (f ci :>:;od', ' , )])
priority = models. Char Fi eld (maJi_iengch=c'i|, choiees=[( , ' :'), С 4 ' • дни» 1) , Г '>])
created at = models«UateTimef'ield (auto_now_add=rrrwei updated aL = models,DaLeTimeField(auto now=True)
Данный код отображает базовую модель "Ticket", включающую поля для заголовка, описания, статуса заявки, приоритета и временных меток. Благодаря этой модели можно лучше управлять данными заявок и упростить разработку бизнес-логики приложения. [4, с.97]. Создание стабильного и интерактивного пользовательского интерфейса, отвечающего потребностям корпоративного уровня и обеспечивающего удобство использования, стало возможным при использовании Django, HTML, CSS и JavaScript.
Пример использования JavaScript для фильтрации заявок:
Rfunction filterTickets О {
const filter = document.getElementByld{1 filter').value.toLowerCase(); const tickets = document.querySelectorAll{1.ticket ); tickets.forEach{ticket => {
const title = ticket.querySelector(1.ticket-title ).textContent.toLowerCase() if (title.includes(filter)) {
ticket.style.display = ''; J else {
ticket.style.display = 1 none';
>> ;
L>
document.getElementByld('filter') .addEventListener('input1 , filterTickets);
С помощью этого кода появляется возможность фильтрации заявок в реальном времени, за счет чего улучшается пользовательский опыт и увеличивается скорость поиска необходимой информации.
Использование фреймворка Django и модели MVC (Model-ViewController) способствовало улучшению безопасности и производительности приложения благодаря встроенным механизмам защиты и оптимизации запросов. Были использованы встроенные механизмы аутентификации, что способствовало упрощению реализации системы управления доступом для различных типов пользователей. [5, c.27].
Пример реализации в модели Django:
from djangoгdb iniport modeib
cleui s Tick« L (mad« 1 ь. Mod*i i) ;
Li 1.1 и = mode Is.CharF 1« id (iua3t^_lengLii=2 (!>.■) du&cripLIon - mod&ls.TextField О
status - modelii,ChdtrField (max length®!. choices=t<' ' I, Г ' , '), (' H)
priority »raods Is »Char Field (ffiaxlciigt!i=5jr choiccs=[(' 1), ('... i. : м-.', ' : • {'¡.' , ' i: ' H)
crt-.jted ai = mode I s. Date? i meF i eld < a i.i з о now ¿idd=True) itjKJateji) riI = modcla.OateTimeFioldiaiito n<JW»True)
Г | dftf . Cself> :
r«turn se1f-ri tie
Таким образом, быстрая и гибкая разработка была реализована благодаря использованию методологии Agile и фреймворка Django в условиях изменения требований. Процесс разработки происходил итеративно, благодаря чему можно было своевременно реагировать на изменения, а также улучшать функционал приложения на основе отзывов, полученных от тестировщика.
Для разработки пользовательского интерфейса корпоративного веб-приложения потребовалось использование зарекомендовавших себя практик дизайна интерфейсов и доскональное планирование. Удобство, функциональность и эстетика интерфейса была достигнута с помощью современных инструментов. Типографическое руководство и утвержденная цветовая палитра позволили создать эффективное решение для создания положительного опыта от использования веб-приложением.
Методология позволила обеспечить гибкость разработки и своевременную реакцию на изменения в требованиях. Фреймворк Django обеспечила ускоренную разработку, повышение безопасности и производительности приложения, а также обеспечило простоту в управлении и масштабировании системы.
Принципы, которые использовались при разработке интерфейса, могут быть полезны для других проектов по созданию веб-приложений корпоративного назначения. Описанный подход и предложенные улучшения позволят создавать эффективные решения для других интерфейсов. [3, с. 113].
Результат работы, интерфейс для корпоративного веб-приложения, соответствует корпоративным требованиям, обладает удобством использования, а также дополняет основные процессы работы отдела технической поддержки. В плане внедрить дополнительные функции, улучшение инструментов поиска, поддержка мобильных устройств и адаптивный дизайн, а также усовершенствование инструментов аналитики использования данной системы, что безусловно скажется на улучшении пользовательского опыта и позволит удовлетворить растущие потребности пользователей.
СПИСОК ЛИТЕРАТУРЫ:
1. Земляков В.Л. Организация и проведение исследований и разработок: учебное пособие: Южный федеральный университет, 2020. - 128 с. URL: https://biblioclub.ru/index.php?page=book&id=612334;
2. Ипатова Э.Р. Методологии и технологии системного проектирования информационных систем: учебник. Москва: ФЛИНТА, 2021. - 256 с. URL: https://biblioclub.ru/index.php?page=book&id=79551;
3. Методы и средства проектирования информационных систем и технологий: учебное пособие / авт.-сост. Е. В. Крахоткина, Северо-Кавказский Федеральный университет, 2015. - 152 с.: URL: https: //biblioclub. ru/index.php?page=book&id=458082;
4. Никитаева А.Ю. Корпоративные информационные системы: учебное пособие: Южный федеральный университет, 2017. - 149 с.: URL: https://biblioclub.ru/index.php?page=book&id=493253;
5. Терещенко П.В. Интерфейсы информационных систем: учебное пособие: [16+] Новосибирский государственный технический университет, 2012. - 67 с. URL: https://biblioclub.ru/index.php?page=book&id=228775
Chudinov P.A.
Witte Moscow University (Moscow, Russia)
USER INTERFACE FOR ENTERPRISE WEB APPLICATION: DEVELOPMENT, PRINCIPLES AND BEST SOLUTIONS
Abstract: this article discusses the process of creating and developing a user interface for a corporate web application, which is designed to automate the processing of maintenance requests in the technical support department of users. The main stages of creating the interface are described: the development of a typographic manual, the choice of a color palette, as well as the technological implementation of layouts. The development was carried out using the Agile methodology and the Django framework, which made it possible to flexibly adapt during development and streamline the creation process.
Keywords: interface, corporate application, management, color palette, adaptive design, iterative approach, Agile methodology, Django framework.
