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

InvisionのAndroidアプリでみる4つのデザイン基本原則 / Four design basic principles seen in Invision's Android application

futabooo
August 07, 2018

InvisionのAndroidアプリでみる4つのデザイン基本原則 / Four design basic principles seen in Invision's Android application

futabooo

August 07, 2018
Tweet

More Decks by futabooo

Other Decks in Design

Transcript

  1. InvisionͷAndroidΞϓϦͰΈΔ
    4ͭͷσβΠϯجຊݪଇ
    @futabooo AndroidΤϯδχΞ σβΠϯ෦ #2
    #android_engineer_design

    View Slide

  2. 2
    About me
    4FOJPS&OHJOFFS4DSVN.BTUFSBUFVSFLB *OD
    'BOUBTZ&BSUI;FSP T$3:FE 4QMBUPPO
    GVUBCPPP
    ɹɹTakahiro Futagawa
    2

    View Slide

  3. 3
    About eureka
    ձࣾ֓ཁ
    ैۀһ਺
    ໊ʢฏۉ೥ྸࡀʣ
    ࣄۀ಺༰
    ࣗࣾαʔϏεاըɾ։ൃɾӡӦ
    1BJST
    $PVQMFT

    View Slide

  4. 4
    Agenda
    *OWJTJPOͱ͸
    ͭͷσβΠϯجຊݪଇͱ͸
    σβΠϯجຊݪଇΛ࣮૷ʹམͱ͢ํ๏

    View Slide

  5. 5
    Agenda
    *OWJTJPOͱ͸
    ͭͷσβΠϯجຊݪଇͱ͸
    σβΠϯجຊݪଇΛ࣮૷ʹམͱ͢ํ๏

    View Slide

  6. 6
    Invision

    View Slide

  7. 7
    Invision

    View Slide

  8. 4ͭͷσβΠϯجຊݪଇͱ͸

    View Slide

  9. 9
    4ͭͷσβΠϯجຊݪଇ
    Proximity
    ۙ઀

    View Slide

  10. 10
    4ͭͷσβΠϯجຊݪଇ
    Proximity
    ۙ઀
    Repetition
    ൓෮

    View Slide

  11. 11
    4ͭͷσβΠϯجຊݪଇ
    Proximity
    ۙ઀
    Alignment
    ੔ྻ
    Repetition
    ൓෮

    View Slide

  12. 12
    4ͭͷσβΠϯجຊݪଇ
    Proximity
    ۙ઀
    Alignment
    ੔ྻ
    Repetition
    ൓෮
    Contrast
    ίϯτϥετ

    View Slide

  13. 13
    4ͭͷσβΠϯجຊݪଇ
    Proximity
    ۙ઀
    Alignment
    ੔ྻ
    Repetition
    ൓෮
    Contrast
    ίϯτϥετ

    View Slide

  14. ۙ઀
    Proximity
    14

    View Slide

  15. ۙ઀
    Proximity
    άϧʔϓԽ͍ͨ͠ཁૉ͸ۙ͘ʹ
    ͦ͏͡Όͳ͍ཁૉ͸ΑΓԕ͘ʹ
    15

    View Slide

  16. ۙ઀
    Proximity
    άϧʔϓԽ͍ͨ͠ཁૉ͸ۙ
    ͘ʹ
    ͦ͏͡Όͳ͍ཁૉ͸ΑΓ
    ԕ͘ʹ
    16

    View Slide

  17. ੔ྻ
    Alignment
    17

    View Slide

  18. ੔ྻ
    Alignment
    ը໘಺ͷ͢΂ͯͷཁૉ͕ଞͷཁૉͱࢹ֮తͳͭͳ͕ΓΛ΋ͭΑ͏ʹ͢Δ
    18

    View Slide

  19. ੔ྻ
    Alignment
    ը໘಺ͷ͢΂ͯͷཁૉ͕ଞ
    ͷཁૉͱࢹ֮తͳͭͳ͕Γ
    Λ΋ͭΑ͏ʹ͢Δ
    19

    View Slide

  20. ൓෮
    Repetition
    20

    View Slide

  21. ൓෮
    Repetition
    ΞϓϦͷશମΛ௨ͯ͠ͳʹ͔ͷಛ௃Λ܁Γฦ͢
    21

    View Slide

  22. ൓෮
    Repetition
    ΞϓϦͷશମΛ௨ͯ͠ͳʹ
    ͔ͷಛ௃Λ܁Γฦ͢
    22

    View Slide

  23. 23
    ίϯτϥετ
    Contrast

    View Slide

  24. ίϯτϥετ
    Contrast
    24
    ಉ͡ཁૉͰͳ͍΋ͷ͸͸͖ͬΓͱҟͳΒͤΔ

    View Slide

  25. ίϯτϥετ
    Contrast
    25
    ಉ͡ཁૉͰͳ͍΋ͷ͸͸ͬ
    ͖ΓͱҟͳΒͤΔ

    View Slide

  26. 26
    Reference
    ϊϯσβΠφʔζɾσβΠϯϒοΫ[ϑϧΧϥʔ৽૷૿ิ൛]

    View Slide

  27. Credit: NASA Earth Observatory/NOAA NGDC
    Thank you :)

    View Slide