Для дизайнеров Android является скользкой темой, когда дело доходит до дизайна приложений. Как бы дизайнерам не хотелось бы думать, что это IOS мир, в котором все озабочены iPhone, iPad и App Store, уже никто не может игнорировать Android, в настоящее время он занимает большую долю рынка, и используется на всем, от планшетов до читалок книг. Короче говоря, платформа Google Android быстро становится повсеместой, и бренды начинают ее замечать.
Но давайте посмотрим на него. Множество Android- устройств и форм-фактороров заставляют чувствовать себя при проектировании дизайна как во время тяжелой битвы. А его загадочная документация – тяжелая отправная точка для разработки и дизайна хороших приложений. Поискав ресурсы по дизайну Android, вы найдете не много материала, чтобы руководствоваться ним.
Если это чувство препятствует (и если это причина, по которой вы не проектировали приложения для Android), вы не одиноки. К счастью, Android начинает решать вопросы с множеством устройств и размерами экрана, а производители устройств медленно приближаются к стандартизации, которая будет в конечном итоге уменьшать сложность.
Эта статья поможет дизайнерам ознакомиться с тем, что они должны знать, чтобы начать работать с Android и правильно делать дизайн графики команде разработчиков. Темы, которые мы рассмотрим:
- Прояснение плотности Android экрана
- Обучение основам дизайна Android с помощью шаблонов проектирования
- Дизайн графики, которая нужна вашим разработчикам,
Android смартфоны и размеры экранов
При запуске любого digital -дизайна, понимание аппаратной части – первая хорошая мысль. Для IOS приложений, это были бы iPhone и IPod Touch. Android, тем временем, охватывает десятки устройств и маркетов. С чего же начать?
Первый экран смартфона, который поддерживал Android был T-Mobile G1, первое коммерчески доступное Android-устройство которое имело HVGA экран размером 320 х 480 пикселей.
HVGA означает “половинного размера Video Graphics Array” (или половинного размера VGA) и стандартного размера дисплей для смартфонов на сегодняшний день. IPhone 3GS, 3G и 2G используют те же конфигурации.
T-Mobile G1
Чтобы не усложнять, Android разбивает физические размеры экрана (измеряется как длина диагонали экрана от левого верхнего угла в правый нижний угол) на четыре общих размера: маленький (ldpi), нормальный (mdpi), большой (hdpi) и очень большой (xhdpi) .
Два обычных размера экрана Android
320 × 480 считается «нормальным» размером экрана Android. Что же касается «очень большого» – это планшеты. Тем не менее, самый популярный Android смартфон на сегодняшний день имеет размер WVGA (т.е. широкий VGA), 800× 480 пикселей, HD дисплей. Итак, «норма» быстро меняется. Сейчас мы будем считать, что большинство Android смартфонов имеют большие экраны.
Схема различных конфигураций экрана, которые можно получитьв эмуляторе Android SDK
Разнообразие размеров дисплеев может быть сложной задачей для проектировщиков, которые пытаются создать один размер подходящий всем макетам. На сегодняшний момент лучший поход заключаетсяся в разработке одного набора макетов для 320х480 физических пикселей, а затем ввод пользовательских макетов для других размеров экрана.
Хотя это создает больше работы для дизайнера и разработчика, чем больше физический размер экрана больших устройств, таких как Motorola Droid и HTC Evo, тем больше может потребоваться внесений изменений в базовые макеты, которые улучшат использование приложения на большом устройстве.
Что нужно знать о экранной плотности
Размеры экрана составляют лишь половину картины! Разработчики ссылаются не на разрешение экрана, а на его плотность. Вот как Android дает определения в своем руководстве для разработчиков :
- Разрешение
Общее число физических пикселей на экране. - Экранная плотность
Количество пикселей в физической области экрана, как правило, называют DPI (точек на дюйм). - Плотность-независимая точка (DP)
Это виртуальная единица-пиксел, которую вы будете использовать при определении интерфейса макета, чтобы сделать размеры макета или его положения плотность-независимым образом. Плотность-независимая точка эквивалентна одному физическому пикселю на 160 DPI, которая является базовой плотностью и берется в системе как «средняя» плотность экрана. Во время работы система фоново обрабатывает любое масштабирование единиц DP по мере необходимости, исходя из фактической плотности использованого экрана. Преобразование единиц DP на экране пикселей проста: пиксел= DP * (DPI/ 160). Например, на экране 240 DPI, 1 DP равна 1,5 физических пикселей. Всегда используйте DP-единицы при определении пользовательского интерфейса приложения, чтобы убедиться, что пользовательский интерфейс отображается правильно на экранах с различной плотностью.
Это немного запутанно, но это то, что вам нужно знать: как и размеры экрана, Android делит экран плотности на четыре основных плотностей: ldpi (низкий), mdpi (средний), hdpi (высокий), и xhdpi (дополнительный высокий). Это важно, поскольку вам необходимо предоставить все графические ресурсы (растровые изображения) в наборах различной плотности. По крайней мере, вам нужно доставить mdpi и hdpi наборы для любого смартфон-приложения.
Это означает что, вся растровая графика должна быть масштабируемой в сторону увеличения или уменьшения относительно базового размера (320 х 480) экрана макета (примечание: есть также способ для рендеринга SVG файлов, что обеспечивает возможность масштабирования векторной графики на экранах разных размеров и плотностей без потери качества изображения).
Растровые требования аналогичны подготовке графики для печати по сравнению с вебом. Если у вас есть опыт работы с печатной продукцией, вы знаете, что 72 dpi изображение будет выглядеть очень неровно и размыто при масштабировании и печати. Вместо этого, вам нужно будет переделать изображение в векторное или использование фотографию высокого разрешения, а затем сделать файл разрешением 300 dpi для того, чтобы напечатать без потери качества изображения. Экран плотности для Android работает аналогично, за исключением того, что мы не меняем разрешение файла, только размер изображения (т.е. остается стандартное 72 dpi ).
Допустим, вы взяли растровые иконки размером 100 × 100 пикселей с одного из ваших базовых экранов (помните, “базовым” является макет 320 × 480). Размещение этой же 100 × 100 иконки на устройство с экраном ldpi привело бы к тому, что значек появился бы большим и размытым. Аналогичным образом, разместив его на устройство с экраном hdpi его вид был бы слишком мал (в связи с устройством, имеющим больше точек на дюйм, чем экран mdpi).
Для настройки для различных плотностей экране устройства, мы должны следовать соотношению масштабирования 3:4:6:8, соответственно четырем размерам плотности. (Для iPhone, это легко: это просто соотношение 2:1 между 4 и iPhone 3GS) Используя наши соотношения и простую математику, мы можем создать четыре различные версии нашего растрового изображения, чтобы передать их в руки наших разработчиков.
- 24 × 24 для экранов низкой плотности (т.е. × 0,75);
- 32 × 32 для экранов средней плотности (наш базовый 1 × 1 );
- 48 × 48 для экранов с высокой плотностью (× 1,5);
- 64 × 64 для экранов очень высокой плотности (× 2,0). (Мы делаем только ldpi, mdpi и hdpi для Android смартфон-приложений)
Размеры иконки для различных экранов Android
После того как вы нарисовали всю графику, вы можете организовать свою графическую библиотеку следующим образом:
Как можно организовать материалы, при разработке дизайна Android-приложения
Можно перепутать, где и сколько ставить dpi (пикселей на дюйм). Просто ставьте их в стандартные 72 dpi, и размер изображения соответственно.
Использование шаблонов дизайна для Android
Клиенты часто спрашивают, могут ли они использовать свой iPhone приложение дизайн для Android. Если вы ищете быстрый и простой способ создания приложений для мобильных веб-браузеров, использование чего-то вроде Webkit и HTML5, пожалуй, лучший выбор. Но для получения родного Android приложения, ответ будет отрицательным. Почему? Поскольку стандарты пользовательского интерфейса Android отличаются от iPhone.
Большое отличие – кнопка «Назад» для навигации на предыдущие страницы. Кнопка Назад на Android-устройствах фиксирована и всегда доступна для пользователя, независимо от приложения. Это либо физическая часть устройства или цифровая, которая крепится к нижней части экрана, независимо от любого приложения, как и в недавно выпущенной ОС Android 3.0 для планшетов (подробнее об этом позже).
Кнопка Назад в смартфоне Nexus
Наличие кнопки Назад вне приложения оставляет пространство для других элементов в верхней части экрана, такие как логотип, название или меню. Эти навигационные стандарты сильно отличаются от таких же в iOS, есть еще и другие отличия, которые Android называет «шаблоны проектирования» или «паттерны». По Android, паттерн – «общее решение повторяющихся проблем». Ниже приведены основные паттерны Android, которые были введены в версии 2.0.
Dashboard
Эта модель решает проблему необходимости перемещаться на несколько слоев в приложении. Он обеспечивает решение стартовую площадку для сложных приложений, таких как Facebook или LinkedIn .
Android dashboards
Action Bar
Панель действий является одним из наиболее важных дизайн-паттернов и отличий Android. Это работает очень похоже на обычную ленту сайта, с логотипом или названим, как правило, слева и элементами навигации справа. Гибкий дизайн панели действий позволяет закрепить меню и расширенить поле поиска. Это обычно используется в качестве глобальной функции, а не в единичном контексте.
Android pattern – Twitter action bar
Панель поиска
Дает пользователю простой способ осуществлять поиск по категориям, а также предоставляет варианты поиска.
Дизайн шаблона строки поиска, используемый в приложение Google Search Appliance.
Быстрые действия
Этот паттерн похож на поп-ап IOS, что дает пользователю дополнительные опции действий. Например, нажав фотографию в приложении, можно вызвать панель быстрого действия, которая позволяет пользователям обмениваться фото.
Companion Widget
Виджеты позволяют приложениям для отображать уведомления на экране запуска пользователя. В отличие от пуш-уведомлений в IOS, которые ведут себя как временные модальные диалоги, Companion виджеты остаются на экране запуска. (Совет: чтобы выбрать виджет для вашего устройства Android, просто нажмите и удерживайте пустое место на одном из экранов запуска.)
Виджет Twitter одной из тем оформления Android
Использование стабильных паттернов является важным для поддержания интуитивного опыта и знакомства с платформой для пользователей. Пользователи не желают приложений в духе iPhone на своем устройстве Android также, как пользователи Mac не хотят программ в духе Microsoft в своей среде Mac OS. Понимание шаблонов проектирования является первым шагом к изучению «языка» Android и проектированию оптимальных пользовательских интерфейсов для своих пользователей. Ваши разработчики также скажут вам спасибо!
Android-дизайн, конечный продукт
Итак, вы создали ваше Android-приложение и готовы сделать его реальностью. Что нужно передать разработчикам? Вот краткий перечень материалов:
- Расписаные вайфреймы пользовательских интерфейсов на основе базового большого размера экрана 320 х 533 физических пикселей. Включая любые дополнения и обьяснения экранов для случаев, когда больший или меньший (320 х 480) размер экрана требует изменение макета или если того требует пейзажная версия.
- Визуальный дизайн макетов основных экранов WVGA(320 х 533) большого размера. Экраны (для физического размера WVGA-разрешений экрана 800 х 480 hdpi пикселей) в дополнение к любым пользовательским макетам, необходимых для других размеров экрана.
- Спецификации для интервалов, размеров и цветов шрифта, а также информация о любых растровых изображениях.
- Графическая библиотека с ldpi, mdpi и hdpi версиями всех растровых изображений сохраненные как прозрачные файлы PNG.
- Разные размеры иконки приложения, включая значок запуска приложения, как прозрачных файлов PNG. Android уже дал отличные советы для дизайнерам на эту тему, наряду с некоторыми файлами доступными для загрузки, в том числе графических PSD шаблонов и других штучек.
Источник: Smashingmagazine
