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

Pairsのデザインガイドラインを作って開発を効率化した話

 Pairsのデザインガイドラインを作って開発を効率化した話

futabooo

March 18, 2017
Tweet

More Decks by futabooo

Other Decks in Programming

Transcript

  1. 2 About me - Lead Engineer at eureka, Inc. -

    Java, Kotlin, Golang, TypeScript, AngularJS - FantasyEarth Zero, s.CRY.ed futabooo futabooo futaboooס׋ע٦
  2. 5 About eureka • Web • Golang, Gin • TypeScript,

    AngularJS • Android • Java, Kotlin • Dagger2, Orma, OkHttp3, Retrofit2, RxKotlin, Picasso, ButterKnife, DataBinding • iOS • Objective-C, Swift • CoreStore, Alamofire, Moya, RxSwift, AsyncDisplayKit • Web • PHP, Codeigniter • Android • Java • ActiveAndroid, Volley, OkHttp3, Retrofit2, Socket.IO, RxJava, Glide • iOS • Swift, Objective-C • CoreStore, AFNetworking, SwiftyJSON, SDWebImage, RxSwift, Cartography
  3. ‣ رؠ؎ٝؕٝف ˖ ٖ؎،ؐز ˖ و٦آٝծػر؍ؚٝ ˖ 俑㶵ך؟؎ؤծ葿 ˖ نةٝך؟؎ؤծ葿

    ˖ FUD ‣ 稆勞ך剅ֹ⳿׃ 9 σβΠφʔ͕σόΠεຖʹ༻ҙ͢Δ߲໨
  4. ‣ رؠ؎ٝؕٝف ˖ ٖ؎،ؐز ˖ و٦آٝծػر؍ؚٝ ˖ 俑㶵ך؟؎ؤծ葿 ˖ نةٝך؟؎ؤծ葿

    ˖ FUD ‣ 稆勞ך剅ֹ⳿׃ 10 σβΠφʔ͕σόΠεຖʹ༻ҙ͢Δ߲໨ × 4رغ؎أⴓ
  5. 13

  6. ‣ Ꟛ涪⚥ך؝ىُص؛٦ءّٝדرؠ؎ش٦٥ؒٝآص،ה׮ח气䒦ׅ׷ ˖ ぐرغ؎أדずׄ然钠ָⰅ׷ ˖ ⳿䨱׶ ‣ ٔٔ٦أ䖓חرغ؎أד䊴ⴓָ鋅אַ׷ ˖ ؝ىُص؛٦ءّٝ怩׸

    ˖ ״׃זחװ׏׋穠卓 ‣ ׅדח㶷㖈ׅ׷ػ٦خ׾⢪׻׆ח倜鋉ד⡲׏ג׃תֲ✲ָ֮׷ ˖ ⡂׋״ֲזؙٓأָ✉甧ׅ׷ 14 σβΠϯΨΠυϥΠϯ࡞੒લͷ໰୊
  7. ‣ Ꟛ涪⚥ך؝ىُص؛٦ءّٝדرؠ؎ش٦٥ؒٝآص،ה׮ח气䒦ׅ׷ ˖ ぐرغ؎أדずׄ然钠ָⰅ׷ ˖ ⳿䨱׶ ‣ ٔٔ٦أ䖓חرغ؎أד䊴ⴓָ鋅אַ׷ ˖ ؝ىُص؛٦ءّٝ怩׸

    ˖ ״׃זחװ׏׋穠卓 ‣ ׅדח㶷㖈ׅ׷ػ٦خ׾⢪׻׆ח倜鋉ד⡲׏ג׃תֲ✲ָ֮׷ ˖ ⡂׋״ֲזؙٓأָ✉甧ׅ׷ 15 σβΠϯΨΠυϥΠϯ࡞੒લͷ໰୊
  8. ‣ Ꟛ涪⚥ך؝ىُص؛٦ءّٝדرؠ؎ش٦٥ؒٝآص،ה׮ח气䒦ׅ׷ ˖ ぐرغ؎أדずׄ然钠ָⰅ׷ ˖ ⳿䨱׶ ‣ ٔٔ٦أ䖓חرغ؎أד䊴ⴓָ鋅אַ׷ ˖ ؝ىُص؛٦ءّٝ怩׸

    ˖ ״׃זחװ׏׋穠卓 ‣ ׅדח㶷㖈ׅ׷ػ٦خ׾⢪׻׆ח倜鋉ד⡲׏ג׃תֲ✲ָ֮׷ ˖ ⡂׋״ֲזؙٓأָ✉甧ׅ׷ 16 σβΠϯΨΠυϥΠϯ࡞੒લͷ໰୊
  9. ‣ Ꟛ涪⚥ך؝ىُص؛٦ءّٝדرؠ؎ش٦٥ؒٝآص،ה׮ח气䒦ׅ׷ ˖ ぐرغ؎أדずׄ然钠ָⰅ׷ ˖ ⳿䨱׶ ‣ ٔٔ٦أ䖓חرغ؎أד䊴ⴓָ鋅אַ׷ ˖ ؝ىُص؛٦ءّٝ怩׸

    ˖ ״׃זחװ׏׋穠卓 ‣ ׅדח㶷㖈ׅ׷ػ٦خ׾⢪׻׆ח倜鋉ד⡲׏ג׃תֲ✲ָ֮׷ ˖ ⡂׋״ֲזؙٓأָ✉甧ׅ׷ 17 σβΠϯΨΠυϥΠϯ࡞੒લͷ໰୊
  10. ‣ Ꟛ涪⚥ך؝ىُص؛٦ءّٝדرؠ؎ش٦ծؒٝآص،ה׮ח气䒦ׅ׷ ˖ ぐرغ؎أדずׄ然钠ָⰅ׷ ˖ ⳿䨱׶ ‣ ٔٔ٦أ䖓חرغ؎أד䊴ⴓָ鋅אַ׷ ˖ ؝ىُص؛٦ءّٝ怩׸

    ˖ ״׃זחװ׏׋穠卓 ‣ ׅדח㶷㖈ׅ׷ػ٦خ׾⢪׻׆ח倜鋉ד⡲׏ג׃תֲ✲ָ֮׷ ˖ ⡂׋״ֲזؙٓأָ✉甧ׅ׷ 18 σβΠϯΨΠυϥΠϯ࡞੒લͷ໰୊ 䊨侧ך⵴幾ה؟٦ؽأה׃גך窟♧䠬 ָ䗳銲
  11. ‣ 䊨侧ָ׉׸ז׶חַַ׷ךדծث٦يחず䠐׾䖤׷ ˖ ٠剢꟦װ׷➭ךةأؙה⚛遤 ˖ ⡲䧭ًٝغ٦せرؠ؎ش٦ծ8FC–ծ"OESPJEծJ04 ‣ וֿתדװ׷ַ寸׭׷ ˖ ؟٦ؽأך窟♧䠬חꟼ׻׷׮ך

    ˖ 葿 ˖ ؿؓٝزծ俑㶵؟؎ؤ ˖ ״ֻ⢪ֲ6*؝ٝه٦طٝز ˖ نةٝ ˖ ت؎،ؚٗٌ٦تٕ 27 σβΠϯΨΠυϥΠϯΛͭ͘Γ࢝ΊΔ࣌ʹ΍ͬͨ͜ͱ
  12. ‣ 䊨侧ָ׉׸ז׶חַַ׷ךדծث٦يחず䠐׾䖤׷ ˖ ٠剢꟦װ׷➭ךةأؙה⚛遤 ˖ ⡲䧭ًٝغ٦せرؠ؎ش٦ծ8FC–ծ"OESPJEծJ04 ‣ וֿתדװ׷ַ寸׭׷ ˖ ؟٦ؽأך窟♧䠬חꟼ׻׷׮ך

    ˖ 葿 ˖ ؿؓٝزծ俑㶵؟؎ؤ ˖ ״ֻ⢪ֲ6*؝ٝه٦طٝز ˖ نةٝ ˖ ت؎،ؚٗٌ٦تٕ 28 σβΠϯΨΠυϥΠϯΛͭ͘Γ࢝ΊΔ࣌ʹ΍ͬͨ͜ͱ
  13. ‣ 䊨侧ָ׉׸ז׶חַַ׷ךדծث٦يחず䠐׾䖤׷ ˖ ٠剢꟦װ׷➭ךةأؙה⚛遤 ˖ ⡲䧭ًٝغ٦せرؠ؎ش٦ծ8FC–ծ"OESPJEծJ04 ‣ וֿתדװ׷ַ寸׭׷ ˖ ؟٦ؽأך窟♧䠬חꟼ׻׷׮ך

    ˖ 葿 ˖ ؿؓٝزծ俑㶵؟؎ؤ ˖ ״ֻ⢪ֲ6*؝ٝه٦طٝز ˖ نةٝ ˖ ت؎،ؚٗٌ٦تٕ 29 σβΠϯΨΠυϥΠϯΛͭ͘Γ࢝ΊΔ࣌ʹ΍ͬͨ͜ͱ
  14. ‣ 䊨侧ָ׉׸ז׶חַַ׷ךדծث٦يחず䠐׾䖤׷ ˖ ٠剢꟦װ׷➭ךةأؙה⚛遤 ˖ ⡲䧭ًٝغ٦せرؠ؎ش٦ծ8FC–ծ"OESPJEծJ04 ‣ וֿתדװ׷ַ寸׭׷ ˖ ؟٦ؽأך窟♧䠬חꟼ׻׷׮ך

    ˖ 葿 ˖ ؿؓٝزծ俑㶵؟؎ؤ ˖ ״ֻ⢪ֲ6*؝ٝه٦طٝز ˖ نةٝ ˖ ت؎،ؚٗٌ٦تٕ 30 σβΠϯΨΠυϥΠϯΛͭ͘Γ࢝ΊΔ࣌ʹ΍ͬͨ͜ͱ
  15. ‣ 䊨侧ָ׉׸ז׶חַַ׷ךדծث٦يחず䠐׾䖤׷ ˖ ٠剢꟦װ׷➭ךةأؙה⚛遤 ˖ ⡲䧭ًٝغ٦せرؠ؎ش٦ծ8FC–ծ"OESPJEծJ04 ‣ וֿתדװ׷ַ寸׭׷ ˖ ؟٦ؽأך窟♧䠬חꟼ׻׷׮ך

    ˖ 葿 ˖ ؿؓٝزծ俑㶵؟؎ؤ ˖ ״ֻ⢪ֲ6*؝ٝه٦طٝز ˖ نةٝ ˖ ت؎،ؚٗٌ٦تٕ 31 σβΠϯΨΠυϥΠϯΛͭ͘Γ࢝ΊΔ࣌ʹ΍ͬͨ͜ͱ
  16. ‣ 䊨侧ָ׉׸ז׶חַַ׷ךדծث٦يחず䠐׾䖤׷ ˖ ٠剢꟦װ׷➭ךةأؙה⚛遤 ˖ ⡲䧭ًٝغ٦せرؠ؎ش٦ծ8FC–ծ"OESPJEծJ04 ‣ וֿתדװ׷ַ寸׭׷ ˖ ؟٦ؽأך窟♧䠬חꟼ׻׷׮ך

    ˖ 葿 ˖ ؿؓٝزծ俑㶵؟؎ؤ ˖ ״ֻ⢪ֲ6*؝ٝه٦طٝز ˖ نةٝ ˖ ت؎،ؚٗٌ٦تٕ 32 σβΠϯΨΠυϥΠϯΛͭ͘Γ࢝ΊΔ࣌ʹ΍ͬͨ͜ͱ
  17. ‣ 䊨侧ָ׉׸ז׶חַַ׷ךדծث٦يחず䠐׾䖤׷ ˖ ٠剢꟦װ׷➭ךةأؙה⚛遤 ˖ ⡲䧭ًٝغ٦せرؠ؎ش٦ծ8FC–ծ"OESPJEծJ04 ‣ וֿתדװ׷ַ寸׭׷ ˖ ؟٦ؽأך窟♧䠬חꟼ׻׷׮ך

    ˖ 葿 ˖ ؿؓٝزծ俑㶵؟؎ؤ ˖ ״ֻ⢪ֲ6*؝ٝه٦طٝز ˖ نةٝ ˖ ت؎،ؚٗٌ٦تٕ 33 σβΠϯΨΠυϥΠϯΛͭ͘Γ࢝ΊΔ࣌ʹ΍ͬͨ͜ͱ
  18. ‣ 邌植ה葿ך窟♧ ˖ رؠ؎ش٦הؒٝآص،ָずׄ鎉铂דװ׶《׶ָ〳腉חז׷ 36 ৭ͷσβΠϯΨΠυϥΠϯ࡞੒ ؗ٦せץ׋剅ֹכ pairs_press_ripple_blue pairs_blue_08 -

    pairs_blue_09 - pairs_blue_10 pairs_blue_11 pairs_blue_12 pairs_blue_13 ؕٓ٦؝٦س #3ab6ba #53B7BB #53b7bb #71C3C8 #71c3c8 #8ECFD3 #ABDBDE #C7E7E9 #E4F3F4 Before ؗ٦せץ׋剅ֹכ pairs_blue_00 pairs_blue_01 pairs_blue_02 pairs_blue_03 pairs_blue_04 pairs_blue_05 pairs_blue_06 ؕٓ٦؝٦س #3ab6ba #53b7bb #71c3c8 #8ecfd3 #abdbde #c7e7e9 #e4f3g4 After
  19. ‣ ؿؓٝزװ俑㶵؟؎ؤכ寸׭ ˖ "OESPJEך㜥さכ/PUP4BOT$+, ˖ J04ך㜥さכؼؘٓظ錬؞1SPה4BO'SBODJTDP%JTQMBZ ˖ 8FC 1$ 41

    כ劢㼎䘔 39 ϑΥϯτɾจࣈαΠζͷσβΠϯΨΠυϥΠϯ࡞੒ Text XL Text L Text M Text S Text XS Text XXS 20dp 16dp 14dp 13dp 12dp 11dp ְֲִֶ֮ABC123 ְֲִֶ֮ABC123 ְֲִֶ֮ABC123 ְֲִֶ֮ABC123 ְֲִֶ֮ABC123 ְֲִֶ֮ABC123 ͍͋͏͓͑ABC123 ͍͋͏͓͑ABC123 ͍͋͏͓͑ABC123 ͍͋͏͓͑ABC123 ͍͋͏͓͑ABC123 ͍͋͏͓͑ABC123 Android iOS
  20. ‣ ِ٦ؠ٦ח㼎׃ג䠐䙼ך寸㹀׾実׭׷ ˖ כְծְְִךאך鼅䫛肇׾䭯א ˖ ☓نةٝכאֽזְ 48 ҙࢥܾఆ ApprovalPopup.fromNib() .set(

    title: “λΠτϧ", message: "ϝοηʔδ" ) .show( confirm: {͸͍ͷ৔߹ͷॲཧ}, cancel: {͍͍͑ͷ৔߹ͷॲཧ} )
  21. 60