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

465f1412cc277455a0e654eb0adfb378?s=47 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がどのような手法を取っているか、どういった背景で導入されたのかをお話しました

465f1412cc277455a0e654eb0adfb378?s=128

Ryo Usami

August 30, 2018
Tweet

Transcript

  1. 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. 18.

    ©2018 Wantedly, Inc.  ٕज़త੍໿ɾਐԽ  ϢʔβʔͷਐԽ  ΑΓߴ౓ͳཁ݅ ηϯαʔٕज़

    ࣗಈԽ͞Εͨ΋ͷ΁ͷద༻ ΑΓଟ͘ͷਓ͕ߦ͖དྷ͠΍͍͢Α͏ʹ ࣗಈυΞͷ஀ੜ ྫ͑͹
  3. 31.

    ©2018 Wantedly, Inc. HIG Human Interface Guidelines Page Title Page

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

    ©2018 Wantedly, Inc. Page Title Page Subtitle UITableView Source: Sociomedia

    “݁Ռతʹ৽͍͠ඪ४UIͷҰͭʹͳͬͨUITableView͸ͳͥੜ·ΕͨͷͰ͠ΐ͏͔”
  5. 36.

    ©2018 Wantedly, Inc.  ٕज़త੍໿ɾਐԽ  ϢʔβʔͷਐԽ  ΑΓߴ౓ͳཁ݅ ৽͍͠ඪ४6*ͷ஀ੜݪཧ

    “৽͍͠ΠϯλʔϑΣΠε͸͜ΒΕͷ͏͍ͪͣΕ͔͕มΘͬͨ࣌ʹ஀ੜ͢Δͱߟ͍͑ͯ·͢”
  6. 37.

    ©2018 Wantedly, Inc.  ٕज़త੍໿ɾਐԽ  ϢʔβʔͷਐԽ  ΑΓߴ౓ͳཁ݅ 1$ΑΓѹ౗తʹখ͍͞σΟεϓϨΠ

    Πϯλʔωοτ΁ͷద༻ खͰ৮ΕΔ͙Β͍খ͍͞؀ڥͰɺ1$ ͱಉ͡ػೳΛ ৽͍͠ඪ४6*ͷ஀ੜݪཧ ྫ͑͹
  7. 49.

    ©2018 Wantedly, Inc. UITableView  ֊૚͕ෳࡶԽ͢Δ͜ͱ΍Ϗϡʔؒͷԟ͖དྷͷ ൥ࡶ͞Λ٘ਜ਼ʹ  খ͍͞ը໘Ͱଟ͘ͷ৘ใΛγϯϓϧʹݟͤΔ ͨΊʹશը໘ϨΠΞ΢τΛ࠾༻

     ίϯςΫετΛࣦΘͳ͍ͨΊʹ/BWJHBUJPO ͱ5SBOTJUJPOΛར༻ͨ͠ “iOSͷσβΠϯΛߟ͑Δ্Ͱɺ͜ͷલఏ͸ඇৗʹॏཁʹͳ͖ͬͯ·͢ɻiOSͰੜ·ΕͨUI͸ଟ͘ͷ৔߹ɺ͜ͷલఏͷ্ʹ͋Γ·͢ɻ”
  8. 63.

    ©2018 Wantedly, Inc. Maps on iOS12 “iPhone X ͱಉ͘͡ϦϦʔε͞Εͨ iOS

    11 Ͱ͸ΑΓηϛϞʔμϧͷಋೖ͕ਐΈ·ͨ͠”