カバー画面にもっと語らせるには——より明確なフィードバックと機能を、複雑さを増やさずに。
- 企業
- HTC
- 担当
- UI デザイナー
- プラットフォーム
- モバイル
- 期間
- 2015年
プロジェクト概要
Ice View は Dot View の後継です。滑らかで縁のない、ほぼ不透明のカバー越しに内容を読めます。通知、着信、音楽——そして Dot View にはできなかったこと、ケースを閉じたままカメラを起動して撮影することができます。
私は初期のビジュアルコンセプトから発売まで主導し、UI デザイナー2名をディレクションしました。アイデア出しを回して方向を決め、その成果は特許（TW D182760）になりました。モーションデザインも担当しています。操作シーケンス全体を検証するアニメーションプロトタイプと、実際に搭載された全アニメーションです。
目標
前の製品にできなかったことDot View が持っていたのは 48 点だけでした。その天井が高度な機能を締め出していて、なかでも大きかったのは写真が撮れないことです。ケースを開けても解決せず、やはり使いにくいままでした。
ですから Ice View はスタイルの変更ではありません。前面をドットマトリクスから半透明パネルに変えることが解像度を買い、その解像度が機能を買っています。
素材
保護と可読性は逆を向くこの素材は端末を守り、内容を透かします。そして難しいのは、本質的にぼやけていることです。よく守る透明度は読みにくく、よく読める透明度は守りが弱い。
CMF デザイナーと長い時間をかけて素材特性を詰め、美しさとハードウェア性能の両方が成立する点を探しました。ここはインターフェースデザインだけでは決して解けなかった部分です。
可読性
好みではなく波長で選ぶ素材の透明度を下げると可読性は上がりましたが、それでも十分ではありませんでした。そこで不透明度の問題として扱うのをやめ、波長の問題として扱い直しました。配色が白地にネオン、そして主に赤と緑になったのはそのためです。
参照したのは交通標識の理論です。赤と緑は視認条件が劣化した状況で最も遠くまで届く——ぼやけた半透明パネルはまさにその条件です。ブランドや流行ではなく透過性からインターフェースの配色を選ぶ。このプロジェクトが回っている軸はこの一点で、完成したカバーで読めるものはすべてその下流にあります。
フロー
カバーができることの順序閉じた状態のための8つのフロー。最終品質で描き始める前に、ここを通しました。
モーションデザイン
変形で、出来事の位置を指すモーションの原則は、滑らかな変形によって画面上で今何かが起きた場所を示すことです。これだけ拡散する面では、細部より位置のほうが読み取りやすい。だからシャープな文字組みが本来担う「指し示す」役割を、アニメーションが引き受けています。
アニメーションプロトタイプはモニタ上ではなく実物のモックアップと突き合わせてレビューしました。実素材越しの滑らかさと読みやすさは、画面では分からないからです。
メモリ
フル HD アニメーションが難題だった理由半透明の面は全画面なので、Dot View より描くものがはるかに多い。しかしカバーを閉じるとシステムはスタンバイに入り、最も多くを求められるまさにその時に、使えるメモリは最小になります。
この制約は、どんな美的な好みよりもモーションの形を決めました。すべてのアニメーションは、その状態で動かすコストに見合う必要がありました。
基本機能
天気と、その背後の画面11 の天気状態。カバー越しに、カバーが許すサイズで読めるように描いています。
成果
Ice View の受け止められ方は、正直なところ二分しました。Dot View の上位版として読めば好評で、ケースとして読めば不満はハードウェアとカスタマイズに集中しました。どちらももっともです。
much higher resolution and have a greater variety of colors
前提が裏づけられました。パネルこそが解像度と色数を買っており、Dot View にはできなかった「閉じたまま撮る」もそこから来ています。
needs theme options like dot view
私たちも欲しかったもので、テーマのモックアップは複数作りました。ハードウェアの制約下では各テーマの実装コストが高く、開発は初回リリースに組み込めませんでした。
I only wish I could change the colour scheme or font
答えは同じで、より鋭い形の同じ問いです。波長から選んだ配色は、それが選ばれた理由である可読性を失わずにユーザーへ開放するのが難しい。
