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

by akatsuki174

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

• ਢ౻ຘʢ@akatsuki174ʣ • iOSΤϯδχΞ • TechTrain ϝϯλʔ • ϋϯυϝΠυ࡞Ո • DXELओ࠵ • TECH PLAYঁࢠ෦ ڞಉ୅ද • Women In Technology (WITY) ૑ઃ ϝϯόʔ ͦͷଞॾʑ

Slide 4

Slide 4 text

֓ཁ

Slide 5

Slide 5 text

WWDC19ʢfor developersʣ FUD

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

μʔΫϞʔυ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

ରԠ͠ͳ͍ͱ͍͚ͳ͍ͷʁ > In general, all of your apps should support dark mode  →ࠓͷͱ͜Ζmustͱ͸ݴ͍ͬͯͳ͍

Slide 12

Slide 12 text

Semantic colors ɾ໨తผʢsystemBackgroundͳͲʣʹ৭͕ ɹ༻ҙ͞Ε͍ͯΔ ɾ͜ΕʹΑΓɺLight, Dark੾Γସ͑࣌ʹ ɹద੾ͳ৭ʹஔ͖׵͑ͯ͘ΕΔ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Image Tint color ͷಈతมߋ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 15

Slide 15 text

Image Tint color ͷಈతมߋ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 16

Slide 16 text

Imageͷಈతมߋ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 17

Slide 17 text

Imageͷಈతมߋ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 18

Slide 18 text

σόοά֬ೝʢStoryboardʣ

Slide 19

Slide 19 text

σόοά֬ೝʢRun࣌ʣ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 20

Slide 20 text

SF Symbols

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

SFSymbolsͷछྨ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Ϟʔμϧ

Slide 25

Slide 25 text

ैདྷ Լ͔Β্ʹ্͕͖ͬͯͯɺ શը໘Λ෴͏

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

ݕࡧόʔ

Slide 30

Slide 30 text

ैདྷ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 31

Slide 31 text

iOS 13ʙ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 32

Slide 32 text

Ґஔ৘ใऔಘ

Slide 33

Slide 33 text

ࠓ·Ͱ ʮৗʹʯʮ͜ͷApp࢖༻தͷΈʯڐՄͷ2ͭͷ બ୒ࢶͩͬͨ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Contextual Menu

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

iOS 13ʙ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

ϨϑΝϨϯε

Slide 44

Slide 44 text

WWDC19ηογϣϯ ɾWhat’s New in iOS Design ɾModernizing Your UI for iOS 13 ɾImplementing Dark Mode on iOS

Slide 45

Slide 45 text

υΩϡϝϯτ ɾApple Design Resources ɹhttps://developer.apple.com/design ɾHuman Interface Guideline - iOS https://developer.apple.com/design/human- interface-guidelines/ios/