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

ios vs android

Меню действий

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

iOS

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

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

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

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

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

В новой версии iOS (iOS 13) функция, называемая «контекстное меню», отображает связанные действия при нажатии и удержании элемента. Когда отображается контекстное меню, фон размыт. Вы можете использовать контекстные меню, чтобы дать людям доступ к дополнительным функциям, связанным с сущностями, не загромождая интерфейс. Это главное отличие от меню действий.

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

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

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

Android

В Android, однако, нижние листы появляются только при нажатии на иконку с тремя точками (это иконка Android для «дополнительных параметров»). И обычно появляются снизу только тогда, когда есть много вариантов возможных действий.

Выпадающее меню обычно располагается под элементом, который его генерирует.

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

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


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

3 декабря   ios vs android

Вкладки

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

iOS

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

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

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

Android

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

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


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

19 ноября   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
Ранее Ctrl + ↓