Japan NFC Reader での UI デザイン / Japan NFC Reader's UI design

Japan NFC Reader での UI デザイン
@treastrain | @JapanNFCReader

NEW DEBUG!! #2.0 ~魔王を倒すために異世界転生しましたがバグが発生したので修正します~ @ CASPUR 2020/08/01 22:00~

Transcript

1. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
   Japan NFC Reader Ͱͷ UI σβΠϯ
   @treastrain | @JapanNFCReader
   NEW DEBUG!! #2.0 ~ຐԦΛ౗ͨ͢Ίʹҟੈքసੜ͠·͕ͨ͠όά͕ൃੜͨ͠ͷͰमਖ਼͠·͢~ @ CASPUR August 1, 2020
   

   View Slide

2. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. 2
   ࣗݾ঺հ @treastrain / Tanaka Ryoga
   https://treastrain.jp
   ߴઐଔ → େֶֶ෦4೥ → 21৽ଔ༧ఆ
   Swift (iOS, watchOS), Core NFC
   2019೥9݄22೔ iOSɾwatchOS App
   ʮJapan NFC ReaderʯϦϦʔε
   

   View Slide

3. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
   Japan NFC Reader
   iOS 13.0 Ҏ߱ͷ iPhone Ͱ
   ిࢠϚωʔͷ࢒ߴɾར༻ཤྺͷಡΈऔΓ
   2019೥9݄ ഑৴։࢝
   2020೥7݄ 235K (Ϣχοτ਺)
   https://japannfcreader.tret.jp/
   Twitter @JapanNFCReader
   3
   iOS App
   

   View Slide

4. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
   treastrain/TRETJapanNFCReader
   https://github.com/treastrain/TRETJapanNFCReader
   Japan NFC Reader ͷίΞ෦෼Λ OSS Խͨ͠ϥΠϒϥϦ MIT Licence
   Initial commit: 2019೥6݄19೔ɹ289 Stars
   2020೥8݄1೔࣌఺
   v2.0-develop ʹͯϑϧεΫϥονத…
   4
   OSS Library
   

   View Slide

5. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
   ීஈ iPhone ΞϓϦΛ࢖͍ͬͯͯࢥ͏͜ͱ
   த్൒୺ʹͳΔ͘Β͍ͳΒඪ४ UI Λ࢖͑
   νϡʔτϦΞϧͳ͠Ͱ࢖͑ΔΑ͏ʹ͠Ζ
   ϚδοΫφϯόʔΛ࢖͏ͳ
   WebView ΍Ίͯ͘Ε
   ߥ͍ը૾Λ࢖͏ͳ
   ঢ়ଶΛલճͱҡ࣋͠Ζ
   μʔΫϞʔυରԠ͠Ζ
   ͜ͷػೳΛಠࣗͰ࣮૷͢Δͳ
   Dynamic Type Λ࢖͑
   

   View Slide

6. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
   Japan NFC Reader Ͱͷ UI σβΠϯ
   ʢUI : Ϣʔβʔ͕ը໘্Ͱೝࣝɾૢ࡞͢ΔϞϊɺͦΕͱͷ઀ଓ఺ʣ
   

   View Slide

7. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
   ૝ఆϢʔβʔ͸ iPhone Λ࢖͏࿝एஉঁ
   ● ΩϟογϡϨεੜ׆ͷҰ෦Λߏ੒
   ● ର৅೥ྸʹ੍ݶ͕ͳ͍ʢ4+ʣ
   ʢϦϦʔε։࢝ Ver 0.1 ͔Βݱߦ Ver 1.0.6 ࣌఺ͰɺϢʔβʔͷ೥ྸ૚΍ੑผͷ৘ใ͸ऩू͍ͯ͠ͳ͍ʣ
   

   View Slide

8. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
   ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ
   ●
   ○
   ●
   ●
   

   View Slide

9. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
   ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ
   ● iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ
   ○ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ
   ●
   ●
   

   View Slide

10. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    A consistent app implements familiar
    standards and paradigms by using
    system-provided interface elements,
    well-known icons, standard text styles,
    and uniform terminology.
    Consistency - Design Principles
    Themes - iOS - Human Interface Guidelines - Apple Developer
    

    View Slide

11. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ
    

    View Slide

12. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ
    

    View Slide

13. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ
    ● iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ
    ○ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ
    ● iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ
    ●
    

    View Slide

14. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    σβΠϯͷઌੜ - Apple Wallet (& ઃఆ)
    ‏ ೔ৗతʹΈΔ
    ը໘
    (Wallet)
    

    View Slide

15. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    σβΠϯͷઌੜ - Apple Wallet (& ઃఆ)
    ͋·Γ
    ݟͨ͜ͱ͕
    ͳ͍ը໘ ➡
    (ઃఆ)
    

    View Slide

16. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ
    ● ʮ೔ৗతʹΈΔը໘ʯʹ͸
    ʮ͋·Γݟͨ͜ͱ͕ͳ͍ը໘ʯͱ
    ൺ΂ͯϨΠΞ΢τσβΠϯʹগ͠
    ҧ͍Λ࣋ͨͤΔ
    ● Japan NFC Reader ͷը໘Λݟͤͳ͕Βɺ
    Ӻһ͞ΜʹϢʔβʔ͕໰͍߹ΘͤΔ͜ͱͷͳ͍Α͏
    or ໰͍߹Θͤͯ΋Ӻһ͞Μ͕ʮ͜Ε͸ҧ͏Αʯͱ
    ՄೳͳݶΓ൑அͰ͖ΔΑ͏ʹ
    

    View Slide

17. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ
    ● ʮཤྺ(ΧʔυҰཡ)ʯͰ
    Apple Wallet ͱಉ͡Α͏ʹ͢Δ
    σβΠϯҊ΋͋ͬͨ
    ● ͜Ε͸ʮApple Walletʯͳͷ͔ʁ
    ʮJapan NFC Readerʯͳͷ͔ʁ
    ͕ඇৗʹΘ͔ΓͮΒ͘ͳΔ
    ɹ‎ ෆ࠾༻
    

    View Slide

18. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ
    ● iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ
    ○ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ
    ● iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ
    ● ΞΫηγϏϦςΟରԠʢVoiceOverɺDynamic Typeɺ৭֮ಛੑʣ
    

    View Slide

19. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ΞΫηγϏϦςΟରԠ
    ● VoiceOver
    ○ දࣔ಺༰ʢϘλϯɺ࢒ߴɺར༻ཤྺͳͲʣͷಡΈ্͛
    ● Dynamic Type
    ○ จࣈΛଠ͘͢Δɺେ͖ͳจࣈ
    ● ͦͷଞ
    ○ ϘλϯͷܗɺΦϯ/Φϑϥϕϧɺ
    ಁ໌౓ΛԼ͛ΔɺίϯτϥετΛ্͛Δ
    ● ৭֮ಛੑ
    

    View Slide

20. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ΞΫηγϏϦςΟରԠ
    ● Dynamic Type
    ○ จࣈΛଠ͘͢Δɺେ͖ͳจࣈ
    ● Ϙλϯͷܗ
    ● Φϯ/Φϑϥϕϧ
    ● ಁ໌౓ΛԼ͛Δ
    ● ίϯτϥετΛ্͛Δ
    

    View Slide

21. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ରԠͯ͠Α͔ͬͨ
    21
    ෎தࢹ֮ো֐ऀ෱ࢱڠձ˒ϥδΦ൪૊ʰϒϥΠϯυɹφϏʱ์ૹதʂ
    @fuchu_shikyou
    Japan NFC Reader ిࢠϚωʔΧʔυΛiPhoneͰಡΈऔΓ
    japannfcreader.tret.jp
    ͪ͜Β͸εΩϟϯͷϘλϯ΋ϘΠεΦʔόʔͰʮεΩϟϯʯͱಡΈ্͛·͢ɻ
    ࢒ߴ͸΋ͪΖΜɺར༻ཤྺ΋͔ͬ͠ΓಡΈ্͛͠·͢ɻ
    εΠΧ΍ύε΋ͷ࢒ߴ֬ೝݟ͑ͳ͍ࣗ෼ʹ΋ศརʹͳΓ·͢(^^)
    QT: https://twitter.com/yasucom/status/1174959344900685824
    ޕޙ1:54ɾ2019೥9݄28೔ɾεΠʔτπΠʔτ
    

    View Slide

22. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ
    ● iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ
    ○ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ
    ● iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ
    ● ΞΫηγϏϦςΟରԠʢVoiceOverɺDynamic Typeɺ৭֮ಛੑʣ
    ʮStoryboard ʹΦϒδΣΫτΛద౰ʹஔ͚ͩ͘ʯ͸΍ΊΖ
    த్൒୺ʹͳΔ͘Β͍ͳΒඪ४ͷ UI Λ࢖͑
    

    View Slide

23. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ࠷΋ॏ͖Λஔ͘ػೳ͸આ໌ͳ͠Ͱ࢖͑ΔΑ͏ʹ͠Ζ
    ● Japan NFC Reader Ͱ࠷΋ॏཁͳػೳ͸ʮΧʔυͷεΩϟϯʯ
    ● ࢖͍͍ͨͱ͖ʹਝ଎ʹ࢒ߴΛ֬ೝͰ͖Δ͜ͱ͕ॏཁ
    

    View Slide

24. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ࠷΋ॏ͖Λஔ͘ػೳ͸આ໌ͳ͠Ͱ࢖͑ΔΑ͏ʹ͠Ζ
    ● Japan NFC Reader Ͱ
    ࠷΋ॏཁͳػೳ͸
    ʮΧʔυͷεΩϟϯʯ
    ● Ұ൪ॳΊʹදࣔ͞ΕΔը໘
    ͔ͭதԝʹʮεΩϟϯʯ
    ϘλϯΛ഑ஔ
    ● ͜ΕͰ΋࢖͍ํ͕Θ͔Βͳ͍ࣄྫ͋Γ
    

    View Slide

25. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    1ඵͰ΋ૣ͘࢒ߴΛݟ͍ͨ
    ● iOS ͷ NFC ͸ಡΈऔΓ࣌ʹ
    γεςϜUI͕ը໘Լ൒෼ΛຒΊΔ
    ● ʮ࢒ߴʯͷදࣔΛը໘্൒෼ʹ
    ͢Δ͜ͱͰγεςϜUIͷදࣔʹ
    ߅͏
    

    View Slide

26. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ঢ়ଶΛલճͱҡ࣋͠Ζ
    ● ҡ࣋͢΂͖ঢ়ଶ͕ͲΕͳͷ͔ΛݟۃΊͯอଘ͢Δ
    ● ʮཤྺʯͷʮελΠϧʯ
    ● Χʔυৄࡉը໘ͷʮར༻ཤྺʯͱʮ৘ใʯ
    

    View Slide

27. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    

    View Slide

28. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ͦͷଞ
    ● μʔΫϞʔυରԠ͠Ζɹಛʹ৽ن։ൃͳΒઈରʹରԠͯ͠
    ● ࣗ෼ͰϚδοΫφϯόʔʢఆ਺ʣΛఆٛ͢Δͳ
    ○ γεςϜͰ༻ҙ͞Ε͍ͯΔ΋ͷΛ࢖͑
    ○ ͦ΋ͦ΋ఆ਺Λ࢖͏ͳɹൺΛ࢖͑
    ● ߥ͍ը૾Λ࢖͏ͳ
    ○ ϕΫλʔը૾Λ࢖͑ɹͦ͏Ͱͳ͚Ε͹ dpi Λҙࣝͯ͠
    ○ Xcode 12 Ͱ͸ PDF ʹՃ͑ͯ SVG ͕࢖͑ΔΑ͏ʹͳΓ·ͨ͠
    ○ iOS & iPadOS 13 Ҏ߱ͷ Deployment Target Ͱ࢖͑·͢
    

    View Slide

29. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
    ऴΘΓʹ
    ● ݸਓ։ൃ͔ͩΒ ͜Μͳ͜ͱݴ͑ΔΜͩΖ͏ͳ͊…
    ● ຊݟղ͸ݸਓͷҙݟͰ͋Γɺ
    ಛఆͷਓ෺ɺஂମɺϓϩμΫτ౳ʹରͯ͠
    ड़΂͍ͯΔ΋ͷͰ͸͋Γ·ͤΜ
    

    View Slide