Перегляд вихідного коду сторінки Стандарти UI K2 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_20.png
K2_UI_Standards_2025_21.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_21.png
K2_UI_Standards_2025_22.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_22.png
K2_UI_Standards_2025_23.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_23.png
K2_UI_Standards_2025_24.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_24.png
K2_UI_Standards_2025_25.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_25.png
K2_UI_Standards_2025_26.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_26.png
K2_UI_Standards_2025_27.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_27.png
K2_UI_Standards_2025_28.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_28.png
K2_UI_Standards_2025_29.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_29.png
K2_UI_Standards_2025_30.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_30.png
K2_UI_Standards_2025_31.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_31.png
K2_UI_Standards_2025_32.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_32.png
K2_UI_Standards_2025_33.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_33.png
K2_UI_Standards_2025_34.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_34.png
K2_UI_Standards_2025_35.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_35.png
K2_UI_Standards_2025_36.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_36.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
K2_UI_Standards_2025_39.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_39.png
K2_UI_Standards_2025_40.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_40.png
K2_UI_Standards_2025_41.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_41.png
K2_UI_Standards_2025_42.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_42.png
K2_UI_Standards_2025_43.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_43.png
K2_UI_Standards_2025_44.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_44.png
K2_UI_Standards_2025_45.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_45.png
K2_UI_Standards_2025_46.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_46.png
K2_UI_Standards_2025_47.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_47.png
K2_UI_Standards_2025_48.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_48.png
K2_UI_Standards_2025_49.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_49.png
K2_UI_Standards_2025_50.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_50.png
K2_UI_Standards_2025_51.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_51.png
K2_UI_Standards_2025_52.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_52.png
K2_UI_Standards_2025_53.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_53.png
K2_UI_Standards_2025_54.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_54.png
K2_UI_Standards_2025_55.png|Ілюстрація UI K2|посилання=Файл:K2_UI_Standards_2025_55.png
</gallery>

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

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

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