インタラクション — 09 / 000%EN日本語繁中
ケース 09 — HTC — 2016年

邪魔な広告も複雑な設定もなしに、端末を快適なまま保つには。

企業
HTC
担当
UI・モーションデザイナー
プラットフォーム
モバイル
期間
2016年

プロジェクト概要

Boost+ は不要ファイルの検出と削除、メモリとバッテリーの最適化、そしてアプリ個別のロックを行います。HTC 製端末だけでなく他社の Android 端末にも提供された点が、当時の HTC としては異例でした。

私はモーションデザイナーとして、絵コンテ、アニメーション、そして実装のための仕様を担当しました。ワイヤーフレームと体験設計は UX デザイナーと並行して進め、競合分析も担当して、代替製品に対して何を主張できるかを整理しました。

アニメーション、モーションデザイン、絵コンテ。UX デザイナー、プロダクトマネージャー、開発チームとの協働。
Boost+ ロゴ
Boost+ ロゴ

誰も書かなかった要件

すでに市場にあったアプリはユーザーが誤って触れた広告で収益を上げており、加えてセキュリティ上の穴も疑われていました。置き換える対象はそれであり、この案件が存在した理由そのものです。

これは「最適化アプリ」の意味を変えます。問題はカテゴリのビジネスモデルの側にあったので、設計目標は速いスキャンでも綺麗なメーターでもなく、「誤タップの代償を払わされずに開けるアプリ」でした。以下はすべてそこから導かれています。

満たすべき機能

手動でのストレージ検出と削除。メモリの最適化。頼まなくても動いて性能を保つ Smart Boost。ユーザーが選んだアプリに効き続けるバッテリー最適化。そして個人情報を鍵の内側に置く App ロック。

ひとつのアプリに5つの仕事があるのは、まず見た目ではなく階層の問題です。自動の機能は放っておけるだけの信頼を得なければならず、手動の機能はその信頼が持てないときに見つけられなければなりません。

フラットな幾何と、水

モーションの言語がどこから来たか

クリーンでミニマル、単純な幾何形態、フラット。ページが切り替わるのではなく変形してつながるように幾何を選び、モーションの発想は循環し、容れ物の形になる水から取りました。

これは見栄えで選んだ装飾ではありません。Boost+ は不要なものを取り除いて容量を取り戻すので、「取り除かれ、使えるものとして戻ってくる物質」はこの製品自身の主張を目に見える形にしたものです。冒頭の場面は液体が跳ねるところから始まり、システム全体がそれを受け継ぎます。

画面

何かが動き出す前に、UX デザイナーと通したフローです。

ランディング · 不要ファイル通知
ランディング · 不要ファイル通知
フロー08

絵コンテ

モーションのコンセプトと絵コンテ。アニメーションが実際に決まるのはここです。

モーションコンセプトと絵コンテ
モーションコンセプトと絵コンテ

モーション

再生ではなく、コードで動かす

アニメーションは動画としてではなくコードで実装されました。だから難所は引き継ぎになります——アニメーションは、仕様として書けた精度でしか存在しません

ですから参考動画ではなくパラメータを渡しました。どのオブジェクトがいつ現れ、どれだけの長さで、どんな速度曲線を描くか。そしてビルドと突き合わせて詰めました。After Effects で絵コンテを描いて動かすのは簡単な半分で、残せるかどうかを決めるのは、実装する開発者が読み違えようのない精度で伝えられるかどうかです。

ホーム イントロ
ホーム イントロ
ホームからスキャンへ
ホームからスキャンへ
Smart Boost
Smart Boost
スキャン結果
スキャン結果

成果

Boost+ は HTC 10 の主要機能のひとつとして 2016 年の発表会で公開されました。4.5 星、100万ダウンロード超に達し、当時カテゴリで最も人気のあった Clean Master と並べて語られるようになりました。

どちらの数字も元のケーススタディのもので、再検証していません。公開前に確認してください。