Стандарти 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://adminlte.io/themes/AdminLTE/pages/UI/timeline.html

Тулбари

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

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

Закладки (TabStrip)

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

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

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

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

Приклад:

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

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

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

Кнопки

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

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

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

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

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

Спліттери (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)

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

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

PivotGrid (OLAP), BI

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

Вікна

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

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

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

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