Tesla의 Model 3 UI가 미래에 대한 비전에 대해 밝힌 내용

디자이너 / 자동차 애호가라면이 게시물이 적합합니다. 저는 대중 시장 최초의 터치 스크린 전용 전기 자동차 인 Tesla Model 3의 대시 보드 컨트롤 및 인터페이스에 대한 세부 정보를 세분화했습니다. 자동차의 UI 디자인은 테슬라의 장기 전략과 운전자없는 미래를 향한 그들의 시선에 대해 많은 것을 알려줍니다.

여기 내 피그 마 소스 파일과 여기 내가 만든 프로토 타입에 대한 링크가 있습니다.

처음부터 테슬라 모델 3의 사가를 따라 왔습니다. 작년에 Model S를 테스트하고, Tesla가 어떻게 운전하고 어떻게 튜닝을했는지에 대한 사랑에 빠졌고, 나는 그 같은 경험의 "저렴한"버전의 전망에 매료되었다. 그래서 여러분 중 많은 사람들이했던 것처럼, 나는 3의 각 발표를 보았고 웹의 레이어를 벗겨서 댕글 한 물건의 모양과 느낌에 대한 세부 정보를 검색했습니다.

첫 번째 컨셉은 시원했지만, 차가 소비자를 위해 준비되었을 때 Tesla가 대시 보드를 버릴 것이라고 생각하지 않습니다. “지금은 멋지지만 마케팅 담당자 나 소비자는 그렇게하지 않을 것입니다. 그것은 단지 개념 일뿐입니다.”라고 말했다.

글쎄요 ... 나의 끄덕임은 틀 렸습니다. 그들은 대시 보드없이 지독한 물건을 배송했습니다.

또는 손잡이.

또는 에어컨 통풍구.

또는 글러브 박스를 여는 손잡이.

산세 버튼

대신 그들은 차 한가운데있는 터치 스크린에 장착 된 smack-dab에이 모든 것을 붙였습니다. 중간 화면은 기본적으로 나머지 자동차 제조 세계의 거대한 가운데 손가락이었습니다. naysayers, 불신자 및 안전 재생을 주장하는 다른 자동차 회사에 대한 미묘한 "F-you". 테슬라는 엔진을 제거했지만 100 년 전 산업을 뒤흔들 기까지는 걸렸다. 신성한 것은 없습니다. 모델 3에는 바퀴 4 개와 차 모양의 차체가있을 수 있지만 대부분의 자동차와의 유사성이 끝나는 곳입니다.

이 것은 다르다

테슬라의 뉴스가 끔찍했을 수도 있지만 완전히 팔리지는 않았습니다. 나는 많은“whaaaa ???”와 몇 가지“harumphs”와“pshaw”가 좋은 척도로 던져 져서 비판적인 무리에 합류했습니다.

모델 3에는 바퀴 4 개와 차 모양의 차체가있을 수 있지만 대부분의 자동차와의 유사성이 끝나는 곳입니다.

Tesla가 유리창 뒤에 차에 대한 모든 제어 기능을 숨기는 방법을 알고 싶었 기 때문에 UI에 대한 모든 정보를 웹에서 검색하기 시작했습니다. 시간이 좀 걸렸지 만 마침내 Andrew Goodlad라는 디자이너가 프로젝트를 보았습니다. Andrew Goodlad는 보도 자료와 Tesla Model 3 UI를 자동차 인테리어의 흔들리는 YouTube 비디오에서 다시 만들었습니다. 그는 프로토 타입과 모든 것을 만들었습니다.

UI를 다시 작성하기로 결정한 이유

그의 프로토 타입은 멋졌지만 정적 이미지는 내 호기심을 없애기에 충분하지 않았습니다. 구성 요소에서 지옥을 분석하고 Tesla가 미친 새 자동차 대시 보드를 어떻게 설계했는지, 왜 그런지 정확히 이해하고 싶었습니다.

그래서… CSS Peeper를 사용하여 모든 화면의 jpeg를 다운로드했습니다.

그리고 나서 그것들을 Figma에 붙여 넣었습니다.

…… 그리고 잠시 후 망설이지 않고 이미지에서 Tesla Model 3 UI를 다시 만들기 시작했습니다. 아이콘을 만들고, 색상을 샘플링하고, 커스텀 맵 박스 뷰를 디자인하고, 피그 마 컴포넌트, 스위치, 버튼 등 모든 것을 하나로 묶었습니다. 내가 일요일 만화를 가진 어린 시절에했던 것처럼 다른 사람의 작품을 추적하는 것은 치료법이었습니다. Snoopy와 Bugs Bunny를 추적하는 방법을 가르쳐 주 셨다면, 여기서 추적하면 자동차 UI를 만드는 것이 어려울 수 있습니다.

내가 일요일 만화를 가진 어린 시절에했던 것처럼 다른 사람의 작품을 추적하는 것은 치료법이었습니다.

나는 대부분의 디자인 작업을 Figma에서합니다. 과거에는 왜 그런지에 대해 글을 썼지 만 기본적으로 웹 기반이므로 모든 사람과 쉽게 공유 할 수 있습니다. 또한 이와 같은 인터페이스를 실제로 효율적이고 쉽게 만들 수 있습니다. 다음과 같은 유형의 소스 파일에 대한 링크는 다음과 같습니다.

https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3

다음은 동일한 파일의 클릭 가능한 프로토 타입입니다.

https://www.figma.com/proto/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?scaling=contain&node-id=37%3A2923

피그 마 프로토 타입
참고 사항 : Figma 파일이 설정된 방식과 방법에 관심이있는 경우 의견에 알려주십시오. 프로토 타입으로 구성 할 때 마지막으로, 내가 한 방식으로 구성 요소 시스템을 사용하면 프로토 타입을 만드는 것이 엄청나게 빠르다는 것을 알았습니다. 사실, 그 부분은 30 분도 채 걸리지 않아서 말하지 않을 것입니다. 이 게시물의 목적을 위해 몇 개의 화면을 함께 연결하려고했지만 이제는 그 미친 점에 대해 별도로 써야한다고 생각합니다. 내가한다면, 바로 여기에 연결하겠습니다 →… ..

Model 3 UI 디자인에서 배운 것

이 차는 완벽한 운전 경험을 위해 설계되지 않았습니다

Whattt ???

예. 내가 말했어.

Tesla Model 3은 운전자를 염두에두고 설계되지 않은 차량입니다. 의도적으로

노브가 없습니다. 선을 위해 스티어링 휠이 거의 없습니다. 앞 유리 와이퍼를 켜려면 화면을 탭해야합니다. (* 편집 * 콘솔 레버를 켤 수 있지만 화면을 통해 주파수가 제어됩니다) 글러브 박스를 열려면 화면을 탭해야합니다. 비상 브레이크를 켜려면 화면을 탭해야합니다 (* 편집 * 또한 자동으로 표시되지만 수동 응용 프로그램이 설정에있는 것으로 나타납니다). 이 모든 것이 운전자에게 끔찍하게 들리지 않습니까? 그들은 더 이상 그들의 본능과 근육 기억에 의존하여 차를 운전할 수 없습니다.

나는 테슬라가 단순히 초라하거나 위험하거나 다른 것이라고 생각하지 않습니다. 그들은 운전자가없는 세상을 위해 사람들을 준비시키기 위해 이것을했습니다.

이 차는 승마 경험을 위해 설계되었습니다

UI에서 하나의 요소와 하나의 요소만으로 모든 것을 말해줍니다 : 화면 해상도.

이 차는 모델 S와 X와 같이 세로 화면으로 나왔을 수 있지만 그렇지 않았습니다. 대신 모델 3의 화면비는 8 : 5이며 해상도는 약 1920x1200px입니다. 이것이 왜 중요한가?

HDTV입니다. 여러분.

하단 (지속적) 컨트롤의 높이는 120px입니다.

1200–120 = 1080.

1920x1080.

HDTV입니다. 여러분.

넷플릭스와 스릴

좋아, 냉기와 운율이 좋은 단어를 찾는 것은 어렵습니다. 나쁜 말장난이야

HDTV 해상도는 테슬라가 차를 운전하는 것이 아니라 사물을 볼 수 있도록 센터 콘솔을 만들었다는 것을 암시합니다. 이 나쁜 소년은 무인의 미래에 대해 잘 알고 있습니다. 이것은 이상한 대시 보드가있는 자동차가 아니라 모바일 거실입니다. 규제와 기술이 적용되면 차 한가운데서 우연히 치는 것보다 영화를 볼 수있는 곳이 없다는 것을 이해하고 오래 전부터 놀아 왔습니다.

이것은 이상한 대시 보드가있는 자동차가 아니라 모바일 거실입니다.

엘론 머스크의 오른손은 결코 아닙니다. 추측, 의견 및 추측 일뿐입니다. 제발, 내가 잘못했을 때 횃불을 꺼내고 갈퀴를 다시 건초로 묶으십시오.

UI 분석

다음은 UI의 다른 부분에 대한 스크린 샷입니다.

운전 모드 — 경로

단계별 탐색은 휴대 전화 UI와 매우 유사하지만 모든 단계를 한 번에 보는 것이 좋습니다.

링크 : https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=37%3A2923

대시 보드는 운전자의 팔 길이 내에 있으며 운전자의 주변 뷰에있을 것입니다. 오른손 드라이브 시장의 경우이 견해를 쉽게 바꿀 수 있습니다. 바로 스마트 엔지니어링.

주차 모드

모든 트렁크 및 펑크 컨트롤도 터치 스크린에 있습니다.

링크 : https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14002

모델 3에 많은 맥락 요소가있는 것 같습니다. 예를 들어, 주차 할 때 주차 할 수있는 컨트롤 만 표시됩니다. 분명해 보이지만 꽤 똑똑합니다.

빠른 설정

또한 스티어링 휠의 노브는 X-Factor입니다. 나는 그들이 어떻게 작동하는지 전혀 모른다.

링크 : https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=178%3A1567

이 자동차에는 많은 설정이 있지만 가장 많이 사용하는 기능을 볼 수 있도록 빠른 컨트롤 섹션을 구성 할 수있는 것 같습니다. 이것들이 자동으로 채워질 수도 있지만 알 방법이 없습니다.

음악 컨트롤

확장 및 축소 제어 기능이 승객이 도달 할 수 있다는 점에 주목할 가치가 있습니까? hmmm (아래쪽 화살표, 오른쪽 위)

링크 : https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14050

개별 노래가 아닌 앨범에 분명한 강조가있는 것 같으므로이 차가 얼마나 많은 음성 제어를 할 수 있을지 궁금합니다.

결산 생각

최근 스티브 잡스가 오리지널 아이폰을 소개 한 기조 연설을보고 있었고, 모델 3과 아이폰과 매우 유사했습니다.

실제 버튼이 없습니다.

나에게 튀어 나온 부분은 다음과 같습니다.

잡스는 업계의 다른 모든 주요 스마트 폰을 관객들에게 보여 주었고, 뒤늦게 말하면 혼란스럽고 고정 된 물리적 키가 오래되지 않았습니다. 오늘날 누군가가 고정 된 물리적 하드웨어를 갖춘 전화기를 소개해야한다면 건물에서 웃게 될 것입니다.

그러나 왜 자동차를 같은 방식으로 보지 않습니까? 왜 우리 또는 어쩌면 내가 차 안에서 하나의 디스플레이를보고 그것이 어떻게 작동하지 않을지 고민 하는가? 애플이 키보드를 버릴 때와 다른 점은 무엇입니까?

나는 당신이 무슨 말을하는지 알고 있습니다. 그것은 전화였습니다. 이것은 차입니다. 상호 작용 방법과 사용 사례는 분명히 다릅니다.

그러나 소프트웨어는 업데이트 할 수 있습니다. 물리적 버튼은 무선으로 수정할 수 없습니다. 그것들은 향상 될 수 없습니다. 그들은 바꿀 수 없습니다. 어쨌든 이것은 미친 아이디어가 아닐 수도 있습니다.

저는 Nashville의 제품 디자이너입니다. 내 웹 사이트에서 내 작업을 확인하십시오. 가끔 트윗을하지만 대부분 아내와 시간을 보냅니다. 그녀는 라이프 스타일 블로거이자 놀라운 여성입니다. 또한, Bernese 산 개인 Hondo도 꽤 시원합니다. 나는이 기사를 쓰도록 Figma에 의해 보상을 받았지만, 나는 스스로 UI를 만들고 디자인했다.