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

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

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~

treastrain / Tanaka Ryoga

August 01, 2020
Tweet

More Decks by treastrain / Tanaka Ryoga

Other Decks in Programming

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