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ରԠ
 ͍Ζ͍ΖେมͰ͕͢ૉఢͳ͜ͱ΋
 ૿͑ͯ·͢ͷͰ
 Ҿ͖ଓ͖ؤுΓ·͠ΐ͏͆