Yahoo! Japan で開かれた iOS 7 勉強会の内容を、社内のデザイナー向けに再編集・再構成し直して発表したスライドです。

1. iOS 7 UI 勉強会
2013-10-17 (木) @アクトインディ株式会社
安宅 正之

2. iOS 7 の普及率
某アプリのデータ (10/7) によると...
● iOS 7: 60%
● iOS 6: 35%
● iOS 5: 5%
● iOS 4 以下: 2%
iOS 7 対応後、ダウンロード数は増えた。
一時的ではなく、現在も継続している!!

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

4. 控えめ -- フルレイアウト
フルレイアウトの活用
● フルレイアウトが基本
● 装飾・枠の使い方を再考
● コンテンツ重視

5. 控えめ -- 虚飾の排除
コンテンツより目立つ物はなし
● 重い UI > コンテンツ
○ ベゼル
○ グラデーション
○ ドロップシャドー
マップアプリに無駄な虚飾は
ない

6. 控えめ -- 半透明 UI
半透明な要素は
本来のコンテンツを阻害しない
半透明 UI が表すもの:
● 作業の流れ
● 詳細な内容
● 一時的な要素

7. 明瞭 -- ホワイトスペース
何もないが多い
→ 結果
● 重要な情報が目につく
● 重要な機能が目につく
理解の向上
雰囲気が穏やかに
集中する効果

8. 明瞭 -- 簡素な色遣い
鍵になる色だけで十分
● 機能・重要箇所が伝わる
● 一貫した視覚テーマを提供

9. 明瞭 -- システムフォント (左:小, 右:大)

10. 奥行き -- アニメーションに構造あり
画面遷移のアニメーションが遷移先の説明になっ
ている
年 月 日

11. フラットデザインではない iOS
ミニマリズム
&
レイヤーデザイン

12. UI 設計時のポイント
1. コンテンツ・ファースト
2. 透過 UI
3. 非スキューモーフィズ
a. メタファーの限界
i. 黒電話を誰も使わない時代に電話のメタファーに黒
電話を使う事は寧ろ混乱を招く
b. ミニマル・デザイン
i. 必要最小限なデザインで十分
4. アニメーション・エフェクト
a. 視覚効果によるユーザー学習

13. iOS の UI 設計
1. iOS 6 ありき
2. 使われない現実世界の道具は模さない
3. iOS に慣れない人たちには敷居が高い
4. 学習状況に合わせて移行

14. 結論
ユーザーセグメントなりの
ミニマルデザインを考える

15. 注意点
● iOS6 と比べて対応工数が格段に多い。大まか
な目安は約十倍。
● 工数見積もりには余裕を持たせよう。

16. iOS 7 らしい UI -- フラットデザインの先
● 物理法則に基づいたリアルなアニメーション
→ UIKit Dynamics
● 視差を利用した奥行きの表現
→ Motion Effects
● 磨りガラスのような透過表現
→ UIKit 標準コントロールの利用
→ 自前実装はパフォーマンスに注意

17. iOS 7 らしい UX -- バックグラウンド処理
● Background Fetch
→ OS が適当なタイミングでコンテンツ更新をし
てくれる (行動パターン解析)
例) ニュースアプリ; 起動したら最新情報
● Silent Push Notification
→ アプリを起動してなくても通知受取
例) メッセージアプリ; 不定期に情報通知
● Background Transfer
→ バックグラウンド + Wi-Fi でファイルの
ダウンロード & アップロード
例) 巨大ファイル転送アプリ; 後でやる

18. 落ち穂拾い
● UI が良いとユーザーは復帰する
● 設定からバックグラウンド実行を制限可
● App Switcher で消すと、アプリはバックグラウ
ンド動作しない