Анна Осипова

Дизайн мобильных приложений

2018-12-07T11:34:50.484Z

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

Прежде чем приступить к дизайну, вы должны изучить существующие модели (шаблоны) дизайнов, и начать свой проект с “пользовательской точкой зрения” в голове. Задайте себе вопросы: «Какая главная цель моего приложения?”, “Сколько и какие наиболее важные разделы моего приложения”, “Какие действия должны быть доступны пользователю при использовании приложения?». Это вопросы, которые помогут вам выбрать шаблон и определить его базовую структуру.

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

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

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

Apple благородные ребята и предоставляют нам эти шаблоны прям на своем сайте можете скачать их без каких либо трудностей, вот ссылка https://developer.apple.com/design/resources/

Так же важной отличительной особенностью является разрешение экранов. Как вы знаете у большинства телефонов разное разрешение, в Свою очередь мы предлагаем разработки для самого распространенного экрана - 750 пкc

Начиная с iOS 7 яркие цвета стали лицом iOS (кому-то это нравится, кто-то это ненавидит). Вы можете использовать любые цвета для создания своих дизайнов. Лично я советую не увлекаться использованием большого количества пестрых цветов, потому как это может сбивать пользователя. Оптимально будет использовать 1-2 два основных цвета и 1-2 вспомогательных

Одна из важнейших частей работы с мобильным приложением это проработка навигации. А точнее верхнего и нижнего меню. Есть ряд стандартных правил , которым следуют все приложения. Это упрощает жизнь пользователя и нашу с вами. Мы всегда знаем, где искать кнопку «назад». Вот несколько из них:

Элементы панели навигации всегда должны располагаться в определенных местах:

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

У приложений на ios всегда есть нижнее меню с основным функционалом. Для нижнего меню используется 5 иконок, желательно с подписями, если ваш продуй новый и иконки не совсе отражают суть.

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

Кнопки

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

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

Хочу отметить, что все кнопки должны быть в выдержанном стиле. Желательно не делать больше 2х вариантов кнопок, единственное отличие может быть в цвете фона кнопки. Это правило возникло из-за того, что пользователь запоминает первые варианты кнопок, и когда сталкивается с противоположным стилем не воспринимает элемент как кликабельный. Другой причиной является то, что поддержание стиля является обязательным для любого продукта вне зависимости от того приложение это или сайт. Я уже писала о том то что лучше использовать простые варианты, плоские кнопки с однотонной заливкой, дизайн все больше поддается минимализму.

Отступы и их пропорциональность

Современный дизайн лёгок, прост и “насыщен воздухом”. Он наполнен дыханием. И не самую последнюю роль в формировании этих ощущений играют отступы. Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности. Я определяю для себя N пикселей в качестве базисного отступа, когда начинаю новый проект. Затем я использую 2N, 3N и так далее пропорциональность для создания визуального баланса, если где-то требуется бОльший отступ.

Хороший пример, когда дизайнер более менее соблюдает пропорциональность отступов:

Улучшение юзабилити с использованием знакомых пользователю схем

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

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

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

1 Telegram

2 App Store

3 iTunes

4 Trulia

5 Сбербанк

6 Airbnb

7 Qiwi

8 Joom

Эмпирическая слепота

2018-10-21T14:21:44.007Z

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

Время на осмысление картинки

Теперь посмотрите оригинал картинки, а после вернитесь к стилизации.

Теперь посмотрите на картинку до ее обработки. Как вы видите - это змея, теперь вернитесь к стилизованному изображению. После увиденного оригинала, как вы воспринимаете стилизацию?

Теперь, скорее всего, вы ясно видите змею и на первом изображении тоже.

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

Но в действительности, на первой картинке просто кляксы, и змеи там нет.

Мозг делает предположение, что это тоже змея.

Мы часто применяем подобные приемы по отношению к интерфейсам.

После использования сайтов на протяжении большей части жизни мы накапливаем огромное количество паттернов. Мы знает, что слово со стрелочкой - это скорее всего кнопка, которая приведёт нас на другую страницу. Знаем, что при клике на логотип мы скорее всего попадем на главную страницу и т.д. Все это простые примеры, с которыми мы сталкиваемся каждый день. Не смотря на уникальный опыт каждого из нас есть определенный набор паттернов, который каждый понимает после многократного использования. Чтобы привить пользователю новый опыт по использованию интерфейса достаточно показать ему как именно работает ваш функционал. Подобно примеру со змей, после того, как пользователь увидит пример работы с интерфейсом, его восприятие сразу изменится. Такие приемы часто использовались пару лет назад, например: когда вы попадаете в интернет-магазин проигрывается небольшая анимация с перетаскиванием товара в корзину. Увидев один раз, мозг сразу перестраивает свое восприятие. Теперь пользователь знает, что товар можно просто перенести в корзину без перехода в карточку товара.

Такие же свойства есть и у звука.

Ваши уши могут воспринимать слова, в зависимости от того, что вы слышали раньше.

Недавно интернет порадовал нас новой головоломкой. Разные люди слышат разные слова на одной записи подробнее - http://www.rosbalt.ru/like/2018/05/16/1703484.html

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

Хорошего дня.

Почему нас привлекают информационные панели?

2018-09-24T12:03:11.337Z

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

1 Дает вам четкое представление о вещах, чтобы помочь установить чувство уверенности. Использует точные цифры.

2 Предоставляет вам ресурсы для прогнозирования и планирования будущего.

3 Помогает выполнить задачи вовремя, чтобы избежать паники

4 Не приходится напрягаться и использовать короткосрочную память, все итак перед вашими глазами

Чем меньше мы задействуем короткосрочную память, тем проще воспринимаем информацию.

Простой пример табличной подачи и графика.

Предоставление обзорного / итогового экрана с деталями детализации

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

Разделение данных по вкладкам и размещение всех связанных данных на одной вкладке

Это помогает пользователю структурировать информацию и снизить когнитивную нагрузку. Информацию легче анализировать.

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

Ключевые особенности мобильной версии

2018-09-24T11:47:00.042Z

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

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

Давайте посмотрим как выглядит сайт без мобильного дизайна и с ним:

Как вы можете заметить есть принципиальные отличия:

1 В мобильной версии изменяются только стили, а не содержимое.

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

2 Информацию нужно размещать максимально понятно, не мельчить, всегда лучше сделать 2 простых экрана чем 1 сложный. Это намного упростить пользователю жизнь.

3 Разрешение 750 пикселей по ширине.

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

4 Сайты, оптимизированные для мобильные устройства, занимают более высокие позиции в поисковых выдачах. Гугл и Яндекс не имеют четкого свода правил для мобильной версии, но можно провести тестирование своего сайта. Одним из ключевых параметров является размер шрифта, кегель должен быть на меньше 30 px или 20-25 для незначительных подписей. Сделайте межстрочный интервал больше, чем обычно тогда читать будет удобнее. Сложность в том чтобы разместить на баннере большое количество текста. Для этого требуется сильно увеличить пропорции баннера по вертикале, а шрифт сделать крупным и максимально контрастным фону.

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

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

7 Все значки и кнопки увеличиваются минимум в 2 раза в сравнении с десктоп версией.

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

8 Раскрытые фильтры или сортировки в десктоп версии можно скрыть под одной кнопкой «фильтры». Вы можете посмотреть пример на сайте «связной» в каталоге.

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

9 Гибкая сетка — один из отличительных признаков хорошего адаптивного дизайна. Пять столбцов превращаются в два на мобильных устройствах. Можно увидеть не примере Беханса или Дрибббл.

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

В заключении:

Google активно тестирует алгоритм выдачи Mobile First. Это означает, что в скором времени поисковики будут воспринимать мобильную версию сайта как «основную».

https://search.google.com/test/mobile-friendly

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