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

通知UIを改善している話

shira
June 01, 2023
2.5k

 通知UIを改善している話

shira

June 01, 2023
Tweet

Transcript

  1. ௨஌UIΛվળ͍ͯ͠Δ࿩
    2023.05.31 ΞΫηγϏϦςΟ΍ΔͧʂLTࡇΓ


    Shirahama Kaori

    View Slide

  2. ࣗݾ঺հ
    ShirahamaKaoriʢ9v9Shiraʣ


    ϑϩϯτΤϯυΤϯδχΞ @SmartHR 2022/8ʙ

    View Slide

  3. SmartHR

    View Slide

  4. SmartHR UI

    View Slide

  5. SmartHR UI
    • https://github.com/kufu/smarthr-ui


    • SmartHR͕Φʔϓϯιʔεͱͯ͠։ൃ͍ͯ͠Δ

    UIίϯϙʔωϯτ


    • SmartHRͷϓϩμΫτͰ࢖͍ͬͯΔ

    View Slide

  6. ௨஌ʹ࢖͍ͬͯΔ


    ίϯϙʔωϯτ

    View Slide

  7. FlashMessage

    View Slide

  8. View Slide

  9. FlashMessage (SmartHR UI)
    • https://smarthr.design/products/components/
    fl
    ash-
    message/ʢݱࡏ͸ඇਪ঑ʣ


    • toastͷΑ͏ͳίϯϙʔωϯτ


    • ୲౰ϓϩμΫτͰ࢖༻͓ͯ͠ΓɺઈࢍվળରԠத

    View Slide

  10. FlashMessage (SmartHR UI)
    • https://smarthr.design/products/components/
    fl
    ash-
    message/ʢݱࡏ͸ඇਪ঑ʣ


    • toastͷΑ͏ͳίϯϙʔωϯτ


    • ୲౰ϓϩμΫτͰ࢖༻͓ͯ͠ΓɺઈࢍվળରԠத
    ࠓ೔͸͜ͷ࿩Λ͠·͢ʂ

    View Slide

  11. ͳʹ͕՝୊ͳͷ͔

    View Slide

  12. ՝୊1ɿඪ४ͩͱ8ඵͰফ͑Δ
    ݒ೦఺

    Ϣʔβʔ͕จࣈΛಡΈɺ಺༰Λཧղ͢Δલʹফ͑ͯ͠·
    ͏Մೳੑ͕͋Δ


    ରԠҊ

    ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ

    ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ

    ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageͷ࢖
    ༻͠ͳ͍

    View Slide

  13. ՝୊1ɿඪ४ͩͱ8ඵͰফ͑Δ
    ݒ೦఺

    Ϣʔβʔ͕จࣈΛಡΈɺ಺༰Λཧղ͢Δલʹফ͑ͯ͠·
    ͏Մೳੑ͕͋Δ


    վળҊ

    ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ

    ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ

    ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageΛ࢖
    ༻͠ͳ͍

    View Slide

  14. ՝୊2ɿؾ͖ͮʹ͍͘
    ݒ೦఺

    ಛఆͷྖҬΛݟ͍ͯΔ৔߹΍σΟεϓϨΠ͕େ͖͍৔
    ߹ɺը໘Λ֦େ͍ͯ͠Δ৔߹ͳͲࢹքʹೖΓʹ͍͘


    ରԠҊ

    FlashMessageͷ࢖༻Λ΍ΊɺҎԼΛݕ౼͢Δ

    ɾૢ࡞ର৅ͷۙ͘ʹϝοηʔδΛදࣔ͢Δ

    ɾؾ͖ͮ΍͍͢ίϯϙʔωϯτΛ࢖͏

    View Slide

  15. ՝୊2ɿؾ͖ͮʹ͍͘
    ݒ೦఺

    ಛఆͷྖҬΛݟ͍ͯΔ৔߹΍σΟεϓϨΠ͕େ͖͍৔
    ߹ɺը໘Λ֦େ͍ͯ͠Δ৔߹ͳͲࢹքʹೖΓʹ͍͘


    վળҊ

    FlashMessageͷ࢖༻Λ΍ΊɺҎԼΛݕ౼͢Δ

    ɾૢ࡞ର৅ͷۙ͘ʹϝοηʔδΛදࣔ͢Δ

    ɾؾ͖ͮ΍͍͢ίϯϙʔωϯτΛ࢖͏

    View Slide

  16. FlashMessageͷ՝୊͸


    Θ͔ͬͨ

    View Slide

  17. FlashMessage࢖༻Λ΍Ίͯ


    Ͳ͏͢Δ͔ʁ

    View Slide

  18. ରԠํ਑
    • Ϣʔβʔ͕ૢ࡞ͨ͠ૢ࡞ର৅ͷۙ͘ʹϝο
    ηʔδΛදࣔ͢Δ


    • ্ه͕ࠔ೉ͳ৔߹ɺʮNoti
    fi
    cationBarʯͰ
    ϝοηʔδΛදࣔ͢Δ

    View Slide

  19. Noti
    fi
    cationBar

    View Slide

  20. View Slide

  21. Noti
    fi
    cationBar (SmartHR UI)
    • https://smarthr.design/products/components/noti
    fi
    cation-
    bar/


    • ࢖͍Ͳ͜Ζ


    • ૢ࡞ޙʹɺը໘શମ͕੾ΓସΘΔͱ͖


    • μΠΞϩάͰૢ࡞͠ɺݩͷը໘ʹ໭Δͱ͖


    • ಛผͰॏཁͳ৘ใ΍͓஌ΒͤΛදࣔ͢Δͱ͖

    View Slide

  22. ରԠͷྲྀΕ

    View Slide

  23. ରԠͷྲྀΕ
    1.ͲͷΑ͏ͳૢ࡞/ॲཧΛߦͬͨ࣌ʹϝοηʔδΛ

    ද͍ࣔͯ͠Δ͔ਫ਼ࠪ


    2.ύλʔϯผʹ෼ྨ͠ɺ֤ରԠํ਑Λݕ౼


    3.νʔϜͷσβΠφʔͱೝࣝ߹Θͤɾௐ੔


    4.νʔϜશମʹల։͠߹ҙɾܾఆ


    5.ը໘͝ͱʹରԠΛਐߦத

    View Slide

  24. View Slide

  25. ϝοηʔδදࣔύλʔϯ
    μΠΞϩά

    ɹμΠΞϩάΛด͡ͳ͍৔߹ɿϘλϯ෇ۙ

    ɹμΠΞϩάΛด͡Δ৔߹ɿNoti
    fi
    cationBar


    μΠΞϩάҎ֎

    ɹϘλϯΛԡͯ͠ߦ͏ॲཧͷ৔߹ɿϘλϯ෇ۙ

    ɹ্هҎ֎ɿNoti
    fi
    cationBar

    View Slide

  26. Α͔ͬͨ͜ͱ
    • ࠷ॳʹύλʔϯਫ਼ࠪͱ֤ରԠํ਑ΛܾΊΒΕ
    ͨͷͰରԠΛ໎ΘͣਐΊΒΕͨ


    • ௨஌Λग़͢ύλʔϯΛ੔ཧ͠υΩϡϝϯτԽ
    ͨ͜͠ͱͰνʔϜͰڞ௨ೝࣝΛ࣋ͯͨ


    • ͜Ε·Ͱ͸௨஌UI͕ࠞࡏ͍ͯͨ͠


    • ػೳ௥Ճ࣌ͷ௨஌UI΋໎͍ͬͯͨ

    View Slide

  27. ͓ΘΓ

    View Slide