да, я уверен, что кто-то в Google подумал, что железнодорожная навигация была такой блестящей идеей для адаптивной навигации. Единственная проблема в том, что с точки зрения пользовательского опыта это неверно и упускает из виду тот факт, что у нас уже было решение для адаптивной навигации.
Эта статья не принесет мне много друзей в Google, но я предпочитаю иметь качественный UX в руках пользователей приложений, чем друзей из Google. Я собираюсь пройтись по некоторым примерам кода адаптивной навигации и объяснить, почему мы должны использовать решение, отличное от Rail-Navigation, с точки зрения UX.
Пример кода можно найти в этом репо:
Получите доступ к моим бесплатным материалам
Мой бесплатный код Flutter и ресурсы дизайна можно найти по адресу:
Разработка и проектирование интерфейсных приложений стали более зрелыми, так что начальное программное обеспечение больше не является средством начальной загрузки для новой работы, как это было в прошлом.
Если у вас нет понимания контекстов, сделанных экспертами, вы не сможете выполнить эту работу по запуску или сделать это потрясающее приложение с первого выхода на рынок.
Получение доступа к Medium memmebership поможет вам продвинуться на пути к первой работе Flutter Dev или к вашему первому классному приложению Flutter в магазинах приложений. И это так просто, как два маленьких шага:
1. Используйте мою ссылку подписки на Medium, чтобы присоединиться к Medium:
2. Щелкните ссылку моего профиля и подпишитесь на меня, чтобы получать немедленные уведомления по электронной почте, когда я публикую новую статью:
Фон UX
Мы не должны предполагать или, если это не так, мы должны исходить из наших предположений без исследования конечных пользователей для проверки наших предположений. Но вы, как я, сейчас занимаетесь начальной загрузкой без денежных средств. Где мы можем найти бесплатные ресурсы для исследования UX?
У некоторых из вас на полках может лежать книга о дизайне Дона Нормана. Исследовательская группа, основанная Доном Норманом и Якобом Нильсеном, называется Nielsen Norman Group:
Исследование не бесплатное, но ознакомиться с этими данными и его выводами можно в их бесплатных статьях об исследовании UX на этом веб-сайте.
Другой нюанс UX во Flutter - это наследие того времени, когда UX не был королем в мире родных приложений для Android. На этот раз в виде того, чем собственная панель приложений Android отличается от панели приложений iOS, и почему Apple использует нижнюю навигационную панель для приложений iOS на телефоне и ящик для iPad.
Стандартный способ использования телефонов - это портретная ориентация с пальцами в нижней части экрана, поэтому навигация с вкладками находится внизу, а не вверху на панели приложений в качестве элементов инструментов или даже раскрывающегося раскрывающегося меню!
Планшеты имеют совсем другой человеческий интерфейс в том смысле, что мы управляем ими одной или двумя руками по бокам планшета, а не внизу устройства, в отличие от телефонов.
Apple опередила Google в 2008 году, так как у них уже были некоторые исследования пользователей о том, как они использовали старые устройства Newton, которые Apple когда-то продавала как мобильные устройства. Google считает, что у них есть устаревший способ структурирования собственной панели приложений Android, который они как бы должны поддерживать. Но опять же, мы, практикующие качественный UX, не должны заставлять пользователя приложения работать с плохим UX-приложением в виде мертвой панели приложений на мобильном телефоне с раскрывающимся меню.
Позвольте мне показать вам несколько иллюстраций:
Этот первый набор визуальных элементов взят непосредственно из одного из пакетов flutter команды Material.io, чтобы дать вам представление о том, насколько глубоко укоренилось устаревшее меню панели приложений Android:
Он ненавидел и боялся железнодорожной навигации на планшете, Уф! У нас есть дополнительное пространство для брендинга и, следовательно, для изменения размера содержимого экрана в полном смысле слова устройства, но вместо этого мы предоставляем использование крошечной полоски меню, не намного больше, чем нижняя панель навигации с вкладками.
Не намного лучше кастомный скаффолд из пакета адаптивных компонентов от команды Material.io:
Это телефон, а теперь форма планшета:
Да, закрытый ящик наверху панели приложений выглядит чертовски привлекательно с точки зрения UX для пользователя планшетного приложения. Нет! А вот открытый ящик в версии для планшета:
А теперь позвольте мне показать вам чертовски правильную версию UX, мою!
Телефон:
А еще у нас есть удобная для планшетов версия с тем же кодом каркаса для шахты:
Хороший пользовательский интерфейс, удобный для планшетов, как и ожидает пользователь приложения для планшетов!
Теперь перейдем к коду.
Код
Итак, первоначальная идея адаптивной навигации была впервые предложена в примерах Flutter, в этом конкретном примере, где в папке 3rdparty вы можете найти первую приблизительную версию адаптивного каркаса:
Затем команда Material.io взяла это и расширила с помощью некоторых полезных компонентов, таких как точки останова, виджет адаптивного столбца и т. д. в наборе пакетов адаптивных компонентов:
Чтобы использовать мой образец кода, укажите это в спецификации публикации:
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
adaptive_components: ^0.0.2
adaptive_navigation: ^0.0.4
Итак, теперь давайте рассмотрим примеры. Сначала рассмотрим образец шаблона по умолчанию из пакета адаптивной навигации:
А вот настраиваемый каркас:
Теперь единственная разница между обоими каркасами - это добавленный блок:
Видите блок navigatorTypeResolver added? Я вношу в него одно небольшое изменение, чтобы обеспечить корректность UX:
И мы получаем полезные свойства UX на планшетах и компьютерах:
Итак, для чего же тогда нужна железнодорожная навигация? Я использую его для инфраструктуры, чтобы отобразить пункты меню в нижней панели навигации с вкладками в телефоне и постоянно открытой навигации по выдвижным ящикам в версиях приложения для планшетов и настольных компьютеров.
Заключение
Я прохожу через все препятствия, чтобы ваши приложения для флаттера и мои приложения для флаттера были доведены до совершенства. Пример кода можно найти в репозитории GitHub с рекомендациями по flutter nav:
Обо мне, Фред Гротт
Я реформированный разработчик приложений для Android и реформированный креатив с СДВГ.
В этом мире есть два типа людей: потребители и создатели. У потребителей есть все проблемы мира со всей этой нетворческой позицией в их мозгу. Креативщики живут более интересной яркой жизнью, полной творческих мечтаний, а не яда в головах.
Мои текущие бесплатные материалы по флаттеру так же быстро, как код и творческие ресурсы, находятся в моем репозитории code-with-me на GitHub по адресу:
И в Front End Development, и в Creative Life контексты и путь содержат жемчужины понимания, которые исходят не от вас. Чтобы получить это представление, вам нужен доступ к моим статьям в эти два простых шага:
1. Подпишитесь на платную подписку Medium по моей ссылке для подписки:
Обратите внимание: я действительно получаю сокращение дохода от каждой подписки на Medium, которая помогает мне создавать бесплатный код и творческие материалы, к которым вы получаете бесплатный доступ.
2. Щелкните мое имя в Medium и подпишитесь на меня, чтобы получать немедленные уведомления по электронной почте каждый раз, когда я публикую:
Мои самые популярные сообщения о флаттере и творческой жизни:
Пользовательские интерфейсы Flutter
Flutter DevOPS
Флаттер ООП и ФП
Творческая жизнь
Вы можете следовать за мной в
Https://www.xing.com/profile/Fred_Grott/cv
Https://www.linkedin.com/in/fredgrottstartupfluttermobileappdesigner/
