Material Designとは何かを知る会

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

Transcript

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

   View Slide

2. 娖〷
   

   View Slide

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

   View Slide

4. ˖ نةٝװؙٔٝזוך䞔㜠ך䊴ⴽ⻉ָꨇ׃ְկ '
   
   ˖ ة؎هؚٓؿ؍٦ה葿鼅ןָꨇ׃ְկ '
   
   ˖ ٌث٦ؿ׉ך׮ךך⹛ֹ׃ַדֹזְկ 4
   
   ˖ ؝ٝإفزָ♧倜ׁ׸ג⢪欽䠬ָ׻ַ׵זֻז׷կ .
   
   ِ٦ؠ٦ך׋׭ךرؠ؎ٝחכ玎黅ְ
   

   View Slide

5. What’s Material Design ?
   

   View Slide

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

   View Slide

7. չ秵պ
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. չ؎ؙٝպ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. FAB
    ( Floating Action Button )
    ˖ 㛇劤涸ח歗꬗חא׌ֽ㶷㖈
    ˖ 秵ךאזֺ湡ծ媮䊴חꂁ縧דֹ׷
    אזֺ湡ח֮׷儗̔
    媮䊴ח֮׷儗̔
    ӧ♧筰ח⹛ֻ
    ✕♧筰ח⹛ַזְ
    

    View Slide

21. ˖ 害欽涸זꞿ倯䕎ךنةٝ
    ˖ ِ٦ؠ٦،ؙءّٝ儗חٔحفٕծꥐ饯ָ涪欰ׅ׷
    ٖ؎ؤسنةٝ
    ؿٓحزنةٝ
    ˖ 害欽涸ז俑㶵׌ֽךنةٝկ
    ˖ ِ٦ؠ٦،ؙءّٝ儗ח葿ָ㢌׻׷٥ٔحفָٕ涪欰ׅ׷
    ˖ ꥐ饯כ׃זְ
    https://getmdl.io/components/index.html#buttons-section
    

    View Slide

22. תה׭
    

    View Slide

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

    View Slide

24. 㷕׿׌ֿה
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. • Google Material design
    ˖ ״ֻ׻ַ׷وذٔ،ٕرؠ؎ٝך鏣鎘؝ٝإفز
    ˖ ➙ׁ׵➂חכ耀ֽזְծأُؗ٦ٌ٦ؿ؍ؤيהؿ
    ٓحزرؠ؎ٝך麩ְ
    • https://getmdl.io/
    • http://materializecss.com/
    • http://fezvrasta.github.io/bootstrap-material-design/
    ⿫罋俑柃
    ؿٖ٦يٙ٦ؙ ♧⢽
    
    

    View Slide