Material Designとは何かを知る会

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

Transcript

1. Material Design הכ⡦ַ׾濼׷⠓ 0LVUP
   0ZBNB
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/ ⿫罋俑柃 ؿٖ٦يٙ٦ؙ ♧⢽