Стандарти UI K2 2025

K2_UI_Standards_2025_38.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_38.png

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

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

Приклад: Для якісної реалізації UI недостатньо лише обрати бібліотеку компонентів.; Якщо пунктів багато, потрібно передбачати пошук по назві або ключовому слову.; * PHPGrid Demo

• AG-Grid

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

Ілюстрація до розділу «Закладки (TabStrip)»

K2_UI_Standards_2025_22.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_22.png

Master-Detail

K2_UI_Standards_2025_48.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_48.png

Приклад:

Ribbon — це інтерфейс у стилі Microsoft Office.;

Ілюстрація до розділу «Таймлайн»

Для інтерфейсів, де потрібна сучасна, легка й зрозуміла подача, можна орієнтуватися на Material-подібні теми та шаблони.; K2_UI_Standards_2025_33.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_33.png

Приклад:

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

K2_UI_Standards_2025_45.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_45.png

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

Приклади:

Компонент має бути створений так, щоб його можна було адаптувати під конкретний проєкт: змінити зовнішній вигляд, тему, розміри, положення, іконки або поведінку, але залишити стабільну технічну основу.; K2_UI_Standards_2025_20.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_20.png

Ілюстрація до розділу «Таблиці (гриди)»

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

K2_UI_Standards_2025_29.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_29.png

Меню

центральний принцип. Дизайн має змогу змінюватися під клієнта, але компонент не повинен втрачати стабільність, сумісність і єдину програмну логіку.; Потрібно додатково моделювати структуру даних, схеми, прототипи інтерфейсів і бізнес-логіку.; !; Якщо задача складна, форма має бути достатньо великою, читабельною і, за потреби, змінюваною за розміром.; Це комфортно для швидкого перегляду пов’язаних даних без переходу на окрему сторінку.; | Щоб бачити готові сценарії поведінки й не вигадувати базові елементи з нуля |}

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

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

Таймлайн

|- | SQL Power Architect | Моделювання структури бази даних | bestofbi.com |- | DBeaver | Редактор і замовник баз даних | dbeaver.com |- | DrawDB | Візуальний редактор структури бази даних | drawdb.app |- | Wireframe.cc | Швидке створення wireframe-прототипів | wireframe.cc |- | Microsoft Visio | Схеми інтерфейсів, процесів і ділової графіки | Окремий desktop-інструмент |}

K2_UI_Standards_2025_43.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_43.png

K2_UI_Standards_2025_34.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_34.png

Прогрес-бари використовуються для показу виконання процесу: імпорту, експорту, завантаження, синхронізації, обробки файлів або довгих операцій.; Окремо варто відзначити розробники, менеджери, партнери і замовники говорили однією мовою під час створення інтерфейсів для K2 ERP, сайтів, адміністративних панелей, CRM, кабінетів користувача та інших web-рішень.; Посилання

Ілюстрація до розділу «Вікна»

• jqxToolbar

K2_UI_Standards_2025_46.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_46.png

Звіти / Reports

K2_UI_Standards_2025_52.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_52.png

У K2 тулбар має бути зрозумілим, не перевантаженим і пов’язаним із поточним контекстом.; Мета стандарту — щоб дизайнери.; Кнопки мають чітко показувати дію, яку вони виконують.; Це корисно для складних робочих екранів, де користувачеві потрібно самостійно збільшити список, форму, перегляд документа, карту або панель деталей.; паралельно з цим базова програмна логіка компонентів не повинна щоразу переписуватися під новий дизайн.; | Щоб компонент можна було підтримувати |- | Чи можна інтегрувати його з backend K2?;== Підгрид Master-Detail ==

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

Ілюстрація до розділу «Ribbon-інтерфейс»

|- | Чи можна змінити зовнішній вигляд компонента?; K2_UI_Standards_2025_51.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_51.png !; Приклад:

Меню — один із головних елементів навігації в системі.; Приклад: TabStrip потрібно використовувати там, де користувачу справді потрібно перемикатися між кількома логічними частинами, а не без ускладнень ховати перевантажений інтерфейс.; Питання Контекстне меню зазвичай відкривається при натисканні на елемент або через іншу дію, визначену сценарієм інтерфейсу.; * Stimulsoft Dashboard

Закладки / TabStrip

Гриди — один із ключових елементів ERP-інтерфейсу.;== Ribbon-інтерфейс ==

Приклад:

Багато прикладів роботи компонентів можна побачити в готових шаблонах адміністративних панелей.; | Так, компоненти мають підтримувати кастомізацію під конкретний проєкт

Чи можна переписувати компонент під кожен дизайн?; Відповідь K2_UI_Standards_2025_39.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_39.png AdminLTE Sliders Приклад: Що має враховувати UI-компонент Splitter надає можливість користувачу змінювати розмір областей інтерфейсу.; K2_UI_Standards_2025_27.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_27.png DHTMLX Suite K2_UI_Standards_2025_26.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_26.png Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_42.png Сумісність, адаптивність, документація, супровід великих даних і відсутність конфліктів Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_50.png K2_UI_Standards_2025_47.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_47.png K2_UI_Standards_2025_44.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_44.png Тулбар — це панель інструментів для швидкого доступу до команд.; Ілюстрація до розділу «Слайдери» K2_UI_Standards_2025_28.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_28.png Ілюстрація до розділу «Під-гридом Master-Detail» Для вибору UI-рішень можна використовувати готові приклади адміністративних панелей, бібліотек компонентів, тем, шаблонів і демонстраційних наборів.; Кнопки, які не мають сенсу для поточного стану, краще приховувати або вимикати.; Навіщо це потрібно Ілюстрація до розділу «Прогрес-бари» Щоб різні команди реалізовували інтерфейси в єдиній логіці Чи можна змінювати дизайн компонентів?; Закладки дозволяють розділити інформацію на смислові блоки.; Вимога Multi-grid / Tab-grid Для звичайних web-карт можна використовувати OpenStreetMap та Leaflet.; Кнопка має змогу бути звичайною, з іконкою, з меню, вертикальною, горизонтальною або частиною тулбару.; | Щоб адаптувати його під дизайн клієнта Щоб інтерфейс не виглядав красиво, але незручно Компонент повинен бути зрозумілим для користувача, не конфліктувати з іншими елементами, підтримувати кастомізацію, нормально працювати в різних шаблонах і зберігати передбачувану поведінку.; * jqxSplitter Шаблони адміністративних панелей Ілюстрація до розділу «Master-Detail» Multi-grid або Tab-grid застосовується тоді, коли в одному робочому місці потрібно показати кілька пов’язаних таблиць.; | Для адаптивності та зручності
Чи є собою документація та приклади?; Він підходить для складних систем із великою кількістю команд, які потрібно згрупувати за вкладками та функціональними зонами.; Ілюстрація до розділу «Multy-грід (Tab-грід)» Приклади: У проєктах K2 можуть використовуватися верхні, нижні, бокові, контекстні та багаторівневі меню.; K2_UI_Standards_2025_35.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_35.png K2_UI_Standards_2025_30.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_30.png Ці приклади не означають автоматичне копіювання.;</gallery> Коротко У K2 звіти мають підтримувати зрозумілу структуру, фільтри, періоди, джерела даних і можливість друку.; Вони використовуються для табличних даних, документів, довідників, журналів, залишків, звітів і списків.;== Карти == AdminLTE Timeline Типовий приклад: документ і його рядки, замовник і його замовлення, складський облік і залишки, рахунок і платежі.; * AdminLTE AppStack Bootstrap Theme 88616 Bootstrap Theme 28117 Keen Bootstrap Admin Theme Bootstrap Theme 5824 Bootstrap Theme 1666 Bootstrap Theme 21888 K2_UI_Standards_2025_55.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_55.png Suite / комплект компонентів Ілюстрація до розділу «Спліттери (Splitter)» TailAdmin Material Admin Pro SB Admin Pro Angular Таймлайн застосовується для показу подій у часі: історії змін, етапів процесу, розвитку заявки, статусів задачі, життєвого циклу документа або клієнтської взаємодії.; K2_UI_Standards_2025_54.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_54.png	; Слайдери використовуються для вибору значення або діапазону значень.; | Ні, бажано зберігати одну програмну основу й змінювати лише візуальний рівень
Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_53.png Telerik TabStrip Слайдери як ілюстрація, у картці клієнта можуть бути окремі вкладки для контактів, угод, документів, дзвінків, файлів і задач.; Інструмент K2_UI_Standards_2025_36.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_36.png AdminLTE Buttons K2_UI_Standards_2025_23.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_23.png <gallery mode="packed" heights="180"> Ілюстрація до розділу «PivotGrid (OLAP), BI» Модальне вікно застосовується тоді, коли користувач системи має виконати дію або прийняти рішення для бізнесу, не перемикаючись на інший сценарій.; {| class="wikitable" style="width:100%;" Ілюстрація до розділу «Карти» DHTMLX Ribbon VueRibbon Metro UI Ribbon Додаткові ілюстрації Спліттери / Splitter Suite — це узгоджений набір компонентів, які стилістично й технічно працюють разом.; | Щоб не ламати інтерфейс системи
Гриди, меню, тулбари, форми, звіти, права доступу, Master-Detail, модальні вікна
Навіщо потрібні приклади з інших бібліотек?; Призначення Використання одного комплекту зменшує ризик конфліктів між контролами, стилями та JavaScript-логікою.; | Щоб UI не жив окремо від бізнес-логіки
Чи зрозумілий він користувачу?; PivotGrid, OLAP і BI-компоненти використовуються для аналітики, агрегування даних, побудови дашбордів і управлінської звітності.; Приклади: AdminLTE Modals K2_UI_Standards_2025_24.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_24.png PivotGrid / OLAP / BI У K2 можуть використовуватися PHPGrid, AG-Grid та інші грід-компоненти, якщо вони відповідають технічним вимогам проєкту.; | Для ERP це критично, особливо в таблицях і звітах
Чи нормально функціонує на різних екранах?; Ілюстрація до розділу «Звіти (Reports)» Stimulsoft Reports Тулбари K2_UI_Standards_2025_41.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_41.png K2_UI_Standards_2025_21.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_21.png Перед використанням нового компонента в K2 потрібно відповісти на кілька питань.; Корисні приклади: Кнопки Ілюстрація до розділу «Тулбари» Карти використовуються там, де потрібно показати об’єкти на місцевості, маршрути, склади, адреси, точки обслуговування, логістику або просторові інформаційні дані.;== Базові принципи UI K2 == Приклади: Syncfusion jQWidgets DHX / DHTMLX Telerik Kendo UI DevExpress Мета стандарту K2_UI_Standards_2025_49.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_49.png користувач системи має бачити, що платформа функціонує, а не зависла.; K2_UI_Standards_2025_25.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_25.png ; істотно, щоб користувач системи розумів різницю між основною дією, додатковою дією та небезпечною дією.; * Leaflet Leaflet examples Ілюстрація до розділу «Suite (комплект)» Mapplic істотно. Гарний компонент не підходить для K2, якщо він конфліктує з іншими контролами, ламає шаблон, погано масштабується або потребує переписування бізнес-логіки.; Приклади: Звіти — це підготовлена відомості для перегляду, аналізу, друку або експорту.; Пояснення jqxMenu Minimized menu Context menu Google та Material-подібні теми Ribbon доцільно використовувати там, де звичайний тулбар уже не справляється з кількістю команд.; Особливо істотно перевіряти сумісність компонентів між собою.; це внутрішній документ, який визначає єдині підходи до реалізації інтерфейсів, контролів, компонентів і програмної частини у проєктах K2 виступає ключовою рисою Стандарти UI K2 2025.; Інтерфейси K2 мають будуватися за кількома простими правилами.; Приклад: Кастомізація Компонент має без зайвих зусиль адаптуватися під різні дизайни, теми та стилі Сумісність Компонент не повинен конфліктувати з іншими елементами системи Повторне використання Один і той самий компонент має працювати в різних проєктах без переписування з нуля Адаптивність Інтерфейс має нормально працювати на різних розмірах екрана Зрозумілість користувач системи має оперативно розуміти, що робить компонент Масштабованість Компонент має витримувати збільшення кількості даних або пунктів керування Підтримуваність Розробники мають мати змогу оперативно підтримувати та змінювати компонент Коротко. Компоненти K2 мають бути технічно стабільними, візуально гнучкими та придатними до кастомізації під різні дизайни без переписування програмної логіки.; Приклад: Див.; додатково K2_UI_Standards_2025_37.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_37.png K2_UI_Standards_2025_31.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_31.png Ілюстрація до розділу «Кнопки» Приклад: Набори UI-компонентів Рекомендовані джерела для аналізу:
Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_40.png Ілюстрація до розділу «Меню»	Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_32.png Інструменти для проєктування та розробки Підгрид застосовується, коли деталізацію потрібно показати безпосередньо всередині основної таблиці.