Мобильный дизайн – 15 полезных ресурсов для дизайна мобильных приложений / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Содержание

Комплексное руководство по дизайну мобильных приложений

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

Сегодня более чем когда-либо люди взаимодействуют со своими телефонами в критические моменты. Средний пользователь из США проводит 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 дизайна. Когда все работает так, как предсказывают пользователи, они чувствуют сильное чувство контроля. В отличие от ПК, где пользователи могут использовать эффекты при наведении курсора, чтобы понять, является ли элемент интерактивным или нет, на мобильном телефоне пользователи могут проверять интерактивность, только нажав на элемент. Вот почему важно подумать о том, как дизайн кнопок и других интерактивных элементов передает доступность. Как пользователи понимают, что элемент – это кнопка? Форма должна следовать за функцией: внешний вид объекта говорит пользователям, как его использовать. Визуальные элементы, которые выглядят как кнопки, но не нажимаются, легко запутают пользователей.

Кнопка Назад» должна работать правильно

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

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

Информативные сообщения об ошибках

Человеку свойс

20 приложений для смартфонов с красивым дизайном

В эпоху приложений для смартфонов всё больше дизайнеров начинают разрабатывать их. А чтобы добиться удобного использования и нарисовать красивый дизайн, дизайнерам и разработчикам приходится не легко. А зачем мучиться над своим приложением? А всё потому что всё больше людей пользуются мобильными устройствами, и чтобы обеспечить удобство дизайнеры ломают головы. Так же всё больше людей совершают покупки через мобилки. Согласитесь, что с приложения это сделать куда удобнее чем с открытого сайта в браузере.

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

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

И конечно же выражаю благодарность www.webdesignerdepot.com

Приложение Dribbble для Android

Это приложение популярного сервиса Dribbble. Оно не только по современному красивое но и имеет логическую структуру, которая позволит пользователю с лёгкостью просматривать работы дизайнеров.

Пражский зоопарк

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

UI элементы для приложения — Natalie

Говорят, что это самая сексуальная подборка UI элементов для приложения, которые имеют плавные и округлые формы. Следовательно отсюда и идёт название — Natalie

Будильник

Будильников существует огромное множество, но дизайнеры и разработчики не останавливаются на этом. И стремятся создать самый необыкновенный будильник в плане дизайна. Это приложение то что надо, оно остаётся полезным для всех и так же имеет неповторимый дизайн.

Заметки

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

Дизайн Withjack

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

Panvel Ciclos

Очень полезное приложение для женщин, родом из Бразильской аптеки. Удивительная цветовая гамма. А так же удобство на высшем уровне, прекрасный пол оценит.

Coffely

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

Приложение Whatsapp

Это очень красивый ре-дизайн популярного приложения для обмена сообщениями — Whatsapp. Дизайн действительно очень красивый, все просто отлично продумано и реализовано.

Охота на место

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

Плоский дизайн приложения Facebook

Например я никогда не был поклонником Facebook, но это приложение заслуживает должного внимания. Весь интерфейс продуман до малейших мелочей, как говорят «Ни сучка ни задоринки».

Bikester

Когда создаётся приложение для подсчёта статистики, оно должно визуально легко и практично выглядеть, для того, чтобы пользователю было легко с ним справиться. Bikester — всё это делает с полна, отличный и понятный интерфейс, с прекрасными иконками.

Приложение Teamride

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

Web Fest

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

Осознанные сны

Когда человек спит он обычно не осознают этого. Вам бы хотелось осознать, что Вы во сне? Способности безграничны. Даже существует такое приложение с красивым дизайном, которое поможет и подготовит Вас к получению контроля над своим сном.

Ре-дизайн National Geographic

Чудесный дизайн для приложения популярного ресурса National Geographic. Оно точно предоставит Вам незабываемый тур по миру.

Список задач — Taasky

Полезное приложение списка Ваших задач, но по видимому оно на много стильнее и красивее остальных подобных приложений (никого не хочу обидеть). Интерфейс очень минималистичен и конечно же прост в использовании.

Cmplain

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

Мне нужны деньги

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

Погода

Конечно же приложений погоды множество как платных таки бесплатных. Но это совершенно новый уровень с чёткой структурой и не правильной геометрией.

Заключение

Создание и разработка приложений для мобильных устройств является очень популярным. И естественно не дизайнеры не разработчики останавливаться на этом не будут. Если сейчас уже с помощью телефона можно заранее приготовить себе кофе, не прикладывая особых усилий, а вот что будет лет через 10? Как вы думаете?

Дизайн мобильного приложения. Как добиться оптимального результата?

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

В идеале приложение для мобильного устройства должно работать со скоростью мысли. Более того, интерфейс приложения должен быть понятен даже новичку.

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

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

10 интересных трендов в дизайне мобильных приложений / Habr

Благодаря развитию мобильных приложений – от Uber до Vine – мы постепенно начинаем понимать, как тренды в дизайне программ обретали форму в течение половины десятилетия. Многие факторы влияют на то, как в определенный отрезок времени выглядят мобильные приложения: от таких социальных трендов, как «экономика взаимопомощи», до изменений в технологиях – в этом году, например, мы видим огромные экраны телефонов в сочетании с крошечными носимыми аксессуарами.

Чем больше пользователи используют мобильные технологии в их повседневной жизни, тем больше они думают о приложениях, которыми пользуются. Проверяя почту, бронируя номер в отеле, заказывая безглютеновую пиццу с доставкой на дом. Такие приложения, как Airbnb и GrubHub выделяются из общей массы и минимизируют количество мыслей, направленных на их использование. Поэтому пользователи могут совмещать работу в приложении с чем-то еще и не тратить время на обдумывание того, как найти функции, которые им необходимы. Чем больше дел одновременно выполняют пользователи, тем больше им необходимы мобильные приложения с дизайном, который отвечает их потребностям и дает им то, чего они желают – тогда, когда им это нужно.

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

1. Большие экраны телефонов

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

Работая выше очевидного «большого дизайна», важно понять, как люди будут держать свои устройства во время их использования. Это значит, что в первую очередь элементы навигации должны быть расположены таким образом, чтобы человек легко мог дотянуться до них большим пальцем (например, верхний противоположный угол скорее всего будет слишком далеко). Несложно до этого додуматься, не так ли? Просто нужно расположить все интерактивные элементы справа в нижней части экрана. Только дело усложняет то, что около 10% пользователей являются левшами.

Вы можете «принудить» ваших пользователей-левшей к тому, чтобы держать экран двумя руками, но с учетом того, какими большими нынче становятся экраны мобильных устройств, более часто будет использоваться та рука, ближе к которой расположены элементы навигации. Или же, если вам действительно важно, чтобы ваше приложение было удобным для всех пользователей (а вам это важно), то вы проследите за соблюдением следующего условия: все элементы навигации должны быть достаточно велики, чтобы до них легко было дотянуться с любой стороны экрана. Кроме того, у вас действительно появилось больше полезной площади экрана, с которой и нужно работать. Другая идея заключается в использовании настраиваемого интерфейса с возможностью «перевернуть» его для левшей.

Но вне зависимости от того, владеют ваши пользователи лучше правой рукой или наоборот, важно подходить к дизайну приложений с пониманием того, что определенные решения в дизайне могут повлечь за собой не только снижение удобства использования интерфейса (сделают его менее понятным интуитивно), но и приведут к усталости и дискомфорту в руках. Это та важная деталь, которая должна быть учтена и исправлена при различных видах тестирования.

Конечно же, работая над приложениями для больших экранов, нужно помнить о следующем:

2. Свайп – новое нажатие

Когда появились первые мобильные приложения, адаптированные под тачскрины, дизайнерам и разработчикам пришлось столкнуться с реальностью программирования для объекта, значительно отличающегося от предыдущих видов. Зумирование в первом iPhone образца 2007 года было для нас необычной новинкой, но дизайн приложения, в котором пользователю приходится зумировать страницу, чтобы иметь возможность прочитать контент, нельзя назвать удачным. Вместе с тем, кому из нас не довелось столкнуться с «противной» крошечной кнопкой, которая слишком мала, чтобы без проблем нажать ее (если только вы не обладатель редкой комбинации миниатюрных рук и отточенной моторики пианиста).

Пролистывающие движения кажутся более естественными при использовании мобильных устройств, особенно если вы делаете все одной рукой. Каковы тому доказательства? Представьте, что у вас в руке зажат телефон и попробуйте сделать большим пальцем нажатия на воображаемый экран. Запомните свои ощущения. Далее сделайте пролистывающее движение через экран. Что вам показалось более комфортным?

Конечно, наиболее очевидным примером применения свайпов в приложениях является Tinder, который упростил невероятно сложную природу знакомств до двух простых действий: пролистывания вправо и влево. За меньшее время, которое бы у вас занял просмотр какого-нибудь трейлера, вы можете отправить сигнал целой армии потенциальных кавалеров (или дам сердца) – одним только пролистывающим движением большого пальца на экране мобильного устройства. Кажется, что идеи Tinder его не подводят, о чем свидетельствуют более миллиарда пользователей приложения.

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

Крохотные дисплеи умных часов являются противоположностью огромных экранов фаблетов. Аналитическая фирма International Data Corporation предсказывает, что вендоры за этот год обеспечат поставки 45,7 млн носимых устройств, в том числе и носимых на запястье гаджетов (они составляют наибольший процент от общего числа, их количество равно 40 млн), а также предметов одежды и очков.

Те устройства, которые изначально разрабатывались как гаджеты для фитнеса, теперь захватывают все большие рыночные территории с релизами Apple Watch и Android Wear. Носимые устройства – это больше не разрекламированные шагомеры с механизмами, следящими за пульсом и сном. Они и вправду стали надежными умными гаджетами, способными рассказать пользователю, как долго продлится поездка на работу, показать прогноз погоды на завтра или напомнить закипятить чайник к приходу тетушки. Как это влияет на работу дизайнеров мобильных приложений?

Мы все еще находимся на ранних стадиях развития этого растущего тренда, хотя Apple и Android уже предлагают ассортимент решений для носимых устройств. Как создатели похожих на часы устройств, оба бренда подчеркивают важность того, чтобы информация на них легко воспринималась с одного только беглого взгляда. В отличие от программ для телефонов и планшетов, на которые по ожиданиям разработчиков пользователи смотрят продолжительное время, приложения для носимых устройств должны иметь такой дизайн, который обеспечивал бы быстрое восприятие пользователем достаточного количества контента. Информация должна усваиваться с одного лишь взгляда, даже краешком глаза. А это означает, что шрифт, цветовой контраст и сопутствующие факторы (где находится пользователь? какие данные ему необходимы прямо сейчас?) особенно важны при дизайне и разработке приложений для носимых устройств.

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

4. Многослойные макеты

Может ли вечная дискуссия по поводу того, что лучше – плоский дизайн и скевоморфизм – окончиться находкой чего-то среднего? Противники скевоморфизма утверждают, что на эстетическом уровне использование блеклого подобия натуральных текстур в контексте современных IT-технологий выглядит также безвкусно, как и попытка имитации дерева на приборной панели автомобиля. Но даже несмотря на признание ценителей эстетики в мире IT, и у плоского дизайна есть свои минусы. Если убрать текстуру со всех элементов дизайна мобильного приложения, то трудно будет определить, какие из них интерактивны, если вообще удастся различить границы между разными элементами интерфейса.

Компромиссом является многослойный плоский дизайн или то, что Google называет «материальным дизайном». Эта эстетика все еще сильно опирается на плоский дизайн, но некоторые ее принципы заимствованы из скевоморфизма. Как и с плоским дизайном, элементы многослойного или материального дизайна геометрические по своей природе, заполнены «монолитными» цветами нежели выполнены с имитацией природных текстур или банальным блеском, или сиянием. Но из скевоморфизма были позаимствованы метафоры из мира природы, особенно в том, как объекты взаимодействуют друг с другом. Это видно в тенях и других световых эффектах фона.

Принципы Google Material Design

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

5. Больше движения

Ваш смартфон обладает большей производительностью, чем оборудование, благодаря которому НАСА удалось отправить первого человека на луну, равно как и суперкомпьютер Deep Blue, который в 1997 году обыграл Гарри Каспарова в шахматы. И мобильные устройства становятся все умнее и умнее. И не только мобильные устройства становятся более мощными, но с приходом трех типов 4G (каждый пытается пересилить другого в мощности и скорости) на замену 3G, у вас появляется больше свободы для того, чтобы анимировать дизайн вашего мобильного приложения.

TimeLine Page, автор Сергей Валюх

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

6. Простые мягкие цветовые гаммы

Для каждого года характерно собственная цветовая палитра, и сейчас мы отдаем предпочтение очень простым гаммам цветов, которые отличаются мягким контрастом. Это естественное последствие вездесущего минимализма и плоского дизайна мобильных приложений. Тем не менее, цвета подбираются с учетом актуальных трендов (в цветовой палитре Pantone Spring 2015 предпочтение отдано «более холодным и мягким решениям с нежными теплыми тонами»). Попробуйте использовать шаблон с различными оттенками одного цвета, с белым шрифтом и контрастными элементами. Или попробуйте шаблон только с двумя-тремя приглушенными тонами.

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

7. На сцену выходит текстовое оформление

Кажется, что еще совсем недавно шрифты в мобильных приложениях были представлены только безопасными веб-шрифтами, которые можно было прочесть на экранах с малым разрешением. В течение последних двух лет в iOS и Android происходила оптимизация операционных систем для более динамичных, масштабируемых и читаемых шрифтов. Еще одним побочным эффектом больших экранов и технологических инноваций (спасибо тебе, TypeKit) является использование шрифтов для добавления красоты и выразительности дизайну ваших мобильных приложений. Независимо от того, сопутствует вашему тексту огромное модное изображение на заднем плане или же он окружен негативным пространством, мы можете использовать шрифт для донесения вашей идеи мощным минималистичным способом.

Приложение Wild Canada для iOS, автор Маршалл Лоренцо (Marshall Lorenzo).

8. Встроенное размытие

Одним из трендов в дизайне мобильных приложений является размытие заднего плана, которое добавляет удобства использования «полупрозрачных» приложений. И несмотря на то, что мобильные приложения, которые закрывают собой пользовательский интерфейс, имеют чистый и целостный облик, они все же могут вызывать проблемы с юзабилити.

Пользовательский интерфейс (UI) «Погода», автор Натан Смит (Nathan Smith).

В зависимости от выбранного пользователями фонового изображения для мобильных устройств, а также от количества иконок и виджетов отсутствие прозрачности может сделать ваше приложение более трудным для восприятия. Использование эффекта размытия Gaussian blur в дизайне программы сделает ее более понятной и приятной для глаз, сохраняя при этом «звучание» пользовательского интерфейса.

9. Инновации в удобном дизайне мобильных приложений

В качестве бонуса мы получаем то, что современные тренды дизайна фактически делают приложения более удобными в использовании. Простые слои с огромными элементами и шрифтами требуют меньше усилий зрительного аппарата, в то время как широкие движения руки (свайпы) противоположны жестам, которые требуют более отработанной моторики (зумирование двумя пальцами, нажатие), и являются приемлемыми для людей с проблемами опорно-двигательного аппарата. Наряду с тем, что Typekit позволяет использовать более живой текст в дизайне мобильных приложений без приношения в жертву качества шрифтов, он также делает наши программы более простыми в использовании для людей с нарушениями зрения. Рост доступности девайсов с большими экранами и фаблетов способствовал тому, что дизайн мобильных приложения стал более удобным для большего числа людей.

Пример встроенного ПО для распознавания человеческой речи, который использует грамматику SRGS.

Помните, что создание удобного для пользователя дизайна мобильного приложения требует основательных размышлений о том, насколько ваш продукт понятен и прост в использовании для потребителя. Настраивается ли этот шаблон для кого-то, кому может потребоваться крупный и более разборчивый шрифт? Создание списка особенностей, повышающих удобство использования приложения, может быть неплохой идеей при работе над дизайном вашего продукта. The Accessibility Project предлагает огромное количество ресурсов для дизайнеров и разработчиков, которые помогут их продуктам стать доступными и удобными для большего количества пользователей.

10. Более мудрое создание прототипов

Каждое используемое нами приложение когда-то было прототипом. Многие экспериментальные прототипы начинались с простых набросков, распечатанных на нескольких листах бумаги или сохраненных в PDF. Теперь, когда дизайн мобильных приложений стал более сложным, недостаточно показать только несколько статичных макетов и заставить клиента (или разработчика) представить в ней предполагаемые движения. Если приложение богато анимацией для направления пользователя или привлечения интереса благодаря визуальным эффектам, ваш клиент не способен схватить всего, что должно сделать приложение интересным и удобным в использовании. К тому же плоские модели не создают достаточный «вау-эффект».

Приложение Spotify – прототип, созданный при помощи Proto.io.

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

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

Дизайн мобильных приложений с нуля до PRO

Проектирование приложений

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

Тестирование гипотез

Проверка предположений: быстрое коридорное тестирование, сетевое и на реальных пользователях.

Презентация проекта

Грамотная и уверенная подача идеи или готового продукта — необходимое условие успеха.

Адаптивный дизайн

Требования платформ, а также различия в подходе к дизайну интерфейсов для iOS и Android.

UX-прототипирование

Удобный интерфейс повышает вовлеченность клиентов, даёт конкурентные преимущества и помогает занять первые позиции в PlayMarket и AppStore.

Профессиональный софт

Инструменты, без которых невозможен мобильный дизайн — Sketch, Figma, Zeplin.

40 примеров шикарного дизайна мобильного приложения

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

Мы собрали 40 самых крутых приветственных страниц. Надеемся, они вдохновят вас на новые дизайны.

40-onboarding-screen-mobile-app-designs39-onboarding-screen-mobile-app-designs2-onboarding-screen-mobile-app-designs1-onboarding-screen-mobile-app-designs4-onboarding-screen-mobile-app-designs3-onboarding-screen-mobile-app-designs6-onboarding-screen-mobile-app-designs7-onboarding-screen-mobile-app-designs9-onboarding-screen-mobile-app-designs8-onboarding-screen-mobile-app-designs5-onboarding-screen-mobile-app-designs12-onboarding-screen-mobile-app-designs10-onboarding-screen-mobile-app-designs14-onboarding-screen-mobile-app-designs11-onboarding-screen-mobile-app-designs13-onboarding-screen-mobile-app-designs16-onboarding-screen-mobile-app-designs17-onboarding-screen-mobile-app-designs15-onboarding-screen-mobile-app-designs18-onboarding-screen-mobile-app-designs20-onboarding-screen-mobile-app-designs19-onboarding-screen-mobile-app-designs23-onboarding-screen-mobile-app-designs22-onboarding-screen-mobile-app-designs21-onboarding-screen-mobile-app-designs24-onboarding-screen-mobile-app-designs25-onboarding-screen-mobile-app-designs26-onboarding-screen-mobile-app-designs29-onboarding-screen-mobile-app-designs27-onboarding-screen-mobile-app-designs30-onboarding-screen-mobile-app-designs28-onboarding-screen-mobile-app-designs32-onboarding-screen-mobile-app-designs31-onboarding-screen-mobile-app-designs33-onboarding-screen-mobile-app-designs34-onboarding-screen-mobile-app-designs36-onboarding-screen-mobile-app-designs37-onboarding-screen-mobile-app-designs35-onboarding-screen-mobile-app-designs38-onboarding-screen-mobile-app-designs

Смотрите также:

30 примеров незабываемых логотипов

24 лучших дизайна портфолио за апрель

30 Волшебных иллюстраций весны. Смотри сердцем

Общие принципы в создании мобильных приложений для начинающего UX/UI-дизайнера / e-Legion corporate blog / Habr

Привет! После предыдущих моих постов мне часто писали ребята, которые начинают изучать тему UI/UX. Это так классно, спасибо вам! И в этой статье я делюсь принципами, которые будут интересны и полезны новичку.

Начинать знакомство с приложением через onboarding  —  хорошо. Для чего это нужно? Когда пользователь скачивает приложение, он «примерно» представляет себе функционал. При старте удобно показать основные функции приложения, чтобы пользователь не путался и начал им пользоваться.

Ещё они нужны, когда выходит классное обновление в приложении, и грех его не выделить.

Яндекс.Транспорт рассказывает о новых фишках.

Среднее количество слайдов 3-4, больше читать неинтересно.

iOS , Android , Windows  —  у каждой оси есть своя «модель поведения», т.е. все пользовательские сценарии зачастую отличаются друг от друга, и чтобы лучше понимать логику каждой платформы, необходимо смотреть гайды и приложения на устройствах.

Например, в iOS основное меню находится снизу в Tab bar, а в Android –– это боковое меню.

Пример отображения экрана на iOS и Android.

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

9-ая операционная система поддерживается не на всех устройствах, т.е. рисуя макеты для iPhone 6, используя шрифт SF, необходимо понимать, что у некоторых пользователей будет старая добрая гельветика. (Это нестрашно, разве что, может помешать в максимальном значении символов в одной строке)

В принципе, разница не раздражает, а кому-то и совсем не видна.

Использовать прилипающую кнопку в дизайне не стоит. Это связано с тем, что она хорошо смотрится на продуманном (прорисованном) макете, но на других экранах перекрывает большую часть вместе с клавиатурой. Тут есть два выхода:

— продумать решение для всех разрешений, нарисовать и передать разработчику все спецификации;

— использовать другую кнопку.

Один экран на разных разрешениях.

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

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

Шрифт (android)

Недавно я столкнулась с тем, что в Аndroid каждая компания задает свой шрифт, т.е. может получиться такая ситуация, что в модели нет шрифта roboto. Или пользователь установил свой шрифт в смартфоне (рукописный или др.). Что делать в этом случае? Идеальная картина на nexus, это слишком маленький процент, чтобы ориентироваться только на него.

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

А ещё можно встретить вот такие баги.

Здесь ситуация ещё интереснее, чем в iOS. Размеров смартфонов даже в одной ветке (XH, например) много, и сделать на всех устройствах идеально невозможно. Но может помочь выработка принципа отображения элементов. Как вариант, выяснить для себя, что отображение функций на экране девайса 2:1 и передать эту информацию разработчику.

Тут стоит не забывать проработать момент с клавиатурой и набором текста.

Пожалуйста, любите детали!

Вы знали, что клавиатуру в iOS по-хорошему сворачивать нельзя, если она появляется по умолчанию, а в Android можно? И тогда остается пустое, незаполненное пространство.

Если у вас остались вопросы или вы считаете иначе, то я буду рада пообщаться с вами! И спасибо вам за ваши комментарии!

Мой e-mail: [email protected]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *