iOS 7でのUIデザイン | iOS 7エンジニア勉強会

iOS 7 UIの考え方 ヤフー株式会社 CMO室 藤原 亮 ID:@ryospl 13年10月8日火曜日

Agenda 1. iOS 7デザイン理念 2. iOS 7 UIへのアプローチ 3. Yahoo! JAPANでのデザイン事例 13年10月8日火曜日

1. iOS 7デザイン理念 13年10月8日火曜日

iOS 7 Design Resources iOS 7 Design Resources - Apple Developer https://developer.apple.com/library/ios/design/ 13年10月8日火曜日

• https://developer.apple.com/library/ios/design/

iOS 7 3つのテーマ 1. 控えめ(Deference) UIはユーザによるコンテンツの理解やコンテンツとの対話を助ける が、コンテンツと競合しない。 2. 明瞭(Clarity) テキストはどのサイズでも読みやすく、アイコンは精密で明快、 装飾は目立たず適切、そして機能性を重視したデザイン。 3. 奥行き(Depth) ヴィジュアルレイヤ（層化UI）と、そのリアルな動きがユーザの学 習に効果がある。 13年10月8日火曜日

1. Defer to Content 控えめ フルレイアウトを有効活用 質感や本物らしさの再考 半透明なUI要素を使って、 奥に何があるか見えるように 装飾や枠の使い方を再考し、情報 内容を画面いっぱいに表示。 ベゼル、グラデーション、ドロップシ ャドーを多用すると「重い」UI要素に なり、コンテンツより目立つ。 半透明な要素には、作業の流れを示 し、より詳しい内容があることを認識 させ、あるいは一時的な要素であるこ とを明示する働きがあります。 13年10月8日火曜日

2. Provide Clarity ホワイトスペースを活用。 うまく利用すると、重要な情報や機 能が目につき、理解しやすくなりま す。また、穏やかで落ち着いた雰囲 気を作り、集中しやすくする効果も あります。 13年10月8日火曜日 明瞭 簡潔な色遣いにする。 鍵となる色（たとえば「Notes」の黄 色）で、重要箇所を強調し、操作可能 な場所であることをそれとなく示すこ とができます。また、一貫した視覚テ ーマを与えることにもなります。 システムフォントを使って読 みやすさを確保する。 境界なしのボタンを活用する。 状況によっては、際立たせることも

奥行き 3. Use Depth to Communicate 「Calendar(カレンダー)」は画面遷移の都度、年、月、日の間の階層関係を組み替える。 年 月 年単位のビュー（図）をスクロール すると、即座に今日の日付を確認 し、カレンダーに関する他の作業が できるようになっています ある月を選択すると、年単位のビュ ーが拡がるような動きの後、月単位 のビューが前面に出てきます。 13年10月8日火曜日 日 月単位のビューを切り離し、現在の週 を画面の上方に追いやるような動きの 後、該当する日を表す時間単位のビュ ーが現れます。

2. iOS 7 UIへのアプローチ 13年10月8日火曜日

iOS 7 UI 13年10月8日火曜日 完全フラット ミニマリズム＆レイヤーデザイン Android 4.x iOS 7

UI設計時のポイント 1. コンテンツファースト 2. 透過レイヤーUI 3. 非スキューモーフィズ ラベル / レイアウト / アイコン 重要性増 Apple iOS7 http://www.apple.com/jp/ios/ 13年10月8日火曜日

• http://www.apple.com/jp/ios/

トランジション （アニメーションエフェクト） ビジュアル以外での 視覚効果によるユーザー学習。 Apple iOS7 http://www.apple.com/jp/ios/ 13年10月8日火曜日

• http://www.apple.com/jp/ios/

なぜ、フラットが流行？ 13年10月8日火曜日

メタファの限界 メタファ ＝ 何かに例えた表現 Skeuomorphism Minimal Design 現実社会に存在する物を模した ユーザーインタフェース あまり使用しない機能のせいでシステ ムが肥大化することを避け、必要最小 限の機能に絞って設計すること。 13年10月8日火曜日

3. Yahoo! JAPANでのデザイン事例 13年10月8日火曜日

iOS 7 Redesign iOS 6 Design 天気 Copyright (C) 2013 Yahoo Japan Corporation. All Rights Reserved. 13年10月8日火曜日

iOS 7 Redesign iOS 6 Design 知恵袋 Copyright (C) 2013 Yahoo Japan Corporation. All Rights Reserved. 13年10月8日火曜日

ユーザーセグメントなりの ミニマルデザインを考える。 13年10月8日火曜日

ご清聴ありがとうございました。 13年10月8日火曜日