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

5分でおさらいするモバイルUIデザイン

A4c8177aa00623c9593f10be748b3861?s=47 usagimaru
July 10, 2015

 5分でおさらいするモバイルUIデザイン

誤った仕様定義・実装をしないためにモバイルUIデザインの知識を心得ておこう、という発表で使用したスライドです。

A4c8177aa00623c9593f10be748b3861?s=128

usagimaru

July 10, 2015
Tweet

Transcript

  1. Πϝʔδɿwww.teehanlax.com

  2. ෼Ͱ͓͞Β͍͢Δ ϞόΠϧ6*σβΠϯ 2015.07.10 © 2015 Maru Satori.

  3. ޡͬͨ࢓༷ఆٛɾ࣮૷Λ͠ͳ͍ͨΊʹ

  4. ޡͬͨ࢓༷ఆٛɾ࣮૷Λ͠ͳ͍ͨΊʹ ϞόΠϧ6*σβΠϯͷ஌ࣝ

  5. IUUQTEFWFMPQFSBQQMFDPNEFTJHO "QQMFr)VNBO*OUFSGBDF(VJEFMJOFT (PPHMFr(PPHMF%FTJHO IUUQTXXXHPPHMFDPNEFTJHO

  6. ϚςϦΞϧσβΠϯ ϑϥοτσβΠϯ

  7. ϚςϦΞϧσβΠϯ ϑϥοτσβΠϯ

  8. ϛχϚϧσβΠϯ ίϯςϯπத৺ ฏ໘త ֊૚ߏ଄ ࿦ཧత λΠϙάϥϑΟ ৭࠼ ϑϥοτσβΠϯ

  9. ஫ҙ఺ ʂ

  10. "QQMF͸Ұݴ΋l'MBU%FTJHOz ͱ͸ݴ͍ͬͯͳ͍

  11. Πϝʔδɿhttp://www.lifehacker.jp/2012/11/121102appleskeuomorphic-design.html !૷০͸ओ໾Ͱ͸ͳ͍ ࣮ࣸతͳ6*͸ೖ໳༻ʹ͸ྑ͔ͬͨ

  12. ࠷దͳϘλϯͱ͸ ৔໘ʹΑͬͯ࢖͍෼͚Δ Bezel Plain Ripple

  13. Πϝʔδɿhttps://dribbble.com/shots/1623679-Open-Close ա৒ԋग़ɾΞχϝʔγϣϯͷຊ࣭ ௨শʮϋϯόʔΨʔΞΠίϯʯ

  14. Πϝʔδɿhttps://dribbble.com/shots/1633262-Hamburger ϋϯόʔΨʔΛಈ͔͢͜ͱ͕ຊ࣭͔ʁ /P.PSF"

  15. ந৅తͳදݱ ΠϝʔδɿApple iOS ޿͘ೝ஌͞ΕΔͱΞΠίϯͱͯ͠ఆண͢Δ iOS 6 iOS 7 OS X

    Yosemite
  16. Πϝʔδɿhttp://www.appleuser.it/usare-il-centro-di-controllo-su-ios-7/ ந৅֓೦ʹ͸จࣈදهɺ·ͨ͸ซهͰ΋0, ϝλϑΝͱจࣈදݱ

  17. Πϝʔδɿhttp://www.forbes.com/sites/anthonykosner/2014/09/04/the-shape-of-apps-to-come-top-ios-designers-on-new-iphone-6- screen-sizes/ ΍Γ͗͢ͳ͍ ฏ໘ʹ͢Ε͹ྑ͍ͱ͍͏΋ͷͰ΋ͳ͍

  18. ϑϥοτσβΠϯ ϚςϦΞϧσβΠϯ

  19. ࢴͱΠϯΫͷϝλϑΝ 'MPBUJOH"DUJPO#VUUPO Ξχϝʔγϣϯԋग़ ࡉ͔͍نఆ Ԡ༻ՄೳͳσβΠϯཧ࿦ ϚςϦΞϧσβΠϯ

  20. ཁ఺ ʂ

  21. Πϝʔδɿhttps://www.google.com/design/ σδλϧͰදݱ͞ΕͨʮࢴʯͱʮΠϯΫʯ ϚςϦΞϧσβΠϯͷߟ͑ํͷࠜװ

  22. Πϝʔδɿhttps://dribbble.com/shots/1898320-Material-Design-Button Ԟߦ͖ͱӨ ݱ࣮ͷ෺ཧ๏ଇʹै͏

  23. Πϝʔδɿhttps://www.google.com/design/spec/components/buttons.html '"#'MPBUJOH"DUJPO#VUUPO Ϙλϯ਺ΛݮΒ͠ɺओػೳʹߜΔ

  24. r ˒ બ୒ͤ͞ͳ͍ r º ⌘ ⎋ ˒ ͋ ⇧

    ϘλϯΛԿݸ΋ઃஔ͢ΔͳΒ ৘ใઃܭ͔Βݟ௚ͨ͠ํ͕ྑ͍ ͔΋͠Εͳ͍
  25. Πϝʔδɿ೚ఱಊ θϧμͷ఻આ ࣌ͷΦΧϦφ ϏσΦήʔϜͰͷઌྫ ৔໘ʹΑͬͯػೳ͕੾ΓସΘΔ

  26. ΍Γ͗͢ͳ͍ ֤1'ͷΨΠυϥΠϯΛ·ͣ༏ઌ͢Δ͜ͱ Chrome iOS Wunderlist iOS ˓ ✕

  27. ϑϥοτσβΠϯ ϚςϦΞϧσβΠϯ ϑϥοτσβΠϯશൠ "QQMFͷ΋ͷ͸੍໿͕؇Ί ϑϥοτσβΠϯͷҰ೿ ࡉ͔͍نఆɾڧ੍͍໿

  28. ϑϥοτσβΠϯ ϚςϦΞϧσβΠϯ

  29. IUUQTEFWFMPQFSBQQMFDPNEFTJHOBEBQUJWJUZ "EBQUJWF6TFS*OUFSGBDFT 3FTQPOTJWF8FC%FTJHO#BTJDT IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTMBZPVUTSXEGVOEBNFOUBMT

  30. Ϩεϙϯγϒ ΞμϓςΟϒ

  31. Ϩεϙϯγϒ ΞμϓςΟϒ

  32. ΞμϓςΟϒ ͋Β͔͡Ί༻ҙͨ͠ϨΠΞ΢τΛద༻͢Δ 1IPOF 5BCMFU

  33. ΞμϓςΟϒWTϨεϙϯγϒ ਺छྨͷϨΠΞ΢τΛ ੾Γସ͑Δ ྲྀಈతͳϨΠΞ΢τͰ ରԠ͢Δ

  34. Ϩεϙϯγϒ ΞμϓςΟϒ

  35. ϚςϦΞϧσβΠϯ ϑϥοτσβΠϯ ΞμϓςΟϒ Ϩεϙϯγϒ σβΠϯ࿦ ࣮૷๏

  36. σβΠϯ ݟͨ໨ Ξʔτ ૷০

  37. σβΠϯ ޡ࣮ͬͨ૷Λ͠ͳ͍ͨΊʹ ཧղ͓ͯ͘͜͠ͱ͕େ੾ ݟͨ໨ Ξʔτ ʹ ཧ࿦ ૷০

  38. IUUQTEFWFMPQFSBQQMFDPNEFTJHO )VNBO*OUFSGBDF(VJEFMJOFT (PPHMF%FTJHO IUUQTXXXHPPHMFDPNEFTJHO IUUQTEFWFMPQFSBQQMFDPNEFTJHOBEBQUJWJUZ "EBQUJWF6TFS*OUFSGBDFT 3FTQPOTJWF8FC%FTJHO#BTJDT IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTMBZPVUTSXEGVOEBNFOUBMT 3FTQPOTJWFWT"EBQUJWF%FTJHO IUUQCMPHVYQJODPNSFTQPOTJWFWTBEBQUJWFEFTJHOXIBUTCFTUDIPJDFEFTJHOFST

    ΦϥΠϦʔϞόΠϧσβΠϯύλʔϯୈ൛ IUUQXXXBNB[PODPKQEQ ༥͚ΔσβΠϯ IUUQXXXBNB[PODPKQEQ
  39. Πϝʔδɿwww.teehanlax.com