Slide 1

Slide 1 text

©2018 Wantedly, Inc. Learning Hidden iOS Design What HIG doesn’t teach you that built-in apps do iOSDC 2018 30.Agu.2018 - Ryo Usami (Wantedly, Inc. Designer)

Slide 2

Slide 2 text

Wantedly, Inc. 2 ೥ੜ·ΕɻૣҴాେֶߴ౳ֶӃࡏֶத͔ΒσβΠφʔͱͯ͠ϕϯνϟʔ اۀͰΠϯλʔϯɻ೥݄ΑΓ8BOUFEMZ *ODʹೖࣾɻݱࡏ͸ɺϞ όΠϧΞϓϦΛ࢝Ίͱͨ͠ʮ8BOUFEMZ7JTUʯશମͷσβΠϯɾମݧʹ੹೚ Λ͍࣋ͬͯΔɻ 5XJUUFS!VTB@ Ryo Usami Wantedly, Inc. / Designer

Slide 3

Slide 3 text

Wantedly, Inc. 3 PRODUCTS

Slide 4

Slide 4 text

Discover opportunities and connect with companies anytime, anywhere.

Slide 5

Slide 5 text

©2018 Wantedly, Inc. ࠓ೔఻͍͑ͨ͜ͱ

Slide 6

Slide 6 text

©2018 Wantedly, Inc. ޿͘ར༻͞ΕͯΔ΋ͷΛར༻͠Α͏ ಉ͡ݟͨ໨ͷ΋ͷ͸ɺ৔ॴ͕ҧ͑Ͳಉ͡ৼΔ෣͍Λ ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏ ࠓ೔఻͍͑ͨ͜ͱ

Slide 7

Slide 7 text

©2018 Wantedly, Inc. υΞͬͯ஌ͬͯ·͔͢ʁ

Slide 8

Slide 8 text

©2018 Wantedly, Inc. ͦ͏Ͱ͢ɺ͜ΕͰ͢

Slide 9

Slide 9 text

©2018 Wantedly, Inc. ۭؒΛ۠੾Δ ։ดͰ͖Δ ग़ೖΓ͢ΔਓΛ੍ݶͰ͖Δ ࢪৣ υΞͷػೳ

Slide 10

Slide 10 text

©2018 Wantedly, Inc. Ͱɺͪΐͬͱࢥ͍ग़ͯ͠Έͯཉ͍͠ΜͰ͕͢

Slide 11

Slide 11 text

©2018 Wantedly, Inc. ࠓ೔͜͜ʹདྷΔ·ͰυΞΛ ͍ͭ͘ར༻͠·͔ͨ͠ʁ

Slide 12

Slide 12 text

©2018 Wantedly, Inc. ©Richard Thomas

Slide 13

Slide 13 text

©2018 Wantedly, Inc. ͳͥɺҙࣝ͠ͳ͍ͷ͔ʁ

Slide 14

Slide 14 text

©2018 Wantedly, Inc. ˠ ͢Ͱʹ Կ౓΋ ར༻ͨ͜͠ͱ͕͔͋ͬͨΒ υΞʹݟ͑Δ΋ͷ͸ಉ͡ৼΔ෣͍Λͯ͘͠ΕΔ͔Β υΞͷར༻ͷ͞Εํ͕ಉ͔ͩ͡Β

Slide 15

Slide 15 text

©2018 Wantedly, Inc. ৽͍͠ʮυΞʯ͸Ͳ͏΍ͬͯੜ·ΕΔʁ

Slide 16

Slide 16 text

©2018 Wantedly, Inc. Source: http://shirokanelife.blogspot.com/

Slide 17

Slide 17 text

©2018 Wantedly, Inc. ٕज़త੍໿ɾਐԽ ϢʔβʔͷਐԽ ΑΓߴ౓ͳཁ݅ ࣗಈυΞͷ஀ੜ

Slide 18

Slide 18 text

©2018 Wantedly, Inc. ٕज़త੍໿ɾਐԽ ϢʔβʔͷਐԽ ΑΓߴ౓ͳཁ݅ ηϯαʔٕज़ ࣗಈԽ͞Εͨ΋ͷ΁ͷద༻ ΑΓଟ͘ͷਓ͕ߦ͖དྷ͠΍͍͢Α͏ʹ ࣗಈυΞͷ஀ੜ ྫ͑͹

Slide 19

Slide 19 text

©2018 Wantedly, Inc. ࣗಈυΞͷৼΔ෣͍ औख͕ͳ͘ɺΨϥεுΓͷυΞΛݟΔ ಛ௃͔Β͋ͷʮࣗಈυΞʯͱೝࣝ͢Δ υΞʹ޲͔ͬͯา͍͍ͯ͘ ਺ඵखલͰυΞ͕ࣗಈͯ։͘

Slide 20

Slide 20 text

©2018 Wantedly, Inc. ศར

Slide 21

Slide 21 text

©2018 Wantedly, Inc. Source: ਆా͏ͳ͗ٱอాϒϩά

Slide 22

Slide 22 text

©2018 Wantedly, Inc. Source: ਆా͏ͳ͗ٱอాϒϩά

Slide 23

Slide 23 text

©2018 Wantedly, Inc. ಉ͡Α͏ʹݟ͑Δͷʹɺಉ͡ৼΔ෣͍Λ͠ͳ͍ ࣗಈυΞ ࣗಈͰ։͔ͳ͍ ͳͥ͜ͷυΞͰਓ͸ͭ·Δͷ͔

Slide 24

Slide 24 text

©2018 Wantedly, Inc. Source: ਆా͏ͳ͗ٱอాϒϩά “ॏཁͳ͜ͱ͸ɺ݁ہ͜ͷ൶͸ΈΜͳ௨Γൈ͚ΕΒΕΔ͚Ͳͦ͜ʹڧ͍ϖΠϯ͕൐͍ͬͯΔͱ͍͏͜ͱͰ͢ɻ ਖ਼͘͠σβΠϯ͞Ε͍ͯͳ͍ΠϯλʔϑΣʔε͸ϖΠϯΛੜΈग़ͯ͠͠·͏ΜͰ͢”

Slide 25

Slide 25 text

©2018 Wantedly, Inc. ޿͘ར༻͞ΕͯΔυΞͷܗΛར༻͢ΔͱɺॳΊͯͷਓͰ΋εϜʔ ζʹར༻Ͱ͖Δ ಉ͡ݟͨ໨ͷ΋ͷ͸ɺݐ෺͕ҧ͑Ͳಉ͡ৼΔ෣͍Λ͠ͳ͍ͱɺ ར༻ऀ͸ࠔ࿭͢Δ ࣗಈυΞͷ஌ݟ

Slide 26

Slide 26 text

©2018 Wantedly, Inc. ͱ͜ΖͰɺօ͞Μ͸ͦΖͦΖ͜͏ࢥͬͯΔ͸ͣͰ͢

Slide 27

Slide 27 text

©2018 Wantedly, Inc. J04ͷ࿩͸Ͳ͜ʹ͍ͬͨʁ

Slide 28

Slide 28 text

©2018 Wantedly, Inc. ࣮͸ɺ఻͍͑ͨ͜ͱ͸͍͍ͩͨݴ͍·ͨ͠

Slide 29

Slide 29 text

©2018 Wantedly, Inc. iOS Design Patters “ϖΠϯΛੜΈग़͞ͳ͍σβΠϯ͸iOSʹ͓͍ͯ΋ඇৗʹॏཁͰ͢”

Slide 30

Slide 30 text

©2018 Wantedly, Inc. ޿͘ར༻͞ΕͯΔ΋ͷΛར༻͠Α͏ ಉ͡ݟͨ໨ͷ΋ͷ͸ɺ৔ॴ͕ҧ͑Ͳಉ͡ৼΔ෣͍Λ ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏ ແҙࣝʹར༻Ͱ͖ΔσβΠϯ

Slide 31

Slide 31 text

©2018 Wantedly, Inc. HIG Human Interface Guidelines Page Title Page Subtitle “ͦΕ͕௨শHIGʹ౰ͨΓ·͢ɻυΞͷྫͰ͍͑͹ɺυΞͱ͸Կ͔ɺͲ͏ߟ͑Ε͹͍͍͔͕ॻ͍ͯ͋Γ·͢ɻ ͜͏͍͏υΞ͸࡞ͬͪΌμϝͩΑɺͱ͔ࢪৣͯ͋͠ΔυΞ͸͜͏͍͏෩ͳσβΠϯʹͯ͠ͶɺΈ͍ͨͳ͜ͱ ͕ॻ͍ͯ·͢ɻݐ෺ͷͲ͔͜ʹυΞΛ͚ͭΑ͏ͱ͍ͯ͠ΔͳΒಡΉඞཁ͕͋Γ·͢ΑͶɻ·ͯ͠΍ɺ͋ͳͨ ͕ࣗಈυΞΛ࡞Ζ͏ͱͯ͠ΔͳΒɺಡΉඞཁੑ͸ΑΓग़͖ͯ·͢”

Slide 32

Slide 32 text

©2018 Wantedly, Inc. ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏

Slide 33

Slide 33 text

©2018 Wantedly, Inc. UITableView Page Title Page Subtitle “iPhone ͷొ৔ͱڞʹొ৔ͨ͠৽͍͠UI͕ UITableView Ͱ͠ΐ͏”

Slide 34

Slide 34 text

©2018 Wantedly, Inc. UITableView Settings Twitter Youtube “ࠓ೔ɺҰ൪ඪ४తͳUI͔ͭҰ൪֦ு͞Εͯ࢖ΘΕͯΔUIͳͷͰ͸ͳ͍Ͱ͠ΐ͏͔”

Slide 35

Slide 35 text

©2018 Wantedly, Inc. Page Title Page Subtitle UITableView Source: Sociomedia “݁Ռతʹ৽͍͠ඪ४UIͷҰͭʹͳͬͨUITableView͸ͳͥੜ·ΕͨͷͰ͠ΐ͏͔”

Slide 36

Slide 36 text

©2018 Wantedly, Inc. ٕज़త੍໿ɾਐԽ ϢʔβʔͷਐԽ ΑΓߴ౓ͳཁ݅ ৽͍͠ඪ४6*ͷ஀ੜݪཧ “৽͍͠ΠϯλʔϑΣΠε͸͜ΒΕͷ͏͍ͪͣΕ͔͕มΘͬͨ࣌ʹ஀ੜ͢Δͱߟ͍͑ͯ·͢”

Slide 37

Slide 37 text

©2018 Wantedly, Inc. ٕज़త੍໿ɾਐԽ ϢʔβʔͷਐԽ ΑΓߴ౓ͳཁ݅ 1$ΑΓѹ౗తʹখ͍͞σΟεϓϨΠ Πϯλʔωοτ΁ͷద༻ खͰ৮ΕΔ͙Β͍খ͍͞؀ڥͰɺ1$ ͱಉ͡ػೳΛ ৽͍͠ඪ४6*ͷ஀ੜݪཧ ྫ͑͹

Slide 38

Slide 38 text

©2018 Wantedly, Inc. 1$ͱಉ͡৘ใྔΛطଘͷΠϯλʔϑΣΠεͰ ѹ౗తʹখ͍͞σΟεϓϨΠʹදࣔ͢Δͷ͸೉͍͠

Slide 39

Slide 39 text

©2018 Wantedly, Inc. Finder “ͦ͜ͰɺطଘͷΧϥϜϨΠΞ΢τͷߟ͑ํΛԠ༻͢Δ͜ͱʹ͠·ͨ͠”

Slide 40

Slide 40 text

©2018 Wantedly, Inc. Finder

Slide 41

Slide 41 text

©2018 Wantedly, Inc. Finder

Slide 42

Slide 42 text

©2018 Wantedly, Inc. Finder “1ϖΠϯΛશը໘ʹදࣔͯ͠ݟ·͢ɻҰը໘ͷ৘ใྔΛ཈͑Δ͜ͱ͕Ͱ͖ͯɺখ͍͞ը໘Ͱ΋଱͑ΒΕΔΑ͏ʹͳΓ·ͨ͠ɻͨͩ͜ΕΛ࣮ࡍʹ࢖ͬͯݟΔͱ”

Slide 43

Slide 43 text

©2018 Wantedly, Inc. Finder

Slide 44

Slide 44 text

©2018 Wantedly, Inc. Finder “ࣗ෼͕Ͳ͜ʹ͍Δͷ͔ɺԿ͕ى͖ͨͷ͔͕શ͘Θ͔Βͳ͍ΜͰ͢ΑͶɻ”

Slide 45

Slide 45 text

©2018 Wantedly, Inc. Finder “શͯͷΧϥϜ͕ݟ͑ͯΔͱɺίϯςΫετ͕ݟ͑·͕͢ɺ”

Slide 46

Slide 46 text

©2018 Wantedly, Inc. Finder “Ұը໘ʹ̍ΧϥϜͩͱɺίϯςΫετΛࣦͬͯ͠·͍·͢ɻ”

Slide 47

Slide 47 text

©2018 Wantedly, Inc. UITableView Navigation & Transition “ͦ͜Ͱಋೖ͞Εͨͷ͕ɺ Navigationߏ଄ͱTransisitonͰ͢ɻ͜ΕʹΑͬͯϢʔβʔ͸ࣗ෼͕Ͳ͜ʹ͍Δ ͷ͔ɺͲ͏΍ͬͯ໭ΕΔͷ͔ɺCellΛλοϓͨ࣌͠ʹͳʹ͕ى͔ͬͨ͜Λཧղ͢Δ͜ͱ͕Ͱ͖·͢ɻ”

Slide 48

Slide 48 text

©2018 Wantedly, Inc. 1$ΑΓѹ౗తʹখ͍͞σΟεϓϨΠ Πϯλʔωοτ΁ͷద༻ खͰ৮ΕΔ͙Β͍খ͍͞؀ڥͰɺ1$ ͱಉ͡ػೳΛ UITableView “UITableView͸ɺ͜͏੍͍ͬͨ໿ʹରͯ͠ͱͬͨΞϓϩʔνͰ͢ɻ”

Slide 49

Slide 49 text

©2018 Wantedly, Inc. UITableView ֊૚͕ෳࡶԽ͢Δ͜ͱ΍Ϗϡʔؒͷԟ͖དྷͷ ൥ࡶ͞Λ٘ਜ਼ʹ খ͍͞ը໘Ͱଟ͘ͷ৘ใΛγϯϓϧʹݟͤΔ ͨΊʹશը໘ϨΠΞ΢τΛ࠾༻ ίϯςΫετΛࣦΘͳ͍ͨΊʹ/BWJHBUJPO ͱ5SBOTJUJPOΛར༻ͨ͠ “iOSͷσβΠϯΛߟ͑Δ্Ͱɺ͜ͷલఏ͸ඇৗʹॏཁʹͳ͖ͬͯ·͢ɻiOSͰੜ·ΕͨUI͸ଟ͘ͷ৔߹ɺ͜ͷલఏͷ্ʹ͋Γ·͢ɻ”

Slide 50

Slide 50 text

©2018 Wantedly, Inc. 2007 → 2018 “ॳ୅iPhone͕஀ੜ͔ͯ͠Βɺ11೥͕ܦͪ·ͨ͠”

Slide 51

Slide 51 text

©2018 Wantedly, Inc. ٕज़త੍໿ɾਐԽ ϢʔβʔͷਐԽ ΑΓߴ౓ͳཁ݅ “͜ΕΒͷཁૉ͸େ͖͘มΘ͖͍ͬͯͯ·͢ɻ”

Slide 52

Slide 52 text

©2018 Wantedly, Inc. Anti-Skeuomorphism ϢʔβʔϦςϥγͷਐԽ

Slide 53

Slide 53 text

©2018 Wantedly, Inc. 3D Touch σΟεϓϨΠٕज़ͷਐԽ

Slide 54

Slide 54 text

©2018 Wantedly, Inc. Home Indicator ϋʔυͱιϑτͷҰମԽ

Slide 55

Slide 55 text

©2018 Wantedly, Inc. σΟζϓϨΠͷେܕԽ “ࡢࠓͰҰ൪େ͖ͳมԽ͕σΟεϓϨΠͷେܕԽͰ͢ɻ”

Slide 56

Slide 56 text

©2018 Wantedly, Inc.

Slide 57

Slide 57 text

©2018 Wantedly, Inc. 1$ΑΓѹ౗తʹখ͍͞σΟεϓϨΠ Πϯλʔωοτ΁ͷద༻ खͰ৮ΕΔ͙Β͍খ͍͞؀ڥͰɺ1$ ͱಉ͡ػೳΛ UITableView ͜͜΁ͷΞϓϩʔν͕શ ͯͷ࢝·Γ͔ͩΒ

Slide 58

Slide 58 text

©2018 Wantedly, Inc. 2007 → 2018 “11೥ͷ࣌ΛܦͯɺiPhoneͷσΟεϓϨΠ͸৴͡ΒΕͳ͍͘Β͍େ͖͘ͳΓ·ͨ͠”

Slide 59

Slide 59 text

©2018 Wantedly, Inc. ੍໿͕มΘΕ͹ɺ6*͸มΘΔ

Slide 60

Slide 60 text

©2018 Wantedly, Inc. “େը໘Խͨ͜͠ͱͰՄೳʹͳͬͨUI͕͜ͷϞʔμϧϏϡʔͷΑ͏ͳಈ͖Ͱɺը໘ͷ్தʹͱͲ·ͬͨΓ͢Δ͍ͭ͜Ͱ͢ɻ”

Slide 61

Slide 61 text

©2018 Wantedly, Inc. Semi-ModalView

Slide 62

Slide 62 text

©2018 Wantedly, Inc. Music on iOS 8.4 (2014) “͜ͷ2014೥͸ॳΊͯେը໘ͷPlusόʔδϣϯ͕ϦϦʔε͞Ε·ͨ͠”

Slide 63

Slide 63 text

©2018 Wantedly, Inc. Maps on iOS12 “iPhone X ͱಉ͘͡ϦϦʔε͞Εͨ iOS 11 Ͱ͸ΑΓηϛϞʔμϧͷಋೖ͕ਐΈ·ͨ͠”

Slide 64

Slide 64 text

©2018 Wantedly, Inc. Voice Memos on iOS12 “ͦͯ͠ɺશͯͷϦϦʔε͞ΕΔσόΠε͕શը໘σΟεϓϨΠʹͳΔͱݴΘΕ͍ͯΔiOS12Ͱ͸ΑΓଟ͘औΓೖΕΒΕ͍ͯ·͢”

Slide 65

Slide 65 text

©2018 Wantedly, Inc. Stocks on iOS12

Slide 66

Slide 66 text

©2018 Wantedly, Inc. ը໘͕େܕԽͨ͜͠ͱͰɺ̎ͭͷঢ়ଶͰύϥϨ ϧͳର࿩Λ࣮ݱͰ͖ΔΑ͏ʹͳͬͨ →

Slide 67

Slide 67 text

©2018 Wantedly, Inc. ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏

Slide 68

Slide 68 text

©2018 Wantedly, Inc. ޿͘ར༻͞ΕͯΔ΋ͷΛར༻͠Α͏ ಉ͡ݟͨ໨ͷ΋ͷ͸ɺ৔ॴ͕ҧ͑Ͳಉ͡ৼΔ෣͍Λ ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏ ࠓ೔఻͍͑ͨ͜ͱ

Slide 69

Slide 69 text

2017.12.13 | ©2017 Wantedly, Inc. 69