標準アプリから学ぶ、HIGが教えてくれないiOSデザインのこと
by
Ryo Usami
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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