エンジニアが武器にするMaterial Design

エンジニアが武器にするMaterial Design

2017/3/10
DroidKaigi 2017 DAY02 room3 16:00~

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

March 10, 2017
Tweet

Transcript

  1. 2.

    自己紹介 • 瀬戸優之 せとひろゆき @seto_hi • Android開発歴 6年半くらい • コンシューマー向けAndroidアプリ開発一筋

    5年 • 株式会社ノハナ ◦ 唯一のAndroidエンジニア ◦ 絶賛採用中 • 好きなAPIはCanvas#saveとViewGroup#layout
  2. 4.

    僕とMaterial Design 2014/06  I/Oで発表されて知る 2015/11  アプリの主担当になる 2015/12   「今のデザイン全部捨てようぜ!」 2015年末

      ガイドラインを読み始める  年末年始休暇でひたすら読み込む 2016/01  社内Material Design勉強会 2016/01/26 新規登録画面をMaterial Design化してリリース  1年かけて全画面フルリニューアル 2017/1/17  全画面のMaterial Design化完了
  3. 7.

    今日言いたいこと • エンジニアがアプリデザインに関わると捗る ◦ 工数削減、アプリの質の向上、体験の改善 • アプリデザインの勉強としてMateiral Designは良い ◦ 知識と実装が繋がると武器になる

    • エンジニアから社内にMateiral Designを広めよう ◦ 社内勉強会をやろう • ガイドライン通りでは他社に勝てない ◦ 深読みしてMateiral Design力をつけよう
  4. 14.
  5. 15.

    どう学ぶべきか とにかくガイドラインを読む 1. Mateiral Design ◦ Introduction、Environment、Material Properties、 Elevation &

    shadows 2. Components、 Patterns 3. Layout、Style、Motion 4. Growth & communications、Usability
  6. 18.

    エンジニアだからこそできる改善 • UIだけでない「体験」の改善 ◦ ≒高速化、爆速化 • RAILパフォーマンスモデル ◦ ノハナ社ではアプリ向けに修正 ▪

    遷移開始はユーザーアクションから100ms以下 ▪ アニメーションは1フレーム16ms以下 ▪ ユーザーを待たせる処理は1000ms以下 ▪ 1000ms以上のタスクは完全バックグラウンド ユーザー操作を妨げない
  7. 25.

    社内へのMaterial Design導入 導入 ~デザイナーへの周知~ • 社内Mateiral Design勉強会 ◦ 概念、世界、Viewコンポーネント •

    社内アニメーション勉強会 ◦ 何ができる、どのくらい工数がかかる ▪ ドキュメントにして共有 ◦ 「何ができる」を共通言語化
  8. 27.
  9. 33.

    例1:Bottom navigation > On Android, the Back button does not

    navigate between bottom navigation bar views. BackボタンでBottom navigationのview(content)を操作するな
  10. 34.

    Bottom Navigation Back可 • Activityを閉じるとき • Dialogを閉じるとき • Navigation Drawerを閉じるとき

    • Bottom Sheetを閉じるとき Back不可 • Bottom Navigationのview(content)の戻り
  11. 35.
  12. 38.

    Dialogs • > Use dialogs sparingly because they are interruptive.

    • ユーザーの操作を強制的に止めるもの ◦ 特にcancel不可なProgress Dialog • elevationは24dp ◦ Pickerと並んで最大
  13. 40.
  14. 41.

    まとめ • エンジニアがアプリデザインに関わると捗る ◦ 工数削減、アプリの質の向上、体験の改善 • アプリデザインの勉強としてMateiral Designは良い ◦ 知識と実装が繋がると武器になる

    • エンジニアから社内にMateiral Designを広めよう ◦ 社内勉強会をやろう • ガイドライン通りでは他社に勝てない ◦ 深読みしてMateiral Design力をつけよう