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

79,427 views

Published on

DroidKaigiで発表したマテリアルデザインを用いたデザインリニューアル の資料です。

Published in: Engineering
0 Comments
274 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
79,427
On SlideShare
0
From Embeds
0
Number of Embeds
32,507
Actions
Shares
0
Downloads
152
Comments
0
Likes
274
Embeds 0
No embeds

No notes for slide

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

  1. 1. マテリアルデザインを 用いたデザインリニューアル 株式会社Fablic ninjinkun,yuki930
  2. 2. @ninjinkun @yuki930 エンジニア デザイナー
  3. 3. ninjinkun • 最近はDagger2に入門中 • http://ninjinkun.hatenablog.com/
  4. 4. yuki930 • 山口 有由希 • ずっとAndroidユーザー • 福岡でデザイナー • 2014年1月にFablicに入社
  5. 5. 女の子のためのフリマアプリ 300万 ダウンロード 2014 Google BestApp
  6. 6. Fril 2.x
  7. 7. Fril 3.x
  8. 8. 時系列の説明 • 2014年6月 マテリアルデザインガイドライン公開 • 2014年7月 フリルAndroid版リニューアル計画スタート • TV CMが決まってリリース日が10月末に確定 • タイミングが5.0と重なりそう • どうせリニューアルするならマテリアル対応… • 2014年12月 Google Play Best App 2014受賞
  9. 9. UIリニューアルの流れ v2.5 v3.0 v3.1 v3.2 ∼2014年10月 2014年10月 2014年11月 2014年12月 リニューアル前 体験改善!
 自力Material サポート
 ライブラリ適用 タブレット対応
  10. 10. マテリアルデザインの
 キャッチアップと実装について 今日お話すること
  11. 11. マテリアルデザインの理解と取り組み
 デザイン編
  12. 12. Google I/O 2014
  13. 13. マテリアルデザインの理解
  14. 14. 信じられるもの:ガイドライン http://www.google.com/design/spec/material-design/introduction.html
  15. 15. リアルタイムに変わっていくから! 今もなお…
  16. 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. 17. マテリアル・デザインって何?
 Androidデザイン責任者にインタビュー どういう経緯で生まれたのか?が分かる記事 我々は誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザイ ンシステムを作りたかったんです。 それは巨大なデザイン空間で、超エキサイティングでした。それほど大きなデザイン問題に取り組んだ 人とか機会が他にあったかわかりません。そこにチームがひとつになって取り組めたのは素晴らしかっ たです。みんな本当にのめりこんでいきましたからね。デザイナーを巻き込めば巻き込むほど、彼らは 「あのさあ、もうちょっと本気出せば、僕らだってこの問題は解けるよ?」と言ってくるんです。 http://www.gizmodo.jp/2014/07/_android.html
  18. 18. An exploration in Material Design 実際に上記ポイントを踏まえてリニューアルされたfeedlyの事例 https://medium.com/feedly-behind-the-curtain/an-exploration-in- material-design-by-feedly-8c1a1cbdfdcd
  19. 19. 公式動画に日本語字幕もつきました http://googledevjp.blogspot.jp/2015/02/blog-post.html
  20. 20. プロトタイプ作成
  21. 21. ユーザーからの要望や
 お問い合わせチェック
  22. 22. UIパターンの調査
  23. 23. ペーパープロトテスト
  24. 24. ユーザーテスト
  25. 25. がんばってAndroidの標準に
 合わせたつもりだったが…
  26. 26. 既存ユーザーの使い勝手を
 悪くしてしまっていた
  27. 27. 議論は
 ユーザーテストで収束
  28. 28. デザインルール作成
  29. 29. カラー
  30. 30. フリルらしい配色のカラーパレットを作成
  31. 31. タイポグラフィー
  32. 32. 日本語だと強くなりすぎてしまう点を考慮して
 行間やフォントサイズを最適化 草案 最終的には値は変更しています
  33. 33. +1sp ALL CAPSなし
  34. 34. デザイン起こし
  35. 35. sticker sheet パーツのデザインが
 ひと通り揃っています Sketchのデータが扱いやすく
 とくにおすすめ! http://www.google.com/design/spec/resources/sticker-sheets-icons.html
  36. 36. アイコン作成
  37. 37. 提供されているアイコン類
  38. 38. Githubでも管理 https://github.com/google/material-design-icons
  39. 39. 足りないモチーフの書き起こし
  40. 40. IcoMoonで
 アイコンフォント化 • ブラウザから簡単にフォントファ イルが作成可能 • jsonファイルを利用すれば
 誰でもブラウザだけで編集が可能
  41. 41. 16KBまで削減でき、アプリの容量もダウン
  42. 42. 実装のための準備
  43. 43. 扱いやすい
 カラー定義 基本的な配色ルールを
 colors.xmlに定義 基本的にはそれらの色を参照する
 形で色を設定すると
 変更に柔軟になりとても便利!

  44. 44. カラー定義 基本的な配色ルールを
 colors.xmlに定義 基本的にはそれらの色を継承する
 形で色を設定すると
 変更に柔軟になりとても便利!

  45. 45. 定数定義 余白や基本的な
 フォントサイズなどを
 dimen.xmlに定義
  46. 46. ボタンの整備 影もdrawableで書いていたが
 1dp単位で書いていたので荒すぎた 影を必死に描くのは不毛なので
 影の背景画像、シェイプ、アイコンの 重ね技で色変更のしやすいボタンに
  47. 47. textAppearance
 の活用 TextAppearanceを活用することで
 styleの切り分けが容易に スタイルがコンパクトになり、
 かつ無駄に似たような
 スタイルが増えすぎることがない
  48. 48. マテリアルデザインの理解と取り組み 実装編
  49. 49. Support Libraryが
 ない状況での
 マテリアル対応 実装と
 ライブラリの変遷
  50. 50. 実装・ライブラリの変遷 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
  51. 51. Activity + Fragment • それまではActivityべた書きだった… • 回転対応、タブレット対応を見据えてFragment化
  52. 52. Activity + Fragment • ひたすらFragment化
  53. 53. Activity + Fragment • ひたすらFragment化
  54. 54. Activity + Fragment • 一通り対応が終わってからFragment批判が盛り上がって 辛い • 【翻訳】Android Fragmentへの反対声明 • しかしFragment使って良かったと思ってます • ViewPagerはFragment使わないと実装しづらい http://ninjinkun.hatenablog.com/entry/2014/10/16/234611
  55. 55. Retrofit Square製のHTTP Client インターフェイスにアノテーション を書くスタイルで読みやすい JavaDocにAPIの仕様を
 記述していくと良い感じ
  56. 56. RxJava Reactive ExtensionのJava実装 FrilではPromiseとして使用 複雑なAPIコールを宣言的に記述 商品情報のPOSTと画像アップロード を順に行う様子 商品情報POST 画像を4枚POST レスポンス レスポンス
  57. 57. MaterialTabHost マテリアルスタイルで ViewPager+Tabを実現する NAVIGATION_MODE_TABSの代替 https://github.com/yanzm/MaterialTabHost
  58. 58. Calligraphy アイコンフォントに使用 TextViewを拡張して外部フォントを 読み込み可能にしてくれる https://github.com/chrisjenx/Calligraphy
  59. 59. Support Libraryがない状況での
 マテリアル対応
  60. 60. Support Libraryがない状況でのマテリアル対応 • パラメータを えてそれっぽく見せる • Floating Action Button • Scroll to Full Screen ←お手軽 ←お手軽 ←ハード Android 5.0 & Support Library 21がリリース前だった
  61. 61. パラメータを えてそれっぽく見せる 48dp 10dp Fril 2.5 52dp 16dp Fril 3.0 Googleに怒られるやつ
  62. 62. パラメータを えてそれっぽく見せる Fril 2.5 Fril 3.0 Fril 3.2
  63. 63. FloatingAction Button ボタンを置くだけ 今はOSS実装もあります
 makovkastar/FloatingActionButton
  64. 64. Scrollto
 FullScreen ScrollViewやListViewのAPIを調べ てがんばって実装 ninjinkun/ScrollFullScreen
  65. 65. Scrollto
 FullScreen ScrollViewやListViewのAPIを調べ てがんばって実装 ninjinkun/ScrollFullScreen
  66. 66. Scroll to Full Screen • 今ならSupport Libraryでできます • ActionBar. setHideOnContentScrollEnabled • 細かいことがやりたければもっと良いライブラリも • Android-ObservableScrollView
  67. 67. 黎明期マテリアル対応の感想 • Googleの標準も固まってなかったりして暗中模索 • 先行実装しても損はしない • Support Libraryリリース時の対応もすぐできた • 先行実装でGoogleさんからの評価は上がった様子
  68. 68. おわりに
  69. 69. Androidの進化のタイミングはチャンス いち早いキャッチアップはBest Appへの近道(かも) でもユーザー視点は忘れずに 技術やデザインを自分たちのものにしようとする努力が大切
  70. 70. リニューアルの裏話
  71. 71. 社外開発者との連携 • 手が足りないので助けてもらった • 社内開発者のレベルアップにもなった • Android開発の定石、ハマり処の伝授 • コードレビュー
  72. 72. 社外開発者との連携 • ドキュメントの整備 • 継承の使い方で議論
  73. 73. ドキュメント整備 CONTRIBUTION.mdに集約 branch運用 コーディング規約 Layout XMLの規約
  74. 74. ドキュメント整備 CONTRIBUTION.mdに集約 branch運用 コーディング規約 Layout XMLの規約
  75. 75. JavaDoc整備 クラスとpublicメソッドにはJavaDoc を書く API Clientは特に丁寧に
  76. 76. 継承で議論 • Activity, Fragmentの孫継承を使うかで議論に • Android SDKは継承モデルだがしかし…
  77. 77. 継承で議論 • 似たような出品画面、編集画面、下書き編集画面 • BaseItemEditFragmentみたいなのを作る?
  78. 78. 継承で議論 • FrilではActivity, Fragmentの孫継承は使わない • 差分プログラミングのための継承は見通しが悪くなる • ベースクラスを弄る誘惑と戦う羽目になる
  79. 79. ご清聴ありがとう ございました 


×