Нижняя панель мобильной навигации.

• Простой дизайн • Анимация полностью создана в Figma • Тёмная и светлая темы • Более 20 меню #navigation #navbar #menu Открыть в Figma 👨 Дизайн-телега

Navbar Gallery

Здесь собрана галерея самых интересных решений с навигационными панелями. Вы точно найдёте, чем вдохновиться. 💾 Открыть Dropzz #Service

⭐️ UI Navbar Mobile App

5 шаблонов панели навигации для мобильных приложений 📁 FIG 💼 #Интерфейс #Figma ℹ️ ПОДРОБНЕЕ І 📥 СКАЧАТЬ

Вспоминаю тестовое задание от Самоката. Одна из задач была улучшить дизайн мобильного приложения для менеджера даркстора. Я проанализировал возможные несостыковки и нарисовал свое удобное и правильное решение. Фидбек был таким: «...рекомендуем поизучать крупные дизайн-системы и гайдлайны, чтобы понять, как правильно работают компоненты...». Мой дезигн с точки зрения логики был неплохим, но были допущены ошибки: title в navbar был расположен неправильно, шеврон для раскрытия шторки повернут не в ту сторону и тому подобное. Осознание этих ошибок пришло уже впоследствии, когда я изучил необходимые фундаментальные вещи, типа гайдов от Apple (Human Interface Guidelines) и Android (Material Design). Благодаря этому опыту, сейчас я могу точно сказать, что во время проектирования своих первых работ необходимо изучить гайдлайны. Что мы узнаем из гайдлайнов: Компоненты и их названия: если не понятно, что такое Floating Button или в каких 3 позициях может быть Bottom sheet, то точно стоит начать прямо сейчас Механика компонентов: их состояния, реакции на жесты, анимация Навигация в приложениях: в каких случаях нужен нижний тапбар, а в каких нет; как работает поиск Принципы инклюзивного дизайна: рекомендуемый минимальный размер шрифта, цветовая контрастность, что такое скринридер и как он работает Различия подходов Apple и Android в дизайне: полезно знать, хотя сейчас дизайн приложений часто становится более единообразным Правила и антипаттерны: в Material Design детально описано, как нужно и как не нужно проектировать, с аргументацией на основе исследований Эти знания повысят квалификацию и ценность как специалиста. Ниже ссылки на оригинальные ресуры на английском и на переведенный материал (спасибо @chim_mammedova ) Human Interface Guidelines 🍎(En) Material Design 3 🤖(En) Human Interface Guidelines 🍎(Ru) Material Design 2 🤖(Ru) #материалы #дизайн_системы 💬 Тултип