• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
iOS 7 UI 勉強会
 

iOS 7 UI 勉強会

on

  • 1,621 views

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

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

Statistics

Views

Total Views
1,621
Views on SlideShare
867
Embed Views
754

Actions

Likes
3
Downloads
7
Comments
0

17 Embeds 754

http://at-aka.blogspot.jp 628
http://cloud.feedly.com 57
http://www.feedspot.com 27
http://at-aka.blogspot.ch 11
http://at-aka.blogspot.com 8
http://cache.yahoofs.jp 3
http://at-aka.blogspot.tw 3
http://feeds.feedburner.com 3
http://feedproxy.google.com 3
http://at-aka.blogspot.de 2
http://at-aka.blogspot.fr 2
http://reader.aol.com 2
http://at-aka.blogspot.in 1
http://webcache.googleusercontent.com 1
http://at-aka.blogspot.ca 1
http://at-aka.blogspot.ru 1
http://at-aka.blogspot.co.il 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    iOS 7 UI 勉強会 iOS 7 UI 勉強会 Presentation Transcript

    • 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. 透過 UI 3. 非スキューモーフィズ 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 で消すと、アプリはバックグラウ ンド動作しない