Transcrições
1. Apresentação: Caramba, vocês estão interessados em projetar uma
interface de usuário usando IA? Se a resposta for sim, então
este curso pode ser para você. Então, neste curso, teremos vários projetos. Então, no primeiro projeto,
vamos projetar a interface
do usuário para o aplicativo de aprendizado de idiomas usando o UISR Essa ferramenta é muito fácil de usar. Tudo o que você precisa fazer é escrever o prompt descrevendo
seu projeto
e, em menos de um minuto, UIZR gerará designs de interface de usuário de
alta qualidade como
este. Muito legal, né? Em seguida, você também pode
fazer uma captura de tela de um site ou
aplicativo móvel, e o UizRT poderá converter essa
captura de tela em designs de interface de usuário
editáveis .
Olha isso. No próximo projeto, você
colocará uma interface de usuário no papel, poderá tirar uma foto da fezes
e o upload dessa foto,
e fisicamente a IA
será capaz de converter essa amostra em designs de
interface editáveis Muito legal, né?
No próximo projeto, projetaremos a interface
do usuário para o site de comércio eletrônico
usando o Wind Frame Em seguida, também projetaremos
uma interface de usuário para
análise de receita de vendas usando FSL Olha esses caras.
Muito legal, certo? Em seguida, vamos projetar a interface
do usuário para a página de inscrição. Vamos projetar a interface
do usuário para
criar blocos manualmente A seguir, analisaremos as atenções
do usuário usando a IA Assim, você obterá o
hitmp e o hitmp
mostrará onde a atenção do
usuário está mais concentrada E, por fim, vamos
realizar uma
pesquisa de experiência do usuário usando o UX Pilot
2. Como criar uma UI para aplicativo de aprendizado de idiomas com o Uizard: Santo elenco, bem-vindo de
volta ao curso. Neste vídeo,
vamos projetar a interface
do usuário usando o UizRT Ok, então agora, vamos começar. A primeira coisa que você
precisa fazer é se inscrever. Então, basta clicar em Inscrever-se gratuitamente e você será
redirecionado para esta página Como vocês podem ver,
vocês têm duas opções. Você pode se inscrever usando
sua conta do Gmail. Você também pode se inscrever usando
sua conta da Microsoft. Então, depende totalmente de você. Nesse caso, vou me
inscrever usando minha conta do Gmail Como vocês podem ver aqui, fui redirecionado
para o meu painel Ok, então aqui,
há quatro opções. A primeira opção é
um novo projeto em branco. Assim, você pode criar a
interface do usuário do zero. A segunda opção é
começar a partir da captura de tela. Assim, você pode fazer uma captura de tela de um site ou
aplicativo móvel e, em
seguida, fazer o upload dessa captura de tela, e o UISRT converterá
essa captura de tela em designs essa captura A terceira opção é gerar os designs de interface do usuário usando o
Auto Designer, e a quarta opção é começar
a partir de modelos. Como vocês sabem, o UISRT
tem muitos modelos, então você pode escolher um
desses modelos e personalizá-lo como
quiser No entanto, neste vídeo, vamos nos
concentrar
principalmente nesse recurso, designer de automóveis Então, basta clicar aqui
e ele será redirecionado para esta
página. Tudo bem. Então, agora vamos começar. Em primeiro lugar, você precisará selecionar para qual dispositivo
você está projetando? Como vocês podem ver
aqui, existem três opções: celular,
tablet e desktop. Vou selecionar celular. Em seguida, você precisará escrever o prompt descrevendo
seu projeto. Ok, então neste exemplo, vou criar uma interface
de
usuário para aplicativo Language Learning. Ok, então eu vou
escrever algo assim, um aplicativo de aprendizado de idiomas
para estudantes e taurinos Ok, então, em seguida, você
precisará descrever
o estilo de design. Você pode especificar coisas
como cores e layouts. Ok, então vamos escrever as descrições de um aplicativo moderno com equipe azul claro. Em seguida, você também pode selecionar
algumas dessas palavras-chave. Vou selecionar leve,
moderado e elegante. Ok, então a seguir, basta clicar em
Gerar meu projeto. Ok, então esperem, pessoal. O processo pode levar
alguns minutos. Espero que não
demore muito e estou super empolgada em ver minha interface de usuário.
Ok, então espere. Na verdade, não quero que
esse vídeo seja muito longo, então vou pular essa parte e voltarei quando o
design da interface do usuário estiver pronto Ok, finalmente, os designs da
interface do usuário estão prontos. Na verdade, o processo
não demorou muito, pessoal. Demorou apenas 2 minutos ou talvez
até menos de 2 minutos. Ok, agora vou
clicar em Visualizar. E vamos clicar em Visão geral. Como vocês podem ver, o UizRT
gerou várias páginas. Olha isso. Portanto, temos a página de
boas-vindas, a página de inscrição, tela
inicial, as configurações de pesquisa, perfil e conta.
Olha esses caras. Muito legal. Ok, vou
ampliar um pouco. Ok, olhem isso, pessoal. Muito legal, né? Ok,
agora basta clicar em Visualizar. Basta clicar em Entendi. Ok, então basta clicar em Começar, cadastre-se agora. Ok, então isso é como
a página inicial, pessoal. Olha isso. Se
clicarmos no perfil, seremos redirecionados
para esta página Se clicarmos na página inicial, seremos redirecionados de
volta para esta página E se você clicar em
um desses cursos, você será redirecionado para esta
página. Olha isso, pessoal. Isso é incrível, certo? Ok, agora vamos
voltar para a página de edição. Vou fechar essa guia. Então, se você não estiver satisfeito
com os designs da interface do usuário, à vontade para
personalizá-la, certo? Assim, você pode adicionar texto.
Você pode adicionar botões. Você pode adicionar um formulário e muito mais, pessoal. Você também pode adicionar imagem,
então basta clicar em Imagem. Como vocês podem ver, o UISRT tem
sua própria biblioteca de imagens aqui. Você também pode gerar
uma imagem usando IA, então basta clicar aqui e
digitar seu baile aqui E se você clicar nos ícones, também poderá adicionar qualquer ícone à sua interface de
usuário. Como vocês podem ver aqui, o ISAT tem muitos ícones diferentes
aqui, pessoal. Olha isso. Além disso, você
também pode editar a página. Então, basta selecionar a página
que você deseja editar. Por exemplo, neste caso, eu quero editar o homestren para
que você selecione Homestren e você
possa Você pode modificar as
posições, o tamanho. Você também pode alterar o estilo. Você pode alterar a cor da tela. Você pode agrupar ou
desagrupar os objetos nesta página. Por fim, se você quiser
baixar o design da interface do usuário,
basta clicar em Exportar Como vocês podem ver aqui,
vocês têm várias opções. Assim, você pode
baixá-lo no formato PNG e no formato JPageFmat SVG ou PDF.
Então, depende totalmente de você. Vou baixar esse design de
interface do usuário no formato PNG. Então, basta clicar em Exportar. Ok, então o processo pode levar um ou dois minutos.
Então, esperem, pessoal. Espero que não
demore muito. Tudo bem, como vocês podem ver, baixamos esta imagem com sucesso Olha isso. Muito legal, né? Tudo bem, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vou ver caras no
próximo vídeo em que criaremos design da interface
do usuário usando outra ferramenta de IA. Então,
vejo vocês lá.
3. Como criar uma interface de usuário com o Google Stitch e Figma: Oi, pessoal. Bem-vindo
de volta ao curso. Neste vídeo,
vamos projetar a interface
do usuário
usando duas ferramentas de IA. O primeiro é o Google States e o segundo é o FiCMA AI Ok, vamos começar. Em primeiro lugar, vamos
escrever o baile de formatura. Crie uma interface de usuário projetada para software de análise de vendas. Isso tem dois instaladores principais. O primeiro é o painel de
acompanhamento de vendas. E a segunda são segmentações e visualizações de
clientes Torne o design moderno
e interativo. Em seguida, você pode selecionar o tipo de aplicativo que
deseja criar. Se você quiser criar a interface do usuário
para aplicativos móveis, clique aqui. Se você quiser criar a interface do usuário
para o aplicativo web, clique aqui. Além disso, você também pode
fazer upload de uma imagem ou esboço para se inspirar e
clicar em Gerar design Ok, agora a IA está
criando o design da interface e precisaremos
responder a essas perguntas. Para criar um software abrangente
de análise de vendas, posso criar as
duas telas a seguir para você. Painel de acompanhamento de vendas. Portanto, essa tela
fornecerá uma visão geral do desempenho de vendas
com as principais métricas e gráficos interativos. E a segunda são visualizações de segmentação de
clientes Essa tela exibirá segmentos de
clientes por meio várias visualizações,
permitindo insights mais profundos Devo ir em frente e projetar
essas duas telas para você? Ok, agora, a IA vai
criar o design. Isso levará alguns minutos.
Então, esperem, pessoal. Espero que não
demore muito
e estou muito animada
para ver o resultado Bem, não demorou
muito, pessoal. Demorou apenas 1 minuto ou
até menos de 1 minuto. Ok, aqui está o design da interface do usuário. Então, essa é a mesa de
análise de vendas. Temos uma visão geral das vendas, receita
total, valor
médio de venda, clientes, vendas ao longo do tempo e
vendas da Regent. E aqui estão as visualizações das
segmentações de clientes. Portanto, temos
distribuições de clientes valor da vida útil do cliente versus frequência de
compra e os
principais segmentos de clientes por receita.
Ok,
muito legal, pessoal. Se você quiser baixar esse
design, é muito fácil. Basta clicar neste Download. Você também pode ver o código. Como vocês podem ver,
temos o código DDML aqui. Você pode copiar o código e compilá-lo no
código VS Ok, a seguir, vamos
experimentar a segunda ferramenta de IA. O nome da ferramenta é Figma. Então, vamos
usar o mesmo prompt. Então, vamos copiar e
colar esse
baile e colocá-lo aqui Mas antes disso,
certifique-se de
já dar uma olhada no FICMA Crie um design de
interface de usuário para software analítico de
vendas
que tenha duas restrições principais, painel de rastreamento de
vendas e segmentações
e visualizações de clientes, tornando moderado e interativo E vamos clicar em Gerar. VICMA levará alguns
minutos para gerar o design da interface do usuário.
Então, esperem, pessoal. Espero que não
demore muito. Bem, não demorou
muito, pessoal. Demorou apenas um minuto ou
até menos de um minuto. Ok, aqui está o painel
de vendas. Temos uma visão geral da
receita total, do total de pedidos, taxa de conversão de
novos clientes. UI muito legal, pessoal, tendências de
receita,
vendas por categoria, métricas de
desempenho,
transações recentes, muito completa. E vamos clicar nas segmentações de
clientes. Temos distribuições de segmentos, comparação métrica de
segmentos. Uma métrica detalhada do segmento.
Muito abrangente. E você também pode ver o código. Basta clicar aqui e você
poderá ver o código. Você pode baixar o código
e compilá-lo no código FAS. Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês
no próximo vídeo. Tchau.
4. Como criar design de UI para aplicativo de entrega de supermercado com Banani, Nano Banana e Manus: Pessoal do Holi. Bem-vindo
de volta ao curso. Neste vídeo,
vamos projetar a interface
do usuário para o aplicativo de entrega de
alimentos usando três ferramentas de IA O primeiro é Banani. O segundo é Gêmeos
e o terceiro é Manus Ok, vamos começar. Em primeiro lugar, vou fazer login. Vou fazer login
usando minha conta do Gmail, então vamos clicar em
Continuar com o Google Como vocês podem ver, eu me conectei
com sucesso e aqui está minha placa de poeira Ok, vamos começar. Vamos escrever o baile de formatura. Crie um design de interface de usuário
para o aplicativo de entrega de alimentos. Este aplicativo tem três instaladores principais. O primeiro é o mercado de
produtos. Com cartão de compras. Portanto, se o usuário
quiser comprar o produto, pode clicar
no produto e adicioná-lo
ao cartão de compras. O segundo recurso é rastreamento da
entrega de pacotes em tempo
real no mapa interativo. E o terceiro obstáculo é o painel do
Analytics de gastos
mensais Assim, o usuário
poderá acompanhar e analisar seus
gastos em cada mês. Ok, agora vamos clicar em Gerar.
Isso levará alguns minutos, talvez um ou 2 minutos. Esperem, pessoal. Espero que não
demore muito e eu esteja muito animada
para ver o resultado Bem, não demorou muito. Demorou apenas um minuto ou
até menos de um minuto. Ok, veja este painel do
supermercado. Temos categorias de produtos, rastreamento
ativo de entrega, gastos
mensais. Olha isso. Muito legal. E aqui está outra
alternativa. Olha isso. É relativamente semelhante, mas o design é um
pouco diferente. E aqui está a terceira opção. Ok, muito legal. Se você quiser baixar essas imagens,
basta clicar em Exportar. E você pode exportar essa
imagem como PNG ou GPG. Depende totalmente de você
e basta clicar em Exportar. Ok, agora vamos
experimentar a segunda ferramenta de IA. Então, vamos abrir Jim andi. E neste caso, vamos
usar o modelo Nanobanana. Então, vamos clicar em
criar imagem. E vou copiar e
colar o mesmo prompt. Então, vamos criar um design de interface de
usuário para o aplicativo de entrega de alimentos. Ok, vamos clicar em Enviar. Ok, agora ele está carregando
o modelo nano Banana. Isso levará alguns minutos, talvez um ou dois minutos. Então, esperem, pessoal. Espero
que não demore muito. Ok, vamos lá. Aqui está o
design. Ok, olha isso. Temos três recursos, certo? O mercado do produto, o rastreamento da
entrega de pacotes em tempo real e a análise de gastos. tabuleiro. Olha
isso. Muito legal. Ok, agora vamos
experimentar a terceira ferramenta de IA. O nome da ferramenta é Manus. E vamos copiar
e colar o baile, então vamos usar exatamente
o mesmo prompt e vamos clicar em design Ok, agora, vamos clicar em Gerar. Bem, não
demorou muito, pessoal. Demorou apenas 30 segundos ou
até menos de 30 segundos. Ok, deixe-me ampliar
um pouco. Então, aqui está o primeiro mercado de
produtos mais restrito. E como vocês podem ver aqui, temos um carrinho de compras para que o
usuário possa
clicar e o produto será automaticamente adicionado
ao carrinho de compras. E o segundo recurso é o rastreamento de entrega em tempo
real. Este é o supermercado, esta é sua casa, o motorista está a caminho
e você também tem o tempo
estimado de chegada Olha isso. Muito legal, né? E aqui está o terceiro mais gordo. Painel de análise de gastos. Assim, você poderá analisar seus gastos de cada mês e também dividir
seus gastos por categoria de
produto. Muito legal. Ok, pessoal, acho que é isso. Isso é tudo que você
precisa saber. Vejo vocês no próximo vídeo. Tchau.
5. Como criar o design de UI para sites de comércio eletrônico com o Wind Frame: Holocausto, bem-vindo de
volta ao curso. Neste vídeo,
vamos criar um design de interface de
usuário
usando o Wind frame. Ok, então agora vamos começar. A primeira coisa que você
precisa fazer é se inscrever. Então, basta clicar em Inscrever-se. Você será redirecionado
para esta página. Como vocês podem ver,
vocês têm duas opções. Você pode se inscrever usando
sua conta do Github. Você também pode se inscrever
usando sua conta do Gmail. Então, vou me inscrever
usando minha conta do Gmail. Como vocês podem ver, fui
redirecionado para o meu painel. Ok, agora vamos
criar um novo projeto. Então, basta clicar em Criar projeto. Você precisará inserir
o nome do projeto. Ok, então vou
chamá-lo de design de interface de usuário. E eu vou
clicar em Criar projeto. Ok, agora o Wind Frame
está criando o projeto. E como vocês podem ver, fomos redirecionados para a página de edição Ok, então essa ferramenta é
muito fácil de usar, pessoal. Tudo o que você precisa fazer
é escrever o baile descrevendo a aparência da interface
do usuário . Você pode
especificar coisas como recursos, funcionalidades, cores,
layout e estilos Ok, então, neste exemplo, vou criar designs de interface de
usuário para o site de comércio eletrônico Ok, então agora vamos
escrever o prompt. Catálogo de produtos, página para site de
comércio eletrônico com layout de
estética de equipe moderado E fundo escuro. Ok, então esse é o meu aviso. Agora, vamos clicar
aqui. Então, o processo pode levar alguns minutos,
pessoal. Então, espere. Espero que não
demore muito. Estou muito animada para
ver o resultado. Ok, eu não quero que esse
vídeo seja muito longo, pessoal, então eu vou
pular essa parte e vou voltar quando o design da interface do usuário estiver pronto, e
vou mostrar para vocês Tudo bem, finalmente, o design da
interface do usuário está pronto. Na verdade, não
demorou muito, pessoal. Demorou apenas 2 minutos ou talvez
até menos de 2 minutos. Ok, então, como vocês podem ver, esta é a página do catálogo de produtos do nosso site
de comércio eletrônico Há cerca de duas
listas de produtos aqui. Olha isso. Muito legal, né? Se você não
estiver satisfeito
com o resultado, à vontade para pedir
à IA que redesenhe essa interface de usuário, para
que você possa escrever o
baile
aqui e explicar qual parte deseja corrigir Ok, agora vou
clicar em Adicionar ao Canvas. Ok, agora
vamos criar
outro
design de interface de usuário usando o Wind Frame. Então, vamos escrever o prompt. Então, desta vez,
vamos criar designs de interface de
usuário para a página de checkout
do produto Ok, então vamos escrever o baile. Página de pagamento do produto
para o site de comércio eletrônico. Certifique-se de incluir a forma de pagamento e o botão de pagamento. Ok, agora
vou clicar aqui, então o processo pode
levar alguns minutos. Então, espere. Espero que não
demore muito e estou muito animada
para ver o resultado Ok, então o design da interface para os blocos
de pagamento do produto está pronto Olha esses caras.
Muito legal, né? Ok, agora vou adicionar essas
almofadas de saída de produtos ao Canvas Então, basta clicar em Adicionar ao Canvas. Ok, então NX, vamos
clicar no código. Você poderá ver o
código dessa interface de usuário. Portanto, se você é desenvolvedor web
ou desenvolvedor front-end, não precisa escrever
o código do zero. Você pode usar esse código. Ok, então, por fim, vamos
exportar esse projeto. Então, basta clicar em Exportar. Ok, como vocês podem ver, exportamos o projeto com sucesso Você tem três opções. As
primeiras opções estão no DML A segunda opção é reagir e a terceira opção é poucas. Então, vou selecionar em DML e clicar em
Baixar arquivo, certo? Baixamos o arquivo com sucesso. Ok, pessoal, acho que é isso. Isso é tudo que você
precisa saber. Vejo vocês no próximo vídeo. Tchau
6. Como criar uma UI para sites Marketplace com V0: Caramba, pessoal. Bem-vindo
de volta ao curso. Neste vídeo, vamos
criar uma interface de usuário
usando o Firsal Ok, então agora vamos começar. A primeira coisa que você
precisa fazer é fazer login. Então, basta clicar em Login. Você pode fazer login usando
sua conta do Gmail. Você também pode fazer login usando
sua conta do Github. Ok, então, em seguida, vou
clicar em preços. Eu vou te mostrar que
essa ferramenta é realmente gratuita. Como vocês podem ver aqui, o
Viral oferece um plano gratuito. Obviamente, existem
algumas limitações. Quando se trata do plano
gratuito, por exemplo, você tem apenas 200
créditos por mês, então esse é o seu limite máximo. OK. Agora vamos
voltar para a página inicial Se você rolar para baixo,
poderá
ver os designs da interface do usuário
que foram criados usando o FSL Olha isso. Ok, então
vamos escolher um exemplo. Vamos clicar nesse. Ok, como vocês podem
ver, esse é o baile que foi usado para
gerar esse design de interface de usuário, um painel para
análise de dados de KPIs industriais Olha esses caras.
Muito legal, né? Então, tudo que você precisa fazer é
escrever o baile,
descrevendo seu projeto Você pode especificar
coisas como recursos, funcionalidades, estilos,
layout, cor, etc., e o Fir SL
gerará um belo design de
interface de usuário Ok, então vamos
começar, pessoal. Ok, então vamos
escrever o baile Alright,
então, neste exemplo,
vou criar uma interface de
usuário para o site de comércio eletrônico Ok, agora vamos
escrever o prompt. Comércio eletrônico, mercado
com catálogo de produtos e etiquetas de preços Ok, agora vamos clicar em Enviar. O processo pode
levar alguns minutos, pessoal, então espere. Espero que não
demore muito. Como vocês podem ver agora, a Versal está projetando a interface do usuário Então espere, tudo bem. Finalmente, o design da
interface do usuário está pronto. Ok,
olha esse cara. Muito legal, né? Então, este
é o nosso site de comércio eletrônico. Então essa é a página do Hub, pessoal. Como vocês podem ver,
temos a barra de pesquisa aqui, é como a página de destino do
produto Estas são as
descrições do produto. E como vocês podem ver, esse é o catálogo de produtos.
Olha isso. Vamos rolar um pouco para baixo. Como vocês podem ver,
existe a lista de preços e também adicione o botão do gráfico. Então, se o cliente
quiser comprar esse produto, ele ou ela clicará
nesse botão, certo? Ok, então vamos clicar no
outro design de interface do usuário. Esse é outro catálogo de produtos, pessoal. Muito legal, né? Então, se você quiser converter esse design em código,
você pode clicar aqui. Como vocês podem ver,
vocês têm duas opções. A primeira é reagir e a segunda é na CML Assim, você pode copiar e colar
esse código e dar esse código aos desenvolvedores da web ou
aos desenvolvedores front-end, e eles criarão
o site para você. Ok, muito legal,
certo? E por fim, se você quiser
ouvir esse projeto, você pode clicar aqui, e ele copia
automaticamente os links
desse projeto, certo? E você pode gravá-lo
para outras pessoas. Ok, pessoal, acho que é isso. Isso é tudo que você
precisa saber. Vejo vocês no próximo vídeo. Tchau.
7. Criando uma interface na Web com o Teleport HQ: Espírito Santo, bem-vindo de
volta ao curso. Neste vídeo,
vamos criar design de interface de
usuário para um
site usando o Teleport at Q. Ok, agora vamos começar A primeira coisa que você
precisa fazer é se inscrever. Então, basta clicar em Começar. Você será redirecionado
para esta espada. Como vocês podem ver,
vocês têm duas opções. Você pode se inscrever usando
sua conta do Gmail. Você também pode se inscrever usando sua conta do Github,
então depende totalmente de você Ok, então, neste caso, vou me inscrever usando
minha conta do Gmail Ok, então isso é
Teleport atsqdbg. Ok, então vocês têm
várias opções, pessoal. Você pode começar do zero. Você pode selecionar um
desses modelos disponíveis e
personalizá-lo como quiser. Como vocês podem ver,
existem muitos modelos aqui. Você também pode gerar uma interface
web usando IA, e é isso que
vamos fazer neste vídeo. Ok, então basta clicar em
Começar a construir. Essa ferramenta é muito fácil de usar. Tudo o que você precisa fazer é escrever o prompt descrevendo
seu projeto. E em menos de um minuto, Teleport AdSq
gerará uma interface de usuário de alta qualidade para Ok, então, neste exemplo, vou criar uma página de
destino para meu software de web
scrapping Ok, agora vamos
escrever o prompt. Sites para desmantelamento na web. Software. Ok, agora é
só clicar em Avançar. Ok, então
aqui, você precisará selecionar
a equipe
para o seu site. Como vocês podem ver, existem várias opções: criativas,
culturais, padrão,
eBook, echo, financeiras, infantis,
nutrição, esportes,
startups e Ok, então vou
selecionar Iniciar. Então, a equipe vai
ficar assim. Então isso é como o modo de
luz, pessoal. Se você quiser mudar para o modo
escuro, basta clicar aqui. Então, depende totalmente de vocês. Nesse caso,
vou selecionar o modo
escuro. Acho que
parece melhor. Ok, agora basta clicar em
Gerar site. Então, o processo pode levar
alguns minutos, pessoal. Então, espere. Espero que não
demore muito e estou super animada
para ver o resultado Ok, então espere.
Como vocês podem ler, o conteúdo está sendo gerado. Ok, quase pronto. Ok, então, em seguida, basta clicar. Vá até a página. Ok, então esta é a página
de edição, pessoal. Agora vou clicar em Visualizar. Ok, então você será redirecionado
para a página de pré-visualização. Ok, então espere. Ok, vamos lá. Portanto, este é o nosso site. O nome do
site é Scraper. Ok, sem o poder
do web scraping. Como vocês podem ver aqui,
temos cerca de cinco páginas, características da página
inicial, como funciona,
preços e contato. Há um botão para começar
agora aqui. E se você rolar um pouco para
baixo,
há cerca de quatro recursos: extrações de dados
personalizáveis, eliminação
programada, exportação de
proxy e garantia de qualidade de dados Muito legal, né? Ok, então isso é como as sessões de
preços, não é o plano certo para
sua necessidade de desmantelamento na web Plano básico e profissional gratuito aqui. Vamos rolar para baixo novamente. Ok, então isso é como as seções de
perguntas frequentes. Ok, muito legal, pessoal. Há um botão de login aqui e também um
botão de registro aqui. Ok, agora vou
fechar esta etapa. Você pode se sentir à vontade para
editar os sinais UID. Você pode mudar a cor.
Você pode editar o texto. Ok, então, por fim, vou te
mostrar o código. Então, basta clicar no código. Como vocês podem ver,
existem dois arquivos. O primeiro é JavaScript
e o segundo é CSS. Então,
se você quiser
colocar o projeto em negrito , pode usar esse código, para não precisar começar
do zero, certo? Ok, pessoal, acho que é isso. Isso é tudo que você
precisa saber. Vejo vocês no próximo vídeo. Tchau.
8. Como converter captura de tela para UI Design com o Uizard: Gás sagrado. Bem-vindo
de volta ao curso. Neste vídeo, vamos
converter uma captura de tela
em um design de interface de usuário editável usando Ok, então o processo será muito simples. Tudo o que você precisa fazer é
fazer uma captura de tela de um site ou aplicativo
móvel Em seguida, faça o upload da
captura de tela para o UISrt. Depois disso, o UISRT
converterá isso em
designs de interface de usuário que você poderá editar Ok, então vamos começar. Então, agora vou
clicar em Iniciar a partir da
captura de tela e seremos
redirecionados para esta página Ok, então esperem, pessoal. O carregamento pode demorar um pouco. Tudo bem, pessoal,
agora vamos
fazer uma captura
de tela deste site O nome do site é zero. Para aqueles que não
sabem o que é zero, zi é um dos maiores
mercados imobiliários onde as pessoas podem encontrar propriedades para venda e também
propriedades para alugar. No entanto, você pode
se sentir à vontade para fazer capturas de tela de qualquer
outro site ou aplicativo móvel
que desejar, certo? Ok, agora vamos fazer a captura Ok, então vamos fazer isso. Aqui vamos nós. Ok, acabei de fazer
a captura de tela. Então, vou
salvar essa imagem na minha área de trabalho e
voltar para o UizRT Ok, por enquanto, vou
fechar essa aba. O que vamos fazer a seguir
é fazer o upload da captura de tela. Então, basta clicar no
scanner de captura de tela e clicar em Carregar. Ok, então vou fazer o
upload dessa captura de tela,
pessoal, basta clicar em Abrir Ok, agora ele está
fazendo o upload da imagem. O processo pode levar
alguns segundos. Espero que não
demore muito. Ok, então espere. Tudo bem, então a próxima coisa
que vamos
fazer é selecionar o tamanho da tela
de saída Como vocês podem ver,
você tem três opções:
celular, tablet e descop. Vou selecionar Descop. E agora vamos clicar em Importar. Ok, agora estamos
importando essa captura de tela. Então, esperem, pessoal. Espero que não
demore muito. Ok, vamos lá. Ok, agora vamos
editar essa interface de usuário. Ok, então há muitas
coisas que vocês podem fazer. Por exemplo, você
pode editar esse texto. Você pode escrever o que
quiser aqui. Você também pode alterar
a cor da fonte. Como vocês podem ver, no
momento, a cor é azul, mas se você quiser
alterá-la para uma cor diferente, talvez verde, basta
selecionar verde, certo? Aqui vamos nós. Ok, você também pode alterar a cor
desse botão, então basta clicar nesse ícone
e, no momento, ele ainda está azul. Digamos que eu queira
mudar a cor para vermelho. Então, basta clicar aqui.
Ok, vamos lá. E você pode até mesmo usar
a IA para dar uma sugestão.
Então, basta clicar em sugerir. Como vocês estão aqui, IZR está gerando novos
conteúdos só para vocês Pode levar alguns segundos. OK, então esperem, pessoal ,
espero que não
demore muito. Ok, além disso, você
também pode substituir essa imagem
pela sua própria imagem, certo? Então você pode clicar nesta imagem e clicar nesses pontos da árvore e
rolá-los um pouco Mas você pode enviar
sua própria imagem, certo? Além disso,
você também pode modificar as posições e o
tamanho da imagem. Ok, agora,
vou encerrar isso, e o que
vamos fazer a seguir é redesenhar essa
interface de usuário usando IA Então, basta clicar aqui,
selecionar gerar equipe e também
selecionar o baile, certo? Ok, então agora vamos
escrever o pino. Redesenhe essa interface de usuário. Com uma equipe mais sombria e moderna Ok, agora vou
clicar em Gerar. Você também pode selecionar
algumas dessas palavras-chave. Então, vou selecionar
sujo e moderno. Ok, então basta clicar em Gerar. Ok, então esperem, pessoal, o processo pode levar
alguns minutos. Espero que não
demore muito. Como vocês podem
ver, a Izard redesenhou com sucesso
a interface do usuário Na verdade, o processo demorou um pouco
mais do que eu esperava. Demorou quase 3 minutos, pessoal. Ok, agora, basta clicar em Aplicar. Ok, como vocês podem ver agora vocês estão inscrevendo a nova equipe, certo? Aqui vamos nós. Olha isso. Muito legal, né? Ok, agora, se você quiser exportar essa interface de usuário,
basta clicar em Exportar. E eu vou baixar
essa imagem no formato PNG. Então, basta clicar em PNG e
clicar em Exportar, certo? Ok, como vocês podem ver agora, estamos baixando a
imagem. Então, espere. Tudo bem, então
baixamos a imagem com sucesso. Aqui vamos nós. Tudo bem,
pessoal, acho que é isso. Isso é tudo que você
precisa saber. Vejo vocês no próximo vídeo. Tchau
9. Convertendo esboço em UI Design com o Visily AI: Holgays, bem-vindo
de volta ao curso. Neste vídeo,
vamos converter patins
em
design de interface de usuário usando o PhiSle Neste exemplo,
vamos usar este SCATS, um aplicativo de gerenciamento de
inventário de pés Você pode usar qualquer esboço escrito à mão
e fazer o upload da imagem, e a IA poderá
convertê-la em design de interface Ok, vamos começar. Em primeiro lugar, vou fazer o
login. Então, vamos clicar aqui. Vou fazer login
usando minha conta do Gmail. Mas você também pode fazer login
usando sua conta do Github. Depende totalmente de você. Ok, isso levará
alguns segundos. Como vocês podem ver, eu entrei
com sucesso. Ok, agora vamos clicar
em Bem-vindo ao facile e clicar em Começar com IA E você será
redirecionado para esta página. Ok, primeiro, vamos fazer o upload da imagem. Então,
vamos clicar aqui. E eu vou fazer o
upload desse esboço. Vamos clicar em Abrir e
vamos escrever o baile, converter esse esboço em
um design de interface de usuário Para contextualizar, essa é interface do usuário do aplicativo
Foot Inventory
Management. Ok, então esse é o meu baile de formatura, e vamos clicar em Gerar Ok, isso levará alguns
segundos. Então, esperem, pessoal. Espero que não
demore muito. Estou muito animada para
ver o resultado. Bem, não demorou muito. Demorou apenas 2 minutos ou
até menos de 2 minutos. IA gerou dois
estilos diferentes , estilo um e estilo dois. Mas, por enquanto, vamos dar uma
olhada no primeiro estilo. Ok, vamos lá. Coisas de comida. Temos três toques nas listas de
compras e receitas atuais. Frits pantry e também
temos o botão Analisar. Olha isso. E
também temos alertas de expiração. E você também pode clicar nesse botão de anúncio para adicionar mais comida. Ok, agora vamos dar
uma olhada no estilo também. Vamos clicar aqui. Então, é basicamente o mesmo. A estrutura é a mesma, mas a cor é diferente. Para ser honesto com você,
eu prefiro o estilo um porque acho que
o design é mais adequado para o aplicativo de gerenciamento de
inventário de alimentos. E você também pode
clicar em Openboard, então você será redirecionado
para a página de edição Ok, pessoal, acho que é isso. Isso é tudo que você
precisa saber. Vejo vocês no próximo vídeo. Tchau
10. Como criar uma página de inscrição simples no Figma: Santo Deus, bem-vindo de
volta ao curso. Neste vídeo,
vamos aprender sobre o ICMA. Para aqueles que
já estão familiarizados com o ICMA, sinta-se à vontade para pular este vídeo No entanto, se você é novo ICMA e quer saber mais, preste muita
atenção a este vídeo Ok, então vamos começar. A primeira coisa que você
precisa fazer é se inscrever. Então, basta clicar em
Começar gratuitamente. Ok, então vou me
inscrever usando minha conta do Gmail, então basta clicar em
Continuar com o Google Como vocês podem ver, fui
redirecionado para o meu Daskbk. Então, eu tenho vários
projetos aqui no Figma. Ok, agora vamos
criar um novo arquivo, certo? Então, basta clicar em Arquivo de design. E basta clicar em
Criar novo design. Ok, então, como vocês podem ver, fomos redirecionados para
a página de edição Ok, então neste vídeo, vou te ensinar passo a
passo sobre como criar interface de usuário
simples
para uma página de inscrição. Ok, então vamos começar. Ok, então eu vou
selecionar Frame. Ok, então esse vai
ser o aplicativo móvel, certo? Em seguida,
selecionarei um retângulo e
criaremos três retângulos Então, o primeiro é
para o nome do usuário. O segundo é para o e-mail e o terceiro
é para a senha. Ok, então você pode criar dois
outros retângulos manualmente, mas neste caso, vou copiar
e colar isso, certo? Ok, vamos lá. Ok, então, a seguir, vou
criar outro
ângulo de quebra aqui embaixo, e esse
será um botão de inscrição. Ok, legal. Então, em seguida,
vamos adicionar texto a esse design de interface do usuário. Ok, então basta clicar no texto Ok, então eu vou digitar
algo assim. Cadastre-se. Page, é muito pequeno, então vamos torná-lo um
pouco maior, certo? Como vocês podem ver,
o tamanho do telefone é 12, então vou mudar para 35. Ok, vamos lá. E eu
vou colocá-lo no centro. Ok, muito legal. Em seguida, também vou
adicionar texto para comer um retângulo. Então, vamos clicar nesse ícone. Ok, então eu vou mudar
o tamanho do telefone 35-20. Ok, então vamos escrever
algo aqui. Nome completo. Ok, então
vamos copiar e colar isso. Ok, então esse será
o endereço de e-mail. E a terceira
será a senha. Ok, então quando o usuário
quiser se cadastrar, ele precisa digitar seu nome completo, seu endereço de e-mail e
também sua senha. Ok, então, a seguir, vou
adicionar texto a esse botão.
Então, vamos clicar aqui. Ok, então eu vou
digitar inscrever-se. E vamos colocar isso no centro.
Ok, vamos lá. Então, se o usuário quiser se cadastrar, ele ou ela precisa
clicar nesse botão, certo? Ok, então a seguir, vou mudar o maior
e as cores, pessoal. Ok, então eu vou
bloquear isso. Aqui vamos nós. Como vocês podem ver, o
padeiro e a cor são brancos, então vou mudar
para azul claro Ok, eu acho que isso
é bom o suficiente. Olha esses caras.
Muito legal, né? Você também pode alterar a
cor desse botão. Como vocês podem ver,
agora, a cor é cinza, então vou mudar a cor para talvez verde claro assim. Ok, parece muito legal. Ok, pessoal, então é
assim que você projeta interface
do usuário manualmente no VIC
11. Como criar fluxograma de usuários com Miro: Olá, pessoal. Bem-vindo
de volta ao curso. Neste vídeo, vamos projetar o fluxo do usuário usando o Miro O fluxo do usuário é uma
parte muito importante do design da experiência do usuário,
portanto, preste
muita atenção a este vídeo. Ok, vamos começar. Em primeiro lugar, vou fazer login. Então, vamos clicar em Ir para o painel e eu vou fazer login
usando minha conta GML E vamos clicar em Continuar. Como vocês podem ver, eu entrei
com sucesso e aqui está meu painel Ok, agora vamos
clicar em AI Playground e você será redirecionado
para a página de edição E vamos clicar nesse ícone. E vamos escrever o aviso. Crie um diagrama de fluxo do usuário
para o aplicativo AI Travel Planner. Então, neste exemplo,
vamos projetar fluxo
do usuário para o AI Travel Planner Este aplicativo tem três grilhões principais. O primeiro é o localizador de
passagens aéreas baratas e hotéis. O segundo obstáculo é o rastreamento do orçamento de
viagens e o terceiro é o gerador de itinerário de
IA Ok, agora vamos clicar em Gerar. Isso levará alguns segundos, talvez 20 ou 30 segundos. Então, do jeito que acontece. Espero que não
demore muito. Ok, aqui está o diagrama. Eu vou fechar
isso. Ok, vamos lá. E vamos clicar em
adicionar ao Canvas. H dê uma olhada neste diagrama de fluxo
do usuário. Então, o primeiro é fazer login. Depois que o usuário fizer login, ele precisará escolher
um desses três filtros. O primeiro é o localizador
de voos baratos e hotéis. Assim, o usuário
poderá pesquisar o hotel mais barato e
as passagens aéreas
mais baratas. Em seguida, o usuário
poderá visualizar os resultados e
também poderá aplicar filtros. E ao final do processo, o usuário poderá
reservar o voo e
também o hotel. Então esse é o primeiro instalador. A segunda opção é o rastreamento do orçamento
de viagens. Assim, o usuário
poderá definir o orçamento. O usuário poderá
adicionar despesas, aumentar os gastos, e o sistema verificará
se os gastos estão
acima do orçamento e, em
seguida, o usuário
receberá notificações ou alertas E aqui está o terceiro instalador, o gerador de itinerário de
IA. Então, primeiro,
o usuário inserirá
as preferências e também
os destinos da viagem. Então, a IA vai
gerar o itinerário. Em seguida, o usuário
revisará ou editará o itinerário. E aqui está a última etapa. O usuário
salvará o itinerário. Ok, pessoal, esse é o fluxo de
usuários desse aplicativo. Se você é designer de UIUX, é muito importante
entender o fluxo de usuários do seu aplicativo É muito importante que você entenda como seu aplicativo
será usado. Ok, acho que é isso.
Isso é tudo que você precisa saber. Vejo vocês
no próximo vídeo.
12. Como analisar a atenção do usuário com IA: Caramba, bem-vindo
de volta às capas. Neste vídeo,
analisaremos as atenções dos usuários
usando esse plugin Figma O nome do plugin
é attention Inside. Como vocês podem ler aqui,
melhore o desempenho do design
com análises de pré-lançamento Portanto, essa ferramenta de IA será
capaz de prever instantaneamente
onde os usuários
cuidarão depois de interagir com
seus projetos, para que você possa economizar tempo e evitar
correções após o lançamento. Ok, então agora vamos começar. A primeira coisa que você precisa
fazer é clicar para cima e finalizar. Como vocês podem ver, eu
tenho vários arquivos aqui, então vou selecionar
este aplicativo de jogos de arquivo. Como vocês podem ver, fui redirecionado para corrigir
minha página de edição Ok, então a próxima coisa
que você precisa fazer é selecionar qual quadro
você deseja analisar. Ok, então vamos fazer isso. Por exemplo, neste caso, vou analisar esse quadro, então basta selecionar esse quadro. Em seguida, basta clicar em Executar e selecionar Analisar design.
Como vocês podem ver. Este plugin Figma tem vários
recursos, como desktop,
celular, pôsteres, prateleiras de
embalagens e material
de marketing Ok, então vou
selecionar Deskcop e landing
porque, como vocês podem ver, isso é como uma página de inscrição, então vou considerar isso
como uma página de destino Então, basta clicar aqui. Ok, como vocês podem ver agora, a
atenção interna está analisando esse
quadro, então espere. Espero que não
demore muito. Ok, então vamos lá.
Esse é o resultado. A propósito, se você
não criou atenção dentro da conta,
você precisa criar uma. Então, basta acessar este
site, certo? E basta clicar em experimentar agora gratuitamente. Você precisará fazer login
usando sua conta do Gmail. Ok, então agora vamos
voltar para a FICMA. Como vocês podem ver, depois de
realizar a análise, a IA gerou esse mapa de sucesso. Portanto, com base nesse mapa de sucesso, parece que as atenções
do usuário estão
concentradas principalmente nessas duas partes Ok, então você também pode sentir
o mapa de foco. Mapa de contraste. Então, ao projetar
sua interface de usuário, você deve considerar isso em
concentrações, certo? E aqui embaixo, eu também
dei pontuação de foco. Como vocês podem ver
pela pontuação de foco, obtivemos 100, o que é muito bom. Você pode estar se perguntando
o que é Fokicore. Portanto, ele mede o nível de concentração de atenção
em sua imagem. OK. E para
uma clareza ideal, obtivemos 77, o que também é muito
bom na minha opinião, pessoal. Ok, então, em seguida, vou
clicar em More Inside Okay, então precisaremos fazer login. Como vocês podem ver,
vocês têm duas opções. Você pode fazer login usando
sua conta do Facebook. Você também pode fazer login usando sua conta do Gmail,
então depende totalmente de você Ok, nesse caso, vou fazer login usando minha conta do Gmail Ok, então, como vocês podem ver, fomos redirecionados para o painel
Attention Inside Ok, então basta clicar nisso. Você pode baixar a
análise. Então, basta clicar aqui. Em seguida, basta clicar na visualização atual. Ok, então esperem, pessoal. Pode levar alguns
segundos. Tudo bem. Como vocês podem ver,
baixamos com sucesso o mapa de sucesso. Ok, então vamos abrir isso. Ok, parece muito legal. A próxima coisa que
faremos é baixar o relatório. Ok, então basta clicar em Obter relatório. Então, espere. Talvez eu
demore alguns segundos. Ok, então você precisará
selecionar o formato do arquivo. Você tem duas opções.
O primeiro é PDF e o segundo
é PowerPoint Vou selecionar PDF. Ok, agora ele está gerando o relatório. Então, esperem, pessoal. Espero que não
demore muito. Ok, agora estamos
baixando o arquivo PDF. Então, espere. Ok, vamos lá. Baixamos o relatório com sucesso. Tudo bem, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês
no próximo vídeo onde
conduziremos uma pesquisa sobre a experiência do usuário. Vejo vocês lá. Tchau.
13. Como conduzir pesquisas de UX com o UX Pilot: Olá pessoal. Bem-vindo
de volta ao curso. Neste vídeo,
vamos conduzir uma pesquisa de experiência
do usuário
usando o UX Pilot. Ok, então há muitas
coisas que vocês podem fazer. Então, o primeiro é
gerar wireframe. Você também pode transformar o
texto em Interno. UX Pilot também tem a revisão de design do AIB
UX, para que você possa fazer o
upload do design da interface do usuário, e essa ferramenta analisará automaticamente seu design e
fornecerá recomendações Você pode gerar um
workshop personalizado e muito mais. E não se preocupem, pessoal. O uso da loja é totalmente gratuito. Ok, então eu vou
te mostrar as seções de preços. Aqui vamos nós. Como vocês podem ver, seu piloto oferece um plano gratuito. Obviamente, existem algumas limitações quando se trata do plano gratuito. Por exemplo, você só pode obter uma prévia das entrevistas com os
usuários. Você só pode obter uma prévia
da entrevista de design. E você só pode ter
cinco modelos de UX. Portanto, certifique-se de
estar totalmente ciente dessas limitações. Ok, então agora vamos começar. A primeira coisa que você
precisa fazer é se inscrever, então basta clicar em Iniciar gratuitamente. Você será redirecionado
para esta página. Ok, então vou me inscrever usando minha conta do Gmail,
então basta clicar aqui Como vocês podem ver, fui
redirecionado para o meu painel. Ok, então neste vídeo, vamos nos
concentrar principalmente na revisão do design. Ok, então revise o design de UX,
aprimore seu design, espalhe criatividade
com novas ideias e aprimore suas habilidades de UX
com análises de design baseadas em IA Ok, então quando você está conduzindo uma análise da experiência
do usuário, seu principal objetivo é
encontrar o design mais ideal
para seus clientes, certo? Você quer garantir
que o usuário do seu aplicativo ou de seus
sites tenha a melhor experiência
possível ao interagir com
seu aplicativo ou seu site E é isso que
vamos fazer neste vídeo. Ok, então essa ferramenta
é muito fácil de usar. Tudo o que você precisa fazer é
fazer o upload do design. Ok, se você se lembra, nos vídeos anteriores, criamos
vários designs de interface do usuário. Ok, então neste exemplo, vou usar o design
criado pela Musso AI Então, vou fazer o upload
dessa imagem. Tudo bem. Você pode se sentir à vontade para fazer
o upload dos designs que quiser
. Depende totalmente de você. Ok, então basta abrir minha pasta. Ok, vamos lá. E
eu vou clicar em Abrir. Ok, agora ele está
fazendo o upload do design. Então, espere. O processo
pode levar alguns segundos. Espero que não demore
muito. Ok, vamos lá. Ok, agora vou
clicar em Iniciar a revisão. Então, agora a IA vai
analisar esse design. E a IA vai dar
recomendações para nós, certo? Como melhorar a experiência
do usuário. Ok, então esperem, pessoal. A revisão pode levar
alguns minutos. Espero que não
demore muito. E estou super animada
para ler a resenha. Ok, vamos lá. Tudo bem, então agora vamos ler a resenha. Em primeiro lugar, temos clareza
e consistência. Portanto, o botão CTA ou Call
to Action, para
começar a conversar, carece de contextos Considere reformular a frase para iniciar bate-papo de
jogo ou algo semelhante para se conectar ao
serviço oferecido Nossas seções de questionário
esclarecem o propósito com um subtítulo que explica
as superfícies fornecidas Para o guia de configuração rápida, precisamos explicar quais recursos
podem ser vistos pelo Linkin a um guia mais detalhado ou
explicar as etapas de configuração Portanto, não devemos presumir que os usuários estejam familiarizados com
a interface do usuário, certo? Por fim, precisamos garantir
um
estilo iconográfico consistente para avatares personalizados,
bate-papo por
voz e texto, detecção de jogos
e transmissão ao vivo Ok, então essas são
recomendações sobre clareza
e consistência. Agora vamos ler a revisão da hierarquia
visual. Ok, então, primeiro,
precisaremos aumentar o contraste do texto de
navegação, dos recursos do
painel, etc., relação ao plano de fundo
para melhor legibilidade Portanto, a recomendação é
usar cores diferentes. Ok, então agora vamos
para o segundo. Entre nas seções de aventura, precisamos diferenciar o começar do botão iniciar
o bate-papo para distinguir o
Bitwin iniciando um bate-papo e se
inscrevendo como um novo usuário Ok, então
talvez seja o mesmo.
Basta usar cores diferentes. E, por fim, para as sessões de
registro, precisamos aumentar o
espaçamento entre as opções de
inscrição do Google e
as opções alternativas de
inscrição por e-mail para melhores separações físicas Tudo bem, pessoal, essas são algumas recomendações que
você precisa levar em consideração se
quiser melhorar
a experiência do usuário do
seu aplicativo ou site.
14. Conclusão e resumo: Pessoal do Holi. Bem-vindo
de volta ao curso. Neste vídeo, vou
resumir tudo o que
aprendemos neste curso também vou compartilhar
dicas
e truques sobre como melhorar
a qualidade do design da interface
do usuário Ok, vamos começar com o primeiro tópico, pesquisa de usuários. Você precisa realizar
pesquisas com usuários para entender as necessidades, os comportamentos e as preferências
do seu público-alvo. Essa visão orientará as decisões
de design e garantirá que a interface esteja alinhada
às expectativas do usuário Ok, primeiro, você precisará
decidir quem é seu
público-alvo. Por exemplo, se você está criando
uma ferramenta de análise de vendas, obviamente, seu público-alvo
são profissionais de vendas. Você precisa fazer
perguntas como essa. Para profissionais de vendas, qual é a parte mais desafiadora quando eles estão
analisando dados de vendas? Que ferramenta adicional pode ser criada para ajudá-los a
analisar os dados de vendas? Então, essas são perguntas
que você precisa fazer. Ok, vamos voltar
ao mapa mental e falar sobre o segundo
tópico, testes de usabilidade Você precisa realizar testes de
usabilidade com usuários reais para obter seu
feedback sobre a interface, a
funcionalidade, a usabilidade
e a experiência geral do usuário Além disso, o
teste iterativo permite que você melhore
continuamente seu
produto com base nas informações do usuário Então você tem duas opções. Você pode encontrar uma pessoa
real para testar seu aplicativo móvel ou site
e obter o feedback dos usuários, ou também pode usar ferramentas de IA
como UX Pilot ou Cloud. Você pode fazer o upload da
captura de tela da interface do usuário e
escrever o baile assim, realizar testes abrangentes de
usabilidade Posicione-se como usuário deste aplicativo. Forneça feedback perspicaz. Ok, então esse é o meu baile de formatura,
um baile muito simples. E levará alguns segundos, talvez dez ou 20 segundos para que
a IA gere a resposta.
Ok, vamos lá. Conduzirei um teste abrangente de
usabilidade
para a placa de teste de análise de vendas do ponto
de vista do Ok, então aqui estão as
primeiras impressões e a experiência geral Ok, essas são uma equipe
forte, limpa e
profissional, sombria,
com bom contraste, informações
claras, hierarquia
com agrupamento lógico, e há duas Três tendas de dados sem blocos de ação
claros e
informações contextuais limitadas para E aqui embaixo, temos um feedback
detalhado sobre usabilidade. Identificamos quatro problemas: localizações atuais
pouco claras,
geramos rótulos de navegação, trilhas de navegação
ausentes
e a funcionalidade de pesquisa E temos essas
três recomendações. Ok, feedback muito legal e muito
perspicaz, pessoal. E vamos rolar para baixo, e a IA também fornece um
resumo. Olha isso. Temos
recomendações prioritárias. Temos a perspectiva final do usuário. Ok, vamos ler
isso. O que eu gosto. O painel parece profissional e apresenta
as informações de forma limpa. O que me frustra é que eu posso ver
os dados, mas não posso agir com base neles. Sei que minha receita total
é de 2,5 milhões, mas não sei
se isso é bom, ruim ou como se compara à
última ou às minhas metas O gráfico parece bom,
mas não me dê os detalhes de que preciso
para tomar decisões. E aqui está o resultado final. Parece um relatório
estático em
vez de uma ferramenta de
análise interativa. Preciso de mais contexto, comparação e interatividade
para realmente analisar desempenho do
meu celular e tomar
decisões informadas E a
pontuação geral de usabilidade é de seis em dez. Ok, agora, vamos
voltar ao mapa mental e falar sobre o terceiro
tópico: tipografia legível Você precisa usar tipografia legível e de
tamanho adequado Considere fatores
como estilo do telefone, espaçamento entre
linhas e contraste
para melhorar a legibilidade, especialmente para
blocos de texto mais longos Isso é muito importante, pessoal. Ok, pessoal, esse é
o fim do curso. Muito obrigado por concluir o curso e desejo a
você tudo de bom. Tchau.