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

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

hirothings
October 31, 2019

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

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

hirothings

October 31, 2019
Tweet

More Decks by hirothings

Other Decks in Design

Transcript

  1. ΞδΣϯμ • ඪ४UIͷఆٛ • ඪ४UIͷϝϦοτ • ඪ४UIΫΠζ • ඪ४ʹ౗͢UIͱڽΔUIͷόϥϯε •

    Xcodeʹ͍ͭͯ • XcodeͷσβΠϯπʔϧ • Interface Builder • ΦʔτϨΠΞ΢τ(࣮ԋ) • Asset Catalog • ࡞ͬͯΈΑ͏ • ࣮૷తʹخ͍͠σβΠϯ • ίϯϙʔωϯτ͕͋ΔͱԿ͕خ͍͠ͷ͔ • ϥοϓΞοϓ
  2. ౴͑߹Θͤ 1/2 ❶ ❷ ❸ × iOSʹυϩοϓμ΢ϯϦετ ͸ඪ४UIʹ͸ͳ͍ × υϩϫʔϝχϡʔ͸ඪ४UIʹ

    ͸ͳ͍ ΧελϜϞʔμϧΛ࢖ͬͯ ࡞ͬͯΔ × tableViewͷstyle: Grouped͸ separatorͷࠨ୺ʹσϑΥϧ τͰ伱͕ؒ͋Δɻ BorderΛΧελϚΠζ͍ͯ͠ Δ͔ɺtableΆ͍ΧελϜ ϏϡʔΛ࡞͍ͬͯΔ
  3. ❹ ❺ ❻ ౴͑߹Θͤ 2/2 × 6λϒҎ্ͷTabBar͸ඪ४ͩ ͱ࠷ޙͷλϒ͕5λϒ໨ʹ֨ ೲ͞ΕΔ ×

    ͜ͷσβΠϯͷDate Picker͸ ඪ४UIʹ͸ͳ͍ ◦ ඪ४ͷDate Picker
  4. Interface Builder • GUIͰUIKitͷύʔπΛ഑ஔͯ͠ϨΠΞ΢τΛ૊ΊΔ • ը໘ભҠ • Auto Layout •

    ෳ਺୺຤Ͱͷදࣔ֬ೝ(ࢀߟఔ౓) • ੩తͰ͸ͳ͍ཁૉ͸ίʔυͰࢦఆ͢Δ͜ͱʹͳΔ
  5. • ޮ཰తʹ࣮૷Ͱ͖Δ => ݁Ռతʹૣ͍ • ίʔυʹ΋டং͕ੜ·ΕΔ • ৭ͷఆٛ • UIύʔπ..etc

    • ΞϓϦશମͷmargin΋نଇੑ͕͋ͬͯཉ͍͠ • ը໘͝ͱʹNavigationBar͔Βͷmargin͕ϚνϚνͩͬͨΓ͢Δͱਏ͍ ίϯϙʔωϯτԽ