Не упусти!

Круто, что тебе интересны наши курсы!

И именно за твой интерес и желание развиваться мы дарим тебе скидку!

Заполни данные ниже и на почту прийдет письмо с промокодом для тебя со скидкой на любой курс!

Отлично!

Ваш промокод на скидку отправлен на Ваш E-mail. Проверте пожалуйста Вашу почту.

Проверьте все папки в вашем почтовом ящике (спам, промоакции).

Упрощение поиска на мобильных экранах

Упрощение поиска на мобильных экранах

Я листал некоторые рисованные экраны с низкой точностью мобильного приложения для оплаты счетов (Да, некоторые из нас по-прежнему предпочитают сначала старомодный способ рисования на бумаге, чем цифровую версию с автоматическим выравниванием пикселей в Adobe XD). Затем я увидел это на нижней панели вкладок.

"Нет нет нет. Я считаю, что мы не можем этого сделать ».

«Что, функция« Поиск »? Почему?"

"Что ж. «Поиск» - это действие, очень похожее на «написать письмо» или «удалить». Действие не должно быть размещено на панели вкладок, потому что панели вкладок предназначены для навигации. Знаете ли вы, что говорится в Apple Tab Human Interface Guidelines (iOS) о панели вкладок ? »

"Просветите меня!"

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

«Поскольку вы упомянули iOS, а как насчет Android?»

"Ага! Название эквивалента панели вкладок в Android - «нижняя навигация». Отдельная нижняя панель приложений и кнопка с плавающим действием (FAB) обеспечивают действия в Android ».

«Любая цитата из Руководства по дизайну материалов Google по этому поводу?»

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

«Позвольте мне сообщить вам новости. Если то, что вы говорите правильно, то популярные приложения, такие как Instagram, Twitter, Tik Tok, Amazon Prime Video… никогда не будут одобрены Apple или Google в соответствующих магазинах приложений. Даже в Apple App Store есть «Поиск» на панели вкладок. Все они явно нарушают этот «закон». Теперь объясните , что мне «.

"Чего ждать?"

Похоже, мне нужно провести еще один раунд «крайне ненаучных исследований» среди приложений Android, установленных на моем телефоне, и некоторых приложений для iPad.

«Поиск», замаскированный под «Исследуй» или «Узнай»

Наиболее часто встречающиеся функции «Поиск» в панели вкладок имеют вид «Исследовать», «Обнаружить» или «Обзор».

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

 

В Instagram нет ярлыков на панели вкладок. Нажав значок «Увеличительное стекло» на панели вкладок, вы попадаете в раздел динамического содержимого с «Поиск» в верхней части страницы с другим значком «увеличительное стекло». Теперь у нас есть классический случай, когда есть два вхождения одного и того же значка на одной странице, которые представляют два разных действия (хотя и связанных). Обратите внимание, как два крана необходимы для поиска чего-либо.

Амазон Прайм Видео

 

Приложение Amazon Prime Video для Android. Нет ярлыков на панели вкладок. Обратите внимание на два экземпляра одного и того же значка «увеличительное стекло» на втором экране.

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

 

Behance, Pinterest и Airbnb

Приложение для Android Behance: на панели вкладок и панели поиска нет меток. Два экземпляра одного и того же значка «увеличительное стекло» на одном экране. Два крана для выполнения поиска. (2) Pinterest Android App: нет ярлыков на панели вкладок; «Поиск идей» в верхней строке поиска. Два крана для выполнения поиска. (3) Airbnb Android App: «Исследовать» на панели вкладок; Попробуйте <пункт назначения> на верхней панели поиска. Два экземпляра одного и того же значка «увеличительное стекло» на одном экране. Только один кран для выполнения поиска!

Третий экран на изображении выше - приложение Airbnb, и оно довольно интересное. В отличие от любых других приложений, описанных здесь, Airbnb не имеет отдельных «дома» и «поиск» на панели вкладок. Когда приложение запускается, выбранная по умолчанию вкладка «исследовать» со значком «увеличительное стекло» вместо обычного «Домой». В верхней строке поиска отображается еще один значок «увеличительное стекло». Теперь только одно нажатие на верхней панели поиска запустит клавиатуру для ввода пользовательской строки поиска, что является желаемым опытом.

                                                

Тик Ток, Си-Эн-Эн и Удеми

Тик Ток, (2) CNN и (3) приложения Udemy для Android. Размещение «Поиск» на панели вкладок.

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

Загадочный случай приложений iPadOS

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

По часовой стрелке сверху слева: (1) Apple App Store, (2) Apple TV, (3) Apple Music и (4) Apple Books. Все эти приложения с «Поиск» на панели вкладок; Панель «Поиск» сверху; два экземпляра значка поиска на одном экране и два касания для поиска пользовательской строки.

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

По часовой стрелке сверху слева: (1) Apple iTunes Store (2) Apple iTunes U (3) Vimeo (4) Apple Keynote - номера Apple и страницы Apple похожи на Keynote в подходе «Поиск».

Почему iTunes Store и App Store в iPadOS имеют разные возможности поиска? Apple знает только ...

Что мы должны сделать для более доступного поиска?

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

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

Посмотрите на скриншот Firefox Lite выше. Нажатие на значок панели вкладок «Поиск» немедленно запустит клавиатуру. Поисковая / адресная строка опускается с предварительно выбранной текущей адресной строкой. Любое нажатие клавиши сбрасывает выбранную строку поиска на ноль. На основе ввода пользователя появляются доступные предложения по доступной недвижимости. Контекстный поиск в выбранных приложениях (Facebook, YouTube, Instagram ...) также включены.

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

Автор: Анас К.А.

рекомендуемые статьи

Советы по графическому дизайну, по контенту Instagram Советы по графическому дизайну, по контенту Instagram...
Графический дизайн должен быть выдающимся, чтобы привлекать максимальное внимание и выделять ваш бренд и бизнес из общей массы....
Photoshop против Illustrator Photoshop против Illustrator
Если вы только начинаете работать дизайнером, выбор между Photoshop и Illustrator может оказаться непростой задачей. Ниже мы предоставим вам несколько фактов, чтобы решить, какой из этих продуктов Adobe больше подходит ...
50 блогов для вдохновения графическим дизайном 50 блогов для вдохновения графическим дизайном...
Вы хотите отдохнуть от своей работы, получить вдохновение и новое чувство перспективы. Но, по правде говоря, вы, вероятно, в конечном итоге прокрутите Instagram и потратите свое время, глядя на дома, людей и милых кошек....
Soft Skills Дизайнера Soft Skills Дизайнера
Чтобы стать профессионалом в творческой индустрии, вам необходимо иметь несколько вещей.
Вдохновение без копирования: как создать свою собственную оригинальную работу Вдохновение без копирования: как создать свою собственную оригинальную работу...
«Вызовет ли произведение, которое я создаю, чувство оригинала у зрителя?»
5 вещей, с которыми дизайнеры не столкнутся сегодня 5 вещей, с которыми дизайнеры не столкнутся сегодня...
Насколько мир дизайна отличается от прежнего