Suche senden
Hochladen
マテリアルデザインを用いたデザインリニューアル [フリル編]
•
286 gefällt mir
•
93,771 views
YUKI YAMAGUCHI
Folgen
DroidKaigiで発表したマテリアルデザインを用いたデザインリニューアル の資料です。
Weniger lesen
Mehr lesen
Ingenieurwesen
Melden
Teilen
Melden
Teilen
1 von 88
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UIElements+UI BuilderでEditor拡張を作ろう
UIElements+UI BuilderでEditor拡張を作ろう
Unity Technologies Japan K.K.
なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)
Naoki Hashimoto
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
インターリンク株式会社
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
Spring CloudとZipkinを利用した分散トレーシング
Spring CloudとZipkinを利用した分散トレーシング
Rakuten Group, Inc.
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
Empfohlen
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UIElements+UI BuilderでEditor拡張を作ろう
UIElements+UI BuilderでEditor拡張を作ろう
Unity Technologies Japan K.K.
なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)
Naoki Hashimoto
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
インターリンク株式会社
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
Spring CloudとZipkinを利用した分散トレーシング
Spring CloudとZipkinを利用した分散トレーシング
Rakuten Group, Inc.
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
第79回 Machine Learning 15minutes ! 生成AIをエンタープライズで活用するWatsonx.aiの紹介
第79回 Machine Learning 15minutes ! 生成AIをエンタープライズで活用するWatsonx.aiの紹介
Tsuyoshi Hirayama
“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門
Masaya Ando
ワイワイCAFE UX、デザイン思考、サービスデザインのための「現場で使えるカスタマージャーニーマップ入門」
ワイワイCAFE UX、デザイン思考、サービスデザインのための「現場で使えるカスタマージャーニーマップ入門」
Tomohiro Suzuki
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Kazumichi (Mario) Sakata
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
Koichi Tanaka
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
GTMF 2016:Perforce HelixによるGit環境の改善と拡張 株式会社東陽テクニカ(Perforce Helix)
GTMF 2016:Perforce HelixによるGit環境の改善と拡張 株式会社東陽テクニカ(Perforce Helix)
Game Tools & Middleware Forum
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
スマートフォンアプリ企画書ver.0.1
スマートフォンアプリ企画書ver.0.1
tmr2013
UXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよ
Masaya Ando
【Unity道場】ゲーム制作に使う数学を学習しよう
【Unity道場】ゲーム制作に使う数学を学習しよう
Unity Technologies Japan K.K.
マテリアルデザイン
マテリアルデザイン
Akio Yonekura
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
Tomohiro Suzuki
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
VyOSで作るIPv4 Router/IPv6 Bridge
VyOSで作るIPv4 Router/IPv6 Bridge
KLab Inc. / Tech
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
モノビット エンジン
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
schoowebcampus
ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?
Yuya Rin
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
Masaya Ando
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
kyon mm
Droid kaigiプレゼン
Droid kaigiプレゼン
Suguru Oho
Weitere ähnliche Inhalte
Was ist angesagt?
第79回 Machine Learning 15minutes ! 生成AIをエンタープライズで活用するWatsonx.aiの紹介
第79回 Machine Learning 15minutes ! 生成AIをエンタープライズで活用するWatsonx.aiの紹介
Tsuyoshi Hirayama
“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門
Masaya Ando
ワイワイCAFE UX、デザイン思考、サービスデザインのための「現場で使えるカスタマージャーニーマップ入門」
ワイワイCAFE UX、デザイン思考、サービスデザインのための「現場で使えるカスタマージャーニーマップ入門」
Tomohiro Suzuki
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Kazumichi (Mario) Sakata
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
Koichi Tanaka
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
GTMF 2016:Perforce HelixによるGit環境の改善と拡張 株式会社東陽テクニカ(Perforce Helix)
GTMF 2016:Perforce HelixによるGit環境の改善と拡張 株式会社東陽テクニカ(Perforce Helix)
Game Tools & Middleware Forum
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
スマートフォンアプリ企画書ver.0.1
スマートフォンアプリ企画書ver.0.1
tmr2013
UXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよ
Masaya Ando
【Unity道場】ゲーム制作に使う数学を学習しよう
【Unity道場】ゲーム制作に使う数学を学習しよう
Unity Technologies Japan K.K.
マテリアルデザイン
マテリアルデザイン
Akio Yonekura
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
Tomohiro Suzuki
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
VyOSで作るIPv4 Router/IPv6 Bridge
VyOSで作るIPv4 Router/IPv6 Bridge
KLab Inc. / Tech
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
モノビット エンジン
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
schoowebcampus
ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?
Yuya Rin
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
Masaya Ando
Was ist angesagt?
(20)
第79回 Machine Learning 15minutes ! 生成AIをエンタープライズで活用するWatsonx.aiの紹介
第79回 Machine Learning 15minutes ! 生成AIをエンタープライズで活用するWatsonx.aiの紹介
“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門
ワイワイCAFE UX、デザイン思考、サービスデザインのための「現場で使えるカスタマージャーニーマップ入門」
ワイワイCAFE UX、デザイン思考、サービスデザインのための「現場で使えるカスタマージャーニーマップ入門」
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
Adaptive Path's Guide To Experience Mapping (Japanese Edition)
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
GTMF 2016:Perforce HelixによるGit環境の改善と拡張 株式会社東陽テクニカ(Perforce Helix)
GTMF 2016:Perforce HelixによるGit環境の改善と拡張 株式会社東陽テクニカ(Perforce Helix)
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
スマートフォンアプリ企画書ver.0.1
スマートフォンアプリ企画書ver.0.1
UXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよ
【Unity道場】ゲーム制作に使う数学を学習しよう
【Unity道場】ゲーム制作に使う数学を学習しよう
マテリアルデザイン
マテリアルデザイン
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
VyOSで作るIPv4 Router/IPv6 Bridge
VyOSで作るIPv4 Router/IPv6 Bridge
UXのためのUIデザイン
UXのためのUIデザイン
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
Andere mochten auch
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
kyon mm
Droid kaigiプレゼン
Droid kaigiプレゼン
Suguru Oho
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
JobStreamerではじめるJavaBatchのクラウド分散実行
JobStreamerではじめるJavaBatchのクラウド分散実行
Yoshitaka Kawashima
データモデルは時空を越える
データモデルは時空を越える
terahide
絶対落ちないアプリの作り方
絶対落ちないアプリの作り方
Fumihiko Shiroyama
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
sohta
Android学ぶを君へ。生き抜くためのナレッジ共有
Android学ぶを君へ。生き抜くためのナレッジ共有
Shinobu Okano
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
Shinichi Kozake
Java web application testing
Java web application testing
Tokuhiro Matsuno
DB設計でこだわりたい三つの要素
DB設計でこだわりたい三つの要素
Takahiro YAMADA
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
Akio Yonekura
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
Yoshinori OHTA
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
Sociomedia
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
Takahiro Ishiyama
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
Yuki Anzai
Andere mochten auch
(20)
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
Droid kaigiプレゼン
Droid kaigiプレゼン
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
JobStreamerではじめるJavaBatchのクラウド分散実行
JobStreamerではじめるJavaBatchのクラウド分散実行
データモデルは時空を越える
データモデルは時空を越える
絶対落ちないアプリの作り方
絶対落ちないアプリの作り方
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
Android学ぶを君へ。生き抜くためのナレッジ共有
Android学ぶを君へ。生き抜くためのナレッジ共有
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
Java web application testing
Java web application testing
DB設計でこだわりたい三つの要素
DB設計でこだわりたい三つの要素
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Sketchで変わるワークフロー
Sketchで変わるワークフロー
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
Mehr von YUKI YAMAGUCHI
Think user first #2 フリルの機能改善における仮説と検証
Think user first #2 フリルの機能改善における仮説と検証
YUKI YAMAGUCHI
WordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれ
YUKI YAMAGUCHI
Abc words
Abc words
YUKI YAMAGUCHI
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
YUKI YAMAGUCHI
Sacss WordPress Special with Fireworks
Sacss WordPress Special with Fireworks
YUKI YAMAGUCHI
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
YUKI YAMAGUCHI
Road Map 2012
Road Map 2012
YUKI YAMAGUCHI
EC-CUBEとここが違う!はじめてみようCS-Cart
EC-CUBEとここが違う!はじめてみようCS-Cart
YUKI YAMAGUCHI
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
YUKI YAMAGUCHI
CS -Cart勉強会
CS -Cart勉強会
YUKI YAMAGUCHI
WordPressテーマの作り方
WordPressテーマの作り方
YUKI YAMAGUCHI
Osc2010fukuoka
Osc2010fukuoka
YUKI YAMAGUCHI
Word Camp Fukuoka2010
Word Camp Fukuoka2010
YUKI YAMAGUCHI
WordcampFukuoka2010プレイベント
WordcampFukuoka2010プレイベント
YUKI YAMAGUCHI
Mehr von YUKI YAMAGUCHI
(14)
Think user first #2 フリルの機能改善における仮説と検証
Think user first #2 フリルの機能改善における仮説と検証
WordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれ
Abc words
Abc words
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
Sacss WordPress Special with Fireworks
Sacss WordPress Special with Fireworks
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
Road Map 2012
Road Map 2012
EC-CUBEとここが違う!はじめてみようCS-Cart
EC-CUBEとここが違う!はじめてみようCS-Cart
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
CS -Cart勉強会
CS -Cart勉強会
WordPressテーマの作り方
WordPressテーマの作り方
Osc2010fukuoka
Osc2010fukuoka
Word Camp Fukuoka2010
Word Camp Fukuoka2010
WordcampFukuoka2010プレイベント
WordcampFukuoka2010プレイベント
マテリアルデザインを用いたデザインリニューアル [フリル編]
1.
マテリアルデザインを 用いたデザインリニューアル 株式会社Fablic ninjinkun,yuki930
2.
@ninjinkun @yuki930 エンジニア デザイナー
3.
ninjinkun • 最近はDagger2に入門中 • http://ninjinkun.hatenablog.com/
4.
yuki930 • 山口 有由希 •
ずっとAndroidユーザー • 福岡でデザイナー • 2014年1月にFablicに入社
5.
女の子のためのフリマアプリ 300万 ダウンロード 2014 Google BestApp
6.
Fril 2.x
7.
Fril 3.x
8.
時系列の説明 • 2014年6月 マテリアルデザインガイドライン公開 •
2014年7月 フリルAndroid版リニューアル計画スタート • TV CMが決まってリリース日が10月末に確定 • タイミングが5.0と重なりそう • どうせリニューアルするならマテリアル対応… • 2014年12月 Google Play Best App 2014受賞
9.
UIリニューアルの流れ v2.5 v3.0 v3.1
v3.2 ∼2014年10月 2014年10月 2014年11月 2014年12月 リニューアル前 体験改善! 自力Material サポート ライブラリ適用 タブレット対応
10.
マテリアルデザインの キャッチアップと実装について 今日お話すること
11.
マテリアルデザインの理解と取り組み デザイン編
12.
Google I/O 2014
13.
マテリアルデザインの理解
14.
信じられるもの:ガイドライン http://www.google.com/design/spec/material-design/introduction.html
15.
リアルタイムに変わっていくから! 今もなお…
16.
Material Design on
Android Checklist マテリアルデザインを理解する上でキーとなる4つのポイントの解説 Tangible Surfaces A Bold, Print-Like Aesthetic Authentic Motion Adaptive Design 手触りのある 表面の表現 印刷物デザインの 応用 修飾ではなく 意味を伝える動き 画面サイズの変化に 適応するデザイン http://android-developers.blogspot.jp/2014/10/material-design-on- android-checklist.html
17.
マテリアル・デザインって何? Androidデザイン責任者にインタビュー どういう経緯で生まれたのか?が分かる記事 我々は誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザイ ンシステムを作りたかったんです。 それは巨大なデザイン空間で、超エキサイティングでした。それほど大きなデザイン問題に取り組んだ 人とか機会が他にあったかわかりません。そこにチームがひとつになって取り組めたのは素晴らしかっ たです。みんな本当にのめりこんでいきましたからね。デザイナーを巻き込めば巻き込むほど、彼らは 「あのさあ、もうちょっと本気出せば、僕らだってこの問題は解けるよ?」と言ってくるんです。 http://www.gizmodo.jp/2014/07/_android.html
18.
An exploration in
Material Design 実際に上記ポイントを踏まえてリニューアルされたfeedlyの事例 https://medium.com/feedly-behind-the-curtain/an-exploration-in- material-design-by-feedly-8c1a1cbdfdcd
19.
公式動画に日本語字幕もつきました http://googledevjp.blogspot.jp/2015/02/blog-post.html
20.
プロトタイプ作成
21.
ユーザーからの要望や お問い合わせチェック
22.
UIパターンの調査
23.
ペーパープロトテスト
24.
25.
ユーザーテスト
26.
がんばってAndroidの標準に 合わせたつもりだったが…
27.
既存ユーザーの使い勝手を 悪くしてしまっていた
28.
29.
30.
31.
32.
33.
議論は ユーザーテストで収束
34.
デザインルール作成
35.
カラー
36.
フリルらしい配色のカラーパレットを作成
37.
タイポグラフィー
38.
日本語だと強くなりすぎてしまう点を考慮して 行間やフォントサイズを最適化 草案 最終的には値は変更しています
39.
40.
+1sp ALL CAPSなし
41.
42.
デザイン起こし
43.
sticker sheet パーツのデザインが ひと通り揃っています Sketchのデータが扱いやすく とくにおすすめ! http://www.google.com/design/spec/resources/sticker-sheets-icons.html
44.
アイコン作成
45.
提供されているアイコン類
46.
Githubでも管理 https://github.com/google/material-design-icons
47.
足りないモチーフの書き起こし
48.
IcoMoonで アイコンフォント化 • ブラウザから簡単にフォントファ イルが作成可能 • jsonファイルを利用すれば 誰でもブラウザだけで編集が可能
49.
16KBまで削減でき、アプリの容量もダウン
50.
51.
実装のための準備
52.
扱いやすい カラー定義 基本的な配色ルールを colors.xmlに定義 基本的にはそれらの色を参照する 形で色を設定すると 変更に柔軟になりとても便利!
53.
カラー定義 基本的な配色ルールを colors.xmlに定義 基本的にはそれらの色を継承する 形で色を設定すると 変更に柔軟になりとても便利!
54.
定数定義 余白や基本的な フォントサイズなどを dimen.xmlに定義
55.
ボタンの整備 影もdrawableで書いていたが 1dp単位で書いていたので荒すぎた 影を必死に描くのは不毛なので 影の背景画像、シェイプ、アイコンの 重ね技で色変更のしやすいボタンに
56.
textAppearance の活用 TextAppearanceを活用することで styleの切り分けが容易に スタイルがコンパクトになり、 かつ無駄に似たような スタイルが増えすぎることがない
57.
マテリアルデザインの理解と取り組み 実装編
58.
Support Libraryが ない状況での マテリアル対応 実装と ライブラリの変遷
59.
実装・ライブラリの変遷 2.x 3.x Activityまわり Activityべた書き
Activity + Fragment APIクライアント AsyncTaskLoader ベースの自作 Retrofit + RxJava 画像 Picasso Picasso EventBus Otto Otto View DI findViewById() ButterKnife テスト なし >< JUnit4, Mocito CI なし >< CircleCI
60.
Activity + Fragment •
それまではActivityべた書きだった… • 回転対応、タブレット対応を見据えてFragment化
61.
Activity + Fragment •
ひたすらFragment化
62.
Activity + Fragment •
ひたすらFragment化
63.
Activity + Fragment •
一通り対応が終わってからFragment批判が盛り上がって 辛い • 【翻訳】Android Fragmentへの反対声明 • しかしFragment使って良かったと思ってます • ViewPagerはFragment使わないと実装しづらい http://ninjinkun.hatenablog.com/entry/2014/10/16/234611
64.
Retrofit Square製のHTTP Client インターフェイスにアノテーション を書くスタイルで読みやすい JavaDocにAPIの仕様を 記述していくと良い感じ
65.
RxJava Reactive ExtensionのJava実装 FrilではPromiseとして使用 複雑なAPIコールを宣言的に記述 商品情報のPOSTと画像アップロード を順に行う様子 商品情報POST 画像を4枚POST レスポンス レスポンス
66.
MaterialTabHost マテリアルスタイルで ViewPager+Tabを実現する NAVIGATION_MODE_TABSの代替 https://github.com/yanzm/MaterialTabHost
67.
Calligraphy アイコンフォントに使用 TextViewを拡張して外部フォントを 読み込み可能にしてくれる https://github.com/chrisjenx/Calligraphy
68.
Support Libraryがない状況での マテリアル対応
69.
Support Libraryがない状況でのマテリアル対応 • パラメータを
えてそれっぽく見せる • Floating Action Button • Scroll to Full Screen ←お手軽 ←お手軽 ←ハード Android 5.0 & Support Library 21がリリース前だった
70.
パラメータを えてそれっぽく見せる 48dp 10dp Fril 2.5 52dp 16dp Fril
3.0 Googleに怒られるやつ
71.
パラメータを えてそれっぽく見せる Fril 2.5
Fril 3.0 Fril 3.2
72.
FloatingAction Button ボタンを置くだけ 今はOSS実装もあります makovkastar/FloatingActionButton
73.
Scrollto FullScreen ScrollViewやListViewのAPIを調べ てがんばって実装 ninjinkun/ScrollFullScreen
74.
Scrollto FullScreen ScrollViewやListViewのAPIを調べ てがんばって実装 ninjinkun/ScrollFullScreen
75.
Scroll to Full
Screen • 今ならSupport Libraryでできます • ActionBar. setHideOnContentScrollEnabled • 細かいことがやりたければもっと良いライブラリも • Android-ObservableScrollView
76.
黎明期マテリアル対応の感想 • Googleの標準も固まってなかったりして暗中模索 • 先行実装しても損はしない •
Support Libraryリリース時の対応もすぐできた • 先行実装でGoogleさんからの評価は上がった様子
77.
おわりに
78.
Androidの進化のタイミングはチャンス いち早いキャッチアップはBest Appへの近道(かも) でもユーザー視点は忘れずに 技術やデザインを自分たちのものにしようとする努力が大切
79.
リニューアルの裏話
80.
社外開発者との連携 • 手が足りないので助けてもらった • 社内開発者のレベルアップにもなった •
Android開発の定石、ハマり処の伝授 • コードレビュー
81.
社外開発者との連携 • ドキュメントの整備 • 継承の使い方で議論
82.
ドキュメント整備 CONTRIBUTION.mdに集約 branch運用 コーディング規約 Layout XMLの規約
83.
ドキュメント整備 CONTRIBUTION.mdに集約 branch運用 コーディング規約 Layout XMLの規約
84.
JavaDoc整備 クラスとpublicメソッドにはJavaDoc を書く API Clientは特に丁寧に
85.
継承で議論 • Activity, Fragmentの孫継承を使うかで議論に •
Android SDKは継承モデルだがしかし…
86.
継承で議論 • 似たような出品画面、編集画面、下書き編集画面 • BaseItemEditFragmentみたいなのを作る?
87.
継承で議論 • FrilではActivity, Fragmentの孫継承は使わない •
差分プログラミングのための継承は見通しが悪くなる • ベースクラスを弄る誘惑と戦う羽目になる
88.
ご清聴ありがとう ございました
Jetzt herunterladen