Перегляд вихідного коду сторінки Стандарти UI K2 2025

{{DISPLAYTITLE:Стандарти UI K2 2025}}

'''Стандарти UI K2 2025''' — це внутрішній документ, який визначає єдині підходи до реалізації інтерфейсів, контролів, компонентів і програмної частини у проєктах K2.

Мета стандарту — щоб дизайнери, розробники, менеджери, партнери та замовники говорили однією мовою під час створення інтерфейсів для [[K2 ERP]], сайтів, адміністративних панелей, CRM, кабінетів користувача та інших web-рішень.

<div style="border:3px solid #1565c0; background:#e3f2fd; padding:14px; margin:16px 0;">
'''Коротко.''' Компоненти K2 мають бути технічно стабільними, візуально гнучкими та придатними до кастомізації під різні дизайни без переписування програмної логіки.
</div>

__TOC__

== Мета стандарту ==

Web-проєкти K2 часто відрізняються один від одного зовнішнім виглядом, стилістикою, кольорами, розташуванням блоків і поведінкою елементів. При цьому базова програмна логіка компонентів не повинна щоразу переписуватися під новий дизайн.

Компонент має бути створений так, щоб його можна було адаптувати під конкретний проєкт: змінити зовнішній вигляд, тему, розміри, положення, іконки або поведінку, але залишити стабільну технічну основу.

<div style="border:3px solid #2e7d32; background:#e8f5e9; padding:14px; margin:16px 0;">
'''Головний принцип.''' Дизайн може змінюватися під клієнта, але компонент не повинен втрачати стабільність, сумісність і єдину програмну логіку.
</div>

== Базові принципи UI K2 ==

Інтерфейси K2 мають будуватися за кількома простими правилами.

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

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

<div style="border:3px solid #b71c1c; background:#ffebee; padding:14px; margin:16px 0;">
'''Важливо.''' Гарний компонент не підходить для K2, якщо він конфліктує з іншими контролами, ламає шаблон, погано масштабується або потребує переписування бізнес-логіки.
</div>

== Що має враховувати UI-компонент ==

Кожен компонент, який використовується в K2, має відповідати кільком вимогам.

{| class="wikitable" style="width:100%;"
! Вимога
! Пояснення
|-
| Кастомізація
| Компонент має легко адаптуватися під різні дизайни, теми та стилі
|-
| Сумісність
| Компонент не повинен конфліктувати з іншими елементами системи
|-
| Повторне використання
| Один і той самий компонент має працювати в різних проєктах без переписування з нуля
|-
| Адаптивність
| Інтерфейс має нормально працювати на різних розмірах екрана
|-
| Зрозумілість
| Користувач має швидко розуміти, що робить компонент
|-
| Масштабованість
| Компонент має витримувати збільшення кількості даних або пунктів керування
|-
| Підтримуваність
| Розробники мають мати змогу швидко підтримувати та змінювати компонент
|}

== Джерела натхнення та приклади ==

Для вибору UI-рішень можна використовувати готові приклади адміністративних панелей, бібліотек компонентів, тем, шаблонів і демонстраційних наборів.

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

== Шаблони адміністративних панелей ==

Багато прикладів роботи компонентів можна побачити в готових шаблонах адміністративних панелей.

Корисні приклади:

* [https://adminlte.io/themes/AdminLTE/index2.html AdminLTE]
* [https://appstack.bootlab.io/dashboard-default.html AppStack]
* [https://themes.getbootstrap.com/preview/?theme_id=88616 Bootstrap Theme 88616]
* [https://themes.getbootstrap.com/preview/?theme_id=28117 Bootstrap Theme 28117]
* [https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/ Keen Bootstrap Admin Theme]
* [https://themes.getbootstrap.com/preview/?theme_id=5824 Bootstrap Theme 5824]
* [https://themes.getbootstrap.com/preview/?theme_id=1666 Bootstrap Theme 1666]
* [https://themes.getbootstrap.com/preview/?theme_id=21888 Bootstrap Theme 21888]

== Google та Material-подібні теми ==

Для інтерфейсів, де потрібна сучасна, легка й зрозуміла подача, можна орієнтуватися на Material-подібні теми та шаблони.

Приклади:

* [https://themewagon.com/themes/tailadmin/ TailAdmin]
* [https://startbootstrap.com/previews/material-admin-pro Material Admin Pro]
* [https://startbootstrap.com/previews/sb-admin-pro-angular SB Admin Pro Angular]

== Набори UI-компонентів ==

Набори UI-компонентів допомагають швидко побачити, як можуть працювати таблиці, меню, тулбари, модальні вікна, вкладки, слайдери, календарі та інші елементи.

Рекомендовані джерела для аналізу:

* [https://ej2.syncfusion.com/vue/documentation/toolbar/responsive-mode Syncfusion]
* [https://www.jqwidgets.com/jquery-widgets-demo/ jQWidgets]
* [https://snippet.dhtmlx.com/i7cfddkl DHX / DHTMLX]
* [https://demos.telerik.com/kendo-ui/ Telerik Kendo UI]
* [https://www.devexpress.com/support/demos/# DevExpress]

<div style="border:2px solid #1565c0; background:#e3f2fd; padding:14px; margin:16px 0;">
'''Рекомендація.''' DHX / DHTMLX можна розглядати як один із пріоритетних наборів для аналізу та використання в інтерфейсах K2, якщо він технічно підходить до конкретного завдання.
</div>

== Інструменти для проєктування та розробки ==

Для якісної реалізації UI недостатньо лише обрати бібліотеку компонентів. Потрібно також моделювати структуру даних, схеми, прототипи інтерфейсів і бізнес-логіку.

{| class="wikitable" style="width:100%;"
! Інструмент
! Призначення
! Посилання
|-
| SQL Power Architect
| Моделювання структури бази даних
| [https://bestofbi.com/architect-download/ bestofbi.com]
|-
| DBeaver
| Редактор і клієнт баз даних
| [https://dbeaver.com/download/ dbeaver.com]
|-
| DrawDB
| Візуальний редактор структури бази даних
| [https://www.drawdb.app/editor drawdb.app]
|-
| Wireframe.cc
| Швидке створення wireframe-прототипів
| [https://wireframe.cc wireframe.cc]
|-
| Microsoft Visio
| Схеми інтерфейсів, процесів і ділової графіки
| Окремий desktop-інструмент
|}

== Карти ==

[[Файл:K2_UI_Standards_2025_01.png|міні|центр|Ілюстрація до розділу «Карти»]]

Карти використовуються там, де потрібно показати об’єкти на місцевості, маршрути, склади, адреси, точки обслуговування, логістику або просторові дані.

Для звичайних web-карт можна використовувати OpenStreetMap та Leaflet.

Приклади:

* [https://leafletjs.com/ Leaflet]
* [https://tomickigrzegorz.github.io/leaflet-examples/#10.matching-all-markers-to-the-map-view Leaflet examples]

Для 3D-карт, планів приміщень або інтерактивних схем можна аналізувати спеціалізовані рішення:

* [https://mapplic.com/maps/apartment Mapplic]

== Меню ==

[[Файл:K2_UI_Standards_2025_02.png|міні|центр|Ілюстрація до розділу «Меню»]]

Меню — один із головних елементів навігації в системі.

У проєктах K2 можуть використовуватися верхні, нижні, бокові, контекстні та багаторівневі меню. Якщо пунктів багато, потрібно передбачати пошук по назві або ключовому слову.

Контекстне меню зазвичай відкривається при натисканні на елемент або через іншу дію, визначену сценарієм інтерфейсу.

Приклади:

* [https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/index.htm#demos/jqxmenu/defaultfunctionality.htm jqxMenu]
* [https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/index.htm#demos/jqxmenu/minimized.htm Minimized menu]
* [https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/index.htm#demos/jqxmenu/contextmenu.htm Context menu]

== Таймлайн ==

[[Файл:K2_UI_Standards_2025_03.png|міні|центр|Ілюстрація до розділу «Таймлайн»]]

Таймлайн використовується для показу подій у часі: історії змін, етапів процесу, розвитку заявки, статусів задачі, життєвого циклу документа або клієнтської взаємодії.

Приклад:

* [https://adminlte.io/themes/AdminLTE/pages/UI/timeline.html AdminLTE Timeline]

== Тулбари ==

[[Файл:K2_UI_Standards_2025_04.png|міні|центр|Ілюстрація до розділу «Тулбари»]]

Тулбар — це панель інструментів для швидкого доступу до команд.

У K2 тулбар має бути зрозумілим, не перевантаженим і пов’язаним із поточним контекстом. Кнопки, які не мають сенсу для поточного стану, краще приховувати або вимикати.

Приклад:

* [https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtoolbar/index.htm#demos/jqxtoolbar/defaultfunctionality.htm jqxToolbar]

== Закладки / TabStrip ==

[[Файл:K2_UI_Standards_2025_05.png|міні|центр|Ілюстрація до розділу «Закладки (TabStrip)»]]

Закладки дозволяють розділити інформацію на смислові блоки. Це зручно для карток клієнтів, документів, налаштувань, звітів, аналітики або складних форм.

TabStrip потрібно використовувати там, де користувачу справді потрібно перемикатися між кількома логічними частинами, а не просто ховати перевантажений інтерфейс.

Приклад:

* [https://demos.telerik.com/kendo-ui/tabstrip/tab-position Telerik TabStrip]

== Ribbon-інтерфейс ==

[[Файл:K2_UI_Standards_2025_06.png|міні|центр|Ілюстрація до розділу «Ribbon-інтерфейс»]]

Ribbon — це інтерфейс у стилі Microsoft Office. Він підходить для складних систем із великою кількістю команд, які потрібно згрупувати за вкладками та функціональними зонами.

Ribbon доцільно використовувати там, де звичайний тулбар уже не справляється з кількістю команд.

Приклади:

* [https://snippet.dhtmlx.com/9ckg47ro?text=Ribbon DHTMLX Ribbon]
* [https://www.vueribbon.com/home VueRibbon]
* [https://metroui.org.ua/ribbon-menu.html Metro UI Ribbon]

== Таблиці / гриди ==

[[Файл:K2_UI_Standards_2025_07.png|міні|центр|Ілюстрація до розділу «Таблиці (гриди)»]]

Гриди — один із ключових елементів ERP-інтерфейсу. Вони використовуються для табличних даних, документів, довідників, журналів, залишків, звітів і списків.

У K2 можуть використовуватися PHPGrid, AG-Grid та інші грід-компоненти, якщо вони відповідають технічним вимогам проєкту.

Приклади:

* [https://www.gridphp.com/demo-center/ PHPGrid Demo]
* [https://www.ag-grid.com/example/ AG-Grid]

== Master-Detail ==

[[Файл:K2_UI_Standards_2025_08.png|міні|центр|Ілюстрація до розділу «Master-Detail»]]

Master-Detail використовується для відображення зв’язку “один до багатьох”.

Типовий приклад: документ і його рядки, клієнт і його замовлення, склад і залишки, рахунок і платежі.

Такий підхід дозволяє не відкривати зайві сторінки, а бачити залежні дані в одному інтерфейсі.

== Підгрид Master-Detail ==

[[Файл:K2_UI_Standards_2025_09.png|міні|центр|Ілюстрація до розділу «Під-гридом Master-Detail»]]

Підгрид використовується, коли деталізацію потрібно показати безпосередньо всередині основної таблиці.

Це зручно для швидкого перегляду пов’язаних даних без переходу на окрему сторінку.

== Multi-grid / Tab-grid ==

[[Файл:K2_UI_Standards_2025_10.png|міні|центр|Ілюстрація до розділу «Multy-грід (Tab-грід)»]]

Multi-grid або Tab-grid використовується тоді, коли в одному робочому місці потрібно показати кілька пов’язаних таблиць.

Наприклад, у картці клієнта можуть бути окремі вкладки для контактів, угод, документів, дзвінків, файлів і задач.

== Кнопки ==

[[Файл:K2_UI_Standards_2025_11.png|міні|центр|Ілюстрація до розділу «Кнопки»]]

Кнопки мають чітко показувати дію, яку вони виконують.

Кнопка може бути звичайною, з іконкою, з меню, вертикальною, горизонтальною або частиною тулбару. Важливо, щоб користувач розумів різницю між основною дією, додатковою дією та небезпечною дією.

Приклад:

* [https://adminlte.io/themes/AdminLTE/pages/UI/buttons.html AdminLTE Buttons]

== Спліттери / Splitter ==

[[Файл:K2_UI_Standards_2025_12.png|міні|центр|Ілюстрація до розділу «Спліттери (Splitter)»]]

Splitter дозволяє користувачу змінювати розмір областей інтерфейсу.

Це корисно для складних робочих екранів, де користувачеві потрібно самостійно збільшити список, форму, перегляд документа, карту або панель деталей.

Приклад:

* [https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/index.htm#demos/jqxsplitter/defaultfunctionality.htm jqxSplitter]

== Прогрес-бари ==

[[Файл:K2_UI_Standards_2025_14.png|міні|центр|Ілюстрація до розділу «Прогрес-бари»]]

Прогрес-бари використовуються для показу виконання процесу: імпорту, експорту, завантаження, синхронізації, обробки файлів або довгих операцій.

Користувач має бачити, що система працює, а не зависла.

== Слайдери ==

[[Файл:K2_UI_Standards_2025_15.png|міні|центр|Ілюстрація до розділу «Слайдери»]]

Слайдери використовуються для вибору значення або діапазону значень.

В ERP-інтерфейсах їх потрібно застосовувати обережно: там, де точне числове значення важливіше за приблизний вибір, краще використовувати поле введення.

Приклад:

* [https://adminlte.io/themes/AdminLTE/pages/UI/sliders.html AdminLTE Sliders]

== Звіти / Reports ==

[[Файл:K2_UI_Standards_2025_16.png|міні|центр|Ілюстрація до розділу «Звіти (Reports)»]]

Звіти — це підготовлена інформація для перегляду, аналізу, друку або експорту.

У K2 звіти мають підтримувати зрозумілу структуру, фільтри, періоди, джерела даних і можливість друку.

Приклад:

* [https://demo.stimulsoft.com/#Net/Order Stimulsoft Reports]

== PivotGrid / OLAP / BI ==

[[Файл:K2_UI_Standards_2025_17.png|міні|центр|Ілюстрація до розділу «PivotGrid (OLAP), BI»]]

PivotGrid, OLAP і BI-компоненти використовуються для аналітики, агрегування даних, побудови дашбордів і управлінської звітності.

Такі компоненти потрібні там, де користувач не просто переглядає таблицю, а аналізує дані за різними вимірами.

Приклад:

* [https://demo.stimulsoft.com/#Net/DashboardInsuranceSales2014-2022 Stimulsoft Dashboard]

== Вікна та модальні форми ==

[[Файл:K2_UI_Standards_2025_18.png|міні|центр|Ілюстрація до розділу «Вікна»]]

Модальне вікно використовується тоді, коли користувач має виконати дію або прийняти рішення, не перемикаючись на інший сценарій.

Вікна мають використовувати доступний простір екрана. Якщо задача складна, форма має бути достатньо великою, читабельною і, за потреби, змінюваною за розміром.

Приклад:

* [https://adminlte.io/themes/AdminLTE/pages/UI/modals.html AdminLTE Modals]

== Suite / комплект компонентів ==

[[Файл:K2_UI_Standards_2025_19.png|міні|центр|Ілюстрація до розділу «Suite (комплект)»]]

Suite — це узгоджений набір компонентів, які стилістично й технічно працюють разом.

Використання одного комплекту зменшує ризик конфліктів між контролами, стилями та JavaScript-логікою.

Приклад:

* [https://snippet.dhtmlx.com/85fbitnu?mode=wide DHTMLX Suite]

== Короткий стандарт вибору компонента ==

Перед використанням нового компонента в K2 потрібно відповісти на кілька питань.

{| class="wikitable" style="width:100%;"
! Питання
! Навіщо це потрібно
|-
| Чи можна змінити зовнішній вигляд компонента?
| Щоб адаптувати його під дизайн клієнта
|-
| Чи не конфліктує він з іншими бібліотеками?
| Щоб не ламати інтерфейс системи
|-
| Чи підтримує він великі обсяги даних?
| Для ERP це критично, особливо в таблицях і звітах
|-
| Чи нормально працює на різних екранах?
| Для адаптивності та зручності
|-
| Чи є документація та приклади?
| Щоб компонент можна було підтримувати
|-
| Чи можна інтегрувати його з backend K2?
| Щоб UI не жив окремо від бізнес-логіки
|-
| Чи зрозумілий він користувачу?
| Щоб інтерфейс не виглядав красиво, але незручно
|}

== Додаткові ілюстрації ==

<gallery mode="packed" heights="180">
K2_UI_Standards_2025_20.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_20.png
K2_UI_Standards_2025_21.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_21.png
K2_UI_Standards_2025_22.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_22.png
K2_UI_Standards_2025_23.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_23.png
K2_UI_Standards_2025_24.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_24.png
K2_UI_Standards_2025_25.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_25.png
K2_UI_Standards_2025_26.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_26.png
K2_UI_Standards_2025_27.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_27.png
K2_UI_Standards_2025_28.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_28.png
K2_UI_Standards_2025_29.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_29.png
K2_UI_Standards_2025_30.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_30.png
K2_UI_Standards_2025_31.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_31.png
K2_UI_Standards_2025_32.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_32.png
K2_UI_Standards_2025_33.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_33.png
K2_UI_Standards_2025_34.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_34.png
K2_UI_Standards_2025_35.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_35.png
K2_UI_Standards_2025_36.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_36.png
K2_UI_Standards_2025_37.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_37.png
K2_UI_Standards_2025_38.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_38.png
K2_UI_Standards_2025_39.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_39.png
K2_UI_Standards_2025_40.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_40.png
K2_UI_Standards_2025_41.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_41.png
K2_UI_Standards_2025_42.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_42.png
K2_UI_Standards_2025_43.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_43.png
K2_UI_Standards_2025_44.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_44.png
K2_UI_Standards_2025_45.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_45.png
K2_UI_Standards_2025_46.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_46.png
K2_UI_Standards_2025_47.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_47.png
K2_UI_Standards_2025_48.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_48.png
K2_UI_Standards_2025_49.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_49.png
K2_UI_Standards_2025_50.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_50.png
K2_UI_Standards_2025_51.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_51.png
K2_UI_Standards_2025_52.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_52.png
K2_UI_Standards_2025_53.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_53.png
K2_UI_Standards_2025_54.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_54.png
K2_UI_Standards_2025_55.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_55.png
</gallery>

== Коротко ==

{| class="wikitable" style="width:100%;"
! Питання
! Відповідь
|-
| Для чого потрібні стандарти UI K2?
| Щоб різні команди реалізовували інтерфейси в єдиній логіці
|-
| Чи можна змінювати дизайн компонентів?
| Так, компоненти мають підтримувати кастомізацію під конкретний проєкт
|-
| Чи можна переписувати компонент під кожен дизайн?
| Ні, бажано зберігати одну програмну основу й змінювати лише візуальний рівень
|-
| Що важливо при виборі контролу?
| Сумісність, адаптивність, документація, підтримка великих даних і відсутність конфліктів
|-
| Які компоненти критичні для ERP?
| Гриди, меню, тулбари, форми, звіти, права доступу, Master-Detail, модальні вікна
|-
| Навіщо потрібні приклади з інших бібліотек?
| Щоб бачити готові сценарії поведінки й не вигадувати базові елементи з нуля
|}

== Див. також ==

* [[K2 ERP]]
* [[K2 Cloud ERP]]
* [[UI]]
* [[UX]]
* [[Адміністративна панель]]
* [[Таблиці]]
* [[Грід]]
* [[K2 ERP Python]]
* [[K2 ERP Javascript]]
* [[Документація K2]]

[[Категорія:K2 ERP]]
[[Категорія:UI]]
[[Категорія:UX]]
[[Категорія:Стандарти K2]]
[[Категорія:Документація K2]]
[[Категорія:Адміністративна панель]]
[[Категорія:Грід]]
[[Категорія:Корпоративна Wiki]]