Pull to refresh

Слайды в iOS 7

Reading time3 min
Views18K


На Хабре уже было опубликовано несколько постов с обзорами новой iOS, в основном с критикой нового дизайна, но мало информации про опыт взаимодействия с системой. Я считаю, что они плохие, но это неважно — их все равно перерисуют. Плохую локализацию и краши беты поправят к осеннему релизу.

Я смотрю на систему взглядом проектировщика интерфейсов и хотел бы рассказать про одну из важнейших вещей в новой iOS — концепцию слайдов.

Система


В первую очередь — новый дизайн не плоский. В каком-то смысле он объемнее и, простите, скеморфичнее, чем был раньше.

Интерфейс iOS 6 с одной стороны эксплуатировал метафоры из реального мира, а с другой — совершенно цифровые папки, поиск и центр уведомлений. Вы видели в реальной жизни папку, которая бы при открытии разрывала стол пополам и в его глубине являла свое содержимое? Или центр уведомлений, ничего общего с предметами быта не имеющий? Несмотря на объем каждой отдельной иконки, вся система была плоской. Это естественный ход вещей — из-за новых фич интерфейс системы становится непоследовательным и требует глобального обновления.

Что же мы имеем в семерке? Так выглядит экран iOS 7 сверху:



Теперь посмотрим на него в разрезе:



Семерка похожа на набор полупрозрачных слайдов размещенных друг на друге на некотором расстоянии. Я выделил три основных уровня:

Фон


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

Приложения


Огромный слайд на котором находятся все приложения. Открытие приложения или папки это увеличение какого-то кусочка слайда, нажатие на кнопку «домой» — возврат к оригинальному масштабу. Поместить приложение в папку значит уменьшить его масштаб. Открытие приложения выглядит так:



Значение этого эффекта легко недооценить, но увеличение вместо смены экрана дает пользователю четкое понимание, что он не покидает слайд с приложениями, а лишь меняет масштаб. Этому эффекту немного мешает пропадающая и потом возникающая вновь панель статусов — она должна менять цвет, но ни в коем случае не двигаться. Уверен, что этот недостаток починят со временем.

Отмечу, что док находится на том же уровне, что и приложения, но на отдельном слайде.

Управление


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



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



Приложения


С приложениями все несколько хуже — они поддерживают новую концепцию лишь частично и довольно непоследовательно. Слайды не закреплены в Human Interface Guidelines, хотя и были представлены как фишка системы на презентации:



Сафари показывает слайд с фоном, если страница кончилась, а почта показывает лишь белый фон. Вообще, Сафари это единственное приложение, которое ведет себя подобным образом:



Напоминания это бумага на слайде, хоть и практически непрозрачном, а заметки — просто бумага:



Новые погода и компас (в частности, вкладка с уровнем) очень красивы, но слайдов там нет и в помине:



Иногда слайды всплывают в неожиданных местах — например, в телефонных кнопках:



Но их нет в камере. И из-за этого нам приходится идти на преступление на локскрине — перекрывать фон черным непрозрачным кирпичом:



Почему это важно?


Я уже писал выше, почему эти полупрозрачности и анимации увеличения так важны. Но помощь в ориентировании в системе это еще не все. Растягивая все приложения на один большой слайд и с возможностью увеличения, Эппл немного приближает дизайн ОС к давней дизайнерской утопии в виде одного огромного полотна с данным с плавными перемещениями и изменением масштаба, вместо резких переходов от одного окна к другому. Именно поэтому iOS 7 это огромный шаг по сравнению шестеркой. А иконки перерисуют.
Tags:
Hubs:
+3
Comments13

Articles