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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. σβΠϯͷࢹ఺͔Β

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. ͜ Ε ͡ Ό Θ ͔ Β Μ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. ࢹઢ͸Ͳ͏ಈ͘ʜʁ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. ίʔυͷࢹ఺͔Β

    View full-size slide

  53. ׬੒༧૝ਤ

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. UITableViewCellͷ࡟আϘλϯ

    View full-size slide

  67. UIActionSheet

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide