android pattern cookbook で見るトレンドの変遷

Android Pattern Cookbook でみる

トレンドの変遷

• blog : Y.A.M の雑記帳 • y-anz-m.blogspot.com

• twitter : @yanzm （やんざむ） • uPhyca Inc. (株式会社ウフィカ)

あんざいゆき

New

https://play.google.com/store/apps/details?id=yanzm.products.patterncookbook

目次

1章 : Structure - アプリの構成と階層

2章 : Branding - オリジナリティを出す

3章 : Helps - ユーザーを導く

4章 : ViewPager - 画面切り替えの定番

5章 : Support Tablet - 柔軟性のあるレイアウト

6章 : CustomView - 思い通りのレイアウト

7章 : Advanced - 1つ上のカスタマイズ

１章 : Structure - アプリの構成と階層

NavigationDrawerのガイドライン化

Foursquare

NavigationDrawerのガイドライン化

YouTube

NavigationDrawerのガイドライン化

Google+

NavigationDrawerのガイドライン化

Google+

NavigationDrawerのガイドライン

Navigation Indicator

リストのアイコンは左

リストのカウンターは右

ガイドラインにそってない

Evernote

びみょうにガイドラインにそってない

Feedly

NavigationDrawerではない

SlidingPaneLayout（５章で登場）

上部にユーザー情報

アカウント切り替えの新しいモデル

２章 : Branding - オリジナリティを出す

ActionBarとコンテンツの配色 = 雰囲気

ActionBarの背景

ActionBarの背景

フレームワークのActionBar

相変わらずオリジナルのActionBar

android:fontFamily

sans-serif-thin sans-serif-condensed

３章 : Helps - ユーザーを導く

ヘルプポップアップ

チュートリアル

ヘルプポップアップ - 吹き出し

ヘルプポップアップ - 丸

ヘルプポップアップ - アニメーション

空ページにインストラクション

チュートリアル

チュートリアル

チュートリアル

４章 : ViewPager - 画面切り替えの定番

ヘルプポップアップ

チュートリアル

スクロールできるタブ

タイトル

インディケータ

ページ切り替え時のエフェクト

デモアプリでみるべし

５章 : Support Tablet - 柔軟性のあるレイアウト

スケールアップ

フローティング

Macro Reflow（並び替え）

Lists to Grids

タブの展開表示

メニューの展開表示

Master/Detailパターン

SlidingPaneLayout

スケールアップ

フローティング

MacroReflow（並び替え）

MacroReflow（並び替え）

MacroReflow - グリッド数

MacroReflow - グリッド数

Lists to Grids

Lists to Grids

タブの展開表示

タブの展開表示

メニューの展開表示

Master/Detailパターン

Master/Detailパターン

SlidingPaneLayout

SlidingPaneLayout

６章 : CustomView - 思い通りのレイアウト

正方形のImageViewの作り方とか

７章 : Advanced - １つ上のカスタマイズ

カードUI ショーケース スワイプオフできるリスト ヘッダーが残るリスト スクロール位置に応じて透明度が変わるAction Bar ログイン画面 オリジナルのプログレス 下にスワイプして更新 …

カードUI

ショーケース

ショーケース

ショーケース

スワイプオフ

ヘッダーが残るリスト

スクロール位置に応じて透明度が変わるActionBar

ログイン画面

ログイン画面

ログイン画面

ログイン画面

オリジナルのプログレス

デモアプリをみて！

下にスワイプして更新

New

このあとバザールのインプレスブースで サイン会します！

ありがとうございました。