История плоского дизайна: как эффективность и минимализм сделали цифровой мир плоским


Автор: tajily

17 ноября 2020 12:31

Метки: apple  iphone  mac  джобс  дизайн  книга  

15172

14

1

Если и было что-то, чего вы не ожидали от Apple, так это самой обычной книги в твердой обложке! Больше удивить поклонников компании и фанатов лично Стива Джобса, пожалуй, сложно.

0

Источник:

Смотреть все фото в галерее

Apple, создатель новейших iPhone 7 и ультрасовременного Macbook Pro, выпустила совершенно уникальный для себя продукт. Компания объявила о выходе в свет книги в твёрдом переплёте, которая повествует о 20-летней истории дизайна Apple в 450 фотографиях прошлых и современных продуктов Apple. «Designed by Apple in California» демонстрирует продукты от iMac 1998 года до Apple Pencil 2020 года, а также рассказывает о материалах и технологиях, которые применяли инженеры Apple за два десятилетия инноваций.

Источник:

От оригинального iPod, который Стив Джобс презентовал 23 октября 2001 года…

Источник:

…до цветных носочков для плеера, выпущенных в 2005-м.

Источник:

В ней есть и новейшие продукты Apple, как, например, Apple Watch в спортивном дизайне.

Как говорят в компании, книга иллюстрирует «креативный подход Apple» и посвящена памяти Стива Джобса. — Мысль о создании чего-то действительно важного для человечества была мотивацией Стива с самого начала. И сегодня, когда Apple смотрит в будущее, эта мысль по-прежнему двигает нас вперёд, — рассказывает Джонни Айв, легендарный дизайнер Apple.

Источник:

Продукты, представленные в этой книге, стали результатом тесного сотрудничества многих команд специалистов. В книге 450 фотографий, снятых Эндрю Цукерманом в нарочито скромной стилистике. Они иллюстрируют и процессы разработки, и готовые продукты Apple.

Источник:

— Этот сборник призван продемонстрировать продукты, которые наша компания создала за эти годы. Надеемся, что он поможет понять, как и почему они существуют, и послужит пособием для студентов во всех областях дизайна, — говорит Айв. В 1998 году новый iMac стал революционным в обновленной Apple, перешедшей под руководство Стива Джобса. Легкий, полупрозрачный дизайн Джонни Айва навсегда изменил компьютерную индустрию и заложил основу будущей «одержимости» Apple дизайном своего продукта.

Источник:

— Это книга о дизайне. Но в ней пойдёт речь не о самих дизайнерах, а о творческих поисках и разработке продуктов. Это объективный образ нашей работы, в котором, по иронии, представлены и мы сами, — сказано в предисловии.

— В книге описывается, как мы работаем, какие исповедуем ценности, за что боремся и чего хотим достичь. Мы всегда стремимся, чтобы нас оценивали по делам, а не по словам.

Источник:

– Мы стремимся создавать естественные формы. И иногда нам это удаётся. Многие наши продукты выглядят настолько простыми, понятными и логичными, как будто у них нет разумной альтернативы, — уточняет Айв. В книге представлен целый ряд инструментов, с помощью которых создаются продукты выпускается в двух форматах. Она отпечатана на специально изготовленной бумаге особой окраски с посеребрёнными матовыми краями. Текст и изображения напечатаны чернилами высокой чёткости с восьмикратным цветоделением. Это издание в твёрдом переплёте, прошитом льняными нитями, готовилось в течение восьми лет. Книга доступна в двух форматах: в малом формате (25,9 x 32,4 см) по цене 199 долларов США и в большом формате (33 x 40,6 см).

Полный разбор дизайна iOS 11: Apple все еще внимательны к деталям?

Пару недель назад 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 все же сохраняла те ценности, которые они почитали и формировали в прошлом.

Особое спасибо Теду Ли за его неоценимую помощь в переводе этой статьи с китайского на английский.

Разработка дизайна для нового iPhone X и IOS 11

Тени

Для чего нужны тени в веб-дизайне?

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

Тень — это вспомогательный элемент для восприятия нашим сознанием всего того, что находится в вебе.

Тени нужно использовать очень аккуратно, к примеру, сейчас на экране довольно правильный и приятный способ использовать тени.

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

Это я вижу каждый день в работах моих учеников на бесплатном курсе «Веб-дизайнер. Взрывной старт».

Теперь давайте поговорим о том, как избежать ошибок в использовании тени.

Не секрет, что двумя законодателями моды в веб-дизайне являются такие интернет-гиганты как Google и Apple.

У каждого из них есть свой собственный подход к дизайну. К примеру, у Google этот подход называется Material Design. У Apple несколько сложнее, потому что название они до сих пор не придумали. Ну, об этом мы поговорим немного позже.

Харизма

Товар без «изюминки» останется незамеченным, сольётся на полке магазина с остальными, станет «как все». А покупатель не хочет быть «как все», ему нужно что-то исключительное, чтобы чувствовать себя особенным.

Apple даёт своим покупателям такую возможность. Да, продукцию этого бренда хотят все или большинство, но ведь не все могут себе её позволить. Этот факт в том числе позволяет обладателям iPhone, iPad и MacBook ощущать свое превосходство над остальными

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

уроки дизайна и принципы работы Apple brand studio geek бренд-студия гик 5.jpg

Рейтинг
( 2 оценки, среднее 4.5 из 5 )
Понравилась статья? Поделиться с друзьями: