10. Принципы дизайна мобильных приложений | Курс UX UI Дизайнер: «Возрождение» | Бесплатный курс

Различия между мобильными приложениями и сайтами

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

Доступ к данным пользователей

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

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

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

Частота использования

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

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

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

Оптимальный сценарий использования

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

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

Выводы

Обзор раздела: В этом разделе мы рассмотрели выводы, которые можно сделать на основе предыдущего материала.

Оптимизация пользовательского опыта

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

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

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

Размеры элементов и тянущаяся верстка

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

Размеры элементов

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

• Элементы должны быть достаточно большими, чтобы пользователь мог легко нажимать на них своими пальцами.

• Гайдлайны содержат рекомендации по минимальным размерам кликабельных элементов. Минимальный размер - 44 точки на 44 точки.

Тянущаяся верстка

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

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

Адаптация дизайна под различные устройства

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

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

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

Работа в фотошопе

Обзор раздела: В этом разделе говорится о работе в фотошопе.

Работа с нативными дизайн системами

• При проектировании и дизайне приложений для iOS принято использовать фреймы iPhone 8 или iPhone X.

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

• При разработке под iOS нужно выбрать либо iPhone X (375 на 812), либо iPhone 8 (375 на 667).

• Разница между iPhone X и iPhone 8 только в высоте экрана и размере карточки или количестве контента, помещаемого на один экран без скролла.

Проектирование под Android

• При проектировании под Android всегда используется функция 360 на 640, которая является универсальным стандартом.

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

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

Экспортирование фотографий

• Фотографии нужно экспортировать во всех шести разрешениях: 0.5x, 1x, 1.5x, 2x, 2.5x и 3x.

Работа с изображениями и шрифтами

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

Работа с изображениями

• Использование одной картинки достаточно для форматов PDF и PNG.

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

• Для экспортирования изображений в различные размеры используйте программу Sketch.

Типографика

• Используйте системные шрифты iOS и Android, чтобы не создавать свои.

• Начните с простого варианта работы с типографикой и постепенно наращивайте навыки.

• Системный шрифт iOS - San Francisco, а Android - Roboto.

Скачивание шрифтов

• San Francisco можно скачать бесплатно на сайте Apple Developer.

• Roboto доступен на Google Fonts.

• Если вы работаете на Windows, то San Francisco не поддерживается официально.

Альтернативы San Francisco для Windows

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

• Ссылка на скачивание альтернативной версии San Francisco доступна в описании занятия.

Точность размеров в мобильном дизайне

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

Размеры элементов и колонок

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

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

• Если размеры нечетные, то элемент может не попадать точно на сетку или торчать за ее пределами.

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

Количество колонок

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

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

Создание сетки для контента

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

Создание колонок

• Раньше необходимо было делать 110 колонок для айфона, чтобы полностью закрыть все. Сейчас можно делать автоматически, и количество колонок подбирается по необходимости.

• Можно делать либо 8 либо 4 колонки, потому что четыре тоже подходит. Если нужно больше колонок, то можно попробовать использовать 8.

• Количество колонок зависит от конкретного дизайна и композиции контента.

Управление контентом

• Большое количество колонок помогает проще ориентироваться в контенте и структурировать его.

• Нужно учитывать высоту элементов и отступ между ними при выборе количества колонок.

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

Зависимость от дизайна

• Количество колонок и ширина гаттаров зависят от конкретного дизайна, который вы создаете.

• Не стоит делать больше 5 колонок, а вертикальные роузы можно настраивать в зависимости от того, хотите ли вы начинать с gator или нет.

Примеры использования

• Если у вас много контента и он сложный, то нужно использовать больше колонок.

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

Особенности Android

• У Android есть внизу меню, которого нет у iOS.

Экран и меню приложения

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

Скрытие меню приложений

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

• При создании дизайна нужно учитывать размеры экрана.

Кнопка "Назад" на Android

• На Android-устройствах есть кнопка "Назад", которая позволяет вернуться на один уровень назад или перейти на главный экран.

• Эта кнопка также позволяет открыть вкладки уже запущенных приложений.

Оповещение пользователя с помощью Snack Bar

• Snack Bar - это оповещение пользователя о выполнении какой-то операции.

• Она появляется внизу экрана и позволяет отменить критические операции.

Material Design и Floating Action Button

Обзор раздела: В этом разделе рассказывается о Material Design и Floating Action Button.

Особенности Material Design

• Snack Bar - это особенность Material Design, которая используется для оповещения пользователя о выполнении какой-то операции.

Floating Action Button

• Floating Action Button - это плавающая кнопка, которая позволяет осуществлять основное действие на экране.

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

Передача дизайна на разработку

Обзор раздела: В этом разделе рассказывается о передаче дизайна на разработку.

Дизайн-макет приложения

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

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

Прототипирование

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

• Сиджи могут быть залинкованы к прототипу.

Использование компонентов и структурирование проекта

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

Использование компонентов

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

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

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

Структурирование проекта

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

• Рекомендуется создавать отдельные страницы для каждой части проекта: дизайн системы, макет приложения, иконки/иллюстрации.

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

• Шрифты, использованные в дизайне, также должны быть предоставлены в отдельной папке или файле.

Экспортирование шрифтов и изображений

Обзор раздела: В этом разделе рассказывается о том, как правильно экспортировать шрифты и изображения для передачи разработчикам.

• Шрифты могут быть экспортированы в виде отдельных файлов или архива с ними.

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

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

Создание дизайна: шрифты и анимация

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

Выбор и использование шрифтов

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

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

• Если используется видео-анимация, то желательно предоставить описание текстом и посекундное видео.

Анимация

• Для сложной анимации нужно использовать After Effects.

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

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

• Для сложной видео-анимации нужно предоставить посекундное видео и описание текстом.

Заключение

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

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

Просмотр приложений на iPhone

Обзор раздела: В этом разделе рассматривается просмотр приложений на iPhone и как использовать функцию поиска.

Поиск приложений

• Можно выбрать категории, которые нужны для просмотра.

• Если не знаете английский язык, можно использовать Google Translate для перевода страниц целиком.

• Нет русской версии гайдлайна, но можно использовать Google Translate для понимания основных слов.

• Можно выбирать сортировку по популярности или свежести.

• Бесплатная версия имеет ограниченные возможности и содержит рекламу.

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

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

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

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

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

• Подсказки варьируются в зависимости от запроса.

• Можно изучить, как это реализовано в других приложениях.

Выводы

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

Создание дизайна на основе предыдущего опыта

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

Основа для создания дизайна

• Невозможно создать дизайн без использования предыдущего визуального опыта.

• Важно выполнить работу грамотно и актуально для нынешнего времени.

• Ориентируйтесь на трендовые работы, чтобы развивать современный вкус.

Рекомендации по изучению дизайна

Обзор раздела: Этот раздел содержит полезные ссылки и материалы для изучения дизайна.

Полезные материалы

• Ссылки на курсы и статьи по Behance могут помочь расширить понимание о дизайне.

• Telegram канал точка ру и xpop содержат много полезных статей о дизайне.

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

Понимание плотности пикселей

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

Размеры компонентов

• Если вы переносите компонент на другую страницу, он превращается в инстанцию.

• Книги не рекомендуются для изучения дизайна, лучше использовать статьи и видео.

• Нужно учитывать размеры экрана при создании компонентов.

Как работать с компонентами в Figma

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

Вырезание и вставка компонентов

• Для вырезания компонента используйте комбинацию клавиш Control + X.

• Чтобы вставить скопированный компонент на другую страницу, перейдите на нужную страницу и нажмите Control + V.

Изменение свойств компонента

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

Превращение компонента в обычный фрейм

• Чтобы превратить компонент в обычный фрейм, выберите его инстанцию и нажмите комбинацию клавиш Control + Alt + B или выберите опцию "Detach Instance".

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

• Если вы случайно удалили компонент, то можете восстановить его, выбрав инстанцию и нажав на опцию "Restore Master Component".

Работа с компонентами на нескольких страницах

• Компонент может быть только на одной странице. Инстанции могут быть на всех страницах в рамках одного проекта.

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

Заключение

• В этом разделе было рассмотрено, как работать с компонентами в Figma. Были описаны основные действия по вырезанию, вставке, изменению свойств и превращению компонента в обычный фрейм.