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

2つのアプリ、1つの 設計のデザイン指針

C6080e8131fa757a2d5f2ea42e38f388?s=47 meyco
March 10, 2017

2つのアプリ、1つの 設計のデザイン指針

droidkaigi2017で発表した資料です。
https://droidkaigi.github.io/2017/timetable.html#session-58

C6080e8131fa757a2d5f2ea42e38f388?s=128

meyco

March 10, 2017
Tweet

Transcript

  1. @meyco 2ͭͷΞϓϦɺ1ͭͷ ઃܭͷσβΠϯࢦ਑ Droid Kaigi 2017

  2. ࣗݾ঺հ

  3. @meyco ΠϯσΟʔήʔϜ։ൃ ͔ΒϞόΠϧͷੈք΁ 69σβΠφʔ twitter@meyco MEYCOU.COM

  4. • QuipperͱΞϓϦͷ঺հ • ϫϯιʔεϓϩμΫτͱ͸ʁ • ϫϯιʔεϓϩμΫτͷྑ͞ͱߟ͑Δ΂ ͖ॴ • Ϣʔβʔ͸ࠃ಺ͱࠃ֎Ͱຊ౰ʹҧ͏ͷʁ •

    ϓϥοτϑΥʔϜؒͷݟӫ͑ͷ౷Ұ • ·ͱΊ ໨࣍
  5. None
  6. None
  7. Available in 5 countries 1,700+ hours of quality video tutorials

    5,300+ topics 34,000+quizzes and prediction tests (as of Oct 2016) 420,000+ Paid usersNo.1 customer satisfaction among all e-learning services Adopted in 960 schools out of 5,000 high schools Available in 6 countries No.1 e-learning service for schools in Indonesia and the Philippines Used by 200,000+ teachers Used by 3,000,000 students UIεΩϯ͸̎ͭ StudySapuri
  8. Android͸ ̍ιʔεͰ ग़͠෼͚͍ͯ͠Δ

  9. None
  10. None
  11. ϫϯιʔεϓϩμΫτ ͱ͸ʁ

  12. ϫϯιʔεϓϩμΫτͱ͸Կͳͷ͔ʁ

  13. ̍ͭͷιʔείʔυ͔Βɺ͍ΖΜͳόϦΤʔγϣ ϯʹػೳ੾Γସ͑Λͯ͠ϦϦʔε͍ͯ͠ΔΞϓϦ ϫϯιʔεϓϩμΫτͱ͸Կͳͷ͔ʁ

  14. ϫϯιʔε ϓϩμΫτԽ΁

  15. • ཁ͕݅ࣅ͍ͯΔ৔ॴ͕ଟ͘ɺϫϯιʔε Ͱ΋։ൃՄೳͩͬͨ • Ϗδωεଆͷཁٻͱ߹ΘͤΔ ࣮ࡍͷॴ

  16. • ෼͚ΔͱϢʔβʔ͕όϥ͚ΔͨΊɺར༻ऀ ͕ݮΔʹόάϨϙʔτ͕ೖΓʹ͘͘ͳΔ • ϝϯςφϯεʹ޻਺͕͔͔Δ ΋͠΋෼͚ͯͨΒɾɾͱࢥ͏2ͭͷ͜ͱ

  17. ϫϯιʔεϓϩμΫτ ͷྑ͞ͱߟ͑Δ΂͖ॴ

  18. ϫϯιʔεͷྑ͍ͱ͜Ζ ϝϯςφϯεָ͕ ৽͍͠ػೳΛ ͙͢ʹࢼͤΔ ల։͠΍͍͢ ػೳ͕ҰॹͳͷͰ શମతͳಋઢɺ ػೳ೺Ѳ͕͠΍͍͢

  19. • ڞ௨ͷόάΛผʑʹ௚͞ͳ͍͍ͯ͘ ʢby dageziʣ ϝϯςφϯεָ͕

  20. • ೚ҙͷࠃͰ͙͢ϦϦʔεͰ͖Δ ৽͍͠ػೳΛ͙͢ʹࢼͤΔ

  21. • ػೳ͕ҰॹͳͷͰશମతͳಋઢɺ ػೳ೺Ѳ͕͠΍͍͢ ػೳ͕ҰॹͳͷͰ೺Ѳ͕͠΍͍͢

  22. ػೳ͕ҰॹͳͷͰ೺Ѳ͕͠΍͍͢

  23. UIͷࠩҟαϯϓϧ

  24. UIͷࠩҟαϯϓϧ

  25. ϫϯιʔεͰߟ͑Δ΂͖৔ॴ3ͭ Ϣʔβʔςετ ͸Ͳ͜ͷࠃͰ ͢Δͷ͔ʁ Ӧۀ෦ୂͱ ։ൃ ՝ۚ·ΘΓ

  26. • ৽͍͠৽ػೳ͸ॊೈʹదͨ͠Ϛʔέοτ Ͱߦ͏ɻ Ϣʔβʔςετ͸Ͳ͜ͷࠃͰ͢Δͷ͔ʁ

  27. • ελσΟαϓϦ͸ɺֶߍͱݸਓϢʔβʔ ޲͚ϓϩϞʔγϣϯ͕ೖΓ͍ࠞͬͯ͡Δ • ϓϩμΫτଆͱϏδωεଆͷྑ޷ͳؔ܎ Ӧۀ෦ୂͱ։ൃ

  28. None
  29. None
  30. • ͦ΋ͦ΋Ϗδωεଆʹ͔ͬ͠Γཧղͷ͋ ΔϓϩμΫτϝϯόʔΛ࠾༻͢Δ͜ͱΛ ҙ͍ࣝͯ͠Δɻ • ༉அ͢Δͱ؆୯ʹϓϩμΫτvsϏδωε ʢGeek vs Suitʣͱ͍͏ߏਤʹͳͬͯ͠ ·͏

    ΠϯυωγΞ͔ΒݟͨQuipperͷϓϩμ Ϋτ։ൃ(ϒϩάهࣄΑΓ)
  31. • ࠃ͝ͱʹࢧ෷͍ํ๏ͱಋઢɺΧελϚʔ αʔϏεɺΤϥʔදࣔͷํ๏͕มΘΔɻ ՝ۚ·ΘΓ # $ %

  32. • ࠃ͝ͱʹࢧ෷͍ํ๏ͱಋઢɺΧελϚʔ αʔϏεɺΤϥʔදࣔͷํ๏͕มΘΔɻ ՝ۚ·ΘΓ # $ % ࣦഊͨ͠ΒͲ͏͢Δ͔ʁ ϓϩϞʔγϣϯίʔυͷೖ ྗͱରԠ͸ʁ;ͨͭೖྗ͞

    ΕͨΒՃࢉ͞ΕΔͷʁ ్த཭୤ͨ͠Βೖྗσʔλ ͸Ͳ͏͢Δʁ
  33. Ϣʔβʔ͸ࠃ಺ͱࠃ֎Ͱ ຊ౰ʹҧ͏ͷʁ

  34. • ࣮͸ɺࠔͬͯΔ͜ͱ͸ͲͷࠃͰ΋ͦΜͳ ʹมΘΒͳ͍ͷͰ͸ʁͱ1೥࡞͍ͬͯͯ ࢥ͍ͬͯΔɻ Ϣʔβʔ͸ࠃ಺ͱࠃ֎Ͱຊ౰ʹҧ͏ͷʁ

  35. ྫ͑͹Ͳ͏͍ͬͨ໰୊͕ ͋Δʁ

  36. • ೔ຊͷߴߍੜ͸ੌ͘௨৴੍ݶΛؾʹͯ͠ ͍Δɻʢ௨৴ऑ͍໰୊ʣ • ฐࣾͰߦͬͨΠϯλϏϡʔͷ݁ՌɺՈʹ օwifi͋ΔΘ͚Ͱ͸ͳ͍͜ͱ͕Θ͔ͬͨ ʢ௨৴ऑ͍໰୊ʣ • ঁࢠߴੜ͸ࣸਅͰ΄΅༰ྔΛ࢖ͬͯ͠·ͬ ͯOS͑͞΋Ξοϓσʔτ͔͚ΒΕͳ

    ͍ɾɾɾʢ༰ྔ໰୊ʣ ೔ຊ #
  37. ௨৴଎౓੍͕ݶ͞Εͨܦݧʢස౓ʣ ΄ͱΜͲຖ݄ ʙϲ݄ʹ̍౓ఔ౓ ൒೥ʹҰ౓ఔ౓ ̍೥ʹ̍౓ఔ౓ Θ͔Βͳ͍ɺ֮͑ͯͳ͍ ௨৴଎౓੍ݶͷܦݧ͸ͳ͍   

      10୅ͷঁͷࢠʹؔ͢ΔݚڀػؔʮϓϦΩϟϯςΟʔϯζ ϥϘʯ͕ΠϯλʔωοτϦαʔν 843໊ͷ༗ޮճ౴ɹ/2016.10.19
  38. • ฉ͍ͨ͜ͱ͕ແ͍AndroidͷػମʢϝϞ Ϧ໰୊ɺػମґଘͷόάͱ௚݁ʣʢػମ ໰୊ʣ • ωοτ؀ڥ͸҆ఆ͍ͯ͠ͳ͍৔ॴ͕ଟ͍ ʢ௨৴ऑ͍໰୊ʣ • ݟ͍ͨϏσΦΛμ΢ϯϩʔυ͓͖ͯͨ͠ ͍͕ɺػମͷอଘ༰ྔʹ੍ݶ͕͋Δʢ༰

    ྔ໰୊ʣ ΠϯυωγΞ%
  39. ࣮͸ɺ໰୊͸ࣅ͍ͯΔ

  40. ϓϥοτϑΥʔϜؒͷ ݟӫ͑ͷ౷Ұ

  41. • ച্͕͋Δ • ೔ຊͷํ͕ɺϚʔέςΟϯά΍ϓϩϞʔ γϣϯɺࣄۀల։ͳͲͷ౎߹্ɺػೳ ϦϦʔε͕ૣ͍ • ϞόΠϧ͸͙͢ʹϢʔβʔ͔ΒϑΟʔ υόοΫ͕དྷͯ͠·͏ͨΊɺ։ൃΛૣ Ί͟ΔΛಘͳ͍

    ࠓ͸ɺػೳ͸೔ຊઌߦͰ࡞͍ͬͯΔ
  42. ϒϥϯυ౷߹ͱ ΨΠυϥΠϯదԠ http://getrefe.tumblr.com/

  43. ࠓճϒϥϯυ౷߹Λ͠·ͨ͠ ݱࡏ ։ൃத

  44. • ্࢘ʹೖͬͯ΋Β͍جຊΨΠυϥΠϯσ βΠϯΛ࡞ͬͯ΋Βͬͨ • OSಉ࢜ɺ΢ΣϒɺଞΞϓϦಉ࢜ͷ੔߹ ੑΛͱΔͨΊɺϓϩϞʔγϣϯɺϚʔέ ςΟϯάͳͲϓϩμΫτϝϯόʔҎ֎΁ ͷ֬ೝࣄ߲͕ଟ͔ͬͨ ΨΠυϥΠϯదԠͷಈ͖

  45. ࣮ࡍͷΨΠυϥΠϯ

  46. Native application UI Spec Ver. 2.0.2 Colors 46 warning Expired(todo)

    #AA30DE success-darker Previous result #36A4A1 #FFFFF F pure-white Panel Background, Primary Button’s Text, White Text, etc #00000 0 pure-black alpha12% Covered when button is tapped on Android #00000 0 pure-black alpha35% Modal Background #00000 0 pure-black alpha24% Button drop shadow NOTE: For any text, pure black (#000000) must NOT be used in the application. #FFFFF F pure-whiteɹalphaɹ Background of Animation for Answer, Paging indicator(active) #00000 0 pure-black alpha50% (Not in use) * will be removed primary Primary button color, #0CA5E 6 white bottom button’s bg #F8F9F 9 #24243 F black Text Input Background for selected space primary-lighter #E1F4F F danger Expired soon(todo), #DE30CA success Completed status, CTA #3EC1BD fine Mastered #ddb700 theme Emphasised text, ‘Current’ status, tool- #0B41A 0 d #FFFFF F pure-whiteɹalphaɹ Paging indicator(non- active) background alpha Main background of tutorial over content #1C80E 7 Tab’s background, Banner’s background, background-darker #005FC C danger-lighter Unread messages or #FDEFFB #BFD0 D9 grey1 List Line, Disabled button’s label #E1E8E A grey2 To-do’s ’not started’ status, grey icons, Disabled grey4 Sub text color #808D9 6 grey5 Default text color #4C526 3 theme-darker Status-bar on android #04348 A grey3 placeholder texts #BAC0 C3 primary-darker Submitted #098CC 4 success-lighter Progress bar behind my #D8F3F2 #003A5 A grey2-t Icons which would be placed on color background background Main background #1C80E 7 ready
  47. Native application UI Spec Ver. 2.0.2 font-weight: regular border-radius: 4px

    WHEN TAPPING Buttons 47 Button text should be vertical center aligned. If the text lines are over 2, you can specify larger height. Button text characters should be lower case. Primary Secondary Success Quiz Disabled Primary Secondary Success Quiz COMMON Small font-size: 12pt Medium font-size: 14pt SIZE VARIATIONS Large font-size: 16pt NORMAL STATE DOWN STATE (depends on OS default settings.) text color: pure white background: primary text color: pure white background: success text color: grey5 background: white / grey1(tap) text color: primary background: pure-white / primary- text color: white background: grey2 48 38 30 font-size: 12pt 26 Not in use at the moment Whiteline Whiteline text color: pure-white background: transparent / pure-white Primary Success ready
  48. Native application UI Spec Ver. 2.0.2 Infographic 2 48 Infographic

    items should be commonly used through this app. PROGRESS STATUS PROGRESS VARIATIONS CIRCLE size: 32x32 outline: 1px pure-black 12% ICON size: 20 x 20 layout: center-aligned 32 20 32 20 background: grey3 background: primary background: success background: fine LESSON LIST ICONS Text lesson Video chapter Questions not started in progress completed As the light-blue selected panel comes behind these icons, mastered (not in use) reading not started in progress completed mastered (not in use) playing not started in progress completed mastered answering 20 20 Completed content will have a tick icon on it. It will appear immediately after completing the content even if ‘ing’ status above. The reason why ‘mastered’ status 6 5 32 32 8 PROGRESS BAR 12 12 32 12 GREEN BAR background: success GREY BAR background: pure-black 12% PAGING INDICATOR 888 8 ACTIVE NON-ACTIVE 12 This blue background is fixed when scrolling background: background-darker background: primary-darker not started in progress completed mastered submitted ACTIVE NON-ACTIVE 888 8 update
  49. σβΠϯ౷߹Ͱ ىͬͨ͜໰୊ http://getrefe.tumblr.com/

  50. • σβΠϯʹΑͬͯAndroid͸؆୯͕ͩɺ iOS͸ഒͷ޻਺͕͔͔Δͱ͍͏໰୊ʢ΋ ͪΖΜٯ΋͋Δʣ • iOS͸swift3ҠߦͱͿ͔ͭͬͯɺ΋ͬ ͱ޻਺͕͔͔ͬͯ͠·ͬͨ QuipperͱαϓϦͷ՝୊

  51. • શͯͷαʔϏεͰϑΥ ϯτ߹Θ͍ͤͨ໰୊ʢᎍ Ίͨʣ • ؙ֯ςʔϒϧ࣮૷࣌ͷ ՝୊ ࣮૷ஈ֊Ͱىͬͨ͜໰୊

  52. ؙ֯tableͷ໰୊

  53. ؙ֯tableͷ໰୊ සൟʹվળ͢Δ৔ॴ͸ σϑΥϧτUIʹ໭͢ 2౓ख͕ؒൃੜ

  54. ඒ͍͠σβΠϯͱ ϨϯμϦϯάෛՙ http://getrefe.tumblr.com/

  55. • ઢҰຊͷඳࣸͰΞϓϦ͕Ϟλ͍ͭͯΔ͜ ͱʹؾ͍ͮͨͱ͖͸γϣοΫͩͬͨ • PCͰ͸͍͘ΒͰ΋Ͱ͖Δ͚ͲɺϞόΠ ϧΞϓϦͰ͸ෛ୲͔͔Δͱ͍͏໰୊͸· ·͋Δ σβΠϯVSॲཧ଎౓

  56. • OSͷσβΠϯΨΠυϥΠϯΛಡΉ • ϞʔμϧΛग़͢λΠϛϯάɺը໘ભҠ ΞχϝʔγϣϯͷҙຯɺΤϥʔ • ͦΕΛ౿·্͑ͨͰɺϒϥϯυΨΠυϥ ΠϯઃܭΛͲ͏͍ͬͨํ޲ʹ͢Δ͔ͱߟ ͑Δ ࢲͨͪσβΠφʔʹͰ͖Δ͜ͱ͸Կ͔Λ

    ߟ͑ͨͱ͖ʹ
  57. None
  58. ϞόΠϧ։ൃ͸ ΤϯδχΞϦϯάͱ σβΠϯͷόϥϯε͕ ॏཁ

  59. ༏ઌ͢΂͖͜ͱ͸ɺઌʹܾ Ί͓ͯ͘ɻ͢Δͱɺ࣮ࡍʹ ໰୊͕ىͬͨ͜ͱ͖ʹܾఆ ͠΍͍͢

  60. ·ͱΊ

  61. ϫϯιʔε̎ϒϥϯυ͸ όάϨϙʔτ͕ ೖΓ΍͘͢ վળ͠΍͍͢ɻ UIσβΠϯͰ ϏδωεଆɺϓϩμΫ τଆͷ੔߹ੑΛͱΔ

  62. ϫϯιʔε̎ϒϥϯυ͸ ఱṝʹ͔͚Δ΋ͷΛؒҧ͑ͳ͍Α͏ʹ ٬؍తɾྫྷ੩ʹݟͯσβΠϯΛ͢Δ

  63. THANK YOU!