When we had a lot of components in the library in eLama, we noticed that hovers do not have a system: the fill color, frame color, text color changes, a shadow appears, etc.
We did it not out of malice, it worked better in some projects, but looking at the interface as a whole, it became clear that this was a problem.
Not everything is what it seems
When developing interfaces, we rely on the principle that what you do should work as the user expects. If the user sees a button in front of him, then he will expect the behavior of the button from it, which means that it should behave as expected.
For example, in our library we have a link and a button that visually resembles a link. Due to the fact that there was no strong difference in their behavior when hovering, the question might arise, what will happen when pressed - will it jump to another page, or the action will be on the current page. At first, there were even cases when developers used a button as a link, guided by the fact that it looks and behaves like a link when hovering.
What kind of hovers are there
1. ( )
2. ( )
3.
4.
5. (, ..)
6. ( , ..)
, , , , , -.
Button, SelectList, Table, Chip, Lable, Switch, Pagination,
:
— 3 .
, . .
(: tooltip ) , (, toast)
Rating
:
, . -, , . , , .
RadioLine, CheckLine Tab
:
RadioLine, CheckLine — .
: RadioLine — , .
Checkbox
:
: — — — .
Input, MultiInput, TextArea, Select, Radiobutton
:
- — . , , , .
InputFile
— . , , .
Link Button
, .
, .
, . , . , , . , .
But there may be partial animation, for example, as we did for pagination - when you hover over a page number, the background appears smoothly, but when the cursor leaves it, the background disappears instantly. This was done to avoid the situation when you move the cursor over the numbers quickly and several substrates are visible at the same time, because new ones appear when the previous ones have not yet disappeared.