Дизайн приложений для IOS: прототипирование и плоский дизайн в рамках HIG Apple
Разработка дизайна приложений для iOS — задача не из легких. Тем не менее, нет ничего невозможного. Давайте рассмотрим особенности дизайнерского оформления для гаджетов с операционной системой iOS и популярные сервисы, которые помогают воплощать в жизнь интересные задумки по дизайну интерфейса приложений.
Содержание
- Плоский дизайн интерфейса для iOS
- Ничего лишнего
- Двухмерная графика
- Суперэллипс
- Читаемая типографика
- Цветовые акценты
- Белое пространство
- Прототипирование приложений для iOS
- InVision
- Marvel
- Origami Studio от Facebook
- Официальный HIG для iOS от Apple
Плоский дизайн интерфейса для iOS
В последнее время в веб-дизайне по всему миру прослеживается четкая тенденция к минимализму — визуальному упрощению того, с чем пользователи гаджетов имеют дело каждый день. Речь идет о плоском дизайне — в частности, для мобильных устройств с операционной системой iOS.
Итак, что же такое столь популярный среди разработчиков интерфейса iOS flat design? Плоский дизайн представляет собой отсутствие глянцевых или визуальных 3D-эффектов в графических элементах на экране мобильного устройства. Такой подход стремительно вытесняет реализм — выпуклые, утопленные и полые элементы, имитирующие на экране объекты реального мира.
Ничего лишнего
В первую очередь плоским дизайн приложений выглядит потому, что в элементах отсутствует объем. Как этого добиться? Изначально стоит забыть про разноплановые декоративные приемы:
-
тени;
-
текстуру;
-
блики;
-
градиент.
Основополагающий принцип — простота форм, контуры которых должны быть четкими и лаконичными. Это позволит добиться главной цели при разработке дизайна приложения — легкости и невесомости структуры, которая делает интерфейс понятным на интуитивном уровне. Улучшение юзабилити помогает быстро ориентироваться и совершать целевые действия — что и привлекает пользователей.
Двухмерная графика
Никаких 3D-эффектов. Это табу. Плоский дизайн предполагает исключительно двухмерные иллюстрации во всех разделах приложения — галерея, слайдеры и т. д. Это позволяет создать единый стиль для мобильной утилиты, делая ее оригинальной.
Что же касается фотографий, то их использование не противоречит принципам плоского дизайна.
Важно! Фото должны быть оформлены как отдельная область и в едином с приложением стиле, без лишних, выбивающихся из общей канвы элементов.
Суперэллипс
Важная деталь плоского дизайна интерфейса для iOS – иконки в форме суперэллипса. Модное название означает помесь квадрата и круга. При этом скругление угла у суперэллипса начинается внутри прямой, постепенно перерастая в видимую кривую.
Интересно! Почему именно суперэллипс? Существует вполне логическое объяснение — плавный переход от прямой части к изогнутой дает форму, которая органично сочетается с углами мобильных устройств Apple.
Читаемая типографика
Простота и лаконичность плоского дизайна интерфейса iOS предполагают также, что на первый план выходит контент. Именно поэтому очень важна типографика, в которой оформлено текстовое наполнение приложения. Основные характеристики текста:
-
отсутствие теней и прочих декоративных деталей;
-
шрифты без засечек.
Минимализм, четкие формы, отсутствие отвлекающих элементов обеспечивают возможность обратить внимание пользователей на конкретную информацию, которая заметна, приятно читается и легко воспринимается. Это как раз тот случай, когда содержание и форма связаны между собой и дополняют друг друга.
Цветовые акценты
Плоский дизайн приложения для iOS требует применения одного главного цвета, преимущественно приглушенного. Дополнительные оттенки, количество которых, как правило, не превышает 2–3, отличаются чистотой. Благодаря этому создается ощущение свежести и аккуратности. Использование пестрой цветовой схемы и смешение оттенков разрушит общую концепцию.
Белое пространство
Одна из основных отличительных особенностей дизайна приложений для iOS. Белый фон, по сути, представляет собой пробелы и своего рода воздух между элементами. Именно поэтому дизайнерам удается достичь легкости, рационально используя пространство. Белый фон значительно улучшает восприятие информации пользователями, акцентируя внимание на главном.
Важно! Слишком много воздуха между цветными элементами может спровоцировать отсутствие визуальной мотивации и усложнить навигацию. Как следствие — пользователь потеряет интерес и, скорее всего, удалит приложение.
Прототипирование приложений для iOS
Прототипирование представляет собой процесс определения общей концепции приложения, планирование расположения элементов на странице, выбор цветовой гаммы и изображений. Предварительная разработка детального плана будущей утилиты для мобильных устройств помогает избежать такой проблемы, как провальный проект — ошибки и недочеты на этапе планирования исправить куда легче, нежели после запуска приложения. Рассмотрим наиболее популярные из специализированных сервисов для прототипирования под iOS.
InVision
Программа, которую с уверенностью можно назвать максимально продвинутой, предназначена преимущественно для профессионалов и обладает массой достоинств.
-
Наличие плагина для Sketch — векторный графический редактор для macOS, который применяется для прототипирования интерфейсов приложений и сайтов с возможностью создавать интерактивные проекты. Проще говоря, работая в программе InVision, созданный макет можно превратить в прототип прямо в Sketch. Это значительно упрощает процесс проектирования и экономит время.
-
Процесс подстановки шаблонов имен, заголовков, дат, текстов происходит довольно оперативно.
-
Использование фотографий с бесплатного стока Unsplash.
-
Возможность оценить макет еще на этапе разработки — посмотреть размеры объектов, расстояние между ними, а также оставить комментарии прямо в сервисе.
Что же касается недостатков, то он всего один — не совсем удобный интерфейс.
Приятный бонус — бесплатное использование сервиса вне зависимости от количества проектов.
Marvel
Программа отличается разнообразием функционала, простотой использования и помогает создавать постраничный прототип приложения для всех устройств с операционной системой iOS, включая умные часы.
К явным преимуществам относятся:
-
планирование интерфейса с помощью внутренней «дизайн-студии»;
-
возможность листать контент внутри, закрепив navbar (панель навигации) и toolbar (панель инструментов);
-
добавление гифок;
-
возможность оставлять комментарии.
Однако есть и недостатки:
-
отсутствие удобных символов и разноплановых состояний экрана;
-
на стационарном компьютере сервис работает исключительно в онлайн-режиме.
Для прототипирования 1–2 приложений для iOS программой можно пользоваться бесплатно. Если планируется большее количество проектов, то придется заплатить 14 долларов.
Origami Studio от Facebook
Согласно отзывам на специализированных форумах, сервис непросто освоить. Но оно того стоит, поскольку программа отличается обширным функционалом.
-
Подключение большого количества патчей — дополнительных программ, позволяющих управлять разработкой дизайна приложения, вносить изменения и улучшения в зависимости от ситуации.
-
Послойное прототипирование. Благодаря этому можно создавать анимации и эффектные переходы между экранами.
-
Возможность на этапе прототипирования просмотреть, как отдельные элементы реагируют на обращение к ним.
К недостаткам можно отнести:
-
обязательное наличие Mac;
-
подтвержденный аккаунт разработчика Apple.
Использовать сервис можно абсолютно бесплатно.
В целом, разработка утилиты для гаджетов — не такое простое занятие, каким может показаться. Подробнее об этом можно прочитать в статье «Дизайн мобильных приложений». Несмотря на существование специализированных программ, прототипирование приложений для iOS представляет собой довольно трудоемкий процесс, требующий знаний и навыков. YASNO — команда профессионалов, которые занимаются разработкой и продвижением приложений и сайтов с 2013 года. Компания предлагает своим клиентам не только создание проекта от начала до конца, но и квалифицированную помощь на любом из этапов проектирования, маркетинга, рекламы.
Официальный HIG для iOS от Apple
HIG — Human Interface Guidelines — набор рекомендаций от создателей операционной системы iOS по оформлению приложения. Рассмотрим основные стандарты для iPhone.
-
Плоский, легкий дизайн.
-
Единица измерения — pt (point). 1 pt равен 1/72 дюйма.
-
2 варианта размеров экрана — 320х568 pt и 375х812 pt.
-
Системный шрифт — San Francisco.
-
Конкретный нейминг. Tab Bar — верхнеуровневая навигация. Navigation Bar — текущее местоположение пользователя в приложении и выбор дальнейших действий. Alerts — инструмент предупреждения. Touch ID — сканер отпечатков пальцев. Segmented Controls — горизонтальный набор из двух или более сегментов, каждый из которых выполняет функцию кнопки.
-
Дочерняя страница появляется справа поверх материнской с эффектом slide in. Возвращение на материнский экран происходит с эффектом slide out.
-
Steppers — используется для ввода небольших значений, например, количества копий.
-
Всплывающая панель — Popover.
-
Стрелка «Назад» не имеет линии посередине.
-
Выбор даты происходит с помощью барабана.
Все эти принципы являются визитной карточкой приложений для iOS, делая софт неповторимым и узнаваемым среди пользователей. Для утилит с ОС Android также существует ряд отличительных особенностей, ознакомиться с которыми можно в статье «Дизайн приложений для android».
Артем
Вам может быть интересно
- UX/UI
- Дизайн
- Usability
Есть, что добавить? Поделись со всеми!
Ваш комментарий