Upload
chihiro-akiba
View
30.671
Download
2
Embed Size (px)
DESCRIPTION
2013年8月21日開催のマイナビクリエイターズ Power Session Vol.1 スマホアプリUI攻略 での資料
Citation preview
Androidアプリの魅力的な
インターフェース
本当にiOSのアプリのデザインを流用するだけでいいの?
株式会社ツクロア 秋葉ちひろ
12:00
?2013.8.21 マイナビ クリエイターズ Power Session
•見た目だけでなく機能のデザインを•デザインと技術、双方からのアプローチ
「気持ちいい」をデザインする会社
PC / iPhone / iPad / Android / and more...
秋葉 ちひろ デザイナー / アートディレクター
Designers Hack
技術にしばられずに
体験やデザインを考える
デザイナーズハック
http://designers-hack.net
12:00
Native Apps
AndroidMockUp
Native Apps
まずは iOS 版のデザインをつくってから、
Android 版にも使いまわしてよ。
12:00
AndroidMockUp
Design
Design
Develop
Develop
Workflow
12:00
AndroidMockUp
Android の Default UI
12:00
AndroidMockUp
12:00
AndroidMockUp
Why ?Android の Default UI
Default UI は、実装に負担をかけない
Android も同じものに??
res/menu/activity_main.xml
<menu> ~~~~~~~~~~~~~~~~~~~~ <item android:id="@+id/action_delete" android:icon="@drawable/ic_action_delete" android:title="@string/action_delete" android:showAsIcon="ifRoom" /> ~~~~~~~~~~~~~~~~~~~~</menu>
#これだけだと、Android 2.x 以下ではメニューキーにて呼び出される
Why ?Android の Default UI
iOS の UI をまねることで、余計に工数がかかる
(こともある)
Why ?Android の Default UI
iOS の UI をまねることで、余計に工数がかかる
(こともある)
?ANA
Good samplesiOS と Android で
UI をうまく使い分けている例
12:00
Android
Good samplesiOS と Android で
UI をうまく使い分けている例
12:00
AndroidExpedia
Good samplesiOS と Android で
UI をうまく使い分けている例
12:00
AndroidDropbox
Android アプリの基本的な Default UI について
12:00
Android アプリのデザインがむずかしいといわれる理由
Android アプリの基本的な Default UI について
基本的な Default UI
> Android Fragmentation Report July 2013 - OpenSignal
基本的な Default UI
> Android Fragmentation Report July 2013 - OpenSignal
基本的な Default UI
> Android Fragmentation Report July 2013 - OpenSignal
基本的な Default UI
> Android Fragmentation Report July 2013 - OpenSignal
基本的な Default UI
基本的な Default UI
基本的な Default UI
> Androidのバージョン履歴 - Wikipedia
4.2
11.13
4.1
6.27
4.0
10.18
2009
2.0
10.26
2.2
5.21
2.3
12.6
2010 2011 2012 2013
9.15
1.6
4.30
1.5 2.1
1.12
Cupcake Donut Eclair Froyo Gingerbread1.5 1.6 2.0/2.1 2.2 2.3
iPhone 3GS iPhone 4 iPhone 4S iPhone 5
3.x
基本的な Default UI
> Androidのバージョン履歴 - Wikipedia
Gingerbread2.3
4.2
11.13
4.1
6.27
4.0
10.18
2.0
10.26
2.2
5.21
2.3
12.6
2010 2011 2012 2013
4.3
7.24
2.1
1.12
iPhone 4 iPhone 4S iPhone 5
Ice Cream Sandwitch
4.0Jelly Bean4.1/4.2/4.3
Honeycomb3.0/3.1/3.2
Design Concept•バージョン 2.x から一新した 4.x
•できるだけ無駄なものを排除し、シンプルに
基本的な Default UI
Design Concept• 2.x から一新した 4.x
• できるだけ無駄なものを排除し、シンプルに
基本的な Default UI2.3 4.0-
Design Concept• 2.x から一新した 4.x
• できるだけ無駄なものを排除し、シンプルに
基本的な Default UI2.3 4.0-
さまざまな画面サイズに
適応しやすい工夫
•9-patch
•Action Bar
基本的な Default UI
9-patch• さまざまな画面サイズにあうように調整できる、Android アプリ特有の
画像の実装方法
基本的な Default UI
基本的な Default UI
画像を 9 分割して、四隅は固定、その他を伸びてもいいようにする
480x800 560x960
Action Bar基本的な Default UI
Action Bar基本的な Default UI
1. App icon
Action Bar基本的な Default UI
1. App icon
Action Bar基本的な Default UI
2. View control • app name• tab controls• drop-down menus
Action Bar基本的な Default UI
3. Action buttons • most important actions
Action Bar基本的な Default UI
4. Action overflow • more buttons
View controls基本的な Default UI
• app name
View controls基本的な Default UI
• tab controls
View controls基本的な Default UI
• drop-down menu
Action buttonsAction overflow
基本的な Default UI
Action buttonsAction overflow
基本的な Default UI
Action buttonsAction overflow
基本的な Default UI
Action buttonsAction overflow
基本的な Default UI
編集
Action buttonsAction overflow
基本的な Default UI
基本的な Default UI
Split action bar上下にわかれた Action bar
Split action bar上下にわかれた Action bar
基本的な Default UI
でも、
横向きでは split しない
Split action bar上下にわかれた Action bar
基本的な Default UI
Split action bar上下にわかれた Action bar
基本的な Default UI
異なるサブタスク間、
ビュー間、またはノード間
を切り替える機能をユーザ
に提供します。Tab bar
> iOS ヒューマンインターフェイスガイドライン p.142
Split action bar上下にわかれた Action bar
基本的な Default UI
基本的な Default UI
Navigation Drawer基本的な Default UI
> Navigation Drawer | Android Developer
Navigation Drawer基本的な Default UI
すべて
Person Name2 hours ago
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
Navigation Drawer基本的な Default UI
すべて
Person Name2 hours ago
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
ホーム
ユーザー
写真
これからの (?) デザイン
12:00
これからの (?) デザイン
•Card UI
•Effective animation
Card UIこれからの (?) デザイン
Card UI• カードベースのフラットUIデザイン
• Android 5.0 Key Lime Pie で正式採用?
これからの (?) デザイン
Card UI• カードベースのフラットUIデザイン
• Android 5.0 Key Lime Pie で正式採用?
これからの (?) デザイン
Card UI
すべて
Person Name2 hours ago
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
これからの (?) デザイン
すべて
Person Name2 hours ago
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
これからの (?) デザイン
すべて
Person Name2 hours ago
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
Person Name2 hours ago
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
これからの (?) デザイン
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
Person Name2 hours ago
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
これからの (?) デザイン
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
Person Name2 hours ago
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
Person Name2 hours ago
All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
これからの (?) デザイン
Card UI•出現時のアニメーションがさまざま•Google+ では、iOS と Android で出現アニメーションがちがう
これからの (?) デザイン
Effective animationこれからの (?) デザイン
•アニメーションは、つければいいというわけではない
•自然で気持ちのよい動き
気持ちよさをデザインする
Effective animation•フラットな中に、ほんの少しだけ立体感を感じさせるようなエフェクト
これからの (?) デザイン
Effective animationこれからの (?) デザイン
•ローディング時のエフェクト気持ちよさをデザインする
Effective animation•もっといろんな効果的なものがあるのではないか?
•そういった観点からの提案を心がけている
これからの (?) デザイン
Effective animation•もっといろんな効果的なものがあるのではないか?
•そういった観点からの提案を心がけている
これからの (?) デザイン
Effective animation•もっといろんな効果的なものがあるのではないか?
•そういった観点からの提案を心がけている
これからの (?) デザイン
Effective animation•もっといろんな効果的なものがあるのではないか?
•そういった観点からの提案を心がけている
これからの (?) デザイン
Effective animation•もっといろんな効果的なものがあるのではないか?
•そういった観点からの提案を心がけている
これからの (?) デザイン
Google のめざす UX
•わたしたちの生活に自然に入り込み、便利にしていく
Google Map Google Calendar Google Search
> Google Now
Google+
Google のめざす UX
• Car navigation
• Chrome や Map、Calendar との連携で Push 通知
• Chrome や Map、Calendar との連携で Push 通知
•写真の顔認識機能•写真の色補正•笑顔補正
プロトタイプについて
弊社でのこころみ
12:00
HTML based prototype
• HTML をベースに Android ネイティブアプリのプロトタイプをつくる
プロトタイプについて弊社でのこころみ
Why HTML ?
•ビルドの手間が必要なく、その場で微調整ができる
プロトタイプについて弊社でのこころみ
Good!
Why HTML ?
•完成品とは少しちがうところもある
プロトタイプについて弊社でのこころみ
Bad!
How about Hybrid ?
プロトタイプについて弊社でのこころみ
> 【第3回】スマホ向けアプリ開発における ハイブリッドアプリの利点 - MdN Design Interactiv
Native Web View×固定のUITransitionScrollデータの呼出
表示部分
Android アプリの魅力的なインターフェース
•各所で Default UI を使えないかどうか考える
12:00
8月末日、電子書籍発売!
AppName
TabName TabName TabName
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] Interfaceを削除する方法 - おせわになっております、秋葉です。さきほどは ...
17:49Chihiro.Akiba
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
144
48 96
144
362412
54pt 42pt 36pt
よく使う余白ブロック(px)
Roboto BoldRoboto Regular
3px6px9px
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
よく使う要素ブロック(px)
画像要素などでよく使う大きさのブロックです。
よく使うフォントサイズ
フォントはあまりたくさん使わずに、できるだけこの 3種類におさえましょう。
余白で使うブロックです。だいたいの大きさにあわせて大きさを調整すれば、それだけできれいなレイアウトに。コピペしてぺたぺた使えます。
よく使うフォント
英語は「Roboto」、日本語は「モトヤ マルベリ」にしましょう。モトヤ マルベリがない場合は「ヒラギノ丸ゴ /角ゴ」あたりが無難です。font-weight は 2種類(Bold/Regular)で考えましょう。
よく使うライン
むやみに太さを変えず、できるだけこの 3種類におさえましょう。
AppName
TabName TabName TabName
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] Interfaceを削除する方法 - おせわになっております、秋葉です。さきほどは ...
17:49Chihiro.Akiba
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
144
48 96
144
362412
54pt 42pt 36pt
よく使う余白ブロック(px)
Roboto BoldRoboto Regular
3px6px9px
[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...
17:49hideki.akiba
よく使う要素ブロック(px)
画像要素などでよく使う大きさのブロックです。
よく使うフォントサイズ
フォントはあまりたくさん使わずに、できるだけこの 3種類におさえましょう。
余白で使うブロックです。だいたいの大きさにあわせて大きさを調整すれば、それだけできれいなレイアウトに。コピペしてぺたぺた使えます。
よく使うフォント
英語は「Roboto」、日本語は「モトヤ マルベリ」にしましょう。モトヤ マルベリがない場合は「ヒラギノ丸ゴ /角ゴ」あたりが無難です。font-weight は 2種類(Bold/Regular)で考えましょう。
よく使うライン
むやみに太さを変えず、できるだけこの 3種類におさえましょう。
http://goo.gl/XepQd
ありがとうございました
秋葉ちひろ @tommmmy
12:00