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

Patterns of UI Design

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

Patterns of UI Design

Avatar for Takuji Ikeda

Takuji Ikeda

May 16, 2013
Tweet

More Decks by Takuji Ikeda

Other Decks in Design

Transcript

  1. 6*ͷύλʔϯԽɺϧʔϧԽͱ͸ • ը໘શମΛίϯϙʔωϯτ୯Ґʹ෼ׂ ΞΫςΟϏςΟ χϡʔε ϗʔϜ ͓ؾʹೖΓ ͓஌Βͤ ઃఆ ͔͋͞Θ͞Μ͕ϑΥϩʔ͠·ͨ͠

    খྛ͞Μ͕͓ؾʹೖΓʹ௥Ճ͠·ͨ͠ ΄ͩ͞Μ͕ϑΥϩʔ͠·ͨ͠ ઒ଜ͞Μ͕͓ؾʹೖΓʹ௥Ճ͠·ͨ͠ ๺ඌ͞Μ͕ϑΥϩʔ͠·ͨ͠ ϝϞҰཡ Ωϟϯηϧ ެ։ઃఆ શһʹެ։ ͱ΋ͩͪʹެ։ ඇެ։ ֬ఆ λΠτϧ ௨஌͠ͳ͍ શһʹެ։ ൐͞Μ͕͓ؾʹೖΓʹ௥Ճ͠·ͨ͠ ᖒా͞Μ͕ϑΥϩʔ͠·ͨ͠ Ϟʔμϧ ΢Οϯυ΢ ϥδΦϘλϯ ςΩετϑΟʔϧυ όοΫφϏήʔγϣϯ λϒܕφϏήʔγϣϯ Ϧετ ϔομʔ ηάϝϯςου ίϯτϩʔϧ ΞΠίϯ ϑολʔ
  2. 6*ͷύλʔϯԽɺϧʔϧԽͱ͸ ύλʔϯA ύλʔϯB ύλʔϯC ίϯϙʔωϯτ ը໘ભҠ ը໘ભҠ ը໘ ಋೖ τοϓ

    Ұཡ ৄࡉ ೖྗɾ؅ཧ ϓϥοτϑΥʔϜʢiPhone App, Android App, Smartphone Siteʣ
  3. 2VPSB iPhone App A B C Android App Smartphone Site

    ϓϥοτϑΥʔϜʹΑΔը໘ͷҧ͍
  4. ը໘ύλʔϯҰཡ ಋೖը໘ • εϓϥογϡ • ΢ΥʔΫεϧʔ • ίʔνϚʔΫ • ΤϯϓςΟϝοηʔδ

    τοϓը໘ • ϙʔλϧ • Ϣʔβʔ • ECɹ • ίʔϙϨΠτ Ұཡը໘ • ݕࡧ݁Ռ • λΠϜϥΠϯ • ΪϟϥϦʔ • ΞΫςΟϏςΟ ৄࡉը໘ • ࣸਅɾಈը • هࣄ • Ϛοϓ • ঎඼ ೖྗ ɾ ؅ཧը໘ • αΠϯΞοϓɾαΠϯΠϯ • ౤ߘ • ΧϝϥΩϟϓνϟ • ઃఆɾ؅ཧ छྨ 5 ֤ύλʔϯ
  5. ݕࡧαʔϏε ΫοΫύου ʢSMART PHONE SITEʣ τοϓ Ұཡ Ұཡ ৄࡉ Ұཡ

    Ұཡ Ұཡ Ұཡ Ұཡ Ұཡ ݕࡧ݁Ռ ݕࡧ݁Ռ ΧςΰϦ αϒΧςΰϦ ఼ಊೖΓϨγϐ ΧςΰϦ ϨγϐҰཡ .:ϝχϡʔ Ϩγϐ αʔνϑΥʔϜ ηάϝϯςουίϯτϩʔϥ υϦϧμ΢ϯ υϦϧμ΢ϯ λϒܕφϏήʔγϣϯ ਨ௚ܕϦετ μογϡϘʔυ
  6. 6*ίϯϙʔωϯτ • جຊίϯϙʔωϯτ • φϏήʔγϣϯ / ίϯτϩʔϧ • Ϧετ •

    ϑΥʔϜ • ϝοηʔδ • ৘ใͷϏδϡΞϧԽ • ΞΠίϯ • Ϟʔγϣϯ • ϏδϡΞϧελΠϧ
  7. 6 ࣮ ફ ࣄ ྫ  6*ͷύλʔϯԽɾϧʔϧԽͱ͸  ϓϥοτϑΥʔϜͷྲّྀ 

    ը໘ύλʔϯ  6*ίϯϙʔωϯτ  ࣮ફࣄྫ  ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ
  8. ࣮ફࣄྫ ΫοΫύου಺ͰͷύλʔϯԽɾϧʔϧԽͷ࣮ફ 1. COOKPAD UI Design Rules (Document) 2. COOKPAD

    UI Development Rules (Document) 3. COOKPAD CSS / Sass Coding Style (Document) 4. Sara Design Framework (Sass)
  9. αʔϏε։ൃͰͷՁ஋ ։ൃνʔϜ ։ൃνʔϜ ։ൃνʔϜ • σβΠφʔ͕গͳ͍৔߹ σβΠφʔ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ

    ύλʔϯͱϧʔϧʹͷͬͱͬͨ6*ߏஙʹΑΓϦιʔεΛܰݮͯ͠ɺ ͦΕҎ֎ͷ৬छͷਓͰҰఆҎ্ͷΫΦϦςΟ·Ͱಋ͘ σΟϨΫλʔ σΟϨΫλʔ σΟϨΫλʔ ύλʔϯͱϧʔϧ
  10. ։ൃνʔϜ ։ൃνʔϜ ։ൃνʔϜ • ։ൃຖʹσβΠφʔ͕ผΕΔ৔߹ ύλʔϯͱϧʔϧ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ ҟͳΔϓϩδΣΫτͰ͋ͬͯ΋ɺύλʔϯ΍ϧʔϧ͸มΘΒͳ͍Α͏ʹ

    ͢Δ͜ͱͰɺϦιʔεͷܰݮɺϢʔβʔମݧͷඪ४Խ͕Ͱ͖Δ σΟϨΫλʔ σΟϨΫλʔ σΟϨΫλʔ σβΠφʔ σβΠφʔ σβΠφʔ αʔϏε։ൃͰͷՁ஋
  11. Ҏ্ɺ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ ஑ా୓࢘ɹ!UJLFEBUBLVKJJLFEB!DPPLQBEDPN ΫοΫύουͰ͸ σβΠφʔɾΤϯδχΞΛ ੵۃ࠾༻தͰ͢ʂ ͝ڵຯ͋Δํ͸ੋඇΞΫηε͠ ͍ͯͩ͘͞ɻ ຊ೔ͷ಺༰ͷଟ͘͸ ʮεϚʔτϑΥϯͷ

    ͨΊͷ6*σβΠϯ Ϣʔβʔମݧʹඞཁͳ ϧʔϧͱύλʔϯʯ ͔Βൈਮ͍ͯ͠·͢ɻ http://info.cookpad.com/jobs/?affcd=eetmm http://www.amazon.co.jp/dp/4797372303/