Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Designとは何かを知る会

D65ac1a4aacb7a449bb61cef10fb7143?s=47 Okuto Oyama
June 12, 2016

Material Designとは何かを知る会

社内勉強用資料。Material Designとは何か?を改めてイチから学んでみました。

D65ac1a4aacb7a449bb61cef10fb7143?s=128

Okuto Oyama

June 12, 2016
Tweet

More Decks by Okuto Oyama

Other Decks in Design

Transcript

  1. Material Design הכ⡦ַ׾濼׷⠓ 0LVUP0ZBNB

  2. 娖〷

  3. أُؗ٦ٌ٦ؿ؍ؤي ~ iOS6 ؿٓحزرؠ؎ٝ iOS7 ~ Modern UI Win8 ~

  4. ˖ نةٝװؙٔٝזוך䞔㜠ך䊴ⴽ⻉ָꨇ׃ְկ '  ˖ ة؎هؚٓؿ؍٦ה葿鼅ןָꨇ׃ְկ '  ˖ ٌث٦ؿ׉ך׮ךך⹛ֹ׃ַדֹזְկ

    4  ˖ ؝ٝإفزָ♧倜ׁ׸ג⢪欽䠬ָ׻ַ׵זֻז׷կ . ِ٦ؠ٦ך׋׭ךرؠ؎ٝחכ玎黅ְ
  5. What’s Material Design ?

  6. (PPHMFָ䲿㈖ׅ׷رؠ؎ٝؖ؎سٓ؎ٝ .BUFSJBM%FTJHOכ 秵ה؎ؙٝ ךًةؿ؋٦דדֹגְ׷կ

  7. չ秵պ

  8. ⾨ׁEQך秵ד⳿勻גְ׷

  9. ׍ז׫חչdpպהכ density-independent pixels 㺘䏝ꬊ⣛㶷ؾؙإٕ וך歗꬗㺘䏝ד׮ずׄ״ֲח邌爙דֹ׷ؾؙإٕ⽃⡘ וך鍑⫷䏝ך畭劣ד鋅ג׮㣐ֹׁכずׄ

  10. 秵כ⚛ץ׋׶ꅾז׏׋׶׃ג ⴱ׭ג䠐㄂׾䧭ׅ Ӫխխխխխխխ✕

  11. אזֺ湡4FBN 媮䊴4UFQ ٖ؎،ؐز 卐ךل٦ػ٦ָ籬ָ׏גְ׷㜥さծ晙倯׾⹛ַׇל׮ֲ晙倯׮⹛ֻ 卐ךل٦ػ٦ָꅾז׏גְ׷㜥さծאך⹛ֹכ㛇劤涸ח杝甧׃גְ׷կ

  12. 秵ךꅾז׶דꤣ䕦ך慬ׁ٥䎢ָ׶׮㢌׻׏גֻ׷ ׋׌׃رغ؎أךؖٓأ׾굲ן馉ֿׅהכ⳿勻זְ

  13. չ؎ؙٝպ

  14. 歗꬗♳ח㶷㖈ׅ׷葿ךאְ׋سحز 醱꧟ז㔳䕎 㫝ךⱖ溪 ׅץגչ؎ؙٝպךًةؿ؋٦

  15. ؎ؙٝכ荈㖈ח⹛ְגծ葿׮㢌׻׷ ؽرؔכٔ،ٕة؎يח刿倜ׁ׸竲ֽ׷؎ؙٝה鍑ꅸׁ׸׷կ

  16. Material Designחֶֽ׷ չ،صً٦ءّٝպ https://www.google.com/design/spec/motion/material-motion.html

  17. 䭁㣐٥簭㼭 㢌䕎㔊錬̒̔⚵ ˟瘝⦓麊⹛דכזְ

  18. ؎٦آؚٝ،صً٦ءّٝ ،صً٦ءّٝךꟚ㨣穄✪儗חכ⸇幾鸞ָ涪欰ׅ׷կ 简䕎獳⹛׾׃גכז׵זְկ颵ꆀָ֮׷ַ׵ http://easings.net/ja

  19. Material Designחֶֽ׷ չنةٝպ

  20. FAB ( Floating Action Button ) ˖ 㛇劤涸ח歗꬗חא׌ֽ㶷㖈 ˖ 秵ךאזֺ湡ծ媮䊴חꂁ縧דֹ׷

    אזֺ湡ח֮׷儗̔ 媮䊴ח֮׷儗̔ ӧ♧筰ח⹛ֻ ✕♧筰ח⹛ַזְ
  21. ˖ 害欽涸זꞿ倯䕎ךنةٝ ˖ ِ٦ؠ٦،ؙءّٝ儗חٔحفٕծꥐ饯ָ涪欰ׅ׷ ٖ؎ؤسنةٝ ؿٓحزنةٝ ˖ 害欽涸ז俑㶵׌ֽךنةٝկ ˖ ِ٦ؠ٦،ؙءّٝ儗ח葿ָ㢌׻׷٥ٔحفָٕ涪欰ׅ׷

    ˖ ꥐ饯כ׃זְ https://getmdl.io/components/index.html#buttons-section
  22. תה׭

  23. ˖ ״׶ِ٦ؠ٦穗꿀ח䘝㹋ח鏣鎘ׁ׸׋رؠ؎ٝ ˖ وذٔ،ٕرؠ؎ٝכչ秵պהչ؎ؙٝպ ˖ 秵כ⾨׫ָ֮׷ծ؎ؙٝכ荈㖈ח䎢ָ׷ ˖ ،صً٦ءّٝכ颵ꆀ׾׮׍ծⴓַ׶װְׅ⹛ֹ׾ • FAB

    (Floating Action Button) Material Design הכ
  24. 㷕׿׌ֿה

  25. 穠㽷אך չؿؓ٦وحزպ ח麓ֺזְ

  26. وذٔ،ٕرؠ؎ٝכ 姻鍑ךرؠ؎ٝדכזְ չ姻鍑ח鵚בֻ׋׭ךرؠ؎ٝպ

  27. וְֲֲ׮ךָ ِ٦ؠ٦חה׏ג姻׃ְַ׾ 罋ִ׷䗳銲ָ֮׷

  28. Material Design ַ׵ ֿ׸ַ׵ך Webرؠ؎ٝ׾罋ִ״ֲ

  29. • Google Material design ˖ ״ֻ׻ַ׷وذٔ،ٕرؠ؎ٝך鏣鎘؝ٝإفز ˖ ➙ׁ׵➂חכ耀ֽזְծأُؗ٦ٌ٦ؿ؍ؤيהؿ ٓحزرؠ؎ٝך麩ְ •

    https://getmdl.io/ • http://materializecss.com/ • http://fezvrasta.github.io/bootstrap-material-design/ ⿫罋俑柃 ؿٖ٦يٙ٦ؙ ♧⢽