Grelhas Bento (Apple Breeze):Grelhas Bento

O estilo de grelhas Bento é um estilo de design visual caracterizado pelo minimalismo, clareza e um elevado grau de organização, comummente encontrado em interfaces modernas da Web e de aplicações móveis. É conseguido através da divisão do conteúdo em módulos ordenados em grelha, cada um contendo ícones, títulos e descrições curtas, criando uma disposição que se assemelha à compartimentação dos alimentos numa caixa bento. O estilo realça o espaço em branco, o alinhamento e a consistência, utilizando cores de fundo suaves em contraste com elementos de primeiro plano nítidos para criar uma experiência de leitura limpa e confortável. Por exemplo, num blogue pessoal ou numa página de portefólio, as grelhas Bento apresentariam perfis de projectos, resumos de artigos ou etiquetas de competências em cartões de diferentes tamanhos, criando um efeito visual geral de ordem e beleza.

Referência à palavra-chave

Conceba uma página de lançamento de um produto/serviço moderno, minimalista e topo de gama com uma disposição em estilo de grelha Bento que apresenta todas as informações essenciais de forma compacta num único ecrã.

Conteúdo essencial: [preencha o conteúdo essencial aqui

Requisitos de design:
1. disposição em grelha Bento: criar uma grelha de cartões de diferentes tamanhos, cada um contendo uma categoria específica de informação, com uma disposição compacta, mas não demasiado cheia.
2) Design dos cartões: todos os cartões devem ter cantos arredondados (raio de 20px), fundo branco/cinzento claro, um efeito de sombra subtil e um ligeiro efeito de flutuação ascendente quando se passa o cursor do rato.
3) Esquema de cores: esquema de cores minimalista, principalmente fundo branco/cinzento claro com cores gradientes como cores de destaque (podem ser especificadas cores específicas, por exemplo, do roxo claro #C084FC ao roxo escuro #7E22CE).
4) Hierarquia tipográfica:
   - Números/cabeçalhos grandes e a negrito: utilizar uma cor gradiente para realçar os principais pontos de dados e os títulos principais
   - Títulos médios-grandes e pequenos: para títulos de cartões, indicando claramente as categorias de conteúdo
   - Texto pequeno: utilizar a cor cinzenta para apresentar o texto descritivo de apoio
5) Organização do conteúdo:
   - Linha superior: principais anúncios, caraterísticas do produto, indicadores de desempenho ou pontos-chave de venda
   - Linha intermédia: especificações do produto, pormenores técnicos, caraterísticas funcionais
   - Linha inferior: guia do utilizador e conclusão/chamada à ação
6) Elementos visuais:
   - Utilizar ícones simples para representar as caraterísticas
   - Barras ou gráficos de progresso para mostrar dados comparativos
   - Grelhas e esquemas de cartões criam ritmo visual
   - Separadores para apresentar informações categorizadas em pequenas cápsulas
7. design responsivo: as páginas devem poder adaptar-se a diferentes tamanhos de ecrã e manter uma boa legibilidade em dispositivos móveis

Referência ao estilo de conceção:
- O estilo geral de conceção é semelhante ao da página de especificações do produto no sítio Web da Apple.
- Utilize muito espaço em branco e elementos visuais simples.
- Realce as figuras e as caraterísticas principais e reduza o texto extenso.
- Utilizar cores gradientes para realçar dados importantes
- Espaçamento adequado entre cartões para criar uma separação visual clara

Estudos de caso

Rascunho de desenho afinado do Figma

Tutoriais oficiais sobre a sua utilização:Caminho de aprendizagem Figma - Introdução básica, Tutorial em chinês - Comunidade Figma em chinês

Plugin do navegador Instalação e transferência de plugins chineses:FigmaCN - Chrome Web Store

Cliente (recomendado):‍‍‍ ‍ Figma Chinês + Tutorial de Instalação - Documentos da Nuvem do Livro Voador

Em primeiro lugar, precisamos de encontrar o plugin html.to.design do Figma que vamos utilizar desta vez. Basta procurá-lo clicando no ícone rodeado pela barra Tab na parte inferior de qualquer ficheiro Figma.

Em seguida, introduzimos o URL da página que queremos importar. Se não o tiver, pode implementá-lo com o Youware e clicar no botão Importar.

Em primeiro lugar, queremos que o cabeçalho do título também seja adicionado ao cartão. Desta vez, optámos por encontrar a largura do cabeçalho do que a largura de todos os cartões seguintes, por isso, em primeiro lugar, a sua largura é unificada para 1472px.

Depois de querermos copiar o estilo do cartão cinzento seguinte sem o seu conteúdo, basta escolher um cartão cinzento aleatório em baixo e, em seguida, clicar com o botão direito do rato - Copiar e Colar como - Copiar Propriedades na linha, Colar é o mesmo que selecionar no cartão Cabeçalho selecionar Colar Propriedades, verá que o cabeçalho também tem um cartão.

Em seguida, resolvemos o problema de os cartões da Escala de Modelos não ocuparem todo o espaço. Selecionando o cartão da Escala de Modelos e mantendo premido o botão Opção, descobrimos que a largura do cartão de treino bimodal é de 398 e que, por isso, têm de ser espaçados 24 px.

Assim, a largura do cartão para a escala do modelo deve ser 350+398-24, pode escrever a fórmula matemática diretamente na caixa de introdução da largura, a Figma fará as contas por si, não é verdade?

Finalmente, fazemos o último passo antes de exportar, todo o cartão à volta das margens de alguns problemas, à esquerda e à direita é muito largo, em cima e em baixo é muito estreito, queremos que sejam iguais, desta vez só precisamos de selecionar a camada html-Body, e depois a caixa vermelha do espaçamento é alterada para um 32 uniforme.

Se quiser adicionar um contorno de gradiente à imagem, como fiz na imagem da montra acima, pode utilizar o postspark (https://postspark.app/screenshot) tais ferramentas.