標準アプリから学ぶ、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)
2. Wantedly, Inc. 2 ೥ੜ·ΕɻૣҴాେֶߴ౳ֶӃࡏֶத͔ΒσβΠφʔͱͯ͠ϕϯνϟʔ اۀͰΠϯλʔϯɻ೥݄ΑΓ
   8BOUFEMZ
   *OD
   ʹೖࣾɻݱࡏ͸ɺϞ όΠϧΞϓϦΛ࢝Ίͱͨ͠ʮ8BOUFEMZ
   7JTUʯશମͷσβΠϯɾମݧʹ੹೚ Λ͍࣋ͬͯΔɻ
   5XJUUFS
   !VTB@ Ryo Usami Wantedly, Inc. / Designer
3. Wantedly, Inc. 3 PRODUCTS
4. Discover opportunities and connect with companies anytime, anywhere.
5. ©2018 Wantedly, Inc. ࠓ೔఻͍͑ͨ͜ͱ
6. ©2018 Wantedly, Inc.  ޿͘ར༻͞ΕͯΔ΋ͷΛར༻͠Α͏
    ಉ͡ݟͨ໨ͷ΋ͷ͸ɺ৔ॴ͕ҧ͑Ͳಉ͡ৼΔ෣͍Λ
    ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏ ࠓ೔఻͍͑ͨ͜ͱ
7. ©2018 Wantedly, Inc. υΞͬͯ஌ͬͯ·͔͢ʁ
8. ©2018 Wantedly, Inc. ͦ͏Ͱ͢ɺ͜ΕͰ͢
9. ©2018 Wantedly, Inc.  ۭؒΛ۠੾Δ
    ։ดͰ͖Δ
    ग़ೖΓ͢ΔਓΛ੍ݶͰ͖Δ ࢪৣ υΞͷػೳ
10. ©2018 Wantedly, Inc. Ͱɺͪΐͬͱࢥ͍ग़ͯ͠Έͯཉ͍͠ΜͰ͕͢
11. ©2018 Wantedly, Inc. ࠓ೔͜͜ʹདྷΔ·ͰυΞΛ
    ͍ͭ͘ར༻͠·͔ͨ͠ʁ
12. ©2018 Wantedly, Inc. ©Richard Thomas
13. ©2018 Wantedly, Inc. ͳͥɺҙࣝ͠ͳ͍ͷ͔ʁ
14. ©2018 Wantedly, Inc. ˠ  ͢Ͱʹ Կ౓΋ ར༻ͨ͜͠ͱ͕͔͋ͬͨΒ
     υΞʹݟ͑Δ΋ͷ͸ಉ͡ৼΔ෣͍Λͯ͘͠ΕΔ͔Β
     υΞͷར༻ͷ͞Εํ͕ಉ͔ͩ͡Β
15. ©2018 Wantedly, Inc. ৽͍͠ʮυΞʯ͸Ͳ͏΍ͬͯੜ·ΕΔʁ
16. ©2018 Wantedly, Inc. Source: http://shirokanelife.blogspot.com/
17. ©2018 Wantedly, Inc.  ٕज़త੍໿ɾਐԽ
     ϢʔβʔͷਐԽ
     ΑΓߴ౓ͳཁ݅ ࣗಈυΞͷ஀ੜ
18. ©2018 Wantedly, Inc.  ٕज़త੍໿ɾਐԽ
     ϢʔβʔͷਐԽ
     ΑΓߴ౓ͳཁ݅ ηϯαʔٕज़
    ࣗಈԽ͞Εͨ΋ͷ΁ͷద༻
    ΑΓଟ͘ͷਓ͕ߦ͖དྷ͠΍͍͢Α͏ʹ ࣗಈυΞͷ஀ੜ ྫ͑͹
19. ©2018 Wantedly, Inc. ࣗಈυΞͷৼΔ෣͍  औख͕ͳ͘ɺΨϥεுΓͷυΞΛݟΔ
     ಛ௃͔Β͋ͷʮࣗಈυΞʯͱೝࣝ͢Δ
     υΞʹ޲͔ͬͯา͍͍ͯ͘
     ਺ඵखલͰυΞ͕ࣗಈͯ։͘
20. ©2018 Wantedly, Inc. ศར
    
    
    
21. ©2018 Wantedly, Inc. Source: ਆా͏ͳ͗ٱอాϒϩά
22. ©2018 Wantedly, Inc. Source: ਆా͏ͳ͗ٱอాϒϩά
23. ©2018 Wantedly, Inc. ಉ͡Α͏ʹݟ͑Δͷʹɺಉ͡ৼΔ෣͍Λ͠ͳ͍ ࣗಈυΞ ࣗಈͰ։͔ͳ͍ ͳͥ͜ͷυΞͰਓ͸ͭ·Δͷ͔
24. ©2018 Wantedly, Inc. Source: ਆా͏ͳ͗ٱอాϒϩά “ॏཁͳ͜ͱ͸ɺ݁ہ͜ͷ൶͸ΈΜͳ௨Γൈ͚ΕΒΕΔ͚Ͳͦ͜ʹڧ͍ϖΠϯ͕൐͍ͬͯΔͱ͍͏͜ͱͰ͢ɻ ਖ਼͘͠σβΠϯ͞Ε͍ͯͳ͍ΠϯλʔϑΣʔε͸ϖΠϯΛੜΈग़ͯ͠͠·͏ΜͰ͢”
25. ©2018 Wantedly, Inc.  ޿͘ར༻͞ΕͯΔυΞͷܗΛར༻͢ΔͱɺॳΊͯͷਓͰ΋εϜʔ ζʹར༻Ͱ͖Δ
     ಉ͡ݟͨ໨ͷ΋ͷ͸ɺݐ෺͕ҧ͑Ͳಉ͡ৼΔ෣͍Λ͠ͳ͍ͱɺ ར༻ऀ͸ࠔ࿭͢Δ ࣗಈυΞͷ஌ݟ
26. ©2018 Wantedly, Inc. ͱ͜ΖͰɺօ͞Μ͸ͦΖͦΖ͜͏ࢥͬͯΔ͸ͣͰ͢
27. ©2018 Wantedly, Inc. J04ͷ࿩͸Ͳ͜ʹ͍ͬͨʁ
28. ©2018 Wantedly, Inc. ࣮͸ɺ఻͍͑ͨ͜ͱ͸͍͍ͩͨݴ͍·ͨ͠
29. ©2018 Wantedly, Inc. iOS Design Patters “ϖΠϯΛੜΈग़͞ͳ͍σβΠϯ͸iOSʹ͓͍ͯ΋ඇৗʹॏཁͰ͢”
30. ©2018 Wantedly, Inc.  ޿͘ར༻͞ΕͯΔ΋ͷΛར༻͠Α͏
     ಉ͡ݟͨ໨ͷ΋ͷ͸ɺ৔ॴ͕ҧ͑Ͳಉ͡ৼΔ෣͍Λ
     ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏ ແҙࣝʹར༻Ͱ͖ΔσβΠϯ
31. ©2018 Wantedly, Inc. HIG Human Interface Guidelines Page Title Page Subtitle “ͦΕ͕௨শHIGʹ౰ͨΓ·͢ɻυΞͷྫͰ͍͑͹ɺυΞͱ͸Կ͔ɺͲ͏ߟ͑Ε͹͍͍͔͕ॻ͍ͯ͋Γ·͢ɻ ͜͏͍͏υΞ͸࡞ͬͪΌμϝͩΑɺͱ͔ࢪৣͯ͋͠ΔυΞ͸͜͏͍͏෩ͳσβΠϯʹͯ͠ͶɺΈ͍ͨͳ͜ͱ ͕ॻ͍ͯ·͢ɻݐ෺ͷͲ͔͜ʹυΞΛ͚ͭΑ͏ͱ͍ͯ͠ΔͳΒಡΉඞཁ͕͋Γ·͢ΑͶɻ·ͯ͠΍ɺ͋ͳͨ ͕ࣗಈυΞΛ࡞Ζ͏ͱͯ͠ΔͳΒɺಡΉඞཁੑ͸ΑΓग़͖ͯ·͢”
32. ©2018 Wantedly, Inc. ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏
33. ©2018 Wantedly, Inc. UITableView Page Title Page Subtitle “iPhone ͷొ৔ͱڞʹొ৔ͨ͠৽͍͠UI͕ UITableView Ͱ͠ΐ͏”
34. ©2018 Wantedly, Inc. UITableView Settings Twitter Youtube “ࠓ೔ɺҰ൪ඪ४తͳUI͔ͭҰ൪֦ு͞Εͯ࢖ΘΕͯΔUIͳͷͰ͸ͳ͍Ͱ͠ΐ͏͔”
35. ©2018 Wantedly, Inc. Page Title Page Subtitle UITableView Source: Sociomedia “݁Ռతʹ৽͍͠ඪ४UIͷҰͭʹͳͬͨUITableView͸ͳͥੜ·ΕͨͷͰ͠ΐ͏͔”
36. ©2018 Wantedly, Inc.  ٕज़త੍໿ɾਐԽ
     ϢʔβʔͷਐԽ
     ΑΓߴ౓ͳཁ݅ ৽͍͠ඪ४6*ͷ஀ੜݪཧ “৽͍͠ΠϯλʔϑΣΠε͸͜ΒΕͷ͏͍ͪͣΕ͔͕มΘͬͨ࣌ʹ஀ੜ͢Δͱߟ͍͑ͯ·͢”
37. ©2018 Wantedly, Inc.  ٕज़త੍໿ɾਐԽ
     ϢʔβʔͷਐԽ
     ΑΓߴ౓ͳཁ݅ 1$ΑΓѹ౗తʹখ͍͞σΟεϓϨΠ
    Πϯλʔωοτ΁ͷద༻
    खͰ৮ΕΔ͙Β͍খ͍͞؀ڥͰɺ1$
    ͱಉ͡ػೳΛ ৽͍͠ඪ४6*ͷ஀ੜݪཧ ྫ͑͹
38. ©2018 Wantedly, Inc. 1$ͱಉ͡৘ใྔΛطଘͷΠϯλʔϑΣΠεͰ
    ѹ౗తʹখ͍͞σΟεϓϨΠʹදࣔ͢Δͷ͸೉͍͠
39. ©2018 Wantedly, Inc. Finder “ͦ͜ͰɺطଘͷΧϥϜϨΠΞ΢τͷߟ͑ํΛԠ༻͢Δ͜ͱʹ͠·ͨ͠”
40. ©2018 Wantedly, Inc. Finder
41. ©2018 Wantedly, Inc. Finder
42. ©2018 Wantedly, Inc. Finder “1ϖΠϯΛશը໘ʹදࣔͯ͠ݟ·͢ɻҰը໘ͷ৘ใྔΛ཈͑Δ͜ͱ͕Ͱ͖ͯɺখ͍͞ը໘Ͱ΋଱͑ΒΕΔΑ͏ʹͳΓ·ͨ͠ɻͨͩ͜ΕΛ࣮ࡍʹ࢖ͬͯݟΔͱ”
43. ©2018 Wantedly, Inc. Finder
44. ©2018 Wantedly, Inc. Finder “ࣗ෼͕Ͳ͜ʹ͍Δͷ͔ɺԿ͕ى͖ͨͷ͔͕શ͘Θ͔Βͳ͍ΜͰ͢ΑͶɻ”
45. ©2018 Wantedly, Inc. Finder “શͯͷΧϥϜ͕ݟ͑ͯΔͱɺίϯςΫετ͕ݟ͑·͕͢ɺ”
46. ©2018 Wantedly, Inc. Finder “Ұը໘ʹ̍ΧϥϜͩͱɺίϯςΫετΛࣦͬͯ͠·͍·͢ɻ”
47. ©2018 Wantedly, Inc. UITableView Navigation & Transition “ͦ͜Ͱಋೖ͞Εͨͷ͕ɺ Navigationߏ଄ͱTransisitonͰ͢ɻ͜ΕʹΑͬͯϢʔβʔ͸ࣗ෼͕Ͳ͜ʹ͍Δ ͷ͔ɺͲ͏΍ͬͯ໭ΕΔͷ͔ɺCellΛλοϓͨ࣌͠ʹͳʹ͕ى͔ͬͨ͜Λཧղ͢Δ͜ͱ͕Ͱ͖·͢ɻ”
48. ©2018 Wantedly, Inc. 1$ΑΓѹ౗తʹখ͍͞σΟεϓϨΠ
    Πϯλʔωοτ΁ͷద༻
    खͰ৮ΕΔ͙Β͍খ͍͞؀ڥͰɺ1$
    ͱಉ͡ػೳΛ UITableView “UITableView͸ɺ͜͏੍͍ͬͨ໿ʹରͯ͠ͱͬͨΞϓϩʔνͰ͢ɻ”
49. ©2018 Wantedly, Inc. UITableView  ֊૚͕ෳࡶԽ͢Δ͜ͱ΍Ϗϡʔؒͷԟ͖དྷͷ ൥ࡶ͞Λ٘ਜ਼ʹ
     খ͍͞ը໘Ͱଟ͘ͷ৘ใΛγϯϓϧʹݟͤΔ ͨΊʹશը໘ϨΠΞ΢τΛ࠾༻
     ίϯςΫετΛࣦΘͳ͍ͨΊʹ/BWJHBUJPO ͱ5SBOTJUJPOΛར༻ͨ͠ “iOSͷσβΠϯΛߟ͑Δ্Ͱɺ͜ͷલఏ͸ඇৗʹॏཁʹͳ͖ͬͯ·͢ɻiOSͰੜ·ΕͨUI͸ଟ͘ͷ৔߹ɺ͜ͷલఏͷ্ʹ͋Γ·͢ɻ”
50. ©2018 Wantedly, Inc. 2007 → 2018 “ॳ୅iPhone͕஀ੜ͔ͯ͠Βɺ11೥͕ܦͪ·ͨ͠”
51. ©2018 Wantedly, Inc.  ٕज़త੍໿ɾਐԽ
     ϢʔβʔͷਐԽ
     ΑΓߴ౓ͳཁ݅ “͜ΕΒͷཁૉ͸େ͖͘มΘ͖͍ͬͯͯ·͢ɻ”
52. ©2018 Wantedly, Inc. Anti-Skeuomorphism ϢʔβʔϦςϥγͷਐԽ
53. ©2018 Wantedly, Inc. 3D Touch σΟεϓϨΠٕज़ͷਐԽ
54. ©2018 Wantedly, Inc. Home Indicator ϋʔυͱιϑτͷҰମԽ
55. ©2018 Wantedly, Inc. σΟζϓϨΠͷେܕԽ “ࡢࠓͰҰ൪େ͖ͳมԽ͕σΟεϓϨΠͷେܕԽͰ͢ɻ”
56. ©2018 Wantedly, Inc.
57. ©2018 Wantedly, Inc. 1$ΑΓѹ౗తʹখ͍͞σΟεϓϨΠ
    Πϯλʔωοτ΁ͷద༻
    खͰ৮ΕΔ͙Β͍খ͍͞؀ڥͰɺ1$
    ͱಉ͡ػೳΛ UITableView ͜͜΁ͷΞϓϩʔν͕શ ͯͷ࢝·Γ͔ͩΒ
58. ©2018 Wantedly, Inc. 2007 → 2018 “11೥ͷ࣌ΛܦͯɺiPhoneͷσΟεϓϨΠ͸৴͡ΒΕͳ͍͘Β͍େ͖͘ͳΓ·ͨ͠”
59. ©2018 Wantedly, Inc. ੍໿͕มΘΕ͹ɺ6*͸มΘΔ
60. ©2018 Wantedly, Inc. “େը໘Խͨ͜͠ͱͰՄೳʹͳͬͨUI͕͜ͷϞʔμϧϏϡʔͷΑ͏ͳಈ͖Ͱɺը໘ͷ్தʹͱͲ·ͬͨΓ͢Δ͍ͭ͜Ͱ͢ɻ”
61. ©2018 Wantedly, Inc. Semi-ModalView
62. ©2018 Wantedly, Inc. Music on iOS 8.4 (2014) “͜ͷ2014೥͸ॳΊͯେը໘ͷPlusόʔδϣϯ͕ϦϦʔε͞Ε·ͨ͠”
63. ©2018 Wantedly, Inc. Maps on iOS12 “iPhone X ͱಉ͘͡ϦϦʔε͞Εͨ iOS 11 Ͱ͸ΑΓηϛϞʔμϧͷಋೖ͕ਐΈ·ͨ͠”
64. ©2018 Wantedly, Inc. Voice Memos on iOS12 “ͦͯ͠ɺશͯͷϦϦʔε͞ΕΔσόΠε͕શը໘σΟεϓϨΠʹͳΔͱݴΘΕ͍ͯΔiOS12Ͱ͸ΑΓଟ͘औΓೖΕΒΕ͍ͯ·͢”
65. ©2018 Wantedly, Inc. Stocks on iOS12
66. ©2018 Wantedly, Inc. ը໘͕େܕԽͨ͜͠ͱͰɺ̎ͭͷঢ়ଶͰύϥϨ ϧͳର࿩Λ࣮ݱͰ͖ΔΑ͏ʹͳͬͨ →
67. ©2018 Wantedly, Inc. ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏
68. ©2018 Wantedly, Inc.  ޿͘ར༻͞ΕͯΔ΋ͷΛར༻͠Α͏
     ಉ͡ݟͨ໨ͷ΋ͷ͸ɺ৔ॴ͕ҧ͑Ͳಉ͡ৼΔ෣͍Λ
     ৽͍͠ඪ४͕ొ৔ͨ࣌͠͸ͦͷഎܠɾ࢖͍ํΛ஌Ζ͏ ࠓ೔఻͍͑ͨ͜ͱ
69. 2017.12.13 | ©2017 Wantedly, Inc. 69