Панель навигации в iOS и Android

Чтобы лучше понимать как устроены приложения, буду тут собирать основные требования от операционных систем.

iOS

Отображается вверху. Панель навигации отображается в верхней части экрана приложения, под строкой состояния, и обеспечивает навигацию по ряду иерархических экранов.

Кнопка «Назад» подписывается названием предыдущего экрана. Когда отображается новый экран, кнопка «Назад», часто помеченная заголовком предыдущего экрана, появляется с левой стороны панели.

Содержит не только навигацию, но и управление. Иногда правая часть панели навигации содержит элемент управления, например кнопку «Изменить» или «Готово», для управления содержимым в активном экране.

Полупрозрачны и могут скрываться. Панели навигации являются полупрозрачными, могут иметь фоновый оттенок и могут быть настроены на скрытие, когда клавиатура находится на экране, происходит жест или размер экрана изменяется.

Заголовок может быть, а может и не быть. В большинстве случаев название помогает людям понять, на что они смотрят. Однако, если заголовок панели навигации кажется излишним, вы можете оставить заголовок пустым.

Используйте большой заголовок, если это важно. Большие заголовки никогда не должны конкурировать с контентом, но в некоторых приложениях большой жирный текст большого заголовка может помочь ориентировать людей при просмотре и поиске. Кроме того, большой заголовок переходит к стандартному заголовку, когда люди начинают прокручивать контент.

Избегайте переполнения навигационной панели слишком большим количеством элементов управления. Панель навигации должна содержать не более, чем текущий заголовок экрана, кнопку «Назад» и один элемент управления, который управляет содержимым экрана. Если вы используете сегментированный элемент управления на панели навигации, панель не должна содержать заголовок или любые другие элементы управления, кроме сегментированного элемента управления.

Используйте стандартную кнопку возврата. Люди знают, что стандартная кнопка «назад» позволяет им отслеживать шаги в иерархии информации. Однако, если вы реализуете пользовательскую кнопку «Назад», убедитесь, что она по-прежнему выглядит как кнопка «Назад», ведет себя интуитивно, соответствует остальному интерфейсу и последовательно реализована в вашем приложении.

Подумайте об использовании сегментированного элемента управления на панели навигации, чтобы сгладить информационную иерархию вашего приложения. Если вы используете сегментированный элемент управления на панели навигации, делайте это только на верхнем уровне иерархии и обязательно выбирайте точные заголовки кнопок на нижних уровнях.

Android

Панели отображаются вверху и могу пропадать при прокрутке:

Вот так выглядит стандартная:

Навигация в крайнем левом положении. Бургер-меню не обязательно. Заголовок правее навигации. Разместите контекстные действия справа от навигации. Поместите меню переполнения, если используется, в крайнее правое положение.

А вот так контекстная панель:

У контекстной панели используйте другой цвет

Панели могут быть двух видов: стандартная и крупная.

Используйте крупную, когда заголовки большие:


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Общение в команде

Тут у меня сегодня будет поток мыслей на тему коммуникации между разработчиком и дизайнером. Наблюдая и делая какие-то выводы, я сформулировал несколько принципов, которые должны улучшить коммуникацию. Это не точно, но у нас работает.

Общая цель и миссия

Начать стоит с того, чтобы сформулировать цель и миссию вместе с коллегами. Вот прям поговорили, записали, друг другу показали, кивнули. Звучит это очень банально, но мало команд это делает.

Беда в той команде, где люди идут к разным целям. Из этого вытекает следствие, что цель проекта должна быть выше, чем личная. Проблема в том проекте, в котором у дизайнера цель сделать портфолио, у программиста — поехать на конференцию в Амстердам с клёвым докладом, а у маркетолога — победить в конкурсе «Бренд года».

Я сам бывал и бываю таким дизайнером, который рисовал макеты для своего портфолио и не думал о цели компании. В итоге программисты говорят, что такое сделать сложно и меняют решения находу. Тебе ничего не остаётся, кроме того, как винить во всем программистов. Ведь все задуманное для портфолио осталось только на картинках. В бою проект оказался совсем другим. Проект в итоге получается кривым, а в портфолио лежат только джепеги. А это большой минус для портфолио дизайнера. Вы же часто слышали от дизайнера такую фразу:

«Программисты думают только о себе, а не о пользователях»

Чтобы исключить такие ситуации, кажется, надо ставить выше цель проекта и синхронизироваться с командой.

Общее решение

Самая большая ошибка, это пойти сразу рисовать макеты. Рисовать их неделю. Две. А потом бежать с этими макетами к разработчикам (вокруг макетов лучи нимба), а они в итоге говорят, что есть решение проще или еще хуже:

«Это сделать невозможно!»

Есть такой принцип: «Выкидывай бумажки в урну». Дизайнер делает дешевые прототипы и маленькие итерации в макетах, чтобы легче отказываться от своих решений. Если они не работают, конечно же. Решение на салфетке с ними проще. Кучу нюансов всплавает на уровне макетов, но основную концепцию лучше рисовать на салфетке.

Беда в команде, если программист и дизайнер не разговаривают. Следом за салфеткой, следует этап общения и обсуждения. У программистов есть много хороших идей и шикарное представление технических ограничений. Тогда и разработчик никогда не скажет:

«Ничего не знаю, так было в макете!»

Вообщем, решение должно быть общим, больше общения и будет всем хорошо.

Общая точка успеха

Определили точку успеха. Что будет являться успешным завершением проекта или задачи в первом подходе. Это избавит проект от лишних хотелок. И вы тогда никогда не услышите от программистов:

«У вас концепция постоянно меняется, достали»

Нужно чётко понимать, что будет достаточно сделать, чтобы решить задачу. Прям напишите это где-то и пускай все кивнут.

Равенство

Уважайте друг друга. Дизайнер является полноценным членом команды разработки. Разработчики — тоже дизайнеры. У вас без друг друга врядли что-то хорошее получится, уважайте профессию друг друга. Учитесь слушать и слышать, договариваться. Это чтобы не было таких фраз в вашу сторону:

«А почему у меня не спросили?»

Беда в том проекте, где дизайнер руководит разработчиками или наоборот. Это равные позиции в команде. Иначе дизайнер становится визуализатором, а программист говнокодером. А так быть не должно.


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Приложение для «Совести»

«Совесть» — это карта рассрочки в России. Раньше приложением нельзя было пользоваться пока не закажешь карту. Мотивация завести себе такую была мала. Теперь приложение показывает огромный выбор товаров и возможности карты, при этом аккуратно предлагает заказать её.

Умная лента товаров

В первом же экране приложение показывает товары, которые можно купить в рассрочку по карте. После подмешивает списки магазинов-партнёров, специальные предложения, акции и аккуратно предлагает заказать карту:

Если карта уже есть, приложение пытается сообщить всякую интересную информацию по вашим рассрочкам и не только:

Лента увлекает своим разнообразием, но если ищешь что-то конкретное, под рукой «умный» поиск. Если провалиться в конкретную категорию, приложение аккуратно показывает интересные товары из других категорий:

Приложение запоминает интересы пользователя, поэтому каждый получает ленту, собранную индивидуально для него. При этом она верстается автоматически по хитрым шаблонам и правилам, учитывающим пропорции и характер фотографий:

Карточка товара

Приложение показывает товар, рассказывает сколько будет стоить ежемесячный платёж, длительность рассрочки и количество баллов, которые вы получите после погашения. Ниже говорит где можно купить товар и у каких продавцов он тоже есть. Просит личные данные, если карта ещё не оформлена:

Карточка магазина

Приложение показывает все товары конкретного магазина и контакты:

Помимо карточек и ленты

Спроектированы около полусотни экранов и анимаций для выбора и просмотра товаров, поиска и фильтрации, разных этапов заказа и доставки карты, настройки профиля пользователя, погашения рассрочки, мотивации к дальнейшим покупкам, программы лояльности. Например:

В жизни — App Store и Google Play

Дизайн приложения сделан за шесть недель с 22 января по 14 марта 2018 года.
Илья Бирман — арт-директор и дизайнер, Иван Звягин — дизайнер.


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Париж

В марте слетали в Париж. Оставлю тут нетипичные фотографии без Эйфелевой башни.

Офигенно красивое метро внутри
Не без Веспы, конечно
Отель выбирали по постерам в коридорах
Тот самый выход из метро, который делал Гимар
Версаль впечатляет своими площадями
Навигация в Версальском парке
Просто красивая табличка
И не очень красивая
Дух Парижа
Уютный вход в метро
Билеты в Помпиду
И вид с крыши музея
Нумерация подьездов

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Радиоэмоции 1.0

Радиоэмоции — это плагин, который поможет узнать что думают о вашем контенте пользователи. Семь эмоций в наборе, любой текст на кнопках.

Пользователи оставляют свои эмоции, плагин считает их и выводит количество:

Счётчики подключаются к базе данных владельца сайта, авторизация работает по технологии Browser Fingerprint. Количество, текст и изображения эмоций можно менять.

Дизайн и идея — я, программист — Ольга Мохова.


Плагин бесплатный для всех: radioemoji.intuition.team


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Ранее Ctrl + ↓