rendafixa
ui: refactor investment cards
| Before | After |
|---|---|
Como existe um "pedido de ajuda" para melhorar a UI, tentei brincar um pouco e esta é apenas uma proposta para os cards.
- Deixar os valores monetários "monospaced" e alinhados a direita (mais comum em extratos)
- Deixar a badge de imposto de renda junto a label, para não "poluir" a área dos valores
- Deixar o imposto de renda sempre visível, isso ajuda a manter a altura dos cards consistentes.
- Limitar o tamanho do card para que não expanda muito em telas grandes, necessário para que os valores não fiquem muito distantes do label
Enfim, not big deal... mas achei um pouco difícil de trabalhar com o vuetify no geral. E para o tamanho do projeto, não sei se justifica usar (ou continuar usando) esse framework.
Talvez seja uma opção considerar algo mais "customizável/moderninho" como o unocss ou shadcn-vue.
Uma outra referência bacana em vue é o it-tools.tech.
O que acha?
A formatação dos valores em monospaced ficou excelente, realmente muito boa. No entanto, os cards menores acabaram deixando um espaço vazio na tela, especialmente em resoluções maiores.
Você acha que o uso de Flexbox ou Grid poderia otimizar esse layout? Qual sua opinião?
Quality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarCloud
![sonarqubecloud[bot] avatar](https://avatars.githubusercontent.com/in/12526?v=4 "Published by a pub.dev verified publisher"){kind=small}
Eu também fiquei incomodado com o espaço vazio. Eu parei no meio de uma linha de raciocínio quando resolvi adicionar a linha de imposto em todos -> a ideia era deixar todos os cards com mesma altura, assim daria para deixar eles lado a lado ou fazer algo "colunar". Ou seja, talvez colocar scroll horizontal ou mesmo em formato tabela (apenas tela grande).
Vou buscar umas referências depois.
De cabeça eu acho que o Home Broker da Rico tinha uma UX razoavelmente boa para comparar investimentos.
Achei essa abordagem bastante interessante. Ela me fez lembrar das interfaces de usuário onde temos a seleção de planos, era also similar que você tinha em mente? Você acha que essa poderia ser uma ideia mais atrativa para a apresentação dos resultados do cálculo?
Numa interface mais limpa, onde as opções de investimento são apresentadas em cards de tamanho uniforme. E, para destacar a melhor opção, o card com o maior retorno financeiro seria realçado.
-
Gostei da ideia de "destacar a melhor opção".
-
Achei agora aqui uma referência (fraca) da ferramenta que me referi antes:
Isso foi um screenshot em cima de um vídeo apresentando a ferramenta (que nem merece o link aqui). Na imagem dá pra ter uma noção das "caixas" para adicionar as simulações.
Acho que está sim alinhado com o seu exemplo anterior de comparação de planos de assinaturas sim. Acredito que estamos convergindo pra algo...
UI não é o meu forte mas vou tentar criar algo no Figma para evoluirmos melhor as ideias...brb
Exempl 2 - tables:
https://github.com/user-attachments/assets/0634871f-733c-40c4-a883-46a96a8c39e5
Quality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube Cloud