Goodpatch Engineer Meetup Vol.5 で登壇した際のスライドです。iOS Developerだった者がどのようにしてUIデザイナーとして取り組んでいったのか、Interface Architectの動き方や自己の紹介を兼ねながら、エンジニアリングの発想を活かすUI設計の観点を簡単にお話しいたしました。
https://goodpatch.connpass.com/event/156462/
© 2019 Satori Maru / @usagimaruma.OK%NKEM#gpengGoodpatch Engineer Meetup Vol.5OK OK
View Slide
© 2019 Satori Maru / @usagimaruma.ιϑτΣΞσβΠφʔʗΠϯλʔϑΣΠεΞʔΩςΫτݩiOS DeveloperInterface Design / Interaction Design / Information Architecture@usagimaru@usagimaruma@usagimaruInteraction Design / macOS / iOS / Sketch / Typography#gpengGoodpatch Engineer Meetup Vol.5usagimaru
© 2019 Satori Maru / @usagimaruma.Goodpatch UI Design Advent Calendar 2019#gpengGoodpatch Engineer Meetup Vol.5MacͱωΠςΟϒΠϯλʔϑΣΠεͱGUIͷݪཧʹؔ͢Δߟhttps://note.com/usagimaruma/n/n03bd95b99dfa
@usagimarumaΠϯλʔϑΣΠεσβΠϯͱͷ͖߹͍ํgoodpatch.connpass.com/event/156462/© 2019 Satori Maru / @usagimaruma.Goodpatch Engineer Meetup Vol.5#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.ʬϢʔβʔΠϯλʔϑΣΠεʭUser Interface#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma. ΠϝʔδɿSimulator.appInterface#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma. https://www.flickr.com/photos/24926669@N07/4205240306/Interface#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma. https://www.flickr.com/photos/pestoverde/17182400279Interface#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma. https://commons.wikimedia.org/wiki/File:Mesa_de_v%C3%ADdeo_1.JPGInterface#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.https://commons.wikimedia.org/wiki/File:Tobus_D-H245_2016-9-16.jpghttps://commons.wikimedia.org/wiki/File:Mercedes-Benz_Bus_O405N_ZOB_Hannover_Germany.jpgInterface#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.Interface#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.Inter-face#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.Inter-faceʬ໘ͱ໘ͷؒʭ#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.Ϣʔβʔͷੈք ରͷੈք࡞༻ ࡞༻User Interface#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.Ϣʔβʔͷੈք ରͷੈք૬ޓ࡞༻User InterfaceInteraction#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.Ϣʔβʔͷੈք ιϑτΣΞͷੈք૬ޓ࡞༻InteractionUser InterfaceInteraction#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.Interaction#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.Inter-actionʬޓ͍ʹ࡞༻͢Δ͜ͱʭ#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.5ϢʔβʔͷࢹͰ……ʁ
OK© 2019 Satori Maru / @usagimaruma.Interaction #gpengGoodpatch Engineer Meetup Vol.5ϘλϯΛԡͯ͠ΈΑ͏ͱߟ͑ΔϢʔβʔϢʔβʔͷࢥߟ
OK© 2019 Satori Maru / @usagimaruma.Interaction #gpengGoodpatch Engineer Meetup Vol.5ΧʔιϧΛϘλϯͷ্ʹҠಈ͢ΔϢʔβʔϢʔβʔͷࢥߟ
© 2019 Satori Maru / @usagimaruma.Interaction #gpengGoodpatch Engineer Meetup Vol.5OK%NKEMϘλϯΛΫϦοΫ͢ΔϢʔβʔϢʔβʔͷࢥߟ
© 2019 Satori Maru / @usagimaruma.Interaction #gpengGoodpatch Engineer Meetup Vol.5OKϘλϯΛΫϦοΫ͢ΔϢʔβʔϢʔβʔͷࢥߟ
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.5ઃܭऀͷࢹͰ……ʁ
OK© 2019 Satori Maru / @usagimaruma.㖝闃闳猳Ϙλϯ ϓογϡϘλϯͰ͋Δ͜ͱΛΞϐʔϧϘλϯΛࢹೝͯ͠ɺ࣍ͷߦಈΛݕ౼ϢʔβʔInteraction #gpengGoodpatch Engineer Meetup Vol.5࡞༻ͱڍಈͷղ
© 2019 Satori Maru / @usagimaruma.Interaction㖝闃闒閬闰猳OKϘλϯ ඇ׆ੑͰ͋Δ͜ͱΛΞϐʔϧϘλϯΛࢹೝͯ͠ɺԡͤͳ͍ͱஅϢʔβʔ#gpengGoodpatch Engineer Meetup Vol.5࡞༻ͱڍಈͷղ
OK© 2019 Satori Maru / @usagimaruma.ΧʔιϧΛૢ࡞ͯ͠ඪʢϘλϯʣΛϙΠϯςΟϯάϢʔβʔϘλϯ –Interaction #gpengGoodpatch Engineer Meetup Vol.5࡞༻ͱڍಈͷղ
© 2019 Satori Maru / @usagimaruma.OK%NKEMඪʢϘλϯʣͷ্ͰϚεϘλϯΛԡԼϢʔβʔϘλϯ ԡԼͷ࡞༻ʹԠͯ͠ݟͨΛมԽInteraction #gpengGoodpatch Engineer Meetup Vol.5࡞༻ͱڍಈͷղ
© 2019 Satori Maru / @usagimaruma.OKϚεϘλϯ͔ΒࢦΛͯ͠ΫϦοΫϑΣʔζΛऴ͑ΔϢʔβʔϘλϯ ԡ͠ࠐΈղআʹԠͯ͠ݟͨΛมԽInteraction #gpengGoodpatch Engineer Meetup Vol.5࡞༻ͱڍಈͷղ
© 2019 Satori Maru / @usagimaruma.OKOKOKOKdraw()mouseEntered()mouseDown()mouseUp().isEnabled= falseʪϘλϯΛΫϦοΫ͢Δ͜ͱʫNormalNormalHighlightedNormalDisabledڍಈঢ়ଶը໘–ϙΠϯςΟϯάϚεμϯϚεΞοϓ–࡞༻ʢΠϕϯτʣΫϦỽΫOKҙࣝ͢ΔϘλϯͷૢ࡞ํ๏⍾ϙΠϯςỹϯάỨͱủΫϦỽΫỨͷΈỐ#gpengGoodpatch Engineer Meetup Vol.5Ϣʔβʔ
© 2019 Satori Maru / @usagimaruma.OKOKOKOKdraw()mouseEntered()mouseDown()mouseUp().isEnabled= falseNormalNormalHighlightedNormalDisabledڍಈঢ়ଶը໘–ϙΠϯςΟϯάϚεμϯϚεΞοϓ–࡞༻ʢΠϕϯτʣOK͋ΒΏΔঢ়ଶڍಈʹର͢Δదͳϓϩάϥϛϯά͕ඞཁỐ࡞༻ʹରͯ͠ԠΛͲ͏ฦ͢ͷ͔ύλʔϯΛઃܭ͢ΔỐ#gpengGoodpatch Engineer Meetup Vol.5ʪϘλϯΛΫϦοΫ͢Δ͜ͱʫγεςϜ
© 2019 Satori Maru / @usagimaruma.OKOKOKOKdraw()mouseEntered()mouseDown()mouseUp().isEnabled= falseNormalNormalHighlightedNormalDisabledڍಈঢ়ଶը໘–ϙΠϯςΟϯάϚεμϯϚεΞοϓ–࡞༻ʢΠϕϯτʣOK͋ΒΏΔঢ়ଶڍಈʹର͢Δదͳϓϩάϥϛϯά͕ඞཁỐ࡞༻ʹରͯ͠ԠΛͲ͏ฦ͢ͷ͔ύλʔϯΛઃܭ͢ΔỐΠϯλϥΫγϣϯςΫχοΫ #gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma. IBM “Designing for the User with OVID” (1998) ΑΓղऍਓؒͷײ֮ʹؔΘΔઃܭΠϯλϥΫγϣϯςΫχοΫΛۦͨ͠ઃܭΦϒδΣΫτϞσϧͷઃܭΦϒδΣΫτͷ۩ମతͳݟ͑ํΦϒδΣΫτͱϢʔβͷରํ๏ιϑτΣΞσβΠϯͷओཁͳ3ͭͷ؍ΠϯλϥΫγϣϯΦϒδΣΫτϞσϧࢹ֮දݱ10%30%60%#gpengGoodpatch Engineer Meetup Vol.5ΠϯλϑΣʔεΦϒδΣΫτͷߏ
© 2019 Satori Maru / @usagimaruma. IBM “Designing for the User with OVID” (1998) ΑΓղऍਓؒͷײ֮ʹؔΘΔઃܭΠϯλϥΫγϣϯςΫχοΫΛۦͨ͠ઃܭΦϒδΣΫτϞσϧͷઃܭΦϒδΣΫτͷ۩ମతͳݟ͑ํΦϒδΣΫτͱϢʔβͷରํ๏ιϑτΣΞσβΠϯͷओཁͳ3ͭͷ؍ΠϯλϥΫγϣϯΦϒδΣΫτϞσϧࢹ֮දݱ10%30%60%OKOKOK#gpengGoodpatch Engineer Meetup Vol.5ΠϯλϑΣʔεΦϒδΣΫτͷߏ
© 2019 Satori Maru / @usagimaruma. IBM “Designing for the User with OVID” (1998) ΑΓղऍΦϒδΣΫτϞσϧࢹ֮දݱ10%60%ਓؒͷײ֮ʹؔΘΔઃܭΠϯλϥΫγϣϯςΫχοΫΛۦͨ͠ઃܭΦϒδΣΫτϞσϧͷઃܭΦϒδΣΫτͷ۩ମతͳݟ͑ํΦϒδΣΫτͱϢʔβͷରํ๏ιϑτΣΞσβΠϯͷओཁͳ3ͭͷ؍ΠϯλϥΫγϣϯ30%OK#gpengGoodpatch Engineer Meetup Vol.5ΠϯλϑΣʔεΦϒδΣΫτͷߏ
© 2019 Satori Maru / @usagimaruma. IBM “Designing for the User with OVID” (1998) ΑΓղऍਓؒͷײ֮ʹؔΘΔઃܭΠϯλϥΫγϣϯςΫχοΫΛۦͨ͠ઃܭΦϒδΣΫτϞσϧͷઃܭΦϒδΣΫτͷ۩ମతͳݟ͑ํΦϒδΣΫτͱϢʔβͷରํ๏ΠϯλϑΣʔεΦϒδΣΫτͷߏιϑτΣΞσβΠϯͷओཁͳ3ͭͷ؍ΠϯλϥΫγϣϯΦϒδΣΫτϞσϧࢹ֮දݱ10%30%60%#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.ʬΞʔΩςΫνϟʭArchitecture#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.ʬΠϯλʔϑΣΠεΞʔΩςΫνϟʭInterface Architecture#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.Interface ArchitectureʬΠϯλʔϑΣΠεΞʔΩςΫνϟʭ#gpengGoodpatch Engineer Meetup Vol.5lΠϯλʔϑΣΠεͷߏɺؔΘΔ֓೦ɺσβΠφʔͷઃܭࢥɺϢʔεέʔεɺͦΕΒΛج൫ͱͨ͠ใઃܭϞσϦϯάʹΑΓܗ࡞ΒΕ·͢ɻ6*ͱͯ͠ػೳͤ͞ΔͨΊʹɺదͳΠϯλϥΫγϣϯٕज़Λ༻͍ͯೖग़ྗͷΈΛઃܭ͠ɺਖ਼͘͠ର͕ߦΘΕΔڥʹཱͯΔ͜ͱ͕ॏཁͰ͢ɻz
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.5Ϋϥε Πϯελϯε
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.5ࣸਅϓϩύςΟ ܕ ଟॏըૉ 1ࡱӨ࣌ 1ࡱӨػࡐ 0..1ࡱӨॴ 0..1ΞΫηεݖ 1ॴଐΞϧόϜ ʪΞϧόϜʫ 0..nλά ʪλάʫ 0..nΞϧόϜϓϩύςΟ ܕ ଟॏΞϧόϜ໊ 1ࣸਅ 1ࣸਅҰཡ ʪࣸਅʫ 0..nλάҰཡ ʪλάʫ 0..nλάϓϩύςΟ ܕ ଟॏλά໊ 1࡞࣌ 1ⱖ溪♧鋮ةؚ䨽㾩،ٕغيةؚ♧鋮UIΫϥεਤUMLͷΫϥεਤΛϕʔεʹͨ͠ɺUIͷϞσϦϯάݴޠɻ※ࣸਅΞϓϦέʔγϣϯͷUIߏ
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.5ΠϯελϯεͷଟॏZero One Infinity ϧʔϧ
© 2019 Satori Maru / @usagimaruma.0 1 ∞ιϑτΣΞͰద༻͞ΕΔ੍ɺ0ŋ1ŋແݶେ ͰදͤΔΛجຊͱ͢ΔZero One Infinity ϧʔϧ۩ମతͳɺແݶେʹରͯ͠ޙ͔Βద༻͢Δɻ#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.50..4iOS Dock:2..nmacOS Dock:ϑΥʔϜϑΝΫλʹΑΔ੍ΠϝʔδɿiOS, macOS
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.50..nApps:ՄೳͳݶΓແݶݸΛڐ༰ΠϝʔδɿiOS
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.51..31..nදݱ߹ͷ੍ΠϝʔδɿiOS
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.5πϦʔ ηϛϥςΟε
© 2019 Satori Maru / @usagimaruma.͕1ɺࢠ͕ෳϑΥϧμ10..nϑΝΠϧϑΝΠϧ͔ΒݟͯɺϑΥϧμඞͣ1ϑΥϧμ͔ΒݟͯɺϑΝΠϧ0..nཁૉҰͭͷάϧʔϓʹͷΈॴଐͰ͖ΔɻάϧʔϓෳͷཁૉΛแׅ͢ΔɻπϦʔߏ #gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.ΞϧόϜ0..nࣸਅ0..nཁૉෳͷάϧʔϓʹॴଐͰ͖ΔɻάϧʔϓෳͷཁૉΛแׅ͢ΔɻηϛϥςΟεߏ #gpengGoodpatch Engineer Meetup Vol.5ࣸਅ͔ΒݟͯɺΞϧόϜ0..nΞϧόϜ͔Βݟͯɺࣸਅ0..n͕ෳɺࢠ͕ෳ
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.5OOUI
© 2019 Satori Maru / @usagimaruma.ΦϒδΣΫτ ΞΫγϣϯ࣮ߦ͢Δબ͔ͯ͠Β…#gpengGoodpatch Engineer Meetup Vol.5ΠϯλϥΫγϣϯʹ͓͚Δʮ໊ࢺ → ಈࢺʯߏจ
© 2019 Satori Maru / @usagimaruma.cralus.moof()object methodΦϒδΣΫτ ΞΫγϣϯFocusʹViewʹMessageϑΥʔΧεͷ͋ΔΦϒδΣΫτʹϝοηʔδΛૹ৴#gpengGoodpatch Engineer Meetup Vol.5࣮ߦ͢Δબ͔ͯ͠Β…ΠϯλϥΫγϣϯʹ͓͚Δʮ໊ࢺ → ಈࢺʯߏจ
© 2019 Satori Maru / @usagimaruma.ίϚϯυϝχϡʔόʔϑΥʔΧεϑΝΠϧίϚϯυίϯςΫετϝχϡʔϑΥʔΧεϑΝΠϧʪϝχϡʔʫϑΥʔΧεͷͨͬͨΦϒδΣΫτʹରͯ͠༗ޮͳίϚϯυͷஔ͖#gpengGoodpatch Engineer Meetup Vol.5ΠϝʔδɿmacOS
© 2019 Satori Maru / @usagimaruma.ʪπʔϧόʔʫϑΥʔΧεͷͨͬͨΦϒδΣΫτʹରͯ͠༗ޮͳίϚϯυͷஔ͖ίϚϯυπʔϧόʔϑΥʔΧεߦʗϑΝΠϧϑΥʔΧεΠϯυ#gpengGoodpatch Engineer Meetup Vol.5ΠϝʔδɿmacOS
© 2019 Satori Maru / @usagimaruma.#gpengGoodpatch Engineer Meetup Vol.5UIΫϥεਤଟॏΠϯελϯεOOUIπϦʔ ηϛϥςΟεΫϥεϞʔυϨε Ϟʔμϧ Zero One Infinity ϧʔϧ֓೦ϞσϧυϝΠϯ ϢϏΩλεݴޠࢀর ൚ԽදݱϞσϧ࣮Ϟσϧ ϞσϧUX ϢʔβϏϦςΟ ΠϯλϥΫγϣϯ
© 2019 Satori Maru / @usagimaruma.l(6*ͷߏઃܭύλʔϯɺγεςϜͷΈʹਫ਼௨͓ͯ͠ΓɺΞʔΩςΫνϟͷઃܭʹΛ࣋ͭʮ6*σβΠφʔʯͷҰछͰ͢ɻ(6*ʹؔ͢Δ֓೦ɾઃܭࢥͷఆٛɺυϝΠϯϞσϧͷઃܭɺใઃܭɺ006*ϞσϦϯάɺΠϯλϥΫγϣϯઃܭΛத৺ʹɺιϑτΣΞͷl֦ுੑzΛߟྀ͠ͳ͕ΒσβΠϯʹऔΓΈ·͢ɻz6*σβΠϯʹ͓͚ΔΠϯλʔϑΣΠεΞʔΩςΫτͷׂIUUQTHPPEQBUDIDPNCMPHVJJOUFSGBDFBSDIJUFDUInterface ArchitectʬΠϯλʔϑΣΠεΞʔΩςΫτʭ#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.UIσβΠϯʹ͓͚ΔΠϯλʔϑΣΠεΞʔΩςΫτͷׂhttps://goodpatch.com/blog/ui-interface-architect/#gpengGoodpatch Engineer Meetup Vol.5
© 2019 Satori Maru / @usagimaruma.#gpeng