Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
通知UIを改善している話
Search
shira
June 01, 2023
2
2.8k
通知UIを改善している話
shira
June 01, 2023
Tweet
Share
More Decks by shira
See All by shira
:is()と:where()の話
shira
0
4.4k
実践アクセシビリティ in Angularアプリケーション
shira
0
530
hoverとタッチスクリーンデバイス
shira
2
1.1k
犬顔or猫顔判定アプリを作っている話.pdf
shira
1
170
社内LT大会開催に至るまでの話
shira
4
380
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
24
5.8k
Web Components: a chance to create the future
zenorocha
305
41k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Debugging Ruby Performance
tmm1
70
11k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
A Tale of Four Properties
chriscoyier
150
22k
Ruby is Unlike a Banana
tanoku
96
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
The Language of Interfaces
destraynor
151
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
77
41k
Bash Introduction
62gerente
604
210k
Transcript
௨UIΛվળ͍ͯ͠Δ 2023.05.31 ΞΫηγϏϦςΟΔͧʂLTࡇΓ Shirahama Kaori
ࣗݾհ ShirahamaKaoriʢ9v9Shiraʣ ϑϩϯτΤϯυΤϯδχΞ @SmartHR 2022/8ʙ
SmartHR
SmartHR UI
SmartHR UI • https://github.com/kufu/smarthr-ui • SmartHR͕Φʔϓϯιʔεͱͯ͠։ൃ͍ͯ͠Δ UIίϯϙʔωϯτ • SmartHRͷϓϩμΫτͰ͍ͬͯΔ
௨ʹ͍ͬͯΔ ίϯϙʔωϯτ
FlashMessage
None
FlashMessage (SmartHR UI) • https://smarthr.design/products/components/ fl ash- message/ʢݱࡏඇਪʣ • toastͷΑ͏ͳίϯϙʔωϯτ
• ୲ϓϩμΫτͰ༻͓ͯ͠ΓɺઈࢍվળରԠத
FlashMessage (SmartHR UI) • https://smarthr.design/products/components/ fl ash- message/ʢݱࡏඇਪʣ • toastͷΑ͏ͳίϯϙʔωϯτ
• ୲ϓϩμΫτͰ༻͓ͯ͠ΓɺઈࢍվળରԠத ࠓ͜ͷΛ͠·͢ʂ
ͳʹ͕՝ͳͷ͔
՝1ɿඪ४ͩͱ8ඵͰফ͑Δ ݒ೦ Ϣʔβʔ͕จࣈΛಡΈɺ༰Λཧղ͢Δલʹফ͑ͯ͠· ͏Մೳੑ͕͋Δ ରԠҊ ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ
ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageͷ ༻͠ͳ͍
՝1ɿඪ४ͩͱ8ඵͰফ͑Δ ݒ೦ Ϣʔβʔ͕จࣈΛಡΈɺ༰Λཧղ͢Δલʹফ͑ͯ͠· ͏Մೳੑ͕͋Δ վળҊ ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ
ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageΛ ༻͠ͳ͍
՝2ɿؾ͖ͮʹ͍͘ ݒ೦ ಛఆͷྖҬΛݟ͍ͯΔ߹σΟεϓϨΠ͕େ͖͍ ߹ɺը໘Λ֦େ͍ͯ͠Δ߹ͳͲࢹքʹೖΓʹ͍͘ ରԠҊ FlashMessageͷ༻ΛΊɺҎԼΛݕ౼͢Δ ɾૢ࡞ରͷۙ͘ʹϝοηʔδΛදࣔ͢Δ
ɾؾ͖͍ͮ͢ίϯϙʔωϯτΛ͏
՝2ɿؾ͖ͮʹ͍͘ ݒ೦ ಛఆͷྖҬΛݟ͍ͯΔ߹σΟεϓϨΠ͕େ͖͍ ߹ɺը໘Λ֦େ͍ͯ͠Δ߹ͳͲࢹքʹೖΓʹ͍͘ վળҊ FlashMessageͷ༻ΛΊɺҎԼΛݕ౼͢Δ ɾૢ࡞ରͷۙ͘ʹϝοηʔδΛදࣔ͢Δ
ɾؾ͖͍ͮ͢ίϯϙʔωϯτΛ͏
FlashMessageͷ՝ Θ͔ͬͨ
FlashMessage༻ΛΊͯ Ͳ͏͢Δ͔ʁ
ରԠํ • Ϣʔβʔ͕ૢ࡞ͨ͠ૢ࡞ରͷۙ͘ʹϝο ηʔδΛදࣔ͢Δ • ্ه͕ࠔͳ߹ɺʮNoti fi cationBarʯͰ ϝοηʔδΛදࣔ͢Δ
Noti fi cationBar
None
Noti fi cationBar (SmartHR UI) • https://smarthr.design/products/components/noti fi cation- bar/
• ͍Ͳ͜Ζ • ૢ࡞ޙʹɺը໘શମ͕ΓସΘΔͱ͖ • μΠΞϩάͰૢ࡞͠ɺݩͷը໘ʹΔͱ͖ • ಛผͰॏཁͳใ͓ΒͤΛදࣔ͢Δͱ͖
ରԠͷྲྀΕ
ରԠͷྲྀΕ 1.ͲͷΑ͏ͳૢ࡞/ॲཧΛߦͬͨ࣌ʹϝοηʔδΛ ද͍ࣔͯ͠Δ͔ਫ਼ࠪ 2.ύλʔϯผʹྨ͠ɺ֤ରԠํΛݕ౼ 3.νʔϜͷσβΠφʔͱೝࣝ߹Θͤɾௐ 4.νʔϜશମʹల։͠߹ҙɾܾఆ 5.ը໘͝ͱʹରԠΛਐߦத
None
ϝοηʔδදࣔύλʔϯ μΠΞϩά ɹμΠΞϩάΛด͡ͳ͍߹ɿϘλϯۙ ɹμΠΞϩάΛด͡Δ߹ɿNoti fi cationBar μΠΞϩάҎ֎
ɹϘλϯΛԡͯ͠ߦ͏ॲཧͷ߹ɿϘλϯۙ ɹ্هҎ֎ɿNoti fi cationBar
Α͔ͬͨ͜ͱ • ࠷ॳʹύλʔϯਫ਼ࠪͱ֤ରԠํΛܾΊΒΕ ͨͷͰରԠΛ໎ΘͣਐΊΒΕͨ • ௨Λग़͢ύλʔϯΛཧ͠υΩϡϝϯτԽ ͨ͜͠ͱͰνʔϜͰڞ௨ೝࣝΛ࣋ͯͨ • ͜Ε·Ͱ௨UI͕ࠞࡏ͍ͯͨ͠ •
ػೳՃ࣌ͷ௨UI໎͍ͬͯͨ
͓ΘΓ