How to Make an iOS-friendly Flat UI Design

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

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

Transcript

1. iOSϑϨϯυϦʔͳ ϑϥοτσβΠϯͱ ͦͷͭ͘Γ͔ͨ @cocopon http://cocopon.me/
2. @cocopon ϗϏʔϓϩάϥϚɾσβΠφ
3. ϑϥοτσβΠϯి୎ ʮLluminoʯͷਓͰ͢
4. (Metro|Windows 8|Modern) UI http://www.microsoft.com/en-us/news/ImageDetail.aspx? id=599454562FB7159AA8AA779AAA394A190D33006A ϑϥοτͳUIͱ͍͑͹…
5. ͳͥྲྀߦ͍ͬͯΔͷʁ ༨ܭͳཁૉ͕ͳ͘ ચ࿅͞Εͨҹ৅Λड͚Δ͔Β
6. OS XͷΞυϨεா͸ɺ ϗϯϞϊͷϊʔτΈ͍ͨ Skewmorphism (ຊ෺ͷΑ͏ͳ֎؍ɾ࣭ײ)ʹ ๞͖͖ͯͨϢʔβʹͱͬͯ͸৽઱
7. ຊ೔ͷ಺༰ LLUMINO ͷࣄྫΛ΋ͱʹɺ iOSͷϑϥοτUIΛ σβΠϯɾίʔυͷࢹ఺͔Β ߟ͑ͯΈΔ ϧ ϛ ϊ
8. ͊͞ɺϑϥοτͷੈք΁ʂ
9. ʜͱɺ͍͖͍ͨͱ͜ΖͰ͕͢
10. http://fladdict.net/blog/2013/05/flat-design.html
11. 5ඵ……… ( ° ˜ ° )
12. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
13. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
14. σβΠϯͷࢹ఺͔Β
15. ϑϥοτσβΠϯͷΑ͍ͱ͜Ζ Ϋʔϧͩ ίϯςϯπʹूதͰ͖Δ ը૾ϦιʔεΛݮΒͤΔ
16. Ͳ͕͜ԡͤΔΜͩΖ͏…ʁ ΘΔ͍͜ͱ ཱମײ͕ͳ͍ ͭ·Γ ࢹ֮తͳώϯτ͕গͳ͍
17. ͭ·Γ… ϑϥοτUIΛ࠾༻͢Δʹ͸ ֮ޛ͕ඞཁ
18. ͲɺͲ͏͢Ε͹͍͍ͷʜʁʂ
19. σβΠϯͷجຊݪଇͰઓ͓͏ ໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ
20. ໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ
21. ಥવͰ͕͢… Ͳ͕͜ԡͤΔͰ͠ΐ͏͔ʁ
22. ಥવͰ͕͢… Ͳ͕͜ԡͤΔͰ͠ΐ͏͔ʁ ໭ΔϘλϯɻ ԡͤΔΑʂ ςΩετϑΟʔϧυɻ ೖྗͰ͖ΔΑʂ ΅͘΋ԡͤ·͢ɻ
23. ͜ Ε ͡ Ό Θ ͔ Β Μ
24. ৭΍༨നͰ໨ཱͨͤΑ͏
25. ʮ৭ʯ΍ʮ༨നʯͰ໨ཱͨͤͯɺ ԡͤΔ৔ॴΛΞϐʔϧ͠Α͏
26. ໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ
27. ϘλϯΛԡͨ͠ͱ͖ͷӨڹൣғ͸ ʮ·ͱΊ͔ͨʯͰදݱͰ͖Δ
28. ϑΟʔϧυ ϑΟʔϧυ ϑΟʔϧυ Ϙλϯ ϑΟʔϧυ ϑΟʔϧυ
29. ϑΟʔϧυ ϑΟʔϧυ ϑΟʔϧυ Ϙλϯ ϑΟʔϧυ ϑΟʔϧυ
30. ϑΟʔϧυ ϑΟʔϧυ ϑΟʔϧυ Ϙλϯ ϑΟʔϧυ ϑΟʔϧυ
31. ϑΟʔϧυ ϑΟʔϧυ ϑΟʔϧυ Ϙλϯ ϑΟʔϧυ ϑΟʔϧυ
32. ςʔϚ໊͸ ςʔϚશମʹӨڹ͢Δ
33. ςʔϚ໊͸ ςʔϚશମʹӨڹ͢Δ
34. ৭߹͍ͷௐ੔͸ ৭ͷઃఆʹӨڹ͢Δ
35. ৭߹͍ͷௐ੔͸ ৭ͷઃఆʹӨڹ͢Δ
36. ʮ·ͱ·ΓʯΛҙࣝͯ͠ Θ͔Γ΍͘͢഑ஔ͠Α͏
37. ໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ
38. ࢹઢ͸Ͳ͏ಈ͘ʜʁ
39. ࢹઢ͸Ͳ͏ಈ͘ʜʁ ਓͷࢹ఺͸ࠨ্͔Βɺ;ܕʹ߱Γͯ͘Δ
40. ༨നͱҐஔͰɺࢹઢͷྲྀΕΛͭ͘Δ ਓͷࢹ఺͸ࠨ্͔Βɺ;ܕʹ߱Γͯ͘Δ ςʔϚ໊ ৭1 ৭߹͍(ΦϚέػೳ) ৭2
41. ʮࢹઢͷ;ʯΛҙࣝͯ͠ ࣗવͳྲྀΕΛͭ͘Ζ͏
42. ໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ
43. ͜ΕΒ͸ɺ͞Βʹখ͞ͳ ݪଇͷ্ʹ੒Γཱ͍ͬͯ·͢
44. ໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ ഑ஔ ഑৭ ༨ന …
45. σβΠϯͷجຊݪଇΛֶ΅͏ http://www.amazon.co.jp/dp/4839928401 ϊϯσβΠφʔζɾ σβΠϯϒοΫ cocoponΛσβΠϯͷੈքʹಋ͖ɺ ਓੜʹେ͖ͳมԽΛ༩͑ͯ͘Εͨຊ
46. ࠷ޙʹ΋͏ͻͱͭɺ ͍ͪ͹Μେࣄͳ͜ͱʜ
47. ໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ ഑ஔ ഑৭ ༨ന … ϢʔβͷܦݧΛ׆͔͢
48. iOSͱͯ͠ͷ౷ҰײΛ࢒ͯ͠ ϢʔβͷܦݧΛ׆͔ͦ͏ όʔͷࠨ্ʹ͜ͷܗ͸… ʮ໭ΔʯϘλϯͩʂ
49. ҧ͏ੈքͷϧʔϧΛ ҆қʹ࣋ͪࠐΉͷ͸ې෺ ϝτϩUI෩ͰΧοί͍͍͚Ͳɺ ͳΜ͔ͩ࢖͍ํ͕͕ͪ͏ͧ…ʁ
50. iOS͸iOSɺWP͸WP ΈΜͳ͕ͪͬͯɺΈΜͳ͍͍
51. ͜͜·Ͱͷ·ͱΊ ϑϥοτ6*Λ࠾༻͢Δʹ͸ ֮ޛ͕ඞཁ σβΠϯͷجຊݪଇΛۦ࢖ͯ͠ ଍Γͳ͍ࢹ֮৘ใΛิ͏ J04ͱͯ͠ͷ౷ҰײΛ࢒ͯ͠ ϢʔβͷܦݧΛ׆͔͢
52. ίʔυͷࢹ఺͔Β
53. ׬੒༧૝ਤ
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ίϯϙʔωϯτ୯ҐͰ ֎؍ΛΧελϚΠζͰ͖Δ࢓૊Έ
55. UIAppearanceͰը૾Λઃఆ͢Δ ྫ͑͹ɺ͜ͷը૾Λ NavigationBarͷappearanceʹઃఆ͢Δͱ… [[UINavigationBar appearance] setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
56. ը૾Ͱϑϥοτʹ͢Δ ͱ͍͏͜ͱ͸ɺ1×1pxͷ୯৭ը૾Λࢦఆ͢Ε͹… ϑϥοτʂ
57. 1px 1px 1px 1px UINavigationBar UIBarButtonItem΋Ͷ ୯৭ͷഎܠը૾Λઃఆͯ͠ϑϥοτʹ [[UINavigationBar appearance] setBackgroundImage:barImage forBarMetrics:UIBarMetricsDefault]; [[UIBarButtonItem appearance] setBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
58. BarButtonItemͷλΠτϧ Αʔ͘ݟΔͱ… λΠτϧจࣈͷӨ͕ ࢒ͬͯΔʂʂ
59. BarButtonItemͷλΠτϧ NSDictionary *attrs = @{ UITextAttributeTextShadowColor:[UIColor clearColor]}; [[UIBarButtonItem appearance] setTitleTextAttributes:attrs forState:UIControlStateNormal]; [[UIBarButtonItem appearance] setTitleTextAttributes:attrs forState:UIControlStateHighlighted]; TextAttributesΛಁ໌ʹͯ͠ແޮԽ͢Δ
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);
61. BackButton [[UIBarButtonItem appearance] setBackButtonBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; UIAppearanceʹ౉ͯ͋͛͠Ε͹OK
62. BackButton ҆৺͢Δͷ͸·ͩૣ͍ͥʂ ը໘Λԣ޲͖ʹ͢Δͱʜ  ԣ௕ը໘Ͱ͸ߴ͕͞มΘΓ·͢
63. BackButton ԣํ޲༻ͷը૾΋ઃఆͯ͋͛͠Α͏ [[UIBarButtonItem appearance] setBackButtonBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsLandscapePhone];
64. UIAppearanceʹ͍ͭͯɺ΋ͬͱ஌Γ͚ͨΕ͹… http://www.amazon.co.jp/dp/4844333852/ iPhoneΞϓϦ։ൃ ΤΩεύʔτΨΠυ Chapter2ͷதͰɺਤೖΓͰ ஸೡʹղઆ͞Ε͍ͯ·͢
65. 6*"QQFBSBODFͰखͷಧ͔ͳ͍ͱ͜Ζ͸ ࣗ෼Ͱͭ͘Δ͔͠ͳ͍
66. UITableViewCellͷ࡟আϘλϯ
67. UIActionSheet
68. ͦͷଞͷখωλ ϏϡʔͷԑΛ׈Β͔ʹ͢Δ Renders with edge antialiasing: YES YourApp-Info.plist:
69. NavigationBarͷӨ ( > iOS6) UIImage *emptyImage = [[UIImage alloc] init]; [navigationBar setShadowImage:emptyImage]; ίϨ
70. ͍͞͝ʹ
71. ϑϥοτσβΠϯ͸ສೳ͡Όͳ͍ ෳࡶͳػೳɾ֊૚Λ࣋ͬͨΞϓϦʹ͸ ͋·Γ޲͔ͳ͍ ଍Γͳ͍৘ใΛิ͍͖Εͳ͍৔໘΋͋Δ
72. iOS7ͷ΢ϫα ϑϥοτσβΠϯ͸ ຊ౰ʹ͘Δͷ͔ʁ
73. ϢʔβʔܦݧΛଛͳΘͳ͍ ʮ͖ͬ͢ΓσβΠϯʯ ఔ౓ͳΒ͋Δ͔΋
74. ͖ͬ͢Γ-Ͱ͍͟Μʲ͖ͬ͢ΓσβΠϯʳ ᶃ ӄӨ΍ޫ୔͕཈͑ΒΕɺ؆ૉͳҹ৅Λ༩͑ͭͭ΋ɺ ϢʔβΛ໎Θͤͳ͍σβΠϯͷ͜ͱɻ Vine Dropbox
75. Lluminoͷ։ൃ෺ޠ΋ΑΖ͘͠Ͷ http://cocopon.me/blog/
76. iOSϑϨϯυϦʔͳ ϑϥοτσβΠϯͱ ͦͷͭ͘Γ͔ͨ @cocopon