[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","apple","\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","apple_store","\u043d\u043e\u0432\u044b\u0439_\u0441\u0430\u0439\u0442"], "comments": 42, "likes": 20, "favorites": 0, "is_advertisement": false, "section_name": "default", "id": "4981" }
Редакция vc.ru
11 530

Новый сайт 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 года:

#Интерфейсы #Apple #редизайн #apple_store #новый_сайт

Статьи по теме
Масштабный редизайн Airbnb: мнения экспертов
Новый фирменный стиль Foursquare: мнения экспертов
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления