Android – это одна из самых привлекательных платформ, однако не все разделяют энтузиазм разработчиков. Чтобы создать приложение, которое великолепно выглядит и хорошо ведет себя на сотни мобильных устройств с различными комбинациями размера экрана и плотностью пикселей нужен большой опыт работы. Разнообразие мобильных устройств на Android обеспечивает множество проблем даже самым опытным разработчикам.
Есть сотни устройств Android с различными размерами экрана и разрешением.
В компании Novoda, мы создаем Android программы для брендов, стартапов и производителей мобильных устройств. Мы часто работаем с визуальными дизайнерами, а ведь направление визуального дизайна является новым для Android. Новый сайт Android Design – основной ресурс, который мы рекомендуем посетить, если вы заинтересовались этой темой. Визуальный дизайн – это еще не все, чтобы мы хотели попробовать в своей работе с устройствами на Android. Основной нашей целью является создание приложений, которыми бы люди любили пользоваться. А продуманный визуальный дизайн поможет нам в этом.
Эта статья предлагает ряд практических советов и соображений относительно дизайна, как составляющей части создания приложения для мобильных устройств. Я старался включить в нее максимально большое количество интересных советов и полезных предложений.
Пиксели
Визуальный дизайн является чрезвычайно важной составляющей для мобильных приложения высокого уровня. Как минимум визуальный дизайн улучшает юзабилити. Большинство разработчиков часто ориентируются на шаблоны интерфейса пользователя, визуальные редакторы практически никогда этого не делают. В своей работе визуальные редакторы используют высококачественные макеты, большое количество графических ресурсов и многое другое, для того чтобы используя конечный продукт пользователь испытывал наслаждение.
Уровень приятности
Android — это платформа, на которой работают мобильные устройства с различной плотностью экрана. Не существует универсального набора решений. Разработчикам приходиться учитывать множество факторов.
Оптимизация графики для различных плотностей экрана.
Но не всегда удобно оптимизировать графические ресурсы для каждой плотности экрана. Платформа достаточно хорошо умеет масштабировать ресурсы. Тем не менее, перед запуском очередного продукта важно тестировать его в первую очередь на самых слабых и старых моделях, чтобы избежать неприятных неожиданностей.
Не забывайте о режимах
Touch режимы являются важным подтверждением кликов и взаимодействия пользователя с мобильным приложением. Особенно важно помнить о режимах при настройке виджетов, например кнопок. Важную роль режимы играют и при получении пользователем обратной связи от мобильного приложения.
Размер тоже важен. Недостатками сенсорного управления является то, что часто пальцы, во время взаимодействия с экраном, закрывают часть пользовательского интерфейса. Именно поэтому сенсорные кнопки должны быть не более 45 пикселей в ширину и высоту.
Использование шрифтов
У Android есть два шрифта: Droid Sans и Roboto.Roboto, которые были выпущены в Ice Cream Sandwich (Android 4). Они отлично подходят для небольших экранов мобильных устройств. Однако, вы можете не ограничиваться только использованием Roboto или Droid Sans. Любой из шрифтов можно использовать в приложении в формате TTF.
Roboto — это новый шрифт для Android, впервые использованный в Ice Cream Sandwich.
Использование 9-patch Drawables
9-patch Drawables позволяет использовать формат PNG, чтобы растягивать и масштабировать изображения. Маркировка вдоль верхнего и левого краев определяет области растягивания.
Создание масштабируемых виджетов с помощью Draw 9-patch.
Можно создать 9-патчи вручную, но Android SDK предоставляет хороший простой инструмент под названием Draw 9- patch. Он позволяет быстро и легко конвертировать PNG. Для удобства разработчика в нем отображается превью с результатами.
Handle Design Legacy
Honeycomb (Android 3) и Ice Cream Sandwich (Android 4) в значительной степени модернизировали визуальный дизайн Android с темой Holo. Однако некоторые производители мобильных устройств имеют плохую репутацию. Связано это с тем, что некоторые устаревшие модели никогда не будут поддерживать Ice Cream Sandwich.
Приложение Meetup отлично работает вмести виджетами Gingerbread (Android 2.3) и Sandwich Ice Cream.
Так что же можно сделать? Существует два варианта. Первый из них, это адаптация текущего внешнего вида, свойств и функций мобильного приложения для всех устройств, поддерживающих Android. Второй вариант – это использование отдельного набора виджетов для Gingerbread и других. Оба подхода являются действенными. Но что предпочтет ваш пользователь современный вариант или привычную классику?
Витрина бренда
Иногда клиенты опасаются, что использование уже известных вариантов дизайна пользовательского интерфейса сведут на нет индивидуальность их мобильных приложений. Я в целом с ними согласен. Такие элементы, как, например, панель управления, настолько популярны, что стали отходить на задний план. Без привычной панели управления пользователь тратит больше времени, пытаясь понять, как пользоваться новым мобильным приложением. В тоже время он может оценить элегантные решения навигации без использования стандартной панели управления. Приобретение такого пользовательского опыта является для бренда наиболее ценным аргументов в пользу разработки новых уникальных пользовательских интерфейсов.
Оригинальные приложения для интуитивной навигации.
Бренд может быть выражен через дизайн иконок, виджеты, выбранные цвета и шрифты. С помощью тонкой настройки стандартных виджетов можно добиться отличного баланса между ценностями бренда и согласованностью мобильного приложения с платформой.
Создание высокоточного макета
Высокоточные макеты — это лучший способ взаимодействия между визуальными дизайнерами и разработчиками мобильного приложения. На сайте Android Design Preview представлены шаблоны в PSD и других форматах. Важным в процессе разработки мобильного приложения является и испытание макетов на реальных мобильных устройствах, чтобы подтвердить, их работу в сочетании с компонентами пользовательского интерфейса. Инструмент Android Design Preview позволяет отражать макеты непосредственно в вашем любимом программном обеспечении для Android.
В идеале работа над макетами – это разработка макета под каждое мобильное устройство, с учетом его особенностей и функционала.
Шлифовка
Обращайте внимание на ключевые моменты. Как разработчик, я всегда предпочитаю работать с активными дизайнерами, чем с теми, которые долго разрабатывают макеты, а потом исчезают.
Анимированные переходы обеспечивают некоторую визуальную красоту, чего зачастую не хватает многим мобильным приложениям, работающим на Android. Как правило, разработчики не задумываются над внешней привлекательностью мобильного приложения, если этот пункт не указан в плане работы. Я советую всегда учитывать визуальную привлекательность в процессе разработки мобильного приложения. Анимация также развлекает пользователя, когда мобильное приложение заставляет его ждать.
Пользовательский опыт
Android имеет свои шаблоны и конвенций, как и любая другая платформа. Эти шаблоны уже давно сформировали ожидания пользователя по поводу того, как должно выглядеть и вести себя новое мобильное приложение. Поэтому перенос опыта IOS непосредственно на платформу Android почти всегда дает в результате бедный пользовательский опыт.
Возвращаемся к соответствиям Android с другими платформами. Данный макет кнопки возврата является нормой только для iOS.
Кнопка возврата является лучшей иллюстрацией различий между такими платформами как Android и IOS. Все Android устройства имеют аппаратную кнопку возврата на панели самого мобильного устройства. Эта особенность телефонных аппаратов работающих на этой платформе. Поэтому любой пользователь мобильных устройств на Android будет удивлен, обнаружив такую кнопку в меню управления приложением на своем гаджете. Именно поэтому, адаптируя мобильное приложения с одной платформы под другую, обращайте внимание на такие детали.
Пользовательский интерфейс
На самом простом уровне, мобильные приложения состоят из стека экранов. Вы можете перемещаться в стек, используя кнопки, иконки и меню управления.
Когда у вас на экране мобильного приложения отображается меню управления и иконка приложения в левой части панели, вы находитесь на верхнем уровне мобильного приложения. Используя меню, вы передвигаетесь по иерархии приложения.
Тестирование прототипов вашего мобильного приложения на реальных мобильных устройствах позволяют проверить работу продукта в реальных средах. Это может занять много времени и усилий, но в результате поможет выявить ошибки.
Следуйте требованиям платформы
Готовые макеты пользовательского интерфейса являются вашими друзьями. Пользователи редко хотят учиться чему-то новому, знакомые шаблоны, как правило, сразу привлекают их внимание. Так как в них уже содержаться намеки и подсказки по взаимодействию с новым мобильным приложением.
Меню управления широко применяется в шаблонах Android. Оно говорит вам, где вы находитесь и что вы можете сделать. Такие примеры родных шаблонов как Honeycomb и Action Bar Sherlock доступны даже для старых моделей телефонов, работающих на Android.
Пример меню управления в шаблоне Android.
Также популярным является шаблон с использованием инструментальной панели. Как правило, инструментальная панель представляет собой сетку иконок, с помощью которой пользователь запускает то, или иное мобильное приложение. Панель обеспечивает верхний уровень навигации, и описывает основное направление мобильного приложения.
Я разрабатывал приложение Songkick в котором мы использовали панель, чтобы продемонстрировать пользователю функции приложения. Каждая функция сопровождалась соответствующим изображением.
Шаблон с использованием рабочей среды может быть реализован с помощью компонента ViewPager. В результате перед пользователем появляется два меню, которые разделяют экран пополам. Часто этот шаблон используют в сочетании с вкладками.
ViewPagers позволяет пользователям листать меню, используя палец, в …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров