Скачать руководство по интерфейсам

Модель BX6-BT 6-канальное измерение Bluetooth® Amplifier Руководство по эксплуатации BX6-BT 6-канальный измеритель Bluetooth AmpLifier BX6-BT BX6-BT-OEM Измерение ampLifier BX6-BT и BX6-BT-OEM 6-канальный измерительный amplifier Работа от литий-ионного аккумулятора 3.6 В ….. В Встроенная схема зарядки аккумулятора Входы конфигурируются для полного, полумоста, четвертьмоста, 350–1000 Ом, 0 ……… В 1x Bluetooth 4.0 (LE) (GATT) или Bluetooth Classic ( СПП) …

Подробнее «Интерфейс BX6-BT 6-канальный измеритель Bluetooth Ampруководство по эксплуатации lifier »

Интерфейс Flux 6X6 In-Out USB-C DVS для Serrate DJ Pro Руководство пользователя Интерфейс Flux 6X6 In-Out USB-C DVS для Serato DJ Pro ВНИМАНИЕ! Во избежание возгорания или поражения электрическим током не подвергайте устройство воздействию воды или других жидкостей! Никогда не открывайте корпус! ВНИМАНИЕ! В целях вашей безопасности внимательно прочтите данное руководство по эксплуатации…

Подробнее «Руководство пользователя интерфейса reLOOP Flux 6X6 In-Out USB-C DVS для Serato DJ Pro»

Schneider Electric HMISTU HMISTU655 Человеко-машинный интерфейс Информация о продукте Терминалы Harmony HMISTU и HMISCU предназначены для использования в потенциально взрывоопасных средах в зонах 2/22. Они получили сертификат проверки типа: INERIS 13ATEX3013X Сертификат соответствия IECEx: IECEx INE16.0016X и сертификат проверки типа: CML 21UKEX4778X. На клеммы подается только напряжение 24 В пост. тока и …

Подробнее «Руководство по установке человеко-машинного интерфейса Schneider Electric HMISTU HMISTU655»

ZAMEL supla RNW-01 Интерфейс Wi-Fi с 4 входами скрытого монтажа Информация о продукте RNW-01 представляет собой интерфейс Wi-Fi с 4 входами скрытого монтажа производства ZAMEL Sp. z oo Устройство имеет номинальный объем питанияtage 230 В переменного тока, номинальная частота сети 50/60 Гц и номинальная потребляемая мощность 0.75 Вт. Он использует Wi-Fi 2.4 ГГц …

Подробнее «Руководство пользователя интерфейса ZAMEL supla RNW-01 для скрытого монтажа Wi-Fi с 4 входами»

Интерфейс нагрудного ремня для Invacare-Matrx Mini Back (номер модели: HIMINI) Руководство по установке Интерфейс нагрудного ремня HIMINI для Invacare Matrx Mini Back ДИЛЕР: В этом руководстве содержится важная информация по безопасности и установке, относящаяся к интерфейсу нагрудного ремня Motion Concepts для использования на IVCMatrx Mini Назад . Это руководство ДОЛЖНО быть передано пользователю …

Подробнее «Motion Concepts HIMINI Интерфейс нагрудного ремня для спины Invacare Matrx Mini. Руководство по эксплуатации»

MITSUBISHI ELECTRIC ME-AC-KNX-1 Интерфейс AC-KNX Информация о продукте Интерфейс Intesis ME-AC-KNX-1-V2 обеспечивает бесшовную интеграцию кондиционеров Mitsubishi Electric в системы управления KNX TP-1 (EIB). Он совместим со всеми моделями кондиционеров бытовой и линейки Mr. Slim, выпускаемых Mitsubishi Electric. Основные функции этого интерфейса включают полностью…

Подробнее «MITSUBISHI ELECTRIC ME-AC-KNX-1 Руководство по установке интерфейса AC/KNX»

Интерфейс человек-машина серии iXP Интерфейс человек-машина LSIS Серия iXP Интерфейс человек-машина LSIS Серия iXP предназначена для обеспечения максимальной производительности. LSIS стремится максимизировать прибыль клиентов и благодарна за то, что является вашим надежным партнером. Информация о продукте Название продукта: Интерфейс человек-машина LSIS Номера моделей серии iXP: …

Подробнее «Руководство пользователя человеко-машинного интерфейса LSIS серии iXP»

Контроллер EATON HMI Интерфейс для полностью автоматического AFR Информация о продукте Продукт представляет собой систему фильтрации, для работы которой требуется воздух и электроэнергия. Он поставляется с портом воздушного фильтра/регулятора (1/2 NPTI) и разъединителем, установленным на панели внутри корпуса автоматики. Системе требуется подача чистого, сухого, несмазанного воздуха с…

Подробнее «Интерфейс ЧМИ контроллера EATON для руководства по полной автоматической установке AFR»

Интерфейс Echoflex ElahoAccess законченview Интерфейс ElahoAccess — это коммерческий интерфейс управления, для работы которого требуется вспомогательное питание 24 В постоянного тока. Он предназначен для использования внутри помещений и должен устанавливаться в соответствии со всеми национальными и местными нормами для электрооборудования. Спецификация продукта Требования к питанию: 24 В пост. тока Размер провода: Два провода сечением 1.5 мм2 (16 AWG) для …

Подробнее «Руководство по установке интерфейса Echoflex ElahoAccess»

Руководство по установке и эксплуатации Интерфейс Wiegand HmIP-FWI 12 В GND Дверной звонок Клавиатура Комплект поставки Количество Описание 1 Интерфейс Homematic IP Wiegand 1 Руководство по эксплуатации Документация © 2022 eQ-3 AG, Германия Все права …

Подробнее «Руководство пользователя интерфейса Homematic IP HmIP-FWI Wiegand»

Интерфейсы (4)

В этом разделе можно найти все, что связано с интерфейсами. Описание RS-232, RS-485, IrDA, Bluetooth, USB, SPI, I2C, SMbus, JTAG и т.д. Раздел пополняется.

Болл С. - Аналоговые интерфейсы микроконтроллеров

  • Автор: Болл С.
  • Издательство: Додэка-XXI
  • Качество: Отличное
  • Год: 2007
  • Страниц: 360
  • Формат: djvu
  • Размер: 6,2Мб

Книга «Аналоговые интерфейсы микроконтроллеров» автор Болл Стюарт Р. представляет собой практическое руководство по подключению разных аналоговых, периферийных устройств к микроконтроллерам, микропроцессорам и компьютерам. В книге автор рассказывает о…

Семенов Б.Ю. - Шина I2C в радиотехнических конструкциях

  • Автор: Семенов Б.Ю.
  • Издательство: Солон-Р
  • Качество: Нормальное
  • Год: 2002
  • Страниц: 190
  • Формат: djvu
  • Размер: 1,4Мб

В книге «Шина I2C в радиотехнических конструкциях» автор Семенов Б.Ю. рассказывает о том, как устроена шина, приводит адреса некоторых микросхем. После можно ознакомиться с остальными представителями микросхем, на борту которых есть…

Кузьминов А.Ю. - Интерфейс RS232. Связь между компьютером и микроконтроллером

  • Автор: Кузьминов А.Ю.
  • Издательство: Радио и связь
  • Качество: Нормальное
  • Год: 2004
  • Страниц: 168
  • Формат: djvu
  • Размер: 3,1Мб

В книге «Интерфейс RS232. Связь между компьютером и микроконтроллером» автор Кузьминов А.Ю. рассказывается о принципах приема и передачи информации между 51 совместимым микроконтроллером и компьютером по интерфейсу RS232. В книге можно найти много схем для реализации связи микроконтроллера и…

Гук М. - Аппаратные интерфейсы ПК

  • Автор: Гук М
  • Издательство: Питер
  • Качество: Ниже среднего
  • Год: 2002
  • Страниц: 528
  • Формат: doc
  • Размер: 10,3Мб

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

Все права защищены. При указании активной, индексируемой ссылки на сайт MICROPAS.RU, полное или частичное использование материалов разрешается. Уважайте чужие труды! Не забывайте проставлять ссылки! Правообладателям
© Ерёмин Антон Юрьевич 2013-2021гг.

Текст ГОСТ Р ИСО 9241-151-2014 Эргономика взаимодействия человек-система. Часть 151. Руководство по проектированию пользовательских интерфейсов сети Интернет

ГОСТ Р ИСО 9241-151-2014

НАЦИОНАЛЬНЫЙ СТАНДАРТ РОССИЙСКОЙ ФЕДЕРАЦИИ

ЭРГОНОМИКА ВЗАИМОДЕЙСТВИЯ ЧЕЛОВЕК — СИСТЕМА

Часть 151

Руководство по проектированию пользовательских интерфейсов сети Интернет

Ergonomics of human-system interaction. Part 151. Guidance on World Wide Web user interfaces

ОКС 13.180

35.240.99

Дата введения 2015-12-01

Предисловие

1 ПОДГОТОВЛЕН Автономной некоммерческой организацией «Институт безопасности труда» на основе собственного перевода на русский язык англоязычной версии документа, указанного в пункте 4

2 ВНЕСЕН Техническим комитетом по стандартизации ТК 201 «Эргономика, психология труда и инженерная психология»

3 УТВЕРЖДЕН И ВВЕДЕН В ДЕЙСТВИЕ Приказом Федерального агентства по техническому регулированию и метрологии от 10 сентября 2014 г. N 1057-ст

4 Настоящий стандарт идентичен международному стандарту ISO 9241-151:2008* «Эргономика взаимодействия человек — система. Часть 151. Руководство по пользовательским веб-интерфейсам» (ISO 9241-151:2008 «Ergonomics of human-system interaction — Part 151: Guidance on World Wide Web user interfaces», IDT).

________________

* Доступ к международным и зарубежным документам, упомянутым в тексте, можно получить, обратившись в Службу поддержки пользователей. — .

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

5 ВВЕДЕН ВПЕРВЫЕ

6 ПЕРЕИЗДАНИЕ. Август 2019 г.

Правила применения настоящего стандарта установлены в статье 26 Федерального закона от 29 июня 2015 г. N 162-ФЗ «О стандартизации в Российской Федерации«. Информация об изменениях к настоящему стандарту публикуется в ежегодном (по состоянию на 1 января текущего года) информационном указателе «Национальные стандарты», а официальный текст изменений и поправок — в ежемесячном информационном указателе «Национальные стандарты». В случае пересмотра (замены) или отмены настоящего стандарта соответствующее уведомление будет опубликовано в ближайшем выпуске ежемесячного информационного указателя «Национальные стандарты». Соответствующая информация, уведомление и тексты размещаются также в информационной системе общего пользования — на официальном сайте Федерального агентства по техническому регулированию и метрологии в сети Интернет (www.gost.ru)

Введение

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

Пользовательские веб-интерфейсы имеют специфические проблемы пригодности использования:

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

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

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

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

Существует множество руководств по практической работе, многие непосредственно в сети, но эти руководства иногда противоречат друг другу и трудно выполнимы на практике. Имеется ряд международных стандартов, которые, не описывая конкретно пользовательские веб-интерфейсы, предоставляют полезное руководство по пригодности использования и проектированию пользовательских интерфейсов: ИСО 9241-11, ИСО 9241-17, ИСО 9241-110 содержат эргономическое руководство по проектированию программных пользовательских интерфейсов в общем, ИСО 9241-210 — по достижению пригодности использования путем внедрения человеко-ориентированного проектирования в течение всего жизненного цикла интерактивных систем, серия стандартов ИСО 14915 — по вопросам проектирования мультимедийных и гипермедийных пользовательских интерфейсов.

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

Важная цель в разработке пользовательских веб-интерфейсов состоит в том, чтобы сделать их доступными для самого широкого круга пользователей, включая людей с ограниченными возможностями. Настоящий стандарт не охватывает всех аспектов доступности пользовательских веб-интерфейсов. Общие рекомендации по обеспечению и улучшению доступности к оборудованию, программному обеспечению и услугам информационно-коммуникационных технологий (ICT) изложены в ИСО 9241-20, подробное руководство по доступности программного обеспечения для пользовательских интерфейсов изложено в ИСО 9241-171, в то время как «Инициатива в области обеспечения Интернет-доступности» (WAI — Web Accessibility Initiative) Консорциума W3C представляет руководство конкретно для информационного наполнения сети, агентов пользователя и инструментальных средств разработки веб-сайтов.

ИСО 9241 был первоначально разработан как международный стандарт, состоящий из семнадцати частей по эргономическим требованиям к проведению офисных работ с использованием видеодисплейных терминалов. В рамках пересмотра стандартов было принято решение реструктурировать серию стандартов ИСО 9241 с целью расширения области его применения, включить другие относящиеся к этому вопросу стандарты и сделать его более пригодным для использования. Название пересмотренного ИСО 9241 «Эргономика взаимодействия человек — система» отражает эти изменения и приводит стандарт в соответствие с общим названием и областью деятельности Технического комитета ISO/TC 159, Подкомитета N 4. Пересмотренный стандарт представляет собой ряд серий стандартов, пронумерованных следующим образом: серия 100 описывает интерфейсы на основе программных средств, серия 200 — проектирование, ориентированное на человека, серия 300 — видеодисплеи, серия 400 — устройства физического ввода, и так далее. В приложении А приведен краткий обзор всей серии стандартов ИСО 9241.

Настоящий стандарт идентичен международному стандарту, разработанному Техническим комитетом ISO/TC 159 «Эргономика».

1 Область применения

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

Рекомендации, данные в настоящем стандарте, включают следующие аспекты проектирования пользовательских веб-интерфейсов:

— решения по проектированию архитектуры и стратегия проектирования;

— разработка информационного наполнения;

— навигация и поиск;

— представление информационного наполнения.

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

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

2 Нормативные ссылки

В настоящем стандарте использованы нормативные ссылки на следующие стандарты:

ISO 9241-11:1998, Ergonomic requirements for office work with visual display terminals (VDTs) — Part 11: Guidance on usability [Эргономические требования к офисным работам с использованием видеодисплейных терминалов (VDT). Часть 11. Руководство по пригодности использования]

________________

Заменен на ISO 9241-11:2018.

ISO 9241-12, Ergonomic requirements for office work with visual display terminals (VDTs) — Part 12: Presentation of information [Эргономические требования к офисным работам с использованием видеодисплейных терминалов (VDT). Часть 12. Представление информации]

________________

Заменен на ISO 9241-125:2017.

ISO 9241-13, Ergonomic requirements for office work with visual display terminals (VDTs) — Part 13: User guidance [Эргономические требования к офисным работам с использованием видеодисплейных терминалов (VDT). Часть 13. Руководство пользователя]

ISO 9241-14, Ergonomics requirements for office work with visual display terminals (VDTs) — Part 14: Menu dialogues [Эргономические требования к офисным работам с использованием видеодисплейных терминалов (VDT). Часть 14. Диалоги меню]

ISO 9241-15, Ergonomic requirements for office work with visual display terminals (VDTs) — Part 15: Command dialogues [Эргономические требования к офисным работам с использованием видеодисплейных терминалов (VDT). Часть 15. Диалоги команд]

ISO 9241-16, Ergonomic requirements for office work with visual display terminals (VDTs) — Part 16: Direct manipulation dialogues [Эргономические требования к офисным работам с использованием видеодисплейных терминалов (VDT). Часть 16. Диалоги непосредственного управления]

________________

Отменен 02.10.2018.

ISO 9241-17, Ergonomic requirements for office work with visual display terminals (VDTs) — Part 17: Form-filling dialogues [Эргономические требования к офисным работам с использованием видеодисплейных терминалов (VDT). Часть 17. Диалоги заполнения формы]

________________

Заменен на ISO 9241-143:2012.

ISO 9241-20, Ergonomics of human-system interaction — Part 20: Accessibility guidelines for information/ communication technology (ICT) equipment and services [Эргономика взаимодействия человек — система. Часть 20: Руководство по доступноcти оборудования и услуг информационно-коммуникационных технологий (ICT)]

ISO 9241-110, Ergonomics of human-system interaction — Part 110: Dialogue principles (Эргономика взаимодействия человек — система. Часть 110: Принципы диалога)

ISO 9241-171, Ergonomics of human-system interaction — Part 171: Guidance on software accessibility (Эргономика взаимодействия человек — система. Часть 171: Руководство по доступности программного обеспечения)

ISO 9241-303, Ergonomics of human-system interaction — Part 303: Requirements for electronic visual displays (Эргономика взаимодействия человек — система. Часть 303: Требования к электронным видеодисплеям)

ISO 9241-210:2010, Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems (Эргономика взаимодействия человек — система. Часть 210. Человеко-ориентированное проектирование интерактивных систем)

________________

Заменен на ISO 9241-210:2019.

ISO 14915-1, Software ergonomics for multimedia user interfaces — Part 1: Design principles and framework (Эргономика мультимедийных пользовательских интерфейсов. Часть 1. Принципы проектирования и структура)

ISO 14915-2, Software ergonomics for multimedia user interfaces — Part 2: Multimedia navigation and control (Эргономика мультимедийных пользовательских интерфейсов. Часть 2. Навигация и управление мультимедийными средствами)

ISO 14915-3, Software ergonomics for multimedia user interfaces — Part 3: Media selection and combination (Эргономика программного обеспечения для мультимедийных интерфейсов пользователя. Часть 3. Выбор и объединение носителей)

________________

Отменен 11.09.2018.

WCAG 1.0, Web Content Accessibility Guidelines 1.0, W3C Recommendation, World Wide Web Consortium (W3C) (MIT, INRIA, Keio) [Рекомендации по доступности содержимого Всемирной сети 1.0, Рекомендация Консорциума W3C (MIT, INRIA, Keio)]

WCAG 2.0, Web Content Accessibility Guidelines 2.0, World Wide Web Consortium (W3C) (MIT, ERCIM, Keio) [Рекомендации по доступности содержимого Всемирной сети 2.0, Консорциум W3C (MIT, ERCIM, Keio)]

________________

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

3 Термины и определения

В настоящем стандарте применены следующие термины с соответствующими определениями:

3.1 поиск с использованием операторов Буля (boolean search): Поисковое предписание с использованием логических операторов.

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

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

3.3 концептуальная модель информационного наполнения (conceptual content model): Абстрактная модель, описывающая понятия области приложения, отношения между этими понятиями и операции, которые выполняются на основе этих понятий или отношений.

3.4 информационное наполнение сети (контент) (content, web content): Набор объектов информационного наполнения (пользовательского веб-интерфейса).

3.5 объект информационного наполнения (content object): Интерактивный или неинтерактивный объект, содержащий информацию, представленную в виде текста, изображения, видео- или звуковыми материалами либо другими типами носителей.

3.6 динамическая навигационная ссылка, автоматическая ссылка (dynamic navigation link, computed link): Ссылка, рассчитываемая динамически системой, основанной, например, на содержании базы данных.

3.7 окно-рамка (фрейм) (frame): Механизм для разделения окна браузера на отдельные окна, каждое из которых отображает различные документы или различные части одного документа.

3.8 набор фреймов (frameset): Набор фреймов и соответствующая структура их расположения, которая представлена в одном окне браузера.

3.9 глобальная навигация (global navigation): Набор навигационных ссылок, имеющихся на всех страницах веб-сайта.

3.10 домашняя страница (home page): Стартовая страница, начальная страница, главная страница, через которую пользователи обычно входят на веб-сайт и чей URL обычно указывается или обозначается ссылкой как основной веб-адрес организации или лица.

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

3.11 объект взаимодействия (interaction object): Компонент пользовательского интерфейса сети, принимающий ввод данных пользователя.

Пример Ссылки, кнопки, поля ввода, окна флажков или списки выбора.

3.12 интернет (Internet): Взаимно связанные по всему миру компьютерные системы и компьютерные сети, соединенные через шлюзы, которые позволяют передачу данных между ними.

3.13 интранет (intranet): Компьютерная сеть, использующая стандарты Интернета, доступ в которую ограничен членами конкретной организации, например, компании.

3.14 страница, отмеченная закладкой (landmark page, landmark): Главная страница в структуре навигации, к которой можно получить прямой доступ с многих других страниц.

3.15 ссылка, гиперссылка (link, hyperlink): (Веб)-ссылка в некоторой части одного документа на некоторую часть другого документа или другую часть того же документа.

Примечание — Ссылки также называют гиперссылками, потому что системы гипертекста и гипермедиа активно используют это понятие. Ссылки используются для активации навигации. Они представлены, например, как тэги элементов в языке гипертекстовой разметки (HTML). Понятие ссылок также описано в ИСО 14915-2 в контексте пользовательских мультимедийных интерфейсов.

3.16 сигнальная метка ссылки (link cue): Текстовое или графическое представление ссылки, содержащее информацию о цели ссылки.

3.17 медиаобъект (media object): Компонент Web-документа, который представлен единственным типом медиаданных.

Пример 1 Текстовый объект, представляющий обсуждение по некоторой теме.

Пример 2 — Графический объект, представляющий изображение некоторого человека.

Пример 3 Звуковой объект, представляющий собой песню.

Примечание — Дано в сокращении из ИСО 14915-2:2003, определение 3.3.

3.18 компонент навигации (navigation component): Группа навигационных элементов, размещенных вместе.

3.19 профиль (профиль пользователя) (profile, user profile): Набор признаков, используемых системой, которые являются уникальными для конкретного пользователя/группы пользователей.

3.20 заранее заданный профиль пользователя (predefined user profile): Конфигурация, основанная на стереотипе или сочетании стереотипов.

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

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

3.21 представление (rendering): Действие, посредством которого представлена информация в документе.

Примечание — Это представление сделано в форме, наиболее соответствующей условиям окружающей обстановки (например устно, визуально, в печатном виде).

3.22 навигация по сети (веб-навигация) (navigation, Web navigation): Перемещение (в сети) между или внутри веб-страниц или перемещение в пределах некоторого фрагмента, представленного на странице (например, внутри конкретного медиаобъекта), которое пользователи выполняют, чтобы найти определенную функцию или информацию.

Примечание 1 — В настоящем стандарте термин «навигация» используется как удобная короткая форма термина «веб-навигация» (см. также ИСО 14915-2).

Примечание 2 — Шаги навигации часто инициируются активацией какой-либо ссылки.

3.23 навигационная структура, структура веб-навигации (navigation structure, Web navigation structure): Структура Всемирной сети, составленная из элементарных или составных сегментов представления (таких как страницы или медиаобъекты, содержащиеся на странице) и ссылок, определяющая все возможные маршруты, по которым пользователи могут перемещаться в пользовательском веб-интерфейсе.

3.24 программа для чтения с экрана (screen reader): Вспомогательное программное обеспечение, которое позволяет пользователям ознакомиться с содержанием на экране без необходимости просмотра видеодисплея.

Примечание 1 — Программа для чтения экрана обычно выдает звуковое представление текста или шрифт Брайля.

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

3.25 карта сайта (site map): Текстовый или графический обзор полной навигационной структуры веб-сайта.

3.26 экран-заставка (splash screen): Временная страница, показанная до домашней страницы, когда впервые производится доступ к веб-сайту.

3.27 всплывающая подсказка (tool tip): Маленькое всплывающее окно, которое появляется, когда курсор мыши наведен на объект взаимодействия, и показывает пояснительный текст или справочную информацию.

3.28 транзакция (transaction): Действие, которое выполняет добавление, обновление или удаление информации.

3.29 агент пользователя, агент пользователя сети (Web user agent, user agent): Программное обеспечение конечного пользователя, которое позволяет пользователям взаимодействовать с отдаленной системой через интернет-протоколы.

Примечание — Характерным типом агента пользователя является браузер.

3.30 унифицированный индификатор ресурса (uniform resource locator URL): Механизм для идентификации ресурсов в Интернете (таких как веб-страницы) путем указания адреса ресурса и используемого протокола доступа.

Примечание — Официальный технический термин, как определено Рабочей группой проектирования Интернет (IETF) — унифицированный идентификатор ресурса (URI), по отношению к которому URL является подгруппой.

3.31 веб-страница (Web page): Последовательное представление объекта или набора объектов информационного наполнения и связанных с ними объектов взаимодействия через агента пользователя.

3.32 веб-сервис (Web service): Ресурс сети, предоставляющий информационное наполнение и/или функциональные возможности, к которым можно обратиться дистанционно через стандартизированные протоколы и программные интерфейсы.

3.33 сайт, веб-сайт (website, site): Последовательный набор взаимосвязанных ресурсов сети (например, веб-страниц или веб-сервисов), который размещен на одном или нескольких компьютерах, подключенных к Интернету, и к нему можно обычно обращаться через совокупность спецификаций того же домена URL.

3.34 веб-приложение (Web application, World Wide Web application): Приложение, предоставляющее функциональные возможности пользователю через браузер или другой тип агента пользователя, использующего веб-форматы и протоколы.

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

3.35 пользовательский веб-интерфейс (Web user interface, World Wide Web user interface): Bсe аспекты веб-сайта или веб-приложения, относящиеся к информационному наполнению, функциональным возможностям, навигации, взаимодействию и представлению, которые существенны для использования веб-приложения или веб-сайта.

3.36 внутристраничная ссылка (within-page link): Ссылка, приводящая к цели на той же странице.

4 Применение

4.1 Предполагаемые группы пользователей

Пользователями настоящего стандарта предполагаются следующие группы:

— разработчики и проектировщики пользовательских веб-интерфейсов, которые применят его в процессе разработки;

— контент-провайдеры, которые разрабатывают и поддерживают информационное наполнение веб-сайта или приложения;

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

— специалисты по оценке пригодности к использованию, которые проверят, отвечают ли пользовательские веб-интерфейсы рекомендациям стандарта;

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

4.2 Применение рекомендаций

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

4.3 Соответствие

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

5 Эталонная модель человеко-ориентированного проектирования пользовательских веб-интерфейсов

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

Рисунок 1 — Эталонная модель

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

В эталонной модели рисунка 1 проект пользовательского веб-интерфейса показан в виде структуры из пяти главных областей или уровней, которые использовались для составления настоящего стандарта:

— высокоуровневые аспекты проектирования;

— концептуальная модель информационного наполнения;

— объект информационного наполнения и функциональные возможности;

— навигация и поиск;

— представление информационного наполнения.

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

Кроме того, следует обращаться к следующим международным стандартам:

— по руководству, связанному с программными пользовательскими интерфейсами: ИСО 9241-110, ИСО 9241-11, ИСО 9241-12, ИСО 9241-13, ИСО 9241-14, ИСО 9241-15, ИСО 9241-16 и ИСО 9241-17;

— по руководству, связанному с мультимедийными пользовательскими интерфейсами: ИСО 14915.

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

Область процесса содержит методические аспекты разработки пользовательских веб-интерфейсов. Проектирование пользовательских веб-интерфейсов (как и проектирование интерактивных программных систем) должно представлять собой человеко-ориентированный процесс, включающий соответствующий анализ предполагаемых групп пользователей и их задач или целей. Следует обратиться к ИСО 9241-210, содержащим руководство по процессам человеко-ориентированного проектирования.

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

6 Высокоуровневые решения по проектированию и стратегия проектирования

6.1 Общие аспекты

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

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

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

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

6.2 Определение цели веб-приложения

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

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

6.3 Анализ целевых групп пользователей

В процессе определения цели веб-приложения должны быть выявлены целевые группы пользователей.

Примечание — Общее руководство по рассмотрению пользователей и их задач можно найти в ИСО 9241-2 и ИСО 9241-11.

6.4 Анализ целей и задач пользователей

Должны быть проанализированы цели и задачи предполагаемых пользователей.

6.5 Соответствие назначения продукта целям пользователей

Цель веб-приложения (определенная согласно 6.2) должна быть сравнима и, при необходимости, согласована с целями и задачами пользователей, чтобы обеспечить достижение пользователями своих целей.

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

6.6 Распознание цели веб-приложения

Пользователь должен легко распознавать предполагаемую цель(и) веб-приложения.

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

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

Если веб-сайт имеет более одной цели, важно, чтобы содержание и навигация сайта помогали пользователям различать эти цели.

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

6.7 Установление приоритетов для различных целей проектирования

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

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

6.8 Доступность оборудования и услуг информационно-коммуникационных технологий (ИКТ)

Следует обратиться к ИСО 9241-20 по руководству доступности ИКТ. Пользовательские веб-интерфейсы должны отвечать его требованиям и рекомендациям.

6.9 Доступность программного обеспечения

Следует обратиться к ИСО 9241-171 по руководству по доступности программного обеспечения. Пользовательские веб-интерфейсы должны отвечать его требованиям и рекомендациям.

6.10 Доступность информационного наполнения сети

Следует обратиться к WCAG 1.0 и к заменяющему его WCAG 2.0, когда он будет издан в заключительной версии, по указаниям о доступности информационного наполнения сети.

6.11 Данные о веб-сайте и его владельце

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

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

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

Примечание 2 — Добавление подходящих метаданных — дополнительное средство сделать веб-сайт узнаваемым.

6.12 Последовательная многосайтовая стратегия

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

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

7 Разработка информационного наполнения

7.1 Концептуальная модель информационного наполнения

7.1.1 Общие положения

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

7.1.2 Разработка концептуальной модели

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

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

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

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

7.1.3 Соответствие информационного наполнения целевой аудитории и задачам

Представленное информационное наполнение должно соответствовать назначению веб-приложения, целевой аудитории (характеризующейся различными целями, опытом, предпочтениями и т.д.) и их задачам (см. также стандарт ИСО 9241-11).

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

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

7.1.4 Полнота информационного наполнения

Информационное наполнение веб-сайта должно быть достаточно полным в отношении назначения сайта и стандартных информационных потребностей пользователя.

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

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

7.1.5 Соответствующее структурирование информационного наполнения

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

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

7.1.6 Степень разделения

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

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

7.2 Объекты и функциональные возможности информационного наполнения

7.2.1 Общие положения

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

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

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

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

Пример 2 Использование HTML-таблиц (язык разметки гипертекста) для управления раскладкой веб-страницы может осложнить управление и понимание информационного наполнения страницы при обзоре на мобильном телефоне или представлении на устройстве для чтения экрана (для пользователей с нарушением зрения).

Примечание — Для обеспечения независимости доступны разнообразные технологии, включающие каскадные таблицы стилей (CSS), семантическую разметку, такую как ХМL (расширяемый язык разметки), возможно в соединении с XSL (расширяемым языком стилей) или CSS, функции, предоставляемые системой управления информационным наполнением.

7.2.3 Выбор подходящих информационных средств

7.2.3.1 Выбор соответствующих медиаобъектов

Медиаобъекты должны выбираться на основании типа представляемого информационного наполнения, задач пользователя и коммуникационных целей. Подробное руководство по выбору и комбинированию медиаобъектов содержится в стандарте ИСО 14915-3.

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

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

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

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

7.2.3.2 Предоставление текстовых эквивалентов для нетекстовых медиаобъектов

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

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

7.2.3.3 Возможность для пользователей управлять медиаобъектами, зависящими от времени

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

Существует множество зависящих от времени динамических форм информации, в том числе видео, музыка, иное звуковое информационное наполнение, анимационное мигание, прокрутка и автоматическое обновление объектов или страниц. Пользователи могут захотеть управлять зависящим от времени информационным наполнением по ряду причин: они могут, к примеру, захотеть избежать отвлечения от их задач или просмотреть отдельные статические изображения анимационного представления. Пользователям с когнитивными и зрительными нарушениями может потребоваться замедлить или приостановить динамическое информационное наполнение. Более подробное руководство по управлению динамическими информационными средствами содержится в стандарте ИСО 14915-2.

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

7.2.4 Обновление информационного наполнения

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

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

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

7.2.5 Открытый доступ к дате и времени последнего обновления

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

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

7.2.6 Возможность связи с владельцем сайта

Средства связи с владельцем сайта должны предоставляться, например, для запроса дополнительной информации или решения проблемы.

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

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

7.2.7 Обратная связь онлайн для пользователей

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

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

7.2.8 Конфиденциальность и деловая политика

7.2.8.1 Предоставление положений политики конфиденциальности

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

В положение о конфиденциальности включается следующая информация:

a) происхождение собранной/ отслеживаемой информации;

b) каким образом информация будет использоваться;

c) с кем необходимо делиться данной информацией.

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

Положение о конфиденциальности рекомендуется предоставлять в стандартизированном формате (таком как формат платформы для предпочтения конфиденциальности (РЗР) Консорциума W3C), поддерживающем обработку положения о конфиденциальности агентов пользователя.

7.2.8.2 Предоставление положений деловой политики

Деловая политика должна быть доступна на веб-сайте, если это необходимо в контексте приложения.

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

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

7.2.8.3 Контроль личной информации со стороны пользователя

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

Более предпочтительным является запрос согласия пользователя («согласен») на использование его личной информации, чем несогласия («не согласен»).

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

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

7.2.8.4 Хранение информации на компьютере пользователя

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

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

7.2.9 Индивидуализация и адаптация пользователя

7.2.9.1 Общие положения

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

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

— мониторинг поведения пользователя и адаптация к его целям на основании наблюдения за поведением;

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

7.2.9.2 Учет задач и информационных потребностей пользователей

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

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

7.2.9.3 Наглядность индивидуализации и адаптации

Процесс использования индивидуализации и/или адаптации должен быть наглядно виден пользователю.

7.2.9.4 Наглядность профиля пользователя

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

При использовании профилей важно предоставлять пользователям информацию о данном понятии и его последствиях.

7.2.9.5 Возможность просмотра и изменения профиля для пользователей

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

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

7.2.9.6 Информирование об автоматически создаваемых профилях

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

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

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

7.2.9.7 Отключение автоматической адаптации пользователя

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

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

7.2.9.8 Предоставление доступа к полному информационному наполнению

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

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

8 Навигация и поиск

8.1 Общие положения

Навигация включает набор действий, выполняемых пользователем в веб-интерфейсе пользователя с целью перемещения с видимых (или доступных для восприятия другим способом) в настоящий момент результатов системы на другие. Это перемещение может вызвать резкую смену положения на текущей веб-странице, отображение другой страницы, появление нового содержания в окне навигации, а также другие изменения в отображаемой информации. Проектирование навигации включает в себя преобразование подходящих данных из структуры информационного наполнения в навигационную структуру. Общее руководство по преобразованию информационного наполнения в поля воспроизведения и по проектированию навигационных структур представлено в ИСО 14915-2.

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

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

8.2 Общее руководство по навигации

8.2.1 Преобразование навигации в информативную систему

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

Общее руководство по достижению информативности представлено в ИСО 9241-110.

8.2.2 Определение местоположения пользователя

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

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

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

8.2.3 Возможность поддерживать различные навигационные поведения

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

Навигационное поведение включает приведенные ниже варианты.

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

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

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

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

8.2.4 Предложение альтернативных путей доступа

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

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

8.2.5 Минимизация навигационного усилия

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

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

8.3 Навигационная структура

8.3.1 Общие положения

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

Примечание — Некоторые авторы используют термин «информационная архитектура» как синоним понятия «навигационная структура».

8.3.2 Выбор подходящей навигационной структуры

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

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

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

8.3.3 Сопоставление широты и глубины навигационной структуры

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

Руководство по выбору баланса между широтой и глубиной в меню содержится в ИСО 9241-14.

8.3.4 Организация целенаправленной навигации

Навигационная структура организуется на основе понятий, которые имеют значение и важность для пользователя. Таким образом, можно выделить формы организации, основанные на информационном наполнении, описании задач, регулярности и др., что описано в ИСО 14915-2.

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

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

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

Пример 4 В интернет-магазине пользователи могут перейти к часто покупаемым продуктам прямо из списка на домашней странице.

8.3.5 Навигация по описанию задач

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

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

8.3.6 Возможность четкой навигации внутри многоступенчатой задачи

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

— предоставление пошаговой инструкции;

— предоставление четких указаний на местоположение пользователя в задаче в любое время;

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

— предоставление сведений о состоянии процесса обработки информации.

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

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

8.3.7 Сочетание нескольких способов организации навигации

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

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

8.3.8 Информативная домашняя страница

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

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

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

8.3.9 Прямой доступ к важной информации с домашней страницы

Домашняя страница предоставляет прямой доступ к особо важной или часто используемой информации или функциям.

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

8.3.10 Экраны-заставки

8.3.10.1 Исключение ненужных экранов-заставок

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

8.3.10.2 Пропуск экранов-заставок

При использовании экрана-заставки предлагается навигационная опция по его пропуску.

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

8.3.11 Исключение открытия ненужных окон

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

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

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

8.4 Компоненты навигационной системы

8.4.1 Общие положения

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

— получение обзора навигационной структуры;

— получение понятия о дальнейшем направлении движения;

— получение прямого доступа к важным узлам в структуре («метки»);

— перемещение по различным шагам сложной команды;

— упрощение перехода от одной команды к другой, особенно в тех случаях, когда команды обычно выполняются друг за другом;

— возврат к предыдущим узлам.

8.4.2 Предоставление навигационных обзоров

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

Пример 1 Постоянно отображаемое, раскрывающееся навигационное меню размещается как компонент навигации в левой части окна.

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

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

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

8.4.3 Поддержка видимости навигационных ссылок

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

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

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

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

8.4.4 Совместимость между компонентами навигации и информационным наполнением

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

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

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

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

Компоненты навигации следует располагать последовательно на страницах или во фреймах веб-сайта.

8.4.6 Визуализация нескольких уровней навигации

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

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

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

8.4.7 Разбивка навигационных обзоров

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

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

8.4.8 Предоставление карты сайта

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

Примечание — Для небольших сайтов, имеющих, например, только один уровень навигации, в карте сайта нет необходимости.

8.4.9 Создание перекрестных ссылок на потенциально важное информационное наполнение

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

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

8.4.10 Выделение динамических навигационных ссылок

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

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

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

8.4.11 Переход назад на домашнюю страницу или на страницу, отмеченную закладкой

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

8.4.12 Возврат на более высокие уровни

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

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

8.4.13 Обеспечение функции «возврат на одну позицию»

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

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

8.4.14 Разделение длинных страниц

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

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

8.4.15 Очевидная активация

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

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

Пример 2 Сделанный выбор надо активировать (обычно кнопкой), чтобы подтвердить выбранный вариант (например, из раскрывающегося списка) перед тем, как перейти на новую страницу.

Примечание — Пользователи могут перепутать выбор варианта с активацией шага навигации.

8.4.16 Избегание «битых ссылок»

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

8.4.17 Исключение неверных ссылок

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

8.5 Поиск

8.5.1 Общие положения

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

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

8.5.2 Функция поиска

8.5.2.1 Предоставление функции поиска

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

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

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

8.5.2.2 Предоставление подходящих функций поиска

Функции поиска должны соответствовать целям и опыту пользователя.

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

8.5.2.3 Предоставление функции простого поиска

Должна быть предоставлена простая функция поиска.

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

8.5.2.4 Расширенный поиск

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

Примечание — Часто функции расширенного поиска предоставляются, чтобы объяснить пользователю, как именно работает поиск. Типичными средствами расширенного поиска являются использование булевых операторов или определение области поиска.

8.5.2.5 Поиск по всему тексту

При поиске текста на больших веб-сайтах предлагаются функции поиска по всему тексту.

8.5.2.6 Описание используемого метода поиска

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

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

8.5.2.7 Доступность поиска

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

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

8.5.2.8 Размер поля поиска

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

8.5.2.9 Ускоренный доступ к функции поиска

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

8.5.2.10 Устойчивый к ошибкам поиск

Функция поиска должна выдавать полезные результаты, несмотря на неточные или неверные поисковые термины, используемые в запросе.

Пример Когда в запрос вводится неверно написанное слово, система показывает результаты поиска для неверного поискового термина, но также предлагает произвести поиск заново с исправленным поисковым термином.

8.5.3 Результаты поиска

8.5.3.1 Порядок результатов поиска

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

Пример 1 В приложении поиска документов найденные документы организованы по значимости относительно введенного поискового термина.

Пример 2 В системах лент новостей результаты поиска организованы по времени и дате.

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

8.5.3.2 Упорядочение результатов поиска на основе их значимости

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

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

8.5.3.3 Описательность результатов

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

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

8.5.3.4 Сортировка или фильтрование результатов поиска

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

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

8.5.4 Использование функций поиска

8.5.4.1 Область поиска

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

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

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

8.5.4.2 Выбор области поиска

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

8.5.4.3 Предоставление сведений по объему результатов поиска

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

8.5.4.4 Оперирование большим набором результатов

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

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

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

8.5.4.5 Отображение запроса вместе с результатами

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

8.5.5 Повторение и уточнение поиска

8.5.5.1 Предоставление совета в случае неудачного поиска

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

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

8.5.5.2 Повторные поиски

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

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

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

8.5.5.3 Уточнение запросов

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

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

9 Представление информационного наполнения

9.1 Общие положения

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

9.2 Соблюдение принципов человеческого восприятия

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

Практические рекомендации по представлению информации пользователю содержатся в стандарте ИСО 9241-12. Руководство по выбору и использованию различных технологий взаимодействия можно найти в стандартах с ИСО 9241-14 по ИСО 9241-17. Стандарт ИСО 9241-14 предлагает руководство по меню, ИСО 9241-15 — по диалогам команд, ИСО 9241-16 — по непосредственному управлению, ИСО 9241-17 — по заполнению форм. Кроме того, при разработке мультимедийных презентаций информации необходимо принимать во внимание принципы и рекомендации по проектированию, описанные в стандартах с ИСО 14915-1 по ИСО 14915-3. Адекватное представление информационного наполнения также играет ключевую роль в доступности.

9.3 Аспекты дизайна страниц

9.3.1 Общая информация на странице

Каждая страница должна содержать описательное название и, при необходимости, принадлежность и дату последнего обновления.

9.3.2 Последовательное размещение страниц

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

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

9.3.3 Однотипное расположение названий

Заголовки страниц должны располагаться в одном и том же месте на разных страницах.

9.3.4 Распознавание нового информационного наполнения

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

Важно выбирать технические приемы, не отвлекающие пользователя или не вызывающие его отрицательной реакции. Руководство предоставлено в стандартах ИСО 14915-3 и ИСО 9241-171.

9.3.5 Наглядное представление временного состояния

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

9.3.6 Выбор подходящей длины страниц

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

9.3.7 Минимизация вертикальной прокрутки

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

9.3.8 Избегание горизонтальной прокрутки

Горизонтальной прокрутки следует по возможности избегать.

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

9.3.9 Использование цвета

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

Пример Сообщения об ошибках, выделяемые красным цветом, также показываются жирным шрифтом.

В качестве руководства по использованию цвета необходимо применять стандарт ИСО 9241-303. Важные решения по оформлению с использованием цветов включают в себя:

— ограничение количества используемых для кодирования цветов не более чем десятью, а предпочтительно — не более чем пятью;

— поддержание достаточного контраста переднего и заднего планов;

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

Примечание — Согласно стандарту ИСО 9241-12:1998, пункт 7.5.1, цвет не должен являться единственным средством кодирования. Некоторые пользователи могут иметь затруднения в восприятии определенных цветов или цветовых комбинаций (неспособность различать цвета). Поэтому цвет используется только как вспомогательное средство кодирования и является дублирующим средством в сочетании с иными приемами кодирования.

9.3.10 Осторожное использование окон-рамок (фреймов)

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

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

9.3.11 Альтернативы представлению информации на основе фреймов

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

Пример — Для демонстрации постоянно видимого навигационного компонента используются плавающие элементы, такие как те, которые предоставлены в каскадных таблицах стилей (CSS) 21 [17].

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

9.3.12 Предоставление в качестве альтернативы страниц, содержащих только текст

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

9.3.13 Согласованность сходных веб-сайтов

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

Пример Согласованная навигация и оформление страниц для различных отделов компании.

9.3.14 Использование соответствующих приемов для определения оформления страниц

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

Пример При создании формата страницы вместо HTML-таблицы используется CSS (каскадная таблица стилей).

9.3.15 Распознавание всех страниц веб-сайта

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

Пример Все страницы сайта какой-либо компании отмечены логотипом данной компании.

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

9.3.16 Предоставление версий документов для печати

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

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

9.3.17 Использование «пустого места»

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

9.4 Оформление ссылок

9.4.1 Общие положения

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

9.4.2 Распознавание ссылок

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

Важно, чтобы ссылки распознавались не только по цвету (см. стандарт ИСО 9241-12).

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

9.4.3 Отделение соседних ссылок друг от друга

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

9.4.4 Отличие навигационных ссылок от транзакций

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

Пример Текстовые ссылки используются для перехода со страницы на страницу, в то время как кнопки используются для транзакций, которые управляют данными.

9.4.5 Сигнальные метки ссылок, не требующие пояснений

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

Пример 1 Ссылка с ярлыком «Описание продукта» ведет пользователя от общего списка продуктов к детальному описанию выбранного продукта.

Пример 2 Направление или действие ссылки объясняется в «титульном» атрибуте указательной метки (всплывающей подсказки).

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

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

9.4.6 Использование знакомой терминологии для навигационных ссылок

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

9.4.7 Использование описательных ярлыков ссылок

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

Примечание — Часто список параметров ссылки (таких как названия стран) в связке с кнопкой «вперед» используется для выбора из большого или изменяющегося количества целей ссылки. Это допустимо, если значение навигации понятно.

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

9.4.8 Выделение использованных ранее ссылок

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

9.4.9 Обозначение ссылок, ведущих к специфическим целям

Ссылки, ведущие к специфическим целям, таким как:

— иные форматы файлов (аудио- или видеофайлы);

— очень большие файлы с длительной загрузкой;

— страницы на разных языках

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

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

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

9.4.10 Обозначение ссылок, открывающих новые окна

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

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

9.4.11 Отличие навигационных ссылок от элементов управления

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

Пример 1 Ссылка, использующая имя пользователя для открытия окна отправки данному пользователю электронного письма, включает слово [e-mail] в скобках или иконку «электронная почта» перед именем данного пользователя (или, как альтернативу, текст «e-mail»).

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

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

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

Типичные виды действий пользовательского веб-интерфейса включают в себя:

— управление данными;

— осуществление поиска;

— действия по передаче информации, такие как открытие нового окна для сообщений по электронной почте или вхождения в чат;

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

9.4.12 Отличающиеся внутристраничные ссылки

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

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

9.4.13 Длина ссылок

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

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

9.4.14 Избыточные ссылки

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

9.4.15 Избегание перегрузки ссылками

Текстовые страницы, содержащие большую долю ссылок, должны быть отформатированы таким образом, чтобы наличие ссылок не ухудшало читаемость текста.

Пример Предложения с наборами ссылок представляются в виде маркированных списков.

9.4.16 Заголовки страниц в качестве закладок

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

Примечание — Заголовки используются во многих ситуациях, таких как установка закладок, распознавание окна или помощь пользователю в ориентации.

9.5 Объекты взаимодействия

9.5.1 Выбор соответствующих объектов взаимодействия

Объекты взаимодействия следует выбирать в соответствии с логическими свойствами ожидаемых входных данных и задачами пользователя. Руководство по выбору объектов взаимодействия также представлено в стандартах ИСО 9241-14, ИСО 9241-16 и ИСО 9241-17.

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

Логические свойства входных данных, определяющие выбор соответствующего объекта взаимодействия, включают в себя:

— тип входных данных (например, запуск действия, выбор настройки, начало навигации);

— определение, являются ли возможные входные значения заранее заданными или неограниченными;

— тип входного значения (например, числовое или текстуальное);

— количество элементов для выбора.

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

9.5.2 Обеспечение распознаваемости и понятности объектов взаимодействия

Объекты взаимодействия должны быть легко узнаваемыми и понятными.

Пример Ряд вкладок в верхней части страницы показан в виде кнопок с четкими ярлыками.

9.5.3 Предоставление клавишных комбинаций быстрого вызова

Для важных ссылок и иных объектов взаимодействия должны предоставляться клавишные комбинации быстрого вызова.

9.6 Оформление текста

9.6.1 Читаемость текста

Текст, представленный на веб-страницах, должен быть читаемым с учетом ожидаемых характеристик его отображения и пространственной организации. Требования к читаемости экранного текста изложены в стандарте ИСО 9241-303.

9.6.2 Поддержка просмотра текста

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

9.6.3 Стиль написания

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

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

9.6.4 Качество текста

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

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

9.6.5 Определение используемого языка

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

9.6.6 Возможность изменения пользователем размера текста

У пользователя должна быть возможность изменять размер текста с помощью функций, предоставляемых агентом пользователя, или иных соответствующих средств, представленных в ИСО 9241-171).

10 Общие аспекты проектирования

10.1 Проектирование с учетом культурных различий и многоязычного использования

10.1.1 Общие положения

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

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

10.1.2 Отображение существенной информации о местоположении

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

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

10.1.3 Определение поддерживаемых языков

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

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

Определять языки рекомендуется посредством общепринятых названий или кода языка согласно ИСО 639 (если применимо). Использование национальных флагов для данных целей не рекомендуется, поскольку флаг означает страну, а не язык.

10.1.4 Использование соответствующих форматов, единиц измерения или валюты

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

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

Пример 2 Поле ввода адреса на форме заказа должно предусматривать возможность записи адресов во всех рассматриваемых странах.

Пример 3 — Дата «3 февраля 2008 г.» указывается в стандартном формате 2008-02-03 (см. ИСО 8601), который легко и недвусмысленно понимается международной аудиторией, вместо, например, «02/03/08».

10.1.5 Создание текстовых презентаций на различных языках

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

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

10.2 Оказание помощи

Если предоставленное информационное наполнение или функциональные возможности не ясны для всех пользователей, необходимо предоставить справочную информацию (см. ИСО 9241-13) с четко указанными ссылками на страницы справки.

Помимо ссылки на страницы справки включение раздела FAQ (часто задаваемые вопросы) также помогает пользователям в решении наиболее распространенных проблем и возникших сложностей.

10.3 Обеспечение устойчивости пользовательских веб-интерфейсов к ошибкам

10.3.1 Минимизация ошибок пользователей

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

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

10.3.2 Четкие сообщения об ошибке

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

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

10.4 URL-адреса

URL — адрес, используемый для доступа на веб-сайт, должен соответствовать ожиданиям пользователя.

Пример На страницу с обзором продукции компании «xyz» можно попасть по URL www.xyz.com/products/.

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

10.5 Приемлемое время загрузки

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

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

10.6 Использование общепринятых технологий и стандартов

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

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

10.7 Поддержка общепринятых технологий

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

10.8 Устойчивость пользовательских веб-интерфейсов к сбоям

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

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

10.9 Проектирование с учетом автономности устройств ввода

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

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

10.10 Простота использования и доступность пользовательского интерфейса внедренных объектов

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

Приложение А
(справочное)

Обзор серии стандартов ИСО 9241

В данном приложении приведен обзор серии стандартов ИСО 9241 (ее структуры, предметной области и статуса опубликованных и разрабатываемых частей). Для получения актуальной информации следует использовать ссылку: http://isotc.iso.org/livelink/livelink?func=ll&objld=651393&objAction=browse&sort=name, ознакомиться с данными, приведенными в таблице А.1.

Таблица А.1

Номер стандарта

Наименование

Текущий статус

1

Общее введение

Международный стандарт
(заменен на ИСО/ТД 9241-1 и ИСО 9241-130)

2

Требования к производственному заданию

Международный стандарт

3

Требования к визуальному отображению информации

Международный стандарт (заменен на подсерию ИСО 9241-300)

4

Требования к клавиатуре

Международный стандарт (заменен на подсерию ИСО 9241-400)

5

Требования к расположению рабочей станции и осанке оператора

Международный стандарт (заменен на ИСО 9241-500)

6

Руководство по рабочей среде

Международный стандарт (заменен на ИСО 9241-600)

7

Требования к дисплеям при наличии отражений

Международный стандарт (заменен на подсерию ИСО 9241-300)

8

Требования к отображаемым цветам

Международный стандарт (заменен на подсерию ИСО 9241-300)

9

Требования к неклавиатурным устройствам ввода

Международный стандарт (заменен на подсерию ИСО 9241-400)

11

Руководство по обеспечению пригодности использования

Международный стандарт

12

Представление информации

Международный стандарт
(заменен на ИСО 9241-111 и ИСО 9241-141)

13

Руководство пользователя

Международный стандарт (заменен на ИСО 9241-124)

14

Диалоги на основе меню

Международный стандарт (заменен на ИСО 9241-131)

15

Командные диалоги

Международный стандарт (заменен на ИСО 9241-132)

16

Диалоги непосредственного управления

Международный стандарт (заменен на ИСО 9241-133)

17

Диалоги заполнения форм

Международный стандарт (заменен на ИСО 9241-134)

20

Руководство по доступности оборудования и услуг в области информационно-коммуникационных технологий (ICT)

Международный стандарт

Введение

100

Введение в стандарты по эргономике программного обеспечения

На стадии разработки

Основные принципы и структура

110

Принципы организации диалога

Международный стандарт

111

Принципы представления информации

Планируется разработка для частичного пересмотра и замены ИСО 9241-12

112

Принципы мультимедиа

Планируется разработка для пересмотра и замены ИСО 14915-1

113

Графический интерфейс пользователя (ГИП) и принципы управления

На стадии разработки

Представление информации пользователям и их поддержка

121

Представление информации

На стадии разработки

122

Выбор и сочетание форм представления информации

Планируется разработка для пересмотра и замены ИСО 14915-3

123

Навигация

Планируется разработка для частичного пересмотра и замены ИСО 14915-2

124

Руководство пользователя

Планируется разработка для пересмотра и замены ИСО 9241-13

129

Руководство по индивидуализации программного обеспечения

На стадии разработки

Способы диалога

130

Выбор и сочетание способов диалога

Планируется, что стандарт включит в себя и заменит ИСО 9241-1:1997/Amd. 1:2001

131

Диалоги на основе меню

Планируется, что стандарт заменит ИСО 9241-14

132

Командные диалоги

Планируется, что стандарт заменит ИСО 9241-15

133

Диалоги непосредственного управления

Планируется, что стандарт заменит ИСО 9241-16

134

Диалоги заполнения форм

Планируется, что стандарт заменит ИСО 9241-17

135

Диалоги естественного языка

На стадии разработки

Компоненты управления интерфейсом

141

Управляемые группы информации (включая окна)

Планируется разработка для частичной замены ИСО 9241-12

142

Списки

На стадии разработки

143

Управление формами представления информации

Планируется разработка для частичного пересмотра и замены ИСО 14915-2

Руководства, связанные с конкретной предметной областью

151

Руководство по пользовательским интерфейсам всемирной паутины

Международный стандарт

152

Межличностное общение

На стадии разработки

153

Виртуальная реальность

На стадии разработки

Доступность

171

Руководство по доступности программного обеспечения

На этапе подготовки

Человеко-ориентированное проектирование

200

Введение в стандарты по человеко-ориентированному проектированию

На стадии разработки

210

Человеко-ориентированное проектирование интерактивных систем

Планируется разработка для пересмотра и замены ИСО 13407

Базовая модель процесса

220

Процессы жизненного цикла человеко-ориентированного проектирования

Планируется разработка для пересмотра и замены ИСО/PAS 18152

Методы

230

Методы человеко-ориентированного проектирования

Планируется разработка для пересмотра и замены ИСО/ТД 16982

Эргономические требования и методы измерений для электронных видеодисплеев

300

Введение в требования к электронным видеодисплеям

На стадии публикации

302

Терминология для электронных видеодисплеев

На стадии публикации

303

Требования к электронным видеодисплеям

На стадии публикации

304

Методы испытания производительности пользователя для электронных видеодисплеев

На стадии публикации

305

Оптические лабораторные методы испытания электронных видеодисплеев

На стадии публикации

306

Методы оценки электронных видеодисплеев в условиях эксплуатации

На стадии публикации

307

Методы анализа и проверки соответствия электронных видеодисплеев

На стадии публикации

308

Дисплеи с электронной эмиссией за счет поверхностной проводимости

На стадии публикации (технический отчет)

309

Дисплеи с органическим светоизлучающим диодом (LED)

На стадии публикации (технический отчет)

Устройства физического ввода

400

Принципы и требования для устройств физического ввода

Международный стандарт

410

Критерии проектирования для устройств физического ввода

Международный стандарт

411

Методы испытаний и оценки конструкции устройств физического ввода в лаборатории

На стадии разработки

420

Процедуры отбора для устройств физического ввода

На стадии подготовки

421

Методы испытания и оценки устройств физического ввода на рабочем месте

На стадии разработки

Рабочее место

500

Требования к расположению рабочего места и позе оператора

Планируется разработка для пересмотра и замены ИСО 9241-5

Рабочая среда

600

Руководство по рабочей среде

Планируется разработка для пересмотра и замены ИСО 9241-6

Области применения

710

Введение в эргономическое проектирование центров управления

На стадии разработки

711

Принципы проектирования центров управления

Планируется разработка для пересмотра и замены ИСО 11064-1

712

Принципы размещения комнат управления

Планируется разработка для пересмотра и замены ИСО 11064-2

713

Схема комнаты управления

Планируется разработка для пересмотра и замены ИСО 11064-3

714

Расположение и размеры рабочих станций центра управления

Планируется разработка для пересмотра и замены ИСО 11064-4

715

Дисплеи и элементы управления центра управления

Планируется разработка для пересмотра и замены ИСО 11064-5

716

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

Планируется разработка для пересмотра и замены ИСО 11064-6

717

Принципы оценки центров управления

Планируется разработка для пересмотра и замены ИСО 11064-7

Тактильное и осязательное взаимодействие

900

Введение в структуру тактильного и осязательного взаимодействиея

На стадии разработки

910

Структура тактильного и осязательного взаимодействия

На стадии разработки

920

Руководство по тактильному и осязательному взаимодействию

На стадии подготовки

930

Тактильные и осязательные взаимодействия в мультимодальных средах

На стадии разработки

940

Оценка тактильного и осязательного взаимодействия

На стадии разработки

971

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

На стадии разработки

Приложение В
(справочное)

Пример порядка оценки применимости и соответствия

В.1 Общие положения

В настоящем приложении описан примерный перечень контрольных вопросов (далее — «перечень») (см. таблицу В.1), который может использоваться для определения выполнения применимых рекомендаций, содержащихся в настоящем стандарте.

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

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

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

Перечень используется для:

— определения, какие рекомендации являются применимыми;

— определения выполнения применимых рекомендаций;

— разработки систематического списка всех применимых рекомендаций, которые были выполнены.

Большая часть рекомендаций применяется ко всем предназначенным для использования программным пользовательским веб-интерфейсам и повышает удобство использования. Тем не менее удобство зависит от контекста использования (пользователи, среда выполнения задачи и технология). Когда в рекомендациях содержится условие «если», необходимо определить, включен или нет контекст использования, в котором программный пользовательский веб-интерфейс используется, или должен использоваться, в условия, обозначенные оговоркой «если». Для каждой контекстно зависимой рекомендации в пункте/подпункте указывается информация по применимым обстоятельствам. Если условное предложение не применяется и, следовательно, рекомендация является неприменимой, это необходимо указать в соответствующей колонке применимого раздела таблицы В.1, и в колонке “Причины неприменимости” должно быть предоставлено краткое описание.

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

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

В.2 Как использовать перечень

Номера пунктов/подпунктов и названия указываются в первых двух столбцах таблицы В.1.

Третий столбец используется для указания, применяется или нет рекомендация данного пункта/подпункта. Для всех неограниченных условиями рекомендаций в третьем столбце указывается буква «Д» (означает «Да»), чтобы показать их применимость.

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

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

Если рекомендация не применима, необходимо дать краткое примечание с причинами в четвертом столбце.

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

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

Таблица В.1 — Примерный перечень контрольных вопросов

Пункт/

Руководство

Применимость

Соответствие

подпункт

Да/
Нет

Причины
неприменимости

Да

Частично

Нет

Примечания

6

Решения по проектированию архитектуры и стратегия проектирования

6.1

Общие аспекты

6.2

Определение цели веб-приложения

Д

6.3

Анализ целевых групп пользователей

Д

6.4

Анализ целей и задач пользователей

Д

6.5

Соответствие назначения продукта целям пользователей

Д

6.6

Распознавание цели веб-приложения

Д

6.7

Установление приоритетов для различных целей проектирования

6.8

Доступность оборудования и услуг информационно-
коммуникационных технологий (ИКТ)

Д

6.9

Доступность программного обеспечения

Д

6.10

Доступности информационного обеспечения сети

Д

6.11

Данные о веб-сайте и его владельце

Д

6.12

Последовательная многосайтовая стратегия

7

Разработка информационного наполнения

7.1

Концептуальная модель информационного наполнения

7.1.1

Общие положения

7.1.2

Разработка концептуальной модели

Д

7.1.3

Соответствие информационного наполнения целевой аудитории и задачам

Д

7.1.4

Полнота информационного наполнения

Д

7.1.5

Соответствующее структурирование информационного наполнения

Д

7.1.6

Степень разделения

Д

7.2

Объекты и функциональные возможности информационного наполнения

7.2.1

Общие положения

7.2.2

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

Д

7.2.3

Выбор подходящих информационных средств

7.2.3.1

Выбор соответствующих медиаобъектов

Д

7.2.3.2

Предоставление текстовых эквивалентов для нетекстовых медиаобъектов

Д

7.2.3.3

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

Д

7.2.4

Поддержка обновления информационного наполнения

Д

7.2.5

Открытый доступ к дате и времени последнего обновления

Д

7.2.6

Возможность связи с владельцем сайта

Д

7.2.7

Обратная связь онлайн для пользователей

Д

7.2.8

Конфиденциальность и деловая политика

7.2.8.1

Предоставление положений политики конфиденциальности

7.2.8.2

Предоставление положений деловой политики

7.2.8.3

Контроль личной информации со стороны пользователя

7.2.8.4

Хранение информации на компьютере пользователя

7.2.9

Индивидуализация и адаптация пользователя

7.2.9.1

Общие положения

7.2.9.2

Учет задач и информационных потребностей пользователей

Д

7.2.9.3

Наглядность индивидуализации и адаптации

Д

7.2.9.4

Обеспечение наглядности профилей пользователей

Д

7.2.9.5

Возможность просмотра и изменения профиля для пользователей

7.2.9.6

Информирование об автоматически создаваемых профилях

7.2.9.7

Отключение автоматической адаптации пользователяй

7.2.9.8

Предоставление доступа к полному информационному наполнению

8

Навигация и поиск

8.1

Общие положения

8.2

Общее руководство по навигации

8.2.1

Преобразование навигации в информативную систему

Д

8.2.2

Определение местоположения пользователя

Д

8.2.3

Возможность поддерживать различные навигационные поведения

Д

8.2.4

Предложение альтернативных путей доступа

Д

8.2.5

Минимизация навигационного усилия

Д

8.3

Навигационная структура

8.3.1

Общие положения

8.3.2

Выбор подходящей навигационной структуры

Д

8.3.3

Сопоставление широты и глубины навигационной структуры

8.3.4

Организация целенаправленной навигации

Д

8.3.5

Навигация по описанию задач

Д

8.3.6

Возможность четкой навигации внутри многоступенчатой задачи

8.3.7

Сочетание нескольких способов организации навигации

Д

8.3.8

Информативная домашняя страница

Д

8.3.9

Прямой доступ к важной информации с домашней страницы

Д

8.3.10

Экран-заставка

8.3.10.1

Исключение ненужных экранов- заставок

Д

8.3.10.2

Пропуск экранов-заставок

8.3.11

Исключение открытия ненужных окон

Д

8.4

Компоненты навигационной системы

8.4.1

Общие положения

8.4.2

Предоставление навигационных обзоров

Д

8.4.3

Поддержка видимости навигационных ссылок

Д

8.4.4

Совместимость между компонентами навигации и информационным наполнением

8.4.5

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

Д

8.4.6

Визуализация нескольких уровней навигации

8.4.7

Разбивка навигационных обзоров

Д

8.4.8

Предоставление карты сайта

Д

8.4.9

Создание перекрестных ссылок на потенциально важное информационное наполнение

8.4.10

Выделение динамических навигационных ссылок

Д

8.4.11

Переход назад на домашнюю страницу или на страницу, отмеченную закладкой

Д

8.4.12

Возврат на более высокие уровни

Д

8.4.13

Обеспечение функции «возврат на одну позицию»

8.4.14

Разделение длинных страниц

8.4.15

Очевидная активация

Д

8.4.16

Избежание «битых ссылок»

Д

8.4.17

Исключение неверных ссылок

Д

8.5

Поиск

8.5.1

Общие положения

8.5.2

Функция поиска

8.5.2.1

Предоставление функции поиска

Д

8.5.2.2

Предоставление подходящих функций поиска

Д

8.5.2.3

Предоставление функции простого поиска

Д

8.5.2.4

Расширенный поиск

8.5.2.5

Поиск по всему тексту

Д

8.5.2.6

Описание используемого метода поиска

8.5.2.7

Доступность поиска

Д

8.5.2.8

Размер поля поиска

Д

8.5.2.9

Ускоренный доступ к функции поиска

8.5.2.10

Устойчивый к ошибкам поиск

Д

8.5.3

Результаты поиска

8.5.3.1

Упорядочение результатов поиска на основе их значимости

Д

8.5.3.2

Классификация результатов поиска согласно их значимости

8.5.3.3

Описательность результатов

Д

8.5.3.4

Сортировка или фильтрование результатов поиска

8.5.4

Использование функций поиска

8.5.4.1

Область поиска

8.5.4.2

Выбор области поиска

8.5.4.3

Предоставление сведений по объему результатов поиска

Д

8.5.4.4

Оперирование большим набором результатов

Д

8.5.4.5

Отображение запроса вместе с результатами

Д

8.5.5

Повторение и уточнение поиска

8.5.5.1

Предоставление совета в случае неудачного поиска

8.5.5.2

Повторные поиски

Д

8.5.5.3

Уточнение запросов

9

Представление информационного наполнения

9.1

Общие положения

9.2

Соблюдение принципов человеческого восприятия

Д

9.3

Аспекты дизайна страниц

9.3.1

Общая информация на странице

Д

9.3.2

Последовательное размещение страниц

Д

9.3.3

Однотипное расположение названий

Д

9.3.4

Распознавание нового информационного наполнения

Д

9.3.5

Наглядное представление временного состояния

9.3.6

Выбор подходящей длины страницы

Д

9.3.7

Минимизация вертикальной прокрутки

Д

9.3.8

Избегание горизонтальной прокрутки

Д

9.3.9

Использование цвета

Д

9.3.10

Осторожное использование окон-рамок (фреймов)

9.3.11

Альтернативы представлению информации на основе фреймов

9.3.12

Предоставление в качестве альтернативы страниц, содержащих только текст

Д

9.3.13

Согласованность сходных веб-сайтов

9.3.14

Использование соответствующих приемов для определения оформления страниц

Д

9.3.15

Распознавание всех страниц веб-сайта

Д

9.3.16

Предоставление версий документов для печати

9.3.17

Использование «пустого места»

Д

9.4

Оформление ссылок

9.4.1

Общие положения

9.4.2

Распознавание ссылок

Д

9.4.3

Отделение соседних ссылок друг от друга

Д

9.4.4

Отличие навигационных ссылок от транзакций

Д

9.4.5

Сигнальные метки ссылок, не требующие пояснений

Д

9.4.6

Использование знакомой терминологии для навигационных ссылок

Д

9.4.7

Использование описательных ярлыков ссылок

Д

9.4.8

Выделение использованных ранее ссылок

9.4.9

Обозначение ссылок, ведущих к специфическим целям

Д

9.4.10

Обозначение ссылок, открывающих новые окна

Д

9.4.11

Отличие навигационных ссылок от элементов управления

Д

9.4.12

Отличающиеся внутристраничные ссылки

Д

9.4.13

Длина ссылок

Д

9.4.14

Избыточные ссылки

9.4.15

Избегание перегрузки ссылками

Д

9.4.16

Заголовки страниц в качестве закладок

Д

9.5

Объекты взаимодействия

9.5.1

Выбор соответствующих объектов взаимодействия

Д

9.5.2

Обеспечение распознаваемости и понятности объектов взаимодействия

Д

9.5.3

Предоставление клавишных комбинаций быстрого вызова

Д

9.6

Оформление текста

9.6.1

Читаемость текста

Д

9.6.2

Поддержка просмотра текста

Д

9.6.3

Стиль написания

Д

9.6.4

Качество текста

Д

9.6.5

Определение используемого языка

Д

9.6.6

Возможность изменения пользователем размера текста

Д

10

Общие аспекты проектирования

10.1

Проектирование с учетом культурных различий и многоязыкового использования

10.1.1

Общие положения

10.1.2

Отображение существенной информации о местоположении

10.1.3

Определение поддерживаемых языков

10.1.4

Использование соответствующих форматов, единиц измерения или валюты

Д

10.1.5

Создание текстовых презентаций на различных языках

Д

10.2

Оказание помощи

Д

10.3

Обеспечение устойчивости пользовательских веб-интерфейсов к ошибкам

10.3.1

Минимизация ошибок пользователей

Д

10.3.2

Четкие сообщения об ошибке

Д

10.4

URL-адреса

Д

10.5

Приемлемое время загрузки

Д

10.6

Использование общепринятых технологий и стандартов

Д

10.7

Поддержка общепринятых технологий

Д

10.8

Устойчивость пользовательских веб-интерфейсов к сбоям

Д

10.9

Проектирование с учетом автономности устройств ввода

Д

10.10

Простота использования и доступность пользовательского интерфейса внедренных объектов

Д

Приложение ДА
(справочное)

Сведения о соответствии ссылочных международных стандартов национальным стандартам

Таблица ДА.1

Обозначение ссылочного международного документа

Степень соответствия

Обозначение и наименование соответствующего национального стандарта

ISO 9241-11:1998

IDT

ГОСТ Р ИСО 9241-11-2010 «Эргономические требования к проведению офисных работ с использованием видеодисплейных терминалов (VDT). Часть 11. Руководство по обеспечению пригодности использования»

ISO 9241-12

*

ISO 9241-13

*

ISO 9241-14

*

ISO 9241-15

*

ISO 9241-16

*

ISO 9241-17

*

ISO 9241-20

*

ISO 9241-110

IDT

ГОСТ Р ИСО 9241-110-2009 «Эргономика взаимодействия человек — система. Часть 110. Принципы организации диалога»

ISO 9241-171

*

ISO 9241-303

*

ISO 9241-210:2010

IDT

ГОСТ Р ИСО 9241-210-2012 «Эргономика взаимодействия человек — система. Часть 210. Человеко-ориентированное проектирование интерактивных систем»

ISO 14915-1

IDT

ГОСТ Р ИСО 14915-1-2010 «Эргономика мультимедийных пользовательских интерфейсов. Часть 1. Принципы проектирования и структура»

ISO 14915-2

IDT

ГОСТ Р ИСО 14915-2-2013 «Эргономика мультимедийных пользовательских интерфейсов. Часть 2. Навигация и управление мультимедийными средствами»

ISO 14915-3

*

ISO 14915 (all parts)

IDT

ГОСТ Р ИСО 14915-1-2010 «Эргономика мультимедийных пользовательских интерфейсов. Часть 1. Принципы проектирования и структура»

WCAG 1.0

*

WCAG 2.0

*

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

Примечание — В настоящей таблице использовано следующее условное обозначение степени соответствия документов:

— IDT — идентичные стандарты.

Библиография

[1]

ISO 639 (all parts)

Codes for the representation of names of languages

[2]

ISO 5127

Information and documentation — Vocabulary

[3]

ISO 8601

Data elements and interchange formats — Information interchange — Representation of dates and times

[4]

ISO/IEC 13250

Information technology — SGML applications — Topic maps

[5]

ISO/TR 16982

Ergonomics of human-system interaction — Usability methods supporting human-centred design

[6]

ISO/TR 18529

Ergonomics — Ergonomics of human-system interaction — Human-centered lifecycle process descriptions

[7]

Brinck T., Gergle D. and Wood S.D., Usability for the Web: designing websites that work, San Francisco, CA, Morgan Kaufmann Publishers, 2002

[8]

Kojani S.J. et al., Research-based Web design and Usability Guidelines, U.S. Department of Health and Human Services, 2003 (http://www.usability.gov)

[9]

Nielsen J., Designing Web usability the practice of simplicity. Indianapolis, New Riders Publishing, 2000

[10]

Nogier J.F., Ergonomie du logiciel et design Web. Dunod, 2003 (in French)

[11]

Duyne van D.K.; Landay J.A. & Hong J.I., The Design of Sites — Patterns, Principles and Processes for Crafting a Customer-Centred Web Experience, Boston, Addison-Wesley, 2003

[12]

Scano R., Accessibility dalla teoria alia realita. Associazione, IWA, Italy, 2004 (in Italian)

[13]

Stephanidis C. (ed.), User Interfaces for AllConcepts, Methods and Tools. Mahwah, NJ. Lawrence Erlbaum Associates, 2001

[14]

Travis D.S., E-Commerce Usability: Tools and Techniques to Perfect the On-line Experience. London, Taylor & Francis, 2003

[15]

CC/PP, Composite Capability/Preference Profiles: Structure and Vocabularies, World Wide Web Consortium (W3C) (http://www.w3.org/TR/2003/WD-CCPP-struct-vocab-20030325/)

[16]

P3P1.1, The Platform for Privacy Preferences 1.1, World Wide Web Consortium (W3C) Specification

[17]

CSS 2.1, Cascading Style Sheets Level 2, Revision 1, World Wide Web Consortium (W3C) Specification

УДК 658.512.22:006.354

OKC 13.180

35.240.99

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

Электронный текст документа
и сверен по:

, 2019

В конце декабря 2021-го Android обновил рекомендации по архитектуре мобильных приложений. Публикуем перевод гайда в пяти частях:

Обзор архитектуры

Слой UI (вы находитесь здесь)

События UI

Доменный слой

Слой данных

UI отображает данные приложения на экране: это основное место взаимодействия с пользователями. Если отображаемые данные меняются — из-за взаимодействия с пользователем (например, нажатия кнопки) или внешнего воздействия (например, отклика сети) — UI должен обновиться и отразить изменения. По сути UI – это состояние приложения, полученное из слоя данных и представленное визуально.

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

Роль слоя UI в архитектуре приложения

Роль слоя UI в архитектуре приложения

Разберём простой пример

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

Таким образом, приложение позволяет пользователям:

  • Просматривать доступные для прочтения статьи.

  • Фильтровать их по категориям.

  • Войти в систему и добавить интересные статьи в закладки.

  • Пользоваться премиальными фичами, если к ним есть доступ.

Пример новостного приложения для изучения UI

Пример новостного приложения для изучения UI

В следующих разделах будем использовать это приложение как пример. Вы познакомитесь с принципами Unidirectional Data Flow (UDF) и узнаете, с какими проблемами в контексте архитектуры приложения в слое UI они помогают разобраться.

Архитектура слоя UI

Под термином UI подразумеваются UI-элементы (например, Activity и Fragment), которые отображают данные: вне зависимости от того, какими API они пользуются для этой цели — View или Jetpack Compose. Цель слоя данных — хранить данные приложения, управлять ими и открывать к ним доступ. Поэтому слой UI должен:

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

  2. Принимать данные, которые может отрисовать UI, и преобразовывать их в элементы UI, которые будут показаны пользователю.

  3. Принимать события о вводе данных пользователем от элементов UI из пункта 2 и отражать в данных UI изменения, которые они вносят.

  4. Повторять шаги 1–3 необходимое количество раз.

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

  • Как описать UI-состояние.

  • UDF: как с его помощью создать UI-состояние и управлять им.

  • Как открывать доступ к UI-состоянию с помощью данных типа observable в соответствии с принципами UDF.

  • Как реализовать UI, который принимает UI-состояние типа observable.

Самая базовая из этих задач — описание UI-состояния.

Как описывать UI-состояния

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

UI – то, что пользователь видит на экране. С помощью UI state приложение управляет тем, что пользователь увидит на экране.

Два этих понятия — как две стороны одной монеты: UI — это визуальное представление UI-состояния. Любые изменения UI-состояния немедленно отражаются в UI.

UI – результат привязки UI элементов на экране к UI-состоянию

UI – результат привязки UI элементов на экране к UI-состоянию

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

data class NewsUiState(

    val isSignedIn: Boolean = false,

    val isPremium: Boolean = false,

    val newsItems: List<NewsItemUiState> = listOf(),

    val userMessages: List<Message> = listOf()

)

data class NewsItemUiState(

    val title: String,

    val body: String,

    val bookmarked: Boolean = false,

    ...

)

Неизменяемость

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

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

Если нарушить этот принцип, у одной и той же информации появится несколько source of truth (источников истины), что приведёт к противоречивости данных и багам, которые трудно обнаружить.

Скажем, если бы в флаг bookmarked в объекте NewsItemUiState из UI-состояния обновлялся в классе Activity, за статус статьи «сохранена» отвечали бы параллельно и этот флаг, и слой данных. Неизменяемые классы помогают успешно предотвратить возникновение таких антипаттернов.

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

Правила именования в этом гайде

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

функциональность + UiState

К примеру, состояние, при котором на экране отображены новости, будет называться NewsUiState. Состояние, при котором статья отображается в списке статей, — NewsItemUiState.

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

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

Лучше обрабатывать эти взаимодействия с помощью дополнительной сущности:

  • она будет описывать логику, применяемую к каждому событию,

  • и трансформировать данные, получаемые из источников, чтобы создать UI-состояние. 

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

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

В этом разделе рассматривается UDF — архитектурный шаблон, который помогает привести код в порядок, разделив ответственности.

State holder

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

В последнем случае его реализация – это, как правило, экземпляр ViewModel. Однако, в зависимости от требований приложения, иногда можно обойтись обычным классом. Так, новостное приложение из примера использует в качестве state holder класс NewsViewModel: он производит UI-состояние для экрана, изображённого в начале статьи.

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

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

Схематичное изображение работы UDF в рамках архитектуры приложения

Схематичное изображение работы UDF в рамках архитектуры приложения

UDF — паттерн, в котором поток состояния направлен вниз, а поток событий – вверх. Вот что этот паттерн даёт архитектуре приложения:

  • ViewModel хранит состояние и открывает к нему доступ для UI. UI-состояние – это данные приложения, преобразованные ViewModel.

  • UI уведомляет ViewModel о пользовательских событиях.

  • ViewModel обрабатывает действия пользователя и обновляет состояние.

  • Обновлённое состояние возвращается обратно в UI, а тот его отрисовывает.

  • Все предыдущие пункты повторяются с каждым событием, меняющим состояние.

В случае с конечными точками навигации или экранами ViewModel получает данные из репозиториев или классов UseCase, а затем преобразует их в UI-состояния, применяя к ним эффекты событий, вызвавших изменение состояния. В упомянутом ранее примере есть список статей: у каждой указаны заголовок, описание, источник, имя автора, дата публикации и возможна пометка «добавлено в закладки». UI каждой статьи выглядит так:

UI статьи в приложении из примера

UI статьи в приложении из примера

Когда пользователь отправляет запрос, чтобы добавить статью в закладки, он создаёт событие, которое способно изменить состояние. Так как ViewModel производит состояния, его ответственность – описывать логику, необходимую для заполнения всех полей в UI-состоянии, и обрабатывать события, без которых UI не сможет отрисоваться полностью.

Цикл событий и данных в UDF

Цикл событий и данных в UDF

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

Виды логики

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

  • Логика поведения UI или логика UI — то, как мы отображаем изменения состояния на экране. Например, с помощью Android Resources получаем текст, который нужно отобразить на экране; переходим на нужный экран, когда пользователь нажимает на кнопку; или показываем пользователю сообщение на экране с помощью Toast или Snackbar.

Логика UI, в особенности когда она затрагивает такие типы UI, как Context, должна находиться в UI, а не во ViewModel. Если UI приложения усложняется, и вам хочется делегировать логику UI другому классу, чтобы разделить ответственности и легче тестировать приложение, можно создать простой класс, который будет выполнять роль экземпляра state holder. Простые классы, созданные в UI, могут получать зависимости от Android SDK: их жизненный цикл ограничен жизненным циклом UI, в то время как объекты ViewModel живут дольше.

Подробнее о state holder и том, как он помогает построить UI, можно почитать в гайде «Jetpack Compose State».

Зачем использовать UDF

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

Другими словами, UDF позволяет добиться:

  • Согласованности данных. У UI есть только один источник правды.

  • Удобства тестирования. Источник состояния изолирован, а значит, его можно тестировать отдельно от UI.

  • Надёжности. Изменение состояния следует чётко заданному паттерну: изменения вызываются пользовательскими событиями и источниками данных, которые они запрашивают.

Как предоставлять доступ к UI-состоянию

После того, как вы описали UI-состояние и определили, как будете управлять его производством, следующий шаг – предоставить UI доступ к готовому состоянию. 

Так как вы управляете производством состояния с помощью UDF, рекомендуется сделать производимое состояние потоком — другими словами, в процессе работы программы будет произведено несколько версий этого состояния. В таком случае доступ к UI-состоянию следует предоставить с помощью observable-обёртки над данными, к примеру LiveData или StateFlow. Это нужно сделать, чтобы UI мог реагировать на все изменения, внесённые в состояние, и вам не приходилось вручную получать данные прямо из ViewModel. 

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

Views

class NewsViewModel(...) : ViewModel() {

val uiState: StateFlow = …

}

Compose

class NewsViewModel(...) : ViewModel() {
  
    val uiState: NewsUiState = …
  
}

Вводную информацию об использовании LiveData в качестве observable-обёртки над данными можно прочитать в этом кодлабе. Вводную информацию о flow в Kotlin — в статье «Flow в Kotlin на Android».

Важно: чтобы предоставить доступ к UI-состоянию в приложениях с Jetpack Compose, можно использовать его родные observable State API, например mutableStateOf или snapshotFlow. Все указанные в этом гайде типы observable-обёрток над данными, такие как StateFlow или LiveData, легко можно использовать в Compose с помощью соответствующих extension функций.

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

Поток данных UiState зачастую создают, предоставляя из ViewModel доступ к приватному изменяемому потоку как к неизменяемому: например, доступ к MutableStateFlow<UiState> как к StateFlow<UiState>.

Views

class NewsViewModel(...) : ViewModel() {

    private val _uiState = MutableStateFlow(NewsUiState())

    val uiState: StateFlow<NewsUiState> = _uiState.asStateFlow()

    ...

}

Compose

class NewsViewModel(...) : ViewModel() {

    var uiState by mutableStateOf(NewsUiState())
        private set

    ...
}

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

Views

class NewsViewModel(
    private val repository: NewsRepository,
    ...
) : ViewModel() {

    private val _uiState = MutableStateFlow(NewsUiState())
    val uiState: StateFlow<NewsUiState> = _uiState.asStateFlow()

    private var fetchJob: Job? = null

    fun fetchArticles(category: String) {
        fetchJob?.cancel()
        fetchJob = viewModelScope.launch {
            try {
                val newsItems = repository.newsItemsForCategory(category)
                _uiState.update {
                    it.copy(newsItems = newsItems)
                }
            } catch (ioe: IOException) {
                // Handle the error and notify the notify the UI when appropriate.
                _uiState.update {
                    val messages = getMessagesFromThrowable(ioe)
                    it.copy(userMessages = messages)
                 }
            }
        }
    }
}

Compose

class NewsViewModel(
    private val repository: NewsRepository,
    ...
) : ViewModel() {

   var uiState by mutableStateOf(NewsUiState())
        private set

    private var fetchJob: Job? = null

    fun fetchArticles(category: String) {
        fetchJob?.cancel()
        fetchJob = viewModelScope.launch {
            try {
                val newsItems = repository.newsItemsForCategory(category)
                uiState = uiState.copy(newsItems = newsItems)
            } catch (ioe: IOException) {
                // Handle the error and notify the notify the UI when appropriate.
                val messages = getMessagesFromThrowable(ioe)
                uiState = uiState.copy(userMessages = messages)
            }
        }
    }
}

В примере выше класс NewsViewModel пытается составить выборку статей определённой категории. Затем отражает результаты попытки — удачные или неудачные — в UI-состоянии, на которое UI реагирует соответствующим образом. Чтобы узнать больше о работе с ошибками, прочитайте раздел «Отображение ошибок на экране».

Важно: шаблон из предыдущего примера, где состояние изменяют посредством функций во ViewModel, — одна из наиболее популярных реализаций UDF.

Дополнительные рекомендации

Предоставляя доступ к UI-состоянию, следует учитывать:

  • Объект UI-состояния должен обрабатывать состояния, которые связаны друг с другом. В таком случае неконсистентность будет возникать реже, а код будет проще понять. Если открыть доступ к списку статей и количеству сохранённых статей в двух разных потоках данных, можно оказаться в ситуации, где одни данные обновились, а другие – нет. Если использовать один поток, оба элемента будут содержать актуальные данные.

    Более того, в некоторых случаях бизнес логика может потребовать слияния источников. К примеру, вам может потребоваться показывать кнопку «добавить в закладки» только если пользователь зарегистрировался и подписан на премиум услугу. В таком случае класс UI-состояния можно описать следующим образом:

data class NewsUiState(
    val isSignedIn: Boolean = false,
    val isPremium: Boolean = false,
    val newsItems: List<NewsItemUiState> = listOf()
)

val NewsUiState.canBookmarkNews: Boolean get() = isSignedIn && isPremium

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

  • UI-состояния: один поток или несколько? Если вы выбираете, открыть доступ к UI-состоянию в одном потоке или в нескольких, основным ориентиром должен стать предыдущий пункт: связь между отправляемыми элементами.

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

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

    • Сравнение UiState. Чем больше в объекте UiState полей, тем вероятнее, что поток будет отправлять данные при обновлении одного из его полей. View обновляется в каждом случае: у него нет механизма сравнения, с помощью которого можно было бы понять, отличаются отправляемые друг за другом данные или нет. В такой ситуации для решения проблемы вам могут потребоваться Flow API или методы типа distinctUntilChanged() на LiveData.

Как принимать UI-состояния

Чтобы UI начал получать UiState из потока, используется терминальный оператор, соответствующий конкретному observable-типу данных в коде. Например, в случае с LiveData используется метод observe(), а в случае с flow в Kotlin – метод collect() или его вариации.

Когда запускаете получение observable-обёрток над данными в UI, убедитесь, что учли жизненный цикл UI. Это важно: UI не должен отслеживать UI-состояние, когда view пользователю не показывают. 

Подробнее тему можно изучить в посте «A safer way to collect flows from Android UIs». Когда используется LiveData, LifecycleOwner сам решает вопрос жизненных циклов. В случае с flow лучше использовать соответствующий coroutine scope и repeatOnLifecycle API:

Views

class NewsActivity : AppCompatActivity() {

    private val viewModel: NewsViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                viewModel.uiState.collect {
                    // Update UI elements
                }
            }
        }
    }
}

Compose

@Composable
fun LatestNewsScreen(
    viewModel: NewsViewModel = viewModel()
) {
    // Show UI elements based on the viewModel.uiState
}

Важно: объекты StateFlow, использованные в этом примере, не прекращают работу, когда у них нет активных получателей данных. Но, работая с flow, вы можете и не знать, как они реализованы. Получение данных flow с учётом жизненного цикла позволяет вносить подобные изменения в потоки ViewModel позднее — без необходимости дорабатывать код получателя данных.

Как отображать прогресс выполнения операций

Проще всего отобразить состояние загрузки в классе UiState с помощью поля boolean:

data class NewsUiState(

    val isFetchingArticles: Boolean = false,

    ...

)

Значение этого флага указывает на наличие или отсутствие прогресс-бара в UI.

Views

class NewsActivity : AppCompatActivity() {

    private val viewModel: NewsViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                // Bind the visibility of the progressBar to the state
                // of isFetchingArticles.
                viewModel.uiState
                    .map { it.isFetchingArticles }
                    .distinctUntilChanged()
                    .collect { progressBar.isVisible = it }
            }
        }
    }
}

Compose

@Composable
fun LatestNewsScreen(
    modifier: Modifier = Modifier,
    viewModel: NewsViewModel = viewModel()
) {
    Box(modifier.fillMaxSize()) {

        if (viewModel.uiState.isFetchingArticles) {
            CircularProgressIndicator(Modifier.align(Alignment.Center))
        }

        // Add other UI elements. For example, the list.
    }
}

Отображение ошибок на экране

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

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

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

data class Message(val id: Long, val message: String)

data class NewsUiState(

    val userMessages: List<Message> = listOf(),

    ...

)

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

Потоки и параллелизм

Любая операция, которую мы выполняем в ViewModel, должна быть main-safe: вызывать её из главного потока должно быть безопасно. За переключение работы в другой поток отвечают слои данных и предметной области.

Если ViewModel выполняет продолжительные операции, она также отвечает за перемещение этой логики в фоновый поток. Корутины в Kotlin – отличный способ управления параллельными операциями, а Jetpack Architecture Components предоставляют встроенную поддержку корутин. Вы можете подробнее узнать о том, как использовать корутины в приложениях на Android, если прочитаете статью «Корутины Kotlin в Android».

Навигация

Изменения в навигации приложения зачастую обусловлены получением событий или подобных им сущностей. К примеру, после того, как класс SignInViewModel выполняет регистрацию, поле isSignedIn в UiState может иметь значение true. Такие триггеры следует принимать так же, как и описанные в предыдущем разделе Как принимать UI-состояния. Единственное исключение состоит в том, что получатель состояния следует реализовать, полагаясь на Navigation component.

Пагинация

Paging library передает на UI-класс PagingData. Так как PagingData представляет и содержит элементы, которые могут меняться с течением времени (то есть не относятся к неизменяемому типу), его не следует представлять в неизменяемом UI-состоянии. Логичнее будет предоставить к нему доступ из ViewModel в отдельном потоке. Конкретные примеры можно посмотреть в кодлабе Android Paging.

Анимации

Чтобы анимации переходов были качественными и плавными, иногда приходится подождать, пока загрузятся данные со следующего экрана, прежде чем стартовать анимацию. В Android view фреймворке есть методы, с помощью которых можно отсрочить переход между фрагментами с postponeEnterTransition() API и startPostponedEnterTransition() API. Эти API помогают убедиться, что элементы UI на следующем экране (как правило, изображения, которые загружаются из сети) готовы к отрисовке, прежде чем UI анимирует переход на этот экран. Подробную информацию и способы применения вы найдёте в Android Motion sample.

Читайте далее

Обзор архитектуры

События UI

Доменный слой

Слой данных


Больше полезного про Android — в нашем телеграм-канале Surf Android Team. Здесь мы публикуем кейсы, лучшие практики, новости и вакансии Surf, а также проводим прямые эфиры. Присоединяйтесь!

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

1. Введение

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

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

2. Структура приложения

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

Возвращаясь к нашему приложению To do, мы можем представить, что у нас есть следующие требования:

  • Там должен быть список предметов (для выполнения предметов).
  • Пользователь может добавить элемент к существующим.
  • Предметы должны иметь приоритетный цвет.
  • Приложение должно работать на смартфоне и планшете.

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

фигура 1

фигура 1

фигура 2

фигура 2

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

Теперь, когда мы примерно знаем, какой будет навигация и как будет выглядеть пользовательский интерфейс приложения, мы можем приступить к созданию нашего приложения с помощью нашей IDE. В этом случае мы будем использовать Eclipse + ADT. Мы создаем новый проект Android, который мы можем назвать Todo . Мы не будем рассказывать, как создать проект Android с использованием Eclipse, поэтому мы предполагаем, что вы уже знакомы с этой IDE. Посмотрите наш пример «Android Hello World», если вы не знакомы с процессом.

2.1. Список предметов с ListView и объектной моделью

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

1

2

3

4

5

6

7

8

public class Item implements Serializable {

    private String name;   

    private String descr;

    private Date date;

    private String note;

    private TagEnum tag;

}

Это будет основной класс, который мы будем обрабатывать в нашем приложении. Глядя на проект Android, который мы только что создали, мы можем заметить, что под каталогом макетов есть макет по умолчанию, называемый activity_main.xml . Это макет по умолчанию, созданный инструментом.

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <ListView

        android:id="@+id/listItmes"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</RelativeLayout>

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

Рисунок 3

Рисунок 3

Как вы можете заметить, каждая строка имеет изображение слева, которое представляет приоритет задачи и некоторую информацию. В настоящее время мы не рассматриваем применение какого-либо стиля к нашим строкам. Чтобы иметь такую ​​строку в нашем ListView , мы должны создать макет строки, который мы будем использовать в нашем настраиваемом адаптере. Таким образом, мы можем создать новый файл с именем item_layout.xml в директории layout . Этот файл выглядит так:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <ImageView

        android:id="@+id/tagView"

        android:layout_width="30dp"

        android:layout_height="20dp"

        android:background="@color/red" />

    <TextView

        android:id="@+id/nameView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_toRightOf="@id/tagView" />

    <TextView

        android:id="@+id/descrView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/nameView"

        android:layout_toRightOf="@id/tagView" />

    <TextView

        android:id="@+id/dateView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_alignParentRight="true" />

</RelativeLayout>

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

1

android:layout_toRightOf="@id/tagView"

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

1

2

android:layout_alignParentRight="true"

android:layout_alignParentBottom="true"

Теперь, когда у нас есть макет, мы должны построить адаптер. Мы расширим ArrayAdapter и переопределим некоторые методы, чтобы мы могли обрабатывать данные нашей модели и новый макет. Мы называем этот адаптер ToDoItemAdaper , поэтому мы имеем:

1

2

3

4

5

6

7

8

9

public class ToDoItemAdapter extends ArrayAdapter<Item> {

    private Context ctx;

    private List<Item> itemList;

    public ToDoItemAdapter(Context context, List<Item> itemList) {

        super(context, R.layout.item_layout);

        this.ctx = context;

        this.itemList = itemList;

    }

}

Конструктор получает Context и itemList качестве параметров, последний параметр содержит список элементов todo. Вы можете заметить, что когда мы вызываем супер метод, мы R.layout.item_layout пользовательский макет с именем R.layout.item_layout . Теперь нам нужно переопределить один из наиболее важных методов, называемый getView , который используется для создания View и рендеринга макета строки:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

@Override

public View getView(int position, View convertView, ViewGroup parent) {

    View v = convertView;

    ItemHolder h = null;

    if (v == null) {

        LayoutInflater inf = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        v = inf.inflate(R.layout.item_layout, parent, false);

        ImageView iv = (ImageView) v.findViewById(R.id.tagView);

        TextView nameTv = (TextView) v.findViewById(R.id.nameView);

        TextView descrView = (TextView) v.findViewById(R.id.descrView);

        TextView dateView = (TextView) v.findViewById(R.id.dateView);

        h = new ItemHolder();

        h.tagView = iv;

        h.nameView = nameTv;

        h.descrView = descrView;

        h.dateView = dateView;

        v.setTag(h);

    }

    else       

       h = (ItemHolder) v.getTag();

    h.nameView.setText(itemList.get(position).getName());      

    h.descrView.setText(itemList.get(position).getDescr());

    h.tagView.setBackgroundResource(itemList.get(position).getTag().getTagColor());

    h.dateView.setText(sdf.format(itemList.get(position).getDate()));

    return v;

}

В этом методе мы проверяем в начале, является ли представление, которое мы получаем как параметр, нулевым. В этом случае мы должны надуть наш макет. Если вы заметили, мы использовали шаблон ViewHolder , чтобы сделать прокрутку ListView более плавной. Мы создали небольшой внутренний класс ItemHolder который содержит ссылки на View внутри нашего пользовательского макета:

1

2

3

4

5

6

7

static class ItemHolder {

    ImageView tagView;

    TextView nameView;

    TextView descrView;

    TextView dateView;     

}

Одна вещь, которую вы должны заметить, это то, как мы обрабатывали цвет фона ImageView . Мы использовали setBackgroundResource для установки imageview изображения. Этот метод принимает int, представляющий идентификатор ресурса, который мы хотим использовать в качестве фона:

1

h.tagView.setBackgroundResource(itemList.get(position).getTag().getTagColor());

Глядя на наш класс модели, мы можем заметить, что метод getTag() возвращает экземпляр класса TagEnum . Это перечисление, определенное следующим образом:

01

02

03

04

05

06

07

08

09

10

11

12

13

public enum TagEnum {

    BLACK(R.color.black,"Black"), RED(R.color.red, "Red"),

    GREEN(R.color.green, "Green"), BLUE(R.color.blue, "Blue"),YELLOW(R.color.yellow,"Yellow");

    private int code;

    private String name;

    private TagEnum(int code, String name) {

        this.code = code;

        this.name = name;

    }

    public int getTagColor() {

        return this.code;

    }

}

В перечислении мы определяем различные цвета, которые мы хотим поддерживать, и в качестве первого параметра мы передаем идентификатор ресурса. Если вы помните, в предыдущей статье мы говорили о том, как определить цвет ресурса в формате XML. Мы уже знаем, что нам нужно создать XML-файл в res/values который мы можем назвать colors.xml :

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

<resources>

    <color name="red" >#FF0000

    </color>

    <color name="green" >#00FF00

    </color>

    <color name="blue" >#0000FF

    </color>

    <color name="black" >#000000

    </color>

    <color name="yellow" >#FFAA00

    </color>

</resources>

В определении цвета перечисления мы ссылались на этот цвет, используя R.color.color_name , поэтому, когда мы используем метод getTagColor в пользовательском адаптере getView , мы получаем идентификатор ресурса, который будет использоваться фоном изображения. Важно понимать, что мы не жестко кодировали цвета в конструкторе: например, мы могли напрямую использовать шестнадцатеричный код цвета, например, # FF0000 для красного и так далее.

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

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

2.2. Поддержка нескольких устройств и особенности компоновки

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

В то же время мы не хотим разрабатывать две разные ветви кода: одну для смартфона и одну для планшета. Мы переписали бы тот же код, изменив только некоторые детали и измерения. Android помогает нам решить эту проблему: мы говорили о Fragment в предыдущей статье . Таким образом, мы могли бы создать фрагмент, который обрабатывает пользовательский интерфейс, чтобы добавить новый элемент в список. Фрагмент инкапсулирует набор компонентов и поведения действий, чтобы мы могли повторно использовать этот фрагмент кода в различных действиях. На рисунках ниже показана ситуация, с которой мы должны справиться:

Рисунок 4

Рисунок 4

Рисунок 5

Рисунок 5

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

Мы можем предположить, что размер экрана составляет не менее 600 dp, поэтому мы хотим разделить экран на другие области и определить новый макет в res/layout-sw600dp :

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <ListView

        android:id="@+id/listItmes"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="1" />

    <FrameLayout

        android:id="@+id/frm1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="1" />

</LinearLayout>

где FrameLayout будет «заполняться» динамически в зависимости от потока навигации.

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

2,3. Добавить элемент макета пользовательского интерфейса

Если мы запустим приложение, то получим пустой список без элементов. Мы должны создать новый пользовательский интерфейс. Поэтому, учитывая соображения, которые мы делали ранее, мы создаем Fragment который обрабатывает функциональность добавления элемента, называя его NewItemFragment . Фрагмент имеет сложный жизненный цикл, но для этого мы можем переопределить только метод onCreateView . Этот метод отвечает за создание пользовательского интерфейса. Как всегда, мы должны сначала создать макет. В нашей IDE в res/layout мы создаем еще один XML-файл, который мы называем add_item_layout.xml :

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <TextView

        android:id="@+id/txtTitle"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:text="@string/addItem" />

    <TextView

        android:id="@+id/itemName"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/txtTitle"

        android:layout_marginStart="10dp"

        android:text="@string/addItemName" />

    <EditText

        android:id="@+id/edtName"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/itemName"

        android:hint="@string/addItemNameHint" />

    <TextView

        android:id="@+id/itemDescr"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/edtName"

        android:layout_marginTop="10dp"

        android:text="@string/addItemDescr" />

    <EditText

        android:id="@+id/edtDescr"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/itemDescr"

        android:hint="@string/addItemDescrHint" />

    <TextView

        android:id="@+id/itemNote"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/edtDescr"

        android:layout_marginTop="10dp"

        android:text="@string/addItemNote" />

    <EditText

        android:id="@+id/edtNote"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/itemNote"

        android:hint="@string/addItemNoteHint" />

    <TextView

        android:id="@+id/itemDate"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/edtNote"

        android:layout_marginTop="10dp"

        android:text="@string/addItemDate" />

    <TextView

        android:id="@+id/inDate"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/itemDate"

        android:layout_marginTop="10dp" />

    <TextView

        android:id="@+id/itemTime"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/inDate"

        android:layout_marginTop="10dp"

        android:text="@string/addItemTime" />

    <TextView

        android:id="@+id/inTime"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/itemTime"

        android:layout_marginTop="10dp" />

    <TextView

        android:id="@+id/itemTag"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/inTime"

        android:layout_marginTop="10dp"

        android:text="@string/addItemTag" />

    <Spinner

        android:id="@+id/tagSpinner"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/itemTag" />

    <Button

        android:id="@+id/addBtn"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:text="@string/addButton" />

</RelativeLayout>

Это очень простой макет, созданный TextView и EditText : первый используется для отображения текстовых сообщений в пользовательском интерфейсе, а другой — для приема пользовательских данных. В этом макете важны два компонента: Spinner и Spinner Date/Time picker .

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

2,4. Цвет метки / приоритетный спиннер

Для правильной работы Spinner необходим адаптер массива. Android предоставляет список адаптеров, которые мы можем использовать, но мы хотим настроить их, потому что мы хотим показать изображение с цветом. Затем мы должны создать пользовательский адаптер так же, как мы делали для ListView . Сначала мы создаем макет строки с именем spinner_tag_layout.xml :

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <ImageView

        android:id="@+id/tagSpinnerImage"

        android:layout_width="30dp"

        android:layout_height="20dp" />

    <TextView

        android:id="@+id/tagNameSpinner"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_toRightOf="@id/tagSpinnerImage" />

</RelativeLayout>

и наконец мы создаем наш адаптер:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

public class TagSpinnerAdapter extends ArrayAdapter<TagEnum> {

    private Context ctx;

    private List<TagEnum> tagList;

    public TagSpinnerAdapter(Context ctx, List<TagEnum> tagList) {

        super(ctx, R.layout.spinner_tag_layout);

        this.ctx = ctx;

        this.tagList = tagList;

    }

    @Override

    public View getDropDownView(int position, View convertView, ViewGroup parent) {

        return _getView(position, convertView, parent);

    }

    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        return _getView(position, convertView, parent);

    }

    private View _getView(int position, View convertView, ViewGroup parent) {

        View v = convertView;

        if (v == null) {

            LayoutInflater inf = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            v = inf.inflate(R.layout.spinner_tag_layout, parent, false);

        }

        ImageView iv = (ImageView) v.findViewById(R.id.tagSpinnerImage);

        TextView tv = (TextView) v.findViewById(R.id.tagNameSpinner);

        TagEnum t = tagList.get(position);

        iv.setBackgroundResource(t.getTagColor());

        tv.setText(t.getName());

        return v;

    }

}

Анализируя приведенный выше код, мы замечаем, что этот адаптер обрабатывает объекты TagEnum и мы переопределяем два метода getView и getDropDownView . Мы обрабатываем эти методы одинаково. Как вы можете заметить, мы сделали почти то же самое, что уже сделали для ListView.

Во фрагменте, который содержит эти компоненты пользовательского интерфейса, мы должны найти ссылку на Spinner и установить пользовательский макет, который мы определили выше:

1

2

3

Spinner sp = (Spinner) v.findViewById(R.id.tagSpinner);

TagSpinnerAdapter tsa = new TagSpinnerAdapter(getActivity(), tagList);

sp.setAdapter(tsa);

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

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

01

02

03

04

05

06

07

08

09

10

11

12

13

sp.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

    @Override

    public void onItemSelected(AdapterView<?> adptView, View view,

        int pos, long id) {

        currentTag = (TagEnum) adptView.getItemAtPosition(pos);

    }

    @Override

    public void onNothingSelected(AdapterView<?> arg0) {

        }

    });

и мы храним результат в атрибуте класса.

2.5. Выбор даты и времени

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

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

public static class DatePickerFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener {

    @Override

        public Dialog onCreateDialog(Bundle savedInstanceState) {

            final Calendar c = Calendar.getInstance();

            c.setTime(selDate);

            int year = c.get(Calendar.YEAR);

            int month = c.get(Calendar.MONTH);

            int day = c.get(Calendar.DAY_OF_MONTH);

            return new DatePickerDialog(getActivity(), this, year, month, day);

        }

    @Override

    public void onDateSet(DatePicker view, int year, int monthOfYear,

                int dayOfMonth) {

        Calendar c = Calendar.getInstance();

        c.set(year, monthOfYear, dayOfMonth, 9, 0);

        selDate = c.getTime();

        tvDate.setText(sdfDate.format(selDate));

    }

}

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

Таким же образом мы обрабатываем TimePickerFragment , но в этом случае мы расширяем TimePickerDialog :

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

public static class TimePickerFragment extends DialogFragment implements TimePickerDialog.OnTimeSetListener {

    @Override

     public Dialog onCreateDialog(Bundle savedInstanceState) {

            final Calendar c = Calendar.getInstance();

            c.setTime(selDate);

            int hour = c.get(Calendar.HOUR_OF_DAY);

            int minute = c.get(Calendar.MINUTE);

         return new TimePickerDialog(getActivity(), this, hour, minute,

                        DateFormat.is24HourFormat(getActivity()));

            }

          @Override

          public void onTimeSet(TimePicker view, int hourOfDay, int minute) {

        Calendar c = Calendar.getInstance();

        c.setTime(selDate);

        c.set(Calendar.HOUR_OF_DAY, hourOfDay);

        c.set(Calendar.MINUTE, minute);

        selDate = c.getTime();

        tvTime.setText(sdfTime.format(selDate));

    }

}

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

1

2

tvDate = (TextView) v.findViewById(R.id.inDate);

tvTime = (TextView) v.findViewById(R.id.inTime);

чтобы получить ссылку на TextView а затем мы просто реализуем слушатель:

1

2

3

4

5

6

7

tvDate.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

        DatePickerFragment dpf = new DatePickerFragment();

        dpf.show(getFragmentManager(), "datepicker");

    }

});

В результате мы имеем:

Рисунок 6

Рисунок 6

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

Мы можем определить этот интерфейс в классе фрагмента:

1

2

3

public interface AddItemListener {

    public void onAddItem(Item item);

}

Это очень простой интерфейс, созданный только одним методом. Теперь у нас есть:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

Button addBtn = (Button) v.findViewById(R.id.addBtn);

addBtn.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

        Item i = new Item();

        i.setName(edtName.getText().toString());

        i.setDescr(edtDescr.getText().toString());

        i.setNote(edtNote.getText().toString());

        i.setTag(currentTag);

        i.setDate(selDate);

        ( (AddItemListener) getActivity()).onAddItem(i);

    }

});

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

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

public class NewItemActivity extends Activity implements NewItemFragment.AddItemListener{

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        NewItemFragment nif = new NewItemFragment();

        getFragmentManager().beginTransaction().add(android.R.id.content, nif).commit();

    }

    @Override

    public void onAddItem(Item item) {

        Log.d("TODO", "onAddItem");

        Intent i = new Intent();

        i.putExtra("item", item);

        setResult(RESULT_OK,i);

        finish();

    }

}

В методе onCreate мы создаем новый экземпляр нашего класса фрагмента и, используя FragmentManager показываем фрагмент на экране.

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

2.6. Основное занятие

Основное действие — это сердце приложения, это действие, которое вызывается при запуске. Он устанавливает начальный макет и показывает список элементов, который мы ранее описали:

1

2

3

itemListView = (ListView) findViewById(R.id.listItmes);

adpt = new ToDoItemAdapter(this, itemList);

itemListView.setAdapter(adpt);

Теперь мы должны проверить, работает ли наше приложение на смартфоне или планшете, чтобы мы могли изменить поведение активности. Мы можем сделать это, проверив, есть FrameLayout компонент FrameLayout в определении макета:

1

2

if (findViewById(R.id.frm1) != null)

   isTablet = true;

2,7. Панель действий

В этом упражнении мы добавляем панель действий (известный шаблон Android) с действием: добавить новый элемент. Чтобы определить его, мы создаем (если не существует) файл XML в res/menu :

1

2

3

4

5

6

7

8

9

    <item

        android:id="@+id/action_add"

        android:icon="@android:drawable/ic_menu_add"

        android:orderInCategory="0"

        android:showAsAction="always"/>

</menu>

В результате получаем:

Рисунок 7

Рисунок 7

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

@Override

public boolean onOptionsItemSelected(MenuItem item) {

    int menuId = item.getItemId();

    switch (menuId) {

        case R.id.action_add: {

            if (!isTablet) {

                Intent i = new Intent(this, NewItemActivity.class);

                startActivityForResult(i, ADD_ITEM);

                break;

            }

            else {

                Log.d("TODO", "Tablet");

                FragmentTransaction ft = getFragmentManager().beginTransaction();

                NewItemFragment nif = new NewItemFragment();

                ft.replace(R.id.frm1, nif);

                ft.commit();

            }

        }

    }

}

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

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

1

2

3

4

5

6

7

8

9

@Override

public void onAddItem(Item item) {

    Log.d("TODO", "onAddItem");

    Intent i = new Intent();

    i.putExtra("item", item);

    setResult(RESULT_OK,i);

    finish();

}

В этом методе мы создаем Intent, который содержит результат, и передаем его обратно в вызывающее действие ( MainActivity ), и мы завершаем действие. В MainActivity мы должны быть готовы обработать результат:

01

02

03

04

05

06

07

08

09

10

11

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

    Log.d("TODO", "OnResult");

    if (requestCode == ADD_ITEM) {

        if (resultCode == RESULT_OK) {

            Log.d("TODO", "OK");

            Item i = (Item) data.getExtras().getSerializable("item");

            itemList.add(i);

            adpt.notifyDataSetChanged();

        }

    }

}

В этом упражнении мы извлекаем объект предмета, сохраненный в Intent которое мы получаем в результате, и добавляем его в список предметов. Когда мы закончим, мы вызываем метод notifyDataSetChange для обновления ListView .

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

Рисунок 8

Рисунок 8

В этом случае мы должны просто реализовать интерфейс, указанный фрагментом, как мы делали раньше:

1

2

3

4

5

6

7

@Override

public void onAddItem(Item item) {

    itemList.add(item);

    adpt.notifyDataSetChanged();

    NewItemFragment nif = (NewItemFragment) getFragmentManager().findFragmentById(R.id.frm1);

    getFragmentManager().beginTransaction().remove(nif).commit();

}

Обратите внимание, что в последней части мы удалили фрагмент в конце.

3. Стилизация приложения

К настоящему времени мы не рассмотрели стиль приложения, но мы знаем, что можем применять стиль к каждому компоненту пользовательского интерфейса. Мы можем изменить все цвета и внешний вид пользовательского интерфейса, реализуя наш стиль и выпуская бренд приложения. Например, мы хотим применить стиль к строке listView, делая их немного более привлекательными. Мы создаем (если он еще не существует) файл с именем style.xml разделе res/values и здесь мы можем определить наш стиль, как мы обсуждали в предыдущей статье :

01

02

03

04

05

06

07

08

09

10

11

12

13

14

<style name="dateStyle">

        <item name="android:textAppearance">?android:textAppearanceSmall</item>

        <item name="android:textColor">@color/red</item>

    </style>

     <style name="descrStyle">

        <item name="android:textStyle">italic</item>

        <item name="android:textAppearance">?android:textAppearanceSmall</item>

    </style>

     <style name="nameStyle">

         <item name="android:textAppearance">?android:textAppearanceMedium</item>

         <item name="android:textStyle">bold</item>

     </style>

Мы определили три разных стиля и хотим применить их к нашей строке списка:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

<TextView

    android:id="@+id/nameView"

    style="@style/nameStyle"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_alignParentTop="true"

    android:layout_toRightOf="@id/tagView" />

<TextView

    android:id="@+id/descrView"

    style="@style/descrStyle"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_below="@id/nameView"

    android:layout_toRightOf="@id/tagView" />

<TextView

    android:id="@+id/dateView"

    style="@style/dateStyle"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_alignParentBottom="true"

    android:layout_alignParentRight="true" />

Запустив приложение с этим стилем мы имеем:

Рисунок 9

Рисунок 9

4. Вывод

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

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

5. Загрузите исходный код

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

Building your Android UI Everything you need to know about Views

Every mobile app has some form of user interface (UI), and in Android user interfaces are created using Views.

If you’re just getting started with Android development, then it makes sense to familiarize yourself with Views as soon as possible, as they’re central to many “Hello World” apps and Android tutorials.

Even if you’ve been developing Android apps for a while, it’s easy to get into a rut! If you’re using the same Views over and over, then now’s the perfect time for a refresher on all the different Views that are included in the Android platform.

In this article, we’ll be taking a closer look at this essential building block of Android development, before exploring some of the most commonly-used Views that you can use in your Android apps.

What is a View, exactly?

View objects, sometimes referred to as “widgets” are the building blocks of all Android UIs.

Each View occupies a rectangular area of the screen and typically draws something that the user can see, such as text or an image. In addition to displaying content, some Views also provide interactive functionality, such as Buttons, EditTexts and Spinners. Whenever an event occurs Android dispatches this event to the appropriate View, which then handles the event and notifies any listeners.

You build your Android UI using a selection of Views

The easiest way to add a View to your Java or Kotlin project, is to define that View within an XML layout resource file. Android provides a simple XML syntax that corresponds to the different View subclasses, for example in the following snippet we’re using XML to instantiate a TextView:

Code

<TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

The Android framework is responsible for measuring, laying out and drawing your Views, so you don’t have to explicitly call any methods to perform these actions.

To build a layout, simply keep adding View elements to your XML file, similar to how you create webpages in HTML – just try to keep nesting to a minimum, as it can negatively impact your application’s performance. User interfaces with “shallow” View hierarchies tend to be drawn faster, so if you’re going to deliver a high-performing app then you’ll need to avoid nesting wherever possible.

If you know all of a View’s properties at build time, then you can define this View entirely in XML. By keeping your UI code separate from your application code, you can provide alternate layouts that are optimized for different screen sizes, orientations and languages. This separation also makes your application code easier to read, test and modify, as it isn’t muddled up with UI code.

Since it’s the recommended approach, we’ll be defining Views in XML throughout this tutorial, although you can create Views programmatically where required.

If you need to edit a View’s properties at runtime, then’ll typically have to define some, or all of that View’s properties programmatically in Java or Kotlin. For example, in the following snippet we’re defining a TextView in Java:

Code

//Create a TextView programmatically//

        TextView tv = new TextView(getApplicationContext());

//Define the View’s layout parameters//

        LayoutParams lp = new LinearLayout.LayoutParams(

//Set the View’s width//

                  LayoutParams.WRAP_CONTENT,

//Set the View’s height//

                  LayoutParams.WRAP_CONTENT);

//Apply the layout parameters to the TextView//

        tv.setLayoutParams(lp);

//Set the text//

        tv.setText("Hello World!");

//Add the TextView to the parent ViewGroup//

        rl.addView(tv);
    }
}

Note that you may be able to declare your app’s default layout in XML, and then modify some of its properties at runtime.

Working with Views: Common XML attributes

When creating a View, you’ll need to define various View properties, using XML attributes. Some of these attributes will be unique to that particular View, but there are a number of XML attributes that you’ll encounter over and over again, regardless of the kind of View you’re working with.

Identifying your Views

Every View must have an integer ID that uniquely identifies that particular View. You define integer IDs in your layout files, for example:

Code

android:id="@+id/hello_world"

The + symbol signifies that this is a new name that must be created and added to your project’s R.java file.

When you need to work with a View, you can reference it using its View ID. Typically, you’ll reference a View by creating an instance of that View object in your Activity’s onCreate() method, for example:

Code

TextView myTextView = (TextView) findViewById(R.id.hello_world);

The ID integer technically doesn’t need to be unique throughout the entire tree, just within the part of the tree you’re searching. However, to avoid conflicts and confusion it’s recommended that you use completely unique View IDs, wherever possible.

Layout parameters: Width and height

XML attributes that start with “layout_” define a View’s layout parameters. Android supports a variety of layout parameters, but as a minimum you must define a width and height using the layout_width and layout_height attributes.

Android devices have screens of varying dimensions and pixel densities, so 10 pixels doesn’t translate to the same physical size across every device. If you define a View’s width and height using exact measurements, then this can result in user interfaces that only display and function correctly on devices with specific screens, so you should never use any exact measurements when creating your Views.

Instead, you can define a View’s width and height, using any of the following relative measurements:

  • wrap_content. This View should be just big enough to display its content, plus any padding.
  • match_parent. This View should be as big as its parent ViewGroup will allow.
  • dp. If you need more control over a View’s sizing, then you can provide a density-independent pixel measurement, for example android:layout_width=”50dp.” Note that one dp is roughly equal to one pixel on a “baseline” medium-density screen.
  • sp. If you want to size text using a density-independent pixel measurement, then you should use scalable pixels (sp), for example: android:textSize=”20sp.” Scalable pixels ensure that your app’s text respects the device’s selected text size, so your text will appear bigger on devices that are set to display Large text, and smaller on devices that are set to display Small text.

Give your content some breathing space!

You can use padding to insert some space between the edges of a View and the View’s content, which can be useful for giving your content some “breathing space” and preventing your UI from looking overly busy or cluttered.

The following screenshot shows an ImageView with 10dp of padding:

You can create breathing space by adding padding to your Views

An ImageView with 20dp of padding.

Android provides the following padding attributes:

  • android:padding. Adds extra space to all four edges. If you define a android:padding value, then it’ll take precedence over any edge-specific values, such as paddingLeft and paddingTop, but it won’t override paddingStart or paddingEnd.
  • android:paddingBottom. Adds extra space to the bottom edge.
  • android:paddingEnd. Adds extra space to the end edge.
  • android:paddingHorizontal. Adds extra space to the left and right edges. If you define a android:paddingHorizontal value then it’ll take precedence over paddingLeft and paddingRight, but not paddingStart or paddingEnd.
  • android:paddingLeft. Adds extra space to the left edge.
  • android:paddingRight. Adds extra space to the right edge.
  • android:paddingStart. Adds extra space to the start edge.
  • android:paddingTop. Adds extra space to the top edge.
  • android:paddingVertical. Adds extra space to the top and bottom edges. If you define a android:paddingVertical value, then it’ll take precedence over paddingTop and paddingBottom.

Margins: Adding space around your Views

While padding is applied between the edges of the View and the View’s contents, margins are applied outside of the View’s bounds. You can use margins to create space between your Views, or to create space between a View and the screen’s borders.

If your app contains multiple interactive UI elements, then margins can help ensure the user always activates the correct control, particularly for users who have manual dexterity issues.

Android provides the following margin attributes:

  • android:layout_margin. Adds extra space to the left, top, right and bottom sides of a View, for example android:layout_marginRight=”10dp.” If you define a layout_margin value, then it’ll take precedence over any edge-specific values.
  • android:layout_marginBottom. Adds extra space to the bottom side of the View.
  • android:layout_marginEnd. Adds extra space to the end side of the View.
  • android:layout_marginHorizontal. Adds extra space to the left and right sides of the View. Declaring a layout_marginHorizontal value is equivalent to declaring a layout_marginLeft and a layout_marginRight value. A layout_marginHorizontal value will take precedence over any edge-specific values.
  • android:layout_marginLeft. Adds extra space to the left side of the View.
  • android:layout_marginRight. Adds extra space to the right side of the View.
  • android:layout_marginStart. Adds extra space to the start side of the View.
  • android:layout_marginTop. Adds extra space to the top side of the View.
  • android:layout_marginVertical. Adds extra space to the top and bottom sides of the View. Declaring a layout_marginVertical value is equivalent to declaring a layout_marginTop and a layout_marginBottom value. A layout_marginVertical value will take precedence over any edge-specific values.

What Android Views can I use?

Now we’ve covered some common layout attributes, let’s take a closer look at some of the Views that are provided as part of the Android SDK.

Displaying text, with TextViews

You use TextViews to display text to your users, including interactive text such as hyperlinks, email addresses and phone numbers.

To create a TextView, simply add a <TextView> element to your layout resource file, and then specify your text using the android:text attribute and a string:

Code

<TextView
        android:id="@+id/hello_world"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="@string/helloWorld" />

If required, you can set or modify the View’s text at runtime, from your project’s Java code:

Code

public class MainActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         final TextView helloWorldTextView = (TextView) findViewById(R.id.hello_world);
         helloWorldTextView.setText(R.string.new_text);
     }
 }

You can also style your text, using elements such as android:textColor, android:fontFamily, and android:textStyle, which has possible values of bold, italic, and bolditalic.

EditTexts: Creating editable, interactive text

EditText is an extension of the TextView class, which allows users to enter text into the View or modify the View’s existing text. Some common examples of EditTexts include login forms where the user can enter their email address and password, and forms where you can enter your payment details.

A login form created using two EditTexts and a Button

Sometimes, an EditText will only accept a certain type of text input, such as a phone number, password, or email address. You can often improve the user experience by declaring the expected input type, which will affect the default keyboard that’s displayed to the user. For example, if your EditText accepts a phone number, then you can use android:inputType=”phone” to display the numerical keyboard and make it easier for the user to enter that telephone number.

Code

<EditText
    android:id="@+id/phoneNumber"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:inputType="phone" />

Android supports a list of inputTypes, including some that specify additional behavior, for example android:inputType=”textPassword” automatically masks the user’s input, which reduces the chances of someone spying on their password.

Depending on the expected input type, you may be able to further streamline the user experience by combining inputType values with attributes that define additional behaviour, such as whether to provide spelling suggestions, or automatically capitalize new sentences. For example, if you wanted your EditText to capitalize the first word of a sentence and auto-correct spelling mistakes, then you’d use the following:

Code

android:inputType=
        "textCapSentences|textAutoCorrect

By default, Android’s virtual keyboard provides a user action button, such as a Next or Done button. However, these default actions aren’t always appropriate for the currently-selected EditText, for example if your EditText is a search field, then a Search action makes much more sense than Next or Done.

You can specify an alternative action for your EditText, using the android:imeOptions attribute and one of the many supported values, such as an actionSearch which performs a Search operation using the EditText’s contents.

Finally, sometimes you may want to be notified when the user changes the contents of your EditText. For example if your password EditText requires a password that’s at least ten characters long and features a mixture of letters, symbols and numbers, then you can improve the user experience by automatically checking the user’s input as they’re typing and then notifying them of any issues with their password, before they hit the Register button. You can register to receive these callbacks, by adding a TextWatcher to your EditText.

Displaying PNGs, JPGs and GIFs

You can use the ImageView class to display images. These images can be drawables that you instantiate from an image resource that’s saved in your project, or they can be images that your app downloads over the device’s Internet connection.

To instantiate a drawable from an image resource, you need to add a PNG, JPG or GIF to your project’s res/drawable directory and then reference that file from your XML layout. You’ll need to use the image’s file name as its resource ID, so if you had a file named scenery.jpg then you’d display that image using the following:

Code

<ImageView
         android:id="@+id/myImage"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/scenery" />

The following screenshot shows this scenery drawable, rendered in Android Studio:

You can display a drawable by adding an ImageView to your layout

Alternatively, in Android 5.0 (API level 21) and higher you can use vector drawables, which define an image as a set of points, lines, and curves. Vector drawables can be scaled without loss of display quality, so you can use a single file for all of Android’s different screen densities.

Creating a custom vector drawable is beyond the scope of this tutorial, but you can get a taste for working with vectors, by taking a look at Vector Asset Studio, which is included as part of Android Studio.

You can use Vector Asset Studio to quickly and easily add any of the stock Material design icons to your project, in vector drawable format:

  • In Android Studio, Control-click your project’s drawable folder.
  • Select New > Vector Asset.
  • In Asset type, select Clip Art.
  • Select the Clip Art button, which displays the Android logo by default.
  • Choose any of the Material design icons; I’m using “done.”

Create a vector asset drawable, using the Vector Asset Studio

  • Give this asset a descriptive name, and then click Next.
  • Read the onscreen information, and if you’re happy to proceed then click Finish.
  • Open your project’s drawable folder and you should see a new XML file that defines your chosen Material icon as a vector drawable. Here’s the contents of my vector drawable resource:

Code

<vector xmlns:android="http://schemas.android.com/apk/res/android"
       android:width="24dp"
       android:height="24dp"
       android:viewportWidth="24.0"
       android:viewportHeight="24.0">
   <path
       android:fillColor="#FF000000"
       android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-1.4,-1.4L9,16.2z"/>
</vector>

You then just need to reference this vector drawable in your ImageView, in exactly the same way you’d reference a standard drawable resource, for example  android:src=”@drawable/done_vector.”

Buttons and ImageButtons

Buttons and ImageButtons are Views that listen for clicks and then call a method in your code every time the user interacts with that button.

You can communicate the action that’ll occur when the user interacts with your button, using a text label, an icon, or a text label and an icon.

In the following snippet, we’re creating a Button that features a text label:

Code

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/button_label"/>

To create an ImageButton, you’ll need to add an image file to your project and then reference it in exactly the same way you referenced your drawables in the previous section. For example:

Code

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"/>

If you want to create a button that features an image and a text label, then you’ll need to add a text label as normal, and then reference your drawable using one of the following attributes:

  • android:drawableLeft. Position the drawable to the left of the text.
  • android:drawableRight. Position the drawable to the right of the text.
  • android:drawableStart. Position the drawable to the start of the text.
  • android:drawableEnd. Position the drawable to the end of the text.
  • android:drawableTop. Position the drawable above the text.
  • android:drawableBottom. Position the drawable below the text.

Here, we’re creating a button_icon drawable and placing it at the start of the Button’s button_label text:

Code

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/button_label"
   android:drawableStart="@drawable/button_icon"/>

In addition to adding labels and images, you can customize your Buttons and ImageButtons by adding a background image or a color resource, using the android:background attribute. For example, you can turn a button blue, by adding the following to your Button or ImageButton declaration:

Code

android:background="#0000FF"

Whenever the user interacts with a button, that Button or ImageButton will receive an onClick event. You’ll need to define a handler for this event, using the android:onClick attribute.

The value of the onClick attribute must correspond to a public method, which will be called in response to the onClick event, for example:

Code

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/button_label"
   android:onClick="displayToast" />

Next, you’ll need to implement this method in the Activity that’s hosting your Button or ImageButton. This method must be public, return void, and define a View as its only parameter, for example:

Code

public void displayToast(View view) {
       Toast.makeText(MainActivity.this,
               "Your Message", Toast.LENGTH_LONG).show();

   }

}

Alternatively, you can declare an event handler programmatically. In Java, this means creating an View.OnClickListener object and then assigning it to the Button or ImageButton, using setOnClickListener(View.OnClickListener).

Give your users options, with CheckBoxes

CheckBoxes allow the user to choose one or more options from a vertical list.

CheckBoxes allow you to create vertically-scrolling lists of options.

You create a CheckBox by adding a <Checkbox> item to your XML layout:

Code

<CheckBox android:id="@+id/yes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/yes"
        android:onClick="onCheckboxClicked"/>

Since CheckBoxes typically allow the user to select multiple items, you’ll need to add an android:onClick attribute to each individual <CheckBox> element, and then reference the method that’ll be called in response to CheckBox click events.

When you implement the corresponding method in your hosting Activity, you’ll need to verify which CheckBox was selected, and then perform an appropriate action depending on the user’s selection. For example, if we created Yes and No CheckBoxes, then we’d add the following to our hosting Activity:

Code

public void onCheckboxClicked(View view) {
    boolean checked = ((CheckBox) view).isChecked();

//Verify which checkbox is selected//

    switch(view.getId()) {
         case R.id.yes:

//If the “yes” checkbox is selected, then...//

            if (checked)

//Do something//

            else
            Break;

//If the “no” checkbox is selected, then….//

        case R.id.no:

            if (checked)

//Do something//

Views and ViewGroups: Creating RadioButtons

RadioButtons allow the user to choose from a set of mutually-exclusive options, such as the Agree/Disagree buttons commonly found on Terms and Conditions forms.

RadioButtons allow users to choose one or more options from a vertical list

You create each RadioButton by adding a <RadioButton> element to your layout. Since RadioButtons are mutually exclusive you’ll need to arrange all of your <RadioButton> elements inside a <RadioGroup> ViewGroup, which ensures that only one RadioButton can be selected at a time.

Code

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton android:id="@+id/radio_confirm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/confirm"
        android:onClick="onRadioButtonClicked"/>
    <RadioButton android:id="@+id/radio_deny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/deny"
        android:onClick="onRadioButtonClicked"/>
</RadioGroup>

You define a click handler by adding the android:onClick attribute to every RadioButton in your RadioGroup, and then implementing the corresponding method in your hosting Activity. Similar to our CheckBox example, this method needs to verify which RadioButton is currently selected, and then take appropriate action based on the user’s selection.

Code

public void onRadioButtonClicked(View view) {
    boolean checked = ((RadioButton) view).isChecked();

//Verify which RadioButton is selected//

    switch(view.getId()) {

//If the “confirm” radio button is selected, then...//

        case R.id.radio_confirm:

            if (checked)

//Do something//

            Break;

//If the “deny” button is selected, then...//

         case R.id.radio_deny:

             if (checked)

//Do something//

Spinner

When tapped, a Spinner displays a set of values as a dropdown menu.

An Android Spinner displays a set of values as a dropdown menu.

The user can tap any item in the Spinner, and your application will perform an action based on their selection. By default, a Spinner always displays the currently-selected value.

A functioning Spinner consists of several components:

  • A <Spinner> element that you add to your layout resource file.
  • A data source that supplies your Spinner with some information; I’ll be using a simple String Array.
  • An ArrayAdapter that converts your data into View items, ready to be displayed in your Spinner.

Let’s start by adding a <Spinner> to our XML layout:

Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <Spinner
       android:id="@+id/location_spinner"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content" />

</LinearLayout>

If the data is predetermined, then you can provide it as a String Array that’s defined in your Strings.xml file:

Code

<resources>
   <string name="app_name">SimpleSpinner</string>
       <string-array name="location_array">
           <item>Argentina</item>
           <item>Armenia</item>
           <item>Australia</item>
           <item>Belgium</item>
           <item>Brazil</item>
           <item>Canada</item>
           <item>China</item>
           <item>Denmark</item>
           </string-array>
           </resources>

You can then deliver this Array to your Spinner using an instance of ArrayAdapter, which you implement in an Activity or Fragment.

To define an ArrayAdapter, we need to complete the following steps:

  • Create an ArrayAdapter from the String Array, using the createFromResource() method.
  • Specify a layout resource that defines how the user’s chosen item should appear in the Spinner. Android provides a simple_spinner_item layout that you should use unless you specifically require a custom layout.
  • Use setDropDownViewResource(int) to specify which layout the Adapter should use for the Spinner dropdown menu. Once again, Android provides a ready-made layout (simple_spinner_dropdown_item) that should be suitable for most projects.
  • Apply the Adapter to your Spinner, by calling setAdapter().

Here’s my completed code:

Code

Spinner spinner = (Spinner) findViewById(R.id.location_spinner);

//Create an ArrayAdapter//

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,

//Populate the spinner using the String Array and the simple_spinner_item layout//

        R.array.location_array, android.R.layout.simple_spinner_item);

//Specify the layout that should be used for the dropdown menu//

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

//Apply the Adapter to the Spinner//

spinner.setAdapter(adapter);

The Spinner will receive an onItemSelected event every time the user selects an item from the dropdown. To process this event, you’ll need to use the AdapterView.OnItemSelectedListener interface to define an onItemSelected() callback method.

In the following code, I’m displaying a toast every time onItemSelected() is invoked, and incorporating the name of the newly-selected item into my toast. I’m also defining a onNothingSelected() callback method, as this is also required by the AdapterView.OnItemSelectedListener interface.

Here’s the completed Activity:

Code

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       Spinner spinner = (Spinner) findViewById(R.id.location_spinner);
       spinner.setOnItemSelectedListener(this);

       ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,

               R.array.location_array, android.R.layout.simple_spinner_item);
                   adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
       spinner.setAdapter(adapter);

   }

   public void onItemSelected(AdapterView<?> parent, View view,
                   int pos, long id) {

       Toast.makeText(parent.getContext(),
               "You've selected n" + parent.getItemAtPosition(pos).toString(),
               Toast.LENGTH_LONG).show();
   }

   @Override
   public void onNothingSelected(AdapterView<?> adapterView) {

//To do//

   }
}

ListViews: Displaying your data as scrollable lists

A ListView displays a collection of items as a vertically-scrolling, single column list. When the user selects an item from a ListView, your app will typically perform an action, such as displaying additional information about the selected item.

Android's ListView displays a collection of items as a vertically-scrolling, single column list.

To create a ListView, you’ll need to add a <ListView> element to your XML layout resource file, and then create an Adapter, which will handle the process of displaying each item in your ListView.

Let’s start by adding a <ListView> to our layout:

Code

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ListView android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/myListView">
    </ListView>

</LinearLayout>

A ListView requests Views on-demand from its assigned Adapter. In our MainActivity, we need to create an Adapter and then associate it with our ListView, using setAdapter(android.widget.ListAdapter).

Code

import android.app.Activity;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.os.Bundle;
import android.widget.ListView;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends Activity {

    String[] countryArray = {"Argentina" , "Armenia", "Australia", "Belgium" ,"Brazil" ,"Canada" , "China" ,
            "Denmark" , "Estonia" , "Finland" , "France" , "Greece" , "Hungary" , "Iceland" , "India" ,
            "Indonesia" , "Italy" , "Japan" , "Kenya" , "Latvia"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ListView listView = (ListView)findViewById(R.id.myListView);

 ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, countryArray);
   listView.setAdapter(adapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(parent.getContext(),
                        "You've selected n" + parent.getItemAtPosition(position).toString(),
                         Toast.LENGTH_LONG).show();

            }
        }
        )
                ;
    }}

Designing unique experiences: Creating custom Views

While there’s no shortage of built-in Views, sometimes you may have very specific requirements that aren’t met by any of Android’s built-in Views. In this scenario you can create your own, custom Android Views.

Most of the time, you’ll create a custom View by identifying a built-in View that almost meets all of your requirements, and then extend this View with your own modifications. However, it’s also possible to create a View from scratch, by extending the base View class.

Creating a custom View is an advanced topic that requires you to complete multiple steps, including providing overrides for the methods that Android usually calls automatically, such as onDraw() and onTouchEvent(), but custom Views can be an effective way to deliver unique experiences to your users.

Wrapping up

In this article, we explored all of the most commonly-used Android Views, plus some of the key attributes you’ll use when creating these Views.

Are there any Views you’d like us to explore in more detail? Let us know in the comments below!

16 марта 2015

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

Android_для_чайников_1_main

Вместо предисловия

О формате статьи

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

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

О многообразии Android устройств

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

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

Часть первая. Первый запуск

Мастер первого запуска

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

На первом шаге вам предложат выбрать язык интерфейса и подключиться к Wi-Fi сети. Если ни одной точки доступа Wi-Fi поблизости нет, то можно воспользоваться мобильным интернетом от вашего сотового оператора.

Android_для_чайников_1-19Android_для_чайников_1-20

Android_для_чайников_1-21Android_для_чайников_1-22

Здесь стоит отметить, что любой современный смартфон, будь то аппарат на Android, iOS или Windows Phone, изначально рассчитан на использование интернета. Безусловно, никто не мешает пользоваться им и без доступа к сети, вот только множество интересных возможностей и полезных функций в этом случае будут вам недоступны. Например, какой смысл от прогноза погоды на главном экране, если он не обновляется неделями? Зачем настраивать на смартфоне почту, если проверить без интернета вы ее все равно не сможете? И много ли толку от чата или клиента любимой социальной сети, в которых не появляется новых сообщений?

У каждого оператора мобильной связи свои тарифы на интернет, которые различаются по стоимости и параметрам. Все их можно условно разделить на две группы — тарифы с пакетом предоплаченного трафика и тарифы, на которых вы платите за израсходованный трафик по факту. И я крайне рекомендую перейти на тарифный план с каким-то включенным объемом трафика, пусть даже и совсем небольшим. Дело в том, что в тарификации мобильного интернета есть один большой подводный камень, который называется «округление трафика». Даже если ваш смартфон «вылез» в интернет на долю секунды и израсходовал на проверку погоды всего пару килобайт, оператор связи все равно округлит это число до какого-то минимально допустимого значения. И иногда это «минимально допустимое значение» может составлять целый мегабайт, что на некоторых тарифных планах может обойтись вам в 5-10 рублей за одно подключение. Что, мягко говоря, совершенно невыгодно. А вот «условно-безлимитные» пакетные предложения от таких проблем избавляют раз и навсегда.

На втором шаге система попросит зайти в существующий Google-аккаунт или создать новый. Аккаунт Google — ваш персональный ключ к самым полезным и интересным возможностям смартфона. Практически все сервисы Google без него работать не будут — а это и фирменный магазин приложений, и синхронизация контактов в облаке, и почта Gmail, и диск Google Drive, и много что еще. Аккаунт Google останется с вами навсегда, даже после того, как вы решите сменить свой старый Android смартфон на новый. А вместе с ним — все ранее купленные приложения, контакты и даже некоторые данные и настройки. Отнеситесь к этому шагу максимально внимательно и постарайтесь не забыть логин и пароль.

Android_для_чайников_1-23Android_для_чайников_1-24

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

Android_для_чайников_1-28Android_для_чайников_1-27

Перенос контактов со старого аппарата

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

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

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

Чайник_17-02Чайник_17-01

Если вы «переезжаете» со смартфона, работающего на какой-то иной платформе, то перенести контакты можно двумя способами. Первый способ — записать их на SIM-карту. Еще несколько лет назад им пользовалось большинство людей и он всех устраивал. А вот на сегодняшний день такой способ уже заметно устарел. Во-первых, далеко не факт, что у вашего старого телефона и нового Android смартфона совпадает формат SIM-карты. К примеру, в старом аппарате могла использоваться стандартная miniSIM-карта, а в новом — уже ее micro- или даже nano- аналог. А значит, старую SIM-карту просто так в смартфон не переставишь. Во-вторых, обычно на SIM-карту можно записать только контакты самого простого формата: «одно имя — один телефон». А это тоже не всем и не всегда может быть удобно.

Второй способ — экспортировать контакты из старого телефона в виде vCard (.*vcf файлов). Такой способ поддерживает большинство имеющихся на рынке моделей, хотя досадные исключения тоже все еще попадаются. Далее *vcf файл можно записать на microSD карту или передать на смартфон любым другим образом. Например, с помощью почты.

Для импорта vCard контактов в новый смартфон нужно открыть его адресную книгу, нажать на кнопку «Меню», зайти в раздел «Управление контактами» и выбрать пункт «Экспорт и импорт». Отсюда можно как сохранить контакты на карту памяти, так и восстановить их из резервной копии.

Android_для_чайников_1-17Android_для_чайников_1-18

Android_для_чайников_1-16Android_для_чайников_1-15

Подробнее о резервном копировании и переносе личных данных (контактов, фотографий, SMS) в новый смартфон вы узнаете из семнадцатого выпуска нашей колонки.

Настройка почты

Следующий момент — настройка почты. Если вы пользуетесь почтой Gmail, то она была автоматически настроена в тот момент, когда вы ввели данные своего Google аккаунта. А вот если у вас есть свой ящик на каком-то ином почтовом ресурсе, то придется настроить его вручную.

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

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

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

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

Чайник_31-04Чайник_31-03

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

Чайник_31-02Чайник_31-01

Особое внимание обратите на имя пользователя. Иногда здесь нужно указывать полное название почтового ящика, а иногда только его первую часть, которая идет до символа «@». Например, вот так выглядят настройки для mail.ru:

Чайник_31-05

Экранная клавиатура

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

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

Чайник_15-03Чайник_15-06

Сам процесс ввода текста мало чем отличается от печати на клавиатуре ПК или ноутбука. Рассмотрим его на примере клавиатуры Google.

В стандартной клавиатуре Google сменить язык ввода можно с помощью кнопки со значком глобуса Чайник_15-05_a.

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

Для того, чтобы ввести заглавную букву, необходимо нажать на клавишу Shift Чайник_15-01_a. Удерживая ее и продолжая печать, можно ввести несколько заглавных букв подряд. Двойное нажатие по клавише Shift переведет клавиатуру в режим Caps Lock, во время которого все набранные буквы будут заглавными.

Если нужно стереть неверно введенное слово, воспользуйтесь клавишей удаления текста Чайник_15-04_a. При одиночном нажатии на клавишу будет удален один символ, находящийся слева от курсора. Удерживая клавишу удаления, можно быстро удалить одно или несколько слов. Будьте внимательны – чем дольше вы удерживаете клавишу, тем больше возрастает скорость, с которой стирается текст.

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

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

Чайник_15-04Чайник_15-05

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

В клавиатуре Google экран с дополнительными символами открывается с помощью кнопки Чайник_15-02_a в левом нижнем углу экрана, а список смайликов – с помощью долго тапа по клавише Enter Чайник_15-03_a.

Чайник_15-07Чайник_15-02

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

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

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

Чайник_15-01Чайник_15-08

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

Подключение к Wi-Fi

В заключение еще раз вернемся к теме Wi-Fi. Скорее всего, первое подключение к домашней Wi-Fi сети вы настроили еще во время первого запуска аппарата. Однако подключение к Wi-Fi может понадобиться вам не только дома, но и на работе, в институте или кафе. И тут встает вопрос — как подключиться к новой сети?

Ничего сложного в этом нет. Достаточно просто зайти в настройки телефона, а затем перейти в раздел «Wi-Fi».

Чайник_2-15Чайник_2-13

Вам откроется список доступных Wi-Fi сетей. Замочек рядом с иконкой Wi-Fi показывает, что сеть защищена паролем. Соответственно, при попытке подключения к такой сети смартфон запросит пароль.

Чайник_2-07Чайник_2-11
Чайник_2-12Чайник_2-08

По умолчанию большинство Android устройств настроено таким образом, что подключение к известной сети происходит автоматически. Иными словами, если вы хотя бы один раз подключили смартфон к какой-то Wi-Fi сети, то как только вы вновь попадете в радиус ее действия, смартфон подключится к ней самостоятельно. В большинстве случаев это удобно. Но иногда бывают ситуации, когда повторное подключение к конкретной сети нежелательно. В этом случае необходимо сделать долгий тап (нажать и удерживать в течение пары секунд) на названии нужной сети, затем выбрать пункт «Удалить сеть» либо «Забыть сеть». Кроме того, здесь можно исправить настройки сети, если у нее изменился тип шифрования или пароль.

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

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

Чайник_2-10Чайник_2-09

Часть вторая. Интерфейс смартфона

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

Жесты

Управление любым смартфоном с сенсорным экраном происходит, в первую очередь, с помощью жестов, и Android здесь не исключение. Вот основные из них:

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

Двойной тап — быстрое двойное касание (или «постукивание») по экрану, этот жест похож на двойной клик мышью.

Долгий тап — долгое нажатие на экран, длящееся несколько секунд.

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

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

Рабочий стол и иконки док-бара

Рабочих столов в Android может быть несколько, «перелистывать» их можно с помощью горизонтального свайпа в любом направлении. Максимальное количество рабочих столов зависит от версии ОС и фирменной оболочки, обычно их может быть 5 или 7.

Custom_Nova_Launcher-088Custom_Nova_Launcher-087

Android_для_чайников_1-7Android_для_чайников_1-5

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

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

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

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

Android_для_чайников_1-30Android_для_чайников_1-29

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

Android_для_чайников_1-3Android_для_чайников_1-4

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

Обои, виджеты, иконки

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

TOP-60_HD_Виджеты-03TOP-60_HD_Виджеты-04

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

Android_для_чайников_1-8Android_для_чайников_1-6

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

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

Android_для_чайников_1-1Android_для_чайников_1-2

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

Android_для_чайников_1-06Android_для_чайников_1-05

Android_для_чайников_1-04Android_для_чайников_1-03

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

Custom_One_banner

Custom_Two_banner

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

Установка мелодии вызова

Для начала рассмотрим классический способ установки мелодии вызова – через меню настроек. Заходим в настройки телефона, переходим в раздел «Звук» и выбираем пункт «Мелодия звонка».

Чайник_19-04Чайник_19-03

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

Чайник_19-02Чайник_19-01

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

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

Чайник_17-19

Нас интересует папка «Media». Внутри нее должна находиться папка «Audio», а в ней, в свою очередь, папка «Ringtones». Таким образом, полный путь до интересующей нас папки выглядит следующим образом: MediaAudioRingtones. Именно сюда и следует скопировать нужную вам мелодию. Если таких папок во внутренней памяти смартфона нет, то их необходимо создать. Главное — сделать это именно в том порядке, как указано выше.

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

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

Custom_One-82Custom_One-81

В старых версиях Android был неприятный «глюк», из-за которого назначенная таким образом мелодия «слетала» после перезагрузки смартфона. Но на современных телефонах я ничего подобного не встречал.

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

Чайник_19-05Чайник_19-06

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

Часть третья. Установка приложений

Чем смартфон отличается от простенькой «звонилки»? В первую очередь, многозадачностью и поддержкой огромного числа разнообразных приложений. Это клиенты социальных сетей и приложения для видеозвонков, программы для работы с корпоративной почтой и офисные пакеты, мобильные версии знаменитых программ Adobe и видеоредакторы, спортивные тренеры и автомобильные навигаторы, программы для чтения книг и просмотра фильмов, потрясающие 3D игры и приложения-фотокамеры с разными фильтрами… миллионы программ на любой вкус и цвет.

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

Google Play

Прежде всего, еще раз напомню, что для доступа к Google Play вам нужен аккаунт Google. Информация о нем была в начале статьи. Значок самого магазина всегда находится на центральном рабочем столе смартфона — это одно из требований Google, которому вынуждены следовать все производители. Если вы его случайно удалили, то не беда — просто зайдите в меню приложений (обычно это центральная клавиша в док-баре) и запустите его оттуда.

Android_для_чайников_1-02Android_для_чайников_1-01

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

Android_для_чайников_1-14Android_для_чайников_1-13

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

Android_для_чайников_1-08Android_для_чайников_1-07

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

Android_для_чайников_1-12Android_для_чайников_1-11

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

Android_для_чайников_1-10Android_для_чайников_1-09

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

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

Защита от случайных покупок

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

Очень многие родители время от времени дают детям поиграть в игры на своем смартфоне. И, разумеется, никакого подвоха в этот момент они совершенно не ожидают. В самом деле, ну что может натворить маленький ребенок во время игры в какого-нибудь «Крокодильчика Свомпи», Cut The Rope или Angry Birds? Тем более, сидя рядом с родителями?

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

Чайник_11-03Чайник_11-02

Отдельно отмечу, что тот факт, что игра находится в разделе «Бесплатные игры», вовсе не гарантирует отсутствие в ней внутриигровых покупок. Скорее даже наоборот – создатели большинства бесплатных игр обожают навязывать пользователям разнообразный платный контент. Это и покупка внутриигровой валюты, и особые предметы, и специальные бонусы, и новые герои, и доступ к секретным миссиям… В некоторых играх приходится платить даже за то, чтобы просто пройти несколько уровней подряд. И обо всех этих возможностях вам будут постоянно напоминать во время игры, используя красочные баннеры и заботливые всплывающие подсказки. Тут не то что ребенку, тут и многим взрослым бывает сложно устоять. Неудивительно, что современные «бесплатные» игры обычно приносят своим создателям во много раз больший доход, чем игры изначально платные.

Отличить «условно-бесплатные» игры от «полностью бесплатных» очень легко. Если игра предусматривает возможность внутриигровых покупок, то об этом будет явным образом указано на ее странице в Google Play. Соответствующая надпись располагается рядом с кнопкой «Установить». Аналогичное разрешение потребуется игре во время установки.

Чайник_11-04Чайник_11-01

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

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

Чайник_11-08Чайник_11-07

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

Чайник_11-06Чайник_11-05

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

Скидки и распродажи

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

Многие пользователи Android устройств даже не подозревают, что скидки на те или иные программы появляются в Google Play практически ежедневно. Иногда речь идет о символических 10-20% скидки, но иногда скидка составляет 90%, а то и все 100%. Проблема только в том, что вручную следить за изменением цен ассортимента магазина Google практически невозможно — уж больно много в нем разных программ.

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

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

Чайник_25-10Чайник_25-09

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

Чайник_25-08Чайник_25-07

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

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

Чайник_25-06Чайник_25-05

Выбор программ по умолчанию

Как вы могли заметить, Android дает пользователю возможность буквально «в пару кликов» заменить любую предустановленную программу или системный компонент. Хотите попробовать другой браузер? А может быть, установить новую клавиатуру? Или, к примеру, заменить стандартный почтовый клиент или календарь? Нет ничего проще.

Но что произойдет, если на смартфоне окажется сразу несколько программ для одной и той же цели? Например, какой браузер откроется при клике по ссылке в письме, если помимо стандартного браузера, на смартфоне установлена еще и Opera mini? Или какой именно проигрыватель запустится при клике на видеофайл?

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

Чайник_7-02Чайник_7-01

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

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

Чайник_7-06Чайник_7-05

Чайник_7-04Чайник_7-03

Обратите внимание, что в некоторых оболочках раздел «Приложения» разбит на несколько вкладок: «Сторонние», «На карте SD», «Запущенные» и пр. В этом случае во избежание путаницы лучше сразу переключиться на вкладку «Все приложения».

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

Удаление программ

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

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

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

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

Чайник_2-15Чайник_14-08

Чайник_14-07Чайник_14-06

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

Чайник_14-05Чайник_14-10

Второй способ удалить установленную программу – воспользоваться магазином Google Play. Прежде всего, нужно открыть сам Google Play, нажав на соответствующую иконку на рабочем столе или в меню приложений. Затем нажать на значок меню (иконка из трех полосок в левом верхнем углу) либо выполнить горизонтальный свайп от левой кромки экрана. В открывшемся меню нужно выбрать пункт «Мои приложения», дотронуться до названия нужной программы и нажать на кнопку «Удалить».

Чайник_14-04Чайник_14-03

Чайник_14-02Чайник_14-01

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

Установка приложений из сторонних источников

Разработчики Android с самого начала предполагали, что для поиска и установки приложений пользователями будет использоваться магазин Google Play. В том числе и из соображений безопасности – программе с вредоносным кодом попасть в этот магазин приложений практически невозможно.

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

Включить установку приложений из сторонних источников можно в настройках телефона. Обычно нужный нам пункт находится в разделе «Безопасность».

Чайник_21-04Чайник_21-03

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

Чайник_21-02Чайник_21-01

Как видите, установить приложение с какого-то стороннего сайта совсем не сложно. Но неопытным пользователям пользоваться таким способом я категорически не рекомендую. Подавляющее большинство «бесплатных» версий платных программ, которые предлагают вам скачать авторы красочных баннеров — самые настоящие вирусы, которые за считанные минуты опустошат счет вашего телефона. Чудес на свете не бывает, и польстившись на предложение «обновить телефон до Android 5.0», «скачать Flash Player» или «выиграть миллион», вы практически гарантировано заражаете свой смартфон какой-то гадостью.

Заразить Android смартфон вирусом вы можете только собственноручно, ведь эта ОС устроена таким образом, что любая программа поневоле предупреждает вас о том, какими именно правами она хочет обладать. И пока вы не нажмете на кнопку «Ок», доступ к вашему смартфону не получит. Именно поэтому создатели вирусов всеми правдами и неправдами попытаются убедить вас, что их приложение совершенно безобидно, а права на отправку платных SMS ему нужны просто так.

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

Сторонние магазины приложений

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

Главный вопрос тут звучит даже не «как», а «зачем». Что в этих магазинах есть такого, чего не может предложить Google Play?

На самом деле, ответ на этот вопрос совсем не очевиден. Ассортимент приложений у них в любом случае будет меньше. Да и по немногочисленным отзывам и оценкам далеко не всегда можно понять, стоит ли та или иная программа запрашиваемых денег. А какие-то эксклюзивные предложения бывают скорее в теории, чем на практике – редкий разработчик предпочтет променять огромнейшую аудиторию Google Play на сомнительные бонусы местного магазина.

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

Рассмотрим установку стороннего магазина на примере Yandex Store. Прежде всего нужно убедиться, что в настройках смартфона разрешена установка приложений из сторонних источников. Об этом мы говорили чуть выше. Затем – скачать клиент магазина. Для этого нужно открыть с мобильного телефона адрес m.ya.ru/ystore. Обязательно убедитесь, что вы скачиваете файл именно с официального сайта, а не из каких-то файлообменников и прочих сомнительных источников.

Чайник_30-22Чайник_30-21

Чайник_30-20Чайник_30-19

Третий шаг – установка приложения. Тут все стандартно – проверяем требуемые программой разрешения, пару раз нажимаем «Далее» и в самом конце – «Принять».

Чайник_30-18Чайник_30-17

Чайник_30-16Чайник_30-15

Внешне магазин напоминает немного упрощенную копию Google Play. Основной экран разбит на три вкладки («Интересное», «Игры», «Приложения), в самом верху находятся иконки поиска и настроек. Рядом с иконкой поиска вы можете заметить оранжевый квадратик индикатора обновлений. Интересный момент –Yandex Store может обновлять даже те приложения, которые вы скачали через Google Play. Разумеется, в том случае, если в нем они также присутствуют.

Чайник_30-14Чайник_30-13

Чайник_30-12Чайник_30-11

Чайник_30-10Чайник_30-09

Чайник_30-08Чайник_30-07

Для покупки приложений нужно указать магазину желаемый способ оплаты. А пред этим – зарегистрироваться либо войти под уже имеющимся Яндекс логином.

Чайник_30-06Чайник_30-05

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

Чайник_30-04Чайник_30-03

Чайник_30-02Чайник_30-01

Если вы решите установить какие-то иные сторонние магазины, то уделите особое внимание трем вещам:

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

Android_min

Продолжение следует…


Понравилась статья? Поделить с друзьями:
  • Люголь виалайн инструкция по применению взрослым
  • Стрептоцид мазь для наружного применения инструкция
  • Мультиварка redmond rmc m23 инструкция по применению
  • Корпорация оак руководство
  • Амоксициллин 500 мг инструкция по применению таблетки детям дозировка