Pull to refresh

Дизайнерский обзор Android 4.4 KitKat. Часть 1

Development for Android *


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



Экран блокировки


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


Слева — Android 4.3 Jelly Bean, справа — Android 4.4 Kit Kat

Во-первых, круг из точек внизу экрана, который активировал Google Now в Jelly Bean, был заменен на стрелку вверх. Стрелка может быть не столь изящная, зато более интуитивная.

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

Также немного изменился сам стиль виджетов экрана блокировки. И их теперь можно включить/выключить в Settings > Security.


Слева — Android 4.3 Jelly Bean, справа — Android 4.4 Kit Kat

Кроме того, часы в Kit Kat выполнены в начертании Thin, вместо Black: Thin (часы: минуты) в Jelly Bean. Тоже самое произошло и в системном приложении Clock, но об этом во второй части статьи.

При прослушивании музыки на весь экран блокировки показывается большая красивая обложка проигрываемого альбома.


Слева — [NICKELBACK] The best of Nickelback, справа — [NOIZE MC] Неразбериха

Рабочие столы


Итак, после разблокировки устройства, мы видим рабочие столы. На Android 4.4 они изменились полностью. Но касается это только Nexus 5, где в качестве launcher по умолчанию установлен Google Experience Launcher (GEL). Может, в скором будущем он появится и на других устройствах серии Nexus или как отдельное приложение в Google Play. Остаётся лишь запастись терпением… Либо установить GEL вручную, как говорится, на свой страх и риск.

Что же нового? Начнём с самого верха экрана.


Слева — Android 4.3 Jelly Bean, справа — Android 4.4 Kit Kat

Статус бар


Теперь он почти прозрачный, с всегда белыми иконками и часами. Это сразу бросается в глаза после Android 4.3, где статус бар был полностью черным с голубыми (#33B5E5) иконками, которые становились серыми в неактивных состояниях. Кроме того, маленькие стрелки активности интернет-соединения были перенесены в панель быстрых настроек.

Google Search


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


Android 4.4 Google Search

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


Android 4.4 — Google Search

Интересный момент в том, что Google Search — это и поиск, и launcher. Может быть в скором будущем, Google даст возможность заменять стандартные оболочки Samsung, HTC, LG на свой Google Experience Launcher. Поживем — увидим… но очень этого хотелось бы!

Google Now


В дополнению к стандартному жесту активации Google Now в Android 4.3, теперь на GEL его можно открыть, просто свайпнув слева направо.

В нижней части экрана добавились новые кнопки.


Слева — Android 4.3 Jelly Bean, справа — Android 4.4 Kit Kat

Пользователи могут перейти отсюда в Reminders, кастомизировать карточки или попасть в стандартные настройки через «три точки».

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

Например, в заголовке Action Bar используется all-caps Roboto Condensed. Как рассказал Matias Duarte (шеф дизайнеров платформы Android) в беседе с The Verge, этот доработанный шрифт дополнил семейство Roboto в Android 4.4.


Android 4.4 — Google Now

На скриншотах выше можно заметить небольшую особенность — новый оттенок синего (#4285f4), который используются везде в Google Now вместо стандартного Holo Blue (#33B5E5).

image
Android 4.4 — Новый синий?

Иконки и папки


Иконки на Nexus 5 пропорционально больше своих «коллег» на Nexus 4. Это сразу бросается в глаза. По таким иконкам, очевидно, легче попасть, говорит нам на это нововведение Google. Но превнесем немного конкретики в цифрах.


Android 4.4 — Иконки рабочего стола

У коллег из Android Design In Action в их видео, посвященному Android 4.4, есть замечательный слайд. Разберём его подробнее. В предыдущих версиях Android размер иконок на рабочем столе равняется 48 dp. Но на Nexus 5 иконки решили увеличить на 25%, поэтому размер иконки стал где-то 60 dp. То есть, так как экран Nexus 5 имеет плотность XXHDPI, 60 dp = 180 px. Соответсвенно, 48 dp x 4 (коэффициет для XXXHDPI) = 192 px, поэтому получается, чтобы иконка на Nexus 5 выглядела немыльной, нужно готовить её ресурсы для плотности экрана XXXHDPI.

Папки также претерпели визуальные изменения. Иконка папки теперь — полупрозрачаный белый круг. Когда вы нажимаете на неё, всплывает полупрозрачно белый pop-up. Кстати, в папках по-прежнему может находиться только 16 иконок. Слух о скролящихся внутри иконках не подтвердился.

И ещё один тонкий момент. На Android 4.4, если в папке больше 10 иконок, то pop-up располагается по центру рабочего стола. Тогда как на Android 4.3 он прижимался к тому углу, ближе к которому находилась папка.


Слева — Android 4.3 Jelly Bean, справа — Android 4.4 Kit Kat

И напоследок — подписи к иконкам теперь выполнены в Roboto Condensed. Очевидно, что в подпись влезет больше букв, а доработанный Roboto Condensed не ухудшает читаемость.


Android 4.4 — Roboto

Индикаторы


Горизонтальный разделитель у иконок быстрых действий исчез. На Android 4.3 также он выполнял функцию индикации выбранного рабочего стола. Но на Android 4.4 вместо него теперь расположены полупрозрачные белые точки, напоминающие iOS-решение. Когда пользователь начинает что-нибудь передвигать, после последней точки появляется иконка +, символизирующая о том, что вы можете создать новый рабочий экран.

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


Android 4.4 — The App Drawer Button

Как уже отмечалось выше, иконки в status bar стали белыми, причём всегда, и это немного сбивает с толку после Android 4.3. В Jelly Bean, когда какой-то сервис не работал, его иконка в status bar перекрашивалась с Holo Blue в серый. Такой шаг в Kit Kat Google объясняет тем, что лишь небольшой процент пользователей понимал смысл этого изменения цвета иконок. Теперь понять, есть ли связь с сервисами или нет, можно только из панели быстрых настроек. При её отсутствии иконки перекрашиваются из белого в оранжевый цвет.


Android 4.4 — Быстрые настройки

Виджеты и их редактирование


В Android 4.0 Google переместила виджеты в меню программ. Добавить виджет на рабочий стол можно было либо выбрав вкладку Виджеты, либо отскролив до конца экраны со всеми установленными программами.

В Android 4.4 Google опять изменила порядок добавления виджетов. Теперь изменить/добавить виджеты, обои, настройки поиска можно через long press на рабочем столе. Интерфейс добавления остался прежним — те же полупрозрачные карточки, естественно, белые. Если пользователь выбрал виджет и перетаскивает его, то теперь есть возможность создать новый рабочий стол. Кстати, через long press также можно менять между собой положение рабочих экранов.


Android 4.4 — Настройка виджетов

Обои рабочего стола


Раньше, чтобы установить фото или скаченную картинку в качестве обоев на рабочий стол, нужно было пройти через ужасный интерфейс обрезания-подгона картинки. На Android 4.4 ситуация изменилась в лучшую сторону.

Во-первых, все стоковые обои, живые обои, ваши собственные картинки располагаются теперь в одну длинную ленту.


Android 4.3 Jelly Bean


Android 4.4 Kit Kat

Во-вторых, при выборе картинки теперь нету никакого интерфейса для их обрезания. Для подгона картинки под экран используется логичный и удобный pinch-to-zoom.

Меню программ


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



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



На основе материала от Android Police
Tags:
Hubs:
Total votes 95: ↑73 and ↓22 +51
Views 153K
Comments 64
Comments Comments 64

Posts