Compartilhar via


Kit de Design do Surface Duo (no Figma)

Surface Duo Design Kit

O Surface Duo Design Kit é um recurso da comunidade figma para ajudar designers de aplicativos e desenvolvedores a criar experiências de usuário de tela dupla. Os componentes deste kit são os blocos de construção do que fazem o Surface Duo se sentir como produtos da Microsoft no Android.

  • Quadro de Dispositivos – Contornos de dispositivos coloridos glaciares e obsidianos para apresentar capturas de tela.
  • Áreas seguras – as áreas seguras impedem que o conteúdo subloque o cabeçalho do aplicativo, a barra de navegação, as guias e a dobradiça.
  • Interações com a caneta – Como projetar interações para entrada de caneta.
  • Padrões e diretrizes de design – os padrões de design no kit mostram as possibilidades de exibições de tela dupla para diferentes cenários de aplicativo e como todas as peças se unem para uma experiência de produto significativa.
  • Diretrizes de vídeo e mídia – dicas para incluir vídeos e imagens em uma experiência do usuário dobrável.
  • Posturas – os dispositivos de tela dupla podem vir em uma variedade de variações de hardware e design industrial. O recém lançado Surface Duo, juntamente com outros dispositivos planejados, têm o objetivo de ajudar a definir a categoria, porém outros dispositivos poderão oferecer telas maiores ou designs variados de dobradiça. Quando você cria aplicativos, tenha em mente que você deve evitar a criação de acordo com as especificações de dispositivos específicos disponíveis atualmente.
  • Layout, controles e plug-ins – com um fator forma de tela dupla em mente, garantimos que você possa projetar da maneira que quiser usando controles e layouts familiares. Também destacamos detalhes para você estar ciente ao projetar para aplicativos de tela dupla, como a dobradiça e incluir layouts para design em qualquer lugar.
  • Componentes – cada componente é criado para ser o mais simples possível para que sejam fáceis de gerenciar e trabalhar. Alguns componentes têm camadas ocultas que você pode ativar/desativar para adicionar variações sem desanexar.
  • Conjunto de componentes – componentes mestres para navegação e outros elementos de design como conjuntos agrupados que ajudam a organizar melhor as variantes que contêm diferentes modelos, modos, contagens de tela e orientações.

Passo a passo do Figma