Стиль. Шрифтовое оформление

Загрузить Roboto
Андроид использует традиционные инструменты шрифтового оформления: масштаб, интервал, размер и выравнивание по основной сетке. Правильное использование этих инструментов необходимо, чтобы помочь пользователям быстро понять информацию на экране. Для поддержки использования шрифтового оформления, в версии Андроида Ice Cream Sandwich введено  новое семейство шрифтов под названием Roboto, созданное в соответствии с требованиями пользовательского интерфейса (UI) и экранов с высоким разрешением.
Существующий TextView предлагает Roboto в тонком, лёгком, нормальном и жирном шрифте вместе с курсивным стилем для каждого шрифта.Также TextView предлагает шрифт Roboto Condensed в нормальном и жирном весе и курсив для каждого веса.
Маленькая методичка по Roboto

Типы цветов по умолчанию

Андроид UI использует следующие стили цветов по умолчанию: textColorPrimary и textColorSecondary. Для лёгких тем используется textColorPrimaryInverse и textColorSecondaryInverse. Стиль цвета текста также поддерживает варианты для состояний, когда пользователь прикасается к элементам. 

Масштаб шрифта

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

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

Стиль. Метрика

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

• Размер экрана телефона (меньше 600DP) и планшета (больше или равно 600DP)
• Плотность экрана LDPI, MDPI, HDPI, XHDPI и XXHDPI.

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

В ритме 48dp

Область прикосновения элементов пользовательского интерфейса, как правило, равна 48dp. 

Почему 48dp?

Если перевести на физический размер, то 48dp это примерно 9 мм (значение немного варьируется). Это значение находится в области комфорта (7-10 мм) для сенсорных элементов, и пользователь сможет  управлять ими с помощью пальцев. 

Если элементы вашего интерфейса будут 48dp в высоту и ширину, то вы сможете гарантировать, что:

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

Следите за пробелами

Расстояние между элементами - 8 миллиметров.

Пример

Стиль. Обратная связь прикосновений

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

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

Состояния

1. В нормальном состоянии: неизменное состояние
2. В нажатом состоянии: подсвечивающее цветом
3. Сфокусировано: закрашено на 50%, рамочка 2DP
4. Нельзя выбрать: закрашено на 30% от нормального состояния
5. Нельзя выбрать и сфокусировано: закрашено на 30% от состояния фокусирования

Большинство элементов пользовательского интерфейса Андроид имеют встроенную обратную связь на сенсорные прикосновения.

Средство общения

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

Границы

Когда, при прокручивании, пользователь пытается уехать за верхнюю или нижнюю границы экрана, покажите это с помощью визуальной подсказки. Например, если пользователь пытается "уехать" за пределы первой панели домашнего экрана, содержимое экрана наклоняется вправо чтобы указать, что дальнейшая прокрутка в этом направлении невозможна. Многие из прокручиваемых элементов системы Андроид (например ListView),  уже имеют встроенную визуализацию границ. Если вы создаёте свой прокручиваемый элемент, не забудьте визуализировать границу элемента.

Стиль. Темы.

Темы - это некоторый механизм в системе Андроид, отвечающий за стиль приложения или активити (Activity). Стиль определяет визуальные характеристики элементов пользовательского интерфейса, такие как цвет, высота, отступы, размер шрифта. В целях обеспечения слаженной работы всех приложений платформы, Андроид предоставляет три темы, которые можно выбрать при создании приложения для версии Андроида  Ice Cream Sandwich:

1. Holo Light (светлый)
2. Holo Dark (тёмный)
3. Holo Light with dark action bars (светлый с тёмной панелью управления)

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

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

Для получения информации, как использовать системные темы и создавать собственные темы см. Стили и Темы в руководстве по API.

Стиль. Устройства и дисплеи.

В мире несколько миллионов телефонов, планшетов и других устройств с широким разнообразием размеров и форм дисплеев, работающих на базе ОС Андроид. Для создания приложений, которые хорошо смотрятся на больших планшетах и маленьких телефонах, используют систему "гибкого макета".

• Будьте гибкими. Растягивайте и сжимайте макеты для для обеспечения различной высоты и ширины.
• Оптимизация макетов.  Пользуйтесь дополнительным пространством на более крупных устройствах. Создавайте такие структуры элементов, которые объединяют много контента  и простоту навигации.
• Ресурсы для всех. Добавляйте ресурсы для экранов с различной плотностью (DPI), чтобы ваше приложение отлично смотрелось на любом устройстве.

Стратегия

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

Проектирование приложение. Обзор пользовательского интерфейса.

Обзор пользовательского интерфейса.

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

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

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

Главный экран. Все приложения. Недавно открытые приложения

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

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

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

Элементы системного "меню"

1. Status bar (панель состояния)
отображает уведомления слева и время, уровень заряда батареи, уровень сигнала справа. Проведите от строки состояния вниз и перед вами откроется экран с детальным описанием уведомлений.
2. Navigatin bar (панель навигации)  появилась в версии Андроид 4.0 и только на тех устройствах, на которых нет традиционных аппаратных кнопок. На ней традиционно располагаются кнопки: назад, домой, недавние. Также располагается кнопка меню для приложений Андроид версии 2.3 и более ранних версий.
3. Combined bar (объединяющая панель) объединяет панель состояния и панель навигации в одну и располагается на нижней части экрана.

Уведомления

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

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

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

Общие требования к приложению Андроид

Типичное андроид приложение состоит из Action  Bar (панель верхнего меню) и области приложения.

1. Main Action Bar (главная панель управления) - центр упарвления вашим приложением. Панель включает в себя элементы для навигации по иерархии вашего приложения и элементы для управления наиболее важными действиями в приложении.
2. View control (визуальный контроль) позволяет пользователю переключаться между различными режимами вашего приложения. Режимы обычно представляют различное размещение данных или различных функциональных аспектов приложений.
3. Content Area (область содержимого) - пространство, где отображается содержимое вашего приложения.
4. Split Action Bar (разделённая на части панель управления) обеспечивает управление приложением и располагается в нижней части экрана. В этом примере на нижней панели управления размещены важные элементы управления,  которые не поместились на главной панели управления.

Проектирование приложения. Принципы проектирования.

Принципы проектирования были разработаны опытной командой разработчиков, соблюдая интересы пользователей. Рассмотрите их и применяйте своё собственное творческое мышление.

1. Очаруй меня!

• Обрадуй меня необычным решением! Красивый интерфейс, осторожно расположенная анимация или своевременный звуковой эффект - вот залог хорошего приложения! Тонкие эффекты способствуют ощущению лёгкости и дают ощущение мощной силы в руках. 

• Изображения реальных объектов приносят больше удовольствие, чем обычные кнопки и меню. Позвольте людям непосредственно коснуться и манипулировать объектами в вашем приложении.  Это уменьшает умственные усилия, необходимые для выполнения задач, делая их более радостными.

• Позвольте мне сделать это своим! Люди любят добавлять что-то свое, таким образом они чувствуют себя комфортно. Обеспечьте изначальную разумность и красоту, а также добавьте необязательные настройки, которые не будут мешать первичной задаче.

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

    

2. Упрости мою жизнь! 

• Краткость - сестра таланта!  Используйте короткие фразы и простые слова. Вероятность, что пользователи пропустят предложение увеличивается с увеличением длины предложения.
• Картинки понятней, чем слова! Рассмотрите возможность использования изображения для объяснения идей. Они привлекают внимание пользователей и могут быть эффективней, чем слова.

• Решите за меня, но оставьте последнее слово мне! (Последнее слово за мной!) Выберите лучшее предположение и действуйте! Слишком большое число вариантов и решений делают пользователей несчастными. На всякий случай, если вы сделаете что-то неправильно, позвольте пользователю это отменить.
• Я всегда должен знать, где Я!  Люди должны понимать откуда и куда идут. Создавайте экраны, выглядящие по-разному, и используйте переходы, чтобы показать отношения между экранами. Отображайте прогресс выполнения задач.
• Никогда не теряйте данные! Сохраняйте то, на что люди потратили время, и обеспечьте доступ к этой информации с любого места. Запоминайте настройки, персональные характеристики и другие "творения" через телефон, планшет или компьютер. Это делает модернизацию самой лёгкой вещью в мире!
• Если "это" так выглядит, значит "это" так и должно делать. Помогайте людям понимать функциональные различия, делая объекты визуально различимыми. Избегайте сходства объектов, которые действую по-разному при одних и тех же входных данных.
• Отвлекай меня только тогда, когда это действительно важно! Как хороший помощник ограждай пользователя от неважных мелочей. Пользователи хотят оставаться сосредоточенными на своей деятельности, если это не критично и не срочно. Прерывания могут утомлять и расстраивать. 

    3. Удиви меня!

• Дай мне то, что работает везде! Люди хорошо себя чувствуют, когда они всё понимают. Сделайте ваше приложение лёгким для восприятия, используя визуальные модели и мышечную память из других приложений Андроид. Например, swipe жест может быть использован для навигации кнопок или экранов.
• Это не моя вина! Исправляйте пользователей нежно. Они хотят чувствовать себя умными, используя ваше приложение. Если что-то пойдёт не так, давайте чёткие инструкции для исправления, но избавьте пользователей от технических деталей. Если вы можете это исправить сами и не заметно, то это ещё лучше!
• Поощряйте!  Разделите сложные задачи на более мелкие, которые будет легче сделать. Высказывайте своё мнение о действиях.
• Делайте тяжёлую работу за меня! Сделайте так, чтобы новичок ощущал себя экспертом. Позволяйте им делать вещи, о которых они даже и не думали, что могут их сделать. Например, при объединении нескольких фотоэффектов можно сделать потрясающими любительские фотографии.
• Принимайте важные решения быстро!  Не все действия равнозначны. Решите, что самое важное в вашем приложении и сделайте это легкодоступным и быстрым в использовании, как кнопка спуска затвора в камере, или кнопка паузы в музыкальном проигрывателе.