iOS標準UIワークショップ / iOS Default UI Workshop

社内で開催したアプリデザイン慣れてない人向けワークショップの抜粋資料です。
サンプルアプリのrepositoryはこちら
https://github.com/hirothings/iOS-DefaultUISampler

Transcript

1. iOSඪ४UIϫʔΫγϣοϓ @hirothings
2. ΞδΣϯμ • ඪ४UIͷఆٛ • ඪ४UIͷϝϦοτ • ඪ४UIΫΠζ • ඪ४ʹ౗͢UIͱڽΔUIͷόϥϯε • Xcodeʹ͍ͭͯ • XcodeͷσβΠϯπʔϧ • Interface Builder • ΦʔτϨΠΞ΢τ(࣮ԋ) • Asset Catalog • ࡞ͬͯΈΑ͏ • ࣮૷తʹخ͍͠σβΠϯ • ίϯϙʔωϯτ͕͋ΔͱԿ͕خ͍͠ͷ͔ • ϥοϓΞοϓ
3. ඪ४UIͷఆٛ
4. ඪ४UIͷఆٛ NavigationBar TextView WKInterfaceSwitch TableView Human Interface GuidelinesͰ ఆ͍ٛͯ͠ΔUIɾτϥϯδ γϣϯɾΠϯλϥΫγϣϯΛ ຊεϥΠυͰ͸ศ্ٓ ”ඪ४UI”ͱݺͿ͜ͱʹ͠·͢
5. ඪ४UIͷϝϦοτ 1. Ϣʔβʔ͕Ұ؏ͨ͠ૢ࡞ΛମݧͰ͖Δ 2. ͦͷ··࢖͏ͱ޻਺͕͔͔Βͳ͍ 3. OSͷΞοϓσʔτʹΑΔUIมߋʹ௥ਵͰ͖Δ 4. Light / Dark ModeରԠ͕༰қ
6. ิ଍: 1. Ϣʔβʔ͕Ұ؏ͨ͠ૢ࡞ΛମݧͰ͖Δ ɾλοϓͯ͠ਐΉ ɾεϫΠϓͯ͠໭Δ (ࢠͲ΋Ͱ΋ϥʔχϯάͯ͠ ૢ࡞Ͱ͖Δ)
7. ิ଍: 3. OSͷΞοϓσʔτʹΑΔUIมߋʹ௥ਵͰ͖Δ iOS12 iOS13 ྫ) UISegmentedControl ΋͠ࣅͨΑ͏ͳΧελϜUIΛ࡞͍ͬͯͨΒɺҰؾʹݹ͍͘͞ݟͨ໨ʹͳΔ Մೳੑ͕͋Δ
8. ิ଍: 4. Light / Dark ModeରԠ͕༰қ ̍ߦ΋ίʔυΛॻ͔ͳͯ͘΋ɺࣗಈͰରԠͯ͘͠ΕΔ
9. ඪ४UIΫΠζ
10. ͲΕ͕ඪ४UIʁ 1/2 (ඪ४ͩͱࢥ͏ਓ͸ڍख) ❶ ❷ ❸
11. ͲΕ͕ඪ४UIʁ 2/2 (ඪ४ͩͱࢥ͏ਓ͸ڍख) ❹ ❺ ❻
12. ౴͑߹Θͤ
13. ౴͑߹Θͤ 1/2 ❶ ❷ ❸ × iOSʹυϩοϓμ΢ϯϦετ ͸ඪ४UIʹ͸ͳ͍ × υϩϫʔϝχϡʔ͸ඪ४UIʹ ͸ͳ͍ ΧελϜϞʔμϧΛ࢖ͬͯ ࡞ͬͯΔ × tableViewͷstyle: Grouped͸ separatorͷࠨ୺ʹσϑΥϧ τͰ伱͕ؒ͋Δɻ BorderΛΧελϚΠζ͍ͯ͠ Δ͔ɺtableΆ͍ΧελϜ ϏϡʔΛ࡞͍ͬͯΔ
14. ❹ ❺ ❻ ౴͑߹Θͤ 2/2 × 6λϒҎ্ͷTabBar͸ඪ४ͩ ͱ࠷ޙͷλϒ͕5λϒ໨ʹ֨ ೲ͞ΕΔ × ͜ͷσβΠϯͷDate Picker͸ ඪ४UIʹ͸ͳ͍ ◦ ඪ४ͷDate Picker
15. ΫΠζͷҙਤ • ୺຤ͷύϑΥʔϚϯε͕޲্͠ɺΞϓϦʹٻΊΒΕΔཁ ݅ͷෳࡶ͕͞૿ͨ݁͠ՌɺUIͷෳࡶ͞΋૿͍ͯ͠Δ • ͩ͜ΘΓͷUIΛ൱ఆ͢ΔΘ͚Ͱ͸ͳ͍ɻApp StoreΞϓ ϦͳͲAppleۘ੡ΞϓϦͰ΋ΰϦΰϦʹΧελΠζͨ͠ UI͕ݟΒΕΔ • ͨͩɺԿ͕ඪ४ͳͷ͔஌͓ͬͯ͘͜ͱ͸ॏཁ
16. ิ଍: ڍಈ·Ͱඪ४͔Βҳ୤͢Δͱҧ࿨ײ͕͋Δ ԼʹεϫΠϓͯ͠Ϧϩʔυ͠Α͏ͱࢥͬͨΒ.. “Folio த్” Ͱݕࡧͯ͠Δͷ͸εϧʔ͍ͯͩ͘͠͞
17. ͔ͱݴͬͯɺඪ४UI͚ͩͰը໘Λ૊ Ήͱ؆ૉ͗ͯ͢ΠϚυΩັ͕ྃͳ͍
18. ඪ४ʹ౗͢UIͱڽΔUI ͷόϥϯε͕େࣄ • ΤϯδχΞʹؾΛ࢖͍͗ͯ͢ແ೉ͳUIΛ࡞Δ͜ͱ • શ͘ඪ४Λߟྀ͠ͳ͍ΞʔτͷΑ͏ͳUIΛ࡞Δ͜ͱ ͲͪΒ΋ྑ͘ͳ͍
19. ඪ४Λ஌ͬͨ͏͑ͰσβΠϯ͢Δͱ • ΤϯδχΞͱͷίϛϡχέʔγϣϯ͕ԁ׈ʹͳΔ • Human Interface Guidelineͷཧղ͸࠷௿ݶ • ࣭໰΢ΣϧΧϜͰ͢! • ͜͜͸౿Έࠐ΋͏ɺ͜͜͸͞Βͬͱྲྀͦ͏ͳͲόϥϯε ײ͕֮࢈·ΕΔ => ίϯτϩʔϥϒϧ
20. Xcodeͱ͸
21. Xcode • iOS(iPadOS)ΞϓϦͷIDE (౷߹։ൃ؀ڥ) • ςΩετΤσΟλ + ϓϨϏϡʔͳͲUI։ൃ͢Δ͏͑Ͱศརͳػ ೳ͕ἧ͍ͬͯΔ • Xcode10Ͱ΍ͬͱϚϧνΧʔιϧ͕࢖͑ΔΑ͏ʹͳͬͨΓͱɺ͓஡໨ͳͱ͜Ζ΋
22. UI։ൃΛαϙʔτ͢Δ XcodeͷσβΠϯπʔϧ
23. Interface Builder
24. Interface Builder
25. Interface Builder • GUIͰUIKitͷύʔπΛ഑ஔͯ͠ϨΠΞ΢τΛ૊ΊΔ • ը໘ભҠ • Auto Layout • ෳ਺୺຤Ͱͷදࣔ֬ೝ(ࢀߟఔ౓) • ੩తͰ͸ͳ͍ཁૉ͸ίʔυͰࢦఆ͢Δ͜ͱʹͳΔ
26. DEMO
27. ΦʔτϨΠΞ΢τ • ੍໿ϕʔεͷϨΠΞ΢τ • ༷ʑͳը໘αΠζʹରԠՄೳ SegmentedControllͷ੍໿ɿ ɾը໘ͷ্Լࠨӈͷதԝ UILabelͷ੍໿ɿ ɾը໘ͷࠨӈ͔Β16ptͷmargin ɾSegmentedControll͔Β16pt্ʹ഑ஔ
28. DEMO • Auto Layoutͷ࣮ફ • ෳ਺୺຤ͰϓϨϏϡʔ
29. (༨ஊ)ΦʔτϨΠΞ΢τΛ૊ΜͰΔΤϯδχ Ξ͕ԿΛߟྀ͍ͯ͠Δ͔ ͜͏͍ͬͨσβΠϯͷ৔߹
30. (༨ஊ)ΦʔτϨΠΞ΢τΛ૊ΜͰΔΤϯδχ Ξ͕ԿΛߟྀ͍ͯ͠Δ͔ ෳ਺୺຤ͰӾཡͰ͖ΔΑ͏ɺͲ͜ʹ੍໿Λ͚ͭΔ͔ ɾλΠτϧ͸্෦͔ΒݻఆҐஔʹ഑ஔ ɾը૾͔ΒϘλϯ·Ͱͷmargin͸ݻఆͤͣ୺຤αΠ ζͰՄม͢Δ͜ͱͰɺSEαΠζͷ୺຤Ͱ΋දࣔͰ͖ ΔΑ͏ʹ͢Δ ૢ࡞ੑΛߟྀͯ͠Ͳ͜ʹॏཁͳϘλϯΛஔ͔͘ Ϙλϯ͸ը໘Լ͔Βݻఆͯ͠ɺ୺຤αΠζ͕େ͖͘ ͯ΋ԡ͠΍͍͢Α͏ʹ͢Δ
31. (༨ஊ)ΦʔτϨΠΞ΢τΛ૊ΜͰΔΤϯδχ Ξ͕ԿΛߟྀ͍ͯ͠Δ͔ • σβΠϯఏڙ࣌ɺ੍໿ͷࢦఆΛ ͯ͘͠Εͯ΋ྑ͍͚Ͳɺϑϩϯ τΤϯυΤϯδχΞ͕ߟྀ͢΂ ͖ྖҬͩͱ΋ࢥ͏ • Figma΍Sketch͸੍໿ͷࢦఆ͕Մೳ
32. Asset Catalog
33. Asset Catalog • ΞϓϦ಺ͷΧϥʔύϨοτ΍ը૾ΛGUIͰ؅ཧ • Light / Darkͷࢦఆ΋Մೳ • ίʔυ͔Βར༻Ͱ͖Δ
34. ࡞ͬͯΈΑ͏ Ͱ͸..
35. ࡞ͬͯΈΑ͏ • ؆୯ͳΞϓϦΛ࡞Δ͜ͱͰɺཧղ͕͞Βʹਂ·Δ • ΤϯδχΞͷؾ࣋ͪνϣοτ෼͔Δ • XcodeͷσβΠϯπʔϧʹ͍ͭͯ஌Δ͜ͱ͕Ͱ͖Δ
36. 1͔Βʁ ԿΛͲ͏࡞ͬͨΒ͍͍ͷ͔෼͔Β ͳ͍
37. https://github.com/hirothings/iOS- DefaultUISampler
38. • iOSͷඪ४UIΛ·ͱΊͨ୯७ͳΞϓϦ • Interface BuilderͷઃఆΛม͑ͨΓUIΛஔ͍ͨΓͯ͠৮ͬ ͯΈ͍ͯͩ͘͞ • ৄ͘͠͸READMEࢀর iOS-DefaultUISampler
39. Runͯ͠Έ·͠ΐ͏ Cmd + R
40. ࣮૷తʹخ͍͠σβΠϯ
41. • ޮ཰తʹ࣮૷Ͱ͖Δ => ݁Ռతʹૣ͍ • ίʔυʹ΋டং͕ੜ·ΕΔ • ৭ͷఆٛ • UIύʔπ..etc • ΞϓϦશମͷmargin΋نଇੑ͕͋ͬͯཉ͍͠ • ը໘͝ͱʹNavigationBar͔Βͷmargin͕ϚνϚνͩͬͨΓ͢Δͱਏ͍ ίϯϙʔωϯτԽ
42. σβΠϯ ͜͏࣮૷Ͱ͖Δ͔Βخ͍͠ɻ ࣮૷ ৭ UI ※ύʔπͱͯ͠Ϋϥεʹ੾Γग़ͨ͠Primary Button Λ࢖͍·Θ͍ͯ͠Δ
43. iOSͷඪ४UIʹ͍ͭͯগ͠ཧղ͕ਂ·ͬͨ ͳͥඪ४UIΛ஌Δ͜ͱ͕େࣄͳͷ͔ཧղͰ͖ͨ XcodeͷσβΠϯπʔϧʹ͍ͭͯ೺ѲͰ͖ͨ UIΛ૊Ήͱ͖ʹΤϯδχΞ͕Ͳ͏͍͏͜ͱΛߟ͍͑ͯΔ ͔νϣοτ෼͔ͬͨ XcodeͰΞϓϦΛRunͰ͖ͨ ϥοϓΞοϓ