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

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

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

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. μʔΫϞʔυͱ͸ ɾϕʔεΧϥʔΛ҉͍৭ௐʹઃఆͰ͖Δػೳ ɾόοςϦʔফඅ͕཈͑ΒΕΔ ɾ໨͕ർΕʹ͘͘ͳΔ
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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ