Перейти до вмісту

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

Матеріал з K2 ERP Wiki


</gallery>

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

K2_UI_Standards_2025_23.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_23.png Перед використанням нового компонента в K2 потрібно відповісти на кілька питань.== Suite / комплект компонентів == Кнопка здатна бути звичайною, з іконкою, з меню, вертикальною, горизонтальною або частиною тулбару. * Telerik TabStrip У K2 звіти мають підтримувати зрозумілу структуру, фільтри, періоди, джерела даних і можливість друку. ! Пояснення K2_UI_Standards_2025_33.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_33.png Приклад:

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

В ERP-інтерфейсах їх потрібно застосовувати обережно: там, де точне числове значення важливіше за приблизний вибір, краще використовувати поле введення. Підгрид застосовується для, коли деталізацію потрібно показати безпосередньо всередині основної таблиці. У K2 тулбар має бути зрозумілим, не перевантаженим і пов’язаним із поточним контекстом. Гриди — один із ключових елементів ERP-інтерфейсу.
Ілюстрація до розділу «Звіти (Reports)»
Ілюстрація до розділу «Спліттери (Splitter)»

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

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

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

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

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

У проєктах K2 можуть використовуватися верхні, нижні, бокові, контекстні та багаторівневі меню. це внутрішній документ, який визначає єдині підходи до реалізації інтерфейсів, контролів, компонентів і програмної частини у проєктах K2 виступає ключовою рисою Стандарти UI K2 2025.
Ілюстрація до розділу «Слайдери»
Ілюстрація до розділу «Ribbon-інтерфейс»

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

Кастомізація Компонент має швидко адаптуватися під різні дизайни, теми та стилі
Сумісність Компонент не повинен конфліктувати з іншими елементами системи
Повторне використання Один і той самий компонент має працювати в різних проєктах без переписування з нуля
Адаптивність Інтерфейс має нормально працювати на різних розмірах екрана
Зрозумілість користувач системи має оперативно розуміти, що робить компонент
Масштабованість Компонент має витримувати збільшення кількості даних або пунктів керування
Підтримуваність Розробники мають мати змогу оперативно підтримувати та змінювати компонент

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

Модальне вікно застосовується для тоді, коли користувач системи має виконати дію або прийняти рішення для бізнесу, не перемикаючись на інший сценарій. Якщо задача складна, форма має бути достатньо великою, читабельною і, за потреби, змінюваною за розміром. K2_UI_Standards_2025_54.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_54.png

Приклад:

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

Рекомендація. DHX / DHTMLX можна розглядати як один із пріоритетних наборів для аналізу та використання в інтерфейсах K2, якщо він технічно підходить до конкретного задача. K2_UI_Standards_2025_31.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_31.png

Splitter дає можливість користувачу змінювати розмір областей інтерфейсу. | Щоб бачити готові сценарії поведінки й не вигадувати базові елементи з нуля

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

Кнопки мають чітко показувати дію, яку вони виконують. {| class="wikitable" style="width:100%;"

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

Ілюстрація до розділу «Master-Detail»

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

Тулбари

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

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

як приклад, у картці клієнта можуть бути окремі вкладки для контактів, угод, документів, дзвінків, файлів і задач. Вимога K2_UI_Standards_2025_40.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_40.png Приклади: K2_UI_Standards_2025_22.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_22.png Ribbon — це інтерфейс у стилі Microsoft Office. K2_UI_Standards_2025_21.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_21.png

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

Ілюстрація до розділу «Під-гридом Master-Detail»

Кнопки

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

Ілюстрація до розділу «Карти»

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

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

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

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

Такі компоненти потрібні там, де користувач системи не без зусиль переглядає таблицю, а аналізує інформаційні дані за різними вимірами. Вікна мають використовувати доступний простір екрана. Карти використовуються там, де потрібно показати об’єкти на місцевості, маршрути, склади, адреси, точки обслуговування, логістику або просторові інформаційні дані.
Ілюстрація до розділу «Закладки (TabStrip)»

Multi-grid або Tab-grid застосовується для тоді, коли в одному робочому місці потрібно показати кілька пов’язаних таблиць. Мета стандарту — щоб дизайнери. * K2 ERP

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

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

Меню

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

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

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

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

|- | Для чого потрібні стандарти UI K2? | Сумісність, адаптивність, документація, технічна підтримка великих даних і відсутність конфліктів |- | Які компоненти критичні для ERP? ! | Щоб адаптувати його під дизайн клієнта |- | Чи не конфліктує він з іншими бібліотеками? Приклад: Приклад: K2_UI_Standards_2025_49.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_49.png

Слайдери

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

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

Меню — один із головних елементів навігації в системі. Тулбар — це панель інструментів для швидкого доступу до команд. Вони використовуються для табличних даних, документів, довідників, журналів, залишків, звітів і списків.== Звіти / Reports ==

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

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

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

Приклад:

Ілюстрація до розділу «Suite (комплект)»

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

Слайдери використовуються для вибору значення або діапазону значень. | Щоб різні команди реалізовували інтерфейси в єдиній логіці |- | Чи можна змінювати дизайн компонентів? Посилання

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

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

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

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

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

Для якісної реалізації UI недостатньо лише обрати бібліотеку компонентів. | Гриди, меню, тулбари, форми, звіти, права доступу, Master-Detail, модальні вікна |- | Навіщо потрібні приклади з інших бібліотек?

Ілюстрація до розділу «Multy-грід (Tab-грід)»

Приклади:

Спліттери / Splitter

Master-Detail застосовується для для відображення зв’язку “один до багатьох”. K2_UI_Standards_2025_27.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_27.png ! Він підходить для складних систем із великою кількістю команд, які потрібно згрупувати за вкладками та функціональними зонами. * Mapplic

Multi-grid / Tab-grid

Приклади:

У K2 можуть використовуватися PHPGrid, AG-Grid та інші грід-компоненти, якщо вони відповідають технічним вимогам проєкту.== Google та Material-подібні теми == K2_UI_Standards_2025_24.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_24.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 Це корисно для складних робочих екранів, де користувачеві потрібно самостійно збільшити список, форму, перегляд документа, карту або панель деталей.== Коротко == ! | Щоб UI не жив окремо від бізнес-логіки |- | Чи зрозумілий він користувачу? Призначення

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

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

TabStrip потрібно використовувати там, де користувачу справді потрібно перемикатися між кількома логічними частинами, а не без зусиль ховати перевантажений інтерфейс. | Щоб компонент можна було підтримувати |- | Чи можна інтегрувати його з backend K2? | Так, компоненти мають підтримувати кастомізацію під конкретний проєкт |- | Чи можна переписувати компонент під кожен дизайн? K2_UI_Standards_2025_34.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_34.png

Використання одного комплекту зменшує ризик конфліктів між контролами, стилями та JavaScript-логікою. Потрібно так само моделювати структуру даних, схеми, прототипи інтерфейсів і бізнес-логіку. K2_UI_Standards_2025_41.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_41.png

Підгрид Master-Detail

Ribbon-інтерфейс

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

PivotGrid / OLAP / BI

Карти

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

критично. Гарний компонент не підходить для K2, якщо він конфліктує з іншими контролами, ламає шаблон, погано масштабується або потребує переписування бізнес-логіки. | Щоб інтерфейс не виглядав красиво, але незручно |}

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

Особливо критично перевіряти сумісність компонентів між собою. Навіщо це потрібно

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

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

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

Приклад:

! | Ні, бажано зберігати одну програмну основу й змінювати лише візуальний рівень |- | Що критично при виборі контролу?== Шаблони адміністративних панелей ==

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

<gallery mode="packed" heights="180">

Закладки / TabStrip

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

Див. так само

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

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

! Компонент повинен бути зрозумілим для користувача, не конфліктувати з іншими елементами, підтримувати кастомізацію, нормально працювати в різних шаблонах і зберігати передбачувану поведінку. Якщо пунктів багато, потрібно передбачати пошук по назві або ключовому слову. Кнопки, які не мають сенсу для поточного стану, краще приховувати або вимикати. Звіти — це підготовлена інформаційні матеріали для перегляду, аналізу, друку або експорту. K2_UI_Standards_2025_55.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_55.png

користувач системи має бачити, що платформа функціонує, а не зависла. Питання

Таймлайн

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

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

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

Приклади:

Ribbon доцільно використовувати там, де звичайний тулбар уже не справляється з кількістю команд. ! | Для ERP це критично, особливо в таблицях і звітах |- | Чи нормально функціонує на різних екранах? | Для адаптивності та зручності |- | Чи виступає як документація та приклади? провідний принцип. Дизайн здатна змінюватися під клієнта, але компонент не повинен втрачати стабільність, сумісність і єдину програмну логіку. Відповідь

Ілюстрація до розділу «PivotGrid (OLAP), BI»

Master-Detail

Ілюстрація до розділу «Прогрес-бари»

Приклади:

Отримано з https://wiki.kyiv.ua/index.php?title=Стандарти_UI_K2_2025&oldid=505