Tweet
Tweet

Slide 1

Slide 1 text

΋͏໎Θͳ͍ʂ ϞʔμϧͱϓογϡͲͬ ͕͍͍ͪͷʁ ୈ2ճ iOS UI࣮૷ษڧձ 2018೥2݄14೔ ࠤ౻߶࢜ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 1

Slide 2

Slide 2 text

Who am I ࠤ౻߶࢜ (@hatakenokakashi) MAMORIOגࣜձࣾͰiOSΤϯδχΞ͠ ͍ͯ·͢ɻ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 2

Slide 3

Slide 3 text

ࣗ෼ͰΞϓϦΛ࡞ͬͨ͜ͱ͋Δਓ? ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 3

Slide 4

Slide 4 text

! ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 4

Slide 5

Slide 5 text

σβΠϯࣗ෼Ͱ࡞ΔͷେมͰ͢Ͷ ! ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 5

Slide 6

Slide 6 text

ը໘σβΠϯ΋େࣄ͚ͩͲը໘ભҠͷ ઃܭ΋େࣄͳUIͷ̍ͭʂ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 6

Slide 7

Slide 7 text

ࠓ೔͸ը໘ભҠͷ࿩Λ͍ͤͯͩ͘͞͞ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 7

Slide 8

Slide 8 text

෩ਫͷ઎͍ΞϓϦΛ࡞͍ͬͯͨɻ Ϣʔβʔʹૢ࡞Λ͍ͤͨ͞ը໘͸Tab barͷҰ෦Ͱྑ͍ͷ͔ʁ modalͰશը໘දࣔʹ͢Δ΂͖͔ʁ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 8

Slide 9

Slide 9 text

Tab bar࢖͏ͱը໘ྖҬ͕ڱ͘ͳΔ͚Ͳ͍͍ͷʁ શ෦࢖ͬͨ΄͏͕ྑ͘ͳ͍ʁ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 9

Slide 10

Slide 10 text

!!!!!!!! ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 10

Slide 11

Slide 11 text

Tab bar࢖ͬͯΔଞͷΞ ϓϦΛݟͯΈΔ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 11

Slide 12

Slide 12 text

΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 12

Slide 13

Slide 13 text

΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 13

Slide 14

Slide 14 text

΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 14

Slide 15

Slide 15 text

! Ұཡը໘͸Tab barͰ૊ΈࠐΈɻৄࡉը໘͸ϓογϡભҠɻ ౤ߘܥ͸ϞʔμϧભҠͰશը໘දࣔɻ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 15

Slide 16

Slide 16 text

Human Interface Guidelines iOS • Modality • Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 16

Slide 17

Slide 17 text

Modality Ϟʔμϧͷ࢖༻͸࠷খݶʹɻҰൠతʹਓʑ͸ΞϓϦΛγʔϜϨ εʹ࢖͏͜ͱΛ޷Έ·͢ɻϞʔμϧΛ࢖͏৔໘͸Α͘Α͘ߟ͑ ·͠ΐ͏ɻ୭͔ͷ஫ҙΛҾ͖ग़͢ॏཁͳࣄ͕͋Δ৔߹΍ɺ͋Δ λεΫ͕ऴΘΔ͔ഁغ͞Εͳ͍ͱΞϓϦ͕࢖͏͜ͱ͕Ͱ͖ͳ͍ ঢ়ଶɺ·ͨ͸ॏཁͳσʔλΛอଘ͢Δ৔߹ͳͲ͕޷·͍͠Ͱ ͢ɻ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 17

Slide 18

Slide 18 text

Modality ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 18

Slide 19

Slide 19 text

Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 19

Slide 20

Slide 20 text

Hierarchical Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 20

Slide 21

Slide 21 text

Flat Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 21

Slide 22

Slide 22 text

Content-Driven or Experience- Driven Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 22

Slide 23

Slide 23 text

ݴ͍ํΛม͑Δͱ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 23

Slide 24

Slide 24 text

ͦͷը໘ΛϢʔβʔ͕ • ʮݟΔʯ͕ओମͷը໘ͳΒφϏήʔγϣϯʹ૊ΈࠐΉɻ • ϓογϡભҠ • ʮ͢Δʯ͕ओମͷը໘ͳΒશ໘දࣔ͢Δɻ • ϞʔμϧભҠ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 24

Slide 25

Slide 25 text

΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 25

Slide 26

Slide 26 text

΋͏Ұ౓ଞͷΞϓϦΛ֬ ೝ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 26

Slide 27

Slide 27 text

Twitter ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 27

Slide 28

Slide 28 text

Evernote ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 28

Slide 29

Slide 29 text

ࣗ෼ͷΞϓϦͰ͸ Ϣʔβʔʹը໘ૢ࡞ͯ͠ཉ͍͠ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 29

Slide 30

Slide 30 text

΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 30

Slide 31

Slide 31 text

class TopTabBarController: UITabBarController, UITabBarControllerDelegate { func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) { let tagNum = viewController.tabBarItem.tag switch tagNum { case 2: let second = FlyingStarViewController.instanceate() self.present(second, animated: true, completion: nil) default: break } } } ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 31

Slide 32

Slide 32 text

·ͱΊ • ʮݟΔʯ͕ओମͷը໘ͳΒφϏήʔγϣϯʹ૊ΈࠐΉɻ • ϓογϡભҠ • ʮ͢Δʯ͕ओମͷը໘ͳΒશ໘දࣔ͢Δɻ • ϞʔμϧભҠ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 32

Slide 33

Slide 33 text

એ఻ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 33