Лого vc.ru

Новый сайт Apple: изменения и программная реализация

Новый сайт Apple: изменения и программная реализация

На этой неделе Apple представила не только новые iPhone и умные часы, но и обновленный сайт. Генеральный директор студии Uprock Евгений Кузьмин написал для ЦП материал о том, что именно изменилось по сравнению с предыдущей версией ресурса компании.

Поделиться

Во время долгожданной презентации новых устройств Apple официальный сайт работал с перебоями. Как и следовало ожидать, происходило его полное обновление. Зная, как щепетильно Apple относится к деталям и общей стилистике своих продуктов, логично сравнить старую и новую версию сайта, чтобы проследить некоторые дизайн-тренды.

Переход на «плоский» дизайн

В первую очередь бросается в глаза переделанная навигационная панель, растянутая на всю ширину браузера и появление нового раздела Watch. Теперь у панели нет тех бликов и градиента, которые мы видели в старой версии, и она лучше сочетается (визуально перекликается) с новым «плоским» дизайном в iOS 7 и OS X Yosemite. Возможно, в последующем и операционные системы ожидает окончательный переход в сторону «плоского» дизайна.

Сравнение старого и нового меню

Также было упразднено меню для поиска: вместо него просто кнопка с пиктограммой, которая при нажатии разъезжается.

Два варианта поиска (сверху новый вариант: раскрытый при клике)

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

Мобильная версия сайта

Наконец, появилась полноценная мобильная версия сайта. В целом, в дизайне чувствуется подход 'mobile-first'. Картинки и шрифты стали больше, элементы выровнены по центру. Весь сайт подготовили к «адаптивной» верстке, каждая страница состоит из составных блоков и легко перестраивается под размер экрана. Но стоит заметить, что используется имитация адаптивной верстки, так как каждая страничка генерируется на сервере отдельно для конкретного устройства.

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

Скриншот меню для телефона

На видео можно заметить, что страница 'Store' еще не подготовлена для мобильных устройств и некорректно отображается, хотя она и первая в меню. Скорее всего, обновленная страница выйдет в ближайшее время, так как у нее тоже блочный дизайн и её адаптация не требует больших ресурсов. Можно сделать вывод о том, что даже такая щепетильная к деталям компания, как Apple, иногда не справляется с дедлайнами.

В общем, заметно изменение политики в сторону мобильного и адаптивного дизайна, хотя выбор разрешения экранов новых устройств (640x1136, 1334x750 и 1920x1080) и вводит в некоторый ступор своей нелогичностью.

Редизайн главной страницы

Логично, что полной переделке подверглась главная страница, так как обновление сайта было посвящено выходу нового поколения устройств. Решение со слайдером кажется спорным ввиду того, что он не показал себя на практике достаточно эффективным (обычно пользователи не заходят дальше второго слайда). Судя по всему, задача заключалась в том, чтобы уделить максимальное внимание iPhone 6 и 6 Plus, и это решение хорошо сочетается с мобильной версией, где не так принципиально, используется горизонтальный или вертикальный скрол.

Новая главная страница

Старая главная страница

Страницы продуктов

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

Apple Store и системные  страницы

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

Программная реализация

Изучив вдоль и поперек новую версию сайта, интересно было посмотреть на её техническую реализацию. К сожалению, возможности заглянуть в серверную часть нет, но общие выводы по клиентской части все же можно сделать (анализ JS, к сожалению, невозможен, так как прошёл минификацию). 

Реализация сайта относительно консервативная, формирование страниц происходит по-прежнему на сервере, а не на клиенте (браузере пользователя). Подход к структурированию css/html неаккуратен в следующем: присутствуют избыточность кода (вот яркий пример), абстрактная логика в наименованиях переменных и пренебрежение CSS-наследованием. Возможно, в этом есть логика (БЭМ), но если придерживаться такого принципа, то хорошим решением будет перенести все абстрактные переменные из HTML внутрь стилей. 

Также плохим тоном является использование HTML-структур, для обеспечения внешнего вида, и, конечно же, использование обработчиков (например, клика) внутри HTML-элементов.

Вывод

Из основных изменений стоит выделить полный переход на «плоский» и адаптивный дизайн. Остальные нововведения касаются «продуктовой» составляющей и соответствуют стратегическим целям компании, которые достигаются за счет грамотно расставленных приоритетов. Сайт Apple принципиально не меняется с 2000 года, что говорит о грамотном проектировании и акцентировании на важных задачах.

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

Напоследок, презентация с примерами всех версий сайта Apple с 1997 года:

Статьи по теме
Масштабный редизайн Airbnb: мнения экспертов17 июля 2014, 17:35
Новый фирменный стиль Foursquare: мнения экспертов24 июля 2014, 17:30
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

А где презентация?

0

Чет адаптив у них какой-то халтурный (768px и ниже все ломается). Или я чего то не понимаю.

тоже про это вспомнил)

0

Только вот Тема писал в Ководстве: "Делать мобильные версии сайтов есть смысл только за деньги тех, кому некуда деньги девать."

Как наличие/отсутствие денег влияет на полезность мобильной версии? :) Или к чему вы это?

0

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

Дизайнер всея Руси шлёт на йух саму возможность существования мобильного сайта, адаптивно отображающегося на вашем смартфоне.

а, ну раз он на apple посмотрел, то в мире не нужно делать мобильные сайты, верно. А по сути, очень круто когда есть мобильная версия. Очень удобно. Да и Лебедева, за рубежем не знает никто.

Тема вообще умный мужик, но с мобильной версией перегнул. Даже тот же ЖЖ читать с телефона не ахти как удобно

Слишком часто мобильную версию урезают по функционалу, и становится проще загрузить обычную :/

0

Разьве путешественник должен разбираться в дизайне и верстке?

0

Если вы про Лебедева, то он все-таки дизайнер (арт-директор, если быть точным) или я не понял сарказм.

0

Судя по коду они используют подобие requirejs.

Используют github.com/jakearchibald/es6-promise

А насчет <figure>, добро пожаловать в будущее www.polymer-project.org/

> А насчет <figure>, добро пожаловать в будущее
Какой смысл в использовании семантических элементов для украшательств?

0

В чем особенность тега <figure>? Я чет не очень понял, он юзается повсюду.

Использование семантичных элементов, для обеспечения внешнего вида это плохо (так гласит спецификация). Тэгом figure необходимо оборачивать именно контент <figure><img></figure>.

Джипег головного мозга c2n.me/iTjo3Q

Про программную реализацию не по делу. Подход в принципе пересекается с подходом bootstrap, примерно такое же наименование классов, такое же и назначение. Использование обработчиков событий прямо в html, да, не есть круто, но иногда без этого никак. Тем более на таком крупном ресурсе.

Суть не в том, что плохо использовать css фреймворки, а в том, что очень плохо оставлять помойку из технических классов от этих фреймворков. Идеальный вариант, скрыть техническую реализацию за абстрактным классом, который уже отнаследуем (или примиксуем).

0

Пример в студию, а то много умных слов ни о чем.

Класс .article наследует fluid, fixed, unwrap, примиксовано colored, wide и т. д.

Использование.
<div class="article"></div>

Или так?
<div class="fluid fixed unwrap colored wide"></div>

давайте скрины где конкретно это есть, и линки желательно на страници апловые

0

view-source:http://www.apple.com/ipad/

0

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

разработчики под iOS знают как иногда приходиться материться из-за особенности iOS SDK и это нормально. все делают ошибки

0

Да, именно так, поэтому вывод в статье соответствующий: "Сайт Apple является показательным примером грамотно спроектированного интерфейса, который в течении своей жизни сохраняет структуру".

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

Джон, ты поверстай крупные проекты, где не 10 страниц для вордпресса, а страниц 50-60 и еще добавляются. И потом, через пару годиков, можешь дискутировать на тему использования классов :D

Подход к структурированию css/html неаккуратен в следующем: присутствуют избыточность кода (вот яркий пример), абстрактная логика в наименованиях переменных и пренебрежение CSS-наследованием


Автор, скажи, ты версткой занимаешься или только умных слов нахватался? Поржал над тобой.

Спасибо за критику, я попросил dev lead прокомментировать все вопросы по технической части, если вам действительно интересно, прочитайте обсуждение выше.

у кого-то много свободного времени

Когда мы начали заниматься адаптацией сайтов для мобайла 2 года назад, многие "умники" приводили в пример сайт эппла: видите ли, у них сайт обычный. За это время сделали адаптивным 70 сайтов (eski.mobi/worx) и продолжаем. А всё потому что удобный сайт на смартфоне тупо увеличивает продажи. Эпл — добро пожаловать в клуб)))

Спасибо, очень интересный разбор! Хотелось бы больше технических моментов.
Хотел добавить интересный момент. В лекции с wwdc они говорили, что "гамбургер меню" — это зло. А тут сами его поставили. Хотя может быть, это относится к приложениям.
developer.apple.com/videos/wwdc/2014/#211

Garamond, гарамон... =)

0

У меня презентация идеально отработала. Я слегка пофапал на текстовую трансляцию в плане приятного минимализма и кайфовых картинок на ретине. И когда при прокрутке вних видос сворачивался в мелкий квадратик - приятный нюанс.

0

Кстати store.apple.com сделан с помощью фреймворка can.js (canjs.com) (конкурент angular.js), хотя он не имеет такого распространения и популярности, разработчикам очень рекомендую приглядеться к нему.

0

Да так же Лебедев говорил и про знак рубля - что он нахер не нужен, что все привыкли писать р., а потом сами его и сделали)

0

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

Сейчас обсуждают
Maga Abdurakhmanov

1. Google Authenticator на часах, очень удобно, что всегда под рукой. За телефоном обычно надо лезть
2. SMS коды, тоже самое что Google Authenticator
3. Нотифаи, настроенные в соответствии с важностью, не надо лезть за телефоном ты сразу видишь, особенно удобно с встречами
4. Не отвлекает людей вокруг звуки твоего телефона (я его всегда на тихом режиме держу теперь)
5. Будильник в часах будит только тебя виброй
6. Если забыл телефон дома и ушел, часы напомнят виброй
7. Управление музыкой, не надо искать телефон, погромче или на паузу поставить
8. Когда едешь на велосипеде, а тебе пишут смс/в телеграм, можно голосом ответить с часов, не доставая телефон
9. Тречит сон и шаги, так-как часы всегда на запястье (7 дней на зарядке)

Есть на рынке другие часы, которые это могут?

От $740 млн до $40 млн за один год
0
Nikolay Kachev
Tredwear

Как будто балтику 9 рекламируют, а не напиток для интеллектуалов. Типа наебенься с нами чувачок

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Sp Soul
ITSys

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

Штаб-квартира: Петербургский офис игровой студии Playkot
0
Аркадий Мамулян

>сформирована за счет гос субсидии

а можно поподробнее?

ФСБ изъяла документы в офисе «Почты России» из-за премии гендиректору компании
0
Konstantin Kharitonov
Cerebro

Вот что написано в описании к видео - "Unfortunately, we couldn’t make it to TED, but we wanted to share one of the things that we’d planned to share at the talk. This is a game we’re playing around the office right now"
То есть вся соль - вета им делала контент для гаймплай или визуализировала файковый ролик?

The Information сообщило о подделке демонстрационного видео AR-очков Magic Leap
0
Показать еще