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

by hirothings

Slide 1

Slide 1 text

iOSඪ४UIϫʔΫγϣοϓ @hirothings

Slide 2

Slide 2 text

ΞδΣϯμ • ඪ४UIͷఆٛ • ඪ४UIͷϝϦοτ • ඪ४UIΫΠζ • ඪ४ʹ౗͢UIͱڽΔUIͷόϥϯε • Xcodeʹ͍ͭͯ • XcodeͷσβΠϯπʔϧ • Interface Builder • ΦʔτϨΠΞ΢τ(࣮ԋ) • Asset Catalog • ࡞ͬͯΈΑ͏ • ࣮૷తʹخ͍͠σβΠϯ • ίϯϙʔωϯτ͕͋ΔͱԿ͕خ͍͠ͷ͔ • ϥοϓΞοϓ

Slide 3

Slide 3 text

ඪ४UIͷఆٛ

Slide 4

Slide 4 text

ඪ४UIͷఆٛ NavigationBar TextView WKInterfaceSwitch TableView Human Interface GuidelinesͰ ఆ͍ٛͯ͠ΔUIɾτϥϯδ γϣϯɾΠϯλϥΫγϣϯΛ ຊεϥΠυͰ͸ศ্ٓ ”ඪ४UI”ͱݺͿ͜ͱʹ͠·͢

Slide 5

Slide 5 text

ඪ४UIͷϝϦοτ 1. Ϣʔβʔ͕Ұ؏ͨ͠ૢ࡞ΛମݧͰ͖Δ 2. ͦͷ··࢖͏ͱ޻਺͕͔͔Βͳ͍ 3. OSͷΞοϓσʔτʹΑΔUIมߋʹ௥ਵͰ͖Δ 4. Light / Dark ModeରԠ͕༰қ

Slide 6

Slide 6 text

ิ଍: 1. Ϣʔβʔ͕Ұ؏ͨ͠ૢ࡞ΛମݧͰ͖Δ ɾλοϓͯ͠ਐΉ ɾεϫΠϓͯ͠໭Δ (ࢠͲ΋Ͱ΋ϥʔχϯάͯ͠ ૢ࡞Ͱ͖Δ)

Slide 7

Slide 7 text

ิ଍: 3. OSͷΞοϓσʔτʹΑΔUIมߋʹ௥ਵͰ͖Δ iOS12 iOS13 ྫ) UISegmentedControl ΋͠ࣅͨΑ͏ͳΧελϜUIΛ࡞͍ͬͯͨΒɺҰؾʹݹ͍͘͞ݟͨ໨ʹͳΔ Մೳੑ͕͋Δ

Slide 8

Slide 8 text

ิ଍: 4. Light / Dark ModeରԠ͕༰қ ̍ߦ΋ίʔυΛॻ͔ͳͯ͘΋ɺࣗಈͰରԠͯ͘͠ΕΔ

Slide 9

Slide 9 text

ඪ४UIΫΠζ

Slide 10

Slide 10 text

ͲΕ͕ඪ४UIʁ 1/2 (ඪ४ͩͱࢥ͏ਓ͸ڍख) ❶ ❷ ❸

Slide 11

Slide 11 text

ͲΕ͕ඪ४UIʁ 2/2 (ඪ४ͩͱࢥ͏ਓ͸ڍख) ❹ ❺ ❻

Slide 12

Slide 12 text

౴͑߹Θͤ

Slide 13

Slide 13 text

౴͑߹Θͤ 1/2 ❶ ❷ ❸ × iOSʹυϩοϓμ΢ϯϦετ ͸ඪ४UIʹ͸ͳ͍ × υϩϫʔϝχϡʔ͸ඪ४UIʹ ͸ͳ͍ ΧελϜϞʔμϧΛ࢖ͬͯ ࡞ͬͯΔ × tableViewͷstyle: Grouped͸ separatorͷࠨ୺ʹσϑΥϧ τͰ伱͕ؒ͋Δɻ BorderΛΧελϚΠζ͍ͯ͠ Δ͔ɺtableΆ͍ΧελϜ ϏϡʔΛ࡞͍ͬͯΔ

Slide 14

Slide 14 text

❹ ❺ ❻ ౴͑߹Θͤ 2/2 × 6λϒҎ্ͷTabBar͸ඪ४ͩ ͱ࠷ޙͷλϒ͕5λϒ໨ʹ֨ ೲ͞ΕΔ × ͜ͷσβΠϯͷDate Picker͸ ඪ४UIʹ͸ͳ͍ ○ ඪ४ͷDate Picker

Slide 15

Slide 15 text

ΫΠζͷҙਤ • ୺຤ͷύϑΥʔϚϯε͕޲্͠ɺΞϓϦʹٻΊΒΕΔཁ ݅ͷෳࡶ͕͞૿ͨ݁͠ՌɺUIͷෳࡶ͞΋૿͍ͯ͠Δ • ͩ͜ΘΓͷUIΛ൱ఆ͢ΔΘ͚Ͱ͸ͳ͍ɻApp StoreΞϓ ϦͳͲAppleۘ੡ΞϓϦͰ΋ΰϦΰϦʹΧελΠζͨ͠ UI͕ݟΒΕΔ • ͨͩɺԿ͕ඪ४ͳͷ͔஌͓ͬͯ͘͜ͱ͸ॏཁ

Slide 16

Slide 16 text

ิ଍: ڍಈ·Ͱඪ४͔Βҳ୤͢Δͱҧ࿨ײ͕͋Δ ԼʹεϫΠϓͯ͠Ϧϩʔυ͠Α͏ͱࢥͬͨΒ.. “Folio த్” Ͱݕࡧͯ͠Δͷ͸εϧʔ͍ͯͩ͘͠͞

Slide 17

Slide 17 text

͔ͱݴͬͯɺඪ४UI͚ͩͰը໘Λ૊ Ήͱ؆ૉ͗ͯ͢ΠϚυΩັ͕ྃͳ͍

Slide 18

Slide 18 text

ඪ४ʹ౗͢UIͱڽΔUI ͷόϥϯε͕େࣄ • ΤϯδχΞʹؾΛ࢖͍͗ͯ͢ແ೉ͳUIΛ࡞Δ͜ͱ • શ͘ඪ४Λߟྀ͠ͳ͍ΞʔτͷΑ͏ͳUIΛ࡞Δ͜ͱ ͲͪΒ΋ྑ͘ͳ͍

Slide 19

Slide 19 text

ඪ४Λ஌ͬͨ͏͑ͰσβΠϯ͢Δͱ • ΤϯδχΞͱͷίϛϡχέʔγϣϯ͕ԁ׈ʹͳΔ • Human Interface Guidelineͷཧղ͸࠷௿ݶ • ࣭໰΢ΣϧΧϜͰ͢! • ͜͜͸౿Έࠐ΋͏ɺ͜͜͸͞Βͬͱྲྀͦ͏ͳͲόϥϯε ײ͕֮࢈·ΕΔ => ίϯτϩʔϥϒϧ

Slide 20

Slide 20 text

Xcodeͱ͸

Slide 21

Slide 21 text

Xcode • iOS(iPadOS)ΞϓϦͷIDE (౷߹։ൃ؀ڥ) • ςΩετΤσΟλ + ϓϨϏϡʔͳͲUI։ൃ͢Δ͏͑Ͱศརͳػ ೳ͕ἧ͍ͬͯΔ • Xcode10Ͱ΍ͬͱϚϧνΧʔιϧ͕࢖͑ΔΑ͏ʹͳͬͨΓͱɺ͓஡໨ͳͱ͜Ζ΋

Slide 22

Slide 22 text

UI։ൃΛαϙʔτ͢Δ XcodeͷσβΠϯπʔϧ

Slide 23

Slide 23 text

Interface Builder

Slide 24

Slide 24 text

Interface Builder

Slide 25

Slide 25 text

Interface Builder • GUIͰUIKitͷύʔπΛ഑ஔͯ͠ϨΠΞ΢τΛ૊ΊΔ • ը໘ભҠ • Auto Layout • ෳ਺୺຤Ͱͷදࣔ֬ೝ(ࢀߟఔ౓) • ੩తͰ͸ͳ͍ཁૉ͸ίʔυͰࢦఆ͢Δ͜ͱʹͳΔ

Slide 26

Slide 26 text

DEMO

Slide 27

Slide 27 text

ΦʔτϨΠΞ΢τ • ੍໿ϕʔεͷϨΠΞ΢τ • ༷ʑͳը໘αΠζʹରԠՄೳ SegmentedControllͷ੍໿ɿ ɾը໘ͷ্Լࠨӈͷதԝ UILabelͷ੍໿ɿ ɾը໘ͷࠨӈ͔Β16ptͷmargin ɾSegmentedControll͔Β16pt্ʹ഑ஔ

Slide 28

Slide 28 text

DEMO • Auto Layoutͷ࣮ફ • ෳ਺୺຤ͰϓϨϏϡʔ

Slide 29

Slide 29 text

(༨ஊ)ΦʔτϨΠΞ΢τΛ૊ΜͰΔΤϯδχ Ξ͕ԿΛߟྀ͍ͯ͠Δ͔ ͜͏͍ͬͨσβΠϯͷ৔߹

Slide 30

Slide 30 text

(༨ஊ)ΦʔτϨΠΞ΢τΛ૊ΜͰΔΤϯδχ Ξ͕ԿΛߟྀ͍ͯ͠Δ͔ ෳ਺୺຤ͰӾཡͰ͖ΔΑ͏ɺͲ͜ʹ੍໿Λ͚ͭΔ͔ ɾλΠτϧ͸্෦͔ΒݻఆҐஔʹ഑ஔ ɾը૾͔ΒϘλϯ·Ͱͷmargin͸ݻఆͤͣ୺຤αΠ ζͰՄม͢Δ͜ͱͰɺSEαΠζͷ୺຤Ͱ΋දࣔͰ͖ ΔΑ͏ʹ͢Δ ૢ࡞ੑΛߟྀͯ͠Ͳ͜ʹॏཁͳϘλϯΛஔ͔͘ Ϙλϯ͸ը໘Լ͔Βݻఆͯ͠ɺ୺຤αΠζ͕େ͖͘ ͯ΋ԡ͠΍͍͢Α͏ʹ͢Δ

Slide 31

Slide 31 text

(༨ஊ)ΦʔτϨΠΞ΢τΛ૊ΜͰΔΤϯδχ Ξ͕ԿΛߟྀ͍ͯ͠Δ͔ • σβΠϯఏڙ࣌ɺ੍໿ͷࢦఆΛ ͯ͘͠Εͯ΋ྑ͍͚Ͳɺϑϩϯ τΤϯυΤϯδχΞ͕ߟྀ͢΂ ͖ྖҬͩͱ΋ࢥ͏ • Figma΍Sketch͸੍໿ͷࢦఆ͕Մೳ

Slide 32

Slide 32 text

Asset Catalog

Slide 33

Slide 33 text

Asset Catalog • ΞϓϦ಺ͷΧϥʔύϨοτ΍ը૾ΛGUIͰ؅ཧ • Light / Darkͷࢦఆ΋Մೳ • ίʔυ͔Βར༻Ͱ͖Δ

Slide 34

Slide 34 text

࡞ͬͯΈΑ͏ Ͱ͸..

Slide 35

Slide 35 text

࡞ͬͯΈΑ͏ • ؆୯ͳΞϓϦΛ࡞Δ͜ͱͰɺཧղ͕͞Βʹਂ·Δ • ΤϯδχΞͷؾ࣋ͪνϣοτ෼͔Δ • XcodeͷσβΠϯπʔϧʹ͍ͭͯ஌Δ͜ͱ͕Ͱ͖Δ

Slide 36

Slide 36 text

1͔Βʁ ԿΛͲ͏࡞ͬͨΒ͍͍ͷ͔෼͔Β ͳ͍

Slide 37

Slide 37 text

https://github.com/hirothings/iOS- DefaultUISampler

Slide 38

Slide 38 text

• iOSͷඪ४UIΛ·ͱΊͨ୯७ͳΞϓϦ • Interface BuilderͷઃఆΛม͑ͨΓUIΛஔ͍ͨΓͯ͠৮ͬ ͯΈ͍ͯͩ͘͞ • ৄ͘͠͸READMEࢀর iOS-DefaultUISampler

Slide 39

Slide 39 text

Runͯ͠Έ·͠ΐ͏ Cmd + R

Slide 40

Slide 40 text

࣮૷తʹخ͍͠σβΠϯ

Slide 41

Slide 41 text

• ޮ཰తʹ࣮૷Ͱ͖Δ => ݁Ռతʹૣ͍ • ίʔυʹ΋டং͕ੜ·ΕΔ • ৭ͷఆٛ • UIύʔπ..etc • ΞϓϦશମͷmargin΋نଇੑ͕͋ͬͯཉ͍͠ • ը໘͝ͱʹNavigationBar͔Βͷmargin͕ϚνϚνͩͬͨΓ͢Δͱਏ͍ ίϯϙʔωϯτԽ

Slide 42

Slide 42 text

σβΠϯ ͜͏࣮૷Ͱ͖Δ͔Βخ͍͠ɻ ࣮૷ ৭ UI ※ύʔπͱͯ͠Ϋϥεʹ੾Γग़ͨ͠Primary Button Λ࢖͍·Θ͍ͯ͠Δ

Slide 43

Slide 43 text

iOSͷඪ४UIʹ͍ͭͯগ͠ཧղ͕ਂ·ͬͨ ͳͥඪ४UIΛ஌Δ͜ͱ͕େࣄͳͷ͔ཧղͰ͖ͨ XcodeͷσβΠϯπʔϧʹ͍ͭͯ೺ѲͰ͖ͨ UIΛ૊Ήͱ͖ʹΤϯδχΞ͕Ͳ͏͍͏͜ͱΛߟ͍͑ͯΔ ͔νϣοτ෼͔ͬͨ XcodeͰΞϓϦΛRunͰ͖ͨ ϥοϓΞοϓ