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

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

OpenStreet

Це інтерфейс в стилі Ms Office 2013.; * https://www.telerik.com/

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

</gallery>

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

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

• 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_38.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_38.png <gallery mode="packed" heights="180">

Таймлайн

Microsoft Visio - графічний редактор для ділової графіки.; K2_UI_Standards_2025_46.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_46.png

Окремо варто відзначити який описує єдині підходи до реалізації дизайнів, контролів, компонентів і програмної частини у проектах K2 виступає ключовою рисою Стандарти UI K2 2025.; * https://dbeaver.com/download/

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

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

• 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_32.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_32.png

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

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

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

Меню

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

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

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

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

Приклад:

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

Тулбари

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

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

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

Google-теми

K2_UI_Standards_2025_49.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_49.png Контекстне меню - з’являється тоді, коли ми клацаємо на елементі лівою клавішею миші.; Панель інструментів призначена для вибору команд.; K2_UI_Standards_2025_37.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_37.png K2_UI_Standards_2025_52.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_52.png

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

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

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

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

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

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

Report

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

Дозволяють розташувати інформацію по різним сторінкам.;== Інструменти протопіювання дизайну == K2_UI_Standards_2025_36.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_36.png K2_UI_Standards_2025_33.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_33.png

Грід PHP Grid

K2_UI_Standards_2025_25.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_25.png За допомогою Таймлайну можна показати красиво еволюція в часі дій.;== Мета ==

Карти

• Приклади: 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

Див.; додатково

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

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

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

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

AG-Grid

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

• https://leafletjs.com/

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

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

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

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

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

Веб-проекти відрізняються від звичайних проектів тим, що майже завжди адаптуються під дизайн, необхідний клієнту.; Можливі і інші варіанти визову контекстного меню.; * Приклад: https://snippet.dhtmlx.com/85fbitnu?mode=wide

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

Меню можуть мати багато рівнів.; * https://bestofbi.com/products/sql-power-architect-data-modeling/ - SQL Power Architech.; * MetroUI: https://korzh.com/metroui#licensing

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

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

Ribbon-інтерфейс

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

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

• https://wireframe.cc

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

За допомогою цих інструментів ви можете зробити схему елементів дизайну.; * https://adminlte.io/themes/AdminLTE/pages/UI/timeline.html

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

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

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

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

Компоненти повинні з самого початку передбачати свою кастомізацію під певний дизайн.; Якісь компоненти ми можемо не описати в цьому документі, але потрібно бачити їх функціональні можливості і при необхідності - використовувати.;== Telerik ==

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

• P.S.; надає можливість створити схеми користувацького інтерфейсу та ділову графіку для проекту.; K2_UI_Standards_2025_29.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_29.png

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

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

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

• Приклад: https://demos.telerik.com/kendo-ui/tabstrip/tab-position

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

Приклади: 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

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

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

Suite (комплект)

Увага: різні компоненти можуть конфліктувати одне з одним.; * K2 ERP

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

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

Закладки (TabStrip)

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