標準アプリから学ぶ、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がどのような手法を取っているか、どういった背景で導入されたのかをお話しました

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 Slide

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

   View Slide

3. Wantedly, Inc.
   3
   PRODUCTS
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. ©2018 Wantedly, Inc.
    ©Richard Thomas
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. ©2018 Wantedly, Inc.
    ศར
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. ©2018 Wantedly, Inc.
    Finder
    

    View Slide

41. ©2018 Wantedly, Inc.
    Finder
    

    View Slide

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

    View Slide

43. ©2018 Wantedly, Inc.
    Finder
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. ©2018 Wantedly, Inc.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. ©2018 Wantedly, Inc.
    Semi-ModalView
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

65. ©2018 Wantedly, Inc.
    Stocks on iOS12
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

69. 2017.12.13 | ©2017 Wantedly, Inc.
    69
    

    View Slide