[iOS 10] 「Appleっぽい感じで!」と言われた時に参考にしたいUIの話

2016.10.31

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

こんにちは。デザイナーの宮嶋です。
最近やっと手持ちのiPhoneをiOS 10にアップデートしました。
UIを見るためだけに触るのと、実際に使うのではまた感じることも違ってきますね。

はじめに

常に流行の最先端を行くApple製品。いつの時代もカッコイイ!
クライアントから「Appleっぽいデザインで!」とオーダーを受けたことのある方も多いのではないでしょうか。
iOS 10のデザインについて今までもいろいろなところで話が出てきていると思いますが、
ここで改めてUIの特徴を見てみたいと思います。

※あくまで私個人の解釈であり、実際の意図と異なる場合があります。

奥行きを持たせる

IMG_9554 IMG_9553

帯のように項目が並んでいたウィジェットがカードに変更されたのが大きな特徴ですよね。
周囲から切り離されて画面内に独立したことで、要素の距離関係がハッキリしました

map_layer+-compressor

地図アプリでは重なって表示される領域ができました。
レイヤーのような表示で奥行きを感じられるだけでなく、
このスワイプする動きによってその時欲しい情報の切替がスムーズにできます。

単純

IMG_9531 IMG_9568

ミュージックのUIが一新されました。

For Youなどユーザーの行動から需要を割り出す機能もすごいけど一番すごいのは検索画面だと思います。
これまでとは違い、検索がひとつの画面として独立しました。
UIが単純でわかりやすいだけでなく、よく使われるひとつの機能を思い切って一つのページとしたことで
以前のOSでよくあった「どこで検索したら見つかったのかわからない……」といったことがなくなりました。

探させない・押しやすい

IMG_9569 IMG_9571

全体的にシンプルな文字だけのボタンから大きな角丸のボタンになったのも大きなポイントかなと思います。
これにより何か他の作業をしながらでもタップしやすくなったのではないでしょうか。

読ませるのではなく見せる

IMG_9532 (1) IMG_9570

白地に黒文字、ハッキリした文字のサイズやウェイトなどが多いので見ただけで内容が頭に入ります。
小さな文字を使っている部分は周囲に余白を多くとることで文字を読みやすくしています。

ユーザーの動作を理解する

IMG_9550 BED

時計機能の画面が黒くなりました。
画面を黒くすることで画面からの光を抑え、寝る前の暗い部屋の中でも目を痛めることなく操作ができます。
寝る前に時計を立ち上げてアラームを設定するというユーザーの動作を理解した設計になっています。

おわりに

「Appleらしい」ってどんなデザインをつくればいいの?

今の人のことを考えたデザインだと思います。
「感動させたい!」「使いやすくしたい!」など、
行き着く先はどうであれほとんどのデザイナーがこのことを考えた仕事をしていると思います。
デザインする上で当たり前のことだし言葉では単純だけど、具体的に実行するのは難しいと私自身も日々感じています。

最近では、スマートフォンを操作する時
それが中心となるのではなく、あくまで他の動作に付随することがほとんどではないでしょうか。
例えば、電車に乗りながら駅から目的地までの徒歩の経路を検索する とか、
読書をしながらヘッドホンで音楽を聞く など。
メインとなる動作を妨げないためにも
シンプルで見出しやボタンを最大限に目立たせたUIや、単純な遷移が求められているのではないでしょうか。

iOS 10ではそういったユーザーのバックグラウンドまで想定した設計になっているように思います。
そのような要素も考えた上で、ユーザーが求めている価値を提供したいものですね。