# Guia de UX e UI É de vital importância para nós que os criadores de conteúdo de Decentraland tenham liberdade para usar sua criatividade em toda a sua extensão. Isso é essencial para que Decentraland se torne um lugar recompensador para explorar. No entanto, também é importante ter em mente que as scenes em Decentraland serão visitadas por uma grande variedade de usuários e queremos tornar as scenes acessíveis a todos eles. Por isso, não podemos ignorar a necessidade de estabelecer critérios de design unificados, um guia que possa garantir que os jogadores tenham uma experiência homogênea, intuitiva e agradável, independentemente da scene em que estejam. Neste documento, compartilhamos os Valores de Design de Decentraland, com o objetivo de promover o que consideramos as melhores práticas para projetar a interface e a experiência dos jogadores. Esperamos que esses critérios possam servir como ponto de partida para construir e/ou melhorar as scenes que compõem o Metaverse. ## Valores de design Todas as scenes em Decentraland devem ser projetadas com esses valores em mente: * **Acolhedor**: O jogador se sente calorosamente bem-vindo. * **Fácil de usar**: A UI é fácil e divertida de usar – você deve evitar reinventar a roda * **Fácil de aprender**: Os jogadores acham a UI familiar e intuitiva. Os padrões devem ser usados de forma consistente em toda a scene. * **Oferecer orientação**: A scene dá uma mãozinha. Texto, movimento, som e gráficos conduzirão e indicarão aos jogadores a direção certa. * **Reativo**: Ação-reação clara aos comandos dos jogadores. * **Minimalista**: Menos é mais. Os jogadores podem focar sua atenção no que importa. * **Interessante**: A scene aproveita as coisas que tornam Decentraland único e digno de ser visitado. * **Com propósito**: Os jogadores têm um motivo forte para voltar. * **Agradável**: Os jogadores gostam da aparência, do som e da sensação das coisas ## Experiência do usuário ### Por onde começar? Qual é o objetivo da sua scene? É oferecer uma paisagem bonita para contemplar e explorar? É um museu? É um jogo para um jogador? Um competitivo? Ou segue um fluxo narrativo linear? É importante ter total consciência desse objetivo em cada etapa do processo de design; ele deve guiar todas as suas decisões, as quais podem afetar profundamente a experiência do visitante. Para scenes que seguem um fluxo linear, em que cada etapa depende da anterior, recomendamos delimitar a scene e estabelecer um ou vários pontos de entrada fixos, para evitar que os jogadores encontrem coisas na ordem errada. Aliás, os pontos de entrada são um excelente lugar para exibir uma mensagem de boas-vindas ao jogador e explicar qual deve ser seu objetivo na scene.
In-world banner

Instruções no mundo

Se a experiência do jogador na sua scene não foi pensada para ser linear, mas você ainda precisa fornecer algumas instruções básicas para garantir que ele a aproveite plenamente, você pode mostrar instruções em um pop-up. É possível exibir um pop-up na tela do jogador assim que ele entrar, independentemente da direção de onde veio, e assim garantir que os jogadores sempre saibam o essencial.
Pop-up banner

Instruções em pop-up

{% hint style="warning" %} **📔 Nota**: Certifique-se de que o pop-up não seja intrusivo demais e seja fácil de fechar clicando em qualquer lugar. {% endhint %} Uma mensagem de boas-vindas deve comunicar o seguinte ao jogador: * O título da scene * Dar boas-vindas ao jogador * Objetivo final e motivação para o jogador * Instruções/Próximos passos * *(Opcional)* Controles. Principalmente útil se a sua scene usar eventos globais de botões. Caso contrário, os próprios itens indicam como usá-los ao passar o mouse sobre eles. ### Motivação Provavelmente você vai querer que seus visitantes continuem voltando à sua scene; pense em maneiras de motivá-los a fazer isso! Pergunte a si mesmo: “O que faria um jogador querer voltar à minha scene, ou recomendar a um amigo?” Por exemplo, você pode desafiá-los, dando algo a alcançar que seja difícil o bastante para exigir várias tentativas. Você também pode organizar eventos competitivos multiplayer, que também são uma oportunidade interessante para socializar. Faça da sua scene um lugar dinâmico onde os jogadores sintam que gostam de passar o tempo! ### Feedback e som O som desempenha um papel duplo fundamental; não perca a chance de usá-lo! Por um lado, ele é vital para gerar imersão, já que muitas coisas não parecerão reais se não forem acompanhadas de som. A outra função crucial do som é fornecer feedback às ações do jogador. Se você depender apenas de pistas visuais, não poderá ter certeza de que o jogador estará olhando na direção certa para ver os efeitos de suas ações. Ao usar som, você pode garantir que ele perceba que algo aconteceu. Se você usar pistas visuais e sonoras em combinação, ouvir o som convida o jogador a olhar ao redor em busca da pista visual, caso ele não a tenha visto. Tenha em mente que alguns jogadores podem estar jogando com o som desligado. Se você estiver usando som como forma de fornecer instruções da scene ou uma peça-chave nas mecânicas do jogo, tente também fornecer algo visual para indicar a mesma direção. Por exemplo, você pode exibir texto na parte inferior da UI para acompanhar esses sons, como legendas em um filme. ## Interface do usuário Esta seção tem como objetivo ajudá-lo a construir uma narrativa por meio do design da sua scene que direcione o foco do jogador para os elementos que mais importam. Fazer bom uso das ferramentas descritas aqui pode tornar a experiência muito mais imersiva e bem-sucedida. Não podemos exagerar o quanto cor, ícones, movimento e escala são valiosos para transmitir a mensagem certa: tudo na scene comunica um significado, lembre-se disso. ### Layout Tenha cuidado ao posicionar sua UI em regiões da tela que se sobreponham aos elementos padrão da UI de Decentraland. No cliente de desktop, a UI padrão de Decentraland (minimapa, chat etc.) foi projetada para cobrir apenas os 25% à esquerda da tela. O restante do espaço da tela é uma zona segura, livre para uso dos criadores de conteúdo.
Screen regions used by UI
Não há restrições para posicionar elementos de UI nos 25% à esquerda da tela, mas tenha em mente que o Explorer está continuamente fazendo alterações e melhorias no seu design. Qualquer espaço que não esteja obstruído nessa região hoje poderá ser coberto em versões futuras. {% hint style="info" %} **📱 Área segura no mobile**: O [cliente mobile](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/building-for-mobile.md) tem suas próprias zonas reservadas — o **lado esquerdo** (chat, search, profile, joystick, emotes), o **canto superior direito** (profile e controles da camera), e o **canto inferior direito** (botão de interação). Ao projetar para mobile, mantenha a UI crítica no centro ou no centro superior da tela e siga o [área segura para mobile](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/safe-area.md). Use [`isMobile()`](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/detect-platform.md) para alternar layouts quando as restrições de desktop e mobile não coincidirem. {% endhint %} {% hint style="warning" %} **📔 Nota**: os elementos de UI de scenes e smart wearables sempre aparecem em uma layer atrás da UI padrão de Decentraland. {% endhint %} Tenha sempre uma grade em mente e use-a como seu principal critério ao organizar espacialmente a sua UI. Se estiver trabalhando em uma scene em que um HUD seja necessário, você pode começar agrupando todos os consumíveis juntos (por exemplo, moeda, comida, vida) e, do outro lado, itens acumuláveis como ferramentas ou armas. Tente ser consistente com as métricas da grade e o padding. Torne o feedback para cada ação do jogador claro. ### Cor É importante escolher uma paleta de cores, pois isso dá identidade à sua scene e também sinaliza relações e hierarquia entre os elementos. Ao montar uma paleta de cores, comece selecionando uma cor principal e, opcionalmente, uma secundária. Em seguida, você deve decidir se quer que a paleta seja análoga, complementar ou triádica, etc., em relação a essa cor principal.
Chromatic color palette

Paleta de cores cromática

Strategies for combining colors properly

Estratégias para combinar cores corretamente

{% hint style="info" %} **💡 Dica**: Geradores gratuitos de paletas de cores que recomendamos: [Coolors](https://coolors.co), [Adobe Color CC](https://color.adobe.com/), [Colour Lovers](http://www.colourlovers.com), [Color Hunt](http://www.colorhunt.co), [Color by Hailpixel](http://color.hailpixel.com), [Colour Code](http://colourco.de), [Sip](https://sipapp.io/), [Color Scheme Designer by Paletton](http://paletton.com), [Cohesive Colors](http://javierbyte.github.io/cohesive-colors), [Colr](http://www.colr.org) {% endhint %} A cor principal deve ser a mais usada nos componentes da sua UI. Se a sua paleta não tiver uma cor secundária, você pode destacar elementos combinando a cor principal com preto ou branco. Ter uma cor secundária não é obrigatório, mas ajuda a enfatizar e distinguir os elementos da UI da sua scene. As cores secundárias funcionam melhor para destaques, controles de seleção (sliders e switches), links e títulos. Lembre-se de que cada cor tem suas próprias qualidades expressivas únicas; aproveite isso para comunicar mensagens por meio delas. Por exemplo, o vermelho é frequentemente associado a conotações negativas, enquanto o verde é associado a conotações positivas.
Colored switches

Usar cor da maneira errada pode ser confuso

Você também pode usar cores estrategicamente para indicar mudanças de estado, por exemplo, mudando a cor de um elemento para indicar se ele está ativo ou inativo. {% hint style="warning" %} **📔 Nota**: States comunicam o status dos elementos de UI. Os states de um elemento devem manter certa continuidade, mas precisam ter affordances claras e ser facilmente distinguíveis de outros states e do layout ao redor. {% endhint %}
Active inactive button

Usando cor para estados de botões

Atenção! Ao selecionar cores que serão mostradas em superposição, tenha cuidado especial para garantir que elas sejam legíveis quando usadas juntas. Aqui vai uma regra fundamental: as cores dos elementos mostrados juntos devem sempre ter bastante contraste entre si. Lembre-se de que alguns jogadores podem estar olhando para suas telas em condições de iluminação subótimas, o que dificulta a leitura.
Icon contrast

Ambos os ícones podem ser distinguidos, mas o primeiro tem melhor contraste. Ele se torna mais fácil de ler e exige menos esforço para compreender.

### Hierarquia tipográfica Tente definir uma escala de pelo menos 3 tipos para Títulos, Subtítulos e Corpo. Tenha cuidado com o uso de cor e tamanho da fonte. Todos os tamanhos de fonte devem ser de 12 px ou maiores. Se você for colocar texto exibido sobre imagens (ou sobre o mundo), certamente precisará testar sua legibilidade. Nesses casos, sugerimos adicionar uma região sólida colorida, em uma layer entre o texto e as imagens, de modo que você possa garantir que o texto permaneça legível.
Text over images

Priorize a legibilidade

### Ícones Os ícones sintetizam informações, ajudando você a identificar ações por meio de imagens. Eles são uma ferramenta incrivelmente poderosa para fornecer input que pode ser interpretado rapidamente, em vez de usar texto para rotular coisas, o que exige mais atenção e tempo do jogador. Também é útil mostrar ícones em combinação com texto, pois isso ajuda a desambiguar seus significados.
Icon examples

Use ícones como uma linguagem universal

### Movimento Use movimento para fornecer feedback e guiar o caminho quando necessário. O movimento ajuda os jogadores a focar sua atenção e ajuda a manter a continuidade à medida que a UI muda.
Adding glow

Use partículas, escala ou margens em fading para fazer as coisas se destacarem

### Escrita e estrutura do conteúdo O texto da UI pode tornar as interfaces mais usáveis e dar mais confiança aos jogadores em suas ações. Sempre torne o texto da UI o mais conciso possível. Os jogadores estão ali para jogar, não para ler. Qualquer texto que pareça longo demais não será lido pela maioria dos jogadores. Receba seus jogadores com uma Welcome Message e diga a eles o objetivo da scene. Comece esclarecendo o objetivo na scene, depois as ações necessárias para alcançá-lo. Em seguida, você pode revelar informações progressivamente conforme elas forem necessárias; assim, os jogadores não se sentirão sobrecarregados logo no início da experiência. Assim como com recursos gráficos, tente usar palavras consistentes em todos os recursos da sua UI e na narrativa. Novos recursos do SDK - Em breve! Interações com objetos Agora não é possível para os jogadores saber quais objetos são interativos e quais não são, até que realmente cliquem ou pressionem botões neles. Temos trabalhado em um novo recurso para que os criadores possam mostrar mensagens toast personalizadas ao mirar em um objeto interativo. Essa mensagem indica qual input usar e pode ter texto personalizado para descrever os efeitos da interação. Recomendamos fortemente que você o use quando for lançado; sua scene ficará mais natural e fácil de usar. Câmera em 3ª pessoa No momento, estamos experimentando adicionar suporte para uma câmera em 3ª pessoa. Você pode testá-la no Explorer pressionando a tecla ‘V’. (Observação: ainda não é compatível com uma preview de scene). Você pode começar a pensar em desenvolver novas experiências ou jogos incríveis que podem ficar muito mais atraentes graças a uma câmera em 3ª pessoa! --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/desenhar-a-experiencia/ux-ui-guide.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.