- PVSM.RU - https://www.pvsm.ru -
Вкладки являются одним из наиболее часто используемых и полезных компонент мобильных пользовательских интерфейсов. Вкладки обеспечивают быстрый и легкий доступ к различным частям приложения. В Android приложениях вкладки используются в различных формах. В некоторых случаях дизайн вкладок скопирован с других платформ, а в некоторых случаях используется устаревший дизайн старых версий Android. Это понятно, т.к. существует очень много различных реализаций вкладок в связи с тем, что дизайн Android не был определен в самом начале. Сейчас данная ситуация изменилась, и есть ориентир [1] для дизайна пользовательского интерфейса с вкладками.
В этой статье я хотел бы взглянуть на текущее состояние интерфейсов с вкладками и дать несколько советов, как сохранить единообразный стиль платформы.
Год назад была дискуссия [2] — где должны быть вкладки: сверху или снизу. Я думаю, что эта дискуссия закончилась. Вкладки наверх. Есть несколько причин для этого:
Недавно обновленное приложение Eurosport [3] дает нам прекрасный пример перечисленных выше пунктов. Взгляните на скриншоты ниже. Первый это старое приложение, ниже скриншот новой версии. Навигация по иерархии в старом приложении вызывала большее заблуждение. Во-первых, это выглядело неверно (больше о стиле вкладок ниже), так же очень трудно понять, как две панели вкладок связаны друг с другом. В новой версии нет мест, которые могут вызвать непонимания структуры приложения.
Стиль вкладок в Android очень отличается от других платформ. Этот дизайн был впервые внедрен в платформу в версии 3.0, но даже на поздних версиях ОС стиль вкладок выглядит устаревшим.
Вот несколько мыслей о стилизации Android вкладок:
Посмотрите эти два примера стилей Android вкладок. На первом один из редких случаев, когда вкладки содержат значки. Это приложения по умолчанию Android телефон на 4.1. В общем, я посоветовал бы избегать использования значков, если вы не уверены, что ваши значки будут без сомнения изображать функционал.
Ниже вы можете увидеть приложение Foursquare, в котором вкладки содержат текст.
Самый простой способ испортить вид вашего приложения — это имитировать глянцевые квадратные вкладки IOS. Следующим приложениям необходимо обновление интерфейса (Spiegel Online и PC-Welt).
Выбор цвета для вкладок на Android безграничен. Ни в коем случае все вкладки не должны иметь черный фон и синюю подсветку. Можно использовать бренд вашего приложения при выборе цвета вкладки!
Вкладки предназначены для использования при навигации между экранами в вашем приложение. Не используйте их, чтобы вызывать действия. Для действий используйте панели действий. Вот еще один пример плохого дизайна в приложении Spiegel Online. Часть из вкладок, на самом деле действия (например, обмен), которые не используются более в приложении. Это сбивает с толку и является неправильным использованием компонента вкладок.
К сожалению, в приложении Spiegel Online в значительной степени сделано неправильно все, что только можно сделать неправильно с вкладками. Мало того, что они выглядят не так, находятся в неправильном месте и содержат одновременно навигацию и действия, они так же не активируются корректно.
Если ваше приложение использует вкладки, то одна из вкладок всегда должна быть выделена когда вкладки видны. Не может быть ситуации, когда вкладки отображаются пользователю, но их использование не приводит к требуемому функционалу! Когда пользователь переходит глубже в приложении, вы должны скрывать панели вкладок. Панель вкладок без выделенной вкладки заставит ваших пользователи почувствуют себя потерянными.
На Android мы всегда должны быть осторожны с работой стэка активити (back stack) и функцией кнопки Назад. Перемещение между вкладками не считается изменением страниц. Большинство приложений, использующих вкладки, не добавляют изменений в стэк.
Существует веская причина, почему смена вкладок не вызывает изменений в стэк. Пользователи не чувствуют, что они закрыли экран, когда они переходят между вкладками.
Для осуществления ощущения, что все вкладки на одном экране, вы не должны использовать анимированные переходы активити по умолчанию между вкладками (пользователи ассоциируют данную анимацию с движением глубже в приложении). Вкладки рядом и любые анимации должны отражать это. Лучшая анимация — слайдинг. Это призывает пользователей использовать жесты для перемещения между вкладками.
Интерфейс с вкладками превосходен, если перемещения между вкладками не требует усилий. Хотя нажатия вкладок работают замечательно, слайдинг между ними смотрится еще лучше. Для слайд жеста пользователям не нужно добраться до верхней части интерфейса. Данный способ также более удобен и естественен для нас. Страница ведет себя так, как мы интуитивно ожидаем. Все интерфейсы вкладок должны всегда поддерживать слайд жест!
Вкладки очень приятно масштабируются под интерфейс планшета. Если вы используете вкладки в сочетании с панелью действий (action bar), то API позаботится о масштабировании за вас. Если на панели действий есть достаточно места, то вкладки переезжают туда, чтобы сэкономить место на экране. Приложение Google I//O является отличным примером.
Вкладки восхитительны, если использованы правильно. Это относительно простой компонент пользовательского интерфейса, однако очень легко использовать их неправильно. Следуйте инструкциям, и ваше приложение будет выглядеть и функционировать отлично. Ваши пользователи будут инстинктивно знать, как перемещаться в вашем приложении.
Автор: iklementiev
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/android/14419
Ссылки в тексте:
[1] ориентир: http://developer.android.com/design/building-blocks/tabs.html
[2] дискуссия: http://www.androiduipatterns.com/2011/07/tabs-top-or-bottom.html
[3] Eurosport: https://play.google.com/store/apps/details?id=com.eurosport
Нажмите здесь для печати.