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

Шаблони

K2_UI_Standards_2025_21.png|Ілюстрація UI K2

K2_UI_Standards_2025_48.png|Ілюстрація UI K2

Карти

K2_UI_Standards_2025_55.png|Ілюстрація UI K2

K2_UI_Standards_2025_42.png|Ілюстрація UI K2

K2_UI_Standards_2025_47.png|Ілюстрація UI K2

Меню можуть бути: верхнє, нижнє, бокове (справа, або зліва), контекстне та інше.; документ.;</gallery>

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

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

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

Приклади: https://snippet.dhtmlx.com/9ckg47ro?text=Ribbon

• https://www.vueribbon.com/home

Таблиці (гриди)

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

За допомогою гридів автоматизуються значні частини табличних даних.

Ми використовуємо в своїй практиці PHPGrid та AG-Grid.

Приклади роботи та функціоналу PHPGrid:

• https://www.gridphp.com/demo-center/

Приклади AG-Grid:

• https://www.ag-grid.com/example/

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

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

Multy-грід (Tab-грід)

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

Кнопки

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

Приклад зовнішнього вигляду кнопок:

• https://adminlte.io/themes/AdminLTE/pages/UI/buttons.html

Кнопки можуть мати картинку на підпис

Кнопки можуть розміщуватись не тільки горизонтально, але й вертикально:

Спліттери (Splitter)

Ілюстрація до розділу «Спліттери (Splitter)»

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

• Приклад: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/index.htm#demos/jqxsplitter/defaultfunctionality.htm

Карти

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

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

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

Слайдери

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

За допомогою слайдеру можна вказувати диапазони зміни даних.

• Приклад: https://adminlte.io/themes/AdminLTE/pages/UI/sliders.html

Звіти (Reports)

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

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

• Приклад: https://demo.stimulsoft.com/#Net/Order

PivotGrid (OLAP), BI

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

• Приклад: https://demo.stimulsoft.com/#Net/DashboardInsuranceSales2014-2022

Вікна

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

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

• Приклад модальних вікон: https://adminlte.io/themes/AdminLTE/pages/UI/modals.html

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

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

Закладки (TabStrip)

• Приклад: https://snippet.dhtmlx.com/85fbitnu?mode=wide

K2_UI_Standards_2025_49.png|Ілюстрація UI K2

Меню можуть мати багато рівнів.; K2_UI_Standards_2025_40.png|Ілюстрація UI K2 K2_UI_Standards_2025_50.png|Ілюстрація UI K2 Це стилистично росташований комплекс компонент.; K2_UI_Standards_2025_32.png|Ілюстрація UI K2

Telerik

Шаблон:Картка документації K2 K2_UI_Standards_2025_35.png|Ілюстрація UI K2

Google-теми

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

Тулбари

K2_UI_Standards_2025_26.png|Ілюстрація UI K2

Інструментарій

K2_UI_Standards_2025_34.png|Ілюстрація UI K2

VueRibbon: https://www.vueribbon.com/home

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

• K2 ERP
• K2 Cloud ERP
• UI
• UX
• Адміністративна панель
• Таблиці
• Грід

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

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

DBAver - редактор бази даних

K2_UI_Standards_2025_20.png|Ілюстрація UI K2

Меню

K2_UI_Standards_2025_39.png|Ілюстрація UI K2

K2_UI_Standards_2025_54.png|Ілюстрація UI K2

• Приклади: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/index.htm#demos/jqxmenu/defaultfunctionality.htm

• https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/index.htm#demos/jqxmenu/minimized.htm

K2_UI_Standards_2025_22.png|Ілюстрація UI K2

• https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/index.htm#demos/jqxmenu/contextmenu.htm

K2_UI_Standards_2025_27.png|Ілюстрація UI K2

Ribbon-інтерфейс

В наборах ви можете побачити багато різних компонентів.; * https://adminlte.io/themes/AdminLTE/pages/UI/timeline.html

Контектне меню

K2_UI_Standards_2025_36.png|Ілюстрація UI K2

Панель інструментів призначена для вибору команд.; K2_UI_Standards_2025_53.png|Ілюстрація UI K2

K2_UI_Standards_2025_45.png|Ілюстрація UI K2

• https://tomickigrzegorz.github.io/leaflet-examples/#10.matching-all-markers-to-the-map-view

• https://leafletjs.com/

K2_UI_Standards_2025_30.png|Ілюстрація UI K2

• https://mapplic.com/maps/apartment

OpenStreet

K2_UI_Standards_2025_44.png|Ілюстрація UI K2

• https://bestofbi.com/architect-download/

K2_UI_Standards_2025_52.png|Ілюстрація UI K2

• https://dbeaver.com/download/

• Редактор структури бази даних (для можливого використання редактора): https://www.drawdb.app/editor

Мета

Компоненти повинні з самого початку передбачати свою кастомізацію під певний дизайн.; K2_UI_Standards_2025_38.png|Ілюстрація UI K2 K2_UI_Standards_2025_33.png|Ілюстрація UI K2 Microsoft Visio - графічний редактор для ділової графіки.; Якісь компоненти ми можемо не описати в цьому документі, але потрібно бачити їх функціональні можливості і при необхідності - використовувати.; * https://www.ag-grid.com/example/

Моделювання структури бази даних

• https://www.telerik.com/

• https://www.telerik.com/support/demos

K2_UI_Standards_2025_46.png|Ілюстрація UI K2

• Stimul Report: https://demo.stimulsoft.com/#Net/BusinessInvoice

K2_UI_Standards_2025_25.png|Ілюстрація UI K2

K2_UI_Standards_2025_43.png|Ілюстрація UI K2

• Syncfusion: https://ej2.syncfusion.com/vue/documentation/toolbar/responsive-mode

• jQWidgets: https://www.jqwidgets.com/jquery-widgets-demo/

• DHX (рекомендовано до використання): https://snippet.dhtmlx.com/i7cfddkl

• Різні UI-компоненти Telerik (більше під .Net): https://demos.telerik.com/kendo-ui/

• DevExpress (більше .Net): https://www.devexpress.com/support/demos/#

K2_UI_Standards_2025_29.png|Ілюстрація UI K2

• MetroUI: https://korzh.com/metroui#licensing

• https://themes.org.ua/pandora/index.html#forms-extended

• https://metroui.org.ua/ribbon-menu.html

SQL Power Architech - моделювання структури бази даних:

Таймлайн

K2_UI_Standards_2025_41.png|Ілюстрація UI K2

• https://wireframe.cc

• https://bestofbi.com/products/sql-power-architect-data-modeling/ - SQL Power Architech.; з цієї причини дуже істотно правильно підбирати контроли, щоб не конфліктували друг з другом.; Багато прикладів роботи компонентів та їх поводження можна побачити в різних шаблонах.; * https://adminlte.io/themes/AdminLTE/index2.html#

• https://appstack.bootlab.io/dashboard-default.html

• https://themes.getbootstrap.com/preview/?theme_id=88616

• https://themes.getbootstrap.com/preview/?theme_id=28117

• https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/

• https://themes.getbootstrap.com/preview/?theme_id=5824

• https://themes.getbootstrap.com/preview/?theme_id=1666

• https://themes.getbootstrap.com/preview/?theme_id=21888

K2_UI_Standards_2025_24.png|Ілюстрація UI K2

• https://themewagon.com/themes/tailadmin/

• https://startbootstrap.com/previews/material-admin-pro

• https://startbootstrap.com/previews/sb-admin-pro-angular

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

• https://www.gridphp.com/demo-center/

Контекстне меню - з’являється тоді, коли ми клацаємо на елементі лівою клавішею миші.; Дуже стара реліз стандартів (10-20 річної давнини): https://docs.google.com/document/d/1LjNHDyISGVkk7AnhXfWnTL9xChJqzKHchfTcVrTYWk8/edit

За допомогою цих інструментів ви можете зробити схему елементів дизайну.; з цієї причини, повинно бути розуміння скільки рівнів меню передбачає і як поводяться різні рівні меню.; * P.S.; Можливі і інші варіанти визову контекстного меню.;== Див.; додатково ==

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

K2_UI_Standards_2025_31.png|Ілюстрація UI K2

Report

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

<gallery mode="packed" heights="180"> K2_UI_Standards_2025_28.png|Ілюстрація UI K2 K2_UI_Standards_2025_37.png|Ілюстрація UI K2

AG-Grid

За допомогою Таймлайну можна показати красиво еволюція в часі дій.; * Приклад: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtoolbar/index.htm#demos/jqxtoolbar/defaultfunctionality.htm

K2_UI_Standards_2025_51.png|Ілюстрація UI K2

Карти 3D

Останнім часом для меню з великою кількістю пунктів стали передбачати полосу пошуку елемента меню по назві, або ключовому слову.; * Приклад: https://demos.telerik.com/kendo-ui/tabstrip/tab-position

K2_UI_Standards_2025_23.png|Ілюстрація UI K2

Це інтерфейс в стилі Ms Office 2013.; того, щоб різні співробітники і партнери компанії К2 розмовляли одне з одним однаковою мовою забезпечується через Цей документ призначений; додатково реалізовано коли йде реалізація дизайнів, контролів, програмної частини у різних проектах.;== Набори прикладів різних UI компонентів == Приклад: