С панель с вкладками: Панель Вкладок

{{l10n_strings.DRAG_TEXT_HELP}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

Окно браузера — Opera Help

Основы

Браузер Opera состоит из пяти групп экранных элементов:

1. Панель меню
2. Панель вкладок
3. Кнопки навигации («Назад», «Вперед», «Обновить/Остановить», «Начальная страница»)
4. Объединенная адресная строка и строка поиска
5. Область просмотра

На панели меню для Mac доступны следующие элементы:

Menu (Меню)	Доступные действия
Opera	Просмотр информации о версии браузера Opera, доступ к настройкам, вход в учетную запись Opera, удаление личных данных, импорт данных просмотров, загрузка фонового рисунка и расширений, выход из браузера.
File (Файл)	Управление вкладками и окнами, открытие файлов и расположений, сохранение страниц на локальном диске или печать.
Edit (Правка)	Работа с текстом (копирование, вставка, выделение), поиск текста на страницах, проверка орфографии.
View (Вид)	Масштабирование, отображение или скрытие панели закладок или боковой панели расширений, просмотр в полноэкранном режиме, доступ к элементам начальной страницы (Экспресс-панель и новости), просмотр загрузок, управление расширениями и темами, доступ к менеджеру паролей и переключение инструментов разработчика.
History (История)	Переход назад и вперед, повторное отображение закрытых вкладок и окон, переход к недавно просмотренным страницам, просмотр всей истории работы в интернете.
Bookmarks (Закладки)	Отображение диспетчера закладок, создание закладки на текущую страницу, переход к страницам, добавленным в папки с закладками.
Developer(Разработчик)	Инструменты разработчика, просмотр исходного текста и диспетчер задач.
Window  (Окно)	Сворачивание текущего окна, масштабирование или выбор открытых окон и вкладок.
Help (Справка)	Доступ к страницам справки Opera, просмотр сочетаний клавиш и возможность сообщить о проблеме.

Для пользователей Windows и Linux главное меню содержит различные инструменты для работы с браузером. С его помощью можно открывать новые вкладки и окна, изменять масштаб страницы, выводить на экран служебные страницы Opera: Экспресс-панель, новости, закладки, загрузки, историю или настройки.

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

С помощью кнопок навигации можно переходить на необходимые страницы браузера:

Кнопка	Действие
	Назад на одну страницу.
	Вперед на одну страницу.
	Перезагрузить текущую страницу.
	Открыть начальную страницу.

С помощью объединенной адресной строки и строки поиска можно переходить на сайты и выполнять поиск в интернете. Можно ввести адрес сайта, например, http://www.opera.com/, или ключевые слова для поиска, например «браузер Opera». Подробнее об объединенной адресной строке и строке поиска можно прочитать здесь.

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

Боковая панель

Боковая панель Opera – это быстрый доступ к пространствам, мессенджерам, закладкам, мой Flow, персональным новостям, вкладкам, истории, расширениям, загрузкам и настройкам.

Боковая панель может быть закреплена и видна на каждой странице браузера, или вы можете скрыть ее для удобства при просмотре других страниц. Сделать это можно через Easy Setup (Простые настройки).

Управление боковой панелью Opera

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

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

Для доступа к настройкам боковой панели перейдите в меню 

Вкладки

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

Чтобы открыть новую вкладку, нажмите кнопку + на панели вкладок.

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

• Создать вкладку
• Обновить
• Обновить все вкладки
• Копировать адрес страницы
• Дублировать вкладку
• Зафиксировать вкладку
• Переместить вкладку в пространство
• Выключить звук на вкладке
• Выключить звук на остальных вкладках
• Закрыть вкладку
• Закрыть другие вкладки
• Закрыть вкладки справа
• Закрыть вкладки справа
• Закрыть повторяющиеся вкладки
• Сохранить все вкладки как папку на Экспресс-панели
• Открыть последнюю закрытую вкладку

Перемещение по вкладкам

Функция перемещения по вкладкам – это всплывающее окно с предварительным просмотром вкладок, которое позволяет переключаться между миниатюрами открытых вкладок. Нажмите и удерживайте нажатой клавишу Ctrl, а затем нажмите клавишу «Tab», чтобы вызвать функцию. Нажмите на нужную вкладку или отпустите Ctrl, чтобы переключиться на выделенную в данный момент вкладку.

Предпросмотр содержимого вкладки

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

1. Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
2. Нажмите Browser (Браузер) на боковой панели.
3. В разделе User interface (Интерфейс пользователя) установите флажок Show tab previews (Показывать миниатюры вкладок при наведении).

Закрытие вкладок

Чтобы закрыть вкладку, наведите на нее указатель мыши и нажмите кнопку x. Чтобы закрыть все вкладки, кроме текущей, удерживаяCtrl,нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по текущей вкладке и выберите Close Other Tabs (Закрыть остальные вкладки). Кроме того, можно закрыть все вкладки справа от текущей вкладки, нажав Close Tabs to the Right (Закрыть вкладки справа).

Если вы закрыли вкладку случайно или хотите открыть недавно закрытую вкладку, удерживаяCtrl,нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по вкладке и выберите Reopen Last Other Tabs (Открыть последнюю закрытую вкладку).

Фиксация вкладок

Фиксация вкладок позволяет Opera предотвратить случайное закрытие вкладок или выделить важные страницы. Зафиксированная вкладка не может быть закрыта. Чтобы закрепить вкладку на панели вкладок или открепить ее, удерживаяCtrl,нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по вкладке и выберите Pin Tab/Unpin Tab (Зафиксировать вкладку/Отменить фиксацию вкладки). Зафиксированная вкладка перемещается в левую часть панели вкладок, откуда ее можно быстро открыть.

Перемещение вкладок между пространствами

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

Чтобы переместить вкладку в другое пространство, щелкните левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) на вкладку и выберите «Переместить вкладку в пространство», затем выберите нужную рабочую область во всплывающем окне.

Управление вкладками

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

Если вы хотите открыть копию страницы в новой вкладке, удерживая Ctrl,нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по вкладке и выберите Duplicate Tab (Дублировать вкладку).

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

Все вкладки, открытые в окне, можно сохранить в качестве папки Экспресс-панели. Удерживая Ctrl,нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) на панели вкладок и выберите Save Tabs as Speed Dial Folder (Сохранить вкладки группой на Экспресс-панели). Внизу Экспресс-панели появится новая папка без названия.

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

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

Взаимодействовать с меню вкладок можно с клавиатуры. НажмитеCtrl+M, чтобы открыть или закрыть меню вкладок. Для перехода по списку вкладок нажимайте кнопки со стрелками. Нажмите Ввод, чтобы открыть вкладку из списка.

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

Контекстное меню

Контекстное меню появляется, когда вы, удерживаяCtrl,нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) на каком-либо элементе веб-страницы. Вид меню зависит от типа элемента (страница, текст, ссылка или картинка).

Контекстное меню страницы появляется, когда вы, удерживаяCtrl,нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) в любом месте страницы, где нет никаких ссылок, картинок или текста. В этом меню предлагаются различные варианты навигации (вернуться назад, перейти вперед или перезагрузить страницу), а также варианты сохранения страницы на Экспресс-панели или в закладках, просмотра исходного кода страницы, сохранения страницы в формате PDF и т.д.

Контекстное меню ссылки появляется, когда вы, удерживаяCtrl,нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) ссылку, и позволяет выбрать, как открыть или сохранить соответствующую страницу или адрес.

Контекстное меню изображения появляется, когда вы, удерживаяCtrl,нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) какую-либо картинку, и предлагает варианты открытия, копирования или сохранения этой картинки.

Если вы, удерживаяCtrl,нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) какое-либо изображение, с которым связана ссылка, в появившемся меню будут присутствовать пункты меню и для изображения, и для ссылки.

Изменение масштаба

Функция изменения масштаба в Opera позволяет упростить чтение мелкого шрифта. Чтобы изменить масштаб в Mac, выберите . Пользователям Windows или Linux следует перейти в 

Для увеличения и уменьшения также можно использовать сочетания клавишCtrl или⌘ ++/-.

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

1. Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
2. Нажмите Basic (Основные) на боковой панели.
3. В разделе Appearance (Оформление) вы найдете Page zoom (Масштаб страницы).
4. Выберите, в каком масштабе вам хотелось бы просматривать страницы.

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

Если нужно вернуться к первоначальному формату, пользователям Mac следует нажать  Пользователям Windows и Linux следует перейти в и выбрать Reset zoom (Сброс масштабирования) справа от +.

Полноэкранный режим

Opera позволяет просматривать страницы в полноэкранном режиме. В полноэкранном режиме панель меню не видна, однако панель вкладок и объединенная адресная строка и строка поиска остаются на экране.

Чтобы включить или выключить полноэкранный режим, выберите . Пользователи Windows и Linux могут перейти в и выбрать Full screen (Во весь экран).

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

Для выхода из полноэкраннного режима на любой платформе нажмите Esc.

Поиск текста на странице

Opera может искать ключевые слова в тексте на странице. Чтобы найти слово или фразу на странице, нажмите клавишиCtrl+F или⌘+F на клавиатуре. Введите текст в поле поиска.

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

Загрузка и управление файлами

Когда вы загружаете файл с сайта, справа под объединенной адресной строкой и строкой поиска появляется сообщение о загрузке. Это сообщение включает индикатор выполнения загрузки и исчезает при ее завершении.

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

Чтобы посмотреть подробный список загруженных файлов, запустить файлы из браузера или заново начать загрузку в случае обрыва соединения, выберите на Mac. В Windows и Linux перейдите в .

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

1. Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
2. Нажмите Browser (Браузер) на боковой панели.
3. В разделе Downloads (Загрузки) нажмите кнопку Change… (Изменить…).
4. Выберите папку, в которой должны сохраняться загруженные файлы, и нажмите Select (Выбрать).

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

разбираемся с Safari на Mac — Блог re:Store Digest

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

Вы можете моментально добавить на панель закладок Safari папку с набором открытых в данный момент вкладок. Для этого:

Шаг 1. Откройте раздел «Закладки» в строке меню.

Шаг 2. Воспользуйтесь возможностью «Добавить закладки для этих вкладок».

Шаг 3. Определите имя для папки с вкладками на панели закладок Safari.

Шаг 4. Подтвердите свое намерение с помощью кнопки «Добавить».

Интересный факт

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

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

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

Шаг 1. Откройте контекстное меню для конкретной папки.

Шаг 2. Выберите возможность «Открыть в новых вкладках».

Интересный факт

При открытии закладок из папки таким образом они не заменят, а дополнят те, что уже открыты.

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

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

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

Как использовать новую панель вкладок Safari в iOS 15

Apple теперь собирается предоставить вам выбор в iOS 15: придерживаться старого стиля вкладок Safari или использовать новую панель вкладок. Однако, прежде чем отказаться от нового, попробуйте.

Это не значит, что переработанная панель вкладок в Safari для iOS 15 имеет гораздо лучшие возможности на любом веб-сайте, чем раньше. У него действительно есть новый способ перемещения между сайтами, но на самом деле у него другой подход, незнакомый дизайн.

Apple хочет, чтобы вкладки не мешали вам, и это похвально. Более чем похвально то, что Apple представила новую функцию групп вкладок в iOS 15, это великолепно — и все по-другому. Все либо любят группы вкладок, либо у них просто нет причин даже знать о них.

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

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

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

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

Как переключаться между старым и новым дизайном вкладок

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

На вашем iPhone перейдите в «Настройки», затем прокрутите вниз до Safari. Есть простой переключатель, показывающий один значок для панели вкладок, один для одной вкладки.

Выбирайте между новым и старым дизайном Safari в iOS 15

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

Как использовать новую панель вкладок в iOS 15

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

Как перейти на новый сайт

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

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

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

Откройте новую панель вкладок, и вы можете перемещаться между открытыми вкладками

Как перемещаться между вкладками на панели вкладок

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

Смотрите также

У вас открыто более одной вкладки, у вас их намного больше. Мы не судим.

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

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

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

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

Новая панель вкладок также представляет собой удобный путь к отличной функции групп вкладок в iOS 15.

Вы можете выбрать вариант «Упорядочить вкладки по заголовку» или «Упорядочить вкладки по веб-сайтам».

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

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

Что вы не можете сделать, так это выбрать несколько вкладок и переместить их, все или ничего. По крайней мере, сейчас. Возможно, мы уже знаем что-то, что будет в iOS 16.

Панели вкладок — Панели — iOS — Руководство по человеческому интерфейсу

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

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

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

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

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

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

Руководство разработчика см. В UITabBar.

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

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

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

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

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

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

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

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

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

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

Ширина и высота цели (круговые глифы)

Ширина и высота цели (квадратные глифы)

Ширина цели (широкие глифы)

Высота цели (высокие глифы)

5 шагов для создания правильной панели вкладок | Кей ван Моурик | Life’s a Picnic

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

Составление списка и ранжирование направлений и функций приложений — всегда полезное упражнение. Особенно при определении того, какие функции заслуживают места на панели вкладок. Удобная панель вкладок должна иметь не менее 3 функций и не более 5. Это ограничение дизайна, и вы не должны выходить за его пределы.

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

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

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

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

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

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

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

Элемент:

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

Описание: Панель вкладок JET превращает элемент списка HTML в тематический, совместимый с WAI-ARIA, удобный для мобильных устройств компонент с расширенными интерактивными функциями.

Данные

Панель вкладок JET получает данные двумя разными способами. Первый способ — из DataProvider / TableDataSource. Есть несколько типов DataProvider / TableDataSource имеющихся в наличии:

• oj.ArrayDataProvider
• oj.CollectionTableDataSource

oj.ArrayDataProvider — используйте это, когда базовые данные являются объектом массива или observableArray. В случае observableArray панель вкладок будет автоматически реагировать когда элементы добавляются или удаляются из массива. См. Документацию для oj.ArrayDataProvider для получения дополнительных сведений о доступных параметрах.

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

ПРИМЕЧАНИЕ. PagingTableDataSource не поддерживается панелью вкладок.

Второй способ — использовать статический HTML-контент в качестве данных.

Обратите внимание, что любые манипуляции со статическим содержимым HTML, включая манипулирование содержимым, созданным с помощью Knockout (например, обновление observableArray в привязке foreach), не поддерживаются.

Пример статического содержимого

 

 

  
  Элемент 1  
  
  Пункт 2  
  
  Пункт 3  
 

  

Любой элемент списка можно отключить, добавив к нему класс oj-disabled .Как и при любом изменении DOM, после инициализации требует refresh () элемента.

Ключ

— это идентификатор, который однозначно идентифицирует элемент на панели вкладок.

• При использовании статического HTML это будет атрибут id из
• . Если не указан id , то компонент сгенерирует идентификатор и будет использовать его в качестве ключа.
• Когда используется источник данных, это будет атрибут id объекта данных элемента.

Иконки

Значки подсписок вставляются автоматически. Чтобы добавить другие значки к элементам списка, включите их в разметку и включите класс oj-tabbar-item-icon , как показано ниже:

  
  

    
    Foo  
  
 
  

Нажмите «Информация о конечном пользователе»

Информация для конечного пользователя клавиатуры

Отключенные элементы не получают фокуса клавиатуры и не допускают никакого взаимодействия.

Контекст элемента

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

Параметр контекста содержит следующие ключи:

Представление

Размер набора данных

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

Содержание предмета

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

Доступность

Отключенное содержимое: JET поддерживает доступный коэффициент контрастности яркости, как указано в WCAG 2.0 — Раздел 1.4.3 «Контрастность», в доступных темах. (См. Главу «Тематика» Руководства разработчика JET для получения дополнительной информации о том, какие доступны темы.) Обратите внимание, что в Разделе 1.4.3 говорится, что текст или изображения текста, которые являются частью неактивного пользователя компонент интерфейса не требует контрастности. Поскольку отключенный контент может не соответствовать минимальному коэффициенту контрастности требуется для включенного контента, его нельзя использовать для передачи значимой информации.

Направление чтения

Единственный поддерживаемый способ установить направление чтения (LTR или RTL) — это установить атрибут "dir" на элемент страницы. Как и в случае с любым настраиваемым элементом JET, в необычном случае направление чтения изменяется после инициализации, панель вкладок должна иметь вид refresh () ed, или страница должна быть перезагружена.

Анимация

Приложения могут настраивать анимацию, запускаемую действиями на панели вкладок, прослушивая animateStart / animateEnd события или переопределение классов стилей конкретных действий для анимированного элемента.См. Документацию AnimationUtils. класс для деталей.

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

Как встроить представления в панель вкладок с помощью TabView

Пол Хадсон @twostraws 3 сентября 2021 года

Обновлено для Xcode 13.2

SwiftUI TabView предоставляет эквивалент UITabBarController , позволяя пользователю переключаться между несколькими активными представлениями с помощью панели в нижней части экрана.

В базовой форме вы должны снабдить каждый элемент изображением и заголовком, при желании также добавить тег, если вы хотите программно контролировать, какая вкладка активна.Например, это создает два представления с разными изображениями, заголовками и тегами:

  struct ContentView: View {
    var body: some View {
        TabView {
            Текст ("Первый взгляд")
                .padding ()
                .tabItem {
                    Изображение (systemName: "1.circle")
                    Текст («Первый»)
                }
                .tag (1)
            Текст («Второй взгляд»)
                .padding ()
                .tabItem {
                    Изображение (systemName: "2.круг")
                    Текст («Второй»)
                }
                .tag (2)
        }
    }
}  

Загрузите это как проект Xcode

Вместо того, чтобы указывать текст и изображение по отдельности, вы также можете использовать представление Label , чтобы объединить их вместе:

  struct ContentView: View {
    var body: some View {
        TabView {
            Текст ("Первый взгляд")
                .padding ()
                .tabItem {
                    Ярлык ("Первый", systemImage: "1.круг")
                }
                .tag (1)

            Текст («Второй взгляд»)
                .padding ()
                .tabItem {
                    Ярлык ("Второй", systemImage: "2.circle")
                }
                .tag (2)
        }
    }
}  

Загрузите это как проект Xcode

Совет: В iOS 15 , а не , должны явно запрашивать заполненный вариант значков SF-символов, потому что система будет автоматически использовать их по мере необходимости.

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

  struct ContentView: View {
    @State var selectedView = 1

    var body: some View {
        TabView (выбор: $ selectedView) {
            Button ("Показать второй вид") {
                selectedView = 2
            }
            .обивка ()
            .tabItem {
                Ярлык ("Первый", systemImage: "1.circle")
            }
            .tag (1)

            Button ("Показать первый просмотр") {
                selectedView = 1
            }
            .padding ()
            .tabItem {
                Ярлык ("Второй", systemImage: "2.circle")
            }
            .tag (2)
        }
    }
}  

Загрузите это как проект Xcode

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

Спонсируйте взлом со Swift и войдите в крупнейшее в мире сообщество Swift!

Подобные решения…

Панель вкладок Quickstart | CodePath iOS Cliffnotes

  // AppDelegate.swift

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    
    var window: UIWindow?
    
    приложение func (приложение: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
            window = UIWindow (фрейм: UIScreen.main.bounds)
            
            // Настраиваем первый View Controller
            пусть vc1 = UIViewController ()
            vc1.view.backgroundColor = UIColor.апельсин
            vc1.tabBarItem.title = "Апельсин"
            vc1.tabBarItem.image = UIImage (имя: "сердце")
            
            // Настраиваем второй View Controller
            пусть vc2 = UIViewController ()
            vc2.view.backgroundColor = UIColor.purple
            vc2.tabBarItem.title = "Фиолетовый"
            vc2.tabBarItem.image = UIImage (имя: "звезда")
            
            // Настраиваем контроллер панели вкладок на две вкладки
            пусть tabBarController = UITabBarController ()
            tabBarController.viewControllers = [vc1, vc2]
            
            // Сделать контроллер панели вкладок корневым контроллером представления
            окно? .rootViewController = tabBarController
            окно? .makeKeyAndVisible ()
            
            вернуть истину
    }
    
    // ...
}  

  // AppDelegate.m

// ...

- (BOOL) приложение: (UIApplication *) приложение
didFinishLaunchingWithOptions: (NSDictionary *) launchOptions {
    
    self.window = [[UIWindow alloc] initWithFrame: [[UIScreen mainScreen] границы]];
    
    // Настраиваем первый View Controller
    UIViewController * vc1 = [[UIViewController alloc] инициализация];
    vc1.view.backgroundColor = [UIColor orangeColor];
    vc1.tabBarItem.title = @ "Апельсин";
    vc1.tabBarItem.image = [UIImage imageNamed: @ "сердце"];
    
    // Настраиваем второй View Controller
    UIViewController * vc2 = [[UIViewController alloc] инициализация];
    vc2.view.backgroundColor = [UIColor purpleColor];
    vc2.tabBarItem.title = @ "Фиолетовый";
    vc2.tabBarItem.image = [UIImage imageNamed: @ "звезда"];
    
    // Настраиваем контроллер панели вкладок на две вкладки
    UITabBarController * tabBarController = [[UITabBarController alloc] инициализация];
    [tabBarController setViewControllers: @ [vc1, vc2]];
    
    // Сделать контроллер панели вкладок корневым контроллером представления
    себя.window.rootViewController = tabBarController;
    [self.window makeKeyAndVisible];
    
    вернуть ДА;
}

// ...  

 TabBar {
    id: bar
    ширина: parent.width
    TabButton {
        текст: qsTr ("Домой")
    }
    TabButton {
        текст: qsTr ("Откройте для себя")
    }
    TabButton {
        текст: qsTr ("Активность")
    }
}

StackLayout {
    ширина: parent.width
    currentIndex: bar.currentIndex
    Элемент {
        id: homeTab
    }
    Элемент {
        id: discoverTab
    }
    Элемент {
        id: activityTab
    }
} 

 TabBar {
    ширина: родитель.ширина
    TabButton {
        текст: "Первый"
        ширина: implicitWidth
    }
    TabButton {
        текст: "Второй"
        ширина: implicitWidth
    }
    TabButton {
        текст: "Третий"
        ширина: implicitWidth
    }
} 

 TabBar {
    id: bar
    ширина: parent.width

    Repeater {
        модель: [«Первый», «Второй», «Третий», «Четвертый», «Пятый»]

        TabButton {
            текст: modelData
            ширина: Математика.макс (100, ширина бар / 5)
        }
    }
}