Japan NFC Reader での UI デザイン @treastrain | @JapanNFCReader
NEW DEBUG!! #2.0 ~魔王を倒すために異世界転生しましたがバグが発生したので修正します~ @ CASPUR 2020/08/01 22:00~
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.Japan NFC Reader Ͱͷ UI σβΠϯ@treastrain | @JapanNFCReaderNEW DEBUG!! #2.0 ~ຐԦΛͨ͢Ίʹҟੈքసੜ͠·͕ͨ͠όά͕ൃੜͨ͠ͷͰमਖ਼͠·͢~ @ CASPUR August 1, 2020
View Slide
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved. 2ࣗݾհ @treastrain / Tanaka Ryogahttps://treastrain.jpߴઐଔ → େֶֶ෦4 → 21৽ଔ༧ఆSwift (iOS, watchOS), Core NFC20199݄22 iOSɾwatchOS AppʮJapan NFC ReaderʯϦϦʔε
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.Japan NFC ReaderiOS 13.0 Ҏ߱ͷ iPhone ͰిࢠϚωʔͷߴɾར༻ཤྺͷಡΈऔΓ20199݄ ৴։࢝20207݄ 235K (Ϣχοτ)https://japannfcreader.tret.jp/Twitter @JapanNFCReader3iOS App
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.treastrain/TRETJapanNFCReaderhttps://github.com/treastrain/TRETJapanNFCReaderJapan NFC Reader ͷίΞ෦Λ OSS Խͨ͠ϥΠϒϥϦ MIT LicenceInitial commit: 20196݄19ɹ289 Stars 20208݄1࣌v2.0-develop ʹͯϑϧεΫϥονத…4OSS Library
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ීஈ iPhone ΞϓϦΛ͍ͬͯͯࢥ͏͜ͱத్ʹͳΔ͘Β͍ͳΒඪ४ UI Λ͑νϡʔτϦΞϧͳ͠Ͱ͑ΔΑ͏ʹ͠ΖϚδοΫφϯόʔΛ͏ͳWebView Ίͯ͘Εߥ͍ը૾Λ͏ͳঢ়ଶΛલճͱҡ࣋͠ΖμʔΫϞʔυରԠ͠Ζ͜ͷػೳΛಠࣗͰ࣮͢ΔͳDynamic Type Λ͑
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.Japan NFC Reader Ͱͷ UI σβΠϯʢUI : Ϣʔβʔ͕ը໘্Ͱೝࣝɾૢ࡞͢ΔϞϊɺͦΕͱͷଓʣ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ఆϢʔβʔ iPhone Λ͏एஉঁ● ΩϟογϡϨεੜ׆ͷҰ෦Λߏ● ରྸʹ੍ݶ͕ͳ͍ʢ4+ʣʢϦϦʔε։࢝ Ver 0.1 ͔Βݱߦ Ver 1.0.6 ࣌ͰɺϢʔβʔͷྸੑผͷใऩू͍ͯ͠ͳ͍ʣ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ʮͩΕͰʯ͑ΔσβΠϯʹ͠Ζ●○●●
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ʮͩΕͰʯ͑ΔσβΠϯʹ͠Ζ● iOS ଂΞϓϦʹ͍ۙσβΠϯ○ iPhone Ϣʔβʔ͕࠷ۙͳσβΠϯ iOS ଂΞϓϦ●●
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.A consistent app implements familiarstandards and paradigms by usingsystem-provided interface elements,well-known icons, standard text styles,and uniform terminology.Consistency - Design PrinciplesThemes - iOS - Human Interface Guidelines - Apple Developer
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.iOS ଂΞϓϦʹ͍ۙσβΠϯ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ʮͩΕͰʯ͑ΔσβΠϯʹ͠Ζ● iOS ଂΞϓϦʹ͍ۙσβΠϯ○ iPhone Ϣʔβʔ͕࠷ۙͳσβΠϯ iOS ଂΞϓϦ● iOS ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ●
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.σβΠϯͷઌੜ - Apple Wallet (& ઃఆ) ৗతʹΈΔը໘(Wallet)
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.σβΠϯͷઌੜ - Apple Wallet (& ઃఆ)͋·Γݟͨ͜ͱ͕ͳ͍ը໘ ➡(ઃఆ)
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.iOS ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ● ʮৗతʹΈΔը໘ʯʹʮ͋·Γݟͨ͜ͱ͕ͳ͍ը໘ʯͱൺͯϨΠΞτσβΠϯʹগ͠ҧ͍Λ࣋ͨͤΔ ● Japan NFC Reader ͷը໘Λݟͤͳ͕ΒɺӺһ͞ΜʹϢʔβʔ͕͍߹ΘͤΔ͜ͱͷͳ͍Α͏or ͍߹ΘͤͯӺһ͞Μ͕ʮ͜Εҧ͏ΑʯͱՄೳͳݶΓஅͰ͖ΔΑ͏ʹ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.iOS ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ● ʮཤྺ(ΧʔυҰཡ)ʯͰApple Wallet ͱಉ͡Α͏ʹ͢ΔσβΠϯҊ͋ͬͨ● ͜ΕʮApple Walletʯͳͷ͔ʁʮJapan NFC Readerʯͳͷ͔ʁ͕ඇৗʹΘ͔ΓͮΒ͘ͳΔɹ ෆ࠾༻
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ʮͩΕͰʯ͑ΔσβΠϯʹ͠Ζ● iOS ଂΞϓϦʹ͍ۙσβΠϯ○ iPhone Ϣʔβʔ͕࠷ۙͳσβΠϯ iOS ଂΞϓϦ● iOS ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ● ΞΫηγϏϦςΟରԠʢVoiceOverɺDynamic Typeɺ৭֮ಛੑʣ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ΞΫηγϏϦςΟରԠ● VoiceOver○ දࣔ༰ʢϘλϯɺߴɺར༻ཤྺͳͲʣͷಡΈ্͛● Dynamic Type○ จࣈΛଠ͘͢Δɺେ͖ͳจࣈ● ͦͷଞ○ ϘλϯͷܗɺΦϯ/Φϑϥϕϧɺಁ໌ΛԼ͛ΔɺίϯτϥετΛ্͛Δ● ৭֮ಛੑ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ΞΫηγϏϦςΟରԠ● Dynamic Type○ จࣈΛଠ͘͢Δɺେ͖ͳจࣈ● Ϙλϯͷܗ● Φϯ/Φϑϥϕϧ● ಁ໌ΛԼ͛Δ● ίϯτϥετΛ্͛Δ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ରԠͯ͠Α͔ͬͨ 21தࢹ֮োऀࢱڠձ˒ϥδΦ൪ʰϒϥΠϯυɹφϏʱ์ૹதʂ @fuchu_shikyouJapan NFC Reader ిࢠϚωʔΧʔυΛiPhoneͰಡΈऔΓjapannfcreader.tret.jpͪ͜ΒεΩϟϯͷϘλϯϘΠεΦʔόʔͰʮεΩϟϯʯͱಡΈ্͛·͢ɻߴͪΖΜɺར༻ཤྺ͔ͬ͠ΓಡΈ্͛͠·͢ɻεΠΧύεͷߴ֬ೝݟ͑ͳ͍ࣗʹศརʹͳΓ·͢(^^)QT: https://twitter.com/yasucom/status/1174959344900685824ޕޙ1:54ɾ20199݄28ɾεΠʔτπΠʔτ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ʮͩΕͰʯ͑ΔσβΠϯʹ͠Ζ● iOS ଂΞϓϦʹ͍ۙσβΠϯ○ iPhone Ϣʔβʔ͕࠷ۙͳσβΠϯ iOS ଂΞϓϦ● iOS ଂΞϓϦͱࠞಉ͠ͳ͍σβΠϯ● ΞΫηγϏϦςΟରԠʢVoiceOverɺDynamic Typeɺ৭֮ಛੑʣʮStoryboard ʹΦϒδΣΫτΛదʹஔ͚ͩ͘ʯΊΖத్ʹͳΔ͘Β͍ͳΒඪ४ͷ UI Λ͑
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.࠷ॏ͖Λஔ͘ػೳઆ໌ͳ͠Ͱ͑ΔΑ͏ʹ͠Ζ● Japan NFC Reader Ͱ࠷ॏཁͳػೳʮΧʔυͷεΩϟϯʯ● ͍͍ͨͱ͖ʹਝʹߴΛ֬ೝͰ͖Δ͜ͱ͕ॏཁ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.࠷ॏ͖Λஔ͘ػೳઆ໌ͳ͠Ͱ͑ΔΑ͏ʹ͠Ζ● Japan NFC Reader Ͱ࠷ॏཁͳػೳʮΧʔυͷεΩϟϯʯ● Ұ൪ॳΊʹදࣔ͞ΕΔը໘͔ͭதԝʹʮεΩϟϯʯϘλϯΛஔ● ͜ΕͰ͍ํ͕Θ͔Βͳ͍ࣄྫ͋Γ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.1ඵͰૣ͘ߴΛݟ͍ͨ● iOS ͷ NFC ಡΈऔΓ࣌ʹγεςϜUI͕ը໘ԼΛຒΊΔ● ʮߴʯͷදࣔΛը໘্ʹ͢Δ͜ͱͰγεςϜUIͷදࣔʹ߅͏
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ঢ়ଶΛલճͱҡ࣋͠Ζ● ҡ͖࣋͢ঢ়ଶ͕ͲΕͳͷ͔ΛݟۃΊͯอଘ͢Δ● ʮཤྺʯͷʮελΠϧʯ● Χʔυৄࡉը໘ͷʮར༻ཤྺʯͱʮใʯ
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ͦͷଞ● μʔΫϞʔυରԠ͠Ζɹಛʹ৽ن։ൃͳΒઈରʹରԠͯ͠● ࣗͰϚδοΫφϯόʔʢఆʣΛఆٛ͢Δͳ○ γεςϜͰ༻ҙ͞Ε͍ͯΔͷΛ͑○ ͦͦఆΛ͏ͳɹൺΛ͑● ߥ͍ը૾Λ͏ͳ○ ϕΫλʔը૾Λ͑ɹͦ͏Ͱͳ͚Ε dpi Λҙࣝͯ͠○ Xcode 12 Ͱ PDF ʹՃ͑ͯ SVG ͕͑ΔΑ͏ʹͳΓ·ͨ͠○ iOS & iPadOS 13 Ҏ߱ͷ Deployment Target Ͱ͑·͢
Copyright © 2020 treastrain / Tanaka RyogaɹAll rights reserved.ऴΘΓʹ● ݸਓ։ൃ͔ͩΒ ͜Μͳ͜ͱݴ͑ΔΜͩΖ͏ͳ͊…● ຊݟղݸਓͷҙݟͰ͋ΓɺಛఆͷਓɺஂମɺϓϩμΫτʹରͯ͠ड़͍ͯΔͷͰ͋Γ·ͤΜ