iOS 7 UI 勉強会

2,183 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,183
On SlideShare
0
From Embeds
0
Number of Embeds
932
Actions
Shares
0
Downloads
12
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

iOS 7 UI 勉強会

  1. 1. iOS 7 UI 勉強会 2013-10-17 (木) @アクトインディ株式会社 安宅 正之
  2. 2. iOS 7 の普及率 某アプリのデータ (10/7) によると... ● iOS 7: 60% ● iOS 6: 35% ● iOS 5: 5% ● iOS 4 以下: 2% iOS 7 対応後、ダウンロード数は増えた。 一時的ではなく、現在も継続している!!
  3. 3. iOS7 デザイン原則 1. Deference. 控えめ UI はユーザーによるコンテンツの理解やコンテンツとの対 話を助けるが、コンテンツと競合しない 2. Clarity. 明瞭 テキストはどのサイズでも読みやすく、アイコンは精密で明 快、装飾は目立たず適切、そして機能性を重視したデザイ ン 3. Depth. 奥行き ヴィジュアルレイヤー (層化 UI) と、そのリアルな動きが ユーザーの学習に効果がある
  4. 4. 控えめ -- フルレイアウト フルレイアウトの活用 ● フルレイアウトが基本 ● 装飾・枠の使い方を再考 ● コンテンツ重視
  5. 5. 控えめ -- 虚飾の排除 コンテンツより目立つ物はなし ● 重い UI > コンテンツ ○ ベゼル ○ グラデーション ○ ドロップシャドー マップアプリに無駄な虚飾は ない
  6. 6. 控えめ -- 半透明 UI 半透明な要素は 本来のコンテンツを阻害しない 半透明 UI が表すもの: ● 作業の流れ ● 詳細な内容 ● 一時的な要素
  7. 7. 明瞭 -- ホワイトスペース 何もないが多い → 結果 ● 重要な情報が目につく ● 重要な機能が目につく 理解の向上 雰囲気が穏やかに 集中する効果
  8. 8. 明瞭 -- 簡素な色遣い 鍵になる色だけで十分 ● 機能・重要箇所が伝わる ● 一貫した視覚テーマを提供
  9. 9. 明瞭 -- システムフォント (左:小, 右:大)
  10. 10. 奥行き -- アニメーションに構造あり 画面遷移のアニメーションが遷移先の説明になっ ている  年        月        日
  11. 11. フラットデザインではない iOS ミニマリズム & レイヤーデザイン
  12. 12. UI 設計時のポイント 1. コンテンツ・ファースト 2. 透過 UI 3. 非スキューモーフィズ a. メタファーの限界 i. 黒電話を誰も使わない時代に電話のメタファーに黒 電話を使う事は寧ろ混乱を招く b. ミニマル・デザイン i. 必要最小限なデザインで十分 4. アニメーション・エフェクト a. 視覚効果によるユーザー学習
  13. 13. iOS の UI 設計 1. iOS 6 ありき 2. 使われない現実世界の道具は模さない 3. iOS に慣れない人たちには敷居が高い 4. 学習状況に合わせて移行
  14. 14. 結論 ユーザーセグメントなりの ミニマルデザインを考える
  15. 15. 注意点 ● iOS6 と比べて対応工数が格段に多い。大まか な目安は約十倍。 ● 工数見積もりには余裕を持たせよう。
  16. 16. iOS 7 らしい UI -- フラットデザインの先 ● 物理法則に基づいたリアルなアニメーション → UIKit Dynamics ● 視差を利用した奥行きの表現 → Motion Effects ● 磨りガラスのような透過表現 → UIKit 標準コントロールの利用 → 自前実装はパフォーマンスに注意
  17. 17. iOS 7 らしい UX -- バックグラウンド処理 ● Background Fetch → OS が適当なタイミングでコンテンツ更新をし てくれる (行動パターン解析) 例) ニュースアプリ; 起動したら最新情報 ● Silent Push Notification → アプリを起動してなくても通知受取 例) メッセージアプリ; 不定期に情報通知 ● Background Transfer → バックグラウンド + Wi-Fi でファイルの ダウンロード & アップロード 例) 巨大ファイル転送アプリ; 後でやる
  18. 18. 落ち穂拾い ● UI が良いとユーザーは復帰する ● 設定からバックグラウンド実行を制限可 ● App Switcher で消すと、アプリはバックグラウ ンド動作しない

×