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

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

Мета

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

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

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

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

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

Карти

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

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.

Меню

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

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

Контекстне меню - з’являється тоді, коли ми клацаємо на елементі лівою клавішею миші. Можливі і інші варіанти визову контекстного меню.

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

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

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

Таймлайн

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

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

Приклад:

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

Тулбари

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

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

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

Закладки (TabStrip)

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

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

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

Ribbon-інтерфейс

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

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

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

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

Приклад:

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

Під-гридом 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 (комплект)

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

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

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

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

• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2
• 
  Ілюстрація UI K2

Див. також

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