Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Make an iOS-friendly Flat UI Design

cocopon
May 24, 2013

How to Make an iOS-friendly Flat UI Design

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

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

cocopon

May 24, 2013
Tweet

More Decks by cocopon

Other Decks in Technology

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