Макет IDGOAT: що вже добре, що виправити, як це виглядатиме
Ваш каркас має сильну основу: темна тема із золотим акцентом, логіка «Мій двір → Стадо → Картка тварини», вкладки ветеринарії та продуктивності. Нижче: розбір 8 скриншотів і доопрацьовані екрани в тій самій стилістиці.
Фірмовий стиль
Темний фон, золото, зелений блок для фактів. Впізнавано, добре читається в тіні.
Структура
Головна → Мій двір → Стадо → Картка → вкладки. Заказчик уже продумав шлях.
Дрібниці, що ламають довіру
Обрізані підписи кнопок, суміш мов, незрозумілі скорочення, порожні поля «00.0».
Екрани: було та стало
Оберіть екран і режим. Ліворуч телефон, праворуч що саме змінено й чому.
Що виправляємо в UX: знахідки зі скриншотів
| Екран | Проблема | Рішення |
|---|---|---|
| Стадо (картка) | Підписи кнопок «Зафіксувати охоту», «Зафіксувати покриття», «Генетичне дерево» не вміщаються: на скриншоті червоні позначки переповнення нижнього краю на 10 px. | Кнопки з мінімальною висотою 56 px і підписом у 2 рядки, іконка зверху. Підпис скорочено: «Охота», «Покриття», «Родовід». |
| Картка тварини | Статус «(запліднення)» у дужках і «Відлік: 19 днів» без пояснення, від чого відлік. | Плашка статусу «Запліднена, 19-й день» та смуга прогресу до очікуваного окоту. |
| Ветеринарія | Місяці в датах «КВТ / ІОТ / ІОТ» читаються як помилка, одиниці «5.0 ік». | Повні короткі назви місяців («14 квіт»), одиниці в мл із підказкою про препарат. |
| Ветеринарія | Великий червоний банер «Збір молока заборонено» хороший, але не каже до якої дати. | Банер лишається, додаємо «до 27 жовтня, 08:00» і кнопку «Деталі препарату». |
| Продуктивність | Суміш мов: Weight, Yield, Milk Analysis, Trends, Recent Activity поруч з українським. | Єдина мова інтерфейсу. Підписи «Вага», «Надій», «Аналіз молока», «Динаміка». |
| Продуктивність | Шість полів «00.0» і «–» виглядають як порожні, незрозуміло що вводити, одиниці вимірювання дрібні. | Поля з одиницями (%, pH, мСм), останнє значення сірим, числова клавіатура, крок «+» лишається. |
| Вибір профілю | Три однакові картки, без підказки, що можна змінити пізніше. | Додаємо рядок «Роль можна змінити в Профілі» і виділяємо фермера як основну. |
| Загальне | Сірий дрібний текст на темному фону на межі контрасту. | Допоміжний текст не темніший за #A9AEA9 (контраст 7.2:1 до фону). |
Мінімальний UI Kit для передачі в розробку
Те, що я збираю у Figma як бібліотеку: змінні кольору, шрифти, компоненти зі станами.
Кольори та контраст
Текст #F3F1EA: 14.4:1
На фоні: 9.0:1, текст на золоті #1D1A0D: 9.7:1
Текст на ньому: 10.7:1
Білий текст: 9.4:1
Компоненти та стани
Кнопка: основна, контурна, натиснута, вимкнена, завантаження. Поле: порожнє, заповнене, помилка, з одиницею. Плашка статусу: запліднена, у охоті, лактація, карантин.
Розміри: мінімальна ціль дотику 48 px, відступи кратні 4, радіус 12 і 16, шрифт 16 px базовий, 14 px допоміжний.
Користування «в полі»: сонце, рукавички, одна рука
Нижня зона
Головні дії (Додати препарат, Зафіксувати) тримаємо в нижній третині екрана, щоб діставати великим пальцем.
Контраст на сонці
Додаємо світлу тему для вулиці з перемикачем у Профілі, ті самі змінні кольору.
Швидкий вхід тварини
Пошук за номером і кнопка сканування RFID на кожному екрані стада, без заходу в меню.
Що буде в роботі
Етапи
1) Аудит усіх екранів і список правок. 2) Єдина мова та стани компонентів. 3) UI Kit у Figma. 4) Ключові екрани мобільної версії (iOS/Android). 5) Веб-дашборд. 6) Передача в розробку з описом станів.
Що потрібно від вас
Доступ до повного макету та список ролей (фермер, гість, партнер) з правами. Один раунд зустрічі для розбору логіки окотів і покриттів.