Кнопка возврата в меню

Гид по дизайну кнопки возврата в начало страницы

Популярность отзывчивого веб-дизайна привела к широкому распространению формата длинных, состоящих из одной колонки веб-страниц. Причем это характерно не только для мобильных, но и для десктопных версий сайтов. В свою очередь, следствием такого дизайна стало появление так называемой кнопки возврата в начало страницы (back-to-top button), которая в один клик позволяла пользователям вернуться в верхнюю часть сайта.

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

  • открыть главное меню и выбрать новое направление поиска;
  • воспользоваться возможностями системы фильтров и сортировки;
  • ввести или изменить запрос в поле поиска.

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

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

Когда страница очень длинная (например, из-за бесконечного скроллинга), ее ручная прокрутка через экраны контента становится делом весьма утомительным. Таким образом, кнопка возврата к началу страницы оказывается очень и очень востребованной.

Ниже — 9 рекомендаций, в каких случаях следует использовать эту кнопку и как сделать ее действительно эффективной.

9 рекомендаций по созданию эффективных «back-to-top»-кнопок

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

2. Разместите кнопку в правом нижнем углу страницы и сделайте ее постоянной (даже при скроллинге она не должна исчезать из виду). Это именно то место, где пользователи и ожидают ее увидеть — оно хоть и находится где-то в стороне от основного контента, но остается заметным. Размещение кнопки в другом месте обычно делает ее более незаметной.

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

MedlinePlus.gov: предназначение одиноко стоящей стрелки слишком туманно. Текстовая надпись могла бы помочь преодолеть любое непонимание в данном контексте

Overstock.com: надпись «Назад к началу», размещенная рядом с иконкой, помогает объяснить назначение кнопки

Вариант, предложенный Вконтакте

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

USA.gov: повторяющиеся кнопки «Назад к началу» визуально захламляют страницу, что делает их еще более незаметными

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

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

7. Рассмотрите вариант использования отложенного появления кнопки, когда ссылка появляется только после того, как пользователь обнаружит свое желание отмотать страницу обратно (например, начинает перемещать ползунок полосы прокрутки вверх). Таким образом, кнопка будет появляться только тогда, когда в ней будет возникать необходимость, без риска закрыть собой какие-либо важные составляющие сайта.

Overstock.com: кнопка «К началу» появляется только тогда, когда пользователь начинает прокручивать страницу вверх (она, кстати, расположена в нижнем правом углу)

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

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

Альтернативы кнопке возврата к началу страницы

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

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

Etsy.com: Вместо кнопки возврата к началу этот сайт предлагает полноценное меню в футере сайта, так что пользователь может продолжить свое путешествие по сайту прямо отсюда

2. Липкие меню иногда более элегантное решение, чем back-to-top-кнопки. Если основная цель прокрутки — перейти к другим разделам сайта, то липкое меню, которое будет всегда под рукой, просто избавит людей от необходимости возвращаться.

Аналогично, если цель прокрутки вверх — получить доступ к функциям, как правило, размещенным в верхней части сайта (системы фильтров и сортировки, поиск и т.д.), вы можете просто-напросто закрепить эти инструменты, так что они будут оставаться доступными всегда, либо появляться тогда, когда человек начинает прокручивать страницу вверх.

Nordstrom.com: на этом сайте система фильтров закреплена в левом сайд-баре, что избавляет пользователей от необходимости возвращаться к началу страницы для выполнения большинства шоппинг-задач

3. Кнопка «Домой» (Home) на социальных сайтах часто возвращает пользователя к началу его главной страницы, которая по сути является страницей с длинной лентой новостей (фидом). Большинство людей ассоциируют клик по кнопке Home с возвратом к началу этой ленты.

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

Twitter.com: ссылка Home дублирует функцию кнопки возврата к началу

Заключение

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

lpgenerator.ru

Кнопка возврата в меню

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

В главном меню помимо кнопок навигации доступны следующие кнопки и символы.

Используйте эту кнопку, чтобы открыть меню Настройки.

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

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

Используйте эту кнопку для возврата на предыдущий экран.

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

Этот символ показывает состояние Bluetooth-подключения при использовании смартфона для подключения к сервисам TomTom.

Этот символ показывает уровень заряда аккумулятора в GO.

Этот символ показывает, что GO подключен к сервисам TomTom.

Этот символ показывает, что GO не подключен к сервисам TomTom.

Этот символ показывает, что GO подключен к MyDrive.

Этот символ показывает, что GO не подключен к MyDrive.

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

Подсказка. Можно выбрать типы указаний для озвучивания. Выберите Голоса в меню «Настройки» и выберите указания для озвучивания.

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

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

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

Подсказка. В зависимости от времени суток устройство переключается на дневную или ночную цветовую схему автоматически. Чтобы отключить эту функцию, выберите «Внешний вид», затем «Экран» в меню Настройки и выключите параметр Переключаться на ночную схему в темноте .

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

download.tomtom.com

Программы для Android. Плавающая панель навигации с полупрозрачными кнопками «Назад», «Домой» и «Меню» изменяемого размера

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

Однако, приложение, с которым я вас сегодня хочу ознакомить является приложением совсем другого рода. Программа Floating Soft Keys предназначена для того, чтобы отображать собственную панель навигации, состоящую из кнопок «Назад», «Домой» и «Меню».

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

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

Вы можете менять размер кнопок с помощью пункта меню «Button Size», менять их прозрачность с помощью ползунка «Transparency» и задавать интервал между кнопками (Button Spacing).

Также вы можете использовать панель в обоих ориентациях экрана «Horizontal orientation», делать невидимой кнопку перемещения панели «Invisible drag icon», показывать иконку приложения в панели уведомлений и запускать программу автоматически при старте системы «Statr at boot».

Кроме того, с помощью опции «Home long press action» вы можете задать функцию, которую будет выполнять кнопка «Домой» при долгом нажатии – не делать ничего, запускать Google Now или выполнять роль кнопки питания.

Приложение создавалось автором для смартфона Nexus 4, но оно должно без проблем работать на любых смартфонах и планшетах с операционной системой Android 2.2 и выше. Единственное ограничение – для своей работы Floating Soft Keys требует наличия root прав на устройстве.

Скачать Floating Soft Keys вы можете бесплатно в Google Play Маркете.

www.4tablet-pc.net

Веб-дизайн и поисковая оптимизация

Вебдизайн с jQuery — это очень просто!

• Фотогалерея jQuery — просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
Zoomy — лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery

Кнопка возврата в начало страницы

В предыдущей статье был рассмотрен способ плавного перемещения (скроллинга) по ссылкам на странице сайта. Частный вариант такого скроллинга — кнопка возврата в начало страницы.

Обычно кнопку возврата в начало страницы размещают в правом нижнем углу экрана и делают фиксированной, чтобы в любой момент можно было вернуться назад. Для этого достаточно задать положение кнопки следующими правилами CSS :
position:fixed; /*Расположение кнопки на странице: внизу справа с отступами 10рх*/
top:auto;
bottom:10px;
left:auto;
right:10px;

Для особо ленивых товарищей удобно вместо картинки кнопки использовать символы Юникода, оформив их с помощью правил CSS. О том, как выбрать подходящий символ-значок, рассказано в статье «Символы Юникода — полезные значки для сайта». Например, используя значок с кодом , можно получить следующую кнопку:

Оформление кнопки сделано с помощью следующих правил CSS:
border-radius:5px;
background-color:#ddd;
padding:8px 20px;
font-size:24px;
color:#333;
text-align:center;

Описанный способ имеет один недостаток: кнопка возврата наверх выводится постоянно. Чтобы она появлялась только при движении вниз по странице, можно использовать немного измененный скрипт — плагин jQuery liScrollToTop.

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

Установка плагина liScrollToTop

Как обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, конечно же, scrolltotop. Затем скачиваем архив и распаковываем его в созданную папку. Мы получим в ней два скрипта jquery-1.8.3.min.js, jquery.liScrollToTop.js и таблицу стилей liScrollToTop.css.

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

Картинку кнопки возврата размещаем в любом месте страницы (удобнее в конце) в теге DIV:

www.seomark.ru

MyMeizuClub

Где у MX6 кнопка «меню»?

sneaky4oe 20 янв 2017

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

Из примера приложений — старые вроде Llama.

artem1931 20 янв 2017

Меню настройки приложения. Кнопка «опции» — ещё одно название. В новых прогах она отображается тремя квадратами по стандартам дизайна, а вот в старых её порой нету вообще.

sneaky4oe 21 янв 2017

На оф. форуме за сутки не смогли найти эту кнопку. Да нафиг я вообще купил эту мобилу.

freek2005 22 янв 2017

Нет такой кнопки и не было никогда в смартфонах meizu

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

sneaky4oe 22 янв 2017

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

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

Lexxxi 22 янв 2017

maxgun 22 янв 2017

RAmirez 23 янв 2017

Если я не ошибаюсь

Если я вас правильно понял, то идет речь о меню настроек при открытых, по крайней мере базовых, приложениях, типо сообщения.

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

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

Антон92 25 янв 2017

Телефон вполне отличный) Кнопки «меню» нет. Можно скачать к примеру «Яндекс Лаунчер» Там есть выведенная кнопка «Меню»

mymeizuclub.ru