• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
勘違いだらけのAndroid UIデザイン
 

勘違いだらけのAndroid UIデザイン

on

  • 47,888 views

【増員!→370名】 開発者、デザイナー必見! アプリ制作勉強会 / 勘違いだらけのAndroid UIデザイン 発表資料(2012年8月21日)

【増員!→370名】 開発者、デザイナー必見! アプリ制作勉強会 / 勘違いだらけのAndroid UIデザイン 発表資料(2012年8月21日)
http://atnd.org/events/31039

The presentation doc for Smartphone application design seminar on 2012/08/21 by WAVE Multimedia School.

Statistics

Views

Total Views
47,888
Views on SlideShare
46,584
Embed Views
1,304

Actions

Likes
194
Downloads
354
Comments
3

28 Embeds 1,304

http://samura1.net 496
https://si0.twimg.com 210
http://s.deeeki.com 150
https://twimg0-a.akamaihd.net 116
https://twitter.com 67
http://twitter.com 54
http://d.hatena.ne.jp 35
http://tweetedtimes.com 33
http://sc.dotbranch.com 31
http://ss.dotbranch.com 29
http://www.submit.ne.jp 13
http://nakatani.clientserver.jp 12
http://www.linkedin.com 10
http://pinterest.com 10
http://wegotguru.com 8
http://b.hatena.ne.jp 5
http://mundo-powerpoints.blogspot.com 4
http://nuevospowerpoints.blogspot.com 4
http://mundo-powerpoints.blogspot.com.es 3
http://133.242.3.32 2
http://a0.twimg.com 2
http://nuevospowerpoints.blogspot.com.es 2
http://nuevospowerpoints.blogspot.mx 2
http://127.0.0.1 2
http://localhost 1
http://kat.or.tl 1
http://nuevospowerpoints.blogspot.com.ar 1
https://kcw.kddi.ne.jp 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

13 of 3 previous next Post a comment

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

    勘違いだらけのAndroid UIデザイン 勘違いだらけのAndroid UIデザイン Presentation Transcript

    • 1
    • WAVEイベントセミナー・アプリ制作勉強会勘違いだらけのAndroid UIデザイン Android UI Design, Too Much Misunderstanding Nobuya Sato Secret Lab, Inc. August 21st., 2012 Twitter: #appsemi Copyright © 2012 Secret Lab, Inc. All Right Reserved.
    • 自己紹介•  @nobsato•  UXデザイン、デザイン戦略、IA –  1994年からWebデザイン –  Webエージェンシーで大規模な企業サイトの情報設計や企業 のグローバル戦略、海外サイト構築やグローバル展開 –  Sonyのデザイン部門でAndroidのPF戦略やタブレット戦略 –  米Seesmicで日本語化やAndroidアプリやWP7アプリ –  現在はUXやUIデザインのコンサルティング、デザイン調査 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 3
    • 本日のテーマ•  勘違いだらけのAndroid UIデザイン 1.  Androidで独自性を出すのは大変? 2.  Androidアプリの開発は工数が係る? 3.  Android向けのデザインは大変? 4.  検証すべき端末は数百、すでに飽和状態? Copyright © 2012 Nobuya Sato. 4
    • UX/UIデザイン UX = UI ? Copyright © 2012 Secret Lab, Inc. All Right Reserved. 5
    • UX/UIの違い The Difference Between UX and UI: Subtleties Explained in Cereal Copyright © 2012 Secret Lab, Inc. All Right Reserved. (写真が語るUXとUIの違い) 6
    • Copyright © 2012 Secret Lab, Inc. All Right Reserved. 7
    • Copyright © 2012 Secret Lab, Inc. All Right Reserved. 8
    • Copyright © 2012 Secret Lab, Inc. All Right Reserved. 9
    • Copyright © 2012 Secret Lab, Inc. All Right Reserved. 10
    • Copyright © 2012 Secret Lab, Inc. All Right Reserved. 11
    • UX/UIデザインの改善?•  ユーザーの使い方、モノの使われ方を観察して問題点 を直すことで、ユーザーの体験を改善でき、モノの使 われ方やユーザーエクスペリエンス(UX)を向上する ことができる Copyright © 2012 Secret Lab, Inc. All Right Reserved. 12
    • UX/UIデザインの改善?•  ユーザーの使い方、モノの使われ方を観察して問題点 を直すことで、ユーザーの体験を改善でき、モノの使 われ方やユーザーエクスペリエンス(UX)を向上する ことができる → 改善しているのはUX(使い方や使われ方)、 本来のUI(ボタンやアイコン)は スライドで 見てきた例では改善されていない。 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 13
    • UIデザインの改善1.  提供しようとしているコンテキスト(内容)は何か?2.  どのように機能を提供できるか?3.  その場におけるルール(作法)は何か? Copyright © 2012 Secret Lab, Inc. All Right Reserved. 14
    • 勘違いだらけのAndroid UIデザイン Copyright © 2012 Secret Lab, Inc. All Right Reserved. 15
    • 先ほどのテーマの回答•  勘違いだらけのAndroid UIデザイン 1.  Androidで独自性を出すのは大変? 2.  Androidアプリの開発は工数が係る? 3.  Android向けのデザインは大変? 4.  検証すべき端末は数百、すでに飽和状態? Copyright © 2012 Nobuya Sato. 16
    • さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 1.  Androidで独自性を出すのは大変 メーカーは端末の差異化を出すので大変です SNSゲーム会社は複数プラットフォーム向けにアプリ を対応させるのが大変です 独自性と独創性が混在していることが多いです。 アプリの独自性=コンテンツ、内容の事。見た目で 独自性を出すのは大変です。  Copyright © 2012 Nobuya Sato. 17
    • さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 2.  Androidのアプリの開発は工数が係る? 社内に経験がない技術で開発すると大変です。 工数削減のために、既に開発済みのiPhone向けアプ リをベースに開発すると、実は大変です。 (ネットにある記事のほとんどがこの話です) 現状、Fragmentを利用して複数デバイス(タブレット /フォーン)向けに完璧に開発しようとすると、実は かなり大変です Copyright © 2012 Nobuya Sato. 18
    • さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 3.  Android向けデザインは大変? 複数サイズのリソース用意したりとか面倒くさいです 複数画面サイズのレイアウトデザインが必要で、実はちょ っと面倒くさいです Android向けのデザイン作業やデザインのルールを熟知し ているデザイナーがまだまだ少ないです デザイナーといってもiPhoneアプリのデザイン経験者が 多い。デザインがiPhoneっぽくなって… Добрый день Copyright © 2012 Nobuya Sato. 19
    • さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 4.  検証すべき端末は数百、すでに飽和状態? Copyright © 2012 Nobuya Sato. 20
    • さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 4.  検証すべき端末は数百、すでに飽和状態? そうえいば18ヶ月保証とかありましたが… NexusシリーズやGoogleが指定しているリファレンス端末 (Xoomなど)を、OS毎に用意 ※OS毎の例:Android 1.6 = HTC Magic、Android 2.0 = DROID、Android 2.1 = Nexus One、Android 2.3 = Nexus S、Android 3.x = Xoom、Android 4.0 = Galaxy Nexus、Android 4.1 = nexus 7 国産メーカー(シャープ、NECカシオ、パナソニック、 ソニー)は☓。やっぱり海外端末、特に開発コミュニティ にも優しいSony EricssonかSamsungが良い。 ※LGやASUSなどの変態端末も可。海外主流の京セラもわりと良い Copyright © 2012 Nobuya Sato. 21
    • さっそく本日の回答•  勘違いだらけのAndroid UIデザイン•  主な開発手法 –  ネイティブ –  側だけネイティブ+中身をWeb View –  HTML5ベース → 標準ブラウザも実はかなりいじられている Copyright © 2012 Nobuya Sato. 22
    • 良いアプリUIのデザイン方法? Copyright © 2012 Secret Lab, Inc. All Right Reserved. 23
    • UIプロトタイピング•  まずはUIのプロトタイピングから… Copyright © 2012 Secret Lab, Inc. All Right Reserved. 24
    • UIプロトタイピング•  ワイヤーフレームとユーザーフローをしっかり作る © Geeky Gadgets Copyright © 2012 Secret Lab, Inc. All Right Reserved. 25
    • ペーパープロトタイピング•  費用も掛からず、全員が確認できて効果的 © The Mobile Frontier Copyright © 2012 Secret Lab, Inc. All Right Reserved. 26
    • UIステンシルツールなどを使う•  画面デザインを沢山つくるのに便利 Google I/O 2012で配られたGoogle Android UI teamオフィシャル?ステンシル Copyright © 2012 Secret Lab, Inc. All Right Reserved. 27
    • 面倒くさい人には… Copyright © 2012 Secret Lab, Inc. All Right Reserved. 28
    • UIデザイン=画面の流れのデザイン•  アプリを作る前に必ず、画面フローを確認をする © Six Revisions © xDevelop Copyright © 2012 Secret Lab, Inc. All Right Reserved. 29
    • 良いアプリの作り方? Copyright © 2012 Secret Lab, Inc. All Right Reserved. 30
    • より良いAndroidアプリの作り方•  https://developer.android.com/intl/ja/distribute/googleplay/strategies/app- quality.html Copyright © 2012 Secret Lab, Inc. All Right Reserved. 31
    • Androidアプリの品質向上•  Google API Expert 安藤さん(@yukio_andoh)による日本語訳•  http://www.andoh.org/2012/06/android-improving-app-quality.html Copyright © 2012 Secret Lab, Inc. All Right Reserved. 32
    • Androidアプリの品質向上1.  ユーザーの声を聞く2.  安定性の向上とバグの削除3.  UI 応答性の向上4.  ユーザビリティの向上5.  プロフェッショナルな外観と審美性 –  User Interface Deign Tips (2010 July)6.  必要な機能の正しい選択7.  システムと第三者アプリの統合8.  詳細に対して注意すること Copyright © 2012 Secret Lab, Inc. All Right Reserved. 33
    • Android Design Guideline Copyright © 2012 Secret Lab, Inc. All Right Reserved. 34
    • Android Design Guideline、Jelly Bean対応!•  http://developer.android.com/design/ Copyright © 2012 Secret Lab, Inc. All Right Reserved. 35
    • 旧Android Design Guideline(ICS版)•  http://developer.android.com/design/ Copyright © 2012 Nobuya Sato. 36
    • Android Design Guideline日本語版? 残念ながら表示しません。 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 37
    • 有志による日本語訳版(ICS版)•  松岡さん(@kenz_firespeed)による日本語訳版•  http://firespeed.org/diary.php?diary=kenz-1462 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 38
    • 補足 : 9-Patch•  http://developer.android.com/intl/ja/tools/help/draw9patch.html•  Android SDKで提供されている伸縮可能なボタン画像 を簡単に作るツール•  黒いドット部分を元に自動的に紫のように拡大される•  ドットの指定方法が少し奇抜で慣れが必要 伸縮可能 エリア パディング 指定も可能 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 39
    • 補足: Action Barの理解を助ける書籍•  Action BarやICSで追加されたAPIなどを理解するのに 良い参考書(エンジニア向け)•  Android UI Cookbook for 4.0 ICSアプリ開発術•  あんざいゆき(@yanzm)/著•  インプレスジャパン Copyright © 2012 Secret Lab, Inc. All Right Reserved. 40
    • Thank YouNobuya SatoSecret Lab, Inc.nobsato@secret-lab.jphttp://about.me/nobsatohttp://twitter.com/nobsatohttp://slideshare.com/nobsato Copyright © 2012 Secret Lab, Inc. All Right Reserved. 41