[既存アプリに学ぶデザイン vol. 5]App Store 読解 vol. 4

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

デザイナーの たなか ゆきこ です。

前回に引き続き App Store の UI について読み解きをしていきたいと思います。 私個人の見解ですので、本当は別の意図がある可能性もあります。

今回のアプリ

App Store

検索画面のUIを読み解く

検索画面で見るべきとこは、以下かなと思っています。

点のデザイン、線のデザイン

点と線の意味

印刷や、WEBでもLPやバナーなどをやってきた方にありがちなのが、デザインを“点”で見てしまうこと。

点と線は、時間軸の話です。

点は、今現在見ている画面のみを取り出してデザインすること。つまり検索画面のみを見てデザインしていることです。線は、検索画面の前後を踏まえデザインすることです。

例えば、点の観点で検索画面を確認してみると、「タイトルがない」という人がいると思う。線で見てみると、ユーザーは検索をタップしたという過去の行動があるから検索にいることがわかっている。また、検索ボックスがあるのに、検索というタイトルはデータの重複なのではというロジックで、いらないものは削除しようという感じなのではないのかと予測される。

また、青色テキストをタップすれば、おそらくそれが検索されるという理解も、AppStoreで青色テキストを使用したものは何らかの反応をするということをユーザーが学習しているという想定の上で、シンプルに配置されたものであると考察できないだろうか。

測ってみました

こんな感じ learn_ui_design41

まとめ

アプリは動くものだという認識とかが大事かなと思います。また、ここでは変化するだけですが、Googleのマテリアルデザインには、アニメーションなども記載されてます。 動きなどもデザイン要素に入ってくるので、アプリは点でデザインしたら厳しいです。