Upgrade to Pro — share decks privately, control downloads, hide ads and more …

標準アプリから学ぶ、HIGが教えてくれないiOSデザインのこと

Ryo Usami
August 30, 2018

 標準アプリから学ぶ、HIGが教えてくれないiOSデザインのこと

https://fortee.jp/iosdc-japan-2018/proposal/f3c3edfe-423c-4f88-8061-0f28e8f7d1a6

元々 iOS のインターフェイスデザインでは小さいディスプレイで、シンプルに情報を表示するために、階層が複雑化することやビュー間の往き来の煩雑さを犠牲にしても、Push/Popなどの全画面遷移を利用することを選択してきました。しかし、ディスプレイの大型化でより多くの情報が表示できることになった他、Force Touch など新しいインタフェースが利用できるようになったこともあり、今までのPush/Popの単純な画面遷移ではない手法が登場し始めました。実際に、iOS 10 での Music app のリニューアルを皮切りに、iOS 11 では標準コンポーネントにも Large Title が登場したり、画面下から現れて画面にとどまる”半モーダルビュー”のようなものが登場したり、標準 App のデザインは大きく変わってきています。
HIG では、iOS App のデザインにおける基本的な考えた方について、説明しています。このように取りうる選択肢が増えた環境下で、サードバー App 開発者はより具体的に目的に対して最善の手法を考える必要が出てきました。今回の発表では、そのような手法について、Appleがどのような手法を取っているか、どういった背景で導入されたのかをお話しました

Ryo Usami

August 30, 2018
Tweet

More Decks by Ryo Usami

Other Decks in Design

Transcript

  1. ©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)

    View full-size slide

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

    View full-size slide

  3. Wantedly, Inc.
    3
    PRODUCTS

    View full-size slide

  4. Discover opportunities and connect with companies
    anytime, anywhere.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. ©2018 Wantedly, Inc.

    ͦ͏Ͱ͢ɺ͜ΕͰ͢

    View full-size slide

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

    υΞͷػೳ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. ©2018 Wantedly, Inc.
    ©Richard Thomas

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. ©2018 Wantedly, Inc.
    ศར

    View full-size slide

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

    View full-size slide

  22. ©2018 Wantedly, Inc.

    Source: ਆా͏ͳ͗ٱอాϒϩά

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. ©2018 Wantedly, Inc.
    Finder

    View full-size slide

  41. ©2018 Wantedly, Inc.
    Finder

    View full-size slide

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

    View full-size slide

  43. ©2018 Wantedly, Inc.
    Finder

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. ©2018 Wantedly, Inc.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. ©2018 Wantedly, Inc.
    Semi-ModalView

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. ©2018 Wantedly, Inc.
    Stocks on iOS12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. 2017.12.13 | ©2017 Wantedly, Inc.
    69

    View full-size slide