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

{{Картка документації K2
| назва = Стандарти UI K2 2025
| система = K2
| тип = UI-стандарти
| рік = 2025
}}

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

__TOC__

== Мета ==

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

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

Компоненти повинні з самого початку передбачати свою кастомізацію під певний дизайн.

Увага: різні компоненти можуть конфліктувати одне з одним. Тому дуже важливо правильно підбирати контроли, щоб не конфліктували друг з другом.

* P.S. Дуже стара версія стандартів (10-20 річної давнини): https://docs.google.com/document/d/1LjNHDyISGVkk7AnhXfWnTL9xChJqzKHchfTcVrTYWk8/edit

== Карти ==

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

=== OpenStreet ===

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

* https://leafletjs.com/

=== Карти 3D ===

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

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

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

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

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

* https://dbeaver.com/download/

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

== Шаблони ==

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

* 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

== Google-теми ==

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

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

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

== Грід PHP Grid ==

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

== AG-Grid ==

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

== Telerik ==

* https://www.telerik.com/

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

== Report ==

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

== Набори прикладів різних UI компонентів ==

В наборах ви можете побачити багато різних компонентів. Якісь компоненти ми можемо не описати в цьому документі, але потрібно бачити їх можливості і при необхідності - використовувати.

* 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/#

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

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

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

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

== Інструменти протопіювання дизайну ==

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

Microsoft Visio - графічний редактор для ділової графіки. Дозволяє створити схеми користувацького інтерфейсу та ділову графіку для проекту.

* https://wireframe.cc

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

* https://bestofbi.com/products/sql-power-architect-data-modeling/ - SQL Power Architech.

== Види компонентів ==

== Меню ==

[[Файл:K2_UI_Standards_2025_02.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_03.png|міні|центр|Ілюстрація до розділу «Таймлайн»]]

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

Приклад:

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

== Тулбари ==

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

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

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

== Закладки (TabStrip) ==

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

Дозволяють розташувати інформацію по різним сторінкам. Розподіляючи інформацію по смислу.

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

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

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

Це інтерфейс в стилі Ms Office 2013.

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

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

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

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

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

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

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

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

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

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

=== Master-Detail ===

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

Це можливість показати співвідношення таблиць один до багатьох:

Приклад:

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

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

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

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

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

== Кнопки ==

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

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

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

== Кнопка може мати список (меню) ==

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

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

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

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

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

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

== Карти ==

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

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

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

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

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

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

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

== Звіти (Reports) ==

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

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

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

== PivotGrid (OLAP), BI ==

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

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

== Вікна ==

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

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

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

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

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

== Suite (комплект) ==

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

Це стилистично росташований комплекс компонент.

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

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

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

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

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

[[Категорія:K2 ERP]]
[[Категорія:UI]]
[[Категорія:Стандарти K2]]
[[Категорія:Документація K2]]