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
3.3k
通知UIを改善している話
shira
June 01, 2023
Tweet
Share
More Decks by shira
See All by shira
開発プロセスとアクセシビリティ
shira
1
70
:is()と:where()の話
shira
0
5k
実践アクセシビリティ in Angularアプリケーション
shira
0
610
hoverとタッチスクリーンデバイス
shira
2
1.2k
犬顔or猫顔判定アプリを作っている話.pdf
shira
1
190
社内LT大会開催に至るまでの話
shira
4
420
Featured
See All Featured
Bash Introduction
62gerente
611
210k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Why Our Code Smells
bkeepers
PRO
336
57k
Optimizing for Happiness
mojombo
376
70k
GraphQLとの向き合い方2022年版
quramy
44
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
KATA
mclloyd
29
14k
The Cult of Friendly URLs
andyhume
78
6.2k
A better future with KSS
kneath
238
17k
Thoughts on Productivity
jonyablonski
69
4.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Six Lessons from altMBA
skipperchong
27
3.6k
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໎͍ͬͯͨ
͓ΘΓ