По сути, это набор стандартов, компонентов и лучших практик, которые обеспечивают единство и согласованность пользовательского опыта в масштабах всего продукта или экосистемы продуктов. Дизайн-система — это своего рода визуальный язык, на котором «говорит» продукт с пользователем, а также вся совокупность UI/UX-паттернов, используемых в ОС и приложениях.

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

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

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

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

В мобильном мире на сегодняшний день доминируют две большие дизайн-системы: 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 обеспечивают ощутимую обратную связь в ответ на каждое действие пользователя. Интерактивные элементы кратковременно подсвечиваются при нажатии, индикаторы выполнения сообщают о статусе длительных операций, а анимация и звук помогают прояснить результаты действий.

Метафоры

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

Пользовательский контроль

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

Первые 5–6 лет производства айфонов разработчикам дизайна для iOS не нужно было беспокоиться по поводу размера экрана — достаточно было убедиться, что макет корректно отображается на дисплее 320×480. Однако за последние 3 года размеры экранов iPhone менялись трижды, что создало определенные сложности, особенно для дизайнеров мобильных приложений.

Сейчас существует полная таблица соответствия моделей iPhone и размеров их экранов.

Размер фрейма — это «размер в точках» или «@1x» для данной модели. Рекомендуется проектировать макеты именно такого размера для конкретного устройства.

Масштабирование при экспорте показывает, насколько крупнее должны быть растровые изображения (PNG, JPG) при выгрузке, чтобы эффективнее использовать более высокое разрешение некоторых устройств.

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

• Если вы разрабатываете приложение для широкой аудитории, используйте самый распространенный сейчас размер экрана iPhone: 375×812 pt или 375×667 pt (но поскольку у них одинаковая ширина, разница невелика).
• Если вы разрабатываете приложение для технически подкованной или дизайнерской аудитории, скорее всего, самый популярный размер экрана iPhone для вас будет более свежий 390×844 pt.

Дизайн, который хорошо выглядит на более узком экране (375pt), почти наверняка будет работать и на чуть более широком дисплее (414pt), но обратное неверно. Поэтому всегда лучше сначала разрабатывать макеты для узких экранов, затем проверяя их и корректируя для больших дисплеев. Так как высота является менее строгим ограничением, не так важно, будет ли ваше рабочее пространство экрана 667 или 812pt в высоту.