How to Make an iOS-friendly Flat UI Design

by cocopon

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

5ඵ……… ( ° ˜ ° )

Slide 12

Slide 12 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 13

Slide 13 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 14

Slide 14 text

σβΠϯͷࢹ఺͔Β

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ͭ·Γ… ϑϥοτUIΛ࠾༻͢Δʹ͸ ֮ޛ͕ඞཁ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

σβΠϯͷجຊݪଇͰઓ͓͏ ໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ

Slide 20

Slide 20 text

໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

͜ Ε ͡ Ό Θ ͔ Β Μ

Slide 24

Slide 24 text

৭΍༨നͰ໨ཱͨͤΑ͏

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ςʔϚ໊͸ ςʔϚશମʹӨڹ͢Δ

Slide 33

Slide 33 text

ςʔϚ໊͸ ςʔϚશମʹӨڹ͢Δ

Slide 34

Slide 34 text

৭߹͍ͷௐ੔͸ ৭ͷઃఆʹӨڹ͢Δ

Slide 35

Slide 35 text

৭߹͍ͷௐ੔͸ ৭ͷઃఆʹӨڹ͢Δ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ

Slide 38

Slide 38 text

ࢹઢ͸Ͳ͏ಈ͘ʜʁ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

ʮࢹઢͷ;ʯΛҙࣝͯ͠ ࣗવͳྲྀΕΛͭ͘Ζ͏

Slide 42

Slide 42 text

໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ

Slide 43

Slide 43 text

͜ΕΒ͸ɺ͞Βʹখ͞ͳ ݪଇͷ্ʹ੒Γཱ͍ͬͯ·͢

Slide 44

Slide 44 text

໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ ഑ஔ ഑৭ ༨ന …

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

໨ཱͨͤΔ ·ͱΊΔ ྲྀΕΛ ͭ͘Δ ഑ஔ ഑৭ ༨ന … ϢʔβͷܦݧΛ׆͔͢

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

ίʔυͷࢹ఺͔Β

Slide 53

Slide 53 text

׬੒༧૝ਤ

Slide 54

Slide 54 text

“ ” جຊઓུ 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 modiﬁcation messages to the class’s appearance proxy UIίϯϙʔωϯτ୯ҐͰ ֎؍ΛΧελϚΠζͰ͖Δ࢓૊Έ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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);

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

UITableViewCellͷ࡟আϘλϯ

Slide 67

Slide 67 text

UIActionSheet

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

͍͞͝ʹ

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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