Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜...

Androidアプリの魅力的な

インターフェース

本当にiOSのアプリのデザインを流用するだけでいいの？

株式会社ツクロア　秋葉ちひろ

？2013.8.21 マイナビクリエイターズ Power Session

•見た目だけでなく機能のデザインを•デザインと技術、双方からのアプローチ

「気持ちいい」をデザインする会社

PC / iPhone / iPad / Android / and more...

秋葉ちひろデザイナー / アートディレクター

Designers Hack

技術にしばられずに

体験やデザインを考える

デザイナーズハック

http://designers-hack.net

Native Apps

AndroidMockUp

Native Apps

まずは iOS 版のデザインをつくってから、

Android 版にも使いまわしてよ。

AndroidMockUp

Design

Develop

Workflow

AndroidMockUp

Android の Default UI

AndroidMockUp

Why ?Android の Default UI

Default UI は、実装に負担をかけない

Android も同じものに？？

res/menu/activity_main.xml

＃これだけだと、Android 2.x 以下ではメニューキーにて呼び出される

iOS の UI をまねることで、余計に工数がかかる

（こともある）

iOS の UI をまねることで、余計に工数がかかる

（こともある）

？ANA

Good samplesiOS と Android で

UI をうまく使い分けている例

Android

AndroidExpedia

AndroidDropbox

Android アプリの基本的な Default UI について

Android アプリのデザインがむずかしいといわれる理由

Android アプリの基本的な Default UI について

基本的な Default UI

> Android Fragmentation Report July 2013 - OpenSignal

> Androidのバージョン履歴 - Wikipedia

2010 2011 2012 2013

1.5 2.1

Cupcake Donut Eclair Froyo Gingerbread1.5 1.6 2.0/2.1 2.2 2.3

iPhone 3GS iPhone 4 iPhone 4S iPhone 5

> Androidのバージョン履歴 - Wikipedia

Gingerbread2.3

2010 2011 2012 2013

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

•できるだけ無駄なものを排除し、シンプルに

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

9-patch• さまざまな画面サイズにあうように調整できる、Android アプリ特有の

画像の実装方法

画像を 9 分割して、四隅は固定、その他を伸びてもいいようにする

480x800 560x960

Action Bar基本的な Default UI

1. App icon

2. View control • app name• tab controls• drop-down menus

3. Action buttons • most important actions

4. Action overflow • more buttons

View controls基本的な Default UI

• app name

• tab controls

• drop-down menu

Action buttonsAction overflow

編集

Split action bar上下にわかれた Action bar

でも、

横向きでは split しない

異なるサブタスク間、

ビュー間、またはノード間

を切り替える機能をユーザ

に提供します。Tab bar

> iOS ヒューマンインターフェイスガイドライン p.142

Navigation Drawer基本的な Default UI

> Navigation Drawer | Android Developer

すべて

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

•Effective animation

Card UIこれからの (？) デザイン

Card UI• カードベースのフラットUIデザイン

• Android 5.0 Key Lime Pie で正式採用？

Card UI• カードベースのフラットUIデザイン

• Android 5.0 Key Lime Pie で正式採用？

Card UI

すべて

Card UI•出現時のアニメーションがさまざま•Google+ では、iOS と Android で出現アニメーションがちがう

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 通知

•写真の顔認識機能•写真の色補正•笑顔補正

プロトタイプについて

弊社でのこころみ

HTML based prototype

• HTML をベースに Android ネイティブアプリのプロトタイプをつくる

プロトタイプについて弊社でのこころみ

Why HTML ?

•ビルドの手間が必要なく、その場で微調整ができる

Why HTML ?

•完成品とは少しちがうところもある

> Fries

How about Hybrid ?

> 【第3回】スマホ向けアプリ開発における　ハイブリッドアプリの利点 - MdN Design Interactiv

Native Web View×固定のUITransitionScrollデータの呼出

表示部分

Android アプリの魅力的なインターフェース

•各所で Default UI を使えないかどうか考える

8月末日、電子書籍発売！

AppName

TabName TabName TabName

[tuqulore] 音楽を再生するときのバグ - おせわになっております、秋葉です。さきほどは ...

17:49hideki.akiba

[tuqulore] Interfaceを削除する方法 - おせわになっております、秋葉です。さきほどは ...

17:49Chihiro.Akiba

17:49hideki.akiba

362412

54pt 42pt 36pt

よく使う余白ブロック（px）

Roboto BoldRoboto Regular

3px6px9px

17:49hideki.akiba

よく使う要素ブロック（px）

画像要素などでよく使う大きさのブロックです。

よく使うフォントサイズ

フォントはあまりたくさん使わずに、できるだけこの 3種類におさえましょう。

余白で使うブロックです。だいたいの大きさにあわせて大きさを調整すれば、それだけできれいなレイアウトに。コピペしてぺたぺた使えます。

よく使うフォント

英語は「Roboto」、日本語は「モトヤマルベリ」にしましょう。モトヤマルベリがない場合は「ヒラギノ丸ゴ /角ゴ」あたりが無難です。font-weight は 2種類（Bold/Regular）で考えましょう。

よく使うライン

むやみに太さを変えず、できるだけこの 3種類におさえましょう。

AppName

TabName TabName TabName

17:49hideki.akiba

[tuqulore] Interfaceを削除する方法 - おせわになっております、秋葉です。さきほどは ...

17:49Chihiro.Akiba

17:49hideki.akiba

362412

54pt 42pt 36pt

よく使う余白ブロック（px）

Roboto BoldRoboto Regular

3px6px9px

17:49hideki.akiba

よく使う要素ブロック（px）

画像要素などでよく使う大きさのブロックです。

よく使うフォントサイズ

フォントはあまりたくさん使わずに、できるだけこの 3種類におさえましょう。

余白で使うブロックです。だいたいの大きさにあわせて大きさを調整すれば、それだけできれいなレイアウトに。コピペしてぺたぺた使えます。

よく使うフォント

英語は「Roboto」、日本語は「モトヤマルベリ」にしましょう。モトヤマルベリがない場合は「ヒラギノ丸ゴ /角ゴ」あたりが無難です。font-weight は 2種類（Bold/Regular）で考えましょう。

よく使うライン

むやみに太さを変えず、できるだけこの 3種類におさえましょう。

http://goo.gl/XepQd

ありがとうございました

秋葉ちひろ @tommmmy

Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜...

Documents

Androidアプリ・Web版の開発 - dagik.orgdagik.org/docs/2018workshop/20181227_o23.pdf · Androidアプリ・Web版の開発 Unityツールキット・ARアプリの開発 Crosshat

Introducing libpd -Pdをアプリのサウンドエンジンに-

Pyconjp 2014 OpenCVのpythonインターフェース入門

Bluemix受賞アプリ Bluecouponのその後

Windows 8時代のアプリ開発

KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道

ASAM ASAP3インターフェースユーザーズガイドETAS －ASAM ASAP3 インターフェースユーザーズガイド INCA ASAM ASAP3 インターフェースの概要 8

h0104 phv 180329 - G-BOOK · お車の店舗サービスアプリ提供サービス各種設定通信設定アプリのダウンロードアプリの初期設定 PHV Drive

ハイデンハインエンコーダのインターフェース - …...2 インターフェースエンコーダと後続電子機器間では伝送方法を明確に定義しているため、各種インターフェースに

キャリアとアプリのアップデート

ASAM ASAP3 インターフェースユーザーズガイド›®次 1 INCA ASAM ASAP3 インターフェースの概要 5 1.1 安全のための注意事項 6 1.2 用語の定義

GTFS対応アプリ/ライブラリを触ってみよう...2019/04/02 · •TriMetのサポートのもと開発されたOSS • 経路探索エンジン • 実装はJava • インターフェースはHTTP

実践! iPhoneアプリ開発楽器アプリの作り方

オックスフォード現代英英辞典[第10版] OALD10活 …Oxford Advanced Learner’s Dictionary アプリの導入アプリの導入 3 OALD10活用ガイドアプリ編

SONY Smart watchアプリの作り方

PHP による WEB アプリの構築

I phoneアプリの通信エラー処理

INCA ASAM ASAP3 インターフェース- ユーザーズ …ETAS ASAM ASAP3 インターフェース - ユーザーズガイド INCA ASAM ASAP3 インターフェースの概要 6

既存アプリのiOS8対応 #ios8yahoo

FPGA を用いた MG3 用インターフェース回路の解説