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

安宅 正之

iOS 7 の普及率

某アプリのデータ (10/7) によると...● iOS 7: 60%● iOS 6: 35%● iOS 5: 5%● iOS 4 以下: 2%

iOS 7 対応後、ダウンロード数は増えた。

一時的ではなく、現在も継続している!!

iOS7 デザイン原則

1. Deference. 控えめUI はユーザーによるコンテンツの理解やコンテンツとの対話を助けるが、コンテンツと競合しない

2. Clarity. 明瞭テキストはどのサイズでも読みやすく、アイコンは精密で明快、装飾は目立たず適切、そして機能性を重視したデザイン

3. Depth. 奥行きヴィジュアルレイヤー (層化 UI) と、そのリアルな動きがユーザーの学習に効果がある

控えめ -- フルレイアウト

フルレイアウトの活用

● フルレイアウトが基本● 装飾・枠の使い方を再考● コンテンツ重視

控えめ -- 虚飾の排除

コンテンツより目立つ物はなし

● 重い UI > コンテンツ○ ベゼル○ グラデーション○ ドロップシャドー

マップアプリに無駄な虚飾は

ない

控えめ -- 半透明 UI

半透明な要素は

本来のコンテンツを阻害しない

半透明 UI が表すもの:● 作業の流れ● 詳細な内容● 一時的な要素

明瞭 -- ホワイトスペース

何もないが多い

→ 結果

● 重要な情報が目につく● 重要な機能が目につく

理解の向上

雰囲気が穏やかに

集中する効果

明瞭 -- 簡素な色遣い

鍵になる色だけで十分

● 機能・重要箇所が伝わる● 一貫した視覚テーマを提供

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

奥行き -- アニメーションに構造あり

画面遷移のアニメーションが遷移先の説明になっている

　年　　　　　　　　月　　　　　　　　日

フラットデザインではない iOS

ミニマリズム

&レイヤーデザイン

UI 設計時のポイント

1. コンテンツ・ファースト2. 透過 UI3. 非スキューモーフィズ

a. メタファーの限界

i. 黒電話を誰も使わない時代に電話のメタファーに黒

電話を使う事は寧ろ混乱を招くb. ミニマル・デザイン

i. 必要最小限なデザインで十分

4. アニメーション・エフェクトa. 視覚効果によるユーザー学習

iOS の UI 設計

1. iOS 6 ありき

2. 使われない現実世界の道具は模さない

3. iOS に慣れない人たちには敷居が高い

4. 学習状況に合わせて移行

結論

ユーザーセグメントなりの

ミニマルデザインを考える

注意点

● iOS6 と比べて対応工数が格段に多い。大まかな目安は約十倍。

● 工数見積もりには余裕を持たせよう。

iOS 7 らしい UI -- フラットデザインの先

● 物理法則に基づいたリアルなアニメーション→ UIKit Dynamics

● 視差を利用した奥行きの表現→ Motion Effects

● 磨りガラスのような透過表現→ UIKit 標準コントロールの利用→ 自前実装はパフォーマンスに注意

iOS 7 らしい UX -- バックグラウンド処理

● Background Fetch→ OS が適当なタイミングでコンテンツ更新をしてくれる (行動パターン解析)例) ニュースアプリ; 起動したら最新情報

● Silent Push Notification→ アプリを起動してなくても通知受取例) メッセージアプリ; 不定期に情報通知

● Background Transfer→ バックグラウンド + Wi-Fi でファイルのダウンロード & アップロード例) 巨大ファイル転送アプリ; 後でやる

落ち穂拾い

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

ンド動作しない