XCode6 / iPhone6 / iOS8 デザイナーが知ってると 便利なTips

Transcript

1. XCode6 / iPhone6 / iOS8 σβΠφʔ͕஌ͬͯΔͱ ศརͳTips ԭ௡وஐ@DeNA 2014/10/15 UI Crunch http://ui-crunch.com/
2. @okitsu ԭ௡وஐ ʢΦΩπλΧτϞʣ DeNAͰΤϯδχΞ΍ͬͯ·͢ɻ iOS/AndroidΞϓϦͷ։ൃ͕ଟ͍Ͱ͢ɻ
3. • Mobage • Comm: Free calls, texts and fun! • Baseball Stadium LIVE • Peko: Play to be Paid! • SHOWROOM • Yokohama DeNA Baystars
4. ͍͖ͳΓͰ͕͢ɺ iPhone6 / 6 Plus ରԠ ਐΜͰ·͔͢ʁ
5. iPhone6ʹରԠͰ͖ͯΔ͔Ͳ͏͔ݟ෼͚Δํ๏ iPhone6 iPhone5s iPhoneΛԣʹฒ΂ͯφϏήʔγϣϯόʔͷߴ͞ΛݟΔ ಉ͡ɹɿiPhone6ରԠࡁ ҟͳΔɿiPhone6ະରԠ
6. iPhone6ʹରԠͰ͖ͯΔ͔Ͳ͏͔ݟ෼͚Δํ๏ iPhone6 iPhone5s ߴ͕͞ҟͳΔύλʔϯ Twitter͸ରԠͯ͠Δ͚ͲFacebook͸·ͩͳͷͶɺͱ͍͏ײ͡Ͱ೺ѲͰ͖Δɻ
7. ରԠͰ͖͍ͯͳ͍ΞϓϦ͸iPhone6ͰͲ͏
 දࣔ͞Ε͍ͯΔͷ͔ʁ • Scaling modeͱ͍͏΋ͷ͕ൃಈ͠ɺΞεϖΫτൺΛҡ࣋ͨ͠ ··֦େදࣔ͞Ε͍ͯΔɻ • ͬ͘͡ΓݟΔͱɺεςʔλεόʔͷ࣌ࠁͷจࣈͱ͔ଟগ΅΍ ͚͍ͯΔͷ͕Θ͔Δ͸ͣɻ ී௨ʹݟ͑ͯͦ͏͚ͩͲɺ࣮͸ͬͦ͜Γ
 ֦େ͞Εͯͨͱ͍͏Φν
8. iPhone6Ͱී௨ʹݟΕͯΔ͠ɺ
 ಛʹiPhone6ରԠ͍Βͳ͔͔ͬͨͳʁ
 ͱࢥͬͯ҆৺ͯͨ͠Γ͠·ͤΜ͔ʁ ͦΕ͸ؒҧ͍ͳͷͰ͙͢ʹࣗࣾʹ໭ͬͯΤϯδχΞʹ
 ૬ஊ͍ͯͩ͘͠͞ʂ ! ΋ͬͱը໘αΠζΛ༗ޮʹ࢖͑·͢ɻ ࣗࣾͷΞϓϦʹؔͯ͠…
9. iPhone6 Plus
10. iPhone6 Plus Α͋͘Δצҧ͍ • @3xͷը૾͕ඞཁΈ͍ͨͳ࿩͕ྲྀΕͯ͘Δɻ
 
 ˠiPhone5S(Retina)ͱ͘Β΂ͯղ૾౓1.5ഒʹͳͬͨͷ͔ʙ
 
 ˠ੡඼εϖοΫݟΔ

11. iPhone6 Plus iPhone5S 401ppi 326ppi શવ1.5ഒ͡Όͳ͍ɻ1.23ഒ͙Β͍͔͠ͳ͍ɻ
 ຊ౰ͳΒ480 ppi͙Β͍ཉ͍͠ɻͲ͏͍͏͜ͱʁ
12. iPhone 6 Plus ࣮͸… • ΧλϩάεϖοΫ͸ɺ
 ըૉ਺ 1,920 × 1,080 ϐΫηϧͷ 401ppi
 ͳΜ͚ͩͲɺ಺෦తʹ͸ɺ
 ըૉ਺ 2,208 × 1,242 ϐΫηϧ͋Δ΋ͷͱͯ͠ܭࢉ͠ɺ
 දࣔ͢Δࡍʹॖখ(໿0.87ഒ)ͯ͠ද͍ࣔͯ͠Δɻ • PhotoShopͳͲͰUIσβΠϯ͢Δ৔߹ʹ͸ɺ
 2,208 x 1,242ϐΫηϧͷαΠζͰ࡞੒͢Δͷ͕ਖ਼ղɻ IUUQXXXQBJOUDPEFBQQDPNOFXTJQIPOFTDSFFOTEFNZTUJpFE
13. ϕΫλʔσʔλ
14. @1x @2x @3x … • օ͞Μ͍ͭ΋@1x, @2xͷ2छྨͷը૾༻ҙͯ͠·ͤΜ͔ʁ • ͞Βʹ iPhone6PlusରԠͰɺ@3x΋௥Ճ͞Εͯɺ ʮͻʔʂʯͬͯͳͬͯ·ͤΜ͔ʁ ࠷৽ͷXCode6ΑΓɺϕΫλʔσʔλͱͯ͠PDF ͕
 ࢖͑ΔΑ͏ʹͳΓ·ͨ͠ɻ
 ˞ͨͩ͠ɺར༻ʹ͸͍͔ͭ͘஫ҙ఺͋Γ·͢
15. iOSͰϕΫλʔσʔλΛར༻͢Δࡍͷ஫ҙ఺ • લఏͱͯ͠ɺͳΜͰ΋͔ΜͰ΋ॊೈʹ֦େॖখ͞ΕΔΘ͚Ͱ͸ͳ͍ɻ • ۩ମతʹ͸ɺΞϓϦʹpdfΛؚΊͯϏϧυ͢Δͱɺ಺෦ͰϥελϥΠ ζʢϏοτϚοϓԽʣ͞ΕΔɻ݁Ռɺ@1x, @2x, @3xͷϏοτϚοϓ ϑΝΠϧ͕࡞ΒΕΔɻ • දࣔͷࡍʹ͸ɺ࡞ΒΕͨϏοτϚοϓ͕ར༻͞ΕΔɻ • ݩͱͳΔpdfϑΝΠϧ͸ɺ@1xͷαΠζͰ࡞੒͢Δඞཁ͕͋Δɻʢͦ ͏͠ͳ͍ͱδϟΪΔʣ • iOSͷόʔδϣϯͷ੍ݶ͸ͳ͠ʢiOS7, iOS6Ͱ΋ར༻Մʣ
16. ϕΫλʔσʔλ(pdf)ͷࢦఆํ๏ ※pdf͸Asset CatalogͰ͔͠ࢦఆͰ͖·ͤΜɻ 
    Y
    
17. iPhone5s iPhone6 iPhone6 Plus ग़ྗྫ
18. LaunchScreen
19. LaunchScreen (εϓϥογϡը໘) • iPhone6 / iPhone6 Plus͕௥Ճ͞Εͨ͜ͱͰɺ
 iPhone4Ҏ্(iOS7Ҏ্)Ͱ΋࠷௿4छྨͷը૾͕ඞཁɻ
 ΞϓϦͷαΠζ૿͑Δ͠ΊΜͲ͍͘͞ɻ
20. LaunchScreenΛ1ϑΝΠϧʹʂ • XCode6͔ΒɺLaunchScreenΛ1ϑΝΠϧʹ·ͱΊΒ ΕΔػೳ͕௥Ճɻ • ࠓ·Ͱը૾͔͠ࢦఆͰ͖ͳ͔ͬͨͷ͕ɺxib/ storyboardͱ͍͏ϑΝΠϧ1ͭͰରԠͰ͖ΔΑ͏ʹ ͳͬͨɻ
21. xibϑΝΠϧ࡞੒ྫ
22. 1ϑΝΠϧͰશը໘αΠζʹରԠ ※ͨͩ͠iOS8Ҏ্ɻiOS7ҎԼ͸͜Ε·ͰͲ͓Γը૾Λ༻ҙ͢Δඞཁ͋Γ
23. ʲศརαʔϏε঺հʳiOS.zip • iOSΞϓϦਃ੥ʹඞཁͳը૾ηοτΛ 1clickͰ·ͱΊͯμ΢ϯϩʔυͰ͖Δ ศརαʔϏεɻ • iPhone/iPad྆ํʹରԠɻ΋ͪΖΜ iOS8΋ରԠ • ΋͸΍༻ҙ͢Δը૾ͷछྨ͕ଟ͗ͯ͢ هԱ͢Δͷ͸ෆՄೳͳͨΊɺ͜͏͍͏ ͷੵۃతʹར༻ͨ͠΄͏͕ྑ͍ɻ • ։ൃऀͷ @hirama2 ͋Γ͕ͱ͏ʂ http://ioszip.mashroom.in/
24. App Previews
25. App Previews • AppStoreʹܝࡌ͞ΕΔΞϓϦ঺հಈը • ΞϓϦਃ੥࣌ʹొ࿥Ͱ͖ΔΑ͏ʹͳͬͨ
 ʢͨͩ͠OSX Yosemite͕ඞਢʣ • 15ඵʙ30ඵҎ಺ɺ500MBҎ಺ɺ30fpsҎ಺ • H.264ʢਪ঑ʣ͔Apple ProRes videoίʔσοΫ • ղ૾౓ɾըૉ਺͸σόΠε͝ͱʹࢦఆ͋Γ • αϜω͸5ඵ࣌఺ͷ΋ͷ͕ࣗಈతʹબ୒ʢมߋ΋Մʣ • ૢ࡞͢Δਓ΍खͳͲΛ͏ͭͯ͠͸μϝɺͳͲ੍ݶ͋Γ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZJPTEPDVNFOUBUJPO-BOHVBHFT6UJMJUJFT$PODFQUVBMJ5VOFT$POOFDU@(VJEF"QQFOEJDFT 1SPQFSUJFTIUNM
26. ͱ͜ΖͰ… • iPhoneͷը໘ΛಈըͰ࿥ը͢Δํ๏ͬͯɺ
 օ͞ΜͲ͏ͯ͠·͢ʁ • ࠷ۙͩͱ AirPlay + Refrector ͷ૊Έ߹Θ͙ͤΒ͍͔͠બ ୒ࢶͳ͍ʁ
 http://macwin.org/mac/reflector/ • ͨͩϑϨʔϜϨʔτ௿ͯ͘ΧΫ͍ͭͨΓɻ͍·͍ͪɻ • Wi-Fiઃఆ΋ΊΜͲ͔ͬͨ͘͞Γ
27. iPhoneͷը໘ΛಈըͰ࿥ը͢Δํ๏ ܾఆ൛ • 10຤ϦϦʔε༧ఆͷ࣍ظOSX Yosemite(10.10) + QuickTime Ͱɺ೦ئͷެࣜαϙʔτʂʂ • iPhoneΛUSBͰͭͳ͙͚ͩͰQuickTimeͰը໘ͷಈըΛ࿥ը Ͱ͖ΔΑ͏ʹͳΓ·͢ɻʢiOS8Ҏ߱ʣ • ༗Γ೉͍͜ͱʹɺ࿥ը࣌ʹɺεςʔλεόʔͷ࣌ؒ΍ΩϟϦΞ ৘ใɾόοςϦʔɾి೾ͷڧ͞ͳͲͷදࣔΛΑ͠ͳʹݻఆɻ
 
 S*FTBANKͱ͔ফ͞ΕΔ
 όοςϦʔ΋ৗʹ100% (sample)
28. Ҏ্ ͱ͍͏͜ͱͰɺ
 XCode6 iPhone6 iOS8ରԠ
 ͍Ζ͍ΖେมͰ͕͢ૉఢͳ͜ͱ΋
 ૿͑ͯ·͢ͷͰ
 Ҿ͖ଓ͖ؤுΓ·͠ΐ͏͆