マテリアルデザインを用いたデザインリニューアル [フリル編]
TRANSCRIPT
マテリアルデザインを 用いたデザインリニューアル
株式会社Fablic ninjinkun,yuki930
@ninjinkun @yuki930エンジニア デザイナー
ninjinkun• 最近はDagger2に入門中 • http://ninjinkun.hatenablog.com/
yuki930• 山口 有由希 • ずっとAndroidユーザー • 福岡でデザイナー • 2014年1月にFablicに入社
女の子のためのフリマアプリ
300万 ダウンロード
2014 Google
BestApp
Fril 2.x
Fril 3.x
時系列の説明
• 2014年6月 マテリアルデザインガイドライン公開
• 2014年7月 フリルAndroid版リニューアル計画スタート
• TV CMが決まってリリース日が10月末に確定
• タイミングが5.0と重なりそう
• どうせリニューアルするならマテリアル対応…
• 2014年12月 Google Play Best App 2014受賞
UIリニューアルの流れ
v2.5 v3.0 v3.1 v3.2~2014年10月 2014年10月 2014年11月 2014年12月
リニューアル前体験改善!自力Material
サポートライブラリ適用
タブレット対応
マテリアルデザインのキャッチアップと実装について
今日お話すること
マテリアルデザインの理解と取り組みデザイン編
Google I/O 2014
マテリアルデザインの理解
信じられるもの:ガイドライン
http://www.google.com/design/spec/material-design/introduction.html
リアルタイムに変わっていくから!今もなお…
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
マテリアル・デザインって何? Androidデザイン責任者にインタビュー どういう経緯で生まれたのか?が分かる記事
我々は誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザイ
ンシステムを作りたかったんです。
それは巨大なデザイン空間で、超エキサイティングでした。それほど大きなデザイン問題に取り組んだ
人とか機会が他にあったかわかりません。そこにチームがひとつになって取り組めたのは素晴らしかっ
たです。みんな本当にのめりこんでいきましたからね。デザイナーを巻き込めば巻き込むほど、彼らは
「あのさあ、もうちょっと本気出せば、僕らだってこの問題は解けるよ?」と言ってくるんです。
http://www.gizmodo.jp/2014/07/_android.html
An exploration in Material Design 実際に上記ポイントを踏まえてリニューアルされたfeedlyの事例
https://medium.com/feedly-behind-the-curtain/an-exploration-in-
material-design-by-feedly-8c1a1cbdfdcd
公式動画に日本語字幕もつきましたhttp://googledevjp.blogspot.jp/2015/02/blog-post.html
プロトタイプ作成
ユーザーからの要望やお問い合わせチェック
UIパターンの調査
ペーパープロトテスト
ユーザーテスト
がんばってAndroidの標準に合わせたつもりだったが…
既存ユーザーの使い勝手を悪くしてしまっていた
議論はユーザーテストで収束
デザインルール作成
カラー
フリルらしい配色のカラーパレットを作成
タイポグラフィー
日本語だと強くなりすぎてしまう点を考慮して行間やフォントサイズを最適化
草案 最終的には値は変更しています
+1sp
ALL CAPSなし
デザイン起こし
sticker sheetパーツのデザインがひと通り揃っています
Sketchのデータが扱いやすくとくにおすすめ!
http://www.google.com/design/spec/resources/sticker-sheets-icons.html
アイコン作成
提供されているアイコン類
Githubでも管理
https://github.com/google/material-design-icons
足りないモチーフの書き起こし
IcoMoonでアイコンフォント化
• ブラウザから簡単にフォントファイルが作成可能
• jsonファイルを利用すれば誰でもブラウザだけで編集が可能
16KBまで削減でき、アプリの容量もダウン
実装のための準備
扱いやすいカラー定義基本的な配色ルールをcolors.xmlに定義
基本的にはそれらの色を参照する形で色を設定すると
変更に柔軟になりとても便利!
カラー定義基本的な配色ルールをcolors.xmlに定義
基本的にはそれらの色を継承する形で色を設定すると
変更に柔軟になりとても便利!
定数定義余白や基本的な
フォントサイズなどをdimen.xmlに定義
ボタンの整備影もdrawableで書いていたが
1dp単位で書いていたので荒すぎた
影を必死に描くのは不毛なので影の背景画像、シェイプ、アイコンの重ね技で色変更のしやすいボタンに
textAppearanceの活用
TextAppearanceを活用することでstyleの切り分けが容易に
スタイルがコンパクトになり、かつ無駄に似たような
スタイルが増えすぎることがない
マテリアルデザインの理解と取り組み実装編
Support Libraryがない状況でのマテリアル対応
実装とライブラリの変遷
実装・ライブラリの変遷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
Activity + Fragment• それまではActivityべた書きだった… • 回転対応、タブレット対応を見据えてFragment化
Activity + Fragment• ひたすらFragment化
Activity + Fragment• ひたすらFragment化
Activity + Fragment• 一通り対応が終わってからFragment批判が盛り上がって辛い • 【翻訳】Android Fragmentへの反対声明
• しかしFragment使って良かったと思ってます • ViewPagerはFragment使わないと実装しづらい
http://ninjinkun.hatenablog.com/entry/2014/10/16/234611
RetrofitSquare製のHTTP Client
インターフェイスにアノテーションを書くスタイルで読みやすい
JavaDocにAPIの仕様を記述していくと良い感じ
RxJavaReactive ExtensionのJava実装
FrilではPromiseとして使用
複雑なAPIコールを宣言的に記述
商品情報のPOSTと画像アップロードを順に行う様子
商品情報POST
画像を4枚POST
レスポンス
レスポンス
Material Tab Hostマテリアルスタイルで
ViewPager+Tabを実現する
NAVIGATION_MODE_TABSの代替
https://github.com/yanzm/MaterialTabHost
Calligraphyアイコンフォントに使用
TextViewを拡張して外部フォントを読み込み可能にしてくれる
https://github.com/chrisjenx/Calligraphy
Support Libraryがない状況でのマテリアル対応
Support Libraryがない状況でのマテリアル対応
• パラメータを揃えてそれっぽく見せる • Floating Action Button • Scroll to Full Screen
←お手軽←お手軽←ハード
Android 5.0 & Support Library 21がリリース前だった
パラメータを揃えてそれっぽく見せる48dp
10dp
Fril 2.5
52dp
16dp
Fril 3.0
Googleに怒られるやつ
パラメータを揃えてそれっぽく見せる
Fril 2.5 Fril 3.0 Fril 3.2
Floating Action Button
ボタンを置くだけ
今はOSS実装もありますmakovkastar/FloatingActionButton
Scroll to Full Screen
ScrollViewやListViewのAPIを調べてがんばって実装
ninjinkun/ScrollFullScreen
Scroll to Full Screen
ScrollViewやListViewのAPIを調べてがんばって実装
ninjinkun/ScrollFullScreen
Scroll to Full Screen• 今ならSupport Libraryでできます • ActionBar. setHideOnContentScrollEnabled
• 細かいことがやりたければもっと良いライブラリも • Android-ObservableScrollView
黎明期マテリアル対応の感想•Googleの標準も固まってなかったりして暗中模索 •先行実装しても損はしない •Support Libraryリリース時の対応もすぐできた
•先行実装でGoogleさんからの評価は上がった様子
おわりに
Androidの進化のタイミングはチャンス
いち早いキャッチアップはBest Appへの近道(かも)
でもユーザー視点は忘れずに
技術やデザインを自分たちのものにしようとする努力が大切
リニューアルの裏話
社外開発者との連携• 手が足りないので助けてもらった • 社内開発者のレベルアップにもなった • Android開発の定石、ハマり処の伝授 • コードレビュー
社外開発者との連携• ドキュメントの整備 • 継承の使い方で議論
ドキュメント整備CONTRIBUTION.mdに集約
branch運用
コーディング規約
Layout XMLの規約
ドキュメント整備CONTRIBUTION.mdに集約
branch運用
コーディング規約
Layout XMLの規約
JavaDoc整備クラスとpublicメソッドにはJavaDoc
を書く
API Clientは特に丁寧に
継承で議論•Activity, Fragmentの孫継承を使うかで議論に •Android SDKは継承モデルだがしかし…
継承で議論•似たような出品画面、編集画面、下書き編集画面 •BaseItemEditFragmentみたいなのを作る?
継承で議論•FrilではActivity, Fragmentの孫継承は使わない •差分プログラミングのための継承は見通しが悪くなる •ベースクラスを弄る誘惑と戦う羽目になる
ご清聴ありがとうございました����������