Hover berbeda

Saat kami memiliki banyak komponen di pustaka di eLama, kami perhatikan bahwa hovers tidak memiliki sistem: warna isian, warna bingkai, perubahan warna teks, bayangan muncul, dll.





Kami melakukannya bukan karena niat jahat, ini bekerja lebih baik di beberapa proyek, tetapi melihat antarmuka secara keseluruhan, menjadi jelas bahwa ini adalah masalah.





Bahkan komponen serupa memiliki hover yang berbeda
Bahkan komponen serupa memiliki hover yang berbeda

Tidak semuanya seperti yang terlihat

Saat mengembangkan antarmuka, kami mengandalkan prinsip bahwa apa yang Anda lakukan harus berfungsi seperti yang diharapkan pengguna. Jika pengguna melihat tombol di depannya, maka ia akan mengharapkan perilaku tombol darinya, yang berarti tombol tersebut harus berperilaku seperti yang diharapkan.





Misalnya, di perpustakaan kami, kami memiliki tautan dan tombol yang secara visual menyerupai tautan. Karena fakta bahwa tidak ada perbedaan yang kuat dalam perilaku mereka saat mengarahkan kursor, pertanyaan mungkin muncul, apa yang akan terjadi saat diklik - apakah akan melompat ke halaman lain, atau tindakan akan ada di halaman saat ini. Pada awalnya, bahkan ada kasus ketika pengembang menggunakan tombol sebagai tautan, dipandu oleh fakta bahwa tombol itu terlihat dan berperilaku seperti tautan saat mengarahkan kursor.





Ternyata tidak jelas bagi semua orang bahwa ini adalah dua komponen yang berbeda.
Ternyata tidak jelas bagi semua orang bahwa ini adalah dua komponen yang berbeda.

Jenis hover apa yang ada disana

1. ( )





Beginilah tampilannya di Notion
Notion

2. ( )





Beginilah perilaku tombol filter di Jira
Jira

3.





Contoh dari Habr

4.





Bisa dilihat di home page Yandex

5. (, ..)





Tombol Google Kalender
Google

6. ( , ..)





Tombol mewah dari nyc.awwwards.com
nyc.awwwards.com

, , , , , -.





Button, SelectList, Table, Chip, Lable, Switch, Pagination,





:





— 3 .





, . .





(: tooltip ) , (, toast)





Contoh tombol aktif

Rating





:





, . -, , . , , .





RadioLine, CheckLine Tab





:





RadioLine, CheckLine — .





: RadioLine — , .





Cant dalam animasi di slowuuumo

Checkbox





:





: — — — .





Input, MultiInput, TextArea, Select, Radiobutton





:





- — . , , , .





InputFile





— . , , .





Link Button





, .





, .





, . , . , , . , .





Tetapi mungkin ada animasi parsial, misalnya, seperti yang kita lakukan untuk penomoran halaman - saat Anda mengarahkan kursor ke nomor halaman, latar belakang tampak mulus, tetapi saat kursor meninggalkannya, latar belakang langsung menghilang. Ini dilakukan untuk menghindari situasi ketika Anda menggerakkan kursor ke atas angka dengan cepat dan beberapa media terlihat pada saat bersamaan, karena yang baru muncul ketika yang sebelumnya belum menghilang.








All Articles