Если вы дизайнер или любитель авто, то эта статья для вас. Я разобрал детали элементов управления приборной панели и интерфейса Tesla Model 3 — первого серийного электрокара с управлением посредством только лишь сенсорного экрана. Дизайн интерфейса автомобиля говорит нам о долгосрочной стратегии Tesla и их видении будущего без водителя.

Вот мой исходный файл Figma, а вот ссылка на созданный мной прототип.

С самого начала я следил за Tesla Model 3. Испытав Model S в прошлом году, я влюбился в ее управление, и то, насколько тонко у Tesla настроен общий опыт работы с клиентами. Поэтому, возможно, как и многие из вас, я просмотрел каждое объявление о Model 3 и лазил в интернете, в поисках подробностей о новом авто.

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

Ну … я зря кивал. Они начали продавать это авто без приборной панели.

Или ручек управления.

Или вентиляционных отверстий для кондиционирования воздуха.

Или ручки для открытия бардачка.

Tesla панель
Сенсорные кнопки
Вместо этого они все запихнули в сенсорный экран, вмонтированный прямо в середине автомобиля. Они даже не пытались скрыть его. По правде говоря, этот экран посередине был гигантским средним пальцем всему остальному миру автомобилестроения. Неприкрытый «F-you» для скептиков, неверующих и других автомобильных компаний. Тесла избавились от двигателя, но они пошли еще дальше, чтобы встряхнуть 100-летнюю индустрию. Хоть у Model 3 и есть четыре колеса, и корпус в форме автомобиля, но на этом ее сходство с большинством автомобилей заканчивается.

Она отличается

Возможно, новости Tesla меня испугали, но они меня не убедили. Я присоединился к толпам критиков кричащих: «Чтоо???» и «Фу!»

Хоть у Model 3 и есть четыре колеса, и корпус в форме автомобиля, но на этом ее сходство с большинством автомобилей заканчивается.

Я хотел знать, как Tesla спрячет все управление автомобилем за куском стекла, поэтому я начал искать в интернете любую информацию о пользовательском интерфейсе. Это заняло некоторое время, но я, наконец, наткнулся на проект дизайнера по имени Эндрю Гудлед, который, я думаю, воссоздал интерфейс Tesla Model 3 из пресс-релизов и видеороликов с YouTube о салоне автомобиля. Он сделал прототип и все такое.

Почему я решил переработать интерфейс

Его прототип был классным, но статических образов было недостаточно, чтобы удовлетворить мое любопытство. Я хотел проанализировать все компоненты и понять, как именно Tesla разработали свою безумную новую приборную панель … и почему.

Итак… я скачал jpeg-файлы всех экранов используя CSS Peeper.

А затем, я вставил их в Figma.

… И потом, без колебаний, я начал воссоздавать по изображениям интерфейс Tesla Model 3. Я сделал иконки, подобрал цвета, разработал оригинальный вид карты, собрал вместе компоненты Figma, переключатели, кнопки, все. Я скопировал чужую работу, как делал раньше с комиксами Sunday, когда я был ребенком. Если трассировка Snoopy и Bugs Bunny научила меня рисованию, возможно, эта трассировка поможет мне задуматься о сложности создания пользовательского интерфейса автомобиля.

Я скопировал чужую работу, как делал раньше с комиксами Sunday, когда я был ребенком.

Большую часть своих дизайнов я делаю в Figma. Ранее я писал почему, но в основном, потому что это веб-интерфейс, поэтому я могу легко ими делиться. Это также позволяет мне эффективно и легко создавать и прототипировать интерфейсы. Вот ссылка на исходный файл, если вы занимаетесь такими вещами:

Tesla интерфейс в Figma

https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3
Ссылка на Copy 1
Ссылка на Copy 2
Ссылка на Copy 3

А вот кликабельный прототип этого же файла:

Прототипы Tesla в Figma
Прототипы Figma?
Примечание: Если вам интересно, почему и как файл Figma так настроен, дайте мне знать в комментариях. К концу, когда я составил его вместе в прототипе, я обнаружил, что использование системы компонентов таким образом, как сделал я, позволяло нереально быстро работать с прототипом. На самом деле, эта часть заняла у меня меньше получаса, чего я совсем НЕ ожидал. Я просто собирался связать несколько экранов вместе для этой статьи, но теперь думаю, что я должен написать об этом отдельно. Если я когда-нибудь это сделаю, я оставлю ссылку прямо здесь → …

Что я узнал из дизайна интерфейса Model 3

Этот автомобиль разрабатывался не для идеального опыта вождения

Чтооо???

Да. Вы не ослышались.

Tesla Model 3 — это авто, которое разрабатывалось без мысли о водителе. Преднамеренно.

Нет ручек. Только рулевое колесо. Вам нужно нажать на экран, чтобы включить стеклоочистители. Вам нужно нажать на экран, чтобы открыть бардачок. Вам нужно нажать на экран, чтобы включить аварийный тормоз. Разве это не звучит ужасно для водителей? Они больше не могут полагаться на свой инстинкт и мышечную память, чтобы управлять своей машиной.

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

Этот автомобиль был разработан для езды пассажиром, а не для управления авто

Один фактор пользовательского интерфейса сказал мне все -это разрешение экрана.

Этот автомобиль мог выпускаться с вертикальным экраном, как и модели S и X. Но, нет. Вместо этого, у Model 3 экран с соотношением сторон 8:5 и разрешением примерно 1920×1200px. Почему это важно?

Это HDTV, народ.

Хорошо, нижние (постоянные) элементы управления 120px в высоту.

1200−120=1080.

1920×1080.

Это HDTV, народ.

HDTV монитор в Tesla

Netflix и острые ощущения

Разрешение HDTV предполагает, что Tesla сделала свою центральную консоль для просмотра видео, а не для вождения автомобиля. Этот плохой «мальчик» целиком нацелен на будущее без водителей. Это не автомобиль со странной приборной панелью, это мобильная гостиная. Когда правила и технологии на месте, не будет лучшего места для просмотра фильмов, чем прямиком в автомобиле.

Это не автомобиль со странной приборной панелью, это мобильная гостиная.

Я ни в коем случае не помощник Элона Маска — это просто догадки, мнения и предположения. Так что, пожалуйста, потушите факелы и опустите вилы, если и когда я окажусь не прав.

Разбор пользовательского интерфейса

Вот несколько скриншотов разных частей интерфейса.

Режим вождения — В пути

Интерфейс навигации Tesla
Поворот за поворотом навигация выглядит очень похоже на интерфейсы телефонов, но видеть все шаги сразу — это хорошо

Ссылка

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

Режим парковки

Интерфейс редима парковки в Tesla
Обратите внимание, что элементы управления багажником и капотом также находятся на сенсорном экране

Ссылка

Похоже, Model 3 имеет множество контекстных элементов. Например, при парковке отображаются только элементы управления, которые относятся к парковке. Это может показаться очевидным, но это довольно умное решение.

Быстрые настройки

Быстрые настройки в Tesla
Кроме того, значки на рулевом колесе являются X-фактором. Я понятия не имею, как они работают

Ссылка

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

Элементы управления музыкой

Управление музыкой в Tesla
Неудобное для пассажира управление

Ссылка

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

Мысли в заключение

Недавно я пересматривал выступление, где Стив Джобс представил оригинальный iPhone и был поражен явным сходством между Model 3 и iPhone.

Отсутствие физических кнопок.

Вот часть, которая бросилась мне в глаза:

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

Но почему мы не смотрим на автомобили подобным образом? Почему мы, или, может быть, только я, смотрим на дисплей в машине и считаем, что это не сработает? Чем это отличается от того, что Apple отказалось от клавиатуры?

Знаю, вы скажите, то был телефон, а это автомобиль. Методы взаимодействия и контекст использования совершенно отличаются.

Но программное обеспечение требует обновлений. Физические кнопки нельзя починить по воздуху. Их нельзя улучшить со временем. Они не могут измениться. Возможно, все-таки, это и не такая сумасшедшая идея.

Автор — UX дизайнер живущий недалеко от Атланты. Посмотрите его работы на его сайте.

Спасибо Carmel DeAmicis.