TeslaのModel 3 UIが将来のビジョンについて明らかにしたこと

あなたがデザイナー/車愛好家なら、この投稿はあなたのためです。私は、最初の大衆市場、タッチスクリーンのみの電気自動車であるテスラモデル3のダッシュボードコントロールとインターフェイスの詳細を分析しました。自動車のUIデザインは、テスラの長期戦略と、ドライバーのいない未来に対する彼らの目について多くのことを教えてくれます。

これが私のFigmaソースファイルであり、ここに私が作ったプロトタイプへのリンクがあります。

私は最初からテスラモデル3の物語を追ってきました。昨年モデルSをテスト駆動し、それがどのように駆動し、Teslaが顧客体験全体にどれほど熱心に同調しているかに恋をしたことで、私はその同じ体験の「手ごろな」バージョンの見通しに夢中になりました。そこで、皆さんの多くがそうであったように、3の各発表を見て、ウェブのレイヤーを剥がして、ダングの見た目と感じ方の詳細を探しました。

最初のコンセプトはクールでしたが、車が消費者に準備ができたときにテスラがダッシュボードを捨てるとは信じていませんでした。 「それは今ではクールかもしれませんが、マーケティング担当者や消費者はそれを飛ばせません。それは単なる概念です」と私は言いました。

まあ...私のうなずきは間違っていました。彼らはダッシュボードなしでいまいましいものを出荷しました。

またはノブ。

またはエアコンの通気口。

または、グローブボックスを開くハンドル。

Sans Buttons

代わりに、それらはすべて、車の中央にあるタッチスクリーンに取り付けられたスマックダブに貼り付けられました。彼らはそれを隠そうともしていませんでした。中画面は基本的に、自動車製造業界の残りの部分にとって巨大な中指でした。否定論者、不信心者、およびそれを安全にプレイすることを主張した他の自動車会社に対するそれほど微妙ではない「F-you」。テスラはエンジンを取り除きましたが、100年前の産業を揺るがすのに必要な範囲まで行きました。神聖なものは何もありません。モデル3には4つの車輪と車の形のボディがありますが、ほとんどの車との類似性はそこにあります。

このことは違う

テスラのニュースは恐ろしいかもしれませんが、完全には売れませんでした。私は多くの「whaaaa ???」といくつかの「harmphs」と「pshaw」を適切な方法で投入して、重要な群衆に参加しました。

モデル3には4つの車輪と車の形のボディがありますが、ほとんどの車との類似性はそこにあります。

Teslaが車のすべてのコントロールをガラス板の後ろに隠す方法を知りたかったので、UIに関するあらゆる情報をインターウェブで探し始めました。しばらく時間がかかりましたが、ようやく、プレスリリースと車のインテリアの不安定なYouTubeビデオからTesla Model 3 UIを再現したAndrew Goodladというデザイナーのプロジェクトに出会いました。彼はプロトタイプとすべてを作りました。

UIを再作成することにした理由

彼のプロトタイプはクールでしたが、静止画像は私の好奇心を満足させるには十分ではありませんでした。コンポーネントの地獄を分析し、テスラがクレイジーな新車のダッシュボードをどのように設計したか、そしてその理由を正確に理解したかった。

それで…CSS Peeperを使用して、すべての画面のjpegをダウンロードしました。

そして、それらをFigmaに貼り付けました。

……そして、何のheもなく、私はテスラモデル3 UIを画像から再現し始めました。アイコンを作成し、色をサンプリングし、カスタムマップボックスビューを設計し、Figmaコンポーネント、スイッチ、ボタンなどすべてをつなぎ合わせました。私が日曜日の漫画を読んでいた頃のように、他人の仕事を追跡するのは治療的でした。 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プロトタイプは
サイドノート:Figmaファイルの設定方法とその方法に興味がある場合は、コメントでお知らせください。最後にプロトタイプを作成したところ、コンポーネントシステムを使用した方法でプロトタイプを作成するのが速かったことがわかりました。実際のところ、その部分は私に30分もかからなかった。この投稿の目的のために、いくつかの画面をリンクするつもりでしたが、今ではそのクレイジーな長所について個別に書かなければならないと考えています。行った場合は、ここにリンクします→…..

Model 3 UIデザインから学んだこと

この車は完璧な運転体験のために設計されていません

なに?

はい。言った。

Tesla Model 3は、ドライバーを意識せずに設計された車です。意図的に。

ノブはありません。ハンドルはほとんどありません。フロントガラスのワイパーをオンにするには、画面をタップする必要があります。 (*編集*あなたはそれらをオンにするコンソールレバーを持っていますが、周波数は画面を介して制御されます)グローブボックスを開くには画面をタップする必要があります。緊急ブレーキをオンにするには、画面をタップする必要があります(*編集*も自動であるように見えますが、手動アプリケーションは設定に含まれているようです)。これはすべてドライバーにとってひどいことではないでしょうか?車を操作するために、本能と筋肉の記憶に頼ることができなくなりました。

テスラはこれを単にエッジの効いた、危険な、または異なるものにしたとは思いません。彼らは、ドライバーのいない世界に人々を準備するためにこれを行いました。

この車は乗り心地のために設計されました

UIでは、1つの要素と1つの要素だけですべてがわかりました:画面の解像度。

この車は、モデルSおよびXのように、垂直スクリーンを搭載することもできましたが、そうではありませんでした。代わりに、モデル3のアスペクト比は8:5で、解像度は約1920x1200pxです。何でこれが大切ですか?

それはHDTVです

さて、下部(永続的)コントロールの高さは120ピクセルです。

1200–120 = 1080。

1920x1080。

それはHDTVです

Netflixとスリル

さて、冷たく韻を踏む言葉を見つけるのは難しいです。駄洒落だ、わかった。

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ファクターです。私はそれらがどのように機能するのか分かりません。

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

この車には多くの設定がありますが、最もよく使用される機能が表示されるようにクイックコントロールセクションを構成できるようです。これらが自動的に入力される可能性もありますが、知る方法はありません。

音楽コントロール

展開と崩壊の制御は乗客の手にあることは注目に値しますか…うーん(下矢印、右上)

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

個々の曲ではなく、アルバムに明確な重点が置かれているように思えるので、この車がどの程度の音声制御を行うのか疑問に思っています。

おわりに

最近、私はスティーブ・ジョブズがオリジナルのiPhoneを紹介し、モデル3とiPhoneとの明確な類似性に打たれた基調講演を再視聴していました。

物理的なボタンはありません。

ここに飛び出した部分があります:

Jobsは、業界の他の主要なスマートフォンをすべて聴衆に見せましたが、後から見ると、散らかった、固定された、物理的なキーは十分に古くありません。今日、固定された物理ハードウェアを備えた電話を導入する人がいたら、彼らはビルから笑い出されます。

しかし、なぜ私たちは同じように車を見ないのでしょうか?なぜ私たち、あるいは私だけが、車の中で1台のディスプレイを見て、それが決して機能しないのかとbするのはなぜですか?これは、Appleがキーボードを捨てたときとどう違うのですか?

私はあなたが言っていることを知っています、それは電話でした、これは車です。相互作用の方法とユースケースは明らかに異なります。

ただし、ソフトウェアは更新できます。物理ボタンは無線で修正できません。それらを改善することはできません。変更できません。たぶん、これはそんなにクレイジーなアイデアではないでしょう。

私はナッシュビルのプロダクトデザイナーです。私のウェブサイトで私の作品をチェックしてください。私は時折ツイートしますが、ほとんどの時間は妻と過ごします。彼女はライフスタイルブロガーであり、素晴らしい女性です。また、私たちのバーニーズ・マウンテン・ドッグのホンドもかなりクールです。この記事を書くためにFigmaに報酬をもらいましたが、自分でUIを作成および設計しました。