iOS向けの設計

iOSには次の方針が体現されています。

../Art/weather_app_7_2x.png

これまでのアプリケーションを設計し直す場合でも、新しく作成する場合でも、次のようなアプローチで作業することを検討してください。

このプロセスを通して、根拠が疑わしい従来の常識にとらわれず、内容と機能に着目して、あらゆる設計上の判断を下してください。

内容を尊重する

くっきりとして美しいUI、流れるような動きがiOSの目玉ですが、ユーザが扱う情報内容こそがアプリケーションの心臓部です。

機能を重視し内容を尊重する設計を生み出す、具体的な考え方をいくつか紹介しましょう。

../Art/weather_focus_2x.png

画面全体を有効に活用する。「Weather」はそのよい例です。全画面を利用した美しい画像で、ある地域における現在の天気状況(最も重要な情報)がひと目で分かるように表示し、空いた領域に1時間ごとのデータを配置しています。

質感や本物らしさを考え直す。ベゼル、グラデーション、ドロップシャドーを多用すると「重い」UI要素になり、肝腎の中身が見劣りしてしまいかねません。内容に着目し、UIは補助的役割にとどめましょう。

../Art/restrain_visual_indicators_2x.png ../Art/embrace_translucency_2x.png

半透明なUI要素を使って、奥に何があるか見えるようにする。半透明な要素(たとえばコントロールセンター)には、作業の流れを示し、より詳しい内容があることを認識させ、あるいは一時的な要素であることを明示する働きがあります。iOSでは、半透明な要素があるとそこだけパラフィン紙を置いたように、奥の内容が曇って見えます。

明瞭性を与える

アプリケーションにとって重要な情報内容は、明瞭な表示によっても示すことができます。最も重要な情報や機能が明確に分かり、容易に操作できるようにする手法をいくつか紹介しましょう。

../Art/use_white_space_2x.png

何もない空間を活かす。うまく利用すると、重要な情報や機能が目につき、理解しやすくなります。また、穏やかで落ち着いた雰囲気を作り、集中しやすくする効果もあります。

簡潔な色遣いにする。鍵となる色(たとえば「Notes」の黄色)で、重要箇所を強調し、操作可能な場所であることをそれとなく示すことができます。また、一貫した視覚テーマを与えることにもなります。組み込みアプリケーションは、純色の中から選んで用いることにより、単独であっても他と組み合わせてでも、また、背景が明るくても暗くても、良好に見えるようにしています。

../Art/notes_color_2x.png ../Art/mail_message_fonts_2x.png

システムフォントを使って読みやすさを確保する。iOSのシステムフォントは、文字間や行間を自動的に調整し、大きさを変更しても、読みやすく見栄えもよく表示できます。システムフォント、独自に用意したフォントのどちらを使う場合でも、ダイナミックタイプに準拠して、ユーザがテキストの大きさを変更したとき対応できるようにしてください。

境界なしのボタンを活用する。デフォルトでは、ボタンはすべて境界がありません。コンテンツ領域に配置した境界なしのボタンは、コンテキストや色、操作を促すようなラベル(タイトル)により、対話型要素であることを示すようになっています。状況によっては、細い境界線や淡色の背景を使って際立たせることもあります。

../Art/contact_card_2x.png

奥行きを利用して情報を伝える。

iOSでは、情報を個々のレイヤに分けて表示し、階層関係や位置関係を示すことがよくあります。画面上のオブジェクト間の関係が分かりやすくなる、という効果もあります。

../Art/folder_2x.png

半透明の背景を使い、「ホーム」画面上に浮いているように見せることにより、フォルダの中身を画面上の他の部分から分離しています。

「リマインダー(Reminders)」は次のように、リストを階層表示します。ユーザがあるリストを操作している間、他のリストは画面の下部にまとめて表示します。

../Art/layered-reminders_2x.png ../Art/cal_year_2x.png

「カレンダー(Calendar)」は階層や奥行きをうまく利用して、年単位、月単位、日単位でうまく遷移できるようにしています。年単位のビュー(図)をスクロールすると、即座に今日の日付を確認し、カレンダーに関する他の作業ができるようになっています。

ある月を選択すると、年単位のビューが拡がるような動きの後、月単位のビューが前面に出てきます。今日の日付は強調表示のままで、「戻る」ボタンに年が現れるので、現在どの状態にあり、どこから遷移して来たか、戻るにはどうすればよいか、が分かります。

../Art/cal_month_2x.png ../Art/cal_day_2x.png

ある日を選択したときにも同様の遷移が発生します。月単位のビューを切り離し、現在の週を画面の上方に追いやるような動きの後、該当する日を表す時間単位のビューが現れます。「Calendar(カレンダー)」は画面遷移の都度、年、月、日の間の階層関係を組み替えます。