Типографика в стилях Material Design и iOS

Лекция 4 Типографика в стилях Material Design и iOS Тема 1 Типографика в стиле Material Design В данной теме лекции представлены актуальные на сегодняшний момент рекомендации по типографике, которые вы можете использовать, если хотите придерживаться стиля Material Design при разработке интерфейсов для операционной системы Android. В Material Design достаточно жестко прописаны все правила работы со стилем, насколько вам соблюдать их — решать вы будете в зависимости от поставленной учебной или иной задачи. Однако логику Material Design вы должны знать в любом случае, чтобы понимать привычные для пользователей Android паттерны взаимодействия с интерфейсом. Так же следует знать, что для бесплатного продвижения мобильных приложений GooglePlay требует соблюдения стиля Material Design При разработке интерфейсов для системы Android вы должны регулярно самостоятельно следить за всеми обновлениями рекомендаций по работе со стилем на официальном сайте Material Design в разделе Design (https://material.io/design/). Подраздел типографики находится в разделе Typography. Для удобства дизайнеров и разработчиков на сайте Material Design выложены шаблоны стилей текста и элементов интерфейса для Sketch, Figma, (https://material.io/resources). Обозначение размера шрифта в Material Design Размер шрифта в Material Design обозначаются «sp» («sips»). Числа, обозначенные «sp» вводятся в графу «Размер шрифта» в тех программах, в которых вы проектируете дизайн мобильного приложения ( в программах Sketch / Figma / Adobe XD и т.д). 1 sp = 1 pt (единица измерения шрифта в стиле iOS). Так же 1 sp равен 1 dp (единицы измерения для сетки в Material Design) и равен 1 px. Сетка В Material Design типографика спроектирована под 8-пиксельную базовую сетку (подробнее про работу с сеткой см. Лекцию 1 данного курса). Однако самым мелким шагом является шаг в 4 пикселя, который используется в Material Design для иконок и при работе со шрифтом. Базовые линии текста должны совпадать с горизонтальными линиями 4-пиксельной базовой сетки. Шаг между базовыми линиями текста должен быть кратным 4 пикселям, чтобы поддерживать базовую сетку. Шрифты Google Fonts Material Design работает со шрифтам от Google (Google Fonts). При разработке интерфейса рекомендуется самостотельно подобрать шрифт или шрифтовую пару (один для заголовков и подзаголовков, другой для основного набора и дополнительных текстов) с помощью шрифтового генератора, который располагается на сайте Material Design из числа шрифтов Google (https://material.io/design/ typography/the-type-system.html#type-scale) . Roboto является шрифтом по умолчанию для интерфейсов Material Design. Он бесплатный и его можно скачать на сайте Google Fonts https://fonts.google.com/specimen/Roboto Все рекомендации по типографики от Material Design рассчитаны на размер шрифта Roboto. Типографика основных элементов пользовательского интерфейса Material Design В этом разделе мы рассмотрим основные из них в контексте работы со типографикой. Со всеми элементами вы можете ознакомиться в разделе Components (https://material.io/ components). Сводная таблица стилей шрифтов Material Design для основных элементов интерфейса для операционной системы Android (актуально на 2020 год). Название стиля текста Тип текста и область применения Размер Шрифт и начертание Headline 6 Заголовок страницы Заголовок карточек 20 sp Roboto Medium Body 2 Основной текст Текст в диалоговых окнах Текст в карточках Текст второго уровня в списках 14 sp Roboto Regular Subtitle 1 Подзаголовок первого уровня Заголовок диалогового окна Текст первого уровня в списках 16 sp Roboto Regular Subtitle 2 Текст первого уровня в боковых меню 14 sp Roboto Medium Button Текст на кнопке 14 sp Roboto Medium прописные Заголовки страниц Заголовки страниц в мобильных приложениях Material Design советует делать размером 20sp, начертание Medium. Обратите внимание, что размер шрифта заголовка страницы не меняется при скроллинге (в отличие от cистемы iOS). Заголовок страницы Roboto Medium, 20 sp Заголовок страницы после скроллинга Roboto Medium, 20 sp Основной текст Размер основного текста в Material Design — 14 sp нормального начертания. Это рекомендации для основного текста по умолчанию. Диалоговые окна (Dialogs) Диалоговое окно — один из элементов пользовательского интерфейса Material Design. Диалоговые информируют пользователей о задаче и могут содержать важную информацию, требовать решения или включать несколько задач. Этот элемент схож по функциям с модальным окном в интерфейсе iOS. Заголовки диалоговых окон — 16 sp нормального начертания, а основной текст такой же как основной текст по умолчанию — 14 sp нормального начертания. Заголовок Roboto Regular, 16 sp Основной текст Roboto Regular, 14 sp Карточки (Cards) Карточки содержат контент и действия по одной теме. Карточки изначально были придуманы Material Design, но теперь используются и в системе iOS. Заголовок карточки набирается тем же стилем, что и заголовки страниц — 20sp, начертание Medium. Основной текст карточки такой же как основной текст по умолчанию — 14 sp нормального начертания. Заголовок карточки Roboto Medium, 20 sp Основной текст карточки Roboto Regular, 14 sp Списки (Lists). В списках может быть несколько уровней иерархии текста. В простых списках с одним уровнем иерархии используется шрифт размером 16 sp, то есть больше, чем основной текст. Во второй ступени иерархии текстов в списках используется шрифт 14sp нормального начертания. Roboto Regular, 16 sp Roboto Regular, 16 sp Roboto Regular, 14 sp В списках боковых панелей используется более мелкий шрифт 14 sp, Medium. Roboto Medium, 14 sp Элементы управления. Текст на кнопке размером 14 sp, прописные, Medium. Roboto Medium, прописные, 14 sp В панели ввода текста шрифт 16 sp, то есть крупнее основного текста. Roboto Regular, 16 sp Тема 2. Типографика в стиле iOS В данной теме лекции представлены актуальные на сегодняшний момент рекомендации от Apple по типографике, которые вы можете использовать, если хотите придерживаться стиля операционной системы iOS при разработке интерфейсов для iPhone . При разработке интерфейсов для системы iOS вы должны регулярно самостоятельно следить за всеми обновлениями на официальном сайте Apple в разделе Human Interface Guidelines (https:// developer.apple.com/design/human-interface-guidelines/). Подраздел типографики (Typography) находится в разделе Visual Design. Следование стилю iOS повышает рейтинги приложения в AppStore. Для удобства дизайнеров и разработчиков на сайте Apple выложены шаблоны стилей текста и элементов интерфейса в стиле iOS для Sketch, Photoshop, Adobe XD (https://developer.apple.com/design/ resources/#ios-apps). Обозначение размера шрифта в iOS Размер шрифта в iOS обозначаются «pt» («point»). Числа, обозначенные pt вводятся в графу «Размер шрифта» в тех программах, в которых вы проектируете дизайн мобильного приложения (Sketch / Figma / Adobe XD и т.д) Шрифты San Francisco (SF) и New York (NY). Гарнитуры San Francisco и New York являются системными шрифтами для стиля iOS. Они бесплатные и их можно скачать на сайте Apple (https://developer.apple.com/fonts/). San Francisco — это нейтральный гротеск, который хорошо работает как в крупных, так и мелких кеглях и хорошо читается с экрана. Семейство включает в себя SF Pro, SF Pro Rounded, SF Mono, SF Compact и SF Compact Rounded. SF Pro — системный шрифт в iOS, macOS и tvOS; SF Compact Rounded используется в watchOS. New York — это антиква, разработанная в пару к San Francisco. New York тоже хорошо работает как в крупных кеглях, так и для сплошлого чтения. Шрифты хорошо работают в паре. Вы можете использовать эти шрифты в том случае, если хотите, чтобы ваше приложение было похоже на приложения iOS по умолчанию. В остальных случаях вы можете использовать любой другой шрифт, который подходит для вашего проекта, но не забывайте о том, что он должен быть удобочитаем с экрана в крупных и мелких кеглях и вы должны понимать, что все рекомендации по типографики от Apple рассичатаны на размеры системных шрифта SF и NY. Система размеров шрифта для мобильных приложений iOS Стиль ios имеет гибкую систему размеров шрифта, которые напрямую зависят от размера экрана устройства. Ниже представлена таблица стилей шрифтов для интерфейса мобильных приложений для iphone X по умолчанию. Ориентируйтесь на нее при создании мобильных приложений для iphone. Полной таблица размеров для всех размеров экранов представлена на сайте (https://developer.apple. com/design/human-interface-guidelines/ios/visual-design/typography/) Стили текста для интрефейса iOS 13 для iphone X (актуально на 2020 год). Тип текста и область применения Размер Шрифт и начертание Заголовок страницы, заголовки модальных окон до скроллинга 34 pt SF Pro Bold Заголовок страницы после скроллинга, заголовок списка 17 pt SF Pro Semibold Основной текст 17 pt SF Pro Regular Подзаголовки и дополнительный текст первой ступени иерархии, тексты списков 15 pt SF Pro Regular Дополнительный текст второй ступени иерархии 13 pt SF Pro Regular Кнопки 17 pt SF Pro Semibold Сегментированные кнопки 13 pt SF Pro Medium Панель действий (Tab bar) 10 pt SF Pro Medium Заголовки Самый крупный заголовок в iOS — это заголовок страницы, заголовок модальных окон — 34 pt, жирное начертание (SF Pro Bold). Заголовок страницы располагается в левом верхнем краю экрана. Крупнее размера шрифта, чем для заголовка страницы в iOS нет. Заголовок страницы SF Pro Bold, 34 pt При скроллинге заголовок страницы должен уменьшиться до 17 pt, становится полужирным начертанием (SF Pro Semibold) и перемещается в середину экрана. Заголовок страницы после скроллинга SF Pro Semibold, 17 pt Основной текст рекомендуется набирать 17 пт нормальным начертанием (SF Pro Regular). То есть заголовки и основной текст одного размера, отличаются только по начертанию. Дополнительный текст В стиле ios есть несколько ступеней иерархии дополнительных текстов, т.е. текстов которые ниже по уровню иерархии, чем основной текст. Для них можно использовать следующие размеры —15 pt, 13 pt, 10 pt. Для дополнительных текстов старшего уровня используется шрифт 15 pt, на ступень ниже — 13 pt, еще ниже — 10 pt. Важно, что разница в размере шрифта между ступенями иерархии текстов не может составлять менее 2 pt, так как она не будет видна глазу. Размеры ниже 10 pt не рекомендуется использовать в ios. Дополнительный текст используется в списках, подписях, элементах интерфейса. Списки Списки считаются в ios дополнительными текстами, ниже по иерархии, чем основной текст. В соответствии с этим заголовки списков набираются как правило 17 pt (размером основного текста), полужирным (SF Pro Semibold) или нормальным начертанием (SF Pro Regular). Тексты списка набираются 15 pt нормальным начертанием (SF Pro Regular). Текст списка может быть серым, а не черным. Заголовок списка SF Pro Semibold, 17 pt Текст списка SF Pro Regular, 15 pt В варианте, когда у списков есть два уровня заголовков, заголовок, который стоит ближе к тексту набирается 17 pt нормальным или полужирным начертанием, а заголовок выше по иерархии набирается не большим, а меньшем кеглем — 15 pt, прописными. Дополнительные тексты в списках набираются 13 pt нормальным начертанием. Список. Заголовок первого уровня SF Pro Regular, 15 pt, прописные Список. Заголовок второго уровня SF Pro Regular, 17 pt Список. Дополнительный текст SF Pro Regular, 13 pt Элементы управления Текст стандартных кнопок — 17 pt, Semibold Текст сегментированных кнопок меньше — 13 pt, Medium. Кнопка SF Pro Semibold, 17 pt Сегментированные кнопки SF Pro Medium, 13 pt Текст в панелях ввода текста, например, панель «Поиск» до начала ввода — 17 pt, нормального начертания серый или белый. Панель ввода текста SF Pro Regular, 17 pt Модальные окна Модальное окно создает режим, который отключает главное окно, но сохраняет его видимым с модальным окном в виде дочернего окна перед ним. Пользователи должны повзаимодействовать с модальным окном, прежде чем они смогут вернуться в родительское приложение. В iOS модальные окна на мобильных устройствах часто полностью скрывают главное окно приложения. В то время как немодальный экран позволяет пользователям вернуться к родительскому экрану, модальный экран требует, чтобы пользователи завершили определённое действие, прежде чем вернуться в главное окно (такое как нажатие кнопки «Сохранить» в нашем примере) или отменить текущее действие, вызвавшее модальное окно. Заголовок модального окна SF Pro Semibold, 17 pt Пояснительный текст SF Pro Regular, 13 pt Панель ввода текста SF Pro Regular, 13 pt Кнопка отмены SF Pro Regular, 17 pt Кнопка действия SF Pro Medium, 17 pt Заголовок имеет размер 17 pt как у основного текста, начертание Semibold. Пояснительный текст – 13pt. Строка ввода текста в модальных окнах составляет 13pt Кнопка действия и кнопка отмены действия (Cancel) имеют размер 17 pt, но поскольку кнопка действия более важная, поэтому имеет Medium начертание, тогда как у кнопки отмены — обычное начертание. Панель действий (Tab bar) Панель действий находится в нижней части экрана. Размер текста в панели действий – 10pt, начертание Medium (SF Pro Medium). Панель действий SF Pro Medium, 10 pt