От переводчика: Роман Гапонов — сооснователь компании Django Stars, которая занимается разработкой веб- и мобильных приложений. Основываясь на личном опыте и опыте своей компании, Роман написал статью о процессе разработки пользовательского интерфейса. Изначально она была размещена на Medium, на английском языке. Перевод этой статьи публикуется нами на Хабре.
Немного приятного: в этой статье (а это уже второй материал о мобильной разработке, первый здесь) есть своеобразная пасхалка, которая позволяет получить скидку на курс Skillbox и агентства Agima по мобильной разработке. Это ребус, который при расшифровке даст слово или название решения из сферы разработки мобильных интерфейсов. Скидка за угаданный ребус — 10%. Ребусы есть и в других наших статьях из этой серии. Скидки суммируются, и если собрать их все, можно получить курс за смешную цену.
Создание концепции
Самый первый этап — это когда идея уже есть, а разработчик имеет все необходимые инструменты для ее реализации. Но с чего нужно начинать? Мы начинаем с изучения ниши, целевой аудитории и кейсов продукта. Это неплохо помогает понять будущих клиентов сервиса и создать пользовательский интерфейс, который оптимален для каждого из них.
Финтех-приложение. Много иконок, они не слишком крупные, но работать с ними удобно. Обилие разнообразных функций
Приложение одного из такси-сервисов. Кнопок не так много, и они большие, чтобы сложно было промахнуться
В первом случае должно быть много полей, списков, графиков и переходов. Во втором случае мы видим большие элементы управления, которые просто использовать во время поездки, — и такие вещи лучше понимать уже на этом этапе.
Брейнсторминг и эскизы
Как только концепция проекта ясна, двигаемся к следующему этапу — брейнстормингу. Он нужен, чтобы превратить идею интерфейса в реальность. Мы в Django Stars берем ручку и лист бумаги — это быстрее, чем использование таких продвинутых инструментов, как Balsamiq Mockups, Sketch, Photoshop и InVision.
Диаграмма переходов
Создание эскиза дает нам структуру интерфейса. Но как пользователь должен взаимодействовать с ним? Здесь поможет User Flow Diagram. Она проиллюстрирует логику продукта, показав всевозможные способы взаимодействия с интерфейсом, дорожную карту этих взаимодействий и состояние интерфейса на каждом этапе.
Утверждение структуры и диаграммы переходов
Как только мы закончили с эскизами интерфейса и диаграммой переходов, необходимо, чтобы клиент их утвердил. Структура и переходы — основа всей дальнейшей работы с интерфейсом, поэтому мы не двигаемся дальше без получения подтверждения. На этом этапе гораздо проще внести какие-то изменения в будущий интерфейс, а значит, сэкономить и время, и деньги заказчика.
В качестве примера можно взять интернет-магазин или систему управления продажами. Меняя структуру такого проекта после внедрения дизайна, можно попасть в ситуацию, когда ломается цветовая схема сайта, поскольку элементы интерфейса и некоторые другие его части были изменены. В этом случае вам, вероятнее всего, придется отказаться от изменений. Либо всю работу нужно будет переделывать с нуля.
Выбор стиля интерфейса
Когда клиент все утверждает — можно двигаться дальше. Что будем делать? Выберем стиль интерфейса. Есть множество вариантов: от минимализма и Metro до material design и скевоморфизма. На этом этапе мы просим клиентов прислать несколько ссылок на примеры стиля интерфейса, который им нравится, а также спрашиваем об их планах на ближайшее будущее продукта. Мы уделяем внимание текущим трендам, масштабированию интерфейса, определяем время, которое необходимо на разработку и внедрение дизайна.
Подтверждение стиля
На этом этапе мы рассказываем клиенту о том, как видим все сами, а также объясняем, почему приняли то или иное решение. Он может не соглашаться с некоторыми моментами в самом начале, поскольку пока не получил полной информации об интерфейсе — у него не сформировалось представление и еще нет понимания возможных проблем. Цель — завершить обсуждение принятием варианта, который удовлетворяет и нас, и клиента.
Курсы по теме: Fullstack мобильный разработчик.Курс создан силами Skillbox и Agima. 4-месячная программа обо всех инструментах, без которых невозможна разработка мобильных продуктов.
Прототипирование, дизайн и их демонстрация
Как только все эти этапы завершены, мы готовы к тому, чтобы разрабатывать и показывать заказчику полную версию дизайна. Демонстрация может выглядеть по-разному. Основываясь на собственном опыте, мы рекомендуем придерживаться следующего.
Wireframe
Самая быстрая форма реализации ваших идей. Это низкоуровневая демонстрация дизайна. Однако такой способ позволяет показать структуру и описание взаимодействия пользователей с разрабатываемым продуктом. Выполняется в форме блочного интерфейса в оттенках серого.
Макет
Макетная демонстрация позволяет продемонстрировать проект дизайна, приближенный к реальности. Здесь все элементы и контент статичны, но воспринимается такая форма нагляднее предыдущей. И создать презентационную модель можно достаточно быстро.
Кликабельный прототип
Это уже детализированный прототип финального продукта. Он эмулирует взаимодействие пользователя с интерфейсом. Например, позволяет кликать по элементам управления, использовать формы и проверять другие моменты, включая анимацию. Тем не менее создание такого прототипа — процесс, который требует большого количества времени.
Так. Пришло время ребуса, вы попали именно в то место, где можно найти скидку. Учитывайте, что английский здесь может мешаться с русским, и главное — не забывайте, что мы будем тщательно следить за комментариями и удалять из них подсказки и ответы! Промослово, зашифрованное в ребусе, следует назвать, когда с вами свяжется наш менеджер после того, как вы отправите заявку на курс. Скидки за разгаданные ребусы суммируются между собой (с учетом этой статьи есть четыре ребуса), но не со скидками на сайте. Слишком медлить не стоит — промо работает до 30 августа 2018 года.
Анимированные flow
А это уже видеозапись взаимодействия пользователя с приложением. Создание демонстрационной модели такого типа требует максимального количества времени, ведь необходимо не только сделать прототип, но еще и записать на видео работу с ним. Тем не менее это очень наглядная модель.
Утверждение дизайна
В качестве вывода
Поэтапная разработка интерфейса позволяет быстро добраться до конечной цели. Все это экономит время, причем в процессе разработки можно без проблем вносить изменения. Также такой способ работы значительно снижает вероятность появления неожиданных правок от клиентов.
Skillbox рекомендует
В этом материале — проверенные способы сделать удобный интерфейс… или найти готовый.
https://d2xzmw6cctk25h.cloudfront.net/post/49/og_cover_image/a262ccafd177604f908186e9937e6993
Как вы приступаете к созданию интерфейса? Насколько сильно вы ориентируетесь на web-интерфейсы? Помните о 5 самых важных аспектах проектирования UI для мобильных приложений.
1. Правила взаимодействия с пользователем не отменяются
Вспомним 4 ключевых правила интерактивного дизайна:
— Исследования
Отслеживайте поведения пользователей для корректировки работы приложения. Задайте пользователям цели и выявите препятствия на пути к их достижению.
— Учет пользовательских привычек и анатомических особенностей
Правильный интерфейс — не головоломка. В идеале пользователь не должен думать над тем, что нужно сделать, чтобы получить нужный результат, и не вынужден отгадывать, зачем нужен тот или иной элемент.
Помните, что у человека по пять пальцев на двух руках, и что со времен раннего html подчеркнутый текст синего цвета означает не что иное как ссылку.
— Возможность обучаться
Новое и непривычное в интерфейсе должно выглядеть и вести себя дружелюбно. Всегда оставляйте возможность отменить действие и вернуться назад. Тогда новые модели поведения можно будет легко изучить и принять.
— Обратная связь
Оповещайте пользователя о том, что его задача была выполнена: это может быть звуковой сигнал, небольшое модальное окно или всплывающее оповещение.
2. Понимание пользователей
Есть пара тактик, позволяющих понять поведение пользователей и проектировать интерфейс с его учетом:
— Внедрение персонажей
Результатом небольшого брейнсторма становятся один или несколько персонажей, являющихся классическими представителями вашей аудитории. Этот метод очень подробно описывал А. Купер, и даже рекомендовал давать имя этим персонажам и придавать им личные характеристики, чтобы приблизить их к реальным людям.
Соответственно, вы проектируете интерфейс только для них, а не для абстрактного «пользователя».
— Пользовательские сценарии
Написание сценариев поведения обеспечит понимание того, как человек будет действовать в приложении. Начните с цели, которую пользователь должен достичь и пропишите все его действия на пути к ней по пунктам. Опишите все существующие пути, начиная с наиболее очевидных. Так вы сможете отсечь лишнее или понять, как упростить этот путь.
— Карта действий
Продумайте все возможные условия для каждого действия и поведение элементов. Это избавит вас от лишних или непредусмотренных функций, а также поможет понять эмоциональную составляющую использования вашего продукта.
3. План потоков
Просто набросайте ход действий пользователя на бумаге — от начала пути до момента достижения цели. Это должно дать понимание количества и сложности шагов между первым и последним действием.
Пример: банковское приложение. Сценарий: настройка пополнения депозитного счета.
Автоматическое пополнение депозита
[Установить]
Выберите частоту пополнения
[Раз в месяц] [Два раза в месяц] [Раз в несколько недель] [Каждую неделю]
Один раз в месяц
[Выберите дату]
Подтвердить
Введите сумму
[Введите сумму]
[Установить автоматическое пополнение счета]
Эскизы и прототипы помогают изучить одну из наиболее важных составляющих хорошего приложения — содержание. Вот несколько инструментов, которые помогут сделать это online:
Mockflow
iPhone Mockup
Mockup Builder
Fluid UI
4. Ориентация на поведенческие шаблоны, привычки и неписанные стандарты. Учет движений
Поведенческие шаблоны
Использование мобильных гаджетов вращается вокруг множества нюансов, которые нельзя не принимать во внимание — например, расположение большого пальца.
По этой причине навигационные кнопки, как правило, находятся в нижней части экрана:
В книге «Шаблоны мобильных интерфейсов», выпущенной UXPin, рассматриваются два вида взаимодействия: жесты и анимация.
Пользователи уже привыкли к возможности использовать разные жесты для различных ситуаций:
И распространенные типы анимации также вызывают ряд ожиданий, основанных на предыдущих опытах взаимодействия с приложениями.
Посмотреть, какими они бывают можно на Capptivate и UseYourInterface.
Учет движений
Анатомический фактор — очень важный элемент проектирования. Учитывайте строение тела человека и статистику использования мобильных устройств при проектировании. Левый верхний угол подходит для размещения важной информации, в то время как нижняя граница экрана — для навигации.
Именно так выглядят схемы наиболее удобных для человека жестов.
94% времени пользователи держат смартфон в вертикальном положении.
Почти половину времени пользователи проводят держа устройство правой рукой, и используя для работы с экраном только большой палец.
И большинство пользователей используют смартфоны с диагональю экрана в пределах 4-5,5 дюймов.
5. Использование итеративного подхода
Говоря просто, лучше всего начинать с малого функционала, анализируя его важность, необходимость и качество исполнения, постепенно дополняя нововведениями. Это не только ускорит запуск проекта, но и сократит риски. А главное — позволит избежать перегруженности интерфейса.
Бонус: web-помощники для проектировщика интерфейсов приложений
1. Как подобрать хорошо сочетающиеся цвета для мобильного приложения? Используйте эти сервисы:
getuicolors.com
www.coleure.com
bootflat.github.io/color-picker.html
2. Изучите готовые примеры отличных интерфейсов, чтобы лучше понять необходимый уровень:
www.mobile-patterns.com/
3. Используйте готовые мокапы:
www.premiumpixels.com/tag-index/
uispace.net/all-psd
dbfreebies.co/mobile
Тем, кто хочет разрабатывать под мобильные устройства, рекомендуем профессию «Разработчик мобильных приложений».
Дизайн интерфейсов мобильных приложений не предоставляет широкое поле для маневров. В условиях ограниченного пространства и низкой концентрации внимания UI-дизайн должен быть предельно функциональным и буквально работать со скоростью мысли. Идеальный вариант, когда интерфейс представляется достаточно простым для новых пользователей. В этой статье будут описаны проверенные способы работы с интерфейсами.
1. Правила интерактивного дизайна применимы всегда
Тот факт, что экран мобильного устройства небольшой, еще не означает, что по отношению к нему нельзя применить правила интерактивного дизайна.
Некоторые эксперты выделяют 5 основных принципов интерактивного дизайна:
- Дизайн, ориентированный на потребителя. Дизайн разрабатывается для конкретных пользователей. Исследования целевой группы, опросы и интервью позволят нарисовать точный портрет потребителя, составить представление о тех, кто вероятнее всего будет пользоваться разработкой. Ориентируясь на эти данные, можно создать функционал приложения, исходя из интересов и потребностей конечного пользователя.
- Юзабилити. Это представляется самоочевидным, но не будет лишним напомнить, что приложение в первую очередь должно быть удобным. Если целевая аудитория не может без каких-либо сложностей пользоваться приложением, тогда люди попросту не будут его загружать из App Store.
- Подсказки. Пример: синий подчеркнутый текст является свидетельством того, что за кликом по нему последует перенаправление в другое место. Подсказки стоит применять корректным образом, чтобы пользователям не приходилось задумываться о том, зачем, собственно, нужен определенный элемент.
- Легкость освоения. Для того, чтобы интерфейс был интуитивно понятен, при разработке простых мобильных приложений лучше использовать привычные модели функционирования (об этом речь пойдет позже). Знакомые элементы позволяют быстрее освоить приложение.
- Фидбек и время реакции. Элемент обратной связи — это возможность узнать, была ли задача выполнена или нет. Им может быть простейший звуковой сигнал или же более сложная деталь, такая как диалоговое окно. Стоит перепроверить, что фидбек реализован должным образом, а время реакции не выходит за рамки, очерченные исследователями Nielsen Norman Group.
Эти пять аспектов можно считать основой, фундаментом, на котором выстраиваются интерактивные элементы.
2. Сведения о пользователях
Размер экрана не единственная сложность мобильного дизайна. Важно еще и понимание пользователей. Для этого существует три тактических подхода.
- Портрет потребителя можно рассматривать как некий функциональный прообраз ожидаемого поведения аудитории. Это дает возможность узнать, чем руководствуются пользователи, принимая определенные решения в приложении.
- Пользовательские сценарии. Сценарии предоставляют важную информацию относительного действий пользователей. Благодаря сценариям создается оптимальный дизайн интерфейса, который бы помогал людям в выполнении определенных задач.
- Карты опыта. Эти карты содержат все возможные шаги пользователей в приложении. С их помощью можно понять эмоции и обстоятельства, связанные с действиями аудитории.
Заранее продумав все эти нюансы, можно избавить себя от головной боли в будущем.
Юзабилити-тестирование могут быть уместны между каждым релизом масштабного обновления. Специальные сервисы, подобные UserTesting, позволяют узнать, как именно люди взаимодействуют с приложением в своем естественном окружении. Для получения большей информации относительно поведения пользователей (жесты, положение тела) рекомендуется проводить тестирования приложений в лабораторных условиях с участием как минимум пяти человек.
3. Контент и пользовательский маршрут как отправные точки UX-дизайна
Разработка дизайна и исследовательская работа часто идут параллельно. К примеру, все полученные прежде сведения могут быть использованы, чтобы быстро составить набросок пользовательского потока или маршрута пользователей в приложении. Но прежде, чем выбрать определенный маршрут, будет уместно сделать незамысловатый прототип. Прототип не обязательно должен быть детализированным, — достаточно простой схемы на листке бумаги, чтобы понять, как люди переходят от контента к действиям.
Прежде чем делать наброски или прототипы стоит составить план, который бы помог выстроить пользовательский маршрут вокруг наиболее важной детали приложения — контента. Так можно в точности оценить, какое число страниц будет нужно для приложения.
В качестве следующего шага можно сделать набросок каждой страницы — на бумаге или же с помощью инструментов для прототипирования приложений, таких как UXPin.
Наличие прототипа позволяет проверить на практике определенные идеи, узнать мнение пользователей о них.
4. Улучшение юзабилити за счет привычных моделей взаимодействия
Мобильный дизайн так или иначе связан с многочисленными нюансами, специфическими для конкретного устройства (например, расположение большого пальца).
Речь не о том, чтобы откровенно копировать дизайн других разработчиков. Но наличие привычных паттернов важно для юзабилити, затем уже можно дать волю творческому порыву. Так дизайн приложения с большей вероятностью будет соответствовать ожиданиям целевой аудитории, и не навеет скуку.
Как описывается в бесплатной книге Mobile UI Design Patterns, существуют две категории моделей интерактивного дизайна, которые следует непременно применять.
- Жесты. Функционал тачскринных устройств построен на жестах (касание, свайп, двойной клик, масштабирование).
- Анимация. Анимированный видеоряд задерживает внимание на интерфейсе в то время, пока загружается контекст.
Есть разница между теми элементами, которые исчезают сами по себе, и теми, которые убираются из поля зрения собственноручно: к последним можно будет вновь вернуться позже. Если анимация используется в комбинации с жестами, это углубляет опыт взаимодействия.
За счет привычных моделей взаимодействия можно определенным образом размещать элементы интерфейса. К примеру, кнопки навигации внизу экрана удобнее нажимать большим пальцем.
Yelp — показательный пример интуитивно понятного дизайна мобильных приложений. Приложение не содержит практически ничего лишнего, крупные аккуратные кнопки выполняют свое предназначение.
Названия кнопок не вызывают непонимания. Но главная особенность в том, что в приложении реализованы знакомые UI-паттерны (панель инструментов внизу и т.д.), которые есть во многих мобильных приложениях.
Говоря о контенте, необходимо отметить, что текст всегда должен быть понятным и легко читаться. Важные слова помещаются вначале. Также важна определенная целостность формулировок: одни и те же названия на всех страницах.
5. Дизайн для толстых пальцев
Дизайн интерфейсов разрабатывается с поправкой на размеры пальцев пользователя. Если кнопки излишне маленькие или слишком близко расположены друг к другу, это усложнит управление приложением (что только разочарует целевую аудиторию, отсюда и нежелательные отказы).
Вот несколько советов по созданию кнопок и других подобных элементов:
- Люди держат свои телефоны и управляют ими по-разному. Некоторые аналитики выделяют три основных способа: в одной руке и одним пальцем, двумя руками и одним пальцем, двумя руками и двумя пальцами. Планшеты пользователи тоже держат по-разному.
- Согласно исследованию MIT Touch Lab, ширина среднестатистического указательного пальца составляет 1.6-2 см, или 45-57 пикселей, что больше тех данных, которые сообщаются в большинстве пособий. К примеру, Apple рекомендует придерживаться 44 пикселей, однако это не всегда уместно. Если кнопка слишком большая, пользователи могут и не понять, что это кнопка действия. Но, как бы то ни было, следует принимать в расчет размеры пальцев и способы взаимодействия с приложением.
6. Тренды веб-дизайна: градиенты и тени пока еще рано списывать со счетов
Эти элементы возвращаются, достаточно взглянуть на экземпляры разработанного Google Material Design. Есть мнение, что тени помогают мозгу понять устройство интерфейса, и, видимо, по этой причине тени повсеместно присутствовали в эпоху повсеместного распространения скевоморфизма.
Тени не будут лишними в кнопках, переключателях и прочих визуальных элементах.
Благодаря теням и даже градиентам UI смотрится естественнее, эти детали можно использовать для создания 3D-кнопок и форм ввода.
7. Базовый принцип простого дизайна: устранить беспорядок
И хотя миф об эффективности правила трех кликов в веб-дизайне уже давно развенчан, это правило, тем не менее, может оказаться достаточно эффективным применительно к приложениям. В идеале пользователь должен выполнять задачи быстро и за ограниченное количество шагов. Гендиректор Yahoo Марисса Майер советует дизайнерам придерживаться правила «двух нажатий». По ее словам, «если в приложении недостаточно двух нажатий, чтобы сделать все необходимое, значит этому приложению необходим редизайн». «В Yahoo Flickr это присутствует повсеместно: открыв экран, вы можете выбирать изображения, просматривать альбомы, группы, устанавливать уведомления, выполнять другие действия — и все это с помощью только лишь двух кликов».
Стоит озаботиться объемом действий, которые приходится выполнять пользователя. Чем меньше им придется думать, тем выше вероятность, что приложение ожидает успех.
При разработке дизайна для мобильных устройств необходимо учитывать множество факторов. Мы уверены, что это подробное руководство избавит вас от головной боли при создании приложений.
Сегодня более чем когда-либо люди взаимодействуют со своими телефонами в критические моменты. Средний пользователь из США проводит 5 часов в день за мобильным телефоном. Подавляющее большинство этого времени тратится на приложения и на веб-сайты.
Разница между хорошим и плохим приложением обычно заключается в качестве пользовательского опыта (UX). Хороший UX – это то, что отличает успешные приложения от неудачных. Сегодня мобильные пользователи много ожидают от приложения: быстрое время загрузки, простота использования и удовольствие от взаимодействия. Если вы хотите, чтобы ваше приложение было успешным, вы должны считать UX не просто второстепенным аспектом дизайна, но важным компонентом стратегии продукта.
Есть много вещей, которые следует учитывать при разработке мобильных приложений. В этой статье я обобщил множество практических рекомендаций, которые вы можете применить к своему дизайну.
Минимизируйте когнитивную нагрузку
Когнитивная нагрузка относится к количеству умственных способностей, необходимых для использования приложения. Человеческий мозг имеет ограниченную вычислительную мощность, и когда приложение одновременно предоставляет слишком много информации, оно может ошеломить пользователя и заставить его отказаться от выполнения этой задачи.
Наведение порядка
Избавление от беспорядка – одна из главных рекомендаций статьи «10 Do’s and Don’ts of Mobile UX Design». Беспорядок – один из худших врагов хорошего дизайна. Загромождая интерфейс, вы перегружаете пользователей слишком большим объемом информации: каждая добавленная кнопка, изображение и иконка усложняют экран.
Беспорядок на ПК ужасен, но на мобильном устройстве он намного хуже (просто потому, что у нас не так много полезного пространства экрана, как на ПК и ноутбуках). В мобильном дизайне важно избавиться от всего, что не является абсолютно необходимым, потому что уменьшение беспорядка улучшит понимание. Техника функционального минимализма может помочь вам решить проблему загроможденного пользовательского интерфейса:
- Сократите контент до минимума (предоставьте пользователю только то, что ему нужно знать).
- Сохраняйте минимум элементов интерфейса. С простым дизайном пользователю легче взаимодействовать с продуктом.
Чистая панель вкладок (справа) намного лучше, чем загроможденная (слева). (Изображение: Apple)- Используйте метод прогрессивного раскрытия, чтобы показать больше вариантов.
Интерфейс показывает больше возможностей после взаимодействия. (Изображение: Ramotion)Упрощайте задачи
Ищите в дизайне все, что требует усилий пользователя (это может быть ввод данных, принятие решения и т. д.), и ищите альтернативные пути. Например, в некоторых случаях вы можете повторно использовать ранее введенные данные вместо того, чтобы просить пользователя ввести их повторно, или использовать уже имеющуюся информацию для установки умного значения по умолчанию.
Разбивайте задачи на небольшие куски
Если задача содержит много шагов и действий, требуемых от пользователя, лучше разделить ее на несколько подзадач. Этот принцип чрезвычайно важен в мобильном дизайне, потому что вы не хотите создавать слишком много сложности для пользователя за один раз. Хороший пример – пошаговый процесс оформления заказа в приложении электронной коммерции, когда дизайнер разбивает сложную задачу оформления заказа на куски, каждый из которых требует действий пользователя.
Разбивка задачи делает форму менее загруженной, особенно когда вы запрашиваете у пользователя много информации. (Изображение: Murat Mutlu)Разделение на блоки также может помочь соединить два разных действия (например, просмотр и покупка). Когда сценарий представлен в виде ряда шагов, логически связанных друг с другом, пользователю может быть легче его выполнить.
Поиск фильма и покупка билетов в кинотеатр. (Изображение: Anton Skvortsov)Используйте знакомые экраны
Знакомые экраны – это экраны, которые пользователи видят во многих приложениях. Такие экраны, как «Начало работы», «Что нового» и «Результаты поиска», де-факто стали стандартами для мобильных приложений. Они не требуют дополнительных объяснений, потому что пользователи уже знакомы с ними. Это позволяет пользователям использовать предыдущий опыт взаимодействия с приложением без необходимости обучения.
Экран профиля пользователя в приложении QuoraДля получения дополнительной информации о знакомых экранах. Прочтите статью «11 экранов, которые вы найдете во многих самых успешных мобильных приложениях».
Минимизируйте ввод информации пользователем
Набор текста на маленьком мобильном экране – не самое удобное занятие. На самом деле, оно часто подвержено ошибкам. И наиболее распространенным случаем ввода данных пользователем является заполнение формы. Вот несколько практических рекомендаций по упрощению этого процесса:
- Делайте формы максимально короткими, удаляя ненужные поля. Приложение должно запрашивать у пользователя только минимальный объем информации.
Основное правило в дизайне форм – чем короче, тем лучше. Объедините несколько полей в одно удобное для заполнения поле. (Изображение: Luke W.)- Предоставьте маски ввода. Маски полей – это метод, который помогает пользователям форматировать введенный текст. Маска появляется, когда пользователь фокусируется на поле, и автоматически форматирует текст по мере заполнения поля, помогая пользователям сосредоточиться на необходимых данных и легче заметить ошибки.
(Изображение: Josh Morony)- Используйте такие интеллектуальные функции, как автозаполнение. Например, заполнение поля адреса часто является наиболее проблемной частью любой регистрационной формы. Использование таких инструментов, как Place Autocomplete Address Form(который использует как географическое местоположение, так и предварительное заполнение адреса для предоставления точных предложений, основанных на точном местоположении пользователя), позволяет пользователям вводить свой адрес с меньшим количеством нажатий клавиш, чем при обычном поле ввода.
- Динамическая проверка значения полей. Это печально, когда после отправки данных вам приходится возвращаться и исправлять ошибки. По возможности, проверяйте значения полей сразу после ввода данных, чтобы пользователи могли их мгновенно исправить.
Встроенная проверка (Изображение: Baymard)- Кастомизируйте клавиатуру для типа запроса. При запросе номера телефона отобразите цифровую клавиатуру и добавьте кнопку @ при запросе адреса электронной почты. Убедитесь, что эта функция реализована последовательно во всем приложении, а не только для определенных форм.
Подберите клавиатуру для ввода требуемого текста. (Изображение: ThinkWithGoogle)Предвосхищайте потребности пользователя
Проактивно ищите шаги в путешествии пользователя, где ему может понадобиться помощь. Например, на снимке экрана ниже показана часть, где пользователям необходимо предоставить конкретную информацию.
Не очевидно, где пользователь может найти штрих-код. Краткая справка рядом с полем ввода будет очень полезной. (Изображение: Hotjar)Используйте визуальный вес, чтобы подчеркнуть важность
Самый важный элемент на экране должен иметь наибольший визуальный вес. Добавление большего веса к элементу возможно посредством изменения веса, размера и цвета шрифта.
Большие предметы привлекают внимание и кажутся более важными, чем мелкие. Кнопка «Request Lyft» привлечет внимание пользователяИзбегайте жаргона
Четкое общение всегда должно быть главным приоритетом в любом мобильном приложении. Используйте то, что вы знаете о своей целевой аудитории, чтобы определить, подходят ли определенные слова или фразы.
Неизвестные термины или фразы увеличат когнитивную нагрузку на пользователя. (Изображение: ThinkWithGoogle)Сделайте дизайн последовательным
Последовательность является основополагающим принципом дизайна. Она устраняет путаницу. Поддержание общего согласованного внешнего вида во всем приложении имеет важное значение. Что касается мобильного приложения, последовательность означает следующее:
- Визуальная согласованность
Шрифты, кнопки и метки должны быть последовательными во всем приложении. - Функциональная последовательность
Интерактивные элементы должны работать одинаково во всех частях вашего приложения. - Внешняя согласованность
Дизайн должен быть последовательным для нескольких продуктов. Таким образом, пользователь может применить ранее полученные знания при использовании другого продукта.
Вот несколько практических рекомендаций по созданию последовательного дизайна:
- Соблюдайте стандарты платформы.
Каждая мобильная ОС имеет стандартные рекомендации по дизайну интерфейса: Human Interface Guidelines от Apple и Material Design Guidelines от Google. При проектировании для нативных платформ соблюдайте дизайн-рекомендации ОС для обеспечения максимального качества. Причина, по которой важно следовать дизайн-рекомендациям, проста: пользователи знакомятся с паттернами взаимодействия каждой ОС, и все, что противоречит руководящим принципам, вызывает проблемы. - Не имитируйте элементы интерфейса с других платформ.
При создании приложения для Android или iOS не переносите элементы интерфейса с других платформ. Иконки, функциональные элементы (поля ввода, флажки, переключатели) и шрифты должны выглядеть естественно. Максимально используйте нативные компоненты, чтобы люди доверяли вашему приложению. - Следите, чтобы мобильное приложение соответствовало веб-сайту.
Это пример внешней согласованности. Если у вас есть веб-сервис и мобильное приложение, убедитесь, что оба они имеют сходные характеристики. Это позволит пользователям совершать беспроблемные переходы между мобильным приложением и мобильным сайтом. Несоответствие в дизайне (например, другая навигационная схема или другая цветовая схема) может привести к путанице.
Предоставьте пользователю контроль
Сделайте интерактивные элементы знакомыми и прогнозируемыми
Предсказуемость является фундаментальным принципом UX дизайна. Когда все работает так, как предсказывают пользователи, они чувствуют сильное чувство контроля. В отличие от ПК, где пользователи могут использовать эффекты при наведении курсора, чтобы понять, является ли элемент интерактивным или нет, на мобильном телефоне пользователи могут проверять интерактивность, только нажав на элемент. Вот почему важно подумать о том, как дизайн кнопок и других интерактивных элементов передает доступность. Как пользователи понимают, что элемент – это кнопка? Форма должна следовать за функцией: внешний вид объекта говорит пользователям, как его использовать. Визуальные элементы, которые выглядят как кнопки, но не нажимаются, легко запутают пользователей.
Кнопка Назад» должна работать правильно
Неправильно созданная кнопка «назад» может вызвать много проблем у пользователей. Не допустите ситуаций, когда нажатие кнопки «назад» в многошаговом процессе вернет пользователей обратно к начальному экрану.
Хороший дизайн облегчает пользователям возврат и внесение исправлений. Когда пользователи знают, что могут еще раз взглянуть на предоставленные ими данные или выбранные параметры, это позволяет им с легкостью действовать.
Информативные сообщения об ошибках
Человеку свойственно ошибаться. Ошибки возникают, когда люди взаимодействуют с приложениями. Иногда они случаются по вине пользователя. Иногда они случаются из-за сбоя приложения. Независимо от причины ошибки, способы ее обработки имеют огромное влияние на UX. Плохая обработка ошибок в сочетании с бесполезными сообщениями об ошибках может вызвать у пользователей разочарование и стать причиной, по которой пользователи покинут ваше приложение. Возьмем в качестве примера экран состояния ошибки из Spotify. Он не помогает пользователям понять контекст или найти ответ на вопрос: «Что я могу с этим поделать?»
Экран ошибок Spotify просто говорит: «Произошла ошибка» и не дает каких-либо конструктивных советов о том, как решить проблемуНе думайте, что пользователи достаточно разбираются в технологиях, чтобы самостоятельно понять причину ошибки. Всегда говорите людям, что не так на простом языке. Каждое сообщение об ошибке должно сообщать пользователям:
- что пошло не так и, возможно, почему,
- какой следующий шаг должен предпринять пользователь, чтобы исправить ошибку.
Для получения дополнительной информации об обработке ошибок прочтите статью «Как проектировать состояния ошибок для мобильных приложений».
Проектируйте доступный интерфейс
Доступный дизайн позволяет пользователям с разными возможностями успешно использовать продукты. Подумайте, как пользователи с потерей зрения, потерей слуха и другими нарушениями могут взаимодействовать с вашим приложением.
Учитывайте цветовую слепоту
4.5% населения мира страдают дальтонизмом (это 1 из 12 мужчин и 1 из 200 женщин), 4% страдают слабым зрением (1 из 30 человек) и 0,6% являются слепыми (1 из 188 человек). Легко забыть, что мы проектируем для этой группы пользователей, потому что большинство дизайнеров не сталкиваются с такими проблемами.
Позвольте мне привести простой пример. Сообщения об успехах и ошибках в мобильных формах часто окрашиваются в зеленый и красный цвета соответственно. Но красный и зеленый – это цвета, наиболее подверженные дефициту цветового зрения (эти цвета трудно различать людям с дейтеранопией или протанопией). Скорее всего, вы видели следующее сообщение об ошибке при заполнении формы: «Поля, отмеченные красным, обязательны для заполнения»? Хотя это может показаться не очень важным, это сообщение об ошибке в сочетании с формой в приведенном ниже примере может быть крайне разочаровывающим для людей с дефицитом цветового зрения.
Дизайн поля формы опирается только на красный и зеленый цвета для обозначения полей с ошибкой и без нее. Дальтоники не могут различать поля, выделенные краснымКак указано в рекомендациях W3C, цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. Важно использовать другие визуальные индикаторы, чтобы убедиться, что пользователи смогут взаимодействовать с интерфейсом.
Использование иконок и подписей, чтобы показать, какие поля содержат ошибку, лучше передает информацию дальтоникуСделайте анимации отключаемыми
Пользователи, которые страдают от укачивания, часто отключают анимационные эффекты в настройках ОС. Если в настройках доступности включена опция уменьшения движения, ваше приложение должно минимизировать или устранить анимации.
Сделайте навигацию простой
Помощь пользователям в навигации должна быть приоритетной задачей любого приложения. Все интересные функции и привлекательный контент не имеют значения, если люди не могут их найти. Кроме того, если потребуется слишком много времени или усилий, чтобы понять, как ориентироваться в вашем продукте, скорее всего, вы просто потеряете пользователей. Пользователи должны иметь возможность исследовать приложение интуитивно и выполнять все основные задачи без каких-либо объяснений.
Используйте стандартные компоненты навигации
Лучше использовать стандартные паттерны навигации, такие как панель вкладок (для iOS) и навигационный ящик (для Android). Большинство пользователей знакомы с обоими паттернами навигации и интуитивно знают, как использовать ваше приложение.
Side drawer (Android). (Изображение: Material Design) 
Панель вкладок (iOS). (Изображение: Ramotion)Подробнее о паттернах навигации читайте в статье «Основные паттерны мобильной навигации: за и против».
Приоритизация навигационных опций
Расставьте приоритеты навигации в зависимости от того, как пользователи взаимодействуют с вашим приложением. Назначьте различные уровни приоритета (высокий, средний, низкий) для общих пользовательских задач. Выделите в интерфейсе пути и пункты назначения с высоким уровнем приоритета и частым использованием. Используйте эти пути для определения вашей навигации. Организуйте свою информационную структуру таким образом, чтобы требовалось минимальное количество нажатий, свайпов и экранов.
Не смешивайте навигационные паттерны
Когда вы выбираете основной паттерн навигации для своего приложения, используйте его последовательно. Не должно быть ситуации, в которой часть вашего приложения имеет панель вкладок, а другая часть имеет боковой ящик.
Сделайте навигацию заметной
Как говорит Якоб Нильсен, распознать что-либо легче, чем запомнить. Минимизируйте нагрузку на память пользователя, делая действия и параметры заметными. Навигация должна быть доступна всегда, а не только, когда мы считаем, что она нужна пользователю.
Сообщайте текущее местоположение
Неспособность указать текущее местоположение – очень распространенная проблема многих меню мобильных приложений. «Где я?» – один из фундаментальных вопросов, на которые пользователи должны ответить, чтобы успешно ориентироваться. В любой момент люди должны знать, где они находятся в вашем приложении.
О дизайне мобильных приложений написано уже много всего. Тем не менее в этой сфере есть огромное количество нюансов. Некоторые известны не всем, другие быстро забываются. В этом посте мы постараемся описать несколько приемов работы с дизайном приложения, которые можно назвать эффективными и проверенными.
В идеале приложение для мобильного устройства должно работать со скоростью мысли. Более того, интерфейс приложения должен быть понятен даже новичку.
1. Правила, которые всегда работают
Стоит выделить пять основных факторов, имеющих важное значение при проектировании взаимодействия с приложением.
Целеориентированность. Вы создаете дизайн для конкретного пользователя. Сейчас в Сети большое количество данных о различных категориях пользователей, причем многие материалы — исследования, обзоры — доступны бесплатно. Изучение этой информации поможет вам создать приложение, которое полностью соответствует потребностям целевой аудитории.
Юзабилити. Ваше приложение должно быть удобным и интуитивно понятным. К примеру, если вы хотите указать ссылку для перехода на сторонний ресурс, то оформляйте ее привычным образом — с помощью подчеркнутого голубого текста. Удобство и практичность — это первый шаг на пути к тому, чтобы ваша программа стала желанной для пользователя.
Возможность (аффо́рданс) и символичность. Аффо́рданс — это функция. Для простоты снова воспользуемся приемом со ссылкой. Так, голубой подчеркнутый текст указывает на то, что клик по нему переведет пользователя по какому-то адресу. Подобные символы нужно использовать таким образом, чтобы пользователь не размышлял о том, что может означать тот или иной элемент интерфейса. Практичность и рациональность — наше все.
Обучаемость. В идеале пользователь должен без труда догадываться, как работать с программой. Здесь приходят на помощь знакомые и привычные схемы оформления приложения. Они должны помочь человеку без проблем привыкнуть к программе.
Фидбек и время ответа. Отклик приложения должен давать пользователю представление о том, выполнена задача или нет. Это может быть обычный звуковой сигнал или нечто более сложное — например, модальное окно. Убедитесь в том, что фидбек приложения соответствует положениям, установленным Nielsen Norman Group.
Как верно заметил Эндрю Майер (Andrew Maier) в своей статье, эти пять правил должны стать основой, определяющей проектирование любого типа взаимодействия.
2. Знать своих пользователей
Первым шагом при создании целеориентированного интерфейса является изучение своей аудитории. Размер дисплея — это не единственное ограничение при разработке мобильного приложения. Пользователи также формируют требования к интерфейсу и необходимо их учитывать.
В этом вопросе есть четкая тактика, состоящая из трех положений:
Personas: помогает понять, что будет побуждать пользователя выполнить то или иное действие внутри приложения. Это формальные, теоретические модели реальных пользователей.
User Scenarios: обеспечивает моделирование различных ситуаций, помогает предсказать действия пользователя. Благодаря этому можно разработать интерфейс, который оптимально подходит для смоделированных пользователей и задач, которые они хотят выполнить.
Experience maps: здесь изучаются все возможные условия отдельного взаимодействия. Схема поможет описать каждый шаг пользователя, который будет выполнен с высокой вероятностью на определенном этапе работы с приложением. Такая схема поможет понять эмоции и обстоятельства, которые приводят к выполнению каждого действия.
Самым простым способом выполнения этих пунктов может быть, например, удаленное тестирование юзабилити при помощи сервиса вроде UserTesting, что помогает изучить поведение пользователей в естественных условиях. Чтобы еще лучше изучить этот вопрос (например, учитывать жесты и даже положение тела), стоит провести работу с реальными пользователями (минимум — пять человек).
Отличные советы по этому вопросу дает Джефф Саурос (Jeff Sauros).
3. Контент и поведение пользователей
Этот пункт позволяет параллельно проводить разработку приложения и изучать возможное поведение пользователей. Идеальным вариантом является набросок, по которому изучается взаимодействие пользователей с контентом. И в этом нет ничего глупого — работу человека с содержимым программы можно проиллюстрировать на бумаге. Это поможет понять, как примерно будут вести себя пользователи внутри приложения.
К примеру, вы создаете банковское приложение. Предполагаемый сценарий: пользователь хочет включить функцию автоматического внесения средств на счет:
Автодепозит выкл.
[Настройки автодепозита]
Выбираем период
[Раз в месяц][Дважды в месяц]
[Через неделю][Каждую неделю]
Депозит
Раз в месяц
[Выбрать календарный день]
Установка суммы
[Ввести сумму]
[Настройки автодепозита]
Прежде чем сделать прототип, рукописная схема поможет изучить наиболее важную часть приложения — контент. Понимание возможной схемы взаимодействия пользователя с контентом поможет дать более точную оценку числа страниц/экранов, необходимых в программе.
Следующий шаг — создание схемы для каждой страницы перехода (в нашем случае это четыре схемы). И здесь уже можно продолжать итерации, постепенно переходя от бумажных схем к цифровому прототипированию (в этом может помочь инструмент вроде UXPin).
Схема поможет быстро изучить возможные переходы на страницы / со страниц приложения. Скетчи позволят «оживить» приложение и понять большее количество деталей и структуры программы. А уже цифровой прототип поможет протестировать поведение реальных пользователей.
4. Улучшение юзабилити с использованием знакомых пользователю схем
Дизайн мобильного приложения стоит сделать «знакомым» для пользователя. К примеру, практически все картографические сервисы используют прием навигации slide-out. Это позволяет пользователю чувствовать себя «как дома». Приложение незнакомо, но схема работы с ним общеизвестна и понятна.
Стоит уточнить, что мы не предлагаем вам копировать дизайн приложений других разработчиков. Речь идет именно об использовании общедоступных элементов интерфейса. Если вы воспользуетесь этим советом, стоит убедиться, что дизайн вашего приложения соответствует ожиданиям пользователя.
Рекомендуем использовать две категории схемы взаимодействия пользователей с интерфейсом приложения:
Жесты: Тап, свайп, двойной тап, щипок, масштабирование — все это давно стало привычным для пользователя. Подробно о жестах можно узнать вот здесь.
Оживление: здесь имеется в виду анимация, которая сделает приложение более живым. Рекомендуем объединить анимацию с жестовым управлением.
Схемы взаимодействия пользователей с интерфейсом приложения предопределяют его структуру и отдельные элементы. К примеру, кнопки навигации в нижней части приложения более привычны для пользователей, чем кнопки, вынесенные в верхнюю часть программы.
Yelp — отличный пример приложения с интуитивно понятным интерфейсом.
5. Учитываем размер пальцев пользователя
Да, пальцы многих пользователей гораздо больше, чем могли бы представить любители утонченного дизайна. Поэтому обязательно нужно адаптировать свою программу к пальцам разного размера.
Им просто нужно оставлять достаточно места. Если ваши кнопки слишком малы или расположены слишком близко друг к другу, некоторые люди просто не смогут попадать по ним. Как следствие, пользователи будут раздражаться и, может быть, прекращать работу с такой программой.
Вот что стоит учитывать, проектируя кнопки и другие сенсорные элементы:
Все мы держим телефон или планшет по-разному. Даже один и тот же человек в различных ситуациях держит устройство разными способами.
Наши пальцы действительно большие. Их ширина составляет около 45–57 пикселей, что больше, чем рекомендует большинство руководств для тестовых устройств. Apple, например, рекомендует цель квадратной формы с размером стороны в 44 пикселя. А этого далеко не всегда достаточно.
6. Не отказывайтесь от градиента и теней
Да, плоский дизайн уже стал новым стандартом, но это вовсе не значит, что тени и градиент — далекое прошлое и от такого варианта оформления нужно отказаться. Вовсе нет, просто подход к дизайну несколько изменился.
Тень обычно очень актуальна при проектировании кнопок, переключателей и подобных элементов.
Тени и градиент отдельных элементов делают интерфейс более понятным пользователю. Эти приемы оформления можно использовать для создания объемных кнопок и полей ввода.
7. Убираем хаос
Правило трех кликов актуально и сейчас, и его стоит использовать при проектировании дизайна приложений. Почему? Да потому, что оно позволяет понять, что именно действительно необходимо для страниц приложения.
В идеале пользователь должен выполнить все задачи быстро и за как можно меньшее количество действий. СЕО Yahoo Марисса Майер даже предлагает использовать правило двух тапов. Если этот принцип не соблюдается, Марисса предлагает работать над приложением дальше, совершенствуя его дизайн.
Старайтесь сделать так, чтобы пользователю приходилось выполнять минимальное количество действий. Чем меньше пользователю придется прилагать усилий при взаимодействии с программой, тем выше вероятность того, что ваше приложение станет успешным.
дизайн и эргономика / Блог компании ALEE Software / Хабр
От переводчика. Продажи смартфонов и планшетов растут с каждым днем, и это уже говорит о необходимости повышенного внимания к интерфейсам для мобильных устройств. На каких принципах должен основываться дизайн приложений и сайтов для мобильных девайсов? Как удовлетворить все запросы пользователей, которые становятся все более и более требовательными?По имеющимся прогнозам, в течение 2011 года объем продаж планшетов существенно возрастет, а объем продаж смартфонов существенно превысит объем продаж телефонов традиционного образца. Как показывает практика, пользователи предпочитают приложения для веб-навигации, уже установленные на телефоне, специальному программному обеспечению, которое нужно специально покупать или скачивать. Что это означает? В первую очередь — то, что в настоящее время перед веб-разработчиками и дизайнерами стоит задача учета особенностей мобильных устройств. Задача, следует заметить, не самая простая (см. статью известного специалиста в области веб-дизайна Якоба Нильсена «Мобильный контент: вдвойне сложнее» — www.useit.com/alertbox/mobile-content-comprehension.html, русский перевод- itopti.livejournal.com/2578.html, а также множество примеров дизайна на сайте www.mobileawesomeness.com ).
Cпециалист по юзабилити Патрик Кокс сформулировал 10 принципов, на которых должна основываться разработка мобильных приложений и сайтов www.ergonomie-interface.com/mobile-tactile-nomade/conception-site-web-mobile). Приглашаем читателей к обсуждению; будем рады, если кто-то сможет поделиться собственным опытом проектирования интерфейсов для мобильных приложений.
1. Используйте семантическую разметку
Мы знаем, что нужно всегда стараться отделить содержание от формы. Но при создании сайтов для мобильных устройств нужно двигаться еще дальше. Семантическая разметка обеспечивает лучшую сегментацию между формой и содержанием. Она обеспечивает лучшую доступность, позволяет уменьшить размеры файлов (и для этих файлов требуется минимум кода) и дает пользователю возможность лучше разобраться в содержимом веб-страницы.
Кроме того, если мобильный браузер не загружает изображений, JavaScript или CSS-стилей, сайт всегда будет отображаться должным образом и адекватно восприниматься пользователями.
Практические рекомендации:
1. Изображения улучшают понимание, но не являются самодостаточными для обозначения чего-либо. Представляйте изображения, используя свойства CSS бэкграунда или другие методы.
используйте тэги для обозначения типа содержимого: например, em для подчеркивания или abbr для обозначения аббревиатуры. Подробный список тэгов см. здесь: www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage
2. Пользуйтесь тэгом div только для выделения больших блоков материала, связанных друг с другом. Для выделения отдельных абзацев пользуйтесь специальными тэгами: ul для составления маркированных списков, span для выделения небольших блоков содержимого.
3. Помните о том, что семантическая паутина — это способ организации содержания, к стилю не имеющий никакого отношения.
2. Четко формулируйте задачу
Мобильная версия сайта должна быть предназначена для решения ограниченного числа задач. При ее создании необходимо особенно четко формулировать цели. Если место для сайта уменьшается на 80%, то и от 80% намеченных планов также придется отказаться. Функциональность мобильной версии сайта существенно ограничена по причине небольшого размера экрана. Например, в версию сайта для большого экрана можно запросто включить такие функции, как реклама новых продуктов компании, просмотре личных сообщений, заполнение небольших контактных форм, индикация последних сообщений в Твиттере и т. п. Но для мобильной версии такой вариант не годится: разместить все это на экране смартфона вряд ли получится. Уменьшение размера элементов содержимого — тоже не выход: не будет же пользователь просматривать сайт через увеличительное стекло!
Выход один: ограничиться наиболее необходимыми функциями, чтобы для них хватило места на экране.
Пример: сжатое и ясное представление информации на сайте
(мобильная версия портала bluemountain.ca ).
Практические рекомендации:
1. Работая над дизайном мобильной версии сайта, мыслите не в категориях страниц, а в категориях экранов. Каждый экран должен включать в себя не более трех функций или элементов.
2. Ориентация на упрощение экрана не только облегчает, но и помогает вам прояснить цели, задачи, функции, возлагаемые на мобильную версию сайта.
3. Избегайте перезаполнения!
Не стремитесь заполнять все пустые места на экране. У всех пользователей разная скорость соединения, поэтому сайт не должен «весить» слишком много. Избыточное количество изображений, текста, кода и т. п. не только ухудшает восприятие сайта пользователями, но еще и существенно увеличивает время его загрузки. Для пользователей мобильного Интернета важна оперативность: они не сидят перед компьютером, и обращение к тому или иному сайту необходимо им для решения срочных задач.
Пример: упрощенная и хорошо организованная горизонтальная навигация (http://m.journeys.com/).
Практические рекомендации:
1. Сведите количество изображений в мобильной версии сайта к самому необходимому минимуму.
2. Не включайте в мобильную версию сайта текстов большого объема.
3. «Облегчите» код посредством использования семантической разметки, а также сведения к минимуму числа CSS-стилей и вложенных файлов.
4. Не используйте выделенного состояния!
Навигация с помощью пальца или стилуса существенно отличается от навигации с помощью мыши и требует от разработчика большей изобретательности. Нужно использовать графические средства для того, чтобы продемонстрировать пользователю возможности управления тем или иным элементом.
Практические рекомендации:
1. Для обозначения ссылок используйте кнопки, а не подчеркивание текста.
2. Обозначайте доступ к более подробному содержимому при помощи стрелок.
3. В оформлении кнопок пользуйтесь оттенением и рельефными линиями.
4. Используйте знакомые и понятные иконки. Избегайте иконок непривычного вида для обозначения типов действий («добавить», «изменить», «назад», «вперед» и т. п.)
Пример: удачный вариант дизайна навигационных кнопок.
5. Пишите крупным шрифтом, просто и понятно
Даже на небольшом экране у пользователя не должно быть проблем с чтением текста. Если оптимальный размер шрифта для отображения на большом экране составляет 14 пунктов, то для мобильного устройства он должен быть как минимум в два раза больше. Следует, однако, учитывать, что чем крупнее шрифт — тем меньше информации удается разместить на сайте.
Практические рекомендации:
1. Мобильная версия сайта не должна включать никакой лишней информации.
2. Отбирайте тексты небольшого объема, написанные простым и понятным языком.
3. Не пользуйтесь функцией прокрутки без особой необходимости.
4. Включите в дизайн сайта кнопку «далее», нажав на которую пользователь сможет перейти к экрану с более подробным вариантом текста.
Пример: подача информации в виде кратких и емких текстовых блоков
6. Используйте элементы содержимого сайта в навигации
Особый интерес в создании версий сайтов, адаптированных под сенсорый экран, представляет возможность использования элементов содержимого в качестве элементов навигации: нажатие пальцем на ту или иную область экрана уже может стать инструментом для выполнения того или иного действия. В мобильных версиях сайта не нужно использовать, например, полосу прокрутки: ее функции возьмет на себя сам экран.
Практические рекомендации:
1. Пользуйтесь списками меню для перехода к подменю или другим экранам.
2. Проектируйте сайт как галерею экранов; применяйте творческий подход к организации прогулки посетителей по этой виртуальной галерее.
Пример: организация мобильной версии сайта как виртуальной галереи (сайт американской рок-группы Neon Trees).
7. Уделяйте внимание цветовой гамме
Экран мобильного телефона по размеру существенно меньше экрана стандартного монитора. Чтобы читать с такого экрана, нужно максимально приблизить его к глазам. Поэтому цвета мобильной версии сайта не должны быть слишком резкими.
Пример: минимум цветов и контрастность — залог удачного дизайна (http://world.g-shock.com/ ).
Практические рекомендации:
1. Не используйте без необходимости слишком яркие цвета в оформлении сайта.
2. Сайт не должен быть слишком «пестрым».
3. Используйте цветовую гамму, наиболее приятную для глаз.
4. Не забывайте о контрастах. На экране мобильного телефона контрастные цвета выглядят очень эффектно.
8. В общем стиле сайта главное — простота
Как визуальное решение сайта, так и его текстовое наполнение должны характеризоваться простотой и ясностью. В оформлении мобильной версии сайта следует избегать экстравагантных, нетрадиционных элементов. Используйте общеупотребительные слова, смысл которых будет однозначно понятен всем (например «имя пользователя» и «пароль», а не «ник» и «секретный код»).
Пример: форма для входа на мобильную версию сайта (социальная сеть для любителей пива Untapped- untappd.com/?mobile=true )
9. Обеспечьте возможность обратной связи
Браузеры для мобильных устройств поддерживают Java — воспользуйтесь этими и создайте пользователям возможность динамической обратной связи. Можно, например, показывать ход загрузки страницы с помощью анимации. Если пользователь забыл заполнить какое-либо поле, сообщайте ему об этом тотчас же. Создавайте диалоговые окна, информирующие пользователя о том, что происходит во время работы с сайтом.
Практические рекомендации:
1. При нажатии на определенную область экрана вид сайта должен изменяться (это служит подтверждением того, что нажатие действительно имело место).
2. Используйте JavaScript (к примеру JQuery или Scriptaculous) для организации полноценного диалога с пользователем.
3. Показывайте ход загрузки страницы с помощью анимации.
10. Сохраняйте пустые места
Большинство смартфонов имеют сенсорный экран, однако управлять сайтом исключительно при помощи пальцев гораздо сложнее, чем при помощи мыши. Вокруг кликабельных элементов сайта должно быть достаточного свободного места для того, чтобы пользователь мог нажать именно на них.
Пример — меню, удобное для навигации при помощи устройств с сенсорным экраном (мобильная версия портала www.charlesluck.com ).
Практические рекомендации:
1. Для обозначения ссылок используйте не подчеркивание текста, а кнопки, объекты, иконки.
2. Создавайте внутренние поля достаточных размеров, чтобы пользователь мог четко различать элементы.
3. Увеличение высоты строк делает текст более удобным для чтения на экране мобильного устройства.
Аннотация: Большинство современных мобильных устройств имеют сенсорные дисплеи. Между традиционным оконным и тачевым интерфейсами существует огромная разница. Разработка удобного интерфейса для мобильных приложений является довольно сложной проблемой. Основной целью лекции является рассмотрение основ разработки интерфейсов мобильных приложений. В лекции рассказывается об особенностях визуального дизайна интерфейсов, строительных блоках и элементах управления. Приведены рекомендации по проектированию GUI под Android, а также имеется большое количество разнообразных примеров. В конце приведен список дополнительных источников. Описанные принципы помогут при разработке удобных пользовательских интерфейсов для мобильных приложений. Лекция может быть использована как часть курса или же отдельно от него для лучшего понимания особенностей интерфейса мобильных приложений.
Для подготовки данной лекции в качестве основного источника информации была использована книга «Алан Купер об интерфейсе»[11], однако задекларированные в ней принципы были переработаны в контексте программирования для мобильных устройств, а примеры заменены на более подходящие в рамках данного курса. Скриншоты приложений взяты из магазина приложений Google Play или сделаны самостоятельно с использованием смартфона Мегафон SP-A20i Mint на платформе Intel Medfield.
Презентацию к данной лекции можно скачать здесь.
5.1 Визуальный дизайн интерфейсов
Силы, вложенные в разработку модели поведения программного продукта, будут потрачены впустую, если вы не сумеете должным образом донести до пользователей принципы этого поведения. В случае мобильных продуктов это делается визуальными средствами — путем отображения объектов на дисплее (в некоторых случаях целесообразно использовать тактильные ощущения от нажатия).
Визуальный дизайн интерфейсов — очень нужная и уникальная дисциплина, которую следует применять в сочетании с проектированием взаимодействия и промышленным дизайном. Она способна серьезно повлиять на эффективность и привлекательность продукта, но для полной реализации этого потенциала нужно не откладывать визуальный дизайн на потом, а сделать его одним из основных инструментов удовлетворения потребностей пользователей и бизнеса.
5.1.1 Изобразительное искусство, визуальный дизайн интерфейсов и прочие дисциплины дизайна
Художники и визуальные дизайнеры работают с одними и теми же изобразительными средствами, однако их деятельность служит различным целям. Цель художника — создать объект, взгляд на который вызывает эстетический отклик. Изобразительное искусство — способ самовыражения художника. Художник не связан почти никакими ограничениями. Чем необычнее и своеобразнее продукт его усилий, тем выше он ценится.
Дизайнеры создают объекты, которыми будут пользоваться другие люди. Если говорить о дизайнерах визуальных интерфейсов, то они ищут наилучшее представление, доносящее информацию о поведении программы, в проектировании которой они принимают участие. Придерживаясь целеориентированного подхода, они должны стремиться представлять поведение и информацию в понятном и полезном виде, который поддерживает маркетинговые цели организации и эмоциональные цели персонажей. Разумеется, визуальный дизайн пользовательских интерфейсов не исключает эстетических соображений, но такие соображения не должны выходить за рамки функционального каркаса.
5.1.2 Графический дизайн и пользовательские интерфейсы
Графические дизайнеры обычно очень хорошо разбираются в визуальных аспектах и хуже представляют себе понятия, лежащие в основе поведения программного продукта и взаимодействия с ним. Они способны создавать красивую и адекватную внешность интерфейсов, а кроме того — привносить фирменный стиль во внешний вид и поведение программного продукта. Для таких специалистов дизайн или проектирование интерфейса есть в первую очередь тон, стиль, композиция, которые являются атрибутами бренда, во вторую очередь — прозрачность и понятность информации и лишь затем — передача информации о поведении посредством ожидаемого назначения.
Дизайнерам визуальной части интерфейса необходимы некоторые навыки, которые присущи графическим дизайнерам, но они должны еще обладать глубоким пониманием и правильным восприятием роли поведения. Их усилия в значительной степени сосредоточены на организационных аспектах проектирования. В центре их внимания находится соответствие между визуальной структурой интерфейса с одной стороны и логической структурой пользовательской ментальной модели и поведения программы — с другой. Кроме того, их заботит вопрос о том, как сообщать пользователю о состояниях программы и что делать с когнитивными аспектами пользовательского восприятия функций.
5.1.3 Визуальный информационный дизайн
Информационные дизайнеры работают над визуализацией данных, содержимого и средств навигации. Усилия информационного дизайнера направлены на то, чтобы представить данные в форме, способствующей их верному истолкованию. Результат достигается через управление визуальной иерархией при помощи таких средств, как цвет, форма, расположение и масштаб. Распространенными объектами информационного дизайна являются всевозможные графики, диаграммы и прочие способы отображения количественной информации.
Чтобы создавать привлекательные и удобные пользовательские интерфейсы, дизайнер интерфейсов должен владеть базовыми визуальными навыками — пониманием цвета, типографики, формы и композиции — и знать, как их можно эффективно применять для передачи поведения и представления информации, для создания настроения и стимулирования физиологических реакций. Дизайнеру интерфейса также требуется глубокое понимание принципов взаимодействия и идиом интерфейса, определяющих поведение продукта.
5.2 Строительные блоки визуального дизайна интерфейсов
Дизайн интерфейсов сводится к вопросу о том, как оформить и расположить визуальные элементы таким образом, чтобы внятно отразить поведение и представить информацию. Каждый элемент визуальной композиции имеет ряд свойств, и сочетание этих свойств придает элементу смысл. Пользователь получает возможность разобраться в интерфейсе благодаря различным способам приложения этих свойств к каждому из элементов интерфейса. В тех случаях, когда два объекта обладают общими свойствами, пользователь предположит, что эти объекты связаны или похожи. Когда пользователи видят, что свойства отличаются, они предполагают, что объекты не связаны.
Создавая пользовательский интерфейс, проанализируйте перечисленные ниже визуальные свойства каждого элемента или группы элементов. Чтобы создать полезный и привлекательный пользовательский интерфейс, следует тщательно поработать с каждым из этих свойств.
5.2.1 Форма
Форма — главный признак сущности объекта для человека. Мы узнаем объекты по контурам. Если мы увидим на картинке синий ананас, мы его сразу опознаем, потому что мы помним его форму. И лишь потом мы удивимся странному цвету (см. рис. 5.1). При этом различение форм требует большей концентрация внимания, чем анализ цвета или размера. Поэтому форма — не лучшее свойство для создания контраста, если требуется привлечь внимание пользователя.
Рис. 5.1. В первую очередь мы видим ананас, а уже потом начинаем задумываться, почему он синий
5.2.2 Размер
Более крупные элементы привлекают больше внимания, особенно если они значительно превосходят размерами окружающие элементы. Люди автоматически упорядочивают объекты по размеру и склонны оценивать их по размеру; если у нас есть текст в четырех размерах, предполагается, что относительная важность текста растет вместе с размером и что полужирный текст более важен, чем текст с нормальным начертанием. Таким образом, размер — полезное свойство для обозначения информационных иерархий.
5.2.3 Цвет
Цветовые различия быстро привлекают внимание. В некоторых профессиональных областях цвета имеют конкретные значения, и этим можно пользоваться. Так, для бухгалтера красный цвет — отрицательные результаты, а черный — положительные.
Цвета приобретают смыслы и благодаря социальным контекстам, в которых проходит наше взросление. Например, белый цвет на Западе ассоциируется с чистотой и миром, а в Азии и арабских странах — с похоронами и смертью. При этом цвет изначально не обладает свойством упорядоченности и не выражается количественно, поэтому далеко не идеален для передачи информации такого рода. Кроме того, не следует делать цвет единственным способом передачи информации, поскольку цветовая слепота встречается довольно часто.
Применяйте цвет с умом. Чтобы создать эффективную визуальную систему, позволяющую пользователю выявлять сходства и различия объектов, используйте ограниченный набор цветов — эффект радуги перегружает восприятие пользователя и ограничивает возможности по передаче ему информации.
Выбор цветовой палитры для программы необходимо проводить очень осторожно. По разным данным, той или иной формой цветовой слепоты страдают до 10% мужчин, и использование, например, красного и зеленого цветов для указания контраста затрудняет работу с приложением для этих людей.
5.2.4 Яркость
Понятия темного и светлого обретают смысл преимущественно в контексте яркости фона. На темном фоне темный текст почти не виден, тогда как на светлом он будет резко выделяться. Контрастность люди воспринимают легко и быстро, так что значение яркости может стать хорошим инструментом привлечения внимания к тем элементам, которые требуется подчеркнуть. Значение яркости — также упорядоченная переменная, например, более темные (с более низкой яркостью) цвета на карте легко интерпретируются: они обозначают большие глубины или большие значения других параметров.
5.2.5 Направление
Направление полезно, когда требуется передавать информацию об ориентации (вверх или вниз, вперед или назад). Помните, что восприятие направления может быть затруднено в случае некоторых форм и при малых размерах объектов, поэтому ее лучше использовать в качестве вторичного признака. Так, если требуется показать, что рынок акций пошел вниз, можно использовать направленную вниз стрелку красного цвета.
5.2.6 Текстура
Разумеется, изображенные на экране элементы не обладают настоящей текстурой, но способны создавать ее видимость. Текстура редко бывает полезна для передачи различий или привлечения внимания, поскольку требует значительной концентрации на деталях. И тем не менее текстура может быть важной подсказкой. Засечки и выпуклости на элементах пользовательского интерфейса обычно указывают, что элемент можно перетаскивать, а фаски или тени у кнопки усиливают ощущение, что ее можно нажать.
5.2.7 Расположение
Расположение — это переменная, упорядоченная и выражаемая количественно, а значит, полезная для передачи иерархии. Расположение также может служить средством создания пространственных отношений между объектами на экране и объектами реального мира (например, небо в верхней половине, земля в нижней).
Расположение элементов мобильного приложения очень сильно влияет на удобство использования и зависит от того, как пользователь будет держать устройство (см. рис. 5.2). Подробнее об этом будет рассказано в продолжении данного курса.
Рис. 5.2. Различные варианты удержания смартфона
Разработчики мобильных интерфейсов становятся все более заметными в современном веб-пространстве. Хотя мобильных оптимизированных сайтов могут снизить нагрузку на разработчика сайтов, некоторые предпочитают создавать полнофункциональные приложения.
Дизайнеры и разработчики приложений сейчас очень востребованы, особенно в пользовательском интерфейсе. Дизайн пользовательского интерфейса ориентирован на взаимодействия с пользователем и взаимодействия , и, хотя он прост в использовании и важен, привлекательный, но все же практичный дизайн важен для успеха приложения.
Сегодня я хотел бы показать вам несколько макетов, эскизов, кнопок, таблиц, заставок и еще много примеров дизайнов приложений iPhone для вашего вдохновения . Если вы знакомы с дизайном iPhone или iPad, вы узнаете все эти условия выше. Итак, давайте вдохновляться!
Рекомендуемое чтение: Сайты мобильных приложений Design Killer: советы и примеры
# 1
# 2
# 3
# 4
# 5
# 6
# 7
# 8
# 9
# 10
# 11
# 12
# 13
# 14
# 15
# 16
# 17
# 18
# 19
# 20
,
Идеи дизайна UI / UX всегда играют ключевую роль, помогая дизайнерам создавать превосходные мобильные приложения для iOS или Android, в большинстве случаев. И именно поэтому дизайнеры UX / UI часто проводят много времени в поиске и поиске различных бесплатных или коммерческих шаблонов дизайна UI / UX или примеров для вдохновения. И сегодня мы собрали коллекцию из новейших дизайнов интерфейсов мобильных приложений для вашего вдохновения и надеемся, что она вам как-то поможет:
* Дизайнеры: Антон Шматько, Green Shark Studio, Павел Хенкин
* О себе:
ЙОНО.Мобильное приложение MP3 — это музыкальное приложение, которое позволяет пользователям не только слушать музыку, но и проверять радио, чтобы узнать новости или другие интересные материалы. Это хорошее место, чтобы поделиться и открыть свои любимые песни, альбомы и исполнителей.
* Основные характеристики:
Он имеет действительно чистые и привлекательные интерфейсы с идеальной цветовой схемой: все интерфейсы разработаны с красивыми контрастами цвета между красным и черным, что делает его типичным и модным. И цветовые градиенты также используются в некоторых кнопках и небольших разделах.Это заставляет людей сосредоточиться на этих специальных частях и дает пользователям чувство иерархии.
Наложение фотографий, кнопок и значков также делает его красивым и удобным для пользователей. Таким образом, он ориентирован на пользователя, красивый и простой в использовании.
* Дизайнер: Tubik
* Описание:
Watering Tracker App — мобильное приложение, которое может напоминать пользователям о поливе растений и отслеживать статистику полива для каждого растения. И это будет действительно полезно для людей, которые любят выращивать растения.
* Основные характеристики:
Это действительно отличная идея, чтобы отслеживать статистику полива растений, а также напоминать пользователям своевременно поливать их растения.Кроме того, его фоновые фотографии и изображения различных растений, находящихся под наблюдением, действительно яркие и свежие, чтобы дать пользователям хорошее настроение во время использования. Он также предлагает пользователям множество подробностей о растениях, чтобы они могли легко и просто знать их условия, такие как влажность, температура, свет и многое другое.
Его цветовая схема, черный фон с белыми и зелеными значками / кнопками могут не только перекликаться с основной темой зеленого растения, но и сделать это приложение более приемлемым для пользователей.
* Дизайнеры: CD UXT
* Описание:
Listen — это также прототип музыкального приложения, цель которого — предложить пользователям уникальный и приятный опыт прослушивания, даже если они любят разные музыкальные стили.Благодаря понятным и понятным интерфейсам люди могут легко находить и слушать свои любимые песни из различных музыкальных каналов или на основе разных сцен, таких как «Новое», «Радио», «Тема», «Альбом», «Драйв», «Стирка», «Спорт», «Работа», «Встреча» и т. Д. Настраиваемый интерфейс также позволяет пользователям слушать музыку в зависимости от настроения. Таким образом, это идеальный выбор, когда вы хотите насладиться и потерять себя в мире музыки.
* Основные характеристики:
Его королевский синий цвет фона идеально сочетается с белыми словами и фотографиями.Набор иллюстраций, показывающих разные сцены и каналы, тоже интересен и красив. И все его значки и кнопки с яркими тенями также выделены жирным шрифтом и их легко распознать. Благодаря умным и превосходным взаимодействиям, добавленным к различным элементам, он часто может предложить пользователям более плавное и приятное впечатление. Таким образом, это удобно и действительно стоит попробовать.
* Дизайнер: Queble Solutions
* Описание:
Приложение для заказа кофе — это мобильное приложение, которое может помочь пользователям быстро заказать и получить горячий кофе разных размеров и качества в зависимости от своих потребностей.
* Основные характеристики:
Отличительные особенности стиля иллюстрации. Его мультипликационная кофемашина с красивыми цветами и геометрическими графическими элементами действительно милая и красивая. Его чистый фон, украшенный простой серой графикой и желтыми кнопками, делает его действительно чистым и аккуратным. Так что это действительно чисто и просто.
* Дизайнер: Adrain Rudzik
* Описание:
Приложение Roomframes — это приложение для iOS, которое может помочь людям записывать и запоминать места, которые они посетили, особенно комнаты, в которых они спали раньше и не хотят забывать в будущем ,Таким образом, в этом аспекте это скорее будет управляющее приложение.
* Основные характеристики:
Он использует несколько рамочных интерфейсов для добавления пользователями разных мест, отелей, рабочих станций или новых офисов и т. Д. И каждому месту разрешено добавлять дополнительные даты, фотографии, описания и другие подробности, чтобы они могли помочь запомнить все незабываемое А его чистый белый фон делает все добавленные фотографии, теги, заметки и описания более выдающимися, что может быть полезно для пользователей, чтобы вспомнить или поделиться этими воспоминаниями со своими друзьями или семьями.
* Дизайнер: Melany Roa
* Описание:
iOS App Slide Card — это мобильное приложение для iOS, которое может помочь пользователям классифицировать, искать и вести бизнес с автомобилями, а также является хорошим инструментом для общения и общения с людьми. Любители разных автомобилей.
* Основные характеристики:
Он спроектирован с чистым фоном и позволяет пользователям сосредоточиться на автомобильной информации, такой как фотографии автомобилей, цены, описания и информация о владельце, и т. Д. Его интерфейс поиска также позволяет пользователям находить желаемые автомобили с помощью простых щелчков мыши.Итак, это просто, чисто и полезно.
* Дизайнер: Varduhi Adami
* Описание:
Karoline — мобильное приложение для покупок, которое позволяет пользователям, особенно женщинам, искать и покупать брюки, куртки, платья и другую одежду по своему желанию.
* Основные характеристики:
Чистый розовый фон очень приятный и привлекательный для женщин. И значки и кнопки также просты и удобны для пользователей, чтобы искать более подробную информацию о различной одежде в зависимости от их потребностей. Кроме того, он предлагает ряд страниц, которые почти содержат все детали, которые могут понадобиться пользователю при поиске и покупке одежды, такие как «Дом», «Моя учетная запись», «Мои заказы», «Корзина покупок», «Избранное», «Мои приглашения и настройки» и т. Д.Это действительно полезно, когда вам действительно нужно купить одежду онлайн с помощью телефона.
* Дизайнер: Doeun Shin
* Описание:
Space — мобильное приложение, которое позволяет пользователям более эффективно управлять жизнью. Это функция для предоставления полезной информации, основанной на расписании пользователей, такой как информация о трафике и погоде, по утрам, а также звуков тем и будильников, которые соответствуют различным настроениям пользователей ночью.
* Основные характеристики:
Стиль иллюстрации также включает множество ярких анимированных кнопок, фотографий и параметров.Его синий цвет также позволяет пользователям чувствовать себя хорошо и комфортно, независимо от того, используют ли они это утром или ночью. Более того, он позволяет пользователям управлять своей жизнью с помощью множества функциональных интерфейсов, таких как календарь настроения, ежедневные сервисы, Today Brief и Voice Diary и т. Д. Итак, это мило и привлекательно.
* Дизайнер: Monish Mohanan
* О проекте:
QuickBee — это секретное рекламное приложение, которое предлагает информацию о жизни пользователей в разных категориях, таких как автомобили, недвижимость, работа, услуги, образование и другие категории.Пользователи могут легко зарегистрироваться и создать там профиль, чтобы искать необходимую информацию о жизни, проверять популярные тренды, просматривать популярные объявления и т. Д.
* Основные характеристики:
Отличается аккуратным дизайном и великолепными цветами. Простые и красочные кнопки четко отображают разнообразные категории, а четкие рамки представляют упорядоченные популярные и показанные рекламные объявления. Его векторные иконки также хороши и просты для понимания. И в основном он состоит из нескольких полезных экранов, таких как Экран входа в систему, Экран просмотра, Экран списка категорий и Экран сведений и т. Д.
* Дизайнер: uixNinja
* Описание:
Это финансовое приложение, которое позволяет пользователям управлять своими деньгами.
* Основные характеристики:
Его прекрасный цветовой контраст и градиенты действительно отличительны. Простые иконки и красочные геометрии делают все интерфейсы простыми и впечатляющими.
Ну, это все 10 последних разработок интерфейсов мобильных приложений , которые мы искали и собрали для вас. Они могут не только помочь вам найти новые источники вдохновения для следующего проекта по разработке мобильного пользовательского интерфейса, но также могут стать отличным материалом для вас, чтобы уловить и предсказать возможные тенденции в 2018 году.Надеюсь, что вы в полной мере воспользуетесь ими, чтобы улучшить работу над UI / UX.
Адаптивность и макет
Люди обычно хотят иметь возможность использовать свои любимые приложения на всех своих устройствах и в любом контексте. В приложении для iOS можно настроить элементы интерфейса и макеты для автоматического изменения формы и размера на разных устройствах, во время многозадачности на iPad, в режиме разделенного просмотра, при повороте экрана и т. Д. Важно спроектировать адаптируемый интерфейс, обеспечивающий отличный опыт работы в любой среде.
Размеры и ориентация экрана устройства
Устройства iOSимеют различные размеры экрана и могут использоваться как в книжной, так и в альбомной ориентации.
Если ваше приложение работает на определенном устройстве, убедитесь, что оно работает на всех экранах этого устройства. Другими словами, приложение только для iPhone должно запускаться на экране любого размера iPhone, а приложение только на iPad должно запускаться на экране любого размера.
| Устройство | Размеры портрета | Размеры ландшафта |
|---|---|---|
| 12.9 «iPad Pro | 2048 пикселей × 2732 пикселей | 2732 пикселей × 2048 пикселей |
| 11 «iPad Pro | 1668 пикселей × 2388 пикселей | 2388 пикселей × 1668 пикселей |
| 10,5 «iPad Pro | 1668 пикселей × 2224 пикселей | 2224 пикселей × 1668 пикселей |
| 9,7 «iPad | 1536px × 2048px | 2048 пикселей × 1536 пикселей |
| 7,9 «iPad mini 4 | 1536px × 2048px | 2048 пикселей × 1536 пикселей |
| iPhone XS Max | 1242 пикселей × 2688 пикселей | 2688 пикселей × 1242 пикселей |
| iPhone XS | 1125 пикселей × 2436 пикселей | 2436px × 1125px |
| iPhone XR | 828 пикселей × 1792 пикселей | 1792px × 828px |
| iPhone X | 1125 пикселей × 2436 пикселей | 2436px × 1125px |
| iPhone 8 Plus | 1242 пикселей × 2208 пикселей | 2208px × 1242px |
| iPhone 8 | 750 пикселей × 1334 пикселей | 1334px × 750px |
| iPhone 7 Plus | 1242 пикселей × 2208 пикселей | 2208px × 1242px |
| iPhone 7 | 750 пикселей × 1334 пикселей | 1334px × 750px |
| iPhone 6s Plus | 1242 пикселей × 2208 пикселей | 2208px × 1242px |
| iPhone 6s | 750 пикселей × 1334 пикселей | 1334px × 750px |
| iPhone SE | 640 пикселей × 1136 пикселей | 1136px × 640px |
Чтобы узнать, как разрешение экрана влияет на обложку вашего приложения, см. Размер и разрешение изображения.
Auto Layout
Auto Layout — это инструмент для разработки адаптивных интерфейсов. Используя Auto Layout, вы можете определить правила (известные как ограничения ), которые управляют содержимым вашего приложения. Например, вы можете ограничить кнопку так, чтобы она всегда находилась горизонтально по центру и располагалась на восемь точек под изображением, независимо от доступного места на экране.
Auto Layout автоматически перенастраивает макеты в соответствии с указанными ограничениями при обнаружении определенных изменений среды (известных как черты ).Вы можете настроить свое приложение для динамической адаптации к широкому спектру характеристик, в том числе:
Руководство разработчика см. В Руководстве по автоматической компоновке и UITraitCollection.
Путеводители по макету и безопасная зона
Направляющие макетаопределяют прямоугольные области, которые на самом деле не отображаются на экране, но помогают в позиционировании, выравнивании и интервале содержимого. Система включает предопределенные направляющие макета, которые позволяют легко применять стандартные поля вокруг содержимого и ограничивают ширину текста для оптимальной читабельности.Вы также можете определить собственные макеты.
Придерживайтесь безопасных площадей и полей, определенных UIKit. Эти направляющие обеспечивают правильную вставку в зависимости от устройства и контекста. Безопасная область также не позволяет контенту перекрывать строку состояния, панель навигации, панель инструментов и панель вкладок. Стандартные системные представления автоматически принимают руководство по разметке безопасной зоны.
Руководство разработчика см. В разделах UILayoutGuide, layoutMarginsGuide, readableContentGuide и safeAreaLayoutGuide.
Размер классов
Размерные классы — это черты, которые автоматически присваиваются областям контента в зависимости от их размера. Система определяет два класса размеров: , обычный (обозначает расширенное пространство) и , компактный (обозначает ограниченное пространство), которые описывают высоту и ширину вида.
Представление может иметь любую комбинацию классов размеров:
- Обычная ширина, обычная высота
- Компактная ширина, компактная высота
- Обычная ширина, компактная высота
- Компактная ширина, обычная высота
Как и в случае с другими изменениями среды, iOS динамически вносит изменения в макет на основе классов размеров области содержимого.Например, когда класс вертикальных размеров изменяется с компактной высоты на обычную высоту — возможно, из-за того, что пользователь повернул устройство из альбомной в портретную ориентацию — панели вкладок могут стать выше.
Классы размеров устройств
Различные комбинации классов размеров применяются к полноэкранному режиму на разных устройствах в зависимости от размера экрана.
| Устройство | Портретная ориентация | Ландшафтная ориентация |
|---|---|---|
| 12.9 «iPad Pro | Обычная ширина, обычная высота | Обычная ширина, обычная высота |
| 11 «iPad Pro | Обычная ширина, обычная высота | Обычная ширина, обычная высота |
| 10,5 «iPad Pro | Обычная ширина, обычная высота | Обычная ширина, обычная высота |
| 9,7 «iPad | Обычная ширина, обычная высота | Обычная ширина, обычная высота |
| 7.9 «iPad mini 4 | Обычная ширина, обычная высота | Обычная ширина, обычная высота |
| iPhone XS Max | Компактная ширина, обычная высота | Обычная ширина, компактная высота |
| iPhone XS | Компактная ширина, обычная высота | Компактная ширина, компактная высота |
| iPhone XR | Компактная ширина, обычная высота | Обычная ширина, компактная высота |
| iPhone X | Компактная ширина, обычная высота | Компактная ширина, компактная высота |
| iPhone 8 Plus | Компактная ширина, обычная высота | Обычная ширина, компактная высота |
| iPhone 8 | Компактная ширина, обычная высота | Компактная ширина, компактная высота |
| iPhone 7 Plus | Компактная ширина, обычная высота | Обычная ширина, компактная высота |
| iPhone 7 | Компактная ширина, обычная высота | Компактная ширина, компактная высота |
| iPhone 6s Plus | Компактная ширина, обычная высота | Обычная ширина, компактная высота |
| iPhone 6s | Компактная ширина, обычная высота | Компактная ширина, компактная высота |
| iPhone SE | Компактная ширина, обычная высота | Компактная ширина, компактная высота |
Классы многозадачных размеров
На iPad классы размеров также применяются, когда ваше приложение работает в многозадачной конфигурации.
2/3 разделенный вид
1/2 разделенный вид
1/3 разделенного вида
| Устройство | Mode | Портретная ориентация | Ландшафтная ориентация |
|---|---|---|---|
| 12,9 «iPad Pro | 2/3 разделенный вид | Компактная ширина, обычная высота | Обычная ширина, обычная высота |
| 1/2 разделенного вида | N / A | Обычная ширина, обычная высота | |
| 1/3 сплит | Компактная ширина, обычная высота | Компактная ширина, обычная высота | |
| 11 «iPad Pro | 2/3 разделенный вид | Компактная ширина, обычная высота | Обычная ширина, обычная высота |
| 1/2 разделенного вида | N / A | Компактная ширина, обычная высота | |
| 1/3 сплит | Компактная ширина, обычная высота | Компактная ширина, обычная высота | |
| 10.5 «iPad Pro | 2/3 разделенный вид | Компактная ширина, обычная высота | Обычная ширина, обычная высота |
| 1/2 разделенного вида | N / A | Компактная ширина, обычная высота | |
| 1/3 сплит | Компактная ширина, обычная высота | Компактная ширина, обычная высота | |
| 9,7 «iPad | 2/3 разделенный вид | Компактная ширина, обычная высота | Обычная ширина, обычная высота |
| 1/2 разделенного вида | N / A | Компактная ширина, обычная высота | |
| 1/3 сплит | Компактная ширина, обычная высота | Компактная ширина, обычная высота | |
| 7.9 «iPad mini 4 | 2/3 разделенный вид | Компактная ширина, обычная высота | Обычная ширина, обычная высота |
| 1/2 разделенного вида | N / A | Компактная ширина, обычная высота | |
| 1/3 сплит | Компактная ширина, обычная высота | Компактная ширина, обычная высота |
Общие соображения по компоновке
Убедитесь, что основной контент чист в размере по умолчанию. Люди не должны прокручивать по горизонтали, чтобы прочитать важный текст, или изменять масштаб, чтобы увидеть основные изображения, если только они не захотят изменить размер.
Поддерживайте общий непротиворечивый внешний вид во всем приложении. В целом элементы с похожими функциями должны выглядеть одинаково.
Используйте визуальный вес и баланс, чтобы передать важность. Крупные предметы привлекают внимание и кажутся более важными, чем мелкие. Более крупные предметы также легче нажимать, что особенно важно, когда приложение используется в отвлекающем окружении, например на кухне или в тренажерном зале.Как правило, размещайте основные элементы в верхней половине экрана и — в контексте чтения слева направо — рядом с левой стороной экрана.
Используйте выравнивание, чтобы упростить сканирование и передать информацию об организации и иерархии. Alignment делает приложение аккуратным и организованным, помогает людям сосредоточиться при прокрутке и облегчает поиск информации. Отступы и выравнивание также могут указывать, как связаны группы контента.
Если возможно, поддерживайте как книжную, так и альбомную ориентацию. Люди предпочитают использовать приложения в разных ориентациях, поэтому лучше, когда вы сможете оправдать это ожидание.
Будьте готовы к изменениям размера текста. Люди ожидают, что большинство приложений ответят, когда они выберут другой размер текста в настройках. Чтобы учесть некоторые изменения размера текста, вам может потребоваться настроить макет. Для получения дополнительной информации об использовании текста в вашем приложении см. Типография.
Обеспечьте достаточное количество сенсорных мишеней для интерактивных элементов. Старайтесь поддерживать минимальную площадь перегиба 44 пт х 44 пт для всех элементов управления.
4,7 «iPhone
5,8 «iPhone
Предварительный просмотр приложения на нескольких устройствах. Вы можете использовать Simulator (входит в Xcode) для предварительного просмотра вашего приложения и проверки на обрыв и другие проблемы с макетом. Если ваше приложение поддерживает альбомный режим, убедитесь, что макеты выглядят великолепно независимо от того, было ли устройство повернуто влево или вправо. Перевернутый портретный режим не поддерживается на полноэкранных iPhone.Некоторые функции, такие как широкие цветные изображения, лучше всего просматривать на реальных устройствах.
Применение полей удобочитаемости при отображении текста на более крупных устройствах. На этих полях текстовые строки достаточно короткие, чтобы обеспечить удобство чтения.
Адаптация к изменениям в контексте
Сохранять фокус на текущем контенте во время изменения контекста. Контент — ваш высший приоритет. Изменение фокуса, когда изменения среды могут быть дезориентирующими и разочаровывающими, и может заставить людей чувствовать, что они потеряли контроль над приложением.
Избегайте необоснованных изменений макета. Когда кто-то поворачивает устройство, не нужно менять весь макет. Например, если ваше приложение отображает сетку изображений в портретном режиме, оно не должно представлять те же изображения, что и список в альбомном режиме. Вместо этого он может просто настроить размеры сетки. Старайтесь поддерживать сопоставимый опыт во всех контекстах.
Если важно, чтобы ваше приложение работало в одной ориентации, поддержите оба варианта. Приложение, которое работает только в ландшафтном режиме, должно использоваться независимо от того, вращается ли устройство влево или вправо.Приложение, которое работает только в портретном режиме, должно поворачивать свое содержимое на 180 градусов, когда устройство поворачивается на 180 градусов — за исключением iPhone X, который не поддерживает перевернутый портретный режим. Если ваше приложение не поворачивается автоматически, когда кто-то держит устройство в неправильной ориентации, он будет инстинктивно знать, как повернуть его. Вам не нужно говорить им.
Настройте реакцию своего приложения на ротацию в соответствии с контекстом. Игра, которая позволяет людям перемещать персонажа, например, вращая устройство, вероятно, не должна менять ориентацию во время игры.Однако он может отображать меню и вводные последовательности на основе текущей ориентации.
Цель для поддержки как iPad, так и iPhone. Люди ценят возможность запуска вашего приложения на любом типе устройства iOS. Если для определенных функций вашего приложения требуется специальное аппаратное обеспечение iPhone, например телефония, рассмотрите возможность скрытия или отключения этих функций на iPad и предоставления пользователям возможности использовать другие функции вашего приложения.
Полноэкранное 4,7 «изображение устройства
Обрезка на 5.8 «устройство
Почтовый ящикна устройстве 5,8 «
Полноэкранное 5,8 «изображение устройства
Обрезка на 4,7-дюймовом устройстве
Pillarboxing на 4,7-дюймовом устройстве
Помните о различиях в соотношении сторон при повторном использовании существующих иллюстраций. У разных размеров экрана могут быть разные соотношения сторон, из-за чего иллюстрации могут выглядеть обрезанными, коробками с надписями или рамками. Убедитесь, что важный визуальный контент остается видимым на всех размерах дисплея.
Проектирование полноэкранного режима
Расширьте визуальные элементы, чтобы заполнить экран. Убедитесь, что фоны простираются до краев экрана, и чтобы макеты с вертикальной прокруткой, такие как таблицы и коллекции, продолжались до самого дна.
Избегайте явного размещения интерактивных элементов управления в самом низу экрана и в углах. Люди используют жесты смахивания в нижней части экрана для доступа к таким функциям, как Главный экран и переключатель приложений, и эти жесты могут отменять пользовательские жесты, которые вы используете в этой области.Дальние углы экрана могут быть труднодоступными для людей.
Вставить необходимый контент для предотвращения отсечения. В целом, контент должен быть центрирован и симметрично вставлен, чтобы он отлично смотрелся в любой ориентации, не был обрезан закругленными углами, не скрывался корпусом датчика и не скрывался индикатором доступа к главному экрану. Для достижения наилучших результатов используйте стандартные предоставляемые системой элементы интерфейса и автоматическую разметку для создания интерфейса и придерживайтесь руководств по разметке и безопасной области, определенной UIKit.Когда устройство находится в горизонтальной ориентации, для некоторых приложений, таких как игры, может быть целесообразно разместить в нижней части экрана (с возможностью расширения ниже безопасной области) элементы управления, которые можно установить, чтобы обеспечить больше места для содержимого. Используйте соответствующие вставки при размещении элементов управления в верхней и нижней частях экрана и оставьте достаточно места вокруг индикатора «Домой», чтобы люди не случайно нацелились на него при попытке взаимодействия с элементом управления. Поскольку индикатор «Домой» остается в центре экрана, его расположение относительно интерфейса вашего приложения может измениться.
Вставные полноразмерные кнопки. Кнопка, которая простирается до краев экрана, может не выглядеть как кнопка. Соблюдайте стандартные поля UIKit по бокам полноразмерных кнопок. Кнопка полной ширины, появляющаяся в нижней части экрана, выглядит лучше всего, когда она имеет закругленные углы и выровнена по нижней части безопасной области, что также гарантирует, что она не конфликтует с индикатором «Домой».
Не маскируйте и не привлекайте особое внимание к ключевым функциям дисплея. Не пытайтесь скрыть закругленные углы устройства, корпус датчика или индикатор для доступа к главному экрану, поместив черные полосы вверху и внизу экрана. Не используйте визуальные украшения, такие как скобки, рамки, формы или учебные тексты, чтобы привлечь особое внимание к этим областям.
Помните о высоте строки состояния. Строка состояния выше на полноэкранных iPhone, чем на старых iPhone. Если ваше приложение предполагает фиксированную высоту строки состояния для позиционирования контента ниже строки состояния, вы должны обновить свое приложение, чтобы динамически позиционировать контент на основе текущего устройства.Обратите внимание, что строка состояния на полноэкранных iPhone не меняет высоту, когда активны фоновые задачи, такие как запись голоса и отслеживание местоположения.
Если ваше приложение в настоящее время скрывает строку состояния, пересмотрите это решение для полноэкранных iPhone. Полноэкранные iPhone имеют больше вертикального пространства для контента, чем старые iPhone, и строка состояния занимает область экрана, которую ваше приложение, вероятно, не будет полностью использовать. Строка состояния также отображает информацию, которую люди считают полезной. Он должен быть скрыт только в обмен на добавленную стоимость.
Разрешить автоматическое скрытие индикатора для экономного доступа к главному экрану. Когда автоматическое скрытие включено, индикатор гаснет, если пользователь не касался экрана в течение нескольких секунд. Он появляется, когда люди снова касаются экрана. Это поведение должно быть включено только для пассивного просмотра, например воспроизведения видео или слайд-шоу фотографий.
Дополнительные соображения по компоновке
Убедитесь, что ваш веб-сайт отлично смотрится на экране от края до края. См. Разработка веб-сайтов для iPhone X на webkit.org.
,тем — iOS — Руководство по интерфейсу пользователя
iOS Design Темы
Как разработчик приложения, у вас есть возможность представить необычный продукт, который поднимется на вершину чарта App Store. Для этого вам нужно соответствовать высоким ожиданиям по качеству и функциональности.
Три основные темы отличают iOS от других платформ:
Ясность. Во всей системе текст разборчивый в любом размере, значки четкие и ясные, украшения тонкие и уместные, а заостренный фокус на функциональности мотивирует дизайн.Негативное пространство, цвет, шрифты, графика и элементы интерфейса тонко выделяют важный контент и передают интерактивность.
Почтение. Жидкое движение и четкий, красивый интерфейс помогают людям понимать контент и взаимодействовать с ним, даже не соревнуясь с ним. Контент обычно занимает весь экран, а прозрачность и размытость часто намекают на большее. Минимальное использование рамок, градиентов и теней делает интерфейс легким и воздушным, обеспечивая при этом первостепенное значение.
Глубина. Отдельные визуальные слои и реалистичные движения передают иерархию, придают жизненную силу и облегчают понимание. Прикосновение и обнаруживаемость усиливают удовольствие и обеспечивают доступ к функциональности и дополнительному контенту без потери контекста. Переходы дают ощущение глубины при навигации по контенту.
Принципы проектирования
Чтобы максимизировать влияние и охват, помните о следующих принципах при представлении индивидуальности вашего приложения.
Эстетическая целостность
Эстетическая целостность показывает, насколько хорошо внешний вид и поведение приложения интегрируются с его функциями. Например, приложение, которое помогает людям выполнять серьезную задачу, может держать их в фокусе, используя тонкую, ненавязчивую графику, стандартные элементы управления и предсказуемое поведение. С другой стороны, захватывающее приложение, такое как игра, может создать увлекательный внешний вид, который обещает веселье и волнение, поощряя при этом открытие.
Консистенция
Согласованное приложение реализует знакомые стандарты и парадигмы, используя предоставляемые системой элементы интерфейса, известные значки, стандартные стили текста и единую терминологию.Приложение включает в себя функции и поведение, как люди ожидают.
Прямая манипуляция
Прямые манипуляции с экранным контентом привлекают людей и облегчают понимание. Пользователи испытывают прямые манипуляции, когда они поворачивают устройство или используют жесты для воздействия на экранный контент. Посредством прямых манипуляций они могут видеть непосредственные, видимые результаты своих действий.
Обратная связь
Обратная связь подтверждает действия и показывает результаты, чтобы держать людей в курсе.Встроенные приложения iOS обеспечивают ощутимую обратную связь в ответ на каждое действие пользователя. Интерактивные элементы выделяются на короткое время при нажатии, индикаторы прогресса отображают состояние длительных операций, а анимация и звук помогают прояснить результаты действий.
метафор
Люди учатся быстрее, когда виртуальные объекты и действия приложения являются метафорами знакомого опыта — как в реальном, так и в цифровом мире. Метафоры хорошо работают в iOS, потому что люди физически взаимодействуют с экраном.Они убирают взгляды с пути раскрытия контента внизу. Они перетаскивают контент. Они переключают переключатели, перемещают ползунки и прокручивают значения выбора. Они даже пролистывают страницы книг и журналов.
Пользовательский контроль
В iOS люди, а не приложения, находятся под контролем. Приложение может предложить направление действий или предупредить об опасных последствиях, но обычно приложение принимает на себя ответственность за принятие решений. Лучшие приложения находят правильный баланс между включением пользователей и предотвращением нежелательных результатов.Приложение может заставить людей чувствовать, что они контролируют ситуацию, сохраняя знакомые и предсказуемые интерактивные элементы, подтверждая разрушительные действия и позволяя легко отменять операции, даже если они уже выполняются.
,