5 заметок с тегом

ios vs android

Лист действий

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

iOS

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

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

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

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

Android

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

Нажатие на холст и свайп вниз закрывает лист действия.


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

11 октября   ios vs android

Панель инструментов

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

iOS

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

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

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

Android

Нет такого понятия, как панель инструментов. Все действия над контентом хранятся в панели навигации, но есть такое понятие, как FAB, а точнее кнопка с плавающим действием. Расскажу про нее.

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

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

Расширенный FAB шире, и он включает в себя текстовую метку.


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

5 октября   ios vs android

Панель вкладок

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

iOS

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

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

Используйте панель вкладок строго для навигации. Кнопки панели вкладок не должны использоваться для выполнения действий.

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

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

Не удаляйте и не отключайте вкладку, когда ее функция недоступна. Если вкладки доступны в некоторых случаях, но не доступны в других, интерфейс вашего приложения становится нестабильным и непредсказуемым. Убедитесь, что все вкладки всегда включены, и объясните, почему содержимое вкладок недоступно. Например, если на устройстве iOS нет песен, вкладка «Моя музыка» в приложении «Музыка» объясняет, как загружать песни.

Android

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

Не используйте нижнюю панель навигации для менее чем трех пунктов назначения.

Вместо этого используйте вкладки.

Не используйте более пяти направлений. В этих случаях попробуйте вкладки или дровер навигации.

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

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

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

Нажатие в другой раздел всегда приводит к корневой странице раздела, без сохранения контекста.

При прокрутке нижняя панель навигации может появляться или исчезать.

Нижняя навигация может быть временно закрыта диалоговыми окнами, экранной клавиатурой или другими элементами. Навигация не может иметь горизонтальный скрол.


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

28 сентября   ios vs android

Строка состояния

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

iOS

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

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

Попробуйте временно скрыть строку состояния при отображении полноэкранного мультимедиа.
Строка состояния может отвлекать, когда пользователи пытаются сосредоточиться на медиа.
Временно скрыть эти элементы, чтобы обеспечить более захватывающий опыт. Например, приложение «Фотографии» скрывает строку состояния и другие элементы интерфейса, когда пользователь просматривает полноэкранные фотографии.

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

Android

В Android строка состояния содержит значки уведомлений и системные значки. На этом информация о строке заканчивается.


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

21 сентября   ios vs android

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

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

iOS

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

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

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

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

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

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

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

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

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

Android

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

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

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

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

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

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

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


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

15 сентября   ios vs android