Пару недель назад Apple провела особое осеннее мероприятие в театре Стива Джобса, расположенном в Apple Park. На нем был представлен iPhone X, а затем бета-тестеры получили iOS 11 Golden Master, официальный релиз которой состоялся 19 сентября. Я обновил свой телефон, как только получил iOS 11.
Начиная с конференции WWDC, прошедшей в июне этого года я стал бета-тестером iOS 11. Новая версия iOS 11 прошла через интенсивное лето инкрементных обновлений. Протестировав iOS 11 GM на своем 4,7-дюймовым iPhone 7 я могу сказать, что эта прошивка оставляет довольно сильное ощущение незавершенности бета-версии. Как дизайнер я не могу не написать о своих ощущениях.
Я пишу это, чтобы помочь людям понять детали, требующие дальнейшей доработки, которые, надеюсь, сотрудники Apple доведут до ума.
Ощущение незавершенности в iOS 11 в основном исходит от интерфейса и анимации. Элементы интерфейса в iOS совершенно непоследовательны, различные элементы смешаны между собой, что нарушает пользовательский опыт. Эта несогласованность главным образом связана с элементами интерфейса, обновленными в iOS 11, такими, как панель поиска. На мой взгляд, недавно внедренные элементы, могли быть незнакомыми и новыми даже для самих инженеров Apple. Они стали причиной непоследовательности дизайна интерфейса в iOS 11.
«Почта»
Сначала рассмотрим приложение «Почта». Как и другие родные приложения iOS, «Почта» также представляет новую панель навигации с большим заголовком. Тем не менее, большой заголовок в «Почте» имеет дополнительный отступ слева в отличии от примера из руководства по дизайну. Здесь мы будем использовать строку поиска как ориентир. В примере из руководства по дизайну большой заголовок и строка поиска имеют одинаковое расстояние от края, но в приложении «Почта» заголовок явно смещен немного вправо по сравнению со строкой поиска.
«Часы»
В приложении «Часы» строка поиска не соответствует предложенному стилю, выделяясь своим неподходящим фоном. В родных приложениях, использующих стили iOS 11, строка поиска должна соответствовать навигационной панели. Чего мы не видим в приложении «Часы».
В видео-инструкции Создание приложений для iPhone X, опубликованной Apple, был упомянут точно такой же случай:
Приложение «WWDC» слева – пример несоответствия стилей, а «Контакты» справа – напротив, прекрасно иллюстрирует соответствие стилей. Комментарий в видео утверждает:
Это переход ко второй проблеме, которую я обнаружил ... если я вызову поле поиска, это выглядит совершенно неправильно. Давайте сравним со списком из приложения «Контакты». Здесь несколько деталей выглядят неправильно. Цвет фона строки поиска выбран неудачно. И установка размеров не очень.
Таким образом, iOS 11 предлагает согласованный фон между строкой поиска и панелью навигации. Однако «Часы» не следует этим паттернам, как любое другое нативное приложение. Более того, панель поиска в приложении «Часы» почти «целует» строку состояния – инженерам Apple следует доработать этот момент.
«Файлы»
Со строкой поиска в приложении «Файлы» также есть некоторые проблемы. Похоже, что разработчики этого приложения не использовали стандартную строку поиска. На рисунке ниже вы можете увидеть ее сравнение со стандартной строкой поиска в «Настройках». У приложения «Файлы» строка поиска чуть меньше и цвет шрифта светлее.
Кроме того, есть различия в цвете, размерах и анимации после нажатия на строку поиска. Анимация стандартной панели поиска в «Настройках»:
А вот строка поиска в «Файлах»:
У панели поиска в приложении «Файлы» более быстрая анимация, но присутствует легкое ощущение незавершенности.
App Store
Приложение App Store в iOS 11 прошло редизайн и представляет стиль аналогичный Apple Music. Однако шрифты на вкладке «Сегодня» в App Store отличаются от используемых на вкладке «Для вас» в Apple Music. App Store использует полужирный шрифт, в то время, как Apple Music использует тонкий шрифт. И в Apple Music в дате после слова «Среда» следует запятая, а в App Store запятая отсутствует.
На странице «Поиск» прикосновение к элементу «Популярные» в App Store не приведет к его выделению. В то время, как аналогичное действие на странице поиска в Apple Music выделит элемент, изменив цвет его фона. Мне кажется, эффект выделения элемента лучше реализован в Apple Music, и нативные приложения iOS должны быть последовательными в этом вопросе.
Кроме того, есть и другие проблемы. В App Store откройте любое приложение с баннером, слегка проведите пальцем от левого края вправо (но не полноценный свайп, который закроет страницу приложения). После возврата страницы в исходное положение раздел баннера будет выглядеть весьма странно:
Вы можете посмотреть этот баг в видео ниже.
Также есть проблема с производительностью. На вкладке «Обновления» потяните вниз, чтобы обновить элементы, и появляется очевидное выпадение кадра, если слишком сильно потянуть большой заголовок. Вы сами можете это легко почувствовать.
«Здоровье»
В приложении «Здоровье» на страницах «Сегодня» и «Медданные», мы видим те же данные и одинаковые стили, но при этом с разной шириной. Это старая проблема со времен iOS 10 и она до сих пор не исправлена.
Виджеты (экран Today)
В iOS 11 есть два способа открыть экран «Today», либо смахнув слева направо на главном экране, либо аналогичный жест на экране блокировки. Но при этом строка поиска на страницах, вызванных по-разному, будет иметь разное поведение. При вызове с главного экрана, потянув вниз страницу с виджетами, не будет отображаться экран поиска, и при нажатии на строку поиска отсутствует анимация появления и пропадания эффекта матового стекла и анимация расширения строки поиска (хотя есть анимация ее сокращения) после нажатия на кнопку «Отмена». Общий опыт довольно неудобен.
При вызове с экрана блокировки повсюду реализована анимация, а страница Widget по-прежнему будет показывать экран поиска, очень плавный и естественный.
Эти два разных сценария для экрана «Today» вызывают ощущение несвязности. Очевидно, что сценарий вызова с главного экрана недоработан по сравнению со сценарием вызова с экрана блокировки. Это очень странно, ведь в iOS 10 экран Today, вызванный с домашнего экрана анимирован и может показывать экран поиска, если потянуть вниз. Не знаю, почему это хуже реализовано в iOS 11.
Аналогично в iOS 11 вызов экрана Today с экрана блокировки, реализован хуже, чем в iOS 10. Когда пользователь тянет страницу виджетов вверх, строка поиска станет матовой, предотвращая наложение виджета на строку поиска. Тем не менее, нажатие на строку поиска приведет к немедленному исчезновению эффекта матового стекла в самой строке поиска и на всей странице. Нажатие кнопки «Отмена» в строке поиска приведет к тому, что матовое стекло на весь экран медленно исчезнет.
Обратите внимание на панель поиска в верхней части экрана.
Если видео слишком быстрое, вы можете посмотреть его покадрово. Мы видим, что матовое стекло на весь экран не связано с матовым стеклом верхней части экрана. С точки зрения плавности отображения это приводит к ощущению несвязности.
Помимо отсутствия некоторых анимаций, в iOS 11 также есть примеры избыточной анимации. Каждый раз, когда вы переключаетесь с экрана виджетов на заблокированный экран, плеер будет изменять размер снова и снова, что совершенно не нужно.
На странице «Предложения Siri», вызываемой после нажатия на панель поиска, есть две проблемы. Во-первых, при прикосновении к предложениям - их выделение меньше ширины экрана, в результате чего оно выглядит странным прямоугольником. Правильное выделение элементов представлено в Apple Music, где оно реализовано на всю ширину экрана.
Во-вторых, и это довольно странно, если вы внимательно посмотрите на шрифт «Предложений Siri», вы увидите, что он неровный (особенно латинские буквы) рядом с краями.
«Фото»
Неправильно подобранные поля: слишком большие или слишком маленькие, часто встречаются в iOS 11, вызывая сильное ощущение недоделанной работы.
Во вкладке «Общие» приложения «Фото» поля (как указано на рисунке ниже стрелкой) слишком узкие и не соответствуют любому другому нативному приложению iOS с похожими страницами.
«Настройки»
В «Настройках» в разделе Apple ID выравнивание списка устройств полностью выбивается из раздела. В iOS 10 все было сделано правильно.
Apple Music
В разделе Connect приложения Apple Music некоторые сообщения будут иметь очень малый отступ между изображением и текстом. Не похоже, что это дизайнерское решение, поскольку в клиенте iTunes для macOS с полями все в порядке. Хотя Connect де-факто редко используемая функция, Apple не должна допускать такую элементарную ошибку в дизайне интерфейса.
Также в Apple Music, откройте список альбомов через Медиатеку, затем сортируйте список по первым буквам имени исполнителя. Вы увидите, что подзаголовок с первой буквой имени обрезает сверху обложки альбомов.
Экран проигрывателя Apple Music также стал странным в iOS 11. Повторное открытие экрана плеера приведет к исчезновению тени под обложкой альбома. А обложка альбома во время паузы уменьшится в размере, и вновь увеличится при повторном открытие экрана проигрывателя.
В видео ниже:
Приостановка музыки, уменьшение обложки альбома, закрытие и повторное открытие экрана проигрывателя, увеличение обложки альбома:
Воспроизведение музыки, тень под обложкой альбома, закрытие и повторное открытие экрана проигрывателя, тень пропала:
В iOS 10 с AirPods, когда устройство AirPlay подключено, на экране проигрывателя будет отображаться название устройства возле значка AirPlay. В iOS 11 этого нет.
Некоторые могут подумать, что это дизайнерское решение, но на самом деле это баг. В приведенном ниже видео, когда устройство AirPlay подключено, имя устройства отображается правильно. Однако повторное открытие экрана плеера заставит его исчезнуть. Если это дизайнерское решение, то имя устройства не должно было отображаться с самого начала.
И в приложении «Подкасты», которое использует тот же стиль дизайна, что и Apple Music, имя устройства AirPlay всегда отображается.
Еще один баг в Apple Music. Как мы знаем, есть два способа вернуться наверх страницы в iOS, либо нажав на строку состояния, либо щелкнув иконку на панели вкладок. В Apple Music, нажав на строку состояния, вы вернетесь к большому заголовку в панели навигации, а нажатие на иконку на панели вкладок вернет мелкий шрифт панели навигации, как показано ниже.
В приложении «Подкасты» и в App Store, нажатие возвращает большой заголовок панели навигации, это поведение в Apple Music определенно баг.
Пункт управления
В Пункте управления в разделе устройства AirPlay также есть проблемы. Часто при использовании AirPods Пункт управления показывает надпись «iPhone». И даже когда AirPods отображается, как подключенное устройство, после нажатия на паузу снова появится надпись «iPhone» (хотя AirPods все еще подключены).
Обратите внимание на название устройства над названием песни
Также в Пункте управления некорректная анимация функции Screen Mirroring:
«Погода»
В приложении «Погода» в iOS 11 сделали крупнее шрифт и меньшие поля. А еще я заметил, что текст в iOS 11 не выровнен по центру, как это было сделано в iOS 10.
Возможно, это дизайнерское решение для iOS 11. Однако, из-за отсутствия выравнивания на некоторых цифрах отчетливо видно, что текст ближе к левому краю – еще один плюс в копилку iOS 10.
Проблема с псевдополужирным стилем для шрифта PingFang в Safari
Последней и самой серьезной проблемой, на мой взгляд, является шрифт. Вышеупомянутые проблемы могут не повлиять на обычное использование, но приведенный ниже вопрос, действительно, коснется всех нас.
Это проблема псевдополужирного стиля для шрифта PingFang (китайский шрифт по умолчанию для iOS) в iOS 11 Safari. Я обнаружил эту проблему, когда тестировал на iOS 11 свои сайты. На всех картинках, представленных ниже, сравниваются iOS 11 и iOS 10.
Как показано выше, шрифт PingFang на самом деле отображается, как псевдополужирный. Псевдополужирный стиль генерируется алгоритмом, что часто вызывает проблему толщины букв и интервала между ними. На скриншоте вы можете видеть, что псевдополужирный шрифт PingFang в iOS 11 имеет большее расстояние между символами.
В результате тестирования я обнаружил, что это произойдет только, когда CSS font-family включает в себя «-apple-system», т. е. семейство шрифтов, использующих шрифт San Francisco, предоставляемый системой. Как только мы удалим его, система будет соблюдать толщину шрифта, предоставляемую самим шрифтом, и псевдополужирный стиль исчезнет.
Эта проблема не только в Safari, но касается всех приложений, использующих движок webkit iOS для рендеринга веб-страницы. Например, внутренний браузер приложений WeChat и Douban. Как вы можете видеть, псевдополужирный стиль шрифта PingFang в приложении Douban смотрится довольно плохо.
Выберите любой обзор фильма, и вы заметите, что шрифт заголовка псевдополужирный. Посредством сравнения вы также заметите, что есть проблема с интервалами. На самом деле, речь идет не только о полужирном шрифте, но и об обычном шрифте любой толщины. Поэтому на скриншоте ниже вы видите «псевдообыкновенный» шрифт. «Псевдообыкновенный» шрифт нелегко идентифицировать по толщине штриха, но из приведенного ниже сравнения вы заметите, что интервал между словами в IOS 11 отличается. Из-за этого в строчках разное количество слов, что доказывает наличие «псевдообыкновенного» шрифта.
И еще несколько изображений с псевдополужирным шрифтом в приложении WeChat.
Эта проблема со шрифтами в Safari появилась в iOS 11 Beta 1, и я отправил отчет об ошибке (№ 3436665) еще в начале августе. Тем не менее, на сегодняшний день эта проблема все еще не решена. Как энтузиаст типографики, я очень разочарован этим.
В заключение
В последние годы говорят об ухудшение качества программного обеспечения Apple. Apple развивается в направлениях биоинформатики, машинного обучения, дополненной реальности и многих других областях. Компания развивает свой бизнес, но постепенно теряет внимание к деталям в дизайне и продуктах, которым она славилась раньше. Во время презентации 12 сентября, слушая «Битлз» и слова мудрости Стива Джобса ра, мне показалось, что вернулись старые добрые времена. Однако Apple уже другие. Честно говоря, я не собираюсь огульно критиковать Apple, ведь они создали множество продуктов, которые стали частью моей жизни. Apple по-прежнему остается моей любимой и очень уважаемой компанией. Я искренне желаю, чтобы, продвигаясь вперед, Apple все же сохраняла те ценности, которые они почитали и формировали в прошлом.
Особое спасибо Теду Ли за его неоценимую помощь в переводе этой статьи с китайского на английский.
Перевод статьи Ryan Lau
Топ коментарі (0)