How to Make an iOS-friendly Flat UI Design

iOS7でデザインが刷新されるとの噂もあり、最近話題となっている「フラットデザイン」。

フラットデザイン電卓「Llumino」の開発経験を交えながら、iOSフレンドリーなフラットデザインについて、デザインとコードの視点から解説します。

Transcript

1. iOSϑϨϯυϦʔͳ
   ϑϥοτσβΠϯͱ
   ͦͷͭ͘Γ͔ͨ
   @cocopon
   http://cocopon.me/
   

   View Slide

2. @cocopon
   ϗϏʔϓϩάϥϚɾσβΠφ
   

   View Slide

3. ϑϥοτσβΠϯి୎
   ʮLluminoʯͷਓͰ͢
   

   View Slide

4. (Metro|Windows 8|Modern) UI
   http://www.microsoft.com/en-us/news/ImageDetail.aspx?
   id=599454562FB7159AA8AA779AAA394A190D33006A
   ϑϥοτͳUIͱ͍͑͹…
   

   View Slide

5. ͳͥྲྀߦ͍ͬͯΔͷʁ
   ༨ܭͳཁૉ͕ͳ͘
   ચ࿅͞Εͨҹ৅Λड͚Δ͔Β
   

   View Slide

6. OS XͷΞυϨεா͸ɺ
   ϗϯϞϊͷϊʔτΈ͍ͨ
   Skewmorphism (ຊ෺ͷΑ͏ͳ֎؍ɾ࣭ײ)ʹ
   ๞͖͖ͯͨϢʔβʹͱͬͯ͸৽઱
   

   View Slide

7. ຊ೔ͷ಺༰
   LLUMINO ͷࣄྫΛ΋ͱʹɺ
   iOSͷϑϥοτUIΛ
   σβΠϯɾίʔυͷࢹ఺͔Β
   ߟ͑ͯΈΔ
   ϧ ϛ ϊ
   

   View Slide

8. ͊͞ɺϑϥοτͷੈք΁ʂ
   

   View Slide

9. ʜͱɺ͍͖͍ͨͱ͜ΖͰ͕͢
   

   View Slide

10. http://fladdict.net/blog/2013/05/flat-design.html
    

    View Slide

11. 5ඵ……… ( ° ˜ ° )
    

    View Slide

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

    View Slide

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

    View Slide

14. σβΠϯͷࢹ఺͔Β
    

    View Slide

15. ϑϥοτσβΠϯͷΑ͍ͱ͜Ζ
    Ϋʔϧͩ
    ίϯςϯπʹूதͰ͖Δ
    ը૾ϦιʔεΛݮΒͤΔ
    

    View Slide

16. Ͳ͕͜ԡͤΔΜͩΖ͏…ʁ
    ΘΔ͍͜ͱ
    ཱମײ͕ͳ͍
    ͭ·Γ
    ࢹ֮తͳώϯτ͕গͳ͍
    

    View Slide

17. ͭ·Γ…
    ϑϥοτUIΛ࠾༻͢Δʹ͸
    ֮ޛ͕ඞཁ
    

    View Slide

18. ͲɺͲ͏͢Ε͹͍͍ͷʜʁʂ
    

    View Slide

19. σβΠϯͷجຊݪଇͰઓ͓͏
    ໨ཱͨͤΔ ·ͱΊΔ
    ྲྀΕΛ
    ͭ͘Δ
    

    View Slide

20. ໨ཱͨͤΔ ·ͱΊΔ
    ྲྀΕΛ
    ͭ͘Δ
    

    View Slide

21. ಥવͰ͕͢…
    Ͳ͕͜ԡͤΔͰ͠ΐ͏͔ʁ
    

    View Slide

22. ಥવͰ͕͢…
    Ͳ͕͜ԡͤΔͰ͠ΐ͏͔ʁ
    ໭ΔϘλϯɻ
    ԡͤΔΑʂ
    ςΩετϑΟʔϧυɻ
    ೖྗͰ͖ΔΑʂ
    ΅͘΋ԡͤ·͢ɻ
    

    View Slide

23. ͜ Ε ͡ Ό Θ ͔ Β Μ
    

    View Slide

24. ৭΍༨നͰ໨ཱͨͤΑ͏
    

    View Slide

25. ʮ৭ʯ΍ʮ༨നʯͰ໨ཱͨͤͯɺ
    ԡͤΔ৔ॴΛΞϐʔϧ͠Α͏
    

    View Slide

26. ໨ཱͨͤΔ ·ͱΊΔ
    ྲྀΕΛ
    ͭ͘Δ
    

    View Slide

27. ϘλϯΛԡͨ͠ͱ͖ͷӨڹൣғ͸
    ʮ·ͱΊ͔ͨʯͰදݱͰ͖Δ
    

    View Slide

28. ϑΟʔϧυ
    ϑΟʔϧυ
    ϑΟʔϧυ
    Ϙλϯ
    ϑΟʔϧυ
    ϑΟʔϧυ
    

    View Slide

29. ϑΟʔϧυ
    ϑΟʔϧυ
    ϑΟʔϧυ
    Ϙλϯ
    ϑΟʔϧυ
    ϑΟʔϧυ
    

    View Slide

30. ϑΟʔϧυ
    ϑΟʔϧυ
    ϑΟʔϧυ
    Ϙλϯ
    ϑΟʔϧυ
    ϑΟʔϧυ
    

    View Slide

31. ϑΟʔϧυ
    ϑΟʔϧυ
    ϑΟʔϧυ
    Ϙλϯ
    ϑΟʔϧυ
    ϑΟʔϧυ
    

    View Slide

32. ςʔϚ໊͸
    ςʔϚશମʹӨڹ͢Δ
    

    View Slide

33. ςʔϚ໊͸
    ςʔϚશମʹӨڹ͢Δ
    

    View Slide

34. ৭߹͍ͷௐ੔͸
    ৭ͷઃఆʹӨڹ͢Δ
    

    View Slide

35. ৭߹͍ͷௐ੔͸
    ৭ͷઃఆʹӨڹ͢Δ
    

    View Slide

36. ʮ·ͱ·ΓʯΛҙࣝͯ͠
    Θ͔Γ΍͘͢഑ஔ͠Α͏
    

    View Slide

37. ໨ཱͨͤΔ ·ͱΊΔ
    ྲྀΕΛ
    ͭ͘Δ
    

    View Slide

38. ࢹઢ͸Ͳ͏ಈ͘ʜʁ
    

    View Slide

39. ࢹઢ͸Ͳ͏ಈ͘ʜʁ
    ਓͷࢹ఺͸ࠨ্͔Βɺ;ܕʹ߱Γͯ͘Δ
    

    View Slide

40. ༨നͱҐஔͰɺࢹઢͷྲྀΕΛͭ͘Δ
    ਓͷࢹ఺͸ࠨ্͔Βɺ;ܕʹ߱Γͯ͘Δ
    ςʔϚ໊
    ৭1
    ৭߹͍(ΦϚέػೳ)
    ৭2
    

    View Slide

41. ʮࢹઢͷ;ʯΛҙࣝͯ͠
    ࣗવͳྲྀΕΛͭ͘Ζ͏
    

    View Slide

42. ໨ཱͨͤΔ ·ͱΊΔ
    ྲྀΕΛ
    ͭ͘Δ
    

    View Slide

43. ͜ΕΒ͸ɺ͞Βʹখ͞ͳ
    ݪଇͷ্ʹ੒Γཱ͍ͬͯ·͢
    

    View Slide

44. ໨ཱͨͤΔ ·ͱΊΔ
    ྲྀΕΛ
    ͭ͘Δ
    ഑ஔ
    ഑৭
    ༨ന …
    

    View Slide

45. σβΠϯͷجຊݪଇΛֶ΅͏
    http://www.amazon.co.jp/dp/4839928401
    ϊϯσβΠφʔζɾ
    σβΠϯϒοΫ
    cocoponΛσβΠϯͷੈքʹಋ͖ɺ
    ਓੜʹେ͖ͳมԽΛ༩͑ͯ͘Εͨຊ
    

    View Slide

46. ࠷ޙʹ΋͏ͻͱͭɺ
    ͍ͪ͹Μେࣄͳ͜ͱʜ
    

    View Slide

47. ໨ཱͨͤΔ ·ͱΊΔ
    ྲྀΕΛ
    ͭ͘Δ
    ഑ஔ
    ഑৭
    ༨ന …
    ϢʔβͷܦݧΛ׆͔͢
    

    View Slide

48. iOSͱͯ͠ͷ౷ҰײΛ࢒ͯ͠
    ϢʔβͷܦݧΛ׆͔ͦ͏
    όʔͷࠨ্ʹ͜ͷܗ͸…
    ʮ໭ΔʯϘλϯͩʂ
    

    View Slide

49. ҧ͏ੈքͷϧʔϧΛ
    ҆қʹ࣋ͪࠐΉͷ͸ې෺
    ϝτϩUI෩ͰΧοί͍͍͚Ͳɺ
    ͳΜ͔ͩ࢖͍ํ͕͕ͪ͏ͧ…ʁ
    

    View Slide

50. iOS͸iOSɺWP͸WP
    ΈΜͳ͕ͪͬͯɺΈΜͳ͍͍
    

    View Slide

51. ͜͜·Ͱͷ·ͱΊ
    ϑϥοτ6*Λ࠾༻͢Δʹ͸
    ֮ޛ͕ඞཁ
    σβΠϯͷجຊݪଇΛۦ࢖ͯ͠
    ଍Γͳ͍ࢹ֮৘ใΛิ͏
    J04ͱͯ͠ͷ౷ҰײΛ࢒ͯ͠
    ϢʔβͷܦݧΛ׆͔͢
    

    View Slide

52. ίʔυͷࢹ఺͔Β
    

    View Slide

53. ׬੒༧૝ਤ
    

    View Slide

54. “
    ”
    جຊઓུ
    UIAppearanceΛ͔ͭ͏
    (iOS 5.0 and later)
    You use the UIAppearance protocol to get the appearance
    proxy for a class. You customize the appearance of instances
    of a class by sending appearance modification messages to
    the class’s appearance proxy
    UIίϯϙʔωϯτ୯ҐͰ
    ֎؍ΛΧελϚΠζͰ͖Δ࢓૊Έ
    

    View Slide

55. UIAppearanceͰը૾Λઃఆ͢Δ
    ྫ͑͹ɺ͜ͷը૾Λ
    NavigationBarͷappearanceʹઃఆ͢Δͱ…
    [[UINavigationBar appearance]
    setBackgroundImage:image
    forBarMetrics:UIBarMetricsDefault];
    

    View Slide

56. ը૾Ͱϑϥοτʹ͢Δ
    ͱ͍͏͜ͱ͸ɺ1×1pxͷ୯৭ը૾Λࢦఆ͢Ε͹…
    ϑϥοτʂ
    

    View Slide

57. 1px
    1px
    1px
    1px
    UINavigationBar
    UIBarButtonItem΋Ͷ
    ୯৭ͷഎܠը૾Λઃఆͯ͠ϑϥοτʹ
    [[UINavigationBar appearance]
    setBackgroundImage:barImage
    forBarMetrics:UIBarMetricsDefault];
    [[UIBarButtonItem appearance]
    setBackgroundImage:barButtonImage
    forState:UIControlStateNormal
    barMetrics:UIBarMetricsDefault];
    

    View Slide

58. BarButtonItemͷλΠτϧ
    Αʔ͘ݟΔͱ…
    λΠτϧจࣈͷӨ͕
    ࢒ͬͯΔʂʂ
    

    View Slide

59. BarButtonItemͷλΠτϧ
    NSDictionary *attrs = @{
    UITextAttributeTextShadowColor:[UIColor clearColor]};
    [[UIBarButtonItem appearance]
    setTitleTextAttributes:attrs
    forState:UIControlStateNormal];
    [[UIBarButtonItem appearance]
    setTitleTextAttributes:attrs
    forState:UIControlStateHighlighted];
    TextAttributesΛಁ໌ʹͯ͠ແޮԽ͢Δ
    

    View Slide

60. BackButton
    ʮ͋ͷܗʯͷֆΛ༻ҙͯ͠ʜ
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, size.width, 0);
    CGContextAddLineToPoint(context, size.width, size.height);
    CGContextAddLineToPoint(context, kTriangleWidth, size.height);
    CGContextAddLineToPoint(context, 0, size.height / 2.0f);
    CGContextAddLineToPoint(context, kTriangleWidth, 0);
    CGContextClosePath(context);
    

    View Slide

61. BackButton
    [[UIBarButtonItem appearance]
    setBackButtonBackgroundImage:barButtonImage
    forState:UIControlStateNormal
    barMetrics:UIBarMetricsDefault];
    UIAppearanceʹ౉ͯ͋͛͠Ε͹OK
    

    View Slide

62. BackButton
    ҆৺͢Δͷ͸·ͩૣ͍ͥʂ
    ը໘Λԣ޲͖ʹ͢Δͱʜ
    ԣ௕ը໘Ͱ͸ߴ͕͞มΘΓ·͢
    

    View Slide

63. BackButton
    ԣํ޲༻ͷը૾΋ઃఆͯ͋͛͠Α͏
    [[UIBarButtonItem appearance]
    setBackButtonBackgroundImage:barButtonImage
    forState:UIControlStateNormal
    barMetrics:UIBarMetricsLandscapePhone];
    

    View Slide

64. UIAppearanceʹ͍ͭͯɺ΋ͬͱ஌Γ͚ͨΕ͹…
    http://www.amazon.co.jp/dp/4844333852/
    iPhoneΞϓϦ։ൃ
    ΤΩεύʔτΨΠυ
    Chapter2ͷதͰɺਤೖΓͰ
    ஸೡʹղઆ͞Ε͍ͯ·͢
    

    View Slide

65. 6*"QQFBSBODFͰखͷಧ͔ͳ͍ͱ͜Ζ͸
    ࣗ෼Ͱͭ͘Δ͔͠ͳ͍
    

    View Slide

66. UITableViewCellͷ࡟আϘλϯ
    

    View Slide

67. UIActionSheet
    

    View Slide

68. ͦͷଞͷখωλ
    ϏϡʔͷԑΛ׈Β͔ʹ͢Δ
    Renders with edge antialiasing: YES
    YourApp-Info.plist:
    

    View Slide

69. NavigationBarͷӨ ( > iOS6)
    UIImage *emptyImage = [[UIImage alloc] init];
    [navigationBar setShadowImage:emptyImage];
    ίϨ
    

    View Slide

70. ͍͞͝ʹ
    

    View Slide

71. ϑϥοτσβΠϯ͸ສೳ͡Όͳ͍
    ෳࡶͳػೳɾ֊૚Λ࣋ͬͨΞϓϦʹ͸
    ͋·Γ޲͔ͳ͍
    ଍Γͳ͍৘ใΛิ͍͖Εͳ͍৔໘΋͋Δ
    

    View Slide

72. iOS7ͷ΢ϫα
    ϑϥοτσβΠϯ͸
    ຊ౰ʹ͘Δͷ͔ʁ
    

    View Slide

73. ϢʔβʔܦݧΛଛͳΘͳ͍
    ʮ͖ͬ͢ΓσβΠϯʯ
    ఔ౓ͳΒ͋Δ͔΋
    

    View Slide

74. ͖ͬ͢Γ-Ͱ͍͟Μʲ͖ͬ͢ΓσβΠϯʳ
    ᶃ ӄӨ΍ޫ୔͕཈͑ΒΕɺ؆ૉͳҹ৅Λ༩͑ͭͭ΋ɺ
    ϢʔβΛ໎Θͤͳ͍σβΠϯͷ͜ͱɻ
    Vine Dropbox
    

    View Slide

75. Lluminoͷ։ൃ෺ޠ΋ΑΖ͘͠Ͷ
    http://cocopon.me/blog/
    

    View Slide

76. iOSϑϨϯυϦʔͳ
    ϑϥοτσβΠϯͱ
    ͦͷͭ͘Γ͔ͨ
    @cocopon
    

    View Slide