Что такое дизайн-система?
По сути, это набор стандартов, компонентов и лучших практик, которые обеспечивают единство и согласованность пользовательского опыта в масштабах всего продукта или экосистемы продуктов. Дизайн-система — это своего рода визуальный язык, на котором «говорит» продукт с пользователем, а также вся совокупность UI/UX-паттернов, используемых в ОС и приложениях.
Хорошо проработанная дизайн-система решает сразу несколько важных задач:
- создает узнаваемый и запоминающийся бренд; - упрощает и ускоряет работу дизайнеров и разработчиков; - гарантирует, что интерфейс будет понятным и предсказуемым для пользователей; - повышает качество и консистентность продукта при масштабировании.
iOS и Material Design
Человек — существо привычки, и необычное может его запутать. Поэтому, разрабатывая мобильное приложение, важно помнить, что от его дизайна зависит, насколько быстро пользователь решит свою задачу. Если каждый проект будет уникальным, с собственными иконками и расположением важных элементов, пользователю будет сложно ориентироваться. В итоге и бизнес не достигнет своей цели — не продаст товар или услугу.
Решить эту проблему помогают гайдлайны — набор рекомендаций для разработчиков мобильных приложений от создателей операционных систем. Гайдлайны описывают принципы, на которые нужно ориентироваться, чтобы создать максимально удобное приложение для пользователей, и чтобы оно прошло модерацию в магазине, что тоже немаловажно.
В мобильном мире на сегодняшний день доминируют две большие дизайн-системы: iOS от Apple и Material Design от Google. У каждой из них своя философия и подход к проектированию интерфейсов.
Human Interface Guidelines
Гайдлайн компании Apple, выпущенный в 2013 году. Название переводится как «принципы интерфейсов для людей», и это отражает их суть. В Apple пользователь — на первом месте, и этого же подхода они требуют от разработчиков других приложений. Поэтому основные принципы HIG — лаконичность, воздушность и отзывчивость к действиям пользователя.
Интерфейсы HIG используют подложки, размытость и градиенты, но они не мешают пользоваться приложениями и не отвлекают от главного. Особое внимание в Apple уделили микровзаимодействиям — реакциям интерфейса, которые помогают пользователям ориентироваться в приложениях (например, направляют к нужному действию или сообщают об ошибке). Микровзаимодействия на устройствах с iOS реализованы в виде цветовых индикаторов, звуков и вибрации.
Три главных отличия iOS от других платформ
Чёткость. Во всей системе текст хорошо читается при любом размере, значки чёткие и ясные, украшения тонкие и уместные, а дизайн ориентирован на функциональность. Негативное пространство, цвет, шрифты, графика и элементы интерфейса тонко подчёркивают важное содержание и передают интерактивность.
Дифференцированность. Плавное движение и четкий, красивый интерфейс помогают людям понимать контент и взаимодействовать с ним, но при этом не противоречит пользователю никогда не конкурируют с ним. Контент обычно заполняет весь экран, а прозрачность и размытость часто намекают на большее. Минимальное использование окантовки, градиентов и падающих теней придаёт интерфейсу лёгкость и воздушность, обеспечивая при этом первостепенное значение контента.
Глубина. Различные визуальные слои и реалистичное движение передают иерархию, придают живость и облегчают понимание. Осязание и открываемость усиливают восторг и позволяют получить доступ к функциональности и дополнительному контенту без потери контекста. Переходы обеспечивают ощущение глубины при навигации по контенту.
Material Design для Android
Разработанный в 2014 году гайдлайн Google для приложений на Android. Material Design от Google вдохновлен концепцией вещественности. Этот подход представляет элементы интерфейса как некие «цифровые листы бумаги», подчиняющиеся законам физики, отбрасывающие тени и т. д. В центре его философии — материал, и разработчик, который может делать с этим материалом всё, что захочет. Этот материал похож на бумагу, но обладает необычными свойствами:
- разрешение материала бесконечно, он может бесконечно растягиваться и подойдет для экранов любых размеров; - материал может менять свою форму и становиться чем угодно — кнопкой, иконкой, подложкой; - материал может склеиваться с другим таким же материалом.
Есть у него и ограничения. Материал не может вести себя как газ или жидкость. И хотя он похож на бумагу, материал не может сворачиваться в трубочку. Объясняется это тем, что все это — свойства из реального мира, а не цифрового. Философия Material Design в том, что разработчик может экспериментировать с материалом как ему угодно — конечно, в рамках установленных Google правил.
iOS Human Interface Guidelines
Чтобы добиться максимального воздействия и охвата, придерживайтесь следующих принципов, когда будете создавать образ своего приложения.
Эстетическая целостность
Эстетическая целостность представляет собой то, насколько хорошо внешний вид и поведение приложения сочетаются с его функциями. Например, приложение, которое помогает людям выполнять серьёзную задачу, может удерживать их внимание, используя тонкую, ненавязчивую графику, стандартные элементы управления и предсказуемое поведение. С другой стороны, захватывающее приложение, например, игра, может иметь привлекательный внешний вид, обещающий веселье и азарт, а также способствующий открытиям.
Консистентность
Консистентное приложение реализует знакомые стандарты и принципы, используя элементы интерфейса, предоставляемые системой, известные иконки, стандартные стили текста и единую терминологию. Приложение включает функции и поведение так, как этого ожидают люди.
Прямое воздействие
Прямое воздействие на экранный контент вовлекает людей и облегчает понимание. Пользователи испытывают прямое воздействие, когда поворачивают устройство или используют жесты чтобы подействовать на содержимое экрана. Благодаря прямому воздействию, они могут видеть немедленные, видимые результаты своих действий.
Обратная связь
Обратная связь подтверждает действия и показывает результаты, чтобы информировать людей. Встроенные приложения для iOS обеспечивают ощутимую обратную связь в ответ на каждое действие пользователя. Интерактивные элементы кратковременно подсвечиваются при нажатии, индикаторы выполнения сообщают о статусе длительных операций, а анимация и звук помогают прояснить результаты действий.
Метафоры
Люди быстрее учатся, когда виртуальные объекты и действия приложения метафорически передают знакомый опыт − как в реальном, так и в цифровом мире. Метафоры хорошо работают в iOS, потому что люди физически взаимодействуют с экраном. Они сдвигают экранное представление вбок, чтобы открыть контент под ним. Они перетаскивают и смахивают содержимое. Они переключают переключатели, двигают ползунки и прокручивают круговой подборщик значений. Они даже перелистывают страницы книг и журналов.
Пользовательский контроль
В iOS все контролируют люди, а не приложения. Приложение может подсказать, как поступить, или предупредить об опасных последствиях, но брать на себя принятие решений — это, как правило, ошибка. Лучшие приложения находят правильный баланс между предоставлением пользователям возможностей и предотвращением нежелательных последствий. Приложение может дать людям ощущение, что они контролируют ситуацию, сохраняя интерактивные элементы знакомыми и предсказуемыми, подтверждая деструктивные действия и облегчая отмену операций, даже если они уже начались.
Размеры экранов iPhone
Первые 5–6 лет производства айфонов разработчикам дизайна для iOS не нужно было беспокоиться по поводу размера экрана — достаточно было убедиться, что макет корректно отображается на дисплее 320×480. Однако за последние 3 года размеры экранов iPhone менялись трижды, что создало определенные сложности, особенно для дизайнеров мобильных приложений.
Сейчас существует полная таблица соответствия моделей iPhone и размеров их экранов.
* Технически, дисплей телефона 2,61x
Размер фрейма — это «размер в точках» или «@1x» для данной модели. Рекомендуется проектировать макеты именно такого размера для конкретного устройства.
Масштабирование при экспорте показывает, насколько крупнее должны быть растровые изображения (PNG, JPG) при выгрузке, чтобы эффективнее использовать более высокое разрешение некоторых устройств.
Какой размер фрейма выбрать для дизайна iOS-приложения?
Ориентируйтесь на наиболее распространенный размер экрана iPhone в вашей целевой аудитории, но обязательно протестируйте дизайн на меньших дисплеях, если планируете разместить много контента на экране.
- Если вы разрабатываете приложение для широкой аудитории, используйте самый распространенный сейчас размер экрана iPhone: 375×812 pt или 375×667 pt (но поскольку у них одинаковая ширина, разница невелика). - Если вы разрабатываете приложение для технически подкованной или дизайнерской аудитории, скорее всего, самый популярный размер экрана iPhone для вас будет более свежий 390×844 pt.
Дизайн, который хорошо выглядит на более узком экране (375pt), почти наверняка будет работать и на чуть более широком дисплее (414pt), но обратное неверно. Поэтому всегда лучше сначала разрабатывать макеты для узких экранов, затем проверяя их и корректируя для больших дисплеев. Так как высота является менее строгим ограничением, не так важно, будет ли ваше рабочее пространство экрана 667 или 812pt в высоту.
Точки и пиксели при проектировании приложений под iPhone
«Точка» (или «логический пиксель») — это единица измерения, которую дизайнеры используют для сравнения размеров шрифтов и элементов UI на устройствах iOS.
«Пиксель» («физический пиксель») — это крошечный светящийся квадратик, из которых состоит экран вашего iPhone. Меньшие пиксели означают более четкое изображение. Но если просто уменьшить пиксели, все на экране тоже станет меньше. Чтобы сбалансировать этот эффект, дизайнеры измеряют размеры экранных элементов в точках. Когда технологии развились достаточно, чтобы пиксели стали примерно вдвое меньше по ширине и высоте, стало возможным просто использовать квадрат 2×2 пикселя для каждой точки (это называется @2x). А когда пиксели стали примерно на треть меньше по ширине и высоте, стало логично использовать для каждой точки квадрат 3×3 пикселя.
Точки — это способ получить экраны более высокого разрешения, не сжимая все элементы страницы. Иногда дизайнеры взаимозаменяют эти термины, и вам приходится догадываться из контекста, что именно подразумевается.
Макет экрана iPhone
Хотя макеты приложений для iOS различаются, у многих стандартных страниц примерно следующий макет:
Строка состояния (Status bar) iOS
Строка состояния находится в верхней части каждой страницы — за редкими исключениями, например, некоторые полноэкранные изображения, видео или другие медиа.
iPhone 14 Pro и 14 Pro Max имеют более высокую строку состояния, где область камеры и датчиков полностью окружена пикселями дисплея.
Её называют Dynamic Island, так как этот элемент может незначительно меняться.
В любом случае строка состояния показывает индикаторы времени, сигнала, Wi-Fi и заряда батареи и может иметь черный или белый цвет текста и значков.
Фон строки состояния может быть любого цвета — или даже прозрачным. Если вы используете строку состояния на любом фоне, кроме самого светлого, вам, скорее всего, стоит выбрать белый текст.
Если же хотите использовать строку состояния на разнообразных фонах, примените размытие фона
Такая строка статуса в стиле «матового стекла» не добавляет в интерфейс никаких дополнительных цветов, границ или отвлекающих элементов, а просто размывает цвета под собой, повышая читаемость текста.
В данном примере светло-серый фон страницы является цветом «матового стекла» по умолчанию, поэтому текст на нем должен быть черным, а не белым.
Не пытайтесь обыграть форму «чёлки» или «островка», это противоречит гайдам
В некоторых полноэкранных приложениях (например, для фотографии) строка состояния может быть кастомной
У моделей старшe iPhone X (и всех iPad) строка состояния — короче и компактнее
Навигационная панель iOS
Навигационная панель показывает навигацию, заголовок страницы, основные действия на странице и часто поиск. Можно считать, что она состоит из 3 «рядов».
Пример макета iPhone показывает направляющие, отмечающие, где обычно располагаются эти ряды.
- высота строки состояния: 44pt - высота первого ряда: 44pt - высота второго ряда: 54pt - высота третьего ряда: 48pt
Не всегда эти значения точны: в iOS-приложениях возможны небольшие вариации, но это хорошая отправная точка. То есть iPhone-приложение будет показывать 1, 2 или 3 ряда в зависимости от (a) потребностей страницы и (b) состояния прокрутки.
Если нужно компактно разместить лишь несколько действий страницы (даже заголовок страницы необязателен), используйте 1 ряд
Но если есть свободное место, стандартный макет страницы iOS-приложения имеет 2 ряда — один для действий страницы, второй для большого заголовка страницы
Если нужно показать поиск, потребуется 3-й ряд (даже если первый ряд останется пустым)
На скриншотах выше показано только поведение до прокрутки. Как только пользователь начинает прокрутку, iOS демонстрирует другое поведение.
Если строка поиска важна для постоянного отображения, при прокрутке приложения она просто переместится из 3-го ряда во 2-й
Если она менее важна, то исчезнет совсем — ее можно будет увидеть только в самом верху страницы.
Когда ряды навигационной панели iOS исчезают при прокрутке, они снова появляются, если пользователь прокручивает обратно в самый верх. Обратите внимание, что переходы между состояниями анимируются совершенно плавно — небольшой, но характерный штрих стиля iOS.
Панель вкладок (Tab Bar) iOS
В приложениях под iPhone основные значки навигации по приложению отображаются как вкладки внизу экрана
Несколько стилистических моментов:
- Выбранный значок выделен цветом-акцентом темы приложения. - Подписи — текст размера 10–11pt шрифтом SF, используемым по умолчанию. - Фон может быть слегка полупрозрачным, с эффектом размытия — «матовое стекло», как у панели навигации.
И несколько заметок по поведению панели вкладок и ее кнопок:
- Разные вкладки запоминают свои состояния. Если вы зашли на какой-то глубокий уровень навигации на одной вкладке, переключились на другую вкладку, затем снова переключились на первую вкладку, вы окажетесь там, где остановились, а не на «домашнем экране» этой вкладки. - Касание активной вкладки вернет вас на «домашний экран» этой вкладки. - Панель вкладок всегда видна в приложении, кроме случаев:
1. когда клавиатура показана; 2. когда открыт модальный экран (при выполнении критических задач пользователь должен концентрироваться на задаче, а не переходить на другие экраны).
Должно быть от 2 до 5 вкладок. Если нужно больше, то 5-й значок должен быть «More», который при касании показывает дополнительные навигационные значки на выборе
Индикатор Home в iOS
Все новые модели iPhone (X и новее) имеют Home Indicator — тонкую скругленную полоску в нижней части экрана, которая отображается всегда, кроме случаев, когда вы уже находитесь на домашнем экране.
На любом светлом экране этот элемент черный, но на темных экранах его можно сделать белым. Короткий свайп вверх по нему переключает между приложениями и на домашний экран:
- легкий короткий свайп вверх: переход к менеджеру задач; - более размашистый свайп вверх: переход на домашний экран.
Обычно Home Indicator находится в фиксированном фрейме высотой 34pt, в котором не могут отображаться другие фиксированные элементы.
Однако прокручиваемые списки могут отображаться с прокруткой под индикатором Home — и даже можно выбрать элемент прямо под ним, коснувшись. Home Indicator реагирует только на свайп вверх.
Навигация в iOS-приложениях
Навигация назад
В iOS-навигации назад осуществляется четырьмя разными способами, в зависимости от контекста.
- Нажмите кнопку «Назад» в левом верхнем углу (любой экран, где отображается действие «Назад»). - Сделайте свайп вправо от левого края экрана (любой экран, где отображается действие «Назад»). - Нажмите кнопку «Отмена» или «Готово» вверху экрана (модальные представления). - Сделайте свайп вниз по контенту экрана (модальные или полноэкранные, например, фотографии и другие медиа, представления).
Первые два способа обычно применяются к одним и тем же экранам.
На большинстве экранов вы можете вернуться назад, выполнив (1) действие в левом верхнем углу или (2) свайп вправо от левого края.
Поиск в iOS
В iPhone-приложениях есть три основные точки входа для поиска:
- строка поиска в навигационной панели; - значок поиска в навигационной панели; - значок поиска на панели вкладок.
Но независимо от того, где находится точка входа в поиск, поисковый опыт выглядит довольно похоже:
В качестве опции под строкой поиска можно показать популярные или недавние поисковые запросы
Модальные листы (Modal Sheets) в iOS
Некоторые задачи включают один экран или линейную последовательность экранов, которые пользователи должны завершить, не полностью выходя из контекста, в котором они находились. В новых версиях iOS для этого есть идеальный UI-элемент: модальные листы.
Модальные листы — это обычные страницы, которые скользят снизу вверх, закрывая почти всю предыдущую страницу, но оставляют предыдущую страницу видимой, но утопленной на задний план.
Модальные листы можно закрыть:
- нажав кнопку закрытия вверху; - свайпом вниз по самой карточке модального листа.
Списки в iOS (они же «табличные представления»)
Помните: «90% мобильного дизайна — это дизайн списков». Если вы хотите хорошо проектировать приложения для iPhone. Каждый раз, когда вы собираетесь использовать списки на iPhone, вы должны задать себе три вопроса:
1. Какой текст я хочу показать? 2. Нужен ли мне также значок/изображение? 3. Что будет в правой половине ячейки?
Для текста в каждом элементе списка ваши варианты:
- Только основной текст (17pt regular). - Основной текст (17pt regular) со вторичным текстом (15pt regular). - Пользовательский макет — например, основной текст (17pt regular), вторичный текст (15pt regular, но светлее) и третичный текст (15pt regular, но светлее).
Слева от текста по желанию можно показать значок или изображение
Для правой части элемента списка варианты такие:
- Шеврон (стрелка вправо). Практически по умолчанию говорит пользователям, что они перейдут на другой экран. - Текст и шеврон. Означает, что пользователь может перейти на другой экран, чтобы выбрать значение, которое будет показано здесь. - Радиокнопка. Позволяет пользователю выбрать один элемент списка в этой группе. (Примечание: не множественный выбор, как веб-списки с чекбоксами) - Переключатель. Позволяет пользователю включить или выключить свойство, к которому относится этот элемент списка. - Текстовые кнопки. Используют системный цвет для ссылки на другую страницу или действие. Используйте красный цвет текста для обозначения критических действий, таких как выключение или удаление чего-либо.
Есть и другие примеры работы со списками в iOS, но мы их здесь рассматривать не будем.
Кнопки в iOS
Мы обычно думаем о кнопках как о цветных прямоугольниках с центрированным текстом — и iPhone-приложения, конечно, тоже используют такие типы. Но если вы пришли из веб-дизайна, вас может удивить, что многие кнопки в iOS представляют собой либо (а) значки, либо (б) цветной текст — либо в (а) навигационной панели (вверху экрана), либо в (б) панели действий (внизу экрана).
Однако в iOS есть и кнопки страницы
Поскольку действия на уровне страницы отображаются в фиксированных меню (навигационная панель или панель действий), многие кнопки страницы относятся только к определенной части страницы — и, следовательно, будут отображаться на карточках.
Элементы управления вводом в iOS
Одна из неочевидных деталей элементов управления в приложениях для iOS заключается в том, что почти все они стилизованы как элементы списка.
Текстовые поля в iOS
Текстовые поля ввода выглядят как элементы списка с плейсхолдером, который исчезает при вводе текста.
Переключатели в iOS
Переключатели появляются внутри элемента списка, где слева есть метка, а справа — бинарный переключатель.
Кнопки выбора даты и/или времени в iOS
Для обозначения дат и времени используются специальные светло-серые кнопки.
Коснитесь её, и кнопка исчезнет, а элемент управления выбором даты (или времени) появится на ее месте.
Эти элементы управления могут выбирать (a) только время, (b) только дату, © и время, и дату или (d) какое-то другое пользовательское значение.
Выпадающие меню
Сравнительно молодым элементом управления в iOS являются выпадающие меню, которые показывают некоторые дополнительные параметры/действия без перехода на другой экран — подобно выпадающим элементам управления в веб-браузерах.
Экраны выбора в iOS
Выпадающие меню (см. выше) полезны, если у вас довольно короткий список вариантов для отображения, но для более сложных вещей попробуйте шаблон экрана выбора.
Суть в том, что у вас есть что-то вроде элемента списка, но на самом деле он ведет на другую страницу, где вы выбираете значение.
Итак, составные части: (1) один элемент списка с меткой, значением и шевроном ведет к (2) странице со множеством вариантов в списке, один из которых можно выбрать, и это состояние будет показано с галочкой. После выбора вы можете вернуться обратно с помощью свайпа или кнопки в левом верхнем углу.
Типографика в iOS-приложениях
San Francisco
Этот нейтральный неогротеск является системным шрифтом для iOS, iPadOS, macOS и tvOS. SF Pro имеет девять весовых коэффициентов, различные оптические размеры для оптимальной разборчивости, четыре ширины и включает вариант с округлением. SF Pro поддерживает более 150 языков, включая латинский, греческий и кириллицу.
SF Pro имеет две вариации: SF Pro Text для текста размером до 19 включительно и SF Pro Display для текста от 20 и выше.
New York
Помимо SF Pro, в iOS есть ещё один нативный шрифт — New York. Это красивая переходная антиква, которая хорошо сочетается с SF Pro. В одном дизайне можно использовать оба нативных шрифта, например, New York для заголовков, а SF Pro для основного текста.
Скачать нативные шрифты можно на официальном сайте Apple в разделе ресурсов. Но помните: согласно лиценции, их можно использовать только в интерфейсах приложений под ОС компании Apple.
iOS отличается особый подход к текстовым стилям. Возможно, самый неожиданный урок заключается в том, что многие системы дизайна используют размер или прописные для увеличения визуального веса, в то время как iOS использует насыщенность начертания или цвет. Мы рассмотрим это для многих стилей текста в iPhone-приложениях.
Заголовок страницы (без прокрутки) 34pt bold #000 Заголовок страницы (прокрученный) 17pt medium #000 Наборный nекст абзаца 17pt regular #000 Вторичный текст 15pt regular #3C3C43 @ 60% непрозрачность Третичный текст 13pt regular #3C3C43 @ 60% непрозрачность Кнопки 17pt normal, разные цвета Подписи на таб-баре 10pt regular #8A8A8E
Стили текста заголовков в приложениях для iPhone
В приложениях для iPhone заголовки страниц выводятся двумя разными способами.
Когда пользователь еще не прокручивал страницу (или прокрутил, но затем вернулся к верхней части):
- Размер: 34pt - Насыщенность: bold - Цвет: #000 - Цвет темного режима: #FFF - Выравнивание: по левому краю
Когда пользователь прокручивает страницу вниз:
- Размер: 17pt - Насыщенность: medium - Цвет: #000 - Цвет темного режима: #FFF - Выравнивание: по центру
Стиль текста по умолчанию
По умолчанию в приложениях для iPhone используется следующий стиль текста:
- Размер: 17pt - Насыщенность: regular - Цвет: #000 - Цвет темного режима: #FFF
Небольшими изменениями базового стиля можно добиться значительных различий в выводе текста.
Например, если для обычных элементов списка используется стандартный стиль текста, в приложении «Почта» отправители электронной почты выделены жирным шрифтом, чтобы выделить имя отправителя из строки темы и предварительного просмотра.
Аналогично, текстовые кнопки ссылок — это текст по умолчанию, но с разными цветами.
А текст подсказки в поле поиска — это текст по умолчанию, но более светло-серого цвета.
Стили вторичного текста
Приложения для iOS имеют стандартный стиль для любого вспомогательного вторичного текста.
- размер: 15pt - насыщенность: regular - цвет: #3c3c43 @ 60% непрозрачность - цвет темного режима: #EBEBF5 @ 60% непрозрачность
Стили третичного текста и подписей
Любые пояснительные подписи оформляются еще более сжато и легко, чем вторичный текст.
- размер: 12pt - насыщенность: regular - цвет: #3c3c43 @ 60% непрозрачность - цвет темного режима: #EBEBF5 @ 60% непрозрачность
Также обратите внимание, что иногда этот третичный размер используется вторично, т. е. есть только размеры 17 и 12, без текста размера 15 между ними.
Минимальный размер текста
В приложениях для iPhone это подписи на таб-баре:
- размер: 10pt - насыщенность: regular - цвет: #999 (если не выбран) - цвет темного режима: #757575 (если не выбран)
SF Symbols
Библиотека иконок SF Symbols, содержащая более 5000 символов, предназначена для плавной интеграции с San Francisco, системным шрифтом для платформ Apple. Символы бывают девяти размеров и трех масштабов и автоматически выравниваются по тексту. Их можно экспортировать и редактировать с помощью инструментов редактирования векторной графики для создания пользовательских символов с общими характеристиками дизайна и функциями доступности. SF Symbols 5 представляет коллекцию выразительных анимаций, более 700 новых символов и расширенные инструменты для создания пользовательских символов.
Иконка приложения
Если вы хотите создать значок приложения, который будет отображаться везде, где только возможно, на всех iPhone и iPad, вам придется создать почти десяток версий одного и того же значка. Но это не наш путь!
Вот один из примеров создания значка приложения для iOS по принципу Парето 80/20:
1. Создайте квадратный значок, который хорошо смотрится в разрешении 60×60px (и убедитесь, что он хорошо работает в маске с помощью Apple superellipse). 2. Увеличьте его до @2x (120×120px) и при желании уточните его по пикселям. 3. Увеличьте изображение до @3x (180×180px) и при желании уточните его по пикселям 4. Увеличьте до 1024×1024px 5. Экспортируйте все 4 размера в формате PNG. Готово.
Superellipse (он же Squircle)
Все значки, которые вы экспортируете в виде квадратов, будут автоматически обрезаны по углам на устройствах Apple, поскольку iOS использует тип фигуры, называемый суперэллипсом.
Суперэллипс очень похож на обычный скругленный прямоугольник. На самом деле, разницу практически невозможно увидеть невооруженным глазом. Apple объясняет это так: (а) суперэллипс имеет более плавный переход от прямой части к изогнутой, что делает его форму в целом более органичной, и (б) он лучше соответствует углам аппаратных устройств Apple.
Как сделать суперэллипс в Figma
- Создайте квадрат с помощью пункта меню Rectangle или сочетания клавиш «r». - Откройте меню Independent Corners (справа от настройки радиуса угла). - Откройте меню Corner Smoothing и установите значение для настройки iOS, которая находится на уровне 60%.
Другие особенности iOS
Размер цели касания в iOS
Все, чего пользователь может коснуться — каждая кнопка, каждый ползунок, каждый элемент управления вводом — должно быть размером не менее 44×44 pt.
Единственное исключение, когда нарушение этого требования действительно оправдано, — текстовые ссылки. В тексте абзаца каждая строка, скорее всего, будет немного меньше 44pt. Это означает, что (а) ваши ссылки будут иметь цель касания меньше 44pt и (б) — если в двух последовательных строках текста ссылки находятся в одном и том же месте, пользователям будет довольно сложно коснуться их точно.
Тёмный режим iOS
iOS имеет настройку тёмного режима на уровне ОС, но если вы используете собственные элементы управления и цвета, вам следует понимать общие принципы работы тёмного режима:
Цвета текста инвертируются. Это небольшое упрощение, но черный текст становится белым, темно-серый текст становится светло-серым, а средне-серый остается практически таким же. Если вы не можете определить, следует ли сделать серый цвет средней яркости темнее или светлее, выбирайте вариант, который делает текст более контрастным по отношению к фону.
Цвета фона сдвигаются. В отличие от текста, где темные цвета становятся светлее, цвета фона просто сдвигаются в темную сторону. Если цвет фона был светлее в светлом режиме, он по-прежнему будет светлее в темном режиме. Почему? Потому что свет исходит сверху. Если вы поймёте это, вы также поймете, что мы полагаемся на цвет фона в качестве подсказки о глубине (в отличие от текста).
Тематические цвета выделяются на темном фоне. Любые акцентные цвета, которые вы ранее использовали на светлых фонах, должны выделяться и на тёмных фонах.
Основные принципы Material Design
- Иерархия элементов показывается через расположение объектов на разных слоях и отделяющие их друг от друга тени. - В основе типографики Material Design — принципы печатного дизайна. - Анимация элементов подчиняется законам физики. - Поверхности движутся в трех измерениях и подчиняются реальным законам физики.
Интерфейс, созданный по принципам Material Design, похож на непрозрачные карточки, их можно легко двигать и менять размер. Анимация подсказывает, как пользователь может взаимодействовать с интерфейсом.
Отличия Material Design от HIG
Единицы измерения
🍎 Point (pt), 1/72 дюйма 🤖 Dip (dp), (~ 1 пиксель при плотности экрана 160 точек на дюйм).
Минимальный размер экрана
🍎 320×568 pt 🤖 360×640 dp
Системный шрифт
🍎 San Francisco 🤖 Roboto
Тени
🍎 Почти не используются 🤖 Elevation — основной компонент пространственной навигации
Минимальный размер области касания
🍎 44×44 pt 🤖 48×48 dp
Механика управления
🍎 Жестами 🤖 Кнопками на навигационной панели
Основная навигационная панель
🍎 Отсутствует, вместо неё — управление жестами или кнопкой Back/«Назад» 🤖 Android Navigation Bar, встроена либо в смартфон, либо — часть интерфейса
Дополнительная навигационная панель
🍎 Элементы в теле страницы или кнопка «Ещё» внизу 🤖 Снизу/«гамбургер»
Уведомления в приложении
🍎 Всплывающие окна (необходимо ответное действие) 🤖 Уведомления (не требуют действий); диалоговые окна (блокируют экран и требуют действий); баннеры (не блокируют экран, но требуют действий)
Переход назад
🍎 Свайп слева направо или кнопка «Назад» 🤖 Кнопка
Ресурсы
Заключение
Следование гайдлайнам и лучшим практикам платформы — не просто формальность, а залог создания действительно качественных, удобных и привлекательных продуктов. Дизайн-система подобна языку — чем лучше вы им владеете, тем более эффективно вы можете доносить свои идеи и создавать желаемый пользовательский опыт.
Дизайн — это не то, как выглядит продукт. Дизайн — это то, как он работает.
Стив Джобс
