HTC のブランド価値を体現する、独自で、切れ目のない体験をどうつくるか。
- 企業
- HTC
- 担当
- UI デザイナー
- プラットフォーム
- モバイル
- 期間
- 2012–2016年
プロジェクト概要
HTC Sense はフラッグシップのシステムです。インターフェース、体験、そしてその世代の性格を決めるすべて——アイコン、壁紙、テーマ、モーション、アプリケーション。4年間の仕事は、その性格を毎年ただ違うものにするのではなく、HTC だと分かるものにし続けることでした。
2012年にビジュアルデザイナーとして参加し、UI とモーション、アセット、テーマ、壁紙を担当しました。UX デザイナーと並んで進め、彼らが定義した体験と UI がひとつのものとして着地するようにし、そのまま開発まで追いかけました。引き継ぎのためであり、デザインガイドラインどおりに実装されているかを見るためでもあります。
道具がなかった時代のモーション
仕上げではなく、検証としてのアニメーション当時、画面遷移を手軽につくる方法はなく、体験をプロトタイプする道具もありませんでした。ですからモーションは最後に足すものではなく、その体験が成立しているかを知るための手段そのものでした。
順序が通常とは逆で、このページで最も他所に持ち出せる部分がここです。アニメーションを設計することは、インターフェースがユーザーに何を伝えているかを決める行為でした。どこから来たのか、いま何が変わったのか、これから何ができるのか。追えないアニメーションは追えないフローであり、まだ直すのが安い段階でそれが分かります。
live.me
誰も「つけよう」と思わなくていい日記パーソナルタイムライン。どこへ行き、何を開き、それがいつだったか——スマートフォンはすでに記録しています。live.me はそれを読み返せるかたちに変える。つまり日記をつけようと誰も意識しないまま、日記が書かれていくということです。
ここでの担当はモーションです。画面間のトランジション、そして、それを組み立てる手段がまだ何もない段階で、アプリがどう振る舞うべきかを見極めるためのアニメーション。上の Sense の各世代と同じやり方を、参照できる前例のないプロダクトに対して使いました。
もう半分は、メモリービデオのテーマ設計です。メモリービデオとは、ユーザー自身の履歴のある期間から、アプリが自動で組み上げる短い映像のこと。テーマとは、まだ誰も見ていない素材のためにあらかじめ用意しておく演出であり、そこが編集ではなく設計の問題になる理由です。何を渡されても成立しなければならない——そして渡されるものの大半は、なんでもない一週間です。
部門をまたいで
システムデザインが実際に決まる場所デザインチームは、日程の圧力についてはプロジェクトマネジメントと、実現性については開発チームと向き合いました。何がつくれるかを見極め、問題を早く見つけ、折り合いをつけるべきものにはつける。
残った学びはタイミングの話です。プロジェクトが許すかぎり早い段階で関わること。遅れて出したビジュアルの判断は「お願い」になり、同じ判断を早く出せば全員がその周りで設計する「前提」になります。システムデザイナーが実際に動かせるものの大半は、見るべきものが存在する前に決まっています。
ロック画面
Sense 4+ と Sense 5ロック画面は入口です。何も解除しないうちに届く機能がここにあります。同時にその世代について誰もが最初に見る面でもあり、実用と個性の両方で、システム中もっとも密度の高い場所になります。
フォトエディタ
編集機能、フィルター、そしてコミュニティの側面。
グリッドとインタラクション
ほかのすべての下にある定義の仕事グリッドと余白を定義することは、各画面を整えることではなくシステムを整えることです。インタラクションを定義することは、フローとモーションをどちらも描く前に決めることです。ホーム階層のガイドラインは、次の世代が何に対して一貫すればよいかを持てるようにするためのものでした。
ホームと BlinkFeed
Sense 6ホーム画面の設定、パネルの編集、並べ替え——ランチャーが「自分のもの」に感じられるか「メーカーのもの」に感じられるかを決める操作です。
壁紙
Sense 6 と Sense 82世代分の壁紙。これだけ長く続くシステムでは、壁紙は毎年自由に変えられる唯一の要素です。だからこそ、安定していなければならないものを壊さずにその世代が自分は何であるかを言える場所になります。
