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

ios vs android

Ошибка при запросе:
SELECT n.`ID`, n.`Title`, n.`IsFavourite`, a.`EntityID`, SUM(a.`HitCount`) HitCount FROM `e2BlogActions` a, `e2BlogNotes` n WHERE a.`Stamp` > 1621790764 AND a.`EntityID` = n.`ID` GROUP BY a.`EntityID` ORDER BY `IsFavourite` DESC, HitCount DESC LIMIT 10
Unknown column 'a.HitCount' in 'field list'

Виды действий

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

iOS

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

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

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

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

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

Android

В Android нет отдельного инструмента, там используют для этого меню действий.


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

2020   ios vs android

Управление выбором

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

iOS

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

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

Android

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

Меню, которое открывается на месте

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

Модальные диалоговые окна со списком вариантов выглядят так:


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

2020   ios vs android

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

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

iOS

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

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

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

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

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

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

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

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

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

Android

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

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

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

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


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

2019   ios vs android

Вкладки

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

iOS

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

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

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

Android

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

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


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

2019   ios vs android

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

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

iOS

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

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

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

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

Android

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

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


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

2019   ios vs android

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

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

iOS

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

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

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

Android

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

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

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

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


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

2019   ios vs android

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

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

iOS

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

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

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

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

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

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

Android

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

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

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

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

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

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

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

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

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

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


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

2019   ios vs android

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

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

iOS

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

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

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

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

Android

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


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

2019   ios vs android

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

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

iOS

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

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

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

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

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

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

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

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

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

Android

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

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

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

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

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

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

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


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

2019   ios vs android