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

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

Clock Icon2016.07.07

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

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

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

今回のアプリ

App Store

コンテンツ画面のUI

カテゴリごとにアプリを開いていく形になっていますので、おすすめ、ランキングにあった「カテゴリ」が消えてます。 また、右矢印ではないです。プッシュ(画面が右側から出てくるやつ)にすると考えると、例えば「エンターテイメント」>「おすすめエンターテイメント」>「アプリ詳細」という形で階層が深くなるからでしょうか。 個人的には、開閉アニメーションと、開いた後のナビゲーション部分表示が他との違いとしてみるとこかな。

learn_ui_design31「すべて」の文字。スクショをよーく眺めてみると色が違うことに気がつきます。 青色が他のアイコンの色と比べて、少し暗い。彩度が低いです。 印刷の時もあったんですが、小さい、細いものを使用するときは、少し色を落とさないと見にくいことがある。見える面積の問題なのですが、ちゃんと意識してやる。 また、この濃淡について、よくやるのが最初から色を使わず白黒の濃淡で作成してから、色を乗せるという手法がある。 白黒の濃淡で、その情報をどれだけ見せたいのかなど考えながら作成。 完成したものに、対応した色を乗せていくと、情報が見えやすい。

測ってみた

learn_ui_design32 測ってみたところ左のような結果になりました。画像比率は3:7。余白が他と同じ「15」かと思いきや「16」という誤差。一つ中だからでしょうか。いろいろ考えます。しかし基本は「44」のリスト表示ですね。いろんなアプリを見ますがリストは大抵「44」になっています。

まとめ

トレースしてるといろんなことに気がつく。過去の経験から繋がるものも多い。やっぱデザインの基礎は変わらないと思う今日なのでした。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.