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

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

C0c3e2b792a468590679e46b86e1784d?s=47 hirothings
October 31, 2019

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

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

C0c3e2b792a468590679e46b86e1784d?s=128

hirothings

October 31, 2019
Tweet

More Decks by hirothings

Other Decks in Design

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Ͱ͖ͨ ϥοϓΞοϓ