UX/UI Рішення:1. Кнопка "Зберегти" → Діалогове вікно з вибором діїПісля натискання кнопки "Зберегти", показати модальне вікно з двома варіантами:Зберегти зміни:🔄 Оновити поточний шаблон(Замість існуючого шаблону збережуться ці зміни)➕ Створити новий шаблон(Зміни буде збережено в новому шаблоні, надайте нову назву)2. Опція "Створити новий" відкриває додаткове полеЯкщо користувач обирає "створити новий", під модальним вибором відображається поле:Назва нового шаблону: ______________3. Продовження після виборуЯкщо "оновити" — система зберігає зміни до поточного шаблону.Якщо "створити новий" — створюється копія + нова назва + нове поле.
I'll create a UX/UI solution for the save functionality with a modal dialog that offers two options: updating the current template or creating a new one.
This implementation provides a complete UX/UI solution for the save functionality with the following features:
Key Features:
- Save Button - Triggers the modal dialog when clicked
Modal Dialog with two clear options:
- 🔄 Update current template - Replaces existing template
- ➕ Create new template - Saves as new template with custom name
- Conditional Input Field - Appears only when "Create new template" is selected
- Visual Indicators - Icons and color coding for better UX
- Validation - Save button is disabled if creating new template without a name
- Responsive Design - Works well on different screen sizes
UX Flow:
- User clicks "Зберегти" (Save)
- Modal opens with two radio button options
- If "Create new" is selected, input field appears
- User can proceed with their choice or cancel
- System processes the save action accordingly
The interface is intuitive and follows modern UX patterns with clear visual hierarchy and helpful descriptions for each option.
Зроби на основі цього макету
I'll recreate this Ukrainian interface mockup based on the provided image, incorporating the save dialog functionality we built earlier.
I've recreated the Ukrainian interface mockup with the following key features:
Exact Match Elements:
- Navigation Tabs - All 5 tabs as shown in the mockup with proper Ukrainian text
- Main Title - "Зміна значень ознак"
Template Form - "Редагування шаблону" with:
- "Шаблон" field with "QA 123" value
- "Ознаки" dropdown with "Масова частка жиру (%)"
- Control buttons (+1, X, dropdown, grid icon)
- Action Buttons - "Скасувати" and "Зберегти"
Enhanced Functionality:
- Interactive Navigation - Clickable tabs with active states
- Functional Dropdown - Select component with multiple attribute options
- Save Dialog Integration - The "Зберегти" button triggers our previously built save options dialog
- Responsive Design - Adapts to different screen sizes
- Proper Styling - Matches the visual design with rounded corners, shadows, and spacing
The interface now combines the exact visual layout from your mockup with the functional save dialog system, creating a complete and interactive template editing experience.