Pro Yearly is on sale from $80 to $50! »

WWDC19におけるデザイン系アップデート

9d1961575e45a8286cdde5f86dbba312?s=47 akatsuki174
June 13, 2019

 WWDC19におけるデザイン系アップデート

2019/06/12(水) ZOZO Technologies【WWDC19 参加報告会】
https://zozotech-inc.connpass.com/event/131285/

note版はこちら: https://blog.zaim.co.jp/n/n4cb9da9d5319

9d1961575e45a8286cdde5f86dbba312?s=128

akatsuki174

June 13, 2019
Tweet

Transcript

  1. @akatsuki174 WWDC19ʹ͓͚Δ σβΠϯܥΞοϓσʔτ

  2. ࣗݾ঺հ

  3. • ਢ౻ຘʢ@akatsuki174ʣ • iOSΤϯδχΞ • TechTrain ϝϯλʔ • ϋϯυϝΠυ࡞Ո •

    DXELओ࠵ • TECH PLAYঁࢠ෦ ڞಉ୅ද • Women In Technology (WITY) ૑ઃ ϝϯόʔ ͦͷଞॾʑ
  4. ֓ཁ

  5. WWDC19ʢfor developersʣ FUD

  6. WWDC19ʢfor designersʣ ɾμʔΫϞʔυ ɾSF Symbols ɾϞʔμϧ ɾݕࡧόʔ FUD ɾҐஔ৘ใऔಘ ɾίϯςΩετϝχϡʔ

  7. ࠓ೔࿩͢͜ͱ ΤϯδχΞͷօ͞Μ͚ͩͰͳ͘ɺ σβΠφʔʹͱͬͯ΋ॏཁͳ σβΠϯɺମݧઃܭ্ͷมߋ఺

  8. μʔΫϞʔυ

  9. μʔΫϞʔυͱ͸ ɾϕʔεΧϥʔΛ҉͍৭ௐʹઃఆͰ͖Δػೳ ɾόοςϦʔফඅ͕཈͑ΒΕΔ ɾ໨͕ർΕʹ͘͘ͳΔ

  10. None
  11. ରԠ͠ͳ͍ͱ͍͚ͳ͍ͷʁ > In general, all of your apps should support

    dark mode
 →ࠓͷͱ͜Ζmustͱ͸ݴ͍ͬͯͳ͍
  12. Semantic colors ɾ໨తผʢsystemBackgroundͳͲʣʹ৭͕ ɹ༻ҙ͞Ε͍ͯΔ ɾ͜ΕʹΑΓɺLight, Dark੾Γସ͑࣌ʹ ɹద੾ͳ৭ʹஔ͖׵͑ͯ͘ΕΔ

  13. System Colors ୅දతͳ৭ʹؔͯ͠ɺDark, LightϞʔυʹదͨ͠ ৭͕༻ҙ͞Ε͍ͯΔ IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDF HVJEFMJOFTJPTWJTVBMEFTJHODPMPS

  14. Image Tint color ͷಈతมߋ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  15. Image Tint color ͷಈతมߋ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  16. Imageͷಈతมߋ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  17. Imageͷಈతมߋ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  18. σόοά֬ೝʢStoryboardʣ

  19. σόοά֬ೝʢRun࣌ʣ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  20. SF Symbols

  21. SF Symbolsͱ͸ ɾʮඪ४ʯͱͯ͠࢖͑ΔΞΠίϯ͕૿͑ͨ ɾɾ15,000Ҏ্ ɾͦΕͧΕݸผͷϕʔεϥΠϯ஋Λ࣋ͭ ɾ9छͷ΢ΣΠτͱ3छͷεέʔϧ͕͋Δ ɾۃྗ͜ΕΛ࢖͏͜ͱ͕ਪ঑͞Ε͍ͯΔ

  22. SFSymbolsͷछྨ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  23. SketchͳͲͰ࢖͍͍ͨ৔߹ Apple Design Resources ͔Βμ΢ϯϩʔυ https://developer.apple.com/design/resources/ Photoshop, XDͳͲ͸ࠓՆ͔Βఏڙ༧ఆ

  24. Ϟʔμϧ

  25. ैདྷ Լ͔Β্ʹ্͕͖ͬͯͯɺ શը໘Λ෴͏

  26. iOS 13ʙ ΧʔυͬΆ͍ݟͨ໨͕σϑΥϧτʹɻ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  27. ด͡ํ ϞʔμϧεΫϦʔϯͷͲ͔͜ΛεϫΠϓμ΢ϯɻ ͜ΕʹΑͬͯยखૢ࡞͕͠΍͘͢ͳΔɻ ※ͨͩ͠addͳͲͷಈ࡞Ϙλϯ͕͋Δ৔߹ͳͲ͸ ͦͷݶΓͰ͸ͳ͍ɻ

  28. ด͡ΔϘλϯ͸΋͏͍Βͳ͍ʁ →ΞΫηγϏϦςΟͷ؍఺͔Βඞཁ

  29. ݕࡧόʔ

  30. ैདྷ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  31. iOS 13ʙ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  32. Ґஔ৘ใऔಘ

  33. ࠓ·Ͱ ʮৗʹʯʮ͜ͷApp࢖༻தͷΈʯڐՄͷ2ͭͷ બ୒ࢶͩͬͨ

  34. iOS 13ʙ ʮ1ճͷΈʯ͕ ௥Ճ͞Εͨ

  35. Contextual Menu

  36. ैདྷ 3DλονͰϓϨϏϡʔΛදࣔɺ εϫΠϓΞοϓ͢Δ͜ͱͰϝχϡʔΛ දࣔͤ͞Δ͜ͱ͕Ͱ͖ͨ

  37. iOS 13 3Dλον͕࢖͑Δ࢖͑ͳ͍ʹ͔͔ΘΒͣɺ ͢΂ͯͷσόΠεͰ௕ԡ͢͠Ε͹ ࢖͑ΔΑ͏ʹͳͬͨ

  38. iOS 13ʙ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  39. UI ɾηύϨʔλΛ࢖ͬͯάϧʔϐϯά͕Ͱ͖Δ ɾΞΠίϯΛදࣔ͢Δ͜ͱ͕Ͱ͖Δ ɾഁյతͳΞΫγϣϯ͸੺ͰදࣔͰ͖Δ

  40. εϓϥογϡը໘ (for developers)

  41. iOS 8ʙ Launch ScreenΛStoryboardͰ࡞ΕΔΑ͏ʹ ʢImageΛࢦఆ͢Δ͜ͱ΋Մೳͩͬͨʣ

  42. 2020೥य़ʙ Ͳͷը໘αΠζͰ΋ରԠͰ͖ΔΑ͏ʹɺ Launch ImageͰ͸ͳ͘StoryboardͰࢦఆ 2020೥य़, iOS 13͕ର৅ʹؚ·ΕΔΞϓϦ͸ StoryboardͰͷରԠ͕ඞਢʹ

  43. ϨϑΝϨϯε

  44. WWDC19ηογϣϯ ɾWhat’s New in iOS Design ɾModernizing Your UI for

    iOS 13 ɾImplementing Dark Mode on iOS
  45. υΩϡϝϯτ ɾApple Design Resources ɹhttps://developer.apple.com/design ɾHuman Interface Guideline - iOS

    https://developer.apple.com/design/human- interface-guidelines/ios/
  46. એ఻

  47. τʔΫక੾ →6/17(݄) Ԡืͯ͠ʂʂʂ

  48. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ