マテリアルデザインを用いたデザインリニューアル [フリル編]

マテリアルデザインを 用いたデザインリニューアル

株式会社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の孫継承は使わない •差分プログラミングのための継承は見通しが悪くなる •ベースクラスを弄る誘惑と戦う羽目になる

ご清聴ありがとうございました����������