Hovers são diferentes

Quando tínhamos muitos componentes na biblioteca do eLama, percebemos que os hovers não têm um sistema: a cor de preenchimento, a cor do quadro, a cor do texto muda, uma sombra aparece, etc.





Não fizemos isso por malícia, funcionou melhor em alguns projetos, mas olhando a interface como um todo, ficou claro que isso era um problema.





Mesmo componentes semelhantes tinham flutuações diferentes
Mesmo componentes semelhantes tinham flutuações diferentes

Nem tudo é o que parece

Ao desenvolver interfaces, contamos com o princípio de que o que você faz deve funcionar como o usuário espera. Se o usuário vir um botão à sua frente, ele esperará o comportamento do botão a partir dele, o que significa que ele deve se comportar conforme o esperado.





Por exemplo, em nossa biblioteca, temos um link e um botão que se assemelha visualmente a um link. Devido ao fato de que não houve grande diferença em seu comportamento ao passar o mouse, pode surgir a questão, o que acontecerá quando clicado - irá saltar para outra página ou a ação estará na página atual. No início, havia até casos em que os desenvolvedores usavam um botão como link, guiados pelo fato de que ele se parecia e se comportava como um link ao pairar.





Acontece que pode não ser óbvio para todos que esses são dois componentes diferentes.
Acontece que pode não ser óbvio para todos que esses são dois componentes diferentes.

Que tipo de flutuadores existem

1. ( )





É assim que parece no Notion
Notion

2. ( )





É assim que o botão de filtro se comporta no Jira
Jira

3.





Um exemplo de Habr

4.





Pode ser visto na página inicial do Yandex

5. (, ..)





Botão do Google Agenda
Google

6. ( , ..)





Botão chique de nyc.awwwards.com
nyc.awwwards.com

, , , , , -.





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





:





— 3 .





, . .





(: tooltip ) , (, toast)





Exemplo de um botão ativo

Rating





:





, . -, , . , , .





RadioLine, CheckLine Tab





:





RadioLine, CheckLine — .





: RadioLine — , .





Cant na animação em slowuuumo

Checkbox





:





: — — — .





Input, MultiInput, TextArea, Select, Radiobutton





:





- — . , , , .





InputFile





— . , , .





Link Button





, .





, .





, . , . , , . , .





Mas pode haver animação parcial, por exemplo, como fizemos para a paginação - quando você passa o mouse sobre o número de uma página, o fundo aparece suavemente, mas quando o cursor sai, o fundo desaparece instantaneamente. Isso foi feito para evitar a situação em que você move o cursor sobre os números rapidamente e vários substratos ficam visíveis ao mesmo tempo, porque novos substratos aparecem quando os anteriores ainda não desapareceram.








All Articles