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



    В первой части статьи подробно описаны все основные интерфейсные изменения, которые претерпели экран блокировки и рабочие столы, по сравнению с предыдущими версиями 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
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 64

      +2
      А можно вопрос, скриншоты сделаны на телефоне или планшете?
      А то закрались сомнения, что у меня Nexus 7 (2012) как то криво обновился с 4,3 на 4,4,2. Так как у меня The App Drawer Button Она такая же как в 4,3 но свечение теперь не синее а белое. И виджеты нельзя через долгий тап добавить =(
        +2
        Это nexus 5. На nexus 7 остался старый лаунчер. Новый лаунчер Google Experience Launcher должен появиться для других устройств позже.
        Изменение свечения с синего на белый — это немного обновленный Holo в 4.4. Теперь все кнопки в активном состоянии подсвечиваются не синим, а полупрозрачным слоем сверху.
          0
          Итак, после разблокировки устройства, мы видим рабочие столы. На Android 4.4 они изменились полностью. Но касается это только Nexus 5, где в качестве launcher по умолчанию установлен Google Experience Launcher (GEL).

          На всех девайсах, кроме Nexus 5, изменения по сравнению c 4.3 минимальные. Поменяли синий акцентный цвет (Holo Blue) элементов на белый.
          Но можно установить Google Experience Launcher (GEL) вручную.
            0
            Поставьте KitKat Launcher и будет вам счастье. А так да, от Google лаунчер только для Nexus 5, что они не раз сообщали.
            +1
            -
              +33
              Первое что я проверил в дизайне Nexus 5 после Galaxy Nexus — отсутствие чёрного пиксиля в кнопке «back»!
              А вы обошли стороной это важное нововведение в Android 4.4
              Было:
                +27
                Ну вот. Теперь каждый раз глядя на свой GN я буду видеть этот черный пиксель. Спасибо.
                  +1
                  Простите, просто пару лет назад один человек сделал то же самое со мной…
                    +1
                    А вы теперь «отомстили» куче человек. Как минимум 20
                      +1
                      В каждом из нас кроется вселенское зло. Кто-то душит пингвинов, что-то режет правду-матку.

                      Как минимум 25 человек были довольны, что им открыли глаза!
                  0
                  На моем Galaxy Nexus с прошивкой CM10.2 (Android 4.3.1) пикселя нет. Команда CyanogenMod заботиться о переносе ключевых фич новых прошивок в старые прошивки.
                  CM10.2
                  CM10.2
                    0
                    Пиксельной болезнью страдают все больший корпорации: кто-то пиксели не закрасит, кто-то отступ не сделает. Я постоянно матерюсь на птичку в шапке Твиттера.
                    image

                    margin-top!
                      0
                      И что с ней?
                        0
                        А что, не видно? Вверх улетела птичка.
                          +1
                          Птицы часто так делают…
                        0
                        После Вашего комментария они изменили дизайн. Птичка теперь по центру.
                      +6
                      8 месяцев назад я написал пост, в котором была описана полная беспомощность интерфейсного дизайна Андроида:

                      habrahabr.ru/post/178713/

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

                      Отгадайте, сколько отмеченных в посте интерфейсных проблем было решено в двух мажорных релизах ОС Андроид?
                      Подсказка: если это число умножить на два, оно не изменится.
                        +13
                        > Подсказка: если это число умножить на два, оно не изменится.

                        Ответ — бесконечность, да? :)
                        0
                        Какой значок WiFi в статус-баре! Хочется взять, и замазать инвертировать
                          +5
                          Это значок portable hotspot. Значок WiFi с другой стороны и (внезапно) инвертирован.
                          +1
                          Был разочарован тем, что пришедшее обновление для 4-го Нексуса не сделало фон статус бара и нижнего ряда кнопок прозрачным.
                          PS: Зачем такие гигантские скриншоты в статье? На 19" мониторе не помещаются по два в ряд.
                            0
                            Это, конечно, дело вкуса, но мне без теней и полупрозрачных градиентов было приятнее. Было здорово, если можно было её отключить, а то когда пришло обновление на рабочий Galaxy Tab — переплевался из-за этого статусбара, выглядит ужасно.
                              0
                              теперь еще и обои надо подбирать такие, чтобы строка статуса читалась. Дизайн ради дизайна
                            0
                            а в чем прелесть прозрачного статусбара? да еще с белыми кнопками? особенно если задний фон тоже белый?
                              +2
                              Там есть тёмный градиент, на белом фоне видно иконки.
                              Смысл в том, что экран кажется ещё больше, это круто смотрится.
                                0
                                Создается ощущение, что экран больше на размер статусбара. Аналогично с навигационными кнопками.
                                +2
                                Всем, кому не нравится стандартный ui андроида (как и мне, впрочем), рекомендую посмотреть в сторону MIUI. Это просто совершенно другой уровень проработки интерфейса. Каждая мелочь находится на своём месте, там, где ты её ожидаешь. Если, к примеру, тебе нужно вставить контакт в СМС, то можно быть уверенным, что ты найдёшь пункт «контакт» в меню «вставить». Отдельно радуют их еженедельные обновления, в каждом из которых они ещё где-то заанимируют иконку, добавят плавности интерфейсу, причешут ещё какое-то приложение, добавят функциональности в настройки. Иногда читаю жалобы владельцев какого-нибудь htc/samsung/etc на то, что производитель не фиксит какой-то баг, а то и вовсе забивает на довольно свежий аппарат и жалею, что не на все аппараты есть стабильная MIUI.
                                PS: счастливый владелец Xiaomi MI2-S
                                  +1
                                  А его же нельзя поставить как лончер? А так да, мне тоже года 3 назад MIUI нравился больше, чем стоковый UI.
                                    0
                                    можно. есть mi-launcher, если мне память не изменяет. многие приложения из miui стали standalone. но вы же понимаете, там не будет и половины того, что я перечислил.
                                      0
                                      удалено
                                    +6
                                    Почему это назвали «дизайнерским обзором»? В статье и обычного-то обзора нет, а уж дизайнерского и подавно.
                                      +1
                                      Огорчает, что их интерфейсы отнюдь не источник вдохновения. Хотя кое-где можно видеть красоту.
                                        0
                                        Про кнопку меню напишите, которая начиная с 4.4 отображается так же точками как и на Nexus. Даже если у устройства есть хардварная кнопка меню!
                                          0
                                          Хотел в виде отдельного поста оформить. Потом ссылку в обзор добавлю.
                                          0
                                          Еще переделали стандартный браузер и теперь что-либо читать в интернете (например хабр) стало невозможно, так как текст больше не подстраивается под ширину экрана.
                                          Исправлять не собираются:
                                          code.google.com/p/android/issues/detail?id=62378
                                            0
                                            Сделайте дабл тап на колонку с текстом и все ок.
                                              0
                                              Увы, но у меня таким образом не работает.
                                              У вас Nexus с официальным 4.4.2?
                                                0
                                                Да, Nexus 5
                                              0
                                              Nexus 4, Android 4.4.2, Crome 32.0.1700.99.
                                              Текст масштабируется по двойному тапу.
                                                0
                                                Я говорю про стандартный браузер, а не про Chrome
                                                  0
                                                  Я прошу прощения, не подумал, что у вас другой аппарат. В нексусе стандартный браузер Chrome
                                                    +1
                                                    Ох, тоже не знал про это.
                                                    Ничего страшного
                                              +5
                                              Хм, читая «претерпел существенные изменения» и «изменился полностью», ожидаю увидеть, как минимум, изменение концепции, а не добавление/устранение пары иконок и смену обоев. Собственно, в 4.4. по отношению к 4.3. (по вашим скринам) этих самых «изменился полностью» не заметил абсолютно.
                                                0
                                                Я вот прочитал эти «претерпел существенные изменения» и «изменился полностью», посмотрел на скриншоты и вспомнил детство, ну «Найди N отличий»…
                                                +3
                                                Такой шаг в Kit Kat Google объясняет тем, что лишь небольшой процент пользователей понимал смысл этого изменения цвета иконок.

                                                И поэтому они лишили этой возможности этот процент. Молодцы!
                                                  0
                                                  На самом деле не фиг загоняться по лишним индикаторам, в этом мораль этого решения.
                                                    +2
                                                    Ну блин, мне удобно было определять проблемы с интернетом. Значок серый — значит нет синхронизации, отвалился интернет/закончились деньги. Синий — интернет есть, проблемы другого плана
                                                      +1
                                                      Интернет не работает — заглянул в шторку.
                                                      Обычно интернет всегда работает. :)

                                                      Я тоже пользовался, но с обновлением забил и счастлив.
                                                        0
                                                        Обычно? У меня может и не работать. И домашний может отвалиться, который по WiFi раздается, и деньги на счету кончиться, и у оператора проблемы. Вот например неделю назад поймал прикольный глюк: по umts интернета не было, а по hsdpa был. Как так, непонятно
                                                        +1
                                                        Они не просто так пошли на этот шаг, смартфон больше не тратит ресурсы на перерисовку иконок.
                                                          +1
                                                          И живет до двух раз дольше?
                                                    +1
                                                    Глупый вопрос.

                                                    Иконки в лаунчере тупо скейлятся вниз со 192 до 180 пикселей?
                                                    Это нормально?
                                                      0
                                                      К сожалению, на экране 4:3 со скриншотами беда: не помещаются рядом и статья принимает не очень презентабельный вид.
                                                        0
                                                        Вот, теперь всё как надо.
                                                        +2
                                                        Вот молодцы дизайнеры, стараются, красоту наводят…
                                                        Только на экране в 4-5 дюймов не хватает места полностью написать название песни (см. скриншот в статье)
                                                        Или возьмем, к примеру, ФИО: Карачумов Эльбрус Иванович (каждый элемент имени записан в соответствующее поле)
                                                        у меня в списке контактов будет выглядеть как «Эльбрус Иванович Ка..»
                                                        на экране входящего звонка он отобразится еще понятнее «Эльбрус Иванови...»

                                                        При этом в зависимости от выбранного типа сортировки контактов «по фамилии» или «по имени», этот контакт будет переезжать из раздела «Э» в раздел «К» и обратно, но порядок отображения: «Имя Отчество Фамилия» не изменится на, казалось бы, логичный «Фамилия Имя Отчество»
                                                        Дополнительным бонусом идет урезанная запись даже в страничке самого контакта и прочитать фио полностью можно только выбрав пункт «Изменить»
                                                        Для названия организации в списке контактов места тоже не нашлось.

                                                        А еще бывают люди записанные только по имени, или имени и отчеству, или прозвищу, или люди без имениорганизации

                                                        А вы говорите пиксель в стрелочке…
                                                          0
                                                          Насчёт «логичности» изменения порядка отображения — это вы бросьте. Это вам оно кажется логичным, так как вы по русски думаете. А вот человеку, у которого эти понятия называются первое имя, среднее имя и последнее имя даже представить себе, что где-то может быть не так чудовищно сложно. Когда вы в электронной таблице сортируете строки по разным полям — в ней же столбцы не перетасовываются? Вот и тут также. Ну не может последнее идти перед первым — хоть ты убейся об стену.

                                                          P.S. Если вдруг до этой части кода доберётся Европеец или Японец — вполне могут быть подвижки, конечно, но закладываться на это как бы не стоит.
                                                            0
                                                            А вот человеку, у которого эти понятия называются первое имя, среднее имя и последнее имя даже представить себе, что где-то может быть не так чудовищно сложно.

                                                            и действительно
                                                              0
                                                              В Испании например, когда гражданство получаешь или ребенок рождается нужно обязательно чтобы было две фамилии (первая фамилия папы и первая фамилия мамы). Фамилии никогда не меняются при замужестве и тд
                                                              Имен тоже может быть несколько, а отчеств нет совсем.
                                                              В Италии нет отчеств, и нет второй фамилии. Имя Фамилия и все.
                                                              и в каждой стране по своему
                                                          0
                                                          Ещё поменялась заставка загрузки, автор об этом забыл упомянуть.
                                                          Как я понял, часы и клавиатура будут в следующей части?
                                                            0
                                                            Да, в следующей части про стоковые программы.
                                                            0
                                                            Обложка альбома иногда имеет такую структуру, что точек для ввода визуального кода разблокировки просто не видно — не совсем удачное решение — часто ругаюсь
                                                              0
                                                              И она еще меняется при каждом доставании телефона из кармана!
                                                              0
                                                              Отказ от черных полос, это существенный плюс.
                                                              Кстати, у меня Google Now в версии Android 4.3 также добавились кнопки
                                                              Скрытый текст
                                                              Ваш скрин
                                                              image

                                                              Мой

                                                                0
                                                                Отказ от черных полос, это существенный плюс.

                                                                Смотрится красиво, но на большинстве моих фонов плохо читается:
                                                                картинка
                                                                image


                                                                На moto defy с 512мб и неродным ядром (2.6.3) летает намного быстрее чем 4.2.2

                                                              Only users with full accounts can post comments. Log in, please.