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
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ʯϦϦʔε
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
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
5. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ීஈ iPhone ΞϓϦΛ࢖͍ͬͯͯࢥ͏͜ͱ த్൒୺ʹͳΔ͘Β͍ͳΒඪ४ UI Λ࢖͑ νϡʔτϦΞϧͳ͠Ͱ࢖͑ΔΑ͏ʹ͠Ζ ϚδοΫφϯόʔΛ࢖͏ͳ WebView ΍Ίͯ͘Ε ߥ͍ը૾Λ࢖͏ͳ ঢ়ଶΛલճͱҡ࣋͠Ζ μʔΫϞʔυରԠ͠Ζ ͜ͷػೳΛಠࣗͰ࣮૷͢Δͳ Dynamic Type Λ࢖͑
6. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. Japan NFC Reader Ͱͷ UI σβΠϯ ʢUI : Ϣʔβʔ͕ը໘্Ͱೝࣝɾૢ࡞͢ΔϞϊɺͦΕͱͷ઀ଓ఺ʣ
7. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ૝ఆϢʔβʔ͸ iPhone Λ࢖͏࿝एஉঁ • ΩϟογϡϨεੜ׆ͷҰ෦Λߏ੒ • ର৅೥ྸʹ੍ݶ͕ͳ͍ʢ4+ʣ ʢϦϦʔε։࢝ Ver 0.1 ͔Βݱߦ Ver 1.0.6 ࣌఺ͰɺϢʔβʔͷ೥ྸ૚΍ੑผͷ৘ใ͸ऩू͍ͯ͠ͳ͍ʣ
8. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ • ◦ • •
9. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ • iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ ◦ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ • •
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
11. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ
12. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ
13. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ • iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ ◦ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ • iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ •
14. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. σβΠϯͷઌੜ - Apple Wallet (& ઃఆ) ‏ ೔ৗతʹΈΔ ը໘ (Wallet)
15. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. σβΠϯͷઌੜ - Apple Wallet (& ઃఆ) ͋·Γ ݟͨ͜ͱ͕ ͳ͍ը໘ ➡ (ઃఆ)
16. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ • ʮ೔ৗతʹΈΔը໘ʯʹ͸ ʮ͋·Γݟͨ͜ͱ͕ͳ͍ը໘ʯͱ ൺ΂ͯϨΠΞ΢τσβΠϯʹগ͠ ҧ͍Λ࣋ͨͤΔ • Japan NFC Reader ͷը໘Λݟͤͳ͕Βɺ Ӻһ͞ΜʹϢʔβʔ͕໰͍߹ΘͤΔ͜ͱͷͳ͍Α͏ or ໰͍߹Θͤͯ΋Ӻһ͞Μ͕ʮ͜Ε͸ҧ͏Αʯͱ ՄೳͳݶΓ൑அͰ͖ΔΑ͏ʹ
17. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ • ʮཤྺ(ΧʔυҰཡ)ʯͰ Apple Wallet ͱಉ͡Α͏ʹ͢Δ σβΠϯҊ΋͋ͬͨ • ͜Ε͸ʮApple Walletʯͳͷ͔ʁ ʮJapan NFC Readerʯͳͷ͔ʁ ͕ඇৗʹΘ͔ΓͮΒ͘ͳΔ ɹ‎ ෆ࠾༻
18. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ • iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ ◦ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ • iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ • ΞΫηγϏϦςΟରԠʢVoiceOverɺDynamic Typeɺ৭֮ಛੑʣ
19. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ΞΫηγϏϦςΟରԠ • VoiceOver ◦ දࣔ಺༰ʢϘλϯɺ࢒ߴɺར༻ཤྺͳͲʣͷಡΈ্͛ • Dynamic Type ◦ จࣈΛଠ͘͢Δɺେ͖ͳจࣈ • ͦͷଞ ◦ ϘλϯͷܗɺΦϯ/Φϑϥϕϧɺ ಁ໌౓ΛԼ͛ΔɺίϯτϥετΛ্͛Δ • ৭֮ಛੑ
20. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ΞΫηγϏϦςΟରԠ • Dynamic Type ◦ จࣈΛଠ͘͢Δɺେ͖ͳจࣈ • Ϙλϯͷܗ • Φϯ/Φϑϥϕϧ • ಁ໌౓ΛԼ͛Δ • ίϯτϥετΛ্͛Δ
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೔ɾεΠʔτπΠʔτ
22. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ʮͩΕͰ΋ʯ࢖͑ΔσβΠϯʹ͠Ζ • iOS ಺ଂΞϓϦʹ͍ۙσβΠϯ ◦ iPhone Ϣʔβʔ͕࠷΋਎ۙͳσβΠϯ͸ iOS ಺ଂΞϓϦ • iOS ಺ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ • ΞΫηγϏϦςΟରԠʢVoiceOverɺDynamic Typeɺ৭֮ಛੑʣ ʮStoryboard ʹΦϒδΣΫτΛద౰ʹஔ͚ͩ͘ʯ͸΍ΊΖ த్൒୺ʹͳΔ͘Β͍ͳΒඪ४ͷ UI Λ࢖͑
23. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ࠷΋ॏ͖Λஔ͘ػೳ͸આ໌ͳ͠Ͱ࢖͑ΔΑ͏ʹ͠Ζ • Japan NFC Reader Ͱ࠷΋ॏཁͳػೳ͸ʮΧʔυͷεΩϟϯʯ • ࢖͍͍ͨͱ͖ʹਝ଎ʹ࢒ߴΛ֬ೝͰ͖Δ͜ͱ͕ॏཁ
24. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ࠷΋ॏ͖Λஔ͘ػೳ͸આ໌ͳ͠Ͱ࢖͑ΔΑ͏ʹ͠Ζ • Japan NFC Reader Ͱ ࠷΋ॏཁͳػೳ͸ ʮΧʔυͷεΩϟϯʯ • Ұ൪ॳΊʹදࣔ͞ΕΔը໘ ͔ͭதԝʹʮεΩϟϯʯ ϘλϯΛ഑ஔ • ͜ΕͰ΋࢖͍ํ͕Θ͔Βͳ͍ࣄྫ͋Γ
25. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. 1ඵͰ΋ૣ͘࢒ߴΛݟ͍ͨ • iOS ͷ NFC ͸ಡΈऔΓ࣌ʹ γεςϜUI͕ը໘Լ൒෼ΛຒΊΔ • ʮ࢒ߴʯͷදࣔΛը໘্൒෼ʹ ͢Δ͜ͱͰγεςϜUIͷදࣔʹ ߅͏
26. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ঢ়ଶΛલճͱҡ࣋͠Ζ • ҡ࣋͢΂͖ঢ়ଶ͕ͲΕͳͷ͔ΛݟۃΊͯอଘ͢Δ • ʮཤྺʯͷʮελΠϧʯ • Χʔυৄࡉը໘ͷʮར༻ཤྺʯͱʮ৘ใʯ
27. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
28. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ͦͷଞ • μʔΫϞʔυରԠ͠Ζɹಛʹ৽ن։ൃͳΒઈରʹରԠͯ͠ • ࣗ෼ͰϚδοΫφϯόʔʢఆ਺ʣΛఆٛ͢Δͳ ◦ γεςϜͰ༻ҙ͞Ε͍ͯΔ΋ͷΛ࢖͑ ◦ ͦ΋ͦ΋ఆ਺Λ࢖͏ͳɹൺΛ࢖͑ • ߥ͍ը૾Λ࢖͏ͳ ◦ ϕΫλʔը૾Λ࢖͑ɹͦ͏Ͱͳ͚Ε͹ dpi Λҙࣝͯ͠ ◦ Xcode 12 Ͱ͸ PDF ʹՃ͑ͯ SVG ͕࢖͑ΔΑ͏ʹͳΓ·ͨ͠ ◦ iOS & iPadOS 13 Ҏ߱ͷ Deployment Target Ͱ࢖͑·͢
29. Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. ऴΘΓʹ • ݸਓ։ൃ͔ͩΒ ͜Μͳ͜ͱݴ͑ΔΜͩΖ͏ͳ͊… • ຊݟղ͸ݸਓͷҙݟͰ͋Γɺ ಛఆͷਓ෺ɺஂମɺϓϩμΫτ౳ʹରͯ͠ ड़΂͍ͯΔ΋ͷͰ͸͋Γ·ͤΜ