[Из песочницы] Футуристический пользовательский интерфейс новой Tesla Model 3

Привет, Гиктаймс! Представляю вашему вниманию перевод статьи What Tesla«s Model 3 UI Reveals About Its Vision for the Future автора Tom Johnson.

95sxhnsmhmsnkqjfnfowcb2vmvg.png


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

Если вам интересна эта тема, тогда зацените Figma-файл, который я приготовил специально для вас, а также по ссылке вы найдете сделанный мной прототип.
Я с самого начала следил за всеми событиями, происходящими вокруг Tesla Model 3. В прошлом году мне наконец-то удалось попробовать на деле Model S, после чего я был приятно поражен тем, насколько легко управлять этим автомобилем и насколько чутко он реагирует на каждое движение водителя. Надо ли говорить, что я не мог не влюбиться в Tesla и сразу же загорелся идеей о ее «доступной» версии, чьи характеристики мало уступают опробованной мною модели. Как и многие из поклонников Tesla я следил за каждой новостью, посвященной Tesla Model 3, и перекопал тонны веб-страниц в поиске мельчайших подробностей о том, как будет работать даже самая незначительная деталь этого автомобиля.

Задумки инженеров, которые планировалось осуществить в данной модели, были по-настоящему крутые, однако мне мало верилось в то, что они полностью откажутся от традиционной приборной панели в новой Tesla. Может быть, это звучит круто, но не для занимающихся маркетингом людей и уж тем более не для покупателей. Тогда я разумно полагал: «Да ладно, это всего лишь идеи, мало ли что можно навыдумывать».

Что ж…вот тут-то я и не угадал: широкой публике предстал автомобиль, в котором традиционной приборной панелью даже и не пахло…

И переключателем скоростей…

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

И даже ручками от бардачка …

mn0v92oajszpzbtx5z0i81wwl5s.jpeg


Теперь все эти элементы располагаются на сенсорном экране, размещенном аккурат посередине авто. И что самое главное: инженерам даже не пришло в голову как-то скрыть этот торчащий посередине автомобиля неуклюжий экран, что наводит на мысль о среднем пальце, направленном прямиком в лицо всему миру автомобилестроения. Таким образом, все скептики такого подхода, а также другие автомобильные компании, которые ратовали за неприкосновенность привычной приборной панели, получили смачное «F*ck you». Сперва Tesla отказалась от двигателей как таковых, но и этого показалось мало ее инженерам и дизайнерам, и они решили продолжать в том же духе до тех пор, пока вся автомобильная индустрия с более чем вековой историей не содрогнется.

На самом деле все было немного иначе


Новости о предстоящем выходе новой модели Tesla наполнили меня благоговейным ужасом. Однако в этот раз я принял сторону скептиков с их множественными недовольными, пренебрежительными и предвзятыми возгласами.

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


Мне безумно хотелось узнать о том, каким образом инженерам Tesla удалось скрыть все элементы управления авто за стеклянной панелью дисплея. Так что я начал буквально штудировать Интернет в поисках соответствующей информации о дизайне пользовательского интерфейса новой модели. Стоит признаться, что это заняло у меня некоторое время, однако в конечном итоге мне посчастливилось наткнуться на интересный проект, представленный дизайнером Эндрю Ходладом (Andrew Goodlad). Тогда я решил, что ему удалось воссоздать пользовательский интерфейс готовящейся к выходу на рынок Tesla Model 3, используя для этого информацию, выложенную в веб, а также будоражащие фантазию видео на YouTube, посвященные интерфейсу нового авто. Этот парень создал настоящий прототип интерфейса и все что с ним связано.

Почему я решил самостоятельно воссоздать пользовательский интерфейс


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

Итак, я скачал всевозможные изображения интерфейса в формате jpeg для любых экранов с помощью CSS Peeper.

Далее я выложил их в Figma.
После этого я не медлили ни секунды. Я сразу же начал воссоздавать пользовательский интерфейс Tesla Model 3 с помощью найденных изображений. Я придумал иконки элементов на приборной панели, подобрал для них цвета, разработал пользовательский вид выводимой на панель дорожной карты, собрал воедино все Figma-элементы: переключатели, кнопки, в общем, все, что только можно было. Мне такой процесс представлялся как своеобразная терапия пациента: я отслеживал шаг за шагом, как протекает тот или иной процесс создания каждого элемента пользовательского интерфейса. Нечто подобное я уже переживал, когда был ребенком и увлекался комиксами. Как когда-то давно мои любимые герои комиксов — Snoopy и Bugs Bunny — научили меня рисовать, так сейчас я начал понимать все сложности работы над созданием дизайна пользовательского интерфейса автомобиля.

Мне такой процесс представлялся как своеобразная терапия пациента: я отслеживал шаг за шагом, как протекает тот или иной процесс создания каждого элемента пользовательского интерфейса.

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

pa0vn19dvknkcykqph4zepe0_de.png


Прототип:

eqo_bnnhncsotsx9lrlbzpusjwa.png

От автора: если вам интересно, каким образом можно настроить Figma-файл, то просто напишите об этом в комментариях. Когда я почти закончил воссоздавать задуманный мною прототип с помощью такого файла, я с удивлением отметил, что использование отдельных компонентов для данной цели значительно ускоряло процесс создания прототипа. На самом деле, весь этот процесс занял у меня около получаса, и, признаться, я никак не ожидал, что все пройдет настолько БЫСТРО. Поначалу, я всего лишь хотел объединить несколько изображений, выведенных на экран, для того чтобы довести дело до конца. Однако теперь я всерьез подумываю над тем, чтобы написать отдельную статью, посвященную этому процессу.

Что нового я узнал о дизайне пользовательского интерфейса Model 3


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

Давайте разбираться… У автомобиля отсутствуют какие-либо ручки, хотя у него хотя бы есть рулевое колесо (и на том спасибо). Для того чтобы включить стеклоочистители, вам нужно нажать кнопку на экране (*заметка от автора: для данной цели в авто все-таки предусмотрен рычаг, однако скорость стеклоочистителей все равно регулируется с помощью кнопок на экране). Вам, опять же, придется нажимать кнопки на экране, для того чтобы открыть бардачок или для того чтобы задействовать ручной тормоз (*заметка от автора: ручной тормоз должен активироваться автоматически, однако, есть мнение, что с помощью настроек можно установить срабатывание тормозов при нажатии кнопки). Не очень уж удобно для водителей, не правда ли? Теперь во время вождения водитель больше не может полагаться на свою реакцию и мышечную память, отточенные в течение многих лет.

Вы могли бы решить, что инженеры новой Tesla внесли такие изменения для того, чтобы автомобиль казался более продвинутым, опасным или не таким как все… Однако это не так: просто инженеры новой Tesla решили подготовить людей к тому, что в обозримом будущем автомобили будут ездить без помощи водителей.

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


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

Также как и в случае с Models S и X в новой Tesla мог быть установлен вертикальный экран, но вместо этого соотношение ширины и высоты в Model 3 составляет 8:5, а разрешение — 1920×1200 пикселей. Вы может спросить, ну и дальше что? А вот что:

  • Это HDTV, ребята!
  • Нижние (постоянные) элементы управления имеют высоту 120 пикселей.
  • 1200–120=1080 пикселей.
  • 1920×1080.


54fdbxwhy5s5_2niov38cw-pynm.gif


HDTV, предусмотренное в новой Tesla, как бы намекает, что центральный экран управления был создан, в первую очередь, для просмотра чего-либо на нем, а не для удобного вождения. Так что можно смело заявить, что Model 3 — это мессия грядущего будущего, в котором автомобили будут ездить без помощи водителей. Это не просто автомобиль с необычной системой управления, это настоящая гостиная на колесах. Возможно, это немного преждевременное заявление — учитывая постепенное развитие технологий — однако вполне вероятно, что в скором времени лучшим местом для просмотра фильмов будет именно салон вашего любимого железного коня.

Это не просто автомобиль с необычной системой управления, это настоящая гостиная на колесах.
Нет, я не являюсь правой рукой Илона Маска. Все приведенные выше заявления — это всего лишь мои домыслы и предположения. Так что очень вас прошу: не надо кидать в меня камнями, если, внезапно, я в чем-то окажусь неправ.

Разделение составляющих интерфейса


Ниже приведены несколько скриншотов различных составляющих интерфейса.

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


f39kwptm6xvhv2ovcf8ya7-9cw8.png


По мере разработки прототипа окно навигации стало походить на экран мобильных устройств.

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

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


kdg4nv7k5ttddg2c7l0flhrqxku.png


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

Такое впечатление, что в Model 3 для любой ситуации предусмотрены свои специальные элементы управления. Например, во время парковки на экране показаны только элементы, необходимые для парковки автомобиля. Такой подход может показаться очевидным, однако это по-настоящему удобно.

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


kdg4nv7k5ttddg2c7l0flhrqxku.png


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

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

Воспроизведение музыки


kdg4nv7k5ttddg2c7l0flhrqxku.png


Кстати, с переднего пассажирского сиденья можно дотянуться до элементов управления (свернуть/развернуть) музыкального плеера…

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

Заключение


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

У них обоих нет кнопок.

И вот что мне пришло в голову:

xezpx0mnueugz0dzidpbzy5k3ly.png

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

Тогда почему бы нам не провести соответствующие параллели с авто-индустрией? Почему мы (или лично я), видя перед собой один единственный сенсорный экран вместо привычной панели управления, даже не хотим себе представить, что это когда-либо станет общепринятым подходом. Разве не нечто подобное сделала компания Apple, отказавшись от стандартной клавиатуры?
Вы можете возразить, мол: то был телефон, а это автомобиль — сферы применения уж очень отличаются.

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

Оригинал. Автор: Tom Johnson.

© Geektimes