前回のつづき

今回はHuman Interface Guidelines(以下、単にガイドラインと略します)を元に、どのようにデザインしていくのが良いかを説明します。AppleがiOS 7からガイドラインで提唱しているのは、単に平坦なデザインにせよということではないので、その辺を注視していきたいです。

全画面表示

全画面表示に関しては、ガイドラインにもサンプルとしてあげられているようにカレンダーアプリが良い例です。

天気アプリ

iOS 7からステータスバーやツールバーは透過するようになり、アプリの表示領域は全画面になりました。天気アプリの場合、背景が透過することで広々とした印象を与えます。またガイドラインでは枠線などで区切ることをやめ、画面の隅々まで使い、かつ余白を取ることも推奨しています。これもまたスッキリとして広々とした印象になるでしょう。

自分が特に大事だと思うのは、必要でないなら枠や線などで区切ることを極力避けることだと思います。

iOS 6の天気アプリを見てみましょう。

weather-ios6

iOS 7の同アプリと比べると狭苦しい印象を受けるのではないでしょうか?

  • 全体を囲う枠と画面端の余白が必要
  • 全体を囲う枠と枠と隣接する文字の余白が必要
  • 曜日の縦の並びに線があるため、曜日、線、曜日の間に余白が必要

枠をつけるということは、このように余白が積み重なり、結果、コンテンツとして表示すべき情報領域を圧迫していきます。そして、フォントを小さくしたり、スクロールする必要がでてきます。これはコンテンツを重視することから外れています。そういったことは避けるべきです。

曜日ごとの線は一見必要に思えますが、iOS 7のアプリにはありません。きちんと余白があれば視認性に問題はないことを示していると思います。

天気アプリのように1画面で情報完結するケースは稀だと思います。多くの場合はNavigationBarがあり、そこにタイトルが表示されています。天気アプリのような全画面感を出せるアプリは少ないと思います。それでも余計な枠や区切りを排し、余白を取り、画面をフルに使い、ユーザーに必要な情報が目に入りやすいようにすることは、どのアプリでも心がけることでしょう。

ちなみにウェブサイトでも余計な枠線がないものが増えてきたと思います。その方が開放的で見やすいのではないでしょうか?そう思ってこのブログもリニューアルの際に枠線を排除しました(笑)

グラデーション、ベゼル、ドロップシャドウなどを使わない

ガイドラインに、これらはUIを重くし、コンテンツと競合するとあります。UIを重くする部分に関しては、今のiPhoneは十分なCPUパワーがあるので、実際はほとんど問題がないと思うのですが、コンテンツと競合するのは問題です。余計な演出の方が浮いてしまって、コンテンツが埋もれてしまうのはよくないでしょう。フラットデザインになったため、グラデーションなどは浮いてしまうというのもあると思います。ガイドラインに「focus on the content」とあるようにコンテンツを重視すべきでしょう。結果、無駄な開発コストを下げることにも繋がります。

コンテンツの補足は半透明UIで表示

コンテンツの補足的な情報(ヒント、詳細など)は、画面に重なるように半透明のUI(コントロールセンターのようなUI)で表示することを推奨しています。

controlcenter

必ずしもこのように下から表示する必要はないと思います。吹き出しやAlertViewのように矩形の上情報表示でもよいと思います。

情報量によると思うのですが、画面遷移するよりも同じ画面上に半透明表示したほうが、同画面の補足という印象を与えてわかりやすいと思います。またそれらを簡単に閉じられるようになっている方がユーザーに優しいでしょう。

つづく